@vio-live/web-sdk 0.33.0 → 0.35.0

package/dist/core/index.d.ts

@@ -1,3 +1,5 @@
+import { D as DetailLayout, A as AppliedDetailLayout } from '../detail-layout-BI556w8p.js';
+export { a as DETAIL_SECTION_IDS, b as DetailLayoutAdjustment, c as DetailLayoutOrigin, d as DetailSectionId, E as ESSENTIAL_DETAIL_SECTIONS, e as defaultDetailLayout, f as effectiveDetailSections, n as normalizeDetailLayout, r as resolveDetailLayout } from '../detail-layout-BI556w8p.js';
 import { GraphQLClient } from 'graphql-request';
 
 /**
@@ -581,6 +583,20 @@ interface CartOrigin {
     contentUrl?: string;
     /** Its title (`content_title`, ≤ 255). */
     contentTitle?: string;
+    /**
+     * The layout of `<vio-product-detail>` the units were added from (0.34):
+     * its `id`, `revision`, and the experiment / variant it belongs to — set by
+     * the detail from the layout it showed at that moment, only for a
+     * non-default layout. Kept with the line (localStorage) and never rewritten
+     * by a later configuration; reported per unit on the events with items
+     * (`layout_id`, `layout_revision`, `experiment_id`, `experiment_variant_id`).
+     * Never sent to Commerce. `variantId` here is the EXPERIMENT variant, not the
+     * product variant (`CartLineItem.variantId`).
+     */
+    layoutId?: string;
+    layoutRevision?: string;
+    experimentId?: string;
+    variantId?: string;
 }
 /** One origin of a line and how many of its units came from it. */
 interface CartLineOrigin extends CartOrigin {
@@ -1041,6 +1057,16 @@ declare const ANALYTICS_EVENT_NAMES: readonly ["view_item_list", "select_item",
 type AnalyticsEventName = (typeof ANALYTICS_EVENT_NAMES)[number];
 /** Camel-case for DX; mapped to the snake_case wire format at build time. */
 interface AnalyticsContext {
+    /**
+     * The `<vio-product-detail>` layout shown (0.34), on `view_item` and only
+     * for a non-default layout: `layout_id`, `layout_revision`, `experiment_id`,
+     * `variant_id` in the event's `context` (next to `campaign_id` /
+     * `location_id`). `variantId` is the experiment variant.
+     */
+    layoutId?: string;
+    layoutRevision?: string;
+    experimentId?: string;
+    variantId?: string;
     campaignId?: number;
     broadcastId?: string;
     campaignComponentId?: number;
@@ -1075,9 +1101,22 @@ interface AnalyticsItemInput {
     productId: number | string;
     name?: string;
     brand?: string;
+    /** The PRODUCT variant (`variant_id` on the wire). */
     variantId?: number | string;
     price?: number;
     quantity?: number;
+    /**
+     * The `<vio-product-detail>` layout these units were added from (0.34), from
+     * the cart line's origin: `layout_id`, `layout_revision`, `experiment_id`,
+     * `experiment_variant_id` on the wire. When any of them is given, all four
+     * go out (`''` for the missing ones); the SDK's events with cart items give
+     * them always (`''` when the units came from no layout).
+     */
+    layoutId?: string;
+    layoutRevision?: string;
+    experimentId?: string;
+    /** The EXPERIMENT variant of the layout — not the product variant. */
+    experimentVariantId?: string;
 }
 interface AnalyticsCommerce {
     items?: AnalyticsItemInput[];
@@ -2084,7 +2123,12 @@ declare class CartManager extends EventTarget {
  * the page as origin + path (`contentUrl`) and its title, within Commerce's caps.
  */
 declare function normalizeOrigin(origin: CartOrigin | null | undefined): CartOrigin;
-/** Two origins are the same place when campaign, slot, content and kind of element all match (the page's URL and title are attributes of the place, not its identity). */
+/**
+ * Two origins are the same place when campaign, slot, content and kind of
+ * element all match (the page's URL and title are attributes of the place, not
+ * its identity) — and the same detail layout (0.34): units added under two
+ * layouts stay two origins, so each layout is credited with its own.
+ */
 declare function sameOrigin(a: CartOrigin, b: CartOrigin): boolean;
 /**
  * The origins of a line for reporting: what it carries, plus an empty origin
@@ -3459,6 +3503,23 @@ declare class VioFacade {
      * document.
      */
     content(): ContentRef;
+    /**
+     * Page-wide options of every `<vio-product-detail>` (0.34). `layout` orders
+     * the sections below the gallery — `{ id, revision, sections, experimentId?,
+     * variantId? }`; `null` goes back to the default; a detail's own `layout`
+     * wins. Open details re-render at once, later ones open with it. A key left
+     * out of the call is left as it is. See README «Section order and layout
+     * tracking».
+     */
+    configureDetail(options?: {
+        layout?: DetailLayout | null;
+    }): void;
+    /**
+     * The layout a `<vio-product-detail>` without its own `layout` applies now:
+     * the page's (`source: 'global'`) or the default. A detail's own is
+     * `el.appliedLayout`. A copy; never throws.
+     */
+    detailLayout(): AppliedDetailLayout;
     get isInitialized(): boolean;
     get config(): ResolvedConfig;
     /** Multi-sponsor cart manager. Reactive — listen via addEventListener('change', ...). */
@@ -3777,7 +3838,7 @@ declare function writeInternal(internal: boolean, storage?: StorageLike | null |
  *
  * RELEASE CHECKLIST: bump together with package.json (see CONTRIBUTING).
  */
-declare const SDK_VERSION = "0.33.0";
+declare const SDK_VERSION = "0.35.0";
 
 /**
  * Vipps MobilePay's own button, the way the design guidelines ask for it.
@@ -3806,4 +3867,4 @@ declare function vippsButtonAttributes(verb?: 'buy' | 'pay' | 'express' | 'conti
     language?: string;
 }): Record<string, string>;
 
-export { ADD_ITEM_MUTATION, type AddManualOptions, type AddProductOptions, type AnalyticsCommerce, type AnalyticsContext, type AnalyticsEventName, type AnalyticsItemInput, AnalyticsManager, type AnalyticsStartOptions, type ApplePayConfig, type ApplePayResult, type Attribution, BUYER_REF_MAX_LENGTH, type BootstrapCampaign, type BootstrapCampaignEntry, type BootstrapCampaignStatus, type BootstrapResponse, type BootstrapSlot, CHECKOUT_ATTRIBUTION_CAPS, CHECKOUT_SPONSOR_STORAGE_KEY, CLIENT_LANDING_URL_MAX_LENGTH, CONTENT_URL_MAX_LENGTH, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, type CampaignHint, type CartChangeDetail, type CartLineItem, type CartLineOrigin, CartManager, type CartOrigin, type CartQueryOptions, type CartSlice, type CartUpdatedDetail, type CheckoutAddress, type CheckoutAttributionInput, type CheckoutAttributionWire, type CheckoutChangeDetail, CheckoutManager, type CheckoutManagerDeps, type CheckoutOpenDetail, type CheckoutReference, type CheckoutSponsor, type CheckoutState, type ClientContext, CommerceClient, Configuration, type ContentRef, type CreatePaymentVippsResponse, type CreatePaymentVippsVariables, DELETE_ITEM_MUTATION, type EntryContextWire, type Environment, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, GRAPHQL_INT_MAX, type GatewayFeature, type GetVippsStatusVariables, INTERNAL_KEY, INTERNAL_PARAM, type ImageSize, LINE_ORIGIN_CAPS, type Landing, type LineOriginWire, type LineOriginWireOptions, type ManifestLocation, type ManifestRequest, type ManifestResult, type OrderReference, type OriginPage, type PaymentCompleteDetail, type PaymentMethod, type PaymentSelectDetail, type PaymentSuccessDetail, type PaymentSuccessResult, type PlacementComponent, type Product, type ProductCategory, type ProductImage, type ProductOption, type ProductPrice, type ProductVariant, type PurchaseIds, type RegisterSlotOptions, type ResolvedConfig, SDK_VERSION, type SlotInput, type SlotKind, type Sponsor, type SponsorCartState, type SponsorCommerceBlock, type SponsorIdentity, type SurfacePrivacyMode, type SurfaceResponse, type TrackOptions, UPDATE_CHECKOUT_MUTATION, UPDATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_ITEM_WITH_ORIGIN_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, type VioConfig, type VioItem, type VioPlatform, type VippsPaymentState, type VippsStatusResult, activeCampaignEntry, addItem, autoSlotDisplayName, autoSlotId, buyerRefOf, campaignCandidates, capContentUrl, cartSlicesFrom, checkApplePayAvailability, checkoutAttributionOf, componentKindOf, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, dominantCampaignOf, ensureVippsButton, entryContextOf, executeCartGraphQL, formatPrice, gatewayHas, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCheckoutReference, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, isUnknownFeatureError, isUnknownTokenError, landingUrl, lineOriginWire, lineOrigins, normalizeBuyerRef, normalizeOrigin, normalizeScope, normalizeSlotKind, originAndPath, primaryImageUrl, purchaseFromPaymentSuccess, purchaseIdsOf, readInternal, resetGatewayFeatures, resolveCampaignId, resolveClientContext, resolveContent, resolveInternal, resolveLanding, resolveSlotCampaign, sameOrigin, showApplePaySheet, sponsorCampaignEntry, sponsorIdentityFrom, storedLanding, toCampaignId, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes, withGatewayFeature, writeInternal };
+export { ADD_ITEM_MUTATION, type AddManualOptions, type AddProductOptions, type AnalyticsCommerce, type AnalyticsContext, type AnalyticsEventName, type AnalyticsItemInput, AnalyticsManager, type AnalyticsStartOptions, type ApplePayConfig, type ApplePayResult, AppliedDetailLayout, type Attribution, BUYER_REF_MAX_LENGTH, type BootstrapCampaign, type BootstrapCampaignEntry, type BootstrapCampaignStatus, type BootstrapResponse, type BootstrapSlot, CHECKOUT_ATTRIBUTION_CAPS, CHECKOUT_SPONSOR_STORAGE_KEY, CLIENT_LANDING_URL_MAX_LENGTH, CONTENT_URL_MAX_LENGTH, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, type CampaignHint, type CartChangeDetail, type CartLineItem, type CartLineOrigin, CartManager, type CartOrigin, type CartQueryOptions, type CartSlice, type CartUpdatedDetail, type CheckoutAddress, type CheckoutAttributionInput, type CheckoutAttributionWire, type CheckoutChangeDetail, CheckoutManager, type CheckoutManagerDeps, type CheckoutOpenDetail, type CheckoutReference, type CheckoutSponsor, type CheckoutState, type ClientContext, CommerceClient, Configuration, type ContentRef, type CreatePaymentVippsResponse, type CreatePaymentVippsVariables, DELETE_ITEM_MUTATION, DetailLayout, type EntryContextWire, type Environment, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, GRAPHQL_INT_MAX, type GatewayFeature, type GetVippsStatusVariables, INTERNAL_KEY, INTERNAL_PARAM, type ImageSize, LINE_ORIGIN_CAPS, type Landing, type LineOriginWire, type LineOriginWireOptions, type ManifestLocation, type ManifestRequest, type ManifestResult, type OrderReference, type OriginPage, type PaymentCompleteDetail, type PaymentMethod, type PaymentSelectDetail, type PaymentSuccessDetail, type PaymentSuccessResult, type PlacementComponent, type Product, type ProductCategory, type ProductImage, type ProductOption, type ProductPrice, type ProductVariant, type PurchaseIds, type RegisterSlotOptions, type ResolvedConfig, SDK_VERSION, type SlotInput, type SlotKind, type Sponsor, type SponsorCartState, type SponsorCommerceBlock, type SponsorIdentity, type SurfacePrivacyMode, type SurfaceResponse, type TrackOptions, UPDATE_CHECKOUT_MUTATION, UPDATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_ITEM_WITH_ORIGIN_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, type VioConfig, type VioItem, type VioPlatform, type VippsPaymentState, type VippsStatusResult, activeCampaignEntry, addItem, autoSlotDisplayName, autoSlotId, buyerRefOf, campaignCandidates, capContentUrl, cartSlicesFrom, checkApplePayAvailability, checkoutAttributionOf, componentKindOf, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, dominantCampaignOf, ensureVippsButton, entryContextOf, executeCartGraphQL, formatPrice, gatewayHas, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCheckoutReference, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, isUnknownFeatureError, isUnknownTokenError, landingUrl, lineOriginWire, lineOrigins, normalizeBuyerRef, normalizeOrigin, normalizeScope, normalizeSlotKind, originAndPath, primaryImageUrl, purchaseFromPaymentSuccess, purchaseIdsOf, readInternal, resetGatewayFeatures, resolveCampaignId, resolveClientContext, resolveContent, resolveInternal, resolveLanding, resolveSlotCampaign, sameOrigin, showApplePaySheet, sponsorCampaignEntry, sponsorIdentityFrom, storedLanding, toCampaignId, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes, withGatewayFeature, writeInternal };

package/dist/core/index.js

@@ -1,4 +1,4 @@
-import '../chunk-QGJUBVH3.js';
-export { ADD_ITEM_MUTATION, AnalyticsManager, BUYER_REF_MAX_LENGTH, CHECKOUT_ATTRIBUTION_CAPS, CHECKOUT_SPONSOR_STORAGE_KEY, CLIENT_LANDING_URL_MAX_LENGTH, CONTENT_URL_MAX_LENGTH, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartManager, CheckoutManager, CommerceClient, Configuration, DELETE_ITEM_MUTATION, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, GRAPHQL_INT_MAX, INTERNAL_KEY, INTERNAL_PARAM, LINE_ORIGIN_CAPS, SDK_VERSION, UPDATE_CHECKOUT_MUTATION, UPDATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_ITEM_WITH_ORIGIN_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, activeCampaignEntry, addItem, autoSlotDisplayName, autoSlotId, buyerRefOf, campaignCandidates, capContentUrl, cartSlicesFrom, checkApplePayAvailability, checkoutAttributionOf, componentKindOf, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, dominantCampaignOf, ensureVippsButton, entryContextOf, executeCartGraphQL, formatPrice, gatewayHas, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCheckoutReference, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, isUnknownFeatureError, isUnknownTokenError, landingUrl, lineOriginWire, lineOrigins, normalizeBuyerRef, normalizeOrigin, normalizeScope, normalizeSlotKind, originAndPath, primaryImageUrl, purchaseFromPaymentSuccess, purchaseIdsOf, readInternal, resetGatewayFeatures, resolveCampaignId, resolveClientContext, resolveContent, resolveInternal, resolveLanding, resolveSlotCampaign, sameOrigin, showApplePaySheet, sponsorCampaignEntry, sponsorIdentityFrom, storedLanding, toCampaignId, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes, withGatewayFeature, writeInternal } from '../chunk-ZORYG4W3.js';
+import '../chunk-3YFJFDSN.js';
+export { ADD_ITEM_MUTATION, AnalyticsManager, BUYER_REF_MAX_LENGTH, CHECKOUT_ATTRIBUTION_CAPS, CHECKOUT_SPONSOR_STORAGE_KEY, CLIENT_LANDING_URL_MAX_LENGTH, CONTENT_URL_MAX_LENGTH, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartManager, CheckoutManager, CommerceClient, Configuration, DELETE_ITEM_MUTATION, DETAIL_SECTION_IDS, ESSENTIAL_DETAIL_SECTIONS, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, GRAPHQL_INT_MAX, INTERNAL_KEY, INTERNAL_PARAM, LINE_ORIGIN_CAPS, SDK_VERSION, UPDATE_CHECKOUT_MUTATION, UPDATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_ITEM_WITH_ORIGIN_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, activeCampaignEntry, addItem, autoSlotDisplayName, autoSlotId, buyerRefOf, campaignCandidates, capContentUrl, cartSlicesFrom, checkApplePayAvailability, checkoutAttributionOf, componentKindOf, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, defaultDetailLayout, deleteItem, displayPrice, dominantCampaignOf, effectiveDetailSections, ensureVippsButton, entryContextOf, executeCartGraphQL, formatPrice, gatewayHas, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCheckoutReference, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, isUnknownFeatureError, isUnknownTokenError, landingUrl, lineOriginWire, lineOrigins, normalizeBuyerRef, normalizeDetailLayout, normalizeOrigin, normalizeScope, normalizeSlotKind, originAndPath, primaryImageUrl, purchaseFromPaymentSuccess, purchaseIdsOf, readInternal, resetGatewayFeatures, resolveCampaignId, resolveClientContext, resolveContent, resolveDetailLayout, resolveInternal, resolveLanding, resolveSlotCampaign, sameOrigin, showApplePaySheet, sponsorCampaignEntry, sponsorIdentityFrom, storedLanding, toCampaignId, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes, withGatewayFeature, writeInternal } from '../chunk-QA5R4VYF.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/detail-layout-BI556w8p.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The order of the sections of `<vio-product-detail>` below the gallery, and
+ * which layout a detail really applied (0.34).
+ *
+ * A layout is `{ id, revision, sections, experimentId?, variantId? }`, set for
+ * the whole page with `Vio.configureDetail({ layout })` or per element with its
+ * `layout` property / attribute (the element wins). This module holds the
+ * page-wide one and the ONE rule that turns a requested layout into the
+ * sections a detail renders (`resolveDetailLayout`). Pure but for the global
+ * store, which lives on `globalThis` so every bundle of the SDK on a page
+ * (Vev chunks) shares it, like the `Vio` facade.
+ *
+ * The applied layout of a non-default layout travels with analytics: the
+ * `view_item` of the detail and, through the cart line origins, every unit
+ * the detail added (see `layoutOriginOf`). Never to Commerce.
+ */
+/** Section ids of the detail, in the default order (exactly the DOM before 0.34). */
+declare const DETAIL_SECTION_IDS: readonly ["brand", "title", "stock", "price", "options", "purchase", "highlights", "description", "shippingReturns"];
+type DetailSectionId = (typeof DETAIL_SECTION_IDS)[number];
+/** Sections a layout cannot leave out: appended, in default relative order, when missing. */
+declare const ESSENTIAL_DETAIL_SECTIONS: ReadonlyArray<DetailSectionId>;
+/** What a host asks for. */
+interface DetailLayout {
+    id: string;
+    revision: string;
+    sections: string[];
+    experimentId?: string;
+    variantId?: string;
+}
+interface DetailLayoutAdjustment {
+    section: string;
+    reason: 'unknown' | 'duplicate' | 'added-essential';
+}
+/** What a detail applied — `el.appliedLayout`, `Vio.detailLayout()`, `vio:detail-layout-applied`. */
+interface AppliedDetailLayout {
+    id: string;
+    revision: string;
+    experimentId?: string;
+    variantId?: string;
+    /** The sections rendered, in order. */
+    sections: DetailSectionId[];
+    /** What the SDK changed in the requested list, and why. */
+    adjusted: DetailLayoutAdjustment[];
+    source: 'element' | 'global' | 'default';
+}
+/** The layout fields a cart line origin carries (CartOrigin) — only for a non-default layout. */
+interface DetailLayoutOrigin {
+    layoutId?: string;
+    layoutRevision?: string;
+    experimentId?: string;
+    variantId?: string;
+}
+/** The default applied layout (no configuration). */
+declare function defaultDetailLayout(): AppliedDetailLayout;
+/**
+ * A requested layout as the SDK uses it, or `null` when it cannot be used
+ * (not an object, an invalid `id`, `sections` not an array — warned once).
+ * An invalid `revision` / `experimentId` / `variantId` is treated as absent.
+ */
+declare function normalizeDetailLayout(raw: unknown): DetailLayout | null;
+/**
+ * The sections a requested list renders: unknown ids out, duplicates out
+ * (the first wins), then the missing essentials (`title`, `price`,
+ * `options`, `purchase`) appended in their default relative order.
+ */
+declare function effectiveDetailSections(requested: ReadonlyArray<string>): {
+    sections: DetailSectionId[];
+    adjusted: DetailLayoutAdjustment[];
+};
+/**
+ * The layout a detail applies: its own (valid) layout, else the page's
+ * (`Vio.configureDetail`), else the default.
+ */
+declare function resolveDetailLayout(elementLayout: unknown, globalLayout?: unknown): AppliedDetailLayout;
+
+export { type AppliedDetailLayout as A, type DetailLayout as D, ESSENTIAL_DETAIL_SECTIONS as E, DETAIL_SECTION_IDS as a, type DetailLayoutAdjustment as b, type DetailLayoutOrigin as c, type DetailSectionId as d, defaultDetailLayout as e, effectiveDetailSections as f, normalizeDetailLayout as n, resolveDetailLayout as r };

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { ADD_ITEM_MUTATION, AddManualOptions, AddProductOptions, AnalyticsCommerce, AnalyticsContext, AnalyticsEventName, AnalyticsItemInput, AnalyticsManager, AnalyticsStartOptions, ApplePayConfig, ApplePayResult, Attribution, BUYER_REF_MAX_LENGTH, BootstrapCampaign, BootstrapCampaignEntry, BootstrapCampaignStatus, BootstrapResponse, BootstrapSlot, CHECKOUT_ATTRIBUTION_CAPS, CHECKOUT_SPONSOR_STORAGE_KEY, CLIENT_LANDING_URL_MAX_LENGTH, CONTENT_URL_MAX_LENGTH, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CampaignHint, CartChangeDetail, CartLineItem, CartLineOrigin, CartManager, CartOrigin, CartQueryOptions, CartSlice, CartUpdatedDetail, CheckoutAddress, CheckoutAttributionInput, CheckoutAttributionWire, CheckoutChangeDetail, CheckoutManager, CheckoutManagerDeps, CheckoutOpenDetail, CheckoutReference, CheckoutSponsor, CheckoutState, ClientContext, CommerceClient, Configuration, ContentRef, CreatePaymentVippsResponse, CreatePaymentVippsVariables, DELETE_ITEM_MUTATION, EntryContextWire, Environment, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, GRAPHQL_INT_MAX, GatewayFeature, GetVippsStatusVariables, INTERNAL_KEY, INTERNAL_PARAM, ImageSize, LINE_ORIGIN_CAPS, Landing, LineOriginWire, LineOriginWireOptions, ManifestLocation, ManifestRequest, ManifestResult, OrderReference, OriginPage, PaymentCompleteDetail, PaymentMethod, PaymentSelectDetail, PaymentSuccessDetail, PaymentSuccessResult, PlacementComponent, Product, ProductCategory, ProductImage, ProductOption, ProductPrice, ProductVariant, PurchaseIds, RegisterSlotOptions, ResolvedConfig, SDK_VERSION, SlotInput, SlotKind, Sponsor, SponsorCartState, SponsorCommerceBlock, SponsorIdentity, SurfacePrivacyMode, SurfaceResponse, TrackOptions, UPDATE_CHECKOUT_MUTATION, UPDATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_ITEM_WITH_ORIGIN_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, VioConfig, VioItem, VioPlatform, VippsPaymentState, VippsStatusResult, activeCampaignEntry, addItem, autoSlotDisplayName, autoSlotId, buyerRefOf, campaignCandidates, capContentUrl, cartSlicesFrom, checkApplePayAvailability, checkoutAttributionOf, componentKindOf, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, dominantCampaignOf, ensureVippsButton, entryContextOf, executeCartGraphQL, formatPrice, gatewayHas, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCheckoutReference, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, isUnknownFeatureError, isUnknownTokenError, landingUrl, lineOriginWire, lineOrigins, normalizeBuyerRef, normalizeOrigin, normalizeScope, normalizeSlotKind, originAndPath, primaryImageUrl, purchaseFromPaymentSuccess, purchaseIdsOf, readInternal, resetGatewayFeatures, resolveCampaignId, resolveClientContext, resolveContent, resolveInternal, resolveLanding, resolveSlotCampaign, sameOrigin, showApplePaySheet, sponsorCampaignEntry, sponsorIdentityFrom, storedLanding, toCampaignId, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes, withGatewayFeature, writeInternal } from './core/index.js';
+export { A as AppliedDetailLayout, a as DETAIL_SECTION_IDS, D as DetailLayout, b as DetailLayoutAdjustment, c as DetailLayoutOrigin, d as DetailSectionId, E as ESSENTIAL_DETAIL_SECTIONS, e as defaultDetailLayout, f as effectiveDetailSections, n as normalizeDetailLayout, r as resolveDetailLayout } from './detail-layout-BI556w8p.js';
 import 'graphql-request';

package/dist/index.js

@@ -1,4 +1,4 @@
-import './chunk-QGJUBVH3.js';
-export { ADD_ITEM_MUTATION, AnalyticsManager, BUYER_REF_MAX_LENGTH, CHECKOUT_ATTRIBUTION_CAPS, CHECKOUT_SPONSOR_STORAGE_KEY, CLIENT_LANDING_URL_MAX_LENGTH, CONTENT_URL_MAX_LENGTH, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartManager, CheckoutManager, CommerceClient, Configuration, DELETE_ITEM_MUTATION, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, GRAPHQL_INT_MAX, INTERNAL_KEY, INTERNAL_PARAM, LINE_ORIGIN_CAPS, SDK_VERSION, UPDATE_CHECKOUT_MUTATION, UPDATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_ITEM_WITH_ORIGIN_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, activeCampaignEntry, addItem, autoSlotDisplayName, autoSlotId, buyerRefOf, campaignCandidates, capContentUrl, cartSlicesFrom, checkApplePayAvailability, checkoutAttributionOf, componentKindOf, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, dominantCampaignOf, ensureVippsButton, entryContextOf, executeCartGraphQL, formatPrice, gatewayHas, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCheckoutReference, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, isUnknownFeatureError, isUnknownTokenError, landingUrl, lineOriginWire, lineOrigins, normalizeBuyerRef, normalizeOrigin, normalizeScope, normalizeSlotKind, originAndPath, primaryImageUrl, purchaseFromPaymentSuccess, purchaseIdsOf, readInternal, resetGatewayFeatures, resolveCampaignId, resolveClientContext, resolveContent, resolveInternal, resolveLanding, resolveSlotCampaign, sameOrigin, showApplePaySheet, sponsorCampaignEntry, sponsorIdentityFrom, storedLanding, toCampaignId, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes, withGatewayFeature, writeInternal } from './chunk-ZORYG4W3.js';
+import './chunk-3YFJFDSN.js';
+export { ADD_ITEM_MUTATION, AnalyticsManager, BUYER_REF_MAX_LENGTH, CHECKOUT_ATTRIBUTION_CAPS, CHECKOUT_SPONSOR_STORAGE_KEY, CLIENT_LANDING_URL_MAX_LENGTH, CONTENT_URL_MAX_LENGTH, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartManager, CheckoutManager, CommerceClient, Configuration, DELETE_ITEM_MUTATION, DETAIL_SECTION_IDS, ESSENTIAL_DETAIL_SECTIONS, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, GRAPHQL_INT_MAX, INTERNAL_KEY, INTERNAL_PARAM, LINE_ORIGIN_CAPS, SDK_VERSION, UPDATE_CHECKOUT_MUTATION, UPDATE_CHECKOUT_WITH_ATTRIBUTION_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_ITEM_WITH_ORIGIN_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, activeCampaignEntry, addItem, autoSlotDisplayName, autoSlotId, buyerRefOf, campaignCandidates, capContentUrl, cartSlicesFrom, checkApplePayAvailability, checkoutAttributionOf, componentKindOf, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, defaultDetailLayout, deleteItem, displayPrice, dominantCampaignOf, effectiveDetailSections, ensureVippsButton, entryContextOf, executeCartGraphQL, formatPrice, gatewayHas, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCheckoutReference, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, isUnknownFeatureError, isUnknownTokenError, landingUrl, lineOriginWire, lineOrigins, normalizeBuyerRef, normalizeDetailLayout, normalizeOrigin, normalizeScope, normalizeSlotKind, originAndPath, primaryImageUrl, purchaseFromPaymentSuccess, purchaseIdsOf, readInternal, resetGatewayFeatures, resolveCampaignId, resolveClientContext, resolveContent, resolveDetailLayout, resolveInternal, resolveLanding, resolveSlotCampaign, sameOrigin, showApplePaySheet, sponsorCampaignEntry, sponsorIdentityFrom, storedLanding, toCampaignId, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes, withGatewayFeature, writeInternal } from './chunk-QA5R4VYF.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/react/index.d.ts

@@ -1,8 +1,9 @@
 import * as _lit_react from '@lit/react';
-import { V as VioCart$1, a as VioCheckout$1, b as VioProduct$1, c as VioProductCarousel$1, d as VioProductDetail$1 } from '../tokens-B7GVA_qB.js';
-export { e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-B7GVA_qB.js';
+import { V as VioCart$1, a as VioCheckout$1, b as VioProduct$1, c as VioProductCarousel$1, d as VioProductDetail$1 } from '../tokens-C-LsqKQH.js';
+export { e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-C-LsqKQH.js';
 import 'lit-html';
 import 'lit';
+import '../detail-layout-BI556w8p.js';
 
 declare const VioProduct: _lit_react.ReactWebComponent<VioProduct$1, {
     onProductClick: string;
@@ -12,6 +13,7 @@ declare const VioProductCarousel: _lit_react.ReactWebComponent<VioProductCarouse
 declare const VioProductDetail: _lit_react.ReactWebComponent<VioProductDetail$1, {
     onAddedToCart: string;
     onCheckoutOpen: string;
+    onLayoutApplied: string;
 }>;
 declare const VioCart: _lit_react.ReactWebComponent<VioCart$1, {
     onPaymentSuccess: string;

package/dist/react/index.js

@@ -1,6 +1,6 @@
-import { registerVioElements, VioProduct, VioProductCarousel, VioProductDetail, VioCart, VioCheckout } from '../chunk-T5B74YBQ.js';
-export { VioTokens, applyVioTheme } from '../chunk-T5B74YBQ.js';
-import '../chunk-ZORYG4W3.js';
+import { registerVioElements, VioProduct, VioProductCarousel, VioProductDetail, VioCart, VioCheckout } from '../chunk-F7LE5AZY.js';
+export { VioTokens, applyVioTheme } from '../chunk-F7LE5AZY.js';
+import '../chunk-QA5R4VYF.js';
 import * as React from 'react';
 
 // node_modules/@lit/react/node/create-component.js
@@ -40,7 +40,8 @@ var VioProductDetail2 = t({
   elementClass: VioProductDetail,
   events: {
     onAddedToCart: "vio:added-to-cart",
-    onCheckoutOpen: "vio:checkout-open"
+    onCheckoutOpen: "vio:checkout-open",
+    onLayoutApplied: "vio:detail-layout-applied"
   }
 });
 var VioCart2 = t({

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../node_modules/@lit/react/src/create-component.ts","../../src/react/index.ts"],"names":["reservedReactProperties","Set","createComponent","react","React","tagName","elementClass","events","displayName","eventProps","Object","keys","ReactComponent","forwardRef","props","ref","useRef","Map","elementRef","reactProps","elementProps","k","v","entries","has","prototype","createElement","name","globalThis","litSsrReactEnabled","length","useCallback","node","current","VioProduct","VioProductCarousel","VioProductDetail","VioCart","VioCheckout"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport type React from 'react';\n\nconst NODE_MODE = false;\nconst DEV_MODE = true;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DistributiveOmit<T, K extends string | number | symbol> = T extends any\n  ? K extends keyof T\n    ? Omit<T, K>\n    : T\n  : T;\ntype PropsWithoutRef<T> = DistributiveOmit<T, 'ref'>;\n\n/**\n * Creates a type to be used for the props of a web component used directly in\n * React JSX.\n *\n * Example:\n *\n * ```ts\n * declare module \"react\" {\n *   namespace JSX {\n *     interface IntrinsicElements {\n *       'x-foo': WebComponentProps<XFoo>;\n *     }\n *   }\n * }\n * ```\n */\nexport type WebComponentProps<I extends HTMLElement> = React.DetailedHTMLProps<\n  React.HTMLAttributes<I>,\n  I\n> &\n  ElementProps<I>;\n\n/**\n * Type of the React component wrapping the web component. This is the return\n * type of `createComponent`.\n */\nexport type ReactWebComponent<\n  I extends HTMLElement,\n  E extends EventNames = {},\n> = React.ForwardRefExoticComponent<\n  // TODO(augustjk): Remove and use `React.PropsWithoutRef` when\n  // https://github.com/preactjs/preact/issues/4124 is fixed.\n  PropsWithoutRef<ComponentProps<I, E>> & React.RefAttributes<I>\n>;\n\n// Props derived from custom element class. Currently has limitations of making\n// all properties optional and also surfaces life cycle methods in autocomplete.\n// TODO(augustjk) Consider omitting keyof LitElement to remove \"internal\"\n// lifecycle methods or allow user to explicitly provide props.\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;\n\n// Acceptable props to the React component.\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n  React.HTMLAttributes<I>,\n  // Prefer type of provided event handler props or those on element over\n  // built-in HTMLAttributes\n  keyof E | keyof ElementProps<I>\n> &\n  EventListeners<E> &\n  ElementProps<I>;\n\n/**\n * Type used to cast an event name with an event type when providing the\n * `events` option to `createComponent` for better typing of the event handler\n * prop.\n *\n * Example:\n *\n * ```ts\n * const FooComponent = createComponent({\n *   ...\n *   events: {\n *     onfoo: 'foo' as EventName<FooEvent>,\n *   }\n * });\n * ```\n *\n * `onfoo` prop will have the type `(e: FooEvent) => void`.\n */\nexport type EventName<T extends Event = Event> = string & {\n  __eventType: T;\n};\n\n// A key value map matching React prop names to event names.\ntype EventNames = Record<string, EventName | string>;\n\n// A map of expected event listener types based on EventNames.\ntype EventListeners<R extends EventNames> = {\n  [K in keyof R]?: R[K] extends EventName\n    ? (e: R[K]['__eventType']) => void\n    : (e: Event) => void;\n};\n\nexport interface Options<I extends HTMLElement, E extends EventNames = {}> {\n  react: typeof React;\n  tagName: string;\n  elementClass: Constructor<I>;\n  events?: E;\n  displayName?: string;\n}\n\ntype Constructor<T> = {new (): T};\n\nconst reservedReactProperties = new Set([\n  'children',\n  'localName',\n  'ref',\n  'style',\n  'className',\n]);\n\nconst listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n  node: Element,\n  event: string,\n  listener: (event?: Event) => void\n) => {\n  let events = listenedEvents.get(node);\n  if (events === undefined) {\n    listenedEvents.set(node, (events = new Map()));\n  }\n  let handler = events.get(event);\n  if (listener !== undefined) {\n    // If necessary, add listener and track handler\n    if (handler === undefined) {\n      events.set(event, (handler = {handleEvent: listener}));\n      node.addEventListener(event, handler);\n      // Otherwise just update the listener with new value\n    } else {\n      handler.handleEvent = listener;\n    }\n    // Remove listener if one exists and value is undefined\n  } else if (handler !== undefined) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: EventNames\n) => {\n  const event = events?.[name];\n  // Dirty check event value.\n  if (event !== undefined) {\n    if (value !== old) {\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    }\n    return;\n  }\n  // But don't dirty check properties; elements are assumed to do this.\n  node[name as keyof E] = value as E[keyof E];\n\n  // This block is to replicate React's behavior for attributes of native\n  // elements where `undefined` or `null` values result in attributes being\n  // removed.\n  // https://github.com/facebook/react/blob/899cb95f52cc83ab5ca1eb1e268c909d3f0961e7/packages/react-dom-bindings/src/client/DOMPropertyOperations.js#L107-L141\n  //\n  // It's only needed here for native HTMLElement properties that reflect\n  // attributes of the same name but don't have that behavior like \"id\" or\n  // \"draggable\".\n  if (\n    (value === undefined || value === null) &&\n    name in HTMLElement.prototype\n  ) {\n    node.removeAttribute(name);\n  }\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are added\n * to the custom element as event listeners.\n *\n * @param options An options bag containing the parameters needed to generate a\n * wrapped web component.\n *\n * @param options.react The React module, typically imported from the `react`\n * npm package.\n * @param options.tagName The custom element tag name registered via\n * `customElements.define`.\n * @param options.elementClass The custom element class registered via\n * `customElements.define`.\n * @param options.events An object listing events to which the component can\n * listen. The object keys are the event property names passed in via React\n * props and the object values are the names of the corresponding events\n * generated by the custom element. For example, given `{onactivate:\n * 'activate'}` an event function may be passed via the component's `onactivate`\n * prop and will be called when the custom element fires its `activate` event.\n * @param options.displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <\n  I extends HTMLElement,\n  E extends EventNames = {},\n>({\n  react: React,\n  tagName,\n  elementClass,\n  events,\n  displayName,\n}: Options<I, E>): ReactWebComponent<I, E> => {\n  const eventProps = new Set(Object.keys(events ?? {}));\n\n  if (DEV_MODE && !NODE_MODE) {\n    for (const p of reservedReactProperties) {\n      if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {\n        // Note, this effectively warns only for `ref` since the other\n        // reserved props are on HTMLElement.prototype. To address this\n        // would require crawling down the prototype, which doesn't feel worth\n        // it since implementing these properties on an element is extremely\n        // rare.\n        console.warn(\n          `${tagName} contains property ${p} which is a React reserved ` +\n            `property. It will be used by React and not set on the element.`\n        );\n      }\n    }\n  }\n\n  type Props = ComponentProps<I, E>;\n\n  const ReactComponent = React.forwardRef<I, Props>((props, ref) => {\n    const prevElemPropsRef = React.useRef(new Map());\n    const elementRef = React.useRef<I | null>(null);\n\n    // Props to be passed to React.createElement\n    const reactProps: Record<string, unknown> = {};\n    // Props to be set on element with setProperty\n    const elementProps: Record<string, unknown> = {};\n\n    for (const [k, v] of Object.entries(props)) {\n      if (reservedReactProperties.has(k)) {\n        // React does *not* handle `className` for custom elements so\n        // coerce it to `class` so it's handled correctly.\n        reactProps[k === 'className' ? 'class' : k] = v;\n        continue;\n      }\n\n      if (eventProps.has(k) || k in elementClass.prototype) {\n        elementProps[k] = v;\n        continue;\n      }\n\n      reactProps[k] = v;\n    }\n\n    // useLayoutEffect produces warnings during server rendering.\n    if (!NODE_MODE) {\n      // This one has no dependency array so it'll run on every re-render.\n      React.useLayoutEffect(() => {\n        if (elementRef.current === null) {\n          return;\n        }\n        const newElemProps = new Map();\n        for (const key in elementProps) {\n          setProperty(\n            elementRef.current,\n            key,\n            props[key],\n            prevElemPropsRef.current.get(key),\n            events\n          );\n          prevElemPropsRef.current.delete(key);\n          newElemProps.set(key, props[key]);\n        }\n        // \"Unset\" any props from previous render that no longer exist.\n        // Setting to `undefined` seems like the correct thing to \"unset\"\n        // but currently React will set it as `null`.\n        // See https://github.com/facebook/react/issues/28203\n        for (const [key, value] of prevElemPropsRef.current) {\n          setProperty(elementRef.current, key, undefined, value, events);\n        }\n        prevElemPropsRef.current = newElemProps;\n      });\n\n      // Empty dependency array so this will only run once after first render.\n      React.useLayoutEffect(() => {\n        elementRef.current?.removeAttribute('defer-hydration');\n      }, []);\n    }\n\n    if (NODE_MODE) {\n      // If component is to be server rendered with `@lit/ssr-react`, pass\n      // element properties in a special bag to be set by the server-side\n      // element renderer.\n      if (\n        (React.createElement.name === 'litPatchedCreateElement' ||\n          globalThis.litSsrReactEnabled) &&\n        Object.keys(elementProps).length\n      ) {\n        // This property needs to remain unminified.\n        reactProps['_$litProps$'] = elementProps;\n      }\n    } else {\n      // Suppress hydration warning for server-rendered attributes.\n      // This property needs to remain unminified.\n      reactProps['suppressHydrationWarning'] = true;\n    }\n\n    return React.createElement(tagName, {\n      ...reactProps,\n      ref: React.useCallback(\n        (node: I) => {\n          elementRef.current = node;\n          if (typeof ref === 'function') {\n            ref(node);\n          } else if (ref !== null) {\n            ref.current = node;\n          }\n        },\n        [ref]\n      ),\n    });\n  });\n\n  ReactComponent.displayName = displayName ?? elementClass.name;\n\n  return ReactComponent;\n};\n","/**\n * Vio React adapter — typed React wrappers for the `<vio-*>` web components.\n *\n * Built on `@lit/react`'s `createComponent`, which gives each wrapper:\n *   - typed props derived from the element's reactive properties, and\n *   - typed event props (the `vio:*` CustomEvents below) as `onX` callbacks.\n *\n * Importing this entry also REGISTERS the custom elements (via the\n * `registerVioElements()` call below), so you do NOT need a separate\n * `import '@vio-live/web-sdk/ui'` when you use these.\n *\n * React 18+ is an (optional) peer dependency — only required if you import this\n * entry. `@lit/react` is bundled in, so consumers install nothing extra.\n *\n *   import { Vio } from '@vio-live/web-sdk'\n *   import { VioProductCarousel } from '@vio-live/web-sdk/react'\n *   Vio.init({ apiKey, apiBase, graphqlBase, stripePublishableKey })\n *   <VioProductCarousel onProductAdd={(e) => console.log(e.detail)} />\n *\n * Slots (ADR-0027): the element property is `vioSlot` (attribute `vio-slot`),\n * so in React it is `<VioProductCarousel vioSlot=\"hero\" />`. `@lit/react`\n * passes every reactive property of the element class through as a prop and\n * sets it on the element after mount — the elements re-register the slot from\n * `updated()`, so the late set is fine. `slot` itself is React's/HTML's own\n * attribute (shadow DOM slotting) — do not use it for this.\n * Typed in `index.props.test.ts` (compile-time, checked by `npm run typecheck`).\n */\n\nimport * as React from 'react'\nimport { createComponent } from '@lit/react'\nimport {\n  registerVioElements,\n  VioProduct as VioProductEl,\n  VioProductCarousel as VioProductCarouselEl,\n  VioProductDetail as VioProductDetailEl,\n  VioCart as VioCartEl,\n  VioCheckout as VioCheckoutEl,\n} from '../ui/elements.js'\n// Not just for the re-export below — the import itself injects the default\n// design tokens as CSS custom properties on `:root` (see tokens.ts). Without\n// it, `elements.js` alone never pulls tokens.ts in, so this entry (the one\n// the Vev bundle actually goes through) never ran that injection.\nimport '../ui/tokens.js'\n\n// Register the underlying custom elements when this entry is imported.\nregisterVioElements()\n\nexport const VioProduct = createComponent({\n  react: React,\n  tagName: 'vio-product',\n  elementClass: VioProductEl,\n  events: {\n    onProductClick: 'vio:product-click',\n    onProductAdd: 'vio:product-add',\n  },\n})\n\nexport const VioProductCarousel = createComponent({\n  react: React,\n  tagName: 'vio-product-carousel',\n  elementClass: VioProductCarouselEl,\n  events: {},\n})\n\nexport const VioProductDetail = createComponent({\n  react: React,\n  tagName: 'vio-product-detail',\n  elementClass: VioProductDetailEl,\n  events: {\n    onAddedToCart: 'vio:added-to-cart',\n    onCheckoutOpen: 'vio:checkout-open',\n  },\n})\n\nexport const VioCart = createComponent({\n  react: React,\n  tagName: 'vio-cart',\n  elementClass: VioCartEl,\n  events: {\n    onPaymentSuccess: 'vio:payment-success',\n    onCheckoutOpen: 'vio:checkout-open',\n  },\n})\n\nexport const VioCheckout = createComponent({\n  react: React,\n  tagName: 'vio-checkout',\n  elementClass: VioCheckoutEl,\n  events: {\n    onPaymentSuccess: 'vio:payment-success',\n  },\n})\n\nexport { VioTokens, applyVioTheme, type VioThemeOverrides } from '../ui/tokens.js'\n"]}
+{"version":3,"sources":["../../node_modules/@lit/react/src/create-component.ts","../../src/react/index.ts"],"names":["reservedReactProperties","Set","createComponent","react","React","tagName","elementClass","events","displayName","eventProps","Object","keys","ReactComponent","forwardRef","props","ref","useRef","Map","elementRef","reactProps","elementProps","k","v","entries","has","prototype","createElement","name","globalThis","litSsrReactEnabled","length","useCallback","node","current","VioProduct","VioProductCarousel","VioProductDetail","VioCart","VioCheckout"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport type React from 'react';\n\nconst NODE_MODE = false;\nconst DEV_MODE = true;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DistributiveOmit<T, K extends string | number | symbol> = T extends any\n  ? K extends keyof T\n    ? Omit<T, K>\n    : T\n  : T;\ntype PropsWithoutRef<T> = DistributiveOmit<T, 'ref'>;\n\n/**\n * Creates a type to be used for the props of a web component used directly in\n * React JSX.\n *\n * Example:\n *\n * ```ts\n * declare module \"react\" {\n *   namespace JSX {\n *     interface IntrinsicElements {\n *       'x-foo': WebComponentProps<XFoo>;\n *     }\n *   }\n * }\n * ```\n */\nexport type WebComponentProps<I extends HTMLElement> = React.DetailedHTMLProps<\n  React.HTMLAttributes<I>,\n  I\n> &\n  ElementProps<I>;\n\n/**\n * Type of the React component wrapping the web component. This is the return\n * type of `createComponent`.\n */\nexport type ReactWebComponent<\n  I extends HTMLElement,\n  E extends EventNames = {},\n> = React.ForwardRefExoticComponent<\n  // TODO(augustjk): Remove and use `React.PropsWithoutRef` when\n  // https://github.com/preactjs/preact/issues/4124 is fixed.\n  PropsWithoutRef<ComponentProps<I, E>> & React.RefAttributes<I>\n>;\n\n// Props derived from custom element class. Currently has limitations of making\n// all properties optional and also surfaces life cycle methods in autocomplete.\n// TODO(augustjk) Consider omitting keyof LitElement to remove \"internal\"\n// lifecycle methods or allow user to explicitly provide props.\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;\n\n// Acceptable props to the React component.\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n  React.HTMLAttributes<I>,\n  // Prefer type of provided event handler props or those on element over\n  // built-in HTMLAttributes\n  keyof E | keyof ElementProps<I>\n> &\n  EventListeners<E> &\n  ElementProps<I>;\n\n/**\n * Type used to cast an event name with an event type when providing the\n * `events` option to `createComponent` for better typing of the event handler\n * prop.\n *\n * Example:\n *\n * ```ts\n * const FooComponent = createComponent({\n *   ...\n *   events: {\n *     onfoo: 'foo' as EventName<FooEvent>,\n *   }\n * });\n * ```\n *\n * `onfoo` prop will have the type `(e: FooEvent) => void`.\n */\nexport type EventName<T extends Event = Event> = string & {\n  __eventType: T;\n};\n\n// A key value map matching React prop names to event names.\ntype EventNames = Record<string, EventName | string>;\n\n// A map of expected event listener types based on EventNames.\ntype EventListeners<R extends EventNames> = {\n  [K in keyof R]?: R[K] extends EventName\n    ? (e: R[K]['__eventType']) => void\n    : (e: Event) => void;\n};\n\nexport interface Options<I extends HTMLElement, E extends EventNames = {}> {\n  react: typeof React;\n  tagName: string;\n  elementClass: Constructor<I>;\n  events?: E;\n  displayName?: string;\n}\n\ntype Constructor<T> = {new (): T};\n\nconst reservedReactProperties = new Set([\n  'children',\n  'localName',\n  'ref',\n  'style',\n  'className',\n]);\n\nconst listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n  node: Element,\n  event: string,\n  listener: (event?: Event) => void\n) => {\n  let events = listenedEvents.get(node);\n  if (events === undefined) {\n    listenedEvents.set(node, (events = new Map()));\n  }\n  let handler = events.get(event);\n  if (listener !== undefined) {\n    // If necessary, add listener and track handler\n    if (handler === undefined) {\n      events.set(event, (handler = {handleEvent: listener}));\n      node.addEventListener(event, handler);\n      // Otherwise just update the listener with new value\n    } else {\n      handler.handleEvent = listener;\n    }\n    // Remove listener if one exists and value is undefined\n  } else if (handler !== undefined) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: EventNames\n) => {\n  const event = events?.[name];\n  // Dirty check event value.\n  if (event !== undefined) {\n    if (value !== old) {\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    }\n    return;\n  }\n  // But don't dirty check properties; elements are assumed to do this.\n  node[name as keyof E] = value as E[keyof E];\n\n  // This block is to replicate React's behavior for attributes of native\n  // elements where `undefined` or `null` values result in attributes being\n  // removed.\n  // https://github.com/facebook/react/blob/899cb95f52cc83ab5ca1eb1e268c909d3f0961e7/packages/react-dom-bindings/src/client/DOMPropertyOperations.js#L107-L141\n  //\n  // It's only needed here for native HTMLElement properties that reflect\n  // attributes of the same name but don't have that behavior like \"id\" or\n  // \"draggable\".\n  if (\n    (value === undefined || value === null) &&\n    name in HTMLElement.prototype\n  ) {\n    node.removeAttribute(name);\n  }\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are added\n * to the custom element as event listeners.\n *\n * @param options An options bag containing the parameters needed to generate a\n * wrapped web component.\n *\n * @param options.react The React module, typically imported from the `react`\n * npm package.\n * @param options.tagName The custom element tag name registered via\n * `customElements.define`.\n * @param options.elementClass The custom element class registered via\n * `customElements.define`.\n * @param options.events An object listing events to which the component can\n * listen. The object keys are the event property names passed in via React\n * props and the object values are the names of the corresponding events\n * generated by the custom element. For example, given `{onactivate:\n * 'activate'}` an event function may be passed via the component's `onactivate`\n * prop and will be called when the custom element fires its `activate` event.\n * @param options.displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <\n  I extends HTMLElement,\n  E extends EventNames = {},\n>({\n  react: React,\n  tagName,\n  elementClass,\n  events,\n  displayName,\n}: Options<I, E>): ReactWebComponent<I, E> => {\n  const eventProps = new Set(Object.keys(events ?? {}));\n\n  if (DEV_MODE && !NODE_MODE) {\n    for (const p of reservedReactProperties) {\n      if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {\n        // Note, this effectively warns only for `ref` since the other\n        // reserved props are on HTMLElement.prototype. To address this\n        // would require crawling down the prototype, which doesn't feel worth\n        // it since implementing these properties on an element is extremely\n        // rare.\n        console.warn(\n          `${tagName} contains property ${p} which is a React reserved ` +\n            `property. It will be used by React and not set on the element.`\n        );\n      }\n    }\n  }\n\n  type Props = ComponentProps<I, E>;\n\n  const ReactComponent = React.forwardRef<I, Props>((props, ref) => {\n    const prevElemPropsRef = React.useRef(new Map());\n    const elementRef = React.useRef<I | null>(null);\n\n    // Props to be passed to React.createElement\n    const reactProps: Record<string, unknown> = {};\n    // Props to be set on element with setProperty\n    const elementProps: Record<string, unknown> = {};\n\n    for (const [k, v] of Object.entries(props)) {\n      if (reservedReactProperties.has(k)) {\n        // React does *not* handle `className` for custom elements so\n        // coerce it to `class` so it's handled correctly.\n        reactProps[k === 'className' ? 'class' : k] = v;\n        continue;\n      }\n\n      if (eventProps.has(k) || k in elementClass.prototype) {\n        elementProps[k] = v;\n        continue;\n      }\n\n      reactProps[k] = v;\n    }\n\n    // useLayoutEffect produces warnings during server rendering.\n    if (!NODE_MODE) {\n      // This one has no dependency array so it'll run on every re-render.\n      React.useLayoutEffect(() => {\n        if (elementRef.current === null) {\n          return;\n        }\n        const newElemProps = new Map();\n        for (const key in elementProps) {\n          setProperty(\n            elementRef.current,\n            key,\n            props[key],\n            prevElemPropsRef.current.get(key),\n            events\n          );\n          prevElemPropsRef.current.delete(key);\n          newElemProps.set(key, props[key]);\n        }\n        // \"Unset\" any props from previous render that no longer exist.\n        // Setting to `undefined` seems like the correct thing to \"unset\"\n        // but currently React will set it as `null`.\n        // See https://github.com/facebook/react/issues/28203\n        for (const [key, value] of prevElemPropsRef.current) {\n          setProperty(elementRef.current, key, undefined, value, events);\n        }\n        prevElemPropsRef.current = newElemProps;\n      });\n\n      // Empty dependency array so this will only run once after first render.\n      React.useLayoutEffect(() => {\n        elementRef.current?.removeAttribute('defer-hydration');\n      }, []);\n    }\n\n    if (NODE_MODE) {\n      // If component is to be server rendered with `@lit/ssr-react`, pass\n      // element properties in a special bag to be set by the server-side\n      // element renderer.\n      if (\n        (React.createElement.name === 'litPatchedCreateElement' ||\n          globalThis.litSsrReactEnabled) &&\n        Object.keys(elementProps).length\n      ) {\n        // This property needs to remain unminified.\n        reactProps['_$litProps$'] = elementProps;\n      }\n    } else {\n      // Suppress hydration warning for server-rendered attributes.\n      // This property needs to remain unminified.\n      reactProps['suppressHydrationWarning'] = true;\n    }\n\n    return React.createElement(tagName, {\n      ...reactProps,\n      ref: React.useCallback(\n        (node: I) => {\n          elementRef.current = node;\n          if (typeof ref === 'function') {\n            ref(node);\n          } else if (ref !== null) {\n            ref.current = node;\n          }\n        },\n        [ref]\n      ),\n    });\n  });\n\n  ReactComponent.displayName = displayName ?? elementClass.name;\n\n  return ReactComponent;\n};\n","/**\n * Vio React adapter — typed React wrappers for the `<vio-*>` web components.\n *\n * Built on `@lit/react`'s `createComponent`, which gives each wrapper:\n *   - typed props derived from the element's reactive properties, and\n *   - typed event props (the `vio:*` CustomEvents below) as `onX` callbacks.\n *\n * Importing this entry also REGISTERS the custom elements (via the\n * `registerVioElements()` call below), so you do NOT need a separate\n * `import '@vio-live/web-sdk/ui'` when you use these.\n *\n * React 18+ is an (optional) peer dependency — only required if you import this\n * entry. `@lit/react` is bundled in, so consumers install nothing extra.\n *\n *   import { Vio } from '@vio-live/web-sdk'\n *   import { VioProductCarousel } from '@vio-live/web-sdk/react'\n *   Vio.init({ apiKey, apiBase, graphqlBase, stripePublishableKey })\n *   <VioProductCarousel onProductAdd={(e) => console.log(e.detail)} />\n *\n * Slots (ADR-0027): the element property is `vioSlot` (attribute `vio-slot`),\n * so in React it is `<VioProductCarousel vioSlot=\"hero\" />`. `@lit/react`\n * passes every reactive property of the element class through as a prop and\n * sets it on the element after mount — the elements re-register the slot from\n * `updated()`, so the late set is fine. `slot` itself is React's/HTML's own\n * attribute (shadow DOM slotting) — do not use it for this.\n * Typed in `index.props.test.ts` (compile-time, checked by `npm run typecheck`).\n */\n\nimport * as React from 'react'\nimport { createComponent } from '@lit/react'\nimport {\n  registerVioElements,\n  VioProduct as VioProductEl,\n  VioProductCarousel as VioProductCarouselEl,\n  VioProductDetail as VioProductDetailEl,\n  VioCart as VioCartEl,\n  VioCheckout as VioCheckoutEl,\n} from '../ui/elements.js'\n// Not just for the re-export below — the import itself injects the default\n// design tokens as CSS custom properties on `:root` (see tokens.ts). Without\n// it, `elements.js` alone never pulls tokens.ts in, so this entry (the one\n// the Vev bundle actually goes through) never ran that injection.\nimport '../ui/tokens.js'\n\n// Register the underlying custom elements when this entry is imported.\nregisterVioElements()\n\nexport const VioProduct = createComponent({\n  react: React,\n  tagName: 'vio-product',\n  elementClass: VioProductEl,\n  events: {\n    onProductClick: 'vio:product-click',\n    onProductAdd: 'vio:product-add',\n  },\n})\n\nexport const VioProductCarousel = createComponent({\n  react: React,\n  tagName: 'vio-product-carousel',\n  elementClass: VioProductCarouselEl,\n  events: {},\n})\n\nexport const VioProductDetail = createComponent({\n  react: React,\n  tagName: 'vio-product-detail',\n  elementClass: VioProductDetailEl,\n  events: {\n    onAddedToCart: 'vio:added-to-cart',\n    onCheckoutOpen: 'vio:checkout-open',\n    onLayoutApplied: 'vio:detail-layout-applied',\n  },\n})\n\nexport const VioCart = createComponent({\n  react: React,\n  tagName: 'vio-cart',\n  elementClass: VioCartEl,\n  events: {\n    onPaymentSuccess: 'vio:payment-success',\n    onCheckoutOpen: 'vio:checkout-open',\n  },\n})\n\nexport const VioCheckout = createComponent({\n  react: React,\n  tagName: 'vio-checkout',\n  elementClass: VioCheckoutEl,\n  events: {\n    onPaymentSuccess: 'vio:payment-success',\n  },\n})\n\nexport { VioTokens, applyVioTheme, type VioThemeOverrides } from '../ui/tokens.js'\n"]}

package/dist/{tokens-B7GVA_qB.d.ts → tokens-C-LsqKQH.d.ts}

@@ -1,6 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
+import { D as DetailLayout, A as AppliedDetailLayout } from './detail-layout-BI556w8p.js';
 
 declare class VioProduct extends LitElement {
     /** Brand label shown at the top (uppercase, gray, small). */
@@ -302,6 +303,15 @@ declare class VioProductDetail extends LitElement {
      * say). Off by default: the toast shows.
      */
     noAddedToast: boolean;
+    /**
+     * «Kjøp nå med Vipps» when the brand's cart already has lines: `express`
+     * (default) adds the product and pays the WHOLE cart with Vipps Express —
+     * the line under the button says how many items and what total — or
+     * `checkout`: adds it and opens our checkout with Vipps preselected (as in
+     * 0.31–0.34). An empty cart is Express either way. Unset = the theme's
+     * `vippsCartPayment` (`--vio-vipps-cart-payment`).
+     */
+    vippsCartPayment: string;
     /**
      * How the images show: `thumbs` (one image, thumbnails under it — the
      * default) or `carousel` (every image in one swipeable row, no thumbnails:
@@ -336,6 +346,26 @@ declare class VioProductDetail extends LitElement {
      * Commerce (which wins). A carrier with neither gets the line icon.
      */
     carrierLogos: Record<string, string>;
+    /**
+     * The order of the sections below the gallery (0.34): `{ id, revision,
+     * sections, experimentId?, variantId? }` (attribute: the same as JSON). Wins
+     * over `Vio.configureDetail({ layout })`; unset = the page's, else the
+     * default. Section ids: `brand`, `title`, `stock`, `price`, `options`,
+     * `purchase`, `highlights`, `description`, `shippingReturns`. See README
+     * «Section order and layout tracking».
+     */
+    layout: DetailLayout | null;
+    /** The layout the detail renders with now (resolved before each render). */
+    private layoutNow;
+    /** The product and layout `vio:detail-layout-applied` was last said for. */
+    private appliedFor;
+    private unsubscribeLayout;
+    /**
+     * The layout this detail applies (0.34): `{ id, revision, experimentId?,
+     * variantId?, sections, adjusted, source }` — `source` is `element` (its own
+     * `layout`), `global` (`Vio.configureDetail`) or `default`. A copy.
+     */
+    get appliedLayout(): AppliedDetailLayout;
     private readonly slotRegistration;
     /** What the click that opened the detail carried ('' when nothing), and for which product. */
     private eventSlot;
@@ -449,10 +479,18 @@ declare class VioProductDetail extends LitElement {
     private readonly bottomSheet;
     private boundProductClick;
     static styles: lit.CSSResult;
+    /** The cart changed (another tab, the drawer): the line under Vipps counts it again. */
+    private boundCartChange;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
     willUpdate(changed: Map<string, unknown>): void;
+    /**
+     * `vio:detail-layout-applied` (bubbles, composed), with the applied layout,
+     * each time a product renders with a layout it has not been shown with yet:
+     * every open of a product, and every change of layout while it is open.
+     */
+    private announceLayout;
     /** An option as the element says it, else as the theme's custom property says it (lower case, unquoted). */
     private themeChoice;
     /** The attribute wins; else the theme's `--vio-detail-gallery`; else thumbnails. */
@@ -592,11 +630,24 @@ declare class VioProductDetail extends LitElement {
     private loadVippsButton;
     private buyWithVipps;
     /**
-     * The Vipps button will open the app with Express (see buyWithVipps): the
-     * brand has Express on, and this brand's cart is empty — with lines in it
-     * the checkout opens first.
+     * The Vipps button will open the app with Express for this product alone
+     * (see buyWithVipps): the brand has Express on, and this brand's cart is
+     * empty.
      */
     private vippsGoesStraightToApp;
+    /** This brand's cart already has lines. */
+    private cartHasLines;
+    /** `vipps-cart-payment`, else the theme's, else `express`. */
+    private vippsCartMode;
+    /**
+     * What the Vipps button will pay when the brand's cart already has lines
+     * (`express` mode): every unit in the cart plus this product at the chosen
+     * quantity, and their total, as the cart sums it (shipping is chosen in
+     * Vipps). null with an empty cart, or in `checkout` mode.
+     */
+    private wholeCartToPay;
+    /** The line under the Vipps button: what is paid (a cart with lines) or what happens in the app (Express, empty cart). */
+    private renderVippsNote;
     private startVippsExpressOrCheckout;
     /** The ordinary way in, Vipps preselected: the host opens the checkout on `vio:checkout-open`. */
     private openCheckoutWithVipps;
@@ -616,8 +667,8 @@ declare class VioProductDetail extends LitElement {
      * after an await, so it cannot wait for the server's cart), while the
      * charge is the sponsor's WHOLE cart. So the sheet opens only when it shows
      * what will be charged: an empty cart, and a sheet prepared for this
-     * product × quantity. Otherwise — lines already in the cart (as with Vipps,
-     * see buyWithVipps), or a quantity whose sheet is still being prepared —
+     * product × quantity. Otherwise — lines already in the cart, or a quantity
+     * whose sheet is still being prepared —
      * the product is added and the checkout opens with Apple Pay preselected:
      * every line and the total on screen, and its own Apple Pay button pays
      * that total.
@@ -674,6 +725,31 @@ declare class VioProductDetail extends LitElement {
     private measureLogo;
     render(): lit_html.TemplateResult<1>;
     private renderBody;
+    /**
+     * The info column in the applied layout's order (0.34) — the real DOM in
+     * that order, never CSS `order`, the same on every screen. The default
+     * order renders exactly the column before 0.34: brand, `.headline` (the
+     * title row with the stock, the price row), then `.purchase` — `.buy` with
+     * the options first — and highlights, description, «Frakt & retur» in it.
+     *
+     * A run of `title` / `stock` / `price` is one `.headline`; `title`
+     * right before `stock` share the title row. `options` right before
+     * `purchase` live in `.buy` (a pinned buy zone keeps them); elsewhere they
+     * are a block of their own. Everything after `purchase` goes in
+     * `.purchase`, as the description does by default: a pinned buy zone may
+     * slide over it, never over what comes before.
+     */
+    private renderSections;
+    /** A run of title / stock / price: one `.headline`. */
+    private renderHeadline;
+    /** One section that is not the headline nor the purchase group. */
+    private renderSection;
+    /**
+     * The SDK-managed buy group, never split: «Frakt fra…», Vipps / Apple Pay /
+     * the other ways to pay, quantity + «Legg i handlekurv», «Du handler direkte
+     * hos …». The options when they come right before it; then what follows it.
+     */
+    private renderPurchase;
     private renderOptionPickers;
     /** Best-effort HTML strip for description. */
     private stripHtml;
@@ -690,6 +766,13 @@ declare class VioCart extends LitElement {
     heading: string;
     emptyLabel: string;
     subtotalLabel: string;
+    /**
+     * What the Vipps button does: `express` (default) — Vipps Express for the
+     * sponsor's whole cart, straight to the app — or `checkout` — our checkout
+     * with Vipps preselected (`vio:checkout-open`, as in 0.31–0.34). Unset =
+     * the theme's `vippsCartPayment` (`--vio-vipps-cart-payment`).
+     */
+    vippsCartPayment: string;
     private carts;
     private itemCount;
     /** True when Apple Pay is usable (Safari + device + Stripe configured). */
@@ -700,6 +783,8 @@ declare class VioCart extends LitElement {
     /** Asking for the brand's methods: a neutral placeholder instead of every method's button (see methodEnabled). */
     private methodsLoading;
     private vippsOfficial;
+    /** A Vipps payment is being started from here: one at a time. */
+    private vippsStarting;
     /** Whether the method lookup has been attempted — see boundOnCartChange. */
     private paymentMethodsAttempted;
     /** Set after an Apple Pay express purchase — switches the drawer to the
@@ -744,7 +829,6 @@ declare class VioCart extends LitElement {
      * (betalingsmetode). The host's checkout-open handler closes this cart and
      * opens <vio-checkout> in express mode with Klarna preselected. */
     private onKlarnaExpress;
-    /** Vipps — opens the checkout with Vipps preselected. */
     /**
      * Open the checkout without preselecting a method.
      *
@@ -755,13 +839,27 @@ declare class VioCart extends LitElement {
      */
     private onCheckout;
     /**
-     * Vipps from the cart: the checkout opens with Vipps preselected — the
-     * standard path, where our form collects name, address, mobile and the
-     * delivery (with its price) before paying (Mote & Livsstil, 2026-10-28).
-     * It no longer starts Express from here: Express is the product detail's
-     * «Kjøp nå med Vipps» only.
+     * Vipps from the cart (2026-10-29: «el botón negro va con el nuestro y el
+     * botón de Vipps paga el carrito entero»): Vipps Express for the sponsor's
+     * WHOLE cart — the same Express as the detail's «Kjøp nå med Vipps»: the
+     * hand-over overlay, `vio:payment-redirect-*` with source `'cart'`, the
+     * return and its confirmation. «Til kassen» is the way into our checkout.
+     * When the brand has Express off, or this cart cannot have it (several
+     * suppliers, no rate), the checkout opens with Vipps preselected.
+     *
+     * `vipps-cart-payment="checkout"` keeps the 0.31–0.34 behaviour: the
+     * checkout opens with Vipps preselected, the standard payment.
      */
     private onVipps;
+    /**
+     * The one sponsor whose cart the Vipps button pays: the first with
+     * something to pay for. Express is built on THAT sponsor's backend cart
+     * only — another sponsor's lines are never in it.
+     */
+    private vippsSponsorId;
+    private startVippsExpressOrCheckout;
+    /** Our checkout with Vipps preselected: the host opens it on `vio:checkout-open`. */
+    private openCheckoutWithVipps;
     /** Vipps' own button when its script answers; our orange one otherwise. */
     private loadVippsButton;
     /** Stripe — opens the checkout with Stripe preselected. */
@@ -1659,6 +1757,13 @@ interface VioThemeOverrides {
     redirectBg?: string;
     /** Spinner colour of that overlay (default Vipps orange). */
     redirectSpinner?: string;
+    /**
+     * What the Vipps button pays when the cart has lines: `express` (default —
+     * Vipps Express for the sponsor's whole cart, from `<vio-cart>` and from
+     * `<vio-product-detail>`) or `checkout` (opens our checkout with Vipps
+     * preselected, as in 0.31–0.34). An element's `vipps-cart-payment` wins.
+     */
+    vippsCartPayment?: 'express' | 'checkout' | string;
 }
 /**
  * Apply (or clear) theme overrides. Pass `null`/`undefined` for a key to

package/dist/ui/index.d.ts

@@ -1,6 +1,7 @@
-export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail, e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-B7GVA_qB.js';
+export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail, e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-C-LsqKQH.js';
 import 'lit-html';
 import 'lit';
+import '../detail-layout-BI556w8p.js';
 
 /**
  * Vio elements — owns the `<vio-*>` custom-element classes and their registration.

package/dist/ui/index.js

@@ -1,6 +1,6 @@
-import { registerVioElements } from '../chunk-T5B74YBQ.js';
-export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-T5B74YBQ.js';
-import '../chunk-ZORYG4W3.js';
+import { registerVioElements } from '../chunk-F7LE5AZY.js';
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-F7LE5AZY.js';
+import '../chunk-QA5R4VYF.js';
 
 // src/ui/index.ts
 registerVioElements();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vio-live/web-sdk",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "Vio Web SDK — in-site shoppable + native checkout, designed for editorial commerce sites",
   "type": "module",
   "main": "./dist/index.js",