@likec4/diagram 1.55.1 → 1.57.0

package/dist/shadowroot/ShadowRoot.js

@@ -1,18 +1,17 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useMergedRef } from '@mantine/hooks';
-import { forwardRef, useRef, useState, memo } from 'react';
-import root from 'react-shadow';
-import { isDefined } from 'remeda';
-import { DefaultMantineProvider } from '../context/DefaultMantineProvider.js';
-import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
-import { useCallbackRef } from '../hooks/useCallbackRef.js';
-import { useId } from '../hooks/useId.js';
-import { useColorScheme, useBundledStyleSheet } from './styles.css.js';
-
-const Root = root["div"];
+import "../_virtual/_rolldown/runtime.js";
+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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect } from "@react-hookz/web";
+import { isDefined } from "remeda";
+import { createPortal } from "react-dom";
+//#region src/shadowroot/ShadowRoot.tsx
 function useShadowRootStyle(instanceId, keepAspectRatio = false) {
-  if (keepAspectRatio === false) {
-    return `
+	if (keepAspectRatio === false) return `
 :where([data-likec4-instance="${instanceId}"]) {
   display: block;
   box-sizing: border-box;
@@ -27,11 +26,10 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
   min-height: 80px;
 }
   `.trim();
-  }
-  const width = Math.ceil(keepAspectRatio.width);
-  const height = Math.ceil(keepAspectRatio.height);
-  const isLandscape = width > height;
-  return `
+	const width = Math.ceil(keepAspectRatio.width);
+	const height = Math.ceil(keepAspectRatio.height);
+	const isLandscape = width > height;
+	return `
 :where([data-likec4-instance="${instanceId}"]) {
   display: block;
   box-sizing: border-box;
@@ -51,65 +49,94 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
 }
 `.trim();
 }
-const ShadowRoot = forwardRef(({
-  children,
-  theme,
-  injectFontCss = true,
-  styleNonce,
-  colorScheme: explicitColorScheme,
-  keepAspectRatio = false,
-  ...props
-}, ref) => {
-  const colorScheme = useColorScheme(explicitColorScheme);
-  const id = useId();
-  const cssstyle = useShadowRootStyle(id, keepAspectRatio);
-  const rootRef = useRef(null);
-  const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
-  const getRootElement = useCallbackRef(() => rootRef.current ?? void 0);
-  const getStyleNonce = useCallbackRef(() => {
-    if (isDefined(styleNonce)) {
-      if (typeof styleNonce === "string") {
-        return styleNonce;
-      } else if (typeof styleNonce === "function") {
-        return styleNonce();
-      }
-    }
-    return "";
-  });
-  const [nonce] = useState(getStyleNonce);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(MemoizedStyle, { nonce, cssstyle }),
-    /* @__PURE__ */ jsx(Root, { ssr: false, ...props, styleSheets, "data-likec4-instance": id, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: useMergedRef(rootRef, ref),
-        "data-mantine-color-scheme": colorScheme,
-        className: "likec4-shadow-root",
-        children: /* @__PURE__ */ jsx(
-          DefaultMantineProvider,
-          {
-            defaultColorScheme: colorScheme,
-            getRootElement,
-            cssVariablesSelector: ".likec4-shadow-root",
-            withCssVariables: true,
-            getStyleNonce,
-            theme,
-            ...explicitColorScheme && { forceColorScheme: explicitColorScheme },
-            children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })
-          }
-        )
-      }
-    ) })
-  ] });
-});
-const MemoizedStyle = memo(({ nonce, cssstyle }) => /* @__PURE__ */ jsx(
-  "style",
-  {
-    type: "text/css",
-    nonce,
-    dangerouslySetInnerHTML: { __html: cssstyle }
-  }
-));
+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), []);
+	const getRootElement = useCallbackRef(() => mantineRootRef.current ?? void 0);
+	const getStyleNonce = useCallbackRef(() => {
+		if (isDefined(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,
+		cssstyle
+	}), /* @__PURE__ */ jsx(ShadowRootHost, {
+		...props,
+		"data-likec4-instance": id,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: mantineRootRef,
+			"data-mantine-color-scheme": colorScheme,
+			className: "likec4-shadow-root",
+			children: /* @__PURE__ */ jsx(DefaultMantineProvider, {
+				defaultColorScheme: colorScheme,
+				getRootElement,
+				cssVariablesSelector: ".likec4-shadow-root",
+				withCssVariables: true,
+				getStyleNonce,
+				theme,
+				...explicitColorScheme && { forceColorScheme: explicitColorScheme },
+				children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })
+			})
+		})
+	})] });
+}
+/**
+* @internal Memoized styles gives a performance boost during development
+*/
+var MemoizedStyle = memo(({ nonce, cssstyle }) => /* @__PURE__ */ jsx("style", {
+	type: "text/css",
+	nonce,
+	dangerouslySetInnerHTML: { __html: cssstyle }
+}));
 MemoizedStyle.displayName = "MemoizedStyle";
-
+var ShadowRootHostPortal = ({ children, root }) => {
+	return createPortal(children, root, "likec4-shadow-root");
+};
+var ShadowRootHost = ({ children, ...props }) => {
+	const hostRef = useRef(null);
+	const [root, setRoot] = useState(null);
+	useLayoutEffect(() => {
+		const host = hostRef.current;
+		if (!host) {
+			setRoot(null);
+			return;
+		}
+		setRoot((current) => {
+			try {
+				if (host.shadowRoot) {
+					host.shadowRoot.adoptedStyleSheets[0].replaceSync(createShadowRootStyles());
+					return host.shadowRoot;
+				}
+				const shadowRoot = host.attachShadow({
+					mode: "open",
+					delegatesFocus: false
+				});
+				shadowRoot.adoptedStyleSheets = createShadowRootStylesheets();
+				return shadowRoot;
+			} catch (error) {
+				return current;
+			}
+		});
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: hostRef,
+		children: root && /* @__PURE__ */ jsx(ShadowRootHostPortal, {
+			root,
+			children: /* @__PURE__ */ jsx(ShadowRootContext.Provider, {
+				value: root,
+				children
+			})
+		})
+	});
+};
+//#endregion
 export { ShadowRoot };

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

@@ -1,4 +1,12 @@
-export declare const cssInteractive: string;
-export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
+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
+ */
+export declare function createShadowRootStyles(): string;
+/**
+ * Creates a CSSStyleSheet with styles scoped to the shadow root
+ */
+export declare function createShadowRootStylesheets(): [CSSStyleSheet];
 export type ColorScheme = 'light' | 'dark';
 export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;

package/dist/shadowroot/styles.css.js

@@ -1,72 +1,59 @@
-import { css } from '@likec4/styles/css';
-import { useColorScheme as useColorScheme$1, useMutationObserver } from '@mantine/hooks';
-import { useIsomorphicLayoutEffect } from '@react-hookz/web';
-import { useState } from 'react';
-import { isString, isFunction, first } from 'remeda';
-import fontsCss from '../styles-font.css2.js';
-import inlinedStyles from '../styles.css2.js';
-import { useCallbackRef } from '../hooks/useCallbackRef.js';
-
-css({
-  cursor: "pointer",
-  ["--mantine-cursor-pointer"]: "pointer",
-  "& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)": {
-    cursor: "pointer"
-  }
-});
-function useBundledStyleSheet(injectFontCss, styleNonce) {
-  const [styleSheets, setStyleSheets] = useState([]);
-  useIsomorphicLayoutEffect(() => {
-    if (injectFontCss && !document.querySelector(`style[data-likec4-font]`)) {
-      const style = document.createElement("style");
-      style.setAttribute("type", "text/css");
-      style.setAttribute("data-likec4-font", "");
-      if (isString(styleNonce)) {
-        style.setAttribute("nonce", styleNonce);
-      }
-      if (isFunction(styleNonce)) {
-        style.setAttribute("nonce", styleNonce());
-      }
-      style.appendChild(document.createTextNode(fontsCss));
-      document.head.appendChild(style);
-    }
-  }, [injectFontCss]);
-  useIsomorphicLayoutEffect(() => {
-    const css2 = new CSSStyleSheet();
-    css2.replaceSync(
-      inlinedStyles.replaceAll(":where(:root,:host)", `.likec4-shadow-root`).replaceAll(":root", `.likec4-shadow-root`).replaceAll(/(?<![-_])\bbody\s*\{/g, `.likec4-shadow-root{`)
-    );
-    setStyleSheets([css2]);
-    return () => {
-      css2.replaceSync("");
-    };
-  }, [inlinedStyles]);
-  return styleSheets;
+import { __name } from "../_virtual/_rolldown/runtime.js";
+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 { useColorScheme, useMutationObserverTarget } from "@mantine/hooks";
+//#region src/shadowroot/styles.css.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");
 }
-const getComputedColorScheme = () => {
-  try {
-    const htmlScheme = window.getComputedStyle(document.documentElement).colorScheme ?? "";
-    const colorScheme = first(htmlScheme.split(" "));
-    if (colorScheme === "light" || colorScheme === "dark") {
-      return colorScheme;
-    }
-  } catch {
-  }
-  return null;
+function appendFontToDocument(injectFontCss, styleNonce) {
+	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(scopeStylesToShadowRoot(styles_font_default)));
+		document.head.appendChild(style);
+	}
+}
+/**
+* Creates a CSS string with styles scoped to the shadow root
+*/
+function createShadowRootStyles() {
+	return scopeStylesToShadowRoot(styles_default);
+}
+/**
+* Creates a CSSStyleSheet with styles scoped to the shadow root
+*/
+function createShadowRootStylesheets() {
+	const css = new CSSStyleSheet();
+	css.replaceSync(createShadowRootStyles());
+	return [css];
+}
+var getComputedColorScheme = () => {
+	try {
+		const colorScheme = first((window.getComputedStyle(document.documentElement).colorScheme ?? "").split(" "));
+		if (colorScheme === "light" || colorScheme === "dark") return colorScheme;
+	} catch {}
+	return null;
 };
-function useColorScheme(explicit) {
-  const preferred = useColorScheme$1();
-  const [computed, setComputed] = useState(getComputedColorScheme);
-  useMutationObserver(
-    useCallbackRef(() => setComputed(getComputedColorScheme)),
-    {
-      attributes: true,
-      childList: false,
-      subtree: false
-    },
-    () => document.documentElement
-  );
-  return explicit ?? computed ?? preferred;
+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;
 }
-
-export { useBundledStyleSheet, useColorScheme };
+__name(useColorScheme$1, "useColorScheme");
+//#endregion
+export { appendFontToDocument, createShadowRootStyles, createShadowRootStylesheets, useColorScheme$1 as useColorScheme };

package/dist/styles-font2.js

@@ -0,0 +1,4 @@
+//#region src/styles-font.css?inline
+var styles_font_default = "@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/latin-wght-normal.woff2)format(\"woff2-variations\");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/cyrillic-wght-normal.woff2)format(\"woff2-variations\");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/cyrillic-ext-wght-normal.woff2)format(\"woff2-variations\");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/greek-wght-normal.woff2)format(\"woff2-variations\");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/latin-ext-wght-normal.woff2)format(\"woff2-variations\");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/vietnamese-wght-normal.woff2)format(\"woff2-variations\");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}";
+//#endregion
+export { styles_font_default as default };