likec4 1.7.0 → 1.7.1

package/dist/__app__/src/components/view-page/Header.js

@@ -1,416 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { u as useRouter, f as useParams, g as useRouterState, L as Link } from "../../chunks/tanstack-router-Cg36mbgZ.js";
-import { u } from "../../chunks/chunk-RAAYCPUM-CpeCcSnm.js";
-import { ColorSchemeToggle } from "../ColorSchemeToggle.js";
-import { useState } from "react";
-import { j as Alert, r as rem, f as Text, k as Button, a as useMantineColorScheme, q as Stack, B as Box, G as Group, A as ActionIcon, b as CopyButton,
-C as Code, s as Select, t as ModalRoot, v as ModalOverlay, w as ModalContent, x as ModalBody, y as Tabs, z as TabsList, E as TabsTab, H as TabsPanel, I as useMantineTheme,
-J as useMediaQuery, g as useDisclosure, P as Paper, K as Divider, N as Menu, O as MenuTarget, Q as MenuDropdown, R as MenuItem, U as MenuLabel, V as MenuDivider } from "../../chunks/mantine-u17mT9KZ.js";
-import { c as createReactComponent } from "../../chunks/createReactComponent-BWheWDGL.js";
-import { I as IconCheck, a as IconCopy } from "../../chunks/IconCopy-BoSoNPZ_.js";
-import { ComponentName } from "../../const.js";
-function o(...e) {
-  return u(t, e);
-}
-var t = (e, r) => {
-  for (let n = e.length - 1; n >= 0; n--) {
-    let a = e[n];
-    if (r(a, n, e)) return a;
-  }
-};
-/**
- * @license @tabler/icons-react v3.11.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var IconAlertTriangle = createReactComponent("outline", "alert-triangle", "IconAlertTriangle", [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "\
-M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", key: "svg-\
-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]]);
-/**
- * @license @tabler/icons-react v3.11.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var IconBrandReact = createReactComponent("outline", "brand-react", "IconBrandReact", [["path", { d: "M6.306 8.711c-2.602 .723 -4.306 1.926 -4.306 3.2\
-89c0 2.21 4.477 4 10 4c.773 0 1.526 -.035 2.248 -.102", key: "svg-0" }], ["path", { d: "M17.692 15.289c2.603 -.722 4.308 -1.926 4.308 -3.289c0 -2.21 -\
-4.477 -4 -10 -4c-.773 0 -1.526 .035 -2.25 .102", key: "svg-1" }], ["path", { d: "M6.305 15.287c-.676 2.615 -.485 4.693 .695 5.373c1.913 1.105 5.703 -1\
-.877 8.464 -6.66c.387 -.67 .733 -1.339 1.036 -2", key: "svg-2" }], ["path", { d: "M17.694 8.716c.677 -2.616 .487 -4.696 -.694 -5.376c-1.913 -1.105 -5.\
-703 1.877 -8.464 6.66c-.387 .67 -.733 1.34 -1.037 2", key: "svg-3" }], ["path", { d: "M12 5.424c-1.925 -1.892 -3.82 -2.766 -5 -2.084c-1.913 1.104 -1.2\
-26 5.877 1.536 10.66c.386 .67 .793 1.304 1.212 1.896", key: "svg-4" }], ["path", { d: "M12 18.574c1.926 1.893 3.821 2.768 5 2.086c1.913 -1.104 1.226 -\
-5.877 -1.536 -10.66c-.375 -.65 -.78 -1.283 -1.212 -1.897", key: "svg-5" }], ["path", { d: "M11.5 12.866a1 1 0 1 0 1 -1.732a1 1 0 0 0 -1 1.732z", key: "\
-svg-6" }]]);
-/**
- * @license @tabler/icons-react v3.11.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var IconChevronDown = createReactComponent("outline", "chevron-down", "IconChevronDown", [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]]);
-/**
- * @license @tabler/icons-react v3.11.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var IconExternalLink = createReactComponent("outline", "external-link", "IconExternalLink", [["path", { d: "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h1\
-0a2 2 0 0 0 2 -2v-6", key: "svg-0" }], ["path", { d: "M11 13l9 -9", key: "svg-1" }], ["path", { d: "M15 4h5v5", key: "svg-2" }]]);
-/**
- * @license @tabler/icons-react v3.11.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var IconFile = createReactComponent("outline", "file", "IconFile", [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-1\
-0a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", key: "svg-1" }]]);
-/**
- * @license @tabler/icons-react v3.11.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var IconShare = createReactComponent("outline", "share", "IconShare", [["path", { d: "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-0" }], ["pat\
-h", { d: "M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-1" }], ["path", { d: "M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-2" }], ["path",
-{ d: "M8.7 10.7l6.6 -3.4", key: "svg-3" }], ["path", { d: "M8.7 13.3l6.6 3.4", key: "svg-4" }]]), cssHeader = "yr9aef0";
-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, url = new URL(
-    router.buildLocation({
-      to: "/embed/$viewId",
-      params: { viewId: diagram.id },
-      search: {
-        padding,
-        theme: theme !== "auto" ? theme : void 0
-      }
-    }).href,
-    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: "Embeded 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, { 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)}"></${ComponentName.View}>
-`.trim(), webcomponentPreview = router.buildLocation(
-    {
-      to: "/webcomponent/$",
-      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,
-            {
-              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,
-          {
-            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({
-  opened,
-  onClose,
-  diagram
-}) {
-  const [activeTab, setActiveTab] = useState("webcomponent");
-  return /* @__PURE__ */ jsxs(
-    ModalRoot,
-    {
-      size: "xl",
-      opened,
-      keepMounted: !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: "Embed" })
-            ] }),
-            /* @__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" }) })
-        ] }) })
-      ]
-    }
-  );
-}
-function Header({ diagram }) {
-  const { breakpoints } = useMantineTheme(), isTablet = useMediaQuery(`(min-width: ${breakpoints.md})`) ?? !1, [opened, { open, close }] = useDisclosure(
-  !1);
-  return /* @__PURE__ */ jsxs(
-    Paper,
-    {
-      className: cssHeader,
-      pos: "fixed",
-      top: "0.5rem",
-      right: "0.5rem",
-      py: 5,
-      px: "xs",
-      radius: "sm",
-      shadow: "xl",
-      children: [
-        /* @__PURE__ */ jsxs(Group, { gap: isTablet ? 6 : 4, wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(ViewPageButton, { isTablet }),
-          /* @__PURE__ */ jsx(ColorSchemeToggle, {}),
-          /* @__PURE__ */ jsx(Divider, { orientation: "vertical", mr: isTablet ? 4 : "xs" }),
-          /* @__PURE__ */ jsx(Button, { size: isTablet ? "sm" : "xs", leftSection: /* @__PURE__ */ jsx(IconShare, { size: 14 }), onClick: open, children: "\
-Share" }),
-          /* @__PURE__ */ jsx(ExportButton, { diagram })
-        ] }),
-        /* @__PURE__ */ jsx(
-          ShareModal,
-          {
-            opened,
-            onClose: close,
-            diagram
-          }
-        )
-      ]
-    }
-  );
-}
-const viewPages = [
-  {
-    route: "/view/$viewId",
-    icon: /* @__PURE__ */ jsx(IconBrandReact, { opacity: 0.7, size: 16 }),
-    title: /* @__PURE__ */ jsx(Fragment, { children: "React" })
-  },
-  {
-    route: "/view/$viewId/editor",
-    icon: /* @__PURE__ */ jsx(IconBrandReact, { opacity: 0.7, size: 16 }),
-    title: /* @__PURE__ */ jsx(Text, { size: "sm", fw: "500", variant: "gradient", gradient: { from: "pink", to: "violet", deg: 90 }, children: "Edito\
-r" })
-  },
-  {
-    route: "/view/$viewId/dot",
-    icon: /* @__PURE__ */ jsx(IconFile, { opacity: 0.7, size: 16 }),
-    title: /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Graphviz ",
-      /* @__PURE__ */ jsx(Text, { component: "span", size: "xs", c: "dimmed", ml: 4, children: ".dot" })
-    ] })
-  },
-  {
-    route: "/view/$viewId/d2",
-    icon: /* @__PURE__ */ jsx(IconFile, { opacity: 0.7, size: 16 }),
-    title: /* @__PURE__ */ jsx(Fragment, { children: "D2" })
-  },
-  {
-    route: "/view/$viewId/mmd",
-    icon: /* @__PURE__ */ jsx(IconFile, { opacity: 0.7, size: 16 }),
-    title: /* @__PURE__ */ jsx(Fragment, { children: "Mermaid" })
-  }
-], routeIds = viewPages.map(({ route }) => route);
-function ViewPageButton({
-  isTablet
-}) {
-  const { viewId } = useParams({
-    from: "/view/$viewId"
-  }), routerState = useRouterState(), matchedRoute = o(routerState.matches, ({ routeId }) => routeIds.includes(routeId)), matched = (matchedRoute && viewPages.
-  find(({ route }) => route === matchedRoute.routeId)) ?? viewPages[0];
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 100, children: [
-    /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        leftSection: matched.icon,
-        variant: "subtle",
-        size: isTablet ? "sm" : "xs",
-        color: "gray",
-        px: "xs",
-        rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 14 }),
-        children: matched.title
-      }
-    ) }),
-    /* @__PURE__ */ jsx(MenuDropdown, { children: viewPages.map(({ route, icon, title }) => /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        component: Link,
-        to: route,
-        search: !0,
-        params: { viewId },
-        leftSection: icon,
-        ...route === matched.route ? { bg: "gray" } : {},
-        style: {
-          whiteSpace: "nowrap"
-        },
-        children: title
-      },
-      route
-    )) })
-  ] }) });
-}
-function downloadImage(name, dataUrl) {
-  const a = document.createElement("a");
-  a.setAttribute("download", `${name}.png`), a.setAttribute("href", dataUrl), a.click();
-}
-function ExportButton({ diagram }) {
-  const params = useParams({
-    from: "/view/$viewId"
-  });
-  return /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
-    /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "subtle",
-        size: "sm",
-        color: "gray",
-        px: "sm",
-        rightSection: /* @__PURE__ */ jsx(IconChevronDown, { opacity: 0.5, size: 14 }),
-        visibleFrom: "md",
-        children: "Export"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(MenuDropdown, { children: [
-      /* @__PURE__ */ jsx(MenuLabel, { children: "Current view" }),
-      /* @__PURE__ */ jsx(MenuItem, { onClick: async () => {
-        const { toPng } = await import("../../chunks/index-nxRBtTOQ.js"), imageWidth = diagram.bounds.width + 32, imageHeight = diagram.bounds.height +
-        32, viewPort = document.querySelector(".react-flow__viewport");
-        if (viewPort)
-          try {
-            const data = await toPng(viewPort, {
-              backgroundColor: "transparent",
-              width: imageWidth,
-              height: imageHeight,
-              cacheBust: !0,
-              imagePlaceholder: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
-              style: {
-                width: imageWidth + "px",
-                height: imageHeight + "px",
-                transform: "translate(16px, 16px) scale(1)"
-              }
-            });
-            downloadImage(diagram.id, data);
-          } catch (err) {
-            console.error(err), window.alert("Failed to export to PNG, check the console for more details.");
-          }
-      }, children: "Export as .png" }),
-      /* @__PURE__ */ jsx(MenuItem, { component: Link, to: "/view/$viewId/dot", search: !0, params, children: "Export as .dot" }),
-      /* @__PURE__ */ jsx(MenuItem, { component: Link, to: "/view/$viewId/d2", search: !0, params, children: "Export as .d2" }),
-      /* @__PURE__ */ jsx(MenuItem, { component: Link, to: "/view/$viewId/mmd", search: !0, params, children: "Export as .mmd" }),
-      /* @__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" }),
-      /* @__PURE__ */ jsx(MenuDivider, {}),
-      /* @__PURE__ */ jsx(MenuLabel, { children: "All views" }),
-      /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Download as ZIP" })
-    ] })
-  ] });
-}
-export {
-  Header
-};

package/dist/__app__/src/hooks.js

@@ -1,16 +0,0 @@
-import { useLayoutEffect, useEffect } from "react";
-import { i as isBrowser } from "./chunks/const-DiwrD95Q.js";
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-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]);
-}
-export {
-  useTransparentBackground
-};

package/dist/__app__/src/routeTree.gen.js

@@ -1,57 +0,0 @@
-import { Route as Route$1 } from "./routes/__root.js";
-import { Route } from "./routes/index.js";
-import { Route as Route$2 } from "./routes/webcomponent._.js";
-import { Route as Route$3 } from "./routes/view._viewId.js";
-import { Route as Route$4 } from "./routes/export._viewId.js";
-import { Route as Route$5 } from "./routes/embed._viewId.js";
-import { Route as Route$6 } from "./routes/view._viewId.index.js";
-import { Route as Route$7 } from "./routes/view._viewId.mmd.js";
-import { Route as Route$8 } from "./routes/view._viewId.editor.js";
-import { Route as Route$9 } from "./routes/view._viewId.dot.js";
-import { Route as Route$a } from "./routes/view._viewId.d2.js";
-const IndexRoute = Route.update({
-  path: "/",
-  getParentRoute: () => Route$1
-}), WebcomponentSplatRoute = Route$2.update({
-  path: "/webcomponent/$",
-  getParentRoute: () => Route$1
-}), ViewViewIdRoute = Route$3.update({
-  path: "/view/$viewId",
-  getParentRoute: () => Route$1
-}), ExportViewIdRoute = Route$4.update({
-  path: "/export/$viewId",
-  getParentRoute: () => Route$1
-}), EmbedViewIdRoute = Route$5.update({
-  path: "/embed/$viewId",
-  getParentRoute: () => Route$1
-}), ViewViewIdIndexRoute = Route$6.update({
-  path: "/",
-  getParentRoute: () => ViewViewIdRoute
-}), ViewViewIdMmdRoute = Route$7.update({
-  path: "/mmd",
-  getParentRoute: () => ViewViewIdRoute
-}), ViewViewIdEditorRoute = Route$8.update({
-  path: "/editor",
-  getParentRoute: () => ViewViewIdRoute
-}), ViewViewIdDotRoute = Route$9.update({
-  path: "/dot",
-  getParentRoute: () => ViewViewIdRoute
-}), ViewViewIdD2Route = Route$a.update({
-  path: "/d2",
-  getParentRoute: () => ViewViewIdRoute
-}), routeTree = Route$1.addChildren({
-  IndexRoute,
-  EmbedViewIdRoute,
-  ExportViewIdRoute,
-  ViewViewIdRoute: ViewViewIdRoute.addChildren({
-    ViewViewIdD2Route,
-    ViewViewIdDotRoute,
-    ViewViewIdEditorRoute,
-    ViewViewIdMmdRoute,
-    ViewViewIdIndexRoute
-  }),
-  WebcomponentSplatRoute
-});
-export {
-  routeTree
-};

package/dist/__app__/src/router.js

@@ -1,26 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { R as RouterProvider, c as createRouter$1, a as createHashHistory, b as createBrowserHistory } from "./chunks/tanstack-router-Cg36mbgZ.js";
-import { useMemo } from "react";
-import { NotFound } from "./components/NotFound.js";
-import { basepath, useHashHistory } from "./const.js";
-import { routeTree } from "./routeTree.gen.js";
-import { B as Box, L as Loader } from "./chunks/mantine-u17mT9KZ.js";
-function createRouter() {
-  return createRouter$1({
-    routeTree,
-    context: {},
-    basepath,
-    trailingSlash: "preserve",
-    history: useHashHistory ? createHashHistory() : createBrowserHistory(),
-    defaultStaleTime: 1 / 0,
-    defaultNotFoundComponent: () => /* @__PURE__ */ jsx(NotFound, {}),
-    defaultPendingComponent: () => /* @__PURE__ */ jsx(Box, { p: "md", children: /* @__PURE__ */ jsx(Loader, { type: "dots" }) })
-  });
-}
-function Routes() {
-  const router = useMemo(() => createRouter(), []);
-  return /* @__PURE__ */ jsx(RouterProvider, { router });
-}
-export {
-  Routes
-};

package/dist/__app__/src/routes/__root.js

@@ -1,42 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { d as createRootRouteWithContext, S as ScrollRestoration, O as Outlet } from "../chunks/tanstack-router-Cg36mbgZ.js";
-import { theme } from "../theme.js";
-import { M as MantineProvider } from "../chunks/mantine-u17mT9KZ.js";
-const asTheme = (v) => {
-  if (typeof v != "string")
-    return;
-  const vlower = v.toLowerCase();
-  if (vlower === "light" || vlower === "dark")
-    return vlower;
-}, asPadding = (v) => {
-  switch (!0) {
-    case typeof v == "number":
-      return Math.round(v);
-    case typeof v == "string":
-      return Math.round(parseFloat(v));
-  }
-}, Route = createRootRouteWithContext()({
-  component: RootComponent,
-  validateSearch: (search) => ({
-    padding: asPadding(search.padding),
-    theme: asTheme(search.theme)
-  })
-});
-function RootComponent() {
-  const { theme: theme$1 } = Route.useSearch();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ScrollRestoration, {}),
-    /* @__PURE__ */ jsx(
-      MantineProvider,
-      {
-        ...theme$1 && { forceColorScheme: theme$1 },
-        defaultColorScheme: theme$1 ?? "auto",
-        theme,
-        children: /* @__PURE__ */ jsx(Outlet, {})
-      }
-    )
-  ] });
-}
-export {
-  Route
-};

package/dist/__app__/src/routes/embed._viewId.js

@@ -1,45 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { e as createFileRoute, n as notFound } from "../chunks/tanstack-router-Cg36mbgZ.js";
-import { useLikeC4View } from "virtual:likec4/store";
-import { RenderIcon } from "../components/RenderIcon.js";
-import { useTransparentBackground } from "../hooks.js";
-import { B as Box } from "../chunks/mantine-u17mT9KZ.js";
-import { S as StaticLikeC4Diagram } from "../chunks/StaticLikeC4Diagram-DdbjVDqf.js";
-const Route = createFileRoute("/embed/$viewId")({
-  component: EmbedPage
-});
-function EmbedPage() {
-  const { padding = 20 } = Route.useSearch(), { viewId } = Route.useParams(), diagram = useLikeC4View(viewId);
-  if (useTransparentBackground(!!diagram), !diagram)
-    throw notFound();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      pos: "absolute",
-      style: {
-        top: 0,
-        left: "50%",
-        boxSizing: "border-box",
-        padding,
-        transform: "translateX(-50%)",
-        aspectRatio: `${diagram.bounds.width + padding * 2} / ${diagram.bounds.height + padding * 2}`,
-        width: "100vw",
-        maxWidth: diagram.bounds.width + padding * 2,
-        height: "auto",
-        maxHeight: "100vh"
-      },
-      children: /* @__PURE__ */ jsx(
-        StaticLikeC4Diagram,
-        {
-          view: diagram,
-          fitViewPadding: 0,
-          background: "transparent",
-          renderIcon: RenderIcon
-        }
-      )
-    }
-  );
-}
-export {
-  Route
-};

package/dist/__app__/src/routes/export._viewId.js

@@ -1,60 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { e as createFileRoute, n as notFound } from "../chunks/tanstack-router-Cg36mbgZ.js";
-import { useEffect } from "react";
-import { useLikeC4View } from "virtual:likec4/store";
-import { RenderIcon } from "../components/RenderIcon.js";
-import { useTransparentBackground } from "../hooks.js";
-import { cssExportView } from "./view.css.js";
-import { B as Box } from "../chunks/mantine-u17mT9KZ.js";
-import { L as LikeC4Diagram } from "../chunks/LikeC4Diagram-DytrE8GE.js";
-const Route = createFileRoute("/export/$viewId")({
-  component: ExportPage
-});
-function ExportPage() {
-  const { padding = 20 } = Route.useSearch(), { viewId } = Route.useParams(), diagram = useLikeC4View(viewId);
-  if (useTransparentBackground(), useEffect(() => {
-    document.querySelectorAll(".react-flow__viewport").forEach((el) => {
-      el.style.transform = "";
-    });
-  }), !diagram)
-    throw notFound();
-  const width = diagram.bounds.width + padding * 2, height = diagram.bounds.height + padding * 2;
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      className: cssExportView,
-      role: "presentation",
-      style: {
-        minWidth: width,
-        width,
-        minHeight: height,
-        height
-      },
-      children: /* @__PURE__ */ jsx(
-        LikeC4Diagram,
-        {
-          view: diagram,
-          readonly: !0,
-          fitView: !0,
-          fitViewPadding: 0,
-          pannable: !1,
-          zoomable: !1,
-          controls: !1,
-          background: "transparent",
-          enableDynamicViewWalkthrough: !1,
-          showElementLinks: !1,
-          showDiagramTitle: !1,
-          nodesSelectable: !1,
-          nodesDraggable: !1,
-          enableFocusMode: !1,
-          renderIcon: RenderIcon,
-          initialWidth: width,
-          initialHeight: height
-        }
-      )
-    }
-  );
-}
-export {
-  Route
-};

package/dist/__app__/src/routes/index.css.js

@@ -1,7 +0,0 @@
-import "../chunks/mantine-u17mT9KZ.js";
-var dimmed = "_15b5f730", header = "_15b5f731", previewBg = "_15b5f732";
-export {
-  dimmed,
-  header,
-  previewBg
-};