@shopware/cms-base-layer 2.1.0 → 3.0.1

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
@@ -100,32 +110,24 @@ export default defineNuxtConfig({
   unocss: {
     nuxtLayers: true, // enable Nuxt layers for UnoCSS
   },
-})
-```
-
-```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'
-
-export default mergeConfigs([config, {
-  theme: {
-    colors: {
-      primary: '#ff3e00',
-      secondary: '#1c1c1c',
+import { mergeConfigs } from "@unocss/core";
+import baseConfig from "./.nuxt/uno.config.mjs";
+
+export default mergeConfigs([
+  baseConfig,
+  {
+    theme: {
+      colors: {
+        "brand-primary": "#ff3e00",
+        "brand-secondary": "#1c1c1c",
+      },
     },
   },
-}])
-
+]);
 ```
 
 See the [UnoCSS reference](https://unocss.dev/integrations/nuxt#configuration) for more information on how to configure UnoCSS in Nuxt when work with layers.
@@ -150,12 +152,14 @@ This layer includes [Nuxt Image](https://image.nuxt.com/) configuration optimize
 The layer comes pre-configured with optimized settings. No additional setup is required! The configuration includes:
 
 **Available Presets:**
+
 - `productCard` - Product listing images (WebP, quality 90, cover fit)
 - `productDetail` - Product detail page images (WebP, quality 90, contain fit)
 - `thumbnail` - Small thumbnails (150x150, WebP, quality 90)
 - `hero` - Hero banners (WebP, quality 95, cover fit)
 
 **Responsive Breakpoints:**
+
 - `xs: 320px`, `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px`, `xxl: 1536px`
 
 ### Usage in Components
@@ -196,21 +200,23 @@ Replace standard `<img>` tags with `<NuxtImg>` to enable automatic optimization:
 
 Shopware supports the following URL parameters for image transformation:
 
-| Modifier | Description | Example | Support |
-|----------|-------------|---------|---------|
-| `width` | Image width in pixels | `400` | ✅ Always supported |
-| `height` | Image height in pixels | `600` | ✅ Always supported |
-| `quality` | Image quality (0-100) | `85` | ⚠️ Cloud/Plugin required* |
-| `format` | Output format | `webp`, `avif`, `jpg`, `png` | ⚠️ Cloud/Plugin required* |
-| `fit` | Resize behavior | `cover`, `contain`, `fill` | ⚠️ Cloud/Plugin required* |
+| Modifier  | Description            | Example                      | Support                    |
+| --------- | ---------------------- | ---------------------------- | -------------------------- |
+| `width`   | Image width in pixels  | `400`                        | ✅ Always supported        |
+| `height`  | Image height in pixels | `600`                        | ✅ Always supported        |
+| `quality` | Image quality (0-100)  | `85`                         | ⚠️ Cloud/Plugin required\* |
+| `format`  | Output format          | `webp`, `avif`, `jpg`, `png` | ⚠️ Cloud/Plugin required\* |
+| `fit`     | Resize behavior        | `cover`, `contain`, `fill`   | ⚠️ Cloud/Plugin required\* |
+
+\*Advanced transformations (quality, format, fit) are available in:
 
-*Advanced transformations (quality, format, fit) are available in:
 - **Shopware Cloud (SaaS)**: Built-in support via managed infrastructure. For a complete list of supported image transformation parameters, see [Fastly Image Optimizer Query Parameters](https://www.fastly.com/documentation/reference/io/#query-parameters).
 - **Self-hosted instances**: Require thumbnail processor plugins like [FroshPlatformThumbnailProcessor](https://github.com/FriendsOfShopware/FroshPlatformThumbnailProcessor) or third-party CDN integration
 
 ### How It Works
 
 This layer includes a custom Shopware provider for Nuxt Image that maps modifiers to Shopware's query parameters:
+
 - `width` modifier → `?width=400`
 - `height` modifier → `?height=300`
 - `quality` modifier → `?quality=85`
@@ -249,31 +255,31 @@ export default defineNuxtConfig({
     quality: 85,
 
     // Add/change formats
-    formats: ['avif', 'webp', 'jpg'],
+    formats: ["avif", "webp", "jpg"],
 
     // Override or add presets
     presets: {
       // Override existing preset
       productCard: {
         modifiers: {
-          format: 'avif',
+          format: "avif",
           quality: 80,
-          fit: 'cover',
-        }
+          fit: "cover",
+        },
       },
       // Add custom preset
       categoryBanner: {
         modifiers: {
-          format: 'webp',
+          format: "webp",
           quality: 90,
           width: 1200,
           height: 400,
-          fit: 'cover',
-        }
-      }
-    }
-  }
-})
+          fit: "cover",
+        },
+      },
+    },
+  },
+});
 ```
 
 ## 🖼️ Image Placeholder
@@ -335,6 +341,7 @@ When a CMS section or block has a `backgroundMedia` set, the components call `ge
 4. Appends `format` and `quality` from `app.config.ts` if provided
 
 **Example generated URL:**
+
 ```
 url("https://cdn.shopware.store/.../image.jpg?width=1000&fit=crop,smart&format=webp&quality=85")
 ```
@@ -348,6 +355,7 @@ This layer includes a `useLcpImagePreload` composable that automatically preload
 ### How it works
 
 The composable scans CMS sections in document order, checking:
+
 1. Section background images (`section.backgroundMedia`)
 2. Block background images (`block.backgroundMedia`)
 3. Image element media (`slot.data.media`)
@@ -372,72 +380,55 @@ 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.
+Images are optimized to prevent 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).
+### Product Card Images (`SwProductCardImage`)
 
-The browser combines `sizes` + `srcset` to download only the image size it actually needs — during HTML parsing, before any JavaScript runs.
-
-### 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 +485,9 @@ 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
-
-- [#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
-
-- [#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.
-
-  Includes new `SwFilterDropdown` and `SwProductListingFiltersHorizontal` components, with a `displayMode` prop added to all filter components to support both layouts.
-
-- [#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
-
-- [#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
-
-- [#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
-
-- [#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.
-
-- [#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
+### Latest changes: 3.0.1
 
 ### Patch Changes
 
-- [#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.
-
-- [#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
-
-- [#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.
-
-- [#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`.
-
-- 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 [[`8be060d`](https://github.com/shopware/frontends/commit/8be060de825ca799f98a8f045a5e7fea61f5d1a2), [`5678fb0`](https://github.com/shopware/frontends/commit/5678fb008cbd86eaddd061e004de89e6f45bb7ec), [`22611e5`](https://github.com/shopware/frontends/commit/22611e542b8f42a4f34dce5186f628f9a17f457b)]:
+  - @shopware/composables@1.12.0

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/SwCategoryNavigation.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const {

package/app/components/SwCategoryNavigationLink.vue

@@ -7,6 +7,7 @@ import {
 } from "@shopware/helpers";
 import { computed } from "vue";
 import { RouterLink } from "vue-router";
+
 import { useUrlResolver } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -43,7 +44,9 @@ const hasChildren = computed(() => {
     v-if="props.level === 0"
     class="self-stretch flex flex-col justify-center items-center"
   >
-    <div class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1">
+    <div
+      class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1"
+    >
       <div class="flex-1 flex justify-start items-center gap-2.5">
         <RouterLink
           v-if="!urlIsAbsolute(url.path)"
@@ -76,17 +79,19 @@ const hasChildren = computed(() => {
         type="button"
         :aria-label="props.isExpanded ? 'Collapse' : 'Expand'"
       >
-        <SwChevronIcon :direction="props.isExpanded ? 'up' : 'down'" :size="20" />
+        <SwChevronIcon
+          :direction="props.isExpanded ? 'up' : 'down'"
+          :size="20"
+        />
       </button>
     </div>
   </div>
 
   <!-- Level 2+ Categories (Nested with left padding) -->
-  <div
-    v-else
-    class="self-stretch flex flex-col justify-center items-center"
-  >
-    <div class="self-stretch pl-4 py-1.5 inline-flex justify-start items-center gap-2">
+  <div v-else class="self-stretch flex flex-col justify-center items-center">
+    <div
+      class="self-stretch pl-4 py-1.5 inline-flex justify-start items-center gap-2"
+    >
       <div class="py-0.5 flex-1 flex justify-start items-center gap-2.5">
         <RouterLink
           v-if="!urlIsAbsolute(url.path)"
@@ -121,7 +126,10 @@ const hasChildren = computed(() => {
         type="button"
         :aria-label="props.isExpanded ? 'Collapse' : 'Expand'"
       >
-        <SwChevronIcon :direction="props.isExpanded ? 'up' : 'down'" :size="20" />
+        <SwChevronIcon
+          :direction="props.isExpanded ? 'up' : 'down'"
+          :size="20"
+        />
       </button>
     </div>
   </div>

package/app/components/SwContactForm.vue

@@ -7,6 +7,7 @@ import { useVuelidate } from "@vuelidate/core";
 import { email, minLength, required } from "@vuelidate/validators";
 import { defu } from "defu";
 import { computed, reactive, ref } from "vue";
+
 import {
   useCmsElementConfig,
   useNavigationContext,

package/app/components/SwFilterChips.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 type FilterState = {

package/app/components/SwListingProductPrice.vue

@@ -2,6 +2,7 @@
 import { useCmsTranslations, useProductPrice } from "@shopware/composables";
 import { defu } from "defu";
 import { toRefs } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
@@ -53,13 +54,18 @@ const {
           </template>
         </SwSharedPrice>
       </div>
-      <div class="text-surface-on-surface-variant text-sm font-normal leading-tight line-through">
+      <div
+        class="text-surface-on-surface-variant text-sm font-normal leading-tight line-through"
+      >
         <SwSharedPrice :value="price?.listPrice?.price" />
       </div>
     </div>
 
     <!-- Regular price display -->
-    <div v-else class="text-surface-on-surface text-base font-bold leading-normal">
+    <div
+      v-else
+      class="text-surface-on-surface text-base font-bold leading-normal"
+    >
       <SwSharedPrice :value="unitPrice">
         <template #beforePrice>
           <span v-if="displayFrom || displayFromVariants" class="text-sm">{{
@@ -70,7 +76,10 @@ const {
     </div>
 
     <!-- Variants from price -->
-    <div v-if="displayFromVariants" class="text-surface-on-surface text-base font-bold leading-normal">
+    <div
+      v-if="displayFromVariants"
+      class="text-surface-on-surface text-base font-bold leading-normal"
+    >
       <SwSharedPrice :value="displayFromVariants">
         <template #beforePrice>
           <span v-if="displayFromVariants" class="text-sm">{{
@@ -81,7 +90,10 @@ const {
     </div>
 
     <!-- Regulation price -->
-    <div v-if="regulationPrice" class="flex gap-2 text-surface-on-surface-variant text-sm">
+    <div
+      v-if="regulationPrice"
+      class="flex gap-2 text-surface-on-surface-variant text-sm"
+    >
       {{ translations.listing.previously }}
       <SwSharedPrice :value="regulationPrice" />
     </div>

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,20 @@ 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" />
+    <TresPerspectiveCamera :args="[75, 1, 0.1, 2000]" :position="[0, 0, 500]" />
+    <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/SwNewsletterForm.vue

@@ -8,6 +8,7 @@ import type { ValidationRuleWithoutParams } from "@vuelidate/core";
 import { email, required } from "@vuelidate/validators";
 import { defu } from "defu";
 import { computed, reactive, ref } from "vue";
+
 import { useCmsElementConfig, useNewsletter, useSalutations } from "#imports";
 
 const props = defineProps<{
@@ -236,7 +237,7 @@ const invokeSubmit = async () => {
             id="salutation"
             v-model="state.salutationId"
             name="salutation"
-            class=" border-outline-outline-variant focus:border-brand-primaryappearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
+            class="border-outline-outline-variant focus:border-brand-primaryappearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
           >
             <option disabled selected value="">
               {{ translations.form.salutationPlaceholder }}
@@ -261,8 +262,8 @@ const invokeSubmit = async () => {
             class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.firstName?.$error
-          ? 'border-red-600 focus:border-red-600'
-          : 'border-outline-outline-variant focus:border-brand-primary',
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.firstNamePlaceholder"
             @blur="$v.firstName?.$touch()"

package/app/components/SwProductAddToCart.vue

@@ -3,6 +3,7 @@ import { useCmsTranslations } from "@shopware/composables";
 import { getCmsTranslate } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, toRefs } from "vue";
+
 import {
   useAddToCart,
   useCartErrorParamsResolver,
@@ -72,16 +73,32 @@ const addToCartProxy = async () => {
 
 <template>
   <div class="w-full inline-flex flex-col justify-start items-start gap-8">
-    <SwQuantitySelect v-model="quantity" :min="product.minPurchase" :max="product.maxPurchase"
-      :steps="product.purchaseSteps" />
-    <SwStockInfo :availableStock="availableStock" :minPurchase="minPurchase" :deliveryTime="deliveryTime"
-      :restockTime="restockTime" />
+    <SwQuantitySelect
+      v-model="quantity"
+      :min="product.minPurchase"
+      :max="product.maxPurchase"
+      :steps="product.purchaseSteps"
+    />
+    <SwStockInfo
+      :availableStock="availableStock"
+      :minPurchase="minPurchase"
+      :deliveryTime="deliveryTime"
+      :restockTime="restockTime"
+    />
     <div class="self-stretch flex flex-col justify-start items-start gap-1">
-      <SwBaseButton variant="primary" size="medium" :disabled="!product?.available" block data-testid="add-to-cart-button"
-        @click="addToCartProxy">
+      <SwBaseButton
+        variant="primary"
+        size="medium"
+        :disabled="!product?.available"
+        block
+        data-testid="add-to-cart-button"
+        @click="addToCartProxy"
+      >
         {{ translations.product.addToCart }}
       </SwBaseButton>
-      <div class="self-stretch text-surface-on-surface text-xs font-normal leading-none">
+      <div
+        class="self-stretch text-surface-on-surface text-xs font-normal leading-none"
+      >
         {{ translations.product.productNumber }}: {{ productNumber }}
       </div>
     </div>