likec4 0.40.1-build.4 → 0.41.0

package/dist/@likec4/core/{colors.js → colors/element.js}

@@ -1,38 +1,22 @@
 const blue = {
-  // fill: colors.blue[500],
-  // stroke: colors.blue[600],
-  // hiContrast: colors.blue[50],
-  // loContrast: colors.blue[200],
   fill: "#3b82f6",
   stroke: "#2563eb",
   hiContrast: "#eff6ff",
   loContrast: "#bfdbfe"
 };
 const sky = {
-  // fill: colors.sky[600],
-  // stroke: colors.sky[700],
-  // hiContrast: colors.sky[50],
-  // loContrast: colors.sky[100],
   fill: "#0284c7",
   stroke: "#0369a1",
   hiContrast: "#f0f9ff",
   loContrast: "#e0f2fe"
 };
 const slate = {
-  // fill: colors.slate[500],
-  // stroke: colors.slate[600],
-  // hiContrast: colors.slate[50],
-  // loContrast: colors.slate[200],
   fill: "#64748b",
   stroke: "#475569",
   hiContrast: "#f8fafc",
   loContrast: "#e2e8f0"
 };
-export const RelationColors = {
-  lineColor: "#b1b1b1",
-  labelColor: "#b1b1b1"
-};
-export const Colors = {
+export const ElementColors = {
   primary: blue,
   blue,
   secondary: sky,
@@ -96,9 +80,3 @@ export const Colors = {
     loContrast: "#c7d2fe"
   }
 };
-export const defaultTheme = {
-  font: "Helvetica",
-  shadow: "#0a0a0a",
-  relation: RelationColors,
-  colors: Colors
-};

package/dist/@likec4/core/colors/index.js

@@ -0,0 +1,9 @@
+import { ElementColors } from "./element.js";
+import { RelationshipColors } from "./relationships.js";
+export const defaultTheme = {
+  elements: ElementColors,
+  relationships: RelationshipColors,
+  font: "Helvetica",
+  shadow: "#0a0a0a"
+};
+export { ElementColors, RelationshipColors };

package/dist/@likec4/core/colors/relationships.js

@@ -0,0 +1,64 @@
+const gray = {
+  lineColor: "#6E6E6E",
+  labelBgColor: "#18191b",
+  labelColor: "#C6C6C6"
+};
+const slate = {
+  lineColor: "#64748b",
+  // 500
+  labelBgColor: "#0f172a",
+  // 900
+  labelColor: "#cbd5e1"
+  // 300
+};
+const blue = {
+  lineColor: "#3b82f6",
+  // 500
+  labelBgColor: "#172554",
+  // 950
+  labelColor: "#60a5fa"
+  // 400
+};
+const sky = {
+  lineColor: "#0ea5e9",
+  // 500
+  labelBgColor: "#082f49",
+  // 950
+  labelColor: "#38bdf8"
+  // 400
+};
+export const RelationshipColors = {
+  amber: {
+    lineColor: "#b45309",
+    labelBgColor: "#78350f",
+    labelColor: "#f59e0b"
+  },
+  blue,
+  gray,
+  green: {
+    lineColor: "#15803d",
+    // 700
+    labelBgColor: "#052e16",
+    //950
+    labelColor: "#22c55e"
+    // 500
+  },
+  indigo: {
+    lineColor: "#6366f1",
+    // 500
+    labelBgColor: "#1e1b4b",
+    // 950
+    labelColor: "#818cf8"
+    // 400
+  },
+  muted: slate,
+  primary: blue,
+  red: {
+    lineColor: "#b91c1c",
+    labelBgColor: "#b91c1c",
+    labelColor: "#dc2626"
+  },
+  secondary: sky,
+  sky,
+  slate
+};

package/dist/@likec4/core/index.js

@@ -1,6 +1,4 @@
-export * from "./colors.js";
-export * from "./compute-view/index.js";
+export * from "./colors/index.js";
 export * from "./errors/index.js";
-export * from "./model-index/index.js";
 export * from "./types/index.js";
 export * from "./utils/index.js";

package/dist/@likec4/core/types/relation.js

@@ -0,0 +1,3 @@
+export const DefaultLineStyle = "dashed";
+export const DefaultArrowType = "normal";
+export const DefaultRelationshipColor = "gray";

package/dist/@likec4/core/types/view.js

@@ -1,5 +1,5 @@
 export function isViewRuleExpression(rule) {
-  return "exprs" in rule && "isInclude" in rule;
+  return "include" in rule && Array.isArray(rule.include) || "exclude" in rule && Array.isArray(rule.exclude);
 }
 export function isViewRuleStyle(rule) {
   return "style" in rule && "targets" in rule;

package/dist/@likec4/core/utils/fqn.js

@@ -13,10 +13,10 @@ export function isAncestor(...args) {
   const another = isString(args[1]) ? args[1] : args[1].id;
   return another.startsWith(ancestor + ".");
 }
-export function isSameHierarchy(...args) {
-  const one = isString(args[0]) ? args[0] : args[0].id;
-  const another = isString(args[1]) ? args[1] : args[1].id;
-  return one === another || another.startsWith(one + ".") || one.startsWith(another + ".");
+export function isSameHierarchy(one, another) {
+  const first = isString(one) ? one : one.id;
+  const second = isString(another) ? another : another.id;
+  return first === second || second.startsWith(first + ".") || first.startsWith(second + ".");
 }
 export function isDescendantOf(ancestors) {
   const predicates = ancestors.flatMap((a) => [(e) => e.id === a.id, (e) => isAncestor(a, e)]);
@@ -52,6 +52,18 @@ export function parentFqn(fqn) {
   }
   return null;
 }
+export function ancestorsFqn(fqn) {
+  const path = fqn.split(".");
+  path.pop();
+  if (path.length === 0) {
+    return [];
+  }
+  return path.reduce((acc, _, idx) => {
+    const ancestor = path.slice(0, idx + 1).join(".");
+    acc.unshift(ancestor);
+    return acc;
+  }, []);
+}
 export function compareFqnHierarchically(a, b) {
   const depthA = a.split(".").length;
   const depthB = b.split(".").length;

package/dist/@likec4/core/utils/guards.js

@@ -1,3 +1,4 @@
+export { hasAtLeast } from "remeda";
 export function isString(value) {
   return value != null && typeof value === "string";
 }

package/dist/@likec4/core/utils/index.js

@@ -1,4 +1,3 @@
 export * from "./fqn.js";
 export * from "./guards.js";
-export * from "./compute-node-levels.js";
 export * from "./relations.js";

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbeddedDiagram = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _core = require("@likec4/core");
+var _react = require("react");
+var _primitives = require("./primitives");
+var _FullscreenDiagramBrowser = require("./FullscreenDiagramBrowser");
+const EmbeddedPadding = [20, 20, 20, 20];
+const defaultRenderDisclose = ({
+  views,
+  viewId,
+  initialPosition,
+  onClose
+}) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_FullscreenDiagramBrowser.FullscreenDiagramBrowser, {
+  views,
+  initialViewId: viewId,
+  initialPosition,
+  onClose
+});
+const EmbeddedDiagram = /* @__PURE__ */(0, _react.forwardRef)(({
+  animate = false,
+  views,
+  viewId,
+  padding,
+  noBrowser = false,
+  renderDisclose = defaultRenderDisclose,
+  ...props
+}, ref) => {
+  const diagram = views[viewId];
+  (0, _core.invariant)(diagram, `View "${viewId}" not found in views`);
+  const [initialPosition, setBrowserInitialPosition] = (0, _react.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 = (0, _react.useCallback)(() => setBrowserInitialPosition(null), []);
+  const enableBrowseClicks = !noBrowser && !isOpened;
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+    ...props,
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_primitives.ResponsiveDiagram, {
+      ref,
+      animate,
+      zoomable: false,
+      pannable: false,
+      diagram,
+      padding: padding ?? EmbeddedPadding,
+      ...(enableBrowseClicks && {
+        onStageClick: openBrowser,
+        onEdgeClick: onNodeEdgeClick,
+        onNodeClick: onNodeEdgeClick
+      })
+    }), isOpened && renderDisclose({
+      views,
+      viewId,
+      initialPosition,
+      onClose
+    })]
+  });
+});
+exports.EmbeddedDiagram = EmbeddedDiagram;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullscreenDiagramBrowser = FullscreenDiagramBrowser;
+var _jsxRuntime = require("react/jsx-runtime");
+var _core = require("@likec4/core");
+var _esm = require("@react-hookz/web/esm");
+var _react = require("react");
+var _reactDom = require("react-dom");
+var _useViewIdFromHash = require("../hooks/useViewIdFromHash");
+var _primitives = require("./primitives");
+function FullscreenDiagramBrowser({
+  initialViewId,
+  views,
+  initialPosition,
+  onClose,
+  closeOnEsc,
+  closeOnOutsideClick,
+  ...props
+}) {
+  const viewsRef = (0, _esm.useSyncedRef)(views);
+  const [viewId, setViewId] = (0, _useViewIdFromHash.useViewIdFromHash)({
+    initialViewId,
+    onReturnToInitial: () => {
+      onClose?.();
+    }
+  });
+  const diagram = views[viewId];
+  (0, _core.invariant)(diagram, `View "${viewId}" not found in views`);
+  const onNodeClick = (0, _react.useCallback)(node => {
+    if (node.navigateTo && node.navigateTo in viewsRef.current) {
+      setViewId(node.navigateTo);
+    }
+  }, [viewsRef, setViewId]);
+  return (0, _reactDom.createPortal)( /* @__PURE__ */(0, _jsxRuntime.jsx)(_primitives.FullscreenDiagram, {
+    diagram,
+    initialPosition,
+    closeOnEsc: true,
+    closeOnOutsideClick: true,
+    onNodeClick,
+    onClose,
+    ...props,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_primitives.FullscreenDiagramTitle, {
+      children: diagram.title
+    })
+  }), document.body, "FullscreenDiagramBrowser");
+}
+FullscreenDiagramBrowser.displayName = "FullscreenDiagramBrowser";

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FullscreenDiagramBrowser = require("./FullscreenDiagramBrowser");
+Object.keys(_FullscreenDiagramBrowser).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FullscreenDiagramBrowser[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FullscreenDiagramBrowser[key];
+    }
+  });
+});
+var _EmbeddedDiagram = require("./EmbeddedDiagram");
+Object.keys(_EmbeddedDiagram).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _EmbeddedDiagram[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _EmbeddedDiagram[key];
+    }
+  });
+});
+var _primitives = require("./primitives");
+Object.keys(_primitives).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _primitives[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _primitives[key];
+    }
+  });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});

package/dist/@likec4/diagrams/cjs/components/primitives/fullscreen/CloseButton.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloseButton = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+const CrossIcon = (0, _react.forwardRef)((props, ref) => /* @__PURE__ */(0, _jsxRuntime.jsx)("svg", {
+  ref,
+  width: "15",
+  height: "15",
+  viewBox: "0 0 15 15",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /* @__PURE__ */(0, _jsxRuntime.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"
+  })
+}));
+const CloseButton = ({
+  style,
+  ...props
+}) => /* @__PURE__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.jsx)(CrossIcon, {
+    width: 24,
+    height: 24
+  })
+});
+exports.CloseButton = CloseButton;

package/dist/@likec4/diagrams/cjs/components/primitives/fullscreen/FullscreenDiagram.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullscreenDiagram = FullscreenDiagram;
+var _jsxRuntime = require("react/jsx-runtime");
+var _core = require("@likec4/core");
+var _esm = require("@react-hookz/web/esm");
+var _bodyScrollLockUpgrade = require("body-scroll-lock-upgrade");
+var _react = require("react");
+var _Diagram = require("../../../diagram/Diagram");
+var _CloseButton = require("./CloseButton");
+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"
+};
+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) {
+    (0, _core.invariant)(onClose, "onClose is required when closeOnEsc or closeOnOutsideClick");
+  }
+  const overlayRef = (0, _react.useRef)(null);
+  const [measures, containerRef] = (0, _esm.useMeasure)();
+  (0, _react.useEffect)(() => {
+    const target = overlayRef.current;
+    if (!target) {
+      return;
+    }
+    (0, _bodyScrollLockUpgrade.disableBodyScroll)(target);
+    return () => {
+      (0, _bodyScrollLockUpgrade.enableBodyScroll)(target);
+    };
+  }, []);
+  (0, _esm.useKeyboardEvent)(closeOnEsc && "Escape", () => {
+    onClose?.();
+  }, [], {
+    eventOptions: {
+      passive: true
+    }
+  });
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+    ref: overlayRef,
+    style: {
+      ...StyleOverlay,
+      ...style
+    },
+    ...props,
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
+      ref: containerRef,
+      style: {
+        ...StyleContainer
+      },
+      children: measures && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Diagram.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__ */(0, _jsxRuntime.jsx)(_CloseButton.CloseButton, {
+      onClick: () => onClose()
+    })]
+  });
+}
+FullscreenDiagram.displayName = "FullscreenDiagram";

package/dist/@likec4/diagrams/cjs/components/primitives/fullscreen/FullscreenDiagramTitle.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullscreenDiagramTitle = FullscreenDiagramTitle;
+var _jsxRuntime = require("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)"
+};
+function FullscreenDiagramTitle({
+  children,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
+    style: {
+      ...ContainerStyles,
+      ...style
+    },
+    ...props,
+    children
+  });
+}
+FullscreenDiagramTitle.displayName = "FullscreenDiagramTitle";

package/dist/@likec4/diagrams/cjs/components/primitives/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ResponsiveDiagram = require("./responsive/ResponsiveDiagram");
+Object.keys(_ResponsiveDiagram).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ResponsiveDiagram[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ResponsiveDiagram[key];
+    }
+  });
+});
+var _FullscreenDiagram = require("./fullscreen/FullscreenDiagram");
+Object.keys(_FullscreenDiagram).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FullscreenDiagram[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FullscreenDiagram[key];
+    }
+  });
+});
+var _FullscreenDiagramTitle = require("./fullscreen/FullscreenDiagramTitle");
+Object.keys(_FullscreenDiagramTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FullscreenDiagramTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FullscreenDiagramTitle[key];
+    }
+  });
+});

package/dist/@likec4/diagrams/cjs/components/primitives/responsive/ResponsiveDiagram.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResponsiveDiagram = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _esm = require("@react-hookz/web/esm");
+var _react = require("react");
+var _diagram = require("../../../diagram");
+const ResponsiveDiagram = /* @__PURE__ */(0, _react.forwardRef)(({
+  diagram,
+  animate = false,
+  className,
+  diagramClassName,
+  style,
+  ...props
+}, ref) => {
+  const [measures, containerRef] = (0, _esm.useMeasure)();
+  const w = diagram.width,
+    h = diagram.height;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
+    style: {
+      position: "relative",
+      display: "flex",
+      aspectRatio: `${w} / ${h}`,
+      width: "100%",
+      height: "auto",
+      marginLeft: "auto",
+      marginRight: "auto",
+      padding: 0,
+      maxWidth: w,
+      boxSizing: "border-box",
+      ...style
+    },
+    className,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
+      ref: containerRef,
+      style: {
+        flex: "1 1 100%",
+        overflow: "hidden"
+      },
+      children: measures && /* @__PURE__ */(0, _jsxRuntime.jsx)(_diagram.Diagram, {
+        ref,
+        width: Math.floor(measures.width),
+        height: Math.floor(measures.height),
+        diagram,
+        className: diagramClassName,
+        animate,
+        ...props
+      })
+    })
+  });
+});
+exports.ResponsiveDiagram = ResponsiveDiagram;
+ResponsiveDiagram.displayName = "ResponsiveDiagram";

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

@@ -0,0 +1 @@
+"use strict";