@likec4/diagram 1.59.4 → 1.61.0

package/dist/custom/customNodes.mjs

@@ -0,0 +1,620 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useLikeC4Model } from "../hooks/useLikeC4Model.mjs";
+import { GraphElementNode } from "../likec4diagram/custom/nodes/GraphElementNode.mjs";
+import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.mjs";
+import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.mjs";
+import { SequenceSubflowArea } from "../likec4diagram/custom/nodes/SequenceSubFlow.mjs";
+import { jsx } from "react/jsx-runtime";
+import { capitalize, toCamelCase } from "remeda";
+import { nonexhaustive } from "@likec4/core";
+
+// src/custom/customNodes.tsx
+/**
+* Internal helper that wraps a custom node component with model lookup logic.
+* Resolves the node model from the LikeC4 model based on the node's view ID and ID.
+*
+* @param Node - The custom node component to wrap
+* @returns A wrapped component that accepts XYFlow node props
+*/
+function customDiagramNode(Node) {
+	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/react'
+*
+* 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);
+}
+/**
+* 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/react'
+*
+* 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);
+}
+/**
+* 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/react'
+*
+* 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);
+}
+/**
+* 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/react'
+*
+* const CustomCompoundDeploymentNode = compoundDeploymentNode(({ nodeProps, nodeModel }) => (
+*   <CompoundNodeContainer nodeProps={nodeProps}>
+*     <CompoundTitle {...nodeProps} />
+*     <CompoundActions {...nodeProps} />
+*     <IfNotReadOnly>
+*       <CompoundDeploymentToolbar {...nodeProps} />
+*     </IfNotReadOnly>
+*     <DefaultHandles />
+*   </CompoundNodeContainer>
+* ```
+*/
+function compoundDeploymentNode(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/react'
+*
+* const CustomViewGroupNode = viewGroupNode(({ nodeProps, nodeModel }) => (
+*   <CompoundNodeContainer nodeProps={nodeProps}>
+*     <CompoundTitle {...nodeProps} />
+*     <DefaultHandles />
+*   </CompoundNodeContainer>
+* ```
+*/
+function viewGroupNode(component) {
+	return customDiagramNode(component);
+}
+/**
+* Node that will be used to render the sequence actor from the model.
+*
+* 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)
+*/
+function sequenceActorNode(component) {
+	return customDiagramNode(component);
+}
+/**
+* Helper function to define custom node renderers
+*
+* @example
+* ```tsx
+* import { defineNode, ElementNodeContainer, ElementData, DefaultHandles } from 'likec4/react'
+*
+* const CustomElementNode = defineNode('element', (nodeProps) => (
+*   <ElementNodeContainer nodeProps={nodeProps}>
+*     <ElementData {...nodeProps} />
+*     <DefaultHandles />
+*   </ElementNodeContainer>
+* ))
+* ```
+* Or using bound methods:
+*
+* @example
+* ```tsx
+* import { defineNode, ElementNodeContainer, ElementData, DefaultHandles } from 'likec4/react'
+*
+* const CustomElementNode = defineNode.element((nodeProps) => (
+*   <ElementNodeContainer {...nodeProps}>
+*     <ElementData {...nodeProps} />
+*     <DefaultHandles />
+*   </ElementNodeContainer>
+* ))
+* ```
+*/
+function defineNode(nodeType, renderer) {
+	const defined = (props) => {
+		if (props.type !== nodeType) throw new Error(`Expected node type '${nodeType}', got '${props.type}'`);
+		return renderer(props);
+	};
+	defined.displayName = `Defined${toCamelCase(nodeType)}`;
+	return defined;
+}
+/**
+* Factory method for defining custom element node renderers
+*
+* @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx) as reference
+*
+* @example
+* ```tsx
+* import { defineNode, ElementNodeContainer, ElementData, DefaultHandles } from 'likec4/react'
+*
+* const CustomElementNode = defineNode.element((nodeProps) => (
+*   <ElementNodeContainer {...nodeProps}>
+*     <ElementData {...nodeProps} />
+*     <DefaultHandles />
+*   </ElementNodeContainer>
+* ))
+* ```
+*/
+defineNode.element = defineNode.bind(null, "element");
+/**
+* Factory method for defining custom deployment node renderers
+*
+* @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx) as reference
+*
+* @example
+* ```tsx
+* import { defineNode, ElementNodeContainer, ElementData, DefaultHandles } from 'likec4/react'
+*
+* const CustomDeploymentNode = defineNode.deploymentNode((nodeProps) => (
+*   <ElementNodeContainer {...nodeProps}>
+*     <ElementData {...nodeProps} />
+*     <DefaultHandles />
+*   </ElementNodeContainer>
+* ))
+* ```
+*/
+defineNode.deploymentNode = defineNode.bind(null, "deployment");
+/**
+* Factory method for defining custom compound element node renderers
+*
+* @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx) as reference
+*
+* @example
+* ```tsx
+* import { defineNode, CompoundNodeContainer, CompoundTitle, DefaultHandles } from 'likec4/react'
+*
+* const CustomCompoundElementNode = defineNode.compoundElement((nodeProps) => (
+*   <CompoundNodeContainer {...nodeProps}>
+*     <CompoundTitle {...nodeProps} />
+*     <DefaultHandles />
+*   </CompoundNodeContainer>
+* ))
+* ```
+*/
+defineNode.compoundElement = defineNode.bind(null, "compound-element");
+/**
+* Factory method for defining custom compound deployment node renderers
+*
+* @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx) as reference
+*
+* @example
+* ```tsx
+* import { defineNode, CompoundNodeContainer, CompoundTitle, DefaultHandles } from 'likec4/react'
+*
+* const CustomCompoundDeploymentNode = defineNode.compoundDeployment((nodeProps) => (
+*   <CompoundNodeContainer {...nodeProps}>
+*     <CompoundTitle {...nodeProps} />
+*     <DefaultHandles />
+*   </CompoundNodeContainer>
+* ))
+* ```
+*/
+defineNode.compoundDeployment = defineNode.bind(null, "compound-deployment");
+/**
+* Factory method for defining custom view group node renderers
+*
+* @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx) as reference
+*
+* @example
+* ```tsx
+* import { defineNode, CompoundNodeContainer, CompoundTitle, DefaultHandles } from 'likec4/react'
+*
+* const CustomViewGroupNode = defineNode.viewGroup((nodeProps) => (
+*   <CompoundNodeContainer {...nodeProps}>
+*     <CompoundTitle {...nodeProps} />
+*     <DefaultHandles />
+*   </CompoundNodeContainer>
+* ))
+* ```
+*/
+defineNode.viewGroup = defineNode.bind(null, "view-group");
+/**
+* Factory method for defining custom sequence actor node renderers
+*
+* @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx) as reference
+*
+* @example
+* ```tsx
+* import { defineNode, SequenceActorContainer, SequenceActorTitle } from 'likec4/react'
+*
+* const CustomSequenceActorNode = defineNode.seqActor((nodeProps) => (
+*   <SequenceActorContainer {...nodeProps}>
+*     <SequenceActorTitle {...nodeProps} />
+*   </SequenceActorContainer>
+* ))
+* ```
+*/
+defineNode.seqActor = defineNode.bind(null, "seq-actor");
+/**
+* Factory method for defining custom sequence subflow node renderers
+*
+* @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx) as reference
+*
+* @example
+* ```tsx
+* import { defineNode, SequenceSubflowContainer, SequenceSubflowTitle } from 'likec4/react'
+*
+* const CustomSequenceSubflowNode = defineNode.seqSubflow((nodeProps) => (
+*   <SequenceSubflowContainer {...nodeProps}>
+*     <SequenceSubflowTitle {...nodeProps} />
+*   </SequenceSubflowContainer>
+* ))
+* ```
+*/
+defineNode.seqSubflow = defineNode.bind(null, "seq-subflow");
+/**
+* Helper function to define custom node renderers
+*
+* @example
+* ```tsx
+* import { defineNodes, ElementNodeContainer, ElementData, DefaultHandles } from 'likec4/react'
+*
+* const CustomNodes = defineNodes({
+*   element: (nodeProps) => (
+*     <ElementNodeContainer {...nodeProps}>
+*       <ElementData {...nodeProps} />
+*       <DefaultHandles />
+*     </ElementNodeContainer>
+*   ),
+*   deployment: (nodeProps) => (
+*     <DeploymentNodeContainer {...nodeProps}>
+*       <DeploymentTitle {...nodeProps} />
+*       <DefaultHandles />
+*     </DeploymentNodeContainer>
+*   ),
+* })
+* ```
+*
+* {@link defineNode}
+*/
+function defineNodes(renderers) {
+	return renderers;
+}
+/**
+* Helper function to get the default node renderer for a given node type
+*
+* @param type - The node type to get the default renderer for
+* @returns The default node renderer for the specified type
+*/
+function defaultNodeRenderer(type) {
+	switch (type) {
+		case "element": return ElementNode;
+		case "deployment": return DeploymentNode;
+		case "compound-element": return CompoundElementNode;
+		case "compound-deployment": return CompoundDeploymentNode;
+		case "view-group": return ViewGroupNode;
+		case "seq-actor": return SequenceActorNode;
+		case "seq-parallel": return SequenceParallelArea;
+		case "seq-subflow": return SequenceSubflowArea;
+		case "graph-element": return GraphElementNode;
+		default: return nonexhaustive(type);
+	}
+}
+/**
+* Helper function to wrap a node renderer with a custom wrapper component
+*
+* @example
+* ```tsx
+* import { wrapNode } from 'likec4/react'
+*
+* const WrappedElementNode = wrapNode('element', ({ props, Node }) => (
+*   <div className="custom-wrapper">
+*     <Node {...props} />
+*   </div>
+* ))
+* ```
+*
+* @param nodeType - The node type to wrap
+* @param Wrapper - The wrapper component
+* @returns A wrapped node renderer
+*/
+function wrapNode(nodeType, Wrapper) {
+	const wrapped = ((props) => {
+		if (props.type !== nodeType) throw new Error(`Expected node type '${nodeType}', got '${props.type}'`);
+		return /* @__PURE__ */ jsx(Wrapper, {
+			props,
+			Node: defaultNodeRenderer(props.type)
+		});
+	});
+	wrapped.displayName = `Wrapped${capitalize(toCamelCase(nodeType))}`;
+	return wrapped;
+}
+/**
+* Factory method for wrapping element node renderers
+*
+* @example
+* ```tsx
+* import { wrapNode } from 'likec4/react'
+*
+* const WrappedElementNode = wrapNode.element(({ props, Node }) => (
+*   <div className="custom-wrapper">
+*     <Node {...props} />
+*   </div>
+* ))
+* ```
+*/
+wrapNode.element = wrapNode.bind(null, "element");
+/**
+* Factory method for wrapping deployment node renderers
+*
+* @example
+* ```tsx
+* import { wrapNode } from 'likec4/react'
+*
+* const WrappedDeploymentNode = wrapNode.deployment(({ props, Node }) => (
+*   <div className="custom-wrapper">
+*     <Node {...props} />
+*   </div>
+* ))
+* ```
+*/
+wrapNode.deployment = wrapNode.bind(null, "deployment");
+/**
+* Factory method for wrapping compound element node renderers
+*
+* @example
+* ```tsx
+* import { wrapNode } from 'likec4/react'
+*
+* const WrappedCompoundElementNode = wrapNode.compoundElement(({ props, Node }) => (
+*   <div className="custom-wrapper">
+*     <Node {...props} />
+*   </div>
+* ))
+* ```
+*/
+wrapNode.compoundElement = wrapNode.bind(null, "compound-element");
+/**
+* Factory method for wrapping compound deployment node renderers
+*
+* @example
+* ```tsx
+* import { wrapNode } from 'likec4/react'
+*
+* const WrappedCompoundDeploymentNode = wrapNode.compoundDeployment(({ props, Node }) => (
+*   <div className="custom-wrapper">
+*     <Node {...props} />
+*   </div>
+* ))
+* ```
+*/
+wrapNode.compoundDeployment = wrapNode.bind(null, "compound-deployment");
+/**
+* Factory method for wrapping view group node renderers
+*
+* @example
+* ```tsx
+* import { wrapNode } from 'likec4/react'
+*
+* const WrappedViewGroupNode = wrapNode.viewGroup(({ props, Node }) => (
+*   <div className="custom-wrapper">
+*     <Node {...props} />
+*   </div>
+* ))
+* ```
+*/
+wrapNode.viewGroup = wrapNode.bind(null, "view-group");
+/**
+* Factory method for wrapping sequence actor node renderers
+*
+* @example
+* ```tsx
+* import { wrapNode } from 'likec4/react'
+*
+* const WrappedSequenceActorNode = wrapNode.seqActor(({ props, Node }) => (
+*   <div className="custom-wrapper">
+*     <Node {...props} />
+*   </div>
+* ))
+* ```
+*/
+wrapNode.seqActor = wrapNode.bind(null, "seq-actor");
+/**
+* Factory method for wrapping sequence subflow area node renderers
+*
+* @example
+* ```tsx
+* import { wrapNode } from 'likec4/react'
+*
+* const WrappedSequenceSubflowNode = wrapNode.seqSubflow(({ props, Node }) => (
+*   <div className="custom-wrapper">
+*     <Node {...props} />
+*   </div>
+* ))
+* ```
+*/
+wrapNode.seqSubflow = wrapNode.bind(null, "seq-subflow");
+/**
+* Factory method for wrapping graph element node renderers
+*
+* @example
+* ```tsx
+* import { wrapNode } from 'likec4/react'
+import { toCamelCase } from 'remeda'
+*
+* const WrappedGraphElementNode = wrapNode.graphElement(({ props, Node }) => (
+*   <div className="custom-wrapper">
+*     <Node {...props} />
+*   </div>
+* ))
+* ```
+*/
+wrapNode.graphElement = wrapNode.bind(null, "graph-element");
+
+export { compoundDeploymentNode, compoundElementNode, defaultNodeRenderer, defineNode, defineNodes, deploymentNode, elementNode, sequenceActorNode, viewGroupNode, wrapNode };

package/dist/custom/index.d.mts

@@ -0,0 +1,42 @@
+import "./builtins.mjs";
+import { CompoundDeploymentNodeProps, CompoundElementNodeProps, DeploymentNodeProps, ElementNodeProps, SequenceActorNodeProps, ViewGroupNodeProps, compoundDeploymentNode, compoundElementNode, defaultNodeRenderer, defineNode, defineNodes, deploymentNode, elementNode, sequenceActorNode, viewGroupNode, wrapNode } from "./customNodes.mjs";
+import "./primitives.mjs";
+import { CompoundActions } from "../likec4diagram/custom/nodes/CompoundActions.mjs";
+import { CompoundActionButton } from "../base-primitives/compound/CompoundActionButton.mjs";
+import { CompoundDetailsButton } from "../base-primitives/compound/CompoundDetailsButton.mjs";
+import { CompoundNodeContainer } from "../base-primitives/compound/CompoundNodeContainer.mjs";
+import { CompoundTitle } from "../base-primitives/compound/CompoundTitle.mjs";
+import { ElementActionButtons } from "../base-primitives/element/ElementActionButtons.mjs";
+import { ElementData } from "../base-primitives/element/ElementData.mjs";
+import { ElementDetailsButton } from "../base-primitives/element/ElementDetailsButton.mjs";
+import { ElementNodeContainer } from "../base-primitives/element/ElementNodeContainer.mjs";
+import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseEdgePropsWithData, BaseNode, BaseNodeData, BaseNodeProps, BaseNodePropsWithData } from "../base/types.mjs";
+import { DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, NodeRenderers, OnCanvasClick, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, ViewPadding, WhereOperator } from "../LikeC4Diagram.props.mjs";
+import { Base } from "../base/Base.mjs";
+import { XYStoreState } from "../hooks/useXYFlow.mjs";
+import { ElementShape, ElementShapeProps } from "../base-primitives/element/ElementShape.mjs";
+import { ElementTag, ElementTagProps, ElementTags, ElementTagsProps } from "../base-primitives/element/ElementTags.mjs";
+import { Markdown } from "../base-primitives/Markdown.mjs";
+import { DefaultHandles } from "../base-primitives/NodeHandles.mjs";
+import { DeploymentElementActions, ElementActions } from "../likec4diagram/custom/nodes/ElementActions.mjs";
+import { GraphElementNode } from "../likec4diagram/custom/nodes/GraphElementNode.mjs";
+import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.mjs";
+import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.mjs";
+import { SequenceSubflowArea } from "../likec4diagram/custom/nodes/SequenceSubFlow.mjs";
+import { NodeDrifts } from "../likec4diagram/custom/nodes/NodeDrifts.mjs";
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from "../likec4diagram/custom/nodes/toolbar/CompoundToolbar.mjs";
+import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custom/nodes/toolbar/ElementToolbar.mjs";
+import { Toolbar } from "../likec4diagram/custom/nodes/toolbar/Toolbar.mjs";
+import { Types } from "../likec4diagram/types.mjs";
+import { EnabledFeatures, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from "../context/DiagramFeatures.mjs";
+import { Overlay, OverlayProps } from "../overlays/overlay/Overlay.mjs";
+import { PortalToContainer } from "../components/PortalToContainer.mjs";
+import { FramerMotionConfig } from "../context/FramerMotionConfig.mjs";
+import { ErrorBoundary, ErrorFallback } from "../components/ErrorFallback.mjs";
+import { LikeC4MantineProvider } from "../LikeC4MantineProvider.mjs";
+import { LikeC4Styles } from "../LikeC4Styles.mjs";
+import { TagStylesProvider } from "../context/TagStylesContext.mjs";
+import { CustomizationProvider } from "../customization/CustomizationContext.mjs";
+import { defineCustomComponents } from "../customization/customizable.mjs";
+import { CustomComponents, Customizables } from "../customization/customization-types.mjs";
+export { Base, type BaseEdge, type BaseEdgeData, type BaseEdgeProps, type BaseEdgePropsWithData, type BaseNode, type BaseNodeData, type BaseNodeProps, type BaseNodePropsWithData, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentNodeProps, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementNodeProps, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, type CustomComponents, type Customizables, CustomizationProvider, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, DeploymentNodeProps, type DiagramNodeWithNavigate, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, type ElementIconRenderer, type ElementIconRendererProps, ElementNode, ElementNodeContainer, ElementNodeProps, ElementShape, type ElementShapeProps, ElementTag, type ElementTagProps, ElementTags, type ElementTagsProps, ElementToolbar, type EnabledFeatures, ErrorBoundary, ErrorFallback, FramerMotionConfig, GraphElementNode, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, type LikeC4ColorScheme, type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties, LikeC4MantineProvider, LikeC4Styles, Markdown, NodeDrifts, type NodeRenderers, type OnCanvasClick, type OnEdgeClick, type OnNavigateTo, type OnNodeClick, type OpenSourceParams, Overlay, type OverlayProps, type PaddingUnit, type PaddingWithUnit, PortalToContainer, SequenceActorNode, SequenceActorNodeProps, SequenceParallelArea, SequenceSubflowArea, TagStylesProvider, Toolbar, type Types, ViewGroupNode, ViewGroupNodeProps, type ViewPadding, type WhereOperator, type XYStoreState, compoundDeploymentNode, compoundElementNode, defaultNodeRenderer, defineCustomComponents, defineNode, defineNodes, deploymentNode, elementNode, sequenceActorNode, useEnabledFeatures, viewGroupNode, wrapNode };