likec4 1.54.0 → 1.55.1

package/__app__/src/likec4.js

@@ -6049,8 +6049,8 @@ function EdgeLabelContainer({
   },
   labelPosition: labelXY,
   className,
-  style: _,
-  // omit styles for container
+  style: contentStyle,
+  // applied to inner content div, not the positioned container
   children,
   ...rest
 }) {
@@ -6086,9 +6086,10 @@ function EdgeLabelContainer({
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          style: labelBBox ? {
-            maxWidth: labelBBox.width + 20
-          } : void 0,
+          style: {
+            ...contentStyle,
+            ...labelBBox && { maxWidth: labelBBox.width + 20 }
+          },
           children
         }
       )
@@ -9079,9 +9080,11 @@ const useElementDetailsActorRef = () => {
   fontStyle: "normal",
   fontWeight: "bold",
   fontSize: "24px",
-  // lineHeight: 1.15,
-  lineHeight: "xs"
-  // color: vars.element.hiContrast
+  lineHeight: "xs",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  wordBreak: "break-word",
+  lineClamp: 2
 }), iconSize$1 = "40px", elementIcon$1 = css({
   flex: `0 0 ${iconSize$1}`,
   height: iconSize$1,
@@ -10888,20 +10891,29 @@ function ElementDetailsCard({
           children: [
             /* @__PURE__ */ jsxs("div", { className: cardHeader, onPointerDown: (e2) => controls.start(e2), children: [
               /* @__PURE__ */ jsxs(HStack, { alignItems: "start", justify: "space-between", gap: "sm", mb: "sm", flexWrap: "nowrap", children: [
-                /* @__PURE__ */ jsxs(HStack, { alignItems: "start", gap: "sm", style: { cursor: "default" }, flexWrap: "nowrap", children: [
-                  elementIcon2,
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        component: "div",
-                        className: title$1,
-                        children: elementModel.title
-                      }
-                    ),
-                    notation && /* @__PURE__ */ jsx(Text, { component: "div", c: "dimmed", fz: "sm", fw: 500, lh: 1.3, lineClamp: 1, children: notation })
-                  ] })
-                ] }),
+                /* @__PURE__ */ jsxs(
+                  HStack,
+                  {
+                    alignItems: "start",
+                    gap: "sm",
+                    style: { cursor: "default", minWidth: 0, overflow: "hidden" },
+                    flexWrap: "nowrap",
+                    children: [
+                      elementIcon2,
+                      /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, overflow: "hidden" }, children: [
+                        /* @__PURE__ */ jsx(Tooltip$2, { label: elementModel.title, openDelay: 600, position: "bottom-start", children: /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            component: "div",
+                            className: title$1,
+                            children: elementModel.title
+                          }
+                        ) }),
+                        notation && /* @__PURE__ */ jsx(Text, { component: "div", c: "dimmed", fz: "sm", fw: 500, lh: 1.3, lineClamp: 1, children: notation })
+                      ] })
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsx(CloseButton, { size: "lg", onClick: triggerClose })
               ] }),
               /* @__PURE__ */ jsxs(HStack, { alignItems: "baseline", gap: "sm", flexWrap: "nowrap", children: [
@@ -10924,7 +10936,7 @@ function ElementDetailsCard({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
                   /* @__PURE__ */ jsx(SmallLabel, { children: "tags" }),
                   /* @__PURE__ */ jsx(
                     ElementTags$2,
@@ -11199,6 +11211,10 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", cssVarLevel = "-
   );
   useLayoutEffect(() => {
     dialogRef.current?.open || dialogRef.current?.showModal();
+    const dialog2 = dialogRef.current;
+    return () => {
+      dialog2?.open && (isClosingRef.current = !0, dialog2.close());
+    };
   }, []), useTimeoutEffect(() => {
     setOpened(!0);
   }, openDelay > 0 ? openDelay : void 0);
@@ -11564,7 +11580,7 @@ const Sizes = {
   },
   edgeLabel: {
     width: 220,
-    height: 14
+    height: 55
     // minlen: 1,
   },
   nodeWidth: 330,
@@ -13597,6 +13613,9 @@ const _actorLogic = setup({
       size: "xxs",
       fontWeight: "medium",
       whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      maxWidth: "160px",
       paddingX: "1",
       paddingY: "0.5",
       rounded: "xs",
@@ -13616,7 +13635,10 @@ const _actorLogic = setup({
     whiteSpaceCollapse: "preserve-breaks",
     fontSize: "sm",
     lineHeight: "sm",
-    userSelect: "all"
+    userSelect: "all",
+    overflowWrap: "anywhere",
+    wordBreak: "break-word",
+    minWidth: 0
   }
 });
 function selectDiagramContext(c) {
@@ -14016,11 +14038,18 @@ const RelationshipPopover = memo$1(() => {
         ] }),
         r2.kind && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
           /* @__PURE__ */ jsx(Label$2, { children: "kind" }),
-          /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r2.kind })
+          /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all", wordBreak: "break-word", minWidth: 0 }), children: r2.kind })
         ] }),
         r2.technology && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
           /* @__PURE__ */ jsx(Label$2, { children: "technology" }),
-          /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r2.technology })
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              className: css({ userSelect: "all", wordBreak: "break-word", minWidth: 0 }),
+              children: r2.technology
+            }
+          )
         ] }),
         r2.summary.nonEmpty && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Label$2, { children: "description" }),

package/__app__/src/routes/index.js

@@ -110,12 +110,12 @@ const theme = createTheme({
   component: RootComponent
 });
 function RootComponent() {
-  const { theme: theme$1 } = Route$2.useSearch(), forceColorScheme = resolveForceColorScheme(theme$1);
+  const { theme: theme$1 } = Route$2.useSearch(), forceColorScheme = resolveForceColorScheme(theme$1), defaultColorScheme = theme$1 === "auto" ? "auto" : __DEFAULT_THEME__;
   return /* @__PURE__ */ jsx(
     MantineProvider,
     {
       theme,
-      defaultColorScheme: "auto",
+      defaultColorScheme,
       ...forceColorScheme && { forceColorScheme },
       children: /* @__PURE__ */ jsx(Outlet, {})
     }

package/__app__/src/routes/projects.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { d1 as createFileRoute, db as Container, bp as Stack, bZ as Title, W as Button, df as Link, dG as notFound, d2 as redirect, Q as m, d0 as Outlet, dH as Navigate, c$ as stripSearchParams, cZ as z } from "../vendors.js";
+import { d1 as createFileRoute, db as Container, bp as Stack, bZ as Title, W as Button, df as Link, dH as notFound, d2 as redirect, Q as m, d0 as Outlet, dI as Navigate, c$ as stripSearchParams, cZ as z } from "../vendors.js";
 import { loadModel } from "likec4:model";
 import { V as ViewOutlet, F as Fallback, L as LikeC4IconRendererContext, l as LikeC4ModelContext, A as AdHocViewEditor, H as Header, E as ExportPage, m as EmbedPage, n as ViewEditor, o as ViewReact, p as ViewAsPuml, q as ViewAsMmd, r as ViewAsDot, s as ViewAsD2 } from "./single.js";
 import { isRpcAvailable } from "likec4:rpc";
@@ -84,12 +84,16 @@ function ViewLayout() {
 }
 const Route$6 = createFileRoute("/project/$projectId/export/$viewId")({
   validateSearch: z.object({
-    download: z.boolean().optional().catch(!1)
+    download: z.boolean().optional().catch(!1),
+    format: z.enum(["png", "jpeg"]).optional().catch("png"),
+    quality: z.number().min(0).max(1).optional().catch(void 0)
   }),
   search: {
     middlewares: [
       stripSearchParams({
-        download: !1
+        download: !1,
+        format: "png",
+        quality: void 0
       })
     ]
   },

package/__app__/src/routes/single.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { d8 as useRouter, d9 as useParams, da as isNotFound, db as Container, br as Alert, U as Text, dc as Code, W as Button, dd as e, de as e$1, as as e$2, bt as Group, bh as rem, df as Link, bZ as Title, d1 as createFileRoute, Q as m, d0 as Outlet, k as useMantineColorScheme, dg as useComputedColorScheme, cY as useNavigate, aA as ActionIcon, c9 as useHotkeys, aI as AnimatePresence, d as deepEqual, s as shallowEqual, dh as useMatches, di as useIsomorphicLayoutEffect, a9 as r, dj as onMount, v as useStore$1, r as atom, bq as useTree, bs as Tree, b6 as HoverCard, b7 as HoverCardTarget, b8 as HoverCardDropdown, R as ThemeIcon, ch as useLocalStorage, dk as Drawer, bP as ScrollArea, S as SegmentedControl, d3 as useDocumentTitle, dl as Burger, dm as SimpleGrid, dn as useInViewport, dp as e$3, ci as Card, aQ as Box$1, d2 as redirect, aF as MotionDiv, cN as isValidMotionProp, aD as Menu, bc as MenuTarget, bd as MenuDropdown, be as MenuItem, dq as MenuDivider, bp as Stack, b5 as CopyButton$1, dr as Select, ds as ModalRoot, dt as ModalOverlay, du as ModalContent, dv as ModalBody, bL as Tabs, bM as TabsList, bN as TabsTab, bO as TabsPanel, dw as useMantineTheme, dx as useMediaQuery, cq as useDisclosure, aG as Divider, dy as MenuLabel, dz as useSearch, dA as LoadingOverlay, dB as toBlob, c$ as stripSearchParams, cZ as z, bS as useCallbackRef, aL as useIsMounted, T as Tooltip, dC as useAsync, dD as Ut, dE as qt, dF as Zt, dG as notFound } from "../vendors.js";
+import { d8 as useRouter, d9 as useParams, da as isNotFound, db as Container, br as Alert, U as Text, dc as Code, W as Button, dd as e, de as e$1, as as e$2, bt as Group, bh as rem, df as Link, bZ as Title, d1 as createFileRoute, Q as m, d0 as Outlet, k as useMantineColorScheme, dg as useComputedColorScheme, cY as useNavigate, aA as ActionIcon, c9 as useHotkeys, aI as AnimatePresence, d as deepEqual, s as shallowEqual, dh as useMatches, di as useIsomorphicLayoutEffect, a9 as r, dj as onMount, v as useStore$1, r as atom, bq as useTree, bs as Tree, b6 as HoverCard, b7 as HoverCardTarget, b8 as HoverCardDropdown, R as ThemeIcon, ch as useLocalStorage, dk as Drawer, bP as ScrollArea, S as SegmentedControl, d3 as useDocumentTitle, dl as Burger, dm as SimpleGrid, dn as useInViewport, dp as e$3, ci as Card, aQ as Box$1, d2 as redirect, aF as MotionDiv, cN as isValidMotionProp, aD as Menu, bc as MenuTarget, bd as MenuDropdown, be as MenuItem, dq as MenuDivider, bp as Stack, b5 as CopyButton$1, dr as Select, ds as ModalRoot, dt as ModalOverlay, du as ModalContent, dv as ModalBody, bL as Tabs, bM as TabsList, bN as TabsTab, bO as TabsPanel, dw as useMantineTheme, dx as useMediaQuery, cq as useDisclosure, aG as Divider, dy as MenuLabel, dz as useSearch, dA as LoadingOverlay, dB as toJpeg, dC as toBlob, c$ as stripSearchParams, cZ as z, bS as useCallbackRef, aL as useIsMounted, T as Tooltip, dD as useAsync, dE as Ut, dF as qt, dG as Zt, dH as notFound } from "../vendors.js";
 import { loadModel } from "likec4:model";
 import { c as css, s as styled, I as IconRendererProvider, a as LikeC4ModelProvider, b as IconMoonStars, d as IconSun, n as normalizeSearch, S as SearchContext, e as SearchControl, F as FramerMotionConfig, O as Overlay, f as bodyCss, g as dialogCss, h as SearchPanelContent, u as useUpdateEffect, i as useLikeC4Model, j as StaticLikeC4Diagram, B as Box, k as IconStarFilled, l as IconStack2, m as IconLayoutDashboard, o as IconFileCode, p as IconFolderOpen, q as IconFolderFilled, r as IconArrowLeft, N as NavigationPanel$1, M as Markdown, t as LikeC4AdHocViewEditor, v as createStyleContext, w as navigationPanel, x as isCssProperty, y as useLikeC4Projects$1, z as IconChevronDown, A as IconAlertTriangle, C as IconCheck, D as IconCopy, E as IconExternalLink, G as IconShare, H as pickViewBounds, J as LikeC4Diagram, K as useDiagramContext, P as useDiagram, Q as useOnDiagramEvent, R as LikeC4EditorProvider } from "../likec4.js";
 import { getProjectIcons } from "likec4:icons";
@@ -262,14 +262,19 @@ function OverviewSearchAdapter({
   return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
 }
 const OverviewSearch = memo(() => {
-  const [isOpened, setIsOpened] = useState(!1), open = useCallback(() => setIsOpened(!0), []), close = useCallback(() => setIsOpened(!1), []);
+  const [isOpened, setIsOpened] = useState(!1), dialogElRef = useRef(null), open = useCallback(() => setIsOpened(!0), []), close = useCallback(() => setIsOpened(!1), []), captureDialogRef = useCallback((node) => {
+    node && (dialogElRef.current = node);
+  }, []), handleExitComplete = useCallback(() => {
+    dialogElRef.current?.open && dialogElRef.current.close(), dialogElRef.current = null;
+  }, []);
   return useHotkeys([
     ["mod+k", open, { preventDefault: !0 }]
   ]), /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SearchControl, { onClick: open }),
-    /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: handleExitComplete, children: isOpened && /* @__PURE__ */ jsx(
       Overlay,
       {
+        ref: captureDialogRef,
         fullscreen: !0,
         withBackdrop: !1,
         backdrop: {
@@ -1102,6 +1107,10 @@ const Header = memo(() => {
 }), enableDownload = (params) => ({
   ...params,
   download: !0
+}), enableJpegDownload = (params) => ({
+  ...params,
+  download: !0,
+  format: "jpeg"
 });
 function ExportButton() {
   const isInsideProject = useMatches({
@@ -1144,6 +1153,21 @@ function ExportButton() {
           children: "Export as .png"
         }
       ),
+      /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          renderRoot: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              target: "_blank",
+              to: isInsideProject ? "/project/$projectId/export/$viewId/" : "/export/$viewId/",
+              search: enableJpegDownload,
+              ...props
+            }
+          ),
+          children: "Export as .jpg"
+        }
+      ),
       /* @__PURE__ */ jsx(
         MenuItem,
         {
@@ -1216,6 +1240,14 @@ function ViewLayout() {
     /* @__PURE__ */ jsx(Header, {})
   ] });
 }
+function triggerDownload(url, filename) {
+  const link = document.createElement("a");
+  return link.setAttribute("download", filename), link.href = url, document.body.appendChild(link), link.click(), new Promise(
+    (resolve) => setTimeout(() => {
+      document.body.removeChild(link), URL.revokeObjectURL(url), resolve();
+    }, 1e3)
+  );
+}
 async function downloadAsPng({
   pngFilename,
   viewport
@@ -1228,20 +1260,39 @@ async function downloadAsPng({
     });
     if (!blob)
       throw new Error("Failed to create PNG blob");
-    var url = URL.createObjectURL(blob), link = document.createElement("a");
-    link.setAttribute("download", `${pngFilename}.png`), link.href = url, document.body.appendChild(link), link.click(), await new Promise((resolve) => setTimeout(resolve, 1e3)), document.body.removeChild(link), URL.revokeObjectURL(url), window.close();
+    const url = URL.createObjectURL(blob);
+    await triggerDownload(url, `${pngFilename}.png`), window.close();
   } catch (err) {
     console.error(err), window.alert("Failed to export to PNG, check the console for more details.");
   }
 }
+async function downloadAsJpeg({
+  filename,
+  viewport,
+  quality = 0.8
+}) {
+  try {
+    const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue("--mantine-color-body"), dataUrl = await toJpeg(viewport, {
+      backgroundColor,
+      quality,
+      cacheBust: !0,
+      // 1x1 transparent GIF used as fallback when remote images fail to load
+      imagePlaceholder: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+    });
+    await triggerDownload(dataUrl, `${filename}.jpg`), window.close();
+  } catch (err) {
+    console.error(err), window.alert("Failed to export to JPEG, check the console for more details.");
+  }
+}
 function ExportPage() {
-  const [diagram] = useCurrentView();
-  return useTransparentBackground(), diagram ? /* @__PURE__ */ jsx(GuardedExportPage, { diagram }) : /* @__PURE__ */ jsx("div", { children: "Loading..." });
+  const [diagram] = useCurrentView(), { format } = useSearch({ strict: !1 }), isJpeg = format === "jpeg";
+  return useTransparentBackground(!isJpeg), diagram ? /* @__PURE__ */ jsx(GuardedExportPage, { diagram, isJpeg }) : /* @__PURE__ */ jsx("div", { children: "Loading..." });
 }
-function GuardedExportPage({ diagram }) {
+function GuardedExportPage({ diagram, isJpeg }) {
   const {
     padding = 20,
     download = !1,
+    quality,
     dynamic
   } = useSearch({
     strict: !1
@@ -1250,7 +1301,11 @@ function GuardedExportPage({ diagram }) {
     if (!download || !viewport || !diagram || downloadedRef.current)
       return;
     const loadingOverlay = loadingOverlayRef.current;
-    loadingOverlay && (loadingOverlay.style.display = "none"), downloadedRef.current = !0, downloadAsPng({
+    loadingOverlay && (loadingOverlay.style.display = "none"), downloadedRef.current = !0, isJpeg ? downloadAsJpeg({
+      filename: diagram.id,
+      viewport,
+      quality: quality ?? 0.8
+    }) : downloadAsPng({
       pngFilename: diagram.id,
       viewport
     });
@@ -1266,7 +1321,6 @@ function GuardedExportPage({ diagram }) {
         left: "0",
         padding: "0",
         margin: "0",
-        background: "transparent",
         overflow: "hidden",
         zIndex: 2
       },
@@ -1276,7 +1330,8 @@ function GuardedExportPage({ diagram }) {
         minWidth: width,
         width,
         minHeight: height,
-        height
+        height,
+        background: isJpeg ? "var(--mantine-color-body)" : "transparent"
       },
       children: [
         download && /* @__PURE__ */ jsx(LoadingOverlay, { ref: loadingOverlayRef, visible: !0 }),
@@ -1291,7 +1346,7 @@ function GuardedExportPage({ diagram }) {
               left: "0px",
               right: "0px"
             },
-            background: "transparent",
+            background: isJpeg ? "solid" : "transparent",
             reduceGraphics: !1,
             dynamicViewVariant: dynamic,
             className: "likec4-static-view",
@@ -1325,12 +1380,16 @@ function GuardedExportPage({ diagram }) {
 }
 const Route$6 = createFileRoute("/_single/export/$viewId")({
   validateSearch: z.object({
-    download: z.boolean().optional().catch(!1)
+    download: z.boolean().optional().catch(!1),
+    format: z.enum(["png", "jpeg"]).optional().catch("png"),
+    quality: z.number().min(0).max(1).optional().catch(void 0)
   }),
   search: {
     middlewares: [
       stripSearchParams({
-        download: !1
+        download: !1,
+        format: "png",
+        quality: void 0
       })
     ]
   },