likec4 1.52.0 → 1.54.0

package/__app__/src/likec4.js

@@ -4161,14 +4161,14 @@ const ViewPadding = {
         return context2.view.id === event.view.id;
       if (event.type === "navigate.to")
         return context2.view.id === event.viewId;
-      nonexhaustive(event.type);
+      nonexhaustive(event);
     },
     "is another view": ({ context: context2, event }) => {
       if (assertEvent(event, ["update.view", "navigate.to"]), event.type === "update.view")
         return context2.view.id !== event.view.id;
       if (event.type === "navigate.to")
         return context2.view.id !== event.viewId;
-      nonexhaustive(event.type);
+      nonexhaustive(event);
     },
     "click: node has modelFqn": ({ event }) => (assertEvent(event, "xyflow.nodeClick"), "modelFqn" in event.node.data),
     "click: selected node": ({ event }) => (assertEvent(event, "xyflow.nodeClick"), event.node.selected === !0),
@@ -8878,8 +8878,26 @@ const WalkthroughPanel = memo$1(() => {
     m$1.div,
     {
       layout: "position",
-      className: css({
-        position: "relative"
+      className: vstack({
+        position: "relative",
+        layerStyle: "likec4.dropdown",
+        gap: "sm",
+        padding: "md",
+        paddingTop: "xxs",
+        pointerEvents: "all",
+        maxWidth: 300,
+        height: "max-content",
+        maxHeight: "calc(100cqh - 100px)",
+        width: "max-content",
+        cursor: "default",
+        overflow: "hidden",
+        "@/sm": {
+          minWidth: 400,
+          maxWidth: 550
+        },
+        "@/lg": {
+          maxWidth: 700
+        }
       }),
       initial: {
         opacity: 0,
@@ -8893,48 +8911,17 @@ const WalkthroughPanel = memo$1(() => {
         opacity: 0,
         translateX: -20
       },
-      children: /* @__PURE__ */ jsxs(
-        ScrollAreaAutosize,
-        {
-          className: vstack({
-            position: "absolute",
-            layerStyle: "likec4.dropdown",
-            gap: "sm",
-            padding: "md",
-            paddingTop: "xxs",
-            pointerEvents: "all",
-            maxWidth: "calc(100cqw - 32px)",
-            minWidth: "calc(100cqw - 50px)",
-            maxHeight: "calc(100cqh - 100px)",
-            width: "max-content",
-            cursor: "default",
-            overflow: "auto",
-            overscrollBehavior: "contain",
-            "@/sm": {
-              minWidth: 400,
-              maxWidth: 550
-            },
-            "@/lg": {
-              maxWidth: 700
-            }
-          }),
-          type: "scroll",
-          children: [
-            /* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }),
-            /* @__PURE__ */ jsx(
-              Markdown,
-              {
-                value: notes,
-                fontSize: "sm",
-                emptyText: "No description",
-                className: css({
-                  userSelect: "all"
-                })
-              }
-            )
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxs(ScrollAreaAutosize, { type: "scroll", overscrollBehavior: "contain", children: [
+        /* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }),
+        /* @__PURE__ */ jsx(
+          Markdown,
+          {
+            value: notes,
+            fontSize: "sm",
+            emptyText: "No description"
+          }
+        )
+      ] })
     }
   ) });
 }), NavigationPanel$1 = memo$1(() => {
@@ -16282,8 +16269,8 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     }
   }
   const _edgeModifiers = [...edgeModifiers.values()];
-  function updateXYFlow() {
-    const { edgeLookup, triggerNodeChanges, triggerEdgeChanges, nodeLookup: nodeLookup2 } = xyflowApi.getState();
+  function syncFromXYFlow() {
+    const { nodeLookup: nodeLookup2 } = xyflowApi.getState();
     for (const id of editingNodeIds) {
       const rect = rects.get(id);
       if (!rect) {
@@ -16297,6 +16284,9 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
       }
       rect.positionAbsolute = node2.internals.positionAbsolute;
     }
+  }
+  function updateXYFlow() {
+    const { edgeLookup, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
     applyConstraints(rectsToUpdate);
     const nodeUpdates = [], edgeUpdates = [];
     for (const r2 of rectsToUpdate)
@@ -16323,11 +16313,11 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     animationFrameId !== null && (cancelAnimationFrame(animationFrameId), animationFrameId = null);
   }
   function flushPending() {
-    cancelPending(), updateXYFlow();
+    cancelPending(), syncFromXYFlow(), updateXYFlow();
   }
   function onMove() {
     animationFrameId ??= requestAnimationFrame(() => {
-      animationFrameId = null, updateXYFlow();
+      animationFrameId = null, syncFromXYFlow(), updateXYFlow();
     });
   }
   function hasChanges() {
@@ -16966,8 +16956,7 @@ function diagramToXY(opts) {
         data: {
           isViewGroup: !0,
           ...compoundData
-        },
-        dragHandle: ".likec4-compound-title-container"
+        }
       });
       continue;
     }
@@ -18387,7 +18376,7 @@ const setViewport = (params) => machine$2.createAction(({ context: context2, eve
             viewportBefore
           } = fromHistory, nextCtx = {
             ...mergeXYNodesEdges(context2, eventWithXYData),
-            dynamicViewVariant: fromHistory.dynamicViewVariant ?? context2.dynamicViewVariant,
+            dynamicViewVariant: fromHistory.dynamicViewVariant ?? (eventWithXYData.view._type === "dynamic" ? eventWithXYData.view.variant : void 0) ?? context2.dynamicViewVariant,
             viewportChangedManually: viewportBefore?.wasChangedManually ?? fromHistory.viewportChangedManually,
             viewport: viewportBefore?.value ?? fromHistory.viewport,
             viewportBefore: null
@@ -18459,6 +18448,7 @@ const setViewport = (params) => machine$2.createAction(({ context: context2, eve
           ...mergeXYNodesEdges(context2, eventWithXYData),
           viewportChangedManually: !1,
           lastOnNavigate: null,
+          dynamicViewVariant: eventWithXYData.view._type === "dynamic" ? eventWithXYData.view.variant : context2.dynamicViewVariant,
           navigationHistory: {
             currentIndex: updatedHistory.length - 1,
             history: updatedHistory

package/__app__/src/routes/index.js

@@ -147,6 +147,13 @@ const Route = createFileRoute("/")({
         to: "/",
         unmaskOnReload: !0
       }
+    }) : projects[0]?.landingPage && "redirect" in projects[0].landingPage ? redirect({
+      to: "/view/$viewId/",
+      params: { viewId: "index" },
+      mask: {
+        to: "/",
+        unmaskOnReload: !0
+      }
     }) : redirect({
       to: "/single-index/",
       mask: {

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 Tt, dE as _t, dF as Ht, 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 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 { 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";
@@ -583,6 +583,18 @@ const DiagramPreview = memo(({ diagram }) => {
     }
   );
 });
+function filterLandingPageViews(views, filter) {
+  return filter ? "include" in filter ? views.filter((view) => matchesAny(view, filter.include)) : "exclude" in filter ? views.filter((view) => !matchesAny(view, filter.exclude)) : views : views;
+}
+function matchesAny(view, patterns) {
+  return patterns.some((pattern) => {
+    if (pattern.startsWith("#")) {
+      const tag = pattern.slice(1);
+      return view.tags?.some((t) => t === tag) ?? !1;
+    }
+    return view.id === pattern;
+  });
+}
 css({
   color: "text.dimmed"
 });
@@ -616,7 +628,7 @@ const previewBg = css({
 });
 function RouteComponent() {
   useDocumentTitle(pageTitle);
-  const views = useLikeC4Views();
+  const allViews = useLikeC4Views(), { landingPage } = useCurrentProject(), views = filterLandingPageViews(allViews, landingPage);
   return /* @__PURE__ */ jsxs(Container, { size: "xl", children: [
     /* @__PURE__ */ jsx(SidebarDrawer, {}),
     /* @__PURE__ */ jsxs(
@@ -1609,12 +1621,12 @@ const svgContainer = css({
 function ViewAsPuml({ pumlSource }) {
   const [krokiSvg, { execute }] = useAsync(fetchFromKroki$1, null);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    Tt,
+    Ut,
     {
       className: viewWithTopPadding,
       orientation: "horizontal",
       children: [
-        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(qt, { children: /* @__PURE__ */ jsxs(
           ScrollArea,
           {
             className: cssScrollArea,
@@ -1631,14 +1643,14 @@ function ViewAsPuml({ pumlSource }) {
           }
         ) }),
         /* @__PURE__ */ jsx(
-          Ht,
+          Zt,
           {
             style: {
               width: 10
             }
           }
         ),
-        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
+        /* @__PURE__ */ jsx(qt, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
           krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               Button,
@@ -1692,12 +1704,12 @@ function ViewAsMmd({ viewId, mmdSource }) {
   return useEffect(() => {
     execute(viewId, mmdSource);
   }, [mmdSource]), /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    Tt,
+    Ut,
     {
       className: viewWithTopPadding,
       orientation: "horizontal",
       children: [
-        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(qt, { children: /* @__PURE__ */ jsxs(
           ScrollArea,
           {
             className: cssScrollArea,
@@ -1714,14 +1726,14 @@ function ViewAsMmd({ viewId, mmdSource }) {
           }
         ) }),
         /* @__PURE__ */ jsx(
-          Ht,
+          Zt,
           {
             style: {
               width: 10
             }
           }
         ),
-        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx(Box, { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
+        /* @__PURE__ */ jsx(qt, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx(Box, { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
       ]
     }
   ) });
@@ -1746,8 +1758,8 @@ function Page$2() {
   return /* @__PURE__ */ jsx(ViewAsMmd, { viewId, mmdSource: source });
 }
 function ViewAsDot({ dot, dotSvg }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tt, { className: viewWithTopPadding, children: [
-    /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Ut, { className: viewWithTopPadding, children: [
+    /* @__PURE__ */ jsx(qt, { children: /* @__PURE__ */ jsxs(
       ScrollArea,
       {
         className: cssScrollArea,
@@ -1764,14 +1776,14 @@ function ViewAsDot({ dot, dotSvg }) {
       }
     ) }),
     /* @__PURE__ */ jsx(
-      Ht,
+      Zt,
       {
         style: {
           width: 10
         }
       }
     ),
-    /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: dotSvg } }) }) })
+    /* @__PURE__ */ jsx(qt, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: dotSvg } }) }) })
   ] }) });
 }
 const Route$1 = createFileRoute("/_single/view/$viewId/dot")({
@@ -1811,12 +1823,12 @@ const fetchFromKroki = async (d2) => await (await fetch(krokiD2SvgUrl, {
 function ViewAsD2({ d2Source }) {
   const [krokiSvg, { execute }] = useAsync(fetchFromKroki, null);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    Tt,
+    Ut,
     {
       className: viewWithTopPadding,
       orientation: "horizontal",
       children: [
-        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(qt, { children: /* @__PURE__ */ jsxs(
           ScrollArea,
           {
             className: cssScrollArea,
@@ -1833,14 +1845,14 @@ function ViewAsD2({ d2Source }) {
           }
         ) }),
         /* @__PURE__ */ jsx(
-          Ht,
+          Zt,
           {
             style: {
               width: 10
             }
           }
         ),
-        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
+        /* @__PURE__ */ jsx(qt, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
           krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               Button,