@likec4/diagram 1.44.0 → 1.45.0

package/dist/navigationpanel/actor.d.ts

@@ -1,5 +1,5 @@
 import { LayoutedView, ViewId } from '@likec4/core/types';
-import { ActorRefFromLogic, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
+import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
 import { CurrentViewModel } from '../hooks/useCurrentViewModel';
 export interface NavigationPanelActorInput {
     view: LayoutedView;
@@ -90,211 +90,11 @@ export interface NavigationPanelActorContext {
     selectedFolder: string;
     searchQuery: string;
 }
-declare const _actorLogic: StateMachine<NavigationPanelActorContext, NavigationPanelActorEvent, {}, never, Values<{
-    "update activatedBy": {
-        type: "update activatedBy";
-        params: NonReducibleUnknown;
-    };
-    "keep dropdown open": {
-        type: "keep dropdown open";
-        params: NonReducibleUnknown;
-    };
-    "update selected folder": {
-        type: "update selected folder";
-        params: NonReducibleUnknown;
-    };
-    "reset selected folder": {
-        type: "reset selected folder";
-        params: NonReducibleUnknown;
-    };
-    "update inputs": {
-        type: "update inputs";
-        params: NonReducibleUnknown;
-    };
-    "reset search query": {
-        type: "reset search query";
-        params: NonReducibleUnknown;
-    };
-    "update search query": {
-        type: "update search query";
-        params: NonReducibleUnknown;
-    };
-    "emit navigateTo": {
-        type: "emit navigateTo";
-        params: NonReducibleUnknown;
-    };
-}>, Values<{
-    "was opened on hover": {
-        type: "was opened on hover";
-        params: unknown;
-    };
-    "has search query": {
-        type: "has search query";
-        params: unknown;
-    };
-    "search query is empty": {
-        type: "search query is empty";
-        params: unknown;
-    };
-}>, "open timeout" | "close timeout", "pending" | "idle" | {
-    active: "search" | "opened" | "closing" | "decide";
-}, "active", NavigationPanelActorInput, NonReducibleUnknown, NavigationPanelActorEmitted, MetaObject, {
-    readonly id: "breadcrumbs";
-    readonly context: ({ input }: {
-        spawn: {
-            <TSrc extends never>(logic: TSrc, ...[options]: never): ActorRefFromLogic<never>;
-            <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: NavigationPanelActorInput;
-        self: ActorRef<MachineSnapshot<NavigationPanelActorContext, NavigationPanelActorEvent, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, NavigationPanelActorEvent, AnyEventObject>;
-    }) => {
-        breadcrumbs: never[];
-        activatedBy: "hover";
-        selectedFolder: string;
-        searchQuery: string;
-        folderColumns: never[];
-        view: LayoutedView;
-        viewModel: CurrentViewModel | null;
-    };
-    readonly initial: "idle";
-    readonly entry: readonly ["update activatedBy", "reset selected folder"];
-    readonly on: {
-        readonly 'update.inputs': {
-            readonly actions: "update inputs";
-        };
-        readonly 'searchQuery.change': {
-            readonly actions: readonly ["update search query", ActionFunction<NavigationPanelActorContext, {
-                type: "searchQuery.change";
-                value: string;
-            }, NavigationPanelActorEvent, undefined, never, never, never, "open timeout" | "close timeout", never>];
-        };
-    };
-    readonly states: {
-        readonly idle: {
-            readonly id: "idle";
-            readonly on: {
-                readonly 'breadcrumbs.mouseEnter.*': {
-                    readonly target: "pending";
-                    readonly actions: "update activatedBy";
-                };
-                readonly 'breadcrumbs.click.*': {
-                    readonly target: "active";
-                    readonly actions: "update activatedBy";
-                };
-            };
-        };
-        readonly pending: {
-            readonly on: {
-                readonly 'breadcrumbs.mouseEnter.*': {
-                    readonly actions: "update activatedBy";
-                };
-                readonly 'breadcrumbs.mouseLeave.*': {
-                    readonly target: "idle";
-                };
-                readonly 'breadcrumbs.click.*': {
-                    readonly target: "active";
-                    readonly actions: "update activatedBy";
-                };
-            };
-            readonly after: {
-                readonly 'open timeout': {
-                    readonly target: "active";
-                };
-            };
-        };
-        readonly active: {
-            readonly tags: readonly ["active"];
-            readonly initial: "decide";
-            readonly on: {
-                readonly 'dropdown.dismiss': {
-                    readonly target: "#idle";
-                };
-                readonly 'breadcrumbs.mouseLeave': {
-                    readonly guard: "was opened on hover";
-                    readonly target: ".closing";
-                };
-                readonly 'dropdown.mouseLeave': {
-                    readonly guard: "was opened on hover";
-                    readonly target: ".closing";
-                };
-                readonly 'searchQuery.changed': {
-                    readonly target: ".decide";
-                };
-            };
-            readonly states: {
-                readonly decide: {
-                    readonly always: readonly [{
-                        readonly guard: "has search query";
-                        readonly target: "search";
-                    }, {
-                        readonly target: "opened";
-                    }];
-                };
-                readonly opened: {
-                    readonly on: {
-                        readonly 'searchQuery.changed': {
-                            readonly guard: "has search query";
-                            readonly actions: "keep dropdown open";
-                            readonly target: "search";
-                        };
-                        readonly 'breadcrumbs.click.viewtitle': {
-                            readonly actions: "reset selected folder";
-                        };
-                        readonly 'breadcrumbs.click.*': {
-                            readonly actions: "update selected folder";
-                        };
-                        readonly 'select.folder': {
-                            readonly actions: readonly ["keep dropdown open", "update selected folder"];
-                        };
-                        readonly 'select.view': {
-                            readonly actions: readonly ["emit navigateTo"];
-                        };
-                    };
-                };
-                readonly search: {
-                    readonly on: {
-                        readonly 'breadcrumbs.click.viewtitle': {
-                            readonly actions: readonly ["reset search query", "reset selected folder"];
-                            readonly target: "opened";
-                        };
-                        readonly 'breadcrumbs.click.*': {
-                            readonly actions: readonly ["reset search query", "update selected folder"];
-                            readonly target: "opened";
-                        };
-                        readonly 'select.view': {
-                            readonly actions: readonly ["emit navigateTo"];
-                        };
-                    };
-                };
-                readonly closing: {
-                    readonly on: {
-                        readonly 'breadcrumbs.mouseEnter.*': {
-                            readonly target: "decide";
-                        };
-                        readonly 'dropdown.mouseEnter': {
-                            readonly target: "decide";
-                        };
-                    };
-                    readonly after: {
-                        readonly 'close timeout': {
-                            readonly target: "#idle";
-                        };
-                    };
-                };
-            };
-        };
-    };
-}>;
-type InferredMachine = typeof _actorLogic;
-export interface NavigationPanelActorLogic extends InferredMachine {
+type Tags = 'active';
+export interface NavigationPanelActorLogic extends StateMachine<NavigationPanelActorContext, NavigationPanelActorEvent, {}, any, any, any, any, any, Tags, NavigationPanelActorInput, any, NavigationPanelActorEmitted, any, any> {
 }
 export declare const navigationPanelActorLogic: NavigationPanelActorLogic;
 export type NavigationPanelActorSnapshot = SnapshotFrom<NavigationPanelActorLogic>;
-export interface NavigationPanelActorRef extends ActorRefFromLogic<NavigationPanelActorLogic> {
+export interface NavigationPanelActorRef extends ActorRef<NavigationPanelActorSnapshot, NavigationPanelActorEvent, NavigationPanelActorEmitted> {
 }
 export {};

package/dist/navigationpanel/actor.js

@@ -5,7 +5,7 @@ const _actorLogic = setup({
   types: {
     context: {},
     events: {},
-    tags: "active",
+    tags: "",
     input: {},
     emitted: {}
   },

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -6,8 +6,8 @@ import { AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
 import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { useDiagram } from '../../hooks/safeContext.js';
-import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
 import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
 
 const selector = (ctx) => ({
   visible: ctx.features.enableReadOnly !== true && // Disable toggle in sequence mode
@@ -22,6 +22,7 @@ const ToggleReadonly = () => {
     {
       component: m.button,
       layout: "position",
+      layoutDependency: isReadOnly,
       onClick: (e) => {
         e.stopPropagation();
         diagram.toggleFeature("ReadOnly");
@@ -51,8 +52,9 @@ const ToggleReadonly = () => {
         })
       ),
       children: [
-        isReadOnly ? /* @__PURE__ */ jsx(IconLock, { size: 14, stroke: 2 }) : /* @__PURE__ */ jsx(IconLockOpen2, { size: 14, stroke: 2 }),
-        isReadOnly && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(IconLockOpen2, { size: 14, stroke: 2, style: { display: isReadOnly ? "none" : void 0 } }),
+        /* @__PURE__ */ jsx(IconLock, { size: 14, stroke: 2, style: { display: !isReadOnly ? "none" : void 0 } }),
+        /* @__PURE__ */ jsx(
           m.div,
           {
             className: css({
@@ -61,6 +63,9 @@ const ToggleReadonly = () => {
               lineHeight: 1,
               opacity: 0.8
             }),
+            style: {
+              display: isReadOnly ? "block" : "none"
+            },
             children: "Edit"
           }
         )

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

@@ -1,11 +1,11 @@
 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, FormEventHandler, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, InputEventHandler, ReactEventHandler, 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;
+    name?: string | undefined;
+    onChange?: FormEventHandler<HTMLButtonElement> | undefined;
     id?: string | undefined;
-    onError?: ReactEventHandler<HTMLButtonElement> | undefined;
-    value?: string | number | readonly string[] | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
     form?: string | undefined;
     hidden?: boolean | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -13,13 +13,67 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     title?: string | undefined;
     color?: string | undefined;
     dir?: string | undefined;
-    onChange?: FormEventHandler<HTMLButtonElement> | undefined;
+    property?: string | undefined;
     role?: AriaRole | undefined;
     "aria-label"?: string | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    lang?: string | undefined;
+    tabIndex?: number | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "step" | "time" | "page" | "location" | "date" | "true" | "false" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
     onCopy?: ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCopyCapture?: ClipboardEventHandler<HTMLButtonElement> | undefined;
     onCut?: ClipboardEventHandler<HTMLButtonElement> | undefined;
@@ -49,6 +103,7 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     onInvalidCapture?: FormEventHandler<HTMLButtonElement> | undefined;
     onLoad?: ReactEventHandler<HTMLButtonElement> | undefined;
     onLoadCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
+    onError?: ReactEventHandler<HTMLButtonElement> | undefined;
     onErrorCapture?: ReactEventHandler<HTMLButtonElement> | undefined;
     onKeyDown?: KeyboardEventHandler<HTMLButtonElement> | undefined;
     onKeyDownCapture?: KeyboardEventHandler<HTMLButtonElement> | undefined;
@@ -182,20 +237,20 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     onTransitionRunCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStart?: TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: TransitionEventHandler<HTMLButtonElement> | undefined;
+    value?: string | number | readonly string[] | undefined;
+    key?: Key | null | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     defaultChecked?: boolean | undefined;
     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;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "previous" | "enter" | "go" | undefined;
-    lang?: string | undefined;
+    enterKeyHint?: "search" | "next" | "previous" | "send" | "done" | "enter" | "go" | undefined;
     nonce?: string | undefined;
     slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     about?: string | undefined;
@@ -203,7 +258,6 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
-    property?: string | undefined;
     rel?: string | undefined;
     resource?: string | undefined;
     rev?: string | undefined;
@@ -227,60 +281,6 @@ export declare const TriggerWalkthroughButton: ForwardRefExoticComponent<Omit<Bu
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "step" | "time" | "page" | "location" | "date" | "true" | "false" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    name?: string | undefined;
-    key?: Key | null | undefined;
     ref?: Ref<HTMLButtonElement> | undefined;
     disabled?: boolean | undefined;
     formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;

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/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/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/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%"
         }