@nymbalhq/web-components 1.1.0 → 1.3.0

package/dist/chunk-W23P7SI4.js

@@ -0,0 +1,239 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  navigateOnClick
+} from "./chunk-LO2EW5YP.js";
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/site-header.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-site-header",
+  reactName: "SiteHeader",
+  attributes: [
+    { name: "links", prop: "links", type: "json" },
+    { name: "logo", prop: "logo", type: "string" },
+    { name: "account-href", prop: "accountHref", type: "string" }
+  ],
+  events: [],
+  parts: ["header", "logo", "nav", "link", "account", "toggle", "actions"],
+  // The page's own search bar and mini-cart, light-DOM children with `slot="search"` and `slot="cart"`.
+  slots: ["search", "cart"],
+  children: true
+};
+var NymbalSiteHeader = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+        position: sticky;
+        top: 0;
+        z-index: var(--nymbal-z-dropdown, 100);
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      [part~='header'] {
+        background-color: var(--nymbal-color-surface, #ffffff);
+        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);
+      }
+      .inner {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--nymbal-spacing-md, 1rem);
+        max-width: 72rem;
+        margin-inline: auto;
+        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+      }
+      [part~='logo'] {
+        flex-shrink: 0;
+        font-size: var(--nymbal-font-size-lg, 1.125rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        letter-spacing: -0.02em;
+        color: var(--nymbal-color-primary, #18181b);
+        text-decoration: none;
+      }
+      [part~='logo']:hover {
+        color: var(--nymbal-color-accent, #2563eb);
+      }
+      .toggle-input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+      }
+      [part~='toggle'] {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 4px;
+        width: 28px;
+        height: 28px;
+        margin-left: auto;
+        padding: 2px;
+        cursor: pointer;
+      }
+      .line {
+        display: block;
+        width: 100%;
+        height: 2px;
+        border-radius: 1px;
+        background-color: var(--nymbal-color-primary, #18181b);
+        transition:
+          transform var(--nymbal-transition-fast, 150ms ease),
+          opacity var(--nymbal-transition-fast, 150ms ease);
+      }
+      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(1) {
+        transform: translateY(6px) rotate(45deg);
+      }
+      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(2) {
+        opacity: 0;
+      }
+      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(3) {
+        transform: translateY(-6px) rotate(-45deg);
+      }
+      .menu {
+        display: none;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-md, 1rem);
+        width: 100%;
+        padding-block: var(--nymbal-spacing-sm, 0.5rem);
+      }
+      .toggle-input:checked ~ .menu {
+        display: flex;
+      }
+      [part~='nav'] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--nymbal-spacing-xs, 0.25rem);
+      }
+      [part~='link'] {
+        display: block;
+        padding: var(--nymbal-spacing-xs, 0.25rem) var(--nymbal-spacing-sm, 0.5rem);
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-medium, 500);
+        color: var(--nymbal-color-text, #18181b);
+        text-decoration: none;
+        border-radius: var(--nymbal-radius-sm, 0.25rem);
+        transition:
+          background-color var(--nymbal-transition-fast, 150ms ease),
+          color var(--nymbal-transition-fast, 150ms ease);
+      }
+      [part~='link']:hover,
+      [part~='account']:hover {
+        background-color: var(--nymbal-color-border, #e4e4e7);
+        color: var(--nymbal-color-accent, #2563eb);
+      }
+      [part~='actions'] {
+        display: flex;
+        align-items: center;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+      }
+      [part~='account'] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        color: var(--nymbal-color-text, #18181b);
+        text-decoration: none;
+        border-radius: var(--nymbal-radius-full, 9999px);
+      }
+      @media (min-width: 641px) {
+        .inner {
+          padding-inline: var(--nymbal-spacing-lg, 1.5rem);
+        }
+      }
+      @media (min-width: 769px) {
+        [part~='toggle'] {
+          display: none;
+        }
+        .inner {
+          flex-wrap: nowrap;
+          padding-block: var(--nymbal-spacing-md, 1rem);
+        }
+        .menu {
+          display: flex;
+          flex: 1;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          width: auto;
+          gap: var(--nymbal-spacing-lg, 1.5rem);
+          padding-block: 0;
+        }
+        [part~='nav'] {
+          flex-direction: row;
+        }
+      }
+    `
+  ];
+  render() {
+    const links = parsedJson(this, "links", this.links);
+    return html`
+      <header part="header" data-testid="site-header">
+        <div class="inner">
+          ${this.logo === void 0 ? nothing : html`<a part="logo" href="/" @click=${navigateOnClick}>${this.logo}</a>`}
+          <input
+            type="checkbox"
+            id="nav-toggle"
+            class="toggle-input"
+            aria-label="Toggle navigation"
+          />
+          <label part="toggle" for="nav-toggle" aria-hidden="true">
+            <span class="line"></span>
+            <span class="line"></span>
+            <span class="line"></span>
+          </label>
+          <div class="menu">
+            <nav part="nav" aria-label="Main navigation">
+              ${(Array.isArray(links) ? links : []).map(
+      (link) => html`<a part="link" href=${link.href} @click=${navigateOnClick}
+                    >${link.label}</a
+                  >`
+    )}
+            </nav>
+            <div part="actions">
+              <slot name="search"></slot>
+              ${this.accountHref === void 0 ? nothing : html`<a
+                    part="account"
+                    href=${this.accountHref}
+                    aria-label="Account"
+                    @click=${navigateOnClick}
+                  >
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                      <circle cx="12" cy="7" r="4" />
+                    </svg>
+                  </a>`}
+              <slot name="cart"></slot>
+            </div>
+          </div>
+        </div>
+      </header>
+    `;
+  }
+};
+
+export {
+  NymbalSiteHeader
+};
+//# sourceMappingURL=chunk-W23P7SI4.js.map

package/dist/chunk-W23P7SI4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/site-header.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport {\n  baseStyles,\n  NymbalElement,\n  parsedJson,\n  propertiesOf,\n  type ElementSchema,\n} from '../base-element.js'\nimport { navigateOnClick } from '../navigate.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-site-header',\n  reactName: 'SiteHeader',\n  attributes: [\n    { name: 'links', prop: 'links', type: 'json' },\n    { name: 'logo', prop: 'logo', type: 'string' },\n    { name: 'account-href', prop: 'accountHref', type: 'string' },\n  ],\n  events: [],\n  parts: ['header', 'logo', 'nav', 'link', 'account', 'toggle', 'actions'],\n  // The page's own search bar and mini-cart, light-DOM children with `slot=\"search\"` and `slot=\"cart\"`.\n  slots: ['search', 'cart'],\n  children: true,\n}\n\ninterface Link {\n  label: string\n  href: string\n}\n\n/**\n * The store's header: the logo, the navigation (behind a toggle on a narrow screen, with no script needed), the\n * account link, and the page's search bar and mini-cart in its `search` and `cart` slots.\n */\nexport class NymbalSiteHeader extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: block;\n        position: sticky;\n        top: 0;\n        z-index: var(--nymbal-z-dropdown, 100);\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='header'] {\n        background-color: var(--nymbal-color-surface, #ffffff);\n        border-bottom: 1px solid var(--nymbal-color-border, #e4e4e7);\n      }\n      .inner {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--nymbal-spacing-md, 1rem);\n        max-width: 72rem;\n        margin-inline: auto;\n        padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n      }\n      [part~='logo'] {\n        flex-shrink: 0;\n        font-size: var(--nymbal-font-size-lg, 1.125rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        letter-spacing: -0.02em;\n        color: var(--nymbal-color-primary, #18181b);\n        text-decoration: none;\n      }\n      [part~='logo']:hover {\n        color: var(--nymbal-color-accent, #2563eb);\n      }\n      .toggle-input {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip: rect(0 0 0 0);\n        white-space: nowrap;\n      }\n      [part~='toggle'] {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        gap: 4px;\n        width: 28px;\n        height: 28px;\n        margin-left: auto;\n        padding: 2px;\n        cursor: pointer;\n      }\n      .line {\n        display: block;\n        width: 100%;\n        height: 2px;\n        border-radius: 1px;\n        background-color: var(--nymbal-color-primary, #18181b);\n        transition:\n          transform var(--nymbal-transition-fast, 150ms ease),\n          opacity var(--nymbal-transition-fast, 150ms ease);\n      }\n      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(1) {\n        transform: translateY(6px) rotate(45deg);\n      }\n      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(2) {\n        opacity: 0;\n      }\n      .toggle-input:checked ~ [part~='toggle'] .line:nth-child(3) {\n        transform: translateY(-6px) rotate(-45deg);\n      }\n      .menu {\n        display: none;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-md, 1rem);\n        width: 100%;\n        padding-block: var(--nymbal-spacing-sm, 0.5rem);\n      }\n      .toggle-input:checked ~ .menu {\n        display: flex;\n      }\n      [part~='nav'] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--nymbal-spacing-xs, 0.25rem);\n      }\n      [part~='link'] {\n        display: block;\n        padding: var(--nymbal-spacing-xs, 0.25rem) var(--nymbal-spacing-sm, 0.5rem);\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-medium, 500);\n        color: var(--nymbal-color-text, #18181b);\n        text-decoration: none;\n        border-radius: var(--nymbal-radius-sm, 0.25rem);\n        transition:\n          background-color var(--nymbal-transition-fast, 150ms ease),\n          color var(--nymbal-transition-fast, 150ms ease);\n      }\n      [part~='link']:hover,\n      [part~='account']:hover {\n        background-color: var(--nymbal-color-border, #e4e4e7);\n        color: var(--nymbal-color-accent, #2563eb);\n      }\n      [part~='actions'] {\n        display: flex;\n        align-items: center;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n      }\n      [part~='account'] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 36px;\n        height: 36px;\n        color: var(--nymbal-color-text, #18181b);\n        text-decoration: none;\n        border-radius: var(--nymbal-radius-full, 9999px);\n      }\n      @media (min-width: 641px) {\n        .inner {\n          padding-inline: var(--nymbal-spacing-lg, 1.5rem);\n        }\n      }\n      @media (min-width: 769px) {\n        [part~='toggle'] {\n          display: none;\n        }\n        .inner {\n          flex-wrap: nowrap;\n          padding-block: var(--nymbal-spacing-md, 1rem);\n        }\n        .menu {\n          display: flex;\n          flex: 1;\n          flex-direction: row;\n          align-items: center;\n          justify-content: space-between;\n          width: auto;\n          gap: var(--nymbal-spacing-lg, 1.5rem);\n          padding-block: 0;\n        }\n        [part~='nav'] {\n          flex-direction: row;\n        }\n      }\n    `,\n  ]\n\n  declare links: unknown\n  declare logo: string | undefined\n  declare accountHref: string | undefined\n\n  protected override render() {\n    const links = parsedJson<Link[]>(this, 'links', this.links)\n    return html`\n      <header part=\"header\" data-testid=\"site-header\">\n        <div class=\"inner\">\n          ${this.logo === undefined\n            ? nothing\n            : html`<a part=\"logo\" href=\"/\" @click=${navigateOnClick}>${this.logo}</a>`}\n          <input\n            type=\"checkbox\"\n            id=\"nav-toggle\"\n            class=\"toggle-input\"\n            aria-label=\"Toggle navigation\"\n          />\n          <label part=\"toggle\" for=\"nav-toggle\" aria-hidden=\"true\">\n            <span class=\"line\"></span>\n            <span class=\"line\"></span>\n            <span class=\"line\"></span>\n          </label>\n          <div class=\"menu\">\n            <nav part=\"nav\" aria-label=\"Main navigation\">\n              ${(Array.isArray(links) ? links : []).map(\n                (link) =>\n                  html`<a part=\"link\" href=${link.href} @click=${navigateOnClick}\n                    >${link.label}</a\n                  >`,\n              )}\n            </nav>\n            <div part=\"actions\">\n              <slot name=\"search\"></slot>\n              ${this.accountHref === undefined\n                ? nothing\n                : html`<a\n                    part=\"account\"\n                    href=${this.accountHref}\n                    aria-label=\"Account\"\n                    @click=${navigateOnClick}\n                  >\n                    <svg\n                      width=\"20\"\n                      height=\"20\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      aria-hidden=\"true\"\n                    >\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" />\n                      <circle cx=\"12\" cy=\"7\" r=\"4\" />\n                    </svg>\n                  </a>`}\n              <slot name=\"cart\"></slot>\n            </div>\n          </div>\n        </div>\n      </header>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAUnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,IACV,EAAE,MAAM,SAAS,MAAM,SAAS,MAAM,OAAO;AAAA,IAC7C,EAAE,MAAM,QAAQ,MAAM,QAAQ,MAAM,SAAS;AAAA,IAC7C,EAAE,MAAM,gBAAgB,MAAM,eAAe,MAAM,SAAS;AAAA,EAC9D;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC,UAAU,QAAQ,OAAO,QAAQ,WAAW,UAAU,SAAS;AAAA;AAAA,EAEvE,OAAO,CAAC,UAAU,MAAM;AAAA,EACxB,UAAU;AACZ;AAWO,IAAM,mBAAN,cAA+B,cAAc;AAAA,EAClD,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAChD,OAAgB,SAAS;AAAA,IACvB;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiJF;AAAA,EAMmB,SAAS;AAC1B,UAAM,QAAQ,WAAmB,MAAM,SAAS,KAAK,KAAK;AAC1D,WAAO;AAAA;AAAA;AAAA,YAGC,KAAK,SAAS,SACZ,UACA,sCAAsC,eAAe,IAAI,KAAK,IAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAcrE,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,GAAG;AAAA,MACpC,CAAC,SACC,2BAA2B,KAAK,IAAI,WAAW,eAAe;AAAA,uBACzD,KAAK,KAAK;AAAA;AAAA,IAEnB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAIC,KAAK,gBAAgB,SACnB,UACA;AAAA;AAAA,2BAES,KAAK,WAAW;AAAA;AAAA,6BAEd,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAgBrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOrB;AACF;","names":[]}

package/dist/chunk-W7D3STJH.js

@@ -0,0 +1,279 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/payment-element.ts
+import {
+  getPaymentDriver,
+  registerPaymentDriver
+} from "@nymbalhq/sdk";
+import { css, nothing } from "lit";
+
+// src/payment-drivers/stripe.ts
+var STRIPE_JS = "https://js.stripe.com/v3/";
+function billingDetails(context) {
+  const details = {};
+  if (context?.email) details.email = context.email;
+  const billing = context?.billing;
+  if (billing) {
+    const name = `${billing.firstName} ${billing.lastName}`.trim();
+    if (name) details.name = name;
+    details.address = {
+      line1: billing.addressLine1,
+      ...billing.addressLine2 ? { line2: billing.addressLine2 } : {},
+      city: billing.city,
+      state: billing.region,
+      postal_code: billing.postalCode,
+      country: billing.country
+    };
+  }
+  return Object.keys(details).length > 0 ? details : void 0;
+}
+var loading = null;
+function loadStripeJs() {
+  const win = window;
+  if (win.Stripe) return Promise.resolve(win.Stripe);
+  loading ??= new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = STRIPE_JS;
+    script.async = true;
+    script.addEventListener("load", () => {
+      if (win.Stripe) resolve(win.Stripe);
+      else reject(new Error("Stripe.js loaded but window.Stripe is missing."));
+    });
+    script.addEventListener("error", () => {
+      loading = null;
+      script.remove();
+      reject(new Error("Stripe.js could not be loaded."));
+    });
+    document.head.appendChild(script);
+  });
+  return loading;
+}
+var instances = /* @__PURE__ */ new Map();
+var mounted = [];
+var stripeDriver = {
+  async mount(el, options) {
+    const key = options["publishableKey"];
+    if (!key)
+      throw new Error("Card payments are not configured: the store has no Stripe publishable key.");
+    const factory = await loadStripeJs();
+    let stripe = instances.get(key);
+    if (stripe === void 0) {
+      stripe = factory(key);
+      instances.set(key, stripe);
+    }
+    const target = document.createElement("div");
+    target.className = "nymbal-payment-card";
+    el.replaceChildren(target);
+    const card = stripe.elements().create("card", {
+      style: {
+        base: { fontSize: "16px", color: "#1a1a1a", "::placeholder": { color: "#9ca3af" } }
+      }
+    });
+    card.mount(target);
+    mounted = [
+      ...mounted.filter((m) => m.host.isConnected && m.host !== el),
+      { host: el, stripe, card }
+    ];
+  },
+  async confirm(clientSecret, context) {
+    const current = mounted.findLast((m) => m.host.isConnected) ?? mounted.at(-1);
+    if (current === void 0) return { ok: false, error: "The card form is not ready." };
+    const billing_details = billingDetails(context);
+    const result = await current.stripe.confirmCardPayment(clientSecret, {
+      payment_method: { card: current.card, ...billing_details ? { billing_details } : {} }
+    });
+    if (result.error) return { ok: false, error: result.error.message ?? "Payment failed." };
+    return { ok: true, confirmed: result.paymentIntent?.status === "succeeded" };
+  }
+};
+
+// src/payment-drivers/test-mode.ts
+var testModeDriver = {
+  mount(el) {
+    el.innerHTML = '<p class="nymbal-payment-note">Test mode \u2014 payment skipped</p>';
+  },
+  confirm() {
+    return Promise.resolve({ ok: true, confirmed: false });
+  }
+};
+
+// src/components/payment-element.ts
+var SCHEMA = {
+  tag: "nymbal-payment-element",
+  reactName: "PaymentElement",
+  attributes: [{ name: "client", prop: "client", type: "json" }],
+  events: [
+    {
+      name: "nymbal:payment:status",
+      prop: "onStatusChange",
+      detail: "{ status: 'pending' | 'ready' | 'error' }"
+    }
+  ],
+  parts: ["error"],
+  slots: [],
+  children: false
+};
+var NO_PAYMENT_STEP = { ok: true, confirmed: false };
+function parseClient(value) {
+  if (value === null || value === "" || value === "null") return null;
+  try {
+    const parsed = JSON.parse(value);
+    if (parsed === null) return null;
+    if (typeof parsed.driver !== "string" || typeof parsed.options !== "object") return void 0;
+    return { driver: parsed.driver, options: { ...parsed.options ?? {} } };
+  } catch {
+    return void 0;
+  }
+}
+var NymbalPaymentElement = class _NymbalPaymentElement extends NymbalElement {
+  static schema = SCHEMA;
+  /** The built-in drivers, except a name the project registered first: the project's driver wins, as its tag does. */
+  static beforeDefine() {
+    const drivers = [
+      ["test-mode", testModeDriver],
+      ["stripe", stripeDriver]
+    ];
+    for (const [name, driver] of drivers) {
+      if (getPaymentDriver(name) === void 0) registerPaymentDriver(name, driver);
+    }
+  }
+  static properties = propertiesOf(SCHEMA);
+  static styles = css`
+    nymbal-payment-element {
+      display: block;
+      font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+    }
+    nymbal-payment-element .nymbal-payment-note {
+      margin: 0;
+      font-size: var(--nymbal-font-size-sm, 0.875rem);
+      color: var(--nymbal-color-text-muted, #71717a);
+    }
+    nymbal-payment-element .nymbal-payment-card {
+      padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);
+      border: 1px solid var(--nymbal-color-border, #e4e4e7);
+      border-radius: var(--nymbal-radius-md, 0.375rem);
+      background: var(--nymbal-color-surface, #ffffff);
+      min-height: 40px;
+    }
+    nymbal-payment-element [part~='error'] {
+      margin: 0;
+      font-size: var(--nymbal-font-size-sm, 0.875rem);
+      color: var(--nymbal-color-error, #dc2626);
+    }
+  `;
+  _status = "pending";
+  _error = "";
+  _driver = null;
+  _mounted = Promise.resolve(true);
+  _rendered = void 0;
+  _generation = 0;
+  get status() {
+    return this._status;
+  }
+  /**
+   * The light DOM, so the payment driver's UI (Stripe's iframe) and the checkout form share one tree. Its styles join
+   * the sheets of the tree it is in, where a shadow root would have held them.
+   */
+  createRenderRoot() {
+    const root = this.getRootNode();
+    const sheet = _NymbalPaymentElement.styles.styleSheet;
+    if (sheet !== void 0 && "adoptedStyleSheets" in root && !root.adoptedStyleSheets.includes(sheet)) {
+      root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+    }
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.mountClient();
+  }
+  attributeChangedCallback(name, old, value) {
+    super.attributeChangedCallback(name, old, value);
+    if (this.isConnected) this.mountClient();
+  }
+  /** The children are the driver's, mounted imperatively, so Lit renders none of its own. */
+  render() {
+    return nothing;
+  }
+  /**
+   * Completes a payment the API left `requires_action`, once the driver has mounted, handing the driver the
+   * checkout's `context`; the driver's answer as is.
+   */
+  async confirm(clientSecret, context) {
+    const driver = this._driver;
+    if (this._status === "error") return { ok: false, error: this._error };
+    if (driver === null) return NO_PAYMENT_STEP;
+    if (!await this._mounted) return { ok: false, error: this._error };
+    return driver.confirm(clientSecret, context);
+  }
+  mountClient() {
+    const attribute = this.getAttribute("client");
+    if (attribute === this._rendered) return;
+    this._rendered = attribute;
+    const generation = ++this._generation;
+    this._driver = null;
+    this._mounted = Promise.resolve(true);
+    this.clear();
+    const client = parseClient(attribute);
+    if (client === void 0)
+      return this.fail("The store sent a payment client this page cannot read.");
+    if (client === null) return this.setStatus("ready");
+    const driver = getPaymentDriver(client.driver);
+    if (driver === void 0) {
+      return this.fail(`Payment method "${client.driver}" is not available on this storefront.`);
+    }
+    this._driver = driver;
+    this.setStatus("pending");
+    this._mounted = Promise.resolve().then(() => driver.mount(this, client.options)).then(
+      () => {
+        if (generation === this._generation) this.setStatus("ready");
+        return true;
+      },
+      (err) => {
+        if (generation === this._generation) {
+          this.fail(err instanceof Error ? err.message : "The payment form could not be loaded.");
+        }
+        return false;
+      }
+    );
+  }
+  fail(message) {
+    this._error = message;
+    const p = document.createElement("p");
+    p.setAttribute("part", "error");
+    p.setAttribute("data-testid", "payment-element-error");
+    p.setAttribute("role", "alert");
+    p.textContent = message;
+    this.clear(p);
+    this.setStatus("error");
+  }
+  /**
+   * Replaces what a driver or an error rendered. Lit's marker comment stays: its next update (a new `client`) writes
+   * at it, and throws once it is gone.
+   */
+  clear(...nodes) {
+    for (const child of [...this.childNodes]) {
+      if (child.nodeType !== Node.COMMENT_NODE) child.remove();
+    }
+    this.append(...nodes);
+  }
+  setStatus(status) {
+    if (status === this._status) return;
+    this._status = status;
+    this.dispatchEvent(
+      new CustomEvent("nymbal:payment:status", {
+        bubbles: true,
+        composed: true,
+        detail: { status }
+      })
+    );
+  }
+};
+
+export {
+  NymbalPaymentElement
+};
+//# sourceMappingURL=chunk-W7D3STJH.js.map

package/dist/chunk-W7D3STJH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/payment-element.ts","../src/payment-drivers/stripe.ts","../src/payment-drivers/test-mode.ts"],"sourcesContent":["import {\n  getPaymentDriver,\n  registerPaymentDriver,\n  type PaymentConfirmContext,\n  type PaymentConfirmation,\n  type PaymentDriver,\n} from '@nymbalhq/sdk'\nimport type { PaymentClient } from '@nymbalhq/types'\nimport { css, nothing, type CSSResult } from 'lit'\nimport { NymbalElement, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { stripeDriver } from '../payment-drivers/stripe.js'\nimport { testModeDriver } from '../payment-drivers/test-mode.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-payment-element',\n  reactName: 'PaymentElement',\n  attributes: [{ name: 'client', prop: 'client', type: 'json' }],\n  events: [\n    {\n      name: 'nymbal:payment:status',\n      prop: 'onStatusChange',\n      detail: \"{ status: 'pending' | 'ready' | 'error' }\",\n    },\n  ],\n  parts: ['error'],\n  slots: [],\n  children: false,\n}\n\n/** `pending` while a driver mounts; `error` when no payment can be taken, which a checkout must not submit past. */\nexport type PaymentElementStatus = 'pending' | 'ready' | 'error'\n\n/** No client half: nothing to collect, so nothing is confirmed here. */\nconst NO_PAYMENT_STEP: PaymentConfirmation = { ok: true, confirmed: false }\n\nfunction parseClient(value: string | null): PaymentClient | null | undefined {\n  if (value === null || value === '' || value === 'null') return null\n  try {\n    const parsed = JSON.parse(value) as Partial<PaymentClient> | null\n    if (parsed === null) return null\n    if (typeof parsed.driver !== 'string' || typeof parsed.options !== 'object') return undefined\n    return { driver: parsed.driver, options: { ...(parsed.options ?? {}) } }\n  } catch {\n    return undefined\n  }\n}\n\n/**\n * <nymbal-payment-element client='<json>'>: renders the payments adapter's client half (GET /api/capabilities'\n * `payments.client`) through the driver the SDK registry holds under its `driver` name, and confirms a payment\n * through it. It emits `nymbal:payment:status` whenever `status` changes.\n */\nexport class NymbalPaymentElement extends NymbalElement {\n  static override schema = SCHEMA\n\n  /** The built-in drivers, except a name the project registered first: the project's driver wins, as its tag does. */\n  static beforeDefine(): void {\n    const drivers: Array<[string, PaymentDriver]> = [\n      ['test-mode', testModeDriver],\n      ['stripe', stripeDriver],\n    ]\n    for (const [name, driver] of drivers) {\n      if (getPaymentDriver(name) === undefined) registerPaymentDriver(name, driver)\n    }\n  }\n  static override properties = propertiesOf(SCHEMA)\n\n  static override styles = css`\n    nymbal-payment-element {\n      display: block;\n      font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n    }\n    nymbal-payment-element .nymbal-payment-note {\n      margin: 0;\n      font-size: var(--nymbal-font-size-sm, 0.875rem);\n      color: var(--nymbal-color-text-muted, #71717a);\n    }\n    nymbal-payment-element .nymbal-payment-card {\n      padding: var(--nymbal-spacing-sm, 0.5rem) var(--nymbal-spacing-md, 1rem);\n      border: 1px solid var(--nymbal-color-border, #e4e4e7);\n      border-radius: var(--nymbal-radius-md, 0.375rem);\n      background: var(--nymbal-color-surface, #ffffff);\n      min-height: 40px;\n    }\n    nymbal-payment-element [part~='error'] {\n      margin: 0;\n      font-size: var(--nymbal-font-size-sm, 0.875rem);\n      color: var(--nymbal-color-error, #dc2626);\n    }\n  `\n\n  private _status: PaymentElementStatus = 'pending'\n  private _error = ''\n  private _driver: PaymentDriver | null = null\n  private _mounted: Promise<boolean> = Promise.resolve(true)\n  private _rendered: string | null | undefined = undefined\n  private _generation = 0\n\n  get status(): PaymentElementStatus {\n    return this._status\n  }\n\n  /**\n   * The light DOM, so the payment driver's UI (Stripe's iframe) and the checkout form share one tree. Its styles join\n   * the sheets of the tree it is in, where a shadow root would have held them.\n   */\n  protected override createRenderRoot(): HTMLElement {\n    const root = this.getRootNode() as Document | ShadowRoot\n    const sheet = (NymbalPaymentElement.styles as CSSResult).styleSheet\n    if (sheet !== undefined && 'adoptedStyleSheets' in root && !root.adoptedStyleSheets.includes(sheet)) {\n      root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet]\n    }\n    return this\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.mountClient()\n  }\n\n  override attributeChangedCallback(name: string, old: string | null, value: string | null): void {\n    super.attributeChangedCallback(name, old, value)\n    if (this.isConnected) this.mountClient()\n  }\n\n  /** The children are the driver's, mounted imperatively, so Lit renders none of its own. */\n  protected override render() {\n    return nothing\n  }\n\n  /**\n   * Completes a payment the API left `requires_action`, once the driver has mounted, handing the driver the\n   * checkout's `context`; the driver's answer as is.\n   */\n  async confirm(clientSecret: string, context?: PaymentConfirmContext): Promise<PaymentConfirmation> {\n    const driver = this._driver\n    if (this._status === 'error') return { ok: false, error: this._error }\n    if (driver === null) return NO_PAYMENT_STEP\n    if (!(await this._mounted)) return { ok: false, error: this._error }\n    return driver.confirm(clientSecret, context)\n  }\n\n  private mountClient(): void {\n    const attribute = this.getAttribute('client')\n    // The same client half again (a reconnect, a framework re-setting the attribute) keeps what is mounted.\n    if (attribute === this._rendered) return\n    this._rendered = attribute\n    const generation = ++this._generation\n    this._driver = null\n    this._mounted = Promise.resolve(true)\n    this.clear()\n\n    const client = parseClient(attribute)\n    if (client === undefined)\n      return this.fail('The store sent a payment client this page cannot read.')\n    if (client === null) return this.setStatus('ready')\n    const driver = getPaymentDriver(client.driver)\n    if (driver === undefined) {\n      return this.fail(`Payment method \"${client.driver}\" is not available on this storefront.`)\n    }\n\n    this._driver = driver\n    this.setStatus('pending')\n    this._mounted = Promise.resolve()\n      .then(() => driver.mount(this, client.options))\n      .then(\n        () => {\n          if (generation === this._generation) this.setStatus('ready')\n          return true\n        },\n        (err: unknown) => {\n          if (generation === this._generation) {\n            this.fail(err instanceof Error ? err.message : 'The payment form could not be loaded.')\n          }\n          return false\n        },\n      )\n  }\n\n  private fail(message: string): void {\n    this._error = message\n    const p = document.createElement('p')\n    p.setAttribute('part', 'error')\n    p.setAttribute('data-testid', 'payment-element-error')\n    p.setAttribute('role', 'alert')\n    p.textContent = message\n    this.clear(p)\n    this.setStatus('error')\n  }\n\n  /**\n   * Replaces what a driver or an error rendered. Lit's marker comment stays: its next update (a new `client`) writes\n   * at it, and throws once it is gone.\n   */\n  private clear(...nodes: Node[]): void {\n    for (const child of [...this.childNodes]) {\n      if (child.nodeType !== Node.COMMENT_NODE) child.remove()\n    }\n    this.append(...nodes)\n  }\n\n  private setStatus(status: PaymentElementStatus): void {\n    if (status === this._status) return\n    this._status = status\n    this.dispatchEvent(\n      new CustomEvent('nymbal:payment:status', {\n        bubbles: true,\n        composed: true,\n        detail: { status },\n      }),\n    )\n  }\n}\n","import type { PaymentConfirmContext, PaymentConfirmation, PaymentDriver } from '@nymbalhq/sdk'\n\n// Stripe.js from Stripe's own host, as Stripe requires, so no project installs a Stripe package to take a card.\nconst STRIPE_JS = 'https://js.stripe.com/v3/'\n\ninterface StripeCard {\n  mount(target: HTMLElement): void\n}\n\ninterface StripeBillingDetails {\n  email?: string\n  name?: string\n  address?: {\n    line1: string\n    line2?: string\n    city: string\n    state: string\n    postal_code: string\n    country: string\n  }\n}\n\ninterface StripeInstance {\n  elements(): { create(type: 'card', options?: Record<string, unknown>): StripeCard }\n  confirmCardPayment(\n    clientSecret: string,\n    data: { payment_method: { card: StripeCard; billing_details?: StripeBillingDetails } },\n  ): Promise<{ paymentIntent?: { status: string }; error?: { message?: string } }>\n}\n\n/** The checkout's shopper details as Stripe's `billing_details`, which its fraud checks read; none when empty. */\nfunction billingDetails(context: PaymentConfirmContext | undefined): StripeBillingDetails | undefined {\n  const details: StripeBillingDetails = {}\n  if (context?.email) details.email = context.email\n  const billing = context?.billing\n  if (billing) {\n    const name = `${billing.firstName} ${billing.lastName}`.trim()\n    if (name) details.name = name\n    details.address = {\n      line1: billing.addressLine1,\n      ...(billing.addressLine2 ? { line2: billing.addressLine2 } : {}),\n      city: billing.city,\n      state: billing.region,\n      postal_code: billing.postalCode,\n      country: billing.country,\n    }\n  }\n  return Object.keys(details).length > 0 ? details : undefined\n}\n\ntype StripeFactory = (publishableKey: string) => StripeInstance\n\nlet loading: Promise<StripeFactory> | null = null\n\n/** `window.Stripe`, injecting Stripe.js once per page when it is not there yet. */\nfunction loadStripeJs(): Promise<StripeFactory> {\n  const win = window as unknown as { Stripe?: StripeFactory }\n  if (win.Stripe) return Promise.resolve(win.Stripe)\n  loading ??= new Promise<StripeFactory>((resolve, reject) => {\n    const script = document.createElement('script')\n    script.src = STRIPE_JS\n    script.async = true\n    script.addEventListener('load', () => {\n      if (win.Stripe) resolve(win.Stripe)\n      else reject(new Error('Stripe.js loaded but window.Stripe is missing.'))\n    })\n    script.addEventListener('error', () => {\n      loading = null\n      script.remove()\n      reject(new Error('Stripe.js could not be loaded.'))\n    })\n    document.head.appendChild(script)\n  })\n  return loading\n}\n\nconst instances = new Map<string, StripeInstance>()\nlet mounted: Array<{ host: HTMLElement; stripe: StripeInstance; card: StripeCard }> = []\n\n/** A card form from Stripe.js; confirm pays the intent with the card the shopper typed into. */\nexport const stripeDriver: PaymentDriver = {\n  async mount(el, options) {\n    const key = options['publishableKey']\n    if (!key)\n      throw new Error('Card payments are not configured: the store has no Stripe publishable key.')\n    const factory = await loadStripeJs()\n    let stripe = instances.get(key)\n    if (stripe === undefined) {\n      stripe = factory(key)\n      instances.set(key, stripe)\n    }\n    const target = document.createElement('div')\n    target.className = 'nymbal-payment-card'\n    el.replaceChildren(target)\n    const card = stripe.elements().create('card', {\n      style: {\n        base: { fontSize: '16px', color: '#1a1a1a', '::placeholder': { color: '#9ca3af' } },\n      },\n    })\n    card.mount(target)\n    mounted = [\n      ...mounted.filter((m) => m.host.isConnected && m.host !== el),\n      { host: el, stripe, card },\n    ]\n  },\n\n  async confirm(clientSecret, context): Promise<PaymentConfirmation> {\n    const current = mounted.findLast((m) => m.host.isConnected) ?? mounted.at(-1)\n    if (current === undefined) return { ok: false, error: 'The card form is not ready.' }\n    const billing_details = billingDetails(context)\n    const result = await current.stripe.confirmCardPayment(clientSecret, {\n      payment_method: { card: current.card, ...(billing_details ? { billing_details } : {}) },\n    })\n    if (result.error) return { ok: false, error: result.error.message ?? 'Payment failed.' }\n    // `processing` is accepted but not paid yet: the webhook confirms it.\n    return { ok: true, confirmed: result.paymentIntent?.status === 'succeeded' }\n  },\n}\n","import type { PaymentDriver } from '@nymbalhq/sdk'\n\n/**\n * For a store whose payments need no shopper input (the native stub): nothing to collect, and nothing confirmed here.\n * An order the stub holds as `requires_action` stays pending until its webhook pays it.\n */\nexport const testModeDriver: PaymentDriver = {\n  mount(el) {\n    el.innerHTML = '<p class=\"nymbal-payment-note\">Test mode — payment skipped</p>'\n  },\n  confirm() {\n    return Promise.resolve({ ok: true, confirmed: false })\n  },\n}\n"],"mappings":"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","names":[]}