@likec4/diagram 1.57.0 → 1.59.0

package/dist/shadowroot/ShadowRoot.js

@@ -1,13 +1,15 @@
-import "../_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "../hooks/useCallbackRef.js";
+import { __name } from "../_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 } from "../hooks/useId.js";
-import { appendFontToDocument, createShadowRootStyles, createShadowRootStylesheets, useColorScheme } from "./styles.css.js";
-import { createContext, memo, useLayoutEffect, useRef, useState } from "react";
+import { useId as useId$1 } from "../hooks/useId.js";
+import styles_font_default from "../styles-font2.js";
+import styles_default from "../styles2.js";
+import { memo, useEffectEvent, useInsertionEffect, 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 "fast-equals";
+import { first, isDefined, isFunction, isString, once } from "remeda";
+import { useColorScheme, useMutationObserverTarget } from "@mantine/hooks";
 import { createPortal } from "react-dom";
 //#region src/shadowroot/ShadowRoot.tsx
 function useShadowRootStyle(instanceId, keepAspectRatio = false) {
@@ -24,8 +26,7 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
   height: 100%;
   min-width: 80px;
   min-height: 80px;
-}
-  `.trim();
+}`;
 	const width = Math.ceil(keepAspectRatio.width);
 	const height = Math.ceil(keepAspectRatio.height);
 	const isLandscape = width > height;
@@ -39,34 +40,46 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
   overflow: hidden;
   aspect-ratio: ${width} / ${height};
   ${isLandscape ? "" : `
-  max-width: min(100%, var(--likec4-view-max-width, ${width}px));
-  margin-left: auto;
-  margin-right: auto;`}
+max-width: min(100%, var(--likec4-view-max-width, ${width}px));
+margin-left: auto;
+margin-right: auto;`}
   width: ${isLandscape ? "100%" : "auto"};
   height: ${isLandscape ? "auto" : "100%"};
   ${isLandscape ? `min-width: 80px;` : `min-height: 80px;`}
   max-height: min(100%, var(--likec4-view-max-height, ${height}px));
+}`;
 }
-`.trim();
+function useInjectLikeC4Font(injectFontCss, styleNonce) {
+	useInsertionEffect(() => {
+		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);
+		}
+	}, []);
 }
-var ShadowRootContext = createContext(null);
 function ShadowRoot({ children, theme, injectFontCss = true, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio = false, ...props }) {
-	const colorScheme = useColorScheme(explicitColorScheme);
-	const id = useId();
+	const colorScheme = useColorScheme$1(explicitColorScheme);
+	const id = useId$1();
 	const cssstyle = useShadowRootStyle(id, keepAspectRatio);
 	const mantineRootRef = useRef(null);
-	useIsomorphicLayoutEffect(() => appendFontToDocument(injectFontCss, styleNonce), []);
-	const getRootElement = useCallbackRef(() => mantineRootRef.current ?? void 0);
-	const getStyleNonce = useCallbackRef(() => {
+	useInjectLikeC4Font(injectFontCss, styleNonce);
+	const getRootElement = useCallbackRef$1(() => mantineRootRef.current ?? void 0);
+	const getStyleNonce = useCallbackRef$1(() => {
 		if (isDefined(styleNonce)) {
-			if (typeof styleNonce === "string") return styleNonce;
-			else if (typeof styleNonce === "function") return 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(ShadowRootHost, {
 		...props,
@@ -93,9 +106,9 @@ function ShadowRoot({ children, theme, injectFontCss = true, styleNonce, colorSc
 */
 var MemoizedStyle = memo(({ nonce, cssstyle }) => /* @__PURE__ */ jsx("style", {
 	type: "text/css",
-	nonce,
+	...nonce && { nonce },
 	dangerouslySetInnerHTML: { __html: cssstyle }
-}));
+}), (a, b) => a.cssstyle === b.cssstyle);
 MemoizedStyle.displayName = "MemoizedStyle";
 var ShadowRootHostPortal = ({ children, root }) => {
 	return createPortal(children, root, "likec4-shadow-root");
@@ -103,40 +116,81 @@ var ShadowRootHostPortal = ({ children, root }) => {
 var ShadowRootHost = ({ children, ...props }) => {
 	const hostRef = useRef(null);
 	const [root, setRoot] = useState(null);
-	useLayoutEffect(() => {
-		const host = hostRef.current;
-		if (!host) {
-			setRoot(null);
-			return;
-		}
+	const styles = shadowScopedCSS();
+	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 {
-				if (host.shadowRoot) {
-					host.shadowRoot.adoptedStyleSheets[0].replaceSync(createShadowRootStyles());
-					return host.shadowRoot;
-				}
 				const shadowRoot = host.attachShadow({
 					mode: "open",
 					delegatesFocus: false
 				});
-				shadowRoot.adoptedStyleSheets = createShadowRootStylesheets();
+				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.Provider, {
-				value: root,
-				children
-			})
+			children
 		})
 	});
 };
+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");
+}
+/**
+* Creates a CSS string with styles scoped to the shadow root
+* @returns CSS string for the shadow root
+*/
+var shadowScopedCSS = once(() => {
+	return scopeStylesToShadowRoot(styles_default);
+});
+/**
+* Creates a CSSStyleSheet with styles scoped to the shadow root
+*/
+function createShadowRootStylesheets(csstext) {
+	const css = new CSSStyleSheet();
+	css.replaceSync(csstext);
+	return [css];
+}
+var getComputedColorScheme = () => {
+	try {
+		const colorScheme = first((window.getComputedStyle(document.documentElement).colorScheme ?? "").split(" "));
+		if (colorScheme === "light" || colorScheme === "dark") return colorScheme;
+	} catch {}
+	return null;
+};
+var getDocumentElement = () => document.documentElement;
+function useColorScheme$1(explicit) {
+	const preferred = useColorScheme();
+	const [computed, setComputed] = useState(getComputedColorScheme);
+	useMutationObserverTarget(useCallbackRef$1(() => setComputed(getComputedColorScheme)), {
+		attributes: true,
+		childList: false,
+		subtree: false
+	}, getDocumentElement);
+	return explicit ?? computed ?? preferred;
+}
+__name(useColorScheme$1, "useColorScheme");
 //#endregion
 export { ShadowRoot };

package/dist/shadowroot/index.d.ts

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