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

package/dist/index.js

@@ -1,34 +1,52 @@
 import { globSync, glob, globIterate } from 'glob';
 import { config } from 'dotenv';
 import { expand } from 'dotenv-expand';
-import { readPartialEnvConfig, getCmsIntegrationApiConfigFromEnvironment, createClient, OptiCmsVersion, IntegrationApi, 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 { readPartialEnvConfig, createClient, OptiCmsVersion, ContentRoots } from '@remkoj/optimizely-cms-api';
+import yargs from 'yargs';
+import chalk from 'chalk';
 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 fs$1 from 'node:fs/promises';
 import createDeepMerge from '@fastify/deepmerge';
 import { Ajv } from 'ajv';
 import addFormats from 'ajv-formats';
+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 => {
@@ -44,13 +62,14 @@ 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) => new URL(val) })
+        .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 })
         .option('client_secret', { alias: "cs", description: "API Client Secrent", string: true, type: "string", demandOption: isDemanded(config.clientSecret), default: config.clientSecret })
         .option('user_id', { alias: "u", description: "Impersonate user id", string: true, type: "string", demandOption: false, default: config.actAs })
@@ -115,13 +134,13 @@ function parseArgs({ client_id, client_secret, cms_url, user_id, verbose, path:
 
 function createCmsClient(args) {
     const cfg = getCmsIntegrationApiOptions(args);
-    const baseConfig = getCmsIntegrationApiConfigFromEnvironment();
+    const baseConfig = readPartialEnvConfig();
     const client = createClient({
         ...baseConfig,
         ...cfg
     });
     if (cfg.debug)
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Connecting to ${cfg.base.href} as ${cfg.actAs ?? cfg.clientId}\n`));
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Connecting to ${client.cmsUrl} as ${cfg.actAs ?? cfg.clientId}\n`));
     return client;
 }
 function getCmsIntegrationApiOptions(args) {
@@ -132,149 +151,285 @@ 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;
+/**
+ * This file contains tools that allow using the project that we're targeting
+ */
+/**
+ * Get all the file paths for the content type, taking the current project configuration into
+ * account.
+ *
+ * @param contentType
+ * @param basePath
+ * @returns
+ */
+function getContentTypePaths(contentType, basePath, createFolder = false, debug = false) {
+    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 });
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Created folder ${typePath} for Content-Type ${contentType.key}\n`));
         }
-        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`));
-            const newTemplate = await client.displayTemplatesPut({ path: { key: styleKey }, 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");
+        // Check folders
+        if (!fs.statSync(typePath).isDirectory())
+            throw new Error(`The folder ${typePath} for Content-Type ${contentType.key} exists, but is not a directory!`);
     }
-};
-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' }));
+    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,
+        path: typePath,
+        typePath,
+        typeFile,
+        fragmentFile,
+        componentFile,
+        propertyFragmentFile,
+        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}`);
     }
-    catch (e) {
-        process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} Error while reading ${filePath}\n`));
+    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;
     }
-    return undefined;
+    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   stripLeadingUnderscore
+ * @returns
+ */
+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 isNotNullOrUndefined(i) {
-    return i ? true : false;
+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 contentTypesBuilder = yargs => {
-    yargs.option('excludeTypes', { alias: 'ect', description: "Exclude these content types", string: true, type: 'array', demandOption: false, default: [] });
-    yargs.option('excludeBaseTypes', { alias: 'ebt', description: "Exclude these base types", string: true, type: 'array', demandOption: false, default: ['folder', 'media', 'image', 'video'] });
-    yargs.option("baseTypes", { alias: 'b', description: "Select only these base types", string: true, type: 'array', demandOption: false, default: [] });
-    yargs.option("types", { alias: 't', description: "Select only these types", string: true, type: 'array', demandOption: false, default: [] });
-    yargs.option('all', { alias: 'a', description: "Include non-supported base types", boolean: true, type: 'boolean', demandOption: false, default: false });
+const ContentTypesArgsDefaults = {
+    excludeBaseTypes: ['folder', 'media', 'image', 'video'],
+    excludeTypes: [],
+    baseTypes: [],
+    types: [],
+    all: false
+};
+const contentTypesBuilder = (yargs, defaults = ContentTypesArgsDefaults) => {
+    yargs.option('excludeTypes', { alias: 'ect', description: "Exclude these content types", string: true, type: 'array', demandOption: false, default: defaults.excludeTypes });
+    yargs.option('excludeBaseTypes', { alias: 'ebt', description: "Exclude these base types", string: true, type: 'array', demandOption: false, default: defaults.excludeBaseTypes });
+    yargs.option("baseTypes", { alias: 'b', description: "Select only these base types", string: true, type: 'array', demandOption: false, default: defaults.baseTypes });
+    yargs.option("types", { alias: 't', description: "Select only these types", string: true, type: 'array', demandOption: false, default: defaults.types });
+    yargs.option('all', { alias: 'a', description: "Include non-supported base types", boolean: true, type: 'boolean', demandOption: false, default: defaults.all });
     return yargs;
 };
-function getEnumOptions(enumObject) {
-    return Object.keys(enumObject).filter((item) => {
-        return isNaN(Number(item));
-    });
-}
-async function getContentTypes(client, args, pageSize = 5, allowSystem = false, customFilter) {
+async function getContentTypes(client, args, pageSize = 25, allowSystem = false, customFilter) {
     const { _config: cfg, excludeBaseTypes, excludeTypes, baseTypes, types, all } = parseArgs(args);
-    const validBaseTypes = getEnumOptions(IntegrationApi.ContentBaseType).map(x => x.toLowerCase());
     const allContentTypes = [];
     const filteredContentTypes = [];
     for await (const contentType of getAllContentTypes(client, cfg.debug, pageSize)) {
-        const normalizedContentType = { ...contentType, baseType: contentType.baseType ?? 'default' };
-        // Build the "All" data set
-        if (all)
-            allContentTypes.push(normalizedContentType);
-        else if (validBaseTypes.includes(normalizedContentType.baseType.toLowerCase()))
-            allContentTypes.push(normalizedContentType);
-        else if (cfg.debug) {
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${normalizedContentType.key} as it has an unsupported base type: ${normalizedContentType.baseType}\n`));
+        // 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;
         }
-        else {
+        // 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 folder, use --all to include\n`));
             continue;
         }
+        // Build the unfiltered array
+        allContentTypes.push(contentType);
         // Skip based upon base type filters
-        if (!shouldInclude(normalizedContentType.baseType, baseTypes, excludeBaseTypes)) {
+        if (!shouldInclude(contentType.baseType, baseTypes, excludeBaseTypes, true)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${normalizedContentType.key} as it has a restricted base type: ${normalizedContentType.baseType}\n`));
+                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(normalizedContentType.key, types, excludeTypes)) {
+        if (!shouldInclude(contentType.key, types, excludeTypes, true)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${normalizedContentType.key} as it has a restricted type: ${normalizedContentType.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 (normalizedContentType.source == 'system' && !allowSystem) {
+        if (!allowSystem && isSystemType(contentType)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${normalizedContentType.key} due to it being a system type\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${contentType.key} due to it being a system type\n`));
             continue;
         }
         // Skip based upon custom filter
-        if (customFilter && !await customFilter(normalizedContentType)) {
+        if (customFilter && !await customFilter(contentType)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${normalizedContentType.key} due to the custom filter\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${contentType.key} due to the custom filter\n`));
             continue;
         }
         // Add to list
-        filteredContentTypes.push(normalizedContentType);
+        filteredContentTypes.push(contentType);
     }
     if (cfg.debug)
         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.
  *
@@ -322,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)
@@ -376,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;
@@ -405,35 +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 pageSize = 50;
-        let resultsPage = await opts.client.contentTypesList({ query: { pageIndex: 0, pageSize } });
-        const contentTypes = resultsPage.items ?? [];
-        let pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
-        while (pagesRemaining > 0 && contentTypes.length < resultsPage.totalItemCount) {
-            resultsPage = await opts.client.contentTypesList({ query: { pageIndex: resultsPage.pageIndex + 1, pageSize: resultsPage.pageSize } });
-            contentTypes.push(...resultsPage.items);
-            pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
-        }
-        const fetchedBaseType = contentTypes.filter(x => x.key == definition.contentType).map(x => x.baseType).at(0);
-        if (fetchedBaseType)
-            return `${fetchedBaseType}/${definition.contentType}/${definition.key}.opti-style.json`;
-    }
-    throw new Error(`Unable to resolve the target for the DisplayTemplate: ${definition.key}`);
+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`));
+    }
+    return undefined;
 }
 
 const StylesListCommand = {
@@ -469,158 +865,147 @@ 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",
     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("definitions", { alias: 'd', description: "Create/overwrite typescript definitions", boolean: true, type: 'boolean', demandOption: false, default: true });
+        newYargs.option("definitions", { alias: 'u', description: "Create/overwrite typescript definitions", boolean: true, type: 'boolean', demandOption: false, default: true });
         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) => {
-            let itemPath = undefined;
-            let targetType;
-            let typesPath;
-            if (displayTemplate.nodeType) {
-                itemPath = path.join(basePath, 'nodes', displayTemplate.nodeType, displayTemplate.key);
-                typesPath = path.join(basePath, 'nodes', displayTemplate.nodeType);
-                targetType = 'node/' + displayTemplate.nodeType;
-            }
-            else if (displayTemplate.baseType) {
-                itemPath = path.join(basePath, displayTemplate.baseType, 'styles', displayTemplate.key);
-                typesPath = path.join(basePath, displayTemplate.baseType, 'styles');
-                targetType = 'base/' + displayTemplate.baseType;
-            }
-            else if (displayTemplate.contentType) {
-                const contentType = await client.contentTypesGet({ path: { key: displayTemplate.contentType ?? '-' } });
-                itemPath = path.join(basePath, contentType.baseType, contentType.key);
-                typesPath = path.join(basePath, contentType.baseType, contentType.key);
-                targetType = 'content/' + displayTemplate.contentType;
-            }
-            if (!fs.existsSync(itemPath))
-                fs.mkdirSync(itemPath, { recursive: true });
-            // Write Style JSON
-            const filePath = path.join(itemPath, `${displayTemplate.key}.opti-style.json`);
-            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;
-            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));
-            }
-            if (!typeFiles[targetType]) {
-                typeFiles[targetType] = {
-                    filePath: path.join(typesPath, 'displayTemplates.ts'),
-                    templates: []
-                };
+            // 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");
+    }
+};
+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`));
+        }
+        else {
+            if (debug) {
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting style file for ${displayTemplate.key}\n`));
             }
-            typeFiles[targetType].templates.push({ file: filePath, data: displayTemplate });
-            return displayTemplate.key;
-        }))).filter(x => x);
-        //#endregion
-        //#region Create needed definition files
-        if (definitions) {
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Start creating displayTemplates.ts files\n`));
-            for (const targetId of Object.getOwnPropertyNames(typeFiles)) {
-                const { filePath: typeFilePath, templates } = typeFiles[targetId];
-                if (fs.existsSync(typeFilePath)) {
-                    if (!force) {
-                        if (cfg.debug)
-                            process.stdout.write(chalk.gray(`${figures.cross} Skipped writing definition file for ${targetId} - it already exists\n`));
-                        continue;
-                    }
-                    if (cfg.debug)
-                        process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting definition file for ${targetId} - ${typeFilePath}\n`));
-                }
-                else if (cfg.debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Creating definition file for ${targetId} - ${typeFilePath}\n`));
-                // Write Style definition
-                const imports = [
-                    'import type { LayoutProps } from "@remkoj/optimizely-cms-react"',
-                    'import type { ReactNode, JSX } from "react"'
-                ];
-                const typeContents = [];
-                const props = [];
-                let typeId = targetId.split('/', 2)[1];
-                templates.forEach(({ file: displayTemplateFile, data: displayTemplate }) => {
-                    const importPath = path.relative(path.dirname(typeFilePath), displayTemplateFile).replaceAll('\\', '/');
-                    imports.push(`import type ${displayTemplate.key}Styles from "./${importPath}"`);
-                    typeContents.push(`export type ${displayTemplate.key}Props = LayoutProps<typeof ${displayTemplate.key}Styles>`);
-                    typeContents.push(`export type ${displayTemplate.key}ComponentProps<DT extends Record<string, any> = Record<string, any>> = {
-    data: DT
-    layoutProps: ${displayTemplate.key}Props | undefined
-} & JSX.IntrinsicElements['div']`);
-                    typeContents.push(`export type ${displayTemplate.key}Component<DT extends Record<string, any> = Record<string, any>> = (props: ${displayTemplate.key}ComponentProps<DT>) => ReactNode`);
-                    typeContents.push('');
-                    props.push(`${displayTemplate.key}Props`);
-                    if (!typeId)
-                        typeId = displayTemplate.nodeType ?? displayTemplate.baseType ?? displayTemplate.contentType;
-                });
-                if (typeId) {
-                    typeId = ucFirst$1(typeId);
-                    typeContents.push('');
-                    typeContents.push(`export type ${typeId}LayoutProps = ${props.join(' | ')}
-export type ${typeId}ComponentProps<DT extends Record<string, any> = Record<string, any>, LP extends ${typeId}LayoutProps = ${typeId}LayoutProps> = {
-    data: DT
-    layoutProps: LP | undefined
-} & JSX.IntrinsicElements['div']
-
-export type ${typeId}Component<DT extends Record<string, any> = Record<string, any>, LP extends ${typeId}LayoutProps = ${typeId}LayoutProps> = (props: ${typeId}ComponentProps<DT,LP>) => ReactNode
-
-export function isDefaultProps(props?: ${typeId}LayoutProps | null) : props is ${templates.filter(t => t.data.isDefault).at(0)?.data?.key}Props
+            fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
+            updated = true;
+        }
+    }
+    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';
+    const { filePath: typeFilePath, templates } = typeFile;
+    const shouldWrite = await fsAsync.readFile(typeFilePath, { encoding: "utf-8" }).then(data => data.startsWith('//not-modified')).catch((e) => {
+        if (e?.code === 'ENOENT')
+            return true;
+        if (debug)
+            process.stdout.write(chalk.redBright(chalk.bold(`${figures.cross} Unexpected error while reading display template file\n`)));
+        return false;
+    });
+    if (!shouldWrite) {
+        if (!force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.cross} Skipped writing definition file for ${typeFileId} - it already exists and has been modified\n`));
+            return false;
+        }
+        else {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Forcefully overwriting definition file for ${typeFileId} - ${typeFilePath}\n`));
+        }
+    }
+    else if (debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating or updating definition file for ${typeFileId} - ${typeFilePath}\n`));
+    // Write Style definition
+    const imports = [
+        'import type { LayoutProps, LayoutPropsSettingKeys, LayoutPropsSettingValues, CmsComponentProps } from "@remkoj/optimizely-cms-react"',
+        'import type { JSX, ComponentType } from "react"'
+    ];
+    const typeContents = [];
+    const props = [];
+    let typeId = typeFileId.split('/', 2)[1];
+    templates.forEach(({ file: displayTemplateFile, data: displayTemplate }) => {
+        const importPath = path.relative(path.dirname(typeFilePath), displayTemplateFile).replaceAll('\\', '/');
+        imports.push(`import type ${displayTemplate.key}Styles from "./${importPath}"`);
+        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, 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(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, 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(`
+export function isDefaultProps(props?: ${typeId}LayoutProps | null) : props is ${defaultTemplate.data?.key}Props
 {
-    return props?.template == "${templates.filter(t => t.data.isDefault).at(0)?.data?.key}"
+    return props?.template == "${defaultTemplate.data?.key}"
 }`);
-                    templates.forEach(t => {
-                        typeContents.push(`
+        }
+        templates.forEach(t => {
+            typeContents.push(`
 export function is${t.data.key}Props(props?: ${typeId}LayoutProps | null) : props is ${t.data.key}Props
 {
     return props?.template == "${t.data.key}"
 }`);
-                    });
-                }
-                fs.writeFileSync(typeFilePath, imports.join("\n") + "\n\n" + typeContents.join("\n"));
-            }
-        }
-        //#endregion
-        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);
+    void await fsAsync.writeFile(typeFilePath, prefix + "\n" + imports.join("\n") + "\n\n" + typeContents.join("\n"));
+    return true;
 }
 
 // Node JS and 3rd Party libraries
@@ -633,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`)));
@@ -685,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");
@@ -697,10 +1078,10 @@ 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.displayTemplatesPut({ body: definition, path: { key: definition.key } }).catch(_ => undefined);
+            const response = await client.displayTemplatesCreate({ body: definition }).catch(_ => undefined);
             if (!response) {
                 process.stderr.write(chalk.redBright(chalk.bold(`\[ERROR] Unable to create style definition ${definition.displayName} in Optimizely CMS\n`)));
             }
@@ -720,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",
@@ -729,40 +1195,237 @@ 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 = path.join(basePath, contentType.baseType, contentType.key);
-            const typeFile = path.join(typePath, `${contentType.key}.opti-type.json`);
-            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`));
                 return contentType.key;
             }
-            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)
-                delete outContentType.lastModifiedBy;
-            if (outContentType.lastModified)
-                delete outContentType.lastModified;
-            if (outContentType.created)
-                delete outContentType.created;
-            if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Writing type definition for ${contentType.displayName} (${contentType.key})\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`)));
+            const outContentType = { ...contentType };
+            if (outContentType.source || outContentType.source == "")
+                delete outContentType.source;
+            if (outContentType.lastModifiedBy || outContentType.lastModifiedBy == "")
+                delete outContentType.lastModifiedBy;
+            if (outContentType.lastModified)
+                delete outContentType.lastModified;
+            if (outContentType.created)
+                delete outContentType.created;
+            for (const propName of Object.getOwnPropertyNames(outContentType.properties ?? {})) {
+                if (!["content", "contentReference"].includes(outContentType.properties[propName].type)) {
+                    if (isEmptyArray(outContentType.properties[propName].allowedTypes))
+                        delete outContentType.properties[propName].allowedTypes;
+                    if (isEmptyArray(outContentType.properties[propName].restrictedTypes))
+                        delete outContentType.properties[propName].restrictedTypes;
+                }
+                if (outContentType.properties[propName].type == 'array' && !["content", "contentReference"].includes(outContentType.properties[propName].items?.type)) {
+                    if (isEmptyArray(outContentType.properties[propName].items.allowedTypes))
+                        delete outContentType.properties[propName].items.allowedTypes;
+                    if (isEmptyArray(outContentType.properties[propName].items.restrictedTypes))
+                        delete outContentType.properties[propName].items.restrictedTypes;
+                }
+            }
+            if (debug)
+                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`)));
+    }
+};
+
+const deepmerge$1 = createDeepMerge();
+async function loadSchema(client, schemaName) {
+    const schemas = Array.isArray(schemaName) ? schemaName : [schemaName];
+    process.stdout.write(`${figures.arrowRight} Downloading current JSON Schema\n`);
+    const spec = await client.getOpenApiSpec();
+    const specSchemas = spec.components?.schemas ?? {};
+    process.stdout.write(`  ${figures.tick} Complete\n`);
+    const result = [];
+    process.stdout.write(`\n${figures.arrowRight} Constructing schema for ${schemas.join(', ')}\n`);
+    for await (const schema of schemas)
+        if (specSchemas[schema]) {
+            const definitions = {};
+            const processedSchema = processSchema(specSchemas[schema], definitions, spec);
+            const jsonSchema = {
+                //"$schema": "https://json-schema.org/draft-07/schema",
+                "$id": new URL(`schema/${schema}`, client.getSchemaItemBase()).href,
+                type: "object",
+                title: schema,
+                ...processedSchema,
+                definitions
+            };
+            result.push({
+                title: schema,
+                schema: postProcessDefintions(jsonSchema)
+            });
+            process.stdout.write(`  ${figures.tick} Constructed schema of ${schema}\n`);
+        }
+    return result;
+}
+function getValidator(schemaObject) {
+    const ajv = new Ajv({
+        discriminator: true
+    });
+    addFormats(ajv);
+    return ajv.compile(schemaObject);
+}
+function postProcessDefintions(jsonSchema) {
+    if (!jsonSchema.definitions)
+        return jsonSchema;
+    for (const definitionName in jsonSchema.definitions) {
+        if ((definitionName.endsWith("Property") || definitionName.endsWith("ListItem")) && jsonSchema.definitions[definitionName].properties) {
+            const type = jsonSchema.definitions[definitionName].properties?.type;
+            if (isRefSchema(type)) {
+                const typeSchema = resolveRefSchema(type, jsonSchema);
+                if (typeSchema && typeSchema.type === 'string' && Array.isArray(typeSchema.enum)) {
+                    let typeValue = definitionName.substring(0, definitionName.length - 8);
+                    typeValue = typeValue[0].toLowerCase() + typeValue.substring(1);
+                    typeValue = typeValue === 'list' ? 'array' : typeValue;
+                    typeValue = typeValue === 'jsonString' ? 'json' : typeValue;
+                    if (typeSchema.enum.includes(typeValue)) {
+                        const newTypeDef = deepmerge$1({}, typeSchema);
+                        newTypeDef.enum = newTypeDef.enum.filter((x) => x === typeValue);
+                        jsonSchema.definitions[definitionName].properties.type = newTypeDef;
+                    }
+                }
+            }
+        }
+    }
+    return jsonSchema;
+}
+/**
+ * Schema normalization to tranform the schema from a .Net generated OpenAPI Schema
+ * to a AJV compatible JSON Schema
+ *
+ * @see   https://ajv.js.org/
+ * @param schema
+ * @param defs
+ * @param spec
+ * @returns
+ */
+function processSchema(schema, defs, spec, mergeAllOf = true) {
+    if (Array.isArray(schema))
+        return schema.map(s => processSchema(s, defs, spec, mergeAllOf));
+    if (typeof schema !== 'object' || schema === null)
+        return schema;
+    const props = Object.getOwnPropertyNames(schema);
+    if (props.length === 1 && props[0] === '$ref') {
+        const ref = schema['$ref'];
+        if (isLocalRef(ref)) {
+            const refName = getLocalRefName(ref);
+            if (!defs[refName]) {
+                const refItem = resolveLocalRef(ref, spec);
+                defs[refName] = processSchema(refItem, defs, spec, mergeAllOf);
+            }
+            const newRef = `#/definitions/${refName}`;
+            return { "$ref": newRef };
+        }
+        else {
+            return schema;
+        }
+    }
+    else if (mergeAllOf && props.includes('allOf') && Array.isArray(schema['allOf'])) {
+        // process all of
+        const newObject = props.reduce((generated, propName) => {
+            if (propName != 'allOf')
+                generated[propName] = schema[propName];
+            return generated;
+        }, {});
+        const allOfSchemas = schema['allOf'].map((subschema) => {
+            const resolvedSchema = isRefSchema(subschema) ? resolveRefSchema(subschema, spec) : subschema;
+            const resolved = processSchema(resolvedSchema, defs, spec, mergeAllOf);
+            return resolved;
+        });
+        const merged = allOfSchemas.reduce((previous, current) => deepmerge$1(previous, current), newObject);
+        if (newObject['description'])
+            merged['description'] = newObject['description'];
+        if (newObject['title'])
+            merged['title'] = newObject['title'];
+        return merged;
+    }
+    else {
+        const newSchema = {};
+        for (const key of props) {
+            if (key === 'pattern' && typeof schema[key] === 'string') {
+                newSchema[key] = safeCreateUnicodeRegExp(schema[key]);
+                /*} else if (key === 'readOnly' && schema[key] === true) {
+                  return undefined*/
+            }
+            else if (['additionalProperties', 'required', 'properties', 'discriminator'].includes(key) && typeof schema[key] !== 'object') ;
+            else if (key === 'discriminator' && !Array.isArray(schema['oneOf'])) ;
+            else if (key === 'discriminator' && !schema['type']) {
+                newSchema.type = 'object';
+            }
+            else {
+                const keyVal = processSchema(schema[key], defs, spec, mergeAllOf);
+                if (keyVal !== undefined)
+                    newSchema[key] = keyVal;
+            }
+        }
+        if (newSchema['oneOf'] && Array.isArray(newSchema['oneOf']) && newSchema['nullable']) {
+            delete newSchema['nullable'];
+        }
+        return newSchema;
     }
-};
+}
+function isRefSchema(schema) {
+    if (typeof schema != 'object' || schema == null)
+        return false;
+    return Object.getOwnPropertyNames(schema).length === 1 && typeof schema['$ref'] === 'string';
+}
+function resolveRefSchema(schema, spec) {
+    if (!isRefSchema(schema))
+        return undefined;
+    return resolveLocalRef(schema['$ref'], spec);
+}
+function isLocalRef(ref) {
+    return typeof ref === 'string' && ref.startsWith('#');
+}
+function getLocalRefName(ref) {
+    if (!isLocalRef(ref))
+        return undefined;
+    const refPath = ref.substring(2).split('/');
+    return refPath.at(refPath.length - 1);
+}
+function resolveLocalRef(ref, spec) {
+    const refPath = ref.substring(2).split('/');
+    return refPath.reduce((integrator, current) => {
+        return integrator ? integrator[current] : undefined;
+    }, spec);
+}
+const replaceEscapedChars = [
+    [new RegExp('\\\\ ', 'g'), ' '],
+    [new RegExp('\\\\!', 'g'), '!'],
+    [new RegExp('\\\\"', 'g'), '"'],
+    [new RegExp('\\\\#', 'g'), '#'],
+    [new RegExp('\\\\%', 'g'), '%'],
+    [new RegExp('\\\\&', 'g'), '&'],
+    [new RegExp("\\\\'", 'g'), "'"],
+    [new RegExp('\\\\,', 'g'), ','],
+    [new RegExp('\\\\-', 'g'), '-'],
+    [new RegExp('\\\\:', 'g'), ':'],
+    [new RegExp('\\\\;', 'g'), ';'],
+    [new RegExp('\\\\<', 'g'), '<'],
+    [new RegExp('\\\\=', 'g'), '='],
+    [new RegExp('\\\\>', 'g'), '>'],
+    [new RegExp('\\\\@', 'g'), '@'],
+    [new RegExp('\\\\_', 'g'), '_'],
+    [new RegExp('\\\\`', 'g'), '`'],
+    [new RegExp('\\\\~', 'g'), '~'],
+    [new RegExp('\\\\[zZ]', 'g'), '$'],
+];
+function safeCreateUnicodeRegExp(pattern) {
+    for (const unEscape of replaceEscapedChars) {
+        pattern = pattern.replace(unEscape[0], unEscape[1]);
+    }
+    return pattern;
+}
 
 const TypesPushCommand = {
     command: "types:push",
@@ -793,9 +1456,18 @@ const TypesPushCommand = {
                 (!baseTypes || baseTypes.length == 0 || baseTypes.includes(data.definition.baseType)) &&
                 (!types || types.length == 0 || types.includes(data.definition.key));
         });
+        // Create validator
+        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Loading OpenAPI Specification for validation\n`));
+        const typeSchema = (await loadSchema(client, 'ContentType')).at(0)?.schema;
+        const typeValidator = await getValidator(typeSchema);
         // Output selected types
-        const results = await Promise.all(typeDefinitions.map(type => {
+        const results = await Promise.all(typeDefinitions.map(async (type) => {
+            if (!type.definition.key) {
+                process.stdout.write(chalk.yellowBright(`  ${figures.arrowRight} Content Type has no key in ${type.file}\n`));
+                return;
+            }
             process.stdout.write(chalk.yellowBright(`  ${figures.arrowRight} Pushing ${type.definition.displayName} from ${type.file}\n`));
+            // Filter unwanted fields from the ContentType definition
             const outType = { ...type.definition };
             if (outType.source)
                 delete outType.source;
@@ -805,13 +1477,31 @@ const TypesPushCommand = {
                 delete outType.lastModified;
             if (outType.lastModifiedBy || outType.lastModifiedBy == "")
                 delete outType.lastModifiedBy;
-            if (outType.features)
-                delete outType.features;
-            if (outType.usage)
-                delete outType.usage;
-            return client.contentTypesPut({ path: { key: outType.key }, body: outType, query: { ignoreDataLossWarnings: force } })
-                .then(ct => { return { key: type.definition.key, type: ct, file: type.file }; })
-                .catch(e => { return { key: type.definition.key, type: type.definition, file: type.file, error: e }; });
+            //if (outType.features) delete outType.features
+            //if (outType.usage) delete outType.usage
+            const validationResult = typeValidator(outType);
+            if (validationResult || force) {
+                if (!validationResult)
+                    process.stdout.write(chalk.yellowBright(`  ${figures.arrowRight} Ignoring validation errors in ${type.file}\n`));
+                const currentContentType = (await client.contentTypesGet({ path: { key: type.definition.key } }).catch(() => null));
+                function buildError(e) {
+                    return { key: type.definition.key, type: type.definition, file: type.file, error: e };
+                }
+                function buildData(ct) {
+                    return { key: type.definition.key, type: ct, file: type.file };
+                }
+                return (currentContentType ?
+                    client.contentTypesPatch({ path: { key: type.definition.key }, body: outType }) :
+                    client.contentTypesCreate({ body: outType })).then(buildData).catch(buildError);
+            }
+            else {
+                return {
+                    key: type.definition.key,
+                    type: type.definition,
+                    file: type.file,
+                    error: typeValidator.errors.map(x => x.message).join(', ')
+                };
+            }
         }));
         const overview = new Table({
             head: [
@@ -843,241 +1533,10 @@ const builder = yargs => {
     return updatedArgs;
 };
 function createTypeFolders(contentTypes, basePath, debug = false) {
-    const folders = contentTypes.map(contentType => {
-        const baseType = contentType.baseType ?? 'default';
-        // Create the type folder
-        const typePath = path.join(basePath, baseType, contentType.key);
-        if (!fs.existsSync(typePath)) {
-            fs.mkdirSync(typePath, { recursive: true });
-            if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Created folder ${typePath} for Content-Type ${contentType.key}\n`));
-        }
-        // Check folders
-        if (!fs.statSync(typePath).isDirectory())
-            throw new Error(`The folder ${typePath} for Content-Type ${contentType.key} exists, but is not a directory!`);
-        return {
-            type: contentType.key,
-            path: typePath,
-        };
-    });
-    return folders;
+    return contentTypes.map(contentType => getContentTypePaths(contentType, basePath, true, debug));
 }
 function getTypeFolder(list, type) {
-    return list.filter(x => x.type == type).at(0)?.path;
-}
-
-/**
- * Keep track of all generated properties
- */
-let generatedProps = [];
-const NextJsQueriesCommand = {
-    command: "nextjs:fragments",
-    describe: "Create the GrapQL Fragments for a Next.JS / Optimizely Graph structure",
-    builder,
-    handler: async (args, opts) => {
-        generatedProps = [];
-        // Prepare
-        const { loadedContentTypes, createdTypeFolders } = opts || {};
-        const { components: basePath, _config: { debug }, force } = parseArgs(args);
-        const client = createCmsClient(args);
-        const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(client, args);
-        // Start process
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL fragments for ${contentTypes.map(x => x.key).join(', ')}\n`));
-        const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
-        const updatedTypes = contentTypes.map(contentType => {
-            const typePath = getTypeFolder(typeFolders, contentType.key);
-            return createGraphFragments(contentType, typePath, basePath, force, debug, allContentTypes, client.runtimeCmsVersion == OptiCmsVersion.CMS12);
-        }).filter(x => x).flat();
-        // Report outcome
-        if (updatedTypes.length > 0)
-            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL fragments for ${updatedTypes.join(', ')}\n`));
-        else
-            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL fragments created/updated\n`));
-        if (!opts)
-            process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
-        generatedProps = [];
-    }
-};
-function createGraphFragments(contentType, typePath, basePath, force, debug, contentTypes, forCms12 = false) {
-    const returnValue = [];
-    const baseType = contentType.baseType ?? 'default';
-    const baseQueryFile = path.join(typePath, `${contentType.key}.${baseType}.graphql`);
-    if (fs.existsSync(baseQueryFile)) {
-        if (force) {
-            if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${contentType.displayName} (${contentType.key}) base fragment\n`));
-        }
-        else {
-            if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) base fragment - file already exists\n`));
-            return undefined;
-        }
-    }
-    else if (debug) {
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
-    }
-    const { fragment, propertyTypes } = createInitialFragment(contentType, false, undefined, forCms12);
-    fs.writeFileSync(baseQueryFile, fragment);
-    returnValue.push(contentType.key);
-    let dependencies = Array.isArray(propertyTypes) ? [...propertyTypes] : [];
-    while (Array.isArray(dependencies) && dependencies.length > 0) {
-        let newDependencies = [];
-        dependencies.forEach(dep => {
-            const propContentType = contentTypes.filter(x => x.key == dep[0])[0];
-            if (!propContentType) {
-                console.warn(`🟠 The content type ${dep[0]} has been referenced, but is not found in the Optimizely CMS instance`);
-                return;
-            }
-            const fullTypeName = forCms12 ? contentType.key + propContentType.key : propContentType.key;
-            const propertyFragmentFile = path.join(basePath, propContentType.baseType, propContentType.key, `${fullTypeName}.property.graphql`);
-            const propertyFragmentDir = path.dirname(propertyFragmentFile);
-            if (!fs.existsSync(propertyFragmentDir))
-                fs.mkdirSync(propertyFragmentDir, { recursive: true });
-            if (!fs.existsSync(propertyFragmentFile) || force) {
-                if (debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Writing ${propContentType.displayName} (${propContentType.key}) property fragment\n`));
-                const propContentTypeInfo = createInitialFragment(propContentType, true, contentType, forCms12);
-                fs.writeFileSync(propertyFragmentFile, propContentTypeInfo.fragment);
-                returnValue.push(propContentType.key);
-                if (Array.isArray(propContentTypeInfo.propertyTypes))
-                    newDependencies.push(...propContentTypeInfo.propertyTypes);
-            }
-        });
-        dependencies = newDependencies;
-    }
-    return returnValue.length > 0 ? returnValue : undefined;
-}
-function createInitialFragment(contentType, forProperty = false, forBaseType, forCms12 = false) {
-    const propertyTypes = [];
-    const fragmentFields = [];
-    const typeProps = contentType.properties ?? {};
-    Object.getOwnPropertyNames(typeProps).forEach(propKey => {
-        // Exclude system properties, which are not present in Optimizely Graph
-        if (['experience', 'section'].includes(contentType.baseType) && ['AdditionalData', 'UnstructuredData', 'Layout'].includes(propKey))
-            return;
-        // Exclude CMS 12 System Properties
-        if (forCms12 && ['Categories'].includes(propKey))
-            return;
-        const propType = typeProps[propKey].type;
-        const isConflict = generatedProps.some(x => x.propName == propKey && x.propType != propType);
-        const propName = isConflict ? `${contentType.key}${propKey}: ${propKey}` : propKey;
-        // Write the property
-        switch (propType) {
-            case IntegrationApi.PropertyDataType.ARRAY:
-                {
-                    const typeData = typeProps[propKey];
-                    switch (typeData.items.type) {
-                        case IntegrationApi.PropertyDataType.INTEGER:
-                            if (typeData.format == 'categorization')
-                                fragmentFields.push(`${propName} { Id, Name, Description }`);
-                            else
-                                fragmentFields.push(propName);
-                            break;
-                        case IntegrationApi.PropertyDataType.STRING:
-                            fragmentFields.push(propName);
-                            break;
-                        case IntegrationApi.PropertyDataType.CONTENT:
-                            if (contentType.baseType == 'page' || contentType.baseType == 'experience')
-                                fragmentFields.push(`${propName} { ...${forCms12 ? 'PageIContentListItem' : 'BlockData'} }`);
-                            else
-                                fragmentFields.push(`${propName} { ...IContentListItem }`);
-                            break;
-                        case IntegrationApi.PropertyDataType.COMPONENT:
-                            const componentType = typeData.items.contentType;
-                            switch (componentType) {
-                                case 'link':
-                                    fragmentFields.push(`${propName} { ...LinkItemData }`);
-                                    break;
-                                default:
-                                    {
-                                        const componentFragmentName = forCms12 ? contentType.key + componentType : componentType + 'Property';
-                                        fragmentFields.push(`${propName} { ...${componentFragmentName}Data }`);
-                                        propertyTypes.push([componentType, true]);
-                                        break;
-                                    }
-                            }
-                            break;
-                        case IntegrationApi.PropertyDataType.CONTENT_REFERENCE:
-                            fragmentFields.push(`${propName} { ...ReferenceData }`);
-                            break;
-                        default:
-                            fragmentFields.push(`${propName} { __typename }`);
-                            break;
-                    }
-                    break;
-                }
-            case IntegrationApi.PropertyDataType.STRING: {
-                const propDetails = typeProps[propKey];
-                switch (propDetails.format ?? "") {
-                    case 'html':
-                        fragmentFields.push(forCms12 ? `${propName} { Structure, Html }` : `${propName} { json, html }`);
-                        break;
-                    case 'shortString':
-                    case 'selectOne':
-                    case '':
-                        fragmentFields.push(propName);
-                        break;
-                    default:
-                        if (!isConflict)
-                            console.warn(chalk.redBright(`❗ Unsupported string format "${propDetails.format}" for ${contentType.key}.${propKey}; add it manually to the fragment if you need to access this field`));
-                        break;
-                }
-                break;
-            }
-            case IntegrationApi.PropertyDataType.URL:
-                fragmentFields.push(forCms12 ? propName : `${propName} { ...LinkData }`);
-                break;
-            case IntegrationApi.PropertyDataType.CONTENT_REFERENCE:
-                fragmentFields.push(`${propName} { ...ReferenceData }`);
-                break;
-            case IntegrationApi.PropertyDataType.COMPONENT: {
-                const componentType = typeProps[propKey].contentType;
-                if (forCms12 && componentType == "link") {
-                    fragmentFields.push(`${propName} { ...LinkItemData }`);
-                }
-                else {
-                    const componentFragmentName = forCms12 ? contentType.key + componentType : componentType + 'Property';
-                    fragmentFields.push(`${propName} { ...${componentFragmentName}Data }`);
-                    propertyTypes.push([componentType, true]);
-                }
-                break;
-            }
-            case IntegrationApi.PropertyDataType.BINARY:
-                fragmentFields.push(`${propName} { ...BinaryData }`);
-                break;
-            default:
-                fragmentFields.push(propName);
-                break;
-        }
-        generatedProps.push({
-            propType: typeProps[propKey].type,
-            propName: propKey
-        });
-    });
-    if (contentType.baseType == "experience")
-        fragmentFields.push('...ExperienceData');
-    if (fragmentFields.length == 0) {
-        if (forCms12)
-            fragmentFields.push('empty: _metadata: ContentLink { key: GuidValue }');
-        else
-            fragmentFields.push('empty: _metadata { key }');
-    }
-    const fragmentTarget = forProperty ? (forCms12 ? (forBaseType?.key ?? '') + contentType.key : contentType.key + 'Property') : contentType.key;
-    const tpl = `fragment ${fragmentTarget}Data on ${fragmentTarget} {
-  ${fragmentFields.join("\n  ")}
-}`;
-    return {
-        fragment: tpl,
-        propertyTypes: propertyTypes.length == 0 ? null : propertyTypes
-    };
-}
-
-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);
+    return list.filter(x => x.type == type).at(0);
 }
 
 const NextJsComponentsCommand = {
@@ -1105,8 +1564,8 @@ const NextJsComponentsCommand = {
             process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
     }
 };
-function createComponent(contentType, typePath, force, debug = false) {
-    const componentFile = path.join(typePath, 'index.tsx');
+function createComponent(contentType, typePathInfo, force, debug = false) {
+    const { componentFile, path: typePath } = typePathInfo;
     if (fs.existsSync(componentFile)) {
         if (!force) {
             if (debug)
@@ -1121,8 +1580,9 @@ function createComponent(contentType, typePath, force, debug = false) {
     // Get type information & short-hands
     const displayTemplate = getDisplayTemplateInfo$1(contentType, typePath);
     const baseDisplayTemplate = getBaseTypeTemplateInfo(contentType, typePath);
-    const varName = `${contentType.key}${ucFirst(contentType.baseType ?? 'part')}`;
-    const tplFn = Templates[contentType.baseType] ?? Templates['default'];
+    const normalizedBaseType = normalizeBaseType(contentType.baseType ?? 'part');
+    const varName = `${contentType.key}${ucFirst(normalizedBaseType)}`;
+    const tplFn = Templates[normalizedBaseType] ?? Templates['default'];
     if (!tplFn) {
         if (debug)
             process.stdout.write(chalk.redBright(`${figures.cross} Skipping ${contentType.displayName} (${contentType.key}) component - no template for ${contentType.baseType} found\n`));
@@ -1146,6 +1606,11 @@ function getBaseTypeTemplateInfo(contentType, typePath) {
     }
     return undefined;
 }
+function normalizeBaseType(baseType) {
+    if (baseType.startsWith('_'))
+        return baseType.substring(1);
+    return baseType;
+}
 function getDisplayTemplateInfo$1(contentType, typePath) {
     const displayTemplatesFile = path.join(typePath, 'displayTemplates.ts');
     if (fs.existsSync(displayTemplatesFile)) {
@@ -1159,51 +1624,90 @@ function getDisplayTemplateInfo$1(contentType, typePath) {
 }
 const Templates = {
     // Default Template for all components without specifics
-    default: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { type CmsComponent } from "@remkoj/optimizely-cms-react";
+    default: (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 ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}${baseDisplayTemplate ? `
 import { ${baseDisplayTemplate} } from "../styles/displayTemplates";` : ''}
 
 /**
  * ${contentType.displayName}
+ * ---
  * ${contentType.description}
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${(displayTemplate || baseDisplayTemplate) ? ', ' + [displayTemplate, baseDisplayTemplate].filter(x => x).join(" | ") : ''}> = ({ data${(displayTemplate || baseDisplayTemplate) ? ', layoutProps' : ''}, children }) => {
+export const ${varName} : CmsComponent<${contentType.key}DataFragment${(displayTemplate || baseDisplayTemplate) ? ', ' + [displayTemplate, baseDisplayTemplate].filter(x => x).join(" | ") : ''}> = ({ data${(displayTemplate || baseDisplayTemplate) ? ', layoutProps' : ''}, editProps }) => {
     const componentName = '${contentType.displayName}'
     const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
-    return <div className="w-full border-y border-y-solid border-y-slate-900 py-2 mb-4">
+    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> }
-        { children && <div className="mt-4 mx-4 flex flex-col">{ children }</div>}
-    </div>
+    </CmsEditable>
 }
 ${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
 ${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
 
+export default ${varName}`,
+    // Default Template for all section types
+    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";` : ''}
+
+/**
+ * ${contentType.displayName}
+ * ---
+ * ${contentType.description}
+ */
+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}.getDataQuery = () => get${contentType.key}DataDocument
+
 export default ${varName}`,
     // Template for all page component types
     page: (contentType, varName, displayTemplate) => `import { type OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs";
-import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";${displayTemplate ? `
+import { get${contentType.key}DataDocument, type get${contentType.key}DataQuery } from '@/gql/graphql'${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}
 import { getSdk } from "@/gql"
 
 /**
  * ${contentType.displayName}
+ * ---
  * ${contentType.description}
+ * 
+ * This component uses the content query that is auto-generated with the Optimizely CMS Preset for GraphQL Codegen, if you need 
+ * to override this query create a GraphQL file (for example: \`get${contentType.key}Data.query.graphql\`) in the same folder as
+ * this file. This file must include a GraphQL query with the name \`get${contentType.key}Data\`. 
+ * 
+ * [Documentation: Customizing queries](https://github.com/remkoj/optimizely-dxp-clients/blob/main/packages/optimizely-graph-functions/docs/customizing_queries.md)
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, children }) => {
+export const ${varName} : CmsComponent<get${contentType.key}DataQuery${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''} }) => {
     const componentName = '${contentType.displayName}'
     const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
     return <div className="mx-auto px-2 container">
         <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> }
-        { children && <div className="flex flex-col mt-4 mx-4">{ children }</div>}
     </div>
 }
 ${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
-${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+${varName}.getDataQuery = () => get${contentType.key}DataDocument
 ${varName}.getMetaData = async (contentLink, locale, client) => {
     const sdk = getSdk(client);
     // Add your metadata logic here
@@ -1213,23 +1717,36 @@ ${varName}.getMetaData = async (contentLink, locale, client) => {
 export default ${varName}`,
     // Template for all experience component types
     experience: (contentType, varName, displayTemplate) => `import { type OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs";
-import { ${contentType.key}DataFragmentDoc, type ExperienceDataFragment, type ${contentType.key}DataFragment } from "@/gql/graphql";
+import { ExperienceDataFragmentDoc, get${contentType.key}DataDocument, type get${contentType.key}DataQuery } from '@/gql/graphql'
+import { getFragmentData } from '@/gql/fragment-masking'
 import { OptimizelyComposition, isNode, CmsEditable } from "@remkoj/optimizely-cms-react/rsc";${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}
 import { getSdk } from "@/gql/client"
 
 /**
  * ${contentType.displayName}
+ * ---
  * ${contentType.description}
+ * 
+ * This component uses the content query that is auto-generated with the Optimizely CMS Preset for GraphQL Codegen, if you need 
+ * to override this query create the file \`${contentType.key}.query.graphql\` in the same folder as this file. This file then
+ * must include a GraphQL query with the name \`get${contentType.key} Data\`. 
+ * 
+ * [Documentation: Customizing queries](https://github.com/remkoj/optimizely-dxp-clients/blob/main/packages/optimizely-graph-functions/docs/customizing_queries.md)
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, ctx }) => {
-    const composition = (data as ExperienceDataFragment)?.composition
-    return <CmsEditable as="div" className="mx-auto px-2 container" cmsFieldName="unstructuredData" ctx={ctx}>
-        { composition && isNode(composition) && <OptimizelyComposition node={composition} ctx={ctx} /> }
-    </CmsEditable>
+export const ${varName} : CmsComponent<get${contentType.key}DataQuery${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, ctx }) => {
+  if (ctx) ctx.editableContentIsExperience = true
+  const composition = getFragmentData(ExperienceDataFragmentDoc, data).composition
+  const componentName = '${contentType.displayName}'
+  const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
+  return <CmsEditable as="div" className="mx-auto px-2 container" cmsFieldName="unstructuredData" ctx={ctx}>
+      <div className="font-bold italic">{ componentName }</div>
+      <div>{ componentInfo }</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
 ${varName}.getMetaData = async (contentLink, locale, client) => {
     const sdk = getSdk(client);
     // Add your metadata logic here
@@ -1247,18 +1764,19 @@ const NextJsVisualBuilderCommand = {
         // Prepare
         const { components: basePath, _config: { debug }, force } = parseArgs(args);
         // Create the fall-back node and style defintions
-        await StylesPullCommand.handler({ ...args, excludeNodeTypes: [], excludeTemplates: [], nodes: [], templates: [], templateTypes: ['node'], definitions: true });
+        await StylesPullCommand.handler({ ...args, excludeNodeTypes: [], excludeTemplates: [], nodes: [], templates: [], templateTypes: ['node', 'base'], definitions: true });
         createGenericNode(basePath, force, debug);
         // Get all styles
         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 templatePath = path.join(basePath, styleDefinition.baseType, 'styles', styleDefinition.key);
+            const baseType = (styleDefinition.baseType ?? '').startsWith('_') ? (styleDefinition.baseType ?? '').substring(1) : styleDefinition.baseType;
+            const templatePath = path.join(basePath, baseType, 'styles', keyToSlug(styleDefinition.key));
             createSpecificNode(styleDefinition, templatePath, force, debug);
         });
     }
@@ -1268,23 +1786,40 @@ 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';
     const displayTemplateName = getDisplayTemplateInfo(template, templatePath);
-    const component = `import { extractSettings, type CmsLayoutComponent } from "@remkoj/optimizely-cms-react/rsc";${displayTemplateName ? `
-import { ${displayTemplateName} } from "../displayTemplates";` : ''}
+    const imports = ['import { extractSettings, type CmsLayoutComponent } from "@remkoj/optimizely-cms-react/rsc";'];
+    const componentProps = [`className="vb:${baseType} vb:${baseType}:${template.key}"`];
+    const componentArgs = ['layoutProps', 'children'];
+    let componentType = 'div';
+    if (displayTemplateName)
+        imports.push(`import { ${displayTemplateName} } from "../displayTemplates";`);
+    if (baseType.toLowerCase() == 'section') {
+        imports.push('import { CmsEditable } from "@remkoj/optimizely-cms-react/rsc";');
+        componentType = 'CmsEditable';
+        componentProps.push('{ ...editProps }');
+        componentArgs.push('editProps');
+    }
+    let style = '';
+    if (baseType == "row")
+        style = ` style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "stretch" }}`;
+    if (baseType == "column")
+        style = ` style={{ display: "flex", flexDirection: "column", flexGrow: 1 }}`;
+    const component = `${imports.join("\n")}
 
-export const ${template.key} : CmsLayoutComponent<${displayTemplateName ?? '{}'}> = ({ contentLink, layoutProps, children }) => {
+export const ${template.key} : CmsLayoutComponent<${displayTemplateName ?? '{}'}> = ({ ${componentArgs.join(', ')} }) => {
     const layout = extractSettings(layoutProps);
-    return (<div className="vb:${template.nodeType} vb:${template.nodeType}:${template.key}">{ children }</div>);
+    return (<${componentType} ${componentProps.join(' ')}${style}>{ children }</${componentType}>);
 }
 
 export default ${template.key};`;
@@ -1304,13 +1839,19 @@ function createGenericNode(basePath, force, debug) {
     else if (debug)
         process.stdout.write(chalk.gray(`${figures.arrowRight} Creating generic node component\n`));
     const nodeContent = `import { CmsEditable, type CmsLayoutComponent } from '@remkoj/optimizely-cms-react/rsc'
+import { type CSSProperties } from 'react';
 
-export const VisualBuilderNode : CmsLayoutComponent = ({ contentLink, layoutProps, children, ctx }) =>
+export const VisualBuilderNode : CmsLayoutComponent = ({ editProps, layoutProps, children }) =>
 {
-    let className = \`vb:\${layoutProps?.layoutType}\`
-    if (layoutProps && layoutProps.layoutType == "section")
-        return <CmsEditable as="div" className={ className } cmsId={ contentLink.key } ctx={ctx}>{ children }</CmsEditable>
-    return <div className={ className }>{ children }</div>
+  let className = \`vb:\${layoutProps?.layoutType}\`;
+  let style : CSSProperties | undefined = undefined;
+  if (layoutProps?.layoutType == "row")
+    style = {display: "flex", flexDirection: "row"}
+  if (layoutProps?.layoutType == "column")
+    style = {display: "flex", flexDirection: "column"}
+  if (layoutProps && layoutProps.layoutType == "section")
+    return <CmsEditable as="div" className={ className } {...editProps}>{ children }</CmsEditable>
+  return <div className={ className } style={ style }>{ children }</div>
 }
 
 export default VisualBuilderNode`;
@@ -1330,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",
@@ -1338,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);
@@ -1463,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`));
@@ -1488,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 = {
@@ -1558,7 +2129,7 @@ const NextJsCreateCommand = {
         await Promise.all([
             TypesPullCommand.handler(args),
             StylesPullCommand.handler({ ...args, excludeNodeTypes: [], excludeTemplates: [], nodes: [], templates: [], templateTypes: [], definitions: true }),
-            NextJsQueriesCommand.handler(args, { loadedContentTypes: getContentTypesResult, createdTypeFolders: folders })
+            //createFragments.handler(args, { loadedContentTypes: getContentTypesResult, createdTypeFolders: folders })
         ]);
         process.stdout.write(chalk.yellowBright(chalk.bold(figures.tick) + " Prepared types, styles and fragments") + "\n");
         // Then create the components
@@ -1572,183 +2143,214 @@ const NextJsCreateCommand = {
         process.stdout.write(chalk.green(chalk.bold(figures.tick + " Scaffolded a complete Next.JS / Optimizely Graph structure")) + "\n");
     }
 };
-
-const deepmerge$1 = createDeepMerge();
-async function loadSchema(client, schemaName) {
-    const schemas = Array.isArray(schemaName) ? schemaName : [schemaName];
-    process.stdout.write(`${figures.arrowRight} Downloading current JSON Schema\n`);
-    const spec = await client.getOpenApiSpec();
-    const specSchemas = spec.components?.schemas ?? {};
-    process.stdout.write(`  ${figures.tick} Complete\n`);
-    const result = [];
-    process.stdout.write(`\n${figures.arrowRight} Constructing schema for ${schemas.join(', ')}\n`);
-    for await (const schema of schemas)
-        if (specSchemas[schema]) {
-            const definitions = {};
-            const processedSchema = processSchema(specSchemas[schema], definitions, spec);
-            const jsonSchema = {
-                //"$schema": "https://json-schema.org/draft-07/schema",
-                "$id": `https://api.cms.optimizely.com/schema/${schema}`,
-                type: "object",
-                title: schema,
-                ...processedSchema,
-                definitions
-            };
-            result.push({
-                title: schema,
-                schema: postProcessDefintions(jsonSchema)
-            });
-            process.stdout.write(`  ${figures.tick} Constructed schema of ${schema}\n`);
+
+const NextJsFragmentsCommand = {
+    command: "nextjs:fragments",
+    describe: "Create the GrapQL Fragments for a Next.JS / Optimizely Graph structure",
+    builder,
+    handler: async (args, opts) => {
+        // Prepare
+        const { loadedContentTypes, createdTypeFolders } = opts || {};
+        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 PropertyCollisionTracker(appPath);
+        const dependencies = [];
+        const updatedTypes = contentTypes.map(contentType => {
+            const { written, propertyTypes } = createComponentFragments(contentType, getTypeFolder(typeFolders, contentType.key), force, debug, tracker, generator);
+            dependencies.push(...propertyTypes);
+            return written ? contentType.key : undefined;
+        }).filter(x => x);
+        // Report outcome
+        if (updatedTypes.length > 0)
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL fragments for ${updatedTypes.join(', ')}\n`));
+        else
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL fragments created/updated\n`));
+        // Start property generation process
+        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL property fragments\n`));
+        const generatedProps = createPropertyFragments(dependencies, allContentTypes, (contentType) => {
+            if (!contentType.key)
+                return undefined;
+            let tf = getTypeFolder(typeFolders, contentType.key);
+            if (!tf) {
+                tf = getContentTypePaths(contentType, basePath, true, debug);
+                typeFolders.push(tf);
+            }
+            return tf;
+        }, 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`));
+        else
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL property fragments created/updated\n`));
+        if (!opts)
+            process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+    }
+};
+function createComponentFragments(contentType, typePath, force, debug, propertyTracker = new Map(), generator) {
+    const baseQueryFile = typePath.fragmentFile;
+    let writeFragment = true;
+    if (fs.existsSync(baseQueryFile)) {
+        if (force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${contentType.displayName} (${contentType.key}) base fragment\n`));
         }
-    return result;
-}
-function postProcessDefintions(jsonSchema) {
-    if (!jsonSchema.definitions)
-        return jsonSchema;
-    for (const definitionName in jsonSchema.definitions) {
-        if ((definitionName.endsWith("Property") || definitionName.endsWith("ListItem")) && jsonSchema.definitions[definitionName].properties) {
-            const type = jsonSchema.definitions[definitionName].properties?.type;
-            if (isRefSchema(type)) {
-                const typeSchema = resolveRefSchema(type, jsonSchema);
-                if (typeSchema && typeSchema.type === 'string' && Array.isArray(typeSchema.enum)) {
-                    let typeValue = definitionName.substring(0, definitionName.length - 8);
-                    typeValue = typeValue[0].toLowerCase() + typeValue.substring(1);
-                    typeValue = typeValue === 'list' ? 'array' : typeValue;
-                    typeValue = typeValue === 'jsonString' ? 'json' : typeValue;
-                    if (typeSchema.enum.includes(typeValue)) {
-                        const newTypeDef = deepmerge$1({}, typeSchema);
-                        newTypeDef.enum = newTypeDef.enum.filter((x) => x === typeValue);
-                        jsonSchema.definitions[definitionName].properties.type = newTypeDef;
-                    }
-                }
-            }
+        else {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) base fragment - file already exists\n`));
+            writeFragment = false;
         }
     }
-    return jsonSchema;
+    else if (debug) {
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
+    }
+    let written = false;
+    if (writeFragment) {
+        const fragment = generator.buildFragment(contentType, undefined, false, propertyTracker);
+        fs.writeFileSync(baseQueryFile, fragment);
+        written = true;
+    }
+    return { written, propertyTypes: DocumentGenerator.getReferencedPropertyComponents(contentType) };
 }
-/**
- * Schema normalization to tranform the schema from a .Net generated OpenAPI Schema
- * to a AJV compatible JSON Schema
- *
- * @see   https://ajv.js.org/
- * @param schema
- * @param defs
- * @param spec
- * @returns
- */
-function processSchema(schema, defs, spec, mergeAllOf = true) {
-    if (Array.isArray(schema))
-        return schema.map(s => processSchema(s, defs, spec, mergeAllOf));
-    if (typeof schema !== 'object' || schema === null)
-        return schema;
-    const props = Object.getOwnPropertyNames(schema);
-    if (props.length === 1 && props[0] === '$ref') {
-        const ref = schema['$ref'];
-        if (isLocalRef(ref)) {
-            const refName = getLocalRefName(ref);
-            if (!defs[refName]) {
-                const refItem = resolveLocalRef(ref, spec);
-                defs[refName] = processSchema(refItem, defs, spec, mergeAllOf);
-            }
-            const newRef = `#/definitions/${refName}`;
-            return { "$ref": newRef };
+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
+        const contentType = allContentTypes.filter(x => x.key == propertyContentTypeKey).at(0);
+        if (!contentType) {
+            console.warn(`🟠 The content type ${propertyContentTypeKey} has been referenced, but is not found in the Optimizely CMS instance`);
+            continue;
         }
-        else {
-            return schema;
+        // Load the paths for this ContentType
+        const depFolder = selectTypeFolder(contentType);
+        if (!depFolder) {
+            console.warn(`🟠 The content type ${propertyContentTypeKey} cannot be stored in the project`);
+            continue;
         }
-    }
-    else if (mergeAllOf && props.includes('allOf') && Array.isArray(schema['allOf'])) {
-        // process all of
-        const newObject = props.reduce((generated, propName) => {
-            if (propName != 'allOf')
-                generated[propName] = schema[propName];
-            return generated;
-        }, {});
-        const allOfSchemas = schema['allOf'].map((subschema) => {
-            const resolvedSchema = isRefSchema(subschema) ? resolveRefSchema(subschema, spec) : subschema;
-            const resolved = processSchema(resolvedSchema, defs, spec, mergeAllOf);
-            return resolved;
-        });
-        const merged = allOfSchemas.reduce((previous, current) => deepmerge$1(previous, current), newObject);
-        if (newObject['description'])
-            merged['description'] = newObject['description'];
-        if (newObject['title'])
-            merged['title'] = newObject['title'];
-        return merged;
-    }
-    else {
-        const newSchema = {};
-        for (const key of props) {
-            if (key === 'pattern' && typeof schema[key] === 'string') {
-                newSchema[key] = safeCreateUnicodeRegExp(schema[key]);
-                /*} else if (key === 'readOnly' && schema[key] === true) {
-                  return undefined*/
-            }
-            else if (['additionalProperties', 'required', 'properties', 'discriminator'].includes(key) && typeof schema[key] !== 'object') ;
-            else if (key === 'discriminator' && !Array.isArray(schema['oneOf'])) ;
-            else if (key === 'discriminator' && !schema['type']) {
-                newSchema.type = 'object';
+        const propertyFragmentFile = depFolder.propertyFragmentFile;
+        let mustWrite = true;
+        if (fs.existsSync(propertyFragmentFile)) {
+            if (force) {
+                if (debug)
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${contentType.displayName} (${contentType.key}) property fragment\n`));
             }
             else {
-                const keyVal = processSchema(schema[key], defs, spec, mergeAllOf);
-                if (keyVal !== undefined)
-                    newSchema[key] = keyVal;
+                if (debug)
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) property fragment - file already exists\n`));
+                mustWrite = false;
             }
         }
-        return newSchema;
+        else if (debug) {
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) property fragment\n`));
+        }
+        if (mustWrite) {
+            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 = 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, propertyTracker, generator);
+            returnValue.push(...additionalProperties);
+        }
     }
+    return returnValue;
 }
-function isRefSchema(schema) {
-    if (typeof schema != 'object' || schema == null)
-        return false;
-    return Object.getOwnPropertyNames(schema).length === 1 && typeof schema['$ref'] === 'string';
-}
-function resolveRefSchema(schema, spec) {
-    if (!isRefSchema(schema))
-        return undefined;
-    return resolveLocalRef(schema['$ref'], spec);
-}
-function isLocalRef(ref) {
-    return typeof ref === 'string' && ref.startsWith('#');
-}
-function getLocalRefName(ref) {
-    if (!isLocalRef(ref))
-        return undefined;
-    const refPath = ref.substring(2).split('/');
-    return refPath.at(refPath.length - 1);
-}
-function resolveLocalRef(ref, spec) {
-    const refPath = ref.substring(2).split('/');
-    return refPath.reduce((integrator, current) => {
-        return integrator ? integrator[current] : undefined;
-    }, spec);
-}
-const replaceEscapedChars = [
-    [new RegExp('\\\\ ', 'g'), ' '],
-    [new RegExp('\\\\!', 'g'), '!'],
-    [new RegExp('\\\\"', 'g'), '"'],
-    [new RegExp('\\\\#', 'g'), '#'],
-    [new RegExp('\\\\%', 'g'), '%'],
-    [new RegExp('\\\\&', 'g'), '&'],
-    [new RegExp("\\\\'", 'g'), "'"],
-    [new RegExp('\\\\,', 'g'), ','],
-    [new RegExp('\\\\-', 'g'), '-'],
-    [new RegExp('\\\\:', 'g'), ':'],
-    [new RegExp('\\\\;', 'g'), ';'],
-    [new RegExp('\\\\<', 'g'), '<'],
-    [new RegExp('\\\\=', 'g'), '='],
-    [new RegExp('\\\\>', 'g'), '>'],
-    [new RegExp('\\\\@', 'g'), '@'],
-    [new RegExp('\\\\_', 'g'), '_'],
-    [new RegExp('\\\\`', 'g'), '`'],
-    [new RegExp('\\\\~', 'g'), '~'],
-    [new RegExp('\\\\[zZ]', 'g'), '$'],
-];
-function safeCreateUnicodeRegExp(pattern) {
-    for (const unEscape of replaceEscapedChars) {
-        pattern = pattern.replace(unEscape[0], unEscape[1]);
+
+const NextJsQueriesCommand = {
+    command: "nextjs:queries",
+    describe: "Create the GrapQL Queries to use two queries to load content",
+    builder: yargs => {
+        const updatedArgs = contentTypesBuilder(yargs, { ...ContentTypesArgsDefaults, baseTypes: ['page', 'experience'] });
+        updatedArgs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
+        return updatedArgs;
+    },
+    handler: async (args, opts) => {
+        // Prepare
+        const { loadedContentTypes, createdTypeFolders } = opts || {};
+        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, propertyTracker, generator);
+            dependencies.push(...propertyTypes);
+            return written ? contentType.key : undefined;
+        }).filter(x => x).flat();
+        // Report outcome
+        if (updatedTypes.length > 0)
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL queries for ${updatedTypes.join(', ')}\n`));
+        else
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL queries created/updated\n`));
+        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL property fragments\n`));
+        const generatedProps = createPropertyFragments(dependencies, allContentTypes, (contentType) => {
+            if (!contentType.key)
+                return undefined;
+            let tf = getTypeFolder(typeFolders, contentType.key);
+            if (!tf) {
+                tf = getContentTypePaths(contentType, basePath, true, debug);
+                typeFolders.push(tf);
+            }
+            return tf;
+        }, 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`));
+        else
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL property fragments created/updated\n`));
+        if (!opts)
+            process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
     }
-    return pattern;
+};
+function createGraphQueries(contentType, typePath, force, debug, tracker, generator) {
+    const baseQueryFile = typePath.queryFile;
+    let mustWrite = true;
+    if (fs.existsSync(baseQueryFile)) {
+        if (force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${contentType.displayName} (${contentType.key}) base fragment\n`));
+        }
+        else {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) base fragment - file already exists\n`));
+            mustWrite = false;
+        }
+    }
+    else if (debug) {
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
+    }
+    if (mustWrite) {
+        const fragment = generator.buildGetQuery(contentType, undefined, tracker);
+        fs.writeFileSync(baseQueryFile, fragment);
+    }
+    return {
+        written: mustWrite,
+        propertyTypes: DocumentGenerator.getReferencedPropertyComponents(contentType)
+    };
 }
 
 const SchemaDownloadCommand = {
@@ -1769,12 +2371,12 @@ const SchemaDownloadCommand = {
         const fullSchemaDir = path.normalize(path.join(projectPath, schemaDir));
         const relativeSchemaDir = path.relative(projectPath, fullSchemaDir);
         process.stdout.write(`\n${figures.arrowRight} Validating schema folder ${relativeSchemaDir}\n`);
-        const schemaDirInfo = await fs$1.stat(fullSchemaDir).catch((e) => { if (e.code == 'ENOENT')
+        const schemaDirInfo = await fsAsync.stat(fullSchemaDir).catch((e) => { if (e.code == 'ENOENT')
             return undefined;
         else
             throw e; });
         if (!schemaDirInfo) {
-            await fs$1.mkdir(fullSchemaDir, { recursive: true });
+            await fsAsync.mkdir(fullSchemaDir, { recursive: true });
         }
         else if (!schemaDirInfo.isDirectory()) {
             process.stderr.write(chalk.redBright(chalk.bold(`${figures.cross} [Error] The schema directory exists, but is not a directory (${relativeSchemaDir})\n`)));
@@ -1787,7 +2389,7 @@ const SchemaDownloadCommand = {
             const schemaFile = path.normalize(path.join(fullSchemaDir, `${schema.title.toLowerCase()}.schema.json`));
             const relativePath = path.relative(projectPath, schemaFile);
             try {
-                await fs$1.writeFile(schemaFile, JSON.stringify(schema.schema, undefined, 2), {
+                await fsAsync.writeFile(schemaFile, JSON.stringify(schema.schema, undefined, 2), {
                     encoding: "utf-8",
                     flag: force ? 'w' : 'wx'
                 });
@@ -1941,13 +2543,6 @@ function groupErrorsByKeyword(errors) {
         toMerge.enum = [toMerge.enum.reduce((prev, current) => prev ? deepmerge(prev, current) : current, undefined)];
     return toMerge;
 }
-function getValidator(schemaObject) {
-    const ajv = new Ajv({
-        discriminator: true
-    });
-    addFormats(ajv);
-    return ajv.compile(schemaObject);
-}
 
 const SchemaVsCodeCommand = {
     command: "schema:vscode",
@@ -2034,7 +2629,46 @@ function writeFileAsync(path, data) {
     });
 }
 
-var version = "6.0.0-pre8";
+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,
@@ -2064,10 +2698,10 @@ const CmsVersionCommand = {
                 chalk.yellow(chalk.bold("Component")),
                 chalk.yellow(chalk.bold("Version"))
             ],
-            colWidths: [20, 60],
+            colWidths: [30, 60],
             colAligns: ["left", "left"]
         });
-        info.push(["Instance", client.cmsUrl.host]);
+        info.push(["Base URL", versionInfo.baseUrl ?? client.cmsUrl.href]);
         info.push(["Client API", client.apiVersion]);
         info.push(["Service API", versionInfo.apiVersion]);
         info.push(["CMS Build", versionInfo.cmsVersion]);
@@ -2192,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.contentDelete({ 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;
@@ -2218,8 +2852,7 @@ async function resetSystemTypes(client) {
             body: {
                 key: systemType,
                 properties: {}
-            },
-            query: { ignoreDataLossWarnings: true }
+            }
         }).catch((e) => e.status == 404 ? undefined : null);
         if (newType)
             resetTypes++;
@@ -2387,6 +3020,7 @@ const commands = [
     NextJsComponentsCommand,
     NextJsCreateCommand,
     NextJsFactoryCommand,
+    NextJsFragmentsCommand,
     NextJsQueriesCommand,
     NextJsVisualBuilderCommand,
     SchemaDownloadCommand,
@@ -2397,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();