@mui/internal-docs-infra 0.1.1-alpha.12 → 0.1.1-alpha.14

package/useCode/useTransformManagement.d.ts

@@ -1,16 +1,18 @@
-import type { Code } from "../CodeHighlighter/types.js";
+import type { Code, VariantCode } from "../CodeHighlighter/types.js";
+import { createTransformedFiles } from "./useCodeUtils.js";
+import { CodeHighlighterContextType } from "../CodeHighlighter/CodeHighlighterContext.js";
 interface UseTransformManagementProps {
-  context?: any;
+  context?: CodeHighlighterContextType;
   effectiveCode: Code;
   selectedVariantKey: string;
-  selectedVariant: any;
+  selectedVariant: VariantCode | null;
   initialTransform?: string;
   shouldHighlight: boolean;
 }
 export interface UseTransformManagementResult {
   availableTransforms: string[];
   selectedTransform: string | null;
-  transformedFiles: any;
+  transformedFiles: ReturnType<typeof createTransformedFiles>;
   selectTransform: (transformName: string | null) => void;
 }
 /**

package/useCode/useTransformManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTransformManagement.d.ts","sourceRoot":"","sources":["../../src/useCode/useTransformManagement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAIrD,UAAU,2BAA2B;IACnC,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,aAAa,EAAE,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,GAAG,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,4BAA4B;IAC3C,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,GAAG,CAAC;IACtB,eAAe,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,GAChB,EAAE,2BAA2B,GAAG,4BAA4B,CAqE5D"}
+{"version":3,"file":"useTransformManagement.d.ts","sourceRoot":"","sources":["../../src/useCode/useTransformManagement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAA0B,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAEhF,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AAEvF,UAAU,2BAA2B;IACnC,OAAO,CAAC,EAAE,0BAA0B,CAAC;IACrC,aAAa,EAAE,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,4BAA4B;IAC3C,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;IAC5D,eAAe,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,GAChB,EAAE,2BAA2B,GAAG,4BAA4B,CAqE5D"}

package/useCode/useVariantSelection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Code } from "../CodeHighlighter/types.js";
+import type { Code, VariantCode } from "../CodeHighlighter/types.js";
 interface UseVariantSelectionProps {
   effectiveCode: Code;
   initialVariant?: string;
@@ -7,7 +7,7 @@ interface UseVariantSelectionProps {
 export interface UseVariantSelectionResult {
   variantKeys: string[];
   selectedVariantKey: string;
-  selectedVariant: any;
+  selectedVariant: VariantCode | null;
   selectVariant: React.Dispatch<React.SetStateAction<string>>;
 }
 /**

package/useCode/useVariantSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVariantSelection.d.ts","sourceRoot":"","sources":["../../src/useCode/useVariantSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAGrD,UAAU,wBAAwB;IAChC,aAAa,EAAE,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,yBAAyB;IACxC,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,GAAG,CAAC;IACrB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC7D;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,cAAc,GACf,EAAE,wBAAwB,GAAG,yBAAyB,CA+EtD"}
+{"version":3,"file":"useVariantSelection.d.ts","sourceRoot":"","sources":["../../src/useCode/useVariantSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGlE,UAAU,wBAAwB;IAChC,aAAa,EAAE,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,yBAAyB;IACxC,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC7D;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,cAAc,GACf,EAAE,wBAAwB,GAAG,yBAAyB,CA+EtD"}

package/useDemo/createCodeSandbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCodeSandbox.d.ts","sourceRoot":"","sources":["../../src/useDemo/createCodeSandbox.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYvD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAsBA"}
+{"version":3,"file":"createCodeSandbox.d.ts","sourceRoot":"","sources":["../../src/useDemo/createCodeSandbox.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYvD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAqBA"}

package/useDemo/createCodeSandbox.js

@@ -35,11 +35,10 @@ export function createCodeSandbox(_ref) {
     files: files
   });
 
-  // ref: https://codesandbox.io/docs/api/#define-api
+  // ref: https://codesandbox.io/docs/learn/browser-sandboxes/cli-api#supported-parameters
   var formData = {
     parameters: parameters,
-    embed: '1',
-    query: "module=/".concat(rootFile, "&fontsize=12")
+    query: "file=".concat(rootFile)
   };
   return {
     url: 'https://codesandbox.io/api/v1/sandboxes/define',

package/useDemo/exportVariant.d.ts

@@ -2,7 +2,7 @@
  * Export variant functionality to add extra files like package.json, tsconfig, etc.
  * Users can pass configuration options that vary the output here.
  */
-import type { VariantCode } from "../CodeHighlighter/types.js";
+import type { VariantCode, VariantExtraFiles } from "../CodeHighlighter/types.js";
 /**
  * Extract filename from URL or return undefined if not available
  */
@@ -10,7 +10,7 @@ export declare function getFilenameFromVariant(variantCode: VariantCode): string
 /**
  * Generate a unique entrypoint filename that doesn't conflict with existing files
  */
-export declare function generateEntrypointFilename(existingFiles: Record<string, any>, sourceFilename: string | undefined, useTypescript: boolean, pathPrefix?: string): string;
+export declare function generateEntrypointFilename(existingFiles: VariantExtraFiles, sourceFilename: string | undefined, useTypescript: boolean, pathPrefix?: string): string;
 /**
  * Generate the relative import path from entrypoint to source file
  */
@@ -36,12 +36,26 @@ export interface ExportConfig {
   title?: string;
   /** Description for package.json */
   description?: string;
+  /** The variant name/identifier for this specific code variant */
+  variantName?: string;
+  /**
+   * Language for the HTML document (default is 'en')
+   */
+  language?: string;
   /**
    * Prefix for output file paths (e.g., 'public/' for CRA, '' for Vite)
    * @example
    * htmlPrefix: 'public/' // outputs index.html to correct depth + public/index.html
    */
   htmlPrefix?: string;
+  /**
+   * Prefix for asset files (e.g., 'assets/' for CRA)
+   */
+  assetPrefix?: string;
+  /**
+   * Prefix for code files (e.g., 'src/' for Vite)
+   */
+  sourcePrefix?: string;
   /**
    * Whether the framework handles entrypoint and HTML generation (e.g., CRA with webpack)
    * When true, skips generating index.html and entrypoint files
@@ -50,7 +64,7 @@ export interface ExportConfig {
   /**
    * Custom HTML template function
    * @example
-   * htmlTemplate: ({ language, title, description, head, entrypoint }) =>
+   * htmlTemplate: ({ language, title, description, head, entrypoint, variant, variantName }) =>
    *   `<!doctype html><html><head><title>${title}</title>${head || ''}</head><body><div id="root"></div><script src="${entrypoint}"></script></body></html>`
    */
   htmlTemplate?: (params: {
@@ -59,16 +73,20 @@ export interface ExportConfig {
     description: string;
     head?: string;
     entrypoint: string;
+    variant?: VariantCode;
+    variantName?: string;
   }) => string;
   /**
    * Custom head template function for generating additional head content
    * @example
-   * headTemplate: ({ sourcePrefix, assetPrefix }) =>
+   * headTemplate: ({ sourcePrefix, assetPrefix, variant, variantName }) =>
    *   `<link rel="stylesheet" href="${assetPrefix}/styles.css" />\n<meta name="theme-color" content="#000000" />`
    */
   headTemplate?: (params: {
     sourcePrefix: string;
     assetPrefix: string;
+    variant?: VariantCode;
+    variantName?: string;
   }) => string;
   /** Custom React root index template function */
   rootIndexTemplate?: (params: {
@@ -92,17 +110,37 @@ export interface ExportConfig {
   /** Custom metadata files to add */
   extraMetadataFiles?: Record<string, {
     source: string;
-    metadata?: boolean;
   }>;
   /** Framework-specific files that override default files (index.html, entrypoint, etc.) */
-  frameworkFiles?: Record<string, {
-    source: string;
-    metadata?: boolean;
-  }>;
+  frameworkFiles?: {
+    variant?: VariantCode;
+    globals?: VariantExtraFiles;
+  };
+  /**
+   * Custom export function to use instead of the default exportVariant or exportVariantAsCra
+   * @example
+   * exportFunction: (variantCode, config) => ({ exported: customProcessedCode, rootFile: 'custom-entry.js' })
+   */
+  exportFunction?: (variantCode: VariantCode, config: ExportConfig) => {
+    exported: VariantCode;
+    rootFile: string;
+  };
+  /**
+   * Transform function that runs at the very start of the export process
+   * Can modify the variant code and metadata before any other processing happens
+   * @example
+   * transformVariant: (variant, globals, variantName) => ({
+   *   variant: { ...variant, source: modifiedSource },
+   *   globals: { ...globals, extraFiles: { ...globals.extraFiles, 'theme.css': { source: '.new {}', metadata: true } } }
+   * })
+   */
+  transformVariant?: (variant: VariantCode, variantName?: string, globals?: VariantExtraFiles) => {
+    variant?: VariantCode;
+    globals?: VariantExtraFiles;
+  } | undefined;
 }
 /**
- * Export a VariantCode with additional configuration files
- * Returns an object with the exported VariantCode and rootPath path
+ * Export a variant as a standalone project with metadata files properly scoped
  */
 export declare function exportVariant(variantCode: VariantCode, config?: ExportConfig): {
   exported: VariantCode;

package/useDemo/exportVariant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"exportVariant.d.ts","sourceRoot":"","sources":["../../src/useDemo/exportVariant.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"exportVariant.d.ts","sourceRoot":"","sources":["../../src/useDemo/exportVariant.ts"],"names":[],"mappings":"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"}

package/useDemo/exportVariant.js

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /**
  * Export variant functionality to add extra files like package.json, tsconfig, etc.
  * Users can pass configuration options that vary the output here.
@@ -7,7 +7,37 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 
 import { externalsToPackages } from "../pipeline/loaderUtils/index.js";
 import { getFileNameFromUrl } from "../pipeline/loaderUtils/getFileNameFromUrl.js";
-import { createPathContext } from "./examineVariant.js";
+import { createPathContext } from "../CodeHighlighter/examineVariant.js";
+import { mergeMetadata, extractMetadata } from "../CodeHighlighter/mergeMetadata.js";
+/**
+ * Merges multiple file objects into a single object.
+ * Similar to mergeExternals but for file structures.
+ * Automatically adds metadata: false to files that don't have a metadata property.
+ */
+function mergeFiles() {
+  var merged = {};
+  for (var _len = arguments.length, fileSets = new Array(_len), _key = 0; _key < _len; _key++) {
+    fileSets[_key] = arguments[_key];
+  }
+  for (var _i = 0, _fileSets = fileSets; _i < _fileSets.length; _i++) {
+    var fileSet = _fileSets[_i];
+    for (var _i2 = 0, _Object$entries = Object.entries(fileSet); _i2 < _Object$entries.length; _i2++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i2], 2),
+        fileName = _Object$entries$_i[0],
+        fileData = _Object$entries$_i[1];
+      // Later files override earlier ones (similar to Object.assign behavior)
+      var normalizedData = typeof fileData === 'string' ? {
+        source: fileData
+      } : _objectSpread({}, fileData);
+      // Add metadata: false if not already set (source files default to false)
+      if (!('metadata' in normalizedData)) {
+        normalizedData.metadata = false;
+      }
+      merged[fileName] = normalizedData;
+    }
+  }
+  return merged;
+}
 
 /**
  * Extract filename from URL or return undefined if not available
@@ -30,15 +60,15 @@ export function getFilenameFromVariant(variantCode) {
 export function generateEntrypointFilename(existingFiles, sourceFilename, useTypescript) {
   var pathPrefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
   var ext = useTypescript ? 'tsx' : 'jsx';
-  var candidates = ["".concat(pathPrefix, "index.").concat(ext), "".concat(pathPrefix, "entrypoint.").concat(ext), "".concat(pathPrefix, "main.").concat(ext)];
+  var candidates = ["".concat(pathPrefix, "App.").concat(ext), "".concat(pathPrefix, "entrypoint.").concat(ext), "".concat(pathPrefix, "main.").concat(ext)];
 
   // If we have a source filename, also try variations
   if (sourceFilename) {
     var baseName = sourceFilename.replace(/\.[^.]*$/, '');
     candidates.push("".concat(pathPrefix).concat(baseName, "-entry.").concat(ext));
   }
-  for (var _i = 0, _candidates = candidates; _i < _candidates.length; _i++) {
-    var candidate = _candidates[_i];
+  for (var _i3 = 0, _candidates = candidates; _i3 < _candidates.length; _i3++) {
+    var candidate = _candidates[_i3];
     if (candidate !== "".concat(pathPrefix).concat(sourceFilename) && !existingFiles[candidate]) {
       return candidate;
     }
@@ -74,17 +104,24 @@ export function defaultHtmlTemplate(_ref) {
   return "<!doctype html>\n<html lang=\"".concat(language, "\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>").concat(title, "</title>\n    <meta name=\"description\" content=\"").concat(description, "\" />").concat(head ? "\n    ".concat(head) : '', "\n  </head>\n  <body>\n    <div id=\"root\"></div>").concat(entrypoint ? "\n    <script type=\"module\" src=\"".concat(entrypoint, "\"></script>") : '', "\n  </body>\n</html>");
 }
 /**
- * Export a VariantCode with additional configuration files
- * Returns an object with the exported VariantCode and rootPath path
+ * Export a variant as a standalone project with metadata files properly scoped
  */
 export function exportVariant(variantCode) {
+  var _frameworkFiles$varia;
   var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _config$title = config.title,
     title = _config$title === void 0 ? 'Demo' : _config$title,
     _config$description = config.description,
     description = _config$description === void 0 ? 'Demo created with Vite' : _config$description,
+    variantName = config.variantName,
+    _config$language = config.language,
+    language = _config$language === void 0 ? 'en' : _config$language,
     _config$htmlPrefix = config.htmlPrefix,
     htmlPrefix = _config$htmlPrefix === void 0 ? '' : _config$htmlPrefix,
+    _config$sourcePrefix = config.sourcePrefix,
+    sourcePrefix = _config$sourcePrefix === void 0 ? 'src/' : _config$sourcePrefix,
+    _config$assetPrefix = config.assetPrefix,
+    assetPrefix = _config$assetPrefix === void 0 ? '' : _config$assetPrefix,
     _config$frameworkHand = config.frameworkHandlesEntrypoint,
     frameworkHandlesEntrypoint = _config$frameworkHand === void 0 ? false : _config$frameworkHand,
     htmlTemplate = config.htmlTemplate,
@@ -106,7 +143,23 @@ export function exportVariant(variantCode) {
     _config$extraMetadata = config.extraMetadataFiles,
     extraMetadataFiles = _config$extraMetadata === void 0 ? {} : _config$extraMetadata,
     _config$frameworkFile = config.frameworkFiles,
-    frameworkFiles = _config$frameworkFile === void 0 ? {} : _config$frameworkFile;
+    frameworkFiles = _config$frameworkFile === void 0 ? {} : _config$frameworkFile,
+    transformVariant = config.transformVariant;
+
+  // Use extractMetadata to properly separate metadata and non-metadata files
+  var _extractMetadata = extractMetadata(variantCode),
+    processedVariantCode = _extractMetadata.variant,
+    processedGlobals = _extractMetadata.metadata;
+  if (transformVariant) {
+    var transformed = transformVariant(processedVariantCode, variantName, processedGlobals);
+    if (transformed) {
+      // Re-extract metadata after transformation
+      var result = extractMetadata(transformed.variant || variantCode);
+      processedVariantCode = result.variant;
+      // Combine metadata from extraction with transformed globals
+      processedGlobals = _objectSpread(_objectSpread({}, result.metadata), transformed.globals);
+    }
+  }
 
   // If packageType is explicitly provided (even as undefined), use that value
   var finalPackageType;
@@ -117,50 +170,70 @@ export function exportVariant(variantCode) {
   }
 
   // Get existing extraFiles and source filename
-  var existingExtraFiles = variantCode.extraFiles || {};
-  var sourceFilename = getFilenameFromVariant(variantCode);
+  var sourceFilename = getFilenameFromVariant(processedVariantCode);
 
-  // Get path context to calculate proper URLs
-  var pathContext = createPathContext(variantCode);
+  // Get path context to understand navigation
+  var pathContext = createPathContext(variantCode); // Determine if we need to rename the source file (if it's index.tsx in src dir)
 
-  // Calculate the correct prefix for metadata files based on path depth
-  var metadataPrefix = '../'.repeat(pathContext.maxBackNavigation + 1);
+  var ext = useTypescript ? 'tsx' : 'jsx';
+  var isSourceFileIndex = sourceFilename === "index.".concat(ext);
+  // Use urlDirectory to determine if it's in src root (should only have 'src' as the directory)
+  var isInSrcRoot = pathContext.urlDirectory.length <= 1;
+  var actualSourceFilename = sourceFilename;
+
+  // Use urlDirectory to construct the full path from src root
+  var directoryPath = pathContext.urlDirectory.slice(1).join('/'); // Remove 'src' and join the rest
+  var actualRootFile = directoryPath ? "".concat(sourcePrefix).concat(directoryPath, "/").concat(sourceFilename) : "".concat(sourcePrefix).concat(sourceFilename);
 
-  // Generate unique entrypoint filename
-  var entrypointFilename = generateEntrypointFilename(existingExtraFiles, sourceFilename, useTypescript);
+  // If the source file is index.tsx and it's in the src root, we need to rename it
+  if (isSourceFileIndex && isInSrcRoot) {
+    actualSourceFilename = generateEntrypointFilename(processedVariantCode.extraFiles || {}, sourceFilename, useTypescript);
+    actualRootFile = "".concat(sourcePrefix).concat(actualSourceFilename);
+  }
 
-  // Calculate the entrypoint URL relative to the root
-  var entrypoint = "/src/".concat(pathContext.pathInwardFromRoot).concat(entrypointFilename);
+  // The main entrypoint is always src/index.tsx (or .jsx)
+  var mainEntrypointFilename = "index.".concat(ext);
+  var entrypoint = "".concat(sourcePrefix).concat(mainEntrypointFilename);
 
   // Get relative import path for the main component
-  var rootFile = "src/".concat(pathContext.pathInwardFromRoot).concat(sourceFilename);
-  var importPath = getRelativeImportPath(sourceFilename);
-  var importString = variantCode.namedExport ? "import { ".concat(variantCode.namedExport, " as App } from '").concat(importPath, "';") : "import App from '".concat(importPath, "';");
-
-  // Create new extraFiles object
-  var newExtraFiles = _objectSpread({}, existingExtraFiles);
-
-  // Add framework-specific files (if any)
-  for (var _i2 = 0, _Object$entries = Object.entries(frameworkFiles); _i2 < _Object$entries.length; _i2++) {
-    var _fileData$metadata;
-    var _Object$entries$_i = _slicedToArray(_Object$entries[_i2], 2),
-      fileName = _Object$entries$_i[0],
-      fileData = _Object$entries$_i[1];
-    newExtraFiles[fileName] = {
-      source: fileData.source,
-      metadata: (_fileData$metadata = fileData.metadata) != null ? _fileData$metadata : true
-    };
+  var importPath;
+  if (isInSrcRoot) {
+    // Component is in src root - import directly
+    importPath = getRelativeImportPath(actualSourceFilename);
+  } else {
+    // Component is in a subdirectory - import with full path from src root
+    // Use urlDirectory excluding the root level to get the full directory path
+    var _directoryPath = pathContext.urlDirectory.slice(1).join('/'); // Remove 'src' and join the rest
+    var componentPath = _directoryPath ? "".concat(_directoryPath, "/").concat(actualSourceFilename) : actualSourceFilename;
+    importPath = "./".concat((componentPath || '').replace(/\.[^.]*$/, '')); // Remove extension
+  }
+
+  // Strip /index from the end of import paths since module resolution handles it automatically
+  if (importPath.endsWith('/index')) {
+    importPath = importPath.slice(0, -6); // Remove '/index'
+  }
+  var importString = processedVariantCode.namedExport ? "import { ".concat(processedVariantCode.namedExport, " as App } from '").concat(importPath, "';") : "import App from '".concat(importPath, "';");
+
+  // Collect all files that will be generated
+  var generatedFiles = {};
+
+  // Update the variant's fileName if we renamed it
+  if (isSourceFileIndex && isInSrcRoot && actualSourceFilename && actualSourceFilename !== sourceFilename) {
+    processedVariantCode.fileName = actualSourceFilename;
   }
 
-  // Check if we're using a framework (has framework files)
-  var isFramework = frameworkFiles && Object.keys(frameworkFiles).length > 0;
-  var externalPackages = externalsToPackages(variantCode.externals || []);
+  // Check if they're providing their own framework
+  var isFramework = 'frameworkFiles' in config;
+  var externalPackages = externalsToPackages(processedVariantCode.externals || []);
   var variantDeps = Object.keys(externalPackages).reduce(function (acc, pkg) {
     acc[pkg] = 'latest';
     return acc;
   }, {});
 
-  // Generate package.json (always)
+  // Collect metadata files to be generated
+  var metadataFiles = {};
+
+  // Generate package.json
   var packageJson = _objectSpread(_objectSpread({
     "private": true,
     name: title.toLowerCase().replace(/[^a-z0-9]/g, '-'),
@@ -188,62 +261,35 @@ export function exportVariant(variantCode) {
       '@types/react-dom': 'latest'
     }), devDependencies)
   }, packageJsonFields);
-  newExtraFiles["".concat(metadataPrefix, "package.json")] = {
-    source: JSON.stringify(packageJson, null, 2),
-    metadata: true
+  metadataFiles['package.json'] = {
+    source: JSON.stringify(packageJson, null, 2)
   };
 
   // Generate entrypoint and HTML files unless framework handles them
   if (!frameworkHandlesEntrypoint) {
-    // Add index.html (with configurable prefix for different frameworks)
-    var headContent = headTemplate ? headTemplate({
-      sourcePrefix: '/src',
-      assetPrefix: ''
-    }) : undefined;
-    var htmlContent = htmlTemplate ? htmlTemplate({
-      language: 'en',
-      title: title,
-      description: description,
-      head: headContent,
-      entrypoint: entrypoint
-    }) : defaultHtmlTemplate({
-      language: 'en',
-      title: title,
-      description: description,
-      head: headContent,
-      entrypoint: entrypoint
-    });
-    var htmlFilePath = htmlPrefix ? "".concat(metadataPrefix).concat(htmlPrefix, "index.html") : "".concat(metadataPrefix, "index.html");
-    newExtraFiles[htmlFilePath] = {
-      source: htmlContent,
-      metadata: true
-    };
-
     // Create entrypoint file that imports the main component
     var defaultEntrypointContent = "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\n".concat(importString, "\n\nReactDOM.createRoot(document.getElementById('root')").concat(useTypescript ? '!' : '', ").render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);");
     var entrypointContent = rootIndexTemplate ? rootIndexTemplate({
       importString: importString,
       useTypescript: useTypescript
     }) : defaultEntrypointContent;
-    newExtraFiles[entrypointFilename] = {
-      source: entrypointContent,
-      metadata: false
+    generatedFiles[mainEntrypointFilename] = {
+      source: entrypointContent
     };
   }
 
   // Add Vite config file only if no framework files (Vite-specific)
   if (!isFramework) {
     var viteConfigContent = "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { externalsToPackages } from '../loaderUtils/externalsToPackages';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  define: { 'process.env': {} },\n});";
-    newExtraFiles["".concat(metadataPrefix, "vite.config.").concat(useTypescript ? 'ts' : 'js')] = {
-      source: viteConfigContent,
-      metadata: true
+    metadataFiles["vite.config.".concat(useTypescript ? 'ts' : 'js')] = {
+      source: viteConfigContent
     };
   }
 
-  // Add TypeScript configuration if requested (up one directory, metadata: true)
+  // Add TypeScript configuration if requested
   if (useTypescript) {
     // Check if frameworkFiles already includes a tsconfig
-    var hasFrameworkTsConfig = frameworkFiles && Object.keys(frameworkFiles).some(function (fileName) {
+    var hasFrameworkTsConfig = (frameworkFiles == null ? void 0 : frameworkFiles.globals) && Object.keys(frameworkFiles.globals).some(function (fileName) {
       return fileName.includes('tsconfig.json') && !fileName.includes('tsconfig.node.json');
     });
     if (!hasFrameworkTsConfig) {
@@ -272,9 +318,8 @@ export function exportVariant(variantCode) {
           path: './tsconfig.node.json'
         }]
       });
-      newExtraFiles["".concat(metadataPrefix, "tsconfig.json")] = {
-        source: JSON.stringify(defaultTsConfig, null, 2),
-        metadata: true
+      metadataFiles['tsconfig.json'] = {
+        source: JSON.stringify(defaultTsConfig, null, 2)
       };
     }
 
@@ -291,30 +336,61 @@ export function exportVariant(variantCode) {
         },
         include: ['vite.config.ts']
       };
-      newExtraFiles["".concat(metadataPrefix, "tsconfig.node.json")] = {
-        source: JSON.stringify(nodeTsConfig, null, 2),
-        metadata: true
+      metadataFiles['tsconfig.node.json'] = {
+        source: JSON.stringify(nodeTsConfig, null, 2)
       };
     }
   }
 
-  // Add custom metadata files (respect metadata flag)
-  for (var _i3 = 0, _Object$entries2 = Object.entries(extraMetadataFiles); _i3 < _Object$entries2.length; _i3++) {
-    var _fileData$metadata2;
-    var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i3], 2),
-      _fileName = _Object$entries2$_i[0],
-      _fileData = _Object$entries2$_i[1];
-    newExtraFiles["".concat(metadataPrefix).concat(_fileName)] = {
-      source: _fileData.source,
-      metadata: (_fileData$metadata2 = _fileData.metadata) != null ? _fileData$metadata2 : true
+  // Generate HTML file after all files are ready
+  if (!frameworkHandlesEntrypoint) {
+    // Add index.html
+    var headContent = headTemplate ? headTemplate({
+      sourcePrefix: sourcePrefix,
+      assetPrefix: assetPrefix,
+      variant: processedVariantCode,
+      variantName: variantName
+    }) : undefined;
+    var htmlContent = htmlTemplate ? htmlTemplate({
+      language: language,
+      title: title,
+      description: description,
+      head: headContent,
+      entrypoint: entrypoint,
+      variant: processedVariantCode,
+      variantName: variantName
+    }) : defaultHtmlTemplate({
+      language: language,
+      title: title,
+      description: description,
+      head: headContent,
+      entrypoint: entrypoint
+    });
+    var htmlFileName = htmlPrefix ? "".concat(htmlPrefix, "index.html") : 'index.html';
+    metadataFiles[htmlFileName] = {
+      source: htmlContent
     };
   }
 
-  // Return new VariantCode with updated extraFiles
+  // Merge all metadata files including framework metadata and globals
+  var allMetadataFiles = mergeFiles(processedGlobals || {}, metadataFiles, extraMetadataFiles, frameworkFiles.globals || {});
+
+  // Merge all files using mergeMetadata to properly position everything with 'src/' (sourcePrefix opt) prefix
+  var allSourceFilesWithFramework = mergeFiles(processedVariantCode.extraFiles || {}, generatedFiles, ((_frameworkFiles$varia = frameworkFiles.variant) == null ? void 0 : _frameworkFiles$varia.extraFiles) || {});
+
+  // Update the variant with all source files including framework source files
+  var finalVariantWithSources = _objectSpread(_objectSpread({}, processedVariantCode), {}, {
+    extraFiles: allSourceFilesWithFramework
+  });
+
+  // Use mergeMetadata to position everything correctly
+  var finalVariant = mergeMetadata(finalVariantWithSources, allMetadataFiles, {
+    metadataPrefix: sourcePrefix
+  });
+
+  // Return new VariantCode with properly positioned files
   return {
-    exported: _objectSpread(_objectSpread({}, variantCode), {}, {
-      extraFiles: newExtraFiles
-    }),
-    rootFile: rootFile
+    exported: finalVariant,
+    rootFile: actualRootFile
   };
 }

package/useDemo/flattenVariant.d.ts

@@ -1,6 +1,7 @@
 /**
  * Flatten variant utility to convert a VariantCode into a flat files list
  * Handles relative path resolution and metadata file scoping
+ * Uses addPathsToVariant for the core logic, then flattens the result
  */
 import type { VariantCode } from "../CodeHighlighter/types.js";
 export interface FlatFile {
@@ -13,5 +14,6 @@ export interface FlattenedFiles {
 /**
  * Flatten a VariantCode into a flat files structure
  * Resolves relative paths and handles metadata file scoping
+ * Uses addPathsToVariant for path resolution logic
  */
 export declare function flattenVariant(variant: VariantCode): FlattenedFiles;

package/useDemo/flattenVariant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flattenVariant.d.ts","sourceRoot":"","sources":["../../src/useDemo/flattenVariant.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,0BAA0B,CAAC;AAK3E,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC9B;AAiLD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,cAAc,CA+BnE"}
+{"version":3,"file":"flattenVariant.d.ts","sourceRoot":"","sources":["../../src/useDemo/flattenVariant.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,0BAA0B,CAAC;AAI3E,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,cAAc,CA6BnE"}