likec4 1.7.3 → 1.7.4

package/dist/__app__/src/chunks/{mantine-B6zTvdIg.js → mantine-CIkjlE3R.js}

@@ -12012,8 +12012,8 @@ export {
   Menu as a8,
   MenuTarget as a9,
   MenuDropdown as aa,
-  MenuItem as ab,
-  MenuLabel as ac,
+  MenuLabel as ab,
+  MenuItem as ac,
   LoadingOverlay as ad,
   useCallbackRef as ae,
   Burger as af,

package/dist/__app__/src/main.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { createContext as createContext$1, useLayoutEffect as useLayoutEffect$1, useEffect as useEffect$1, useContext as useContext$1, useRef as useRef$1, useInsertionEffect, useCallback as useCallback$1, useMemo as useMemo$1, forwardRef as forwardRef$1, Fragment as Fragment$1, createElement as createElement$1, useId as useId$1, Children, isValidElement, useState as useState$1, memo as memo$1, Component, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { L as Link, c as createRootRouteWithContext, S as ScrollRestoration, O as Outlet, a as createFileRoute, u as useRouter, b as useParams, d as useRouterState, i as isNotFound, n as notFound, R as RouterProvider, e as createRouter$1, f as createHashHistory, g as createBrowserHistory } from "./chunks/tanstack-router-C3bHLsEH.js";
-import { C as Container, T as Title, a as Text$1, G as Group, B as Button, c as createTheme, M as MantineProvider, b as MantineContext, u as useHotkeys, d as clsx, e as Box, A as ActionIcon$2, H as HoverCard, f as HoverCardTarget, U as UnstyledButton, g as HoverCardDropdown, S as Stack, h as Anchor, i as CopyButton$1, j as useLocalStorage, k as Card, l as CardSection, m as Spoiler, n as ButtonGroup, r as rem, D as Divider, o as Space, p as TooltipGroup, F as Flex, q as Tooltip$2, s as ColorSwatch, t as CheckIcon, v as Select, w as Slider, x as SegmentedControl, P as Popover, y as PopoverTarget, z as PopoverDropdown, E as FloatingIndicator, N as Notification, I as Code, J as SimpleGrid, K as useMantineColorScheme, L as useTree, O as useComputedColorScheme, Q as Tree, R as ThemeIcon, V as Drawer, W as ScrollArea, X as Alert, Y as ModalRoot, Z as ModalOverlay, _ as ModalContent, $ as ModalBody, a0 as Tabs, a1 as TabsList, a2 as TabsTab, a3 as TabsPanel, a4 as useMantineTheme, a5 as useMediaQuery, a6 as useDisclosure, a7 as Paper, a8 as Menu, a9 as MenuTarget, aa as MenuDropdown, ab as MenuItem, ac as MenuLabel, ad as LoadingOverlay, ae as useCallbackRef, af as Burger, ag as Loader } from "./chunks/mantine-B6zTvdIg.js";
+import { C as Container, T as Title, a as Text$1, G as Group, B as Button, c as createTheme, M as MantineProvider, b as MantineContext, u as useHotkeys, d as clsx, e as Box, A as ActionIcon$2, H as HoverCard, f as HoverCardTarget, U as UnstyledButton, g as HoverCardDropdown, S as Stack, h as Anchor, i as CopyButton$1, j as useLocalStorage, k as Card, l as CardSection, m as Spoiler, n as ButtonGroup, r as rem, D as Divider, o as Space, p as TooltipGroup, F as Flex, q as Tooltip$2, s as ColorSwatch, t as CheckIcon, v as Select, w as Slider, x as SegmentedControl, P as Popover, y as PopoverTarget, z as PopoverDropdown, E as FloatingIndicator, N as Notification, I as Code, J as SimpleGrid, K as useMantineColorScheme, L as useTree, O as useComputedColorScheme, Q as Tree, R as ThemeIcon, V as Drawer, W as ScrollArea, X as Alert, Y as ModalRoot, Z as ModalOverlay, _ as ModalContent, $ as ModalBody, a0 as Tabs, a1 as TabsList, a2 as TabsTab, a3 as TabsPanel, a4 as useMantineTheme, a5 as useMediaQuery, a6 as useDisclosure, a7 as Paper, a8 as Menu, a9 as MenuTarget, aa as MenuDropdown, ab as MenuLabel, ac as MenuItem, ad as LoadingOverlay, ae as useCallbackRef, af as Burger, ag as Loader } from "./chunks/mantine-CIkjlE3R.js";
 import { ComponentName, basepath, useHashHistory } from "./const.js";
 import { u as useReactFlow, a as useStoreApi, b as useNodesData, c as useStore, d as createWithEqualityFn, e as applyNodeChanges, f as applyEdgeChanges, g as getViewportForBounds, h as getNodeDimensions, i as getBoundsOfRects, s as shallow$1, j as boxToRect, k as useStoreWithEqualityFn, E as EdgeLabelRenderer, H as Handle, P as Position, l as useOnViewportChange, m as index, n as useOnSelectionChange, B as Background, o as BackgroundVariant, C as Controls, R as ReactFlowProvider } from "./chunks/likec4-DA506XqP.js";
 import { useLikeC4Views, useLikeC4View } from "virtual:likec4/store";
@@ -3805,7 +3805,7 @@ var u$3 = (e2, a2, n2) => e2.reduce(a2, n2);
 function n$2(e2) {
   return !!e2;
 }
-function t$4(...n2) {
+function t$3(...n2) {
   return u$4(Object.keys, n2);
 }
 function a$1(...e2) {
@@ -3815,7 +3815,7 @@ var n$1 = (e2) => e2.at(-1);
 function l(n2) {
   return n2 != null;
 }
-function o$2(a2) {
+function o$1(a2) {
   return (t2) => !a2(t2);
 }
 function e$3(n2) {
@@ -3832,15 +3832,6 @@ function f(...e2) {
   return u$4(i$1, e2, e$1(u$2));
 }
 var i$1 = (e2, n2) => e2.find(n2), u$2 = (e2) => (n2, t2, o2) => e2(n2, t2, o2) ? { done: !0, hasNext: !0, next: n2 } : s;
-function o$1(...e2) {
-  return u$4(t$3, e2);
-}
-var t$3 = (e2, r2) => {
-  for (let n2 = e2.length - 1; n2 >= 0; n2--) {
-    let a2 = e2[n2];
-    if (r2(a2, n2, e2)) return a2;
-  }
-};
 function d(...e2) {
   return u$4(r$1, e2, e$1(o));
 }
@@ -3927,7 +3918,7 @@ function whereOperatorAsPredicate(operator) {
     }
     case isNotOperator(operator): {
       const predicate = whereOperatorAsPredicate(operator.not);
-      return o$2(predicate);
+      return o$1(predicate);
     }
     case isAndOperator(operator): {
       const predicates = operator.and.map(whereOperatorAsPredicate);
@@ -4266,7 +4257,7 @@ const trackedConnections = /* @__PURE__ */ new Map(), getTrackedConnectionState
   Compound: 2,
   Edge: 4,
   Element: 6
-}, MinZoom = 0.1, { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
+}, MinZoom = 0.1, MaxZoom = 2, { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
 function crt(v) {
   return v < 0 ? -pow(-v, 1 / 3) : pow(v, 1 / 3);
 }
@@ -6905,13 +6896,6 @@ var IconArrowBigDownLines = createReactComponent("outline", "arrow-big-down-line
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconArrowLeft = createReactComponent("outline", "arrow-left", "IconArrowLeft", [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M5 12l6 6", key: "svg-1" }], ["path", { d: "M5 12l6 -6", key: "svg-2" }]]);
-/**
- * @license @tabler/icons-react v3.11.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var IconBrandReact = createReactComponent("outline", "brand-react", "IconBrandReact", [["path", { d: "M6.306 8.711c-2.602 .723 -4.306 1.926 -4.306 3.289c0 2.21 4.477 4 10 4c.773 0 1.526 -.035 2.248 -.102", key: "svg-0" }], ["path", { d: "M17.692 15.289c2.603 -.722 4.308 -1.926 4.308 -3.289c0 -2.21 -4.477 -4 -10 -4c-.773 0 -1.526 .035 -2.25 .102", key: "svg-1" }], ["path", { d: "M6.305 15.287c-.676 2.615 -.485 4.693 .695 5.373c1.913 1.105 5.703 -1.877 8.464 -6.66c.387 -.67 .733 -1.339 1.036 -2", key: "svg-2" }], ["path", { d: "M17.694 8.716c.677 -2.616 .487 -4.696 -.694 -5.376c-1.913 -1.105 -5.703 1.877 -8.464 6.66c-.387 .67 -.733 1.34 -1.037 2", key: "svg-3" }], ["path", { d: "M12 5.424c-1.925 -1.892 -3.82 -2.766 -5 -2.084c-1.913 1.104 -1.226 5.877 1.536 10.66c.386 .67 .793 1.304 1.212 1.896", key: "svg-4" }], ["path", { d: "M12 18.574c1.926 1.893 3.821 2.768 5 2.086c1.913 -1.104 1.226 -5.877 -1.536 -10.66c-.375 -.65 -.78 -1.283 -1.212 -1.897", key: "svg-5" }], ["path", { d: "M11.5 12.866a1 1 0 1 0 1 -1.732a1 1 0 0 0 -1 1.732z", key: "svg-6" }]]);
 /**
  * @license @tabler/icons-react v3.11.0 - MIT
  *
@@ -6968,13 +6952,6 @@ var IconFileCode = createReactComponent("outline", "file-code", "IconFileCode",
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFileSymlink = createReactComponent("outline", "file-symlink", "IconFileSymlink", [["path", { d: "M4 21v-4a3 3 0 0 1 3 -3h5", key: "svg-0" }], ["path", { d: "M9 17l3 -3l-3 -3", key: "svg-1" }], ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-2" }], ["path", { d: "M5 11v-6a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-9.5", key: "svg-3" }]]);
-/**
- * @license @tabler/icons-react v3.11.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var IconFile = createReactComponent("outline", "file", "IconFile", [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", key: "svg-1" }]]);
 /**
  * @license @tabler/icons-react v3.11.0 - MIT
  *
@@ -8879,10 +8856,13 @@ function useXYFlowEvents() {
       onDoubleClick: (event) => {
         const {
           onCanvasDblClick,
+          zoomable,
           xystore,
+          viewportChanged,
+          fitDiagram,
           resetLastClicked
         } = diagramApi.getState();
-        resetLastClicked(), xystore.getState().resetSelectedElements(), onCanvasDblClick || event.stopPropagation(), onCanvasDblClick?.(event);
+        resetLastClicked(), xystore.getState().resetSelectedElements(), onCanvasDblClick || event.stopPropagation(), zoomable && viewportChanged && fitDiagram(), onCanvasDblClick?.(event);
       },
       onPaneClick: (event) => {
         if (dbclickLock())
@@ -9093,11 +9073,11 @@ function XYFlow({
     hasOnEdgeContextMenu,
     translateX,
     translateY
-  } = useDiagramState(selector$1, shallowEqual), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
+  } = useDiagramState(selector$1, shallowEqual), [zoomOnDoubleClick, setZoomOnDoubleClick] = useState$1(zoomable), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
   return useOnViewportChange({
     onEnd: ({ x: x2, y: y2, zoom }) => {
       const roundedX = Math.round(x2), roundedY = Math.round(y2);
-      (x2 !== roundedX || y2 !== roundedY) && xyflowApi.setState({ transform: [roundedX, roundedY, zoom] });
+      (x2 !== roundedX || y2 !== roundedY) && xyflowApi.setState({ transform: [roundedX, roundedY, zoom] }), setZoomOnDoubleClick(zoomable && zoom < 1.1);
     }
   }), /* @__PURE__ */ jsx(
     index,
@@ -9114,7 +9094,7 @@ function XYFlow({
       ...!zoomable && {
         zoomActivationKeyCode: null
       },
-      maxZoom: zoomable ? 1.9 : 1,
+      maxZoom: zoomable ? MaxZoom : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView,
       fitViewOptions: useMemo$1(() => ({
@@ -9149,7 +9129,7 @@ function XYFlow({
         onNodeDragStop: layoutConstraints.onNodeDragStop
       },
       nodeDragThreshold: 3,
-      zoomOnDoubleClick: zoomable,
+      zoomOnDoubleClick,
       elevateNodesOnSelect: !1,
       selectNodesOnDrag: !1,
       onNodesChange,
@@ -9210,62 +9190,75 @@ function DiagramTitlePanel() {
           radius: "sm",
           className: card,
           withBorder: !0,
-          p: "md",
-          pb: isCollapsed ? "sm" : "md",
+          p: isCollapsed ? "sm" : "md",
           onDoubleClick: (e2) => e2.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx(CardSection, { mb: isCollapsed ? 10 : "sm", children: /* @__PURE__ */ jsx(
+            isCollapsed && /* @__PURE__ */ jsx(CardSection, { children: /* @__PURE__ */ jsx(
               Button,
               {
                 fullWidth: !0,
-                size: "xs",
-                h: "sm",
+                justify: "stretch",
+                size: "sm",
                 py: 2,
                 radius: "0",
-                variant: isCollapsed ? "light" : "subtle",
-                color: "gray",
+                variant: "subtle",
+                color: "dark",
                 onClick: toggle,
-                children: /* @__PURE__ */ jsx(IconMenu, { size: 11, opacity: 0.7 })
+                children: /* @__PURE__ */ jsx(Text$1, { inline: !0, fw: 500, fz: "xs", c: "gray", children: title$12 })
               }
             ) }),
-            /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: isCollapsed ? 0 : "sm", children: [
-              /* @__PURE__ */ jsx(
-                Text$1,
-                {
-                  component: "div",
-                  flex: "1",
-                  size: isCollapsed ? "sm" : "lg",
-                  fw: 500,
-                  lh: 1.1,
-                  className: title,
-                  children: title$12
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Text$1,
+            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(CardSection, { mb: "sm", children: /* @__PURE__ */ jsx(
+                Button,
                 {
-                  hidden: isCollapsed,
-                  component: "div",
-                  flex: "0 0 auto",
-                  inline: !0,
+                  fullWidth: !0,
                   size: "xs",
-                  fz: 9,
-                  fw: 500,
-                  c: "dimmed",
-                  style: {
-                    userSelect: "all"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
-                      "id:",
-                      " "
-                    ] }),
-                    id2
-                  ]
+                  h: "sm",
+                  py: 2,
+                  radius: "0",
+                  variant: "subtle",
+                  color: "gray",
+                  onClick: toggle,
+                  children: /* @__PURE__ */ jsx(IconMenu, { size: 11, opacity: 0.7 })
                 }
-              )
-            ] }),
-            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              ) }),
+              /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: "sm", children: [
+                /* @__PURE__ */ jsx(
+                  Text$1,
+                  {
+                    component: "div",
+                    flex: "1",
+                    size: "md",
+                    fw: 500,
+                    lh: 1.1,
+                    className: title,
+                    children: title$12
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Text$1,
+                  {
+                    hidden: isCollapsed,
+                    component: "div",
+                    flex: "0 0 auto",
+                    inline: !0,
+                    size: "xs",
+                    fz: 9,
+                    fw: 500,
+                    c: "dimmed",
+                    style: {
+                      userSelect: "all"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
+                        "id:",
+                        " "
+                      ] }),
+                      id2
+                    ]
+                  }
+                )
+              ] }),
               description$12 && /* @__PURE__ */ jsx(
                 Spoiler,
                 {
@@ -9431,7 +9424,7 @@ const {
   { key: "primary", value: primary.fill },
   { key: "secondary", value: secondary.fill },
   { key: "muted", value: muted.fill }
-], colors = t$4(otherColors).map((key) => ({
+], colors = t$3(otherColors).map((key) => ({
   key,
   value: defaultTheme.elements[key].fill
 })), NodeOptions = memo$1(({ selectedNodeIds }) => {
@@ -10244,7 +10237,7 @@ const Route$9 = createFileRoute("/")({
   component: IndexPage
 });
 function IndexPage() {
-  const views = t$4(useLikeC4Views());
+  const views = t$3(useLikeC4Views());
   return /* @__PURE__ */ jsx(
     SimpleGrid,
     {
@@ -10750,7 +10743,9 @@ function ShareModal({
   );
 }
 function Header({ diagram }) {
-  const { breakpoints } = useMantineTheme(), isTablet = useMediaQuery(`(min-width: ${breakpoints.md})`) ?? !1, [opened, { open, close }] = useDisclosure(!1);
+  const isReactDiagramRoute = useRouterState().matches.some(
+    ({ routeId }) => routeId === "/view/$viewId/" || routeId === "/view/$viewId/editor"
+  ), { breakpoints } = useMantineTheme(), isTablet = useMediaQuery(`(min-width: ${breakpoints.md})`) ?? !1, [opened, { open, close }] = useDisclosure(!1);
   return /* @__PURE__ */ jsxs(
     Paper,
     {
@@ -10758,17 +10753,28 @@ function Header({ diagram }) {
       pos: "fixed",
       top: "0.5rem",
       right: "0.5rem",
-      py: 5,
-      px: "xs",
+      p: 4,
       radius: "sm",
       shadow: "xl",
       children: [
         /* @__PURE__ */ jsxs(Group, { gap: isTablet ? 6 : 4, wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(ViewPageButton, { isTablet }),
-          /* @__PURE__ */ jsx(ColorSchemeToggle, {}),
+          isReactDiagramRoute ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { size: isTablet ? "sm" : "xs", leftSection: /* @__PURE__ */ jsx(IconShare, { size: 14 }), onClick: open, children: "Share" }),
+            /* @__PURE__ */ jsx(ExportButton, {})
+          ] }) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              component: Link,
+              to: "/view/$viewId/",
+              size: isTablet ? "sm" : "xs",
+              variant: "subtle",
+              color: "gray",
+              children: "Back to diagram"
+            }
+          ),
           /* @__PURE__ */ jsx(Divider, { orientation: "vertical", mr: isTablet ? 4 : "xs" }),
-          /* @__PURE__ */ jsx(Button, { size: isTablet ? "sm" : "xs", leftSection: /* @__PURE__ */ jsx(IconShare, { size: 14 }), onClick: open, children: "Share" }),
-          /* @__PURE__ */ jsx(ExportButton, { diagram })
+          /* @__PURE__ */ jsx(ColorSchemeToggle, {}),
+          /* @__PURE__ */ jsx(Space, {})
         ] }),
         /* @__PURE__ */ jsx(
           ShareModal,
@@ -10782,74 +10788,7 @@ function Header({ diagram }) {
     }
   );
 }
-const viewPages = [
-  {
-    route: "/view/$viewId",
-    icon: /* @__PURE__ */ jsx(IconBrandReact, { opacity: 0.7, size: 16 }),
-    title: /* @__PURE__ */ jsx(Fragment, { children: "React" })
-  },
-  {
-    route: "/view/$viewId/editor",
-    icon: /* @__PURE__ */ jsx(IconBrandReact, { opacity: 0.7, size: 16 }),
-    title: /* @__PURE__ */ jsx(Text$1, { size: "sm", fw: "500", variant: "gradient", gradient: { from: "pink", to: "violet", deg: 90 }, children: "Editor" })
-  },
-  {
-    route: "/view/$viewId/dot",
-    icon: /* @__PURE__ */ jsx(IconFile, { opacity: 0.7, size: 16 }),
-    title: /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Graphviz ",
-      /* @__PURE__ */ jsx(Text$1, { component: "span", size: "xs", c: "dimmed", ml: 4, children: ".dot" })
-    ] })
-  },
-  {
-    route: "/view/$viewId/d2",
-    icon: /* @__PURE__ */ jsx(IconFile, { opacity: 0.7, size: 16 }),
-    title: /* @__PURE__ */ jsx(Fragment, { children: "D2" })
-  },
-  {
-    route: "/view/$viewId/mmd",
-    icon: /* @__PURE__ */ jsx(IconFile, { opacity: 0.7, size: 16 }),
-    title: /* @__PURE__ */ jsx(Fragment, { children: "Mermaid" })
-  }
-], routeIds = viewPages.map(({ route }) => route);
-function ViewPageButton({
-  isTablet
-}) {
-  const { viewId } = useParams({
-    from: "/view/$viewId"
-  }), routerState = useRouterState(), matchedRoute = o$1(routerState.matches, ({ routeId }) => routeIds.includes(routeId)), matched = (matchedRoute && viewPages.find(({ route }) => route === matchedRoute.routeId)) ?? viewPages[0];
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 100, children: [
-    /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        leftSection: matched.icon,
-        variant: "subtle",
-        size: isTablet ? "sm" : "xs",
-        color: "gray",
-        px: "xs",
-        rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 14 }),
-        children: matched.title
-      }
-    ) }),
-    /* @__PURE__ */ jsx(MenuDropdown, { children: viewPages.map(({ route, icon, title: title2 }) => /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        component: Link,
-        to: route,
-        search: !0,
-        params: { viewId },
-        leftSection: icon,
-        ...route === matched.route ? { bg: "gray" } : {},
-        style: {
-          whiteSpace: "nowrap"
-        },
-        children: title2
-      },
-      route
-    )) })
-  ] }) });
-}
-function ExportButton({ diagram }) {
+function ExportButton() {
   const params = useParams({
     from: "/view/$viewId"
   });
@@ -10971,17 +10910,22 @@ async function downloadAsPng({
     console.error(err), window.alert("Failed to export to PNG, check the console for more details.");
   }
 }
-const Route$6 = createFileRoute("/export/$viewId")({
+const asBoolean = (v) => {
+  if (typeof v == "boolean")
+    return v;
+  if (typeof v == "string")
+    return v === "true";
+}, Route$6 = createFileRoute("/export/$viewId")({
   component: ExportPage,
   validateSearch: (search) => ({
-    download: "download" in search
+    download: asBoolean(search.download)
   })
 });
 function ExportPage() {
   const {
     padding = 20,
-    download
-  } = Route$6.useSearch(), { viewId } = Route$6.useParams(), diagram = useLikeC4View(viewId), viewportRef = useRef$1(null), loadingOverlayRef = useRef$1(null);
+    download = !1
+  } = Route$6.useSearch(), { viewId } = Route$6.useParams(), diagram = useLikeC4View(viewId), viewportRef = useRef$1(null), loadingOverlayRef = useRef$1(null), downloadedRef = useRef$1(!1);
   if (useTransparentBackground(), useEffect$1(() => {
     document.querySelectorAll(".react-flow__viewport").forEach((el) => {
       el.style.transform = "";
@@ -10989,7 +10933,10 @@ function ExportPage() {
   }), useDebouncedEffect(
     () => {
       const viewport = viewportRef.current;
-      !download || !viewport || !diagram || (loadingOverlayRef.current.style.display = "none", downloadAsPng({
+      if (!download || !viewport || !diagram)
+        return;
+      const loadingOverlay = loadingOverlayRef.current;
+      loadingOverlay && (loadingOverlay.style.display = "none"), !downloadedRef.current && (downloadedRef.current = !0, downloadAsPng({
         pngFilename: viewId,
         viewport
       }));