@likec4/diagram 1.43.0 → 1.45.0

package/dist/navigationpanel/actor.d.ts

@@ -1,8 +1,9 @@
-import { ViewId } from '@likec4/core/types';
-import { ActorLogicFrom, ActorRefFrom, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, MetaObject, ActorRefFromLogic, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
+import { LayoutedView, ViewId } from '@likec4/core/types';
+import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
 import { CurrentViewModel } from '../hooks/useCurrentViewModel';
 export interface NavigationPanelActorInput {
-    viewModel: CurrentViewModel;
+    view: LayoutedView;
+    viewModel: CurrentViewModel | null;
 }
 export type NavigationPanelActorEvent = {
     type: 'update.inputs';
@@ -74,7 +75,8 @@ export type DropdownColumnItem = {
     selected: boolean;
 };
 export interface NavigationPanelActorContext {
-    viewModel: CurrentViewModel;
+    view: LayoutedView;
+    viewModel: CurrentViewModel | null;
     /**
      * Who activated the dropdown
      * (if `click` then the dropdown is always open until dismissed)
@@ -88,209 +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[];
-        viewModel: CurrentViewModel;
-    };
-    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";
-                        };
-                    };
-                };
-            };
-        };
-    };
-}>;
-export interface NavigationPanelActorLogic extends ActorLogicFrom<typeof _actorLogic> {
+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 ActorRefFrom<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: {}
   },
@@ -37,16 +37,17 @@ const _actorLogic = setup({
       return { selectedFolder: event.folderPath };
     }),
     "reset selected folder": assign({
-      selectedFolder: ({ context }) => context.viewModel.folder.path
+      selectedFolder: ({ context }) => context.viewModel?.folder.path ?? ""
     }),
     "update inputs": assign(({ context, event }) => {
       assertEvent(event, "update.inputs");
-      const viewChanged = event.inputs.viewModel.id !== context.viewModel.id;
+      const viewChanged = event.inputs.viewModel?.id !== context.viewModel?.id;
       let selectedFolder = context.selectedFolder;
-      if (!event.inputs.viewModel.folder.path.startsWith(selectedFolder)) {
-        selectedFolder = event.inputs.viewModel.folder.path;
+      if (!event.inputs.viewModel?.folder.path.startsWith(selectedFolder)) {
+        selectedFolder = event.inputs.viewModel?.folder.path ?? "";
       }
       return {
+        view: event.inputs.view,
         viewModel: event.inputs.viewModel,
         selectedFolder,
         // allow dropdown to close on mouse leave if view changed

package/dist/navigationpanel/comparepanel/CompareActionsMenu.d.ts

@@ -0,0 +1,3 @@
+export declare function CompareActionsMenu({ onResetManualLayout, }: {
+    onResetManualLayout: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/comparepanel/CompareActionsMenu.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { hstack } from '@likec4/styles/patterns';
+import { navigationPanelActionIcon } from '@likec4/styles/recipes';
+import { Menu, UnstyledButton, Badge } from '@mantine/core';
+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';
+
+function CompareActionsMenu({
+  onResetManualLayout
+}) {
+  return /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      withinPortal: false,
+      floatingStrategy: "absolute",
+      shadow: "lg",
+      position: "bottom-start",
+      offset: { mainAxis: 4 },
+      children: [
+        /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(
+          UnstyledButton,
+          {
+            className: cx(
+              "mantine-active",
+              navigationPanelActionIcon({
+                variant: "default"
+              }),
+              hstack({
+                gap: "2",
+                py: "1.5",
+                px: "2",
+                lineHeight: "1",
+                rounded: "sm",
+                textStyle: "xs",
+                fontWeight: "medium",
+                color: {
+                  base: "likec4.panel.action",
+                  _hover: "likec4.panel.action.hover"
+                },
+                userSelect: "none"
+              })
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Box, { children: "Actions" }),
+              /* @__PURE__ */ jsx(IconChevronDown, { size: 12, stroke: 2, opacity: 0.7 })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+          /* @__PURE__ */ jsx(Menu.Item, { disabled: true, rightSection: /* @__PURE__ */ jsx(Badge, { size: "xs", radius: "sm", children: "Soon" }), children: "Apply changes" }),
+          /* @__PURE__ */ jsx(Menu.Item, { fz: "sm", onClick: onResetManualLayout, children: "Reset manual layout" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { CompareActionsMenu };

package/dist/navigationpanel/comparepanel/ComparePanel.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const ComparePanel: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/navigationpanel/comparepanel/ComparePanel.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { hstack } from '@likec4/styles/patterns';
+import { AnimatePresence } from 'motion/react';
+import * as m from 'motion/react-m';
+import { memo } from 'react';
+import { ComparePanelControls } from './ComparePanelControls.js';
+import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
+
+const ComparePanel = memo(() => {
+  const { enableCompareWithLatest } = useEnabledFeatures();
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: enableCompareWithLatest && /* @__PURE__ */ jsx(
+    m.div,
+    {
+      layout: "position",
+      className: hstack({
+        gap: "2",
+        layerStyle: "likec4.panel",
+        position: "relative",
+        px: "2",
+        py: "1",
+        pl: "3",
+        pointerEvents: "all"
+      }),
+      initial: {
+        opacity: 0,
+        translateX: -20
+      },
+      animate: {
+        opacity: 1,
+        translateX: 0
+      },
+      exit: {
+        opacity: 0,
+        translateX: -20
+      },
+      children: /* @__PURE__ */ jsx(ComparePanelControls, {})
+    }
+  ) });
+});
+ComparePanel.displayName = "ComparePanel";
+
+export { ComparePanel };

package/dist/navigationpanel/comparepanel/ComparePanelControls.d.ts

@@ -0,0 +1 @@
+export declare function ComparePanelControls(): import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/comparepanel/ComparePanelControls.js

@@ -0,0 +1,60 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, HStack } from '@likec4/styles/jsx';
+import { Divider as Divider$1 } from '@mantine/core';
+import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
+import { PanelActionIcon } from '../_common.js';
+import { CompareActionsMenu } from './CompareActionsMenu.js';
+import { LayoutTypeSwitcher } from './LayoutTypeSwitcher.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';
+
+const Divider = Divider$1.withProps({
+  mx: 2,
+  size: "xs",
+  orientation: "vertical"
+});
+function ComparePanelControls() {
+  const [ctx, { toggleCompare, switchLayout, resetManualLayout }] = useDiagramCompareLayout();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        css: {
+          textStyle: "xs",
+          color: "likec4.panel.text",
+          userSelect: "none"
+        },
+        children: "Compare"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LayoutTypeSwitcher,
+      {
+        value: ctx.layout,
+        onChange: switchLayout
+      }
+    ),
+    ctx.isEditable && /* @__PURE__ */ jsxs(HStack, { gap: "1", children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(
+        CompareActionsMenu,
+        {
+          onResetManualLayout: resetManualLayout
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }),
+    /* @__PURE__ */ jsx(
+      PanelActionIcon,
+      {
+        size: "sm",
+        onClick: (e) => {
+          e.stopPropagation();
+          toggleCompare();
+        },
+        children: /* @__PURE__ */ jsx(IconX, {})
+      }
+    )
+  ] });
+}
+
+export { ComparePanelControls };

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.d.ts

@@ -0,0 +1,5 @@
+import { LayoutType } from '@likec4/core';
+export declare function LayoutTypeSwitcher({ value, onChange, }: {
+    value: LayoutType;
+    onChange: (layout: LayoutType) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { invariant } from '@likec4/core';
+import { css } from '@likec4/styles/css';
+import { SegmentedControl } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { useMemo } from 'react';
+
+function LayoutTypeSwitcher({
+  value,
+  onChange
+}) {
+  const data = useMemo(() => [
+    { value: "manual", label: "Saved" },
+    { value: "auto", label: "Latest" }
+  ], []);
+  return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      color: value === "manual" ? "orange" : "green",
+      value,
+      component: m.div,
+      onChange: (layout) => {
+        invariant(layout === "manual" || layout === "auto", "Invalid layout type");
+        onChange(layout);
+      },
+      classNames: {
+        label: css({
+          fontSize: "xxs",
+          fontWeight: "medium"
+        })
+      },
+      data
+    }
+  ) });
+}
+
+export { LayoutTypeSwitcher };

package/dist/navigationpanel/comparepanel/index.d.ts

@@ -0,0 +1 @@
+export { ComparePanel } from './ComparePanel';

package/dist/navigationpanel/controls/{ViewDetailsCard.d.ts → DetailsControls.d.ts}

@@ -1,2 +1,2 @@
 import { PopoverProps } from '@mantine/core';
-export declare const ViewDetailsCard: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DetailsControls: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/navigationpanel/controls/{ViewDetailsCard.js → DetailsControls.js}

@@ -1,32 +1,36 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { extractViewTitleFromPath } from '@likec4/core/model';
+import { RichText } from '@likec4/core/types';
 import { cx, css } from '@likec4/styles/css';
 import { HStack, Box, styled } from '@likec4/styles/jsx';
 import { hstack, vstack } from '@likec4/styles/patterns';
 import { Popover, UnstyledButton, Text, Badge } from '@mantine/core';
+import { deepEqual } from 'fast-equals';
 import * as m from 'motion/react-m';
 import { useState } from 'react';
 import { Link } from '../../components/Link.js';
-import { useDiagram, useOnDiagramEvent } from '../../hooks/useDiagram.js';
+import { useOnDiagramEvent } from '../../hooks/useDiagram.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 import { useNavigationActorSnapshot } from '../hooks.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
-import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import { useDiagram } from '../../hooks/safeContext.js';
 import { ElementTag } from '../../base-primitives/element/ElementTags.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
 
 const selector = ({ context }) => {
-  const view = context.viewModel;
+  const view = context.view;
   return {
     id: view.id,
-    title: view.titleOrUntitled,
-    description: view.description,
-    tags: view.tags,
-    links: view.links
+    title: context.viewModel?.title ?? (view.title && extractViewTitleFromPath(view.title)) ?? "Untitled View",
+    description: context.viewModel?.description ?? RichText.from(view.description),
+    tags: view.tags ?? [],
+    links: view.links ?? []
   };
 };
-const ViewDetailsCard = (props) => {
+const DetailsControls = (props) => {
   const [opened, setOpened] = useState(false);
-  const data = useNavigationActorSnapshot(selector);
+  const data = useNavigationActorSnapshot(selector, deepEqual);
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
     Popover,
@@ -71,11 +75,11 @@ const ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(P
         userSelect: "none",
         cursor: "pointer",
         color: {
-          base: "likec4.panel.action-icon.text",
-          _hover: "likec4.panel.action-icon.text.hover"
+          base: "likec4.panel.action",
+          _hover: "likec4.panel.action.hover"
         },
         backgroundColor: {
-          _hover: "likec4.panel.action-icon.bg.hover"
+          _hover: "likec4.panel.action.bg.hover"
         },
         display: {
           base: "none",
@@ -244,4 +248,4 @@ const ViewBadgeLabel = styled("div", {
   }
 });
 
-export { ViewDetailsCard };
+export { DetailsControls };

package/dist/navigationpanel/controls/LayoutWarning.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const LayoutWarning: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/navigationpanel/controls/LayoutWarning.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { hstack } from '@likec4/styles/patterns';
+import { navigationPanelActionIcon } from '@likec4/styles/recipes';
+import { HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Notification, Text, Button } from '@mantine/core';
+import { AnimatePresence } from 'motion/react';
+import * as m from 'motion/react-m';
+import { memo, Fragment as Fragment$1 } from 'react';
+import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+
+const LayoutWarning = memo(() => {
+  const [ctx, { toggleCompare }] = useDiagramCompareLayout();
+  const portalProps = useMantinePortalProps();
+  const { drifts, isActive, isEnabled } = ctx;
+  return /* @__PURE__ */ jsx(AnimatePresence, { propagate: true, children: isEnabled && !isActive && /* @__PURE__ */ jsxs(
+    HoverCard,
+    {
+      position: "bottom-start",
+      openDelay: 600,
+      closeDelay: 200,
+      floatingStrategy: "absolute",
+      offset: {
+        mainAxis: 4,
+        crossAxis: -22
+      },
+      ...portalProps,
+      children: [
+        /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsx(
+          UnstyledButton,
+          {
+            component: m.button,
+            layout: "position",
+            onClick: (e) => {
+              toggleCompare();
+            },
+            whileTap: {
+              scale: 0.95,
+              translateY: 1
+            },
+            className: cx(
+              "group",
+              navigationPanelActionIcon({
+                variant: "filled",
+                type: "warning"
+              }),
+              hstack({
+                gap: "xxs",
+                padding: "1.5",
+                rounded: "sm",
+                userSelect: "none",
+                cursor: "pointer",
+                fontSize: "xs",
+                fontWeight: 600
+              })
+            ),
+            children: isActive ? /* @__PURE__ */ jsx(Fragment, { children: "Stop Compare" }) : /* @__PURE__ */ jsx(IconAlertTriangle, { size: 18 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
+          Notification,
+          {
+            color: "orange",
+            withBorder: false,
+            withCloseButton: false,
+            title: "View is out of sync",
+            children: [
+              /* @__PURE__ */ jsx(Text, { mt: 2, size: "sm", lh: "xs", children: "Model has changed since this view was last updated." }),
+              /* @__PURE__ */ jsxs(Text, { mt: 4, size: "sm", lh: "xs", children: [
+                "Detected changes:",
+                drifts.map((drift) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  /* @__PURE__ */ jsx("br", {}),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "- ",
+                    drift
+                  ] })
+                ] }, drift))
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  mt: "xs",
+                  size: "compact-sm",
+                  variant: "default",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    toggleCompare();
+                  },
+                  children: "Compare with current state"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+});
+LayoutWarning.displayName = "ManualLayoutWarning";
+
+export { LayoutWarning };