@likec4/diagram 1.55.0 → 1.56.0

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -1,85 +1,134 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { hasAtLeast } from 'remeda';
-import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import '@xstate/react';
-import 'fast-equals';
-import { useDiagram } from '../../../hooks/safeContext.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
-
-function ElementActions({
-  extraButtons,
-  ...props
-}) {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
-  const diagram = useDiagram();
-  const { id, navigateTo, modelFqn } = props.data;
-  let buttons = useMemo(() => {
-    const buttons2 = [];
-    if (navigateTo && enableNavigateTo) {
-      buttons2.push({
-        key: "navigate",
-        icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.navigateTo(navigateTo, id);
-        }
-      });
-    }
-    if (enableRelationshipBrowser) {
-      buttons2.push({
-        key: "relationships",
-        icon: /* @__PURE__ */ jsx(IconTransform, {}),
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.openRelationshipsBrowser(modelFqn);
-        }
-      });
-    }
-    return buttons2;
-  }, [enableNavigateTo, enableRelationshipBrowser, modelFqn, navigateTo, id, diagram]);
-  if (extraButtons && hasAtLeast(extraButtons, 1)) {
-    buttons = [...buttons, ...extraButtons];
-  }
-  return /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
+import "../../../_virtual/_rolldown/runtime.js";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.js";
+import { IconTransform, IconZoomScan } from "@tabler/icons-react";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { hasAtLeast } from "remeda";
+//#region src/likec4diagram/custom/nodes/ElementActions.tsx
+/**
+* Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
+* Intended to be used with model elements.
+*
+* Use generic {@link ElementActionButtons} for custom action buttons.
+*
+* @param extraButtons - Add extra action buttons
+*
+* @example
+* ```tsx
+* <ElementActions
+*   extraButtons={[
+*     {
+*       key: 'extra',
+*       icon: <IconZoomScan />,
+*       onClick: (e) => {
+*         e.stopPropagation()
+*         console.log('extra action clicked')
+*       },
+*       },
+*     },
+*   ]}
+* />
+* ```
+*/
+function ElementActions({ extraButtons, ...props }) {
+	const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
+	const diagram = useDiagram();
+	const { id, navigateTo, modelFqn } = props.data;
+	let buttons = useMemo(() => {
+		const buttons = [];
+		if (navigateTo && enableNavigateTo) buttons.push({
+			key: "navigate",
+			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.navigateTo(navigateTo, id);
+			}
+		});
+		if (enableRelationshipBrowser) buttons.push({
+			key: "relationships",
+			icon: /* @__PURE__ */ jsx(IconTransform, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.openRelationshipsBrowser(modelFqn);
+			}
+		});
+		return buttons;
+	}, [
+		enableNavigateTo,
+		enableRelationshipBrowser,
+		modelFqn,
+		navigateTo,
+		id,
+		diagram
+	]);
+	if (extraButtons && hasAtLeast(extraButtons, 1)) buttons = [...buttons, ...extraButtons];
+	return /* @__PURE__ */ jsx(ElementActionButtons, {
+		...props,
+		buttons
+	});
 }
-const DeploymentElementActions = ({
-  extraButtons,
-  ...props
-}) => {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
-  const diagram = useDiagram();
-  const { id, navigateTo, modelFqn } = props.data;
-  let buttons = useMemo(() => {
-    const buttons2 = [];
-    if (navigateTo && enableNavigateTo) {
-      buttons2.push({
-        key: "navigate",
-        icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.navigateTo(navigateTo, id);
-        }
-      });
-    }
-    if (enableRelationshipBrowser && !!modelFqn) {
-      buttons2.push({
-        key: "relationships",
-        icon: /* @__PURE__ */ jsx(IconTransform, {}),
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.openRelationshipsBrowser(modelFqn);
-        }
-      });
-    }
-    return buttons2;
-  }, [enableNavigateTo, enableRelationshipBrowser, modelFqn, navigateTo, id]);
-  if (extraButtons && hasAtLeast(extraButtons, 1)) {
-    buttons = [...buttons, ...extraButtons];
-  }
-  return /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
+/**
+* Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
+* Intended to be used with deployment elements.
+*
+* Use generic {@link ElementActionButtons} for custom action buttons.
+*
+* @param extraButtons - Add extra action buttons
+*
+* @example
+* ```tsx
+* <DeploymentElementActions
+*   extraButtons={[
+*     {
+*       key: 'extra',
+*       icon: <IconZoomScan />,
+*       onClick: (e) => {
+*         e.stopPropagation()
+*         console.log('extra action clicked')
+*       },
+*       },
+*     },
+*   ]}
+* />
+* ```
+*/
+var DeploymentElementActions = ({ extraButtons, ...props }) => {
+	const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
+	const diagram = useDiagram();
+	const { id, navigateTo, modelFqn } = props.data;
+	let buttons = useMemo(() => {
+		const buttons = [];
+		if (navigateTo && enableNavigateTo) buttons.push({
+			key: "navigate",
+			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.navigateTo(navigateTo, id);
+			}
+		});
+		if (enableRelationshipBrowser && !!modelFqn) buttons.push({
+			key: "relationships",
+			icon: /* @__PURE__ */ jsx(IconTransform, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.openRelationshipsBrowser(modelFqn);
+			}
+		});
+		return buttons;
+	}, [
+		enableNavigateTo,
+		enableRelationshipBrowser,
+		modelFqn,
+		navigateTo,
+		id
+	]);
+	if (extraButtons && hasAtLeast(extraButtons, 1)) buttons = [...buttons, ...extraButtons];
+	return /* @__PURE__ */ jsx(ElementActionButtons, {
+		...props,
+		buttons
+	});
 };
-
+//#endregion
 export { DeploymentElementActions, ElementActions };

package/dist/likec4diagram/custom/nodes/NodeDrifts.js

@@ -1,28 +1,22 @@
-import { jsx } from 'react/jsx-runtime';
-import { Box } from '@likec4/styles/jsx';
-
-function NodeDrifts({
-  nodeProps: { data }
-}) {
-  const drifts = data.drifts;
-  if (!drifts || drifts.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      className: "likec4-node-drifts",
-      css: {
-        display: "contents",
-        "& + .likec4-element-shape": {
-          outlineColor: "likec4.compare.manual.outline",
-          outlineWidth: "4px",
-          outlineStyle: "dashed",
-          outlineOffset: "1.5"
-        }
-      }
-    }
-  );
+import "../../../_virtual/_rolldown/runtime.js";
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@likec4/styles/jsx";
+//#region src/likec4diagram/custom/nodes/NodeDrifts.tsx
+function NodeDrifts({ nodeProps: { data } }) {
+	const drifts = data.drifts;
+	if (!drifts || drifts.length === 0) return null;
+	return /* @__PURE__ */ jsx(Box, {
+		className: "likec4-node-drifts",
+		css: {
+			display: "contents",
+			"& + .likec4-element-shape": {
+				outlineColor: "likec4.compare.manual.outline",
+				outlineWidth: "4px",
+				outlineStyle: "dashed",
+				outlineOffset: "1.5"
+			}
+		}
+	});
 }
-
+//#endregion
 export { NodeDrifts };