@likec4/diagram 1.44.0 → 1.46.0

package/dist/navigationpanel/walkthrough/DynamicViewControls.d.ts

@@ -1,19 +1,17 @@
 import { ButtonProps } from '@mantine/core';
-import { ForwardRefExoticComponent, ReactEventHandler, FormEventHandler, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, InputEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Key, Ref, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, ReactEventHandler, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, InputEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler, Key, Ref, RefAttributes } from 'react';
 import { MotionProps } from 'motion/react';
 export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<ButtonProps & {
-    type?: "button" | "submit" | "reset" | undefined;
     id?: string | undefined;
-    onError?: ReactEventHandler<HTMLButtonElement> | undefined;
-    value?: string | number | readonly string[] | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
     form?: string | undefined;
     hidden?: boolean | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     className?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
-    dir?: string | undefined;
-    onChange?: FormEventHandler<HTMLButtonElement> | undefined;
+    onError?: ReactEventHandler<HTMLButtonElement> | undefined;
+    value?: string | number | readonly string[] | undefined;
     role?: AriaRole | undefined;
     "aria-label"?: string | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -36,6 +34,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     onFocusCapture?: FocusEventHandler<HTMLButtonElement> | undefined;
     onBlur?: FocusEventHandler<HTMLButtonElement> | undefined;
     onBlurCapture?: FocusEventHandler<HTMLButtonElement> | undefined;
+    onChange?: FormEventHandler<HTMLButtonElement> | undefined;
     onChangeCapture?: FormEventHandler<HTMLButtonElement> | undefined;
     onBeforeInput?: InputEventHandler<HTMLButtonElement> | undefined;
     onBeforeInputCapture?: FormEventHandler<HTMLButtonElement> | undefined;
@@ -186,10 +185,11 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
-    autoCapitalize?: "on" | "none" | (string & {}) | "off" | "sentences" | "words" | "characters" | undefined;
+    autoCapitalize?: "none" | (string & {}) | "on" | "off" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
     contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
+    dir?: string | undefined;
     enterKeyHint?: "search" | "done" | "send" | "next" | "previous" | "enter" | "go" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
@@ -239,7 +239,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "step" | "time" | "page" | "location" | "date" | "true" | "false" | undefined;
+    "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -274,7 +274,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     "aria-rowspan"?: number | undefined;
     "aria-selected"?: (boolean | "true" | "false") | undefined;
     "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-sort"?: "none" | "other" | "ascending" | "descending" | undefined;
     "aria-valuemax"?: number | undefined;
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -10,7 +10,7 @@ import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { Tooltip } from '../_common.js';
 import { useNavigationActor } from '../hooks.js';
 import { useDiagram } from '../../hooks/safeContext.js';
-import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
+import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
 
 const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Button,

package/dist/navigationpanel/walkthrough/WalkthroughPanel.js

@@ -27,12 +27,13 @@ function selectWalkthroughNotes(s) {
     isParallel: isActive && isTruthy(s.activeWalkthrough?.parallelPrefix),
     hasNext: isActive && activeStepIndex < s.xyedges.length - 1,
     hasPrevious: isActive && activeStepIndex > 0,
-    notes: isActive ? s.xyedges[activeStepIndex]?.data?.notes ?? RichText.EMPTY : null
+    notes: isActive ? s.xyedges[activeStepIndex]?.data?.notes ?? null : null
   };
 }
 const WalkthroughPanel = memo(() => {
-  const { isActive, notes } = useDiagramContext(selectWalkthroughNotes);
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: isActive && notes && !notes.isEmpty && /* @__PURE__ */ jsx(
+  const { isActive, notes: _notes } = useDiagramContext(selectWalkthroughNotes);
+  const notes = _notes ? RichText.from(_notes) : RichText.EMPTY;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isActive && !notes.isEmpty && /* @__PURE__ */ jsx(
     m.div,
     {
       layout: "position",

package/dist/overlays/Overlays.js

@@ -3,16 +3,15 @@ import { nonexhaustive } from '@likec4/core';
 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 { ErrorBoundary } from '../components/ErrorFallback.js';
 import { ElementDetails } from './element-details/ElementDetails.js';
 import { Overlay } from './overlay/Overlay.js';
 import { RelationshipDetails } from './relationship-details/RelationshipDetails.js';
 import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrowser.js';
-import { useXYStore } from '../hooks/useXYFlow.js';
+import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { DiagramFeatures } from '../context/DiagramFeatures.js';
+import { useDiagram } from '../hooks/safeContext.js';
 
 const selectOverlays = (s) => {
   return s.context.overlays.map((overlay) => {
@@ -43,23 +42,36 @@ const compareSelectOverlays = (a, b) => {
   });
 };
 function Overlays({ overlaysActorRef }) {
-  const xyflowDomNode = useXYStore((s) => s.domNode);
-  const xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector(".react-flow__renderer") ?? null, [
-    xyflowDomNode
-  ]);
+  const diagram = useDiagram();
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
   const isMotionReduced = useReducedMotionConfig() ?? false;
   const isActiveOverlay = overlays.some((overlay) => overlay.type === "elementDetails");
-  useEffect(() => {
+  useUpdateEffect(() => {
+    const xyflowDomNode = diagram.getContext().xystore.getState().domNode;
+    const xyflowRendererDom = xyflowDomNode?.querySelector(".react-flow__renderer");
     if (!xyflowRendererDom || isMotionReduced) return;
-    animate(xyflowRendererDom, {
+    const current = animate(xyflowRendererDom, {
       opacity: isActiveOverlay ? 0.7 : 1,
       filter: isActiveOverlay ? "grayscale(1)" : "grayscale(0)",
       transform: isActiveOverlay ? `perspective(400px) translateZ(-12px) translateY(3px)` : `translateY(0)`
     }, {
       duration: isActiveOverlay ? 0.35 : 0.17
     });
-  }, [isActiveOverlay, xyflowRendererDom]);
+    let cleanupTm = null;
+    if (!isActiveOverlay) {
+      cleanupTm = setTimeout(() => {
+        xyflowRendererDom.style.transform = "";
+        xyflowRendererDom.style.filter = "";
+        cleanupTm = null;
+      }, 450);
+    }
+    return () => {
+      if (cleanupTm) {
+        clearTimeout(cleanupTm);
+      }
+      current.stop();
+    };
+  }, [isActiveOverlay]);
   const close = (actorRef) => {
     overlaysActorRef.send({ type: "close", actorId: actorRef.id });
   };
@@ -98,7 +110,7 @@ function Overlays({ overlaysActorRef }) {
         nonexhaustive(overlay);
     }
   });
-  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 }) }) }) });
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: overlaysReact }) }) }) });
 }
 
 export { Overlays };

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

@@ -39,9 +39,9 @@ const card = css({
   border: "none",
   backgroundImage: `
     linear-gradient(180deg,
-      color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent),
-      color-mix(in srgb, var(--likec4-palette-fill) 20%, transparent) 8px,
-      color-mix(in srgb, var(--likec4-palette-fill) 14%, transparent) 20px,
+      color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent),
+      color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px,
+      color-mix(in oklab, var(--likec4-palette-fill) 14%, transparent) 20px,
       transparent 80px
     ),
     linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px)

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

@@ -21,12 +21,12 @@ import { TabPanelStructure } from './TabPanelStructure.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { IconRenderer } from '../../context/IconRenderer.js';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 import { IfEnabled, DiagramFeatures } from '../../context/DiagramFeatures.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.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.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 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 { Markdown } from '../../base-primitives/Markdown.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 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';
 
 const Divider = Divider$1.withProps({
   mb: 8,

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

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 export declare function MetadataProvider({ children }: {
-    children: React.ReactNode;
+    children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 interface MetadataValueProps {
     label: string;

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

@@ -2,8 +2,8 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { UnstyledButton, Flex, Text, Box, Stack, Tooltip } from '@mantine/core';
 import { useState, useRef, useEffect } from 'react';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.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 IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.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';
 
 function MetadataProvider({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
@@ -49,8 +49,7 @@ function TruncatedValue({ value, isExpanded }) {
 }
 function MultiValueDisplay({
   values,
-  isExpanded,
-  onToggle
+  isExpanded
 }) {
   if (isExpanded) {
     return /* @__PURE__ */ jsx(Stack, { gap: "xs", children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
@@ -239,8 +238,7 @@ function MetadataValue({ label, value }) {
           MultiValueDisplay,
           {
             values: elements,
-            isExpanded,
-            onToggle: handleToggle
+            isExpanded
           }
         ) : /* @__PURE__ */ jsx(
           Box,

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

@@ -6,10 +6,10 @@ import 'fast-equals';
 import { useDiagram } from '../../hooks/safeContext.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from './TabPanelDeployments.css.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
 import { stopPropagation } from '../../utils/xyflow.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 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 DeploymentNodeRenderer = ({
   node

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

@@ -2,14 +2,16 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { nameFromFqn } from '@likec4/core';
 import { Stack, Group, Box, ThemeIcon, Text, Tooltip as Tooltip$1, ActionIcon, Paper } from '@mantine/core';
 import { useSelector } from '@xstate/react';
+import { useCallback } from 'react';
 import { unique } from 'remeda';
-import { useOverlaysActorRef } from '../../hooks/useOverlaysActor.js';
 import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser.js';
 import { useElementDetailsActorRef } from './actorContext.js';
 import { fqn, xyflow, relationshipStat } from './TabPanelRelationships.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
+import { useDiagram } from '../../hooks/safeContext.js';
+import 'fast-equals';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
@@ -25,9 +27,12 @@ function TabPanelRelationships({
   node,
   element
 }) {
-  const overlaysActor = useOverlaysActorRef();
+  const diagram = useDiagram();
   const delailsActor = useElementDetailsActorRef();
-  const relationshipsBrowserActor = useSelector(delailsActor, (s) => s.children[`${delailsActor.id}-relationships`]);
+  const relationshipsBrowserActor = useSelector(
+    delailsActor,
+    useCallback((s) => s.children[`${delailsActor.id}-relationships`], [delailsActor.id])
+  );
   const incoming = [...element.incoming()].map((r) => r.id);
   const outgoing = [...element.outgoing()].map((r) => r.id);
   const incomingInView = node ? unique([...node.incoming()].flatMap((e) => e.$edge.relations)) : [];
@@ -93,7 +98,7 @@ function TabPanelRelationships({
               scope,
               viewId
             } = relationshipsBrowserActor.getSnapshot().context;
-            overlaysActor.send({
+            diagram.overlays().send({
               type: "open.relationshipsBrowser",
               subject,
               scope,

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from '@mantine/core';
 import { useMemo, useEffect } from 'react';
 import { treeNodeLabel, elementLabel } from './TabPanelStructure.css.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 
 const ElementLabel = ({
   element

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

@@ -1,7 +1,7 @@
 import { DiagramView, Fqn, NodeId } from '@likec4/core/types';
 import { Rect } from '@xyflow/system';
-import { ActorRefFromLogic, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, StopAction } from 'xstate';
-import { RelationshipsBrowserLogic } from '../relationships-browser/actor';
+import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
+import { RelationshipsBrowserActorRef } from '../relationships-browser/actor';
 export type Input = {
     subject: Fqn;
     currentView: DiagramView;
@@ -24,87 +24,12 @@ export type Events = {
 } | {
     type: 'close';
 };
-declare const _elementDetailsLogic: StateMachine<Context, Events, {
-    [x: `${string}-relationships`]: ActorRefFromLogic< RelationshipsBrowserLogic> | undefined;
-}, {
-    src: "relationshipsBrowserLogic";
-    logic: RelationshipsBrowserLogic;
-    id: `${string}-relationships`;
-}, never, never, never, "active" | "closed", string, Input, NonReducibleUnknown, EventObject, MetaObject, {
-    readonly id: "element-details";
-    readonly context: ({ input }: {
-        spawn: {
-            <TSrc extends "relationshipsBrowserLogic">(logic: TSrc, ...[options]: {
-                src: "relationshipsBrowserLogic";
-                logic: RelationshipsBrowserLogic;
-                id: `${string}-relationships`;
-            } extends infer T ? T extends {
-                src: "relationshipsBrowserLogic";
-                logic: RelationshipsBrowserLogic;
-                id: `${string}-relationships`;
-            } ? T extends {
-                src: TSrc;
-            } ? ConditionalRequired<[options?: {
-                id?: T["id"];
-                systemId?: string;
-                input?: InputFrom<T["logic"]>;
-                syncSnapshot?: boolean;
-            } & { [K in RequiredActorOptions<T>]: unknown; }], IsNotNever<RequiredActorOptions<T>>> : never : never : never): ActorRefFromLogic< GetConcreteByKey<{
-                src: "relationshipsBrowserLogic";
-                logic: RelationshipsBrowserLogic;
-                id: `${string}-relationships`;
-            }, "src", TSrc>["logic"]>;
-            <TLogic extends AnyActorLogic>(src: TLogic, ...[options]: ConditionalRequired<[options?: {
-                id?: never;
-                systemId?: string;
-                input?: InputFrom<TLogic>;
-                syncSnapshot?: boolean;
-            } & { [K in RequiredLogicInput<TLogic>]: unknown; }], IsNotNever<RequiredLogicInput<TLogic>>>): ActorRefFromLogic<TLogic>;
-        };
-        input: Input;
-        self: ActorRef<MachineSnapshot<Context, Events, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
-    }) => {
-        initiatedFrom: {
-            node: NodeId | null;
-            clientRect: Rect | null;
-        };
-        subject: Fqn;
-        currentView: DiagramView;
-    };
-    readonly initial: "active";
-    readonly states: {
-        readonly active: {
-            readonly entry: ActionFunction<Context, Events, Events, undefined, {
-                src: "relationshipsBrowserLogic";
-                logic: RelationshipsBrowserLogic;
-                id: `${string}-relationships`;
-            }, never, never, never, never>;
-            readonly exit: readonly [ ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>, StopAction<Context, Events, undefined, Events>];
-            readonly on: {
-                readonly 'change.subject': {
-                    readonly actions: ActionFunction<Context, {
-                        type: "change.subject";
-                        subject: Fqn;
-                    }, Events, undefined, {
-                        src: "relationshipsBrowserLogic";
-                        logic: RelationshipsBrowserLogic;
-                        id: `${string}-relationships`;
-                    }, never, never, never, never>;
-                };
-                readonly close: "closed";
-            };
-        };
-        readonly closed: {
-            readonly id: "closed";
-            readonly type: "final";
-        };
-    };
-}>;
-type InferredMachine = typeof _elementDetailsLogic;
-export interface ElementDetailsLogic extends InferredMachine {
+export interface ElementDetailsLogic extends StateMachine<Context, Events, {
+    [key: `${string}-relationships`]: RelationshipsBrowserActorRef | undefined;
+}, any, any, any, any, any, never, Input, any, any, any, any> {
 }
 export declare const elementDetailsLogic: ElementDetailsLogic;
-export interface ElementDetailsActorRef extends ActorRefFromLogic<ElementDetailsLogic> {
-}
 export type ElementDetailsSnapshot = SnapshotFrom<ElementDetailsLogic>;
-export {};
+export interface ElementDetailsActorRef extends ActorRef<ElementDetailsSnapshot, Events> {
+}
+export type { Input as ElementDetailsInput, };

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

@@ -52,14 +52,6 @@ const _elementDetailsLogic = setup({
       type: "final"
     }
   }
-  // exit: assign({
-  //   initialized: false,
-  //   xyflow: null,
-  //   layouted: null,
-  //   xystore: null,
-  //   xyedges: [],
-  //   xynodes: [],
-  // }),
 });
 const elementDetailsLogic = _elementDetailsLogic;
 

package/dist/overlays/overlay/Overlay.js

@@ -79,9 +79,9 @@ const Overlay = forwardRef(({
         initial: {
           [backdropBlur]: "0px",
           [backdropOpacity]: "0%",
-          scale: 0.95,
-          originY: 0,
-          translateY: -20,
+          scale: 0.85,
+          // originY: 0.4,
+          // translateY: -10,
           opacity: 0
         },
         animate: {
@@ -89,18 +89,18 @@ const Overlay = forwardRef(({
           [backdropOpacity]: targetBackdropOpacity,
           scale: 1,
           opacity: 1,
-          translateY: 0,
-          transition: {
-            delay: 0.075
-          }
+          translateY: 0
+          // transition: {
+          //   delay: 0.075,
+          // },
         },
         exit: {
           opacity: 0,
           scale: 0.98,
           translateY: -20,
-          transition: {
-            duration: 0.1
-          },
+          // transition: {
+          //   duration: 0.1,
+          // },
           [backdropBlur]: "0px",
           [backdropOpacity]: "0%"
         }