@vio-live/web-sdk 0.1.0

package/dist/core/index.js

@@ -0,0 +1,4 @@
+import '../chunk-GGM2AIK5.js';
+export { CartManager, CheckoutManager, CommerceClient, Configuration, Vio, VioApi, VioApiError, checkApplePayAvailability, createCommerceClient, createVioApi, displayPrice, formatPrice, primaryImageUrl, showApplePaySheet } from '../chunk-5SPY7TH6.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { AddManualOptions, AddProductOptions, ApplePayConfig, ApplePayResult, BootstrapResponse, CartChangeDetail, CartLineItem, CartManager, CheckoutAddress, CheckoutChangeDetail, CheckoutManager, CheckoutState, CommerceClient, Configuration, Environment, ImageSize, PaymentCompleteDetail, PaymentMethod, PaymentSelectDetail, PlacementComponent, Product, ProductCategory, ProductImage, ProductOption, ProductPrice, ProductVariant, ResolvedConfig, Sponsor, SponsorCartState, SponsorCommerceBlock, Vio, VioApi, VioApiError, VioConfig, checkApplePayAvailability, createCommerceClient, createVioApi, displayPrice, formatPrice, primaryImageUrl, showApplePaySheet } from './core/index.js';
+import './vio-checkout-D8B4Upk8.js';
+import 'graphql-request';
+import 'lit-html';
+import 'lit';

package/dist/index.js

@@ -0,0 +1,5 @@
+import './chunk-GGM2AIK5.js';
+import './chunk-4CCGE7DE.js';
+export { CartManager, CheckoutManager, CommerceClient, Configuration, Vio, VioApi, VioApiError, checkApplePayAvailability, createCommerceClient, createVioApi, displayPrice, formatPrice, primaryImageUrl, showApplePaySheet } from './chunk-5SPY7TH6.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/ui/index.d.ts

@@ -0,0 +1,98 @@
+export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail } from '../vio-checkout-D8B4Upk8.js';
+import 'lit-html';
+import 'lit';
+
+/**
+ * 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";
+    };
+};
+
+/**
+ * Vio UI — Web Components + design tokens.
+ *
+ * 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
+ *
+ * SSR-safe: every side-effect guards on `typeof document !== 'undefined'`.
+ */
+
+declare const VIO_UI_VERSION = "0.1.0";
+
+export { VIO_UI_VERSION, VioTokens };

package/dist/ui/index.js

@@ -0,0 +1,4 @@
+export { VIO_UI_VERSION, VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens } from '../chunk-4CCGE7DE.js';
+import '../chunk-5SPY7TH6.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/vio-checkout-D8B4Upk8.d.ts

@@ -0,0 +1,301 @@
+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;
+    /** 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;
+    /** 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;
+    /** Resolve the active variant from the selected option values. */
+    private selectedVariant;
+    private get unitPrice();
+    private get compareAt();
+    private get availableQuantity();
+    private stockLabel;
+    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;
+    /**
+     * 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;
+    checkoutLabel: string;
+    emptyLabel: string;
+    subtotalLabel: string;
+    private carts;
+    private itemCount;
+    /** True when Apple Pay is usable (Safari + device + Stripe configured). */
+    private applePayAvailable;
+    /** 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;
+    private boundOnCartChange;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    close(): void;
+    show(): void;
+    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;
+    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;
+    /** 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;
+    private form;
+    private boundOnCheckoutChange;
+    private boundOnPaymentComplete;
+    private boundOnPaymentError;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    close(): void;
+    show(): void;
+    private refreshApplePay;
+    private refreshKlarna;
+    /** Mount (or re-mount on amount change) the Klarna Payments widget. */
+    private mountKlarnaIfNeeded;
+    private unmountKlarna;
+    /** Selected shipping option (express flow). */
+    private get shippingOption();
+    /** Pick a shipping option → re-mounts the Klarna widget with the new total. */
+    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 (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.
+     */
+    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) applied in express mode, else 0. */
+    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;
+    }
+}
+
+export { VioCart as V, VioCheckout as a, VioProduct as b, VioProductCarousel as c, VioProductDetail as d };

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@vio-live/web-sdk",
+  "version": "0.1.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/**"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "graphql-request": "^7.1.0",
+    "lit": "^3.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.0",
+    "vitest": "^2.1.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vio-live/vio-web-sdk.git"
+  },
+  "homepage": "https://github.com/vio-live/vio-web-sdk#readme",
+  "bugs": {
+    "url": "https://github.com/vio-live/vio-web-sdk/issues"
+  },
+  "keywords": [
+    "vio",
+    "commerce",
+    "shoppable",
+    "checkout",
+    "web-components",
+    "lit",
+    "klarna",
+    "editorial-commerce"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "private": false
+}