@likec4/diagram 1.31.0 → 1.32.1

package/dist/base/primitives/element/ElementTags.js

@@ -0,0 +1,176 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isTagColorSpecified } from '@likec4/core';
+import { cx, css } from '@likec4/styles/css';
+import { Box, HStack } from '@likec4/styles/jsx';
+import { hstack } from '@likec4/styles/patterns';
+import { likec4tag } from '@likec4/styles/recipes';
+import { HoverCard } from '@mantine/core';
+import { deepEqual } from 'fast-equals';
+import { memo, useCallback, forwardRef } from 'react';
+import { useTagSpecification } from '../../../context/TagStylesContext.js';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
+import { useCurrentZoom } from '../../../hooks/useXYFlow.js';
+import { stopPropagation } from '../../../utils/xyflow.js';
+
+const ElementTag = forwardRef(
+  ({ tag, className, ...props }, ref) => {
+    const spec = useTagSpecification(tag);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        "data-likec4-tag": tag,
+        className: cx(
+          likec4tag({
+            autoTextColor: isTagColorSpecified(spec)
+          }),
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { opacity: 0.7, fontSize: "1.05em" }, children: "#" }),
+          /* @__PURE__ */ jsx("span", { children: tag })
+        ]
+      }
+    );
+  }
+);
+const propsAreEqual = (prev, next) => {
+  return prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags);
+};
+const ElementTags = memo(({ id, data: { tags, width } }) => {
+  const zoom = useCurrentZoom();
+  const zoomIsLargeEnough = zoom > 1.2;
+  const portalProps = useMantinePortalProps();
+  if (!tags || tags.length === 0) {
+    return null;
+  }
+  const maxWidth = Math.max(Math.round(width * zoom) - 10, 200);
+  return /* @__PURE__ */ jsxs(
+    HoverCard,
+    {
+      ...portalProps,
+      floatingStrategy: "fixed",
+      position: "bottom-start",
+      offset: {
+        alignmentAxis: Math.round(4 * zoom),
+        mainAxis: 8
+      },
+      keepMounted: false,
+      openDelay: 300,
+      closeDelay: 500,
+      children: [
+        /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "likec4-element-tags",
+              hstack({
+                pointerEvents: "all",
+                gap: 4,
+                alignItems: "flex-end",
+                justifyItems: "stretch",
+                position: "absolute",
+                width: "100%",
+                bottom: 0,
+                left: 0,
+                padding: 4,
+                _shapeCylinder: {
+                  bottom: 5
+                },
+                _shapeStorage: {
+                  bottom: 5
+                },
+                _shapeQueue: {
+                  bottom: 0,
+                  paddingLeft: 14
+                }
+              })
+            ),
+            onClick: stopPropagation,
+            children: tags.map((tag) => /* @__PURE__ */ jsx(
+              Box,
+              {
+                "data-likec4-tag": tag,
+                className: css({
+                  layerStyle: "likec4.tag",
+                  flex: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  maxWidth: 50,
+                  height: 5,
+                  _whenHovered: {
+                    height: 12,
+                    borderRadius: 4,
+                    transitionDelay: ".08s"
+                  },
+                  transition: "fast"
+                })
+              },
+              id + "#" + tag
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          HoverCard.Dropdown,
+          {
+            p: 0,
+            w: "auto",
+            maw: maxWidth,
+            className: css({
+              background: "transparent",
+              border: "none"
+            }),
+            children: /* @__PURE__ */ jsx(ElementTagsDropdown, { tags, zoomIsLargeEnough })
+          }
+        )
+      ]
+    }
+  );
+}, propsAreEqual);
+ElementTags.displayName = "ElementTags";
+function ElementTagsDropdown({ tags, zoomIsLargeEnough }) {
+  const diagram = useDiagram();
+  const onHover = (tag) => {
+    diagram.send({ type: "tag.highlight", tag });
+  };
+  const onLeave = useCallback(() => {
+    diagram.send({ type: "tag.unhighlight" });
+  }, []);
+  return /* @__PURE__ */ jsx(
+    HStack,
+    {
+      css: {
+        gap: 4,
+        flexWrap: "wrap",
+        pb: "sm"
+      },
+      children: tags.map((tag) => /* @__PURE__ */ jsx(
+        ElementTag,
+        {
+          tag,
+          className: css({
+            userSelect: "none",
+            cursor: "pointer",
+            ...zoomIsLargeEnough && {
+              fontSize: "lg",
+              borderRadius: 4,
+              px: 6
+            }
+          }),
+          onClick: (e) => {
+            e.stopPropagation();
+            diagram.openSearch(`#${tag}`);
+          },
+          onMouseEnter: () => onHover(tag),
+          onMouseLeave: onLeave
+        },
+        tag
+      ))
+    }
+  );
+}
+
+export { ElementTag, ElementTags };

package/dist/base/primitives/element/ElementTitle.d.ts

@@ -1,8 +1,9 @@
-import { DiagramNode } from '@likec4/core';
-import { NodeProps } from '../../types';
-type Data = Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'style'> & {
+import { DiagramNode } from '@likec4/core/types';
+import { Simplify } from 'type-fest';
+import { NodeProps, NonOptional } from '../../types';
+type Data = Simplify<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'style'>> & {
     icon?: string | null;
-};
+}>;
 type ElementTitleProps = NodeProps<Data> & {
     iconSize?: number;
 };

package/dist/base/primitives/element/ElementTitle.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { Box, Text } from '@mantine/core';
+import { Box } from '@likec4/styles/jsx';
+import { Text } from '@mantine/core';
 import { isTruthy, isEmpty, isNumber } from 'remeda';
 import { IconRenderer } from '../../../context/IconRenderer.js';
 import { nodeSizes } from './ElementNodeContainer.js';
@@ -30,11 +31,10 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
         classes.root,
         "likec4-element"
       ),
-      style: {
-        ...isNumber(iconSize$1) && {
-          [iconSize]: `${iconSize$1}px`
-        }
-      },
+      style: isNumber(iconSize$1) ? {
+        // @ts-ignore
+        [iconSize]: `${iconSize$1}px`
+      } : void 0,
       children: [
         elementIcon$1,
         /* @__PURE__ */ jsxs(Box, { className: cx(classes.textContainer, "likec4-element-main-props"), children: [

package/dist/base/primitives/index.d.ts

@@ -14,5 +14,6 @@ export { ElementActionButtons } from './element/ElementActionButtons';
 export { ElementDetailsButton } from './element/ElementDetailsButton';
 export { ElementNodeContainer } from './element/ElementNodeContainer';
 export { ElementShape } from './element/ElementShape';
+export { ElementTag, ElementTags } from './element/ElementTags';
 export { ElementTitle } from './element/ElementTitle';
 export { DefaultHandles } from './NodeHandles';

package/dist/base/types.Base.d.ts

@@ -0,0 +1,54 @@
+import { Edge as RFEdge, Node as RFNode, NodeProps as ReactFlowNodeProps } from '@xyflow/react';
+import { Simplify } from 'type-fest';
+export type Dimmed = 'immediate' | boolean;
+export type NodeData = {
+    /**
+     * Whether the cursor is hovering over the node
+     */
+    hovered?: boolean;
+    /**
+     * Whether the node is dimmed
+     * 'immediate' means that the node is dimmed without delay
+     */
+    dimmed?: Dimmed;
+};
+export type Node = RFNode<NodeData>;
+export type NodeProps = ReactFlowNodeProps<RFNode<NodeData, any>>;
+export type EdgeData = {
+    /**
+     * Whether the cursor is hovering over the edge
+     */
+    hovered?: boolean;
+    /**
+     * Whether the edge is active (animated and highlighted)
+     */
+    active?: boolean;
+    /**
+     * Whether the edge is dimmed
+     * 'immediate' means that the edge is dimmed without delay
+     */
+    dimmed?: Dimmed;
+};
+export type Edge = Simplify<Omit<RFEdge, 'data'> & {
+    data: EdgeData;
+}>;
+type WithDimmed = {
+    data: {
+        dimmed?: Dimmed;
+    };
+};
+type WithHovered = {
+    data: {
+        hovered?: boolean;
+    };
+};
+export declare function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
+export declare function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
+export declare function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
+export declare function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
+type WithData<D> = {
+    data: D;
+};
+export declare function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
+export declare function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
+export {};

package/dist/base/types.Base.js

@@ -0,0 +1,48 @@
+import { hasSubObject } from 'remeda';
+
+const _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : {
+  ...v,
+  data: {
+    ...v.data,
+    dimmed
+  }
+};
+function setDimmed(arg1, arg2) {
+  if (arg2 !== void 0) {
+    return _setDimmed(arg1, arg2);
+  }
+  return (v) => _setDimmed(v, arg1);
+}
+const _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : {
+  ...v,
+  data: {
+    ...v.data,
+    hovered
+  }
+};
+function setHovered(arg1, arg2) {
+  if (arg2 !== void 0) {
+    return _setHovered(arg1, arg2);
+  }
+  return (v) => _setHovered(v, arg1);
+}
+function _setData(value, state) {
+  if (hasSubObject(value.data, state)) {
+    return value;
+  }
+  return {
+    ...value,
+    data: {
+      ...value.data,
+      ...state
+    }
+  };
+}
+function setData(arg1, arg2) {
+  if (arg2 !== void 0) {
+    return _setData(arg1, arg2);
+  }
+  return (edge) => _setData(edge, arg1);
+}
+
+export { setData, setDimmed, setHovered };

package/dist/base/types.d.ts

@@ -1,5 +1,6 @@
 import { Edge as RFEdge, EdgeProps as ReactFlowEdgeProps, Node as RFNode, NodeProps as ReactFlowNodeProps } from '@xyflow/react';
 import { OptionalKeysOf, SetRequired, Simplify } from 'type-fest';
+import * as Base from './types.Base';
 /**
 
 To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
@@ -36,55 +37,4 @@ export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends s
 export type EdgeProps<T extends Record<string, unknown> = {}> = SetRequired<ReactFlowEdgeProps<RFEdge<Base.EdgeData & T, any>>, 'data'>;
 export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<RFNode<Data, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>;
 export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<RFEdge<Data, EdgeType>, 'type' | 'data'>;
-export declare namespace Base {
-    export type Dimmed = 'immediate' | boolean;
-    export type NodeData = {
-        /**
-         * Whether the cursor is hovering over the node
-         */
-        hovered?: boolean;
-        /**
-         * Whether the node is dimmed
-         * 'immediate' means that the node is dimmed without delay
-         */
-        dimmed?: Dimmed;
-    };
-    export type Node = RFNode<NodeData>;
-    export type NodeProps = ReactFlowNodeProps<RFNode<Base.NodeData, any>>;
-    export type EdgeData = {
-        /**
-         * Whether the cursor is hovering over the edge
-         */
-        hovered?: boolean;
-        /**
-         * Whether the edge is active (animated and highlighted)
-         */
-        active?: boolean;
-        /**
-         * Whether the edge is dimmed
-         * 'immediate' means that the edge is dimmed without delay
-         */
-        dimmed?: Dimmed;
-    };
-    export type Edge = SetRequired<RFEdge<EdgeData>, 'data'>;
-    type WithDimmed = {
-        data: {
-            dimmed?: Dimmed;
-        };
-    };
-    type WithHovered = {
-        data: {
-            hovered?: boolean;
-        };
-    };
-    export function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
-    export function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
-    export function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
-    export function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
-    type WithData<D> = {
-        data: D;
-    };
-    export function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
-    export function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
-    export {};
-}
+export * as Base from './types.Base';

package/dist/bundle/LikeC4View.d.ts

@@ -1,2 +1,3 @@
 import { LikeC4ViewProps } from './LikeC4View.props';
-export declare function LikeC4View<ViewId extends string = string, Tag = string, Kind = string>({ viewId, ...props }: LikeC4ViewProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+import type * as aux from '@likec4/core/types/aux';
+export declare function LikeC4View<A extends aux.Any = aux.UnknownLayouted>({ viewId, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/bundle/LikeC4View.js

@@ -1,33 +1,34 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { memo, useState } from 'react';
-import { ShadowRoot } from './ShadowRoot.js';
 import { cx } from '@likec4/styles/css';
 import { Box, ActionIcon } from '@mantine/core';
 import { shallowEqual } from '@mantine/hooks';
 import { IconX } from '@tabler/icons-react';
+import { memo, useState } from 'react';
 import { isBoolean } from 'remeda';
 import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
 import { LikeC4Diagram } from '../LikeC4Diagram.js';
 import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
 import { Overlay } from '../overlays/overlay/Overlay.js';
+import { ShadowRoot } from './ShadowRoot.js';
 import { useColorScheme, useShadowRootStyle, cssInteractive } from './styles.css.js';
-import { ErrorMessage, ViewNotFound } from './ViewNotFound.js';
+import { ViewNotFound, ErrorMessage } from './ViewNotFound.js';
 
 function LikeC4View({
   viewId,
   ...props
 }) {
   const likec4model = useLikeC4Model();
-  const view = likec4model?.findView(viewId);
-  if (!likec4model) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider." });
-  }
-  if (likec4model.type !== "layouted") {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model." });
-  }
-  if (!view || !view.isDiagram()) {
+  const view = likec4model.findView(viewId);
+  if (!view) {
     return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
   }
+  if (!view.isDiagram()) {
+    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+      'LikeC4 View "$',
+      viewId,
+      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
+    ] });
+  }
   return /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props });
 }
 const LikeC4ViewInner = memo(({
@@ -40,7 +41,7 @@ const LikeC4ViewInner = memo(({
   injectFontCss = true,
   controls = false,
   fitView = true,
-  fitViewPadding = "8px",
+  fitViewPadding = "16px",
   background = "transparent",
   browser = true,
   showDiagramTitle = false,
@@ -59,12 +60,12 @@ const LikeC4ViewInner = memo(({
   renderNodes,
   ...props
 }) => {
-  const likec4model = useLikeC4Model(true, "layouted");
+  const likec4model = useLikeC4Model("layouted");
   const colorScheme = useColorScheme(explicitColorScheme);
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view);
   const [browserViewId, onNavigateTo] = useState(null);
   const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
-  const notations = view.notation?.elements ?? [];
+  const notations = view.notation?.nodes ?? [];
   const hasNotations = notations.length > 0;
   let nonce;
   if (typeof styleNonce === "string") {
@@ -118,6 +119,7 @@ const LikeC4ViewInner = memo(({
               enableRelationshipDetails,
               enableElementDetails,
               enableRelationshipBrowser,
+              enableElementTags: false,
               controls,
               nodesDraggable: false,
               reduceGraphics,
@@ -133,27 +135,28 @@ const LikeC4ViewInner = memo(({
               ...props
             }
           ),
-          browserView && /* @__PURE__ */ jsxs(Overlay, { onClose: () => onNavigateTo(null), children: [
+          browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: () => onNavigateTo(null), children: [
             /* @__PURE__ */ jsx(
               LikeC4Diagram,
               {
                 view: browserView,
                 background: "dots",
-                onNavigateTo: (to) => onNavigateTo(to),
+                onNavigateTo,
                 enableDynamicViewWalkthrough: true,
                 enableFocusMode: true,
                 enableRelationshipBrowser: true,
                 enableElementDetails: true,
                 enableRelationshipDetails: true,
                 enableSearch: true,
+                enableElementTags: true,
                 controls: true,
                 readonly: true,
                 fitView: true,
-                fitViewPadding: "16px",
-                renderNodes,
+                fitViewPadding: "32px",
                 ...props,
                 ...browserProps,
-                showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.elements.length ?? 0) > 0
+                showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.nodes.length ?? 0) > 0,
+                renderNodes
               }
             ),
             /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(

package/dist/bundle/LikeC4View.props.d.ts

@@ -1,11 +1,12 @@
-import { WhereOperator } from '@likec4/core';
+import { WhereOperator } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props';
-export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
+import type * as aux from '@likec4/core/types/aux';
+export interface LikeC4ViewProps<A extends aux.Any> {
     /**
      * View to display.
      */
-    viewId: ViewId;
+    viewId: aux.ViewId<A>;
     /**
      * Enable/disable panning
      * @default false
@@ -92,6 +93,11 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
      * @default false
      */
     enableElementDetails?: boolean | undefined;
+    /**
+     * Display element tags in the bottom left corner
+     * @default false
+     */
+    enableElementTags?: boolean | undefined;
     /**
      * Experimental feature to browse relationships
      *
@@ -109,7 +115,7 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
      * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
      */
     reduceGraphics?: 'auto' | boolean | undefined;
-    where?: WhereOperator<Tag, Kind> | undefined;
+    where?: WhereOperator<A> | undefined;
     /**
      * Override some react flow props
      */
@@ -191,6 +197,11 @@ export interface LikeC4BrowserProps {
      * @default enableRelationshipBrowser
      */
     enableRelationshipDetails?: boolean | undefined;
+    /**
+     * Display element tags in the bottom left corner
+     * @default true
+     */
+    enableElementTags?: boolean | undefined;
     /**
      * Display notations of the view
      * @default true

package/dist/bundle/ReactLikeC4.d.ts

@@ -1,9 +1,8 @@
-import { WhereOperator } from '@likec4/core';
 import { CSSProperties } from 'react';
 import { LikeC4DiagramProps } from '../LikeC4Diagram';
-import { OnNavigateTo } from '../LikeC4Diagram.props';
-export type ReactLikeC4Props<ViewId = string, Tag = string, Kind = string> = Omit<LikeC4DiagramProps, 'view' | 'where' | 'onNavigateTo'> & {
-    viewId: ViewId;
+import type * as aux from '@likec4/core/types/aux';
+export type ReactLikeC4Props<A extends aux.Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
+    viewId: aux.ViewId<A>;
     /**
      * Keep aspect ratio of the diagram
      * Disable if you need to manage the viewport (use className)
@@ -24,13 +23,11 @@ export type ReactLikeC4Props<ViewId = string, Tag = string, Kind = string> = Omi
      */
     injectFontCss?: boolean | undefined;
     style?: CSSProperties | undefined;
-    where?: WhereOperator<Tag, Kind> | undefined;
-    onNavigateTo?: OnNavigateTo<ViewId> | undefined;
     mantineTheme?: any;
     /** Function to generate nonce attribute added to all generated `<style />` tags */
     styleNonce?: string | (() => string) | undefined;
 };
-export declare function ReactLikeC4<ViewId extends string = string, Tag = string, Kind = string>({ viewId, ...props }: ReactLikeC4Props<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+export declare function ReactLikeC4<A extends aux.Any = aux.UnknownLayouted>({ viewId, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ReactLikeC4 {
     var displayName: string;
 }

package/dist/bundle/ReactLikeC4.js

@@ -1,26 +1,27 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ShadowRoot } from './ShadowRoot.js';
 import { cx } from '@likec4/styles/css';
 import { isString, isFunction } from 'remeda';
 import { LikeC4Diagram } from '../LikeC4Diagram.js';
 import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+import { ShadowRoot } from './ShadowRoot.js';
 import { useColorScheme, useShadowRootStyle } from './styles.css.js';
-import { ErrorMessage, ViewNotFound } from './ViewNotFound.js';
+import { ViewNotFound, ErrorMessage } from './ViewNotFound.js';
 
 function ReactLikeC4({
   viewId,
   ...props
 }) {
   const likec4model = useLikeC4Model();
-  const view = likec4model?.findView(viewId);
-  if (!likec4model) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider." });
-  }
+  const view = likec4model.findView(viewId);
   if (!view) {
     return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
   }
   if (!view.isDiagram()) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model." });
+    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+      'LikeC4 View "$',
+      viewId,
+      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
+    ] });
   }
   return /* @__PURE__ */ jsx(ReactLikeC4Inner, { view: view.$view, ...props });
 }
@@ -40,7 +41,7 @@ function ReactLikeC4Inner({
 }) {
   const colorScheme = useColorScheme(explicitColorScheme);
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view);
-  const notations = view.notation?.elements ?? [];
+  const notations = view.notation?.nodes ?? [];
   const hasNotations = notations.length > 0;
   let nonce;
   if (isString(styleNonce)) {
@@ -77,6 +78,7 @@ function ReactLikeC4Inner({
             showNotations: showNotations && hasNotations,
             onNavigateTo,
             background,
+            enableElementTags: false,
             ...props
           }
         )

package/dist/bundle/index.js

@@ -7,7 +7,7 @@ export { useEnabledFeatures } from '../context/DiagramFeatures.js';
 export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
-export { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 export { useSetState } from '../hooks/useSetState.js';
 export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/components/ErrorFallback.d.ts

@@ -0,0 +1,2 @@
+import { FallbackProps } from 'react-error-boundary';
+export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): import("react/jsx-runtime").JSX.Element;