@shopware/cms-base-layer 2.1.0 → 3.0.1

package/app/components/ui/SwitchButton.vue

@@ -47,9 +47,11 @@ const activateByClick = (ev?: Event) => {
   <div class="w-full inline-flex flex-col justify-start items-start gap-2">
     <div class="self-stretch inline-flex justify-start items-center gap-3">
       <!-- left label that toggles the input via for="#inputId" -->
-      <label :for="inputId"
+      <label
+        :for="inputId"
         class="flex-1 flex justify-start items-center gap-1 text-surface-on-surface text-base font-normal leading-normal cursor-pointer"
-        :class="{ 'cursor-not-allowed': disabled }">
+        :class="{ 'cursor-not-allowed': disabled }"
+      >
         <span v-if="$slots.default">
           <slot />
         </span>
@@ -57,23 +59,55 @@ const activateByClick = (ev?: Event) => {
       </label>
 
       <div class="w-10 h-6 relative">
-        <label class="inline-block cursor-pointer" :class="{ 'cursor-not-allowed': disabled }">
-          <input ref="inputRef" :id="inputId" type="checkbox" :name="inputName" class="sr-only" :checked="localChecked"
+        <label
+          class="inline-block cursor-pointer"
+          :class="{ 'cursor-not-allowed': disabled }"
+        >
+          <input
+            ref="inputRef"
+            :id="inputId"
+            type="checkbox"
+            :name="inputName"
+            class="sr-only"
+            :checked="localChecked"
             @change="toggleState()"
-            :disabled="disabled" :aria-label="ariaLabel || undefined" v-bind="$attrs" />
-          <span role="switch" :aria-checked="localChecked" :tabindex="disabled ? -1 : 0"
+            :disabled="disabled"
+            :aria-label="ariaLabel || undefined"
+            v-bind="$attrs"
+          />
+          <span
+            role="switch"
+            :aria-checked="localChecked"
+            :tabindex="disabled ? -1 : 0"
             class="w-10 h-6 relative rounded-full flex-shrink-0 inline-block switch-track cursor-pointer"
-            :class="localChecked ? 'bg-brand-secondary switch-track--on' : 'bg-surface-surface-container-highest'"
-            @keydown.space.prevent="activateByKeyboard" @click.prevent="activateByClick">
-            <span class="w-4 h-4 rounded-full absolute switch-knob"
+            :class="
+              localChecked
+                ? 'bg-brand-secondary switch-track--on'
+                : 'bg-surface-surface-container-highest'
+            "
+            @keydown.space.prevent="activateByKeyboard"
+            @click.prevent="activateByClick"
+          >
+            <span
+              class="w-4 h-4 rounded-full absolute switch-knob"
               :style="{ left: localChecked ? '19px' : '4px', top: '4px' }"
-              :class="localChecked ? 'bg-brand-on-secondary' : 'bg-surface-on-surface-variant'"></span>
+              :class="
+                localChecked
+                  ? 'bg-brand-on-secondary'
+                  : 'bg-surface-on-surface-variant'
+              "
+            ></span>
           </span>
         </label>
       </div>
     </div>
-    <div v-if="description || $slots.description" class="self-stretch inline-flex justify-start items-center gap-2.5">
-      <div class="flex-1 justify-start text-surface-on-surface-variant text-sm font-normal leading-tight">
+    <div
+      v-if="description || $slots.description"
+      class="self-stretch inline-flex justify-start items-center gap-2.5"
+    >
+      <div
+        class="flex-1 justify-start text-surface-on-surface-variant text-sm font-normal leading-tight"
+      >
         <slot name="description">{{ description }}</slot>
       </div>
     </div>
@@ -82,7 +116,9 @@ const activateByClick = (ev?: Event) => {
 
 <style scoped>
 .switch-track {
-  transition: background-color 180ms ease-in-out, box-shadow 180ms ease-in-out;
+  transition:
+    background-color 180ms ease-in-out,
+    box-shadow 180ms ease-in-out;
 }
 
 .switch-track--on {
@@ -91,7 +127,10 @@ const activateByClick = (ev?: Event) => {
 }
 
 .switch-knob {
-  transition: left 180ms cubic-bezier(.2, .9, .2, 1), top 180ms cubic-bezier(.2, .9, .2, 1), background-color 120ms linear;
+  transition:
+    left 180ms cubic-bezier(0.2, 0.9, 0.2, 1),
+    top 180ms cubic-bezier(0.2, 0.9, 0.2, 1),
+    background-color 120ms linear;
 }
 
 .switch-track:focus {

package/app/components/ui/WishlistIcon.vue

@@ -9,7 +9,13 @@ const { filled = false } = defineProps<{
     <!-- <Icon size="1rem" name="shopware:heart" v-if="type !== 'filled'" class="w-6 h-5 block hover:cursor-pointer" :class="[
       styles[type]
     ]" /> -->
-    <div class="i-carbon-favorite w-6 h-5 hover:cursor-pointer" v-if="!filled"></div>
-    <div class="i-carbon-favorite-filled w-6 h-5 hover:cursor-pointer" v-else></div>
+    <div
+      class="i-carbon-favorite w-6 h-5 hover:cursor-pointer"
+      v-if="!filled"
+    ></div>
+    <div
+      class="i-carbon-favorite-filled w-6 h-5 hover:cursor-pointer"
+      v-else
+    ></div>
   </div>
 </template>

package/app/composables/useImagePlaceholder.ts

@@ -1,4 +1,4 @@
-import { useAppConfig } from "nuxt/app";
+import { useTypedAppConfig } from "./useTypedAppConfig";
 
 /**
  * Composable that provides an SVG placeholder image as a data URI
@@ -8,7 +8,7 @@ import { useAppConfig } from "nuxt/app";
  * @returns Base64-encoded SVG data URI
  */
 export function useImagePlaceholder(color?: string) {
-  const appConfig = useAppConfig();
+  const appConfig = useTypedAppConfig();
   const placeholderColor =
     color || appConfig.imagePlaceholder?.color || "#543B95";
 

package/app/composables/useLcpImagePreload.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+
 import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
 
 type Sections = Parameters<typeof findFirstCmsImageUrl>[0];

package/app/composables/useLcpImagePreload.ts

@@ -1,7 +1,10 @@
 import { computed } from "vue";
-import { useAppConfig, useHead } from "#imports";
+
+import { useHead } from "#imports";
 import type { Schemas } from "#shopware";
+
 import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
+import { useTypedAppConfig } from "./useTypedAppConfig";
 
 /**
  * Preloads the first image found in CMS sections (background or element).
@@ -11,13 +14,16 @@ import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
  * allowing the browser to fetch the image before parsing CSS.
  */
 export function useLcpImagePreload(sections: Schemas["CmsSection"][]) {
-  const appConfig = useAppConfig();
+  const appConfig = useTypedAppConfig();
+  const isEnabled = Boolean(appConfig.lcpImagePreload);
 
   const lcpImageHref = computed(() =>
-    findFirstCmsImageUrl(sections, {
-      format: appConfig.backgroundImage?.format,
-      quality: appConfig.backgroundImage?.quality,
-    }),
+    isEnabled
+      ? findFirstCmsImageUrl(sections, {
+          format: appConfig.backgroundImage?.format,
+          quality: appConfig.backgroundImage?.quality,
+        })
+      : undefined,
   );
 
   useHead(

package/app/composables/useTypedAppConfig.ts

@@ -0,0 +1,16 @@
+import type { BackgroundImageOptions } from "@shopware/helpers";
+
+import { useAppConfig } from "#imports";
+
+type CmsBaseLayerAppConfig = ReturnType<typeof useAppConfig> & {
+  imagePlaceholder?: {
+    color?: string;
+  };
+  backgroundImage?: BackgroundImageOptions;
+  imageSizes?: Record<string, string>;
+  lcpImagePreload?: boolean;
+};
+
+export function useTypedAppConfig() {
+  return useAppConfig() as CmsBaseLayerAppConfig;
+}

package/app/helpers/cms/getImageSizes.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+
 import { getImageSizes } from "./getImageSizes";
 
 describe("getImageSizes", () => {

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

@@ -3,6 +3,7 @@
  */
 // @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[];

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

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
+
 import { getOptionsFromNode } from "./getOptionsFromNode";
 import type { NodeObject } from "./getOptionsFromNode";
 

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

@@ -3,6 +3,7 @@
  */
 
 import type { ComponentInternalInstance, h } from "vue";
+
 import { type RectifyConfig, generateAST, rectifyAST } from "./ast";
 import { type RendererConfig, renderer } from "./renderer";
 

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

@@ -3,6 +3,7 @@
  */
 
 import type { ComponentInternalInstance, VNode } from "vue";
+
 import { isNode } from "./ast";
 import type { NodeObject } from "./getOptionsFromNode";
 import { getOptionsFromNode } from "./getOptionsFromNode";

package/app/providers/shopware.test.ts

@@ -1,5 +1,6 @@
 import type { ImageCTX } from "@nuxt/image";
 import { describe, expect, it } from "vitest";
+
 import shopwareProvider from "./shopware";
 
 describe("Shopware Image Provider", () => {

package/index.d.ts

@@ -3,34 +3,42 @@
 export * from "@shopware/composables";
 export * from "./.nuxt/imports";
 
+type CmsBaseLayerAppConfig = {
+  /** 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;
+  };
+  /** Preload the first CMS image as a likely LCP candidate */
+  lcpImagePreload?: boolean;
+  /**
+   * 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>;
+};
+
 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;
-  }
+  interface AppConfig extends CmsBaseLayerAppConfig {}
+  interface AppConfigInput extends CmsBaseLayerAppConfig {}
+}
+
+declare module "@nuxt/schema" {
+  interface AppConfig extends CmsBaseLayerAppConfig {}
+  interface AppConfigInput extends CmsBaseLayerAppConfig {}
 }

package/nuxt.config.ts

@@ -111,6 +111,11 @@ export default defineNuxtConfig({
   build: {
     transpile: ["@shopware/cms-base-layer"],
   },
+  vite: {
+    optimizeDeps: {
+      include: ["xss"],
+    },
+  },
   telemetry: {
     enabled: false,
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "2.1.0",
+  "version": "3.0.1",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -32,45 +32,42 @@
     "uno.config.ts"
   ],
   "dependencies": {
-    "@iconify-json/carbon": "1.2.18",
+    "@iconify-json/carbon": "1.2.23",
     "@nuxt/image": "2.0.0",
-    "@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",
+    "@nuxt/kit": "4.4.8",
+    "@tresjs/cientos": "5.7.2",
+    "@tresjs/nuxt": "^5.6.1",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "14.1.0",
+    "@vueuse/core": "14.3.0",
     "entities": "6.0.0",
+    "scule": "1.3.0",
     "html-to-ast": "0.0.6",
-    "three": "0.182.0",
-    "unocss": "66.6.0",
-    "vue": "3.5.27",
+    "three": "0.183.2",
+    "vue": "3.5.38",
     "xss": "1.0.15",
-    "@shopware/api-client": "1.5.0",
-    "@shopware/composables": "1.11.0",
-    "@shopware/helpers": "1.7.0"
+    "@shopware/helpers": "1.7.1",
+    "@shopware/composables": "1.12.0",
+    "@shopware/api-client": "1.5.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
-    "@nuxt/schema": "4.2.2",
+    "@nuxt/schema": "4.4.8",
     "@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/native-preview": "7.0.0-dev.20260205.1",
+    "@vitest/coverage-v8": "4.1.9",
+    "nuxt": "4.4.8",
     "typescript": "5.9.3",
-    "unbuild": "2.0.0",
-    "vitest": "4.0.18",
-    "vue-router": "4.6.4",
-    "vue-tsc": "3.2.2",
+    "unbuild": "3.6.1",
+    "vitest": "4.1.9",
+    "vue-router": "5.1.0",
+    "vue-tsc": "3.3.5",
     "tsconfig": "0.0.0"
   },
   "scripts": {
     "build": "nuxt prepare && unbuild",
     "dev": "unbuild --stub",
-    "lint": "biome check .",
-    "lint:fix": "biome check . --write && pnpm run typecheck",
+    "lint": "oxlint . && oxfmt --check .",
+    "lint:fix": "oxlint --fix . && oxfmt --write . && pnpm run typecheck",
     "typecheck": "pnpm nuxt prepare && tsgo --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",

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

@@ -1,23 +0,0 @@
-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/uno.config.ts

@@ -1,94 +0,0 @@
-import {
-  defineConfig,
-  presetAttributify,
-  presetIcons,
-  presetTypography,
-  presetWind3,
-} from "unocss";
-
-export default defineConfig({
-  shortcuts: {},
-  preflights: [
-    {
-      getCSS: () => `
-        /* Filter collapse transition */
-        .filter-collapse-enter-active,
-        .filter-collapse-leave-active {
-          transition: all 0.3s ease-in-out;
-          overflow: hidden;
-        }
-
-        .filter-collapse-enter-from,
-        .filter-collapse-leave-to {
-          max-height: 0;
-          opacity: 0;
-        }
-
-        .filter-collapse-enter-to,
-        .filter-collapse-leave-from {
-          max-height: 1000px;
-          opacity: 1;
-        }
-      `,
-    },
-  ],
-  theme: {
-    colors: {
-      "brand-primary": "#543B95",
-      "surface-surface": "#FFFFFF",
-      "outline-outline": "#79747E",
-      "outline-outline-variant": "#CAC4D0",
-      "outline-outline-primary": "#543B95",
-      "surface-on-surface": "#1D1B20",
-      "surface-surface-variant": "#FBF6FF",
-      "states-success": "#15B31C",
-      "surface-on-surface-variant": "#696470",
-      "surface-surface-disabled": "#E8E8E8",
-      "surface-on-surface-disabled": "#9893A6",
-      "surface-surface-primary": "#D0BCFF",
-      "states-warning": "#F57C00",
-      "surface-surface-container": "#F3EDF7",
-      "surface-surface-container-highest": "#E6E0E9",
-      "states-error": "#D12D24",
-      "states-on-error": "#FFFFFF",
-      "brand-primary-hover": "#45317A",
-      "brand-on-primary": "#FFFFFF",
-      "brand-secondary": "#E1D5FF",
-      "brand-secondary-hover": "#D0BCFC",
-      "brand-on-secondary": "#3A276A",
-      "brand-tertiary": "#F1F1F1",
-      "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",
-      Noto_Serif: "Noto Serif",
-    },
-  },
-  safelist: ["states-success", "states-error", "states-info", "states-warning"],
-  presets: [
-    presetWind3(),
-    presetIcons({
-      collections: {
-        carbon: () =>
-          import("@iconify-json/carbon/icons.json", {
-            with: { type: "json" },
-          }).then((i) => i.default),
-      },
-    }),
-    presetAttributify(),
-    presetTypography(),
-  ],
-});