@likec4/diagram 1.60.0 → 1.61.0

package/dist/custom/customNodes.mjs

@@ -1,8 +1,21 @@
 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";
 
-//#region src/custom/customNodes.tsx
+// 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;
@@ -46,7 +59,7 @@ function customDiagramNode(Node) {
 *   ElementToolbar,
 *   DefaultHandles,
 *   ElementTags
-* } from '@likec4/diagram/custom'
+* } from 'likec4/react'
 *
 * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
 *   <ElementNodeContainer nodeProps={nodeProps}>
@@ -101,7 +114,7 @@ function elementNode(component) {
 *   IfNotReadOnly,
 *   DeploymentElementToolbar,
 *   DefaultHandles,
-* } from '@likec4/diagram/custom'
+* } from 'likec4/react'
 *
 * const CustomDeploymentNode = deploymentNode(({ nodeProps, nodeModel }) => (
 *   <ElementNodeContainer nodeProps={nodeProps}>
@@ -150,7 +163,7 @@ function deploymentNode(component) {
 *   IfEnabled,
 *   CompoundElementToolbar,
 *   DefaultHandles,
-* } from '@likec4/diagram/custom'
+* } from 'likec4/react'
 *
 * const CustomCompoundElementNode = compoundElementNode(({ nodeProps, nodeModel }) => (
 *   <CompoundNodeContainer nodeProps={props}>
@@ -189,7 +202,7 @@ function compoundElementNode(component) {
 *   CompoundActions,
 *   CompoundDeploymentToolbar,
 *   DefaultHandles,
-* } from '@likec4/diagram/custom'
+* } from 'likec4/react'
 *
 * const CustomCompoundDeploymentNode = compoundDeploymentNode(({ nodeProps, nodeModel }) => (
 *   <CompoundNodeContainer nodeProps={nodeProps}>
@@ -221,7 +234,7 @@ function compoundDeploymentNode(component) {
 *   CompoundNodeContainer,
 *   CompoundTitle,
 *   DefaultHandles,
-* } from '@likec4/diagram/custom'
+* } from 'likec4/react'
 *
 * const CustomViewGroupNode = viewGroupNode(({ nodeProps, nodeModel }) => (
 *   <CompoundNodeContainer nodeProps={nodeProps}>
@@ -233,9 +246,375 @@ function compoundDeploymentNode(component) {
 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");
 
-//#endregion
-export { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode };
+export { compoundDeploymentNode, compoundElementNode, defaultNodeRenderer, defineNode, defineNodes, deploymentNode, elementNode, sequenceActorNode, viewGroupNode, wrapNode };

package/dist/custom/index.d.mts

@@ -1,6 +1,6 @@
-import { Base } from "../base/Base.mjs";
-import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseEdgePropsWithData, BaseNode, BaseNodeData, BaseNodeProps, BaseNodePropsWithData } from "../base/types.mjs";
-import { Types } from "../likec4diagram/types.mjs";
+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";
@@ -10,40 +10,25 @@ import { ElementActionButtons } from "../base-primitives/element/ElementActionBu
 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 { ElementShape } from "../base-primitives/element/ElementShape.mjs";
-import { ElementTag, ElementTags } from "../base-primitives/element/ElementTags.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 { memoEdge } from "../base-primitives/memoEdge.mjs";
-import { memoNode } from "../base-primitives/memoNode.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 "./builtins.mjs";
-import { CompoundDeploymentNodeProps, CompoundElementNodeProps, DeploymentNodeProps, ElementNodeProps, SequenceActorNodeProps, ViewGroupNodeProps, compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from "./customNodes.mjs";
-import { EnabledFeatures, FeatureName, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from "../context/DiagramFeatures.mjs";
-import { XYStoreState } from "../hooks/useXYFlow.mjs";
-import { DiagramApi } from "../likec4diagram/state/diagram-api.mjs";
-import { useDiagram, useDiagramActorRef } from "../hooks/safeContext.mjs";
-import { useDiagramContext, useOnDiagramEvent } from "../hooks/useDiagram.mjs";
-import { DiagramNodeWithNavigate, ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, NodeRenderers, OnCanvasClick, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, ViewPadding, WhereOperator } from "../LikeC4Diagram.props.mjs";
-import { Context, EmittedEvents, Events } from "../likec4diagram/state/machine.setup.mjs";
-import { DiagramMachineSnapshot } from "../likec4diagram/state/machine.mjs";
-import { DiagramActorRef } from "../likec4diagram/state/types.mjs";
-import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.mjs";
-import { useCurrentView, useCurrentViewId } from "../hooks/useCurrentView.mjs";
-import { CurrentViewModel, useOptionalCurrentViewModel, useOptionalLikeC4Model } from "../context/LikeC4ModelContext.mjs";
-import { useCurrentViewModel } from "../hooks/useCurrentViewModel.mjs";
-import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "../hooks/useLikeC4Model.mjs";
-import { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from "../hooks/useLikeC4Project.mjs";
-import { useLikeC4Styles } from "../hooks/useLikeC4Styles.mjs";
-import { useSetState } from "../hooks/useSetState.mjs";
-import { useUpdateEffect } from "../hooks/useUpdateEffect.mjs";
-import "./hooks.mjs";
-import "./primitives.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";
@@ -51,4 +36,7 @@ import { ErrorBoundary, ErrorFallback } from "../components/ErrorFallback.mjs";
 import { LikeC4MantineProvider } from "../LikeC4MantineProvider.mjs";
 import { LikeC4Styles } from "../LikeC4Styles.mjs";
 import { TagStylesProvider } from "../context/TagStylesContext.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 CurrentViewModel, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, DeploymentNodeProps, type DiagramActorRef, type DiagramMachineSnapshot as DiagramActorSnapshot, type DiagramApi, type Context as DiagramContext, type EmittedEvents as DiagramEmittedEvents, type Events as DiagramEvents, type DiagramNodeWithNavigate, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, type ElementIconRenderer, type ElementIconRendererProps, ElementNode, ElementNodeContainer, ElementNodeProps, ElementShape, ElementTag, ElementTags, ElementToolbar, type EnabledFeatures, ErrorBoundary, ErrorFallback, type FeatureName, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, type LikeC4ColorScheme, type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties, LikeC4MantineProvider, LikeC4Styles, Markdown, type NodeRenderers, type OnCanvasClick, type OnEdgeClick, type OnNavigateTo, type OnNodeClick, type OpenSourceParams, Overlay, type OverlayProps, type PaddingUnit, type PaddingWithUnit, PortalToContainer, SequenceActorNode, SequenceActorNodeProps, SequenceParallelArea, TagStylesProvider, Toolbar, type Types, ViewGroupNode, ViewGroupNodeProps, type ViewPadding, type WhereOperator, type XYStoreState, 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 };
+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 };

package/dist/custom/index.mjs

@@ -1,20 +1,11 @@
-import { useUpdateEffect } from "../hooks/useUpdateEffect.mjs";
+import { compoundDeploymentNode, compoundElementNode, defaultNodeRenderer, defineNode, defineNodes, deploymentNode, elementNode, sequenceActorNode, viewGroupNode, wrapNode } from "./customNodes.mjs";
 import { Base } from "../base/Base.mjs";
-import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.mjs";
-import { useSetState } from "../hooks/useSetState.mjs";
 import { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from "../context/DiagramFeatures.mjs";
-import { LikeC4MantineProvider } from "../LikeC4MantineProvider.mjs";
+import { Overlay } from "../overlays/overlay/Overlay.mjs";
+import { PortalToContainer } from "../components/PortalToContainer.mjs";
 import { FramerMotionConfig } from "../context/FramerMotionConfig.mjs";
-import { useDiagram, useDiagramActorRef } from "../hooks/safeContext.mjs";
-import { useDiagramContext, useOnDiagramEvent } from "../hooks/useDiagram.mjs";
-import { useCurrentView, useCurrentViewId } from "../hooks/useCurrentView.mjs";
-import { useOptionalCurrentViewModel, useOptionalLikeC4Model } from "../context/LikeC4ModelContext.mjs";
-import { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from "../hooks/useLikeC4Model.mjs";
-import { useLikeC4Styles } from "../hooks/useLikeC4Styles.mjs";
-import { TagStylesProvider } from "../context/TagStylesContext.mjs";
 import { ErrorBoundary, ErrorFallback } from "../components/ErrorFallback.mjs";
-import { useCurrentViewModel } from "../hooks/useCurrentViewModel.mjs";
-import { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from "../hooks/useLikeC4Project.mjs";
+import { LikeC4MantineProvider } from "../LikeC4MantineProvider.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";
@@ -26,19 +17,20 @@ import { ElementDetailsButton } from "../base-primitives/element/ElementDetailsB
 import { ElementNodeContainer } from "../base-primitives/element/ElementNodeContainer.mjs";
 import { ElementShape } from "../base-primitives/element/ElementShape.mjs";
 import { ElementTag, ElementTags } from "../base-primitives/element/ElementTags.mjs";
-import { memoEdge } from "../base-primitives/memoEdge.mjs";
-import { memoNode } from "../base-primitives/memoNode.mjs";
 import { DefaultHandles } from "../base-primitives/NodeHandles.mjs";
 import { CompoundActions } from "../likec4diagram/custom/nodes/CompoundActions.mjs";
 import { DeploymentElementActions, ElementActions } from "../likec4diagram/custom/nodes/ElementActions.mjs";
+import { GraphElementNode } from "../likec4diagram/custom/nodes/GraphElementNode.mjs";
+import { NodeDrifts } from "../likec4diagram/custom/nodes/NodeDrifts.mjs";
 import { Toolbar } from "../likec4diagram/custom/nodes/toolbar/Toolbar.mjs";
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from "../likec4diagram/custom/nodes/toolbar/CompoundToolbar.mjs";
 import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custom/nodes/toolbar/ElementToolbar.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 { compoundDeploymentNode, compoundElementNode, deploymentNode, elementNode, sequenceActorNode, viewGroupNode } from "./customNodes.mjs";
-import { Overlay } from "../overlays/overlay/Overlay.mjs";
-import { PortalToContainer } from "../components/PortalToContainer.mjs";
+import { SequenceSubflowArea } from "../likec4diagram/custom/nodes/SequenceSubFlow.mjs";
 import { LikeC4Styles } from "../LikeC4Styles.mjs";
+import { TagStylesProvider } from "../context/TagStylesContext.mjs";
+import { CustomizationProvider } from "../customization/CustomizationContext.mjs";
+import { defineCustomComponents } from "../customization/customizable.mjs";
 
-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, ErrorBoundary, ErrorFallback, FramerMotionConfig, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, LikeC4MantineProvider, LikeC4Styles, Markdown, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, TagStylesProvider, 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 };
+export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, CustomizationProvider, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, ErrorBoundary, ErrorFallback, FramerMotionConfig, GraphElementNode, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, LikeC4MantineProvider, LikeC4Styles, Markdown, NodeDrifts, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, SequenceSubflowArea, TagStylesProvider, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, defaultNodeRenderer, defineCustomComponents, defineNode, defineNodes, deploymentNode, elementNode, sequenceActorNode, useEnabledFeatures, viewGroupNode, wrapNode };

package/dist/custom/primitives.d.mts

@@ -6,11 +6,9 @@ import { ElementActionButtons } from "../base-primitives/element/ElementActionBu
 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 { ElementShape } from "../base-primitives/element/ElementShape.mjs";
-import { ElementTag, ElementTags } from "../base-primitives/element/ElementTags.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 { memoEdge } from "../base-primitives/memoEdge.mjs";
-import { memoNode } from "../base-primitives/memoNode.mjs";
 import { DefaultHandles } from "../base-primitives/NodeHandles.mjs";
 import "../base-primitives/index.mjs";
-export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementData, ElementDetailsButton, ElementNodeContainer, ElementShape, ElementTag, ElementTags, Markdown, memoEdge, memoNode };
+export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementData, ElementDetailsButton, ElementNodeContainer, ElementShape, type ElementShapeProps, ElementTag, type ElementTagProps, ElementTags, type ElementTagsProps, Markdown };

package/dist/customization/CustomizationContext.d.mts

@@ -0,0 +1,50 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { CustomComponents } from "./customization-types.mjs";
+import { PropsWithChildren } from "react";
+type CustomizationProviderProps = {
+  /**
+   * Slot overrides from {@link defineCustomComponents}.
+   * Prefer a module-scoped constant so the map identity stays stable across HMR.
+   */
+  components?: CustomComponents | undefined;
+};
+/**
+ * Provides UI slot overrides for registered customizable components
+ * (`LikeC4Diagram`, logos, …).
+ *
+ * Place this above the diagram tree (`LikeC4Diagram` / `ReactLikeC4` / `LikeC4View`).
+ * Ordering relative to `LikeC4ModelProvider` does not matter.
+ *
+ * Overrides support two modes:
+ * - **replace** — pass a component that receives the original props
+ * - **wrap** — use `wrap` from {@link defineCustomComponents}; receives `{ Original, ...props }`
+ *
+ * @experimental
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   CustomizationProvider,
+ *   defineCustomComponents,
+ * } from 'likec4/react'
+ *
+ * const components = defineCustomComponents(({ wrap }) => ({
+ *   LogoSvg: () => <span>Brand</span>,
+ *   LikeC4Diagram: wrap(({ Original, ...props }) => (
+ *     <Original {...props} pannable={false} />
+ *   )),
+ * }))
+ *
+ * function App() {
+ *   return (
+ *     <CustomizationProvider components={components}>
+ *       <LikeC4ModelProvider likec4model={model}>
+ *         <LikeC4View viewId="index" />
+ *       </LikeC4ModelProvider>
+ *     </CustomizationProvider>
+ *   )
+ * }
+ * ```
+ */
+export declare function CustomizationProvider({ components, children }: PropsWithChildren<CustomizationProviderProps>): import("react").JSX.Element;
+export {};