likec4 1.44.0 → 1.45.0

package/__app__/src/main.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEffect, lazy, Suspense, createContext, useContext, useState, useMemo, memo, useRef, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { cB as useRouter, cC as isNotFound, cD as Container, a_ as Alert, O as Text, cE as Code, P as Button, aH as Group, aD as rem, bE as Title, cF as Link, cG as useNavigate, bx as useCallbackRef, cH as createRootRouteWithContext, cI as stripSearchParams, al as e, cJ as Outlet, l as useMantineColorScheme, cK as createFileRoute, cL as useDocumentTitle, aB as Stack, cM as Loader, cN as useStore, N as ErrorBoundary, cO as Navigate, d as deepEqual, s as shallowEqual, cP as useParams, v as useIsomorphicLayoutEffect, cQ as SimpleGrid, cR as useInViewport, cS as e$1, bZ as Card, ab as Box, cT as notFound, b7 as r, aZ as useTree, cU as useComputedColorScheme, a$ as Tree, as as HoverCard, at as HoverCardTarget, au as HoverCardDropdown, T as ThemeIcon, cV as onMount, r as atom, bY as useLocalStorage, cW as Drawer, bv as ScrollArea, a4 as SegmentedControl, Y as ActionIcon, a1 as Menu, aI as MenuTarget, aJ as MenuDropdown, aK as MenuItem, ar as CopyButton$1, cX as Select, cY as ModalRoot, cZ as ModalOverlay, c_ as ModalContent, c$ as ModalBody, br as Tabs, bs as TabsList, bt as TabsTab, bu as TabsPanel, d0 as useMatches, d1 as useMantineTheme, d2 as useMediaQuery, d3 as useDisclosure, aG as Paper, a5 as Divider, aA as Space, d4 as useParentMatches, d5 as MenuLabel, G as t, b1 as t$1, b4 as t$2, b3 as e$2, b2 as t$3, b5 as t$4, z as t$5, b6 as n, g as t$6, ba as dagre, bb as t$7, bc as t$8, d6 as useSearch, ae as useDebouncedCallback, d7 as LoadingOverlay, d8 as toBlob, $ as Tooltip, d9 as useAsync, da as PanelGroup, db as Panel, dc as PanelResizeHandle, dd as Burger, de as RouterProvider, df as createRouter$1, dg as createHashHistory, dh as createBrowserHistory, di as createTheme, ax as Portal, A as MantineProvider } from "./vendors.js";
+import { cD as useRouter, cE as isNotFound, cF as Container, bv as Alert, O as Text, cG as Code, P as Button, bc as Group, b8 as rem, bX as Title, cH as Link, cI as useNavigate, bQ as useCallbackRef, cJ as createRootRouteWithContext, cK as stripSearchParams, as as e, cL as Outlet, k as useMantineColorScheme, cM as createFileRoute, cN as useDocumentTitle, b6 as Stack, cO as Loader, cP as useStore, N as ErrorBoundary, cQ as Navigate, d as deepEqual, s as shallowEqual, cR as useParams, v as useIsomorphicLayoutEffect, cS as SimpleGrid, cT as useInViewport, cU as e$1, ce as Card, aI as Box, cV as notFound, a6 as r, bu as useTree, cW as useComputedColorScheme, bw as Tree, aZ as HoverCard, a_ as HoverCardTarget, a$ as HoverCardDropdown, T as ThemeIcon, cX as onMount, r as atom, cd as useLocalStorage, cY as Drawer, bP as ScrollArea, aB as SegmentedControl, at as ActionIcon, ay as Menu, bd as MenuTarget, be as MenuDropdown, bf as MenuItem, aY as CopyButton$1, cZ as Select, c_ as ModalRoot, c$ as ModalOverlay, d0 as ModalContent, d1 as ModalBody, bL as Tabs, bM as TabsList, bN as TabsTab, bO as TabsPanel, d2 as useMatches, d3 as useMantineTheme, d4 as useMediaQuery, d5 as useDisclosure, aC as Divider, b5 as Space, d6 as useParentMatches, d7 as MenuLabel, G as t, $ as t$1, a2 as t$2, a1 as e$2, a0 as t$3, a3 as t$4, z as t$5, a4 as n, g as t$6, a9 as dagre, aa as t$7, ab as t$8, d8 as useSearch, aL as useDebouncedCallback, d9 as LoadingOverlay, da as toBlob, aw as Tooltip, db as useAsync, dc as PanelGroup, dd as Panel, de as PanelResizeHandle, df as Burger, dg as RouterProvider, dh as createRouter$1, di as createHashHistory, dj as createBrowserHistory, dk as createTheme, b2 as Portal, A as MantineProvider } from "./vendors.js";
 import { projects } from "likec4:projects";
 import { c as css, L as LikeC4ProjectsProvider, u as useLikeC4Projects, I as IconRendererProvider, a as LikeC4ModelProvider, b as useUpdateEffect, S as StaticLikeC4Diagram, M as Markdown, B as Box$1, d as useLikeC4Model$1, e as IconStarFilled, f as IconStack2, g as IconLayoutDashboard, h as IconFileCode, i as IconFolderOpen, j as IconFolderFilled, k as IconArrowLeft, l as IconMoonStars, m as IconSun, n as IconChevronDown, o as IconAlertTriangle, p as IconCheck, q as IconCopy, r as IconExternalLink, s as IconShare, t as pickViewBounds, v as LikeC4Diagram, w as useDiagramContext } from "./likec4.js";
 import { pageTitle, ComponentName, useHashHistory, withOverviewGraph, krokiPumlSvgUrl, isDevelopment, krokiD2SvgUrl, basepath } from "./const.js";
@@ -397,15 +397,15 @@ function ViewCard({ view }) {
             value: RichText.from(view.description),
             textScale: 0.75,
             emptyText: "No description",
-            lineClamp: 3,
-            mt: "[2px]",
-            css: {
+            className: css({
+              lineClamp: 3,
+              mt: "1",
               transition: "fast",
               opacity: {
                 base: 0.8,
                 _groupHover: 1
               }
-            }
+            })
           }
         ),
         /* @__PURE__ */ jsx(Link, { to: "/view/$viewId/", params: { viewId: view.id }, search: !0, className: cardLink })
@@ -790,15 +790,17 @@ function ColorSchemeToggle() {
   );
 }
 const cssHeader = css({
+  top: "4",
+  right: "4",
   position: "absolute",
-  backgroundColor: "mantine.colors.body/80",
-  _dark: {
-    backgroundColor: "mantine.colors.dark[6]/60"
-  },
+  layerStyle: "likec4.panel",
+  rounded: "md",
   '#likec4-root:has([data-likec4-diagram-panning="true"]) &': {
     boxShadow: "none",
-    borderRadius: "0px",
-    backgroundColor: "mantine.colors.body"
+    rounded: "0"
+  },
+  _print: {
+    display: "none"
   }
 });
 function SelectProject() {
@@ -1016,14 +1018,9 @@ const Header = memo(() => {
     }
   }), { breakpoints } = useMantineTheme(), isTablet = useMediaQuery(`(min-width: ${breakpoints.md})`) ?? !1, [opened, { open, close }] = useDisclosure(!1);
   return /* @__PURE__ */ jsxs(
-    Paper,
+    Box$1,
     {
       className: cssHeader,
-      top: "0.5rem",
-      right: "0.5rem",
-      p: 4,
-      radius: "sm",
-      shadow: "lg",
       children: [
         /* @__PURE__ */ jsxs(Group, { gap: isTablet ? 6 : 4, wrap: "nowrap", children: [
           isReactDiagramRoute ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1600,8 +1597,9 @@ function ExportPage() {
                 console.error("viewportRef.current is null");
                 return;
               }
+              const x = Math.round(-bounds.x + padding), y = Math.round(-bounds.y + padding);
               [...viewportRef.current.querySelectorAll(".react-flow__viewport")].forEach((el) => {
-                el.style.transform = "translate(" + padding + "px, " + padding + "px)";
+                el.style.transform = "translate(" + x + "px, " + y + "px)";
               }), download && downloadDiagram();
             }
           }