@likec4/diagram 1.22.0 → 1.23.0

package/dist/hooks/useDiagram.js

@@ -1,8 +1,12 @@
+import "@likec4/core";
+import { useCallbackRef } from "@mantine/hooks";
+import { useSelector } from "@xstate/react";
+import { shallowEqual } from "fast-equals";
 import { useTransition, useMemo } from "react";
-import { useDiagramActor } from "./useDiagramActor.js";
-import { DiagramContext } from "../likec4diagram/state/machine.js";
+import { findDiagramEdge, findDiagramNode } from "../state/utils.js";
+import { useDiagramActorRef } from "./safeContext.js";
 function useDiagram() {
-  const actor = useDiagramActor();
+  const actor = useDiagramActorRef();
   const [, startTransition] = useTransition();
   return useMemo(() => ({
     send: actor.send,
@@ -43,11 +47,6 @@ function useDiagram() {
         actor.send({ type: "open.relationshipDetails", edgeId });
       });
     },
-    closeOverlay: () => {
-      startTransition(() => {
-        actor.send({ type: "close.overlay" });
-      });
-    },
     updateNodeData: (nodeId, data) => {
       actor.send({ type: "update.nodeData", nodeId, data });
     },
@@ -66,7 +65,8 @@ function useDiagram() {
      * @returns true if there was pending request to save layout
      */
     cancelSaveManualLayout: () => {
-      const syncState = actor.getSnapshot().context.syncLayoutActorRef.getSnapshot().value;
+      var _a;
+      const syncState = (_a = actor.getSnapshot().children.syncLayout) == null ? void 0 : _a.getSnapshot().value;
       actor.send({ type: "saveManualLayout.cancel" });
       return syncState === "pending" || syncState === "paused";
     },
@@ -82,11 +82,13 @@ function useDiagram() {
     /**
      * @warning Do not use in render phase
      */
-    currentView: () => actor.getSnapshot().context.view,
+    get currentView() {
+      return actor.getSnapshot().context.view;
+    },
     /**
      * @warning Do not use in render phase
      */
-    getState: () => actor.getSnapshot(),
+    getSnapshot: () => actor.getSnapshot(),
     /**
      * @warning Do not use in render phase
      */
@@ -95,13 +97,13 @@ function useDiagram() {
      * @warning Do not use in render phase
      */
     findDiagramNode: (xynodeId) => {
-      return DiagramContext.findDiagramNode(actor.getSnapshot().context, xynodeId);
+      return findDiagramNode(actor.getSnapshot().context, xynodeId);
     },
     /**
      * @warning Do not use in render phase
      */
     findDiagramEdge: (xyedgeId) => {
-      return DiagramContext.findDiagramEdge(actor.getSnapshot().context, xyedgeId);
+      return findDiagramEdge(actor.getSnapshot().context, xyedgeId);
     },
     startWalkthrough: () => {
       actor.send({ type: "walkthrough.start" });
@@ -111,9 +113,22 @@ function useDiagram() {
     },
     stopWalkthrough: () => {
       actor.send({ type: "walkthrough.end" });
+    },
+    toggleFeature: (feature, forceValue) => {
+      actor.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
     }
   }), [actor]);
 }
+function useDiagramActorSnapshot(selector, compare = shallowEqual) {
+  const actorRef = useDiagramActorRef();
+  return useSelector(actorRef, useCallbackRef(selector), compare);
+}
+function useDiagramContext(selector, compare = shallowEqual) {
+  return useDiagramActorSnapshot(useCallbackRef((s) => selector(s.context)), compare);
+}
 export {
-  useDiagram
+  useDiagram,
+  useDiagramActorRef,
+  useDiagramActorSnapshot,
+  useDiagramContext
 };

package/dist/index.js

@@ -1,4 +1,4 @@
-/* empty css                                          */
+/* empty css                                                                                                                                                  */
 import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
 import { LikeC4Diagram } from "./LikeC4Diagram.js";
 import { Overlay } from "./overlays/overlay/Overlay.js";

package/dist/likec4diagram/DiagramUI.js

@@ -1,17 +1,24 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useDiagramActorSnapshot } from "../hooks/useDiagram.js";
 import { Overlays } from "../overlays/Overlays.js";
+import { useEnabledFeatures } from "../context/DiagramFeatures.js";
 import { Controls } from "./ui/controls/Controls.js";
-import { IfEnabled } from "../context/DiagramFeatures.js";
 import { DiagramTitlePanel } from "./ui/diagram-title/DiagramTitlePanel.js";
 import { NotationPanel } from "./ui/notation/NotationPanel.js";
 import { DynamicViewWalkthrough } from "./ui/walkthrough/DynamicViewWalkthrough.js";
 function DiagramUI() {
+  const {
+    enableViewTitle,
+    enableNotations,
+    enableDynamicViewWalkthrough
+  } = useEnabledFeatures();
+  const overlaysActorRef = useDiagramActorSnapshot((s) => s.children.overlays);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
-    /* @__PURE__ */ jsx(Overlays, {}),
-    /* @__PURE__ */ jsx(IfEnabled, { feature: "ViewTitle", children: /* @__PURE__ */ jsx(DiagramTitlePanel, {}) }),
-    /* @__PURE__ */ jsx(IfEnabled, { feature: "Notations", children: /* @__PURE__ */ jsx(NotationPanel, {}) }),
-    /* @__PURE__ */ jsx(IfEnabled, { feature: "DynamicViewWalkthrough", children: /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}) })
+    overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
+    enableViewTitle && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
+    enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
+    enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {})
   ] });
 }
 export {

package/dist/likec4diagram/XYFlow.js

@@ -5,8 +5,7 @@ import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
 import { memo } from "react";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
-import { useDiagram } from "../hooks/useDiagram.js";
-import { useDiagramContext } from "../hooks/useDiagramContext.js";
+import { useDiagram, useDiagramContext } from "../hooks/useDiagram.js";
 import { edgeTypes } from "./custom/index.js";
 import { DiagramUI } from "./DiagramUI.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
@@ -20,9 +19,16 @@ const selectXYProps = (ctx) => ({
   zoomable: ctx.zoomable,
   fitViewPadding: ctx.fitViewPadding,
   enableFitView: ctx.features.enableFitView,
-  enableReadOnly: ctx.features.enableReadOnly
+  enableReadOnly: ctx.features.enableReadOnly || ctx.toggledFeatures.enableReadOnly,
+  ...!ctx.features.enableFitView && {
+    viewport: {
+      x: -Math.min(ctx.view.bounds.x, 0),
+      y: -Math.min(ctx.view.bounds.y, 0),
+      zoom: 1
+    }
+  }
 });
-const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
+const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport, b.viewport);
 const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable }) => {
   const diagram = useDiagram();
   const {
@@ -110,7 +116,7 @@ const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable
       ...enableFitView && {
         onViewportResize
       },
-      nodesDraggable,
+      nodesDraggable: notReadOnly && nodesDraggable,
       nodesSelectable,
       ...notReadOnly && nodesDraggable && layoutConstraints,
       ...props,

package/dist/likec4diagram/custom/edges/NotePopover.js

@@ -3,8 +3,7 @@ import { Popover, PopoverTarget, PopoverDropdown, Stack, ScrollAreaAutosize, Tex
 import { useDebouncedEffect } from "@react-hookz/web";
 import { useState } from "react";
 import { isTruthy, isNonNull } from "remeda";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
 import { edgeNoteText, edgeNoteCloseButton } from "./NotePopover.css.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
 import { stopPropagation } from "../../../utils/xyflow.js";

package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts

@@ -7,9 +7,9 @@ export declare const RelationshipEdge: NamedExoticComponent<{
     target: string;
     style?: CSSProperties;
     id: string;
+    selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
-    selected?: boolean;
     animated?: boolean;
     sourceX: number;
     sourceY: number;

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -241,7 +241,7 @@ const RelationshipEdge = customEdge((props) => {
   let renderLabel;
   if (!isControlPointDragging) {
     const notes = props.data.notes;
-    if (notes && isStepEdgeId(props.id) && ((_a = diagram.getState().context.activeWalkthrough) == null ? void 0 : _a.stepId) === props.id) {
+    if (notes && isStepEdgeId(props.id) && ((_a = diagram.getContext().activeWalkthrough) == null ? void 0 : _a.stepId) === props.id) {
       renderLabel = (props2) => /* @__PURE__ */ jsx(NotePopover, { notes, children: /* @__PURE__ */ jsx("div", { ...props2 }) });
     } else if (enableRelationshipDetails) {
       renderLabel = (props2) => /* @__PURE__ */ jsx(

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -6,9 +6,8 @@ import clsx from "clsx";
 import { useCallback, Fragment as Fragment$1, forwardRef } from "react";
 import { pipe, map, filter, isTruthy, partition } from "remeda";
 import { Link } from "../../../components/Link.js";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
-import { DiagramContext } from "../../state/machine.js";
+import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
+import { findDiagramNode, findDiagramEdge } from "../../../state/utils.js";
 import { menuDropdown, endpoint, title, menuItemRelationship } from "./RelationshipsDropdownMenu.css.js";
 import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
@@ -33,9 +32,9 @@ function RelationshipsDropdownMenu({
   children
 }) {
   const { diagramEdge, sourceNode, targetNode } = useDiagramContext((ctx) => ({
-    diagramEdge: DiagramContext.findDiagramEdge(ctx, edgeId),
-    sourceNode: DiagramContext.findDiagramNode(ctx, source),
-    targetNode: DiagramContext.findDiagramNode(ctx, target)
+    diagramEdge: findDiagramEdge(ctx, edgeId),
+    sourceNode: findDiagramNode(ctx, source),
+    targetNode: findDiagramNode(ctx, target)
   }));
   const likec4model = useLikeC4Model(true);
   const diagram = useDiagram();
@@ -142,7 +141,7 @@ const Relationship = forwardRef(({
   const diagram = useDiagram();
   const { enableNavigateTo } = useEnabledFeature("NavigateTo");
   const { onOpenSource } = useDiagramEventHandlers();
-  const viewId = diagram.currentView().id;
+  const viewId = diagram.currentView.id;
   const sourceId = getShortId(r, r.source.id, sourceNode);
   const targetId = getShortId(r, r.target.id, targetNode);
   const navigateTo = enableNavigateTo && ((_a = r.navigateTo) == null ? void 0 : _a.id) !== viewId ? (_b = r.navigateTo) == null ? void 0 : _b.id : void 0;

package/dist/likec4diagram/custom/index.d.ts

@@ -8,9 +8,9 @@ export declare const edgeTypes: {
         target: string;
         style?: CSSProperties;
         id: string;
+        selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
-        selected?: boolean;
         animated?: boolean;
         sourceX: number;
         sourceY: number;

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js

@@ -3,7 +3,7 @@ import { Paper, Stack, Box, Text, Group } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { NodeToolbar } from "@xyflow/react";
 import clsx from "clsx";
-import { useDiagramContext } from "../../../../hooks/useDiagramContext.js";
+import { useDiagramContext } from "../../../../hooks/useDiagram.js";
 import { stopPropagation } from "../../../../utils/xyflow.js";
 import { toolbarTitle } from "./styles.css.js";
 const useSelectedNodesCount = () => {

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

@@ -4,8 +4,7 @@ import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef
 import { useDebouncedCallback } from "@react-hookz/web";
 import { IconLayoutDashboard } from "@tabler/icons-react";
 import { useState, forwardRef } from "react";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { useDiagram, useDiagramContext } from "../../../hooks/useDiagram.js";
 import { Tooltip, ActionIcon } from "./_shared.js";
 import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from "./styles.css.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";

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

@@ -1,12 +1,10 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Group, Stack, ActionIconGroup, Badge, Loader } from "@mantine/core";
+import { Group, Stack, ActionIconGroup } from "@mantine/core";
 import { IconMenu2, IconFileSymlink, IconFocusCentered } from "@tabler/icons-react";
 import { clsx } from "clsx";
 import { LayoutGroup } from "framer-motion";
 import { memo } from "react";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useDiagramSyncLayoutState } from "../../../hooks/useDiagramActor.js";
-import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
 import { LikeC4Search } from "../search/LikeC4Search.js";
 import { ActionIcon, Tooltip } from "./_shared.js";
 import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
@@ -14,6 +12,7 @@ import { LayoutDriftNotification } from "./LayoutDriftNotification.js";
 import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
 import { NavigationButtons } from "./NavigationButtons.js";
 import { navigationButtons, actionIconGroup, panel } from "./styles.css.js";
+import { ToggleReadonly } from "./ToggleReadonly.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
@@ -82,6 +81,7 @@ const Controls = memo(() => {
                 children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
               }
             ) }),
+            enableControls && /* @__PURE__ */ jsx(ToggleReadonly, {}),
             enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
             enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
@@ -99,19 +99,11 @@ const Controls = memo(() => {
             ) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(Group, { children: [
-          enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}),
-          notReadOnly && /* @__PURE__ */ jsx(SyncLayoutBadge, {})
-        ] })
+        /* @__PURE__ */ jsx(Group, { children: enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}) })
       ]
     }
   );
 });
-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/NavigationButtons.js

@@ -1,8 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { AnimatePresence, m } from "framer-motion";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { useDiagram, useDiagramContext } from "../../../hooks/useDiagram.js";
 import { ActionIcon } from "./_shared.js";
 const NavigationButtons = () => {
   const diagram = useDiagram();

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

@@ -0,0 +1 @@
+export declare const ToggleReadonly: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { IconLock, IconLockOpen2 } from "@tabler/icons-react";
+import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
+import { Tooltip, ActionIcon } from "./_shared.js";
+const selector = (state) => ({
+  visible: state.features.enableReadOnly !== true,
+  isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly
+});
+const ToggleReadonly = () => {
+  const { visible, isReadOnly } = useDiagramContext(selector);
+  const diagram = useDiagram();
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { label: isReadOnly ? "Enable editing" : "Disable editing", children: /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.toggleFeature("ReadOnly");
+      },
+      children: isReadOnly ? /* @__PURE__ */ jsx(IconLock, {}) : /* @__PURE__ */ jsx(IconLockOpen2, {})
+    }
+  ) });
+};
+export {
+  ToggleReadonly
+};

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -5,17 +5,16 @@ import { IconMenu } from "@tabler/icons-react";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
 import { Link } from "../../../components/Link.js";
-import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { useDiagramContext } from "../../../hooks/useDiagram.js";
 import { card, title, description, container } from "./DiagramTitlePanel.css.js";
-const selector = (s) => ({
-  id: s.view.id,
-  title: s.view.title ?? "untitled",
-  description: s.view.description,
-  links: s.view.links,
-  isNotActiveWalkthrough: s.activeWalkthrough === null
-});
 function DiagramTitlePanel() {
-  const { id, title: title$1, description: description$1, links, isNotActiveWalkthrough } = useDiagramContext(selector);
+  const { id, title: title$1, description: description$1, links, isNotActiveWalkthrough } = useDiagramContext((s) => ({
+    id: s.view.id,
+    title: s.view.title ?? "untitled",
+    description: s.view.description,
+    links: s.view.links,
+    isNotActiveWalkthrough: s.activeWalkthrough === null
+  }));
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-webview-collapsed",
     defaultValue: false

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -7,8 +7,7 @@ import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
 import { memo, useState } from "react";
 import { ceil, isNonNullish } from "remeda";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
 import { useXYStore } from "../../../hooks/useXYFlow.js";
 import { container, card, tabPanel, elementNotation, shapeBadge } from "./NotationPanel.css.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";

package/dist/likec4diagram/ui/search/LikeC4Search.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Portal, RemoveScroll, Group, Box, ActionIcon, Grid, GridCol, Title, ScrollArea, ScrollAreaAutosize, Stack } from "@mantine/core";
-import { useDisclosure, useHotkeys, useCallbackRef, useFocusTrap, useFocusWithin, useMergedRef, useWindowEvent, useFocusReturn } from "@mantine/hooks";
+import { useDisclosure, useHotkeys, useCallbackRef, useFocusTrap, useWindowEvent, useFocusReturn } from "@mantine/hooks";
 import { IconX } from "@tabler/icons-react";
 import { AnimatePresence, m, LayoutGroup } from "framer-motion";
 import { useRef } from "react";
@@ -71,9 +71,7 @@ function LikeC4Search() {
 }
 function LikeC4SearchOverlay() {
   const close = useCloseSearch();
-  const focusTrapRef = useFocusTrap();
-  const { ref: forcusRef, focused } = useFocusWithin();
-  const ref = useMergedRef(forcusRef, focusTrapRef);
+  const ref = useFocusTrap();
   useWindowEvent(
     "keydown",
     (event) => {

package/dist/likec4diagram/ui/search/ViewsColum.js

@@ -5,12 +5,12 @@ import { IconStack2, IconZoomScan } from "@tabler/icons-react";
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { first } from "remeda";
+import { useCurrentViewId } from "../../../hooks/useCurrentViewId.js";
 import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
 import { emptyBoX } from "./_shared.css.js";
 import { useNormalizedSearch, useCloseSearchAndNavigateTo } from "./state.js";
 import { moveFocusToSearchInput, centerY } from "./utils.js";
 import { viewTitle, viewDescription, focusable, viewButton } from "./ViewsColumn.css.js";
-import { useCurrentViewId } from "../../../hooks/useCurrentViewId.js";
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 function ViewsColumn() {
   const search = useNormalizedSearch();

package/dist/likec4diagram/ui/search/state.js

@@ -50,7 +50,7 @@ function useCloseSearchAndNavigateTo() {
       fromElementFqn ?? (fromElementFqn = (_a = $pickView.get()) == null ? void 0 : _a.elementFqn);
       setPickView(null);
       const fromNode = fromElementFqn ? (_b = diagram.getContext().view.nodes.find((n) => DiagramNode.modelRef(n) === fromElementFqn)) == null ? void 0 : _b.id : void 0;
-      if (diagram.currentView().id === viewId && fromNode) {
+      if (diagram.currentView.id === viewId && fromNode) {
         diagram.focusNode(fromNode);
         return;
       }

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js

@@ -4,8 +4,7 @@ import { IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, I
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
 import { isTruthy, isNonNull } from "remeda";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
 import { parallelStateFrame, btn, buttons, container } from "./DynamicViewWalkthrough.css.js";
 import { useXYStore } from "../../../hooks/useXYFlow.js";
 function DynamicViewWalkthrough() {

package/dist/likec4diagram/useViewToNodesEdges.d.ts

@@ -3,7 +3,6 @@ import { Types } from './types';
 export declare function useViewToNodesEdges({ view: { id, nodes, edges, __, }, ...opts }: {
     view: DiagramView;
     where: WhereOperator<string, string> | undefined;
-    nodesDraggable: boolean;
     nodesSelectable: boolean;
 }): {
     xynodes: Types.Node[];

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -6,7 +6,6 @@ function viewToNodesEdge(opts) {
   var _a;
   const {
     view,
-    nodesDraggable: draggable,
     nodesSelectable: selectable
   } = opts;
   view.__ === "dynamic";
@@ -56,7 +55,6 @@ function viewToNodesEdge(opts) {
     const id = ns + node.id;
     const base = {
       id,
-      draggable,
       selectable: selectable && node.kind !== ElementKind.Group,
       focusable: selectable && !isCompound,
       deletable: false,

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Accordion/Accordion.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Affix/Affix.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Alert/Alert.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Anchor/Anchor.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/AngleSlider/AngleSlider.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/AppShell/AppShell.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Avatar/Avatar.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/BackgroundImage/BackgroundImage.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Badge/Badge.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Blockquote/Blockquote.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Breadcrumbs/Breadcrumbs.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Burger/Burger.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Button/Button.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Card/Card.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Center/Center.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Checkbox/Checkbox.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Checkbox/CheckboxCard/CheckboxCard.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Chip/Chip.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/CloseButton/CloseButton.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Code/Code.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/ColorInput/ColorInput.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/ColorPicker/ColorPicker.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/ColorSwatch/ColorSwatch.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Combobox/Combobox.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Container/Container.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Dialog/Dialog.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Divider/Divider.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Drawer/Drawer.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Fieldset/Fieldset.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Flex/Flex.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/FloatingIndicator/FloatingIndicator.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Grid/Grid.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Group/Group.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+