dishui 0.0.81 → 0.0.83

package/dist/components/Demo/index.js

@@ -1,35 +1,41 @@
-import { useCopyToClipboard as e } from "../../hooks/useCopyToClipboard.js";
-import { useId as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Prism as a } from "react-syntax-highlighter";
-import { coldarkDark as o } from "react-syntax-highlighter/dist/esm/styles/prism";
+import e from "../Button/index.js";
+import t from "../Text/index.js";
+import { useCopyToClipboard as n } from "../../hooks/useCopyToClipboard.js";
+import { formatDemoSource as r } from "./source.js";
+import { useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Prism as u } from "react-syntax-highlighter";
+import { coldarkDark as d } from "react-syntax-highlighter/dist/esm/styles/prism";
 //#region src/components/Demo/index.tsx
-var s = ({ children: t, language: n = "jsx" }) => {
-	let { copied: s, error: c, copy: l } = e();
-	return /* @__PURE__ */ i("div", {
+var f = ({ children: r, language: i = "jsx" }) => {
+	let { copied: a, error: o, copy: s } = n();
+	return /* @__PURE__ */ l("div", {
 		className: "min-w-0 overflow-hidden rounded-lg border border-base-300",
-		children: [/* @__PURE__ */ i("div", {
+		children: [/* @__PURE__ */ l("div", {
 			className: "flex items-center justify-between gap-3 bg-base-200 px-4 py-2",
-			children: [/* @__PURE__ */ r("span", {
-				className: "font-mono text-xs opacity-70",
-				children: n
-			}), /* @__PURE__ */ i("div", {
+			children: [/* @__PURE__ */ c(t, {
+				size: "xs",
+				mono: !0,
+				color: "secondary",
+				children: i
+			}), /* @__PURE__ */ l("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ r("span", {
+				children: [/* @__PURE__ */ c(t, {
 					role: "status",
-					className: "text-xs",
-					children: c ? "Copy failed / 复制失败，请手动复制" : s ? "Copied / 已复制" : ""
-				}), /* @__PURE__ */ r("button", {
+					size: "xs",
+					children: o ? "Copy failed / 复制失败，请手动复制" : a ? "Copied / 已复制" : ""
+				}), /* @__PURE__ */ c(e, {
 					type: "button",
-					className: "btn btn-ghost btn-xs",
-					onClick: () => void l(t),
+					variant: "ghost",
+					size: "xs",
+					onClick: () => void s(r),
 					"aria-label": "Copy source code / 复制源代码",
 					children: "Copy / 复制"
 				})]
 			})]
-		}), /* @__PURE__ */ r(a, {
-			language: n,
-			style: o,
+		}), /* @__PURE__ */ c(u, {
+			language: i,
+			style: d,
 			tabIndex: 0,
 			"aria-label": "Source code / 源代码",
 			customStyle: {
@@ -41,59 +47,128 @@ var s = ({ children: t, language: n = "jsx" }) => {
 				maxHeight: "32rem",
 				overflow: "auto"
 			},
-			children: t
+			children: r
 		})]
 	});
-}, c = ({ title: e, description: a, children: o, code: c, language: l = "jsx" }) => {
-	let [u, d] = n(!1), f = t(), p = `${f}-title`, m = `${f}-code`;
-	return /* @__PURE__ */ i("section", {
-		"aria-labelledby": p,
-		className: "mb-8 min-w-0 rounded-xl border border-base-300 bg-base-100 shadow-sm",
+}, p = ({ title: n, description: u, children: d, code: p, language: m = "jsx", source: h, sourceContext: g }) => {
+	let [_, v] = s(!1), [y, b] = s(0), [x, S] = s(null), C = o(null);
+	i(() => {
+		if (!_ || typeof h != "function") return;
+		let e = !0;
+		return (C.current?.loader !== h || C.current.attempt !== y) && (C.current = {
+			loader: h,
+			attempt: y,
+			promise: Promise.resolve().then(() => h())
+		}), C.current.promise.then((t) => {
+			e && S({
+				loader: h,
+				attempt: y,
+				status: "success",
+				data: t
+			});
+		}, () => {
+			e && S({
+				loader: h,
+				attempt: y,
+				status: "error"
+			});
+		}), () => {
+			e = !1;
+		};
+	}, [
+		h,
+		_,
+		y
+	]);
+	let w = typeof h == "function" && x?.loader === h && x.attempt === y ? x : null, T = typeof h == "function" ? w?.status === "success" ? w.data : void 0 : h, E = typeof h == "function" && !w, D = a(), O = `${D}-title`, k = `${D}-code`;
+	return /* @__PURE__ */ l("section", {
+		"aria-labelledby": O,
+		className: "dishui-demo mb-4 min-w-0 rounded-lg border border-hairline bg-page",
 		children: [
-			/* @__PURE__ */ i("div", {
-				className: "border-b border-base-300 px-5 py-4",
-				children: [/* @__PURE__ */ r("h3", {
-					id: p,
-					className: "text-lg font-semibold",
-					children: e
-				}), a && /* @__PURE__ */ r("p", {
-					className: "mt-1 text-sm leading-relaxed opacity-70",
-					children: a
+			/* @__PURE__ */ l("div", {
+				className: "border-b border-hairline bg-subtle px-4 py-3 rounded-t-lg",
+				children: [/* @__PURE__ */ c(t, {
+					as: "h3",
+					id: O,
+					size: "sm",
+					weight: "semibold",
+					children: n
+				}), u && /* @__PURE__ */ c(t, {
+					as: "p",
+					size: "sm",
+					color: "secondary",
+					className: "mt-1 leading-relaxed",
+					children: u
 				})]
 			}),
-			/* @__PURE__ */ r("div", {
-				className: "flex min-w-0 flex-wrap items-center gap-4 px-5 py-6",
-				children: o
+			/* @__PURE__ */ c("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-4 p-4",
+				children: d
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ l("div", {
 				className: "border-t border-base-300",
-				children: [/* @__PURE__ */ i("button", {
+				children: [/* @__PURE__ */ l(e, {
 					type: "button",
-					className: "btn btn-ghost flex w-full items-center justify-between rounded-none rounded-b-xl px-5 text-sm font-medium",
-					"aria-expanded": u,
-					"aria-controls": m,
-					onClick: () => d((e) => !e),
-					children: [/* @__PURE__ */ r("span", { children: "Source Code / 源代码" }), /* @__PURE__ */ r("svg", {
+					variant: "ghost",
+					className: "flex w-full items-center justify-between rounded-none rounded-b-lg px-4 text-xs font-medium",
+					"aria-expanded": _,
+					"aria-controls": k,
+					onClick: () => v((e) => !e),
+					children: [/* @__PURE__ */ c(t, {
+						size: "xs",
+						weight: "medium",
+						color: "inherit",
+						children: "Source Code / 源代码"
+					}), /* @__PURE__ */ c("svg", {
 						"aria-hidden": "true",
 						xmlns: "http://www.w3.org/2000/svg",
-						className: `h-4 w-4 transition-transform motion-reduce:transition-none ${u ? "rotate-180" : ""}`,
+						className: `h-4 w-4 transition-transform motion-reduce:transition-none ${_ ? "rotate-180" : ""}`,
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ r("path", {
+						children: /* @__PURE__ */ c("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: "2",
 							d: "M19 9l-7 7-7-7"
 						})
 					})]
-				}), /* @__PURE__ */ r("div", {
-					id: m,
-					hidden: !u,
+				}), /* @__PURE__ */ c("div", {
+					id: k,
+					hidden: !_,
 					className: "min-w-0 border-t border-base-300 p-4",
-					children: u && /* @__PURE__ */ r(s, {
-						language: l,
-						children: c
+					children: _ && /* @__PURE__ */ c("div", {
+						className: "min-w-0 space-y-3",
+						children: /* @__PURE__ */ c("div", {
+							className: "min-w-0",
+							"aria-busy": E,
+							children: E ? /* @__PURE__ */ c(t, {
+								as: "p",
+								role: "status",
+								size: "sm",
+								children: "Loading source code… / 正在加载源码…"
+							}) : w?.status === "error" ? /* @__PURE__ */ l("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ c(t, {
+									as: "p",
+									role: "alert",
+									size: "sm",
+									children: "Could not load source code. Please retry. / 源码加载失败，请重试。"
+								}), /* @__PURE__ */ c(e, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									onClick: () => b((e) => e + 1),
+									children: "Retry loading source / 重新加载源码"
+								})]
+							}) : T ? /* @__PURE__ */ c(f, {
+								language: "tsx",
+								children: r(T, g)
+							}) : h ? null : /* @__PURE__ */ c(f, {
+								language: m,
+								children: p
+							})
+						})
 					})
 				})]
 			})
@@ -101,6 +176,6 @@ var s = ({ children: t, language: n = "jsx" }) => {
 	});
 };
 //#endregion
-export { c as default };
+export { p as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Demo/index.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useCopyToClipboard } from '../../hooks/useCopyToClipboard';\n\nexport interface CodeBlockProps {\n  children: string;\n  language?: string;\n}\n\nconst CodeBlock: React.FC<CodeBlockProps> = ({ children, language = 'jsx' }) => {\n  const { copied, error, copy } = useCopyToClipboard();\n\n  return (\n    <div className=\"min-w-0 overflow-hidden rounded-lg border border-base-300\">\n      <div className=\"flex items-center justify-between gap-3 bg-base-200 px-4 py-2\">\n        <span className=\"font-mono text-xs opacity-70\">{language}</span>\n        <div className=\"flex items-center gap-2\">\n          <span role=\"status\" className=\"text-xs\">\n            {error ? 'Copy failed / 复制失败，请手动复制' : copied ? 'Copied / 已复制' : ''}\n          </span>\n          <button\n            type=\"button\"\n            className=\"btn btn-ghost btn-xs\"\n            onClick={() => void copy(children)}\n            aria-label=\"Copy source code / 复制源代码\"\n          >\n            Copy / 复制\n          </button>\n        </div>\n      </div>\n      <SyntaxHighlighter\n        language={language}\n        style={coldarkDark}\n        tabIndex={0}\n        aria-label=\"Source code / 源代码\"\n        customStyle={{\n          margin: 0,\n          borderRadius: 0,\n          fontSize: '0.8125rem',\n          lineHeight: 1.7,\n          padding: '1rem',\n          maxHeight: '32rem',\n          overflow: 'auto',\n        }}\n      >\n        {children}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n\nexport interface DemoProps {\n  title: string;\n  description?: string;\n  children: React.ReactNode;\n  code: string;\n  language?: string;\n}\n\nconst Demo: React.FC<DemoProps> = ({\n  title,\n  description,\n  children,\n  code,\n  language = 'jsx',\n}) => {\n  const [showCode, setShowCode] = useState(false);\n  const id = useId();\n  const titleId = `${id}-title`;\n  const codeId = `${id}-code`;\n\n  return (\n    <section aria-labelledby={titleId} className=\"mb-8 min-w-0 rounded-xl border border-base-300 bg-base-100 shadow-sm\">\n      <div className=\"border-b border-base-300 px-5 py-4\">\n        <h3 id={titleId} className=\"text-lg font-semibold\">{title}</h3>\n        {description && <p className=\"mt-1 text-sm leading-relaxed opacity-70\">{description}</p>}\n      </div>\n\n      <div className=\"flex min-w-0 flex-wrap items-center gap-4 px-5 py-6\">\n        {children}\n      </div>\n\n      <div className=\"border-t border-base-300\">\n        <button\n          type=\"button\"\n          className=\"btn btn-ghost flex w-full items-center justify-between rounded-none rounded-b-xl px-5 text-sm font-medium\"\n          aria-expanded={showCode}\n          aria-controls={codeId}\n          onClick={() => setShowCode(value => !value)}\n        >\n          <span>Source Code / 源代码</span>\n          <svg\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={`h-4 w-4 transition-transform motion-reduce:transition-none ${showCode ? 'rotate-180' : ''}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M19 9l-7 7-7-7\" />\n          </svg>\n        </button>\n        <div id={codeId} hidden={!showCode} className=\"min-w-0 border-t border-base-300 p-4\">\n          {showCode && <CodeBlock language={language}>{code}</CodeBlock>}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Demo;\n"],"mappings":";;;;;;AAUA,IAAM,KAAuC,EAAE,aAAU,cAAW,YAAY;CAC9E,IAAM,EAAE,WAAQ,UAAO,YAAS,EAAmB;CAEnD,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAA;GAAe,CAAA,GAC/D,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KAAM,MAAK;KAAS,WAAU;KAC3B,UAAA,IAAQ,6BAA6B,IAAS,iBAAiB;IAC5D,CAAA,GACN,kBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,eAAe,KAAK,EAAK,CAAQ;KACjC,cAAW;KACZ,UAAA;IAEO,CAAA,CACL;GACF,CAAA,CAAA;EACL,CAAA,GAAA,kBAAC,GAAD;GACY;GACV,OAAO;GACP,UAAU;GACV,cAAW;GACX,aAAa;IACX,QAAQ;IACR,cAAc;IACd,UAAU;IACV,YAAY;IACZ,SAAS;IACT,WAAW;IACX,UAAU;GACZ;GAEC;EACgB,CAAA,CAChB;;AAET,GAUM,KAA6B,EACjC,UACA,gBACA,aACA,SACA,cAAW,YACP;CACJ,IAAM,CAAC,GAAU,KAAe,EAAS,EAAK,GACxC,IAAK,EAAM,GACX,IAAU,GAAG,EAAG,SAChB,IAAS,GAAG,EAAG;CAErB,OACE,kBAAC,WAAD;EAAS,mBAAiB;EAAS,WAAU;EAA7C,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,MAAD;KAAI,IAAI;KAAS,WAAU;KAAyB,UAAA;IAAU,CAAA,GAC7D,KAAe,kBAAC,KAAD;KAAG,WAAU;KAA2C,UAAA;IAAe,CAAA,CACpF;;GAEL,kBAAC,OAAD;IAAK,WAAU;IACZ;GACE,CAAA;GAEL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,iBAAe;KACf,iBAAe;KACf,eAAe,GAAY,MAAS,CAAC,CAAK;KAL5C,UAAA,CAOE,kBAAC,QAAD,EAAA,UAAM,oBAAuB,CAAA,GAC7B,kBAAC,OAAD;MACE,eAAY;MACZ,OAAM;MACN,WAAW,8DAA8D,IAAW,eAAe;MACnG,MAAK;MACL,SAAQ;MACR,QAAO;MAEP,UAAA,kBAAC,QAAD;OAAM,eAAc;OAAQ,gBAAe;OAAQ,aAAY;OAAI,GAAE;MAAkB,CAAA;KACpF,CAAA,CACC;IACR,CAAA,GAAA,kBAAC,OAAD;KAAK,IAAI;KAAQ,QAAQ,CAAC;KAAU,WAAU;KAC3C,UAAA,KAAY,kBAAC,GAAD;MAAqB;MAAW,UAAA;KAAgB,CAAA;IAC1D,CAAA,CACF;;EACE;;AAEb"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Demo/index.tsx"],"sourcesContent":["import React, { useEffect, useId, useRef, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useCopyToClipboard } from '../../hooks/useCopyToClipboard';\nimport { formatDemoSource, type DemoSource } from './source';\nimport Button from '../Button';\nimport Text from '../Text';\n\nexport type { DemoSource } from './source';\n\nexport interface CodeBlockProps {\n  children: string;\n  language?: string;\n}\n\nconst CodeBlock: React.FC<CodeBlockProps> = ({ children, language = 'jsx' }) => {\n  const { copied, error, copy } = useCopyToClipboard();\n\n  return (\n    <div className=\"min-w-0 overflow-hidden rounded-lg border border-base-300\">\n      <div className=\"flex items-center justify-between gap-3 bg-base-200 px-4 py-2\">\n        <Text size=\"xs\" mono color=\"secondary\">{language}</Text>\n        <div className=\"flex items-center gap-2\">\n          <Text role=\"status\" size=\"xs\">\n            {error ? 'Copy failed / 复制失败，请手动复制' : copied ? 'Copied / 已复制' : ''}\n          </Text>\n          <Button\n            type=\"button\"\n            variant=\"ghost\" size=\"xs\"\n            onClick={() => void copy(children)}\n            aria-label=\"Copy source code / 复制源代码\"\n          >\n            Copy / 复制\n          </Button>\n        </div>\n      </div>\n      <SyntaxHighlighter\n        language={language}\n        style={coldarkDark}\n        tabIndex={0}\n        aria-label=\"Source code / 源代码\"\n        customStyle={{\n          margin: 0,\n          borderRadius: 0,\n          fontSize: '0.8125rem',\n          lineHeight: 1.7,\n          padding: '1rem',\n          maxHeight: '32rem',\n          overflow: 'auto',\n        }}\n      >\n        {children}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n\ntype DemoSourceLoader = () => Promise<DemoSource>;\n\ntype SourceLoadResult = {\n  loader: DemoSourceLoader;\n  attempt: number;\n} & ({ status: 'success'; data: DemoSource } | { status: 'error' });\n\nexport interface DemoProps {\n  title: string;\n  description?: string;\n  children: React.ReactNode;\n  code: string;\n  language?: string;\n  source?: DemoSource | DemoSourceLoader;\n  sourceContext?: Record<string, unknown>;\n}\n\nconst Demo: React.FC<DemoProps> = ({\n  title,\n  description,\n  children,\n  code,\n  language = 'jsx',\n  source,\n  sourceContext,\n}) => {\n  const [showCode, setShowCode] = useState(false);\n  const [attempt, setAttempt] = useState(0);\n  const [loadResult, setLoadResult] = useState<SourceLoadResult | null>(null);\n  const request = useRef<{\n    loader: DemoSourceLoader;\n    attempt: number;\n    promise: Promise<DemoSource>;\n  } | null>(null);\n\n  useEffect(() => {\n    if (!showCode || typeof source !== 'function') return;\n\n    let active = true;\n    // Reuse the request across collapse/reopen and StrictMode effect replays.\n    if (request.current?.loader !== source || request.current.attempt !== attempt) {\n      request.current = {\n        loader: source,\n        attempt,\n        promise: Promise.resolve().then(() => source()),\n      };\n    }\n    void request.current.promise.then(\n      data => {\n        if (active) setLoadResult({ loader: source, attempt, status: 'success', data });\n      },\n      () => {\n        if (active) setLoadResult({ loader: source, attempt, status: 'error' });\n      },\n    );\n    return () => { active = false; };\n  }, [source, showCode, attempt]);\n\n  // Match the loader before rendering so switching props cannot flash stale source.\n  const currentResult = typeof source === 'function'\n    && loadResult?.loader === source && loadResult.attempt === attempt\n    ? loadResult : null;\n  const resolvedSource = typeof source === 'function'\n    ? currentResult?.status === 'success' ? currentResult.data : undefined\n    : source;\n  const loading = typeof source === 'function' && !currentResult;\n  const id = useId();\n  const titleId = `${id}-title`;\n  const codeId = `${id}-code`;\n\n  return (\n    <section aria-labelledby={titleId} className=\"dishui-demo mb-4 min-w-0 rounded-lg border border-hairline bg-page\">\n      <div className=\"border-b border-hairline bg-subtle px-4 py-3 rounded-t-lg\">\n        <Text as=\"h3\" id={titleId} size=\"sm\" weight=\"semibold\">{title}</Text>\n        {description && <Text as=\"p\" size=\"sm\" color=\"secondary\" className=\"mt-1 leading-relaxed\">{description}</Text>}\n      </div>\n\n      <div className=\"flex min-w-0 flex-wrap items-center gap-4 p-4\">\n        {children}\n      </div>\n\n      <div className=\"border-t border-base-300\">\n        <Button\n          type=\"button\" variant=\"ghost\"\n          className=\"flex w-full items-center justify-between rounded-none rounded-b-lg px-4 text-xs font-medium\"\n          aria-expanded={showCode}\n          aria-controls={codeId}\n          onClick={() => setShowCode(value => !value)}\n        >\n          <Text size=\"xs\" weight=\"medium\" color=\"inherit\">Source Code / 源代码</Text>\n          <svg\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={`h-4 w-4 transition-transform motion-reduce:transition-none ${showCode ? 'rotate-180' : ''}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M19 9l-7 7-7-7\" />\n          </svg>\n        </Button>\n        <div id={codeId} hidden={!showCode} className=\"min-w-0 border-t border-base-300 p-4\">\n          {showCode && (\n            <div className=\"min-w-0 space-y-3\">\n              <div className=\"min-w-0\" aria-busy={loading}>\n                {loading ? (\n                  <Text as=\"p\" role=\"status\" size=\"sm\">Loading source code… / 正在加载源码…</Text>\n                ) : currentResult?.status === 'error' ? (\n                  <div className=\"space-y-2\">\n                    <Text as=\"p\" role=\"alert\" size=\"sm\">\n                      Could not load source code. Please retry. / 源码加载失败，请重试。\n                    </Text>\n                    <Button\n                      type=\"button\" variant=\"ghost\" size=\"sm\"\n                      onClick={() => setAttempt(value => value + 1)}\n                    >\n                      Retry loading source / 重新加载源码\n                    </Button>\n                  </div>\n                ) : resolvedSource ? (\n                  <CodeBlock language=\"tsx\">\n                    {formatDemoSource(resolvedSource, sourceContext)}\n                  </CodeBlock>\n                ) : !source ? (\n                  <CodeBlock language={language}>{code}</CodeBlock>\n                ) : null}\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Demo;\n"],"mappings":"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"}

package/dist/components/Demo/source.d.ts

@@ -0,0 +1,9 @@
+export interface DemoSource {
+    imports: string;
+    setup: string;
+    preview: string;
+    context: string[];
+    path?: string;
+    line?: number;
+}
+export declare function formatDemoSource(source: DemoSource, sourceContext?: Record<string, unknown>): string;

package/dist/components/Demo/source.js

@@ -0,0 +1,32 @@
+//#region src/components/Demo/source.ts
+function e(e, t = !1) {
+	let n = e.replace(/\r\n/g, "\n").split("\n");
+	for (; n.length && !n[0].trim();) n.shift();
+	for (; n.length && !n[n.length - 1].trim();) n.pop();
+	if (e.includes("`")) return n.join("\n");
+	let r = t && n[0]?.match(/^\S/) ? n.slice(1) : n, i = Math.min(...r.filter((e) => e.trim()).map((e) => e.match(/^[\t ]*/)?.[0].length ?? 0));
+	return n.map((e, n) => t && n === 0 && /^\S/.test(e) ? e : e.slice(i)).join("\n");
+}
+function t(t, n = {}) {
+	let r = [];
+	for (let e of new Set(t.context)) {
+		if (!Object.prototype.hasOwnProperty.call(n, e)) continue;
+		let t = n[e];
+		try {
+			let n = t === void 0 ? "undefined" : JSON.stringify(t, null, 2);
+			n !== void 0 && r.push(`const ${e} = ${n};`);
+		} catch {
+			continue;
+		}
+	}
+	return [
+		e(t.imports),
+		r.join("\n"),
+		e(t.setup),
+		e(t.preview, !0)
+	].filter(Boolean).join("\n\n");
+}
+//#endregion
+export { t as formatDemoSource };
+
+//# sourceMappingURL=source.js.map

package/dist/components/Demo/source.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"source.js","names":[],"sources":["../../../src/components/Demo/source.ts"],"sourcesContent":["export interface DemoSource {\n  imports: string;\n  setup: string;\n  preview: string;\n  context: string[];\n  path?: string;\n  line?: number;\n}\n\nfunction normalizeSection(code: string, trimmedFirstLine = false): string {\n  const lines = code.replace(/\\r\\n/g, '\\n').split('\\n');\n  while (lines.length && !lines[0].trim()) lines.shift();\n  while (lines.length && !lines[lines.length - 1].trim()) lines.pop();\n  // The extracted JSX starts at its first token; subsequent lines still carry the\n  // page's indentation. Do not reindent template literals, whose spaces are data.\n  if (code.includes('`')) return lines.join('\\n');\n  const indentedLines = trimmedFirstLine && lines[0]?.match(/^\\S/) ? lines.slice(1) : lines;\n  const indentation = Math.min(...indentedLines.filter(line => line.trim()).map(line => line.match(/^[\\t ]*/)?.[0].length ?? 0));\n  return lines.map((line, index) => trimmedFirstLine && index === 0 && /^\\S/.test(line) ? line : line.slice(indentation)).join('\\n');\n}\n\nexport function formatDemoSource(\n  source: DemoSource,\n  sourceContext: Record<string, unknown> = {},\n): string {\n  const declarations: string[] = [];\n  for (const name of new Set(source.context)) {\n    if (!Object.prototype.hasOwnProperty.call(sourceContext, name)) continue;\n    const value = sourceContext[name];\n    // Runtime functions and circular values cannot be represented as JSON source.\n    try {\n      const literal = value === undefined ? 'undefined' : JSON.stringify(value, null, 2);\n      if (literal !== undefined) declarations.push(`const ${name} = ${literal};`);\n    } catch {\n      continue;\n    }\n  }\n\n  return [\n    normalizeSection(source.imports),\n    declarations.join('\\n'),\n    normalizeSection(source.setup),\n    normalizeSection(source.preview, true),\n  ].filter(Boolean).join('\\n\\n');\n}\n"],"mappings":";AASA,SAAS,EAAiB,GAAc,IAAmB,IAAe;CACxE,IAAM,IAAQ,EAAK,QAAQ,SAAS,IAAI,CAAC,CAAC,MAAM,IAAI;CACpD,OAAO,EAAM,UAAU,CAAC,EAAM,EAAE,CAAC,KAAK,IAAG,EAAM,MAAM;CACrD,OAAO,EAAM,UAAU,CAAC,EAAM,EAAM,SAAS,EAAE,CAAC,KAAK,IAAG,EAAM,IAAI;CAGlE,IAAI,EAAK,SAAS,GAAG,GAAG,OAAO,EAAM,KAAK,IAAI;CAC9C,IAAM,IAAgB,KAAoB,EAAM,EAAE,EAAE,MAAM,KAAK,IAAI,EAAM,MAAM,CAAC,IAAI,GAC9E,IAAc,KAAK,IAAI,GAAG,EAAc,QAAO,MAAQ,EAAK,KAAK,CAAC,CAAC,CAAC,KAAI,MAAQ,EAAK,MAAM,SAAS,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;CAC7H,OAAO,EAAM,KAAK,GAAM,MAAU,KAAoB,MAAU,KAAK,MAAM,KAAK,CAAI,IAAI,IAAO,EAAK,MAAM,CAAW,CAAC,CAAC,CAAC,KAAK,IAAI;AACnI;AAEA,SAAgB,EACd,GACA,IAAyC,CAAC,GAClC;CACR,IAAM,IAAyB,CAAC;CAChC,KAAK,IAAM,KAAQ,IAAI,IAAI,EAAO,OAAO,GAAG;EAC1C,IAAI,CAAC,OAAO,UAAU,eAAe,KAAK,GAAe,CAAI,GAAG;EAChE,IAAM,IAAQ,EAAc;EAE5B,IAAI;GACF,IAAM,IAAU,MAAU,KAAA,IAAY,cAAc,KAAK,UAAU,GAAO,MAAM,CAAC;GACjF,AAAI,MAAY,KAAA,KAAW,EAAa,KAAK,SAAS,EAAK,KAAK,EAAQ,EAAE;EAC5E,QAAQ;GACN;EACF;CACF;CAEA,OAAO;EACL,EAAiB,EAAO,OAAO;EAC/B,EAAa,KAAK,IAAI;EACtB,EAAiB,EAAO,KAAK;EAC7B,EAAiB,EAAO,SAAS,EAAI;CACvC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,MAAM;AAC/B"}

package/dist/components/EmptyState/index.js

@@ -2,18 +2,18 @@ import "react";
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 //#region src/components/EmptyState/index.tsx
 var n = ({ icon: n, title: r, description: i, action: a, fill: o = !0, className: s = "" }) => /* @__PURE__ */ t("div", {
-	className: `flex flex-col items-center justify-center rounded-xl border border-dashed border-base-300 bg-base-200/50 py-16 text-center ${o ? "h-full w-full" : ""} ${s}`.trim(),
+	className: `dishui-empty-state flex min-w-0 flex-col items-center justify-center rounded-lg border border-dashed border-base-300 bg-base-100 px-6 py-12 text-center text-body leading-5 ${o ? "h-full w-full" : ""} ${s}`.trim(),
 	children: [
 		n && /* @__PURE__ */ e("span", {
-			className: "mb-3 flex size-12 items-center justify-center rounded-full bg-base-content/5 text-base-content/40 [&>svg]:h-6 [&>svg]:w-6",
+			className: "mb-3 flex size-10 items-center justify-center rounded-lg bg-base-200 text-base-content/70 [&>svg]:h-5 [&>svg]:w-5",
 			children: n
 		}),
 		/* @__PURE__ */ e("p", {
-			className: "text-sm font-medium text-base-content/80",
+			className: "max-w-full break-words text-body font-medium text-base-content",
 			children: r
 		}),
 		i && /* @__PURE__ */ e("p", {
-			className: "mt-1 max-w-sm text-xs text-base-content/50",
+			className: "mt-1 max-w-sm break-words text-body-sm leading-5 text-base-content/70",
 			children: i
 		}),
 		a && /* @__PURE__ */ e("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["import React from 'react';\n\nexport type EmptyStateProps = {\n    /** 主图标（通常为 lucide 图标） */\n    icon?: React.ReactNode;\n    /** 主标题 */\n    title: React.ReactNode;\n    /** 补充说明 */\n    description?: React.ReactNode;\n    /** 底部操作（按钮等） */\n    action?: React.ReactNode;\n    /** 是否默认填满所在区域（宽高 100%，内容居中）；默认 true */\n    fill?: boolean;\n    className?: string;\n};\n\n/**\n * 空状态：虚线边框卡片 + 图标 + 标题 + 说明，统一列表为空时的展示。\n * 默认填满所在区域（fill），在固定高度的容器内自动垂直居中。\n */\nconst EmptyState = ({\n    icon,\n    title,\n    description,\n    action,\n    fill = true,\n    className = '',\n}: EmptyStateProps) => {\n    return (\n        <div\n            className={`flex flex-col items-center justify-center rounded-xl border border-dashed border-base-300 bg-base-200/50 py-16 text-center ${fill ? 'h-full w-full' : ''} ${className}`.trim()}\n        >\n            {icon && (\n                <span className=\"mb-3 flex size-12 items-center justify-center rounded-full bg-base-content/5 text-base-content/40 [&>svg]:h-6 [&>svg]:w-6\">\n                    {icon}\n                </span>\n            )}\n            <p className=\"text-sm font-medium text-base-content/80\">{title}</p>\n            {description && (\n                <p className=\"mt-1 max-w-sm text-xs text-base-content/50\">{description}</p>\n            )}\n            {action && <div className=\"mt-4\">{action}</div>}\n        </div>\n    );\n};\n\nexport default EmptyState;\n"],"mappings":";;;AAoBA,IAAM,KAAc,EAChB,SACA,UACA,gBACA,WACA,UAAO,IACP,eAAY,SAGR,kBAAC,OAAD;CACI,WAAW,8HAA8H,IAAO,kBAAkB,GAAG,GAAG,IAAY,KAAK;CAD7L,UAAA;EAGK,KACG,kBAAC,QAAD;GAAM,WAAU;GACX,UAAA;EACC,CAAA;EAEV,kBAAC,KAAD;GAAG,WAAU;GAA4C,UAAA;EAAS,CAAA;EACjE,KACG,kBAAC,KAAD;GAAG,WAAU;GAA8C,UAAA;EAAe,CAAA;EAE7E,KAAU,kBAAC,OAAD;GAAK,WAAU;GAAQ,UAAA;EAAY,CAAA;CAC7C"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["import React from 'react';\n\nexport type EmptyStateProps = {\n    /** 主图标（通常为 lucide 图标） */\n    icon?: React.ReactNode;\n    /** 主标题 */\n    title: React.ReactNode;\n    /** 补充说明 */\n    description?: React.ReactNode;\n    /** 底部操作（按钮等） */\n    action?: React.ReactNode;\n    /** 是否默认填满所在区域（宽高 100%，内容居中）；默认 true */\n    fill?: boolean;\n    className?: string;\n};\n\n/**\n * 空状态：虚线边框卡片 + 图标 + 标题 + 说明，统一列表为空时的展示。\n * 默认填满所在区域（fill），在固定高度的容器内自动垂直居中。\n */\nconst EmptyState = ({\n    icon,\n    title,\n    description,\n    action,\n    fill = true,\n    className = '',\n}: EmptyStateProps) => {\n    return (\n        <div\n            className={`dishui-empty-state flex min-w-0 flex-col items-center justify-center rounded-lg border border-dashed border-base-300 bg-base-100 px-6 py-12 text-center text-body leading-5 ${fill ? 'h-full w-full' : ''} ${className}`.trim()}\n        >\n            {icon && (\n                <span className=\"mb-3 flex size-10 items-center justify-center rounded-lg bg-base-200 text-base-content/70 [&>svg]:h-5 [&>svg]:w-5\">\n                    {icon}\n                </span>\n            )}\n            <p className=\"max-w-full break-words text-body font-medium text-base-content\">{title}</p>\n            {description && (\n                <p className=\"mt-1 max-w-sm break-words text-body-sm leading-5 text-base-content/70\">{description}</p>\n            )}\n            {action && <div className=\"mt-4\">{action}</div>}\n        </div>\n    );\n};\n\nexport default EmptyState;\n"],"mappings":";;;AAoBA,IAAM,KAAc,EAChB,SACA,UACA,gBACA,WACA,UAAO,IACP,eAAY,SAGR,kBAAC,OAAD;CACI,WAAW,+KAA+K,IAAO,kBAAkB,GAAG,GAAG,IAAY,KAAK;CAD9O,UAAA;EAGK,KACG,kBAAC,QAAD;GAAM,WAAU;GACX,UAAA;EACC,CAAA;EAEV,kBAAC,KAAD;GAAG,WAAU;GAAkE,UAAA;EAAS,CAAA;EACvF,KACG,kBAAC,KAAD;GAAG,WAAU;GAAyE,UAAA;EAAe,CAAA;EAExG,KAAU,kBAAC,OAAD;GAAK,WAAU;GAAQ,UAAA;EAAY,CAAA;CAC7C"}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface FieldProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    legend?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+}
+declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLFieldSetElement>>;
+export default Field;

package/dist/components/Field/index.js

@@ -0,0 +1,43 @@
+import { cn as e } from "../../utils/cn.js";
+/* empty css      */
+import { forwardRef as t, useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Field/index.tsx
+var a = (e) => e != null && typeof e != "boolean" && e !== "", o = t(function({ legend: t, description: o, error: s, children: c, className: l, "aria-describedby": u, "aria-invalid": d, ...f }, p) {
+	let m = n(), h = `${m}-description`, g = `${m}-error`, _ = a(o), v = a(s), y = [
+		u,
+		_ ? h : void 0,
+		v ? g : void 0
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ i("fieldset", {
+		...f,
+		ref: p,
+		className: e("dishui-field", l),
+		"aria-describedby": y,
+		"aria-invalid": d ?? (v ? !0 : void 0),
+		children: [a(t) && /* @__PURE__ */ r("legend", {
+			className: "dishui-field-legend",
+			children: t
+		}), /* @__PURE__ */ i("div", {
+			className: "dishui-field-content",
+			children: [
+				_ && /* @__PURE__ */ r("div", {
+					id: h,
+					className: "dishui-field-description",
+					children: o
+				}),
+				c,
+				v && /* @__PURE__ */ r("div", {
+					id: g,
+					className: "dishui-field-error",
+					role: "alert",
+					children: s
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Field/index.tsx"],"sourcesContent":["import React, { forwardRef, useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport './style.css';\n\nexport interface FieldProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  legend?: React.ReactNode;\n  description?: React.ReactNode;\n  error?: React.ReactNode;\n}\n\nconst hasContent = (node: React.ReactNode) => node !== null && node !== undefined && typeof node !== 'boolean' && node !== '';\n\nconst Field = forwardRef<HTMLFieldSetElement, FieldProps>(function Field({\n  legend,\n  description,\n  error,\n  children,\n  className,\n  'aria-describedby': describedBy,\n  'aria-invalid': invalid,\n  ...props\n}, ref) {\n  const id = useId();\n  const descriptionId = `${id}-description`;\n  const errorId = `${id}-error`;\n  const showDescription = hasContent(description);\n  const showError = hasContent(error);\n  const ids = [describedBy, showDescription ? descriptionId : undefined, showError ? errorId : undefined]\n    .filter(Boolean).join(' ') || undefined;\n\n  return (\n    <fieldset\n      {...props}\n      ref={ref}\n      className={cn('dishui-field', className)}\n      aria-describedby={ids}\n      aria-invalid={invalid ?? (showError ? true : undefined)}\n    >\n      {hasContent(legend) && <legend className=\"dishui-field-legend\">{legend}</legend>}\n      <div className=\"dishui-field-content\">\n        {showDescription && <div id={descriptionId} className=\"dishui-field-description\">{description}</div>}\n        {children}\n        {showError && <div id={errorId} className=\"dishui-field-error\" role=\"alert\">{error}</div>}\n      </div>\n    </fieldset>\n  );\n});\n\nexport default Field;\n"],"mappings":";;;;;AAUA,IAAM,KAAc,MAA0B,KAAS,QAA8B,OAAO,KAAS,aAAa,MAAS,IAErH,IAAQ,EAA4C,SAAe,EACvE,WACA,gBACA,UACA,aACA,cACA,oBAAoB,GACpB,gBAAgB,GAChB,GAAG,KACF,GAAK;CACN,IAAM,IAAK,EAAM,GACX,IAAgB,GAAG,EAAG,eACtB,IAAU,GAAG,EAAG,SAChB,IAAkB,EAAW,CAAW,GACxC,IAAY,EAAW,CAAK,GAC5B,IAAM;EAAC;EAAa,IAAkB,IAAgB,KAAA;EAAW,IAAY,IAAU,KAAA;CAAS,CAAC,CACpG,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CAEhC,OACE,kBAAC,YAAD;EACE,GAAI;EACC;EACL,WAAW,EAAG,gBAAgB,CAAS;EACvC,oBAAkB;EAClB,gBAAc,MAAY,IAAY,KAAO,KAAA;EAL/C,UAAA,CAOG,EAAW,CAAM,KAAK,kBAAC,UAAD;GAAQ,WAAU;GAAuB,UAAA;EAAe,CAAA,GAC/E,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG,KAAmB,kBAAC,OAAD;KAAK,IAAI;KAAe,WAAU;KAA4B,UAAA;IAAiB,CAAA;IAClG;IACA,KAAa,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAU;KAAqB,MAAK;KAAS,UAAA;IAAW,CAAA;GACrF;EACG,CAAA,CAAA;;AAEd,CAAC"}

package/dist/components/LayoutSuite/DashboardSuite.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type PageProps, type PageBodyProps, type PageMainProps, type PageAsideProps } from '../Page';
+import { type CardMetricProps } from '../Card';
+import { type NavigationListProps } from '../NavigationList';
+import { type LayoutGridProps } from '../Layout';
+export type DashboardSuiteProps = PageProps & {
+    header?: React.ReactNode;
+    overview?: React.ReactNode;
+    /** Persistent partial/stale/error feedback; data semantics remain with the caller. */
+    notice?: React.ReactNode;
+    metrics?: {
+        'aria-label': string;
+        items: readonly (CardMetricProps & {
+            key: React.Key;
+        })[];
+        loading?: boolean;
+        grid?: Omit<LayoutGridProps, 'children'>;
+    };
+    /** Cross-dashboard filters, above navigation and main content. */
+    filters?: React.ReactNode;
+    navigation?: NavigationListProps;
+    /** Explicit children (including null) override the built-in NavigationList. */
+    left?: PageAsideProps;
+    body?: Omit<PageBodyProps, 'children'>;
+    main?: PageMainProps;
+    toolbar?: React.ReactNode;
+    contentHeader?: React.ReactNode;
+    footer?: React.ReactNode;
+};
+/** Controlled dashboard composition; no fetching, filtering or table dependency. */
+export declare const DashboardSuite: ({ header, overview, notice, metrics, filters, navigation, left, body, main, toolbar, contentHeader, footer, children, fullHeight, className, ...page }: DashboardSuiteProps) => React.JSX.Element;
+export declare const LayoutSuite: {
+    DashboardSuite: typeof DashboardSuite;
+};
+export default DashboardSuite;

package/dist/components/LayoutSuite/DashboardSuite.js

@@ -0,0 +1,61 @@
+import { cn as e } from "../../utils/cn.js";
+import t from "../NavigationList/index.js";
+import n from "../Card/index.js";
+import r from "../Page/index.js";
+import { Grid as i, Group as a } from "../Layout/index.js";
+import "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/LayoutSuite/DashboardSuite.tsx
+var c = ({ header: c, overview: l, notice: u, metrics: d, filters: f, navigation: p, left: m, body: h, main: g, toolbar: _, contentHeader: v, footer: y, children: b, fullHeight: x = !1, className: S, ...C }) => /* @__PURE__ */ s(r, {
+	...C,
+	fullHeight: x,
+	className: e("gap-4", S),
+	children: [
+		c,
+		l,
+		u,
+		d && d.items.length > 0 && /* @__PURE__ */ o("section", {
+			"aria-label": d["aria-label"],
+			"aria-busy": d.loading,
+			children: /* @__PURE__ */ o(i, {
+				columns: "repeat(auto-fit, minmax(min(100%, 220px), 1fr))",
+				gap: 12,
+				...d.grid,
+				children: d.items.map(({ key: e, ...t }) => /* @__PURE__ */ o(n.Metric, {
+					...t,
+					loading: d.loading ?? t.loading
+				}, e))
+			})
+		}),
+		f,
+		/* @__PURE__ */ s(r.Body, {
+			scroll: x,
+			...h,
+			children: [(m || p) && /* @__PURE__ */ o(r.Left, {
+				width: 240,
+				bordered: !1,
+				scroll: !1,
+				...m,
+				children: m?.children === void 0 ? p && /* @__PURE__ */ o(t, { ...p }) : m.children
+			}), /* @__PURE__ */ o(r.Main, {
+				scroll: x,
+				...g,
+				children: /* @__PURE__ */ s(a, {
+					direction: "column",
+					align: "stretch",
+					gap: 16,
+					children: [
+						_,
+						v,
+						b === void 0 ? g?.children : b
+					]
+				})
+			})]
+		}),
+		y
+	]
+}), l = { DashboardSuite: c };
+//#endregion
+export { c as DashboardSuite, c as default, l as LayoutSuite };
+
+//# sourceMappingURL=DashboardSuite.js.map

package/dist/components/LayoutSuite/DashboardSuite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardSuite.js","names":[],"sources":["../../../src/components/LayoutSuite/DashboardSuite.tsx"],"sourcesContent":["import React from 'react';\nimport Page, { type PageProps, type PageBodyProps, type PageMainProps, type PageAsideProps } from '../Page';\nimport Card, { type CardMetricProps } from '../Card';\nimport NavigationList, { type NavigationListProps } from '../NavigationList';\nimport { Grid, Group, type LayoutGridProps } from '../Layout';\nimport { cn } from '../../utils/cn';\n\nexport type DashboardSuiteProps = PageProps & {\n    header?: React.ReactNode;\n    overview?: React.ReactNode;\n    /** Persistent partial/stale/error feedback; data semantics remain with the caller. */\n    notice?: React.ReactNode;\n    metrics?: {\n        'aria-label': string;\n        items: readonly (CardMetricProps & { key: React.Key })[];\n        loading?: boolean;\n        grid?: Omit<LayoutGridProps, 'children'>;\n    };\n    /** Cross-dashboard filters, above navigation and main content. */\n    filters?: React.ReactNode;\n    navigation?: NavigationListProps;\n    /** Explicit children (including null) override the built-in NavigationList. */\n    left?: PageAsideProps;\n    body?: Omit<PageBodyProps, 'children'>;\n    main?: PageMainProps;\n    toolbar?: React.ReactNode;\n    contentHeader?: React.ReactNode;\n    footer?: React.ReactNode;\n};\n\n/** Controlled dashboard composition; no fetching, filtering or table dependency. */\nexport const DashboardSuite = ({\n    header, overview, notice, metrics, filters, navigation, left, body, main,\n    toolbar, contentHeader, footer, children, fullHeight = false, className, ...page\n}: DashboardSuiteProps) => (\n    <Page {...page} fullHeight={fullHeight} className={cn('gap-4', className)}>\n        {header}\n        {overview}\n        {notice}\n        {metrics && metrics.items.length > 0 && (\n            <section aria-label={metrics['aria-label']} aria-busy={metrics.loading}>\n                <Grid columns=\"repeat(auto-fit, minmax(min(100%, 220px), 1fr))\" gap={12} {...metrics.grid}>\n                    {metrics.items.map(({ key, ...metric }) => (\n                        <Card.Metric key={key} {...metric} loading={metrics.loading ?? metric.loading} />\n                    ))}\n                </Grid>\n            </section>\n        )}\n        {filters}\n        <Page.Body scroll={fullHeight} {...body}>\n            {(left || navigation) && (\n                <Page.Left width={240} bordered={false} scroll={false} {...left}>\n                    {left?.children !== undefined ? left.children : navigation && <NavigationList {...navigation} />}\n                </Page.Left>\n            )}\n            <Page.Main scroll={fullHeight} {...main}>\n                <Group direction=\"column\" align=\"stretch\" gap={16}>\n                    {toolbar}\n                    {contentHeader}\n                    {children !== undefined ? children : main?.children}\n                </Group>\n            </Page.Main>\n        </Page.Body>\n        {footer}\n    </Page>\n);\n\n// lite exposes only the lightweight suite, without loading the Sidebar/router graph.\nexport const LayoutSuite = { DashboardSuite };\nexport default DashboardSuite;\n"],"mappings":";;;;;;;;AA+BA,IAAa,KAAkB,EAC3B,WAAQ,aAAU,WAAQ,YAAS,YAAS,eAAY,SAAM,SAAM,SACpE,YAAS,kBAAe,WAAQ,aAAU,gBAAa,IAAO,cAAW,GAAG,QAE5E,kBAAC,GAAD;CAAM,GAAI;CAAkB;CAAY,WAAW,EAAG,SAAS,CAAS;CAAxE,UAAA;EACK;EACA;EACA;EACA,KAAW,EAAQ,MAAM,SAAS,KAC/B,kBAAC,WAAD;GAAS,cAAY,EAAQ;GAAe,aAAW,EAAQ;GAC3D,UAAA,kBAAC,GAAD;IAAM,SAAQ;IAAkD,KAAK;IAAI,GAAI,EAAQ;IAChF,UAAA,EAAQ,MAAM,KAAK,EAAE,QAAK,GAAG,QAC1B,kBAAC,EAAK,QAAN;KAAuB,GAAI;KAAQ,SAAS,EAAQ,WAAW,EAAO;IAAU,GAA9D,CAA8D,CACnF;GACC,CAAA;EACD,CAAA;EAEZ;EACD,kBAAC,EAAK,MAAN;GAAW,QAAQ;GAAY,GAAI;GAAnC,UAAA,EACM,KAAQ,MACN,kBAAC,EAAK,MAAN;IAAW,OAAO;IAAK,UAAU;IAAO,QAAQ;IAAO,GAAI;IACtD,UAAA,GAAM,aAAa,KAAA,IAA4B,KAAc,kBAAC,GAAD,EAAgB,GAAI,EAAa,CAAA,IAA/D,EAAK;GAC9B,CAAA,GAEf,kBAAC,EAAK,MAAN;IAAW,QAAQ;IAAY,GAAI;IAC/B,UAAA,kBAAC,GAAD;KAAO,WAAU;KAAS,OAAM;KAAU,KAAK;KAA/C,UAAA;MACK;MACA;MACA,MAAa,KAAA,IAAuB,GAAM,WAAjB;KACvB;;GACA,CAAA,CACJ;;EACV;CACC;IAIG,IAAc,EAAE,kBAAe"}

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { type PageProps, type PageBodyProps, type PageMainProps, type PageAsideProps, type PagePanelProps, type PageFooterProps, type PageFloatProps } from '../Page';
+import type { PageHeaderProps } from '../PageHeader';
+import Sidebar from '../../layouts/Sidebar';
+import { DashboardSuite } from './DashboardSuite';
+export { DashboardSuite } from './DashboardSuite';
+export type { DashboardSuiteProps } from './DashboardSuite';
+/** Sidebar 保持原有 API；panel 仅配置外层 Page.Left / Page.Right。 */
+export type LayoutSuiteSidebarProps = Omit<React.ComponentProps<typeof Sidebar>, 'language' | 'isCollapsed' | 'side'> & {
+    language?: 'zh' | 'en';
+    isCollapsed?: boolean;
+    /** 独立启用区域边缘调宽，不要求 onToggle 或 onWidthChange。 */
+    resizable?: boolean;
+    panel?: Omit<PageAsideProps, 'children'>;
+};
+export type LayoutSuiteHeaderProps = PageHeaderProps & PagePanelProps;
+export type LayoutSuiteBaseProps = PageProps & {
+    /** 可选三段式页头；Admin / Blog 仍要求配置 header。 */
+    header?: LayoutSuiteHeaderProps;
+    footer?: PageFooterProps;
+    /** body 不接收 children；主内容支持顶层 children 或 main.children。 */
+    body?: Omit<PageBodyProps, 'children'>;
+    main?: PageMainProps;
+};
+export type AdminSuiteProps = LayoutSuiteBaseProps & {
+    header: LayoutSuiteHeaderProps;
+    left: LayoutSuiteSidebarProps;
+};
+export type WikiSuiteProps = LayoutSuiteBaseProps & {
+    left?: LayoutSuiteSidebarProps;
+    right?: LayoutSuiteSidebarProps;
+    float?: PageFloatProps;
+};
+export type BlogSuiteProps = LayoutSuiteBaseProps & {
+    header: LayoutSuiteHeaderProps;
+    footer?: PageFooterProps;
+};
+export type BlankSuiteProps = LayoutSuiteBaseProps & {
+    float?: PageFloatProps;
+};
+/** 后台：必填页头和内置导航侧栏。Sidebar 需置于 TanStack Router 上下文中。 */
+export declare const AdminSuite: (props: AdminSuiteProps) => React.JSX.Element;
+/** 文档：可选双侧导航与浮窗。 */
+export declare const WikiSuite: (props: WikiSuiteProps) => React.JSX.Element;
+/** 博客：必填页头，可选页脚。 */
+export declare const BlogSuite: (props: BlogSuiteProps) => React.JSX.Element;
+/** 空白页：主内容与可选浮窗。 */
+export declare const BlankSuite: (props: BlankSuiteProps) => React.JSX.Element;
+export declare const LayoutSuite: {
+    AdminSuite: typeof AdminSuite;
+    WikiSuite: typeof WikiSuite;
+    BlogSuite: typeof BlogSuite;
+    BlankSuite: typeof BlankSuite;
+    DashboardSuite: typeof DashboardSuite;
+};
+export default LayoutSuite;