@likec4/diagram 1.56.0 → 1.57.0

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/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/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,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 {};

package/dist/shadowroot/ShadowRoot.js

@@ -1,16 +1,15 @@
 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 { appendFontToDocument, createShadowRootStyles, createShadowRootStylesheets, useColorScheme } from "./styles.css.js";
+import { createContext, memo, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect } from "@react-hookz/web";
 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,14 +49,15 @@ 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();
+var ShadowRootContext = createContext(null);
+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);
+	useIsomorphicLayoutEffect(() => 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();
@@ -68,13 +68,11 @@ var ShadowRoot = forwardRef(({ children, theme, injectFontCss = true, styleNonce
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MemoizedStyle, {
 		nonce,
 		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 +87,56 @@ 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 }
 }));
 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);
+	useLayoutEffect(() => {
+		const host = hostRef.current;
+		if (!host) {
+			setRoot(null);
+			return;
+		}
+		setRoot((current) => {
+			try {
+				if (host.shadowRoot) {
+					host.shadowRoot.adoptedStyleSheets[0].replaceSync(createShadowRootStyles());
+					return host.shadowRoot;
+				}
+				const shadowRoot = host.attachShadow({
+					mode: "open",
+					delegatesFocus: false
+				});
+				shadowRoot.adoptedStyleSheets = createShadowRootStylesheets();
+				return shadowRoot;
+			} catch (error) {
+				return current;
+			}
+		});
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: hostRef,
+		children: root && /* @__PURE__ */ jsx(ShadowRootHostPortal, {
+			root,
+			children: /* @__PURE__ */ jsx(ShadowRootContext.Provider, {
+				value: root,
+				children
+			})
+		})
+	});
+};
 //#endregion
 export { ShadowRoot };

package/dist/shadowroot/styles.css.d.ts

@@ -1,4 +1,12 @@
-export declare const cssInteractive: string;
-export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
+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
+ */
+export declare function createShadowRootStyles(): string;
+/**
+ * Creates a CSSStyleSheet with styles scoped to the shadow root
+ */
+export declare function createShadowRootStylesheets(): [CSSStyleSheet];
 export type ColorScheme = 'light' | 'dark';
 export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;

package/dist/shadowroot/styles.css.js

@@ -2,43 +2,39 @@ import { __name } from "../_virtual/_rolldown/runtime.js";
 import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
 import styles_font_default from "../styles-font2.js";
 import styles_default from "../styles2.js";
-import { css } from "@likec4/styles/css";
 import { useState } from "react";
-import { useIsomorphicLayoutEffect } from "@react-hookz/web";
 import { first, isFunction, isString } from "remeda";
 import { useColorScheme, useMutationObserverTarget } from "@mantine/hooks";
-css({
-	cursor: "pointer",
-	["--mantine-cursor-pointer"]: "pointer",
-	"& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)": { cursor: "pointer" }
-});
-function useBundledStyleSheet(injectFontCss, styleNonce) {
-	const [styleSheets] = useState(() => {
-		const css = new CSSStyleSheet();
-		css.replaceSync(
-			styles_default
-			/**
-			* replace only top-level body selectors, for example
-			* `body { }` should be replaced with `.likec4-shadow-root { }`
-			* but `.likec4-overlay-body { }` - not
-			*/
-		);
-		return [css];
-	});
-	useIsomorphicLayoutEffect(() => {
-		if (injectFontCss && !document.querySelector(`style[data-likec4-font]`)) {
-			const style = document.createElement("style");
-			style.setAttribute("type", "text/css");
-			style.setAttribute("data-likec4-font", "");
-			let nonce;
-			if (isString(styleNonce)) nonce = styleNonce;
-			if (isFunction(styleNonce)) nonce = styleNonce();
-			if (nonce) style.setAttribute("nonce", nonce);
-			style.appendChild(document.createTextNode(styles_font_default));
-			document.head.appendChild(style);
-		}
-	}, [injectFontCss]);
-	return styleSheets;
+//#region src/shadowroot/styles.css.ts
+function scopeStylesToShadowRoot(styles) {
+	return styles.replaceAll(/:where\(\s*:root\s*,\s*:host\s*\)/g, `:where(.likec4-shadow-root)`).replaceAll(":root", `.likec4-shadow-root`).replaceAll(/(^|[{},;]|\*\/)(\s*)body(?=\s*[{,])/g, "$1$2.likec4-shadow-root");
+}
+function appendFontToDocument(injectFontCss, styleNonce) {
+	if (injectFontCss && !document.querySelector(`style[data-likec4-font]`)) {
+		const style = document.createElement("style");
+		style.setAttribute("type", "text/css");
+		style.setAttribute("data-likec4-font", "");
+		let nonce;
+		if (isString(styleNonce)) nonce = styleNonce;
+		if (isFunction(styleNonce)) nonce = styleNonce();
+		if (nonce) style.setAttribute("nonce", nonce);
+		style.appendChild(document.createTextNode(scopeStylesToShadowRoot(styles_font_default)));
+		document.head.appendChild(style);
+	}
+}
+/**
+* Creates a CSS string with styles scoped to the shadow root
+*/
+function createShadowRootStyles() {
+	return scopeStylesToShadowRoot(styles_default);
+}
+/**
+* Creates a CSSStyleSheet with styles scoped to the shadow root
+*/
+function createShadowRootStylesheets() {
+	const css = new CSSStyleSheet();
+	css.replaceSync(createShadowRootStyles());
+	return [css];
 }
 var getComputedColorScheme = () => {
 	try {
@@ -47,6 +43,7 @@ var getComputedColorScheme = () => {
 	} catch {}
 	return null;
 };
+var getDocumentElement = () => document.documentElement;
 function useColorScheme$1(explicit) {
 	const preferred = useColorScheme();
 	const [computed, setComputed] = useState(getComputedColorScheme);
@@ -54,9 +51,9 @@ function useColorScheme$1(explicit) {
 		attributes: true,
 		childList: false,
 		subtree: false
-	}, () => document.documentElement);
+	}, getDocumentElement);
 	return explicit ?? computed ?? preferred;
 }
 __name(useColorScheme$1, "useColorScheme");
 //#endregion
-export { useBundledStyleSheet, useColorScheme$1 as useColorScheme };
+export { appendFontToDocument, createShadowRootStyles, createShadowRootStylesheets, useColorScheme$1 as useColorScheme };