@shopware/cms-base-layer 2.0.0 → 2.1.0

package/app/helpers/cms/getImageSizes.ts

@@ -0,0 +1,36 @@
+/**
+ * Default mapping of CMS block slot count to responsive `sizes` attribute values.
+ * Used by CmsGenericBlock to provide sizing hints to child image elements.
+ *
+ * Can be overridden via `app.config.ts`:
+ * ```ts
+ * export default defineAppConfig({
+ *   imageSizes: {
+ *     1: "(max-width: 768px) 100vw, 1200px",
+ *     2: "(max-width: 768px) 100vw, 600px",
+ *   },
+ * });
+ * ```
+ */
+const DEFAULT_IMAGE_SIZES: Record<string, string> = {
+  1: "(max-width: 768px) 100vw, 100vw",
+  2: "(max-width: 768px) 100vw, 50vw",
+  3: "(max-width: 768px) 100vw, 33vw",
+  default: "(max-width: 768px) 50vw, 25vw",
+};
+
+/**
+ * Returns the responsive `sizes` attribute value for an image
+ * based on the number of slots in its parent CMS block.
+ *
+ * @param slotCount - Number of slots in the block
+ * @param config - Optional override map from app.config.ts (imageSizes)
+ * @returns A valid HTML `sizes` attribute string
+ */
+export function getImageSizes(
+  slotCount: number,
+  config?: Record<string, string>,
+): string {
+  const sizes = { ...DEFAULT_IMAGE_SIZES, ...config };
+  return sizes[slotCount] || sizes.default || "100vw";
+}

package/app/helpers/html-to-vue/ast.ts

@@ -1,51 +1,80 @@
-//@ts-nocheck
 /**
  * Based on the https://github.com/HCESrl/html-to-vue
  */
+// @ts-expect-error - html-to-ast has type definition issues with package.json exports
 import { parse } from "html-to-ast";
 import type { NodeObject } from "./getOptionsFromNode";
 
+type ASTNode = NodeObject | NodeObject[];
+
+type VisitCallback = (
+  node: unknown,
+  parent: NodeObject | null,
+  key: string | null,
+  index: number | undefined,
+) => void;
+
+type ExtraComponentConfig = {
+  conditions: (node: NodeObject) => boolean;
+  renderer?: unknown;
+};
+
+export type RectifyConfig = {
+  extraComponentsMap?: Record<string, ExtraComponentConfig>;
+};
+
 /**
  * Visit each node in the AST - with callback (adapted from https://lihautan.com/manipulating-ast-with-javascript/)
- * @param {*} ast html-parse-stringify AST
- * @param {*} callback
+ * @param ast html-parse-stringify AST
+ * @param callback
  */
-function _visitAST(ast, callback) {
-  function _visit(node, parent, key, index) {
+function _visitAST(ast: ASTNode, callback: VisitCallback): void {
+  function _visit(
+    node: unknown,
+    parent: NodeObject | null,
+    key: string | null,
+    index: number | undefined,
+  ): void {
     callback(node, parent, key, index);
     if (Array.isArray(node)) {
       // node is an array
-      node.forEach((value, index) => {
-        _visit.call(this, value, node, null, index);
+      node.forEach((value, idx) => {
+        _visit(value, node as unknown as NodeObject, null, idx);
       });
     } else if (isNode(node)) {
       const keys = Object.keys(node);
       for (let i = 0; i < keys.length; i++) {
-        const child = node[keys[i]];
+        const childKey = keys[i];
+        if (childKey === undefined) continue;
+        const child = (node as Record<string, unknown>)[childKey];
         if (Array.isArray(child)) {
           for (let j = 0; j < child.length; j++) {
-            _visit.call(this, child[j], node, key, j);
+            _visit(child[j], node, key, j);
           }
         } else if (isNode(child)) {
-          _visit.call(this, child, node, key, undefined);
+          _visit(child, node, key, undefined);
         }
       }
     }
   }
-  _visit.call(this, ast, null, undefined, undefined);
+  _visit(ast, null, null, undefined);
 }
 
 /**
  *
  * @param node html-parse-stringify AST node
- * @returns {boolean|boolean}
+ * @returns {boolean}
  */
-export function isNode(node: NodeObject) {
-  return typeof node === "object" && typeof node.type !== "undefined";
+export function isNode(node: unknown): node is NodeObject {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    typeof (node as NodeObject).type !== "undefined"
+  );
 }
 
-export function generateAST(html) {
-  return parse(html);
+export function generateAST(html: string): ASTNode {
+  return parse(html) as ASTNode;
 }
 
 /**
@@ -54,16 +83,21 @@ export function generateAST(html) {
  * @param config
  * @returns {*}
  */
-export function rectifyAST(ast, config) {
-  const _ast = JSON.parse(JSON.stringify(ast));
+export function rectifyAST(ast: ASTNode, config: RectifyConfig): ASTNode {
+  const _ast = JSON.parse(JSON.stringify(ast)) as ASTNode;
   const keys = config.extraComponentsMap
     ? Object.keys(config.extraComponentsMap)
     : [];
   _visitAST(_ast, (node) => {
+    if (!isNode(node)) {
+      return;
+    }
     // checking whether the AST has some components that has to become Vue Components
     for (let i = 0; i < keys.length; i++) {
       const currentKey = keys[i];
-      if (config.extraComponentsMap[currentKey].conditions(node)) {
+      if (currentKey === undefined) continue;
+      const componentConfig = config.extraComponentsMap?.[currentKey];
+      if (componentConfig?.conditions(node)) {
         node.name = currentKey;
       }
     }

package/app/helpers/html-to-vue/getOptionsFromNode.ts

@@ -7,7 +7,7 @@ export type NodeObject = {
   content: string;
 };
 
-type Options = {
+export type Options = {
   align?: string;
   attrs: Record<string, string>;
   class?: string;

package/app/helpers/html-to-vue/renderToHtml.ts

@@ -3,17 +3,10 @@
  */
 
 import type { ComponentInternalInstance, h } from "vue";
-import { generateAST, rectifyAST } from "./ast";
-import { renderer } from "./renderer";
+import { type RectifyConfig, generateAST, rectifyAST } from "./ast";
+import { type RendererConfig, renderer } from "./renderer";
 
-type DefaultConfig = {
-  container: {
-    type: string;
-  };
-  extraComponentsMap: Record<string, unknown>;
-  renderAnyway: boolean;
-  textTransformer: (text: string) => string;
-};
+type DefaultConfig = RendererConfig;
 
 const defaultConfig: DefaultConfig = {
   container: {
@@ -33,7 +26,10 @@ export function renderHtml(
 ) {
   const mergedConfig = Object.assign(defaultConfig, config);
   const _ast = generateAST(html);
-  const _rectifiedAst = rectifyAST(_ast, config);
+  const rectifyConfig: RectifyConfig = {
+    extraComponentsMap: config.extraComponentsMap,
+  };
+  const _rectifiedAst = rectifyAST(_ast, rectifyConfig);
 
   return renderer(
     _rectifiedAst,

package/app/helpers/html-to-vue/renderer.ts

@@ -1,26 +1,86 @@
-//@ts-nocheck
 /**
  * Based on the https://github.com/HCESrl/html-to-vue
  */
 
+import type { ComponentInternalInstance, VNode } from "vue";
 import { isNode } from "./ast";
+import type { NodeObject } from "./getOptionsFromNode";
 import { getOptionsFromNode } from "./getOptionsFromNode";
 
+type ASTNode = NodeObject | NodeObject[];
+
+type RawChildren = string | number | boolean | VNode;
+
+type ExtraComponentRenderer = (
+  node: NodeObject,
+  children: RawChildren[],
+  createElement: typeof import("vue").h,
+  context: ComponentInternalInstance | null,
+) => VNode;
+
+export type ExtraComponentConfig = {
+  conditions: (node: NodeObject) => boolean;
+  renderer: ExtraComponentRenderer;
+};
+
+export type RendererConfig = {
+  container: {
+    type: string;
+  };
+  extraComponentsMap: Record<string, ExtraComponentConfig>;
+  renderAnyway: boolean;
+  textTransformer: (text: string) => string;
+};
+
+function flattenChildren(
+  children: RawChildren | RawChildren[] | undefined,
+): RawChildren[] {
+  if (children === undefined) {
+    return [];
+  }
+  if (Array.isArray(children)) {
+    const result: RawChildren[] = [];
+    for (const child of children) {
+      if (child !== null && child !== undefined) {
+        if (Array.isArray(child)) {
+          result.push(...flattenChildren(child));
+        } else {
+          result.push(child);
+        }
+      }
+    }
+    return result;
+  }
+  return [children];
+}
+
 /**
  * rendering the ast into vue render functions
- * @param {*} ast AST generated by html-parse-stringify
- * @param {*} config our configuration
- * @param {*} createElement vue's createElement
- * @param {*} context vue functional component context
+ * @param ast AST generated by html-parse-stringify
+ * @param config our configuration
+ * @param createElement vue's createElement
+ * @param context vue functional component context
+ * @param resolveUrl function to resolve URLs
  */
-export function renderer(ast, config, createElement, context, resolveUrl) {
-  function _render(h, node) {
+export function renderer(
+  ast: ASTNode,
+  config: RendererConfig,
+  createElement: typeof import("vue").h,
+  context: ComponentInternalInstance | null,
+  resolveUrl: (url: string) => string,
+): VNode {
+  function _render(
+    h: typeof createElement,
+    node: unknown,
+  ): RawChildren | RawChildren[] | undefined {
     if (Array.isArray(node)) {
-      const nodes = [];
+      const nodes: RawChildren[] = [];
       // node is an array
-      node.forEach((subnode, index) => {
-        nodes.push(_render.call(this, h, subnode, node, null, index, h));
-      });
+      for (const subnode of node) {
+        const rendered = _render(h, subnode);
+        const flattened = flattenChildren(rendered);
+        nodes.push(...flattened);
+      }
       return nodes;
     }
 
@@ -31,26 +91,26 @@ export function renderer(ast, config, createElement, context, resolveUrl) {
       }
       if (node.type === "tag") {
         const transformedNode = getOptionsFromNode(node, resolveUrl);
-        const children = [];
-        node.children.forEach((child, index) => {
-          children.push(_render.call(this, h, child, transformedNode, index));
-        });
+        const children: RawChildren[] = [];
+        for (const child of node.children) {
+          const rendered = _render(h, child);
+          const flattened = flattenChildren(rendered);
+          children.push(...flattened);
+        }
         // if it's an extra component use custom renderer
-        if (typeof config.extraComponentsMap[node.name] !== "undefined") {
-          return config.extraComponentsMap[node.name].renderer.call(
-            this,
-            transformedNode,
-            children,
-            h,
-            context,
-          );
+        const componentConfig = config.extraComponentsMap[node.name];
+        if (componentConfig !== undefined) {
+          return componentConfig.renderer(node, children, h, context);
         }
         // else, create normal html element
         return h(node.name, transformedNode, [...children]);
       }
     }
+    return undefined;
   }
-  return createElement(config.container.type, context.data, [
-    ..._render.call(this, createElement, ast),
-  ]);
+
+  const rendered = _render(createElement, ast);
+  const children = flattenChildren(rendered);
+
+  return createElement(config.container.type, context?.data || {}, children);
 }

package/app/plugins/unocss-runtime.client.ts

@@ -0,0 +1,23 @@
+import initUnocssRuntime from "@unocss/runtime";
+import { presetWind3 } from "unocss";
+import { defineNuxtPlugin, useAppConfig } from "#imports";
+import unoConfig from "../../uno.config";
+
+// Resolves UnoCSS utility classes at runtime via DOM MutationObserver.
+// Needed when CMS content contains dynamic classes not known at build time,
+// since extracting all CMS-used classes from the backend during build is impractical.
+// Trade-off: may cause layout shift as styles are applied after hydration.
+// Can be disabled via app.config.ts: { unocssRuntime: false }
+// When disabled, CMS classes unknown at build time won't be resolved —
+// add them to the UnoCSS safelist in uno.config.ts to ensure they are generated.
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig();
+  if (!appConfig.unocssRuntime) return;
+
+  initUnocssRuntime({
+    defaults: {
+      theme: unoConfig.theme,
+      presets: [presetWind3()],
+    },
+  });
+});

package/index.d.ts

@@ -5,8 +5,32 @@ export * from "./.nuxt/imports";
 
 declare module "nuxt/schema" {
   interface AppConfig {
+    /** Placeholder shown while CMS images are loading */
     imagePlaceholder?: {
+      /** CSS color value for the placeholder background */
       color?: string;
     };
+    /** CDN optimization options applied to CMS background images and synthetic srcsets */
+    backgroundImage?: {
+      /** Output format passed to the CDN (e.g. "webp", "avif") */
+      format?: string;
+      /** Image quality 1-100 passed to the CDN */
+      quality?: number;
+    };
+    /**
+     * Maps CMS block slot count to a responsive `sizes` attribute value.
+     * Used by CmsGenericBlock to provide sizing hints to child image elements.
+     * @example
+     * ```ts
+     * imageSizes: {
+     *   1: "(max-width: 768px) 100vw, 100vw",
+     *   2: "(max-width: 768px) 100vw, 50vw",
+     *   default: "(max-width: 768px) 50vw, 25vw",
+     * }
+     * ```
+     */
+    imageSizes?: Record<string | number, string>;
+    /** Enable UnoCSS runtime for dynamic class generation */
+    unocssRuntime?: boolean;
   }
 }

package/nuxt.config.ts

@@ -5,8 +5,28 @@ import { defineNuxtConfig } from "nuxt/config";
 const { resolve: resolveLayer } = createResolver(import.meta.url);
 
 export default defineNuxtConfig({
+  // @tresjs/nuxt is not included here because SwMedia3D is excluded from auto-import
+  // to prevent bundling heavy 3D libraries in the initial bundle.
+  // If you need 3D support, add "@tresjs/nuxt" to your app's nuxt.config.ts modules array
+  // and dynamically import SwMedia3D using defineAsyncComponent.
   modules: ["@unocss/nuxt", "@nuxt/image"],
 
+  hooks: {
+    "components:extend"(components) {
+      // Exclude SwMedia3D from auto-import to prevent bundling heavy 3D libraries
+      // It should be dynamically imported when needed using defineAsyncComponent.
+      const index = components.findIndex(
+        (c) =>
+          c.pascalName === "SwMedia3D" ||
+          c.kebabName === "sw-media3-d" ||
+          c.filePath?.includes("SwMedia3D.vue"),
+      );
+      if (index > -1) {
+        components.splice(index, 1);
+      }
+    },
+  },
+
   // @ts-ignore - @nuxt/image config may not be typed in some layer contexts
   image: {
     quality: 90,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -32,36 +32,38 @@
     "uno.config.ts"
   ],
   "dependencies": {
-    "@iconify-json/carbon": "1.2.14",
+    "@iconify-json/carbon": "1.2.18",
     "@nuxt/image": "2.0.0",
-    "@nuxt/kit": "4.2.1",
-    "@tresjs/cientos": "4.3.1",
-    "@tresjs/core": "4.3.6",
-    "@unocss/nuxt": "66.5.4",
+    "@nuxt/kit": "4.2.2",
+    "@tresjs/cientos": "5.2.4",
+    "@tresjs/nuxt": "^5.1.6",
+    "@unocss/nuxt": "66.6.0",
+    "@unocss/runtime": "66.6.0",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "14.0.0",
+    "@vueuse/core": "14.1.0",
     "entities": "6.0.0",
     "html-to-ast": "0.0.6",
-    "three": "0.173.0",
-    "unocss": "66.5.4",
-    "vue": "3.5.24",
+    "three": "0.182.0",
+    "unocss": "66.6.0",
+    "vue": "3.5.27",
     "xss": "1.0.15",
-    "@shopware/composables": "1.10.0",
-    "@shopware/api-client": "1.4.0",
-    "@shopware/helpers": "1.6.0"
+    "@shopware/api-client": "1.5.0",
+    "@shopware/composables": "1.11.0",
+    "@shopware/helpers": "1.7.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
-    "@nuxt/schema": "4.2.1",
-    "@types/three": "0.173.0",
-    "@vitest/coverage-v8": "3.2.4",
-    "nuxt": "4.2.1",
+    "@nuxt/schema": "4.2.2",
+    "@types/three": "0.182.0",
+    "@typescript/native-preview": "7.0.0-dev.20260111.1",
+    "@vitest/coverage-v8": "4.0.18",
+    "nuxt": "4.2.2",
     "typescript": "5.9.3",
     "unbuild": "2.0.0",
-    "vitest": "3.2.4",
-    "vue-router": "4.6.3",
-    "vue-tsc": "3.1.4",
+    "vitest": "4.0.18",
+    "vue-router": "4.6.4",
+    "vue-tsc": "3.2.2",
     "tsconfig": "0.0.0"
   },
   "scripts": {
@@ -69,7 +71,7 @@
     "dev": "unbuild --stub",
     "lint": "biome check .",
     "lint:fix": "biome check . --write && pnpm run typecheck",
-    "typecheck": "pnpm nuxt prepare && tsc --noEmit",
+    "typecheck": "pnpm nuxt prepare && tsgo --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
     "check-colors": "tsx scripts/check-unused-colors.ts"

package/uno.config.ts

@@ -60,6 +60,17 @@ export default defineConfig({
       "brand-tertiary-hover": "#E3E3E3",
       "brand-on-tertiary": "#1D1B20",
       "other-sale": "#D12D24",
+      "overlay-dark-highest": "rgba(0, 0, 0, 0.75)",
+      "overlay-dark-high": "rgba(0, 0, 0, 0.5)",
+      "overlay-dark": "rgba(0, 0, 0, 0.3)",
+      "overlay-dark-low": "rgba(0, 0, 0, 0.12)",
+      "overlay-dark-lowest": "rgba(0, 0, 0, 0.08)",
+      "overlay-light-highest": "rgba(255, 255, 255, 0.75)",
+      "overlay-light-high": "rgba(255, 255, 255, 0.5)",
+      "overlay-light": "rgba(255, 255, 255, 0.25)",
+      "overlay-light-low": "rgba(255, 255, 255, 0.12)",
+      "overlay-light-lowest": "rgba(255, 255, 255, 0.08)",
+      "fixed-fixed-on-image": "#FFFFFF",
     },
     fontFamily: {
       inter: "Inter",