likec4 1.48.0 → 1.50.0

package/__app__/src/routes/projects.js

@@ -1,101 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { d4 as Loader, d5 as useStore, d as deepEqual, s as shallowEqual, d6 as useMatches, cN as useParams, v as useIsomorphicLayoutEffect, cZ as createFileRoute, cP as Container, ba as Stack, b$ as Title, V as Button, cT as Link, d7 as notFound, c_ as redirect, O as m, cY as Outlet, d8 as Navigate, k as useMantineColorScheme, d9 as useComputedColorScheme, aA as ActionIcon, aF as MotionDiv, cI as isValidMotionProp, aD as Menu, bg as MenuTarget, bh as MenuDropdown, bi as MenuItem, da as MenuDivider, by as Alert, bc as rem, R as Text, cM as useRouter, aM as Box, bA as Group, b1 as CopyButton$1, cQ as Code, db as Select, dc as ModalRoot, dd as ModalOverlay, de as ModalContent, df as ModalBody, bP as Tabs, bQ as TabsList, bR as TabsTab, bS as TabsPanel, dg as useMantineTheme, dh as useMediaQuery, di as useDisclosure, aG as Divider, dj as MenuLabel, dk as useSearch, dl as LoadingOverlay, dm as toBlob, cU as useNavigate, bU as useCallbackRef, c$ as useDocumentTitle, dn as useIsMounted, cX as stripSearchParams, cV as z, T as Tooltip, dp as useAsync, dq as It, dr as Ot, bT as ScrollArea, ds as Nt } from "../vendors.js";
-import { F as Fallback, N as NotFound } from "./index.js";
-import { s as styled, I as IconRendererProvider, a as LikeC4ModelProvider, u as useUpdateEffect, b as LikeC4AdHocViewEditor, d as IconMoonStars, e as IconSun, f as createStyleContext, n as navigationPanel, i as isCssProperty, g as useLikeC4Projects$1, h as IconChevronDown, j as IconAlertTriangle, k as IconCheck, l as IconCopy, m as IconExternalLink, o as IconShare, p as pickViewBounds, B as Box$1, q as LikeC4Diagram, S as StaticLikeC4Diagram, r as useLikeC4Model, t as useDiagramContext, v as useDiagram, w as useOnDiagramEvent, x as LikeC4EditorProvider, c as css } from "../likec4.js";
-import { lazy, Suspense, createContext, useContext, useState, useEffect, memo, useRef } from "react";
-import { likec4rpc, isRpcAvailable } from "likec4:rpc";
-import { useHashHistory, ComponentName, pageTitle, isDevelopment, krokiPumlSvgUrl, krokiD2SvgUrl } from "../const.js";
-import { useLikeC4Projects } from "likec4:projects";
-const ViewOutlet = styled("div", {
-  base: {
-    padding: "0",
-    margin: "0",
-    width: "full",
-    height: "full"
-  }
-}), ProjectIcons = lazy(async () => {
-  const { ProjectIcons: ProjectIcons2 } = await import("likec4:icons");
-  return {
-    default: ProjectIcons2
-  };
-}), 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 });
-  return /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer, children });
-}
-const LikeC4ModelDataContext = createContext(null), LikeC4ModelDataContextProvider = LikeC4ModelDataContext.Provider, useLikeC4ModelAtom = () => {
-  const ctx = useContext(LikeC4ModelDataContext);
-  if (ctx === null)
-    throw new Error("LikeC4ModelAtom is not provided");
-  return ctx;
-};
-function LikeC4ModelContext({ likec4model, children }) {
-  const model = useStore(likec4model);
-  return /* @__PURE__ */ jsx(LikeC4ModelDataContextProvider, { value: likec4model, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children }) });
-}
-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 $likec4model = useLikeC4ModelAtom(), [views, setViews] = useState([]);
-  return useEffect(() => $likec4model.subscribe((next) => {
-    setViews((prev) => {
-      const nextViews = [...next.views()].map((v) => {
-        const n = v.$layouted, p = prev.find((_) => _.id === v.id);
-        return p && deepEqual(n, p) ? p : n;
-      });
-      return shallowEqual(prev, nextViews) ? prev : nextViews;
-    });
-  }), [$likec4model]), views;
-}
-function useCurrentViewId() {
-  return useParams({
-    select: (params) => params.viewId,
-    strict: !1
-  }) ?? "index";
-}
-function useCurrentView() {
-  const viewId = useCurrentViewId(), $likec4model = useLikeC4ModelAtom(), [layoutType, setLayoutType] = useState("manual");
-  useUpdateEffect(() => {
-    setLayoutType("manual");
-  }, [viewId]);
-  const [view, setView] = useState(() => $likec4model.get().findView(viewId)?.$layouted ?? null);
-  return useEffect(() => $likec4model.subscribe((next) => {
-    setView((current) => {
-      const vm = next.findView(viewId);
-      if (!vm)
-        return null;
-      const nextView = layoutType === "auto" ? vm.$view : vm.$layouted;
-      return deepEqual(current, nextView) ? current : nextView;
-    });
-  }), [$likec4model, viewId, layoutType]), [view, setLayoutType];
-}
-function useCurrentProject() {
-  const projects = useLikeC4Projects(), projectId = useMatches({
-    select: (m2) => m2.find((m22) => m22.routeId === "/project/$projectId")?.params?.projectId ?? m2.at(-1)?.context.projectId ?? "default"
-  });
-  return projects.find((p) => p.id === projectId) ?? projects[0];
-}
-function AdHocViewEditor({ projectId }) {
-  return /* @__PURE__ */ jsx(
-    LikeC4AdHocViewEditor,
-    {
-      service: {
-        process: async ({ predicates }) => ({
-          view: await likec4rpc.calcAdhocView({ projectId, predicates })
-        })
-      }
-    }
-  );
-}
+import { d1 as createFileRoute, db as Container, bp as Stack, bZ as Title, W as Button, df as Link, dD as notFound, d2 as redirect, Q as m, d0 as Outlet, dE as Navigate, c$ as stripSearchParams, cZ as z } from "../vendors.js";
+import { loadModel } from "likec4:model";
+import { V as ViewOutlet, F as Fallback, L as LikeC4IconRendererContext, l as LikeC4ModelContext, A as AdHocViewEditor, H as Header, E as ExportPage, m as EmbedPage, n as ViewEditor, o as ViewReact, p as ViewAsPuml, q as ViewAsMmd, r as ViewAsDot, s as ViewAsD2 } from "./single.js";
+import { isRpcAvailable } from "likec4:rpc";
 const Route$a = createFileRoute("/project/$projectId")({
   staleTime: 1 / 0,
   beforeLoad: ({ params }) => ({
@@ -105,26 +12,21 @@ const Route$a = createFileRoute("/project/$projectId")({
     return [];
   },
   loader: async ({ context }) => {
-    const projectId = context.projectId;
-    return await import("likec4:model").then((m2) => m2.loadModel(projectId)).catch((err) => {
-      throw console.error(err), notFound();
-    }).then((likec4model) => {
-      const data = likec4model.$likec4data.value;
-      if (!data)
-        throw notFound();
-      if (data.projectId !== projectId)
-        throw redirect({
-          to: "/project/$projectId/",
-          search: !0,
-          params: {
-            projectId: data.projectId
-          }
-        });
-      return {
-        $likec4model: likec4model.$likec4model,
-        projectId
-      };
-    });
+    const projectId = context.projectId, likec4model = await loadModel(projectId), data = likec4model.$likec4data.value;
+    if (!data)
+      throw notFound();
+    if (data.projectId !== projectId)
+      throw redirect({
+        to: "/project/$projectId/",
+        search: !0,
+        params: {
+          projectId: data.projectId
+        }
+      });
+    return {
+      $likec4model: likec4model.$likec4model,
+      projectId
+    };
   },
   remountDeps({ params }) {
     return [params.projectId];
@@ -170,724 +72,6 @@ function Page$4() {
   const { projectId } = Route$8.useRouteContext();
   return /* @__PURE__ */ jsx(AdHocViewEditor, { projectId });
 }
-function ColorSchemeToggle() {
-  const { setColorScheme } = useMantineColorScheme({
-    keepTransitions: !0
-  }), computedColorScheme = useComputedColorScheme("light");
-  return /* @__PURE__ */ jsxs(
-    ActionIcon,
-    {
-      visibleFrom: "sm",
-      size: "md",
-      variant: "subtle",
-      color: "gray",
-      onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
-      "aria-label": "Toggle color scheme",
-      children: [
-        /* @__PURE__ */ jsx(IconMoonStars, { stroke: 1.5, display: computedColorScheme === "light" ? "block" : "none" }),
-        /* @__PURE__ */ jsx(IconSun, { stroke: 1.5, display: computedColorScheme === "dark" ? "block" : "none" })
-      ]
-    }
-  );
-}
-const { withProvider, withContext } = createStyleContext(navigationPanel), shouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && (isValidMotionProp(prop) || !isCssProperty(prop)), Root = withProvider(MotionDiv, "root", {
-  shouldForwardProp
-}), Body = withContext(MotionDiv, "body", {
-  shouldForwardProp
-});
-withContext(MotionDiv, "label", {
-  shouldForwardProp
-});
-withContext(MotionDiv, "dropdown", {
-  shouldForwardProp
-});
-const NavigationPanel = {
-  Root,
-  Body
-};
-function SelectProject() {
-  const projects = useLikeC4Projects$1(), project = useCurrentProject();
-  return projects.length < 2 ? null : /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
-    /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "subtle",
-        size: "sm",
-        color: "gray",
-        px: "sm",
-        rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 14 }),
-        visibleFrom: "md",
-        children: project.title ?? project.id
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(MenuDropdown, { children: [
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              ...props,
-              to: "/projects"
-            }
-          ),
-          children: "Projects overview"
-        }
-      ),
-      /* @__PURE__ */ jsx(MenuDivider, {}),
-      projects.map(({ id, title }) => /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              ...props,
-              to: "/project/$projectId/view/$viewId/",
-              params: {
-                projectId: id,
-                viewId: "index"
-              }
-            }
-          ),
-          children: title ?? id
-        },
-        id
-      ))
-    ] })
-  ] });
-}
-const AlertLocalhost = () => /* @__PURE__ */ jsx(
-  Alert,
-  {
-    color: "yellow",
-    icon: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
-    title: "Localhost URL",
-    styles: { body: { gap: rem(4) } },
-    children: /* @__PURE__ */ jsx(Text, { c: "yellow", size: "sm", children: "You need to deploy your project to make it available on the internet" })
-  }
-), CopyButtonChild = ({ copied, copy }) => /* @__PURE__ */ jsx(
-  Button,
-  {
-    size: "xs",
-    color: copied ? "teal" : "gray",
-    variant: "light",
-    leftSection: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }),
-    onClick: copy,
-    children: copied ? "Copied" : "Copy to clipboard"
-  }
-), EmbedPanel = ({ diagram }) => {
-  const router = useRouter(), { colorScheme } = useMantineColorScheme(), [theme, setTheme] = useState(colorScheme), padding = 20;
-  let location = router.buildLocation({
-    to: "/embed/$viewId/",
-    // '/' at the end added by Gemini 3, must have to pass typecheck
-    params: { viewId: diagram.id },
-    search: {
-      padding,
-      ...theme !== "auto" ? { theme } : {}
-      // changed from "theme: theme !== 'auto' ? theme : undefined" by Gemini 3
-    }
-  }).href;
-  location = useHashHistory ? `#${location}` : location;
-  const url = new URL(location, window.location.href), width = diagram.bounds.width + padding * 2, height = diagram.bounds.height + padding * 2, href = url.href, code = `
-<div style="aspect-ratio:${width}/${height};width:100%;height:auto;max-width:${width}px;margin:0 auto">
-  <iframe src="${href}" width="100%" height="100%" style="border:0;background:transparent;"></iframe>
-</div>
-`.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__ */ 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__ */ 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 })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Code, { block: !0, children: code }),
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          style: {
-            alignSelf: "flex-start"
-          },
-          children: /* @__PURE__ */ jsx(
-            Select,
-            {
-              label: "Color scheme",
-              value: theme,
-              allowDeselect: !1,
-              onChange: (v) => setTheme(v ?? "auto"),
-              data: [
-                { value: "auto", label: "Auto" },
-                { value: "light", label: "Light" },
-                { value: "dark", label: "Dark" }
-              ]
-            }
-          )
-        }
-      )
-    ] })
-  ] });
-};
-function WebcomponentsPanel({ diagram }) {
-  const router = useRouter();
-  let base = router.basepath.endsWith("/") ? router.basepath : `${router.basepath}/`;
-  const jscode = `
-  <script module src="${new URL(
-    `${base}likec4-views.js`,
-    window.location.href
-  ).href}"><\/script>
-`.trim(), htmlCode = `
-<${ComponentName.View}
-   view-id="${encodeURIComponent(diagram.id)}"
-   browser="true"
-   dynamic-variant="sequence">
-</${ComponentName.View}>
-`.trim(), webcomponentPreview = router.buildLocation(
-    {
-      to: "/webcomponent/$/",
-      // '/' at the end added by Gemini 3, must have to pass typecheck
-      params: { _splat: diagram.id },
-      search: !0
-    }
-  );
-  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__ */ 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__ */ 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(
-            CopyButton$1,
-            {
-              value: jscode,
-              timeout: 1500,
-              children: CopyButtonChild
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Code, { block: !0, children: jscode }),
-      /* @__PURE__ */ jsx(Box, { 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 ",
-        /* @__PURE__ */ jsx("code", { children: "<head>" }),
-        " or at the end of the ",
-        /* @__PURE__ */ jsx("code", { children: "<body>" }),
-        " ",
-        "tag."
-      ] }) })
-    ] }),
-    /* @__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(
-          CopyButton$1,
-          {
-            value: htmlCode,
-            timeout: 1500,
-            children: CopyButtonChild
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsx(Code, { block: !0, children: htmlCode }),
-      /* @__PURE__ */ jsx(Box, { 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>" }),
-        "."
-      ] }) })
-    ] })
-  ] });
-}
-function ShareModal({
-  onClose
-}) {
-  const [diagram] = useCurrentView(), [activeTab, setActiveTab] = useState("webcomponent");
-  return diagram ? /* @__PURE__ */ jsxs(
-    ModalRoot,
-    {
-      size: "xl",
-      opened: !0,
-      onClose,
-      children: [
-        /* @__PURE__ */ jsx(ModalOverlay, { backgroundOpacity: 0.5, blur: 3 }),
-        /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsxs(ModalBody, { children: [
-          /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onChange: (tab) => setActiveTab(tab ?? "webcomponent"), children: [
-            /* @__PURE__ */ jsxs(TabsList, { children: [
-              /* @__PURE__ */ jsx(TabsTab, { value: "webcomponent", children: "Webcomponent" }),
-              /* @__PURE__ */ jsx(TabsTab, { value: "embed", children: "Embedded" })
-            ] }),
-            /* @__PURE__ */ jsx(TabsPanel, { value: "embed", pt: "md", children: /* @__PURE__ */ jsx(EmbedPanel, { diagram }) }),
-            /* @__PURE__ */ jsx(TabsPanel, { value: "webcomponent", pt: "md", children: /* @__PURE__ */ jsx(WebcomponentsPanel, { diagram }) })
-          ] }),
-          /* @__PURE__ */ jsx(Group, { justify: "flex-end", mt: "lg", children: /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onClose, children: "Close" }) })
-        ] }) })
-      ]
-    }
-  ) : null;
-}
-const Header = memo(() => {
-  const projects = useLikeC4Projects$1(), isReactDiagramRoute = useMatches({
-    select(matches) {
-      return matches.some(
-        ({ routeId }) => routeId === "/_single/view/$viewId/" || routeId === "/project/$projectId/view/$viewId/"
-      );
-    }
-  }), { breakpoints } = useMantineTheme(), isTablet = useMediaQuery(`(min-width: ${breakpoints.md})`) ?? !1, [opened, { open, close }] = useDisclosure(!1);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(NavigationPanel.Root, { panelPosition: "right", hideBelow: "md", children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { gap: "2", children: [
-      isReactDiagramRoute ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(SelectProject, {}),
-        projects.length <= 1 && /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: isTablet ? "sm" : "xs",
-            leftSection: /* @__PURE__ */ jsx(IconShare, { size: 14 }),
-            onClick: open,
-            children: "Share"
-          }
-        ),
-        /* @__PURE__ */ jsx(ExportButton, {})
-      ] }) : /* @__PURE__ */ jsx(
-        Button,
-        {
-          component: Link,
-          to: "/view/$viewId/",
-          size: isTablet ? "sm" : "xs",
-          variant: "subtle",
-          color: "gray",
-          children: "Back to diagram"
-        }
-      ),
-      /* @__PURE__ */ jsx(Divider, { orientation: "vertical", visibleFrom: "md" }),
-      /* @__PURE__ */ jsx(ColorSchemeToggle, {})
-    ] }) }),
-    opened && /* @__PURE__ */ jsx(ShareModal, { onClose: close })
-  ] });
-}), enableDownload = (params) => ({
-  ...params,
-  download: !0
-});
-function ExportButton() {
-  const isInsideProject = useMatches({
-    select: (matches) => matches.some(({ routeId }) => routeId === "/project/$projectId")
-  });
-  return /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
-    /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "subtle",
-        size: "sm",
-        color: "gray",
-        px: "sm",
-        rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 14 }),
-        visibleFrom: "md",
-        children: "Export"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(MenuDropdown, { children: [
-      /* @__PURE__ */ jsx(MenuLabel, { children: "Current view" }),
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              target: "_blank",
-              to: isInsideProject ? "/project/$projectId/export/$viewId/" : "/export/$viewId/",
-              search: enableDownload,
-              ...props
-            }
-          ),
-          children: "Export as .png"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              to: isInsideProject ? "/project/$projectId/view/$viewId/dot/" : "/view/$viewId/dot/",
-              search: !0,
-              ...props
-            }
-          ),
-          children: "Export as .dot"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              to: isInsideProject ? "/project/$projectId/view/$viewId/d2" : "/view/$viewId/d2",
-              search: !0,
-              ...props
-            }
-          ),
-          children: "Export as .d2"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              to: isInsideProject ? "/project/$projectId/view/$viewId/mmd" : "/view/$viewId/mmd",
-              search: !0,
-              ...props
-            }
-          ),
-          children: "Export as .mmd"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              to: isInsideProject ? "/project/$projectId/view/$viewId/puml" : "/view/$viewId/puml",
-              search: !0,
-              ...props
-            }
-          ),
-          children: "Export as .puml"
-        }
-      ),
-      /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Draw.io" }),
-      /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Miro" }),
-      /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Notion" })
-    ] })
-  ] });
-}
-async function downloadAsPng({
-  pngFilename,
-  viewport
-}) {
-  try {
-    const blob = await toBlob(viewport, {
-      backgroundColor: "transparent",
-      cacheBust: !0,
-      imagePlaceholder: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
-    });
-    if (!blob)
-      throw new Error("Failed to create PNG blob");
-    var url = URL.createObjectURL(blob), link = document.createElement("a");
-    link.setAttribute("download", `${pngFilename}.png`), link.href = url, document.body.appendChild(link), link.click(), await new Promise((resolve) => setTimeout(resolve, 1e3)), document.body.removeChild(link), URL.revokeObjectURL(url), window.close();
-  } catch (err) {
-    console.error(err), window.alert("Failed to export to PNG, check the console for more details.");
-  }
-}
-function ExportPage() {
-  const [diagram] = useCurrentView();
-  return useTransparentBackground(), diagram ? /* @__PURE__ */ jsx(GuardedExportPage, { diagram }) : /* @__PURE__ */ jsx("div", { children: "Loading..." });
-}
-function GuardedExportPage({ diagram }) {
-  const {
-    padding = 20,
-    download = !1,
-    dynamic
-  } = useSearch({
-    strict: !1
-  }), viewportRef = useRef(null), loadingOverlayRef = useRef(null), downloadedRef = useRef(!1), bounds = pickViewBounds(diagram, dynamic), downloadDiagram = () => {
-    const viewport = viewportRef.current;
-    if (!download || !viewport || !diagram || downloadedRef.current)
-      return;
-    const loadingOverlay = loadingOverlayRef.current;
-    loadingOverlay && (loadingOverlay.style.display = "none"), downloadedRef.current = !0, downloadAsPng({
-      pngFilename: diagram.id,
-      viewport
-    });
-  }, 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",
-        zIndex: 2
-      },
-      style: {
-        marginRight: "auto",
-        marginBottom: "auto",
-        minWidth: width,
-        width,
-        minHeight: height,
-        height
-      },
-      children: [
-        download && /* @__PURE__ */ jsx(LoadingOverlay, { ref: loadingOverlayRef, visible: !0 }),
-        /* @__PURE__ */ jsx(
-          LikeC4Diagram,
-          {
-            view: diagram,
-            fitView: !1,
-            fitViewPadding: {
-              top: "0px",
-              bottom: "0px",
-              left: "0px",
-              right: "0px"
-            },
-            background: "transparent",
-            reduceGraphics: !1,
-            dynamicViewVariant: dynamic,
-            className: "likec4-static-view",
-            pannable: !1,
-            zoomable: !1,
-            controls: !1,
-            enableNotations: !1,
-            enableElementDetails: !1,
-            enableRelationshipDetails: !1,
-            enableRelationshipBrowser: !1,
-            enableDynamicViewWalkthrough: !1,
-            enableFocusMode: !1,
-            enableSearch: !1,
-            nodesSelectable: !1,
-            enableElementTags: !1,
-            onInitialized: () => {
-              if (!viewportRef.current) {
-                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(" + x + "px, " + y + "px)";
-              }), download && window.setTimeout(downloadDiagram, 500);
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function EmbedPage() {
-  const {
-    padding = 20,
-    dynamic
-  } = useSearch({
-    strict: !1
-  }), [diagram] = useCurrentView();
-  if (useTransparentBackground(!!diagram), !diagram)
-    return /* @__PURE__ */ jsx("div", { children: "Loading..." });
-  const bounds = pickViewBounds(diagram, dynamic);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: 0,
-        left: "50%",
-        boxSizing: "border-box",
-        padding,
-        transform: "translateX(-50%)",
-        aspectRatio: `${bounds.width + padding * 2} / ${bounds.height + padding * 2}`,
-        width: "100vw",
-        maxWidth: bounds.width + padding * 2,
-        height: "auto",
-        maxHeight: "100vh"
-      },
-      children: /* @__PURE__ */ jsx(
-        StaticLikeC4Diagram,
-        {
-          view: diagram,
-          fitView: !0,
-          background: "transparent",
-          fitViewPadding: 0,
-          dynamicViewVariant: dynamic,
-          initialWidth: bounds.width,
-          initialHeight: bounds.height
-        }
-      )
-    }
-  );
-}
-function ViewReact() {
-  const navigate = useNavigate(), [view, setLayoutType] = useCurrentView(), model = useLikeC4Model(), { dynamic } = useSearch({
-    from: "__root__"
-  }), onNavigateTo = useCallbackRef((viewId) => {
-    navigate({
-      to: "./",
-      viewTransition: !1,
-      params: (current) => ({
-        ...current,
-        viewId
-      }),
-      search: !0
-    });
-  }), title = view ? view.title ?? view.id : "View not found", pageTitle$1 = model.project.title ?? pageTitle;
-  if (useDocumentTitle(`${title} - ${pageTitle$1}`), !view)
-    return /* @__PURE__ */ jsx(NotFound, {});
-  const hasNotations = (view.notation?.nodes ?? []).length > 0;
-  return /* @__PURE__ */ jsxs(
-    LikeC4Diagram,
-    {
-      view,
-      zoomable: !0,
-      pannable: !0,
-      controls: !0,
-      fitViewPadding: {
-        top: "70px",
-        bottom: "32px",
-        left: "32px",
-        right: "32px"
-      },
-      showNavigationButtons: !0,
-      enableSearch: !0,
-      enableFocusMode: !0,
-      enableDynamicViewWalkthrough: !0,
-      dynamicViewVariant: dynamic,
-      enableElementDetails: !0,
-      enableRelationshipDetails: !0,
-      enableRelationshipBrowser: !0,
-      enableElementTags: !0,
-      enableCompareWithLatest: !0,
-      enableNotations: hasNotations,
-      nodesSelectable: !0,
-      onNavigateTo,
-      onLayoutTypeChange: setLayoutType,
-      onLogoClick: () => {
-        navigate({
-          to: "/"
-        });
-      },
-      children: [
-        /* @__PURE__ */ jsx(ListenForDynamicVariantChange, {}),
-        /* @__PURE__ */ jsx(OpenRelationshipBrowserFromUrl, {})
-      ]
-    }
-  );
-}
-function OpenRelationshipBrowserFromUrl() {
-  const router = useRouter(), diagram = useDiagram(), { relationships } = useSearch({
-    from: "__root__"
-  }), processedRef = useRef(null), isInitializedRef = useRef(!1), isProcessingRef = useRef(Promise.resolve()), isMounted = useIsMounted(), openAndClear = (fqn) => {
-    isProcessingRef.current = isProcessingRef.current.then(async () => {
-      if (!(!isMounted() || processedRef.current === fqn))
-        try {
-          processedRef.current = fqn, diagram.openRelationshipsBrowser(fqn), await router.buildAndCommitLocation({
-            search: (s) => {
-              const { relationships: _, ...rest } = s;
-              return rest;
-            },
-            replace: !0,
-            viewTransition: !1
-          });
-        } catch (error) {
-          console.error("Failed to open relationship browser:", error);
-        }
-    });
-  }, process = () => {
-    if (!relationships) {
-      processedRef.current = null;
-      return;
-    }
-    relationships && processedRef.current !== relationships && openAndClear(relationships);
-  };
-  return useOnDiagramEvent("initialized", () => {
-    isInitializedRef.current = !0, process();
-  }), useUpdateEffect(() => {
-    process();
-  }, [relationships]), null;
-}
-function ListenForDynamicVariantChange() {
-  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;
-}
-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;
-  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
-          };
-          return likec4rpc.updateView(event);
-        }
-      },
-      children: /* @__PURE__ */ jsxs(
-        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, {}),
-            /* @__PURE__ */ jsx(OpenRelationshipBrowserFromUrl, {})
-          ]
-        }
-      )
-    }
-  );
-}
 const Route$7 = createFileRoute("/project/$projectId/view/$viewId")({
   component: ViewLayout,
   errorComponent: ({ error, reset }) => /* @__PURE__ */ jsx(Fallback, { error, resetErrorBoundary: reset })
@@ -912,243 +96,7 @@ const Route$6 = createFileRoute("/project/$projectId/export/$viewId")({
   component: ExportPage
 }), Route$5 = createFileRoute("/project/$projectId/embed/$viewId")({
   component: EmbedPage
-});
-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 }) });
-}
-const svgContainer = css({
-  minWidth: 300,
-  "& svg": {
-    width: "100%",
-    height: "auto"
-  }
-}), cssScrollArea = css({
-  height: "100%",
-  "& .mantine-ScrollArea-viewport": {
-    minHeight: "100%"
-  },
-  "& .mantine-ScrollArea-viewport > div": {
-    minHeight: "100%",
-    height: "100%"
-  }
-}), cssCodeBlock = css({
-  minHeight: "100%"
-}), viewWithTopPadding = css({
-  height: "100%",
-  paddingTop: "[var(--header-height)]"
-}), fetchFromKroki$1 = async (puml) => await (await fetch(krokiPumlSvgUrl, {
-  method: "POST",
-  cache: "force-cache",
-  body: JSON.stringify({
-    diagram_source: puml,
-    output_format: "svg"
-  }),
-  headers: {
-    "Content-Type": "application/json"
-  }
-})).text();
-function ViewAsPuml({ pumlSource }) {
-  const [krokiSvg, { execute }] = useAsync(fetchFromKroki$1, null);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    It,
-    {
-      className: viewWithTopPadding,
-      orientation: "horizontal",
-      children: [
-        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
-          ScrollArea,
-          {
-            className: cssScrollArea,
-            p: 5,
-            styles: {
-              viewport: {
-                borderRadius: 6
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: pumlSource }),
-              /* @__PURE__ */ jsx(CopyToClipboard, { text: pumlSource })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          Nt,
-          {
-            style: {
-              width: 10
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(Ot, { 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(pumlSource);
-                },
-                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" }) })
-        ] }) })
-      ]
-    }
-  ) });
-}
-const renderSvg = async (viewId, diagram) => {
-  const { default: mermaid } = await import("https://cdn.jsdelivr.net/npm/mermaid@11.12/dist/mermaid.esm.min.mjs");
-  mermaid.initialize({
-    theme: "dark"
-  });
-  const { svg } = await mermaid.render(viewId, diagram);
-  return svg;
-};
-function ViewAsMmd({ viewId, mmdSource }) {
-  const [mmdSvg, { execute }] = useAsync(renderSvg, null);
-  return useEffect(() => {
-    execute(viewId, mmdSource);
-  }, [mmdSource]), /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    It,
-    {
-      className: viewWithTopPadding,
-      orientation: "horizontal",
-      children: [
-        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
-          ScrollArea,
-          {
-            className: cssScrollArea,
-            p: 5,
-            styles: {
-              viewport: {
-                borderRadius: 6
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: mmdSource }),
-              /* @__PURE__ */ jsx(CopyToClipboard, { text: mmdSource })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          Nt,
-          {
-            style: {
-              width: 10
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx(Box$1, { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
-      ]
-    }
-  ) });
-}
-function ViewAsDot({ dot, dotSvg }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(It, { className: viewWithTopPadding, children: [
-    /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
-      ScrollArea,
-      {
-        className: cssScrollArea,
-        p: 5,
-        styles: {
-          viewport: {
-            borderRadius: 6
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: dot }),
-          /* @__PURE__ */ jsx(CopyToClipboard, { text: dot })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      Nt,
-      {
-        style: {
-          width: 10
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: dotSvg } }) }) })
-  ] }) });
-}
-const fetchFromKroki = async (d2) => await (await fetch(krokiD2SvgUrl, {
-  method: "POST",
-  cache: "force-cache",
-  body: JSON.stringify({
-    diagram_source: d2,
-    // diagram_options: {
-    //   theme: 'colorblind-clear'
-    // },
-    output_format: "svg"
-  }),
-  headers: {
-    "Content-Type": "application/json"
-  }
-})).text();
-function ViewAsD2({ d2Source }) {
-  const [krokiSvg, { execute }] = useAsync(fetchFromKroki, null);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    It,
-    {
-      className: viewWithTopPadding,
-      orientation: "horizontal",
-      children: [
-        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
-          ScrollArea,
-          {
-            className: cssScrollArea,
-            p: 5,
-            styles: {
-              viewport: {
-                borderRadius: 6
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: d2Source }),
-              /* @__PURE__ */ jsx(CopyToClipboard, { text: d2Source })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          Nt,
-          {
-            style: {
-              width: 10
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(Ot, { 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(d2Source);
-                },
-                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" }) })
-        ] }) })
-      ]
-    }
-  ) });
-}
-const Route$4 = createFileRoute("/project/$projectId/view/$viewId/")({
+}), Route$4 = createFileRoute("/project/$projectId/view/$viewId/")({
   component: isRpcAvailable ? ViewEditor : ViewReact
 }), Route$3 = createFileRoute("/project/$projectId/view/$viewId/puml")({
   component: Page$3,
@@ -1227,12 +175,7 @@ function Page() {
   return /* @__PURE__ */ jsx(ViewAsD2, { d2Source: source });
 }
 export {
-  AdHocViewEditor as A,
-  ExportPage as E,
-  Header as H,
-  LikeC4IconRendererContext as L,
   Route$a as R,
-  ViewOutlet as V,
   Route$9 as a,
   Route$8 as b,
   Route$7 as c,
@@ -1242,14 +185,5 @@ export {
   Route$3 as g,
   Route$2 as h,
   Route$1 as i,
-  Route as j,
-  LikeC4ModelContext as k,
-  EmbedPage as l,
-  ViewEditor as m,
-  ViewReact as n,
-  ViewAsPuml as o,
-  ViewAsMmd as p,
-  ViewAsDot as q,
-  ViewAsD2 as r,
-  useLikeC4Views as u
+  Route as j
 };