@likec4/diagram 1.55.0 → 1.56.0

package/dist/search/components/styles.css.js

@@ -1,60 +1,54 @@
-import { css } from '@likec4/styles/css';
-
-const input = css({
-  border: "transparent",
-  background: {
-    base: "transparent",
-    _focusWithin: {
-      base: `mantine.colors.gray[4]/55 !important`,
-      _dark: `mantine.colors.dark[5]/55 !important`
-    },
-    _groupHover: {
-      base: "mantine.colors.gray[3]/35",
-      _dark: "mantine.colors.dark[5]/35"
-    }
-  }
+import "./_shared.css.js";
+import { css } from "@likec4/styles/css";
+//#region src/search/components/styles.css.ts
+var input = css({
+	border: "transparent",
+	background: {
+		base: "transparent",
+		_focusWithin: {
+			base: `mantine.colors.gray[4]/55 !important`,
+			_dark: `mantine.colors.dark[5]/55 !important`
+		},
+		_groupHover: {
+			base: "mantine.colors.gray[3]/35",
+			_dark: "mantine.colors.dark[5]/35"
+		}
+	}
 });
-const pickviewBackdrop = css({
-  position: "absolute",
-  inset: "0",
-  width: "100%",
-  height: "100%",
-  backgroundColor: "[rgb(34 34 34 / 0.7)]",
-  zIndex: 902,
-  backdropFilter: "auto",
-  backdropBlur: "10px",
-  _light: {
-    backgroundColor: "[rgb(255 255 255 / 0.6)]"
-  }
+var pickviewBackdrop = css({
+	position: "absolute",
+	inset: "0",
+	width: "100%",
+	height: "100%",
+	backgroundColor: "[rgb(34 34 34 / 0.7)]",
+	zIndex: 902,
+	backdropFilter: "auto",
+	backdropBlur: "10px",
+	_light: { backgroundColor: "[rgb(255 255 255 / 0.6)]" }
 });
-const pickview = css({
-  position: "absolute",
-  top: "[2rem]",
-  left: "[50%]",
-  width: "100%",
-  maxWidth: "600px",
-  minWidth: "200px",
-  transform: "translateX(-50%)",
-  zIndex: 903
+var pickview = css({
+	position: "absolute",
+	top: "[2rem]",
+	left: "[50%]",
+	width: "100%",
+	maxWidth: "600px",
+	minWidth: "200px",
+	transform: "translateX(-50%)",
+	zIndex: 903
 });
-const pickviewGroup = css({
-  marginTop: "2",
-  "& + &": {
-    marginTop: "[32px]"
-  }
+var pickviewGroup = css({
+	marginTop: "2",
+	"& + &": { marginTop: "[32px]" }
 });
 css({
-  height: [
-    "100%",
-    "100cqh"
-  ],
-  "& .mantine-ScrollArea-viewport": {
-    minHeight: "100%",
-    "& > div": {
-      minHeight: "100%",
-      height: "100%"
-    }
-  }
+	height: ["100%", "100cqh"],
+	"& .mantine-ScrollArea-viewport": {
+		minHeight: "100%",
+		"& > div": {
+			minHeight: "100%",
+			height: "100%"
+		}
+	}
 });
-
+//#endregion
 export { input, pickview, pickviewBackdrop, pickviewGroup };

package/dist/search/components/utils.js

@@ -1,58 +1,55 @@
-import { isFunction } from 'remeda';
-import { focusable } from './_shared.css.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { focusable } from "./_shared.css.js";
+import { isFunction } from "remeda";
+//#region src/search/components/utils.ts
 function stopAndPrevent(e) {
-  e.stopPropagation();
-  e.preventDefault();
-  return;
+	e.stopPropagation();
+	e.preventDefault();
 }
 function centerY(element) {
-  const rect = element.getBoundingClientRect();
-  const y = rect.y + Math.floor(rect.height / 2);
-  return y;
+	const rect = element.getBoundingClientRect();
+	return rect.y + Math.floor(rect.height / 2);
 }
 function moveFocusToSearchInput(from) {
-  if (!from) {
-    console.error("moveFocusToSearchInput: from is null or undefined");
-    return;
-  }
-  const root = from.getRootNode();
-  if (!isFunction(root.querySelector)) {
-    console.error("moveFocusToSearchInput: root.querySelector is not a function");
-    return;
-  }
-  let input = root.querySelector("[data-likec4-search-input]");
-  if (input) {
-    const length = input.value.length;
-    input.focus();
-    input.setSelectionRange(length, length);
-  }
+	if (!from) {
+		console.error("moveFocusToSearchInput: from is null or undefined");
+		return;
+	}
+	const root = from.getRootNode();
+	if (!isFunction(root.querySelector)) {
+		console.error("moveFocusToSearchInput: root.querySelector is not a function");
+		return;
+	}
+	let input = root.querySelector("[data-likec4-search-input]");
+	if (input) {
+		const length = input.value.length;
+		input.focus();
+		input.setSelectionRange(length, length);
+	}
 }
 function focusToFirstFoundElement(from) {
-  if (!from) {
-    console.error("focusToFirstFoundElement: from is null or undefined");
-    return;
-  }
-  const root = from.getRootNode();
-  if (!isFunction(root.querySelector)) {
-    console.error("focusToFirstFoundElement: root.querySelector is not a function");
-    return;
-  }
-  let firstFoundElement = root.querySelector(`[data-likec4-search] .${focusable}`);
-  firstFoundElement?.focus();
+	if (!from) {
+		console.error("focusToFirstFoundElement: from is null or undefined");
+		return;
+	}
+	const root = from.getRootNode();
+	if (!isFunction(root.querySelector)) {
+		console.error("focusToFirstFoundElement: root.querySelector is not a function");
+		return;
+	}
+	root.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
 }
 function queryAllFocusable(from, where, selector = `.${focusable}`) {
-  if (!from) {
-    console.error("queryAllFocusable: from is null or undefined");
-    return [];
-  }
-  const root = from.getRootNode();
-  if (!isFunction(root.querySelectorAll)) {
-    console.error("queryAllFocusable: root.querySelectorAll is not a function");
-    return [];
-  }
-  const elements = root.querySelectorAll(`[data-likec4-search-${where}] ${selector}`);
-  return [...elements];
+	if (!from) {
+		console.error("queryAllFocusable: from is null or undefined");
+		return [];
+	}
+	const root = from.getRootNode();
+	if (!isFunction(root.querySelectorAll)) {
+		console.error("queryAllFocusable: root.querySelectorAll is not a function");
+		return [];
+	}
+	return [...root.querySelectorAll(`[data-likec4-search-${where}] ${selector}`)];
 }
-
+//#endregion
 export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent };

package/dist/search/hooks.js

@@ -1,15 +1,15 @@
-import { useCallback, useDeferredValue } from 'react';
-import { useSearchContext } from './SearchContext.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useSearchContext } from "./SearchContext.js";
+import { useCallback, useDeferredValue } from "react";
+//#region src/search/hooks.ts
 function useNormalizedSearch() {
-  const ctx = useSearchContext();
-  return useDeferredValue(ctx.normalizedSearch);
+	return useDeferredValue(useSearchContext().normalizedSearch);
 }
 function useUpdateSearch() {
-  const { setSearchValue } = useSearchContext();
-  return useCallback((search) => {
-    setSearchValue(search);
-  }, [setSearchValue]);
+	const { setSearchValue } = useSearchContext();
+	return useCallback((search) => {
+		setSearchValue(search);
+	}, [setSearchValue]);
 }
-
+//#endregion
 export { useNormalizedSearch, useUpdateSearch };

package/dist/search/searchActor.js

@@ -1,131 +1,96 @@
-import { setup, assign, assertEvent, enqueueActions } from 'xstate';
-import { typedSystem } from '../likec4diagram/state/utils.js';
-
-const _searchActorLogic = setup({
-  types: {
-    context: {},
-    events: {}
-  },
-  actions: {
-    "reset navigateTo": assign({
-      navigateTo: () => null
-    }),
-    "assign navigateTo": assign(({ event }) => {
-      assertEvent(event, ["navigate.to"]);
-      return {
-        navigateTo: {
-          viewId: event.viewId,
-          focusOnElement: event.focusOnElement
-        }
-      };
-    }),
-    "change searchValue": assign({
-      searchValue: ({ event, context }) => {
-        assertEvent(event, ["change.search", "open"]);
-        return event.search ?? context.searchValue;
-      }
-    }),
-    "reset pickViewFor": assign({
-      pickViewFor: () => null
-    })
-  }
+import "../_virtual/_rolldown/runtime.js";
+import { typedSystem } from "../likec4diagram/state/utils.js";
+import { assertEvent, assign, enqueueActions, setup } from "xstate";
+var searchActorLogic = setup({
+	types: {
+		context: {},
+		events: {}
+	},
+	actions: {
+		"reset navigateTo": assign({ navigateTo: () => null }),
+		"assign navigateTo": assign(({ event }) => {
+			assertEvent(event, ["navigate.to"]);
+			return { navigateTo: {
+				viewId: event.viewId,
+				focusOnElement: event.focusOnElement
+			} };
+		}),
+		"change searchValue": assign({ searchValue: ({ event, context }) => {
+			assertEvent(event, ["change.search", "open"]);
+			return event.search ?? context.searchValue;
+		} }),
+		"reset pickViewFor": assign({ pickViewFor: () => null })
+	}
 }).createMachine({
-  id: "search",
-  context: {
-    openedWithSearch: null,
-    searchValue: "",
-    pickViewFor: null,
-    navigateTo: null
-  },
-  initial: "inactive",
-  on: {
-    "close": {
-      target: ".inactive"
-    }
-  },
-  states: {
-    inactive: {
-      entry: [
-        "reset navigateTo",
-        "reset pickViewFor"
-      ],
-      on: {
-        "open": {
-          target: "opened",
-          actions: [
-            assign({
-              openedWithSearch: ({ event }) => event.search ?? null,
-              searchValue: ({ event, context }) => event.search ?? context.searchValue
-            })
-          ]
-        }
-      }
-    },
-    opened: {
-      on: {
-        "open": {
-          actions: "change searchValue"
-        },
-        "change.search": {
-          actions: "change searchValue"
-        },
-        "pickview.open": {
-          target: "pickView",
-          actions: assign({
-            pickViewFor: ({ event }) => event.elementFqn
-          })
-        },
-        "navigate.to": {
-          target: "waitAnimationEnd",
-          actions: "assign navigateTo"
-        }
-      }
-    },
-    pickView: {
-      on: {
-        "pickview.close": {
-          target: "opened",
-          actions: "reset pickViewFor"
-        },
-        "navigate.to": {
-          target: "waitAnimationEnd",
-          actions: "assign navigateTo"
-        }
-      }
-    },
-    /**
-     * Wait for animation end before triggering navigation
-     * Otherwise, there could be weird artifacts when navigating to large diagrams.
-     */
-    waitAnimationEnd: {
-      on: {
-        "animation.presence.end": {
-          target: "inactive",
-          actions: enqueueActions(({ context, system, enqueue }) => {
-            const navigateTo = context.navigateTo;
-            if (!navigateTo) return;
-            enqueue("reset navigateTo");
-            const diagramActor = typedSystem(system).diagramActorRef;
-            if (navigateTo.focusOnElement) {
-              const viewId = diagramActor.getSnapshot().context.view.id;
-              if (viewId === navigateTo.viewId) {
-                enqueue.sendTo(diagramActor, {
-                  type: "focus.node",
-                  nodeId: navigateTo.focusOnElement
-                });
-                return;
-              }
-            }
-            enqueue.sendTo(diagramActor, {
-              type: "navigate.to",
-              ...navigateTo
-            });
-          })
-        }
-      }
-    }
-  }
+	id: "search",
+	context: {
+		openedWithSearch: null,
+		searchValue: "",
+		pickViewFor: null,
+		navigateTo: null
+	},
+	initial: "inactive",
+	on: { "close": { target: ".inactive" } },
+	states: {
+		inactive: {
+			entry: ["reset navigateTo", "reset pickViewFor"],
+			on: { "open": {
+				target: "opened",
+				actions: [assign({
+					openedWithSearch: ({ event }) => event.search ?? null,
+					searchValue: ({ event, context }) => event.search ?? context.searchValue
+				})]
+			} }
+		},
+		opened: { on: {
+			"open": { actions: "change searchValue" },
+			"change.search": { actions: "change searchValue" },
+			"pickview.open": {
+				target: "pickView",
+				actions: assign({ pickViewFor: ({ event }) => event.elementFqn })
+			},
+			"navigate.to": {
+				target: "waitAnimationEnd",
+				actions: "assign navigateTo"
+			}
+		} },
+		pickView: { on: {
+			"pickview.close": {
+				target: "opened",
+				actions: "reset pickViewFor"
+			},
+			"navigate.to": {
+				target: "waitAnimationEnd",
+				actions: "assign navigateTo"
+			}
+		} },
+		/**
+		* Wait for animation end before triggering navigation
+		* Otherwise, there could be weird artifacts when navigating to large diagrams.
+		*/
+		waitAnimationEnd: { on: { "animation.presence.end": {
+			target: "inactive",
+			actions: enqueueActions(({ context, system, enqueue }) => {
+				const navigateTo = context.navigateTo;
+				if (!navigateTo) return;
+				enqueue("reset navigateTo");
+				const diagramActor = typedSystem(system).diagramActorRef;
+				if (navigateTo.focusOnElement) {
+					if (diagramActor.getSnapshot().context.view.id === navigateTo.viewId) {
+						enqueue.sendTo(diagramActor, {
+							type: "focus.node",
+							nodeId: navigateTo.focusOnElement
+						});
+						return;
+					}
+				}
+				enqueue.sendTo(diagramActor, {
+					type: "navigate.to",
+					...navigateTo
+				});
+			})
+		} } }
+	}
 });
-const searchActorLogic = _searchActorLogic;
-
+//#endregion
 export { searchActorLogic };

package/dist/shadowroot/ShadowRoot.js

@@ -1,18 +1,18 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useMergedRef } from '@mantine/hooks';
-import { forwardRef, useRef, useState, memo } from 'react';
-import root from 'react-shadow';
-import { isDefined } from 'remeda';
-import { DefaultMantineProvider } from '../context/DefaultMantineProvider.js';
-import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
-import { useCallbackRef } from '../hooks/useCallbackRef.js';
-import { useId } from '../hooks/useId.js';
-import { useColorScheme, useBundledStyleSheet } from './styles.css.js';
-
-const Root = root["div"];
+import "../_virtual/_rolldown/runtime.js";
+import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
+import { DefaultMantineProvider } from "../context/DefaultMantineProvider.js";
+import { FramerMotionConfig } from "../context/FramerMotionConfig.js";
+import { useId as useId$1 } from "../hooks/useId.js";
+import { useBundledStyleSheet, useColorScheme as useColorScheme$1 } from "./styles.css.js";
+import { forwardRef, memo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { isDefined } from "remeda";
+import { useMergedRef } from "@mantine/hooks";
+import root from "react-shadow";
+//#region src/shadowroot/ShadowRoot.tsx
+var Root = root["div"];
 function useShadowRootStyle(instanceId, keepAspectRatio = false) {
-  if (keepAspectRatio === false) {
-    return `
+	if (keepAspectRatio === false) return `
 :where([data-likec4-instance="${instanceId}"]) {
   display: block;
   box-sizing: border-box;
@@ -27,11 +27,10 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
   min-height: 80px;
 }
   `.trim();
-  }
-  const width = Math.ceil(keepAspectRatio.width);
-  const height = Math.ceil(keepAspectRatio.height);
-  const isLandscape = width > height;
-  return `
+	const width = Math.ceil(keepAspectRatio.width);
+	const height = Math.ceil(keepAspectRatio.height);
+	const isLandscape = width > height;
+	return `
 :where([data-likec4-instance="${instanceId}"]) {
   display: block;
   box-sizing: border-box;
@@ -51,65 +50,54 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
 }
 `.trim();
 }
-const ShadowRoot = forwardRef(({
-  children,
-  theme,
-  injectFontCss = true,
-  styleNonce,
-  colorScheme: explicitColorScheme,
-  keepAspectRatio = false,
-  ...props
-}, ref) => {
-  const colorScheme = useColorScheme(explicitColorScheme);
-  const id = useId();
-  const cssstyle = useShadowRootStyle(id, keepAspectRatio);
-  const rootRef = useRef(null);
-  const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
-  const getRootElement = useCallbackRef(() => rootRef.current ?? void 0);
-  const getStyleNonce = useCallbackRef(() => {
-    if (isDefined(styleNonce)) {
-      if (typeof styleNonce === "string") {
-        return styleNonce;
-      } else if (typeof styleNonce === "function") {
-        return styleNonce();
-      }
-    }
-    return "";
-  });
-  const [nonce] = useState(getStyleNonce);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(MemoizedStyle, { nonce, cssstyle }),
-    /* @__PURE__ */ jsx(Root, { ssr: false, ...props, styleSheets, "data-likec4-instance": id, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: useMergedRef(rootRef, ref),
-        "data-mantine-color-scheme": colorScheme,
-        className: "likec4-shadow-root",
-        children: /* @__PURE__ */ jsx(
-          DefaultMantineProvider,
-          {
-            defaultColorScheme: colorScheme,
-            getRootElement,
-            cssVariablesSelector: ".likec4-shadow-root",
-            withCssVariables: true,
-            getStyleNonce,
-            theme,
-            ...explicitColorScheme && { forceColorScheme: explicitColorScheme },
-            children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })
-          }
-        )
-      }
-    ) })
-  ] });
+var ShadowRoot = forwardRef(({ children, theme, injectFontCss = true, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio = false, ...props }, ref) => {
+	const colorScheme = useColorScheme$1(explicitColorScheme);
+	const id = useId$1();
+	const cssstyle = useShadowRootStyle(id, keepAspectRatio);
+	const rootRef = useRef(null);
+	const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
+	const getRootElement = useCallbackRef$1(() => rootRef.current ?? void 0);
+	const getStyleNonce = useCallbackRef$1(() => {
+		if (isDefined(styleNonce)) {
+			if (typeof styleNonce === "string") return styleNonce;
+			else if (typeof styleNonce === "function") return styleNonce();
+		}
+		return "";
+	});
+	const [nonce] = useState(getStyleNonce);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MemoizedStyle, {
+		nonce,
+		cssstyle
+	}), /* @__PURE__ */ jsx(Root, {
+		ssr: false,
+		...props,
+		styleSheets,
+		"data-likec4-instance": id,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: useMergedRef(rootRef, ref),
+			"data-mantine-color-scheme": colorScheme,
+			className: "likec4-shadow-root",
+			children: /* @__PURE__ */ jsx(DefaultMantineProvider, {
+				defaultColorScheme: colorScheme,
+				getRootElement,
+				cssVariablesSelector: ".likec4-shadow-root",
+				withCssVariables: true,
+				getStyleNonce,
+				theme,
+				...explicitColorScheme && { forceColorScheme: explicitColorScheme },
+				children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })
+			})
+		})
+	})] });
 });
-const MemoizedStyle = memo(({ nonce, cssstyle }) => /* @__PURE__ */ jsx(
-  "style",
-  {
-    type: "text/css",
-    nonce,
-    dangerouslySetInnerHTML: { __html: cssstyle }
-  }
-));
+/**
+* @internal Memoized styles gives a performance boost during development
+*/
+var MemoizedStyle = memo(({ nonce, cssstyle }) => /* @__PURE__ */ jsx("style", {
+	type: "text/css",
+	nonce: nonce || void 0,
+	dangerouslySetInnerHTML: { __html: cssstyle }
+}));
 MemoizedStyle.displayName = "MemoizedStyle";
-
+//#endregion
 export { ShadowRoot };