likec4 1.48.0 → 1.49.0

package/__app__/src/routes/single.js

@@ -1,21 +1,193 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { cZ as createFileRoute, O as m, cY as Outlet, c$ as useDocumentTitle, cP as Container, dt as SimpleGrid, du as useInViewport, dv as e, ci as Card, aM as Box, bA as Group, R as Text, cT as Link, c_ as redirect, cM as useRouter, k as useMantineColorScheme, cX as stripSearchParams, cV as z, d7 as notFound } from "../vendors.js";
-import { F as Fallback } from "./index.js";
-import { V as ViewOutlet, L as LikeC4IconRendererContext, k as LikeC4ModelContext, u as useLikeC4Views, A as AdHocViewEditor, H as Header, E as ExportPage, l as EmbedPage, m as ViewEditor, n as ViewReact, o as ViewAsPuml, p as ViewAsMmd, q as ViewAsDot, r as ViewAsD2 } from "./projects.js";
-import { c as css, S as StaticLikeC4Diagram, M as Markdown, B as Box$1 } from "../likec4.js";
-import { useState, useEffect } from "react";
+import { d8 as useRouter, d9 as useParams, da as isNotFound, db as Container, br as Alert, U as Text, dc as Code, W as Button, dd as e, de as e$1, as as e$2, bt as Group, bh as rem, df as Link, bZ as Title, d1 as createFileRoute, Q as m, d0 as Outlet, d as deepEqual, s as shallowEqual, dg as useMatches, dh as useIsomorphicLayoutEffect, d3 as useDocumentTitle, di as SimpleGrid, dj as useInViewport, dk as e$3, ci as Card, aQ as Box, d2 as redirect, k as useMantineColorScheme, dl as useComputedColorScheme, aA as ActionIcon, aF as MotionDiv, cN as isValidMotionProp, aD as Menu, bc as MenuTarget, bd as MenuDropdown, be as MenuItem, dm as MenuDivider, bp as Stack, b5 as CopyButton$1, dn as Select, dp as ModalRoot, dq as ModalOverlay, dr as ModalContent, ds as ModalBody, bL as Tabs, bM as TabsList, bN as TabsTab, bO as TabsPanel, dt as useMantineTheme, du as useMediaQuery, cq as useDisclosure, aG as Divider, dv as MenuLabel, dw as useSearch, dx as LoadingOverlay, dy as toBlob, c$ as stripSearchParams, cZ as z, cY as useNavigate, bS as useCallbackRef, aL as useIsMounted, T as Tooltip, dz as useAsync, dA as It, dB as Ot, bP as ScrollArea, dC as Nt, dD as notFound } from "../vendors.js";
+import { loadModel } from "likec4:model";
+import { c as css, s as styled, I as IconRendererProvider, a as LikeC4ModelProvider, u as useUpdateEffect, S as StaticLikeC4Diagram, M as Markdown, b as LikeC4AdHocViewEditor, B as Box$1, d as IconMoonStars, e as IconSun, f as createStyleContext, n as navigationPanel, i as isCssProperty, g as useLikeC4Projects$1, h as IconChevronDown, j as IconAlertTriangle, k as IconCheck, l as IconCopy, m as IconExternalLink, o as IconShare, p as pickViewBounds, q as LikeC4Diagram, r as useLikeC4Model, t as useDiagramContext, v as useDiagram, w as useOnDiagramEvent, x as LikeC4EditorProvider } from "../likec4.js";
+import { getProjectIcons } from "likec4:icons";
+import { useMemo, createContext, useContext, useState, useEffect, memo, useRef } from "react";
+import { useStore } from "likec4/vite-plugin/internal";
 import { RichText } from "@likec4/core/types";
-import { pageTitle, ComponentName } from "../const.js";
-import { isRpcAvailable } from "likec4:rpc";
+import { pageTitle, ComponentName, useHashHistory, isDevelopment, krokiPumlSvgUrl, krokiD2SvgUrl } from "../const.js";
+import { likec4rpc, isRpcAvailable } from "likec4:rpc";
+import { useLikeC4Projects } from "likec4:projects";
+function Fallback({ error: _error, resetErrorBoundary }) {
+  const router = useRouter(), params = useParams({
+    strict: !1
+  });
+  if (isNotFound(_error))
+    return /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", children: [
+      /* @__PURE__ */ jsxs(Text, { c: "orange", fz: "md", children: [
+        "The diagram",
+        " ",
+        /* @__PURE__ */ jsx(Code, { color: "orange", children: params.viewId ?? "unknown" }),
+        " ",
+        "does not exist or contains errors"
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            resetErrorBoundary(), router.navigate({
+              to: "/"
+            });
+          },
+          variant: "light",
+          color: "orange",
+          mt: "lg",
+          size: "xs",
+          children: "Go to overview"
+        }
+      )
+    ] }) });
+  const error = _error;
+  let message = "Unknown error";
+  try {
+    switch (!0) {
+      case e$2(error):
+        message = "Unknown error";
+        break;
+      case e$1(error):
+        message = error.stack ?? error.message;
+        break;
+      case typeof error == "string":
+        message = error;
+        break;
+      case e(error):
+        message = error.stack ?? error.message ?? `${error}`;
+        break;
+      default:
+        message = `${error}`;
+        break;
+    }
+  } catch (e2) {
+    message = `${e2}`;
+  }
+  return /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "filled", color: "red", title: "Something went wrong", children: [
+    /* @__PURE__ */ jsx(Code, { block: !0, color: "red", children: message }),
+    /* @__PURE__ */ jsxs(Group, { mt: "lg", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            router.invalidate().finally(() => {
+              resetErrorBoundary();
+            });
+          },
+          color: "red",
+          variant: "white",
+          size: "xs",
+          children: "Try again"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            resetErrorBoundary(), router.navigate({ to: "/" });
+          },
+          color: "red",
+          size: "xs",
+          children: "Go to overview"
+        }
+      )
+    ] })
+  ] }) });
+}
+const content = css({
+  paddingTop: "[120px]",
+  position: "relative",
+  zIndex: "1",
+  sm: {
+    paddingTop: "[220px]"
+  }
+}), image = css({
+  position: "absolute",
+  inset: "0",
+  opacity: 0.2
+}), inner = css({
+  position: "relative"
+}), root = css({
+  paddingTop: "[80px]",
+  paddingBottom: "[80px]"
+}), description = css({
+  maxWidth: rem(540),
+  margin: "auto",
+  marginTop: "xl",
+  marginBottom: "[calc({spacing.xl}*1.5)]"
+}), title = css({
+  textAlign: "center",
+  fontWeight: "[900]",
+  fontSize: "[38px]"
+});
+function NotFound() {
+  const params = useParams({
+    strict: !1
+  });
+  return params.viewId ? /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", children: [
+    /* @__PURE__ */ jsxs(Text, { c: "orange", fz: "md", children: [
+      "The diagram",
+      " ",
+      /* @__PURE__ */ jsx(Code, { color: "orange", children: params.viewId }),
+      " ",
+      "does not exist or contains errors"
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        component: Link,
+        to: "/",
+        variant: "light",
+        color: "orange",
+        mt: "lg",
+        size: "xs",
+        children: "Go to overview"
+      }
+    )
+  ] }) }) : /* @__PURE__ */ jsx(Container, { className: root, children: /* @__PURE__ */ jsxs("div", { className: inner, children: [
+    /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 362 145", className: image, children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M62.6 142c-2.133 0-3.2-1.067-3.2-3.2V118h-56c-2 0-3-1-3-3V92.8c0-1.333.4-2.733 1.2-4.2L58.2 4c.8-1.333 2.067-2 3.8-2h28c2 0 3 1 3 3v85.4h11.2c.933 0 1.733.333 2.4 1 .667.533 1 1.267 1 2.2v21.2c0 .933-.333 1.733-1 2.4-.667.533-1.467.8-2.4.8H93v20.8c0 2.133-1.067 3.2-3.2 3.2H62.6zM33 90.4h26.4V51.2L33 90.4zM181.67 144.6c-7.333 0-14.333-1.333-21-4-6.666-2.667-12.866-6.733-18.6-12.2-5.733-5.467-10.266-13-13.6-22.6-3.333-9.6-5-20.667-5-33.2 0-12.533 1.667-23.6 5-33.2 3.334-9.6 7.867-17.133 13.6-22.6 5.734-5.467 11.934-9.533 18.6-12.2 6.667-2.8 13.667-4.2 21-4.2 7.467 0 14.534 1.4 21.2 4.2 6.667 2.667 12.8 6.733 18.4 12.2 5.734 5.467 10.267 13 13.6 22.6 3.334 9.6 5 20.667 5 33.2 0 12.533-1.666 23.6-5 33.2-3.333 9.6-7.866 17.133-13.6 22.6-5.6 5.467-11.733 9.533-18.4 12.2-6.666 2.667-13.733 4-21.2 4zm0-31c9.067 0 15.6-3.733 19.6-11.2 4.134-7.6 6.2-17.533 6.2-29.8s-2.066-22.2-6.2-29.8c-4.133-7.6-10.666-11.4-19.6-11.4-8.933 0-15.466 3.8-19.6 11.4-4 7.6-6 17.533-6 29.8s2 22.2 6 29.8c4.134 7.467 10.667 11.2 19.6 11.2zM316.116 142c-2.134 0-3.2-1.067-3.2-3.2V118h-56c-2 0-3-1-3-3V92.8c0-1.333.4-2.733 1.2-4.2l56.6-84.6c.8-1.333 2.066-2 3.8-2h28c2 0 3 1 3 3v85.4h11.2c.933 0 1.733.333 2.4 1 .666.533 1 1.267 1 2.2v21.2c0 .933-.334 1.733-1 2.4-.667.533-1.467.8-2.4.8h-11.2v20.8c0 2.133-1.067 3.2-3.2 3.2h-27.2zm-29.6-51.6h26.4V51.2l-26.4 39.2z"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: content, children: [
+      /* @__PURE__ */ jsx(Title, { className: title, children: "Nothing to see here" }),
+      /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "lg", ta: "center", className: description, children: "Page you are trying to open does not exist. You may have mistyped the address, or the page has been moved to another URL. If you think this is an error contact support." }),
+      /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(Button, { component: Link, to: "/", search: !0, size: "md", children: "Take me back to home page" }) })
+    ] })
+  ] }) });
+}
+const ViewOutlet = styled("div", {
+  base: {
+    padding: "0",
+    margin: "0",
+    width: "full",
+    height: "full"
+  }
+});
+function LikeC4IconRendererContext({ children, projectId }) {
+  const IconRenderer = useMemo(() => getProjectIcons(projectId), [projectId]);
+  return /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer, children });
+}
+const LikeC4ModelDataContext = createContext(null), LikeC4ModelDataContextProvider = LikeC4ModelDataContext.Provider, useLikeC4ModelAtom = () => {
+  const ctx = useContext(LikeC4ModelDataContext);
+  if (ctx === null)
+    throw new Error("LikeC4ModelAtom is not provided");
+  return ctx;
+};
+function LikeC4ModelContext({ likec4model, children }) {
+  const model = useStore(likec4model);
+  return /* @__PURE__ */ jsx(LikeC4ModelDataContextProvider, { value: likec4model, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children }) });
+}
 const Route$b = createFileRoute("/_single")({
   staleTime: 1 / 0,
   loaderDeps() {
     return [];
   },
   loader: async ({ context }) => {
-    const { loadModel } = await import("likec4:model"), projectId = context.projectId, { $likec4model } = await loadModel(projectId);
+    const projectId = context.projectId;
     return {
-      $likec4model,
+      $likec4model: (await loadModel(projectId)).$likec4model,
       projectId
     };
   },
@@ -25,8 +197,58 @@ function RouteComponent$1() {
   const { $likec4model, projectId } = Route$b.useLoaderData();
   return /* @__PURE__ */ jsx(ViewOutlet, { children: /* @__PURE__ */ jsx(m, { FallbackComponent: Fallback, children: /* @__PURE__ */ jsx(LikeC4IconRendererContext, { projectId, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4model: $likec4model, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
 }
+function useTransparentBackground(enabled = !0) {
+  useIsomorphicLayoutEffect(() => {
+    const htmlEl = document.body.parentElement;
+    if (!htmlEl || enabled !== !0) return;
+    const classname = "transparent-bg";
+    return htmlEl.classList.add(classname), () => {
+      htmlEl.classList.remove(classname);
+    };
+  }, [enabled]);
+}
+function useLikeC4Views() {
+  const $likec4model = useLikeC4ModelAtom(), [views, setViews] = useState([]);
+  return useEffect(() => $likec4model.subscribe((next) => {
+    setViews((prev) => {
+      const nextViews = [...next.views()].map((v) => {
+        const n = v.$layouted, p = prev.find((_) => _.id === v.id);
+        return p && deepEqual(n, p) ? p : n;
+      });
+      return shallowEqual(prev, nextViews) ? prev : nextViews;
+    });
+  }), [$likec4model]), views;
+}
+function useCurrentViewId() {
+  return useParams({
+    select: (params) => params.viewId,
+    strict: !1
+  }) ?? "index";
+}
+function useCurrentView() {
+  const viewId = useCurrentViewId(), $likec4model = useLikeC4ModelAtom(), [layoutType, setLayoutType] = useState("manual");
+  useUpdateEffect(() => {
+    setLayoutType("manual");
+  }, [viewId]);
+  const [view, setView] = useState(() => $likec4model.get().findView(viewId)?.$layouted ?? null);
+  return useEffect(() => $likec4model.subscribe((next) => {
+    setView((current) => {
+      const vm = next.findView(viewId);
+      if (!vm)
+        return null;
+      const nextView = layoutType === "auto" ? vm.$view : vm.$layouted;
+      return deepEqual(current, nextView) ? current : nextView;
+    });
+  }), [$likec4model, viewId, layoutType]), [view, setLayoutType];
+}
+function useCurrentProject() {
+  const projects = useLikeC4Projects(), projectId = useMatches({
+    select: (m2) => m2.find((m22) => m22.routeId === "/project/$projectId")?.params?.projectId ?? m2.at(-1)?.context.projectId ?? "default"
+  });
+  return projects.find((p) => p.id === projectId) ?? projects[0];
+}
 css({
-  color: "mantine.colors.dimmed"
+  color: "text.dimmed"
 });
 css({
   // background: 'var(--color-surface)',
@@ -37,7 +259,7 @@ const previewBg = css({
   padding: "0",
   margin: "0",
   backgroundOrigin: "padding-box",
-  backgroundImage: "radial-gradient({colors.mantine.colors.defaultBorder} 15%, {colors.mantine.colors.body} 15%)",
+  backgroundImage: "radial-gradient({colors.default.border} 15%, {colors.body} 15%)",
   backgroundPosition: "0 0",
   backgroundSize: "12px 12px",
   _after: {
@@ -74,7 +296,7 @@ function ViewCard({ view }) {
   const [visible, setVisible] = useState(!1), { ref, inViewport } = useInViewport();
   return useEffect(() => {
     if (!inViewport || visible) return;
-    const tm = setTimeout(() => setVisible(!0), e(30, 80));
+    const tm = setTimeout(() => setVisible(!0), e$3(30, 80));
     return () => clearTimeout(tm);
   }, [inViewport, visible]), /* @__PURE__ */ jsxs(
     Card,
@@ -119,6 +341,18 @@ function ViewCard({ view }) {
     }
   );
 }
+function AdHocViewEditor({ projectId }) {
+  return /* @__PURE__ */ jsx(
+    LikeC4AdHocViewEditor,
+    {
+      service: {
+        process: async ({ predicates }) => ({
+          view: await likec4rpc.calcAdhocView({ projectId, predicates })
+        })
+      }
+    }
+  );
+}
 const Route$9 = createFileRoute("/_single/adhoc")({
   beforeLoad: () => {
     if (!isRpcAvailable)
@@ -201,6 +435,404 @@ function WebcomponentPage() {
     }
   );
 }
+function ColorSchemeToggle() {
+  const { setColorScheme } = useMantineColorScheme({
+    keepTransitions: !0
+  }), computedColorScheme = useComputedColorScheme("light");
+  return /* @__PURE__ */ jsxs(
+    ActionIcon,
+    {
+      visibleFrom: "sm",
+      size: "md",
+      variant: "subtle",
+      color: "gray",
+      onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
+      "aria-label": "Toggle color scheme",
+      children: [
+        /* @__PURE__ */ jsx(IconMoonStars, { stroke: 1.5, display: computedColorScheme === "light" ? "block" : "none" }),
+        /* @__PURE__ */ jsx(IconSun, { stroke: 1.5, display: computedColorScheme === "dark" ? "block" : "none" })
+      ]
+    }
+  );
+}
+const { withProvider, withContext } = createStyleContext(navigationPanel), shouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && (isValidMotionProp(prop) || !isCssProperty(prop)), Root = withProvider(MotionDiv, "root", {
+  shouldForwardProp
+}), Body = withContext(MotionDiv, "body", {
+  shouldForwardProp
+});
+withContext(MotionDiv, "label", {
+  shouldForwardProp
+});
+withContext(MotionDiv, "dropdown", {
+  shouldForwardProp
+});
+const NavigationPanel = {
+  Root,
+  Body
+};
+function SelectProject() {
+  const projects = useLikeC4Projects$1(), project = useCurrentProject();
+  return projects.length < 2 ? null : /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
+    /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "subtle",
+        size: "sm",
+        color: "gray",
+        px: "sm",
+        rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 14 }),
+        visibleFrom: "md",
+        children: project.title ?? project.id
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(MenuDropdown, { children: [
+      /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          renderRoot: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              ...props,
+              to: "/projects"
+            }
+          ),
+          children: "Projects overview"
+        }
+      ),
+      /* @__PURE__ */ jsx(MenuDivider, {}),
+      projects.map(({ id, title: title2 }) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          renderRoot: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              ...props,
+              to: "/project/$projectId/view/$viewId/",
+              params: {
+                projectId: id,
+                viewId: "index"
+              }
+            }
+          ),
+          children: title2 ?? id
+        },
+        id
+      ))
+    ] })
+  ] });
+}
+const AlertLocalhost = () => /* @__PURE__ */ jsx(
+  Alert,
+  {
+    color: "yellow",
+    icon: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+    title: "Localhost URL",
+    styles: { body: { gap: rem(4) } },
+    children: /* @__PURE__ */ jsx(Text, { c: "yellow", size: "sm", children: "You need to deploy your project to make it available on the internet" })
+  }
+), CopyButtonChild = ({ copied, copy }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    size: "xs",
+    color: copied ? "teal" : "gray",
+    variant: "light",
+    leftSection: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }),
+    onClick: copy,
+    children: copied ? "Copied" : "Copy to clipboard"
+  }
+), EmbedPanel = ({ diagram }) => {
+  const router = useRouter(), { colorScheme } = useMantineColorScheme(), [theme, setTheme] = useState(colorScheme), padding = 20;
+  let location = router.buildLocation({
+    to: "/embed/$viewId/",
+    // '/' at the end added by Gemini 3, must have to pass typecheck
+    params: { viewId: diagram.id },
+    search: {
+      padding,
+      ...theme !== "auto" ? { theme } : {}
+      // changed from "theme: theme !== 'auto' ? theme : undefined" by Gemini 3
+    }
+  }).href;
+  location = useHashHistory ? `#${location}` : location;
+  const url = new URL(location, window.location.href), width = diagram.bounds.width + padding * 2, height = diagram.bounds.height + padding * 2, href = url.href, code = `
+<div style="aspect-ratio:${width}/${height};width:100%;height:auto;max-width:${width}px;margin:0 auto">
+  <iframe src="${href}" width="100%" height="100%" style="border:0;background:transparent;"></iframe>
+</div>
+`.trim();
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    code.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Embedded view is an iframe with a static diagram" }) }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(ActionIcon, { component: "a", href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
+          /* @__PURE__ */ jsx(CopyButton$1, { value: code, timeout: 1500, children: CopyButtonChild })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Code, { block: !0, children: code }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            alignSelf: "flex-start"
+          },
+          children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              label: "Color scheme",
+              value: theme,
+              allowDeselect: !1,
+              onChange: (v) => setTheme(v ?? "auto"),
+              data: [
+                { value: "auto", label: "Auto" },
+                { value: "light", label: "Light" },
+                { value: "dark", label: "Dark" }
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+function WebcomponentsPanel({ diagram }) {
+  const router = useRouter();
+  let base = router.basepath.endsWith("/") ? router.basepath : `${router.basepath}/`;
+  const jscode = `
+  <script module src="${new URL(
+    `${base}likec4-views.js`,
+    window.location.href
+  ).href}"><\/script>
+`.trim(), htmlCode = `
+<${ComponentName.View}
+   view-id="${encodeURIComponent(diagram.id)}"
+   browser="true"
+   dynamic-variant="sequence">
+</${ComponentName.View}>
+`.trim(), webcomponentPreview = router.buildLocation(
+    {
+      to: "/webcomponent/$/",
+      // '/' at the end added by Gemini 3, must have to pass typecheck
+      params: { _splat: diagram.id },
+      search: !0
+    }
+  );
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    jscode.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Add this script to your page:" }) }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "JavaScript" }) }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(ActionIcon, { component: "a", href: webcomponentPreview.href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
+          /* @__PURE__ */ jsx(
+            CopyButton$1,
+            {
+              value: jscode,
+              timeout: 1500,
+              children: CopyButtonChild
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Code, { block: !0, children: jscode }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+        "This script defines a custom element (webcomponent) that renders your diagrams.",
+        /* @__PURE__ */ jsx("br", {}),
+        "Script must be inserted once in the ",
+        /* @__PURE__ */ jsx("code", { children: "<head>" }),
+        " or at the end of the ",
+        /* @__PURE__ */ jsx("code", { children: "<body>" }),
+        " ",
+        "tag."
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          CopyButton$1,
+          {
+            value: htmlCode,
+            timeout: 1500,
+            children: CopyButtonChild
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(Code, { block: !0, children: htmlCode }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+        "Insert this code to your page. Page may have multiple ",
+        /* @__PURE__ */ jsx("code", { children: "<likec4-view>" }),
+        "."
+      ] }) })
+    ] })
+  ] });
+}
+function ShareModal({
+  onClose
+}) {
+  const [diagram] = useCurrentView(), [activeTab, setActiveTab] = useState("webcomponent");
+  return diagram ? /* @__PURE__ */ jsxs(
+    ModalRoot,
+    {
+      size: "xl",
+      opened: !0,
+      onClose,
+      children: [
+        /* @__PURE__ */ jsx(ModalOverlay, { backgroundOpacity: 0.5, blur: 3 }),
+        /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsxs(ModalBody, { children: [
+          /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onChange: (tab) => setActiveTab(tab ?? "webcomponent"), children: [
+            /* @__PURE__ */ jsxs(TabsList, { children: [
+              /* @__PURE__ */ jsx(TabsTab, { value: "webcomponent", children: "Webcomponent" }),
+              /* @__PURE__ */ jsx(TabsTab, { value: "embed", children: "Embedded" })
+            ] }),
+            /* @__PURE__ */ jsx(TabsPanel, { value: "embed", pt: "md", children: /* @__PURE__ */ jsx(EmbedPanel, { diagram }) }),
+            /* @__PURE__ */ jsx(TabsPanel, { value: "webcomponent", pt: "md", children: /* @__PURE__ */ jsx(WebcomponentsPanel, { diagram }) })
+          ] }),
+          /* @__PURE__ */ jsx(Group, { justify: "flex-end", mt: "lg", children: /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onClose, children: "Close" }) })
+        ] }) })
+      ]
+    }
+  ) : null;
+}
+const Header = memo(() => {
+  const projects = useLikeC4Projects$1(), isReactDiagramRoute = useMatches({
+    select(matches) {
+      return matches.some(
+        ({ routeId }) => routeId === "/_single/view/$viewId/" || routeId === "/project/$projectId/view/$viewId/"
+      );
+    }
+  }), { breakpoints } = useMantineTheme(), isTablet = useMediaQuery(`(min-width: ${breakpoints.md})`) ?? !1, [opened, { open, close }] = useDisclosure(!1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NavigationPanel.Root, { panelPosition: "right", hideBelow: "md", children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { gap: "2", children: [
+      isReactDiagramRoute ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SelectProject, {}),
+        projects.length <= 1 && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: isTablet ? "sm" : "xs",
+            leftSection: /* @__PURE__ */ jsx(IconShare, { size: 14 }),
+            onClick: open,
+            children: "Share"
+          }
+        ),
+        /* @__PURE__ */ jsx(ExportButton, {})
+      ] }) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          component: Link,
+          to: "/view/$viewId/",
+          size: isTablet ? "sm" : "xs",
+          variant: "subtle",
+          color: "gray",
+          children: "Back to diagram"
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, { orientation: "vertical", visibleFrom: "md" }),
+      /* @__PURE__ */ jsx(ColorSchemeToggle, {})
+    ] }) }),
+    opened && /* @__PURE__ */ jsx(ShareModal, { onClose: close })
+  ] });
+}), enableDownload = (params) => ({
+  ...params,
+  download: !0
+});
+function ExportButton() {
+  const isInsideProject = useMatches({
+    select: (matches) => matches.some(({ routeId }) => routeId === "/project/$projectId")
+  });
+  return /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
+    /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "subtle",
+        size: "sm",
+        color: "gray",
+        px: "sm",
+        rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 14 }),
+        visibleFrom: "md",
+        children: "Export"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(MenuDropdown, { children: [
+      /* @__PURE__ */ jsx(MenuLabel, { children: "Current view" }),
+      /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          renderRoot: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              target: "_blank",
+              to: isInsideProject ? "/project/$projectId/export/$viewId/" : "/export/$viewId/",
+              search: enableDownload,
+              ...props
+            }
+          ),
+          children: "Export as .png"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          renderRoot: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              to: isInsideProject ? "/project/$projectId/view/$viewId/dot/" : "/view/$viewId/dot/",
+              search: !0,
+              ...props
+            }
+          ),
+          children: "Export as .dot"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          renderRoot: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              to: isInsideProject ? "/project/$projectId/view/$viewId/d2" : "/view/$viewId/d2",
+              search: !0,
+              ...props
+            }
+          ),
+          children: "Export as .d2"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          renderRoot: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              to: isInsideProject ? "/project/$projectId/view/$viewId/mmd" : "/view/$viewId/mmd",
+              search: !0,
+              ...props
+            }
+          ),
+          children: "Export as .mmd"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          renderRoot: (props) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              to: isInsideProject ? "/project/$projectId/view/$viewId/puml" : "/view/$viewId/puml",
+              search: !0,
+              ...props
+            }
+          ),
+          children: "Export as .puml"
+        }
+      ),
+      /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Draw.io" }),
+      /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Miro" }),
+      /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Notion" })
+    ] })
+  ] });
+}
 const Route$7 = createFileRoute("/_single/view/$viewId")({
   component: ViewLayout,
   errorComponent: ({ error, reset }) => /* @__PURE__ */ jsx(Fallback, { error, resetErrorBoundary: reset })
@@ -211,6 +843,113 @@ function ViewLayout() {
     /* @__PURE__ */ jsx(Header, {})
   ] });
 }
+async function downloadAsPng({
+  pngFilename,
+  viewport
+}) {
+  try {
+    const blob = await toBlob(viewport, {
+      backgroundColor: "transparent",
+      cacheBust: !0,
+      imagePlaceholder: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+    });
+    if (!blob)
+      throw new Error("Failed to create PNG blob");
+    var url = URL.createObjectURL(blob), link = document.createElement("a");
+    link.setAttribute("download", `${pngFilename}.png`), link.href = url, document.body.appendChild(link), link.click(), await new Promise((resolve) => setTimeout(resolve, 1e3)), document.body.removeChild(link), URL.revokeObjectURL(url), window.close();
+  } catch (err) {
+    console.error(err), window.alert("Failed to export to PNG, check the console for more details.");
+  }
+}
+function ExportPage() {
+  const [diagram] = useCurrentView();
+  return useTransparentBackground(), diagram ? /* @__PURE__ */ jsx(GuardedExportPage, { diagram }) : /* @__PURE__ */ jsx("div", { children: "Loading..." });
+}
+function GuardedExportPage({ diagram }) {
+  const {
+    padding = 20,
+    download = !1,
+    dynamic
+  } = useSearch({
+    strict: !1
+  }), viewportRef = useRef(null), loadingOverlayRef = useRef(null), downloadedRef = useRef(!1), bounds = pickViewBounds(diagram, dynamic), downloadDiagram = () => {
+    const viewport = viewportRef.current;
+    if (!download || !viewport || !diagram || downloadedRef.current)
+      return;
+    const loadingOverlay = loadingOverlayRef.current;
+    loadingOverlay && (loadingOverlay.style.display = "none"), downloadedRef.current = !0, downloadAsPng({
+      pngFilename: diagram.id,
+      viewport
+    });
+  }, extraPadding = 16, width = bounds.width + padding * 2 + extraPadding, height = bounds.height + padding * 2 + extraPadding;
+  return /* @__PURE__ */ jsxs(
+    Box$1,
+    {
+      ref: viewportRef,
+      "data-testid": "export-page",
+      css: {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        padding: "0",
+        margin: "0",
+        background: "transparent",
+        overflow: "hidden",
+        zIndex: 2
+      },
+      style: {
+        marginRight: "auto",
+        marginBottom: "auto",
+        minWidth: width,
+        width,
+        minHeight: height,
+        height
+      },
+      children: [
+        download && /* @__PURE__ */ jsx(LoadingOverlay, { ref: loadingOverlayRef, visible: !0 }),
+        /* @__PURE__ */ jsx(
+          LikeC4Diagram,
+          {
+            view: diagram,
+            fitView: !1,
+            fitViewPadding: {
+              top: "0px",
+              bottom: "0px",
+              left: "0px",
+              right: "0px"
+            },
+            background: "transparent",
+            reduceGraphics: !1,
+            dynamicViewVariant: dynamic,
+            className: "likec4-static-view",
+            pannable: !1,
+            zoomable: !1,
+            controls: !1,
+            enableNotations: !1,
+            enableElementDetails: !1,
+            enableRelationshipDetails: !1,
+            enableRelationshipBrowser: !1,
+            enableDynamicViewWalkthrough: !1,
+            enableFocusMode: !1,
+            enableSearch: !1,
+            nodesSelectable: !1,
+            enableElementTags: !1,
+            onInitialized: () => {
+              if (!viewportRef.current) {
+                console.error("viewportRef.current is null");
+                return;
+              }
+              const x = Math.round(-bounds.x + padding), y = Math.round(-bounds.y + padding);
+              [...viewportRef.current.querySelectorAll(".react-flow__viewport")].forEach((el) => {
+                el.style.transform = "translate(" + x + "px, " + y + "px)";
+              }), download && window.setTimeout(downloadDiagram, 500);
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 const Route$6 = createFileRoute("/_single/export/$viewId")({
   validateSearch: z.object({
     download: z.boolean().optional().catch(!1)
@@ -223,11 +962,318 @@ const Route$6 = createFileRoute("/_single/export/$viewId")({
     ]
   },
   component: ExportPage
-}), Route$5 = createFileRoute("/_single/embed/$viewId")({
+});
+function EmbedPage() {
+  const {
+    padding = 20,
+    dynamic
+  } = useSearch({
+    strict: !1
+  }), [diagram] = useCurrentView();
+  if (useTransparentBackground(!!diagram), !diagram)
+    return /* @__PURE__ */ jsx("div", { children: "Loading..." });
+  const bounds = pickViewBounds(diagram, dynamic);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: "50%",
+        boxSizing: "border-box",
+        padding,
+        transform: "translateX(-50%)",
+        aspectRatio: `${bounds.width + padding * 2} / ${bounds.height + padding * 2}`,
+        width: "100vw",
+        maxWidth: bounds.width + padding * 2,
+        height: "auto",
+        maxHeight: "100vh"
+      },
+      children: /* @__PURE__ */ jsx(
+        StaticLikeC4Diagram,
+        {
+          view: diagram,
+          fitView: !0,
+          background: "transparent",
+          fitViewPadding: 0,
+          dynamicViewVariant: dynamic,
+          initialWidth: bounds.width,
+          initialHeight: bounds.height
+        }
+      )
+    }
+  );
+}
+const Route$5 = createFileRoute("/_single/embed/$viewId")({
   component: EmbedPage
-}), Route$4 = createFileRoute("/_single/view/$viewId/")({
+});
+function ViewReact() {
+  const navigate = useNavigate(), [view, setLayoutType] = useCurrentView(), model = useLikeC4Model(), { dynamic } = useSearch({
+    from: "__root__"
+  }), onNavigateTo = useCallbackRef((viewId) => {
+    navigate({
+      to: "./",
+      viewTransition: !1,
+      params: (current) => ({
+        ...current,
+        viewId
+      }),
+      search: !0
+    });
+  }), title2 = view ? view.title ?? view.id : "View not found", pageTitle$1 = model.project.title ?? pageTitle;
+  if (useDocumentTitle(`${title2} - ${pageTitle$1}`), !view)
+    return /* @__PURE__ */ jsx(NotFound, {});
+  const hasNotations = (view.notation?.nodes ?? []).length > 0;
+  return /* @__PURE__ */ jsxs(
+    LikeC4Diagram,
+    {
+      view,
+      zoomable: !0,
+      pannable: !0,
+      controls: !0,
+      fitViewPadding: {
+        top: "70px",
+        bottom: "32px",
+        left: "32px",
+        right: "32px"
+      },
+      showNavigationButtons: !0,
+      enableSearch: !0,
+      enableFocusMode: !0,
+      enableDynamicViewWalkthrough: !0,
+      dynamicViewVariant: dynamic,
+      enableElementDetails: !0,
+      enableRelationshipDetails: !0,
+      enableRelationshipBrowser: !0,
+      enableElementTags: !0,
+      enableCompareWithLatest: !0,
+      enableNotations: hasNotations,
+      nodesSelectable: !0,
+      onNavigateTo,
+      onLayoutTypeChange: setLayoutType,
+      onLogoClick: () => {
+        navigate({
+          to: "/"
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsx(ListenForDynamicVariantChange, {}),
+        /* @__PURE__ */ jsx(OpenRelationshipBrowserFromUrl, {})
+      ]
+    }
+  );
+}
+function OpenRelationshipBrowserFromUrl() {
+  const router = useRouter(), diagram = useDiagram(), { relationships } = useSearch({
+    from: "__root__"
+  }), processedRef = useRef(null), isInitializedRef = useRef(!1), isProcessingRef = useRef(Promise.resolve()), isMounted = useIsMounted(), openAndClear = (fqn) => {
+    isProcessingRef.current = isProcessingRef.current.then(async () => {
+      if (!(!isMounted() || processedRef.current === fqn))
+        try {
+          processedRef.current = fqn, diagram.openRelationshipsBrowser(fqn), await router.buildAndCommitLocation({
+            search: (s) => {
+              const { relationships: _, ...rest } = s;
+              return rest;
+            },
+            replace: !0,
+            viewTransition: !1
+          });
+        } catch (error) {
+          console.error("Failed to open relationship browser:", error);
+        }
+    });
+  }, process = () => {
+    if (!relationships) {
+      processedRef.current = null;
+      return;
+    }
+    relationships && processedRef.current !== relationships && openAndClear(relationships);
+  };
+  return useOnDiagramEvent("initialized", () => {
+    isInitializedRef.current = !0, process();
+  }), useUpdateEffect(() => {
+    process();
+  }, [relationships]), null;
+}
+function ListenForDynamicVariantChange() {
+  const router = useRouter(), dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
+  return useUpdateEffect(() => {
+    (router.latestLocation.search.dynamic ?? "diagram") !== dynamicViewVariant && router.buildAndCommitLocation({
+      search: (current) => ({
+        ...current,
+        dynamic: dynamicViewVariant
+      }),
+      viewTransition: !1
+    });
+  }, [dynamicViewVariant]), null;
+}
+function ViewEditor() {
+  const navigate = useNavigate(), project = useCurrentProject(), [view, setLayoutType] = useCurrentView(), $likec4model = useLikeC4ModelAtom(), { dynamic } = useSearch({ strict: !1 }), onNavigateTo = useCallbackRef((viewId) => {
+    navigate({
+      to: "./",
+      viewTransition: !1,
+      params: (current) => ({
+        ...current,
+        viewId
+      }),
+      search: !0
+    });
+  });
+  if (!view)
+    return /* @__PURE__ */ jsx(NotFound, {});
+  const hasNotations = (view.notation?.nodes ?? []).length > 0;
+  return /* @__PURE__ */ jsx(
+    LikeC4EditorProvider,
+    {
+      editor: {
+        fetchView: (id, layout) => {
+          const model = $likec4model.get().view(id);
+          return layout === "auto" ? model.$view : model.$layouted;
+        },
+        handleChange: (viewId, change) => {
+          const event = {
+            projectId: project.id,
+            viewId,
+            change
+          };
+          return likec4rpc.updateView(event);
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        LikeC4Diagram,
+        {
+          view,
+          zoomable: !0,
+          pannable: !0,
+          controls: !0,
+          fitViewPadding: {
+            top: "70px",
+            bottom: "32px",
+            left: "50px",
+            right: "32px"
+          },
+          showNavigationButtons: !0,
+          enableNotations: isDevelopment || hasNotations,
+          enableSearch: !0,
+          enableDynamicViewWalkthrough: !0,
+          enableFocusMode: !0,
+          enableElementDetails: !0,
+          enableRelationshipDetails: !0,
+          enableRelationshipBrowser: !0,
+          enableElementTags: !0,
+          enableCompareWithLatest: !0,
+          dynamicViewVariant: dynamic,
+          onNavigateTo,
+          onLayoutTypeChange: setLayoutType,
+          onLogoClick: () => {
+            navigate({
+              to: "/"
+            });
+          },
+          children: [
+            /* @__PURE__ */ jsx(ListenForDynamicVariantChange, {}),
+            /* @__PURE__ */ jsx(OpenRelationshipBrowserFromUrl, {})
+          ]
+        }
+      )
+    }
+  );
+}
+const Route$4 = createFileRoute("/_single/view/$viewId/")({
   component: isRpcAvailable ? ViewEditor : ViewReact
-}), Route$3 = createFileRoute("/_single/view/$viewId/puml")({
+});
+function CopyButton({ text }) {
+  return /* @__PURE__ */ jsx(CopyButton$1, { value: text, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: !0, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { color: copied ? "teal" : "gray", variant: copied ? "light" : "subtle", onClick: copy, children: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }) }) }) });
+}
+function CopyToClipboard({ text }) {
+  return /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "0", right: "0", p: "4", children: /* @__PURE__ */ jsx(CopyButton, { text }) });
+}
+const svgContainer = css({
+  minWidth: 300,
+  "& svg": {
+    width: "100%",
+    height: "auto"
+  }
+}), cssScrollArea = css({
+  height: "100%",
+  "& .mantine-ScrollArea-viewport": {
+    minHeight: "100%"
+  },
+  "& .mantine-ScrollArea-viewport > div": {
+    minHeight: "100%",
+    height: "100%"
+  }
+}), cssCodeBlock = css({
+  minHeight: "100%"
+}), viewWithTopPadding = css({
+  height: "100%",
+  paddingTop: "[var(--header-height)]"
+}), fetchFromKroki$1 = async (puml) => await (await fetch(krokiPumlSvgUrl, {
+  method: "POST",
+  cache: "force-cache",
+  body: JSON.stringify({
+    diagram_source: puml,
+    output_format: "svg"
+  }),
+  headers: {
+    "Content-Type": "application/json"
+  }
+})).text();
+function ViewAsPuml({ pumlSource }) {
+  const [krokiSvg, { execute }] = useAsync(fetchFromKroki$1, null);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    It,
+    {
+      className: viewWithTopPadding,
+      orientation: "horizontal",
+      children: [
+        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
+          ScrollArea,
+          {
+            className: cssScrollArea,
+            p: 5,
+            styles: {
+              viewport: {
+                borderRadius: 6
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: pumlSource }),
+              /* @__PURE__ */ jsx(CopyToClipboard, { text: pumlSource })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Nt,
+          {
+            style: {
+              width: 10
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
+          krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                mt: "xs",
+                variant: "light",
+                disabled: krokiSvg.status === "loading",
+                onClick: () => {
+                  execute(pumlSource);
+                },
+                children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
+              }
+            ),
+            krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box$1, { children: krokiSvg.error?.message })
+          ] }),
+          krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box$1, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box$1, { children: "Empty result" }) })
+        ] }) })
+      ]
+    }
+  ) });
+}
+const Route$3 = createFileRoute("/_single/view/$viewId/puml")({
   component: Page$3,
   staleTime: 1 / 0,
   loader: async ({ params, context }) => {
@@ -246,6 +1292,53 @@ function Page$3() {
   const { source } = Route$3.useLoaderData();
   return /* @__PURE__ */ jsx(ViewAsPuml, { pumlSource: source });
 }
+const renderSvg = async (viewId, diagram) => {
+  const { default: mermaid } = await import("https://cdn.jsdelivr.net/npm/mermaid@11.12/dist/mermaid.esm.min.mjs");
+  mermaid.initialize({
+    theme: "dark"
+  });
+  const { svg } = await mermaid.render(viewId, diagram);
+  return svg;
+};
+function ViewAsMmd({ viewId, mmdSource }) {
+  const [mmdSvg, { execute }] = useAsync(renderSvg, null);
+  return useEffect(() => {
+    execute(viewId, mmdSource);
+  }, [mmdSource]), /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    It,
+    {
+      className: viewWithTopPadding,
+      orientation: "horizontal",
+      children: [
+        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
+          ScrollArea,
+          {
+            className: cssScrollArea,
+            p: 5,
+            styles: {
+              viewport: {
+                borderRadius: 6
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: mmdSource }),
+              /* @__PURE__ */ jsx(CopyToClipboard, { text: mmdSource })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Nt,
+          {
+            style: {
+              width: 10
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx(Box$1, { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
+      ]
+    }
+  ) });
+}
 const Route$2 = createFileRoute("/_single/view/$viewId/mmd")({
   component: Page$2,
   staleTime: 1 / 0,
@@ -265,6 +1358,35 @@ function Page$2() {
   const { viewId } = Route$2.useParams(), { source } = Route$2.useLoaderData();
   return /* @__PURE__ */ jsx(ViewAsMmd, { viewId, mmdSource: source });
 }
+function ViewAsDot({ dot, dotSvg }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(It, { className: viewWithTopPadding, children: [
+    /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
+      ScrollArea,
+      {
+        className: cssScrollArea,
+        p: 5,
+        styles: {
+          viewport: {
+            borderRadius: 6
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: dot }),
+          /* @__PURE__ */ jsx(CopyToClipboard, { text: dot })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Nt,
+      {
+        style: {
+          width: 10
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: dotSvg } }) }) })
+  ] }) });
+}
 const Route$1 = createFileRoute("/_single/view/$viewId/dot")({
   component: Page$1,
   staleTime: 1 / 0,
@@ -285,6 +1407,74 @@ function Page$1() {
   const { dot, dotSvg } = Route$1.useLoaderData();
   return /* @__PURE__ */ jsx(ViewAsDot, { dot, dotSvg });
 }
+const fetchFromKroki = async (d2) => await (await fetch(krokiD2SvgUrl, {
+  method: "POST",
+  cache: "force-cache",
+  body: JSON.stringify({
+    diagram_source: d2,
+    // diagram_options: {
+    //   theme: 'colorblind-clear'
+    // },
+    output_format: "svg"
+  }),
+  headers: {
+    "Content-Type": "application/json"
+  }
+})).text();
+function ViewAsD2({ d2Source }) {
+  const [krokiSvg, { execute }] = useAsync(fetchFromKroki, null);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    It,
+    {
+      className: viewWithTopPadding,
+      orientation: "horizontal",
+      children: [
+        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
+          ScrollArea,
+          {
+            className: cssScrollArea,
+            p: 5,
+            styles: {
+              viewport: {
+                borderRadius: 6
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: d2Source }),
+              /* @__PURE__ */ jsx(CopyToClipboard, { text: d2Source })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Nt,
+          {
+            style: {
+              width: 10
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
+          krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                mt: "xs",
+                variant: "light",
+                disabled: krokiSvg.status === "loading",
+                onClick: () => {
+                  execute(d2Source);
+                },
+                children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
+              }
+            ),
+            krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box$1, { children: krokiSvg.error?.message })
+          ] }),
+          krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box$1, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box$1, { children: "Empty result" }) })
+        ] }) })
+      ]
+    }
+  ) });
+}
 const Route = createFileRoute("/_single/view/$viewId/d2")({
   component: Page,
   staleTime: 1 / 0,
@@ -305,7 +1495,14 @@ function Page() {
   return /* @__PURE__ */ jsx(ViewAsD2, { d2Source: source });
 }
 export {
+  AdHocViewEditor as A,
+  ExportPage as E,
+  Fallback as F,
+  Header as H,
+  LikeC4IconRendererContext as L,
+  NotFound as N,
   Route$b as R,
+  ViewOutlet as V,
   Route$a as a,
   Route$9 as b,
   Route$8 as c,
@@ -316,5 +1513,13 @@ export {
   Route$3 as h,
   Route$2 as i,
   Route$1 as j,
-  Route as k
+  Route as k,
+  LikeC4ModelContext as l,
+  EmbedPage as m,
+  ViewEditor as n,
+  ViewReact as o,
+  ViewAsPuml as p,
+  ViewAsMmd as q,
+  ViewAsDot as r,
+  ViewAsD2 as s
 };