likec4 1.41.0 → 1.42.0

package/__app__/src/main.js

@@ -1,13 +1,11 @@
 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 { cw as useRouter, cx as isNotFound, cy as Container, b2 as Alert, T as Text, aM as Code, aa as Button, ao as Group, aj as rem, bG as Title, cz as Link, cA as useNavigate, f as useCallbackRef, cB as createRootRouteWithContext, cC as stripSearchParams, R as e, cD as Outlet, cE as useMantineColorScheme, cF as createFileRoute, cG as useDocumentTitle, af as Stack, cH as Loader, cI as useStore, b0 as ErrorBoundary, cJ as Navigate, cK as SimpleGrid, cL as useInViewport, cM as e$1, bZ as Card, an as Box, cN as notFound, cO as useParams, cb as t, s as shallowEqual, cP as useIsomorphicLayoutEffect, bb as r, b1 as useTree, cQ as useComputedColorScheme, b3 as Tree, aI as HoverCard, aJ as HoverCardTarget, aK as HoverCardDropdown, aB as ThemeIcon, cR as onMount, x as atom, bY as useLocalStorage, cS as Drawer, bz as ScrollArea, ap as SegmentedControl, P as ActionIcon, aq as Menu, ar as MenuTarget, as as MenuDropdown, at as MenuItem, aQ as CopyButton$1, cT as Select, cU as ModalRoot, cV as ModalOverlay, cW as ModalContent, cX as ModalBody, bv as Tabs, bw as TabsList, bx as TabsTab, by as TabsPanel, cY as useMatches, cZ as useMantineTheme, c_ as useMediaQuery, c$ as useDisclosure, am as Paper, ae as Divider, ad as Space, d0 as useParentMatches, d1 as MenuLabel, C as t$1, b5 as t$2, b8 as t$3, b7 as e$2, b6 as t$4, b9 as t$5, r as t$6, ba as n, i as t$7, be as dagre, bf as t$8, bg as t$9, d2 as useSearch, a4 as useDebouncedEffect, d3 as LoadingOverlay, a6 as Tooltip, d4 as useAsync, d5 as PanelGroup, d6 as Panel, d7 as PanelResizeHandle, d8 as Burger, d9 as RouterProvider, da as createRouter$1, db as createHashHistory, dc as createBrowserHistory, dd as createTheme, aS as Portal, w as MantineProvider } from "./vendors.js";
+import { cL as useRouter, cM as isNotFound, cN as Container, bk as Alert, at as Text, ab as Code, ad as Button, ac as Group, a$ as rem, b_ as Title, cO as Link, cP as useNavigate, d as useCallbackRef, cQ as createRootRouteWithContext, cR as stripSearchParams, aJ as e, cS as Outlet, O as useMantineColorScheme, cT as createFileRoute, cU as useDocumentTitle, aZ as Stack, cV as Loader, cW as useStore, a8 as ErrorBoundary, cX as Navigate, cY as t, s as shallowEqual, cZ as useParams, S as useIsomorphicLayoutEffect, c_ as SimpleGrid, c$ as useInViewport, j as e$1, ch as Card, ar as Box, d0 as notFound, bv as r, bj as useTree, d1 as useComputedColorScheme, bl as Tree, aB as HoverCard, aC as HoverCardTarget, aD as HoverCardDropdown, ak as ThemeIcon, d2 as onMount, Q as atom, cg as useLocalStorage, d3 as Drawer, bT as ScrollArea, aS as SegmentedControl, ai as ActionIcon, b3 as Menu, b4 as MenuTarget, b5 as MenuDropdown, b6 as MenuItem, aR as CopyButton$1, d4 as Select, d5 as ModalRoot, d6 as ModalOverlay, d7 as ModalContent, d8 as ModalBody, bP as Tabs, bQ as TabsList, bR as TabsTab, bS as TabsPanel, d9 as useMatches, da as useMantineTheme, db as useMediaQuery, dc as useDisclosure, b2 as Paper, aY as Divider, aX as Space, dd as useParentMatches, de as MenuLabel, a3 as t$1, bo as t$2, br as t$3, bq as e$2, bp as t$4, bs as t$5, V as t$6, bt as n, k as t$7, by as dagre, bn as DefaultMap, bz as t$8, bA as t$9, df as useSearch, aw as useDebouncedCallback, dg as LoadingOverlay, dh as toBlob, al as Tooltip, di as useAsync, dj as PanelGroup, dk as Panel, dl as PanelResizeHandle, dm as Burger, dn as RouterProvider, dp as createRouter$1, dq as createHashHistory, dr as createBrowserHistory, ds as createTheme, aU as Portal, X 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 useLikeC4Model$1, S as StaticLikeC4Diagram, M as MarkdownBlock, B as Box$1, d as useUpdateEffect, 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 LikeC4Diagram } from "./likec4.js";
+import { c as css, L as LikeC4ProjectsProvider, u as useLikeC4Projects, I as IconRendererProvider, a as LikeC4ModelProvider, S as StaticLikeC4Diagram, M as Markdown, R as RichText, B as Box$1, b as useLikeC4Model$1, n as nonexhaustive, d as compareNatural, e as useUpdateEffect, f as IconStarFilled, g as IconStack2, h as IconLayoutDashboard, i as IconFileCode, j as IconFolderOpen, k as IconFolderFilled, l as IconArrowLeft, m as IconMoonStars, o as IconSun, p as IconChevronDown, q as IconAlertTriangle, r as IconCheck, s as IconCopy, t as IconExternalLink, v as IconShare, w as computeRelationshipsView, x as toArray, y as sortParentsFirst, z as exact, A as invariant, C as isDescendantOf, D as isAncestor, E as nonNullable, F as getViewBounds, G as LikeC4Diagram, H as useDiagramContext } from "./likec4.js";
 import { pageTitle, ComponentName, useHashHistory, withOverviewGraph, krokiPumlSvgUrl, isDevelopment, krokiD2SvgUrl, basepath } from "./const.js";
 import { loadModel } from "likec4:model";
-import { nonexhaustive, compareNatural, toArray, sortParentsFirst, invariant, DefaultMap, isDescendantOf, isAncestor, nonNullable } from "@likec4/core/utils";
-import { computeRelationshipsView } from "@likec4/core/compute-view/relationships";
 function Fallback$1({ error, resetErrorBoundary }) {
   const router = useRouter();
   return isNotFound(error) ? /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", children: [
@@ -85,7 +83,7 @@ function NotFound() {
 }
 function LikeC4ProjectsContext({ children }) {
   const navigate = useNavigate(), onProjectChange = useCallbackRef((projectId) => {
-    navigate({ to: "/project/$projectId/", params: { projectId } });
+    navigate({ to: "/project/$projectId/", params: { projectId } }).catch(console.error);
   });
   return /* @__PURE__ */ jsx(
     LikeC4ProjectsProvider,
@@ -109,6 +107,11 @@ const asTheme = (v) => {
       return Math.round(parseFloat(v));
   }
   return 20;
+}, asDynamicVariant = (v) => {
+  if (typeof v != "string")
+    return "diagram";
+  const vlower = v.toLowerCase();
+  return vlower === "diagram" || vlower === "sequence" ? vlower : "diagram";
 }, Route$m = createRootRouteWithContext()({
   component: RootComponent,
   validateSearch: (search) => ({
@@ -117,13 +120,17 @@ const asTheme = (v) => {
     },
     ...e(search.theme) && {
       theme: asTheme(search.theme)
+    },
+    ...e(search.dynamic) && {
+      dynamic: asDynamicVariant(search.dynamic)
     }
   }),
   search: {
     middlewares: [
       stripSearchParams({
         padding: 20,
-        theme: "auto"
+        theme: "auto",
+        dynamic: "diagram"
       })
     ]
   }
@@ -172,16 +179,18 @@ const ProjectIcons = lazy(async () => {
 }), ProjectIconRenderer = (props) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loader, { className: "pending", type: "oval", size: "xs" }), children: /* @__PURE__ */ jsx(ProjectIcons, { ...props }) });
 let _renderers = {};
 function LikeC4IconRendererContext({ children, projectId }) {
-  const IconRenderer = _renderers[projectId] ?? (_renderers[projectId] = (props) => /* @__PURE__ */ jsx(ProjectIconRenderer, { ...props, projectId }));
+  const IconRenderer = _renderers[projectId] ??= (props) => /* @__PURE__ */ jsx(ProjectIconRenderer, { ...props, projectId });
   return /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer, children });
 }
-const LikeC4ModelDataContext = createContext(null);
-function useLikeC4ModelDataAtom() {
-  return useContext(LikeC4ModelDataContext);
-}
+const LikeC4ModelDataContext = createContext(null), LikeC4ModelDataContextProvider = LikeC4ModelDataContext.Provider, useLikeC4ModelDataAtom = () => {
+  const ctx = useContext(LikeC4ModelDataContext);
+  if (ctx === null)
+    throw new Error("LikeC4ModelDataAtom is not provided");
+  return ctx;
+};
 function LikeC4ModelContext({ likec4data, likec4model, children }) {
   const model = useStore(likec4model);
-  return /* @__PURE__ */ jsx(LikeC4ModelDataContext.Provider, { value: likec4data, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children }) });
+  return /* @__PURE__ */ jsx(LikeC4ModelDataContextProvider, { value: likec4data, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children }) });
 }
 css({
   position: "absolute",
@@ -258,6 +267,42 @@ const Route$j = createFileRoute("/")({
     }
   )
 });
+function useTransparentBackground(enabled = !0) {
+  useIsomorphicLayoutEffect(() => {
+    const htmlEl = document.body.parentElement;
+    if (!htmlEl || enabled !== !0) return;
+    const classname = "transparent-bg";
+    return htmlEl.classList.add(classname), () => {
+      htmlEl.classList.remove(classname);
+    };
+  }, [enabled]);
+}
+function useLikeC4Views() {
+  const $likec4data = useLikeC4ModelDataAtom(), [views, setViews] = useState([]);
+  return useEffect(() => $likec4data.subscribe((next) => {
+    setViews((prev) => {
+      const nextViews = t(next.views);
+      return shallowEqual(prev, nextViews) ? prev : nextViews;
+    });
+  }), [$likec4data]), views;
+}
+function useCurrentViewId() {
+  return useParams({
+    select: (params) => params.viewId ?? "index",
+    strict: !1
+  });
+}
+function useCurrentDiagram() {
+  const viewId = useCurrentViewId();
+  return useLikeC4Views().find((v) => v.id === viewId) ?? null;
+}
+function useCurrentProject() {
+  const projects2 = useLikeC4Projects(), projectId = useParams({
+    select: (params) => params.projectId,
+    strict: !1
+  });
+  return projects2.find((p) => p.id === projectId) ?? projects2[0];
+}
 css({
   color: "mantine.colors.dimmed"
 });
@@ -291,7 +336,7 @@ const previewBg = css({
 });
 function RouteComponent$1() {
   useDocumentTitle(pageTitle);
-  const views = [...useLikeC4Model$1().views()];
+  const views = useLikeC4Views();
   return /* @__PURE__ */ jsx(Container, { size: "xl", children: /* @__PURE__ */ jsx(
     SimpleGrid,
     {
@@ -323,7 +368,7 @@ function ViewCard({ view }) {
           StaticLikeC4Diagram,
           {
             background: "transparent",
-            view: view.$view,
+            view,
             fitView: !0,
             fitViewPadding: "4px",
             reduceGraphics: !0
@@ -331,9 +376,9 @@ function ViewCard({ view }) {
         ) }) }),
         /* @__PURE__ */ jsx(Group, { justify: "space-between", mt: "md", children: /* @__PURE__ */ jsx(Text, { fw: 500, children: view.title ?? view.id }) }),
         /* @__PURE__ */ jsx(
-          MarkdownBlock,
+          Markdown,
           {
-            value: view.description,
+            value: RichText.from(view.description),
             textScale: 0.75,
             emptyText: "No description",
             lineClamp: 3,
@@ -464,42 +509,6 @@ function WebcomponentPage() {
     }
   );
 }
-function useTransparentBackground(enabled = !0) {
-  useIsomorphicLayoutEffect(() => {
-    const htmlEl = document.body.parentElement;
-    if (!htmlEl || enabled !== !0) return;
-    const classname = "transparent-bg";
-    return htmlEl.classList.add(classname), () => {
-      htmlEl.classList.remove(classname);
-    };
-  }, [enabled]);
-}
-function useLikeC4Views() {
-  const $likec4data = useLikeC4ModelDataAtom(), [views, setViews] = useState([]);
-  return useEffect(() => $likec4data.subscribe((next) => {
-    setViews((prev) => {
-      const nextViews = t(next.views);
-      return shallowEqual(prev, nextViews) ? prev : nextViews;
-    });
-  }), [$likec4data]), views;
-}
-function useCurrentViewId() {
-  return useParams({
-    select: (params) => params.viewId ?? "index",
-    strict: !1
-  });
-}
-function useCurrentDiagram() {
-  const viewId = useCurrentViewId();
-  return useLikeC4Views().find((v) => v.id === viewId) ?? null;
-}
-function useCurrentProject() {
-  const projects2 = useLikeC4Projects(), projectId = useParams({
-    select: (params) => params.projectId,
-    strict: !1
-  });
-  return projects2.find((p) => p.id === projectId) ?? projects2[0];
-}
 const isTreeNodeData = (node) => "type" in node && ["file", "folder", "view", "deployment-view"].includes(node.type);
 function dropFilename(relativePath) {
   return relativePath === "" ? "" : relativePath.split("/").slice(0, -1).join("/");
@@ -531,10 +540,10 @@ function buildDiagramTreeData(views, groupBy) {
     let relativePath;
     switch (groupBy) {
       case "by-files":
-        relativePath = view.$view.relativePath ?? "";
+        relativePath = view.$view.sourcePath ?? "";
         break;
       case "by-folders":
-        relativePath = dropFilename(view.$view.relativePath ?? "");
+        relativePath = dropFilename(view.$view.sourcePath ?? "");
         break;
       case "none":
         relativePath = "";
@@ -567,21 +576,21 @@ const isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIco
         viewId: viewId2
       })
     });
-  }, diagram = useCurrentDiagram(), viewId = (diagram == null ? void 0 : diagram.id) ?? null, tree = useTree({
+  }, diagram = useCurrentDiagram(), viewId = diagram?.id ?? null, tree = useTree({
     multiple: !1
   });
   tree.setHoveredNode = setHoveredNode;
-  const relativePath = (diagram == null ? void 0 : diagram.relativePath) ?? null;
+  const sourcePath = diagram?.sourcePath ?? null;
   useUpdateEffect(() => {
     tree.collapseAllNodes();
   }, [groupBy]), useEffect(() => {
-    if (relativePath) {
-      const segments = relativePath.split("/");
+    if (sourcePath) {
+      const segments = sourcePath.split("/");
       let path = "@fs";
       for (const segment of segments)
         path += `/${segment}`, tree.expand(path);
     }
-  }, [relativePath, groupBy]), useEffect(() => {
+  }, [sourcePath, groupBy]), useEffect(() => {
     viewId && tree.select(viewId);
   }, [viewId]);
   const theme2 = useComputedColorScheme();
@@ -892,7 +901,11 @@ function WebcomponentsPanel({ diagram }) {
     window.location.href
   ).href}"><\/script>
 `.trim(), htmlCode = `
-  <${ComponentName.View} view-id="${encodeURIComponent(diagram.id)}"></${ComponentName.View}>
+<${ComponentName.View}
+   view-id="${encodeURIComponent(diagram.id)}"
+   browser="true"
+   dynamic-variant="sequence">
+</${ComponentName.View}>
 `.trim(), webcomponentPreview = router.buildLocation(
     {
       to: "/webcomponent/$",
@@ -1283,7 +1296,6 @@ function applyDagreLayout(g) {
   };
 }
 function layoutRelationshipsView(data) {
-  var _a, _b;
   const g = createGraph(), incomers = createNodes("in", data.incomers, g), subjects = createNodes("subject", data.subjects, g), outgoers = createNodes("out", data.outgoers, g), edges = [];
   t$1(
     t$5(
@@ -1332,7 +1344,7 @@ function layoutRelationshipsView(data) {
     const nodeId = subjectNode.id, node = g.node(nodeId);
     if (node.isCompound)
       continue;
-    const edgeCount = Math.max(((_a = g.inEdges(nodeId)) == null ? void 0 : _a.length) ?? 0, ((_b = g.outEdges(nodeId)) == null ? void 0 : _b.length) ?? 0);
+    const edgeCount = Math.max(g.inEdges(nodeId)?.length ?? 0, g.outEdges(nodeId)?.length ?? 0);
     edgeCount > 2 && (node.height = node.height + (edgeCount - 3) * 14);
   }
   const dagreBounds = applyDagreLayout(g), nodeIds = [
@@ -1346,7 +1358,7 @@ function layoutRelationshipsView(data) {
     t$6((n2) => [n2.id, dagreBounds(n2.id)])
   );
   function nodeBounds(nodeId) {
-    return _calculatedNodeBounds[nodeId] ?? (_calculatedNodeBounds[nodeId] = t$1(
+    return _calculatedNodeBounds[nodeId] ??= t$1(
       g.children(nodeId) ?? [],
       n((id) => !id.endsWith(PortSuffix)),
       t$3((id) => nodeBounds(id)),
@@ -1371,7 +1383,7 @@ function layoutRelationshipsView(data) {
           height: maxY - minY2
         };
       }
-    ));
+    );
   }
   function nodeLevel(nodeId) {
     const parent = g.parent(nodeId);
@@ -1383,16 +1395,14 @@ function layoutRelationshipsView(data) {
   }
   let minX = 0, minY = 0;
   const nodes = nodeIds.map(({ id }) => {
-    var _a2;
     const { element } = g.node(id);
     let { position, width, height } = nodeBounds(id);
     const parentId = g.parent(id), children = (g.children(id) ?? []).filter((c) => !c.endsWith(PortSuffix));
     minX = Math.min(minX, position.x), minY = Math.min(minY, position.y);
-    const navigateTo = ((_a2 = element.defaultView) == null ? void 0 : _a2.id) ?? null;
-    return {
+    const navigateTo = element.defaultView?.id ?? null, { icon, shape, color, ...style } = element.style;
+    return exact({
       id,
       parent: parentId ?? null,
-      position: [position.x, position.y],
       x: position.x,
       y: position.y,
       title: element.title,
@@ -1400,8 +1410,9 @@ function layoutRelationshipsView(data) {
       technology: element.technology,
       tags: element.tags,
       links: null,
-      color: element.color,
-      shape: element.shape,
+      color,
+      shape,
+      icon,
       modelRef: element.id,
       kind: element.kind,
       level: nodeLevel(id),
@@ -1411,9 +1422,7 @@ function layoutRelationshipsView(data) {
         width,
         height
       },
-      style: {
-        ...element.$element.style
-      },
+      style,
       navigateTo,
       inEdges: [],
       outEdges: [],
@@ -1421,7 +1430,7 @@ function layoutRelationshipsView(data) {
       children,
       width,
       height
-    };
+    });
   });
   return {
     bounds: {
@@ -1433,7 +1442,7 @@ function layoutRelationshipsView(data) {
     nodes,
     edges: g.edges().map((e2) => {
       const edge = g.edge(e2), ename = e2.name;
-      invariant(ename, `Edge ${e2} has no name`);
+      invariant(ename, "Edge has no name");
       const { name, source, target, relations } = r(edges, (e22) => e22.name === ename), points = edge.points.map((p) => [p.x, p.y]);
       return invariant(t$7(points, 1), `Edge ${name} has less than 2 points`), {
         id: name,
@@ -1442,7 +1451,9 @@ function layoutRelationshipsView(data) {
         label: null,
         relations: relations.map((r2) => r2.id),
         parent: null,
-        points
+        points,
+        color: "gray",
+        line: "dashed"
       };
     })
   };
@@ -1474,7 +1485,6 @@ async function downloadAsPng({
   pngFilename,
   viewport
 }) {
-  const { toBlob } = await import("./vendors.js").then((n2) => n2.de);
   try {
     const blob = await toBlob(viewport, {
       backgroundColor: "transparent",
@@ -1492,44 +1502,43 @@ async function downloadAsPng({
 function ExportPage() {
   const {
     padding = 20,
-    download = !1
+    download = !1,
+    dynamic
   } = useSearch({
     strict: !1
   }), diagram = useCurrentDiagram(), viewportRef = useRef(null), loadingOverlayRef = useRef(null), downloadedRef = useRef(!1);
-  if (useTransparentBackground(), useEffect(
-    () => {
-      if (!viewportRef.current)
-        return;
-      [...viewportRef.current.querySelectorAll(".react-flow__viewport")].forEach((el) => {
-        el.style.transform = "translate(" + padding + "px, " + padding + "px)";
-      });
-    }
-  ), useDebouncedEffect(
+  useTransparentBackground();
+  const downloadDiagram = useDebouncedCallback(
     () => {
       const viewport = viewportRef.current;
-      if (!download || !viewport || !diagram)
+      if (!download || !viewport || !diagram || downloadedRef.current)
         return;
       const loadingOverlay = loadingOverlayRef.current;
-      loadingOverlay && (loadingOverlay.style.display = "none"), !downloadedRef.current && (downloadedRef.current = !0, downloadAsPng({
+      loadingOverlay && (loadingOverlay.style.display = "none"), downloadedRef.current = !0, downloadAsPng({
         pngFilename: diagram.id,
         viewport
-      }));
+      });
     },
     [diagram],
     500
-  ), !diagram)
+  );
+  if (!diagram)
     return /* @__PURE__ */ jsx("div", { children: "Loading..." });
-  const extraPadding = 16, width = diagram.bounds.width + padding * 2 + extraPadding, height = diagram.bounds.height + padding * 2 + extraPadding;
+  const bounds = getViewBounds(diagram, dynamic), extraPadding = 16, width = bounds.width + padding * 2 + extraPadding, height = bounds.height + padding * 2 + extraPadding;
   return /* @__PURE__ */ jsxs(
     Box$1,
     {
       ref: viewportRef,
       "data-testid": "export-page",
       css: {
+        position: "fixed",
+        top: "0",
+        left: "0",
         padding: "0",
         margin: "0",
         background: "transparent",
-        overflow: "hidden"
+        overflow: "hidden",
+        zIndex: 2
       },
       style: {
         marginRight: "auto",
@@ -1542,15 +1551,43 @@ function ExportPage() {
       children: [
         download && /* @__PURE__ */ jsx(LoadingOverlay, { ref: loadingOverlayRef, visible: !0 }),
         /* @__PURE__ */ jsx(
-          StaticLikeC4Diagram,
+          LikeC4Diagram,
           {
             view: diagram,
             fitView: !1,
-            fitViewPadding: 0,
+            fitViewPadding: {
+              top: "0px",
+              bottom: "0px",
+              left: "0px",
+              right: "0px"
+            },
             background: "transparent",
             reduceGraphics: !1,
-            initialWidth: diagram.bounds.width,
-            initialHeight: diagram.bounds.height
+            dynamicViewVariant: dynamic,
+            readonly: !0,
+            className: "likec4-static-view",
+            pannable: !1,
+            zoomable: !1,
+            controls: !1,
+            showNotations: !1,
+            enableElementDetails: !1,
+            enableRelationshipDetails: !1,
+            enableRelationshipBrowser: !1,
+            enableDynamicViewWalkthrough: !1,
+            enableFocusMode: !1,
+            enableSearch: !1,
+            nodesSelectable: !1,
+            nodesDraggable: !1,
+            enableElementTags: !1,
+            onInitialized: () => {
+              if (!viewportRef.current) {
+                console.error("viewportRef.current is null");
+                return;
+              }
+              [...viewportRef.current.querySelectorAll(".react-flow__viewport")].forEach((el) => {
+                el.style.transform = "translate(" + padding + "px, " + padding + "px)";
+              }), download && downloadDiagram();
+            }
           }
         )
       ]
@@ -1569,10 +1606,16 @@ const asBoolean$1 = (v) => {
   })
 });
 function EmbedPage() {
-  const { padding = 20 } = useSearch({
+  const {
+    padding = 20,
+    dynamic
+  } = useSearch({
     strict: !1
   }), diagram = useCurrentDiagram();
-  return useTransparentBackground(!!diagram), diagram ? /* @__PURE__ */ jsx(
+  if (useTransparentBackground(!!diagram), !diagram)
+    return /* @__PURE__ */ jsx("div", { children: "Loading..." });
+  const bounds = getViewBounds(diagram, dynamic);
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -1582,9 +1625,9 @@ function EmbedPage() {
         boxSizing: "border-box",
         padding,
         transform: "translateX(-50%)",
-        aspectRatio: `${diagram.bounds.width + padding * 2} / ${diagram.bounds.height + padding * 2}`,
+        aspectRatio: `${bounds.width + padding * 2} / ${bounds.height + padding * 2}`,
         width: "100vw",
-        maxWidth: diagram.bounds.width + padding * 2,
+        maxWidth: bounds.width + padding * 2,
         height: "auto",
         maxHeight: "100vh"
       },
@@ -1595,19 +1638,21 @@ function EmbedPage() {
           fitView: !0,
           background: "transparent",
           fitViewPadding: 0,
-          initialWidth: diagram.bounds.width,
-          initialHeight: diagram.bounds.height
+          dynamicViewVariant: dynamic,
+          initialWidth: bounds.width,
+          initialHeight: bounds.height
         }
       )
     }
-  ) : /* @__PURE__ */ jsx("div", { children: "Loading..." });
+  );
 }
 const Route$b = createFileRoute("/_single/embed/$viewId")({
   component: EmbedPage
 });
 function ViewReact() {
-  var _a;
-  const navigate = useNavigate(), view = useCurrentDiagram(), model = useLikeC4Model$1(), onNavigateTo = useCallbackRef((viewId) => {
+  const navigate = useNavigate(), view = useCurrentDiagram(), model = useLikeC4Model$1(), { dynamic } = useSearch({
+    from: "__root__"
+  }), onNavigateTo = useCallbackRef((viewId) => {
     navigate({
       to: "./",
       viewTransition: !1,
@@ -1620,7 +1665,7 @@ function ViewReact() {
   }), title2 = view ? view.title ?? view.id : "View not found", pageTitle$1 = model.project.title ?? pageTitle;
   if (useDocumentTitle(`${title2} - ${pageTitle$1}`), !view)
     return /* @__PURE__ */ jsx(NotFound, {});
-  const hasNotations = (((_a = view.notation) == null ? void 0 : _a.nodes) ?? []).length > 0;
+  const hasNotations = (view.notation?.nodes ?? []).length > 0;
   return /* @__PURE__ */ jsx(
     LikeC4Diagram,
     {
@@ -1628,17 +1673,18 @@ function ViewReact() {
       readonly: !0,
       zoomable: !0,
       pannable: !0,
-      controls: "next",
+      controls: !0,
       fitViewPadding: {
         top: "70px",
-        bottom: "16px",
-        left: "16px",
-        right: "16px"
+        bottom: "32px",
+        left: "32px",
+        right: "32px"
       },
-      showDiagramTitle: !0,
       showNavigationButtons: !0,
+      enableSearch: !0,
       enableFocusMode: !0,
       enableDynamicViewWalkthrough: !0,
+      dynamicViewVariant: dynamic,
       enableElementDetails: !0,
       enableRelationshipDetails: !0,
       enableRelationshipBrowser: !0,
@@ -1652,10 +1698,23 @@ function ViewReact() {
         navigate({
           to: "/"
         });
-      }
+      },
+      children: /* @__PURE__ */ jsx(DiagramListener, {})
     }
   );
 }
+function DiagramListener() {
+  const router = useRouter(), dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
+  return useUpdateEffect(() => {
+    (router.latestLocation.search.dynamic ?? "diagram") !== dynamicViewVariant && router.buildAndCommitLocation({
+      search: (current) => ({
+        ...current,
+        dynamic: dynamicViewVariant
+      }),
+      viewTransition: !1
+    });
+  }, [dynamicViewVariant]), null;
+}
 const Route$a = createFileRoute("/_single/view/$viewId/")({
   component: ViewReact
 }), Route$9 = createFileRoute("/project/$projectId/view/$viewId")({
@@ -1710,8 +1769,8 @@ const cssScrollArea = css({
       return {
         source: pumlSource(viewId)
       };
-    } catch {
-      throw notFound();
+    } catch (error) {
+      throw console.error(error), notFound();
     }
   }
 }), fetchFromKroki$1 = async (puml) => await (await fetch(krokiPumlSvgUrl, {
@@ -1726,7 +1785,6 @@ const cssScrollArea = css({
   }
 })).text();
 function ViewAsPuml() {
-  var _a;
   const { source } = Route$6.useLoaderData(), [krokiSvg, { execute }] = useAsync(fetchFromKroki$1, null);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsPuml", children: [
@@ -1766,7 +1824,7 @@ function ViewAsPuml() {
               children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
             }
           ),
-          krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box, { children: (_a = krokiSvg.error) == null ? void 0 : _a.message })
+          krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box, { children: krokiSvg.error?.message })
         ] }),
         krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box, { children: "Empty result" }) })
       ] }) })
@@ -1799,8 +1857,8 @@ const Route$5 = createFileRoute("/_single/view/$viewId/mmd")({
       return {
         source: mmdSource(viewId)
       };
-    } catch {
-      throw notFound();
+    } catch (error) {
+      throw console.error(error), notFound();
     }
   }
 }), renderSvg = async (viewId, diagram) => {
@@ -1862,7 +1920,6 @@ function ViewAsMmd() {
   ] });
 }
 function ViewEditor() {
-  var _a;
   const router = useRouter(), view = useCurrentDiagram(), onNavigateTo = useCallbackRef((viewId) => {
     const loc = router.buildLocation({
       to: ".",
@@ -1876,7 +1933,7 @@ function ViewEditor() {
   });
   if (!view)
     return /* @__PURE__ */ jsx(NotFound, {});
-  const hasNotations = (((_a = view.notation) == null ? void 0 : _a.nodes) ?? []).length > 0;
+  const hasNotations = (view.notation?.nodes ?? []).length > 0;
   return /* @__PURE__ */ jsx(
     LikeC4Diagram,
     {
@@ -1884,18 +1941,18 @@ function ViewEditor() {
       readonly: !1,
       zoomable: !0,
       pannable: !0,
-      controls: "next",
+      controls: !0,
       nodesDraggable: !0,
       experimentalEdgeEditing: !0,
       fitViewPadding: {
         top: "70px",
-        bottom: "10px",
+        bottom: "32px",
         left: "50px",
-        right: "10px"
+        right: "32px"
       },
-      showDiagramTitle: !0,
       showNavigationButtons: !0,
       showNotations: isDevelopment || hasNotations,
+      enableSearch: !0,
       enableDynamicViewWalkthrough: !0,
       enableFocusMode: !0,
       enableElementDetails: !0,
@@ -1988,8 +2045,8 @@ const Route$2 = createFileRoute("/_single/view/$viewId/d2")({
       return {
         source: d2Source(viewId)
       };
-    } catch {
-      throw notFound();
+    } catch (error) {
+      throw console.error(error), notFound();
     }
   }
 }), fetchFromKroki = async (d2) => await (await fetch(krokiD2SvgUrl, {
@@ -2007,7 +2064,6 @@ const Route$2 = createFileRoute("/_single/view/$viewId/d2")({
   }
 })).text();
 function ViewAsD2() {
-  var _a;
   const { source } = Route$2.useLoaderData(), [krokiSvg, { execute }] = useAsync(fetchFromKroki, null);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsD2", children: [
@@ -2047,7 +2103,7 @@ function ViewAsD2() {
               children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
             }
           ),
-          krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box, { children: (_a = krokiSvg.error) == null ? void 0 : _a.message })
+          krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box, { children: krokiSvg.error?.message })
         ] }),
         krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box, { children: "Empty result" }) })
       ] }) })