likec4 1.6.1 → 1.7.0

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

@@ -0,0 +1,416 @@
+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

@@ -0,0 +1,16 @@
+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
+};