likec4 1.6.1 → 1.7.0

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

@@ -0,0 +1,173 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { e as createFileRoute, O as Outlet, u as useRouter, i as isNotFound } from "../chunks/tanstack-router-Cg36mbgZ.js";
+import { useEffect, createContext, Component, createElement, isValidElement } from "react";
+import { useLikeC4View } from "virtual:likec4/store";
+import { SidebarDrawer } from "../components/sidebar/Drawer.js";
+import { Header } from "../components/view-page/Header.js";
+import { cssViewOutlet } from "./view.css.js";
+import { g as useDisclosure, B as Box, h as Burger, i as Container, j as Alert, f as Text, C as Code, k as Button } from "../chunks/mantine-u17mT9KZ.js";
+import { u as useFirstMountState } from "../chunks/index-BxglQLE6.js";
+import { n as noop } from "../chunks/const-DiwrD95Q.js";
+function useUpdateEffect(effect, deps) {
+  const isFirstMount = useFirstMountState();
+  useEffect(isFirstMount ? noop : effect, deps);
+}
+const ErrorBoundaryContext = createContext(null), initialState = {
+  didCatch: !1,
+  error: null
+};
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: !0,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      for (var _this$props$onReset, _this$props, _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++)
+        args[_key] = arguments[_key];
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 || _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      }), this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props2, error,
+    info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state, {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 || _this$props$onReset2.call(_this$props3,
+      {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      }), this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props, {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender == "function")
+        childToRender = fallbackRender(props);
+      else if (FallbackComponent)
+        childToRender = createElement(FallbackComponent, props);
+      else if (fallback === null || isValidElement(fallback))
+        childToRender = fallback;
+      else
+        throw error;
+    }
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+}
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
+const Route = createFileRoute("/view/$viewId")({
+  component: ViewLayout
+});
+function Fallback({ error, resetErrorBoundary }) {
+  const router = useRouter(), { viewId } = Route.useParams();
+  return useUpdateEffect(() => {
+    resetErrorBoundary();
+  }, [viewId]), isNotFound(error) ? /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orang\
+e", children: [
+    /* @__PURE__ */ jsxs(Text, { c: "orange", fz: "md", children: [
+      "The diagram",
+      " ",
+      /* @__PURE__ */ jsx(Code, { color: "orange", children: viewId }),
+      " ",
+      "does not exist or contains errors"
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => {
+          resetErrorBoundary(), router.navigate({
+            to: "/",
+            search: !0
+          });
+        },
+        variant: "light",
+        color: "orange",
+        mt: "lg",
+        size: "xs",
+        children: "Go to overview"
+      }
+    )
+  ] }) }) : /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "filled", color: "red", title: "Something went\
+ wrong", children: [
+    /* @__PURE__ */ jsx(Code, { block: !0, color: "red", children: error.stack ?? error.message }),
+    /* @__PURE__ */ jsx(Button, { onClick: resetErrorBoundary, color: "red", variant: "white", mt: "lg", size: "xs", children: "Try again" })
+  ] }) });
+}
+function ViewLayout() {
+  const [opened, { toggle, close }] = useDisclosure(!1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback, children: /* @__PURE__ */ jsx(
+      Outlet,
+      {}
+    ) }) }),
+    /* @__PURE__ */ jsx(ViewHeader, {}),
+    /* @__PURE__ */ jsx(SidebarDrawer, { opened, onClose: close }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        pos: "fixed",
+        top: 14,
+        left: 10,
+        children: /* @__PURE__ */ jsx(
+          Burger,
+          {
+            size: "sm",
+            opened,
+            onClick: toggle,
+            "aria-label": "Toggle navigation"
+          }
+        )
+      }
+    )
+  ] });
+}
+function ViewHeader() {
+  const view = useLikeC4View(Route.useParams().viewId);
+  return view ? /* @__PURE__ */ jsx(Header, { diagram: view }) : null;
+}
+export {
+  Route
+};

package/dist/__app__/src/routes/view._viewId.mmd.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { e as createFileRoute, n as notFound } from "../chunks/tanstack-router-Cg36mbgZ.js";
+import { useState, useRef, useMemo, useEffect } from "react";
+import { P as PanelGroup, a as Panel, b as PanelResizeHandle } from "../chunks/react-resizable-panels.browser.esm-BaxT8im_.js";
+import { CopyToClipboard } from "../components/CopyToClipboard.js";
+import { svgContainer } from "./view.css.js";
+import { viewWithTopPadding, cssScrollArea, cssCodeBlock } from "./view_viewId_.css.js";
+import { u as useSyncedRef } from "../chunks/index-fBIC0lf6.js";
+import { S as ScrollArea, C as Code } from "../chunks/mantine-u17mT9KZ.js";
+function useAsync(asyncFn, initialValue) {
+  const [state, setState] = useState({
+    status: "not-executed",
+    error: void 0,
+    result: initialValue
+  }), promiseRef = useRef(), argsRef = useRef(), methods = useSyncedRef({
+    execute(...params) {
+      argsRef.current = params;
+      const promise = asyncFn(...params);
+      return promiseRef.current = promise, setState((s) => ({ ...s, status: "loading" })), promise.then((result) => {
+        promise === promiseRef.current && setState((s) => ({ ...s, status: "success", error: void 0, result }));
+      }, (error) => {
+        promise === promiseRef.current && setState((s) => ({ ...s, status: "error", error }));
+      }), promise;
+    },
+    reset() {
+      setState({
+        status: "not-executed",
+        error: void 0,
+        result: initialValue
+      }), promiseRef.current = void 0, argsRef.current = void 0;
+    }
+  });
+  return [
+    state,
+    useMemo(() => ({
+      reset() {
+        methods.current.reset();
+      },
+      execute: (...params) => methods.current.execute(...params)
+    }), []),
+    { promise: promiseRef.current, lastArgs: argsRef.current }
+  ];
+}
+const Route = createFileRoute("/view/$viewId/mmd")({
+  component: ViewAsMmd,
+  loader: async ({ params }) => {
+    const { viewId } = params;
+    try {
+      const { mmdSource } = await import("./-view-lazy-data.js");
+      return {
+        source: mmdSource(viewId)
+      };
+    } catch {
+      throw notFound();
+    }
+  }
+}), renderSvg = async (viewId, diagram) => {
+  const { default: mermaid } = await import("https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs");
+  mermaid.initialize({
+    theme: "dark"
+  });
+  const { svg } = await mermaid.render(viewId, diagram);
+  return svg;
+};
+function ViewAsMmd() {
+  const { viewId } = Route.useParams(), { source } = Route.useLoaderData(), [mmdSvg, { execute }] = useAsync(renderSvg, null);
+  return useEffect(() => {
+    execute(viewId, source);
+  }, [source]), /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsMmd", children: [
+    /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
+      ScrollArea,
+      {
+        className: cssScrollArea,
+        p: 5,
+        styles: {
+          viewport: {
+            borderRadius: 6
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: source }),
+          /* @__PURE__ */ jsx(CopyToClipboard, { text: source })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PanelResizeHandle,
+      {
+        style: {
+          width: 10
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx("div", {
+      className: svgContainer,
+      dangerouslySetInnerHTML: { __html: mmdSvg.result }
+    }) }) })
+  ] });
+}
+export {
+  Route
+};

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

@@ -0,0 +1,12 @@
+/* empty css                                     */
+var cssPreviewCardLink = "_1dn84dq0", svgContainer = "_1dn84dq1", headerHeight = "var(--_1dn84dq2)", cssViewOutlet = "_1dn84dq3", cssExportView = "_1d\
+n84dq4", cssWebcomponentView = "_1dn84dq5", cssWebcomponentIframeContainer = "_1dn84dq6";
+export {
+  cssExportView,
+  cssPreviewCardLink,
+  cssViewOutlet,
+  cssWebcomponentIframeContainer,
+  cssWebcomponentView,
+  headerHeight,
+  svgContainer
+};

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

@@ -0,0 +1,7 @@
+/* empty css                                     */
+var cssScrollArea = "_5k2wbq0", cssCodeBlock = "_5k2wbq1", viewWithTopPadding = "_5k2wbq2";
+export {
+  cssCodeBlock,
+  cssScrollArea,
+  viewWithTopPadding
+};

package/dist/__app__/src/routes/webcomponent._.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { e as createFileRoute, u as useRouter } from "../chunks/tanstack-router-Cg36mbgZ.js";
+import { ComponentName } from "../const.js";
+import { cssWebcomponentView, cssWebcomponentIframeContainer } from "./view.css.js";
+import { a as useMantineColorScheme, F as Flex, B as Box } from "../chunks/mantine-u17mT9KZ.js";
+const Route = createFileRoute("/webcomponent/$")({
+  component: WebcomponentPage
+});
+function WebcomponentPage() {
+  const router = useRouter(), viewId = Route.useParams()._splat || "index", { colorScheme } = useMantineColorScheme();
+  let base = router.basepath.endsWith("/") ? router.basepath : `${router.basepath}/`;
+  const jsurl = new URL(
+    `${base}likec4-views.js`,
+    window.location.href
+  ), iframeHtml = `
+    <!DOCTYPE html>
+    <html lang="en-US" style="color-scheme: ${colorScheme};">
+    <head>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
+      <style>
+        * {
+          border-width: 0px;
+          border-style: solid;
+          box-sizing: border-box;
+          overflow-wrap: break-word;
+        }
+        html, body {
+          margin: 0;
+          background-color: transparent !important;
+          width: 100%;
+          height: 100%;
+          font-size: 16px;
+        }
+        body {
+          position: relative;
+          min-height: 100%;
+          padding: clamp(0.5rem, 5vh, 4rem) clamp(0.5rem, 5vw, 5rem);
+        }
+      </style>
+    </head>
+    <body>
+      <script type="module" src="${jsurl.href}"><\/script>
+      <${ComponentName.View} view-id="${encodeURIComponent(viewId)}"></${ComponentName.View}>
+    </body>
+    </html>
+  `;
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", className: cssWebcomponentView, children: /* @__PURE__ */ jsx(Box, {
+    className: cssWebcomponentIframeContainer,
+    children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        srcDoc: iframeHtml,
+        allowtransparency: "true"
+      }
+    )
+  }) });
+}
+export {
+  Route
+};