@likec4/diagram 1.55.0 → 1.56.0

package/dist/context/TagStylesContext.js

@@ -1,29 +1,30 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { isTagColorSpecified } from '@likec4/core';
-import { DefaultTagColors } from '@likec4/core/styles';
-import { useMantineStyleNonce } from '@mantine/core';
-import { useContext, createContext, memo } from 'react';
-import { isEmpty, pipe, entries, flatMap, join } from 'remeda';
-import { useLikeC4Specification } from '../hooks/useLikeC4Model.js';
-
-const TagStylesContext = createContext({});
-const radixColors = DefaultTagColors;
-const generateColorVars = (spec) => {
-  const color = spec.color;
-  if (isTagColorSpecified(spec)) {
-    return `
+import "../_virtual/_rolldown/runtime.js";
+import { useLikeC4Specification } from "../hooks/useLikeC4Model.js";
+import { createContext, memo, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { entries, flatMap, isEmpty, join, pipe } from "remeda";
+import { isTagColorSpecified } from "@likec4/core";
+import { useMantineStyleNonce } from "@mantine/core";
+import { DefaultTagColors } from "@likec4/core/styles";
+//#region src/context/TagStylesContext.tsx
+var TagStylesContext = createContext({});
+var radixColors = DefaultTagColors;
+var generateColorVars = (spec) => {
+	const color = spec.color;
+	if (isTagColorSpecified(spec)) return `
       --colors-likec4-tag-bg: ${color};
       --colors-likec4-tag-bg-hover: color-mix(in oklab, ${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 `
+	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);
@@ -31,44 +32,35 @@ const generateColorVars = (spec) => {
   `;
 };
 function generateStylesheet(tags, rootSelector) {
-  if (!tags || isEmpty(tags)) {
-    return "";
-  }
-  return pipe(
-    entries(tags),
-    flatMap(([tag, spec]) => [
-      `:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
-      generateColorVars(spec),
-      "}"
-    ]),
-    join("\n")
-  );
+	if (!tags || isEmpty(tags)) return "";
+	return pipe(entries(tags), flatMap(([tag, spec]) => [
+		`:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
+		generateColorVars(spec),
+		"}"
+	]), join("\n"));
 }
 function TagStylesProvider({ children, rootSelector }) {
-  const tags = useLikeC4Specification().tags;
-  const nonce = useMantineStyleNonce()?.();
-  const stylesheet = generateStylesheet(tags, rootSelector);
-  return /* @__PURE__ */ jsxs(TagStylesContext.Provider, { value: tags, children: [
-    stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, { nonce, stylesheet }),
-    children
-  ] });
+	const tags = useLikeC4Specification().tags;
+	const nonce = useMantineStyleNonce()?.();
+	const stylesheet = generateStylesheet(tags, rootSelector);
+	return /* @__PURE__ */ jsxs(TagStylesContext.Provider, {
+		value: tags,
+		children: [stylesheet !== "" && /* @__PURE__ */ jsx(TagStylesheet, {
+			nonce,
+			stylesheet
+		}), children]
+	});
 }
-const TagStylesheet = memo(({ stylesheet, nonce }) => {
-  return /* @__PURE__ */ jsx(
-    "style",
-    {
-      "data-likec4-tags": true,
-      type: "text/css",
-      dangerouslySetInnerHTML: { __html: stylesheet },
-      nonce
-    }
-  );
+var TagStylesheet = memo(({ stylesheet, nonce }) => {
+	return /* @__PURE__ */ jsx("style", {
+		"data-likec4-tags": true,
+		type: "text/css",
+		dangerouslySetInnerHTML: { __html: stylesheet },
+		nonce
+	});
 });
 function useTagSpecification(tag) {
-  const specs = useContext(TagStylesContext);
-  return specs[tag] ?? {
-    color: "tomato"
-  };
+	return useContext(TagStylesContext)[tag] ?? { color: "tomato" };
 }
-
+//#endregion
 export { TagStylesProvider, useTagSpecification };

package/dist/custom/customNodes.js

@@ -1,43 +1,239 @@
-import { jsx } from 'react/jsx-runtime';
-import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { useLikeC4Model } from "../hooks/useLikeC4Model.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/custom/customNodes.tsx
 function customDiagramNode(Node) {
-  return ((props) => {
-    const viewId = props.data.viewId;
-    const likec4 = useLikeC4Model();
-    const viewModel = likec4.findView(viewId);
-    if (!viewModel) {
-      console.error(`View "${viewId}" not found, requested by customNode "${props.data.id}"`, { props });
-      return null;
-    }
-    const model = viewModel.findNode(props.data.id);
-    if (!model) {
-      console.error(
-        `Node "${props.id}" not found in view "${viewId}", requested by customNode "${props.data.id}"`,
-        { props }
-      );
-      return null;
-    }
-    return /* @__PURE__ */ jsx(Node, { nodeProps: props, nodeModel: model });
-  });
+	return ((props) => {
+		const viewId = props.data.viewId;
+		const viewModel = useLikeC4Model().findView(viewId);
+		if (!viewModel) {
+			console.error(`View "${viewId}" not found, requested by customNode "${props.data.id}"`, { props });
+			return null;
+		}
+		const model = viewModel.findNode(props.data.id);
+		if (!model) {
+			console.error(`Node "${props.id}" not found in view "${viewId}", requested by customNode "${props.data.id}"`, { props });
+			return null;
+		}
+		return /* @__PURE__ */ jsx(Node, {
+			nodeProps: props,
+			nodeModel: model
+		});
+	});
 }
+/**
+* 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,
+*   ElementData,
+*   ElementActions,
+*   ElementDetailsButtonWithHandler,
+*   IfEnabled,
+*   IfNotReadOnly,
+*   ElementToolbar,
+*   DefaultHandles,
+*   ElementTags
+* } from '@likec4/diagram/custom'
+*
+* const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
+*   <ElementNodeContainer nodeProps={nodeProps}>
+*     <ElementShape {...nodeProps} />
+*     <ElementData {...nodeProps} />
+*     <IfEnabled feature="ElementTags">
+*       <ElementTags {...nodeProps} />
+*     </IfEnabled>
+*     <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>
+* ))
+* ```
+*/
 function elementNode(component) {
-  return customDiagramNode(component);
+	return customDiagramNode(component);
 }
+/**
+* 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,
+*   ElementData,
+*   DeploymentElementActions,
+*   ElementDetailsButtonWithHandler,
+*   IfNotReadOnly,
+*   DeploymentElementToolbar,
+*   DefaultHandles,
+* } from '@likec4/diagram/custom'
+*
+* const CustomDeploymentNode = deploymentNode(({ nodeProps, nodeModel }) => (
+*   <ElementNodeContainer nodeProps={nodeProps}>
+*     <ElementShape {...nodeProps} />
+*     <ElementData {...nodeProps} />
+*     <DeploymentElementActions
+*       {...nodeProps}
+*       extraButtons={[
+*         {
+*           key: 'plus',
+*           icon: <IconPlus />,
+*           onClick: () => console.log('extra'),
+*         },
+*       ]}
+*     />
+*     <ElementDetailsButtonWithHandler {...nodeProps} />
+*     <IfNotReadOnly>
+*       <DeploymentElementToolbar {...nodeProps} />
+*     </IfNotReadOnly>
+*     <DefaultHandles />
+*   </ElementNodeContainer>
+* ))
+* ```
+*/
 function deploymentNode(component) {
-  return customDiagramNode(component);
+	return customDiagramNode(component);
 }
+/**
+* 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>
+* ))
+* ```
+*/
 function compoundElementNode(component) {
-  return customDiagramNode(component);
+	return customDiagramNode(component);
 }
+/**
+* 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>
+* ```
+*/
 function compoundDeploymentNode(component) {
-  return customDiagramNode(component);
+	return customDiagramNode(component);
 }
+/**
+* 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>
+* ```
+*/
 function viewGroupNode(component) {
-  return customDiagramNode(component);
+	return customDiagramNode(component);
 }
 function sequenceActorNode(component) {
-  return customDiagramNode(component);
+	return customDiagramNode(component);
 }
-
+//#endregion
 export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode };

package/dist/custom/index.js

@@ -1,40 +1,41 @@
-export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from './customNodes.js';
-export { Base } from '../base/Base.js';
-export { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from '../context/DiagramFeatures.js';
-export { Overlay } from '../overlays/overlay/Overlay.js';
-export { PortalToContainer } from '../components/PortalToContainer.js';
-export { ShadowRoot } from '../shadowroot/ShadowRoot.js';
-export { FramerMotionConfig } from '../context/FramerMotionConfig.js';
-export { NavigationPanel } from '../components/NavigationPanel.js';
-export { CompoundActionButton } from '../base-primitives/compound/CompoundActionButton.js';
-export { CompoundActions } from '../likec4diagram/custom/nodes/CompoundActions.js';
-export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from '../likec4diagram/custom/nodes/nodes.js';
-export { CompoundDeploymentToolbar, CompoundElementToolbar } from '../likec4diagram/custom/nodes/toolbar/CompoundToolbar.js';
-export { CompoundDetailsButton } from '../base-primitives/compound/CompoundDetailsButton.js';
-export { CompoundNodeContainer } from '../base-primitives/compound/CompoundNodeContainer.js';
-export { CompoundTitle } from '../base-primitives/compound/CompoundTitle.js';
-export { DefaultHandles } from '../base-primitives/NodeHandles.js';
-export { DeploymentElementActions, ElementActions } from '../likec4diagram/custom/nodes/ElementActions.js';
-export { DeploymentElementToolbar, ElementToolbar } from '../likec4diagram/custom/nodes/toolbar/ElementToolbar.js';
-export { ElementActionButtons } from '../base-primitives/element/ElementActionButtons.js';
-export { ElementData } from '../base-primitives/element/ElementData.js';
-export { ElementDetailsButton } from '../base-primitives/element/ElementDetailsButton.js';
-export { ElementNodeContainer } from '../base-primitives/element/ElementNodeContainer.js';
-export { ElementShape } from '../base-primitives/element/ElementShape.js';
-export { ElementTag, ElementTags } from '../base-primitives/element/ElementTags.js';
-export { Markdown } from '../base-primitives/Markdown.js';
-export { SequenceActorNode, SequenceParallelArea } from '../likec4diagram/custom/nodes/SequenceActorNode.js';
-export { Toolbar } from '../likec4diagram/custom/nodes/toolbar/Toolbar.js';
-export { memoEdge } from '../base-primitives/memoEdge.js';
-export { memoNode } from '../base-primitives/memoNode.js';
-export { useCurrentView, useCurrentViewId } from '../hooks/useCurrentView.js';
-export { useCurrentViewModel } from '../hooks/useCurrentViewModel.js';
-export { useDiagram, useDiagramActorRef } from '../hooks/safeContext.js';
-export { useDiagramContext, useOnDiagramEvent } from '../hooks/useDiagram.js';
-export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
-export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from '../hooks/useLikeC4Project.js';
-export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../hooks/useLikeC4Model.js';
-export { useLikeC4Styles } from '../hooks/useLikeC4Styles.js';
-export { useOptionalCurrentViewModel, useOptionalLikeC4Model } from '../context/LikeC4ModelContext.js';
-export { useSetState } from '../hooks/useSetState.js';
-export { useUpdateEffect } from '../hooks/useUpdateEffect.js';
+import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
+import { Base } from "../base/Base.js";
+import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
+import { useSetState } from "../hooks/useSetState.js";
+import { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from "../context/DiagramFeatures.js";
+import { FramerMotionConfig } from "../context/FramerMotionConfig.js";
+import { useDiagram, useDiagramActorRef } from "../hooks/safeContext.js";
+import { useDiagramContext, useOnDiagramEvent } from "../hooks/useDiagram.js";
+import { useCurrentView, useCurrentViewId } from "../hooks/useCurrentView.js";
+import { useOptionalCurrentViewModel, useOptionalLikeC4Model } from "../context/LikeC4ModelContext.js";
+import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "../hooks/useLikeC4Model.js";
+import { useCurrentViewModel } from "../hooks/useCurrentViewModel.js";
+import { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from "../hooks/useLikeC4Project.js";
+import { useLikeC4Styles } from "../hooks/useLikeC4Styles.js";
+import { CompoundActionButton } from "../base-primitives/compound/CompoundActionButton.js";
+import { CompoundDetailsButton } from "../base-primitives/compound/CompoundDetailsButton.js";
+import { CompoundNodeContainer } from "../base-primitives/compound/CompoundNodeContainer.js";
+import { CompoundTitle } from "../base-primitives/compound/CompoundTitle.js";
+import { ElementActionButtons } from "../base-primitives/element/ElementActionButtons.js";
+import { Markdown } from "../base-primitives/Markdown.js";
+import { ElementData } from "../base-primitives/element/ElementData.js";
+import { ElementDetailsButton } from "../base-primitives/element/ElementDetailsButton.js";
+import { ElementNodeContainer } from "../base-primitives/element/ElementNodeContainer.js";
+import { ElementShape } from "../base-primitives/element/ElementShape.js";
+import { ElementTag, ElementTags } from "../base-primitives/element/ElementTags.js";
+import { memoEdge } from "../base-primitives/memoEdge.js";
+import { memoNode } from "../base-primitives/memoNode.js";
+import { DefaultHandles } from "../base-primitives/NodeHandles.js";
+import { Overlay } from "../overlays/overlay/Overlay.js";
+import { PortalToContainer } from "../components/PortalToContainer.js";
+import { CompoundActions } from "../likec4diagram/custom/nodes/CompoundActions.js";
+import { DeploymentElementActions, ElementActions } from "../likec4diagram/custom/nodes/ElementActions.js";
+import { Toolbar } from "../likec4diagram/custom/nodes/toolbar/Toolbar.js";
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from "../likec4diagram/custom/nodes/toolbar/CompoundToolbar.js";
+import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custom/nodes/toolbar/ElementToolbar.js";
+import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.js";
+import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.js";
+import { ShadowRoot } from "../shadowroot/ShadowRoot.js";
+import { NavigationPanel } from "../components/NavigationPanel.js";
+import { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from "./customNodes.js";
+export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, Markdown, NavigationPanel, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, ShadowRoot, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, memoEdge, memoNode, sequenceActorNode, useCurrentView, useCurrentViewId, useCurrentViewModel, useDiagram, useDiagramActorRef, useDiagramContext, useDiagramEventHandlers, useEnabledFeatures, useHasProjects, useLikeC4Model, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, useLikeC4Specification, useLikeC4Styles, useLikeC4ViewModel, useOnDiagramEvent, useOptionalCurrentViewModel, useOptionalLikeC4Model, useSetState, useUpdateEffect, viewGroupNode };

package/dist/editor/LikeC4EditorCallbacks.js

@@ -1,5 +1,7 @@
+import "../_virtual/_rolldown/runtime.js";
+//#region src/editor/LikeC4EditorCallbacks.tsx
 function createLikeC4Editor(callbacks) {
-  return callbacks;
+	return callbacks;
 }
-
+//#endregion
 export { createLikeC4Editor };

package/dist/editor/LikeC4EditorProvider.js

@@ -1,12 +1,37 @@
-import { jsx } from 'react/jsx-runtime';
-import { useContext, createContext } from 'react';
-
-const LikeC4EditorReactContext = createContext(null);
+import "../_virtual/_rolldown/runtime.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/editor/LikeC4EditorProvider.tsx
+var LikeC4EditorReactContext = createContext(null);
+/**
+* Provider for the LikeC4 Editor.
+* @example
+* ```tsx
+*
+* // Not required to use memo for editor callbacks
+* const editor = createLikeC4Editor({
+*   fetchView: async (viewId, layout) => {
+*     // fetch view logic
+*   },
+*   handleChange: (viewId, change) => {
+*     // handle change logic
+*   }
+* })
+*
+* <LikeC4EditorProvider
+*  editor={editor}>
+*   <App />
+* </LikeC4EditorProvider>
+* ```
+*/
 function LikeC4EditorProvider({ children, editor }) {
-  return /* @__PURE__ */ jsx(LikeC4EditorReactContext.Provider, { value: editor, children });
+	return /* @__PURE__ */ jsx(LikeC4EditorReactContext.Provider, {
+		value: editor,
+		children
+	});
 }
 function useOptionalLikeC4Editor() {
-  return useContext(LikeC4EditorReactContext);
+	return useContext(LikeC4EditorReactContext);
 }
-
+//#endregion
 export { LikeC4EditorProvider, useOptionalLikeC4Editor };