likec4 1.26.1 → 1.26.2

package/__app__/src/main.js

@@ -8,7 +8,7 @@ import { ComponentName, withOverviewGraph, isDevelopment, krokiD2SvgUrl, useHash
 import { projects, isSingleProject } from "likec4:projects";
 import { createLikeC4Model } from "likec4/model";
 import { nano } from "likec4/react";
-import { invariant as invariant$2, hasAtLeast, nonexhaustive, isStepEdgeId, extractStep, DefaultShapeSize, DefaultTextSize, DefaultPaddingSize, compareNatural, DiagramNode, nameFromFqn, nonNullable, defaultTheme, ElementShapes, computeRelationshipsView, toArray, sortParentsFirst, DefaultMap, isDescendantOf, isAncestor, ancestorsFqn, isScopedElementView, isDeploymentView, Queue, ElementKind, delay as delay$1, compareRelations, compareFqnHierarchically, ifilter, whereOperatorAsPredicate, getBBoxCenter, getParallelStepsPrefix } from "@likec4/core";
+import { invariant as invariant$2, hasAtLeast, nonexhaustive, isStepEdgeId, extractStep, DefaultShapeSize, DefaultTextSize, DefaultPaddingSize, compareNatural, DiagramNode, nameFromFqn, nonNullable, defaultTheme, ElementShapes, computeRelationshipsView, toArray, sortParentsFirst, DefaultMap, isDescendantOf, isAncestor, ancestorsFqn, isScopedElementView, isDeploymentView, Queue, ElementKind, delay as delay$1, compareRelations, compareFqnHierarchically, ifilter, whereOperatorAsPredicate, getBBoxCenter, getParallelStepsPrefix, ComputedView } from "@likec4/core";
 import { ProjectIcons } from "likec4:icons";
 import { loadModel } from "likec4:model";
 import { loadMmdSources } from "likec4:mmd";
@@ -1336,17 +1336,17 @@ function getRefProp(element) {
   const version2 = React__default.version;
   return typeof React__default.version != "string" || version2.startsWith("18.") ? element?.ref : element?.props?.ref;
 }
-function r$6(e2) {
+function r$7(e2) {
   var t2, f2, n2 = "";
   if (typeof e2 == "string" || typeof e2 == "number") n2 += e2;
   else if (typeof e2 == "object") if (Array.isArray(e2)) {
     var o2 = e2.length;
-    for (t2 = 0; t2 < o2; t2++) e2[t2] && (f2 = r$6(e2[t2])) && (n2 && (n2 += " "), n2 += f2);
+    for (t2 = 0; t2 < o2; t2++) e2[t2] && (f2 = r$7(e2[t2])) && (n2 && (n2 += " "), n2 += f2);
   } else for (f2 in e2) e2[f2] && (n2 && (n2 += " "), n2 += f2);
   return n2;
 }
 function clsx() {
-  for (var e2, t2, f2 = 0, n2 = "", o2 = arguments.length; f2 < o2; f2++) (e2 = arguments[f2]) && (t2 = r$6(e2)) && (n2 && (n2 += " "), n2 += t2);
+  for (var e2, t2, f2 = 0, n2 = "", o2 = arguments.length; f2 < o2; f2++) (e2 = arguments[f2]) && (t2 = r$7(e2)) && (n2 && (n2 += " "), n2 += t2);
   return n2;
 }
 const EMPTY_CLASS_NAMES = {};
@@ -28176,6 +28176,9 @@ function u$8(r2, n2, o2) {
   if (a2 === 1) return u$9(r2, n2, o2);
   throw new Error("Wrong number of arguments");
 }
+function r$6(...t2) {
+  return u$8(Object.values, t2);
+}
 function i$a(...e2) {
   return y$4(a$6, e2);
 }
@@ -45819,7 +45822,8 @@ function DiagramPreview$1({ diagram }) {
       background: "transparent",
       view: diagram,
       fitView: !0,
-      fitViewPadding: 0.1
+      fitViewPadding: 0.1,
+      reduceGraphics: !0
     }
   ) });
 }
@@ -45902,18 +45906,111 @@ function WebcomponentPage() {
     }
   ) }) });
 }
+function useTransparentBackground(enabled = !0) {
+  useIsomorphicLayoutEffect(() => {
+    const htmlEl = document.body.parentElement;
+    if (!htmlEl || enabled !== !0) return;
+    const classname = "transparent-bg";
+    return htmlEl.classList.add(classname), () => {
+      htmlEl.classList.remove(classname);
+    };
+  }, [enabled]);
+}
+function useLikeC4Views() {
+  const $likec4data = useLikeC4ModelDataContext(), $viewsAtom = useMemo(() => nano.computed($likec4data, (model) => r$6(model.views)), [$likec4data]);
+  return nano.useStore($viewsAtom);
+}
+function useCurrentDiagram() {
+  const viewId = useParams({
+    select: (params) => params.viewId ?? "index",
+    strict: !1
+  }), $likec4data = useLikeC4ModelDataContext(), $viewAtom = useMemo(() => nano.computed($likec4data, (model) => model.views[viewId] ?? null), [viewId, $likec4data]);
+  return nano.useStore($viewAtom);
+}
+function useCurrentProjectd() {
+  return useParams({
+    select: (params) => params.projectId,
+    strict: !1
+  }) ?? projects[0];
+}
 const isTreeNodeData = (node2) => "type" in node2 && ["file", "folder", "view", "deployment-view"].includes(node2.type);
+function dropFilename(relativePath) {
+  return relativePath === "" ? "" : relativePath.split("/").slice(0, -1).join("/");
+}
+function compareTreeNodes(a2, b) {
+  return a2.children.length === 0 && b.children.length > 0 ? 1 : a2.children.length > 0 && b.children.length === 0 ? -1 : compareNatural(a2.label, b.label);
+}
+function buildDiagramTreeData(views, groupBy) {
+  const root2 = {
+    value: "",
+    label: "Diagrams",
+    type: "folder",
+    children: []
+  }, findParent = (path) => {
+    let parent = root2;
+    if (path === "")
+      return parent;
+    const segments = path.split("/"), traversed = ["@fs"];
+    for (; segments.length; ) {
+      const label2 = segments.shift();
+      traversed.push(label2);
+      const value = traversed.join("/");
+      let node2 = f(parent.children, (n2) => n2.value === value);
+      node2 || (node2 = { label: label2, value, type: "folder", children: [] }, parent.children.push(node2)), parent = node2;
+    }
+    return parent;
+  };
+  for (const view of views) {
+    let relativePath;
+    switch (groupBy) {
+      case "by-files":
+        relativePath = view.relativePath ?? "";
+        break;
+      case "by-folders":
+        relativePath = dropFilename(view.relativePath ?? "");
+        break;
+      case "none":
+        relativePath = "";
+        break;
+      default:
+        nonexhaustive(groupBy);
+    }
+    const parent = findParent(relativePath);
+    parent.children.push({
+      value: view.id,
+      label: view.title ?? view.id,
+      type: ComputedView.isDeployment(view) ? "deployment-view" : "view",
+      children: []
+    }), parent !== root2 && (parent.children.sort(compareTreeNodes), groupBy === "by-files" && parent.type !== "file" && (parent.type = "file"));
+  }
+  return root2.children.sort(compareTreeNodes);
+}
 function useDiagramsTreeData(groupBy = "by-files") {
-  return [];
+  const views = useLikeC4Views();
+  return useMemo(() => buildDiagramTreeData(views, groupBy), [views, groupBy]);
 }
-const isFile = (node2) => isTreeNodeData(node2) && node2.type === "file", FolderIcon = ({ node: node2, expanded }) => isFile(node2) ? /* @__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 = ({ groupBy, viewId }) => {
-  const data = useDiagramsTreeData(groupBy);
-  useRouter();
+const isFile = (node2) => isTreeNodeData(node2) && node2.type === "file", FolderIcon = ({ node: node2, expanded }) => isFile(node2) ? /* @__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$1(({ groupBy }) => {
+  const data = useDiagramsTreeData(groupBy), router = useRouter(), diagram = useCurrentDiagram(), viewId = diagram?.id ?? null, tree = useTree({
+    multiple: !1
+  }), relativePath = diagram?.relativePath ?? null;
+  useUpdateEffect(() => {
+    tree.collapseAllNodes();
+  }, [groupBy]), useEffect(() => {
+    if (relativePath) {
+      const segments = relativePath.split("/");
+      let path = "@fs";
+      for (const segment of segments)
+        path += `/${segment}`, tree.expand(path);
+    }
+  }, [relativePath, groupBy]), useEffect(() => {
+    viewId && tree.select(viewId);
+  }, [viewId]);
   const theme2 = useComputedColorScheme();
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
     Tree,
     {
       allowRangeSelection: !1,
+      tree,
       data,
       styles: {
         node: {
@@ -45947,7 +46044,15 @@ const isFile = (node2) => isTreeNodeData(node2) && node2.type === "file", Folder
           ] }),
           ...!hasChildren && {
             onClick: (e2) => {
-              e2.stopPropagation();
+              e2.stopPropagation(), router.commitLocation(
+                router.buildLocation({
+                  to: ".",
+                  params: (p2) => ({
+                    ...p2,
+                    viewId: node2.value
+                  })
+                })
+              );
             }
           },
           children: node2.label
@@ -45955,7 +46060,7 @@ const isFile = (node2) => isTreeNodeData(node2) && node2.type === "file", Folder
       ) })
     }
   ) });
-};
+});
 function DiagramPreviewHoverCard({
   viewId,
   children: children2,
@@ -45974,7 +46079,18 @@ function DiagramPreview({
   const ratio = Math.max(diagram.bounds.width / 400, diagram.bounds.height / 300), width = Math.round(diagram.bounds.width / ratio), height = Math.round(diagram.bounds.height / ratio);
   return /* @__PURE__ */ jsxs(HoverCard, { position: "right-start", openDelay: 400, closeDelay: 100, keepMounted: !1, shadow: "lg", children: [
     /* @__PURE__ */ jsx(HoverCardTarget, { children: children2 }),
-    /* @__PURE__ */ jsx(HoverCardDropdown, { style: { width, height }, p: "xs", onClick })
+    /* @__PURE__ */ jsx(HoverCardDropdown, { style: { width, height }, p: "xs", onClick, children: /* @__PURE__ */ jsx(
+      StaticLikeC4Diagram,
+      {
+        view: diagram,
+        fitView: !0,
+        fitViewPadding: 0,
+        enableElementDetails: !1,
+        reduceGraphics: !0,
+        initialWidth: width,
+        initialHeight: height
+      }
+    ) })
   ] });
 }
 const drawerOpenedAtom = atom(!1);
@@ -45985,7 +46101,7 @@ const useDrawerOpened = () => useStore(drawerOpenedAtom), SidebarDrawerOps = {
   open: () => drawerOpenedAtom.set(!0),
   close: () => drawerOpenedAtom.set(!1)
 };
-function SidebarDrawer({ viewId }) {
+function SidebarDrawer() {
   const opened = useDrawerOpened(), [grouping, setGrouping] = useLocalStorage({
     key: "sidebar-drawer-grouping",
     defaultValue: "by-files"
@@ -46061,7 +46177,7 @@ function SidebarDrawer({ viewId }) {
             ] }),
             /* @__PURE__ */ jsx(Drawer.CloseButton, {})
           ] }),
-          /* @__PURE__ */ jsx(Drawer.Body, { children: /* @__PURE__ */ jsx(DiagramsTree, { groupBy: grouping, viewId }) })
+          /* @__PURE__ */ jsx(Drawer.Body, { children: /* @__PURE__ */ jsx(DiagramsTree, { groupBy: grouping }) })
         ] })
       ]
     }
@@ -46083,29 +46199,6 @@ function ColorSchemeToggle() {
   );
 }
 var cssHeader = "yr9aef0";
-function useTransparentBackground(enabled = !0) {
-  useIsomorphicLayoutEffect(() => {
-    const htmlEl = document.body.parentElement;
-    if (!htmlEl || enabled !== !0) return;
-    const classname = "transparent-bg";
-    return htmlEl.classList.add(classname), () => {
-      htmlEl.classList.remove(classname);
-    };
-  }, [enabled]);
-}
-function useCurrentDiagram() {
-  const viewId = useParams({
-    select: (params) => params.viewId ?? "index",
-    strict: !1
-  }), $likec4data = useLikeC4ModelDataContext(), $viewAtom = useMemo(() => nano.computed($likec4data, (model) => model.views[viewId] ?? null), [viewId, $likec4data]);
-  return nano.useStore($viewAtom);
-}
-function useCurrentProjectd() {
-  return useParams({
-    select: (params) => params.projectId,
-    strict: !1
-  }) ?? projects[0];
-}
 function SelectProject() {
   const projectId2 = useCurrentProjectd();
   return projects.length < 2 ? null : /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
@@ -46450,11 +46543,10 @@ const Route$d = createFileRoute("/_single/view/$viewId")({
   component: ViewLayout$2
 });
 function ViewLayout$2() {
-  const { viewId } = Route$d.useParams();
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(Outlet, {}),
     /* @__PURE__ */ jsx(ViewHeader$1, {}),
-    !withOverviewGraph && /* @__PURE__ */ jsx(SidebarDrawer, { viewId })
+    !withOverviewGraph && /* @__PURE__ */ jsx(SidebarDrawer, {})
   ] });
 }
 function ViewHeader$1() {
@@ -46925,11 +47017,10 @@ const Route$9 = createFileRoute("/_single/view/$viewId/")({
   component: ViewLayout
 });
 function ViewLayout() {
-  const { viewId } = Route$8.useParams();
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(Outlet, {}),
     /* @__PURE__ */ jsx(ViewHeader, {}),
-    !withOverviewGraph && /* @__PURE__ */ jsx(SidebarDrawer, { viewId })
+    !withOverviewGraph && /* @__PURE__ */ jsx(SidebarDrawer, {})
   ] });
 }
 function ViewHeader() {

package/dist/cli/index.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
-import{h as tt,k as uh,o as at,q as _s,u as ee,w as lh,r as fh,s as dh,v as St,t as hh,e as Yo,x as Xo,d as ph,L as rt,y as mh,z as nt,l as Jo,A as gh,B as yh,n as _h,D as $h,E as Vt,F as Qo,G as vh,H as sr,I as $s,J as Zo,K as bh,Q as wh}from"../shared/likec4.BCmwBuM_.mjs";import Re,{hrtime as Eh,cwd as vs,exit as ea,stdout as Sh,argv as Rh}from"node:process";import{strictEqual as Ah,notStrictEqual as Oh}from"assert";import bs,{resolve as Ue,dirname as ws,normalize as Ch,relative as Ph,extname as Ih,
+import{h as tt,k as uh,o as at,q as _s,u as ee,w as lh,r as fh,s as dh,v as St,t as hh,e as Yo,x as Xo,d as ph,L as rt,y as mh,z as nt,l as Jo,A as gh,B as yh,n as _h,D as $h,E as Vt,F as Qo,G as vh,H as sr,I as $s,J as Zo,K as bh,Q as wh}from"../shared/likec4.CdjXfSGc.mjs";import Re,{hrtime as Eh,cwd as vs,exit as ea,stdout as Sh,argv as Rh}from"node:process";import{strictEqual as Ah,notStrictEqual as Oh}from"assert";import bs,{resolve as Ue,dirname as ws,normalize as Ch,relative as Ph,extname as Ih,
 basename as Nh}from"path";import{statSync as ta,readdirSync as Th,readFileSync as Es,writeFile as jh}from"fs";import ra,{format as na,inspect as Lh}from"util";import{fileURLToPath as Dh}from"url";import $e,{resolve as ge,dirname as Rt,join as ir,relative as At,extname as or,isAbsolute as Ss,basename as Nr}from"node:path";import pe,{existsSync as Ot,copyFileSync as sa,readdirSync as xh,rmSync as Rs}from"node:fs";import{mkdtemp as Tr,writeFile as Ct,mkdir as ct,stat as As,copyFile as Mh,rm as kh}from"node:fs/promises";
-import ar,{tmpdir as jr}from"node:os";import{fileURLToPath as ia}from"node:url";import oa from"@vitejs/plugin-react";import{L as Os,J as qh,S as Hh,P as Uh,q as Fh,Y as zh}from"../shared/likec4.D3T36QRo.mjs";import{build as cr,createServer as Vh,preview as Gh}from"vite";import{hasAtLeast as Bh,invariant as Cs,nonexhaustive as aa,delay as ca}from"@likec4/core";import{chromium as ua}from"playwright";import Wh from"node:net";import{setTimeout as Kh}from"node:timers/promises";import{promisify as Ie,
+import ar,{tmpdir as jr}from"node:os";import{fileURLToPath as ia}from"node:url";import oa from"@vitejs/plugin-react";import{L as Os,J as qh,S as Hh,P as Uh,q as Fh,Y as zh}from"../shared/likec4.DQwwl5M9.mjs";import{build as cr,createServer as Vh,preview as Gh}from"vite";import{hasAtLeast as Bh,invariant as Cs,nonexhaustive as aa,delay as ca}from"@likec4/core";import{chromium as ua}from"playwright";import Wh from"node:net";import{setTimeout as Kh}from"node:timers/promises";import{promisify as Ie,
 isDeepStrictEqual as Yh}from"node:util";import ur from"node:crypto";import Xh from"node:assert";import"tty";import"os";import"crypto";import"net";import"child_process";import"@likec4/core/types";import"events";import"buffer";import"@hpcc-js/wasm-graphviz";import"@likec4/core/compute-view";import"@likec4/core/utils";import"boxen";import"node:child_process";import"node:events";import"node:stream/promises";import"fs/promises";import"@likec4/core/model";const Jh={right:np,center:sp},Qh=0,Lr=1,Zh=2,Dr=3;
 class ep{constructor(e){var r;this.width=e.width,this.wrap=(r=e.wrap)!==null&&r!==void 0?r:!0,this.rows=[]}span(...e){const r=this.div(...e);r.span=!0}resetOutput(){this.rows=[]}div(...e){if(e.length===0&&this.div(""),this.wrap&&this.shouldApplyLayoutDSL(...e)&&typeof e[0]=="string")return this.applyLayoutDSL(e[0]);const r=e.map(n=>typeof n=="string"?this.colFromString(n):n);return this.rows.push(r),r}shouldApplyLayoutDSL(...e){return e.length===1&&typeof e[0]=="string"&&/[\t\n]/.test(e[0])}applyLayoutDSL(e){
 const r=e.split(`

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { DiagramView, ProjectId, NonEmptyArray } from '@likec4/core';
 export { AbstractRelation, AutoLayoutDirection, BBox, Color, ComputedDeploymentView, ComputedDynamicView, ComputedEdge, ComputedElementView, ComputedLikeC4ModelData, ComputedNode, ComputedView, DeployedInstance, DeploymentElement, DeploymentNode, DeploymentNodeKind, DeploymentRelation, DeploymentView, DiagramEdge, DiagramNode, DiagramView, DynamicView, EdgeId, Element, ElementKind, ElementView, Fqn, HexColorLiteral, LayoutedLikeC4ModelData, LikeC4View, NodeId, ParsedLikeC4ModelData, Point, RelationExpr, RelationId, StepEdgeId, Tag, ThemeColor, ViewId, XYPoint } from '@likec4/core';
 import { LikeC4Model } from '@likec4/core/model';
 export { AnyAux, Aux, LikeC4DeploymentModel, LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
-import { L as LikeC4LanguageServices, a as LikeC4Views, R as Range } from './shared/likec4.Y_4a6gTW.mjs';
+import { L as LikeC4LanguageServices, a as LikeC4Views, R as Range } from './shared/likec4.DGrST4wG.mjs';
 import 'type-fest';
 
 type Logger = {

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { DiagramView, ProjectId, NonEmptyArray } from '@likec4/core';
 export { AbstractRelation, AutoLayoutDirection, BBox, Color, ComputedDeploymentView, ComputedDynamicView, ComputedEdge, ComputedElementView, ComputedLikeC4ModelData, ComputedNode, ComputedView, DeployedInstance, DeploymentElement, DeploymentNode, DeploymentNodeKind, DeploymentRelation, DeploymentView, DiagramEdge, DiagramNode, DiagramView, DynamicView, EdgeId, Element, ElementKind, ElementView, Fqn, HexColorLiteral, LayoutedLikeC4ModelData, LikeC4View, NodeId, ParsedLikeC4ModelData, Point, RelationExpr, RelationId, StepEdgeId, Tag, ThemeColor, ViewId, XYPoint } from '@likec4/core';
 import { LikeC4Model } from '@likec4/core/model';
 export { AnyAux, Aux, LikeC4DeploymentModel, LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
-import { L as LikeC4LanguageServices, a as LikeC4Views, R as Range } from './shared/likec4.Y_4a6gTW.js';
+import { L as LikeC4LanguageServices, a as LikeC4Views, R as Range } from './shared/likec4.DGrST4wG.js';
 import 'type-fest';
 
 type Logger = {

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import"@likec4/core";export{LikeC4DeploymentModel,LikeC4Model,LikeC4ViewModel}from"@likec4/core/model";export{L as LikeC4}from"./shared/likec4.BCmwBuM_.mjs";import"node:fs";import"node:path";import"node:url";import"tty";import"node:util";import"util";import"path";import"os";import"crypto";import"net";import"url";import"fs";import"child_process";import"@likec4/core/types";import"events";import"buffer";import"@hpcc-js/wasm-graphviz";import"@likec4/core/compute-view";import"@likec4/core/utils";import"node:process";
+import"@likec4/core";export{LikeC4DeploymentModel,LikeC4Model,LikeC4ViewModel}from"@likec4/core/model";export{L as LikeC4}from"./shared/likec4.CdjXfSGc.mjs";import"node:fs";import"node:path";import"node:url";import"tty";import"node:util";import"util";import"path";import"os";import"crypto";import"net";import"url";import"fs";import"child_process";import"@likec4/core/types";import"events";import"buffer";import"@hpcc-js/wasm-graphviz";import"@likec4/core/compute-view";import"@likec4/core/utils";import"node:process";
 import"boxen";import"node:child_process";import"node:events";import"node:fs/promises";import"node:stream/promises";import"node:os";import"fs/promises";