@likec4/diagram 1.57.0 → 1.58.0

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/shadowroot/ShadowRoot.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from 'react';
-export declare function useShadowRoot(): ShadowRoot;
 type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
     injectFontCss?: boolean | undefined;
     styleNonce?: string | (() => string) | undefined;
@@ -14,5 +13,5 @@ type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
      */
     theme?: any;
 };
-export declare function ShadowRoot({ children, theme, injectFontCss, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio, ...props }: ShadowRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShadowRoot({ children, theme, injectFontCss, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio, ...props }: ShadowRootProps): import("react").JSX.Element;
 export {};

package/dist/shadowroot/ShadowRoot.js

@@ -3,10 +3,11 @@ import { useCallbackRef } 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 { 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 { useIsomorphicLayoutEffect } from "@react-hookz/web";
+import { shallowEqual } from "fast-equals";
 import { isDefined } from "remeda";
 import { createPortal } from "react-dom";
 //#region src/shadowroot/ShadowRoot.tsx
@@ -49,13 +50,12 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
 }
 `.trim();
 }
-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 mantineRootRef = useRef(null);
-	useIsomorphicLayoutEffect(() => appendFontToDocument(injectFontCss, styleNonce), []);
+	useLayoutEffect(() => appendFontToDocument(injectFontCss, styleNonce), []);
 	const getRootElement = useCallbackRef(() => mantineRootRef.current ?? void 0);
 	const getStyleNonce = useCallbackRef(() => {
 		if (isDefined(styleNonce)) {
@@ -64,9 +64,8 @@ function ShadowRoot({ children, theme, injectFontCss = true, styleNonce, colorSc
 		}
 		return "";
 	});
-	const [nonce] = useState(getStyleNonce);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MemoizedStyle, {
-		nonce,
+		nonce: getStyleNonce(),
 		cssstyle
 	}), /* @__PURE__ */ jsx(ShadowRootHost, {
 		...props,
@@ -95,7 +94,7 @@ var MemoizedStyle = memo(({ nonce, cssstyle }) => /* @__PURE__ */ jsx("style", {
 	type: "text/css",
 	nonce,
 	dangerouslySetInnerHTML: { __html: cssstyle }
-}));
+}), shallowEqual);
 MemoizedStyle.displayName = "MemoizedStyle";
 var ShadowRootHostPortal = ({ children, root }) => {
 	return createPortal(children, root, "likec4-shadow-root");
@@ -103,35 +102,42 @@ 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 = 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 {
-				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, {
+			children: /* @__PURE__ */ jsx(ShadowRootContext, {
 				value: root,
 				children
 			})

package/dist/shadowroot/index.d.ts

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

package/dist/shadowroot/{styles.css.d.ts → styles.d.ts}

@@ -2,11 +2,12 @@ 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 function createShadowRootStyles(): string;
+export declare const shadowRootCSS: () => string;
 /**
  * Creates a CSSStyleSheet with styles scoped to the shadow root
  */
-export declare function createShadowRootStylesheets(): [CSSStyleSheet];
+export declare function createShadowRootStylesheets(csstext: string): [CSSStyleSheet];
 export type ColorScheme = 'light' | 'dark';
 export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;

package/dist/shadowroot/{styles.css.js → styles.js}

@@ -3,9 +3,9 @@ import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
 import styles_font_default from "../styles-font2.js";
 import styles_default from "../styles2.js";
 import { useState } from "react";
-import { first, isFunction, isString } from "remeda";
+import { first, isFunction, isString, once } from "remeda";
 import { useColorScheme, useMutationObserverTarget } from "@mantine/hooks";
-//#region src/shadowroot/styles.css.ts
+//#region src/shadowroot/styles.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");
 }
@@ -18,22 +18,23 @@ function appendFontToDocument(injectFontCss, styleNonce) {
 		if (isString(styleNonce)) nonce = styleNonce;
 		if (isFunction(styleNonce)) nonce = styleNonce();
 		if (nonce) style.setAttribute("nonce", nonce);
-		style.appendChild(document.createTextNode(scopeStylesToShadowRoot(styles_font_default)));
+		style.appendChild(document.createTextNode(styles_font_default));
 		document.head.appendChild(style);
 	}
 }
 /**
 * Creates a CSS string with styles scoped to the shadow root
+* @returns CSS string for the shadow root
 */
-function createShadowRootStyles() {
+var shadowRootCSS = once(() => {
 	return scopeStylesToShadowRoot(styles_default);
-}
+});
 /**
 * Creates a CSSStyleSheet with styles scoped to the shadow root
 */
-function createShadowRootStylesheets() {
+function createShadowRootStylesheets(csstext) {
 	const css = new CSSStyleSheet();
-	css.replaceSync(createShadowRootStyles());
+	css.replaceSync(csstext);
 	return [css];
 }
 var getComputedColorScheme = () => {
@@ -56,4 +57,4 @@ function useColorScheme$1(explicit) {
 }
 __name(useColorScheme$1, "useColorScheme");
 //#endregion
-export { appendFontToDocument, createShadowRootStyles, createShadowRootStylesheets, useColorScheme$1 as useColorScheme };
+export { appendFontToDocument, createShadowRootStylesheets, shadowRootCSS, useColorScheme$1 as useColorScheme };