@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/conversation-map.aui.js

@@ -0,0 +1,177 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { ConversationMap } from "./conversation-map.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useAuiState, useThreadViewport } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/conversation-map.aui.tsx
+var conversation_map_aui_exports = /* @__PURE__ */ __exportAll({ ConversationMapAui: () => ConversationMapAui });
+const TITLE_LENGTH = 72;
+const PREVIEW_LENGTH = 240;
+/**
+* A message scrolled to the top of the viewport lands a fraction of a pixel
+* below it, which would otherwise hand the active tick to the turn before.
+*/
+const TOP_TOLERANCE = 1;
+const sameIds = (a, b) => {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+};
+/**
+* The line a message has to cross to count as the one being read. It sits at
+* the top of the viewport for most of a thread, then slides to the bottom
+* across the final screenful: a message that starts within one viewport height
+* of the end can never reach the top, so a fixed line leaves the last screen's
+* worth of ticks permanently unreachable.
+*/
+const readingLine = (viewport) => {
+	const rect = viewport.getBoundingClientRect();
+	const height = viewport.clientHeight;
+	if (height <= 0) return rect.top + TOP_TOLERANCE;
+	const remaining = viewport.scrollHeight - height - viewport.scrollTop;
+	const descent = Math.min(1, Math.max(0, (height - remaining) / height));
+	return rect.top + rect.height * descent + TOP_TOLERANCE;
+};
+const partsOf = (message) => [...message.content];
+const textOf = (message) => partsOf(message).map((part) => part.type === "text" ? part.text : "").join("\n").trim();
+const labelOf = (message) => {
+	const parts = partsOf(message);
+	const tools = parts.flatMap((part) => part.type === "tool-call" ? [part.toolName] : []);
+	if (tools.length === 1) return tools[0];
+	if (tools.length > 1) return `${tools.length} tool calls`;
+	if (parts.some((part) => part.type === "reasoning")) return "Reasoning";
+	const carriers = [...parts, ...message.attachments ?? []];
+	if (carriers.some((carrier) => carrier.type === "image")) return "Image";
+	if (carriers.some((carrier) => carrier.type === "file")) return "File";
+	if (carriers.length > 0) return "Attachment";
+	return message.role === "user" ? "Message" : "Response";
+};
+/** Cuts on a word boundary so a title never splits a word. */
+const cutAtWord = (text, limit) => {
+	if (text.length <= limit) return text;
+	const head = text.slice(0, limit);
+	const boundary = head.lastIndexOf(" ");
+	return boundary > limit / 2 ? head.slice(0, boundary) : head;
+};
+const linesOf = (message) => textOf(message).split("\n").map((line) => line.replace(/^[\s#>*`-]+/, "").trim()).filter(Boolean);
+const groupIntoTurns = (messages) => {
+	const turns = [];
+	for (const message of messages) {
+		if (message.role !== "user" && message.role !== "assistant") continue;
+		const current = turns.at(-1);
+		if (message.role === "user" || !current) {
+			turns.push({
+				head: message,
+				members: [message]
+			});
+			continue;
+		}
+		current.members.push(message);
+	}
+	return turns;
+};
+const describe = ({ head, members }) => {
+	const lines = linesOf(head);
+	const first = lines[0] ?? "";
+	const title = cutAtWord(first, TITLE_LENGTH);
+	const answer = members.find((member) => member !== head && textOf(member));
+	const preview = (answer ? linesOf(answer).join(" ") : [first.slice(title.length), ...lines.slice(1)].join(" ")).trim().slice(0, PREVIEW_LENGTH);
+	return {
+		id: head.id,
+		title: title || labelOf(head),
+		...preview ? { preview } : {}
+	};
+};
+function ConversationMapAui({ side = "left", className }) {
+	const messages = useAuiState((s) => s.thread.messages);
+	const viewport = useThreadViewport((s) => s.element.viewport);
+	const viewportHeight = useThreadViewport((s) => s.height.viewport);
+	const [activeId, setActiveId] = useState(void 0);
+	const [visibleIds, setVisibleIds] = useState([]);
+	const scheduleRef = useRef(void 0);
+	const turns = useMemo(() => groupIntoTurns(messages), [messages]);
+	const entries = useMemo(() => turns.map(describe), [turns]);
+	/** Which turn each message belongs to, so a message in view marks its turn. */
+	const turnOf = useMemo(() => {
+		const owners = /* @__PURE__ */ new Map();
+		for (const turn of turns) for (const member of turn.members) owners.set(member.id, turn.head.id);
+		return owners;
+	}, [turns]);
+	const turnOfRef = useRef(turnOf);
+	const turnKey = turns.map((turn) => turn.head.id).join(" ");
+	useEffect(() => {
+		turnOfRef.current = turnOf;
+	});
+	useEffect(() => {
+		if (!viewport) return void 0;
+		let frame = 0;
+		const measure = () => {
+			frame = 0;
+			const owners = turnOfRef.current;
+			const view = viewport.getBoundingClientRect();
+			const line = readingLine(viewport);
+			let current;
+			const onScreen = [];
+			for (const element of viewport.querySelectorAll("[data-message-id]")) {
+				const box = element.getBoundingClientRect();
+				if (box.top >= view.bottom) break;
+				const id = element.dataset["messageId"];
+				const head = id === void 0 ? void 0 : owners.get(id);
+				if (head === void 0) continue;
+				if (box.top <= line) current = head;
+				if (box.bottom > view.top && !onScreen.includes(head)) onScreen.push(head);
+			}
+			setActiveId(current ?? owners.values().next().value);
+			setVisibleIds((previous) => sameIds(previous, onScreen) ? previous : onScreen);
+		};
+		const schedule = () => {
+			if (frame) return;
+			frame = requestAnimationFrame(measure);
+		};
+		scheduleRef.current = schedule;
+		schedule();
+		viewport.addEventListener("scroll", schedule, { passive: true });
+		const observer = new ResizeObserver(schedule);
+		observer.observe(viewport);
+		return () => {
+			scheduleRef.current = void 0;
+			if (frame) cancelAnimationFrame(frame);
+			viewport.removeEventListener("scroll", schedule);
+			observer.disconnect();
+		};
+	}, [viewport]);
+	useEffect(() => {
+		scheduleRef.current?.();
+	}, [turnKey]);
+	const select = useCallback((id) => {
+		if (!viewport) return;
+		for (const element of viewport.querySelectorAll("[data-message-id]")) {
+			if (element.dataset["messageId"] !== id) continue;
+			const top = element.getBoundingClientRect().top - viewport.getBoundingClientRect().top + viewport.scrollTop;
+			viewport.scrollTo({
+				top,
+				behavior: "smooth"
+			});
+			return;
+		}
+	}, [viewport]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "conversation-map-rail",
+		className: cn("pointer-events-none sticky top-0 z-10 h-0 w-full", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pointer-events-auto absolute top-0 px-3 py-10", side === "right" ? "right-0" : "left-0"),
+			style: { height: viewportHeight },
+			children: /* @__PURE__ */ jsx(ConversationMap, {
+				entries,
+				activeId,
+				visibleIds,
+				onSelect: select,
+				side: side === "right" ? "left" : "right"
+			})
+		})
+	});
+}
+//#endregion
+export { ConversationMapAui, conversation_map_aui_exports };

package/dist/components/assistant-ui/elements/conversation-map.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+declare namespace conversation_map_d_exports {
+  export { ConversationMap, ConversationMapEntry };
+}
+export interface ConversationMapEntry {
+  id: string;
+  title: string;
+  preview?: string;
+}
+export declare function ConversationMap({ entries, activeId, visibleIds, onSelect, onPreviewChange, side, className, onKeyDown, ...props }: Omit<ComponentProps<"nav">, "children" | "onSelect"> & {
+  entries: readonly ConversationMapEntry[];
+  activeId?: string | undefined;
+  visibleIds?: readonly string[] | undefined;
+  onSelect?: ((id: string) => void) | undefined;
+  onPreviewChange?: ((open: boolean) => void) | undefined;
+  side?: "left" | "right";
+}): import("react").JSX.Element;
+//#endregion
+export { conversation_map_d_exports };

package/dist/components/assistant-ui/elements/conversation-map.js

@@ -0,0 +1,84 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { floating } from "./surfaces.js";
+import { clamp } from "../utils/range.js";
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/assistant-ui/elements/conversation-map.tsx
+var conversation_map_exports = /* @__PURE__ */ __exportAll({ ConversationMap: () => ConversationMap });
+const TICK = "[data-slot=\"conversation-map-tick\"]";
+function ConversationMap({ entries, activeId, visibleIds, onSelect, onPreviewChange, side = "right", className, onKeyDown, ...props }) {
+	const railRef = useRef(null);
+	const [handle] = useState(() => PreviewCard.createHandle());
+	const [focusedIndex, setFocusedIndex] = useState(null);
+	const inView = new Set(visibleIds);
+	const activeIndex = entries.findIndex((entry) => entry.id === activeId);
+	const tabbableIndex = clamp(focusedIndex ?? Math.max(0, activeIndex), 0, Math.max(0, entries.length - 1));
+	const handleKeyDown = useCallback((event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const ticks = railRef.current?.querySelectorAll(TICK);
+		if (!ticks?.length) return;
+		const current = Array.prototype.indexOf.call(ticks, event.target);
+		if (current === -1) return;
+		const next = {
+			ArrowUp: current - 1,
+			ArrowDown: current + 1,
+			Home: 0,
+			End: ticks.length - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		ticks[clamp(next, 0, ticks.length - 1)]?.focus();
+	}, [onKeyDown]);
+	return /* @__PURE__ */ jsxs("nav", {
+		"data-slot": "conversation-map",
+		ref: railRef,
+		"aria-label": "Conversation map",
+		onKeyDown: handleKeyDown,
+		className: cn("group/rail flex h-full w-6 flex-col justify-center", className),
+		...props,
+		children: [entries.map((entry, index) => {
+			const current = index === activeIndex;
+			const onScreen = current || inView.has(entry.id);
+			return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+				handle,
+				payload: entry,
+				delay: 120,
+				closeDelay: 80,
+				render: /* @__PURE__ */ jsx("button", { type: "button" }),
+				"data-slot": "conversation-map-tick",
+				"data-active": current ? "" : void 0,
+				"data-in-view": onScreen ? "" : void 0,
+				"aria-label": entry.title,
+				"aria-current": current ? "true" : void 0,
+				tabIndex: index === tabbableIndex ? 0 : -1,
+				onFocus: () => setFocusedIndex(index),
+				onClick: onSelect ? () => onSelect(entry.id) : void 0,
+				className: "group flex max-h-3.5 min-h-0 flex-1 items-center outline-none",
+				children: /* @__PURE__ */ jsx("span", { className: cn("w-3 rounded-full transition-[width,height,background-color] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", current ? "bg-foreground/90 h-[3px] group-focus-within/rail:w-6 group-hover/rail:w-6" : cn("group-hover:bg-foreground/70 group-focus-visible:bg-foreground/70 h-0.5", "group-hover:w-6! group-focus-visible:w-6!", onScreen ? "bg-foreground/50 group-focus-within/rail:w-[18px] group-hover/rail:w-[18px]" : "bg-muted-foreground/40")) })
+			}, entry.id);
+		}), /* @__PURE__ */ jsx(PreviewCard.Root, {
+			handle,
+			onOpenChange: onPreviewChange,
+			children: ({ payload }) => /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+				side,
+				sideOffset: 10,
+				children: /* @__PURE__ */ jsxs(PreviewCard.Popup, {
+					className: cn(floating, "z-50 w-60 origin-(--transform-origin) rounded-2xl p-3.5 outline-none", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.97] data-[ending-style]:opacity-0"),
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "line-clamp-2 text-[13px] leading-snug font-medium",
+						children: payload?.title
+					}), payload?.preview && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground mt-1 line-clamp-3 text-[13px] leading-relaxed",
+						children: payload.preview
+					})]
+				})
+			}) })
+		})]
+	});
+}
+//#endregion
+export { ConversationMap, conversation_map_exports };

package/dist/components/assistant-ui/elements/conversation-search.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+declare namespace conversation_search_d_exports {
+  export { ConversationSearch, SearchHit };
+}
+export interface SearchHit {
+  id: string;
+  before: string;
+  match: string;
+  after: string;
+  position: number;
+}
+export declare function ConversationSearch({ query, hits, activeIndex, onQueryChange, onStep, className, ...props }: Omit<ComponentProps<"div">, "children" | "query" | "hits" | "activeIndex" | "onQueryChange" | "onStep"> & {
+  query: string;
+  hits: readonly SearchHit[];
+  activeIndex: number;
+  onQueryChange?: (query: string) => void;
+  onStep?: (delta: number) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { conversation_search_d_exports };

package/dist/components/assistant-ui/elements/conversation-search.js

@@ -0,0 +1,75 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { paper } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, SearchIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/conversation-search.tsx
+var conversation_search_exports = /* @__PURE__ */ __exportAll({ ConversationSearch: () => ConversationSearch });
+function ConversationSearch({ query, hits, activeIndex, onQueryChange, onStep, className, ...props }) {
+	const index = hits.length === 0 ? -1 : Math.min(Math.max(activeIndex, 0), hits.length - 1);
+	const active = index === -1 ? void 0 : hits[index];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "conversation-search",
+		className: cn("flex w-full max-w-sm gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn(paper, "flex items-center gap-2 rounded-full py-1.5 pr-1.5 pl-3"),
+				children: [
+					/* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-3.5 shrink-0" }),
+					/* @__PURE__ */ jsx("input", {
+						value: query,
+						onChange: (event) => onQueryChange?.(event.target.value),
+						placeholder: "Find in conversation",
+						"aria-label": "Find in conversation",
+						className: "text-foreground/85 placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-[13px] outline-none"
+					}),
+					query.trim() !== "" && /* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0 tabular-nums"),
+						children: hits.length === 0 ? "0/0" : `${index + 1}/${hits.length}`
+					}),
+					onStep && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Previous match",
+						onClick: () => onStep(-1),
+						className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "size-6 shrink-0"),
+						children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-3.5" })
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Next match",
+						onClick: () => onStep(1),
+						className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "size-6 shrink-0"),
+						children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5" })
+					})] })
+				]
+			}), active && /* @__PURE__ */ jsxs("div", {
+				className: cn("bg-muted", "fade-in animate-in rounded-xl px-3 py-2 text-xs leading-relaxed duration-200"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: active.before
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-foreground/95 rounded bg-warning/15 px-0.5",
+						children: active.match
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: active.after
+					})
+				]
+			})]
+		}), hits.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "bg-foreground/[0.04] relative w-1.5 shrink-0 rounded-full",
+			children: hits.map((hit, i) => /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn("absolute inset-x-0 h-1 rounded-full transition-colors duration-200", i === index ? "bg-warning" : "bg-warning/35"),
+				style: { top: `${hit.position}%` }
+			}, hit.id))
+		})]
+	});
+}
+//#endregion
+export { ConversationSearch, conversation_search_exports };

package/dist/components/assistant-ui/elements/cost-meter.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+declare namespace cost_meter_d_exports {
+  export { CostLine, CostMeter };
+}
+export interface CostLine {
+  model: string;
+  inputTokens: number;
+  outputTokens: number;
+  cost: string;
+  share: number;
+}
+export declare function CostMeter({ runCost, sessionCost, scopeLabel, lines, className, ...props }: Omit<ComponentProps<"div">, "children" | "runCost" | "sessionCost" | "scopeLabel" | "lines"> & {
+  runCost: string;
+  sessionCost?: string;
+  scopeLabel?: string;
+  lines: readonly CostLine[];
+}): import("react").JSX.Element;
+//#endregion
+export { cost_meter_d_exports };

package/dist/components/assistant-ui/elements/cost-meter.js

@@ -0,0 +1,76 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { announced, pct } from "../utils/range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/cost-meter.tsx
+var cost_meter_exports = /* @__PURE__ */ __exportAll({ CostMeter: () => CostMeter });
+function CostMeter({ runCost, sessionCost, scopeLabel = "this run", lines, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "cost-meter",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-2xl p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-2xl font-medium tracking-tight tabular-nums",
+						children: runCost
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-muted-foreground"),
+						children: scopeLabel
+					}),
+					sessionCost !== void 0 && /* @__PURE__ */ jsxs("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground ms-auto tabular-nums"),
+						children: [sessionCost, " session"]
+					})
+				]
+			}),
+			lines.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "bg-foreground/[0.06] flex h-1.5 w-full overflow-hidden rounded-full",
+				children: lines.map((line, i) => {
+					const width = pct(line.share, 1);
+					if (announced(width) === 0) return null;
+					return /* @__PURE__ */ jsx("span", {
+						role: "meter",
+						"aria-label": `${line.model} cost share`,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": announced(width),
+						className: cn("h-full transition-[width] duration-500 motion-reduce:transition-none", i === 0 ? "bg-foreground/80" : i === 1 ? "bg-foreground/45" : "bg-foreground/25"),
+						style: { width: `${width}%` }
+					}, line.model);
+				})
+			}),
+			lines.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-1.5",
+				children: lines.map((line) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-foreground/75 min-w-0 flex-1 truncate text-[13px]",
+							children: line.model
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0 tabular-nums"),
+							children: [
+								line.inputTokens > 0 ? `${(line.inputTokens / 1e3).toFixed(1)}k in` : null,
+								line.inputTokens > 0 && line.outputTokens > 0 ? " · " : null,
+								line.outputTokens > 0 ? `${(line.outputTokens / 1e3).toFixed(1)}k out` : null
+							]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground shrink-0 tabular-nums"),
+							children: line.cost
+						})
+					]
+				}, line.model))
+			})
+		]
+	});
+}
+//#endregion
+export { CostMeter, cost_meter_exports };

package/dist/components/assistant-ui/elements/data-table.d.ts

@@ -0,0 +1,72 @@
+import { ComponentProps } from "react";
+declare namespace data_table_d_exports {
+  export { DataTable, DataTableColumn, DataTableFormat, DataTableProps, DataTableRow, DataTableSort, DataTableValue };
+}
+export type DataTableValue = string | number | boolean | null | undefined | readonly (string | number)[];
+export type DataTableRow = Readonly<Record<string, DataTableValue>>;
+export type DataTableFormat = {
+  kind: "text";
+} | {
+  kind: "number";
+  decimals?: number | undefined;
+  compact?: boolean | undefined;
+  unit?: string | undefined;
+} | {
+  kind: "currency";
+  currency: string;
+  decimals?: number | undefined;
+  compact?: boolean | undefined;
+} | {
+  kind: "percent";
+  decimals?: number | undefined;
+  basis?: "fraction" | "unit" | undefined;
+} | {
+  kind: "delta";
+  decimals?: number | undefined;
+  unit?: string | undefined;
+  upIsGood?: boolean | undefined;
+} | {
+  kind: "date";
+  style?: "date" | "datetime" | "relative" | undefined;
+} | {
+  kind: "boolean";
+  trueLabel?: string | undefined;
+  falseLabel?: string | undefined;
+} | {
+  kind: "link";
+  hrefKey?: string | undefined;
+} | {
+  kind: "badge";
+  tones?: Readonly<Record<string, "neutral" | "success" | "warning" | "danger">> | undefined;
+} | {
+  kind: "list";
+  max?: number | undefined;
+};
+export interface DataTableColumn {
+  key: string;
+  label: string;
+  format?: DataTableFormat | undefined;
+  align?: "start" | "end" | undefined;
+  sortable?: boolean | undefined;
+  priority?: "primary" | "secondary" | undefined;
+  width?: string | undefined;
+}
+export interface DataTableSort {
+  key: string;
+  direction: "asc" | "desc";
+}
+export interface DataTableProps extends Omit<ComponentProps<"div">, "children"> {
+  columns: readonly DataTableColumn[];
+  rows: readonly DataTableRow[];
+  rowKey?: string | undefined;
+  caption?: string | undefined;
+  defaultSort?: DataTableSort | undefined;
+  sort?: DataTableSort | null | undefined;
+  onSortChange?: ((sort: DataTableSort | null) => void) | undefined;
+  locale?: string | undefined;
+  emptyMessage?: string | undefined;
+  relativeTo?: number | undefined;
+}
+export declare function DataTable({ columns, rows, rowKey, caption, defaultSort, sort, onSortChange, locale, emptyMessage, relativeTo, className, ...props }: DataTableProps): import("react").JSX.Element;
+//#endregion
+export { data_table_d_exports };