likec4 0.41.0 → 0.42.1

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

@@ -1,93 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.KonvaHtml = KonvaHtml;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _client = _interopRequireDefault(require("react-dom/client"));
-var _konva = require("./konva");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function needForceStyle(el) {
-  const pos = window.getComputedStyle(el).position;
-  const ok = pos === "absolute" || pos === "relative";
-  return !ok;
-}
-function KonvaHtml({
-  children,
-  groupProps,
-  divProps,
-  transform,
-  transformFunc
-}) {
-  const groupRef = (0, _react.useRef)(null);
-  const [div] = (0, _react.useState)(() => document.createElement("div"));
-  const root = (0, _react.useMemo)(() => _client.default.createRoot(div), [div]);
-  const shouldTransform = transform ?? true;
-  const handleTransform = (0, _react.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);
-  }, []);
-  (0, _react.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]);
-  (0, _react.useLayoutEffect)(() => {
-    handleTransform();
-  }, [divProps, transformFunc]);
-  (0, _react.useLayoutEffect)(() => {
-    root.render(children);
-  });
-  (0, _react.useLayoutEffect)(() => {
-    return () => {
-      setTimeout(() => {
-        root.unmount();
-      });
-    };
-  }, []);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_konva.Group, {
-    ref: groupRef,
-    ...groupProps
-  });
-}

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

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Portal = Portal;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _konva = require("./konva");
-function Portal({
-  selector,
-  enabled,
-  children
-}) {
-  const outer = (0, _react.useRef)(null);
-  const inner = (0, _react.useRef)(null);
-  const safeRef = (0, _react.useRef)();
-  const shouldMove = enabled ?? true;
-  (0, _react.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]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      safeRef.current?.destroy();
-    };
-  }, []);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_konva.Group, {
-    ref: outer,
-    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_konva.Group, {
-      ref: inner,
-      children
-    })
-  });
-}

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

@@ -1,102 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AnimatedText = exports.AnimatedStage = exports.AnimatedRect = exports.AnimatedPath = exports.AnimatedLine = exports.AnimatedGroup = exports.AnimatedEllipse = exports.AnimatedCircle = void 0;
-Object.defineProperty(exports, "Circle", {
-  enumerable: true,
-  get: function () {
-    return _ReactKonvaCore.Circle;
-  }
-});
-Object.defineProperty(exports, "Ellipse", {
-  enumerable: true,
-  get: function () {
-    return _ReactKonvaCore.Ellipse;
-  }
-});
-Object.defineProperty(exports, "Group", {
-  enumerable: true,
-  get: function () {
-    return _ReactKonvaCore.Group;
-  }
-});
-Object.defineProperty(exports, "Image", {
-  enumerable: true,
-  get: function () {
-    return _ReactKonvaCore.Image;
-  }
-});
-Object.defineProperty(exports, "KonvaCore", {
-  enumerable: true,
-  get: function () {
-    return _Core.default;
-  }
-});
-Object.defineProperty(exports, "Layer", {
-  enumerable: true,
-  get: function () {
-    return _ReactKonvaCore.Layer;
-  }
-});
-Object.defineProperty(exports, "Line", {
-  enumerable: true,
-  get: function () {
-    return _ReactKonvaCore.Line;
-  }
-});
-Object.defineProperty(exports, "Path", {
-  enumerable: true,
-  get: function () {
-    return _ReactKonvaCore.Path;
-  }
-});
-Object.defineProperty(exports, "Rect", {
-  enumerable: true,
-  get: function () {
-    return _ReactKonvaCore.Rect;
-  }
-});
-Object.defineProperty(exports, "Stage", {
-  enumerable: true,
-  get: function () {
-    return _ReactKonvaCore.Stage;
-  }
-});
-Object.defineProperty(exports, "Text", {
-  enumerable: true,
-  get: function () {
-    return _ReactKonvaCore.Text;
-  }
-});
-var _ReactKonvaCore = require("react-konva/es/ReactKonvaCore");
-var _Core = _interopRequireDefault(require("konva/lib/Core"));
-require("konva/lib/shapes/Rect");
-require("konva/lib/shapes/Text");
-require("konva/lib/shapes/Path");
-require("konva/lib/shapes/Circle");
-require("konva/lib/shapes/Line");
-require("konva/lib/shapes/Image");
-require("konva/lib/shapes/Ellipse");
-var _konva = require("@react-spring/konva");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-_Core.default.hitOnDragEnabled = true;
-_Core.default.capturePointerEventsEnabled = true;
-_Core.default.dragButtons = [0, 2];
-const AnimatedStage = /* @__PURE__ */(0, _konva.animated)(_ReactKonvaCore.Stage);
-exports.AnimatedStage = AnimatedStage;
-const AnimatedRect = /* @__PURE__ */(0, _konva.animated)(_ReactKonvaCore.Rect);
-exports.AnimatedRect = AnimatedRect;
-const AnimatedGroup = /* @__PURE__ */(0, _konva.animated)(_ReactKonvaCore.Group);
-exports.AnimatedGroup = AnimatedGroup;
-const AnimatedText = /* @__PURE__ */(0, _konva.animated)(_ReactKonvaCore.Text);
-exports.AnimatedText = AnimatedText;
-const AnimatedPath = /* @__PURE__ */(0, _konva.animated)(_ReactKonvaCore.Path);
-exports.AnimatedPath = AnimatedPath;
-const AnimatedLine = /* @__PURE__ */(0, _konva.animated)(_ReactKonvaCore.Line);
-exports.AnimatedLine = AnimatedLine;
-const AnimatedCircle = /* @__PURE__ */(0, _konva.animated)(_ReactKonvaCore.Circle);
-exports.AnimatedCircle = AnimatedCircle;
-const AnimatedEllipse = /* @__PURE__ */(0, _konva.animated)(_ReactKonvaCore.Ellipse);
-exports.AnimatedEllipse = AnimatedEllipse;

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

@@ -1,91 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LikeC4 = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _diagram = require("./diagram");
-var _components = require("./components");
-var _primitives = require("./components/primitives");
-var _useViewIdFromHash = require("./hooks/useViewIdFromHash");
-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 => (0, _useViewIdFromHash.useViewIdFromHash)({
-    ...props,
-    isViewId: this.isViewId
-  });
-  Diagram = (0, _react.forwardRef)(({
-    viewId,
-    ...props
-  }, ref) => {
-    const diagram = this.views[viewId];
-    if (!diagram) {
-      throw new Error(`View "${viewId}" not found in views`);
-    }
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_diagram.Diagram, {
-      ref,
-      diagram,
-      ...props
-    });
-  });
-  Responsive = (0, _react.forwardRef)(({
-    viewId,
-    ...props
-  }, ref) => {
-    const diagram = this.views[viewId];
-    if (!diagram) {
-      throw new Error(`View "${viewId}" not found in views`);
-    }
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_primitives.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__ */(0, _jsxRuntime.jsx)(_primitives.FullscreenDiagram, {
-      diagram,
-      ...props
-    });
-  };
-  Embedded = (0, _react.forwardRef)((props, ref) => {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_components.EmbeddedDiagram, {
-      ref,
-      views: this.views,
-      ...props
-    });
-  });
-  Browser = props => {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_components.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);
-  }
-}
-exports.LikeC4 = LikeC4;

package/dist/@likec4/diagrams/components/EmbeddedDiagram.mjs

@@ -1,77 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { invariant } from "@likec4/core";
-import { forwardRef, useCallback, useState } from "react";
-import { ResponsiveDiagram } from "./primitives/index.mjs";
-import { FullscreenDiagramBrowser } from "./FullscreenDiagramBrowser.mjs";
-const EmbeddedPadding = [20, 20, 20, 20];
-const defaultRenderDisclose = ({
-  views,
-  viewId,
-  initialPosition,
-  onClose
-}) => /* @__PURE__ */ jsx(
-  FullscreenDiagramBrowser,
-  {
-    views,
-    initialViewId: viewId,
-    initialPosition,
-    onClose
-  }
-);
-export const EmbeddedDiagram = /* @__PURE__ */ forwardRef(
-  ({
-    animate = false,
-    views,
-    viewId,
-    padding,
-    noBrowser = false,
-    renderDisclose = defaultRenderDisclose,
-    ...props
-  }, ref) => {
-    const diagram = views[viewId];
-    invariant(diagram, `View "${viewId}" not found in views`);
-    const [initialPosition, setBrowserInitialPosition] = useState(
-      null
-    );
-    const isOpened = initialPosition !== null;
-    const openBrowser = (s) => {
-      const rect = s.container().getBoundingClientRect(), scale = s.scaleX(), embeddedX = s.x() - s.offsetX(), embeddedY = s.y() - s.offsetY(), offset = {
-        x: window.innerWidth / 2,
-        y: window.innerHeight / 2
-      };
-      setBrowserInitialPosition({
-        x: Math.ceil(embeddedX + rect.x * scale + offset.x),
-        y: Math.ceil(embeddedY + rect.y * scale + offset.y),
-        scale
-      });
-    };
-    const onNodeEdgeClick = (_node, e) => {
-      const stage = e.target.getStage();
-      if (stage) {
-        e.cancelBubble = true;
-        openBrowser(stage);
-      }
-    };
-    const onClose = useCallback(() => setBrowserInitialPosition(null), []);
-    const enableBrowseClicks = !noBrowser && !isOpened;
-    return /* @__PURE__ */ jsxs("div", { ...props, children: [
-      /* @__PURE__ */ jsx(
-        ResponsiveDiagram,
-        {
-          ref,
-          animate,
-          zoomable: false,
-          pannable: false,
-          diagram,
-          padding: padding ?? EmbeddedPadding,
-          ...enableBrowseClicks && {
-            onStageClick: openBrowser,
-            onEdgeClick: onNodeEdgeClick,
-            onNodeClick: onNodeEdgeClick
-          }
-        }
-      ),
-      isOpened && renderDisclose({ views, viewId, initialPosition, onClose })
-    ] });
-  }
-);

package/dist/@likec4/diagrams/components/FullscreenDiagramBrowser.mjs

@@ -1,52 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { invariant } from "@likec4/core";
-import { useSyncedRef } from "@react-hookz/web/esm";
-import { useCallback } from "react";
-import { createPortal } from "react-dom";
-import { useViewIdFromHash } from "../hooks/useViewIdFromHash.mjs";
-import { FullscreenDiagram, FullscreenDiagramTitle } from "./primitives/index.mjs";
-export function FullscreenDiagramBrowser({
-  initialViewId,
-  views,
-  initialPosition,
-  onClose,
-  closeOnEsc,
-  closeOnOutsideClick,
-  ...props
-}) {
-  const viewsRef = useSyncedRef(views);
-  const [viewId, setViewId] = useViewIdFromHash({
-    initialViewId,
-    onReturnToInitial: () => {
-      onClose?.();
-    }
-  });
-  const diagram = views[viewId];
-  invariant(diagram, `View "${viewId}" not found in views`);
-  const onNodeClick = useCallback(
-    (node) => {
-      if (node.navigateTo && node.navigateTo in viewsRef.current) {
-        setViewId(node.navigateTo);
-      }
-    },
-    [viewsRef, setViewId]
-  );
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      FullscreenDiagram,
-      {
-        diagram,
-        initialPosition,
-        closeOnEsc: true,
-        closeOnOutsideClick: true,
-        onNodeClick,
-        onClose,
-        ...props,
-        children: /* @__PURE__ */ jsx(FullscreenDiagramTitle, { children: diagram.title })
-      }
-    ),
-    document.body,
-    "FullscreenDiagramBrowser"
-  );
-}
-FullscreenDiagramBrowser.displayName = "FullscreenDiagramBrowser";

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

@@ -1,4 +0,0 @@
-export * from "./FullscreenDiagramBrowser.mjs";
-export * from "./EmbeddedDiagram.mjs";
-export * from "./primitives/index.mjs";
-export * from "./types.mjs";

package/dist/@likec4/diagrams/components/primitives/fullscreen/CloseButton.mjs

@@ -1,43 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const CrossIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    ref,
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
-        fill: "currentColor",
-        fillRule: "evenodd",
-        clipRule: "evenodd"
-      }
-    )
-  }
-));
-export const CloseButton = ({
-  style,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ...props,
-    style: {
-      position: "absolute",
-      top: "1rem",
-      right: "1rem",
-      width: 24,
-      height: 24,
-      cursor: "pointer",
-      color: "var(--likec4-browser-close-btn-color, rgba(200,200,200,0.8))",
-      ...style
-    },
-    children: /* @__PURE__ */ jsx(CrossIcon, { width: 24, height: 24 })
-  }
-);

package/dist/@likec4/diagrams/components/primitives/fullscreen/FullscreenDiagram.mjs

@@ -1,116 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { invariant } from "@likec4/core";
-import { useKeyboardEvent, useMeasure } from "@react-hookz/web/esm";
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock-upgrade";
-import { useEffect, useRef } from "react";
-import { Diagram } from "../../../diagram/Diagram.mjs";
-import { CloseButton } from "./CloseButton.mjs";
-const DefaultPadding = [30, 30, 30, 30];
-const StyleOverlay = {
-  position: "fixed",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  backgroundColor: "var(--likec4-browser-overlay-bg, rgba(18,18,18,0.8))",
-  backdropFilter: "var(--likec4-browser-backdrop, blur(4px))",
-  zIndex: "var(--likec4-overlay-z-index, 100)",
-  display: "flex",
-  placeContent: "strech",
-  placeItems: "strech",
-  touchAction: "pan-x pan-y pinch-zoom",
-  boxSizing: "border-box",
-  margin: 0,
-  padding: 0,
-  border: "0 solid transparent"
-};
-const StyleContainer = {
-  margin: 0,
-  padding: 0,
-  flex: "1 1 100%",
-  overflow: "hidden"
-};
-export function FullscreenDiagram({
-  diagram,
-  initialPosition,
-  padding,
-  style,
-  styleDiagram,
-  closeOnEsc = true,
-  closeOnOutsideClick,
-  onNodeClick,
-  onEdgeClick,
-  onStageClick,
-  onClose,
-  children,
-  ...props
-}) {
-  if (onStageClick && closeOnOutsideClick === true) {
-    throw new Error("onStageClick cannot be used with closeOnOutsideClick");
-  }
-  if (closeOnEsc || closeOnOutsideClick) {
-    invariant(onClose, "onClose is required when closeOnEsc or closeOnOutsideClick");
-  }
-  const overlayRef = useRef(null);
-  const [measures, containerRef] = useMeasure();
-  useEffect(() => {
-    const target = overlayRef.current;
-    if (!target) {
-      return;
-    }
-    disableBodyScroll(target);
-    return () => {
-      enableBodyScroll(target);
-    };
-  }, []);
-  useKeyboardEvent(
-    closeOnEsc && "Escape",
-    () => {
-      onClose?.();
-    },
-    [],
-    { eventOptions: { passive: true } }
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: overlayRef,
-      style: {
-        ...StyleOverlay,
-        ...style
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: containerRef,
-            style: {
-              ...StyleContainer
-            },
-            children: measures && /* @__PURE__ */ jsx(
-              Diagram,
-              {
-                animate: true,
-                pannable: true,
-                zoomable: true,
-                diagram,
-                width: measures.width,
-                height: measures.height,
-                initialPosition,
-                padding: padding ?? DefaultPadding,
-                style: styleDiagram,
-                onNodeClick,
-                onEdgeClick,
-                onStageClick: onStageClick ?? (closeOnOutsideClick ? onClose : void 0)
-              }
-            )
-          }
-        ),
-        children,
-        onClose && /* @__PURE__ */ jsx(CloseButton, { onClick: () => onClose() })
-      ]
-    }
-  );
-}
-FullscreenDiagram.displayName = "FullscreenDiagram";

package/dist/@likec4/diagrams/components/primitives/fullscreen/FullscreenDiagramTitle.mjs

@@ -1,32 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-const ContainerStyles = {
-  position: "absolute",
-  pointerEvents: "none",
-  userSelect: "none",
-  top: 0,
-  left: 0,
-  width: "100%",
-  margin: 0,
-  padding: "10px 20px 0 20px",
-  boxSizing: "border-box",
-  color: "rgb(241 245 249 / 95%)",
-  fontFamily: 'ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif',
-  fontSize: "16px",
-  lineHeight: "1.1",
-  fontWeight: "500",
-  textShadow: "4px 4px 5px rgb(17 17 17)"
-};
-export function FullscreenDiagramTitle({ children, style, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        ...ContainerStyles,
-        ...style
-      },
-      ...props,
-      children
-    }
-  );
-}
-FullscreenDiagramTitle.displayName = "FullscreenDiagramTitle";

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

@@ -1,3 +0,0 @@
-export * from "./responsive/ResponsiveDiagram.mjs";
-export * from "./fullscreen/FullscreenDiagram.mjs";
-export * from "./fullscreen/FullscreenDiagramTitle.mjs";