import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { useEffect, lazy, Suspense, createContext, useContext, useState, useMemo, memo, useRef, StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { cI as useRouter, cJ as isNotFound, cK as Container, by as Alert, R as Text, cL as Code, U as Button, bf as Group, bb as rem, b_ as Title, cM as Link, cN as useNavigate, bT as useCallbackRef, cO as createRootRouteWithContext, cP as stripSearchParams, ax as e, cQ as Outlet, k as useMantineColorScheme, cR as createFileRoute, cS as useDocumentTitle, b9 as Stack, cT as Loader, cU as useStore, O as ErrorBoundary, cV as Navigate, d as deepEqual, s as shallowEqual, cW as useParams, v as useIsomorphicLayoutEffect, cX as SimpleGrid, cY as useInViewport, cZ as e$1, ch as Card, aL as Box, c_ as notFound, a7 as r, bx as useTree, c$ as useComputedColorScheme, bz as Tree, b1 as HoverCard, b2 as HoverCardTarget, b3 as HoverCardDropdown, Q as ThemeIcon, d0 as onMount, r as atom, cg as useLocalStorage, d1 as useMatches, d2 as Drawer, bS as ScrollArea, aE as SegmentedControl, ay as ActionIcon, aC as Menu, bg as MenuTarget, bh as MenuDropdown, bi as MenuItem, b0 as CopyButton$1, d3 as Select, d4 as ModalRoot, d5 as ModalOverlay, d6 as ModalContent, d7 as ModalBody, bO as Tabs, bP as TabsList, bQ as TabsTab, bR as TabsPanel, d8 as useMantineTheme, d9 as useMediaQuery, da as useDisclosure, aF as Divider, b8 as Space, db as useParentMatches, dc as MenuLabel, dd as useSearch, aO as useDebouncedCallback, de as LoadingOverlay, df as toBlob, T as Tooltip, dg as useAsync, dh as PanelGroup, di as Panel, dj as PanelResizeHandle, dk as Burger, dl as createRouter, dm as createHashHistory, dn as createBrowserHistory, dp as RouterProvider, A as createTheme, P as Portal, C as MantineProvider } from "./vendors.js";
import { c as css, L as LikeC4ProjectsProvider, u as useLikeC4Projects, I as IconRendererProvider, a as LikeC4ModelProvider, b as useUpdateEffect, S as StaticLikeC4Diagram, M as Markdown, B as Box$1, d as useLikeC4Model, e as IconStarFilled, f as IconStack2, g as IconLayoutDashboard, h as IconFileCode, i as IconFolderOpen, j as IconFolderFilled, k as IconArrowLeft, l as IconMoonStars, m as IconSun, n as IconChevronDown, o as IconAlertTriangle, p as IconCheck, q as IconCopy, r as IconExternalLink, s as IconShare, t as pickViewBounds, v as LikeC4Diagram, w as LikeC4EditorProvider, x as useDiagramContext } from "./likec4.js";
import { 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 });
}
const theme = createTheme({
  autoContrast: !0,
  primaryColor: "indigo",
  cursorType: "pointer",
  fontFamily: "var(--likec4-app-font)",
  headings: {
    fontWeight: "500",
    sizes: {
      h1: {
        // fontSize: '2rem',
        fontWeight: "600"
      },
      h2: {
        // fontSize: '1.85rem',
      }
    }
  },
  components: {
    Portal: Portal.extend({
      defaultProps: {
        reuseTargetNode: !0
      }
    }),
    Tooltip: Tooltip.extend({
      defaultProps: {
        color: "dark"
      }
    })
  }
});
createRoot(document.getElementById("likec4-root")).render(
  /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(MantineProvider, { theme, defaultColorScheme: "auto", children: /* @__PURE__ */ jsx(Routes, {}) }) })
);
