favicon-env 0.1.0 → 0.3.0

package/dist/ssr.d.ts

@@ -1 +1,20 @@
-export { f as faviconDataUri, s as svgToDataUri, t as tintSvg } from './ssr-CI5GvAY9.js';
+import type { EnvConfig } from './types';
+/**
+ * Return `svg` (an SVG *string*) with the environment's tint and/or badge baked
+ * in — the form that survives being rendered as an `<img>` / favicon, with no
+ * first-paint flash. The tint is a CSS `filter` on a wrapping group; the badge
+ * is an appended `<g>` positioned via the SVG's `viewBox` (a badge is skipped if
+ * no `viewBox` or `width`/`height` can be read).
+ *
+ * Returns the SVG unchanged when `tint` is falsy, has nothing to apply, or the
+ * input isn't a recognisable `<svg>…</svg>` document.
+ */
+export declare function tintSvg(svg: string, tint: EnvConfig): string;
+/** Percent-encode an SVG string as a `data:` URI suitable for a favicon `href`. */
+export declare function svgToDataUri(svg: string): string;
+/**
+ * Convenience: `tintSvg` + `svgToDataUri`. Give it your favicon SVG and the
+ * config for the current build's environment; get back a ready-to-use
+ * `<link rel="icon" href="…">` value with no first-paint flash.
+ */
+export declare function faviconDataUri(svg: string, tint: EnvConfig): string;

package/dist/ssr.js

@@ -1,3 +1,3 @@
-export { faviconDataUri, svgToDataUri, tintSvg } from './chunk-NRMMGQRU.js';
+export { faviconDataUri, svgToDataUri, tintSvg } from './chunk-OA3YX73Z.js';
 //# sourceMappingURL=ssr.js.map
 //# sourceMappingURL=ssr.js.map

package/dist/tint.d.ts

@@ -0,0 +1,25 @@
+import type { EnvFaviconOptions, EnvRule, EnvTint } from './types';
+/**
+ * Return the tint of the first `rule` whose `match` matches `url`, or `null` if
+ * none do. A `RegExp` `match` is tested against `url.host` and its captures are
+ * interpolated into `badge.text` (`$1`, `$<name>`); a function `match` receives
+ * the `URL`. Exposed so the same rules can drive server-side rendering from a
+ * request URL — pair the result with `favicon-env/ssr`'s `faviconDataUri`.
+ */
+export declare function matchRules(rules: EnvRule[], url: URL): EnvTint | null;
+/**
+ * Tint / decorate the page favicon for the current environment. Resolves a tint
+ * from `rules` (URL match) → `auto` → `environments`/`detect`, then reads the
+ * existing `<link rel="icon">` (or a per-env `src` / `options.source`), redraws
+ * it on a `<canvas>` with the hue / filter / badge, and swaps in the result as a
+ * PNG data URL.
+ *
+ * A no-op during SSR (no `document`) or when nothing resolves. Works with any
+ * favicon format (svg / png / ico). A custom `src` with no recolour or badge is
+ * swapped in directly, skipping the canvas — which avoids cross-origin taint and
+ * keeps vector sources sharp. If a canvas source is cross-origin without CORS
+ * headers the canvas is tainted and the favicon is left untouched.
+ *
+ * @returns a promise that resolves once the swap has been attempted.
+ */
+export declare function envFavicon(options?: EnvFaviconOptions): Promise<void>;

package/dist/{ssr-CI5GvAY9.d.ts → types.d.ts}

@@ -1,10 +1,23 @@
 /** A tint / decoration to apply to the favicon for a given environment. */
-interface EnvTint {
+export interface EnvTint {
     /** Hue rotation in degrees applied to the whole icon (e.g. `120`). */
     hue?: number;
+    /**
+     * Invert the icon's colours — `true` for a full invert, or a number `0`–`1`
+     * for a partial one (maps to CSS `invert()`). Composes *with* `hue` (both are
+     * applied); an explicit `filter` beats it, and `tint` (a duotone) wins over it.
+     */
+    invert?: boolean | number;
+    /**
+     * Colourise the icon to this exact colour (any CSS colour), preserving the
+     * artwork's shape and relative shading — a duotone from black up to `tint`.
+     * Unlike `hue` (a *relative* rotation) this sets an *absolute* colour, so a
+     * white logo becomes solid `tint`. Beats `hue`; an explicit `filter` beats it.
+     */
+    tint?: string;
     /**
      * Explicit CSS filter string, e.g. `'hue-rotate(120deg) saturate(1.4)'`.
-     * Takes precedence over `hue` when both are set.
+     * Takes precedence over `hue` / `tint` when set.
      */
     filter?: string;
     /**
@@ -20,7 +33,7 @@ interface EnvTint {
     badge?: string | Badge;
 }
 /** A badge drawn on top of the icon. */
-interface Badge {
+export interface Badge {
     /** Text to render, e.g. a PR number (`344`, `'#344'`). Omit for a plain dot. */
     text?: string | number;
     /** Background colour. Default `'#ef4444'`. */
@@ -40,17 +53,17 @@ interface Badge {
     /** Badge opacity, 0–1 (default `1`). With `shape: 'cover'`, below `1` lets the icon show through. */
     opacity?: number;
 }
-type BadgeCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+export type BadgeCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
 /** Per-environment config. `false` / `null` / omitted leaves the favicon untouched. */
-type EnvConfig = EnvTint | false | null | undefined;
+export type EnvConfig = EnvTint | false | null | undefined;
 /** Computes badge text from a regex match (if any) and the current URL. */
-type BadgeTextFn = (match: RegExpMatchArray | null, url: URL) => string | number;
+export type BadgeTextFn = (match: RegExpMatchArray | null, url: URL) => string | number;
 /**
  * A `Badge` for use in a `rule`, whose `text` may additionally be a function, or
  * a template with `$1` / `$<name>` placeholders filled from the rule's regex
  * captures — e.g. `'#$1'` against `/^pr-(\d+)\./`.
  */
-type RuleBadge = Omit<Badge, 'text'> & {
+export type RuleBadge = Omit<Badge, 'text'> & {
     text?: string | number | BadgeTextFn;
 };
 /**
@@ -58,7 +71,7 @@ type RuleBadge = Omit<Badge, 'text'> & {
  * later rule is tried). Rules are checked in order, before `auto` and
  * `environments`/`detect`.
  */
-type EnvRule = Omit<EnvTint, 'badge'> & {
+export type EnvRule = Omit<EnvTint, 'badge'> & {
     /**
      * A `RegExp` (tested against `location.host`, i.e. `hostname:port`) or a
      * function receiving the full `URL`. Regex captures feed `badge.text`.
@@ -68,7 +81,7 @@ type EnvRule = Omit<EnvTint, 'badge'> & {
     badge?: string | RuleBadge;
 };
 /** Options for `envFavicon`. */
-interface EnvFaviconOptions {
+export interface EnvFaviconOptions {
     /** Map of environment name → tint. A missing entry (or `false`) means "leave as-is". */
     environments?: Record<string, EnvConfig>;
     /**
@@ -94,29 +107,7 @@ interface EnvFaviconOptions {
     size?: number;
 }
 /** Tuning for `EnvFaviconOptions.auto`. */
-interface AutoOptions {
+export interface AutoOptions {
     /** Extra hue offset (deg) added to the derived hue — shifts the whole palette. */
     offset?: number;
 }
-
-/**
- * Return `svg` (an SVG *string*) with the environment's tint and/or badge baked
- * in — the form that survives being rendered as an `<img>` / favicon, with no
- * first-paint flash. The tint is a CSS `filter` on a wrapping group; the badge
- * is an appended `<g>` positioned via the SVG's `viewBox` (a badge is skipped if
- * no `viewBox` or `width`/`height` can be read).
- *
- * Returns the SVG unchanged when `tint` is falsy, has nothing to apply, or the
- * input isn't a recognisable `<svg>…</svg>` document.
- */
-declare function tintSvg(svg: string, tint: EnvConfig): string;
-/** Percent-encode an SVG string as a `data:` URI suitable for a favicon `href`. */
-declare function svgToDataUri(svg: string): string;
-/**
- * Convenience: `tintSvg` + `svgToDataUri`. Give it your favicon SVG and the
- * config for the current build's environment; get back a ready-to-use
- * `<link rel="icon" href="…">` value with no first-paint flash.
- */
-declare function faviconDataUri(svg: string, tint: EnvConfig): string;
-
-export { type AutoOptions as A, type Badge as B, type EnvFaviconOptions as E, type RuleBadge as R, type EnvRule as a, type EnvTint as b, type BadgeCorner as c, type BadgeTextFn as d, type EnvConfig as e, faviconDataUri as f, svgToDataUri as s, tintSvg as t };

package/package.json

@@ -1,30 +1,39 @@
 {
   "name": "favicon-env",
-  "version": "0.1.0",
-  "type": "module",
+  "version": "0.3.0",
   "description": "Tint your favicon per environment (dev/staging/prod) so you can tell instances apart at a glance. Runtime canvas mode + build-time SVG mode. Zero dependencies.",
-  "license": "MIT",
-  "author": "Amir Abushanab",
   "keywords": [
-    "favicon",
-    "environment",
-    "env",
-    "dev",
-    "staging",
-    "hue",
-    "tint",
     "canvas",
+    "dev",
     "developer-experience",
     "dx",
-    "tanstack-intent"
+    "env",
+    "environment",
+    "favicon",
+    "hue",
+    "staging",
+    "tanstack-intent",
+    "tint"
   ],
+  "homepage": "https://github.com/Amir-Abushanab/favicon-env#readme",
+  "bugs": "https://github.com/Amir-Abushanab/favicon-env/issues",
+  "license": "MIT",
+  "author": "Amir Abushanab",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/amir-abushanab/favicon-env.git"
+    "url": "git+https://github.com/Amir-Abushanab/favicon-env.git"
   },
-  "homepage": "https://github.com/amir-abushanab/favicon-env#readme",
-  "bugs": "https://github.com/amir-abushanab/favicon-env/issues",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "skills",
+    "!skills/_artifacts"
+  ],
+  "type": "module",
   "sideEffects": false,
+  "unpkg": "./dist/favicon-env.global.js",
+  "jsdelivr": "./dist/favicon-env.global.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -36,36 +45,30 @@
     },
     "./global": "./dist/favicon-env.global.js"
   },
-  "unpkg": "./dist/favicon-env.global.js",
-  "jsdelivr": "./dist/favicon-env.global.js",
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE",
-    "skills",
-    "!skills/_artifacts"
-  ],
   "publishConfig": {
     "access": "public"
   },
-  "simple-git-hooks": {
-    "pre-commit": "pnpm check"
-  },
   "devDependencies": {
     "@changesets/cli": "^2.31.0",
+    "@playwright/test": "^1.61.1",
+    "@swc/core": "^1.15.43",
     "@tanstack/intent": "^0.3.5",
     "dependency-cruiser": "^18.0.0",
-    "knip": "^6.24.0",
-    "oxfmt": "^0.57.0",
-    "oxlint": "^1.72.0",
+    "knip": "^6.26.0",
+    "oxfmt": "^0.58.0",
+    "oxlint": "^1.73.0",
     "publint": "^0.3.21",
     "simple-git-hooks": "^2.13.1",
     "tsup": "^8.5.1",
-    "typescript": "^6.0.3"
+    "typescript": "^7.0.2"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm check"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && tsc -p tsconfig.build.json",
     "dev": "node scripts/serve.mjs --watch",
+    "hero": "pnpm build && node scripts/hero.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "oxlint src",
     "format": "oxfmt src",
@@ -74,8 +77,16 @@
     "check": "oxfmt --check src && oxlint src && knip && depcruise src",
     "publint": "publint --strict",
     "intent:validate": "intent validate skills",
+    "intent:stale": "intent stale skills",
     "pretest": "pnpm build",
-    "test": "node --test",
+    "test": "node --test test/pure.test.mjs test/skill.test.mjs",
+    "test:skill": "node --test test/skill.test.mjs",
+    "test:frameworks": "node test/frameworks/run.mjs",
+    "test:frameworks:firefox": "node test/frameworks/run.mjs --browser firefox",
+    "test:frameworks:webkit": "node test/frameworks/run.mjs --browser webkit",
+    "test:frameworks:browsers": "pnpm test:frameworks && pnpm test:frameworks:firefox && pnpm test:frameworks:webkit",
+    "dev:frameworks": "node test/frameworks/serve-all.mjs",
+    "test:all": "pnpm test && pnpm test:frameworks",
     "ncu": "pnpm dlx npm-check-updates",
     "changeset": "changeset",
     "version": "changeset version",

package/skills/core/SKILL.md

@@ -3,13 +3,14 @@ name: core
 description: >
   favicon-env tints the browser favicon per environment (dev/staging/prod) so
   identical tabs are distinguishable. Load when calling envFavicon, choosing
-  runtime (canvas) vs build-time (SSR) mode, adding hue/filter tints or
-  badges/PR numbers, wiring it into Next.js/TanStack/Astro/Vite, or configuring
-  detect, environments, rules, or auto mode.
+  runtime (canvas) vs build-time (SSR) mode, adding hue/invert/filter tints or
+  badges/PR numbers, wiring it into Next.js/TanStack/Astro/SvelteKit/SolidStart/
+  Angular/Nuxt/Vite/plain HTML, or configuring detect, environments, rules, or
+  auto mode.
 metadata:
   type: core
   library: favicon-env
-  library_version: '0.1.0'
+  library_version: '0.2.0'
 sources:
   - 'Amir-Abushanab/favicon-env:README.md'
   - 'Amir-Abushanab/favicon-env:src/tint.ts'
@@ -27,24 +28,65 @@ when you control the favicon SVG.
 
 ## Setup
 
-Runtime — call once on the client, as early as possible:
+Runtime — gate the import with a compile-time public environment value:
 
 ```js
-import { envFavicon } from 'favicon-env'
-
-void envFavicon({
-  environments: {
-    dev: { hue: 130 },             // hue-rotate degrees
-    staging: { badge: '#f59e0b' }, // a corner dot; keeps the logo intact
-    // prod omitted → favicon left untouched
-  },
-})
+const appEnv = import.meta.env.VITE_APP_ENV ?? 'prod';
+
+if (appEnv === 'dev' || appEnv === 'staging') {
+  void import('favicon-env').then(({ envFavicon }) =>
+    envFavicon({
+      environments: {
+        dev: { tint: '#22c55e' },
+        staging: { badge: '#f59e0b' },
+      },
+      detect: () => appEnv,
+    }),
+  );
+}
 ```
 
+With a literal prod value, the bundler can remove the branch and package runtime.
+An unconditional call remains bundled even when `prod` is absent from `environments`.
+
 The environment name defaults to a `location.hostname` heuristic (`defaultDetect`):
 `localhost`/`*.local`/raw IPs → `dev`; a `staging`/`preview`/`qa`/`uat`/… segment →
 `staging`; everything else → `prod`.
 
+### Framework placement
+
+| Runtime        | Put `envFavicon` here                                                          |
+| -------------- | ------------------------------------------------------------------------------ |
+| Next.js        | Client component `useEffect`; render once from the root layout                 |
+| TanStack Start | Optional `src/client.tsx`, before `hydrateRoot`                                |
+| Astro          | Bundled client `<script>` in the root layout                                   |
+| SvelteKit      | `onMount` in persistent `src/routes/+layout.svelte`                            |
+| SolidStart     | `onMount` in `src/app.tsx`; use `onCleanup` for the observer                   |
+| Angular SSR    | `afterNextRender` in the standalone root component; clean up with `DestroyRef` |
+| Nuxt           | `app/plugins/favicon-env.client.ts`, using an explicit Vite build constant     |
+| Vite SPA       | Client entry module (`src/main.ts`, etc.)                                      |
+| Plain HTML     | Native module or the global build (`window.faviconEnv`)                        |
+
+For any SSR router/head manager that declares the favicon itself, wrap the call in
+the head-observer pattern below. Hydration or navigation can otherwise restore its
+unmanaged `<link rel="icon">` after an early call. Apply only when an unmanaged icon
+exists, queue one microtask at a time, and disconnect through the framework's native
+cleanup hook when the integration is component-scoped.
+
+### Zero runtime bytes in prod
+
+Put `import('favicon-env')` behind a value the client bundler replaces at build time.
+Use `NEXT_PUBLIC_*` in Next and `import.meta.env.VITE_*`/`PUBLIC_*` where those values
+are folded to literals. SvelteKit and Nuxt may preserve their normal public runtime
+configuration, so define a dedicated constant through Vite's `define` option and use
+that in the guard.
+
+Angular's application builder can emit a lazy chunk even behind a false `define`
+guard. Put the dynamic import in a local loader module and replace that module with a
+typed no-op in the prod build using Angular `fileReplacements`. For plain HTML, omit
+the ESM/global script from the generated prod page. Do not use `enabled: false`: the
+runtime must already be imported to read that option.
+
 ## Core Patterns
 
 ### Custom environments — any name, but supply a matching `detect`
@@ -53,11 +95,11 @@ The environment name defaults to a `location.hostname` heuristic (`defaultDetect
 void envFavicon({
   environments: { canary: { hue: 280 }, demo: { badge: '#22c55e' } },
   detect: () => {
-    if (location.hostname.startsWith('canary.')) return 'canary'
-    if (location.hostname.endsWith('.demo.acme.com')) return 'demo'
-    return 'prod' // not in the map → untouched
+    if (location.hostname.startsWith('canary.')) return 'canary';
+    if (location.hostname.endsWith('.demo.acme.com')) return 'demo';
+    return 'prod'; // not in the map → untouched
   },
-})
+});
 ```
 
 `environments` keys are arbitrary strings, but `defaultDetect` only ever returns
@@ -72,7 +114,7 @@ void envFavicon({
     { match: /^pr-(\d+)\./, badge: { text: '#$1', color: '#8b5cf6', shape: 'cover' } },
     { match: /staging\./, hue: 45 },
   ],
-})
+});
 ```
 
 `match` is a `RegExp` tested against `location.host` (includes `:port`) or a
@@ -82,7 +124,7 @@ it falls through to `auto`/`environments`.
 ### Auto mode — one stable colour per host, zero config
 
 ```js
-void envFavicon({ auto: true })
+void envFavicon({ auto: true });
 ```
 
 Derives a deterministic hue from `location.host`, so every origin and port gets its
@@ -91,11 +133,11 @@ own colour — handy for telling several dev servers apart.
 ### Build-time SSR — no first-paint flash
 
 ```js
-import { faviconDataUri } from 'favicon-env/ssr'
-import favicon from './favicon.svg?raw'
+import { faviconDataUri } from 'favicon-env/ssr';
+import favicon from './favicon.svg?raw';
 
 // during an Astro/Vite build; pick the tint for the current env
-const href = faviconDataUri(favicon, { hue: 130 })
+const href = faviconDataUri(favicon, { hue: 130 });
 // → render into <link rel="icon" type="image/svg+xml" href={href}>
 ```
 
@@ -109,7 +151,7 @@ CSS `filter` and/or badge into the SVG using its `viewBox`.
 Wrong:
 
 ```js
-void envFavicon({ environments: { canary: { hue: 280 } } })
+void envFavicon({ environments: { canary: { hue: 280 } } });
 ```
 
 Correct:
@@ -118,7 +160,7 @@ Correct:
 void envFavicon({
   environments: { canary: { hue: 280 } },
   detect: () => (location.hostname.startsWith('canary.') ? 'canary' : 'prod'),
-})
+});
 ```
 
 `defaultDetect` only returns `dev`/`staging`/`prod`, so `environments.canary` is
@@ -132,37 +174,106 @@ Wrong:
 
 ```jsx
 // app/page.tsx — a Next.js App Router Server Component
-import { envFavicon } from 'favicon-env'
-envFavicon({ environments: { dev: { hue: 130 } } }) // runs on the server
+import { envFavicon } from 'favicon-env';
+envFavicon({ environments: { dev: { hue: 130 } } }); // runs on the server
 ```
 
 Correct:
 
 ```jsx
-'use client'
-import { useEffect } from 'react'
-import { envFavicon } from 'favicon-env'
+'use client';
+import { useEffect } from 'react';
+
+const appEnv = process.env.NEXT_PUBLIC_APP_ENV ?? 'prod';
 
 export function FaviconEnv() {
   useEffect(() => {
-    void envFavicon({ environments: { dev: { hue: 130 } } })
-  }, [])
-  return null
+    if (appEnv !== 'dev' && appEnv !== 'staging') return;
+
+    let queued = false;
+    const apply = async () => {
+      queued = false;
+      const { envFavicon } = await import('favicon-env');
+      await envFavicon({
+        environments: { dev: { tint: '#22c55e' }, staging: { badge: '#f59e0b' } },
+        detect: () => appEnv,
+      });
+    };
+    const schedule = () => {
+      if (queued) return;
+      queued = true;
+      queueMicrotask(apply);
+    };
+    const observer = new MutationObserver(() => {
+      if (document.head.querySelector('link[rel~="icon"]:not([data-favicon-env])')) schedule();
+    });
+    observer.observe(document.head, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['href', 'rel'],
+    });
+    schedule();
+    return () => observer.disconnect();
+  }, []);
+  return null;
 }
 ```
 
 Runtime mode needs `document`; on the server it is a no-op and never tints the
 client. Use `useEffect` in a client component (Next App Router), or call it at a
-client-entry module (Vite/TanStack `src/main.ts`, or an Astro `<script>`).
+client-entry module (Vite/TanStack Router `src/main.ts`, TanStack Start's optional
+`src/client.tsx`, an Astro `<script>`, SvelteKit/Solid `onMount`, Angular
+`afterNextRender`, or a Nuxt `.client.ts` plugin). In TanStack Start, preserve the standard
+`hydrateRoot(document, <StartClient />)` code. Install the same head observer shown
+above before hydration because TanStack's head hydration can restore its route-managed
+icon after an early `envFavicon` call; no React effect cleanup is needed for this
+page-lifetime client entry.
+Do not put the Next.js integration in `instrumentation-client.ts`: it runs before
+hydration, so Next's metadata reconciliation can restore the original icon after
+`envFavicon` replaces it. In the client component, observe `document.head` and
+reapply only when an unmanaged icon appears; disconnect the observer in the Next effect
+cleanup for React StrictMode. This also handles route-level metadata changes.
+
+In SvelteKit put the observer in a persistent `+layout.svelte` and return cleanup
+from `onMount`. In SolidStart register cleanup with `onCleanup` inside `onMount`.
+In Angular register it with `DestroyRef.onDestroy` inside `afterNextRender`. In Nuxt
+use a `.client.ts` plugin; a page-lifetime plugin observer does not require component
+cleanup. Use public build constants (`NEXT_PUBLIC_*`, `PUBLIC_*`, `VITE_*`, or a Vite
+`define`) rather than changing `NODE_ENV` to `staging`. Use Angular file replacement
+and explicit Vite constants for SvelteKit/Nuxt when prod must emit no runtime chunk.
 
 Source: src/tint.ts (`typeof document` guard), README "Runtime mode"
 
+### MEDIUM — Using `hue` when you want an exact colour
+
+Wrong:
+
+```js
+// trying to make dev green — but hue-rotate is relative to the base icon
+void envFavicon({ environments: { dev: { hue: 130 } } });
+```
+
+Correct:
+
+```js
+void envFavicon({ environments: { dev: { tint: '#22c55e' } } });
+```
+
+`hue` _rotates_ the existing colours (the result depends on the base icon, and it
+barely moves white/black/grey). `tint` colourises to an _exact_ colour while
+preserving shape and shading. For a flat block, use a text-less `cover` badge. For a
+quick high-contrast flip with no colour to choose, use `invert: true` (or a `0`–`1`
+amount); it composes with `hue`, while `tint` and an explicit `filter` take precedence.
+
+Source: src/types.ts (EnvTint.tint / EnvTint.invert), src/tint.ts (colorize path), src/filter.ts
+
 ### MEDIUM — Multi-digit badge as a corner pill
 
 Wrong:
 
 ```js
-void envFavicon({ environments: { preview: { badge: { text: '#344' } } } })
+void envFavicon({ environments: { preview: { badge: { text: '#344' } } } });
 ```
 
 Correct:
@@ -170,7 +281,7 @@ Correct:
 ```js
 void envFavicon({
   environments: { preview: { badge: { text: '#344', shape: 'cover' } } },
-})
+});
 ```
 
 The default `pill` badge sits in a corner at ~half the icon, so a 3–4 digit number
@@ -186,14 +297,14 @@ Wrong:
 void envFavicon({
   source: 'https://cdn.example.com/favicon.png', // served without CORS headers
   environments: { dev: { hue: 130 } },
-})
+});
 ```
 
 Correct:
 
 ```js
 // serve the favicon same-origin, or with Access-Control-Allow-Origin
-void envFavicon({ source: '/favicon.png', environments: { dev: { hue: 130 } } })
+void envFavicon({ source: '/favicon.png', environments: { dev: { hue: 130 } } });
 ```
 
 Tinting draws to a canvas; a cross-origin image without CORS taints it, so
@@ -207,16 +318,16 @@ Wrong:
 
 ```js
 // runtime mode always shows the untinted icon until JS runs
-import { envFavicon } from 'favicon-env'
-void envFavicon({ environments: { dev: { hue: 130 } } })
+import { envFavicon } from 'favicon-env';
+void envFavicon({ environments: { dev: { hue: 130 } } });
 ```
 
 Correct:
 
 ```js
 // bake the tint into the initial HTML at build time — no flash
-import { faviconDataUri } from 'favicon-env/ssr'
-const href = faviconDataUri(faviconSvg, { hue: 130 })
+import { faviconDataUri } from 'favicon-env/ssr';
+const href = faviconDataUri(faviconSvg, { hue: 130 });
 ```
 
 `envFavicon` runs after first paint, so the original icon flashes briefly. When
@@ -229,15 +340,15 @@ Source: README "First-paint flash", src/ssr.ts
 Wrong:
 
 ```js
-envFavicon({ environments: { dev: { hue: 130 } } })
-const href = document.querySelector('link[rel~="icon"]').href // old icon — not swapped yet
+envFavicon({ environments: { dev: { hue: 130 } } });
+const href = document.querySelector('link[rel~="icon"]').href; // old icon — not swapped yet
 ```
 
 Correct:
 
 ```js
-await envFavicon({ environments: { dev: { hue: 130 } } })
-const href = document.querySelector('link[rel~="icon"]').href
+await envFavicon({ environments: { dev: { hue: 130 } } });
+const href = document.querySelector('link[rel~="icon"]').href;
 ```
 
 `envFavicon` returns a `Promise` and loads the base image asynchronously before