@moku-labs/web 1.3.1 → 1.4.1

package/dist/browser.d.mts

@@ -557,6 +557,32 @@ type Api$3 = {
    */
   t(locale: string, key: string): string;
 };
+//#endregion
+//#region src/plugins/router/iso-match.d.ts
+/**
+ * A compiled, engine-agnostic path matcher: the same `.exec({ pathname })` shape the
+ * router consumed from `URLPattern`, but backed by a native `RegExp` with named
+ * groups. Dropping `URLPattern` keeps route matching alive in every browser engine —
+ * Safari < 18.4 and Firefox < ~142 have no `URLPattern` global and would otherwise
+ * throw `ReferenceError` the instant the router compiles its table on boot.
+ */
+interface PathMatcher {
+  /**
+   * Match a pathname, mirroring `URLPattern.exec`: the named-group bag (under
+   * `pathname.groups`) on a hit, or `null` on a miss.
+   *
+   * @param input - The match input carrying the `pathname` to test.
+   * @param input.pathname - The URL pathname to match, e.g. `/en/hello/`.
+   * @returns A `{ pathname: { groups } }` result on a match, or `null` on no match.
+   */
+  exec(input: {
+    readonly pathname: string;
+  }): {
+    readonly pathname: {
+      readonly groups: Record<string, string | undefined>;
+    };
+  } | null;
+}
 declare namespace types_d_exports$5 {
   export { Api$2 as Api, ClientRoute, CompileInput, CompiledRoute, Config$2 as Config, ExtractApi$1 as ExtractApi, ExtractRouteParams, ExtractSegmentParameter, GenerateContext, HeadConfig$1 as HeadConfig, LayoutContext, LoadContext, MatcherTable, Prettify, RouteBuilder, RouteContext, RouteDefinition, RouteHandlers, RouteMap, RouteRequire, RouteState, RouterApi, RouterConfig, RouterState, State$2 as State, TypedRoute, Urls };
 }
@@ -836,10 +862,10 @@ interface CompiledRoute {
   readonly pattern: string;
   /** Dynamic-segment count (lower = more specific = matched first). */
   readonly dynamicSegmentCount: number;
-  /** Pre-built URLPattern matchers (lang-aware + bare fallback). */
+  /** Pre-built path matchers (lang-aware + bare fallback). */
   readonly matchers: {
-    readonly withLang: URLPattern;
-    readonly bare: URLPattern;
+    readonly withLang: PathMatcher;
+    readonly bare: PathMatcher;
   };
   /** Resolve pathname into params (withLang first, then bare with defaultLocale injected). */
   readonly matchFn: (pathname: string) => Record<string, string> | null;

package/dist/browser.mjs

@@ -1331,22 +1331,101 @@ function extractGroups(groups) {
 	}
 	return params;
 }
-//#endregion
-//#region src/plugins/router/builders/match.ts
+/** Regex metacharacters escaped when a static path segment is inlined into a compiled pattern. */
+const REGEX_METACHARS = /[.*+?^${}()|[\]\\]/g;
+/** Matches a `:name` or `:name(regex)` URLPattern group occupying one whole segment. */
+const NAMED_GROUP = /^:([A-Za-z_]\w*)(?:\((.+)\))?$/;
 /**
-* @file router plugin — runtime matching domain.
+* Escape a static path segment so its literal text matches verbatim inside the
+* compiled `RegExp` (a segment like `c++` must not be read as regex syntax).
 *
-* Pure functions that turn compiled patterns into a pathname matcher: build the
-* lang-aware/bare `URLPattern` pair, the `matchFn` (withLang first, bare fallback
-* injecting `defaultLocale`), and extract/strip params. No `ctx` here.
+* @param text - The static segment text.
+* @returns The regex-escaped segment.
+* @example
+* ```ts
+* escapeStaticSegment("about"); // "about"
+* ```
 */
+function escapeStaticSegment(text) {
+	return text.replaceAll(REGEX_METACHARS, String.raw`\$&`);
+}
 /**
-* Build a pathname matcher for a single route: tries the `withLang` URLPattern,
-* then the `bare` pattern injecting `defaultLocale` on miss.
+* Compile one URLPattern source segment (no surrounding slash) into a regex fragment
+* that captures a single path segment: `:name` → a named `[^/]+` group, `:name(re)` →
+* a named group constrained by `re`, and static text → its escaped literal.
 *
-* @param matchers - The pre-built `withLang` and `bare` URLPattern pair.
-* @param matchers.withLang - The locale-aware URLPattern variant.
-* @param matchers.bare - The bare URLPattern variant (no leading locale segment).
+* @param segment - One source segment, e.g. `:slug`, `:lang(en|uk)`, or `archive`.
+* @returns The regex fragment for that segment.
+* @example
+* ```ts
+* segmentToRegex(":lang(en|uk)"); // "(?<lang>en|uk)"
+* ```
+*/
+function segmentToRegex(segment) {
+	const named = NAMED_GROUP.exec(segment);
+	if (named) {
+		const [, name, constraint] = named;
+		return `(?<${name}>${constraint ?? "[^/]+"})`;
+	}
+	return escapeStaticSegment(segment);
+}
+/**
+* Compile a URLPattern pathname source string into a {@link PathMatcher} backed by a
+* native `RegExp` — a drop-in replacement for `new URLPattern({ pathname })` over the
+* subset the router emits: `:name`, `:name(regex)`, the optional `:name?` segment
+* (whose leading `/` is absorbed, so `/:lang?` matches `/en` or nothing), static
+* segments, and a required trailing slash. Anchored full-match, like `URLPattern`.
+*
+* @param source - The URLPattern pathname source, e.g. `/:lang?/:slug/`.
+* @returns A matcher whose `.exec({ pathname })` yields named groups or `null`.
+* @example
+* ```ts
+* const m = createPathMatcher("/:lang?/:slug/");
+* m.exec({ pathname: "/en/hello/" }); // { pathname: { groups: { lang: "en", slug: "hello" } } }
+* ```
+*/
+function createPathMatcher(source) {
+	const segments = source.split("/");
+	let pattern = "^";
+	for (let index = 1; index < segments.length; index += 1) {
+		const segment = segments[index] ?? "";
+		if (segment === "") {
+			pattern += "/";
+			continue;
+		}
+		const optional = segment.endsWith("?");
+		const fragment = segmentToRegex(optional ? segment.slice(0, -1) : segment);
+		pattern += optional ? `(?:/${fragment})?` : `/${fragment}`;
+	}
+	pattern += "$";
+	const regexp = new RegExp(pattern);
+	return { 
+	/**
+	* Run the compiled regex over a pathname (the {@link PathMatcher.exec} contract).
+	*
+	* @param input - The match input carrying the `pathname` to test.
+	* @param input.pathname - The URL pathname to match, e.g. `/en/hello/`.
+	* @returns A `{ pathname: { groups } }` result on a match, or `null` on no match.
+	* @example
+	* ```ts
+	* matcher.exec({ pathname: "/en/hello/" });
+	* ```
+	*/
+exec(input) {
+		const result = regexp.exec(input.pathname);
+		if (!result) return null;
+		return { pathname: { groups: result.groups ?? {} } };
+	} };
+}
+//#endregion
+//#region src/plugins/router/builders/match.ts
+/**
+* Build a pathname matcher for a single route: tries the `withLang` matcher,
+* then the `bare` matcher injecting `defaultLocale` on miss.
+*
+* @param matchers - The pre-built `withLang` and `bare` matcher pair.
+* @param matchers.withLang - The locale-aware matcher variant.
+* @param matchers.bare - The bare matcher variant (no leading locale segment).
 * @param defaultLocale - Locale injected when the bare fallback matches.
 * @returns A function resolving a pathname into params, or `null` on no match.
 * @example
@@ -1390,14 +1469,6 @@ function matchRoute(compiled, pathname) {
 }
 //#endregion
 //#region src/plugins/router/builders/compile.ts
-/**
-* @file router plugin — compilation + validation domain.
-*
-* Pure functions invoked from `onInit`: validate the route map, then compile each
-* route into URLPattern matchers + URL/file builders, count dynamic segments,
-* sort by specificity, and assemble the immutable `MatcherTable`. Receives DATA
-* only (`CompileInput`) — never the plugin ctx.
-*/
 /** Shared `[web]` error prefix for router validation failures. */
 const ERROR_PREFIX$6 = "[web] router";
 /** Maximum number of optional `{lang:?}` segments a single pattern may declare. */
@@ -1569,8 +1640,8 @@ function buildFilePath(pattern, params) {
 function buildMatchers(pattern, locales) {
 	const langRegex = `(${locales.join("|")})`;
 	return {
-		withLang: new URLPattern({ pathname: patternToUrlPattern(pattern, "withLang", langRegex) }),
-		bare: new URLPattern({ pathname: patternToUrlPattern(pattern, "bare", langRegex) })
+		withLang: createPathMatcher(patternToUrlPattern(pattern, "withLang", langRegex)),
+		bare: createPathMatcher(patternToUrlPattern(pattern, "bare", langRegex))
 	};
 }
 /**

package/dist/index.cjs

@@ -1889,22 +1889,101 @@ function extractGroups(groups) {
 	}
 	return params;
 }
-//#endregion
-//#region src/plugins/router/builders/match.ts
+/** Regex metacharacters escaped when a static path segment is inlined into a compiled pattern. */
+const REGEX_METACHARS = /[.*+?^${}()|[\]\\]/g;
+/** Matches a `:name` or `:name(regex)` URLPattern group occupying one whole segment. */
+const NAMED_GROUP = /^:([A-Za-z_]\w*)(?:\((.+)\))?$/;
+/**
+* Escape a static path segment so its literal text matches verbatim inside the
+* compiled `RegExp` (a segment like `c++` must not be read as regex syntax).
+*
+* @param text - The static segment text.
+* @returns The regex-escaped segment.
+* @example
+* ```ts
+* escapeStaticSegment("about"); // "about"
+* ```
+*/
+function escapeStaticSegment(text) {
+	return text.replaceAll(REGEX_METACHARS, String.raw`\$&`);
+}
 /**
-* @file router plugin — runtime matching domain.
+* Compile one URLPattern source segment (no surrounding slash) into a regex fragment
+* that captures a single path segment: `:name` → a named `[^/]+` group, `:name(re)` →
+* a named group constrained by `re`, and static text → its escaped literal.
 *
-* Pure functions that turn compiled patterns into a pathname matcher: build the
-* lang-aware/bare `URLPattern` pair, the `matchFn` (withLang first, bare fallback
-* injecting `defaultLocale`), and extract/strip params. No `ctx` here.
+* @param segment - One source segment, e.g. `:slug`, `:lang(en|uk)`, or `archive`.
+* @returns The regex fragment for that segment.
+* @example
+* ```ts
+* segmentToRegex(":lang(en|uk)"); // "(?<lang>en|uk)"
+* ```
 */
+function segmentToRegex(segment) {
+	const named = NAMED_GROUP.exec(segment);
+	if (named) {
+		const [, name, constraint] = named;
+		return `(?<${name}>${constraint ?? "[^/]+"})`;
+	}
+	return escapeStaticSegment(segment);
+}
 /**
-* Build a pathname matcher for a single route: tries the `withLang` URLPattern,
-* then the `bare` pattern injecting `defaultLocale` on miss.
+* Compile a URLPattern pathname source string into a {@link PathMatcher} backed by a
+* native `RegExp` — a drop-in replacement for `new URLPattern({ pathname })` over the
+* subset the router emits: `:name`, `:name(regex)`, the optional `:name?` segment
+* (whose leading `/` is absorbed, so `/:lang?` matches `/en` or nothing), static
+* segments, and a required trailing slash. Anchored full-match, like `URLPattern`.
 *
-* @param matchers - The pre-built `withLang` and `bare` URLPattern pair.
-* @param matchers.withLang - The locale-aware URLPattern variant.
-* @param matchers.bare - The bare URLPattern variant (no leading locale segment).
+* @param source - The URLPattern pathname source, e.g. `/:lang?/:slug/`.
+* @returns A matcher whose `.exec({ pathname })` yields named groups or `null`.
+* @example
+* ```ts
+* const m = createPathMatcher("/:lang?/:slug/");
+* m.exec({ pathname: "/en/hello/" }); // { pathname: { groups: { lang: "en", slug: "hello" } } }
+* ```
+*/
+function createPathMatcher(source) {
+	const segments = source.split("/");
+	let pattern = "^";
+	for (let index = 1; index < segments.length; index += 1) {
+		const segment = segments[index] ?? "";
+		if (segment === "") {
+			pattern += "/";
+			continue;
+		}
+		const optional = segment.endsWith("?");
+		const fragment = segmentToRegex(optional ? segment.slice(0, -1) : segment);
+		pattern += optional ? `(?:/${fragment})?` : `/${fragment}`;
+	}
+	pattern += "$";
+	const regexp = new RegExp(pattern);
+	return { 
+	/**
+	* Run the compiled regex over a pathname (the {@link PathMatcher.exec} contract).
+	*
+	* @param input - The match input carrying the `pathname` to test.
+	* @param input.pathname - The URL pathname to match, e.g. `/en/hello/`.
+	* @returns A `{ pathname: { groups } }` result on a match, or `null` on no match.
+	* @example
+	* ```ts
+	* matcher.exec({ pathname: "/en/hello/" });
+	* ```
+	*/
+exec(input) {
+		const result = regexp.exec(input.pathname);
+		if (!result) return null;
+		return { pathname: { groups: result.groups ?? {} } };
+	} };
+}
+//#endregion
+//#region src/plugins/router/builders/match.ts
+/**
+* Build a pathname matcher for a single route: tries the `withLang` matcher,
+* then the `bare` matcher injecting `defaultLocale` on miss.
+*
+* @param matchers - The pre-built `withLang` and `bare` matcher pair.
+* @param matchers.withLang - The locale-aware matcher variant.
+* @param matchers.bare - The bare matcher variant (no leading locale segment).
 * @param defaultLocale - Locale injected when the bare fallback matches.
 * @returns A function resolving a pathname into params, or `null` on no match.
 * @example
@@ -1948,14 +2027,6 @@ function matchRoute(compiled, pathname) {
 }
 //#endregion
 //#region src/plugins/router/builders/compile.ts
-/**
-* @file router plugin — compilation + validation domain.
-*
-* Pure functions invoked from `onInit`: validate the route map, then compile each
-* route into URLPattern matchers + URL/file builders, count dynamic segments,
-* sort by specificity, and assemble the immutable `MatcherTable`. Receives DATA
-* only (`CompileInput`) — never the plugin ctx.
-*/
 /** Shared `[web]` error prefix for router validation failures. */
 const ERROR_PREFIX$11 = "[web] router";
 /** Maximum number of optional `{lang:?}` segments a single pattern may declare. */
@@ -2127,8 +2198,8 @@ function buildFilePath(pattern, params) {
 function buildMatchers(pattern, locales) {
 	const langRegex = `(${locales.join("|")})`;
 	return {
-		withLang: new URLPattern({ pathname: patternToUrlPattern(pattern, "withLang", langRegex) }),
-		bare: new URLPattern({ pathname: patternToUrlPattern(pattern, "bare", langRegex) })
+		withLang: createPathMatcher(patternToUrlPattern(pattern, "withLang", langRegex)),
+		bare: createPathMatcher(patternToUrlPattern(pattern, "bare", langRegex))
 	};
 }
 /**
@@ -3842,7 +3913,7 @@ const DEFAULT_BODY = "<h1>404</h1><p>The page you requested could not be found.<
 * ```
 */
 function wrap(body) {
-	return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>404 — Not Found</title></head><body>${body}</body></html>`;
+	return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>404 — Not Found</title></head><body>${body}</body></html>`;
 }
 /**
 * Emits `outDir/404.html`. When `config.notFound` is `true`, writes the built-in
@@ -4526,6 +4597,8 @@ const HEAD_PLACEHOLDER = "<!--moku:head-->";
 const BODY_PLACEHOLDER = "<!--moku:body-->";
 /** Template placeholder for the injected asset `<link>`/`<script>` tags. */
 const ASSETS_PLACEHOLDER = "<!--moku:assets-->";
+/** Template placeholder for the page's locale (`<html lang>`). */
+const LANG_PLACEHOLDER = "<!--moku:lang-->";
 /**
 * Read the bundle phase's hashed asset manifest for one kind from `state.buildCache`
 * as a typed {@link BuildCacheEntry} (no `Map<string, unknown>` reads).
@@ -4573,14 +4646,16 @@ function buildAssetTags(ctx) {
 * ```
 */
 function renderDocument(parts) {
-	return `<!DOCTYPE html><html lang="${parts.locale}"><head>${parts.head}${parts.assets}</head><body>${parts.body}</body></html>`;
+	return `<!DOCTYPE html><html lang="${parts.locale}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">${parts.head}${parts.assets}</head><body>${parts.body}</body></html>`;
 }
 /**
-* Fill a shell template's `<!--moku:head-->` / `<!--moku:body-->` /
-* `<!--moku:assets-->` placeholders deterministically at build time.
+* Fill a shell template's `<!--moku:lang-->` / `<!--moku:head-->` /
+* `<!--moku:body-->` / `<!--moku:assets-->` placeholders deterministically at build
+* time. `<!--moku:lang-->` carries the page locale (for `<html lang>`), so a single
+* shared template stays locale-correct across every locale.
 *
 * @param template - The raw shell template HTML.
-* @param parts - The composed head/body/assets pieces.
+* @param parts - The composed head/body/assets/locale pieces.
 * @returns The filled document string.
 * @example
 * ```ts
@@ -4588,7 +4663,7 @@ function renderDocument(parts) {
 * ```
 */
 function fillTemplate(template, parts) {
-	return template.replaceAll(HEAD_PLACEHOLDER, parts.head).replaceAll(BODY_PLACEHOLDER, parts.body).replaceAll(ASSETS_PLACEHOLDER, parts.assets);
+	return template.replaceAll(LANG_PLACEHOLDER, parts.locale).replaceAll(HEAD_PLACEHOLDER, parts.head).replaceAll(BODY_PLACEHOLDER, parts.body).replaceAll(ASSETS_PLACEHOLDER, parts.assets);
 }
 /**
 * Resolve the compiled entry for a manifest definition, asserting the router
@@ -5840,7 +5915,8 @@ function buildWranglerArgs(input) {
 		"--project-name",
 		input.slug,
 		"--branch",
-		branch
+		branch,
+		"--commit-dirty=true"
 	];
 }
 /**
@@ -6449,17 +6525,18 @@ function validateConfig$1(ctx) {
 	ctx.require(sitePlugin);
 }
 /**
-* Run wrangler for the prepared argv and surface its scrubbed result, translating
-* a non-zero exit into the classified deploy error. The API token is read from env
-* here so it never crosses a logging boundary; only scrubbed output is returned.
-* Shared by `run()` (deploy) and `createProject()` (project create).
+* Run wrangler for the prepared argv and return its stdout, translating a non-zero
+* exit into the classified deploy error. The API token is read from env here so it
+* never crosses a logging boundary; the scrubbed stderr is used only to classify a
+* failure — it is never logged (that was console noise), so nothing leaks. Shared by
+* `run()` (deploy) and `createProject()` (project create).
 *
 * @param ctx - Plugin context (provides `state.spawn`, `config`, `env`).
 * @param args - The fully-built, pre-validated wrangler argv.
-* @returns The wrangler `stdout` plus the scrubbed `stderr` to log on success.
+* @returns The wrangler `stdout` (for URL/id parsing on a deploy).
 * @throws {Error} With a `code` from the deploy error taxonomy on a non-zero exit.
 * @example
-* const { stdout, scrubbedStderr } = await executeWrangler(ctx, args);
+* const stdout = await executeWrangler(ctx, args);
 */
 async function executeWrangler(ctx, args) {
 	const token = ctx.env.require("CLOUDFLARE_API_TOKEN");
@@ -6473,10 +6550,7 @@ async function executeWrangler(ctx, args) {
 		const { code, message } = classifyWranglerError(exitCode, scrubbedStderr);
 		throw deployError(code, message);
 	}
-	return {
-		stdout,
-		scrubbedStderr
-	};
+	return stdout;
 }
 /**
 * Assemble the public {@link DeployResult} from wrangler's stdout, parsing the
@@ -6533,9 +6607,7 @@ function createApi$2(ctx) {
 				root
 			});
 			const start = Date.now();
-			const { stdout, scrubbedStderr } = await executeWrangler(ctx, args);
-			ctx.log.info(scrubbedStderr);
-			const result = buildDeployResult(stdout, branch, start);
+			const result = buildDeployResult(await executeWrangler(ctx, args), branch, start);
 			ctx.state.lastDeployment = result;
 			ctx.emit("deploy:complete", {
 				url: result.url,
@@ -6595,11 +6667,10 @@ function createApi$2(ctx) {
 		async createProject() {
 			const name = toSlug(ctx.require(sitePlugin).name());
 			const branch = ctx.config.productionBranch ?? "main";
-			const { scrubbedStderr } = await executeWrangler(ctx, buildProjectCreateArgs({
+			await executeWrangler(ctx, buildProjectCreateArgs({
 				slug: name,
 				branch
 			}));
-			ctx.log.info(scrubbedStderr);
 			return {
 				name,
 				branch
@@ -8766,16 +8837,24 @@ function createPanelRenderer(options = {}) {
 			write(line);
 		},
 		/**
-		* Render the deploy result from a `deploy:complete` event: a `✓ DEPLOYED → url` line
-		* with the URL the hero value, then a dim `branch · id · time` line beneath it.
+		* Render the deploy result from a `deploy:complete` event as a full-width box (matching
+		* the BUILD panel): a `✓ DEPLOYED · branch` header with the elapsed time right-aligned,
+		* then a `→ url · id` row. The url/id row is omitted entirely when wrangler returned no
+		* URL, so a first-deploy with nothing to parse never renders a dangling `→` or `· ·`.
 		*
 		* @param result - The `deploy:complete` payload.
 		* @example
 		* render.deployed({ url: "https://x.pages.dev", deploymentId: "id", branch: "main", durationMs: 1200 });
 		*/
 		deployed(result) {
-			const meta = palette.dim(`branch ${result.branch} · ${result.deploymentId} · ${result.durationMs}ms`);
-			writeBlock([`  ${palette.green("✓")} ${palette.bold("DEPLOYED")}   ${palette.dim("→")}  ${palette.cyan(result.url)}`, `  ${meta}`]);
+			const dot = palette.dim("·");
+			const time = result.durationMs >= 1e3 ? `${(result.durationMs / 1e3).toFixed(1)}s` : `${result.durationMs}ms`;
+			const lines = [railLine(`${palette.green("✓")} ${palette.bold("DEPLOYED")} ${dot} ${result.branch}`, palette.dim(time), BOX_INNER)];
+			if (result.url) {
+				const id = result.deploymentId ? ` ${dot} ${palette.dim(result.deploymentId)}` : "";
+				lines.push(`${palette.dim("→")} ${palette.cyan(result.url)}${id}`);
+			} else if (result.deploymentId) lines.push(palette.dim(`id ${result.deploymentId}`));
+			writeBlock(box(lines, color, BOX_INNER));
 		},
 		/**
 		* Render a neutral informational line.
@@ -8870,6 +8949,29 @@ function createPanelRenderer(options = {}) {
 */
 /** Matches an explicit affirmative answer (`y`/`yes`, case-insensitive). */
 const YES_PATTERN = /^y(es)?$/i;
+/** Prompt rail width — matches the renderer's `RAIL_WIDTH` so the hint aligns with other rows. */
+const PROMPT_WIDTH = 66;
+/** Whether the interactive prompts render with the MOKU marker styling (color/TTY only). */
+const PROMPT_COLOR = supportsColor();
+/** Shared palette for the interactive prompts (same brand colors as the Panel renderer). */
+const PROMPT_PALETTE = makePalette(PROMPT_COLOR, PROMPT_COLOR && supportsTruecolor());
+/**
+* Build the styled y/N confirm prompt: a brand `◆` marker + the question on the left,
+* a dim `y / N` hint + cyan `›` caret right-aligned to {@link PROMPT_WIDTH}. Falls back
+* to the plain `question [y/N] ` form off a color TTY (CI/pipes), where prompts rarely run.
+*
+* @param question - The yes/no question to display.
+* @returns The readline prompt string (the typed answer follows the caret).
+* @example
+* confirmPrompt("Deploy dist/ to Cloudflare Pages?");
+*/
+function confirmPrompt(question) {
+	if (!PROMPT_COLOR) return `${question} [y/N] `;
+	const left = `  ${PROMPT_PALETTE.pink("◆")} ${question}`;
+	const right = `${PROMPT_PALETTE.dim("y / N")} ${PROMPT_PALETTE.cyan("›")} `;
+	const gap = Math.max(1, PROMPT_WIDTH - visibleWidth(left) - visibleWidth(right));
+	return `${left}${" ".repeat(gap)}${right}`;
+}
 /**
 * Resolve the `Bun` runtime global, or `undefined` when not running under Bun.
 *
@@ -8927,7 +9029,7 @@ function defaultConfirm(question) {
 			input: process.stdin,
 			output: process.stdout
 		});
-		readline.question(`${question} [y/N] `, (answer) => {
+		readline.question(confirmPrompt(question), (answer) => {
 			readline.close();
 			resolve(YES_PATTERN.test(answer.trim()));
 		});
@@ -8950,8 +9052,8 @@ function defaultSelect(question, choices) {
 			input: process.stdin,
 			output: process.stdout
 		});
-		for (const [index, choice] of choices.entries()) console.log(`  ${index + 1}) ${choice}`);
-		readline.question(`${question} [1-${choices.length}] `, (answer) => {
+		console.log(selectChoicesBlock(question, choices));
+		readline.question(selectPrompt(question, choices.length), (answer) => {
 			readline.close();
 			const picked = Number.parseInt(answer.trim(), 10);
 			resolve(Number.isInteger(picked) && picked >= 1 && picked <= choices.length ? picked - 1 : 0);
@@ -8959,6 +9061,36 @@ function defaultSelect(question, choices) {
 	});
 }
 /**
+* Render the select block: a brand `◆` marker + the question, then each choice as an
+* indented dim number + label. Off a color TTY, falls back to the plain `  N) label`
+* list (the question rides the prompt instead).
+*
+* @param question - The prompt shown above the choices (styled mode only).
+* @param choices - The selectable option labels.
+* @returns The multi-line choices block.
+* @example
+* selectChoicesBlock("Set up a workflow?", ["Auto", "Manual", "Skip"]);
+*/
+function selectChoicesBlock(question, choices) {
+	if (!PROMPT_COLOR) return choices.map((choice, index) => `  ${index + 1}) ${choice}`).join("\n");
+	return [`  ${PROMPT_PALETTE.pink("◆")} ${question}`, ...choices.map((choice, index) => `      ${PROMPT_PALETTE.dim(String(index + 1))}  ${choice}`)].join("\n");
+}
+/**
+* Build the select input prompt: a dim `pick 1–N` hint + cyan `›` caret in styled mode,
+* or the plain `question [1-N] ` form off a color TTY (where the question is not printed
+* separately).
+*
+* @param question - The prompt (used only by the plain fallback).
+* @param count - The number of choices.
+* @returns The readline prompt string.
+* @example
+* selectPrompt("Set up a workflow?", 3);
+*/
+function selectPrompt(question, count) {
+	if (!PROMPT_COLOR) return `${question} [1-${count}] `;
+	return `    ${PROMPT_PALETTE.dim(`pick 1–${count}`)} ${PROMPT_PALETTE.cyan("›")} `;
+}
+/**
 * Default recursive directory watcher — wraps `node:fs.watch` with `{ recursive: true }`
 * and adapts its handle to {@link WatchHandle}. Tests inject a fake emitter so no real
 * FS watch is registered.

package/dist/index.d.cts

@@ -557,6 +557,32 @@ type Api$6 = {
    */
   t(locale: string, key: string): string;
 };
+//#endregion
+//#region src/plugins/router/iso-match.d.ts
+/**
+ * A compiled, engine-agnostic path matcher: the same `.exec({ pathname })` shape the
+ * router consumed from `URLPattern`, but backed by a native `RegExp` with named
+ * groups. Dropping `URLPattern` keeps route matching alive in every browser engine —
+ * Safari < 18.4 and Firefox < ~142 have no `URLPattern` global and would otherwise
+ * throw `ReferenceError` the instant the router compiles its table on boot.
+ */
+interface PathMatcher {
+  /**
+   * Match a pathname, mirroring `URLPattern.exec`: the named-group bag (under
+   * `pathname.groups`) on a hit, or `null` on a miss.
+   *
+   * @param input - The match input carrying the `pathname` to test.
+   * @param input.pathname - The URL pathname to match, e.g. `/en/hello/`.
+   * @returns A `{ pathname: { groups } }` result on a match, or `null` on no match.
+   */
+  exec(input: {
+    readonly pathname: string;
+  }): {
+    readonly pathname: {
+      readonly groups: Record<string, string | undefined>;
+    };
+  } | null;
+}
 declare namespace types_d_exports$8 {
   export { Api$5 as Api, ClientRoute, CompileInput, CompiledRoute, Config$5 as Config, ExtractApi$2 as ExtractApi, ExtractRouteParams, ExtractSegmentParameter, GenerateContext, HeadConfig$1 as HeadConfig, LayoutContext, LoadContext, MatcherTable, Prettify, RouteBuilder, RouteContext, RouteDefinition, RouteHandlers, RouteMap, RouteRequire, RouteState, RouterApi, RouterConfig, RouterState, State$5 as State, TypedRoute, Urls };
 }
@@ -836,10 +862,10 @@ interface CompiledRoute {
   readonly pattern: string;
   /** Dynamic-segment count (lower = more specific = matched first). */
   readonly dynamicSegmentCount: number;
-  /** Pre-built URLPattern matchers (lang-aware + bare fallback). */
+  /** Pre-built path matchers (lang-aware + bare fallback). */
   readonly matchers: {
-    readonly withLang: URLPattern;
-    readonly bare: URLPattern;
+    readonly withLang: PathMatcher;
+    readonly bare: PathMatcher;
   };
   /** Resolve pathname into params (withLang first, then bare with defaultLocale injected). */
   readonly matchFn: (pathname: string) => Record<string, string> | null;
@@ -1615,7 +1641,17 @@ type Config$3 = {
     body?: string;
   }; /** Emit per-path i18n bare-path redirect HTML pages. Default `false`. */
   localeRedirects?: boolean; /** Authoritative client bundle entry path (overrides the conventional scan). */
-  clientEntry?: string; /** HTML shell template with `<!--moku:head-->`/`<!--moku:body-->`/`<!--moku:assets-->` placeholders. */
+  clientEntry?: string;
+  /**
+   * Path to a custom HTML document shell, giving the app full control over the
+   * scaffold (charset, viewport, `<html lang>`, body attributes, wrapper markup).
+   * Placeholders, substituted per page at build time:
+   * `<!--moku:lang-->` (page locale for `<html lang>`),
+   * `<!--moku:head-->` (composed `<head>` inner HTML),
+   * `<!--moku:assets-->` (injected `<link>`/`<script>` tags),
+   * `<!--moku:body-->` (SSR body HTML).
+   * When unset, the built-in shell is used (it emits charset + viewport by default).
+   */
   template?: string;
 };
 /**

package/dist/index.d.mts

@@ -557,6 +557,32 @@ type Api$6 = {
    */
   t(locale: string, key: string): string;
 };
+//#endregion
+//#region src/plugins/router/iso-match.d.ts
+/**
+ * A compiled, engine-agnostic path matcher: the same `.exec({ pathname })` shape the
+ * router consumed from `URLPattern`, but backed by a native `RegExp` with named
+ * groups. Dropping `URLPattern` keeps route matching alive in every browser engine —
+ * Safari < 18.4 and Firefox < ~142 have no `URLPattern` global and would otherwise
+ * throw `ReferenceError` the instant the router compiles its table on boot.
+ */
+interface PathMatcher {
+  /**
+   * Match a pathname, mirroring `URLPattern.exec`: the named-group bag (under
+   * `pathname.groups`) on a hit, or `null` on a miss.
+   *
+   * @param input - The match input carrying the `pathname` to test.
+   * @param input.pathname - The URL pathname to match, e.g. `/en/hello/`.
+   * @returns A `{ pathname: { groups } }` result on a match, or `null` on no match.
+   */
+  exec(input: {
+    readonly pathname: string;
+  }): {
+    readonly pathname: {
+      readonly groups: Record<string, string | undefined>;
+    };
+  } | null;
+}
 declare namespace types_d_exports$8 {
   export { Api$5 as Api, ClientRoute, CompileInput, CompiledRoute, Config$5 as Config, ExtractApi$2 as ExtractApi, ExtractRouteParams, ExtractSegmentParameter, GenerateContext, HeadConfig$1 as HeadConfig, LayoutContext, LoadContext, MatcherTable, Prettify, RouteBuilder, RouteContext, RouteDefinition, RouteHandlers, RouteMap, RouteRequire, RouteState, RouterApi, RouterConfig, RouterState, State$5 as State, TypedRoute, Urls };
 }
@@ -836,10 +862,10 @@ interface CompiledRoute {
   readonly pattern: string;
   /** Dynamic-segment count (lower = more specific = matched first). */
   readonly dynamicSegmentCount: number;
-  /** Pre-built URLPattern matchers (lang-aware + bare fallback). */
+  /** Pre-built path matchers (lang-aware + bare fallback). */
   readonly matchers: {
-    readonly withLang: URLPattern;
-    readonly bare: URLPattern;
+    readonly withLang: PathMatcher;
+    readonly bare: PathMatcher;
   };
   /** Resolve pathname into params (withLang first, then bare with defaultLocale injected). */
   readonly matchFn: (pathname: string) => Record<string, string> | null;
@@ -1615,7 +1641,17 @@ type Config$3 = {
     body?: string;
   }; /** Emit per-path i18n bare-path redirect HTML pages. Default `false`. */
   localeRedirects?: boolean; /** Authoritative client bundle entry path (overrides the conventional scan). */
-  clientEntry?: string; /** HTML shell template with `<!--moku:head-->`/`<!--moku:body-->`/`<!--moku:assets-->` placeholders. */
+  clientEntry?: string;
+  /**
+   * Path to a custom HTML document shell, giving the app full control over the
+   * scaffold (charset, viewport, `<html lang>`, body attributes, wrapper markup).
+   * Placeholders, substituted per page at build time:
+   * `<!--moku:lang-->` (page locale for `<html lang>`),
+   * `<!--moku:head-->` (composed `<head>` inner HTML),
+   * `<!--moku:assets-->` (injected `<link>`/`<script>` tags),
+   * `<!--moku:body-->` (SSR body HTML).
+   * When unset, the built-in shell is used (it emits charset + viewport by default).
+   */
   template?: string;
 };
 /**

package/dist/index.mjs

@@ -1876,22 +1876,101 @@ function extractGroups(groups) {
 	}
 	return params;
 }
-//#endregion
-//#region src/plugins/router/builders/match.ts
+/** Regex metacharacters escaped when a static path segment is inlined into a compiled pattern. */
+const REGEX_METACHARS = /[.*+?^${}()|[\]\\]/g;
+/** Matches a `:name` or `:name(regex)` URLPattern group occupying one whole segment. */
+const NAMED_GROUP = /^:([A-Za-z_]\w*)(?:\((.+)\))?$/;
+/**
+* Escape a static path segment so its literal text matches verbatim inside the
+* compiled `RegExp` (a segment like `c++` must not be read as regex syntax).
+*
+* @param text - The static segment text.
+* @returns The regex-escaped segment.
+* @example
+* ```ts
+* escapeStaticSegment("about"); // "about"
+* ```
+*/
+function escapeStaticSegment(text) {
+	return text.replaceAll(REGEX_METACHARS, String.raw`\$&`);
+}
 /**
-* @file router plugin — runtime matching domain.
+* Compile one URLPattern source segment (no surrounding slash) into a regex fragment
+* that captures a single path segment: `:name` → a named `[^/]+` group, `:name(re)` →
+* a named group constrained by `re`, and static text → its escaped literal.
 *
-* Pure functions that turn compiled patterns into a pathname matcher: build the
-* lang-aware/bare `URLPattern` pair, the `matchFn` (withLang first, bare fallback
-* injecting `defaultLocale`), and extract/strip params. No `ctx` here.
+* @param segment - One source segment, e.g. `:slug`, `:lang(en|uk)`, or `archive`.
+* @returns The regex fragment for that segment.
+* @example
+* ```ts
+* segmentToRegex(":lang(en|uk)"); // "(?<lang>en|uk)"
+* ```
 */
+function segmentToRegex(segment) {
+	const named = NAMED_GROUP.exec(segment);
+	if (named) {
+		const [, name, constraint] = named;
+		return `(?<${name}>${constraint ?? "[^/]+"})`;
+	}
+	return escapeStaticSegment(segment);
+}
 /**
-* Build a pathname matcher for a single route: tries the `withLang` URLPattern,
-* then the `bare` pattern injecting `defaultLocale` on miss.
+* Compile a URLPattern pathname source string into a {@link PathMatcher} backed by a
+* native `RegExp` — a drop-in replacement for `new URLPattern({ pathname })` over the
+* subset the router emits: `:name`, `:name(regex)`, the optional `:name?` segment
+* (whose leading `/` is absorbed, so `/:lang?` matches `/en` or nothing), static
+* segments, and a required trailing slash. Anchored full-match, like `URLPattern`.
 *
-* @param matchers - The pre-built `withLang` and `bare` URLPattern pair.
-* @param matchers.withLang - The locale-aware URLPattern variant.
-* @param matchers.bare - The bare URLPattern variant (no leading locale segment).
+* @param source - The URLPattern pathname source, e.g. `/:lang?/:slug/`.
+* @returns A matcher whose `.exec({ pathname })` yields named groups or `null`.
+* @example
+* ```ts
+* const m = createPathMatcher("/:lang?/:slug/");
+* m.exec({ pathname: "/en/hello/" }); // { pathname: { groups: { lang: "en", slug: "hello" } } }
+* ```
+*/
+function createPathMatcher(source) {
+	const segments = source.split("/");
+	let pattern = "^";
+	for (let index = 1; index < segments.length; index += 1) {
+		const segment = segments[index] ?? "";
+		if (segment === "") {
+			pattern += "/";
+			continue;
+		}
+		const optional = segment.endsWith("?");
+		const fragment = segmentToRegex(optional ? segment.slice(0, -1) : segment);
+		pattern += optional ? `(?:/${fragment})?` : `/${fragment}`;
+	}
+	pattern += "$";
+	const regexp = new RegExp(pattern);
+	return { 
+	/**
+	* Run the compiled regex over a pathname (the {@link PathMatcher.exec} contract).
+	*
+	* @param input - The match input carrying the `pathname` to test.
+	* @param input.pathname - The URL pathname to match, e.g. `/en/hello/`.
+	* @returns A `{ pathname: { groups } }` result on a match, or `null` on no match.
+	* @example
+	* ```ts
+	* matcher.exec({ pathname: "/en/hello/" });
+	* ```
+	*/
+exec(input) {
+		const result = regexp.exec(input.pathname);
+		if (!result) return null;
+		return { pathname: { groups: result.groups ?? {} } };
+	} };
+}
+//#endregion
+//#region src/plugins/router/builders/match.ts
+/**
+* Build a pathname matcher for a single route: tries the `withLang` matcher,
+* then the `bare` matcher injecting `defaultLocale` on miss.
+*
+* @param matchers - The pre-built `withLang` and `bare` matcher pair.
+* @param matchers.withLang - The locale-aware matcher variant.
+* @param matchers.bare - The bare matcher variant (no leading locale segment).
 * @param defaultLocale - Locale injected when the bare fallback matches.
 * @returns A function resolving a pathname into params, or `null` on no match.
 * @example
@@ -1935,14 +2014,6 @@ function matchRoute(compiled, pathname) {
 }
 //#endregion
 //#region src/plugins/router/builders/compile.ts
-/**
-* @file router plugin — compilation + validation domain.
-*
-* Pure functions invoked from `onInit`: validate the route map, then compile each
-* route into URLPattern matchers + URL/file builders, count dynamic segments,
-* sort by specificity, and assemble the immutable `MatcherTable`. Receives DATA
-* only (`CompileInput`) — never the plugin ctx.
-*/
 /** Shared `[web]` error prefix for router validation failures. */
 const ERROR_PREFIX$11 = "[web] router";
 /** Maximum number of optional `{lang:?}` segments a single pattern may declare. */
@@ -2114,8 +2185,8 @@ function buildFilePath(pattern, params) {
 function buildMatchers(pattern, locales) {
 	const langRegex = `(${locales.join("|")})`;
 	return {
-		withLang: new URLPattern({ pathname: patternToUrlPattern(pattern, "withLang", langRegex) }),
-		bare: new URLPattern({ pathname: patternToUrlPattern(pattern, "bare", langRegex) })
+		withLang: createPathMatcher(patternToUrlPattern(pattern, "withLang", langRegex)),
+		bare: createPathMatcher(patternToUrlPattern(pattern, "bare", langRegex))
 	};
 }
 /**
@@ -3829,7 +3900,7 @@ const DEFAULT_BODY = "<h1>404</h1><p>The page you requested could not be found.<
 * ```
 */
 function wrap(body) {
-	return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>404 — Not Found</title></head><body>${body}</body></html>`;
+	return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>404 — Not Found</title></head><body>${body}</body></html>`;
 }
 /**
 * Emits `outDir/404.html`. When `config.notFound` is `true`, writes the built-in
@@ -4513,6 +4584,8 @@ const HEAD_PLACEHOLDER = "<!--moku:head-->";
 const BODY_PLACEHOLDER = "<!--moku:body-->";
 /** Template placeholder for the injected asset `<link>`/`<script>` tags. */
 const ASSETS_PLACEHOLDER = "<!--moku:assets-->";
+/** Template placeholder for the page's locale (`<html lang>`). */
+const LANG_PLACEHOLDER = "<!--moku:lang-->";
 /**
 * Read the bundle phase's hashed asset manifest for one kind from `state.buildCache`
 * as a typed {@link BuildCacheEntry} (no `Map<string, unknown>` reads).
@@ -4560,14 +4633,16 @@ function buildAssetTags(ctx) {
 * ```
 */
 function renderDocument(parts) {
-	return `<!DOCTYPE html><html lang="${parts.locale}"><head>${parts.head}${parts.assets}</head><body>${parts.body}</body></html>`;
+	return `<!DOCTYPE html><html lang="${parts.locale}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">${parts.head}${parts.assets}</head><body>${parts.body}</body></html>`;
 }
 /**
-* Fill a shell template's `<!--moku:head-->` / `<!--moku:body-->` /
-* `<!--moku:assets-->` placeholders deterministically at build time.
+* Fill a shell template's `<!--moku:lang-->` / `<!--moku:head-->` /
+* `<!--moku:body-->` / `<!--moku:assets-->` placeholders deterministically at build
+* time. `<!--moku:lang-->` carries the page locale (for `<html lang>`), so a single
+* shared template stays locale-correct across every locale.
 *
 * @param template - The raw shell template HTML.
-* @param parts - The composed head/body/assets pieces.
+* @param parts - The composed head/body/assets/locale pieces.
 * @returns The filled document string.
 * @example
 * ```ts
@@ -4575,7 +4650,7 @@ function renderDocument(parts) {
 * ```
 */
 function fillTemplate(template, parts) {
-	return template.replaceAll(HEAD_PLACEHOLDER, parts.head).replaceAll(BODY_PLACEHOLDER, parts.body).replaceAll(ASSETS_PLACEHOLDER, parts.assets);
+	return template.replaceAll(LANG_PLACEHOLDER, parts.locale).replaceAll(HEAD_PLACEHOLDER, parts.head).replaceAll(BODY_PLACEHOLDER, parts.body).replaceAll(ASSETS_PLACEHOLDER, parts.assets);
 }
 /**
 * Resolve the compiled entry for a manifest definition, asserting the router
@@ -5827,7 +5902,8 @@ function buildWranglerArgs(input) {
 		"--project-name",
 		input.slug,
 		"--branch",
-		branch
+		branch,
+		"--commit-dirty=true"
 	];
 }
 /**
@@ -6436,17 +6512,18 @@ function validateConfig$1(ctx) {
 	ctx.require(sitePlugin);
 }
 /**
-* Run wrangler for the prepared argv and surface its scrubbed result, translating
-* a non-zero exit into the classified deploy error. The API token is read from env
-* here so it never crosses a logging boundary; only scrubbed output is returned.
-* Shared by `run()` (deploy) and `createProject()` (project create).
+* Run wrangler for the prepared argv and return its stdout, translating a non-zero
+* exit into the classified deploy error. The API token is read from env here so it
+* never crosses a logging boundary; the scrubbed stderr is used only to classify a
+* failure — it is never logged (that was console noise), so nothing leaks. Shared by
+* `run()` (deploy) and `createProject()` (project create).
 *
 * @param ctx - Plugin context (provides `state.spawn`, `config`, `env`).
 * @param args - The fully-built, pre-validated wrangler argv.
-* @returns The wrangler `stdout` plus the scrubbed `stderr` to log on success.
+* @returns The wrangler `stdout` (for URL/id parsing on a deploy).
 * @throws {Error} With a `code` from the deploy error taxonomy on a non-zero exit.
 * @example
-* const { stdout, scrubbedStderr } = await executeWrangler(ctx, args);
+* const stdout = await executeWrangler(ctx, args);
 */
 async function executeWrangler(ctx, args) {
 	const token = ctx.env.require("CLOUDFLARE_API_TOKEN");
@@ -6460,10 +6537,7 @@ async function executeWrangler(ctx, args) {
 		const { code, message } = classifyWranglerError(exitCode, scrubbedStderr);
 		throw deployError(code, message);
 	}
-	return {
-		stdout,
-		scrubbedStderr
-	};
+	return stdout;
 }
 /**
 * Assemble the public {@link DeployResult} from wrangler's stdout, parsing the
@@ -6520,9 +6594,7 @@ function createApi$2(ctx) {
 				root
 			});
 			const start = Date.now();
-			const { stdout, scrubbedStderr } = await executeWrangler(ctx, args);
-			ctx.log.info(scrubbedStderr);
-			const result = buildDeployResult(stdout, branch, start);
+			const result = buildDeployResult(await executeWrangler(ctx, args), branch, start);
 			ctx.state.lastDeployment = result;
 			ctx.emit("deploy:complete", {
 				url: result.url,
@@ -6582,11 +6654,10 @@ function createApi$2(ctx) {
 		async createProject() {
 			const name = toSlug(ctx.require(sitePlugin).name());
 			const branch = ctx.config.productionBranch ?? "main";
-			const { scrubbedStderr } = await executeWrangler(ctx, buildProjectCreateArgs({
+			await executeWrangler(ctx, buildProjectCreateArgs({
 				slug: name,
 				branch
 			}));
-			ctx.log.info(scrubbedStderr);
 			return {
 				name,
 				branch
@@ -8753,16 +8824,24 @@ function createPanelRenderer(options = {}) {
 			write(line);
 		},
 		/**
-		* Render the deploy result from a `deploy:complete` event: a `✓ DEPLOYED → url` line
-		* with the URL the hero value, then a dim `branch · id · time` line beneath it.
+		* Render the deploy result from a `deploy:complete` event as a full-width box (matching
+		* the BUILD panel): a `✓ DEPLOYED · branch` header with the elapsed time right-aligned,
+		* then a `→ url · id` row. The url/id row is omitted entirely when wrangler returned no
+		* URL, so a first-deploy with nothing to parse never renders a dangling `→` or `· ·`.
 		*
 		* @param result - The `deploy:complete` payload.
 		* @example
 		* render.deployed({ url: "https://x.pages.dev", deploymentId: "id", branch: "main", durationMs: 1200 });
 		*/
 		deployed(result) {
-			const meta = palette.dim(`branch ${result.branch} · ${result.deploymentId} · ${result.durationMs}ms`);
-			writeBlock([`  ${palette.green("✓")} ${palette.bold("DEPLOYED")}   ${palette.dim("→")}  ${palette.cyan(result.url)}`, `  ${meta}`]);
+			const dot = palette.dim("·");
+			const time = result.durationMs >= 1e3 ? `${(result.durationMs / 1e3).toFixed(1)}s` : `${result.durationMs}ms`;
+			const lines = [railLine(`${palette.green("✓")} ${palette.bold("DEPLOYED")} ${dot} ${result.branch}`, palette.dim(time), BOX_INNER)];
+			if (result.url) {
+				const id = result.deploymentId ? ` ${dot} ${palette.dim(result.deploymentId)}` : "";
+				lines.push(`${palette.dim("→")} ${palette.cyan(result.url)}${id}`);
+			} else if (result.deploymentId) lines.push(palette.dim(`id ${result.deploymentId}`));
+			writeBlock(box(lines, color, BOX_INNER));
 		},
 		/**
 		* Render a neutral informational line.
@@ -8857,6 +8936,29 @@ function createPanelRenderer(options = {}) {
 */
 /** Matches an explicit affirmative answer (`y`/`yes`, case-insensitive). */
 const YES_PATTERN = /^y(es)?$/i;
+/** Prompt rail width — matches the renderer's `RAIL_WIDTH` so the hint aligns with other rows. */
+const PROMPT_WIDTH = 66;
+/** Whether the interactive prompts render with the MOKU marker styling (color/TTY only). */
+const PROMPT_COLOR = supportsColor();
+/** Shared palette for the interactive prompts (same brand colors as the Panel renderer). */
+const PROMPT_PALETTE = makePalette(PROMPT_COLOR, PROMPT_COLOR && supportsTruecolor());
+/**
+* Build the styled y/N confirm prompt: a brand `◆` marker + the question on the left,
+* a dim `y / N` hint + cyan `›` caret right-aligned to {@link PROMPT_WIDTH}. Falls back
+* to the plain `question [y/N] ` form off a color TTY (CI/pipes), where prompts rarely run.
+*
+* @param question - The yes/no question to display.
+* @returns The readline prompt string (the typed answer follows the caret).
+* @example
+* confirmPrompt("Deploy dist/ to Cloudflare Pages?");
+*/
+function confirmPrompt(question) {
+	if (!PROMPT_COLOR) return `${question} [y/N] `;
+	const left = `  ${PROMPT_PALETTE.pink("◆")} ${question}`;
+	const right = `${PROMPT_PALETTE.dim("y / N")} ${PROMPT_PALETTE.cyan("›")} `;
+	const gap = Math.max(1, PROMPT_WIDTH - visibleWidth(left) - visibleWidth(right));
+	return `${left}${" ".repeat(gap)}${right}`;
+}
 /**
 * Resolve the `Bun` runtime global, or `undefined` when not running under Bun.
 *
@@ -8914,7 +9016,7 @@ function defaultConfirm(question) {
 			input: process.stdin,
 			output: process.stdout
 		});
-		readline.question(`${question} [y/N] `, (answer) => {
+		readline.question(confirmPrompt(question), (answer) => {
 			readline.close();
 			resolve(YES_PATTERN.test(answer.trim()));
 		});
@@ -8937,8 +9039,8 @@ function defaultSelect(question, choices) {
 			input: process.stdin,
 			output: process.stdout
 		});
-		for (const [index, choice] of choices.entries()) console.log(`  ${index + 1}) ${choice}`);
-		readline.question(`${question} [1-${choices.length}] `, (answer) => {
+		console.log(selectChoicesBlock(question, choices));
+		readline.question(selectPrompt(question, choices.length), (answer) => {
 			readline.close();
 			const picked = Number.parseInt(answer.trim(), 10);
 			resolve(Number.isInteger(picked) && picked >= 1 && picked <= choices.length ? picked - 1 : 0);
@@ -8946,6 +9048,36 @@ function defaultSelect(question, choices) {
 	});
 }
 /**
+* Render the select block: a brand `◆` marker + the question, then each choice as an
+* indented dim number + label. Off a color TTY, falls back to the plain `  N) label`
+* list (the question rides the prompt instead).
+*
+* @param question - The prompt shown above the choices (styled mode only).
+* @param choices - The selectable option labels.
+* @returns The multi-line choices block.
+* @example
+* selectChoicesBlock("Set up a workflow?", ["Auto", "Manual", "Skip"]);
+*/
+function selectChoicesBlock(question, choices) {
+	if (!PROMPT_COLOR) return choices.map((choice, index) => `  ${index + 1}) ${choice}`).join("\n");
+	return [`  ${PROMPT_PALETTE.pink("◆")} ${question}`, ...choices.map((choice, index) => `      ${PROMPT_PALETTE.dim(String(index + 1))}  ${choice}`)].join("\n");
+}
+/**
+* Build the select input prompt: a dim `pick 1–N` hint + cyan `›` caret in styled mode,
+* or the plain `question [1-N] ` form off a color TTY (where the question is not printed
+* separately).
+*
+* @param question - The prompt (used only by the plain fallback).
+* @param count - The number of choices.
+* @returns The readline prompt string.
+* @example
+* selectPrompt("Set up a workflow?", 3);
+*/
+function selectPrompt(question, count) {
+	if (!PROMPT_COLOR) return `${question} [1-${count}] `;
+	return `    ${PROMPT_PALETTE.dim(`pick 1–${count}`)} ${PROMPT_PALETTE.cyan("›")} `;
+}
+/**
 * Default recursive directory watcher — wraps `node:fs.watch` with `{ recursive: true }`
 * and adapts its handle to {@link WatchHandle}. Tests inject a fake emitter so no real
 * FS watch is registered.

package/package.json

@@ -113,5 +113,5 @@
     "test:cli-e2e": "bun test src/plugins/cli/__tests__/e2e/",
     "test:coverage": "vitest run --project unit --project integration --coverage"
   },
-  "version": "1.3.1"
+  "version": "1.4.1"
 }