dishui 0.0.83 → 0.0.89

package/dist/components/Markdown/useMarkdownSource.js

@@ -1,50 +1,65 @@
-import { useEffect as e, useState as t } from "react";
+import { useEffect as e, useRef as t, useState as n } from "react";
 //#region src/components/Markdown/useMarkdownSource.ts
-async function n(e, t) {
-	let n = /^s3:\/\/([^/]+)\/(.+)$/.exec(e);
-	if (!n) throw Error("Invalid S3 URL format. Expected: s3://bucket/key");
-	let [, r, i] = n, a = t?.region || "us-east-1", o = `${t?.endpoint || `https://${r}.s3.${a}.amazonaws.com`}/${i}`, s = await fetch(o);
-	if (!s.ok) throw Error(`S3 fetch failed: ${s.status} ${s.statusText}`);
-	return s.text();
+async function r(e, t, n) {
+	let r = /^s3:\/\/([^/]+)\/(.+)$/.exec(e);
+	if (!r) throw Error("Invalid S3 URL format. Expected: s3://bucket/key");
+	let [, i, a] = r, o = t?.region || "us-east-1", s = `${t?.endpoint || `https://${i}.s3.${o}.amazonaws.com`}/${a}`, c = await fetch(s, { signal: n });
+	if (!c.ok) throw Error(`S3 fetch failed: ${c.status} ${c.statusText}`);
+	return c.text();
 }
-function r(r, i, a, o, s) {
-	let [c, l] = t(""), [u, d] = t(!1), [f, p] = t(null);
+function i(i, a, o, s, c) {
+	let [l, u] = n(""), [d, f] = n(!1), [p, m] = n(null), h = t({
+		onLoad: s,
+		onError: c
+	});
+	e(() => {
+		h.current = {
+			onLoad: s,
+			onError: c
+		};
+	}, [s, c]);
+	let g = o?.region, _ = o?.endpoint;
 	return e(() => {
-		(async () => {
-			if (r === "text") {
-				l(i), o?.(i);
+		let e = new AbortController(), { signal: t } = e;
+		return (async () => {
+			if (m(null), i === "text") {
+				u(a), f(!1), h.current.onLoad?.(a);
 				return;
 			}
-			d(!0), p(null);
+			f(!0), u("");
 			try {
 				let e;
-				if (r === "url") {
-					let t = await fetch(i);
-					if (!t.ok) throw Error(`HTTP error! status: ${t.status}`);
-					e = await t.text();
-				} else if (r === "s3") e = await n(i, a);
-				else throw Error(`Unsupported source type: ${r}`);
-				l(e), o?.(e);
+				if (i === "url") {
+					let n = await fetch(a, { signal: t });
+					if (!n.ok) throw Error(`HTTP error! status: ${n.status}`);
+					e = await n.text();
+				} else if (i === "s3") e = await r(a, {
+					region: g,
+					endpoint: _
+				}, t);
+				else throw Error(`Unsupported source type: ${i}`);
+				if (t.aborted) return;
+				u(e), h.current.onLoad?.(e);
 			} catch (e) {
-				let t = e instanceof Error ? e : Error(String(e));
-				p(t), s?.(t);
+				if (t.aborted) return;
+				let n = e instanceof Error ? e : Error(String(e));
+				m(n), h.current.onError?.(n);
 			} finally {
-				d(!1);
+				t.aborted || f(!1);
 			}
-		})();
+		})(), () => e.abort();
 	}, [
-		r,
 		i,
 		a,
-		o,
-		s
+		g,
+		_
 	]), {
-		markdown: c,
-		loading: u,
-		error: f
+		markdown: l,
+		loading: d,
+		error: p
 	};
 }
 //#endregion
-export { r as useMarkdownSource };
+export { i as useMarkdownSource };
 
 //# sourceMappingURL=useMarkdownSource.js.map

package/dist/components/Markdown/useMarkdownSource.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMarkdownSource.js","names":[],"sources":["../../../src/components/Markdown/useMarkdownSource.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport type { MarkdownSource, MarkdownProps } from './Markdown';\n\nasync function fetchFromS3(\n  s3Url: string,\n  config?: MarkdownProps['s3Config']\n): Promise<string> {\n  const match = /^s3:\\/\\/([^/]+)\\/(.+)$/.exec(s3Url);\n  if (!match) {\n    throw new Error('Invalid S3 URL format. Expected: s3://bucket/key');\n  }\n\n  const [, bucket, key] = match;\n  const region = config?.region || 'us-east-1';\n  const endpoint = config?.endpoint || `https://${bucket}.s3.${region}.amazonaws.com`;\n  const url = `${endpoint}/${key}`;\n\n  const response = await fetch(url);\n  if (!response.ok) {\n    throw new Error(`S3 fetch failed: ${response.status} ${response.statusText}`);\n  }\n\n  return response.text();\n}\n\nexport function useMarkdownSource(\n  source: MarkdownSource,\n  content: string,\n  s3Config?: MarkdownProps['s3Config'],\n  onLoad?: (content: string) => void,\n  onError?: (error: Error) => void,\n) {\n  const [markdown, setMarkdown] = useState<string>('');\n  const [loading, setLoading] = useState<boolean>(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  useEffect(() => {\n    const fetchContent = async () => {\n      if (source === 'text') {\n        setMarkdown(content);\n        onLoad?.(content);\n        return;\n      }\n\n      setLoading(true);\n      setError(null);\n\n      try {\n        let text: string;\n\n        if (source === 'url') {\n          const response = await fetch(content);\n          if (!response.ok) {\n            throw new Error(`HTTP error! status: ${response.status}`);\n          }\n          text = await response.text();\n        } else if (source === 's3') {\n          text = await fetchFromS3(content, s3Config);\n        } else {\n          throw new Error(`Unsupported source type: ${source}`);\n        }\n\n        setMarkdown(text);\n        onLoad?.(text);\n      } catch (err) {\n        const error = err instanceof Error ? err : new Error(String(err));\n        setError(error);\n        onError?.(error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchContent();\n  }, [source, content, s3Config, onLoad, onError]);\n\n  return { markdown, loading, error };\n}\n"],"mappings":";;AAGA,eAAe,EACb,GACA,GACiB;CACjB,IAAM,IAAQ,yBAAyB,KAAK,CAAK;CACjD,IAAI,CAAC,GACH,MAAU,MAAM,kDAAkD;CAGpE,IAAM,GAAG,GAAQ,KAAO,GAClB,IAAS,GAAQ,UAAU,aAE3B,IAAM,GADK,GAAQ,YAAY,WAAW,EAAO,MAAM,EAAO,gBAC5C,GAAG,KAErB,IAAW,MAAM,MAAM,CAAG;CAChC,IAAI,CAAC,EAAS,IACZ,MAAU,MAAM,oBAAoB,EAAS,OAAO,GAAG,EAAS,YAAY;CAG9E,OAAO,EAAS,KAAK;AACvB;AAEA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACA;CACA,IAAM,CAAC,GAAU,KAAe,EAAiB,EAAE,GAC7C,CAAC,GAAS,KAAc,EAAkB,EAAK,GAC/C,CAAC,GAAO,KAAY,EAAuB,IAAI;CA0CrD,OAxCA,QAAgB;EAqCd,aApCiC;GAC/B,IAAI,MAAW,QAAQ;IAErB,AADA,EAAY,CAAO,GACnB,IAAS,CAAO;IAChB;GACF;GAGA,AADA,EAAW,EAAI,GACf,EAAS,IAAI;GAEb,IAAI;IACF,IAAI;IAEJ,IAAI,MAAW,OAAO;KACpB,IAAM,IAAW,MAAM,MAAM,CAAO;KACpC,IAAI,CAAC,EAAS,IACZ,MAAU,MAAM,uBAAuB,EAAS,QAAQ;KAE1D,IAAO,MAAM,EAAS,KAAK;IAC7B,OAAO,IAAI,MAAW,MACpB,IAAO,MAAM,EAAY,GAAS,CAAQ;SAE1C,MAAU,MAAM,4BAA4B,GAAQ;IAItD,AADA,EAAY,CAAI,GAChB,IAAS,CAAI;GACf,SAAS,GAAK;IACZ,IAAM,IAAQ,aAAe,QAAQ,IAAU,MAAM,OAAO,CAAG,CAAC;IAEhE,AADA,EAAS,CAAK,GACd,IAAU,CAAK;GACjB,UAAU;IACR,EAAW,EAAK;GAClB;EACF,EAEA,CAAa;CACf,GAAG;EAAC;EAAQ;EAAS;EAAU;EAAQ;CAAO,CAAC,GAExC;EAAE;EAAU;EAAS;CAAM;AACpC"}
+{"version":3,"file":"useMarkdownSource.js","names":[],"sources":["../../../src/components/Markdown/useMarkdownSource.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport type { MarkdownSource, MarkdownProps } from './Markdown';\n\nasync function fetchFromS3(\n  s3Url: string,\n  config?: MarkdownProps['s3Config'],\n  signal?: AbortSignal,\n): Promise<string> {\n  const match = /^s3:\\/\\/([^/]+)\\/(.+)$/.exec(s3Url);\n  if (!match) {\n    throw new Error('Invalid S3 URL format. Expected: s3://bucket/key');\n  }\n\n  const [, bucket, key] = match;\n  const region = config?.region || 'us-east-1';\n  const endpoint = config?.endpoint || `https://${bucket}.s3.${region}.amazonaws.com`;\n  const url = `${endpoint}/${key}`;\n\n  const response = await fetch(url, { signal });\n  if (!response.ok) {\n    throw new Error(`S3 fetch failed: ${response.status} ${response.statusText}`);\n  }\n\n  return response.text();\n}\n\nexport function useMarkdownSource(\n  source: MarkdownSource,\n  content: string,\n  s3Config?: MarkdownProps['s3Config'],\n  onLoad?: (content: string) => void,\n  onError?: (error: Error) => void,\n) {\n  const [markdown, setMarkdown] = useState<string>('');\n  const [loading, setLoading] = useState<boolean>(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  // Callback identity is not a source change; notify the latest committed callbacks.\n  const callbacks = useRef({ onLoad, onError });\n  useEffect(() => {\n    callbacks.current = { onLoad, onError };\n  }, [onLoad, onError]);\n\n  const region = s3Config?.region;\n  const endpoint = s3Config?.endpoint;\n\n  useEffect(() => {\n    const controller = new AbortController();\n    const { signal } = controller;\n\n    const fetchContent = async () => {\n      setError(null);\n      if (source === 'text') {\n        setMarkdown(content);\n        setLoading(false);\n        callbacks.current.onLoad?.(content);\n        return;\n      }\n\n      setLoading(true);\n      setMarkdown('');\n\n      try {\n        let text: string;\n\n        if (source === 'url') {\n          const response = await fetch(content, { signal });\n          if (!response.ok) {\n            throw new Error(`HTTP error! status: ${response.status}`);\n          }\n          text = await response.text();\n        } else if (source === 's3') {\n          text = await fetchFromS3(content, { region, endpoint }, signal);\n        } else {\n          throw new Error(`Unsupported source type: ${source}`);\n        }\n\n        if (signal.aborted) return;\n        setMarkdown(text);\n        callbacks.current.onLoad?.(text);\n      } catch (err) {\n        if (signal.aborted) return;\n        const error = err instanceof Error ? err : new Error(String(err));\n        setError(error);\n        callbacks.current.onError?.(error);\n      } finally {\n        if (!signal.aborted) setLoading(false);\n      }\n    };\n\n    fetchContent();\n    return () => controller.abort();\n  }, [source, content, region, endpoint]);\n\n  return { markdown, loading, error };\n}\n"],"mappings":";;AAGA,eAAe,EACb,GACA,GACA,GACiB;CACjB,IAAM,IAAQ,yBAAyB,KAAK,CAAK;CACjD,IAAI,CAAC,GACH,MAAU,MAAM,kDAAkD;CAGpE,IAAM,GAAG,GAAQ,KAAO,GAClB,IAAS,GAAQ,UAAU,aAE3B,IAAM,GADK,GAAQ,YAAY,WAAW,EAAO,MAAM,EAAO,gBAC5C,GAAG,KAErB,IAAW,MAAM,MAAM,GAAK,EAAE,UAAO,CAAC;CAC5C,IAAI,CAAC,EAAS,IACZ,MAAU,MAAM,oBAAoB,EAAS,OAAO,GAAG,EAAS,YAAY;CAG9E,OAAO,EAAS,KAAK;AACvB;AAEA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACA;CACA,IAAM,CAAC,GAAU,KAAe,EAAiB,EAAE,GAC7C,CAAC,GAAS,KAAc,EAAkB,EAAK,GAC/C,CAAC,GAAO,KAAY,EAAuB,IAAI,GAG/C,IAAY,EAAO;EAAE;EAAQ;CAAQ,CAAC;CAC5C,QAAgB;EACd,EAAU,UAAU;GAAE;GAAQ;EAAQ;CACxC,GAAG,CAAC,GAAQ,CAAO,CAAC;CAEpB,IAAM,IAAS,GAAU,QACnB,IAAW,GAAU;CAkD3B,OAhDA,QAAgB;EACd,IAAM,IAAa,IAAI,gBAAgB,GACjC,EAAE,cAAW;EA2CnB,QADA,YAxCiC;GAE/B,IADA,EAAS,IAAI,GACT,MAAW,QAAQ;IAGrB,AAFA,EAAY,CAAO,GACnB,EAAW,EAAK,GAChB,EAAU,QAAQ,SAAS,CAAO;IAClC;GACF;GAGA,AADA,EAAW,EAAI,GACf,EAAY,EAAE;GAEd,IAAI;IACF,IAAI;IAEJ,IAAI,MAAW,OAAO;KACpB,IAAM,IAAW,MAAM,MAAM,GAAS,EAAE,UAAO,CAAC;KAChD,IAAI,CAAC,EAAS,IACZ,MAAU,MAAM,uBAAuB,EAAS,QAAQ;KAE1D,IAAO,MAAM,EAAS,KAAK;IAC7B,OAAO,IAAI,MAAW,MACpB,IAAO,MAAM,EAAY,GAAS;KAAE;KAAQ;IAAS,GAAG,CAAM;SAE9D,MAAU,MAAM,4BAA4B,GAAQ;IAGtD,IAAI,EAAO,SAAS;IAEpB,AADA,EAAY,CAAI,GAChB,EAAU,QAAQ,SAAS,CAAI;GACjC,SAAS,GAAK;IACZ,IAAI,EAAO,SAAS;IACpB,IAAM,IAAQ,aAAe,QAAQ,IAAU,MAAM,OAAO,CAAG,CAAC;IAEhE,AADA,EAAS,CAAK,GACd,EAAU,QAAQ,UAAU,CAAK;GACnC,UAAU;IACR,AAAK,EAAO,WAAS,EAAW,EAAK;GACvC;EACF,EAEA,CAAa,SACA,EAAW,MAAM;CAChC,GAAG;EAAC;EAAQ;EAAS;EAAQ;CAAQ,CAAC,GAE/B;EAAE;EAAU;EAAS;CAAM;AACpC"}

package/dist/components/Markdown/useMarkmapRenderer.js

@@ -1,38 +1,51 @@
-import { useEffect as e } from "react";
-import { Transformer as t } from "markmap-lib";
-import { Markmap as n } from "markmap-view";
+import { useEffect as e, useRef as t } from "react";
+import { Transformer as n } from "markmap-lib";
+import { Markmap as r } from "markmap-view";
 //#region src/components/Markdown/useMarkmapRenderer.ts
-function r(r, i, a) {
+function i(e, t) {
+	clearTimeout(t.timer);
+	let n = t.instance;
+	t.instance = void 0, n && (n.svg.interrupt(), n.svg.selectAll("*").interrupt(), n.svg.on("wheel", null), n.destroy()), t.output && e.firstChild === t.output && e.replaceChildren();
+}
+function a(a, o, s) {
+	let c = t(/* @__PURE__ */ new Map()), l = t(null);
 	e(() => {
-		a && i && r.current && setTimeout(() => {
-			try {
-				let e = r.current?.querySelectorAll(".markmap-diagram");
-				if (e) {
-					let r = new t();
-					for (let t = 0; t < e.length; t++) {
-						let i = e[t], a = i.getAttribute("data-markmap-content") || "";
-						if (a.trim()) try {
-							i.innerHTML = "";
-							let e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-							e.style.width = "100%", e.style.height = "500px", i.appendChild(e);
-							let { root: t } = r.transform(a);
-							n.create(e, {}, t);
-						} catch (e) {
-							console.error("Markmap render error:", e), i.innerHTML = `<pre class="text-error">Markmap 渲染失败: ${e}</pre>`;
-						}
-					}
+		let e = c.current;
+		return () => {
+			e.forEach((e, t) => i(t, e)), e.clear();
+		};
+	}, []), e(() => {
+		let e = c.current, t = a.current, u = new Set(s && o && t ? t.querySelectorAll(".markmap-diagram") : []);
+		e.forEach((t, n) => {
+			(!u.has(n) || n.getAttribute("data-markmap-content") !== t.code || t.output && n.firstChild !== t.output) && (e.delete(n), i(n, t));
+		}), u.forEach((o) => {
+			if (e.has(o)) return;
+			let s = o.getAttribute("data-markmap-content") || "";
+			if (!s.trim()) return;
+			let c = {
+				code: s,
+				output: null
+			};
+			e.set(o, c);
+			let u = () => e.get(o) === c && a.current === t && t?.contains(o) && o.getAttribute("data-markmap-content") === s && (!c.output || o.firstChild === c.output);
+			c.timer = setTimeout(async () => {
+				if (u()) try {
+					l.current ??= new n();
+					let { root: e } = l.current.transform(s), t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+					t.style.width = "100%", t.style.height = "500px", o.replaceChildren(t), c.output = t;
+					let i = r.create(t, {});
+					c.instance = i, await i.setData(e), u() && await i.fit();
+				} catch (e) {
+					if (!u()) return;
+					i(o, c), console.error("Markmap render error:", e);
+					let t = document.createElement("pre");
+					t.className = "text-error", t.textContent = `Markmap 渲染失败: ${e}`, o.replaceChildren(t), c.output = t;
 				}
-			} catch (e) {
-				console.error("Markmap rendering failed:", e);
-			}
-		}, 100);
-	}, [
-		i,
-		a,
-		r
-	]);
+			}, 100);
+		});
+	});
 }
 //#endregion
-export { r as useMarkmapRenderer };
+export { a as useMarkmapRenderer };
 
 //# sourceMappingURL=useMarkmapRenderer.js.map

package/dist/components/Markdown/useMarkmapRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMarkmapRenderer.js","names":[],"sources":["../../../src/components/Markdown/useMarkmapRenderer.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { Transformer } from 'markmap-lib';\nimport { Markmap } from 'markmap-view';\n\nexport function useMarkmapRenderer(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  markdown: string,\n  enabled: boolean,\n) {\n  useEffect(() => {\n    if (!enabled || !markdown || !containerRef.current) return;\n\n    const renderMarkmap = () => {\n      try {\n        const markmapElements = containerRef.current?.querySelectorAll('.markmap-diagram');\n        if (markmapElements) {\n          const transformer = new Transformer();\n\n          for (let i = 0; i < markmapElements.length; i++) {\n            const element = markmapElements[i] as HTMLElement;\n            const code = element.getAttribute('data-markmap-content') || '';\n\n            if (code.trim()) {\n              try {\n                element.innerHTML = '';\n                const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n                svg.style.width = '100%';\n                svg.style.height = '500px';\n                element.appendChild(svg);\n\n                const { root } = transformer.transform(code);\n                Markmap.create(svg, {}, root);\n              } catch (err) {\n                console.error('Markmap render error:', err);\n                element.innerHTML = `<pre class=\"text-error\">Markmap 渲染失败: ${err}</pre>`;\n              }\n            }\n          }\n        }\n      } catch (err) {\n        console.error('Markmap rendering failed:', err);\n      }\n    };\n\n    setTimeout(renderMarkmap, 100);\n  }, [markdown, enabled, containerRef]);\n}\n"],"mappings":";;;;AAIA,SAAgB,EACd,GACA,GACA,GACA;CACA,QAAgB;EACV,AAAC,KAAY,KAAa,EAAa,WAkC3C,iBAhC4B;GAC1B,IAAI;IACF,IAAM,IAAkB,EAAa,SAAS,iBAAiB,kBAAkB;IACjF,IAAI,GAAiB;KACnB,IAAM,IAAc,IAAI,EAAY;KAEpC,KAAK,IAAI,IAAI,GAAG,IAAI,EAAgB,QAAQ,KAAK;MAC/C,IAAM,IAAU,EAAgB,IAC1B,IAAO,EAAQ,aAAa,sBAAsB,KAAK;MAE7D,IAAI,EAAK,KAAK,GACZ,IAAI;OACF,EAAQ,YAAY;OACpB,IAAM,IAAM,SAAS,gBAAgB,8BAA8B,KAAK;OAGxE,AAFA,EAAI,MAAM,QAAQ,QAClB,EAAI,MAAM,SAAS,SACnB,EAAQ,YAAY,CAAG;OAEvB,IAAM,EAAE,YAAS,EAAY,UAAU,CAAI;OAC3C,EAAQ,OAAO,GAAK,CAAC,GAAG,CAAI;MAC9B,SAAS,GAAK;OAEZ,AADA,QAAQ,MAAM,yBAAyB,CAAG,GAC1C,EAAQ,YAAY,yCAAyC,EAAI;MACnE;KAEJ;IACF;GACF,SAAS,GAAK;IACZ,QAAQ,MAAM,6BAA6B,CAAG;GAChD;EACF,GAE0B,GAAG;CAC/B,GAAG;EAAC;EAAU;EAAS;CAAY,CAAC;AACtC"}
+{"version":3,"file":"useMarkmapRenderer.js","names":[],"sources":["../../../src/components/Markdown/useMarkmapRenderer.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { Transformer } from 'markmap-lib';\nimport { Markmap } from 'markmap-view';\n\ninterface Diagram {\n  code: string;\n  output: ChildNode | null;\n  instance?: Markmap;\n  timer?: ReturnType<typeof setTimeout>;\n}\n\nfunction dispose(element: HTMLElement, diagram: Diagram) {\n  clearTimeout(diagram.timer);\n  const instance = diagram.instance;\n  diagram.instance = undefined;\n  if (instance) {\n    // destroy disconnects Markmap's observer/refresh subscription. Stop D3's\n    // transitions and pan listener too, before removing the owned SVG.\n    instance.svg.interrupt();\n    instance.svg.selectAll('*').interrupt();\n    instance.svg.on('wheel', null);\n    instance.destroy();\n  }\n  if (diagram.output && element.firstChild === diagram.output) {\n    element.replaceChildren();\n  }\n}\n\nexport function useMarkmapRenderer(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  markdown: string,\n  enabled: boolean,\n) {\n  const diagrams = useRef(new Map<HTMLElement, Diagram>());\n  const transformer = useRef<Transformer | null>(null);\n\n  useEffect(() => {\n    const entries = diagrams.current;\n    return () => {\n      entries.forEach((diagram, element) => dispose(element, diagram));\n      entries.clear();\n    };\n  }, []);\n\n  useEffect(() => {\n    const entries = diagrams.current;\n    const container = containerRef.current;\n    const elements = new Set(enabled && markdown && container\n      ? container.querySelectorAll<HTMLElement>('.markmap-diagram') : []);\n\n    entries.forEach((diagram, element) => {\n      if (!elements.has(element) || element.getAttribute('data-markmap-content') !== diagram.code ||\n          (diagram.output && element.firstChild !== diagram.output)) {\n        entries.delete(element);\n        dispose(element, diagram);\n      }\n    });\n\n    elements.forEach(element => {\n      if (entries.has(element)) return;\n      const code = element.getAttribute('data-markmap-content') || '';\n      if (!code.trim()) return;\n      const diagram: Diagram = { code, output: null };\n      entries.set(element, diagram);\n      const canCommit = () => entries.get(element) === diagram &&\n        containerRef.current === container && container?.contains(element) &&\n        element.getAttribute('data-markmap-content') === code &&\n        (!diagram.output || element.firstChild === diagram.output);\n\n      diagram.timer = setTimeout(async () => {\n        if (!canCommit()) return;\n        try {\n          transformer.current ??= new Transformer();\n          const { root } = transformer.current.transform(code);\n          const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n          svg.style.width = '100%';\n          svg.style.height = '500px';\n          element.replaceChildren(svg);\n          diagram.output = svg;\n          // Keep the instance before starting asynchronous layout, so cleanup\n          // can destroy it and a superseded layout never starts a late fit.\n          const instance = Markmap.create(svg, {});\n          diagram.instance = instance;\n          await instance.setData(root);\n          if (canCommit()) await instance.fit();\n        } catch (err) {\n          if (!canCommit()) return;\n          dispose(element, diagram);\n          console.error('Markmap render error:', err);\n          const fallback = document.createElement('pre');\n          fallback.className = 'text-error';\n          fallback.textContent = `Markmap 渲染失败: ${err}`;\n          element.replaceChildren(fallback);\n          diagram.output = fallback;\n        }\n      }, 100);\n    });\n  });\n}\n"],"mappings":";;;;AAWA,SAAS,EAAQ,GAAsB,GAAkB;CACvD,aAAa,EAAQ,KAAK;CAC1B,IAAM,IAAW,EAAQ;CAUzB,AATA,EAAQ,WAAW,KAAA,GACf,MAGF,EAAS,IAAI,UAAU,GACvB,EAAS,IAAI,UAAU,GAAG,CAAC,CAAC,UAAU,GACtC,EAAS,IAAI,GAAG,SAAS,IAAI,GAC7B,EAAS,QAAQ,IAEf,EAAQ,UAAU,EAAQ,eAAe,EAAQ,UACnD,EAAQ,gBAAgB;AAE5B;AAEA,SAAgB,EACd,GACA,GACA,GACA;CACA,IAAM,IAAW,kBAAO,IAAI,IAA0B,CAAC,GACjD,IAAc,EAA2B,IAAI;CAUnD,AARA,QAAgB;EACd,IAAM,IAAU,EAAS;EACzB,aAAa;GAEX,AADA,EAAQ,SAAS,GAAS,MAAY,EAAQ,GAAS,CAAO,CAAC,GAC/D,EAAQ,MAAM;EAChB;CACF,GAAG,CAAC,CAAC,GAEL,QAAgB;EACd,IAAM,IAAU,EAAS,SACnB,IAAY,EAAa,SACzB,IAAW,IAAI,IAAI,KAAW,KAAY,IAC5C,EAAU,iBAA8B,kBAAkB,IAAI,CAAC,CAAC;EAUpE,AARA,EAAQ,SAAS,GAAS,MAAY;GACpC,CAAI,CAAC,EAAS,IAAI,CAAO,KAAK,EAAQ,aAAa,sBAAsB,MAAM,EAAQ,QAClF,EAAQ,UAAU,EAAQ,eAAe,EAAQ,YACpD,EAAQ,OAAO,CAAO,GACtB,EAAQ,GAAS,CAAO;EAE5B,CAAC,GAED,EAAS,SAAQ,MAAW;GAC1B,IAAI,EAAQ,IAAI,CAAO,GAAG;GAC1B,IAAM,IAAO,EAAQ,aAAa,sBAAsB,KAAK;GAC7D,IAAI,CAAC,EAAK,KAAK,GAAG;GAClB,IAAM,IAAmB;IAAE;IAAM,QAAQ;GAAK;GAC9C,EAAQ,IAAI,GAAS,CAAO;GAC5B,IAAM,UAAkB,EAAQ,IAAI,CAAO,MAAM,KAC/C,EAAa,YAAY,KAAa,GAAW,SAAS,CAAO,KACjE,EAAQ,aAAa,sBAAsB,MAAM,MAChD,CAAC,EAAQ,UAAU,EAAQ,eAAe,EAAQ;GAErD,EAAQ,QAAQ,WAAW,YAAY;IAChC,MAAU,GACf,IAAI;KACF,EAAY,YAAY,IAAI,EAAY;KACxC,IAAM,EAAE,YAAS,EAAY,QAAQ,UAAU,CAAI,GAC7C,IAAM,SAAS,gBAAgB,8BAA8B,KAAK;KAIxE,AAHA,EAAI,MAAM,QAAQ,QAClB,EAAI,MAAM,SAAS,SACnB,EAAQ,gBAAgB,CAAG,GAC3B,EAAQ,SAAS;KAGjB,IAAM,IAAW,EAAQ,OAAO,GAAK,CAAC,CAAC;KAGvC,AAFA,EAAQ,WAAW,GACnB,MAAM,EAAS,QAAQ,CAAI,GACvB,EAAU,KAAG,MAAM,EAAS,IAAI;IACtC,SAAS,GAAK;KACZ,IAAI,CAAC,EAAU,GAAG;KAElB,AADA,EAAQ,GAAS,CAAO,GACxB,QAAQ,MAAM,yBAAyB,CAAG;KAC1C,IAAM,IAAW,SAAS,cAAc,KAAK;KAI7C,AAHA,EAAS,YAAY,cACrB,EAAS,cAAc,iBAAiB,KACxC,EAAQ,gBAAgB,CAAQ,GAChC,EAAQ,SAAS;IACnB;GACF,GAAG,GAAG;EACR,CAAC;CACH,CAAC;AACH"}

package/dist/components/Markdown/useMermaidRenderer.js

@@ -1,44 +1,62 @@
-import { useEffect as e, useRef as t, useState as n } from "react";
-import r from "mermaid";
+import { useEffect as e, useRef as t } from "react";
+import n from "mermaid";
 //#region src/components/Markdown/useMermaidRenderer.ts
-function i(i, a, o) {
-	let [s, c] = n(!1), l = t(!1);
+var r = 0;
+function i(e, t) {
+	let n = e.getAttribute("data-mermaid-content");
+	return n === null ? t?.output && e.firstChild === t.output ? t.code : e.querySelector("svg") ? "" : e.textContent || "" : n;
+}
+function a(e, t) {
+	clearTimeout(t.timer), t.output && e.firstChild === t.output && (e.textContent = i(e, t));
+}
+function o(o, s, c) {
+	let l = t(!1), u = t(/* @__PURE__ */ new Map());
 	e(() => {
-		o && !l.current && (r.initialize({
+		let e = u.current;
+		return () => {
+			e.forEach((e, t) => a(t, e)), e.clear();
+		};
+	}, []), e(() => {
+		c && !l.current && (n.initialize({
 			startOnLoad: !1,
 			theme: "default",
-			securityLevel: "loose",
+			securityLevel: "strict",
+			htmlLabels: !1,
 			fontFamily: "inherit",
 			flowchart: {
 				useMaxWidth: !0,
-				htmlLabels: !0
+				htmlLabels: !1
 			}
-		}), l.current = !0, c(!0));
-	}, [o]), e(() => {
-		o && s && a && i.current && setTimeout(async () => {
-			try {
-				let e = i.current?.querySelectorAll(".mermaid-diagram");
-				if (e) for (let t = 0; t < e.length; t++) {
-					let n = e[t], i = n.textContent || "";
-					if (i.trim()) try {
-						let { svg: e } = await r.render(`mermaid-${Date.now()}-${t}`, i);
-						n.innerHTML = e;
-					} catch (e) {
-						console.error("Mermaid render error:", e), n.innerHTML = `<pre class="text-error">${i}</pre>`;
-					}
+		}), l.current = !0);
+		let e = u.current, t = o.current, d = new Set(c && s && t ? t.querySelectorAll(".mermaid-diagram") : []);
+		e.forEach((t, n) => {
+			(!d.has(n) || i(n, t) !== t.code || t.output && n.firstChild !== t.output) && (e.delete(n), a(n, t));
+		}), d.forEach((a) => {
+			if (e.has(a)) return;
+			let s = i(a);
+			if (!s.trim()) return;
+			let c = {
+				code: s,
+				output: null
+			};
+			e.set(a, c);
+			let l = () => e.get(a) === c && o.current === t && t?.contains(a) && i(a, c) === s;
+			c.timer = setTimeout(async () => {
+				if (l()) try {
+					let { svg: e } = await n.render(`dishui-mermaid-${++r}`, s);
+					if (!l()) return;
+					a.innerHTML = e, c.output = a.firstChild;
+				} catch (e) {
+					if (!l()) return;
+					console.error("Mermaid render error:", e);
+					let t = document.createElement("pre");
+					t.className = "text-error", t.textContent = s, a.replaceChildren(t), c.output = t;
 				}
-			} catch (e) {
-				console.error("Mermaid rendering failed:", e);
-			}
-		}, 100);
-	}, [
-		a,
-		o,
-		s,
-		i
-	]);
+			}, 100);
+		});
+	});
 }
 //#endregion
-export { i as useMermaidRenderer };
+export { o as useMermaidRenderer };
 
 //# sourceMappingURL=useMermaidRenderer.js.map

package/dist/components/Markdown/useMermaidRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMermaidRenderer.js","names":[],"sources":["../../../src/components/Markdown/useMermaidRenderer.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport mermaid from 'mermaid';\n\nexport function useMermaidRenderer(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  markdown: string,\n  enabled: boolean,\n) {\n  const [initialized, setInitialized] = useState(false);\n  const initRef = useRef(false);\n\n  useEffect(() => {\n    if (enabled && !initRef.current) {\n      mermaid.initialize({\n        startOnLoad: false,\n        theme: 'default',\n        securityLevel: 'loose',\n        fontFamily: 'inherit',\n        flowchart: {\n          useMaxWidth: true,\n          htmlLabels: true,\n        },\n      });\n      initRef.current = true;\n      setInitialized(true);\n    }\n  }, [enabled]);\n\n  useEffect(() => {\n    if (!enabled || !initialized || !markdown || !containerRef.current) return;\n\n    const renderMermaid = async () => {\n      try {\n        const mermaidElements = containerRef.current?.querySelectorAll('.mermaid-diagram');\n        if (mermaidElements) {\n          for (let i = 0; i < mermaidElements.length; i++) {\n            const element = mermaidElements[i] as HTMLElement;\n            const code = element.textContent || '';\n            if (code.trim()) {\n              try {\n                const { svg } = await mermaid.render(`mermaid-${Date.now()}-${i}`, code);\n                element.innerHTML = svg;\n              } catch (err) {\n                console.error('Mermaid render error:', err);\n                element.innerHTML = `<pre class=\"text-error\">${code}</pre>`;\n              }\n            }\n          }\n        }\n      } catch (err) {\n        console.error('Mermaid rendering failed:', err);\n      }\n    };\n\n    setTimeout(renderMermaid, 100);\n  }, [markdown, enabled, initialized, containerRef]);\n}\n"],"mappings":";;;AAGA,SAAgB,EACd,GACA,GACA,GACA;CACA,IAAM,CAAC,GAAa,KAAkB,EAAS,EAAK,GAC9C,IAAU,EAAO,EAAK;CAmB5B,AAjBA,QAAgB;EACd,AAAI,KAAW,CAAC,EAAQ,YACtB,EAAQ,WAAW;GACjB,aAAa;GACb,OAAO;GACP,eAAe;GACf,YAAY;GACZ,WAAW;IACT,aAAa;IACb,YAAY;GACd;EACF,CAAC,GACD,EAAQ,UAAU,IAClB,EAAe,EAAI;CAEvB,GAAG,CAAC,CAAO,CAAC,GAEZ,QAAgB;EACV,AAAC,KAAY,KAAgB,KAAa,EAAa,WAyB3D,WAAW,YAvBuB;GAChC,IAAI;IACF,IAAM,IAAkB,EAAa,SAAS,iBAAiB,kBAAkB;IACjF,IAAI,GACF,KAAK,IAAI,IAAI,GAAG,IAAI,EAAgB,QAAQ,KAAK;KAC/C,IAAM,IAAU,EAAgB,IAC1B,IAAO,EAAQ,eAAe;KACpC,IAAI,EAAK,KAAK,GACZ,IAAI;MACF,IAAM,EAAE,WAAQ,MAAM,EAAQ,OAAO,WAAW,KAAK,IAAI,EAAE,GAAG,KAAK,CAAI;MACvE,EAAQ,YAAY;KACtB,SAAS,GAAK;MAEZ,AADA,QAAQ,MAAM,yBAAyB,CAAG,GAC1C,EAAQ,YAAY,2BAA2B,EAAK;KACtD;IAEJ;GAEJ,SAAS,GAAK;IACZ,QAAQ,MAAM,6BAA6B,CAAG;GAChD;EACF,GAE0B,GAAG;CAC/B,GAAG;EAAC;EAAU;EAAS;EAAa;CAAY,CAAC;AACnD"}
+{"version":3,"file":"useMermaidRenderer.js","names":[],"sources":["../../../src/components/Markdown/useMermaidRenderer.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport mermaid from 'mermaid';\n\ninterface Diagram {\n  code: string;\n  output: ChildNode | null;\n  timer?: ReturnType<typeof setTimeout>;\n}\n\n// Shared across hook instances, including renders started in the same millisecond.\nlet nextRenderId = 0;\n\nfunction readSource(element: HTMLElement, diagram?: Diagram): string {\n  const source = element.getAttribute('data-mermaid-content');\n  if (source !== null) return source;\n  // Retain compatibility with text-only hook consumers without parsing our SVG.\n  if (diagram?.output && element.firstChild === diagram.output) return diagram.code;\n  return element.querySelector('svg') ? '' : element.textContent || '';\n}\n\nfunction dispose(element: HTMLElement, diagram: Diagram) {\n  clearTimeout(diagram.timer);\n  if (diagram.output && element.firstChild === diagram.output) {\n    // An attribute-only consumer may already have supplied a new (or empty) source.\n    element.textContent = readSource(element, diagram);\n  }\n}\n\nexport function useMermaidRenderer(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  markdown: string,\n  enabled: boolean,\n) {\n  const initialized = useRef(false);\n  const diagrams = useRef(new Map<HTMLElement, Diagram>());\n\n  useEffect(() => {\n    const entries = diagrams.current;\n    return () => {\n      entries.forEach((diagram, element) => dispose(element, diagram));\n      entries.clear();\n    };\n  }, []);\n\n  // Reconcile every commit: loading/visibility may replace the container even\n  // when the markdown string is unchanged. Only changed blocks schedule work.\n  useEffect(() => {\n    if (enabled && !initialized.current) {\n      mermaid.initialize({\n        startOnLoad: false,\n        theme: 'default',\n        securityLevel: 'strict',\n        htmlLabels: false,\n        fontFamily: 'inherit',\n        flowchart: { useMaxWidth: true, htmlLabels: false },\n      });\n      initialized.current = true;\n    }\n\n    const entries = diagrams.current;\n    const container = containerRef.current;\n    const elements = new Set(enabled && markdown && container\n      ? container.querySelectorAll<HTMLElement>('.mermaid-diagram') : []);\n\n    entries.forEach((diagram, element) => {\n      if (!elements.has(element) || readSource(element, diagram) !== diagram.code ||\n          (diagram.output && element.firstChild !== diagram.output)) {\n        entries.delete(element);\n        dispose(element, diagram);\n      }\n    });\n\n    elements.forEach(element => {\n      if (entries.has(element)) return;\n      const code = readSource(element);\n      if (!code.trim()) return;\n      const diagram: Diagram = { code, output: null };\n      entries.set(element, diagram);\n      const canCommit = () => entries.get(element) === diagram &&\n        containerRef.current === container && container?.contains(element) &&\n        readSource(element, diagram) === code;\n\n      diagram.timer = setTimeout(async () => {\n        if (!canCommit()) return;\n        try {\n          const { svg } = await mermaid.render(`dishui-mermaid-${++nextRenderId}`, code);\n          if (!canCommit()) return;\n          element.innerHTML = svg;\n          diagram.output = element.firstChild;\n        } catch (err) {\n          if (!canCommit()) return;\n          console.error('Mermaid render error:', err);\n          const fallback = document.createElement('pre');\n          fallback.className = 'text-error';\n          fallback.textContent = code;\n          element.replaceChildren(fallback);\n          diagram.output = fallback;\n        }\n      }, 100);\n    });\n  });\n}\n"],"mappings":";;;AAUA,IAAI,IAAe;AAEnB,SAAS,EAAW,GAAsB,GAA2B;CACnE,IAAM,IAAS,EAAQ,aAAa,sBAAsB;CAI1D,OAHI,MAAW,OAEX,GAAS,UAAU,EAAQ,eAAe,EAAQ,SAAe,EAAQ,OACtE,EAAQ,cAAc,KAAK,IAAI,KAAK,EAAQ,eAAe,KAHtC;AAI9B;AAEA,SAAS,EAAQ,GAAsB,GAAkB;CAEvD,AADA,aAAa,EAAQ,KAAK,GACtB,EAAQ,UAAU,EAAQ,eAAe,EAAQ,WAEnD,EAAQ,cAAc,EAAW,GAAS,CAAO;AAErD;AAEA,SAAgB,EACd,GACA,GACA,GACA;CACA,IAAM,IAAc,EAAO,EAAK,GAC1B,IAAW,kBAAO,IAAI,IAA0B,CAAC;CAYvD,AAVA,QAAgB;EACd,IAAM,IAAU,EAAS;EACzB,aAAa;GAEX,AADA,EAAQ,SAAS,GAAS,MAAY,EAAQ,GAAS,CAAO,CAAC,GAC/D,EAAQ,MAAM;EAChB;CACF,GAAG,CAAC,CAAC,GAIL,QAAgB;EACd,AAAI,KAAW,CAAC,EAAY,YAC1B,EAAQ,WAAW;GACjB,aAAa;GACb,OAAO;GACP,eAAe;GACf,YAAY;GACZ,YAAY;GACZ,WAAW;IAAE,aAAa;IAAM,YAAY;GAAM;EACpD,CAAC,GACD,EAAY,UAAU;EAGxB,IAAM,IAAU,EAAS,SACnB,IAAY,EAAa,SACzB,IAAW,IAAI,IAAI,KAAW,KAAY,IAC5C,EAAU,iBAA8B,kBAAkB,IAAI,CAAC,CAAC;EAUpE,AARA,EAAQ,SAAS,GAAS,MAAY;GACpC,CAAI,CAAC,EAAS,IAAI,CAAO,KAAK,EAAW,GAAS,CAAO,MAAM,EAAQ,QAClE,EAAQ,UAAU,EAAQ,eAAe,EAAQ,YACpD,EAAQ,OAAO,CAAO,GACtB,EAAQ,GAAS,CAAO;EAE5B,CAAC,GAED,EAAS,SAAQ,MAAW;GAC1B,IAAI,EAAQ,IAAI,CAAO,GAAG;GAC1B,IAAM,IAAO,EAAW,CAAO;GAC/B,IAAI,CAAC,EAAK,KAAK,GAAG;GAClB,IAAM,IAAmB;IAAE;IAAM,QAAQ;GAAK;GAC9C,EAAQ,IAAI,GAAS,CAAO;GAC5B,IAAM,UAAkB,EAAQ,IAAI,CAAO,MAAM,KAC/C,EAAa,YAAY,KAAa,GAAW,SAAS,CAAO,KACjE,EAAW,GAAS,CAAO,MAAM;GAEnC,EAAQ,QAAQ,WAAW,YAAY;IAChC,MAAU,GACf,IAAI;KACF,IAAM,EAAE,WAAQ,MAAM,EAAQ,OAAO,kBAAkB,EAAE,KAAgB,CAAI;KAC7E,IAAI,CAAC,EAAU,GAAG;KAElB,AADA,EAAQ,YAAY,GACpB,EAAQ,SAAS,EAAQ;IAC3B,SAAS,GAAK;KACZ,IAAI,CAAC,EAAU,GAAG;KAClB,QAAQ,MAAM,yBAAyB,CAAG;KAC1C,IAAM,IAAW,SAAS,cAAc,KAAK;KAI7C,AAHA,EAAS,YAAY,cACrB,EAAS,cAAc,GACvB,EAAQ,gBAAgB,CAAQ,GAChC,EAAQ,SAAS;IACnB;GACF,GAAG,GAAG;EACR,CAAC;CACH,CAAC;AACH"}

package/dist/components/Page/index.d.ts

@@ -31,6 +31,20 @@ export type PageBodyProps = React.HTMLAttributes<HTMLDivElement> & {
     /** 是否让主体区在剩余空间内滚动（配合 Page fullHeight 使用） */
     scroll?: boolean;
 };
+export type PageHeaderLevel = PageHeaderProps & {
+    key: React.Key;
+};
+export type PageHeaderSlotProps = PageHeaderProps & {
+    /** 按顺序从上到下渲染；每级覆盖公共属性。空数组不渲染页头。 */
+    levels?: readonly PageHeaderLevel[];
+};
+export type PageAsideLevel = PageAsideProps & {
+    key: React.Key;
+};
+export type PageAsideSlotProps = PageAsideProps & {
+    /** 按 DOM 顺序从左到右渲染（小屏纵向堆叠）；每级覆盖公共属性。 */
+    levels?: readonly PageAsideLevel[];
+};
 export type PageAsideProps = React.HTMLAttributes<HTMLDivElement> & PagePanelProps & PageResizeProps & {
     /** 侧栏宽度，数字按 px 处理；Left 默认 260，Right 默认 320。外部变化会同步到拖动宽度。 */
     width?: number | string;
@@ -45,11 +59,11 @@ export type PageMainProps = React.HTMLAttributes<HTMLDivElement> & {
     /** 主内容区是否在剩余空间内纵向滚动 */
     scroll?: boolean;
 };
-/** 页头：直接复用 PageHeader，作为 Page.Header 使用 */
-declare const PageHeaderSlot: (props: PageHeaderProps) => React.JSX.Element;
+/** 不增加包装节点，保持 Page / Body 的布局、间距及面板开关语义。 */
+declare const PageHeaderSlot: ({ levels, ...props }: PageHeaderSlotProps) => React.JSX.Element;
 declare const PageBody: ({ gap, scroll, className, style, children, ...rest }: PageBodyProps) => React.JSX.Element;
-declare const PageLeft: ({ resizeVariant, resizable, minWidth, maxWidth, onWidthChange, open, mode, animated, duration, width, bordered, scroll, hideOnMobile, className, style, children, ...rest }: PageAsideProps) => React.JSX.Element;
-declare const PageRight: ({ resizeVariant, resizable, minWidth, maxWidth, onWidthChange, open, mode, animated, duration, width, bordered, scroll, hideOnMobile, className, style, children, ...rest }: PageAsideProps) => React.JSX.Element;
+declare const PageLeft: ({ levels, ...props }: PageAsideSlotProps) => React.ReactElement;
+declare const PageRight: ({ levels, ...props }: PageAsideSlotProps) => React.ReactElement;
 export type PageFooterProps = React.HTMLAttributes<HTMLElement> & PagePanelProps & PageAutoHideProps & {
     left?: React.ReactNode;
     center?: React.ReactNode;

package/dist/components/Page/index.js

@@ -3,24 +3,32 @@ import t from "../PagePanel/index.js";
 import n from "../PageHeader/index.js";
 import r from "./Float2.js";
 import i from "./resize2.js";
-import "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createElement as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/Page/index.tsx
-var s = (e) => typeof e == "number" ? `${e}px` : e, c = ({ fullHeight: t = !1, className: n = "", children: r, ...i }) => /* @__PURE__ */ a("div", {
+var l = (e) => typeof e == "number" ? `${e}px` : e, u = ({ fullHeight: t = !1, className: n = "", children: r, ...i }) => /* @__PURE__ */ s("div", {
 	className: e("dishui-page flex w-full min-w-0 flex-col text-body leading-5 text-base-content", t && "h-full min-h-0", n),
 	...i,
 	children: r
-}), l = (e) => /* @__PURE__ */ a(n, { ...e }), u = ({ gap: t = 16, scroll: n = !1, className: r = "", style: i, children: o, ...c }) => /* @__PURE__ */ a("div", {
+}), d = ({ levels: e, ...t }) => e === void 0 ? /* @__PURE__ */ s(n, { ...t }) : /* @__PURE__ */ s(o, { children: e.map(({ key: e, ...r }) => /* @__PURE__ */ a(n, {
+	...t,
+	...r,
+	key: e
+})) }), f = ({ gap: t = 16, scroll: n = !1, className: r = "", style: i, children: a, ...o }) => /* @__PURE__ */ s("div", {
 	className: e("dishui-page-body flex w-full flex-col md:flex-row", n && "min-h-0 flex-1", r),
 	style: {
 		...i,
 		gap: 0,
-		"--dishui-page-gap": s(i?.gap ?? t)
+		"--dishui-page-gap": l(i?.gap ?? t)
 	},
-	...c,
-	children: o
-}), d = ({ resizeVariant: n = "pill", resizable: r = !1, minWidth: o = 160, maxWidth: c = 600, onWidthChange: l, open: u, mode: d, animated: f, duration: p, width: m = 260, bordered: h = !0, scroll: g = !0, hideOnMobile: _ = !1, className: v = "", style: y, children: b, ...x }) => {
-	let S = /* @__PURE__ */ a(t, {
+	...o,
+	children: a
+}), p = ({ levels: e, ...t }) => e === void 0 ? m(t) : /* @__PURE__ */ s(o, { children: e.map(({ key: e, ...n }) => /* @__PURE__ */ a(m, {
+	...t,
+	...n,
+	key: e
+})) }), m = ({ resizeVariant: n = "pill", resizable: r = !1, minWidth: a = 160, maxWidth: o = 600, onWidthChange: c, open: u, mode: d, animated: f, duration: p, width: m = 260, bordered: h = !0, scroll: g = !0, hideOnMobile: _ = !1, className: v = "", style: y, children: b, ...x }) => {
+	let S = /* @__PURE__ */ s(t, {
 		edge: "left",
 		width: y?.width ?? m,
 		hideOnMobile: _,
@@ -28,25 +36,29 @@ var s = (e) => typeof e == "number" ? `${e}px` : e, c = ({ fullHeight: t = !1, c
 		mode: d,
 		animated: f,
 		duration: p,
-		children: /* @__PURE__ */ a("aside", {
+		children: /* @__PURE__ */ s("aside", {
 			className: e("dishui-page-left w-full shrink-0 md:w-(--dishui-aside-w)", h && "md:border-r md:border-base-300 md:pr-4", g && "md:min-h-0 md:overflow-y-auto", _ && "hidden md:block", v),
 			style: {
-				"--dishui-aside-w": s(m),
+				"--dishui-aside-w": l(m),
 				...y
 			},
 			...x,
 			children: b
 		})
 	});
-	return r ? /* @__PURE__ */ a(i, {
+	return r ? /* @__PURE__ */ s(i, {
 		panel: S,
 		resizeVariant: n,
-		minWidth: o,
-		maxWidth: c,
-		onWidthChange: l
+		minWidth: a,
+		maxWidth: o,
+		onWidthChange: c
 	}) : S;
-}, f = ({ resizeVariant: n = "pill", resizable: r = !1, minWidth: o = 160, maxWidth: c = 600, onWidthChange: l, open: u, mode: d, animated: f, duration: p, width: m = 320, bordered: h = !0, scroll: g = !0, hideOnMobile: _ = !1, className: v = "", style: y, children: b, ...x }) => {
-	let S = /* @__PURE__ */ a(t, {
+}, h = ({ levels: e, ...t }) => e === void 0 ? g(t) : /* @__PURE__ */ s(o, { children: e.map(({ key: e, ...n }) => /* @__PURE__ */ a(g, {
+	...t,
+	...n,
+	key: e
+})) }), g = ({ resizeVariant: n = "pill", resizable: r = !1, minWidth: a = 160, maxWidth: o = 600, onWidthChange: c, open: u, mode: d, animated: f, duration: p, width: m = 320, bordered: h = !0, scroll: g = !0, hideOnMobile: _ = !1, className: v = "", style: y, children: b, ...x }) => {
+	let S = /* @__PURE__ */ s(t, {
 		edge: "right",
 		width: y?.width ?? m,
 		hideOnMobile: _,
@@ -54,59 +66,59 @@ var s = (e) => typeof e == "number" ? `${e}px` : e, c = ({ fullHeight: t = !1, c
 		mode: d,
 		animated: f,
 		duration: p,
-		children: /* @__PURE__ */ a("aside", {
+		children: /* @__PURE__ */ s("aside", {
 			className: e("dishui-page-right w-full shrink-0 md:w-(--dishui-aside-w)", h && "md:border-l md:border-base-300 md:pl-4", g && "md:min-h-0 md:overflow-y-auto", _ && "hidden md:block", v),
 			style: {
-				"--dishui-aside-w": s(m),
+				"--dishui-aside-w": l(m),
 				...y
 			},
 			...x,
 			children: b
 		})
 	});
-	return r ? /* @__PURE__ */ a(i, {
+	return r ? /* @__PURE__ */ s(i, {
 		panel: S,
 		resizeVariant: n,
-		minWidth: o,
-		maxWidth: c,
-		onWidthChange: l
+		minWidth: a,
+		maxWidth: o,
+		onWidthChange: c
 	}) : S;
-}, p = ({ open: n, mode: r, animated: i, duration: s, autoHide: c, className: l, children: u, left: d, center: f, right: p, ...m }) => /* @__PURE__ */ a(t, {
+}, _ = ({ open: n, mode: r, animated: i, duration: a, autoHide: o, className: l, children: u, left: d, center: f, right: p, ...m }) => /* @__PURE__ */ s(t, {
 	edge: "footer",
-	autoHide: c,
+	autoHide: o,
 	open: n,
 	mode: r,
 	animated: i,
-	duration: s,
-	children: /* @__PURE__ */ a("footer", {
+	duration: a,
+	children: /* @__PURE__ */ s("footer", {
 		className: e("dishui-page-footer", l),
 		...m,
-		children: u === void 0 ? /* @__PURE__ */ o("div", {
+		children: u === void 0 ? /* @__PURE__ */ c("div", {
 			className: "dishui-page-header-layout",
 			"data-centered": f != null && f !== !1 || void 0,
 			children: [
-				d != null && /* @__PURE__ */ a("div", {
+				d != null && /* @__PURE__ */ s("div", {
 					className: "dishui-page-header-left",
 					children: d
 				}),
-				f != null && /* @__PURE__ */ a("div", {
+				f != null && /* @__PURE__ */ s("div", {
 					className: "dishui-page-header-center",
 					children: f
 				}),
-				p != null && /* @__PURE__ */ a("div", {
+				p != null && /* @__PURE__ */ s("div", {
 					className: "dishui-page-header-right",
 					children: p
 				})
 			]
 		}) : u
 	})
-}), m = ({ scroll: t = !1, className: n = "", children: r, ...i }) => /* @__PURE__ */ a("main", {
+}), v = ({ scroll: t = !1, className: n = "", children: r, ...i }) => /* @__PURE__ */ s("main", {
 	className: e("dishui-page-main min-w-0 flex-1", t && "min-h-0 overflow-y-auto", n),
 	...i,
 	children: r
-}), h = c;
-h.Header = l, h.Footer = p, h.Float = r, h.Body = u, h.Left = d, h.Right = f, h.Main = m;
+}), y = u;
+y.Header = d, y.Footer = _, y.Float = r, y.Body = f, y.Left = p, y.Right = h, y.Main = v;
 //#endregion
-export { u as PageBody, r as PageFloat, p as PageFooter, d as PageLeft, m as PageMain, f as PageRight, h as default };
+export { f as PageBody, r as PageFloat, _ as PageFooter, p as PageLeft, v as PageMain, h as PageRight, y as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Page/index.tsx"],"sourcesContent":["import React from 'react';\nimport PageFloat from './Float';\nimport ResizableAside, { type PageResizeProps } from './resize';\nexport type { PageFloatProps } from './Float';\nimport PageHeader, { PageHeaderProps } from '../PageHeader';\nimport { cn } from '../../utils/cn';\nimport PagePanel, { type PagePanelProps, type PageAutoHideProps } from '../PagePanel';\n\nexport type { PagePanelProps } from '../PagePanel';\n\n/**\n * Page 布局脚手架\n * ----------------------------------------------------------------------------\n * 为管理后台等页面提供统一的「页头 + 主体 + 左右侧栏」骨架，配合 PageHeader、\n * Card.Info 等组件使用。所有区域都是可选的，可按需组合。\n *\n * 典型结构：\n *   <Page fullHeight>\n *     <Page.Header title=\"用户管理\" actions={<Button>新建</Button>} />\n *     <Page.Body scroll>\n *       <Page.Left width={240}>筛选器</Page.Left>\n *       <Page.Main scroll>主内容</Page.Main>\n *       <Page.Right width={320}>详情</Page.Right>\n *     </Page.Body>\n *   </Page>\n */\n\nexport type PageProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 是否占满父容器高度并启用内部滚动（主体区滚动，页头固定） */\n    fullHeight?: boolean;\n};\n\nexport type PageBodyProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 主体内的间距（left/main/right 之间），数字按 px 处理，默认 16 */\n    gap?: number | string;\n    /** 是否让主体区在剩余空间内滚动（配合 Page fullHeight 使用） */\n    scroll?: boolean;\n};\n\nexport type PageAsideProps = React.HTMLAttributes<HTMLDivElement> & PagePanelProps & PageResizeProps & {\n    /** 侧栏宽度，数字按 px 处理；Left 默认 260，Right 默认 320。外部变化会同步到拖动宽度。 */\n    width?: number | string;\n    /** 是否显示分隔边框 */\n    bordered?: boolean;\n    /** 侧栏内部纵向滚动自适应 */\n    scroll?: boolean;\n    /** 小屏（<768px）下是否隐藏（侧栏通常在移动端折叠） */\n    hideOnMobile?: boolean;\n};\n\nexport type PageMainProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 主内容区是否在剩余空间内纵向滚动 */\n    scroll?: boolean;\n};\n\nconst toCssSize = (value: number | string | undefined): string | undefined =>\n    typeof value === 'number' ? `${value}px` : value;\n\nconst Page = ({ fullHeight = false, className = '', children, ...rest }: PageProps) => (\n    <div\n        className={cn(\n            'dishui-page flex w-full min-w-0 flex-col text-body leading-5 text-base-content',\n            fullHeight && 'h-full min-h-0',\n            className,\n        )}\n        {...rest}\n    >\n        {children}\n    </div>\n);\n\n/** 页头：直接复用 PageHeader，作为 Page.Header 使用 */\nconst PageHeaderSlot = (props: PageHeaderProps) => <PageHeader {...props} />;\n\nconst PageBody = ({ gap = 16, scroll = false, className = '', style, children, ...rest }: PageBodyProps) => (\n    <div\n        className={cn(\n            'dishui-page-body flex w-full flex-col md:flex-row',\n            scroll && 'min-h-0 flex-1',\n            className,\n        )}\n        style={{ ...style, gap: 0, ['--dishui-page-gap' as string]: toCssSize(style?.gap ?? gap) }}\n        {...rest}\n    >\n        {children}\n    </div>\n);\n\nconst PageLeft = ({\n    resizeVariant = 'pill', resizable = false, minWidth = 160, maxWidth = 600, onWidthChange,\n    open, mode, animated, duration,\n    width = 260,\n    bordered = true,\n    scroll = true,\n    hideOnMobile = false,\n    className = '',\n    style,\n    children,\n    ...rest\n}: PageAsideProps) => {\n    const panel = <PagePanel edge=\"left\" width={style?.width ?? width} hideOnMobile={hideOnMobile} open={open} mode={mode} animated={animated} duration={duration}>\n    <aside\n        className={cn(\n            'dishui-page-left w-full shrink-0 md:w-(--dishui-aside-w)',\n            bordered && 'md:border-r md:border-base-300 md:pr-4',\n            scroll && 'md:min-h-0 md:overflow-y-auto',\n            hideOnMobile && 'hidden md:block',\n            className,\n        )}\n        style={{ ['--dishui-aside-w' as string]: toCssSize(width), ...style }}\n        {...rest}\n    >\n        {children}\n    </aside>\n    </PagePanel>;\n    return resizable ? <ResizableAside panel={panel} resizeVariant={resizeVariant} minWidth={minWidth} maxWidth={maxWidth} onWidthChange={onWidthChange} /> : panel;\n};\n\nconst PageRight = ({\n    resizeVariant = 'pill', resizable = false, minWidth = 160, maxWidth = 600, onWidthChange,\n    open, mode, animated, duration,\n    width = 320,\n    bordered = true,\n    scroll = true,\n    hideOnMobile = false,\n    className = '',\n    style,\n    children,\n    ...rest\n}: PageAsideProps) => {\n    const panel = <PagePanel edge=\"right\" width={style?.width ?? width} hideOnMobile={hideOnMobile} open={open} mode={mode} animated={animated} duration={duration}>\n    <aside\n        className={cn(\n            'dishui-page-right w-full shrink-0 md:w-(--dishui-aside-w)',\n            bordered && 'md:border-l md:border-base-300 md:pl-4',\n            scroll && 'md:min-h-0 md:overflow-y-auto',\n            hideOnMobile && 'hidden md:block',\n            className,\n        )}\n        style={{ ['--dishui-aside-w' as string]: toCssSize(width), ...style }}\n        {...rest}\n    >\n        {children}\n    </aside>\n    </PagePanel>;\n    return resizable ? <ResizableAside panel={panel} resizeVariant={resizeVariant} minWidth={minWidth} maxWidth={maxWidth} onWidthChange={onWidthChange} /> : panel;\n};\n\nexport type PageFooterProps = React.HTMLAttributes<HTMLElement> & PagePanelProps & PageAutoHideProps & {\n    left?: React.ReactNode;\n    center?: React.ReactNode;\n    right?: React.ReactNode;\n};\n\nconst PageFooter = ({\n    open, mode, animated, duration, autoHide, className, children, left, center, right, ...rest\n}: PageFooterProps) => (\n    <PagePanel edge=\"footer\" autoHide={autoHide} open={open} mode={mode} animated={animated} duration={duration}>\n        <footer className={cn('dishui-page-footer', className)} {...rest}>\n            {children !== undefined ? children : (\n                <div className=\"dishui-page-header-layout\" data-centered={center != null && center !== false || undefined}>\n                    {left != null && <div className=\"dishui-page-header-left\">{left}</div>}\n                    {center != null && <div className=\"dishui-page-header-center\">{center}</div>}\n                    {right != null && <div className=\"dishui-page-header-right\">{right}</div>}\n                </div>\n            )}\n        </footer>\n    </PagePanel>\n);\n\nconst PageMain = ({ scroll = false, className = '', children, ...rest }: PageMainProps) => (\n    <main\n        className={cn(\n            'dishui-page-main min-w-0 flex-1',\n            scroll && 'min-h-0 overflow-y-auto',\n            className,\n        )}\n        {...rest}\n    >\n        {children}\n    </main>\n);\n\ninterface PageCompound extends React.FC<PageProps> {\n    Header: typeof PageHeaderSlot;\n    Footer: typeof PageFooter;\n        Float: typeof PageFloat;\n    Body: typeof PageBody;\n    Left: typeof PageLeft;\n    Right: typeof PageRight;\n    Main: typeof PageMain;\n}\n\nconst PageWithCompounds = Page as PageCompound;\nPageWithCompounds.Header = PageHeaderSlot;\nPageWithCompounds.Footer = PageFooter;\nPageWithCompounds.Float = PageFloat;\nPageWithCompounds.Body = PageBody;\nPageWithCompounds.Left = PageLeft;\nPageWithCompounds.Right = PageRight;\nPageWithCompounds.Main = PageMain;\n\nexport { PageBody, PageLeft, PageRight, PageMain, PageFooter, PageFloat };\nexport default PageWithCompounds;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Page/index.tsx"],"sourcesContent":["import React from 'react';\nimport PageFloat from './Float';\nimport ResizableAside, { type PageResizeProps } from './resize';\nexport type { PageFloatProps } from './Float';\nimport PageHeader, { PageHeaderProps } from '../PageHeader';\nimport { cn } from '../../utils/cn';\nimport PagePanel, { type PagePanelProps, type PageAutoHideProps } from '../PagePanel';\n\nexport type { PagePanelProps } from '../PagePanel';\n\n/**\n * Page 布局脚手架\n * ----------------------------------------------------------------------------\n * 为管理后台等页面提供统一的「页头 + 主体 + 左右侧栏」骨架，配合 PageHeader、\n * Card.Info 等组件使用。所有区域都是可选的，可按需组合。\n *\n * 典型结构：\n *   <Page fullHeight>\n *     <Page.Header title=\"用户管理\" actions={<Button>新建</Button>} />\n *     <Page.Body scroll>\n *       <Page.Left width={240}>筛选器</Page.Left>\n *       <Page.Main scroll>主内容</Page.Main>\n *       <Page.Right width={320}>详情</Page.Right>\n *     </Page.Body>\n *   </Page>\n */\n\nexport type PageProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 是否占满父容器高度并启用内部滚动（主体区滚动，页头固定） */\n    fullHeight?: boolean;\n};\n\nexport type PageBodyProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 主体内的间距（left/main/right 之间），数字按 px 处理，默认 16 */\n    gap?: number | string;\n    /** 是否让主体区在剩余空间内滚动（配合 Page fullHeight 使用） */\n    scroll?: boolean;\n};\n\nexport type PageHeaderLevel = PageHeaderProps & { key: React.Key };\nexport type PageHeaderSlotProps = PageHeaderProps & {\n    /** 按顺序从上到下渲染；每级覆盖公共属性。空数组不渲染页头。 */\n    levels?: readonly PageHeaderLevel[];\n};\n\nexport type PageAsideLevel = PageAsideProps & { key: React.Key };\nexport type PageAsideSlotProps = PageAsideProps & {\n    /** 按 DOM 顺序从左到右渲染（小屏纵向堆叠）；每级覆盖公共属性。 */\n    levels?: readonly PageAsideLevel[];\n};\n\nexport type PageAsideProps = React.HTMLAttributes<HTMLDivElement> & PagePanelProps & PageResizeProps & {\n    /** 侧栏宽度，数字按 px 处理；Left 默认 260，Right 默认 320。外部变化会同步到拖动宽度。 */\n    width?: number | string;\n    /** 是否显示分隔边框 */\n    bordered?: boolean;\n    /** 侧栏内部纵向滚动自适应 */\n    scroll?: boolean;\n    /** 小屏（<768px）下是否隐藏（侧栏通常在移动端折叠） */\n    hideOnMobile?: boolean;\n};\n\nexport type PageMainProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** 主内容区是否在剩余空间内纵向滚动 */\n    scroll?: boolean;\n};\n\nconst toCssSize = (value: number | string | undefined): string | undefined =>\n    typeof value === 'number' ? `${value}px` : value;\n\nconst Page = ({ fullHeight = false, className = '', children, ...rest }: PageProps) => (\n    <div\n        className={cn(\n            'dishui-page flex w-full min-w-0 flex-col text-body leading-5 text-base-content',\n            fullHeight && 'h-full min-h-0',\n            className,\n        )}\n        {...rest}\n    >\n        {children}\n    </div>\n);\n\n/** 不增加包装节点，保持 Page / Body 的布局、间距及面板开关语义。 */\nconst PageHeaderSlot = ({ levels, ...props }: PageHeaderSlotProps) => levels === undefined\n    ? <PageHeader {...props} />\n    : <>{levels.map(({ key, ...level }) => <PageHeader {...props} {...level} key={key} />)}</>;\n\nconst PageBody = ({ gap = 16, scroll = false, className = '', style, children, ...rest }: PageBodyProps) => (\n    <div\n        className={cn(\n            'dishui-page-body flex w-full flex-col md:flex-row',\n            scroll && 'min-h-0 flex-1',\n            className,\n        )}\n        style={{ ...style, gap: 0, ['--dishui-page-gap' as string]: toCssSize(style?.gap ?? gap) }}\n        {...rest}\n    >\n        {children}\n    </div>\n);\n\nconst PageLeft = ({ levels, ...props }: PageAsideSlotProps): React.ReactElement => levels === undefined\n    ? PageLeftPanel(props)\n    : <>{levels.map(({ key, ...level }) => <PageLeftPanel {...props} {...level} key={key} />)}</>;\n\nconst PageLeftPanel = ({\n    resizeVariant = 'pill', resizable = false, minWidth = 160, maxWidth = 600, onWidthChange,\n    open, mode, animated, duration,\n    width = 260,\n    bordered = true,\n    scroll = true,\n    hideOnMobile = false,\n    className = '',\n    style,\n    children,\n    ...rest\n}: PageAsideProps) => {\n    const panel = <PagePanel edge=\"left\" width={style?.width ?? width} hideOnMobile={hideOnMobile} open={open} mode={mode} animated={animated} duration={duration}>\n    <aside\n        className={cn(\n            'dishui-page-left w-full shrink-0 md:w-(--dishui-aside-w)',\n            bordered && 'md:border-r md:border-base-300 md:pr-4',\n            scroll && 'md:min-h-0 md:overflow-y-auto',\n            hideOnMobile && 'hidden md:block',\n            className,\n        )}\n        style={{ ['--dishui-aside-w' as string]: toCssSize(width), ...style }}\n        {...rest}\n    >\n        {children}\n    </aside>\n    </PagePanel>;\n    return resizable ? <ResizableAside panel={panel} resizeVariant={resizeVariant} minWidth={minWidth} maxWidth={maxWidth} onWidthChange={onWidthChange} /> : panel;\n};\n\nconst PageRight = ({ levels, ...props }: PageAsideSlotProps): React.ReactElement => levels === undefined\n    ? PageRightPanel(props)\n    : <>{levels.map(({ key, ...level }) => <PageRightPanel {...props} {...level} key={key} />)}</>;\n\nconst PageRightPanel = ({\n    resizeVariant = 'pill', resizable = false, minWidth = 160, maxWidth = 600, onWidthChange,\n    open, mode, animated, duration,\n    width = 320,\n    bordered = true,\n    scroll = true,\n    hideOnMobile = false,\n    className = '',\n    style,\n    children,\n    ...rest\n}: PageAsideProps) => {\n    const panel = <PagePanel edge=\"right\" width={style?.width ?? width} hideOnMobile={hideOnMobile} open={open} mode={mode} animated={animated} duration={duration}>\n    <aside\n        className={cn(\n            'dishui-page-right w-full shrink-0 md:w-(--dishui-aside-w)',\n            bordered && 'md:border-l md:border-base-300 md:pl-4',\n            scroll && 'md:min-h-0 md:overflow-y-auto',\n            hideOnMobile && 'hidden md:block',\n            className,\n        )}\n        style={{ ['--dishui-aside-w' as string]: toCssSize(width), ...style }}\n        {...rest}\n    >\n        {children}\n    </aside>\n    </PagePanel>;\n    return resizable ? <ResizableAside panel={panel} resizeVariant={resizeVariant} minWidth={minWidth} maxWidth={maxWidth} onWidthChange={onWidthChange} /> : panel;\n};\n\nexport type PageFooterProps = React.HTMLAttributes<HTMLElement> & PagePanelProps & PageAutoHideProps & {\n    left?: React.ReactNode;\n    center?: React.ReactNode;\n    right?: React.ReactNode;\n};\n\nconst PageFooter = ({\n    open, mode, animated, duration, autoHide, className, children, left, center, right, ...rest\n}: PageFooterProps) => (\n    <PagePanel edge=\"footer\" autoHide={autoHide} open={open} mode={mode} animated={animated} duration={duration}>\n        <footer className={cn('dishui-page-footer', className)} {...rest}>\n            {children !== undefined ? children : (\n                <div className=\"dishui-page-header-layout\" data-centered={center != null && center !== false || undefined}>\n                    {left != null && <div className=\"dishui-page-header-left\">{left}</div>}\n                    {center != null && <div className=\"dishui-page-header-center\">{center}</div>}\n                    {right != null && <div className=\"dishui-page-header-right\">{right}</div>}\n                </div>\n            )}\n        </footer>\n    </PagePanel>\n);\n\nconst PageMain = ({ scroll = false, className = '', children, ...rest }: PageMainProps) => (\n    <main\n        className={cn(\n            'dishui-page-main min-w-0 flex-1',\n            scroll && 'min-h-0 overflow-y-auto',\n            className,\n        )}\n        {...rest}\n    >\n        {children}\n    </main>\n);\n\ninterface PageCompound extends React.FC<PageProps> {\n    Header: typeof PageHeaderSlot;\n    Footer: typeof PageFooter;\n        Float: typeof PageFloat;\n    Body: typeof PageBody;\n    Left: typeof PageLeft;\n    Right: typeof PageRight;\n    Main: typeof PageMain;\n}\n\nconst PageWithCompounds = Page as PageCompound;\nPageWithCompounds.Header = PageHeaderSlot;\nPageWithCompounds.Footer = PageFooter;\nPageWithCompounds.Float = PageFloat;\nPageWithCompounds.Body = PageBody;\nPageWithCompounds.Left = PageLeft;\nPageWithCompounds.Right = PageRight;\nPageWithCompounds.Main = PageMain;\n\nexport { PageBody, PageLeft, PageRight, PageMain, PageFooter, PageFloat };\nexport default PageWithCompounds;\n"],"mappings":"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"}