@humain/ui 2.1.63 → 2.1.65

package/dist/index196.js

@@ -1,194 +1,734 @@
-import { cn } from "./index2.js";
+import { assertNever, cn } from "./index2.js";
 import { Button } from "./index5.js";
-import { Input } from "./index33.js";
-import { cva } from "class-variance-authority";
-import { Mail } from "lucide-react";
+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";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/organisms/content/InlineCTA/InlineCTA.tsx
-var inlineCTAVariants = cva("relative bg-background overflow-hidden shadow-xs", {
-	variants: { variant: {
-		bordered: "border border-border rounded-xl",
-		"full-width": "border-y border-border"
-	} },
-	defaultVariants: { variant: "bordered" }
-});
-function InlineCTAActions({ title, description, primaryLabel = "Changelog", onPrimaryClick, secondaryLabel = "Dismiss", onSecondaryClick, stackedActions = false, variant, className, ...props }) {
-	return /* @__PURE__ */ jsxs("section", {
-		"data-slot": "inline-cta",
-		"aria-label": typeof title === "string" ? title : "Call to action",
-		className: cn(inlineCTAVariants({ variant }), "flex flex-col gap-5 p-6", className),
-		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-0.5",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-lg font-semibold leading-7 text-foreground",
-				children: title
-			}), description && /* @__PURE__ */ jsx("p", {
-				className: "text-sm leading-5 text-muted-foreground",
-				children: description
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: cn("flex gap-3", stackedActions ? "flex-col w-full" : "flex-row items-center"),
-			children: stackedActions ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
-				appearance: "gradient",
-				variant: "primary",
-				size: "md",
-				onClick: onPrimaryClick,
-				className: "w-full",
-				children: primaryLabel
-			}), secondaryLabel && /* @__PURE__ */ jsx(Button, {
-				appearance: "outline",
-				variant: "secondary",
-				size: "md",
-				onClick: onSecondaryClick,
-				className: "w-full",
-				children: secondaryLabel
-			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [secondaryLabel && /* @__PURE__ */ jsx(Button, {
-				appearance: "outline",
-				variant: "secondary",
-				size: "md",
-				onClick: onSecondaryClick,
-				children: secondaryLabel
-			}), /* @__PURE__ */ jsx(Button, {
-				appearance: "gradient",
-				variant: "primary",
-				size: "md",
-				onClick: onPrimaryClick,
-				children: primaryLabel
-			})] })
+//#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
+	]);
+	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);
+	}, [
+		activeIds,
+		isControlled,
+		onExpandedEventIdsChange
+	]);
+	return {
+		expandedIdSet: React.useMemo(() => new Set(activeIds), [activeIds]),
+		setExpanded
+	};
+}
+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 InlineCTAEmail({ title, description, inputLabel = "Subscribe to updates", inputPlaceholder = "you@humain.ai", submitLabel = "Subscribe", onSubmit, stackedLayout = false, defaultValue = "", loading = false, variant, className, ...props }) {
-	const [email, setEmail] = React.useState(defaultValue);
-	const handleSubmit = (e) => {
-		e.preventDefault();
-		onSubmit?.(email);
-	};
-	return /* @__PURE__ */ jsxs("section", {
-		"data-slot": "inline-cta",
-		"aria-label": typeof title === "string" ? title : "Subscribe",
-		className: cn(inlineCTAVariants({ variant }), "flex flex-col gap-5 p-6", className),
-		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-0.5",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-lg font-semibold leading-7 text-foreground",
-				children: title
-			}), description && /* @__PURE__ */ jsx("p", {
-				className: "text-sm leading-5 text-muted-foreground",
-				children: description
+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
 			})]
-		}), /* @__PURE__ */ jsxs("form", {
-			onSubmit: handleSubmit,
-			className: cn("flex gap-4", stackedLayout ? "flex-col w-full" : "flex-row items-end max-w-md"),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: cn(stackedLayout ? "w-full" : "flex-1"),
-				children: /* @__PURE__ */ jsx(Input, {
-					type: "email",
-					label: inputLabel,
-					placeholder: inputPlaceholder,
-					value: email,
-					onChange: (e) => setEmail(e.target.value),
-					startIcon: /* @__PURE__ */ jsx(Mail, {}),
-					required: true
+		});
+		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(Button, {
-				type: "submit",
-				appearance: "gradient",
-				variant: "primary",
-				size: "lg",
-				loading,
-				className: cn(stackedLayout && "w-full"),
-				children: submitLabel
+			}), /* @__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 InlineCTAImage({ title, description, imageSrc, imageAlt = "Featured image", showPlayButton = false, onPlayClick, primaryLabel = "Changelog", onPrimaryClick, secondaryLabel = "Dismiss", onSecondaryClick, stackedActions = false, variant, className, ...props }) {
-	return /* @__PURE__ */ jsxs("section", {
-		"data-slot": "inline-cta",
-		"aria-label": typeof title === "string" ? title : "Call to action",
-		className: cn(inlineCTAVariants({ variant }), "flex flex-col", className),
-		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "relative aspect-video w-full overflow-hidden",
+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("img", {
-					src: imageSrc,
-					alt: imageAlt,
-					loading: "lazy",
-					className: "absolute inset-0 size-full object-cover"
+				/* @__PURE__ */ jsx("span", {
+					className: category.actionClassName,
+					children: event.actionLabel ?? "Created the project"
 				}),
-				/* @__PURE__ */ jsx("div", { className: "absolute inset-0 border border-border rounded-t-xl" }),
-				showPlayButton && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: onPlayClick,
-					className: "absolute bottom-3 start-3 size-11 rounded-full bg-card/80 supports-backdrop-filter:backdrop-blur-sm flex items-center justify-center hover:bg-background transition-colors",
-					"aria-label": "Play video",
-					children: /* @__PURE__ */ jsx("svg", {
-						className: "size-4 ms-0.5 text-foreground",
-						fill: "currentColor",
-						viewBox: "0 0 16 16",
-						children: /* @__PURE__ */ jsx("path", { d: "M4 3.5v9l8-4.5-8-4.5z" })
-					})
+				" ",
+				/* @__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
+				})
+			})]
+		});
+		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 flex-col gap-5 p-4 border-x border-b border-border rounded-b-xl",
+			className: "flex min-w-0 flex-1 flex-col gap-1",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-0.5",
-				children: [/* @__PURE__ */ jsx("h3", {
-					className: "text-lg font-semibold leading-7 text-foreground",
-					children: title
-				}), description && /* @__PURE__ */ jsx("p", {
-					className: "text-sm leading-5 text-muted-foreground",
-					children: description
+				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("div", {
-				className: cn("flex gap-3", stackedActions ? "flex-col w-full" : "flex-row items-center"),
-				children: stackedActions ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
-					appearance: "gradient",
-					variant: "primary",
-					size: "md",
-					onClick: onPrimaryClick,
-					className: "w-full",
-					children: primaryLabel
-				}), secondaryLabel && /* @__PURE__ */ jsx(Button, {
-					appearance: "outline",
-					variant: "secondary",
-					size: "md",
-					onClick: onSecondaryClick,
-					className: "w-full",
-					children: secondaryLabel
-				})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [secondaryLabel && /* @__PURE__ */ jsx(Button, {
-					appearance: "outline",
-					variant: "secondary",
-					size: "md",
-					onClick: onSecondaryClick,
-					children: secondaryLabel
-				}), /* @__PURE__ */ jsx(Button, {
-					appearance: "gradient",
-					variant: "primary",
-					size: "md",
-					onClick: onPrimaryClick,
-					children: primaryLabel
-				})] })
+			}), /* @__PURE__ */ jsx(HistoryEventBody, {
+				event,
+				threshold,
+				expanded,
+				contentId,
+				onToggleExpanded: () => onExpandedChange(!expanded)
 			})]
 		})]
 	});
 }
-function InlineCTA(props) {
-	switch (props.type) {
-		case "actions": return /* @__PURE__ */ jsx(InlineCTAActions, { ...props });
-		case "email": return /* @__PURE__ */ jsx(InlineCTAEmail, { ...props });
-		case "image": return /* @__PURE__ */ jsx(InlineCTAImage, { ...props });
-		default: return null;
-	}
+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"
+		})]
+	});
 }
-InlineCTA.displayName = "InlineCTA";
+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";
 //#endregion
-export { InlineCTA, inlineCTAVariants };
+export { History, HistoryValue, historyEventCategoryConfig, historyHeaderActionConfig };
 
 //# sourceMappingURL=index196.js.map