likec4 0.41.0 → 0.42.1

package/dist/@likec4/diagrams/esm/hooks/index.js

@@ -1,4 +0,0 @@
-export * from "./useDarkMode.js";
-export * from "./useDiagramApi.js";
-export * from "./useImageLoader.js";
-export * from "./useViewIdFromHash.js";

package/dist/@likec4/diagrams/esm/hooks/useDarkMode.js

@@ -1,5 +0,0 @@
-import { useMediaQuery } from "@react-hookz/web/esm";
-const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
-export function useDarkMode() {
-  return useMediaQuery(COLOR_SCHEME_QUERY) ?? true;
-}

package/dist/@likec4/diagrams/esm/hooks/useDiagramApi.js

@@ -1,27 +0,0 @@
-import { useRef, useMemo } from "react";
-import { nonNullable } from "@likec4/core";
-export function useDiagramApi() {
-  const ref = useRef(null);
-  return useMemo(
-    () => [
-      ref,
-      {
-        get stage() {
-          return nonNullable(ref.current, "not mounted, use ref").stage;
-        },
-        get diagramView() {
-          return nonNullable(ref.current, "not mounted, use ref").diagramView;
-        },
-        get container() {
-          return nonNullable(ref.current, "not mounted, use ref").container;
-        },
-        resetStageZoom: (_immediate) => {
-          nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate);
-        },
-        centerOnNode: (node) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node),
-        centerAndFit: () => nonNullable(ref.current, "not mounted, use ref").centerAndFit()
-      }
-    ],
-    [ref]
-  );
-}

package/dist/@likec4/diagrams/esm/hooks/useImageLoader.js

@@ -1,64 +0,0 @@
-import { useLayoutEffect, useRef, useState } from "react";
-import { useIsMounted } from "@react-hookz/web/esm/useIsMounted";
-import { invariant } from "@likec4/core";
-const imageElements = /* @__PURE__ */ new Map();
-export default function useImageLoader(url, crossOrigin, referrerpolicy) {
-  const isMounted = useIsMounted();
-  const imageRef = useRef(url ? imageElements.get(url) : void 0);
-  const statusRef = useRef(imageRef.current ? "loaded" : "loading");
-  const [_, setStateToken] = useState(0);
-  const urlRef = useRef(url);
-  if (!url || urlRef.current !== url) {
-    statusRef.current = "loading";
-    imageRef.current = void 0;
-    urlRef.current = url;
-  }
-  useLayoutEffect(() => {
-    if (!url) {
-      return;
-    }
-    const urlClosure = url;
-    const imgCached = imageElements.get(url);
-    if (imgCached) {
-      statusRef.current = "loaded";
-      if (imageRef.current !== imgCached) {
-        imageRef.current = imgCached;
-        setStateToken(Math.random());
-      }
-      return;
-    }
-    const img = document.createElement("img");
-    function onload() {
-      if (!isMounted())
-        return;
-      imageElements.set(urlClosure, img);
-      if (urlRef.current === urlClosure) {
-        statusRef.current = "loaded";
-        imageRef.current = img;
-        setStateToken(Math.random());
-      }
-    }
-    function onerror() {
-      if (!isMounted() || urlRef.current !== urlClosure)
-        return;
-      statusRef.current = "failed";
-      imageRef.current = void 0;
-      setStateToken(Math.random());
-    }
-    img.addEventListener("load", onload);
-    img.addEventListener("error", onerror);
-    crossOrigin && (img.crossOrigin = crossOrigin);
-    referrerpolicy && (img.referrerPolicy = referrerpolicy);
-    img.src = url;
-    return () => {
-      img.removeEventListener("load", onload);
-      img.removeEventListener("error", onerror);
-    };
-  }, [url, crossOrigin ?? null, referrerpolicy ?? null]);
-  if (imageRef.current !== void 0) {
-    statusRef.current = "loaded";
-    return [imageRef.current, "loaded"];
-  }
-  invariant(statusRef.current !== "loaded", "image status cant be loaded");
-  return [imageRef.current, statusRef.current];
-}

package/dist/@likec4/diagrams/esm/hooks/useViewIdFromHash.js

@@ -1,87 +0,0 @@
-import { isString } from "@likec4/core";
-import { useCallback, useEffect, useRef, useState } from "react";
-function readViewIdFromUrl(url) {
-  return readViewId(new URL(url).hash);
-}
-function readViewId(hash = window.location.hash) {
-  if (hash.startsWith("#")) {
-    hash = hash.slice(1);
-  }
-  if (hash.includes("likec4")) {
-    return new URLSearchParams(hash).get("likec4");
-  }
-  return null;
-}
-function writeViewId(viewId) {
-  let hash = window.location.hash;
-  if (hash.startsWith("#")) {
-    hash = hash.slice(1);
-  }
-  const hashParams = new URLSearchParams(hash);
-  if (viewId != null) {
-    if (hashParams.get("likec4") !== viewId) {
-      hashParams.set("likec4", viewId);
-      window.location.hash = hashParams.toString();
-    }
-    return;
-  }
-  if (viewId === null && hashParams.has("likec4")) {
-    hashParams.delete("likec4");
-    window.location.hash = hashParams.toString();
-    return;
-  }
-}
-const noopIsViewId = (value) => isString(value) && value.length > 0;
-export function useViewIdFromHash({
-  initialViewId,
-  onReturnToInitial,
-  resetHashOnUnmount = true,
-  isViewId = noopIsViewId
-}) {
-  const [viewId, setStateViewId] = useState(() => {
-    const id = readViewId();
-    return isViewId(id) ? id : initialViewId;
-  });
-  const viewIdRef = useRef(viewId);
-  const prevIdRef = useRef();
-  if (viewIdRef.current !== viewId) {
-    prevIdRef.current = viewIdRef.current;
-    viewIdRef.current = viewId;
-  }
-  const onReturnRef = useRef(onReturnToInitial);
-  onReturnRef.current = onReturnToInitial;
-  useEffect(() => {
-    const tm = setTimeout(() => {
-      writeViewId(viewIdRef.current);
-    }, 300);
-    return () => clearTimeout(tm);
-  }, []);
-  useEffect(() => {
-    const onHashChange = (ev) => {
-      const newViewId = readViewIdFromUrl(ev.newURL);
-      if (newViewId === null) {
-        const oldViewId = readViewIdFromUrl(ev.oldURL);
-        if (oldViewId != null && onReturnRef.current) {
-          onReturnRef.current?.();
-        }
-        return;
-      }
-      if (isViewId(newViewId) && newViewId !== viewIdRef.current) {
-        setStateViewId(newViewId);
-      }
-    };
-    window.addEventListener("hashchange", onHashChange);
-    return () => {
-      window.removeEventListener("hashchange", onHashChange);
-      if (resetHashOnUnmount) {
-        writeViewId(null);
-      }
-    };
-  }, []);
-  const setViewId = useCallback((nextViewId) => {
-    if (isViewId(nextViewId) && nextViewId !== viewIdRef.current) {
-      writeViewId(nextViewId);
-    }
-  }, []);
-  return [viewId, setViewId];
-}

package/dist/@likec4/diagrams/esm/index.js

@@ -1,4 +0,0 @@
-export * from "./diagram/index.js";
-export * from "./components/index.js";
-export * from "./hooks/index.js";
-export { LikeC4 } from "./likec4.js";

package/dist/@likec4/diagrams/esm/konva-html.js

@@ -1,74 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import ReactDOM from "react-dom/client";
-import { Group } from "./konva.js";
-function needForceStyle(el) {
-  const pos = window.getComputedStyle(el).position;
-  const ok = pos === "absolute" || pos === "relative";
-  return !ok;
-}
-export function KonvaHtml({ children, groupProps, divProps, transform, transformFunc }) {
-  const groupRef = useRef(null);
-  const [div] = useState(() => document.createElement("div"));
-  const root = useMemo(() => ReactDOM.createRoot(div), [div]);
-  const shouldTransform = transform ?? true;
-  const handleTransform = useCallback(() => {
-    if (shouldTransform && groupRef.current) {
-      const tr = groupRef.current.getAbsoluteTransform();
-      let attrs = tr.decompose();
-      if (transformFunc) {
-        attrs = transformFunc(attrs);
-      }
-      div.style.position = "absolute";
-      div.style.zIndex = "10";
-      div.style.top = "0px";
-      div.style.left = "0px";
-      div.style.transform = `translate(${attrs.x}px, ${attrs.y}px) rotate(${attrs.rotation}deg) scaleX(${attrs.scaleX}) scaleY(${attrs.scaleY})`;
-      div.style.transformOrigin = "top left";
-    } else {
-      div.style.position = "";
-      div.style.zIndex = "";
-      div.style.top = "";
-      div.style.left = "";
-      div.style.transform = ``;
-      div.style.transformOrigin = "";
-    }
-    const { style, ...restProps } = divProps || {};
-    Object.assign(div.style, style);
-    Object.assign(div, restProps);
-  }, []);
-  useLayoutEffect(() => {
-    const group = groupRef.current;
-    if (!group) {
-      return;
-    }
-    const parent = group.getStage()?.container();
-    if (!parent) {
-      return;
-    }
-    parent.appendChild(div);
-    if (shouldTransform && needForceStyle(parent)) {
-      parent.style.position = "relative";
-    }
-    group.on("absoluteTransformChange", handleTransform);
-    handleTransform();
-    return () => {
-      group.off("absoluteTransformChange", handleTransform);
-      div.parentNode?.removeChild(div);
-    };
-  }, [shouldTransform]);
-  useLayoutEffect(() => {
-    handleTransform();
-  }, [divProps, transformFunc]);
-  useLayoutEffect(() => {
-    root.render(children);
-  });
-  useLayoutEffect(() => {
-    return () => {
-      setTimeout(() => {
-        root.unmount();
-      });
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(Group, { ref: groupRef, ...groupProps });
-}

package/dist/@likec4/diagrams/esm/konva-portal.js

@@ -1,34 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef } from "react";
-import { Group } from "./konva.js";
-export function Portal({ selector, enabled, children }) {
-  const outer = useRef(null);
-  const inner = useRef(null);
-  const safeRef = useRef();
-  const shouldMove = enabled ?? true;
-  useLayoutEffect(() => {
-    if (!outer.current || !inner.current) {
-      return;
-    }
-    const stage = outer.current.getStage();
-    if (!stage) {
-      return;
-    }
-    if (shouldMove) {
-      const newContainer = stage.findOne(selector);
-      if (newContainer) {
-        safeRef.current = inner.current;
-        inner.current.moveTo(newContainer);
-      }
-    } else if (safeRef.current) {
-      safeRef.current.moveTo(outer.current);
-      safeRef.current = void 0;
-    }
-  }, [selector, shouldMove]);
-  useEffect(() => {
-    return () => {
-      safeRef.current?.destroy();
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(Group, { ref: outer, children: /* @__PURE__ */ jsx(Group, { ref: inner, children }) });
-}

package/dist/@likec4/diagrams/esm/konva.js

@@ -1,22 +0,0 @@
-import { Rect, Stage, Text, Group, Path, Circle, Line, Layer, Image, Ellipse } from "react-konva/es/ReactKonvaCore";
-import KonvaCore from "konva/lib/Core";
-import "konva/lib/shapes/Rect";
-import "konva/lib/shapes/Text";
-import "konva/lib/shapes/Path";
-import "konva/lib/shapes/Circle";
-import "konva/lib/shapes/Line";
-import "konva/lib/shapes/Image";
-import "konva/lib/shapes/Ellipse";
-import { animated } from "@react-spring/konva";
-KonvaCore.hitOnDragEnabled = true;
-KonvaCore.capturePointerEventsEnabled = true;
-KonvaCore.dragButtons = [0, 2];
-export { KonvaCore, Stage, Group, Layer, Path, Text, Line, Circle, Rect, Image, Ellipse };
-export const AnimatedStage = /* @__PURE__ */ animated(Stage);
-export const AnimatedRect = /* @__PURE__ */ animated(Rect);
-export const AnimatedGroup = /* @__PURE__ */ animated(Group);
-export const AnimatedText = /* @__PURE__ */ animated(Text);
-export const AnimatedPath = /* @__PURE__ */ animated(Path);
-export const AnimatedLine = /* @__PURE__ */ animated(Line);
-export const AnimatedCircle = /* @__PURE__ */ animated(Circle);
-export const AnimatedEllipse = /* @__PURE__ */ animated(Ellipse);

package/dist/@likec4/diagrams/esm/likec4.js

@@ -1,54 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Diagram } from "./diagram/index.js";
-import { FullscreenDiagramBrowser, EmbeddedDiagram } from "./components/index.js";
-import { ResponsiveDiagram, FullscreenDiagram } from "./components/primitives/index.js";
-import { useViewIdFromHash } from "./hooks/useViewIdFromHash.js";
-export class LikeC4 {
-  constructor(views) {
-    this.views = views;
-  }
-  isViewId = (value) => {
-    return value != null && typeof value === "string" && Object.prototype.hasOwnProperty.call(this.views, value);
-  };
-  /**
-   * React hook to use location hash for ViewId.
-   * When the element with this hook is mounted, hash is set to `...#likec4={initialViewId}`
-   * When element with this hook is unmounted, `likec4` is removed from hash if `resetHashOnUnmount` is true (default: true)
-   * You can also provide `onReturnToInitial` callback to handle back navigation (when user goes beyond the initialViewId)
-   */
-  useViewId = (props) => useViewIdFromHash({ ...props, isViewId: this.isViewId });
-  Diagram = forwardRef(({ viewId, ...props }, ref) => {
-    const diagram = this.views[viewId];
-    if (!diagram) {
-      throw new Error(`View "${viewId}" not found in views`);
-    }
-    return /* @__PURE__ */ jsx(Diagram, { ref, diagram, ...props });
-  });
-  Responsive = forwardRef(({ viewId, ...props }, ref) => {
-    const diagram = this.views[viewId];
-    if (!diagram) {
-      throw new Error(`View "${viewId}" not found in views`);
-    }
-    return /* @__PURE__ */ jsx(ResponsiveDiagram, { ref, diagram, ...props });
-  });
-  Fullscreen = ({ viewId, ...props }) => {
-    const diagram = this.views[viewId];
-    if (!diagram) {
-      throw new Error(`View "${viewId}" not found in views`);
-    }
-    return /* @__PURE__ */ jsx(FullscreenDiagram, { diagram, ...props });
-  };
-  Embedded = forwardRef((props, ref) => {
-    return /* @__PURE__ */ jsx(EmbeddedDiagram, { ref, views: this.views, ...props });
-  });
-  Browser = (props) => {
-    return /* @__PURE__ */ jsx(FullscreenDiagramBrowser, { views: this.views, ...props });
-  };
-  static create(views) {
-    if (Object.keys(views).length === 0) {
-      throw new Error("LikeC4: views must not be empty");
-    }
-    return new LikeC4(views);
-  }
-}

package/dist/@likec4/diagrams/hooks/index.mjs

@@ -1,4 +0,0 @@
-export * from "./useDarkMode.mjs";
-export * from "./useDiagramApi.mjs";
-export * from "./useImageLoader.mjs";
-export * from "./useViewIdFromHash.mjs";

package/dist/@likec4/diagrams/hooks/useDarkMode.mjs

@@ -1,5 +0,0 @@
-import { useMediaQuery } from "@react-hookz/web/esm";
-const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
-export function useDarkMode() {
-  return useMediaQuery(COLOR_SCHEME_QUERY) ?? true;
-}

package/dist/@likec4/diagrams/hooks/useDiagramApi.mjs

@@ -1,27 +0,0 @@
-import { useRef, useMemo } from "react";
-import { nonNullable } from "@likec4/core";
-export function useDiagramApi() {
-  const ref = useRef(null);
-  return useMemo(
-    () => [
-      ref,
-      {
-        get stage() {
-          return nonNullable(ref.current, "not mounted, use ref").stage;
-        },
-        get diagramView() {
-          return nonNullable(ref.current, "not mounted, use ref").diagramView;
-        },
-        get container() {
-          return nonNullable(ref.current, "not mounted, use ref").container;
-        },
-        resetStageZoom: (_immediate) => {
-          nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate);
-        },
-        centerOnNode: (node) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node),
-        centerAndFit: () => nonNullable(ref.current, "not mounted, use ref").centerAndFit()
-      }
-    ],
-    [ref]
-  );
-}

package/dist/@likec4/diagrams/hooks/useImageLoader.mjs

@@ -1,64 +0,0 @@
-import { useLayoutEffect, useRef, useState } from "react";
-import { useIsMounted } from "@react-hookz/web/esm/useIsMounted";
-import { invariant } from "@likec4/core";
-const imageElements = /* @__PURE__ */ new Map();
-export default function useImageLoader(url, crossOrigin, referrerpolicy) {
-  const isMounted = useIsMounted();
-  const imageRef = useRef(url ? imageElements.get(url) : void 0);
-  const statusRef = useRef(imageRef.current ? "loaded" : "loading");
-  const [_, setStateToken] = useState(0);
-  const urlRef = useRef(url);
-  if (!url || urlRef.current !== url) {
-    statusRef.current = "loading";
-    imageRef.current = void 0;
-    urlRef.current = url;
-  }
-  useLayoutEffect(() => {
-    if (!url) {
-      return;
-    }
-    const urlClosure = url;
-    const imgCached = imageElements.get(url);
-    if (imgCached) {
-      statusRef.current = "loaded";
-      if (imageRef.current !== imgCached) {
-        imageRef.current = imgCached;
-        setStateToken(Math.random());
-      }
-      return;
-    }
-    const img = document.createElement("img");
-    function onload() {
-      if (!isMounted())
-        return;
-      imageElements.set(urlClosure, img);
-      if (urlRef.current === urlClosure) {
-        statusRef.current = "loaded";
-        imageRef.current = img;
-        setStateToken(Math.random());
-      }
-    }
-    function onerror() {
-      if (!isMounted() || urlRef.current !== urlClosure)
-        return;
-      statusRef.current = "failed";
-      imageRef.current = void 0;
-      setStateToken(Math.random());
-    }
-    img.addEventListener("load", onload);
-    img.addEventListener("error", onerror);
-    crossOrigin && (img.crossOrigin = crossOrigin);
-    referrerpolicy && (img.referrerPolicy = referrerpolicy);
-    img.src = url;
-    return () => {
-      img.removeEventListener("load", onload);
-      img.removeEventListener("error", onerror);
-    };
-  }, [url, crossOrigin ?? null, referrerpolicy ?? null]);
-  if (imageRef.current !== void 0) {
-    statusRef.current = "loaded";
-    return [imageRef.current, "loaded"];
-  }
-  invariant(statusRef.current !== "loaded", "image status cant be loaded");
-  return [imageRef.current, statusRef.current];
-}

package/dist/@likec4/diagrams/hooks/useViewIdFromHash.mjs

@@ -1,87 +0,0 @@
-import { isString } from "@likec4/core";
-import { useCallback, useEffect, useRef, useState } from "react";
-function readViewIdFromUrl(url) {
-  return readViewId(new URL(url).hash);
-}
-function readViewId(hash = window.location.hash) {
-  if (hash.startsWith("#")) {
-    hash = hash.slice(1);
-  }
-  if (hash.includes("likec4")) {
-    return new URLSearchParams(hash).get("likec4");
-  }
-  return null;
-}
-function writeViewId(viewId) {
-  let hash = window.location.hash;
-  if (hash.startsWith("#")) {
-    hash = hash.slice(1);
-  }
-  const hashParams = new URLSearchParams(hash);
-  if (viewId != null) {
-    if (hashParams.get("likec4") !== viewId) {
-      hashParams.set("likec4", viewId);
-      window.location.hash = hashParams.toString();
-    }
-    return;
-  }
-  if (viewId === null && hashParams.has("likec4")) {
-    hashParams.delete("likec4");
-    window.location.hash = hashParams.toString();
-    return;
-  }
-}
-const noopIsViewId = (value) => isString(value) && value.length > 0;
-export function useViewIdFromHash({
-  initialViewId,
-  onReturnToInitial,
-  resetHashOnUnmount = true,
-  isViewId = noopIsViewId
-}) {
-  const [viewId, setStateViewId] = useState(() => {
-    const id = readViewId();
-    return isViewId(id) ? id : initialViewId;
-  });
-  const viewIdRef = useRef(viewId);
-  const prevIdRef = useRef();
-  if (viewIdRef.current !== viewId) {
-    prevIdRef.current = viewIdRef.current;
-    viewIdRef.current = viewId;
-  }
-  const onReturnRef = useRef(onReturnToInitial);
-  onReturnRef.current = onReturnToInitial;
-  useEffect(() => {
-    const tm = setTimeout(() => {
-      writeViewId(viewIdRef.current);
-    }, 300);
-    return () => clearTimeout(tm);
-  }, []);
-  useEffect(() => {
-    const onHashChange = (ev) => {
-      const newViewId = readViewIdFromUrl(ev.newURL);
-      if (newViewId === null) {
-        const oldViewId = readViewIdFromUrl(ev.oldURL);
-        if (oldViewId != null && onReturnRef.current) {
-          onReturnRef.current?.();
-        }
-        return;
-      }
-      if (isViewId(newViewId) && newViewId !== viewIdRef.current) {
-        setStateViewId(newViewId);
-      }
-    };
-    window.addEventListener("hashchange", onHashChange);
-    return () => {
-      window.removeEventListener("hashchange", onHashChange);
-      if (resetHashOnUnmount) {
-        writeViewId(null);
-      }
-    };
-  }, []);
-  const setViewId = useCallback((nextViewId) => {
-    if (isViewId(nextViewId) && nextViewId !== viewIdRef.current) {
-      writeViewId(nextViewId);
-    }
-  }, []);
-  return [viewId, setViewId];
-}

package/dist/@likec4/diagrams/index.mjs

@@ -1,4 +0,0 @@
-export * from "./diagram/index.mjs";
-export * from "./components/index.mjs";
-export * from "./hooks/index.mjs";
-export { LikeC4 } from "./likec4.mjs";

package/dist/@likec4/diagrams/konva-html.mjs

@@ -1,74 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import ReactDOM from "react-dom/client";
-import { Group } from "./konva.mjs";
-function needForceStyle(el) {
-  const pos = window.getComputedStyle(el).position;
-  const ok = pos === "absolute" || pos === "relative";
-  return !ok;
-}
-export function KonvaHtml({ children, groupProps, divProps, transform, transformFunc }) {
-  const groupRef = useRef(null);
-  const [div] = useState(() => document.createElement("div"));
-  const root = useMemo(() => ReactDOM.createRoot(div), [div]);
-  const shouldTransform = transform ?? true;
-  const handleTransform = useCallback(() => {
-    if (shouldTransform && groupRef.current) {
-      const tr = groupRef.current.getAbsoluteTransform();
-      let attrs = tr.decompose();
-      if (transformFunc) {
-        attrs = transformFunc(attrs);
-      }
-      div.style.position = "absolute";
-      div.style.zIndex = "10";
-      div.style.top = "0px";
-      div.style.left = "0px";
-      div.style.transform = `translate(${attrs.x}px, ${attrs.y}px) rotate(${attrs.rotation}deg) scaleX(${attrs.scaleX}) scaleY(${attrs.scaleY})`;
-      div.style.transformOrigin = "top left";
-    } else {
-      div.style.position = "";
-      div.style.zIndex = "";
-      div.style.top = "";
-      div.style.left = "";
-      div.style.transform = ``;
-      div.style.transformOrigin = "";
-    }
-    const { style, ...restProps } = divProps || {};
-    Object.assign(div.style, style);
-    Object.assign(div, restProps);
-  }, []);
-  useLayoutEffect(() => {
-    const group = groupRef.current;
-    if (!group) {
-      return;
-    }
-    const parent = group.getStage()?.container();
-    if (!parent) {
-      return;
-    }
-    parent.appendChild(div);
-    if (shouldTransform && needForceStyle(parent)) {
-      parent.style.position = "relative";
-    }
-    group.on("absoluteTransformChange", handleTransform);
-    handleTransform();
-    return () => {
-      group.off("absoluteTransformChange", handleTransform);
-      div.parentNode?.removeChild(div);
-    };
-  }, [shouldTransform]);
-  useLayoutEffect(() => {
-    handleTransform();
-  }, [divProps, transformFunc]);
-  useLayoutEffect(() => {
-    root.render(children);
-  });
-  useLayoutEffect(() => {
-    return () => {
-      setTimeout(() => {
-        root.unmount();
-      });
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(Group, { ref: groupRef, ...groupProps });
-}