@likec4/diagram 1.60.0 → 1.61.0

package/dist/navigationpanel/comparepanel/ComparePanel.mjs

@@ -1,139 +1,209 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { useCallbackRef } from "../../hooks/useCallbackRef.mjs";
+import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs";
+import { PortalToContainer } from "../../components/PortalToContainer.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
 import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.mjs";
 import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
 import { Tooltip as Tooltip$1 } from "../_common.mjs";
-import { ComparePanelControls } from "./ComparePanelControls.mjs";
 import { DriftsSummary } from "./DriftsSummary.mjs";
-import { css } from "@likec4/styles/css";
+import { LayoutDriftFrame } from "./LayoutDriftFrame.mjs";
+import { LayoutTypeSwitcher } from "./LayoutTypeSwitcher.mjs";
 import { memo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useIsMounted } from "@react-hookz/web";
-import { Button, Divider } from "@mantine/core";
-import { AnimatePresence } from "motion/react";
-import { HStack } from "@likec4/styles/jsx";
+import { ActionBar, Button, CloseButton } from "@mantine/core";
+import { AnimatePresence, LayoutGroup } from "motion/react";
+import { useDisclosure } from "@mantine/hooks";
+import { Box as Box$1, Txt } from "@likec4/styles/jsx";
 import { hstack, vstack } from "@likec4/styles/patterns";
 import * as m$1 from "motion/react-m";
 
-//#region src/navigationpanel/comparepanel/ComparePanel.tsx
+// src/navigationpanel/comparepanel/ComparePanel.tsx
 const variants = {
 	initial: {
 		opacity: 0,
-		translateX: -20
+		translateY: -4
 	},
 	animate: {
-		opacity: 1,
-		translateX: 0
+		opacity: [
+			.8,
+			.9,
+			1
+		],
+		translateY: 0
 	},
 	exit: {
 		opacity: 0,
-		translateX: -20
+		translateY: -20,
+		transition: {
+			duration: .2,
+			ease: [
+				.23,
+				1,
+				.32,
+				1
+			]
+		}
 	}
 };
 const ComparePanel = memo(() => {
+	const [driftsOpened, driftsPanel] = useDisclosure(true);
 	const portalProps = useMantinePortalProps();
-	const isMounted = useIsMounted();
 	const [ctx, ops] = useDiagramCompareLayout();
+	const isMounted = useIsMounted();
 	const [isProcessing, setIsProcessing] = useState(false);
 	const resetProcessing = () => {
 		setTimeout(() => {
 			if (isMounted()) setIsProcessing(false);
 		}, 500);
 	};
-	const onApplyLatest = useCallbackRef((e) => {
+	const onApplyLatest = useCallbackRef$1((e) => {
 		if (!ctx.canApplyLatest || ctx.layout === "auto") {
 			window.alert("Cannot apply changes from latest version when using auto layout. Please switch to manual layout first.");
 			return;
 		}
 		e.stopPropagation();
-		setIsProcessing(true);
+		setIsProcessing("sync");
 		setTimeout(() => {
 			ops.applyLatestToManual();
 			resetProcessing();
-		}, 200);
+		}, 100);
 	});
-	const onResetManualLayout = useCallbackRef((e) => {
+	const onResetManualLayout = useCallbackRef$1((e) => {
 		e.stopPropagation();
-		setIsProcessing(true);
+		setIsProcessing("reset");
 		setTimeout(() => {
 			ops.resetManualLayout();
 			resetProcessing();
-		}, 200);
+		}, 100);
 	});
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: ctx.state === "comparing" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(m$1.div, {
-		layout: "size",
-		layoutDependency: ctx.layout,
-		className: hstack({
-			gap: "2",
-			layerStyle: "likec4.panel",
-			position: "relative",
-			px: "2",
-			py: "1",
-			pl: "3",
-			pointerEvents: "all"
-		}),
-		variants,
-		initial: "initial",
-		animate: "animate",
-		exit: "exit",
-		children: /* @__PURE__ */ jsx(ComparePanelControls, {})
-	}, "ComparePanel"), /* @__PURE__ */ jsxs(m$1.div, {
-		layout: "size",
-		layoutDependency: ctx.layout,
-		variants,
-		initial: "initial",
-		animate: "animate",
-		exit: "exit",
-		className: vstack({
-			gap: "4",
-			layerStyle: "likec4.panel",
-			position: "relative",
-			p: "4",
-			pointerEvents: "all",
-			height: "auto",
-			overflow: "hidden",
-			maxHeight: "[calc(100cqh - 180px)]",
-			"@/md": { minWidth: "[200px]" }
-		}),
-		children: [/* @__PURE__ */ jsx(DriftsSummary, {}), ctx.canApplyLatest && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(m$1.div, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(PortalToContainer, { children: [/* @__PURE__ */ jsxs(ActionBar, {
+		opened: true,
+		withinPortal: false,
+		onClose: ops.toggleCompare,
+		children: [
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "default",
+				size: "compact-xs",
+				onClick: () => {
+					driftsPanel.toggle();
+				},
+				children: [driftsOpened ? "Hide" : "Show", " drifts"]
+			}),
+			/* @__PURE__ */ jsx(ActionBar.Divider, {}),
+			/* @__PURE__ */ jsx(LayoutTypeSwitcher, {
+				value: ctx.layout,
+				onChange: ops.switchLayout
+			}),
+			/* @__PURE__ */ jsx(ActionBar.Divider, {}),
+			/* @__PURE__ */ jsxs(Button, {
+				loading: isProcessing === "sync",
+				disabled: !ctx.canApplyLatest || ctx.layout === "auto" || isProcessing === "reset",
+				onClick: onApplyLatest,
+				size: "compact-xs",
+				rightSection: /* @__PURE__ */ jsx(Tooltip$1, {
+					onClick: stopPropagation,
+					position: "right-start",
+					...portalProps,
+					label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						"Applies changes from the latest auto-layouted",
+						/* @__PURE__ */ jsx("br", {}),
+						"to saved snapshot, preserving (as possible)",
+						/* @__PURE__ */ jsx("br", {}),
+						"manual adjustments.",
+						/* @__PURE__ */ jsx("br", {}),
+						/* @__PURE__ */ jsx("br", {}),
+						"You can undo this action."
+					] }),
+					children: /* @__PURE__ */ jsx(IconInfoCircle, {
+						size: 14,
+						stroke: 1.7,
+						opacity: .5
+					})
+				}),
+				children: ["Sync with latest", !ctx.canApplyLatest && /* @__PURE__ */ jsx(Box$1, {
+					textStyle: "xs",
+					children: "view type is changed"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				loading: isProcessing === "reset",
+				disabled: isProcessing === "sync",
+				variant: "default",
+				size: "compact-xs",
+				onClick: onResetManualLayout,
+				children: "Reset manual"
+			}),
+			/* @__PURE__ */ jsx(ActionBar.CloseButton, {})
+		]
+	}), /* @__PURE__ */ jsx(LayoutDriftFrame, {
+		layout: ctx.layout,
+		onClose: ops.toggleCompare
+	})] }), /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "popLayout",
+		children: driftsOpened && /* @__PURE__ */ jsxs(m$1.div, {
+			variants,
+			initial: "initial",
+			animate: "animate",
+			exit: "exit",
 			layout: "position",
-			className: css({ flex: "[0]" }),
-			children: [/* @__PURE__ */ jsx(Divider, {
-				orientation: "horizontal",
-				size: "xs",
-				mb: "xs"
-			}), /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(Tooltip$1, {
-				openDelay: 100,
-				disabled: ctx.layout !== "auto",
-				label: "Switch to manual layout to apply changes.",
-				...portalProps,
-				children: /* @__PURE__ */ jsx(Button, {
-					loading: isProcessing,
-					size: "xs",
-					color: "orange",
-					variant: "light",
-					onClick: onApplyLatest,
-					disabled: ctx.layout === "auto",
-					children: "Apply changes"
-				})
-			}), /* @__PURE__ */ jsx(Tooltip$1, {
-				openDelay: 100,
-				disabled: ctx.layout !== "manual",
-				label: "Reset manual layout",
-				...portalProps,
-				children: /* @__PURE__ */ jsx(Button, {
-					disabled: isProcessing,
-					size: "xs",
-					color: "orange",
-					variant: "subtle",
-					onClick: onResetManualLayout,
-					children: "Reset"
-				})
-			})] })]
-		}) })]
-	}, "ListOfDrifts")] }) });
+			className: vstack({
+				layerStyle: "likec4.panel",
+				position: "relative",
+				px: "0",
+				py: "0",
+				pointerEvents: "all",
+				height: "auto",
+				overflow: "hidden",
+				maxHeight: "[calc(100cqh - 180px)]",
+				"@/md": { minWidth: "[200px]" },
+				maxWidth: {
+					base: "[200px]",
+					"@/sm": "[250px]",
+					"@/md": "[300px]"
+				}
+			}),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: hstack({
+					gap: "2",
+					pl: "3",
+					pr: "2",
+					mt: "2"
+				}),
+				children: [
+					/* @__PURE__ */ jsx(Txt, {
+						medium: true,
+						size: "sm",
+						flex: "1",
+						children: "Layout drifts"
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						variant: "default",
+						size: "compact-xs",
+						fz: "xxs",
+						style: {
+							flex: 0,
+							minWidth: 100
+						},
+						onClick: (e) => {
+							e.stopPropagation();
+							ops.switchLayout(ctx.layout === "auto" ? "manual" : "auto");
+						},
+						children: ["Switch to ", ctx.layout === "auto" ? "manual" : "latest"]
+					}),
+					/* @__PURE__ */ jsx(CloseButton, {
+						size: "xs",
+						onClick: (e) => {
+							e.stopPropagation();
+							driftsPanel.close();
+						}
+					})
+				]
+			}), /* @__PURE__ */ jsx(DriftsSummary, {})]
+		}, "ListOfDrifts")
+	}) })] });
 });
 ComparePanel.displayName = "ComparePanel";
 
-//#endregion
 export { ComparePanel };

package/dist/navigationpanel/comparepanel/DriftsSummary.mjs

@@ -1,56 +1,63 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
+import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
 import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
+import { css } from "@likec4/styles/css";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { deepEqual } from "fast-equals";
-import { filter, hasAtLeast, map, pipe } from "remeda";
-import { AnimatePresence, m, stagger } from "motion/react";
+import { difference, filter, hasAtLeast, map, pipe } from "remeda";
+import { nonNullable, sortNaturalByFqn } from "@likec4/core/utils";
 import { useDebouncedCallback } from "@mantine/hooks";
-import { Txt, styled } from "@likec4/styles/jsx";
-import { vstack } from "@likec4/styles/patterns";
+import { HStack, Txt, styled } from "@likec4/styles/jsx";
+import { hstack, vstack } from "@likec4/styles/patterns";
 
-//#region src/navigationpanel/comparepanel/DriftsSummary.tsx
+// src/navigationpanel/comparepanel/DriftsSummary.tsx
 const hasDrifts = (item) => {
 	return !!item.drifts && hasAtLeast(item.drifts, 1);
 };
+const edgeEndpoint = (view, nodeId) => {
+	const nd = nonNullable(view.nodes.find((n) => n.id === nodeId), `Edge endpoint "${nodeId}" not found`);
+	return {
+		id: nd.id,
+		title: nd.title
+	};
+};
+const filterViewDrifts = (drifts, layout = "auto") => {
+	const sharedDrifts = ["edges-drift", "nodes-drift"];
+	if (layout === "manual") return difference(drifts, [
+		...sharedDrifts,
+		"edges-removed",
+		"nodes-removed"
+	]);
+	return difference(drifts, [
+		...sharedDrifts,
+		"edges-added",
+		"nodes-added"
+	]);
+};
 const selectDrifts = selectDiagramContext((ctx) => ({
-	view: ctx.view.drifts ?? [],
-	nodes: pipe(ctx.view.nodes, map((node) => ({
-		id: node.id,
-		name: node.title,
-		drifts: node.drifts
-	})), filter(hasDrifts)),
-	edges: pipe(ctx.view.edges, map((edge) => ({
-		edgeId: edge.id,
-		drifts: edge.drifts
-	})), filter(hasDrifts))
+	layout: ctx.view._layout ?? "auto",
+	view: filterViewDrifts(ctx.view.drifts ?? [], ctx.view._layout),
+	nodes: pipe(ctx.view.nodes, filter(hasDrifts), map((n) => ({
+		id: n.id,
+		title: n.title,
+		drifts: n.drifts
+	})), sortNaturalByFqn()),
+	edges: pipe(ctx.view.edges, filter(hasDrifts), map((e) => ({
+		id: e.id,
+		label: e.label,
+		source: edgeEndpoint(ctx.view, e.source),
+		target: edgeEndpoint(ctx.view, e.target),
+		drifts: e.drifts
+	})))
 }), deepEqual);
-const variants = {
-	initial: {
-		opacity: 0,
-		translateY: -8
-	},
-	animate: {
-		opacity: 1,
-		translateY: 0,
-		transition: { delayChildren: stagger(.1) }
-	},
-	exit: {
-		opacity: 0,
-		translateY: -8,
-		transition: { delayChildren: stagger(.2, {
-			startDelay: .5,
-			from: "last"
-		}) }
-	}
-};
 function DriftsSummary() {
 	const selected = useDiagramSelector(selectDrifts);
 	const diagram = useDiagram();
 	const onMouseLeaveDebounced = useDebouncedCallback((e) => {
 		e.stopPropagation();
 		diagram.unhighlightAll();
-	}, 150);
+	}, 250);
 	const handlers = {
 		onMouseEnter: useCallbackRef$1((e) => {
 			const target = e.currentTarget.getAttribute("data-drift-type");
@@ -85,61 +92,39 @@ function DriftsSummary() {
 		})
 	};
 	const { view, nodes, edges } = selected;
-	const hasDrifts = view.length > 0 || nodes.length > 0 || edges.length > 0;
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: hasDrifts && /* @__PURE__ */ jsxs(m.div, {
-		layout: "size",
-		variants,
-		initial: "initial",
-		animate: "animate",
-		exit: "exit",
-		layoutDependency: selected,
+	const hasViewDrifts = hasAtLeast(view, 1);
+	const hasNodeDrifts = hasAtLeast(nodes, 1);
+	const hasEdgeDrifts = hasAtLeast(edges, 1);
+	if (!(hasViewDrifts || hasNodeDrifts || hasEdgeDrifts)) return null;
+	return /* @__PURE__ */ jsxs("div", {
 		className: vstack({
-			mx: "[calc({spacing.2} * -1)]",
-			px: "2",
 			flex: "1",
 			height: "100%",
-			overflow: "scroll",
-			gap: "4"
+			gap: "0",
+			overflow: "scroll"
 		}),
 		children: [
-			hasAtLeast(view, 1) && /* @__PURE__ */ jsx(ViewDrifts, { drifts: view }),
-			nodes.length > 0 && /* @__PURE__ */ jsxs(m.div, {
-				layout: true,
-				children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Elements:" }), /* @__PURE__ */ jsx("div", {
-					className: vstack({
-						mt: "2",
-						gap: "2"
-					}),
-					children: map(nodes, (node) => /* @__PURE__ */ jsx(NodeDrifts, {
-						...node,
-						...handlers
-					}, node.id))
-				})]
-			}, `nodes-drifts`),
-			edges.length > 0 && /* @__PURE__ */ jsxs(m.div, {
-				layout: true,
-				children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Relationships:" }), /* @__PURE__ */ jsx("div", {
-					className: vstack({
-						mt: "2",
-						gap: "2"
-					}),
-					children: map(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts, {
-						...edge,
-						...handlers
-					}, edge.edgeId))
-				})]
-			}, `edges-drifts`)
+			hasViewDrifts && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SectionHeader, { children: "View:" }, "view-drifts-header"), /* @__PURE__ */ jsx(HStack, {
+				flexWrap: "wrap",
+				my: "3",
+				pl: "3",
+				children: map(view, (drift) => /* @__PURE__ */ jsx(DriftKind, {
+					variant: driftVariant(drift),
+					children: drift
+				}, `view-${drift}`))
+			}, "view-drifts")] }),
+			hasNodeDrifts && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Elements" }, "nodes-section"), map(nodes, (node) => /* @__PURE__ */ jsx(NodeDrifts, {
+				node,
+				...handlers
+			}, node.id))] }),
+			hasEdgeDrifts && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Relationships" }, "edges-section"), map(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts, {
+				edge,
+				...handlers
+			}, edge.id))] })
 		]
-	}, `drifts-summary`) });
+	});
 }
-function ViewDrifts({ drifts }) {
-	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(m.div, {
-		layout: "position",
-		className: vstack({ gap: "2" }),
-		children: [/* @__PURE__ */ jsx(SectionHeader, { children: "View drifts (summary):" }), /* @__PURE__ */ jsx(DriftsGroup, { children: map(drifts, (drift) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, drift)) }, `view-drifts`)]
-	}, `view-drifts-header`) });
-}
-function NodeDrifts({ id, name, drifts, ...handlers }) {
+function NodeDrifts({ node: { id, title, drifts }, ...handlers }) {
 	const key = `node-drifts-${id}`;
 	return /* @__PURE__ */ jsxs(DriftsGroup, {
 		"data-drift-type": "node",
@@ -147,76 +132,122 @@ function NodeDrifts({ id, name, drifts, ...handlers }) {
 		...handlers,
 		children: [/* @__PURE__ */ jsx(Txt, {
 			truncate: true,
-			medium: true,
-			css: { maxWidth: {
-				base: "[160px]",
-				"@/sm": "[180px]",
-				"@/md": "[250px]"
-			} },
-			color: "likec4.compare.outline",
+			css: { flex: "auto" },
 			fontSize: "xs",
 			lineHeight: "sm",
-			children: name
-		}), map(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key + drift + i))]
+			children: title
+		}), map(drifts, (drift) => /* @__PURE__ */ jsx(DriftKind, {
+			variant: driftVariant(drift),
+			children: drift
+		}, key + drift))]
 	}, key);
 }
-function EdgeDrifts({ edgeId, drifts, ...handlers }) {
-	const key = `edge-drifts-${edgeId}`;
-	return /* @__PURE__ */ jsx(DriftsGroup, {
+function EdgeDrifts({ edge: { id, source, target, drifts }, ...handlers }) {
+	const key = `edge-drifts-${id}`;
+	return /* @__PURE__ */ jsxs(DriftsGroup, {
 		"data-drift-type": "edge",
-		"data-drift-id": edgeId,
+		"data-drift-id": id,
 		...handlers,
-		children: map(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key + drift + i))
+		children: [/* @__PURE__ */ jsxs(HStack, {
+			css: {
+				gap: "0.5",
+				flex: "auto",
+				justifyContent: "stretch",
+				flexWrap: "nowrap"
+			},
+			children: [
+				/* @__PURE__ */ jsx(Txt, {
+					size: "xs",
+					lh: "sm",
+					truncate: true,
+					children: source.title
+				}),
+				/* @__PURE__ */ jsx(IconChevronRight, {
+					size: 12,
+					className: css({ color: "text.dimmed" })
+				}),
+				/* @__PURE__ */ jsx(Txt, {
+					size: "xs",
+					lh: "sm",
+					truncate: true,
+					children: target.title
+				})
+			]
+		}), map(drifts, (drift) => /* @__PURE__ */ jsx(DriftKind, {
+			variant: driftVariant(drift),
+			children: drift
+		}, key + drift))]
 	}, key);
 }
-const DriftsGroup = styled(m.div, { base: vstack.raw({
-	gap: "1",
-	px: "3",
-	py: "2",
+const DriftsGroup = styled("div", { base: hstack.raw({
+	width: "full",
+	flex: "1",
+	gap: "2",
+	rowGap: "2",
+	pl: "3",
+	pr: "2",
+	pt: "2",
+	pb: "3",
 	cursor: "default",
-	rounded: "sm",
-	backgroundColor: "likec4.compare.manual/10",
-	borderWidth: "default",
-	borderStyle: "solid",
-	borderColor: "likec4.compare.outline/20",
-	_hover: {
-		backgroundColor: "likec4.compare.manual/20",
-		borderColor: "likec4.compare.outline/25"
-	}
-}) }, { defaultProps: {
-	className: "group",
-	variants,
-	layout: true,
-	initial: "initial",
-	animate: "animate",
-	exit: "exit"
-} });
-const SectionHeader = styled(m.div, { base: {
+	flexWrap: "wrap",
+	_hover: { backgroundColor: "surface.hover" },
+	"& + &": { borderTop: "none" }
+}) }, { defaultProps: { className: "group" } });
+const SectionHeader = styled("div", { base: {
 	userSelect: "none",
 	fontWeight: "medium",
-	textStyle: "dimmed.xs",
-	pl: "2"
-} }, { defaultProps: {
-	variants,
-	layout: "position",
-	initial: "initial",
-	animate: "animate",
-	exit: "exit"
+	textStyle: "fieldLabel",
+	color: "text.dimmed",
+	backgroundColor: "surface.sunken",
+	pl: "3",
+	py: "1",
+	borderTop: "subtle"
 } });
-const DriftLabel = styled(m.div, { base: {
-	userSelect: "none",
-	textStyle: "xs",
-	color: {
-		base: "text",
-		_groupHover: "text.bright"
+function driftVariant(drift) {
+	switch (drift) {
+		case "edges-removed":
+		case "nodes-removed":
+		case "removed": return "removed";
+		case "added":
+		case "nodes-added":
+		case "edges-added": return "added";
+		default: return "modified";
 	}
-} }, { defaultProps: {
-	variants,
-	layout: "position",
-	initial: "initial",
-	animate: "animate",
-	exit: "exit"
-} });
+}
+const DriftKind = styled("div", {
+	base: {
+		flexGrow: 0,
+		flexShrink: 0,
+		flex: "auto",
+		display: "block",
+		fontSize: "[8px]",
+		fontFamily: "mono",
+		fontWeight: "medium",
+		px: "1",
+		rounded: "xs",
+		border: "subtle"
+	},
+	variants: { variant: {
+		removed: {
+			color: "likec4.diff.removed",
+			backgroundColor: "likec4.diff.removed/5",
+			borderColor: "likec4.diff.removed/40",
+			_groupHover: { backgroundColor: "likec4.diff.removed/10" }
+		},
+		added: {
+			color: "likec4.diff.added",
+			backgroundColor: "likec4.diff.added/5",
+			borderColor: "likec4.diff.added/40",
+			_groupHover: { backgroundColor: "likec4.diff.added/15" }
+		},
+		modified: {
+			color: "likec4.diff.modified",
+			backgroundColor: "likec4.diff.modified/5",
+			borderColor: "likec4.diff.modified/40",
+			_groupHover: { backgroundColor: "likec4.diff.modified/15" }
+		}
+	} },
+	defaultVariants: { variant: "modified" }
+});
 
-//#endregion
 export { DriftsSummary };