@salesforce/storefront-next-runtime 0.2.0 → 0.3.0-alpha.0

package/dist/DesignFrame.js

@@ -125,7 +125,7 @@ const DesignOverlay = () => {
 
 //#endregion
 //#region src/design/react/components/DesignFrame.tsx
-const DesignFrame = ({ componentId, children, name, parentId, regionId, localized = false, showFrame = false, showToolbox = true, isMoveable = true }) => {
+const DesignFrame = ({ componentId, children, name, parentId, regionId, localized = false, showFrame = false, showToolbox = true, isMoveable = true, className }) => {
 	const componentType = useComponentType(componentId ?? "");
 	const { deleteComponent } = useDesignState();
 	const labels = useLabels();
@@ -145,7 +145,11 @@ const DesignFrame = ({ componentId, children, name, parentId, regionId, localize
 	]);
 	const stopPropagation = (event) => event.stopPropagation();
 	return /* @__PURE__ */ jsxs("div", {
-		className: ["pd-design__frame", showFrame && "pd-design__frame--visible"].filter(Boolean).join(" "),
+		className: [
+			"pd-design__frame",
+			showFrame && "pd-design__frame--visible",
+			className
+		].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" })] }),

package/dist/DesignFrame.js.map

@@ -1 +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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"}
+{"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    className,\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    className?: string;\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', className].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

@@ -26,7 +26,7 @@ function useRegionDecoratorClasses({ regionId, componentTypeInclusions, componen
 //#endregion
 //#region src/design/react/components/DesignRegion.tsx
 function DesignRegion(props) {
-	const { designMetadata, children } = props;
+	const { designMetadata, children, className } = props;
 	const { name, id = "", componentIds = [], componentTypeInclusions = [], componentTypeExclusions = [] } = designMetadata ?? {};
 	const nodeRef = React.useRef(null);
 	const classes = useRegionDecoratorClasses({
@@ -70,6 +70,7 @@ function DesignRegion(props) {
 			localized: true,
 			showFrame,
 			showToolbox: false,
+			className,
 			children: /* @__PURE__ */ jsx(RegionContext.Provider, {
 				value: context,
 				children

package/dist/DesignRegion.js.map

@@ -1 +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"}
+{"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, className } = 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                className={className}>\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,UAAU,cAAc;CAChD,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;GACF;aACX,oBAAC,cAAc;IAAS,OAAO;IAAU;KAAkC;IACjE;GACZ"}

package/dist/component.types.d.ts

@@ -53,6 +53,11 @@ interface ComponentDesignMetadata {
    * The id of the component or region.
    */
   id: string;
+  /**
+   * The unique identifier for the content link between this component
+   * and its parent.
+   */
+  contentLinkUuid?: string;
   /**
    * Whether the component is a fragment.
    */
@@ -81,6 +86,7 @@ type ComponentDecoratorProps<TProps> = React.PropsWithChildren<{
 } & TProps>;
 type RegionDecoratorProps<TProps> = React.PropsWithChildren<{
   designMetadata?: RegionDesignMetadata;
+  className?: string;
 } & TProps>;
 //#endregion
 export { RegionDesignMetadata as a, RegionDecoratorProps as i, ComponentDesignMetadata as n, DefaultComponentConstructor as r, ComponentDecoratorProps as t };

package/dist/component.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.types.d.ts","names":[],"sources":["../src/design/react/core/component.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;UAqBiB,2BAAA;;;;;;QAMP;;UAGO,oBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAgCkB;;UAGlB,uBAAA;;;;;;;;;;;;;;;;;;;;;;;;sBAwBO;;KAGZ,kCAAkC,KAAA,CAAM;mBAE3B;;;IAGjB;KAGI,+BAA+B,KAAA,CAAM;mBAExB;IACjB"}
+{"version":3,"file":"component.types.d.ts","names":[],"sources":["../src/design/react/core/component.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;UAqBiB,2BAAA;;;;;;QAMP;;UAGO,oBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAgCkB;;UAGlB,uBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA6BO;;KAGZ,kCAAkC,KAAA,CAAM;mBAE3B;;;IAGjB;KAGI,+BAA+B,KAAA,CAAM;mBAExB;;IAEjB"}

package/dist/config-load.d.ts

@@ -0,0 +1,27 @@
+import { t as BaseConfig } from "./schema.js";
+
+//#region src/config/load-config.d.ts
+
+/**
+ * Dynamically imports `config.server.ts` from the project root (CWD) and returns
+ * the full configuration object. This runs at route discovery time under vite-node
+ * (typegen, dev, build), which handles the TS transformation.
+ *
+ * Uses jiti to transpile TypeScript on the fly, which works regardless of whether
+ * the caller runs under vite-node, a plain Node process, or any other runtime.
+ * This avoids the fragile assumption that vite-node will intercept dynamic imports
+ * from pre-compiled npm packages (it won't — Vite externalizes node_modules).
+ *
+ * Returns the full config including `metadata`, `runtime`, and `app` sections.
+ * Callers that only need `app` can destructure: `const { app } = await loadConfig()`.
+ *
+ * - If the config file is missing, throws with a clear message.
+ * - If the config file exists but fails to import, throws with the original error as cause.
+ *
+ * @returns The full configuration object.
+ * @throws If `config.server.ts` is not found or fails to import.
+ */
+declare function loadConfig<T extends BaseConfig = BaseConfig>(): Promise<T>;
+//#endregion
+export { loadConfig };
+//# sourceMappingURL=config-load.d.ts.map

package/dist/config-load.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-load.d.ts","names":[],"sources":["../src/config/load-config.ts"],"sourcesContent":[],"mappings":";;;;;;AAsCA;;;;;;;;;;;;;;;;;iBAAsB,qBAAqB,aAAa,eAAe,QAAQ"}

package/dist/config-load.js

@@ -0,0 +1,3 @@
+import { t as loadConfig } from "./load-config.js";
+
+export { loadConfig };

package/dist/config.d.ts

@@ -1,2 +1,249 @@
 import { n as Site, r as Url, t as Locale } from "./types.js";
-export { type Locale, type Site, type Url };
+import { n as DefineConfigOptions, r as defineConfig, t as BaseConfig } from "./schema.js";
+import * as react0 from "react";
+import { ReactNode } from "react";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_router2 from "react-router";
+import { MiddlewareFunction, RouterContextProvider } from "react-router";
+
+//#region src/config/get-config.d.ts
+
+declare global {
+  interface Window {
+    __APP_CONFIG__?: Record<string, unknown>;
+  }
+}
+/**
+ * Get configuration in loaders, actions, and utilities.
+ *
+ * Pass context parameter in server loaders/actions.
+ * Omit context parameter in client loaders (uses window.__APP_CONFIG__).
+ *
+ * @param context - Router context for server loaders/actions
+ * @returns App configuration
+ */
+declare function getConfig<T extends Record<string, unknown> = Record<string, unknown>>(context?: Readonly<RouterContextProvider>): T;
+/**
+ * Get configuration in React components.
+ *
+ * Must use this hook (not getConfig) because React Context requires useContext().
+ *
+ * @returns App configuration
+ */
+declare function useConfig<T extends Record<string, unknown> = Record<string, unknown>>(): T;
+//#endregion
+//#region src/config/context.d.ts
+/**
+ * Router context for application configuration.
+ *
+ * Populated by `createAppConfigMiddleware` with the `app` section of config.
+ * Accessible in loaders, actions, and middleware via `context.get(appConfigContext)`.
+ */
+declare const appConfigContext: react_router2.RouterContext<Record<string, unknown>>;
+/**
+ * React context for application configuration.
+ *
+ * Used by the `useConfig()` hook in React components.
+ * Populated by `ConfigProvider` in the component tree.
+ */
+declare const ConfigContext: react0.Context<Record<string, unknown> | null>;
+/**
+ * Extract the `app` section from a full config object.
+ *
+ * @param staticConfig - The full config object (output of `defineConfig()`)
+ * @returns The `app` section of the config
+ */
+declare function createAppConfig<T extends BaseConfig>(staticConfig: T): T['app'];
+interface ConfigProviderProps {
+  config: Record<string, unknown>;
+  children: ReactNode;
+}
+/**
+ * React context provider for application configuration.
+ *
+ * Wrap your component tree with this to enable `useConfig()` in child components.
+ * Typically placed in the root layout component.
+ */
+declare function ConfigProvider({
+  config,
+  children
+}: ConfigProviderProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/config/middleware.d.ts
+/**
+ * Create app config middleware for both server and client.
+ *
+ * Follows the same factory pattern as `createMultiSiteMiddleware`.
+ *
+ * The server middleware:
+ * - Validates required Commerce API fields on first request (one-time)
+ * - Sets `appConfigContext` in router context with `config.app`
+ *
+ * The client middleware:
+ * - Reads `window.__APP_CONFIG__` (injected during SSR)
+ * - Sets `appConfigContext` in router context
+ *
+ * Environment variables:
+ * - `SCAPI_PROXY_HOST` (optional): When set, skips `shortCode` validation
+ *   (workspace environments route through a proxy that doesn't require shortCode)
+ * - `NODE_ENV` (optional): When set to 'test', skips validation entirely
+ *
+ * @param config - The full config object (output of `defineConfig()`)
+ * @returns Object with `server` and `client` middleware functions
+ *
+ * @example
+ * import { createAppConfigMiddleware } from '@salesforce/storefront-next-runtime/config';
+ * import config from '@/config/server';
+ *
+ * const appConfigMiddleware = createAppConfigMiddleware(config);
+ *
+ * export const middleware = [appConfigMiddleware.server, ...otherMiddleware];
+ * export const clientMiddleware = [appConfigMiddleware.client, ...otherClientMiddleware];
+ */
+declare function createAppConfigMiddleware<T extends BaseConfig>(config: T): {
+  server: MiddlewareFunction<Response>;
+  client: MiddlewareFunction<Record<string, unknown>>;
+};
+//#endregion
+//#region src/config/utils.d.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.
+ */
+/**
+ * Deep merge two objects, with source values overriding target values
+ * Arrays are replaced, not merged
+ *
+ * @param target - The base object
+ * @param source - The object with values to merge in
+ * @returns A new merged object
+ *
+ * @example
+ * deepMerge(
+ *   { a: { b: 1, c: 2 } },
+ *   { a: { b: 3, d: 4 } }
+ * )
+ * // Returns: { a: { b: 3, c: 2, d: 4 } }
+ */
+declare const deepMerge: <T extends Record<string, unknown>>(target: T, source: Record<string, unknown>) => T;
+/**
+ * Convert a path string with double underscore separators to a nested object
+ * Normalizes keys to match baseConfig casing (case-insensitive lookup, preserves baseConfig case)
+ *
+ * @param path - The path string (e.g., 'app__pages__cart__quantityUpdateDebounce')
+ * @param value - The value to set at the path
+ * @param baseConfig - Optional base config for case normalization
+ * @returns A nested object
+ *
+ * @example
+ * pathToObject('app__pages__cart__maxQuantity', 999)
+ * // Returns: { app: { pages: { cart: { maxQuantity: 999 } } } }
+ *
+ * @example
+ * // With baseConfig normalization:
+ * pathToObject('APP__SITE__LOCALE', 'en-GB', { app: { site: { locale: 'en-GB' } } })
+ * // Returns: { app: { site: { locale: 'en-GB' } } } (normalized to baseConfig casing)
+ */
+declare const pathToObject: (path: string, value: unknown, baseConfig?: Record<string, unknown>) => Record<string, unknown>;
+/**
+ * Parse environment variable value with optimistic JSON parsing
+ * Tries to parse as JSON first, falls back to string if invalid
+ * Supports multi-line formatted JSON by normalizing whitespace before parsing
+ *
+ * @param varValue - The environment variable value
+ * @param varName - Optional variable name for better error messages
+ * @returns The parsed value (JSON type if valid JSON, otherwise string)
+ *
+ * @example
+ * // Primitives
+ * parseEnvValue('42') // → 42 (number)
+ * parseEnvValue('true') // → true (boolean)
+ * parseEnvValue('hello') // → 'hello' (string)
+ *
+ * @example
+ * // Single-line JSON
+ * parseEnvValue('["Apple","Google"]') // → ['Apple', 'Google'] (array)
+ * parseEnvValue('{"key":"value"}') // → {key: 'value'} (object)
+ *
+ * @example
+ * // Multi-line formatted JSON (whitespace normalized automatically)
+ * parseEnvValue('[
+ *   {"id": "en-GB"},
+ *   {"id": "fr-FR"}
+ * ]') // → [{id: 'en-GB'}, {id: 'fr-FR'}] (array)
+ */
+declare const parseEnvValue: (varValue: string, varName?: string) => unknown;
+/**
+ * Extract all valid paths from a config object (recursively traverses the object structure)
+ * Returns paths in lowercase with double underscore separators
+ *
+ * @param obj - The config object to extract paths from
+ * @param prefix - Current path prefix (used for recursion)
+ * @returns Array of valid config paths
+ *
+ * @example
+ * extractValidPaths({ app: { site: { locale: 'en-GB' } } })
+ * // Returns: ['app__site__locale']
+ */
+declare const extractValidPaths: (obj: unknown, prefix?: string) => string[];
+/**
+ * Options for mergeEnvConfig
+ */
+interface MergeEnvConfigOptions {
+  /**
+   * Config paths that cannot be overridden by environment variables.
+   * Paths are matched case-insensitively with double underscore separators.
+   * Any env var targeting a protected path or a sub-path of it will throw an error.
+   *
+   * @example ['app__engagement'] — prevents PUBLIC__app__engagement__* from being set via env
+   */
+  protectedPaths?: string[];
+}
+/**
+ * Merge environment variables with PUBLIC__ prefix into config.
+ *
+ * Uses double underscore (__) to target nested config paths.
+ * All PUBLIC__ prefixed variables are exposed to the client (bundled into window.__APP_CONFIG__).
+ *
+ * Server-only secrets should NEVER use this — read them directly from process.env in server code.
+ *
+ * Environment variables:
+ * - `PUBLIC__<path>` (optional): Override any config path. e.g. `PUBLIC__app__commerce__api__clientId=abc123`
+ * - `NODE_ENV` (optional): When set to 'development', enables conflict warnings for overlapping paths
+ *
+ * @param env - Environment variables object (defaults to process.env)
+ * @param baseConfig - Optional base config for strict path validation and case normalization
+ * @param options - Optional configuration including protected paths
+ * @returns Object with overrides to merge into base config
+ *
+ * @example
+ * // Environment variables:
+ * // PUBLIC__app__commerce__api__clientId=abc123
+ * // PUBLIC__app__pages__cart__quantityUpdateDebounce=1000
+ * // PUBLIC__app__features__socialLogin__providers=["Apple","Google"]
+ *
+ * mergeEnvConfig()
+ * // Returns:
+ * // {
+ * //   app: {
+ * //     commerce: { api: { clientId: 'abc123' } },
+ * //     pages: { cart: { quantityUpdateDebounce: 1000 } },
+ * //     features: { socialLogin: { providers: ['Apple', 'Google'] } }
+ * //   }
+ * // }
+ */
+declare const mergeEnvConfig: (env?: Record<string, string | undefined>, baseConfig?: Record<string, unknown>, options?: MergeEnvConfigOptions) => Record<string, unknown>;
+//#endregion
+export { type BaseConfig, ConfigContext, ConfigProvider, type DefineConfigOptions, type Locale, type MergeEnvConfigOptions, type Site, type Url, appConfigContext, createAppConfig, createAppConfigMiddleware, deepMerge, defineConfig, extractValidPaths, getConfig, mergeEnvConfig, parseEnvValue, pathToObject, useConfig };
+//# sourceMappingURL=config.d.ts.map

package/dist/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","names":[],"sources":["../src/config/get-config.ts","../src/config/context.tsx","../src/config/middleware.ts","../src/config/utils.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;QA2C8D,MAAA,CAAA;EACvC,UAAA,MAAA,CAAA;IAAT,cAAA,CAAA,EAdW,MAcX,CAAA,MAAA,EAAA,OAAA,CAAA;EACX;;AA+BH;;;;;;;;AC1CA;AASa,iBDAG,SCAU,CAAA,UDAU,MCAV,CAAA,MAAA,EAAA,OAAA,CAAA,GDAoC,MCApC,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EDCZ,QCDY,CDCH,qBCDG,CAAA,CAAA,EDEvB,CCFuB;AAS1B;;;;;AAEC;AAaD;AAAiC,iBDSjB,SCTiB,CAAA,UDSG,MCTH,CAAA,MAAA,EAAA,OAAA,CAAA,GDS6B,MCT7B,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA,CAAA,CAAA,EDSyD,CCTzD;;;;;;;;;AAjCpB,cAAA,gBAAgB,EAAA,aAAA,CAAA,aAAA,CAAA,MAAA,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA;AAS7B;AASA;;;;;AAIU,cAbG,aAagB,EAbH,MAAA,CAAA,OAeH,CAfG,MAeH,CAAA,MAAA,EAAA,OAAA,CAAA,GAAA,IAAA,CAAA;AASvB;;;;;;iBAfgB,0BAA0B,0BAA0B,IAAI;UAI9D,mBAAA;UACE;ECPI,QAAA,EDQF,SCRE;;;;;;;;iBDiBA,cAAA;;;GAAqC,sBAAmB,kBAAA,CAAA,GAAA,CAAA;;;;;;;ADSxE;;;;;;;;AC1CA;AASA;AASA;;;;;AAEC;AAaD;;;;;;;;;ACjBA;AAAoD,iBAApC,yBAAoC,CAAA,UAAA,UAAA,CAAA,CAAA,MAAA,EACxC,CADwC,CAAA,EAAA;EACxC,MAAA,EAEA,kBAFA,CAEmB,QAFnB,CAAA;EAEmB,MAAA,EACnB,kBADmB,CACA,MADA,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA;CAAnB;;;;;;;;;;;;AF5B8C;;;;;AAkB1D;;;;;;;AAiCA;;;;;;;;AC1CA;AASa,cELA,SFKmE,EAAtD,CAAA,UELU,MFKV,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA,CAAA,MAAA,EEL2C,CFK3C,EAAA,MAAA,EELsD,MFKtD,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GELgF,CFKhF;AAS1B;;;;;AAEC;AAaD;;;;;;;;;ACjBA;;;AAG+B,cCoBlB,YDpBkB,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,UAAA,CAAA,ECuBd,MDvBc,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GCwB5B,MDxB4B,CAAA,MAAA,EAAA,OAAA,CAAA;;;;;;;;ACf/B;;;;;;AAmCA;AAqEA;AAqCA;AAiCA;AA4CA;;;;;;;;;;cAlHa;;;;;;;;;;;;;cAqCA;;;;UAiCI,qBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4CJ,uBACJ,iDACQ,mCACH,0BACX"}