@junejs/server 1.0.0-dev.27 → 1.0.0-dev.28

package/dist/build.js

@@ -342,6 +342,7 @@ ${doClass}`;
 		}
 		for (const [reqPath, file] of [
 			["/favicon.svg", "favicon.svg"],
+			["/manifest.webmanifest", "manifest.webmanifest"],
 			["/llms.txt", "llms.txt"],
 			["/sitemap.xml", "sitemap.xml"]
 		]) {

package/dist/favicon.d.ts

@@ -3,7 +3,7 @@ import { DocumentConfig } from "@junejs/core/document";
 type Site = DocumentConfig["site"];
 declare const ICON_BG = "#1d1d1f";
 declare const ICON_FG = "#fbfbf8";
-declare const GENERATED_ICONS: readonly ["apple-touch-icon.png", "icon.png", "favicon.ico"];
+declare const GENERATED_ICONS: readonly ["apple-touch-icon.png", "icon.png", "favicon.ico", "icon-192.png", "icon-512.png"];
 type GeneratedIconFile = (typeof GENERATED_ICONS)[number];
 declare function publicFileCheck(publicDir: string): (file: string) => boolean;
 declare function resolveIcons(site: Site, inPublic: (file: string) => boolean): {
@@ -17,11 +17,15 @@ declare function googleFontFetcher(cacheDir: string, opts?: {
   fetch?: typeof fetch;
   timeoutMs?: number;
 }): FontFetcher;
+declare const INK_H = 28;
+declare const INK_W = 40;
 declare function pngToIco(png: Uint8Array, size: number): Uint8Array<ArrayBuffer>;
 type GeneratedIcons = {
   "apple-touch-icon.png": Uint8Array<ArrayBuffer>;
   "icon.png": Uint8Array<ArrayBuffer>;
   "favicon.ico": Uint8Array<ArrayBuffer>;
+  "icon-192.png": Uint8Array<ArrayBuffer>;
+  "icon-512.png": Uint8Array<ArrayBuffer>;
   letter: string;
   family: string | null;
 };
@@ -31,4 +35,4 @@ declare function renderIcons(opts: {
   warn?: (msg: string) => void;
 }): Promise<GeneratedIcons>;
 //#endregion
-export { FontFetcher, GENERATED_ICONS, GeneratedIconFile, GeneratedIcons, ICON_BG, ICON_FG, googleFontFetcher, hanFamily, iconFamily, pngToIco, publicFileCheck, renderIcons, resolveIcons };
+export { FontFetcher, GENERATED_ICONS, GeneratedIconFile, GeneratedIcons, ICON_BG, ICON_FG, INK_H, INK_W, googleFontFetcher, hanFamily, iconFamily, pngToIco, publicFileCheck, renderIcons, resolveIcons };

package/dist/favicon.js

@@ -10,7 +10,9 @@ const ICON_FG = "#fbfbf8";
 const GENERATED_ICONS = [
 	"apple-touch-icon.png",
 	"icon.png",
-	"favicon.ico"
+	"favicon.ico",
+	"icon-192.png",
+	"icon-512.png"
 ];
 const PRIMARY_ICON_FILES = [
 	"favicon.svg",
@@ -20,6 +22,11 @@ const PRIMARY_ICON_FILES = [
 	"favicon.ico"
 ];
 const CUSTOM_ICON_FILES = [...PRIMARY_ICON_FILES, "apple-touch-icon.png"];
+const MANIFEST_FILES = [
+	"manifest.webmanifest",
+	"manifest.json",
+	"site.webmanifest"
+];
 function publicFileCheck(publicDir) {
 	let real = false;
 	try {
@@ -28,11 +35,14 @@ function publicFileCheck(publicDir) {
 	return (file) => real && existsSync(join(publicDir, file));
 }
 function resolveIcons(site, inPublic) {
+	const ownManifest = MANIFEST_FILES.find(inPublic);
 	if (!(Boolean(site.icon) || CUSTOM_ICON_FILES.some(inPublic))) return {
 		generate: true,
 		icons: {
 			png: "/icon.png",
-			appleTouch: "/apple-touch-icon.png"
+			appleTouch: "/apple-touch-icon.png",
+			manifest: ownManifest ? `/${ownManifest}` : "/manifest.webmanifest",
+			generated: !ownManifest
 		}
 	};
 	const primary = PRIMARY_ICON_FILES.find(inPublic);
@@ -41,7 +51,8 @@ function resolveIcons(site, inPublic) {
 		icons: {
 			primary: primary ? `/${primary}` : void 0,
 			png: inPublic("icon.png") ? "/icon.png" : void 0,
-			appleTouch: inPublic("apple-touch-icon.png") ? "/apple-touch-icon.png" : void 0
+			appleTouch: inPublic("apple-touch-icon.png") ? "/apple-touch-icon.png" : void 0,
+			manifest: ownManifest ? `/${ownManifest}` : void 0
 		}
 	};
 }
@@ -163,7 +174,7 @@ function place(resvg, ch, family, font) {
 	if (!bbox) return null;
 	const notdef = inkBox(resvg, NOTDEF_PROBE, family, font);
 	if (notdef && notdef.x === bbox.x && notdef.y === bbox.y && notdef.width === bbox.width && notdef.height === bbox.height) return null;
-	const scale = Math.min(INK_H / bbox.height, INK_W / bbox.width);
+	const scale = Math.min(28 / bbox.height, 40 / bbox.width);
 	const cx = bbox.x + bbox.width / 2 - PROBE / 2;
 	const cy = bbox.y + bbox.height / 2 - PROBE * .7;
 	return {
@@ -227,9 +238,11 @@ async function renderIcons(opts) {
 		"apple-touch-icon.png": render(180, false),
 		"icon.png": icon32,
 		"favicon.ico": pngToIco(icon32, 32),
+		"icon-192.png": render(192, false),
+		"icon-512.png": render(512, false),
 		letter: ch,
 		family: placement?.family ?? null
 	};
 }
 //#endregion
-export { GENERATED_ICONS, ICON_BG, ICON_FG, googleFontFetcher, hanFamily, iconFamily, pngToIco, publicFileCheck, renderIcons, resolveIcons };
+export { GENERATED_ICONS, ICON_BG, ICON_FG, INK_H, INK_W, googleFontFetcher, hanFamily, iconFamily, pngToIco, publicFileCheck, renderIcons, resolveIcons };

package/dist/pipeline.js

@@ -1,4 +1,5 @@
 import { iconLetter } from "./icon-letter.js";
+import { webManifest } from "./web-manifest.js";
 import { SEGMENT_HEADER, TITLE_HEADER, encodeTitle, negotiate } from "./negotiate.js";
 import { ensureScope, runInScope, setRequestLocale } from "@junejs/db";
 import { LoaderDataContext } from "@junejs/core/route";
@@ -201,6 +202,7 @@ function createPipeline(cfg) {
 			if (out) return out;
 		}
 		if (request.method === "GET" && !docConfig.site.icon && (url.pathname === "/favicon.svg" || url.pathname === "/favicon.ico")) return letterFavicon(docConfig.site.name);
+		if (request.method === "GET" && docConfig.icons?.generated && url.pathname === "/manifest.webmanifest") return text(webManifest(docConfig), "application/manifest+json", { headers: { "cache-control": "public, max-age=86400" } });
 		let locale;
 		let routeBase = url.pathname;
 		if (cfg.i18n) {

package/dist/web-manifest.d.ts

@@ -0,0 +1,6 @@
+import { DocumentConfig } from "@junejs/core/document";
+//#region src/web-manifest.d.ts
+declare function shortName(site: DocumentConfig["site"]): string | undefined;
+declare function webManifest(config: DocumentConfig): string;
+//#endregion
+export { shortName, webManifest };

package/dist/web-manifest.js

@@ -0,0 +1,46 @@
+import { resolveThemeColor } from "@junejs/core/document";
+//#region src/web-manifest.ts
+function shortName(site) {
+	if (site.shortName) return site.shortName;
+	const name = site.name?.trim();
+	if (!name) return void 0;
+	return name.split(/\s+[—–|-]\s+|:\s+/)[0].trim() || name;
+}
+function webManifest(config) {
+	const base = config.basePath ?? "";
+	const theme = resolveThemeColor(config);
+	const color = typeof theme === "string" ? theme : void 0;
+	const manifest = {
+		name: config.site.name,
+		short_name: shortName(config.site),
+		description: config.site.description,
+		start_url: `${base}/`,
+		scope: `${base}/`,
+		display: "browser",
+		...color ? {
+			theme_color: color,
+			background_color: color
+		} : {},
+		icons: [
+			{
+				src: `${base}/icon-192.png`,
+				sizes: "192x192",
+				type: "image/png"
+			},
+			{
+				src: `${base}/icon-512.png`,
+				sizes: "512x512",
+				type: "image/png"
+			},
+			{
+				src: `${base}/icon-512.png`,
+				sizes: "512x512",
+				type: "image/png",
+				purpose: "maskable"
+			}
+		]
+	};
+	return JSON.stringify(manifest, null, 2) + "\n";
+}
+//#endregion
+export { shortName, webManifest };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junejs/server",
-  "version": "1.0.0-dev.27",
+  "version": "1.0.0-dev.28",
   "description": "June host adapters + dev server. Host-coupled; depends on the pure @junejs/core contract layer.",
   "type": "module",
   "license": "MIT",
@@ -140,7 +140,7 @@
     "rolldown": "^1.1.0"
   },
   "peerDependencies": {
-    "@junejs/core": ">=0.2.0-dev.47",
+    "@junejs/core": ">=0.2.0-dev.48",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-server-dom-webpack": "19.2.7",

package/src/build.ts

@@ -631,6 +631,7 @@ ${doClass}`;
     // skips its file rather than failing the build.
     const extra: Array<[string, string]> = [
       ["/favicon.svg", "favicon.svg"],
+      ["/manifest.webmanifest", "manifest.webmanifest"],
       ["/llms.txt", "llms.txt"],
       ["/sitemap.xml", "sitemap.xml"],
     ];

package/src/favicon.ts

@@ -32,12 +32,13 @@ export const ICON_FG = "#fbfbf8";
 
 // Filenames the icons are served at (from the app root), and the public/ files
 // that mean the app brings its own icon — then June generates none.
-export const GENERATED_ICONS = ["apple-touch-icon.png", "icon.png", "favicon.ico"] as const;
+export const GENERATED_ICONS = ["apple-touch-icon.png", "icon.png", "favicon.ico", "icon-192.png", "icon-512.png"] as const;
 export type GeneratedIconFile = (typeof GENERATED_ICONS)[number];
 // The app's own main icon, in preference order: the first one present becomes
 // the page's favicon link (so none of them is ever silently unreferenced).
 const PRIMARY_ICON_FILES = ["favicon.svg", "icon.svg", "favicon.png", "icon.png", "favicon.ico"];
 const CUSTOM_ICON_FILES = [...PRIMARY_ICON_FILES, "apple-touch-icon.png"];
+const MANIFEST_FILES = ["manifest.webmanifest", "manifest.json", "site.webmanifest"];
 
 // `inPublic` for resolveIcons over an app's public/ dir. A symlinked public/ is
 // ignored, as the build and dev server ignore it.
@@ -56,12 +57,28 @@ export function publicFileCheck(publicDir: string): (file: string) => boolean {
 // its own. Otherwise every icon file it has is linked: the first of
 // PRIMARY_ICON_FILES as the favicon (site.icon still wins in the document),
 // plus icon.png and apple-touch-icon.png when present.
+//
+// The web manifest: the app's own public/manifest.webmanifest (or
+// manifest.json) is linked whenever present. Otherwise June generates one only
+// alongside its own icons — an app with custom icons may have no 192/512 PNGs
+// for a manifest to point at.
 export function resolveIcons(
   site: Site,
   inPublic: (file: string) => boolean,
 ): { generate: boolean; icons: NonNullable<DocumentConfig["icons"]> } {
+  const ownManifest = MANIFEST_FILES.find(inPublic);
   const custom = Boolean(site.icon) || CUSTOM_ICON_FILES.some(inPublic);
-  if (!custom) return { generate: true, icons: { png: "/icon.png", appleTouch: "/apple-touch-icon.png" } };
+  if (!custom) {
+    return {
+      generate: true,
+      icons: {
+        png: "/icon.png",
+        appleTouch: "/apple-touch-icon.png",
+        manifest: ownManifest ? `/${ownManifest}` : "/manifest.webmanifest",
+        generated: !ownManifest,
+      },
+    };
+  }
   const primary = PRIMARY_ICON_FILES.find(inPublic);
   return {
     generate: false,
@@ -69,6 +86,7 @@ export function resolveIcons(
       primary: primary ? `/${primary}` : undefined,
       png: inPublic("icon.png") ? "/icon.png" : undefined,
       appleTouch: inPublic("apple-touch-icon.png") ? "/apple-touch-icon.png" : undefined,
+      manifest: ownManifest ? `/${ownManifest}` : undefined,
     },
   };
 }
@@ -179,10 +197,12 @@ const escapeXml = (s: string) => s.replace(/[<>&"']/g, (c) => `&#${c.charCodeAt(
 // Where the glyph goes on the 64×64 square: font size + origin, from its INK
 // box — not its em box — so every script sits optically centred at one size.
 // A probe render measures the ink; cap height and a CJK ideograph both come out
-// INK_H tall, and a wide glyph is held to INK_W.
+// INK_H tall, and a wide glyph is held to INK_W. The ink box's corners stay
+// within 0.4 of the size from the centre, which is the maskable-icon safe zone,
+// so the manifest can mark the full-bleed art "maskable" (pinned in a test).
 const PROBE = 1000;
-const INK_H = 28;
-const INK_W = 40;
+export const INK_H = 28;
+export const INK_W = 40;
 type Placement = { family: string; font: Uint8Array; size: number; x: number; y: number };
 
 function inkBox(resvg: ResvgModule, ch: string, family: string, font: Uint8Array) {
@@ -248,6 +268,11 @@ export type GeneratedIcons = {
   "apple-touch-icon.png": Uint8Array<ArrayBuffer>;
   "icon.png": Uint8Array<ArrayBuffer>;
   "favicon.ico": Uint8Array<ArrayBuffer>;
+  // The web manifest's icons (Android home screen). Full-bleed like the apple
+  // icon: the glyph's ink stays inside the maskable safe zone (a centred circle
+  // of radius 0.4), so one image serves "any" and "maskable".
+  "icon-192.png": Uint8Array<ArrayBuffer>;
+  "icon-512.png": Uint8Array<ArrayBuffer>;
   // What was drawn, for the build log and tests: the character and its font
   // family, or family null when the square went out without one.
   letter: string;
@@ -292,6 +317,8 @@ export async function renderIcons(opts: {
     "apple-touch-icon.png": render(180, false),
     "icon.png": icon32,
     "favicon.ico": pngToIco(icon32, 32),
+    "icon-192.png": render(192, false),
+    "icon-512.png": render(512, false),
     letter: ch,
     family: placement?.family ?? null,
   };

package/src/pipeline.ts

@@ -50,6 +50,7 @@ import {
 import type { Resources } from "@junejs/core/resources";
 
 import { iconLetter } from "./icon-letter";
+import { webManifest } from "./web-manifest";
 import { negotiate, TITLE_HEADER, SEGMENT_HEADER, encodeTitle } from "./negotiate";
 
 // Minimal Cookie-header read for the locale negotiation chain (no dependency on
@@ -543,6 +544,12 @@ export function createPipeline(cfg: PipelineConfig): Pipeline {
       ) {
         return letterFavicon(docConfig.site.name);
       }
+      // --- generated web manifest (only beside June's generated icons) ------
+      if (request.method === "GET" && docConfig.icons?.generated && url.pathname === "/manifest.webmanifest") {
+        return text(webManifest(docConfig), "application/manifest+json", {
+          headers: { "cache-control": "public, max-age=86400" },
+        });
+      }
 
       // --- locale resolution (before routing) ------------------------------
       // host/path → locale, stripping the locale prefix off the front so the

package/src/web-manifest.ts

@@ -0,0 +1,42 @@
+// The generated web app manifest (/manifest.webmanifest) — Android's "Add to
+// Home Screen" name, icons, and colours, built from the same config the
+// document renders with. Worker-safe (no node:*): the pipeline serves it like
+// the SVG favicon, so dev, the worker, and the static build all agree.
+import { resolveThemeColor, type DocumentConfig } from "@junejs/core/document";
+
+// The home-screen label: site.shortName, else the site name's leading segment
+// ("June — build agents into real apps" → "June"). Launchers truncate past
+// ~12 characters, and a tagline is never the label anyone wants.
+export function shortName(site: DocumentConfig["site"]): string | undefined {
+  if (site.shortName) return site.shortName;
+  const name = site.name?.trim();
+  if (!name) return undefined;
+  return name.split(/\s+[—–|-]\s+|:\s+/)[0]!.trim() || name;
+}
+
+export function webManifest(config: DocumentConfig): string {
+  const base = config.basePath ?? "";
+  const theme = resolveThemeColor(config);
+  // A manifest has ONE theme colour; a { light, dark } pair has no honest single
+  // value, so both colour fields are left to the browser then.
+  const color = typeof theme === "string" ? theme : undefined;
+  const manifest = {
+    name: config.site.name,
+    short_name: shortName(config.site),
+    description: config.site.description,
+    start_url: `${base}/`,
+    scope: `${base}/`,
+    // "browser": a home-screen shortcut that opens a normal tab. standalone
+    // (app-like, no URL bar) changes how a site behaves, so it stays opt-in via
+    // your own public/manifest.webmanifest.
+    display: "browser",
+    ...(color ? { theme_color: color, background_color: color } : {}),
+    icons: [
+      { src: `${base}/icon-192.png`, sizes: "192x192", type: "image/png" },
+      { src: `${base}/icon-512.png`, sizes: "512x512", type: "image/png" },
+      // The same full-bleed art: its glyph sits inside the maskable safe zone.
+      { src: `${base}/icon-512.png`, sizes: "512x512", type: "image/png", purpose: "maskable" },
+    ],
+  };
+  return JSON.stringify(manifest, null, 2) + "\n";
+}