@maiyunnet/kebab 9.14.2 → 9.15.0

package/sys/route.js

@@ -41,6 +41,20 @@ function respond500(res) {
         res.end(content);
     }
 }
+/**
+ * --- 安全写入外部输入键，避免 __proto__ 等特殊键改变对象原型 ---
+ * @param target 目标对象
+ * @param key 键
+ * @param value 值
+ */
+function setInputValue(target, key, value) {
+    Object.defineProperty(target, key, {
+        'configurable': true,
+        'enumerable': true,
+        'value': value,
+        'writable': true,
+    });
+}
 /**
  * --- 输出 404 错误响应 ---
  * @param res 响应对象
@@ -58,7 +72,7 @@ function respond404(res, config, path) {
         }
         return;
     }
-    const content = '[Error] Controller not found, path: ' + path + '.';
+    const content = '[Error] Controller not found, path: ' + lText.htmlescape(path) + '.';
     if (!res.headersSent) {
         res.setHeader('content-type', 'text/html; charset=utf-8');
         res.setHeader('content-length', Buffer.byteLength(content));
@@ -245,17 +259,17 @@ export async function run(data) {
             const key = cookie.slice(0, eqIndex).trim();
             const rawVal = cookie.slice(eqIndex + 1);
             try {
-                cookies[key] = decodeURIComponent(rawVal);
+                setInputValue(cookies, key, decodeURIComponent(rawVal));
             }
             catch {
-                cookies[key] = rawVal;
+                setInputValue(cookies, key, rawVal);
             }
         }
     }
     // --- 处理 headers ---
     const headers = {};
     for (const key in data.req.headers) {
-        headers[key.toLowerCase()] = data.req.headers[key];
+        setInputValue(headers, key.toLowerCase(), data.req.headers[key]);
     }
     headers['authorization'] ??= '';
     /** --- 开发者返回值 --- */
@@ -922,9 +936,9 @@ export function getFormData(req, events = {}, limits = {}) {
             resolve({ 'post': {}, 'files': {} });
             return;
         }
-        /** --- boundary 位置 --- */
-        const clio = ct.lastIndexOf('boundary=');
-        if (clio === -1) {
+        /** --- 获取 boundary，兼容带引号及后续参数的标准写法 --- */
+        const boundaryMatch = /(?:^|;)\s*boundary\s*=\s*(?:"([^"]+)"|([^;\s]+))/i.exec(ct);
+        if (!boundaryMatch) {
             resolve({ 'post': {}, 'files': {} });
             return;
         }
@@ -934,7 +948,11 @@ export function getFormData(req, events = {}, limits = {}) {
             'files': {}
         };
         /** --- 获取的 boundary 文本 --- */
-        const boundary = ct.slice(clio + 9);
+        const boundary = boundaryMatch[1] ?? boundaryMatch[2];
+        if (!boundary || (boundary.length > 200) || /[\r\n]/.test(boundary)) {
+            resolve(false);
+            return;
+        }
         // --- 超时护盾：防止网络静默断开时 Promise 永不 resolve ---
         /** --- 超时定时器 --- */
         let timer;
@@ -978,6 +996,10 @@ export function getFormData(req, events = {}, limits = {}) {
         let readEnd = false;
         /** --- 是否有文件被限制拒绝（整体返回 false） --- */
         let rejected = false;
+        /** --- 已接收的请求体字节数 --- */
+        let totalSize = 0;
+        /** --- 已解析的字段与文件数量 --- */
+        let partCount = 0;
         /** --- 清理 rtn.files 中所有已写入的临时文件 --- */
         function cleanupFiles() {
             for (const key in rtn.files) {
@@ -990,6 +1012,16 @@ export function getFormData(req, events = {}, limits = {}) {
                 }
             }
         }
+        /** --- 清理仍在写入、尚未加入 rtn.files 的临时文件 --- */
+        function cleanupActiveFile() {
+            if ((state !== EState.FILE) || !ftmpName) {
+                return;
+            }
+            ftmpStream.destroy();
+            lFs.unlink(kebab.FTMP_CWD + ftmpName).catch(() => { });
+            ftmpName = '';
+            --writeFileLength;
+        }
         // --- 启动超时定时器（在所有变量声明之后，确保回调闭包可引用） ---
         const timeoutMs = limits.timeout ?? 300_000;
         if (timeoutMs > 0) {
@@ -998,9 +1030,7 @@ export function getFormData(req, events = {}, limits = {}) {
                     return;
                 }
                 finished = true;
-                if ((state === EState.FILE) && ftmpName && ftmpStream) {
-                    ftmpStream.destroy();
-                }
+                cleanupActiveFile();
                 lCore.debug('[ROUTE][GETFORMDATA] formdata request timeout');
                 lCore.log({}, '[ROUTE][GETFORMDATA] formdata request timeout after ' + timeoutMs + 'ms', '-error');
                 cleanupFiles();
@@ -1032,6 +1062,16 @@ export function getFormData(req, events = {}, limits = {}) {
         }
         // --- 开始读取 ---
         req.on('data', function (chunk) {
+            if (finished || rejected) {
+                return;
+            }
+            totalSize += chunk.length;
+            if ((limits.maxTotalSize !== undefined) && (limits.maxTotalSize > 0) && (totalSize > limits.maxTotalSize)) {
+                rejected = true;
+                cleanupActiveFile();
+                buffer = Buffer.from('');
+                return;
+            }
             buffer = Buffer.concat([buffer, chunk], buffer.length + chunk.length);
             while (true) {
                 switch (state) {
@@ -1039,9 +1079,19 @@ export function getFormData(req, events = {}, limits = {}) {
                         /** --- 中断符位置 --- */
                         const io = buffer.indexOf('\r\n\r\n');
                         if (io === -1) {
+                            if (buffer.length > (limits.maxHeaderSize ?? 16 * 1024)) {
+                                rejected = true;
+                                buffer = Buffer.from('');
+                            }
                             return;
                         }
                         // --- 头部已经读取完毕 ---
+                        ++partCount;
+                        if (partCount > (limits.maxParts ?? 1000)) {
+                            rejected = true;
+                            buffer = Buffer.from('');
+                            return;
+                        }
                         const head = buffer.subarray(0, io).toString();
                         // --- 除头部外剩下的 buffer ---
                         buffer = buffer.subarray(io + 4);
@@ -1084,8 +1134,20 @@ export function getFormData(req, events = {}, limits = {}) {
                                     date.getUTCDate().toString().padStart(2, '0') +
                                     date.getUTCHours().toString().padStart(2, '0') +
                                     date.getUTCMinutes().toString().padStart(2, '0') + '_' + lCore.random() + '.ftmp';
-                                ftmpStream = lFs.createWriteStream(kebab.FTMP_CWD + ftmpName);
-                                ftmpStream.on('error', () => { });
+                                const activeName = ftmpName;
+                                const activePath = kebab.FTMP_CWD + activeName;
+                                const activeStream = lFs.createWriteStream(activePath);
+                                ftmpStream = activeStream;
+                                activeStream.on('error', (error) => {
+                                    rejected = true;
+                                    lFs.unlink(activePath).catch(() => { });
+                                    if (ftmpStream === activeStream) {
+                                        ftmpName = '';
+                                    }
+                                    --writeFileLength;
+                                    req.resume();
+                                    lCore.log({}, `[ROUTE][GETFORMDATA] temporary file error: ${error.message}`, '-error');
+                                });
                                 ftmpSize = 0;
                             }
                             else {
@@ -1102,13 +1164,14 @@ export function getFormData(req, events = {}, limits = {}) {
                             const maxField = limits.maxFieldSize ?? 1_048_576;
                             if (buffer.length > maxField + boundary.length + 4) {
                                 rejected = true;
+                                buffer = Buffer.from('');
                                 return;
                             }
                             return;
                         }
                         // --- 找到结束标语，写入 POST ---
                         const val = buffer.subarray(0, io).toString();
-                        if (rtn.post[name]) {
+                        if (Object.hasOwn(rtn.post, name)) {
                             if (Array.isArray(rtn.post[name])) {
                                 rtn.post[name].push(val);
                             }
@@ -1117,7 +1180,7 @@ export function getFormData(req, events = {}, limits = {}) {
                             }
                         }
                         else {
-                            rtn.post[name] = val;
+                            setInputValue(rtn.post, name, val);
                         }
                         // --- 重置状态机 ---
                         state = EState.WAIT;
@@ -1138,7 +1201,10 @@ export function getFormData(req, events = {}, limits = {}) {
                                         rejectFile();
                                     }
                                     else {
-                                        ftmpStream.write(writeBuffer);
+                                        if (!ftmpStream.write(writeBuffer)) {
+                                            req.pause();
+                                            ftmpStream.once('drain', () => { req.resume(); });
+                                        }
                                         ftmpSize += Buffer.byteLength(writeBuffer);
                                     }
                                 }
@@ -1188,7 +1254,7 @@ export function getFormData(req, events = {}, limits = {}) {
                                     'size': ftmpSize,
                                     'path': kebab.FTMP_CWD + ftmpName
                                 };
-                                if (rtn.files[name]) {
+                                if (Object.hasOwn(rtn.files, name)) {
                                     if (Array.isArray(rtn.files[name])) {
                                         rtn.files[name].push(val);
                                     }
@@ -1197,7 +1263,7 @@ export function getFormData(req, events = {}, limits = {}) {
                                     }
                                 }
                                 else {
-                                    rtn.files[name] = val;
+                                    setInputValue(rtn.files, name, val);
                                 }
                             }
                         }
@@ -1223,9 +1289,7 @@ export function getFormData(req, events = {}, limits = {}) {
             }
             finished = true;
             clearTimer();
-            if ((state === EState.FILE) && ftmpName) {
-                ftmpStream.destroy();
-            }
+            cleanupActiveFile();
             lCore.debug('[ROUTE][GETFORMDATA] request error before getFormData: ' + e.message);
             lCore.log({}, '[ROUTE][GETFORMDATA] request error before getFormData: ' + (e.stack ?? ''), '-error');
             cleanupFiles();
@@ -1237,12 +1301,10 @@ export function getFormData(req, events = {}, limits = {}) {
                 return;
             }
             // --- 若数据未读完且连接已关闭，视为传输中断（多数是用户主动取消，无需记录错误） ---
-            if (!readEnd && writeFileLength > 0) {
+            if (!readEnd) {
                 finished = true;
                 clearTimer();
-                if ((state === EState.FILE) && ftmpName && ftmpStream) {
-                    ftmpStream.destroy();
-                }
+                cleanupActiveFile();
                 lCore.debug('[ROUTE][GETFORMDATA] connection closed before formdata complete');
                 cleanupFiles();
                 resolve(false);

package/www/example/ctr/test.js

@@ -2386,7 +2386,7 @@ result: <pre>${lText.htmlescape(JSON.stringify(json2, null, 4))}</pre>`);
             }];
     }
     /** --- 测试 ProxyAgent --- */
-    _undiciProxyAgent = lUndici.getProxyAgent('http://192.168.0.10:20809');
+    _undiciProxyAgent = lUndici.getProxyAgent('http://192.168.31.10:20809');
     async undiciProxy() {
         const echo = [];
         const res = await lUndici.get('https://www.google.com/', { 'reuse': this._undiciProxyAgent });
@@ -3685,7 +3685,8 @@ rtn.push(reader.readBCDString());</pre>${JSON.stringify(rtn)}`);
 });</pre>`);
                 if (imgResult && imgResult.list?.length) {
                     for (const img of imgResult.list) {
-                        echo.push(`<div><img src="${img.url.startsWith('http') ? img.url : 'data:image/png;base64,' + img.url}" style="max-width: 512px;" /></div>${lText.htmlescape(img.text)}`);
+                        const url = img.url.startsWith('http') ? img.url : 'data:image/png;base64,' + img.url;
+                        echo.push(`<div><img src="${lText.htmlescape(url)}" style="max-width: 512px;" /></div>${lText.htmlescape(img.text)}`);
                     }
                     echo.push('<br>request: ' + imgResult.request, ', seed: ' + imgResult.seed);
                 }
@@ -3736,7 +3737,8 @@ rtn.push(reader.readBCDString());</pre>${JSON.stringify(rtn)}`);
     <img src="https://img.alicdn.com/imgextra/i3/O1CN01SfG4J41UYn9WNt4X1_!!6000000002530-49-tps-1696-960.webp" style="max-width: 256px;" />
 </div>`);
                     for (const img of imgResult.list) {
-                        echo.push(`<div><img src="${img.url.startsWith('http') ? img.url : 'data:image/png;base64,' + img.url}" style="max-width: 512px;" /></div>${lText.htmlescape(img.text || prompt)}`);
+                        const url = img.url.startsWith('http') ? img.url : 'data:image/png;base64,' + img.url;
+                        echo.push(`<div><img src="${lText.htmlescape(url)}" style="max-width: 512px;" /></div>${lText.htmlescape(img.text || prompt)}`);
                     }
                     echo.push('<br>request: ' + imgResult.request, ', seed: ' + imgResult.seed);
                 }

package/www/example/stc/view/hello.page.js

@@ -11,5 +11,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 export default function HelloPage({ _urlStc, _staticVer, greeting }) {
     const [count, setCount] = useState(0);
-    return (_jsxs("html", { lang: "zh-CN", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: "Hello - Kebab" }), _jsx("link", { href: `${_urlStc}view/hello.page.css?v=${_staticVer}`, rel: "stylesheet" })] }), _jsx("body", { children: _jsxs("div", { className: "p-8", children: [_jsx("h1", { className: "text-2xl font-bold mb-4", children: greeting }), _jsx("p", { className: "text-slate-500 mb-4", children: "\u70B9\u51FB\u6309\u94AE\u6D4B\u8BD5\u5BA2\u6237\u7AEF\u6C34\u5408\u662F\u5426\u6B63\u5E38\u5DE5\u4F5C\uFF1A" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { onClick: () => setCount(c => c - 1), className: "w-10 h-10 rounded-lg bg-slate-200 hover:bg-slate-300 font-bold text-xl cursor-pointer", children: "-" }), _jsx("span", { className: "w-10 text-center tabular-nums text-lg", children: count }), _jsx("button", { onClick: () => setCount(c => c + 1), className: "w-10 h-10 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-bold text-xl cursor-pointer", children: "+" })] })] }) })] }));
+    return (_jsxs("html", { lang: "zh-CN", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: "Hello - Kebab" }), _jsx("link", { href: `${_urlStc}view/hello.page.css?v=${_staticVer}`, rel: "stylesheet" })] }), _jsx("body", { children: _jsxs("div", { className: "p-8", children: [_jsx("h1", { className: "text-2xl font-bold mb-4", children: greeting }), _jsx("p", { className: "text-slate-500 mb-4", children: "\u70B9\u51FB\u6309\u94AE\u6D4B\u8BD5\u5BA2\u6237\u7AEF\u6C34\u5408\u662F\u5426\u6B63\u5E38\u5DE5\u4F5C\uFF1A" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { onClick: () => { setCount(c => c - 1); }, className: "w-10 h-10 rounded-lg bg-slate-200 hover:bg-slate-300 font-bold text-xl cursor-pointer", children: "-" }), _jsx("span", { className: "w-10 text-center tabular-nums text-lg", children: count }), _jsx("button", { onClick: () => { setCount(c => c + 1); }, className: "w-10 h-10 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-bold text-xl cursor-pointer", children: "+" })] })] }) })] }));
 }

package/www/example/stc/view/hello.page.tsx

@@ -33,12 +33,12 @@ export default function HelloPage({ _urlStc, _staticVer, greeting }: IProps): Re
                     <p className="text-slate-500 mb-4">点击按钮测试客户端水合是否正常工作：</p>
                     <div className="flex items-center gap-4">
                         <button
-                            onClick={() => setCount(c => c - 1)}
+                            onClick={() => { setCount(c => c - 1); }}
                             className="w-10 h-10 rounded-lg bg-slate-200 hover:bg-slate-300 font-bold text-xl cursor-pointer"
                         >-</button>
                         <span className="w-10 text-center tabular-nums text-lg">{count}</span>
                         <button
-                            onClick={() => setCount(c => c + 1)}
+                            onClick={() => { setCount(c => c + 1); }}
                             className="w-10 h-10 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-bold text-xl cursor-pointer"
                         >+</button>
                     </div>

package/www/example/stc/view/react-router.page.js

@@ -65,7 +65,7 @@ function PageHome({ serverTime, node }) {
 function PageAbout() {
     const navigate = useNavigate();
     const location = useLocation();
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-slate-600 text-sm", children: ["About page: demonstrates ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "useNavigate()" }), " programmatic navigation."] }), _jsxs("div", { className: "bg-slate-50 rounded-lg p-3 text-sm", children: [_jsx("div", { className: "text-slate-500 text-xs mb-1", children: "Current pathname" }), _jsx("div", { className: "font-mono text-slate-800", children: location.pathname })] }), _jsxs("div", { className: "flex gap-2 flex-wrap", children: [_jsx("button", { onClick: () => navigate('/'), className: "inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-medium cursor-pointer transition-colors", children: "Back to Home" }), _jsx("button", { onClick: () => navigate('/user/42'), className: "inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium cursor-pointer transition-colors", children: "Go to User #42" })] })] }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-slate-600 text-sm", children: ["About page: demonstrates ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "useNavigate()" }), " programmatic navigation."] }), _jsxs("div", { className: "bg-slate-50 rounded-lg p-3 text-sm", children: [_jsx("div", { className: "text-slate-500 text-xs mb-1", children: "Current pathname" }), _jsx("div", { className: "font-mono text-slate-800", children: location.pathname })] }), _jsxs("div", { className: "flex gap-2 flex-wrap", children: [_jsx("button", { onClick: () => { Promise.resolve(navigate('/')).catch(() => { }); }, className: "inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-medium cursor-pointer transition-colors", children: "Back to Home" }), _jsx("button", { onClick: () => { Promise.resolve(navigate('/user/42')).catch(() => { }); }, className: "inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium cursor-pointer transition-colors", children: "Go to User #42" })] })] }));
 }
 /** --- 用户列表页 --- */
 function PageUsers({ users: initialUsers, urlBase }) {
@@ -86,7 +86,7 @@ function PageUsers({ users: initialUsers, urlBase }) {
             }
             setLoading(false);
         })
-            .catch(() => setLoading(false));
+            .catch(() => { setLoading(false); });
     }, []);
     return (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-slate-600 text-sm", children: "User list \u2014 click to view details (with nested /profile route)." }), _jsxs("div", { className: "bg-slate-50 rounded-lg p-3 text-sm", children: [_jsx("div", { className: "text-slate-500 text-xs mb-1", children: "Current pathname" }), _jsx("div", { className: "font-mono text-slate-800", children: location.pathname })] }), loading && _jsx("p", { className: "text-slate-400 text-sm", children: "Loading..." }), users && (_jsx("ul", { className: "space-y-2", children: users.map(u => (_jsx("li", { className: "flex items-center gap-3", children: _jsxs(Link, { to: `/user/${u.id}`, className: "inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-200 hover:bg-slate-50 text-slate-700 text-xs font-medium transition-colors", children: [u.name, " (id=", u.id, ") \u2014 /user/", u.id] }) }, u.id))) }))] }));
 }
@@ -114,9 +114,9 @@ function PageUserDetail({ user: initialUser, urlBase }) {
             }
             setLoading(false);
         })
-            .catch(() => setLoading(false));
+            .catch(() => { setLoading(false); });
     }, [id]);
-    return (_jsxs("div", { className: "space-y-4", children: [loading && _jsx("p", { className: "text-slate-400 text-sm", children: "Loading..." }), user && (_jsxs("p", { className: "text-slate-700 text-sm font-medium", children: ["User Detail: ", _jsx("code", { className: "bg-slate-100 px-1.5 rounded font-mono", children: user.name }), "\u00A0", _jsxs("span", { className: "text-slate-400 text-xs", children: ["(id=\"", id, "\", email=", user.email, ")"] })] })), _jsxs("div", { className: "bg-slate-50 rounded-lg p-3 text-sm", children: [_jsx("div", { className: "text-slate-500 text-xs mb-1", children: "Current pathname" }), _jsx("div", { className: "font-mono text-slate-800", children: location.pathname })] }), _jsxs("div", { className: "border border-dashed border-slate-300 rounded-lg p-4", children: [_jsxs("p", { className: "text-slate-500 text-xs mb-3", children: ["Nested route ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "/user/:id/profile" }), " (rendered via Outlet):"] }), _jsx(Outlet, {}), location.pathname === `/user/${id}` && (_jsx(Link, { to: `/user/${id}/profile`, className: "inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium transition-colors", children: "View Profile" }))] }), _jsx("button", { onClick: () => navigate('/user'), className: "inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-medium cursor-pointer transition-colors", children: "Back to Users" })] }));
+    return (_jsxs("div", { className: "space-y-4", children: [loading && _jsx("p", { className: "text-slate-400 text-sm", children: "Loading..." }), user && (_jsxs("p", { className: "text-slate-700 text-sm font-medium", children: ["User Detail: ", _jsx("code", { className: "bg-slate-100 px-1.5 rounded font-mono", children: user.name }), "\u00A0", _jsxs("span", { className: "text-slate-400 text-xs", children: ["(id=\"", id, "\", email=", user.email, ")"] })] })), _jsxs("div", { className: "bg-slate-50 rounded-lg p-3 text-sm", children: [_jsx("div", { className: "text-slate-500 text-xs mb-1", children: "Current pathname" }), _jsx("div", { className: "font-mono text-slate-800", children: location.pathname })] }), _jsxs("div", { className: "border border-dashed border-slate-300 rounded-lg p-4", children: [_jsxs("p", { className: "text-slate-500 text-xs mb-3", children: ["Nested route ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "/user/:id/profile" }), " (rendered via Outlet):"] }), _jsx(Outlet, {}), location.pathname === `/user/${id ?? ''}` && (_jsx(Link, { to: `/user/${id ?? ''}/profile`, className: "inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium transition-colors", children: "View Profile" }))] }), _jsx("button", { onClick: () => { Promise.resolve(navigate('/user')).catch(() => { }); }, className: "inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-medium cursor-pointer transition-colors", children: "Back to Users" })] }));
 }
 /** --- 嵌套子路由：用户 Profile --- */
 function PageUserProfile() {

package/www/example/stc/view/react-router.page.tsx

@@ -1,6 +1,6 @@
 /**
  * --- Kebab React BrowserRouter 全页面示例组件 ---
- * 
+ *
  * node ./source/main build -d source/www/example/stc
  *
  * 【特性】
@@ -54,7 +54,7 @@ interface IProps {
 // --- 基础控件 ---
 
 /** --- 卡片容器 --- */
-function Card({ children, className = '' }: { 'children': React.ReactNode; 'className'?: string }) {
+function Card({ children, className = '' }: { 'children': React.ReactNode; 'className'?: string; }) {
     return (
         <div className={`bg-white rounded-xl shadow-sm border border-slate-200 p-6 ${className}`}>
             {children}
@@ -84,7 +84,7 @@ function Badge({ children, variant = 'default' }: {
 /** --- 顶部导航栏，NavLink 自动高亮当前路由 --- */
 function NavBar() {
     /** --- NavLink className 回调：激活时高亮 --- */
-    const cls = ({ isActive }: { 'isActive': boolean }): string =>
+    const cls = ({ isActive }: { 'isActive': boolean; }): string =>
         isActive
             ? 'px-3 py-1.5 rounded-lg bg-blue-500 text-white text-sm font-medium transition-colors'
             : 'px-3 py-1.5 rounded-lg text-slate-600 hover:bg-slate-100 text-sm font-medium transition-colors';
@@ -100,7 +100,7 @@ function NavBar() {
 // --- 路由页面 ---
 
 /** --- 首页 --- */
-function PageHome({ serverTime, node }: { 'serverTime': string; 'node': string }) {
+function PageHome({ serverTime, node }: { 'serverTime': string; 'node': string; }) {
     const location = useLocation();
     const [hydrated, setHydrated] = useState(false);
     useEffect(() => {
@@ -162,13 +162,13 @@ function PageAbout() {
             </div>
             <div className="flex gap-2 flex-wrap">
                 <button
-                    onClick={() => navigate('/')}
+                    onClick={() => { Promise.resolve(navigate('/')).catch(() => {}); }}
                     className="inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-medium cursor-pointer transition-colors"
                 >
                     Back to Home
                 </button>
                 <button
-                    onClick={() => navigate('/user/42')}
+                    onClick={() => { Promise.resolve(navigate('/user/42')).catch(() => {}); }}
                     className="inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium cursor-pointer transition-colors"
                 >
                     Go to User #42
@@ -179,7 +179,7 @@ function PageAbout() {
 }
 
 /** --- 用户列表页 --- */
-function PageUsers({ users: initialUsers, urlBase }: { 'users'?: IUser[]; 'urlBase': string }) {
+function PageUsers({ users: initialUsers, urlBase }: { 'users'?: IUser[]; 'urlBase': string; }) {
     const location = useLocation();
     const [users, setUsers] = useState(initialUsers);
     const [loading, setLoading] = useState(false);
@@ -197,7 +197,7 @@ function PageUsers({ users: initialUsers, urlBase }: { 'users'?: IUser[]; 'urlBa
                 }
                 setLoading(false);
             })
-            .catch(() => setLoading(false));
+            .catch(() => { setLoading(false); });
     }, []);
     return (
         <div className="space-y-4">
@@ -229,8 +229,8 @@ function PageUsers({ users: initialUsers, urlBase }: { 'users'?: IUser[]; 'urlBa
  * --- 用户详情页（含嵌套路由 Outlet） ---
  * 子路由 /profile 通过 <Outlet /> 渲染在此处
  */
-function PageUserDetail({ user: initialUser, urlBase }: { 'user'?: IUser; 'urlBase': string }) {
-    const { id } = useParams<{ 'id': string }>();
+function PageUserDetail({ user: initialUser, urlBase }: { 'user'?: IUser; 'urlBase': string; }) {
+    const { id } = useParams<{ 'id': string; }>();
     const navigate = useNavigate();
     const location = useLocation();
     const [user, setUser] = useState<IUser | undefined>(
@@ -251,7 +251,7 @@ function PageUserDetail({ user: initialUser, urlBase }: { 'user'?: IUser; 'urlBa
                 }
                 setLoading(false);
             })
-            .catch(() => setLoading(false));
+            .catch(() => { setLoading(false); });
     }, [id]);
     return (
         <div className="space-y-4">
@@ -272,9 +272,9 @@ function PageUserDetail({ user: initialUser, urlBase }: { 'user'?: IUser; 'urlBa
                     Nested route <code className="bg-slate-100 px-1 rounded">/user/:id/profile</code> (rendered via Outlet):
                 </p>
                 <Outlet />
-                {location.pathname === `/user/${id}` && (
+                {location.pathname === `/user/${id ?? ''}` && (
                     <Link
-                        to={`/user/${id}/profile`}
+                        to={`/user/${id ?? ''}/profile`}
                         className="inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium transition-colors"
                     >
                         View Profile
@@ -282,7 +282,7 @@ function PageUserDetail({ user: initialUser, urlBase }: { 'user'?: IUser; 'urlBa
                 )}
             </div>
             <button
-                onClick={() => navigate('/user')}
+                onClick={() => { Promise.resolve(navigate('/user')).catch(() => {}); }}
                 className="inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-medium cursor-pointer transition-colors"
             >
                 Back to Users
@@ -293,7 +293,7 @@ function PageUserDetail({ user: initialUser, urlBase }: { 'user'?: IUser; 'urlBa
 
 /** --- 嵌套子路由：用户 Profile --- */
 function PageUserProfile() {
-    const { id } = useParams<{ 'id': string }>();
+    const { id } = useParams<{ 'id': string; }>();
     const location = useLocation();
     return (
         <div className="bg-blue-50 rounded-lg p-3 mb-3 space-y-2 text-sm">
@@ -335,7 +335,6 @@ export default function ReactRouterPage({
             <head>
                 <meta charSet="UTF-8" />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
-                {/* eslint-disable-next-line @typescript-eslint/naming-convention */}
                 <title suppressHydrationWarning>{title}</title>
                 {/* --- import map 由框架自动注入在此标签前，无需手动添加 --- */}
                 {/* --- dev: 需先执行 node ./source/main build -d source/www/example/stc 生成 CSS --- */}

package/www/example/stc/view/react.page.js

@@ -73,13 +73,13 @@ function RouterHome() {
 /** --- 路由 About 页 --- */
 function RouterAbout() {
     const navigate = useNavigate();
-    return (_jsxs("div", { children: [_jsxs("p", { className: "text-slate-700 text-sm font-medium mb-3", children: ["Current route: ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "/about" })] }), _jsx("p", { className: "text-slate-500 text-xs mb-3", children: "useNavigate() programmatic navigation (without Link component):" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => navigate('/'), className: "inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-medium cursor-pointer", children: "\u2190 Back to /" }), _jsx("button", { onClick: () => navigate('/user/99'), className: "inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium cursor-pointer", children: "\u2192 /user/99" })] })] }));
+    return (_jsxs("div", { children: [_jsxs("p", { className: "text-slate-700 text-sm font-medium mb-3", children: ["Current route: ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "/about" })] }), _jsx("p", { className: "text-slate-500 text-xs mb-3", children: "useNavigate() programmatic navigation (without Link component):" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => { Promise.resolve(navigate('/')).catch(() => { }); }, className: "inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-medium cursor-pointer", children: "\u2190 Back to /" }), _jsx("button", { onClick: () => { Promise.resolve(navigate('/user/99')).catch(() => { }); }, className: "inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium cursor-pointer", children: "\u2192 /user/99" })] })] }));
 }
 /** --- 路由 User 动态参数页 --- */
 function RouterUser() {
     const { id } = useParams();
     const navigate = useNavigate();
-    return (_jsxs("div", { children: [_jsxs("p", { className: "text-slate-700 text-sm font-medium mb-1", children: ["Current route: ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "/user/:id" })] }), _jsxs("p", { className: "text-slate-500 text-xs mb-3", children: ["useParams() dynamic segment: ", _jsxs("code", { className: "bg-slate-100 px-1 rounded", children: ["id = \"", id, "\""] })] }), _jsx("button", { onClick: () => navigate('/'), className: "inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-medium cursor-pointer", children: "\u2190 Back to /" })] }));
+    return (_jsxs("div", { children: [_jsxs("p", { className: "text-slate-700 text-sm font-medium mb-1", children: ["Current route: ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "/user/:id" })] }), _jsxs("p", { className: "text-slate-500 text-xs mb-3", children: ["useParams() dynamic segment: ", _jsxs("code", { className: "bg-slate-100 px-1 rounded", children: ["id = \"", id, "\""] })] }), _jsx("button", { onClick: () => { Promise.resolve(navigate('/')).catch(() => { }); }, className: "inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 text-slate-700 text-xs font-medium cursor-pointer", children: "\u2190 Back to /" })] }));
 }
 // ─── shadcn/ui 演示区 ────────────────────────────────────────────────────────
 /**
@@ -102,7 +102,7 @@ function ShadcnDemo() {
         e.preventDefault();
         setSubmitted(true);
     }
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-2", children: "shadcn/ui Components" }), _jsxs("p", { className: "text-slate-500 text-xs leading-relaxed", children: ["All components below are imported from ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "stc/lib/ui/" }), ", following the same ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "components/ui/" }), " structure recommended by shadcn/ui. Built on Radix UI primitives, styled with Tailwind CSS. In dev mode, the framework auto-scans all bare imports and generates the import map automatically."] })] }), _jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-4", children: "Label + Input" }), _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: nameId, children: "Username" }), _jsx(Input, { id: nameId, type: "text", placeholder: "Enter your username", value: name, onChange: e => setName(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: emailId, children: "Email" }), _jsx(Input, { id: emailId, type: "email", placeholder: "you@example.com", value: email, onChange: e => setEmail(e.target.value) })] })] }), _jsx("p", { className: "text-xs text-slate-400 mt-3", children: "Click the Label text to focus the corresponding input (Radix UI a11y semantics)" })] }), _jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-4", children: "Checkbox" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: agreeId, checked: agree, onCheckedChange: setAgree }), _jsx(Label, { htmlFor: agreeId, children: "I have read and agree to the Terms of Service" })] }), _jsxs("p", { className: "text-xs text-slate-400 mt-3", children: ["Value: ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: String(agree) }), "\u00A0(supports ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "true | false | 'indeterminate'" }), " tri-state)"] })] }), _jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-4", children: "Switch" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: newsletterId, checked: newsletter, onCheckedChange: setNewsletter }), _jsx(Label, { htmlFor: newsletterId, children: "Subscribe to product updates" })] }), _jsxs("p", { className: "text-xs text-slate-400 mt-3", children: ["Value: ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: newsletter ? 'true' : 'false' })] })] }), _jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-4", children: "Combined Form (Submit Demo)" }), submitted ? (_jsxs("div", { className: "space-y-2 text-sm", children: [_jsx("p", { className: "text-green-700 font-medium", children: "\u2713 Submitted! Received data:" }), _jsx("pre", { className: "bg-slate-50 border border-slate-200 rounded-lg p-3 text-xs text-slate-700 overflow-auto", children: JSON.stringify({ name, email, agree: Boolean(agree), newsletter }, null, 2) }), _jsx("button", { onClick: () => setSubmitted(false), className: "text-xs text-blue-500 hover:underline cursor-pointer", children: "Reset" })] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsxs(Label, { htmlFor: `${nameId}-form`, children: ["Username ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: `${nameId}-form`, required: true, placeholder: "At least 2 characters", value: name, onChange: e => setName(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsxs(Label, { htmlFor: `${emailId}-form`, children: ["Email ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: `${emailId}-form`, type: "email", required: true, placeholder: "you@example.com", value: email, onChange: e => setEmail(e.target.value) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: `${agreeId}-form`, checked: agree, onCheckedChange: setAgree, required: true }), _jsx(Label, { htmlFor: `${agreeId}-form`, children: "Agree to terms" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `${newsletterId}-form`, checked: newsletter, onCheckedChange: setNewsletter }), _jsx(Label, { htmlFor: `${newsletterId}-form`, children: "Subscribe" })] }), _jsx("button", { type: "submit", className: "inline-flex items-center px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium cursor-pointer", children: "Submit" })] }))] })] }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-2", children: "shadcn/ui Components" }), _jsxs("p", { className: "text-slate-500 text-xs leading-relaxed", children: ["All components below are imported from ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "stc/lib/ui/" }), ", following the same ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "components/ui/" }), " structure recommended by shadcn/ui. Built on Radix UI primitives, styled with Tailwind CSS. In dev mode, the framework auto-scans all bare imports and generates the import map automatically."] })] }), _jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-4", children: "Label + Input" }), _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: nameId, children: "Username" }), _jsx(Input, { id: nameId, type: "text", placeholder: "Enter your username", value: name, onChange: e => { setName(e.target.value); } })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: emailId, children: "Email" }), _jsx(Input, { id: emailId, type: "email", placeholder: "you@example.com", value: email, onChange: e => { setEmail(e.target.value); } })] })] }), _jsx("p", { className: "text-xs text-slate-400 mt-3", children: "Click the Label text to focus the corresponding input (Radix UI a11y semantics)" })] }), _jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-4", children: "Checkbox" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: agreeId, checked: agree, onCheckedChange: setAgree }), _jsx(Label, { htmlFor: agreeId, children: "I have read and agree to the Terms of Service" })] }), _jsxs("p", { className: "text-xs text-slate-400 mt-3", children: ["Value: ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: String(agree) }), "\u00A0(supports ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "true | false | 'indeterminate'" }), " tri-state)"] })] }), _jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-4", children: "Switch" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: newsletterId, checked: newsletter, onCheckedChange: setNewsletter }), _jsx(Label, { htmlFor: newsletterId, children: "Subscribe to product updates" })] }), _jsxs("p", { className: "text-xs text-slate-400 mt-3", children: ["Value: ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: newsletter ? 'true' : 'false' })] })] }), _jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-4", children: "Combined Form (Submit Demo)" }), submitted ? (_jsxs("div", { className: "space-y-2 text-sm", children: [_jsx("p", { className: "text-green-700 font-medium", children: "\u2713 Submitted! Received data:" }), _jsx("pre", { className: "bg-slate-50 border border-slate-200 rounded-lg p-3 text-xs text-slate-700 overflow-auto", children: JSON.stringify({ name, email, agree: Boolean(agree), newsletter }, null, 2) }), _jsx("button", { onClick: () => { setSubmitted(false); }, className: "text-xs text-blue-500 hover:underline cursor-pointer", children: "Reset" })] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsxs(Label, { htmlFor: `${nameId}-form`, children: ["Username ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: `${nameId}-form`, required: true, placeholder: "At least 2 characters", value: name, onChange: e => { setName(e.target.value); } })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsxs(Label, { htmlFor: `${emailId}-form`, children: ["Email ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: `${emailId}-form`, type: "email", required: true, placeholder: "you@example.com", value: email, onChange: e => { setEmail(e.target.value); } })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: `${agreeId}-form`, checked: agree, onCheckedChange: setAgree, required: true }), _jsx(Label, { htmlFor: `${agreeId}-form`, children: "Agree to terms" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `${newsletterId}-form`, checked: newsletter, onCheckedChange: setNewsletter }), _jsx(Label, { htmlFor: `${newsletterId}-form`, children: "Subscribe" })] }), _jsx("button", { type: "submit", className: "inline-flex items-center px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium cursor-pointer", children: "Submit" })] }))] })] }));
 }
 // ─── 页面主组件 ────────────────────────────────────────────────────────────────
 /** --- Kebab React 全页面演示 --- */
@@ -136,10 +136,10 @@ export default function ReactPage({ title, serverTime, node, _urlBase, _urlStc,
             setIsFetching(false);
         });
     }
-    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: title }), _jsx("link", { href: `${_urlStc}view/react.page.css?v=${_staticVer}`, rel: "stylesheet" })] }), _jsx("body", { className: "bg-slate-50 min-h-screen font-sans", children: _jsxs("div", { className: "max-w-3xl mx-auto px-4 py-10 space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex gap-2 mb-2", children: [_jsx(Badge, { children: "SSR \u00B7 Kebab" }), _jsx(Badge, { variant: hydrated ? 'success' : 'warn', children: hydrated ? 'Hydrated ✓' : 'Rendering...' })] }), _jsx("h1", { className: "text-2xl font-bold text-slate-900", children: title }), _jsxs("p", { className: "text-slate-500 text-sm mt-1", children: [serverTime, " \u00B7 ", node] })] }), _jsx("div", { className: "flex gap-1 bg-slate-100 p-1 rounded-lg w-fit", children: ['overview', 'routing', 'fetch', 'shadcn'].map(t => (_jsx("button", { onClick: () => setTab(t), className: [
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: title }), _jsx("link", { href: `${_urlStc}view/react.page.css?v=${_staticVer}`, rel: "stylesheet" })] }), _jsx("body", { className: "bg-slate-50 min-h-screen font-sans", children: _jsxs("div", { className: "max-w-3xl mx-auto px-4 py-10 space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex gap-2 mb-2", children: [_jsx(Badge, { children: "SSR \u00B7 Kebab" }), _jsx(Badge, { variant: hydrated ? 'success' : 'warn', children: hydrated ? 'Hydrated ✓' : 'Rendering...' })] }), _jsx("h1", { className: "text-2xl font-bold text-slate-900", children: title }), _jsxs("p", { className: "text-slate-500 text-sm mt-1", children: [serverTime, " \u00B7 ", node] })] }), _jsx("div", { className: "flex gap-1 bg-slate-100 p-1 rounded-lg w-fit", children: ['overview', 'routing', 'fetch', 'shadcn'].map(t => (_jsx("button", { onClick: () => { setTab(t); }, className: [
                                     'px-4 py-2 rounded-md text-sm font-medium transition-colors cursor-pointer',
                                     tab === t ? 'bg-white shadow text-slate-900' : 'text-slate-500 hover:text-slate-900',
-                                ].join(' '), children: t.charAt(0).toUpperCase() + t.slice(1) }, t))) }), tab === 'overview' && (_jsxs("div", { className: "space-y-4", children: [_jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-1", children: "Counter\uFF08useState + hydration\uFF09" }), _jsx("p", { className: "text-slate-500 text-xs mb-4", children: "SSR renders with initial value 0; props are serialized as inline JSON. After hydration the state becomes interactive \u2014 click the buttons to test:" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { onClick: () => setCount(c => c - 1), className: "w-10 h-10 rounded-lg border border-slate-300 hover:bg-slate-50 font-bold text-slate-700 text-xl cursor-pointer", children: "\u2212" }), _jsx("span", { className: "text-3xl font-bold text-slate-900 w-10 text-center tabular-nums", children: count }), _jsx("button", { onClick: () => setCount(c => c + 1), className: "w-10 h-10 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-bold text-xl cursor-pointer", children: "+" })] })] }), _jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-3", children: "Server Props (from Ctr method)" }), _jsxs("p", { className: "text-slate-500 text-xs mb-3", children: ["Passed via", ' ', _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "_loadReactPage(path, props)" }), ". The framework auto-injects constants like _urlBase and serializes all props as inline JSON, reused directly during client hydration \u2014 no extra request needed."] }), _jsx("div", { className: "space-y-2", children: [
+                                ].join(' '), children: t.charAt(0).toUpperCase() + t.slice(1) }, t))) }), tab === 'overview' && (_jsxs("div", { className: "space-y-4", children: [_jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-1", children: "Counter\uFF08useState + hydration\uFF09" }), _jsx("p", { className: "text-slate-500 text-xs mb-4", children: "SSR renders with initial value 0; props are serialized as inline JSON. After hydration the state becomes interactive \u2014 click the buttons to test:" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { onClick: () => { setCount(c => c - 1); }, className: "w-10 h-10 rounded-lg border border-slate-300 hover:bg-slate-50 font-bold text-slate-700 text-xl cursor-pointer", children: "\u2212" }), _jsx("span", { className: "text-3xl font-bold text-slate-900 w-10 text-center tabular-nums", children: count }), _jsx("button", { onClick: () => { setCount(c => c + 1); }, className: "w-10 h-10 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-bold text-xl cursor-pointer", children: "+" })] })] }), _jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-3", children: "Server Props (from Ctr method)" }), _jsxs("p", { className: "text-slate-500 text-xs mb-3", children: ["Passed via", ' ', _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "_loadReactPage(path, props)" }), ". The framework auto-injects constants like _urlBase and serializes all props as inline JSON, reused directly during client hydration \u2014 no extra request needed."] }), _jsx("div", { className: "space-y-2", children: [
                                                 ['serverTime', serverTime],
                                                 ['node', node],
                                                 ['_urlBase', _urlBase],
@@ -153,7 +153,7 @@ export default function ReactPage({ title, serverTime, node, _urlBase, _urlStc,
       checkbox.tsx      # shadcn Checkbox
       switch.tsx        # shadcn Switch
   view/
-    react-page.tsx      # Page component (import + compose)` }), _jsxs("p", { className: "text-slate-500 text-xs mt-3", children: ["Mirrors the shadcn/ui ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "components/ui/" }), " convention. In dev mode, the framework auto-scans imports \u2014 no manual import map configuration needed."] })] })] })), tab === 'routing' && (_jsxs(MemoryRouter, { children: [_jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-1", children: "React Router Demo" }), _jsxs("p", { className: "text-slate-500 text-xs mb-4", children: ["Uses ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "MemoryRouter" }), ' ', "to demonstrate route navigation, dynamic params (useParams), and programmatic navigation (useNavigate). Works on both server SSR and client hydration with no extra server configuration."] }), _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(RouterHome, {}) }), _jsx(Route, { path: "/about", element: _jsx(RouterAbout, {}) }), _jsx(Route, { path: "/user/:id", element: _jsx(RouterUser, {}) })] })] }), _jsxs(Card, { className: "mt-4", children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-2", children: "Full-Page BrowserRouter Setup" }), _jsx("p", { className: "text-slate-500 text-xs mb-3", children: "To let React Router manage the real URL (e.g. /app, /app/about), replace MemoryRouter with BrowserRouter and route all sub-paths to the same Ctr method on the server:" }), _jsx("pre", { className: "bg-slate-50 border border-slate-200 rounded-lg p-4 text-xs overflow-auto leading-relaxed text-slate-700", children: `// 1. route.json: 将所有子路径路由到同一 Ctr 方法
+    react-page.tsx      # Page component (import + compose)` }), _jsxs("p", { className: "text-slate-500 text-xs mt-3", children: ["Mirrors the shadcn/ui", ' ', _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "components/ui/" }), " convention. In dev mode, the framework auto-scans imports \u2014 no manual import map configuration needed."] })] })] })), tab === 'routing' && (_jsxs(MemoryRouter, { children: [_jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-1", children: "React Router Demo" }), _jsxs("p", { className: "text-slate-500 text-xs mb-4", children: ["Uses ", _jsx("code", { className: "bg-slate-100 px-1 rounded", children: "MemoryRouter" }), ' ', "to demonstrate route navigation, dynamic params (useParams), and programmatic navigation (useNavigate). Works on both server SSR and client hydration with no extra server configuration."] }), _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(RouterHome, {}) }), _jsx(Route, { path: "/about", element: _jsx(RouterAbout, {}) }), _jsx(Route, { path: "/user/:id", element: _jsx(RouterUser, {}) })] })] }), _jsxs(Card, { className: "mt-4", children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-2", children: "Full-Page BrowserRouter Setup" }), _jsx("p", { className: "text-slate-500 text-xs mb-3", children: "To let React Router manage the real URL (e.g. /app, /app/about), replace MemoryRouter with BrowserRouter and route all sub-paths to the same Ctr method on the server:" }), _jsx("pre", { className: "bg-slate-50 border border-slate-200 rounded-lg p-4 text-xs overflow-auto leading-relaxed text-slate-700", children: `// 1. route.json: 将所有子路径路由到同一 Ctr 方法
 {
   "app":   "ctr/app@reactPage",
   "app\\/.*": "ctr/app@reactPage"
@@ -169,5 +169,5 @@ await this._loadReactPage('view/my', { ...props }, {
 <Routes>
   <Route path="/" element={<Home />} />
   <Route path="/user/:id" element={<User />} />
-</Routes>` })] })] })), tab === 'shadcn' && (_jsx(ShadcnDemo, {})), tab === 'fetch' && (_jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-3", children: "Client Fetch Demo" }), _jsx("p", { className: "text-slate-500 text-xs mb-4", children: "After hydration, click a button to send a GET request. setState triggers a partial re-render \u2014 no page refresh." }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(Btn, { onClick: () => doFetch(`${_urlBase}test/json?type=4`), disabled: isFetching, children: isFetching ? 'Fetching...' : 'GET /test/json?type=4' }), _jsx(Btn, { outline: true, onClick: () => doFetch(`${_urlBase}test/json?type=2`), disabled: isFetching, children: "GET type=2 (error resp)" })] }), fetchResult !== null ? (_jsx("pre", { className: "mt-4 bg-slate-50 border border-slate-200 rounded-lg p-4 text-xs overflow-auto leading-relaxed text-slate-700", children: fetchResult })) : (_jsx("p", { className: "mt-3 text-slate-400 text-xs", children: "Click a button above to see the response" }))] }))] }) })] }));
+</Routes>` })] })] })), tab === 'shadcn' && (_jsx(ShadcnDemo, {})), tab === 'fetch' && (_jsxs(Card, { children: [_jsx("h2", { className: "font-semibold text-slate-900 mb-3", children: "Client Fetch Demo" }), _jsx("p", { className: "text-slate-500 text-xs mb-4", children: "After hydration, click a button to send a GET request. setState triggers a partial re-render \u2014 no page refresh." }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(Btn, { onClick: () => { doFetch(`${_urlBase}test/json?type=4`); }, disabled: isFetching, children: isFetching ? 'Fetching...' : 'GET /test/json?type=4' }), _jsx(Btn, { outline: true, onClick: () => { doFetch(`${_urlBase}test/json?type=2`); }, disabled: isFetching, children: "GET type=2 (error resp)" })] }), fetchResult !== null ? (_jsx("pre", { className: "mt-4 bg-slate-50 border border-slate-200 rounded-lg p-4 text-xs overflow-auto leading-relaxed text-slate-700", children: fetchResult })) : (_jsx("p", { className: "mt-3 text-slate-400 text-xs", children: "Click a button above to see the response" }))] }))] }) })] }));
 }