@likec4/diagram 1.34.2 → 1.36.0

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,
@@ -31,6 +31,12 @@ function LikeC4View({
   }
   return /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props });
 }
+const DEFAULT_BROWSER_PADDING = {
+  top: "50px",
+  bottom: "16px",
+  left: "16px",
+  right: "16px"
+};
 const LikeC4ViewInner = memo(({
   view,
   className,
@@ -60,7 +66,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,10 +155,10 @@ const LikeC4ViewInner = memo(({
                 enableRelationshipDetails: true,
                 enableSearch: true,
                 enableElementTags: true,
-                controls: true,
+                controls: "next",
                 readonly: true,
                 fitView: true,
-                fitViewPadding: "32px",
+                fitViewPadding: DEFAULT_BROWSER_PADDING,
                 ...props,
                 ...browserProps,
                 showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.nodes.length ?? 0) > 0,

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

@@ -1,7 +1,6 @@
-import { WhereOperator } from '@likec4/core/types';
+import { aux, WhereOperator } from '@likec4/core/types';
 import { CSSProperties } from 'react';
-import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props';
-import type * as aux from '@likec4/core/types/_aux';
+import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from '../LikeC4Diagram.props';
 export interface LikeC4ViewProps<A extends aux.Any> {
     /**
      * View to display.
@@ -58,8 +57,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 +152,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/ReactLikeC4.d.ts

@@ -1,6 +1,6 @@
+import { aux } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { LikeC4DiagramProps } from '../LikeC4Diagram';
-import type * as aux from '@likec4/core/types/_aux';
 export type ReactLikeC4Props<A extends aux.Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
     viewId: aux.ViewId<A>;
     /**

package/dist/bundle/ViewNotFound.js

@@ -4,7 +4,7 @@ const ErrorMessage = ({ children }) => /* @__PURE__ */ jsx(
   "div",
   {
     style: {
-      margin: "1rem 0"
+      margin: "[1rem 0]"
     },
     children: /* @__PURE__ */ jsx(
       "div",

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.d.ts

@@ -2,6 +2,7 @@ export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRend
 export { LikeC4View } from './LikeC4View';
 export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View.props';
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
-export { LikeC4ModelProvider } from './LikeC4ModelProvider';
+export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps } from '../LikeC4ProjectsProvider';
+export { LikeC4ModelProvider, type LikeC4ModelProviderProps } from './LikeC4ModelProvider';
 export { ViewNotFound } from './ViewNotFound';
 export * from '../custom/hooks';

package/dist/bundle/index.js

@@ -1,5 +1,6 @@
 export { LikeC4View } from './LikeC4View.js';
 export { ReactLikeC4 } from './ReactLikeC4.js';
+export { LikeC4ProjectsProvider } from '../LikeC4ProjectsProvider.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
 export { ViewNotFound } from './ViewNotFound.js';
 export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
@@ -8,6 +9,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/styles.css.js

@@ -12,7 +12,7 @@ const DefaultTheme = createTheme({
   primaryColor: "indigo",
   cursorType: "pointer",
   defaultRadius: "sm",
-  fontFamily: "var(--fonts-likec4)",
+  fontFamily: "var(--likec4-app-font, var(--likec4-app-font-default))",
   headings: {
     fontWeight: "500",
     sizes: {

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,11 +1,12 @@
 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";
-  return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: 0, left: 0, w: "100%", p: 0, style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: "0", left: "0", w: "100%", p: "0", style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
     Notification,
     {
       icon: /* @__PURE__ */ jsx(IconX, { style: { width: 16, height: 16 } }),
@@ -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/GithubIcon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps, ForwardRefExoticComponent, RefAttributes } from 'react';
+export declare const GithubIcon: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>;

package/dist/components/GithubIcon.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const GithubIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    height: "24",
+    width: "24",
+    fill: "currentColor",
+    ...props,
+    viewBox: "0 0 24 24",
+    ref,
+    children: /* @__PURE__ */ jsx("path", { d: "M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z" })
+  }
+));
+
+export { GithubIcon };

package/dist/components/Link.d.ts

@@ -1,5 +1,6 @@
 import { Link as LinkData } from '@likec4/core';
-export declare function Link({ value, size, }: {
-    size?: 'sm' | 'md';
+import { BadgeProps } from '@mantine/core';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export declare const Link: ForwardRefExoticComponent<Omit<BadgeProps, "children" | "classNames"> & {
     value: LinkData;
-}): import("react/jsx-runtime").JSX.Element;
+} & RefAttributes<HTMLDivElement>>;

package/dist/components/Link.js

@@ -1,108 +1,105 @@
-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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { css, cx } from '@likec4/styles/css';
+import { Badge, CopyButton, ActionIcon } from '@mantine/core';
+import { forwardRef } from 'react';
+import { GithubIcon } from './GithubIcon.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: {
-    display: "flex",
-    overflow: "hidden",
-    alignItems: "center",
-    gap: "micro",
-    justifyContent: "stretch",
-    transitionProperty: "all",
-    transitionDuration: "fast",
-    transitionTimingFunction: "inOut",
-    border: `1px dashed {colors.mantine.colors.defaultBorder}`,
-    rounded: "sm",
-    cursor: "pointer",
-    color: "mantine.colors.gray[7]",
-    _dark: {
-      color: "mantine.colors.dark[1]"
-    },
-    _hover: {
-      transitionTimingFunction: "out",
-      color: "mantine.colors.defaultColor",
-      background: "mantine.colors.defaultHover"
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        minHeight: "22px",
-        padding: "2px 8px 2px 2px"
-      },
-      md: {
-        minHeight: "30px",
-        padding: "3px 16px 3px 3px"
-      }
-    }
-  }
-});
-const titleBox = css({
-  flex: "1 1 100%",
-  transition: `transform 100ms {easings.inOut}`,
-  _groupHover: {
-    transitionTimingFunction: "out",
-    transitionDelay: "50ms",
-    transform: "translateX(1px)"
-  }
-});
-function Link({
-  value,
-  size = "md"
-}) {
-  const isNormalSize = size === "md";
-  const url = value.url.includes("://") ? value.url : new window.URL(value.url, window.location.href).toString();
-  return /* @__PURE__ */ jsx(CopyButton, { value: url, children: ({ copied, copy }) => /* @__PURE__ */ jsxs(
-    Anchor,
-    {
-      href: url,
-      target: "_blank",
-      underline: "never",
-      className: cx(
-        "group",
-        link({ size })
-      ),
-      onClick: stopPropagation,
-      children: [
-        /* @__PURE__ */ jsx(
+const GITHUB_PREFIX = "https://github.com/";
+const Link = forwardRef(
+  ({ value, className, ...props }, ref) => {
+    const url = value.url.includes("://") ? value.url : new window.URL(value.url, window.location.href).toString();
+    let isGithub = url.startsWith(GITHUB_PREFIX);
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        ref,
+        variant: "default",
+        radius: "sm",
+        size: "sm",
+        tt: "none",
+        leftSection: value.title ? /* @__PURE__ */ jsx(Fragment, { children: value.title }) : null,
+        rightSection: /* @__PURE__ */ jsx(CopyButton, { value: url, timeout: 1500, children: ({ copy, copied }) => /* @__PURE__ */ jsx(
           ActionIcon,
           {
             className: css({
-              flex: "0"
+              opacity: copied ? 1 : 0.45,
+              transition: "fast",
+              _hover: {
+                opacity: 1
+              }
             }),
             tabIndex: -1,
-            size: isNormalSize ? 24 : 20,
-            variant: copied ? "light" : "subtle",
+            size: "20",
+            variant: copied ? "light" : "transparent",
             color: copied ? "teal" : "gray",
+            "data-active": copied,
             onClick: (e) => {
               e.stopPropagation();
               e.preventDefault();
               copy();
             },
-            children: copied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, { style: { width: "65%", opacity: 0.65 } })
+            children: copied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, { stroke: 2.5 })
           }
-        ),
-        /* @__PURE__ */ jsxs(Box, { className: titleBox, children: [
-          /* @__PURE__ */ jsx(
-            Text,
+        ) }),
+        ...props,
+        className: cx(className, "group"),
+        classNames: {
+          root: css({
+            flexWrap: "nowrap",
+            minHeight: 24,
+            maxWidth: 500,
+            userSelect: "all",
+            pr: "0",
+            _hover: {
+              backgroundColor: {
+                base: "mantine.colors.gray[1]",
+                _dark: "mantine.colors.dark[5]"
+              }
+            }
+          }),
+          section: css({
+            '&:is([data-position="left"])': {
+              color: "mantine.colors.dimmed",
+              userSelect: "none",
+              pointerEvents: "none",
+              _groupHover: {
+                color: "[inherit]",
+                opacity: 0.7
+              }
+            }
+          }),
+          label: css({
+            "& > a": {
+              color: "[inherit]",
+              cursor: "pointer",
+              transition: "fast",
+              opacity: {
+                base: 0.7,
+                _hover: 1
+              },
+              textDecoration: {
+                base: "none",
+                _hover: "underline"
+              }
+            }
+          })
+        },
+        children: /* @__PURE__ */ jsxs("a", { href: url, target: "_blank", children: [
+          isGithub && /* @__PURE__ */ jsx(
+            GithubIcon,
             {
-              component: "div",
-              fz: isNormalSize ? "xs" : 11,
-              truncate: true,
-              lh: isNormalSize ? 1.3 : 1.2,
-              fw: value.title ? 500 : 400,
-              children: value.title || url
+              height: "12",
+              width: "12",
+              style: { verticalAlign: "middle", marginRight: "4px" }
             }
           ),
-          value.title && /* @__PURE__ */ jsx(Text, { component: "div", fz: isNormalSize ? 10 : 9, c: "dimmed", lh: isNormalSize ? 1.2 : 1.1, truncate: true, children: url })
+          isGithub ? url.replace(GITHUB_PREFIX, "") : url
         ] })
-      ]
-    }
-  ) });
-}
+      }
+    );
+  }
+);
 
 export { Link };

package/dist/components/NavigationLink.d.ts

@@ -0,0 +1,6 @@
+import { NavLinkProps } from '@mantine/core';
+import { ComponentPropsWithoutRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface NavigationLinkProps extends Omit<NavLinkProps, 'classNames'>, Omit<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.css.js

@@ -3,7 +3,7 @@ import { css } from '@likec4/styles/css';
 const root = css({
   height: "30px",
   paddingLeft: "sm",
-  paddingRight: "4px",
+  paddingRight: "1",
   borderRadius: "sm",
   // TODO
   // color: fallbackVar('var(--search-color)', 'mantine.colors.placeholder)',
@@ -39,21 +39,22 @@ const placeholder = css({
   fontSize: "sm",
   // mantine.fontSizes.sm,
   fontWeight: 500,
-  paddingRight: "10px",
+  paddingRight: "2.5",
+  // 10px
   color: "mantine.colors.placeholder",
   flex: "1",
   sm: {
-    paddingRight: "30px"
+    paddingRight: "[30px]"
   },
   md: {
-    paddingRight: "50px"
+    paddingRight: "[50px]"
   }
 });
 const shortcut = css({
   fontSize: "11px",
   fontWeight: 600,
   lineHeight: 1,
-  padding: "4px 7px",
+  padding: "[4px 7px]",
   borderRadius: "sm",
   border: "1px solid",
   transition: "fast",

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/DiagramEventHandlers.d.ts

@@ -1,15 +1,15 @@
-import { Any } from '@likec4/core/types';
+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 DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers<Any>> & {
-    handlersRef: RefObject<LikeC4DiagramEventHandlers<Any>>;
+export type DiagramEventHandlersContext = RequiredOrNull<LikeC4DiagramEventHandlers<aux.Any>> & {
+    handlersRef: RefObject<LikeC4DiagramEventHandlers<aux.Any>>;
 };
-export declare function DiagramEventHandlers<A extends Any>({ handlers, children, }: PropsWithChildren<{
+export declare function DiagramEventHandlers<A extends aux.Any>({ handlers, children, }: PropsWithChildren<{
     handlers: LikeC4DiagramEventHandlers<A>;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function useDiagramEventHandlers(): DiagramEventHandlersContextValue;
-export declare function useDiagramEventHandlersRef(): RefObject<LikeC4DiagramEventHandlers<Any>>;
+export declare function useDiagramEventHandlers(): DiagramEventHandlersContext;
+export declare function useDiagramEventHandlersRef<A extends aux.Any = aux.Any>(): RefObject<LikeC4DiagramEventHandlers<A>>;
 export {};

package/dist/context/DiagramEventHandlers.js

@@ -16,7 +16,7 @@ const HandlerNames = [
   "onChange",
   "onCanvasDblClick"
 ];
-const DiagramEventHandlersContext = createContext({
+const DiagramEventHandlersReactContext = createContext({
   ...mapToObj(HandlerNames, (name) => [name, null]),
   handlersRef: {
     current: {}
@@ -37,13 +37,10 @@ function DiagramEventHandlers({
     }),
     handlersRef
   }), [handlersRef, ...deps]);
-  return /* @__PURE__ */ jsx(DiagramEventHandlersContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(DiagramEventHandlersReactContext.Provider, { value, children });
 }
 function useDiagramEventHandlers() {
-  return useContext(DiagramEventHandlersContext);
-}
-function useDiagramEventHandlersRef() {
-  return useContext(DiagramEventHandlersContext).handlersRef;
+  return useContext(DiagramEventHandlersReactContext);
 }
 
-export { DiagramEventHandlers, useDiagramEventHandlers, useDiagramEventHandlersRef };
+export { DiagramEventHandlers, useDiagramEventHandlers };

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';