@salesforce/storefront-next-runtime 0.4.0-alpha.2 → 0.4.0-alpha.3

package/dist/ComponentContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentContext.js","names":[],"sources":["../src/design/react/core/RegionContext.tsx","../src/design/react/core/ComponentContext.tsx"],"sourcesContent":["/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nexport interface RegionContextType {\n    regionId: string;\n    componentIds: string[];\n}\n\nexport const RegionContext = React.createContext<RegionContextType | null>(null);\n\nexport const useRegionContext = (): RegionContextType | null => React.useContext(RegionContext);\n","/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nexport interface ComponentContextType {\n    componentId: string;\n    name?: string;\n}\n\nexport const ComponentContext = React.createContext<ComponentContextType | null>(null);\n\nexport const useComponentContext = (): ComponentContextType | null => React.useContext(ComponentContext);\n"],"mappings":";;;AAsBA,MAAa,gBAAgB,MAAM,cAAwC,KAAK;AAEhF,MAAa,yBAAmD,MAAM,WAAW,cAAc;;;;ACF/F,MAAa,mBAAmB,MAAM,cAA2C,KAAK;AAEtF,MAAa,4BAAyD,MAAM,WAAW,iBAAiB"}
+{"version":3,"file":"ComponentContext.js","names":[],"sources":["../src/design/react/core/RegionContext.tsx","../src/design/react/core/ComponentContext.tsx"],"sourcesContent":["/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nexport interface RegionContextType {\n    regionId: string;\n    contentLinkUuids: string[];\n}\n\nexport const RegionContext = React.createContext<RegionContextType | null>(null);\n\nexport const useRegionContext = (): RegionContextType | null => React.useContext(RegionContext);\n","/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nexport interface ComponentContextType {\n    componentId: string;\n    name?: string;\n    contentLinkUuid?: string;\n}\n\nexport const ComponentContext = React.createContext<ComponentContextType | null>(null);\n\nexport const useComponentContext = (): ComponentContextType | null => React.useContext(ComponentContext);\n"],"mappings":";;;AAsBA,MAAa,gBAAgB,MAAM,cAAwC,KAAK;AAEhF,MAAa,yBAAmD,MAAM,WAAW,cAAc;;;;ACD/F,MAAa,mBAAmB,MAAM,cAA2C,KAAK;AAEtF,MAAa,4BAAyD,MAAM,WAAW,iBAAiB"}

package/dist/DesignComponent.js

@@ -8,13 +8,13 @@ import React, { useCallback, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/design/react/hooks/useComponentDecoratorClasses.ts
-function useComponentDecoratorClasses({ componentId, isFragment, isLocalized }) {
-	const { selectedComponentId, hoveredComponentId, dragState } = useDesignState();
-	const isSelected = selectedComponentId === componentId;
-	const isHovered = !dragState.isDragging && hoveredComponentId === componentId;
+function useComponentDecoratorClasses({ contentLinkUuid, isFragment, isLocalized }) {
+	const { selectedContentLinkUuid, hoveredContentLinkUuid, dragState } = useDesignState();
+	const isSelected = selectedContentLinkUuid === contentLinkUuid;
+	const isHovered = !dragState.isDragging && hoveredContentLinkUuid === contentLinkUuid;
 	const showFrame = (isSelected || isHovered) && !dragState.isDragging;
-	const isMoving = dragState.isDragging && dragState.sourceComponentId === componentId;
-	const isDropTarget = dragState.currentDropTarget?.componentId === componentId;
+	const isMoving = dragState.isDragging && dragState.sourceContentLinkUuid === contentLinkUuid;
+	const isDropTarget = dragState.currentDropTarget?.contentLinkUuid === contentLinkUuid;
 	const dropTargetInsertType = dragState.currentDropTarget?.insertType;
 	const dropTargetAxis = dropTargetInsertType?.axis;
 	return [
@@ -32,17 +32,17 @@ function useComponentDecoratorClasses({ componentId, isFragment, isLocalized })
 //#endregion
 //#region src/design/react/hooks/useFocusedComponentHandler.ts
 /**
-* Focuses a component when the focused component id matches the component id.
-* @param componentId - The id of the component to focus.
+* Focuses a component when the focused component id matches the content link UUID.
+* @param contentLinkUuid - The content link UUID of the component.
 * @param nodeRef - The ref object to the node to focus.
 */
-function useFocusedComponentHandler(componentId, nodeRef) {
-	const { focusedComponentId, focusComponent } = useDesignState();
+function useFocusedComponentHandler(contentLinkUuid, nodeRef) {
+	const { focusedContentLinkUuid, focusComponent } = useDesignState();
 	React.useEffect(() => {
-		if (focusedComponentId === componentId && nodeRef.current) focusComponent(nodeRef.current);
+		if (focusedContentLinkUuid === contentLinkUuid && nodeRef.current) focusComponent(nodeRef.current);
 	}, [
-		focusedComponentId,
-		componentId,
+		focusedContentLinkUuid,
+		contentLinkUuid,
 		focusComponent,
 		nodeRef
 	]);
@@ -73,7 +73,7 @@ function useComponentInfo(componentId) {
 //#region src/design/react/components/DesignComponent.tsx
 function DesignComponent(props) {
 	const { designMetadata, children } = props;
-	const { id = "", name, isFragment = false, isVisible = true, isLocalized = false } = designMetadata ?? {};
+	const { id = "", contentLinkUuid = "", name, isFragment = false, isVisible = true, isLocalized = false } = designMetadata ?? {};
 	const componentId = id;
 	const componentType = useComponentType(componentId);
 	const componentInfo = useComponentInfo(componentId);
@@ -82,23 +82,31 @@ function DesignComponent(props) {
 	const dragRef = useRef(null);
 	const { regionId } = useRegionContext() ?? {};
 	const { componentId: parentComponentId } = useComponentContext() ?? {};
-	const { selectedComponentId, hoveredComponentId, setSelectedComponent, setHoveredComponent, startComponentMove, setPendingComponentDragId, dragState: { pendingComponentDragId, isDragging, sourceComponentId: draggingSourceComponentId } } = useDesignState();
-	useFocusedComponentHandler(componentId, dragRef);
+	const { selectedContentLinkUuid, hoveredContentLinkUuid, setSelectedComponent, setHoveredComponent, startComponentMove, setPendingDragContentLinkUuid, dragState: { pendingDragContentLinkUuid, isDragging, sourceContentLinkUuid: draggingSourceContentLinkUuid }, registerContentLink } = useDesignState();
+	React.useEffect(() => {
+		if (contentLinkUuid && componentId) registerContentLink(contentLinkUuid, componentId);
+	}, [
+		componentId,
+		contentLinkUuid,
+		registerContentLink
+	]);
+	useFocusedComponentHandler(contentLinkUuid, dragRef);
 	useNodeToTargetStore({
 		type: "component",
 		nodeRef: dragRef,
 		parentId: parentComponentId,
 		regionId,
-		componentId
+		componentId,
+		contentLinkUuid
 	});
 	const discoverComponents = useComponentDiscovery({ nodeToTargetMap });
-	const isPendingDrag = pendingComponentDragId === componentId;
+	const isPendingDrag = pendingDragContentLinkUuid === contentLinkUuid;
 	const findAndSetHoveredComponent = useCallback((x, y) => {
 		setHoveredComponent(discoverComponents({
 			x,
 			y,
 			filter: (entry) => entry.type === "component"
-		})[0]?.componentId ?? null);
+		})[0]?.contentLinkUuid ?? null);
 	}, [setHoveredComponent, discoverComponents]);
 	const handleMouseMove = useThrottledCallback((event) => {
 		event.stopPropagation();
@@ -110,35 +118,41 @@ function DesignComponent(props) {
 	}, [findAndSetHoveredComponent]);
 	const handleClick = useCallback((e) => {
 		e.stopPropagation();
-		setSelectedComponent(componentId);
-	}, [setSelectedComponent, componentId]);
-	const showFrame = [selectedComponentId, hoveredComponentId].includes(componentId) && !isDragging;
+		setSelectedComponent(contentLinkUuid ?? "");
+	}, [setSelectedComponent, contentLinkUuid]);
+	const showFrame = [selectedContentLinkUuid, hoveredContentLinkUuid].includes(contentLinkUuid ?? "") && !isDragging;
 	const isDraggable = Boolean(componentId && regionId && componentType?.id);
 	const classes = useComponentDecoratorClasses({
-		componentId,
+		contentLinkUuid,
 		isLocalized,
 		isFragment: Boolean(isFragment)
 	});
 	const context = React.useMemo(() => ({
 		componentId: id,
-		name
-	}), [id, name]);
+		name,
+		contentLinkUuid
+	}), [
+		id,
+		name,
+		contentLinkUuid
+	]);
 	const handleDragOver = React.useCallback((event) => {
-		if (draggingSourceComponentId !== componentId) event.preventDefault();
-	}, [draggingSourceComponentId, componentId]);
+		if (draggingSourceContentLinkUuid !== contentLinkUuid) event.preventDefault();
+	}, [draggingSourceContentLinkUuid, contentLinkUuid]);
 	const handleMouseDown = React.useCallback((event) => {
-		if (componentId) {
+		if (contentLinkUuid) {
 			event.stopPropagation();
-			setPendingComponentDragId(componentId);
+			setPendingDragContentLinkUuid(contentLinkUuid);
 		}
-	}, [componentId, setPendingComponentDragId]);
+	}, [contentLinkUuid, setPendingDragContentLinkUuid]);
 	const handleDragStart = React.useCallback((event) => {
 		event.stopPropagation();
-		if (componentId && regionId && componentType?.id) startComponentMove(componentId, regionId, componentType.id);
+		if (componentId && regionId && componentType?.id) startComponentMove(componentId, regionId, componentType.id, contentLinkUuid);
 	}, [
 		componentId,
 		regionId,
 		componentType?.id,
+		contentLinkUuid,
 		startComponentMove
 	]);
 	if (!isVisible) return /* @__PURE__ */ jsx(Fragment, {});
@@ -157,6 +171,7 @@ function DesignComponent(props) {
 		children: [/* @__PURE__ */ jsx("div", { className: "pd-design__component__drop-target" }), /* @__PURE__ */ jsx(DesignFrame, {
 			showFrame,
 			componentId,
+			contentLinkUuid,
 			localized: isLocalized,
 			name: componentName,
 			parentId: parentComponentId,

package/dist/DesignComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DesignComponent.js","names":[],"sources":["../src/design/react/hooks/useComponentDecoratorClasses.ts","../src/design/react/hooks/useFocusedComponentHandler.ts","../src/design/react/hooks/useComponentInfo.ts","../src/design/react/components/DesignComponent.tsx"],"sourcesContent":["/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useDesignState } from './useDesignState';\n\nexport function useComponentDecoratorClasses({\n    componentId,\n    isFragment,\n    isLocalized,\n}: {\n    componentId: string;\n    isFragment: boolean;\n    isLocalized: boolean;\n}): string {\n    const { selectedComponentId, hoveredComponentId, dragState } = useDesignState();\n\n    const isSelected = selectedComponentId === componentId;\n    const isHovered = !dragState.isDragging && hoveredComponentId === componentId;\n    const showFrame = (isSelected || isHovered) && !dragState.isDragging;\n    const isMoving = dragState.isDragging && dragState.sourceComponentId === componentId;\n    const isDropTarget = dragState.currentDropTarget?.componentId === componentId;\n    const dropTargetInsertType = dragState.currentDropTarget?.insertType;\n    const dropTargetAxis = dropTargetInsertType?.axis;\n\n    return [\n        'pd-design__decorator',\n        isFragment ? 'pd-design__fragment' : 'pd-design__component',\n        showFrame && 'pd-design__frame--visible',\n        isSelected && 'pd-design__decorator--selected',\n        isHovered && 'pd-design__decorator--hovered',\n        isMoving && 'pd-design__decorator--moving',\n        !isLocalized && 'pd-design__component--unlocalized',\n        isDropTarget &&\n            dropTargetAxis &&\n            dropTargetInsertType &&\n            `pd-design__drop-target__${dropTargetAxis}-${dropTargetInsertType.type}`,\n    ]\n        .filter(Boolean)\n        .join(' ');\n}\n","/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { useDesignState } from './useDesignState';\n\n/**\n * Focuses a component when the focused component id matches the component id.\n * @param componentId - The id of the component to focus.\n * @param nodeRef - The ref object to the node to focus.\n */\nexport function useFocusedComponentHandler(componentId: string, nodeRef: React.RefObject<Element | null>): void {\n    const { focusedComponentId, focusComponent } = useDesignState();\n\n    React.useEffect(() => {\n        if (focusedComponentId === componentId && nodeRef.current) {\n            focusComponent(nodeRef.current);\n        }\n    }, [focusedComponentId, componentId, focusComponent, nodeRef]);\n}\n","/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { ComponentInfo } from '../../messaging-api';\nimport { useDesignContext } from '../context/DesignContext';\nimport { useDesignState } from './useDesignState';\n\n/**\n * Hook that returns the current ComponentInfo for a given component ID,\n * merging the base config with any runtime updates.\n *\n * @param componentId - The ID of the component to get info for\n * @returns The merged ComponentInfo or null if the component doesn't exist\n */\nexport function useComponentInfo(componentId: string): ComponentInfo | null {\n    const { pageDesignerConfig } = useDesignContext();\n    const { componentUpdates } = useDesignState();\n    const baseComponentInfo = pageDesignerConfig?.components?.[componentId];\n    const updates = componentUpdates?.[componentId] ?? {};\n\n    if (!baseComponentInfo) {\n        return null;\n    }\n\n    return { ...baseComponentInfo, ...updates };\n}\n","/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useRef, useCallback } from 'react';\nimport type { ComponentDecoratorProps } from '../core/component.types';\nimport { useComponentDecoratorClasses } from '../hooks/useComponentDecoratorClasses';\nimport { useDesignState } from '../hooks/useDesignState';\nimport { useFocusedComponentHandler } from '../hooks/useFocusedComponentHandler';\nimport { useNodeToTargetStore } from '../hooks/useNodeToTargetStore';\nimport { DesignFrame } from './DesignFrame';\nimport { useRegionContext } from '../core/RegionContext';\nimport { ComponentContext, useComponentContext, type ComponentContextType } from '../core/ComponentContext';\nimport { useComponentDiscovery } from '../hooks/useComponentDiscovery';\nimport { useComponentType } from '../hooks/useComponentType';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { useComponentInfo } from '../hooks/useComponentInfo';\n\nexport function DesignComponent(props: ComponentDecoratorProps<unknown>): React.JSX.Element {\n    const { designMetadata, children } = props;\n    const { id = '', name, isFragment = false, isVisible = true, isLocalized = false } = designMetadata ?? {};\n    const componentId = id;\n    const componentType = useComponentType(componentId);\n    const componentInfo = useComponentInfo(componentId);\n    const { nodeToTargetMap } = useDesignState();\n\n    const componentName = componentInfo?.name || componentType?.label || name || 'Component';\n    const dragRef = useRef<HTMLDivElement>(null);\n    const { regionId } = useRegionContext() ?? {};\n    const { componentId: parentComponentId } = useComponentContext() ?? {};\n\n    const {\n        selectedComponentId,\n        hoveredComponentId,\n        setSelectedComponent,\n        setHoveredComponent,\n        startComponentMove,\n        setPendingComponentDragId,\n        dragState: { pendingComponentDragId, isDragging, sourceComponentId: draggingSourceComponentId },\n    } = useDesignState();\n\n    useFocusedComponentHandler(componentId, dragRef);\n    useNodeToTargetStore({\n        type: 'component',\n        nodeRef: dragRef,\n        parentId: parentComponentId,\n        regionId,\n        componentId,\n    });\n\n    const discoverComponents = useComponentDiscovery({\n        nodeToTargetMap,\n    });\n\n    const isPendingDrag = pendingComponentDragId === componentId;\n    const findAndSetHoveredComponent = useCallback(\n        (x: number, y: number) => {\n            // If we hover off a component, we could still be hovering over a parent component\n            // that contains that child. In this instance, the mouse enter doesn't fire and that parent\n            // would not be highlighted. Everytime we leave a component, we check\n            // if we are hovering over a component at those coordinates. If we are,\n            // we set the hovered component to that component.\n            const components = discoverComponents({\n                x,\n                y,\n                filter: (entry) => entry.type === 'component',\n            });\n\n            setHoveredComponent(components[0]?.componentId ?? null);\n        },\n        [setHoveredComponent, discoverComponents]\n    );\n\n    const handleMouseMove = useThrottledCallback(\n        (event: React.MouseEvent) => {\n            event.stopPropagation();\n            findAndSetHoveredComponent(event.clientX, event.clientY);\n        },\n        1000 / 60, // 60 FPS\n        [findAndSetHoveredComponent]\n    );\n\n    const handleMouseLeave = useCallback(\n        (event: React.MouseEvent) => {\n            event.stopPropagation();\n            findAndSetHoveredComponent(event.clientX, event.clientY);\n        },\n        [findAndSetHoveredComponent]\n    );\n\n    const handleClick = useCallback(\n        (e: React.MouseEvent) => {\n            e.stopPropagation();\n            setSelectedComponent(componentId);\n        },\n        [setSelectedComponent, componentId]\n    );\n\n    const showFrame = [selectedComponentId, hoveredComponentId].includes(componentId) && !isDragging;\n    const isDraggable = Boolean(componentId && regionId && componentType?.id);\n\n    const classes = useComponentDecoratorClasses({\n        componentId,\n        isLocalized,\n        isFragment: Boolean(isFragment),\n    });\n\n    const context = React.useMemo<ComponentContextType>(() => ({ componentId: id, name }), [id, name]);\n\n    // Makes the component a drop target.\n    const handleDragOver = React.useCallback(\n        (event: React.DragEvent<HTMLDivElement>) => {\n            // Don't prevent propagation here.\n            // We depend on the global listener to handle the drag over event.\n            // If we are moving a component, don't let it be droppable on itself.\n            if (draggingSourceComponentId !== componentId) {\n                event.preventDefault();\n            }\n        },\n        [draggingSourceComponentId, componentId]\n    );\n\n    // When dragging, we don't consider the component as dragging until the drag start event\n    // is triggered. However, we need to mark the component as draggable on mouse down so that\n    // it can even be dragged via the native drag and drop API.\n    //\n    // If we were to mark the components as dragging on mouse down instead, a selection of a component\n    // would first remove the frame because this thinks we are dragging the component instead of selecting it.\n    // This is why it is split up into two events.\n    const handleMouseDown = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (componentId) {\n                event.stopPropagation();\n                setPendingComponentDragId(componentId);\n            }\n        },\n        [componentId, setPendingComponentDragId]\n    );\n\n    const handleDragStart = React.useCallback(\n        (event: React.DragEvent) => {\n            event.stopPropagation();\n\n            if (componentId && regionId && componentType?.id) {\n                startComponentMove(componentId, regionId, componentType.id);\n            }\n        },\n        [componentId, regionId, componentType?.id, startComponentMove]\n    );\n\n    // Don't render anything if the components is hidden via visibility rules.\n    // We still want the component to be reactive in case the use changes the\n    // visibility rules or the render context.\n    if (!isVisible) {\n        return <></>;\n    }\n\n    return (\n        <div\n            ref={dragRef}\n            className={classes}\n            draggable={isPendingDrag && isDraggable}\n            onClick={handleClick}\n            onDragOver={handleDragOver}\n            onDragStart={handleDragStart}\n            onMouseMove={handleMouseMove}\n            onMouseLeave={handleMouseLeave}\n            onMouseDown={handleMouseDown}\n            data-component-type={componentType?.id}\n            data-testid={`design-component-${componentId}`}>\n            <div className=\"pd-design__component__drop-target\" />\n            <DesignFrame\n                showFrame={showFrame}\n                componentId={componentId}\n                localized={isLocalized}\n                name={componentName}\n                parentId={parentComponentId}\n                isMoveable={isDraggable}\n                regionId={regionId}>\n                <ComponentContext.Provider value={context}>{children}</ComponentContext.Provider>\n            </DesignFrame>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DesignComponent.js","names":[],"sources":["../src/design/react/hooks/useComponentDecoratorClasses.ts","../src/design/react/hooks/useFocusedComponentHandler.ts","../src/design/react/hooks/useComponentInfo.ts","../src/design/react/components/DesignComponent.tsx"],"sourcesContent":["/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useDesignState } from './useDesignState';\n\nexport function useComponentDecoratorClasses({\n    contentLinkUuid,\n    isFragment,\n    isLocalized,\n}: {\n    contentLinkUuid: string;\n    isFragment: boolean;\n    isLocalized: boolean;\n}): string {\n    const { selectedContentLinkUuid, hoveredContentLinkUuid, dragState } = useDesignState();\n\n    const isSelected = selectedContentLinkUuid === contentLinkUuid;\n    const isHovered = !dragState.isDragging && hoveredContentLinkUuid === contentLinkUuid;\n    const showFrame = (isSelected || isHovered) && !dragState.isDragging;\n    const isMoving = dragState.isDragging && dragState.sourceContentLinkUuid === contentLinkUuid;\n    const isDropTarget = dragState.currentDropTarget?.contentLinkUuid === contentLinkUuid;\n    const dropTargetInsertType = dragState.currentDropTarget?.insertType;\n    const dropTargetAxis = dropTargetInsertType?.axis;\n\n    return [\n        'pd-design__decorator',\n        isFragment ? 'pd-design__fragment' : 'pd-design__component',\n        showFrame && 'pd-design__frame--visible',\n        isSelected && 'pd-design__decorator--selected',\n        isHovered && 'pd-design__decorator--hovered',\n        isMoving && 'pd-design__decorator--moving',\n        !isLocalized && 'pd-design__component--unlocalized',\n        isDropTarget &&\n            dropTargetAxis &&\n            dropTargetInsertType &&\n            `pd-design__drop-target__${dropTargetAxis}-${dropTargetInsertType.type}`,\n    ]\n        .filter(Boolean)\n        .join(' ');\n}\n","/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { useDesignState } from './useDesignState';\n\n/**\n * Focuses a component when the focused component id matches the content link UUID.\n * @param contentLinkUuid - The content link UUID of the component.\n * @param nodeRef - The ref object to the node to focus.\n */\nexport function useFocusedComponentHandler(contentLinkUuid: string, nodeRef: React.RefObject<Element | null>): void {\n    const { focusedContentLinkUuid, focusComponent } = useDesignState();\n\n    React.useEffect(() => {\n        if (focusedContentLinkUuid === contentLinkUuid && nodeRef.current) {\n            focusComponent(nodeRef.current);\n        }\n    }, [focusedContentLinkUuid, contentLinkUuid, focusComponent, nodeRef]);\n}\n","/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { ComponentInfo } from '../../messaging-api';\nimport { useDesignContext } from '../context/DesignContext';\nimport { useDesignState } from './useDesignState';\n\n/**\n * Hook that returns the current ComponentInfo for a given component ID,\n * merging the base config with any runtime updates.\n *\n * @param componentId - The ID of the component to get info for\n * @returns The merged ComponentInfo or null if the component doesn't exist\n */\nexport function useComponentInfo(componentId: string): ComponentInfo | null {\n    const { pageDesignerConfig } = useDesignContext();\n    const { componentUpdates } = useDesignState();\n    const baseComponentInfo = pageDesignerConfig?.components?.[componentId];\n    const updates = componentUpdates?.[componentId] ?? {};\n\n    if (!baseComponentInfo) {\n        return null;\n    }\n\n    return { ...baseComponentInfo, ...updates };\n}\n","/**\n * Copyright 2026 Salesforce, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useRef, useCallback } from 'react';\nimport type { ComponentDecoratorProps } from '../core/component.types';\nimport { useComponentDecoratorClasses } from '../hooks/useComponentDecoratorClasses';\nimport { useDesignState } from '../hooks/useDesignState';\nimport { useFocusedComponentHandler } from '../hooks/useFocusedComponentHandler';\nimport { useNodeToTargetStore } from '../hooks/useNodeToTargetStore';\nimport { DesignFrame } from './DesignFrame';\nimport { useRegionContext } from '../core/RegionContext';\nimport { ComponentContext, useComponentContext, type ComponentContextType } from '../core/ComponentContext';\nimport { useComponentDiscovery } from '../hooks/useComponentDiscovery';\nimport { useComponentType } from '../hooks/useComponentType';\nimport { useThrottledCallback } from '../hooks/useThrottledCallback';\nimport { useComponentInfo } from '../hooks/useComponentInfo';\n\nexport function DesignComponent(props: ComponentDecoratorProps<unknown>): React.JSX.Element {\n    const { designMetadata, children } = props;\n    const {\n        id = '',\n        contentLinkUuid = '',\n        name,\n        isFragment = false,\n        isVisible = true,\n        isLocalized = false,\n    } = designMetadata ?? {};\n    const componentId = id;\n    const componentType = useComponentType(componentId);\n    const componentInfo = useComponentInfo(componentId);\n    const { nodeToTargetMap } = useDesignState();\n\n    const componentName = componentInfo?.name || componentType?.label || name || 'Component';\n    const dragRef = useRef<HTMLDivElement>(null);\n    const { regionId } = useRegionContext() ?? {};\n    const { componentId: parentComponentId } = useComponentContext() ?? {};\n\n    const {\n        selectedContentLinkUuid,\n        hoveredContentLinkUuid,\n        setSelectedComponent,\n        setHoveredComponent,\n        startComponentMove,\n        setPendingDragContentLinkUuid,\n        dragState: { pendingDragContentLinkUuid, isDragging, sourceContentLinkUuid: draggingSourceContentLinkUuid },\n        registerContentLink,\n    } = useDesignState();\n\n    React.useEffect(() => {\n        if (contentLinkUuid && componentId) {\n            registerContentLink(contentLinkUuid, componentId);\n        }\n    }, [componentId, contentLinkUuid, registerContentLink]);\n\n    useFocusedComponentHandler(contentLinkUuid, dragRef);\n    useNodeToTargetStore({\n        type: 'component',\n        nodeRef: dragRef,\n        parentId: parentComponentId,\n        regionId,\n        componentId,\n        contentLinkUuid,\n    });\n\n    const discoverComponents = useComponentDiscovery({\n        nodeToTargetMap,\n    });\n\n    const isPendingDrag = pendingDragContentLinkUuid === contentLinkUuid;\n    const findAndSetHoveredComponent = useCallback(\n        (x: number, y: number) => {\n            // If we hover off a component, we could still be hovering over a parent component\n            // that contains that child. In this instance, the mouse enter doesn't fire and that parent\n            // would not be highlighted. Everytime we leave a component, we check\n            // if we are hovering over a component at those coordinates. If we are,\n            // we set the hovered component to that component.\n            const components = discoverComponents({\n                x,\n                y,\n                filter: (entry) => entry.type === 'component',\n            });\n\n            setHoveredComponent(components[0]?.contentLinkUuid ?? null);\n        },\n        [setHoveredComponent, discoverComponents]\n    );\n\n    const handleMouseMove = useThrottledCallback(\n        (event: React.MouseEvent) => {\n            event.stopPropagation();\n            findAndSetHoveredComponent(event.clientX, event.clientY);\n        },\n        1000 / 60, // 60 FPS\n        [findAndSetHoveredComponent]\n    );\n\n    const handleMouseLeave = useCallback(\n        (event: React.MouseEvent) => {\n            event.stopPropagation();\n            findAndSetHoveredComponent(event.clientX, event.clientY);\n        },\n        [findAndSetHoveredComponent]\n    );\n\n    const handleClick = useCallback(\n        (e: React.MouseEvent) => {\n            e.stopPropagation();\n            setSelectedComponent(contentLinkUuid ?? '');\n        },\n        [setSelectedComponent, contentLinkUuid]\n    );\n\n    const showFrame = [selectedContentLinkUuid, hoveredContentLinkUuid].includes(contentLinkUuid ?? '') && !isDragging;\n    const isDraggable = Boolean(componentId && regionId && componentType?.id);\n\n    const classes = useComponentDecoratorClasses({\n        contentLinkUuid,\n        isLocalized,\n        isFragment: Boolean(isFragment),\n    });\n\n    const context = React.useMemo<ComponentContextType>(\n        () => ({ componentId: id, name, contentLinkUuid }),\n        [id, name, contentLinkUuid]\n    );\n\n    // Makes the component a drop target.\n    const handleDragOver = React.useCallback(\n        (event: React.DragEvent<HTMLDivElement>) => {\n            // Don't prevent propagation here.\n            // We depend on the global listener to handle the drag over event.\n            // If we are moving a component, don't let it be droppable on itself.\n            // Compare by contentLinkUuid to handle duplicate components correctly.\n            if (draggingSourceContentLinkUuid !== contentLinkUuid) {\n                event.preventDefault();\n            }\n        },\n        [draggingSourceContentLinkUuid, contentLinkUuid]\n    );\n\n    // When dragging, we don't consider the component as dragging until the drag start event\n    // is triggered. However, we need to mark the component as draggable on mouse down so that\n    // it can even be dragged via the native drag and drop API.\n    //\n    // If we were to mark the components as dragging on mouse down instead, a selection of a component\n    // would first remove the frame because this thinks we are dragging the component instead of selecting it.\n    // This is why it is split up into two events.\n    const handleMouseDown = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (contentLinkUuid) {\n                event.stopPropagation();\n                setPendingDragContentLinkUuid(contentLinkUuid);\n            }\n        },\n        [contentLinkUuid, setPendingDragContentLinkUuid]\n    );\n\n    const handleDragStart = React.useCallback(\n        (event: React.DragEvent) => {\n            event.stopPropagation();\n\n            if (componentId && regionId && componentType?.id) {\n                startComponentMove(componentId, regionId, componentType.id, contentLinkUuid);\n            }\n        },\n        [componentId, regionId, componentType?.id, contentLinkUuid, startComponentMove]\n    );\n\n    // Don't render anything if the components is hidden via visibility rules.\n    // We still want the component to be reactive in case the use changes the\n    // visibility rules or the render context.\n    if (!isVisible) {\n        return <></>;\n    }\n\n    return (\n        <div\n            ref={dragRef}\n            className={classes}\n            draggable={isPendingDrag && isDraggable}\n            onClick={handleClick}\n            onDragOver={handleDragOver}\n            onDragStart={handleDragStart}\n            onMouseMove={handleMouseMove}\n            onMouseLeave={handleMouseLeave}\n            onMouseDown={handleMouseDown}\n            data-component-type={componentType?.id}\n            data-testid={`design-component-${componentId}`}>\n            <div className=\"pd-design__component__drop-target\" />\n            <DesignFrame\n                showFrame={showFrame}\n                componentId={componentId}\n                contentLinkUuid={contentLinkUuid}\n                localized={isLocalized}\n                name={componentName}\n                parentId={parentComponentId}\n                isMoveable={isDraggable}\n                regionId={regionId}>\n                <ComponentContext.Provider value={context}>{children}</ComponentContext.Provider>\n            </DesignFrame>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/DesignContext.js

@@ -37,28 +37,29 @@ function useInteraction(config) {
 * Custom hook that manages component selection state and handles
 * client-host communication for selection events.
 *
-* @param isDesignMode - Whether design mode is active
-* @param clientApi - Client API for host communication
 * @returns Selection state and interaction methods
 */
-function useSelectInteraction() {
-	const { state: selectedComponentId, setSelectedComponent } = useInteraction({
+function useSelectInteraction({ contentLinkMap }) {
+	const { state: selectedContentLinkUuid, setSelectedComponent } = useInteraction({
 		initialState: "",
 		eventHandlers: {
 			ComponentSelected: { handler: (event, setState) => {
-				setState(event.componentId);
+				setState(event.contentLinkUuid);
 			} },
 			ComponentDeselected: { handler: (_, setState) => {
 				setState("");
 			} }
 		},
-		actions: (_state, setState, clientApi) => ({ setSelectedComponent: (componentId) => {
-			setState(componentId);
-			clientApi?.selectComponent({ componentId });
+		actions: (_state, setState, clientApi) => ({ setSelectedComponent: (contentLinkUuid) => {
+			setState(contentLinkUuid);
+			clientApi?.selectComponent({
+				componentId: contentLinkMap[contentLinkUuid] ?? "",
+				contentLinkUuid
+			});
 		} })
 	});
 	return {
-		selectedComponentId,
+		selectedContentLinkUuid,
 		setSelectedComponent
 	};
 }
@@ -71,34 +72,40 @@ function useSelectInteraction() {
 *
 * @returns Hover state and interaction methods
 */
-function useHoverInteraction() {
-	const { state: hoveredComponentId, setHoveredComponent } = useInteraction({
+function useHoverInteraction({ contentLinkMap }) {
+	const { state: hoveredContentLinkUuid, setHoveredComponent } = useInteraction({
 		initialState: null,
 		eventHandlers: {
-			ComponentHoveredIn: { handler: (event, setState) => setState(event.componentId) },
+			ComponentHoveredIn: { handler: (event, setState) => setState(event.contentLinkUuid) },
 			ComponentHoveredOut: { handler: (_, setState) => setState(null) }
 		},
-		actions: (state, setState, clientApi) => ({ setHoveredComponent: (componentId) => {
-			if (state && componentId !== state) clientApi?.hoverOutOfComponent({ componentId: state });
-			if (componentId && componentId !== state) clientApi?.hoverInToComponent({ componentId });
-			setState(componentId);
+		actions: (state, setState, clientApi) => ({ setHoveredComponent: (componentUuid) => {
+			if (state && componentUuid !== state) clientApi?.hoverOutOfComponent({
+				componentId: contentLinkMap[state] ?? state,
+				contentLinkUuid: state
+			});
+			if (componentUuid && componentUuid !== state) clientApi?.hoverInToComponent({
+				componentId: contentLinkMap[componentUuid] ?? null,
+				contentLinkUuid: componentUuid
+			});
+			setState(componentUuid);
 		} })
 	});
 	return {
-		hoveredComponentId,
+		hoveredContentLinkUuid,
 		setHoveredComponent
 	};
 }
 
 //#endregion
 //#region src/design/react/hooks/useDeleteInteraction.ts
-function useDeleteInteraction({ selectedComponentId, setSelectedComponent }) {
+function useDeleteInteraction({ selectedContentLinkUuid, setSelectedComponent }) {
 	const { deleteComponent } = useInteraction({
 		initialState: null,
 		eventHandlers: {},
 		actions: (_state, _setState, clientApi) => ({ deleteComponent: (event) => {
 			clientApi?.deleteComponent(event);
-			if (selectedComponentId === event.componentId) setSelectedComponent("");
+			if (selectedContentLinkUuid === event.contentLinkUuid) setSelectedComponent("");
 		} })
 	});
 	return { deleteComponent };
@@ -107,11 +114,11 @@ function useDeleteInteraction({ selectedComponentId, setSelectedComponent }) {
 //#endregion
 //#region src/design/react/hooks/useFocusInteraction.ts
 function useFocusInteraction({ setSelectedComponent }) {
-	const { state: focusedComponentId, focusComponent } = useInteraction({
+	const { state: focusedContentLinkUuid, focusComponent } = useInteraction({
 		initialState: null,
 		eventHandlers: { ComponentFocused: { handler: (event, setState) => {
 			setSelectedComponent("");
-			setState(event.componentId);
+			setState(event.contentLinkUuid);
 		} } },
 		actions: (_state, setState) => ({ focusComponent: (node) => {
 			node.scrollIntoView();
@@ -119,7 +126,7 @@ function useFocusInteraction({ setSelectedComponent }) {
 		} })
 	});
 	return {
-		focusedComponentId,
+		focusedContentLinkUuid,
 		focusComponent
 	};
 }
@@ -237,10 +244,10 @@ function getInsertionType({ cache, node, x, y }) {
 		type: relativeDeltaY < 0 ? "before" : "after"
 	};
 }
-function isOnSelfDropTarget({ sourceComponentId, beforeComponentId, afterComponentId, insertType, componentId }) {
-	const isOnSource = sourceComponentId && componentId === sourceComponentId;
-	const isOnSameRegionBefore = sourceComponentId && insertType.type === "before" && beforeComponentId === sourceComponentId;
-	const isOnSameRegionAfter = sourceComponentId && insertType.type === "after" && afterComponentId === sourceComponentId;
+function isOnSelfDropTarget({ sourceContentLinkUuid, beforeContentLinkUuid, afterContentLinkUuid, insertType, contentLinkUuid }) {
+	const isOnSource = sourceContentLinkUuid && contentLinkUuid === sourceContentLinkUuid;
+	const isOnSameRegionBefore = sourceContentLinkUuid && insertType.type === "before" && beforeContentLinkUuid === sourceContentLinkUuid;
+	const isOnSameRegionAfter = sourceContentLinkUuid && insertType.type === "after" && afterContentLinkUuid === sourceContentLinkUuid;
 	return isOnSource || isOnSameRegionBefore || isOnSameRegionAfter;
 }
 function useDragInteraction({ nodeToTargetMap }) {
@@ -267,9 +274,9 @@ function useDragInteraction({ nodeToTargetMap }) {
 			region
 		};
 	}, [discoverComponents]);
-	const getInsertionComponentIds = (componentId, region) => {
-		const componentIndex = region.componentIds.indexOf(componentId);
-		return [region.componentIds[componentIndex - 1], region.componentIds[componentIndex + 1]];
+	const getInsertionComponentUuids = (contentLinkUuid, region) => {
+		const componentIndex = region.contentLinkUuids.indexOf(contentLinkUuid);
+		return [region.contentLinkUuids[componentIndex - 1], region.contentLinkUuids[componentIndex + 1]];
 	};
 	const getCurrentDropTarget = useCallback(({ x, y, rectCache, componentType }) => {
 		const { component, region } = getNearestComponentAndRegion(x, y);
@@ -284,16 +291,17 @@ function useDragInteraction({ nodeToTargetMap }) {
 				axis: "y",
 				type: "after"
 			};
-			const [beforeComponentId, afterComponentId] = component ? getInsertionComponentIds(component.componentId, region) : [];
+			const componentContentLinkUuid = component?.contentLinkUuid ?? "";
+			const [beforeContentLinkUuid, afterContentLinkUuid] = component ? getInsertionComponentUuids(componentContentLinkUuid, region) : [];
 			return {
 				type: component ? "component" : "region",
 				regionId: region.regionId,
-				componentIds: region.componentIds,
 				componentId: component?.componentId ?? "",
+				contentLinkUuid: componentContentLinkUuid,
 				parentId: region.parentId,
-				beforeComponentId,
-				afterComponentId,
-				insertComponentId: component?.componentId,
+				beforeContentLinkUuid,
+				afterContentLinkUuid,
+				insertContentLinkUuid: componentContentLinkUuid,
 				insertType,
 				componentTypeInclusions: region.componentTypeInclusions,
 				componentTypeExclusions: region.componentTypeExclusions
@@ -314,18 +322,19 @@ function useDragInteraction({ nodeToTargetMap }) {
 		return 0;
 	};
 	const scrollFactorRef = useRef(0);
-	const { state: dragState, commitCurrentDropTarget, updateComponentMove, startComponentMove, dropComponent, cancelDrag, setPendingComponentDragId } = useInteraction({
+	const { state: dragState, commitCurrentDropTarget, updateComponentMove, startComponentMove, dropComponent, cancelDrag, setPendingDragContentLinkUuid } = useInteraction({
 		initialState: {
 			isDragging: false,
 			componentType: "",
-			sourceComponentId: void 0,
+			fragmentId: void 0,
+			sourceContentLinkUuid: void 0,
 			sourceRegionId: void 0,
 			x: 0,
 			y: 0,
 			currentDropTarget: null,
 			pendingTargetCommit: false,
 			rectCache: /* @__PURE__ */ new WeakMap(),
-			pendingComponentDragId: null
+			pendingDragContentLinkUuid: null
 		},
 		eventHandlers: {
 			ComponentDragStarted: { handler: (event, setState) => {
@@ -333,7 +342,8 @@ function useDragInteraction({ nodeToTargetMap }) {
 				setState((prevState) => ({
 					...prevState,
 					componentType: event.componentType,
-					sourceComponentId: void 0,
+					fragmentId: event.fragmentId,
+					sourceContentLinkUuid: void 0,
 					sourceRegionId: void 0,
 					x: 0,
 					y: 0,
@@ -393,7 +403,7 @@ function useDragInteraction({ nodeToTargetMap }) {
 					y: 0,
 					scrollDirection: 0,
 					isDragging: false,
-					pendingComponentDragId: null
+					pendingDragContentLinkUuid: null
 				}));
 			},
 			updateComponentMove: ({ x, y }) => {
@@ -414,10 +424,10 @@ function useDragInteraction({ nodeToTargetMap }) {
 					})
 				}));
 			},
-			setPendingComponentDragId: (componentId) => {
+			setPendingDragContentLinkUuid: (contentLinkUuid) => {
 				setState((prevState) => ({
 					...prevState,
-					pendingComponentDragId: componentId
+					pendingDragContentLinkUuid: contentLinkUuid
 				}));
 			},
 			dropComponent: () => {
@@ -427,14 +437,14 @@ function useDragInteraction({ nodeToTargetMap }) {
 					pendingTargetCommit: true
 				}));
 			},
-			startComponentMove: (componentId, regionId, componentType) => {
+			startComponentMove: (componentId, regionId, componentType, contentLinkUuid) => {
 				scrollFactorRef.current = 0;
 				setState((prevState) => ({
 					...prevState,
 					x: 0,
 					y: 0,
 					componentType,
-					sourceComponentId: componentId,
+					sourceContentLinkUuid: contentLinkUuid,
 					sourceRegionId: regionId,
 					isDragging: true,
 					scrollDirection: 0,
@@ -443,31 +453,33 @@ function useDragInteraction({ nodeToTargetMap }) {
 			},
 			commitCurrentDropTarget: () => {
 				if (state.currentDropTarget) {
-					if (state.sourceComponentId) {
+					if (state.sourceContentLinkUuid) {
 						if (!isOnSelfDropTarget({
-							sourceComponentId: state.sourceComponentId,
-							beforeComponentId: state.currentDropTarget.beforeComponentId,
-							afterComponentId: state.currentDropTarget.afterComponentId,
+							sourceContentLinkUuid: state.sourceContentLinkUuid,
+							beforeContentLinkUuid: state.currentDropTarget.beforeContentLinkUuid,
+							afterContentLinkUuid: state.currentDropTarget.afterContentLinkUuid,
 							insertType: state.currentDropTarget.insertType,
-							componentId: state.currentDropTarget.componentId
+							contentLinkUuid: state.currentDropTarget.contentLinkUuid ?? ""
 						})) clientApi?.moveComponentToRegion({
-							componentId: state.sourceComponentId,
+							componentId: state.currentDropTarget.componentId ?? "",
+							contentLinkUuid: state.sourceContentLinkUuid,
 							sourceRegionId: state.sourceRegionId ?? "",
 							insertType: state.currentDropTarget.insertType?.type,
-							insertComponentId: state.currentDropTarget.insertComponentId,
-							beforeComponentId: state.currentDropTarget.beforeComponentId,
-							afterComponentId: state.currentDropTarget.afterComponentId,
+							insertComponentId: state.currentDropTarget.insertContentLinkUuid,
+							beforeComponentId: state.currentDropTarget.beforeContentLinkUuid,
+							afterComponentId: state.currentDropTarget.afterContentLinkUuid,
 							targetRegionId: state.currentDropTarget.regionId,
 							targetComponentId: state.currentDropTarget.parentId ?? ""
 						});
-					} else if (state.componentType) clientApi?.addComponentToRegion({
+					} else if (state.componentType || state.fragmentId) clientApi?.addComponentToRegion({
 						insertType: state.currentDropTarget.insertType?.type,
-						insertComponentId: state.currentDropTarget.insertComponentId,
+						insertComponentId: state.currentDropTarget.insertContentLinkUuid,
+						beforeComponentId: state.currentDropTarget.beforeContentLinkUuid,
 						componentProperties: {},
-						componentType: state.componentType,
+						componentType: state.fragmentId ? "" : state.componentType ?? "",
+						fragmentId: state.fragmentId,
 						targetComponentId: state.currentDropTarget.parentId ?? "",
-						beforeComponentId: state.currentDropTarget.beforeComponentId,
-						afterComponentId: state.currentDropTarget.afterComponentId,
+						afterComponentId: state.currentDropTarget.afterContentLinkUuid,
 						targetRegionId: state.currentDropTarget.regionId
 					});
 				}
@@ -478,9 +490,9 @@ function useDragInteraction({ nodeToTargetMap }) {
 					y: 0,
 					componentType: "",
 					scrollDirection: 0,
-					sourceComponentId: void 0,
+					sourceContentLinkUuid: void 0,
 					sourceRegionId: void 0,
-					pendingComponentDragId: null,
+					pendingDragContentLinkUuid: null,
 					currentDropTarget: null,
 					pendingTargetCommit: false
 				}));
@@ -501,7 +513,7 @@ function useDragInteraction({ nodeToTargetMap }) {
 	}, [dragState.scrollDirection, scrollFactorRef]);
 	return {
 		dragState,
-		setPendingComponentDragId,
+		setPendingDragContentLinkUuid,
 		commitCurrentDropTarget,
 		startComponentMove,
 		updateComponentMove,
@@ -556,10 +568,20 @@ function useComponentUpdateInteraction() {
 //#region src/design/react/context/DesignStateContext.tsx
 const DesignStateContext = React.createContext(null);
 const DesignStateProvider = ({ children }) => {
-	const selectInteraction = useSelectInteraction();
-	const hoverInteraction = useHoverInteraction();
+	const [contentLinkMap, setContentLinkMap] = React.useState({});
+	const registerContentLink = React.useCallback((contentLinkUuid, componentId) => {
+		setContentLinkMap((prev) => {
+			if (prev[contentLinkUuid] === componentId) return prev;
+			return {
+				...prev,
+				[contentLinkUuid]: componentId
+			};
+		});
+	}, []);
+	const selectInteraction = useSelectInteraction({ contentLinkMap });
+	const hoverInteraction = useHoverInteraction({ contentLinkMap });
 	const deleteInteraction = useDeleteInteraction({
-		selectedComponentId: selectInteraction.selectedComponentId,
+		selectedContentLinkUuid: selectInteraction.selectedContentLinkUuid,
 		setSelectedComponent: selectInteraction.setSelectedComponent
 	});
 	const focusInteraction = useFocusInteraction({ setSelectedComponent: selectInteraction.setSelectedComponent });
@@ -575,7 +597,9 @@ const DesignStateProvider = ({ children }) => {
 		...dragInteraction,
 		...scrollInteraction,
 		...componentUpdateInteraction,
-		nodeToTargetMap
+		nodeToTargetMap,
+		contentLinkMap,
+		registerContentLink
 	}), [
 		deleteInteraction,
 		selectInteraction,
@@ -584,7 +608,9 @@ const DesignStateProvider = ({ children }) => {
 		dragInteraction,
 		nodeToTargetMap,
 		scrollInteraction,
-		componentUpdateInteraction
+		componentUpdateInteraction,
+		contentLinkMap,
+		registerContentLink
 	]);
 	return /* @__PURE__ */ jsx(DesignStateContext.Provider, {
 		value: state,