@likec4/diagram 1.26.2 → 1.27.0

package/dist/likec4diagram/ui/search/_shared.css.js

@@ -0,0 +1,171 @@
+import { css, sva } from '@likec4/styles/css';
+
+const buttonFocused = css.raw({
+  outline: "none",
+  background: "mantine.colors.primary[8]",
+  borderColor: "mantine.colors.primary[9]"
+});
+const _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
+function colors(color, hover) {
+  return {
+    color,
+    _groupHover: {
+      color: hover
+    },
+    _groupFocus: {
+      color: hover
+    },
+    [_treenodefocus]: {
+      color: hover
+    }
+  };
+}
+const button = css.raw({
+  display: "flex",
+  width: "100%",
+  background: "mantine.colors.body",
+  rounded: "sm",
+  padding: `12px 8px 12px 14px`,
+  minHeight: "60px",
+  gap: "8",
+  // alignItems: 'flex-start',
+  // transition: `all 50ms ${easings.inOut}`,
+  border: `1px solid`,
+  borderColor: "mantine.colors.defaultBorder",
+  // [titleColor]: '{colors.mantine.colors.dark[1]}',
+  // [iconColor]: '{colors.mantine.colors.dimmed}',
+  // [descriptionColor]: '{colors.mantine.colors.dimmed}',
+  _hover: {
+    ...buttonFocused,
+    borderColor: "mantine.colors.primary[9]",
+    background: `mantine.colors.primary[8]/60`
+  },
+  _focus: buttonFocused,
+  [_treenodefocus]: buttonFocused,
+  _dark: {
+    borderColor: "transparent",
+    background: `mantine.colors.dark[6]/80`
+    // background: 'mantine.colors.dark[6]',
+  },
+  _light: {
+    background: `mantine.colors.white/80`,
+    // [iconColor]: '{colors.mantine.colors.gray[6]}',
+    // [titleColor]: '{colors.mantine.colors.gray[7]}',
+    _hover: {
+      borderColor: "mantine.colors.primary[6]",
+      backgroundColor: "mantine.colors.primary[5]"
+      // [iconColor]: '{colors.mantine.colors.primary[3])',
+      // [titleColor]: '{colors.mantine.colors.primary[0])',
+      // [descriptionColor]: '{colors.mantine.colors.primary[1]}',
+    }
+  }
+});
+const focusable = "likec4-focusable";
+const iconSize = {
+  ref: "var(--likec4-icon-size, 24px)"
+};
+const icon = css.raw({
+  ...colors("mantine.colors.dimmed", "mantine.colors.primary[0]"),
+  _light: {
+    ...colors("mantine.colors.gray[6]", "mantine.colors.primary[3]")
+  },
+  flex: `0 0 ${iconSize.ref}`,
+  height: iconSize.ref,
+  width: iconSize.ref,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  alignSelf: "flex-start",
+  ["--ti-size"]: iconSize.ref,
+  [`& svg, & img`]: {
+    width: "100%",
+    height: "auto",
+    maxHeight: "100%",
+    pointerEvents: "none"
+  },
+  [`& img`]: {
+    objectFit: "contain"
+  },
+  "&.likec4-shape-icon svg": {
+    // color: `[var(${iconColor})]`,
+    strokeWidth: 1.5
+  }
+  // [iconSize]: '24px',
+  // [whenContainerIsNarrow]: {
+  //   [iconSize]: '18px',
+  // },
+});
+const title = css.raw({
+  fontSize: "16px",
+  fontWeight: 500,
+  lineHeight: "1.1",
+  [`:where([data-disabled]) &`]: {
+    opacity: 0.4
+  },
+  // color: 'mantine.colors.dark[1]',
+  // _groupHover: {
+  //   color: 'mantine.colors.primary[1]',
+  // },
+  // _groupFocus: {
+  //   color: 'mantine.colors.primary[1]',
+  // },
+  ...colors("mantine.colors.dark[1]", "mantine.colors.primary[1]"),
+  _light: {
+    ...colors("mantine.colors.gray[6]", "mantine.colors.primary[3]")
+    // color: `mantine.colors.gray[6]`,
+    // _groupHover: {
+    //   color: 'mantine.colors.primary[3]',
+    // },
+    // _groupFocus: {
+    //   color: 'mantine.colors.primary[3]',
+    // },
+  }
+});
+const descriptionColor = css.raw({
+  color: {
+    base: "mantine.colors.dimmed",
+    _groupHover: {
+      base: "mantine.colors.primary[1]",
+      _light: "mantine.colors.primary[0]"
+    },
+    _groupFocus: "mantine.colors.primary[0]"
+  },
+  [_treenodefocus]: {
+    color: "mantine.colors.primary[0]"
+  }
+});
+const description = css.raw(descriptionColor, {
+  marginTop: "4px",
+  fontSize: "12px",
+  lineHeight: "1.4",
+  [`:where([data-disabled]) &`]: {
+    opacity: 0.85
+  }
+});
+const emptyBoX = css({
+  width: "100%",
+  height: "100%",
+  border: `2px dashed`,
+  borderColor: "mantine.colors.defaultBorder",
+  rounded: "md",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  fontSize: "md",
+  color: "mantine.colors.dimmed",
+  padding: "md",
+  paddingBlock: "xl"
+});
+const buttonsva = sva({
+  slots: ["root", "icon", "title", "description", "descriptionColor"],
+  className: "search-button",
+  base: {
+    root: button,
+    icon,
+    title,
+    description,
+    descriptionColor
+  }
+});
+
+export { buttonsva, emptyBoX, focusable };

package/dist/likec4diagram/ui/search/state.js

@@ -1,10 +1,11 @@
-import { DiagramNode } from "@likec4/core";
-import { createSafeContext } from "@mantine/core";
-import { useCallbackRef } from "@mantine/hooks";
-import { useStore } from "@nanostores/react";
-import { atom, computed, onMount } from "nanostores";
-import { useDeferredValue } from "react";
-import { useDiagram } from "../../../hooks/useDiagram.js";
+import { DiagramNode } from '@likec4/core';
+import { createSafeContext } from '@mantine/core';
+import { useCallbackRef } from '@mantine/hooks';
+import { useStore } from '@nanostores/react';
+import { atom, computed, onMount } from 'nanostores';
+import { useDeferredValue } from 'react';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+
 const $search = atom("");
 function setSearch(term) {
   $search.set(term);
@@ -46,10 +47,9 @@ function useCloseSearchAndNavigateTo() {
   const close = useCloseSearch();
   return useCallbackRef((viewId, fromElementFqn) => {
     close(() => {
-      var _a, _b;
-      fromElementFqn ?? (fromElementFqn = (_a = $pickView.get()) == null ? void 0 : _a.elementFqn);
+      fromElementFqn ??= $pickView.get()?.elementFqn;
       setPickView(null);
-      const fromNode = fromElementFqn ? (_b = diagram.getContext().view.nodes.find((n) => DiagramNode.modelRef(n) === fromElementFqn)) == null ? void 0 : _b.id : void 0;
+      const fromNode = fromElementFqn ? diagram.getContext().view.nodes.find((n) => DiagramNode.modelRef(n) === fromElementFqn)?.id : void 0;
       if (diagram.currentView.id === viewId && fromNode) {
         diagram.focusNode(fromNode);
         return;
@@ -58,15 +58,5 @@ function useCloseSearchAndNavigateTo() {
     });
   });
 }
-export {
-  LikeC4SearchContext,
-  setPickView,
-  setSearch,
-  useCloseSearch,
-  useCloseSearchAndNavigateTo,
-  useIsPickViewActive,
-  useNormalizedSearch,
-  usePickView,
-  useSearch,
-  wasResetPickView
-};
+
+export { LikeC4SearchContext, setPickView, setSearch, useCloseSearch, useCloseSearchAndNavigateTo, useIsPickViewActive, useNormalizedSearch, usePickView, useSearch, wasResetPickView };

package/dist/likec4diagram/ui/search/utils.js

@@ -16,8 +16,5 @@ function moveFocusToSearchInput() {
     input.setSelectionRange(length, length);
   }
 }
-export {
-  centerY,
-  moveFocusToSearchInput,
-  stopAndPrevent
-};
+
+export { centerY, moveFocusToSearchInput, stopAndPrevent };

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.js

@@ -1,11 +1,67 @@
-/* empty css                                          */
-var container = "totqfb0";
-var buttons = "totqfb1";
-var btn = "totqfb3";
-var parallelStateFrame = "totqfb4";
-export {
-  btn,
-  buttons,
-  container,
-  parallelStateFrame
+import { css } from '@likec4/styles/css';
+
+const container = css({
+  position: "absolute",
+  bottom: "0.5rem",
+  left: "50%",
+  transform: "translateX(-50%)",
+  padding: 0,
+  margin: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.4rem",
+  alignItems: "center",
+  md: {
+    gap: "0.6rem"
+  }
+});
+const tablerIcons = {
+  "& .tabler-icon": {
+    width: "0.85em",
+    height: "0.85em"
+  }
 };
+const buttons = css({
+  backdropFilter: "blur(8px)",
+  transition: "all 175ms ease-in",
+  _hover: {
+    transitionTimingFunction: "out",
+    transform: "scale(1.1)"
+  },
+  _active: {
+    transitionDuration: "100ms",
+    transform: "scale(0.98) translateY(3px)"
+  },
+  ...tablerIcons
+});
+const btn = css({
+  transition: "all 175ms ease-in",
+  background: "mantine.colors.primary.filled/65",
+  _hover: {
+    background: "mantine.colors.primary.filledHover/65"
+  },
+  _light: {
+    background: "mantine.colors.primary.filled/85",
+    _hover: {
+      background: "mantine.colors.primary.filledHover/85"
+    }
+  },
+  ...tablerIcons
+});
+const parallelStateFrame = css({
+  position: "absolute",
+  margin: 0,
+  padding: 0,
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  border: `2px solid`,
+  borderColor: "mantine.colors.orange[6]",
+  pointerEvents: "none",
+  md: {
+    borderWidth: 4
+  }
+});
+
+export { btn, buttons, container, parallelStateFrame };

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js

@@ -1,12 +1,13 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Box, Button, Badge, ButtonGroup } from "@mantine/core";
-import { IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from "@tabler/icons-react";
-import clsx from "clsx";
-import { AnimatePresence, m } from "framer-motion";
-import { isTruthy, isNonNull } from "remeda";
-import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
-import { parallelStateFrame, btn, buttons, container } from "./DynamicViewWalkthrough.css.js";
-import { useXYStore } from "../../../hooks/useXYFlow.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Button, Badge, ButtonGroup } from '@mantine/core';
+import { IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from '@tabler/icons-react';
+import clsx from 'clsx';
+import { AnimatePresence, m } from 'framer-motion';
+import { isTruthy, isNonNull } from 'remeda';
+import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
+import { parallelStateFrame, btn, buttons, container } from './DynamicViewWalkthrough.css.js';
+import { useXYStore } from '../../../hooks/useXYFlow.js';
+
 function DynamicViewWalkthrough() {
   const isMobile = useXYStore((s) => s.width <= 750);
   const {
@@ -14,21 +15,12 @@ function DynamicViewWalkthrough() {
     isParallel,
     hasNext,
     hasPrevious
-  } = useDiagramContext((s) => {
-    var _a;
-    return {
-      isActive: isNonNull(s.activeWalkthrough),
-      isParallel: isTruthy((_a = s.activeWalkthrough) == null ? void 0 : _a.parallelPrefix),
-      hasNext: s.xyedges.findIndex((e) => {
-        var _a2;
-        return e.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
-      }) < s.xyedges.length - 1,
-      hasPrevious: s.xyedges.findIndex((e) => {
-        var _a2;
-        return e.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
-      }) > 0
-    };
-  });
+  } = useDiagramContext((s) => ({
+    isActive: isNonNull(s.activeWalkthrough),
+    isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
+    hasNext: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) < s.xyedges.length - 1,
+    hasPrevious: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) > 0
+  }));
   const diagram = useDiagram();
   const buttonProps = {
     className: btn,
@@ -125,6 +117,5 @@ function DynamicViewWalkthrough() {
     )
   ] });
 }
-export {
-  DynamicViewWalkthrough
-};
+
+export { DynamicViewWalkthrough };

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,32 +1,21 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { nonNullable } from "@likec4/core";
-import "@xyflow/react";
-import { getNodeDimensions } from "@xyflow/system";
-import { useRef, useMemo } from "react";
-import { pipe, filter, map, hasAtLeast, isNullish } from "remeda";
-import { useDiagram } from "../hooks/useDiagram.js";
-import { useXYStoreApi } from "../hooks/useXYFlow.js";
+import { nonNullable } from '@likec4/core';
+import '@xyflow/react';
+import { getNodeDimensions } from '@xyflow/system';
+import { useRef, useMemo } from 'react';
+import { pipe, filter, map, hasAtLeast, isNullish } from 'remeda';
+import { useDiagram } from '../hooks/useDiagram.js';
+import { useXYStoreApi } from '../hooks/useXYFlow.js';
+
 class Rect {
-  constructor(xynode, parent = null) {
-    __publicField(this, "id");
-    __publicField(this, "minX", Infinity);
-    __publicField(this, "minY", Infinity);
-    __publicField(this, "maxX", -Infinity);
-    __publicField(this, "maxY", -Infinity);
-    this.id = xynode.id;
-    this.positionAbsolute = !parent ? xynode.position : {
-      x: xynode.position.x + parent.minX,
-      y: xynode.position.y + parent.minY
-    };
-    const { width, height } = getNodeDimensions(xynode);
-    this.maxX = this.minX + Math.ceil(width);
-    this.maxY = this.minY + Math.ceil(height);
-    if (parent) {
-      parent.children.push(this);
-    }
-  }
+  static LeftPadding = 40;
+  static RightPadding = 40;
+  static TopPadding = 55;
+  static BottomPadding = 40;
+  id;
+  minX = Infinity;
+  minY = Infinity;
+  maxX = -Infinity;
+  maxY = -Infinity;
   get positionAbsolute() {
     return {
       x: this.minX,
@@ -59,17 +48,26 @@ class Rect {
       y: positionAbsolute.y - parentPosition.y
     };
   }
+  constructor(xynode, parent = null) {
+    this.id = xynode.id;
+    this.positionAbsolute = !parent ? xynode.position : {
+      x: xynode.position.x + parent.minX,
+      y: xynode.position.y + parent.minY
+    };
+    const { width, height } = getNodeDimensions(xynode);
+    this.maxX = this.minX + Math.ceil(width);
+    this.maxY = this.minY + Math.ceil(height);
+    if (parent) {
+      parent.children.push(this);
+    }
+  }
 }
-__publicField(Rect, "LeftPadding", 40);
-__publicField(Rect, "RightPadding", 40);
-__publicField(Rect, "TopPadding", 55);
-__publicField(Rect, "BottomPadding", 40);
 class Compound extends Rect {
   constructor(xynode, parent = null) {
     super(xynode, parent);
-    __publicField(this, "children", []);
     this.parent = parent;
   }
+  children = [];
 }
 class Leaf extends Rect {
   constructor(xynode, parent = null) {
@@ -78,13 +76,12 @@ class Leaf extends Rect {
   }
 }
 function createLayoutConstraints(xyflowApi, editingNodeIds) {
-  var _a;
   const { parentLookup, nodeLookup } = xyflowApi.getState();
   const rects = /* @__PURE__ */ new Map();
   const ancestorsOf = (nodeId) => {
     const ancestors = [];
     const xynode = nodeLookup.get(nodeId);
-    let parent = xynode == null ? void 0 : xynode.parentId;
+    let parent = xynode?.parentId;
     let parentNode;
     while (parent && (parentNode = nodeLookup.get(parent))) {
       ancestors.push(parentNode.id);
@@ -111,7 +108,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent);
     rects.set(xynode.id, rect);
     if (shouldTraverse) {
-      (_a = parentLookup.get(xynode.id)) == null ? void 0 : _a.forEach((child) => {
+      parentLookup.get(xynode.id)?.forEach((child) => {
         traverse.push({
           xynode: child,
           parent: rect
@@ -169,7 +166,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     if (rectsToUpdate.length === 0) {
       return;
     }
-    animationFrameId ?? (animationFrameId = requestAnimationFrame(() => {
+    animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null;
       updater(
         pipe(
@@ -182,7 +179,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
         )
       );
       updateXYFlowNodes();
-    }));
+    });
   }
   return {
     updateXYFlowNodes,
@@ -208,22 +205,18 @@ function useLayoutConstraints() {
       }
     },
     onNodeDrag: () => {
-      var _a;
-      (_a = solverRef.current) == null ? void 0 : _a.onMove((nodes) => {
+      solverRef.current?.onMove((nodes) => {
         nodes.forEach(({ rect, node }) => {
           rect.positionAbsolute = node.internals.positionAbsolute;
         });
       });
     },
     onNodeDragStop: () => {
-      var _a;
-      (_a = solverRef.current) == null ? void 0 : _a.updateXYFlowNodes();
+      solverRef.current?.updateXYFlowNodes();
       diagram.scheduleSaveManualLayout();
       solverRef.current = void 0;
     }
   }), [xystore, diagram]);
 }
-export {
-  createLayoutConstraints,
-  useLayoutConstraints
-};
+
+export { createLayoutConstraints, useLayoutConstraints };

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -1,15 +1,14 @@
-import { Queue, whereOperatorAsPredicate, nonNullable, ElementKind, DiagramNode, invariant } from "@likec4/core";
-import { useDeepCompareMemo } from "@react-hookz/web";
-import { pick, hasAtLeast } from "remeda";
-import { ZIndexes } from "../base/const.js";
+import { Queue, whereOperatorAsPredicate, nonNullable, ElementKind, DiagramNode, invariant } from '@likec4/core';
+import { useDeepCompareMemo } from '@react-hookz/web';
+import { pick, hasAtLeast } from 'remeda';
+import { ZIndexes } from '../base/const.js';
+
 function viewToNodesEdge(opts) {
-  var _a;
   const {
     view,
     nodesSelectable: selectable
   } = opts;
-  view.__ === "dynamic";
-  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
+  view.__ === "dynamic"; const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
   const queue = Queue.from(view.nodes.reduce(
     (acc, node) => {
       nodeLookup.set(node.id, node);
@@ -56,7 +55,7 @@ function viewToNodesEdge(opts) {
     const base = {
       id,
       selectable: selectable && node.kind !== ElementKind.Group,
-      focusable: selectable && !isCompound,
+      focusable: selectable && node.kind !== ElementKind.Group,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -94,7 +93,7 @@ function viewToNodesEdge(opts) {
       style: node.style,
       icon: node.icon ?? null,
       position: node.position,
-      isMultiple: ((_a = node.style) == null ? void 0 : _a.multiple) ?? false
+      isMultiple: node.style?.multiple ?? false
     };
     if (node.kind === ElementKind.Group) {
       xynodes.push({
@@ -126,7 +125,8 @@ function viewToNodesEdge(opts) {
               ...navigateTo,
               deploymentFqn,
               modelFqn
-            }
+            },
+            dragHandle: ".likec4-compound-title"
           }
         );
         break;
@@ -240,6 +240,5 @@ function useViewToNodesEdges({
     });
   }, [id, __, nodes, edges, opts]);
 }
-export {
-  useViewToNodesEdges
-};
+
+export { useViewToNodesEdges };

package/dist/likec4model/LikeC4ModelContext.js

@@ -1,5 +1,5 @@
-import { createContext } from "react";
+import { createContext } from 'react';
+
 const LikeC4ModelContext = createContext(null);
-export {
-  LikeC4ModelContext
-};
+
+export { LikeC4ModelContext };

package/dist/likec4model/useLikeC4ElementsTree.js

@@ -1,6 +1,7 @@
-import { compareNatural } from "@likec4/core";
-import { useMemo } from "react";
-import { useLikeC4Model } from "./useLikeC4Model.js";
+import { compareNatural } from '@likec4/core';
+import { useMemo } from 'react';
+import { useLikeC4Model } from './useLikeC4Model.js';
+
 const sortByLabel = (a, b) => compareNatural(a.label, b.label);
 function buildNode(element) {
   return {
@@ -20,7 +21,5 @@ function useLikeC4ElementsTree(viewId) {
     }
   }, [model, viewId ?? null]);
 }
-export {
-  sortByLabel,
-  useLikeC4ElementsTree
-};
+
+export { sortByLabel, useLikeC4ElementsTree };

package/dist/likec4model/useLikeC4Model.js

@@ -1,6 +1,7 @@
-import { useContext } from "react";
-import { isString, isNonNullish, isDefined } from "remeda";
-import { LikeC4ModelContext } from "./LikeC4ModelContext.js";
+import { useContext } from 'react';
+import { isString, isNonNullish, isDefined } from 'remeda';
+import { LikeC4ModelContext } from './LikeC4ModelContext.js';
+
 function useLikeC4Model(strict, type) {
   const model = useContext(LikeC4ModelContext);
   if (isString(type) && isNonNullish(model) && model.type !== type) {
@@ -11,6 +12,5 @@ function useLikeC4Model(strict, type) {
   }
   return model;
 }
-export {
-  useLikeC4Model
-};
+
+export { useLikeC4Model };