@apisurf/wireui 0.1.2

package/dist/server/_ssr/kv-table-DQUkoItO.mjs

@@ -0,0 +1,458 @@
+import { __toESM } from "../_runtime.mjs";
+import { require_jsx_runtime, require_react } from "../_libs/@tanstack/react-router+[...].mjs";
+import { Button, Callout, CopyButton, Empty, FilterInput, IconAlert, IconChevronDown, IconChevronRight, IconFile, Segmented, bodyRaw, bodyText, css, cx, faintText, formatBytes, mono, table, truncate } from "./router-CPcgc_kh.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/kv-table-DQUkoItO.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+var syn = {
+	key: css({ color: "synKey" }),
+	string: css({ color: "synString" }),
+	number: css({ color: "synNumber" }),
+	bool: css({ color: "synBool" }),
+	null: css({ color: "synNull" }),
+	punct: css({ color: "synPunct" })
+};
+var tree = css({
+	fontFamily: "mono",
+	fontSize: "12px",
+	lineHeight: "1.65",
+	py: "2",
+	pl: "6",
+	pr: "3",
+	whiteSpace: "pre-wrap",
+	wordBreak: "break-word"
+});
+function JsonView({ value, initialDepth = 2, command }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: tree,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Node, {
+			value,
+			depth: 0,
+			initialDepth,
+			command,
+			last: true
+		})
+	});
+}
+function Node({ name, value, depth, initialDepth, command, last }) {
+	const branch = value !== null && typeof value === "object";
+	const [open, setOpen] = import_react.useState(depth < initialDepth);
+	import_react.useEffect(() => {
+		if (command && command.seq > 0) setOpen(command.open);
+	}, [command]);
+	const label = name !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: syn.key,
+		children: JSON.stringify(name)
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: syn.punct,
+		children: ": "
+	})] }) : null;
+	const comma = last ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: syn.punct,
+		children: ","
+	});
+	const indent = { paddingLeft: depth === 0 ? 0 : 16 };
+	if (!branch) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		style: indent,
+		children: [
+			label,
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Scalar, { value }),
+			comma
+		]
+	});
+	const array = Array.isArray(value);
+	const entries = array ? value.map((v) => [void 0, v]) : Object.entries(value);
+	const [openBrace, closeBrace] = array ? ["[", "]"] : ["{", "}"];
+	if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		style: indent,
+		children: [
+			label,
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: syn.punct,
+				children: `${openBrace}${closeBrace}`
+			}),
+			comma
+		]
+	});
+	const summary = array ? `${entries.length} item${entries.length === 1 ? "" : "s"}` : `${entries.length} key${entries.length === 1 ? "" : "s"}`;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		style: indent,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+			role: "button",
+			tabIndex: 0,
+			onClick: () => setOpen(!open),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					setOpen(!open);
+				}
+			},
+			className: css({
+				cursor: "pointer",
+				rounded: "xs",
+				position: "relative",
+				ml: "-14px",
+				pl: "14px",
+				_hover: { bg: "hover" }
+			}),
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: css({
+						position: "absolute",
+						left: "0",
+						top: "2px",
+						color: "faint",
+						display: "inline-flex"
+					}),
+					children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconChevronDown, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconChevronRight, { size: 12 })
+				}),
+				label,
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: syn.punct,
+					children: openBrace
+				}),
+				open ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: cx(css({
+							color: "faint",
+							fontStyle: "italic",
+							px: "1"
+						})),
+						children: summary
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: syn.punct,
+						children: closeBrace
+					}),
+					comma
+				] })
+			]
+		}), open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [entries.map(([key, child], i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Node, {
+			name: key,
+			value: child,
+			depth: depth + 1,
+			initialDepth,
+			command,
+			last: i === entries.length - 1
+		}, key ?? i)), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: syn.punct,
+			children: closeBrace
+		}), comma] })] }) : null]
+	});
+}
+function Scalar({ value }) {
+	if (value === null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: syn.null,
+		children: "null"
+	});
+	if (typeof value === "string") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: syn.string,
+		children: JSON.stringify(value)
+	});
+	if (typeof value === "number") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: syn.number,
+		children: String(value)
+	});
+	if (typeof value === "boolean") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: syn.bool,
+		children: String(value)
+	});
+	return null;
+}
+function modesFor(body) {
+	if (body.kind === "json") return ["pretty", "raw"];
+	if (body.kind === "image") return body.text ? ["preview", "raw"] : ["preview"];
+	if (body.kind === "text") return isHtml(body.contentType) ? ["pretty", "preview"] : ["pretty"];
+	return [];
+}
+function isHtml(contentType) {
+	return contentType != null && /html/i.test(contentType);
+}
+var MODE_LABEL = {
+	pretty: "Pretty",
+	raw: "Raw",
+	preview: "Preview"
+};
+function BodyViewer({ body, emptyTitle }) {
+	const modes = modesFor(body);
+	const [mode, setMode] = import_react.useState(modes[0] ?? "pretty");
+	const [command, setCommand] = import_react.useState({
+		open: true,
+		seq: 0
+	});
+	const active = modes.includes(mode) ? mode : modes[0] ?? "pretty";
+	if (body.kind === "empty") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, {
+		title: emptyTitle,
+		icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconFile, { size: 22 }),
+		children: body.note
+	});
+	const copyText = active === "raw" ? bodyRaw(body) : bodyText(body);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			h: "full",
+			minH: "0"
+		}),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: css({
+					display: "flex",
+					alignItems: "center",
+					gap: "2",
+					px: "3",
+					py: "1.5",
+					borderBottom: "1px solid",
+					borderColor: "line",
+					flexShrink: 0,
+					minW: "0"
+				}),
+				children: [
+					modes.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Segmented, {
+						items: modes.map((m) => ({
+							id: m,
+							label: MODE_LABEL[m]
+						})),
+						value: active,
+						onSelect: setMode
+					}) : null,
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						title: body.contentType ?? void 0,
+						className: cx(mono, faintText, truncate, css({
+							fontSize: "11px",
+							flex: "1",
+							minW: "0"
+						})),
+						children: [body.contentType ?? "no content-type", body.size != null ? ` · ${formatBytes(body.size)}` : ""]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: css({
+							ml: "auto",
+							display: "flex",
+							gap: "1.5",
+							flexShrink: 0
+						}),
+						children: [body.kind === "json" && active === "pretty" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+							onClick: () => setCommand((c) => ({
+								open: true,
+								seq: c.seq + 1
+							})),
+							children: "Expand"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+							onClick: () => setCommand((c) => ({
+								open: false,
+								seq: c.seq + 1
+							})),
+							children: "Collapse"
+						})] }) : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, { text: copyText })]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BodyNotice, { body }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: css({
+					flex: "1",
+					minH: "0",
+					overflow: "auto",
+					bg: "well"
+				}),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BodyContent, {
+					body,
+					mode: active,
+					command
+				})
+			})
+		]
+	});
+}
+/**
+* Why the payload below is not the whole story. A binary body's note is the
+* body itself (it is shown in its place), so only text-ish kinds get one here.
+*/
+function BodyNotice({ body }) {
+	const note = body.kind === "binary" ? null : body.note;
+	if (!body.truncated && !note) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: css({
+			px: "3",
+			pt: "2",
+			flexShrink: 0
+		}),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Callout, {
+			tone: "warn",
+			icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconAlert, { size: 14 }),
+			title: body.truncated ? "Truncated at capture" : "Note",
+			children: note ?? `Only the first part of this ${formatBytes(body.size)} payload was stored — raise the capture limit to keep it all.`
+		})
+	});
+}
+function BodyContent({ body, mode, command }) {
+	if (body.kind === "binary") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, {
+		title: "Binary payload",
+		icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconFile, { size: 22 }),
+		children: body.note
+	});
+	if (body.kind === "json") return mode === "raw" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, {
+		text: bodyRaw(body) ?? "",
+		wrap: true
+	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JsonView, {
+		value: body.json,
+		command
+	});
+	if (body.kind === "image") {
+		if (mode === "raw") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { text: body.text ?? "" });
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				p: "4",
+				display: "flex",
+				justifyContent: "center",
+				bgImage: "linear-gradient(45deg, token(colors.hover) 25%, transparent 25%), linear-gradient(-45deg, token(colors.hover) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, token(colors.hover) 75%), linear-gradient(-45deg, transparent 75%, token(colors.hover) 75%)",
+				bgSize: "16px 16px",
+				bgPosition: "0 0, 0 8px, 8px -8px, -8px 0",
+				minH: "full"
+			}),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+				src: body.dataUrl ?? void 0,
+				alt: "Response body",
+				className: css({
+					maxW: "full",
+					objectFit: "contain"
+				})
+			})
+		});
+	}
+	if (mode === "preview" && body.text != null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", {
+		title: "HTML preview",
+		sandbox: "",
+		srcDoc: body.text,
+		className: css({
+			w: "full",
+			h: "full",
+			border: "none",
+			bg: "white"
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { text: body.text ?? "" });
+}
+/** Lines past this render on request: a 1 MB log should not freeze the tab. */
+var LINE_CAP = 4e3;
+/** Plain text with line numbers. */
+function Code({ text, wrap = false }) {
+	const [all, setAll] = import_react.useState(false);
+	const lines = import_react.useMemo(() => text.split("\n"), [text]);
+	const shown = all ? lines : lines.slice(0, LINE_CAP);
+	const gutter = String(lines.length).length;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: cx(mono, css({
+			py: "2",
+			lineHeight: "1.6"
+		}), !wrap && css({
+			w: "max-content",
+			minW: "full"
+		})),
+		children: [shown.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: css({
+				display: "flex",
+				px: "3",
+				_hover: { bg: "hover" }
+			}),
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: css({
+					color: "faint",
+					textAlign: "right",
+					pr: "3",
+					userSelect: "none",
+					flexShrink: 0
+				}),
+				style: { width: `${gutter + 2}ch` },
+				children: i + 1
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: cx(css({
+					flex: "1",
+					minW: "0"
+				}), wrap ? css({
+					whiteSpace: "pre-wrap",
+					wordBreak: "break-all"
+				}) : css({ whiteSpace: "pre" })),
+				children: line || " "
+			})]
+		}, i)), !all && lines.length > LINE_CAP ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				px: "3",
+				py: "2"
+			}),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+				onClick: () => setAll(true),
+				children: [
+					"Show all ",
+					lines.length.toLocaleString("en-US"),
+					" lines"
+				]
+			})
+		}) : null]
+	});
+}
+function KvTable({ rows, empty, filterable = rows.length > 8, nameLabel = "Key", valueLabel = "Value", extraLabel }) {
+	const [filter, setFilter] = import_react.useState("");
+	const needle = filter.trim().toLowerCase();
+	const visible = needle ? rows.filter((r) => r.name.toLowerCase().includes(needle) || r.value.toLowerCase().includes(needle)) : rows;
+	if (rows.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, { title: empty });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			minH: "0"
+		}),
+		children: [filterable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				px: "3",
+				py: "2"
+			}),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterInput, {
+				placeholder: `Filter ${rows.length} rows…`,
+				value: filter,
+				onChange: (e) => setFilter(e.target.value)
+			})
+		}) : null, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+			className: table,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+					className: css({ w: "32%" }),
+					children: nameLabel
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: valueLabel }),
+				extraLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: extraLabel }) : null
+			] }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [visible.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+					className: cx(mono, css({
+						color: "muted",
+						verticalAlign: "top",
+						wordBreak: "break-all"
+					})),
+					children: row.name
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+					className: cx(mono, css({
+						wordBreak: "break-all",
+						whiteSpace: "pre-wrap"
+					})),
+					children: row.value
+				}),
+				extraLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row.extra }) : null
+			] }, `${row.name}:${i}`)), visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", {
+				colSpan: extraLabel ? 3 : 2,
+				className: css({
+					color: "faint",
+					textAlign: "center"
+				}),
+				children: [
+					"Nothing matches “",
+					filter,
+					"”."
+				]
+			}) }) : null] })]
+		})]
+	});
+}
+//#endregion
+export { BodyViewer, Code, JsonView, KvTable };