@salesforce/storefront-next-dev 0.3.1 → 0.4.0-alpha.1

package/dist/index.js

@@ -4,7 +4,7 @@ import chalk from "chalk";
 import path$1, { dirname, join as join$1, relative, resolve as resolve$1 } from "path";
 import { fileURLToPath, pathToFileURL } from "url";
 import { parse } from "@babel/parser";
-import { isArrayPattern, isClassDeclaration, isExportSpecifier, isFunctionDeclaration, isIdentifier, isJSXAttribute, isJSXElement, isJSXFragment, isJSXIdentifier, isMemberExpression, isObjectPattern, isObjectProperty, isRestElement, isVariableDeclaration, jsxClosingElement, jsxClosingFragment, jsxElement, jsxFragment, jsxIdentifier, jsxOpeningElement, jsxOpeningFragment, jsxText } from "@babel/types";
+import { booleanLiteral, identifier, importDeclaration, importSpecifier, isArrayPattern, isClassDeclaration, isExportSpecifier, isFunctionDeclaration, isIdentifier, isJSXAttribute, isJSXElement, isJSXFragment, isJSXIdentifier, isMemberExpression, isObjectPattern, isObjectProperty, isRestElement, isStringLiteral, isVariableDeclaration, jsxAttribute, jsxClosingElement, jsxClosingFragment, jsxElement, jsxExpressionContainer, jsxFragment, jsxIdentifier, jsxOpeningElement, jsxOpeningFragment, jsxText, stringLiteral } from "@babel/types";
 import { generate } from "@babel/generator";
 import traverseModule from "@babel/traverse";
 import fs$1, { existsSync, readFileSync, writeFileSync } from "fs";
@@ -122,7 +122,7 @@ function patchAssetsPaths(dir) {
 function fixReactRouterManifestUrlsPlugin() {
 	let resolvedConfig;
 	return {
-		name: "odyssey:fix-react-router-manifest-urls",
+		name: "storefront-next:fix-react-router-manifest-urls",
 		enforce: "post",
 		configResolved(config) {
 			resolvedConfig = config;
@@ -284,7 +284,7 @@ const readableChunkFileNames = (chunkInfo) => {
 */
 const readableChunkFileNamesPlugin = () => {
 	return {
-		name: "odyssey:readable-chunk-file-names",
+		name: "storefront-next:readable-chunk-file-names",
 		apply: "build",
 		config() {
 			return { environments: { client: { build: { rollupOptions: { output: {
@@ -355,7 +355,7 @@ const managedRuntimeBundlePlugin = () => {
 		await fs.writeJson(buildPackageJsonPath, packageJson, { spaces: 2 });
 	};
 	return {
-		name: "odyssey:managed-runtime-bundle",
+		name: "storefront-next:managed-runtime-bundle",
 		apply: "build",
 		config({ mode }) {
 			return {
@@ -396,7 +396,7 @@ const patchReactRouterPlugin = () => {
 	let isTestMode = false;
 	let isDevMode = false;
 	return {
-		name: "odyssey:patch-react-router",
+		name: "storefront-next:patch-react-router",
 		enforce: "pre",
 		config(_config, { mode }) {
 			isTestMode = mode === "test";
@@ -428,10 +428,11 @@ const patchReactRouterPlugin = () => {
 
 //#endregion
 //#region src/extensibility/target-utils.ts
-const traverse$1 = traverseModule.default || traverseModule;
+const traverse$2 = traverseModule.default || traverseModule;
 const TARGET_COMPONENT_TAG = "UITarget";
-const TARGET_PROVIDERS_TAG = "TargetProviders";
+const TARGET_PROVIDERS_TAG = "UITargetProviders";
 const TARGET_ID_ATTRIBUTE = "targetId";
+const TARGET_COMPONENT_JSX_RE = /* @__PURE__ */ new RegExp(`<${TARGET_COMPONENT_TAG}[\\s/>]`);
 /**
 * Find and replace the TargetProviders tags with the corresponding context providers
 * @param element - the AST element to replace
@@ -463,17 +464,26 @@ function findAndReplaceComponent(componentName, element, targetRegistry) {
 			const targetId = attr && isJSXAttribute(attr) && attr.value && "value" in attr.value ? attr.value.value : void 0;
 			if (targetId == null) throw new Error(`UITarget must contain a targetId attribute`);
 			if (targetRegistry[targetId] && targetRegistry[targetId].length > 0) {
-				const components = targetRegistry[targetId].map((targetComponent) => {
-					return jsxElement(jsxOpeningElement(jsxIdentifier(targetComponent.componentName), [], true), null, [], true);
-				});
-				if (components.length > 1) element.replaceWith(jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), components));
-				else element.replaceWith(components[0]);
+				if (element.node.children.length > 0) {
+					let nestedChildren = element.node.children;
+					for (let i = targetRegistry[targetId].length - 1; i >= 0; i--) {
+						const targetComponent = targetRegistry[targetId][i];
+						nestedChildren = [jsxElement(jsxOpeningElement(jsxIdentifier(targetComponent.componentName), [], false), jsxClosingElement(jsxIdentifier(targetComponent.componentName)), nestedChildren, false)];
+					}
+					element.replaceWith(nestedChildren[0]);
+				} else {
+					const components = targetRegistry[targetId].map((targetComponent) => {
+						return jsxElement(jsxOpeningElement(jsxIdentifier(targetComponent.componentName), [], true), null, [], true);
+					});
+					if (components.length > 1) element.replaceWith(jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), components));
+					else element.replaceWith(components[0]);
+				}
 				targetIdReplaced = targetId;
 				replaced = true;
 			}
 		}
-		if (!replaced) if (element.node.children && element.node.children.length > 0) element.replaceWithMultiple(element.node.children);
-		else element.remove();
+		if (!replaced) if (element.node.children && element.node.children.length > 0) element.replaceWith(jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), element.node.children));
+		else element.replaceWith(jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), []));
 	}
 	return targetIdReplaced;
 }
@@ -493,7 +503,7 @@ function runReplacementPass(ast, tagName, targetRegistry = null, contextProvider
 			if (replacedId) targetIdsReplaced.add(replacedId);
 		} else if (contextProviders) findAndReplaceProviders(pathToReplace, contextProviders);
 	};
-	traverse$1(ast, {
+	traverse$2(ast, {
 		VariableDeclaration(nodePath) {
 			const declarationPaths = nodePath.get("declarations");
 			const declarationsArray = Array.isArray(declarationPaths) ? declarationPaths : [declarationPaths];
@@ -535,7 +545,7 @@ function buildReplacementImportStatements(targetIds, targetRegistry) {
 	return Array.from(importStatements).join("\n");
 }
 function transformTargets(code, targetRegistry, contextProviders) {
-	if (!code.includes(TARGET_COMPONENT_TAG) && !code.includes(TARGET_PROVIDERS_TAG)) return null;
+	if (!TARGET_COMPONENT_JSX_RE.test(code) && !code.includes(TARGET_PROVIDERS_TAG)) return null;
 	const ast = parse(code, {
 		sourceType: "module",
 		plugins: [
@@ -544,18 +554,18 @@ function transformTargets(code, targetRegistry, contextProviders) {
 			"decorators-legacy"
 		]
 	});
-	if (code.includes(TARGET_COMPONENT_TAG)) {
+	if (TARGET_COMPONENT_JSX_RE.test(code)) {
 		const replacementImportStatements = buildReplacementImportStatements(runReplacementPass(ast, TARGET_COMPONENT_TAG, targetRegistry, null), targetRegistry);
-		traverse$1(ast, { ImportDeclaration(nodePath) {
-			if (nodePath.node.source.value.includes("@/targets/ui-target")) nodePath.replaceWith(jsxText(replacementImportStatements));
+		traverse$2(ast, { ImportDeclaration(nodePath) {
+			if (nodePath.node.source.value === "@/targets/ui-target") nodePath.replaceWith(jsxText(replacementImportStatements));
 		} });
 	}
 	if (code.includes(TARGET_PROVIDERS_TAG)) {
 		const importStatements = /* @__PURE__ */ new Set();
 		for (const contextProvider of contextProviders) importStatements.add(`import ${contextProvider.componentName} from '@/${contextProvider.path.replace(".tsx", "")}';`);
 		const replacementImportStatements = Array.from(importStatements).join("\n");
-		traverse$1(ast, { ImportDeclaration(nodePath) {
-			if (nodePath.node.source.value.includes("@/targets/target-providers")) nodePath.replaceWith(jsxText(replacementImportStatements));
+		traverse$2(ast, { ImportDeclaration(nodePath) {
+			if (nodePath.node.source.value === "@/targets/ui-target-providers") nodePath.replaceWith(jsxText(replacementImportStatements));
 		} });
 		runReplacementPass(ast, TARGET_PROVIDERS_TAG, null, contextProviders);
 	}
@@ -567,7 +577,7 @@ function transformTargets(code, targetRegistry, contextProviders) {
 * @param sourceDir - the source directory of the project
 * @returns the target registry
 */
-function buildTargetRegistry(rootDir) {
+function buildTargetRegistry(rootDir, options = {}) {
 	const componentRegistry = {};
 	const contextProviders = [];
 	const extensionDirPath = path$1.join(rootDir, "extensions");
@@ -584,6 +594,7 @@ function buildTargetRegistry(rootDir) {
 		const configPath = path$1.join(extensionDirPath, dir.name, TARGET_CONFIG_FILENAME);
 		if (fs.existsSync(configPath)) {
 			const extensionConfig = fs.readJsonSync(configPath);
+			if (options.isProduction && extensionConfig.devOnly === true) continue;
 			if (extensionConfig && extensionConfig.components) for (const component of extensionConfig.components) {
 				const { targetId, path: componentPath, order = 0 } = component;
 				if (targetId && componentPath) {
@@ -626,16 +637,19 @@ function transformTargetPlaceholderPlugin() {
 	let componentRegistry;
 	let contextProviders;
 	let sourceDir;
+	let isProduction = false;
 	return {
-		name: "odyssey:transform-target-placeholder",
+		name: "storefront-next:transform-target-placeholder",
 		enforce: "pre",
 		configResolved(config) {
 			sourceDir = config.resolve.alias.find((alias) => alias.find === "@")?.replacement || path$1.resolve(__dirname, "./src");
+			isProduction = config.mode === "production";
 		},
 		buildStart() {
-			({componentRegistry, contextProviders} = buildTargetRegistry(sourceDir));
+			({componentRegistry, contextProviders} = buildTargetRegistry(sourceDir, { isProduction }));
 		},
 		transform(code, id) {
+			if (process.env.VITE_UI_TARGET_DEV_MODE === "true") return null;
 			try {
 				const transformedCode = transformTargets(code, componentRegistry, contextProviders);
 				if (transformedCode) return {
@@ -656,7 +670,7 @@ function transformTargetPlaceholderPlugin() {
 const watchConfigFilesPlugin = () => {
 	let viteConfig;
 	return {
-		name: "odyssey:watch-config-files",
+		name: "storefront-next:watch-config-files",
 		configResolved(config) {
 			viteConfig = config;
 		},
@@ -680,7 +694,7 @@ const watchConfigFilesPlugin = () => {
 
 //#endregion
 //#region src/plugins/staticRegistry.ts
-const DEFAULT_COMPONENT_GROUP$1 = "odyssey_base";
+const DEFAULT_COMPONENT_GROUP$1 = "storefrontnext_base";
 /**
 * Extracts component ID and group from @Component decorator using ts-morph AST parsing
 */
@@ -861,9 +875,14 @@ export const registry = new ComponentRegistry();
 	const endIndex = existingContent.indexOf(endMarker);
 	if (startIndex === -1 || endIndex === -1) throw new Error(`Registry file ${registryFilePath} is missing static registry markers. Please add "${startMarker}" and "${endMarker}" markers to define the generated content area.`);
 	const updatedContent = `${existingContent.slice(0, startIndex + 24)}\n${generatedCode}\n${existingContent.slice(endIndex)}`;
+	if (updatedContent === existingContent) {
+		logger.debug(`⏭️  Registry unchanged, skipping write: ${registryFilePath}`);
+		return false;
+	}
 	try {
 		writeFileSync(registryFilePath, updatedContent, "utf-8");
 		logger.debug(`💾 Updated registry file: ${registryFilePath}`);
+		return true;
 	} catch (error) {
 		throw new Error(`Failed to write registry file: ${error.message}`);
 	}
@@ -907,9 +926,12 @@ const staticRegistryPlugin = (config = {}) => {
 		logger.debug(`📦 Found ${components.length} components with @Component decorators`);
 		const generatedCode = generateRegistryCode(components, registryIdentifier);
 		const registryFilePath = resolve$1(projectRoot, registryPath);
-		updateRegistryFile(registryFilePath, generatedCode);
+		const changed = updateRegistryFile(registryFilePath, generatedCode);
 		logger.debug("✅ Static registry generation complete!");
-		return registryFilePath;
+		return {
+			registryFilePath,
+			changed
+		};
 	};
 	return {
 		name: "storefrontnext:static-registry",
@@ -931,10 +953,12 @@ const staticRegistryPlugin = (config = {}) => {
 			if (normalizedFile.includes(`/${normalizedComponentPath}/`) && (normalizedFile.endsWith(".ts") || normalizedFile.endsWith(".tsx"))) {
 				logger.debug(`🔄 Component file changed: ${file}, regenerating registry...`);
 				try {
-					const registryFilePath = await runRegistryGeneration();
-					const registryModule = server.moduleGraph.getModuleById(registryFilePath);
-					if (registryModule) await server.reloadModule(registryModule);
-					logger.debug("✅ Registry regenerated successfully!");
+					const { registryFilePath, changed } = await runRegistryGeneration();
+					if (changed) {
+						const registryModule = server.moduleGraph.getModuleById(registryFilePath);
+						if (registryModule) await server.reloadModule(registryModule);
+						logger.debug("✅ Registry regenerated successfully!");
+					} else logger.debug("⏭️  Registry unchanged, skipping reload");
 				} catch (error) {
 					logger.error(`❌ Failed to regenerate registry: ${error.message}`);
 				}
@@ -1124,7 +1148,7 @@ const buildMiddlewareRegistryPlugin = () => {
 	/** App source directory (e.g. 'src' or './src') from React Router config. */
 	let appDirectory;
 	return {
-		name: "odyssey:build-middleware-registry",
+		name: "storefront-next:build-middleware-registry",
 		apply: "build",
 		configResolved(config) {
 			resolvedConfig = config;
@@ -1263,7 +1287,7 @@ function platformEntryPlugin() {
 	let userServerEntryPath;
 	let userClientEntryPath;
 	return {
-		name: "odyssey:platform-entry",
+		name: "storefront-next:platform-entry",
 		enforce: "pre",
 		config(_config, { mode }) {
 			isTestMode = mode === "test";
@@ -1364,7 +1388,7 @@ const workspacePlugin = () => {
 
 //#endregion
 //#region src/plugins/componentLoaders.ts
-const traverse = traverseModule.default || traverseModule;
+const traverse$1 = traverseModule.default || traverseModule;
 const generate$1 = generate.default || generate;
 /**
 * Names of exports to strip per environment.
@@ -1394,7 +1418,7 @@ function hasExportCandidate(code, names) {
 */
 function hasComponentDecorator(ast) {
 	let found = false;
-	traverse(ast, { ClassDeclaration(path$2) {
+	traverse$1(ast, { ClassDeclaration(path$2) {
 		const decorators = path$2.node.decorators;
 		if (!decorators) return;
 		for (const decorator of decorators) if (decorator.expression.type === "CallExpression" && isIdentifier(decorator.expression.callee) && decorator.expression.callee.name === "Component") {
@@ -1441,7 +1465,7 @@ function stripExports(code, exportsToStrip, preParsedAst) {
 	let changed = false;
 	const previouslyReferencedIdentifiers = findReferencedIdentifiers(ast);
 	const removedExportLocalNames = /* @__PURE__ */ new Set();
-	traverse(ast, { ExportNamedDeclaration(path$2) {
+	traverse$1(ast, { ExportNamedDeclaration(path$2) {
 		const { declaration, specifiers } = path$2.node;
 		if (declaration && isVariableDeclaration(declaration)) {
 			const remaining = declaration.declarations.filter((decl) => {
@@ -1499,7 +1523,7 @@ function stripExports(code, exportsToStrip, preParsedAst) {
 			}
 		}
 	} });
-	if (changed) traverse(ast, { ExpressionStatement(path$2) {
+	if (changed) traverse$1(ast, { ExpressionStatement(path$2) {
 		if (!path$2.parentPath?.isProgram()) return;
 		if (path$2.node.expression.type === "AssignmentExpression") {
 			const left = path$2.node.expression.left;
@@ -1598,10 +1622,103 @@ function componentLoadersPlugin(config = {}) {
 	};
 }
 
+//#endregion
+//#region src/plugins/ssrSourcemapFix.ts
+const INLINE_SOURCEMAP_PREFIX = "//# sourceMappingURL=data:application/json;base64,";
+/**
+* Vite plugin that fixes SSR sourcemap `sources` to use full module paths
+* instead of bare basenames.
+*
+* **Problem:** When the React Router `v8_viteEnvironmentApi` future flag is
+* enabled, SSR modules are evaluated by Vite's Environment API module runner.
+* Vite's `ssrTransform` generates inline sourcemaps with
+* `sources: [path.basename(url)]` (e.g., `"search.tsx"` or `"index.tsx"`).
+* V8's debugger cannot resolve bare basenames back to files on disk, so
+* Chrome DevTools (via `--inspect`) displays the wrong source file content
+* when pausing at breakpoints — even for files with unique names.
+*
+* **Why `fetchModule`:** A Vite transform plugin cannot fix this because
+* `ssrTransform` runs *after* the plugin transform pipeline and overwrites
+* `map.sources` with `[path.basename(url)]`. The only viable interception
+* point is `fetchModule` — the public API method on `DevEnvironment` that
+* returns the final transformed code (with inline sourcemaps already embedded)
+* to the module runner.
+*
+* **Removable:** If Vite updates `ssrTransform` to use full paths instead of
+* `path.basename()`, this plugin can be deleted with no other changes.
+*
+* Only active in development mode (`configureServer` does not run in build).
+*/
+function ssrSourcemapFixPlugin() {
+	return {
+		name: "storefront-next:ssr-sourcemap-fix",
+		configureServer(server) {
+			const ssrEnv = server.environments.ssr;
+			if (!ssrEnv) return;
+			const originalFetchModule = ssrEnv.fetchModule.bind(ssrEnv);
+			ssrEnv.fetchModule = async (id, importer, options) => {
+				const result = await originalFetchModule(id, importer, options);
+				if (!result || "externalize" in result || "cache" in result || !("code" in result)) return result;
+				const smIndex = result.code.lastIndexOf(INLINE_SOURCEMAP_PREFIX);
+				if (smIndex === -1) return result;
+				try {
+					const base64Start = smIndex + 50;
+					const base64End = result.code.indexOf("\n", base64Start);
+					const base64Data = base64End === -1 ? result.code.slice(base64Start).trim() : result.code.slice(base64Start, base64End).trim();
+					const mapJson = JSON.parse(Buffer.from(base64Data, "base64").toString("utf-8"));
+					if (!mapJson.sources || !Array.isArray(mapJson.sources)) return result;
+					const fileId = result.file || result.id;
+					if (!fileId) return result;
+					if (mapJson.sources.length !== 1) return result;
+					const source = mapJson.sources[0];
+					if (!source || source.includes("/")) return result;
+					mapJson.sources = [fileId];
+					const patchedBase64 = Buffer.from(JSON.stringify(mapJson)).toString("base64");
+					result.code = result.code.slice(0, base64Start) + patchedBase64 + (base64End === -1 ? "" : result.code.slice(base64End));
+				} catch {}
+				return result;
+			};
+		}
+	};
+}
+
+//#endregion
+//#region src/plugins/i18n.ts
+/**
+* Vite plugin that splits locale translation files into per-language chunks.
+*
+* Wraps any existing `manualChunks` configuration so that locale modules are
+* assigned to `locales-{lang}` chunks (e.g., `locales-en-GB`) while all other
+* module IDs are delegated to the user's original `manualChunks` function or object.
+*
+* @param config - Optional configuration for custom locale patterns
+* @returns A Vite plugin that configures locale-based code splitting
+*/
+function i18nPlugin(config) {
+	const pattern = config?.localePattern ?? /\/src\/locales\/([^/]+)\//;
+	return {
+		name: "storefront-next:i18n",
+		apply: "build",
+		config(viteConfig) {
+			const output = viteConfig.build?.rollupOptions?.output;
+			if (Array.isArray(output)) return;
+			const existingManualChunks = output?.manualChunks;
+			return { build: { rollupOptions: { output: { manualChunks(id, meta) {
+				const localeMatch = id.match(pattern);
+				if (localeMatch) return `locales-${localeMatch[1]}`;
+				if (typeof existingManualChunks === "function") return existingManualChunks.call(this, id, meta);
+				if (existingManualChunks && typeof existingManualChunks === "object") {
+					for (const [name, ids] of Object.entries(existingManualChunks)) if (ids.includes(id)) return name;
+				}
+			} } } } };
+		}
+	};
+}
+
 //#endregion
 //#region src/storefront-next-targets.ts
 /**
-* Storefront Next Vite plugin that powers the React Router RSC app.
+* Storefront Next Vite plugin that powers the React Router app.
 * Supports building and optimizing for the managed runtime environment.
 *
 * @param config - Configuration options for the plugin
@@ -1630,13 +1747,15 @@ function storefrontNextTargets(config = {}) {
 	} } = config;
 	const plugins = [
 		...process.env.SCAPI_PROXY_HOST ? [workspacePlugin()] : [],
+		i18nPlugin(),
 		managedRuntimeBundlePlugin(),
 		fixReactRouterManifestUrlsPlugin(),
 		patchReactRouterPlugin(),
 		platformEntryPlugin(),
 		transformTargetPlaceholderPlugin(),
 		watchConfigFilesPlugin(),
-		buildMiddlewareRegistryPlugin()
+		buildMiddlewareRegistryPlugin(),
+		ssrSourcemapFixPlugin()
 	];
 	if (staticRegistry?.componentPath && staticRegistry?.registryPath) {
 		plugins.push(staticRegistryPlugin(staticRegistry));
@@ -1647,6 +1766,97 @@ function storefrontNextTargets(config = {}) {
 	return plugins;
 }
 
+//#endregion
+//#region src/plugins/uiTargetDevMode.ts
+const traverse = traverseModule.default || traverseModule;
+const UI_TARGET_JSX_RE = /<UITarget[\s/>]/;
+/**
+* Vite plugin that adds visual markers to UITarget components in development.
+*
+* PRODUCTION: This plugin is completely inactive - zero overhead.
+* DEVELOPMENT: Transforms UITarget JSX to add visual debugging markers.
+*
+* @example
+* // Source code:
+* <UITarget targetId="pdp.loyalty.badge">
+*   <Widget />
+* </UITarget>
+*
+* // Transformed in DEV mode:
+* <UITargetDevMarker
+*   targetId="pdp.loyalty.badge"
+*   __file__="/src/components/product.tsx"
+*   __hasChildren__={true}
+* >
+*   <Widget />
+* </UITargetDevMarker>
+*/
+function uiTargetDevModePlugin(config = {}) {
+	if (process.env.NODE_ENV === "production") return { name: "storefront-next:ui-target-dev-mode-noop" };
+	if (!(config.enabled ?? process.env.VITE_UI_TARGET_DEV_MODE === "true")) return { name: "storefront-next:ui-target-dev-mode-disabled" };
+	logger.info("🎯 UITarget Dev Mode enabled");
+	if (config.filterCategory) logger.info(`   Filtering to category: ${config.filterCategory} (build-time)`);
+	return {
+		name: "storefront-next:ui-target-dev-mode",
+		enforce: "pre",
+		transform(code, id) {
+			if (!id.match(/\.(tsx|jsx)$/)) return null;
+			if (id.includes("node_modules")) return null;
+			if (id.includes("/targets/ui-target.tsx")) return null;
+			if (!UI_TARGET_JSX_RE.test(code) || !code.includes("from '@/targets/ui-target'")) return null;
+			try {
+				const ast = parse(code, {
+					sourceType: "module",
+					plugins: [
+						"typescript",
+						"jsx",
+						"decorators-legacy"
+					]
+				});
+				let hasTransforms = false;
+				const targetIds = [];
+				traverse(ast, { JSXElement(path$2) {
+					const openingElement = path$2.node.openingElement;
+					if (!isJSXIdentifier(openingElement.name) || openingElement.name.name !== "UITarget") return;
+					const targetIdAttr = openingElement.attributes.find((attr) => isJSXAttribute(attr) && isJSXIdentifier(attr.name) && attr.name.name === "targetId");
+					if (!targetIdAttr) {
+						logger.warn(`UITarget without targetId in ${id}`);
+						return;
+					}
+					const targetId = isStringLiteral(targetIdAttr.value) ? targetIdAttr.value.value : null;
+					if (!targetId) {
+						logger.warn(`UITarget with non-string targetId in ${id}`);
+						return;
+					}
+					if (config.filterCategory && !targetId.startsWith(`${config.filterCategory}.`)) return;
+					const hasChildren = path$2.node.children.length > 0;
+					openingElement.name = jsxIdentifier("UITargetDevMarker");
+					if (path$2.node.closingElement) path$2.node.closingElement.name = jsxIdentifier("UITargetDevMarker");
+					const hint = config.hintMap?.[targetId];
+					openingElement.attributes.push(jsxAttribute(jsxIdentifier("__file__"), stringLiteral(id)), jsxAttribute(jsxIdentifier("__hasChildren__"), jsxExpressionContainer(booleanLiteral(hasChildren))), ...hint ? [jsxAttribute(jsxIdentifier("__hint__"), stringLiteral(hint))] : []);
+					hasTransforms = true;
+					targetIds.push(targetId);
+				} });
+				if (!hasTransforms) return null;
+				const devMarkerImport = importDeclaration([importSpecifier(identifier("UITargetDevMarker"), identifier("UITargetDevMarker"))], stringLiteral("@/lib/ui-target-dev-mode/marker"));
+				ast.program.body.unshift(devMarkerImport);
+				const output = generate(ast, {
+					retainLines: true,
+					compact: false
+				}, code);
+				logger.debug(`Transformed ${targetIds.length} targets in ${id.split("/").pop()}`);
+				return {
+					code: output.code,
+					map: output.map
+				};
+			} catch (error) {
+				logger.error(`Failed to transform UITarget in ${id}:`, error);
+				return null;
+			}
+		}
+	};
+}
+
 //#endregion
 //#region src/plugins/hybridProxy.ts
 /**
@@ -2918,7 +3128,7 @@ const SKIP_DIRECTORIES = [
 	".next",
 	"coverage"
 ];
-const DEFAULT_COMPONENT_GROUP = "odyssey_base";
+const DEFAULT_COMPONENT_GROUP = "storefrontnext_base";
 const ARCH_TYPE_HEADLESS = "headless";
 const VALID_ATTRIBUTE_TYPES = [
 	"string",
@@ -3415,6 +3625,14 @@ async function generateMetadata(projectDirectory, metadataDirectory, options) {
 				}
 			};
 			await scanDirectory(srcDir);
+			const configMetadataDir = join(projectRoot, "config-metadata");
+			try {
+				await access(configMetadataDir);
+				await scanDirectory(configMetadataDir);
+			} catch (error) {
+				if (error.code === "ENOENT") logger.debug(`   - Directory not found (skipping): ${configMetadataDir}`);
+				else logger.warn(`   - Unable to access ${configMetadataDir}:`, error.message);
+			}
 		}
 		const allComponents = [];
 		const allPageTypes = [];
@@ -3471,5 +3689,5 @@ async function generateMetadata(projectDirectory, metadataDirectory, options) {
 }
 
 //#endregion
-export { clearCache, createServer, storefrontNextTargets as default, extractPatterns, generateMetadata, hybridProxyPlugin, loadConfigFromEnv, loadProjectConfig, shouldRouteToNext, testPatterns, transformTargetPlaceholderPlugin, trimExtensions };
+export { clearCache, createServer, storefrontNextTargets as default, extractPatterns, generateMetadata, hybridProxyPlugin, loadConfigFromEnv, loadProjectConfig, shouldRouteToNext, testPatterns, transformTargetPlaceholderPlugin, trimExtensions, uiTargetDevModePlugin };
 //# sourceMappingURL=index.js.map