likec4 1.43.0 → 1.45.0

package/__app__/src/main.js

@@ -1,11 +1,15 @@
 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 { cN as useRouter, cO as isNotFound, cP as Container, bk as Alert, as as Text, aa as Code, ac as Button, ab as Group, a_ as rem, b_ as Title, cQ as Link, cR as useNavigate, d as useCallbackRef, cS as createRootRouteWithContext, cT as stripSearchParams, aI as e, cU as Outlet, O as useMantineColorScheme, cV as createFileRoute, cW as useDocumentTitle, aY as Stack, cX as Loader, cY as useStore, a7 as ErrorBoundary, cZ as Navigate, c_ as t, s as shallowEqual, c$ as useParams, S as useIsomorphicLayoutEffect, d0 as SimpleGrid, d1 as useInViewport, j as e$1, ch as Card, aq as Box, d2 as notFound, bv as r, bj as useTree, d3 as useComputedColorScheme, bl as Tree, aA as HoverCard, aB as HoverCardTarget, aC as HoverCardDropdown, aj as ThemeIcon, d4 as onMount, R as atom, cg as useLocalStorage, d5 as Drawer, bT as ScrollArea, aR as SegmentedControl, ah as ActionIcon, b2 as Menu, b3 as MenuTarget, b4 as MenuDropdown, b5 as MenuItem, aQ as CopyButton$1, d6 as Select, d7 as ModalRoot, d8 as ModalOverlay, d9 as ModalContent, da as ModalBody, bP as Tabs, bQ as TabsList, bR as TabsTab, bS as TabsPanel, db as useMatches, dc as useMantineTheme, dd as useMediaQuery, de as useDisclosure, b1 as Paper, aX as Divider, aW as Space, df as useParentMatches, dg as MenuLabel, a2 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, dh as useSearch, av as useDebouncedCallback, di as LoadingOverlay, dj as toBlob, ak as Tooltip, dk as useAsync, dl as PanelGroup, dm as Panel, dn as PanelResizeHandle, dp as Burger, dq as RouterProvider, dr as createRouter$1, ds as createHashHistory, dt as createBrowserHistory, du as createTheme, aT as Portal, X 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, 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 { 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";
 import { loadModel } from "likec4:model";
+import { RichText } from "@likec4/core/types";
+import { nonexhaustive, compareNatural, toArray, sortParentsFirst, invariant, DefaultMap, isDescendantOf, isAncestor, nonNullable } from "@likec4/core/utils";
+import { exact } from "@likec4/core";
+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: [
@@ -182,15 +186,15 @@ function LikeC4IconRendererContext({ children, projectId }) {
   const IconRenderer = _renderers[projectId] ??= (props) => /* @__PURE__ */ jsx(ProjectIconRenderer, { ...props, projectId });
   return /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer, children });
 }
-const LikeC4ModelDataContext = createContext(null), LikeC4ModelDataContextProvider = LikeC4ModelDataContext.Provider, useLikeC4ModelDataAtom = () => {
+const LikeC4ModelDataContext = createContext(null), LikeC4ModelDataContextProvider = LikeC4ModelDataContext.Provider, useLikeC4ModelAtom = () => {
   const ctx = useContext(LikeC4ModelDataContext);
   if (ctx === null)
-    throw new Error("LikeC4ModelDataAtom is not provided");
+    throw new Error("LikeC4ModelAtom is not provided");
   return ctx;
 };
 function LikeC4ModelContext({ likec4data, likec4model, children }) {
   const model = useStore(likec4model);
-  return /* @__PURE__ */ jsx(LikeC4ModelDataContextProvider, { value: likec4data, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children }) });
+  return /* @__PURE__ */ jsx(LikeC4ModelDataContextProvider, { value: likec4model, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children }) });
 }
 css({
   position: "absolute",
@@ -278,13 +282,16 @@ function useTransparentBackground(enabled = !0) {
   }, [enabled]);
 }
 function useLikeC4Views() {
-  const $likec4data = useLikeC4ModelDataAtom(), [views, setViews] = useState([]);
-  return useEffect(() => $likec4data.subscribe((next) => {
+  const $likec4model = useLikeC4ModelAtom(), [views, setViews] = useState([]);
+  return useEffect(() => $likec4model.subscribe((next) => {
     setViews((prev) => {
-      const nextViews = t(next.views);
+      const nextViews = [...next.views()].map((v) => {
+        const n2 = v.$layouted, p = prev.find((_) => _.id === v.id);
+        return p && deepEqual(n2, p) ? p : n2;
+      });
       return shallowEqual(prev, nextViews) ? prev : nextViews;
     });
-  }), [$likec4data]), views;
+  }), [$likec4model]), views;
 }
 function useCurrentViewId() {
   return useParams({
@@ -292,9 +299,18 @@ function useCurrentViewId() {
     strict: !1
   });
 }
-function useCurrentDiagram() {
-  const viewId = useCurrentViewId();
-  return useLikeC4Views().find((v) => v.id === viewId) ?? null;
+function useCurrentView() {
+  const viewId = useCurrentViewId(), $likec4model = useLikeC4ModelAtom(), [layoutType, setLayoutType] = useState("manual");
+  useUpdateEffect(() => {
+    setLayoutType("manual");
+  }, [viewId]);
+  const [view, setView] = useState($likec4model.value?.findView(viewId)?.$layouted ?? null);
+  return useEffect(() => $likec4model.subscribe((next) => {
+    setView((current) => {
+      const vm = next.findView(viewId), nextView = (layoutType === "manual" ? vm?.$layouted : vm?.$view) ?? null;
+      return deepEqual(current, nextView) ? current : nextView;
+    });
+  }), [$likec4model, viewId, layoutType]), [view, setLayoutType];
 }
 function useCurrentProject() {
   const projects2 = useLikeC4Projects(), projectId = useParams({
@@ -381,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 })
@@ -576,7 +592,7 @@ const isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIco
         viewId: viewId2
       })
     });
-  }, diagram = useCurrentDiagram(), viewId = diagram?.id ?? null, tree = useTree({
+  }, [diagram] = useCurrentView(), viewId = diagram?.id ?? null, tree = useTree({
     multiple: !1
   });
   tree.setHoveredNode = setHoveredNode;
@@ -774,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() {
@@ -967,7 +985,7 @@ function WebcomponentsPanel({ diagram }) {
 function ShareModal({
   onClose
 }) {
-  const diagram = useCurrentDiagram(), [activeTab, setActiveTab] = useState("webcomponent");
+  const [diagram] = useCurrentView(), [activeTab, setActiveTab] = useState("webcomponent");
   return diagram ? /* @__PURE__ */ jsxs(
     ModalRoot,
     {
@@ -1000,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: [
@@ -1297,11 +1310,11 @@ function applyDagreLayout(g) {
 }
 function layoutRelationshipsView(data) {
   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(
-      t$1(
+  t(
+    t$4(
+      t(
         toArray(data.incoming),
-        t$3((r2) => ({
+        t$2((r2) => ({
           id: r2.source.id,
           source: incomers.byId(r2.source.id).graph,
           target: subjects.byId(r2.target.id).graph,
@@ -1310,9 +1323,9 @@ function layoutRelationshipsView(data) {
         // Sort by source
         sortParentsFirst
       ),
-      t$1(
+      t(
         toArray(data.outgoing),
-        t$3((r2) => ({
+        t$2((r2) => ({
           id: r2.target.id,
           source: subjects.byId(r2.source.id).graph,
           target: outgoers.byId(r2.target.id).graph,
@@ -1322,13 +1335,13 @@ function layoutRelationshipsView(data) {
         sortParentsFirst
       )
     ),
-    t$3((r2) => ({
+    t$2((r2) => ({
       ...r2,
       expr: `${r2.source.id}->${r2.target.id}`
     })),
     // Group if same source and target
-    t$4(e$2("expr")),
-    t$2((grouped) => {
+    t$3(e$2("expr")),
+    t$1((grouped) => {
       const source = grouped[0].source, target = grouped[0].target, name = grouped[0].expr;
       g.node(source.id).outPorts.push(target.id), g.node(target.id).inPorts.push(source.id), g.setEdge(source.portId, target.portId, {
         ...Sizes.edgeLabel
@@ -1336,7 +1349,7 @@ function layoutRelationshipsView(data) {
         name,
         source: source.id,
         target: target.id,
-        relations: t$3(grouped, e$2("relation"))
+        relations: t$2(grouped, e$2("relation"))
       });
     })
   );
@@ -1351,21 +1364,21 @@ function layoutRelationshipsView(data) {
     ...incomers.graphNodes.values(),
     ...subjects.graphNodes.values(),
     ...outgoers.graphNodes.values()
-  ], _calculatedNodeBounds = t$1(
+  ], _calculatedNodeBounds = t(
     nodeIds,
     // Compound nodes have different portId
     n((n2) => n2.id === n2.portId),
-    t$6((n2) => [n2.id, dagreBounds(n2.id)])
+    t$5((n2) => [n2.id, dagreBounds(n2.id)])
   );
   function nodeBounds(nodeId) {
-    return _calculatedNodeBounds[nodeId] ??= t$1(
+    return _calculatedNodeBounds[nodeId] ??= t(
       g.children(nodeId) ?? [],
       n((id) => !id.endsWith(PortSuffix)),
-      t$3((id) => nodeBounds(id)),
-      t$9((bounds) => {
+      t$2((id) => nodeBounds(id)),
+      t$8((bounds) => {
         invariant(bounds.length > 0, `Node ${nodeId} has no nested nodes`);
       }),
-      t$8((acc, bounds) => ({
+      t$7((acc, bounds) => ({
         minY: Math.min(acc.minY, bounds.position.y),
         maxY: Math.max(acc.maxY, bounds.position.y + bounds.height)
       }), { minY: 1 / 0, maxY: -1 / 0 }),
@@ -1444,7 +1457,7 @@ function layoutRelationshipsView(data) {
       const edge = g.edge(e2), ename = e2.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`), {
+      return invariant(t$6(points, 1), `Edge ${name} has less than 2 points`), {
         id: name,
         source,
         target,
@@ -1506,7 +1519,7 @@ function ExportPage() {
     dynamic
   } = useSearch({
     strict: !1
-  }), diagram = useCurrentDiagram(), viewportRef = useRef(null), loadingOverlayRef = useRef(null), downloadedRef = useRef(!1);
+  }), [diagram] = useCurrentView(), viewportRef = useRef(null), loadingOverlayRef = useRef(null), downloadedRef = useRef(!1);
   useTransparentBackground();
   const downloadDiagram = useDebouncedCallback(
     () => {
@@ -1524,7 +1537,7 @@ function ExportPage() {
   );
   if (!diagram)
     return /* @__PURE__ */ jsx("div", { children: "Loading..." });
-  const bounds = getViewBounds(diagram, dynamic), extraPadding = 16, width = bounds.width + padding * 2 + extraPadding, height = bounds.height + padding * 2 + extraPadding;
+  const bounds = pickViewBounds(diagram, dynamic), extraPadding = 16, width = bounds.width + padding * 2 + extraPadding, height = bounds.height + padding * 2 + extraPadding;
   return /* @__PURE__ */ jsxs(
     Box$1,
     {
@@ -1584,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();
             }
           }
@@ -1611,10 +1625,10 @@ function EmbedPage() {
     dynamic
   } = useSearch({
     strict: !1
-  }), diagram = useCurrentDiagram();
+  }), [diagram] = useCurrentView();
   if (useTransparentBackground(!!diagram), !diagram)
     return /* @__PURE__ */ jsx("div", { children: "Loading..." });
-  const bounds = getViewBounds(diagram, dynamic);
+  const bounds = pickViewBounds(diagram, dynamic);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1650,7 +1664,7 @@ const Route$b = createFileRoute("/_single/embed/$viewId")({
   component: EmbedPage
 });
 function ViewReact() {
-  const navigate = useNavigate(), view = useCurrentDiagram(), model = useLikeC4Model$1(), { dynamic } = useSearch({
+  const navigate = useNavigate(), [view, setLayoutType] = useCurrentView(), model = useLikeC4Model$1(), { dynamic } = useSearch({
     from: "__root__"
   }), onNavigateTo = useCallbackRef((viewId) => {
     navigate({
@@ -1689,11 +1703,12 @@ function ViewReact() {
       enableRelationshipDetails: !0,
       enableRelationshipBrowser: !0,
       enableElementTags: !0,
-      experimentalEdgeEditing: !1,
+      enableCompareWithLatest: !0,
       enableNotations: hasNotations,
       nodesDraggable: !1,
       nodesSelectable: !0,
       onNavigateTo,
+      onLayoutTypeChange: setLayoutType,
       onBurgerMenuClick: () => {
         navigate({
           to: "/"
@@ -1920,16 +1935,16 @@ function ViewAsMmd() {
   ] });
 }
 function ViewEditor() {
-  const router = useRouter(), view = useCurrentDiagram(), onNavigateTo = useCallbackRef((viewId) => {
-    const loc = router.buildLocation({
-      to: ".",
+  const navigate = useNavigate(), [view, setLayoutType] = useCurrentView(), onNavigateTo = useCallbackRef((viewId) => {
+    navigate({
+      to: "./",
+      viewTransition: !1,
       params: (current) => ({
         ...current,
         viewId
       }),
       search: !0
     });
-    router.commitLocation(loc);
   });
   if (!view)
     return /* @__PURE__ */ jsx(NotFound, {});
@@ -1943,7 +1958,6 @@ function ViewEditor() {
       pannable: !0,
       controls: !0,
       nodesDraggable: !0,
-      experimentalEdgeEditing: !0,
       fitViewPadding: {
         top: "70px",
         bottom: "32px",
@@ -1959,10 +1973,12 @@ function ViewEditor() {
       enableRelationshipDetails: !0,
       enableRelationshipBrowser: !0,
       enableElementTags: !0,
+      enableCompareWithLatest: !0,
       onNavigateTo,
+      onLayoutTypeChange: setLayoutType,
       onChange: (e2) => console.log(e2),
       onBurgerMenuClick: () => {
-        router.navigate({
+        navigate({
           to: "/"
         });
       }