@likec4/diagram 1.19.2 → 1.20.0

package/dist/likec4diagram/state/syncManualLayoutActor.d.ts

@@ -0,0 +1,113 @@
+import { ViewChange, ViewId } from '@likec4/core';
+import { ActorRef, ActorRefFromLogic, MachineSnapshot, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
+import type * as Machine from './machine';
+export type Input = {
+    parent: ActorRef<MachineSnapshot<Machine.DiagramContext, Machine.Events, any, any, any, any, any, any>, Machine.Events, any>;
+    viewId: ViewId;
+};
+export type Context = Readonly<Input & {}>;
+export type Events = {
+    type: 'sync';
+} | {
+    type: 'synced';
+} | {
+    type: 'cancel';
+} | {
+    type: 'stop';
+};
+export declare const syncManualLayoutActor: StateMachine<Readonly<Input>, Events, {}, never, {
+    type: "trigger:OnChange";
+    params: {
+        change: ViewChange;
+    };
+}, {
+    type: "same view";
+    params: unknown;
+}, "timeout", "stopped" | "paused" | "synced" | "pending" | "idle", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
+    readonly initial: "idle";
+    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: Input;
+        self: ActorRef<MachineSnapshot<Readonly<Input>, Events, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
+    }) => {
+        parent: ActorRef<MachineSnapshot<Machine.DiagramContext, Machine.Events, any, any, any, any, any, any>, Machine.Events, any>;
+        viewId: ViewId;
+    };
+    readonly states: {
+        readonly idle: {
+            readonly tags: "ready";
+            readonly on: {
+                readonly sync: {
+                    readonly target: "pending";
+                };
+            };
+        };
+        readonly paused: {
+            readonly tags: "pending";
+            readonly on: {
+                readonly sync: {
+                    readonly target: "pending";
+                };
+            };
+        };
+        readonly pending: {
+            readonly tags: "pending";
+            readonly on: {
+                readonly sync: {
+                    readonly target: "pending";
+                    readonly reenter: true;
+                };
+                readonly cancel: {
+                    readonly target: "paused";
+                };
+            };
+            readonly after: {
+                readonly timeout: readonly [{
+                    readonly guard: "same view";
+                    readonly actions: {
+                        readonly type: "trigger:OnChange";
+                        readonly params: ({ context }: {
+                            context: Readonly<Input>;
+                            event: Events;
+                        }) => {
+                            change: ViewChange.SaveManualLayout;
+                        };
+                    };
+                    readonly target: "synced";
+                }, {
+                    readonly target: "stopped";
+                }];
+            };
+        };
+        readonly synced: {
+            readonly tags: "ready";
+            readonly on: {
+                readonly sync: {
+                    readonly target: "pending";
+                };
+            };
+        };
+        readonly stopped: {
+            readonly entry: ActionFunction<Readonly<Input>, Events, Events, undefined, never, never, never, never, never>;
+            readonly type: "final";
+        };
+    };
+    readonly on: {
+        readonly synced: {
+            readonly target: ".synced";
+        };
+        readonly stop: {
+            readonly target: ".stopped";
+        };
+    };
+}>;
+export type SyncLayoutActorRef = ActorRefFromLogic<typeof syncManualLayoutActor>;
+export type SyncLayoutActorSnapshot = SnapshotFrom<typeof syncManualLayoutActor>;

package/dist/likec4diagram/state/syncManualLayoutActor.js

@@ -0,0 +1,178 @@
+import { getNodeDimensions, getBoundsOfRects, boxToRect } from "@xyflow/system";
+import { reduce, hasAtLeast } from "remeda";
+import { setup, assign } from "xstate";
+import { isSamePoint, bezierControlPoints } from "../../utils/xyflow.js";
+const syncManualLayoutActor = setup({
+  types: {
+    context: {},
+    input: {},
+    events: {},
+    tags: ""
+  },
+  delays: {
+    "timeout": 2e3
+  },
+  actions: {
+    "trigger:OnChange": (_, _params) => {
+    }
+  },
+  guards: {
+    "same view": ({ context }) => context.parent.getSnapshot().context.view.id === context.viewId
+  }
+}).createMachine({
+  initial: "idle",
+  context: ({ input }) => ({
+    ...input
+    // parent: input.parent,
+    // viewId: input.parent.getSnapshot().context.view.id,
+  }),
+  states: {
+    idle: {
+      tags: "ready",
+      on: {
+        sync: {
+          target: "pending"
+        }
+      }
+    },
+    paused: {
+      tags: "pending",
+      on: {
+        sync: {
+          target: "pending"
+        }
+      }
+    },
+    pending: {
+      tags: "pending",
+      on: {
+        sync: {
+          target: "pending",
+          reenter: true
+        },
+        cancel: {
+          target: "paused"
+        }
+      },
+      after: {
+        "timeout": [{
+          guard: "same view",
+          actions: {
+            type: "trigger:OnChange",
+            params: ({ context }) => {
+              const change = createViewChange(context.parent.getSnapshot().context);
+              return { change };
+            }
+          },
+          target: "synced"
+        }, {
+          target: "stopped"
+        }]
+      }
+    },
+    synced: {
+      tags: "ready",
+      on: {
+        sync: {
+          target: "pending"
+        }
+      }
+    },
+    "stopped": {
+      entry: assign({
+        parent: null
+      }),
+      type: "final"
+    }
+  },
+  on: {
+    synced: {
+      target: ".synced"
+    },
+    stop: {
+      target: ".stopped"
+    }
+  }
+});
+function createViewChange(parentContext) {
+  const { view, xystore, xyflow } = parentContext;
+  const { nodeLookup } = xystore.getState();
+  const movedNodes = /* @__PURE__ */ new Set();
+  let bounds = {
+    x: 0,
+    y: 0,
+    width: 1,
+    height: 1
+  };
+  const nodes = reduce([...nodeLookup.values()], (acc, node) => {
+    const dimensions = getNodeDimensions(node);
+    if (!isSamePoint(node.internals.positionAbsolute, node.data.position) || node.initialWidth !== dimensions.width || node.initialHeight !== dimensions.height) {
+      movedNodes.add(node.id);
+    }
+    const rect = acc[node.id] = {
+      isCompound: node.type !== "element" && node.type !== "deployment",
+      x: Math.floor(node.internals.positionAbsolute.x),
+      y: Math.floor(node.internals.positionAbsolute.y),
+      width: Math.ceil(dimensions.width),
+      height: Math.ceil(dimensions.height)
+    };
+    bounds = getBoundsOfRects(bounds, rect);
+    return acc;
+  }, {});
+  const edges = reduce((xyflow == null ? void 0 : xyflow.getEdges()) ?? [], (acc, { source, target, data }) => {
+    let controlPoints = data.controlPoints ?? [];
+    const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target);
+    if (controlPoints.length === 0 && sourceOrTargetMoved) {
+      controlPoints = bezierControlPoints(data);
+    }
+    if (data.points.length === 0 && controlPoints.length === 0) {
+      return acc;
+    }
+    const _updated = acc[data.id] = {
+      points: data.points
+    };
+    if (data.labelXY && data.labelBBox) {
+      _updated.labelBBox = {
+        ...data.labelBBox,
+        ...data.labelXY
+      };
+    }
+    if (data.labelBBox) {
+      _updated.labelBBox ?? (_updated.labelBBox = data.labelBBox);
+    }
+    if (hasAtLeast(controlPoints, 1)) {
+      _updated.controlPoints = controlPoints;
+    }
+    const allX = [
+      ...data.points.map((p) => p[0]),
+      ...controlPoints.map((p) => p.x),
+      ..._updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : []
+    ];
+    const allY = [
+      ...data.points.map((p) => p[1]),
+      ...controlPoints.map((p) => p.y),
+      ..._updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : []
+    ];
+    const rect = boxToRect({
+      x: Math.floor(Math.min(...allX)),
+      y: Math.floor(Math.min(...allY)),
+      x2: Math.ceil(Math.max(...allX)),
+      y2: Math.ceil(Math.max(...allY))
+    });
+    bounds = getBoundsOfRects(bounds, rect);
+    return acc;
+  }, {});
+  return {
+    op: "save-manual-layout",
+    layout: {
+      hash: view.hash,
+      autoLayout: view.autoLayout,
+      nodes,
+      edges,
+      ...bounds
+    }
+  };
+}
+export {
+  syncManualLayoutActor
+};

package/dist/likec4diagram/state/utils.d.ts

@@ -0,0 +1,8 @@
+import { BBox } from '@likec4/core';
+import { DiagramContext } from './machine';
+export declare function focusedBounds(params: {
+    context: DiagramContext;
+}): {
+    bounds: BBox;
+    duration?: number;
+};

package/dist/likec4diagram/state/utils.js

@@ -0,0 +1,48 @@
+function focusedBounds(params) {
+  const knownAbsolutes = /* @__PURE__ */ new Map();
+  const b = params.context.xynodes.reduce((acc, node) => {
+    var _a, _b;
+    let position = node.position;
+    if (node.parentId) {
+      const parent = knownAbsolutes.get(node.parentId) ?? { x: 0, y: 0 };
+      position = {
+        x: position.x + parent.x,
+        y: position.y + parent.y
+      };
+    }
+    knownAbsolutes.set(node.id, position);
+    if (node.hidden || node.data.dimmed) {
+      return acc;
+    }
+    const width = ((_a = node.measured) == null ? void 0 : _a.width) ?? node.width ?? node.initialWidth;
+    const height = ((_b = node.measured) == null ? void 0 : _b.height) ?? node.height ?? node.initialHeight;
+    return {
+      minX: Math.min(acc.minX, position.x),
+      minY: Math.min(acc.minY, position.y),
+      maxX: Math.max(acc.maxX, position.x + width),
+      maxY: Math.max(acc.maxY, position.y + height)
+    };
+  }, {
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity
+  });
+  if (b.minX === Infinity) {
+    return {
+      bounds: params.context.view.bounds
+    };
+  }
+  return {
+    duration: 350,
+    bounds: {
+      x: b.minX - 10,
+      y: b.minY - 10,
+      width: b.maxX - b.minX + 20,
+      height: b.maxY - b.minY + 20
+    }
+  };
+}
+export {
+  focusedBounds
+};

package/dist/likec4diagram/types.d.ts

@@ -0,0 +1,74 @@
+import { DiagramEdge, DiagramNode, Fqn, ViewId } from '@likec4/core';
+import { XYPosition } from '@xyflow/system';
+import { OptionalKeysOf, Simplify } from 'type-fest';
+import { Base } from '../base';
+import { ReactFlowEdge, ReactFlowNode } from '../base/types';
+type NonOptional<T extends object> = Simplify<{
+    [P in Exclude<keyof T, OptionalKeysOf<T>>]: T[P];
+} & {
+    [P in OptionalKeysOf<T>]-?: T[P] | undefined;
+}>;
+export declare namespace Types {
+    type LeafNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'position'>> & {
+        icon: string | null;
+    }>;
+    /**
+     * Represents element from logical model
+     */
+    type ElementNodeData = LeafNodeData & {
+        modelFqn: Fqn;
+        deploymentFqn?: never;
+        /**
+         * If set - this node has navigation to another view and diagram has handler for this
+         */
+        navigateTo: ViewId | null;
+    };
+    /**
+     * Represents element from deployment model
+     */
+    type DeploymentElementNodeData = LeafNodeData & {
+        navigateTo: ViewId | null;
+        deploymentFqn: Fqn;
+        modelFqn: Fqn | null;
+    };
+    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'position'>> & {
+        depth: number;
+        icon: string | null;
+    }>;
+    type CompoundElementNodeData = CompoundNodeData & {
+        modelFqn: Fqn;
+        deploymentFqn?: never;
+        /**
+         * If set - this node has navigation to another view and diagram has handler for this
+         */
+        navigateTo: ViewId | null;
+    };
+    type CompoundDeploymentNodeData = CompoundNodeData & {
+        deploymentFqn: Fqn;
+        /**
+         * If set - this node refers to a model element
+         */
+        modelFqn: Fqn | null;
+        /**
+         * If set - this node has navigation to another view and diagram has handler for this
+         */
+        navigateTo: ViewId | null;
+    };
+    type ViewGroupNodeData = CompoundNodeData & {
+        isViewGroup: true;
+    };
+    type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
+    type DeploymentElementNode = ReactFlowNode<DeploymentElementNodeData, 'deployment'>;
+    type CompoundElementNode = ReactFlowNode<CompoundElementNodeData, 'compound-element'>;
+    type CompoundDeploymentNode = ReactFlowNode<CompoundDeploymentNodeData, 'compound-deployment'>;
+    type ViewGroupNode = ReactFlowNode<ViewGroupNodeData, 'view-group'>;
+    type Node = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode;
+    type NodeData = Node['data'];
+    type RelationshipEdgeData = Base.EdgeData<NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'notes'>> & {
+        labelXY: XYPosition | null;
+        controlPoints: XYPosition[] | undefined | null;
+    }>;
+    type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, 'relationship'>;
+    type Edge = RelationshipEdge;
+}
+export {};

package/dist/{ui/top-left → likec4diagram/ui/controls}/ChangeAutoLayoutButton.js

@@ -4,30 +4,34 @@ import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef
 import { useDebouncedCallback } from "@react-hookz/web";
 import { IconLayoutDashboard } from "@tabler/icons-react";
 import { useState, forwardRef } from "react";
-import { useDiagramStoreApi, useDiagramState } from "../../hooks/useDiagramState.js";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { Tooltip, ActionIcon } from "./_shared.js";
 import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from "./styles.css.js";
+import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 const selector = (state) => ({
   viewId: state.view.id,
   autoLayout: state.view.autoLayout
 });
 const ChangeAutoLayoutButton = (props) => {
-  const store = useDiagramStoreApi();
+  const {
+    onChange
+  } = useDiagramEventHandlers();
+  const diagram = useDiagram();
   const [rootRef, setRootRef] = useState(null);
   const [controlsRefs, setControlsRefs] = useState({});
   const {
     autoLayout,
     viewId
-  } = useDiagramState(selector);
+  } = useDiagramContext(selector);
   const { ref, hovered: isSpacingHovered } = useHover();
   const setControlRef = (name) => (node) => {
     controlsRefs[name] = node;
     setControlsRefs(controlsRefs);
   };
   const setAutoLayout = (direction) => (event) => {
-    var _a, _b;
     event.stopPropagation();
-    (_b = (_a = store.getState()).onChange) == null ? void 0 : _b.call(_a, {
+    onChange == null ? void 0 : onChange({
       change: {
         op: "change-autolayout",
         layout: {
@@ -38,11 +42,8 @@ const ChangeAutoLayoutButton = (props) => {
     });
   };
   const setSpacing = (nodeSep, rankSep) => {
-    var _a, _b;
-    store.setState({
-      viewportChanged: false
-    });
-    (_b = (_a = store.getState()).onChange) == null ? void 0 : _b.call(_a, {
+    diagram.fitDiagram();
+    onChange == null ? void 0 : onChange({
       change: {
         op: "change-autolayout",
         layout: {

package/dist/likec4diagram/ui/controls/Controls.d.ts

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

package/dist/likec4diagram/ui/controls/Controls.js

@@ -0,0 +1,102 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Stack, ActionIconGroup, Badge, Loader } from "@mantine/core";
+import { openSpotlight } from "@mantine/spotlight";
+import { IconSearch, IconFileSymlink, IconFocusCentered } from "@tabler/icons-react";
+import { clsx } from "clsx";
+import { memo } from "react";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useDiagramSyncLayoutState } from "../../../hooks/useDiagramActor.js";
+import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { Tooltip, ActionIcon } from "./_shared.js";
+import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
+import { LayoutDriftNotification } from "./LayoutDriftNotification.js";
+import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
+import { NavigationButtons } from "./NavigationButtons.js";
+import { panel, actionIconGroup } from "./styles.css.js";
+import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
+import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
+import { stopPropagation } from "../../../utils/xyflow.js";
+const Controls = memo(() => {
+  const { viewId, hasLayoutDrift, viewportChanged } = useDiagramContext((c) => ({
+    viewId: c.view.id,
+    hasLayoutDrift: c.view.hasLayoutDrift ?? false,
+    viewportChanged: c.viewportChangedManually
+  }));
+  const diagram = useDiagram();
+  const {
+    onOpenSource
+  } = useDiagramEventHandlers();
+  const {
+    enableControls,
+    enableSearch,
+    enableNavigationButtons,
+    enableReadOnly,
+    enableEdgeEditing,
+    enableVscode
+  } = useEnabledFeatures();
+  const notReadOnly = !enableReadOnly;
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: clsx(
+        "react-flow__panel",
+        panel,
+        "likec4-top-left-panel"
+      ),
+      align: "flex-start",
+      onClick: stopPropagation,
+      gap: "xs",
+      children: [
+        enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}),
+        /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
+          enableControls && enableSearch && /* @__PURE__ */ jsx(Tooltip, { label: "Search (Ctrl+F or ⌘+F)", ...portalProps, children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                openSpotlight();
+              },
+              children: /* @__PURE__ */ jsx(IconSearch, {})
+            }
+          ) }),
+          enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onOpenSource == null ? void 0 : onOpenSource({ view: viewId });
+              },
+              children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
+            }
+          ) }),
+          enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
+          enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
+            /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps })
+          ] }),
+          enableControls && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                diagram.fitDiagram();
+              },
+              children: /* @__PURE__ */ jsx(IconFocusCentered, {})
+            }
+          ) })
+        ] }),
+        notReadOnly && /* @__PURE__ */ jsx(SyncLayoutBadge, {})
+      ]
+    }
+  ) });
+});
+const SyncLayoutBadge = () => {
+  const isPending = useDiagramSyncLayoutState((s) => s.hasTag("pending"));
+  if (!isPending) return null;
+  return /* @__PURE__ */ jsx(Badge, { color: "pink", radius: "xs", size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(Loader, { color: "orange", size: 8 }), children: "Pending..." });
+};
+export {
+  Controls
+};

package/dist/likec4diagram/ui/controls/LayoutDriftNotification.d.ts

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

package/dist/likec4diagram/ui/controls/LayoutDriftNotification.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { HoverCard, HoverCardTarget, Overlay, HoverCardDropdown, Notification, Text, Code } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { mantine } from "../../../theme-vars.js";
+import { ActionIcon } from "./_shared.js";
+const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
+  HoverCard,
+  {
+    position: "right-start",
+    openDelay: 200,
+    closeDelay: 100,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsxs(ActionIcon, { c: "orange", children: [
+        /* @__PURE__ */ jsx(Overlay, { color: mantine.colors.orange.lightHover, backgroundOpacity: 1 }),
+        /* @__PURE__ */ jsx(IconAlertTriangle, {})
+      ] }) }),
+      /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
+        Notification,
+        {
+          color: "orange",
+          withBorder: false,
+          withCloseButton: false,
+          title: "Manual layout issues",
+          children: [
+            /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
+              "View contains new elements or their sizes have changed,",
+              /* @__PURE__ */ jsx("br", {}),
+              "last manual layout can not be applied."
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { mt: "xs", size: "sm", lh: "xs", children: [
+              "Update view predicates or remove ",
+              /* @__PURE__ */ jsx(Code, { children: "@likec4-generated" })
+            ] })
+          ]
+        }
+      ) })
+    ]
+  }
+);
+export {
+  LayoutDriftNotification
+};