@likec4/diagram 1.30.0 → 1.32.0

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`
@@ -29,62 +30,11 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 /**
  * ReactFlow Custom Node properties with BaseNodeData at least
  */
-export type NodeProps<T extends Record<string, unknown> = {}> = ReactFlowNodeProps<RFNode<Base.NodeData & T, any>>;
+export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = ReactFlowNodeProps<RFNode<Base.NodeData & T, NodeType>>;
 /**
  * ReactFlow Custom Edge properties with BaseEdgeData at least
  */
 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<Data extends Record<string, unknown> = {}> = Simplify<Data & {
-        /**
-         * 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<Data extends Record<string, unknown> = {}> = Simplify<Data & {
-        /**
-         * 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,15 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { r as reactExports } from '../_virtual/index.js';
-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';
 
@@ -22,7 +22,7 @@ function LikeC4View({
   if (!likec4model) {
     return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider." });
   }
-  if (likec4model.type !== "layouted") {
+  if (likec4model.stage !== "layouted") {
     return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model." });
   }
   if (!view || !view.isDiagram()) {
@@ -30,7 +30,7 @@ function LikeC4View({
   }
   return /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props });
 }
-const LikeC4ViewInner = reactExports.memo(({
+const LikeC4ViewInner = memo(({
   view,
   className,
   pannable = false,
@@ -56,14 +56,15 @@ const LikeC4ViewInner = reactExports.memo(({
   styleNonce,
   style,
   reactFlowProps = {},
+  renderNodes,
   ...props
 }) => {
-  const likec4model = useLikeC4Model(true, "layouted");
+  const likec4model = useLikeC4Model("layouted");
   const colorScheme = useColorScheme(explicitColorScheme);
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view);
-  const [browserViewId, onNavigateTo] = reactExports.useState(null);
+  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") {
@@ -117,6 +118,7 @@ const LikeC4ViewInner = reactExports.memo(({
               enableRelationshipDetails,
               enableElementDetails,
               enableRelationshipBrowser,
+              enableElementTags: false,
               controls,
               nodesDraggable: false,
               reduceGraphics,
@@ -128,6 +130,7 @@ const LikeC4ViewInner = reactExports.memo(({
                 onNodeClick: () => onNavigateTo(view.id)
               },
               reactFlowProps,
+              renderNodes,
               ...props
             }
           ),
@@ -144,13 +147,15 @@ const LikeC4ViewInner = reactExports.memo(({
                 enableElementDetails: true,
                 enableRelationshipDetails: true,
                 enableSearch: true,
+                enableElementTags: true,
                 controls: true,
                 readonly: true,
                 fitView: true,
                 fitViewPadding: "16px",
+                renderNodes,
                 ...props,
                 ...browserProps,
-                showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.elements.length ?? 0) > 0
+                showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.nodes.length ?? 0) > 0
               }
             ),
             /* @__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 { ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props';
-export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
+import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props';
+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
      */
@@ -122,6 +128,10 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
     mantineTheme?: any;
     /** Function to generate nonce attribute added to all generated `<style />` tags */
     styleNonce?: string | (() => string) | undefined;
+    /**
+     * Override node renderers
+     */
+    renderNodes?: CustomNodes | undefined;
     /**
      * Render custom icon for a node
      * By default, if icon is http:// or https://, it will be rendered as an image
@@ -187,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,10 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import '../_virtual/index.js';
-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';
 
@@ -41,7 +40,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)) {
@@ -78,6 +77,7 @@ function ReactLikeC4Inner({
             showNotations: showNotations && hasNotations,
             onNavigateTo,
             background,
+            enableElementTags: false,
             ...props
           }
         )
@@ -85,6 +85,6 @@ function ReactLikeC4Inner({
     )
   ] });
 }
-ReactLikeC4.displayName = "GenericReactLikeC4";
+ReactLikeC4.displayName = "ReactLikeC4";
 
 export { ReactLikeC4 };

package/dist/bundle/ShadowRoot.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { MantineProvider } from '@mantine/core';
-import { r as reactExports } from '../_virtual/index.js';
+import { useRef, useCallback } from 'react';
 import root from 'react-shadow';
 import { isDefined } from 'remeda';
 import { useBundledStyleSheet, DefaultTheme } from './styles.css.js';
@@ -15,9 +15,9 @@ function ShadowRoot({
   colorScheme,
   ...props
 }) {
-  const rootRef = reactExports.useRef(null);
+  const rootRef = useRef(null);
   const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
-  const getRootElement = reactExports.useCallback(() => rootRef.current ?? void 0, [rootRef]);
+  const getRootElement = useCallback(() => rootRef.current ?? void 0, [rootRef]);
   let getStyleNonce;
   if (isDefined(styleNonce)) {
     getStyleNonce = typeof styleNonce === "function" ? styleNonce : () => styleNonce;

package/dist/bundle/custom.d.ts

@@ -0,0 +1 @@
+export * from '../custom';

package/dist/bundle/index.d.ts

@@ -1,5 +1,7 @@
+export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, WhereOperator, } from '../LikeC4Diagram.props';
 export { LikeC4View } from './LikeC4View';
-export type { LikeC4ViewProps } from './LikeC4View.props';
+export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View.props';
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider';
 export { ViewNotFound } from './ViewNotFound';
+export * from '../custom/hooks';

package/dist/bundle/index.js

@@ -2,3 +2,12 @@ export { LikeC4View } from './LikeC4View.js';
 export { ReactLikeC4 } from './ReactLikeC4.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
 export { ViewNotFound } from './ViewNotFound.js';
+export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
+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, useLikeC4Specification } from '../likec4model/useLikeC4Model.js';
+export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
+export { useSetState } from '../hooks/useSetState.js';
+export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/bundle/styles.css.js

@@ -2,10 +2,10 @@ import { css } from '@likec4/styles/css';
 import { createTheme, Portal } from '@mantine/core';
 import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback, useId } from '@mantine/hooks';
 import { useIsomorphicLayoutEffect } from '@react-hookz/web';
-import { r as reactExports } from '../_virtual/index.js';
+import { useState } from 'react';
 import { first, isString, isFunction } from 'remeda';
-import inlinedStyles from '../styles.css.js';
-import fontsCss from './font.css.js';
+import fontsCss from '../styles-font.css2.js';
+import inlinedStyles from '../styles.css2.js';
 
 const DefaultTheme = createTheme({
   autoContrast: true,
@@ -42,7 +42,7 @@ const cssInteractive = css({
   }
 });
 function useBundledStyleSheet(injectFontCss, styleNonce) {
-  const [styleSheets, setStyleSheets] = reactExports.useState([]);
+  const [styleSheets, setStyleSheets] = useState([]);
   useIsomorphicLayoutEffect(() => {
     if (injectFontCss && !document.querySelector(`style[data-likec4-font]`)) {
       const style = document.createElement("style");
@@ -83,7 +83,7 @@ const getComputedColorScheme = () => {
 };
 function useColorScheme(explicit) {
   const preferred = useColorScheme$1();
-  const [computed, setComputed] = reactExports.useState(getComputedColorScheme);
+  const [computed, setComputed] = useState(getComputedColorScheme);
   useMutationObserver(
     useDebouncedCallback(() => setComputed(getComputedColorScheme), 100),
     {

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;

package/dist/components/ErrorFallback.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box } from '@likec4/styles/jsx';
+import { Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
+
+function ErrorFallback({ 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" }) })
+      ]
+    }
+  ) });
+}
+
+export { ErrorFallback };

package/dist/components/SearchControl.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { UnstyledButton, Group, Text } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import { isMacOs } from '@xyflow/system';
-import clsx from 'clsx';
 import { placeholder, shortcut, root } from './SearchControl.css.js';
 
 function SearchControl({ className, ...others }) {
   const isMac = isMacOs();
-  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: clsx("group", root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: cx("group", root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
     /* @__PURE__ */ jsx(IconSearch, { style: { width: "15px", height: "15px" }, stroke: 2 }),
     /* @__PURE__ */ jsx(Text, { component: "div", className: placeholder, children: "Search" }),
     /* @__PURE__ */ jsx(Text, { component: "div", className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })

package/dist/context/ControlsCustomLayout.js

@@ -1,5 +1,4 @@
 import { createOptionalContext } from '@mantine/core';
-import '../_virtual/index.js';
 
 const [
   ControlsCustomLayoutProvider,

package/dist/context/DiagramEventHandlers.d.ts

@@ -1,14 +1,15 @@
+import { Any } from '@likec4/core/types';
 import { PropsWithChildren, RefObject } from 'react';
 import { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
 type RequiredOrNull<T> = {
     [P in keyof T]-?: NonNullable<T[P]> | null;
 };
-type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers> & {
-    handlersRef: RefObject<LikeC4DiagramEventHandlers>;
+type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers<Any>> & {
+    handlersRef: RefObject<LikeC4DiagramEventHandlers<Any>>;
 };
-export declare function DiagramEventHandlers({ handlers, children, }: PropsWithChildren<{
-    handlers: LikeC4DiagramEventHandlers;
+export declare function DiagramEventHandlers<A extends Any>({ handlers, children, }: PropsWithChildren<{
+    handlers: LikeC4DiagramEventHandlers<A>;
 }>): import("react/jsx-runtime").JSX.Element;
 export declare function useDiagramEventHandlers(): DiagramEventHandlersContextValue;
-export declare function useDiagramEventHandlersRef(): RefObject<LikeC4DiagramEventHandlers>;
+export declare function useDiagramEventHandlersRef(): RefObject<LikeC4DiagramEventHandlers<Any>>;
 export {};

package/dist/context/DiagramEventHandlers.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useSyncedRef } from '@react-hookz/web';
-import { r as reactExports } from '../_virtual/index.js';
+import { useContext, createContext, useMemo } from 'react';
 import { isFunction, mapToObj } from 'remeda';
 
 const HandlerNames = [
@@ -16,7 +16,7 @@ const HandlerNames = [
   "onChange",
   "onCanvasDblClick"
 ];
-const DiagramEventHandlersContext = reactExports.createContext({
+const DiagramEventHandlersContext = createContext({
   ...mapToObj(HandlerNames, (name) => [name, null]),
   handlersRef: {
     current: {}
@@ -28,7 +28,7 @@ function DiagramEventHandlers({
 }) {
   const handlersRef = useSyncedRef(handlers);
   const deps = HandlerNames.map((name) => isFunction(handlers[name]));
-  const value = reactExports.useMemo(() => ({
+  const value = useMemo(() => ({
     ...mapToObj(HandlerNames, (name) => {
       if (handlersRef.current[name]) {
         return [name, (...args) => handlersRef.current[name]?.(...args)];
@@ -40,10 +40,10 @@ function DiagramEventHandlers({
   return /* @__PURE__ */ jsx(DiagramEventHandlersContext.Provider, { value, children });
 }
 function useDiagramEventHandlers() {
-  return reactExports.useContext(DiagramEventHandlersContext);
+  return useContext(DiagramEventHandlersContext);
 }
 function useDiagramEventHandlersRef() {
-  return reactExports.useContext(DiagramEventHandlersContext).handlersRef;
+  return useContext(DiagramEventHandlersContext).handlersRef;
 }
 
 export { DiagramEventHandlers, useDiagramEventHandlers, useDiagramEventHandlersRef };

package/dist/context/DiagramFeatures.d.ts

@@ -1,6 +1,6 @@
-import { ExclusiveUnion, NonEmptyArray } from '@likec4/core';
+import { ExclusiveUnion } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "ViewTitle", "FitView", "LikeC4Model", "Vscode"];
+declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "ViewTitle", "FitView", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
 export type EnabledFeatures = {
     [P in `enable${FeatureName}`]: boolean;
@@ -17,9 +17,6 @@ export declare function DiagramFeatures({ children, features, overrides, }: Prop
 export declare namespace DiagramFeatures {
     var Overlays: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 }
-export declare function useEnabledFeature<F extends NonEmptyArray<FeatureName>>(...names: F): {
-    [P in `enable${F[number]}`]: boolean;
-};
 export declare function useEnabledFeatures(): EnabledFeatures;
 export declare function IfEnabled({ feature, children, and, }: PropsWithChildren<{
     feature: FeatureName;
@@ -28,4 +25,5 @@ export declare function IfEnabled({ feature, children, and, }: PropsWithChildren
 export declare function IfNotEnabled({ feature, children, }: PropsWithChildren<{
     feature: FeatureName;
 }>): import("react/jsx-runtime").JSX.Element | null;
+export declare function IfNotReadOnly({ children, }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
 export {};