@nymbalhq/web-components 1.0.0 → 1.2.0

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":[]}

package/dist/chunk-WEEHXWM3.js

@@ -0,0 +1,172 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalElement,
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/product-filter.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-product-filter",
+  reactName: "ProductFilter",
+  attributes: [
+    { name: "facets", prop: "facets", type: "json" },
+    { name: "source", prop: "source", type: "string" }
+  ],
+  events: [
+    {
+      name: "nymbal:filter:changed",
+      prop: "onFilterChange",
+      detail: "{ name: string; value: string }"
+    }
+  ],
+  parts: ["group", "label", "option", "checkbox", "option-label", "count"],
+  slots: [],
+  children: false
+};
+var NymbalProductFilter = class extends NymbalElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);
+      }
+      [part~='group'] {
+        margin-bottom: var(--nymbal-spacing-lg, 1.5rem);
+      }
+      [part~='label'] {
+        display: block;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        font-weight: var(--nymbal-font-weight-bold, 700);
+        margin-bottom: var(--nymbal-spacing-sm, 0.5rem);
+        color: var(--nymbal-color-text, #18181b);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+      [part~='option'] {
+        display: flex;
+        align-items: center;
+        gap: var(--nymbal-spacing-sm, 0.5rem);
+        padding: var(--nymbal-spacing-xs, 0.25rem) 0;
+        cursor: pointer;
+        font-size: var(--nymbal-font-size-sm, 0.875rem);
+        color: var(--nymbal-color-text, #18181b);
+      }
+      [part~='checkbox'] {
+        margin: 0;
+        accent-color: var(--nymbal-color-primary, #18181b);
+      }
+      [part~='count'] {
+        color: var(--nymbal-color-text-muted, #71717a);
+        font-size: var(--nymbal-font-size-xs, 0.75rem);
+      }
+    `
+  ];
+  /** Both: a wrapper may set `source` after the element has connected. */
+  stores() {
+    return [this.client.productList, this.client.search];
+  }
+  /** With `source="search"` the `facets` a server read stand until the search settles; a listing's always show. */
+  storeSettled(store) {
+    if (store === this.client.search && this.getAttribute("source") === "search") {
+      this.facets = void 0;
+    }
+  }
+  /** The facets this render shows, and whether each value is checked. */
+  shown() {
+    if (this.getAttribute("source") === "search") {
+      const given = parsedJson(this, "facets", this.facets);
+      const { facets, category } = given === void 0 && this.readsStores ? this.client.search.getState() : { facets: given ?? [], category: null };
+      return {
+        facets: facets.filter((f) => f.field === "category"),
+        checked: (_field, value) => value === category
+      };
+    }
+    const filters = this.readsStores ? this.client.productList.getState().filters : {};
+    return {
+      facets: this.facetsAttribute(),
+      checked: (field, value) => {
+        const active = filters[field];
+        return Array.isArray(active) ? active.includes(value) : active === value;
+      }
+    };
+  }
+  _shown = { facets: [], checked: () => false };
+  willUpdate(_changed) {
+    this._shown = this.shown();
+    this.toggleAttribute("empty", this._shown.facets.length === 0);
+  }
+  render() {
+    const { facets, checked } = this._shown;
+    return facets.map(
+      (facet) => html`
+        <div part="group" data-testid="filter-group-${facet.field}">
+          <span part="label">${facet.label}</span>
+          ${facet.values.map(
+        (v) => html`
+              <label part="option" data-testid="filter-option-${v.value}">
+                <input
+                  part="checkbox"
+                  type="checkbox"
+                  data-filter-name=${facet.field}
+                  data-filter-value=${v.value}
+                  .checked=${checked(facet.field, v.value)}
+                  @change=${this.handleChange}
+                />
+                <span part="option-label">${v.label ?? v.value}</span>
+                ${v.count !== void 0 ? html`<span part="count" class="nymbal-filter-count">(${v.count})</span>` : nothing}
+              </label>
+            `
+      )}
+        </div>
+      `
+    );
+  }
+  handleChange = (e) => {
+    const input = e.target;
+    const value = input.dataset["filterValue"];
+    if (this.getAttribute("source") === "search") {
+      void this.client.search.setCategory(input.checked ? value : null);
+      this.emit("category", input.checked ? value : "");
+      return;
+    }
+    const name = input.dataset["filterName"];
+    const current = this.client.productList.getState().filters[name];
+    if (input.checked) {
+      const values = Array.isArray(current) ? [...current, value] : current ? [current, value] : value;
+      void this.client.productList.applyFilter(name, values);
+    } else if (Array.isArray(current)) {
+      const remaining = current.filter((v) => v !== value);
+      if (remaining.length > 0) {
+        void this.client.productList.applyFilter(name, remaining);
+      } else {
+        void this.client.productList.removeFilter(name);
+      }
+    } else {
+      void this.client.productList.removeFilter(name);
+    }
+    this.emit(name, value);
+  };
+  emit(name, value) {
+    this.dispatchEvent(
+      new CustomEvent("nymbal:filter:changed", {
+        bubbles: true,
+        composed: true,
+        detail: { name, value }
+      })
+    );
+  }
+  facetsAttribute() {
+    return parsedJson(this, "facets", this.facets) ?? [];
+  }
+};
+
+export {
+  NymbalProductFilter
+};
+//# sourceMappingURL=chunk-WEEHXWM3.js.map

package/dist/chunk-WEEHXWM3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/product-filter.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues } from 'lit'\nimport type { Facet } from '@nymbalhq/types'\nimport {\n  baseStyles,\n  NymbalElement,\n  parsedJson,\n  propertiesOf,\n  type ElementSchema,\n  type Subscribable,\n} from '../base-element.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-product-filter',\n  reactName: 'ProductFilter',\n  attributes: [\n    { name: 'facets', prop: 'facets', type: 'json' },\n    { name: 'source', prop: 'source', type: 'string' },\n  ],\n  events: [\n    {\n      name: 'nymbal:filter:changed',\n      prop: 'onFilterChange',\n      detail: '{ name: string; value: string }',\n    },\n  ],\n  parts: ['group', 'label', 'option', 'checkbox', 'option-label', 'count'],\n  slots: [],\n  children: false,\n}\n\n/**\n * The facet filter. By default it reads the `facets` attribute and filters the product list. With `source=\"search\"`\n * it renders the search's own facets and narrows the search to one category: choosing an option selects it, choosing\n * the selected option again clears it. The host carries `empty` while it renders no facet, so a page can lay out\n * around it (its light DOM is always empty).\n */\nexport class NymbalProductFilter extends NymbalElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        display: block;\n        font-family: var(--nymbal-font-family, system-ui, -apple-system, sans-serif);\n      }\n      [part~='group'] {\n        margin-bottom: var(--nymbal-spacing-lg, 1.5rem);\n      }\n      [part~='label'] {\n        display: block;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        font-weight: var(--nymbal-font-weight-bold, 700);\n        margin-bottom: var(--nymbal-spacing-sm, 0.5rem);\n        color: var(--nymbal-color-text, #18181b);\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n      [part~='option'] {\n        display: flex;\n        align-items: center;\n        gap: var(--nymbal-spacing-sm, 0.5rem);\n        padding: var(--nymbal-spacing-xs, 0.25rem) 0;\n        cursor: pointer;\n        font-size: var(--nymbal-font-size-sm, 0.875rem);\n        color: var(--nymbal-color-text, #18181b);\n      }\n      [part~='checkbox'] {\n        margin: 0;\n        accent-color: var(--nymbal-color-primary, #18181b);\n      }\n      [part~='count'] {\n        color: var(--nymbal-color-text-muted, #71717a);\n        font-size: var(--nymbal-font-size-xs, 0.75rem);\n      }\n    `,\n  ]\n\n  declare facets: unknown\n\n  /** Both: a wrapper may set `source` after the element has connected. */\n  protected override stores() {\n    return [this.client.productList, this.client.search]\n  }\n\n  /** With `source=\"search\"` the `facets` a server read stand until the search settles; a listing's always show. */\n  protected override storeSettled(store: Subscribable): void {\n    if (store === this.client.search && this.getAttribute('source') === 'search') {\n      this.facets = undefined\n    }\n  }\n\n  /** The facets this render shows, and whether each value is checked. */\n  private shown(): { facets: Facet[]; checked: (field: string, value: string) => boolean } {\n    if (this.getAttribute('source') === 'search') {\n      const given = parsedJson<Facet[]>(this, 'facets', this.facets)\n      const { facets, category } =\n        given === undefined && this.readsStores\n          ? this.client.search.getState()\n          : { facets: given ?? [], category: null }\n      return {\n        facets: facets.filter((f) => f.field === 'category'),\n        checked: (_field, value) => value === category,\n      }\n    }\n    const filters = this.readsStores ? this.client.productList.getState().filters : {}\n    return {\n      facets: this.facetsAttribute(),\n      checked: (field, value) => {\n        const active = filters[field]\n        return Array.isArray(active) ? active.includes(value) : active === value\n      },\n    }\n  }\n\n  private _shown: ReturnType<NymbalProductFilter['shown']> = { facets: [], checked: () => false }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    this._shown = this.shown()\n    this.toggleAttribute('empty', this._shown.facets.length === 0)\n  }\n\n  protected override render() {\n    const { facets, checked } = this._shown\n    return facets.map(\n      (facet) => html`\n        <div part=\"group\" data-testid=\"filter-group-${facet.field}\">\n          <span part=\"label\">${facet.label}</span>\n          ${facet.values.map(\n            (v) => html`\n              <label part=\"option\" data-testid=\"filter-option-${v.value}\">\n                <input\n                  part=\"checkbox\"\n                  type=\"checkbox\"\n                  data-filter-name=${facet.field}\n                  data-filter-value=${v.value}\n                  .checked=${checked(facet.field, v.value)}\n                  @change=${this.handleChange}\n                />\n                <span part=\"option-label\">${v.label ?? v.value}</span>\n                ${v.count !== undefined ? html`<span part=\"count\" class=\"nymbal-filter-count\">(${v.count})</span>` : nothing}\n              </label>\n            `,\n          )}\n        </div>\n      `,\n    )\n  }\n\n  private handleChange = (e: Event): void => {\n    const input = e.target as HTMLInputElement\n    const value = input.dataset['filterValue']!\n    if (this.getAttribute('source') === 'search') {\n      void this.client.search.setCategory(input.checked ? value : null)\n      this.emit('category', input.checked ? value : '')\n      return\n    }\n    const name = input.dataset['filterName']!\n    const current = this.client.productList.getState().filters[name]\n    if (input.checked) {\n      const values = Array.isArray(current)\n        ? [...current, value]\n        : current\n          ? [current, value]\n          : value\n      void this.client.productList.applyFilter(name, values)\n    } else if (Array.isArray(current)) {\n      const remaining = current.filter((v) => v !== value)\n      if (remaining.length > 0) {\n        void this.client.productList.applyFilter(name, remaining)\n      } else {\n        void this.client.productList.removeFilter(name)\n      }\n    } else {\n      void this.client.productList.removeFilter(name)\n    }\n    this.emit(name, value)\n  }\n\n  private emit(name: string, value: string): void {\n    this.dispatchEvent(\n      new CustomEvent('nymbal:filter:changed', {\n        bubbles: true,\n        composed: true,\n        detail: { name, value },\n      }),\n    )\n  }\n\n  private facetsAttribute(): Facet[] {\n    return parsedJson<Facet[]>(this, 'facets', this.facets) ?? []\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-WTEVTCIL.js

@@ -0,0 +1,128 @@
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  NymbalFormElement,
+  renderField
+} from "./chunk-PN6QKYE4.js";
+import {
+  buttonStyles,
+  fieldStyles
+} from "./chunk-GHXTJ2CF.js";
+import {
+  baseStyles,
+  parsedJson,
+  propertiesOf
+} from "./chunk-EYDMJNNK.js";
+
+// src/components/profile-form.ts
+import { css, html, nothing } from "lit";
+var SCHEMA = {
+  tag: "nymbal-profile-form",
+  reactName: "ProfileForm",
+  // The customer a server read, shown until the auth store settles.
+  attributes: [{ name: "customer", prop: "customer", type: "json" }],
+  events: [
+    {
+      name: "nymbal:profile:saved",
+      prop: "onSaved",
+      detail: "{ customer: unknown }"
+    }
+  ],
+  parts: ["form", "row", "field", "label", "input", "actions", "submit", "error", "message"],
+  slots: ["submit-label"],
+  children: false
+};
+var NymbalProfileForm = class extends NymbalFormElement {
+  static schema = SCHEMA;
+  static properties = propertiesOf(SCHEMA);
+  static styles = [
+    baseStyles,
+    buttonStyles,
+    fieldStyles,
+    css`
+      [part~='row'] {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+        gap: 0 var(--nymbal-spacing-md, 1rem);
+      }
+      [part~='submit'] {
+        width: auto;
+      }
+    `
+  ];
+  stores() {
+    return [this.client.auth];
+  }
+  storeSettled() {
+    this.customer = void 0;
+  }
+  async send() {
+    await this.client.auth.updateProfile({
+      firstName: this.value("firstName"),
+      lastName: this.value("lastName"),
+      phone: this.value("phone")
+    });
+    this.notice = "Profile updated successfully.";
+    this.emit("nymbal:profile:saved", { customer: this.client.auth.getState().customer });
+  }
+  failureText(err) {
+    return err instanceof Error && err.message !== "" ? err.message : "Failed to update profile.";
+  }
+  render() {
+    const customer = parsedJson(this, "customer", this.customer) ?? (this.readsStores ? this.client.auth.getState().customer : null);
+    return html`
+      ${this.renderError()}
+      <form part="form" data-testid="profile-form" @submit=${this.onSubmit}>
+        <div part="row">
+          ${renderField({
+      id: "profile-firstName",
+      name: "firstName",
+      label: "First Name",
+      autocomplete: "given-name",
+      value: customer?.firstName ?? ""
+    })}
+          ${renderField({
+      id: "profile-lastName",
+      name: "lastName",
+      label: "Last Name",
+      autocomplete: "family-name",
+      value: customer?.lastName ?? ""
+    })}
+        </div>
+        ${renderField({
+      id: "profile-email",
+      name: "email",
+      label: "Email",
+      type: "email",
+      autocomplete: "email",
+      disabled: true,
+      value: customer?.email ?? ""
+    })}
+        ${renderField({
+      id: "profile-phone",
+      name: "phone",
+      label: "Phone",
+      type: "tel",
+      autocomplete: "tel",
+      value: customer?.phone ?? ""
+    })}
+        <div part="actions">
+          <button
+            type="submit"
+            part="submit"
+            class="btn btn-primary"
+            data-testid="profile-save"
+            ?disabled=${this.pending}
+          >
+            ${this.pending ? "Saving..." : html`<slot name="submit-label">Save Changes</slot>`}
+          </button>
+        </div>
+        ${this.notice === null ? nothing : html`<p part="message" role="status">${this.notice}</p>`}
+      </form>
+    `;
+  }
+};
+
+export {
+  NymbalProfileForm
+};
+//# sourceMappingURL=chunk-WTEVTCIL.js.map

package/dist/chunk-WTEVTCIL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/profile-form.ts"],"sourcesContent":["import { css, html, nothing } from 'lit'\nimport type { Customer } from '@nymbalhq/types'\nimport { baseStyles, parsedJson, propertiesOf, type ElementSchema } from '../base-element.js'\nimport { NymbalFormElement, renderField } from '../form-element.js'\nimport { buttonStyles, fieldStyles } from '../view-styles.js'\n\nconst SCHEMA: ElementSchema = {\n  tag: 'nymbal-profile-form',\n  reactName: 'ProfileForm',\n  // The customer a server read, shown until the auth store settles.\n  attributes: [{ name: 'customer', prop: 'customer', type: 'json' }],\n  events: [\n    {\n      name: 'nymbal:profile:saved',\n      prop: 'onSaved',\n      detail: '{ customer: unknown }',\n    },\n  ],\n  parts: ['form', 'row', 'field', 'label', 'input', 'actions', 'submit', 'error', 'message'],\n  slots: ['submit-label'],\n  children: false,\n}\n\n/** The signed-in customer's name and phone, filled from the auth store and saved through it. */\nexport class NymbalProfileForm extends NymbalFormElement {\n  static override schema = SCHEMA\n  static override properties = propertiesOf(SCHEMA)\n  static override styles = [\n    baseStyles,\n    buttonStyles,\n    fieldStyles,\n    css`\n      [part~='row'] {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n        gap: 0 var(--nymbal-spacing-md, 1rem);\n      }\n      [part~='submit'] {\n        width: auto;\n      }\n    `,\n  ]\n\n  declare customer: unknown\n\n  protected override stores() {\n    return [this.client.auth]\n  }\n\n  protected override storeSettled(): void {\n    this.customer = undefined\n  }\n\n  protected override async send(): Promise<void> {\n    await this.client.auth.updateProfile({\n      firstName: this.value('firstName'),\n      lastName: this.value('lastName'),\n      phone: this.value('phone'),\n    })\n    this.notice = 'Profile updated successfully.'\n    this.emit('nymbal:profile:saved', { customer: this.client.auth.getState().customer })\n  }\n\n  protected override failureText(err: unknown): string {\n    return err instanceof Error && err.message !== '' ? err.message : 'Failed to update profile.'\n  }\n\n  protected override render() {\n    const customer =\n      parsedJson<Customer>(this, 'customer', this.customer) ??\n      (this.readsStores ? this.client.auth.getState().customer : null)\n    return html`\n      ${this.renderError()}\n      <form part=\"form\" data-testid=\"profile-form\" @submit=${this.onSubmit}>\n        <div part=\"row\">\n          ${renderField({\n            id: 'profile-firstName',\n            name: 'firstName',\n            label: 'First Name',\n            autocomplete: 'given-name',\n            value: customer?.firstName ?? '',\n          })}\n          ${renderField({\n            id: 'profile-lastName',\n            name: 'lastName',\n            label: 'Last Name',\n            autocomplete: 'family-name',\n            value: customer?.lastName ?? '',\n          })}\n        </div>\n        ${renderField({\n          id: 'profile-email',\n          name: 'email',\n          label: 'Email',\n          type: 'email',\n          autocomplete: 'email',\n          disabled: true,\n          value: customer?.email ?? '',\n        })}\n        ${renderField({\n          id: 'profile-phone',\n          name: 'phone',\n          label: 'Phone',\n          type: 'tel',\n          autocomplete: 'tel',\n          value: customer?.phone ?? '',\n        })}\n        <div part=\"actions\">\n          <button\n            type=\"submit\"\n            part=\"submit\"\n            class=\"btn btn-primary\"\n            data-testid=\"profile-save\"\n            ?disabled=${this.pending}\n          >\n            ${this.pending ? 'Saving...' : html`<slot name=\"submit-label\">Save Changes</slot>`}\n          </button>\n        </div>\n        ${this.notice === null\n          ? nothing\n          : html`<p part=\"message\" role=\"status\">${this.notice}</p>`}\n      </form>\n    `\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,KAAK,MAAM,eAAe;AAMnC,IAAM,SAAwB;AAAA,EAC5B,KAAK;AAAA,EACL,WAAW;AAAA;AAAA,EAEX,YAAY,CAAC,EAAE,MAAM,YAAY,MAAM,YAAY,MAAM,OAAO,CAAC;AAAA,EACjE,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,CAAC,QAAQ,OAAO,SAAS,SAAS,SAAS,WAAW,UAAU,SAAS,SAAS;AAAA,EACzF,OAAO,CAAC,cAAc;AAAA,EACtB,UAAU;AACZ;AAGO,IAAM,oBAAN,cAAgC,kBAAkB;AAAA,EACvD,OAAgB,SAAS;AAAA,EACzB,OAAgB,aAAa,aAAa,MAAM;AAAA,EAChD,OAAgB,SAAS;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUF;AAAA,EAImB,SAAS;AAC1B,WAAO,CAAC,KAAK,OAAO,IAAI;AAAA,EAC1B;AAAA,EAEmB,eAAqB;AACtC,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,MAAyB,OAAsB;AAC7C,UAAM,KAAK,OAAO,KAAK,cAAc;AAAA,MACnC,WAAW,KAAK,MAAM,WAAW;AAAA,MACjC,UAAU,KAAK,MAAM,UAAU;AAAA,MAC/B,OAAO,KAAK,MAAM,OAAO;AAAA,IAC3B,CAAC;AACD,SAAK,SAAS;AACd,SAAK,KAAK,wBAAwB,EAAE,UAAU,KAAK,OAAO,KAAK,SAAS,EAAE,SAAS,CAAC;AAAA,EACtF;AAAA,EAEmB,YAAY,KAAsB;AACnD,WAAO,eAAe,SAAS,IAAI,YAAY,KAAK,IAAI,UAAU;AAAA,EACpE;AAAA,EAEmB,SAAS;AAC1B,UAAM,WACJ,WAAqB,MAAM,YAAY,KAAK,QAAQ,MACnD,KAAK,cAAc,KAAK,OAAO,KAAK,SAAS,EAAE,WAAW;AAC7D,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA,6DACmC,KAAK,QAAQ;AAAA;AAAA,YAE9D,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,UAAU,aAAa;AAAA,IAChC,CAAC,CAAC;AAAA,YACA,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,UAAU,YAAY;AAAA,IAC/B,CAAC,CAAC;AAAA;AAAA,UAEF,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,UAAU;AAAA,MACV,OAAO,UAAU,SAAS;AAAA,IAC5B,CAAC,CAAC;AAAA,UACA,YAAY;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,OAAO,UAAU,SAAS;AAAA,IAC5B,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOc,KAAK,OAAO;AAAA;AAAA,cAEtB,KAAK,UAAU,cAAc,mDAAmD;AAAA;AAAA;AAAA,UAGpF,KAAK,WAAW,OACd,UACA,uCAAuC,KAAK,MAAM,MAAM;AAAA;AAAA;AAAA,EAGlE;AACF;","names":[]}