@likec4/diagram 1.19.1 → 1.20.0

package/dist/state/diagramStore.layout.d.ts

@@ -1,4 +0,0 @@
-import { DiagramState } from '../hooks';
-import { GridAlignmentMode, LinearAlignmentMode } from './aligners';
-export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode;
-export declare function align(get: () => DiagramState): (mode: AlignmentMode) => void;

package/dist/state/diagramStore.layout.js

@@ -1,56 +0,0 @@
-import { nonexhaustive } from "@likec4/core";
-import { getNodeDimensions } from "@xyflow/system";
-import { hasAtLeast } from "remeda";
-import { createLayoutConstraints } from "../xyflow/useLayoutConstraints.js";
-import { GridAligner, getLinearAligner } from "./aligners.js";
-function align(get) {
-  return (mode) => {
-    const { scheduleSaveManualLayout, xystore } = get();
-    const { nodeLookup, parentLookup } = xystore.getState();
-    const selectedNodes = new Set(nodeLookup.values().filter((n) => n.selected).map((n) => n.id));
-    const nodesToAlign = [...selectedNodes.difference(new Set(parentLookup.keys()))];
-    if (!hasAtLeast(nodesToAlign, 2)) {
-      console.warn("At least 2 nodes must be selected to align");
-      return;
-    }
-    const constraints = createLayoutConstraints(xystore, nodesToAlign);
-    const aligner = getAligner(mode);
-    constraints.onMove((nodes) => {
-      aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)));
-      nodes.forEach(({ rect, node }) => {
-        rect.positionAbsolute = {
-          ...rect.positionAbsolute,
-          ...aligner.applyPosition(toNodeRect(node))
-        };
-      });
-    });
-    scheduleSaveManualLayout();
-  };
-}
-function toNodeRect(node) {
-  return {
-    ...node.internals.positionAbsolute,
-    id: node.id,
-    width: getNodeDimensions(node).width,
-    height: getNodeDimensions(node).height
-  };
-}
-function getAligner(mode) {
-  switch (mode) {
-    case "Left":
-    case "Right":
-    case "Top":
-    case "Bottom":
-    case "Center":
-    case "Middle":
-      return getLinearAligner(mode);
-    case "Column":
-    case "Row":
-      return new GridAligner(mode);
-    default:
-      nonexhaustive(mode);
-  }
-}
-export {
-  align
-};

package/dist/ui/DiagramTitlePanel.css.js

@@ -1,11 +0,0 @@
-/* empty css                                     */
-var container = "hbkbtj0";
-var card = "hbkbtj1";
-var title = "hbkbtj2";
-var description = "hbkbtj3";
-export {
-  card,
-  container,
-  description,
-  title
-};

package/dist/ui/DiagramTitlePanel.d.ts

@@ -1 +0,0 @@
-export default function DiagramTitlePanel(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/notation/NotationPanel.css.js

@@ -1,16 +0,0 @@
-/* empty css                                                    */
-/* empty css                                 */
-var container = "_1ncdyfa0";
-var card = "_1ncdyfa1";
-var tabPanel = "_1ncdyfa2";
-var elementNotation = "_1ncdyfa3";
-var shapeSvg = "_1ncdyfa4";
-var shapeBadge = "_1ncdyfa5";
-export {
-  card,
-  container,
-  elementNotation,
-  shapeBadge,
-  shapeSvg,
-  tabPanel
-};

package/dist/ui/notation/NotationPanel.d.ts

@@ -1 +0,0 @@
-export declare function NotationPanel(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/top-left/TopLeftPanel.d.ts

@@ -1,4 +0,0 @@
-export declare const TopLeftPanel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/dist/ui/top-left/TopLeftPanel.js

@@ -1,211 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { TooltipGroup, Stack, ActionIconGroup, Group, HoverCard, HoverCardTarget, Overlay, HoverCardDropdown, Notification, Text, Code } from "@mantine/core";
-import { openSpotlight } from "@mantine/spotlight";
-import { IconSearch, IconFileSymlink, IconFocusCentered, IconMenu2, IconChevronLeft, IconChevronRight, IconAlertTriangle } from "@tabler/icons-react";
-import clsx from "clsx";
-import { LayoutGroup, AnimatePresence, m } from "framer-motion";
-import { isNullish } from "remeda";
-import { useDiagramStoreApi, useDiagramState } from "../../hooks/useDiagramState.js";
-import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
-import { mantine } from "../../theme-vars.js";
-import { Tooltip, ActionIcon } from "./_shared.js";
-import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
-import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
-import { panel, actionIconGroup, backwardForwardButtons } from "./styles.css.js";
-const historySelector = (s) => ({
-  showBurgerMenu: !!s.onBurgerMenuClick,
-  hasStepBack: s.showNavigationButtons && !!s.onNavigateTo && s.navigationHistoryIndex > 0,
-  hasStepForward: s.showNavigationButtons && !!s.onNavigateTo && s.navigationHistoryIndex < s.navigationHistory.length - 1
-});
-const BackwardForwardButtons = () => {
-  const store = useDiagramStoreApi();
-  const {
-    showBurgerMenu,
-    hasStepBack,
-    hasStepForward
-  } = useDiagramState(historySelector);
-  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
-    Group,
-    {
-      className: clsx(backwardForwardButtons, "likec4-navigation-webview"),
-      align: "flex-start",
-      gap: "xs",
-      children: [
-        showBurgerMenu && /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            onClick: (e) => {
-              var _a, _b;
-              e.stopPropagation();
-              (_b = (_a = store.getState()).onBurgerMenuClick) == null ? void 0 : _b.call(_a);
-            },
-            children: /* @__PURE__ */ jsx(IconMenu2, {})
-          }
-        ),
-        /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-          hasStepBack && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              layout: true,
-              initial: { opacity: 0.05, transform: "translateX(-10px)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0.05,
-                transform: "translateX(-10px)"
-              },
-              children: /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    store.getState().goBack();
-                  },
-                  children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-                }
-              )
-            },
-            "back"
-          ),
-          hasStepForward && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              layout: true,
-              initial: { opacity: 0.05, transform: "translateX(10px)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0,
-                transform: "translateX(10px)"
-              },
-              children: /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    store.getState().goForward();
-                  },
-                  children: /* @__PURE__ */ jsx(IconChevronRight, {})
-                }
-              )
-            },
-            "forward"
-          )
-        ] })
-      ]
-    }
-  ) });
-};
-const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
-  HoverCard,
-  {
-    position: "right-start",
-    openDelay: 200,
-    closeDelay: 100,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsxs(ActionIcon, { c: "orange", children: [
-        /* @__PURE__ */ jsx(Overlay, { color: mantine.colors.orange.lightHover, backgroundOpacity: 1 }),
-        /* @__PURE__ */ jsx(IconAlertTriangle, {})
-      ] }) }),
-      /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
-        Notification,
-        {
-          color: "orange",
-          withBorder: false,
-          withCloseButton: false,
-          title: "Manual layout issues",
-          children: [
-            /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
-              "View contains new elements or their sizes have changed,",
-              /* @__PURE__ */ jsx("br", {}),
-              "last manual layout can not be applied."
-            ] }),
-            /* @__PURE__ */ jsxs(Text, { mt: "xs", size: "sm", lh: "xs", children: [
-              "Update view predicates or remove ",
-              /* @__PURE__ */ jsx(Code, { children: "@likec4-generated" })
-            ] })
-          ]
-        }
-      ) })
-    ]
-  }
-);
-const TopLeftPanel = () => {
-  const store = useDiagramStoreApi();
-  const {
-    enableSearch,
-    showNavigationButtons,
-    showFitDiagram,
-    showLayoutDriftWarning,
-    showChangeAutoLayout,
-    showGoToSource,
-    viewportChanged,
-    showManualLayoutTools
-  } = useDiagramState((s) => {
-    const isNotWalkthrough = isNullish(s.activeWalkthrough);
-    const isNotFocused = isNullish(s.focusedNodeId);
-    const isNotActive = isNotWalkthrough && isNotFocused;
-    return {
-      enableSearch: s.enableSearch,
-      showNavigationButtons: !!s.onBurgerMenuClick || s.showNavigationButtons && !!s.onNavigateTo,
-      showFitDiagram: s.controls && s.fitViewEnabled && s.zoomable && isNotWalkthrough,
-      showLayoutDriftWarning: s.controls && !s.readonly && s.view.hasLayoutDrift === true && isNotActive,
-      showChangeAutoLayout: s.controls && s.isEditable() && isNotActive,
-      showGoToSource: s.controls && !!s.onOpenSource && isNotWalkthrough,
-      viewportChanged: s.viewportChanged,
-      showManualLayoutTools: s.controls && s.readonly !== true && s.experimentalEdgeEditing === true
-    };
-  });
-  const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsx(TooltipGroup, { openDelay: 600, closeDelay: 150, children: /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      className: clsx(
-        "react-flow__panel",
-        panel,
-        "likec4-top-left-panel"
-      ),
-      align: "flex-start",
-      onClick: (e) => e.stopPropagation(),
-      gap: "xs",
-      children: [
-        showNavigationButtons && /* @__PURE__ */ jsx(BackwardForwardButtons, {}),
-        /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
-          enableSearch && /* @__PURE__ */ jsx(Tooltip, { label: "Search (Ctrl+F or ⌘+F)", children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              onClick: () => openSpotlight(),
-              children: /* @__PURE__ */ jsx(IconSearch, {})
-            }
-          ) }),
-          showGoToSource && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                store.getState().onOpenSourceView();
-              },
-              children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
-            }
-          ) }),
-          showChangeAutoLayout && /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
-          showLayoutDriftWarning && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
-          showManualLayoutTools && /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps }),
-          showFitDiagram && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                store.getState().fitDiagram();
-              },
-              children: /* @__PURE__ */ jsx(IconFocusCentered, {})
-            }
-          ) })
-        ] })
-      ]
-    }
-  ) });
-};
-TopLeftPanel.displayName = "TopLeftPanel";
-export {
-  TopLeftPanel
-};

package/dist/ui/top-left/styles.css.js

@@ -1,17 +0,0 @@
-/* empty css                          */
-var backwardForwardButtons = "_1snasyb0";
-var panel = "_1snasyb1";
-var actionIconGroup = "_1snasyb2";
-var autolayoutButton = "_1snasyb4";
-var autolayoutIndicator = "_1snasyb5";
-var spacingSliderBody = "_1snasyb6";
-var spacingSliderThumb = "_1snasyb7";
-export {
-  actionIconGroup,
-  autolayoutButton,
-  autolayoutIndicator,
-  backwardForwardButtons,
-  panel,
-  spacingSliderBody,
-  spacingSliderThumb
-};

package/dist/xyflow/FitviewOnDiagramChange.d.ts

@@ -1,4 +0,0 @@
-/**
- * Fits the view when diagram changes
- */
-export declare function FitViewOnDiagramChange(): import("react/jsx-runtime").JSX.Element | null;

package/dist/xyflow/FitviewOnDiagramChange.js

@@ -1,72 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useDebouncedEffect } from "@react-hookz/web";
-import { shallowEqual } from "fast-equals";
-import { useState, useRef } from "react";
-import { useDiagramState, useDiagramStoreApi } from "../hooks/useDiagramState.js";
-import { useXYStore } from "../hooks/useXYFlow.js";
-function selectXYFlowSize(state) {
-  return `${Math.round(state.width)}:${Math.round(state.height)}`;
-}
-function selectDiagramsize({ view, fitViewPadding }) {
-  return [
-    view.bounds.x,
-    view.bounds.y,
-    view.bounds.width,
-    view.bounds.height,
-    fitViewPadding
-  ].map(Math.round).join(":");
-}
-function FitViewOnViewportResize({ diagramApi }) {
-  const xyflowsize = useXYStore(selectXYFlowSize);
-  const viewsize = useDiagramState(selectDiagramsize);
-  const dimensions = xyflowsize + viewsize;
-  const prevDimensionsRef = useRef(dimensions);
-  useDebouncedEffect(
-    () => {
-      const { focusedNodeId, fitDiagram } = diagramApi.getState();
-      if (focusedNodeId || prevDimensionsRef.current === dimensions) {
-        return;
-      }
-      prevDimensionsRef.current = dimensions;
-      fitDiagram(250);
-    },
-    [dimensions, diagramApi],
-    250
-  );
-  return null;
-}
-function selector({ view, activeWalkthrough, viewportChanged, fitViewPadding }) {
-  return {
-    layoutId: view.id + "_" + view.autoLayout + "_" + fitViewPadding,
-    isActiveWalkthrough: !!activeWalkthrough,
-    viewportNotMoved: !viewportChanged
-  };
-}
-function FitViewOnDiagramChange() {
-  const {
-    layoutId,
-    isActiveWalkthrough,
-    viewportNotMoved
-  } = useDiagramState(selector, shallowEqual);
-  const diagramApi = useDiagramStoreApi();
-  const [currentLayoutId, setCurrent] = useState(layoutId);
-  const requiresFit = layoutId !== currentLayoutId;
-  useDebouncedEffect(
-    () => {
-      if (layoutId === currentLayoutId) {
-        return;
-      }
-      setCurrent(layoutId);
-      diagramApi.getState().fitDiagram(450);
-    },
-    [requiresFit, diagramApi],
-    50
-  );
-  if (viewportNotMoved && !isActiveWalkthrough && !requiresFit) {
-    return /* @__PURE__ */ jsx(FitViewOnViewportResize, { diagramApi });
-  }
-  return null;
-}
-export {
-  FitViewOnDiagramChange
-};

package/dist/xyflow/SelectEdgesOnNodeFocus.d.ts

@@ -1 +0,0 @@
-export declare function SelectEdgesOnNodeFocus(): null;

package/dist/xyflow/SelectEdgesOnNodeFocus.js

@@ -1,96 +0,0 @@
-import { nonNullable } from "@likec4/core";
-import { useHotkeys } from "@mantine/hooks";
-import { getBoundsOfRects, getViewportForBounds } from "@xyflow/system";
-import { useDiagramStoreApi, useDiagramState } from "../hooks/useDiagramState.js";
-import { MinZoom } from "./const.js";
-import { nodeToRect } from "./utils.js";
-import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
-function SelectEdgesOnNodeFocus() {
-  const diagramStore = useDiagramStoreApi();
-  const focusedNodeId = useDiagramState((s) => s.focusedNodeId);
-  useUpdateEffect(() => {
-    if (!focusedNodeId) {
-      diagramStore.getState().xystore.getState().resetSelectedElements();
-      return;
-    }
-    const container = diagramStore.getState().getContainer();
-    if (!container) {
-      return;
-    }
-    const edgeChanges = [];
-    const nodeChanges = [];
-    const {
-      edgeLookup,
-      nodeLookup,
-      panZoom,
-      transform,
-      triggerNodeChanges,
-      triggerEdgeChanges
-    } = diagramStore.getState().xystore.getState();
-    let focusBounds = nodeToRect(nonNullable(nodeLookup.get(focusedNodeId)));
-    for (const [, edge] of edgeLookup) {
-      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
-        const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source;
-        const nd = nonNullable(nodeLookup.get(anotherNodeId));
-        focusBounds = getBoundsOfRects(focusBounds, nodeToRect(nd));
-      }
-      if (edge.selected) {
-        edgeChanges.push({
-          id: edge.id,
-          type: "select",
-          selected: false
-        });
-      }
-    }
-    for (const [, node] of nodeLookup) {
-      if (node.selected && node.id !== focusedNodeId) {
-        nodeChanges.push({
-          id: node.id,
-          type: "select",
-          selected: false
-        });
-      }
-    }
-    nodeChanges.push({
-      id: focusedNodeId,
-      type: "select",
-      selected: true
-    });
-    if (edgeChanges.length > 0) {
-      triggerEdgeChanges(edgeChanges);
-    }
-    triggerNodeChanges(nodeChanges);
-    const { width, height } = container.getBoundingClientRect();
-    const maxZoom = Math.max(1, transform[2]);
-    const viewport = getViewportForBounds(
-      {
-        x: focusBounds.x - 16,
-        y: focusBounds.y - 16,
-        width: focusBounds.width + 32,
-        height: focusBounds.height + 32
-      },
-      width,
-      height,
-      MinZoom,
-      maxZoom,
-      0
-    );
-    panZoom == null ? void 0 : panZoom.setViewport(viewport, {
-      duration: 350
-    });
-  }, [focusedNodeId]);
-  useHotkeys(
-    focusedNodeId !== null ? [
-      ["Escape", (e) => {
-        e.stopPropagation();
-        const { resetFocusAndLastClicked, fitDiagram } = diagramStore.getState();
-        resetFocusAndLastClicked();
-        fitDiagram();
-      }, { preventDefault: true }]
-    ] : []
-  );
-  return null;
-}
-export {
-  SelectEdgesOnNodeFocus
-};

package/dist/xyflow/XYFlow.d.ts

@@ -1,8 +0,0 @@
-import { CSSProperties, PropsWithChildren } from 'react';
-type XYFlowWrapperProps = PropsWithChildren<{
-    colorMode?: 'system' | 'light' | 'dark';
-    className?: string | undefined;
-    style?: CSSProperties | undefined;
-}>;
-export declare function XYFlow({ colorMode, className, children, style }: XYFlowWrapperProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/xyflow/XYFlow.js

@@ -1,145 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useOnViewportChange, ReactFlow } from "@xyflow/react";
-import { shallowEqual } from "fast-equals";
-import "react";
-import { useDiagramState } from "../hooks/useDiagramState.js";
-import { useXYStoreApi } from "../hooks/useXYFlow.js";
-import { MaxZoom, MinZoom } from "./const.js";
-import { RelationshipEdge } from "./edges/RelationshipEdge.js";
-import { useLayoutConstraints } from "./useLayoutConstraints.js";
-import { useXYFlowEvents } from "./useXYFlowEvents.js";
-import { ElementNodeMemo } from "./nodes/element/ElementNode.js";
-import { CompoundNodeMemo } from "./nodes/compound/CompoundNode.js";
-const nodeTypes = {
-  element: ElementNodeMemo,
-  compound: CompoundNodeMemo
-};
-const edgeTypes = {
-  relationship: RelationshipEdge
-};
-const selector = (s) => ({
-  nodes: s.xynodes,
-  edges: s.xyedges,
-  onInit: s.onInit,
-  onNodesChange: s.onNodesChange,
-  onEdgesChange: s.onEdgesChange,
-  nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
-  nodesDraggable: s.nodesDraggable,
-  fitView: s.fitViewEnabled,
-  fitViewPadding: s.fitViewPadding,
-  // hasOnNavigateTo: !!s.onNavigateTo,
-  // hasOnNodeClick: !!s.onNodeClick,
-  hasOnNodeContextMenu: !!s.onNodeContextMenu,
-  hasOnCanvasContextMenu: !!s.onCanvasContextMenu,
-  hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
-  hasOnEdgeClick: !!s.onEdgeClick,
-  zoomable: s.zoomable,
-  pannable: s.pannable,
-  // If fitView is not enabled
-  // And diagram starts with a negative x or y - we need to translate viewprot
-  translateX: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.x, 0),
-  translateY: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.y, 0)
-});
-function XYFlow({
-  colorMode = "system",
-  className,
-  children,
-  style
-}) {
-  const xyflowApi = useXYStoreApi();
-  const {
-    nodes,
-    edges,
-    onInit,
-    onNodesChange,
-    onEdgesChange,
-    nodesSelectable,
-    nodesDraggable,
-    fitView,
-    fitViewPadding,
-    pannable,
-    zoomable,
-    hasOnNodeContextMenu,
-    hasOnCanvasContextMenu,
-    hasOnEdgeContextMenu,
-    translateX,
-    translateY
-  } = useDiagramState(selector, shallowEqual);
-  const layoutConstraints = useLayoutConstraints();
-  const {
-    onNodeContextMenu,
-    onPaneContextMenu,
-    onEdgeContextMenu,
-    ...handlers
-  } = useXYFlowEvents();
-  useOnViewportChange({
-    onEnd: ({ x, y, zoom }) => {
-      const roundedX = Math.round(x), roundedY = Math.round(y);
-      if (x !== roundedX || y !== roundedY) {
-        xyflowApi.setState({ transform: [roundedX, roundedY, zoom] });
-      }
-    }
-  });
-  return /* @__PURE__ */ jsx(
-    ReactFlow,
-    {
-      className,
-      style,
-      ...colorMode && { colorMode },
-      nodes,
-      edges,
-      onNodesChange,
-      onEdgesChange,
-      onInit,
-      nodeTypes,
-      edgeTypes,
-      zoomOnPinch: zoomable,
-      zoomOnScroll: !pannable && zoomable,
-      ...!zoomable && {
-        zoomActivationKeyCode: null
-      },
-      zoomOnDoubleClick: false,
-      maxZoom: zoomable ? MaxZoom : 1,
-      minZoom: zoomable ? MinZoom : 1,
-      fitView: false,
-      fitViewOptions: {
-        minZoom: MinZoom,
-        maxZoom: 1,
-        padding: fitViewPadding,
-        includeHiddenNodes: true
-      },
-      ...!fitView && {
-        viewport: {
-          x: translateX,
-          y: translateY,
-          zoom: 1
-        }
-      },
-      preventScrolling: zoomable || pannable,
-      defaultMarkerColor: "var(--xy-edge-stroke)",
-      noDragClassName: "nodrag",
-      noPanClassName: "nopan",
-      panOnScroll: pannable,
-      panOnDrag: pannable,
-      ...!pannable && {
-        selectionKeyCode: null
-      },
-      elementsSelectable: nodesSelectable,
-      nodesFocusable: nodesDraggable || nodesSelectable,
-      edgesFocusable: false,
-      nodesDraggable,
-      ...nodesDraggable && layoutConstraints,
-      nodeDragThreshold: 4,
-      elevateNodesOnSelect: false,
-      selectNodesOnDrag: false,
-      ...hasOnNodeContextMenu && { onNodeContextMenu },
-      ...hasOnCanvasContextMenu && { onPaneContextMenu },
-      ...hasOnEdgeContextMenu && { onEdgeContextMenu },
-      ...handlers,
-      children
-    }
-  );
-}
-export {
-  XYFlow
-};

package/dist/xyflow/XYFlowBackground.d.ts

@@ -1,10 +0,0 @@
-import { BackgroundProps } from '@xyflow/react';
-import { OverrideProperties } from 'type-fest';
-export type XYBackgroundVariant = 'dots' | 'lines' | 'cross';
-export type XYBackground = XYBackgroundVariant | OverrideProperties<BackgroundProps, {
-    variant: XYBackgroundVariant;
-}>;
-export type XYBackgroundProps = {
-    background: XYBackground;
-};
-export declare function XYFlowBackground({ background }: XYBackgroundProps): import("react/jsx-runtime").JSX.Element;

package/dist/xyflow/XYFlowInner.d.ts

@@ -1,8 +0,0 @@
-import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
-import { NamedExoticComponent } from 'react';
-type XYFlowInnerProps = {
-    background: NonNullable<LikeC4DiagramProperties['background']>;
-    showDiagramTitle: boolean;
-};
-export declare const XYFlowInner: NamedExoticComponent<XYFlowInnerProps>;
-export {};