@likec4/diagram 1.24.0 → 1.24.1

package/dist/hooks/useDiagram.js

@@ -9,6 +9,7 @@ function useDiagram() {
   const actor = useDiagramActorRef();
   const [, startTransition] = useTransition();
   return useMemo(() => ({
+    actor,
     send: actor.send,
     navigateTo: (viewId, fromNode) => {
       startTransition(() => {

package/dist/hooks/useIsReducedGraphics.d.ts

@@ -0,0 +1,4 @@
+export declare const ReducedGraphicsContext: ({ children, value }: {
+    value: boolean;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useIsReducedGraphics: () => boolean;

package/dist/hooks/useIsReducedGraphics.js

@@ -0,0 +1,8 @@
+import { createSafeContext } from "@mantine/core";
+const [ReducedGraphicsContext, useIsReducedGraphics] = createSafeContext(
+  "ReducedGraphicsContext is not provided"
+);
+export {
+  ReducedGraphicsContext,
+  useIsReducedGraphics
+};

package/dist/hooks/useXYFlow.js

@@ -10,7 +10,7 @@ function useXYStore(selector, equalityFn) {
 }
 const useXYStoreApi = useStoreApi;
 const useXYInternalNode = useInternalNode;
-const selectZoom = (state) => state.transform[2] < 0.2;
+const selectZoom = (state) => state.transform[2] < 0.25;
 function useIsZoomTooSmall() {
   return useStore(selectZoom);
 }

package/dist/likec4diagram/DiagramUI.d.ts

@@ -1 +1,2 @@
-export declare function DiagramUI(): import("react/jsx-runtime").JSX.Element;
+import { MemoExoticComponent } from 'react';
+export declare const DiagramUI: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/likec4diagram/DiagramUI.js

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { useDiagramActorSnapshot } from "../hooks/useDiagram.js";
 import { Overlays } from "../overlays/Overlays.js";
 import { useEnabledFeatures } from "../context/DiagramFeatures.js";
@@ -6,13 +7,13 @@ import { Controls } from "./ui/controls/Controls.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() {
+const DiagramUI = memo(() => {
   const {
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough
   } = useEnabledFeatures();
-  const overlaysActorRef = useDiagramActorSnapshot((s) => s.children.overlays);
+  const overlaysActorRef = useDiagramActorSnapshot((s) => s.children.overlays, Object.is);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
@@ -20,7 +21,8 @@ function DiagramUI() {
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
     enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {})
   ] });
-}
+});
+DiagramUI.displayName = "DiagramUI";
 export {
   DiagramUI
 };

package/dist/likec4diagram/custom/nodes/nodeTypes.js

@@ -32,7 +32,7 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
 };
 const nodeTypes = {
   element: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple }),
+    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
     /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(
@@ -46,7 +46,7 @@ const nodeTypes = {
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] })),
   deployment: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple }),
+    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
     /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
     !!props.data.modelFqn && /* @__PURE__ */ jsx(

package/dist/likec4diagram/ui/controls/styles.css.js

@@ -1,3 +1,5 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                          */
 var navigationButtons = "o1xx0f0";
 var panel = "o1xx0f1";

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

@@ -1,3 +1,5 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                                     */
 var container = "_1wkb4qe0";
 var card = "_1wkb4qe1";

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

@@ -115,8 +115,8 @@ function DiagramTitlePanel() {
                 Spoiler,
                 {
                   maxHeight: 42,
-                  showLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "show more" }),
-                  hideLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "hide" }),
+                  showLabel: /* @__PURE__ */ jsx(Button, { component: "div", color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "show more" }),
+                  hideLabel: /* @__PURE__ */ jsx(Button, { component: "div", color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "hide" }),
                   children: /* @__PURE__ */ jsx(
                     Text,
                     {
@@ -151,8 +151,7 @@ function DiagramTitlePanel() {
           ]
         }
       )
-    },
-    id
+    }
   ) });
 }
 export {

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

@@ -1,3 +1,5 @@
+/* empty css                                  */
+/* empty css                                        */
 /* empty css                           */
 /* empty css                                */
 var focusable = "_1cfw8gr4";

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

@@ -1,21 +1,23 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { isScopedElementView, isDeploymentView } from "@likec4/core";
-import { Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from "@mantine/core";
+import { RemoveScroll, Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from "@mantine/core";
 import { useViewportSize, useSessionStorage } from "@mantine/hooks";
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
 import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from "@tabler/icons-react";
+import clsx from "clsx";
 import { useDragControls, useMotionValue, m } from "framer-motion";
 import { useState, useCallback, useRef } from "react";
 import { pipe, map, partition, only, clamp, isNullish } from "remeda";
 import { Link } from "../../components/Link.js";
 import { useDiagram } from "../../hooks/useDiagram.js";
-import { dialog, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, elementIcon, propertyLabel, viewButton, viewButtonTitle } from "./ElementDetailsCard.css.js";
+import { card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, dialog, elementIcon, propertyLabel, viewButton, viewButtonTitle } from "./ElementDetailsCard.css.js";
 import { TabPanelDeployments } from "./TabPanelDeployments.js";
 import { TabPanelRelationships } from "./TabPanelRelationships.js";
 import { TabPanelStructure } from "./TabPanelStructure.js";
 import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
 import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
 import { IconRenderer } from "../../context/IconRenderer.js";
+import { stopPropagation } from "../../utils/xyflow.js";
 import { IfEnabled, DiagramFeatures } from "../../context/DiagramFeatures.js";
 const Divider = Divider$1.withProps({
   mb: 8,
@@ -144,15 +146,15 @@ function ElementDetailsCard({
     if (!((_a2 = ref.current) == null ? void 0 : _a2.open)) {
       (_b2 = ref.current) == null ? void 0 : _b2.showModal();
     }
-  }, 30);
+  }, 20);
   useTimeoutEffect(() => {
     setOpened(true);
-  }, 120);
+  }, 150);
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
       ref,
-      className: dialog,
+      className: clsx(dialog, RemoveScroll.classNames.fullWidth),
       layout: true,
       layoutRoot: true,
       initial: {
@@ -172,16 +174,18 @@ function ElementDetailsCard({
       },
       onClick: (e) => {
         var _a2, _b2, _c2;
+        e.stopPropagation();
         if (((_b2 = (_a2 = e.target) == null ? void 0 : _a2.nodeName) == null ? void 0 : _b2.toUpperCase()) === "DIALOG") {
-          e.stopPropagation();
           (_c2 = ref.current) == null ? void 0 : _c2.close();
         }
       },
+      onDoubleClick: stopPropagation,
+      onPointerDown: stopPropagation,
       onClose: (e) => {
         e.stopPropagation();
         close();
       },
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsxs(
         Card,
         {
           drag: true,
@@ -401,7 +405,7 @@ function ElementDetailsCard({
             )
           ]
         }
-      )
+      ) })
     }
   );
 }