likec4 1.46.4 → 1.48.0

package/__app__/src/main.js

@@ -1,2015 +1,8 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useEffect, lazy, Suspense, createContext, useContext, useState, useMemo, memo, useRef, StrictMode } from "react";
+import { jsx } from "react/jsx-runtime";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { cI as useRouter, cJ as isNotFound, cK as Container, by as Alert, R as Text, cL as Code, U as Button, bf as Group, bb as rem, b_ as Title, cM as Link, cN as useNavigate, bT as useCallbackRef, cO as createRootRouteWithContext, cP as stripSearchParams, ax as e, cQ as Outlet, k as useMantineColorScheme, cR as createFileRoute, cS as useDocumentTitle, b9 as Stack, cT as Loader, cU as useStore, O as ErrorBoundary, cV as Navigate, d as deepEqual, s as shallowEqual, cW as useParams, v as useIsomorphicLayoutEffect, cX as SimpleGrid, cY as useInViewport, cZ as e$1, ch as Card, aL as Box, c_ as notFound, a7 as r, bx as useTree, c$ as useComputedColorScheme, bz as Tree, b1 as HoverCard, b2 as HoverCardTarget, b3 as HoverCardDropdown, Q as ThemeIcon, d0 as onMount, r as atom, cg as useLocalStorage, d1 as useMatches, d2 as Drawer, bS as ScrollArea, aE as SegmentedControl, ay as ActionIcon, aC as Menu, bg as MenuTarget, bh as MenuDropdown, bi as MenuItem, b0 as CopyButton$1, d3 as Select, d4 as ModalRoot, d5 as ModalOverlay, d6 as ModalContent, d7 as ModalBody, bO as Tabs, bP as TabsList, bQ as TabsTab, bR as TabsPanel, d8 as useMantineTheme, d9 as useMediaQuery, da as useDisclosure, aF as Divider, b8 as Space, db as useParentMatches, dc as MenuLabel, dd as useSearch, aO as useDebouncedCallback, de as LoadingOverlay, df as toBlob, T as Tooltip, dg as useAsync, dh as PanelGroup, di as Panel, dj as PanelResizeHandle, dk as Burger, dl as createRouter, dm as createHashHistory, dn as createBrowserHistory, dp as RouterProvider, A as createTheme, P as Portal, C as MantineProvider } from "./vendors.js";
-import { c as css, L as LikeC4ProjectsProvider, u as useLikeC4Projects, I as IconRendererProvider, a as LikeC4ModelProvider, b as useUpdateEffect, S as StaticLikeC4Diagram, M as Markdown, B as Box$1, d as useLikeC4Model, e as IconStarFilled, f as IconStack2, g as IconLayoutDashboard, h as IconFileCode, i as IconFolderOpen, j as IconFolderFilled, k as IconArrowLeft, l as IconMoonStars, m as IconSun, n as IconChevronDown, o as IconAlertTriangle, p as IconCheck, q as IconCopy, r as IconExternalLink, s as IconShare, t as pickViewBounds, v as LikeC4Diagram, w as LikeC4EditorProvider, x as useDiagramContext } from "./likec4.js";
-import { pageTitle, ComponentName, useHashHistory, withOverviewGraph, isDevelopment, onViewChangeViaPlugin, isHotEnabled, krokiPumlSvgUrl, krokiD2SvgUrl, basepath } from "./const.js";
-import { projects } from "likec4:projects";
-import { RichText } from "@likec4/core/types";
-import { loadModel } from "likec4:model";
-import { nonexhaustive, compareNatural } from "@likec4/core/utils";
-function Fallback$1({ error, resetErrorBoundary }) {
-  const router2 = useRouter();
-  return isNotFound(error) ? /* @__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" }),
-      " ",
-      "does not exist or contains errors"
-    ] }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: () => {
-          resetErrorBoundary(), router2.navigate({
-            to: "/"
-          });
-        },
-        variant: "light",
-        color: "orange",
-        mt: "lg",
-        size: "xs",
-        children: "Go to overview"
-      }
-    )
-  ] }) }) : /* @__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: error.stack ?? error.message }),
-    /* @__PURE__ */ jsxs(Group, { mt: "lg", children: [
-      /* @__PURE__ */ jsx(Button, { onClick: resetErrorBoundary, color: "red", variant: "white", size: "xs", children: "Try again" }),
-      /* @__PURE__ */ jsx(Button, { onClick: () => router2.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: rem(38)
-});
-function NotFound() {
-  return /* @__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" }) })
-    ] })
-  ] }) });
-}
-function LikeC4ProjectsContext({ children }) {
-  const navigate = useNavigate(), onProjectChange = useCallbackRef((projectId) => {
-    navigate({ to: "/project/$projectId/", params: { projectId } }).catch(console.error);
-  });
-  return /* @__PURE__ */ jsx(
-    LikeC4ProjectsProvider,
-    {
-      projects,
-      onProjectChange,
-      children
-    }
-  );
-}
-const asTheme = (v) => {
-  if (typeof v != "string")
-    return "auto";
-  const vlower = v.toLowerCase();
-  return vlower === "light" || vlower === "dark" ? vlower : "auto";
-}, asPadding = (v) => {
-  switch (!0) {
-    case typeof v == "number":
-      return Math.round(v);
-    case typeof v == "string":
-      return Math.round(parseFloat(v));
-  }
-  return 20;
-}, asDynamicVariant = (v) => {
-  if (typeof v != "string")
-    return "diagram";
-  const vlower = v.toLowerCase();
-  return vlower === "diagram" || vlower === "sequence" ? vlower : "diagram";
-}, Route$l = createRootRouteWithContext()({
-  validateSearch: (search) => ({
-    ...e(search.padding) && {
-      padding: asPadding(search.padding)
-    },
-    ...e(search.theme) && {
-      theme: asTheme(search.theme)
-    },
-    ...e(search.dynamic) && {
-      dynamic: asDynamicVariant(search.dynamic)
-    }
-  }),
-  search: {
-    middlewares: [
-      stripSearchParams({
-        padding: 20,
-        theme: "auto",
-        dynamic: "diagram"
-      })
-    ]
-  },
-  beforeLoad: async () => {
-    const { projects: projects2 } = await import("likec4:projects");
-    return {
-      projectId: projects2.length > 0 ? projects2[0].id : "default"
-    };
-  },
-  component: RootComponent
-});
-function RootComponent() {
-  return /* @__PURE__ */ jsxs(LikeC4ProjectsContext, { children: [
-    /* @__PURE__ */ jsx(Outlet, {}),
-    /* @__PURE__ */ jsx(ThemeSync, {})
-  ] });
-}
-const ThemeSync = () => {
-  const { theme: theme2 } = Route$l.useSearch(), mantineColorScheme = useMantineColorScheme();
-  return useEffect(() => {
-    theme2 && mantineColorScheme.setColorScheme(theme2);
-  }, [theme2]), null;
-}, Route$k = createFileRoute("/projects")({
-  component: RouteComponent$3
-});
-function RouteComponent$3() {
-  const projects2 = useLikeC4Projects();
-  return useDocumentTitle(`Projects - ${pageTitle}`), /* @__PURE__ */ jsx(Container, { size: "xs", py: "lg", children: /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(Text, { fz: "lg", children: "Select a project" }),
-    projects2.map((v) => /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "default",
-        size: "lg",
-        fw: 400,
-        renderRoot: (props) => /* @__PURE__ */ jsx(Link, { ...props, to: "/project/$projectId/", params: { projectId: v.id } }),
-        styles: {
-          inner: {
-            justifyContent: "flex-start"
-          }
-        },
-        children: v.title ?? v.id
-      },
-      v.id
-    ))
-  ] }) });
-}
-const 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 }) });
-}
-css({
-  position: "absolute",
-  inset: "0",
-  zIndex: 1
-});
-const svgContainer = css({
-  minWidth: 300,
-  "& svg": {
-    width: "100%",
-    height: "auto"
-  }
-}), headerHeight = {
-  var: "--header-height"
-}, cssViewOutlet = css({
-  padding: "0",
-  margin: "0",
-  // paddingTop: headerHeight,
-  width: "100%",
-  height: "100%",
-  // position: 'absolute',
-  // top: headerHeight,
-  // left: 0,
-  // width: '100vw',
-  // height: `calc(100vh - ${headerHeight})`
-  [headerHeight.var]: "60px",
-  // TODO: temporary hack to fix the navigation webview position
-  "--likec4-options-panel-top": "60px",
-  "--likec4-options-panel-right": "10px"
-  // ['--likec4-navigation-webview-top']: '0.8rem',
-  // ['--likec4-navigation-webview-left']: '3.2rem'
-});
-css({
-  boxSizing: "border-box",
-  border: "0px solid transparent",
-  padding: "0",
-  margin: "0",
-  marginRight: "auto",
-  marginBottom: "auto",
-  background: "transparent"
-});
-const Route$j = createFileRoute("/_single")({
-  staleTime: 1 / 0,
-  loader: async ({ context }) => {
-    const { loadModel: loadModel2 } = await import("likec4:model"), projectId = context.projectId, { $likec4model } = await loadModel2(projectId);
-    return {
-      $likec4model,
-      projectId
-    };
-  },
-  component: RouteComponent$2
-});
-function RouteComponent$2() {
-  const { $likec4model, projectId } = Route$j.useLoaderData();
-  return /* @__PURE__ */ jsx("div", { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4IconRendererContext, { projectId, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4model: $likec4model, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
-}
-const Route$i = createFileRoute("/")({
-  component: () => useLikeC4Projects().length > 1 ? /* @__PURE__ */ jsx(Navigate, { to: "/projects/", replace: !0 }) : /* @__PURE__ */ jsx(
-    Navigate,
-    {
-      to: "/single-index/",
-      mask: {
-        to: "/",
-        unmaskOnReload: !0
-      }
-    }
-  )
-});
-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 ?? "index",
-    strict: !1
-  });
-}
-function useCurrentView() {
-  const viewId = useCurrentViewId(), $likec4model = useLikeC4ModelAtom(), [layoutType, setLayoutType] = useState("manual");
-  useUpdateEffect(() => {
-    setLayoutType("manual");
-  }, [viewId]);
-  const [view, setView] = useState($likec4model.value?.findView(viewId)?.$layouted ?? null);
-  return useEffect(() => $likec4model.subscribe((next) => {
-    setView((current) => {
-      const vm = next.findView(viewId);
-      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 projects2 = useLikeC4Projects(), projectId = useParams({
-    select: (params) => params.projectId,
-    strict: !1
-  });
-  return projects2.find((p) => p.id === projectId) ?? projects2[0];
-}
-css({
-  color: "mantine.colors.dimmed"
-});
-css({
-  // background: 'var(--color-surface)',
-});
-const previewBg = css({
-  position: "relative",
-  overflow: "hidden",
-  padding: "0",
-  margin: "0",
-  backgroundOrigin: "padding-box",
-  backgroundImage: "radial-gradient({colors.mantine.colors.defaultBorder} 15%, {colors.mantine.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$h = createFileRoute("/_single/single-index")({
-  component: RouteComponent$1
-});
-function RouteComponent$1() {
-  useDocumentTitle(pageTitle);
-  const views = useLikeC4Views();
-  return /* @__PURE__ */ jsx(Container, { size: "xl", children: /* @__PURE__ */ jsx(
-    SimpleGrid,
-    {
-      p: { base: "md", sm: "xl" },
-      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$1(30, 80));
-    return () => clearTimeout(tm);
-  }, [inViewport]), /* @__PURE__ */ jsxs(
-    Card,
-    {
-      ref,
-      shadow: "xs",
-      padding: "lg",
-      radius: "sm",
-      className: "group",
-      withBorder: !0,
-      children: [
-        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Box, { 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 })
-      ]
-    }
-  );
-}
-const Route$g = createFileRoute("/project/$projectId")({
-  staleTime: 1 / 0,
-  beforeLoad: ({ params }) => ({
-    projectId: params.projectId
-  }),
-  loader: async ({ context }) => {
-    const projectId = context.projectId;
-    try {
-      const { $likec4model } = await loadModel(projectId);
-      return {
-        $likec4model,
-        projectId
-      };
-    } catch (err) {
-      throw console.error(err), notFound();
-    }
-  },
-  component: RouteComponent,
-  notFoundComponent: () => /* @__PURE__ */ jsx("div", { className: cssViewOutlet, children: /* @__PURE__ */ jsx(Container, { py: "xl", children: /* @__PURE__ */ jsxs(Stack, { align: "flex-start", children: [
-    /* @__PURE__ */ jsx(Title, { children: "Project not found" }),
-    /* @__PURE__ */ jsx(Button, { component: Link, to: "/", search: !0, size: "md", children: "Open overview" })
-  ] }) }) })
-});
-function RouteComponent() {
-  const { $likec4model, projectId } = Route$g.useLoaderData();
-  return /* @__PURE__ */ jsx("div", { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4IconRendererContext, { projectId, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4model: $likec4model, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
-}
-const Route$f = createFileRoute("/project/$projectId/")({
-  component: () => {
-    const { projectId } = Route$f.useParams();
-    return /* @__PURE__ */ jsx(
-      Navigate,
-      {
-        to: "/project/$projectId/view/$viewId/",
-        replace: !0,
-        params: {
-          projectId,
-          viewId: "index"
-        }
-      }
-    );
-  }
-}), Route$e = createFileRoute("/_single/webcomponent/$")({
-  component: WebcomponentPage
-});
-function WebcomponentPage() {
-  const router2 = useRouter(), viewId = Route$e.useParams()._splat || "index", { colorScheme } = useMantineColorScheme();
-  let base = router2.basepath.endsWith("/") ? router2.basepath : `${router2.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$1,
-    {
-      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 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 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) => {
-    navigate({
-      to: "./",
-      viewTransition: !1,
-      params: (p) => ({
-        ...p,
-        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 theme2 = useComputedColorScheme();
-  return /* @__PURE__ */ jsx(Box$1, { 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: theme2 === "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), drawerOpenedAtom = atom(!1);
-onMount(drawerOpenedAtom, () => {
-  drawerOpenedAtom.set(!1);
-});
-const useDrawerOpened = () => useStore(drawerOpenedAtom), SidebarDrawerOps = {
-  open: () => drawerOpenedAtom.set(!0),
-  close: () => drawerOpenedAtom.set(!1)
-}, 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 ColorSchemeToggle() {
-  const { setColorScheme } = useMantineColorScheme({
-    keepTransitions: !0
-  }), computedColorScheme = useComputedColorScheme("light");
-  return /* @__PURE__ */ jsx(
-    ActionIcon,
-    {
-      visibleFrom: "sm",
-      size: "md",
-      variant: "subtle",
-      color: "gray",
-      onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
-      "aria-label": "Toggle color scheme",
-      children: computedColorScheme === "light" ? /* @__PURE__ */ jsx(IconMoonStars, { stroke: 1.5 }) : /* @__PURE__ */ jsx(IconSun, { stroke: 1.5 })
-    }
-  );
-}
-const cssHeader = css({
-  top: "4",
-  right: "4",
-  position: "absolute",
-  layerStyle: "likec4.panel",
-  rounded: "md",
-  '#likec4-root:has([data-likec4-diagram-panning="true"]) &': {
-    boxShadow: "none",
-    rounded: "0"
-  },
-  _print: {
-    display: "none"
-  }
-});
-function SelectProject() {
-  const projects2 = useLikeC4Projects(), project = useCurrentProject();
-  return projects2.length < 2 ? null : /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
-    /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        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__ */ jsx(MenuDropdown, { children: projects2.map(({ id, title: title2 }) => /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        renderRoot: (props) => /* @__PURE__ */ jsx(
-          Link,
-          {
-            ...props,
-            to: "/project/$projectId/view/$viewId/",
-            params: {
-              projectId: id,
-              viewId: "index"
-            }
-          }
-        ),
-        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 router2 = useRouter(), { colorScheme } = useMantineColorScheme(), [theme2, setTheme] = useState(colorScheme), padding = 20;
-  let location = router2.buildLocation({
-    to: "/embed/$viewId/",
-    // '/' at the end added by Gemini 3, must have to pass typecheck
-    params: { viewId: diagram.id },
-    search: {
-      padding,
-      ...theme2 !== "auto" ? { theme: theme2 } : {}
-      // 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: theme2,
-              allowDeselect: !1,
-              onChange: (v) => setTheme(v ?? "auto"),
-              data: [
-                { value: "auto", label: "Auto" },
-                { value: "light", label: "Light" },
-                { value: "dark", label: "Dark" }
-              ]
-            }
-          )
-        }
-      )
-    ] })
-  ] });
-};
-function WebcomponentsPanel({ diagram }) {
-  const router2 = useRouter();
-  let base = router2.basepath.endsWith("/") ? router2.basepath : `${router2.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 = router2.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 projects2 = useLikeC4Projects(), isReactDiagramRoute = useMatches({
-    select(matches) {
-      return matches.some(
-        ({ routeId }) => routeId === "/_single/view/$viewId/" || routeId === "/_single/view/$viewId/editor" || routeId === "/project/$projectId/view/$viewId"
-      );
-    }
-  }), { breakpoints } = useMantineTheme(), isTablet = useMediaQuery(`(min-width: ${breakpoints.md})`) ?? !1, [opened, { open, close }] = useDisclosure(!1);
-  return /* @__PURE__ */ jsxs(
-    Box$1,
-    {
-      className: cssHeader,
-      children: [
-        /* @__PURE__ */ jsxs(Group, { gap: isTablet ? 6 : 4, wrap: "nowrap", children: [
-          isReactDiagramRoute ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(SelectProject, {}),
-            projects2.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, {}),
-          /* @__PURE__ */ jsx(Space, {})
-        ] }),
-        opened && /* @__PURE__ */ jsx(ShareModal, { onClose: close })
-      ]
-    }
-  );
-});
-function ExportButton() {
-  const params = useParams({ strict: !1 }), isInsideProject = useParentMatches().some((match) => match.routeId === "/project/$projectId"), viewId = useCurrentViewId();
-  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: { download: !0 },
-              params: !0,
-              ...props
-            }
-          ),
-          children: "Export as .png"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          disabled: isInsideProject,
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              to: "/view/$viewId/dot",
-              search: !0,
-              params: !0,
-              ...props
-            }
-          ),
-          children: "Export as .dot"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          disabled: isInsideProject,
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              to: "/view/$viewId/d2",
-              search: !0,
-              params,
-              ...props
-            }
-          ),
-          children: "Export as .d2"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          disabled: isInsideProject,
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              to: "/view/$viewId/mmd",
-              search: !0,
-              params: {
-                viewId
-              },
-              ...props
-            }
-          ),
-          children: "Export as .mmd"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          disabled: isInsideProject,
-          renderRoot: (props) => /* @__PURE__ */ jsx(
-            Link,
-            {
-              to: "/view/$viewId/puml",
-              search: !0,
-              params: {
-                viewId
-              },
-              ...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" })
-    ] })
-  ] });
-}
-const Route$d = createFileRoute("/_single/view/$viewId")({
-  component: ViewLayout$1,
-  errorComponent: ({ error, reset }) => /* @__PURE__ */ jsx(Fallback, { error, resetErrorBoundary: reset })
-});
-function Fallback({ error, resetErrorBoundary }) {
-  const router2 = useRouter(), { viewId } = Route$d.useParams();
-  return useUpdateEffect(() => {
-    resetErrorBoundary();
-  }, [viewId]), isNotFound(error) ? /* @__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: viewId }),
-      " ",
-      "does not exist or contains errors"
-    ] }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: () => {
-          resetErrorBoundary(), router2.navigate({
-            to: "/",
-            search: !0
-          });
-        },
-        variant: "light",
-        color: "orange",
-        mt: "lg",
-        size: "xs",
-        children: "Go to overview"
-      }
-    )
-  ] }) }) : /* @__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: error.stack ?? error.message }),
-    /* @__PURE__ */ jsx(Button, { onClick: resetErrorBoundary, color: "red", variant: "white", mt: "lg", size: "xs", children: "Try again" })
-  ] }) });
-}
-function ViewLayout$1() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Outlet, {}),
-    /* @__PURE__ */ jsx(Header, {}),
-    !withOverviewGraph && /* @__PURE__ */ jsx(SidebarDrawer, {})
-  ] });
-}
-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 {
-    padding = 20,
-    download = !1,
-    dynamic
-  } = useSearch({
-    strict: !1
-  }), [diagram] = useCurrentView(), viewportRef = useRef(null), loadingOverlayRef = useRef(null), downloadedRef = useRef(!1);
-  useTransparentBackground();
-  const downloadDiagram = useDebouncedCallback(
-    () => {
-      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
-      });
-    },
-    [diagram],
-    500
-  );
-  if (!diagram)
-    return /* @__PURE__ */ jsx("div", { children: "Loading..." });
-  const bounds = pickViewBounds(diagram, dynamic), extraPadding = 16, width = bounds.width + padding * 2 + extraPadding, height = bounds.height + padding * 2 + extraPadding;
-  return /* @__PURE__ */ jsxs(
-    Box$1,
-    {
-      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 && downloadDiagram();
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-const asBoolean$1 = (v) => {
-  if (typeof v == "boolean")
-    return v;
-  if (typeof v == "string")
-    return v === "true";
-}, Route$c = createFileRoute("/_single/export/$viewId")({
-  component: ExportPage,
-  validateSearch: (search) => ({
-    download: asBoolean$1(search.download)
-  })
-});
-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$b = createFileRoute("/_single/embed/$viewId")({
-  component: EmbedPage
-});
-function ViewEditor() {
-  const navigate = useNavigate(), projectId = useCurrentProject().id, [view, setLayoutType] = useCurrentView(), $likec4model = useLikeC4ModelAtom(), onNavigateTo = useCallbackRef((viewId) => {
-    navigate({
-      to: "./",
-      viewTransition: !1,
-      params: (current) => ({
-        ...current,
-        viewId
-      }),
-      search: !0
-    });
-  });
-  if (!view)
-    return /* @__PURE__ */ jsx(NotFound, {});
-  const hasNotations = (view.notation?.nodes ?? []).length > 0, onChange = onViewChangeViaPlugin ?? void 0;
-  return /* @__PURE__ */ jsx(
-    LikeC4EditorProvider,
-    {
-      editor: {
-        fetchView: (id, layout) => {
-          const model = $likec4model.get().view(id);
-          return layout === "auto" ? model.$view : model.$layouted;
-        },
-        handleChange: (viewId, change) => {
-          onChange?.({
-            projectId,
-            viewId,
-            change
-          });
-        }
-      },
-      children: /* @__PURE__ */ jsx(
-        LikeC4Diagram,
-        {
-          view,
-          zoomable: !0,
-          pannable: !0,
-          controls: !0,
-          fitViewPadding: {
-            top: "70px",
-            bottom: "32px",
-            left: "50px",
-            right: "32px"
-          },
-          showNavigationButtons: !0,
-          enableNotations: isDevelopment || hasNotations,
-          enableSearch: !0,
-          enableDynamicViewWalkthrough: !0,
-          enableFocusMode: !0,
-          enableElementDetails: !0,
-          enableRelationshipDetails: !0,
-          enableRelationshipBrowser: !0,
-          enableElementTags: !0,
-          enableCompareWithLatest: !0,
-          onNavigateTo,
-          onLayoutTypeChange: setLayoutType,
-          onBurgerMenuClick: () => {
-            navigate({
-              to: "/"
-            });
-          }
-        }
-      )
-    }
-  );
-}
-function ViewReact() {
-  const navigate = useNavigate(), [view, setLayoutType] = useCurrentView(), model = useLikeC4Model(), { dynamic } = useSearch({
-    from: "__root__"
-  }), 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__ */ jsx(
-    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,
-      onBurgerMenuClick: () => {
-        navigate({
-          to: "/"
-        });
-      },
-      children: /* @__PURE__ */ jsx(DiagramListener, {})
-    }
-  );
-}
-function DiagramListener() {
-  const router2 = useRouter(), dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
-  return useUpdateEffect(() => {
-    (router2.latestLocation.search.dynamic ?? "diagram") !== dynamicViewVariant && router2.buildAndCommitLocation({
-      search: (current) => ({
-        ...current,
-        dynamic: dynamicViewVariant
-      }),
-      viewTransition: !1
-    });
-  }, [dynamicViewVariant]), null;
-}
-const Route$a = createFileRoute("/_single/view/$viewId/")({
-  component: isHotEnabled ? ViewEditor : ViewReact
-}), Route$9 = createFileRoute("/project/$projectId/view/$viewId")({
-  component: ViewLayout
-});
-function ViewLayout() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Outlet, {}),
-    /* @__PURE__ */ jsx(Header, {}),
-    !withOverviewGraph && /* @__PURE__ */ jsx(SidebarDrawer, {})
-  ] });
-}
-const asBoolean = (v) => {
-  if (typeof v == "boolean")
-    return v;
-  if (typeof v == "string")
-    return v === "true";
-}, Route$8 = createFileRoute("/project/$projectId/export/$viewId")({
-  component: ExportPage,
-  validateSearch: (search) => ({
-    download: asBoolean(search.download)
-  })
-}), Route$7 = 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 cssScrollArea = css({
-  height: "100%",
-  "& .mantine-ScrollArea-viewport": {
-    minHeight: "100%"
-  },
-  "& .mantine-ScrollArea-viewport > div": {
-    minHeight: "100%",
-    height: "100%"
-  }
-}), cssCodeBlock = css({
-  minHeight: "100%"
-}), viewWithTopPadding = css({
-  paddingTop: "[var(--header-height)]"
-}), Route$6 = createFileRoute("/_single/view/$viewId/puml")({
-  component: ViewAsPuml,
-  staleTime: 1 / 0,
-  loader: async ({ params, context }) => {
-    const projectId = context.projectId, { viewId } = params, { loadPumlSources } = await import("likec4:puml");
-    try {
-      const { pumlSource } = await loadPumlSources(projectId);
-      return {
-        source: pumlSource(viewId)
-      };
-    } catch (error) {
-      throw console.error(error), notFound();
-    }
-  }
-}), 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() {
-  const { source } = Route$6.useLoaderData(), [krokiSvg, { execute }] = useAsync(fetchFromKroki$1, null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsPuml", children: [
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
-        ScrollArea,
-        {
-          className: cssScrollArea,
-          p: 5,
-          styles: {
-            viewport: {
-              borderRadius: 6
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: source }),
-            /* @__PURE__ */ jsx(CopyToClipboard, { text: source })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        PanelResizeHandle,
-        {
-          style: {
-            width: 10
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
-        krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              mt: "xs",
-              variant: "light",
-              disabled: krokiSvg.status === "loading",
-              onClick: () => {
-                execute(source);
-              },
-              children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
-            }
-          ),
-          krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box, { children: krokiSvg.error?.message })
-        ] }),
-        krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box, { children: "Empty result" }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        pos: "fixed",
-        top: 14,
-        left: 10,
-        children: /* @__PURE__ */ jsx(
-          Burger,
-          {
-            size: "sm",
-            onClick: SidebarDrawerOps.open,
-            "aria-label": "Toggle navigation"
-          }
-        )
-      }
-    )
-  ] });
-}
-const Route$5 = createFileRoute("/_single/view/$viewId/mmd")({
-  component: ViewAsMmd,
-  staleTime: 1 / 0,
-  loader: async ({ params, context }) => {
-    const projectId = context.projectId, { viewId } = params, { loadMmdSources } = await import("likec4:mmd");
-    try {
-      const { mmdSource } = await loadMmdSources(projectId);
-      return {
-        source: mmdSource(viewId)
-      };
-    } catch (error) {
-      throw console.error(error), notFound();
-    }
-  }
-}), renderSvg = async (viewId, diagram) => {
-  const { default: mermaid } = await import("https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs");
-  mermaid.initialize({
-    theme: "dark"
-  });
-  const { svg } = await mermaid.render(viewId, diagram);
-  return svg;
-};
-function ViewAsMmd() {
-  const { viewId } = Route$5.useParams(), { source } = Route$5.useLoaderData(), [mmdSvg, { execute }] = useAsync(renderSvg, null);
-  return useEffect(() => {
-    execute(viewId, source);
-  }, [source]), /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsMmd", children: [
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
-        ScrollArea,
-        {
-          className: cssScrollArea,
-          p: 5,
-          styles: {
-            viewport: {
-              borderRadius: 6
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: source }),
-            /* @__PURE__ */ jsx(CopyToClipboard, { text: source })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        PanelResizeHandle,
-        {
-          style: {
-            width: 10
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        pos: "fixed",
-        top: 14,
-        left: 10,
-        children: /* @__PURE__ */ jsx(
-          Burger,
-          {
-            size: "sm",
-            onClick: SidebarDrawerOps.open,
-            "aria-label": "Toggle navigation"
-          }
-        )
-      }
-    )
-  ] });
-}
-const Route$4 = createFileRoute("/_single/view/$viewId/editor")({
-  component: ViewEditor
-}), Route$3 = createFileRoute("/_single/view/$viewId/dot")({
-  component: ViewAsDot,
-  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 ViewAsDot() {
-  const { dot, dotSvg } = Route$3.useLoaderData();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsDot", children: [
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
-        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(
-        PanelResizeHandle,
-        {
-          style: {
-            width: 10
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: dotSvg } }) }) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        pos: "fixed",
-        top: 14,
-        left: 10,
-        children: /* @__PURE__ */ jsx(
-          Burger,
-          {
-            size: "sm",
-            onClick: SidebarDrawerOps.open,
-            "aria-label": "Toggle navigation"
-          }
-        )
-      }
-    )
-  ] });
-}
-const Route$2 = createFileRoute("/_single/view/$viewId/d2")({
-  component: ViewAsD2,
-  staleTime: 1 / 0,
-  loader: async ({ context, params }) => {
-    const projectId = context.projectId, { viewId } = params, { loadD2Sources } = await import("likec4:d2");
-    try {
-      const { d2Source } = await loadD2Sources(projectId);
-      return {
-        source: d2Source(viewId)
-      };
-    } catch (error) {
-      throw console.error(error), notFound();
-    }
-  }
-}), 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() {
-  const { source } = Route$2.useLoaderData(), [krokiSvg, { execute }] = useAsync(fetchFromKroki, null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsD2", children: [
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
-        ScrollArea,
-        {
-          className: cssScrollArea,
-          p: 5,
-          styles: {
-            viewport: {
-              borderRadius: 6
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: source }),
-            /* @__PURE__ */ jsx(CopyToClipboard, { text: source })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        PanelResizeHandle,
-        {
-          style: {
-            width: 10
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
-        krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              mt: "xs",
-              variant: "light",
-              disabled: krokiSvg.status === "loading",
-              onClick: () => {
-                execute(source);
-              },
-              children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
-            }
-          ),
-          krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box, { children: krokiSvg.error?.message })
-        ] }),
-        krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box, { children: "Empty result" }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        pos: "fixed",
-        top: 14,
-        left: 10,
-        children: /* @__PURE__ */ jsx(
-          Burger,
-          {
-            size: "sm",
-            onClick: SidebarDrawerOps.open,
-            "aria-label": "Toggle navigation"
-          }
-        )
-      }
-    )
-  ] });
-}
-const Route$1 = createFileRoute("/project/$projectId/view/$viewId/")({
-  component: isHotEnabled ? ViewEditor : ViewReact
-}), Route = createFileRoute("/project/$projectId/view/$viewId/editor")({
-  component: ViewEditor
-}), ProjectsRoute = Route$k.update({
-  id: "/projects",
-  path: "/projects",
-  getParentRoute: () => Route$l
-}), SingleRouteRoute = Route$j.update({
-  id: "/_single",
-  getParentRoute: () => Route$l
-}), IndexRoute = Route$i.update({
-  id: "/",
-  path: "/",
-  getParentRoute: () => Route$l
-}), SingleSingleIndexRoute = Route$h.update({
-  id: "/single-index",
-  path: "/single-index",
-  getParentRoute: () => SingleRouteRoute
-}), ProjectProjectIdRouteRoute = Route$g.update({
-  id: "/project/$projectId",
-  path: "/project/$projectId",
-  getParentRoute: () => Route$l
-}), ProjectProjectIdIndexRoute = Route$f.update({
-  id: "/",
-  path: "/",
-  getParentRoute: () => ProjectProjectIdRouteRoute
-}), SingleWebcomponentSplatRoute = Route$e.update({
-  id: "/webcomponent/$",
-  path: "/webcomponent/$",
-  getParentRoute: () => SingleRouteRoute
-}), SingleViewViewIdRoute = Route$d.update({
-  id: "/view/$viewId",
-  path: "/view/$viewId",
-  getParentRoute: () => SingleRouteRoute
-}), SingleExportViewIdRoute = Route$c.update({
-  id: "/export/$viewId",
-  path: "/export/$viewId",
-  getParentRoute: () => SingleRouteRoute
-}), SingleEmbedViewIdRoute = Route$b.update({
-  id: "/embed/$viewId",
-  path: "/embed/$viewId",
-  getParentRoute: () => SingleRouteRoute
-}), SingleViewViewIdIndexRoute = Route$a.update({
-  id: "/",
-  path: "/",
-  getParentRoute: () => SingleViewViewIdRoute
-}), ProjectProjectIdViewViewIdRoute = Route$9.update(
-  {
-    id: "/view/$viewId",
-    path: "/view/$viewId",
-    getParentRoute: () => ProjectProjectIdRouteRoute
-  }
-), ProjectProjectIdExportViewIdRoute = Route$8.update({
-  id: "/export/$viewId",
-  path: "/export/$viewId",
-  getParentRoute: () => ProjectProjectIdRouteRoute
-}), ProjectProjectIdEmbedViewIdRoute = Route$7.update({
-  id: "/embed/$viewId",
-  path: "/embed/$viewId",
-  getParentRoute: () => ProjectProjectIdRouteRoute
-}), SingleViewViewIdPumlRoute = Route$6.update({
-  id: "/puml",
-  path: "/puml",
-  getParentRoute: () => SingleViewViewIdRoute
-}), SingleViewViewIdMmdRoute = Route$5.update({
-  id: "/mmd",
-  path: "/mmd",
-  getParentRoute: () => SingleViewViewIdRoute
-}), SingleViewViewIdEditorRoute = Route$4.update({
-  id: "/editor",
-  path: "/editor",
-  getParentRoute: () => SingleViewViewIdRoute
-}), SingleViewViewIdDotRoute = Route$3.update({
-  id: "/dot",
-  path: "/dot",
-  getParentRoute: () => SingleViewViewIdRoute
-}), SingleViewViewIdD2Route = Route$2.update({
-  id: "/d2",
-  path: "/d2",
-  getParentRoute: () => SingleViewViewIdRoute
-}), ProjectProjectIdViewViewIdIndexRoute = Route$1.update({
-  id: "/",
-  path: "/",
-  getParentRoute: () => ProjectProjectIdViewViewIdRoute
-}), ProjectProjectIdViewViewIdEditorRoute = Route.update({
-  id: "/editor",
-  path: "/editor",
-  getParentRoute: () => ProjectProjectIdViewViewIdRoute
-}), SingleViewViewIdRouteChildren = {
-  SingleViewViewIdD2Route,
-  SingleViewViewIdDotRoute,
-  SingleViewViewIdEditorRoute,
-  SingleViewViewIdMmdRoute,
-  SingleViewViewIdPumlRoute,
-  SingleViewViewIdIndexRoute
-}, SingleViewViewIdRouteWithChildren = SingleViewViewIdRoute._addFileChildren(SingleViewViewIdRouteChildren), SingleRouteRouteChildren = {
-  SingleSingleIndexRoute,
-  SingleEmbedViewIdRoute,
-  SingleExportViewIdRoute,
-  SingleViewViewIdRoute: SingleViewViewIdRouteWithChildren,
-  SingleWebcomponentSplatRoute
-}, SingleRouteRouteWithChildren = SingleRouteRoute._addFileChildren(
-  SingleRouteRouteChildren
-), ProjectProjectIdViewViewIdRouteChildren = {
-  ProjectProjectIdViewViewIdEditorRoute,
-  ProjectProjectIdViewViewIdIndexRoute
-}, ProjectProjectIdViewViewIdRouteWithChildren = ProjectProjectIdViewViewIdRoute._addFileChildren(
-  ProjectProjectIdViewViewIdRouteChildren
-), ProjectProjectIdRouteRouteChildren = {
-  ProjectProjectIdIndexRoute,
-  ProjectProjectIdEmbedViewIdRoute,
-  ProjectProjectIdExportViewIdRoute,
-  ProjectProjectIdViewViewIdRoute: ProjectProjectIdViewViewIdRouteWithChildren
-}, ProjectProjectIdRouteRouteWithChildren = ProjectProjectIdRouteRoute._addFileChildren(
-  ProjectProjectIdRouteRouteChildren
-), rootRouteChildren = {
-  IndexRoute,
-  SingleRouteRoute: SingleRouteRouteWithChildren,
-  ProjectsRoute,
-  ProjectProjectIdRouteRoute: ProjectProjectIdRouteRouteWithChildren
-}, routeTree = Route$l._addFileChildren(rootRouteChildren)._addFileTypes(), router = createRouter({
-  routeTree,
-  context: {
-    projectId: "default"
-  },
-  basepath,
-  trailingSlash: "always",
-  defaultViewTransition: !0,
-  history: useHashHistory ? createHashHistory() : createBrowserHistory(),
-  defaultStaleTime: 1 / 0,
-  scrollRestoration: !1,
-  defaultStructuralSharing: !0,
-  defaultNotFoundComponent: () => /* @__PURE__ */ jsx(NotFound, {}),
-  defaultErrorComponent: ({ error, reset }) => /* @__PURE__ */ jsx(Fallback$1, { error, resetErrorBoundary: reset })
-});
-function Routes() {
-  return /* @__PURE__ */ jsx(RouterProvider, { router });
-}
+import { R as Routes } from "./routes/index.js";
+import { A as createTheme, T as Tooltip, P as Portal, S as SegmentedControl, M as MantineProvider } from "./vendors.js";
 const theme = createTheme({
   autoContrast: !0,
   primaryColor: "indigo",
@@ -2027,7 +20,30 @@ const theme = createTheme({
       }
     }
   },
+  fontSizes: {
+    xxs: "var(--font-sizes-xxs)",
+    xs: "var(--font-sizes-xs)",
+    sm: "var(--font-sizes-sm)",
+    md: "var(--font-sizes-md)",
+    lg: "var(--font-sizes-lg)",
+    xl: "var(--font-sizes-xl)"
+  },
+  spacing: {
+    xs: "var(--spacing-xs)",
+    sm: "var(--spacing-sm)",
+    md: "var(--spacing-md)",
+    lg: "var(--spacing-lg)",
+    xl: "var(--spacing-xl)"
+  },
   components: {
+    SegmentedControl: SegmentedControl.extend({
+      vars: (theme2, props, ctx) => ({
+        root: {
+          // @ts-ignore
+          "--sc-font-size": theme2.fontSizes[props.fz ?? props.size]
+        }
+      })
+    }),
     Portal: Portal.extend({
       defaultProps: {
         reuseTargetNode: !0