@likec4/diagram 1.42.0 → 1.43.0

package/dist/shadowroot/ShadowRoot.js

@@ -1,13 +1,54 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { MantineProvider } from '@mantine/core';
+import { useCallbackRef } from '@mantine/hooks';
 import { useRef, useCallback } from 'react';
 import root from 'react-shadow';
 import { isDefined } from 'remeda';
 import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
 import { useId } from '../hooks/useId.js';
-import { useColorScheme, useShadowRootStyle, useBundledStyleSheet, DefaultTheme } from './styles.css.js';
+import { useColorScheme, useBundledStyleSheet, DefaultTheme } from './styles.css.js';
 
 const Root = root["div"];
+function useShadowRootStyle(instanceId, keepAspectRatio = false) {
+  if (keepAspectRatio === false) {
+    return `
+:where([data-likec4-instance="${instanceId}"]) {
+  display: block;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  min-width: 80px;
+  min-height: 80px;
+}
+  `.trim();
+  }
+  const { width, height } = keepAspectRatio;
+  const isLandscape = width > height;
+  return `
+:where([data-likec4-instance="${instanceId}"]) {
+  display: block;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  overflow: hidden;
+  aspect-ratio: ${Math.ceil(width)} / ${Math.ceil(height)};
+  ${isLandscape ? "" : `
+  max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(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, ${Math.ceil(height)}px));
+}
+`.trim();
+}
 function ShadowRoot({
   children,
   theme = DefaultTheme,
@@ -23,17 +64,17 @@ function ShadowRoot({
   const rootRef = useRef(null);
   const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
   const getRootElement = useCallback(() => rootRef.current ?? void 0, [rootRef]);
-  let getStyleNonce;
-  let nonce;
-  if (isDefined(styleNonce)) {
-    if (typeof styleNonce === "string") {
-      nonce = styleNonce;
-      getStyleNonce = () => styleNonce;
-    } else if (typeof styleNonce === "function") {
-      nonce = styleNonce();
-      getStyleNonce = styleNonce;
+  const getStyleNonce = useCallbackRef(() => {
+    if (isDefined(styleNonce)) {
+      if (typeof styleNonce === "string") {
+        return styleNonce;
+      } else if (typeof styleNonce === "function") {
+        return styleNonce();
+      }
     }
-  }
+    return "";
+  });
+  let nonce = isDefined(styleNonce) ? getStyleNonce() : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "style",
@@ -55,7 +96,7 @@ function ShadowRoot({
             ...explicitColorScheme && { forceColorScheme: explicitColorScheme },
             defaultColorScheme: colorScheme,
             getRootElement,
-            ...getStyleNonce && { getStyleNonce },
+            ...!!nonce && { getStyleNonce },
             cssVariablesSelector: ".likec4-shadow-root",
             theme,
             children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })

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

@@ -4,7 +4,3 @@ export declare const cssInteractive: string;
 export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
 export type ColorScheme = 'light' | 'dark';
 export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
-export declare function useShadowRootStyle(instanceId: string, keepAspectRatio?: false | {
-    width: number;
-    height: number;
-}): string;

package/dist/shadowroot/styles.css.js

@@ -95,45 +95,5 @@ function useColorScheme(explicit) {
   );
   return explicit ?? computed ?? preferred;
 }
-function useShadowRootStyle(instanceId, keepAspectRatio = false) {
-  if (keepAspectRatio === false) {
-    return `
-:where([data-likec4-instance="${instanceId}"]) {
-  display: block;
-  box-sizing: border-box;
-  border: 0 solid transparent;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  min-width: 80px;
-  min-height: 80px;
-}
-  `.trim();
-  }
-  const { width, height } = keepAspectRatio;
-  const isLandscape = width > height;
-  return `
-:where([data-likec4-instance="${instanceId}"]) {
-  display: block;
-  box-sizing: border-box;
-  border: 0 solid transparent;
-  background: transparent;
-  padding: 0;
-  overflow: hidden;
-  aspect-ratio: ${Math.ceil(width)} / ${Math.ceil(height)};
-  ${isLandscape ? "" : `
-  max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(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, ${Math.ceil(height)}px));
-}
-`.trim();
-}
 
-export { DefaultTheme, useBundledStyleSheet, useColorScheme, useShadowRootStyle };
+export { DefaultTheme, useBundledStyleSheet, useColorScheme };