@likec4/diagram 1.46.4 → 1.48.0

package/dist/LikeC4Diagram.d.ts

@@ -8,4 +8,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, onBurgerMenuClick, 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, initialWidth, initialHeight, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -2,17 +2,18 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCustomCompareMemo } from '@react-hookz/web';
 import { ReactFlowProvider } from '@xyflow/react';
 import { deepEqual } from 'fast-equals';
-import { useRef } from 'react';
-import { isPlainObject, mapValues } from 'remeda';
+import { useRef, Profiler } from 'react';
+import { isEmptyish, isPlainObject, mapValues } from 'remeda';
 import { RootContainer } from './components/RootContainer.js';
 import { TagStylesProvider } from './context/TagStylesContext.js';
 import { useId } from './hooks/useId.js';
+import { useOptionalLikeC4Model } from './hooks/useLikeC4Model.js';
 import { LikeC4DiagramUI } from './likec4diagram/DiagramUI.js';
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
 import { DiagramActorProvider } from './likec4diagram/state/DiagramActorProvider.js';
 import { LikeC4Styles } from './LikeC4Styles.js';
 import { pickViewBounds } from './utils/view-bounds.js';
-import { useOptionalLikeC4EditorPort } from './editor/LikeC4EditorProvider.js';
+import { useOptionalLikeC4Editor } from './editor/LikeC4EditorProvider.js';
 import { MinZoom, MaxZoom, FitViewPaddings } from './base/const.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
@@ -30,7 +31,7 @@ function LikeC4Diagram({
   onNodeClick,
   onNodeContextMenu,
   onOpenSource,
-  onBurgerMenuClick,
+  onLogoClick,
   onLayoutTypeChange,
   onInitialized,
   view,
@@ -64,7 +65,10 @@ function LikeC4Diagram({
 }) {
   const id = useId();
   const initialRef = useRef(null);
-  const hasEditor = !!useOptionalLikeC4EditorPort();
+  const optionalLikeC4Model = useOptionalLikeC4Model();
+  enableCompareWithLatest = enableCompareWithLatest && !!onLayoutTypeChange && !!optionalLikeC4Model && !isEmptyish(optionalLikeC4Model.$data.manualLayouts);
+  const hasLikeC4Model = !!optionalLikeC4Model;
+  const hasEditor = !!useOptionalLikeC4Editor();
   const readonly = !hasEditor;
   nodesSelectable ??= hasEditor || enableFocusMode || !!onNavigateTo || !!onNodeClick;
   const bounds = pickViewBounds(view, dynamicViewVariant);
@@ -84,8 +88,9 @@ function LikeC4Diagram({
       initialMinZoom: MinZoom
     };
   }
-  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && (bounds.width ?? 1) * (bounds.height ?? 1) > 6e6 && view.nodes.some((n) => n.children?.length > 0) : reduceGraphics;
-  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(
+  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,
     {
       ...isReducedGraphicsMode && { reducedMotion: "always" },
@@ -98,17 +103,17 @@ function LikeC4Diagram({
             enableReadOnly: readonly,
             enableFocusMode,
             enableNavigateTo: !!onNavigateTo,
-            enableElementDetails,
-            enableRelationshipDetails,
-            enableRelationshipBrowser,
-            enableSearch,
+            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: enableCompareWithLatest && !!onLayoutTypeChange
+            enableCompareWithLatest
           },
           children: /* @__PURE__ */ jsxs(
             DiagramEventHandlers,
@@ -123,7 +128,7 @@ function LikeC4Diagram({
                 onNodeClick,
                 onNodeContextMenu,
                 onOpenSource,
-                onBurgerMenuClick,
+                onLogoClick,
                 onInitialized,
                 onLayoutTypeChange
               },
@@ -137,6 +142,7 @@ function LikeC4Diagram({
                     children: /* @__PURE__ */ jsxs(
                       DiagramActorProvider,
                       {
+                        id,
                         view,
                         zoomable,
                         pannable,
@@ -167,7 +173,7 @@ function LikeC4Diagram({
         }
       ) })
     }
-  ) });
+  ) }) });
 }
 const toLiteralPaddingWithUnit = (value) => {
   if (typeof value === "number") {

package/dist/LikeC4Diagram.props.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, LayoutType, ViewChange, WhereOperator } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DynamicViewDisplayVariant, LayoutedView, LayoutType, WhereOperator } from '@likec4/core/types';
 import { ReactFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { CamelCasedProperties, SetRequired } from 'type-fest';
@@ -235,10 +235,6 @@ export type OnEdgeClick<A extends Any = Unknown> = (edge: DiagramEdge<A>, event:
  */
 export type OnCanvasClick = (event: ReactMouseEvent) => void;
 export type OnCanvasContextMenu = (event: ReactMouseEvent | MouseEvent) => void;
-export type ChangeEvent = {
-    change: ViewChange;
-};
-export type OnChange = (event: ChangeEvent) => void;
 export type OnInitialized = (params: {
     diagram: DiagramApi;
     xyflow: XYFlowInstance;
@@ -253,7 +249,7 @@ export interface LikeC4DiagramEventHandlers<A extends Any = Unknown> {
     onEdgeContextMenu?: OnEdgeClick<A> | null | undefined;
     onCanvasClick?: OnCanvasClick | null | undefined;
     onCanvasDblClick?: OnCanvasClick | null | undefined;
-    onBurgerMenuClick?: null | undefined | (() => void);
+    onLogoClick?: null | undefined | (() => void);
     onOpenSource?: OnOpenSource<A> | null | undefined;
     onInitialized?: OnInitialized | null | undefined;
     /**

package/dist/LikeC4ProjectsOverview.d.ts

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

package/dist/LikeC4ProjectsOverview.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { RootContainer } from './components/RootContainer.js';
+import { useId } from './hooks/useId.js';
+import { useChangeLikeC4Project } from './hooks/useLikeC4Project.js';
+import { LikeC4Styles } from './LikeC4Styles.js';
+import { EnsureMantine } from './context/EnsureMantine.js';
+import { FramerMotionConfig } from './context/FramerMotionConfig.js';
+import { ProjectsOverview } from './projects-overview/ProjectsOverview.js';
+
+function LikeC4ProjectsOverview({
+  view,
+  className,
+  onNavigateToProject,
+  ...props
+}) {
+  const onChangeLikeC4Project = useChangeLikeC4Project();
+  const id = useId();
+  onNavigateToProject ??= onChangeLikeC4Project;
+  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [
+    /* @__PURE__ */ jsx(LikeC4Styles, { id }),
+    /* @__PURE__ */ jsx(RootContainer, { id, className, children: /* @__PURE__ */ jsx(
+      ProjectsOverview,
+      {
+        view,
+        onNavigateToProject,
+        ...props
+      }
+    ) })
+  ] }) });
+}
+
+export { LikeC4ProjectsOverview };

package/dist/LikeC4ProjectsProvider.js

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

package/dist/LikeC4Styles.d.ts

@@ -1,7 +1,3 @@
-import { NamedExoticComponent } from 'react';
-export declare const LikeC4Styles: NamedExoticComponent<{
+export declare function LikeC4Styles({ id }: {
     id: string;
-}>;
-/**
- * @internal Memoized styles gives a performance boost during development
- */
+}): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Styles.js

@@ -1,41 +1,25 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMantineStyleNonce } from '@mantine/core';
-import { toRgba, mix, toHex, scale } from 'khroma';
-import { memo } from 'react';
-import { pipe, entries, map, join, range } from 'remeda';
+import { useMemo, memo } from 'react';
+import { pipe, entries, map, join } from 'remeda';
+import { MAX_COMPOUND_DEPTH } from './base/const.js';
 import { useLikeC4Styles } from './hooks/useLikeC4Styles.js';
 
 const scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`;
 const whenDark = scheme("dark");
-const MAX_DEPTH = 5;
 const generateCompoundColors = (rootSelector, name, colors, depth) => {
-  const compoundDarkColor = (color) => toHex(
-    scale(color, {
-      l: -22 - 5 * depth,
-      s: -10 - 6 * depth
-    })
-  );
-  const compoundLightColor = (color) => toHex(
-    scale(color, {
-      l: -20 - 3 * depth,
-      s: -3 - 6 * depth
-    })
-  );
-  const selector = `:where(${rootSelector} [data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
+  const selector = `${rootSelector} :is([data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
   return `
 ${selector} {
-  --likec4-palette-fill: ${compoundLightColor(colors.elements.fill)};
-  --likec4-palette-stroke: ${compoundLightColor(colors.elements.stroke)};
+  --likec4-palette-fill: ${colors.fill};
+  --likec4-palette-stroke: ${colors.stroke};  
 }
-${whenDark} ${selector} {
-  --likec4-palette-fill: ${compoundDarkColor(colors.elements.fill)};
-  --likec4-palette-stroke: ${compoundDarkColor(colors.elements.stroke)};
-}
-  `.trim();
+  `;
 };
-function toStyle(rootSelector, name, colors) {
+function toStyle(styles, params) {
+  const { rootSelector, name, colors } = params;
   const { elements, relationships } = colors;
-  const selector = `:where(${rootSelector} [data-likec4-color=${name}])`;
+  const selector = `${rootSelector} :is([data-likec4-color=${name}])`;
   return [
     `
 ${selector} {
@@ -46,38 +30,55 @@ ${selector} {
   --likec4-palette-relation-stroke: ${relationships.line};
   --likec4-palette-relation-label: ${relationships.label};
   --likec4-palette-relation-label-bg: ${relationships.labelBg};
-  --likec4-palette-relation-stroke-selected: ${toRgba(mix(relationships.line, "black", 85))};
+  --likec4-palette-relation-stroke-selected: oklch(from ${relationships.line} calc(l - 0.15) c h);
 }
 ${whenDark} ${selector} {
-  --likec4-palette-relation-stroke-selected: ${toRgba(mix(relationships.line, "white", 70))};
+  --likec4-palette-relation-stroke-selected: oklch(from ${relationships.line} calc(l + 0.15) c h);
 }
 
-  `.trim(),
-    ...range(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(rootSelector, name, colors, depth))
-  ].join("\n");
+  `,
+    ...styles.colorsForCompounds(elements, MAX_COMPOUND_DEPTH).map(
+      (colors2, depth) => generateCompoundColors(rootSelector, name, colors2, depth + 1)
+    )
+  ].map((s) => s.trim()).join("\n");
 }
-function generateBuiltInColorStyles(rootSelector, theme) {
+function generateBuiltInColorStyles(styles, rootSelector) {
   return pipe(
-    theme.colors,
+    styles.theme.colors,
     entries(),
-    map(([color, values]) => toStyle(rootSelector, color, values)),
+    map(
+      ([name, colors]) => toStyle(styles, {
+        rootSelector,
+        name,
+        colors
+      })
+    ),
     join("\n")
   );
 }
-const LikeC4Styles = memo(({ id }) => {
+function LikeC4Styles({ id }) {
   const rootSelector = `#${id}`;
   const nonce = useMantineStyleNonce()?.();
-  const { theme } = useLikeC4Styles();
-  const colorsStyles = generateBuiltInColorStyles(rootSelector, theme);
+  const $styles = useLikeC4Styles();
+  const colorsStyles = useMemo(() => generateBuiltInColorStyles($styles, rootSelector), [rootSelector, $styles]);
   return /* @__PURE__ */ jsx(
-    "style",
+    MemoizedStyle,
     {
-      type: "text/css",
-      "data-likec4-colors": id,
-      dangerouslySetInnerHTML: { __html: colorsStyles },
-      nonce
+      id,
+      nonce,
+      colorsStyles
     }
   );
-});
+}
+const MemoizedStyle = memo(({ id, nonce, colorsStyles }) => /* @__PURE__ */ jsx(
+  "style",
+  {
+    type: "text/css",
+    "data-likec4-colors": id,
+    dangerouslySetInnerHTML: { __html: colorsStyles },
+    nonce
+  }
+));
+MemoizedStyle.displayName = "MemoizedStyle";
 
 export { LikeC4Styles };

package/dist/LikeC4View.d.ts

@@ -6,6 +6,14 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
      * View to display.
      */
     viewId: t.aux.ViewId<A>;
+    /**
+     * Layout to display
+     * - `auto`: auto-layouted from the current sources
+     * - `manual`: manually layouted (if available, falls back to `auto`)
+     *
+     * @default 'manual'
+     */
+    layoutType?: t.LayoutType | undefined;
     /**
      * Enable/disable panning
      * @default false
@@ -260,4 +268,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, 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, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4View.js

@@ -14,7 +14,7 @@ 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.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';
 
 const cssInteractive = css({
   cursor: "pointer",
@@ -32,6 +32,7 @@ function LikeC4View({
   colorScheme,
   injectFontCss = true,
   controls = false,
+  layoutType: initialLayoutType = "manual",
   background = "transparent",
   browser = true,
   showNavigationButtons = false,
@@ -52,11 +53,11 @@ function LikeC4View({
 }) {
   const rootRef = useRef(null);
   const likec4model = useOptionalLikeC4Model();
-  const [layoutType, setLayoutType] = useState("manual");
+  const [layoutType, setLayoutType] = useState(initialLayoutType);
   const [browserViewId, _onNavigateTo] = useState(null);
   const onNavigateTo = useCallbackRef((viewId2) => {
     if (viewId2 && viewId2 !== browserViewId) {
-      setLayoutType("manual");
+      setLayoutType(initialLayoutType);
     }
     _onNavigateTo(viewId2);
   });
@@ -66,17 +67,18 @@ function LikeC4View({
   if (!likec4model) {
     return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
   }
-  const view = likec4model.findView(viewId)?.$layouted;
-  if (!view) {
+  const viewModel = likec4model.findView(viewId);
+  if (!viewModel) {
     return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
   }
-  if (view._stage !== "layouted") {
+  if (!viewModel.isLayouted()) {
     return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
       'LikeC4 View "$',
       viewId,
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
+  const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
   const browserViewModel = browserViewId ? likec4model.findView(browserViewId) : null;
   const browserView = layoutType === "manual" ? browserViewModel?.$layouted : browserViewModel?.$view;
   const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
@@ -131,8 +133,8 @@ function LikeC4View({
             },
             reactFlowProps,
             renderNodes,
-            children,
-            ...props
+            ...props,
+            children
           }
         ),
         /* @__PURE__ */ jsx(AnimatePresence, { ...root, children: browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: () => onNavigateTo(null), children: [

package/dist/ReactLikeC4.d.ts

@@ -3,6 +3,16 @@ import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Dia
 import type * as t from '@likec4/core/types';
 export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
     viewId: t.aux.ViewId<A>;
+    /**
+     * Layout to display
+     * - `auto`: auto-layouted from the current sources
+     * - `manual`: manually layouted (if available, falls back to `auto`)
+     *
+     * Uncontrolled initial value, use `onLayoutTypeChange` to control it.
+     *
+     * @default 'manual'
+     */
+    layoutType?: t.LayoutType | undefined;
     /**
      * Keep aspect ratio of the diagram
      *
@@ -14,7 +24,7 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
      */
     colorScheme?: 'light' | 'dark' | undefined;
     /**
-     * LikeC4 views are using 'IBM Plex Sans' font.
+     * LikeC4 views are using 'IBM Plex Sans Variable' font.
      * By default, component injects the CSS to document head.
      * Set to false if you want to handle the font yourself.
      *
@@ -33,4 +43,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, 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>): import("react/jsx-runtime").JSX.Element;

package/dist/ReactLikeC4.js

@@ -8,6 +8,7 @@ import { pickViewBounds } from './utils/view-bounds.js';
 
 function ReactLikeC4({
   viewId,
+  layoutType: initialLayoutType = "manual",
   className,
   colorScheme,
   injectFontCss = true,
@@ -22,17 +23,18 @@ function ReactLikeC4({
   if (!likec4model) {
     return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you provided LikeC4ModelProvider." });
   }
-  const view = likec4model.findView(viewId)?.$view;
-  if (!view) {
+  const viewModel = likec4model.findView(viewId);
+  if (!viewModel) {
     return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
   }
-  if (view._stage !== "layouted") {
+  if (!viewModel.isLayouted()) {
     return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
       'LikeC4 View "$',
       viewId,
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
+  const view = initialLayoutType === "manual" ? viewModel.$layouted : viewModel.$view;
   const bounds = pickViewBounds(view, props.dynamicViewVariant);
   const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
   return /* @__PURE__ */ jsx(

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

@@ -0,0 +1,7 @@
+import { PropsWithChildren, Context } from 'react';
+import { AdhocEditorActorRef } from './actor';
+import { AdhocViewService } from './actor.types';
+export declare const AdhocEditorActorContext: Context<AdhocEditorActorRef | null>;
+export declare function AdhocEditorActorProvider({ children, service }: PropsWithChildren<{
+    service: AdhocViewService;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/adhoc-editor/ActorProvider.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { useLogger } from '@mantine/hooks';
+import { useActorRef } from '@xstate/react';
+import { useRef, useEffect, createContext } from 'react';
+import { fromPromise } from 'xstate';
+import { adhocEditorLogic } from './actor.js';
+
+const AdhocEditorActorContext = createContext(null);
+const State = {
+  read: () => JSON.parse(sessionStorage.getItem("adhoc-editor-state") || "null") ?? void 0,
+  write: (state) => sessionStorage.setItem("adhoc-editor-state", JSON.stringify(state))
+};
+function AdhocEditorActorProvider({ children, service }) {
+  const serviceRef = useRef(service);
+  serviceRef.current = service;
+  const actorRef = useActorRef(
+    adhocEditorLogic.provide({
+      actors: {
+        service: fromPromise(({ input }) => serviceRef.current.process(input))
+      }
+    }),
+    {
+      id: "adhoc-editor",
+      snapshot: State.read(),
+      systemId: "adhoc-editor",
+      inspect: (event) => {
+        console.log("[AdhocEditorActor]", event);
+      }
+    }
+  );
+  useLogger("AdhocEditorActor", [actorRef]);
+  useEffect(() => {
+    const subscription = actorRef.subscribe((state) => {
+      State.write(state);
+    });
+    return () => subscription.unsubscribe();
+  }, [actorRef]);
+  return /* @__PURE__ */ jsx(AdhocEditorActorContext.Provider, { value: actorRef, children });
+}
+
+export { AdhocEditorActorContext, AdhocEditorActorProvider };

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

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

package/dist/adhoc-editor/EditorNavigationPanel.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useSelector } from '@xstate/react';
+import { prop } from 'remeda';
+import { NavigationPanel } from '../components/NavigationPanel.js';
+import { useAdhocEditorActor, selectFromContext } from './hooks.js';
+import { ViewRulesPanel } from './viewrules/ViewRulesPanel.js';
+
+const selectRules = selectFromContext(prop("rules"));
+const EditorNavigationPanel = () => {
+  const actorRef = useAdhocEditorActor();
+  const rules = useSelector(actorRef, selectRules);
+  return /* @__PURE__ */ jsxs(NavigationPanel.Root, { children: [
+    /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [
+      /* @__PURE__ */ jsx(NavigationPanel.Logo, {}),
+      /* @__PURE__ */ jsx(NavigationPanel.Label, { children: "View Editor" })
+    ] }),
+    rules.length > 0 && /* @__PURE__ */ jsx(NavigationPanel.Dropdown, { css: { maxW: "250px" }, children: /* @__PURE__ */ jsx(
+      ViewRulesPanel,
+      {
+        rules,
+        onToggle: (rule) => {
+          actorRef.send({ type: "toggle.rule", ruleId: rule.id });
+        },
+        onDelete: (rule) => {
+          actorRef.send({ type: "delete.rule", ruleId: rule.id });
+        }
+      }
+    ) })
+  ] });
+};
+
+export { EditorNavigationPanel };

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

@@ -0,0 +1,4 @@
+import { AdhocViewService } from './actor.types';
+export declare function LikeC4AdHocViewEditor({ service }: {
+    service: AdhocViewService;
+}): import("react/jsx-runtime").JSX.Element;