@humain/ui 2.1.63 → 2.1.65

package/dist/index195.js

@@ -1,734 +1,153 @@
-import { assertNever, cn } from "./index2.js";
-import { Button } from "./index5.js";
-import { Badge } from "./index14.js";
-import { Avatar } from "./index70.js";
-import { FileTypeIcon } from "./index115.js";
-import { ArrowDown, ArrowUp, ChevronsUp, Filter, Maximize2, MessageSquare, Minus, Paperclip, Pencil, Plus, Tag, Trash2, UserRound, X } from "lucide-react";
+"use client";
+import { cn } from "./index2.js";
+import { Popover, PopoverPopup, PopoverTrigger } from "./index102.js";
+import { Tag as Tag$1 } from "./index109.js";
+import { Command as CommandNamespace, CommandEmpty, CommandGroup, CommandItem, CommandList } from "./index120.js";
+import { Check, ChevronDown, Plus } from "lucide-react";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/organisms/content/History/History.tsx
-var historyEventCategoryConfig = {
-	create: {
-		label: "Create",
-		Icon: Plus,
-		badgeClassName: "bg-success/10 text-success ring-background dark:ring-card",
-		actionClassName: "text-card-foreground"
-	},
-	"update-fields": {
-		label: "Update fields",
-		Icon: Pencil,
-		badgeClassName: "bg-info/10 text-info ring-background dark:ring-card",
-		actionClassName: "text-card-foreground"
-	},
-	reassign: {
-		label: "Reassign people",
-		Icon: UserRound,
-		badgeClassName: "bg-primary/10 text-primary ring-background dark:ring-card",
-		actionClassName: "text-card-foreground"
-	},
-	tags: {
-		label: "Tags",
-		Icon: Tag,
-		badgeClassName: "bg-info/10 text-info ring-background dark:ring-card",
-		actionClassName: "text-card-foreground"
-	},
-	attachment: {
-		label: "Attachment",
-		Icon: Paperclip,
-		badgeClassName: "bg-info/10 text-info ring-background dark:ring-card",
-		actionClassName: "text-card-foreground"
-	},
-	comment: {
-		label: "Comment",
-		Icon: MessageSquare,
-		badgeClassName: "bg-warning/10 text-warning ring-background dark:ring-card",
-		actionClassName: "text-card-foreground"
-	},
-	"delete-comment": {
-		label: "Delete comment",
-		Icon: Trash2,
-		badgeClassName: "bg-destructive/10 text-destructive ring-background dark:ring-card",
-		actionClassName: "text-card-foreground"
-	},
-	"delete-record": {
-		label: "Delete record",
-		Icon: Trash2,
-		badgeClassName: "bg-destructive/10 text-destructive ring-background dark:ring-card",
-		actionClassName: "text-card-foreground"
-	}
-};
-var historyHeaderActionConfig = {
-	filter: {
-		label: "Filter history",
-		Icon: Filter
-	},
-	expand: {
-		label: "Expand history panel",
-		Icon: Maximize2
-	},
-	close: {
-		label: "Close history panel",
-		Icon: X
-	}
-};
-var toneTextClass = {
-	primary: "text-card-foreground",
-	success: "text-card-foreground",
-	info: "text-card-foreground",
-	warning: "text-card-foreground",
-	destructive: "text-card-foreground",
-	muted: "text-card-foreground"
-};
-var toneDotClass = {
-	primary: "bg-primary",
-	success: "bg-success",
-	info: "bg-info",
-	warning: "bg-warning",
-	destructive: "bg-destructive",
-	muted: "bg-muted-foreground"
-};
-var priorityConfig = {
-	low: {
-		Icon: ArrowDown,
-		className: "text-card-foreground"
-	},
-	medium: {
-		Icon: Minus,
-		className: "text-card-foreground"
-	},
-	important: {
-		Icon: ChevronsUp,
-		className: "text-card-foreground"
-	},
-	urgent: {
-		Icon: ArrowUp,
-		className: "text-card-foreground"
-	}
-};
-var historyDisclosureRevealClassName = "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1 motion-safe:duration-150";
-function getActorFallback(actor) {
-	return actor.fallback ?? actor.name;
-}
-function getEventCount(groups) {
-	return groups.reduce((count, group) => count + group.events.length, 0);
-}
-function getEventPositions(groups) {
-	const positions = /* @__PURE__ */ new Map();
-	let position = 1;
-	for (const group of groups) for (const event of group.events) {
-		positions.set(event.id, position);
-		position += 1;
-	}
-	return positions;
-}
-function getCollectionEventValueCount(event) {
-	return (event.added?.length ?? 0) + (event.removed?.length ?? 0);
-}
-function getCollapsibleSummary(event, threshold) {
-	switch (event.type) {
-		case "update-fields": return event.changes.length >= threshold ? `${event.changes.length} Fields` : null;
-		case "tags": return getCollectionEventValueCount(event) >= threshold ? getDeltaSummary(event.added, event.removed) : null;
-		case "attachment": return getCollectionEventValueCount(event) >= threshold ? getDeltaSummary(event.added, event.removed) : null;
-		case "delete-comment": return event.originalText ? "deleted comment" : null;
-		case "create":
-		case "reassign":
-		case "comment":
-		case "delete-record": return null;
-		default: return assertNever(event);
-	}
-}
-function isCollapsibleEvent(event, threshold) {
-	return getCollapsibleSummary(event, threshold) !== null;
-}
-function getDefaultExpandedEventIds(groups, threshold, autoExpandNewestLargeEdit) {
-	const ids = /* @__PURE__ */ new Set();
-	let didAutoExpandLargeEdit = false;
-	for (const group of groups) for (const event of group.events) {
-		if (event.defaultExpanded === true && isCollapsibleEvent(event, threshold)) ids.add(event.id);
-		if (autoExpandNewestLargeEdit && !didAutoExpandLargeEdit && event.defaultExpanded !== false && event.type === "update-fields" && event.changes.length >= threshold) {
-			ids.add(event.id);
-			didAutoExpandLargeEdit = true;
-		}
-	}
-	return Array.from(ids);
-}
-function getDeltaSummary(added, removed) {
-	const parts = [];
-	if (added?.length) parts.push(`+${added.length}`);
-	if (removed?.length) parts.push(`-${removed.length}`);
-	return parts.join(" ");
-}
-function useExpandedEventIds({ groups, threshold, autoExpandNewestLargeEdit, expandedEventIds, defaultExpandedEventIds, onExpandedEventIdsChange }) {
-	const computedDefaultIds = React.useMemo(() => defaultExpandedEventIds ?? getDefaultExpandedEventIds(groups, threshold, autoExpandNewestLargeEdit), [
-		autoExpandNewestLargeEdit,
-		defaultExpandedEventIds,
-		groups,
-		threshold
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/content/GroupingControls/GroupingControls.tsx
+function GroupingControls({ table, groupableColumns: groupableColumnsProp, placeholder = "Group by...", maxLevels, variant, size = "md", className }) {
+	const [open, setOpen] = React.useState(false);
+	const grouping = table.getState().grouping;
+	const allGroupableColumns = React.useMemo(() => {
+		return table.getAllColumns().filter((col) => {
+			if (groupableColumnsProp) return groupableColumnsProp.includes(col.id);
+			return col.getCanGroup();
+		}).map((col) => ({
+			id: col.id,
+			label: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id.charAt(0).toUpperCase() + col.id.slice(1)
+		}));
+	}, [table, groupableColumnsProp]);
+	const isMaxLevelsReached = maxLevels !== void 0 && grouping.length >= maxLevels;
+	const displayLabel = React.useMemo(() => {
+		if (grouping.length === 0) return placeholder;
+		return grouping.map((id) => {
+			return allGroupableColumns.find((c) => c.id === id)?.label || id;
+		}).join(", ");
+	}, [
+		grouping,
+		allGroupableColumns,
+		placeholder
 	]);
-	const [internalIds, setInternalIds] = React.useState(computedDefaultIds);
-	const isControlled = expandedEventIds !== void 0;
-	const activeIds = isControlled ? expandedEventIds : internalIds;
-	const setExpanded = React.useCallback((eventId, nextExpanded) => {
-		const next = new Set(activeIds);
-		if (nextExpanded) next.add(eventId);
-		else next.delete(eventId);
-		const nextIds = Array.from(next);
-		if (!isControlled) setInternalIds(nextIds);
-		onExpandedEventIdsChange?.(nextIds);
+	const handleSelect = React.useCallback((columnId) => {
+		if (grouping.indexOf(columnId) >= 0) {
+			const newGrouping = grouping.filter((id) => id !== columnId);
+			table.setGrouping(newGrouping);
+		} else {
+			if (maxLevels !== void 0 && grouping.length >= maxLevels) return;
+			const newGrouping = [...grouping, columnId];
+			table.setGrouping(newGrouping);
+		}
 	}, [
-		activeIds,
-		isControlled,
-		onExpandedEventIdsChange
+		grouping,
+		table,
+		maxLevels
 	]);
-	return {
-		expandedIdSet: React.useMemo(() => new Set(activeIds), [activeIds]),
-		setExpanded
+	const getSelectionOrder = (columnId) => {
+		const index = grouping.indexOf(columnId);
+		return index >= 0 ? index + 1 : null;
 	};
-}
-function HistoryMiniPerson({ person }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: "inline-flex min-w-0 items-center gap-1",
-		children: [/* @__PURE__ */ jsx("span", {
-			"data-slot": "history-mini-person-avatar",
-			"aria-hidden": "true",
-			className: "shrink-0",
-			children: /* @__PURE__ */ jsx(Avatar, {
-				src: person.avatarSrc,
-				fallback: getActorFallback(person),
-				alt: "",
-				size: "xs",
-				shape: "circle",
-				className: "size-4"
-			})
-		}), /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: person.name
-		})]
-	});
-}
-function HistoryValue({ value, state = "current", className }) {
-	const stateClassName = cn((state === "previous" || state === "removed") && "text-secondary-foreground line-through decoration-current/60", state === "added" && "text-card-foreground", state === "removed" && "text-secondary-foreground");
-	switch (value.type) {
-		case "status": {
-			const tone = value.tone ?? "info";
-			return /* @__PURE__ */ jsxs("span", {
-				"data-slot": "history-value",
-				className: cn("inline-flex min-w-0 items-center gap-1 font-medium", toneTextClass[tone], stateClassName, className),
-				children: [/* @__PURE__ */ jsx("span", {
-					"aria-hidden": "true",
-					className: cn("size-1.5 rounded-full", toneDotClass[tone])
-				}), /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: value.label
-				})]
-			});
-		}
-		case "priority": {
-			const { Icon, className: priorityClassName } = priorityConfig[value.priority ?? "medium"];
-			return /* @__PURE__ */ jsxs("span", {
-				"data-slot": "history-value",
-				className: cn("inline-flex min-w-0 items-center gap-1 font-medium", priorityClassName, stateClassName, className),
-				children: [/* @__PURE__ */ jsx(Icon, {
-					"aria-hidden": "true",
-					className: "size-3.5 shrink-0"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: value.label
-				})]
-			});
-		}
-		case "person": return /* @__PURE__ */ jsx("span", {
-			"data-slot": "history-value",
-			className: cn("inline-flex min-w-0 items-center font-medium text-card-foreground", stateClassName, className),
-			children: /* @__PURE__ */ jsx(HistoryMiniPerson, { person: value.person })
-		});
-		case "date": return /* @__PURE__ */ jsx("span", {
-			"data-slot": "history-value",
-			className: cn("inline-block min-w-0 truncate font-mono text-card-foreground", stateClassName, className),
-			children: value.value
-		});
-		case "number": return /* @__PURE__ */ jsxs("span", {
-			"data-slot": "history-value",
-			className: cn("inline-flex min-w-0 items-baseline gap-1 font-mono text-card-foreground", stateClassName, className),
-			children: [/* @__PURE__ */ jsx("span", { children: value.value }), value.unit && /* @__PURE__ */ jsx("span", {
-				className: "text-secondary-foreground",
-				children: value.unit
-			})]
-		});
-		case "tag": return /* @__PURE__ */ jsxs("span", {
-			"data-slot": "history-value",
-			className: cn("inline-flex min-w-0 items-center gap-0.5 font-medium", toneTextClass[value.tone ?? "primary"], stateClassName, className),
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: "#"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: value.label
-			})]
-		});
-		case "boolean": {
-			const label = value.value ? value.trueLabel ?? "On" : value.falseLabel ?? "Off";
-			const tone = value.value ? "success" : "muted";
-			return /* @__PURE__ */ jsxs("span", {
-				"data-slot": "history-value",
-				className: cn("inline-flex min-w-0 items-center gap-1 font-medium", toneTextClass[tone], stateClassName, className),
-				children: [/* @__PURE__ */ jsx("span", {
-					"aria-hidden": "true",
-					className: cn("size-1.5 rounded-full", toneDotClass[tone])
-				}), /* @__PURE__ */ jsx("span", { children: label })]
-			});
-		}
-		case "file": return /* @__PURE__ */ jsxs("span", {
-			"data-slot": "history-value",
-			className: cn("inline-flex min-w-0 items-center gap-1 font-medium text-card-foreground", stateClassName, className),
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: "shrink-0",
-				children: /* @__PURE__ */ jsx(FileTypeIcon, {
-					extension: value.extension,
-					fileType: value.extension ? void 0 : "document",
-					size: "xs"
-				})
-			}), /* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: value.name
-			})]
-		});
-		case "text": return /* @__PURE__ */ jsx("span", {
-			"data-slot": "history-value",
-			className: cn("inline-block min-w-0 truncate text-card-foreground", stateClassName, className),
-			children: value.value
-		});
-		case "empty": return /* @__PURE__ */ jsx("span", {
-			"data-slot": "history-value",
-			className: cn("inline-block min-w-0 truncate italic text-secondary-foreground", className),
-			children: value.label ?? "Empty"
-		});
-		default: return assertNever(value);
-	}
-}
-function HistoryFieldChangeRow({ change }) {
-	const hasDelta = (change.added?.length ?? 0) + (change.removed?.length ?? 0) > 0;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "history-field-change",
-		className: "flex min-w-0 items-start gap-2 text-sm leading-5",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "min-w-[72px] shrink-0 font-semibold text-secondary-foreground",
-			children: change.label
-		}), /* @__PURE__ */ jsx("span", {
-			className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1",
-			children: hasDelta ? /* @__PURE__ */ jsxs(Fragment, { children: [change.added?.map((value, index) => /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex min-w-0 items-center gap-1",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "font-mono font-semibold text-secondary-foreground",
-					children: "+"
-				}), /* @__PURE__ */ jsx(HistoryValue, {
-					value,
-					state: "added"
-				})]
-			}, `added:${change.id}:${index}`)), change.removed?.map((value, index) => /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex min-w-0 items-center gap-1",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "font-mono font-semibold text-secondary-foreground",
-					children: "-"
-				}), /* @__PURE__ */ jsx(HistoryValue, {
-					value,
-					state: "removed"
-				})]
-			}, `removed:${change.id}:${index}`))] }) : /* @__PURE__ */ jsxs(Fragment, { children: [change.from && /* @__PURE__ */ jsx(HistoryValue, {
-				value: change.from,
-				state: "previous"
-			}), change.to && /* @__PURE__ */ jsx(HistoryValue, { value: change.to })] })
-		})]
-	});
-}
-function HistoryCollectionChange({ label, added, removed }) {
-	return /* @__PURE__ */ jsx(HistoryFieldChangeRow, { change: {
-		id: label.toLowerCase().replace(/\s+/g, "-"),
-		label,
-		added,
-		removed
-	} });
-}
-function HistoryCollapsedSummaryButton({ event, expanded, summary, controlsId, onToggle }) {
-	const isDeleteComment = event.type === "delete-comment";
-	const buttonLabel = isDeleteComment ? expanded ? "Hide" : "View" : expanded ? "Show less" : "Show all";
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		"data-slot": "history-collapse-trigger",
-		"aria-expanded": expanded,
-		"aria-controls": controlsId,
-		onClick: onToggle,
-		className: cn("group/history-collapse flex min-h-11 w-full min-w-0 items-center gap-2 rounded-lg border border-border px-2.5 py-2 text-left text-sm leading-5 sm:min-h-0 sm:py-1", "transition-[background-color,border-color,box-shadow,transform] duration-150 ease-out motion-reduce:transition-none", "hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-[0.99] motion-reduce:active:scale-100", isDeleteComment ? "hover:border-destructive/30" : "hover:border-primary/30", isDeleteComment && "border-dashed py-3"),
-		children: [
-			isDeleteComment ? /* @__PURE__ */ jsx(Trash2, {
-				"aria-hidden": "true",
-				className: "size-4 shrink-0 text-destructive motion-safe:transition-transform motion-safe:duration-150 motion-safe:group-hover/history-collapse:scale-105"
-			}) : /* @__PURE__ */ jsx(ChevronIndicator, { expanded }),
-			/* @__PURE__ */ jsx("span", {
-				className: "min-w-0 flex-1 text-secondary-foreground",
-				children: isDeleteComment ? summary : event.type === "tags" ? "Tags" : "Updated"
-			}),
-			!isDeleteComment && /* @__PURE__ */ jsx("span", {
-				className: "min-w-0 flex-1 truncate font-semibold text-foreground",
-				children: summary
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "shrink-0 text-xs font-medium text-secondary-foreground motion-safe:transition-transform motion-safe:duration-150 motion-safe:group-hover/history-collapse:translate-x-0.5",
-				children: buttonLabel
-			})
-		]
-	});
-}
-function ChevronIndicator({ expanded }) {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		viewBox: "0 0 16 16",
-		className: cn("size-4 shrink-0 text-muted-foreground transition-[color,transform] duration-150 ease-out motion-reduce:transition-none group-hover/history-collapse:text-primary", expanded && "rotate-180"),
-		children: /* @__PURE__ */ jsx("path", {
-			d: "M4 6l4 4 4-4",
-			fill: "none",
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "1.5"
-		})
-	});
-}
-function HistoryEventBody({ event, threshold, expanded, contentId, onToggleExpanded }) {
-	const category = historyEventCategoryConfig[event.type];
-	const summary = getCollapsibleSummary(event, threshold);
-	switch (event.type) {
-		case "create": return /* @__PURE__ */ jsxs("p", {
-			className: "min-w-0 text-sm font-medium leading-5",
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: category.actionClassName,
-					children: event.actionLabel ?? "Created the project"
-				}),
-				" ",
-				/* @__PURE__ */ jsxs("span", {
-					className: "text-card-foreground",
-					children: [
-						"\"",
-						event.target,
-						"\""
-					]
-				})
-			]
-		});
-		case "delete-record": return /* @__PURE__ */ jsxs("p", {
-			className: "min-w-0 text-sm font-medium leading-5",
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: category.actionClassName,
-					children: event.actionLabel ?? "Deleted the record"
-				}),
-				" ",
-				/* @__PURE__ */ jsxs("span", {
-					className: "text-card-foreground",
-					children: [
-						"\"",
-						event.target,
-						"\""
-					]
-				})
-			]
-		});
-		case "update-fields":
-			if (summary !== null) return /* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-col gap-2",
-				children: [/* @__PURE__ */ jsx(HistoryCollapsedSummaryButton, {
-					event,
-					expanded,
-					summary,
-					controlsId: contentId,
-					onToggle: onToggleExpanded
-				}), /* @__PURE__ */ jsx("div", {
-					id: contentId,
-					hidden: !expanded,
-					className: cn("flex min-w-0 flex-col gap-2 ps-2", historyDisclosureRevealClassName),
-					children: expanded && event.changes.map((change) => /* @__PURE__ */ jsx(HistoryFieldChangeRow, { change }, change.id))
-				})]
-			});
-			return /* @__PURE__ */ jsx("div", {
-				className: "flex min-w-0 flex-col gap-2",
-				children: event.changes.map((change) => /* @__PURE__ */ jsx(HistoryFieldChangeRow, { change }, change.id))
-			});
-		case "reassign": return /* @__PURE__ */ jsx(HistoryFieldChangeRow, { change: {
-			id: `${event.id}:reassign`,
-			label: event.fieldLabel ?? "Assignee",
-			removed: event.from?.map((person) => ({
-				type: "person",
-				person
-			})),
-			added: event.to.map((person) => ({
-				type: "person",
-				person
-			}))
-		} });
-		case "tags":
-			if (summary !== null) return /* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-col gap-2",
-				children: [/* @__PURE__ */ jsx(HistoryCollapsedSummaryButton, {
-					event,
-					expanded,
-					summary,
-					controlsId: contentId,
-					onToggle: onToggleExpanded
-				}), /* @__PURE__ */ jsx("div", {
-					id: contentId,
-					hidden: !expanded,
-					className: historyDisclosureRevealClassName,
-					children: expanded && /* @__PURE__ */ jsx(HistoryCollectionChange, {
-						label: event.fieldLabel ?? "Tags",
-						added: event.added,
-						removed: event.removed
-					})
-				})]
-			});
-			return /* @__PURE__ */ jsx(HistoryCollectionChange, {
-				label: event.fieldLabel ?? "Tags",
-				added: event.added,
-				removed: event.removed
-			});
-		case "attachment":
-			if (summary !== null) return /* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-col gap-2",
-				children: [/* @__PURE__ */ jsx(HistoryCollapsedSummaryButton, {
-					event,
-					expanded,
-					summary,
-					controlsId: contentId,
-					onToggle: onToggleExpanded
-				}), /* @__PURE__ */ jsx("div", {
-					id: contentId,
-					hidden: !expanded,
-					className: historyDisclosureRevealClassName,
-					children: expanded && /* @__PURE__ */ jsx(HistoryCollectionChange, {
-						label: event.fieldLabel ?? "Attachment",
-						added: event.added,
-						removed: event.removed
-					})
-				})]
-			});
-			return /* @__PURE__ */ jsx(HistoryCollectionChange, {
-				label: event.fieldLabel ?? "Attachment",
-				added: event.added,
-				removed: event.removed
-			});
-		case "comment": return /* @__PURE__ */ jsx("blockquote", {
-			className: "rounded-xl border border-warning/20 bg-warning/10 px-3 py-2 text-sm leading-5 text-card-foreground",
-			children: event.comment
-		});
-		case "delete-comment": return /* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-col gap-2",
-			children: [/* @__PURE__ */ jsx(HistoryCollapsedSummaryButton, {
-				event,
-				expanded,
-				summary: event.actionLabel ?? `Comment by ${event.commentAuthor.name} was deleted`,
-				controlsId: contentId,
-				onToggle: onToggleExpanded
-			}), /* @__PURE__ */ jsx("div", {
-				id: contentId,
-				hidden: !expanded,
-				className: historyDisclosureRevealClassName,
-				children: expanded && event.originalText && /* @__PURE__ */ jsx("blockquote", {
-					className: "rounded-lg border border-dashed border-border bg-muted/40 px-3 py-2 text-sm leading-5 text-secondary-foreground",
-					children: event.originalText
-				})
+	const availableColumns = React.useMemo(() => {
+		return allGroupableColumns.filter((col) => !grouping.includes(col.id));
+	}, [allGroupableColumns, grouping]);
+	const handleRemove = React.useCallback((columnId) => {
+		const newGrouping = grouping.filter((id) => id !== columnId);
+		table.setGrouping(newGrouping);
+	}, [grouping, table]);
+	const handleAddColumn = React.useCallback((columnId) => {
+		if (maxLevels !== void 0 && grouping.length >= maxLevels) return;
+		const newGrouping = [...grouping, columnId];
+		table.setGrouping(newGrouping);
+		setOpen(false);
+	}, [
+		grouping,
+		table,
+		maxLevels
+	]);
+	if (variant === "chips") {
+		const addColumnPopover = availableColumns.length > 0 && !isMaxLevelsReached ? /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				className: cn("inline-flex items-center justify-center rounded-md", "border border-dashed border-input bg-background", "hover:bg-accent hover:border-solid", "transition-[background-color,border-color] duration-150 ease-out motion-reduce:transition-none", size === "sm" ? "h-6 px-2 text-xs" : "h-7 px-2 text-sm"),
+				"aria-label": "Add grouping",
+				children: /* @__PURE__ */ jsx(Plus, { className: cn("size-3.5 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-45") })
+			}), /* @__PURE__ */ jsx(PopoverPopup, {
+				side: "bottom",
+				align: "start",
+				className: "min-w-[180px] w-max max-w-[280px] p-0",
+				children: /* @__PURE__ */ jsx(CommandNamespace, { children: /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No columns available" }), /* @__PURE__ */ jsx(CommandGroup, { children: availableColumns.map((column) => /* @__PURE__ */ jsx(CommandItem, {
+					value: column.id,
+					onSelect: () => handleAddColumn(column.id),
+					className: "cursor-pointer",
+					children: column.label
+				}, column.id)) })] }) })
 			})]
+		}) : null;
+		return /* @__PURE__ */ jsxs("div", {
+			"data-slot": "grouping-controls",
+			role: "toolbar",
+			"aria-label": "Grouping controls",
+			className: cn("flex flex-wrap items-center gap-2", className),
+			children: [grouping.length === 0 ? /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: placeholder
+			}) : grouping.map((columnId) => {
+				const column = allGroupableColumns.find((c) => c.id === columnId);
+				if (!column) return null;
+				return /* @__PURE__ */ jsx(Tag$1, {
+					size: size === "sm" ? "sm" : "md",
+					removable: true,
+					onRemove: () => handleRemove(columnId),
+					children: column.label
+				}, columnId);
+			}), addColumnPopover]
 		});
-		default: return assertNever(event);
 	}
-}
-function HistoryActorNode({ actor, type, showConnector }) {
-	const category = historyEventCategoryConfig[type];
-	const Icon = category.Icon;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "history-event-node",
-		"aria-hidden": "true",
-		className: "relative flex w-8 shrink-0 self-stretch justify-center",
-		children: [
-			/* @__PURE__ */ jsx(Avatar, {
-				src: actor.avatarSrc,
-				fallback: getActorFallback(actor),
-				alt: "",
-				size: "sm",
-				shape: "circle",
-				className: "relative z-10"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: cn("absolute left-[22px] top-[21px] z-20 flex size-4 items-center justify-center rounded-full ring-1 motion-safe:transition-[box-shadow,transform] motion-safe:duration-150 motion-safe:group-hover/history-event:scale-105 group-hover/history-event:shadow-sm", category.badgeClassName),
-				children: /* @__PURE__ */ jsx(Icon, { className: "size-3" })
-			}),
-			showConnector && /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: "absolute bottom-[-12px] top-9 w-px rounded-full bg-border"
-			})
-		]
-	});
-}
-function HistoryActorFlags({ flags }) {
-	if (!flags?.length) return null;
-	return /* @__PURE__ */ jsx("span", {
-		className: "inline-flex min-w-0 items-center gap-1",
-		children: flags.map((flag) => /* @__PURE__ */ jsx(Badge, {
-			variant: "soft",
-			color: "purple",
-			size: "xs",
-			children: flag
-		}, flag))
-	});
-}
-function HistoryItem({ event, threshold, isLastInGroup, position, total, expanded, onExpandedChange }) {
-	const category = historyEventCategoryConfig[event.type];
-	const headerId = React.useId();
-	const contentId = React.useId();
-	return /* @__PURE__ */ jsxs("article", {
-		"data-slot": "history-event",
-		"aria-labelledby": headerId,
-		"aria-setsize": total,
-		"aria-posinset": position,
-		className: "group/history-event flex min-w-0 gap-4 rounded-lg py-1 transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-muted/20",
-		children: [/* @__PURE__ */ jsx(HistoryActorNode, {
-			actor: event.actor,
-			type: event.type,
-			showConnector: !isLastInGroup
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-1 flex-col gap-1",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 items-center gap-2",
-				children: [/* @__PURE__ */ jsxs("div", {
-					id: headerId,
-					className: "flex min-w-0 items-center gap-1.5 font-bold text-sm leading-5 text-card-foreground",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: event.actor.name
-						}),
-						/* @__PURE__ */ jsx(HistoryActorFlags, { flags: event.actorFlags }),
-						/* @__PURE__ */ jsx("span", {
-							className: "sr-only",
-							children: category.label
-						})
-					]
-				}), event.dateTime ? /* @__PURE__ */ jsx("time", {
-					dateTime: event.dateTime,
-					className: "ms-auto shrink-0 text-xs leading-4 text-secondary-foreground",
-					children: event.timestamp
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "ms-auto shrink-0 text-xs leading-4 text-secondary-foreground",
-					children: event.timestamp
-				})]
-			}), /* @__PURE__ */ jsx(HistoryEventBody, {
-				event,
-				threshold,
-				expanded,
-				contentId,
-				onToggleExpanded: () => onExpandedChange(!expanded)
-			})]
-		})]
-	});
-}
-function HistoryGroupSeparator({ label }) {
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "history-group-separator",
-		className: "flex w-full items-center gap-2 text-sm font-medium leading-5 text-secondary-foreground",
-		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: "h-px min-w-0 flex-1 bg-border"
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			"data-slot": "grouping-controls",
+			"aria-label": "Group by column",
+			className: cn("inline-flex items-center justify-between gap-2 whitespace-nowrap", "border border-input bg-background hover:bg-accent hover:text-accent-foreground", "rounded-md font-medium", "transition-[color,background-color,border-color,transform] duration-150 ease-out motion-reduce:transition-none", "active:translate-y-px", size === "sm" ? "h-8 px-3 text-sm" : "h-9 px-3.5 py-2.5 text-sm", className),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("truncate", grouping.length === 0 && "text-muted-foreground"),
+				children: displayLabel
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-4 shrink-0 opacity-50 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-180") })]
+		}), /* @__PURE__ */ jsx(PopoverPopup, {
+			side: "bottom",
+			align: "start",
+			className: "min-w-[200px] w-max max-w-[300px] p-0",
+			children: /* @__PURE__ */ jsx(CommandNamespace, { children: /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No groupable columns" }), /* @__PURE__ */ jsx(CommandGroup, { children: allGroupableColumns.map((column) => {
+				const isSelected = grouping.includes(column.id);
+				const order = getSelectionOrder(column.id);
+				const isDisabled = !isSelected && isMaxLevelsReached;
+				return /* @__PURE__ */ jsxs(CommandItem, {
+					value: column.id,
+					onSelect: () => handleSelect(column.id),
+					disabled: isDisabled,
+					"data-disabled": isDisabled,
+					"data-slot": "combobox-item",
+					className: cn("flex items-center justify-between gap-2 px-2 py-1.5 cursor-pointer", isSelected && "bg-accent"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [isSelected && /* @__PURE__ */ jsx(Check, {
+							className: "size-4 text-primary motion-safe:animate-in motion-safe:zoom-in-75 motion-safe:duration-150",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsx("span", { children: column.label })]
+					}), order !== null && /* @__PURE__ */ jsx("span", {
+						className: "inline-flex size-5 items-center justify-center rounded-full bg-primary/10 text-[11px] font-semibold text-primary motion-safe:animate-in motion-safe:zoom-in-75 motion-safe:duration-150",
+						children: order
+					})]
+				}, column.id);
+			}) })] }) })
 		})]
 	});
 }
-function HistoryHeader({ title, actions }) {
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "history-header",
-		className: "flex min-w-0 items-start gap-3 pb-2",
-		children: [/* @__PURE__ */ jsx("h2", {
-			className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground",
-			children: title
-		}), actions?.length ? /* @__PURE__ */ jsx("div", {
-			className: "flex shrink-0 items-center gap-1",
-			children: actions.map((action) => {
-				const config = historyHeaderActionConfig[action.id];
-				const Icon = config.Icon;
-				return /* @__PURE__ */ jsx(Button, {
-					type: "button",
-					appearance: "ghost",
-					variant: "secondary",
-					size: "icon-xs",
-					shape: "rounded",
-					iconOnly: true,
-					disabled: action.disabled,
-					"aria-label": action.label ?? config.label,
-					onClick: action.onClick,
-					className: "size-11 text-secondary-foreground hover:text-foreground sm:size-6",
-					children: /* @__PURE__ */ jsx(Icon, {
-						"aria-hidden": "true",
-						className: "size-4"
-					})
-				}, action.id);
-			})
-		}) : null]
-	});
-}
-var History = React.forwardRef(({ title = "History", groups, actions, loading, ariaLabel, emptyMessage = "No history events", collapsibleChangeThreshold = 5, autoExpandNewestLargeEdit = true, expandedEventIds, defaultExpandedEventIds, onExpandedEventIdsChange, className, ...props }, ref) => {
-	const totalEvents = React.useMemo(() => getEventCount(groups), [groups]);
-	const eventPositions = React.useMemo(() => getEventPositions(groups), [groups]);
-	const { expandedIdSet, setExpanded } = useExpandedEventIds({
-		groups,
-		threshold: collapsibleChangeThreshold,
-		autoExpandNewestLargeEdit,
-		expandedEventIds,
-		defaultExpandedEventIds,
-		onExpandedEventIdsChange
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		"data-slot": "history",
-		role: "feed",
-		"aria-label": ariaLabel ?? title,
-		"aria-busy": loading || void 0,
-		className: cn("flex w-full max-w-[400px] min-w-0 flex-col gap-4 overflow-hidden rounded-[var(--borderradius-rounded-box,12px)] border border-border bg-background p-6 shadow-lg", className),
-		...props,
-		children: [/* @__PURE__ */ jsx(HistoryHeader, {
-			title,
-			actions
-		}), loading && totalEvents === 0 ? /* @__PURE__ */ jsx("p", {
-			role: "status",
-			"aria-live": "polite",
-			className: "text-sm leading-5 text-secondary-foreground",
-			children: "Loading history"
-		}) : totalEvents === 0 ? /* @__PURE__ */ jsx("p", {
-			className: "text-sm leading-5 text-secondary-foreground",
-			children: emptyMessage
-		}) : /* @__PURE__ */ jsx("div", {
-			"data-slot": "history-groups",
-			className: "flex min-w-0 flex-col gap-4",
-			children: groups.map((group) => /* @__PURE__ */ jsxs("section", {
-				"data-slot": "history-group",
-				"aria-label": group.label,
-				className: "flex min-w-0 flex-col gap-2",
-				children: [/* @__PURE__ */ jsx(HistoryGroupSeparator, { label: group.label }), /* @__PURE__ */ jsx("div", {
-					className: "flex min-w-0 flex-col gap-4",
-					children: group.events.map((event, index) => /* @__PURE__ */ jsx(HistoryItem, {
-						event,
-						threshold: collapsibleChangeThreshold,
-						isLastInGroup: index === group.events.length - 1,
-						position: eventPositions.get(event.id) ?? 1,
-						total: totalEvents,
-						expanded: expandedIdSet.has(event.id),
-						onExpandedChange: (nextExpanded) => setExpanded(event.id, nextExpanded)
-					}, event.id))
-				})]
-			}, group.id))
-		})]
-	});
-});
-History.displayName = "History";
+GroupingControls.displayName = "GroupingControls";
 //#endregion
-export { History, HistoryValue, historyEventCategoryConfig, historyHeaderActionConfig };
+export { GroupingControls };
 
 //# sourceMappingURL=index195.js.map