@webjsdev/cli 0.10.66 → 0.10.68

package/bin/webjs.js

@@ -456,6 +456,12 @@ async function refuseOutsideApp(command) {
 }
 
 async function main() {
+  // A `bun --hot` re-run of the dev server child (#1575): the first run's
+  // server owns the process, so hand it the reload and stop here.
+  if (cmd === 'dev' && process.env.__WEBJS_DEV_CHILD === '1' && process.versions.bun) {
+    const { rerunHotDevServer } = await import('../lib/dev-hot-rerun.js');
+    if (await rerunHotDevServer()) return;
+  }
   // `--version` / `-v` (top level): print the installed CLI version and exit.
   if (cmd === '--version' || cmd === '-v') {
     console.log(readCliVersion());
@@ -526,7 +532,11 @@ async function main() {
         // parent is gone (killed outright, or crashed), and a child left
         // running would hold the port against the next `webjs dev`. Unref'd
         // so the channel itself never keeps this process alive.
-        if (process.connected) {
+        // Once per process: `bun --hot` re-runs this file on every edit
+        // (#1575), and each run used to add another listener.
+        const g = /** @type {any} */ (globalThis);
+        if (process.connected && !g.__webjsDevDisconnectHooked) {
+          g.__webjsDevDisconnectHooked = true;
           process.channel?.unref?.();
           process.on('disconnect', () => process.exit(0));
         }

package/lib/app-icon.js

@@ -0,0 +1,55 @@
+/**
+ * The app icon a new scaffold starts with, and how `webjs doctor` recognises
+ * an icon that was never replaced.
+ *
+ * A scaffold ships `app/icon.svg` (auto-linked as the favicon, served at
+ * /icon.svg and as the /favicon.ico fallback) and `app/manifest.webmanifest`
+ * (auto-linked as the web app manifest). The icon is a deliberately NEUTRAL
+ * placeholder: a grey tile with a dashed frame, so a tab strip shows at a
+ * glance that the app has no icon of its own yet, and no app ever ships
+ * looking like a WebJs demo. It carries `data-webjs-placeholder` so a check
+ * (webjs doctor, or any agent's own tester) can tell it apart from a real
+ * icon without comparing bytes.
+ */
+
+/** The attribute that marks the scaffold's placeholder icon. */
+export const PLACEHOLDER_MARKER = 'data-webjs-placeholder';
+
+/** The placeholder `app/icon.svg`. Replace it with the app's own mark. */
+export const PLACEHOLDER_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" ${PLACEHOLDER_MARKER}="icon">
+  <!-- PLACEHOLDER app icon from \`webjs create\`. Replace this file with the
+       app's own icon: a simple symbol for what the app is, in its colours,
+       legible at 16px. Keep the file name (app/icon.svg) and the framework
+       links it, serves it and answers /favicon.ico with it. -->
+  <rect width="32" height="32" rx="8" fill="#d4d4d8"/>
+  <rect x="7" y="7" width="18" height="18" rx="3" fill="none" stroke="#71717a" stroke-width="2" stroke-dasharray="3 2.4"/>
+</svg>
+`;
+
+/**
+ * The `app/manifest.webmanifest` a scaffold starts with: the app's name, the
+ * neutral colours of the scaffold palette, and the icon. Grow it with the app
+ * (its real theme colour, a 192 and 512 PNG for installability).
+ * @param {string} name the app's display name
+ */
+export function appManifest(name) {
+  return JSON.stringify({
+    name,
+    short_name: name,
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#ffffff',
+    theme_color: '#ffffff',
+    icons: [{ src: '/icon.svg', sizes: 'any', type: 'image/svg+xml' }],
+  }, null, 2) + '\n';
+}
+
+/**
+ * Whether an SVG is the WebJs brand mark earlier scaffolds shipped as
+ * `public/favicon.svg` (a rounded square with the gallery's grey gradient).
+ * Apps made before the placeholder still serve it as their favicon.
+ * @param {string} svg
+ */
+export function isLegacyBrandFavicon(svg) {
+  return /aria-label="WebJs"/.test(svg) && /<linearGradient id="wj"/.test(svg);
+}

package/lib/create.js

@@ -21,6 +21,7 @@ import { bunifyProse, bunifyDockerfile, bunifyCompose, bunifyCi, bunifyEnvExampl
 import { postgresCompose, postgresCi } from './db-rewrite.js';
 import { assertValidAppName, toDatabaseName } from './app-name.js';
 import { isGalleryAppShellFile } from './gallery-shell-files.js';
+import { PLACEHOLDER_ICON_SVG, appManifest } from './app-icon.js';
 import { detectPackageManager } from './package-manager.js';
 
 /**
@@ -1246,10 +1247,15 @@ export type ActionResult<T> =
       const swSrc = join(TEMPLATES, 'public', swFile);
       if (existsSync(swSrc)) await cp(swSrc, join(publicDir, swFile));
     }
-    // A base SVG favicon (the root layout links it). It ships with the app, not
-    // the gallery, so it survives `npm run gallery:clear`.
-    const faviconSrc = join(TEMPLATES, 'public', 'favicon.svg');
-    if (existsSync(faviconSrc)) await cp(faviconSrc, join(publicDir, 'favicon.svg'));
+    // The app icon and web app manifest: `app/icon.svg` (a neutral PLACEHOLDER
+    // the agent replaces with the app's own icon; `webjs doctor` warns while it
+    // is still there) and `app/manifest.webmanifest` (the app's name). The
+    // framework links both into <head> and answers /favicon.ico with the icon,
+    // so the layout declares nothing. They ship with the app, not the gallery,
+    // so they survive `gallery:clear`.
+    await mkdir(join(appDir, 'app'), { recursive: true });
+    await writeFile(join(appDir, 'app', 'icon.svg'), PLACEHOLDER_ICON_SVG);
+    await writeFile(join(appDir, 'app', 'manifest.webmanifest'), appManifest(displayName));
 
     // The gallery-reset script (wired as `gallery:clear`). Only UI templates have
     // a gallery, so it ships here (NOT in the flat templateFiles list, which would
@@ -1355,11 +1361,10 @@ import '#components/theme-toggle.ts';
  * text-foreground, bg-card, bg-primary, and border-border all work.
  */
 
-// Declare the favicon via metadata.icons (NOT a hand-written <link> in the
-// template): the framework emits metadata links into <head>, whereas a <link>
-// written in the layout body stays in <body>, where browsers ignore it. The SVG
-// lives at public/favicon.svg and serves at /public/favicon.svg.
-export const metadata = { icons: '/public/favicon.svg' };
+// The favicon and manifest are app/icon.svg and app/manifest.webmanifest: the
+// framework links them into <head> itself, so nothing is declared here. Replace
+// the placeholder icon with this app's own (see the skill's routing-and-pages
+// reference, "App icon").
 
 // LayoutProps types every layout argument (children, params, searchParams,
 // url) from the framework, so children is a TemplateResult rather than an

package/lib/dev-hot-rerun.js

@@ -0,0 +1,54 @@
+/**
+ * The fast path for a `bun --hot` re-run of the `webjs dev` server child
+ * (#1575).
+ *
+ * `bun --hot` re-evaluates this CLI on every reload. The first run's server
+ * owns the process (`dev/hot-host.js` in `@webjsdev/server`) and only needs to
+ * hear that the module registry was reset, so a re-run calls the host directly
+ * instead of importing the whole server again just to reach `startServer`,
+ * which re-evaluated every framework module on every edit for nothing.
+ *
+ * The one thing a re-run must still notice is the framework itself changing
+ * under it (an upgrade while `webjs dev` runs): the first run's code cannot
+ * load the new copy in place, so the child exits and the supervisor starts a
+ * fresh process.
+ */
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const HOSTS = Symbol.for('webjs.dev.hotHosts');
+
+/** The installed `@webjsdev/server` version, or '' when it cannot be read. */
+function installedServerVersion() {
+  try {
+    const entry = fileURLToPath(import.meta.resolve('@webjsdev/server'));
+    return JSON.parse(readFileSync(join(dirname(entry), 'package.json'), 'utf8')).version || '';
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * Hand a re-run to the live dev server. Returns false when there is none (the
+ * first run), so the caller starts the server as usual.
+ *
+ * @param {{ exit?: (code: number) => void, log?: (line: string) => void }} [io]
+ * @returns {Promise<boolean>}
+ */
+export async function rerunHotDevServer(io = {}) {
+  const exit = io.exit || ((code) => process.exit(code));
+  const log = io.log || ((line) => console.log(line));
+  const hosts = /** @type {any} */ (globalThis)[HOSTS];
+  if (!(hosts instanceof Map) || hosts.size === 0) return false;
+  const version = installedServerVersion();
+  for (const host of hosts.values()) {
+    if (version && host.version && host.version !== version) {
+      log(`[webjs] @webjsdev/server changed (${host.version} -> ${version}), restarting the dev server`);
+      exit(0);
+      return true;
+    }
+  }
+  for (const host of hosts.values()) await host.rerun();
+  return true;
+}

package/lib/dev-reload.js

@@ -32,6 +32,13 @@ import { PORT_IN_USE_EXIT_CODE } from './port.js';
  */
 export const RESTART_DEBOUNCE_MS = 50;
 
+/**
+ * The IPC message a dev server child sends when it reloads every module in
+ * place under `bun --hot`, plugin-served ones included (#1575). Mirrors
+ * `HOT_IN_PLACE_MESSAGE` in `@webjsdev/server`'s `dev/hot-host.js`.
+ */
+export const HOT_IN_PLACE_MESSAGE = 'hot-reload-in-place';
+
 /**
  * Delays before restarting a child that exited on its own (a crash), indexed
  * by consecutive crash count and capped at the last entry. A file change
@@ -338,12 +345,35 @@ export function createSupervisor({
   };
 }
 
+/**
+ * Which changed paths restart the live child. A Bun child that reloads
+ * plugin-served modules in place announces it over IPC once it is up (#1575);
+ * from then on only `plan.inPlaceRestartFor` (the boot hooks) restarts it.
+ * Per child: `reset()` on every spawn, so a child that never announces (an
+ * older `@webjsdev/server`) keeps the restarts it needs.
+ *
+ * @param {{ restartFor?: (path: string) => boolean, inPlaceRestartFor?: (path: string) => boolean }} plan
+ */
+export function inPlaceRestarts(plan) {
+  let inPlace = false;
+  const base = plan.restartFor || (() => true);
+  return {
+    /** @param {string} p */
+    restartFor: (p) => (inPlace && plan.inPlaceRestartFor ? plan.inPlaceRestartFor(p) : base(p)),
+    /** @param {unknown} msg */
+    onMessage: (msg) => {
+      if (msg && typeof msg === 'object' && /** @type {any} */ (msg).webjs === HOT_IN_PLACE_MESSAGE) inPlace = true;
+    },
+    reset: () => { inPlace = false; },
+  };
+}
+
 /**
  * Run the dev server under the supervisor until a signal stops it.
  *
  * @param {{
  *   cwd: string,
- *   plan: { args: string[], restartOnChange: boolean, restartFor?: (path: string) => boolean, watchDirs: string[], watchFiles: string[] },
+ *   plan: { args: string[], restartOnChange: boolean, restartFor?: (path: string) => boolean, inPlaceRestartFor?: (path: string) => boolean, watchDirs: string[], watchFiles: string[] },
  *   env: NodeJS.ProcessEnv,
  *   onExit: (code: number) => void,
  * }} opts
@@ -366,14 +396,16 @@ export function superviseDevServer({ cwd, plan, env, onExit }) {
     sup.stop().then(() => onExit(code));
   };
 
+  const restarts = inPlaceRestarts(plan);
   const sup = createSupervisor({
     restartOnChange: plan.restartOnChange,
-    ...(plan.restartFor ? { restartFor: plan.restartFor } : {}),
+    ...(plan.restartFor ? { restartFor: restarts.restartFor } : {}),
     log,
     // The child already printed why (the port and its holder); stop with its
     // code rather than restarting a server that can never bind.
     onFinal: (code) => shutdown(code),
     spawnChild: () => {
+      restarts.reset();
       const c = spawn(process.execPath, plan.args, {
         // The IPC channel lets the child notice this process is gone and exit,
         // so a killed supervisor never leaves an orphan holding the port.
@@ -381,6 +413,7 @@ export function superviseDevServer({ cwd, plan, env, onExit }) {
         cwd,
         env,
       });
+      c.on('message', restarts.onMessage);
       // A failed spawn emits 'error' and may never emit 'exit'; report it as
       // an exit so the backoff retries it (a repeated exit is ignored).
       c.on('error', (err) => {

package/lib/dev-supervisor.js

@@ -46,7 +46,29 @@ export const WATCH_DIRS = ['app', 'components', 'modules', 'lib', 'actions'];
  * never restarts the dev server when edited, which is the quiet half of the
  * bug where a `middleware.ts` was loaded by neither.
  */
-export const WATCH_FILES = ['middleware.ts', 'middleware.js', 'middleware.mts', 'middleware.mjs'];
+export const WATCH_FILES = ['middleware.ts', 'middleware.js', 'middleware.mts', 'middleware.mjs', ...bootFiles()];
+
+/**
+ * The app-root boot hooks the server runs ONCE per process (#1575):
+ * `instrumentation.*` (its `register()`) and `env.*` (the env validation). An
+ * edit to one restarts the dev server on either runtime, because no in-place
+ * reload re-runs them.
+ * @returns {string[]}
+ */
+function bootFiles() {
+  return ['instrumentation', 'env'].flatMap((n) => ['ts', 'js', 'mts', 'mjs'].map((x) => `${n}.${x}`));
+}
+
+const BOOT_FILE = /^(?:instrumentation|env)\.m?[jt]s$/;
+
+/**
+ * Whether a changed (app-relative) path is a boot hook (see `bootFiles`).
+ * @param {string} path
+ * @returns {boolean}
+ */
+export function isBootFile(path) {
+  return BOOT_FILE.test(path);
+}
 
 /**
  * Plan how `webjs dev` runs its server.
@@ -56,7 +78,7 @@ export const WATCH_FILES = ['middleware.ts', 'middleware.js', 'middleware.mts',
  * @param {string[]} opts.argv  `process.argv.slice(1)` (the script path followed by its args), forwarded to the child verbatim.
  * @param {boolean} opts.noHot  Whether `--no-hot` was passed (opt out of the supervisor entirely).
  * @param {boolean} [opts.sourceLocations]  Whether dev source locations are on (`WEBJS_SOURCE_LOCATIONS` / `webjs.dev.sourceLocations`), which puts every app module behind a Bun plugin.
- * @returns {{ mode: 'inline' } | { mode: 'supervise', args: string[], restartOnChange: boolean, restartFor?: (path: string) => boolean, watchDirs: string[], watchFiles: string[] }}
+ * @returns {{ mode: 'inline' } | { mode: 'supervise', args: string[], restartOnChange: boolean, restartFor?: (path: string) => boolean, inPlaceRestartFor?: (path: string) => boolean, watchDirs: string[], watchFiles: string[] }}
  *   `inline` runs the server in this process (no reload watcher); `supervise`
  *   spawns `process.execPath` with `args` and `__WEBJS_DEV_CHILD=1` under the
  *   supervisor, which watches `watchDirs` (recursively) and `watchFiles` (at
@@ -71,7 +93,20 @@ export function planDevSupervisor({ isBun, argv, noHot, sourceLocations = false
   if (noHot) return { mode: 'inline' };
 
   const watch = { watchDirs: [...WATCH_DIRS], watchFiles: [...WATCH_FILES] };
-  if (isBun) return { mode: 'supervise', args: ['--hot', ...argv], restartOnChange: true, restartFor: bunPluginServed(sourceLocations), ...watch };
+  if (isBun) {
+    // `restartFor` covers a server that cannot reload a plugin-served module in
+    // place. A server that can says so over IPC once it is up (#1575), and the
+    // supervisor narrows to `inPlaceRestartFor`: only the boot hooks restart.
+    const plugin = bunPluginServed(sourceLocations);
+    return {
+      mode: 'supervise',
+      args: ['--hot', ...argv],
+      restartOnChange: true,
+      restartFor: (p) => plugin(p) || isBootFile(p),
+      inPlaceRestartFor: isBootFile,
+      ...watch,
+    };
+  }
   return { mode: 'supervise', args: [...argv], restartOnChange: true, ...watch };
 }
 

package/lib/doctor/codes.js

@@ -50,6 +50,7 @@ export const DOCTOR_CODES = {
   'Static build outputs (dev.regenerate freshness)': 'STATIC_ASSET_FRESHNESS',
   'Asset urls (unmarked stylesheet links)': 'UNMARKED_ASSET_LINKS',
   'workspace-overrides': 'WORKSPACE_OVERRIDES',
+  'app-icon': 'APP_ICON',
 };
 
 /**

package/lib/doctor/probes/app-icon.js

@@ -0,0 +1,36 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { PLACEHOLDER_MARKER, isLegacyBrandFavicon } from '../../app-icon.js';
+
+/**
+ * @typedef {import('../codes.js').DoctorResult} DoctorResult
+ */
+
+/** @param {string} file */
+function read(file) {
+  try { return readFileSync(file, 'utf8'); } catch { return ''; }
+}
+
+/**
+ * Warn when the app's favicon is still the one `webjs create` shipped: the
+ * neutral `app/icon.svg` placeholder, or the WebJs brand mark earlier
+ * scaffolds put at `public/favicon.svg`. Either way every app made from the
+ * scaffold shows the same tab icon, which reads as a demo rather than a
+ * product. An app with no `app/` directory (a library, the api template with
+ * no pages) passes.
+ *
+ * @param {string} appDir
+ * @returns {DoctorResult}
+ */
+export function checkAppIcon(appDir) {
+  const name = 'app-icon';
+  if (!existsSync(join(appDir, 'app'))) return { name, status: 'pass', message: 'no app/ directory to analyse' };
+  const fix = 'Replace app/icon.svg with an icon for this app (a simple symbol for what it is, in its own colours, legible at 16px), and delete public/favicon.svg plus any metadata.icons that still points at it.';
+  if (read(join(appDir, 'app', 'icon.svg')).includes(PLACEHOLDER_MARKER)) {
+    return { name, status: 'warn', message: 'app/icon.svg is still the scaffold placeholder icon', fix };
+  }
+  if (isLegacyBrandFavicon(read(join(appDir, 'public', 'favicon.svg')))) {
+    return { name, status: 'warn', message: 'public/favicon.svg is still the WebJs mark an earlier scaffold shipped', fix };
+  }
+  return { name, status: 'pass', message: 'the app has its own icon (or declares none)' };
+}

package/lib/doctor/runner.js

@@ -12,6 +12,7 @@ import { checkStaticAssetFreshness } from './probes/static-asset-freshness.js';
 import { checkUnmarkedAssetLinks } from './probes/unmarked-asset-links.js';
 import { checkFrameworkResolves, checkFrameworkLinks } from './probes/framework-resolves.js';
 import { checkWorkspaceOverrides } from './probes/workspace-overrides.js';
+import { checkAppIcon } from './probes/app-icon.js';
 
 /**
  * @typedef {import('./codes.js').DoctorResult} DoctorResult
@@ -66,6 +67,7 @@ export async function runDoctorChecks(appDir, opts = {}) {
     checkStaticAssetFreshness(appDir),
     checkUnmarkedAssetLinks(appDir),
     Promise.resolve(checkWorkspaceOverrides(appDir)),
+    Promise.resolve(checkAppIcon(appDir)),
   ]);
   // Attach the stable machine code to every result (#975). Centralized here so
   // each check function stays free of the code-contract concern.

package/lib/gallery-shell-files.js

@@ -6,7 +6,7 @@
  * live app deployed on its own, so it needs a root layout, a home page, a theme
  * toggle, and the `cn()` helper. The scaffold writes all four itself, with
  * things the gallery's copies cannot carry: the app's `displayName`, the
- * `cspNonce()` wiring, `LayoutProps` typing, the `metadata.icons` favicon, and
+ * `cspNonce()` wiring, `LayoutProps` typing, and
  * a `cn.ts` read verbatim from the `@webjsdev/ui` registry so `webjs ui add`
  * stays in lockstep with the kit.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/cli",
-  "version": "0.10.66",
+  "version": "0.10.68",
   "type": "module",
   "description": "The CLI for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Runs the dev and production servers, scaffolds apps, validates conventions, and drives the database. Node 24+ or Bun.",
   "bin": {
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "@webjsdev/mcp": "^0.1.0",
-    "@webjsdev/server": "^0.8.81",
+    "@webjsdev/server": "^0.8.86",
     "@webjsdev/ui": "^0.3.15"
   },
   "publishConfig": {

package/templates/.agents/skills/webjs/SKILL.md

@@ -44,6 +44,7 @@ Rows point rather than explain. The reference is the authority on the rule, and
 | add a URL, static or with a dynamic segment | a file at `app/<path>/page.ts`, `[id]` for a param | registering the route in a table or config | `references/routing-and-pages.md` | `app/features/routing` |
 | abandon a render because something is missing or not allowed | throw `notFound()` / `forbidden()` / `unauthorized()` | returning an error object and branching in the template | `references/routing-and-pages.md` | `app/features/boundaries` |
 | set a page's title, description, or social preview | `export const metadata` or `generateMetadata()` | writing `<head>` tags in the page | `references/routing-and-pages.md` | `app/features/metadata` |
+| give the app its own favicon, home-screen icon and manifest | replace the placeholder `app/icon.svg` with a simple symbol for the app in its colours, add `app/apple-icon.png`, edit `app/manifest.webmanifest` | leaving the scaffold placeholder, or a hand-written `<link rel="icon">` | `references/routing-and-pages.md` (App icon and manifest) | `app/icon.ts` |
 | make part of the page respond to a click or hold state | a `WebComponent` custom element | expecting the page's own markup to hydrate | `references/components.md` | `app/features/components` |
 | render a keyed list, or swap one node when state changes | `repeat()` / `watch()` from `/directives` | re-rendering the component or diffing by hand | `references/components.md` | `app/features/directives` |
 | get server data into a component's first paint | `async render()` awaiting an action | fetching in `connectedCallback`, which SSR never calls | `references/components.md` | `app/features/async-render` |
@@ -174,7 +175,7 @@ Find the right export fast. Load the linked reference for full examples.
 
 ### File conventions
 
-`page.ts` (server-only fn), `layout.ts` (embeds `children`), `route.ts` (HTTP handler), `middleware.ts`, `*.server.ts` (server boundary), `error.ts` / `loading.ts` / `not-found.ts` / `forbidden.ts` / `unauthorized.ts` (boundaries), metadata routes (`sitemap.ts`, `robots.ts`, `manifest.ts`, `icon.ts`, `opengraph-image.ts`).
+`page.ts` (server-only fn), `layout.ts` (embeds `children`), `route.ts` (HTTP handler), `middleware.ts`, `*.server.ts` (server boundary), `error.ts` / `loading.ts` / `not-found.ts` / `forbidden.ts` / `unauthorized.ts` (boundaries), metadata routes (`sitemap.ts`, `robots.ts`, `manifest.ts`, `icon.ts`, `opengraph-image.ts`), and the static app-root icon files (`icon.svg`, `apple-icon.png`, `manifest.webmanifest`, `favicon.ico`), auto-linked into `<head>`. The scaffold's `app/icon.svg` is a placeholder: replace it with the app's own icon.
 
 ## Canonical Patterns
 

package/templates/.agents/skills/webjs/references/built-ins.md

@@ -296,6 +296,8 @@ Three levels, the same scale ESLint uses: `error` fails the exit, `warn` reports
 
 Two guarantees worth knowing. A result that could not check (a network or toolchain outage) is capped at `warn` and can never be escalated, so a jspm or npm outage cannot red your CI. And a malformed gate exits 1 naming the offender rather than being ignored, so a typo cannot silently un-gate the build. That covers an unknown code, a bad severity, a wrong shape (a non-object `doctor` or `gate`), and a misspelled sibling of `gate` such as `gates`, since every one of those would otherwise leave the build un-gated while the `package.json` looks gated. Under `--json` the offenders come back as a `configErrors` array alongside an empty `results`, each entry a `{ kind }` of `malformed` / `unknown-key` / `unknown-code` / `bad-severity`. Wire it up with one workflow step, `npm run doctor`, and change what is fatal in `package.json` rather than in the workflow.
 
+`APP_ICON` warns while the favicon is still the scaffold's: the placeholder `app/icon.svg` (marked `data-webjs-placeholder`) or the WebJs mark older scaffolds shipped at `public/favicon.svg`. Replace it with the app's own icon (`references/routing-and-pages.md`, "App icon and manifest").
+
 ### Dependency audit allowlist
 
 `webjs audit` runs `npm audit` or `bun audit` (by the nearest lockfile, so a workspace member uses the root's) and fails on any advisory at or above `webjs.audit.level` (default `high`) that `webjs.audit.ignore` does not list. The scaffold's `Security: dependency audit` CI step runs it.

package/templates/.agents/skills/webjs/references/components.md

@@ -30,7 +30,7 @@ Most of what follows restates widely held component-model advice, ported. Lit's
 
 **4. ARIA state is a hole in `render()`, derived from the same state that drives behaviour.** `aria-expanded=${this.open ? 'true' : 'false'}` cannot disagree with `this.open`. A second function that re-finds the button and calls `setAttribute` can, and does, the first time someone adds a close path that forgets to call it. The same holds for `class`, `?disabled`, and any `.prop`. Two caveats ride this rule:
 
-- A plain-attribute hole follows one rule on the server and the client (#1573): `null` / `undefined` omit the attribute, `false` omits it except on an `aria-*` name, where it is written as `"false"`. So `aria-expanded=${this.open}` serves `"true"` / `"false"` and hydrates unchanged, and `aria-current=${active ? 'page' : null}` omits the attribute on an inactive link. `?attr=${bool}` is not a substitute for a tri-state ARIA attribute, since a boolean binding omits the attribute when false.
+- A plain-attribute hole follows one rule on the server and the client (#1573): `null` / `undefined` omit the attribute, `false` omits it except on an `aria-*` name, where it is written as `"false"`, and `true` on an HTML boolean attribute (`checked`, `selected`, `disabled`, ...) writes the empty value like `?attr` (#1579). So `checked=${isDefault}` and `selected=${i === 0}` behave exactly like `?checked` / `?selected`, though `?attr` stays the clearer spelling for a boolean attribute. So `aria-expanded=${this.open}` serves `"true"` / `"false"` and hydrates unchanged, and `aria-current=${active ? 'page' : null}` omits the attribute on an inactive link. `?attr=${bool}` is not a substitute for a tri-state ARIA attribute, since a boolean binding omits the attribute when false.
 - A hole commits on the next render, one microtask later. The one place a direct write is still correct is a synchronous snapshot read such as `webjs:before-cache`, where the router reads `outerHTML` in the same task. That is a documented exception, not the normal path.
 
 **5. Behaviour needs an importable surface, or its test is a copy of it.** An inline `<script>` in a layout has no module identity, so a browser test cannot import it. It can only transcribe the listener into the test file and assert against the transcription, which then needs a SECOND test to grep the original for drift. Two tests, neither running shipping code. A component is importable, so its browser test mounts the real element and drives real events. A page or layout may still carry an inline `<script>`, but only for pre-paint boot work no module can do: reading a stored theme before first paint so the wrong palette never flashes, or measuring the header height into a CSS custom property. It must not be interactivity, and WHERE it sits decides how often it runs. The ROOT layout's markup sits OUTSIDE every swap range, so a soft navigation does not re-run its script, which is what makes it the right home for boot work and the wrong home for anything that has to respond to a later navigation. A page or a NESTED layout sits inside the swap range instead, so its script re-executes on every navigation that swaps that range (#1102), which means it has to be idempotent or guard on a flag it sets the first time. Neither shape gives you a listener that simply works, which is what a custom element is for. Under an opt-in CSP the script also needs the nonce from `cspNonce()`. `client-router-and-streaming.md` carries the full re-execution rule.

package/templates/.agents/skills/webjs/references/data-and-actions.md

@@ -139,6 +139,8 @@ The renderer omits the `action` attribute so the form posts to the page's own ur
 
 **A form-bound action always receives the `FormData`**, which is where it differs from the same function called over RPC (rich arguments) or server-to-server. `validate` is the typing seam: it takes the `FormData` and its transform-return becomes the action's typed input.
 
+A failing form action does not need to echo the submission back. On the 422 re-render `actionData.values` already carries every submitted text field (any `values` the action returns are layered on top), and with JavaScript on the client router restores what was typed into every control the re-render did not explicitly set (#1581). Return `values` only to normalize or blank a field; see `routing-and-pages.md` for the page side.
+
 Everything the action declares applies here too, or an action would be protected over RPC and open over a form:
 
 - `validate` runs on the submitted `FormData`.

package/templates/.agents/skills/webjs/references/muscle-memory-gotchas.md

@@ -176,6 +176,8 @@ html`<form method="post"><input name="email"></form>`;
 
 A plain attribute hole that resolves to `null` or `undefined` omits the attribute on both renderers (#1573), so `method=${null}` and `?method=${false}` both emit nothing and WebJs supplies `method="post"`. An EMPTY string is different: `method=${''}` renders `method=""`, which cannot submit and is refused.
 
+A boolean in a plain hole on an HTML boolean attribute renders like `?attr` (core 0.7.64+, #1579): `<option selected=${i === 0}>` and `<input type="radio" checked=${v.attending !== 'no'}>` mark only the true one. On an older core the server served `selected="false"` / `checked="false"`, which HTML reads as PRESENT, so the LAST option or radio won on first paint. `?selected=${...}` / `?checked=${...}` is correct on every version.
+
 A string stays a string: `action="/search"` and `action=${'/search'}` are unchanged, which is what a search form (`<form method="get" action="/search">`) and a `route.ts` endpoint both want. Other attributes keep their existing stringify behaviour; only a FUNCTION under `action` / `formaction` is claimed.
 
 ### `params` and `searchParams` are awaitable AND synchronously readable

package/templates/.agents/skills/webjs/references/routing-and-pages.md

@@ -220,6 +220,8 @@ export default function Contact({ actionData }: {
 
 How the result is read (server side): a success PRG-redirects with `303` (to a same-site `redirect` path if present, else the page's own URL); a failure re-SSRs the SAME page with `status` (default `422`) and the result on `ctx.actionData`. Failure is detected robustly (`success === false`, OR `fieldErrors` present, OR `error` present with `success !== true`), so an error is never swallowed. `result.redirect` must be a same-site local path (a single leading `/`); for a real external redirect, throw `redirect(absoluteUrl)` instead. On a plain GET render `actionData` is `undefined`. Prefer a bound `<form>` over `fetch` in a `@click` for any write a form can express.
 
+**Typed values survive a failed submission without extra code (#1581).** On a failure re-render `actionData.values` carries EVERY submitted text field, with any `values` the action returned layered on top (the action's own win, so it can normalize or blank a field). So `value=${values.x}` refills a field the action never echoed, with JavaScript off. With JavaScript on, the client router goes further: it snapshots the submitted form and, when the non-2xx re-render is applied in place, puts back what was typed in every text input, textarea, select, radio and checkbox whose server-rendered default did not change. A control the server rendered differently on purpose (refilled, normalized, reset) keeps the server's value. Passwords, files and hidden inputs are never restored. Opt a form out with `data-preserve-values="false"`. Refilling from `actionData.values` is still the right habit, since it is what the no-JS path shows; a checkbox group or multi-select repeats its name, and `values` keeps only the last one, so read those from the submitted `FormData` in the action.
+
 Three responses that are not the happy path:
 
 - **A submission carrying no identity is a `405` + `Allow: GET, HEAD`.** A bare `<form method="post">` binds nothing, and the page path exists but only renders, so the method is what is wrong rather than the url.
@@ -276,12 +278,26 @@ export default function robots({ siteUrl }: MetadataRouteContext) {
 
 The IMAGE metadata routes (`icon`, `apple-icon`, `opengraph-image`, `twitter-image`) default-export a function returning a `Response` with an explicit `content-type`, so an inline SVG needs no asset file (buildless).
 
-**`icon` and `apple-icon` are LINKED for you.** An app that declares no `metadata.icons` gets `<link rel="icon" href="/icon">` and `<link rel="apple-touch-icon" href="/apple-icon">` in the head automatically, for whichever of the two routes it defines (base-path prefixed, since that is where the route answers). No `type` or `sizes` is asserted, because the route picks its content type at request time and the browser sniffs the served one.
+### App icon and manifest (replace the placeholder)
+
+**Every app needs its OWN icon.** `webjs create` ships `app/icon.svg` as a neutral PLACEHOLDER (a grey tile with a dashed frame, marked `data-webjs-placeholder="icon"`) and `app/manifest.webmanifest` with the app's name. Replacing the placeholder is part of building the app, not polish: until you do, the tab, the bookmark and the home-screen icon look like every other unfinished app, and `webjs doctor` warns (`APP_ICON`). Draw a simple symbol for what the app IS (a grid for a tic-tac-toe game, a cup for a cafe, a check for a task list), in the app's own colours, on a 32x32 or 24x24 `viewBox`: a filled rounded tile in the primary colour with one bold shape in its foreground colour reads at 16px. Avoid thin strokes (under 2px at 32px), text longer than one letter, and detail that blurs at tab size. Then set `name`, `short_name`, `theme_color` and `background_color` in `app/manifest.webmanifest` to match.
+
+The icon conventions, all at the app ROOT and all auto-linked into `<head>` when the app declares no `metadata.icons`:
+
+| File | Served at | Linked as |
+|---|---|---|
+| `app/icon.svg` / `icon.png` / `icon.ico` | `/icon.svg` ... | `<link rel="icon">` with `type`, `sizes="any"` (SVG) or the PNG's real pixel size |
+| `app/apple-icon.png` (180x180) | `/apple-icon.png` | `<link rel="apple-touch-icon" sizes="180x180">` (iOS needs PNG, not SVG) |
+| `app/icon.ts` / `apple-icon.ts` | `/icon`, `/apple-icon` | bare link (the route picks its content type per request) |
+| `app/manifest.webmanifest` / `manifest.json` / `manifest.ts` | `/manifest.webmanifest`, `/manifest.json` | `<link rel="manifest">` (`metadata.manifest` wins; `manifest: null` opts out) |
+| `app/favicon.ico` | `/favicon.ico` | not linked; browsers request it themselves |
+
+`/favicon.ico` always answers: `public/favicon.ico`, else `app/favicon.ico`, else the app's icon (raster preferred over SVG, then the `icon.ts` route), so a crawler or feed reader that reads no markup gets the same icon. A static icon file wins the link over an icon route when both exist (the route still serves at its URL). Raster icons are linked before SVG, because Google's favicon crawler takes the first usable icon and wants a square raster. Use `icon.ts` only when the mark must be computed per request (per theme, per tenant); a route can render a PNG for `apple-icon.ts` the same way.
 
-Declaring `metadata.icons` **suppresses** the routes rather than merging with them, which is what Next does with its static icon files. So an app that outgrows a placeholder `app/icon.ts` names its real icons and the route stops being linked without having to be deleted:
+Declaring `metadata.icons` **suppresses** all of the above rather than merging with them, which is what Next does with its static icon files. So name icons explicitly only when they live elsewhere (a CDN, `public/`):
 
 ```ts
-// app/layout.ts  ->  these win; /icon and /apple-icon are no longer linked
+// app/layout.ts  ->  these win; app/icon.* and app/apple-icon.* are no longer linked
 export const metadata = {
   icons: {
     icon: [
@@ -293,7 +309,7 @@ export const metadata = {
 };
 ```
 
-Declare a favicon through `metadata.icons` (or a metadata route), never as a hand-written `<link rel="icon">`: only the root layout may write a shell at all (invariant 8), so a hand-written tag is unavailable to every other layout. A `public/favicon.ico` needs no declaration either way, since the framework serves it at the origin root for crawlers that read no markup.
+Never write a favicon as a hand-written `<link rel="icon">`: only the root layout may write a shell at all (invariant 8), so a hand-written tag is unavailable to every other layout.
 
 `opengraph-image` and `twitter-image` are LINKED too, Next's behaviour: a page that declares no `openGraph.images` gets `og:image` pointing at the nearest `opengraph-image` route above it (absolute against the site URL), and likewise `twitter:image`. A page that declares its own image keeps it.
 

package/templates/.agents/skills/webjs/references/runtime.md

@@ -32,21 +32,21 @@ Three seams pick a runtime-specific implementation, all inside the framework, no
 | Listener | `node:http` shell | native `Bun.serve` (faster on the listening path only, not end-to-end, because SSR render dominates a real page) |
 | TS strip | built-in `module.stripTypeScriptTypes` | `amaro` (byte-identical, position-preserving) |
 | SQLite | built-in `node:sqlite` + `drizzle-orm/node-sqlite` | built-in `bun:sqlite` + `drizzle-orm/bun-sqlite` |
-| Hot reload | restart on change (the `webjs dev` supervisor, #1521) | `bun --hot`, plus a restart for a `*.server.*` edit and, with source locations on, any app module edit (#1550) |
+| Hot reload | restart on change (the `webjs dev` supervisor, #1521) | in place in one long-lived process (`bun --hot` resets the module registry, #1575); only an `instrumentation.*` / `env.*` edit restarts it |
 | WebSocket | the `ws` library | native `Bun.serve` + a bridge adapter |
 | 103 Early Hints | yes | no (`Bun.serve` has no informational-response API) |
-| Dev edit to a page / layout | full reload (the dev restart replaces the process) | refreshes IN PLACE, no reload (#1398), unless source locations are on |
+| Dev edit to a page / layout | full reload (the dev restart replaces the process) | refreshes IN PLACE, no reload (#1398) |
 | Reverse-proxy headers | `X-Forwarded-Proto` / `X-Forwarded-Host` honored | same |
 
 **`webjs dev` lets an idle host sleep (#1507).** The live-reload stream sends nothing between edits (no keepalive) and is held open only while a tab showing the app is visible, so a sandbox or preview host that suspends on network quiet can suspend with a backgrounded dev tab open. Showing the tab reconnects, and an edit made meanwhile reloads the page on return. A host that counts an OPEN request as activity (a sandbox that suspends on idle) also needs `"webjs": { "dev": { "reloadIdle": 20 } }` (or `WEBJS_DEV_RELOAD_IDLE=20`): after that many seconds with no edit and no interaction the stream closes, and the next interaction, a tab showing, or an embed-bridge host command (`{ source: 'webjs-embed-host', type: 'resume' }`) reopens it. Off by default. Every reconnect also compares the server's state with the state the page on screen was rendered at, so an edit whose reload signal was lost while the stream was being replaced (a host that closes a held stream when it wakes) still reloads the page.
 
 **The in-place dev refresh (#1398) needs the server process to SURVIVE the edit,** which is the whole of the Node-versus-Bun difference in that row. A page or layout never hydrates, so a freshly rendered page is the complete truth for it and the client router can swap it in without a reload, keeping scroll and (for a page edit) the hydrated state of components outside the changed region. The server classifies the changed file and puts the verdict on the live-reload event, so this needs a process that is still alive to do the classifying.
 
-Bun's `bun --hot` invalidates modules in place without restarting, so it gets the refresh. It cannot reload a module a `Bun.plugin` serves, though (#1550): every `'use server'` `*.server.*` module (the action-seeding plugin) and, when dev source locations are on (`WEBJS_SOURCE_LOCATIONS=1`), every app module (the source-locations plugin). The supervisor restarts the server for an edit to one of those, so on Bun with source locations on every app edit is a full reload, as on Node. On Node the `webjs dev` supervisor (it replaced `node --watch` in #1521) RESTARTS the server process on a change under `app`, `components`, `modules`, `lib`, or `actions`, or to a root `middleware.{ts,js,mts,mjs}`, and a fresh process holds no record of what changed, so those edits are always a full reload. Two Node cases still refresh in place: an edit OUTSIDE that watched set (`db/schema.server.ts`, a `webjs.dev.watch` content dir), and running `npm run dev -- --no-hot`, which keeps the server in one process on either runtime. An in-place refresh loads the rebuilt stylesheets (a `webjs.dev.regenerate` compile runs on that request) BEFORE it swaps the new markup in, and drops the old sheets only after, so an element that gained a utility class never paints without its rule (#1535; a full reload never had the gap, since a head stylesheet is render-blocking). A component edit is a full reload everywhere by design, because `customElements.define` is once-per-tag and swapping fresh markup onto the old class would be worse than the reload.
+Bun keeps ONE dev server process for the whole session (#1575), so it gets the refresh. `bun --hot` re-runs the CLI on a change; the first run's server owns the process (its listener, live-reload stream, watchers and analysis caches) and a re-run only tells it the module registry was reset, so nothing is started twice and memory stays flat over hundreds of edits (it used to grow about 25 MB an edit until `bun --hot` stopped reloading). The app's modules load through a `Bun.plugin` that reads them fresh, and its `#` imports resolve through the app's own `imports` map, because Bun keeps the old source of a file that was replaced (an atomic save) and a stale directory listing for a new file next to a `*.server.*` module. So `bun --hot` no longer sees app edits itself, and the dev server asks it for a registry reset after an edit to a module some other module imports, a new module, or a `*.server.*` module, all without a process restart. A page, layout or route handler nothing imports needs no reset: the dev re-import is keyed by the file's content, so an unchanged file reuses its loaded module (no new module instance per request) and an edited one is a new import. `instrumentation.*` and `env.*` run once per process, so an edit to one restarts the server on both runtimes. On Node the `webjs dev` supervisor (it replaced `node --watch` in #1521) RESTARTS the server process on a change under `app`, `components`, `modules`, `lib`, or `actions`, or to a root `middleware.{ts,js,mts,mjs}`, and a fresh process holds no record of what changed, so those edits are always a full reload. Two Node cases still refresh in place: an edit OUTSIDE that watched set (`db/schema.server.ts`, a `webjs.dev.watch` content dir), and running `npm run dev -- --no-hot`, which keeps the server in one process on either runtime. An in-place refresh loads the rebuilt stylesheets (a `webjs.dev.regenerate` compile runs on that request) BEFORE it swaps the new markup in, and drops the old sheets only after, so an element that gained a utility class never paints without its rule (#1535; a full reload never had the gap, since a head stylesheet is render-blocking). A component edit is a full reload everywhere by design, because `customElements.define` is once-per-tag and swapping fresh markup onto the old class would be worse than the reload.
 
 **`webjs dev` and `webjs start` serve the directory they are started in, and refuse anywhere else (#1526).** Run them in the app directory, the one holding `app/`. In a workspace (`apps/web` under a root `package.json` with `workspaces`) that is the member, even when the CLI is hoisted to the root `node_modules`: the hoisted bin and the Bun `--hot` child both keep the directory they were started in. Started where there is no `app/` (the workspace root, or a subdirectory such as `app/` itself), both exit 1 before any `before` step runs, naming the app to start (`cd apps/web && webjs dev`), instead of booting a server that answers 404 for every route.
 
-**`webjs dev` does not stay down (#1521).** The supervisor and the server's own watcher handle every watcher error: a file in a watched dir the dev server cannot read or watch (the 0600 temp file `sed -i` creates when another user runs it, a file removed mid-scan) logs one `file watcher skipped <path> (EACCES)` warning and both keep running, where `node --watch` used to crash and leave the preview dead. Edits that REPLACE a file (`sed -i`, an editor saving through a temp file, an atomic write) are heard every time, however often the same file is replaced (#1529: on Linux under Node the watchers watch each directory, since Node 24's own recursive watcher stopped hearing a file after its first replacement). A server process that crashes is started again on the next file change, or by itself after a backoff of 0.5s growing to 10s for repeated crashes. On Bun the supervisor restarts the server only for an edit `bun --hot` cannot reload in place (a `*.server.*` module, or with source locations on any app module, #1550), and otherwise does only the crash recovery. Stopping `webjs dev` (Ctrl-C, SIGTERM) stops the server child too, and a child whose supervisor was killed outright exits on its own, so nothing is left holding the port.
+**`webjs dev` does not stay down (#1521).** The supervisor and the server's own watcher handle every watcher error: a file in a watched dir the dev server cannot read or watch (the 0600 temp file `sed -i` creates when another user runs it, a file removed mid-scan) logs one `file watcher skipped <path> (EACCES)` warning and both keep running, where `node --watch` used to crash and leave the preview dead. Edits that REPLACE a file (`sed -i`, an editor saving through a temp file, an atomic write) are heard every time, however often the same file is replaced (#1529: on Linux under Node the watchers watch each directory, since Node 24's own recursive watcher stopped hearing a file after its first replacement). A server process that crashes is started again on the next file change, or by itself after a backoff of 0.5s growing to 10s for repeated crashes. On Bun the supervisor restarts the server only for an `instrumentation.*` / `env.*` edit (#1575), and otherwise does only the crash recovery. An agent writing files the way an AI editor does (bursts, partial writes, syntax errors then fixes, renames, deletes, atomic writes) is exercised by `scripts/dev-reload-stress.mjs` (`node scripts/dev-reload-stress.mjs <appDir> <url>` against any running app). Stopping `webjs dev` (Ctrl-C, SIGTERM) stops the server child too, and a child whose supervisor was killed outright exits on its own, so nothing is left holding the port.
 
 The 103 Early Hints gap costs only a small first-load latency edge where an edge proxy forwards the 103, never correctness. The `modulepreload` hints still ship in the document head on both runtimes.
 

package/templates/gallery/app/icon.ts

@@ -3,12 +3,14 @@
 // content type, so an inline SVG needs no asset file. Generate it dynamically
 // (per-theme, per-tenant) when the mark must be computed at request time.
 //
-// This is the DEMO of that surface, not the gallery's own favicon. A metadata
-// route is not auto-linked: the framework emits `<link rel="icon">` only from
-// metadata.icons, so the gallery declares the static WebJs brand mark from
-// public/ there (see app/layout.ts) and this route stays browsable at /icon.
-// For a favicon that never changes, that static path is the one to copy; drop
-// this route when your app has no request-time mark to compute.
+// This is the DEMO of that surface, not the gallery's own favicon. With no
+// metadata.icons declared, the framework auto-links an app-root icon: a STATIC
+// file (app/icon.svg, app/icon.png) wins that link over this route, and a
+// declared metadata.icons wins over both. The gallery declares its WebJs brand
+// mark in app/layout.ts, so this route stays browsable at /icon without being
+// the tab icon. For an icon that never changes, write app/icon.svg instead
+// (what `webjs create` ships); keep a route like this only when the mark must
+// be computed at request time (per theme, per tenant).
 export default function Icon() {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
     <rect width="32" height="32" rx="7" fill="#1e2226"/>

package/templates/gallery/app/manifest.ts

@@ -3,6 +3,9 @@
 // icons to your app; pair it with the opt-in service worker for an installable
 // PWA. See agent-docs/service-worker.md. (Gallery files are copied verbatim, so
 // set the real app name here by hand rather than expecting substitution.)
+// The framework links an app-root manifest into <head> by itself. A static
+// app/manifest.webmanifest (what `webjs create` ships) wins that link over this
+// route; write a route like this only when a value must be computed.
 export default function Manifest() {
   return {
     name: 'webjs app',
@@ -12,7 +15,7 @@ export default function Manifest() {
     background_color: '#ffffff',
     theme_color: '#1e2226',
     icons: [
-      { src: '/favicon.svg', sizes: 'any', type: 'image/svg+xml' },
+      { src: '/icon', sizes: 'any', type: 'image/svg+xml' },
     ],
   };
 }

package/templates/scripts/clear-gallery.mjs

@@ -191,9 +191,9 @@ import type { LayoutProps } from '@webjsdev/core';
  * to pull primitives, then theme them here.
  */
 
-// Favicon via metadata.icons so the framework emits the <link> into <head> (a
-// hand-written <link> in the template body is ignored by browsers).
-export const metadata = { icons: '/public/favicon.svg' };
+// The favicon is app/icon.svg (and the manifest app/manifest.webmanifest): the
+// framework links both into <head>, so nothing is declared here. Replace the
+// placeholder icon with this app's own.
 
 export default function RootLayout({ children }: LayoutProps) {
   return html\`

package/templates/public/favicon.svg

@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="WebJs">
-  <!-- Matches the gallery navbar brand mark (a rounded square with a
-       foreground -> muted-foreground gradient), using the DARK-theme token
-       values (#dee2e6 -> #94989c) so it reads on a dark browser tab bar. -->
-  <defs>
-    <linearGradient id="wj" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#dee2e6"/>
-      <stop offset="1" stop-color="#94989c"/>
-    </linearGradient>
-  </defs>
-  <rect width="32" height="32" rx="10" fill="url(#wj)"/>
-</svg>