@likec4/diagram 1.48.0 → 1.50.0

package/dist/components/RootContainer.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { useIsomorphicLayoutEffect } from '@react-hookz/web';
+import { useStore } from '@nanostores/react';
 import { atom } from 'nanostores';
-import { useState, useRef, useEffect, useMemo } from 'react';
-import { PanningAtomSafeCtx, ReduceGraphicsModeCtx, RootContainerContext } from '../context/RootContainerContext.js';
+import { useRef, useState, useMemo } from 'react';
+import { ReduceGraphicsModeProvider, PanningAtomSafeCtx, RootContainerContextProvider } from '../context/RootContainerContext.js';
 
 function RootContainer({
   id,
@@ -11,28 +11,21 @@ function RootContainer({
   reduceGraphics = false,
   children
 }) {
-  const [mounted, setMounted] = useState(false);
   const ref = useRef(null);
-  const $isPanning = useRef(atom(false)).current;
-  useIsomorphicLayoutEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    return $isPanning.listen((isPanning) => {
-      ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
-    });
-  }, [$isPanning]);
-  const ctx = useMemo(() => ({ id, ref }), [id, ref]);
-  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanning, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(
+  const [$isPanning] = useState(() => atom(false));
+  const isPanning = useStore($isPanning);
+  const ctx = useMemo(() => ({ id, ref, selector: `#${id}` }), [id, ref]);
+  return /* @__PURE__ */ jsx(ReduceGraphicsModeProvider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanning, children: /* @__PURE__ */ jsx(
     "div",
     {
       id,
       className: cx("likec4-root", className),
       ref,
+      "data-likec4-diagram-panning": isPanning,
       ...reduceGraphics && {
         ["data-likec4-reduced-graphics"]: true
       },
-      children: mounted && /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ctx, children })
+      children: /* @__PURE__ */ jsx(RootContainerContextProvider, { value: ctx, children })
     }
   ) }) });
 }

package/dist/components/ViewNotFound.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export declare const ErrorMessage: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export declare const ViewNotFound: ({ viewId }: {
+export declare function ErrorMessage({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function ViewNotFound({ viewId }: {
     viewId: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ViewNotFound.js

@@ -1,30 +1,34 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-const ErrorMessage = ({ children }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    style: {
-      margin: "1rem 0"
-    },
-    children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          margin: "0 auto",
-          display: "inline-block",
-          padding: "2rem",
-          background: "rgba(250,82,82,.15)",
-          color: "#ffa8a8"
-        },
-        children
-      }
-    )
-  }
-);
-const ViewNotFound = ({ viewId }) => /* @__PURE__ */ jsxs(ErrorMessage, { children: [
-  "View ",
-  /* @__PURE__ */ jsx("code", { children: viewId }),
-  " not found"
-] });
+function ErrorMessage({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        margin: "1em 0"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            margin: "0 auto",
+            display: "inline-block",
+            padding: "2em",
+            background: "rgba(250,82,82,.15)",
+            color: "#ffa8a8"
+          },
+          children
+        }
+      )
+    }
+  );
+}
+function ViewNotFound({ viewId }) {
+  return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+    "View ",
+    /* @__PURE__ */ jsx("code", { children: viewId }),
+    " not found"
+  ] });
+}
 
 export { ErrorMessage, ViewNotFound };

package/dist/context/CurrentViewModelProvider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function CurrentViewModelProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/context/CurrentViewModelProvider.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCurrentViewId } from '../hooks/useCurrentView.js';
+import { useOptionalLikeC4Model, CurrentViewModelContext } from './LikeC4ModelContext.js';
+
+function CurrentViewModelProvider({ children }) {
+  const viewId = useCurrentViewId();
+  const likec4model = useOptionalLikeC4Model();
+  const viewmodel = likec4model?.findView(viewId) ?? null;
+  return /* @__PURE__ */ jsx(CurrentViewModelContext, { value: viewmodel, children });
+}
+
+export { CurrentViewModelProvider };

package/dist/context/DefaultMantineProvider.d.ts

@@ -1,2 +1,2 @@
 import { MantineProviderProps } from '@mantine/core';
-export declare function DefaultMantineProvider({ children, ...props }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultMantineProvider({ children, theme, ...props }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/context/DefaultMantineProvider.js

@@ -58,9 +58,18 @@ const DefaultTheme = createTheme({
 });
 function DefaultMantineProvider({
   children,
+  theme,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(MantineProvider, { defaultColorScheme: "auto", theme: DefaultTheme, ...props, children });
+  return /* @__PURE__ */ jsx(
+    MantineProvider,
+    {
+      defaultColorScheme: "auto",
+      theme: theme ?? DefaultTheme,
+      ...props,
+      children
+    }
+  );
 }
 
 export { DefaultMantineProvider };

package/dist/context/DiagramEventHandlers.d.ts

@@ -1,15 +1,15 @@
-import { aux } from '@likec4/core/types';
 import { PropsWithChildren, RefObject } from 'react';
 import { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
 type RequiredOrNull<T> = {
     [P in keyof T]-?: NonNullable<T[P]> | null;
 };
+type DiagramEventHandlersRef = RefObject<Required<LikeC4DiagramEventHandlers>>;
 export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandlers> & {
-    handlersRef: RefObject<Required<LikeC4DiagramEventHandlers>>;
+    handlersRef: DiagramEventHandlersRef;
 };
-export declare function DiagramEventHandlers<A extends aux.Any>({ handlers, children, }: PropsWithChildren<{
-    handlers: Required<LikeC4DiagramEventHandlers<A>>;
+export declare function DiagramEventHandlers({ handlers, children, }: PropsWithChildren<{
+    handlers: Required<LikeC4DiagramEventHandlers>;
 }>): import("react/jsx-runtime").JSX.Element;
 export declare function useDiagramEventHandlers(): DiagramEventHandlersContext;
-export declare function useDiagramEventHandlersRef<A extends aux.Any = aux.Any>(): RefObject<LikeC4DiagramEventHandlers<A>>;
+export declare function useDiagramEventHandlersRef(): DiagramEventHandlersRef;
 export {};

package/dist/context/DiagramEventHandlers.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useSyncedRef } from '@react-hookz/web';
-import { useContext, createContext, useMemo } from 'react';
-import { keys, isFunction, mapToObj } from 'remeda';
+import { useContext, useMemo, createContext } from 'react';
+import { isFunction, mapToObj, keys } from 'remeda';
 
 const defaultHandlers = {
   onNavigateTo: null,
@@ -18,6 +18,9 @@ const defaultHandlers = {
   onLayoutTypeChange: null
 };
 const HandlerNames = keys(defaultHandlers);
+const DiagramEventHandlersRefContext = createContext({
+  current: defaultHandlers
+});
 const DiagramEventHandlersReactContext = createContext({
   ...mapToObj(HandlerNames, (name) => [name, null]),
   handlersRef: {
@@ -41,10 +44,13 @@ function DiagramEventHandlers({
     }),
     handlersRef
   }), [handlersRef, ...deps]);
-  return /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(DiagramEventHandlersRefContext.Provider, { value: handlersRef, children: /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, { value, children }) });
 }
 function useDiagramEventHandlers() {
   return useContext(DiagramEventHandlersReactContext);
 }
+function useDiagramEventHandlersRef() {
+  return useContext(DiagramEventHandlersRefContext);
+}
 
-export { DiagramEventHandlers, useDiagramEventHandlers };
+export { DiagramEventHandlers, useDiagramEventHandlers, useDiagramEventHandlersRef };

package/dist/context/DiagramFeatures.d.ts

@@ -1,6 +1,7 @@
 import { ExclusiveUnion } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-declare const FeatureNames: readonly ["Controls", "Editor", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Vscode", "ElementTags"];
+import { JSX } from 'react/jsx-runtime';
+declare const FeatureNames: readonly ["Controls", "Editor", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "FitView", "CompareWithLatest", "Notes", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
 export type TogglableFeature = ('ReadOnly' | 'CompareWithLatest') & FeatureName;
 export type EnabledFeatures = {
@@ -14,9 +15,9 @@ export declare function DiagramFeatures({ children, features, overrides, }: Prop
     overrides: {
         overrides: Partial<EnabledFeatures>;
     };
-}>>): import("react/jsx-runtime").JSX.Element;
+}>>): JSX.Element;
 export declare namespace DiagramFeatures {
-    var Overlays: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+    var Overlays: ({ children }: PropsWithChildren) => JSX.Element;
 }
 export declare function useEnabledFeatures(): EnabledFeatures;
 export type IfEnabledProps = PropsWithChildren<{
@@ -43,10 +44,10 @@ export type IfEnabledProps = PropsWithChildren<{
 export declare function IfEnabled({ feature, children, and, }: PropsWithChildren<{
     feature: FeatureName;
     and?: boolean;
-}>): import("react/jsx-runtime").JSX.Element | null;
+}>): JSX.Element | null;
 export declare function IfNotEnabled({ feature, children }: PropsWithChildren<{
     feature: FeatureName;
-}>): import("react/jsx-runtime").JSX.Element | null;
-export declare function IfReadOnly({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
-export declare function IfNotReadOnly({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+}>): JSX.Element | null;
+export declare function IfReadOnly({ children }: PropsWithChildren): JSX.Element | null;
+export declare function IfNotReadOnly({ children }: PropsWithChildren): JSX.Element | null;
 export {};

package/dist/context/DiagramFeatures.js

@@ -1,6 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useContext, createContext, useEffect } from 'react';
+import { useContext, createContext } from 'react';
 import { useSetState } from '../hooks/useSetState.js';
+import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 
 const DefaultFeatures = {
   enableEditor: false,
@@ -18,7 +19,8 @@ const DefaultFeatures = {
   enableNavigationButtons: false,
   enableFitView: false,
   enableVscode: false,
-  enableElementTags: false
+  enableElementTags: false,
+  enableNotes: false
 };
 const DiagramFeaturesContext = createContext(DefaultFeatures);
 function DiagramFeatures({
@@ -32,7 +34,7 @@ function DiagramFeatures({
     ...features,
     ...overrides
   }));
-  useEffect(
+  useUpdateEffect(
     () => {
       setScope({
         ...outerScope,

package/dist/context/FramerMotionConfig.d.ts

@@ -3,8 +3,6 @@ export declare const FramerMotionConfig: ({ reducedMotion, children, }: PropsWit
     /**
      * If true, will respect the device prefersReducedMotion setting by switching
      * transform animations off.
-     *
-     * @public
      */
-    reducedMotion?: "always" | "never" | "user";
+    reducedMotion?: "always" | "never" | "user" | undefined;
 }>) => import("react/jsx-runtime").JSX.Element;

package/dist/context/IconRenderer.d.ts

@@ -1,5 +1,5 @@
 import { ElementShape } from '@likec4/core';
-import { CSSProperties, PropsWithChildren } from 'react';
+import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import { ElementIconRenderer } from '../LikeC4Diagram.props';
 /**
  * Provider for custom element icon renderers
@@ -26,13 +26,14 @@ export declare function IconRenderer({ element, className, style, }: {
     };
     className?: string | undefined;
     style?: CSSProperties | undefined;
-}): import("react/jsx-runtime").JSX.Element | null;
-export declare function IconOrShapeRenderer({ element, className, }: {
+}): ReactNode;
+export declare function IconOrShapeRenderer({ element, className, style, }: {
     element: {
         id: string;
         title: string;
         shape: ElementShape;
         icon?: string | null | undefined;
     };
-    className: string;
+    className?: string;
+    style?: CSSProperties | undefined;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/context/IconRenderer.js

@@ -1,13 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { createContext, useContext } from 'react';
-import IconFileText from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js';
-import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
-import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
-import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
-import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
-import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
-import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
+import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
+import IconFileText from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileText.js';
+import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
+import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
+import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
+import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
+import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({
@@ -20,6 +20,26 @@ function IconRendererProvider({
   }
   return /* @__PURE__ */ jsx(IconRendererContext.Provider, { value, children });
 }
+function decodeSvgDataUrl(dataUrl) {
+  if (!dataUrl.startsWith("data:image/svg+xml")) {
+    return null;
+  }
+  try {
+    if (dataUrl.includes(";base64,")) {
+      const base64Content = dataUrl.split(";base64,")[1];
+      if (base64Content) {
+        return atob(base64Content);
+      }
+    } else {
+      const encodedContent = dataUrl.split(",")[1];
+      if (encodedContent) {
+        return decodeURIComponent(encodedContent);
+      }
+    }
+  } catch {
+  }
+  return null;
+}
 function IconRenderer({
   element,
   className,
@@ -31,7 +51,12 @@ function IconRenderer({
   }
   let icon;
   if (element.icon.startsWith("http://") || element.icon.startsWith("https://") || element.icon.startsWith("data:image")) {
-    icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
+    const svgContent = element.icon.startsWith("data:image/svg+xml") ? decodeSvgDataUrl(element.icon) : null;
+    if (svgContent) {
+      icon = /* @__PURE__ */ jsx("span", { style: { display: "contents" }, dangerouslySetInnerHTML: { __html: svgContent } });
+    } else {
+      icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
+    }
   } else if (RenderIcon) {
     icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
   }
@@ -60,27 +85,29 @@ const ShapeIcons = {
   rectangle: IconRectangularPrism,
   storage: IconCylinder,
   bucket: IconCylinder,
-  document: IconFileText
+  document: IconFileText,
+  component: IconRectangularPrism
 };
 function IconOrShapeRenderer({
   element,
-  className
+  className,
+  style
 }) {
-  const icon = /* @__PURE__ */ jsx(IconRenderer, { element, className });
-  if (icon) {
-    return icon;
+  if (!element.icon || element.icon === "none") {
+    const ShapeIcon = ShapeIcons[element.shape];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          className,
+          "likec4-shape-icon"
+        ),
+        style,
+        children: /* @__PURE__ */ jsx(ShapeIcon, {})
+      }
+    );
   }
-  const ShapeIcon = ShapeIcons[element.shape];
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        className,
-        "likec4-shape-icon"
-      ),
-      children: /* @__PURE__ */ jsx(ShapeIcon, {})
-    }
-  );
+  return /* @__PURE__ */ jsx(IconRenderer, { element, className, style });
 }
 
 export { IconOrShapeRenderer, IconRenderer, IconRendererProvider };

package/dist/context/LikeC4ModelContext.d.ts

@@ -1,10 +1,15 @@
 import { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
-import { DiagramView } from '@likec4/core/types';
-import { PropsWithChildren, Context } from 'react';
+import { LayoutedView } from '@likec4/core/types';
+import { PropsWithChildren, Provider } from 'react';
 import type * as t from '@likec4/core/types';
 type UnknownLayouted = t.aux.UnknownLayouted;
-export declare const LikeC4ModelContext: Context<LikeC4Model<any> | null>;
-export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted, DiagramView<UnknownLayouted>>;
-export declare const CurrentViewModelContext: Context<CurrentViewModel | null>;
+export declare const LikeC4ModelContextProvider: Provider<LikeC4Model<any> | null>;
+export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted, LayoutedView<UnknownLayouted>>;
+export declare const CurrentViewModelContext: Provider<CurrentViewModel | null>;
 export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * @returns The LikeC4Model from context, or null if no LikeC4ModelProvider is found.
+ */
+export declare function useOptionalLikeC4Model<A extends t.aux.Any = UnknownLayouted>(): LikeC4Model<A> | null;
+export declare function useOptionalCurrentViewModel(): CurrentViewModel | null;
 export {};

package/dist/context/LikeC4ModelContext.js

@@ -1,7 +1,15 @@
 import 'react/jsx-runtime';
-import { createContext } from 'react';
+import { useContext, createContext } from 'react';
 
 const LikeC4ModelContext = createContext(null);
-const CurrentViewModelContext = createContext(null);
+const LikeC4ModelContextProvider = LikeC4ModelContext.Provider;
+const CurrentViewModelCtx = createContext(null);
+const CurrentViewModelContext = CurrentViewModelCtx.Provider;
+function useOptionalLikeC4Model() {
+  return useContext(LikeC4ModelContext);
+}
+function useOptionalCurrentViewModel() {
+  return useContext(CurrentViewModelCtx);
+}
 
-export { CurrentViewModelContext, LikeC4ModelContext };
+export { CurrentViewModelContext, LikeC4ModelContextProvider, useOptionalCurrentViewModel, useOptionalLikeC4Model };

package/dist/context/LikeC4ProjectsContext.d.ts

@@ -1,7 +1,8 @@
 import { LikeC4Project, ProjectId } from '@likec4/core/types';
-import { Context } from 'react';
+import { Provider } from 'react';
 export type LikeC4ProjectsContext = {
     projects: ReadonlyArray<LikeC4Project>;
     onProjectChange: (id: ProjectId) => void;
 };
-export declare const LikeC4ProjectsContext: Context<LikeC4ProjectsContext | null>;
+export declare const LikeC4ProjectsContextProvider: Provider<LikeC4ProjectsContext | null>;
+export declare function useOptionalProjectsContext(): LikeC4ProjectsContext | null;

package/dist/context/LikeC4ProjectsContext.js

@@ -1,5 +1,9 @@
-import { createContext } from 'react';
+import { useContext, createContext } from 'react';
 
 const LikeC4ProjectsContext = createContext(null);
+const LikeC4ProjectsContextProvider = LikeC4ProjectsContext.Provider;
+function useOptionalProjectsContext() {
+  return useContext(LikeC4ProjectsContext);
+}
 
-export { LikeC4ProjectsContext };
+export { LikeC4ProjectsContextProvider, useOptionalProjectsContext };

package/dist/context/RootContainerContext.d.ts

@@ -1,16 +1,23 @@
 import { WritableAtom } from 'nanostores';
-import { RefObject, Context } from 'react';
-export declare const RootContainerContext: Context<{
+import { RefObject, Provider } from 'react';
+export declare const RootContainerContextProvider: Provider<{
     id: string;
+    selector: string;
     ref: RefObject<HTMLDivElement | null>;
 } | null>;
+export declare function useRootContainerContext(): {
+    id: string;
+    selector: string;
+    ref: RefObject<HTMLDivElement | null>;
+} | null;
 export declare function useRootContainer(): {
     id: string;
+    selector: string;
     ref: RefObject<HTMLDivElement | null>;
 };
 export declare function useRootContainerRef(): RefObject<HTMLDivElement | null>;
 export declare function useRootContainerElement(): HTMLDivElement | null;
-export declare const ReduceGraphicsModeCtx: Context<boolean | null>;
+export declare const ReduceGraphicsModeProvider: Provider<boolean | null>;
 /**
  * Hook to determine if reduced graphics mode is enabled.
  */

package/dist/context/RootContainerContext.js

@@ -1,10 +1,14 @@
 import { createSafeContext } from '@mantine/core';
 import '@nanostores/react';
-import { createContext, useContext } from 'react';
+import { useContext, createContext } from 'react';
 
 const RootContainerContext = createContext(null);
+const RootContainerContextProvider = RootContainerContext.Provider;
+function useRootContainerContext() {
+  return useContext(RootContainerContext);
+}
 function useRootContainer() {
-  const ctx = useContext(RootContainerContext);
+  const ctx = useRootContainerContext();
   if (!ctx) {
     throw new Error("useRootContainer must be used within a RootContainer");
   }
@@ -17,6 +21,7 @@ function useRootContainerElement() {
   return useRootContainer().ref.current;
 }
 const ReduceGraphicsModeCtx = createContext(null);
+const ReduceGraphicsModeProvider = ReduceGraphicsModeCtx.Provider;
 function useIsReducedGraphics() {
   const isReduced = useContext(ReduceGraphicsModeCtx);
   if (isReduced === null) {
@@ -28,4 +33,4 @@ const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
   "PanningAtomSafeCtx is not provided"
 );
 
-export { PanningAtomSafeCtx, ReduceGraphicsModeCtx, RootContainerContext, useIsReducedGraphics, usePanningAtom, useRootContainer, useRootContainerElement, useRootContainerRef };
+export { PanningAtomSafeCtx, ReduceGraphicsModeProvider, RootContainerContextProvider, useIsReducedGraphics, usePanningAtom, useRootContainer, useRootContainerContext, useRootContainerElement, useRootContainerRef };

package/dist/context/TagStylesContext.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { isTagColorSpecified } from '@likec4/core';
 import { DefaultTagColors } from '@likec4/core/styles';
 import { useMantineStyleNonce } from '@mantine/core';
-import { createContext, memo, useContext } from 'react';
+import { useContext, createContext, memo } from 'react';
 import { isEmpty, pipe, entries, flatMap, join } from 'remeda';
 import { useLikeC4Specification } from '../hooks/useLikeC4Model.js';
 

package/dist/custom/index.js

@@ -5,28 +5,16 @@ export { Overlay } from '../overlays/overlay/Overlay.js';
 export { PortalToContainer } from '../components/PortalToContainer.js';
 export { ShadowRoot } from '../shadowroot/ShadowRoot.js';
 export { FramerMotionConfig } from '../context/FramerMotionConfig.js';
+export { CompoundActionButton } from '../base-primitives/compound/CompoundActionButton.js';
 export { CompoundActions } from '../likec4diagram/custom/nodes/CompoundActions.js';
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from '../likec4diagram/custom/nodes/nodes.js';
 export { CompoundDeploymentToolbar, CompoundElementToolbar } from '../likec4diagram/custom/nodes/toolbar/CompoundToolbar.js';
-export { DeploymentElementActions, ElementActions } from '../likec4diagram/custom/nodes/ElementActions.js';
-export { DeploymentElementToolbar, ElementToolbar } from '../likec4diagram/custom/nodes/toolbar/ElementToolbar.js';
-export { SequenceActorNode, SequenceParallelArea } from '../likec4diagram/custom/nodes/SequenceActorNode.js';
-export { Toolbar } from '../likec4diagram/custom/nodes/toolbar/Toolbar.js';
-export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
-export { useCurrentView, useCurrentViewId } from '../hooks/useCurrentView.js';
-export { useDiagram, useDiagramActorRef } from '../hooks/safeContext.js';
-export { useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
-export { useCurrentViewModel, useOptionalCurrentViewModel } from '../hooks/useCurrentViewModel.js';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, useOptionalLikeC4Model } from '../hooks/useLikeC4Model.js';
-export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
-export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
-export { useSetState } from '../hooks/useSetState.js';
-export { useUpdateEffect } from '../hooks/useUpdateEffect.js';
-export { CompoundActionButton } from '../base-primitives/compound/CompoundActionButton.js';
 export { CompoundDetailsButton } from '../base-primitives/compound/CompoundDetailsButton.js';
 export { CompoundNodeContainer } from '../base-primitives/compound/CompoundNodeContainer.js';
 export { CompoundTitle } from '../base-primitives/compound/CompoundTitle.js';
 export { DefaultHandles } from '../base-primitives/NodeHandles.js';
+export { DeploymentElementActions, ElementActions } from '../likec4diagram/custom/nodes/ElementActions.js';
+export { DeploymentElementToolbar, ElementToolbar } from '../likec4diagram/custom/nodes/toolbar/ElementToolbar.js';
 export { ElementActionButtons } from '../base-primitives/element/ElementActionButtons.js';
 export { ElementData } from '../base-primitives/element/ElementData.js';
 export { ElementDetailsButton } from '../base-primitives/element/ElementDetailsButton.js';
@@ -34,5 +22,18 @@ export { ElementNodeContainer } from '../base-primitives/element/ElementNodeCont
 export { ElementShape } from '../base-primitives/element/ElementShape.js';
 export { ElementTag, ElementTags } from '../base-primitives/element/ElementTags.js';
 export { Markdown } from '../base-primitives/Markdown.js';
+export { SequenceActorNode, SequenceParallelArea } from '../likec4diagram/custom/nodes/SequenceActorNode.js';
+export { Toolbar } from '../likec4diagram/custom/nodes/toolbar/Toolbar.js';
 export { memoEdge } from '../base-primitives/memoEdge.js';
 export { memoNode } from '../base-primitives/memoNode.js';
+export { useCurrentView, useCurrentViewId } from '../hooks/useCurrentView.js';
+export { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
+export { useDiagram, useDiagramActorRef } from '../hooks/safeContext.js';
+export { useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
+export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
+export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
+export { useOptionalCurrentViewModel, useOptionalLikeC4Model } from '../context/LikeC4ModelContext.js';
+export { useSetState } from '../hooks/useSetState.js';
+export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/editor/LikeC4EditorProvider.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
+import { useContext, createContext } from 'react';
 
 const LikeC4EditorReactContext = createContext(null);
 function LikeC4EditorProvider({ children, editor }) {