@remkoj/optimizely-cms-cli 5.1.5 → 6.0.0-pre10

package/dist/index.js

@@ -1,7 +1,7 @@
-import { globSync, glob } from 'glob';
-import dotenv from 'dotenv';
+import { globSync, glob, globIterate } from 'glob';
+import { config } from 'dotenv';
 import { expand } from 'dotenv-expand';
-import { getCmsIntegrationApiConfigFromEnvironment, createClient, OptiCmsVersion, IntegrationApi, ContentRoots } from '@remkoj/optimizely-cms-api';
+import { readPartialEnvConfig, createClient, OptiCmsVersion, ContentRoots } from '@remkoj/optimizely-cms-api';
 import yargs from 'yargs';
 import chalk from 'chalk';
 import path from 'node:path';
@@ -10,6 +10,11 @@ import figures from 'figures';
 import Table from 'cli-table3';
 import fsAsync from 'node:fs/promises';
 import { input, select, confirm } from '@inquirer/prompts';
+import createDeepMerge from '@fastify/deepmerge';
+import { Ajv } from 'ajv';
+import addFormats from 'ajv-formats';
+import GraphQLGen from '@remkoj/optimizely-graph-functions/contenttype-loader';
+import deepEqual from 'fast-deep-equal';
 
 /**
  * Prepare the application context, by parsing the .env files in the main
@@ -18,19 +23,25 @@ import { input, select, confirm } from '@inquirer/prompts';
  * @returns     A string array with the files processed
  */
 function prepare() {
-    const envFiles = globSync(".env*").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(dotenv.config({ path: envFiles, debug: false, quiet: true }));
+    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`));
+    expand(config({ path: envFiles, debug: false, quiet: true }));
     return envFiles;
 }
 
 function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
+    if (envFiles) {
+        process.stdout.write(chalk.bold(`✅ Loaded environment files:`) + "\n");
+        envFiles.forEach(envFile => {
+            process.stdout.write(`  👉 ${envFile}\n`);
+        });
+        process.stdout.write("\n");
+    }
     let config;
     try {
-        config = getCmsIntegrationApiConfigFromEnvironment();
+        config = readPartialEnvConfig();
     }
     catch (e) {
-        if (envFiles)
-            console.error(chalk.gray(`Included environment files: ${envFiles.join(', ')}`));
         console.error(chalk.redBright(`${chalk.bold("[ERROR]:")} Error processing environment variables: ${e.message}`));
         process.exit(1);
     }
@@ -40,7 +51,7 @@ function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
         .usage('$0 <cmd> [args]')
         .option("path", { alias: "p", description: "Application root folder", string: true, type: "string", demandOption: false, default: process.cwd() })
         .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 })
@@ -52,12 +63,10 @@ function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
         .epilogue(`Copyright Remko Jantzen - 2023-${(new Date(Date.now())).getFullYear()}`)
         .help()
         .fail((msg, error, args) => {
-        if (envFiles)
-            console.error(chalk.gray(`Included environment files: ${envFiles.join(', ')}\n`));
         if (msg)
-            console.error(msg + "\n");
+            console.error(chalk.redBright(msg) + "\n");
         if (error)
-            console.error(`[${chalk.bold(error.name ?? 'Error')}]: ${error.message ?? ''}\n`);
+            console.error(chalk.redBright(`[${chalk.bold(error.name ?? 'Error')}]: ${error.message ?? ''}`) + '\n');
         args.showHelp("error");
     });
 }
@@ -106,16 +115,23 @@ function parseArgs({ client_id, client_secret, cms_url, user_id, verbose, path:
 }
 
 function createCmsClient(args) {
-    const { _config: cfg } = parseArgs(args);
-    const baseConfig = getCmsIntegrationApiConfigFromEnvironment();
+    const cfg = getCmsIntegrationApiOptions(args);
+    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) {
+    if (typeof args !== 'object' || args === null)
+        return undefined;
+    if (args.base && (typeof args.base === 'object') && (typeof args.base.href === 'string'))
+        return args;
+    return parseArgs(args)._config;
+}
 
 const StylesPushCommand = {
     command: "styles:push",
@@ -150,7 +166,12 @@ const StylesPushCommand = {
                 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.displayTemplates.displayTemplatesPut(styleKey, styleDefinition);
+            // Try to fetch the current template
+            const currentTemplate = await client.displayTemplatesGet({ path: { key: styleKey } }).catch(() => { return undefined; });
+            // Create / Replace the current template
+            const newTemplate = await (currentTemplate ?
+                client.displayTemplatesPatch({ path: { key: styleKey }, body: styleDefinition }) :
+                client.displayTemplatesCreate({ body: styleDefinition }));
             return newTemplate;
         }))).filter(isNotNullOrUndefined);
         const styles = new Table({
@@ -190,9 +211,61 @@ function isNotNullOrUndefined(i) {
     return i ? true : false;
 }
 
+/**
+ * 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 = typeToSlug(contentType.baseType);
+    const typePath = path.join(basePath, baseTypeSlug, contentType.key);
+    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`));
+        }
+        // Check folders
+        if (!fs.statSync(typePath).isDirectory())
+            throw new Error(`The folder ${typePath} for Content-Type ${contentType.key} exists, but is not a directory!`);
+    }
+    const typeFile = path.join(typePath, `${contentType.key}.opti-type.json`);
+    const fragmentFile = path.join(typePath, `${contentType.key}.${baseTypeSlug}.graphql`);
+    const propertyFragmentFile = path.join(typePath, `${contentType.key}.property.graphql`);
+    const queryFile = path.join(typePath, `get${contentType.key}Data.query.graphql`);
+    const componentFile = path.join(typePath, `index.tsx`);
+    return {
+        type: contentType.key,
+        path: typePath,
+        typePath,
+        typeFile,
+        fragmentFile,
+        componentFile,
+        propertyFragmentFile,
+        queryFile
+    };
+}
+/**
+ *
+ * @param typeKey
+ * @returns
+ */
+function typeToSlug(typeKey) {
+    let typeKeySlug = typeKey.toLowerCase();
+    if (typeKeySlug.startsWith('_'))
+        typeKeySlug = typeKeySlug.substring(1);
+    return typeKeySlug;
+}
+
 const ContentTypesArgsDefaults = {
-    excludeBaseTypes: [],
-    excludeTypes: ['folder', 'media', 'image', 'video'],
+    excludeBaseTypes: ['folder', 'media', 'image', 'video'],
+    excludeTypes: [],
     baseTypes: [],
     types: [],
     all: false
@@ -205,72 +278,92 @@ const contentTypesBuilder = (yargs, defaults = ContentTypesArgsDefaults) => {
     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 = 100, allowSystem = false) {
+async function getContentTypes(client, args, pageSize = 25, allowSystem = false, customFilter) {
     const { _config: cfg, excludeBaseTypes, excludeTypes, baseTypes, types, all } = parseArgs(args);
-    process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Content Types from Optimizely CMS\n`));
-    if (cfg.debug)
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page 1 of ? (${pageSize} items per page)\n`));
-    let resultsPage = await client.contentTypes.contentTypesList(undefined, undefined, 0, pageSize);
-    const results = resultsPage.items ?? [];
-    let pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
-    while (pagesRemaining > 0 && results.length < resultsPage.totalItemCount) {
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page ${resultsPage.pageIndex + 2} of ${Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize)} (${resultsPage.pageSize} items per page)\n`));
-        resultsPage = await client.contentTypes.contentTypesList(undefined, undefined, resultsPage.pageIndex + 1, resultsPage.pageSize);
-        results.push(...resultsPage.items);
-        pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
-    }
-    if (cfg.debug) {
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched ${results.length} Content-Types from Optimizely CMS\n`));
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Filtering Content-Types based upon arguments\n`));
-    }
-    const validBaseTypes = getEnumOptions(IntegrationApi.ContentBaseType).map(x => x.toLowerCase());
-    const allContentTypes = all ?
-        // If we're returning all content types, including non-supported base types, make sure the base type is always set
-        results.map(contentType => {
-            return {
-                ...contentType,
-                baseType: contentType.baseType ?? 'default'
-            };
-        }) :
-        // Otherwise filter out any non supported content base type
-        results.filter(contentType => {
-            const baseType = (contentType.baseType ?? 'default').toLowerCase();
-            const isValid = validBaseTypes.includes(baseType);
-            if (!isValid && cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Removing ${contentType.key} as it has an unsupported base type: ${baseType}\n`));
-            return isValid;
-        });
-    const contentTypes = allContentTypes.filter(data => {
-        // Remove items based upon filters
-        const keepType = (!excludeBaseTypes.includes(data.baseType)) &&
-            (!excludeTypes.includes(data.key)) &&
-            (baseTypes.length == 0 || baseTypes.includes(data.baseType)) &&
-            (types.length == 0 || types.includes(data.key));
-        if (!keepType) {
+    const allContentTypes = [];
+    const filteredContentTypes = [];
+    for await (const contentType of getAllContentTypes(client, cfg.debug, pageSize)) {
+        // Skip content types mapped against Graph data, these should be used with their source type in Graph, not the reference in CMS
+        if (!all && contentType.key.toLowerCase().startsWith('graph:')) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${data.key} due to applied filters\n`));
-            return false;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it is a reference to external data in Optimizely Graph\n`));
+            continue;
         }
-        // Skip system types if desired
-        if (data.source == 'system' && !allowSystem) {
+        // Build the unfiltered array
+        allContentTypes.push(contentType);
+        // Skip based upon base type filters
+        if (!shouldInclude(typeToSlug(contentType.baseType), baseTypes.map(x => typeToSlug(x)), excludeBaseTypes.map(x => typeToSlug(x)))) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${data.key} due to it being a system type\n`));
-            return false;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it has a restricted base type: ${contentType.baseType}\n`));
+            continue;
         }
-        return true;
-    });
+        // Skip based upon type filters
+        if (!shouldInclude(contentType.key, types, excludeTypes)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it has a restricted type: ${contentType.key}\n`));
+            continue;
+        }
+        // Skip based upon system filter
+        if (contentType.source == 'system' && !allowSystem) {
+            if (cfg.debug)
+                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(contentType)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${contentType.key} due to the custom filter\n`));
+            continue;
+        }
+        // Add to list
+        filteredContentTypes.push(contentType);
+    }
     if (cfg.debug)
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Applied content type filters, reduced from ${results.length} to ${contentTypes.length} items\n`));
-    return {
-        all: allContentTypes,
-        contentTypes: contentTypes
-    };
+        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.
+ *
+ * @param client
+ * @param args
+ * @param pageSize
+ */
+async function* getAllContentTypes(client, debug = false, pageSize = 25) {
+    process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Content Types from Optimizely CMS\n`));
+    let requestPageSize = pageSize;
+    let requestPageIndex = 0;
+    let totalItemCount = 0;
+    let totalPages = 0;
+    do {
+        const resultsPage = await client.contentTypesList({ query: { pageIndex: requestPageIndex, pageSize: requestPageSize } }).catch((_) => {
+            return {
+                items: [],
+                totalItemCount: 0,
+                pageIndex: requestPageIndex,
+                pageSize: requestPageSize
+            };
+        });
+        // Calculate fields for next page
+        totalItemCount = resultsPage.totalItemCount ?? 0;
+        requestPageSize = resultsPage.pageSize;
+        requestPageIndex = resultsPage.pageIndex + 1;
+        totalPages = Math.ceil(totalItemCount / requestPageSize);
+        // Debug output
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched contentTypes page ${requestPageIndex} of ${totalPages} (${requestPageSize} items per page)\n`));
+        // Yield items
+        for (const contentType of (resultsPage.items ?? [])) {
+            yield contentType;
+        }
+    } while (requestPageIndex < totalPages);
 }
 
 const stylesBuilder = yargs => {
@@ -282,73 +375,90 @@ const stylesBuilder = yargs => {
     newArgs.option("templateTypes", { alias: 'tt', description: "Select only these template types", choices: ['node', 'base', 'component'], type: 'array', demandOption: false, default: [] });
     return newArgs;
 };
-async function getStyles(client, args, pageSize = 100) {
+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);
     process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Style-Definitions from Optimizely CMS\n`));
-    if (cfg.debug)
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page 1 of ? (${pageSize} items per page)\n`));
-    let resultsPage = await client.displayTemplates.displayTemplatesList(0, pageSize);
-    const results = resultsPage.items ?? [];
-    let pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
-    while (pagesRemaining > 0 && results.length < resultsPage.totalItemCount) {
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page ${resultsPage.pageIndex + 2} of ${Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize)} (${resultsPage.pageSize} items per page)\n`));
-        resultsPage = await client.displayTemplates.displayTemplatesList(resultsPage.pageIndex + 1, resultsPage.pageSize);
-        results.push(...resultsPage.items);
-        pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
-    }
-    if (cfg.debug) {
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched ${results.length} Style-Definitions from Optimizely CMS\n`));
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Filtering Style-Definitions based upon arguments\n`));
-    }
-    const styles = results.filter(data => {
-        if (isExcluded(data.key, excludeTemplates, templates)) {
+    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)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style defintion key filtering active\n`));
-            return false;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style defintion key filtering active\n`));
+            continue;
         }
-        const templateType = data.baseType ? 'base' : data.nodeType ? 'node' : data.contentType ? 'component' : 'unknown';
         if (isExcluded(templateType, [], templateTypes)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style type filtering is active\n`));
-            return false;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style type filtering is active\n`));
+            continue;
         }
-        if (data.baseType && isExcluded(data.baseType, excludeBaseTypes, baseTypes)) {
+        if (displayTemplate.baseType && isExcluded(displayTemplate.baseType, excludeBaseTypes, baseTypes)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style is defined at base type level and base type filtering is active\n`));
-            return false;
+                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 (data.contentType && isExcluded(data.contentType, excludeTypes, types)) {
+        if (displayTemplate.contentType && isExcluded(displayTemplate.contentType, excludeTypes, types)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style is defined at component type level and component type filtering is active\n`));
-            return false;
+                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 ${data.key} - Style is targeting the ${templateType} level and component type selection is active\n`));
-            return false;
+                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 (data.nodeType && isExcluded(data.nodeType, excludeNodeTypes, nodes)) {
+        if (displayTemplate.nodeType && isExcluded(displayTemplate.nodeType, excludeNodeTypes, nodes)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style is defined at node type level and node type filtering is active\n`));
-            return false;
+                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 ${data.key} - Style is targeting the ${templateType} level and node type selection is active\n`));
-            return false;
+                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;
         }
-        return true;
-    });
+        filteredDisplayTemplates.push(displayTemplate);
+    }
     if (cfg.debug)
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Applied content type filters, reduced from ${results.length} to ${styles.length} items\n`));
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Applied style filters, reduced from ${allDisplayTemplates.length} to ${filteredDisplayTemplates.length} items\n`));
     return {
-        all: results,
-        styles
+        all: allDisplayTemplates,
+        styles: filteredDisplayTemplates
     };
 }
+async function* getAllStyles(client, debug = false, pageSize = 5) {
+    if (client.runtimeCmsVersion == OptiCmsVersion.CMS12)
+        return;
+    let requestPageSize = pageSize;
+    let requestPageIndex = 0;
+    let totalItemCount = 0;
+    let totalPages = 0;
+    do {
+        const resultsPage = await client.displayTemplatesList({ query: { pageIndex: requestPageIndex, pageSize: requestPageSize } }).catch((_) => {
+            return {
+                items: [],
+                totalItemCount: 0,
+                pageIndex: requestPageIndex,
+                pageSize: requestPageSize
+            };
+        });
+        // Calculate fields for next page
+        totalItemCount = resultsPage.totalItemCount ?? 0;
+        requestPageSize = resultsPage.pageSize;
+        requestPageIndex = resultsPage.pageIndex + 1;
+        totalPages = Math.ceil(totalItemCount / requestPageSize);
+        // Debug output
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched displayTemplates page ${requestPageIndex} of ${totalPages} (${requestPageSize} items per page)\n`));
+        // Yield items
+        for (const displayTemplate of (resultsPage.items ?? [])) {
+            yield displayTemplate;
+        }
+    } while (requestPageIndex < totalPages);
+}
 function isExcluded(value, exclusions, inclusions) {
     if (value == undefined || value == null)
         return false;
@@ -364,18 +474,9 @@ async function getStyleFilePath(definition, opts) {
             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.contentTypes.contentTypesList(undefined, undefined, 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.contentTypes.contentTypesList(undefined, undefined, resultsPage.pageIndex + 1, 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`;
+        const contentType = await opts.client.contentTypesGet({ path: { key: definition.contentType } }).catch(() => undefined);
+        if (contentType)
+            return `${contentType.baseType}/${definition.contentType}/${definition.key}.opti-style.json`;
     }
     throw new Error(`Unable to resolve the target for the DisplayTemplate: ${definition.key}`);
 }
@@ -487,20 +588,6 @@ function ucFirst$1(input) {
         return input;
     return input[0].toUpperCase() + input.substring(1);
 }
-function toTypeFilesList(client, templates, basePath, createPaths = true) {
-    return templates.reduce(async (prevList, displayTemplate) => {
-        const typeFiles = await prevList;
-        const { targetType, styleFilePath: filePath, helperFilePath: helperPath } = await createTemplateMetadata(client, displayTemplate, basePath, createPaths);
-        if (!typeFiles[targetType]) {
-            typeFiles[targetType] = {
-                filePath: helperPath,
-                templates: []
-            };
-        }
-        typeFiles[targetType].templates.push({ key: displayTemplate.key, file: filePath, data: displayTemplate });
-        return typeFiles;
-    }, Promise.resolve({}));
-}
 async function createTemplateMetadata(client, displayTemplate, basePath, createPaths = true) {
     let itemPath = undefined;
     let targetType;
@@ -512,17 +599,21 @@ async function createTemplateMetadata(client, displayTemplate, basePath, createP
             typesPath = path.join(basePath, 'nodes', displayTemplate.nodeType);
             targetType = targetPrefix + '/' + displayTemplate.nodeType;
             break;
-        case 'base':
-            itemPath = path.join(basePath, displayTemplate.baseType, 'styles', displayTemplate.key);
-            typesPath = path.join(basePath, displayTemplate.baseType, 'styles');
-            targetType = targetPrefix + '/' + displayTemplate.baseType;
+        case 'base': {
+            const baseTypeSlug = baseTypeToSlug(displayTemplate.baseType);
+            itemPath = path.join(basePath, baseTypeSlug, 'styles', displayTemplate.key);
+            typesPath = path.join(basePath, baseTypeSlug, 'styles');
+            targetType = targetPrefix + '/' + baseTypeSlug;
             break;
-        case 'content':
-            const contentType = await client.contentTypes.contentTypesGet(displayTemplate.contentType ?? '-');
-            itemPath = path.join(basePath, contentType.baseType, contentType.key);
-            typesPath = path.join(basePath, contentType.baseType, contentType.key);
+        }
+        case 'content': {
+            const contentType = await client.contentTypesGet({ path: { key: displayTemplate.contentType ?? '-' } });
+            const baseTypeSlug = baseTypeToSlug(contentType.baseType);
+            itemPath = path.join(basePath, baseTypeSlug, contentType.key);
+            typesPath = path.join(basePath, baseTypeSlug, contentType.key);
             targetType = targetPrefix + '/' + displayTemplate.contentType;
             break;
+        }
         default:
             throw new Error("Unsupported display template type");
     }
@@ -534,6 +625,9 @@ async function createTemplateMetadata(client, displayTemplate, basePath, createP
     const helperFilePath = path.join(typesPath, 'displayTemplates.ts');
     return { key: displayTemplate.key, itemPath, typesPath, targetType, styleFilePath, helperFilePath };
 }
+function baseTypeToSlug(baseType) {
+    return baseType.replace(/^\_*/, "").toLowerCase();
+}
 function getTemplateTarget(displayTemplate) {
     if (displayTemplate.baseType && displayTemplate.baseType.length > 0)
         return 'base';
@@ -574,8 +668,8 @@ async function createDisplayTemplateHelper(typeFile, typeFileId, force = false,
         process.stdout.write(chalk.gray(`${figures.arrowRight} Creating or updating definition file for ${typeFileId} - ${typeFilePath}\n`));
     // Write Style definition
     const imports = [
-        'import type { LayoutProps } from "@remkoj/optimizely-cms-react"',
-        'import type { ReactNode } from "react"'
+        'import type { LayoutProps, LayoutPropsSettingKeys, LayoutPropsSettingValues, CmsComponentProps } from "@remkoj/optimizely-cms-react"',
+        'import type { JSX, ComponentType } from "react"'
     ];
     const typeContents = [];
     const props = [];
@@ -584,11 +678,10 @@ async function createDisplayTemplateHelper(typeFile, typeFileId, force = false,
         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(`export type ${displayTemplate.key}Keys = LayoutPropsSettingKeys<${displayTemplate.key}Props>`);
+        typeContents.push(`export type ${displayTemplate.key}Options<K extends ${displayTemplate.key}Keys> = LayoutPropsSettingValues<${displayTemplate.key}Props, K>`);
+        typeContents.push(`export type ${displayTemplate.key}ComponentProps<DT extends Record<string, any> = Record<string, any>> = Omit<CmsComponentProps<DT, ${displayTemplate.key}Props>,'children'> & JSX.IntrinsicElements['div']`);
+        typeContents.push(`export type ${displayTemplate.key}Component<DT extends Record<string, any> = Record<string, any>> = ComponentType<${displayTemplate.key}ComponentProps<DT>>`);
         typeContents.push('');
         props.push(`${displayTemplate.key}Props`);
         if (!typeId)
@@ -596,14 +689,11 @@ async function createDisplayTemplateHelper(typeFile, typeFileId, force = false,
     });
     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 type ${typeId}LayoutKeys = LayoutPropsSettingKeys<${typeId}LayoutProps>
+export type ${typeId}LayoutOptions<K extends ${typeId}LayoutKeys> = LayoutPropsSettingValues<${typeId}LayoutProps,K>
+export type ${typeId}ComponentProps<DT extends Record<string, any> = Record<string, any>> = Omit<CmsComponentProps<DT, ${typeId}LayoutProps>,'children'> & JSX.IntrinsicElements['div']
+export type ${typeId}Component<DT extends Record<string, any> = Record<string, any>> = ComponentType<${typeId}ComponentProps<DT>>`);
         const defaultTemplate = templates.find(t => t.data.isDefault);
         if (defaultTemplate) {
             typeContents.push(`
@@ -638,11 +728,11 @@ const StylesCreateCommand = {
             process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
             return;
         }
-        const allowedBaseTypes = ['section', 'element'];
+        const allowedBaseTypes = ['section', 'component', 'experience'];
         // Prepare
         process.stdout.write(chalk.yellowBright(chalk.bold(`Reading current information from Optimizely CMS\n`)));
         const [{ contentTypes }, { styles }] = await Promise.all([
-            getContentTypes(client, { ...args, excludeBaseTypes: [], excludeTypes: [], baseTypes: allowedBaseTypes, types: [], all: false }),
+            getContentTypes(client, { ...args, excludeBaseTypes: [], excludeTypes: [], baseTypes: allowedBaseTypes, types: [], all: false }, 25, false, (ct) => ct.compositionBehaviors?.includes('elementEnabled') || ct.compositionBehaviors?.includes('sectionEnabled') || ct.baseType == 'experience' || ct.baseType == 'section'),
             getStyles(client, { ...args, excludeBaseTypes: [], excludeNodeTypes: [], excludeTemplates: [], excludeTypes: [], baseTypes: allowedBaseTypes, types: [], nodes: [], components: '', templates: [], templateTypes: [], all: false })
         ]);
         const styleKeys = styles.map(x => x.key);
@@ -650,27 +740,34 @@ const StylesCreateCommand = {
         process.stdout.write(chalk.yellowBright(chalk.bold(`\nConfigure your style definition\n`)));
         const key = await input({ message: "Identifier:", validate: (val) => { return val.match(/^[a-zA-Z][A-Za-z0-9\-_]*$/) != null && !styleKeys.includes(val); } });
         const displayName = await input({ message: "Display name:" });
-        const type = (await select({ message: "Style target:", choices: [
-                { value: "baseType", name: "Base Type", description: "Target all Content-Types that inherit from the specified base type" },
-                { value: "contentType", name: "Content-Type", description: "Target a specific Content-Type that supports styling" },
-                { value: "nodeType", name: "Experience Node", description: "Target a specific node type from a Section" }
-            ] }));
+        const type = (await select({
+            message: "Style target:", choices: [
+                { value: "baseType", name: "Base type", description: "Target all Content-Types that inherit from the specified base type" },
+                { value: "contentType", name: "Content type", description: "Target a specific Content-Type that supports styling" },
+                { value: "nodeType", name: "Node", description: "Target a specific node type from a Section" }
+            ]
+        }));
         let typeId = "";
         switch (type) {
             case 'contentType':
                 typeId = await select({ message: "Content-Type:", choices: contentTypes.map(x => { return { value: x.key, description: x.description, name: x.displayName }; }) });
                 break;
             case 'nodeType':
-                typeId = await select({ message: "Node type:", choices: [
+                typeId = await select({
+                    message: "Node type:", choices: [
                         { value: "row", description: "Row", name: "Row" },
                         { value: "column", description: "Column", name: "Column" }
-                    ] });
+                    ]
+                });
                 break;
             case 'baseType':
-                typeId = await select({ message: "Base type:", choices: [
+                typeId = await select({
+                    message: "Base type:", choices: [
+                        { value: "experience", description: "Target all experience types", name: "Experience" },
                         { value: "section", description: "Target all section types", name: "Section" },
-                        { value: "element", description: "Target all element types", name: "Element" }
-                    ] });
+                        { value: "component", description: "Target all component types", name: "Component" }
+                    ]
+                });
                 break;
         }
         const isDefault = await confirm({ message: "Should this style be marked as default?" });
@@ -690,8 +787,18 @@ const StylesCreateCommand = {
                 process.exit(0);
             }
         }
+        // @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`)));
+        if (await confirm({ message: "Do you want to publish this style into Optimizely CMS?" })) {
+            const response = await client.displayTemplatesCreate({ body: definition }).catch(_ => undefined);
+            if (!response) {
+                process.stderr.write(chalk.redBright(chalk.bold(`\[ERROR] Unable to create style definition ${definition.displayName} in Optimizely CMS\n`)));
+            }
+            else {
+                process.stdout.write(chalk.yellowBright(chalk.bold(`\nCreated style definition ${definition.displayName} in Optimizely CMS\n`)));
+            }
+        }
         process.stdout.write(chalk.yellowBright(`\n1. Add your properties to the 'settings' list in the file`));
         process.stdout.write(chalk.yellowBright(`\n2. Run `));
         process.stdout.write(chalk.whiteBright(`yarn opti-cms styles:push -t ${definition.key}`));
@@ -704,91 +811,6 @@ 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(client, allStyles, basePath, false);
-        for (const displayTemplate of styles) {
-            const { styleFilePath, targetType, itemPath, typesPath } = await createTemplateMetadata(client, displayTemplate, basePath, false);
-            // 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[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`));
-            await client.displayTemplates.displayTemplatesDelete(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",
@@ -802,8 +824,7 @@ const TypesPullCommand = {
         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`);
+            const { typePath, typeFile } = getContentTypePaths(contentType, basePath);
             if (!fs.existsSync(typePath))
                 fs.mkdirSync(typePath, { recursive: true });
             if (fs.existsSync(typeFile) && !force) {
@@ -814,16 +835,28 @@ const TypesPullCommand = {
             const outContentType = { ...contentType };
             if (outContentType.source || outContentType.source == "")
                 delete outContentType.source;
-            if (outContentType.features)
-                delete outContentType.features;
-            if (outContentType.usage)
-                delete outContentType.usage;
+            //if (outContentType.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;
+            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})\n`));
             fs.writeFileSync(typeFile, JSON.stringify(outContentType, undefined, 2));
@@ -832,6 +865,197 @@ const TypesPullCommand = {
         process.stdout.write(chalk.green(chalk.bold(`${figures.tick} Created/updated type definitions for ${updatedTypes.join(', ')}\n`)));
     }
 };
+function isEmptyArray(toTest) {
+    return toTest === null || !Array.isArray(toTest) || toTest.length === 0;
+}
+
+const deepmerge$1 = createDeepMerge();
+async function loadSchema(client, schemaName) {
+    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",
@@ -862,25 +1086,52 @@ 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 || outType.source == "")
+            if (outType.source)
                 delete outType.source;
-            if (outType.created || outType.created == "")
+            if (outType.created)
                 delete outType.created;
-            if (outType.lastModified || outType.lastModified == "")
+            if (outType.lastModified)
                 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.contentTypes.contentTypesPut(outType.key, outType, 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: [
@@ -912,237 +1163,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 NextJsFragmentsCommand = {
-    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 { fragmentFields, propertyTypes } = renderProperties(contentType, forCms12);
-    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 renderProperties(contentType, 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 }');
-    }
-    return { fragmentFields, propertyTypes };
+    return list.filter(x => x.type == type).at(0);
 }
 
 function ucFirst(current) {
@@ -1178,8 +1202,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)
@@ -1194,8 +1218,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`));
@@ -1219,6 +1244,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)) {
@@ -1239,6 +1269,7 @@ 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' : ''}, editProps }) => {
@@ -1253,18 +1284,51 @@ export const ${varName} : CmsComponent<${contentType.key}DataFragment${(displayT
 ${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 { 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' : ''}, editProps, children }) => {
+    const componentName = '${contentType.displayName}'
+    const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
+    return <CmsEditable className="w-full border-y border-y-solid border-y-slate-900 py-2 mb-4" {...editProps}>
+        <div className="font-bold italic">{ componentName }</div>
+        <div>{ componentInfo }</div>
+        { Object.getOwnPropertyNames(data).length > 0 && <pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(data, undefined, 4) }</pre> }
+        ${(displayTemplate || baseDisplayTemplate) ? '<pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(layoutProps, undefined, 4) }</pre>' : '{/* This component doesn\'t have layout options */}'}
+        <div>{ children }</div>
+    </CmsEditable>
+}
+${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
+${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+
 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' : ''} }) => {
+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">
@@ -1274,7 +1338,7 @@ export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTe
     </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
@@ -1284,24 +1348,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 { getFragmentData } from "@/gql/fragment-masking";
-import { ExperienceDataFragmentDoc, CompositionDataFragmentDoc, ${contentType.key}DataFragmentDoc, 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"
+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 = getFragmentData(CompositionDataFragmentDoc, getFragmentData(ExperienceDataFragmentDoc, data)?.composition)
-    return <CmsEditable as="div" className="mx-auto px-2 container" cmsFieldName="unstructuredData" ctx={ctx}>
-        { composition && isNode(composition) && <OptimizelyComposition node={composition} /> }
-    </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
@@ -1319,7 +1395,7 @@ 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'] });
@@ -1330,7 +1406,8 @@ const NextJsVisualBuilderCommand = {
         });
         // 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', styleDefinition.key);
             createSpecificNode(styleDefinition, templatePath, force, debug);
         });
     }
@@ -1364,11 +1441,16 @@ function createSpecificNode(template, templatePath, force = false, debug = false
         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 ?? '{}'}> = ({ ${componentArgs.join(', ')} }) => {
     const layout = extractSettings(layoutProps);
-    return (<${componentType} ${componentProps.join(' ')}>{ children }</${componentType}>);
+    return (<${componentType} ${componentProps.join(' ')}${style}>{ children }</${componentType}>);
 }
 
 export default ${template.key};`;
@@ -1388,13 +1470,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 = ({ editProps, layoutProps, children }) =>
 {
-    let className = \`vb:\${layoutProps?.layoutType}\`
-    if (layoutProps && layoutProps.layoutType == "section")
-        return <CmsEditable as="div" className={ className } {...editProps}>{ 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`;
@@ -1642,7 +1730,7 @@ const NextJsCreateCommand = {
         await Promise.all([
             TypesPullCommand.handler(args),
             StylesPullCommand.handler({ ...args, excludeNodeTypes: [], excludeTemplates: [], nodes: [], templates: [], templateTypes: [], definitions: true }),
-            NextJsFragmentsCommand.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
@@ -1657,6 +1745,125 @@ const NextJsCreateCommand = {
     }
 };
 
+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 } = 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\n`));
+        const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
+        const tracker = new Map();
+        const dependencies = [];
+        const updatedTypes = contentTypes.map(contentType => {
+            const { written, propertyTypes } = createComponentFragments(contentType, getTypeFolder(typeFolders, contentType.key), force, debug, tracker);
+            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);
+        // 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()) {
+    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`));
+        }
+        else {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) base fragment - file already exists\n`));
+            writeFragment = false;
+        }
+    }
+    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 = GraphQLGen.buildFragment(contentType, undefined, false, propertyTracker);
+        fs.writeFileSync(baseQueryFile, fragment);
+        written = true;
+    }
+    return { written, propertyTypes: GraphQLGen.getReferencedPropertyComponents(contentType) };
+}
+function createPropertyFragments(propertyTypesList, allContentTypes, selectTypeFolder, force = false, debug = false) {
+    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;
+        }
+        // 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;
+        }
+        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 {
+                if (debug)
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) property fragment - file already exists\n`));
+                mustWrite = false;
+            }
+        }
+        else if (debug) {
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) property fragment\n`));
+        }
+        if (mustWrite) {
+            const fragment = GraphQLGen.buildFragment(contentType, undefined, true);
+            fs.writeFileSync(propertyFragmentFile, fragment);
+            returnValue.push(contentType.key);
+        }
+        // Recurse down for properties that we're not yet rendering
+        const referencedPropertyTypes = GraphQLGen.getReferencedPropertyComponents(contentType).filter(x => !propertyTypesList.includes(x));
+        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);
+            returnValue.push(...additionalProperties);
+        }
+    }
+    return returnValue;
+}
+
 const NextJsQueriesCommand = {
     command: "nextjs:queries",
     describe: "Create the GrapQL Queries to use two queries to load content",
@@ -1672,24 +1879,43 @@ const NextJsQueriesCommand = {
         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`));
+        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);
-            return createGraphQueries(contentType, typePath, basePath, force, debug, allContentTypes, client.runtimeCmsVersion == OptiCmsVersion.CMS12);
+            const { written, propertyTypes } = createGraphQueries(contentType, typePath, force, debug);
+            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 fragments for ${updatedTypes.join(', ')}\n`));
+            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 fragments created/updated\n`));
+            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);
+        // 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 createGraphQueries(contentType, typePath, basePath, force, debug, contentTypes, forCms12 = false) {
-    const returnValue = [];
-    const baseQueryFile = path.join(typePath, `${contentType.key}.query.graphql`);
+function createGraphQueries(contentType, typePath, force, debug) {
+    const baseQueryFile = typePath.queryFile;
+    let mustWrite = true;
     if (fs.existsSync(baseQueryFile)) {
         if (force) {
             if (debug)
@@ -1698,72 +1924,305 @@ function createGraphQueries(contentType, typePath, basePath, force, debug, conte
         else {
             if (debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) base fragment - file already exists\n`));
-            return undefined;
+            mustWrite = false;
         }
     }
     else if (debug) {
         process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
     }
-    const { fragment, propertyTypes } = createInitialQuery(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;
+    if (mustWrite) {
+        const fragment = GraphQLGen.buildGetQuery(contentType, undefined, new Map());
+        fs.writeFileSync(baseQueryFile, fragment);
+    }
+    return {
+        written: mustWrite,
+        propertyTypes: GraphQLGen.getReferencedPropertyComponents(contentType)
+    };
+}
+
+const SchemaDownloadCommand = {
+    command: "schema:download",
+    describe: "Create JSON schema files for the specified types, which you can use to configure JSON validation in your IDE of choice.",
+    builder: (yargs) => {
+        const newYargs = yargs;
+        newYargs.option('schemaDir', { alias: 'd', description: "The schema path relative to your project root directory", string: true, type: 'string', demandOption: false, default: './.schema' });
+        newYargs.option('schemas', { alias: 's', description: "The schema's to download", array: true, type: 'string', demandOption: false, default: ['DisplayTemplate', 'ContentType'] });
+        newYargs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
+        return newYargs;
+    },
+    async handler(args, opts) {
+        const { _config: cmsConfig, path: projectPath, force, schemaDir, schemas } = parseArgs(args);
+        const client = createCmsClient(cmsConfig);
+        // Loading Schema
+        const schemaDefs = await loadSchema(client, schemas);
+        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 fsAsync.stat(fullSchemaDir).catch((e) => { if (e.code == 'ENOENT')
+            return undefined;
+        else
+            throw e; });
+        if (!schemaDirInfo) {
+            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`)));
+            process.exit(1);
+        }
+        process.stdout.write(chalk.greenBright(`  ${figures.tick} `));
+        process.stdout.write(`Schema directory exists\n`);
+        process.stdout.write(`\n${figures.arrowRight} Writing schema files\n`);
+        for (const schema of schemaDefs) {
+            const schemaFile = path.normalize(path.join(fullSchemaDir, `${schema.title.toLowerCase()}.schema.json`));
+            const relativePath = path.relative(projectPath, schemaFile);
+            try {
+                await fsAsync.writeFile(schemaFile, JSON.stringify(schema.schema, undefined, 2), {
+                    encoding: "utf-8",
+                    flag: force ? 'w' : 'wx'
+                });
+                process.stdout.write(chalk.greenBright(`  ${figures.tick} `));
+                process.stdout.write(`Written the ${schema.title} schema to ${relativePath}\n`);
             }
-            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);
+            catch (err) {
+                if (!force && err.code === 'EEXIST') {
+                    process.stdout.write(chalk.yellowBright(`  ${figures.info} `));
+                    process.stdout.write(`The schema ${schema.title} already exists in ${relativePath}, run with -f to overwrite\n`);
+                }
+                else
+                    process.stderr.write(chalk.redBright(chalk.bold(`${figures.cross} [Error] ${err.toString()}\n`)));
             }
+        }
+    }
+};
+
+const SchemaListCommand = {
+    command: "schema:list",
+    describe: "List all schema's that are available within the SaaS CMS instance",
+    builder: (yargs) => {
+        const newYargs = yargs;
+        return newYargs;
+    },
+    async handler(args, opts) {
+        const client = createCmsClient(args);
+        process.stdout.write(`\n${figures.arrowRight} Downloading OpenAPI Specification\n`);
+        const spec = await client.getOpenApiSpec();
+        process.stdout.write(chalk.greenBright(`  ${figures.tick} `));
+        process.stdout.write(`The ${spec.info.title} (Version: ${spec.info.version}) specification has been downloaded.\n`);
+        const specSchemas = (spec?.components?.schemas ?? {});
+        const schemas = new Table({
+            head: [
+                chalk.yellow(chalk.bold("Key")),
+                chalk.yellow(chalk.bold("Description"))
+            ],
+            colWidths: [35, 60],
+            colAligns: ["left", "left"],
+            wordWrap: true,
+            wrapOnWordBoundary: true
         });
-        dependencies = newDependencies;
-    }
-    return returnValue.length > 0 ? returnValue : undefined;
-}
-function createInitialQuery(contentType, forProperty = false, forBaseType, forCms12 = false) {
-    const { fragmentFields, propertyTypes } = renderProperties(contentType, forCms12);
-    const fragmentTarget = forProperty ? (forCms12 ? ('') + contentType.key : contentType.key + 'Property') : contentType.key;
-    const tpl = `query get${fragmentTarget}Data($key: String!, $locale: [Locales], $version: String, $changeset: String, $variation: String) {
-  data: ${fragmentTarget} (
-    where: {
-      _metadata: {
-        version: { eq: $version }
-        changeset: { eq: $changeset }
-        variation: { eq: $variation }
-      }
-    }
-    locale: $locale
-    ids: [$key]
-  ) {
-    item {
-      _metadata {
-      	key
-    	}
-      ${fragmentFields.join("\n      ")}
-    }
-  }
-}`;
-    return {
-        fragment: tpl,
-        propertyTypes: propertyTypes.length == 0 ? null : propertyTypes
-    };
+        for (const key in specSchemas)
+            if (key) {
+                schemas.push([key, specSchemas[key].description?.replaceAll(/\s+/g, ' ') ?? `-`]);
+            }
+        process.stdout.write("\n" + schemas.toString() + "\n");
+        process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+    }
+};
+
+const deepmerge = createDeepMerge();
+const SchemaValidateCommand = {
+    command: "schema:validate",
+    describe: "Validate the opti-type.json & opti-style.json files",
+    builder: (yargs) => {
+        const newYargs = yargs;
+        //newYargs.option('schemas', { alias: 's', description: "The schema's to download", array: true, type: 'string', demandOption: false, default: ['DisplayTemplate', 'ContentType'] })
+        //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 })
+        return newYargs;
+    },
+    handler: async (args) => {
+        const projectPath = args.path;
+        const client = createCmsClient(args);
+        const schemas = await loadSchema(client, ['DisplayTemplate', 'ContentType']);
+        process.stdout.write(``);
+        const styleSchema = schemas.find(x => x.title == 'DisplayTemplate')?.schema;
+        const typeSchema = schemas.find(x => x.title == 'ContentType')?.schema;
+        const [styleValidator, typeValidator] = await Promise.all([getValidator(styleSchema), getValidator(typeSchema)]);
+        process.stdout.write(`\n${figures.arrowRight} Validating display templates (*.opti-style.json) and content types (*.opti-type.json).\n`);
+        const patterns = ["./**/*.opti-type.json", "./**/*.opti-style.json"];
+        const globMatches = globIterate(patterns, { cwd: projectPath, absolute: true });
+        let allOk = true;
+        for await (const fileMatch of globMatches) {
+            try {
+                const content = JSON.parse(fs.readFileSync(fileMatch).toString());
+                let errors = undefined;
+                if (fileMatch.endsWith('.opti-type.json') && !typeValidator(content)) {
+                    errors = typeValidator.errors;
+                }
+                else if (fileMatch.endsWith('.opti-style.json') && !styleValidator(content)) {
+                    errors = styleValidator.errors;
+                }
+                if (errors) {
+                    allOk = false;
+                    process.stdout.write(chalk.redBright(chalk.bold(`\n${figures.cross} ${path.relative(projectPath, fileMatch)}\n`)));
+                    const groupedErrors = groupErrors(errors);
+                    for (const instancepath in groupedErrors) {
+                        for (const key in groupedErrors[instancepath]) {
+                            const errorList = groupedErrors[instancepath][key].filter((v, i, a) => a.findIndex(pv => deepEqual(v, pv)) === i);
+                            for (const error of errorList) {
+                                process.stdout.write(`  Node ${instancepath} ${error.message}\n`);
+                                switch (error.keyword) {
+                                    case 'enum':
+                                        process.stdout.write(`    Allowed values: ${error.params.allowedValues.map((x) => x.toString()).join(', ')}\n`);
+                                        break;
+                                    case 'oneOf':
+                                        const matching = Array.isArray(error.params.passingSchemas) ? error.params.passingSchemas : [];
+                                        if (matching.length === 0)
+                                            process.stdout.write(`    Currently none matching\n`);
+                                        else
+                                            process.stdout.write(`    Currently matching ${matching.map((x) => x.toString()).join(", ")}\n`);
+                                        break;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            catch (e) {
+                allOk = false;
+                process.stdout.write(chalk.redBright(chalk.bold(`${figures.cross} ${path.relative(projectPath, fileMatch)}\n`)));
+                process.stdout.write(`  ${e.message}\n`);
+            }
+        }
+        process.stdout.write(`\n`);
+        if (allOk)
+            process.stdout.write(chalk.greenBright(`${figures.tick} All types & styles match the schema\n`));
+        else {
+            process.stdout.write(chalk.redBright(`${figures.cross} Some types & styles contain errors\n`));
+            process.exit(1);
+        }
+    }
+};
+function groupErrors(errors) {
+    const errorrsByInstance = groupErrorsByPath(errors);
+    const instancePaths = Object.getOwnPropertyNames(errorrsByInstance);
+    return instancePaths.reduce((previous, current) => {
+        previous[current] = groupErrorsByKeyword(errorrsByInstance[current]);
+        return previous;
+    }, {});
+}
+function groupErrorsByPath(errors) {
+    return errors.reduce((previous, current) => {
+        const instancePath = current.instancePath == "" ? "[ROOT]" : current.instancePath;
+        const partial = {};
+        partial[instancePath] = [current];
+        return deepmerge(previous, partial);
+    }, {});
+}
+function groupErrorsByKeyword(errors) {
+    const toMerge = errors.reduce((previous, current) => {
+        const keyword = current.keyword;
+        const partial = {};
+        partial[keyword] = [current];
+        return deepmerge(previous, partial);
+    }, {});
+    // Enum errors must be merged
+    if (toMerge.enum)
+        toMerge.enum = [toMerge.enum.reduce((prev, current) => prev ? deepmerge(prev, current) : current, undefined)];
+    return toMerge;
 }
 
+const SchemaVsCodeCommand = {
+    command: "schema:vscode",
+    describe: "Configure schema validation for opti-type.json & opti-style.json files by VSCode in the current project folder",
+    builder: (yargs) => {
+        const newYargs = yargs;
+        //newYargs.option('schemas', { alias: 's', description: "The schema's to download", array: true, type: 'string', demandOption: false, default: ['DisplayTemplate', 'ContentType'] })
+        //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 })
+        return newYargs;
+    },
+    handler: async (args) => {
+        const projectPath = args.path;
+        const client = createCmsClient(args);
+        const schemas = await loadSchema(client, ['DisplayTemplate', 'ContentType']);
+        process.stdout.write(`\n${figures.arrowRight} Writing schema files\n`);
+        for (const schema of schemas) {
+            const schemaFile = path.join(projectPath, '.vscode', `${schema.title.toLowerCase()}.schema.json`);
+            void await writeFileAsync(schemaFile, JSON.stringify(schema.schema, undefined, 2));
+            process.stdout.write(`  ${figures.tick} Written the ${schema.title} schema to ${path.relative(projectPath, schemaFile)}\n`);
+        }
+        process.stdout.write(`\n${figures.arrowRight} Updating folder settings\n`);
+        const settingsFile = path.join(projectPath, '.vscode', 'settings.json');
+        const settings = (await readJsonFileAsync(settingsFile).catch(() => undefined)) ?? {};
+        settings['json.validate.enable'] = true;
+        settings['json.schemaDownload.enable'] = true;
+        settings['json.schemas'] = settings['json.schemas'] || [];
+        const hasContentType = settings['json.schemas'].findIndex(v => v.fileMatch.findIndex(fm => fm.endsWith('.opti-type.json')) >= 0) >= 0;
+        const hasStyleDefinition = settings['json.schemas'].findIndex(v => v.fileMatch.findIndex(fm => fm.endsWith('.opti-style.json')) >= 0) >= 0;
+        const hasSchemaType = settings['json.schemas'].findIndex(v => v.fileMatch.findIndex(fm => fm.endsWith('.schema.json')) >= 0) >= 0;
+        if (!hasContentType)
+            settings['json.schemas'].push({
+                "fileMatch": [
+                    "**/*.opti-type.json"
+                ],
+                "url": "./.vscode/contenttype.schema.json"
+            });
+        if (!hasStyleDefinition)
+            settings['json.schemas'].push({
+                "fileMatch": [
+                    "**/*.opti-style.json"
+                ],
+                "url": "./.vscode/displaytemplate.schema.json"
+            });
+        if (!hasSchemaType)
+            settings['json.schemas'].push({
+                "fileMatch": [
+                    "**/*.schema.json"
+                ],
+                "url": "https://json-schema.org/draft-07/schema"
+            });
+        if (settings['json.schemas'].length == 0)
+            delete settings['json.schemas'];
+        await writeFileAsync(settingsFile, JSON.stringify(settings, undefined, 2));
+    }
+};
+function readJsonFileAsync(path) {
+    return new Promise((resolve, reject) => fs.readFile(path, (err, data) => {
+        if (err) {
+            if (err?.code === 'ENOENT')
+                resolve(undefined);
+            else
+                reject(err);
+        }
+        else {
+            try {
+                const d = data.toString();
+                resolve(JSON.parse(d));
+            }
+            catch (e) {
+                reject(e);
+            }
+        }
+    }));
+}
+function writeFileAsync(path, data) {
+    return new Promise((resolve, reject) => {
+        fs.writeFile(path, data, (err) => {
+            if (err)
+                reject(err);
+            else
+                resolve();
+        });
+    });
+}
+
+var version = "6.0.0-pre10";
+var name = "opti-cms";
+var APP = {
+	version: version,
+	name: name
+};
+
 const CmsVersionCommand = {
     command: "cms:version",
     aliases: "$0",
@@ -1782,18 +2241,25 @@ const CmsVersionCommand = {
                     throw error;
             }
         });
+        const hasPreview2Info = versionInfo.results.preview2Data?.baseUrl ? true : false;
         const info = new Table({
             head: [
                 chalk.yellow(chalk.bold("Component")),
                 chalk.yellow(chalk.bold("Version"))
             ],
-            colWidths: [20, 40],
+            colWidths: [30, 60],
             colAligns: ["left", "left"]
         });
-        info.push(["Client", client.apiVersion]);
-        info.push(["API", versionInfo.apiVersion]);
-        info.push(["CMS", versionInfo.cmsVersion]);
-        info.push(["Service", versionInfo.serviceVersion]);
+        info.push(["Base URL", versionInfo.baseUrl ?? client.cmsUrl.href]);
+        if (hasPreview2Info)
+            info.push(["Base URL (Preview 2)", versionInfo.results.preview2Data?.baseUrl ?? 'n/a']);
+        info.push(["Client API", client.apiVersion]);
+        info.push(["Service API", versionInfo.apiVersion]);
+        if (hasPreview2Info)
+            info.push(["Service API (Preview 2)", versionInfo.results.preview2Data?.apiVersion ?? 'n/a']);
+        info.push(["CMS Build", versionInfo.cmsVersion]);
+        info.push(["Service Build", versionInfo.serviceVersion]);
+        info.push(["SDK", APP.version]);
         process.stdout.write(info.toString() + "\n");
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Optimizely CMS Status: ${versionInfo.status}\n`));
         process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
@@ -1913,7 +2379,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.content.contentDelete(key, true).then(r => r.key).catch((e) => {
+    const deleteResult = await client.preview2ContentDelete({ path: { key }, query: { permanent: true } }).then(r => r.key).catch((e) => {
         if (e.status == 404)
             return key;
         throw e;
@@ -1934,10 +2400,13 @@ async function resetSystemTypes(client) {
     for (const systemType of reservedTypes) {
         if (client.debug)
             process.stdout.write(chalk.gray(`  ${figures.arrowRight} Resetting ${systemType} by removing all attributes\n`));
-        const newType = await client.contentTypes.contentTypesPatch(systemType, {
-            key: systemType,
-            properties: {}
-        }, true).catch((e) => e.status == 404 ? undefined : null);
+        const newType = await client.contentTypesPatch({
+            path: { key: systemType },
+            body: {
+                key: systemType,
+                properties: {}
+            }
+        }).catch((e) => e.status == 404 ? undefined : null);
         if (newType)
             resetTypes++;
     }
@@ -1949,7 +2418,7 @@ async function removeContentTypes(client) {
     for (let contentType of contentTypes.filter(item => item.source == '' && !reservedTypes.includes(item.key))) {
         if (client.debug)
             process.stdout.write(`  ${chalk.blueBright(figures.arrowRight)} Removing content type ${contentType.displayName} (${contentType.key})\n`);
-        const result = await client.contentTypes.contentTypesDelete(contentType.key).catch((e) => {
+        const result = await client.contentTypesDelete({ path: { key: contentType.key } }).catch((e) => {
             if (e.status == 404)
                 return contentType;
             return null;
@@ -1965,7 +2434,7 @@ async function removeDisplayTemplates(client) {
     for (const template of allTemplates) {
         if (client.debug)
             process.stdout.write(`  ${chalk.blueBright(figures.arrowRight)} Removing display template ${template.displayName} (${template.key})\n`);
-        const deleteResult = client.displayTemplates.displayTemplatesDelete(template.key).catch((e) => {
+        const deleteResult = client.displayTemplatesDelete({ path: { key: template.key } }).catch((e) => {
             if (e.status == 404)
                 return template;
             console.log(e.body);
@@ -1977,7 +2446,7 @@ async function removeDisplayTemplates(client) {
     return removedTemplateCount;
 }
 async function getAllTemplates(client, batchSize = 100) {
-    const items = await client.displayTemplates.displayTemplatesList(0, batchSize).catch((e) => {
+    const items = await client.displayTemplatesList({ query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
         if (e.status == 404) {
             return {
                 items: [],
@@ -1992,7 +2461,7 @@ async function getAllTemplates(client, batchSize = 100) {
     const actualItems = items.items ?? [];
     const pageCount = Math.ceil(totalItemCount / pageSize);
     for (let pageNr = 1; pageNr < pageCount; pageNr++) {
-        const pageData = await client.displayTemplates.displayTemplatesList(pageNr, pageSize).catch((e) => {
+        const pageData = await client.displayTemplatesList({ query: { pageIndex: pageNr, pageSize } }).catch((e) => {
             if (e.status == 404) {
                 return {
                     items: [],
@@ -2007,7 +2476,7 @@ async function getAllTemplates(client, batchSize = 100) {
     return actualItems;
 }
 async function getAllTypes(client, batchSize = 100) {
-    const items = await client.contentTypes.contentTypesList(undefined, undefined, 0, batchSize).catch((e) => {
+    const items = await client.contentTypesList({ query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
         if (e.status == 404) {
             return {
                 items: [],
@@ -2022,7 +2491,7 @@ async function getAllTypes(client, batchSize = 100) {
     const actualItems = items.items ?? [];
     const pageCount = Math.ceil(totalItemCount / pageSize);
     for (let pageNr = 1; pageNr < pageCount; pageNr++) {
-        const pageData = await client.contentTypes.contentTypesList(undefined, undefined, pageNr, pageSize).catch((e) => {
+        const pageData = await client.contentTypesList({ query: { pageIndex: pageNr, pageSize } }).catch((e) => {
             if (e.status == 404) {
                 return {
                     items: [],
@@ -2037,7 +2506,7 @@ async function getAllTypes(client, batchSize = 100) {
     return actualItems;
 }
 async function getAllAssets(client, parentKey, batchSize = 100) {
-    const items = await client.content.contentListAssets(parentKey, undefined, 0, batchSize).catch((e) => {
+    const items = await client.preview2ContentListAssets({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
         if (e.status == 404) {
             return {
                 items: [],
@@ -2052,7 +2521,7 @@ async function getAllAssets(client, parentKey, batchSize = 100) {
     const actualItems = items.items ?? [];
     const pageCount = Math.ceil(totalItemCount / pageSize);
     for (let pageNr = 1; pageNr < pageCount; pageNr++) {
-        const pageData = await client.content.contentListAssets(parentKey, undefined, pageNr, pageSize).catch((e) => {
+        const pageData = await client.preview2ContentListAssets({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
             if (e.status == 404) {
                 return {
                     items: [],
@@ -2067,7 +2536,7 @@ async function getAllAssets(client, parentKey, batchSize = 100) {
     return actualItems;
 }
 async function getAllItems(client, parentKey, batchSize = 100) {
-    const items = await client.content.contentListItems(parentKey, undefined, 0, batchSize).catch((e) => {
+    const items = await client.preview2ContentListItems({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
         if (e.status == 404) {
             return {
                 items: [],
@@ -2082,7 +2551,7 @@ async function getAllItems(client, parentKey, batchSize = 100) {
     const actualItems = items.items ?? [];
     const pageCount = Math.ceil(totalItemCount / pageSize);
     for (let pageNr = 1; pageNr < pageCount; pageNr++) {
-        const pageData = await client.content.contentListItems(parentKey, undefined, pageNr, pageSize).catch((e) => {
+        const pageData = await client.preview2ContentListItems({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
             if (e.status == 404) {
                 return {
                     items: [],
@@ -2099,30 +2568,26 @@ async function getAllItems(client, parentKey, batchSize = 100) {
 
 // Style processing
 const commands = [
-    StylesCreateCommand,
-    StylesDeleteCommand,
-    StylesListCommand,
-    StylesPullCommand,
-    StylesPushCommand,
-    TypesPullCommand,
-    TypesPushCommand,
+    CmsResetCommand,
+    CmsVersionCommand,
     NextJsComponentsCommand,
     NextJsCreateCommand,
     NextJsFactoryCommand,
     NextJsFragmentsCommand,
     NextJsQueriesCommand,
     NextJsVisualBuilderCommand,
-    CmsResetCommand,
-    CmsVersionCommand
+    SchemaDownloadCommand,
+    SchemaListCommand,
+    SchemaValidateCommand,
+    SchemaVsCodeCommand,
+    StylesCreateCommand,
+    StylesListCommand,
+    StylesPullCommand,
+    StylesPushCommand,
+    TypesPullCommand,
+    TypesPushCommand
 ];
 
-var version = "5.1.5";
-var name = "opti-cms";
-var APP = {
-	version: version,
-	name: name
-};
-
 async function main() {
     const envFiles = prepare();
     const app = createOptiCmsApp(APP.name, APP.version, undefined, envFiles);
@@ -2132,7 +2597,7 @@ async function main() {
     }
     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();