@vio-live/web-sdk 0.2.0 → 0.4.0

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":";;;;;AAgHA,IAAMA,CAAAA,uBAA8BC,GAAAA,CAAI,CACtC,YACA,WAAA,EACA,KAAA,EACA,OAAA,EACA,WAAA,CAAA,CAAA;AALF,IAwGaC,CAAAA,GAAkB,CAAA,EAI7BC,KAAAA,EAAOC,EAAAA,EACPC,OAAAA,EAAAA,CAAAA,EACAC,YAAAA,EAAAA,CAAAA,EACAC,MAAAA,EAAAA,CAAAA,EACAC,WAAAA,EAAAA,GAAAA,KAAAA;AAEA,EAAA,MAAMC,CAAAA,GAAa,IAAIR,GAAAA,CAAIS,MAAAA,CAAOC,KAAKJ,CAAAA,IAAU,EAAE,CAAA,GAoB7CK,CAAAA,GAAiBR,EAAAA,CAAMS,UAAAA,EAAqB,CAACC,IAAOC,EAAAA,KAAAA;AAC/BX,IAAAA,EAAAA,CAAMY,MAAAA,iBAAO,IAAIC,GAAAA,EAAAA,CAAAA;AAC1C,IAAA,MAAMC,EAAAA,GAAad,GAAMY,MAAAA,CAAiB,IAAA,GAGpCG,CAAAA,GAAsC,EAAA,EAEtCC,CAAAA,GAAwC,EAAA;AAE9C,IAAA,KAAA,MAAK,CAAOC,EAAAA,EAAGC,EAAAA,CAAAA,IAAMZ,OAAOa,OAAAA,CAAQT,EAAAA,CAAAA,EAC9Bd,CAAAA,CAAwBwB,GAAAA,CAAIH,EAAAA,CAAAA,GAG9BF,CAAAA,CAAiB,gBAANE,EAAAA,GAAoB,OAAA,GAAUA,EAAAA,CAAAA,GAAKC,EAAAA,GAI5Cb,CAAAA,CAAWe,GAAAA,CAAIH,EAAAA,KAAMA,EAAAA,IAAKf,CAAAA,CAAamB,SAAAA,GACzCL,CAAAA,CAAaC,EAAAA,CAAAA,GAAKC,EAAAA,GAIpBH,CAAAA,CAAWE,EAAAA,CAAAA,GAAKC,EAAAA;AAwDlB,IAAA,OAAA,CAbkC,yBAAA,KAA7BlB,EAAAA,CAAMsB,aAAAA,CAAcC,IAAAA,IACnBC,UAAAA,CAAWC,uBACbnB,MAAAA,CAAOC,IAAAA,CAAKS,CAAAA,CAAAA,CAAcU,MAAAA,KAG1BX,CAAAA,CAAwB,cAAIC,CAAAA,CAAAA,EAQzBhB,EAAAA,CAAMsB,aAAAA,CAAcrB,CAAAA,EAAS,EAAA,GAC/Bc,GACHJ,GAAAA,EAAKX,EAAAA,CAAM2B,WAAAA,EACRC,CAAAA,EAAAA,KAAAA;AACCd,MAAAA,EAAAA,CAAWe,OAAAA,GAAUD,EAAAA,EACF,UAAA,IAAA,OAARjB,EAAAA,GACTA,EAAAA,CAAIiB,EAAAA,CAAAA,GACa,IAAA,KAARjB,EAAAA,KACTA,EAAAA,CAAIkB,OAAAA,GAAUD,EAAAA,CAAAA;AACf,IAAA,CAAA,GAEH,CAACjB,EAAAA,CAAAA,CAAAA,EAAAA,CAAAA;EAEH,CAAA,EAAA;AAKJ,EAAA,OAFAH,CAAAA,CAAeJ,WAAAA,GAAcA,CAAAA,IAAeF,CAAAA,CAAaqB,IAAAA,EAElDf,CAAAA;AAAc,CAAA;;;ACtTvB,mBAAA,EAAoB;AAEb,IAAMsB,cAAa,CAAA,CAAgB;AAAA,EACxC,KAAA,EAAO,KAAA;AAAA,EACP,OAAA,EAAS,aAAA;AAAA,EACT,YAAA,EAAc,UAAA;AAAA,EACd,MAAA,EAAQ;AAAA,IACN,cAAA,EAAgB,mBAAA;AAAA,IAChB,YAAA,EAAc;AAAA;AAElB,CAAC;AAEM,IAAMC,sBAAqB,CAAA,CAAgB;AAAA,EAChD,KAAA,EAAO,KAAA;AAAA,EACP,OAAA,EAAS,sBAAA;AAAA,EACT,YAAA,EAAc,kBAAA;AAAA,EACd,QAAQ;AACV,CAAC;AAEM,IAAMC,oBAAmB,CAAA,CAAgB;AAAA,EAC9C,KAAA,EAAO,KAAA;AAAA,EACP,OAAA,EAAS,oBAAA;AAAA,EACT,YAAA,EAAc,gBAAA;AAAA,EACd,MAAA,EAAQ;AAAA,IACN,aAAA,EAAe,mBAAA;AAAA,IACf,cAAA,EAAgB;AAAA;AAEpB,CAAC;AAEM,IAAMC,WAAU,CAAA,CAAgB;AAAA,EACrC,KAAA,EAAO,KAAA;AAAA,EACP,OAAA,EAAS,UAAA;AAAA,EACT,YAAA,EAAc,OAAA;AAAA,EACd,MAAA,EAAQ;AAAA,IACN,gBAAA,EAAkB,qBAAA;AAAA,IAClB,cAAA,EAAgB;AAAA;AAEpB,CAAC;AAEM,IAAMC,eAAc,CAAA,CAAgB;AAAA,EACzC,KAAA,EAAO,KAAA;AAAA,EACP,OAAA,EAAS,cAAA;AAAA,EACT,YAAA,EAAc,WAAA;AAAA,EACd,MAAA,EAAQ;AAAA,IACN,gBAAA,EAAkB;AAAA;AAEtB,CAAC","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\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\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"]}
+{"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\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"]}

package/dist/tokens-CvqQYURw.d.ts

@@ -0,0 +1,555 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class VioProduct extends LitElement {
+    /** Brand label shown at the top (uppercase, gray, small). */
+    brand: string;
+    /** Product display name. Two-line truncation. */
+    name: string;
+    /** Pre-formatted price string (e.g. "990 kr"). Bold. */
+    price: string;
+    /** Retailer / sponsor name shown at the bottom (uppercase, gray). */
+    retailer: string;
+    /** Product image URL. Square aspect, gray bg if missing. */
+    imageUrl: string;
+    /** Vio product id, propagated to click event. */
+    productId: string;
+    /** Vio sponsor id, propagated to click event. */
+    sponsorId: string;
+    /** Whether the product has selectable variants — the quick-add button then
+     * opens the detail to pick one instead of adding directly. */
+    hasVariants: boolean;
+    /** Optional raw variants/options from the host — extra signal that a
+     * variant must be picked before adding (selection is mandatory). */
+    variants: unknown[] | undefined;
+    options: unknown[] | undefined;
+    /** Image-only mode: hide the meta block (brand / name / price / retailer)
+     * and show just the image + the quick-add button. Click still opens the
+     * detail. */
+    hideMeta: boolean;
+    /** True when this product currently sits in the cart (persistent mark). */
+    private inCart;
+    /** Total units of this product in the cart (shown as a count when > 1). */
+    private cartQty;
+    /** Transient flag driving the add "pop" animation. */
+    private justAdded;
+    private boundCartChange;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    /** Reflect whether (and how many units of) this product sit in the cart. */
+    private updateInCart;
+    private onClick;
+    private onKeydown;
+    /** Quick add-to-cart. If the product has selectable variants, open the detail
+     * to pick one instead (the host can't choose for the user). Otherwise emit
+     * `vio:product-add` so the host adds it (bumping quantity on repeat taps). */
+    private onAdd;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vio-product': VioProduct;
+    }
+}
+
+declare class VioProductCarousel extends LitElement {
+    /** Small uppercase label in accent color (e.g. "REDAKSJONENS FAVORITTER"). */
+    label: string;
+    /** Big serif heading (e.g. "Shop Favorittene"). */
+    heading: string;
+    /** Inline gray disclaimer next to the heading (e.g. "annonselenker"). */
+    disclaimer: string;
+    /** URL for the "Se alle" link. Hidden if empty. */
+    seeAllHref: string;
+    /** Label for the see-all link. Defaults to Norwegian. */
+    seeAllLabel: string;
+    /** Auto-fetch mode: comma-separated product ids (e.g. "408895,408896"). */
+    productIds: string;
+    /** Auto-fetch mode option A: explicit per-sponsor commerce apiKey. */
+    commerceKey: string;
+    /** Auto-fetch mode option B: sponsor id looked up via Vio.bootstrap. */
+    sponsorId: number;
+    /**
+     * Multi-sponsor mode: `"sponsorId:productId,sponsorId:productId,…"`. Each
+     * pair resolves its own commerce client via `Vio.commerceFor(sponsorId)`;
+     * fetches run in parallel and results are merged preserving input order.
+     * Each rendered <vio-product> carries the per-item sponsor-id so taps go
+     * to <vio-product-detail> with the right commerce context.
+     *
+     * Takes precedence over `product-ids` if both are set.
+     */
+    productRefs: string;
+    /** Currency for product prices. */
+    currency: string;
+    private scroller;
+    private fetched;
+    private isLoading;
+    private fetchError;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private autoFetch;
+    private parseRefs;
+    private scrollByDirection;
+    private renderScrollerContent;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vio-product-carousel': VioProductCarousel;
+    }
+}
+
+declare class VioProductDetail extends LitElement {
+    open: boolean;
+    productId: string;
+    sponsorId: number;
+    /** Subscribe to `vio:product-click` on the document and auto-open. */
+    autoOpen: boolean;
+    currency: string;
+    private product;
+    private isLoading;
+    private fetchError;
+    private selectedOptions;
+    private quantity;
+    private activeImageIndex;
+    private adding;
+    /** Apple Pay actually usable (real Stripe + registered domain) — set on load. */
+    private applePayOk;
+    /** Payment method names enabled for the sponsor (backend-configured).
+     * null = not loaded yet → all buy buttons render; [] = none enabled. */
+    private availableMethods;
+    /** Race guard: only the latest fetch may write state (two quick taps on
+     * different cards would otherwise let the slow response win). */
+    private fetchSeq;
+    /** Memoised option maps per variant object (recomputed per product). */
+    private optMapCache;
+    /** Pre-prepared Apple Pay handle — show() fires synchronously on tap. */
+    private applePayHandle;
+    private boundProductClick;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    close(): void;
+    private fetchProduct;
+    /** Which buy buttons to render — backend-configured per sponsor. */
+    private loadAvailablePaymentMethods;
+    /** Backend names arrive as e.g. "Apple Pay" — compare letters only. */
+    private methodEnabled;
+    /**
+     * Build an option-name → value map for a variant, from every shape the feeds
+     * ship: option1/2/3 columns, options/selected_options/variant arrays, plain
+     * object maps, and finally the title (value scan first, position fallback).
+     */
+    private getVariantOptionMap;
+    /** Option values a variant represents (map values ∪ title parts). */
+    private variantOptionValues;
+    /** Does a variant part represent this option value? Exact match, plus a
+     * whole-token match ONLY for numeric values ("30" matches "30 ml") — word
+     * subsets of text values are not matches ("Large" must NOT match
+     * "Extra Large"). */
+    private partMatchesValue;
+    /** Does a variant satisfy every currently-selected option value? */
+    private variantMatchesSelection;
+    /** Sellable quantity for a variant, across the stock field zoo. Boolean
+     * availability flags win; a numeric field wins next; `null` = the feed does
+     * not report stock for this variant (callers fall back to product stock —
+     * never assume "in stock" from absent data). */
+    private getVariantQty;
+    /** Variant stock with the product-level fallback applied (0 = not sellable). */
+    private variantSellableQty;
+    /** Resolve the active variant: full in-stock match → full match → best score
+     * (2 per mapped option match, 1 per title match, +0.5 if in stock). */
+    private selectedVariant;
+    /** True if some in-stock variant carries this option value. */
+    private isValueAvailable;
+    private get unitPrice();
+    private get compareAt();
+    private get availableQuantity();
+    private stockLabel;
+    /** Pick an option value. If the exact combination doesn't exist, jump to an
+     * in-stock variant that carries the value and adopt its full option map
+     * (keeps the selection always resolvable to a real variant). */
+    private selectOption;
+    private allImages;
+    private get activeImage();
+    /** Add the current product + selected variant + qty to the cart. Returns the variant id used. */
+    private addCurrentToCart;
+    private addToCart;
+    /**
+     * Express buy: add to cart, then open the checkout overlay with Klarna
+     * preselected. The host app handles `vio:checkout-open` (same event the cart
+     * uses) — the `paymentMethod` hint tells it to preselect Klarna so its widget
+     * loads immediately. Reuses the working Klarna Payments flow (no express SDK).
+     */
+    private buyWithKlarna;
+    /** Buy with Vipps — opens the checkout with Vipps preselected. */
+    private buyWithVipps;
+    /** Buy with Stripe — opens the checkout with Stripe preselected. */
+    private buyWithStripe;
+    /**
+     * Express buy with Apple Pay. Runs synchronously inside the click so the
+     * Apple Pay sheet keeps the user gesture: add to cart → open checkout (sets
+     * state) → launch the sheet. On authorize, `payment-complete` drives the
+     * confirmation drawer (same path as the in-checkout Apple Pay button).
+     */
+    private buyWithApplePay;
+    render(): lit_html.TemplateResult<1>;
+    private renderBody;
+    private renderOptionPickers;
+    /** Best-effort HTML strip for description. */
+    private stripHtml;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vio-product-detail': VioProductDetail;
+    }
+}
+
+declare class VioCart extends LitElement {
+    /** Drawer visibility. Reflects to attribute for `:host([open])`. */
+    open: boolean;
+    heading: string;
+    emptyLabel: string;
+    subtotalLabel: string;
+    private carts;
+    private itemCount;
+    /** True when Apple Pay is usable (Safari + device + Stripe configured). */
+    private applePayAvailable;
+    /** Payment method names enabled for the sponsor (backend-configured).
+     * null = not loaded yet → all buttons render; [] = none enabled. */
+    private availableMethods;
+    /** Set after an Apple Pay express purchase — switches the drawer to the
+     * confirmation screen (so the rest of the cart/checkout is not shown). */
+    private confirmedOrder;
+    /** Pre-resolved Apple Pay handle; `show()` fires the sheet synchronously. */
+    private applePayHandle;
+    /** Cart total Apple Pay was last prepared for (avoids redundant prep). */
+    private preparedTotal;
+    /** In-flight guard for loadAvailablePaymentMethods. */
+    private loadingPaymentMethods;
+    private boundOnCartChange;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    close(): void;
+    show(): void;
+    /** Which payment buttons to render — backend-configured per sponsor.
+     * Falls back to showing everything if the query fails or none is set. */
+    private loadAvailablePaymentMethods;
+    /** Backend names arrive as e.g. "Apple Pay" — compare letters only. */
+    private methodEnabled;
+    updated(changed: Map<string, unknown>): void;
+    /** Pre-resolve the Apple Pay sheet for the current cart total. */
+    private refreshApplePay;
+    /** Apple Pay express — pay the whole cart, then show the confirmation. */
+    private onApplePay;
+    private buildConfirmation;
+    private closeConfirmation;
+    /** Klarna express — opens the side-drawer Klarna checkout for the whole cart,
+     * skipping the address form (leveringsadresse) and method picker
+     * (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. */
+    private onVipps;
+    /** Stripe — opens the checkout with Stripe preselected. */
+    private onStripe;
+    private get totalAcrossSponsors();
+    private get primaryCurrency();
+    private onIncrement;
+    private onDecrement;
+    private onRemove;
+    render(): lit_html.TemplateResult<1>;
+    private renderConfirmation;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vio-cart': VioCart;
+    }
+}
+
+declare class VioCheckout extends LitElement {
+    open: boolean;
+    heading: string;
+    shippingLabel: string;
+    /** Express mode — render only the Klarna widget (no address form / method grid). */
+    express: boolean;
+    private checkoutState;
+    private items;
+    private applePayAvailable;
+    private applePayInProgress;
+    private klarnaAvailable;
+    private orderConfirmed;
+    private confirmedMethod;
+    private paymentError;
+    /** Neutral (non-error) status line: "verifying payment…" / "still processing". */
+    private paymentNotice;
+    /** Snapshot of the placed order, for the confirmation screen. */
+    private confirmedOrder;
+    /** Active Klarna Payments widget handle + the subtotal it was mounted for. */
+    private klarnaHandle;
+    private klarnaMountedAmount;
+    private klarnaMountedShipping;
+    private klarnaMounting;
+    /** Categories offered by the active Klarna session + the selected one. */
+    private klarnaCategories;
+    private klarnaSelectedCat;
+    private klarnaAuthorizing;
+    /** Chosen shipping option id (express flow) — drives the Klarna order total. */
+    private selectedShipping;
+    /** Real per-supplier shippings from the backend (empty → static fallback). */
+    private availableShippingsList;
+    /** Payment method names enabled for the sponsor (backend-configured).
+     * null = not loaded yet → all buttons render; [] = none enabled. */
+    private availableMethods;
+    /** Redirecting to the Stripe / Vipps hosted page. */
+    private stripeLoading;
+    private vippsLoading;
+    private form;
+    /** In-flight guard for loadAvailablePaymentMethods. */
+    private loadingPaymentMethods;
+    /** In-flight + attempted guards for loadAvailableShippings (change events
+     * fire per keystroke — without these, typing an address hammers the API). */
+    private loadingShippings;
+    private shippingsAttempted;
+    private boundOnCheckoutChange;
+    private boundOnPaymentComplete;
+    private boundOnPaymentError;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    /**
+     * Detect the redirect return from a hosted payment page (Stripe / Vipps /
+     * Klarna): the return URL carries vio_payment/vio_method/vio_sponsor. On
+     * success: clear that sponsor's cart, show the confirmation drawer, emit
+     * vio:payment-success (analytics/host hooks) and scrub the URL params.
+     */
+    /** Backend checkout statuses that mean the payment went through. */
+    private static readonly PAID_STATUSES;
+    /** Statuses that mean the payment definitively did NOT go through. */
+    private static readonly FAILED_STATUSES;
+    /** Waits between GetCheckout attempts — PSP webhooks (Vipps especially) can
+     * land seconds after the shopper is redirected back, so a single immediate
+     * check misreads a successful charge as unpaid. ~20s total. */
+    private static readonly RETURN_VERIFY_DELAYS_MS;
+    /** Vipps polling cadence — up to 2 minutes. Its webhook can lag well behind
+     * the redirect; this window was verified against a live checkout. */
+    private static readonly VIPPS_STATUS_MAX_ATTEMPTS;
+    private static readonly VIPPS_STATUS_DELAY_MS;
+    /**
+     * Vipps redirects to our return URL the same way on cancel as on success —
+     * the URL alone can't tell them apart, and the generic checkout status can
+     * lag behind Vipps' own webhook. Poll Vipps' own state directly instead:
+     * AUTHORIZED confirms, CREATED means still processing (keep polling),
+     * anything else (including an unrecognized state) is treated as failed —
+     * fail-closed by default rather than guessing.
+     */
+    private pollVippsStatus;
+    /** Shared outcome handler for both the generic (GetCheckout) and the
+     * Vipps-specific (GetVippsStatus) return-verification paths. */
+    private applyReturnOutcome;
+    private checkReturnPaymentStatus;
+    /** Remove our payment-return params from the URL without a reload. */
+    private cleanReturnQueryParams;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    close(): void;
+    show(): void;
+    /** Fetch the real per-supplier shippings and preselect + persist the first. */
+    private loadAvailableShippings;
+    /** Whether all mandatory Leveringsadresse fields are filled. */
+    private get isAddressValid();
+    /** Whether a valid shipping option is selected (when shippings exist). */
+    private get hasSelectedShipping();
+    /** Which payment buttons to render — backend-configured per sponsor. */
+    private loadAvailablePaymentMethods;
+    /** Backend names arrive as e.g. "Apple Pay" — compare letters only. */
+    private methodEnabled;
+    private refreshApplePay;
+    private refreshKlarna;
+    /** Mount (or re-mount on amount change) the Klarna Payments widget. */
+    private mountKlarnaIfNeeded;
+    private unmountKlarna;
+    /** Shippings in effect: backend per-supplier when loaded, static otherwise. */
+    private get shippingList();
+    /** Selected shipping option (express flow). */
+    private get shippingOption();
+    /** Pick a shipping option → re-mounts the Klarna widget with the new total.
+     * Also persists the choice on the backend cart (per supplier). */
+    private onSelectShipping;
+    /** Switch the Klarna widget to a different payment_method_category. */
+    private onKlarnaCategory;
+    /** Authorize the selected Klarna method → backend creates the order. */
+    private onKlarnaAuthorize;
+    private onFieldChange;
+    private onApplePay;
+    private onPay;
+    /**
+     * Complete the order for the selected method. Apple Pay and Klarna Express
+     * finish inside their own sheet/popup; Stripe and Vipps redirect to their
+     * hosted pages (via onPay). Anything else confirms state-only.
+     */
+    private onCompleteOrder;
+    /**
+     * Shared order confirmation — reached from both the plain "Betal" CTA
+     * (Vipps/Card/Klarna) and the Klarna Express authorize callback. Shows
+     * the confirmation screen, emits `vio:payment-success`, and clears the
+     * paid sponsor's cart so the badge + drawer reflect the purchase.
+     */
+    private confirmOrder;
+    private methodLabel;
+    /** True for methods that complete via a separate sheet/widget, not the CTA. */
+    private isExpressMethod;
+    private orderTotal;
+    /** Shipping cost (major units) whenever a shipping option is in effect —
+     * express always has one; the normal flow has one once the backend
+     * shippings loaded (the choice IS persisted on the cart and charged). */
+    private shippingMajor;
+    /** Total to charge — items + shipping (express). */
+    private payTotalLabel;
+    render(): lit_html.TemplateResult<1>;
+    private renderConfirmation;
+    /** Klarna Payments widget panel: shipping + category chips + widget + pay button. */
+    private renderKlarnaPanel;
+    /** Express layout — only the Klarna widget + a compact order summary. */
+    private renderKlarnaExpress;
+    private renderCheckoutBody;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vio-checkout': VioCheckout;
+    }
+}
+
+/**
+ * Vio Design Tokens — editorial commerce aesthetic.
+ *
+ * Extracted from the Allermedia "Mote & Livsstil" reference (the target
+ * pilot site). Mood: Vogue-like fashion magazine — serif headlines,
+ * sans-serif body, near-monochrome palette, terracotta accent for
+ * editorial labels ("REDAKSJONENS FAVORITTER").
+ *
+ * Tokens are exposed both as a typed TS object (`VioTokens`) and as
+ * CSS custom properties on `:root` (auto-injected when this module is
+ * imported in a browser). Consumers can override individual variables
+ * to re-skin without touching SDK source.
+ */
+declare const VioTokens: {
+    readonly color: {
+        readonly text: {
+            readonly primary: "#0a0a0a";
+            readonly secondary: "#666666";
+            readonly tertiary: "#999999";
+            readonly onPrimary: "#ffffff";
+        };
+        readonly accent: {
+            readonly editorial: "#c14a3b";
+        };
+        readonly surface: {
+            readonly base: "#ffffff";
+            readonly muted: "#f2f2f2";
+            readonly hover: "#fafafa";
+        };
+        readonly border: {
+            readonly subtle: "#e5e5e5";
+            readonly default: "#cccccc";
+        };
+    };
+    readonly font: {
+        readonly serif: "\"Tinos\", \"Playfair Display\", Georgia, serif";
+        readonly sans: "\"Inter\", -apple-system, \"Helvetica Neue\", Arial, sans-serif";
+    };
+    readonly size: {
+        readonly xs: "12px";
+        readonly sm: "14px";
+        readonly md: "16px";
+        readonly lg: "20px";
+        readonly xl: "24px";
+        readonly '2xl': "32px";
+        readonly '3xl': "40px";
+    };
+    readonly weight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly tracking: {
+        readonly label: "0.1em";
+        readonly title: "0";
+    };
+    readonly lineHeight: {
+        readonly tight: 1.1;
+        readonly snug: 1.3;
+        readonly normal: 1.5;
+    };
+    readonly space: {
+        readonly xs: "4px";
+        readonly sm: "8px";
+        readonly md: "16px";
+        readonly lg: "24px";
+        readonly xl: "32px";
+        readonly '2xl': "48px";
+        readonly '3xl': "64px";
+    };
+    readonly radius: {
+        readonly none: "0";
+        readonly sm: "2px";
+        readonly md: "4px";
+        readonly lg: "8px";
+        readonly full: "9999px";
+    };
+};
+/**
+ * Theming — override design tokens without touching SDK source.
+ *
+ * Every `<vio-*>` component reads colors/fonts via `var(--vio-color-accent,
+ * …)` etc. (shadow DOM inherits CSS custom properties from the light DOM,
+ * so this reaches every component including Apple Pay/Klarna/Vipps panels).
+ * `applyVioTheme` is the one supported way to set them: an inline style on
+ * `:root` (or a scoped element) always wins over the stylesheet rule
+ * `injectTokens` installs above, regardless of import/injection order — no
+ * specificity fights, no reaching for `!important`.
+ *
+ * A curated subset on purpose: colors + fonts are what a merchant/publisher
+ * actually wants a "brand settings" panel for. Spacing/radius/sizes stay
+ * internal — expose them here later if a real need shows up, don't
+ * speculatively surface the whole token set as public API.
+ *
+ * Host integrations (the Vio Config panel in Vev, a future Replit CMS
+ * panel, anything else) should call this ONE function — never set
+ * `--vio-*` custom properties by hand. If the injection mechanism changes
+ * later, only this function needs updating, not every panel that theme.
+ */
+interface VioThemeOverrides {
+    colorText?: string;
+    colorTextSecondary?: string;
+    colorTextTertiary?: string;
+    colorTextOnPrimary?: string;
+    colorAccent?: string;
+    colorSurface?: string;
+    colorSurfaceMuted?: string;
+    colorSurfaceHover?: string;
+    colorBorder?: string;
+    colorBorderDefault?: string;
+    fontSerif?: string;
+    fontSans?: string;
+}
+/**
+ * Apply (or clear) theme overrides. Pass `null`/`undefined` for a key to
+ * revert it to the SDK default instead of leaving a stale override behind
+ * — lets a host re-apply a full overrides object on every save without
+ * having to track which keys it previously set.
+ *
+ * `target` defaults to `document.documentElement` (`:root`, matching where
+ * `injectTokens` installs the defaults). Pass a specific element to scope
+ * the theme to one subtree instead of the whole page — e.g. multiple
+ * differently-branded sponsors on the same page.
+ */
+declare function applyVioTheme(overrides: VioThemeOverrides, target?: HTMLElement | null): void;
+
+export { VioCart as V, VioCheckout as a, VioProduct as b, VioProductCarousel as c, VioProductDetail as d, type VioThemeOverrides as e, VioTokens as f, applyVioTheme as g };