@salesforce/storefront-next-runtime 0.1.1 → 0.2.0-alpha.1

package/dist/DesignComponent.js

@@ -0,0 +1,150 @@
+import "./messaging-api.js";
+import { i as useDesignState, o as useComponentDiscovery } from "./DesignContext.js";
+import "./modeDetection.js";
+import "./PageDesignerProvider.js";
+import { i as useRegionContext, n as useComponentContext, t as ComponentContext } from "./ComponentContext.js";
+import { i as useNodeToTargetStore, r as useComponentType, t as DesignFrame } from "./DesignFrame.js";
+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;
+	const showFrame = (isSelected || isHovered) && !dragState.isDragging;
+	const isMoving = dragState.isDragging && dragState.sourceComponentId === componentId;
+	const isDropTarget = dragState.currentDropTarget?.componentId === componentId;
+	const dropTargetInsertType = dragState.currentDropTarget?.insertType;
+	const dropTargetAxis = dropTargetInsertType?.axis;
+	return [
+		"pd-design__decorator",
+		isFragment ? "pd-design__fragment" : "pd-design__component",
+		showFrame && "pd-design__frame--visible",
+		isSelected && "pd-design__decorator--selected",
+		isHovered && "pd-design__decorator--hovered",
+		isMoving && "pd-design__decorator--moving",
+		!isLocalized && "pd-design__component--unlocalized",
+		isDropTarget && dropTargetAxis && dropTargetInsertType && `pd-design__drop-target__${dropTargetAxis}-${dropTargetInsertType.type}`
+	].filter(Boolean).join(" ");
+}
+
+//#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.
+* @param nodeRef - The ref object to the node to focus.
+*/
+function useFocusedComponentHandler(componentId, nodeRef) {
+	const { focusedComponentId, focusComponent } = useDesignState();
+	React.useEffect(() => {
+		if (focusedComponentId === componentId && nodeRef.current) focusComponent(nodeRef.current);
+	}, [
+		focusedComponentId,
+		componentId,
+		focusComponent,
+		nodeRef
+	]);
+}
+
+//#endregion
+//#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 componentId = id;
+	const componentType = useComponentType(componentId);
+	const componentName = componentType?.label || name || "Component";
+	const dragRef = useRef(null);
+	const { regionId } = useRegionContext() ?? {};
+	const { componentId: parentComponentId } = useComponentContext() ?? {};
+	const { nodeToTargetMap } = useDesignState();
+	const { selectedComponentId, hoveredComponentId, setSelectedComponent, setHoveredComponent, startComponentMove, setPendingComponentDragId, dragState: { pendingComponentDragId, isDragging, sourceComponentId: draggingSourceComponentId } } = useDesignState();
+	useFocusedComponentHandler(componentId, dragRef);
+	useNodeToTargetStore({
+		type: "component",
+		nodeRef: dragRef,
+		parentId: parentComponentId,
+		regionId,
+		componentId
+	});
+	const discoverComponents = useComponentDiscovery({ nodeToTargetMap });
+	const isPendingDrag = pendingComponentDragId === componentId;
+	const handleMouseEnter = useCallback((event) => {
+		event.stopPropagation();
+		setHoveredComponent(componentId);
+	}, [setHoveredComponent, componentId]);
+	const handleMouseLeave = useCallback((event) => {
+		event.stopPropagation();
+		setHoveredComponent(discoverComponents({
+			x: event.clientX,
+			y: event.clientY,
+			filter: (entry) => entry.type === "component"
+		})[0]?.componentId ?? null);
+	}, [setHoveredComponent, discoverComponents]);
+	const handleClick = useCallback((e) => {
+		e.stopPropagation();
+		setSelectedComponent(componentId);
+	}, [setSelectedComponent, componentId]);
+	const showFrame = [selectedComponentId, hoveredComponentId].includes(componentId) && !isDragging;
+	const isDraggable = Boolean(componentId && regionId && componentType?.id);
+	const classes = useComponentDecoratorClasses({
+		componentId,
+		isLocalized,
+		isFragment: Boolean(isFragment)
+	});
+	const context = React.useMemo(() => ({
+		componentId: id,
+		name
+	}), [id, name]);
+	const handleDragOver = React.useCallback((event) => {
+		if (draggingSourceComponentId !== componentId) event.preventDefault();
+	}, [draggingSourceComponentId, componentId]);
+	const handleMouseDown = React.useCallback((event) => {
+		if (componentId) {
+			event.stopPropagation();
+			setPendingComponentDragId(componentId);
+		}
+	}, [componentId, setPendingComponentDragId]);
+	const handleDragStart = React.useCallback((event) => {
+		event.stopPropagation();
+		if (componentId && regionId && componentType?.id) startComponentMove(componentId, regionId, componentType.id);
+	}, [
+		componentId,
+		regionId,
+		componentType?.id,
+		startComponentMove
+	]);
+	if (!isVisible) return /* @__PURE__ */ jsx(Fragment, {});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: dragRef,
+		className: classes,
+		draggable: isPendingDrag && isDraggable,
+		onClick: handleClick,
+		onDragOver: handleDragOver,
+		onDragStart: handleDragStart,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		onMouseDown: handleMouseDown,
+		"data-component-type": componentType?.id,
+		"data-testid": `design-component-${componentId}`,
+		children: [/* @__PURE__ */ jsx("div", { className: "pd-design__component__drop-target" }), /* @__PURE__ */ jsx(DesignFrame, {
+			showFrame,
+			componentId,
+			localized: isLocalized,
+			name: componentName,
+			parentId: parentComponentId,
+			isMoveable: isDraggable,
+			regionId,
+			children: /* @__PURE__ */ jsx(ComponentContext.Provider, {
+				value: context,
+				children
+			})
+		})]
+	});
+}
+
+//#endregion
+export { DesignComponent };
+//# sourceMappingURL=DesignComponent.js.map

package/dist/DesignComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesignComponent.js","names":[],"sources":["../src/design/react/hooks/useComponentDecoratorClasses.ts","../src/design/react/hooks/useFocusedComponentHandler.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 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';\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 componentName = componentType?.label || name || 'Component';\n    const dragRef = useRef<HTMLDivElement>(null);\n    const { regionId } = useRegionContext() ?? {};\n    const { componentId: parentComponentId } = useComponentContext() ?? {};\n    const { nodeToTargetMap } = useDesignState();\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\n    const handleMouseEnter = useCallback(\n        (event: React.MouseEvent) => {\n            event.stopPropagation();\n            setHoveredComponent(componentId);\n        },\n        [setHoveredComponent, componentId]\n    );\n\n    const handleMouseLeave = useCallback(\n        (event: React.MouseEvent) => {\n            event.stopPropagation();\n\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: event.clientX,\n                y: event.clientY,\n                filter: (entry) => entry.type === 'component',\n            });\n\n            setHoveredComponent(components[0]?.componentId ?? null);\n        },\n        [setHoveredComponent, discoverComponents]\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            onMouseEnter={handleMouseEnter}\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":";;;;;;;;;;AAiBA,SAAgB,6BAA6B,EACzC,aACA,YACA,eAKO;CACP,MAAM,EAAE,qBAAqB,oBAAoB,cAAc,gBAAgB;CAE/E,MAAM,aAAa,wBAAwB;CAC3C,MAAM,YAAY,CAAC,UAAU,cAAc,uBAAuB;CAClE,MAAM,aAAa,cAAc,cAAc,CAAC,UAAU;CAC1D,MAAM,WAAW,UAAU,cAAc,UAAU,sBAAsB;CACzE,MAAM,eAAe,UAAU,mBAAmB,gBAAgB;CAClE,MAAM,uBAAuB,UAAU,mBAAmB;CAC1D,MAAM,iBAAiB,sBAAsB;AAE7C,QAAO;EACH;EACA,aAAa,wBAAwB;EACrC,aAAa;EACb,cAAc;EACd,aAAa;EACb,YAAY;EACZ,CAAC,eAAe;EAChB,gBACI,kBACA,wBACA,2BAA2B,eAAe,GAAG,qBAAqB;EACzE,CACI,OAAO,QAAQ,CACf,KAAK,IAAI;;;;;;;;;;AC3BlB,SAAgB,2BAA2B,aAAqB,SAAgD;CAC5G,MAAM,EAAE,oBAAoB,mBAAmB,gBAAgB;AAE/D,OAAM,gBAAgB;AAClB,MAAI,uBAAuB,eAAe,QAAQ,QAC9C,gBAAe,QAAQ,QAAQ;IAEpC;EAAC;EAAoB;EAAa;EAAgB;EAAQ,CAAC;;;;;ACHlE,SAAgB,gBAAgB,OAA4D;CACxF,MAAM,EAAE,gBAAgB,aAAa;CACrC,MAAM,EAAE,KAAK,IAAI,MAAM,aAAa,OAAO,YAAY,MAAM,cAAc,UAAU,kBAAkB,EAAE;CACzG,MAAM,cAAc;CACpB,MAAM,gBAAgB,iBAAiB,YAAY;CACnD,MAAM,gBAAgB,eAAe,SAAS,QAAQ;CACtD,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,EAAE,aAAa,kBAAkB,IAAI,EAAE;CAC7C,MAAM,EAAE,aAAa,sBAAsB,qBAAqB,IAAI,EAAE;CACtE,MAAM,EAAE,oBAAoB,gBAAgB;CAE5C,MAAM,EACF,qBACA,oBACA,sBACA,qBACA,oBACA,2BACA,WAAW,EAAE,wBAAwB,YAAY,mBAAmB,gCACpE,gBAAgB;AAEpB,4BAA2B,aAAa,QAAQ;AAChD,sBAAqB;EACjB,MAAM;EACN,SAAS;EACT,UAAU;EACV;EACA;EACH,CAAC;CAEF,MAAM,qBAAqB,sBAAsB,EAC7C,iBACH,CAAC;CAEF,MAAM,gBAAgB,2BAA2B;CAEjD,MAAM,mBAAmB,aACpB,UAA4B;AACzB,QAAM,iBAAiB;AACvB,sBAAoB,YAAY;IAEpC,CAAC,qBAAqB,YAAY,CACrC;CAED,MAAM,mBAAmB,aACpB,UAA4B;AACzB,QAAM,iBAAiB;AAavB,sBANmB,mBAAmB;GAClC,GAAG,MAAM;GACT,GAAG,MAAM;GACT,SAAS,UAAU,MAAM,SAAS;GACrC,CAAC,CAE6B,IAAI,eAAe,KAAK;IAE3D,CAAC,qBAAqB,mBAAmB,CAC5C;CAED,MAAM,cAAc,aACf,MAAwB;AACrB,IAAE,iBAAiB;AACnB,uBAAqB,YAAY;IAErC,CAAC,sBAAsB,YAAY,CACtC;CAED,MAAM,YAAY,CAAC,qBAAqB,mBAAmB,CAAC,SAAS,YAAY,IAAI,CAAC;CACtF,MAAM,cAAc,QAAQ,eAAe,YAAY,eAAe,GAAG;CAEzE,MAAM,UAAU,6BAA6B;EACzC;EACA;EACA,YAAY,QAAQ,WAAW;EAClC,CAAC;CAEF,MAAM,UAAU,MAAM,eAAqC;EAAE,aAAa;EAAI;EAAM,GAAG,CAAC,IAAI,KAAK,CAAC;CAGlG,MAAM,iBAAiB,MAAM,aACxB,UAA2C;AAIxC,MAAI,8BAA8B,YAC9B,OAAM,gBAAgB;IAG9B,CAAC,2BAA2B,YAAY,CAC3C;CASD,MAAM,kBAAkB,MAAM,aACzB,UAA4B;AACzB,MAAI,aAAa;AACb,SAAM,iBAAiB;AACvB,6BAA0B,YAAY;;IAG9C,CAAC,aAAa,0BAA0B,CAC3C;CAED,MAAM,kBAAkB,MAAM,aACzB,UAA2B;AACxB,QAAM,iBAAiB;AAEvB,MAAI,eAAe,YAAY,eAAe,GAC1C,oBAAmB,aAAa,UAAU,cAAc,GAAG;IAGnE;EAAC;EAAa;EAAU,eAAe;EAAI;EAAmB,CACjE;AAKD,KAAI,CAAC,UACD,QAAO,iCAAK;AAGhB,QACI,qBAAC;EACG,KAAK;EACL,WAAW;EACX,WAAW,iBAAiB;EAC5B,SAAS;EACT,YAAY;EACZ,aAAa;EACb,cAAc;EACd,cAAc;EACd,aAAa;EACb,uBAAqB,eAAe;EACpC,eAAa,oBAAoB;aACjC,oBAAC,SAAI,WAAU,sCAAsC,EACrD,oBAAC;GACc;GACE;GACb,WAAW;GACX,MAAM;GACN,UAAU;GACV,YAAY;GACF;aACV,oBAAC,iBAAiB;IAAS,OAAO;IAAU;KAAqC;IACvE;GACZ"}

package/dist/DesignFrame.js

@@ -0,0 +1,196 @@
+import { i as useDesignState, r as useDesignContext } from "./DesignContext.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/design/react/hooks/useNodeToTargetStore.ts
+function useNodeToTargetStore({ parentId, componentId, regionId, nodeRef, type, componentIds, componentTypeInclusions, componentTypeExclusions }) {
+	const { nodeToTargetMap } = useDesignState();
+	React.useEffect(() => {
+		if (nodeRef.current) nodeToTargetMap.set(nodeRef.current, {
+			parentId,
+			componentId,
+			regionId,
+			type,
+			componentIds,
+			componentTypeInclusions,
+			componentTypeExclusions
+		});
+	}, [
+		nodeRef,
+		parentId,
+		componentId,
+		regionId,
+		type,
+		componentIds,
+		nodeToTargetMap,
+		componentTypeInclusions,
+		componentTypeExclusions
+	]);
+}
+
+//#endregion
+//#region src/design/react/hooks/useComponentType.ts
+function useComponentType(componentId) {
+	const { pageDesignerConfig } = useDesignContext();
+	const { type = "" } = pageDesignerConfig?.components[componentId] ?? {};
+	return pageDesignerConfig?.componentTypes[type] ?? null;
+}
+
+//#endregion
+//#region src/design/react/components/DeleteToolboxButton.tsx
+const DeleteToolboxButton = ({ title, onClick, onMouseDown = () => {} }) => /* @__PURE__ */ jsx("button", {
+	className: "pd-design__frame__toolbox-button",
+	title,
+	type: "button",
+	onMouseDown,
+	onClick,
+	children: /* @__PURE__ */ jsx("svg", {
+		className: "pd-design__frame__delete-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M18 6L6 18M6 6l12 12",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	})
+});
+
+//#endregion
+//#region src/design/react/components/MoveToolboxButton.tsx
+const MoveToolboxButton = ({ title }) => /* @__PURE__ */ jsx("button", {
+	className: "pd-design__frame__toolbox-button",
+	title,
+	type: "button",
+	children: /* @__PURE__ */ jsx("svg", {
+		className: "pd-design__frame__move-icon",
+		viewBox: "0 0 24 24",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M22.9 11.7l-3.8-4.2c-.3-.3-.6 0-.6.4v2.7h-4.7c-.2 0-.4-.2-.4-.4V5.5h2.7c.5 0 .7-.4.4-.6l-4.1-3.8c-.2-.2-.5-.2-.7 0L7.6 4.9c-.3.3-.1.6.4.6h2.6v4.7c0 .2-.2.4-.4.4H5.5V7.9c0-.5-.4-.7-.6-.4l-3.8 4.1c-.2.2-.2.5 0 .7l3.8 4.1c.3.3.6.1.6-.4v-2.6h4.7c.2 0 .4.2.4.4v4.7H7.9c-.5 0-.7.4-.4.6l4.1 3.8c.2.2.5.2.7 0l4.1-3.8c.3-.3.1-.6-.4-.6h-2.6v-4.7c0-.2.2-.4.4-.4h4.7v2.7c0 .5.4.7.6.4l3.8-4.1c.2-.3.2-.5 0-.7z",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	})
+});
+
+//#endregion
+//#region src/design/react/hooks/useLabels.ts
+function useLabels() {
+	const { pageDesignerConfig } = useDesignContext();
+	return pageDesignerConfig?.labels ?? {};
+}
+
+//#endregion
+//#region src/design/react/components/DesignOverlay.tsx
+/**
+* Copyright 2026 Salesforce, Inc.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const DesignOverlay = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "pd-design__frame__overlay",
+		children: /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			x: "0px",
+			y: "0px",
+			width: "52px",
+			height: "52px",
+			viewBox: "0 0 52 52",
+			enableBackground: "new 0 0 52 52",
+			xmlSpace: "preserve",
+			children: /* @__PURE__ */ jsx("path", {
+				fill: "#FFFFFF",
+				d: "M26,2C12.7,2,2,12.7,2,26s10.7,24,24,24s24-10.7,24-24S39.3,2,26,2z M26,7C26,7,26,7,26,7C26,7,26,7,26,7\n	C26,7,26,7,26,7z M28,7.1c-0.1,0-0.1,0-0.2,0C27.9,7.1,28,7.1,28,7.1z M26,45C15.5,45,7,36.5,7,26c0-1,0.1-2.1,0.3-3\n	c1.3,0.2,2.9,0.7,3.7,1.5c1.7,1.8,3.6,3.9,5.4,4.3c0,0-0.2,0.1-0.4,0.4c-0.2,0.3-0.4,0.9-0.4,1.9c0,4.7,4.4,1.9,4.4,6.6\n	c0,4.7,5.3,6.6,5.3,2.8s3.5-5.6,3.5-8.5s-2.7-2.8-4.4-3.8c-1.8-0.9-2.7-2.4-6.1-1.9c-1.8-1.7-2.8-3.1-2-4.7c0.9-1.7,4.6-2,4.6-4.6\n	s-2.5-3.1-4.3-3.1c-0.8,0-2.5-0.6-3.9-1.3c1.7-1.7,3.8-3.1,6-4.1c1.6,0.7,4.3,1.8,6.6,1.8c2.7,0,4.1-1.9,3.7-3.1\n	c4.5,0.7,8.5,3,11.4,6.2c-1.5,0.9-3.5,1.9-7,1.9c-4.6,0-4.6,4.7-1.9,5.6c2.8,0.9,5.6-1.8,6.5,0c0.9,1.8-6.5,1.8-4.6,6.4\n	c1.9,4.6,3.7-0.1,5.6,4.5c1.9,4.6,5.6-0.7,2.8-4.3c-1.2-1.6-0.9-6.5,1.9-6.5h0.9c0.4,1.6,0.7,3.3,0.7,5C45,36.5,36.5,45,26,45z"
+			})
+		})
+	});
+};
+
+//#endregion
+//#region src/design/react/components/DesignFrame.tsx
+const DesignFrame = ({ componentId, children, name, parentId, regionId, localized = false, showFrame = false, showToolbox = true, isMoveable = true }) => {
+	const componentType = useComponentType(componentId ?? "");
+	const { deleteComponent } = useDesignState();
+	const labels = useLabels();
+	const nodeRef = React.useRef(null);
+	const handleDelete = React.useCallback((event) => {
+		event.stopPropagation();
+		if (componentId) deleteComponent({
+			componentId,
+			sourceComponentId: parentId ?? "",
+			sourceRegionId: regionId ?? ""
+		});
+	}, [
+		deleteComponent,
+		componentId,
+		parentId,
+		regionId
+	]);
+	const stopPropagation = (event) => event.stopPropagation();
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["pd-design__frame", showFrame && "pd-design__frame--visible"].filter(Boolean).join(" "),
+		ref: nodeRef,
+		children: [
+			showFrame && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "pd-design__frame--x" }), /* @__PURE__ */ jsx("div", { className: "pd-design__frame--y" })] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "pd-design__frame__label",
+				onMouseDown: stopPropagation,
+				children: [
+					componentType?.image && /* @__PURE__ */ jsx("span", {
+						className: "pd-design__icon",
+						children: /* @__PURE__ */ jsx("img", {
+							src: componentType.image,
+							alt: ""
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "pd-design__frame__name",
+						children: name
+					}),
+					!localized && /* @__PURE__ */ jsx("span", {
+						className: "pd-design__frame__fallback-badge",
+						children: labels.fallback ?? "Fallback"
+					})
+				]
+			}),
+			showToolbox && /* @__PURE__ */ jsxs("div", {
+				className: "pd-design__frame__toolbox",
+				children: [isMoveable && /* @__PURE__ */ jsx(MoveToolboxButton, { title: labels.moveComponent ?? "Move component" }), /* @__PURE__ */ jsx(DeleteToolboxButton, {
+					title: labels.deleteComponent ?? "Delete component",
+					onMouseDown: stopPropagation,
+					onClick: handleDelete
+				})]
+			}),
+			/* @__PURE__ */ jsx(DesignOverlay, {}),
+			children
+		]
+	});
+};
+DesignFrame.defaultProps = {
+	parentId: void 0,
+	componentId: void 0,
+	showToolbox: true,
+	regionId: void 0,
+	showFrame: false
+};
+
+//#endregion
+export { useNodeToTargetStore as i, useLabels as n, useComponentType as r, DesignFrame as t };
+//# sourceMappingURL=DesignFrame.js.map

package/dist/DesignFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesignFrame.js","names":[],"sources":["../src/design/react/hooks/useNodeToTargetStore.ts","../src/design/react/hooks/useComponentType.ts","../src/design/react/components/DeleteToolboxButton.tsx","../src/design/react/components/MoveToolboxButton.tsx","../src/design/react/hooks/useLabels.ts","../src/design/react/components/DesignOverlay.tsx","../src/design/react/components/DesignFrame.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';\nimport { useDesignState } from './useDesignState';\nimport type { NodeToTargetMapEntry } from '../context/DesignStateContext';\n\nexport function useNodeToTargetStore({\n    parentId,\n    componentId,\n    regionId,\n    nodeRef,\n    type,\n    componentIds,\n    componentTypeInclusions,\n    componentTypeExclusions,\n}: Partial<NodeToTargetMapEntry> & {\n    nodeRef: React.RefObject<Element | null>;\n}): void {\n    const { nodeToTargetMap } = useDesignState();\n\n    React.useEffect(() => {\n        if (nodeRef.current) {\n            nodeToTargetMap.set(nodeRef.current, {\n                parentId,\n                componentId,\n                regionId,\n                type,\n                componentIds,\n                componentTypeInclusions,\n                componentTypeExclusions,\n            } as NodeToTargetMapEntry);\n        }\n    }, [\n        nodeRef,\n        parentId,\n        componentId,\n        regionId,\n        type,\n        componentIds,\n        nodeToTargetMap,\n        componentTypeInclusions,\n        componentTypeExclusions,\n    ]);\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 { useDesignContext } from '../context/DesignContext';\nimport type { ComponentType } from '../../messaging-api/domain-types';\n\nexport function useComponentType(componentId: string): ComponentType | null {\n    const { pageDesignerConfig } = useDesignContext();\n    const { type = '' } = pageDesignerConfig?.components[componentId] ?? {};\n\n    return pageDesignerConfig?.componentTypes[type] ?? null;\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 React from 'react';\n\nexport const DeleteToolboxButton = ({\n    title,\n    onClick,\n    onMouseDown = () => {\n        /* noop */\n    },\n}: {\n    title: string;\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}): React.JSX.Element => (\n    <button\n        className=\"pd-design__frame__toolbox-button\"\n        title={title}\n        type=\"button\"\n        onMouseDown={onMouseDown}\n        onClick={onClick}>\n        <svg\n            className=\"pd-design__frame__delete-icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M18 6L6 18M6 6l12 12\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    </button>\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 React from 'react';\n\nexport const MoveToolboxButton = ({ title }: { title: string }): React.JSX.Element => (\n    <button className=\"pd-design__frame__toolbox-button\" title={title} type=\"button\">\n        <svg className=\"pd-design__frame__move-icon\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M22.9 11.7l-3.8-4.2c-.3-.3-.6 0-.6.4v2.7h-4.7c-.2 0-.4-.2-.4-.4V5.5h2.7c.5 0 .7-.4.4-.6l-4.1-3.8c-.2-.2-.5-.2-.7 0L7.6 4.9c-.3.3-.1.6.4.6h2.6v4.7c0 .2-.2.4-.4.4H5.5V7.9c0-.5-.4-.7-.6-.4l-3.8 4.1c-.2.2-.2.5 0 .7l3.8 4.1c.3.3.6.1.6-.4v-2.6h4.7c.2 0 .4.2.4.4v4.7H7.9c-.5 0-.7.4-.4.6l4.1 3.8c.2.2.5.2.7 0l4.1-3.8c.3-.3.1-.6-.4-.6h-2.6v-4.7c0-.2.2-.4.4-.4h4.7v2.7c0 .5.4.7.6.4l3.8-4.1c.2-.3.2-.5 0-.7z\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    </button>\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 { useDesignContext } from '../context/DesignContext';\n\nexport function useLabels(): Record<string, string> {\n    const { pageDesignerConfig } = useDesignContext();\n\n    return pageDesignerConfig?.labels ?? {};\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 */\nexport const DesignOverlay = () => {\n    return (\n        <div className=\"pd-design__frame__overlay\">\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                x=\"0px\"\n                y=\"0px\"\n                width=\"52px\"\n                height=\"52px\"\n                viewBox=\"0 0 52 52\"\n                enableBackground=\"new 0 0 52 52\"\n                xmlSpace=\"preserve\">\n                <path\n                    fill=\"#FFFFFF\"\n                    d=\"M26,2C12.7,2,2,12.7,2,26s10.7,24,24,24s24-10.7,24-24S39.3,2,26,2z M26,7C26,7,26,7,26,7C26,7,26,7,26,7\n\tC26,7,26,7,26,7z M28,7.1c-0.1,0-0.1,0-0.2,0C27.9,7.1,28,7.1,28,7.1z M26,45C15.5,45,7,36.5,7,26c0-1,0.1-2.1,0.3-3\n\tc1.3,0.2,2.9,0.7,3.7,1.5c1.7,1.8,3.6,3.9,5.4,4.3c0,0-0.2,0.1-0.4,0.4c-0.2,0.3-0.4,0.9-0.4,1.9c0,4.7,4.4,1.9,4.4,6.6\n\tc0,4.7,5.3,6.6,5.3,2.8s3.5-5.6,3.5-8.5s-2.7-2.8-4.4-3.8c-1.8-0.9-2.7-2.4-6.1-1.9c-1.8-1.7-2.8-3.1-2-4.7c0.9-1.7,4.6-2,4.6-4.6\n\ts-2.5-3.1-4.3-3.1c-0.8,0-2.5-0.6-3.9-1.3c1.7-1.7,3.8-3.1,6-4.1c1.6,0.7,4.3,1.8,6.6,1.8c2.7,0,4.1-1.9,3.7-3.1\n\tc4.5,0.7,8.5,3,11.4,6.2c-1.5,0.9-3.5,1.9-7,1.9c-4.6,0-4.6,4.7-1.9,5.6c2.8,0.9,5.6-1.8,6.5,0c0.9,1.8-6.5,1.8-4.6,6.4\n\tc1.9,4.6,3.7-0.1,5.6,4.5c1.9,4.6,5.6-0.7,2.8-4.3c-1.2-1.6-0.9-6.5,1.9-6.5h0.9c0.4,1.6,0.7,3.3,0.7,5C45,36.5,36.5,45,26,45z\"\n                />\n            </svg>\n        </div>\n    );\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 { useComponentType } from '../hooks/useComponentType';\nimport { DeleteToolboxButton } from './DeleteToolboxButton';\nimport { MoveToolboxButton } from './MoveToolboxButton';\nimport { useDesignState } from '../hooks/useDesignState';\nimport { useLabels } from '../hooks/useLabels';\nimport { DesignOverlay } from './DesignOverlay';\n\nexport const DesignFrame = ({\n    componentId,\n    children,\n    name,\n    parentId,\n    regionId,\n    localized = false,\n    showFrame = false,\n    showToolbox = true,\n    isMoveable = true,\n}: React.PropsWithChildren<{\n    componentId?: string;\n    name: string;\n    localized?: boolean;\n    parentId?: string;\n    regionId?: string;\n    showToolbox?: boolean;\n    showFrame?: boolean;\n    isMoveable?: boolean;\n}>): React.JSX.Element => {\n    const componentType = useComponentType(componentId ?? '');\n    const { deleteComponent } = useDesignState();\n    const labels = useLabels();\n    const nodeRef = React.useRef<HTMLDivElement>(null);\n\n    const handleDelete = React.useCallback(\n        (event: React.MouseEvent) => {\n            // Stop propagation so we don't select the component as well when\n            // this bubbles up.\n            event.stopPropagation();\n\n            if (componentId) {\n                deleteComponent({\n                    componentId,\n                    sourceComponentId: parentId ?? '',\n                    sourceRegionId: regionId ?? '',\n                });\n            }\n        },\n        [deleteComponent, componentId, parentId, regionId]\n    );\n\n    const stopPropagation = (event: React.MouseEvent) => event.stopPropagation();\n\n    const classes = ['pd-design__frame', showFrame && 'pd-design__frame--visible'].filter(Boolean).join(' ');\n\n    // TODO: For the frame label, when there is not enough space above the component to display it, we\n    // need to display it inside the container instead.\n    return (\n        <div className={classes} ref={nodeRef}>\n            {showFrame && (\n                <>\n                    <div className=\"pd-design__frame--x\" />\n                    <div className=\"pd-design__frame--y\" />\n                </>\n            )}\n            <div className=\"pd-design__frame__label\" onMouseDown={stopPropagation}>\n                {componentType?.image && (\n                    <span className=\"pd-design__icon\">\n                        <img src={componentType.image} alt=\"\" />\n                    </span>\n                )}\n                <span className=\"pd-design__frame__name\">{name}</span>\n                {!localized && (\n                    <span className=\"pd-design__frame__fallback-badge\">{labels.fallback ?? 'Fallback'}</span>\n                )}\n            </div>\n            {showToolbox && (\n                <div className=\"pd-design__frame__toolbox\">\n                    {isMoveable && <MoveToolboxButton title={labels.moveComponent ?? 'Move component'} />}\n                    <DeleteToolboxButton\n                        title={labels.deleteComponent ?? 'Delete component'}\n                        onMouseDown={stopPropagation}\n                        onClick={handleDelete}\n                    />\n                </div>\n            )}\n            <DesignOverlay />\n            {children}\n        </div>\n    );\n};\n\nDesignFrame.defaultProps = {\n    parentId: undefined,\n    componentId: undefined,\n    showToolbox: true,\n    regionId: undefined,\n    showFrame: false,\n};\n"],"mappings":"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"}

package/dist/DesignRegion.js

@@ -0,0 +1,83 @@
+import "./messaging-api.js";
+import { a as isComponentTypeAllowedInRegion, i as useDesignState } from "./DesignContext.js";
+import "./modeDetection.js";
+import "./PageDesignerProvider.js";
+import { n as useComponentContext, r as RegionContext } from "./ComponentContext.js";
+import { i as useNodeToTargetStore, n as useLabels, t as DesignFrame } from "./DesignFrame.js";
+import React, { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/design/react/hooks/useRegionDecoratorClasses.ts
+function useRegionDecoratorClasses({ regionId, componentTypeInclusions, componentTypeExclusions }) {
+	const { dragState: { currentDropTarget, componentType } } = useDesignState();
+	const isHovered = regionId && currentDropTarget?.regionId === regionId;
+	const isComponentAllowed = useMemo(() => isComponentTypeAllowedInRegion(componentType, componentTypeInclusions, componentTypeExclusions), [
+		componentType,
+		componentTypeInclusions,
+		componentTypeExclusions
+	]);
+	return [
+		"pd-design__decorator",
+		"pd-design__region",
+		isHovered && isComponentAllowed && "pd-design__region--hovered pd-design__frame--visible"
+	].filter(Boolean).join(" ");
+}
+
+//#endregion
+//#region src/design/react/components/DesignRegion.tsx
+function DesignRegion(props) {
+	const { designMetadata, children } = props;
+	const { name, id = "", componentIds = [], componentTypeInclusions = [], componentTypeExclusions = [] } = designMetadata ?? {};
+	const nodeRef = React.useRef(null);
+	const classes = useRegionDecoratorClasses({
+		regionId: id,
+		componentTypeInclusions,
+		componentTypeExclusions
+	});
+	const { dragState } = useDesignState();
+	const labels = useLabels();
+	const showFrame = Boolean(id && dragState.currentDropTarget?.regionId === id);
+	const { componentId: parentComponentId } = useComponentContext() ?? {};
+	useNodeToTargetStore({
+		type: "region",
+		nodeRef,
+		parentId: parentComponentId,
+		componentIds,
+		componentId: parentComponentId ?? "",
+		regionId: id,
+		componentTypeInclusions,
+		componentTypeExclusions
+	});
+	const context = React.useMemo(() => ({
+		regionId: id,
+		componentIds
+	}), [id, componentIds]);
+	return /* @__PURE__ */ jsx("div", {
+		className: classes,
+		ref: nodeRef,
+		onDragOver: useCallback((event) => {
+			if (isComponentTypeAllowedInRegion(dragState.componentType, componentTypeInclusions, componentTypeExclusions)) event.preventDefault();
+		}, [
+			dragState.componentType,
+			componentTypeInclusions,
+			componentTypeExclusions
+		]),
+		"data-region-id": id,
+		children: /* @__PURE__ */ jsx(DesignFrame, {
+			name: name ?? labels.defaultRegionName ?? "Region",
+			parentId: parentComponentId,
+			regionId: id,
+			localized: true,
+			showFrame,
+			showToolbox: false,
+			children: /* @__PURE__ */ jsx(RegionContext.Provider, {
+				value: context,
+				children
+			})
+		})
+	});
+}
+
+//#endregion
+export { DesignRegion };
+//# sourceMappingURL=DesignRegion.js.map

package/dist/DesignRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesignRegion.js","names":[],"sources":["../src/design/react/hooks/useRegionDecoratorClasses.ts","../src/design/react/components/DesignRegion.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 { useMemo } from 'react';\nimport { useDesignState } from './useDesignState';\nimport { isComponentTypeAllowedInRegion } from '../utils/regionUtils';\n\nexport function useRegionDecoratorClasses({\n    regionId,\n    componentTypeInclusions,\n    componentTypeExclusions,\n}: {\n    regionId: string;\n    componentTypeInclusions: string[];\n    componentTypeExclusions: string[];\n}): string {\n    const {\n        dragState: { currentDropTarget, componentType },\n    } = useDesignState();\n\n    const isHovered = regionId && currentDropTarget?.regionId === regionId;\n\n    const isComponentAllowed = useMemo(\n        () => isComponentTypeAllowedInRegion(componentType, componentTypeInclusions, componentTypeExclusions),\n        [componentType, componentTypeInclusions, componentTypeExclusions]\n    );\n\n    // Only show hover state if the region is hovered and the component is allowed\n    const shouldShowHover = isHovered && isComponentAllowed;\n\n    return [\n        'pd-design__decorator',\n        'pd-design__region',\n        shouldShowHover && 'pd-design__region--hovered pd-design__frame--visible',\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, { useCallback } from 'react';\nimport type { RegionDecoratorProps } from '../core/component.types';\nimport { useRegionDecoratorClasses } from '../hooks/useRegionDecoratorClasses';\nimport { useNodeToTargetStore } from '../hooks/useNodeToTargetStore';\nimport { DesignFrame } from './DesignFrame';\nimport { useLabels } from '../hooks/useLabels';\nimport { RegionContext, type RegionContextType } from '../core/RegionContext';\nimport { useComponentContext } from '../core/ComponentContext';\nimport { useDesignState } from '../hooks/useDesignState';\nimport { isComponentTypeAllowedInRegion } from '../utils/regionUtils';\n\nexport function DesignRegion(props: RegionDecoratorProps<unknown>): React.JSX.Element {\n    const { designMetadata, children } = props;\n    const {\n        name,\n        id = '',\n        componentIds = [],\n        componentTypeInclusions = [],\n        componentTypeExclusions = [],\n    } = designMetadata ?? {};\n    const nodeRef = React.useRef<HTMLDivElement>(null);\n    const classes = useRegionDecoratorClasses({\n        regionId: id,\n        componentTypeInclusions,\n        componentTypeExclusions,\n    });\n    const { dragState } = useDesignState();\n    const labels = useLabels();\n    const showFrame = Boolean(id && dragState.currentDropTarget?.regionId === id);\n    const { componentId: parentComponentId } = useComponentContext() ?? {};\n\n    useNodeToTargetStore({\n        type: 'region',\n        nodeRef,\n        parentId: parentComponentId,\n        componentIds,\n        componentId: parentComponentId ?? '',\n        regionId: id,\n        componentTypeInclusions,\n        componentTypeExclusions,\n    });\n\n    const context = React.useMemo<RegionContextType>(() => ({ regionId: id, componentIds }), [id, componentIds]);\n\n    const handleDragOver = useCallback(\n        (event: React.DragEvent<HTMLDivElement>) => {\n            const isComponentAllowed = isComponentTypeAllowedInRegion(\n                dragState.componentType,\n                componentTypeInclusions,\n                componentTypeExclusions\n            );\n\n            if (isComponentAllowed) {\n                event.preventDefault();\n            }\n        },\n        [dragState.componentType, componentTypeInclusions, componentTypeExclusions]\n    );\n\n    return (\n        <div className={classes} ref={nodeRef} onDragOver={handleDragOver} data-region-id={id}>\n            <DesignFrame\n                name={name ?? labels.defaultRegionName ?? 'Region'}\n                parentId={parentComponentId}\n                regionId={id}\n                localized\n                showFrame={showFrame}\n                showToolbox={false}>\n                <RegionContext.Provider value={context}>{children}</RegionContext.Provider>\n            </DesignFrame>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,0BAA0B,EACtC,UACA,yBACA,2BAKO;CACP,MAAM,EACF,WAAW,EAAE,mBAAmB,oBAChC,gBAAgB;CAEpB,MAAM,YAAY,YAAY,mBAAmB,aAAa;CAE9D,MAAM,qBAAqB,cACjB,+BAA+B,eAAe,yBAAyB,wBAAwB,EACrG;EAAC;EAAe;EAAyB;EAAwB,CACpE;AAKD,QAAO;EACH;EACA;EAJoB,aAAa,sBAKd;EACtB,CACI,OAAO,QAAQ,CACf,KAAK,IAAI;;;;;ACtBlB,SAAgB,aAAa,OAAyD;CAClF,MAAM,EAAE,gBAAgB,aAAa;CACrC,MAAM,EACF,MACA,KAAK,IACL,eAAe,EAAE,EACjB,0BAA0B,EAAE,EAC5B,0BAA0B,EAAE,KAC5B,kBAAkB,EAAE;CACxB,MAAM,UAAU,MAAM,OAAuB,KAAK;CAClD,MAAM,UAAU,0BAA0B;EACtC,UAAU;EACV;EACA;EACH,CAAC;CACF,MAAM,EAAE,cAAc,gBAAgB;CACtC,MAAM,SAAS,WAAW;CAC1B,MAAM,YAAY,QAAQ,MAAM,UAAU,mBAAmB,aAAa,GAAG;CAC7E,MAAM,EAAE,aAAa,sBAAsB,qBAAqB,IAAI,EAAE;AAEtE,sBAAqB;EACjB,MAAM;EACN;EACA,UAAU;EACV;EACA,aAAa,qBAAqB;EAClC,UAAU;EACV;EACA;EACH,CAAC;CAEF,MAAM,UAAU,MAAM,eAAkC;EAAE,UAAU;EAAI;EAAc,GAAG,CAAC,IAAI,aAAa,CAAC;AAiB5G,QACI,oBAAC;EAAI,WAAW;EAAS,KAAK;EAAS,YAhBpB,aAClB,UAA2C;AAOxC,OAN2B,+BACvB,UAAU,eACV,yBACA,wBACH,CAGG,OAAM,gBAAgB;KAG9B;GAAC,UAAU;GAAe;GAAyB;GAAwB,CAC9E;EAGsE,kBAAgB;YAC/E,oBAAC;GACG,MAAM,QAAQ,OAAO,qBAAqB;GAC1C,UAAU;GACV,UAAU;GACV;GACW;GACX,aAAa;aACb,oBAAC,cAAc;IAAS,OAAO;IAAU;KAAkC;IACjE;GACZ"}

package/dist/apply-url-config.js

@@ -0,0 +1,130 @@
+//#region src/utils/index.ts
+/**
+* Copyright 2026 Salesforce, Inc.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+/**
+* Creates a matcher function from an array of path patterns.
+* Supports `/**` suffix wildcards (e.g. '/resource/**', '/action/**').
+* Exact paths without wildcards are matched literally.
+*/
+function createPatternMatcher(patterns) {
+	const exactMatches = /* @__PURE__ */ new Set();
+	const prefixPatterns = [];
+	for (const pattern of patterns) if (pattern.endsWith("/**")) prefixPatterns.push(pattern.slice(0, -3));
+	else exactMatches.add(pattern);
+	return (path) => {
+		if (exactMatches.has(path)) return true;
+		return prefixPatterns.some((prefix) => path === prefix || path.startsWith(`${prefix}/`));
+	};
+}
+
+//#endregion
+//#region src/multi-site/apply-url-config.ts
+const DEFAULT_EXCLUDED_ROUTES = ["/resource/**", "/action/**"];
+/**
+* Separates routes into excluded (stay at root) and included (go under prefix).
+*/
+function partitionRoutes(routes, excludePatterns) {
+	const isExcluded = createPatternMatcher(excludePatterns);
+	const excludedRoutes = [];
+	const includedRoutes = [];
+	for (const route of routes) {
+		const matchPath = route.path?.startsWith("/") ? route.path : `/${route.path}`;
+		if (route.path && isExcluded(matchPath)) excludedRoutes.push(route);
+		else includedRoutes.push(route);
+	}
+	return {
+		excludedRoutes,
+		includedRoutes
+	};
+}
+/**
+* Normalizes route paths by stripping leading `/` so they're relative under a
+* parent route (React Router requirement).
+*/
+function normalizeRoutePaths(routes) {
+	return routes.map((route) => ({
+		...route,
+		path: route.path?.startsWith("/") ? route.path.slice(1) : route.path
+	}));
+}
+/**
+* Creates the `multi-site-wrapper` parent route entry with the given prefix.
+*/
+function createPrefixWrapper(prefix, children, wrapperFile) {
+	return {
+		id: "multi-site-wrapper",
+		file: wrapperFile,
+		path: prefix.slice(1),
+		children
+	};
+}
+/**
+* Finds the root index route (`/`) and duplicates it with its parent layout.
+* Looks at the top level for pathless layouts whose direct children include an index route.
+* e.g. _app (pathless) → _app._index (index: true)
+* Returns: _app--root-duplicate → _app._index--root-duplicate
+*/
+function cloneRootIndexRoutes(routes) {
+	const duplicates = [];
+	for (const route of routes) if (route.index === true) duplicates.push({
+		...route,
+		id: `${route.id}--root-duplicate`
+	});
+	else if (!route.path && route.children) {
+		const indexChild = route.children.find((child) => child.index === true);
+		if (indexChild) duplicates.push({
+			...route,
+			id: `${route.id}--root-duplicate`,
+			children: [{
+				...indexChild,
+				id: `${indexChild.id}--root-duplicate`
+			}]
+		});
+	}
+	return duplicates;
+}
+/**
+* Applies multi-site URL configuration to a set of route entries.
+*
+* Wraps non-excluded routes under a parent route with the configured URL prefix
+* (e.g. `/:siteId/:localeId`), while keeping excluded routes (action/resource by default)
+* at the root level. The homepage index route (and its parent layout) is always
+* duplicated at `/` so the root URL still serves content.
+*
+* @param options - Configuration for URL customisation.
+* @param options.routes - The flat route entries discovered from the filesystem.
+* @param options.urlConfig - URL customisation configuration (prefix, excludeRoutes).
+* @param options.wrapperFile - Path to the wrapper component file, relative to appDirectory.
+* @returns The transformed route entries with prefix wrapping applied.
+*/
+function applyUrlConfig(options) {
+	const { routes, urlConfig, wrapperFile } = options;
+	if (!urlConfig) return routes;
+	if (!urlConfig.prefix?.startsWith("/")) throw new Error(`urlConfig.prefix must start with a leading slash ("/"). Received: "${urlConfig.prefix}"`);
+	if (urlConfig.prefix === "/") return routes;
+	const { excludedRoutes, includedRoutes } = partitionRoutes(routes, urlConfig.excludeRoutes ?? DEFAULT_EXCLUDED_ROUTES);
+	const wrappableRoutes = normalizeRoutePaths(includedRoutes);
+	const wrapperRoute = createPrefixWrapper(urlConfig.prefix, wrappableRoutes, wrapperFile);
+	return [
+		...cloneRootIndexRoutes(includedRoutes),
+		wrapperRoute,
+		...excludedRoutes
+	];
+}
+
+//#endregion
+export { applyUrlConfig as t };
+//# sourceMappingURL=apply-url-config.js.map