@likec4/diagram 1.41.0 → 1.42.1

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

@@ -3,8 +3,7 @@ import { createTheme, Portal } from '@mantine/core';
 import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback } from '@mantine/hooks';
 import { useIsomorphicLayoutEffect } from '@react-hookz/web';
 import { useState } from 'react';
-import { first, isString, isFunction } from 'remeda';
-import { useId } from '../hooks/useId.js';
+import { isString, isFunction, first } from 'remeda';
 import fontsCss from '../styles-font.css2.js';
 import inlinedStyles from '../styles.css2.js';
 
@@ -35,7 +34,7 @@ const DefaultTheme = createTheme({
     })
   }
 });
-const cssInteractive = css({
+css({
   cursor: "pointer",
   ["--mantine-cursor-pointer"]: "pointer",
   "& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)": {
@@ -62,7 +61,7 @@ function useBundledStyleSheet(injectFontCss, styleNonce) {
   useIsomorphicLayoutEffect(() => {
     const css2 = new CSSStyleSheet();
     css2.replaceSync(
-      inlinedStyles.replaceAll(":where(:root,:host)", `.likec4-shadow-root`).replaceAll(":root", `.likec4-shadow-root`).replaceAll("body {", `.likec4-shadow-root{`).replaceAll("body{", `.likec4-shadow-root{`)
+      inlinedStyles.replaceAll(":where(:root,:host)", `.likec4-shadow-root`).replaceAll(":root", `.likec4-shadow-root`).replaceAll(/(?<![-_])\bbody\s*\{/g, `.likec4-shadow-root{`)
     );
     setStyleSheets([css2]);
     return () => {
@@ -78,7 +77,7 @@ const getComputedColorScheme = () => {
     if (colorScheme === "light" || colorScheme === "dark") {
       return colorScheme;
     }
-  } catch (_e) {
+  } catch {
   }
   return null;
 };
@@ -96,13 +95,10 @@ function useColorScheme(explicit) {
   );
   return explicit ?? computed ?? preferred;
 }
-function useShadowRootStyle(keepAspectRatio, view) {
-  const id = useId();
+function useShadowRootStyle(instanceId, keepAspectRatio = false) {
   if (keepAspectRatio === false) {
-    return [
-      { "data-likec4-instance": id },
-      `
-:where([data-likec4-instance="${id}"]) {
+    return `
+:where([data-likec4-instance="${instanceId}"]) {
   display: block;
   box-sizing: border-box;
   border: 0 solid transparent;
@@ -115,32 +111,29 @@ function useShadowRootStyle(keepAspectRatio, view) {
   min-width: 80px;
   min-height: 80px;
 }
-  `.trim()
-    ];
+  `.trim();
   }
-  const isLandscape = view.bounds.width > view.bounds.height;
-  return [
-    { "data-likec4-instance": id },
-    `
-:where([data-likec4-instance="${id}"]) {
+  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(view.bounds.width)} / ${Math.ceil(view.bounds.height)};
+  aspect-ratio: ${Math.ceil(width)} / ${Math.ceil(height)};
   ${isLandscape ? "" : `
-  max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(view.bounds.width)}px));
+  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(view.bounds.height)}px));
+  max-height: min(100%, var(--likec4-view-max-height, ${Math.ceil(height)}px));
 }
-`.trim()
-  ];
+`.trim();
 }
 
-export { DefaultTheme, cssInteractive, useBundledStyleSheet, useColorScheme, useShadowRootStyle };
+export { DefaultTheme, useBundledStyleSheet, useColorScheme, useShadowRootStyle };