dishui 0.0.83 → 0.0.89

package/dist/contexts/AppContext.js

@@ -1,138 +1,138 @@
 import { MobileSidebarToggleButton as e } from "../components/SidebarToggleButton/index.js";
 import t from "../layouts/Sidebar.js";
 import n from "../layouts/headbar/Headbar.js";
-import r, { createContext as i, useContext as a, useEffect as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Outlet as u, RouterProvider as d } from "@tanstack/react-router";
+import { readStoredJSON as r, safeStorage as i, writeStoredJSON as a } from "../utils/safeStorage.js";
+import { isUser as o, readStoredUser as s, requiresAuthentication as c } from "./authentication.js";
+import l, { createContext as u, useContext as d, useEffect as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Outlet as g, RouterProvider as _ } from "@tanstack/react-router";
 //#region src/contexts/AppContext.tsx
-var f = i(void 0), p = () => {
-	let e = a(f);
+var v = u(void 0), y = () => {
+	let e = d(v);
 	if (!e) throw Error("useAppContext must be used within an AppShell");
 	return e;
-}, m = () => p().auth, h = {}, g = () => {
-	let { title: i, language: a, theme: d, menuItems: f, getMenuItems: m, themes: g, sidebarWidth: _, sidebarCollapsedWidth: v, navbarHeight: y } = p(), [b, x] = s(() => {
-		let e = localStorage.getItem("sidebar-collapsed");
-		return e ? JSON.parse(e) : !1;
-	}), [S, C] = s(_ || 280), w = r.useRef(null), [T, E] = s(() => typeof window < "u" && window.innerWidth < 768), [D, O] = s(null);
-	o(() => {
-		let e = () => E(window.innerWidth < 768);
+}, b = () => y().auth, x = {}, S = () => {
+	let { title: i, language: o, theme: s, menuItems: c, getMenuItems: u, themes: d, sidebarWidth: _, sidebarCollapsedWidth: v, navbarHeight: b } = y(), [S, C] = p(() => r("sidebar-collapsed", (e) => typeof e == "boolean", !1)), [w, T] = p(_ || 280), E = l.useRef(null), [D, O] = p(() => typeof window < "u" && window.innerWidth < 768), [k, A] = p(null);
+	f(() => {
+		let e = () => O(window.innerWidth < 768);
 		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-	}, []), r.useEffect(() => {
-		_ && C(_);
-	}, [_]), r.useEffect(() => {
-		localStorage.setItem("sidebar-collapsed", JSON.stringify(b));
-	}, [b]);
-	let k = D ?? (T || b), A = () => {
-		O(!k);
-	}, j = T ? 16 : 128, M = (e) => {
-		C(e);
-	}, N = y || 64, P = h.layout || "sidebar", F = h.headbarLeft, I = typeof F == "function" ? F(A) : F;
-	return P === "topbar" ? /* @__PURE__ */ l("div", {
+	}, []), l.useEffect(() => {
+		_ && T(_);
+	}, [_]), l.useEffect(() => {
+		a("sidebar-collapsed", S);
+	}, [S]);
+	let j = k ?? (D || S), M = () => {
+		let e = !j;
+		A(e), C(e);
+	}, N = D ? 16 : 128, P = (e) => {
+		T(e);
+	}, F = b || 64, I = x.layout || "sidebar", L = x.headbarLeft, R = typeof L == "function" ? L(M) : L;
+	return I === "topbar" ? /* @__PURE__ */ h("div", {
 		className: "h-screen flex flex-col bg-base-100",
-		"data-theme": d,
-		children: [/* @__PURE__ */ c("div", {
+		"data-theme": s,
+		children: [/* @__PURE__ */ m("div", {
 			style: {
-				height: `${N}px`,
+				height: `${F}px`,
 				flexShrink: 0
 			},
-			children: /* @__PURE__ */ c(n, {
-				left: I,
-				middle: h.headbarMiddle,
-				right: h.headbarRight,
-				height: N
+			children: /* @__PURE__ */ m(n, {
+				left: R,
+				middle: x.headbarMiddle,
+				right: x.headbarRight,
+				height: F
 			})
-		}), /* @__PURE__ */ c("main", {
+		}), /* @__PURE__ */ m("main", {
 			className: "flex-1 overflow-y-auto",
 			style: {
-				paddingLeft: `${j}px`,
-				paddingRight: `${j}px`,
+				paddingLeft: `${N}px`,
+				paddingRight: `${N}px`,
 				paddingTop: "16px",
 				paddingBottom: "16px"
 			},
-			children: /* @__PURE__ */ c(u, {})
+			children: /* @__PURE__ */ m(g, {})
 		})]
-	}) : /* @__PURE__ */ l("div", {
+	}) : /* @__PURE__ */ h("div", {
 		className: "h-screen flex flex-col bg-base-100",
-		"data-theme": d,
-		children: [/* @__PURE__ */ c("div", {
+		"data-theme": s,
+		children: [/* @__PURE__ */ m("div", {
 			style: {
-				height: `${N}px`,
+				height: `${F}px`,
 				flexShrink: 0
 			},
-			children: /* @__PURE__ */ c(n, {
-				left: I,
-				middle: h.headbarMiddle,
-				right: h.headbarRight,
-				height: N
+			children: /* @__PURE__ */ m(n, {
+				left: R,
+				middle: x.headbarMiddle,
+				right: x.headbarRight,
+				height: F
 			})
-		}), /* @__PURE__ */ l("div", {
+		}), /* @__PURE__ */ h("div", {
 			className: "flex flex-1 overflow-hidden",
-			style: { height: `calc(100vh - ${N}px)` },
+			style: { height: `calc(100vh - ${F}px)` },
 			children: [
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ m("div", {
 					className: "flex-shrink-0",
-					ref: w,
+					ref: E,
 					style: {
 						height: "100%",
 						overflow: "visible"
 					},
-					children: /* @__PURE__ */ c(t, {
-						isCollapsed: k,
-						language: a,
-						items: f,
-						getMenuItems: m,
-						onWidthChange: M,
-						onToggle: A,
-						initialWidth: S,
+					children: /* @__PURE__ */ m(t, {
+						isCollapsed: j,
+						language: o,
+						items: c,
+						getMenuItems: u,
+						onWidthChange: P,
+						onToggle: M,
+						initialWidth: w,
 						collapsedWidth: v || 64
 					})
 				}),
-				/* @__PURE__ */ c("main", {
+				/* @__PURE__ */ m("main", {
 					className: "flex-1 overflow-y-auto",
 					style: {
 						height: "100%",
-						paddingLeft: `${j}px`,
-						paddingRight: `${j}px`,
+						paddingLeft: `${N}px`,
+						paddingRight: `${N}px`,
 						paddingTop: "16px",
 						paddingBottom: "16px"
 					},
-					children: /* @__PURE__ */ c(u, {})
+					children: /* @__PURE__ */ m(g, {})
 				}),
-				/* @__PURE__ */ c(e, {
-					isCollapsed: k,
-					onToggle: A
+				/* @__PURE__ */ m(e, {
+					isCollapsed: j,
+					onToggle: M
 				})
 			]
 		})]
 	});
-}, _ = ({ router: e, children: t, title: n = "DiShUI", initialLang: r, initialTheme: i, menuItems: a, getMenuItems: l, themes: u, enableAuth: p = !1, onAuthRequired: m, protectedRoutes: g = [], publicRoutes: _ = ["/login", "/register"], loginUrl: v = "/login", authFailedCallback: y, layout: b = "sidebar", sidebarWidth: x = 280, sidebarCollapsedWidth: S = 64, navbarHeight: C = 64, searchConfig: w, headbarLeft: T, headbarMiddle: E, headbarRight: D }) => {
-	h = {
+}, C = ({ router: e, children: t, title: n = "DiShUI", initialLang: r, initialTheme: u, menuItems: d, getMenuItems: h, themes: g, enableAuth: y = !1, onAuthRequired: b, protectedRoutes: S = [], publicRoutes: C = ["/login", "/register"], loginUrl: w = "/login", authFailedCallback: T, layout: E = "sidebar", sidebarWidth: D = 280, sidebarCollapsedWidth: O = 64, navbarHeight: k = 64, searchConfig: A, headbarLeft: j, headbarMiddle: M, headbarRight: N }) => {
+	x = {
 		title: n,
 		initialLang: r,
-		initialTheme: i,
-		menuItems: a,
-		getMenuItems: l,
-		themes: u,
-		enableAuth: p,
-		onAuthRequired: m,
-		protectedRoutes: g,
-		publicRoutes: _,
-		loginUrl: v,
-		authFailedCallback: y,
-		layout: b,
-		sidebarWidth: x,
-		sidebarCollapsedWidth: S,
-		navbarHeight: C,
-		searchConfig: w,
-		headbarLeft: T,
-		headbarMiddle: E,
-		headbarRight: D
+		initialTheme: u,
+		menuItems: d,
+		getMenuItems: h,
+		themes: g,
+		enableAuth: y,
+		onAuthRequired: b,
+		protectedRoutes: S,
+		publicRoutes: C,
+		loginUrl: w,
+		authFailedCallback: T,
+		layout: E,
+		sidebarWidth: D,
+		sidebarCollapsedWidth: O,
+		navbarHeight: k,
+		searchConfig: A,
+		headbarLeft: j,
+		headbarMiddle: M,
+		headbarRight: N
 	};
-	let [O, k] = s(() => {
-		let e = localStorage.getItem("app-language");
+	let [P, F] = p(() => {
+		let e = i.getItem("app-language");
 		return e === "zh" || e === "en" ? e : r || "zh";
-	}), [A, j] = s(() => {
-		let e = localStorage.getItem("app-theme");
+	}), [I, L] = p(() => {
+		let e = i.getItem("app-theme");
 		return e && [
 			"light",
 			"dark",
@@ -147,74 +147,73 @@ var f = i(void 0), p = () => {
 			"mintgirl",
 			"wuxing",
 			"jukebox"
-		].includes(e) ? e : i || "light";
-	}), [M, N] = s(() => {
-		if (!p) return null;
-		let e = localStorage.getItem("app-user");
-		return e ? JSON.parse(e) : null;
-	});
-	o(() => {
-		localStorage.setItem("app-language", O);
-	}, [O]), o(() => {
-		localStorage.setItem("app-theme", A), document.documentElement.setAttribute("data-theme", A);
-	}, [A]), o(() => {
-		p && (M ? localStorage.setItem("app-user", JSON.stringify(M)) : localStorage.removeItem("app-user"));
-	}, [M, p]);
-	let P = (e) => {
-		N(e);
-	}, F = () => {
-		N(null), localStorage.removeItem("app-user");
-	}, I = (e) => M?.roles.includes(e) || !1, L = (e) => e.some((e) => M?.roles.includes(e)) || !1;
-	o(() => {
-		if (!p || !e) return;
-		let t = e.subscribe("onBeforeLoad", ({ pathChanged: e, toLocation: t }) => {
-			if (!e) return;
-			let n = _.some((e) => t.pathname.startsWith(e));
-			if ((g.length === 0 || g.some((e) => t.pathname.startsWith(e))) && !n && !M) {
-				if (m && m()) return;
-				y ? y(t.pathname, v) : window.location.href = v;
+		].includes(e) ? e : u || "light";
+	}), [R, z] = p(() => y ? s() : null), B = l.useRef(R), V = l.useRef(null);
+	f(() => {
+		i.setItem("app-language", P);
+	}, [P]), f(() => {
+		i.setItem("app-theme", I), typeof document < "u" && document.documentElement.setAttribute("data-theme", I);
+	}, [I]), f(() => {
+		y && (R ? a("app-user", R) : i.removeItem("app-user"));
+	}, [R, y]);
+	let H = (e) => {
+		if (!o(e)) throw TypeError("Invalid user: expected id, name, email and string roles");
+		B.current = e, V.current = null, z(e), y && a("app-user", e);
+	}, U = () => {
+		B.current = null, z(null), i.removeItem("app-user");
+	}, W = (e) => R?.roles.includes(e) || !1, G = (e) => e.some((e) => R?.roles.includes(e)) || !1;
+	f(() => {
+		if (!y || !e) {
+			V.current = null;
+			return;
+		}
+		let t = (e, t = B.current) => {
+			if (t || !c(e, S, C)) {
+				V.current = null;
+				return;
 			}
+			V.current !== e && (V.current = e, !b?.() && (T ? T(e, w) : typeof window < "u" && (window.location.href = w)));
+		}, n = e.subscribe("onBeforeLoad", ({ toLocation: e }) => {
+			t(e.pathname);
 		});
-		return () => {
-			t && t();
-		};
+		return t(e.state.location.pathname, R), n;
 	}, [
-		p,
-		M,
+		y,
+		R,
 		e,
-		g,
-		_,
-		m,
-		v,
-		y
+		S,
+		C,
+		b,
+		w,
+		T
 	]);
-	let R = {
+	let K = {
 		title: n,
-		language: O,
-		theme: A,
-		setLanguage: k,
-		setTheme: j,
+		language: P,
+		theme: I,
+		setLanguage: F,
+		setTheme: L,
 		auth: {
-			user: M,
-			isAuthenticated: !!M,
-			login: P,
-			logout: F,
-			hasRole: I,
-			hasAnyRole: L
+			user: R,
+			isAuthenticated: !!R,
+			login: H,
+			logout: U,
+			hasRole: W,
+			hasAnyRole: G
 		},
-		menuItems: a,
-		getMenuItems: l,
-		themes: u,
-		sidebarWidth: x,
-		sidebarCollapsedWidth: S,
-		navbarHeight: C
+		menuItems: d,
+		getMenuItems: h,
+		themes: g,
+		sidebarWidth: D,
+		sidebarCollapsedWidth: O,
+		navbarHeight: k
 	};
-	return /* @__PURE__ */ c(f.Provider, {
-		value: R,
-		children: e ? t || /* @__PURE__ */ c(d, { router: e }) : t
+	return /* @__PURE__ */ m(v.Provider, {
+		value: K,
+		children: e ? t || /* @__PURE__ */ m(_, { router: e }) : t
 	});
-}, v = _;
+}, w = C;
 //#endregion
-export { g as AppLayoutWrapper, v as AppProvider, _ as AppShell, _ as default, p as useAppContext, m as useAuth };
+export { S as AppLayoutWrapper, w as AppProvider, C as AppShell, C as default, y as useAppContext, b as useAuth };
 
 //# sourceMappingURL=AppContext.js.map

package/dist/contexts/AppContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppContext.js","names":[],"sources":["../../src/contexts/AppContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useEffect } from 'react';\nimport { RouterProvider } from '@tanstack/react-router';\nimport { Router } from '@tanstack/react-router';\nimport Sidebar from '../layouts/Sidebar';\nimport { Headbar } from '../layouts/headbar';\nimport type { SearchConfig } from '../layouts/headbar';\nimport { Outlet } from '@tanstack/react-router';\nimport { MenuItem } from '../types/menu';\nimport { ThemeConfig } from '../utils/themes';\nimport { MobileSidebarToggleButton } from '../components/SidebarToggleButton';\n\n// 主题类型\nexport type ThemeType = 'light' | 'dark' | 'cursor' | 'retro' | 'cyberpunk' | 'matrix' | 'oceanblue' | 'eyecare' | 'ghibli' | 'pinkgirl' | 'mintgirl' | 'wuxing' | 'jukebox';\n\n// 用户类型定义\nexport type User = {\n  id: string;\n  name: string;\n  email: string;\n  roles: string[];\n};\n\n// 认证上下文类型\nexport type AuthContextType = {\n  user: User | null;\n  isAuthenticated: boolean;\n  login: (user: User) => void;\n  logout: () => void;\n  hasRole: (role: string) => boolean;\n  hasAnyRole: (roles: string[]) => boolean;\n};\n\n// 应用上下文类型\nexport type AppContextType = {\n  title?: string;\n  language: 'zh' | 'en';\n  theme: ThemeType;\n  setLanguage: (lang: 'zh' | 'en') => void;\n  setTheme: (theme: ThemeType) => void;\n  auth: AuthContextType;\n  menuItems?: MenuItem[];\n  getMenuItems?: (language: 'zh' | 'en') => MenuItem[];\n  themes?: ThemeConfig[];\n  sidebarWidth?: number;\n  sidebarCollapsedWidth?: number;\n  navbarHeight?: number;\n};\n\nconst AppContext = createContext<AppContextType | undefined>(undefined);\n\nexport const useAppContext = () => {\n  const context = useContext(AppContext);\n  if (!context) {\n    throw new Error('useAppContext must be used within an AppShell');\n  }\n  return context;\n};\n\n// 导出独立的认证 hook\nexport const useAuth = () => {\n  const context = useAppContext();\n  return context.auth;\n};\n\n// AppShell 配置类型\nexport type AppShellConfig = {\n  title?: string;\n  initialLang?: 'zh' | 'en';\n  initialTheme?: ThemeType;\n  menuItems?: MenuItem[];\n  getMenuItems?: (language: 'zh' | 'en') => MenuItem[];\n  themes?: ThemeConfig[];\n  enableAuth?: boolean;\n  onAuthRequired?: () => boolean | void;\n  protectedRoutes?: string[];\n  publicRoutes?: string[];\n  loginUrl?: string;\n  authFailedCallback?: (path: string, loginUrl: string) => void;\n  /** 布局模式: 'sidebar'(默认，顶栏+侧边栏) | 'topbar'(仅顶栏，无侧边栏) */\n  layout?: 'sidebar' | 'topbar';\n  sidebarWidth?: number;\n  sidebarCollapsedWidth?: number;\n  navbarHeight?: number;  // Navbar 高度（像素），默认 64px\n  searchConfig?: SearchConfig;\n  /** Headbar 左侧插槽（传入 ReactNode 或接收 toggleSidebar 的渲染函数） */\n  headbarLeft?: React.ReactNode | ((toggleSidebar: () => void) => React.ReactNode);\n  /** Headbar 中间插槽 */\n  headbarMiddle?: React.ReactNode;\n  /** Headbar 右侧插槽 */\n  headbarRight?: React.ReactNode;\n};\n\n// 全局配置存储\nlet globalConfig: AppShellConfig = {};\nlet globalAuthState: {\n  user: User | null;\n  setUser: React.Dispatch<React.SetStateAction<User | null>>;\n} | null = null;\n\n// 导出的布局包装器组件 - 用于路由\nexport const AppLayoutWrapper: React.FC = () => {\n  const { title, language, theme, menuItems, getMenuItems, themes, sidebarWidth: configSidebarWidth, sidebarCollapsedWidth, navbarHeight: configNavbarHeight } = useAppContext();\n\n  // 从 localStorage 读取侧边栏折叠状态\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {\n    const saved = localStorage.getItem('sidebar-collapsed');\n    return saved ? JSON.parse(saved) : false;\n  });\n\n  const [sidebarWidth, setSidebarWidth] = useState(configSidebarWidth || 280);\n  const sidebarRef = React.useRef<HTMLDivElement>(null);\n\n  // 窄屏（手机）适配：内容留白收窄，侧边栏默认折叠，用户可手动展开\n  const [narrowViewport, setNarrowViewport] = useState(() => typeof window !== 'undefined' && window.innerWidth < 768);\n  // null = 未手动干预，跟随默认规则（窄屏折叠 / 桌面跟随保存的偏好）\n  const [sidebarUserOverride, setSidebarUserOverride] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    const onResize = () => setNarrowViewport(window.innerWidth < 768);\n    window.addEventListener('resize', onResize);\n    return () => window.removeEventListener('resize', onResize);\n  }, []);\n\n  // 当配置的 sidebarWidth 改变时，更新本地 state\n  React.useEffect(() => {\n    if (configSidebarWidth) {\n      setSidebarWidth(configSidebarWidth);\n    }\n  }, [configSidebarWidth]);\n\n  // 保存侧边栏折叠状态到 localStorage\n  React.useEffect(() => {\n    localStorage.setItem('sidebar-collapsed', JSON.stringify(sidebarCollapsed));\n  }, [sidebarCollapsed]);\n\n  const effectiveSidebarCollapsed = sidebarUserOverride ?? (narrowViewport || sidebarCollapsed);\n\n  const toggleSidebar = () => {\n    setSidebarUserOverride(!effectiveSidebarCollapsed);\n  };\n\n  const contentPaddingX = narrowViewport ? 16 : 128;\n\n  const handleSidebarWidthChange = (width: number) => {\n    setSidebarWidth(width);\n  };\n\n  const navbarHeight = configNavbarHeight || 64;  // 默认 64px\n  const layout = globalConfig.layout || 'sidebar';\n\n  // 解析 headbar 插槽：支持 ReactNode 或渲染函数\n  const headbarLeftConfig = globalConfig.headbarLeft;\n  const resolvedLeft = typeof headbarLeftConfig === 'function'\n    ? headbarLeftConfig(toggleSidebar)\n    : headbarLeftConfig;\n\n  // topbar 模式：仅顶部导航，无侧边栏\n  if (layout === 'topbar') {\n    return (\n      <div className=\"h-screen flex flex-col bg-base-100\" data-theme={theme}>\n        <div style={{ height: `${navbarHeight}px`, flexShrink: 0 }}>\n          <Headbar\n            left={resolvedLeft}\n            middle={globalConfig.headbarMiddle}\n            right={globalConfig.headbarRight}\n            height={navbarHeight}\n          />\n        </div>\n        <main className=\"flex-1 overflow-y-auto\" style={{ paddingLeft: `${contentPaddingX}px`, paddingRight: `${contentPaddingX}px`, paddingTop: '16px', paddingBottom: '16px' }}>\n          <Outlet />\n        </main>\n      </div>\n    );\n  }\n\n  // sidebar 模式（默认）：顶栏 + 侧边栏\n  return (\n    <div className=\"h-screen flex flex-col bg-base-100\" data-theme={theme}>\n      {/* 固定高度的 Headbar */}\n      <div style={{ height: `${navbarHeight}px`, flexShrink: 0 }}>\n        <Headbar\n          left={resolvedLeft}\n          middle={globalConfig.headbarMiddle}\n          right={globalConfig.headbarRight}\n          height={navbarHeight}\n        />\n      </div>\n\n      {/* Sidebar 和 Content 区域 - 独立滚动 */}\n      <div className=\"flex flex-1 overflow-hidden\" style={{ height: `calc(100vh - ${navbarHeight}px)` }}>\n        {/* Sidebar - 独立滚动（overflow visible 以允许右边缘 pill 轻微越界） */}\n        <div\n          className=\"flex-shrink-0\"\n          ref={sidebarRef}\n          style={{ height: '100%', overflow: 'visible' }}\n        >\n          <Sidebar\n            isCollapsed={effectiveSidebarCollapsed}\n            language={language}\n            items={menuItems}\n            getMenuItems={getMenuItems}\n            onWidthChange={handleSidebarWidthChange}\n            onToggle={toggleSidebar}\n            initialWidth={sidebarWidth}\n            collapsedWidth={sidebarCollapsedWidth || 64}\n          />\n        </div>\n\n        {/* Content - 独立滚动 */}\n        <main className=\"flex-1 overflow-y-auto\" style={{ height: '100%', paddingLeft: `${contentPaddingX}px`, paddingRight: `${contentPaddingX}px`, paddingTop: '16px', paddingBottom: '16px' }}>\n          <Outlet />\n        </main>\n\n        {/* 侧边栏切换控件：桌面端 pill 已由 Sidebar 内部渲染，此处仅保留移动端按钮 */}\n        <MobileSidebarToggleButton\n          isCollapsed={effectiveSidebarCollapsed}\n          onToggle={toggleSidebar}\n        />\n      </div>\n    </div>\n  );\n};\n\n// AppShell 属性类型\nexport type AppShellProps = {\n  router?: Router<any, any>;\n  children?: React.ReactNode;\n} & AppShellConfig;\n\n// AppShell 主组件\nexport const AppShell: React.FC<AppShellProps> = ({\n  router,\n  children,\n  title = 'DiShUI',\n  initialLang,\n  initialTheme,\n  menuItems,\n  getMenuItems,\n  themes,\n  enableAuth = false,\n  onAuthRequired,\n  protectedRoutes = [],\n  publicRoutes = ['/login', '/register'],\n  loginUrl = '/login',\n  authFailedCallback,\n  layout = 'sidebar',\n  sidebarWidth = 280,\n  sidebarCollapsedWidth = 64,\n  navbarHeight = 64,\n  searchConfig,\n  headbarLeft,\n  headbarMiddle,\n  headbarRight,\n}) => {\n  // 保存全局配置\n  globalConfig = {\n    title,\n    initialLang,\n    initialTheme,\n    menuItems,\n    getMenuItems,\n    themes,\n    enableAuth,\n    onAuthRequired,\n    protectedRoutes,\n    publicRoutes,\n    loginUrl,\n    authFailedCallback,\n    layout,\n    sidebarWidth,\n    sidebarCollapsedWidth,\n    navbarHeight,\n    searchConfig,\n    headbarLeft,\n    headbarMiddle,\n    headbarRight,\n  };\n\n  // 语言状态管理\n  const [language, setLanguage] = useState<'zh' | 'en'>(() => {\n    const savedLanguage = localStorage.getItem('app-language');\n    if (savedLanguage === 'zh' || savedLanguage === 'en') return savedLanguage;\n    return initialLang || 'zh';\n  });\n\n  // 主题状态管理\n  const [theme, setTheme] = useState<ThemeType>(() => {\n    const savedTheme = localStorage.getItem('app-theme');\n    const validThemes: ThemeType[] = ['light', 'dark', 'cursor', 'retro', 'cyberpunk', 'matrix', 'oceanblue', 'eyecare', 'ghibli', 'pinkgirl', 'mintgirl', 'wuxing', 'jukebox'];\n    if (savedTheme && validThemes.includes(savedTheme as ThemeType)) {\n      return savedTheme as ThemeType;\n    }\n    return initialTheme || 'light';\n  });\n\n  // 用户认证状态管理\n  const [user, setUser] = useState<User | null>(() => {\n    if (!enableAuth) return null;\n    const savedUser = localStorage.getItem('app-user');\n    return savedUser ? JSON.parse(savedUser) : null;\n  });\n\n  // 保存全局认证状态\n  globalAuthState = { user, setUser };\n\n  // 保存语言设置\n  useEffect(() => {\n    localStorage.setItem('app-language', language);\n  }, [language]);\n\n  // 保存主题设置\n  useEffect(() => {\n    localStorage.setItem('app-theme', theme);\n    document.documentElement.setAttribute('data-theme', theme);\n  }, [theme]);\n\n  // 保存用户信息\n  useEffect(() => {\n    if (enableAuth) {\n      if (user) {\n        localStorage.setItem('app-user', JSON.stringify(user));\n      } else {\n        localStorage.removeItem('app-user');\n      }\n    }\n  }, [user, enableAuth]);\n\n  // 认证方法\n  const login = (newUser: User) => {\n    setUser(newUser);\n  };\n\n  const logout = () => {\n    setUser(null);\n    localStorage.removeItem('app-user');\n  };\n\n  const hasRole = (role: string): boolean => {\n    return user?.roles.includes(role) || false;\n  };\n\n  const hasAnyRole = (roles: string[]): boolean => {\n    return roles.some(role => user?.roles.includes(role)) || false;\n  };\n\n  // 路由守卫 - 检查认证状态\n  useEffect(() => {\n    if (!enableAuth || !router) return;\n\n    const unsubscribe = router.subscribe('onBeforeLoad', ({ pathChanged, toLocation }) => {\n      if (!pathChanged) return;\n\n      const isPublicRoute = publicRoutes.some(route =>\n        toLocation.pathname.startsWith(route)\n      );\n\n      const isProtectedRoute = protectedRoutes.length === 0 ||\n        protectedRoutes.some(route => toLocation.pathname.startsWith(route));\n\n      if (isProtectedRoute && !isPublicRoute && !user) {\n        // 允许调用方先自行处理认证需求。返回 true 表示已处理，直接放行。\n        if (onAuthRequired) {\n          const handled = onAuthRequired();\n          if (handled) return;\n        }\n\n        // 未被自定义逻辑处理时，执行认证失败回调或默认重定向。\n        if (authFailedCallback) {\n          authFailedCallback(toLocation.pathname, loginUrl);\n        } else {\n          window.location.href = loginUrl;\n        }\n      }\n    });\n\n    return () => {\n      if (unsubscribe) unsubscribe();\n    };\n  }, [enableAuth, user, router, protectedRoutes, publicRoutes, onAuthRequired, loginUrl, authFailedCallback]);\n\n  const authContext: AuthContextType = {\n    user,\n    isAuthenticated: !!user,\n    login,\n    logout,\n    hasRole,\n    hasAnyRole,\n  };\n\n  const value: AppContextType = {\n    title,\n    language,\n    theme,\n    setLanguage,\n    setTheme,\n    auth: authContext,\n    menuItems,\n    getMenuItems,\n    themes,\n    sidebarWidth,\n    sidebarCollapsedWidth,\n    navbarHeight,\n  };\n\n  return (\n    <AppContext.Provider value={value}>\n      {router ? (\n        children || <RouterProvider router={router} />\n      ) : (\n        children\n      )}\n    </AppContext.Provider>\n  );\n};\n\n// 保持向后兼容的 AppProvider 别名\nexport const AppProvider = AppShell;\n\nexport default AppShell;\n"],"mappings":"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"}
+{"version":3,"file":"AppContext.js","names":[],"sources":["../../src/contexts/AppContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useEffect } from 'react';\nimport { RouterProvider } from '@tanstack/react-router';\nimport { Router } from '@tanstack/react-router';\nimport Sidebar from '../layouts/Sidebar';\nimport { Headbar } from '../layouts/headbar';\nimport type { SearchConfig } from '../layouts/headbar';\nimport { Outlet } from '@tanstack/react-router';\nimport { MenuItem } from '../types/menu';\nimport { ThemeConfig } from '../utils/themes';\nimport { MobileSidebarToggleButton } from '../components/SidebarToggleButton';\nimport { readStoredJSON, writeStoredJSON, safeStorage } from '../utils/safeStorage';\nimport { isUser, readStoredUser, requiresAuthentication } from './authentication';\n\n// 主题类型\nexport type ThemeType = 'light' | 'dark' | 'cursor' | 'retro' | 'cyberpunk' | 'matrix' | 'oceanblue' | 'eyecare' | 'ghibli' | 'pinkgirl' | 'mintgirl' | 'wuxing' | 'jukebox';\n\n// 用户类型定义\nexport type User = {\n  id: string;\n  name: string;\n  email: string;\n  roles: string[];\n};\n\n// 认证上下文类型\nexport type AuthContextType = {\n  user: User | null;\n  isAuthenticated: boolean;\n  login: (user: User) => void;\n  logout: () => void;\n  hasRole: (role: string) => boolean;\n  hasAnyRole: (roles: string[]) => boolean;\n};\n\n// 应用上下文类型\nexport type AppContextType = {\n  title?: string;\n  language: 'zh' | 'en';\n  theme: ThemeType;\n  setLanguage: (lang: 'zh' | 'en') => void;\n  setTheme: (theme: ThemeType) => void;\n  auth: AuthContextType;\n  menuItems?: MenuItem[];\n  getMenuItems?: (language: 'zh' | 'en') => MenuItem[];\n  themes?: ThemeConfig[];\n  sidebarWidth?: number;\n  sidebarCollapsedWidth?: number;\n  navbarHeight?: number;\n};\n\nconst AppContext = createContext<AppContextType | undefined>(undefined);\n\nexport const useAppContext = () => {\n  const context = useContext(AppContext);\n  if (!context) {\n    throw new Error('useAppContext must be used within an AppShell');\n  }\n  return context;\n};\n\n// 导出独立的认证 hook\nexport const useAuth = () => {\n  const context = useAppContext();\n  return context.auth;\n};\n\n// AppShell 配置类型\nexport type AppShellConfig = {\n  title?: string;\n  initialLang?: 'zh' | 'en';\n  initialTheme?: ThemeType;\n  menuItems?: MenuItem[];\n  getMenuItems?: (language: 'zh' | 'en') => MenuItem[];\n  themes?: ThemeConfig[];\n  /** Enables client auth state and navigation notifications, not loader protection. Use route beforeLoad for loaders. */\n  enableAuth?: boolean;\n  onAuthRequired?: () => boolean | void;\n  protectedRoutes?: string[];\n  publicRoutes?: string[];\n  loginUrl?: string;\n  authFailedCallback?: (path: string, loginUrl: string) => void;\n  /** 布局模式: 'sidebar'(默认，顶栏+侧边栏) | 'topbar'(仅顶栏，无侧边栏) */\n  layout?: 'sidebar' | 'topbar';\n  sidebarWidth?: number;\n  sidebarCollapsedWidth?: number;\n  navbarHeight?: number;  // Navbar 高度（像素），默认 64px\n  searchConfig?: SearchConfig;\n  /** Headbar 左侧插槽（传入 ReactNode 或接收 toggleSidebar 的渲染函数） */\n  headbarLeft?: React.ReactNode | ((toggleSidebar: () => void) => React.ReactNode);\n  /** Headbar 中间插槽 */\n  headbarMiddle?: React.ReactNode;\n  /** Headbar 右侧插槽 */\n  headbarRight?: React.ReactNode;\n};\n\n// 全局配置存储\nlet globalConfig: AppShellConfig = {};\n\n// 导出的布局包装器组件 - 用于路由\nexport const AppLayoutWrapper: React.FC = () => {\n  const { title, language, theme, menuItems, getMenuItems, themes, sidebarWidth: configSidebarWidth, sidebarCollapsedWidth, navbarHeight: configNavbarHeight } = useAppContext();\n\n  // 从 localStorage 读取侧边栏折叠状态\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(() =>\n    readStoredJSON('sidebar-collapsed', (value): value is boolean => typeof value === 'boolean', false)\n  );\n\n  const [sidebarWidth, setSidebarWidth] = useState(configSidebarWidth || 280);\n  const sidebarRef = React.useRef<HTMLDivElement>(null);\n\n  // 窄屏（手机）适配：内容留白收窄，侧边栏默认折叠，用户可手动展开\n  const [narrowViewport, setNarrowViewport] = useState(() => typeof window !== 'undefined' && window.innerWidth < 768);\n  // null = 未手动干预，跟随默认规则（窄屏折叠 / 桌面跟随保存的偏好）\n  const [sidebarUserOverride, setSidebarUserOverride] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    const onResize = () => setNarrowViewport(window.innerWidth < 768);\n    window.addEventListener('resize', onResize);\n    return () => window.removeEventListener('resize', onResize);\n  }, []);\n\n  // 当配置的 sidebarWidth 改变时，更新本地 state\n  React.useEffect(() => {\n    if (configSidebarWidth) {\n      setSidebarWidth(configSidebarWidth);\n    }\n  }, [configSidebarWidth]);\n\n  // 保存侧边栏折叠状态到 localStorage\n  React.useEffect(() => {\n    writeStoredJSON('sidebar-collapsed', sidebarCollapsed);\n  }, [sidebarCollapsed]);\n\n  const effectiveSidebarCollapsed = sidebarUserOverride ?? (narrowViewport || sidebarCollapsed);\n\n  const toggleSidebar = () => {\n    const collapsed = !effectiveSidebarCollapsed;\n    setSidebarUserOverride(collapsed);\n    setSidebarCollapsed(collapsed);\n  };\n\n  const contentPaddingX = narrowViewport ? 16 : 128;\n\n  const handleSidebarWidthChange = (width: number) => {\n    setSidebarWidth(width);\n  };\n\n  const navbarHeight = configNavbarHeight || 64;  // 默认 64px\n  const layout = globalConfig.layout || 'sidebar';\n\n  // 解析 headbar 插槽：支持 ReactNode 或渲染函数\n  const headbarLeftConfig = globalConfig.headbarLeft;\n  const resolvedLeft = typeof headbarLeftConfig === 'function'\n    ? headbarLeftConfig(toggleSidebar)\n    : headbarLeftConfig;\n\n  // topbar 模式：仅顶部导航，无侧边栏\n  if (layout === 'topbar') {\n    return (\n      <div className=\"h-screen flex flex-col bg-base-100\" data-theme={theme}>\n        <div style={{ height: `${navbarHeight}px`, flexShrink: 0 }}>\n          <Headbar\n            left={resolvedLeft}\n            middle={globalConfig.headbarMiddle}\n            right={globalConfig.headbarRight}\n            height={navbarHeight}\n          />\n        </div>\n        <main className=\"flex-1 overflow-y-auto\" style={{ paddingLeft: `${contentPaddingX}px`, paddingRight: `${contentPaddingX}px`, paddingTop: '16px', paddingBottom: '16px' }}>\n          <Outlet />\n        </main>\n      </div>\n    );\n  }\n\n  // sidebar 模式（默认）：顶栏 + 侧边栏\n  return (\n    <div className=\"h-screen flex flex-col bg-base-100\" data-theme={theme}>\n      {/* 固定高度的 Headbar */}\n      <div style={{ height: `${navbarHeight}px`, flexShrink: 0 }}>\n        <Headbar\n          left={resolvedLeft}\n          middle={globalConfig.headbarMiddle}\n          right={globalConfig.headbarRight}\n          height={navbarHeight}\n        />\n      </div>\n\n      {/* Sidebar 和 Content 区域 - 独立滚动 */}\n      <div className=\"flex flex-1 overflow-hidden\" style={{ height: `calc(100vh - ${navbarHeight}px)` }}>\n        {/* Sidebar - 独立滚动（overflow visible 以允许右边缘 pill 轻微越界） */}\n        <div\n          className=\"flex-shrink-0\"\n          ref={sidebarRef}\n          style={{ height: '100%', overflow: 'visible' }}\n        >\n          <Sidebar\n            isCollapsed={effectiveSidebarCollapsed}\n            language={language}\n            items={menuItems}\n            getMenuItems={getMenuItems}\n            onWidthChange={handleSidebarWidthChange}\n            onToggle={toggleSidebar}\n            initialWidth={sidebarWidth}\n            collapsedWidth={sidebarCollapsedWidth || 64}\n          />\n        </div>\n\n        {/* Content - 独立滚动 */}\n        <main className=\"flex-1 overflow-y-auto\" style={{ height: '100%', paddingLeft: `${contentPaddingX}px`, paddingRight: `${contentPaddingX}px`, paddingTop: '16px', paddingBottom: '16px' }}>\n          <Outlet />\n        </main>\n\n        {/* 侧边栏切换控件：桌面端 pill 已由 Sidebar 内部渲染，此处仅保留移动端按钮 */}\n        <MobileSidebarToggleButton\n          isCollapsed={effectiveSidebarCollapsed}\n          onToggle={toggleSidebar}\n        />\n      </div>\n    </div>\n  );\n};\n\n// AppShell 属性类型\nexport type AppShellProps = {\n  router?: Router<any, any>;\n  children?: React.ReactNode;\n} & AppShellConfig;\n\n// AppShell 主组件\nexport const AppShell: React.FC<AppShellProps> = ({\n  router,\n  children,\n  title = 'DiShUI',\n  initialLang,\n  initialTheme,\n  menuItems,\n  getMenuItems,\n  themes,\n  enableAuth = false,\n  onAuthRequired,\n  protectedRoutes = [],\n  publicRoutes = ['/login', '/register'],\n  loginUrl = '/login',\n  authFailedCallback,\n  layout = 'sidebar',\n  sidebarWidth = 280,\n  sidebarCollapsedWidth = 64,\n  navbarHeight = 64,\n  searchConfig,\n  headbarLeft,\n  headbarMiddle,\n  headbarRight,\n}) => {\n  // 保存全局配置\n  globalConfig = {\n    title,\n    initialLang,\n    initialTheme,\n    menuItems,\n    getMenuItems,\n    themes,\n    enableAuth,\n    onAuthRequired,\n    protectedRoutes,\n    publicRoutes,\n    loginUrl,\n    authFailedCallback,\n    layout,\n    sidebarWidth,\n    sidebarCollapsedWidth,\n    navbarHeight,\n    searchConfig,\n    headbarLeft,\n    headbarMiddle,\n    headbarRight,\n  };\n\n  // 语言状态管理\n  const [language, setLanguage] = useState<'zh' | 'en'>(() => {\n    const savedLanguage = safeStorage.getItem('app-language');\n    if (savedLanguage === 'zh' || savedLanguage === 'en') return savedLanguage;\n    return initialLang || 'zh';\n  });\n\n  // 主题状态管理\n  const [theme, setTheme] = useState<ThemeType>(() => {\n    const savedTheme = safeStorage.getItem('app-theme');\n    const validThemes: ThemeType[] = ['light', 'dark', 'cursor', 'retro', 'cyberpunk', 'matrix', 'oceanblue', 'eyecare', 'ghibli', 'pinkgirl', 'mintgirl', 'wuxing', 'jukebox'];\n    if (savedTheme && validThemes.includes(savedTheme as ThemeType)) {\n      return savedTheme as ThemeType;\n    }\n    return initialTheme || 'light';\n  });\n\n  // 用户认证状态管理\n  const [user, setUser] = useState<User | null>(() => {\n    if (!enableAuth) return null;\n    return readStoredUser();\n  });\n\n  // Navigation can happen synchronously after login/logout, before React commits.\n  const authUserRef = React.useRef(user);\n  const lastAuthFailure = React.useRef<string | null>(null);\n\n  // 保存语言设置\n  useEffect(() => {\n    safeStorage.setItem('app-language', language);\n  }, [language]);\n\n  // 保存主题设置\n  useEffect(() => {\n    safeStorage.setItem('app-theme', theme);\n    if (typeof document !== 'undefined') document.documentElement.setAttribute('data-theme', theme);\n  }, [theme]);\n\n  // 保存用户信息\n  useEffect(() => {\n    if (enableAuth) {\n      if (user) {\n        writeStoredJSON('app-user', user);\n      } else {\n        safeStorage.removeItem('app-user');\n      }\n    }\n  }, [user, enableAuth]);\n\n  // 认证方法\n  const login = (newUser: User) => {\n    if (!isUser(newUser)) throw new TypeError('Invalid user: expected id, name, email and string roles');\n    authUserRef.current = newUser;\n    lastAuthFailure.current = null;\n    setUser(newUser);\n    if (enableAuth) writeStoredJSON('app-user', newUser);\n  };\n\n  const logout = () => {\n    authUserRef.current = null;\n    setUser(null);\n    safeStorage.removeItem('app-user');\n  };\n\n  const hasRole = (role: string): boolean => {\n    return user?.roles.includes(role) || false;\n  };\n\n  const hasAnyRole = (roles: string[]): boolean => {\n    return roles.some(role => user?.roles.includes(role)) || false;\n  };\n\n  // UX notification only: router events cannot cancel/await loaders. Install native\n  // beforeLoad guards when constructing protected routes, including preload paths.\n  useEffect(() => {\n    if (!enableAuth || !router) {\n      lastAuthFailure.current = null;\n      return;\n    }\n\n    const checkAuthentication = (pathname: string, currentUser = authUserRef.current) => {\n      if (currentUser || !requiresAuthentication(pathname, protectedRoutes, publicRoutes)) {\n        lastAuthFailure.current = null;\n        return;\n      }\n      // Inline configuration arrays/callbacks and StrictMode must not repeat a notification.\n      if (lastAuthFailure.current === pathname) return;\n      lastAuthFailure.current = pathname;\n\n      // Keep the existing contract: true means the caller handled the auth requirement.\n      if (onAuthRequired?.()) return;\n      if (authFailedCallback) {\n        authFailedCallback(pathname, loginUrl);\n      } else if (typeof window !== 'undefined') {\n        window.location.href = loginUrl;\n      }\n    };\n\n    const unsubscribe = router.subscribe('onBeforeLoad', ({ toLocation }) => {\n      checkAuthentication(toLocation.pathname);\n    });\n    // Covers the initial visit and auth changes without a pathname change (logout).\n    checkAuthentication(router.state.location.pathname, user);\n    return unsubscribe;\n  }, [enableAuth, user, router, protectedRoutes, publicRoutes, onAuthRequired, loginUrl, authFailedCallback]);\n\n  const authContext: AuthContextType = {\n    user,\n    isAuthenticated: !!user,\n    login,\n    logout,\n    hasRole,\n    hasAnyRole,\n  };\n\n  const value: AppContextType = {\n    title,\n    language,\n    theme,\n    setLanguage,\n    setTheme,\n    auth: authContext,\n    menuItems,\n    getMenuItems,\n    themes,\n    sidebarWidth,\n    sidebarCollapsedWidth,\n    navbarHeight,\n  };\n\n  return (\n    <AppContext.Provider value={value}>\n      {router ? (\n        children || <RouterProvider router={router} />\n      ) : (\n        children\n      )}\n    </AppContext.Provider>\n  );\n};\n\n// 保持向后兼容的 AppProvider 别名\nexport const AppProvider = AppShell;\n\nexport default AppShell;\n"],"mappings":"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"}

package/dist/contexts/authentication.d.ts

@@ -0,0 +1,7 @@
+import type { User } from './AppContext';
+/** Shape validation only; browser storage is not proof of identity or permissions. */
+export declare function isUser(value: unknown): value is User;
+export declare function readStoredUser(): User | null;
+/** A prefix matches complete path segments; '/' only matches the home page. */
+export declare function matchesAuthPath(pathname: string, route: string): boolean;
+export declare function requiresAuthentication(pathname: string, protectedRoutes: string[], publicRoutes: string[]): boolean;

package/dist/contexts/authentication.js

@@ -0,0 +1,22 @@
+import { readStoredJSON as e } from "../utils/safeStorage.js";
+//#region src/contexts/authentication.ts
+function t(e) {
+	if (!e || typeof e != "object" || Array.isArray(e)) return !1;
+	let t = e;
+	return typeof t.id == "string" && t.id.trim().length > 0 && typeof t.name == "string" && typeof t.email == "string" && Array.isArray(t.roles) && t.roles.every((e) => typeof e == "string");
+}
+function n() {
+	return e("app-user", t, null);
+}
+function r(e, t) {
+	if (!t.startsWith("/")) return !1;
+	let n = t.replace(/\/+$/, "") || "/";
+	return e === n || n !== "/" && e.startsWith(`${n}/`);
+}
+function i(e, t, n) {
+	return !n.some((t) => r(e, t)) && (t.length === 0 || t.some((t) => r(e, t)));
+}
+//#endregion
+export { t as isUser, r as matchesAuthPath, n as readStoredUser, i as requiresAuthentication };
+
+//# sourceMappingURL=authentication.js.map

package/dist/contexts/authentication.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"authentication.js","names":[],"sources":["../../src/contexts/authentication.ts"],"sourcesContent":["import type { User } from './AppContext';\nimport { readStoredJSON } from '../utils/safeStorage';\n\n/** Shape validation only; browser storage is not proof of identity or permissions. */\nexport function isUser(value: unknown): value is User {\n  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;\n  const user = value as Record<string, unknown>;\n  return typeof user.id === 'string' && user.id.trim().length > 0\n    && typeof user.name === 'string'\n    && typeof user.email === 'string'\n    && Array.isArray(user.roles) && user.roles.every(role => typeof role === 'string');\n}\n\nexport function readStoredUser(): User | null {\n  return readStoredJSON<User | null>('app-user', isUser, null);\n}\n\n/** A prefix matches complete path segments; '/' only matches the home page. */\nexport function matchesAuthPath(pathname: string, route: string): boolean {\n  if (!route.startsWith('/')) return false;\n  const prefix = route.replace(/\\/+$/, '') || '/';\n  return pathname === prefix || (prefix !== '/' && pathname.startsWith(`${prefix}/`));\n}\n\nexport function requiresAuthentication(pathname: string, protectedRoutes: string[], publicRoutes: string[]): boolean {\n  return !publicRoutes.some(route => matchesAuthPath(pathname, route))\n    && (protectedRoutes.length === 0 || protectedRoutes.some(route => matchesAuthPath(pathname, route)));\n}\n"],"mappings":";;AAIA,SAAgB,EAAO,GAA+B;CACpD,IAAI,CAAC,KAAS,OAAO,KAAU,YAAY,MAAM,QAAQ,CAAK,GAAG,OAAO;CACxE,IAAM,IAAO;CACb,OAAO,OAAO,EAAK,MAAO,YAAY,EAAK,GAAG,KAAK,CAAC,CAAC,SAAS,KACzD,OAAO,EAAK,QAAS,YACrB,OAAO,EAAK,SAAU,YACtB,MAAM,QAAQ,EAAK,KAAK,KAAK,EAAK,MAAM,OAAM,MAAQ,OAAO,KAAS,QAAQ;AACrF;AAEA,SAAgB,IAA8B;CAC5C,OAAO,EAA4B,YAAY,GAAQ,IAAI;AAC7D;AAGA,SAAgB,EAAgB,GAAkB,GAAwB;CACxE,IAAI,CAAC,EAAM,WAAW,GAAG,GAAG,OAAO;CACnC,IAAM,IAAS,EAAM,QAAQ,QAAQ,EAAE,KAAK;CAC5C,OAAO,MAAa,KAAW,MAAW,OAAO,EAAS,WAAW,GAAG,EAAO,EAAE;AACnF;AAEA,SAAgB,EAAuB,GAAkB,GAA2B,GAAiC;CACnH,OAAO,CAAC,EAAa,MAAK,MAAS,EAAgB,GAAU,CAAK,CAAC,MAC7D,EAAgB,WAAW,KAAK,EAAgB,MAAK,MAAS,EAAgB,GAAU,CAAK,CAAC;AACtG"}