@maiyunnet/kebab 9.14.3 → 9.15.0

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" }))] }))] }) })] }));
 }

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

@@ -59,7 +59,7 @@ interface IProps {
 // ─── 页面内部组件（仅本页演示使用，无需提取到 lib/）────────────────────────────
 
 /** --- 卡片容器 --- */
-function Card({ children, className = '' }: { 'children': ReactNode; 'className'?: string }) {
+function Card({ children, className = '' }: { 'children': ReactNode; 'className'?: string; }) {
     return (
         <div className={`bg-white rounded-xl shadow-sm border border-slate-200 p-6 ${className}`}>
             {children}
@@ -75,7 +75,7 @@ function Badge({ children, variant = 'default' }: {
     const styles = {
         'default': 'bg-blue-100 text-blue-700',
         'success': 'bg-green-100 text-green-700',
-        'warn':    'bg-amber-100 text-amber-700',
+        'warn': 'bg-amber-100 text-amber-700',
     };
     return (
         <span className={`inline-flex px-2.5 py-0.5 rounded-md text-xs font-semibold ${styles[variant]}`}>
@@ -137,13 +137,13 @@ function RouterAbout() {
             <p className="text-slate-500 text-xs mb-3">useNavigate() programmatic navigation (without Link component):</p>
             <div className="flex gap-2">
                 <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"
                 >
                     ← Back to /
                 </button>
                 <button
-                    onClick={() => navigate('/user/99')}
+                    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"
                 >
                     → /user/99
@@ -155,7 +155,7 @@ function RouterAbout() {
 
 /** --- 路由 User 动态参数页 --- */
 function RouterUser() {
-    const { id } = useParams<{ 'id': string }>();
+    const { id } = useParams<{ 'id': string; }>();
     const navigate = useNavigate();
     return (
         <div>
@@ -166,7 +166,7 @@ function RouterUser() {
                 useParams() dynamic segment: <code className="bg-slate-100 px-1 rounded">id = &quot;{id}&quot;</code>
             </p>
             <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"
             >
                 ← Back to /
@@ -195,7 +195,7 @@ function ShadcnDemo() {
     const agreeId = useId();
     const newsletterId = useId();
 
-    function handleSubmit(e: React.FormEvent<HTMLFormElement>): void {
+    function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>): void {
         e.preventDefault();
         setSubmitted(true);
     }
@@ -226,7 +226,7 @@ function ShadcnDemo() {
                             type="text"
                             placeholder="Enter your username"
                             value={name}
-                            onChange={e => setName(e.target.value)}
+                            onChange={e => { setName(e.target.value); }}
                         />
                     </div>
                     <div className="grid gap-1.5">
@@ -236,7 +236,7 @@ function ShadcnDemo() {
                             type="email"
                             placeholder="you@example.com"
                             value={email}
-                            onChange={e => setEmail(e.target.value)}
+                            onChange={e => { setEmail(e.target.value); }}
                         />
                     </div>
                 </div>
@@ -290,7 +290,7 @@ function ShadcnDemo() {
                             2
                         )}</pre>
                         <button
-                            onClick={() => setSubmitted(false)}
+                            onClick={() => { setSubmitted(false); }}
                             className="text-xs text-blue-500 hover:underline cursor-pointer"
                         >Reset</button>
                     </div>
@@ -303,7 +303,7 @@ function ShadcnDemo() {
                                 required
                                 placeholder="At least 2 characters"
                                 value={name}
-                                onChange={e => setName(e.target.value)}
+                                onChange={e => { setName(e.target.value); }}
                             />
                         </div>
                         <div className="grid gap-1.5">
@@ -314,7 +314,7 @@ function ShadcnDemo() {
                                 required
                                 placeholder="you@example.com"
                                 value={email}
-                                onChange={e => setEmail(e.target.value)}
+                                onChange={e => { setEmail(e.target.value); }}
                             />
                         </div>
                         <div className="flex items-center gap-2">
@@ -417,7 +417,7 @@ export default function ReactPage({ title, serverTime, node, _urlBase, _urlStc,
                         {(['overview', 'routing', 'fetch', 'shadcn'] as const).map(t => (
                             <button
                                 key={t}
-                                onClick={() => setTab(t)}
+                                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',
@@ -441,12 +441,12 @@ export default function ReactPage({ title, serverTime, node, _urlBase, _urlStc,
                                 </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 border border-slate-300 hover:bg-slate-50 font-bold text-slate-700 text-xl cursor-pointer"
                                     >−</button>
                                     <span className="text-3xl font-bold text-slate-900 w-10 text-center tabular-nums">{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>
@@ -459,7 +459,8 @@ export default function ReactPage({ title, serverTime, node, _urlBase, _urlStc,
                                     Passed via{' '}
                                     <code className="bg-slate-100 px-1 rounded">_loadReactPage(path, props)</code>.
                                     The framework auto-injects constants like _urlBase and serializes
-                                    all props as inline JSON, reused directly during client hydration — no extra request needed.
+                                    all props as inline JSON, reused directly during client hydration —
+                                    no extra request needed.
                                 </p>
                                 <div className="space-y-2">
                                     {([
@@ -491,8 +492,10 @@ export default function ReactPage({ title, serverTime, node, _urlBase, _urlStc,
     react-page.tsx      # Page component (import + compose)`}
                                 </pre>
                                 <p className="text-slate-500 text-xs mt-3">
-                                    Mirrors the shadcn/ui <code className="bg-slate-100 px-1 rounded">components/ui/</code> convention.
-                                    In dev mode, the framework auto-scans imports — no manual import map configuration needed.
+                                    Mirrors the shadcn/ui{' '}
+                                    <code className="bg-slate-100 px-1 rounded">components/ui/</code> convention.
+                                    In dev mode, the framework auto-scans imports —
+                                    no manual import map configuration needed.
                                 </p>
                             </Card>
 
@@ -527,7 +530,8 @@ export default function ReactPage({ title, serverTime, node, _urlBase, _urlStc,
                                 <h2 className="font-semibold text-slate-900 mb-2">Full-Page BrowserRouter Setup</h2>
                                 <p className="text-slate-500 text-xs mb-3">
                                     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:
+                                    replace MemoryRouter with BrowserRouter and route all sub-paths
+                                    to the same Ctr method on the server:
                                 </p>
                                 <pre className="bg-slate-50 border border-slate-200 rounded-lg p-4 text-xs overflow-auto leading-relaxed text-slate-700">{`// 1. route.json: 将所有子路径路由到同一 Ctr 方法
 {
@@ -561,18 +565,19 @@ await this._loadReactPage('view/my', { ...props }, {
                         <Card>
                             <h2 className="font-semibold text-slate-900 mb-3">Client Fetch Demo</h2>
                             <p className="text-slate-500 text-xs mb-4">
-                                After hydration, click a button to send a GET request. setState triggers a partial re-render — no page refresh.
+                                After hydration, click a button to send a GET request.
+                                setState triggers a partial re-render — no page refresh.
                             </p>
                             <div className="flex gap-3 flex-wrap">
                                 <Btn
-                                    onClick={() => doFetch(`${_urlBase}test/json?type=4`)}
+                                    onClick={() => { doFetch(`${_urlBase}test/json?type=4`); }}
                                     disabled={isFetching}
                                 >
                                     {isFetching ? 'Fetching...' : 'GET /test/json?type=4'}
                                 </Btn>
                                 <Btn
                                     outline
-                                    onClick={() => doFetch(`${_urlBase}test/json?type=2`)}
+                                    onClick={() => { doFetch(`${_urlBase}test/json?type=2`); }}
                                     disabled={isFetching}
                                 >
                                     GET type=2 (error resp)