@likec4/diagram 1.44.0 → 1.46.0

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -6,9 +6,9 @@ import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
 const selectSubject = (state) => state.context.subject;

package/dist/overlays/relationships-browser/layout.d.ts

@@ -1,5 +1,5 @@
 import { RelationshipsViewData } from '@likec4/core/compute-view/relationships';
-import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, MarkdownOrString, ViewId } from '@likec4/core/types';
 import { LikeC4ViewModel } from '@likec4/core/model';
 import { RelationshipsBrowserTypes } from './_types';
 export type LayoutRelationshipsViewResult = {
@@ -12,7 +12,7 @@ export type LayoutRelationshipsViewResult = {
 export declare namespace LayoutRelationshipsViewResult {
     const Empty: ElementKind;
     type Node = Omit<DiagramNode, 'deploymentRef' | 'description' | 'inEdges' | 'outEdges'> & {
-        description: RichTextOrEmpty;
+        description: MarkdownOrString | null;
         column: RelationshipsBrowserTypes.Column;
         ports: RelationshipsBrowserTypes.Ports;
         existsInCurrentView: boolean;

package/dist/overlays/relationships-browser/layout.js

@@ -1,7 +1,7 @@
 import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view/relationships';
 import { useMemo } from 'react';
 import dagre from '@dagrejs/dagre';
-import { RichText, exact } from '@likec4/core/types';
+import { preferSummary, exact } from '@likec4/core/types';
 import { toArray, invariant, ifind, nonNullable, DefaultMap } from '@likec4/core/utils';
 import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, omit, find, only, unique, tap, reduce, sortBy } from 'remeda';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
@@ -329,7 +329,7 @@ function layoutRelationshipsView(data, scope) {
         x: position.x,
         y: position.y,
         title: "empty node",
-        description: RichText.EMPTY,
+        description: null,
         technology: null,
         tags: [],
         links: [],
@@ -372,7 +372,7 @@ function layoutRelationshipsView(data, scope) {
       x: position.x,
       y: position.y,
       title: element.title,
-      description: element.summary,
+      description: preferSummary(element.$element) ?? null,
       technology: element.technology,
       tags: [...element.tags],
       links: null,

package/dist/overlays/relationships-browser/useViewToNodesEdges.js

@@ -37,9 +37,6 @@ function viewToNodesEdge(view) {
     const id = node.id;
     const base = {
       id,
-      draggable: false,
-      selectable: true,
-      focusable: true,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       style: {

package/dist/overlays/types.d.ts

@@ -1,29 +1,28 @@
-import { ActorRefFrom } from 'xstate';
-import { ElementDetailsLogic, Events as ElementDetailsEvents, Input as ElementDetailsInput } from './element-details/actor';
-import { Events as RelationshipDetailsEvents, Input as RelationshipDetailsInput, RelationshipDetailsLogic } from './relationship-details/actor';
-import { Events as RelationshipsBrowserEvents, Input as RelationshipsBrowserInput, RelationshipsBrowserLogic } from './relationships-browser/actor';
+import { ElementDetailsActorRef, ElementDetailsInput, ElementDetailsLogic } from './element-details/actor';
+import { RelationshipDetailsActorRef, RelationshipDetailsInput, RelationshipDetailsLogic } from './relationship-details/actor';
+import { RelationshipsBrowserActorRef, RelationshipsBrowserInput, RelationshipsBrowserLogic } from './relationships-browser/actor';
 export declare namespace Overlays {
     namespace ElementDetails {
-        type Events = ElementDetailsEvents;
-        type Input = ElementDetailsInput;
-        type Logic = ElementDetailsLogic;
-        interface ActorRef extends ActorRefFrom<ElementDetailsLogic> {
+        interface Input extends ElementDetailsInput {
+        }
+        interface Logic extends ElementDetailsLogic {
+        }
+        interface ActorRef extends ElementDetailsActorRef {
         }
     }
     namespace RelationshipDetails {
-        type Events = RelationshipDetailsEvents;
         type Input = RelationshipDetailsInput;
         interface Logic extends RelationshipDetailsLogic {
         }
-        interface ActorRef extends ActorRefFrom<RelationshipDetailsLogic> {
+        interface ActorRef extends RelationshipDetailsActorRef {
         }
     }
     namespace RelationshipsBrowser {
-        type Events = RelationshipsBrowserEvents;
-        type Input = RelationshipsBrowserInput;
+        interface Input extends RelationshipsBrowserInput {
+        }
         interface Logic extends RelationshipsBrowserLogic {
         }
-        interface ActorRef extends ActorRefFrom<RelationshipsBrowserLogic> {
+        interface ActorRef extends RelationshipsBrowserActorRef {
         }
     }
 }

package/dist/search/components/ElementsColumn.js

@@ -17,7 +17,7 @@ import { focusable, buttonsva } from './_shared.css.js';
 import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
 import { stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { NothingFound } from './ViewsColum.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const btn = buttonsva();
 const ElementsColumn = memo(() => {
@@ -250,9 +250,13 @@ function useHandleElementSelection() {
     const singleView = only(views);
     if (singleView) {
       searchActorRef.send({ type: "close" });
-      if (singleView.id !== diagram.currentView.id) {
+      if (singleView.id === diagram.currentView.id) {
         setTimeout(() => {
-          diagram.navigateTo(singleView.id);
+          diagram.focusOnElement(element.id);
+        }, 100);
+      } else {
+        setTimeout(() => {
+          diagram.navigateTo(singleView.id, void 0, element.id);
         }, 100);
       }
       return;

package/dist/search/components/PickView.js

@@ -6,7 +6,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor } from '../hooks.js';
 import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
 import { ViewButton } from './ViewsColum.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function PickView({ elementFqn }) {
   const searchActorRef = useSearchActor();
@@ -102,6 +102,7 @@ function PickView({ elementFqn }) {
                   view,
                   search: "",
                   loop: true,
+                  focusOnElement: elementFqn,
                   mod: {
                     autofocus: i === 0
                   }
@@ -117,6 +118,7 @@ function PickView({ elementFqn }) {
                   view,
                   search: "",
                   loop: true,
+                  focusOnElement: elementFqn,
                   mod: {
                     autofocus: i === 0 && scoped.length === 0
                   }

package/dist/search/components/SearchByTags.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
 import { ElementTag } from '../../base-primitives/element/ElementTags.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function SearchByTags() {
   const ref = useRef(null);

package/dist/search/components/SearchInput.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor, useSearch } from '../hooks.js';
 import { input } from './styles.css.js';
 import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;

package/dist/search/components/ViewsColum.d.ts

@@ -1,10 +1,12 @@
 import { LikeC4Model } from '@likec4/core/model';
+import { Fqn } from '@likec4/core/types';
 import { ElementProps, UnstyledButtonProps } from '@mantine/core';
 import { MemoExoticComponent } from 'react';
 export declare const NothingFound: () => import("react/jsx-runtime").JSX.Element;
 export declare const ViewsColumn: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
-export declare function ViewButton({ className, view, loop, search, ...props }: {
+export declare function ViewButton({ className, view, loop, search, focusOnElement, ...props }: {
     view: LikeC4Model.View;
     search: string;
     loop?: boolean;
+    focusOnElement?: Fqn;
 } & UnstyledButtonProps & ElementProps<'button'>): import("react/jsx-runtime").JSX.Element;

package/dist/search/components/ViewsColum.js

@@ -14,8 +14,8 @@ import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
 import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 const ViewsColumn = memo(() => {
@@ -80,16 +80,22 @@ const ViewsColumn = memo(() => {
   );
 });
 const btn = buttonsva();
-function ViewButton({ className, view, loop = false, search, ...props }) {
+function ViewButton({ className, view, loop = false, search, focusOnElement, ...props }) {
   const searchActorRef = useSearchActor();
   const diagram = useDiagram();
   const currentViewId = useCurrentViewId();
   const isCurrentView = view.id === currentViewId;
   const navigate = () => {
     searchActorRef.send({ type: "close" });
-    setTimeout(() => {
-      diagram.navigateTo(view.id);
-    }, 100);
+    if (isCurrentView && focusOnElement) {
+      setTimeout(() => {
+        diagram.focusOnElement(focusOnElement);
+      }, 100);
+    } else {
+      setTimeout(() => {
+        diagram.navigateTo(view.id, void 0, focusOnElement);
+      }, 100);
+    }
   };
   return /* @__PURE__ */ jsxs(
     UnstyledButton,
@@ -97,7 +103,7 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
       ...props,
       className: cx(btn.root, "group", focusable, viewButton, className),
       "data-likec4-view": view.id,
-      ...isCurrentView && { "data-disabled": true },
+      ...isCurrentView && !focusOnElement && { "data-disabled": true },
       onClick: (e) => {
         e.stopPropagation();
         navigate();

package/dist/search/components/_shared.css.d.ts

@@ -1,4 +1,4 @@
 import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles';
 export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
-export declare const buttonsva: SlotRecipeRuntimeFn<"description" | "title" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"description" | "title" | "icon" | "root" | "descriptionColor">>;
+export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;

package/dist/search/searchActor.d.ts

@@ -1,5 +1,5 @@
 import { Fqn } from '@likec4/core/types';
-import { ActorLogicFrom, ActorRefFrom, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, EventObject, MetaObject, ActionFunction } from 'xstate';
+import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
 export type SearchActorEvent = {
     type: 'open';
     search?: string | undefined;
@@ -19,72 +19,9 @@ export interface SearchContext {
     searchValue: string;
     pickViewFor: Fqn | null;
 }
-declare const _searchActorLogic: StateMachine<SearchContext, SearchActorEvent, {}, never, Values<{
-    "change searchValue": {
-        type: "change searchValue";
-        params: NonReducibleUnknown;
-    };
-    "reset pickViewFor": {
-        type: "reset pickViewFor";
-        params: NonReducibleUnknown;
-    };
-}>, never, never, "inactive" | "opened" | "pickView", string, NonReducibleUnknown, NonReducibleUnknown, EventObject, MetaObject, {
-    readonly id: "search";
-    readonly context: {
-        readonly openedWithSearch: null;
-        readonly searchValue: "";
-        readonly pickViewFor: null;
-    };
-    readonly initial: "inactive";
-    readonly on: {
-        readonly close: {
-            readonly target: ".inactive";
-            readonly actions: "reset pickViewFor";
-        };
-    };
-    readonly states: {
-        readonly inactive: {
-            readonly on: {
-                readonly open: {
-                    readonly target: "opened";
-                    readonly actions: readonly [ ActionFunction<SearchContext, {
-                        type: "open";
-                        search?: string | undefined;
-                    }, SearchActorEvent, undefined, never, never, never, never, never>];
-                };
-            };
-        };
-        readonly opened: {
-            readonly on: {
-                readonly open: {
-                    readonly actions: "change searchValue";
-                };
-                readonly 'change.search': {
-                    readonly actions: "change searchValue";
-                };
-                readonly 'pickview.open': {
-                    readonly target: "pickView";
-                    readonly actions: ActionFunction<SearchContext, {
-                        type: "pickview.open";
-                        elementFqn: Fqn;
-                    }, SearchActorEvent, undefined, never, never, never, never, never>;
-                };
-            };
-        };
-        readonly pickView: {
-            readonly on: {
-                readonly 'pickview.close': {
-                    readonly target: "opened";
-                    readonly actions: "reset pickViewFor";
-                };
-            };
-        };
-    };
-}>;
-export interface SearchActorLogic extends ActorLogicFrom<typeof _searchActorLogic> {
+export interface SearchActorLogic extends StateMachine<SearchContext, SearchActorEvent, {}, any, any, any, any, any, never, never, any, any, any, any> {
 }
 export declare const searchActorLogic: SearchActorLogic;
 export type SearchActorSnapshot = SnapshotFrom<SearchActorLogic>;
-export interface SearchActorRef extends ActorRefFrom<SearchActorLogic> {
+export interface SearchActorRef extends ActorRef<SearchActorSnapshot, SearchActorEvent> {
 }
-export {};

package/dist/shadowroot/ShadowRoot.d.ts

@@ -1,16 +1,14 @@
 import { MantineThemeOverride } from '@mantine/core';
-import { HTMLAttributes } from 'react';
-type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
+import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
+export declare const ShadowRoot: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     injectFontCss?: boolean | undefined;
     styleNonce?: string | (() => string) | undefined;
-    mode?: 'open' | 'closed';
+    mode?: "open" | "closed";
     delegatesFocus?: boolean;
-    colorScheme?: 'light' | 'dark' | undefined;
+    colorScheme?: "light" | "dark" | undefined;
     keepAspectRatio?: false | undefined | {
         width: number;
         height: number;
     };
     theme?: MantineThemeOverride | undefined;
-};
-export declare function ShadowRoot({ children, theme, injectFontCss, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio, ...props }: ShadowRootProps): import("react/jsx-runtime").JSX.Element;
-export {};
+} & RefAttributes<HTMLDivElement>>;

package/dist/shadowroot/ShadowRoot.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { MantineProvider } from '@mantine/core';
-import { useRef, useCallback } from 'react';
+import { useMergedRef } from '@mantine/hooks';
+import { forwardRef, useRef, useCallback } from 'react';
 import root from 'react-shadow';
 import { isDefined } from 'remeda';
 import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
@@ -49,7 +50,7 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
 }
 `.trim();
 }
-function ShadowRoot({
+const ShadowRoot = forwardRef(({
   children,
   theme = DefaultTheme,
   injectFontCss = true,
@@ -57,7 +58,7 @@ function ShadowRoot({
   colorScheme: explicitColorScheme,
   keepAspectRatio = false,
   ...props
-}) {
+}, ref) => {
   const colorScheme = useColorScheme(explicitColorScheme);
   const id = useId();
   const cssstyle = useShadowRootStyle(id, keepAspectRatio);
@@ -87,7 +88,7 @@ function ShadowRoot({
     /* @__PURE__ */ jsx(Root, { ssr: false, ...props, styleSheets, "data-likec4-instance": id, children: /* @__PURE__ */ jsx(
       "div",
       {
-        ref: rootRef,
+        ref: useMergedRef(rootRef, ref),
         "data-mantine-color-scheme": colorScheme,
         className: "likec4-shadow-root",
         children: /* @__PURE__ */ jsx(
@@ -105,6 +106,7 @@ function ShadowRoot({
       }
     ) })
   ] });
-}
+});
+ShadowRoot.displayName = "ShadowRoot";
 
 export { ShadowRoot };

package/dist/shadowroot/styles.css.js

@@ -1,5 +1,5 @@
 import { css } from '@likec4/styles/css';
-import { createTheme, Portal } from '@mantine/core';
+import { createTheme, Tooltip, Portal } from '@mantine/core';
 import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback } from '@mantine/hooks';
 import { useIsomorphicLayoutEffect } from '@react-hookz/web';
 import { useState } from 'react';
@@ -31,6 +31,11 @@ const DefaultTheme = createTheme({
       defaultProps: {
         reuseTargetNode: true
       }
+    }),
+    Tooltip: Tooltip.extend({
+      defaultProps: {
+        color: "dark"
+      }
     })
   }
 });