@likec4/diagram 1.55.1 → 1.57.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,100 @@
-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: {}
+	},
+	delays: { "MAX_WAIT_ANIMATION_END": 1e3 },
+	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",
+	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"
+			},
+			"close": { target: "inactive" }
+		} },
+		pickView: { on: {
+			"pickview.close": {
+				target: "opened",
+				actions: "reset pickViewFor"
+			},
+			"navigate.to": {
+				target: "waitAnimationEnd",
+				actions: "assign navigateTo"
+			},
+			"close": { target: "inactive" }
+		} },
+		/**
+		* 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;
+					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
+					});
+				})
+			} },
+			after: { MAX_WAIT_ANIMATION_END: { target: "inactive" } }
+		}
+	}
 });
-const searchActorLogic = _searchActorLogic;
-
+//#endregion
 export { searchActorLogic };

package/dist/shadowroot/ShadowRoot.d.ts

@@ -1,10 +1,9 @@
-import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
-export declare const ShadowRoot: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+import { HTMLAttributes } from 'react';
+export declare function useShadowRoot(): ShadowRoot;
+type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
     injectFontCss?: boolean | undefined;
     styleNonce?: string | (() => string) | undefined;
-    mode?: "open" | "closed";
-    delegatesFocus?: boolean;
-    colorScheme?: "light" | "dark" | undefined;
+    colorScheme?: 'light' | 'dark' | undefined;
     keepAspectRatio?: false | undefined | {
         width: number;
         height: number;
@@ -14,4 +13,6 @@ export declare const ShadowRoot: ForwardRefExoticComponent<HTMLAttributes<HTMLDi
      * @see https://mantine.dev/theming/mantine-provider/#theme-prop
      */
     theme?: any;
-} & RefAttributes<HTMLDivElement>>;
+};
+export declare function ShadowRoot({ children, theme, injectFontCss, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio, ...props }: ShadowRootProps): import("react/jsx-runtime").JSX.Element;
+export {};