@likec4/diagram 1.30.0 → 1.32.0

package/dist/context/DiagramFeatures.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../_virtual/index.js';
-import { mapToObj, pick, map } from 'remeda';
+import { useContext, createContext, useState, useEffect } from 'react';
+import { mapToObj } from 'remeda';
 
 const FeatureNames = [
   "Controls",
@@ -18,47 +18,28 @@ const FeatureNames = [
   "EdgeEditing",
   "ViewTitle",
   "FitView",
-  /**
-   * LikeC4Model is available in context
-   */
-  "LikeC4Model",
   /**
    * Running in VSCode
    */
-  "Vscode"
+  "Vscode",
+  "ElementTags"
 ];
 const AllDisabled = mapToObj(
   FeatureNames,
   (name) => [`enable${name}`, false]
 );
-const DiagramFeaturesContext = reactExports.createContext(AllDisabled);
+const DiagramFeaturesContext = createContext(AllDisabled);
 const validate = (features) => {
   let {
     enableReadOnly,
-    enableLikeC4Model,
-    enableElementDetails,
-    enableRelationshipDetails,
-    enableRelationshipBrowser,
-    enableSearch,
     enableEdgeEditing,
     ...rest
   } = features;
-  if (!enableLikeC4Model) {
-    enableElementDetails = false;
-    enableRelationshipDetails = false;
-    enableRelationshipBrowser = false;
-    enableSearch = false;
-  }
   if (enableReadOnly) {
     enableEdgeEditing = false;
   }
   return {
     enableReadOnly,
-    enableLikeC4Model,
-    enableElementDetails,
-    enableRelationshipDetails,
-    enableRelationshipBrowser,
-    enableSearch,
     enableEdgeEditing,
     ...rest
   };
@@ -68,9 +49,9 @@ function DiagramFeatures({
   features,
   overrides
 }) {
-  const outerScope = reactExports.useContext(DiagramFeaturesContext);
-  const [scope, setScope] = reactExports.useState(outerScope);
-  reactExports.useEffect(
+  const outerScope = useContext(DiagramFeaturesContext);
+  const [scope, setScope] = useState(outerScope);
+  useEffect(
     () => {
       setScope((current) => {
         const next = validate({
@@ -98,26 +79,16 @@ DiagramFeatures.Overlays = ({ children }) => {
     }
   );
 };
-function useEnabledFeature(...names) {
-  return pick(reactExports.useContext(DiagramFeaturesContext), map(names, (name) => `enable${name}`));
-}
 function useEnabledFeatures() {
-  return reactExports.useContext(DiagramFeaturesContext);
+  return useContext(DiagramFeaturesContext);
 }
 function IfEnabled({
   feature,
   children,
   and = true
 }) {
-  const enabled = useEnabledFeature(feature)[`enable${feature}`] === true;
+  const enabled = useEnabledFeatures()[`enable${feature}`] === true;
   return enabled && and ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
-function IfNotEnabled({
-  feature,
-  children
-}) {
-  const notEnabled = useEnabledFeature(feature)[`enable${feature}`] !== true;
-  return notEnabled ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
-}
 
-export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeature, useEnabledFeatures };
+export { AllDisabled, DiagramFeatures, IfEnabled, useEnabledFeatures };

package/dist/context/EnsureMantine.js

@@ -1,11 +1,16 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { MantineContext } from '@mantine/core';
-import { r as reactExports } from '../_virtual/index.js';
+import { MantineContext, MantineProvider } from '@mantine/core';
+import { useContext, useEffect } from 'react';
 
 function EnsureMantine({ children }) {
-  const mantineCtx = reactExports.useContext(MantineContext);
+  const mantineCtx = useContext(MantineContext);
+  useEffect(() => {
+    if (!mantineCtx) {
+      console.warn("LikeC4Diagram must be a child of MantineProvider");
+    }
+  }, []);
   if (!mantineCtx) {
-    throw new Error("LikeC4Diagram must be a child of MantineProvider");
+    return /* @__PURE__ */ jsx(MantineProvider, { defaultColorScheme: "auto", children });
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }

package/dist/context/FramerMotionConfig.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMantineStyleNonce } from '@mantine/core';
 import { LazyMotion, domMax, MotionConfig } from 'motion/react';
-import '../_virtual/index.js';
 
 const FramerMotionConfig = ({
   reducedMotion = "user",

package/dist/context/IconRenderer.js

@@ -1,14 +1,14 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { IconCylinder, IconRectangularPrism, IconReorder, IconUser, IconDeviceMobile, IconBrowser } from '@tabler/icons-react';
-import clsx from 'clsx';
-import { r as reactExports } from '../_virtual/index.js';
+import { useContext, createContext } from 'react';
 
-const IconRendererContext = reactExports.createContext(null);
+const IconRendererContext = createContext(null);
 function IconRendererProvider({
   value,
   children
 }) {
-  const outerScope = reactExports.useContext(IconRendererContext);
+  const outerScope = useContext(IconRendererContext);
   if (outerScope) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
@@ -18,7 +18,7 @@ function IconRenderer({
   element,
   className
 }) {
-  const RenderIcon = reactExports.useContext(IconRendererContext);
+  const RenderIcon = useContext(IconRendererContext);
   if (!element || !element.icon || element.icon === "none") {
     return null;
   }
@@ -34,7 +34,7 @@ function IconRenderer({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(
+      className: cx(
         className,
         "likec4-element-icon"
       ),
@@ -56,10 +56,7 @@ function IconOrShapeRenderer({
   element,
   className
 }) {
-  const icon = IconRenderer({
-    element,
-    className
-  });
+  const icon = /* @__PURE__ */ jsx(IconRenderer, { element, className });
   if (icon) {
     return icon;
   }
@@ -67,7 +64,7 @@ function IconOrShapeRenderer({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(
+      className: cx(
         className,
         "likec4-shape-icon"
       ),

package/dist/context/ReduceGraphics.js

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { createSafeContext, createOptionalContext } from '@mantine/core';
+import { createSafeContext } from '@mantine/core';
 import { useStore } from '@nanostores/react';
 import { atom } from 'nanostores';
-import { r as reactExports } from '../_virtual/index.js';
+import { useRef, createContext, useContext } from 'react';
 
-const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext();
+const ReduceGraphicsModeCtx = createContext(null);
 function useIsReducedGraphics() {
-  const isReduced = useReducedGraphics();
+  const isReduced = useContext(ReduceGraphicsModeCtx);
   if (isReduced === null) {
     console.warn("ReduceGraphicsMode is not provided");
   }
@@ -16,11 +16,11 @@ const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
   "PanningAtomSafeCtx is not provided"
 );
 function ReduceGraphicsContext({ reduceGraphics, children }) {
-  const $isPanningRef = reactExports.useRef(null);
+  const $isPanningRef = useRef(null);
   if (!$isPanningRef.current) {
     $isPanningRef.current = atom(reduceGraphics);
   }
-  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx, { value: reduceGraphics, children }) });
+  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children }) });
 }
 function useIsPanning() {
   return useStore(usePanningAtom());

package/dist/context/RootContainer.js

@@ -1,18 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
-import { r as reactExports } from '../_virtual/index.js';
+import { useId } from '@mantine/hooks';
+import { useRef, useEffect, createContext, useContext, createRef } from 'react';
 import { usePanningAtom } from './ReduceGraphics.js';
+import { TagStylesProvider } from './TagStylesContext.js';
 
-const RootContainerContext = reactExports.createContext(reactExports.createRef());
+const RootContainerContext = createContext(createRef());
 function RootContainer({
   className,
   reduceGraphics = false,
   children
 }) {
-  const ref = reactExports.useRef(null);
+  const id = useId();
+  const ref = useRef(null);
   const $isPanning = usePanningAtom();
-  reactExports.useEffect(() => {
+  useEffect(() => {
     return $isPanning.listen((isPanning) => {
       if (isPanning) {
         ref.current?.setAttribute("data-likec4-diagram-panning", "true");
@@ -24,17 +27,18 @@ function RootContainer({
   return /* @__PURE__ */ jsx(
     Box,
     {
+      id,
       className: cx("likec4-root", className),
       ref,
       ...reduceGraphics && {
         ["data-likec4-reduced-graphics"]: true
       },
-      children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children })
+      children: /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children }) })
     }
   );
 }
 function useRootContainer() {
-  return reactExports.useContext(RootContainerContext).current;
+  return useContext(RootContainerContext).current;
 }
 
 export { RootContainer, useRootContainer };

package/dist/context/TagStylesContext.d.ts

@@ -0,0 +1,7 @@
+import { TagSpecification } from '@likec4/core';
+import { PropsWithChildren } from 'react';
+export declare function TagStylesProvider({ children, rootSelector }: PropsWithChildren<{
+    rootSelector: string;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function useTagSpecifications(): Record<string, TagSpecification>;
+export declare function useTagSpecification(tag: string): TagSpecification;

package/dist/context/TagStylesContext.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isTagColorSpecified } from '@likec4/core';
+import { useMantineStyleNonce } from '@mantine/core';
+import { useDeepCompareMemo } from '@react-hookz/web';
+import { createContext, useContext } from 'react';
+import { pipe, entries, flatMap, join } from 'remeda';
+import { useLikeC4Specification } from '../likec4model/useLikeC4Model.js';
+
+const TagStylesContext = createContext({});
+const radixColors = [
+  "yellow",
+  "orange",
+  "amber",
+  "tomato",
+  "red",
+  "ruby",
+  "crimson",
+  "pink",
+  "pink",
+  "purple",
+  "violet",
+  "indigo",
+  "blue",
+  "teal",
+  "grass",
+  "lime"
+];
+const generateColorVars = (spec) => {
+  const color = spec.color;
+  if (isTagColorSpecified(spec)) {
+    return `
+      --colors-likec4-tag-bg: ${color};
+      --colors-likec4-tag-bg-hover: color-mix(in srgb, ${color}, var(--colors-likec4-mix-color) 20%);
+    `;
+  }
+  if (!radixColors.includes(color)) {
+    return "";
+  }
+  let textcolor = "12";
+  if (["mint", "grass", "lime", "yellow", "amber"].includes(color)) {
+    textcolor = "dark-2";
+  }
+  return `
+  --colors-likec4-tag-border: var(--colors-${color}-8);
+  --colors-likec4-tag-bg: var(--colors-${color}-9);
+  --colors-likec4-tag-bg-hover: var(--colors-${color}-10);
+  --colors-likec4-tag-text: var(--colors-${color}-${textcolor});
+  `;
+};
+function TagStylesProvider({ children, rootSelector }) {
+  const tags = useLikeC4Specification().tags;
+  const { specs, stylesheet } = useDeepCompareMemo(() => {
+    if (!tags) {
+      return { specs: {}, stylesheet: "" };
+    }
+    return {
+      specs: tags,
+      stylesheet: pipe(
+        entries(tags),
+        flatMap(([tag, spec]) => [
+          `:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
+          generateColorVars(spec),
+          "}"
+        ]),
+        join("\n")
+      )
+    };
+  }, [tags, rootSelector]);
+  return /* @__PURE__ */ jsxs(TagStylesContext.Provider, { value: specs, children: [
+    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { stylesheet }),
+    children
+  ] });
+}
+function TagStylesheet({ stylesheet }) {
+  const nonce = useMantineStyleNonce()?.();
+  return /* @__PURE__ */ jsx("style", { "data-likec4-tag-stylesheet": true, type: "text/css", dangerouslySetInnerHTML: { __html: stylesheet }, nonce });
+}
+function useTagSpecification(tag) {
+  const specs = useContext(TagStylesContext);
+  return specs[tag] ?? {
+    color: "tomato"
+  };
+}
+
+export { TagStylesProvider, useTagSpecification };

package/dist/context/index.d.ts

@@ -1,5 +1,5 @@
 export { DiagramEventHandlers, useDiagramEventHandlers } from './DiagramEventHandlers';
-export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeature, useEnabledFeatures, } from './DiagramFeatures';
+export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeatures, } from './DiagramFeatures';
 export type { EnabledFeatures } from './DiagramFeatures';
 export { EnsureMantine } from './EnsureMantine';
 export { FramerMotionConfig } from './FramerMotionConfig';

package/dist/custom/components.d.ts

@@ -0,0 +1,5 @@
+export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementDetailsButton, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementTitle, } from '../base/primitives';
+export { IconOrShapeRenderer, IconRenderer, IconRendererProvider, } from '../context/IconRenderer';
+export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, Toolbar, ViewGroupNode, } from '../likec4diagram/custom/nodes';
+export { IfEnabled, IfNotEnabled, IfNotReadOnly, } from '../context/DiagramFeatures';
+export { Overlay, type OverlayProps, } from '../overlays/overlay/Overlay';

package/dist/custom/customNodes.d.ts

@@ -0,0 +1,228 @@
+import { NodeModel } from '@likec4/core/model';
+import { Any } from '@likec4/core/types';
+import { ReactNode } from 'react';
+import { NodeProps } from '../base/types';
+import { Types } from '../likec4diagram/types';
+export type CustomElementNodeProps<M extends Any = Any> = {
+    nodeProps: NodeProps<Types.ElementNodeData, 'element'>;
+    nodeModel: NodeModel.WithElement<M>;
+};
+/**
+ * Node that will be used to render the element from the model.
+ * It is a leaf node, i.e. it does not have children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
+ *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   elementNode,
+ *   ElementNodeContainer,
+ *   ElementShape,
+ *   ElementTitle,
+ *   ElementActions,
+ *   ElementDetailsButtonWithHandler,
+ *   IfNotReadOnly,
+ *   ElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
+ *   <ElementNodeContainer nodeProps={nodeProps}>
+ *     <ElementShape {...nodeProps} />
+ *     <ElementTitle {...nodeProps} />
+ *     <ElementActions
+ *       {...nodeProps}
+ *       extraButtons={[
+ *         {
+ *           key: 'plus',
+ *           icon: <IconPlus />,
+ *           onClick: () => console.log('extra'),
+ *         },
+ *       ]}
+ *     />
+ *     <ElementDetailsButtonWithHandler {...nodeProps} />
+ *     {nodeModel.element.getMetadata('your-attr') === 'value' && <YourComponent />}
+ *     <IfNotReadOnly>
+ *       <ElementToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </ElementNodeContainer>
+ * ))
+ * ```
+ */
+export declare const elementNode: (Node: (props: CustomElementNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.ElementNodeData, "element">) => ReactNode;
+export type CustomDeploymentNodeProps<M extends Any = Any> = {
+    nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>;
+    nodeModel: NodeModel.WithDeploymentElement<M>;
+};
+/**
+ * Node that will be used to render the element from deployment model.
+ * It is a leaf node, i.e. it does not have children.
+ * Can be {@link DeploymentNodeModel} or {@link DeployedInstanceModel}.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: {@link NodeModel.WithDeploymentElement}
+ *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   deploymentNode,
+ *   ElementNodeContainer,
+ *   ElementShape,
+ *   ElementTitle,
+ *   DeploymentElementActions,
+ *   ElementDetailsButtonWithHandler,
+ *   IfNotReadOnly,
+ *   DeploymentElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomDeploymentNode = deploymentNode(({ nodeProps, nodeModel }) => (
+ *   <ElementNodeContainer nodeProps={nodeProps}>
+ *     <ElementShape {...nodeProps} />
+ *     <ElementTitle {...nodeProps} />
+ *     <DeploymentElementActions
+ *       {...nodeProps}
+ *       extraButtons={[
+ *         {
+ *           key: 'plus',
+ *           icon: <IconPlus />,
+ *           onClick: () => console.log('extra'),
+ *         },
+ *       ]}
+ *     />
+ *     <ElementDetailsButtonWithHandler {...nodeProps} />
+ *     <IfNotReadOnly>
+ *       <DeploymentElementToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </ElementNodeContainer>
+ * ))
+ * ```
+ */
+export declare const deploymentNode: (Node: (props: CustomDeploymentNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => ReactNode;
+export type CustomCompoundElementNodeProps<M extends Any = Any> = {
+    nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>;
+    nodeModel: NodeModel.WithElement<M>;
+};
+/**
+ * Node that will be used to render the compound element from the model.
+ * It is a container node, i.e. it has children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
+ *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   compoundElementNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   CompoundActions,
+ *   CompoundDetailsButtonWithHandler,
+ *   IfEnabled,
+ *   CompoundElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomCompoundElementNode = compoundElementNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={props}>
+ *     <CompoundTitle {...props} />
+ *     <CompoundActions {...props} />
+ *     <IfEnabled feature="ElementDetails">
+ *       <CompoundDetailsButtonWithHandler {...props} />
+ *     </IfEnabled>
+ *     <IfNotReadOnly>
+ *       <CompoundElementToolbar {...props} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ))
+ * ```
+ */
+export declare const compoundElementNode: (Node: (props: CustomCompoundElementNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.CompoundElementNodeData, "compound-element">) => ReactNode;
+export type CustomCompoundDeploymentNodeProps<M extends Any = Any> = {
+    nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>;
+    nodeModel: NodeModel.WithDeploymentElement<M>;
+};
+/**
+ * Node that will be used to render the compound from the deployment model.
+ * It is a container node, i.e. it has children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithDeploymentElement}
+ *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   compoundDeploymentNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   CompoundActions,
+ *   CompoundDeploymentToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomCompoundDeploymentNode = compoundDeploymentNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={nodeProps}>
+ *     <CompoundTitle {...nodeProps} />
+ *     <CompoundActions {...nodeProps} />
+ *     <IfNotReadOnly>
+ *       <CompoundDeploymentToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ```
+ */
+export declare const compoundDeploymentNode: (Node: (props: CustomCompoundDeploymentNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.CompoundDeploymentNodeData, "compound-deployment">) => ReactNode;
+export type CustomViewGroupNodeProps<M extends Any = Any> = {
+    nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>;
+    nodeModel: NodeModel.IsGroup<M>;
+};
+/**
+ * Node that will be used to render the view group from the model.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.IsGroup}
+ *
+ * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   viewGroupNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomViewGroupNode = viewGroupNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={nodeProps}>
+ *     <CompoundTitle {...nodeProps} />
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ```
+ */
+export declare const viewGroupNode: (Node: (props: CustomViewGroupNodeProps<Any>) => ReactNode) => (props: NodeProps<Types.ViewGroupNodeData, "view-group">) => ReactNode;
+export interface CustomNodes {
+    element?: undefined | ((props: NodeProps<Types.ElementNodeData, 'element'>) => ReactNode);
+    deployment?: undefined | ((props: NodeProps<Types.DeploymentElementNodeData, 'deployment'>) => ReactNode);
+    compoundElement?: undefined | ((props: NodeProps<Types.CompoundElementNodeData, 'compound-element'>) => ReactNode);
+    compoundDeployment?: undefined | ((props: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>) => ReactNode);
+    viewGroup?: undefined | ((props: NodeProps<Types.ViewGroupNodeData, 'view-group'>) => ReactNode);
+}

package/dist/custom/hooks.d.ts

@@ -0,0 +1,10 @@
+export type { DiagramActorEvent, DiagramActorRef, DiagramContext, } from '../state/types';
+export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
+export { type EnabledFeatures, useEnabledFeatures, } from '../context/DiagramFeatures';
+export { useCurrentViewId, } from '../hooks/useCurrentViewId';
+export { useDiagram, useDiagramContext, } from '../hooks/useDiagram';
+export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi, } from '../hooks/useXYFlow';
+export { useLikeC4Model, useLikeC4Specification, } from '../likec4model/useLikeC4Model';
+export { useMantinePortalProps } from '../hooks/useMantinePortalProps';
+export { useSetState } from '../hooks/useSetState';
+export { useUpdateEffect } from '../hooks/useUpdateEffect';

package/dist/custom/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './customNodes';
+export * from './hooks';
+export type { Types } from '../likec4diagram/types';

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export { useMantinePortalProps } from './useMantinePortalProps';
 export { useSetState } from './useSetState';
 export { useUpdateEffect } from './useUpdateEffect';
-export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow';
+export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow';
 export type { XYStoreApi } from './useXYFlow';

package/dist/hooks/safeContext.js

@@ -1,10 +1,10 @@
-import { r as reactExports } from '../_virtual/index.js';
+import { createContext, useContext } from 'react';
 
-const DiagramActorSafeContext = reactExports.createContext(null);
+const DiagramActorSafeContext = createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
 const DiagramActorContextProvider = DiagramActorSafeContext.Provider;
 const useDiagramActorRef = () => {
-  const ctx = reactExports.useContext(DiagramActorSafeContext);
+  const ctx = useContext(DiagramActorSafeContext);
   if (ctx === null) {
     throw new Error("DiagramActorRef is not provided");
   }

package/dist/hooks/useCurrentViewId.d.ts

@@ -1,2 +1,6 @@
-import { ViewId } from '@likec4/core';
+import { ViewId } from '@likec4/core/types';
+/**
+ * Returns current view id
+ * Should be used only inside LikeC4Diagram
+ */
 export declare function useCurrentViewId(): ViewId;

package/dist/hooks/useCurrentViewId.js

@@ -1,8 +1,7 @@
 import { useSelector } from '@xstate/react';
-import '@likec4/core';
 import '@mantine/hooks';
 import 'fast-equals';
-import '../_virtual/index.js';
+import 'react';
 import { useDiagramActorRef } from './safeContext.js';
 
 const selectViewId = (s) => s.context.view.id;