@likec4/diagram 1.56.0 → 1.58.0

package/dist/overlays/relationships-browser/custom/ElementActions.d.ts

@@ -1,2 +1,2 @@
 import { RelationshipsBrowserTypes as Types } from '../_types';
-export declare const ElementActions: (props: Types.NodeProps<"element">) => import("react/jsx-runtime").JSX.Element;
+export declare const ElementActions: (props: Types.NodeProps<"element">) => import("react").JSX.Element;

package/dist/overlays/relationships-browser/custom/EmptyNode.d.ts

@@ -1,2 +1,2 @@
 import { RelationshipsBrowserTypes } from '../_types';
-export declare function EmptyNode({ data: { column, }, }: RelationshipsBrowserTypes.NodeProps<'empty'>): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyNode({ data: { column, }, }: RelationshipsBrowserTypes.NodeProps<'empty'>): import("react").JSX.Element;

package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts

@@ -1,9 +1,9 @@
 import { BaseNodePropsWithData } from '../../../base';
 import { RelationshipsBrowserTypes } from '../_types';
-export declare function ElementNode(props: RelationshipsBrowserTypes.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
-export declare function CompoundNode(props: RelationshipsBrowserTypes.NodeProps<'compound'>): import("react/jsx-runtime").JSX.Element;
+export declare function ElementNode(props: RelationshipsBrowserTypes.NodeProps<'element'>): import("react").JSX.Element;
+export declare function CompoundNode(props: RelationshipsBrowserTypes.NodeProps<'compound'>): import("react").JSX.Element;
 type ElementPortsProps = BaseNodePropsWithData<Pick<RelationshipsBrowserTypes.ElementNodeData, 'ports' | 'height'>>;
-export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react").JSX.Element;
 type CompoundPortsProps = BaseNodePropsWithData<Pick<RelationshipsBrowserTypes.CompoundNodeData, 'ports'>>;
-export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react").JSX.Element;
 export {};

package/dist/projects-overview/ProjectsOverview.d.ts

@@ -10,4 +10,4 @@ export type ProjectsOverviewProps = {
     onNavigateToProject?: undefined | ((projectId: ProjectId) => void);
     fitViewPadding?: ViewPadding | undefined;
 } & ProjectsOverviewXYProps;
-export declare function ProjectsOverview({ view, onNavigateToProject, fitViewPadding, ...props }: ProjectsOverviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectsOverview({ view, onNavigateToProject, fitViewPadding, ...props }: ProjectsOverviewProps): import("react").JSX.Element;

package/dist/projects-overview/custom/nodeTypes.d.ts

@@ -1,2 +1,2 @@
 import { ProjectsOverviewTypes } from '../_types';
-export declare function ProjectNode(props: ProjectsOverviewTypes.NodeProps<'project'>): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectNode(props: ProjectsOverviewTypes.NodeProps<'project'>): import("react").JSX.Element;

package/dist/projects-overview/panel/ProjectsOverviewPanel.d.ts

@@ -1 +1 @@
-export declare const ProjectsOverviewPanel: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProjectsOverviewPanel: () => import("react").JSX.Element;

package/dist/search/Search.d.ts

@@ -1,10 +1,13 @@
-import { MemoExoticComponent } from 'react';
+import { SearchActorRef } from './searchActor';
+import { MemoExoticComponent, ForwardRefExoticComponent, RefAttributes } from 'react';
 export declare const dialogCss: string;
 export declare const bodyCss: string;
 export declare const scrollAreaCss: string;
-export declare const Search: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const Search: MemoExoticComponent<({ searchActorRef }: {
+    searchActorRef: SearchActorRef;
+}) => import("react").JSX.Element>;
 /**
  * The shared search panel content used by both diagram and overview search.
  * Must be rendered inside a SearchContext.Provider.
  */
-export declare const SearchPanelContent: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const SearchPanelContent: ForwardRefExoticComponent<RefAttributes<HTMLDivElement>>;

package/dist/search/Search.js

@@ -1,7 +1,6 @@
 import "../_virtual/_rolldown/runtime.js";
-import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
+import { useDiagram } from "../hooks/safeContext.js";
 import { Overlay } from "../overlays/overlay/Overlay.js";
-import { useSearchActorRef } from "../hooks/useSearchActor.js";
 import { useSearchContext } from "./SearchContext.js";
 import { focusToFirstFoundElement, moveFocusToSearchInput } from "./components/utils.js";
 import { ViewsColumn } from "./components/ViewsColum.js";
@@ -11,16 +10,15 @@ import { SearchByTags } from "./components/SearchByTags.js";
 import { LikeC4SearchInput } from "./components/SearchInput.js";
 import { XStateSearchAdapter } from "./XStateSearchAdapter.js";
 import { css } from "@likec4/styles/css";
-import { Suspense, memo, useEffect, useMemo, useRef } from "react";
+import { forwardRef, memo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTimeoutEffect } from "@react-hookz/web";
 import { isTruthy } from "remeda";
 import { Grid, GridCol, Group, ScrollArea, Title } from "@mantine/core";
-import { AnimatePresence, LayoutGroup, usePresence } from "motion/react";
+import { AnimatePresence, LayoutGroup } from "motion/react";
 import { useSelector } from "@xstate/react";
-import { useHotkeys } from "@mantine/hooks";
+import { useHotkeys, useMergedRef } from "@mantine/hooks";
 import { Box as Box$1, VStack } from "@likec4/styles/jsx";
-import { createEmptyActor } from "xstate";
 //#region src/search/Search.tsx
 var dialogCss = css({
 	backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
@@ -61,52 +59,64 @@ var selectIsOpened = (s) => {
 		return false;
 	}
 };
-var Search = memo(() => {
-	const searchActorRef = useSearchActorRef();
-	const emptyActorRef = useRef(createEmptyActor());
-	const isOpened = useSelector(searchActorRef ?? emptyActorRef.current, selectIsOpened);
-	const close = useCallbackRef$1(() => {
-		searchActorRef?.send({ type: "close" });
-	});
-	useHotkeys(useMemo(() => {
-		const openSearch = () => searchActorRef?.send({ type: "open" });
-		return searchActorRef ? [[
-			"mod+k",
-			openSearch,
-			{ preventDefault: true }
-		], [
-			"mod+f",
-			openSearch,
-			{ preventDefault: true }
-		]] : [];
-	}, [searchActorRef]));
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: searchActorRef && isOpened && /* @__PURE__ */ jsx(Overlay, {
-		fullscreen: true,
-		withBackdrop: false,
-		backdrop: { opacity: .9 },
-		classes: {
-			dialog: dialogCss,
-			body: bodyCss
+var Search = memo(({ searchActorRef }) => {
+	const diagram = useDiagram();
+	const isOpened = useSelector(searchActorRef, selectIsOpened);
+	const close = () => {
+		diagram.searchActor().send({ type: "close" });
+	};
+	const open = (event) => {
+		event.stopPropagation();
+		diagram.searchActor().send({ type: "open" });
+	};
+	useHotkeys(isOpened ? [] : [[
+		"mod+k",
+		open,
+		{ preventDefault: true }
+	], [
+		"mod+f",
+		open,
+		{ preventDefault: true }
+	]]);
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		onExitComplete: () => {
+			diagram.searchActor().send({ type: "animation.presence.end" });
 		},
-		openDelay: 0,
-		onClose: close,
-		"data-likec4-search": "true",
-		children: /* @__PURE__ */ jsx(XStateSearchAdapter, {
-			searchActorRef,
-			children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef })
+		children: isOpened && /* @__PURE__ */ jsx(Overlay, {
+			fullscreen: true,
+			withBackdrop: false,
+			backdrop: { opacity: .9 },
+			classes: {
+				dialog: dialogCss,
+				body: bodyCss
+			},
+			openDelay: 0,
+			onClose: close,
+			"data-likec4-search": "true",
+			children: /* @__PURE__ */ jsx(XStateSearchAdapter, {
+				searchActorRef,
+				children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef })
+			})
 		})
-	}) });
+	});
 });
 Search.displayName = "Search";
+function SearchOverlayBody({ searchActorRef }) {
+	const ref = useRef(null);
+	useTimeoutEffect(() => {
+		if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) focusToFirstFoundElement(ref.current);
+	}, 150);
+	return /* @__PURE__ */ jsx(SearchPanelContent, { ref });
+}
 /**
 * The shared search panel content used by both diagram and overview search.
 * Must be rendered inside a SearchContext.Provider.
 */
-var SearchPanelContent = memo(() => {
-	const ref = useRef(null);
+var SearchPanelContent = forwardRef((_, ref) => {
+	const contentRef = useRef(null);
 	const { pickViewFor } = useSearchContext();
 	return /* @__PURE__ */ jsxs(Box$1, {
-		ref,
+		ref: useMergedRef(ref, contentRef),
 		display: "contents",
 		children: [
 			/* @__PURE__ */ jsx(Group, {
@@ -114,7 +124,7 @@ var SearchPanelContent = memo(() => {
 				wrap: "nowrap",
 				onClick: (e) => {
 					e.stopPropagation();
-					moveFocusToSearchInput(ref.current);
+					moveFocusToSearchInput(contentRef.current);
 				},
 				children: /* @__PURE__ */ jsxs(VStack, {
 					flex: 1,
@@ -157,7 +167,11 @@ var SearchPanelContent = memo(() => {
 						scrollbars: "y",
 						children: /* @__PURE__ */ jsx(LayoutGroup, {
 							id: "likec4-search-elements",
-							children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ElementsColumn, {}) })
+							children: /* @__PURE__ */ jsx(AnimatePresence, {
+								mode: "popLayout",
+								anchorY: "top",
+								children: /* @__PURE__ */ jsx(ElementsColumn, {})
+							})
 						})
 					})
 				}), /* @__PURE__ */ jsx(GridCol, {
@@ -167,10 +181,10 @@ var SearchPanelContent = memo(() => {
 						className: scrollAreaCss,
 						pr: "xs",
 						scrollbars: "y",
-						children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LayoutGroup, {
+						children: /* @__PURE__ */ jsx(LayoutGroup, {
 							id: "likec4-search-views",
 							children: /* @__PURE__ */ jsx(ViewsColumn, {})
-						}) })
+						})
 					})
 				})]
 			}),
@@ -179,30 +193,5 @@ var SearchPanelContent = memo(() => {
 	});
 });
 SearchPanelContent.displayName = "SearchPanelContent";
-var SearchOverlayBody = memo(function SearchOverlayBody({ searchActorRef }) {
-	const ref = useRef(null);
-	useTimeoutEffect(() => {
-		if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) focusToFirstFoundElement(ref.current);
-	}, 150);
-	const [isPresent, safeToRemove] = usePresence();
-	useEffect(() => {
-		if (isPresent) return;
-		safeToRemove();
-		try {
-			searchActorRef.send({ type: "animation.presence.end" });
-		} catch (e) {
-			console.debug("SearchOverlayBody: animation.presence.end failed", e);
-		}
-	}, [
-		isPresent,
-		searchActorRef,
-		safeToRemove
-	]);
-	return /* @__PURE__ */ jsx(Box$1, {
-		ref,
-		display: "contents",
-		children: /* @__PURE__ */ jsx(SearchPanelContent, {})
-	});
-});
 //#endregion
 export { Search, SearchPanelContent, bodyCss, dialogCss };

package/dist/search/XStateSearchAdapter.d.ts

@@ -2,4 +2,4 @@ import { PropsWithChildren } from 'react';
 import { SearchActorRef } from './searchActor';
 export declare function XStateSearchAdapter({ searchActorRef, children, }: PropsWithChildren<{
     searchActorRef: SearchActorRef;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/search/components/ElementsColumn.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const ElementsColumn: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const ElementsColumn: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/search/components/ElementsColumn.js

@@ -25,7 +25,8 @@ function useElementsColumnData() {
 		value: element.id,
 		element,
 		viewsCount: [...element.views()].length,
-		children: []
+		children: [],
+		hasChildren: false
 	})), toArray()), [model]);
 	const search = useNormalizedSearch();
 	return useMemo(() => {
@@ -61,10 +62,13 @@ function useElementsColumnData() {
 		const byid = {};
 		const { hash, all, roots } = pipe(elements, reduce((acc, treeItem) => {
 			treeItem.children = [];
+			treeItem.hasChildren = false;
 			byid[treeItem.value] = treeItem;
 			const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value));
-			if (parent) parent.children.push(treeItem);
-			else acc.roots.push(treeItem);
+			if (parent) {
+				parent.children.push(treeItem);
+				parent.hasChildren = true;
+			} else acc.roots.push(treeItem);
 			acc.all.push(treeItem);
 			acc.hash = stringHash(acc.hash + treeItem.value);
 			return acc;
@@ -111,7 +115,7 @@ function ElementsTree({ data: { searchTerms, all, byid, hash, roots }, handleCli
 			return;
 		}
 		if (e.key === "ArrowRight") {
-			if (node.children.length > 0 && tree.expandedState[id] === false) return;
+			if (node.children.length > 0 && tree.expandedState[id] !== true) return;
 			const maxY = (e.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y;
 			const viewButtons = queryAllFocusable(target, "views");
 			let view = viewButtons.length > 1 ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
@@ -135,7 +139,7 @@ function ElementsTree({ data: { searchTerms, all, byid, hash, roots }, handleCli
 		selectOnClick: false,
 		tree,
 		data: roots,
-		levelOffset: "lg",
+		levelOffset: "md",
 		classNames: {
 			root: treeRoot,
 			node: cx(focusable, treeNode),
@@ -150,7 +154,7 @@ function ElementsTree({ data: { searchTerms, all, byid, hash, roots }, handleCli
 		})
 	});
 }
-function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClick, searchTerms }) {
+function ElementTreeNode({ node, elementProps, expanded, handleClick, searchTerms }) {
 	const { label, element, viewsCount } = node;
 	const elementIcon$1 = IconOrShapeRenderer({
 		element: {
@@ -170,7 +174,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClic
 			size: 16,
 			tabIndex: -1,
 			className: cx(elementExpandIcon),
-			style: { visibility: hasChildren ? "visible" : "hidden" },
+			style: { visibility: node.hasChildren ? "visible" : "hidden" },
 			children: /* @__PURE__ */ jsx(IconChevronRight, {
 				stroke: 3.5,
 				style: {
@@ -186,7 +190,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClic
 			"data-value": element.id,
 			className: cx(btn.root, "group", "likec4-element-button"),
 			...viewsCount > 0 && { onClick: (e) => {
-				if (!hasChildren || expanded) {
+				if (!node.hasChildren || expanded) {
 					e.stopPropagation();
 					handleClick(element);
 				}

package/dist/search/components/PickView.d.ts

@@ -1,4 +1,4 @@
 import { Fqn } from '@likec4/core/types';
 export declare function PickView({ elementFqn, }: {
     elementFqn: Fqn;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/search/components/SearchByTags.d.ts

@@ -1 +1 @@
-export declare function SearchByTags(): import("react/jsx-runtime").JSX.Element | null;
+export declare function SearchByTags(): import("react").JSX.Element | null;

package/dist/search/components/SearchInput.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const LikeC4SearchInput: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const LikeC4SearchInput: MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/search/components/ViewsColum.d.ts

@@ -2,12 +2,12 @@ import { LikeC4Model } from '@likec4/core/model';
 import { Fqn } from '@likec4/core/types';
 import { ElementProps, UnstyledButtonProps } from '@mantine/core';
 import { MemoExoticComponent } from 'react';
-export declare const NothingFound: () => import("react/jsx-runtime").JSX.Element;
-export declare const ViewsColumn: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const NothingFound: () => import("react").JSX.Element;
+export declare const ViewsColumn: MemoExoticComponent<() => import("react").JSX.Element>;
 export declare function ViewButton({ className, view, loop, search, focusOnElement, currentViewId, ...props }: {
     view: LikeC4Model.View;
     currentViewId: string;
     search: string;
     loop?: boolean;
     focusOnElement?: Fqn;
-} & UnstyledButtonProps & ElementProps<'button'>): import("react/jsx-runtime").JSX.Element;
+} & UnstyledButtonProps & ElementProps<'button'>): import("react").JSX.Element;

package/dist/search/components/_shared.css.d.ts

@@ -1,4 +1,4 @@
-import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles';
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '../../../styled-system';
 export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
 export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;

package/dist/search/searchActor.js

@@ -6,8 +6,9 @@ var searchActorLogic = setup({
 		context: {},
 		events: {}
 	},
+	delays: { "MAX_WAIT_ANIMATION_END": 1e3 },
 	actions: {
-		"reset navigateTo": assign({ navigateTo: () => null }),
+		"reset navigateTo": assign(() => ({ navigateTo: null })),
 		"assign navigateTo": assign(({ event }) => {
 			assertEvent(event, ["navigate.to"]);
 			return { navigateTo: {
@@ -19,7 +20,7 @@ var searchActorLogic = setup({
 			assertEvent(event, ["change.search", "open"]);
 			return event.search ?? context.searchValue;
 		} }),
-		"reset pickViewFor": assign({ pickViewFor: () => null })
+		"reset pickViewFor": assign(() => ({ pickViewFor: null }))
 	}
 }).createMachine({
 	id: "search",
@@ -30,7 +31,6 @@ var searchActorLogic = setup({
 		navigateTo: null
 	},
 	initial: "inactive",
-	on: { "close": { target: ".inactive" } },
 	states: {
 		inactive: {
 			entry: ["reset navigateTo", "reset pickViewFor"],
@@ -52,7 +52,8 @@ var searchActorLogic = setup({
 			"navigate.to": {
 				target: "waitAnimationEnd",
 				actions: "assign navigateTo"
-			}
+			},
+			"close": { target: "inactive" }
 		} },
 		pickView: { on: {
 			"pickview.close": {
@@ -62,34 +63,37 @@ var searchActorLogic = setup({
 			"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;
-				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;
+		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
-				});
-			})
-		} } }
+					enqueue.sendTo(diagramActor, {
+						type: "navigate.to",
+						...navigateTo
+					});
+				})
+			} },
+			after: { MAX_WAIT_ANIMATION_END: { target: "inactive" } }
+		}
 	}
 });
 //#endregion

package/dist/shadowroot/ShadowRoot.d.ts

@@ -1,10 +1,8 @@
-import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
-export declare const ShadowRoot: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+import { HTMLAttributes } from 'react';
+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 +12,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.Element;
+export {};

package/dist/shadowroot/ShadowRoot.js

@@ -1,16 +1,16 @@
 import "../_virtual/_rolldown/runtime.js";
-import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
+import { useCallbackRef } 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 { useId } from "../hooks/useId.js";
+import { ShadowRootContext } from "../context/ShadowRootContext.js";
+import { appendFontToDocument, createShadowRootStylesheets, shadowRootCSS, useColorScheme } from "./styles.js";
+import { memo, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { shallowEqual } from "fast-equals";
 import { isDefined } from "remeda";
-import { useMergedRef } from "@mantine/hooks";
-import root from "react-shadow";
+import { createPortal } from "react-dom";
 //#region src/shadowroot/ShadowRoot.tsx
-var Root = root["div"];
 function useShadowRootStyle(instanceId, keepAspectRatio = false) {
 	if (keepAspectRatio === false) return `
 :where([data-likec4-instance="${instanceId}"]) {
@@ -50,31 +50,28 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
 }
 `.trim();
 }
-var ShadowRoot = forwardRef(({ children, theme, injectFontCss = true, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio = false, ...props }, ref) => {
-	const colorScheme = useColorScheme$1(explicitColorScheme);
-	const id = useId$1();
+function ShadowRoot({ children, theme, injectFontCss = true, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio = false, ...props }) {
+	const colorScheme = useColorScheme(explicitColorScheme);
+	const id = useId();
 	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(() => {
+	const mantineRootRef = useRef(null);
+	useLayoutEffect(() => appendFontToDocument(injectFontCss, styleNonce), []);
+	const getRootElement = useCallbackRef(() => mantineRootRef.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$1, { children: [/* @__PURE__ */ jsx(MemoizedStyle, {
-		nonce,
+		nonce: getStyleNonce(),
 		cssstyle
-	}), /* @__PURE__ */ jsx(Root, {
-		ssr: false,
+	}), /* @__PURE__ */ jsx(ShadowRootHost, {
 		...props,
-		styleSheets,
 		"data-likec4-instance": id,
 		children: /* @__PURE__ */ jsx("div", {
-			ref: useMergedRef(rootRef, ref),
+			ref: mantineRootRef,
 			"data-mantine-color-scheme": colorScheme,
 			className: "likec4-shadow-root",
 			children: /* @__PURE__ */ jsx(DefaultMantineProvider, {
@@ -89,15 +86,63 @@ var ShadowRoot = forwardRef(({ children, theme, injectFontCss = true, styleNonce
 			})
 		})
 	})] });
-});
+}
 /**
 * @internal Memoized styles gives a performance boost during development
 */
 var MemoizedStyle = memo(({ nonce, cssstyle }) => /* @__PURE__ */ jsx("style", {
 	type: "text/css",
-	nonce: nonce || void 0,
+	nonce,
 	dangerouslySetInnerHTML: { __html: cssstyle }
-}));
+}), shallowEqual);
 MemoizedStyle.displayName = "MemoizedStyle";
+var ShadowRootHostPortal = ({ children, root }) => {
+	return createPortal(children, root, "likec4-shadow-root");
+};
+var ShadowRootHost = ({ children, ...props }) => {
+	const hostRef = useRef(null);
+	const [root, setRoot] = useState(null);
+	const styles = shadowRootCSS();
+	const updateShadowRoot = useEffectEvent((styles) => {
+		setRoot((current) => {
+			const host = hostRef.current;
+			if (!host) return null;
+			if (host.shadowRoot) {
+				try {
+					if (host.shadowRoot.adoptedStyleSheets?.length !== 1) {
+						console.error("Shadow root has unexpected number of style sheets (expected 1, got %d)", host.shadowRoot.adoptedStyleSheets?.length ?? 0);
+						return host.shadowRoot;
+					}
+					host.shadowRoot.adoptedStyleSheets[0].replaceSync(styles);
+				} catch (error) {}
+				return host.shadowRoot;
+			}
+			try {
+				const shadowRoot = host.attachShadow({
+					mode: "open",
+					delegatesFocus: false
+				});
+				shadowRoot.adoptedStyleSheets = createShadowRootStylesheets(styles);
+				return shadowRoot;
+			} catch (error) {
+				return current;
+			}
+		});
+	});
+	useLayoutEffect(() => {
+		updateShadowRoot(styles);
+	}, [styles]);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: hostRef,
+		children: root && /* @__PURE__ */ jsx(ShadowRootHostPortal, {
+			root,
+			children: /* @__PURE__ */ jsx(ShadowRootContext, {
+				value: root,
+				children
+			})
+		})
+	});
+};
 //#endregion
 export { ShadowRoot };

package/dist/shadowroot/index.d.ts

@@ -0,0 +1 @@
+export { ShadowRoot } from './ShadowRoot';

package/dist/shadowroot/styles.d.ts

@@ -0,0 +1,13 @@
+export declare function scopeStylesToShadowRoot(styles: string): string;
+export declare function appendFontToDocument(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): void;
+/**
+ * Creates a CSS string with styles scoped to the shadow root
+ * @returns CSS string for the shadow root
+ */
+export declare const shadowRootCSS: () => string;
+/**
+ * Creates a CSSStyleSheet with styles scoped to the shadow root
+ */
+export declare function createShadowRootStylesheets(csstext: string): [CSSStyleSheet];
+export type ColorScheme = 'light' | 'dark';
+export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;