@likec4/diagram 1.48.0 → 1.49.0

package/dist/search/searchActor.js

@@ -1,4 +1,5 @@
-import { setup, assign, assertEvent } from 'xstate';
+import { setup, assign, assertEvent, enqueueActions } from 'xstate';
+import { typedSystem } from '../likec4diagram/state/utils.js';
 
 const _searchActorLogic = setup({
   types: {
@@ -6,6 +7,18 @@ const _searchActorLogic = setup({
     events: {}
   },
   actions: {
+    "reset navigateTo": assign({
+      navigateTo: () => null
+    }),
+    "assign navigateTo": assign(({ event }) => {
+      assertEvent(event, ["navigate.to"]);
+      return {
+        navigateTo: {
+          viewId: event.viewId,
+          focusOnElement: event.focusOnElement
+        }
+      };
+    }),
     "change searchValue": assign({
       searchValue: ({ event, context }) => {
         assertEvent(event, ["change.search", "open"]);
@@ -21,17 +34,21 @@ const _searchActorLogic = setup({
   context: {
     openedWithSearch: null,
     searchValue: "",
-    pickViewFor: null
+    pickViewFor: null,
+    navigateTo: null
   },
   initial: "inactive",
   on: {
     "close": {
-      target: ".inactive",
-      actions: "reset pickViewFor"
+      target: ".inactive"
     }
   },
   states: {
     inactive: {
+      entry: [
+        "reset navigateTo",
+        "reset pickViewFor"
+      ],
       on: {
         "open": {
           target: "opened",
@@ -57,6 +74,10 @@ const _searchActorLogic = setup({
           actions: assign({
             pickViewFor: ({ event }) => event.elementFqn
           })
+        },
+        "navigate.to": {
+          target: "waitAnimationEnd",
+          actions: "assign navigateTo"
         }
       }
     },
@@ -65,6 +86,41 @@ const _searchActorLogic = setup({
         "pickview.close": {
           target: "opened",
           actions: "reset pickViewFor"
+        },
+        "navigate.to": {
+          target: "waitAnimationEnd",
+          actions: "assign navigateTo"
+        }
+      }
+    },
+    /**
+     * Wait for animation end before triggering navigation
+     * Otherwise, there could be weird artifacts when navigating to large diagrams.
+     */
+    waitAnimationEnd: {
+      on: {
+        "animation.presence.end": {
+          target: "inactive",
+          actions: enqueueActions(({ context, system, enqueue }) => {
+            const navigateTo = context.navigateTo;
+            if (!navigateTo) return;
+            enqueue("reset navigateTo");
+            const diagramActor = typedSystem(system).diagramActorRef;
+            if (navigateTo.focusOnElement) {
+              const viewId = diagramActor.getSnapshot().context.view.id;
+              if (viewId === navigateTo.viewId) {
+                enqueue.sendTo(diagramActor, {
+                  type: "focus.node",
+                  nodeId: navigateTo.focusOnElement
+                });
+                return;
+              }
+            }
+            enqueue.sendTo(diagramActor, {
+              type: "navigate.to",
+              ...navigateTo
+            });
+          })
         }
       }
     }

package/dist/shadowroot/ShadowRoot.d.ts

@@ -1,4 +1,3 @@
-import { MantineThemeOverride } from '@mantine/core';
 import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
 export declare const ShadowRoot: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     injectFontCss?: boolean | undefined;
@@ -10,5 +9,9 @@ export declare const ShadowRoot: ForwardRefExoticComponent<HTMLAttributes<HTMLDi
         width: number;
         height: number;
     };
-    theme?: MantineThemeOverride | undefined;
+    /**
+     * Mantine theme override to apply within the shadow root
+     * @see https://mantine.dev/theming/mantine-provider/#theme-prop
+     */
+    theme?: any;
 } & RefAttributes<HTMLDivElement>>;

package/dist/shadowroot/ShadowRoot.js

@@ -28,7 +28,8 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
 }
   `.trim();
   }
-  const { width, height } = keepAspectRatio;
+  const width = Math.ceil(keepAspectRatio.width);
+  const height = Math.ceil(keepAspectRatio.height);
   const isLandscape = width > height;
   return `
 :where([data-likec4-instance="${instanceId}"]) {
@@ -38,15 +39,15 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
   background: transparent;
   padding: 0;
   overflow: hidden;
-  aspect-ratio: ${Math.ceil(width)} / ${Math.ceil(height)};
+  aspect-ratio: ${width} / ${height};
   ${isLandscape ? "" : `
-  max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(width)}px));
+  max-width: min(100%, var(--likec4-view-max-width, ${width}px));
   margin-left: auto;
   margin-right: auto;`}
   width: ${isLandscape ? "100%" : "auto"};
   height: ${isLandscape ? "auto" : "100%"};
   ${isLandscape ? `min-width: 80px;` : `min-height: 80px;`}
-  max-height: min(100%, var(--likec4-view-max-height, ${Math.ceil(height)}px));
+  max-height: min(100%, var(--likec4-view-max-height, ${height}px));
 }
 `.trim();
 }
@@ -90,9 +91,10 @@ const ShadowRoot = forwardRef(({
             defaultColorScheme: colorScheme,
             getRootElement,
             cssVariablesSelector: ".likec4-shadow-root",
+            withCssVariables: true,
             getStyleNonce,
+            theme,
             ...explicitColorScheme && { forceColorScheme: explicitColorScheme },
-            ...theme && { theme },
             children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })
           }
         )

package/dist/shadowroot/styles.css.js

@@ -1,10 +1,11 @@
 import { css } from '@likec4/styles/css';
-import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback } from '@mantine/hooks';
+import { useColorScheme as useColorScheme$1, useMutationObserver } from '@mantine/hooks';
 import { useIsomorphicLayoutEffect } from '@react-hookz/web';
 import { useState } from 'react';
 import { isString, isFunction, first } from 'remeda';
 import fontsCss from '../styles-font.css2.js';
 import inlinedStyles from '../styles.css2.js';
+import { useCallbackRef } from '../hooks/useCallbackRef.js';
 
 css({
   cursor: "pointer",
@@ -57,7 +58,7 @@ function useColorScheme(explicit) {
   const preferred = useColorScheme$1();
   const [computed, setComputed] = useState(getComputedColorScheme);
   useMutationObserver(
-    useDebouncedCallback(() => setComputed(getComputedColorScheme), 100),
+    useCallbackRef(() => setComputed(getComputedColorScheme)),
     {
       attributes: true,
       childList: false,