@likec4/diagram 1.48.0 → 1.50.0

package/README.md

@@ -35,15 +35,13 @@ You need to prepare it and wrap your diagram with`LikeC4ModelProvider` component
 
 See [📖 Documentation](https://likec4.dev/tooling/react/#likec4modelprovider) for examples.
 
-## Bundled version
-
-The easiest way to use this package is the bundled version.\
-Diagram renders inside shadow DOM and has its own styles.
-
 ### LikeC4View
 
+The easiest way to use this package is the `LikeC4View` component.\
+It renders inside shadow DOM and has its own styles.
+
 ```tsx
-import { LikeC4ModelProvider, LikeC4View } from '@likec4/diagram/bundle'
+import { LikeC4ModelProvider, LikeC4View } from '@likec4/diagram'
 /**
  * See https://likec4.dev/tooling/react/#likec4modelprovider
  */
@@ -68,7 +66,7 @@ See [LikeC4ViewProps](./src/LikeC4View.tsx) for available props.
 You may need to import icons, if you use built-in node renderers.
 
 ```tsx
-import { type ElementIconRenderer, LikeC4, LikeC4ModelProvider, LikeC4View } from '@likec4/diagram/bundle'
+import { type ElementIconRenderer, LikeC4, LikeC4ModelProvider, LikeC4View } from '@likec4/diagram'
 import { lazy, Suspense } from 'react'
 
 // Better to lazy load icons, bundle is quite large at the moment
@@ -100,7 +98,7 @@ function App() {
 Component works in most usecases, but if you need more - use `ReactLikeC4`:
 
 ```tsx
-import { ReactLikeC4, LikeC4ModelProvider } from '@likec4/diagram/bundle'
+import { ReactLikeC4, LikeC4ModelProvider } from '@likec4/diagram'
 
 function App() {
   const [viewId, setViewId] = useState('index')
@@ -279,7 +277,7 @@ function App() {
 ### Custom node renderer
 
 LikeC4Diagram can use custom node renderers.\
-Compose custom nodes renderers using primitives from `@likec4/diagram/custom` (or `@likec4/diagram/bundle/custom` for the bundled version).\
+Compose custom nodes renderers using primitives from `@likec4/diagram/custom`.\
 See [customNodes.tsx](./src/custom/customNodes.tsx) for examples.
 
 ```tsx

package/adhoc-editor/package.json

@@ -0,0 +1,4 @@
+{
+  "types": "../dist/adhoc-editor/index.d.ts",
+  "module": "../dist/adhoc-editor/index.js"
+}

package/dist/LikeC4Diagram.d.ts

@@ -1,5 +1,6 @@
 import { Any } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4DiagramProperties<A> & LikeC4DiagramEventHandlers<A>>;
 /**
@@ -8,4 +9,4 @@ export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4Di
  *
  * Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
  */
-export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onInitialized, view, className, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onLogoClick, onLayoutTypeChange, onInitialized, view, className, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableCompareWithLatest, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, enableNotes, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): JSX.Element;

package/dist/LikeC4Diagram.js

@@ -5,9 +5,10 @@ import { deepEqual } from 'fast-equals';
 import { useRef, Profiler } from 'react';
 import { isEmptyish, isPlainObject, mapValues } from 'remeda';
 import { RootContainer } from './components/RootContainer.js';
+import { CurrentViewModelProvider } from './context/CurrentViewModelProvider.js';
 import { TagStylesProvider } from './context/TagStylesContext.js';
 import { useId } from './hooks/useId.js';
-import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
+import { useOptionalLikeC4Model } from './context/LikeC4ModelContext.js';
 import { LikeC4DiagramUI } from './likec4diagram/DiagramUI.js';
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
 import { DiagramActorProvider } from './likec4diagram/state/DiagramActorProvider.js';
@@ -21,6 +22,8 @@ import { IconRendererProvider } from './context/IconRenderer.js';
 import { DiagramFeatures } from './context/DiagramFeatures.js';
 import { DiagramEventHandlers } from './context/DiagramEventHandlers.js';
 
+const noop = () => {
+};
 function LikeC4Diagram({
   onCanvasClick,
   onCanvasContextMenu,
@@ -54,6 +57,7 @@ function LikeC4Diagram({
   enableDynamicViewWalkthrough = false,
   dynamicViewVariant,
   enableSearch = false,
+  enableNotes = true,
   initialWidth,
   initialHeight,
   reduceGraphics = "auto",
@@ -89,91 +93,85 @@ function LikeC4Diagram({
     };
   }
   const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && view.bounds.width * view.bounds.height > 16e6 && view.nodes.some((n) => n.children?.length > 0) : reduceGraphics;
-  return /* @__PURE__ */ jsx(Profiler, { id: "LikeC4Diagram", onRender: () => {
-  }, children: /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(
-    FramerMotionConfig,
+  return /* @__PURE__ */ jsx(Profiler, { id: "LikeC4Diagram", onRender: noop, children: /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, { reducedMotion: isReducedGraphicsMode ? "always" : void 0, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: renderIcon ?? null, children: /* @__PURE__ */ jsx(
+    DiagramFeatures,
     {
-      ...isReducedGraphicsMode && { reducedMotion: "always" },
-      children: /* @__PURE__ */ jsx(IconRendererProvider, { value: renderIcon ?? null, children: /* @__PURE__ */ jsx(
-        DiagramFeatures,
+      features: {
+        enableFitView: fitView,
+        enableEditor: hasEditor,
+        enableReadOnly: readonly,
+        enableFocusMode,
+        enableNavigateTo: !!onNavigateTo,
+        enableElementDetails: enableElementDetails && hasLikeC4Model,
+        enableRelationshipDetails: enableRelationshipDetails && hasLikeC4Model,
+        enableRelationshipBrowser: enableRelationshipBrowser && hasLikeC4Model,
+        enableSearch: enableSearch && hasLikeC4Model,
+        enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
+        enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
+        enableNotations,
+        enableVscode: !!onOpenSource,
+        enableControls: controls,
+        enableElementTags,
+        enableCompareWithLatest,
+        enableNotes
+      },
+      children: /* @__PURE__ */ jsxs(
+        DiagramEventHandlers,
         {
-          features: {
-            enableFitView: fitView,
-            enableEditor: hasEditor,
-            enableReadOnly: readonly,
-            enableFocusMode,
-            enableNavigateTo: !!onNavigateTo,
-            enableElementDetails: enableElementDetails && hasLikeC4Model,
-            enableRelationshipDetails: enableRelationshipDetails && hasLikeC4Model,
-            enableRelationshipBrowser: enableRelationshipBrowser && hasLikeC4Model,
-            enableSearch: enableSearch && hasLikeC4Model,
-            enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
-            enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
-            enableNotations,
-            enableVscode: !!onOpenSource,
-            enableControls: controls,
-            enableElementTags,
-            enableCompareWithLatest
+          handlers: {
+            onCanvasClick,
+            onCanvasContextMenu,
+            onCanvasDblClick,
+            onEdgeClick,
+            onEdgeContextMenu,
+            onNavigateTo,
+            onNodeClick,
+            onNodeContextMenu,
+            onOpenSource,
+            onLogoClick,
+            onInitialized,
+            onLayoutTypeChange
           },
-          children: /* @__PURE__ */ jsxs(
-            DiagramEventHandlers,
-            {
-              handlers: {
-                onCanvasClick,
-                onCanvasContextMenu,
-                onCanvasDblClick,
-                onEdgeClick,
-                onEdgeContextMenu,
-                onNavigateTo,
-                onNodeClick,
-                onNodeContextMenu,
-                onOpenSource,
-                onLogoClick,
-                onInitialized,
-                onLayoutTypeChange
-              },
-              children: [
-                /* @__PURE__ */ jsx(LikeC4Styles, { id }),
-                /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainer, { id, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
-                  ReactFlowProvider,
+          children: [
+            /* @__PURE__ */ jsx(LikeC4Styles, { id }),
+            /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainer, { id, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
+              ReactFlowProvider,
+              {
+                fitView,
+                ...initialRef.current,
+                children: /* @__PURE__ */ jsx(
+                  DiagramActorProvider,
                   {
-                    fitView,
-                    ...initialRef.current,
-                    children: /* @__PURE__ */ jsxs(
-                      DiagramActorProvider,
-                      {
-                        id,
-                        view,
-                        zoomable,
-                        pannable,
-                        fitViewPadding,
-                        nodesDraggable: hasEditor,
-                        nodesSelectable,
-                        where: where ?? null,
-                        dynamicViewVariant,
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            LikeC4DiagramXYFlow,
-                            {
-                              background,
-                              reactFlowProps,
-                              renderNodes,
-                              children
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(LikeC4DiagramUI, {})
-                        ]
-                      }
-                    )
+                    id,
+                    view,
+                    zoomable,
+                    pannable,
+                    fitViewPadding,
+                    nodesDraggable: hasEditor,
+                    nodesSelectable,
+                    where: where ?? null,
+                    dynamicViewVariant,
+                    children: /* @__PURE__ */ jsxs(CurrentViewModelProvider, { children: [
+                      /* @__PURE__ */ jsx(
+                        LikeC4DiagramXYFlow,
+                        {
+                          background,
+                          reactFlowProps,
+                          renderNodes,
+                          children
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(LikeC4DiagramUI, {})
+                    ] })
                   }
-                ) }) })
-              ]
-            }
-          )
+                )
+              }
+            ) }) })
+          ]
         }
-      ) })
+      )
     }
-  ) }) });
+  ) }) }) }) });
 }
 const toLiteralPaddingWithUnit = (value) => {
   if (typeof value === "number") {

package/dist/LikeC4Diagram.props.d.ts

@@ -183,6 +183,12 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * @default false
      */
     enableElementTags?: boolean | undefined;
+    /**
+     * Display element notes, if they are present in the view
+     *
+     * @default true
+     */
+    enableNotes?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      * Enable it if you have a large or static view
@@ -194,6 +200,8 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
     /**
      * Render icon for an element, bundled or remote
      * By default, if icon is http:// or https://, it will be rendered as an image
+     *
+     * Consider using `IconRendererProvider`
      */
     renderIcon?: ElementIconRenderer | undefined;
     /**
@@ -234,7 +242,7 @@ export type OnEdgeClick<A extends Any = Unknown> = (edge: DiagramEdge<A>, event:
  * On pane/canvas click (not on any node or edge)
  */
 export type OnCanvasClick = (event: ReactMouseEvent) => void;
-export type OnCanvasContextMenu = (event: ReactMouseEvent | MouseEvent) => void;
+export type OnCanvasContextMenu = (event: ReactMouseEvent) => void;
 export type OnInitialized = (params: {
     diagram: DiagramApi;
     xyflow: XYFlowInstance;

package/dist/LikeC4ModelProvider.d.ts

@@ -1,10 +1,10 @@
 import { LikeC4Model } from '@likec4/core/model';
-import { aux } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-export interface LikeC4ModelProviderProps<A extends aux.Any = aux.Unknown> {
-    likec4model: LikeC4Model<A>;
+import { JSX } from 'react/jsx-runtime';
+export interface LikeC4ModelProviderProps {
+    likec4model: LikeC4Model<any>;
 }
 /**
  * Ensures LikeC4Model context
  */
-export declare function LikeC4ModelProvider<A extends aux.Any = aux.Unknown>({ children, likec4model, }: PropsWithChildren<LikeC4ModelProviderProps<A>>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ModelProvider({ children, likec4model, }: PropsWithChildren<LikeC4ModelProviderProps>): JSX.Element;

package/dist/LikeC4ModelProvider.js

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { LikeC4ModelContext } from './context/LikeC4ModelContext.js';
+import { LikeC4ModelContextProvider } from './context/LikeC4ModelContext.js';
 
 function LikeC4ModelProvider({
   children,
   likec4model
 }) {
-  return /* @__PURE__ */ jsx(LikeC4ModelContext.Provider, { value: likec4model, children });
+  return /* @__PURE__ */ jsx(LikeC4ModelContextProvider, { value: likec4model, children });
 }
 
 export { LikeC4ModelProvider };

package/dist/LikeC4ProjectsOverview.d.ts

@@ -1,7 +1,8 @@
+import { JSX } from 'react/jsx-runtime';
 import { Simplify } from 'type-fest';
 import { ProjectsOverviewProps } from './projects-overview';
-export type LikeC4ProjectsOverviewProps = Simplify<Omit<ProjectsOverviewProps, 'id'> & {
+export type LikeC4ProjectsOverviewProps = Simplify<ProjectsOverviewProps & {
     className?: string;
     onSelectProject?: ProjectsOverviewProps['onNavigateToProject'];
 }>;
-export declare function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props }: LikeC4ProjectsOverviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ProjectsOverview({ view, className, onNavigateToProject, ...props }: LikeC4ProjectsOverviewProps): JSX.Element;

package/dist/LikeC4ProjectsProvider.d.ts

@@ -1,5 +1,6 @@
 import { LikeC4Project, ProjectId } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
+import { JSX } from 'react/jsx-runtime';
 export interface LikeC4ProjectsProviderProps {
     /**
      * Projects to be used in the navigation panel.
@@ -14,4 +15,4 @@ export interface LikeC4ProjectsProviderProps {
 /**
  * Ensures LikeC4Projects context
  */
-export declare function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjectChange, }: PropsWithChildren<LikeC4ProjectsProviderProps>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjectChange, }: PropsWithChildren<LikeC4ProjectsProviderProps>): JSX.Element;

package/dist/LikeC4ProjectsProvider.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { deepEqual } from 'fast-equals';
-import { useContext, useEffect, useState } from 'react';
-import { LikeC4ProjectsContext } from './context/LikeC4ProjectsContext.js';
+import { useEffect, useState } from 'react';
+import { useOptionalProjectsContext, LikeC4ProjectsContextProvider } from './context/LikeC4ProjectsContext.js';
 import { useCallbackRef } from './hooks/useCallbackRef.js';
 
 function LikeC4ProjectsProvider({
@@ -9,7 +9,7 @@ function LikeC4ProjectsProvider({
   projects,
   onProjectChange: _onProjectChange
 }) {
-  const outerScope = useContext(LikeC4ProjectsContext);
+  const outerScope = useOptionalProjectsContext();
   useEffect(() => {
     if (outerScope) {
       console.warn("LikeC4ProjectsProvider should not be nested inside another one");
@@ -22,7 +22,7 @@ function LikeC4ProjectsProvider({
       return deepEqual(current.projects, projects) ? current : { ...current, projects };
     });
   }, [projects]);
-  return /* @__PURE__ */ jsx(LikeC4ProjectsContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(LikeC4ProjectsContextProvider, { value, children });
 }
 
 export { LikeC4ProjectsProvider };

package/dist/LikeC4Styles.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react/jsx-runtime';
 export declare function LikeC4Styles({ id }: {
     id: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): JSX.Element;

package/dist/LikeC4View.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { ElementIconRenderer, NodeRenderers, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from './LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
 export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
@@ -136,6 +137,12 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
      * @default enableRelationshipDetails
      */
     enableRelationshipBrowser?: boolean | undefined;
+    /**
+     * Display element notes, if they are present in the view
+     *
+     * @default false
+     */
+    enableNotes?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      *
@@ -243,6 +250,12 @@ export interface LikeC4BrowserProps {
      * @default true
      */
     enableCompareWithLatest?: boolean | undefined;
+    /**
+     * Display element notes, if they are present in the view
+     *
+     * @default true
+     */
+    enableNotes?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      *
@@ -268,4 +281,4 @@ export interface LikeC4BrowserProps {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, layoutType: initialLayoutType, background, browser, showNavigationButtons, enableNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, layoutType: initialLayoutType, background, browser, showNavigationButtons, enableNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableNotes, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): JSX.Element;

package/dist/LikeC4View.js

@@ -6,15 +6,16 @@ import { AnimatePresence } from 'motion/react';
 import { useRef, useState } from 'react';
 import { isBoolean } from 'remeda';
 import { FitViewPaddings } from './base/const.js';
-import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
-import { FramerMotionConfig } from './context/FramerMotionConfig.js';
+import { ErrorMessage } from './components/ViewNotFound.js';
 import { useCallbackRef } from './hooks/useCallbackRef.js';
-import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
+import 'fast-equals';
+import { useOptionalLikeC4Model } from './context/LikeC4ModelContext.js';
 import { LikeC4Diagram } from './LikeC4Diagram.js';
 import { Overlay } from './overlays/overlay/Overlay.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.js';
 import { pickViewBounds } from './utils/view-bounds.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';
+import { stopPropagation } from './utils/xyflow.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';
 
 const cssInteractive = css({
   cursor: "pointer",
@@ -42,6 +43,7 @@ function LikeC4View({
   enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,
+  enableNotes = false,
   reduceGraphics = "auto",
   mantineTheme,
   styleNonce,
@@ -64,18 +66,30 @@ function LikeC4View({
   const onNavigateToThisView = useCallbackRef(() => {
     onNavigateTo(viewId);
   });
+  const closeBrowser = useCallbackRef(() => {
+    onNavigateTo(null);
+  });
   if (!likec4model) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
+    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider in the component tree." });
   }
   const viewModel = likec4model.findView(viewId);
   if (!viewModel) {
-    return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
+    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+      "LikeC4 View ",
+      /* @__PURE__ */ jsx("code", { children: viewId }),
+      " not found in LikeC4Model.",
+      /* @__PURE__ */ jsx("br", {}),
+      "Available views: ",
+      [...likec4model.views()].map((v) => v.id).join(", ")
+    ] });
   }
   if (!viewModel.isLayouted()) {
     return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
-      'LikeC4 View "$',
-      viewId,
-      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
+      "LikeC4 View ",
+      /* @__PURE__ */ jsx("code", { children: viewId }),
+      " is not layouted.",
+      /* @__PURE__ */ jsx("br", {}),
+      "Make sure you have LikeC4ModelProvider with layouted model."
     ] });
   }
   const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
@@ -87,7 +101,7 @@ function LikeC4View({
   const browserProps = isBoolean(browser) ? {} : browser;
   const bounds = pickViewBounds(view, props.dynamicViewVariant);
   const root = rootRef.current ? { root: rootRef.current } : void 0;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     ShadowRoot,
     {
       ref: rootRef,
@@ -101,7 +115,7 @@ function LikeC4View({
         className
       ),
       style,
-      children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [
+      children: [
         /* @__PURE__ */ jsx(
           LikeC4Diagram,
           {
@@ -120,6 +134,7 @@ function LikeC4View({
             enableElementDetails,
             enableRelationshipBrowser,
             enableElementTags: false,
+            enableNotes,
             controls,
             reduceGraphics,
             className: cx(
@@ -137,7 +152,7 @@ function LikeC4View({
             children
           }
         ),
-        /* @__PURE__ */ jsx(AnimatePresence, { ...root, children: browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: () => onNavigateTo(null), children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { ...root, children: browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: closeBrowser, children: [
           /* @__PURE__ */ jsx(
             LikeC4Diagram,
             {
@@ -154,6 +169,7 @@ function LikeC4View({
               enableRelationshipDetails: true,
               enableSearch: true,
               enableElementTags: true,
+              enableNotes: true,
               enableCompareWithLatest: true,
               controls: true,
               fitView: true,
@@ -165,20 +181,17 @@ function LikeC4View({
               onLayoutTypeChange: setLayoutType
             }
           ),
-          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "4", right: "4", zIndex: "999", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "4", right: "4", zIndex: "999", onClick: stopPropagation, children: /* @__PURE__ */ jsx(
             ActionIcon,
             {
               variant: "default",
               color: "gray",
-              onClick: (e) => {
-                e.stopPropagation();
-                onNavigateTo(null);
-              },
+              onClick: closeBrowser,
               children: /* @__PURE__ */ jsx(IconX, {})
             }
           ) })
         ] }) })
-      ] })
+      ]
     }
   );
 }

package/dist/ReactLikeC4.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 import type * as t from '@likec4/core/types';
 export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
@@ -43,4 +44,4 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, layoutType: initialLayoutType, className, colorScheme, injectFontCss, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
+export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, layoutType: initialLayoutType, className, colorScheme, injectFontCss, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): JSX.Element;

package/dist/ReactLikeC4.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { ErrorMessage, ViewNotFound } from './components/ViewNotFound.js';
-import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
+import 'fast-equals';
+import 'react';
+import { useOptionalLikeC4Model } from './context/LikeC4ModelContext.js';
 import { LikeC4Diagram } from './LikeC4Diagram.js';
 import { ShadowRoot } from './shadowroot/ShadowRoot.js';
 import { pickViewBounds } from './utils/view-bounds.js';

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,4 +1,5 @@
 import { Any, UnknownLayouted } from '@likec4/core/types';
+import { JSX } from 'react/jsx-runtime';
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
 export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'renderNodes' | 'dynamicViewVariant' | 'where'>;
 /**
@@ -7,4 +8,4 @@ export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperti
  *
  * @internal
  */
-export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, className, ...rest }: StaticLikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, className, ...rest }: StaticLikeC4DiagramProps<A>): JSX.Element;

package/dist/StaticLikeC4Diagram.js

@@ -34,6 +34,7 @@ function StaticLikeC4Diagram({
       enableSearch: false,
       nodesSelectable: false,
       enableElementTags: false,
+      enableNotes: false,
       ...rest
     }
   );

package/dist/_virtual/store-1b2fbb72.cjs.js

@@ -0,0 +1,3 @@
+var store1b2fbb72_cjs = {};
+
+export { store1b2fbb72_cjs as __exports };

package/dist/_virtual/xstate-store-react.cjs.js

@@ -0,0 +1,5 @@
+import { __require as requireXstateStoreReact_cjs } from '../node_modules/.pnpm/@xstate_store@3.14.0_react@19.2.4/node_modules/@xstate/store/react/dist/xstate-store-react.cjs.js';
+
+var xstateStoreReact_cjsExports = requireXstateStoreReact_cjs();
+
+export { xstateStoreReact_cjsExports as x };

package/dist/_virtual/xstate-store-react.cjs2.js

@@ -0,0 +1,3 @@
+var xstateStoreReact_cjs = {};
+
+export { xstateStoreReact_cjs as __exports };

package/dist/adhoc-editor/EditorPanel.d.ts

@@ -0,0 +1 @@
+export declare const EditorPanel: () => import("react/jsx-runtime").JSX.Element;