@likec4/diagram 1.59.4 → 1.60.0

package/dist/navigationpanel/actor.mjs

@@ -0,0 +1,97 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Context, actor } from "./actor.setup.mjs";
+import { emitNavigateTo, keepDropdownOpen, resetSearchQuery, resetSelectedFolder, updateActivatedBy, updateInputs, updateSearchQuery, updateSelectedFolder } from "./actor.actions.mjs";
+import { raise } from "xstate";
+
+//#region src/navigationpanel/actor.ts
+const _actorLogic = actor.createMachine({
+	id: "navigationPanel",
+	context: ({ input }) => Context({ input }),
+	initial: "idle",
+	entry: [updateActivatedBy(), resetSelectedFolder()],
+	on: {
+		"update.inputs": { actions: updateInputs() },
+		"searchQuery.change": { actions: [updateSearchQuery(), raise({ type: "searchQuery.changed" })] }
+	},
+	states: {
+		idle: {
+			id: "idle",
+			on: {
+				"breadcrumbs.mouseEnter.*": {
+					target: "pending",
+					actions: updateActivatedBy()
+				},
+				"breadcrumbs.click.*": {
+					target: "active",
+					actions: updateActivatedBy()
+				}
+			}
+		},
+		pending: {
+			on: {
+				"breadcrumbs.mouseEnter.*": { actions: updateActivatedBy() },
+				"breadcrumbs.mouseLeave.*": { target: "idle" },
+				"breadcrumbs.click.*": {
+					target: "active",
+					actions: updateActivatedBy()
+				}
+			},
+			after: { "open timeout": { target: "active" } }
+		},
+		active: {
+			tags: ["active"],
+			initial: "decide",
+			on: {
+				"dropdown.dismiss": { target: "#idle" },
+				"breadcrumbs.mouseLeave": {
+					guard: "was opened on hover",
+					target: ".closing"
+				},
+				"dropdown.mouseLeave": {
+					guard: "was opened on hover",
+					target: ".closing"
+				},
+				"searchQuery.changed": { target: ".decide" }
+			},
+			states: {
+				decide: { always: [{
+					guard: "has search query",
+					target: "search"
+				}, { target: "opened" }] },
+				opened: { on: {
+					"searchQuery.changed": {
+						guard: "has search query",
+						actions: keepDropdownOpen(),
+						target: "search"
+					},
+					"breadcrumbs.click.viewtitle": { actions: resetSelectedFolder() },
+					"breadcrumbs.click.*": { actions: updateSelectedFolder() },
+					"select.folder": { actions: [keepDropdownOpen(), updateSelectedFolder()] },
+					"select.view": { actions: [updateSelectedFolder(), emitNavigateTo()] }
+				} },
+				search: { on: {
+					"breadcrumbs.click.viewtitle": {
+						actions: [resetSearchQuery(), resetSelectedFolder()],
+						target: "opened"
+					},
+					"breadcrumbs.click.*": {
+						actions: [resetSearchQuery(), updateSelectedFolder()],
+						target: "opened"
+					},
+					"select.view": { actions: [updateSelectedFolder(), emitNavigateTo()] }
+				} },
+				closing: {
+					on: {
+						"breadcrumbs.mouseEnter.*": { target: "decide" },
+						"dropdown.mouseEnter": { target: "decide" }
+					},
+					after: { "close timeout": { target: "#idle" } }
+				}
+			}
+		}
+	}
+});
+const navigationPanelActorLogic = _actorLogic;
+
+//#endregion
+export { navigationPanelActorLogic };

package/dist/navigationpanel/actor.setup.d.mts

@@ -0,0 +1,73 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ViewId } from "@likec4/core/types";
+//#region src/navigationpanel/actor.setup.d.ts
+export interface Input {
+  viewId: ViewId;
+  viewFolder: string;
+}
+export type Events = {
+  type: 'update.inputs';
+  inputs: Input;
+} | {
+  type: 'searchQuery.change';
+  value: string;
+} | {
+  type: 'searchQuery.changed';
+} | {
+  type: 'select.folder';
+  folderPath: string;
+} | {
+  type: 'select.view';
+  viewId: ViewId;
+  viewFolder?: string | undefined;
+} | {
+  type: 'breadcrumbs.mouseLeave';
+} | {
+  type: 'breadcrumbs.mouseEnter.root';
+} | {
+  type: 'breadcrumbs.mouseLeave.root';
+} | {
+  type: 'breadcrumbs.mouseEnter.folder';
+  folderPath: string;
+} | {
+  type: 'breadcrumbs.mouseLeave.folder';
+  folderPath: string;
+} | {
+  type: 'breadcrumbs.mouseEnter.viewtitle';
+} | {
+  type: 'breadcrumbs.mouseLeave.viewtitle';
+} | {
+  type: 'breadcrumbs.click.root';
+} | {
+  type: 'breadcrumbs.click.folder';
+  folderPath: string;
+} | {
+  type: 'breadcrumbs.click.viewtitle';
+} | {
+  type: 'dropdown.mouseEnter';
+} | {
+  type: 'dropdown.mouseLeave';
+} | {
+  type: 'dropdown.dismiss';
+};
+export interface Context {
+  viewId: ViewId;
+  viewFolder: string;
+  /**
+   * Who activated the dropdown
+   * (if `click` then the dropdown is always open until dismissed)
+   * @default 'hover'
+   */
+  activatedBy: 'hover' | 'click';
+  /**
+   * The folder that is currently selected in the dropdown
+   * By default it is the root
+   */
+  selectedFolder: string;
+  searchQuery: string;
+}
+export type Tags = 'active';
+export declare function Context({ input }: {
+  input: Input;
+}): Context;
+//#endregion

package/dist/navigationpanel/actor.setup.mjs

@@ -0,0 +1,34 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { isEmpty } from "remeda";
+import { setup } from "xstate";
+
+//#region src/navigationpanel/actor.setup.ts
+function Context({ input }) {
+	return {
+		viewId: input.viewId,
+		viewFolder: input.viewFolder ?? "",
+		activatedBy: "hover",
+		selectedFolder: "",
+		searchQuery: ""
+	};
+}
+const actor = setup({
+	types: {
+		context: {},
+		events: {},
+		tags: "",
+		input: {}
+	},
+	delays: {
+		"open timeout": 500,
+		"close timeout": 350
+	},
+	guards: {
+		"was opened on hover": ({ context }) => context.activatedBy === "hover",
+		"has search query": ({ context }) => !isEmpty(context.searchQuery),
+		"search query is empty": ({ context }) => isEmpty(context.searchQuery)
+	}
+});
+
+//#endregion
+export { Context, actor };

package/dist/navigationpanel/comparepanel/CompareActionsMenu.mjs

@@ -0,0 +1,69 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconChevronDown from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.mjs";
+import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.mjs";
+import { stopPropagation } from "../../utils/xyflow.mjs";
+import { cx } from "@likec4/styles/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Menu, Tooltip, UnstyledButton } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+
+//#region src/navigationpanel/comparepanel/CompareActionsMenu.tsx
+function CompareActionsMenu({ disabled = false, onApplyLatestToManual, onResetManualLayout }) {
+	return /* @__PURE__ */ jsxs(Menu, {
+		withinPortal: false,
+		floatingStrategy: "absolute",
+		shadow: "lg",
+		position: "bottom-start",
+		offset: { mainAxis: 4 },
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, {
+			className: cx("mantine-active", hstack({
+				gap: "2",
+				py: "1.5",
+				px: "2",
+				lineHeight: "1",
+				textStyle: "xs",
+				fontWeight: "medium",
+				layerStyle: "likec4.panel.action",
+				userSelect: "none"
+			})),
+			children: [/* @__PURE__ */ jsx(Box$1, { children: "Actions" }), /* @__PURE__ */ jsx(IconChevronDown, {
+				size: 12,
+				stroke: 2,
+				opacity: .7
+			})]
+		}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [/* @__PURE__ */ jsxs(Menu.Item, {
+			disabled,
+			onClick: onApplyLatestToManual,
+			rightSection: onApplyLatestToManual && /* @__PURE__ */ jsx(Tooltip, {
+				onClick: stopPropagation,
+				position: "right-start",
+				label: /* @__PURE__ */ jsxs(Fragment, { 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", !onApplyLatestToManual && /* @__PURE__ */ jsx(Box$1, {
+				textStyle: "xs",
+				children: "view type is changed"
+			})]
+		}), /* @__PURE__ */ jsx(Menu.Item, {
+			onClick: onResetManualLayout,
+			children: "Reset layout"
+		})] })]
+	});
+}
+
+//#endregion
+export { CompareActionsMenu };

package/dist/navigationpanel/comparepanel/ComparePanel.mjs

@@ -0,0 +1,139 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../../hooks/useCallbackRef.mjs";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.mjs";
+import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.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 { 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 { hstack, vstack } from "@likec4/styles/patterns";
+import * as m$1 from "motion/react-m";
+
+//#region src/navigationpanel/comparepanel/ComparePanel.tsx
+const variants = {
+	initial: {
+		opacity: 0,
+		translateX: -20
+	},
+	animate: {
+		opacity: 1,
+		translateX: 0
+	},
+	exit: {
+		opacity: 0,
+		translateX: -20
+	}
+};
+const ComparePanel = memo(() => {
+	const portalProps = useMantinePortalProps();
+	const isMounted = useIsMounted();
+	const [ctx, ops] = useDiagramCompareLayout();
+	const [isProcessing, setIsProcessing] = useState(false);
+	const resetProcessing = () => {
+		setTimeout(() => {
+			if (isMounted()) setIsProcessing(false);
+		}, 500);
+	};
+	const onApplyLatest = useCallbackRef((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);
+		setTimeout(() => {
+			ops.applyLatestToManual();
+			resetProcessing();
+		}, 200);
+	});
+	const onResetManualLayout = useCallbackRef((e) => {
+		e.stopPropagation();
+		setIsProcessing(true);
+		setTimeout(() => {
+			ops.resetManualLayout();
+			resetProcessing();
+		}, 200);
+	});
+	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, {
+			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")] }) });
+});
+ComparePanel.displayName = "ComparePanel";
+
+//#endregion
+export { ComparePanel };

package/dist/navigationpanel/comparepanel/ComparePanelControls.mjs

@@ -0,0 +1,56 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconX from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import { useDiagramCompareLayout } from "../../hooks/useDiagramCompareLayout.mjs";
+import { PanelActionIcon } from "../_common.mjs";
+import { CompareActionsMenu } from "./CompareActionsMenu.mjs";
+import { LayoutTypeSwitcher } from "./LayoutTypeSwitcher.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Divider } from "@mantine/core";
+import { Box as Box$1, HStack } from "@likec4/styles/jsx";
+
+//#region src/navigationpanel/comparepanel/ComparePanelControls.tsx
+const Divider$1 = Divider.withProps({
+	mx: 2,
+	size: "xs",
+	orientation: "vertical"
+});
+function ComparePanelControls() {
+	const [ctx, { toggleCompare, switchLayout, resetManualLayout, applyLatestToManual }] = useDiagramCompareLayout();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Box$1, {
+			css: {
+				textStyle: "xs",
+				color: "likec4.panel.text",
+				userSelect: "none"
+			},
+			children: "Compare"
+		}),
+		/* @__PURE__ */ jsx(LayoutTypeSwitcher, {
+			value: ctx.layout,
+			onChange: switchLayout
+		}),
+		ctx.hasEditor && /* @__PURE__ */ jsxs(HStack, {
+			gap: "1",
+			children: [
+				/* @__PURE__ */ jsx(Divider$1, {}),
+				/* @__PURE__ */ jsx(CompareActionsMenu, {
+					disabled: ctx.layout === "auto",
+					onResetManualLayout: resetManualLayout,
+					onApplyLatestToManual: ctx.canApplyLatest ? applyLatestToManual : void 0
+				}),
+				/* @__PURE__ */ jsx(Divider$1, {})
+			]
+		}),
+		/* @__PURE__ */ jsx(PanelActionIcon, {
+			size: "sm",
+			onClick: (e) => {
+				e.stopPropagation();
+				toggleCompare();
+			},
+			children: /* @__PURE__ */ jsx(IconX, {})
+		})
+	] });
+}
+
+//#endregion
+export { ComparePanelControls };

package/dist/navigationpanel/comparepanel/DriftsSummary.mjs

@@ -0,0 +1,222 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
+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 { useDebouncedCallback } from "@mantine/hooks";
+import { Txt, styled } from "@likec4/styles/jsx";
+import { vstack } from "@likec4/styles/patterns";
+
+//#region src/navigationpanel/comparepanel/DriftsSummary.tsx
+const hasDrifts = (item) => {
+	return !!item.drifts && hasAtLeast(item.drifts, 1);
+};
+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))
+}), 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);
+	const handlers = {
+		onMouseEnter: useCallbackRef$1((e) => {
+			const target = e.currentTarget.getAttribute("data-drift-type");
+			const id = e.currentTarget.getAttribute("data-drift-id");
+			if (target === "node" && id) {
+				e.stopPropagation();
+				onMouseLeaveDebounced.cancel();
+				diagram.highlightNode(id);
+				return;
+			}
+			if (target === "edge" && id) {
+				e.stopPropagation();
+				onMouseLeaveDebounced.cancel();
+				diagram.highlightEdge(id);
+				return;
+			}
+		}),
+		onMouseLeave: onMouseLeaveDebounced,
+		onClick: useCallbackRef$1((e) => {
+			const target = e.currentTarget.getAttribute("data-drift-type");
+			const id = e.currentTarget.getAttribute("data-drift-id");
+			if (target === "node" && id) {
+				e.stopPropagation();
+				diagram.centerViewportOnNode(id);
+				return;
+			}
+			if (target === "edge" && id) {
+				e.stopPropagation();
+				diagram.centerViewportOnEdge(id);
+				return;
+			}
+		})
+	};
+	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,
+		className: vstack({
+			mx: "[calc({spacing.2} * -1)]",
+			px: "2",
+			flex: "1",
+			height: "100%",
+			overflow: "scroll",
+			gap: "4"
+		}),
+		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`)
+		]
+	}, `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 }) {
+	const key = `node-drifts-${id}`;
+	return /* @__PURE__ */ jsxs(DriftsGroup, {
+		"data-drift-type": "node",
+		"data-drift-id": id,
+		...handlers,
+		children: [/* @__PURE__ */ jsx(Txt, {
+			truncate: true,
+			medium: true,
+			css: { maxWidth: {
+				base: "[160px]",
+				"@/sm": "[180px]",
+				"@/md": "[250px]"
+			} },
+			color: "likec4.compare.outline",
+			fontSize: "xs",
+			lineHeight: "sm",
+			children: name
+		}), map(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key + drift + i))]
+	}, key);
+}
+function EdgeDrifts({ edgeId, drifts, ...handlers }) {
+	const key = `edge-drifts-${edgeId}`;
+	return /* @__PURE__ */ jsx(DriftsGroup, {
+		"data-drift-type": "edge",
+		"data-drift-id": edgeId,
+		...handlers,
+		children: map(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key + drift + i))
+	}, key);
+}
+const DriftsGroup = styled(m.div, { base: vstack.raw({
+	gap: "1",
+	px: "3",
+	py: "2",
+	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: {
+	userSelect: "none",
+	fontWeight: "medium",
+	textStyle: "dimmed.xs",
+	pl: "2"
+} }, { defaultProps: {
+	variants,
+	layout: "position",
+	initial: "initial",
+	animate: "animate",
+	exit: "exit"
+} });
+const DriftLabel = styled(m.div, { base: {
+	userSelect: "none",
+	textStyle: "xs",
+	color: {
+		base: "text",
+		_groupHover: "text.bright"
+	}
+} }, { defaultProps: {
+	variants,
+	layout: "position",
+	initial: "initial",
+	animate: "animate",
+	exit: "exit"
+} });
+
+//#endregion
+export { DriftsSummary };