@shopware/cms-base-layer 2.1.0 → 3.0.0

package/README.md

@@ -5,14 +5,14 @@
 [![](https://img.shields.io/github/issues/shopware/frontends/cms-base?label=cms-base%20issues&logo=github)](https://github.com/shopware/frontends/issues?q=is%3Aopen+is%3Aissue+label%3Acms-base)
 [![](https://img.shields.io/github/license/shopware/frontends?color=blue)](#)
 
-Nuxt [layer](https://nuxt.com/docs/getting-started/layers) that provides an implementation of all CMS components in Shopware [based on utility-classes](https://frontends.shopware.com/framework/styling.html) using atomic css syntax (UnoCss / Tailwind).
+Nuxt [layer](https://nuxt.com/docs/getting-started/layers) that provides an implementation of all CMS components in Shopware [based on utility-classes](https://frontends.shopware.com/framework/styling.html).
 
-It is useful for projects that want to use the CMS components but design their own layout.
+It is useful for projects that want to use the CMS components while keeping CMS functionality separate from the styling system and design tokens.
 
 ## Features
 
 - Vue components for [Shopping Experiences](https://www.shopware.com/en/products/shopping-experiences/) CMS
-- CMS sections, blocks and elements styled using [Tailwind CSS](https://tailwindcss.com/) classes
+- CMS sections, blocks and elements implemented with utility-class-based markup
 - 🚀 Empowered by [@shopware/composables](https://www.npmjs.com/package/@shopware/composables)
 
 ## Setup
@@ -32,25 +32,30 @@ npm install -D @shopware/cms-base-layer
 yarn add -D @shopware/cms-base-layer
 
 # pnpm
-pnpm install -D @shopware/cms-base-layer
+pnpm add -D @shopware/cms-base-layer
 
 # bun
 bun install -D @shopware/cms-base-layer
 
 # deno
-deno install --dev @shopware/cms-base-layer
+deno install --dev npm:@shopware/cms-base-layer
 ```
 
 <!-- /automd -->
 
+If you also want the shared Shopware Frontends UnoCSS setup, install `@shopware/unocss-design-tokens-layer` in your app and extend it alongside `@shopware/cms-base-layer`.
+
 Then, register the Nuxt layer in `nuxt.config.ts` file:
 
 <!-- automd:file src="templates/vue-blank/nuxt.config.ts" code -->
 
 ```ts [nuxt.config.ts]
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
+const isStackBlitz = process.env.SHOPWARE_STACKBLITZ === "true";
+
 export default defineNuxtConfig({
   extends: ["@shopware/composables/nuxt-layer", "@shopware/cms-base-layer"],
+  ...(isStackBlitz ? { devtools: { enabled: false } } : {}),
   shopware: {
     endpoint: "https://demo-frontends.shopware.store/store-api/",
     accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
@@ -83,15 +88,20 @@ Since all CMS components are registered in your Nuxt application, you can now st
 </template>
 ```
 
-> You can use default styling by installing/importing Tailwind CSS stylesheet in your project.
+> `@shopware/cms-base-layer` no longer owns the default UnoCSS theme. If you want the shared Shopware Frontends design tokens and UnoCSS defaults, extend `@shopware/unocss-design-tokens-layer` as shown above.
+
+See a [short guide](https://frontends.shopware.com/getting-started/cms/content-pages.html#use-the-cms-base-package) on how to use `cms-base-layer` in your Nuxt project.
+
+## Styling and Design Tokens
 
-See a [short guide](https://frontends.shopware.com/getting-started/cms/content-pages.html#use-the-cms-base-package) how to use `cms-base` package in your project based on Nuxt v3.
+The components use utility classes, but the shared UnoCSS configuration, design tokens, and runtime handling for dynamic CMS classes are now provided by `@shopware/unocss-design-tokens-layer`.
 
-## Default styling
+This means you have two options:
 
-The components are styled using [Tailwind CSS](https://tailwindcss.com/) utility classes, so you can use them in your project without any additional configuration if your project uses Tailwind CSS. 
+- extend `@shopware/unocss-design-tokens-layer` to use the shared Shopware Frontends token palette and UnoCSS defaults
+- keep only `@shopware/cms-base-layer` and provide your own UnoCSS or Tailwind setup
 
-This layer provides a default Tailwind CSS configuration (see [uno.config.ts](./uno.config.ts) for details), which is used to style the components. If you want to customize the styling, you can do so by creating your own Tailwind CSS configuration file and extending the default one:
+When you use the design-tokens layer, you can customize the generated config in your project's `uno.config.ts`:
 
 ```ts [nuxt.config.ts]
 // nuxt.config.ts
@@ -104,24 +114,14 @@ export default defineNuxtConfig({
 ```
 
 ```ts [uno.config.ts]
-// uno.config.ts
-import config from './.nuxt/uno.config.mjs'
-
-export default config
-```
-
-Thanks to this, you can **use the default configuration** provided by this layer, or **extend/overwrite** it with your own customizations in your end-project:
-
-```ts [uno.config.ts]
-// uno.config.ts
 import { mergeConfigs } from '@unocss/core'
-import config from './.nuxt/uno.config.mjs'
+import baseConfig from './.nuxt/uno.config.mjs'
 
-export default mergeConfigs([config, {
+export default mergeConfigs([baseConfig, {
   theme: {
     colors: {
-      primary: '#ff3e00',
-      secondary: '#1c1c1c',
+      'brand-primary': '#ff3e00',
+      'brand-secondary': '#1c1c1c',
     },
   },
 }])
@@ -372,72 +372,52 @@ The preload URL includes the optimized `format` and `quality` parameters from `a
 
 ## Responsive CMS Images
 
-CMS image elements (`CmsElementImage`) automatically serve appropriately-sized images using responsive `srcset` and `sizes` attributes. This prevents the browser from downloading images larger than their displayed dimensions — a common Lighthouse performance issue.
-
-### How it works
-
-1. **`CmsGenericBlock`** counts the number of slots in each block, `provide`s a responsive `sizes` value (e.g., a 2-slot block means images are ~50% viewport width on desktop), and `provide`s the slot count via `cms-block-slot-count` for slider SSR breakpoint scaling.
-2. **`CmsElementImage`** `inject`s the sizes hint and applies it to `<NuxtImg>`.
-3. If the media has **pre-generated thumbnails** from Shopware, the existing `srcset` from thumbnails is used.
-4. If **no thumbnails** exist, a synthetic `srcset` is generated using CDN width-based resizing (`?width=400`, `?width=800`, etc.) via the `generateCdnSrcSet` helper from `@shopware/helpers`.
-5. **Slider components** (`CmsElementProductSlider`, `CmsElementCrossSelling`) `inject` the slot count to scale their SSR breakpoints — ensuring media queries account for the container being a fraction of the viewport (e.g., a 2-slot block doubles the breakpoint thresholds).
+Images are optimized to prevent the browser from downloading images larger than their displayed dimensions — a common Lighthouse performance issue.
 
-The browser combines `sizes` + `srcset` to download only the image size it actually needs — during HTML parsing, before any JavaScript runs.
+### Product Card Images (`SwProductCardImage`)
 
-### Configuration
-
-Default slot-count-to-sizes mappings are set in `app.config.ts` and can be overridden:
+The `productCard` preset only defines URL modifiers (format/quality/fit). `width`/`height`/`densities`/`loading` stay on the component — NuxtImg presets don't propagate these reliably:
 
 ```ts
-export default defineAppConfig({
-  imageSizes: {
-    // slot count → sizes attribute value
-    1: "(max-width: 768px) 100vw, 100vw",   // full-width blocks
-    2: "(max-width: 768px) 100vw, 50vw",    // two-column blocks (e.g., image-text)
-    3: "(max-width: 768px) 100vw, 33vw",    // three-column blocks
-    default: "(max-width: 768px) 50vw, 25vw", // 4+ columns
-  },
-});
+// nuxt.config.ts
+productCard: {
+  modifiers: { format: "webp", quality: 90, fit: "cover" },
+}
 ```
 
-For example, to cap image sizes at a fixed pixel width for boxed layouts:
-
-```ts
-export default defineAppConfig({
-  imageSizes: {
-    1: "(max-width: 768px) 100vw, 1200px",
-    2: "(max-width: 768px) 100vw, 600px",
-    3: "(max-width: 768px) 100vw, 400px",
-    default: "(max-width: 768px) 50vw, 300px",
-  },
-});
+```vue
+<NuxtImg preset="productCard"
+  :src="coverSrcPath"
+  width="400" height="400"
+  densities="1x"
+  loading="lazy" />
 ```
 
-### Per-block override
+- **Fixed `width`/`height`** (400px) — avoid hydration mismatches caused by dynamic DOM measurement
+- **`densities="1x"`** — prevents duplicate retina requests
+- **`loading="lazy"`** — defers off-viewport images
 
-Individual block components can override the sizes value by calling `provide("cms-image-sizes", "custom value")` — this takes precedence over the default from `CmsGenericBlock`.
+> **⚠️ Avoid** adding `decoding` or `sizes` props on the component — they trigger Vue hydration attribute mismatches with NuxtImg, which cause duplicate image requests.
 
-### Synthetic srcset fallback
+### CMS Images (`CmsElementImage`)
 
-When Shopware media has no thumbnails (common in Cloud/SaaS setups using CDN-based resizing), the layer generates a synthetic `srcset` using CDN query parameters:
+CMS image elements use `useElementSize()` to measure the rendered container and pass the size to `<NuxtImg>` via `width`/`height` props:
 
-```html
-<img srcset="
-  ...image.jpg?width=400&fit=crop,smart&format=webp&quality=90 400w,
-  ...image.jpg?width=800&fit=crop,smart&format=webp&quality=90 800w,
-  ...image.jpg?width=1200&fit=crop,smart&format=webp&quality=90 1200w,
-  ...image.jpg?width=1600&fit=crop,smart&format=webp&quality=90 1600w"
-  sizes="(max-width: 768px) 100vw, 50vw"
->
-```
+- During SSR, no image is fetched (size is `undefined`)
+- After hydration, the container is measured and a single correctly-sized image is requested
+- The size is multiplied by 2 (for retina) and rounded up to the nearest 100px
+
+### Slider Components
 
-The `format` and `quality` values are taken from the `backgroundImage` config in `app.config.ts`.
+**Slider components** (`CmsElementProductSlider`, `CmsElementCrossSelling`) `inject` the slot count via `cms-block-slot-count` to scale their SSR breakpoints — ensuring media queries account for the container being a fraction of the viewport.
 
-> **Note:** Synthetic srcset requires CDN-based image resizing support. See the [Image Optimization](#%EF%B8%8F-image-optimization) section for requirements.
+### LCP Image Preloading
+
+**`useLcpImagePreload`** scans CMS sections for the first image and injects `<link rel="preload" as="image" fetchpriority="high">` during SSR.
 
 ## 🔄 UnoCSS Runtime
 
-This layer includes a client-side [UnoCSS runtime](https://unocss.dev/integrations/runtime) plugin that resolves utility classes dynamically at runtime using a DOM MutationObserver. This is useful when CMS content from Shopware contains utility classes that aren't known at build time (e.g., inline styles or dynamic class bindings from the admin panel).
+When you extend `@shopware/unocss-design-tokens-layer`, you also get a client-side [UnoCSS runtime](https://unocss.dev/integrations/runtime) plugin that resolves utility classes dynamically at runtime using a DOM MutationObserver. This is useful when CMS content from Shopware contains utility classes that aren't known at build time (for example inline utility classes configured in the admin panel).
 
 The runtime is **enabled by default**. To disable it, set `unocssRuntime` to `false` in your project's `app.config.ts`:
 
@@ -494,42 +474,36 @@ No additional packages needed to be installed.
 
 Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/CHANGELOG.md)
 
-### Latest changes: 2.1.0
-
-### Minor Changes
+### Latest changes: 3.0.0
 
-- [#2275](https://github.com/shopware/frontends/pull/2275) [`432dd24`](https://github.com/shopware/frontends/commit/432dd246571dfa8c149293da97d5bb16f505e54c) Thanks [@mkucmus](https://github.com/mkucmus)! - - Add configurable UnoCSS runtime plugin for dynamic CMS class support
-  - Extend theme with overlay and fixed color tokens
+### Major Changes
 
-- [#2223](https://github.com/shopware/frontends/pull/2223) [`1db8704`](https://github.com/shopware/frontends/commit/1db870413dcea13c690504ffcaee13526bc8035f) Thanks [@mkucmus](https://github.com/mkucmus)! - Add horizontal filter layout for product listings. When the sidebar filter element is placed outside a sidebar section, filters now display as horizontal dropdowns.
+- [#2406](https://github.com/shopware/frontends/pull/2406) [`df93461`](https://github.com/shopware/frontends/commit/df93461434cb79ec9d722cdbd42a37a9af07fb03) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Remove bundled UnoCSS configuration and design tokens from the CMS layer. Consumers who relied on the previous default UnoCSS setup should extend `@shopware/unocss-design-tokens-layer` alongside this package. See the package README and framework docs for migration steps.
 
-  Includes new `SwFilterDropdown` and `SwProductListingFiltersHorizontal` components, with a `displayMode` prop added to all filter components to support both layouts.
+### Minor Changes
 
-- [#2287](https://github.com/shopware/frontends/pull/2287) [`c9bde38`](https://github.com/shopware/frontends/commit/c9bde38d497d5c6c2fbd97700a362eb44ce8881f) Thanks [@mkucmus](https://github.com/mkucmus)! - Add responsive image sizing (srcset/sizes) via provide/inject, LCP preload with fetchpriority, configurable imageSizes in app.config, ISR route rules, inline styles, and AppConfig type declarations
+- [#2420](https://github.com/shopware/frontends/pull/2420) [`9e37ab6`](https://github.com/shopware/frontends/commit/9e37ab6897f501ed3d261fa619aee349e46342c2) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Add FrontendAccountCustomerGroupRegistrationPage component for customer group view
 
-- [#2241](https://github.com/shopware/frontends/pull/2241) [`9ccbaa1`](https://github.com/shopware/frontends/commit/9ccbaa1fb6cc1f790d979c3dd3745c5402b6d8d1) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Replace `withDefaults` by props destructure
+### Patch Changes
 
-- [#2273](https://github.com/shopware/frontends/pull/2273) [`18455e7`](https://github.com/shopware/frontends/commit/18455e77221fcc77b119d0ba7eae89dfce0e2941) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Remove SwMedia3D.vue component from autoload
+- [#2439](https://github.com/shopware/frontends/pull/2439) [`a992e39`](https://github.com/shopware/frontends/commit/a992e396ea6aa3b44783d183561fa8b0605b77f0) Thanks [@patzick](https://github.com/patzick)! - Use Nuxt route composables in CMS components to keep route query access available during SSR.
 
-- [#2268](https://github.com/shopware/frontends/pull/2268) [`c3fff84`](https://github.com/shopware/frontends/commit/c3fff847e46a17c9c905bd893f1c1de287426c65) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Improve accessibility (A11y) of CMS base layer components.
+- [#2389](https://github.com/shopware/frontends/pull/2389) [`05438c6`](https://github.com/shopware/frontends/commit/05438c636a6c99b48e87d8f2ff5b03bf313c4e67) Thanks [@mkucmus](https://github.com/mkucmus)! - Fix product card and CMS image sizing to prevent duplicate/oversized image requests. Move fixed dimensions and `densities="1x"` into the `productCard` preset, and use `useElementSize`-based `width`/`height` props for `CmsElementImage`.
 
-- [#2214](https://github.com/shopware/frontends/pull/2214) [`ccb9384`](https://github.com/shopware/frontends/commit/ccb93849be07f1b6a4e192de02579a528b5b6ac4) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Add full TypeScript typing to html-to-vue helper functions
+- [#2378](https://github.com/shopware/frontends/pull/2378) [`c36bc1f`](https://github.com/shopware/frontends/commit/c36bc1ff17e8e34c52fa91e6388ce210fffb7e8e) Thanks [@patzick](https://github.com/patzick)! - Add UnoCSS directive transformation for CMS block styles so layered Nuxt apps do not emit CSS minification warnings from raw `@apply` directives during production builds.
 
-### Patch Changes
+- [#2369](https://github.com/shopware/frontends/pull/2369) [`3c16985`](https://github.com/shopware/frontends/commit/3c16985ddf3878bc207c514a5ab8e4a6409f809c) Thanks [@mkucmus](https://github.com/mkucmus)! - Fixed `xss` library loading issue in Vite dev server by adding it to `optimizeDeps.include`
 
-- [#2226](https://github.com/shopware/frontends/pull/2226) [`d77eacc`](https://github.com/shopware/frontends/commit/d77eaccdec6c56a6f2d999048c751fb9f01177d4) Thanks [@mkucmus](https://github.com/mkucmus)! - Add config prop support to `SwProductGallery` and make `CmsElementImageGallery` respect `minHeight`, `navigationArrows`, and `navigationDots` config values.
+- [#2371](https://github.com/shopware/frontends/pull/2371) [`33e0c69`](https://github.com/shopware/frontends/commit/33e0c69afc3de854733ab61f866ba65cce1489f6) Thanks [@patzick](https://github.com/patzick)! - Disable automatic CMS LCP image preload by default.
 
-- [#2275](https://github.com/shopware/frontends/pull/2275) [`432dd24`](https://github.com/shopware/frontends/commit/432dd246571dfa8c149293da97d5bb16f505e54c) Thanks [@mkucmus](https://github.com/mkucmus)! - - Fix CMS block layout: height propagation in CmsBlockImageText, conditional `h-full` in CmsElementImage, `backgroundSize` forwarding in CmsGenericBlock, `w-full` for full_width sizing mode, and exclude `sizingMode` from section inline styles
-  - Fix vertical alignment support in CmsElementText and CmsElementProductSlider using `align-content` CSS property
-  - Remove rounded corners from image placeholder SVG and simplify CmsBlockTextOnImage structure
+  The preload helper now only injects image preload tags when
+  `appConfig.lcpImagePreload` is explicitly enabled, which avoids noisy preload
+  warnings on storefront pages that do not immediately use the detected image.
 
-- [#2210](https://github.com/shopware/frontends/pull/2210) [`c6b88b7`](https://github.com/shopware/frontends/commit/c6b88b7d2c50054188356aeb0f83053554d442f5) Thanks [@mkucmus](https://github.com/mkucmus)! - Anchor tags with "btn btn-primary" classes from the API were not being
-  transformed to Tailwind utility classes due to condition matching issues
-  in the html-to-vue renderer.
+- [#2326](https://github.com/shopware/frontends/pull/2326) [`e7efff8`](https://github.com/shopware/frontends/commit/e7efff8c615ae8d0858572933285216cc533dd0b) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Gate wishlist button behind login when useLoginModal is provided via provide/inject. For guests, show login modal on wishlist click and add product to wishlist after successful login.
 
-- [#2318](https://github.com/shopware/frontends/pull/2318) [`b40305f`](https://github.com/shopware/frontends/commit/b40305f9e2ec51f29c279650e411bb773438faed) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Components (CmsElementBuyBox, SwListingProductPrice, SwProductPrice) updated to use `hasListPrice` instead of deprecated `isListPrice`.
+- [#2346](https://github.com/shopware/frontends/pull/2346) [`a47143a`](https://github.com/shopware/frontends/commit/a47143a670f49deecc35dce4bb8b6bd12d9a3b47) Thanks [@joberthel](https://github.com/joberthel)! - Improve `SwMedia3D` model framing by fitting loaded 3D models into the viewport automatically. This fixes cases where very small 3D files appeared tiny and hard to inspect.
 
-- Updated dependencies [[`9604f22`](https://github.com/shopware/frontends/commit/9604f22678150d04c3c3156fd8ee2ce440c8c8bf), [`b40305f`](https://github.com/shopware/frontends/commit/b40305f9e2ec51f29c279650e411bb773438faed), [`432dd24`](https://github.com/shopware/frontends/commit/432dd246571dfa8c149293da97d5bb16f505e54c), [`b5f7e2a`](https://github.com/shopware/frontends/commit/b5f7e2a20c9dfdde1690e9006252d847f732bc0a), [`b5f7e2a`](https://github.com/shopware/frontends/commit/b5f7e2a20c9dfdde1690e9006252d847f732bc0a), [`9604f22`](https://github.com/shopware/frontends/commit/9604f22678150d04c3c3156fd8ee2ce440c8c8bf), [`a871c7b`](https://github.com/shopware/frontends/commit/a871c7b6256b75c2e40d93fc0354ba1971420062), [`c9bde38`](https://github.com/shopware/frontends/commit/c9bde38d497d5c6c2fbd97700a362eb44ce8881f)]:
-  - @shopware/api-client@1.5.0
-  - @shopware/composables@1.11.0
-  - @shopware/helpers@1.7.0
+- Updated dependencies [[`22fc8a7`](https://github.com/shopware/frontends/commit/22fc8a7301f6a7d2612d907ab73555978b651c00), [`bea7f58`](https://github.com/shopware/frontends/commit/bea7f5882cb58c6d47c84a82db5c8ecaf9bcf8ef), [`b8c0091`](https://github.com/shopware/frontends/commit/b8c00913c3afb5e1e63de9565105f8f8e3bf299f)]:
+  - @shopware/helpers@1.7.1
+  - @shopware/composables@1.11.1

package/app/app.config.ts

@@ -8,6 +8,7 @@ export default defineAppConfig({
     format: "webp",
     quality: 90,
   },
+  lcpImagePreload: false,
   imageSizes: {
     1: "(max-width: 768px) 100vw, 100vw",
     2: "(max-width: 768px) 100vw, 50vw",

package/app/components/SwMedia3D.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { OrbitControls, useGLTF } from "@tresjs/cientos";
+import { Bounds, OrbitControls, useGLTF } from "@tresjs/cientos";
 import { TresCanvas } from "@tresjs/core";
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from "three";
-import { computed } from "vue";
+import { computed, shallowRef } from "vue";
 
 const props = defineProps<{
   src: string;
@@ -20,16 +20,23 @@ const gl = {
 
 const { state } = await useGLTF(props.src);
 const model = computed(() => state.value?.scene);
+
+const boundsRef = shallowRef();
+
+function focusObject() {
+  boundsRef.value?.instance.lookAt(model.value);
+}
 </script>
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera
       :args="[75, 1, 0.1, 2000]"
       :position="[0, 0, 500]"
-      :look-at="[0, 0, 0]"
     />
-    <OrbitControls />
-    <primitive v-if="model" :object="model" />
+    <OrbitControls make-default />
+    <Bounds ref="boundsRef" clip use-mounted>
+      <primitive v-if="model" :object="model" @click="focusObject" />
+    </Bounds>
     <TresDirectionalLight :position="[3, 3, 3]" :intensity="1" />
     <TresAmbientLight :intensity="2" />
   </TresCanvas>

package/app/components/SwProductCard.vue

@@ -50,6 +50,8 @@ type Translations = {
     badges: {
       topseller: string;
     };
+    addToWishlist: string;
+    removeFromWishlist: string;
   };
   errors: {
     [key: string]: string;
@@ -68,6 +70,8 @@ let translations: Translations = {
     badges: {
       topseller: "Tip",
     },
+    addToWishlist: "Add to wishlist",
+    removeFromWishlist: "Remove from wishlist",
   },
   errors: {
     "product-stock-reached":

package/app/components/SwProductCardImage.vue

@@ -5,9 +5,8 @@ import {
   isProductOnSale,
   isProductTopSeller,
 } from "@shopware/helpers";
-import { useElementSize } from "@vueuse/core";
-import { computed, useTemplateRef } from "vue";
-import { useImagePlaceholder } from "#imports";
+import { computed, inject } from "vue";
+import { useUser } from "#imports";
 import type { Schemas } from "#shopware";
 
 type Translations = {
@@ -15,6 +14,8 @@ type Translations = {
     badges: {
       topseller: string;
     };
+    addToWishlist: string;
+    removeFromWishlist: string;
   };
 };
 
@@ -27,32 +28,13 @@ const props = defineProps<{
   productLink: UrlRouteOutput;
 }>();
 
-const containerElement = useTemplateRef<HTMLDivElement>("containerElement");
-const { width, height } = useElementSize(containerElement);
-
-const DEFAULT_THUMBNAIL_SIZE = 10;
-function roundUp(num: number) {
-  return num ? Math.ceil(num / 100) * 100 : DEFAULT_THUMBNAIL_SIZE;
-}
-
 const coverSrcPath = computed(() => {
   return (
-    getSmallestThumbnailUrl(props.product?.cover?.media) ||
-    props.product?.cover?.media?.url
+    props.product?.cover?.media?.url ||
+    getSmallestThumbnailUrl(props.product?.cover?.media)
   );
 });
 
-const imageModifiers = computed(() => {
-  // Use the larger dimension and apply 2x for high-DPI displays
-  // For square containers, width and height should be the same
-  const containerSize = Math.max(width.value || 0, height.value || 0);
-  const size = roundUp(containerSize * 2);
-  return {
-    width: size,
-    height: size,
-  };
-});
-
 const coverAlt = computed(() => {
   return props.product?.cover?.media?.alt || props.product?.translated?.name;
 });
@@ -60,16 +42,30 @@ const coverAlt = computed(() => {
 const isOnSale = computed(() => isProductOnSale(props.product));
 const isTopseller = computed(() => isProductTopSeller(props.product));
 
-const placeholderSvg = useImagePlaceholder();
+const { isLoggedIn } = useUser();
+const loginModal = inject<{
+  open: (options?: { onSuccess?: () => void | Promise<void> }) => void;
+} | null>("loginModal", null);
+
+function handleWishlistClick() {
+  if (isLoggedIn.value || !loginModal) {
+    props.toggleWishlist();
+    return;
+  }
+  loginModal.open({ onSuccess: props.toggleWishlist });
+}
 </script>
 
 <template>
-  <div ref="containerElement" class="self-stretch min-h-[350px] relative flex flex-col justify-start items-start overflow-hidden aspect-square">
+  <div class="self-stretch min-h-[350px] relative flex flex-col justify-start items-start overflow-hidden aspect-square">
     <RouterLink :to="productLink" class="self-stretch h-full relative overflow-hidden">
       <NuxtImg preset="productCard"
         class="w-full h-full absolute top-0 left-0 object-cover"
-        :placeholder="placeholderSvg"
-        :src="coverSrcPath" :alt="coverAlt" :modifiers="imageModifiers" data-testid="product-box-img" />
+        :src="coverSrcPath" :alt="coverAlt"
+        width="400" height="400"
+        densities="1x"
+        loading="lazy"
+        data-testid="product-box-img" />
     </RouterLink>
 
     <div v-if="isTopseller || isOnSale"
@@ -80,9 +76,11 @@ const placeholderSvg = useImagePlaceholder();
     </div>
 
     <client-only>
-      <SwIconButton type="secondary" aria-label="Toggle wishlist" :disabled="isLoading"
+      <SwIconButton type="secondary"
+        :aria-label="isInWishlist ? translations.product.removeFromWishlist : translations.product.addToWishlist"
+        :disabled="isLoading"
         class="w-10 h-10 right-4 top-4 absolute bg-brand-secondary rounded-full flex items-center justify-center"
-        data-testid="product-box-toggle-wishlist-button" @click="toggleWishlist">
+        data-testid="product-box-toggle-wishlist-button" @click="handleWishlistClick">
         <SwWishlistIcon :filled="isInWishlist" />
       </SwIconButton>
     </client-only>

package/app/components/SwProductListingFilters.vue

@@ -7,8 +7,8 @@ import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed, reactive } from "vue";
 import type { ComputedRef, UnwrapNestedRefs } from "vue";
-import { type LocationQueryRaw, useRoute, useRouter } from "vue-router";
-import { useCategoryListing } from "#imports";
+import type { LocationQueryRaw } from "vue-router";
+import { useCategoryListing, useRoute, useRouter } from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{

package/app/components/SwProductListingFiltersHorizontal.vue

@@ -7,8 +7,8 @@ import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed, reactive } from "vue";
 import type { ComputedRef, UnwrapNestedRefs } from "vue";
-import { type LocationQueryRaw, useRoute, useRouter } from "vue-router";
-import { useCategoryListing } from "#imports";
+import type { LocationQueryRaw } from "vue-router";
+import { useCategoryListing, useRoute, useRouter } from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{

package/app/components/SwVariantConfigurator.vue

@@ -4,8 +4,7 @@ import { buildUrlPrefix, getProductRoute } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, ref, unref } from "vue";
 import type { ComputedRef } from "vue";
-import { useRouter } from "vue-router";
-import { useProductConfigurator, useUrlResolver } from "#imports";
+import { useProductConfigurator, useRouter, useUrlResolver } from "#imports";
 import type { Schemas } from "#shopware";
 
 const { getUrlPrefix } = useUrlResolver();

package/app/components/public/cms/CmsGenericBlock.vue

@@ -4,16 +4,16 @@ import {
   getBackgroundImageUrl,
   getCmsLayoutConfiguration,
 } from "@shopware/helpers";
-import { h, provide } from "vue";
-import { useAppConfig } from "#imports";
+import { h, provide, resolveComponent } from "vue";
 import type { Schemas } from "#shopware";
+import { useTypedAppConfig } from "../../../composables/useTypedAppConfig";
 import { getImageSizes } from "../../../helpers/cms/getImageSizes";
 
 const props = defineProps<{
   content: Schemas["CmsBlock"];
 }>();
 
-const appConfig = useAppConfig();
+const appConfig = useTypedAppConfig();
 
 const slotCount = props.content.slots?.length || 1;
 provide("cms-block-slot-count", slotCount);
@@ -67,7 +67,12 @@ const DynamicRender = () => {
       }),
     );
   }
-  console.error(`Component not resolve: ${componentNameToResolve}`);
+  if (import.meta.dev) {
+    console.warn(
+      `[CMS] Block type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://frontends.shopware.com/getting-started/cms/create-blocks`,
+    );
+    return h(resolveComponent("CmsNoComponent"), { content: props.content });
+  }
   return h("div", {}, "");
 };
 </script>

package/app/components/public/cms/CmsGenericElement.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { resolveCmsComponent } from "@shopware/composables";
 import { getCmsLayoutConfiguration } from "@shopware/helpers";
-import { h } from "vue";
+import { h, resolveComponent } from "vue";
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
@@ -28,7 +28,12 @@ const DynamicRender = () => {
       class: cssClasses,
     });
   }
-  console.error(`Component not resolved: ${componentNameToResolve}`);
+  if (import.meta.dev) {
+    console.warn(
+      `[CMS] Element type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://frontends.shopware.com/getting-started/cms/create-elements`,
+    );
+    return h(resolveComponent("CmsNoComponent"), { content: props.content });
+  }
   return h("div", {}, "");
 };
 </script>

package/app/components/public/cms/CmsNoComponent.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { refAutoReset } from "@vueuse/core";
+import { pascalCase } from "scule";
 import { computed } from "vue";
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
-  content: Schemas["CmsBlock"];
+  content: Schemas["CmsSection"] | Schemas["CmsBlock"] | Schemas["CmsSlot"];
 }>();
 
 const elementType = computed(() =>
@@ -15,13 +17,90 @@ const elementType = computed(() =>
 );
 
 const componentName = computed(() => props.content.type);
+
+const expectedComponentName = computed(() =>
+  pascalCase(`Cms-${elementType.value}-${componentName.value ?? ""}`),
+);
+
+const docsUrl = computed(() => {
+  const params = new URLSearchParams({
+    component: expectedComponentName.value,
+    type: elementType.value.toLowerCase(),
+  });
+  return `https://frontends.shopware.com/getting-started/cms/missing-component?${params}`;
+});
+
+const aiPrompt = computed(() => {
+  const schemaType =
+    props.content.apiAlias === "cms_block"
+      ? 'Schemas["CmsBlock"]'
+      : props.content.apiAlias === "cms_section"
+        ? 'Schemas["CmsSection"]'
+        : 'Schemas["CmsSlot"]';
+
+  const contentJson = JSON.stringify(props.content, null, 2);
+  const type = elementType.value.toLowerCase();
+  const name = componentName.value;
+  const compName = expectedComponentName.value;
+
+  return [
+    `Create a Vue 3 component \`${compName}.vue\` for a Shopware Frontends headless storefront.`,
+    "",
+    `This component renders the CMS ${type} type: "${name}" (apiAlias: "${props.content.apiAlias}").`,
+    "",
+    "Requirements:",
+    `- Accept a \`content: ${schemaType}\` prop`,
+    `- Render the data for CMS ${type} type "${name}"`,
+    `- Follow patterns from existing Cms${elementType.value} components in packages/cms-base-layer/app/components/public/cms/${type}/`,
+    "- Use composables from @shopware/composables where applicable",
+    "",
+    `The full content prop for this ${type} is:`,
+    contentJson,
+    "",
+    `Reference: ${docsUrl.value}`,
+  ].join("\n");
+});
+
+const copied = refAutoReset(false, 2000);
+
+async function copyPrompt() {
+  try {
+    await navigator.clipboard.writeText(aiPrompt.value);
+    copied.value = true;
+  } catch {
+    // Fallback: clipboard API unavailable (non-secure origin, unfocused document)
+    console.warn("[CMS] Could not copy to clipboard. Prompt logged below:");
+    console.info(aiPrompt.value);
+  }
+}
 </script>
-Ū
+
 <template>
-  <span class="sw-text-error">
-    <b>
-      {{ elementType }}<i> {{ componentName }} </i>
-    </b>
-    is not implemented yet!
-  </span>
+  <div
+    class="sw-cms-no-component box-border min-h-[40px] rounded border-2 border-dashed border-brand-primary bg-brand-secondary font-mono text-[11px] text-brand-on-secondary"
+  >
+    <div class="flex flex-wrap items-center gap-1.5 px-2 py-1.5">
+      <span class="text-brand-primary">⚠ missing implementation:</span>
+      <span class="font-semibold">{{ expectedComponentName }}</span>
+
+      <a
+        :href="docsUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="View CMS documentation"
+        class="whitespace-nowrap rounded border border-outline-outline-primary bg-surface-surface px-[5px] py-px text-[10px] leading-none text-brand-primary no-underline hover:bg-brand-secondary-hover"
+      >
+        docs ↗
+      </a>
+
+      <button
+        type="button"
+        title="Copy AI prompt to clipboard"
+        class="cursor-pointer whitespace-nowrap rounded border border-outline-outline-primary bg-surface-surface px-[5px] py-px font-mono text-[10px] leading-none text-brand-primary hover:bg-brand-secondary-hover"
+        @click.stop="copyPrompt"
+      >
+        {{ copied ? "copied ✓" : "copy AI prompt" }}
+      </button>
+    </div>
+  </div>
 </template>

package/app/components/public/cms/CmsPage.vue

@@ -6,20 +6,17 @@ import {
 } from "@shopware/helpers";
 import { pascalCase } from "scule";
 import { computed, h, resolveComponent, watchEffect } from "vue";
-import {
-  createCategoryListingContext,
-  useAppConfig,
-  useNavigationContext,
-} from "#imports";
+import { createCategoryListingContext, useNavigationContext } from "#imports";
 import type { Schemas } from "#shopware";
 import { useLcpImagePreload } from "../../../composables/useLcpImagePreload";
+import { useTypedAppConfig } from "../../../composables/useTypedAppConfig";
 
 const props = defineProps<{
   content: Schemas["CmsPage"];
 }>();
 
 const { routeName } = useNavigationContext();
-const appConfig = useAppConfig();
+const appConfig = useTypedAppConfig();
 
 // Function to initialize or update listing context
 function updateListingContext(content: Schemas["CmsPage"]) {

package/app/components/public/cms/FrontendAccountCustomerGroupRegistrationPage.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const props = defineProps<{
+  navigationId: string;
+}>();
+
+const { apiClient } = useShopwareContext();
+
+const { data: registrationResponse } = await useAsyncData(
+  `cmsNavigation${props.navigationId}`,
+  async () => {
+    const response = await apiClient.invoke(
+      "getCustomerGroupRegistrationInfo get /customer-group-registration/config/{customerGroupId}",
+      {
+        pathParams: { customerGroupId: props.navigationId },
+      },
+    );
+    return response.data || {};
+  },
+);
+
+useSeoMeta({
+  description: () =>
+    registrationResponse.value?.translated?.registrationSeoMetaDescription ||
+    undefined,
+});
+</script>
+
+<template>
+  <div class="container mx-auto bg-surface-surface flex flex-col mt-10">
+    <h1
+      class="mb-4 text-2xl font-extrabold leading-none tracking-tight text-surface-on-surface md:text-3xl lg:text-5xl text-center"
+    >
+      {{ registrationResponse?.translated.registrationTitle }}
+    </h1>
+    <div
+      v-if="registrationResponse?.registrationActive"
+      class="text-lg font-normal text-surface-on-surface-variant lg:text-xl"
+    >
+      <div
+        v-if="registrationResponse?.translated.registrationIntroduction"
+        class="px-6 sm:px-4 mb-6"
+        v-html="registrationResponse.translated.registrationIntroduction"
+      />
+      <AccountRegistrationForm
+        :customer-group-id="registrationResponse?.id"
+        :company-only="
+          registrationResponse?.translated?.registrationOnlyCompanyRegistration
+        "
+      />
+    </div>
+  </div>
+</template>

package/app/components/public/cms/element/CmsElementImage.vue

@@ -3,14 +3,10 @@ import type {
   CmsElementImage,
   CmsElementManufacturerLogo,
 } from "@shopware/composables";
-import {
-  buildCdnImageUrl,
-  buildUrlPrefix,
-  generateCdnSrcSet,
-} from "@shopware/helpers";
+import { buildUrlPrefix } from "@shopware/helpers";
 import { useElementSize } from "@vueuse/core";
-import { computed, defineAsyncComponent, inject, useTemplateRef } from "vue";
-import { useAppConfig, useCmsElementImage, useUrlResolver } from "#imports";
+import { computed, defineAsyncComponent, useTemplateRef } from "vue";
+import { useCmsElementImage, useUrlResolver } from "#imports";
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
 const props = defineProps<{
@@ -29,34 +25,17 @@ const {
   mimeType,
 } = useCmsElementImage(props.content);
 
-const imageSizes = inject<string>("cms-image-sizes", "100vw");
-const appConfig = useAppConfig();
-
 const imageElement = useTemplateRef<HTMLImageElement>("imageElement");
 const { width, height } = useElementSize(imageElement);
 
-const cdnOptions = computed(() => ({
-  format: appConfig.backgroundImage?.format,
-  quality: appConfig.backgroundImage?.quality,
-}));
-
-const srcSet = computed(
-  () =>
-    imageAttrs.value.srcset ||
-    generateCdnSrcSet(imageAttrs.value.src, undefined, cdnOptions.value),
-);
+function roundUp(num: number) {
+  return Math.ceil(num / 100) * 100;
+}
 
-const srcPath = computed(() => {
-  // Only add dimension params after mount to avoid hydration mismatch
-  // (useElementSize returns 0 during SSR). The srcset handles responsive loading.
-  if (width.value || height.value) {
-    return buildCdnImageUrl(
-      imageAttrs.value.src,
-      { width: width.value, height: height.value },
-      cdnOptions.value,
-    );
-  }
-  return imageAttrs.value.src || "";
+const imageSize = computed(() => {
+  const containerSize = Math.max(width.value || 0, height.value || 0);
+  if (!containerSize) return undefined;
+  return roundUp(containerSize * 2);
 });
 
 const imageComputedContainerAttrs = computed(() => {
@@ -110,7 +89,8 @@ const SwMedia3D = computed(() => {
       ref="imageElement"
       preset="productDetail"
       loading="lazy"
-      :sizes="imageSizes"
+      :width="imageSize"
+      :height="imageSize"
       :class="{
         'w-full': !imageGallery,
         'h-full': !imageGallery && ['cover', 'stretch'].includes(displayMode),
@@ -120,8 +100,7 @@ const SwMedia3D = computed(() => {
         'object-contain': imageGallery || displayMode !== 'cover',
       }"
       :alt="imageAttrs.alt"
-      :src="srcPath"
-      :srcset="srcSet"
+      :src="imageAttrs.src"
     />
   </component>
 </template>

package/app/components/public/cms/element/CmsElementProductListing.vue

@@ -3,8 +3,12 @@ import type { CmsElementProductListing } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed, ref, useTemplateRef, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useCategoryListing, useCmsElementConfig } from "#imports";
+import {
+  useCategoryListing,
+  useCmsElementConfig,
+  useRoute,
+  useRouter,
+} from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{

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.ts

@@ -1,7 +1,8 @@
 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 +12,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,15 @@
+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/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.0",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -34,36 +34,34 @@
   "dependencies": {
     "@iconify-json/carbon": "1.2.18",
     "@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.6",
+    "@tresjs/cientos": "5.7.0",
+    "@tresjs/nuxt": "^5.6.0",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
     "@vueuse/core": "14.1.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.34",
     "xss": "1.0.15",
     "@shopware/api-client": "1.5.0",
-    "@shopware/composables": "1.11.0",
-    "@shopware/helpers": "1.7.0"
+    "@shopware/composables": "1.11.1",
+    "@shopware/helpers": "1.7.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
-    "@nuxt/schema": "4.2.2",
+    "@nuxt/schema": "4.4.6",
     "@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.5",
+    "nuxt": "4.4.6",
     "typescript": "5.9.3",
     "unbuild": "2.0.0",
-    "vitest": "4.0.18",
-    "vue-router": "4.6.4",
-    "vue-tsc": "3.2.2",
+    "vitest": "4.1.6",
+    "vue-router": "5.0.7",
+    "vue-tsc": "3.2.9",
     "tsconfig": "0.0.0"
   },
   "scripts": {

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(),
-  ],
-});