@likec4/diagram 1.32.0 → 1.32.1

package/bundle/index.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useRef, useCallback, useEffect, useState, useMemo, forwardRef, Fragment, createElement, cloneElement, useId as useId$1, Children, useContext, useInsertionEffect, isValidElement, createContext, Component, useLayoutEffect, memo as memo$2, useDeferredValue } from "react";
-import { u as useCallbackRef, a as useMediaQuery, b as useMantineTheme, c as useMantineStyleNonce, k as keys, e as em, g as getPrimaryShade, d as alpha, r as rem, f as getPrimaryContrastColor, h as deepMerge, D as DEFAULT_THEME, i as useMantineCssVariablesResolver, j as useIsomorphicEffect, M as MantineContext, l as MantineThemeProvider, m as createSafeContext, n as useProps, o as useMergedRef, B as Box, t as toInt, p as useDirection, q as factory, s as useStyles, v as useMergeRefs, w as createVarsResolver, x as polymorphicFactory, U as UnstyledButton, y as getRadius$1, z as getSize, A as createOptionalContext, C as useResolvedStylesApi, E as getFontSize, F as useId, G as extractStyleProps, T as Text, H as clsx, I as getThemeColor, P as Popover, J as isElement, K as getRefProp, L as useUncontrolled, N as Paper, O as getSpacing, Q as filterProps, R as InlineStyles, S as useRandomClassName, V as parseThemeColor, W as Loader, X as createScopedKeydownHandler, Y as getContrastColor, Z as findElementAncestor, _ as useClickOutside, $ as createReactComponent, a0 as C$1, a1 as s$3, a2 as u$6, a3 as MotionConfigContext, a4 as useConstant, a5 as PresenceContext, a6 as useIsomorphicLayoutEffect$1, a7 as LayoutGroupContext, a8 as createRenderBatcher, a9 as featureDefinitions, aa as LazyContext, ab as loadExternalIsValidProp, ac as resolveVariantFromProps, ad as MotionGlobalConfig, ae as isMotionValue, af as optimizedAppearDataAttribute, ag as transformProps, ah as number, ai as alpha$1, aj as clamp$1, ak as percent, al as isCSSVariableToken, am as px$1, an as transformPropOrder, ao as isVariantLabel, ap as variantProps, aq as isAnimationControls, ar as variantPriorityOrder, as as isRefObject, at as SwitchLayoutGroupContext, au as addScaleCorrector, av as microtask, aw as resolveMotionValue, ax as scaleCorrectors, ay as degrees, az as vw, aA as vh, aB as numberValueTypes, aC as isControllingVariants, aD as isVariantNode, aE as hasReducedMotionListener, aF as initPrefersReducedMotion, aG as prefersReducedMotion, aH as isCSSVariableName, aI as buildHTMLStyles, aJ as scrapeMotionValuesFromProps, aK as camelToDash, aL as scrapeMotionValuesFromProps$1, aM as buildSVGAttrs, aN as isSVGTag, aO as isSVGComponent, aP as useDebouncedCallback$1, aQ as isBrowser, aR as isStrictEqual, aS as useUpdateEffect, aT as getPatternStyles, aU as patternFns, aV as splitProps, aW as styled, aX as css, aY as useLikeC4Specification, aZ as useUpdateEffect$1, a_ as n$6, a$ as t$3, b0 as Background$1, b1 as BackgroundVariant, b2 as useIsZoomTooSmall, b3 as useXYStoreApi, b4 as index, b5 as stopPropagation$1, b6 as cx, b7 as useStore, b8 as XSTATE_STOP, b9 as cloneMachineSnapshot, ba as evaluateGuard, bb as createErrorActorEvent, bc as XSTATE_ERROR, bd as ProcessingStatus, be as resolveReferencedActor, bf as createActor, bg as cancel, bh as raise, bi as spawnChild, bj as stopChild, bk as resolveStateValue, bl as getAllStateNodes, bm as getStateNodes, bn as createMachineSnapshot, bo as isInFinalState, bp as macrostep, bq as transitionNode, br as resolveActionsAndContext, bs as createInitEvent, bt as microstep, bu as getInitialStateNodes, bv as toStatePath, bw as isStateId, bx as getStateNodeByPath, by as getPersistedSnapshot, bz as $$ACTOR_TYPE, bA as STATE_DELIMITER, bB as mapValues, bC as toArray, bD as formatTransitions, bE as toTransitionConfigArray, bF as formatTransition, bG as getCandidates, bH as NULL_EVENT, bI as createInvokeId, bJ as getDelayedTransitions, bK as formatInitialTransition, bL as deepEqual, bM as ActionIcon$1, bN as IconZoomScan, bO as sva, bP as Box$1, bQ as n$7, bR as EdgeLabelRenderer, bS as e$3, bT as useDiagramContext, bU as useDiagram, bV as useMantinePortalProps, bW as PopoverTarget, bX as PopoverDropdown, bY as Stack, bZ as Group, b_ as Button, b$ as IconCheck, c0 as cva, c1 as useLikeC4Model, c2 as findDiagramNode, c3 as findDiagramEdge, c4 as Menu, c5 as MenuTarget, c6 as MenuDropdown, c7 as MenuLabel, c8 as MenuDivider, c9 as MenuItem, ca as useEnabledFeatures, cb as useDiagramEventHandlers, cc as TooltipGroup, cd as Space, ce as Tooltip$4, cf as IfEnabled, cg as IconFileSymlink, ch as getNodeDimensions, ci as useIsPanning, cj as useXYFlow, ck as useDiagramActorSnapshot, cl as useXYInternalNode, cm as isSamePoint, cn as bezierControlPoints, co as bezierPath, cp as ViewGroupNode, cq as CompoundDeploymentNode, cr as CompoundElementNode, cs as DeploymentNode, ct as ElementNode$2, cu as shallowEqual, cv as useSelector, cw as getBezierPath, cx as useCurrentViewId, cy as ElementActionButtons, cz as IconTransform, cA as customNode, cB as CompoundNodeContainer, cC as CompoundTitle, cD as ElementNodeContainer, cE as ElementShape, cF as ElementTitle, cG as ElementTags, cH as ElementDetailsButton, cI as Handle, cJ as Position, cK as getDefaultExportFromCjs, cL as l$3, cM as IconSelector, cN as SegmentedControl, cO as ReactFlowProvider, cP as useStoreApi, cQ as useReactFlow, cR as Panel, cS as m$4, cT as u$7, cU as useSyncedRef, cV as IconRenderer, cW as useTimeoutEffect, cX as ReactRemoveScroll, cY as Flex, cZ as ElementTag, c_ as ActionIconGroup, c$ as DiagramFeatures, d0 as Divider$1, d1 as useXYStore, d2 as useReducedMotionConfig, d3 as Overlay, d4 as VisuallyHidden, d5 as MotionDiv, d6 as IconOrShapeRenderer, d7 as MotionButton, d8 as FocusTrap, d9 as HStack, da as t$4, db as isMacOs, dc as FloatingIndicator, dd as clampUseMovePosition, de as useMove, df as HoverCard, dg as HoverCardTarget, dh as HoverCardDropdown, di as useDiagramSyncLayoutState, dj as ButtonGroup, dk as useIsReducedGraphics, dl as usePanningAtom, dm as useTimeout, dn as useCustomCompareMemo, dp as applyEdgeChanges, dq as applyNodeChanges, dr as getViewportForBounds, ds as typedSystem, dt as centerXYInternalNode, du as t$5, dv as getBoundsOfRects, dw as boxToRect, dx as and, dy as AllDisabled, dz as focusedBounds, dA as or, dB as nodeToRect, dC as useDiagramEventHandlersRef, dD as useActorRef, dE as DiagramActorContextProvider, dF as IconRendererProvider, dG as DiagramEventHandlers, dH as ReduceGraphicsContext, dI as RootContainer, dJ as useMutationObserver, dK as t$6, dL as Portal, dM as shallowEqual$1, dN as LikeC4ModelContext } from "./chunk-BvTQaUYl.js";
-import { dO } from "./chunk-BvTQaUYl.js";
+import { u as useCallbackRef, a as useMediaQuery, b as useMantineTheme, c as useMantineStyleNonce, k as keys, e as em, g as getPrimaryShade, d as alpha, r as rem, f as getPrimaryContrastColor, h as deepMerge, D as DEFAULT_THEME, i as useMantineCssVariablesResolver, j as useIsomorphicEffect, M as MantineContext, l as MantineThemeProvider, m as createSafeContext, n as useProps, o as useMergedRef, B as Box, t as toInt, p as useDirection, q as factory, s as useStyles, v as useMergeRefs, w as createVarsResolver, x as polymorphicFactory, U as UnstyledButton, y as getRadius$1, z as getSize, A as createOptionalContext, C as useResolvedStylesApi, E as getFontSize, F as useId, G as extractStyleProps, T as Text, H as clsx, I as getThemeColor, P as Popover, J as isElement, K as getRefProp, L as useUncontrolled, N as Paper, O as getSpacing, Q as filterProps, R as InlineStyles, S as useRandomClassName, V as parseThemeColor, W as Loader, X as createScopedKeydownHandler, Y as getContrastColor, Z as findElementAncestor, _ as useClickOutside, $ as createReactComponent, a0 as C$1, a1 as s$3, a2 as u$6, a3 as MotionConfigContext, a4 as useConstant, a5 as PresenceContext, a6 as useIsomorphicLayoutEffect$1, a7 as LayoutGroupContext, a8 as createRenderBatcher, a9 as featureDefinitions, aa as LazyContext, ab as loadExternalIsValidProp, ac as resolveVariantFromProps, ad as MotionGlobalConfig, ae as isMotionValue, af as optimizedAppearDataAttribute, ag as transformProps, ah as number, ai as alpha$1, aj as clamp$1, ak as percent, al as isCSSVariableToken, am as px$1, an as transformPropOrder, ao as isVariantLabel, ap as variantProps, aq as isAnimationControls, ar as variantPriorityOrder, as as isRefObject, at as SwitchLayoutGroupContext, au as addScaleCorrector, av as microtask, aw as resolveMotionValue, ax as scaleCorrectors, ay as degrees, az as vw, aA as vh, aB as numberValueTypes, aC as isControllingVariants, aD as isVariantNode, aE as hasReducedMotionListener, aF as initPrefersReducedMotion, aG as prefersReducedMotion, aH as isCSSVariableName, aI as buildHTMLStyles, aJ as scrapeMotionValuesFromProps, aK as camelToDash, aL as scrapeMotionValuesFromProps$1, aM as buildSVGAttrs, aN as isSVGTag, aO as isSVGComponent, aP as useDebouncedCallback$1, aQ as isBrowser, aR as getPatternStyles, aS as patternFns, aT as splitProps, aU as styled, aV as css, aW as useLikeC4Specification, aX as useUpdateEffect, aY as n$6, aZ as t$3, a_ as Background$1, a$ as BackgroundVariant, b0 as useIsZoomTooSmall, b1 as useXYStoreApi, b2 as index, b3 as stopPropagation$1, b4 as cx, b5 as useStore, b6 as XSTATE_STOP, b7 as cloneMachineSnapshot, b8 as evaluateGuard, b9 as createErrorActorEvent, ba as XSTATE_ERROR, bb as ProcessingStatus, bc as resolveReferencedActor, bd as createActor, be as cancel, bf as raise, bg as spawnChild, bh as stopChild, bi as resolveStateValue, bj as getAllStateNodes, bk as getStateNodes, bl as createMachineSnapshot, bm as isInFinalState, bn as macrostep, bo as transitionNode, bp as resolveActionsAndContext, bq as createInitEvent, br as microstep, bs as getInitialStateNodes, bt as toStatePath, bu as isStateId, bv as getStateNodeByPath, bw as getPersistedSnapshot, bx as $$ACTOR_TYPE, by as STATE_DELIMITER, bz as mapValues, bA as toArray, bB as formatTransitions, bC as toTransitionConfigArray, bD as formatTransition, bE as getCandidates, bF as NULL_EVENT, bG as createInvokeId, bH as getDelayedTransitions, bI as formatInitialTransition, bJ as deepEqual, bK as ActionIcon$1, bL as IconZoomScan, bM as sva, bN as Box$1, bO as n$7, bP as EdgeLabelRenderer, bQ as e$3, bR as useDiagramContext, bS as useDiagram, bT as useMantinePortalProps, bU as PopoverTarget, bV as PopoverDropdown, bW as Stack, bX as Group, bY as Button, bZ as IconCheck, b_ as cva, b$ as useLikeC4Model, c0 as findDiagramNode, c1 as findDiagramEdge, c2 as Menu, c3 as MenuTarget, c4 as MenuDropdown, c5 as MenuLabel, c6 as MenuDivider, c7 as MenuItem, c8 as useEnabledFeatures, c9 as useDiagramEventHandlers, ca as TooltipGroup, cb as Space, cc as Tooltip$4, cd as IfEnabled, ce as IconFileSymlink, cf as getNodeDimensions, cg as useIsPanning, ch as useXYFlow, ci as useDiagramActorSnapshot, cj as useXYInternalNode, ck as isSamePoint, cl as bezierControlPoints, cm as bezierPath, cn as ViewGroupNode, co as CompoundDeploymentNode, cp as CompoundElementNode, cq as DeploymentNode, cr as ElementNode$2, cs as shallowEqual, ct as useSelector, cu as getBezierPath, cv as useCurrentViewId, cw as ElementActionButtons, cx as IconTransform, cy as customNode, cz as CompoundNodeContainer, cA as CompoundTitle, cB as ElementNodeContainer, cC as ElementShape, cD as ElementTitle, cE as ElementTags, cF as ElementDetailsButton, cG as Handle, cH as Position, cI as getDefaultExportFromCjs, cJ as l$3, cK as IconSelector, cL as SegmentedControl, cM as ReactFlowProvider, cN as useStoreApi, cO as useReactFlow, cP as Panel, cQ as m$4, cR as u$7, cS as useSyncedRef, cT as IconRenderer, cU as useTimeoutEffect, cV as ReactRemoveScroll, cW as Flex, cX as ElementTag, cY as ActionIconGroup, cZ as DiagramFeatures, c_ as Divider$1, c$ as useXYStore, d0 as useReducedMotionConfig, d1 as Overlay, d2 as t$4, d3 as VisuallyHidden, d4 as MotionDiv, d5 as IconOrShapeRenderer, d6 as MotionButton, d7 as FocusTrap, d8 as HStack, d9 as t$5, da as isMacOs, db as FloatingIndicator, dc as clampUseMovePosition, dd as useMove, de as HoverCard, df as HoverCardTarget, dg as HoverCardDropdown, dh as useDiagramSyncLayoutState, di as ButtonGroup, dj as useIsReducedGraphics, dk as usePanningAtom, dl as useTimeout, dm as useCustomCompareMemo, dn as applyEdgeChanges, dp as applyNodeChanges, dq as getViewportForBounds, dr as typedSystem, ds as centerXYInternalNode, dt as t$6, du as getBoundsOfRects, dv as boxToRect, dw as and, dx as AllDisabled, dy as focusedBounds, dz as or, dA as nodeToRect, dB as useDiagramEventHandlersRef, dC as useActorRef, dD as DiagramActorContextProvider, dE as IconRendererProvider, dF as DiagramEventHandlers, dG as ReduceGraphicsContext, dH as RootContainer, dI as useMutationObserver, dJ as Portal, dK as shallowEqual$1, dL as LikeC4ModelContext } from "./chunk-DlHyKoeo.js";
+import { dM, dN } from "./chunk-DlHyKoeo.js";
 import { nonexhaustive, invariant as invariant$1, isStepEdgeId, extractStep, nameFromFqn, nonNullable, toArray as toArray$1, ifind, DefaultMap, ancestorsFqn, hasAtLeast, isAncestor, sortParentsFirst, ifilter, Queue, whereOperatorAsPredicate, GroupElementKind, delay as delay$1, BBox, getParallelStepsPrefix } from "@likec4/core";
 import { computeRelationshipsView, treeFromElements } from "@likec4/core/compute-view/relationships";
 import { compareNatural, ifind as ifind$1, DefaultMap as DefaultMap$1 } from "@likec4/core/utils";
@@ -8975,12 +8975,6 @@ function useDebouncedEffect(callback, deps, delay2, maxWait = 0) {
   useEffect(useDebouncedCallback$1(callback, deps, delay2, maxWait), deps);
 }
 const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-function usePreviousDistinct(value, predicate = isStrictEqual) {
-  const [previousState, setPreviousState] = useState(), currentRef = useRef(value);
-  return useUpdateEffect(() => {
-    predicate(currentRef.current, value) || (setPreviousState(currentRef.current), currentRef.current = value);
-  }, [value]), previousState;
-}
 function EnsureMantine({ children }) {
   const mantineCtx = useContext(MantineContext);
   return useEffect(() => {
@@ -9051,7 +9045,7 @@ function generateCustomColorStyles(customColors) {
 }
 const LikeC4CustomColors = memo$2(() => {
   const customColors = useLikeC4Specification().customColors ?? {}, [styles, setStyles] = useState(() => generateCustomColorStyles(customColors));
-  useUpdateEffect$1(() => {
+  useUpdateEffect(() => {
     setStyles(generateCustomColorStyles(customColors));
   }, [customColors]);
   const nonce = useMantineStyleNonce()?.();
@@ -9253,7 +9247,7 @@ const cssTransparentBg = css({
   onViewportResize
 }) => {
   const square = useStore(selectDimensions);
-  return useUpdateEffect$1(onViewportResize, [square]), null;
+  return useUpdateEffect(onViewportResize, [square]), null;
 }, instanceStates = /* @__PURE__ */ new WeakMap();
 function fromCallback(callback) {
   return {
@@ -15949,7 +15943,7 @@ function ElementDetailsCard({
     min: 0.1,
     max: 0.9
   }), width = useMotionValue(_width), height = useMotionValue(_height);
-  useUpdateEffect$1(() => {
+  useUpdateEffect(() => {
     width.set(_width), height.set(_height);
   }, [_width, _height]);
   const handleDrag = useCallback((_, info) => {
@@ -17230,7 +17224,7 @@ function Overlays({ overlaysActorRef }) {
 }
 const [SearchActorContext, useSearchActor] = createSafeContext("SearchActorContext"), selectSearchValue = (s2) => s2.context.searchValue;
 function useSearch() {
-  const { searchActorRef } = useSearchActor(), searchValue = useSelector(searchActorRef, selectSearchValue), updateSearch = useCallback((search) => {
+  const searchActorRef = useSearchActor(), searchValue = useSelector(searchActorRef, selectSearchValue), updateSearch = useCallback((search) => {
     searchActorRef.send({ type: "change.search", search });
   }, [searchActorRef]);
   return [searchValue, updateSearch];
@@ -17240,18 +17234,18 @@ const selectNormalizedSearchValue = (s2) => {
   return v2.length > 1 ? v2 : "";
 };
 function useNormalizedSearch() {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   return useDeferredValue(useSelector(searchActorRef, selectNormalizedSearchValue));
 }
 function useUpdateSearch() {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   return useCallback((search) => {
     searchActorRef.send({ type: "change.search", search });
   }, [searchActorRef]);
 }
 const selectPickViewFor = (s2) => s2.context.pickViewFor;
 function usePickViewFor() {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   return useSelector(searchActorRef, selectPickViewFor);
 }
 const buttonFocused = css.raw({
@@ -17463,15 +17457,39 @@ function centerY(element) {
   const rect = element.getBoundingClientRect();
   return rect.y + Math.floor(rect.height / 2);
 }
-function moveFocusToSearchInput() {
-  const input2 = document.getElementById("likec4searchinput");
+function moveFocusToSearchInput(from) {
+  if (!from) {
+    console.error("moveFocusToSearchInput: from is null or undefined");
+    return;
+  }
+  const root2 = from.getRootNode();
+  if (!t$4(root2.querySelector)) {
+    console.error("moveFocusToSearchInput: root.querySelector is not a function");
+    return;
+  }
+  let input2 = root2.querySelector("[data-likec4-search-input]");
   if (input2) {
     const length = input2.value.length;
     input2.focus(), input2.setSelectionRange(length, length);
   }
 }
-function focusToFirstFoundElement() {
-  document.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
+function focusToFirstFoundElement(from) {
+  if (!from) {
+    console.error("focusToFirstFoundElement: from is null or undefined");
+    return;
+  }
+  const root2 = from.getRootNode();
+  if (!t$4(root2.querySelector)) {
+    console.error("focusToFirstFoundElement: root.querySelector is not a function");
+    return;
+  }
+  root2.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
+}
+function queryAllFocusable(from, where, selector3 = `.${focusable}`) {
+  if (!from)
+    return console.error("queryAllFocusable: from is null or undefined"), [];
+  const root2 = from.getRootNode();
+  return t$4(root2.querySelectorAll) ? [...root2.querySelectorAll(`[data-likec4-search-${where}] ${selector3}`)] : (console.error("queryAllFocusable: root.querySelectorAll is not a function"), []);
 }
 const _viewBtn = "likec4-view-btn", viewButton = cx(
   css({
@@ -17498,18 +17516,18 @@ css({
   }
 });
 const NothingFound = () => /* @__PURE__ */ jsx(Box$1, { className: emptyBoX, children: "Nothing found" }), ViewsColumn = memo$2(() => {
+  const ref = useRef(null);
   let views = [...useLikeC4Model().views()], search = useNormalizedSearch();
   return search && (search.startsWith("kind:") ? views = [] : views = views.filter((view) => search.startsWith("#") ? view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1))) : (view.title ?? "" + view.$view.description ?? "").toLocaleLowerCase().includes(search))), /* @__PURE__ */ jsxs(
     Stack,
     {
+      ref,
       renderRoot: (props) => /* @__PURE__ */ jsx(MotionDiv, { layout: !0, ...props }),
       gap: 8,
       "data-likec4-search-views": !0,
       onKeyDown: (e2) => {
         if (e2.key === "ArrowLeft" || e2.key === "ArrowRight") {
-          const maxY = e2.target.getBoundingClientRect().y, elementButtons = [...document.querySelectorAll(
-            "[data-likec4-search-elements] .likec4-focusable"
-          )];
+          const maxY = e2.target.getBoundingClientRect().y, elementButtons = queryAllFocusable(ref.current, "elements", ".likec4-element-button");
           let elementButton = elementButtons.length > 1 ? elementButtons.find((el, i2, all) => centerY(el) > maxY || i2 === all.length - 1) : null;
           elementButton ??= d$1(elementButtons), elementButton && (e2.stopPropagation(), elementButton.focus());
           return;
@@ -17523,7 +17541,7 @@ const NothingFound = () => /* @__PURE__ */ jsx(Box$1, { className: emptyBoX, chi
             "data-likec4-view": !0,
             tabIndex: -1,
             onFocus: (e2) => {
-              e2.stopPropagation(), moveFocusToSearchInput();
+              e2.stopPropagation(), moveFocusToSearchInput(ref.current);
             }
           }
         ) }),
@@ -17540,7 +17558,11 @@ const NothingFound = () => /* @__PURE__ */ jsx(Box$1, { className: emptyBoX, chi
   );
 }), btn$2 = buttonsva();
 function ViewButton({ className, view, loop = !1, search, ...props }) {
-  const diagram = useDiagram(), currentViewId = useCurrentViewId(), isCurrentView = view.id === currentViewId;
+  const searchActorRef = useSearchActor(), diagram = useDiagram(), currentViewId = useCurrentViewId(), isCurrentView = view.id === currentViewId, navigate = () => {
+    searchActorRef.send({ type: "close" }), setTimeout(() => {
+      diagram.navigateTo(view.id);
+    }, 100);
+  };
   return /* @__PURE__ */ jsxs(
     UnstyledButton,
     {
@@ -17549,7 +17571,7 @@ function ViewButton({ className, view, loop = !1, search, ...props }) {
       "data-likec4-view": view.id,
       ...isCurrentView && { "data-disabled": !0 },
       onClick: (e2) => {
-        e2.stopPropagation(), diagram.navigateTo(view.id);
+        e2.stopPropagation(), navigate();
       },
       onKeyDown: createScopedKeydownHandler({
         siblingSelector: "[data-likec4-view]",
@@ -17558,7 +17580,7 @@ function ViewButton({ className, view, loop = !1, search, ...props }) {
         loop,
         orientation: "vertical",
         onKeyDown: (e2) => {
-          e2.nativeEvent.code === "Space" && (e2.stopPropagation(), diagram.navigateTo(view.id));
+          e2.nativeEvent.code === "Space" && (e2.stopPropagation(), navigate());
         }
       }),
       children: [
@@ -17636,15 +17658,13 @@ function ElementsTree({
     const target = e2.target, id2 = target.getAttribute("data-value"), node2 = !!id2 && byid[id2];
     if (node2) {
       if (e2.key === "ArrowUp") {
-        id2 === roots[0]?.value && (stopAndPrevent(e2), moveFocusToSearchInput());
+        id2 === roots[0]?.value && (stopAndPrevent(e2), moveFocusToSearchInput(target));
         return;
       }
       if (e2.key === "ArrowRight") {
         if (node2.children.length > 0 && tree.expandedState[id2] === !1)
           return;
-        const maxY = (e2.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y, viewButtons = [...document.querySelectorAll(
-          `[data-likec4-search-views] .${focusable}`
-        )];
+        const maxY = (e2.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y, viewButtons = queryAllFocusable(target, "views");
         let view = viewButtons.length > 1 ? viewButtons.find((el, i2, all2) => centerY(el) > maxY || i2 === all2.length - 1) : null;
         view ??= d$1(viewButtons), view && (stopAndPrevent(e2), view.focus());
         return;
@@ -17751,18 +17771,20 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
   ] });
 }
 function useHandleElementSelection() {
-  const diagram = useDiagram(), { searchActorRef } = useSearchActor();
-  return useCallback((element) => {
+  const diagram = useDiagram(), searchActorRef = useSearchActor();
+  return useCallbackRef((element) => {
     const views = [...element.views()];
     if (views.length === 0)
       return;
     const singleView = t(views);
     if (singleView) {
-      singleView.id === diagram.currentView.id ? searchActorRef.send({ type: "close" }) : diagram.navigateTo(singleView.id);
+      searchActorRef.send({ type: "close" }), singleView.id !== diagram.currentView.id && setTimeout(() => {
+        diagram.navigateTo(singleView.id);
+      }, 100);
       return;
     }
     searchActorRef.send({ type: "pickview.open", elementFqn: element.id });
-  }, []);
+  });
 }
 const input = css({
   border: "transparent",
@@ -17818,7 +17840,7 @@ css({
   }
 });
 function PickView({ elementFqn }) {
-  const { searchActorRef } = useSearchActor(), element = useLikeC4Model().element(elementFqn), scoped = [], others = [];
+  const searchActorRef = useSearchActor(), element = useLikeC4Model().element(elementFqn), scoped = [], others = [];
   for (const view of element.views())
     view.viewOf === element ? scoped.push(view) : others.push(view);
   const closePickView = () => {
@@ -17847,7 +17869,7 @@ function PickView({ elementFqn }) {
       },
       "pickview-backdrop"
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(
       MotionDiv,
       {
         initial: {
@@ -17887,7 +17909,7 @@ function PickView({ elementFqn }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(ScrollAreaAutosize, { mah: "calc(100vh - 8rem - 50px)", type: "never", children: [
+          /* @__PURE__ */ jsxs(ScrollAreaAutosize, { mah: "calc(100vh - 110px)", type: "never", children: [
             scoped.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "sm", px: "sm", className: pickviewGroup, children: [
               /* @__PURE__ */ jsx(Title, { order: 6, c: "dimmed", children: "scoped views of the element" }),
               scoped.map((view, i2) => /* @__PURE__ */ jsx(
@@ -17918,14 +17940,15 @@ function PickView({ elementFqn }) {
                 view.id
               ))
             ] })
-          ] }) })
+          ] })
         ]
       },
       "pickview"
-    )
+    ) })
   ] });
 }
 function SearchByTags() {
+  const ref = useRef(null);
   let tags = useLikeC4Model().tagsSortedByUsage, setSearch = useUpdateSearch(), search = useNormalizedSearch(), countBefore = tags.length;
   if (search.startsWith("#")) {
     const searchTag = search.slice(1);
@@ -17937,6 +17960,7 @@ function SearchByTags() {
   return /* @__PURE__ */ jsxs(
     HStack,
     {
+      ref,
       css: {
         gap: "md",
         paddingLeft: 48,
@@ -17996,7 +18020,7 @@ function SearchByTags() {
                   }),
                   onClick: (e2) => {
                     e2.stopPropagation(), setSearch(`#${tag}`), setTimeout(() => {
-                      focusToFirstFoundElement();
+                      focusToFirstFoundElement(ref.current);
                     }, 350);
                   }
                 },
@@ -18011,7 +18035,7 @@ function SearchByTags() {
             size: "compact-xs",
             variant: "light",
             onClick: (e2) => {
-              e2.stopPropagation(), setSearch(""), moveFocusToSearchInput();
+              e2.stopPropagation(), setSearch(""), moveFocusToSearchInput(ref.current);
             },
             rightSection: /* @__PURE__ */ jsx(IconX, { size: 14 }),
             children: "Clear"
@@ -18025,9 +18049,7 @@ function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
 }
 const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
-  const { close, searchActorRef } = useSearchActor(), likec4model = useLikeC4Model(), { ref, focused } = useFocusWithin(), [search, setSearch] = useSearch();
-  usePreviousDistinct(search);
-  const combobox = useCombobox({
+  const searchActorRef = useSearchActor(), likec4model = useLikeC4Model(), inputRef = useRef(null), { ref, focused } = useFocusWithin(), [search, setSearch] = useSearch(), combobox = useCombobox({
     scrollBehavior: "smooth",
     loop: !1
   });
@@ -18035,7 +18057,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
     "keydown",
     (event) => {
       try {
-        !focused && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u)) && moveFocusToSearchInput();
+        !focused && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u)) && moveFocusToSearchInput(inputRef.current);
       } catch (e2) {
         console.warn(e2);
       }
@@ -18054,24 +18076,24 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
     // }
     case search.startsWith("#"): {
       const searchTag = search.toLocaleLowerCase().slice(1), alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag));
-      isExactMatch = t(alloptions)?.toLocaleLowerCase() === searchTag, alloptions.length === 0 ? options = [
+      alloptions.length === 0 ? (isExactMatch = !1, options = [
         /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")
-      ] : options = alloptions.map((tag) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `#${tag}`, children: [
+      ]) : (isExactMatch = likec4model.tags.some((tag) => tag.toLocaleLowerCase() === searchTag), options = alloptions.map((tag) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `#${tag}`, children: [
         /* @__PURE__ */ jsx(Text, { component: "span", opacity: 0.5, mr: 1, fz: "sm", children: "#" }),
         tag
-      ] }, tag));
+      ] }, tag)));
       break;
     }
     case search.startsWith("kind:"):
     case startingWithKind(search): {
       const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : "";
-      let alloptions = t$4(likec4model.specification.elements);
-      term && (alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term)), isExactMatch = t(alloptions)?.toLocaleLowerCase() === term), alloptions.length === 0 ? options = [
+      let alloptions = t$5(likec4model.specification.elements);
+      term && (alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term))), alloptions.length === 0 ? (isExactMatch = !1, options = [
         /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No kinds found" }, "empty-kinds")
-      ] : options = alloptions.map((kind) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `kind:${kind}`, children: [
+      ]) : (isExactMatch = alloptions.some((kind) => kind.toLocaleLowerCase() === term), options = alloptions.map((kind) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `kind:${kind}`, children: [
         /* @__PURE__ */ jsx(Text, { component: "span", opacity: 0.5, mr: 1, fz: "sm", children: "kind:" }),
         kind
-      ] }, kind));
+      ] }, kind)));
       break;
     }
   }
@@ -18080,7 +18102,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
     {
       onOptionSubmit: (optionValue) => {
         setSearch(optionValue), combobox.resetSelectedOption(), SEARCH_PREFIXES.includes(optionValue) || (combobox.closeDropdown(), setTimeout(() => {
-          focusToFirstFoundElement();
+          focusToFirstFoundElement(inputRef.current);
         }, 350));
       },
       width: "max-content",
@@ -18096,10 +18118,11 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
         /* @__PURE__ */ jsx(ComboboxTarget, { children: /* @__PURE__ */ jsx(
           Input,
           {
-            ref,
-            id: "likec4searchinput",
+            ref: useMergedRef(inputRef, ref),
             placeholder: "Search by title, description or start with # or kind:",
             autoFocus: !0,
+            "data-autofocus": !0,
+            "data-likec4-search-input": !0,
             tabIndex: 0,
             classNames: {
               input
@@ -18113,7 +18136,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
                 onClick: (e2) => {
                   e2.stopPropagation();
                   const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch;
-                  search === "" || search === openedWithSearch ? close() : setSearch("");
+                  search === "" || search === openedWithSearch ? searchActorRef.send({ type: "close" }) : setSearch("");
                 }
               }
             ),
@@ -18154,7 +18177,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
               }
               if (e2.key === "ArrowDown" && (!combobox.dropdownOpened || options.length === 0 || isExactMatch || // reached the last option and the search is empty
               search === "" && combobox.getSelectedOptionIndex() === options.length - 1)) {
-                combobox.closeDropdown(), stopAndPrevent(e2), focusToFirstFoundElement();
+                combobox.closeDropdown(), stopAndPrevent(e2), focusToFirstFoundElement(inputRef.current);
                 return;
               }
             }
@@ -18198,15 +18221,12 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
   //   _dark: `[rgb(34 34 34 / 0.95)]`,
   //   _light: `[rgb(255 255 255/ 0.95)]`,
   // },
-}), selectIsOpened = (s2) => !s2.matches("inactive"), Search = memo$2(({ searchActorRef }) => {
+}), selectIsOpened = (s2) => !s2.matches("inactive");
+function Search({ searchActorRef }) {
   const isOpened = useSelector(searchActorRef, selectIsOpened), openSearch = () => {
     searchActorRef.send({ type: "open" });
-  }, sendClose = () => {
+  }, close = useCallbackRef(() => {
     searchActorRef.send({ type: "close" });
-  }, afterCloseCbRef = useRef(null), close = useCallbackRef((cb) => {
-    afterCloseCbRef.current = cb ?? null, sendClose();
-  }), onExitComplete = useCallbackRef(() => {
-    afterCloseCbRef.current && (afterCloseCbRef.current(), afterCloseCbRef.current = null);
   });
   return useHotkeys([
     ["mod+k", openSearch, {
@@ -18215,34 +18235,26 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
     ["mod+f", openSearch, {
       preventDefault: !0
     }]
-  ]), /* @__PURE__ */ jsx(
-    SearchActorContext,
+  ]), /* @__PURE__ */ jsx(SearchActorContext, { value: searchActorRef, children: /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: close, children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsx(
+    Overlay,
     {
-      value: {
-        searchActorRef,
-        close
+      fullscreen: !0,
+      withBackdrop: !1,
+      backdrop: {
+        opacity: 0.9
       },
-      children: /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: sendClose, children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete, children: isOpened && /* @__PURE__ */ jsx(
-        Overlay,
-        {
-          fullscreen: !0,
-          withBackdrop: !1,
-          backdrop: {
-            opacity: 0.9
-          },
-          classes: {
-            dialog,
-            body
-          },
-          openDelay: 0,
-          onClose: close,
-          "data-likec4-search": "true",
-          children: /* @__PURE__ */ jsx(SearchOverlay, { close, searchActorRef })
-        }
-      ) }) }) }) })
+      classes: {
+        dialog,
+        body
+      },
+      openDelay: 0,
+      onClose: close,
+      "data-likec4-search": "true",
+      children: /* @__PURE__ */ jsx(SearchOverlay, { searchActorRef })
     }
-  );
-}), scrollArea = css({
+  ) }) }) }) });
+}
+const scrollArea = css({
   height: [
     "100%",
     "100cqh"
@@ -18254,18 +18266,18 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
       height: "100%"
     }
   }
-}), SearchOverlay = ({ close, searchActorRef }) => {
-  const pickViewFor = usePickViewFor();
+}), SearchOverlay = ({ searchActorRef }) => {
+  const ref = useRef(null), pickViewFor = usePickViewFor();
   return useTimeoutEffect(() => {
-    n$7(searchActorRef.getSnapshot().context.openedWithSearch) && focusToFirstFoundElement();
-  }, 150), /* @__PURE__ */ jsxs(FocusTrap, { children: [
+    n$7(searchActorRef.getSnapshot().context.openedWithSearch) && focusToFirstFoundElement(ref.current);
+  }, 150), /* @__PURE__ */ jsxs(Box$1, { ref, display: "contents", children: [
     /* @__PURE__ */ jsx(
       Group,
       {
         className: "group",
         wrap: "nowrap",
         onClick: (e2) => {
-          e2.stopPropagation(), moveFocusToSearchInput();
+          e2.stopPropagation(), moveFocusToSearchInput(ref.current);
         },
         children: /* @__PURE__ */ jsxs(VStack, { flex: 1, px: "sm", children: [
           /* @__PURE__ */ jsx(LikeC4SearchInput, {}),
@@ -19791,12 +19803,12 @@ function LikeC4DiagramXYFlow({
     onCanvasDblClick
   } = useDiagramEventHandlers(), notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
     $isPanning.set(!0);
-  }, isReducedGraphics ? 100 : 200), notPanning = useDebouncedCallback(() => {
+  }, isReducedGraphics ? 120 : 200), notPanning = useDebouncedCallback(() => {
     isPanning.clear(), $isPanning.get() && $isPanning.set(!1);
-  }, 200), onMove = useCallbackRef((event) => {
+  }, isReducedGraphics ? 350 : 200), onMove = useCallbackRef((event) => {
     event && ($isPanning.get() || isPanning.start(), notPanning());
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    event && notPanning.flush(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+    event && !isReducedGraphics && notPanning.flush(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   }), nodeTypes2 = useCustomCompareMemo(
@@ -19810,7 +19822,7 @@ function LikeC4DiagramXYFlow({
     [renderNodes],
     shallowEqual
   );
-  return useUpdateEffect$1(() => {
+  return useUpdateEffect(() => {
     console.warn("renderNodes changed - this might degrade performance");
   }, [nodeTypes2]), /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
@@ -20785,7 +20797,7 @@ function layoutResultToXYFlow(layout2) {
   };
 }
 function inputToSubject(input2) {
-  return "edgeId" in input2 ? (invariant$1(t$5(input2.edgeId), "edgeId is required"), {
+  return "edgeId" in input2 ? (invariant$1(t$6(input2.edgeId), "edgeId is required"), {
     edgeId: input2.edgeId
   }) : {
     source: input2.source,
@@ -21130,7 +21142,7 @@ const relationshipDetailsLogic = setup({
   },
   guards: {
     "has overlays?": ({ context }) => context.overlays.length > 0,
-    "close specific overlay?": ({ context, event }) => (assertEvent(event, "close"), t$5(event.actorId) && context.overlays.some((o2) => o2.id === event.actorId)),
+    "close specific overlay?": ({ context, event }) => (assertEvent(event, "close"), t$6(event.actorId) && context.overlays.some((o2) => o2.id === event.actorId)),
     "last: is relationshipDetails?": ({ context }) => a$4(context.overlays)?.type === "relationshipDetails",
     "last: is relationshipsBrowser?": ({ context }) => a$4(context.overlays)?.type === "relationshipsBrowser"
   }
@@ -22680,12 +22692,14 @@ const _diagramMachine = setup({
         "closeAllOverlays",
         "closeSearch",
         "stopSyncLayout",
-        {
-          type: "trigger:NavigateTo",
-          params: ({ context }) => ({
-            viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
-          })
-        }
+        enqueueActions(({ enqueue, context }) => {
+          enqueue({
+            type: "trigger:NavigateTo",
+            params: {
+              viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
+            }
+          });
+        })
       ],
       on: {
         "update.view": {
@@ -22827,7 +22841,7 @@ function DiagramActorProvider({
       "trigger:NavigateTo": (_, { viewId }) => {
         setTimeout(() => {
           handlersRef.current.onNavigateTo?.(viewId);
-        }, 30);
+        }, 40);
       },
       "trigger:OnChange": (_, params) => {
         handlersRef.current.onChange?.(params);
@@ -22898,7 +22912,7 @@ function LikeC4Diagram({
   pannable = !0,
   zoomable = !0,
   background = "dots",
-  enableElementTags = !0,
+  enableElementTags = !1,
   enableFocusMode = !1,
   enableElementDetails = !1,
   enableRelationshipDetails = enableElementDetails,
@@ -23273,7 +23287,7 @@ function useBundledStyleSheet(injectFontCss, styleNonce) {
   return useIsomorphicLayoutEffect(() => {
     if (injectFontCss && !document.querySelector("style[data-likec4-font]")) {
       const style = document.createElement("style");
-      style.setAttribute("type", "text/css"), style.setAttribute("data-likec4-font", ""), t$5(styleNonce) && style.setAttribute("nonce", styleNonce), t$6(styleNonce) && style.setAttribute("nonce", styleNonce()), style.appendChild(document.createTextNode(fontsCss)), document.head.appendChild(style);
+      style.setAttribute("type", "text/css"), style.setAttribute("data-likec4-font", ""), t$6(styleNonce) && style.setAttribute("nonce", styleNonce), t$4(styleNonce) && style.setAttribute("nonce", styleNonce()), style.appendChild(document.createTextNode(fontsCss)), document.head.appendChild(style);
     }
   }, [injectFontCss]), useIsomorphicLayoutEffect(() => {
     const css2 = new CSSStyleSheet();
@@ -23416,8 +23430,12 @@ function LikeC4View({
   viewId,
   ...props
 }) {
-  const likec4model = useLikeC4Model(), view = likec4model?.findView(viewId);
-  return likec4model ? likec4model.stage !== "layouted" ? /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model." }) : !view || !view.isDiagram() ? /* @__PURE__ */ jsx(ViewNotFound, { viewId }) : /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props }) : /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider." });
+  const view = useLikeC4Model().findView(viewId);
+  return view ? view.isDiagram() ? /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props }) : /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+    'LikeC4 View "$',
+    viewId,
+    '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
+  ] }) : /* @__PURE__ */ jsx(ViewNotFound, { viewId });
 }
 const LikeC4ViewInner = memo$2(({
   view,
@@ -23429,7 +23447,7 @@ const LikeC4ViewInner = memo$2(({
   injectFontCss = !0,
   controls = !1,
   fitView = !0,
-  fitViewPadding = "8px",
+  fitViewPadding = "16px",
   background = "transparent",
   browser = !0,
   showDiagramTitle = !1,
@@ -23512,13 +23530,13 @@ const LikeC4ViewInner = memo$2(({
               ...props
             }
           ),
-          browserView && /* @__PURE__ */ jsxs(Overlay, { onClose: () => onNavigateTo(null), children: [
+          browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: () => onNavigateTo(null), children: [
             /* @__PURE__ */ jsx(
               LikeC4Diagram,
               {
                 view: browserView,
                 background: "dots",
-                onNavigateTo: (to) => onNavigateTo(to),
+                onNavigateTo,
                 enableDynamicViewWalkthrough: !0,
                 enableFocusMode: !0,
                 enableRelationshipBrowser: !0,
@@ -23529,11 +23547,11 @@ const LikeC4ViewInner = memo$2(({
                 controls: !0,
                 readonly: !0,
                 fitView: !0,
-                fitViewPadding: "16px",
-                renderNodes,
+                fitViewPadding: "32px",
                 ...props,
                 ...browserProps,
-                showNotations: (browserProps.showNotations ?? !0) && (browserView.notation?.nodes.length ?? 0) > 0
+                showNotations: (browserProps.showNotations ?? !0) && (browserView.notation?.nodes.length ?? 0) > 0,
+                renderNodes
               }
             ),
             /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(
@@ -23558,8 +23576,12 @@ function ReactLikeC4({
   viewId,
   ...props
 }) {
-  const likec4model = useLikeC4Model(), view = likec4model?.findView(viewId);
-  return likec4model ? view ? view.isDiagram() ? /* @__PURE__ */ jsx(ReactLikeC4Inner, { view: view.$view, ...props }) : /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model." }) : /* @__PURE__ */ jsx(ViewNotFound, { viewId }) : /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider." });
+  const view = useLikeC4Model().findView(viewId);
+  return view ? view.isDiagram() ? /* @__PURE__ */ jsx(ReactLikeC4Inner, { view: view.$view, ...props }) : /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+    'LikeC4 View "$',
+    viewId,
+    '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
+  ] }) : /* @__PURE__ */ jsx(ViewNotFound, { viewId });
 }
 function ReactLikeC4Inner({
   className,
@@ -23577,7 +23599,7 @@ function ReactLikeC4Inner({
 }) {
   const colorScheme = useColorScheme(explicitColorScheme), [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view), hasNotations = (view.notation?.nodes ?? []).length > 0;
   let nonce;
-  return t$5(styleNonce) ? nonce = styleNonce : t$6(styleNonce) && (nonce = styleNonce()), /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return t$6(styleNonce) ? nonce = styleNonce : t$4(styleNonce) && (nonce = styleNonce()), /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       "style",
       {
@@ -23634,9 +23656,10 @@ export {
   useEnabledFeatures,
   useLikeC4Model,
   useLikeC4Specification,
+  dM as useLikeC4ViewModel,
   useMantinePortalProps,
-  dO as useSetState,
-  useUpdateEffect$1 as useUpdateEffect,
+  dN as useSetState,
+  useUpdateEffect,
   useXYFlow,
   useXYInternalNode,
   useXYStore,