@likec4/diagram 1.55.1 → 1.57.0

package/dist/LikeC4View.js

@@ -1,199 +1,151 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { ActionIcon } from '@mantine/core';
-import { AnimatePresence } from 'motion/react';
-import { useRef, useState } from 'react';
-import { isBoolean } from 'remeda';
-import { FitViewPaddings } from './base/const.js';
-import { ErrorMessage } from './components/ViewNotFound.js';
-import { useCallbackRef } from './hooks/useCallbackRef.js';
-import 'fast-equals';
-import { useOptionalLikeC4Model } from './context/LikeC4ModelContext.js';
-import { LikeC4Diagram } from './LikeC4Diagram.js';
-import { Overlay } from './overlays/overlay/Overlay.js';
-import { ShadowRoot } from './shadowroot/ShadowRoot.js';
-import { pickViewBounds } from './utils/view-bounds.js';
-import { stopPropagation } from './utils/xyflow.js';
-import IconX from './node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-
-const cssInteractive = css({
-  cursor: "pointer",
-  ["--mantine-cursor-pointer"]: "pointer",
-  "& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)": {
-    cursor: "pointer"
-  }
+import "./_virtual/_rolldown/runtime.js";
+import { stopPropagation } from "./utils/xyflow.js";
+import { FitViewPaddings } from "./base/const.js";
+import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.js";
+import { pickViewBounds } from "./utils/view-bounds.js";
+import { Overlay } from "./overlays/overlay/Overlay.js";
+import { LikeC4Diagram } from "./LikeC4Diagram.js";
+import { ErrorMessage } from "./components/ViewNotFound.js";
+import { ShadowRoot } from "./shadowroot/ShadowRoot.js";
+import { css, cx } from "@likec4/styles/css";
+import { IconX } from "@tabler/icons-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isBoolean } from "remeda";
+import { ActionIcon } from "@mantine/core";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+//#region src/LikeC4View.tsx
+var cssInteractive = css({
+	cursor: "pointer",
+	["--mantine-cursor-pointer"]: "pointer",
+	"& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)": { cursor: "pointer" }
 });
-function LikeC4View({
-  viewId,
-  className,
-  pannable = false,
-  zoomable = false,
-  keepAspectRatio = true,
-  colorScheme,
-  injectFontCss = true,
-  controls = false,
-  layoutType: initialLayoutType = "manual",
-  background = "transparent",
-  browser = true,
-  showNavigationButtons = false,
-  enableNotations,
-  enableFocusMode = false,
-  enableDynamicViewWalkthrough = false,
-  enableElementDetails = false,
-  enableRelationshipDetails = false,
-  enableRelationshipBrowser = enableRelationshipDetails,
-  enableNotes = false,
-  reduceGraphics = "auto",
-  mantineTheme,
-  styleNonce,
-  style,
-  reactFlowProps,
-  renderNodes,
-  children,
-  ...props
-}) {
-  const rootRef = useRef(null);
-  const likec4model = useOptionalLikeC4Model();
-  const [layoutType, setLayoutType] = useState(initialLayoutType);
-  const [browserViewId, _onNavigateTo] = useState(null);
-  const onNavigateTo = useCallbackRef((viewId2) => {
-    if (viewId2 && viewId2 !== browserViewId) {
-      setLayoutType(initialLayoutType);
-    }
-    _onNavigateTo(viewId2);
-  });
-  const onNavigateToThisView = useCallbackRef(() => {
-    onNavigateTo(viewId);
-  });
-  const closeBrowser = useCallbackRef(() => {
-    onNavigateTo(null);
-  });
-  if (!likec4model) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider in the component tree." });
-  }
-  const viewModel = likec4model.findView(viewId);
-  if (!viewModel) {
-    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
-      "LikeC4 View ",
-      /* @__PURE__ */ jsx("code", { children: viewId }),
-      " not found in LikeC4Model.",
-      /* @__PURE__ */ jsx("br", {}),
-      "Available views: ",
-      [...likec4model.views()].map((v) => v.id).join(", ")
-    ] });
-  }
-  if (!viewModel.isLayouted()) {
-    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
-      "LikeC4 View ",
-      /* @__PURE__ */ jsx("code", { children: viewId }),
-      " is not layouted.",
-      /* @__PURE__ */ jsx("br", {}),
-      "Make sure you have LikeC4ModelProvider with layouted model."
-    ] });
-  }
-  const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
-  const browserViewModel = browserViewId ? likec4model.findView(browserViewId) : null;
-  const browserView = layoutType === "manual" ? browserViewModel?.$layouted : browserViewModel?.$view;
-  const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
-  const browserViewHasNotations = (browserView?.notation?.nodes?.length ?? 0) > 0;
-  const isBrowserEnabled = browser !== false;
-  const browserProps = isBoolean(browser) ? {} : browser;
-  const bounds = pickViewBounds(view, props.dynamicViewVariant);
-  const root = rootRef.current ? { root: rootRef.current } : void 0;
-  return /* @__PURE__ */ jsxs(
-    ShadowRoot,
-    {
-      ref: rootRef,
-      injectFontCss,
-      theme: mantineTheme,
-      colorScheme,
-      styleNonce,
-      keepAspectRatio: keepAspectRatio ? bounds : false,
-      className: cx(
-        "likec4-view",
-        className
-      ),
-      style,
-      children: [
-        /* @__PURE__ */ jsx(
-          LikeC4Diagram,
-          {
-            view,
-            pannable,
-            zoomable,
-            background,
-            fitView: true,
-            fitViewPadding: FitViewPaddings.default,
-            enableNotations: hasNotations,
-            enableDynamicViewWalkthrough,
-            showNavigationButtons,
-            enableCompareWithLatest: false,
-            enableFocusMode,
-            enableRelationshipDetails,
-            enableElementDetails,
-            enableRelationshipBrowser,
-            enableElementTags: false,
-            enableNotes,
-            controls,
-            reduceGraphics,
-            className: cx(
-              "likec4-static-view",
-              isBrowserEnabled && cssInteractive
-            ),
-            enableSearch: false,
-            ...isBrowserEnabled && {
-              onCanvasClick: onNavigateToThisView,
-              onNodeClick: onNavigateToThisView
-            },
-            reactFlowProps,
-            renderNodes,
-            ...props,
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(AnimatePresence, { ...root, children: browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: closeBrowser, children: [
-          /* @__PURE__ */ jsx(
-            LikeC4Diagram,
-            {
-              view: browserView,
-              pannable: true,
-              zoomable: true,
-              background: "dots",
-              onNavigateTo,
-              showNavigationButtons: true,
-              enableDynamicViewWalkthrough: true,
-              enableFocusMode: true,
-              enableRelationshipBrowser: true,
-              enableElementDetails: true,
-              enableRelationshipDetails: true,
-              enableSearch: true,
-              enableElementTags: true,
-              enableNotes: true,
-              enableCompareWithLatest: true,
-              controls: true,
-              fitView: true,
-              ...props,
-              fitViewPadding: FitViewPaddings.withControls,
-              ...browserProps,
-              enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
-              renderNodes,
-              onLayoutTypeChange: setLayoutType
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "4", right: "4", zIndex: "999", onClick: stopPropagation, children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              variant: "default",
-              color: "gray",
-              onClick: closeBrowser,
-              children: /* @__PURE__ */ jsx(IconX, {})
-            }
-          ) })
-        ] }) })
-      ]
-    }
-  );
+/**
+* Ready-to-use component to display embedded LikeC4 view,
+* OnClick allows to browse the model.
+*
+* {@link ReactLikeC4} gives you more control.
+*
+* Component is wrapped in ShadowRoot to isolate styles.
+*/
+function LikeC4View({ viewId, className, pannable = false, zoomable = false, keepAspectRatio = true, colorScheme, injectFontCss = true, controls = false, layoutType: initialLayoutType = "manual", background = "transparent", browser = true, showNavigationButtons = false, enableNotations, enableFocusMode = false, enableDynamicViewWalkthrough = false, enableElementDetails = false, enableRelationshipDetails = false, enableRelationshipBrowser = enableRelationshipDetails, enableNotes = false, reduceGraphics = "auto", mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }) {
+	const likec4model = useOptionalLikeC4Model();
+	const [layoutType, setLayoutType] = useState(initialLayoutType);
+	const [browserViewId, _onNavigateTo] = useState(null);
+	const onNavigateTo = (viewId) => {
+		if (viewId && viewId !== browserViewId) setLayoutType(initialLayoutType);
+		_onNavigateTo(viewId);
+	};
+	const onNavigateToThisView = () => {
+		onNavigateTo(viewId);
+	};
+	const closeBrowser = () => {
+		onNavigateTo(null);
+	};
+	if (!likec4model) return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider in the component tree." });
+	const viewModel = likec4model.findView(viewId);
+	if (!viewModel) return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"LikeC4 View ",
+		/* @__PURE__ */ jsx("code", { children: viewId }),
+		" not found in LikeC4Model.",
+		/* @__PURE__ */ jsx("br", {}),
+		"Available views: ",
+		[...likec4model.views()].map((v) => v.id).join(", ")
+	] });
+	if (!viewModel.isLayouted()) return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"LikeC4 View ",
+		/* @__PURE__ */ jsx("code", { children: viewId }),
+		" is not layouted.",
+		/* @__PURE__ */ jsx("br", {}),
+		"Make sure you have LikeC4ModelProvider with layouted model."
+	] });
+	const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
+	const browserViewModel = browserViewId ? likec4model.findView(browserViewId) : null;
+	const browserView = layoutType === "manual" ? browserViewModel?.$layouted : browserViewModel?.$view;
+	const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
+	const browserViewHasNotations = (browserView?.notation?.nodes?.length ?? 0) > 0;
+	const isBrowserEnabled = browser !== false;
+	const browserProps = isBoolean(browser) ? {} : browser;
+	const bounds = pickViewBounds(view, props.dynamicViewVariant);
+	return /* @__PURE__ */ jsxs(ShadowRoot, {
+		injectFontCss,
+		theme: mantineTheme,
+		colorScheme,
+		styleNonce,
+		keepAspectRatio: keepAspectRatio ? bounds : false,
+		className: cx("likec4-view", className),
+		style,
+		children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
+			view,
+			pannable,
+			zoomable,
+			background,
+			fitView: true,
+			fitViewPadding: FitViewPaddings.default,
+			enableNotations: hasNotations,
+			enableDynamicViewWalkthrough,
+			showNavigationButtons,
+			enableCompareWithLatest: false,
+			enableFocusMode,
+			enableRelationshipDetails,
+			enableElementDetails,
+			enableRelationshipBrowser,
+			enableElementTags: false,
+			enableNotes,
+			controls,
+			reduceGraphics,
+			className: cx("likec4-static-view", isBrowserEnabled && cssInteractive),
+			enableSearch: false,
+			...isBrowserEnabled && {
+				onCanvasClick: onNavigateToThisView,
+				onNodeClick: onNavigateToThisView
+			},
+			reactFlowProps,
+			renderNodes,
+			...props,
+			children
+		}), browserView && /* @__PURE__ */ jsxs(Overlay, {
+			openDelay: 0,
+			onClose: closeBrowser,
+			children: [/* @__PURE__ */ jsx(LikeC4Diagram, {
+				view: browserView,
+				pannable: true,
+				zoomable: true,
+				background: "dots",
+				onNavigateTo,
+				showNavigationButtons: true,
+				enableDynamicViewWalkthrough: true,
+				enableFocusMode: true,
+				enableRelationshipBrowser: true,
+				enableElementDetails: true,
+				enableRelationshipDetails: true,
+				enableSearch: true,
+				enableElementTags: true,
+				enableNotes: true,
+				enableCompareWithLatest: true,
+				controls: true,
+				fitView: true,
+				...props,
+				fitViewPadding: FitViewPaddings.withControls,
+				...browserProps,
+				enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
+				renderNodes,
+				onLayoutTypeChange: setLayoutType
+			}), /* @__PURE__ */ jsx(Box$1, {
+				pos: "absolute",
+				top: "4",
+				right: "4",
+				zIndex: "999",
+				onClick: stopPropagation,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "default",
+					color: "gray",
+					onClick: closeBrowser,
+					children: /* @__PURE__ */ jsx(IconX, {})
+				})
+			})]
+		})]
+	});
 }
-
+//#endregion
 export { LikeC4View };

package/dist/ReactLikeC4.js

@@ -1,67 +1,45 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
-import 'fast-equals';
-import 'react';
-import { useOptionalLikeC4Model } from './context/LikeC4ModelContext.js';
-import { LikeC4Diagram } from './LikeC4Diagram.js';
-import { ShadowRoot } from './shadowroot/ShadowRoot.js';
-import { pickViewBounds } from './utils/view-bounds.js';
-
-function ReactLikeC4({
-  viewId,
-  layoutType: initialLayoutType = "manual",
-  className,
-  colorScheme,
-  injectFontCss = true,
-  enableNotations,
-  keepAspectRatio,
-  style,
-  mantineTheme,
-  styleNonce,
-  ...props
-}) {
-  const likec4model = useOptionalLikeC4Model();
-  if (!likec4model) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
-  }
-  const viewModel = likec4model.findView(viewId);
-  if (!viewModel) {
-    return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
-  }
-  if (!viewModel.isLayouted()) {
-    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
-      'LikeC4 View "$',
-      viewId,
-      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
-    ] });
-  }
-  const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
-  const bounds = pickViewBounds(view, props.dynamicViewVariant);
-  const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
-  return /* @__PURE__ */ jsx(
-    ShadowRoot,
-    {
-      injectFontCss,
-      theme: mantineTheme,
-      colorScheme,
-      styleNonce,
-      keepAspectRatio: keepAspectRatio ? bounds : false,
-      className: cx(
-        "likec4-view",
-        className
-      ),
-      style,
-      children: /* @__PURE__ */ jsx(
-        LikeC4Diagram,
-        {
-          view,
-          enableNotations: hasNotations,
-          ...props
-        }
-      )
-    }
-  );
+import "./_virtual/_rolldown/runtime.js";
+import { useOptionalLikeC4Model } from "./context/LikeC4ModelContext.js";
+import { pickViewBounds } from "./utils/view-bounds.js";
+import { LikeC4Diagram } from "./LikeC4Diagram.js";
+import { ErrorMessage, ViewNotFound } from "./components/ViewNotFound.js";
+import { ShadowRoot } from "./shadowroot/ShadowRoot.js";
+import { cx } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ReactLikeC4.tsx
+/**
+* Ready-to-use component to display embedded LikeC4 view, same as {@link LikeC4View}
+* But provides more control over the diagram
+*
+* Component is wrapped in ShadowRoot to isolate styles.
+*/
+function ReactLikeC4({ viewId, layoutType: initialLayoutType = "manual", className, colorScheme, injectFontCss = true, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }) {
+	const likec4model = useOptionalLikeC4Model();
+	if (!likec4model) return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
+	const viewModel = likec4model.findView(viewId);
+	if (!viewModel) return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
+	if (!viewModel.isLayouted()) return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+		"LikeC4 View \"$",
+		viewId,
+		"\" is not layouted. Make sure you have LikeC4ModelProvider with layouted model."
+	] });
+	const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
+	const bounds = pickViewBounds(view, props.dynamicViewVariant);
+	const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
+	return /* @__PURE__ */ jsx(ShadowRoot, {
+		injectFontCss,
+		theme: mantineTheme,
+		colorScheme,
+		styleNonce,
+		keepAspectRatio: keepAspectRatio ? bounds : false,
+		className: cx("likec4-view", className),
+		style,
+		children: /* @__PURE__ */ jsx(LikeC4Diagram, {
+			view,
+			enableNotations: hasNotations,
+			...props
+		})
+	});
 }
-
+//#endregion
 export { ReactLikeC4 };

package/dist/StaticLikeC4Diagram.js

@@ -1,43 +1,38 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { LikeC4Diagram } from './LikeC4Diagram.js';
-
-function StaticLikeC4Diagram({
-  view,
-  fitView = true,
-  fitViewPadding = "8px",
-  enableRelationshipDetails = false,
-  enableRelationshipBrowser = enableRelationshipDetails,
-  background = "transparent",
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    LikeC4Diagram,
-    {
-      view,
-      className: cx(className, "likec4-static-view"),
-      fitView,
-      fitViewPadding,
-      pannable: false,
-      zoomable: false,
-      controls: false,
-      background,
-      enableNotations: false,
-      enableElementDetails: false,
-      enableRelationshipDetails,
-      enableRelationshipBrowser,
-      enableDynamicViewWalkthrough: false,
-      showNavigationButtons: false,
-      enableCompareWithLatest: false,
-      enableFocusMode: false,
-      enableSearch: false,
-      nodesSelectable: false,
-      enableElementTags: false,
-      enableNotes: false,
-      ...rest
-    }
-  );
+import "./_virtual/_rolldown/runtime.js";
+import { LikeC4Diagram } from "./LikeC4Diagram.js";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+//#region src/StaticLikeC4Diagram.tsx
+/**
+* StaticLikeC4Diagram is a component that renders a LikeC4 diagram in a static way.
+* (Export/Embed)
+*
+* @internal
+*/
+function StaticLikeC4Diagram({ view, fitView = true, fitViewPadding = "8px", enableRelationshipDetails = false, enableRelationshipBrowser = enableRelationshipDetails, background = "transparent", className, ...rest }) {
+	return /* @__PURE__ */ jsx(LikeC4Diagram, {
+		view,
+		className: cx(className, "likec4-static-view"),
+		fitView,
+		fitViewPadding,
+		pannable: false,
+		zoomable: false,
+		controls: false,
+		background,
+		enableNotations: false,
+		enableElementDetails: false,
+		enableRelationshipDetails,
+		enableRelationshipBrowser,
+		enableDynamicViewWalkthrough: false,
+		showNavigationButtons: false,
+		enableCompareWithLatest: false,
+		enableFocusMode: false,
+		enableSearch: false,
+		nodesSelectable: false,
+		enableElementTags: false,
+		enableNotes: false,
+		...rest
+	});
 }
-
+//#endregion
 export { StaticLikeC4Diagram };

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,17 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+	value,
+	configurable: true
+});
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll, __name };