likec4 1.6.1 → 1.7.0

package/dist/__app__/src/components/ColorSchemeToggle.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { a as useMantineColorScheme, m as useComputedColorScheme, A as ActionIcon } from "../chunks/mantine-u17mT9KZ.js";
+import { c as createReactComponent } from "../chunks/createReactComponent-BWheWDGL.js";
+/**
+ * @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 IconMoonStars = createReactComponent("outline", "moon-stars", "IconMoonStars", [["path", { d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.44\
+6a9 9 0 1 1 -8.313 -12.454z", key: "svg-0" }], ["path", { d: "M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2", key: "svg-1" }], ["p\
+ath", { d: "M19 11h2m-1 -1v2", 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 IconSun = createReactComponent("outline", "sun", "IconSun", [["path", { d: "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-0" }], ["path", {
+d: "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7", key: "svg-1" }]]);
+function ColorSchemeToggle() {
+  const { setColorScheme } = useMantineColorScheme(), computedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: !0 });
+  return /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      visibleFrom: "sm",
+      size: "md",
+      variant: "subtle",
+      color: "gray",
+      onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
+      "aria-label": "Toggle color scheme",
+      children: computedColorScheme === "light" ? /* @__PURE__ */ jsx(IconMoonStars, { stroke: 1.5 }) : /* @__PURE__ */ jsx(IconSun, { stroke: 1.5 })
+    }
+  );
+}
+export {
+  ColorSchemeToggle
+};

package/dist/__app__/src/components/CopyToClipboard.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { b as CopyButton$1, T as Tooltip, A as ActionIcon, r as rem, B as Box } from "../chunks/mantine-u17mT9KZ.js";
+import { I as IconCheck, a as IconCopy } from "../chunks/IconCopy-BoSoNPZ_.js";
+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 }) });
+}
+export {
+  CopyButton,
+  CopyToClipboard
+};

package/dist/__app__/src/components/NotFound.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { L as Link } from "../chunks/tanstack-router-Cg36mbgZ.js";
+import { i as Container, l as Title, f as Text, G as Group, k as Button } from "../chunks/mantine-u17mT9KZ.js";
+var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root = "_1u4wf803", description = "_1u4wf804", title = "_1u4wf805";
+function NotFound() {
+  return /* @__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.4h1\
+1.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.4h\
+26.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 2\
+2.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.8\
+c-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.1\
+34 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,
+        startTransition: !0,
+        size: "md",
+        children: "Take me back to home page"
+      }) })
+    ] })
+  ] }) });
+}
+export {
+  NotFound
+};

package/dist/__app__/src/components/RenderIcon.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Icons } from "virtual:likec4/icons";
+function RenderIcon({ node }) {
+  const IconComponent = Icons[node.icon ?? ""];
+  return IconComponent ? /* @__PURE__ */ jsx(IconComponent, {}) : null;
+}
+export {
+  RenderIcon
+};

package/dist/__app__/src/components/sidebar/Drawer.js

@@ -0,0 +1,186 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { f as useParams, L as Link } from "../../chunks/tanstack-router-Cg36mbgZ.js";
+import { useMemo, memo } from "react";
+import { e, n } from "../../chunks/chunk-SGAFZVQH-F2W_It6h.js";
+import { useLikeC4Views, useLikeC4View } from "virtual:likec4/store";
+import { u as u$1 } from "../../chunks/chunk-RAAYCPUM-CpeCcSnm.js";
+import { n as useTree, m as useComputedColorScheme, B as Box, o as Tree, k as Button, p as ThemeIcon, D as Drawer, S as ScrollArea } from "../../chunks/mantine-u17mT9KZ.js";
+import { c as createReactComponent } from "../../chunks/createReactComponent-BWheWDGL.js";
+var s = { done: !1, hasNext: !1 };
+function r(...t) {
+  return u$1(Object.values, t);
+}
+function f(...e$1) {
+  return u$1(i, e$1, e(u));
+}
+var i = (e2, n2) => e2.find(n2), u = (e2) => (n2, t, o) => e2(n2, t, o) ? { done: !0, hasNext: !0, next: n2 } : s;
+/**
+ * @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 IconArrowLeft = createReactComponent("outline", "arrow-left", "IconArrowLeft", [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M5 12l\
+6 6", key: "svg-1" }], ["path", { d: "M5 12l6 -6", 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 IconFileCode = createReactComponent("outline", "file-code", "IconFileCode", [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "\
+M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", key: "svg-1" }], ["path", { d: "M10 13l-1 2l1 2", key: "svg-2" }], ["path", {
+d: "M14 13l1 2l-1 2", key: "svg-3" }]]);
+/**
+ * @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 IconFolderOpen = createReactComponent("outline", "folder-open", "IconFolderOpen", [["path", { d: "M5 19l2.757 -7.351a1 1 0 0 1 .936 -.649h12.307a1\
+ 1 0 0 1 .986 1.164l-.996 5.211a2 2 0 0 1 -1.964 1.625h-14.026a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2", 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 IconLayoutDashboard = createReactComponent("outline", "layout-dashboard", "IconLayoutDashboard", [["path", { d: "M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1 \
+-1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-0" }], ["path", { d: "M5 16h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -\
+1", key: "svg-1" }], ["path", { d: "M15 12h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-2" }], ["path", { d: "M15\
+ 4h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-3" }]]);
+/**
+ * @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 IconFolderFilled = createReactComponent("filled", "folder-filled", "IconFolderFilled", [["path", { d: "M9 3a1 1 0 0 1 .608 .206l.1 .087l2.706 2.70\
+7h6.586a3 3 0 0 1 2.995 2.824l.005 .176v8a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-11a3 3 0 0 1 2.824 -2.995l.176 -.\
+005h4z", key: "svg-0" }]]);
+const isTreeNodeData = (node) => "type" in node && ["file", "folder", "diagram"].includes(node.type);
+function compareTreeNodes(a, b) {
+  return a.children.length === 0 && b.children.length > 0 ? 1 : a.children.length > 0 && b.children.length === 0 ? -1 : a.label.localeCompare(b.label);
+}
+function buildDiagramTreeData(views) {
+  const root = {
+    value: "",
+    label: "Diagrams",
+    type: "folder",
+    children: []
+  }, findParent = (path) => {
+    let parent = root;
+    if (path === "")
+      return parent;
+    const segments = path.split("/"), traversed = ["@fs"];
+    for (; segments.length; ) {
+      const label = segments.shift();
+      traversed.push(label);
+      const value = traversed.join("/");
+      let node = f(parent.children, (n2) => n2.value === value);
+      node || (node = { label, value, type: "folder", children: [] }, parent.children.push(node)), parent = node;
+    }
+    return parent;
+  };
+  for (const view of views) {
+    const parent = findParent(view.relativePath ?? "");
+    parent.children.push({
+      value: view.id,
+      label: view.title ?? view.id,
+      type: "diagram",
+      children: []
+    }), parent !== root && (parent.children.sort(compareTreeNodes), n(view.relativePath) && parent.type !== "file" && (parent.type = "file"));
+  }
+  return root.children.sort(compareTreeNodes);
+}
+function useDiagramsTreeData() {
+  const views = useLikeC4Views();
+  return useMemo(() => buildDiagramTreeData(r(views)), [views]);
+}
+const isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIcon = ({ node, expanded }) => isFile(node) ? /* @__PURE__ */ jsx(ThemeIcon,
+{ size: "sm", variant: "transparent", color: "indigo", children: /* @__PURE__ */ jsx(IconFileCode, { size: 16 }) }) : /* @__PURE__ */ jsx(ThemeIcon, {
+size: "sm", variant: "transparent", color: "violet", children: expanded ? /* @__PURE__ */ jsx(
+  IconFolderOpen,
+  { size: 16 }
+) : /* @__PURE__ */ jsx(IconFolderFilled, { size: 16 }) }), DiagramsTree = /* @__PURE__ */ memo(() => {
+  const data = useDiagramsTreeData(), { viewId } = useParams({
+    from: "/view/$viewId"
+  }), diagram = useLikeC4View(viewId), initialExpandedState = {};
+  if (diagram && n(diagram.relativePath)) {
+    const segments = diagram.relativePath.split("/");
+    let path = "@fs";
+    for (const segment of segments)
+      path += `/${segment}`, initialExpandedState[path] = !0;
+  }
+  const tree = useTree({
+    initialExpandedState,
+    multiple: !1
+  }), theme = useComputedColorScheme();
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    Tree,
+    {
+      tree,
+      data,
+      styles: {
+        node: {
+          marginTop: 2,
+          marginBottom: 2
+        }
+      },
+      levelOffset: "md",
+      renderNode: ({ node, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsx(Box, { ...elementProps, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          fullWidth: !0,
+          color: theme === "light" ? "dark" : "gray",
+          variant: viewId === node.value ? "filled" : "subtle",
+          size: "sm",
+          fz: "sm",
+          fw: hasChildren ? "600" : "500",
+          justify: "flex-start",
+          styles: {
+            section: {
+              opacity: 0.75
+            }
+          },
+          leftSection: /* @__PURE__ */ jsxs(Fragment, { children: [
+            !hasChildren && /* @__PURE__ */ jsx(IconLayoutDashboard, { size: 16, opacity: 0.7 }),
+            hasChildren && /* @__PURE__ */ jsx(FolderIcon, { node, expanded })
+          ] }),
+          ...!hasChildren && {
+            component: Link,
+            params: { viewId: node.value }
+          },
+          children: node.label
+        }
+      ) })
+    }
+  ) });
+});
+function SidebarDrawer({ opened, onClose }) {
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      size: "sm",
+      opened,
+      onClose,
+      title: /* @__PURE__ */ jsx(
+        Button,
+        {
+          component: Link,
+          to: "/",
+          leftSection: /* @__PURE__ */ jsx(IconArrowLeft, {}),
+          color: "dimmed",
+          variant: "subtle",
+          size: "xs",
+          children: "Back to overview"
+        }
+      ),
+      scrollAreaComponent: ScrollArea.Autosize,
+      children: /* @__PURE__ */ jsx(DiagramsTree, {})
+    }
+  );
+}
+export {
+  SidebarDrawer
+};