@likec4/diagram 1.31.0 → 1.32.0

package/dist/likec4diagram/custom/index.d.ts

@@ -2,7 +2,8 @@ import { Types } from '../types';
 import { MemoExoticComponent, FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { NodeProps } from '../../base';
 import { Position, XYPosition } from '@xyflow/system';
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId } from '@likec4/core';
+import { EdgeData, Dimmed } from '../../base/types.Base';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId } from '@likec4/core';
 export declare const BuiltinNodes: {
     element: MemoExoticComponent<(props: NodeProps<Types.ElementNodeData, "element">) => import("react/jsx-runtime").JSX.Element>;
     deployment: MemoExoticComponent<(props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => import("react/jsx-runtime").JSX.Element>;
@@ -38,21 +39,21 @@ export declare const edgeTypes: {
         markerEnd?: string;
         pathOptions?: any;
         interactionWidth?: number;
-        data: import("../../base").Base.EdgeData & {
+        data: EdgeData & {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
+            head: RelationshipArrowType | undefined;
             line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
             technology: string | undefined;
+            tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;

package/dist/likec4diagram/custom/nodes/nodes.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { IfNotReadOnly, IfEnabled, useEnabledFeatures } from '../../../context/DiagramFeatures.js';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
@@ -12,6 +12,7 @@ import { DefaultHandles } from '../../../base/primitives/NodeHandles.js';
 import { ElementNodeContainer } from '../../../base/primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
 import { ElementTitle } from '../../../base/primitives/element/ElementTitle.js';
+import { ElementTags } from '../../../base/primitives/element/ElementTags.js';
 import { CompoundDetailsButton } from '../../../base/primitives/compound/CompoundDetailsButton.js';
 import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
 
@@ -47,41 +48,53 @@ function CompoundDetailsButtonWithHandler(props) {
     }
   );
 }
-const ElementNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-  /* @__PURE__ */ jsx(ElementShape, { ...props }),
-  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
-  /* @__PURE__ */ jsx(ElementActions, { ...props }),
-  /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-  /* @__PURE__ */ jsx(IfNotReadOnly, { children: /* @__PURE__ */ jsx(ElementToolbar, { ...props }) }),
-  /* @__PURE__ */ jsx(DefaultHandles, {})
-] }));
+const ElementNode = customNode((props) => {
+  const { enableElementTags, enableReadOnly } = useEnabledFeatures();
+  return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(ElementShape, { ...props }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
+    /* @__PURE__ */ jsx(ElementActions, { ...props }),
+    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+    !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] });
+});
 ElementNode.displayName = "ElementNode";
-const DeploymentNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-  /* @__PURE__ */ jsx(ElementShape, { ...props }),
-  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
-  /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
-  /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-  /* @__PURE__ */ jsx(IfNotReadOnly, { children: /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }) }),
-  /* @__PURE__ */ jsx(DefaultHandles, {})
-] }));
+const DeploymentNode = customNode((props) => {
+  const { enableElementTags, enableReadOnly } = useEnabledFeatures();
+  return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(ElementShape, { ...props }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
+    /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
+    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+    !enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] });
+});
 DeploymentNode.displayName = "DeploymentNode";
 const CompoundElementNode = customNode((props) => {
-  useDiagram();
+  const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
     /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-    /* @__PURE__ */ jsx(IfEnabled, { feature: "ElementDetails", children: /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }) }),
-    /* @__PURE__ */ jsx(IfNotReadOnly, { children: /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }) }),
+    enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
+    !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
 });
 CompoundElementNode.displayName = "CompoundElementNode";
-const CompoundDeploymentNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-  /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-  /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-  /* @__PURE__ */ jsx(IfNotReadOnly, { children: /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }) }),
-  /* @__PURE__ */ jsx(DefaultHandles, {})
-] }));
+const CompoundDeploymentNode = customNode((props) => {
+  const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
+  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+    enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
+    !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] });
+});
 CompoundDeploymentNode.displayName = "CompoundDeploymentNode";
 const ViewGroupNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
   /* @__PURE__ */ jsx(CompoundTitle, { ...props }),

package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts

@@ -1,4 +1,4 @@
-import { Fqn, ThemeColor, ViewChange } from '@likec4/core';
+import { DeploymentFqn, Fqn, ThemeColor, ViewChange } from '@likec4/core';
 import { MergeExclusive } from 'type-fest';
 import { NodeProps } from '../../../../base';
 import { Types } from '../../../types';
@@ -25,7 +25,7 @@ export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttri
     component?: any;
     renderRoot?: (props: Record<string, any>) => React.ReactNode;
 }>;
-export declare function useHandlers(target: Fqn, props: NodeProps<Types.NodeData>): {
+export declare function useHandlers(target: Fqn | DeploymentFqn, props: NodeProps<Types.NodeData>): {
     elementColor: "blue" | "gray" | "green" | "indigo" | "red" | "amber" | "slate" | "muted" | "primary" | "secondary" | "sky";
     onColorPreview: (color: ThemeColor | null) => void;
     onChange: OnStyleChange;
@@ -36,5 +36,5 @@ export declare function BrowseRelationshipsButton({ fqn }: {
 export declare function GoToSourceButton(props: MergeExclusive<{
     elementId: Fqn;
 }, {
-    deploymentId: Fqn;
+    deploymentId: DeploymentFqn;
 }>): import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4diagram/types.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core';
+import { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/system';
 import { OptionalKeysOf, Simplify } from 'type-fest';
 import { Base, ReactFlowEdge, ReactFlowNode } from '../base/types';
@@ -8,7 +8,7 @@ type NonOptional<T extends object> = Simplify<{
     [P in OptionalKeysOf<T>]-?: T[P] | undefined;
 }>;
 export declare namespace Types {
-    type LeafNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'position'>> & {
+    type LeafNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'position'>> & {
         /**
          * View this node belongs to
          */
@@ -32,10 +32,10 @@ export declare namespace Types {
      */
     type DeploymentElementNodeData = LeafNodeData & {
         navigateTo: ViewId | null;
-        deploymentFqn: Fqn;
+        deploymentFqn: DeploymentFqn;
         modelFqn: Fqn | null;
     };
-    type CompoundNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'position'>> & {
+    type CompoundNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'tags' | 'position'>> & {
         /**
          * View this node belongs to
          */
@@ -52,7 +52,7 @@ export declare namespace Types {
         navigateTo: ViewId | null;
     };
     type CompoundDeploymentNodeData = CompoundNodeData & {
-        deploymentFqn: Fqn;
+        deploymentFqn: DeploymentFqn;
         /**
          * If set - this node refers to a model element
          */

package/dist/likec4diagram/ui/controls/Controls.js

@@ -4,9 +4,9 @@ import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from '@mantine/core
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react';
 import { m, LayoutGroup } from 'motion/react';
 import { memo } from 'react';
+import { SearchControl } from '../../../components/SearchControl.js';
 import { useControlsCustomLayout } from '../../../context/ControlsCustomLayout.js';
 import { useDiagramContext, useDiagram, useDiagramSyncLayoutState } from '../../../hooks/useDiagram.js';
-import { LikeC4Search } from '../search/LikeC4Search.js';
 import { Tooltip, ActionIcon } from './_shared.js';
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton.js';
 import { LayoutDriftNotification } from './LayoutDriftNotification.js';
@@ -71,8 +71,7 @@ const ControlsDefaultLayout = ({
   }
 );
 const Controls = memo(() => {
-  const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext((c) => ({
-    viewId: c.view.id,
+  const { hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext((c) => ({
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,
     viewportChanged: c.viewportChangedManually,
     isNotActiveWalkthrough: c.activeWalkthrough === null
@@ -106,7 +105,15 @@ const Controls = memo(() => {
         }
       ),
       navigationButtons: enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}),
-      search: enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}),
+      search: enableSearch && /* @__PURE__ */ jsx(
+        SearchControl,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            diagram.openSearch();
+          }
+        }
+      ),
       syncInProgressBadge: /* @__PURE__ */ jsx(SyncLayoutBadge, {}),
       actionsGroup: /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
         enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
@@ -114,6 +121,7 @@ const Controls = memo(() => {
           {
             onClick: (e) => {
               e.stopPropagation();
+              const viewId = diagram.currentView.id;
               onOpenSource?.({ view: viewId });
             },
             children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -113,7 +113,7 @@ const ElementNotation = ({ value }) => {
 };
 const selector = (s) => ({
   id: s.view.id,
-  notations: s.view.notation?.elements ?? [],
+  notations: s.view.notation?.nodes ?? [],
   isVisible: true
   // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
 });

package/dist/likec4diagram/useViewToNodesEdges.d.ts

@@ -1,10 +1,12 @@
 import { DiagramView, WhereOperator } from '@likec4/core';
 import { Types } from './types';
-export declare function useViewToNodesEdges({ view: { id, nodes, edges, __, }, ...opts }: {
+type ViewToNodesEdgeInput = {
     view: DiagramView;
-    where: WhereOperator<string, string> | undefined;
+    where: WhereOperator | null;
     nodesSelectable: boolean;
-}): {
+};
+export declare function useViewToNodesEdges(params: ViewToNodesEdgeInput): {
     xynodes: Types.Node[];
     xyedges: Types.Edge[];
 };
+export {};

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -1,5 +1,6 @@
-import { Queue, whereOperatorAsPredicate, nonNullable, ElementKind, DiagramNode, invariant } from '@likec4/core';
-import { useDeepCompareMemo } from '@react-hookz/web';
+import { Queue, whereOperatorAsPredicate, nonNullable, GroupElementKind, invariant } from '@likec4/core';
+import { useCustomCompareMemo } from '@react-hookz/web';
+import { shallowEqual, deepEqual } from 'fast-equals';
 import { pick, hasAtLeast } from 'remeda';
 import { ZIndexes } from '../base/const.js';
 
@@ -8,7 +9,7 @@ function viewToNodesEdge(opts) {
     view,
     nodesSelectable: selectable
   } = opts;
-  view.__ === "dynamic"; const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
+  view._type === "dynamic"; const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
   const queue = Queue.from(view.nodes.reduce(
     (acc, node) => {
       nodeLookup.set(node.id, node);
@@ -37,7 +38,7 @@ function viewToNodesEdge(opts) {
   let next;
   while (next = queue.dequeue()) {
     const { node, parent } = next;
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group;
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind;
     if (isCompound) {
       for (const child of node.children) {
         queue.enqueue({ node: nodeById(child), parent: node });
@@ -54,8 +55,8 @@ function viewToNodesEdge(opts) {
     const id = ns + node.id;
     const base = {
       id,
-      selectable: selectable && node.kind !== ElementKind.Group,
-      focusable: selectable && node.kind !== ElementKind.Group,
+      selectable: selectable && node.kind !== GroupElementKind,
+      focusable: selectable && node.kind !== GroupElementKind,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -65,7 +66,7 @@ function viewToNodesEdge(opts) {
       },
       initialWidth: node.width,
       initialHeight: node.height,
-      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
+      hidden: node.kind !== GroupElementKind && !visiblePredicate(node),
       ...parent && {
         parentId: ns + parent.id
       }
@@ -79,6 +80,7 @@ function viewToNodesEdge(opts) {
       style: node.style,
       depth: node.depth ?? 0,
       icon: node.icon ?? "none",
+      tags: node.tags ?? null,
       position: node.position
     };
     const leafNodeData = {
@@ -94,10 +96,11 @@ function viewToNodesEdge(opts) {
       shape: node.shape,
       style: node.style,
       icon: node.icon ?? null,
+      tags: node.tags,
       position: node.position,
       isMultiple: node.style?.multiple ?? false
     };
-    if (node.kind === ElementKind.Group) {
+    if (node.kind === GroupElementKind) {
       xynodes.push({
         ...base,
         type: "view-group",
@@ -109,8 +112,8 @@ function viewToNodesEdge(opts) {
       });
       continue;
     }
-    const modelFqn = DiagramNode.modelRef(node);
-    const deploymentFqn = DiagramNode.deploymentRef(node);
+    const modelFqn = node.modelRef ?? null;
+    const deploymentFqn = node.deploymentRef ?? null;
     if (!modelFqn && !deploymentFqn) {
       console.error("Invalid node", node);
       throw new Error("Element should have either modelRef or deploymentRef");
@@ -221,26 +224,13 @@ function viewToNodesEdge(opts) {
     xyedges
   };
 }
-function useViewToNodesEdges({
-  view: {
-    id,
-    nodes,
-    edges,
-    __ = "element"
-  },
-  ...opts
-}) {
-  return useDeepCompareMemo(() => {
-    return viewToNodesEdge({
-      view: {
-        id,
-        nodes,
-        edges,
-        __
-      },
-      ...opts
-    });
-  }, [id, __, nodes, edges, opts]);
+const viewToNodesEdgeEqual = (a, b) => a.view.id === b.view.id && a.view._type === b.view._type && a.nodesSelectable === b.nodesSelectable && shallowEqual(a.view.nodes, b.view.nodes) && shallowEqual(a.view.edges, b.view.edges) && deepEqual(a.where, b.where);
+function useViewToNodesEdges(params) {
+  return useCustomCompareMemo(
+    () => viewToNodesEdge(params),
+    [params],
+    ([a], [b]) => !!a && !!b && viewToNodesEdgeEqual(a, b)
+  );
 }
 
 export { useViewToNodesEdges };

package/dist/likec4model/LikeC4ModelContext.d.ts

@@ -1,3 +1,3 @@
-import { AnyAux, LikeC4Model } from '@likec4/core/model';
+import { LikeC4Model } from '@likec4/core/model';
 import { Context } from 'react';
-export declare const LikeC4ModelContext: Context<LikeC4Model<AnyAux> | null>;
+export declare const LikeC4ModelContext: Context<LikeC4Model<any> | null>;

package/dist/likec4model/useLikeC4ElementsTree.js

@@ -11,7 +11,7 @@ function buildNode(element) {
   };
 }
 function useLikeC4ElementsTree(viewId) {
-  const model = useLikeC4Model(true);
+  const model = useLikeC4Model();
   return useMemo(() => {
     if (viewId) {
       const view = model.view(viewId);

package/dist/likec4model/useLikeC4Model.d.ts

@@ -1,10 +1,22 @@
-import { LikeC4Model } from '@likec4/core/model';
-export declare function useLikeC4Model(): LikeC4Model | null;
-export declare function useLikeC4Model(strict: true): LikeC4Model;
-export declare function useLikeC4Model(strict: boolean): LikeC4Model | null;
-export declare function useLikeC4Model(strict: true, type: 'layouted'): LikeC4Model.Layouted;
-export declare function useLikeC4Model(strict: true, type: 'computed'): LikeC4Model.Computed;
-export declare function useLikeC4Model(strict: true, type: 'layouted' | 'computed' | undefined): LikeC4Model;
-export declare function useLikeC4Model(strict: boolean, type: 'layouted'): LikeC4Model.Layouted | null;
-export declare function useLikeC4Model(strict: boolean, type: 'computed'): LikeC4Model.Computed | null;
-export declare function useLikeC4Model(strict: boolean, type: 'layouted' | 'computed' | undefined): LikeC4Model | null;
+import { aux, LikeC4Model } from '@likec4/core/model';
+import { TagSpecification, ElementSpecification, RelationshipSpecification, CustomColorDefinitions } from '@likec4/core';
+export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(): LikeC4Model<A>;
+export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted'): LikeC4Model.Layouted<A>;
+export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'computed'): LikeC4Model.Computed<A>;
+export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted' | 'computed' | undefined): LikeC4Model<A>;
+export declare function useLikeC4Specification(): {
+    tags: {
+        [x: string]: TagSpecification;
+    };
+    elements: {
+        [x: string]: Partial< ElementSpecification>;
+    };
+    deployments: {
+        [x: string]: Partial< ElementSpecification>;
+    };
+    relationships: {
+        [x: string]: Partial< RelationshipSpecification>;
+    };
+    metadataKeys?: string[];
+    customColors?: CustomColorDefinitions;
+};

package/dist/likec4model/useLikeC4Model.js

@@ -1,16 +1,20 @@
 import { useContext } from 'react';
-import { isString, isNonNullish, isDefined } from 'remeda';
+import { isString } from 'remeda';
 import { LikeC4ModelContext } from './LikeC4ModelContext.js';
 
-function useLikeC4Model(strict, type) {
+function useLikeC4Model(type) {
   const model = useContext(LikeC4ModelContext);
-  if (isString(type) && isNonNullish(model) && model.type !== type) {
-    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.type}" in context`);
-  }
-  if (isDefined(strict) && strict === true && !model) {
+  if (!model) {
     throw new Error("No LikeC4Model found in context");
   }
+  if (isString(type) && model.stage !== type) {
+    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`);
+  }
   return model;
 }
+function useLikeC4Specification() {
+  const model = useLikeC4Model();
+  return model.$data.specification;
+}
 
-export { useLikeC4Model };
+export { useLikeC4Model, useLikeC4Specification };

package/dist/overlays/Overlays.js

@@ -1,13 +1,12 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { nonexhaustive } from '@likec4/core';
-import { Box, Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
-import { IconX } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
 import { animate } from 'motion';
 import { useReducedMotionConfig, LayoutGroup, AnimatePresence } from 'motion/react';
 import { useMemo, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { isNonNullish } from 'remeda';
+import { ErrorFallback } from '../components/ErrorFallback.js';
 import { ElementDetails } from './element-details/ElementDetails.js';
 import { Overlay } from './overlay/Overlay.js';
 import { RelationshipDetails } from './relationship-details/RelationshipDetails.js';
@@ -15,28 +14,6 @@ import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrows
 import { useXYStore } from '../hooks/useXYFlow.js';
 import { DiagramFeatures } from '../context/DiagramFeatures.js';
 
-function Fallback({ error, resetErrorBoundary }) {
-  const errorString = error instanceof Error ? error.message : "Unknown error";
-  return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: 0, left: 0, w: "100%", p: 0, style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
-    Notification,
-    {
-      icon: /* @__PURE__ */ jsx(IconX, { style: { width: 16, height: 16 } }),
-      styles: {
-        icon: {
-          alignSelf: "flex-start"
-        }
-      },
-      color: "red",
-      title: "Oops, something went wrong",
-      p: "xl",
-      withCloseButton: false,
-      children: [
-        /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: "100%", mah: 400, children: /* @__PURE__ */ jsx(Code, { block: true, children: errorString }) }),
-        /* @__PURE__ */ jsx(Group, { gap: "xs", mt: "xl", children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "xs", variant: "light", onClick: () => resetErrorBoundary(), children: "Reset" }) })
-      ]
-    }
-  ) });
-}
 const selectOverlays = (s) => {
   return s.context.overlays.map((overlay) => {
     switch (overlay.type) {
@@ -72,7 +49,7 @@ function Overlays({ overlaysActorRef }) {
   ]);
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
   const isMotionReduced = useReducedMotionConfig() ?? false;
-  const isActiveOverlay = overlays.length > 0;
+  const isActiveOverlay = overlays.some((overlay) => overlay.type === "elementDetails");
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return;
     animate(xyflowRendererDom, {
@@ -121,7 +98,7 @@ function Overlays({ overlaysActorRef }) {
         nonexhaustive(overlay);
     }
   });
-  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
 }
 
 export { Overlays };

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

@@ -1,4 +1,4 @@
-import { Fqn, NodeId, ViewId } from '@likec4/core';
+import { Fqn, NodeId, ViewId } from '@likec4/core/types';
 import { Rect } from '@xyflow/system';
 type ElementDetailsCardProps = {
     viewId: ViewId;

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;