@likec4/diagram 1.30.0 → 1.32.0

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isScopedElementView, isDeploymentView } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
-import { RemoveScroll, Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from '@mantine/core';
+import { RemoveScroll, Card, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from '@mantine/core';
 import { useViewportSize, useSessionStorage } from '@mantine/hooks';
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
 import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from '@tabler/icons-react';
 import { useDragControls, useMotionValue, m } from 'motion/react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { useState, useCallback, useRef } from 'react';
 import { pipe, map, partition, only, clamp, isNullish } from 'remeda';
+import { ElementTag } from '../../base/primitives/element/ElementTags.js';
 import { Link } from '../../components/Link.js';
 import { useDiagram } from '../../hooks/useDiagram.js';
 import { elementIcon, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, card, backdropOpacity, backdropBlur, dialog, propertyLabel, viewButton, viewButtonTitle } from './ElementDetailsCard.css.js';
@@ -56,7 +56,7 @@ function ElementDetailsCard({
   fqn,
   onClose
 }) {
-  const [opened, setOpened] = reactExports.useState(false);
+  const [opened, setOpened] = useState(false);
   const windowSize = useViewportSize();
   const windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800;
   const [activeTab, setActiveTab] = useSessionStorage({
@@ -64,17 +64,14 @@ function ElementDetailsCard({
     defaultValue: "Properties"
   });
   const diagram = useDiagram();
-  const likec4model = useLikeC4Model(true);
+  const likec4model = useLikeC4Model();
   const viewModel = likec4model.view(viewId);
   const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn);
   const elementModel = viewModel.$model.element(fqn);
   const [viewsOf, otherViews] = pipe(
     [...elementModel.views()],
     map((v) => v.$view),
-    partition((view) => {
-      const v = view;
-      return isScopedElementView(v) && v.viewOf === fqn;
-    })
+    partition((v) => v._type === "element" && v.viewOf === fqn)
   );
   let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null;
   if (defaultView?.id === viewId) {
@@ -119,11 +116,11 @@ function ElementDetailsCard({
     width.set(_width);
     height.set(_height);
   }, [_width, _height]);
-  const handleDrag = reactExports.useCallback((_, info) => {
+  const handleDrag = useCallback((_, info) => {
     width.set(Math.max(width.get() + info.delta.x, 320));
     height.set(Math.max(height.get() + info.delta.y, 300));
   }, []);
-  const ref = reactExports.useRef(null);
+  const ref = useRef(null);
   const onCloseRef = useSyncedRef(onClose);
   const close = useDebouncedCallback(
     () => {
@@ -148,14 +145,13 @@ function ElementDetailsCard({
   }, 20);
   useTimeoutEffect(() => {
     setOpened(true);
-  }, 150);
+  }, 200);
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
       ref,
       className: cx(dialog, RemoveScroll.classNames.fullWidth),
       layout: true,
-      layoutRoot: true,
       initial: {
         [backdropBlur]: "0px",
         [backdropOpacity]: "5%"
@@ -186,14 +182,15 @@ function ElementDetailsCard({
       children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsxs(
         Card,
         {
+          shadow: "md",
+          component: m.div,
+          layout: true,
+          layoutRoot: true,
           drag: true,
+          dragControls: controls,
           dragElastic: 0,
           dragMomentum: false,
           dragListener: false,
-          dragControls: controls,
-          withBorder: true,
-          shadow: "md",
-          component: m.div,
           className: cx(
             css({
               likec4Palette: nodeModel?.color ?? elementModel.color
@@ -228,104 +225,107 @@ function ElementDetailsCard({
             height
           },
           children: [
-            /* @__PURE__ */ jsxs(
-              Box,
-              {
-                className: cardHeader,
-                onPointerDown: (e) => controls.start(e),
-                children: [
-                  /* @__PURE__ */ jsxs(Group, { align: "start", justify: "space-between", gap: "sm", mb: "sm", wrap: "nowrap", children: [
-                    /* @__PURE__ */ jsxs(Group, { align: "start", gap: "sm", style: { cursor: "default" }, wrap: "nowrap", children: [
-                      elementIcon$1,
-                      /* @__PURE__ */ jsxs(Box, { children: [
-                        /* @__PURE__ */ jsx(
-                          Text,
-                          {
-                            component: "div",
-                            className: title,
-                            children: elementModel.title
-                          }
-                        ),
-                        notation && /* @__PURE__ */ jsx(Text, { component: "div", c: "dimmed", fz: "sm", fw: 500, lh: 1.3, lineClamp: 1, children: notation })
-                      ] })
-                    ] }),
+            /* @__PURE__ */ jsxs("div", { className: cardHeader, onPointerDown: (e) => controls.start(e), children: [
+              /* @__PURE__ */ jsxs(Group, { align: "start", justify: "space-between", gap: "sm", mb: "sm", wrap: "nowrap", children: [
+                /* @__PURE__ */ jsxs(Group, { align: "start", gap: "sm", style: { cursor: "default" }, wrap: "nowrap", children: [
+                  elementIcon$1,
+                  /* @__PURE__ */ jsxs("div", { children: [
                     /* @__PURE__ */ jsx(
-                      CloseButton,
+                      Text,
                       {
-                        size: "lg",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          close();
-                        }
+                        component: "div",
+                        className: title,
+                        children: elementModel.title
                       }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs(Group, { align: "baseline", gap: "sm", wrap: "nowrap", children: [
-                    /* @__PURE__ */ jsxs(Box, { children: [
-                      /* @__PURE__ */ jsx(SmallLabel, { children: "kind" }),
-                      /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: elementModel.kind })
-                    ] }),
-                    /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
-                      /* @__PURE__ */ jsx(SmallLabel, { children: "tags" }),
-                      /* @__PURE__ */ jsxs(Flex, { gap: 4, flex: 1, mt: 6, children: [
-                        elementModel.tags.map((tag) => /* @__PURE__ */ jsxs(Badge, { radius: "sm", size: "sm", fw: 600, variant: "gradient", children: [
-                          "#",
-                          tag
-                        ] }, tag)),
-                        elementModel.tags.length === 0 && /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: "—" })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxs(
-                      ActionIconGroup,
+                    ),
+                    notation && /* @__PURE__ */ jsx(Text, { component: "div", c: "dimmed", fz: "sm", fw: 500, lh: 1.3, lineClamp: 1, children: notation })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  CloseButton,
+                  {
+                    size: "lg",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      close();
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Group, { align: "baseline", gap: "sm", wrap: "nowrap", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(SmallLabel, { children: "kind" }),
+                  /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: elementModel.kind })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx(SmallLabel, { children: "tags" }),
+                  /* @__PURE__ */ jsxs(Flex, { gap: 4, flex: 1, mt: 6, wrap: "wrap", children: [
+                    elementModel.tags.map((tag) => /* @__PURE__ */ jsx(
+                      ElementTag,
                       {
-                        style: {
-                          alignSelf: "flex-end"
+                        tag,
+                        css: {
+                          cursor: "pointer"
                         },
-                        children: [
-                          defaultLink && /* @__PURE__ */ jsx(
-                            ActionIcon,
-                            {
-                              component: "a",
-                              href: defaultLink.url,
-                              target: "_blank",
-                              size: "lg",
-                              variant: "default",
-                              radius: "sm",
-                              children: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.6, style: { width: "65%" } })
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(IfEnabled, { feature: "Vscode", children: /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
-                            ActionIcon,
-                            {
-                              size: "lg",
-                              variant: "default",
-                              radius: "sm",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                              },
-                              children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "62%" } })
-                            }
-                          ) }) }),
-                          defaultView && /* @__PURE__ */ jsx(Tooltip, { label: "Open default view", children: /* @__PURE__ */ jsx(
-                            ActionIcon,
-                            {
-                              size: "lg",
-                              variant: "default",
-                              radius: "sm",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                diagram.navigateTo(defaultView.id, fromNode ?? void 0);
-                              },
-                              children: /* @__PURE__ */ jsx(IconZoomScan, { style: { width: "70%" } })
-                            }
-                          ) })
-                        ]
-                      }
-                    )
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          diagram.openSearch(`#${tag}`);
+                        }
+                      },
+                      tag
+                    )),
+                    elementModel.tags.length === 0 && /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: "—" })
                   ] })
-                ]
-              }
-            ),
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  ActionIconGroup,
+                  {
+                    style: {
+                      alignSelf: "flex-start"
+                    },
+                    children: [
+                      defaultLink && /* @__PURE__ */ jsx(
+                        ActionIcon,
+                        {
+                          component: "a",
+                          href: defaultLink.url,
+                          target: "_blank",
+                          size: "lg",
+                          variant: "default",
+                          radius: "sm",
+                          children: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.6, style: { width: "65%" } })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(IfEnabled, { feature: "Vscode", children: /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
+                        ActionIcon,
+                        {
+                          size: "lg",
+                          variant: "default",
+                          radius: "sm",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                          },
+                          children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "62%" } })
+                        }
+                      ) }) }),
+                      defaultView && /* @__PURE__ */ jsx(Tooltip, { label: "Open default view", children: /* @__PURE__ */ jsx(
+                        ActionIcon,
+                        {
+                          size: "lg",
+                          variant: "default",
+                          radius: "sm",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            diagram.navigateTo(defaultView.id, fromNode ?? void 0);
+                          },
+                          children: /* @__PURE__ */ jsx(IconZoomScan, { style: { width: "70%" } })
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              ] })
+            ] }),
             /* @__PURE__ */ jsxs(
               Tabs,
               {
@@ -416,7 +416,7 @@ const ViewButton = ({
   onNavigateTo
 }) => {
   return /* @__PURE__ */ jsx(UnstyledButton, { className: viewButton, onClick: (e) => onNavigateTo(view.id, e), children: /* @__PURE__ */ jsxs(Group, { gap: 6, align: "start", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", children: isDeploymentView(view) ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
+    /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", children: view._type === "deployment" ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
     /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(Text, { component: "div", className: viewButtonTitle, lineClamp: 1, children: view.title || "untitled" }),
       view.description && /* @__PURE__ */ jsx(Text, { component: "div", mt: 2, fz: "xs", c: "dimmed", lh: 1.4, lineClamp: 1, children: view.description })

package/dist/overlays/element-details/TabPanelDeployments.d.ts

@@ -1,4 +1,4 @@
-import { Fqn } from '@likec4/core';
+import { Fqn } from '@likec4/core/types';
 import { NamedExoticComponent } from 'react';
 type TabPanelDeploymentsProps = {
     elementFqn: Fqn;

package/dist/overlays/element-details/TabPanelDeployments.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from '@mantine/core';
 import { IconInfoCircle, IconTarget, IconZoomScan } from '@tabler/icons-react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { memo, useMemo, useEffect } from 'react';
 import { useDiagram } from '../../hooks/useDiagram.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from './TabPanelDeployments.css.js';
@@ -72,14 +72,14 @@ const DeployedInstanceRenderer = ({
 };
 const setHoveredNode = () => {
 };
-const TabPanelDeployments = reactExports.memo(({ elementFqn }) => {
-  const element = useLikeC4Model(true).element(elementFqn);
+const TabPanelDeployments = memo(({ elementFqn }) => {
+  const element = useLikeC4Model().element(elementFqn);
   const deployments = [...element.deployments()];
   const tree = useTree({
     multiple: false
   });
   tree.setHoveredNode = setHoveredNode;
-  const data = reactExports.useMemo(() => {
+  const data = useMemo(() => {
     let roots = [];
     let treeItems = /* @__PURE__ */ new Map();
     for (const instance of element.deployments()) {
@@ -113,7 +113,7 @@ const TabPanelDeployments = reactExports.memo(({ elementFqn }) => {
     }
     return roots;
   }, [element]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     tree.expandAllNodes();
   }, [data]);
   if (deployments.length === 0) {

package/dist/overlays/element-details/TabPanelRelationships.d.ts

@@ -1,4 +1,4 @@
-import { LikeC4Model } from '@likec4/core';
+import { LikeC4Model } from '@likec4/core/model';
 type RelationshipsTabPanelProps = {
     node: LikeC4Model.Node | null;
     element: LikeC4Model.Element;

package/dist/overlays/element-details/TabPanelRelationships.js

@@ -3,7 +3,7 @@ import { nameFromFqn } from '@likec4/core';
 import { Stack, Group, Box, ThemeIcon, Text, Tooltip as Tooltip$1, ActionIcon, Paper } from '@mantine/core';
 import { IconArrowRight, IconInfoCircle, IconExternalLink } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { useState } from 'react';
 import { unique } from 'remeda';
 import { useOverlaysActorRef } from '../../hooks/useOverlaysActor.js';
 import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser.js';
@@ -27,7 +27,7 @@ function TabPanelRelationships({
   const overlaysActor = useOverlaysActorRef();
   const delailsActor = useElementDetailsActorRef();
   const relationshipsBrowserActor = useSelector(delailsActor, (s) => s.children[`${delailsActor.id}-relationships`]);
-  const [scope, setScope] = reactExports.useState("view");
+  const [scope, setScope] = useState("view");
   const incoming = [...element.incoming()].map((r) => r.id);
   const outgoing = [...element.outgoing()].map((r) => r.id);
   const incomingInView = node ? unique([...node.incoming()].flatMap((e) => e.$edge.relations)) : [];

package/dist/overlays/element-details/TabPanelStructure.d.ts

@@ -1,4 +1,4 @@
-import { LikeC4Model } from '@likec4/core';
+import { LikeC4Model } from '@likec4/core/model';
 import { ReactNode } from 'react';
 interface ElementTreeNodeData {
     label: ReactNode;

package/dist/overlays/element-details/TabPanelStructure.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { useMemo, useEffect } from 'react';
 import { treeNodeLabel, elementLabel } from './TabPanelStructure.css.js';
 
 const ElementLabel = ({
@@ -16,7 +16,7 @@ function TabPanelStructure({
     multiple: false
   });
   tree.setHoveredNode = setHoveredNode;
-  const data = reactExports.useMemo(() => {
+  const data = useMemo(() => {
     let seq = 1;
     const messageNode = (label) => ({
       label,
@@ -53,7 +53,7 @@ function TabPanelStructure({
       ancestor
     ];
   }, [element]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     tree.expandAllNodes();
   }, [data]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [