@likec4/diagram 1.31.0 → 1.32.1

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

@@ -1,5 +1,4 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isScopedElementView, isDeploymentView } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 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';
@@ -8,6 +7,7 @@ import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from '@ta
 import { useDragControls, useMotionValue, m } from 'motion/react';
 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';
@@ -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) {
@@ -262,11 +259,21 @@ function ElementDetailsCard({
                 ] }),
                 /* @__PURE__ */ jsxs("div", { style: { 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: [
-                      "#",
+                  /* @__PURE__ */ jsxs(Flex, { gap: 4, flex: 1, mt: 6, wrap: "wrap", children: [
+                    elementModel.tags.map((tag) => /* @__PURE__ */ jsx(
+                      ElementTag,
+                      {
+                        tag,
+                        css: {
+                          cursor: "pointer"
+                        },
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          diagram.openSearch(`#${tag}`);
+                        }
+                      },
                       tag
-                    ] }, tag)),
+                    )),
                     elementModel.tags.length === 0 && /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: "—" })
                   ] })
                 ] }),
@@ -274,7 +281,7 @@ function ElementDetailsCard({
                   ActionIconGroup,
                   {
                     style: {
-                      alignSelf: "flex-end"
+                      alignSelf: "flex-start"
                     },
                     children: [
                       defaultLink && /* @__PURE__ */ jsx(
@@ -409,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

@@ -73,7 +73,7 @@ const DeployedInstanceRenderer = ({
 const setHoveredNode = () => {
 };
 const TabPanelDeployments = memo(({ elementFqn }) => {
-  const element = useLikeC4Model(true).element(elementFqn);
+  const element = useLikeC4Model().element(elementFqn);
   const deployments = [...element.deployments()];
   const tree = useTree({
     multiple: false

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/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;