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

package/dist/index.js

@@ -1,35 +1,61 @@
+#!/usr/bin/env node
+/**
+ * Developer Utitility providing helpers for common tasks to building a
+ * frontend application that uses Optimizely CMS/Graph as content repository.
+ * 
+ * License: Apache 2
+ * Copyright (c) 2023-2026 - Remko Jantzen
+ */
+
 import { globSync, glob, globIterate } from 'glob';
 import { config } from 'dotenv';
 import { expand } from 'dotenv-expand';
-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 { readPartialEnvConfig, createClient, ContentRoots } from '@remkoj/optimizely-cms-api';
+import yargs from 'yargs';
+import chalk from 'chalk';
 import figures from 'figures';
 import Table from 'cli-table3';
-import fsAsync from 'node:fs/promises';
+import slugify from '@sindresorhus/slugify';
+import { diff } from 'deep-object-diff';
+import fs$1 from 'node:fs/promises';
 import { input, select, confirm } from '@inquirer/prompts';
 import createDeepMerge from '@fastify/deepmerge';
 import { Ajv } from 'ajv';
 import addFormats from 'ajv-formats';
-import GraphQLGen from '@remkoj/optimizely-graph-functions/contenttype-loader';
+import { DocumentGenerator, PropertyCollisionTracker } from '@remkoj/optimizely-graph-functions/generate';
 import deepEqual from 'fast-deep-equal';
 
+function getProjectDir() {
+    let testPath = process.cwd();
+    let hasPackageJson = false;
+    do {
+        hasPackageJson = fs.statSync(path.join(testPath, 'package.json'), { throwIfNoEntry: false })?.isFile() ?? false;
+        if (!hasPackageJson)
+            testPath = path.normalize(path.join(testPath, '..'));
+    } while (!hasPackageJson && testPath.length > 2);
+    if (!hasPackageJson) {
+        throw new Error('No package.json found!');
+    }
+    return testPath;
+}
 /**
  * Prepare the application context, by parsing the .env files in the main
  * application directory.
  *
  * @returns     A string array with the files processed
  */
-function prepare() {
-    const globResult = globSync(".env*");
-    const envFiles = globResult.sort((a, b) => b.length - a.length).filter(n => n == ".env" || n == ".env.local" || (process.env.NODE_ENV && n == `.env.${process.env.NODE_ENV}.local`));
+function prepare(pDir) {
+    const projectDir = pDir ?? getProjectDir();
+    const envFiles = globSync(".env*", { cwd: projectDir })
+        .sort((a, b) => b.length - a.length)
+        .filter(n => n == ".env" || n == ".env.local" || (process.env.NODE_ENV && n == `.env.${process.env.NODE_ENV}.local`));
     expand(config({ path: envFiles, debug: false, quiet: true }));
     return envFiles;
 }
 
-function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
+function createOptiCmsApp(scriptName, version, epilogue, envFiles, projectDir) {
     if (envFiles) {
         process.stdout.write(chalk.bold(`✅ Loaded environment files:`) + "\n");
         envFiles.forEach(envFile => {
@@ -45,11 +71,12 @@ function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
         console.error(chalk.redBright(`${chalk.bold("[ERROR]:")} Error processing environment variables: ${e.message}`));
         process.exit(1);
     }
+    const defaultPath = projectDir ?? process.cwd();
     return yargs(process.argv)
         .scriptName(scriptName)
         .version(version)
         .usage('$0 <cmd> [args]')
-        .option("path", { alias: "p", description: "Application root folder", string: true, type: "string", demandOption: false, default: process.cwd() })
+        .option("path", { alias: "p", description: "Application root folder", string: true, type: "string", demandOption: false, default: defaultPath })
         .option("components", { alias: "c", description: "Path to components folder", string: true, type: "string", demandOption: false, default: "./src/components/cms" })
         .option("cms_url", { alias: "cu", description: "Optimizely CMS URL", string: true, type: "string", demandOption: isDemanded(config.base), default: config.base, coerce: (val) => val ? new URL(val) : undefined })
         .option("client_id", { alias: "ci", description: "API Client ID", string: true, type: "string", demandOption: isDemanded(config.clientId), default: config.clientId })
@@ -133,84 +160,6 @@ function getCmsIntegrationApiOptions(args) {
     return parseArgs(args)._config;
 }
 
-const StylesPushCommand = {
-    command: "styles:push",
-    describe: "Push Visual Builder style definitions into the CMS (create/replace)",
-    builder: (yargs) => {
-        yargs.option('excludeTemplates', { alias: 'e', description: "Exclude these templates", string: true, type: 'array', demandOption: false, default: [] });
-        yargs.option("templates", { alias: 't', description: "Select only these templates", string: true, type: 'array', demandOption: false, default: [] });
-        return yargs;
-    },
-    handler: async (args) => {
-        const { _config: cfg, excludeTemplates, templates, ...opts } = parseArgs(args);
-        const client = createCmsClient(args);
-        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
-            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
-            return;
-        }
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pushing (create/replace) DisplayStyles into Optimizely CMS\n`));
-        const styleDefinitionFiles = await glob("./**/*.opti-style.json", {
-            cwd: opts.components
-        });
-        const results = (await Promise.all(styleDefinitionFiles.map(async (styleDefinitionFile) => {
-            const filePath = path.normalize(path.join(opts.components, styleDefinitionFile));
-            const styleDefinition = tryReadJsonFile(filePath, cfg.debug);
-            const styleKey = styleDefinition.key;
-            if (!styleKey) {
-                process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} The style definition in ${path.relative(opts.path, filePath)} does not have a key defined\n`));
-                return undefined;
-            }
-            if (excludeTemplates.includes(styleKey))
-                return undefined; // Skip excluded styles
-            if (templates.length > 0 && !templates.includes(styleKey))
-                return undefined; // Only include defined styles, if any
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Pushing: ${styleKey}\n`));
-            // Try to fetch the current template
-            const currentTemplate = await client.displayTemplatesGet({ path: { key: styleKey } }).catch(() => { return undefined; });
-            // Create / Replace the current template
-            const newTemplate = await (currentTemplate ?
-                client.displayTemplatesPatch({ path: { key: styleKey }, body: styleDefinition }) :
-                client.displayTemplatesCreate({ body: styleDefinition }));
-            return newTemplate;
-        }))).filter(isNotNullOrUndefined);
-        const styles = new Table({
-            head: [
-                chalk.yellow(chalk.bold("Name")),
-                chalk.yellow(chalk.bold("Key")),
-                chalk.yellow(chalk.bold("Default")),
-                chalk.yellow(chalk.bold("Target"))
-            ],
-            colWidths: [31, 20, 9, 20],
-            colAligns: ["left", "left", "center", "left"]
-        });
-        results.forEach(tpl => {
-            styles.push([
-                tpl.displayName,
-                tpl.key,
-                tpl.isDefault ? figures.tick : figures.cross,
-                tpl.contentType ? `${tpl.contentType} (C)` : tpl.baseType ? `${tpl.baseType} (B)` : `${tpl.nodeType} (N)`
-            ]);
-        });
-        process.stdout.write(styles.toString() + "\n");
-        process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
-    }
-};
-function tryReadJsonFile(filePath, debug = false) {
-    try {
-        if (debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Reading style definition from ${filePath}\n`));
-        return JSON.parse(fs.readFileSync(filePath, { encoding: 'utf-8' }));
-    }
-    catch (e) {
-        process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} Error while reading ${filePath}\n`));
-    }
-    return undefined;
-}
-function isNotNullOrUndefined(i) {
-    return i ? true : false;
-}
-
 /**
  * This file contains tools that allow using the project that we're targeting
  */
@@ -223,8 +172,12 @@ function isNotNullOrUndefined(i) {
  * @returns
  */
 function getContentTypePaths(contentType, basePath, createFolder = false, debug = false) {
-    const baseTypeSlug = typeToSlug(contentType.baseType);
-    const typePath = path.join(basePath, baseTypeSlug, contentType.key);
+    const baseTypeSlug = keyToSlug(contentType.baseType, {
+        defaultKey: 'global',
+        stripLeadingUnderscore: true
+    });
+    const typeSlug = keyToSlug(contentType.key);
+    const typePath = path.join(basePath, baseTypeSlug, typeSlug);
     if (createFolder) {
         if (!fs.existsSync(typePath)) {
             fs.mkdirSync(typePath, { recursive: true });
@@ -235,10 +188,10 @@ function getContentTypePaths(contentType, basePath, createFolder = false, debug
         if (!fs.statSync(typePath).isDirectory())
             throw new Error(`The folder ${typePath} for Content-Type ${contentType.key} exists, but is not a directory!`);
     }
-    const typeFile = path.join(typePath, `${contentType.key}.opti-type.json`);
-    const fragmentFile = path.join(typePath, `${contentType.key}.${baseTypeSlug}.graphql`);
-    const propertyFragmentFile = path.join(typePath, `${contentType.key}.property.graphql`);
-    const queryFile = path.join(typePath, `get${contentType.key}Data.query.graphql`);
+    const typeFile = path.join(typePath, `${typeSlug}.opti-type.json`);
+    const fragmentFile = path.join(typePath, `${typeSlug}.${baseTypeSlug}.graphql`);
+    const propertyFragmentFile = path.join(typePath, `${typeSlug}.property.graphql`);
+    const queryFile = path.join(typePath, `${typeSlug}.query.graphql`);
     const componentFile = path.join(typePath, `index.tsx`);
     return {
         type: contentType.key,
@@ -251,16 +204,187 @@ function getContentTypePaths(contentType, basePath, createFolder = false, debug
         queryFile
     };
 }
+function getStyleFilePathsSync(displayTemplate, contentBaseType = '_Component', basePath = './src/components/cms', createFolder = false) {
+    const displayTemplateType = getDisplayTemplateType(displayTemplate);
+    let target;
+    let groupPath;
+    switch (displayTemplateType) {
+        case 'base':
+            groupPath = path.join(keyToSlug(displayTemplate.baseType, { stripLeadingUnderscore: true }), 'styles');
+            target = displayTemplate.baseType;
+            break;
+        case 'node':
+            groupPath = path.join('nodes', keyToSlug(displayTemplate.nodeType));
+            target = displayTemplate.nodeType;
+            break;
+        case 'component':
+            {
+                const baseType = contentBaseType;
+                target = displayTemplate.contentType;
+                groupPath = path.join(keyToSlug(baseType, { stripLeadingUnderscore: true }), keyToSlug(displayTemplate.contentType, { stripLeadingGroup: true }));
+                break;
+            }
+        default:
+            throw new Error(`Unsupported DisplayTemplate target for ${displayTemplate.key}`);
+    }
+    const displayTemplateKeySlug = keyToSlug(displayTemplate.key ?? 'displayTemplate', { stripLeadingGroup: true });
+    const groupFolder = path.join(basePath, groupPath);
+    const styleFolder = displayTemplateType === 'component' ? groupFolder : path.join(groupFolder, displayTemplateKeySlug);
+    if (createFolder && !fs.existsSync(styleFolder))
+        fs.mkdirSync(styleFolder, { recursive: true });
+    return {
+        styleFile: path.join(styleFolder, displayTemplateKeySlug + '.opti-style.json'),
+        helperFile: path.join(groupFolder, 'displayTemplates.ts'),
+        identifier: `${displayTemplateType}/${target}`,
+        helperFolder: groupFolder,
+        styleFolder
+    };
+}
+async function getStyleFilePaths(definition, opts) {
+    let defintionBaseType;
+    if (definition.contentType && !opts.contentBaseType && opts.client) {
+        const contentType = await opts.client.contentTypesGet({ path: { key: definition.contentType } }).catch(() => undefined);
+        defintionBaseType = contentType?.baseType;
+    }
+    else {
+        defintionBaseType = opts.contentBaseType;
+    }
+    return getStyleFilePathsSync(definition, defintionBaseType, opts.basePath, opts.createFolder);
+}
 /**
+ * Simple logic to create path slugs for storing ContentType related files on
+ * disk.
  *
- * @param typeKey
+ * @param   typeKey
+ * @param   stripLeadingUnderscore
  * @returns
  */
-function typeToSlug(typeKey) {
-    let typeKeySlug = typeKey.toLowerCase();
-    if (typeKeySlug.startsWith('_'))
-        typeKeySlug = typeKeySlug.substring(1);
-    return typeKeySlug;
+function keyToSlug(typeKey, options = {}) {
+    // Destruct the configuration into the parts we need
+    const { stripLeadingGroup = true, defaultKey = 'unknown', stripLeadingUnderscore = false, ...slugifyBaseConfig } = options;
+    const slugifyConfig = {
+        ...slugifyBaseConfig,
+        preserveLeadingUnderscore: !stripLeadingUnderscore
+    };
+    // First make sure we have a valid input type
+    if (!(typeof typeKey === 'string' || typeKey === undefined || typeKey === null))
+        throw new Error(`Invalid typeKey provided, expected an optional string, received a value of type ${typeof typeKey}`);
+    // Then, take the prefix out, if any and required
+    const toSlugify = stripLeadingGroup && typeKey?.indexOf(":") >= 0 ? typeKey.split(":", 2).at(1) : typeKey;
+    // Finally slugify the result
+    return slugify(toSlugify ?? defaultKey, slugifyConfig);
+}
+function getDisplayTemplateType(displayTemplate) {
+    const templateType = displayTemplate.baseType ? 'base' : displayTemplate.nodeType ? 'node' : displayTemplate.contentType ? 'component' : 'unknown';
+    return templateType;
+}
+
+/**
+ * Test if the value must be included in a set, by defining allowed values and blocked values. A value
+ * is considered be eligible to be included when it's both allowed an not disallowed.
+ *
+ * @param value               The value to test
+ * @param allow               The list of allowed values, when not provided, or and empty array, all
+ *                            values will be allowed.
+ * @param disallow            The list of explicitly disallowed values, yielding an "all allowed but
+ *                            these" operation
+ * @param compareSlugified    When set to `true`, and after test with `includes()` on the allow and
+ *                            disallow did not yield a match, will try to match by converting the
+ *                            values to string (using the `.toString()` method), then slugify them with
+ *                            the `keyToSlug` method and then comparing the outcomes.
+ * @param slugifyOptions      The options to provide to the `keyToSlug` method, this will be ignored
+ *                            unless you set the `compareSlugified` parameter to `true`
+ * @returns                   If the value should be included in the result, based upon the `allow` and
+ *                            `disallow` configuration.
+ *
+ * @see {@link keyToSlug}
+ */
+function shouldInclude(value, allow, disallow, compareSlugified = false, slugifyOptions) {
+    // Do not include null or undefined values
+    if (value === null || value === undefined)
+        return false;
+    // Item is allowed when either allow is not set, an empty array or has the value
+    const isAllowed = !Array.isArray(allow) || allow.length === 0 || allow.includes(value) || (compareSlugified && allow.some(av => keyToSlug(av.toString(), slugifyOptions) === keyToSlug(value.toString(), slugifyOptions)));
+    // Item is disallowed when and the array is set and includes the value
+    const isDisallowed = Array.isArray(disallow) && (disallow.includes(value) || (compareSlugified && disallow.some(av => keyToSlug(av.toString(), slugifyOptions) === keyToSlug(value.toString(), slugifyOptions))));
+    // Return the outcome
+    return isAllowed && !isDisallowed;
+}
+/**
+ * Test if the provided content type is a contract
+ *
+ * @param     contentType     The ContentType to test
+ * @returns   `true` if the ContentType is a contract, `false` otherwise
+ * @see {@link IntegrationApi.ContentType}
+ */
+function isContract(contentType) {
+    if (typeof contentType !== 'object' || contentType === null)
+        return false;
+    return contentType.isContract || contentType.source === 'globalcontract';
+}
+/**
+ * Test if the provided content type comes from the Graph content source (e.g. external content)
+ *
+ * @param     contentType     The ContentType to test
+ * @returns   `true` if the ContentType is a graph type, `false` otherwise
+ * @see {@link IntegrationApi.ContentType}
+ */
+function isGraphType(contentType) {
+    if (typeof contentType !== 'object' || contentType === null)
+        return false;
+    return (contentType.key && typeof (contentType.key) === 'string' && contentType.key.startsWith('graph:')) || contentType.source === 'graph';
+}
+/**
+ * Test if the provided content type is a folder, which is a structural element for editors, but
+ * does not represent anything significant when working with ContentType
+ *
+ * @param     contentType     The ContentType to test
+ * @returns   `true` if the ContentType is a folder, `false` otherwise
+ * @see {@link IntegrationApi.ContentType}
+ */
+function isFolder(contentType) {
+    if (typeof contentType !== 'object' || contentType === null)
+        return false;
+    return contentType.baseType === '_folder';
+}
+/**
+ * Test if the provided content type is a system type
+ *
+ * @param     contentType     The ContentType to test
+ * @returns   `true` if the ContentType is a system type, `false` otherwise
+ * @see {@link IntegrationApi.ContentType}
+ */
+function isSystemType(contentType) {
+    if (typeof contentType !== 'object' || contentType === null)
+        return false;
+    return contentType.source === 'system';
+}
+/**
+ * Type guard that returns `true` when `toTest` is a non-empty array.
+ *
+ * @param toTest The value to inspect.
+ * @returns `true` when `toTest` is an `Array` with at least one element.
+ */
+function isNonEmptyArray(toTest) {
+    return Array.isArray(toTest) && toTest.length > 0;
+}
+/**
+ * Type guard that returns `true` when `toTest` is `null`, `undefined`, or an empty array.
+ *
+ * @param toTest The value to inspect.
+ * @returns `true` when `toTest` is `null` or an `Array` with no elements.
+ */
+function isEmptyArray(toTest) {
+    return toTest === null || !Array.isArray(toTest) || toTest.length === 0;
+}
+/**
+ * Type guard that returns `true` when `toTest` is neither `null` nor `undefined`.
+ *
+ * @param toTest The value to inspect.
+ * @returns `true` when `toTest` is a defined, non-null value of type `T`.
+ */
+function isDefined(toTest) {
+    return toTest !== null && toTest !== undefined;
 }
 
 const ContentTypesArgsDefaults = {
@@ -283,28 +407,41 @@ async function getContentTypes(client, args, pageSize = 25, allowSystem = false,
     const allContentTypes = [];
     const filteredContentTypes = [];
     for await (const contentType of getAllContentTypes(client, cfg.debug, pageSize)) {
-        // Skip content types mapped against Graph data, these should be used with their source type in Graph, not the reference in CMS
-        if (!all && contentType.key.toLowerCase().startsWith('graph:')) {
+        // Skip contracts by default as they're abstract classes and cannot be used to directly store data.
+        if (!all && isContract(contentType)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it is a reference to external data in Optimizely Graph\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key || contentType.displayName || "unnamed type"} as it is a contract and cannot be instantiated directly, use --all to include\n`));
+            continue;
+        }
+        // Skip content types mapped against Graph data, these should be used with their source type in Graph, 
+        // not the reference in CMS
+        if (!all && isGraphType(contentType)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it is a reference to external data in Optimizely Graph, use --all to include\n`));
+            continue;
+        }
+        // Skip folder types as these are non-data carrying types in the instance.
+        if (!all && isFolder(contentType)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it is a folder, use --all to include\n`));
             continue;
         }
         // Build the unfiltered array
         allContentTypes.push(contentType);
         // Skip based upon base type filters
-        if (!shouldInclude(typeToSlug(contentType.baseType), baseTypes.map(x => typeToSlug(x)), excludeBaseTypes.map(x => typeToSlug(x)))) {
+        if (!shouldInclude(contentType.baseType, baseTypes, excludeBaseTypes, true)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it has a restricted base type: ${contentType.baseType}\n`));
             continue;
         }
         // Skip based upon type filters
-        if (!shouldInclude(contentType.key, types, excludeTypes)) {
+        if (!shouldInclude(contentType.key, types, excludeTypes, true)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it has a restricted type: ${contentType.key}\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.key} as it is a restricted type (${types.join(', ')})(${excludeTypes.join(', ')})\n`));
             continue;
         }
         // Skip based upon system filter
-        if (contentType.source == 'system' && !allowSystem) {
+        if (!allowSystem && isSystemType(contentType)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${contentType.key} due to it being a system type\n`));
             continue;
@@ -322,13 +459,6 @@ async function getContentTypes(client, args, pageSize = 25, allowSystem = false,
         process.stdout.write(chalk.gray(`${figures.arrowRight} Applied content type filters, reduced from ${allContentTypes.length} to ${filteredContentTypes.length} items\n`));
     return { all: allContentTypes, contentTypes: filteredContentTypes };
 }
-function shouldInclude(value, allow, disallow) {
-    // Item is allowed when either allow is not set, an empty array or has the value
-    const isAllowed = !Array.isArray(allow) || allow.length === 0 || allow.includes(value);
-    // Item is disallowed when and the array is set and includes the value
-    const isDisallowed = Array.isArray(disallow) && disallow.includes(value);
-    return isAllowed && !isDisallowed;
-}
 /**
  * Retrieve all content types as an Async Generator, allowing processing of entries whilest they are being loaded from the CMS instance.
  *
@@ -340,25 +470,28 @@ async function* getAllContentTypes(client, debug = false, pageSize = 25) {
     process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Content Types from Optimizely CMS\n`));
     let requestPageSize = pageSize;
     let requestPageIndex = 0;
-    let totalItemCount = 0;
-    let totalPages = 0;
+    let totalItemCount;
+    let totalPages;
     do {
-        const resultsPage = await client.contentTypesList({ query: { pageIndex: requestPageIndex, pageSize: requestPageSize } }).catch((_) => {
+        const resultsPage = await client.contentTypesList({ query: { pageIndex: requestPageIndex, pageSize: requestPageSize } }).catch(() => {
             return {
                 items: [],
                 totalItemCount: 0,
+                totalCount: 0,
                 pageIndex: requestPageIndex,
                 pageSize: requestPageSize
             };
         });
+        console.log(resultsPage);
         // Calculate fields for next page
-        totalItemCount = resultsPage.totalItemCount ?? 0;
+        //@ts-expect-error  There's a difference between the SaaS & PaaS API, hence we're ignoring the next line
+        totalItemCount = resultsPage.totalItemCount ?? resultsPage.totalCount ?? 0;
         requestPageSize = resultsPage.pageSize;
         requestPageIndex = resultsPage.pageIndex + 1;
         totalPages = Math.ceil(totalItemCount / requestPageSize);
         // Debug output
         if (debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched contentTypes page ${requestPageIndex} of ${totalPages} (${requestPageSize} items per page)\n`));
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched contentTypes page ${requestPageIndex} of ${totalPages} (${requestPageSize} items per page, ${totalItemCount} items available)\n`));
         // Yield items
         for (const contentType of (resultsPage.items ?? [])) {
             yield contentType;
@@ -376,50 +509,60 @@ const stylesBuilder = yargs => {
     return newArgs;
 };
 async function getStyles(client, args, pageSize = 25) {
-    if (client.runtimeCmsVersion == OptiCmsVersion.CMS12)
-        return { all: [], styles: [] };
-    const { _config: cfg, excludeBaseTypes, excludeTypes, excludeNodeTypes, excludeTemplates, baseTypes, types, nodes, templates, templateTypes } = parseArgs(args);
+    const { _config: cfg, excludeBaseTypes: disallowBaseTypes, excludeTypes: disallowTypes, excludeNodeTypes: disallowNodeTypes, excludeTemplates: disallowTemplates, baseTypes: allowBaseTypes, types: allowTypes, nodes: allowNodeTypes, templates: allowTemplates, templateTypes: baseAllowTemplateTypes } = parseArgs(args);
     process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Style-Definitions from Optimizely CMS\n`));
+    const allowTemplateTypes = [];
+    if (!Array.isArray(baseAllowTemplateTypes) || baseAllowTemplateTypes.length === 0) {
+        if (isNonEmptyArray(allowBaseTypes)) {
+            console.log('BT', allowBaseTypes);
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Base picking filter is active, adjusting template type filter to pick templates targeting a base type\n`));
+            allowTemplateTypes.push('base');
+        }
+        if (isNonEmptyArray(allowNodeTypes)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Node type filter active, adjusting template type filter\n`));
+            allowTemplateTypes.push('node');
+        }
+        if (isNonEmptyArray(allowTypes)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Component type filter active, adjusting template type filter\n`));
+            allowTemplateTypes.push('component');
+        }
+    }
+    else {
+        allowTemplateTypes.push(...baseAllowTemplateTypes);
+    }
     const allDisplayTemplates = [];
     const filteredDisplayTemplates = [];
     for await (const displayTemplate of getAllStyles(client, cfg.debug, pageSize)) {
         allDisplayTemplates.push(displayTemplate);
-        const templateType = displayTemplate.baseType ? 'base' : displayTemplate.nodeType ? 'node' : displayTemplate.contentType ? 'component' : 'unknown';
-        if (isExcluded(displayTemplate.key, excludeTemplates, templates)) {
+        const templateType = getDisplayTemplateType(displayTemplate);
+        if (!shouldInclude(displayTemplate.key, allowTemplates, disallowTemplates)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style defintion key filtering active\n`));
             continue;
         }
-        if (isExcluded(templateType, [], templateTypes)) {
+        if (!shouldInclude(templateType, allowTemplateTypes)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style type filtering is active\n`));
             continue;
         }
-        if (displayTemplate.baseType && isExcluded(displayTemplate.baseType, excludeBaseTypes, baseTypes)) {
+        if (templateType === 'base' && !shouldInclude(displayTemplate.baseType, allowBaseTypes, disallowBaseTypes)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is defined at base type level and base type filtering is active\n`));
             continue;
         }
-        if (displayTemplate.contentType && isExcluded(displayTemplate.contentType, excludeTypes, types)) {
+        if (templateType === 'component' && !shouldInclude(displayTemplate.contentType, allowTypes, disallowTypes)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is defined at component type level and component type filtering is active\n`));
             continue;
         }
-        if (templateType != 'component' && types.length > 0) {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is targeting the ${templateType} level and component type selection is active\n`));
-            continue;
-        }
-        if (displayTemplate.nodeType && isExcluded(displayTemplate.nodeType, excludeNodeTypes, nodes)) {
+        if (templateType === 'node' && !shouldInclude(displayTemplate.nodeType, allowNodeTypes, disallowNodeTypes)) {
             if (cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is defined at node type level and node type filtering is active\n`));
             continue;
         }
-        if (templateType != 'node' && nodes.length > 0) {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is targeting the ${templateType} level and node type selection is active\n`));
-            continue;
-        }
         filteredDisplayTemplates.push(displayTemplate);
     }
     if (cfg.debug)
@@ -430,14 +573,12 @@ async function getStyles(client, args, pageSize = 25) {
     };
 }
 async function* getAllStyles(client, debug = false, pageSize = 5) {
-    if (client.runtimeCmsVersion == OptiCmsVersion.CMS12)
-        return;
     let requestPageSize = pageSize;
     let requestPageIndex = 0;
-    let totalItemCount = 0;
-    let totalPages = 0;
+    let totalItemCount;
+    let totalPages;
     do {
-        const resultsPage = await client.displayTemplatesList({ query: { pageIndex: requestPageIndex, pageSize: requestPageSize } }).catch((_) => {
+        const resultsPage = await client.displayTemplatesList({ query: { pageIndex: requestPageIndex, pageSize: requestPageSize } }).catch(() => {
             return {
                 items: [],
                 totalItemCount: 0,
@@ -446,39 +587,298 @@ async function* getAllStyles(client, debug = false, pageSize = 5) {
             };
         });
         // Calculate fields for next page
-        totalItemCount = resultsPage.totalItemCount ?? 0;
+        //@ts-expect-error Difference between PaaS & SaaS
+        totalItemCount = resultsPage.totalItemCount ?? resultsPage.totalCount ?? 0;
         requestPageSize = resultsPage.pageSize;
         requestPageIndex = resultsPage.pageIndex + 1;
         totalPages = Math.ceil(totalItemCount / requestPageSize);
         // Debug output
         if (debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched displayTemplates page ${requestPageIndex} of ${totalPages} (${requestPageSize} items per page)\n`));
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched displayTemplates page ${requestPageIndex} of ${totalPages} (${requestPageSize} items per page, ${totalItemCount} items available)\n`));
         // Yield items
         for (const displayTemplate of (resultsPage.items ?? [])) {
             yield displayTemplate;
         }
     } while (requestPageIndex < totalPages);
 }
-function isExcluded(value, exclusions, inclusions) {
-    if (value == undefined || value == null)
-        return false;
-    return exclusions.includes(value) || (inclusions.length > 0 && !inclusions.includes(value));
-}
-async function getStyleFilePath(definition, opts) {
-    if (definition.nodeType)
-        return `nodes/${definition.nodeType}/${definition.key}/${definition.key}.opti-style.json`;
-    if (definition.baseType)
-        return `${definition.baseType}/styles/${definition.key}/${definition.key}.opti-style.json`;
-    if (definition.contentType) {
-        if (opts?.contentBaseType)
-            return `${opts?.contentBaseType}/${definition.contentType}/${definition.key}.opti-style.json`;
-        if (!opts?.client)
-            throw new Error("Neither the contentBaseType, nor the ApiClient has been provided for a definition for a specific ContentType - unable to generate the path");
-        const contentType = await opts.client.contentTypesGet({ path: { key: definition.contentType } }).catch(() => undefined);
-        if (contentType)
-            return `${contentType.baseType}/${definition.contentType}/${definition.key}.opti-style.json`;
+class TypeFilesList extends Map {
+    getDisplayTemplateByKey(displayTemplateKey) {
+        for (const groupKey of this.keys()) {
+            const templates = this.get(groupKey)?.templates || [];
+            const displayTemplate = templates.find(x => x.key === displayTemplateKey);
+            if (displayTemplate)
+                return displayTemplate.data;
+        }
+        return undefined;
+    }
+    getDisplayTemplatePathsByKey(displayTemplateKey) {
+        for (const identifier of this.keys()) {
+            const groupInfo = this.get(identifier);
+            const templates = groupInfo?.templates || [];
+            const helperFile = groupInfo?.filePath;
+            const helperFolder = groupInfo?.fileFolder;
+            const info = templates.find(x => x.key === displayTemplateKey);
+            if (info)
+                return {
+                    styleFile: info.file,
+                    styleFolder: info.folder,
+                    identifier,
+                    helperFile,
+                    helperFolder
+                };
+        }
+        return undefined;
+    }
+}
+async function toTypeFilesList(displayTemplates, client, basePath) {
+    if (isNonEmptyArray(displayTemplates)) {
+        // Get all content types we need to get the type file lists
+        const targetContentTypes = (await Promise.allSettled(displayTemplates.map(async (displayTemplate) => {
+            if (!displayTemplate.contentType)
+                return undefined;
+            return client.contentTypesGet({ path: { key: displayTemplate.contentType } });
+        }))).map(x => x.status == 'fulfilled' ? x.value : undefined).filter(isDefined);
+        // Simple helper to get the base type from the list
+        function getBaseTypeOf(contentTypeKey) {
+            if (!contentTypeKey)
+                return undefined;
+            return targetContentTypes.find(x => x.key === contentTypeKey)?.baseType;
+        }
+        // Now reduce the list into the Map we need
+        return displayTemplates.reduce((aggregator, displayTemplate) => {
+            const contentTypeBaseType = getBaseTypeOf(displayTemplate.contentType);
+            const { identifier, helperFile, helperFolder, styleFile, styleFolder } = getStyleFilePathsSync(displayTemplate, contentTypeBaseType, basePath, true);
+            const info = aggregator.get(identifier) ?? { filePath: helperFile, fileFolder: helperFolder, templates: [] };
+            info.templates.push({ key: displayTemplate.key, file: styleFile, data: displayTemplate, folder: styleFolder });
+            aggregator.set(identifier, info);
+            return aggregator;
+        }, new TypeFilesList());
     }
-    throw new Error(`Unable to resolve the target for the DisplayTemplate: ${definition.key}`);
+    return new TypeFilesList();
+}
+
+function normalizeMergePatch(value, omitKeys, requiredKeys = [], requiredSource, atomicKeys = []) {
+    if (value === undefined || value === null)
+        return null;
+    if (Array.isArray(value))
+        return value.map(item => normalizeMergePatch(item, omitKeys));
+    if (typeof value !== 'object')
+        return value;
+    const output = Object.entries(value).reduce((acc, [key, entry]) => {
+        if (!omitKeys.includes(key)) {
+            if (atomicKeys.includes(key) && requiredSource !== undefined) {
+                // Include the full value from newValue verbatim — do not recurse into the diff
+                acc[key] = requiredSource[key];
+            }
+            else {
+                acc[key] = normalizeMergePatch(entry, omitKeys);
+            }
+        }
+        return acc;
+    }, {});
+    const withRequiredKeys = requiredKeys.reduce((acc, key) => {
+        if (requiredSource && !Object.keys(acc).includes(key))
+            acc[key] = requiredSource[key];
+        return acc;
+    }, output);
+    return withRequiredKeys;
+}
+/**
+ * Computes a JSON Merge Patch (RFC 7396) that transforms `currentValue` into `newValue`.
+ *
+ * The resulting patch can be sent directly as the request body of an `application/merge-patch+json`
+ * request. Changed and added properties are included with their new value; removed properties are
+ * included with a `null` value (as required by RFC 7396); unchanged properties are omitted entirely.
+ *
+ * @see https://datatracker.ietf.org/doc/html/rfc7396
+ *
+ * @example Basic usage
+ * ```ts
+ * const current = { name: 'Alice', age: 30, role: 'user' }
+ * const updated = { name: 'Alice', age: 31 }
+ *
+ * generatePatch(current, updated)
+ * // => { age: 31, role: null }
+ * //   `age` is replaced, `role` is removed (null), `name` is unchanged (omitted)
+ * ```
+ *
+ * @example Excluding keys from the patch
+ * ```ts
+ * const current = { id: '123', name: 'Alice', version: 1 }
+ * const updated = { id: '123', name: 'Bob',   version: 2 }
+ *
+ * generatePatch(current, updated, { readonlyFields: ['id', 'version'] })
+ * // => { name: 'Bob' }
+ * //   `id` and `version` are excluded even though they are present in the diff
+ * ```
+ *
+ * @example Always include required fields
+ * ```ts
+ * const current = { id: '123', name: 'Alice', version: 1 }
+ * const updated = { id: '123', name: 'Alice', version: 2 }
+ *
+ * generatePatch(current, updated, { requiredFields: ['id'] })
+ * // => { id: '123', version: 2 }
+ * //   `id` is included even though it did not change
+ * ```
+ *
+ * @example Nested objects
+ * ```ts
+ * const current = { address: { city: 'Amsterdam', zip: '1000AA' } }
+ * const updated = { address: { city: 'Utrecht' } }
+ *
+ * generatePatch(current, updated)
+ * // => { address: { city: 'Utrecht', zip: null } }
+ * ```
+ *
+ * @param currentValue - The current state of the resource.
+ * @param newValue     - The desired state of the resource.
+ * @param options      - Optional configuration.
+ * @param options.readonlyFields - Keys that should never appear in the generated patch,
+ *                           regardless of whether they changed.
+ * @param options.requiredFields - Keys that should always appear in the generated patch,
+ *                           using values from `newValue`.
+ * @param options.atomicFields  - Keys whose values are always included verbatim when they
+ *                           change, rather than being recursively patched. Use for
+ *                           record- or dictionary-typed properties (e.g.
+ *                           `{ [key: string]: SomeObject }`) and arrays of objects.
+ * @returns A {@link MergePatch} object ready to be serialised as an `application/merge-patch+json` body.
+ */
+function generatePatch(currentValue, newValue, options = {}) {
+    const requiredKeys = options.requiredFields ?? [];
+    const omitKeys = (options.readonlyFields ?? []).filter(key => !requiredKeys.includes(key));
+    const atomicKeys = (options.atomicFields ?? []);
+    const patch = diff(currentValue, newValue);
+    return normalizeMergePatch(patch, omitKeys, requiredKeys, newValue, atomicKeys);
+}
+/**
+ * Extracts all field paths from a {@link MergePatch} as dot-separated strings.
+ * Nested objects are flattened recursively; leaf values (including `null`) produce a path entry.
+ *
+ * @example
+ * ```ts
+ * getPatchFields({ a: { b: 0 }, c: 'value' })
+ * // => ['a.b', 'c']
+ * ```
+ *
+ * @param patch  - The merge patch to extract fields from.
+ * @param prefix - Internal prefix used during recursion; omit when calling directly.
+ * @returns An array of dot-separated field path strings.
+ */
+function getPatchFields(patch, prefix = '') {
+    return Object.entries(patch).flatMap(([key, value]) => {
+        const path = prefix ? `${prefix}.${key}` : key;
+        return typeof value === 'object' && value !== null && !Array.isArray(value)
+            ? getPatchFields(value, path)
+            : [path];
+    });
+}
+
+const StylesPushCommand = {
+    command: "styles:push",
+    describe: "Push Visual Builder style definitions into the CMS (create/replace)",
+    builder: (yargs) => {
+        yargs.option('excludeTemplates', { alias: 'e', description: "Exclude these templates", string: true, type: 'array', demandOption: false, default: [] });
+        yargs.option("templates", { alias: 't', description: "Select only these templates", string: true, type: 'array', demandOption: false, default: [] });
+        return yargs;
+    },
+    handler: async (args) => {
+        const { _config: cfg, excludeTemplates, templates, ...opts } = parseArgs(args);
+        const client = createCmsClient(args);
+        const { styles: displayTemplates } = await getStyles(client, {
+            all: false,
+            baseTypes: [],
+            excludeBaseTypes: [],
+            excludeNodeTypes: [],
+            excludeTemplates: [],
+            excludeTypes: [],
+            nodes: [],
+            templates: [],
+            templateTypes: [],
+            types: [],
+            ...args
+        }, 50);
+        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pushing (create/replace) DisplayStyles into Optimizely CMS\n`));
+        const styleDefinitionFiles = await glob("./**/*.opti-style.json", {
+            cwd: opts.components
+        });
+        const results = (await Promise.allSettled(styleDefinitionFiles.map(async (styleDefinitionFile) => {
+            const filePath = path.normalize(path.join(opts.components, styleDefinitionFile));
+            const styleDefinition = tryReadJsonFile(filePath, cfg.debug);
+            const styleKey = styleDefinition.key;
+            if (!styleKey) {
+                process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} The style definition in ${path.relative(opts.path, filePath)} does not have a key defined\n`));
+                return undefined;
+            }
+            if (excludeTemplates.includes(styleKey))
+                return undefined; // Skip excluded styles
+            if (templates.length > 0 && !templates.includes(styleKey))
+                return undefined; // Only include defined styles, if any
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Pushing: ${styleKey}\n`));
+            // Try to fetch the current template
+            const currentTemplate = displayTemplates.find(dt => dt.key === styleKey);
+            // Create / Replace the current template
+            const newTemplate = await (currentTemplate ? (async () => {
+                const patch = generatePatch(currentTemplate, styleDefinition, {
+                    readonlyFields: ['key', 'created', 'lastModified', 'createdBy', 'lastModifiedBy'],
+                    atomicFields: ['settings']
+                });
+                if (!path || Object.entries(patch).length === 0)
+                    return currentTemplate;
+                return client.displayTemplatesPatch({ path: { key: styleKey }, body: patch });
+            })() :
+                client.displayTemplatesCreate({ body: styleDefinition }));
+            const missedFields = newTemplate ? generatePatch(newTemplate, currentTemplate, {
+                readonlyFields: ['key', 'created', 'lastModified', 'createdBy', 'lastModifiedBy']
+            }) : undefined;
+            if (missedFields && Object.keys(missedFields).length > 0)
+                throw new Error(`The Display template ${styleKey} failed to update properties: ${getPatchFields(missedFields).join('; ')}`);
+            return newTemplate;
+        })));
+        const styles = new Table({
+            head: [
+                chalk.yellow(chalk.bold("Name")),
+                chalk.yellow(chalk.bold("Key")),
+                chalk.yellow(chalk.bold("Default")),
+                chalk.yellow(chalk.bold("Target"))
+            ],
+            colWidths: [31, 20, 9, 20],
+            colAligns: ["left", "left", "center", "left"]
+        });
+        results.forEach(result => {
+            if (result.status === 'fulfilled') {
+                if (isDefined(result.value)) {
+                    const tpl = result.value;
+                    styles.push([
+                        tpl.displayName,
+                        tpl.key,
+                        tpl.isDefault ? figures.tick : figures.cross,
+                        tpl.contentType ? `${tpl.contentType} (C)` : tpl.baseType ? `${tpl.baseType} (B)` : `${tpl.nodeType} (N)`
+                    ]);
+                }
+                else {
+                    process.stderr.write(`DisplayTemplate pushed without errors, but no result was returned.\n`);
+                }
+            }
+            else {
+                process.stderr.write(`Error processing DisplayTemplate: ${result.reason ?? "n"}\n`);
+            }
+        });
+        process.stdout.write(styles.toString() + "\n");
+        process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+    }
+};
+function tryReadJsonFile(filePath, debug = false) {
+    try {
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Reading style definition from ${filePath}\n`));
+        return JSON.parse(fs.readFileSync(filePath, { encoding: 'utf-8' }));
+    }
+    catch {
+        process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} Error while reading ${filePath}\n`));
+    }
+    return undefined;
 }
 
 const StylesListCommand = {
@@ -486,10 +886,6 @@ const StylesListCommand = {
     describe: "List Visual Builder style definitions from the CMS",
     handler: async (args) => {
         const client = createCmsClient(args);
-        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
-            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
-            return;
-        }
         const { all: results } = await getStyles(client, { ...args, excludeBaseTypes: [], excludeNodeTypes: [], excludeTemplates: [], excludeTypes: [], baseTypes: [], nodes: [], templates: [], types: [], templateTypes: [], all: false });
         const styles = new Table({
             head: [
@@ -514,6 +910,14 @@ const StylesListCommand = {
     }
 };
 
+function ucFirst(current) {
+    if (typeof current != 'string')
+        throw new Error("Only strings can be transformed");
+    if (current == "")
+        return current;
+    return current[0]?.toUpperCase() + current.substring(1);
+}
+
 const StylesPullCommand = {
     command: "styles:pull",
     describe: "Create Visual Builder style definitions from the CMS",
@@ -524,129 +928,64 @@ const StylesPullCommand = {
         return newYargs;
     },
     handler: async (args) => {
-        const { _config: cfg, components: basePath, force, definitions } = parseArgs(args);
+        const { _config: cfg, components: basePath, force} = parseArgs(args);
         const client = createCmsClient(args);
-        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
-            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
-            return;
-        }
         const { styles: filteredResults } = await getStyles(client, args);
-        //#region Create & Write opti-style.json files
         process.stdout.write(chalk.gray(`${figures.arrowRight} Start creating .opti-style.json files\n`));
-        const typeFiles = {};
-        const updatedTemplates = (await Promise.all(filteredResults.map(async (displayTemplate) => {
-            // Create metadata
-            const { targetType, styleFilePath: filePath, helperFilePath: helperPath } = await createTemplateMetadata(client, displayTemplate, basePath, true);
-            // Build local style data
-            const outputTemplate = { ...displayTemplate };
-            if (outputTemplate.createdBy)
-                delete outputTemplate.createdBy;
-            if (outputTemplate.lastModifiedBy)
-                delete outputTemplate.lastModifiedBy;
-            if (outputTemplate.created)
-                delete outputTemplate.created;
-            if (outputTemplate.lastModified)
-                delete outputTemplate.lastModified;
-            // Write file to disk
-            if (fs.existsSync(filePath)) {
-                if (!force) {
-                    if (cfg.debug)
-                        process.stdout.write(chalk.gray(`${figures.cross} Skipping style file for ${displayTemplate.key} - File already exists\n`));
-                }
-                else {
-                    if (cfg.debug) {
-                        process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting style file for ${displayTemplate.key}\n`));
-                    }
-                    fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
-                }
-            }
-            else {
-                if (cfg.debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Creating style file for ${displayTemplate.key} in ${filePath}\n`));
-                fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
+        const styleFiles = await toTypeFilesList(filteredResults, client, basePath);
+        const updatedTemplates = [];
+        for (const groupIdentifier of styleFiles.keys()) {
+            const displayTemplateGroup = styleFiles.get(groupIdentifier);
+            for (const { file: filePath, data: displayTemplate } of (displayTemplateGroup?.templates || [])) {
+                // Write JSON to disk
+                const updatedJson = await createDisplayTemplateFile(displayTemplate, filePath, force, cfg.debug);
+                if (updatedJson)
+                    updatedTemplates.push(displayTemplate.key);
             }
-            // Ensure we're tracking all files
-            if (!typeFiles[targetType]) {
-                typeFiles[targetType] = {
-                    filePath: helperPath,
-                    templates: []
-                };
-            }
-            typeFiles[targetType].templates.push({ key: displayTemplate.key, file: filePath, data: displayTemplate });
-            return displayTemplate.key;
-        }))).filter(x => x);
-        //#endregion
-        //#region Create needed definition files
-        if (definitions)
-            await createDisplayTemplateHelpers(typeFiles);
-        //#endregion
+            // Write template to disk
+            void await createDisplayTemplateHelper(displayTemplateGroup, groupIdentifier, force, cfg.debug);
+        }
         process.stdout.write(chalk.green(chalk.bold(figures.tick + ` Created/updated style definitions for ${updatedTemplates.join(', ')}`)) + "\n");
     }
 };
-function ucFirst$1(input) {
-    if (typeof (input) != 'string' || input.length < 1)
-        return input;
-    return input[0].toUpperCase() + input.substring(1);
-}
-async function createTemplateMetadata(client, displayTemplate, basePath, createPaths = true) {
-    let itemPath = undefined;
-    let targetType;
-    let typesPath;
-    const targetPrefix = getTemplateTarget(displayTemplate);
-    switch (targetPrefix) {
-        case 'node':
-            itemPath = path.join(basePath, 'nodes', displayTemplate.nodeType, displayTemplate.key);
-            typesPath = path.join(basePath, 'nodes', displayTemplate.nodeType);
-            targetType = targetPrefix + '/' + displayTemplate.nodeType;
-            break;
-        case 'base': {
-            const baseTypeSlug = baseTypeToSlug(displayTemplate.baseType);
-            itemPath = path.join(basePath, baseTypeSlug, 'styles', displayTemplate.key);
-            typesPath = path.join(basePath, baseTypeSlug, 'styles');
-            targetType = targetPrefix + '/' + baseTypeSlug;
-            break;
+async function createDisplayTemplateFile(displayTemplate, filePath, force = false, debug = false) {
+    let updated = false;
+    // Build local style data
+    const outputTemplate = { ...displayTemplate };
+    if (outputTemplate.createdBy)
+        delete outputTemplate.createdBy;
+    if (outputTemplate.lastModifiedBy)
+        delete outputTemplate.lastModifiedBy;
+    if (outputTemplate.created)
+        delete outputTemplate.created;
+    if (outputTemplate.lastModified)
+        delete outputTemplate.lastModified;
+    // Write file to disk
+    if (fs.existsSync(filePath)) {
+        if (!force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.cross} Skipping style file for ${displayTemplate.key} - File already exists\n`));
         }
-        case 'content': {
-            const contentType = await client.contentTypesGet({ path: { key: displayTemplate.contentType ?? '-' } });
-            const baseTypeSlug = baseTypeToSlug(contentType.baseType);
-            itemPath = path.join(basePath, baseTypeSlug, contentType.key);
-            typesPath = path.join(basePath, baseTypeSlug, contentType.key);
-            targetType = targetPrefix + '/' + displayTemplate.contentType;
-            break;
+        else {
+            if (debug) {
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting style file for ${displayTemplate.key}\n`));
+            }
+            fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
+            updated = true;
         }
-        default:
-            throw new Error("Unsupported display template type");
     }
-    if (createPaths)
-        void await fsAsync.mkdir(itemPath, { recursive: true }).catch(e => {
-            console.log(e);
-        });
-    const styleFilePath = path.join(itemPath, `${displayTemplate.key}.opti-style.json`);
-    const helperFilePath = path.join(typesPath, 'displayTemplates.ts');
-    return { key: displayTemplate.key, itemPath, typesPath, targetType, styleFilePath, helperFilePath };
-}
-function baseTypeToSlug(baseType) {
-    return baseType.replace(/^\_*/, "").toLowerCase();
-}
-function getTemplateTarget(displayTemplate) {
-    if (displayTemplate.baseType && displayTemplate.baseType.length > 0)
-        return 'base';
-    if (displayTemplate.nodeType && displayTemplate.nodeType.length > 0)
-        return 'node';
-    if (displayTemplate.contentType && displayTemplate.contentType.length > 0)
-        return 'content';
-    return null;
-}
-async function createDisplayTemplateHelpers(typeFiles, force = false, debug = false) {
-    process.stdout.write(chalk.gray(`${figures.arrowRight} Start creating displayTemplates.ts files\n`));
-    for (const targetId in typeFiles) {
-        await createDisplayTemplateHelper(typeFiles[targetId], targetId, force, debug);
+    else {
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Creating style file for ${displayTemplate.key} in ${filePath}\n`));
+        fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
+        updated = true;
     }
+    return updated;
 }
 async function createDisplayTemplateHelper(typeFile, typeFileId, force = false, debug = false) {
     const prefix = '//not-modified - Remove this line when making change to prevent it from being updated by the CLI tools';
     const { filePath: typeFilePath, templates } = typeFile;
-    const shouldWrite = await fsAsync.readFile(typeFilePath, { encoding: "utf-8" }).then(data => data.startsWith('//not-modified')).catch((e) => {
+    const shouldWrite = await fs$1.readFile(typeFilePath, { encoding: "utf-8" }).then(data => data.startsWith('//not-modified')).catch((e) => {
         if (e?.code === 'ENOENT')
             return true;
         if (debug)
@@ -680,20 +1019,20 @@ async function createDisplayTemplateHelper(typeFile, typeFileId, force = false,
         typeContents.push(`export type ${displayTemplate.key}Props = LayoutProps<typeof ${displayTemplate.key}Styles>`);
         typeContents.push(`export type ${displayTemplate.key}Keys = LayoutPropsSettingKeys<${displayTemplate.key}Props>`);
         typeContents.push(`export type ${displayTemplate.key}Options<K extends ${displayTemplate.key}Keys> = LayoutPropsSettingValues<${displayTemplate.key}Props, K>`);
-        typeContents.push(`export type ${displayTemplate.key}ComponentProps<DT extends Record<string, any> = Record<string, any>> = Omit<CmsComponentProps<DT, ${displayTemplate.key}Props>,'children'> & JSX.IntrinsicElements['div']`);
-        typeContents.push(`export type ${displayTemplate.key}Component<DT extends Record<string, any> = Record<string, any>> = ComponentType<${displayTemplate.key}ComponentProps<DT>>`);
+        typeContents.push(`export type ${displayTemplate.key}ComponentProps<DT extends Record<string, unknown> = Record<string, unknown>> = Omit<CmsComponentProps<DT, ${displayTemplate.key}Props>,'children'> & JSX.IntrinsicElements['div']`);
+        typeContents.push(`export type ${displayTemplate.key}Component<DT extends Record<string, unknown> = Record<string, unknown>> = ComponentType<${displayTemplate.key}ComponentProps<DT>>`);
         typeContents.push('');
         props.push(`${displayTemplate.key}Props`);
         if (!typeId)
             typeId = displayTemplate.nodeType ?? displayTemplate.baseType ?? displayTemplate.contentType;
     });
     if (typeId) {
-        typeId = ucFirst$1(typeId);
+        typeId = ucFirst(typeId);
         typeContents.push(`export type ${typeId}LayoutProps = ${props.join(' | ')}
 export type ${typeId}LayoutKeys = LayoutPropsSettingKeys<${typeId}LayoutProps>
 export type ${typeId}LayoutOptions<K extends ${typeId}LayoutKeys> = LayoutPropsSettingValues<${typeId}LayoutProps,K>
-export type ${typeId}ComponentProps<DT extends Record<string, any> = Record<string, any>> = Omit<CmsComponentProps<DT, ${typeId}LayoutProps>,'children'> & JSX.IntrinsicElements['div']
-export type ${typeId}Component<DT extends Record<string, any> = Record<string, any>> = ComponentType<${typeId}ComponentProps<DT>>`);
+export type ${typeId}ComponentProps<DT extends Record<string, unknown> = Record<string, unknown>> = Omit<CmsComponentProps<DT, ${typeId}LayoutProps>,'children'> & JSX.IntrinsicElements['div']
+export type ${typeId}Component<DT extends Record<string, unknown> = Record<string, unknown>> = ComponentType<${typeId}ComponentProps<DT>>`);
         const defaultTemplate = templates.find(t => t.data.isDefault);
         if (defaultTemplate) {
             typeContents.push(`
@@ -710,7 +1049,7 @@ export function is${t.data.key}Props(props?: ${typeId}LayoutProps | null) : prop
 }`);
         });
     }
-    void await fsAsync.writeFile(typeFilePath, prefix + "\n" + imports.join("\n") + "\n\n" + typeContents.join("\n"));
+    void await fs$1.writeFile(typeFilePath, prefix + "\n" + imports.join("\n") + "\n\n" + typeContents.join("\n"));
     return true;
 }
 
@@ -724,10 +1063,6 @@ const StylesCreateCommand = {
     handler: async (args) => {
         const { components: basePath } = parseArgs(args);
         const client = createCmsClient(args);
-        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
-            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
-            return;
-        }
         const allowedBaseTypes = ['section', 'component', 'experience'];
         // Prepare
         process.stdout.write(chalk.yellowBright(chalk.bold(`Reading current information from Optimizely CMS\n`)));
@@ -776,10 +1111,10 @@ const StylesCreateCommand = {
         definition[type] = typeId;
         definition['settings'] = {};
         const contentBaseType = type == "contentType" ? contentTypes.filter(x => x.key == typeId).map(x => x.baseType).at(0) : undefined;
-        const styleFilePath = await getStyleFilePath(definition, { contentBaseType, client });
-        if (!fs.existsSync(path.join(basePath, path.dirname(styleFilePath))))
-            fs.mkdirSync(path.join(basePath, path.dirname(styleFilePath)), { recursive: true });
-        if (fs.existsSync(path.join(basePath, styleFilePath))) {
+        const { styleFile: styleFilePath, styleFolder: styleFileFolder } = await getStyleFilePaths(definition, { contentBaseType, client, basePath });
+        if (!fs.existsSync(styleFileFolder))
+            fs.mkdirSync(styleFileFolder, { recursive: true });
+        if (fs.existsSync(styleFilePath)) {
             const overwrite = await confirm({ message: "The style definition file already exists, do you want to overwrite it?" });
             if (!overwrite) {
                 process.stdout.write("\n");
@@ -788,8 +1123,8 @@ const StylesCreateCommand = {
             }
         }
         // @ToDo: Add properties
-        fs.writeFileSync(path.join(basePath, styleFilePath), JSON.stringify(definition, undefined, 4));
-        process.stdout.write(chalk.yellowBright(chalk.bold(`\nWritten style defintion template to: ${path.normalize(path.join(basePath, styleFilePath))}\n`)));
+        fs.writeFileSync(styleFilePath, JSON.stringify(definition, undefined, 4));
+        process.stdout.write(chalk.yellowBright(chalk.bold(`\nWritten style defintion template to: ${path.normalize(styleFilePath)}\n`)));
         if (await confirm({ message: "Do you want to publish this style into Optimizely CMS?" })) {
             const response = await client.displayTemplatesCreate({ body: definition }).catch(_ => undefined);
             if (!response) {
@@ -811,6 +1146,91 @@ const StylesCreateCommand = {
     }
 };
 
+const StylesDeleteCommand = {
+    command: "styles:delete",
+    describe: "Remove Visual Builder style definitions from the CMS",
+    builder: (yargs) => {
+        const newYargs = stylesBuilder(yargs);
+        newYargs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
+        newYargs.option('withStyleFile', { alias: 'w', description: "Delete the .opti-style.json file as weill", boolean: true, type: 'boolean', demandOption: false, default: true });
+        newYargs.option("definitions", { alias: 'u', description: "Update typescript definitions", boolean: true, type: 'boolean', demandOption: false, default: true });
+        return newYargs;
+    },
+    handler: async (args) => {
+        const { components: basePath } = parseArgs(args);
+        const client = createCmsClient(args);
+        const { styles, all: allStyles } = await getStyles(client, args, 100);
+        if (styles.findIndex(x => x.isDefault) >= 0)
+            process.stdout.write(chalk.redBright(chalk.bold((`\n${figures.warning} You are deleting a default Display Template this may lead to unpredicted behavior.\n\n`))));
+        if (!args.force) {
+            process.stdout.write(`This will remove the following display templates\n`);
+            for (const style of styles) {
+                process.stdout.write(` ${figures.arrowRight} ${style.displayName || style.key} [Key: ${style.key}; Default: ${style.isDefault ? 'Yes' : 'No'}]\n`);
+            }
+            process.stdout.write(`\nRun with -f to actually preform removal\n`);
+            return;
+        }
+        const keysToDelete = styles.map(displayTemplate => displayTemplate.key);
+        const styleHelpers = await toTypeFilesList(allStyles, client, basePath);
+        for (const displayTemplate of styles) {
+            const { styleFile: styleFilePath, styleFolder: itemPath, identifier: targetType, helperFolder: typesPath } = styleHelpers.getDisplayTemplatePathsByKey(displayTemplate.key);
+            // Remove style file
+            if (args.withStyleFile) {
+                process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Removing *.opti-style.json file for ${displayTemplate.displayName} [${displayTemplate.key}]\n`));
+                await fs$1.rm(styleFilePath, { force: false, recursive: false, maxRetries: 1 }).catch((e) => {
+                    if (e?.code === 'ENOENT') // The file can't be deleted as it does not exist - that's the desired state
+                        return;
+                    throw e;
+                });
+                await fs$1.rmdir(itemPath, { recursive: false, maxRetries: 1 }).catch((e) => {
+                    if (e?.code === 'ENOTEMPTY') {
+                        process.stdout.write(chalk.yellowBright(`${figures.warning} The folder is not empty, please remove ${itemPath} manually if needed\n`));
+                        return;
+                    }
+                    else if (e?.code === 'ENOENT')
+                        return;
+                    else
+                        throw e;
+                });
+            }
+            // Remove/update typescript helper
+            if (args.definitions && styleHelpers.has(targetType)) {
+                process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Removing/updating displayTemplates.ts file for ${displayTemplate.displayName} [${displayTemplate.key}]\n`));
+                const remainingTemplates = styleHelpers[targetType].templates.filter(x => !keysToDelete.includes(x.key));
+                if (remainingTemplates.length === 0) {
+                    await fs$1.rm(styleHelpers[targetType].filePath, { force: false, recursive: false, maxRetries: 1 }).catch((e) => {
+                        if (e?.code === 'ENOENT') // The file can't be deleted as it does not exist - that's the desired state
+                            return;
+                        throw e;
+                    });
+                    await fs$1.rmdir(typesPath, { recursive: false, maxRetries: 1 }).catch((e) => {
+                        if (e?.code === 'ENOTEMPTY') {
+                            process.stdout.write(chalk.yellowBright(`${figures.warning} The folder is not empty, please remove ${typesPath} manually if needed\n`));
+                            return;
+                        }
+                        else if (e?.code === 'ENOENT')
+                            return;
+                        else
+                            throw e;
+                    });
+                }
+                else {
+                    const newEntry = {
+                        filePath: styleHelpers[targetType].filePath,
+                        templates: remainingTemplates
+                    };
+                    if (!await createDisplayTemplateHelper(newEntry, targetType, false, false))
+                        process.stdout.write(chalk.yellowBright(`${figures.warning} The display template was not updated, please update ${newEntry.filePath} manually`));
+                }
+            }
+            // Actually remove from CMS
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Removing the display template ${displayTemplate.displayName} [${displayTemplate.key}] from Optimizely CMS\n`));
+            void await client.displayTemplatesDelete({ path: { key: displayTemplate.key } });
+        }
+        process.stdout.write("\n" + chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+    }
+};
+
 const TypesPullCommand = {
     command: "types:pull",
     describe: "Pull content type definition files into the project",
@@ -820,13 +1240,13 @@ const TypesPullCommand = {
         return newArgs;
     },
     handler: async (args) => {
-        const { _config: { debug }, components: basePath, force } = parseArgs(args);
+        const { _config: { debug }, components: basePath, path: projectPath, force } = parseArgs(args);
         const client = createCmsClient(args);
         const { contentTypes } = await getContentTypes(client, args);
         const updatedTypes = contentTypes.map(contentType => {
-            const { typePath, typeFile } = getContentTypePaths(contentType, basePath);
-            if (!fs.existsSync(typePath))
-                fs.mkdirSync(typePath, { recursive: true });
+            const { path: path$1, typeFile } = getContentTypePaths(contentType, basePath);
+            if (!fs.existsSync(path$1))
+                fs.mkdirSync(path$1, { recursive: true });
             if (fs.existsSync(typeFile) && !force) {
                 if (debug)
                     process.stdout.write(chalk.yellow(`${figures.cross} Skipping type definition for ${contentType.displayName} (${contentType.key}) - File already exists\n`));
@@ -835,9 +1255,7 @@ const TypesPullCommand = {
             const outContentType = { ...contentType };
             if (outContentType.source || outContentType.source == "")
                 delete outContentType.source;
-            //if (outContentType.features) delete outContentType.features
-            //if (outContentType.usage) delete outContentType.usage
-            if (outContentType.lastModifiedBy)
+            if (outContentType.lastModifiedBy || outContentType.lastModifiedBy == "")
                 delete outContentType.lastModifiedBy;
             if (outContentType.lastModified)
                 delete outContentType.lastModified;
@@ -858,16 +1276,13 @@ const TypesPullCommand = {
                 }
             }
             if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Writing type definition for ${contentType.displayName} (${contentType.key})\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Writing type definition for ${contentType.displayName} (${contentType.key}) into ${path.relative(projectPath, path$1)}\n`));
             fs.writeFileSync(typeFile, JSON.stringify(outContentType, undefined, 2));
             return contentType.key;
         }).filter(x => x);
         process.stdout.write(chalk.green(chalk.bold(`${figures.tick} Created/updated type definitions for ${updatedTypes.join(', ')}\n`)));
     }
 };
-function isEmptyArray(toTest) {
-    return toTest === null || !Array.isArray(toTest) || toTest.length === 0;
-}
 
 const deepmerge$1 = createDeepMerge();
 async function loadSchema(client, schemaName) {
@@ -1169,14 +1584,6 @@ function getTypeFolder(list, type) {
     return list.filter(x => x.type == type).at(0);
 }
 
-function ucFirst(current) {
-    if (typeof current != 'string')
-        throw new Error("Only strings can be transformed");
-    if (current == "")
-        return current;
-    return current[0]?.toUpperCase() + current.substring(1);
-}
-
 const NextJsComponentsCommand = {
     command: "nextjs:components",
     describe: "Create the React Components for a Next.JS / Optimizely Graph structure",
@@ -1286,8 +1693,9 @@ ${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}
 
 export default ${varName}`,
     // Default Template for all section types
-    section: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { CmsEditable, type CmsComponent } from "@remkoj/optimizely-cms-react/rsc";
-import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";${displayTemplate ? `
+    section: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { OptimizelyComposition, isNode, CmsEditable, type CmsComponent } from "@remkoj/optimizely-cms-react/rsc";
+import { get${contentType.key}DataDocument, type get${contentType.key}DataQuery, SectionCompositionDataFragmentDoc } from "@/gql/graphql";
+import { getFragmentData } from "@/gql/fragment-masking";${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}${baseDisplayTemplate ? `
 import { ${baseDisplayTemplate} } from "../styles/displayTemplates";` : ''}
 
@@ -1296,19 +1704,25 @@ import { ${baseDisplayTemplate} } from "../styles/displayTemplates";` : ''}
  * ---
  * ${contentType.description}
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${(displayTemplate || baseDisplayTemplate) ? ', ' + [displayTemplate, baseDisplayTemplate].filter(x => x).join(" | ") : ''}> = ({ data${(displayTemplate || baseDisplayTemplate) ? ', layoutProps' : ''}, editProps, children }) => {
-    const componentName = '${contentType.displayName}'
-    const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
-    return <CmsEditable className="w-full border-y border-y-solid border-y-slate-900 py-2 mb-4" {...editProps}>
-        <div className="font-bold italic">{ componentName }</div>
-        <div>{ componentInfo }</div>
-        { Object.getOwnPropertyNames(data).length > 0 && <pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(data, undefined, 4) }</pre> }
-        ${(displayTemplate || baseDisplayTemplate) ? '<pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(layoutProps, undefined, 4) }</pre>' : '{/* This component doesn\'t have layout options */}'}
-        <div>{ children }</div>
-    </CmsEditable>
+export const ${varName} : CmsComponent<get${contentType.key}DataQuery${(displayTemplate || baseDisplayTemplate) ? ', ' + [displayTemplate, baseDisplayTemplate].filter(x => x).join(" | ") : ''}> = ({ data${(displayTemplate || baseDisplayTemplate) ? ', layoutProps' : ''}, editProps, children, ctx }) => {
+  // If we're rendering stand-alone we'll get a composition back, with ourself included If we're 
+  // rendering as part of an experience, we'll get the data directly. So handle both cases.
+  if (!data?._metadata && children) return children;
+
+  const componentName = '${contentType.displayName}'
+  const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
+  const composition = getFragmentData(SectionCompositionDataFragmentDoc, data)?.composition;
+  return <CmsEditable className="w-full border-y border-y-solid border-y-slate-900 py-2 mb-4" {...editProps}>
+    <div className="font-bold italic">{ componentName }</div>
+    <div>{ componentInfo }</div>
+    { Object.getOwnPropertyNames(data).length > 0 && <pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(data, undefined, 4) }</pre> }
+    ${(displayTemplate || baseDisplayTemplate) ? '<pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(layoutProps, undefined, 4) }</pre>' : '{/* This component doesn\'t have layout options */}'}
+    {children && <div>{ children }</div>}
+    {composition && isNode(composition) && <OptimizelyComposition node={composition} ctx={ctx} />}
+  </CmsEditable>
 }
 ${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
-${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+${varName}.getDataQuery = () => get${contentType.key}DataDocument
 
 export default ${varName}`,
     // Template for all page component types
@@ -1347,10 +1761,11 @@ ${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";
+    experience: (contentType, varName, displayTemplate) => `import 'server-only'
+import { type OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs";
 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 { OptimizelyComposition, isNode, CmsEditable, type ServerContext } from "@remkoj/optimizely-cms-react/rsc";${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}
 import { getSdk } from "@/gql/client"
 
@@ -1366,7 +1781,7 @@ import { getSdk } from "@/gql/client"
  * [Documentation: Customizing queries](https://github.com/remkoj/optimizely-dxp-clients/blob/main/packages/optimizely-graph-functions/docs/customizing_queries.md)
  */
 export const ${varName} : CmsComponent<get${contentType.key}DataQuery${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, ctx }) => {
-  if (ctx) ctx.editableContentIsExperience = true
+  if (ctx) (ctx as ServerContext).setEditableContentIsExperience(true)
   const composition = getFragmentData(ExperienceDataFragmentDoc, data).composition
   const componentName = '${contentType.displayName}'
   const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
@@ -1401,13 +1816,13 @@ const NextJsVisualBuilderCommand = {
         const { styles } = await getStyles(createCmsClient(args), { ...args, excludeNodeTypes: [], excludeTemplates: [], nodes: [], templates: [], templateTypes: ['node', 'base'] });
         // Process node styles
         styles.filter(x => typeof (x.nodeType) == 'string' && x.nodeType.length > 0).map(styleDefintion => {
-            const templatePath = path.join(basePath, 'nodes', styleDefintion.nodeType, styleDefintion.key);
+            const templatePath = path.join(basePath, 'nodes', keyToSlug(styleDefintion.nodeType), keyToSlug(styleDefintion.key));
             createSpecificNode(styleDefintion, templatePath, force, debug);
         });
         // Process base styles
         styles.filter(x => typeof (x.baseType) == 'string' && x.baseType.length > 0).map(styleDefinition => {
             const baseType = (styleDefinition.baseType ?? '').startsWith('_') ? (styleDefinition.baseType ?? '').substring(1) : styleDefinition.baseType;
-            const templatePath = path.join(basePath, baseType, 'styles', styleDefinition.key);
+            const templatePath = path.join(basePath, baseType, 'styles', keyToSlug(styleDefinition.key));
             createSpecificNode(styleDefinition, templatePath, force, debug);
         });
     }
@@ -1417,14 +1832,14 @@ function createSpecificNode(template, templatePath, force = false, debug = false
     if (fs.existsSync(nodeFile)) {
         if (!force) {
             if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${template.displayName} (${template.key}) component - file already exists\n`));
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${template.displayName} (${template.key}) node - file already exists\n`));
             return undefined;
         }
         if (debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${template.displayName} (${template.key}) component\n`));
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${template.displayName} (${template.key}) node\n`));
     }
     else if (debug)
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${template.displayName} (${template.key}) component\n`));
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${template.displayName} (${template.key}) node\n`));
     if (!fs.existsSync(templatePath))
         fs.mkdirSync(templatePath, { recursive: true });
     const baseType = template.nodeType ?? template.baseType ?? 'unknown';
@@ -1502,6 +1917,7 @@ function getDisplayTemplateInfo(template, typePath) {
 
 const ROOT_FACTORY_KEY = ".";
 const FACTORY_FILE_NAME = "index.ts";
+const reservedNames = ["loading.tsx", "loading.jsx", "suspense.tsx", "suspense.jsx"];
 const NextJsFactoryCommand = {
     command: "nextjs:factory",
     describe: "Create the ComponentFactory for a Next.JS / Optimizely Graph structure",
@@ -1510,108 +1926,102 @@ const NextJsFactoryCommand = {
         const { components: basePath, force, _config: { debug } } = parseArgs(args);
         if (debug)
             process.stdout.write(chalk.gray(`${figures.arrowRight} Start generating component factories\n`));
+        // Get & filter all component files
+        const clientComponents = [];
         const components = globSync(["./**/*.jsx", "./**/*.tsx"], {
             cwd: basePath
         }).map(p => p.split(path.sep)).filter(p => {
+            // Get the filename
+            const fileName = p.at(p.length - 1);
+            if (!fileName)
+                return false;
             // Consider components in a file starting with "_" as a partial
-            if (p.at(p.length - 1)?.startsWith('_') == true)
+            if (fileName.startsWith('_') == true)
                 return false;
             // Consider components in a folder named "partials" as a partial
-            if (p.at(p.length - 2)?.toLowerCase() == 'partials')
+            if (p.some(folder => folder === 'partials'))
                 return false;
             // Skip the special loader component
-            if (p.at(p.length - 1) == "loading.tsx" || p.at(p.length - 1) == "loading.jsx")
+            if (reservedNames.includes(fileName))
                 return false;
             // Check if the file has a default export
             const fileBuffer = fs.readFileSync(path.join(basePath, p.join(path.sep)));
             const hasDefaultExport = fileBuffer.includes('export default');
+            if (fileBuffer.includes('use client'))
+                clientComponents.push(p.join(path.sep));
             if (!hasDefaultExport) {
                 process.stdout.write(chalk.redBright(`${figures.warning} No default export in ${p.join(path.sep)} - ignoring file\n`));
                 return false;
             }
             return true;
         });
+        // Report what we have found
         if (debug)
             process.stdout.write(chalk.gray(`${figures.arrowRight} Identified ${components.length} components in ${basePath}\n`));
+        // Build factory / component structure
         const componentFactoryDefintions = new Map();
         components.forEach(component => {
+            const componentDir = path.dirname(path.posix.join(...component));
+            // const componentFile = path.basename(path.posix.join(...component));
+            // Determine component target
+            const componentKey = getComponentKey(component, basePath);
+            let componentVariant = (component.length > 1 ? component.at(component.length - 1) ?? 'default' : 'default').replace('index', 'default');
+            componentVariant = path.basename(componentVariant, path.extname(componentVariant));
+            // Get factory information
             const factorySegments = component.length > 2 ? component.slice(0, -2) : [ROOT_FACTORY_KEY];
-            const factoryKey = factorySegments.join(path.sep);
+            const factoryKey = path.posix.join(...factorySegments);
             const factoryFile = path.join(factoryKey, FACTORY_FILE_NAME);
-            // Add component to factory
+            // Check dynamic & suspense
+            const isClientComponent = clientComponents.includes(component.join(path.sep));
+            const useDynamic = [
+                path.join(basePath, componentDir, 'loading.tsx'),
+                path.join(basePath, componentDir, 'loading.jsx')
+            ].some(fs.existsSync);
+            const useSuspense = [
+                path.join(basePath, componentDir, 'suspense.tsx'),
+                path.join(basePath, componentDir, 'suspense.jsx')
+            ].some(fs.existsSync);
+            // Prepare data
+            const componentImport = component.length == 1 ?
+                `.${path.posix.sep}${path.basename(component[0], path.extname(component[0]))}` :
+                `.${path.posix.sep}${path.posix.relative(factoryKey, componentDir)}${componentVariant !== 'default' ? path.posix.sep + componentVariant : ''}`;
+            const loaderImport = useDynamic ? componentImport + path.posix.sep + 'loading' : undefined;
+            const suspenseImport = useSuspense ? componentImport + path.posix.sep + 'suspense' : undefined;
+            const componentVariablesBase = componentKey + (componentVariant !== 'default' ? processName(componentVariant) : '');
+            // Add to the factory
             const factory = componentFactoryDefintions.get(factoryKey) || { file: factoryFile, entries: [], subfactories: [] };
-            const useSuspense = fs.existsSync(path.join(basePath, component.slice(0, -1).join(path.sep), 'loading.tsx')) || fs.existsSync(path.join(basePath, component.slice(0, -1).join(path.sep), 'loading.jsx'));
-            if (useSuspense && debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Components in ${component.slice(0, -1).join(path.sep)} will use suspense\n`));
-            const componentSegments = component.slice(-2).map(p => {
-                const entry = p.substring(0, p.length - path.extname(p).length);
-                return entry.toLowerCase() == "index" ? null : entry;
-            }).filter(x => x);
-            const componentImport = "./" + componentSegments.join('/');
-            const loaderImport = useSuspense ? "./" + component.slice(-2).map((p, i, a) => {
-                const entry = p.substring(0, p.length - path.extname(p).length);
-                if (i == a.length - 1)
-                    return 'loading';
-                return entry.toLowerCase() == "index" ? null : entry;
-            }).join('/') : undefined;
             factory.entries.push({
+                key: componentKey,
+                variant: componentVariant,
                 import: componentImport,
-                variable: [...componentSegments.map(processName), 'Component'].join(''),
-                key: componentSegments.join('/') == "node" ? "Node" : componentSegments.join('/'),
+                variable: componentVariablesBase + 'Component',
                 loaderImport,
-                loaderVariable: useSuspense ? [...componentSegments.map(processName), 'Loader'].join('') : undefined,
+                loaderVariable: useDynamic ? componentVariablesBase + 'Loader' : undefined,
+                suspenseImport,
+                suspenseVariable: useSuspense ? componentVariablesBase + 'Placeholder' : undefined,
+                isClient: isClientComponent
             });
             componentFactoryDefintions.set(factoryKey, factory);
-            // Register with all appropriate parents
+            // Add/update parent factories
             const parentSegements = factoryKey == ROOT_FACTORY_KEY ? factorySegments.slice(0, -1) : [ROOT_FACTORY_KEY, ...factorySegments.slice(0, -1)];
-            let currentFactory = {
-                key: factoryKey,
-                import: './' + factorySegments.slice(-1).join('/'),
-                prefix: processName(factorySegments.slice(-1).at(0)),
-                variable: factorySegments.map(processName).join("") + "Factory"
-            };
-            for (let i = parentSegements.length; i > 0; i--) {
-                const parentFactoryKey = parentSegements.slice(0, i).filter(x => x != ROOT_FACTORY_KEY).join(path.sep) || ROOT_FACTORY_KEY;
+            parentSegements.forEach((_, idx, data) => {
+                const parentFactoryKey = path.posix.join(...data.slice(0, idx + 1)) || ROOT_FACTORY_KEY;
+                const childFactoryKey = factorySegments.slice(idx, idx + 1).at(0);
                 const parentFactory = componentFactoryDefintions.get(parentFactoryKey) ?? { file: path.join(parentFactoryKey, FACTORY_FILE_NAME), entries: [], subfactories: [] };
-                if (!parentFactory.subfactories.some(x => x.key == currentFactory.key))
-                    parentFactory.subfactories.push(currentFactory);
-                componentFactoryDefintions.set(parentFactoryKey, parentFactory);
-                if (i > 1) {
-                    currentFactory = {
-                        key: parentFactoryKey,
-                        import: './' + parentFactoryKey.split(path.sep).slice(-1).at(0),
-                        prefix: processName(parentFactoryKey.split(path.sep).slice(-1).at(0)),
-                        variable: parentFactoryKey.split(path.sep).map(processName).join("") + "Factory"
-                    };
+                if (!parentFactory.subfactories.some(x => x.key === childFactoryKey)) {
+                    parentFactory.subfactories.push({
+                        key: childFactoryKey,
+                        import: './' + childFactoryKey,
+                        variable: processName(childFactoryKey) + 'Factory'
+                    });
+                    componentFactoryDefintions.set(parentFactoryKey, parentFactory);
                 }
-            }
-        });
-        const mainFactory = componentFactoryDefintions.get(ROOT_FACTORY_KEY);
-        if (mainFactory) {
-            if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Updating prefixes within RootFactory\n`));
-            mainFactory.subfactories = mainFactory.subfactories.map(subFactory => {
-                if (typeof (subFactory.prefix == 'string'))
-                    switch (subFactory.prefix) {
-                        case "Video":
-                        case "Image":
-                            subFactory.prefix = ["Media", subFactory.prefix, "Component"];
-                            break;
-                        case "Experience":
-                            subFactory.prefix = [subFactory.prefix, "Page"];
-                            break;
-                        case "Element":
-                            subFactory.prefix = ["Component"];
-                            break;
-                        case "Media":
-                            subFactory.prefix = [subFactory.prefix, "Component"];
-                            break;
-                    }
-                return subFactory;
             });
-        }
+        });
+        // Report factory file count
         if (debug)
             process.stdout.write(chalk.gray(`${figures.arrowRight} Finished preparing ${componentFactoryDefintions.size} factories, start writing\n`));
+        // Iterate over the factories and create them
         let updateCounter = 0;
         for (const key of componentFactoryDefintions.keys()) {
             const factory = componentFactoryDefintions.get(key);
@@ -1635,6 +2045,36 @@ const NextJsFactoryCommand = {
         process.stdout.write("\n");
     }
 };
+/**
+ * Get the component key that must be used for the variable in the factory
+ * this looks first at the component-type file.
+ *
+ * @param     component     The file path broken into parts
+ * @returns   The key to use
+ */
+function getComponentKey(component, componentsRootDir) {
+    // Prepare context
+    //const componentFile = path.basename(path.join(...component));
+    const componentDir = path.dirname(path.join(...component));
+    // Calculate the fallback value
+    const baseName = processName(component.length == 1 ? ucFirst(path.basename(component[0], path.extname(component[0]))) : component.at(component.length - 2));
+    // Try to read the key from the opti-type.json file in the same folder
+    const definitions = globSync("*.opti-type.json", { cwd: path.join(componentsRootDir, componentDir) });
+    //console.log(definitions, componentDir);
+    if (definitions.length == 1) {
+        try {
+            const data = JSON.parse(fs.readFileSync(path.join(componentsRootDir, componentDir, definitions[0])).toString('utf8'));
+            //console.log('Updating to', data.key)
+            if (data.key)
+                return data.key;
+        }
+        catch {
+            // Ignored on purpose
+        }
+    }
+    // Return the fallback value
+    return baseName;
+}
 function shouldWriteFactory(factoryFile, force = false, debug = false) {
     if (!fs.existsSync(factoryFile)) {
         process.stdout.write(chalk.green(`${figures.tick} Creating new factory file: ${factoryFile}\n`));
@@ -1656,63 +2096,68 @@ function shouldWriteFactory(factoryFile, force = false, debug = false) {
 function processName(input) {
     if (input == ROOT_FACTORY_KEY)
         return "Cms";
-    const nameSegements = input.split(/[-\_]/g);
+    const nameSegements = input.split(/[-_]/g);
     return nameSegements.map(ucFirst).join('');
 }
 function generateFactory(factoryInfo, factoryKey) {
-    const needsPrefixFunction = factoryInfo.subfactories.length > 0;
-    const factoryName = factoryKey.split(path.sep).map(processName).join("") + "Factory";
-    const components = factoryInfo.entries;
-    const subFactories = factoryInfo.subfactories;
-    const factoryContent = `// Auto generated dictionary
+    // Get the factory name
+    const factoryName = factoryKey.split(path.posix.sep).map(processName).join("") + "Factory";
+    // Get the components and sub-factories, sorted by key to minimize changes between runs
+    const components = [...factoryInfo.entries].sort((a, b) => { return a.key < b.key ? -1 : a.key > b.key ? 1 : 0; });
+    const subFactories = [...factoryInfo.subfactories].sort((a, b) => { return a.key < b.key ? -1 : a.key > b.key ? 1 : 0; });
+    // Check if there's at least one component that uses next/dynamic
+    const hasDynamic = factoryInfo.entries.some(x => x.loaderImport);
+    const hasClientComponents = factoryInfo.entries.some(x => x.isClient);
+    // The intro for the factory
+    const factoryIntro = `// Auto generated dictionary
 // @not-modified => When this line is removed, the "force" parameter of the CLI tool is required to overwrite this file
-import { type ComponentTypeDictionary } from "@remkoj/optimizely-cms-react";
-${[...components, ...subFactories].map(x => {
-        let importLine = `import ${x.variable} from "${x.import}";`;
-        if (x.loaderImport && x.loaderVariable) {
-            importLine += `\nimport ${x.loaderVariable} from "${x.loaderImport}";`;
-        }
-        return importLine;
-    }).join("\n")}
-
-${needsPrefixFunction ? `// Prefix entries - if needed
-${subFactories.map(subFactory => Array.isArray(subFactory.prefix) ?
-        subFactory.prefix.map(z => `prefixDictionaryEntries(${subFactory.variable}, "${z}");`).join("\n") :
-        `prefixDictionaryEntries(${subFactory.variable}, "${subFactory.prefix}");`).join("\n")}
-
-` : ''}// Build dictionary
-export const ${factoryName} : ComponentTypeDictionary = [
-    ${[...components.map(x => {
-            if (x.loaderVariable) {
-                return `{ 
-        type: "${x.key}", 
-        component: ${x.variable},
-        useSuspense: true,
-        loader: ${x.loaderVariable}
-    }`;
-            }
-            else {
-                return `{ 
-        type: "${x.key}", 
-        component: ${x.variable} 
-    }`;
-            }
-        }), ...subFactories.map(x => `...${x.variable}`)].join(",\n    ")}
-];
-
-// Export dictionary
-export default ${factoryName};
-${needsPrefixFunction ? `
-// Helper functions
-function prefixDictionaryEntries(list: ComponentTypeDictionary, prefix: string) : ComponentTypeDictionary
-{
-    list.forEach((component, idx, dictionary) => {
-        dictionary[idx].type = typeof component.type == 'string' ? prefix + "/" + component.type : [ prefix, ...component.type ]
-    });
-    return list;
-}
-` : ''}`;
-    return factoryContent;
+import { type ComponentTypeDictionary } from '@remkoj/optimizely-cms-react';${hasDynamic || hasClientComponents ? `
+import dynamic from 'next/dynamic';` : ''}`;
+    // The outry for the factory
+    const factoryOutro = `// Export dictionary
+export default ${factoryName};`;
+    // The imports of the factory
+    const factoryImports = [...components, ...subFactories].map(x => {
+        const imports = [];
+        if (x.loaderImport)
+            imports.push(`import ${x.loaderVariable} from '${x.loaderImport}';`);
+        else if (!x.isClient)
+            imports.push(`import ${x.variable} from '${x.import}';`);
+        if (x.suspenseImport)
+            imports.push(`import ${x.suspenseVariable} from '${x.suspenseImport}';`);
+        return imports.length > 0 ? imports.join('\n') : undefined;
+    }).filter(x => x).join('\n');
+    // The dynamic imports of the factory
+    const dynamicImports = hasDynamic ? `// Lazy load components that have a loading file, this only affects client components
+// See https://nextjs.org/docs/app/guides/lazy-loading#importing-server-components
+// for more details on how this affects server components in Next.js
+` + components.filter(x => x.loaderImport).map(x => {
+        return `const ${x.variable} = dynamic(() => import('${x.import}'), {
+  ssr: true,
+  loading: ${x.loaderVariable}
+});`;
+    }).join('\n') : undefined;
+    // The client imports of the factory
+    const clientComponents = hasClientComponents ? `// Lazy load client components even without loader specified
+` + components.filter(x => x.isClient && !x.loaderImport).map(x => {
+        return `const ${x.variable} = dynamic(() => import('${x.import}'), { ssr: true });`;
+    }).join('\n') : undefined;
+    // The actual entries for the factory
+    const factoryEntries = [...components.map(x => {
+            return `  {
+    type: '${x.key}',${x.variant && x.variant !== 'default' ? `
+    variant: '${x.variant}',` : ''}
+    component: ${x.variable}${x.suspenseVariable ? `,
+    useSuspense: true,
+    loader: ${x.suspenseVariable}` : ''}${x.isClient ? `,
+    isClient: true` : ''}
+  }`;
+        }), ...subFactories.map(x => `  ...${x.variable}`)];
+    // The body of the factory
+    const factoryBody = `// Build dictionary
+export const ${factoryName} : ComponentTypeDictionary = [${factoryEntries.length > 0 ? '\n' + factoryEntries.join(',\n') + '\n' : ''}];`;
+    // Combine everything into one string
+    return [factoryIntro, factoryImports, dynamicImports, clientComponents, factoryBody, factoryOutro].filter(x => (x?.length || 0) > 0).join('\n\n') + '\n';
 }
 
 const NextJsCreateCommand = {
@@ -1752,16 +2197,23 @@ const NextJsFragmentsCommand = {
     handler: async (args, opts) => {
         // Prepare
         const { loadedContentTypes, createdTypeFolders } = opts || {};
-        const { components: basePath, _config: { debug }, force } = parseArgs(args);
+        const { components: basePath, _config: { debug }, force, path: appPath } = parseArgs(args);
         const client = createCmsClient(args);
+        // Get content types
         const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(client, args);
+        const allContentTypesMap = new Map();
+        allContentTypes.forEach(x => {
+            if (x.key)
+                allContentTypesMap.set(x.key, x);
+        });
+        const generator = new DocumentGenerator(allContentTypesMap);
         // Start process
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL fragments\n`));
         const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
-        const tracker = new Map();
+        const tracker = new PropertyCollisionTracker(appPath);
         const dependencies = [];
         const updatedTypes = contentTypes.map(contentType => {
-            const { written, propertyTypes } = createComponentFragments(contentType, getTypeFolder(typeFolders, contentType.key), force, debug, tracker);
+            const { written, propertyTypes } = createComponentFragments(contentType, getTypeFolder(typeFolders, contentType.key), force, debug, tracker, generator);
             dependencies.push(...propertyTypes);
             return written ? contentType.key : undefined;
         }).filter(x => x);
@@ -1781,7 +2233,7 @@ const NextJsFragmentsCommand = {
                 typeFolders.push(tf);
             }
             return tf;
-        }, force, debug);
+        }, force, debug, tracker, generator);
         // Report outcome
         if (generatedProps.length > 0)
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL property fragments for ${generatedProps.join(', ')}\n`));
@@ -1791,7 +2243,7 @@ const NextJsFragmentsCommand = {
             process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
     }
 };
-function createComponentFragments(contentType, typePath, force, debug, propertyTracker = new Map()) {
+function createComponentFragments(contentType, typePath, force, debug, propertyTracker = new Map(), generator) {
     const baseQueryFile = typePath.fragmentFile;
     let writeFragment = true;
     if (fs.existsSync(baseQueryFile)) {
@@ -1810,13 +2262,13 @@ function createComponentFragments(contentType, typePath, force, debug, propertyT
     }
     let written = false;
     if (writeFragment) {
-        const fragment = GraphQLGen.buildFragment(contentType, undefined, false, propertyTracker);
+        const fragment = generator.buildFragment(contentType, undefined, false, propertyTracker);
         fs.writeFileSync(baseQueryFile, fragment);
         written = true;
     }
-    return { written, propertyTypes: GraphQLGen.getReferencedPropertyComponents(contentType) };
+    return { written, propertyTypes: DocumentGenerator.getReferencedPropertyComponents(contentType) };
 }
-function createPropertyFragments(propertyTypesList, allContentTypes, selectTypeFolder, force = false, debug = false) {
+function createPropertyFragments(propertyTypesList, allContentTypes, selectTypeFolder, force = false, debug = false, propertyTracker = new Map(), generator) {
     const returnValue = [];
     for (const propertyContentTypeKey of propertyTypesList.filter((v, i, a) => a.indexOf(v, i + 1) <= i)) {
         // Load the ContentType definition
@@ -1848,16 +2300,16 @@ function createPropertyFragments(propertyTypesList, allContentTypes, selectTypeF
             process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) property fragment\n`));
         }
         if (mustWrite) {
-            const fragment = GraphQLGen.buildFragment(contentType, undefined, true);
+            const fragment = generator.buildFragment(contentType, undefined, true, propertyTracker);
             fs.writeFileSync(propertyFragmentFile, fragment);
             returnValue.push(contentType.key);
         }
         // Recurse down for properties that we're not yet rendering
-        const referencedPropertyTypes = GraphQLGen.getReferencedPropertyComponents(contentType).filter(x => !propertyTypesList.includes(x));
+        const referencedPropertyTypes = DocumentGenerator.getReferencedPropertyComponents(contentType).filter(x => !propertyTypesList.includes(x));
         if (referencedPropertyTypes.length > 0) {
             if (debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Component property ${propertyContentTypeKey} uses components a property, recursing down\n`));
-            const additionalProperties = createPropertyFragments(referencedPropertyTypes, allContentTypes, selectTypeFolder, force, debug);
+            const additionalProperties = createPropertyFragments(referencedPropertyTypes, allContentTypes, selectTypeFolder, force, debug, propertyTracker, generator);
             returnValue.push(...additionalProperties);
         }
     }
@@ -1875,16 +2327,23 @@ const NextJsQueriesCommand = {
     handler: async (args, opts) => {
         // Prepare
         const { loadedContentTypes, createdTypeFolders } = opts || {};
-        const { components: basePath, _config: { debug }, force } = parseArgs(args);
+        const { components: basePath, _config: { debug }, force, path: appPath } = parseArgs(args);
         const client = createCmsClient(args);
         const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(client, args);
+        const allContentTypesMap = new Map();
+        allContentTypes.forEach(x => {
+            if (x.key)
+                allContentTypesMap.set(x.key, x);
+        });
+        const generator = new DocumentGenerator(allContentTypesMap);
+        const propertyTracker = new PropertyCollisionTracker(appPath);
         // Start process
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL queries\n`));
         const dependencies = [];
         const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
         const updatedTypes = contentTypes.map(contentType => {
             const typePath = getTypeFolder(typeFolders, contentType.key);
-            const { written, propertyTypes } = createGraphQueries(contentType, typePath, force, debug);
+            const { written, propertyTypes } = createGraphQueries(contentType, typePath, force, debug, propertyTracker, generator);
             dependencies.push(...propertyTypes);
             return written ? contentType.key : undefined;
         }).filter(x => x).flat();
@@ -1903,7 +2362,7 @@ const NextJsQueriesCommand = {
                 typeFolders.push(tf);
             }
             return tf;
-        }, force, debug);
+        }, force, debug, propertyTracker, generator);
         // Report outcome
         if (generatedProps.length > 0)
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL property fragments for ${generatedProps.join(', ')}\n`));
@@ -1913,7 +2372,7 @@ const NextJsQueriesCommand = {
             process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
     }
 };
-function createGraphQueries(contentType, typePath, force, debug) {
+function createGraphQueries(contentType, typePath, force, debug, tracker, generator) {
     const baseQueryFile = typePath.queryFile;
     let mustWrite = true;
     if (fs.existsSync(baseQueryFile)) {
@@ -1931,12 +2390,12 @@ function createGraphQueries(contentType, typePath, force, debug) {
         process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
     }
     if (mustWrite) {
-        const fragment = GraphQLGen.buildGetQuery(contentType, undefined, new Map());
+        const fragment = generator.buildGetQuery(contentType, undefined, tracker);
         fs.writeFileSync(baseQueryFile, fragment);
     }
     return {
         written: mustWrite,
-        propertyTypes: GraphQLGen.getReferencedPropertyComponents(contentType)
+        propertyTypes: DocumentGenerator.getReferencedPropertyComponents(contentType)
     };
 }
 
@@ -1958,12 +2417,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 fsAsync.stat(fullSchemaDir).catch((e) => { if (e.code == 'ENOENT')
+        const schemaDirInfo = await fs$1.stat(fullSchemaDir).catch((e) => { if (e.code == 'ENOENT')
             return undefined;
         else
             throw e; });
         if (!schemaDirInfo) {
-            await fsAsync.mkdir(fullSchemaDir, { recursive: true });
+            await fs$1.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`)));
@@ -1976,7 +2435,7 @@ const SchemaDownloadCommand = {
             const schemaFile = path.normalize(path.join(fullSchemaDir, `${schema.title.toLowerCase()}.schema.json`));
             const relativePath = path.relative(projectPath, schemaFile);
             try {
-                await fsAsync.writeFile(schemaFile, JSON.stringify(schema.schema, undefined, 2), {
+                await fs$1.writeFile(schemaFile, JSON.stringify(schema.schema, undefined, 2), {
                     encoding: "utf-8",
                     flag: force ? 'w' : 'wx'
                 });
@@ -2216,7 +2675,293 @@ function writeFileAsync(path, data) {
     });
 }
 
-var version = "6.0.0-pre9";
+const MigrateCommand = {
+    command: "project:migrate",
+    describe: "Automate the directory naming convention update",
+    builder,
+    async handler(args, opts) {
+        const { components: componentsPath} = parseArgs(args);
+        const files = await glob(['*/**/*'], { cwd: componentsPath });
+        const operations = [];
+        for (const file of files) {
+            const fullPath = path.join(componentsPath, file);
+            const pathInfo = await fs$1.stat(fullPath);
+            if (pathInfo.isDirectory()) { // We only need to rename directories
+                const dirName = path.basename(fullPath);
+                const dirParent = path.dirname(fullPath);
+                const newDirName = keyToSlug(dirName);
+                // We're ignoring casing as changing that will confuse Git
+                if (dirName.toLowerCase() !== newDirName.toLowerCase()) {
+                    process.stdout.write(`${figures.arrowRight} Updating ${file}\n`);
+                    const newFullPath = path.join(dirParent, newDirName);
+                    operations.push({ from: fullPath, to: newFullPath });
+                }
+            }
+            if (pathInfo.isFile() && (fullPath.endsWith('.opti-style.json') || fullPath.endsWith('.opti-type.json'))) {
+                const fileName = path.basename(fullPath);
+                const newFileName = keyToSlug(fileName, { preserveCharacters: ['.'] });
+                if (fileName.toLowerCase() !== newFileName.toLowerCase()) {
+                    const filePath = path.dirname(fullPath);
+                    const newFullPath = path.join(filePath, newFileName);
+                    operations.unshift({ from: fullPath, to: newFullPath });
+                }
+            }
+        }
+        for (const operation of operations) {
+            void await fs$1.rename(operation.from, operation.to);
+        }
+        NextJsFactoryCommand.handler(args);
+    }
+};
+
+const SECTION_START = '<!-- @remkoj/optimizely-packages:start -->';
+const SECTION_END = '<!-- @remkoj/optimizely-packages:end -->';
+const ProjectAiCommand = {
+    command: 'project:ai',
+    describe: 'Create or update AI assistant configuration files (AGENTS.md, CLAUDE.md, GitHub Copilot, Cursor) so installed @remkoj package documentation is available to the model',
+    builder: (yargs) => {
+        yargs.option('force', {
+            alias: 'f',
+            description: 'Overwrite existing files entirely instead of merging into existing content',
+            boolean: true,
+            type: 'boolean',
+            demandOption: false,
+            default: false,
+        });
+        yargs.option('tools', {
+            alias: 't',
+            description: 'AI tools to configure',
+            array: true,
+            type: 'string',
+            choices: ['agents', 'claude', 'copilot', 'cursor'],
+            demandOption: false,
+            default: ['agents', 'claude', 'copilot', 'cursor'],
+        });
+        return yargs;
+    },
+    handler: async (args) => {
+        const projectPath = path.isAbsolute(args.path)
+            ? args.path
+            : path.normalize(path.join(process.cwd(), args.path));
+        const force = args.force ?? false;
+        const tools = args.tools ?? ['agents', 'claude', 'copilot', 'cursor'];
+        // Discover installed @remkoj packages that include AGENTS.md
+        process.stdout.write(`\n${figures.arrowRight} Scanning for @remkoj packages with AGENTS.md\n`);
+        const packages = await findRemkojPackages(projectPath);
+        if (packages.length === 0) {
+            process.stderr.write(chalk.yellowBright(`\n${figures.warning} No @remkoj packages with AGENTS.md found in node_modules — run \`npm install\` first.\n`));
+            return;
+        }
+        for (const pkg of packages) {
+            process.stdout.write(`  ${chalk.greenBright(figures.tick)} ${chalk.bold(pkg.name)}\n`);
+        }
+        if (tools.includes('agents')) {
+            process.stdout.write(`\n${figures.arrowRight} Updating AGENTS.md\n`);
+            await updateWithSectionMarkers(path.join(projectPath, 'AGENTS.md'), buildAgentsMdSection(packages, projectPath), buildAgentsMdPreamble(), force, projectPath);
+        }
+        if (tools.includes('claude')) {
+            process.stdout.write(`\n${figures.arrowRight} Writing CLAUDE.md\n`);
+            await writeNewFileOnly(path.join(projectPath, 'CLAUDE.md'), `# CLAUDE.md\n\nSee [AGENTS.md](./AGENTS.md) for guidance on working with the Optimizely DXP packages in this project.\n`, force, projectPath);
+        }
+        if (tools.includes('copilot')) {
+            process.stdout.write(`\n${figures.arrowRight} Updating GitHub Copilot instruction files\n`);
+            await updateCopilotInstructions(projectPath, packages);
+        }
+        if (tools.includes('cursor')) {
+            process.stdout.write(`\n${figures.arrowRight} Writing Cursor rules\n`);
+            const rulesDir = path.join(projectPath, '.cursor', 'rules');
+            await ensureDir(rulesDir);
+            await writeCursorRules(path.join(rulesDir, 'optimizely-packages.mdc'), packages, projectPath);
+        }
+        process.stdout.write(`\n${chalk.greenBright(chalk.bold(figures.tick))} AI assistant configuration updated successfully\n`);
+    },
+};
+// ── Helpers ───────────────────────────────────────────────────────────────────
+async function findRemkojPackages(projectPath) {
+    const scopeDir = path.join(projectPath, 'node_modules', '@remkoj');
+    const packages = [];
+    try {
+        const dirs = await fs$1.readdir(scopeDir);
+        for (const dir of dirs) {
+            const agentsPath = path.join(scopeDir, dir, 'AGENTS.md');
+            try {
+                await fs$1.access(agentsPath);
+                packages.push({ name: `@remkoj/${dir}`, agentsPath });
+            }
+            catch {
+                // Package has no AGENTS.md — skip silently
+            }
+        }
+    }
+    catch {
+        // @remkoj scope directory not found in node_modules
+    }
+    return packages;
+}
+function wrapSection(content) {
+    return `${SECTION_START}\n${content}\n${SECTION_END}`;
+}
+function buildReferenceList(packages, projectPath) {
+    return packages
+        .map((pkg) => {
+        const rel = path.relative(projectPath, pkg.agentsPath).replace(/\\/g, '/');
+        return `- [\`${pkg.name}\`](${rel})`;
+    })
+        .join('\n');
+}
+function buildAgentsMdPreamble() {
+    return `# AI Agent Documentation — Optimizely DXP Packages
+
+The section below is auto-generated by \`opti-cms project:ai\`. Re-run after installing or upgrading \`@remkoj\` packages.
+
+`;
+}
+function buildAgentsMdSection(packages, projectPath) {
+    return `The following \`@remkoj\` packages are installed. Read their \`AGENTS.md\` for documentation:\n\n${buildReferenceList(packages, projectPath)}`;
+}
+/**
+ * Creates or updates the auto-generated section delimited by SECTION_START/SECTION_END markers.
+ *
+ * - File absent: creates it with preamble + section.
+ * - File present with markers: replaces the section in-place.
+ * - File present without markers: appends the section (preserves existing content).
+ * - force=true: always replaces the entire file with preamble + section.
+ */
+async function updateWithSectionMarkers(filePath, sectionContent, preamble, force, projectPath) {
+    const rel = path.relative(projectPath, filePath);
+    const section = wrapSection(sectionContent);
+    let existing;
+    try {
+        existing = await fs$1.readFile(filePath, 'utf-8');
+    }
+    catch {
+        // File does not exist — will be created
+    }
+    if (!existing || force) {
+        await fs$1.writeFile(filePath, preamble + section + '\n', 'utf-8');
+        process.stdout.write(`  ${chalk.greenBright(figures.tick)} ${existing ? 'Replaced' : 'Created'} ${rel}\n`);
+        return;
+    }
+    if (existing.includes(SECTION_START) && existing.includes(SECTION_END)) {
+        const before = existing.slice(0, existing.indexOf(SECTION_START));
+        const after = existing.slice(existing.indexOf(SECTION_END) + SECTION_END.length);
+        await fs$1.writeFile(filePath, before + section + after, 'utf-8');
+        process.stdout.write(`  ${chalk.greenBright(figures.tick)} Updated section in ${rel}\n`);
+    }
+    else {
+        await fs$1.writeFile(filePath, existing.trimEnd() + '\n\n' + section + '\n', 'utf-8');
+        process.stdout.write(`  ${chalk.greenBright(figures.tick)} Appended section to ${rel}\n`);
+    }
+}
+/**
+ * Writes a file only when it does not already exist.
+ * When force=true the file is always (re)written.
+ */
+async function writeNewFileOnly(filePath, content, force, projectPath) {
+    const rel = path.relative(projectPath, filePath);
+    let exists = false;
+    try {
+        await fs$1.access(filePath);
+        exists = true;
+    }
+    catch {
+        // File does not exist
+    }
+    if (exists && !force) {
+        process.stdout.write(`  ${chalk.yellowBright(figures.info)} ${rel} already exists — use --force to overwrite\n`);
+        return;
+    }
+    await fs$1.writeFile(filePath, content, 'utf-8');
+    process.stdout.write(`  ${chalk.greenBright(figures.tick)} ${exists ? 'Replaced' : 'Created'} ${rel}\n`);
+}
+/**
+ * Writes one `.vscode/instructions/remkoj-<name>.instructions.md` file per package,
+ * each containing a `#file:` reference to the package's AGENTS.md in node_modules.
+ * VS Code Copilot resolves `#file:` references at query time, so content stays
+ * current after a package upgrade without re-running this command.
+ *
+ * Also removes the deprecated `github.copilot.chat.codeGeneration.instructions`
+ * key from `.vscode/settings.json` if it was written by a previous run.
+ */
+async function updateCopilotInstructions(projectPath, packages) {
+    const instructionsDir = path.join(projectPath, '.vscode', 'instructions');
+    await ensureDir(instructionsDir);
+    // Remove stale remkoj instruction files from previous runs
+    const FILE_PREFIX = 'remkoj-';
+    try {
+        const existing = await fs$1.readdir(instructionsDir);
+        for (const f of existing) {
+            if (f.startsWith(FILE_PREFIX) && f.endsWith('.instructions.md')) {
+                await fs$1.unlink(path.join(instructionsDir, f));
+            }
+        }
+    }
+    catch {
+        // Directory unreadable — ignore
+    }
+    // Write one instruction file per package using a #file: reference
+    for (const pkg of packages) {
+        const safeName = pkg.name.replace('@remkoj/', '');
+        const filePath = path.join(instructionsDir, `${FILE_PREFIX}${safeName}.instructions.md`);
+        const ref = path.relative(projectPath, pkg.agentsPath).replace(/\\/g, '/');
+        const content = `---\napplyTo: "**"\n---\n\n#file:${ref}\n`;
+        await fs$1.writeFile(filePath, content, 'utf-8');
+        process.stdout.write(`  ${chalk.greenBright(figures.tick)} Wrote ${path.relative(projectPath, filePath)}\n`);
+    }
+    // Clean up the deprecated settings key written by previous versions of this command
+    await removeDeprecatedCopilotSetting(projectPath);
+}
+async function removeDeprecatedCopilotSetting(projectPath) {
+    const settingsFile = path.join(projectPath, '.vscode', 'settings.json');
+    let settings;
+    try {
+        settings = JSON.parse(await fs$1.readFile(settingsFile, 'utf-8'));
+    }
+    catch {
+        return; // File absent or invalid — nothing to clean up
+    }
+    const key = 'github.copilot.chat.codeGeneration.instructions';
+    if (!(key in settings))
+        return;
+    const remaining = settings[key].filter((e) => !e.file?.startsWith('node_modules/@remkoj/'));
+    if (remaining.length === 0) {
+        delete settings[key];
+    }
+    else {
+        settings[key] = remaining;
+    }
+    await fs$1.writeFile(settingsFile, JSON.stringify(settings, null, 2) + '\n', 'utf-8');
+    process.stdout.write(`  ${chalk.greenBright(figures.tick)} Removed deprecated setting from ${path.relative(projectPath, settingsFile)}\n`);
+}
+/** Writes the Cursor rules file with a reference list; always regenerated since it is fully derived from node_modules. */
+async function writeCursorRules(filePath, packages, projectPath) {
+    const rel = path.relative(projectPath, filePath);
+    let exists = false;
+    try {
+        await fs$1.access(filePath);
+        exists = true;
+    }
+    catch {
+        // File does not exist
+    }
+    const list = buildReferenceList(packages, projectPath);
+    const content = [
+        '---',
+        'description: Documentation for @remkoj Optimizely DXP packages installed in this project',
+        'alwaysApply: true',
+        '---',
+        '',
+        wrapSection(`The following \`@remkoj\` packages are installed. Read their \`AGENTS.md\` for documentation:\n\n${list}`),
+        '',
+    ].join('\n');
+    await fs$1.writeFile(filePath, content, 'utf-8');
+    process.stdout.write(`  ${chalk.greenBright(figures.tick)} ${exists ? 'Updated' : 'Created'} ${rel}\n`);
+}
+async function ensureDir(dirPath) {
+    await fs$1.mkdir(dirPath, { recursive: true });
+}
+
+var version = "6.0.0-rc.2";
 var name = "opti-cms";
 var APP = {
 	version: version,
@@ -2233,15 +2978,6 @@ const CmsVersionCommand = {
         const client = createCmsClient(args);
         if (client.debug)
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Reading version information Optimizely CMS\n`));
-        const versionInfo = await client.getInstanceInfo().catch((error) => {
-            switch (error.message) {
-                case "fetch failed":
-                    throw new Error("Unable to connect to Optimizely CMS, please verify that the CMS URL is correct");
-                default:
-                    throw error;
-            }
-        });
-        const hasPreview2Info = versionInfo.results.preview2Data?.baseUrl ? true : false;
         const info = new Table({
             head: [
                 chalk.yellow(chalk.bold("Component")),
@@ -2250,18 +2986,10 @@ const CmsVersionCommand = {
             colWidths: [30, 60],
             colAligns: ["left", "left"]
         });
-        info.push(["Base URL", versionInfo.baseUrl ?? client.cmsUrl.href]);
-        if (hasPreview2Info)
-            info.push(["Base URL (Preview 2)", versionInfo.results.preview2Data?.baseUrl ?? 'n/a']);
+        info.push(["Base URL", client.cmsUrl.href]);
         info.push(["Client API", client.apiVersion]);
-        info.push(["Service API", versionInfo.apiVersion]);
-        if (hasPreview2Info)
-            info.push(["Service API (Preview 2)", versionInfo.results.preview2Data?.apiVersion ?? 'n/a']);
-        info.push(["CMS Build", versionInfo.cmsVersion]);
-        info.push(["Service Build", versionInfo.serviceVersion]);
         info.push(["SDK", APP.version]);
         process.stdout.write(info.toString() + "\n");
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Optimizely CMS Status: ${versionInfo.status}\n`));
         process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
     }
 };
@@ -2318,7 +3046,7 @@ const CmsResetCommand = {
         });
         if (!didRemoveCustomProperties) {
             const ctUrl = new URL('/ui/EPiServer.Cms.UI.Admin/default#/ContentTypes', client.cmsUrl);
-            process.stdout.write(`${chalk.redBright(figures.cross)} Custom properties on the \"Blank Section\" and \"Blank Experience\" Content Types must be removed manually, please remove and restart command.\n`);
+            process.stdout.write(`${chalk.redBright(figures.cross)} Custom properties on the "Blank Section" and "Blank Experience" Content Types must be removed manually, please remove and restart command.\n`);
             process.stdout.write(`  ${figures.arrowRight} Content Type manager: ${ctUrl}\n`);
             process.exit(1);
         }
@@ -2352,7 +3080,7 @@ async function deleteContentItem(client, key, onlyChildren = false) {
     const children = await getContentItemChildren(client, key);
     let hasError = false;
     let removedCount = 0;
-    for (let child of children.items)
+    for (const child of children.items)
         if (child.key) {
             removedCount = removedCount + await deleteContentItem(client, child.key).catch(e => {
                 console.error(e);
@@ -2360,7 +3088,7 @@ async function deleteContentItem(client, key, onlyChildren = false) {
                 return 0;
             });
         }
-    for (let child of children.assets)
+    for (const child of children.assets)
         if (child.key) {
             removedCount = removedCount + await deleteContentItem(client, child.key).catch(e => {
                 console.error(e);
@@ -2379,7 +3107,7 @@ async function deleteContentItem(client, key, onlyChildren = false) {
             process.stderr.write(chalk.redBright(`  ${figures.cross}The ContentItem ${key} is a reserved item, skipping deletion\n`));
         return removedCount;
     }
-    const deleteResult = await client.preview2ContentDelete({ path: { key }, query: { permanent: true } }).then(r => r.key).catch((e) => {
+    const deleteResult = await client.contentDelete({ path: { key }, headers: { "cms-permanent-delete": true } }).then(r => r ? r.key : key).catch((e) => {
         if (e.status == 404)
             return key;
         throw e;
@@ -2403,7 +3131,6 @@ async function resetSystemTypes(client) {
         const newType = await client.contentTypesPatch({
             path: { key: systemType },
             body: {
-                key: systemType,
                 properties: {}
             }
         }).catch((e) => e.status == 404 ? undefined : null);
@@ -2415,7 +3142,7 @@ async function resetSystemTypes(client) {
 async function removeContentTypes(client) {
     const contentTypes = await getAllTypes(client);
     let removedCount = 0;
-    for (let contentType of contentTypes.filter(item => item.source == '' && !reservedTypes.includes(item.key))) {
+    for (const contentType of contentTypes.filter(item => item.source == '' && !reservedTypes.includes(item.key))) {
         if (client.debug)
             process.stdout.write(`  ${chalk.blueBright(figures.arrowRight)} Removing content type ${contentType.displayName} (${contentType.key})\n`);
         const result = await client.contentTypesDelete({ path: { key: contentType.key } }).catch((e) => {
@@ -2456,7 +3183,7 @@ async function getAllTemplates(client, batchSize = 100) {
         }
         throw e;
     });
-    const totalItemCount = items.totalItemCount ?? items.items?.length ?? 0;
+    const totalItemCount = items.totalCount ?? items.totalItemCount ?? items.items?.length ?? 0;
     const pageSize = items.pageSize ?? items.items?.length ?? 0;
     const actualItems = items.items ?? [];
     const pageCount = Math.ceil(totalItemCount / pageSize);
@@ -2486,7 +3213,7 @@ async function getAllTypes(client, batchSize = 100) {
         }
         throw e;
     });
-    const totalItemCount = items.totalItemCount ?? items.items?.length ?? 0;
+    const totalItemCount = items.totalCount ?? items.totalItemCount ?? items.items?.length ?? 0;
     const pageSize = items.pageSize ?? items.items?.length ?? 0;
     const actualItems = items.items ?? [];
     const pageCount = Math.ceil(totalItemCount / pageSize);
@@ -2506,7 +3233,7 @@ async function getAllTypes(client, batchSize = 100) {
     return actualItems;
 }
 async function getAllAssets(client, parentKey, batchSize = 100) {
-    const items = await client.preview2ContentListAssets({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
+    const items = await client.contentListAssets({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
         if (e.status == 404) {
             return {
                 items: [],
@@ -2516,12 +3243,12 @@ async function getAllAssets(client, parentKey, batchSize = 100) {
         }
         throw e;
     });
-    const totalItemCount = items.totalItemCount ?? items.items?.length ?? 0;
+    const totalItemCount = items.totalCount ?? items.totalItemCount ?? items.items?.length ?? 0;
     const pageSize = items.pageSize ?? items.items?.length ?? 0;
     const actualItems = items.items ?? [];
     const pageCount = Math.ceil(totalItemCount / pageSize);
     for (let pageNr = 1; pageNr < pageCount; pageNr++) {
-        const pageData = await client.preview2ContentListAssets({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
+        const pageData = await client.contentListAssets({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
             if (e.status == 404) {
                 return {
                     items: [],
@@ -2536,7 +3263,7 @@ async function getAllAssets(client, parentKey, batchSize = 100) {
     return actualItems;
 }
 async function getAllItems(client, parentKey, batchSize = 100) {
-    const items = await client.preview2ContentListItems({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
+    const items = await client.contentListItems({ path: { key: parentKey }, query: { pageIndex: 0, pageSize: batchSize } }).catch((e) => {
         if (e.status == 404) {
             return {
                 items: [],
@@ -2546,12 +3273,12 @@ async function getAllItems(client, parentKey, batchSize = 100) {
         }
         throw e;
     });
-    const totalItemCount = items.totalItemCount ?? items.items?.length ?? 0;
+    const totalItemCount = items.totalCount ?? items.totalItemCount ?? items.items?.length ?? 0;
     const pageSize = items.pageSize ?? items.items?.length ?? 0;
     const actualItems = items.items ?? [];
     const pageCount = Math.ceil(totalItemCount / pageSize);
     for (let pageNr = 1; pageNr < pageCount; pageNr++) {
-        const pageData = await client.preview2ContentListItems({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
+        const pageData = await client.contentListItems({ path: { key: parentKey }, query: { pageIndex: pageNr, pageSize } }).catch((e) => {
             if (e.status == 404) {
                 return {
                     items: [],
@@ -2584,20 +3311,24 @@ const commands = [
     StylesListCommand,
     StylesPullCommand,
     StylesPushCommand,
+    StylesDeleteCommand,
     TypesPullCommand,
-    TypesPushCommand
+    TypesPushCommand,
+    MigrateCommand,
+    ProjectAiCommand,
 ];
 
 async function main() {
-    const envFiles = prepare();
-    const app = createOptiCmsApp(APP.name, APP.version, undefined, envFiles);
+    const projectDir = getProjectDir();
+    const envFiles = prepare(projectDir);
+    const app = createOptiCmsApp(APP.name, APP.version, undefined, envFiles, projectDir);
     app.command(commands);
     try {
         await app.parse(process.argv.slice(2));
     }
     catch {
         //We're ignoring error here, as yargs will already generate the "nice output" for it
-        //console.log('Caught error')
+        //console.log ('Caught error')
     }
 }
 main();