@likec4/diagram 1.55.1 → 1.57.0

package/dist/navigationpanel/comparepanel/DriftsSummary.js

@@ -1,266 +1,219 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { deepEqual } from 'fast-equals';
-import { styled, Txt } from '@likec4/styles/jsx';
-import { vstack } from '@likec4/styles/patterns';
-import { useDebouncedCallback } from '@mantine/hooks';
-import { AnimatePresence, m, stagger } from 'motion/react';
-import { hasAtLeast, map, pipe, filter } from 'remeda';
-import { useDiagramSnapshot, selectDiagramActorContext } from '../../hooks/useDiagram.js';
-import { useDiagram } from '../../hooks/safeContext.js';
-import { useCallbackRef } from '../../hooks/useCallbackRef.js';
-
-const hasDrifts = (item) => {
-  return !!item.drifts && hasAtLeast(item.drifts, 1);
+import "../../_virtual/_rolldown/runtime.js";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { selectDiagramActorContext, useDiagramSnapshot } from "../../hooks/useDiagram.js";
+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
+var hasDrifts = (item) => {
+	return !!item.drifts && hasAtLeast(item.drifts, 1);
 };
-const selectDrifts = selectDiagramActorContext((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)
-  )
+var selectDrifts = selectDiagramActorContext((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))
 }));
-const variants = {
-  initial: {
-    opacity: 0,
-    translateY: -8
-  },
-  animate: {
-    opacity: 1,
-    translateY: 0,
-    transition: {
-      delayChildren: stagger(0.1)
-    }
-  },
-  exit: {
-    opacity: 0,
-    translateY: -8,
-    transition: {
-      delayChildren: stagger(0.2, { startDelay: 0.5, from: "last" })
-    }
-  }
+var 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 = useDiagramSnapshot(selectDrifts, deepEqual);
-  const diagram = useDiagram();
-  const onMouseLeaveDebounced = useDebouncedCallback(
-    (e) => {
-      e.stopPropagation();
-      diagram.unhighlightAll();
-    },
-    150
-  );
-  const onMouseEnter = useCallbackRef((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;
-    }
-  });
-  const onClick = useCallbackRef((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 handlers = {
-    onMouseEnter,
-    onMouseLeave: onMouseLeaveDebounced,
-    onClick
-  };
-  const { view, nodes, edges } = selected;
-  if (view.length === 0 && nodes.length === 0 && edges.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__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`
-  ) });
+	const selected = useDiagramSnapshot(selectDrifts, deepEqual);
+	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;
+	if (view.length === 0 && nodes.length === 0 && edges.length === 0) return null;
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__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`
-  ) });
+	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,
-            css: {
-              maxWidth: {
-                base: 160,
-                "@/sm": 180,
-                "@/md": 250
-              }
-            },
-            color: "likec4.compare.manual.outline",
-            fontSize: "xs",
-            lineHeight: "sm",
-            fontWeight: "medium",
-            children: name
-          }
-        ),
-        map(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key + drift + i))
-      ]
-    },
-    key
-  );
+	const key = `node-drifts-${id}`;
+	return /* @__PURE__ */ jsxs(DriftsGroup, {
+		"data-drift-type": "node",
+		"data-drift-id": id,
+		...handlers,
+		children: [/* @__PURE__ */ jsx(Txt, {
+			truncate: true,
+			css: { maxWidth: {
+				base: 160,
+				"@/sm": 180,
+				"@/md": 250
+			} },
+			color: "likec4.compare.manual.outline",
+			fontSize: "xs",
+			lineHeight: "sm",
+			fontWeight: "medium",
+			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 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",
-    border: "1px solid {colors.likec4.compare.manual.outline/20}",
-    _hover: {
-      backgroundColor: "likec4.compare.manual/20",
-      borderColor: "likec4.compare.manual.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"
-  }
-});
-
+var DriftsGroup = styled(m.div, { base: vstack.raw({
+	gap: "1",
+	px: "3",
+	py: "2",
+	cursor: "default",
+	rounded: "sm",
+	backgroundColor: "likec4.compare.manual/10",
+	border: "1px solid {colors.likec4.compare.manual.outline/20}",
+	_hover: {
+		backgroundColor: "likec4.compare.manual/20",
+		borderColor: "likec4.compare.manual.outline/25"
+	}
+}) }, { defaultProps: {
+	className: "group",
+	variants,
+	layout: true,
+	initial: "initial",
+	animate: "animate",
+	exit: "exit"
+} });
+var SectionHeader = styled(m.div, { base: {
+	userSelect: "none",
+	fontWeight: "medium",
+	textStyle: "dimmed.xs",
+	pl: "2"
+} }, { defaultProps: {
+	variants,
+	layout: "position",
+	initial: "initial",
+	animate: "animate",
+	exit: "exit"
+} });
+var 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 };

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.js

@@ -1,37 +1,35 @@
-import { jsx } from 'react/jsx-runtime';
-import { invariant } from '@likec4/core';
-import { css } from '@likec4/styles/css';
-import { SegmentedControl } from '@mantine/core';
-import * as m from 'motion/react-m';
-
-const data = [
-  { value: "manual", label: "Saved manual" },
-  { value: "auto", label: "Latest auto" }
-];
-function LayoutTypeSwitcher({
-  value,
-  onChange
-}) {
-  return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      size: "xs",
-      color: value === "manual" ? "orange" : "green",
-      value,
-      component: m.div,
-      onChange: (layout) => {
-        invariant(layout === "manual" || layout === "auto", "Invalid layout type");
-        onChange(layout);
-      },
-      classNames: {
-        label: css({
-          fontSize: "xxs",
-          fontWeight: "medium"
-        })
-      },
-      data
-    }
-  ) });
+import "../../_virtual/_rolldown/runtime.js";
+import { css } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { invariant } from "@likec4/core";
+import { SegmentedControl } from "@mantine/core";
+import * as m from "motion/react-m";
+//#region src/navigationpanel/comparepanel/LayoutTypeSwitcher.tsx
+var data = [{
+	value: "manual",
+	label: "Saved manual"
+}, {
+	value: "auto",
+	label: "Latest auto"
+}];
+function LayoutTypeSwitcher({ value, onChange }) {
+	return /* @__PURE__ */ jsx(m.div, {
+		layout: "position",
+		children: /* @__PURE__ */ jsx(SegmentedControl, {
+			size: "xs",
+			color: value === "manual" ? "orange" : "green",
+			value,
+			onChange: (layout) => {
+				invariant(layout === "manual" || layout === "auto", "Invalid layout type");
+				onChange(layout);
+			},
+			classNames: { label: css({
+				fontSize: "xxs",
+				fontWeight: "medium"
+			}) },
+			data
+		})
+	});
 }
-
+//#endregion
 export { LayoutTypeSwitcher };