@likec4/diagram 1.59.4 → 1.60.0

package/dist/shadowroot/ShadowRoot.mjs

@@ -0,0 +1,205 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.mjs";
+import { LikeC4MantineProvider } from "../LikeC4MantineProvider.mjs";
+import { FramerMotionConfig } from "../context/FramerMotionConfig.mjs";
+import { useId as useId$1 } from "../hooks/useId.mjs";
+import styles_font_default from "../styles-font2.mjs";
+import styles_default from "../styles2.mjs";
+import { memo, useEffectEvent, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+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) {
+	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;
+}`;
+	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;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  overflow: hidden;
+  aspect-ratio: ${width} / ${height};
+  ${isLandscape ? "" : `
+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));
+}`;
+}
+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$1(explicitColorScheme);
+	const id = useId$1();
+	const cssstyle = useShadowRootStyle(id, keepAspectRatio);
+	const mantineRootRef = useRef(null);
+	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() ?? "";
+		}
+		return "";
+	});
+	const nonce = 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(LikeC4MantineProvider, {
+				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
+*/
+const MemoizedStyle = memo(({ nonce, cssstyle }) => /* @__PURE__ */ jsx("style", {
+	type: "text/css",
+	...nonce && { nonce },
+	dangerouslySetInnerHTML: { __html: cssstyle }
+}), (a, b) => a.cssstyle === b.cssstyle);
+MemoizedStyle.displayName = "MemoizedStyle";
+const ShadowRootHostPortal = ({ children, root }) => {
+	return createPortal(children, root, "likec4-shadow-root");
+};
+const ShadowRootHost = ({ children, ...props }) => {
+	const hostRef = useRef(null);
+	const [root, setRoot] = useState(null);
+	const styles = shadowScopedCSS();
+	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) {
+					if (import.meta.env.DEV) console.error(error);
+				}
+				return host.shadowRoot;
+			}
+			try {
+				const shadowRoot = host.attachShadow({
+					mode: "open",
+					delegatesFocus: false
+				});
+				shadowRoot.adoptedStyleSheets = createShadowRootStylesheets(styles);
+				return shadowRoot;
+			} catch (error) {
+				if (import.meta.env.DEV) console.error(error);
+				return current;
+			}
+		});
+	});
+	useLayoutEffect(() => {
+		updateShadowRoot(styles);
+	}, [styles]);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: hostRef,
+		children: root && /* @__PURE__ */ jsx(ShadowRootHostPortal, {
+			root,
+			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
+*/
+const shadowScopedCSS = once(() => {
+	const scoped = scopeStylesToShadowRoot(styles_default);
+	console.log("Shadow root scoped CSS:");
+	console.log(scoped);
+	return scoped;
+});
+/**
+* Creates a CSSStyleSheet with styles scoped to the shadow root
+*/
+function createShadowRootStylesheets(csstext) {
+	const css = new CSSStyleSheet();
+	css.replaceSync(csstext);
+	return [css];
+}
+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;
+};
+const 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 };

package/dist/styles-font.css

@@ -0,0 +1 @@
+@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}

package/dist/styles-font2.mjs

@@ -0,0 +1,5 @@
+//#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}\n";
+
+//#endregion
+export { styles_font_default as default };