likec4 1.8.2-next.0 → 1.9.0

package/README.md

@@ -12,7 +12,7 @@ Features:
 ## Install
 
 > **Compatibility Note:**\
-> LikeC4 requires [Node.js](https://nodejs.org/en/) version 18+, 20+
+> LikeC4 requires [Node.js](https://nodejs.org/en/) version 20+
 
 ### Local installation
 
@@ -154,6 +154,72 @@ likec4 codegen ts ...
 > Output file should have `.ts` extension\
 > By default, it generates `likec4.generated.ts` in current directory
 
+## API Usage
+
+You can access and traverse your architecture model programmatically using the LikeC4 Model API.
+
+### From workspace
+
+Recursively searches and parses source files from the wokrkspace directory:
+
+```ts
+import { LikeC4 } from 'likec4'
+
+const likec4 = await LikeC4.fromWorkspace('path to workspace', opts)
+```  
+
+### From source
+
+Parses the model from the string:
+
+```ts
+import { LikeC4 } from "likec4"
+
+const likec4 = await LikeC4.fromSource(`
+  specification {
+    element system
+    element user
+  }
+  model {
+    customer = user 'Customer'
+    cloud = system 'System'
+  }
+  views {
+    view index {
+      include *
+    }
+  }
+`, opts)
+```
+
+### Example
+
+When the model is initialized, you can use the following methods to query and traverse it.
+
+```ts
+import { LikeC4 } from "likec4"
+
+const likec4 = await LikeC4.fromSource(`....`)
+
+// Validation errors
+console.log(likec4.getErrors())
+
+// Traverse the model
+const model = likec4.model()
+model
+  .element('cloud.backend.api')
+  .incoming() // relationships incoming to the element
+  .filter(r => r.tags.includes('http')) // filter by tags
+  .map(r => r.source) // get source elements
+
+// Layouted views
+const diagrams = await likec4.diagrams()
+
+
+```  
+
+Check Typescript definitions for available methods.
+
 ## Development
 
 In root workspace:

package/dist/__app__/react/likec4.tsx

@@ -23,7 +23,7 @@ const RenderIcon = ({ node }: IconRendererProps) => {
   return IconComponent ? <IconComponent /> : null
 }
 
-export { isLikeC4ViewId }
+export { isLikeC4ViewId, LikeC4Views }
 
 export type LikeC4ViewProps = LikeC4ViewBaseProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
 

package/dist/__app__/src/chunks/-index-overview-BAmvrzHU.js

@@ -0,0 +1,317 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useOverviewGraph } from "virtual:likec4/overview-graph";
+import { u, c as createReactComponent, I as IconFolderFilled, e, a as useUpdateEffect, n as nonexhaustive } from "./main-BZtdykGF.js";
+import { u as useRouter } from "./tanstack-router-Bc_WYOzY.js";
+import { B as BaseEdge, H as Handle, P as Position, u as useNodesState, a as useEdgesState, i as index, b as Background, c as BackgroundVariant } from "./likec4-BqIZe8Y0.js";
+import { memo, useRef, useMemo } from "react";
+import { P as Paper, c as clsx, G as Group, T as ThemeIcon, a as Text, C as Card, b as CardSection, d as Center, I as Image, B as Box, u as useMantineColorScheme } from "./mantine-Bhi3pgTf.js";
+import { usePreviewUrl } from "virtual:likec4/previews";
+function a(...n) {
+  return u(c, n);
+}
+function c(n, r) {
+  let o = {};
+  for (let e2 of r) e2 in n && (o[e2] = n[e2]);
+  return o;
+}
+/**
+ * @license @tabler/icons-react v3.14.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconLoader = createReactComponent("outline", "loader", "IconLoader", [["path", { d: "M12 6l0 -3", key: "svg-0" }], ["path", { d: "M16.25 7.75l2.15 -2.15", key: "svg-1" }], ["path", { d: "M18 12l3 0", key: "svg-2" }], ["path", { d: "M16.25 16.25l2.15 2.15", key: "svg-3" }], ["path", { d: "M12 18l0 3", key: "svg-4" }], ["path", { d: "M7.75 16.25l-2.15 2.15", key: "svg-5" }], ["path", { d: "M6 12l-3 0", key: "svg-6" }], ["path", { d: "M7.75 7.75l-2.15 -2.15", key: "svg-7" }]]);
+/**
+ * @license @tabler/icons-react v3.14.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconFileFilled = createReactComponent("filled", "file-filled", "IconFileFilled", [["path", { d: "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z", key: "svg-0" }], ["path", { d: "M19 7h-4l-.001 -4.001z", key: "svg-1" }]]), root = "mxt2a80";
+function edgePath(points) {
+  return points.reduce((acc, [x, y], i) => acc + `${i === 0 ? "M" : " L"} ${x},${y}`, "");
+}
+function LinkEdge({
+  id,
+  data,
+  ...props
+}) {
+  if (!data)
+    return null;
+  const path = edgePath(data.points);
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      path,
+      ...props
+    }
+  );
+}
+var handleCenter = "_1n8mzjc0", toplevelNode = "_1n8mzjc1", nestedNode = "_1n8mzjc2", dimmed = "_1n8mzjc3", folderNode = "_1n8mzjc4", fileNode = "_1n8mzjc5", viewNode = "_1n8mzjc6", viewNodeImageSection = "_1n8mzjc7", viewTitle = "_1n8mzjc8";
+const FolderNode = /* @__PURE__ */ memo(function({
+  data,
+  parentId,
+  id
+}) {
+  const isTopLevel = e(parentId);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
+    /* @__PURE__ */ jsx(
+      Paper,
+      {
+        p: "sm",
+        pt: "xs",
+        radius: "md",
+        withBorder: !0,
+        shadow: isTopLevel ? "lg" : "xs",
+        className: clsx(
+          folderNode,
+          isTopLevel ? toplevelNode : nestedNode,
+          data.dimmed && dimmed
+        ),
+        children: /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
+          /* @__PURE__ */ jsx(ThemeIcon, { size: 24, variant: "transparent", color: "dark.4", children: /* @__PURE__ */ jsx(IconFolderFilled, { size: "100%" }) }),
+          /* @__PURE__ */ jsx(Text, { size: "lg", fw: 500, children: data.label })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, className: handleCenter })
+  ] });
+}), FileNode = /* @__PURE__ */ memo(function({
+  data,
+  parentId,
+  id
+}) {
+  const isTopLevel = e(parentId);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
+    /* @__PURE__ */ jsx(
+      Paper,
+      {
+        p: "sm",
+        pt: "xs",
+        radius: "md",
+        withBorder: !0,
+        shadow: isTopLevel ? "lg" : "xs",
+        className: clsx(
+          fileNode,
+          isTopLevel ? toplevelNode : nestedNode,
+          data.dimmed && dimmed
+        ),
+        children: /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
+          /* @__PURE__ */ jsx(ThemeIcon, { size: 24, variant: "transparent", color: "dark.3", children: /* @__PURE__ */ jsx(IconFileFilled, { size: "100%" }) }),
+          /* @__PURE__ */ jsx(Text, { size: "lg", fw: 500, children: data.label })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, className: handleCenter })
+  ] });
+}), ViewNode = /* @__PURE__ */ memo(function({
+  data,
+  height = 320
+}) {
+  const imageUrl = usePreviewUrl(data.viewId);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
+    /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: clsx(
+          viewNode,
+          data.dimmed && dimmed
+        ),
+        withBorder: !0,
+        shadow: "xs",
+        padding: 0,
+        children: [
+          /* @__PURE__ */ jsx(CardSection, { className: viewNodeImageSection, children: imageUrl ? /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: imageUrl,
+              fit: "contain",
+              h: height - 60
+            }
+          ) : /* @__PURE__ */ jsx(Center, { h: height - 60, children: /* @__PURE__ */ jsxs(Group, { children: [
+            /* @__PURE__ */ jsx(ThemeIcon, { size: 60, variant: "transparent", color: "dark", children: /* @__PURE__ */ jsx(IconLoader, { stroke: 1.5, size: "100%" }) }),
+            /* @__PURE__ */ jsx(Text, { size: "xl", fw: 500, c: "dimmed", children: "Preview not available" })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(Box, { className: viewTitle, h: 60, p: "sm", pl: "md", children: /* @__PURE__ */ jsx(Text, { component: "div", size: "lg", fw: 500, children: data.label }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, className: handleCenter })
+  ] });
+}), nodeTypes = {
+  folder: FolderNode,
+  file: FileNode,
+  view: ViewNode
+}, edgeTypes = {
+  link: LinkEdge
+}, overviewGraphToXYFlowData = (graph) => ({
+  nodes: graph.nodes.map(({ id, parentId, position, width, height, ...node }) => {
+    const parent = parentId ? graph.nodes.find((n) => n.id === parentId) : null, rect = {
+      ...position,
+      width,
+      height
+    };
+    parent && (position = {
+      x: position.x - parent.position.x,
+      y: position.y - parent.position.y
+    });
+    const xyparent = parent ? { parentId: parent.id } : {};
+    switch (node.type) {
+      case "file":
+      case "folder":
+        return {
+          id,
+          type: node.type,
+          data: {
+            dimmed: !1,
+            label: node.label,
+            path: node.path,
+            rect
+          },
+          deletable: !1,
+          position,
+          width,
+          height,
+          zIndex: 1,
+          ...xyparent
+        };
+      case "view":
+        return {
+          id,
+          type: "view",
+          data: {
+            dimmed: !1,
+            label: node.label,
+            viewId: node.viewId,
+            rect
+          },
+          selectable: !1,
+          deletable: !1,
+          position,
+          width,
+          height,
+          zIndex: 3,
+          ...xyparent
+        };
+      default:
+        nonexhaustive(node);
+    }
+  }),
+  edges: graph.edges.map((edge) => ({
+    id: edge.id,
+    source: edge.source,
+    target: edge.target,
+    type: "link",
+    zIndex: 2,
+    hidden: !0,
+    data: {
+      points: edge.points
+    }
+  }))
+});
+function OverviewDiagrams({
+  graph,
+  fitViewPadding = 0.1,
+  zoomable = !0,
+  pannable = !0
+}) {
+  const router = useRouter(), xyflowRef = useRef(), { colorScheme } = useMantineColorScheme(), xyflowdata = useMemo(() => overviewGraphToXYFlowData(graph), [graph]), [nodes, setNodes, onNodesChange] = useNodesState(xyflowdata.nodes), [edges, setEdges, onEdgeChanges] = useEdgesState(xyflowdata.edges);
+  useUpdateEffect(() => {
+    setNodes(
+      (nodes2) => xyflowdata.nodes.map((n) => {
+        const current = nodes2.find((node) => node.id === n.id);
+        return current ? { ...a(current, ["selected", "hidden"]), ...n } : n;
+      })
+    ), setEdges(xyflowdata.edges);
+  }, [xyflowdata.nodes, xyflowdata.edges]);
+  const focusedNode = nodes.find((node) => node.selected);
+  return useUpdateEffect(() => {
+    const xyflow = xyflowRef.current;
+    xyflow && (focusedNode ? xyflow.fitView({
+      maxZoom: 1,
+      padding: fitViewPadding,
+      nodes: [focusedNode],
+      duration: 450
+    }) : xyflow.fitView({
+      maxZoom: 1,
+      padding: fitViewPadding,
+      duration: 800
+    }));
+  }, [focusedNode?.id ?? null]), /* @__PURE__ */ jsx(
+    index,
+    {
+      colorMode: colorScheme === "auto" ? "system" : colorScheme,
+      className: root,
+      nodeTypes,
+      edgeTypes,
+      nodes,
+      onNodesChange,
+      edges,
+      onEdgesChange: onEdgeChanges,
+      fitView: !0,
+      fitViewOptions: useMemo(() => ({
+        minZoom: 0.05,
+        maxZoom: 1,
+        padding: fitViewPadding,
+        includeHiddenNodes: !0
+      }), [fitViewPadding]),
+      nodesDraggable: !1,
+      nodesConnectable: !1,
+      nodesFocusable: !0,
+      edgesReconnectable: !1,
+      edgesFocusable: !1,
+      multiSelectionKeyCode: null,
+      zoomOnPinch: zoomable,
+      zoomOnScroll: !pannable && zoomable,
+      zoomOnDoubleClick: !1,
+      ...!zoomable && {
+        zoomActivationKeyCode: null
+      },
+      maxZoom: zoomable ? 2 : 1,
+      minZoom: zoomable ? 0.01 : 1,
+      preventScrolling: zoomable || pannable,
+      noDragClassName: "nodrag",
+      noPanClassName: "nopan",
+      panOnScroll: pannable,
+      panOnDrag: pannable,
+      ...!pannable && {
+        selectionKeyCode: null
+      },
+      onInit: (instance) => xyflowRef.current = instance,
+      onNodeClick: (event, node) => {
+        if (node.type === "view") {
+          event.stopPropagation(), setNodes((nodes2) => nodes2.map(({ data, ...n }) => ({ ...n, data: { ...data, dimmed: n.id !== node.id } }))), xyflowRef.current?.fitView({
+            maxZoom: 10,
+            padding: 0,
+            nodes: [node],
+            duration: 1200
+          }), setTimeout(() => {
+            xyflowRef.current?.updateNodeData(node.id, { dimmed: !0 });
+          }, 400), setTimeout(() => {
+            router.navigate({
+              to: "/view/$viewId/",
+              params: {
+                viewId: node.data.viewId
+              },
+              search: !0
+            });
+          }, 800);
+          return;
+        }
+        node.selected && (event.stopPropagation(), setNodes((nodes2) => nodes2.map((n) => n.id === node.id ? { ...n, selected: !1 } : n)));
+      },
+      children: /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, size: 4, gap: 50 })
+    }
+  );
+}
+function OverviewPage() {
+  const graph = useOverviewGraph();
+  return /* @__PURE__ */ jsx(Box, { pos: "fixed", inset: 0, children: /* @__PURE__ */ jsx(OverviewDiagrams, { graph }) });
+}
+export {
+  OverviewPage as default
+};

package/dist/__app__/src/chunks/{likec4-Blyd4UZO.js → likec4-BqIZe8Y0.js}

@@ -5947,31 +5947,31 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
 }
 memo(ResizeControl);
 export {
-  Background as B,
+  BaseEdge as B,
   Controls as C,
   EdgeLabelRenderer as E,
   Handle as H,
   Position as P,
   ReactFlowProvider as R,
-  useStoreApi as a,
-  useNodesData as b,
-  useStore as c,
-  createWithEqualityFn as d,
-  applyNodeChanges as e,
-  applyEdgeChanges as f,
-  getViewportForBounds as g,
-  getNodeDimensions as h,
-  getBoundsOfRects as i,
-  boxToRect as j,
-  useStoreWithEqualityFn as k,
-  useOnViewportChange as l,
-  index as m,
-  useOnSelectionChange as n,
-  BackgroundVariant as o,
-  BaseEdge as p,
-  useNodesState as q,
-  useEdgesState as r,
+  useEdgesState as a,
+  Background as b,
+  BackgroundVariant as c,
+  useReactFlow as d,
+  useStoreApi as e,
+  useNodesData as f,
+  useStore as g,
+  createWithEqualityFn as h,
+  index as i,
+  applyNodeChanges as j,
+  applyEdgeChanges as k,
+  getViewportForBounds as l,
+  getNodeDimensions as m,
+  getBoundsOfRects as n,
+  boxToRect as o,
+  useStoreWithEqualityFn as p,
+  useOnViewportChange as q,
+  useOnSelectionChange as r,
   shallow$1 as s,
-  useReactFlow as u,
+  useNodesState as u,
   withSelectorExports as w
 };