@likec4/diagram 1.47.0 → 1.49.0

package/dist/search/components/PickView.js

@@ -1,15 +1,18 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FocusTrap, Group, Title, ActionIcon, ScrollAreaAutosize, Stack } from '@mantine/core';
-import { useWindowEvent } from '@mantine/hooks';
+import { useWindowEvent, useCallbackRef } from '@mantine/hooks';
 import * as m from 'motion/react-m';
+import { useCurrentViewId } from '../../hooks/useCurrentView.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useSearchActor } from '../hooks.js';
 import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
 import { ViewButton } from './ViewsColum.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
-function PickView({ elementFqn }) {
-  const searchActorRef = useSearchActor();
+function PickView({
+  searchActorRef,
+  elementFqn
+}) {
+  const currentViewId = useCurrentViewId();
   const element = useLikeC4Model().element(elementFqn);
   const scoped = [];
   const others = [];
@@ -25,7 +28,7 @@ function PickView({ elementFqn }) {
   };
   useWindowEvent(
     "keydown",
-    (event) => {
+    useCallbackRef((event) => {
       try {
         if (event.key === "Escape") {
           event.stopPropagation();
@@ -35,7 +38,7 @@ function PickView({ elementFqn }) {
       } catch (e) {
         console.warn(e);
       }
-    },
+    }),
     {
       capture: true
     }
@@ -100,6 +103,7 @@ function PickView({ elementFqn }) {
                 ViewButton,
                 {
                   view,
+                  currentViewId,
                   search: "",
                   loop: true,
                   focusOnElement: elementFqn,
@@ -116,6 +120,7 @@ function PickView({ elementFqn }) {
                 ViewButton,
                 {
                   view,
+                  currentViewId,
                   search: "",
                   loop: true,
                   focusOnElement: elementFqn,

package/dist/search/components/SearchByTags.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
 import { ElementTag } from '../../base-primitives/element/ElementTags.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function SearchByTags() {
   const ref = useRef(null);

package/dist/search/components/SearchInput.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor, useSearch } from '../hooks.js';
 import { input } from './styles.css.js';
 import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
@@ -56,7 +56,7 @@ const LikeC4SearchInput = memo(() => {
           /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")
         ];
       } else {
-        isExactMatch = likec4model.tags.some((tag) => tag.toLocaleLowerCase() === searchTag);
+        isExactMatch = alloptions.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

package/dist/search/components/ViewsColum.d.ts

@@ -4,8 +4,9 @@ import { ElementProps, UnstyledButtonProps } from '@mantine/core';
 import { MemoExoticComponent } from 'react';
 export declare const NothingFound: () => import("react/jsx-runtime").JSX.Element;
 export declare const ViewsColumn: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
-export declare function ViewButton({ className, view, loop, search, focusOnElement, ...props }: {
+export declare function ViewButton({ className, view, loop, search, focusOnElement, currentViewId, ...props }: {
     view: LikeC4Model.View;
+    currentViewId: string;
     search: string;
     loop?: boolean;
     focusOnElement?: Fqn;

package/dist/search/components/ViewsColum.js

@@ -1,39 +1,47 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { preferSummary } from '@likec4/core/types';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
-import { Stack, VisuallyHidden, UnstyledButton, createScopedKeydownHandler, ThemeIcon, Group, Highlight, Badge } from '@mantine/core';
+import { Stack, VisuallyHidden, UnstyledButton, ThemeIcon, Group, Highlight, Badge, createScopedKeydownHandler } from '@mantine/core';
 import * as m from 'motion/react-m';
-import { memo, useRef } from 'react';
+import { memo, useRef, useMemo } from 'react';
 import { first } from 'remeda';
 import { useCurrentViewId } from '../../hooks/useCurrentView.js';
-import '@xstate/react';
-import 'fast-equals';
-import { useDiagram } from '../../hooks/safeContext.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
-import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
-import { moveFocusToSearchInput, queryAllFocusable, centerY, whenSearchAnimationEnds } from './utils.js';
+import { emptyBoX, focusable, buttonsva } from './_shared.css.js';
+import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
+const useFoundViews = () => {
+  const currentViewId = useCurrentViewId();
+  const likec4model = useLikeC4Model();
+  const search = useNormalizedSearch();
+  return useMemo(() => {
+    let views = [...likec4model.views()];
+    if (search) {
+      if (search.startsWith("kind:")) {
+        views = [];
+      } else {
+        const searchTag = search.startsWith("#") ? search.slice(1) : null;
+        views = views.filter((view) => {
+          if (searchTag) {
+            return view.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
+          }
+          const desc = preferSummary(view.$view)?.md || " ";
+          return `${view.id} ${view.title} ${desc}`.toLocaleLowerCase().includes(search);
+        });
+      }
+    }
+    return [views, search, currentViewId];
+  }, [likec4model, search, currentViewId]);
+};
 const ViewsColumn = memo(() => {
   const ref = useRef(null);
-  let views = [...useLikeC4Model().views()];
-  let search = useNormalizedSearch();
-  if (search) {
-    if (search.startsWith("kind:")) {
-      views = [];
-    } else {
-      views = views.filter((view) => {
-        if (search.startsWith("#")) {
-          return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)));
-        }
-        return `${view.id} ${view.title} ${view.description.text}`.toLocaleLowerCase().includes(search);
-      });
-    }
-  }
+  const [views, search, currentViewId] = useFoundViews();
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -71,6 +79,7 @@ const ViewsColumn = memo(() => {
           ViewButton,
           {
             view,
+            currentViewId,
             search,
             tabIndex: i === 0 ? 0 : -1
           }
@@ -80,20 +89,15 @@ const ViewsColumn = memo(() => {
   );
 });
 const btn = buttonsva();
-function ViewButton({ className, view, loop = false, search, focusOnElement, ...props }) {
+function ViewButton({ className, view, loop = false, search, focusOnElement, currentViewId, ...props }) {
   const searchActorRef = useSearchActor();
-  const diagram = useDiagram();
   const nextViewId = view.id;
-  const currentViewId = useCurrentViewId();
   const isCurrentView = nextViewId === currentViewId;
   const navigate = () => {
-    searchActorRef.send({ type: "close" });
-    whenSearchAnimationEnds(() => {
-      if (isCurrentView && focusOnElement) {
-        diagram.focusOnElement(focusOnElement);
-        return;
-      }
-      diagram.navigateTo(nextViewId, void 0, focusOnElement);
+    searchActorRef.send({
+      type: "navigate.to",
+      viewId: nextViewId,
+      focusOnElement
     });
   };
   return /* @__PURE__ */ jsxs(
@@ -124,7 +128,7 @@ function ViewButton({ className, view, loop = false, search, focusOnElement, ...
         /* @__PURE__ */ jsx(ThemeIcon, { variant: "transparent", className: btn.icon, children: view.isDeploymentView() ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
         /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1 }, children: [
           /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
-            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: search, className: btn.title, children: view.title || "untitled" }),
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: search, className: btn.title, children: view.titleOrUntitled }),
             isCurrentView && /* @__PURE__ */ jsx(Badge, { size: "xs", fz: 9, radius: "sm", children: "current" })
           ] }),
           /* @__PURE__ */ jsx(

package/dist/search/components/ViewsColumn.css.js

@@ -18,7 +18,7 @@ const viewButton = cx(
 css({
   marginTop: "1",
   // transition: transitions.fast,
-  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  // color: `[var(${descriptionColor}, {colors.text.dimmed})]`,
   fontSize: "13px",
   lineHeight: "1.4",
   [`:where(.likec4-view-btn[data-disabled]) &`]: {

package/dist/search/components/_shared.css.d.ts

@@ -1,4 +1,4 @@
-import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '../../../styled-system';
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles';
 export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
 export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;

package/dist/search/components/_shared.css.js

@@ -9,7 +9,7 @@ const _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
 const button = css.raw({
   display: "flex",
   width: "100%",
-  background: "mantine.colors.body",
+  background: "body",
   rounded: "sm",
   padding: `[12px 8px 12px 14px]`,
   minHeight: "60px",
@@ -17,10 +17,10 @@ const button = css.raw({
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
-  borderColor: "mantine.colors.defaultBorder",
+  borderColor: "default.border",
   // [titleColor]: '{colors.mantine.colors.dark[1]}',
-  // [iconColor]: '{colors.mantine.colors.dimmed}',
-  // [descriptionColor]: '{colors.mantine.colors.dimmed}',
+  // [iconColor]: '{colors.text.dimmed}',
+  // [descriptionColor]: '{colors.text.dimmed}',
   _hover: {
     ...buttonFocused,
     borderColor: "mantine.colors.primary[9]",
@@ -52,7 +52,7 @@ const iconSize = {
 };
 const icon = css.raw({
   color: {
-    base: "mantine.colors.dimmed",
+    base: "text.dimmed",
     _light: "mantine.colors.gray[5]",
     _groupHover: "mantine.colors.primary[0]",
     _groupFocus: "mantine.colors.primary[0]"
@@ -88,7 +88,7 @@ const icon = css.raw({
 });
 const title = css.raw({
   fontSize: "16px",
-  fontWeight: 500,
+  fontWeight: "medium",
   lineHeight: "1.1",
   [`:where([data-disabled]) &`]: {
     opacity: 0.4
@@ -98,23 +98,23 @@ const title = css.raw({
     _light: "mantine.colors.gray[7]",
     _groupHover: {
       base: "mantine.colors.primary[1]",
-      _light: "mantine.colors.white"
+      _light: "white"
     },
     _groupFocus: {
       base: "mantine.colors.primary[1]",
-      _light: "mantine.colors.white"
+      _light: "white"
     }
   },
   [_treenodefocus]: {
     color: {
       base: "mantine.colors.primary[1]",
-      _light: "mantine.colors.white"
+      _light: "white"
     }
   }
 });
 const descriptionColor = css.raw({
   color: {
-    base: "mantine.colors.dimmed",
+    base: "text.dimmed",
     _groupHover: {
       base: "mantine.colors.primary[1]",
       _light: "mantine.colors.primary[0]"
@@ -137,13 +137,13 @@ const emptyBoX = css({
   width: "100%",
   height: "100%",
   border: `2px dashed`,
-  borderColor: "mantine.colors.defaultBorder",
+  borderColor: "default.border",
   rounded: "md",
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
   fontSize: "md",
-  color: "mantine.colors.dimmed",
+  color: "text.dimmed",
   padding: "md",
   paddingBlock: "xl"
 });

package/dist/search/components/utils.js

@@ -54,8 +54,5 @@ function queryAllFocusable(from, where, selector = `.${focusable}`) {
   const elements = root.querySelectorAll(`[data-likec4-search-${where}] ${selector}`);
   return [...elements];
 }
-function whenSearchAnimationEnds(callback) {
-  setTimeout(callback, 300);
-}
 
-export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent, whenSearchAnimationEnds };
+export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent };

package/dist/search/hooks.d.ts

@@ -1,10 +1,5 @@
 import { SearchActorRef } from './searchActor';
-import { Fqn } from '@likec4/core';
-export declare const SearchActorContext: ({ children, value }: {
-    value: SearchActorRef;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element, useSearchActor: () => SearchActorRef;
+export declare function useSearchActor(): SearchActorRef;
 export declare function useSearch(): [string, (search: string) => void];
 export declare function useNormalizedSearch(): string;
 export declare function useUpdateSearch(): (search: string) => void;
-export declare function usePickViewFor(): Fqn | null;

package/dist/search/hooks.js

@@ -1,8 +1,14 @@
-import { createSafeContext } from '@mantine/core';
 import { useSelector } from '@xstate/react';
 import { useCallback, useDeferredValue } from 'react';
+import { useSearchActorRef } from '../hooks/useSearchActor.js';
 
-const [SearchActorContext, useSearchActor] = createSafeContext("SearchActorContext");
+function useSearchActor() {
+  const searchActorRef = useSearchActorRef();
+  if (!searchActorRef) {
+    throw new Error("Search actor not found");
+  }
+  return searchActorRef;
+}
 const selectSearchValue = (s) => s.context.searchValue;
 function useSearch() {
   const searchActorRef = useSearchActor();
@@ -13,7 +19,12 @@ function useSearch() {
   return [searchValue, updateSearch];
 }
 const selectNormalizedSearchValue = (s) => {
-  const v = s.context.searchValue.trim().toLowerCase();
+  let v = selectSearchValue(s);
+  if (v === "") return v;
+  v = v.trim().toLowerCase();
+  if (v.startsWith("#") && v.length <= 2) {
+    return "";
+  }
   return v.length > 1 ? v : "";
 };
 function useNormalizedSearch() {
@@ -26,10 +37,5 @@ function useUpdateSearch() {
     searchActorRef.send({ type: "change.search", search });
   }, [searchActorRef]);
 }
-const selectPickViewFor = (s) => s.context.pickViewFor;
-function usePickViewFor() {
-  const searchActorRef = useSearchActor();
-  return useSelector(searchActorRef, selectPickViewFor);
-}
 
-export { SearchActorContext, useNormalizedSearch, usePickViewFor, useSearch, useSearchActor, useUpdateSearch };
+export { useNormalizedSearch, useSearch, useSearchActor, useUpdateSearch };

package/dist/search/searchActor.d.ts

@@ -1,4 +1,4 @@
-import { Fqn } from '@likec4/core/types';
+import { Fqn, ViewId } from '@likec4/core/types';
 import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
 export type SearchActorEvent = {
     type: 'open';
@@ -11,6 +11,12 @@ export type SearchActorEvent = {
 } | {
     type: 'pickview.open';
     elementFqn: Fqn;
+} | {
+    type: 'navigate.to';
+    viewId: ViewId;
+    focusOnElement?: Fqn | undefined;
+} | {
+    type: 'animation.presence.end';
 } | {
     type: 'pickview.close';
 };
@@ -18,8 +24,12 @@ export interface SearchContext {
     openedWithSearch: string | null;
     searchValue: string;
     pickViewFor: Fqn | null;
+    navigateTo: {
+        viewId: ViewId;
+        focusOnElement?: Fqn | undefined;
+    } | null;
 }
-export interface SearchActorLogic extends StateMachine<SearchContext, SearchActorEvent, {}, any, any, any, any, any, never, never, any, any, any, any> {
+export interface SearchActorLogic extends StateMachine<SearchContext, SearchActorEvent, {}, any, any, any, any, 'inactive' | 'opened' | 'pickView' | 'waitAnimationEnd', never, never, any, any, any, any> {
 }
 export declare const searchActorLogic: SearchActorLogic;
 export type SearchActorSnapshot = SnapshotFrom<SearchActorLogic>;

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

@@ -1,13 +1,13 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { MantineProvider } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
-import { forwardRef, useRef, useCallback } from 'react';
+import { forwardRef, useRef, useState, memo } from 'react';
 import root from 'react-shadow';
 import { isDefined } from 'remeda';
+import { DefaultMantineProvider } from '../context/DefaultMantineProvider.js';
 import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
 import { useCallbackRef } from '../hooks/useCallbackRef.js';
 import { useId } from '../hooks/useId.js';
-import { useColorScheme, useBundledStyleSheet, DefaultTheme } from './styles.css.js';
+import { useColorScheme, useBundledStyleSheet } from './styles.css.js';
 
 const Root = root["div"];
 function useShadowRootStyle(instanceId, keepAspectRatio = false) {
@@ -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,21 +39,21 @@ 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();
 }
 const ShadowRoot = forwardRef(({
   children,
-  theme = DefaultTheme,
+  theme,
   injectFontCss = true,
   styleNonce,
   colorScheme: explicitColorScheme,
@@ -64,7 +65,7 @@ const ShadowRoot = forwardRef(({
   const cssstyle = useShadowRootStyle(id, keepAspectRatio);
   const rootRef = useRef(null);
   const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
-  const getRootElement = useCallback(() => rootRef.current ?? void 0, [rootRef]);
+  const getRootElement = useCallbackRef(() => rootRef.current ?? void 0);
   const getStyleNonce = useCallbackRef(() => {
     if (isDefined(styleNonce)) {
       if (typeof styleNonce === "string") {
@@ -75,16 +76,9 @@ const ShadowRoot = forwardRef(({
     }
     return "";
   });
-  let nonce = isDefined(styleNonce) ? getStyleNonce() : void 0;
+  const [nonce] = useState(getStyleNonce);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "style",
-      {
-        type: "text/css",
-        nonce,
-        dangerouslySetInnerHTML: { __html: cssstyle }
-      }
-    ),
+    /* @__PURE__ */ jsx(MemoizedStyle, { nonce, cssstyle }),
     /* @__PURE__ */ jsx(Root, { ssr: false, ...props, styleSheets, "data-likec4-instance": id, children: /* @__PURE__ */ jsx(
       "div",
       {
@@ -92,14 +86,15 @@ const ShadowRoot = forwardRef(({
         "data-mantine-color-scheme": colorScheme,
         className: "likec4-shadow-root",
         children: /* @__PURE__ */ jsx(
-          MantineProvider,
+          DefaultMantineProvider,
           {
-            ...explicitColorScheme && { forceColorScheme: explicitColorScheme },
             defaultColorScheme: colorScheme,
             getRootElement,
-            ...!!nonce && { getStyleNonce },
             cssVariablesSelector: ".likec4-shadow-root",
+            withCssVariables: true,
+            getStyleNonce,
             theme,
+            ...explicitColorScheme && { forceColorScheme: explicitColorScheme },
             children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })
           }
         )
@@ -107,6 +102,14 @@ const ShadowRoot = forwardRef(({
     ) })
   ] });
 });
-ShadowRoot.displayName = "ShadowRoot";
+const MemoizedStyle = memo(({ nonce, cssstyle }) => /* @__PURE__ */ jsx(
+  "style",
+  {
+    type: "text/css",
+    nonce,
+    dangerouslySetInnerHTML: { __html: cssstyle }
+  }
+));
+MemoizedStyle.displayName = "MemoizedStyle";
 
 export { ShadowRoot };

package/dist/shadowroot/styles.css.d.ts

@@ -1,5 +1,3 @@
-import { MantineThemeOverride } from '@mantine/core';
-export declare const DefaultTheme: MantineThemeOverride;
 export declare const cssInteractive: string;
 export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
 export type ColorScheme = 'light' | 'dark';