@meddleware/frontend-config 0.0.7 → 0.0.9

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.9] - 2026-11-13
+
+The Lighthouse audit allowlist template is empty: @lhci/cli 0.16 no longer installs extract-zip, so the two dated extract-zip entries are gone (mw-sync --write adopts it).
+
+## [0.0.8] - 2026-11-08
+
+### Added
+
+- `brandIcons` (`/vite`, added by `meddlewareApp`): serves and emits the company mark's favicon set from `@meddleware/ui/brand/*` with a web manifest and the `<link>` tags. `mw-sync` fails an app that keeps its own `public/favicon.*` (`--write` removes it).
+
+### Changed
+
+- The `docs` CSP profile no longer allows `https:` images (the documentation sites load none).
+
 ## [0.0.7] - 2026-11-07
 
 ### Fixed

package/README.md

@@ -10,7 +10,7 @@ same accessibility and browser-support bar.
 | `/stylelint` | `stylelintConfig({ tokens?, compat?, browsers?, rules? })` — standard config, no hex, token-only colour and `z-index`, `@double-great/stylelint-a11y`, `stylelint-no-unsupported-browser-features`. |
 | `/html-validate` | `htmlValidateConfig({ elements?, rules? })` — recommended + `html-validate:a11y` + Vue, with `@meddleware/ui` components described as the native element they render. |
 | `/postcss` | Autoprefixer for the repo's browserslist. |
-| `/vite` | `viteTarget()` — Vite `build.target` derived from the browserslist; `meddlewareApp({ plugins, theme?, wallet?, config? })` — the whole Vite configuration of a tool app (target, theme-init, e2e guard, wallet-adapter kept out of pre-bundling); `themeInit({ default })` — a Vite plugin that loads ui's `theme-init.js` first in `<head>` (the saved or default colour mode and the season applied before first paint, no inline script, no CSP hash) and adds `color-scheme` and the browser-chrome `theme-color` from the tokens. |
+| `/vite` | `viteTarget()` — Vite `build.target` derived from the browserslist; `meddlewareApp({ plugins, theme?, wallet?, name?, config? })` — the whole Vite configuration of a tool app (target, theme-init, brand icons, e2e guard, wallet-adapter kept out of pre-bundling); `brandIcons({ name? })` — the company mark's favicon set from `@meddleware/ui/brand/*` (served in dev, emitted at the site root with a web manifest, `<link>` tags injected; an app keeps no icon of its own and `mw-sync --check` fails on a `public/favicon.*`); `themeInit({ default })` — a Vite plugin that loads ui's `theme-init.js` first in `<head>` (the saved or default colour mode and the season applied before first paint, no inline script, no CSP hash) and adds `color-scheme` and the browser-chrome `theme-color` from the tokens. |
 | `/playwright` | `definePlaywrightConfig({ port, kind?, command?, browsers?, extra? })`. |
 | `/axe` | `expectAccessible(page, options)` — WCAG 2.2 AA gate; AAA as `aaa: 'gate'`, `'report'` or `'off'`. |
 | `/look` | `looks()`, `applyLook(page, theme, season)`, `offline(page)`, `VIEWPORTS`, `THEMES`, `SEASONS` — the viewport × colour mode × season matrix. |

package/dist/vite.d.ts

@@ -57,12 +57,27 @@ export function assertE2eOnlyInE2eMode(mode: string, env?: Record<string, string
  * @param {import('vite').PluginOption[]} options.plugins The app's plugins (`vue()` …); `themeInit` is added after them.
  * @param {'light' | 'dark' | 'system'} [options.theme] The mode a first visit gets (default `dark`, the brand default).
  * @param {boolean} [options.wallet] The app uses `@meddleware/wallet-adapter` (default true): keep it out of pre-bundling.
+ * @param {string} [options.name] The app's name for the web manifest (default `Meddleware`).
  * @param {import('vite').UserConfig} [options.config] Anything else (`base`, `build.rollupOptions`, `server` …); `build` is merged.
  * @returns {import('vite').UserConfigFnObject}
  */
-export function meddlewareApp({ plugins, theme, wallet, config }: {
+export function meddlewareApp({ plugins, theme, wallet, name, config }: {
     plugins: import("vite").PluginOption[];
     theme?: "light" | "dark" | "system" | undefined;
     wallet?: boolean | undefined;
+    name?: string | undefined;
     config?: import("vite").UserConfig | undefined;
 }): import("vite").UserConfigFnObject;
+/**
+ * The favicon set of the company mark (the Kopimi "K"), for an app's `index.html`: serves the files from `@meddleware/ui` in dev, emits them
+ * into the build at the site root (`/favicon.svg`, `/favicon.ico`, `/apple-touch-icon.png`, `/icon-192.png`, `/icon-512.png`, `/site.webmanifest`)
+ * and adds the `<link>` tags. An app keeps no icon of its own (`mw-sync --check` fails on a `public/favicon.*`), and its `index.html` has no
+ * `<link rel="icon">`.
+ *
+ * @param {object} [options]
+ * @param {string} [options.name] The app's name, for the web manifest. Default `Meddleware`.
+ * @returns {import('vite').Plugin}
+ */
+export function brandIcons({ name }?: {
+    name?: string | undefined;
+}): import("vite").Plugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/frontend-config",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "description": "Shared frontend tooling for MeddleWare apps: browser support, ESLint, Stylelint, html-validate, PostCSS, Playwright, axe, screenshots, Lighthouse and the Vite target.",
   "license": "0BSD",

package/src/csp.js

@@ -36,7 +36,7 @@ export const PROFILES = {
 export function buildCsp(options = {}) {
   const { wasm = false, chain = false, worker = false, strict = false, frameAncestors = 'self', scriptHashes = [] } = options
   const script = ["'self'", ...(wasm ? ["'wasm-unsafe-eval'"] : []), ...scriptHashes.map((h) => `'${h.replace(/^'|'$/g, '')}'`)]
-  const richImages = chain || worker
+  const richImages = chain // only an app that shows other people's images (a chain app: wallet icons, blob previews) may load https images
   const directives = [
     ["default-src", "'self'"],
     ['script-src', script.join(' ')],

package/src/sync.js

@@ -11,7 +11,7 @@
 //   kind  "app"  → .github/dependabot.yml, .dockerignore, postcss.config.js, stylelint.config.js are the templates
 //   csp   a profile of ./csp.js → the Dockerfile's `ARG CSP="…"` is that profile's policy (`docs` keeps the script hashes already there)
 //   lhci  true   → .github/audit-allowlist.json is the template (the dated allowlist for the Lighthouse CI tool chain; one expiry, reviewed together)
-import { existsSync, mkdirSync, readFileSync, realpathSync, writeFileSync } from 'node:fs'
+import { existsSync, mkdirSync, readFileSync, realpathSync, rmSync, writeFileSync } from 'node:fs'
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { cspForProfile } from './csp.js'
@@ -48,6 +48,17 @@ export function sync(root, options = {}) {
     expectFile('postcss.config.js', tpl('postcss.config.js'))
     expectFile('stylelint.config.js', tpl('stylelint.config.js'))
   }
+  if (cfg.kind === 'app') {
+    // The favicon set comes from `@meddleware/ui` through `brandIcons` (an app keeps none of its own).
+    for (const f of ['public/favicon.svg', 'public/favicon.ico', 'public/apple-touch-icon.png']) {
+      const p = join(root, f)
+      if (!existsSync(p)) continue
+      if (options.write) {
+        rmSync(p)
+        out.push({ file: f, ok: true, note: 'removed (served by brandIcons from @meddleware/ui)' })
+      } else out.push({ file: f, ok: false, note: 'an app serves the brand icons through brandIcons; delete this file (mw-sync --write does)' })
+    }
+  }
   if (cfg.lhci === true) expectFile('.github/audit-allowlist.json', tpl('audit-allowlist.lhci.json'))
   if (cfg.csp) {
     const df = join(root, 'Dockerfile')

package/src/vite.js

@@ -102,17 +102,87 @@ export function assertE2eOnlyInE2eMode(mode, env = process.env) {
  * @param {import('vite').PluginOption[]} options.plugins The app's plugins (`vue()` …); `themeInit` is added after them.
  * @param {'light' | 'dark' | 'system'} [options.theme] The mode a first visit gets (default `dark`, the brand default).
  * @param {boolean} [options.wallet] The app uses `@meddleware/wallet-adapter` (default true): keep it out of pre-bundling.
+ * @param {string} [options.name] The app's name for the web manifest (default `Meddleware`).
  * @param {import('vite').UserConfig} [options.config] Anything else (`base`, `build.rollupOptions`, `server` …); `build` is merged.
  * @returns {import('vite').UserConfigFnObject}
  */
-export function meddlewareApp({ plugins, theme = 'dark', wallet = true, config = {} }) {
+export function meddlewareApp({ plugins, theme = 'dark', wallet = true, name, config = {} }) {
   return ({ mode }) => {
     assertE2eOnlyInE2eMode(mode)
     return {
       ...config,
       build: { target: viteTarget(), ...config.build },
-      plugins: [...plugins, themeInit({ default: theme })],
+      plugins: [...plugins, themeInit({ default: theme }), brandIcons({ name })],
       ...(wallet ? { optimizeDeps: { ...config.optimizeDeps, exclude: ['@meddleware/wallet-adapter', ...(config.optimizeDeps?.exclude ?? [])] } } : {}),
     }
   }
 }
+
+/** The brand files `@meddleware/ui` publishes (`@meddleware/ui/brand/*`), by served name. */
+const BRAND_FILES = /** @type {const} */ ({
+  'favicon.svg': 'image/svg+xml',
+  'favicon.ico': 'image/x-icon',
+  'apple-touch-icon.png': 'image/png',
+  'icon-192.png': 'image/png',
+  'icon-512.png': 'image/png',
+})
+
+/**
+ * The favicon set of the company mark (the Kopimi "K"), for an app's `index.html`: serves the files from `@meddleware/ui` in dev, emits them
+ * into the build at the site root (`/favicon.svg`, `/favicon.ico`, `/apple-touch-icon.png`, `/icon-192.png`, `/icon-512.png`, `/site.webmanifest`)
+ * and adds the `<link>` tags. An app keeps no icon of its own (`mw-sync --check` fails on a `public/favicon.*`), and its `index.html` has no
+ * `<link rel="icon">`.
+ *
+ * @param {object} [options]
+ * @param {string} [options.name] The app's name, for the web manifest. Default `Meddleware`.
+ * @returns {import('vite').Plugin}
+ */
+export function brandIcons({ name = 'Meddleware' } = {}) {
+  const read = (/** @type {string} */ file) => readFileSync(resolveFromApp(`@meddleware/ui/brand/${file}`))
+  const manifest = () => {
+    const { semantic } = JSON.parse(readFileSync(resolveFromApp('@meddleware/design-tokens/tokens.json'), 'utf8'))
+    return JSON.stringify(
+      {
+        name,
+        short_name: name,
+        icons: [
+          { src: '/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
+          { src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
+          { src: '/favicon.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any' },
+        ],
+        theme_color: semantic.dark.bg,
+        background_color: semantic.dark.bg,
+        display: 'browser',
+      },
+      null,
+      2,
+    )
+  }
+  return {
+    name: 'meddleware:brand-icons',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const file = (req.url ?? '').split('?')[0]?.slice(1) ?? ''
+        if (file in BRAND_FILES) {
+          res.setHeader('content-type', BRAND_FILES[/** @type {keyof typeof BRAND_FILES} */ (file)])
+          res.end(read(file))
+        } else if (file === 'site.webmanifest') {
+          res.setHeader('content-type', 'application/manifest+json')
+          res.end(manifest())
+        } else next()
+      })
+    },
+    generateBundle() {
+      for (const file of Object.keys(BRAND_FILES)) this.emitFile({ type: 'asset', fileName: file, source: read(file) })
+      this.emitFile({ type: 'asset', fileName: 'site.webmanifest', source: manifest() })
+    },
+    transformIndexHtml() {
+      return [
+        { tag: 'link', attrs: { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' }, injectTo: 'head' },
+        { tag: 'link', attrs: { rel: 'icon', href: '/favicon.ico', sizes: '48x48' }, injectTo: 'head' },
+        { tag: 'link', attrs: { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }, injectTo: 'head' },
+        { tag: 'link', attrs: { rel: 'manifest', href: '/site.webmanifest' }, injectTo: 'head' },
+      ]
+    },
+  }
+}

package/templates/audit-allowlist.lhci.json

@@ -1,12 +1 @@
-[
-  {
-    "id": "GHSA-jmr9-qjv8-65gv",
-    "reason": "extract-zip has no patched release. It is a dev-only transitive of @lhci/cli (lighthouse > puppeteer-core > @puppeteer/browsers) and only unpacks browser archives that Lighthouse CI downloads itself; nothing from it ships in the image.",
-    "expires": "2027-01-31"
-  },
-  {
-    "id": "GHSA-7pqw-9j4j-h8q3",
-    "reason": "extract-zip has no patched release. It is a dev-only transitive of @lhci/cli (lighthouse > puppeteer-core > @puppeteer/browsers) and only unpacks browser archives that Lighthouse CI downloads itself; nothing from it ships in the image.",
-    "expires": "2027-01-31"
-  }
-]
+[]