@remkoj/optimizely-cms-cli 6.0.0-pre9 → 6.0.0-rc.1

package/dist/index.js

@@ -1,35 +1,52 @@
 import { globSync, glob, globIterate } from 'glob';
 import { config } from 'dotenv';
 import { expand } from 'dotenv-expand';
+import path from 'node:path';
+import fs from 'node:fs';
 import { readPartialEnvConfig, createClient, OptiCmsVersion, ContentRoots } from '@remkoj/optimizely-cms-api';
 import yargs from 'yargs';
 import chalk from 'chalk';
-import path from 'node:path';
-import fs from 'node:fs';
 import figures from 'figures';
 import Table from 'cli-table3';
+import slugify from '@sindresorhus/slugify';
+import { diff } from 'deep-object-diff';
 import fsAsync from 'node:fs/promises';
 import { input, select, confirm } from '@inquirer/prompts';
 import createDeepMerge from '@fastify/deepmerge';
 import { Ajv } from 'ajv';
 import addFormats from 'ajv-formats';
-import GraphQLGen from '@remkoj/optimizely-graph-functions/contenttype-loader';
+import { DocumentGenerator, PropertyCollisionTracker } from '@remkoj/optimizely-graph-functions/generate';
 import deepEqual from 'fast-deep-equal';
 
+function getProjectDir() {
+    let testPath = process.cwd();
+    let hasPackageJson = false;
+    do {
+        hasPackageJson = fs.statSync(path.join(testPath, 'package.json'), { throwIfNoEntry: false })?.isFile() ?? false;
+        if (!hasPackageJson)
+            testPath = path.normalize(path.join(testPath, '..'));
+    } while (!hasPackageJson && testPath.length > 2);
+    if (!hasPackageJson) {
+        throw new Error('No package.json found!');
+    }
+    return testPath;
+}
 /**
  * Prepare the application context, by parsing the .env files in the main
  * application directory.
  *
  * @returns     A string array with the files processed
  */
-function prepare() {
-    const globResult = globSync(".env*");
-    const envFiles = globResult.sort((a, b) => b.length - a.length).filter(n => n == ".env" || n == ".env.local" || (process.env.NODE_ENV && n == `.env.${process.env.NODE_ENV}.local`));
+function prepare(pDir) {
+    const projectDir = pDir ?? getProjectDir();
+    const envFiles = globSync(".env*", { cwd: projectDir })
+        .sort((a, b) => b.length - a.length)
+        .filter(n => n == ".env" || n == ".env.local" || (process.env.NODE_ENV && n == `.env.${process.env.NODE_ENV}.local`));
     expand(config({ path: envFiles, debug: false, quiet: true }));
     return envFiles;
 }
 
-function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
+function createOptiCmsApp(scriptName, version, epilogue, envFiles, projectDir) {
     if (envFiles) {
         process.stdout.write(chalk.bold(`✅ Loaded environment files:`) + "\n");
         envFiles.forEach(envFile => {
@@ -45,11 +62,12 @@ function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
         console.error(chalk.redBright(`${chalk.bold("[ERROR]:")} Error processing environment variables: ${e.message}`));
         process.exit(1);
     }
+    const defaultPath = projectDir ?? process.cwd();
     return yargs(process.argv)
         .scriptName(scriptName)
         .version(version)
         .usage('$0 <cmd> [args]')
-        .option("path", { alias: "p", description: "Application root folder", string: true, type: "string", demandOption: false, default: process.cwd() })
+        .option("path", { alias: "p", description: "Application root folder", string: true, type: "string", demandOption: false, default: defaultPath })
         .option("components", { alias: "c", description: "Path to components folder", string: true, type: "string", demandOption: false, default: "./src/components/cms" })
         .option("cms_url", { alias: "cu", description: "Optimizely CMS URL", string: true, type: "string", demandOption: isDemanded(config.base), default: config.base, coerce: (val) => val ? new URL(val) : undefined })
         .option("client_id", { alias: "ci", description: "API Client ID", string: true, type: "string", demandOption: isDemanded(config.clientId), default: config.clientId })
@@ -133,84 +151,6 @@ function getCmsIntegrationApiOptions(args) {
     return parseArgs(args)._config;
 }
 
-const StylesPushCommand = {
-    command: "styles:push",
-    describe: "Push Visual Builder style definitions into the CMS (create/replace)",
-    builder: (yargs) => {
-        yargs.option('excludeTemplates', { alias: 'e', description: "Exclude these templates", string: true, type: 'array', demandOption: false, default: [] });
-        yargs.option("templates", { alias: 't', description: "Select only these templates", string: true, type: 'array', demandOption: false, default: [] });
-        return yargs;
-    },
-    handler: async (args) => {
-        const { _config: cfg, excludeTemplates, templates, ...opts } = parseArgs(args);
-        const client = createCmsClient(args);
-        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
-            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
-            return;
-        }
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pushing (create/replace) DisplayStyles into Optimizely CMS\n`));
-        const styleDefinitionFiles = await glob("./**/*.opti-style.json", {
-            cwd: opts.components
-        });
-        const results = (await Promise.all(styleDefinitionFiles.map(async (styleDefinitionFile) => {
-            const filePath = path.normalize(path.join(opts.components, styleDefinitionFile));
-            const styleDefinition = tryReadJsonFile(filePath, cfg.debug);
-            const styleKey = styleDefinition.key;
-            if (!styleKey) {
-                process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} The style definition in ${path.relative(opts.path, filePath)} does not have a key defined\n`));
-                return undefined;
-            }
-            if (excludeTemplates.includes(styleKey))
-                return undefined; // Skip excluded styles
-            if (templates.length > 0 && !templates.includes(styleKey))
-                return undefined; // Only include defined styles, if any
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Pushing: ${styleKey}\n`));
-            // Try to fetch the current template
-            const currentTemplate = await client.displayTemplatesGet({ path: { key: styleKey } }).catch(() => { return undefined; });
-            // Create / Replace the current template
-            const newTemplate = await (currentTemplate ?
-                client.displayTemplatesPatch({ path: { key: styleKey }, body: styleDefinition }) :
-                client.displayTemplatesCreate({ body: styleDefinition }));
-            return newTemplate;
-        }))).filter(isNotNullOrUndefined);
-        const styles = new Table({
-            head: [
-                chalk.yellow(chalk.bold("Name")),
-                chalk.yellow(chalk.bold("Key")),
-                chalk.yellow(chalk.bold("Default")),
-                chalk.yellow(chalk.bold("Target"))
-            ],
-            colWidths: [31, 20, 9, 20],
-            colAligns: ["left", "left", "center", "left"]
-        });
-        results.forEach(tpl => {
-            styles.push([
-                tpl.displayName,
-                tpl.key,
-                tpl.isDefault ? figures.tick : figures.cross,
-                tpl.contentType ? `${tpl.contentType} (C)` : tpl.baseType ? `${tpl.baseType} (B)` : `${tpl.nodeType} (N)`
-            ]);
-        });
-        process.stdout.write(styles.toString() + "\n");
-        process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
-    }
-};
-function tryReadJsonFile(filePath, debug = false) {
-    try {
-        if (debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Reading style definition from ${filePath}\n`));
-        return JSON.parse(fs.readFileSync(filePath, { encoding: 'utf-8' }));
-    }
-    catch (e) {
-        process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} Error while reading ${filePath}\n`));
-    }
-    return undefined;
-}
-function isNotNullOrUndefined(i) {
-    return i ? true : false;
-}
-
 /**
  * This file contains tools that allow using the project that we're targeting
  */
@@ -223,8 +163,12 @@ function isNotNullOrUndefined(i) {
  * @returns
  */
 function getContentTypePaths(contentType, basePath, createFolder = false, debug = false) {
-    const baseTypeSlug = typeToSlug(contentType.baseType);
-    const typePath = path.join(basePath, baseTypeSlug, contentType.key);
+    const baseTypeSlug = keyToSlug(contentType.baseType, {
+        defaultKey: 'global',
+        stripLeadingUnderscore: true
+    });
+    const typeSlug = keyToSlug(contentType.key);
+    const typePath = path.join(basePath, baseTypeSlug, typeSlug);
     if (createFolder) {
         if (!fs.existsSync(typePath)) {
             fs.mkdirSync(typePath, { recursive: true });
@@ -235,10 +179,10 @@ function getContentTypePaths(contentType, basePath, createFolder = false, debug
         if (!fs.statSync(typePath).isDirectory())
             throw new Error(`The folder ${typePath} for Content-Type ${contentType.key} exists, but is not a directory!`);
     }
-    const typeFile = path.join(typePath, `${contentType.key}.opti-type.json`);
-    const fragmentFile = path.join(typePath, `${contentType.key}.${baseTypeSlug}.graphql`);
-    const propertyFragmentFile = path.join(typePath, `${contentType.key}.property.graphql`);
-    const queryFile = path.join(typePath, `get${contentType.key}Data.query.graphql`);
+    const typeFile = path.join(typePath, `${typeSlug}.opti-type.json`);
+    const fragmentFile = path.join(typePath, `${typeSlug}.${baseTypeSlug}.graphql`);
+    const propertyFragmentFile = path.join(typePath, `${typeSlug}.property.graphql`);
+    const queryFile = path.join(typePath, `${typeSlug}.query.graphql`);
     const componentFile = path.join(typePath, `index.tsx`);
     return {
         type: contentType.key,
@@ -251,16 +195,167 @@ function getContentTypePaths(contentType, basePath, createFolder = false, debug
         queryFile
     };
 }
+function getStyleFilePathsSync(displayTemplate, contentBaseType = '_Component', basePath = './src/components/cms', createFolder = false) {
+    const displayTemplateType = getDisplayTemplateType(displayTemplate);
+    let target;
+    let groupPath;
+    switch (displayTemplateType) {
+        case 'base':
+            groupPath = path.join(keyToSlug(displayTemplate.baseType, { stripLeadingUnderscore: true }), 'styles');
+            target = displayTemplate.baseType;
+            break;
+        case 'node':
+            groupPath = path.join('nodes', keyToSlug(displayTemplate.nodeType));
+            target = displayTemplate.nodeType;
+            break;
+        case 'component':
+            const baseType = contentBaseType;
+            target = displayTemplate.contentType;
+            groupPath = path.join(keyToSlug(baseType, { stripLeadingUnderscore: true }), keyToSlug(displayTemplate.contentType, { stripLeadingGroup: true }));
+            break;
+        default:
+            throw new Error(`Unsupported DisplayTemplate target for ${displayTemplate.key}`);
+    }
+    const displayTemplateKeySlug = keyToSlug(displayTemplate.key ?? 'displayTemplate', { stripLeadingGroup: true });
+    const groupFolder = path.join(basePath, groupPath);
+    const styleFolder = displayTemplateType === 'component' ? groupFolder : path.join(groupFolder, displayTemplateKeySlug);
+    if (createFolder && !fs.existsSync(styleFolder))
+        fs.mkdirSync(styleFolder, { recursive: true });
+    return {
+        styleFile: path.join(styleFolder, displayTemplateKeySlug + '.opti-style.json'),
+        helperFile: path.join(groupFolder, 'displayTemplates.ts'),
+        identifier: `${displayTemplateType}/${target}`,
+        helperFolder: groupFolder,
+        styleFolder
+    };
+}
+async function getStyleFilePaths(definition, opts) {
+    let defintionBaseType = undefined;
+    if (definition.contentType && !opts.contentBaseType && opts.client) {
+        const contentType = await opts.client.contentTypesGet({ path: { key: definition.contentType } }).catch(() => undefined);
+        defintionBaseType = contentType?.baseType;
+    }
+    else {
+        defintionBaseType = opts.contentBaseType;
+    }
+    return getStyleFilePathsSync(definition, defintionBaseType, opts.basePath, opts.createFolder);
+}
 /**
+ * Simple logic to create path slugs for storing ContentType related files on
+ * disk.
  *
- * @param typeKey
+ * @param   typeKey
+ * @param   stripLeadingUnderscore
  * @returns
  */
-function typeToSlug(typeKey) {
-    let typeKeySlug = typeKey.toLowerCase();
-    if (typeKeySlug.startsWith('_'))
-        typeKeySlug = typeKeySlug.substring(1);
-    return typeKeySlug;
+function keyToSlug(typeKey, options = {}) {
+    // Destruct the configuration into the parts we need
+    const { stripLeadingGroup = true, defaultKey = 'unknown', stripLeadingUnderscore = false, ...slugifyBaseConfig } = options;
+    const slugifyConfig = {
+        ...slugifyBaseConfig,
+        preserveLeadingUnderscore: !stripLeadingUnderscore
+    };
+    // First make sure we have a valid input type
+    if (!(typeof typeKey === 'string' || typeKey === undefined || typeKey === null))
+        throw new Error(`Invalid typeKey provided, expected an optional string, received a value of type ${typeof typeKey}`);
+    // Then, take the prefix out, if any and required
+    const toSlugify = stripLeadingGroup && typeKey?.indexOf(":") >= 0 ? typeKey.split(":", 2).at(1) : typeKey;
+    // Finally slugify the result
+    return slugify(toSlugify ?? defaultKey, slugifyConfig);
+}
+function getDisplayTemplateType(displayTemplate) {
+    const templateType = displayTemplate.baseType ? 'base' : displayTemplate.nodeType ? 'node' : displayTemplate.contentType ? 'component' : 'unknown';
+    return templateType;
+}
+
+/**
+ * Test if the value must be included in a set, by defining allowed values and blocked values. A value
+ * is considered be eligible to be included when it's both allowed an not disallowed.
+ *
+ * @param value               The value to test
+ * @param allow               The list of allowed values, when not provided, or and empty array, all
+ *                            values will be allowed.
+ * @param disallow            The list of explicitly disallowed values, yielding an "all allowed but
+ *                            these" operation
+ * @param compareSlugified    When set to `true`, and after test with `includes()` on the allow and
+ *                            disallow did not yield a match, will try to match by converting the
+ *                            values to string (using the `.toString()` method), then slugify them with
+ *                            the `keyToSlug` method and then comparing the outcomes.
+ * @param slugifyOptions      The options to provide to the `keyToSlug` method, this will be ignored
+ *                            unless you set the `compareSlugified` parameter to `true`
+ * @returns                   If the value should be included in the result, based upon the `allow` and
+ *                            `disallow` configuration.
+ *
+ * @see {@link keyToSlug}
+ */
+function shouldInclude(value, allow, disallow, compareSlugified = false, slugifyOptions) {
+    // Do not include null or undefined values
+    if (value === null || value === undefined)
+        return false;
+    // Item is allowed when either allow is not set, an empty array or has the value
+    const isAllowed = !Array.isArray(allow) || allow.length === 0 || allow.includes(value) || (compareSlugified && allow.some(av => keyToSlug(av.toString(), slugifyOptions) === keyToSlug(value.toString(), slugifyOptions)));
+    // Item is disallowed when and the array is set and includes the value
+    const isDisallowed = Array.isArray(disallow) && (disallow.includes(value) || (compareSlugified && disallow.some(av => keyToSlug(av.toString(), slugifyOptions) === keyToSlug(value.toString(), slugifyOptions))));
+    // Return the outcome
+    return isAllowed && !isDisallowed;
+}
+/**
+ * Test if the provided content type is a contract
+ *
+ * @param     contentType     The ContentType to test
+ * @returns   `true` if the ContentType is a contract, `false` otherwise
+ * @see {@link IntegrationApi.ContentType}
+ */
+function isContract(contentType) {
+    if (typeof contentType !== 'object' || contentType === null)
+        return false;
+    return contentType.isContract || contentType.source === 'globalcontract';
+}
+/**
+ * Test if the provided content type comes from the Graph content source (e.g. external content)
+ *
+ * @param     contentType     The ContentType to test
+ * @returns   `true` if the ContentType is a graph type, `false` otherwise
+ * @see {@link IntegrationApi.ContentType}
+ */
+function isGraphType(contentType) {
+    if (typeof contentType !== 'object' || contentType === null)
+        return false;
+    return (contentType.key && typeof (contentType.key) === 'string' && contentType.key.startsWith('graph:')) || contentType.source === 'graph';
+}
+/**
+ * Test if the provided content type is a folder, which is a structural element for editors, but
+ * does not represent anything significant when working with ContentType
+ *
+ * @param     contentType     The ContentType to test
+ * @returns   `true` if the ContentType is a folder, `false` otherwise
+ * @see {@link IntegrationApi.ContentType}
+ */
+function isFolder(contentType) {
+    if (typeof contentType !== 'object' || contentType === null)
+        return false;
+    return contentType.baseType === '_folder';
+}
+/**
+ * Test if the provided content type is a system type
+ *
+ * @param     contentType     The ContentType to test
+ * @returns   `true` if the ContentType is a folder, `false` otherwise
+ * @see {@link IntegrationApi.ContentType}
+ */
+function isSystemType(contentType) {
+    if (typeof contentType !== 'object' || contentType === null)
+        return false;
+    return contentType.source === 'system';
+}
+function isNonEmptyArray(toTest) {
+    return Array.isArray(toTest) && toTest.length > 0;
+}
+function isEmptyArray(toTest) {
+    return toTest === null || !Array.isArray(toTest) || toTest.length === 0;
+}
+function isDefined(toTest) {
+    return toTest !== null && toTest !== undefined;
 }
 
 const ContentTypesArgsDefaults = {
@@ -283,28 +378,41 @@ async function getContentTypes(client, args, pageSize = 25, allowSystem = false,
     const allContentTypes = [];
     const filteredContentTypes = [];
     for await (const contentType of getAllContentTypes(client, cfg.debug, pageSize)) {
-        // Skip content types mapped against Graph data, these should be used with their source type in Graph, not the reference in CMS
-        if (!all && contentType.key.toLowerCase().startsWith('graph:')) {
+        // Skip contracts by default as they're abstract classes and cannot be used to directly store data.
+        if (!all && isContract(contentType)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key || contentType.displayName || "unnamed type"} as it is a contract and cannot be instantiated directly, use --all to include\n`));
+            continue;
+        }
+        // Skip content types mapped against Graph data, these should be used with their source type in Graph, 
+        // not the reference in CMS
+        if (!all && isGraphType(contentType)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it is a reference to external data in Optimizely Graph, use --all to include\n`));
+            continue;
+        }
+        // Skip folder types as these are non-data carrying types in the instance.
+        if (!all && isFolder(contentType)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it is a reference to external data in Optimizely Graph\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it is a folder, use --all to include\n`));
             continue;
         }
         // Build the unfiltered array
         allContentTypes.push(contentType);
         // Skip based upon base type filters
-        if (!shouldInclude(typeToSlug(contentType.baseType), baseTypes.map(x => typeToSlug(x)), excludeBaseTypes.map(x => typeToSlug(x)))) {
+        if (!shouldInclude(contentType.baseType, baseTypes, excludeBaseTypes, true)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it has a restricted base type: ${contentType.baseType}\n`));
             continue;
         }
         // Skip based upon type filters
-        if (!shouldInclude(contentType.key, types, excludeTypes)) {
+        if (!shouldInclude(contentType.key, types, excludeTypes, true)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it has a restricted type: ${contentType.key}\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it is a restricted type (${types.join(', ')})(${excludeTypes.join(', ')})\n`));
             continue;
         }
         // Skip based upon system filter
-        if (contentType.source == 'system' && !allowSystem) {
+        if (!allowSystem && isSystemType(contentType)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${contentType.key} due to it being a system type\n`));
             continue;
@@ -322,13 +430,6 @@ async function getContentTypes(client, args, pageSize = 25, allowSystem = false,
         process.stdout.write(chalk.gray(`${figures.arrowRight} Applied content type filters, reduced from ${allContentTypes.length} to ${filteredContentTypes.length} items\n`));
     return { all: allContentTypes, contentTypes: filteredContentTypes };
 }
-function shouldInclude(value, allow, disallow) {
-    // Item is allowed when either allow is not set, an empty array or has the value
-    const isAllowed = !Array.isArray(allow) || allow.length === 0 || allow.includes(value);
-    // Item is disallowed when and the array is set and includes the value
-    const isDisallowed = Array.isArray(disallow) && disallow.includes(value);
-    return isAllowed && !isDisallowed;
-}
 /**
  * Retrieve all content types as an Async Generator, allowing processing of entries whilest they are being loaded from the CMS instance.
  *
@@ -376,50 +477,60 @@ const stylesBuilder = yargs => {
     return newArgs;
 };
 async function getStyles(client, args, pageSize = 25) {
-    if (client.runtimeCmsVersion == OptiCmsVersion.CMS12)
-        return { all: [], styles: [] };
-    const { _config: cfg, excludeBaseTypes, excludeTypes, excludeNodeTypes, excludeTemplates, baseTypes, types, nodes, templates, templateTypes } = parseArgs(args);
+    const { _config: cfg, excludeBaseTypes: disallowBaseTypes, excludeTypes: disallowTypes, excludeNodeTypes: disallowNodeTypes, excludeTemplates: disallowTemplates, baseTypes: allowBaseTypes, types: allowTypes, nodes: allowNodeTypes, templates: allowTemplates, templateTypes: baseAllowTemplateTypes } = parseArgs(args);
     process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Style-Definitions from Optimizely CMS\n`));
+    const allowTemplateTypes = [];
+    if (!Array.isArray(baseAllowTemplateTypes) || baseAllowTemplateTypes.length === 0) {
+        if (isNonEmptyArray(allowBaseTypes)) {
+            console.log('BT', allowBaseTypes);
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Base picking filter is active, adjusting template type filter to pick templates targeting a base type\n`));
+            allowTemplateTypes.push('base');
+        }
+        if (isNonEmptyArray(allowNodeTypes)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Node type filter active, adjusting template type filter\n`));
+            allowTemplateTypes.push('node');
+        }
+        if (isNonEmptyArray(allowTypes)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Component type filter active, adjusting template type filter\n`));
+            allowTemplateTypes.push('component');
+        }
+    }
+    else {
+        allowTemplateTypes.push(...baseAllowTemplateTypes);
+    }
     const allDisplayTemplates = [];
     const filteredDisplayTemplates = [];
     for await (const displayTemplate of getAllStyles(client, cfg.debug, pageSize)) {
         allDisplayTemplates.push(displayTemplate);
-        const templateType = displayTemplate.baseType ? 'base' : displayTemplate.nodeType ? 'node' : displayTemplate.contentType ? 'component' : 'unknown';
-        if (isExcluded(displayTemplate.key, excludeTemplates, templates)) {
+        const templateType = getDisplayTemplateType(displayTemplate);
+        if (!shouldInclude(displayTemplate.key, allowTemplates, disallowTemplates)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style defintion key filtering active\n`));
             continue;
         }
-        if (isExcluded(templateType, [], templateTypes)) {
+        if (!shouldInclude(templateType, allowTemplateTypes)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style type filtering is active\n`));
             continue;
         }
-        if (displayTemplate.baseType && isExcluded(displayTemplate.baseType, excludeBaseTypes, baseTypes)) {
+        if (templateType === 'base' && !shouldInclude(displayTemplate.baseType, allowBaseTypes, disallowBaseTypes)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is defined at base type level and base type filtering is active\n`));
             continue;
         }
-        if (displayTemplate.contentType && isExcluded(displayTemplate.contentType, excludeTypes, types)) {
+        if (templateType === 'component' && !shouldInclude(displayTemplate.contentType, allowTypes, disallowTypes)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is defined at component type level and component type filtering is active\n`));
             continue;
         }
-        if (templateType != 'component' && types.length > 0) {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is targeting the ${templateType} level and component type selection is active\n`));
-            continue;
-        }
-        if (displayTemplate.nodeType && isExcluded(displayTemplate.nodeType, excludeNodeTypes, nodes)) {
+        if (templateType === 'node' && !shouldInclude(displayTemplate.nodeType, allowNodeTypes, disallowNodeTypes)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is defined at node type level and node type filtering is active\n`));
             continue;
         }
-        if (templateType != 'node' && nodes.length > 0) {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is targeting the ${templateType} level and node type selection is active\n`));
-            continue;
-        }
         filteredDisplayTemplates.push(displayTemplate);
     }
     if (cfg.debug)
@@ -430,8 +541,6 @@ async function getStyles(client, args, pageSize = 25) {
     };
 }
 async function* getAllStyles(client, debug = false, pageSize = 5) {
-    if (client.runtimeCmsVersion == OptiCmsVersion.CMS12)
-        return;
     let requestPageSize = pageSize;
     let requestPageIndex = 0;
     let totalItemCount = 0;
@@ -459,26 +568,268 @@ async function* getAllStyles(client, debug = false, pageSize = 5) {
         }
     } while (requestPageIndex < totalPages);
 }
-function isExcluded(value, exclusions, inclusions) {
-    if (value == undefined || value == null)
-        return false;
-    return exclusions.includes(value) || (inclusions.length > 0 && !inclusions.includes(value));
-}
-async function getStyleFilePath(definition, opts) {
-    if (definition.nodeType)
-        return `nodes/${definition.nodeType}/${definition.key}/${definition.key}.opti-style.json`;
-    if (definition.baseType)
-        return `${definition.baseType}/styles/${definition.key}/${definition.key}.opti-style.json`;
-    if (definition.contentType) {
-        if (opts?.contentBaseType)
-            return `${opts?.contentBaseType}/${definition.contentType}/${definition.key}.opti-style.json`;
-        if (!opts?.client)
-            throw new Error("Neither the contentBaseType, nor the ApiClient has been provided for a definition for a specific ContentType - unable to generate the path");
-        const contentType = await opts.client.contentTypesGet({ path: { key: definition.contentType } }).catch(() => undefined);
-        if (contentType)
-            return `${contentType.baseType}/${definition.contentType}/${definition.key}.opti-style.json`;
+class TypeFilesList extends Map {
+    getDisplayTemplateByKey(displayTemplateKey) {
+        for (const groupKey of this.keys()) {
+            const templates = this.get(groupKey)?.templates || [];
+            const displayTemplate = templates.find(x => x.key === displayTemplateKey);
+            if (displayTemplate)
+                return displayTemplate.data;
+        }
+        return undefined;
+    }
+    getDisplayTemplatePathsByKey(displayTemplateKey) {
+        for (const identifier of this.keys()) {
+            const groupInfo = this.get(identifier);
+            const templates = groupInfo?.templates || [];
+            const helperFile = groupInfo?.filePath;
+            const helperFolder = groupInfo?.fileFolder;
+            const info = templates.find(x => x.key === displayTemplateKey);
+            if (info)
+                return {
+                    styleFile: info.file,
+                    styleFolder: info.folder,
+                    identifier,
+                    helperFile,
+                    helperFolder
+                };
+        }
+        return undefined;
+    }
+}
+async function toTypeFilesList(displayTemplates, client, basePath) {
+    if (isNonEmptyArray(displayTemplates)) {
+        // Get all content types we need to get the type file lists
+        const targetContentTypes = (await Promise.allSettled(displayTemplates.map(async (displayTemplate) => {
+            if (!displayTemplate.contentType)
+                return undefined;
+            return client.contentTypesGet({ path: { key: displayTemplate.contentType } });
+        }))).map(x => x.status == 'fulfilled' ? x.value : undefined).filter(isDefined);
+        // Simple helper to get the base type from the list
+        function getBaseTypeOf(contentTypeKey) {
+            if (!contentTypeKey)
+                return undefined;
+            return targetContentTypes.find(x => x.key === contentTypeKey)?.baseType;
+        }
+        // Now reduce the list into the Map we need
+        return displayTemplates.reduce((aggregator, displayTemplate) => {
+            const contentTypeBaseType = getBaseTypeOf(displayTemplate.contentType);
+            const { identifier, helperFile, helperFolder, styleFile, styleFolder } = getStyleFilePathsSync(displayTemplate, contentTypeBaseType, basePath, true);
+            const info = aggregator.get(identifier) ?? { filePath: helperFile, fileFolder: helperFolder, templates: [] };
+            info.templates.push({ key: displayTemplate.key, file: styleFile, data: displayTemplate, folder: styleFolder });
+            aggregator.set(identifier, info);
+            return aggregator;
+        }, new TypeFilesList());
+    }
+    return new TypeFilesList();
+}
+
+function normalizeMergePatch(value, omitKeys, requiredKeys = [], requiredSource) {
+    if (value === undefined || value === null)
+        return null;
+    if (Array.isArray(value))
+        return value.map(item => normalizeMergePatch(item, omitKeys));
+    if (typeof value !== 'object')
+        return value;
+    const output = Object.entries(value).reduce((acc, [key, entry]) => {
+        if (!omitKeys.includes(key))
+            acc[key] = normalizeMergePatch(entry, omitKeys);
+        return acc;
+    }, {});
+    const withRequiredKeys = requiredKeys.reduce((acc, key) => {
+        if (requiredSource && !Object.keys(acc).includes(key))
+            acc[key] = requiredSource[key];
+        return acc;
+    }, output);
+    return withRequiredKeys;
+}
+/**
+ * Computes a JSON Merge Patch (RFC 7396) that transforms `currentValue` into `newValue`.
+ *
+ * The resulting patch can be sent directly as the request body of an `application/merge-patch+json`
+ * request. Changed and added properties are included with their new value; removed properties are
+ * included with a `null` value (as required by RFC 7396); unchanged properties are omitted entirely.
+ *
+ * @see https://datatracker.ietf.org/doc/html/rfc7396
+ *
+ * @example Basic usage
+ * ```ts
+ * const current = { name: 'Alice', age: 30, role: 'user' }
+ * const updated = { name: 'Alice', age: 31 }
+ *
+ * generatePatch(current, updated)
+ * // => { age: 31, role: null }
+ * //   `age` is replaced, `role` is removed (null), `name` is unchanged (omitted)
+ * ```
+ *
+ * @example Excluding keys from the patch
+ * ```ts
+ * const current = { id: '123', name: 'Alice', version: 1 }
+ * const updated = { id: '123', name: 'Bob',   version: 2 }
+ *
+ * generatePatch(current, updated, { readonlyFields: ['id', 'version'] })
+ * // => { name: 'Bob' }
+ * //   `id` and `version` are excluded even though they are present in the diff
+ * ```
+ *
+ * @example Always include required fields
+ * ```ts
+ * const current = { id: '123', name: 'Alice', version: 1 }
+ * const updated = { id: '123', name: 'Alice', version: 2 }
+ *
+ * generatePatch(current, updated, { requiredFields: ['id'] })
+ * // => { id: '123', version: 2 }
+ * //   `id` is included even though it did not change
+ * ```
+ *
+ * @example Nested objects
+ * ```ts
+ * const current = { address: { city: 'Amsterdam', zip: '1000AA' } }
+ * const updated = { address: { city: 'Utrecht' } }
+ *
+ * generatePatch(current, updated)
+ * // => { address: { city: 'Utrecht', zip: null } }
+ * ```
+ *
+ * @param currentValue - The current state of the resource.
+ * @param newValue     - The desired state of the resource.
+ * @param options      - Optional configuration.
+ * @param options.readonlyFields - Keys that should never appear in the generated patch,
+ *                           regardless of whether they changed.
+ * @param options.requiredFields - Keys that should always appear in the generated patch,
+ *                           using values from `newValue`.
+ * @returns A {@link MergePatch} object ready to be serialised as an `application/merge-patch+json` body.
+ */
+function generatePatch(currentValue, newValue, options = {}) {
+    const requiredKeys = options.requiredFields ?? [];
+    const omitKeys = (options.readonlyFields ?? []).filter(key => !requiredKeys.includes(key));
+    const patch = diff(currentValue, newValue);
+    return normalizeMergePatch(patch, omitKeys, requiredKeys, newValue);
+}
+/**
+ * Extracts all field paths from a {@link MergePatch} as dot-separated strings.
+ * Nested objects are flattened recursively; leaf values (including `null`) produce a path entry.
+ *
+ * @example
+ * ```ts
+ * getPatchFields({ a: { b: 0 }, c: 'value' })
+ * // => ['a.b', 'c']
+ * ```
+ *
+ * @param patch  - The merge patch to extract fields from.
+ * @param prefix - Internal prefix used during recursion; omit when calling directly.
+ * @returns An array of dot-separated field path strings.
+ */
+function getPatchFields(patch, prefix = '') {
+    return Object.entries(patch).flatMap(([key, value]) => {
+        const path = prefix ? `${prefix}.${key}` : key;
+        return typeof value === 'object' && value !== null && !Array.isArray(value)
+            ? getPatchFields(value, path)
+            : [path];
+    });
+}
+
+const StylesPushCommand = {
+    command: "styles:push",
+    describe: "Push Visual Builder style definitions into the CMS (create/replace)",
+    builder: (yargs) => {
+        yargs.option('excludeTemplates', { alias: 'e', description: "Exclude these templates", string: true, type: 'array', demandOption: false, default: [] });
+        yargs.option("templates", { alias: 't', description: "Select only these templates", string: true, type: 'array', demandOption: false, default: [] });
+        return yargs;
+    },
+    handler: async (args) => {
+        const { _config: cfg, excludeTemplates, templates, ...opts } = parseArgs(args);
+        const client = createCmsClient(args);
+        const { styles: displayTemplates } = await getStyles(client, {
+            all: false,
+            baseTypes: [],
+            excludeBaseTypes: [],
+            excludeNodeTypes: [],
+            excludeTemplates: [],
+            excludeTypes: [],
+            nodes: [],
+            templates: [],
+            templateTypes: [],
+            types: [],
+            ...args
+        }, 50);
+        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pushing (create/replace) DisplayStyles into Optimizely CMS\n`));
+        const styleDefinitionFiles = await glob("./**/*.opti-style.json", {
+            cwd: opts.components
+        });
+        const results = (await Promise.allSettled(styleDefinitionFiles.map(async (styleDefinitionFile) => {
+            const filePath = path.normalize(path.join(opts.components, styleDefinitionFile));
+            const styleDefinition = tryReadJsonFile(filePath, cfg.debug);
+            const styleKey = styleDefinition.key;
+            if (!styleKey) {
+                process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} The style definition in ${path.relative(opts.path, filePath)} does not have a key defined\n`));
+                return undefined;
+            }
+            if (excludeTemplates.includes(styleKey))
+                return undefined; // Skip excluded styles
+            if (templates.length > 0 && !templates.includes(styleKey))
+                return undefined; // Only include defined styles, if any
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Pushing: ${styleKey}\n`));
+            // Try to fetch the current template
+            const currentTemplate = displayTemplates.find(dt => dt.key === styleKey);
+            // Create / Replace the current template
+            const newTemplate = await (currentTemplate ? (async () => {
+                const patch = generatePatch(currentTemplate, styleDefinition, {
+                    readonlyFields: ['key', 'created', 'lastModified', 'createdBy', 'lastModifiedBy']
+                });
+                if (!path || Object.entries(patch).length === 0)
+                    return currentTemplate;
+                // @ts-expect-error There's a mis-match between the logic in the CMS and the contents of the 
+                // OpenAPI Spec file.
+                return client.displayTemplatesPatch({ path: { key: styleKey }, body: patch });
+            })() :
+                client.displayTemplatesCreate({ body: styleDefinition }));
+            const missedFields = generatePatch(newTemplate, currentTemplate, {
+                readonlyFields: ['key', 'created', 'lastModified', 'createdBy', 'lastModifiedBy']
+            });
+            if (missedFields && Object.keys(missedFields).length > 0)
+                throw new Error(`The Display template ${styleKey} failed to update properties: ${getPatchFields(missedFields).join('; ')}`);
+            return newTemplate;
+        })));
+        const styles = new Table({
+            head: [
+                chalk.yellow(chalk.bold("Name")),
+                chalk.yellow(chalk.bold("Key")),
+                chalk.yellow(chalk.bold("Default")),
+                chalk.yellow(chalk.bold("Target"))
+            ],
+            colWidths: [31, 20, 9, 20],
+            colAligns: ["left", "left", "center", "left"]
+        });
+        results.forEach(result => {
+            if (result.status === 'fulfilled') {
+                const tpl = result.value;
+                styles.push([
+                    tpl.displayName,
+                    tpl.key,
+                    tpl.isDefault ? figures.tick : figures.cross,
+                    tpl.contentType ? `${tpl.contentType} (C)` : tpl.baseType ? `${tpl.baseType} (B)` : `${tpl.nodeType} (N)`
+                ]);
+            }
+            else {
+                process.stderr.write(`Error processing DisplayTemplate: ${result.reason}\n`);
+            }
+        });
+        process.stdout.write(styles.toString() + "\n");
+        process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+    }
+};
+function tryReadJsonFile(filePath, debug = false) {
+    try {
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Reading style definition from ${filePath}\n`));
+        return JSON.parse(fs.readFileSync(filePath, { encoding: 'utf-8' }));
+    }
+    catch (e) {
+        process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} Error while reading ${filePath}\n`));
     }
-    throw new Error(`Unable to resolve the target for the DisplayTemplate: ${definition.key}`);
+    return undefined;
 }
 
 const StylesListCommand = {
@@ -514,6 +865,14 @@ const StylesListCommand = {
     }
 };
 
+function ucFirst(current) {
+    if (typeof current != 'string')
+        throw new Error("Only strings can be transformed");
+    if (current == "")
+        return current;
+    return current[0]?.toUpperCase() + current.substring(1);
+}
+
 const StylesPullCommand = {
     command: "styles:pull",
     describe: "Create Visual Builder style definitions from the CMS",
@@ -524,124 +883,59 @@ const StylesPullCommand = {
         return newYargs;
     },
     handler: async (args) => {
-        const { _config: cfg, components: basePath, force, definitions } = parseArgs(args);
+        const { _config: cfg, components: basePath, force} = parseArgs(args);
         const client = createCmsClient(args);
-        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
-            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
-            return;
-        }
         const { styles: filteredResults } = await getStyles(client, args);
-        //#region Create & Write opti-style.json files
         process.stdout.write(chalk.gray(`${figures.arrowRight} Start creating .opti-style.json files\n`));
-        const typeFiles = {};
-        const updatedTemplates = (await Promise.all(filteredResults.map(async (displayTemplate) => {
-            // Create metadata
-            const { targetType, styleFilePath: filePath, helperFilePath: helperPath } = await createTemplateMetadata(client, displayTemplate, basePath, true);
-            // Build local style data
-            const outputTemplate = { ...displayTemplate };
-            if (outputTemplate.createdBy)
-                delete outputTemplate.createdBy;
-            if (outputTemplate.lastModifiedBy)
-                delete outputTemplate.lastModifiedBy;
-            if (outputTemplate.created)
-                delete outputTemplate.created;
-            if (outputTemplate.lastModified)
-                delete outputTemplate.lastModified;
-            // Write file to disk
-            if (fs.existsSync(filePath)) {
-                if (!force) {
-                    if (cfg.debug)
-                        process.stdout.write(chalk.gray(`${figures.cross} Skipping style file for ${displayTemplate.key} - File already exists\n`));
-                }
-                else {
-                    if (cfg.debug) {
-                        process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting style file for ${displayTemplate.key}\n`));
-                    }
-                    fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
-                }
+        const styleFiles = await toTypeFilesList(filteredResults, client, basePath);
+        const updatedTemplates = [];
+        for (const groupIdentifier of styleFiles.keys()) {
+            const displayTemplateGroup = styleFiles.get(groupIdentifier);
+            for (const { file: filePath, data: displayTemplate } of (displayTemplateGroup?.templates || [])) {
+                // Write JSON to disk
+                var updatedJson = await createDisplayTemplateFile(displayTemplate, filePath, force, cfg.debug);
+                if (updatedJson)
+                    updatedTemplates.push(displayTemplate.key);
             }
-            else {
-                if (cfg.debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Creating style file for ${displayTemplate.key} in ${filePath}\n`));
-                fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
-            }
-            // Ensure we're tracking all files
-            if (!typeFiles[targetType]) {
-                typeFiles[targetType] = {
-                    filePath: helperPath,
-                    templates: []
-                };
-            }
-            typeFiles[targetType].templates.push({ key: displayTemplate.key, file: filePath, data: displayTemplate });
-            return displayTemplate.key;
-        }))).filter(x => x);
-        //#endregion
-        //#region Create needed definition files
-        if (definitions)
-            await createDisplayTemplateHelpers(typeFiles);
-        //#endregion
+            // Write template to disk
+            void await createDisplayTemplateHelper(displayTemplateGroup, groupIdentifier, force, cfg.debug);
+        }
         process.stdout.write(chalk.green(chalk.bold(figures.tick + ` Created/updated style definitions for ${updatedTemplates.join(', ')}`)) + "\n");
     }
 };
-function ucFirst$1(input) {
-    if (typeof (input) != 'string' || input.length < 1)
-        return input;
-    return input[0].toUpperCase() + input.substring(1);
-}
-async function createTemplateMetadata(client, displayTemplate, basePath, createPaths = true) {
-    let itemPath = undefined;
-    let targetType;
-    let typesPath;
-    const targetPrefix = getTemplateTarget(displayTemplate);
-    switch (targetPrefix) {
-        case 'node':
-            itemPath = path.join(basePath, 'nodes', displayTemplate.nodeType, displayTemplate.key);
-            typesPath = path.join(basePath, 'nodes', displayTemplate.nodeType);
-            targetType = targetPrefix + '/' + displayTemplate.nodeType;
-            break;
-        case 'base': {
-            const baseTypeSlug = baseTypeToSlug(displayTemplate.baseType);
-            itemPath = path.join(basePath, baseTypeSlug, 'styles', displayTemplate.key);
-            typesPath = path.join(basePath, baseTypeSlug, 'styles');
-            targetType = targetPrefix + '/' + baseTypeSlug;
-            break;
+async function createDisplayTemplateFile(displayTemplate, filePath, force = false, debug = false) {
+    let updated = false;
+    // Build local style data
+    const outputTemplate = { ...displayTemplate };
+    if (outputTemplate.createdBy)
+        delete outputTemplate.createdBy;
+    if (outputTemplate.lastModifiedBy)
+        delete outputTemplate.lastModifiedBy;
+    if (outputTemplate.created)
+        delete outputTemplate.created;
+    if (outputTemplate.lastModified)
+        delete outputTemplate.lastModified;
+    // Write file to disk
+    if (fs.existsSync(filePath)) {
+        if (!force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.cross} Skipping style file for ${displayTemplate.key} - File already exists\n`));
         }
-        case 'content': {
-            const contentType = await client.contentTypesGet({ path: { key: displayTemplate.contentType ?? '-' } });
-            const baseTypeSlug = baseTypeToSlug(contentType.baseType);
-            itemPath = path.join(basePath, baseTypeSlug, contentType.key);
-            typesPath = path.join(basePath, baseTypeSlug, contentType.key);
-            targetType = targetPrefix + '/' + displayTemplate.contentType;
-            break;
+        else {
+            if (debug) {
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting style file for ${displayTemplate.key}\n`));
+            }
+            fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
+            updated = true;
         }
-        default:
-            throw new Error("Unsupported display template type");
     }
-    if (createPaths)
-        void await fsAsync.mkdir(itemPath, { recursive: true }).catch(e => {
-            console.log(e);
-        });
-    const styleFilePath = path.join(itemPath, `${displayTemplate.key}.opti-style.json`);
-    const helperFilePath = path.join(typesPath, 'displayTemplates.ts');
-    return { key: displayTemplate.key, itemPath, typesPath, targetType, styleFilePath, helperFilePath };
-}
-function baseTypeToSlug(baseType) {
-    return baseType.replace(/^\_*/, "").toLowerCase();
-}
-function getTemplateTarget(displayTemplate) {
-    if (displayTemplate.baseType && displayTemplate.baseType.length > 0)
-        return 'base';
-    if (displayTemplate.nodeType && displayTemplate.nodeType.length > 0)
-        return 'node';
-    if (displayTemplate.contentType && displayTemplate.contentType.length > 0)
-        return 'content';
-    return null;
-}
-async function createDisplayTemplateHelpers(typeFiles, force = false, debug = false) {
-    process.stdout.write(chalk.gray(`${figures.arrowRight} Start creating displayTemplates.ts files\n`));
-    for (const targetId in typeFiles) {
-        await createDisplayTemplateHelper(typeFiles[targetId], targetId, force, debug);
+    else {
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Creating style file for ${displayTemplate.key} in ${filePath}\n`));
+        fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
+        updated = true;
     }
+    return updated;
 }
 async function createDisplayTemplateHelper(typeFile, typeFileId, force = false, debug = false) {
     const prefix = '//not-modified - Remove this line when making change to prevent it from being updated by the CLI tools';
@@ -680,20 +974,20 @@ async function createDisplayTemplateHelper(typeFile, typeFileId, force = false,
         typeContents.push(`export type ${displayTemplate.key}Props = LayoutProps<typeof ${displayTemplate.key}Styles>`);
         typeContents.push(`export type ${displayTemplate.key}Keys = LayoutPropsSettingKeys<${displayTemplate.key}Props>`);
         typeContents.push(`export type ${displayTemplate.key}Options<K extends ${displayTemplate.key}Keys> = LayoutPropsSettingValues<${displayTemplate.key}Props, K>`);
-        typeContents.push(`export type ${displayTemplate.key}ComponentProps<DT extends Record<string, any> = Record<string, any>> = Omit<CmsComponentProps<DT, ${displayTemplate.key}Props>,'children'> & JSX.IntrinsicElements['div']`);
-        typeContents.push(`export type ${displayTemplate.key}Component<DT extends Record<string, any> = Record<string, any>> = ComponentType<${displayTemplate.key}ComponentProps<DT>>`);
+        typeContents.push(`export type ${displayTemplate.key}ComponentProps<DT extends Record<string, unknown> = Record<string, unknown>> = Omit<CmsComponentProps<DT, ${displayTemplate.key}Props>,'children'> & JSX.IntrinsicElements['div']`);
+        typeContents.push(`export type ${displayTemplate.key}Component<DT extends Record<string, unknown> = Record<string, unknown>> = ComponentType<${displayTemplate.key}ComponentProps<DT>>`);
         typeContents.push('');
         props.push(`${displayTemplate.key}Props`);
         if (!typeId)
             typeId = displayTemplate.nodeType ?? displayTemplate.baseType ?? displayTemplate.contentType;
     });
     if (typeId) {
-        typeId = ucFirst$1(typeId);
+        typeId = ucFirst(typeId);
         typeContents.push(`export type ${typeId}LayoutProps = ${props.join(' | ')}
 export type ${typeId}LayoutKeys = LayoutPropsSettingKeys<${typeId}LayoutProps>
 export type ${typeId}LayoutOptions<K extends ${typeId}LayoutKeys> = LayoutPropsSettingValues<${typeId}LayoutProps,K>
-export type ${typeId}ComponentProps<DT extends Record<string, any> = Record<string, any>> = Omit<CmsComponentProps<DT, ${typeId}LayoutProps>,'children'> & JSX.IntrinsicElements['div']
-export type ${typeId}Component<DT extends Record<string, any> = Record<string, any>> = ComponentType<${typeId}ComponentProps<DT>>`);
+export type ${typeId}ComponentProps<DT extends Record<string, unknown> = Record<string, unknown>> = Omit<CmsComponentProps<DT, ${typeId}LayoutProps>,'children'> & JSX.IntrinsicElements['div']
+export type ${typeId}Component<DT extends Record<string, unknown> = Record<string, unknown>> = ComponentType<${typeId}ComponentProps<DT>>`);
         const defaultTemplate = templates.find(t => t.data.isDefault);
         if (defaultTemplate) {
             typeContents.push(`
@@ -724,10 +1018,6 @@ const StylesCreateCommand = {
     handler: async (args) => {
         const { components: basePath } = parseArgs(args);
         const client = createCmsClient(args);
-        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
-            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
-            return;
-        }
         const allowedBaseTypes = ['section', 'component', 'experience'];
         // Prepare
         process.stdout.write(chalk.yellowBright(chalk.bold(`Reading current information from Optimizely CMS\n`)));
@@ -776,10 +1066,10 @@ const StylesCreateCommand = {
         definition[type] = typeId;
         definition['settings'] = {};
         const contentBaseType = type == "contentType" ? contentTypes.filter(x => x.key == typeId).map(x => x.baseType).at(0) : undefined;
-        const styleFilePath = await getStyleFilePath(definition, { contentBaseType, client });
-        if (!fs.existsSync(path.join(basePath, path.dirname(styleFilePath))))
-            fs.mkdirSync(path.join(basePath, path.dirname(styleFilePath)), { recursive: true });
-        if (fs.existsSync(path.join(basePath, styleFilePath))) {
+        const { styleFile: styleFilePath, styleFolder: styleFileFolder } = await getStyleFilePaths(definition, { contentBaseType, client, basePath });
+        if (!fs.existsSync(styleFileFolder))
+            fs.mkdirSync(styleFileFolder, { recursive: true });
+        if (fs.existsSync(styleFilePath)) {
             const overwrite = await confirm({ message: "The style definition file already exists, do you want to overwrite it?" });
             if (!overwrite) {
                 process.stdout.write("\n");
@@ -788,8 +1078,8 @@ const StylesCreateCommand = {
             }
         }
         // @ToDo: Add properties
-        fs.writeFileSync(path.join(basePath, styleFilePath), JSON.stringify(definition, undefined, 4));
-        process.stdout.write(chalk.yellowBright(chalk.bold(`\nWritten style defintion template to: ${path.normalize(path.join(basePath, styleFilePath))}\n`)));
+        fs.writeFileSync(styleFilePath, JSON.stringify(definition, undefined, 4));
+        process.stdout.write(chalk.yellowBright(chalk.bold(`\nWritten style defintion template to: ${path.normalize(styleFilePath)}\n`)));
         if (await confirm({ message: "Do you want to publish this style into Optimizely CMS?" })) {
             const response = await client.displayTemplatesCreate({ body: definition }).catch(_ => undefined);
             if (!response) {
@@ -811,6 +1101,91 @@ const StylesCreateCommand = {
     }
 };
 
+const StylesDeleteCommand = {
+    command: "styles:delete",
+    describe: "Remove Visual Builder style definitions from the CMS",
+    builder: (yargs) => {
+        const newYargs = stylesBuilder(yargs);
+        newYargs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
+        newYargs.option('withStyleFile', { alias: 'w', description: "Delete the .opti-style.json file as weill", boolean: true, type: 'boolean', demandOption: false, default: true });
+        newYargs.option("definitions", { alias: 'u', description: "Update typescript definitions", boolean: true, type: 'boolean', demandOption: false, default: true });
+        return newYargs;
+    },
+    handler: async (args) => {
+        const { components: basePath } = parseArgs(args);
+        const client = createCmsClient(args);
+        const { styles, all: allStyles } = await getStyles(client, args, 100);
+        if (styles.findIndex(x => x.isDefault) >= 0)
+            process.stdout.write(chalk.redBright(chalk.bold((`\n${figures.warning} You are deleting a default Display Template this may lead to unpredicted behavior.\n\n`))));
+        if (!args.force) {
+            process.stdout.write(`This will remove the following display templates\n`);
+            for (const style of styles) {
+                process.stdout.write(` ${figures.arrowRight} ${style.displayName || style.key} [Key: ${style.key}; Default: ${style.isDefault ? 'Yes' : 'No'}]\n`);
+            }
+            process.stdout.write(`\nRun with -f to actually preform removal\n`);
+            return;
+        }
+        const keysToDelete = styles.map(displayTemplate => displayTemplate.key);
+        const styleHelpers = await toTypeFilesList(allStyles, client, basePath);
+        for (const displayTemplate of styles) {
+            const { styleFile: styleFilePath, styleFolder: itemPath, identifier: targetType, helperFolder: typesPath } = styleHelpers.getDisplayTemplatePathsByKey(displayTemplate.key);
+            // Remove style file
+            if (args.withStyleFile) {
+                process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Removing *.opti-style.json file for ${displayTemplate.displayName} [${displayTemplate.key}]\n`));
+                await fsAsync.rm(styleFilePath, { force: false, recursive: false, maxRetries: 1 }).catch((e) => {
+                    if (e?.code === 'ENOENT') // The file can't be deleted as it does not exist - that's the desired state
+                        return;
+                    throw e;
+                });
+                await fsAsync.rmdir(itemPath, { recursive: false, maxRetries: 1 }).catch((e) => {
+                    if (e?.code === 'ENOTEMPTY') {
+                        process.stdout.write(chalk.yellowBright(`${figures.warning} The folder is not empty, please remove ${itemPath} manually if needed\n`));
+                        return;
+                    }
+                    else if (e?.code === 'ENOENT')
+                        return;
+                    else
+                        throw e;
+                });
+            }
+            // Remove/update typescript helper
+            if (args.definitions && styleHelpers.has(targetType)) {
+                process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Removing/updating displayTemplates.ts file for ${displayTemplate.displayName} [${displayTemplate.key}]\n`));
+                const remainingTemplates = styleHelpers[targetType].templates.filter(x => !keysToDelete.includes(x.key));
+                if (remainingTemplates.length === 0) {
+                    await fsAsync.rm(styleHelpers[targetType].filePath, { force: false, recursive: false, maxRetries: 1 }).catch((e) => {
+                        if (e?.code === 'ENOENT') // The file can't be deleted as it does not exist - that's the desired state
+                            return;
+                        throw e;
+                    });
+                    await fsAsync.rmdir(typesPath, { recursive: false, maxRetries: 1 }).catch((e) => {
+                        if (e?.code === 'ENOTEMPTY') {
+                            process.stdout.write(chalk.yellowBright(`${figures.warning} The folder is not empty, please remove ${typesPath} manually if needed\n`));
+                            return;
+                        }
+                        else if (e?.code === 'ENOENT')
+                            return;
+                        else
+                            throw e;
+                    });
+                }
+                else {
+                    const newEntry = {
+                        filePath: styleHelpers[targetType].filePath,
+                        templates: remainingTemplates
+                    };
+                    if (!await createDisplayTemplateHelper(newEntry, targetType, false, false))
+                        process.stdout.write(chalk.yellowBright(`${figures.warning} The display template was not updated, please update ${newEntry.filePath} manually`));
+                }
+            }
+            // Actually remove from CMS
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Removing the display template ${displayTemplate.displayName} [${displayTemplate.key}] from Optimizely CMS\n`));
+            void await client.displayTemplatesDelete({ path: { key: displayTemplate.key } });
+        }
+        process.stdout.write("\n" + chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+    }
+};
+
 const TypesPullCommand = {
     command: "types:pull",
     describe: "Pull content type definition files into the project",
@@ -820,13 +1195,13 @@ const TypesPullCommand = {
         return newArgs;
     },
     handler: async (args) => {
-        const { _config: { debug }, components: basePath, force } = parseArgs(args);
+        const { _config: { debug }, components: basePath, path: projectPath, force } = parseArgs(args);
         const client = createCmsClient(args);
         const { contentTypes } = await getContentTypes(client, args);
         const updatedTypes = contentTypes.map(contentType => {
-            const { typePath, typeFile } = getContentTypePaths(contentType, basePath);
-            if (!fs.existsSync(typePath))
-                fs.mkdirSync(typePath, { recursive: true });
+            const { path: path$1, typeFile } = getContentTypePaths(contentType, basePath);
+            if (!fs.existsSync(path$1))
+                fs.mkdirSync(path$1, { recursive: true });
             if (fs.existsSync(typeFile) && !force) {
                 if (debug)
                     process.stdout.write(chalk.yellow(`${figures.cross} Skipping type definition for ${contentType.displayName} (${contentType.key}) - File already exists\n`));
@@ -835,9 +1210,7 @@ const TypesPullCommand = {
             const outContentType = { ...contentType };
             if (outContentType.source || outContentType.source == "")
                 delete outContentType.source;
-            //if (outContentType.features) delete outContentType.features
-            //if (outContentType.usage) delete outContentType.usage
-            if (outContentType.lastModifiedBy)
+            if (outContentType.lastModifiedBy || outContentType.lastModifiedBy == "")
                 delete outContentType.lastModifiedBy;
             if (outContentType.lastModified)
                 delete outContentType.lastModified;
@@ -858,16 +1231,13 @@ const TypesPullCommand = {
                 }
             }
             if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Writing type definition for ${contentType.displayName} (${contentType.key})\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Writing type definition for ${contentType.displayName} (${contentType.key}) into ${path.relative(projectPath, path$1)}\n`));
             fs.writeFileSync(typeFile, JSON.stringify(outContentType, undefined, 2));
             return contentType.key;
         }).filter(x => x);
         process.stdout.write(chalk.green(chalk.bold(`${figures.tick} Created/updated type definitions for ${updatedTypes.join(', ')}\n`)));
     }
 };
-function isEmptyArray(toTest) {
-    return toTest === null || !Array.isArray(toTest) || toTest.length === 0;
-}
 
 const deepmerge$1 = createDeepMerge();
 async function loadSchema(client, schemaName) {
@@ -1169,14 +1539,6 @@ function getTypeFolder(list, type) {
     return list.filter(x => x.type == type).at(0);
 }
 
-function ucFirst(current) {
-    if (typeof current != 'string')
-        throw new Error("Only strings can be transformed");
-    if (current == "")
-        return current;
-    return current[0]?.toUpperCase() + current.substring(1);
-}
-
 const NextJsComponentsCommand = {
     command: "nextjs:components",
     describe: "Create the React Components for a Next.JS / Optimizely Graph structure",
@@ -1286,8 +1648,9 @@ ${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}
 
 export default ${varName}`,
     // Default Template for all section types
-    section: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { CmsEditable, type CmsComponent } from "@remkoj/optimizely-cms-react/rsc";
-import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";${displayTemplate ? `
+    section: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { OptimizelyComposition, isNode, CmsEditable, type CmsComponent } from "@remkoj/optimizely-cms-react/rsc";
+import { get${contentType.key}DataDocument, type get${contentType.key}DataQuery, SectionCompositionDataFragmentDoc } from "@/gql/graphql";
+import { getFragmentData } from "@/gql/fragment-masking";${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}${baseDisplayTemplate ? `
 import { ${baseDisplayTemplate} } from "../styles/displayTemplates";` : ''}
 
@@ -1296,19 +1659,25 @@ import { ${baseDisplayTemplate} } from "../styles/displayTemplates";` : ''}
  * ---
  * ${contentType.description}
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${(displayTemplate || baseDisplayTemplate) ? ', ' + [displayTemplate, baseDisplayTemplate].filter(x => x).join(" | ") : ''}> = ({ data${(displayTemplate || baseDisplayTemplate) ? ', layoutProps' : ''}, editProps, children }) => {
-    const componentName = '${contentType.displayName}'
-    const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
-    return <CmsEditable className="w-full border-y border-y-solid border-y-slate-900 py-2 mb-4" {...editProps}>
-        <div className="font-bold italic">{ componentName }</div>
-        <div>{ componentInfo }</div>
-        { Object.getOwnPropertyNames(data).length > 0 && <pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(data, undefined, 4) }</pre> }
-        ${(displayTemplate || baseDisplayTemplate) ? '<pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(layoutProps, undefined, 4) }</pre>' : '{/* This component doesn\'t have layout options */}'}
-        <div>{ children }</div>
-    </CmsEditable>
+export const ${varName} : CmsComponent<get${contentType.key}DataQuery${(displayTemplate || baseDisplayTemplate) ? ', ' + [displayTemplate, baseDisplayTemplate].filter(x => x).join(" | ") : ''}> = ({ data${(displayTemplate || baseDisplayTemplate) ? ', layoutProps' : ''}, editProps, children, ctx }) => {
+  // If we're rendering stand-alone we'll get a composition back, with ourself included If we're 
+  // rendering as part of an experience, we'll get the data directly. So handle both cases.
+  if (!data?._metadata && children) return children;
+
+  const componentName = '${contentType.displayName}'
+  const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
+  const composition = getFragmentData(SectionCompositionDataFragmentDoc, data)?.composition;
+  return <CmsEditable className="w-full border-y border-y-solid border-y-slate-900 py-2 mb-4" {...editProps}>
+    <div className="font-bold italic">{ componentName }</div>
+    <div>{ componentInfo }</div>
+    { Object.getOwnPropertyNames(data).length > 0 && <pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(data, undefined, 4) }</pre> }
+    ${(displayTemplate || baseDisplayTemplate) ? '<pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(layoutProps, undefined, 4) }</pre>' : '{/* This component doesn\'t have layout options */}'}
+    {children && <div>{ children }</div>}
+    {composition && isNode(composition) && <OptimizelyComposition node={composition} ctx={ctx} />}
+  </CmsEditable>
 }
 ${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
-${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+${varName}.getDataQuery = () => get${contentType.key}DataDocument
 
 export default ${varName}`,
     // Template for all page component types
@@ -1401,13 +1770,13 @@ const NextJsVisualBuilderCommand = {
         const { styles } = await getStyles(createCmsClient(args), { ...args, excludeNodeTypes: [], excludeTemplates: [], nodes: [], templates: [], templateTypes: ['node', 'base'] });
         // Process node styles
         styles.filter(x => typeof (x.nodeType) == 'string' && x.nodeType.length > 0).map(styleDefintion => {
-            const templatePath = path.join(basePath, 'nodes', styleDefintion.nodeType, styleDefintion.key);
+            const templatePath = path.join(basePath, 'nodes', keyToSlug(styleDefintion.nodeType), keyToSlug(styleDefintion.key));
             createSpecificNode(styleDefintion, templatePath, force, debug);
         });
         // Process base styles
         styles.filter(x => typeof (x.baseType) == 'string' && x.baseType.length > 0).map(styleDefinition => {
             const baseType = (styleDefinition.baseType ?? '').startsWith('_') ? (styleDefinition.baseType ?? '').substring(1) : styleDefinition.baseType;
-            const templatePath = path.join(basePath, baseType, 'styles', styleDefinition.key);
+            const templatePath = path.join(basePath, baseType, 'styles', keyToSlug(styleDefinition.key));
             createSpecificNode(styleDefinition, templatePath, force, debug);
         });
     }
@@ -1417,14 +1786,14 @@ function createSpecificNode(template, templatePath, force = false, debug = false
     if (fs.existsSync(nodeFile)) {
         if (!force) {
             if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${template.displayName} (${template.key}) component - file already exists\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${template.displayName} (${template.key}) node - file already exists\n`));
             return undefined;
         }
         if (debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${template.displayName} (${template.key}) component\n`));
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${template.displayName} (${template.key}) node\n`));
     }
     else if (debug)
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${template.displayName} (${template.key}) component\n`));
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${template.displayName} (${template.key}) node\n`));
     if (!fs.existsSync(templatePath))
         fs.mkdirSync(templatePath, { recursive: true });
     const baseType = template.nodeType ?? template.baseType ?? 'unknown';
@@ -1502,6 +1871,7 @@ function getDisplayTemplateInfo(template, typePath) {
 
 const ROOT_FACTORY_KEY = ".";
 const FACTORY_FILE_NAME = "index.ts";
+const reservedNames = ["loading.tsx", "loading.jsx", "suspense.tsx", "suspense.jsx"];
 const NextJsFactoryCommand = {
     command: "nextjs:factory",
     describe: "Create the ComponentFactory for a Next.JS / Optimizely Graph structure",
@@ -1510,108 +1880,102 @@ const NextJsFactoryCommand = {
         const { components: basePath, force, _config: { debug } } = parseArgs(args);
         if (debug)
             process.stdout.write(chalk.gray(`${figures.arrowRight} Start generating component factories\n`));
+        // Get & filter all component files
+        const clientComponents = [];
         const components = globSync(["./**/*.jsx", "./**/*.tsx"], {
             cwd: basePath
         }).map(p => p.split(path.sep)).filter(p => {
+            // Get the filename
+            const fileName = p.at(p.length - 1);
+            if (!fileName)
+                return false;
             // Consider components in a file starting with "_" as a partial
-            if (p.at(p.length - 1)?.startsWith('_') == true)
+            if (fileName.startsWith('_') == true)
                 return false;
             // Consider components in a folder named "partials" as a partial
-            if (p.at(p.length - 2)?.toLowerCase() == 'partials')
+            if (p.some(folder => folder === 'partials'))
                 return false;
             // Skip the special loader component
-            if (p.at(p.length - 1) == "loading.tsx" || p.at(p.length - 1) == "loading.jsx")
+            if (reservedNames.includes(fileName))
                 return false;
             // Check if the file has a default export
             const fileBuffer = fs.readFileSync(path.join(basePath, p.join(path.sep)));
             const hasDefaultExport = fileBuffer.includes('export default');
+            if (fileBuffer.includes('use client'))
+                clientComponents.push(p.join(path.sep));
             if (!hasDefaultExport) {
                 process.stdout.write(chalk.redBright(`${figures.warning} No default export in ${p.join(path.sep)} - ignoring file\n`));
                 return false;
             }
             return true;
         });
+        // Report what we have found
         if (debug)
             process.stdout.write(chalk.gray(`${figures.arrowRight} Identified ${components.length} components in ${basePath}\n`));
+        // Build factory / component structure
         const componentFactoryDefintions = new Map();
         components.forEach(component => {
+            const componentDir = path.dirname(path.join(...component));
+            path.basename(path.join(...component));
+            // Determine component target
+            const componentKey = getComponentKey(component, basePath);
+            let componentVariant = (component.length > 1 ? component.at(component.length - 1) ?? 'default' : 'default').replace('index', 'default');
+            componentVariant = path.basename(componentVariant, path.extname(componentVariant));
+            // Get factory information
             const factorySegments = component.length > 2 ? component.slice(0, -2) : [ROOT_FACTORY_KEY];
-            const factoryKey = factorySegments.join(path.sep);
+            const factoryKey = path.posix.join(...factorySegments);
             const factoryFile = path.join(factoryKey, FACTORY_FILE_NAME);
-            // Add component to factory
+            // Check dynamic & suspense
+            const isClientComponent = clientComponents.includes(component.join(path.sep));
+            const useDynamic = [
+                path.join(basePath, componentDir, 'loading.tsx'),
+                path.join(basePath, componentDir, 'loading.jsx')
+            ].some(fs.existsSync);
+            const useSuspense = [
+                path.join(basePath, componentDir, 'suspense.tsx'),
+                path.join(basePath, componentDir, 'suspense.jsx')
+            ].some(fs.existsSync);
+            // Prepare data
+            const componentImport = component.length == 1 ?
+                `.${path.posix.sep}${path.basename(component[0], path.extname(component[0]))}` :
+                `.${path.posix.sep}${path.posix.relative(factoryKey, componentDir)}${componentVariant !== 'default' ? path.posix.sep + componentVariant : ''}`;
+            const loaderImport = useDynamic ? componentImport + path.posix.sep + 'loading' : undefined;
+            const suspenseImport = useSuspense ? componentImport + path.posix.sep + 'suspense' : undefined;
+            const componentVariablesBase = componentKey + (componentVariant !== 'default' ? processName(componentVariant) : '');
+            // Add to the factory
             const factory = componentFactoryDefintions.get(factoryKey) || { file: factoryFile, entries: [], subfactories: [] };
-            const useSuspense = fs.existsSync(path.join(basePath, component.slice(0, -1).join(path.sep), 'loading.tsx')) || fs.existsSync(path.join(basePath, component.slice(0, -1).join(path.sep), 'loading.jsx'));
-            if (useSuspense && debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Components in ${component.slice(0, -1).join(path.sep)} will use suspense\n`));
-            const componentSegments = component.slice(-2).map(p => {
-                const entry = p.substring(0, p.length - path.extname(p).length);
-                return entry.toLowerCase() == "index" ? null : entry;
-            }).filter(x => x);
-            const componentImport = "./" + componentSegments.join('/');
-            const loaderImport = useSuspense ? "./" + component.slice(-2).map((p, i, a) => {
-                const entry = p.substring(0, p.length - path.extname(p).length);
-                if (i == a.length - 1)
-                    return 'loading';
-                return entry.toLowerCase() == "index" ? null : entry;
-            }).join('/') : undefined;
             factory.entries.push({
+                key: componentKey,
+                variant: componentVariant,
                 import: componentImport,
-                variable: [...componentSegments.map(processName), 'Component'].join(''),
-                key: componentSegments.join('/') == "node" ? "Node" : componentSegments.join('/'),
+                variable: componentVariablesBase + 'Component',
                 loaderImport,
-                loaderVariable: useSuspense ? [...componentSegments.map(processName), 'Loader'].join('') : undefined,
+                loaderVariable: useDynamic ? componentVariablesBase + 'Loader' : undefined,
+                suspenseImport,
+                suspenseVariable: useSuspense ? componentVariablesBase + 'Placeholder' : undefined,
+                isClient: isClientComponent
             });
             componentFactoryDefintions.set(factoryKey, factory);
-            // Register with all appropriate parents
+            // Add/update parent factories
             const parentSegements = factoryKey == ROOT_FACTORY_KEY ? factorySegments.slice(0, -1) : [ROOT_FACTORY_KEY, ...factorySegments.slice(0, -1)];
-            let currentFactory = {
-                key: factoryKey,
-                import: './' + factorySegments.slice(-1).join('/'),
-                prefix: processName(factorySegments.slice(-1).at(0)),
-                variable: factorySegments.map(processName).join("") + "Factory"
-            };
-            for (let i = parentSegements.length; i > 0; i--) {
-                const parentFactoryKey = parentSegements.slice(0, i).filter(x => x != ROOT_FACTORY_KEY).join(path.sep) || ROOT_FACTORY_KEY;
+            parentSegements.forEach((_, idx, data) => {
+                const parentFactoryKey = path.posix.join(...data.slice(0, idx + 1)) || ROOT_FACTORY_KEY;
+                const childFactoryKey = factorySegments.slice(idx, idx + 1).at(0);
                 const parentFactory = componentFactoryDefintions.get(parentFactoryKey) ?? { file: path.join(parentFactoryKey, FACTORY_FILE_NAME), entries: [], subfactories: [] };
-                if (!parentFactory.subfactories.some(x => x.key == currentFactory.key))
-                    parentFactory.subfactories.push(currentFactory);
-                componentFactoryDefintions.set(parentFactoryKey, parentFactory);
-                if (i > 1) {
-                    currentFactory = {
-                        key: parentFactoryKey,
-                        import: './' + parentFactoryKey.split(path.sep).slice(-1).at(0),
-                        prefix: processName(parentFactoryKey.split(path.sep).slice(-1).at(0)),
-                        variable: parentFactoryKey.split(path.sep).map(processName).join("") + "Factory"
-                    };
+                if (!parentFactory.subfactories.some(x => x.key === childFactoryKey)) {
+                    parentFactory.subfactories.push({
+                        key: childFactoryKey,
+                        import: './' + childFactoryKey,
+                        variable: processName(childFactoryKey) + 'Factory'
+                    });
+                    componentFactoryDefintions.set(parentFactoryKey, parentFactory);
                 }
-            }
-        });
-        const mainFactory = componentFactoryDefintions.get(ROOT_FACTORY_KEY);
-        if (mainFactory) {
-            if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Updating prefixes within RootFactory\n`));
-            mainFactory.subfactories = mainFactory.subfactories.map(subFactory => {
-                if (typeof (subFactory.prefix == 'string'))
-                    switch (subFactory.prefix) {
-                        case "Video":
-                        case "Image":
-                            subFactory.prefix = ["Media", subFactory.prefix, "Component"];
-                            break;
-                        case "Experience":
-                            subFactory.prefix = [subFactory.prefix, "Page"];
-                            break;
-                        case "Element":
-                            subFactory.prefix = ["Component"];
-                            break;
-                        case "Media":
-                            subFactory.prefix = [subFactory.prefix, "Component"];
-                            break;
-                    }
-                return subFactory;
             });
-        }
+        });
+        // Report factory file count
         if (debug)
             process.stdout.write(chalk.gray(`${figures.arrowRight} Finished preparing ${componentFactoryDefintions.size} factories, start writing\n`));
+        // Iterate over the factories and create them
         let updateCounter = 0;
         for (const key of componentFactoryDefintions.keys()) {
             const factory = componentFactoryDefintions.get(key);
@@ -1635,6 +1999,36 @@ const NextJsFactoryCommand = {
         process.stdout.write("\n");
     }
 };
+/**
+ * Get the component key that must be used for the variable in the factory
+ * this looks first at the component-type file.
+ *
+ * @param     component     The file path broken into parts
+ * @returns   The key to use
+ */
+function getComponentKey(component, componentsRootDir) {
+    // Prepare context
+    //const componentFile = path.basename(path.join(...component));
+    const componentDir = path.dirname(path.join(...component));
+    // Calculate the fallback value
+    const baseName = processName(component.length == 1 ? ucFirst(path.basename(component[0], path.extname(component[0]))) : component.at(component.length - 2));
+    // Try to read the key from the opti-type.json file in the same folder
+    const definitions = globSync("*.opti-type.json", { cwd: path.join(componentsRootDir, componentDir) });
+    //console.log(definitions, componentDir);
+    if (definitions.length == 1) {
+        try {
+            const data = JSON.parse(fs.readFileSync(path.join(componentsRootDir, componentDir, definitions[0])).toString('utf8'));
+            //console.log('Updating to', data.key)
+            if (data.key)
+                return data.key;
+        }
+        catch {
+            // Ignored on purpose
+        }
+    }
+    // Return the fallback value
+    return baseName;
+}
 function shouldWriteFactory(factoryFile, force = false, debug = false) {
     if (!fs.existsSync(factoryFile)) {
         process.stdout.write(chalk.green(`${figures.tick} Creating new factory file: ${factoryFile}\n`));
@@ -1660,59 +2054,64 @@ function processName(input) {
     return nameSegements.map(ucFirst).join('');
 }
 function generateFactory(factoryInfo, factoryKey) {
-    const needsPrefixFunction = factoryInfo.subfactories.length > 0;
+    // Get the factory name
     const factoryName = factoryKey.split(path.sep).map(processName).join("") + "Factory";
-    const components = factoryInfo.entries;
-    const subFactories = factoryInfo.subfactories;
-    const factoryContent = `// Auto generated dictionary
+    // Get the components and sub-factories, sorted by key to minimize changes between runs
+    const components = [...factoryInfo.entries].sort((a, b) => { return a.key < b.key ? -1 : a.key > b.key ? 1 : 0; });
+    const subFactories = [...factoryInfo.subfactories].sort((a, b) => { return a.key < b.key ? -1 : a.key > b.key ? 1 : 0; });
+    // Check if there's at least one component that uses next/dynamic
+    const hasDynamic = factoryInfo.entries.some(x => x.loaderImport);
+    const hasClientComponents = factoryInfo.entries.some(x => x.isClient);
+    // The intro for the factory
+    const factoryIntro = `// Auto generated dictionary
 // @not-modified => When this line is removed, the "force" parameter of the CLI tool is required to overwrite this file
-import { type ComponentTypeDictionary } from "@remkoj/optimizely-cms-react";
-${[...components, ...subFactories].map(x => {
-        let importLine = `import ${x.variable} from "${x.import}";`;
-        if (x.loaderImport && x.loaderVariable) {
-            importLine += `\nimport ${x.loaderVariable} from "${x.loaderImport}";`;
-        }
-        return importLine;
-    }).join("\n")}
-
-${needsPrefixFunction ? `// Prefix entries - if needed
-${subFactories.map(subFactory => Array.isArray(subFactory.prefix) ?
-        subFactory.prefix.map(z => `prefixDictionaryEntries(${subFactory.variable}, "${z}");`).join("\n") :
-        `prefixDictionaryEntries(${subFactory.variable}, "${subFactory.prefix}");`).join("\n")}
-
-` : ''}// Build dictionary
-export const ${factoryName} : ComponentTypeDictionary = [
-    ${[...components.map(x => {
-            if (x.loaderVariable) {
-                return `{ 
-        type: "${x.key}", 
-        component: ${x.variable},
-        useSuspense: true,
-        loader: ${x.loaderVariable}
-    }`;
-            }
-            else {
-                return `{ 
-        type: "${x.key}", 
-        component: ${x.variable} 
-    }`;
-            }
-        }), ...subFactories.map(x => `...${x.variable}`)].join(",\n    ")}
-];
-
-// Export dictionary
-export default ${factoryName};
-${needsPrefixFunction ? `
-// Helper functions
-function prefixDictionaryEntries(list: ComponentTypeDictionary, prefix: string) : ComponentTypeDictionary
-{
-    list.forEach((component, idx, dictionary) => {
-        dictionary[idx].type = typeof component.type == 'string' ? prefix + "/" + component.type : [ prefix, ...component.type ]
-    });
-    return list;
-}
-` : ''}`;
-    return factoryContent;
+import { type ComponentTypeDictionary } from '@remkoj/optimizely-cms-react';${hasDynamic || hasClientComponents ? `
+import dynamic from 'next/dynamic';` : ''}`;
+    // The outry for the factory
+    const factoryOutro = `// Export dictionary
+export default ${factoryName};`;
+    // The imports of the factory
+    const factoryImports = [...components, ...subFactories].map(x => {
+        const imports = [];
+        if (x.loaderImport)
+            imports.push(`import ${x.loaderVariable} from '${x.loaderImport}';`);
+        else if (!x.isClient)
+            imports.push(`import ${x.variable} from '${x.import}';`);
+        if (x.suspenseImport)
+            imports.push(`import ${x.suspenseVariable} from '${x.suspenseImport}';`);
+        return imports.length > 0 ? imports.join('\n') : undefined;
+    }).filter(x => x).join('\n');
+    // The dynamic imports of the factory
+    const dynamicImports = hasDynamic ? `// Lazy load components that have a loading file, this only affects client components
+// See https://nextjs.org/docs/app/guides/lazy-loading#importing-server-components
+// for more details on how this affects server components in Next.js
+` + components.filter(x => x.loaderImport).map(x => {
+        return `const ${x.variable} = dynamic(() => import('${x.import}'), {
+  ssr: true,
+  loading: ${x.loaderVariable}
+});`;
+    }).join('\n') : undefined;
+    // The client imports of the factory
+    const clientComponents = hasClientComponents ? `// Lazy load client components even without loader specified
+` + components.filter(x => x.isClient && !x.loaderImport).map(x => {
+        return `const ${x.variable} = dynamic(() => import('${x.import}'), { ssr: true });`;
+    }).join('\n') : undefined;
+    // The actual entries for the factory
+    const factoryEntries = [...components.map(x => {
+            return `  {
+    type: '${x.key}',${x.variant && x.variant !== 'default' ? `
+    variant: '${x.variant}',` : ''}
+    component: ${x.variable}${x.suspenseVariable ? `,
+    useSuspense: true,
+    loader: ${x.suspenseVariable}` : ''}${x.isClient ? `,
+    isClient: true` : ''}
+  }`;
+        }), ...subFactories.map(x => `  ...${x.variable}`)];
+    // The body of the factory
+    const factoryBody = `// Build dictionary
+export const ${factoryName} : ComponentTypeDictionary = [${factoryEntries.length > 0 ? '\n' + factoryEntries.join(',\n') + '\n' : ''}];`;
+    // Combine everything into one string
+    return [factoryIntro, factoryImports, dynamicImports, clientComponents, factoryBody, factoryOutro].filter(x => (x?.length || 0) > 0).join('\n\n') + '\n';
 }
 
 const NextJsCreateCommand = {
@@ -1752,16 +2151,23 @@ const NextJsFragmentsCommand = {
     handler: async (args, opts) => {
         // Prepare
         const { loadedContentTypes, createdTypeFolders } = opts || {};
-        const { components: basePath, _config: { debug }, force } = parseArgs(args);
+        const { components: basePath, _config: { debug }, force, path: appPath } = parseArgs(args);
         const client = createCmsClient(args);
+        // Get content types
         const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(client, args);
+        const allContentTypesMap = new Map();
+        allContentTypes.forEach(x => {
+            if (x.key)
+                allContentTypesMap.set(x.key, x);
+        });
+        const generator = new DocumentGenerator(allContentTypesMap);
         // Start process
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL fragments\n`));
         const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
-        const tracker = new Map();
+        const tracker = new PropertyCollisionTracker(appPath);
         const dependencies = [];
         const updatedTypes = contentTypes.map(contentType => {
-            const { written, propertyTypes } = createComponentFragments(contentType, getTypeFolder(typeFolders, contentType.key), force, debug, tracker);
+            const { written, propertyTypes } = createComponentFragments(contentType, getTypeFolder(typeFolders, contentType.key), force, debug, tracker, generator);
             dependencies.push(...propertyTypes);
             return written ? contentType.key : undefined;
         }).filter(x => x);
@@ -1781,7 +2187,7 @@ const NextJsFragmentsCommand = {
                 typeFolders.push(tf);
             }
             return tf;
-        }, force, debug);
+        }, force, debug, tracker, generator);
         // Report outcome
         if (generatedProps.length > 0)
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL property fragments for ${generatedProps.join(', ')}\n`));
@@ -1791,7 +2197,7 @@ const NextJsFragmentsCommand = {
             process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
     }
 };
-function createComponentFragments(contentType, typePath, force, debug, propertyTracker = new Map()) {
+function createComponentFragments(contentType, typePath, force, debug, propertyTracker = new Map(), generator) {
     const baseQueryFile = typePath.fragmentFile;
     let writeFragment = true;
     if (fs.existsSync(baseQueryFile)) {
@@ -1810,13 +2216,13 @@ function createComponentFragments(contentType, typePath, force, debug, propertyT
     }
     let written = false;
     if (writeFragment) {
-        const fragment = GraphQLGen.buildFragment(contentType, undefined, false, propertyTracker);
+        const fragment = generator.buildFragment(contentType, undefined, false, propertyTracker);
         fs.writeFileSync(baseQueryFile, fragment);
         written = true;
     }
-    return { written, propertyTypes: GraphQLGen.getReferencedPropertyComponents(contentType) };
+    return { written, propertyTypes: DocumentGenerator.getReferencedPropertyComponents(contentType) };
 }
-function createPropertyFragments(propertyTypesList, allContentTypes, selectTypeFolder, force = false, debug = false) {
+function createPropertyFragments(propertyTypesList, allContentTypes, selectTypeFolder, force = false, debug = false, propertyTracker = new Map(), generator) {
     const returnValue = [];
     for (const propertyContentTypeKey of propertyTypesList.filter((v, i, a) => a.indexOf(v, i + 1) <= i)) {
         // Load the ContentType definition
@@ -1848,16 +2254,16 @@ function createPropertyFragments(propertyTypesList, allContentTypes, selectTypeF
             process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) property fragment\n`));
         }
         if (mustWrite) {
-            const fragment = GraphQLGen.buildFragment(contentType, undefined, true);
+            const fragment = generator.buildFragment(contentType, undefined, true, propertyTracker);
             fs.writeFileSync(propertyFragmentFile, fragment);
             returnValue.push(contentType.key);
         }
         // Recurse down for properties that we're not yet rendering
-        const referencedPropertyTypes = GraphQLGen.getReferencedPropertyComponents(contentType).filter(x => !propertyTypesList.includes(x));
+        const referencedPropertyTypes = DocumentGenerator.getReferencedPropertyComponents(contentType).filter(x => !propertyTypesList.includes(x));
         if (referencedPropertyTypes.length > 0) {
             if (debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Component property ${propertyContentTypeKey} uses components a property, recursing down\n`));
-            const additionalProperties = createPropertyFragments(referencedPropertyTypes, allContentTypes, selectTypeFolder, force, debug);
+            const additionalProperties = createPropertyFragments(referencedPropertyTypes, allContentTypes, selectTypeFolder, force, debug, propertyTracker, generator);
             returnValue.push(...additionalProperties);
         }
     }
@@ -1875,16 +2281,23 @@ const NextJsQueriesCommand = {
     handler: async (args, opts) => {
         // Prepare
         const { loadedContentTypes, createdTypeFolders } = opts || {};
-        const { components: basePath, _config: { debug }, force } = parseArgs(args);
+        const { components: basePath, _config: { debug }, force, path: appPath } = parseArgs(args);
         const client = createCmsClient(args);
         const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(client, args);
+        const allContentTypesMap = new Map();
+        allContentTypes.forEach(x => {
+            if (x.key)
+                allContentTypesMap.set(x.key, x);
+        });
+        const generator = new DocumentGenerator(allContentTypesMap);
+        const propertyTracker = new PropertyCollisionTracker(appPath);
         // Start process
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL queries\n`));
         const dependencies = [];
         const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
         const updatedTypes = contentTypes.map(contentType => {
             const typePath = getTypeFolder(typeFolders, contentType.key);
-            const { written, propertyTypes } = createGraphQueries(contentType, typePath, force, debug);
+            const { written, propertyTypes } = createGraphQueries(contentType, typePath, force, debug, propertyTracker, generator);
             dependencies.push(...propertyTypes);
             return written ? contentType.key : undefined;
         }).filter(x => x).flat();
@@ -1903,7 +2316,7 @@ const NextJsQueriesCommand = {
                 typeFolders.push(tf);
             }
             return tf;
-        }, force, debug);
+        }, force, debug, propertyTracker, generator);
         // Report outcome
         if (generatedProps.length > 0)
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL property fragments for ${generatedProps.join(', ')}\n`));
@@ -1913,7 +2326,7 @@ const NextJsQueriesCommand = {
             process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
     }
 };
-function createGraphQueries(contentType, typePath, force, debug) {
+function createGraphQueries(contentType, typePath, force, debug, tracker, generator) {
     const baseQueryFile = typePath.queryFile;
     let mustWrite = true;
     if (fs.existsSync(baseQueryFile)) {
@@ -1931,12 +2344,12 @@ function createGraphQueries(contentType, typePath, force, debug) {
         process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
     }
     if (mustWrite) {
-        const fragment = GraphQLGen.buildGetQuery(contentType, undefined, new Map());
+        const fragment = generator.buildGetQuery(contentType, undefined, tracker);
         fs.writeFileSync(baseQueryFile, fragment);
     }
     return {
         written: mustWrite,
-        propertyTypes: GraphQLGen.getReferencedPropertyComponents(contentType)
+        propertyTypes: DocumentGenerator.getReferencedPropertyComponents(contentType)
     };
 }
 
@@ -2216,7 +2629,46 @@ function writeFileAsync(path, data) {
     });
 }
 
-var version = "6.0.0-pre9";
+const MigrateCommand = {
+    command: "project:migrate",
+    describe: "Automate the directory naming convention update",
+    builder,
+    async handler(args, opts) {
+        const { components: componentsPath} = parseArgs(args);
+        const files = await glob(['*/**/*'], { cwd: componentsPath });
+        const operations = [];
+        for (const file of files) {
+            const fullPath = path.join(componentsPath, file);
+            const pathInfo = await fsAsync.stat(fullPath);
+            if (pathInfo.isDirectory()) { // We only need to rename directories
+                const dirName = path.basename(fullPath);
+                const dirParent = path.dirname(fullPath);
+                const newDirName = keyToSlug(dirName);
+                // We're ignoring casing as changing that will confuse Git
+                if (dirName.toLowerCase() !== newDirName.toLowerCase()) {
+                    process.stdout.write(`${figures.arrowRight} Updating ${file}\n`);
+                    const newFullPath = path.join(dirParent, newDirName);
+                    operations.push({ from: fullPath, to: newFullPath });
+                }
+            }
+            if (pathInfo.isFile() && (fullPath.endsWith('.opti-style.json') || fullPath.endsWith('.opti-type.json'))) {
+                const fileName = path.basename(fullPath);
+                const newFileName = keyToSlug(fileName, { preserveCharacters: ['.'] });
+                if (fileName.toLowerCase() !== newFileName.toLowerCase()) {
+                    const filePath = path.dirname(fullPath);
+                    const newFullPath = path.join(filePath, newFileName);
+                    operations.unshift({ from: fullPath, to: newFullPath });
+                }
+            }
+        }
+        for (const operation of operations) {
+            void await fsAsync.rename(operation.from, operation.to);
+        }
+        NextJsFactoryCommand.handler(args);
+    }
+};
+
+var version = "6.0.0-rc.1";
 var name = "opti-cms";
 var APP = {
 	version: version,
@@ -2241,7 +2693,6 @@ const CmsVersionCommand = {
                     throw error;
             }
         });
-        const hasPreview2Info = versionInfo.results.preview2Data?.baseUrl ? true : false;
         const info = new Table({
             head: [
                 chalk.yellow(chalk.bold("Component")),
@@ -2251,12 +2702,8 @@ const CmsVersionCommand = {
             colAligns: ["left", "left"]
         });
         info.push(["Base URL", versionInfo.baseUrl ?? client.cmsUrl.href]);
-        if (hasPreview2Info)
-            info.push(["Base URL (Preview 2)", versionInfo.results.preview2Data?.baseUrl ?? 'n/a']);
         info.push(["Client API", client.apiVersion]);
         info.push(["Service API", versionInfo.apiVersion]);
-        if (hasPreview2Info)
-            info.push(["Service API (Preview 2)", versionInfo.results.preview2Data?.apiVersion ?? 'n/a']);
         info.push(["CMS Build", versionInfo.cmsVersion]);
         info.push(["Service Build", versionInfo.serviceVersion]);
         info.push(["SDK", APP.version]);
@@ -2379,7 +2826,7 @@ async function deleteContentItem(client, key, onlyChildren = false) {
             process.stderr.write(chalk.redBright(`  ${figures.cross}The ContentItem ${key} is a reserved item, skipping deletion\n`));
         return removedCount;
     }
-    const deleteResult = await client.preview2ContentDelete({ path: { key }, query: { permanent: true } }).then(r => r.key).catch((e) => {
+    const deleteResult = await client.contentDelete({ path: { key }, headers: { "cms-permanent-delete": true } }).then(r => r.key).catch((e) => {
         if (e.status == 404)
             return key;
         throw e;
@@ -2506,7 +2953,7 @@ async function getAllTypes(client, batchSize = 100) {
     return actualItems;
 }
 async function getAllAssets(client, parentKey, batchSize = 100) {
-    const items = await client.preview2ContentListAssets({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
+    const items = await client.contentListAssets({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
         if (e.status == 404) {
             return {
                 items: [],
@@ -2521,7 +2968,7 @@ async function getAllAssets(client, parentKey, batchSize = 100) {
     const actualItems = items.items ?? [];
     const pageCount = Math.ceil(totalItemCount / pageSize);
     for (let pageNr = 1; pageNr < pageCount; pageNr++) {
-        const pageData = await client.preview2ContentListAssets({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
+        const pageData = await client.contentListAssets({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
             if (e.status == 404) {
                 return {
                     items: [],
@@ -2536,7 +2983,7 @@ async function getAllAssets(client, parentKey, batchSize = 100) {
     return actualItems;
 }
 async function getAllItems(client, parentKey, batchSize = 100) {
-    const items = await client.preview2ContentListItems({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
+    const items = await client.contentListItems({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
         if (e.status == 404) {
             return {
                 items: [],
@@ -2551,7 +2998,7 @@ async function getAllItems(client, parentKey, batchSize = 100) {
     const actualItems = items.items ?? [];
     const pageCount = Math.ceil(totalItemCount / pageSize);
     for (let pageNr = 1; pageNr < pageCount; pageNr++) {
-        const pageData = await client.preview2ContentListItems({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
+        const pageData = await client.contentListItems({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
             if (e.status == 404) {
                 return {
                     items: [],
@@ -2584,20 +3031,23 @@ const commands = [
     StylesListCommand,
     StylesPullCommand,
     StylesPushCommand,
+    StylesDeleteCommand,
     TypesPullCommand,
-    TypesPushCommand
+    TypesPushCommand,
+    MigrateCommand
 ];
 
 async function main() {
-    const envFiles = prepare();
-    const app = createOptiCmsApp(APP.name, APP.version, undefined, envFiles);
+    const projectDir = getProjectDir();
+    const envFiles = prepare(projectDir);
+    const app = createOptiCmsApp(APP.name, APP.version, undefined, envFiles, projectDir);
     app.command(commands);
     try {
         await app.parse(process.argv.slice(2));
     }
     catch {
         //We're ignoring error here, as yargs will already generate the "nice output" for it
-        //console.log('Caught error')
+        //console.log ('Caught error')
     }
 }
 main();