@moonbase.sh/storefront 2.2.1 → 2.4.0

package/README.md

@@ -50,11 +50,22 @@ When you import from npm (`import Moonbase from '@moonbase.sh/storefront'`), `se
 The CDN loader recognises an `?mb_version=` query parameter for opting into a non-default storefront build on a per-page-load basis. This is intended for testing pre-release changes on a live merchant site without changing the embed code.
 
 - `?mb_version=next` — loads the latest `@next` snapshot from `/storefront/next/moonbase.js`
+- `?mb_version=pr-<N>` — loads the snapshot from a labeled PR `<N>` from `/storefront/pr-<N>/moonbase.js` (only present while the PR carries the `release-snapshot` label)
 - `?mb_version=2.1.0` — pins to a specific published version from `/storefront/<version>/moonbase.js`
 - `?mb_version=latest` or omitted — loads the current stable release (default)
 
 Don't use this to pin a production embed to a specific version — pin the `<script src>` URL instead.
 
+## Host page requirements
+
+The widget renders directly into the host page's DOM and inherits its viewport. For the widget to render correctly on mobile, the host page should declare a standard responsive viewport:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+```
+
+Hosts that ship a fixed-width legacy mobile viewport (for example Wix's classic mobile sites use `<meta name="viewport" content="width=320, user-scalable=yes">`) cause the browser to upscale every CSS pixel on the page. The widget auto-detects this and counter-scales itself with CSS `zoom` to remain readable; opt out with `disableViewportCompensation: true` if you want the widget to match the host's upscaled density. On Wix specifically, mounting the widget into a contained element via `target` is also an option — it switches the drawer from a viewport overlay to an in-flow component and sidesteps the upscale entirely.
+
 ## Trigger intents
 
 Use intent methods to open specific views or execute actions:

package/dist/moonbase.d.ts

@@ -322,6 +322,13 @@ declare interface MoonbaseOptions {
         cards: 'outlined' | 'shadow' | 'white';
     };
     target: HTMLElement | undefined;
+    /**
+     * When the host page declares a fixed-width mobile viewport (e.g. Wix's
+     * legacy `<meta name="viewport" content="width=320, ...">`), the browser
+     * upscales every CSS pixel to fit the device. Set this to `true` to opt out
+     * of the widget's automatic counter-scaling and match the host's density.
+     */
+    disableViewportCompensation: boolean;
 }
 
 export declare const urlKey: InjectionKey<string>;