likec4 1.55.1 → 1.56.0

package/__app__/src/routes/single.js

@@ -1,1983 +0,0 @@
-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 toJpeg, dC as toBlob, c$ as stripSearchParams, cZ as z, bS as useCallbackRef, aL as useIsMounted, T as Tooltip, dD as useAsync, dE as Ut, dF as qt, dG as Zt, dH 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";
-import { useMemo, createContext, useContext, useRef, useEffect, useState, useCallback, memo } from "react";
-import { useStore } from "likec4/vite-plugin/internal";
-import { RichText } from "@likec4/core/types";
-import { nonexhaustive, compareNatural } from "@likec4/core/utils";
-import { pageTitle, ComponentName, useHashHistory, isDevelopment, krokiPumlSvgUrl, krokiD2SvgUrl } from "../const.js";
-import { likec4rpc, isRpcAvailable } from "likec4:rpc";
-import { R as Route$c, r as resolveForceColorScheme } from "./index.js";
-import { useLikeC4Projects } from "likec4:projects";
-function Fallback({ error: _error, resetErrorBoundary }) {
-  const router = useRouter(), params = useParams({
-    strict: !1
-  });
-  if (isNotFound(_error))
-    return /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", children: [
-      /* @__PURE__ */ jsxs(Text, { c: "orange", fz: "md", children: [
-        "The diagram",
-        " ",
-        /* @__PURE__ */ jsx(Code, { color: "orange", children: params.viewId ?? "unknown" }),
-        " ",
-        "does not exist or contains errors"
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: () => {
-            resetErrorBoundary(), router.navigate({
-              to: "/"
-            });
-          },
-          variant: "light",
-          color: "orange",
-          mt: "lg",
-          size: "xs",
-          children: "Go to overview"
-        }
-      )
-    ] }) });
-  const error = _error;
-  let message = "Unknown error";
-  try {
-    switch (!0) {
-      case e$2(error):
-        message = "Unknown error";
-        break;
-      case e$1(error):
-        message = error.stack ?? error.message;
-        break;
-      case typeof error == "string":
-        message = error;
-        break;
-      case e(error):
-        message = error.stack ?? error.message ?? `${error}`;
-        break;
-      default:
-        message = `${error}`;
-        break;
-    }
-  } catch (e2) {
-    message = `${e2}`;
-  }
-  return /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "filled", color: "red", title: "Something went wrong", children: [
-    /* @__PURE__ */ jsx(Code, { block: !0, color: "red", children: message }),
-    /* @__PURE__ */ jsxs(Group, { mt: "lg", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: () => {
-            router.invalidate().finally(() => {
-              resetErrorBoundary();
-            });
-          },
-          color: "red",
-          variant: "white",
-          size: "xs",
-          children: "Try again"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: () => {
-            resetErrorBoundary(), router.navigate({ to: "/" });
-          },
-          color: "red",
-          size: "xs",
-          children: "Go to overview"
-        }
-      )
-    ] })
-  ] }) });
-}
-const content = css({
-  paddingTop: "[120px]",
-  position: "relative",
-  zIndex: "1",
-  sm: {
-    paddingTop: "[220px]"
-  }
-}), image = css({
-  position: "absolute",
-  inset: "0",
-  opacity: 0.2
-}), inner = css({
-  position: "relative"
-}), root = css({
-  paddingTop: "[80px]",
-  paddingBottom: "[80px]"
-}), description = css({
-  maxWidth: rem(540),
-  margin: "auto",
-  marginTop: "xl",
-  marginBottom: "[calc({spacing.xl}*1.5)]"
-}), title = css({
-  textAlign: "center",
-  fontWeight: "[900]",
-  fontSize: "[38px]"
-});
-function NotFound() {
-  const params = useParams({
-    strict: !1
-  });
-  return params.viewId ? /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", children: [
-    /* @__PURE__ */ jsxs(Text, { c: "orange", fz: "md", children: [
-      "The diagram",
-      " ",
-      /* @__PURE__ */ jsx(Code, { color: "orange", children: params.viewId }),
-      " ",
-      "does not exist or contains errors"
-    ] }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        component: Link,
-        to: "/",
-        variant: "light",
-        color: "orange",
-        mt: "lg",
-        size: "xs",
-        children: "Go to overview"
-      }
-    )
-  ] }) }) : /* @__PURE__ */ jsx(Container, { className: root, children: /* @__PURE__ */ jsxs("div", { className: inner, children: [
-    /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 362 145", className: image, children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        fill: "currentColor",
-        d: "M62.6 142c-2.133 0-3.2-1.067-3.2-3.2V118h-56c-2 0-3-1-3-3V92.8c0-1.333.4-2.733 1.2-4.2L58.2 4c.8-1.333 2.067-2 3.8-2h28c2 0 3 1 3 3v85.4h11.2c.933 0 1.733.333 2.4 1 .667.533 1 1.267 1 2.2v21.2c0 .933-.333 1.733-1 2.4-.667.533-1.467.8-2.4.8H93v20.8c0 2.133-1.067 3.2-3.2 3.2H62.6zM33 90.4h26.4V51.2L33 90.4zM181.67 144.6c-7.333 0-14.333-1.333-21-4-6.666-2.667-12.866-6.733-18.6-12.2-5.733-5.467-10.266-13-13.6-22.6-3.333-9.6-5-20.667-5-33.2 0-12.533 1.667-23.6 5-33.2 3.334-9.6 7.867-17.133 13.6-22.6 5.734-5.467 11.934-9.533 18.6-12.2 6.667-2.8 13.667-4.2 21-4.2 7.467 0 14.534 1.4 21.2 4.2 6.667 2.667 12.8 6.733 18.4 12.2 5.734 5.467 10.267 13 13.6 22.6 3.334 9.6 5 20.667 5 33.2 0 12.533-1.666 23.6-5 33.2-3.333 9.6-7.866 17.133-13.6 22.6-5.6 5.467-11.733 9.533-18.4 12.2-6.666 2.667-13.733 4-21.2 4zm0-31c9.067 0 15.6-3.733 19.6-11.2 4.134-7.6 6.2-17.533 6.2-29.8s-2.066-22.2-6.2-29.8c-4.133-7.6-10.666-11.4-19.6-11.4-8.933 0-15.466 3.8-19.6 11.4-4 7.6-6 17.533-6 29.8s2 22.2 6 29.8c4.134 7.467 10.667 11.2 19.6 11.2zM316.116 142c-2.134 0-3.2-1.067-3.2-3.2V118h-56c-2 0-3-1-3-3V92.8c0-1.333.4-2.733 1.2-4.2l56.6-84.6c.8-1.333 2.066-2 3.8-2h28c2 0 3 1 3 3v85.4h11.2c.933 0 1.733.333 2.4 1 .666.533 1 1.267 1 2.2v21.2c0 .933-.334 1.733-1 2.4-.667.533-1.467.8-2.4.8h-11.2v20.8c0 2.133-1.067 3.2-3.2 3.2h-27.2zm-29.6-51.6h26.4V51.2l-26.4 39.2z"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: content, children: [
-      /* @__PURE__ */ jsx(Title, { className: title, children: "Nothing to see here" }),
-      /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "lg", ta: "center", className: description, children: "Page you are trying to open does not exist. You may have mistyped the address, or the page has been moved to another URL. If you think this is an error contact support." }),
-      /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(Button, { component: Link, to: "/", search: !0, size: "md", children: "Take me back to home page" }) })
-    ] })
-  ] }) });
-}
-const ViewOutlet = styled("div", {
-  base: {
-    padding: "0",
-    margin: "0",
-    width: "full",
-    height: "full"
-  }
-});
-function LikeC4IconRendererContext({ children, projectId }) {
-  const IconRenderer = useMemo(() => getProjectIcons(projectId), [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 }) });
-}
-const Route$b = createFileRoute("/_single")({
-  staleTime: 1 / 0,
-  loaderDeps() {
-    return [];
-  },
-  loader: async ({ context }) => {
-    const projectId = context.projectId;
-    return {
-      $likec4model: (await loadModel(projectId)).$likec4model,
-      projectId
-    };
-  },
-  component: RouteComponent$1
-});
-function RouteComponent$1() {
-  const { $likec4model, projectId } = Route$b.useLoaderData();
-  return /* @__PURE__ */ jsx(ViewOutlet, { children: /* @__PURE__ */ jsx(m, { FallbackComponent: Fallback, children: /* @__PURE__ */ jsx(LikeC4IconRendererContext, { projectId, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4model: $likec4model, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
-}
-function ColorSchemeToggle() {
-  const { setColorScheme } = useMantineColorScheme({
-    keepTransitions: !0
-  }), computedColorScheme = useComputedColorScheme("light"), navigate = useNavigate(), { theme: urlTheme } = Route$c.useSearch(), isForced = resolveForceColorScheme(urlTheme) != null, pendingScheme = useRef(null);
-  return useEffect(() => {
-    pendingScheme.current != null && !isForced && (setColorScheme(pendingScheme.current), pendingScheme.current = null);
-  }, [isForced, setColorScheme]), /* @__PURE__ */ jsxs(
-    ActionIcon,
-    {
-      size: "md",
-      variant: "subtle",
-      color: "gray",
-      onClick: () => {
-        if (pendingScheme.current != null) return;
-        const next = computedColorScheme === "light" ? "dark" : "light";
-        isForced ? (pendingScheme.current = next, navigate({
-          from: Route$c.fullPath,
-          search: (prev) => ({ ...prev, theme: void 0 }),
-          replace: !0
-        }).catch(() => {
-          pendingScheme.current = null;
-        })) : setColorScheme(next);
-      },
-      "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" })
-      ]
-    }
-  );
-}
-function OverviewSearchAdapter({
-  onClose,
-  children
-}) {
-  const [searchValue, setSearchValue] = useState(""), [pickViewFor, setPickViewFor] = useState(null), navigate = useNavigate(), navigateTo = useCallback((viewId, focusOnElement) => {
-    onClose(), navigate({
-      to: "/view/$viewId/",
-      params: { viewId },
-      search: (prev) => ({
-        ...prev,
-        ...focusOnElement && { focusOnElement }
-      })
-    });
-  }, [navigate, onClose]), openPickView = useCallback((elementFqn) => {
-    setPickViewFor(elementFqn);
-  }, []), closePickView = useCallback(() => {
-    setPickViewFor(null);
-  }, []), value = useMemo(() => ({
-    searchValue,
-    setSearchValue,
-    normalizedSearch: normalizeSearch(searchValue),
-    navigateTo,
-    openPickView,
-    closePickView,
-    pickViewFor,
-    close: onClose,
-    currentViewId: null,
-    openedWithSearch: null
-  }), [searchValue, pickViewFor, navigateTo, openPickView, closePickView, onClose]);
-  return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
-}
-const OverviewSearch = memo(() => {
-  const [isOpened, setIsOpened] = useState(!1), dialogElRef = useRef(null), open = useCallback(() => setIsOpened(!0), []), close = useCallback(() => setIsOpened(!1), []), captureDialogRef = useCallback((node) => {
-    node && (dialogElRef.current = node);
-  }, []), handleExitComplete = useCallback(() => {
-    dialogElRef.current?.open && dialogElRef.current.close(), dialogElRef.current = null;
-  }, []);
-  return useHotkeys([
-    ["mod+k", open, { preventDefault: !0 }]
-  ]), /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(SearchControl, { onClick: open }),
-    /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: handleExitComplete, children: isOpened && /* @__PURE__ */ jsx(
-      Overlay,
-      {
-        ref: captureDialogRef,
-        fullscreen: !0,
-        withBackdrop: !1,
-        backdrop: {
-          opacity: 0.9
-        },
-        classes: {
-          dialog: dialogCss,
-          body: bodyCss
-        },
-        openDelay: 0,
-        onClose: close,
-        "data-likec4-search": "true",
-        children: /* @__PURE__ */ jsx(OverviewSearchAdapter, { onClose: close, children: /* @__PURE__ */ jsx(SearchPanelContent, {}) })
-      }
-    ) }) })
-  ] });
-});
-OverviewSearch.displayName = "OverviewSearch";
-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];
-}
-const isTreeNodeData = (node) => "type" in node && ["file", "folder", "view", "deployment-view"].includes(node.type);
-function dropFilename(relativePath) {
-  return relativePath === "" ? "" : relativePath.split("/").slice(0, -1).join("/");
-}
-function compareTreeNodes(a, b) {
-  return a.children.length === 0 && b.children.length > 0 ? 1 : a.children.length > 0 && b.children.length === 0 ? -1 : compareNatural(a.label, b.label);
-}
-function buildDiagramTreeData(views, groupBy) {
-  const root2 = {
-    value: "",
-    label: "Diagrams",
-    type: "folder",
-    children: []
-  }, findParent = (path) => {
-    let parent = root2;
-    if (path === "")
-      return parent;
-    const segments = path.split("/"), traversed = ["@fs"];
-    for (; segments.length; ) {
-      const label = segments.shift();
-      traversed.push(label);
-      const value = traversed.join("/");
-      let node = r(parent.children, (n) => n.value === value);
-      node || (node = { label, value, type: "folder", children: [] }, parent.children.push(node)), parent = node;
-    }
-    return parent;
-  };
-  for (const view of views) {
-    let relativePath;
-    switch (groupBy) {
-      case "by-files":
-        relativePath = view.$view.sourcePath ?? "";
-        break;
-      case "by-folders":
-        relativePath = dropFilename(view.$view.sourcePath ?? "");
-        break;
-      case "none":
-        relativePath = "";
-        break;
-      default:
-        nonexhaustive(groupBy);
-    }
-    const parent = findParent(relativePath);
-    parent.children.push({
-      value: view.id,
-      label: view.title ?? view.id,
-      type: view.isDeploymentView() ? "deployment-view" : "view",
-      children: []
-    }), parent !== root2 && (parent.children.sort(compareTreeNodes), groupBy === "by-files" && parent.type !== "file" && (parent.type = "file"));
-  }
-  return root2.children.sort(compareTreeNodes);
-}
-function useDiagramsTreeData(groupBy = "by-files") {
-  const model = useLikeC4Model();
-  return useMemo(() => buildDiagramTreeData([...model.views()], groupBy), [model, groupBy]);
-}
-const drawerOpenedAtom = atom(!1);
-onMount(drawerOpenedAtom, () => {
-  drawerOpenedAtom.set(!1);
-});
-const useDrawerOpened = () => useStore$1(drawerOpenedAtom), SidebarDrawerOps = {
-  open: () => drawerOpenedAtom.set(!0),
-  close: () => drawerOpenedAtom.set(!1)
-}, isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIcon = ({ node, expanded }) => isFile(node) ? /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "indigo", children: /* @__PURE__ */ jsx(IconFileCode, { size: 16 }) }) : /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "violet", children: expanded ? /* @__PURE__ */ jsx(IconFolderOpen, { size: 16 }) : /* @__PURE__ */ jsx(IconFolderFilled, { size: 16 }) }), setHoveredNode = () => {
-}, DiagramsTree = /* @__PURE__ */ memo(({ groupBy }) => {
-  const views = useLikeC4Views(), data = useDiagramsTreeData(groupBy), navigate = useNavigate(), navigateTo = (viewId2) => {
-    SidebarDrawerOps.close(), navigate({
-      to: "/view/$viewId/",
-      viewTransition: !1,
-      params: { viewId: viewId2 }
-    });
-  }, [diagram] = useCurrentView(), viewId = diagram?.id ?? null, tree = useTree({
-    multiple: !1
-  });
-  tree.setHoveredNode = setHoveredNode;
-  const sourcePath = diagram?.sourcePath ?? null;
-  useUpdateEffect(() => {
-    tree.collapseAllNodes();
-  }, [groupBy]), useEffect(() => {
-    if (sourcePath) {
-      const segments = sourcePath.split("/");
-      let path = "@fs";
-      for (const segment of segments)
-        path += `/${segment}`, tree.expand(path);
-    }
-  }, [sourcePath, groupBy]), useEffect(() => {
-    viewId && tree.select(viewId);
-  }, [viewId]);
-  const theme = useComputedColorScheme();
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-    Tree,
-    {
-      allowRangeSelection: !1,
-      tree,
-      data,
-      styles: {
-        node: {
-          marginTop: 2,
-          marginBottom: 2
-        }
-      },
-      levelOffset: "md",
-      renderNode: ({ node, selected, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsx(DiagramPreviewHoverCard, { diagram: hasChildren ? void 0 : views.find((v) => v.id === node.value), children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          fullWidth: !0,
-          color: theme === "light" ? "dark" : "gray",
-          variant: selected ? "transparent" : "subtle",
-          size: "sm",
-          fz: "sm",
-          fw: hasChildren ? "600" : "500",
-          justify: "flex-start",
-          styles: {
-            section: {
-              opacity: 0.5
-            }
-          },
-          leftSection: /* @__PURE__ */ jsxs(Fragment, { children: [
-            !hasChildren && node.value === "index" && /* @__PURE__ */ jsx(IconStarFilled, { size: 14, opacity: 0.7 }),
-            !hasChildren && node.value !== "index" && isTreeNodeData(node) && /* @__PURE__ */ jsxs(Fragment, { children: [
-              node.type === "deployment-view" && /* @__PURE__ */ jsx(IconStack2, { size: 14 }),
-              node.type === "view" && /* @__PURE__ */ jsx(IconLayoutDashboard, { size: 14 })
-            ] }),
-            hasChildren && /* @__PURE__ */ jsx(FolderIcon, { node, expanded })
-          ] }),
-          ...elementProps,
-          ...!hasChildren && {
-            onClick: (e2) => {
-              e2.stopPropagation(), navigateTo(node.value);
-            }
-          },
-          children: node.label
-        }
-      ) })
-    }
-  ) });
-}, (prev, next) => prev.groupBy === next.groupBy);
-function DiagramPreviewHoverCard({ diagram, children }) {
-  const ratio = diagram ? Math.max(diagram.bounds.width / 400, diagram.bounds.height / 300) : 1, width = diagram ? Math.round(diagram.bounds.width / ratio) : 0, height = diagram ? Math.round(diagram.bounds.height / ratio) : 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    diagram && /* @__PURE__ */ jsxs(HoverCard, { position: "right-start", openDelay: 400, closeDelay: 100, keepMounted: !1, shadow: "lg", children: [
-      /* @__PURE__ */ jsx(HoverCardTarget, { children }),
-      /* @__PURE__ */ jsx(HoverCardDropdown, { style: { width, height }, p: "xs", children: /* @__PURE__ */ jsx(DiagramPreview, { diagram }) })
-    ] }),
-    !diagram && children
-  ] });
-}
-const DiagramPreview = memo(({ diagram }) => {
-  const ratio = Math.max(diagram.bounds.width / 400, diagram.bounds.height / 300), width = Math.round(diagram.bounds.width / ratio), height = Math.round(diagram.bounds.height / ratio);
-  return /* @__PURE__ */ jsx(
-    StaticLikeC4Diagram,
-    {
-      view: diagram,
-      fitView: !0,
-      fitViewPadding: "4px",
-      enableElementDetails: !1,
-      reduceGraphics: !0,
-      initialWidth: width,
-      initialHeight: height
-    }
-  );
-}, (prev, next) => prev.diagram.id === next.diagram.id), SidebarDrawer = memo(() => {
-  const opened = useDrawerOpened(), [grouping, setGrouping] = useLocalStorage({
-    key: "sidebar-drawer-grouping",
-    defaultValue: "by-files"
-  }), isSingleProject = useMatches({
-    select: (matches) => matches.some((match) => match.routeId === "/_single")
-  });
-  return /* @__PURE__ */ jsxs(
-    Drawer.Root,
-    {
-      keepMounted: isSingleProject,
-      opened,
-      scrollAreaComponent: ScrollArea.Autosize,
-      onClose: SidebarDrawerOps.close,
-      children: [
-        /* @__PURE__ */ jsx(Drawer.Overlay, { blur: 2 }),
-        /* @__PURE__ */ jsxs(Drawer.Content, { children: [
-          /* @__PURE__ */ jsxs(Drawer.Header, { children: [
-            /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  component: Link,
-                  to: "/",
-                  leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 }),
-                  color: "dimmed",
-                  variant: "subtle",
-                  px: rem(5),
-                  styles: {
-                    section: {
-                      marginInlineEnd: 4
-                    }
-                  },
-                  size: "xs",
-                  children: "Overview"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                SegmentedControl,
-                {
-                  size: "xs",
-                  withItemsBorders: !1,
-                  value: grouping,
-                  onChange: setGrouping,
-                  data: [
-                    { label: "By files", value: "by-files" },
-                    { label: "By folders", value: "by-folders" },
-                    { label: "List", value: "none" }
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  leftSection: /* @__PURE__ */ jsx(IconStarFilled, { size: 12, stroke: 2 }),
-                  color: "dimmed",
-                  variant: "subtle",
-                  px: rem(5),
-                  styles: {
-                    section: {
-                      marginInlineEnd: 4
-                    }
-                  },
-                  size: "xs",
-                  renderRoot: (props) => /* @__PURE__ */ jsx(
-                    Link,
-                    {
-                      to: "/view/$viewId",
-                      params: { viewId: "index" },
-                      ...props
-                    }
-                  ),
-                  children: "Open index"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(Drawer.CloseButton, {})
-          ] }),
-          /* @__PURE__ */ jsx(Drawer.Body, { children: /* @__PURE__ */ jsx(DiagramsTree, { groupBy: grouping }) })
-        ] })
-      ]
-    }
-  );
-});
-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"
-});
-css({
-  // background: 'var(--color-surface)',
-});
-const previewBg = css({
-  position: "relative",
-  overflow: "hidden",
-  padding: "0",
-  margin: "0",
-  backgroundOrigin: "padding-box",
-  backgroundImage: "radial-gradient({colors.default.border} 15%, {colors.body} 15%)",
-  backgroundPosition: "0 0",
-  backgroundSize: "12px 12px",
-  _after: {
-    content: '" "',
-    position: "absolute",
-    top: "0",
-    left: "0",
-    right: "0",
-    bottom: "0",
-    zIndex: "1"
-  }
-}), cardLink = css({
-  position: "absolute",
-  inset: "0",
-  zIndex: 5
-}), Route$a = createFileRoute("/_single/single-index")({
-  component: RouteComponent
-});
-function RouteComponent() {
-  useDocumentTitle(pageTitle);
-  const allViews = useLikeC4Views(), { landingPage } = useCurrentProject(), views = filterLandingPageViews(allViews, landingPage);
-  return /* @__PURE__ */ jsxs(Container, { size: "xl", children: [
-    /* @__PURE__ */ jsx(SidebarDrawer, {}),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: css({
-          containerName: "likec4-root",
-          containerType: "inline-size",
-          display: "flex",
-          alignItems: "flex-start",
-          justifyContent: "space-between",
-          padding: "xs",
-          gap: "xs",
-          position: "sticky",
-          top: "0",
-          zIndex: "10",
-          backgroundColor: "likec4.panel.bg/85",
-          backdropFilter: "blur(8px)"
-        }),
-        children: [
-          /* @__PURE__ */ jsx(NavigationPanel$1.Root, { css: { position: "relative", width: "max-content", margin: "0" }, children: /* @__PURE__ */ jsxs(NavigationPanel$1.Body, { children: [
-            /* @__PURE__ */ jsx("div", { style: { width: 0, height: 36 }, "aria-hidden": !0 }),
-            /* @__PURE__ */ jsx(Burger, { size: "sm", onClick: SidebarDrawerOps.open, "aria-label": "Toggle navigation" }),
-            /* @__PURE__ */ jsx(
-              NavigationPanel$1.Logo,
-              {
-                css: { flexShrink: 0 },
-                onClick: () => window.scrollTo({ top: 0, behavior: "smooth" })
-              }
-            ),
-            /* @__PURE__ */ jsx(OverviewSearch, {})
-          ] }) }),
-          /* @__PURE__ */ jsx(NavigationPanel$1.Root, { panelPosition: "right", css: { position: "relative", margin: "0" }, children: /* @__PURE__ */ jsx(NavigationPanel$1.Body, { children: /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", minHeight: 36 }, children: /* @__PURE__ */ jsx(ColorSchemeToggle, {}) }) }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      SimpleGrid,
-      {
-        p: { base: "md", sm: "md" },
-        pt: { base: "sm", sm: "sm" },
-        cols: { base: 1, sm: 2, md: 3, xl: 4 },
-        spacing: { base: 10, sm: "xl" },
-        verticalSpacing: { base: "md", sm: "xl" },
-        children: views.map((v) => /* @__PURE__ */ jsx(ViewCard, { view: v }, v.id))
-      }
-    )
-  ] });
-}
-function ViewCard({ view }) {
-  const [visible, setVisible] = useState(!1), { ref, inViewport } = useInViewport();
-  return useEffect(() => {
-    if (!inViewport || visible) return;
-    const tm = setTimeout(() => setVisible(!0), e$3(30, 80));
-    return () => clearTimeout(tm);
-  }, [inViewport, visible]), /* @__PURE__ */ jsxs(
-    Card,
-    {
-      ref,
-      shadow: "xs",
-      padding: "lg",
-      radius: "sm",
-      className: "group",
-      withBorder: !0,
-      children: [
-        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Box$1, { className: previewBg, style: { height: 200 }, children: visible && /* @__PURE__ */ jsx(
-          StaticLikeC4Diagram,
-          {
-            background: "transparent",
-            view,
-            fitView: !0,
-            fitViewPadding: "4px",
-            reduceGraphics: !0
-          }
-        ) }) }),
-        /* @__PURE__ */ jsx(Group, { justify: "space-between", mt: "md", children: /* @__PURE__ */ jsx(Text, { fw: 500, children: view.title ?? view.id }) }),
-        /* @__PURE__ */ jsx(
-          Markdown,
-          {
-            value: RichText.from(view.description),
-            textScale: 0.75,
-            emptyText: "No description",
-            className: css({
-              lineClamp: 3,
-              mt: "1",
-              transition: "fast",
-              opacity: {
-                base: 0.8,
-                _groupHover: 1
-              }
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx(Link, { to: "/view/$viewId/", params: { viewId: view.id }, search: !0, className: cardLink })
-      ]
-    }
-  );
-}
-function AdHocViewEditor({ projectId }) {
-  return /* @__PURE__ */ jsx(
-    LikeC4AdHocViewEditor,
-    {
-      service: {
-        process: async ({ predicates }) => ({
-          view: await likec4rpc.calcAdhocView({ projectId, predicates })
-        })
-      }
-    }
-  );
-}
-const Route$9 = createFileRoute("/_single/adhoc")({
-  beforeLoad: () => {
-    if (!isRpcAvailable)
-      throw redirect({
-        to: "/single-index/"
-      });
-  },
-  component: Page$4
-});
-function Page$4() {
-  const { projectId } = Route$9.useRouteContext();
-  return /* @__PURE__ */ jsx(AdHocViewEditor, { projectId });
-}
-const Route$8 = createFileRoute("/_single/webcomponent/$")({
-  component: WebcomponentPage
-});
-function WebcomponentPage() {
-  const router = useRouter(), viewId = Route$8.useParams()._splat || "index", { colorScheme } = useMantineColorScheme();
-  let base = router.basepath.endsWith("/") ? router.basepath : `${router.basepath}/`;
-  const jsurl = new URL(
-    `${base}likec4-views.js`,
-    window.location.href
-  ), iframeHtml = `
-    <!DOCTYPE html>
-    <html lang="en-US" style="color-scheme: ${colorScheme};">
-    <head>
-      <meta charset="utf-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
-      <style>
-        * {
-          border-width: 0px;
-          border-style: solid;
-          box-sizing: border-box;
-          overflow-wrap: break-word;
-        }
-        html, body {
-          margin: 0;
-          background-color: transparent !important;
-          width: 100%;
-          height: 100%;
-          font-size: 16px;
-        }
-        body {
-          min-height: 100%;
-        }
-      </style>
-    </head>
-    <body>      
-      <div style="width: 100%; height: 100%; padding: clamp(0.5rem, 5vh, 4rem) clamp(0.5rem, 5vw, 5rem)">
-        <${ComponentName.View} view-id="${encodeURIComponent(viewId)}"></${ComponentName.View}>
-      </div>
-      <script type="module" src="${jsurl.href}"><\/script>
-    </body>
-    </html>
-  `;
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      css: {
-        position: "fixed",
-        inset: "0",
-        width: "100%",
-        height: "100%",
-        overflow: "hidden",
-        "& iframe": {
-          width: "100%",
-          height: "100%",
-          borderStyle: "none",
-          backgroundColor: "transparent",
-          overflow: "hidden"
-        }
-      },
-      children: /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          srcDoc: iframeHtml,
-          allowtransparency: "true"
-        }
-      )
-    }
-  );
-}
-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: 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(
-  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$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$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 })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Code, { block: !0, children: code }),
-      /* @__PURE__ */ jsx(
-        Box$1,
-        {
-          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$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$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(
-            CopyButton$1,
-            {
-              value: jscode,
-              timeout: 1500,
-              children: CopyButtonChild
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Code, { block: !0, children: jscode }),
-      /* @__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 ",
-        /* @__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$1, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
-        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
-          CopyButton$1,
-          {
-            value: htmlCode,
-            timeout: 1500,
-            children: CopyButtonChild
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsx(Code, { block: !0, children: htmlCode }),
-      /* @__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>" }),
-        "."
-      ] }) })
-    ] })
-  ] });
-}
-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
-}), enableJpegDownload = (params) => ({
-  ...params,
-  download: !0,
-  format: "jpeg"
-});
-function ExportButton() {
-  const isInsideProject = useMatches({
-    select: (matches) => matches.some(({ routeId }) => routeId === "/project/$projectId")
-  }), project = useCurrentProject(), viewId = useCurrentViewId(), handleDrawioExport = useCallback(async () => {
-    try {
-      const { loadDrawioSources } = await import("likec4:drawio"), { drawioEditUrl } = await loadDrawioSources(project.id), url = drawioEditUrl(viewId);
-      window.open(url, "_blank", "noopener,noreferrer");
-    } catch (error) {
-      console.error("Failed to export to Draw.io:", error);
-    }
-  }, [project.id, viewId]);
-  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,
-            {
-              target: "_blank",
-              to: isInsideProject ? "/project/$projectId/export/$viewId/" : "/export/$viewId/",
-              search: enableJpegDownload,
-              ...props
-            }
-          ),
-          children: "Export as .jpg"
-        }
-      ),
-      /* @__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, { onClick: handleDrawioExport, children: "Export to Draw.io" }),
-      /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Miro" }),
-      /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Notion" })
-    ] })
-  ] });
-}
-const Route$7 = createFileRoute("/_single/view/$viewId")({
-  component: ViewLayout,
-  errorComponent: ({ error, reset }) => /* @__PURE__ */ jsx(Fallback, { error, resetErrorBoundary: reset })
-});
-function ViewLayout() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Outlet, {}),
-    /* @__PURE__ */ jsx(Header, {})
-  ] });
-}
-function triggerDownload(url, filename) {
-  const link = document.createElement("a");
-  return link.setAttribute("download", filename), link.href = url, document.body.appendChild(link), link.click(), new Promise(
-    (resolve) => setTimeout(() => {
-      document.body.removeChild(link), URL.revokeObjectURL(url), resolve();
-    }, 1e3)
-  );
-}
-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");
-    const url = URL.createObjectURL(blob);
-    await triggerDownload(url, `${pngFilename}.png`), window.close();
-  } catch (err) {
-    console.error(err), window.alert("Failed to export to PNG, check the console for more details.");
-  }
-}
-async function downloadAsJpeg({
-  filename,
-  viewport,
-  quality = 0.8
-}) {
-  try {
-    const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue("--mantine-color-body"), dataUrl = await toJpeg(viewport, {
-      backgroundColor,
-      quality,
-      cacheBust: !0,
-      // 1x1 transparent GIF used as fallback when remote images fail to load
-      imagePlaceholder: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
-    });
-    await triggerDownload(dataUrl, `${filename}.jpg`), window.close();
-  } catch (err) {
-    console.error(err), window.alert("Failed to export to JPEG, check the console for more details.");
-  }
-}
-function ExportPage() {
-  const [diagram] = useCurrentView(), { format } = useSearch({ strict: !1 }), isJpeg = format === "jpeg";
-  return useTransparentBackground(!isJpeg), diagram ? /* @__PURE__ */ jsx(GuardedExportPage, { diagram, isJpeg }) : /* @__PURE__ */ jsx("div", { children: "Loading..." });
-}
-function GuardedExportPage({ diagram, isJpeg }) {
-  const {
-    padding = 20,
-    download = !1,
-    quality,
-    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, isJpeg ? downloadAsJpeg({
-      filename: diagram.id,
-      viewport,
-      quality: quality ?? 0.8
-    }) : downloadAsPng({
-      pngFilename: diagram.id,
-      viewport
-    });
-  }, extraPadding = 16, width = bounds.width + padding * 2 + extraPadding, height = bounds.height + padding * 2 + extraPadding;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ref: viewportRef,
-      "data-testid": "export-page",
-      css: {
-        position: "fixed",
-        top: "0",
-        left: "0",
-        padding: "0",
-        margin: "0",
-        overflow: "hidden",
-        zIndex: 2
-      },
-      style: {
-        marginRight: "auto",
-        marginBottom: "auto",
-        minWidth: width,
-        width,
-        minHeight: height,
-        height,
-        background: isJpeg ? "var(--mantine-color-body)" : "transparent"
-      },
-      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: isJpeg ? "solid" : "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);
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-const Route$6 = createFileRoute("/_single/export/$viewId")({
-  validateSearch: z.object({
-    download: z.boolean().optional().catch(!1),
-    format: z.enum(["png", "jpeg"]).optional().catch("png"),
-    quality: z.number().min(0).max(1).optional().catch(void 0)
-  }),
-  search: {
-    middlewares: [
-      stripSearchParams({
-        download: !1,
-        format: "png",
-        quality: void 0
-      })
-    ]
-  },
-  component: ExportPage
-});
-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
-        }
-      )
-    }
-  );
-}
-const Route$5 = createFileRoute("/_single/embed/$viewId")({
-  component: EmbedPage
-});
-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
-    });
-  }), title2 = view ? view.title ?? view.id : "View not found", pageTitle$1 = model.project.title ?? pageTitle;
-  if (useDocumentTitle(`${title2} - ${pageTitle$1}`), !view)
-    return /* @__PURE__ */ jsx(NotFound, {});
-  const hasNotations = (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, {}),
-        /* @__PURE__ */ jsx(FocusElementFromUrl, {})
-      ]
-    }
-  );
-}
-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 FocusElementFromUrl() {
-  const router = useRouter(), diagram = useDiagram(), { focusOnElement } = useSearch({
-    from: "__root__"
-  }), processedRef = useRef(null), focusAndClear = useCallbackRef((fqn) => {
-    try {
-      if (processedRef.current === fqn) return;
-      processedRef.current = fqn, diagram.focusOnElement(fqn), router.buildAndCommitLocation({
-        search: (s) => {
-          const { focusOnElement: _, ...rest } = s;
-          return rest;
-        },
-        replace: !0,
-        viewTransition: !1
-      });
-    } catch (error) {
-      console.error("focusOnElement failed:", error);
-    }
-  });
-  return useOnDiagramEvent("initialized", () => {
-    focusOnElement && processedRef.current !== focusOnElement && focusAndClear(focusOnElement);
-  }), useUpdateEffect(() => {
-    focusOnElement || (processedRef.current = null);
-  }, [focusOnElement]), 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, {}),
-            /* @__PURE__ */ jsx(FocusElementFromUrl, {})
-          ]
-        }
-      )
-    }
-  );
-}
-const Route$4 = createFileRoute("/_single/view/$viewId/")({
-  component: isRpcAvailable ? ViewEditor : ViewReact
-});
-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$1, { 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(
-    Ut,
-    {
-      className: viewWithTopPadding,
-      orientation: "horizontal",
-      children: [
-        /* @__PURE__ */ jsx(qt, { 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(
-          Zt,
-          {
-            style: {
-              width: 10
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(qt, { 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, { 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" }) })
-        ] }) })
-      ]
-    }
-  ) });
-}
-const Route$3 = createFileRoute("/_single/view/$viewId/puml")({
-  component: Page$3,
-  staleTime: 1 / 0,
-  loader: async ({ params, context }) => {
-    const projectId = context.projectId, { viewId } = params, { loadPumlSources } = await import("likec4:puml");
-    try {
-      const { pumlSource } = await loadPumlSources(projectId);
-      return {
-        source: pumlSource(viewId)
-      };
-    } catch (error) {
-      throw console.error(error), notFound();
-    }
-  }
-});
-function Page$3() {
-  const { source } = Route$3.useLoaderData();
-  return /* @__PURE__ */ jsx(ViewAsPuml, { pumlSource: source });
-}
-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(
-    Ut,
-    {
-      className: viewWithTopPadding,
-      orientation: "horizontal",
-      children: [
-        /* @__PURE__ */ jsx(qt, { 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(
-          Zt,
-          {
-            style: {
-              width: 10
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(qt, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx(Box, { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
-      ]
-    }
-  ) });
-}
-const Route$2 = createFileRoute("/_single/view/$viewId/mmd")({
-  component: Page$2,
-  staleTime: 1 / 0,
-  loader: async ({ params, context }) => {
-    const projectId = context.projectId, { viewId } = params, { loadMmdSources } = await import("likec4:mmd");
-    try {
-      const { mmdSource } = await loadMmdSources(projectId);
-      return {
-        source: mmdSource(viewId)
-      };
-    } catch (error) {
-      throw console.error(error), notFound();
-    }
-  }
-});
-function Page$2() {
-  const { viewId } = Route$2.useParams(), { source } = Route$2.useLoaderData();
-  return /* @__PURE__ */ jsx(ViewAsMmd, { viewId, mmdSource: source });
-}
-function ViewAsDot({ dot, dotSvg }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Ut, { className: viewWithTopPadding, children: [
-    /* @__PURE__ */ jsx(qt, { 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(
-      Zt,
-      {
-        style: {
-          width: 10
-        }
-      }
-    ),
-    /* @__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")({
-  component: Page$1,
-  staleTime: 1 / 0,
-  loader: async ({ params, context }) => {
-    const projectId = context.projectId, { viewId } = params, { loadDotSources } = await import("likec4:dot");
-    try {
-      const { dotSource, svgSource } = await loadDotSources(projectId), dot = dotSource(viewId), dotSvg = svgSource(viewId);
-      return {
-        dot,
-        dotSvg
-      };
-    } catch (error) {
-      throw console.error(error), notFound();
-    }
-  }
-});
-function Page$1() {
-  const { dot, dotSvg } = Route$1.useLoaderData();
-  return /* @__PURE__ */ jsx(ViewAsDot, { dot, 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(
-    Ut,
-    {
-      className: viewWithTopPadding,
-      orientation: "horizontal",
-      children: [
-        /* @__PURE__ */ jsx(qt, { 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(
-          Zt,
-          {
-            style: {
-              width: 10
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(qt, { 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, { 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" }) })
-        ] }) })
-      ]
-    }
-  ) });
-}
-const Route = createFileRoute("/_single/view/$viewId/d2")({
-  component: Page,
-  staleTime: 1 / 0,
-  loader: async ({ context, params }) => {
-    const projectId = context.projectId, { viewId } = params, { loadD2Sources } = await import("likec4:d2");
-    try {
-      const { d2Source } = await loadD2Sources(projectId);
-      return {
-        source: d2Source(viewId)
-      };
-    } catch (error) {
-      throw console.error(error), notFound();
-    }
-  }
-});
-function Page() {
-  const { source } = Route.useLoaderData();
-  return /* @__PURE__ */ jsx(ViewAsD2, { d2Source: source });
-}
-export {
-  AdHocViewEditor as A,
-  ExportPage as E,
-  Fallback as F,
-  Header as H,
-  LikeC4IconRendererContext as L,
-  NotFound as N,
-  Route$b as R,
-  ViewOutlet as V,
-  Route$a as a,
-  Route$9 as b,
-  Route$8 as c,
-  Route$7 as d,
-  Route$6 as e,
-  Route$5 as f,
-  Route$4 as g,
-  Route$3 as h,
-  Route$2 as i,
-  Route$1 as j,
-  Route as k,
-  LikeC4ModelContext as l,
-  EmbedPage as m,
-  ViewEditor as n,
-  ViewReact as o,
-  ViewAsPuml as p,
-  ViewAsMmd as q,
-  ViewAsDot as r,
-  ViewAsD2 as s
-};