likec4 1.8.2-next.1 → 1.10.0

package/README.md

@@ -156,9 +156,69 @@ likec4 codegen ts ...
 
 ## API Usage
 
-LikeC4 model can be accessed 
+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
 

package/dist/__app__/react/likec4.tsx

@@ -1,5 +1,11 @@
-import type { LikeC4ViewBaseProps } from 'likec4/react'
-import { LikeC4Browser, LikeC4ViewElement, useColorScheme } from 'likec4/react'
+import {
+  LikeC4Browser,
+  LikeC4ViewEmbedded,
+  type LikeC4ViewProps as BaseLikeC4ViewProps,
+  ReactLikeC4 as GenericReactLikeC4,
+  type ReactLikeC4Props as GenericReactLikeC4Props,
+  useColorScheme
+} from 'likec4/react'
 import { memo, useCallback, useState } from 'react'
 import { Icons } from 'virtual:likec4/icons'
 import {
@@ -18,16 +24,34 @@ type IconRendererProps = {
   }
 }
 
-const RenderIcon = ({ node }: IconRendererProps) => {
+function RenderIcon({ node }: IconRendererProps) {
   const IconComponent = Icons[node.icon ?? '']
   return IconComponent ? <IconComponent /> : null
 }
 
-export { isLikeC4ViewId }
+export { isLikeC4ViewId, LikeC4Views, RenderIcon }
+
+export type LikeC4ViewProps = BaseLikeC4ViewProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
 
-export type LikeC4ViewProps = LikeC4ViewBaseProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
+const NotFound = ({ viewId }: { viewId: string }) => (
+  <div
+    style={{
+      margin: '1rem 0'
+    }}>
+    <div
+      style={{
+        margin: '0 auto',
+        display: 'inline-block',
+        padding: '2rem',
+        background: 'rgba(250,82,82,.15)',
+        color: '#ffa8a8'
+      }}>
+      View <code>{viewId}</code> not found
+    </div>
+  </div>
+)
 
-export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4ViewComponent({
+const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View({
   viewId,
   interactive = true,
   colorScheme: explicitColorScheme,
@@ -40,6 +64,9 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
   showNavigationButtons = false,
   showNotations = false,
   enableFocusMode = false,
+  browserClassName,
+  browserStyle,
+  mantineTheme,
   ...props
 }) {
   const view = LikeC4Views[viewId]
@@ -52,23 +79,23 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
     onNavigateTo(null)
   }, [onNavigateTo])
 
+  const colorScheme = useColorScheme(explicitColorScheme)
+
   if (!view) {
-    throw new Error(`View with id ${viewId} not found`)
+    return <NotFound viewId={viewId} />
   }
 
   if (browserViewId && !browserView) {
-    throw new Error(`View with id ${browserViewId} not found`)
+    return <NotFound viewId={browserViewId} />
   }
 
   if (interactive && enableFocusMode) {
     console.warn('Focus mode is not supported in interactive mode')
   }
 
-  const colorScheme = useColorScheme(explicitColorScheme)
-
   return (
     <>
-      <LikeC4ViewElement<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
+      <LikeC4ViewEmbedded<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
         view={view}
         colorScheme={colorScheme}
         injectFontCss={injectFontCss}
@@ -81,6 +108,7 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
         showNotations={showNotations}
         enableFocusMode={enableFocusMode}
         where={where}
+        mantineTheme={mantineTheme}
         {...props}
       />
       {browserView && (
@@ -93,9 +121,33 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
           onClose={closeBrowser}
           renderIcon={RenderIcon}
           where={where}
+          className={browserClassName}
+          style={browserStyle}
+          mantineTheme={mantineTheme}
         />
       )}
     </>
   )
 })
-LikeC4View.displayName = 'LikeC4View'
+LikeC4ViewMemo.displayName = 'LikeC4ViewMemo'
+export { LikeC4ViewMemo as LikeC4View }
+
+export type ReactLikeC4Props =
+  & Omit<GenericReactLikeC4Props<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>, 'view' | 'renderIcon'>
+  & {
+    viewId: LikeC4ViewId
+  }
+
+export function ReactLikeC4({ viewId, ...props }: ReactLikeC4Props) {
+  const view = LikeC4Views[viewId]
+  if (!view) {
+    return <NotFound viewId={viewId} />
+  }
+  return (
+    <GenericReactLikeC4
+      view={view}
+      renderIcon={RenderIcon}
+      {...props}
+    />
+  )
+}

package/dist/__app__/src/chunks/-index-overview-DZ3H7kDb.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-KEhBGhZ8.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-BnwtT_Nz.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
 };