likec4 1.46.3 → 1.47.0

package/__app__/src/main.js

@@ -1,10 +1,10 @@
 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 { cI as useRouter, cJ as isNotFound, cK as Container, by as Alert, R as Text, cL as Code, U as Button, bf as Group, bb as rem, b_ as Title, cM as Link, cN as useNavigate, bT as useCallbackRef, cO as createRootRouteWithContext, cP as stripSearchParams, ax as e, cQ as Outlet, k as useMantineColorScheme, cR as createFileRoute, cS as useDocumentTitle, b9 as Stack, cT as Loader, cU as useStore, O as ErrorBoundary, cV as Navigate, d as deepEqual, s as shallowEqual, cW as useParams, v as useIsomorphicLayoutEffect, cX as SimpleGrid, cY as useInViewport, cZ as e$1, ch as Card, aL as Box, c_ as notFound, a7 as r, bx as useTree, c$ as useComputedColorScheme, bz as Tree, b1 as HoverCard, b2 as HoverCardTarget, b3 as HoverCardDropdown, Q as ThemeIcon, d0 as onMount, r as atom, cg as useLocalStorage, d1 as useMatches, d2 as Drawer, bS as ScrollArea, aE as SegmentedControl, ay as ActionIcon, aC as Menu, bg as MenuTarget, bh as MenuDropdown, bi as MenuItem, b0 as CopyButton$1, d3 as Select, d4 as ModalRoot, d5 as ModalOverlay, d6 as ModalContent, d7 as ModalBody, bO as Tabs, bP as TabsList, bQ as TabsTab, bR as TabsPanel, d8 as useMantineTheme, d9 as useMediaQuery, da as useDisclosure, aF as Divider, b8 as Space, db as useParentMatches, dc as MenuLabel, dd as useSearch, aO as useDebouncedCallback, de as LoadingOverlay, df as toBlob, T as Tooltip, dg as useAsync, dh as PanelGroup, di as Panel, dj as PanelResizeHandle, dk as Burger, dl as createRouter, dm as createHashHistory, dn as createBrowserHistory, dp as RouterProvider, A as createTheme, P as Portal, C as MantineProvider } from "./vendors.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, 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 LikeC4EditorProvider, x as useDiagramContext } from "./likec4.js";
+import { cN as useRouter, cO as isNotFound, cP as Container, bx as Alert, R as Text, cQ as Code, U as Button, bz as Group, bb as rem, b_ as Title, cR as Link, cS as useNavigate, bT as useCallbackRef, cT as createRootRouteWithContext, cU as stripSearchParams, $ as t, ax as e, cV as Outlet, k as useMantineColorScheme, cW as createFileRoute, cX as redirect, cY as useDocumentTitle, cZ as Loader, c_ as useStore, O as ErrorBoundary, c$ as Navigate, d as deepEqual, s as shallowEqual, d0 as useParams, d1 as useMatches, v as useIsomorphicLayoutEffect, d2 as SimpleGrid, d3 as useInViewport, d4 as e$1, ch as Card, aL as Box$1, b9 as Stack, d5 as notFound, a7 as r, bw as useTree, d6 as useComputedColorScheme, by as Tree, b1 as HoverCard, b2 as HoverCardTarget, b3 as HoverCardDropdown, Q as ThemeIcon, d7 as onMount, r as atom, cg as useLocalStorage, d8 as Drawer, bS as ScrollArea, aE as SegmentedControl, ay as ActionIcon, aC as Menu, bf as MenuTarget, bg as MenuDropdown, bh as MenuItem, d9 as MenuDivider, b0 as CopyButton$1, da as Select, db as ModalRoot, dc as ModalOverlay, dd as ModalContent, de as ModalBody, bO as Tabs, bP as TabsList, bQ as TabsTab, bR as TabsPanel, df as useMantineTheme, dg as useMediaQuery, dh as useDisclosure, aF as Divider, b8 as Space, di as useParentMatches, dj as MenuLabel, dk as useSearch, aO as useDebouncedCallback, dl as LoadingOverlay, dm as toBlob, T as Tooltip, dn as useAsync, dp as Gt, dq as _t, dr as $t, ds as Burger, dt as createRouter, du as createHashHistory, dv as createBrowserHistory, dw as RouterProvider, A as createTheme, P as Portal, C as MantineProvider } from "./vendors.js";
+import { c as css, L as LikeC4ProjectsProvider, B as Box, I as IconRendererProvider, a as LikeC4ModelProvider, u as useUpdateEffect, S as StaticLikeC4Diagram, M as Markdown, b as useLikeC4Model, d as IconStarFilled, e as IconStack2, f as IconLayoutDashboard, g as IconFileCode, h as IconFolderOpen, i as IconFolderFilled, j as IconArrowLeft, k as IconMoonStars, l as IconSun, m as useLikeC4Projects$1, 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, x as LikeC4EditorProvider } from "./likec4.js";
 import { pageTitle, ComponentName, useHashHistory, withOverviewGraph, isDevelopment, onViewChangeViaPlugin, isHotEnabled, krokiPumlSvgUrl, krokiD2SvgUrl, basepath } from "./const.js";
-import { projects } from "likec4:projects";
+import { useLikeC4Projects, projects } from "likec4:projects";
 import { RichText } from "@likec4/core/types";
 import { loadModel } from "likec4:model";
 import { nonexhaustive, compareNatural } from "@likec4/core/utils";
@@ -84,13 +84,13 @@ function NotFound() {
   ] }) });
 }
 function LikeC4ProjectsContext({ children }) {
-  const navigate = useNavigate(), onProjectChange = useCallbackRef((projectId) => {
-    navigate({ to: "/project/$projectId/", params: { projectId } }).catch(console.error);
+  const projects2 = useLikeC4Projects(), navigate = useNavigate(), onProjectChange = useCallbackRef((projectId2) => {
+    navigate({ to: "/project/$projectId/", params: { projectId: projectId2 } }).catch(console.error);
   });
   return /* @__PURE__ */ jsx(
     LikeC4ProjectsProvider,
     {
-      projects,
+      projects: projects2,
       onProjectChange,
       children
     }
@@ -135,10 +135,11 @@ const asTheme = (v) => {
       })
     ]
   },
-  beforeLoad: async () => {
-    const { projects: projects2 } = await import("likec4:projects");
+  beforeLoad: () => {
+    const _projects = projects.length > 0 ? t(projects, (p) => p.id) : ["default"];
     return {
-      projectId: projects2.length > 0 ? projects2[0].id : "default"
+      projects: _projects,
+      projectId: _projects[0]
     };
   },
   component: RootComponent
@@ -154,30 +155,23 @@ const ThemeSync = () => {
   return useEffect(() => {
     theme2 && mantineColorScheme.setColorScheme(theme2);
   }, [theme2]), null;
-}, Route$k = createFileRoute("/projects")({
-  component: RouteComponent$3
+}, ProjectsOverviewPage = lazy(async () => {
+  const { ProjectsOverviewPage: ProjectsOverviewPage2 } = await import("./ProjectsOverview.js");
+  return {
+    default: ProjectsOverviewPage2
+  };
+}), Route$k = createFileRoute("/projects")({
+  beforeLoad: async ({ context }) => {
+    if (context.projects.length < 2)
+      throw redirect({
+        to: "/single-index/"
+      });
+  },
+  component: RouteComponent$3,
+  wrapInSuspense: !0
 });
 function RouteComponent$3() {
-  const projects2 = useLikeC4Projects();
-  return useDocumentTitle(`Projects - ${pageTitle}`), /* @__PURE__ */ jsx(Container, { size: "xs", py: "lg", children: /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(Text, { fz: "lg", children: "Select a project" }),
-    projects2.map((v) => /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "default",
-        size: "lg",
-        fw: 400,
-        renderRoot: (props) => /* @__PURE__ */ jsx(Link, { ...props, to: "/project/$projectId/", params: { projectId: v.id } }),
-        styles: {
-          inner: {
-            justifyContent: "flex-start"
-          }
-        },
-        children: v.title ?? v.id
-      },
-      v.id
-    ))
-  ] }) });
+  return useDocumentTitle(`Projects - ${pageTitle}`), /* @__PURE__ */ jsx(Box, { w: "100%", h: "100%", overflow: "hidden", children: /* @__PURE__ */ jsx(ProjectsOverviewPage, {}) });
 }
 const ProjectIcons = lazy(async () => {
   const { ProjectIcons: ProjectIcons2 } = await import("likec4:icons");
@@ -186,8 +180,8 @@ 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] ??= (props) => /* @__PURE__ */ jsx(ProjectIconRenderer, { ...props, projectId });
+function LikeC4IconRendererContext({ children, projectId: projectId2 }) {
+  const IconRenderer = _renderers[projectId2] ??= (props) => /* @__PURE__ */ jsx(ProjectIconRenderer, { ...props, projectId: projectId2 });
   return /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer, children });
 }
 const LikeC4ModelDataContext = createContext(null), LikeC4ModelDataContextProvider = LikeC4ModelDataContext.Provider, useLikeC4ModelAtom = () => {
@@ -243,20 +237,29 @@ css({
 const Route$j = createFileRoute("/_single")({
   staleTime: 1 / 0,
   loader: async ({ context }) => {
-    const { loadModel: loadModel2 } = await import("likec4:model"), projectId = context.projectId, { $likec4model } = await loadModel2(projectId);
+    const { loadModel: loadModel2 } = await import("likec4:model"), projectId2 = context.projectId, { $likec4model } = await loadModel2(projectId2);
     return {
       $likec4model,
-      projectId
+      projectId: projectId2
     };
   },
   component: RouteComponent$2
 });
 function RouteComponent$2() {
-  const { $likec4model, projectId } = Route$j.useLoaderData();
-  return /* @__PURE__ */ jsx("div", { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4IconRendererContext, { projectId, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4model: $likec4model, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
+  const { $likec4model, projectId: projectId2 } = Route$j.useLoaderData();
+  return /* @__PURE__ */ jsx("div", { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4IconRendererContext, { projectId: projectId2, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4model: $likec4model, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
 }
 const Route$i = createFileRoute("/")({
-  component: () => useLikeC4Projects().length > 1 ? /* @__PURE__ */ jsx(Navigate, { to: "/projects/", replace: !0 }) : /* @__PURE__ */ jsx(
+  component: () => useLikeC4Projects().length > 1 ? /* @__PURE__ */ jsx(
+    Navigate,
+    {
+      to: "/projects/",
+      mask: {
+        to: "/",
+        unmaskOnReload: !0
+      }
+    }
+  ) : /* @__PURE__ */ jsx(
     Navigate,
     {
       to: "/single-index/",
@@ -312,11 +315,10 @@ function useCurrentView() {
   }), [$likec4model, viewId, layoutType]), [view, setLayoutType];
 }
 function useCurrentProject() {
-  const projects2 = useLikeC4Projects(), projectId = useParams({
-    select: (params) => params.projectId,
-    strict: !1
+  const projects2 = useLikeC4Projects(), projectId2 = useMatches({
+    select: (m) => m.find((m2) => m2.routeId === "/project/$projectId")?.params?.projectId ?? m.at(-1)?.context.projectId ?? "default"
   });
-  return projects2.find((p) => p.id === projectId) ?? projects2[0];
+  return projects2.find((p) => p.id === projectId2) ?? projects2[0];
 }
 css({
   color: "mantine.colors.dimmed"
@@ -379,7 +381,7 @@ function ViewCard({ view }) {
       className: "group",
       withBorder: !0,
       children: [
-        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Box, { className: previewBg, style: { height: 200 }, children: visible && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Box$1, { className: previewBg, style: { height: 200 }, children: visible && /* @__PURE__ */ jsx(
           StaticLikeC4Diagram,
           {
             background: "transparent",
@@ -418,12 +420,12 @@ const Route$g = createFileRoute("/project/$projectId")({
     projectId: params.projectId
   }),
   loader: async ({ context }) => {
-    const projectId = context.projectId;
+    const projectId2 = context.projectId;
     try {
-      const { $likec4model } = await loadModel(projectId);
+      const { $likec4model } = await loadModel(projectId2);
       return {
         $likec4model,
-        projectId
+        projectId: projectId2
       };
     } catch (err) {
       throw console.error(err), notFound();
@@ -436,19 +438,19 @@ const Route$g = createFileRoute("/project/$projectId")({
   ] }) }) })
 });
 function RouteComponent() {
-  const { $likec4model, projectId } = Route$g.useLoaderData();
-  return /* @__PURE__ */ jsx("div", { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4IconRendererContext, { projectId, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4model: $likec4model, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
+  const { $likec4model, projectId: projectId2 } = Route$g.useLoaderData();
+  return /* @__PURE__ */ jsx("div", { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4IconRendererContext, { projectId: projectId2, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4model: $likec4model, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
 }
 const Route$f = createFileRoute("/project/$projectId/")({
   component: () => {
-    const { projectId } = Route$f.useParams();
+    const { projectId: projectId2 } = Route$f.useParams();
     return /* @__PURE__ */ jsx(
       Navigate,
       {
         to: "/project/$projectId/view/$viewId/",
         replace: !0,
         params: {
-          projectId,
+          projectId: projectId2,
           viewId: "index"
         }
       }
@@ -497,7 +499,7 @@ function WebcomponentPage() {
     </html>
   `;
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     {
       css: {
         position: "fixed",
@@ -608,7 +610,7 @@ const isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIco
     viewId && tree.select(viewId);
   }, [viewId]);
   const theme2 = useComputedColorScheme();
-  return /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
     Tree,
     {
       allowRangeSelection: !1,
@@ -803,7 +805,7 @@ const cssHeader = css({
   }
 });
 function SelectProject() {
-  const projects2 = useLikeC4Projects(), project = useCurrentProject();
+  const projects2 = useLikeC4Projects$1(), project = useCurrentProject();
   return projects2.length < 2 ? null : /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
     /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
       Button,
@@ -817,24 +819,40 @@ function SelectProject() {
         children: project.title ?? project.id
       }
     ) }),
-    /* @__PURE__ */ jsx(MenuDropdown, { children: projects2.map(({ id, title: title2 }) => /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        renderRoot: (props) => /* @__PURE__ */ jsx(
-          Link,
-          {
-            ...props,
-            to: "/project/$projectId/view/$viewId/",
-            params: {
-              projectId: id,
-              viewId: "index"
+    /* @__PURE__ */ jsxs(MenuDropdown, { children: [
+      /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          renderRoot: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              ...props,
+              to: "/projects"
             }
-          }
-        ),
-        children: title2 ?? id
-      },
-      id
-    )) })
+          ),
+          children: "Projects overview"
+        }
+      ),
+      /* @__PURE__ */ jsx(MenuDivider, {}),
+      projects2.map(({ id, title: title2 }) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          renderRoot: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              ...props,
+              to: "/project/$projectId/view/$viewId/",
+              params: {
+                projectId: id,
+                viewId: "index"
+              }
+            }
+          ),
+          children: title2 ?? id
+        },
+        id
+      ))
+    ] })
   ] });
 }
 const AlertLocalhost = () => /* @__PURE__ */ jsx(
@@ -876,10 +894,10 @@ const AlertLocalhost = () => /* @__PURE__ */ jsx(
 `.trim();
   return /* @__PURE__ */ jsxs(Stack, { children: [
     code.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Embedded view is an iframe with a static diagram" }) }),
+    /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Embedded view is an iframe with a static diagram" }) }),
     /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
+        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
         /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
           /* @__PURE__ */ jsx(ActionIcon, { component: "a", href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
           /* @__PURE__ */ jsx(CopyButton$1, { value: code, timeout: 1500, children: CopyButtonChild })
@@ -887,7 +905,7 @@ const AlertLocalhost = () => /* @__PURE__ */ jsx(
       ] }),
       /* @__PURE__ */ jsx(Code, { block: !0, children: code }),
       /* @__PURE__ */ jsx(
-        Box,
+        Box$1,
         {
           style: {
             alignSelf: "flex-start"
@@ -935,10 +953,10 @@ function WebcomponentsPanel({ diagram }) {
   );
   return /* @__PURE__ */ jsxs(Stack, { children: [
     jscode.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Add this script to your page:" }) }),
+    /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Add this script to your page:" }) }),
     /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "JavaScript" }) }),
+        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "JavaScript" }) }),
         /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
           /* @__PURE__ */ jsx(ActionIcon, { component: "a", href: webcomponentPreview.href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
           /* @__PURE__ */ jsx(
@@ -952,7 +970,7 @@ function WebcomponentsPanel({ diagram }) {
         ] })
       ] }),
       /* @__PURE__ */ jsx(Code, { block: !0, children: jscode }),
-      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+      /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
         "This script defines a custom element (webcomponent) that renders your diagrams.",
         /* @__PURE__ */ jsx("br", {}),
         "Script must be inserted once in the ",
@@ -965,8 +983,8 @@ function WebcomponentsPanel({ diagram }) {
     ] }),
     /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
+        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
           CopyButton$1,
           {
             value: htmlCode,
@@ -976,7 +994,7 @@ function WebcomponentsPanel({ diagram }) {
         ) })
       ] }),
       /* @__PURE__ */ jsx(Code, { block: !0, children: htmlCode }),
-      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+      /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
         "Insert this code to your page. Page may have multiple ",
         /* @__PURE__ */ jsx("code", { children: "<likec4-view>" }),
         "."
@@ -1012,7 +1030,7 @@ function ShareModal({
   ) : null;
 }
 const Header = memo(() => {
-  const projects2 = useLikeC4Projects(), isReactDiagramRoute = useMatches({
+  const projects2 = useLikeC4Projects$1(), isReactDiagramRoute = useMatches({
     select(matches) {
       return matches.some(
         ({ routeId }) => routeId === "/_single/view/$viewId/" || routeId === "/_single/view/$viewId/editor" || routeId === "/project/$projectId/view/$viewId"
@@ -1020,7 +1038,7 @@ const Header = memo(() => {
     }
   }), { breakpoints } = useMantineTheme(), isTablet = useMediaQuery(`(min-width: ${breakpoints.md})`) ?? !1, [opened, { open, close }] = useDisclosure(!1);
   return /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     {
       className: cssHeader,
       children: [
@@ -1253,7 +1271,7 @@ function ExportPage() {
     return /* @__PURE__ */ jsx("div", { children: "Loading..." });
   const bounds = pickViewBounds(diagram, dynamic), extraPadding = 16, width = bounds.width + padding * 2 + extraPadding, height = bounds.height + padding * 2 + extraPadding;
   return /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     {
       ref: viewportRef,
       "data-testid": "export-page",
@@ -1375,72 +1393,6 @@ function EmbedPage() {
 const Route$b = createFileRoute("/_single/embed/$viewId")({
   component: EmbedPage
 });
-function ViewEditor() {
-  const navigate = useNavigate(), projectId = useCurrentProject().id, [view, setLayoutType] = useCurrentView(), $likec4model = useLikeC4ModelAtom(), onNavigateTo = useCallbackRef((viewId) => {
-    navigate({
-      to: "./",
-      viewTransition: !1,
-      params: (current) => ({
-        ...current,
-        viewId
-      }),
-      search: !0
-    });
-  });
-  if (!view)
-    return /* @__PURE__ */ jsx(NotFound, {});
-  const hasNotations = (view.notation?.nodes ?? []).length > 0, onChange = onViewChangeViaPlugin ?? void 0;
-  return /* @__PURE__ */ jsx(
-    LikeC4EditorProvider,
-    {
-      editor: {
-        fetchView: (id, layout) => {
-          const model = $likec4model.get().view(id);
-          return layout === "auto" ? model.$view : model.$layouted;
-        },
-        handleChange: (viewId, change) => {
-          onChange?.({
-            projectId,
-            viewId,
-            change
-          });
-        }
-      },
-      children: /* @__PURE__ */ jsx(
-        LikeC4Diagram,
-        {
-          view,
-          zoomable: !0,
-          pannable: !0,
-          controls: !0,
-          fitViewPadding: {
-            top: "70px",
-            bottom: "32px",
-            left: "50px",
-            right: "32px"
-          },
-          showNavigationButtons: !0,
-          enableNotations: isDevelopment || hasNotations,
-          enableSearch: !0,
-          enableDynamicViewWalkthrough: !0,
-          enableFocusMode: !0,
-          enableElementDetails: !0,
-          enableRelationshipDetails: !0,
-          enableRelationshipBrowser: !0,
-          enableElementTags: !0,
-          enableCompareWithLatest: !0,
-          onNavigateTo,
-          onLayoutTypeChange: setLayoutType,
-          onBurgerMenuClick: () => {
-            navigate({
-              to: "/"
-            });
-          }
-        }
-      )
-    }
-  );
-}
 function ViewReact() {
   const navigate = useNavigate(), [view, setLayoutType] = useCurrentView(), model = useLikeC4Model(), { dynamic } = useSearch({
     from: "__root__"
@@ -1485,16 +1437,16 @@ function ViewReact() {
       nodesSelectable: !0,
       onNavigateTo,
       onLayoutTypeChange: setLayoutType,
-      onBurgerMenuClick: () => {
+      onLogoClick: () => {
         navigate({
           to: "/"
         });
       },
-      children: /* @__PURE__ */ jsx(DiagramListener, {})
+      children: /* @__PURE__ */ jsx(ListenForDynamicVariantChange, {})
     }
   );
 }
-function DiagramListener() {
+function ListenForDynamicVariantChange() {
   const router2 = useRouter(), dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
   return useUpdateEffect(() => {
     (router2.latestLocation.search.dynamic ?? "diagram") !== dynamicViewVariant && router2.buildAndCommitLocation({
@@ -1506,6 +1458,75 @@ function DiagramListener() {
     });
   }, [dynamicViewVariant]), null;
 }
+function ViewEditor() {
+  const navigate = useNavigate(), project = useCurrentProject(), [view, setLayoutType] = useCurrentView(), $likec4model = useLikeC4ModelAtom(), { dynamic } = useSearch({ strict: !1 }), onNavigateTo = useCallbackRef((viewId) => {
+    navigate({
+      to: "./",
+      viewTransition: !1,
+      params: (current) => ({
+        ...current,
+        viewId
+      }),
+      search: !0
+    });
+  });
+  if (!view)
+    return /* @__PURE__ */ jsx(NotFound, {});
+  const hasNotations = (view.notation?.nodes ?? []).length > 0, onChange = onViewChangeViaPlugin ?? void 0;
+  return /* @__PURE__ */ jsx(
+    LikeC4EditorProvider,
+    {
+      editor: {
+        fetchView: (id, layout) => {
+          const model = $likec4model.get().view(id);
+          return layout === "auto" ? model.$view : model.$layouted;
+        },
+        handleChange: (viewId, change) => {
+          const event = {
+            projectId: project.id,
+            viewId,
+            change
+          };
+          onChange?.(event);
+        }
+      },
+      children: /* @__PURE__ */ jsx(
+        LikeC4Diagram,
+        {
+          view,
+          zoomable: !0,
+          pannable: !0,
+          controls: !0,
+          fitViewPadding: {
+            top: "70px",
+            bottom: "32px",
+            left: "50px",
+            right: "32px"
+          },
+          showNavigationButtons: !0,
+          enableNotations: isDevelopment || hasNotations,
+          enableSearch: !0,
+          enableDynamicViewWalkthrough: !0,
+          enableFocusMode: !0,
+          enableElementDetails: !0,
+          enableRelationshipDetails: !0,
+          enableRelationshipBrowser: !0,
+          enableElementTags: !0,
+          enableCompareWithLatest: !0,
+          dynamicViewVariant: dynamic,
+          onNavigateTo,
+          onLayoutTypeChange: setLayoutType,
+          onLogoClick: () => {
+            navigate({
+              to: "/"
+            });
+          },
+          children: /* @__PURE__ */ jsx(ListenForDynamicVariantChange, {})
+        }
+      )
+    }
+  );
+}
 const Route$a = createFileRoute("/_single/view/$viewId/")({
   component: isHotEnabled ? ViewEditor : ViewReact
 }), Route$9 = createFileRoute("/project/$projectId/view/$viewId")({
@@ -1535,7 +1556,7 @@ function CopyButton({ text }) {
   return /* @__PURE__ */ jsx(CopyButton$1, { value: text, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: !0, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { color: copied ? "teal" : "gray", variant: copied ? "light" : "subtle", onClick: copy, children: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }) }) }) });
 }
 function CopyToClipboard({ text }) {
-  return /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "0", right: "0", p: "4", children: /* @__PURE__ */ jsx(CopyButton, { text }) });
+  return /* @__PURE__ */ jsx(Box$1, { pos: "absolute", top: "0", right: "0", p: "4", children: /* @__PURE__ */ jsx(CopyButton, { text }) });
 }
 const cssScrollArea = css({
   height: "100%",
@@ -1549,14 +1570,15 @@ const cssScrollArea = css({
 }), cssCodeBlock = css({
   minHeight: "100%"
 }), viewWithTopPadding = css({
+  height: "100%",
   paddingTop: "[var(--header-height)]"
 }), Route$6 = createFileRoute("/_single/view/$viewId/puml")({
   component: ViewAsPuml,
   staleTime: 1 / 0,
   loader: async ({ params, context }) => {
-    const projectId = context.projectId, { viewId } = params, { loadPumlSources } = await import("likec4:puml");
+    const projectId2 = context.projectId, { viewId } = params, { loadPumlSources } = await import("likec4:puml");
     try {
-      const { pumlSource } = await loadPumlSources(projectId);
+      const { pumlSource } = await loadPumlSources(projectId2);
       return {
         source: pumlSource(viewId)
       };
@@ -1578,8 +1600,8 @@ const cssScrollArea = css({
 function ViewAsPuml() {
   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: [
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs(Gt, { className: viewWithTopPadding, children: [
+      /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
           className: cssScrollArea,
@@ -1596,14 +1618,14 @@ function ViewAsPuml() {
         }
       ) }),
       /* @__PURE__ */ jsx(
-        PanelResizeHandle,
+        $t,
         {
           style: {
             width: 10
           }
         }
       ),
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
+      /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
         krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -1617,13 +1639,13 @@ function ViewAsPuml() {
               children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
             }
           ),
-          krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box, { children: krokiSvg.error?.message })
+          krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box$1, { 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" }) })
+        krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box$1, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box$1, { children: "Empty result" }) })
       ] }) })
     ] }),
     /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         pos: "fixed",
         top: 14,
@@ -1644,9 +1666,9 @@ const Route$5 = createFileRoute("/_single/view/$viewId/mmd")({
   component: ViewAsMmd,
   staleTime: 1 / 0,
   loader: async ({ params, context }) => {
-    const projectId = context.projectId, { viewId } = params, { loadMmdSources } = await import("likec4:mmd");
+    const projectId2 = context.projectId, { viewId } = params, { loadMmdSources } = await import("likec4:mmd");
     try {
-      const { mmdSource } = await loadMmdSources(projectId);
+      const { mmdSource } = await loadMmdSources(projectId2);
       return {
         source: mmdSource(viewId)
       };
@@ -1667,8 +1689,8 @@ function ViewAsMmd() {
   return useEffect(() => {
     execute(viewId, source);
   }, [source]), /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsMmd", children: [
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs(Gt, { className: viewWithTopPadding, children: [
+      /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
           className: cssScrollArea,
@@ -1685,17 +1707,17 @@ function ViewAsMmd() {
         }
       ) }),
       /* @__PURE__ */ jsx(
-        PanelResizeHandle,
+        $t,
         {
           style: {
             width: 10
           }
         }
       ),
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
+      /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
     ] }),
     /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         pos: "fixed",
         top: 14,
@@ -1718,9 +1740,9 @@ const Route$4 = createFileRoute("/_single/view/$viewId/editor")({
   component: ViewAsDot,
   staleTime: 1 / 0,
   loader: async ({ params, context }) => {
-    const projectId = context.projectId, { viewId } = params, { loadDotSources } = await import("likec4:dot");
+    const projectId2 = context.projectId, { viewId } = params, { loadDotSources } = await import("likec4:dot");
     try {
-      const { dotSource, svgSource } = await loadDotSources(projectId), dot = dotSource(viewId), dotSvg = svgSource(viewId);
+      const { dotSource, svgSource } = await loadDotSources(projectId2), dot = dotSource(viewId), dotSvg = svgSource(viewId);
       return {
         dot,
         dotSvg
@@ -1733,8 +1755,8 @@ const Route$4 = createFileRoute("/_single/view/$viewId/editor")({
 function ViewAsDot() {
   const { dot, dotSvg } = Route$3.useLoaderData();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsDot", children: [
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs(Gt, { className: viewWithTopPadding, children: [
+      /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
           className: cssScrollArea,
@@ -1751,17 +1773,17 @@ function ViewAsDot() {
         }
       ) }),
       /* @__PURE__ */ jsx(
-        PanelResizeHandle,
+        $t,
         {
           style: {
             width: 10
           }
         }
       ),
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: dotSvg } }) }) })
+      /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: dotSvg } }) }) })
     ] }),
     /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         pos: "fixed",
         top: 14,
@@ -1782,9 +1804,9 @@ const Route$2 = createFileRoute("/_single/view/$viewId/d2")({
   component: ViewAsD2,
   staleTime: 1 / 0,
   loader: async ({ context, params }) => {
-    const projectId = context.projectId, { viewId } = params, { loadD2Sources } = await import("likec4:d2");
+    const projectId2 = context.projectId, { viewId } = params, { loadD2Sources } = await import("likec4:d2");
     try {
-      const { d2Source } = await loadD2Sources(projectId);
+      const { d2Source } = await loadD2Sources(projectId2);
       return {
         source: d2Source(viewId)
       };
@@ -1809,52 +1831,59 @@ const Route$2 = createFileRoute("/_single/view/$viewId/d2")({
 function ViewAsD2() {
   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: [
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
-        ScrollArea,
-        {
-          className: cssScrollArea,
-          p: 5,
-          styles: {
-            viewport: {
-              borderRadius: 6
+    /* @__PURE__ */ jsxs(
+      Gt,
+      {
+        className: viewWithTopPadding,
+        orientation: "horizontal",
+        children: [
+          /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
+            ScrollArea,
+            {
+              className: cssScrollArea,
+              p: 5,
+              styles: {
+                viewport: {
+                  borderRadius: 6
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: source }),
+                /* @__PURE__ */ jsx(CopyToClipboard, { text: source })
+              ]
             }
-          },
-          children: [
-            /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: source }),
-            /* @__PURE__ */ jsx(CopyToClipboard, { text: source })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        PanelResizeHandle,
-        {
-          style: {
-            width: 10
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
-        krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          ) }),
           /* @__PURE__ */ jsx(
-            Button,
+            $t,
             {
-              mt: "xs",
-              variant: "light",
-              disabled: krokiSvg.status === "loading",
-              onClick: () => {
-                execute(source);
-              },
-              children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
+              style: {
+                width: 10
+              }
             }
           ),
-          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" }) })
-      ] }) })
-    ] }),
+          /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
+            krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  mt: "xs",
+                  variant: "light",
+                  disabled: krokiSvg.status === "loading",
+                  onClick: () => {
+                    execute(source);
+                  },
+                  children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
+                }
+              ),
+              krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box$1, { children: krokiSvg.error?.message })
+            ] }),
+            krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box$1, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box$1, { children: "Empty result" }) })
+          ] }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         pos: "fixed",
         top: 14,
@@ -1992,10 +2021,11 @@ const Route$1 = createFileRoute("/project/$projectId/view/$viewId/")({
   SingleRouteRoute: SingleRouteRouteWithChildren,
   ProjectsRoute,
   ProjectProjectIdRouteRoute: ProjectProjectIdRouteRouteWithChildren
-}, routeTree = Route$l._addFileChildren(rootRouteChildren)._addFileTypes(), router = createRouter({
+}, routeTree = Route$l._addFileChildren(rootRouteChildren)._addFileTypes(), projectId = "default", router = createRouter({
   routeTree,
   context: {
-    projectId: "default"
+    projectId,
+    projects: [projectId]
   },
   basepath,
   trailingSlash: "always",