@likec4/diagram 1.58.0 → 1.59.0

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

@@ -2,14 +2,14 @@ import { css, sva } from "@likec4/styles/css";
 //#region src/search/components/_shared.css.ts
 var buttonFocused = css.raw({
 	outline: "none",
-	background: "mantine.colors.primary[8]",
-	borderColor: "mantine.colors.primary[9]"
+	background: "mantine.primary[8]",
+	borderColor: "mantine.primary[9]"
 });
 var _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
 var button = css.raw({
 	display: "flex",
 	width: "100%",
-	background: "body",
+	background: "surface.default",
 	rounded: "sm",
 	padding: `[12px 8px 12px 14px]`,
 	minHeight: "60px",
@@ -18,20 +18,20 @@ var button = css.raw({
 	borderColor: "default.border",
 	_hover: {
 		...buttonFocused,
-		borderColor: "mantine.colors.primary[9]",
-		background: `mantine.colors.primary[8]/60`
+		borderColor: "mantine.primary[9]",
+		background: `mantine.primary[8]/60`
 	},
 	_focus: buttonFocused,
 	[_treenodefocus]: buttonFocused,
 	_dark: {
 		borderColor: "transparent",
-		background: `mantine.colors.dark[6]/80`
+		background: `mantine.dark[6]/80`
 	},
 	_light: {
-		background: `mantine.colors.white/80`,
+		background: `mantine.white/80`,
 		_hover: {
-			borderColor: "mantine.colors.primary[6]",
-			backgroundColor: "mantine.colors.primary[5]"
+			borderColor: "mantine.primary[6]",
+			backgroundColor: "mantine.primary[5]"
 		}
 	}
 });
@@ -40,11 +40,11 @@ var iconSize = { ref: "var(--likec4-icon-size, 24px)" };
 var icon = css.raw({
 	color: {
 		base: "text.dimmed",
-		_light: "mantine.colors.gray[5]",
-		_groupHover: "mantine.colors.primary[0]",
-		_groupFocus: "mantine.colors.primary[0]"
+		_light: "mantine.gray[5]",
+		_groupHover: "mantine.primary[0]",
+		_groupFocus: "mantine.primary[0]"
 	},
-	[_treenodefocus]: { color: "mantine.colors.primary[0]" },
+	[_treenodefocus]: { color: "mantine.primary[0]" },
 	flex: `0 0 ${iconSize.ref}`,
 	height: iconSize.ref,
 	width: iconSize.ref,
@@ -60,7 +60,7 @@ var icon = css.raw({
 		pointerEvents: "none"
 	},
 	[`& img`]: { objectFit: "contain" },
-	"&.likec4-shape-icon svg": { strokeWidth: 1.5 }
+	"&.likec4-shape-icon svg": { strokeWidth: "[1.5]" }
 });
 var title = css.raw({
 	fontSize: "16px",
@@ -68,19 +68,19 @@ var title = css.raw({
 	lineHeight: "1.1",
 	[`:where([data-disabled]) &`]: { opacity: .4 },
 	color: {
-		base: "mantine.colors.dark[1]",
-		_light: "mantine.colors.gray[7]",
+		base: "mantine.dark[1]",
+		_light: "mantine.gray[7]",
 		_groupHover: {
-			base: "mantine.colors.primary[1]",
+			base: "mantine.primary[1]",
 			_light: "white"
 		},
 		_groupFocus: {
-			base: "mantine.colors.primary[1]",
+			base: "mantine.primary[1]",
 			_light: "white"
 		}
 	},
 	[_treenodefocus]: { color: {
-		base: "mantine.colors.primary[1]",
+		base: "mantine.primary[1]",
 		_light: "white"
 	} }
 });
@@ -88,12 +88,12 @@ var descriptionColor = css.raw({
 	color: {
 		base: "text.dimmed",
 		_groupHover: {
-			base: "mantine.colors.primary[1]",
-			_light: "mantine.colors.primary[0]"
+			base: "mantine.primary[1]",
+			_light: "mantine.primary[0]"
 		},
-		_groupFocus: "mantine.colors.primary[0]"
+		_groupFocus: "mantine.primary[0]"
 	},
-	[_treenodefocus]: { color: "mantine.colors.primary[0]" }
+	[_treenodefocus]: { color: "mantine.primary[0]" }
 });
 var description = css.raw(descriptionColor, {
 	marginTop: "1",

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

@@ -6,12 +6,12 @@ var input = css({
 	background: {
 		base: "transparent",
 		_focusWithin: {
-			base: `mantine.colors.gray[4]/55 !important`,
-			_dark: `mantine.colors.dark[5]/55 !important`
+			base: `mantine.gray[4]/55 !important`,
+			_dark: `mantine.dark[5]/55 !important`
 		},
 		_groupHover: {
-			base: "mantine.colors.gray[3]/35",
-			_dark: "mantine.colors.dark[5]/35"
+			base: "mantine.gray[3]/35",
+			_dark: "mantine.dark[5]/35"
 		}
 	}
 });

package/dist/shadowroot/ShadowRoot.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
     injectFontCss?: boolean | undefined;
-    styleNonce?: string | (() => string) | undefined;
+    styleNonce?: string | (() => string | undefined) | undefined;
     colorScheme?: 'light' | 'dark' | undefined;
     keepAspectRatio?: false | undefined | {
         width: number;

package/dist/shadowroot/ShadowRoot.js

@@ -1,14 +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 { ShadowRootContext } from "../context/ShadowRootContext.js";
-import { appendFontToDocument, createShadowRootStylesheets, shadowRootCSS, useColorScheme } from "./styles.js";
-import { memo, useEffectEvent, 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 { shallowEqual } from "fast-equals";
-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) {
@@ -25,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;
@@ -40,27 +40,41 @@ 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);
+		}
+	}, []);
 }
 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);
-	useLayoutEffect(() => 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 "";
 	});
@@ -92,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 }
-}), shallowEqual);
+}), (a, b) => a.cssstyle === b.cssstyle);
 MemoizedStyle.displayName = "MemoizedStyle";
 var ShadowRootHostPortal = ({ children, root }) => {
 	return createPortal(children, root, "likec4-shadow-root");
@@ -102,7 +116,7 @@ var ShadowRootHostPortal = ({ children, root }) => {
 var ShadowRootHost = ({ children, ...props }) => {
 	const hostRef = useRef(null);
 	const [root, setRoot] = useState(null);
-	const styles = shadowRootCSS();
+	const styles = shadowScopedCSS();
 	const updateShadowRoot = useEffectEvent((styles) => {
 		setRoot((current) => {
 			const host = hostRef.current;
@@ -137,12 +151,46 @@ var ShadowRootHost = ({ children, ...props }) => {
 		ref: hostRef,
 		children: root && /* @__PURE__ */ jsx(ShadowRootHostPortal, {
 			root,
-			children: /* @__PURE__ */ jsx(ShadowRootContext, {
-				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 };