@vio-live/web-sdk 0.1.0 → 0.3.0

package/dist/react/index.js.map

@@ -0,0 +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"]}

package/dist/ui/index.d.ts

@@ -1,7 +1,29 @@
-export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail } from '../vio-checkout-D8B4Upk8.js';
+export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail } from '../vio-checkout-T9R5hpDx.js';
 import 'lit-html';
 import 'lit';
 
+/**
+ * Vio elements — owns the `<vio-*>` custom-element classes and their registration.
+ *
+ * WHY REGISTRATION IS A FUNCTION (not `@customElement` module side-effects):
+ * Both `./ui` and `./react` need the component classes, so the bundler hoists
+ * them into a *hashed* shared chunk that package.json `sideEffects` can't name.
+ * If registration were a module-eval side-effect (`@customElement`), a
+ * consumer's tree-shaker would drop that chunk on a bare `import '.../ui'` and
+ * the elements would never `define`. Instead, `registerVioElements()` is a
+ * *called value*: any sideEffects-listed entry that calls it (see ui/index +
+ * react/index) keeps the function and the classes it references — regardless of
+ * chunking — while `./core` stays free of these side-effects and remains
+ * tree-shakeable. See lessons/web-sdk-tsup-singleton-and-build.
+ */
+
+/**
+ * Register every `<vio-*>` custom element. Idempotent (skips already-defined
+ * tags, so calling it from both `./ui` and `./react` is safe) and SSR-safe
+ * (no-op when `customElements` is undefined).
+ */
+declare function registerVioElements(): void;
+
 /**
  * Vio Design Tokens — editorial commerce aesthetic.
  *
@@ -88,11 +110,14 @@ declare const VioTokens: {
  * Importing this file (directly or via the main `vio` entry) has two
  * side-effects:
  *   1. Injects design tokens as CSS custom properties on `:root`
- *   2. Registers all `<vio-*>` custom elements
+ *   2. Registers all `<vio-*>` custom elements (via `registerVioElements()`)
+ *
+ * Registration goes through an explicit function call (see ./elements) so it
+ * survives tree-shaking while keeping `./core` tree-shakeable.
  *
  * SSR-safe: every side-effect guards on `typeof document !== 'undefined'`.
  */
 
-declare const VIO_UI_VERSION = "0.1.0";
+declare const VIO_UI_VERSION = "0.2.0";
 
-export { VIO_UI_VERSION, VioTokens };
+export { VIO_UI_VERSION, VioTokens, registerVioElements };

package/dist/ui/index.js

@@ -1,4 +1,138 @@
-export { VIO_UI_VERSION, VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens } from '../chunk-4CCGE7DE.js';
-import '../chunk-5SPY7TH6.js';
+import { registerVioElements } from '../chunk-NWORYWIL.js';
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, registerVioElements } from '../chunk-NWORYWIL.js';
+import '../chunk-NP2KCM7X.js';
+
+// src/ui/tokens.ts
+var VioTokens = {
+  color: {
+    text: {
+      primary: "#0a0a0a",
+      secondary: "#666666",
+      tertiary: "#999999",
+      onPrimary: "#ffffff"
+    },
+    accent: {
+      editorial: "#c14a3b"
+      // "REDAKSJONENS FAVORITTER" red
+    },
+    surface: {
+      base: "#ffffff",
+      muted: "#f2f2f2",
+      // product image background
+      hover: "#fafafa"
+    },
+    border: {
+      subtle: "#e5e5e5",
+      default: "#cccccc"
+    }
+  },
+  font: {
+    serif: '"Tinos", "Playfair Display", Georgia, serif',
+    sans: '"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif'
+  },
+  size: {
+    xs: "12px",
+    sm: "14px",
+    md: "16px",
+    lg: "20px",
+    xl: "24px",
+    "2xl": "32px",
+    "3xl": "40px"
+  },
+  weight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  tracking: {
+    label: "0.1em",
+    // uppercase labels (BRAND, RETAILER, REDAKSJONENS FAVORITTER)
+    title: "0"
+  },
+  lineHeight: {
+    tight: 1.1,
+    snug: 1.3,
+    normal: 1.5
+  },
+  space: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px",
+    "2xl": "48px",
+    "3xl": "64px"
+  },
+  radius: {
+    none: "0",
+    sm: "2px",
+    md: "4px",
+    lg: "8px",
+    full: "9999px"
+  }
+};
+var VIO_TOKENS_CSS = `
+  :root {
+    /* color \u2014 text */
+    --vio-color-text:           ${VioTokens.color.text.primary};
+    --vio-color-text-secondary: ${VioTokens.color.text.secondary};
+    --vio-color-text-tertiary:  ${VioTokens.color.text.tertiary};
+    --vio-color-text-on-primary:${VioTokens.color.text.onPrimary};
+
+    /* color \u2014 accent */
+    --vio-color-accent: ${VioTokens.color.accent.editorial};
+
+    /* color \u2014 surface */
+    --vio-color-surface:       ${VioTokens.color.surface.base};
+    --vio-color-surface-muted: ${VioTokens.color.surface.muted};
+    --vio-color-surface-hover: ${VioTokens.color.surface.hover};
+
+    /* color \u2014 border */
+    --vio-color-border:         ${VioTokens.color.border.subtle};
+    --vio-color-border-default: ${VioTokens.color.border.default};
+
+    /* font */
+    --vio-font-serif: ${VioTokens.font.serif};
+    --vio-font-sans:  ${VioTokens.font.sans};
+
+    /* size */
+    --vio-size-xs: ${VioTokens.size.xs};
+    --vio-size-sm: ${VioTokens.size.sm};
+    --vio-size-md: ${VioTokens.size.md};
+    --vio-size-lg: ${VioTokens.size.lg};
+    --vio-size-xl: ${VioTokens.size.xl};
+
+    /* tracking (uppercase letterspacing) */
+    --vio-tracking-label: ${VioTokens.tracking.label};
+
+    /* space */
+    --vio-space-xs: ${VioTokens.space.xs};
+    --vio-space-sm: ${VioTokens.space.sm};
+    --vio-space-md: ${VioTokens.space.md};
+    --vio-space-lg: ${VioTokens.space.lg};
+    --vio-space-xl: ${VioTokens.space.xl};
+
+    /* radius */
+    --vio-radius-sm: ${VioTokens.radius.sm};
+    --vio-radius-md: ${VioTokens.radius.md};
+    --vio-radius-lg: ${VioTokens.radius.lg};
+  }
+`;
+function injectTokens() {
+  if (typeof document === "undefined") return;
+  if (document.querySelector('style[data-vio="tokens"]') !== null) return;
+  const style = document.createElement("style");
+  style.setAttribute("data-vio", "tokens");
+  style.textContent = VIO_TOKENS_CSS;
+  document.head.appendChild(style);
+}
+injectTokens();
+
+// src/ui/index.ts
+registerVioElements();
+var VIO_UI_VERSION = "0.2.0";
+
+export { VIO_UI_VERSION, VioTokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../../src/ui/tokens.ts","../../src/ui/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Vio Design Tokens — editorial commerce aesthetic.\n *\n * Extracted from the Allermedia \"Mote & Livsstil\" reference (the target\n * pilot site). Mood: Vogue-like fashion magazine — serif headlines,\n * sans-serif body, near-monochrome palette, terracotta accent for\n * editorial labels (\"REDAKSJONENS FAVORITTER\").\n *\n * Tokens are exposed both as a typed TS object (`VioTokens`) and as\n * CSS custom properties on `:root` (auto-injected when this module is\n * imported in a browser). Consumers can override individual variables\n * to re-skin without touching SDK source.\n */\n\nexport const VioTokens = {\n  color: {\n    text: {\n      primary: '#0a0a0a',\n      secondary: '#666666',\n      tertiary: '#999999',\n      onPrimary: '#ffffff',\n    },\n    accent: {\n      editorial: '#c14a3b', // \"REDAKSJONENS FAVORITTER\" red\n    },\n    surface: {\n      base: '#ffffff',\n      muted: '#f2f2f2', // product image background\n      hover: '#fafafa',\n    },\n    border: {\n      subtle: '#e5e5e5',\n      default: '#cccccc',\n    },\n  },\n  font: {\n    serif: '\"Tinos\", \"Playfair Display\", Georgia, serif',\n    sans: '\"Inter\", -apple-system, \"Helvetica Neue\", Arial, sans-serif',\n  },\n  size: {\n    xs: '12px',\n    sm: '14px',\n    md: '16px',\n    lg: '20px',\n    xl: '24px',\n    '2xl': '32px',\n    '3xl': '40px',\n  },\n  weight: {\n    regular: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700,\n  },\n  tracking: {\n    label: '0.1em', // uppercase labels (BRAND, RETAILER, REDAKSJONENS FAVORITTER)\n    title: '0',\n  },\n  lineHeight: {\n    tight: 1.1,\n    snug: 1.3,\n    normal: 1.5,\n  },\n  space: {\n    xs: '4px',\n    sm: '8px',\n    md: '16px',\n    lg: '24px',\n    xl: '32px',\n    '2xl': '48px',\n    '3xl': '64px',\n  },\n  radius: {\n    none: '0',\n    sm: '2px',\n    md: '4px',\n    lg: '8px',\n    full: '9999px',\n  },\n} as const\n\n/**\n * CSS Custom Properties — generated from VioTokens. Injected once into\n * the document head on first import. Consumers can override any\n * `--vio-*` var on their root or component selector to customise.\n */\nconst VIO_TOKENS_CSS = `\n  :root {\n    /* color — text */\n    --vio-color-text:           ${VioTokens.color.text.primary};\n    --vio-color-text-secondary: ${VioTokens.color.text.secondary};\n    --vio-color-text-tertiary:  ${VioTokens.color.text.tertiary};\n    --vio-color-text-on-primary:${VioTokens.color.text.onPrimary};\n\n    /* color — accent */\n    --vio-color-accent: ${VioTokens.color.accent.editorial};\n\n    /* color — surface */\n    --vio-color-surface:       ${VioTokens.color.surface.base};\n    --vio-color-surface-muted: ${VioTokens.color.surface.muted};\n    --vio-color-surface-hover: ${VioTokens.color.surface.hover};\n\n    /* color — border */\n    --vio-color-border:         ${VioTokens.color.border.subtle};\n    --vio-color-border-default: ${VioTokens.color.border.default};\n\n    /* font */\n    --vio-font-serif: ${VioTokens.font.serif};\n    --vio-font-sans:  ${VioTokens.font.sans};\n\n    /* size */\n    --vio-size-xs: ${VioTokens.size.xs};\n    --vio-size-sm: ${VioTokens.size.sm};\n    --vio-size-md: ${VioTokens.size.md};\n    --vio-size-lg: ${VioTokens.size.lg};\n    --vio-size-xl: ${VioTokens.size.xl};\n\n    /* tracking (uppercase letterspacing) */\n    --vio-tracking-label: ${VioTokens.tracking.label};\n\n    /* space */\n    --vio-space-xs: ${VioTokens.space.xs};\n    --vio-space-sm: ${VioTokens.space.sm};\n    --vio-space-md: ${VioTokens.space.md};\n    --vio-space-lg: ${VioTokens.space.lg};\n    --vio-space-xl: ${VioTokens.space.xl};\n\n    /* radius */\n    --vio-radius-sm: ${VioTokens.radius.sm};\n    --vio-radius-md: ${VioTokens.radius.md};\n    --vio-radius-lg: ${VioTokens.radius.lg};\n  }\n`\n\nfunction injectTokens(): void {\n  if (typeof document === 'undefined') return\n  if (document.querySelector('style[data-vio=\"tokens\"]') !== null) return\n  const style = document.createElement('style')\n  style.setAttribute('data-vio', 'tokens')\n  style.textContent = VIO_TOKENS_CSS\n  document.head.appendChild(style)\n}\n\ninjectTokens()\n","/**\n * Vio UI — Web Components + design tokens.\n *\n * Importing this file (directly or via the main `vio` entry) has two\n * side-effects:\n *   1. Injects design tokens as CSS custom properties on `:root`\n *   2. Registers all `<vio-*>` custom elements (via `registerVioElements()`)\n *\n * Registration goes through an explicit function call (see ./elements) so it\n * survives tree-shaking while keeping `./core` tree-shakeable.\n *\n * SSR-safe: every side-effect guards on `typeof document !== 'undefined'`.\n */\n\nimport './tokens.js'\nimport { registerVioElements } from './elements.js'\n\n// Auto-register on import, so the conventional `import '@vio-live/web-sdk/ui'`\n// keeps working. This call is what pins the registration into this entry.\nregisterVioElements()\n\nexport { VioTokens } from './tokens.js'\nexport {\n  registerVioElements,\n  VioProduct,\n  VioProductCarousel,\n  VioProductDetail,\n  VioCart,\n  VioCheckout,\n} from './elements.js'\n\nexport const VIO_UI_VERSION = '0.2.0'\n"]}

package/dist/{vio-checkout-D8B4Upk8.d.ts → vio-checkout-T9R5hpDx.d.ts}

@@ -20,6 +20,14 @@ declare class VioProduct extends LitElement {
     /** 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). */
@@ -111,6 +119,14 @@ declare class VioProductDetail extends LitElement {
     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;
@@ -120,12 +136,44 @@ declare class VioProductDetail extends LitElement {
     show(): void;
     close(): void;
     private fetchProduct;
-    /** Resolve the active variant from the selected option values. */
+    /** 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();
@@ -139,6 +187,10 @@ declare class VioProductDetail extends LitElement {
      * 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
@@ -162,13 +214,15 @@ declare class VioCart extends LitElement {
     /** Drawer visibility. Reflects to attribute for `:host([open])`. */
     open: boolean;
     heading: string;
-    checkoutLabel: 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;
@@ -176,12 +230,19 @@ declare class VioCart extends LitElement {
     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;
@@ -194,6 +255,10 @@ 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. */
+    private onVipps;
+    /** Stripe — opens the checkout with Stripe preselected. */
+    private onStripe;
     private get totalAcrossSponsors();
     private get primaryCurrency();
     private onIncrement;
@@ -222,6 +287,8 @@ declare class VioCheckout extends LitElement {
     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. */
@@ -235,24 +302,84 @@ declare class VioCheckout extends LitElement {
     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(): 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. */
+    /** 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;
@@ -262,11 +389,9 @@ declare class VioCheckout extends LitElement {
     private onApplePay;
     private onPay;
     /**
-     * Complete the order for the selected method (Vipps / Card / plain Klarna).
-     * Apple Pay and Klarna Express finish inside their own sheet/popup, so they
-     * never reach here. No real PSP is wired for Vipps/Card in this iteration —
-     * the capture happens backend-side in the full flow — so this confirms the
-     * order state-only and shows the confirmation screen.
+     * 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;
     /**
@@ -280,7 +405,9 @@ declare class VioCheckout extends LitElement {
     /** True for methods that complete via a separate sheet/widget, not the CTA. */
     private isExpressMethod;
     private orderTotal;
-    /** Shipping cost (major units) applied in express mode, else 0. */
+    /** 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;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@vio-live/web-sdk",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Vio Web SDK — in-site shoppable + native checkout, designed for editorial commerce sites",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": [
-    "./dist/**"
+    "./dist/ui/index.js",
+    "./dist/react/index.js"
   ],
   "exports": {
     ".": {
@@ -21,6 +22,10 @@
     "./ui": {
       "types": "./dist/ui/index.d.ts",
       "import": "./dist/ui/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
     }
   },
   "files": [
@@ -40,8 +45,18 @@
     "graphql-request": "^7.1.0",
     "lit": "^3.2.0"
   },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@lit/react": "^1.0.8",
     "@types/node": "^22.10.0",
+    "@types/react": "^19.2.17",
     "tsup": "^8.5.1",
     "typescript": "^5.6.3",
     "vite": "^6.0.0",
@@ -65,6 +80,7 @@
     "checkout",
     "web-components",
     "lit",
+    "react",
     "klarna",
     "editorial-commerce"
   ],