likec4 1.6.1 → 1.7.0

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

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

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

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

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

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

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

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

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { e as createFileRoute, L as Link } from "../chunks/tanstack-router-Cg36mbgZ.js";
+import { memo, useState } from "react";
+import { useLikeC4Views, useLikeC4View } from "virtual:likec4/store";
+import { t, u as useDebouncedEffect, a as u$2 } from "../chunks/LikeC4Diagram-DytrE8GE.js";
+import { u as u$1 } from "../chunks/chunk-RAAYCPUM-CpeCcSnm.js";
+import { RenderIcon } from "../components/RenderIcon.js";
+import { previewBg } from "./index.css.js";
+import { d as SimpleGrid, e as Card, G as Group, f as Text, B as Box } from "../chunks/mantine-u17mT9KZ.js";
+import { S as StaticLikeC4Diagram } from "../chunks/StaticLikeC4Diagram-DdbjVDqf.js";
+function b(t2) {
+  return (e, r) => {
+    if (r === 0) return t2(e);
+    if (!Number.isInteger(r)) throw new TypeError(`precision must be an integer: ${r}`);
+    if (r > 15 || r < -15) throw new RangeError("precision must be between -15 and 15");
+    if (Number.isNaN(e) || !Number.isFinite(e)) return t2(e);
+    let n = 10 ** r;
+    return t2(e * n) / n;
+  };
+}
+function u(...e) {
+  return u$1(b(Math.ceil), e);
+}
+const Route = createFileRoute("/")({
+  component: IndexPage
+});
+function IndexPage() {
+  const views = t(useLikeC4Views());
+  return /* @__PURE__ */ jsx(
+    SimpleGrid,
+    {
+      p: { base: "md", sm: "xl" },
+      cols: { base: 1, sm: 2, md: 3, lg: 5 },
+      spacing: { base: 10, sm: "xl" },
+      verticalSpacing: { base: "md", sm: "xl" },
+      children: views.map((v) => /* @__PURE__ */ jsx(ViewCard, { viewId: v }, v))
+    }
+  );
+}
+const ViewCard = memo(({ viewId }) => {
+  const diagram = useLikeC4View(viewId);
+  if (!diagram)
+    return null;
+  const { id, title, description } = diagram;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      component: Link,
+      to: "/view/$viewId",
+      params: { viewId: id },
+      search: !0,
+      shadow: "xs",
+      padding: "lg",
+      radius: "sm",
+      withBorder: !0,
+      children: [
+        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(DiagramPreview, { diagram }) }),
+        /* @__PURE__ */ jsx(Group, { justify: "space-between", mt: "md", mb: "xs", children: /* @__PURE__ */ jsx(Text, { fw: 500, children: title }) }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: description })
+      ]
+    }
+  );
+}, (prev, next) => prev.viewId === next.viewId);
+function DiagramPreview(props) {
+  const [diagram, setDiagram] = useState(null);
+  return useDebouncedEffect(
+    () => {
+      setDiagram(props.diagram);
+    },
+    [props.diagram],
+    u$2(u(Math.random() * 400, -1), {
+      min: 50
+    })
+  ), /* @__PURE__ */ jsx(Box, { className: previewBg, style: { height: 175 }, children: diagram && /* @__PURE__ */ jsx(
+    StaticLikeC4Diagram,
+    {
+      background: "transparent",
+      view: diagram,
+      keepAspectRatio: !1,
+      renderIcon: RenderIcon,
+      fitView: !0,
+      fitViewPadding: 0.1
+    }
+  ) });
+}
+export {
+  IndexPage,
+  Route
+};

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

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { e as createFileRoute, n as notFound } from "../chunks/tanstack-router-Cg36mbgZ.js";
+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 { viewWithTopPadding, cssScrollArea, cssCodeBlock } from "./view_viewId_.css.js";
+import { S as ScrollArea, C as Code } from "../chunks/mantine-u17mT9KZ.js";
+const Route = createFileRoute("/view/$viewId/d2")({
+  component: ViewAsD2,
+  loader: async ({ params }) => {
+    const { viewId } = params;
+    try {
+      const { d2Source } = await import("./-view-lazy-data.js");
+      return {
+        source: d2Source(viewId)
+      };
+    } catch {
+      throw notFound();
+    }
+  }
+});
+function ViewAsD2() {
+  const { source } = Route.useLoaderData();
+  return /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsD2", children: [
+    /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
+      ScrollArea,
+      {
+        className: cssScrollArea,
+        p: 5,
+        styles: {
+          viewport: {
+            borderRadius: 6
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: source }),
+          /* @__PURE__ */ jsx(CopyToClipboard, { text: source })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PanelResizeHandle,
+      {
+        style: {
+          width: 10
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%" }) })
+  ] });
+}
+export {
+  Route
+};

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

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { e as createFileRoute, n as notFound } from "../chunks/tanstack-router-Cg36mbgZ.js";
+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 { S as ScrollArea, C as Code } from "../chunks/mantine-u17mT9KZ.js";
+const Route = createFileRoute("/view/$viewId/dot")({
+  component: ViewAsDot,
+  loader: async ({ params }) => {
+    const { viewId } = params;
+    try {
+      const { dotSource, svgSource } = await import("./-view-lazy-data.js"), dot = dotSource(viewId), dotSvg = svgSource(viewId);
+      return {
+        dot,
+        dotSvg
+      };
+    } catch (error) {
+      throw console.error(error), notFound();
+    }
+  }
+});
+function ViewAsDot() {
+  const { dot, dotSvg } = Route.useLoaderData();
+  return /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsDot", children: [
+    /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
+      ScrollArea,
+      {
+        className: cssScrollArea,
+        p: 5,
+        styles: {
+          viewport: {
+            borderRadius: 6
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Code, { block: !0, className: cssCodeBlock, children: dot }),
+          /* @__PURE__ */ jsx(CopyToClipboard, { text: dot })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PanelResizeHandle,
+      {
+        style: {
+          width: 10
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: /* @__PURE__ */ jsx("div", {
+      className: svgContainer,
+      dangerouslySetInnerHTML: { __html: dotSvg }
+    }) }) })
+  ] });
+}
+export {
+  Route
+};

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

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { e as createFileRoute, u as useRouter, n as notFound } from "../chunks/tanstack-router-Cg36mbgZ.js";
+import { L as LikeC4Diagram, D as DEV } from "../chunks/LikeC4Diagram-DytrE8GE.js";
+import { useLikeC4View } from "virtual:likec4/store";
+import { RenderIcon } from "../components/RenderIcon.js";
+import { u as useCallbackRef } from "../chunks/mantine-u17mT9KZ.js";
+const Route = createFileRoute("/view/$viewId/editor")({
+  component: ViewEditor
+});
+function ViewEditor() {
+  const router = useRouter(), { viewId } = Route.useParams(), view = useLikeC4View(viewId), onNavigateTo = useCallbackRef((viewId2) => {
+    router.navigate({
+      to: "/view/$viewId/editor",
+      params: { viewId: viewId2 },
+      startTransition: !0,
+      search: !0
+    });
+  });
+  if (useCallbackRef((event) => {
+    console.log("onChange", event);
+  }), !view)
+    throw notFound();
+  return /* @__PURE__ */ jsx(
+    LikeC4Diagram,
+    {
+      view,
+      readonly: !1,
+      nodesDraggable: !0,
+      experimentalEdgeEditing: !0,
+      fitViewPadding: 0.08,
+      showDiagramTitle: !0,
+      showElementLinks: !0,
+      showNavigationButtons: !0,
+      enableDynamicViewWalkthrough: !0,
+      onNavigateTo,
+      renderIcon: RenderIcon,
+      ...DEV
+    }
+  );
+}
+export {
+  Route
+};

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

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { e as createFileRoute, u as useRouter, n as notFound } from "../chunks/tanstack-router-Cg36mbgZ.js";
+import { useLikeC4View } from "virtual:likec4/store";
+import { RenderIcon } from "../components/RenderIcon.js";
+import { u as useCallbackRef } from "../chunks/mantine-u17mT9KZ.js";
+import { L as LikeC4Diagram } from "../chunks/LikeC4Diagram-DytrE8GE.js";
+const Route = createFileRoute("/view/$viewId/")({
+  component: ViewReact
+});
+function ViewReact() {
+  const router = useRouter(), { viewId } = Route.useParams(), view = useLikeC4View(viewId), onNavigateTo = useCallbackRef((viewId2) => {
+    router.navigate({
+      to: "/view/$viewId",
+      params: { viewId: viewId2 },
+      search: !0
+    });
+  });
+  if (!view)
+    throw notFound();
+  return /* @__PURE__ */ jsx(
+    LikeC4Diagram,
+    {
+      view,
+      readonly: !0,
+      controls: !1,
+      fitViewPadding: 0.08,
+      showDiagramTitle: !0,
+      showElementLinks: !0,
+      showNavigationButtons: !0,
+      enableDynamicViewWalkthrough: !0,
+      experimentalEdgeEditing: !1,
+      renderIcon: RenderIcon,
+      onNavigateTo
+    }
+  );
+}
+export {
+  Route
+};