@likec4/diagram 1.46.4 → 1.48.0

package/dist/projects-overview/persistence.js

@@ -0,0 +1,24 @@
+const key = `likec4:projects-overview:lastViewport`;
+const ProjectsOverviewViewportPersistence = {
+  read() {
+    try {
+      let fromStorage = sessionStorage.getItem(key);
+      if (fromStorage) {
+        return JSON.parse(fromStorage);
+      }
+      return null;
+    } catch (e) {
+      console.error(`Error reading fromStorage ${key}:`, e);
+      return null;
+    }
+  },
+  write(viewport) {
+    if (!viewport) {
+      sessionStorage.removeItem(key);
+      return;
+    }
+    sessionStorage.setItem(key, JSON.stringify(viewport));
+  }
+};
+
+export { ProjectsOverviewViewportPersistence };

package/dist/search/Search.d.ts

@@ -1,4 +1 @@
-import { SearchActorRef } from './searchActor';
-export declare function Search({ searchActorRef }: {
-    searchActorRef: SearchActorRef;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function Search(): import("react/jsx-runtime").JSX.Element | null;

package/dist/search/Search.js

@@ -6,12 +6,10 @@ import { useHotkeys } from '@mantine/hooks';
 import { useTimeoutEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
 import { AnimatePresence, LayoutGroup } from 'motion/react';
-import { useRef } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
+import { memo, useRef } from 'react';
 import { isTruthy } from 'remeda';
-import { ErrorFallback } from '../components/ErrorFallback.js';
-import { DiagramFeatures } from '../context/DiagramFeatures.js';
 import { useCallbackRef } from '../hooks/useCallbackRef.js';
+import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlay } from '../overlays/overlay/Overlay.js';
 import { ElementsColumn } from './components/ElementsColumn.js';
 import { PickView } from './components/PickView.js';
@@ -19,7 +17,6 @@ import { SearchByTags } from './components/SearchByTags.js';
 import { LikeC4SearchInput } from './components/SearchInput.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './components/utils.js';
 import { ViewsColumn } from './components/ViewsColum.js';
-import { SearchActorContext, usePickViewFor } from './hooks.js';
 
 const dialog = css({
   backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
@@ -51,15 +48,43 @@ const body = css({
   paddingLeft: "md",
   paddingRight: "md",
   paddingBottom: "sm",
-  background: "[transparent]"
+  background: "transparent"
   // backgroundColor: {
   //   _dark: `[rgb(34 34 34 / 0.95)]`,
   //   _light: `[rgb(255 255 255/ 0.95)]`,
   // },
 });
+const scrollArea = css({
+  height: [
+    "100%",
+    "100cqh"
+  ],
+  "& .mantine-ScrollArea-viewport": {
+    minHeight: "100%",
+    "& > div": {
+      minHeight: "100%",
+      height: "100%"
+    }
+  }
+});
 const selectIsOpened = (s) => !s.matches("inactive");
-function Search({ searchActorRef }) {
+function Search() {
+  const searchActorRef = useSearchActorRef();
+  if (!searchActorRef) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(SearchOverlayCtx, { searchActorRef });
+}
+const selectPickViewFor = (s) => s.context.pickViewFor ?? null;
+const SearchOverlayCtx = memo(({ searchActorRef }) => {
   const isOpened = useSelector(searchActorRef, selectIsOpened);
+  const ref = useRef(null);
+  const pickViewFor = useSelector(searchActorRef, selectPickViewFor);
+  useTimeoutEffect(() => {
+    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
+      focusToFirstFoundElement(ref.current);
+    }
+  }, isOpened ? 150 : void 0);
   const openSearch = () => {
     searchActorRef.send({ type: "open" });
   };
@@ -74,7 +99,7 @@ function Search({ searchActorRef }) {
       preventDefault: true
     }]
   ]);
-  return /* @__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(
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsx(
     Overlay,
     {
       fullscreen: true,
@@ -89,86 +114,63 @@ function Search({ searchActorRef }) {
       openDelay: 0,
       onClose: close,
       "data-likec4-search": "true",
-      children: /* @__PURE__ */ jsx(SearchOverlay, { searchActorRef })
+      children: /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
+        /* @__PURE__ */ jsx(
+          Group,
+          {
+            className: "group",
+            wrap: "nowrap",
+            onClick: (e) => {
+              e.stopPropagation();
+              moveFocusToSearchInput(ref.current);
+            },
+            children: /* @__PURE__ */ jsxs(VStack, { flex: 1, px: "sm", children: [
+              /* @__PURE__ */ jsx(LikeC4SearchInput, {}),
+              /* @__PURE__ */ jsx(SearchByTags, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Grid, { children: [
+          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Elements" }) }),
+          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Views" }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Grid,
+          {
+            className: css({
+              containerName: "likec4-search-elements",
+              containerType: "size",
+              overflow: "hidden",
+              flexGrow: 1
+            }),
+            children: [
+              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
+                ScrollArea,
+                {
+                  type: "scroll",
+                  className: scrollArea,
+                  pr: "xs",
+                  scrollbars: "y",
+                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
+                ScrollArea,
+                {
+                  type: "scroll",
+                  className: scrollArea,
+                  pr: "xs",
+                  scrollbars: "y",
+                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
+                }
+              ) })
+            ]
+          }
+        ),
+        pickViewFor && /* @__PURE__ */ jsx(PickView, { searchActorRef, elementFqn: pickViewFor })
+      ] })
     }
-  ) }) }) }) });
-}
-const scrollArea = css({
-  height: [
-    "100%",
-    "100cqh"
-  ],
-  "& .mantine-ScrollArea-viewport": {
-    minHeight: "100%",
-    "& > div": {
-      minHeight: "100%",
-      height: "100%"
-    }
-  }
+  ) });
 });
-const SearchOverlay = ({ searchActorRef }) => {
-  const ref = useRef(null);
-  const pickViewFor = usePickViewFor();
-  useTimeoutEffect(() => {
-    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
-      focusToFirstFoundElement(ref.current);
-    }
-  }, 150);
-  return /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
-    /* @__PURE__ */ jsx(
-      Group,
-      {
-        className: "group",
-        wrap: "nowrap",
-        onClick: (e) => {
-          e.stopPropagation();
-          moveFocusToSearchInput(ref.current);
-        },
-        children: /* @__PURE__ */ jsxs(VStack, { flex: 1, px: "sm", children: [
-          /* @__PURE__ */ jsx(LikeC4SearchInput, {}),
-          /* @__PURE__ */ jsx(SearchByTags, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs(Grid, { children: [
-      /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Elements" }) }),
-      /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Views" }) })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      Grid,
-      {
-        className: css({
-          containerName: "likec4-search-elements",
-          containerType: "size",
-          overflow: "hidden",
-          flexGrow: 1
-        }),
-        children: [
-          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
-            ScrollArea,
-            {
-              type: "scroll",
-              className: scrollArea,
-              pr: "xs",
-              scrollbars: "y",
-              children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
-            ScrollArea,
-            {
-              type: "scroll",
-              className: scrollArea,
-              pr: "xs",
-              scrollbars: "y",
-              children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
-            }
-          ) })
-        ]
-      }
-    ),
-    pickViewFor && /* @__PURE__ */ jsx(PickView, { elementFqn: pickViewFor })
-  ] });
-};
 
 export { Search };

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

@@ -39,10 +39,10 @@ const elementId = css({
   fontSize: "10px",
   lineHeight: "1.3",
   display: "block",
-  fontWeight: 500,
+  fontWeight: "medium",
   whiteSpace: "nowrap",
   padding: "[1px 5px]",
-  borderRadius: "4px",
+  borderRadius: "sm",
   background: `mantine.colors.dark[9]/30`,
   _light: {
     background: `mantine.colors.gray[3]/20`
@@ -58,7 +58,7 @@ const elementViewsCount = css({
   flex: 0,
   // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
   fontSize: "10px",
-  fontWeight: 500,
+  fontWeight: "medium",
   whiteSpace: "nowrap",
   lineHeight: "1.1",
   [whenContainerIsNarrow]: {

package/dist/search/components/ElementsColumn.js

@@ -17,7 +17,7 @@ import { focusable, buttonsva } from './_shared.css.js';
 import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
 import { whenSearchAnimationEnds, stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { NothingFound } from './ViewsColum.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const btn = buttonsva();
 const ElementsColumn = memo(() => {
@@ -154,11 +154,11 @@ function ElementsTree({
         subtree: treeSubtree
       },
       onKeyDownCapture,
-      renderNode: ElementTreeNode
+      renderNode: (p) => /* @__PURE__ */ jsx(ElementTreeNode, { ...p, handleClick })
     }
   );
 }
-function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
+function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClick }) {
   const { element, searchTerms } = node;
   const elementIcon$1 = IconOrShapeRenderer({
     element: {
@@ -170,7 +170,6 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
     className: cx(btn.icon, elementIcon)
   });
   const views = [...element.views()];
-  const handleClick = useHandleElementSelection();
   const key = `@tree.${node.value}`;
   return /* @__PURE__ */ jsxs(m.div, { layoutId: key, ...elementProps, children: [
     /* @__PURE__ */ jsx(

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

@@ -1,4 +1,6 @@
 import { Fqn } from '@likec4/core/types';
-export declare function PickView({ elementFqn }: {
+import { SearchActorRef } from '../searchActor';
+export declare function PickView({ searchActorRef, elementFqn, }: {
+    searchActorRef: SearchActorRef;
     elementFqn: Fqn;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/search/components/PickView.js

@@ -3,13 +3,14 @@ import { FocusTrap, Group, Title, ActionIcon, ScrollAreaAutosize, Stack } from '
 import { useWindowEvent } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 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.0_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 element = useLikeC4Model().element(elementFqn);
   const scoped = [];
   const others = [];

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.0_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.0_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;

package/dist/search/components/ViewsColum.js

@@ -14,8 +14,8 @@ import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
 import { moveFocusToSearchInput, queryAllFocusable, centerY, whenSearchAnimationEnds } 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.0_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.0_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 ViewsColumn = memo(() => {

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

@@ -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

package/dist/search/components/utils.js

@@ -55,7 +55,7 @@ function queryAllFocusable(from, where, selector = `.${focusable}`) {
   return [...elements];
 }
 function whenSearchAnimationEnds(callback) {
-  setTimeout(callback, 300);
+  setTimeout(callback, 400);
 }
 
 export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent, whenSearchAnimationEnds };

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,9 @@ function useSearch() {
   return [searchValue, updateSearch];
 }
 const selectNormalizedSearchValue = (s) => {
-  const v = s.context.searchValue.trim().toLowerCase();
+  let v = selectSearchValue(s);
+  if (v === "") return "";
+  v = v.trim().toLowerCase();
   return v.length > 1 ? v : "";
 };
 function useNormalizedSearch() {
@@ -26,10 +34,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

@@ -19,7 +19,7 @@ export interface SearchContext {
     searchValue: string;
     pickViewFor: Fqn | 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', never, never, any, any, any, any> {
 }
 export declare const searchActorLogic: SearchActorLogic;
 export type SearchActorSnapshot = SnapshotFrom<SearchActorLogic>;

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) {
@@ -52,7 +52,7 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
 }
 const ShadowRoot = forwardRef(({
   children,
-  theme = DefaultTheme,
+  theme,
   injectFontCss = true,
   styleNonce,
   colorScheme: explicitColorScheme,
@@ -64,7 +64,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 +75,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 +85,14 @@ 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",
-            theme,
+            getStyleNonce,
+            ...explicitColorScheme && { forceColorScheme: explicitColorScheme },
+            ...theme && { theme },
             children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })
           }
         )
@@ -107,6 +100,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';

package/dist/shadowroot/styles.css.js

@@ -1,5 +1,4 @@
 import { css } from '@likec4/styles/css';
-import { createTheme, Tooltip, Portal } from '@mantine/core';
 import { useColorScheme as useColorScheme$1, useMutationObserver, useDebouncedCallback } from '@mantine/hooks';
 import { useIsomorphicLayoutEffect } from '@react-hookz/web';
 import { useState } from 'react';
@@ -7,38 +6,6 @@ import { isString, isFunction, first } from 'remeda';
 import fontsCss from '../styles-font.css2.js';
 import inlinedStyles from '../styles.css2.js';
 
-const DefaultTheme = createTheme({
-  autoContrast: true,
-  primaryColor: "indigo",
-  cursorType: "pointer",
-  defaultRadius: "sm",
-  fontFamily: "var(--likec4-app-font, var(--likec4-app-font-default))",
-  headings: {
-    fontWeight: "500",
-    sizes: {
-      h1: {
-        // fontSize: '2rem',
-        fontWeight: "600"
-      },
-      h2: {
-        fontWeight: "500"
-        // fontSize: '1.85rem',
-      }
-    }
-  },
-  components: {
-    Portal: Portal.extend({
-      defaultProps: {
-        reuseTargetNode: true
-      }
-    }),
-    Tooltip: Tooltip.extend({
-      defaultProps: {
-        color: "dark"
-      }
-    })
-  }
-});
 css({
   cursor: "pointer",
   ["--mantine-cursor-pointer"]: "pointer",
@@ -101,4 +68,4 @@ function useColorScheme(explicit) {
   return explicit ?? computed ?? preferred;
 }
 
-export { DefaultTheme, useBundledStyleSheet, useColorScheme };
+export { useBundledStyleSheet, useColorScheme };

package/dist/styles-font.css2.js

@@ -1,3 +1,3 @@
-const fontsCss = "@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff) format(\"woff\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff) format(\"woff\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff) format(\"woff\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff) format(\"woff\");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff) format(\"woff\");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff) format(\"woff\");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff) format(\"woff\");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff) format(\"woff\");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff) format(\"woff\");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-400-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-400-normal.woff) format(\"woff\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-500-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-500-normal.woff) format(\"woff\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-600-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-600-normal.woff) format(\"woff\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}";
+const fontsCss = "@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/latin-wght-normal.woff2) format(\"woff2-variations\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/cyrillic-wght-normal.woff2) format(\"woff2-variations\");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/cyrillic-ext-wght-normal.woff2) format(\"woff2-variations\");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/greek-wght-normal.woff2) format(\"woff2-variations\");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/latin-ext-wght-normal.woff2) format(\"woff2-variations\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Sans Variable;font-style:normal;font-display:swap;font-weight:100 700;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans:vf@latest/vietnamese-wght-normal.woff2) format(\"woff2-variations\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}";
 
 export { fontsCss as default };