@likec4/diagram 1.21.0 → 1.21.1

package/dist/base/BaseXYFlow.js

@@ -38,7 +38,6 @@ const BaseXYFlow = ({
       nodes,
       edges,
       className: clsx(
-        "likec4-diagram",
         cssReactFlow,
         pannable !== true && cssDisablePan,
         background === "transparent" && cssTransparentBg,

package/dist/base/primitives/compound/CompoundNodeContainer.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { createPolymorphicComponent, Box } from "@mantine/core";
-import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
 import { isNumber, clamp } from "remeda";
-import { indicator, compoundBg, compoundBorder, varCompoundOpacity, container, varBorderTransparency } from "./CompoundNodeContainer.css.js";
+import { indicator, compoundBg, compoundBorder, varBorderTransparency, varCompoundOpacity, container } from "./CompoundNodeContainer.css.js";
 const CompoundNodeContainer = createPolymorphicComponent(
   forwardRef(({
     nodeProps: {

package/dist/base/primitives/edge/EdgeLabel.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isStepEdgeId, extractStep } from "@likec4/core";
 import { createPolymorphicComponent, Box, Text } from "@mantine/core";
-import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { EdgeLabelRenderer } from "@xyflow/react";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { isTruthy, isNumber } from "remeda";
 import { useIsZoomTooSmall } from "../../../hooks/useXYFlow.js";
 import { ZIndexes } from "../../const.js";
-import { edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, edgeVars, edgeLabelContainer, dimmed, varTranslate } from "./EdgeLabel.css.js";
+import { edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, varTranslate, edgeVars, edgeLabelContainer, dimmed } from "./EdgeLabel.css.js";
 const toCssVarValue = (value) => {
   if (value === void 0) return void 0;
   return isNumber(value) ? `${value}px` : value;

package/dist/base/primitives/element/ElementNodeContainer.d.ts

@@ -1,4 +1,4 @@
-import { DiagramNode } from '@likec4/core';
+import { DiagramNode, ElementStyle, ShapeSize, SpacingSize, TextSize } from '@likec4/core';
 import { BoxProps, PolymorphicComponentProps } from '@mantine/core';
 import { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
 import { NodeProps } from '../../types';
@@ -6,6 +6,11 @@ type RequiredData = Pick<DiagramNode, 'color' | 'shape' | 'style'>;
 type ElementNodeContainerProps = BoxProps & PropsWithChildren<{
     nodeProps: NodeProps<RequiredData>;
 }>;
+export declare function nodeSizes({ size, padding, textSize, }: ElementStyle): {
+    size: ShapeSize;
+    padding: SpacingSize;
+    textSize: TextSize;
+};
 export declare const ElementNodeContainer: (<C = "div">(props: PolymorphicComponentProps<C, ElementNodeContainerProps>) => React.ReactElement) & Omit< FunctionComponent<(BoxProps & {
     nodeProps: NodeProps<RequiredData>;
 } & {

package/dist/base/primitives/element/ElementNodeContainer.js

@@ -1,10 +1,33 @@
 import { jsx } from "react/jsx-runtime";
-import { DefaultTextSize, DefaultPaddingSize, DefaultShapeSize } from "@likec4/core";
+import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from "@likec4/core";
 import { createPolymorphicComponent, Box } from "@mantine/core";
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
 import { container } from "./ElementNodeContainer.css.js";
+function nodeSizes({
+  size,
+  padding,
+  textSize
+}) {
+  if (!size && !!textSize) {
+    size = textSize;
+  }
+  if (!textSize && !!size) {
+    textSize = size;
+  }
+  if (!padding && !!size) {
+    padding = size;
+  }
+  size ?? (size = DefaultShapeSize);
+  textSize ?? (textSize = DefaultTextSize);
+  padding ?? (padding = DefaultPaddingSize);
+  return {
+    size,
+    padding,
+    textSize
+  };
+}
 const ElementNodeContainer = createPolymorphicComponent(
   forwardRef(({
     nodeProps: {
@@ -28,17 +51,11 @@ const ElementNodeContainer = createPolymorphicComponent(
         scale = 1.02;
         break;
     }
-    let {
+    const {
       size,
       padding,
       textSize
-    } = data.style;
-    if (!size && !!textSize) {
-      size = textSize;
-    }
-    if (!textSize && !!size) {
-      textSize = size;
-    }
+    } = nodeSizes(data.style);
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -58,9 +75,9 @@ const ElementNodeContainer = createPolymorphicComponent(
         "data-hovered": isHovered,
         "data-likec4-color": data.color,
         "data-likec4-shape": data.shape,
-        "data-likec4-shape-size": size ?? DefaultShapeSize,
-        "data-likec4-padding": padding ?? DefaultPaddingSize,
-        "data-likec4-text-size": textSize ?? DefaultTextSize,
+        "data-likec4-shape-size": size,
+        "data-likec4-padding": padding,
+        "data-likec4-text-size": textSize,
         "data-likec4-dimmed": isDimmed,
         ...rest,
         children
@@ -70,5 +87,6 @@ const ElementNodeContainer = createPolymorphicComponent(
 );
 ElementNodeContainer.displayName = "ElementNodeContainer";
 export {
-  ElementNodeContainer
+  ElementNodeContainer,
+  nodeSizes
 };

package/dist/base/primitives/element/ElementTitle.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import "@likec4/core";
 import { Box, Text } from "@mantine/core";
-import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import clsx from "clsx";
 import { isNumber, isTruthy } from "remeda";
 import { IconRenderer } from "../../../context/IconRenderer.js";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
+import { nodeSizes } from "./ElementNodeContainer.js";
 import { elementIcon, title, technology, description, elementTextData, elementDataContainer, hasIcon } from "./ElementTitle.css.js";
 import { iconSize } from "./styles.css.js";
 function ElementTitle({ id, data, iconSize: iconSize$1 }) {
@@ -17,6 +18,9 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
     },
     className: elementIcon
   });
+  const size = nodeSizes(data.style).size;
+  const isSm = size === "sm";
+  const isSmOrXs = isSm || size === "xs";
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -38,7 +42,7 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
             {
               component: "h3",
               className: clsx(title, "likec4-element-title"),
-              lineClamp: 3,
+              lineClamp: isSmOrXs ? 2 : 3,
               children: data.title
             }
           ),
@@ -55,7 +59,7 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
             {
               component: "div",
               className: clsx(description, "likec4-element-description"),
-              lineClamp: 5,
+              lineClamp: isSmOrXs ? 3 : 5,
               children: data.description
             }
           )

package/dist/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export { useCurrentViewId } from './useCurrentViewId';
-export type { DiagramContext } from './useDiagramContext';
 export { useMantinePortalProps } from './useMantinePortalProps';
 export { useSetState } from './useSetState';
 export { useUpdateEffect } from './useUpdateEffect';

package/dist/index.d.ts

@@ -7,6 +7,6 @@ export { LikeC4ModelProvider } from './LikeC4ModelProvider';
 export { useSetState } from './hooks/useSetState';
 export { useUpdateEffect } from './hooks/useUpdateEffect';
 export { vars, xyvars } from './theme-vars';
-export type * from './LikeC4Diagram.props';
+export type { ChangeEvent, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, WhereOperator, } from './LikeC4Diagram.props';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram';

package/dist/likec4diagram/DiagramUI.js

@@ -1,12 +1,11 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import "react";
 import { LikeC4Search } from "../LikeC4Search.js";
 import { Overlays } from "../overlays/Overlays.js";
-import { DynamicViewWalkthrough } from "./ui/walkthrough/DynamicViewWalkthrough.js";
 import { Controls } from "./ui/controls/Controls.js";
 import { IfEnabled } from "../context/DiagramFeatures.js";
 import { DiagramTitlePanel } from "./ui/diagram-title/DiagramTitlePanel.js";
 import { NotationPanel } from "./ui/notation/NotationPanel.js";
+import { DynamicViewWalkthrough } from "./ui/walkthrough/DynamicViewWalkthrough.js";
 function DiagramUI() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -92,6 +92,7 @@ function RelationshipsDropdownMenu({
       closeOnItemClick: false,
       disabled,
       position: "bottom-start",
+      middlewares: { size: { padding: 8 } },
       ...portalProps,
       children: [
         /* @__PURE__ */ jsx(MenuTarget, { children }),

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -11,16 +11,17 @@ const selector = (s) => ({
   id: s.view.id,
   title: s.view.title ?? "untitled",
   description: s.view.description,
-  links: s.view.links
+  links: s.view.links,
+  isNotActiveWalkthrough: s.activeWalkthrough === null
 });
 function DiagramTitlePanel() {
-  const { id, title: title$1, description: description$1, links } = useDiagramContext(selector);
+  const { id, title: title$1, description: description$1, links, isNotActiveWalkthrough } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-webview-collapsed",
     defaultValue: false
   });
   const toggle = () => setCollapsed((v) => !v);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
     m.div,
     {
       initial: { opacity: 0.05, scale: 0.7 },

package/dist/likec4diagram/ui/index.d.ts

@@ -1,2 +1,4 @@
 export { Controls } from './controls/Controls';
 export { DiagramTitlePanel } from './diagram-title/DiagramTitlePanel';
+export { NotationPanel } from './notation/NotationPanel';
+export { DynamicViewWalkthrough } from './walkthrough/DynamicViewWalkthrough';

package/dist/overlays/Overlays.js

@@ -64,7 +64,7 @@ const Overlays = memo(() => {
     rectFromNode
   } = useDiagramActorState(selector, equals);
   const isMotionReduced = useReducedMotion() ?? false;
-  const isActiveOverlay = !!activeElementDetailsOf;
+  const isActiveOverlay = !!activeElementDetailsOf || !!relationshipsBrowserActor || !!relationshipDetailsActor;
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return;
     animate(xyflowRendererDom, {

package/dist/overlays/element-details/TabPanelDeployments.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from "@mantine/core";
 import { IconInfoCircle, IconTarget, IconZoomScan } from "@tabler/icons-react";
 import { memo, useMemo, useEffect } from "react";
-import { useCurrentViewId } from "../../hooks/useCurrentViewId.js";
+import { useDiagram } from "../../hooks/useDiagram.js";
 import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
 import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from "./TabPanelDeployments.css.js";
 import { stopPropagation } from "../../utils/xyflow.js";
@@ -18,7 +18,8 @@ const DeploymentNodeRenderer = ({
 const DeployedInstanceRenderer = ({
   instance
 }) => {
-  const currentViewId = useCurrentViewId();
+  const diagram = useDiagram();
+  const currentViewId = diagram.currentView().id;
   const views = [...instance.views()];
   return /* @__PURE__ */ jsxs(Group, { className: instanceLabel, gap: 4, children: [
     /* @__PURE__ */ jsx(ThemeIcon, { color: "gray", variant: "transparent", size: "xs", flex: 0, children: /* @__PURE__ */ jsx(IconTarget, { stroke: 1.2 }) }),
@@ -56,6 +57,7 @@ const DeployedInstanceRenderer = ({
                 },
                 onClick: (e) => {
                   e.stopPropagation();
+                  diagram.navigateTo(view.id);
                 },
                 children: view.title
               },