@remkoj/optimizely-cms-cli 6.0.0-pre8 → 6.0.0-pre9

package/dist/index.js

@@ -1,18 +1,19 @@
 import { globSync, glob, globIterate } from 'glob';
 import { config } from 'dotenv';
 import { expand } from 'dotenv-expand';
-import { readPartialEnvConfig, getCmsIntegrationApiConfigFromEnvironment, createClient, OptiCmsVersion, IntegrationApi, ContentRoots } from '@remkoj/optimizely-cms-api';
+import { readPartialEnvConfig, createClient, OptiCmsVersion, ContentRoots } from '@remkoj/optimizely-cms-api';
 import yargs from 'yargs';
 import chalk from 'chalk';
 import path from 'node:path';
 import fs from 'node:fs';
 import figures from 'figures';
 import Table from 'cli-table3';
+import fsAsync from 'node:fs/promises';
 import { input, select, confirm } from '@inquirer/prompts';
-import fs$1 from 'node:fs/promises';
 import createDeepMerge from '@fastify/deepmerge';
 import { Ajv } from 'ajv';
 import addFormats from 'ajv-formats';
+import GraphQLGen from '@remkoj/optimizely-graph-functions/contenttype-loader';
 import deepEqual from 'fast-deep-equal';
 
 /**
@@ -50,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 })
@@ -115,13 +116,13 @@ function parseArgs({ client_id, client_secret, cms_url, user_id, verbose, path:
 
 function createCmsClient(args) {
     const cfg = getCmsIntegrationApiOptions(args);
-    const baseConfig = getCmsIntegrationApiConfigFromEnvironment();
+    const baseConfig = readPartialEnvConfig();
     const client = createClient({
         ...baseConfig,
         ...cfg
     });
     if (cfg.debug)
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Connecting to ${cfg.base.href} as ${cfg.actAs ?? cfg.clientId}\n`));
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Connecting to ${client.cmsUrl} as ${cfg.actAs ?? cfg.clientId}\n`));
     return client;
 }
 function getCmsIntegrationApiOptions(args) {
@@ -165,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.displayTemplatesPut({ path: { key: styleKey }, body: 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({
@@ -205,64 +211,112 @@ function isNotNullOrUndefined(i) {
     return i ? true : false;
 }
 
-const contentTypesBuilder = yargs => {
-    yargs.option('excludeTypes', { alias: 'ect', description: "Exclude these content types", string: true, type: 'array', demandOption: false, default: [] });
-    yargs.option('excludeBaseTypes', { alias: 'ebt', description: "Exclude these base types", string: true, type: 'array', demandOption: false, default: ['folder', 'media', 'image', 'video'] });
-    yargs.option("baseTypes", { alias: 'b', description: "Select only these base types", string: true, type: 'array', demandOption: false, default: [] });
-    yargs.option("types", { alias: 't', description: "Select only these types", string: true, type: 'array', demandOption: false, default: [] });
-    yargs.option('all', { alias: 'a', description: "Include non-supported base types", boolean: true, type: 'boolean', demandOption: false, default: false });
+/**
+ * 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: ['folder', 'media', 'image', 'video'],
+    excludeTypes: [],
+    baseTypes: [],
+    types: [],
+    all: false
+};
+const contentTypesBuilder = (yargs, defaults = ContentTypesArgsDefaults) => {
+    yargs.option('excludeTypes', { alias: 'ect', description: "Exclude these content types", string: true, type: 'array', demandOption: false, default: defaults.excludeTypes });
+    yargs.option('excludeBaseTypes', { alias: 'ebt', description: "Exclude these base types", string: true, type: 'array', demandOption: false, default: defaults.excludeBaseTypes });
+    yargs.option("baseTypes", { alias: 'b', description: "Select only these base types", string: true, type: 'array', demandOption: false, default: defaults.baseTypes });
+    yargs.option("types", { alias: 't', description: "Select only these types", string: true, type: 'array', demandOption: false, default: defaults.types });
+    yargs.option('all', { alias: 'a', description: "Include non-supported base types", boolean: true, type: 'boolean', demandOption: false, default: defaults.all });
     return yargs;
 };
-function getEnumOptions(enumObject) {
-    return Object.keys(enumObject).filter((item) => {
-        return isNaN(Number(item));
-    });
-}
-async function getContentTypes(client, args, pageSize = 5, allowSystem = false, customFilter) {
+async function getContentTypes(client, args, pageSize = 25, allowSystem = false, customFilter) {
     const { _config: cfg, excludeBaseTypes, excludeTypes, baseTypes, types, all } = parseArgs(args);
-    const validBaseTypes = getEnumOptions(IntegrationApi.ContentBaseType).map(x => x.toLowerCase());
     const allContentTypes = [];
     const filteredContentTypes = [];
     for await (const contentType of getAllContentTypes(client, cfg.debug, pageSize)) {
-        const normalizedContentType = { ...contentType, baseType: contentType.baseType ?? 'default' };
-        // Build the "All" data set
-        if (all)
-            allContentTypes.push(normalizedContentType);
-        else if (validBaseTypes.includes(normalizedContentType.baseType.toLowerCase()))
-            allContentTypes.push(normalizedContentType);
-        else if (cfg.debug) {
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${normalizedContentType.key} as it has an unsupported base type: ${normalizedContentType.baseType}\n`));
-            continue;
-        }
-        else {
+        // Skip content types mapped against Graph data, these should be used with their source type in Graph, not the reference in CMS
+        if (!all && contentType.key.toLowerCase().startsWith('graph:')) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it is a reference to external data in Optimizely Graph\n`));
             continue;
         }
+        // Build the unfiltered array
+        allContentTypes.push(contentType);
         // Skip based upon base type filters
-        if (!shouldInclude(normalizedContentType.baseType, baseTypes, excludeBaseTypes)) {
+        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 ${normalizedContentType.key} as it has a restricted base type: ${normalizedContentType.baseType}\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it has a restricted base type: ${contentType.baseType}\n`));
             continue;
         }
         // Skip based upon type filters
-        if (!shouldInclude(normalizedContentType.key, types, excludeTypes)) {
+        if (!shouldInclude(contentType.key, types, excludeTypes)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${normalizedContentType.key} as it has a restricted type: ${normalizedContentType.key}\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it has a restricted type: ${contentType.key}\n`));
             continue;
         }
         // Skip based upon system filter
-        if (normalizedContentType.source == 'system' && !allowSystem) {
+        if (contentType.source == 'system' && !allowSystem) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${normalizedContentType.key} due to it being a system type\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${contentType.key} due to it being a system type\n`));
             continue;
         }
         // Skip based upon custom filter
-        if (customFilter && !await customFilter(normalizedContentType)) {
+        if (customFilter && !await customFilter(contentType)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${normalizedContentType.key} due to the custom filter\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${contentType.key} due to the custom filter\n`));
             continue;
         }
         // Add to list
-        filteredContentTypes.push(normalizedContentType);
+        filteredContentTypes.push(contentType);
     }
     if (cfg.debug)
         process.stdout.write(chalk.gray(`${figures.arrowRight} Applied content type filters, reduced from ${allContentTypes.length} to ${filteredContentTypes.length} items\n`));
@@ -420,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.contentTypesList({ query: { pageIndex: 0, pageSize } });
-        const contentTypes = resultsPage.items ?? [];
-        let pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
-        while (pagesRemaining > 0 && contentTypes.length < resultsPage.totalItemCount) {
-            resultsPage = await opts.client.contentTypesList({ query: { pageIndex: resultsPage.pageIndex + 1, pageSize: resultsPage.pageSize } });
-            contentTypes.push(...resultsPage.items);
-            pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
-        }
-        const fetchedBaseType = contentTypes.filter(x => x.key == definition.contentType).map(x => x.baseType).at(0);
-        if (fetchedBaseType)
-            return `${fetchedBaseType}/${definition.contentType}/${definition.key}.opti-style.json`;
+        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}`);
 }
@@ -475,7 +520,7 @@ const StylesPullCommand = {
     builder: (yargs) => {
         const newYargs = stylesBuilder(yargs);
         newYargs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
-        newYargs.option("definitions", { alias: 'd', description: "Create/overwrite typescript definitions", boolean: true, type: 'boolean', demandOption: false, default: true });
+        newYargs.option("definitions", { alias: 'u', description: "Create/overwrite typescript definitions", boolean: true, type: 'boolean', demandOption: false, default: true });
         return newYargs;
     },
     handler: async (args) => {
@@ -490,29 +535,9 @@ const StylesPullCommand = {
         process.stdout.write(chalk.gray(`${figures.arrowRight} Start creating .opti-style.json files\n`));
         const typeFiles = {};
         const updatedTemplates = (await Promise.all(filteredResults.map(async (displayTemplate) => {
-            let itemPath = undefined;
-            let targetType;
-            let typesPath;
-            if (displayTemplate.nodeType) {
-                itemPath = path.join(basePath, 'nodes', displayTemplate.nodeType, displayTemplate.key);
-                typesPath = path.join(basePath, 'nodes', displayTemplate.nodeType);
-                targetType = 'node/' + displayTemplate.nodeType;
-            }
-            else if (displayTemplate.baseType) {
-                itemPath = path.join(basePath, displayTemplate.baseType, 'styles', displayTemplate.key);
-                typesPath = path.join(basePath, displayTemplate.baseType, 'styles');
-                targetType = 'base/' + displayTemplate.baseType;
-            }
-            else if (displayTemplate.contentType) {
-                const contentType = await client.contentTypesGet({ path: { key: displayTemplate.contentType ?? '-' } });
-                itemPath = path.join(basePath, contentType.baseType, contentType.key);
-                typesPath = path.join(basePath, contentType.baseType, contentType.key);
-                targetType = 'content/' + displayTemplate.contentType;
-            }
-            if (!fs.existsSync(itemPath))
-                fs.mkdirSync(itemPath, { recursive: true });
-            // Write Style JSON
-            const filePath = path.join(itemPath, `${displayTemplate.key}.opti-style.json`);
+            // Create metadata
+            const { targetType, styleFilePath: filePath, helperFilePath: helperPath } = await createTemplateMetadata(client, displayTemplate, basePath, true);
+            // Build local style data
             const outputTemplate = { ...displayTemplate };
             if (outputTemplate.createdBy)
                 delete outputTemplate.createdBy;
@@ -522,6 +547,7 @@ const StylesPullCommand = {
                 delete outputTemplate.created;
             if (outputTemplate.lastModified)
                 delete outputTemplate.lastModified;
+            // Write file to disk
             if (fs.existsSync(filePath)) {
                 if (!force) {
                     if (cfg.debug)
@@ -539,80 +565,20 @@ const StylesPullCommand = {
                     process.stdout.write(chalk.gray(`${figures.arrowRight} Creating style file for ${displayTemplate.key} in ${filePath}\n`));
                 fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
             }
+            // Ensure we're tracking all files
             if (!typeFiles[targetType]) {
                 typeFiles[targetType] = {
-                    filePath: path.join(typesPath, 'displayTemplates.ts'),
+                    filePath: helperPath,
                     templates: []
                 };
             }
-            typeFiles[targetType].templates.push({ file: filePath, data: displayTemplate });
+            typeFiles[targetType].templates.push({ key: displayTemplate.key, file: filePath, data: displayTemplate });
             return displayTemplate.key;
         }))).filter(x => x);
         //#endregion
         //#region Create needed definition files
-        if (definitions) {
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Start creating displayTemplates.ts files\n`));
-            for (const targetId of Object.getOwnPropertyNames(typeFiles)) {
-                const { filePath: typeFilePath, templates } = typeFiles[targetId];
-                if (fs.existsSync(typeFilePath)) {
-                    if (!force) {
-                        if (cfg.debug)
-                            process.stdout.write(chalk.gray(`${figures.cross} Skipped writing definition file for ${targetId} - it already exists\n`));
-                        continue;
-                    }
-                    if (cfg.debug)
-                        process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting definition file for ${targetId} - ${typeFilePath}\n`));
-                }
-                else if (cfg.debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Creating definition file for ${targetId} - ${typeFilePath}\n`));
-                // Write Style definition
-                const imports = [
-                    'import type { LayoutProps } from "@remkoj/optimizely-cms-react"',
-                    'import type { ReactNode, JSX } from "react"'
-                ];
-                const typeContents = [];
-                const props = [];
-                let typeId = targetId.split('/', 2)[1];
-                templates.forEach(({ file: displayTemplateFile, data: displayTemplate }) => {
-                    const importPath = path.relative(path.dirname(typeFilePath), displayTemplateFile).replaceAll('\\', '/');
-                    imports.push(`import type ${displayTemplate.key}Styles from "./${importPath}"`);
-                    typeContents.push(`export type ${displayTemplate.key}Props = LayoutProps<typeof ${displayTemplate.key}Styles>`);
-                    typeContents.push(`export type ${displayTemplate.key}ComponentProps<DT extends Record<string, any> = Record<string, any>> = {
-    data: DT
-    layoutProps: ${displayTemplate.key}Props | undefined
-} & JSX.IntrinsicElements['div']`);
-                    typeContents.push(`export type ${displayTemplate.key}Component<DT extends Record<string, any> = Record<string, any>> = (props: ${displayTemplate.key}ComponentProps<DT>) => ReactNode`);
-                    typeContents.push('');
-                    props.push(`${displayTemplate.key}Props`);
-                    if (!typeId)
-                        typeId = displayTemplate.nodeType ?? displayTemplate.baseType ?? displayTemplate.contentType;
-                });
-                if (typeId) {
-                    typeId = ucFirst$1(typeId);
-                    typeContents.push('');
-                    typeContents.push(`export type ${typeId}LayoutProps = ${props.join(' | ')}
-export type ${typeId}ComponentProps<DT extends Record<string, any> = Record<string, any>, LP extends ${typeId}LayoutProps = ${typeId}LayoutProps> = {
-    data: DT
-    layoutProps: LP | undefined
-} & JSX.IntrinsicElements['div']
-
-export type ${typeId}Component<DT extends Record<string, any> = Record<string, any>, LP extends ${typeId}LayoutProps = ${typeId}LayoutProps> = (props: ${typeId}ComponentProps<DT,LP>) => ReactNode
-
-export function isDefaultProps(props?: ${typeId}LayoutProps | null) : props is ${templates.filter(t => t.data.isDefault).at(0)?.data?.key}Props
-{
-    return props?.template == "${templates.filter(t => t.data.isDefault).at(0)?.data?.key}"
-}`);
-                    templates.forEach(t => {
-                        typeContents.push(`
-export function is${t.data.key}Props(props?: ${typeId}LayoutProps | null) : props is ${t.data.key}Props
-{
-    return props?.template == "${t.data.key}"
-}`);
-                    });
-                }
-                fs.writeFileSync(typeFilePath, imports.join("\n") + "\n\n" + typeContents.join("\n"));
-            }
-        }
+        if (definitions)
+            await createDisplayTemplateHelpers(typeFiles);
         //#endregion
         process.stdout.write(chalk.green(chalk.bold(figures.tick + ` Created/updated style definitions for ${updatedTemplates.join(', ')}`)) + "\n");
     }
@@ -622,6 +588,131 @@ function ucFirst$1(input) {
         return input;
     return input[0].toUpperCase() + input.substring(1);
 }
+async function createTemplateMetadata(client, displayTemplate, basePath, createPaths = true) {
+    let itemPath = undefined;
+    let targetType;
+    let typesPath;
+    const targetPrefix = getTemplateTarget(displayTemplate);
+    switch (targetPrefix) {
+        case 'node':
+            itemPath = path.join(basePath, 'nodes', displayTemplate.nodeType, displayTemplate.key);
+            typesPath = path.join(basePath, 'nodes', displayTemplate.nodeType);
+            targetType = targetPrefix + '/' + displayTemplate.nodeType;
+            break;
+        case 'base': {
+            const baseTypeSlug = baseTypeToSlug(displayTemplate.baseType);
+            itemPath = path.join(basePath, baseTypeSlug, 'styles', displayTemplate.key);
+            typesPath = path.join(basePath, baseTypeSlug, 'styles');
+            targetType = targetPrefix + '/' + baseTypeSlug;
+            break;
+        }
+        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");
+    }
+    if (createPaths)
+        void await fsAsync.mkdir(itemPath, { recursive: true }).catch(e => {
+            console.log(e);
+        });
+    const styleFilePath = path.join(itemPath, `${displayTemplate.key}.opti-style.json`);
+    const helperFilePath = path.join(typesPath, 'displayTemplates.ts');
+    return { key: displayTemplate.key, itemPath, typesPath, targetType, styleFilePath, helperFilePath };
+}
+function baseTypeToSlug(baseType) {
+    return baseType.replace(/^\_*/, "").toLowerCase();
+}
+function getTemplateTarget(displayTemplate) {
+    if (displayTemplate.baseType && displayTemplate.baseType.length > 0)
+        return 'base';
+    if (displayTemplate.nodeType && displayTemplate.nodeType.length > 0)
+        return 'node';
+    if (displayTemplate.contentType && displayTemplate.contentType.length > 0)
+        return 'content';
+    return null;
+}
+async function createDisplayTemplateHelpers(typeFiles, force = false, debug = false) {
+    process.stdout.write(chalk.gray(`${figures.arrowRight} Start creating displayTemplates.ts files\n`));
+    for (const targetId in typeFiles) {
+        await createDisplayTemplateHelper(typeFiles[targetId], targetId, force, debug);
+    }
+}
+async function createDisplayTemplateHelper(typeFile, typeFileId, force = false, debug = false) {
+    const prefix = '//not-modified - Remove this line when making change to prevent it from being updated by the CLI tools';
+    const { filePath: typeFilePath, templates } = typeFile;
+    const shouldWrite = await fsAsync.readFile(typeFilePath, { encoding: "utf-8" }).then(data => data.startsWith('//not-modified')).catch((e) => {
+        if (e?.code === 'ENOENT')
+            return true;
+        if (debug)
+            process.stdout.write(chalk.redBright(chalk.bold(`${figures.cross} Unexpected error while reading display template file\n`)));
+        return false;
+    });
+    if (!shouldWrite) {
+        if (!force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.cross} Skipped writing definition file for ${typeFileId} - it already exists and has been modified\n`));
+            return false;
+        }
+        else {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Forcefully overwriting definition file for ${typeFileId} - ${typeFilePath}\n`));
+        }
+    }
+    else if (debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating or updating definition file for ${typeFileId} - ${typeFilePath}\n`));
+    // Write Style definition
+    const imports = [
+        'import type { LayoutProps, LayoutPropsSettingKeys, LayoutPropsSettingValues, CmsComponentProps } from "@remkoj/optimizely-cms-react"',
+        'import type { JSX, ComponentType } from "react"'
+    ];
+    const typeContents = [];
+    const props = [];
+    let typeId = typeFileId.split('/', 2)[1];
+    templates.forEach(({ file: displayTemplateFile, data: displayTemplate }) => {
+        const importPath = path.relative(path.dirname(typeFilePath), displayTemplateFile).replaceAll('\\', '/');
+        imports.push(`import type ${displayTemplate.key}Styles from "./${importPath}"`);
+        typeContents.push(`export type ${displayTemplate.key}Props = LayoutProps<typeof ${displayTemplate.key}Styles>`);
+        typeContents.push(`export type ${displayTemplate.key}Keys = LayoutPropsSettingKeys<${displayTemplate.key}Props>`);
+        typeContents.push(`export type ${displayTemplate.key}Options<K extends ${displayTemplate.key}Keys> = LayoutPropsSettingValues<${displayTemplate.key}Props, K>`);
+        typeContents.push(`export type ${displayTemplate.key}ComponentProps<DT extends Record<string, 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)
+            typeId = displayTemplate.nodeType ?? displayTemplate.baseType ?? displayTemplate.contentType;
+    });
+    if (typeId) {
+        typeId = ucFirst$1(typeId);
+        typeContents.push(`export type ${typeId}LayoutProps = ${props.join(' | ')}
+export type ${typeId}LayoutKeys = LayoutPropsSettingKeys<${typeId}LayoutProps>
+export type ${typeId}LayoutOptions<K extends ${typeId}LayoutKeys> = LayoutPropsSettingValues<${typeId}LayoutProps,K>
+export type ${typeId}ComponentProps<DT extends Record<string, any> = Record<string, any>> = Omit<CmsComponentProps<DT, ${typeId}LayoutProps>,'children'> & JSX.IntrinsicElements['div']
+export type ${typeId}Component<DT extends Record<string, any> = Record<string, any>> = ComponentType<${typeId}ComponentProps<DT>>`);
+        const defaultTemplate = templates.find(t => t.data.isDefault);
+        if (defaultTemplate) {
+            typeContents.push(`
+export function isDefaultProps(props?: ${typeId}LayoutProps | null) : props is ${defaultTemplate.data?.key}Props
+{
+    return props?.template == "${defaultTemplate.data?.key}"
+}`);
+        }
+        templates.forEach(t => {
+            typeContents.push(`
+export function is${t.data.key}Props(props?: ${typeId}LayoutProps | null) : props is ${t.data.key}Props
+{
+    return props?.template == "${t.data.key}"
+}`);
+        });
+    }
+    void await fsAsync.writeFile(typeFilePath, prefix + "\n" + imports.join("\n") + "\n\n" + typeContents.join("\n"));
+    return true;
+}
 
 // Node JS and 3rd Party libraries
 const StylesCreateCommand = {
@@ -700,7 +791,7 @@ const StylesCreateCommand = {
         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.displayTemplatesPut({ body: definition, path: { key: definition.key } }).catch(_ => undefined);
+            const response = await client.displayTemplatesCreate({ body: definition }).catch(_ => undefined);
             if (!response) {
                 process.stderr.write(chalk.redBright(chalk.bold(`\[ERROR] Unable to create style definition ${definition.displayName} in Optimizely CMS\n`)));
             }
@@ -733,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) {
@@ -745,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));
@@ -763,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",
@@ -793,9 +1086,18 @@ const TypesPushCommand = {
                 (!baseTypes || baseTypes.length == 0 || baseTypes.includes(data.definition.baseType)) &&
                 (!types || types.length == 0 || types.includes(data.definition.key));
         });
+        // Create validator
+        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Loading OpenAPI Specification for validation\n`));
+        const typeSchema = (await loadSchema(client, 'ContentType')).at(0)?.schema;
+        const typeValidator = await getValidator(typeSchema);
         // Output selected types
-        const results = await Promise.all(typeDefinitions.map(type => {
+        const results = await Promise.all(typeDefinitions.map(async (type) => {
+            if (!type.definition.key) {
+                process.stdout.write(chalk.yellowBright(`  ${figures.arrowRight} Content Type has no key in ${type.file}\n`));
+                return;
+            }
             process.stdout.write(chalk.yellowBright(`  ${figures.arrowRight} Pushing ${type.definition.displayName} from ${type.file}\n`));
+            // Filter unwanted fields from the ContentType definition
             const outType = { ...type.definition };
             if (outType.source)
                 delete outType.source;
@@ -805,13 +1107,31 @@ const TypesPushCommand = {
                 delete outType.lastModified;
             if (outType.lastModifiedBy || outType.lastModifiedBy == "")
                 delete outType.lastModifiedBy;
-            if (outType.features)
-                delete outType.features;
-            if (outType.usage)
-                delete outType.usage;
-            return client.contentTypesPut({ path: { key: outType.key }, body: outType, query: { ignoreDataLossWarnings: force } })
-                .then(ct => { return { key: type.definition.key, type: ct, file: type.file }; })
-                .catch(e => { return { key: type.definition.key, type: type.definition, file: type.file, error: e }; });
+            //if (outType.features) delete outType.features
+            //if (outType.usage) delete outType.usage
+            const validationResult = typeValidator(outType);
+            if (validationResult || force) {
+                if (!validationResult)
+                    process.stdout.write(chalk.yellowBright(`  ${figures.arrowRight} Ignoring validation errors in ${type.file}\n`));
+                const currentContentType = (await client.contentTypesGet({ path: { key: type.definition.key } }).catch(() => null));
+                function buildError(e) {
+                    return { key: type.definition.key, type: type.definition, file: type.file, error: e };
+                }
+                function buildData(ct) {
+                    return { key: type.definition.key, type: ct, file: type.file };
+                }
+                return (currentContentType ?
+                    client.contentTypesPatch({ path: { key: type.definition.key }, body: outType }) :
+                    client.contentTypesCreate({ body: outType })).then(buildData).catch(buildError);
+            }
+            else {
+                return {
+                    key: type.definition.key,
+                    type: type.definition,
+                    file: type.file,
+                    error: typeValidator.errors.map(x => x.message).join(', ')
+                };
+            }
         }));
         const overview = new Table({
             head: [
@@ -843,233 +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 NextJsQueriesCommand = {
-    command: "nextjs:fragments",
-    describe: "Create the GrapQL Fragments for a Next.JS / Optimizely Graph structure",
-    builder,
-    handler: async (args, opts) => {
-        generatedProps = [];
-        // Prepare
-        const { loadedContentTypes, createdTypeFolders } = opts || {};
-        const { components: basePath, _config: { debug }, force } = parseArgs(args);
-        const client = createCmsClient(args);
-        const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(client, args);
-        // Start process
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL fragments for ${contentTypes.map(x => x.key).join(', ')}\n`));
-        const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
-        const updatedTypes = contentTypes.map(contentType => {
-            const typePath = getTypeFolder(typeFolders, contentType.key);
-            return createGraphFragments(contentType, typePath, basePath, force, debug, allContentTypes, client.runtimeCmsVersion == OptiCmsVersion.CMS12);
-        }).filter(x => x).flat();
-        // Report outcome
-        if (updatedTypes.length > 0)
-            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL fragments for ${updatedTypes.join(', ')}\n`));
-        else
-            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL fragments created/updated\n`));
-        if (!opts)
-            process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
-        generatedProps = [];
-    }
-};
-function createGraphFragments(contentType, typePath, basePath, force, debug, contentTypes, forCms12 = false) {
-    const returnValue = [];
-    const baseType = contentType.baseType ?? 'default';
-    const baseQueryFile = path.join(typePath, `${contentType.key}.${baseType}.graphql`);
-    if (fs.existsSync(baseQueryFile)) {
-        if (force) {
-            if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${contentType.displayName} (${contentType.key}) base fragment\n`));
-        }
-        else {
-            if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) base fragment - file already exists\n`));
-            return undefined;
-        }
-    }
-    else if (debug) {
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
-    }
-    const { fragment, propertyTypes } = createInitialFragment(contentType, false, undefined, forCms12);
-    fs.writeFileSync(baseQueryFile, fragment);
-    returnValue.push(contentType.key);
-    let dependencies = Array.isArray(propertyTypes) ? [...propertyTypes] : [];
-    while (Array.isArray(dependencies) && dependencies.length > 0) {
-        let newDependencies = [];
-        dependencies.forEach(dep => {
-            const propContentType = contentTypes.filter(x => x.key == dep[0])[0];
-            if (!propContentType) {
-                console.warn(`🟠 The content type ${dep[0]} has been referenced, but is not found in the Optimizely CMS instance`);
-                return;
-            }
-            const fullTypeName = forCms12 ? contentType.key + propContentType.key : propContentType.key;
-            const propertyFragmentFile = path.join(basePath, propContentType.baseType, propContentType.key, `${fullTypeName}.property.graphql`);
-            const propertyFragmentDir = path.dirname(propertyFragmentFile);
-            if (!fs.existsSync(propertyFragmentDir))
-                fs.mkdirSync(propertyFragmentDir, { recursive: true });
-            if (!fs.existsSync(propertyFragmentFile) || force) {
-                if (debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Writing ${propContentType.displayName} (${propContentType.key}) property fragment\n`));
-                const propContentTypeInfo = createInitialFragment(propContentType, true, contentType, forCms12);
-                fs.writeFileSync(propertyFragmentFile, propContentTypeInfo.fragment);
-                returnValue.push(propContentType.key);
-                if (Array.isArray(propContentTypeInfo.propertyTypes))
-                    newDependencies.push(...propContentTypeInfo.propertyTypes);
-            }
-        });
-        dependencies = newDependencies;
-    }
-    return returnValue.length > 0 ? returnValue : undefined;
-}
-function createInitialFragment(contentType, forProperty = false, forBaseType, forCms12 = false) {
-    const propertyTypes = [];
-    const fragmentFields = [];
-    const typeProps = contentType.properties ?? {};
-    Object.getOwnPropertyNames(typeProps).forEach(propKey => {
-        // Exclude system properties, which are not present in Optimizely Graph
-        if (['experience', 'section'].includes(contentType.baseType) && ['AdditionalData', 'UnstructuredData', 'Layout'].includes(propKey))
-            return;
-        // Exclude CMS 12 System Properties
-        if (forCms12 && ['Categories'].includes(propKey))
-            return;
-        const propType = typeProps[propKey].type;
-        const isConflict = generatedProps.some(x => x.propName == propKey && x.propType != propType);
-        const propName = isConflict ? `${contentType.key}${propKey}: ${propKey}` : propKey;
-        // Write the property
-        switch (propType) {
-            case IntegrationApi.PropertyDataType.ARRAY:
-                {
-                    const typeData = typeProps[propKey];
-                    switch (typeData.items.type) {
-                        case IntegrationApi.PropertyDataType.INTEGER:
-                            if (typeData.format == 'categorization')
-                                fragmentFields.push(`${propName} { Id, Name, Description }`);
-                            else
-                                fragmentFields.push(propName);
-                            break;
-                        case IntegrationApi.PropertyDataType.STRING:
-                            fragmentFields.push(propName);
-                            break;
-                        case IntegrationApi.PropertyDataType.CONTENT:
-                            if (contentType.baseType == 'page' || contentType.baseType == 'experience')
-                                fragmentFields.push(`${propName} { ...${forCms12 ? 'PageIContentListItem' : 'BlockData'} }`);
-                            else
-                                fragmentFields.push(`${propName} { ...IContentListItem }`);
-                            break;
-                        case IntegrationApi.PropertyDataType.COMPONENT:
-                            const componentType = typeData.items.contentType;
-                            switch (componentType) {
-                                case 'link':
-                                    fragmentFields.push(`${propName} { ...LinkItemData }`);
-                                    break;
-                                default:
-                                    {
-                                        const componentFragmentName = forCms12 ? contentType.key + componentType : componentType + 'Property';
-                                        fragmentFields.push(`${propName} { ...${componentFragmentName}Data }`);
-                                        propertyTypes.push([componentType, true]);
-                                        break;
-                                    }
-                            }
-                            break;
-                        case IntegrationApi.PropertyDataType.CONTENT_REFERENCE:
-                            fragmentFields.push(`${propName} { ...ReferenceData }`);
-                            break;
-                        default:
-                            fragmentFields.push(`${propName} { __typename }`);
-                            break;
-                    }
-                    break;
-                }
-            case IntegrationApi.PropertyDataType.STRING: {
-                const propDetails = typeProps[propKey];
-                switch (propDetails.format ?? "") {
-                    case 'html':
-                        fragmentFields.push(forCms12 ? `${propName} { Structure, Html }` : `${propName} { json, html }`);
-                        break;
-                    case 'shortString':
-                    case 'selectOne':
-                    case '':
-                        fragmentFields.push(propName);
-                        break;
-                    default:
-                        if (!isConflict)
-                            console.warn(chalk.redBright(`❗ Unsupported string format "${propDetails.format}" for ${contentType.key}.${propKey}; add it manually to the fragment if you need to access this field`));
-                        break;
-                }
-                break;
-            }
-            case IntegrationApi.PropertyDataType.URL:
-                fragmentFields.push(forCms12 ? propName : `${propName} { ...LinkData }`);
-                break;
-            case IntegrationApi.PropertyDataType.CONTENT_REFERENCE:
-                fragmentFields.push(`${propName} { ...ReferenceData }`);
-                break;
-            case IntegrationApi.PropertyDataType.COMPONENT: {
-                const componentType = typeProps[propKey].contentType;
-                if (forCms12 && componentType == "link") {
-                    fragmentFields.push(`${propName} { ...LinkItemData }`);
-                }
-                else {
-                    const componentFragmentName = forCms12 ? contentType.key + componentType : componentType + 'Property';
-                    fragmentFields.push(`${propName} { ...${componentFragmentName}Data }`);
-                    propertyTypes.push([componentType, true]);
-                }
-                break;
-            }
-            case IntegrationApi.PropertyDataType.BINARY:
-                fragmentFields.push(`${propName} { ...BinaryData }`);
-                break;
-            default:
-                fragmentFields.push(propName);
-                break;
-        }
-        generatedProps.push({
-            propType: typeProps[propKey].type,
-            propName: propKey
-        });
-    });
-    if (contentType.baseType == "experience")
-        fragmentFields.push('...ExperienceData');
-    if (fragmentFields.length == 0) {
-        if (forCms12)
-            fragmentFields.push('empty: _metadata: ContentLink { key: GuidValue }');
-        else
-            fragmentFields.push('empty: _metadata { key }');
-    }
-    const fragmentTarget = forProperty ? (forCms12 ? (forBaseType?.key ?? '') + contentType.key : contentType.key + 'Property') : contentType.key;
-    const tpl = `fragment ${fragmentTarget}Data on ${fragmentTarget} {
-  ${fragmentFields.join("\n  ")}
-}`;
-    return {
-        fragment: tpl,
-        propertyTypes: propertyTypes.length == 0 ? null : propertyTypes
-    };
+    return list.filter(x => x.type == type).at(0);
 }
 
 function ucFirst(current) {
@@ -1105,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)
@@ -1121,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`));
@@ -1146,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)) {
@@ -1159,24 +1262,50 @@ function getDisplayTemplateInfo$1(contentType, typePath) {
 }
 const Templates = {
     // Default Template for all components without specifics
-    default: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { type CmsComponent } from "@remkoj/optimizely-cms-react";
+    default: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { CmsEditable, type CmsComponent } from "@remkoj/optimizely-cms-react/rsc";
 import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}${baseDisplayTemplate ? `
 import { ${baseDisplayTemplate} } from "../styles/displayTemplates";` : ''}
 
 /**
  * ${contentType.displayName}
+ * ---
  * ${contentType.description}
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${(displayTemplate || baseDisplayTemplate) ? ', ' + [displayTemplate, baseDisplayTemplate].filter(x => x).join(" | ") : ''}> = ({ data${(displayTemplate || baseDisplayTemplate) ? ', layoutProps' : ''}, children }) => {
+export const ${varName} : CmsComponent<${contentType.key}DataFragment${(displayTemplate || baseDisplayTemplate) ? ', ' + [displayTemplate, baseDisplayTemplate].filter(x => x).join(" | ") : ''}> = ({ data${(displayTemplate || baseDisplayTemplate) ? ', layoutProps' : ''}, editProps }) => {
     const componentName = '${contentType.displayName}'
     const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
-    return <div className="w-full border-y border-y-solid border-y-slate-900 py-2 mb-4">
+    return <CmsEditable className="w-full border-y border-y-solid border-y-slate-900 py-2 mb-4" {...editProps}>
         <div className="font-bold italic">{ componentName }</div>
         <div>{ componentInfo }</div>
         { Object.getOwnPropertyNames(data).length > 0 && <pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(data, undefined, 4) }</pre> }
-        { children && <div className="mt-4 mx-4 flex flex-col">{ children }</div>}
-    </div>
+    </CmsEditable>
+}
+${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
+${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+
+export default ${varName}`,
+    // Default Template for all section types
+    section: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { 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]
@@ -1184,26 +1313,32 @@ ${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}
 export default ${varName}`,
     // Template for all page component types
     page: (contentType, varName, displayTemplate) => `import { type OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs";
-import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";${displayTemplate ? `
+import { get${contentType.key}DataDocument, type get${contentType.key}DataQuery } from '@/gql/graphql'${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}
 import { getSdk } from "@/gql"
 
 /**
  * ${contentType.displayName}
+ * ---
  * ${contentType.description}
+ * 
+ * This component uses the content query that is auto-generated with the Optimizely CMS Preset for GraphQL Codegen, if you need 
+ * to override this query create a GraphQL file (for example: \`get${contentType.key}Data.query.graphql\`) in the same folder as
+ * this file. This file must include a GraphQL query with the name \`get${contentType.key}Data\`. 
+ * 
+ * [Documentation: Customizing queries](https://github.com/remkoj/optimizely-dxp-clients/blob/main/packages/optimizely-graph-functions/docs/customizing_queries.md)
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, children }) => {
+export const ${varName} : CmsComponent<get${contentType.key}DataQuery${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''} }) => {
     const componentName = '${contentType.displayName}'
     const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
     return <div className="mx-auto px-2 container">
         <div className="font-bold italic">{ componentName }</div>
         <div>{ componentInfo }</div>
         { Object.getOwnPropertyNames(data).length > 0 && <pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(data, undefined, 4) }</pre> }
-        { children && <div className="flex flex-col mt-4 mx-4">{ children }</div>}
     </div>
 }
 ${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
-${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+${varName}.getDataQuery = () => get${contentType.key}DataDocument
 ${varName}.getMetaData = async (contentLink, locale, client) => {
     const sdk = getSdk(client);
     // Add your metadata logic here
@@ -1213,23 +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 { ${contentType.key}DataFragmentDoc, type ExperienceDataFragment, type ${contentType.key}DataFragment } from "@/gql/graphql";
+import { ExperienceDataFragmentDoc, get${contentType.key}DataDocument, type get${contentType.key}DataQuery } from '@/gql/graphql'
+import { getFragmentData } from '@/gql/fragment-masking'
 import { OptimizelyComposition, isNode, CmsEditable } from "@remkoj/optimizely-cms-react/rsc";${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}
 import { getSdk } from "@/gql/client"
 
 /**
  * ${contentType.displayName}
+ * ---
  * ${contentType.description}
+ * 
+ * This component uses the content query that is auto-generated with the Optimizely CMS Preset for GraphQL Codegen, if you need 
+ * to override this query create the file \`${contentType.key}.query.graphql\` in the same folder as this file. This file then
+ * must include a GraphQL query with the name \`get${contentType.key} Data\`. 
+ * 
+ * [Documentation: Customizing queries](https://github.com/remkoj/optimizely-dxp-clients/blob/main/packages/optimizely-graph-functions/docs/customizing_queries.md)
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, ctx }) => {
-    const composition = (data as ExperienceDataFragment)?.composition
-    return <CmsEditable as="div" className="mx-auto px-2 container" cmsFieldName="unstructuredData" ctx={ctx}>
-        { composition && isNode(composition) && <OptimizelyComposition node={composition} ctx={ctx} /> }
-    </CmsEditable>
+export const ${varName} : CmsComponent<get${contentType.key}DataQuery${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, ctx }) => {
+  if (ctx) ctx.editableContentIsExperience = true
+  const composition = getFragmentData(ExperienceDataFragmentDoc, data).composition
+  const componentName = '${contentType.displayName}'
+  const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
+  return <CmsEditable as="div" className="mx-auto px-2 container" cmsFieldName="unstructuredData" ctx={ctx}>
+      <div className="font-bold italic">{ componentName }</div>
+      <div>{ componentInfo }</div>
+      { composition && isNode(composition) && <OptimizelyComposition node={composition} ctx={ctx} /> }
+  </CmsEditable>
 }
 ${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
-${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+${varName}.getDataQuery = () => get${contentType.key}DataDocument
 ${varName}.getMetaData = async (contentLink, locale, client) => {
     const sdk = getSdk(client);
     // Add your metadata logic here
@@ -1247,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'] });
@@ -1258,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);
         });
     }
@@ -1278,13 +1427,30 @@ function createSpecificNode(template, templatePath, force = false, debug = false
         process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${template.displayName} (${template.key}) component\n`));
     if (!fs.existsSync(templatePath))
         fs.mkdirSync(templatePath, { recursive: true });
+    const baseType = template.nodeType ?? template.baseType ?? 'unknown';
     const displayTemplateName = getDisplayTemplateInfo(template, templatePath);
-    const component = `import { extractSettings, type CmsLayoutComponent } from "@remkoj/optimizely-cms-react/rsc";${displayTemplateName ? `
-import { ${displayTemplateName} } from "../displayTemplates";` : ''}
+    const imports = ['import { extractSettings, type CmsLayoutComponent } from "@remkoj/optimizely-cms-react/rsc";'];
+    const componentProps = [`className="vb:${baseType} vb:${baseType}:${template.key}"`];
+    const componentArgs = ['layoutProps', 'children'];
+    let componentType = 'div';
+    if (displayTemplateName)
+        imports.push(`import { ${displayTemplateName} } from "../displayTemplates";`);
+    if (baseType.toLowerCase() == 'section') {
+        imports.push('import { CmsEditable } from "@remkoj/optimizely-cms-react/rsc";');
+        componentType = 'CmsEditable';
+        componentProps.push('{ ...editProps }');
+        componentArgs.push('editProps');
+    }
+    let style = '';
+    if (baseType == "row")
+        style = ` style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "stretch" }}`;
+    if (baseType == "column")
+        style = ` style={{ display: "flex", flexDirection: "column", flexGrow: 1 }}`;
+    const component = `${imports.join("\n")}
 
-export const ${template.key} : CmsLayoutComponent<${displayTemplateName ?? '{}'}> = ({ contentLink, layoutProps, children }) => {
+export const ${template.key} : CmsLayoutComponent<${displayTemplateName ?? '{}'}> = ({ ${componentArgs.join(', ')} }) => {
     const layout = extractSettings(layoutProps);
-    return (<div className="vb:${template.nodeType} vb:${template.nodeType}:${template.key}">{ children }</div>);
+    return (<${componentType} ${componentProps.join(' ')}${style}>{ children }</${componentType}>);
 }
 
 export default ${template.key};`;
@@ -1304,13 +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 = ({ contentLink, layoutProps, children, ctx }) =>
+export const VisualBuilderNode : CmsLayoutComponent = ({ editProps, layoutProps, children }) =>
 {
-    let className = \`vb:\${layoutProps?.layoutType}\`
-    if (layoutProps && layoutProps.layoutType == "section")
-        return <CmsEditable as="div" className={ className } cmsId={ contentLink.key } ctx={ctx}>{ children }</CmsEditable>
-    return <div className={ className }>{ children }</div>
+  let className = \`vb:\${layoutProps?.layoutType}\`;
+  let style : CSSProperties | undefined = undefined;
+  if (layoutProps?.layoutType == "row")
+    style = {display: "flex", flexDirection: "row"}
+  if (layoutProps?.layoutType == "column")
+    style = {display: "flex", flexDirection: "column"}
+  if (layoutProps && layoutProps.layoutType == "section")
+    return <CmsEditable as="div" className={ className } {...editProps}>{ children }</CmsEditable>
+  return <div className={ className } style={ style }>{ children }</div>
 }
 
 export default VisualBuilderNode`;
@@ -1558,7 +1730,7 @@ const NextJsCreateCommand = {
         await Promise.all([
             TypesPullCommand.handler(args),
             StylesPullCommand.handler({ ...args, excludeNodeTypes: [], excludeTemplates: [], nodes: [], templates: [], templateTypes: [], definitions: true }),
-            NextJsQueriesCommand.handler(args, { loadedContentTypes: getContentTypesResult, createdTypeFolders: folders })
+            //createFragments.handler(args, { loadedContentTypes: getContentTypesResult, createdTypeFolders: folders })
         ]);
         process.stdout.write(chalk.yellowBright(chalk.bold(figures.tick) + " Prepared types, styles and fragments") + "\n");
         // Then create the components
@@ -1573,182 +1745,199 @@ const NextJsCreateCommand = {
     }
 };
 
-const deepmerge$1 = createDeepMerge();
-async function loadSchema(client, schemaName) {
-    const schemas = Array.isArray(schemaName) ? schemaName : [schemaName];
-    process.stdout.write(`${figures.arrowRight} Downloading current JSON Schema\n`);
-    const spec = await client.getOpenApiSpec();
-    const specSchemas = spec.components?.schemas ?? {};
-    process.stdout.write(`  ${figures.tick} Complete\n`);
-    const result = [];
-    process.stdout.write(`\n${figures.arrowRight} Constructing schema for ${schemas.join(', ')}\n`);
-    for await (const schema of schemas)
-        if (specSchemas[schema]) {
-            const definitions = {};
-            const processedSchema = processSchema(specSchemas[schema], definitions, spec);
-            const jsonSchema = {
-                //"$schema": "https://json-schema.org/draft-07/schema",
-                "$id": `https://api.cms.optimizely.com/schema/${schema}`,
-                type: "object",
-                title: schema,
-                ...processedSchema,
-                definitions
-            };
-            result.push({
-                title: schema,
-                schema: postProcessDefintions(jsonSchema)
-            });
-            process.stdout.write(`  ${figures.tick} Constructed schema of ${schema}\n`);
-        }
-    return result;
-}
-function postProcessDefintions(jsonSchema) {
-    if (!jsonSchema.definitions)
-        return jsonSchema;
-    for (const definitionName in jsonSchema.definitions) {
-        if ((definitionName.endsWith("Property") || definitionName.endsWith("ListItem")) && jsonSchema.definitions[definitionName].properties) {
-            const type = jsonSchema.definitions[definitionName].properties?.type;
-            if (isRefSchema(type)) {
-                const typeSchema = resolveRefSchema(type, jsonSchema);
-                if (typeSchema && typeSchema.type === 'string' && Array.isArray(typeSchema.enum)) {
-                    let typeValue = definitionName.substring(0, definitionName.length - 8);
-                    typeValue = typeValue[0].toLowerCase() + typeValue.substring(1);
-                    typeValue = typeValue === 'list' ? 'array' : typeValue;
-                    typeValue = typeValue === 'jsonString' ? 'json' : typeValue;
-                    if (typeSchema.enum.includes(typeValue)) {
-                        const newTypeDef = deepmerge$1({}, typeSchema);
-                        newTypeDef.enum = newTypeDef.enum.filter((x) => x === typeValue);
-                        jsonSchema.definitions[definitionName].properties.type = newTypeDef;
-                    }
-                }
+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");
     }
-    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 };
+};
+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 {
-            return schema;
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) base fragment - file already exists\n`));
+            writeFragment = false;
         }
     }
-    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 if (debug) {
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
     }
-    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';
+    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 {
-                const keyVal = processSchema(schema[key], defs, spec, mergeAllOf);
-                if (keyVal !== undefined)
-                    newSchema[key] = keyVal;
+                if (debug)
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) property fragment - file already exists\n`));
+                mustWrite = false;
             }
         }
-        return newSchema;
+        else if (debug) {
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) property fragment\n`));
+        }
+        if (mustWrite) {
+            const fragment = 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;
 }
-function isRefSchema(schema) {
-    if (typeof schema != 'object' || schema == null)
-        return false;
-    return Object.getOwnPropertyNames(schema).length === 1 && typeof schema['$ref'] === 'string';
-}
-function resolveRefSchema(schema, spec) {
-    if (!isRefSchema(schema))
-        return undefined;
-    return resolveLocalRef(schema['$ref'], spec);
-}
-function isLocalRef(ref) {
-    return typeof ref === 'string' && ref.startsWith('#');
-}
-function getLocalRefName(ref) {
-    if (!isLocalRef(ref))
-        return undefined;
-    const refPath = ref.substring(2).split('/');
-    return refPath.at(refPath.length - 1);
-}
-function resolveLocalRef(ref, spec) {
-    const refPath = ref.substring(2).split('/');
-    return refPath.reduce((integrator, current) => {
-        return integrator ? integrator[current] : undefined;
-    }, spec);
-}
-const replaceEscapedChars = [
-    [new RegExp('\\\\ ', 'g'), ' '],
-    [new RegExp('\\\\!', 'g'), '!'],
-    [new RegExp('\\\\"', 'g'), '"'],
-    [new RegExp('\\\\#', 'g'), '#'],
-    [new RegExp('\\\\%', 'g'), '%'],
-    [new RegExp('\\\\&', 'g'), '&'],
-    [new RegExp("\\\\'", 'g'), "'"],
-    [new RegExp('\\\\,', 'g'), ','],
-    [new RegExp('\\\\-', 'g'), '-'],
-    [new RegExp('\\\\:', 'g'), ':'],
-    [new RegExp('\\\\;', 'g'), ';'],
-    [new RegExp('\\\\<', 'g'), '<'],
-    [new RegExp('\\\\=', 'g'), '='],
-    [new RegExp('\\\\>', 'g'), '>'],
-    [new RegExp('\\\\@', 'g'), '@'],
-    [new RegExp('\\\\_', 'g'), '_'],
-    [new RegExp('\\\\`', 'g'), '`'],
-    [new RegExp('\\\\~', 'g'), '~'],
-    [new RegExp('\\\\[zZ]', 'g'), '$'],
-];
-function safeCreateUnicodeRegExp(pattern) {
-    for (const unEscape of replaceEscapedChars) {
-        pattern = pattern.replace(unEscape[0], unEscape[1]);
+
+const NextJsQueriesCommand = {
+    command: "nextjs:queries",
+    describe: "Create the GrapQL Queries to use two queries to load content",
+    builder: yargs => {
+        const updatedArgs = contentTypesBuilder(yargs, { ...ContentTypesArgsDefaults, baseTypes: ['page', 'experience'] });
+        updatedArgs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
+        return updatedArgs;
+    },
+    handler: async (args, opts) => {
+        // Prepare
+        const { loadedContentTypes, createdTypeFolders } = opts || {};
+        const { components: basePath, _config: { debug }, force } = 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 queries\n`));
+        const dependencies = [];
+        const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
+        const updatedTypes = contentTypes.map(contentType => {
+            const typePath = getTypeFolder(typeFolders, contentType.key);
+            const { written, propertyTypes } = createGraphQueries(contentType, typePath, force, debug);
+            dependencies.push(...propertyTypes);
+            return written ? contentType.key : undefined;
+        }).filter(x => x).flat();
+        // Report outcome
+        if (updatedTypes.length > 0)
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL queries for ${updatedTypes.join(', ')}\n`));
+        else
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL queries created/updated\n`));
+        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL property fragments\n`));
+        const generatedProps = createPropertyFragments(dependencies, allContentTypes, (contentType) => {
+            if (!contentType.key)
+                return undefined;
+            let tf = getTypeFolder(typeFolders, contentType.key);
+            if (!tf) {
+                tf = getContentTypePaths(contentType, basePath, true, debug);
+                typeFolders.push(tf);
+            }
+            return tf;
+        }, force, debug);
+        // Report outcome
+        if (generatedProps.length > 0)
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL property fragments for ${generatedProps.join(', ')}\n`));
+        else
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL property fragments created/updated\n`));
+        if (!opts)
+            process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
     }
-    return pattern;
+};
+function createGraphQueries(contentType, typePath, force, debug) {
+    const baseQueryFile = typePath.queryFile;
+    let mustWrite = true;
+    if (fs.existsSync(baseQueryFile)) {
+        if (force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${contentType.displayName} (${contentType.key}) base fragment\n`));
+        }
+        else {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) base fragment - file already exists\n`));
+            mustWrite = false;
+        }
+    }
+    else if (debug) {
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
+    }
+    if (mustWrite) {
+        const fragment = GraphQLGen.buildGetQuery(contentType, undefined, new Map());
+        fs.writeFileSync(baseQueryFile, fragment);
+    }
+    return {
+        written: mustWrite,
+        propertyTypes: GraphQLGen.getReferencedPropertyComponents(contentType)
+    };
 }
 
 const SchemaDownloadCommand = {
@@ -1769,12 +1958,12 @@ const SchemaDownloadCommand = {
         const fullSchemaDir = path.normalize(path.join(projectPath, schemaDir));
         const relativeSchemaDir = path.relative(projectPath, fullSchemaDir);
         process.stdout.write(`\n${figures.arrowRight} Validating schema folder ${relativeSchemaDir}\n`);
-        const schemaDirInfo = await fs$1.stat(fullSchemaDir).catch((e) => { if (e.code == 'ENOENT')
+        const schemaDirInfo = await fsAsync.stat(fullSchemaDir).catch((e) => { if (e.code == 'ENOENT')
             return undefined;
         else
             throw e; });
         if (!schemaDirInfo) {
-            await fs$1.mkdir(fullSchemaDir, { recursive: true });
+            await fsAsync.mkdir(fullSchemaDir, { recursive: true });
         }
         else if (!schemaDirInfo.isDirectory()) {
             process.stderr.write(chalk.redBright(chalk.bold(`${figures.cross} [Error] The schema directory exists, but is not a directory (${relativeSchemaDir})\n`)));
@@ -1787,7 +1976,7 @@ const SchemaDownloadCommand = {
             const schemaFile = path.normalize(path.join(fullSchemaDir, `${schema.title.toLowerCase()}.schema.json`));
             const relativePath = path.relative(projectPath, schemaFile);
             try {
-                await fs$1.writeFile(schemaFile, JSON.stringify(schema.schema, undefined, 2), {
+                await fsAsync.writeFile(schemaFile, JSON.stringify(schema.schema, undefined, 2), {
                     encoding: "utf-8",
                     flag: force ? 'w' : 'wx'
                 });
@@ -1941,13 +2130,6 @@ function groupErrorsByKeyword(errors) {
         toMerge.enum = [toMerge.enum.reduce((prev, current) => prev ? deepmerge(prev, current) : current, undefined)];
     return toMerge;
 }
-function getValidator(schemaObject) {
-    const ajv = new Ajv({
-        discriminator: true
-    });
-    addFormats(ajv);
-    return ajv.compile(schemaObject);
-}
 
 const SchemaVsCodeCommand = {
     command: "schema:vscode",
@@ -2034,7 +2216,7 @@ function writeFileAsync(path, data) {
     });
 }
 
-var version = "6.0.0-pre8";
+var version = "6.0.0-pre9";
 var name = "opti-cms";
 var APP = {
 	version: version,
@@ -2059,17 +2241,22 @@ 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, 60],
+            colWidths: [30, 60],
             colAligns: ["left", "left"]
         });
-        info.push(["Instance", client.cmsUrl.host]);
+        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]);
@@ -2192,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.contentDelete({ path: { key }, query: { permanent: 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;
@@ -2218,8 +2405,7 @@ async function resetSystemTypes(client) {
             body: {
                 key: systemType,
                 properties: {}
-            },
-            query: { ignoreDataLossWarnings: true }
+            }
         }).catch((e) => e.status == 404 ? undefined : null);
         if (newType)
             resetTypes++;
@@ -2320,7 +2506,7 @@ async function getAllTypes(client, batchSize = 100) {
     return actualItems;
 }
 async function getAllAssets(client, parentKey, batchSize = 100) {
-    const items = await client.contentListAssets({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
+    const items = await client.preview2ContentListAssets({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
         if (e.status == 404) {
             return {
                 items: [],
@@ -2335,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.contentListAssets({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
+        const pageData = await client.preview2ContentListAssets({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
             if (e.status == 404) {
                 return {
                     items: [],
@@ -2350,7 +2536,7 @@ async function getAllAssets(client, parentKey, batchSize = 100) {
     return actualItems;
 }
 async function getAllItems(client, parentKey, batchSize = 100) {
-    const items = await client.contentListItems({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
+    const items = await client.preview2ContentListItems({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
         if (e.status == 404) {
             return {
                 items: [],
@@ -2365,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.contentListItems({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
+        const pageData = await client.preview2ContentListItems({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
             if (e.status == 404) {
                 return {
                     items: [],
@@ -2387,6 +2573,7 @@ const commands = [
     NextJsComponentsCommand,
     NextJsCreateCommand,
     NextJsFactoryCommand,
+    NextJsFragmentsCommand,
     NextJsQueriesCommand,
     NextJsVisualBuilderCommand,
     SchemaDownloadCommand,