@likec4/diagram 1.34.2 → 1.35.0

package/dist/LikeC4Diagram.props.d.ts

@@ -31,6 +31,25 @@ export type LikeC4ColorScheme = 'light' | 'dark';
 export type OverrideReactFlowProps = Pick<XYFlowProps, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold'>;
 export type PaddingUnit = 'px' | '%';
 export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
+/**
+ * Padding around the diagram
+ *
+ * @example
+ * {
+ *   top: '8px',
+ *   right: '8px',
+ *   bottom: '8px',
+ *   left: '8px',
+ * }
+ */
+export type ViewPadding = PaddingWithUnit | {
+    top?: PaddingWithUnit;
+    right?: PaddingWithUnit;
+    bottom?: PaddingWithUnit;
+    left?: PaddingWithUnit;
+    x?: PaddingWithUnit;
+    y?: PaddingWithUnit;
+};
 export interface LikeC4DiagramProperties<A extends aux.Any> {
     view: LayoutedView<A>;
     className?: string | undefined;
@@ -51,10 +70,11 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
     readonly?: boolean | undefined;
     /**
      * Show/hide panel with top left controls,
+     * - `next` - Experimental navigation panel
      *
      * @default true if not readonly
      */
-    controls?: boolean | undefined;
+    controls?: boolean | 'next' | undefined;
     /**
      * If set, initial viewport will show all nodes & edges
      * @default true
@@ -63,8 +83,29 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
     /**
      * Padding around the diagram
      * @default '8px'
-     */
-    fitViewPadding?: PaddingWithUnit | undefined;
+     *
+     * @see {@link ViewPadding}
+     *
+     * @example
+     * ```tsx
+     * <LikeC4Diagram
+     *   fitViewPadding={{
+     *     x: '16px',
+     *     y: '16px',
+     *   }}
+     * />
+     *
+     * <LikeC4Diagram
+     *   fitViewPadding={{
+     *     top: '8px',
+     *     right: '8px',
+     *     bottom: '8px',
+     *     left: '8px',
+     *   }}
+     * />
+     * ```
+     */
+    fitViewPadding?: ViewPadding | undefined;
     /**
      * @default false if readonly
      */
@@ -149,8 +190,9 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
     /**
      * 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
+     * - `auto` - will be `true` if view has more then 3000 * 2000 pixels
      *
-     * @default 'auto' - will be `true` if view has more then 3000 * 2000 pixels
+     * @default 'auto'
      */
     reduceGraphics?: 'auto' | boolean | undefined;
     /**
@@ -160,6 +202,11 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
     renderIcon?: ElementIconRenderer | undefined;
     /**
      * Customize layout of the controls on the top left
+     *
+     * @note
+     * Ignored if `controls="next"`
+     *
+     * @see {@link controls}
      */
     renderControls?: ControlsCustomLayout | undefined;
     /**

package/dist/LikeC4ModelProvider.d.ts

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

package/dist/base/BaseXYFlow.d.ts

@@ -1,6 +1,6 @@
 import { ReactFlowProps } from '@xyflow/react';
 import { SetRequired, Simplify } from 'type-fest';
-import { PaddingWithUnit } from '../LikeC4Diagram.props';
+import { ViewPadding } from '../LikeC4Diagram.props';
 import { XYBackground } from './Background';
 import { Base } from './types';
 export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Edge> = Simplify<{
@@ -9,7 +9,7 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     nodesSelectable?: boolean;
     nodesDraggable?: boolean;
     background?: 'transparent' | 'solid' | XYBackground;
-    fitViewPadding?: PaddingWithUnit | undefined;
+    fitViewPadding?: ViewPadding | undefined;
     onViewportResize?: undefined | (() => void);
 } & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
 export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { useCallbackRef } from '@mantine/hooks';
 import { ReactFlow, useStore } from '@xyflow/react';
-import { useMemo, Fragment } from 'react';
+import { Fragment } from 'react';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow.js';
 import { stopPropagation } from '../utils/xyflow.js';
@@ -82,12 +82,12 @@ const BaseXYFlow = ({
       maxZoom: zoomable ? MaxZoom : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView,
-      fitViewOptions: useMemo(() => ({
+      fitViewOptions: {
         minZoom: MinZoom,
         maxZoom: 1,
         padding: fitViewPadding,
         includeHiddenNodes: false
-      }), [fitViewPadding]),
+      },
       preventScrolling: zoomable || pannable,
       defaultMarkerColor: "var(--xy-edge-stroke)",
       noDragClassName: "nodrag",

package/dist/base/primitives/compound/CompoundActionButton.js

@@ -7,7 +7,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function CompoundActionButton({
   data: {

package/dist/base/primitives/compound/CompoundDetailsButton.js

@@ -7,7 +7,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconId from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 function CompoundDetailsButton({
   data: {

package/dist/base/primitives/edge/EdgeActionButton.js

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { ActionIcon } from '@mantine/core';
 import { stopPropagation } from '../../../utils/xyflow.js';
 import { actionBtn } from './edge.css.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(

package/dist/base/primitives/element/ElementDetailsButton.js

@@ -6,7 +6,7 @@ import { ActionIcon } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
-import IconId from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 const container = css({
   position: "absolute",

package/dist/base/primitives/element/ElementNodeContainer.d.ts

@@ -1,5 +1,5 @@
 import { Color, ElementShape, ElementStyle } from '@likec4/core/types';
-import { LayoutProps } from 'motion/react';
+import { MotionNodeLayoutOptions } from 'motion/react';
 import { CSSProperties, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { NodeProps } from '../../types';
 import { ShapeSize, SpacingSize, TextSize } from '@likec4/core';
@@ -14,7 +14,7 @@ export type ElementNodeContainerProps = {
     className?: string | undefined;
     style?: CSSProperties | undefined;
     [key: `data-${string}`]: string | undefined;
-} & LayoutProps;
+} & MotionNodeLayoutOptions;
 export declare function nodeSizes({ size, padding, textSize, }: ElementStyle): {
     size: ShapeSize;
     padding: SpacingSize;
@@ -30,4 +30,4 @@ export declare const ElementNodeContainer: ForwardRefExoticComponent<{
     children?: ReactNode | undefined;
     className?: string | undefined;
     style?: CSSProperties | undefined;
-} & LayoutProps & RefAttributes<HTMLDivElement>>;
+} & MotionNodeLayoutOptions & RefAttributes<HTMLDivElement>>;

package/dist/base/primitives/element/ElementTitle.js

@@ -1,24 +1,24 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
+import { elementNodeIcon, elementNodeData } from '@likec4/styles/recipes';
 import { Text } from '@mantine/core';
 import { isTruthy, isEmpty, isNumber } from 'remeda';
 import { IconRenderer } from '../../../context/IconRenderer.js';
 import { MarkdownBlock } from '../MarkdownBlock.js';
 import { nodeSizes } from './ElementNodeContainer.js';
-import { elementTitle, iconSize, elementIcon } from './ElementTitle.css.js';
 
-function ElementTitle({ id, data, iconSize: iconSize$1 }) {
-  const elementIcon$1 = IconRenderer({
+function ElementTitle({ id, data, iconSize }) {
+  const elementIcon = IconRenderer({
     element: {
       id,
       title: data.title,
       icon: data.icon
     },
-    className: elementIcon
+    className: elementNodeIcon()
   });
-  const classes = elementTitle({
-    hasIcon: isTruthy(elementIcon$1),
+  const classes = elementNodeData({
+    hasIcon: isTruthy(elementIcon),
     hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !isEmpty(data.technology ?? "")
   });
@@ -32,12 +32,12 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
         classes.root,
         "likec4-element"
       ),
-      style: isNumber(iconSize$1) ? {
+      style: isNumber(iconSize) ? {
         // @ts-ignore
-        [iconSize]: `${iconSize$1}px`
+        ["--likec4-icon-size"]: `${iconSize}px`
       } : void 0,
       children: [
-        elementIcon$1,
+        elementIcon,
         /* @__PURE__ */ jsxs(Box, { className: cx(classes.textContainer, "likec4-element-main-props"), children: [
           /* @__PURE__ */ jsx(
             Text,

package/dist/bundle/LikeC4View.js

@@ -11,7 +11,7 @@ import { Overlay } from '../overlays/overlay/Overlay.js';
 import { ShadowRoot } from './ShadowRoot.js';
 import { useColorScheme, useShadowRootStyle, cssInteractive } from './styles.css.js';
 import { ViewNotFound, ErrorMessage } from './ViewNotFound.js';
-import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function LikeC4View({
   viewId,
@@ -60,7 +60,7 @@ const LikeC4ViewInner = memo(({
   renderNodes,
   ...props
 }) => {
-  const likec4model = useLikeC4Model("layouted");
+  const likec4model = useLikeC4Model();
   const colorScheme = useColorScheme(explicitColorScheme);
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view);
   const [browserViewId, onNavigateTo] = useState(null);
@@ -149,7 +149,7 @@ const LikeC4ViewInner = memo(({
                 enableRelationshipDetails: true,
                 enableSearch: true,
                 enableElementTags: true,
-                controls: true,
+                controls: "next",
                 readonly: true,
                 fitView: true,
                 fitViewPadding: "32px",

package/dist/bundle/LikeC4View.props.d.ts

@@ -1,6 +1,6 @@
 import { WhereOperator } from '@likec4/core/types';
 import { CSSProperties } from 'react';
-import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props';
+import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from '../LikeC4Diagram.props';
 import type * as aux from '@likec4/core/types/_aux';
 export interface LikeC4ViewProps<A extends aux.Any> {
     /**
@@ -58,8 +58,10 @@ export interface LikeC4ViewProps<A extends aux.Any> {
     /**
      * Padding around the diagram
      * @default '8px'
+     *
+     * @see {@link ViewPadding}
      */
-    fitViewPadding?: PaddingWithUnit | undefined;
+    fitViewPadding?: ViewPadding | undefined;
     /**
      * Display diagram title / description
      *
@@ -151,9 +153,11 @@ export interface LikeC4BrowserProps {
     fitViewPadding?: PaddingWithUnit | undefined;
     /**
      * Show/hide panel with top left controls,
-     * @default true
+     * - `next` - show navigation panel (Experimental)
+     *
+     * @default `next`
      */
-    controls?: boolean | undefined;
+    controls?: boolean | 'next' | undefined;
     /**
      * Display diagram title / description
      *

package/dist/bundle/custom.js

@@ -25,6 +25,7 @@ export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
 export { useDiagramActorRef } from '../hooks/safeContext.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
+export { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 export { useSetState } from '../hooks/useSetState.js';

package/dist/bundle/index.js

@@ -8,6 +8,7 @@ export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
 export { useDiagramActorRef } from '../hooks/safeContext.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
+export { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 export { useSetState } from '../hooks/useSetState.js';

package/dist/components/ErrorFallback.d.ts

@@ -1,2 +1,3 @@
-import { FallbackProps } from 'react-error-boundary';
+import { ErrorBoundaryProps, FallbackProps } from 'react-error-boundary';
 export declare function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorBoundary(props: Pick<ErrorBoundaryProps, 'onReset' | 'onError' | 'children'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ErrorFallback.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Box } from '@likec4/styles/jsx';
 import { Notification, ScrollAreaAutosize, Code, Group, Button } from '@mantine/core';
-import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
+import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";
@@ -25,5 +26,17 @@ function ErrorFallback({ error, resetErrorBoundary }) {
     }
   ) });
 }
+function ErrorBoundary(props) {
+  return /* @__PURE__ */ jsx(
+    ErrorBoundary$1,
+    {
+      FallbackComponent: ErrorFallback,
+      onError: (err, info) => {
+        console.error(err, info);
+      },
+      ...props
+    }
+  );
+}
 
-export { ErrorFallback };
+export { ErrorBoundary, ErrorFallback };

package/dist/components/Link.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx, css, cva } from '@likec4/styles/css';
 import { CopyButton, Anchor, ActionIcon, Box, Text } from '@mantine/core';
 import { stopPropagation } from '../utils/xyflow.js';
-import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
+import IconCheck from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconCopy from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js';
 
 const link = cva({
   base: {

package/dist/components/NavigationLink.d.ts

@@ -0,0 +1,6 @@
+import { NavLinkProps } from '@mantine/core';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface NavigationLinkProps extends NavLinkProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof NavLinkProps> {
+    truncateLabel?: boolean;
+}
+export declare const NavigationLink: ForwardRefExoticComponent<NavigationLinkProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/NavigationLink.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { navigationLink } from '@likec4/styles/recipes';
+import { NavLink } from '@mantine/core';
+import { forwardRef } from 'react';
+
+const NavigationLink = forwardRef(({ className, truncateLabel = true, ...others }, ref) => /* @__PURE__ */ jsx(
+  NavLink,
+  {
+    ...others,
+    component: "button",
+    classNames: navigationLink({
+      truncateLabel
+    }),
+    className: cx(
+      "group",
+      "mantine-active",
+      className
+    ),
+    ref
+  }
+));
+NavigationLink.displayName = "NavigationLink";
+
+export { NavigationLink };

package/dist/components/SearchControl.js

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { UnstyledButton, Group, Text } from '@mantine/core';
 import { isMacOs } from '@xyflow/system';
 import { placeholder, shortcut, root } from './SearchControl.css.js';
-import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function SearchControl({ className, ...others }) {
   const isMac = isMacOs();

package/dist/context/ControlsCustomLayout.d.ts

@@ -4,7 +4,6 @@ export type ControlsCustomLayoutProps = {
     navigationButtons: ReactNode;
     search: ReactNode;
     actionsGroup: ReactNode;
-    syncInProgressBadge: ReactNode;
 };
 export type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode;
 export declare const ControlsCustomLayoutProvider: ({ children, value }: {

package/dist/context/DiagramFeatures.d.ts

@@ -2,8 +2,11 @@ import { ExclusiveUnion } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "ViewTitle", "FitView", "Vscode", "ElementTags"];
 export type FeatureName = typeof FeatureNames[number];
+type CustomFeatures = {
+    enableControls: 'next' | boolean;
+};
 export type EnabledFeatures = {
-    [P in `enable${FeatureName}`]: boolean;
+    [P in `enable${FeatureName}`]: P extends keyof CustomFeatures ? CustomFeatures[P] : boolean;
 };
 export declare const AllDisabled: EnabledFeatures;
 export declare function DiagramFeatures({ children, features, overrides, }: PropsWithChildren<ExclusiveUnion<{

package/dist/context/IconRenderer.js

@@ -1,12 +1,12 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { useContext, createContext } from 'react';
-import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
-import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
-import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
-import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
-import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
-import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
+import IconCylinder from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js';
+import IconRectangularPrism from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js';
+import IconReorder from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js';
+import IconUser from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js';
+import IconDeviceMobile from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js';
+import IconBrowser from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js';
 
 const IconRendererContext = createContext(null);
 function IconRendererProvider({

package/dist/custom/customNodes.js

@@ -1,10 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
-import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+import { DEV } from 'esm-env';
+import { useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
 import { customNode } from '../base/primitives/customNode.js';
 
 function customDiagramNode(Node) {
   return customNode((props) => {
-    const viewModel = useLikeC4Model().view(props.data.viewId);
+    const viewModel = useLikeC4ViewModel(props.data.viewId);
+    if (!viewModel) {
+      if (DEV) {
+        throw new Error(`View "${props.data.viewId}" not found, requested by customNode "${props.id}"`);
+      }
+      console.error(`View "${props.data.viewId}" not found in likec4model`, { props });
+      return null;
+    }
     const model = viewModel.node(props.id);
     return /* @__PURE__ */ jsx(Node, { nodeProps: props, nodeModel: model });
   });

package/dist/custom/hooks.d.ts

@@ -4,6 +4,7 @@ export { type EnabledFeatures, type FeatureName, useEnabledFeatures, } from '../
 export { useCurrentViewId, } from '../hooks/useCurrentViewId';
 export { type DiagramApi, useDiagram, useDiagramActorRef, useDiagramContext, } from '../hooks/useDiagram';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi, type XYFlowInstance, type XYStoreApi, } from '../hooks/useXYFlow';
+export { useCurrentViewModel, } from '../likec4model/useCurrentViewModel';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../likec4model/useLikeC4Model';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps';
 export { useSetState } from '../hooks/useSetState';

package/dist/custom/index.js

@@ -25,6 +25,7 @@ export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
 export { useDiagramActorRef } from '../hooks/safeContext.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
+export { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 export { useSetState } from '../hooks/useSetState.js';

package/dist/hooks/useDiagram.d.ts

@@ -5,7 +5,7 @@ import { FeatureName } from '../context/DiagramFeatures';
 import { OpenSourceParams } from '../LikeC4Diagram.props';
 import { Types } from '../likec4diagram/types';
 import { AlignmentMode } from '../state/aligners';
-import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext, SyncLayoutActorSnapshot } from '../state/types';
+import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext } from '../state/types';
 import { useDiagramActorRef } from './safeContext';
 export { useDiagramActorRef };
 export interface DiagramApi {
@@ -95,7 +95,6 @@ export interface DiagramApi {
  */
 export declare function useDiagram(): DiagramApi;
 export declare function useDiagramActorSnapshot<T = unknown>(selector: (state: DiagramActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
-export declare function useDiagramSyncLayoutState<T = unknown>(selector: (state: SyncLayoutActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 /**
  * Read diagram context
  */

package/dist/hooks/useDiagram.js

@@ -122,14 +122,10 @@ function useDiagramActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
   return useSelector(actorRef, useCallbackRef(selector), compare);
 }
-function useDiagramSyncLayoutState(selector, compare = shallowEqual) {
-  const syncLayoutActorRef = useDiagramActorSnapshot((s) => s.context.syncLayoutActorRef);
-  return useSelector(syncLayoutActorRef, useCallbackRef(selector), compare);
-}
 function useDiagramContext(selector, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef();
   const select = useCallback((s) => selector(s.context), deps ?? []);
   return useSelector(actorRef, select, compare);
 }
 
-export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useDiagramSyncLayoutState };
+export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext };

package/dist/index.js

@@ -10,6 +10,7 @@ export { useCurrentViewId } from './hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext } from './hooks/useDiagram.js';
 export { useDiagramActorRef } from './hooks/safeContext.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './hooks/useXYFlow.js';
+export { useCurrentViewModel } from './likec4model/useCurrentViewModel.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './likec4model/useLikeC4Model.js';
 export { useMantinePortalProps } from './hooks/useMantinePortalProps.js';
 export { useSetState } from './hooks/useSetState.js';

package/dist/likec4diagram/DiagramUI.js

@@ -5,13 +5,15 @@ import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { Search } from '../search/Search.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
+import { NavigationPanel } from '../navigationpanel/NavigationPanel.js';
 import { Controls } from './ui/controls/Controls.js';
-import { DiagramTitlePanel } from './ui/diagram-title/DiagramTitlePanel.js';
 import { NotationPanel } from './ui/notation/NotationPanel.js';
+import { DiagramTitlePanel } from './ui/diagram-title/DiagramTitlePanel.js';
 import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough.js';
 
 const DiagramUI = memo(() => {
   const {
+    enableControls,
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough,
@@ -20,11 +22,13 @@ const DiagramUI = memo(() => {
   const overlaysActorRef = useOverlaysActorRef();
   const searchActorRef = useSearchActorRef();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Controls, {}),
+    enableControls === "next" ? /* @__PURE__ */ jsx(NavigationPanel, {}) : /* @__PURE__ */ jsx(Controls, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
-    enableViewTitle && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
-    enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    enableControls !== "next" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      enableViewTitle && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
+      enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {})
+    ] }),
     enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef })
   ] });
 });

package/dist/likec4diagram/DiagramXYFlow.js

@@ -30,7 +30,7 @@ const selectXYProps = (ctx) => ({
     }
   }
 });
-const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
+const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.fitViewPadding, b.fitViewPadding) && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
 function LikeC4DiagramXYFlow({
   background = "dots",
   nodesDraggable = false,