@likec4/diagram 1.41.0 → 1.42.1

package/dist/bundle/ShadowRoot.js

@@ -1,46 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { MantineProvider } from '@mantine/core';
-import { useRef, useCallback } from 'react';
-import root from 'react-shadow';
-import { isDefined } from 'remeda';
-import { useBundledStyleSheet, DefaultTheme } from './styles.css.js';
-
-const Root = root["div"];
-function ShadowRoot({
-  children,
-  theme = DefaultTheme,
-  injectFontCss = true,
-  styleNonce,
-  colorScheme,
-  ...props
-}) {
-  const rootRef = useRef(null);
-  const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
-  const getRootElement = useCallback(() => rootRef.current ?? void 0, [rootRef]);
-  let getStyleNonce;
-  if (isDefined(styleNonce)) {
-    getStyleNonce = typeof styleNonce === "function" ? styleNonce : () => styleNonce;
-  }
-  return /* @__PURE__ */ jsx(Root, { ssr: false, styleSheets, ...props, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: rootRef,
-      ...colorScheme && { "data-mantine-color-scheme": colorScheme },
-      className: "likec4-shadow-root",
-      children: /* @__PURE__ */ jsx(
-        MantineProvider,
-        {
-          ...colorScheme && { forceColorScheme: colorScheme },
-          defaultColorScheme: "auto",
-          getRootElement,
-          ...getStyleNonce && { getStyleNonce },
-          cssVariablesSelector: ".likec4-shadow-root",
-          theme,
-          children
-        }
-      )
-    }
-  ) });
-}
-
-export { ShadowRoot };

package/dist/bundle/custom.d.ts

@@ -1 +0,0 @@
-export * from '../custom';

package/dist/bundle/custom.js

@@ -1,33 +0,0 @@
-export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from '../custom/customNodes.js';
-export { CompoundActionButton } from '../base/primitives/compound/CompoundActionButton.js';
-export { CompoundDetailsButton } from '../base/primitives/compound/CompoundDetailsButton.js';
-export { CompoundNodeContainer } from '../base/primitives/compound/CompoundNodeContainer.js';
-export { CompoundTitle } from '../base/primitives/compound/CompoundTitle.js';
-export { DefaultHandles } from '../base/primitives/NodeHandles.js';
-export { ElementActionButtons } from '../base/primitives/element/ElementActionButtons.js';
-export { ElementDetailsButton } from '../base/primitives/element/ElementDetailsButton.js';
-export { ElementNodeContainer } from '../base/primitives/element/ElementNodeContainer.js';
-export { ElementShape } from '../base/primitives/element/ElementShape.js';
-export { ElementTag, ElementTags } from '../base/primitives/element/ElementTags.js';
-export { ElementTitle } from '../base/primitives/element/ElementTitle.js';
-export { MarkdownBlock } from '../base/primitives/MarkdownBlock.js';
-export { IconOrShapeRenderer, IconRenderer, IconRendererProvider } from '../context/IconRenderer.js';
-export { CompoundActions } from '../likec4diagram/custom/nodes/CompoundActions.js';
-export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from '../likec4diagram/custom/nodes/nodes.js';
-export { CompoundDeploymentToolbar, CompoundElementToolbar } from '../likec4diagram/custom/nodes/toolbar/CompoundToolbar.js';
-export { DeploymentElementActions, ElementActions } from '../likec4diagram/custom/nodes/ElementActions.js';
-export { DeploymentElementToolbar, ElementToolbar } from '../likec4diagram/custom/nodes/toolbar/ElementToolbar.js';
-export { Toolbar } from '../likec4diagram/custom/nodes/toolbar/Toolbar.js';
-export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from '../context/DiagramFeatures.js';
-export { Overlay } from '../overlays/overlay/Overlay.js';
-export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
-export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
-export { useDiagram, useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
-export { useDiagramActorRef } from '../hooks/safeContext.js';
-export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
-export { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../likec4model/useLikeC4Project.js';
-export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
-export { useSetState } from '../hooks/useSetState.js';
-export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/bundle/index.js

@@ -1,17 +0,0 @@
-export { LikeC4View } from './LikeC4View.js';
-export { ReactLikeC4 } from './ReactLikeC4.js';
-export { LikeC4ProjectsProvider } from '../LikeC4ProjectsProvider.js';
-export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
-export { ViewNotFound } from './ViewNotFound.js';
-export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
-export { useEnabledFeatures } from '../context/DiagramFeatures.js';
-export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
-export { useDiagram, useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
-export { useDiagramActorRef } from '../hooks/safeContext.js';
-export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
-export { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../likec4model/useLikeC4Project.js';
-export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
-export { useSetState } from '../hooks/useSetState.js';
-export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/components/SearchControl.css.js

@@ -1,79 +0,0 @@
-import { css } from '@likec4/styles/css';
-
-const root = css({
-  height: "30px",
-  paddingLeft: "sm",
-  paddingRight: "1",
-  borderRadius: "sm",
-  // TODO
-  // color: fallbackVar('var(--search-color)', 'mantine.colors.placeholder)',
-  border: "1px solid",
-  borderColor: {
-    base: "mantine.colors.defaultBorder",
-    _light: "mantine.colors.gray[4]",
-    _dark: "mantine.colors.dark[4]",
-    _hover: "mantine.colors.defaultBorder"
-  },
-  cursor: "pointer",
-  background: {
-    base: "mantine.colors.default",
-    _light: "mantine.colors.white",
-    _dark: "mantine.colors.dark[6]",
-    _hover: "mantine.colors.defaultHover"
-  },
-  width: "100%",
-  "& .tabler-icon": {
-    color: "mantine.colors.text"
-  },
-  transition: {
-    base: "fast",
-    _whenPanning: "none !important"
-  },
-  boxShadow: {
-    base: "xs",
-    _hover: "sm",
-    _whenPanning: "none !important"
-  }
-});
-const placeholder = css({
-  fontSize: "sm",
-  // mantine.fontSizes.sm,
-  fontWeight: 500,
-  paddingRight: "2.5",
-  // 10px
-  color: "mantine.colors.placeholder",
-  flex: "1",
-  sm: {
-    paddingRight: "[30px]"
-  },
-  md: {
-    paddingRight: "[50px]"
-  }
-});
-const shortcut = css({
-  fontSize: "11px",
-  fontWeight: 600,
-  lineHeight: 1,
-  padding: "[4px 7px]",
-  borderRadius: "sm",
-  border: "1px solid",
-  transition: "fast",
-  _light: {
-    color: "mantine.colors.gray[7]",
-    borderColor: "mantine.colors.gray[2]"
-  },
-  _dark: {
-    color: "mantine.colors.dark[0]",
-    borderColor: "mantine.colors.dark[7]"
-  },
-  backgroundColor: {
-    _light: "mantine.colors.gray[2]/70",
-    _dark: "mantine.colors.dark[8]/70",
-    _groupHover: {
-      _light: "mantine.colors.gray[2]",
-      _dark: "mantine.colors.dark[8]"
-    }
-  }
-});
-
-export { placeholder, root, shortcut };

package/dist/components/SearchControl.js

@@ -1,17 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { UnstyledButton, Group, Text } from '@mantine/core';
-import { isMacOs } from '@xyflow/system';
-import { placeholder, shortcut, root } from './SearchControl.css.js';
-import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
-
-function SearchControl({ className, ...others }) {
-  const isMac = isMacOs();
-  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: cx("group", root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-    /* @__PURE__ */ jsx(IconSearch, { style: { width: "15px", height: "15px" }, stroke: 2 }),
-    /* @__PURE__ */ jsx(Text, { component: "div", className: placeholder, children: "Search" }),
-    /* @__PURE__ */ jsx(Text, { component: "div", className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
-  ] }) });
-}
-
-export { SearchControl };

package/dist/context/ControlsCustomLayout.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-export type ControlsCustomLayoutProps = {
-    burgerMenu: ReactNode;
-    navigationButtons: ReactNode;
-    search: ReactNode;
-    actionsGroup: ReactNode;
-};
-export type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode;
-export declare const ControlsCustomLayoutProvider: ({ children, value }: {
-    value: ControlsCustomLayout | null;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useControlsCustomLayout: () => ControlsCustomLayout | null;

package/dist/context/ControlsCustomLayout.js

@@ -1,8 +0,0 @@
-import { createOptionalContext } from '@mantine/core';
-
-const [
-  ControlsCustomLayoutProvider,
-  useControlsCustomLayout
-] = createOptionalContext(null);
-
-export { ControlsCustomLayoutProvider, useControlsCustomLayout };

package/dist/context/ReduceGraphics.d.ts

@@ -1,12 +0,0 @@
-import { WritableAtom } from 'nanostores';
-import { PropsWithChildren } from 'react';
-/**
- * Hook to determine if reduced graphics mode is enabled.
- */
-export declare function useIsReducedGraphics(): boolean;
-declare const usePanningAtom: () => WritableAtom<boolean>;
-export { usePanningAtom, };
-export declare function ReduceGraphicsContext({ reduceGraphics, children }: PropsWithChildren<{
-    reduceGraphics: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
-export declare function useIsPanning(): boolean;

package/dist/context/ReduceGraphics.js

@@ -1,26 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { createSafeContext } from '@mantine/core';
-import '@nanostores/react';
-import { atom } from 'nanostores';
-import { useRef, createContext, useContext } from 'react';
-
-const ReduceGraphicsModeCtx = createContext(null);
-function useIsReducedGraphics() {
-  const isReduced = useContext(ReduceGraphicsModeCtx);
-  if (isReduced === null) {
-    console.warn("ReduceGraphicsMode is not provided");
-  }
-  return isReduced ?? false;
-}
-const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
-  "PanningAtomSafeCtx is not provided"
-);
-function ReduceGraphicsContext({ reduceGraphics, children }) {
-  const $isPanningRef = useRef(null);
-  if (!$isPanningRef.current) {
-    $isPanningRef.current = atom(reduceGraphics);
-  }
-  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children }) });
-}
-
-export { ReduceGraphicsContext, useIsReducedGraphics, usePanningAtom };

package/dist/context/RootContainer.js

@@ -1,39 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { useRef, useEffect, createContext, useContext, createRef } from 'react';
-import { usePanningAtom } from './ReduceGraphics.js';
-import { TagStylesProvider } from './TagStylesContext.js';
-
-const RootContainerContext = createContext(createRef());
-function RootContainer({
-  id,
-  className,
-  reduceGraphics = false,
-  children
-}) {
-  const ref = useRef(null);
-  const $isPanning = usePanningAtom();
-  useEffect(() => {
-    return $isPanning.listen((isPanning) => {
-      ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
-    });
-  }, [$isPanning]);
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      id,
-      className: cx("likec4-root", className),
-      ref,
-      ...reduceGraphics && {
-        ["data-likec4-reduced-graphics"]: true
-      },
-      children: /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children }) })
-    }
-  );
-}
-function useRootContainer() {
-  return useContext(RootContainerContext).current;
-}
-
-export { RootContainer, useRootContainer };

package/dist/custom/components.d.ts

@@ -1,5 +0,0 @@
-export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementDetailsButton, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementTitle, MarkdownBlock, } from '../base/primitives';
-export { IconOrShapeRenderer, IconRenderer, IconRendererProvider, } from '../context/IconRenderer';
-export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, Toolbar, ViewGroupNode, } from '../likec4diagram/custom/nodes';
-export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, } from '../context/DiagramFeatures';
-export { Overlay, type OverlayProps, } from '../overlays/overlay/Overlay';

package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.d.ts

@@ -1,2 +0,0 @@
-import { PopoverProps } from '@mantine/core';
-export declare const ChangeAutoLayoutButton: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.js

@@ -1,159 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Popover, PopoverTarget, PopoverDropdown, Box, FloatingIndicator, Text, Flex, UnstyledButton } from '@mantine/core';
-import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef } from '@mantine/hooks';
-import { useDebouncedCallback } from '@react-hookz/web';
-import { useState, forwardRef } from 'react';
-import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
-import { Tooltip, ActionIcon } from './_shared.js';
-import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.css.js';
-import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
-import IconLayoutDashboard from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
-
-const selector = (state) => ({
-  viewId: state.view.id,
-  autoLayout: state.view.autoLayout
-});
-const ChangeAutoLayoutButton = (props) => {
-  const {
-    onChange
-  } = useDiagramEventHandlers();
-  const diagram = useDiagram();
-  const [rootRef, setRootRef] = useState(null);
-  const [controlsRefs, setControlsRefs] = useState({});
-  const {
-    autoLayout,
-    viewId
-  } = useDiagramContext(selector);
-  const { ref, hovered: isSpacingHovered } = useHover();
-  const setControlRef = (name) => (node) => {
-    controlsRefs[name] = node;
-    setControlsRefs(controlsRefs);
-  };
-  const setAutoLayout = (direction) => (event) => {
-    event.stopPropagation();
-    onChange?.({
-      change: {
-        op: "change-autolayout",
-        layout: {
-          ...autoLayout,
-          direction
-        }
-      }
-    });
-  };
-  const setSpacing = (nodeSep, rankSep) => {
-    diagram.fitDiagram();
-    onChange?.({
-      change: {
-        op: "change-autolayout",
-        layout: {
-          ...autoLayout,
-          nodeSep,
-          rankSep
-        }
-      }
-    });
-  };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      position: "right-start",
-      clickOutsideEvents: [
-        "pointerdown"
-      ],
-      radius: "xs",
-      shadow: "lg",
-      offset: {
-        mainAxis: 10
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Change Auto Layout", children: /* @__PURE__ */ jsx(ActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutDashboard, {}) }) }) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { className: "likec4-top-left-panel", p: 8, pt: 6, opacity: isSpacingHovered ? 0.6 : 1, children: /* @__PURE__ */ jsxs(Box, { pos: "relative", ref: setRootRef, children: [
-          /* @__PURE__ */ jsx(
-            FloatingIndicator,
-            {
-              target: controlsRefs[autoLayout.direction],
-              parent: rootRef,
-              className: autolayoutIndicator
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { mb: 10, children: /* @__PURE__ */ jsx(Text, { inline: true, fz: "xs", c: "dimmed", fw: 500, children: "Auto layout:" }) }),
-          /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", justify: "stretch", maw: 160, children: [
-            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("TB"), onClick: setAutoLayout("TB"), children: "Top-Bottom" }),
-            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("BT"), onClick: setAutoLayout("BT"), children: "Bottom-Top" }),
-            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("LR"), onClick: setAutoLayout("LR"), children: "Left-Right" }),
-            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("RL"), onClick: setAutoLayout("RL"), children: "Right-Left" })
-          ] }),
-          /* @__PURE__ */ jsx(Box, { my: 10, children: /* @__PURE__ */ jsx(Text, { inline: true, fz: "xs", c: "dimmed", fw: 500, children: "Spacing:" }) }),
-          /* @__PURE__ */ jsx(
-            SpacingSliders,
-            {
-              ref,
-              isVertical: autoLayout.direction === "TB" || autoLayout.direction === "BT",
-              nodeSep: autoLayout.nodeSep,
-              rankSep: autoLayout.rankSep,
-              onChange: setSpacing
-            },
-            viewId
-          )
-        ] }) })
-      ]
-    }
-  );
-};
-const MAX_SPACING = 400;
-const SpacingSliders = forwardRef(({
-  isVertical,
-  nodeSep,
-  rankSep,
-  onChange
-}, _ref) => {
-  if (!isVertical) {
-    [nodeSep, rankSep] = [rankSep, nodeSep];
-  }
-  const propagateChange = useDebouncedCallback(
-    ({ x, y }) => {
-      if (!isVertical) {
-        [x, y] = [y, x];
-      }
-      onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING));
-    },
-    [onChange, isVertical],
-    250,
-    2e3
-  );
-  const [value, setValue] = useUncontrolled({
-    defaultValue: clampUseMovePosition({
-      x: (nodeSep ?? 100) / MAX_SPACING,
-      y: (rankSep ?? 120) / MAX_SPACING
-    }),
-    onChange: propagateChange
-  });
-  const { ref } = useMove(setValue);
-  let nodeSepValue = Math.round(value.x * MAX_SPACING);
-  let rankSepValue = Math.round(value.y * MAX_SPACING);
-  if (!isVertical) {
-    [nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue];
-  }
-  const mergedRef = useMergedRef(ref, _ref);
-  return /* @__PURE__ */ jsxs(Box, { ref: mergedRef, className: spacingSliderBody, pt: "100%", children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        className: spacingSliderThumb,
-        style: {
-          left: `${value.x * 100}%`,
-          top: `${value.y * 100}%`
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(Box, { pos: "absolute", left: 2, bottom: 2, children: /* @__PURE__ */ jsxs(Text, { component: "div", fz: 8, c: "dimmed", fw: 500, children: [
-      rankSepValue,
-      ", ",
-      nodeSepValue
-    ] }) })
-  ] });
-});
-
-export { ChangeAutoLayoutButton };

package/dist/likec4diagram/ui/controls/Controls.d.ts

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

package/dist/likec4diagram/ui/controls/Controls.js

@@ -1,154 +0,0 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { hstack } from '@likec4/styles/patterns';
-import { ActionIconGroup, Stack, Group, Box } from '@mantine/core';
-import { m, LayoutGroup } from 'motion/react';
-import { memo } from 'react';
-import { SearchControl } from '../../../components/SearchControl.js';
-import { useControlsCustomLayout } from '../../../context/ControlsCustomLayout.js';
-import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
-import { Tooltip, ActionIcon } from './_shared.js';
-import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton.js';
-import { LayoutDriftNotification } from './LayoutDriftNotification.js';
-import { ManualLayoutToolsButton } from './ManualLayoutToolsButton.js';
-import { NavigationButtons } from './NavigationButtons.js';
-import { actionIconGroup, navigationButtons, panel } from './styles.css.js';
-import { ToggleReadonly } from './ToggleReadonly.js';
-import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
-import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconFocusCentered from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
-import IconMenu2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
-import { stopPropagation } from '../../../utils/xyflow.js';
-
-const ControlsDefaultLayout = ({
-  burgerMenu,
-  navigationButtons: navigationButtons$1,
-  search,
-  actionsGroup
-}) => /* @__PURE__ */ jsxs(
-  m.div,
-  {
-    initial: {
-      opacity: 0.05,
-      translateX: -30,
-      translateY: -16
-    },
-    animate: {
-      opacity: 1,
-      translateX: 0,
-      translateY: 0
-    },
-    exit: {
-      opacity: 0.05,
-      translateX: -30,
-      translateY: -10
-    },
-    className: cx(
-      hstack({
-        gap: "sm",
-        alignItems: "flex-start"
-      }),
-      "react-flow__panel",
-      panel,
-      "likec4-top-left-panel"
-    ),
-    onClick: stopPropagation,
-    children: [
-      /* @__PURE__ */ jsxs(Stack, { align: "flex-start", gap: "xs", children: [
-        /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
-          Group,
-          {
-            className: cx(navigationButtons, "likec4-navigation-webview"),
-            gap: "xs",
-            children: [
-              burgerMenu,
-              navigationButtons$1
-            ]
-          }
-        ) }),
-        actionsGroup
-      ] }),
-      /* @__PURE__ */ jsx(Box, { children: search })
-    ]
-  }
-);
-const Controls = memo(() => {
-  const { hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext((c) => ({
-    hasLayoutDrift: c.view.hasLayoutDrift ?? false,
-    viewportChanged: c.viewportChangedManually,
-    isNotActiveWalkthrough: c.activeWalkthrough === null
-  }));
-  const diagram = useDiagram();
-  const {
-    onOpenSource,
-    onBurgerMenuClick
-  } = useDiagramEventHandlers();
-  const {
-    enableControls,
-    enableSearch,
-    enableNavigationButtons,
-    enableReadOnly,
-    enableVscode
-  } = useEnabledFeatures();
-  const notReadOnly = !enableReadOnly;
-  const portalProps = useMantinePortalProps();
-  const ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout;
-  return /* @__PURE__ */ jsx(Fragment, { children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
-    ControlsLayout,
-    {
-      burgerMenu: onBurgerMenuClick && /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            onBurgerMenuClick();
-          },
-          children: /* @__PURE__ */ jsx(IconMenu2, {})
-        }
-      ),
-      navigationButtons: enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}),
-      search: enableSearch && /* @__PURE__ */ jsx(
-        SearchControl,
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            diagram.openSearch();
-          }
-        }
-      ),
-      actionsGroup: /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
-        enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              const viewId = diagram.currentView.id;
-              onOpenSource?.({ view: viewId });
-            },
-            children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
-          }
-        ) }),
-        enableControls && /* @__PURE__ */ jsx(ToggleReadonly, {}),
-        enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
-        enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
-          /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps })
-        ] }),
-        enableControls && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              diagram.fitDiagram();
-            },
-            children: /* @__PURE__ */ jsx(IconFocusCentered, {})
-          }
-        ) })
-      ] })
-    }
-  ) });
-});
-
-export { Controls };

package/dist/likec4diagram/ui/controls/LayoutDriftNotification.d.ts

@@ -1,2 +0,0 @@
-import { PopoverProps } from '@mantine/core';
-export declare const LayoutDriftNotification: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;