@nymbalhq/web-components 1.0.0 → 1.2.0

package/dist/index.js

@@ -1,1112 +1,144 @@
-// src/registry.ts
-var CLIENT_KEY = /* @__PURE__ */ Symbol.for("nymbal.client");
-function registerClient(client) {
-  globalThis[CLIENT_KEY] = client;
-}
-function getClient() {
-  const client = globalThis[CLIENT_KEY];
-  if (!client) {
-    throw new Error("NymbalClient not registered. Call registerClient() before using components.");
-  }
-  return client;
-}
-
-// src/base-element.ts
-var HTMLElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
-};
-var NymbalElement = class extends HTMLElementBase {
-  _unsubs = [];
-  _renderQueued = false;
-  get client() {
-    return getClient();
-  }
-  subscribeToStore(store) {
-    this._unsubs.push(store.subscribe(() => this.requestRender()));
-  }
-  requestRender() {
-    if (this._renderQueued) return;
-    this._renderQueued = true;
-    queueMicrotask(() => {
-      this._renderQueued = false;
-      this.render();
-    });
-  }
-  connectedCallback() {
-    this.setup();
-    this.render();
-  }
-  disconnectedCallback() {
-    for (const fn of this._unsubs) fn();
-    this._unsubs = [];
-  }
-};
-
-// src/styles.ts
-var injected = /* @__PURE__ */ new Set();
-function injectStyles(tagName, css) {
-  if (injected.has(tagName)) return;
-  if (typeof document === "undefined") return;
-  const style = document.createElement("style");
-  style.setAttribute("data-nymbal", tagName);
-  style.textContent = css;
-  document.head.appendChild(style);
-  injected.add(tagName);
-}
-
-// src/components/add-to-cart.ts
-var STYLES = `
-nymbal-add-to-cart {
-  display: inline-block;
-}
-nymbal-add-to-cart button {
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-base);
-  font-weight: var(--nymbal-font-weight-medium);
-  background: var(--nymbal-color-primary);
-  color: var(--nymbal-color-text-inverse);
-  border: none;
-  border-radius: var(--nymbal-radius-md);
-  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-lg);
-  cursor: pointer;
-  transition: background var(--nymbal-transition-fast);
-  min-width: 140px;
-}
-nymbal-add-to-cart button:hover:not(:disabled) {
-  background: var(--nymbal-color-primary-hover);
-}
-nymbal-add-to-cart button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-`;
-var NymbalAddToCart = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["variant-id", "disabled"];
-  }
-  button;
-  setup() {
-    injectStyles("nymbal-add-to-cart", STYLES);
-    this.subscribeToStore(this.client.cart);
-  }
-  render() {
-    const variantId = this.getAttribute("variant-id");
-    const isDisabled = this.hasAttribute("disabled");
-    const cartState = this.client.cart.getState();
-    if (!this.button) {
-      this.button = document.createElement("button");
-      this.button.setAttribute("type", "button");
-      this.button.setAttribute("data-testid", "add-to-cart");
-      this.button.addEventListener("click", this.handleClick);
-      this.innerHTML = "";
-      this.appendChild(this.button);
-    }
-    this.button.disabled = isDisabled || cartState.loading || !variantId;
-    this.button.setAttribute("aria-busy", String(cartState.loading));
-    this.button.textContent = cartState.loading ? "Adding..." : "Add to Cart";
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.requestRender();
-  }
-  handleClick = async () => {
-    const variantId = this.getAttribute("variant-id");
-    if (!variantId) return;
-    try {
-      await this.client.cart.addItem(variantId);
-      this.dispatchEvent(
-        new CustomEvent("nymbal:cart:item-added", {
-          bubbles: true,
-          composed: true,
-          detail: { variantId }
-        })
-      );
-    } catch {
-    }
-  };
-};
-
-// src/components/cart-drawer.ts
-var STYLES2 = `
-nymbal-cart-drawer {
-  display: block;
-}
-nymbal-cart-drawer .nymbal-drawer-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--nymbal-color-overlay);
-  z-index: var(--nymbal-z-drawer);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--nymbal-transition-normal), visibility var(--nymbal-transition-normal);
-}
-nymbal-cart-drawer[open] .nymbal-drawer-overlay {
-  opacity: 1;
-  visibility: visible;
-}
-nymbal-cart-drawer .nymbal-drawer-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: min(400px, 90vw);
-  background: var(--nymbal-color-surface);
-  z-index: var(--nymbal-z-drawer);
-  transform: translateX(100%);
-  transition: transform var(--nymbal-transition-normal);
-  display: flex;
-  flex-direction: column;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-cart-drawer[open] .nymbal-drawer-panel {
-  transform: translateX(0);
-}
-nymbal-cart-drawer .nymbal-drawer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--nymbal-spacing-md) var(--nymbal-spacing-lg);
-  border-bottom: 1px solid var(--nymbal-color-border);
-}
-nymbal-cart-drawer .nymbal-drawer-header h2 {
-  margin: 0;
-  font-size: var(--nymbal-font-size-lg);
-  font-weight: var(--nymbal-font-weight-bold);
-}
-nymbal-cart-drawer .nymbal-drawer-close {
-  background: none;
-  border: none;
-  font-size: var(--nymbal-font-size-xl);
-  cursor: pointer;
-  padding: var(--nymbal-spacing-xs);
-  color: var(--nymbal-color-text-muted);
-}
-nymbal-cart-drawer .nymbal-drawer-items {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--nymbal-spacing-md) var(--nymbal-spacing-lg);
-}
-nymbal-cart-drawer .nymbal-cart-item {
-  display: flex;
-  gap: var(--nymbal-spacing-md);
-  padding: var(--nymbal-spacing-md) 0;
-  border-bottom: 1px solid var(--nymbal-color-border);
-}
-nymbal-cart-drawer .nymbal-cart-item-info {
-  flex: 1;
-}
-nymbal-cart-drawer .nymbal-cart-item-name {
-  font-weight: var(--nymbal-font-weight-medium);
-  margin-bottom: var(--nymbal-spacing-xs);
-}
-nymbal-cart-drawer .nymbal-cart-item-variant {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-}
-nymbal-cart-drawer .nymbal-cart-item-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-sm);
-}
-nymbal-cart-drawer .nymbal-cart-item-remove {
-  background: none;
-  border: none;
-  color: var(--nymbal-color-error);
-  cursor: pointer;
-  font-size: var(--nymbal-font-size-sm);
-  padding: var(--nymbal-spacing-xs);
-}
-nymbal-cart-drawer .nymbal-drawer-footer {
-  padding: var(--nymbal-spacing-md) var(--nymbal-spacing-lg);
-  border-top: 1px solid var(--nymbal-color-border);
-}
-nymbal-cart-drawer .nymbal-cart-subtotal {
-  display: flex;
-  justify-content: space-between;
-  font-weight: var(--nymbal-font-weight-bold);
-  margin-bottom: var(--nymbal-spacing-md);
-}
-nymbal-cart-drawer .nymbal-checkout-btn {
-  width: 100%;
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-base);
-  font-weight: var(--nymbal-font-weight-medium);
-  background: var(--nymbal-color-primary);
-  color: var(--nymbal-color-text-inverse);
-  border: none;
-  border-radius: var(--nymbal-radius-md);
-  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-lg);
-  cursor: pointer;
-  transition: background var(--nymbal-transition-fast);
-}
-nymbal-cart-drawer .nymbal-checkout-btn:hover {
-  background: var(--nymbal-color-primary-hover);
-}
-nymbal-cart-drawer .nymbal-drawer-empty {
-  text-align: center;
-  color: var(--nymbal-color-text-muted);
-  padding: var(--nymbal-spacing-xl) 0;
-}
-`;
-var NymbalCartDrawer = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["open"];
-  }
-  handleItemAdded = () => {
-    this.open();
-  };
-  handleMiniCartClicked = () => {
-    this.toggle();
-  };
-  setup() {
-    injectStyles("nymbal-cart-drawer", STYLES2);
-    this.subscribeToStore(this.client.cart);
-    document.addEventListener("nymbal:cart:item-added", this.handleItemAdded);
-    document.addEventListener("nymbal:mini-cart:clicked", this.handleMiniCartClicked);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("nymbal:cart:item-added", this.handleItemAdded);
-    document.removeEventListener("nymbal:mini-cart:clicked", this.handleMiniCartClicked);
-  }
-  open() {
-    this.setAttribute("open", "");
-    window.dispatchEvent(new CustomEvent("nymbal:cart:open"));
-  }
-  close() {
-    this.removeAttribute("open");
-    window.dispatchEvent(new CustomEvent("nymbal:cart:close"));
-  }
-  toggle() {
-    if (this.hasAttribute("open")) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-  render() {
-    const state = this.client.cart.getState();
-    const currency = state.currency;
-    const itemsHtml = state.items.length === 0 ? `<div class="nymbal-drawer-empty">Your cart is empty</div>` : state.items.map((item) => `
-        <div class="nymbal-cart-item" data-testid="cart-item-${item.variantId}">
-          <div class="nymbal-cart-item-info">
-            <div class="nymbal-cart-item-name">${this.esc(item.productName)}</div>
-            <div class="nymbal-cart-item-variant">${this.esc(item.variantName)}</div>
-            <div class="nymbal-cart-item-qty">Qty: ${item.qty}</div>
-          </div>
-          <div class="nymbal-cart-item-actions">
-            <span>${this.formatPrice(item.priceMinor * item.qty, currency)}</span>
-            <button type="button" class="nymbal-cart-item-remove" data-testid="remove-item-${item.variantId}" data-variant-id="${item.variantId}">Remove</button>
-          </div>
-        </div>
-      `).join("");
-    this.innerHTML = `
-      <div class="nymbal-drawer-overlay" data-testid="cart-drawer-overlay"></div>
-      <div class="nymbal-drawer-panel" role="dialog" aria-label="Shopping cart" aria-modal="true" data-testid="cart-drawer">
-        <div class="nymbal-drawer-header">
-          <h2>Cart (${state.itemCount})</h2>
-          <button type="button" class="nymbal-drawer-close" data-testid="cart-drawer-close" aria-label="Close cart">&times;</button>
-        </div>
-        <div class="nymbal-drawer-items">${itemsHtml}</div>
-        ${state.items.length > 0 ? `
-          <div class="nymbal-drawer-footer">
-            <div class="nymbal-cart-subtotal">
-              <span>Subtotal</span>
-              <span>${this.formatPrice(state.subtotalMinor, currency)}</span>
-            </div>
-            <button type="button" class="nymbal-checkout-btn" data-testid="cart-checkout-btn">Checkout</button>
-          </div>
-        ` : ""}
-      </div>
-    `;
-    this.querySelector(".nymbal-drawer-overlay")?.addEventListener("click", () => this.close());
-    this.querySelector(".nymbal-drawer-close")?.addEventListener("click", () => this.close());
-    this.querySelector(".nymbal-checkout-btn")?.addEventListener("click", () => {
-      this.dispatchEvent(new CustomEvent("nymbal:cart:checkout-clicked", { bubbles: true, composed: true }));
-    });
-    this.querySelectorAll(".nymbal-cart-item-remove").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        const variantId = btn.dataset["variantId"];
-        if (variantId) this.client.cart.removeItem(variantId);
-      });
-    });
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.requestRender();
-  }
-  esc(str) {
-    const div = document.createElement("div");
-    div.textContent = str;
-    return div.innerHTML;
-  }
-  formatPrice(minor, currency) {
-    return new Intl.NumberFormat(void 0, {
-      style: "currency",
-      currency
-    }).format(minor / 100);
-  }
-};
-
-// src/components/mini-cart.ts
-var STYLES3 = `
-nymbal-mini-cart {
-  display: inline-block;
-  position: relative;
-}
-nymbal-mini-cart button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  position: relative;
-  padding: var(--nymbal-spacing-sm);
-  font-family: var(--nymbal-font-family);
-  color: var(--nymbal-color-text);
-}
-nymbal-mini-cart .nymbal-mini-cart-icon {
-  width: 24px;
-  height: 24px;
-}
-nymbal-mini-cart .nymbal-mini-cart-badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  background: var(--nymbal-color-accent);
-  color: var(--nymbal-color-text-inverse);
-  font-size: var(--nymbal-font-size-xs);
-  font-weight: var(--nymbal-font-weight-bold);
-  min-width: 18px;
-  height: 18px;
-  border-radius: var(--nymbal-radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-nymbal-mini-cart .nymbal-mini-cart-badge:empty {
-  display: none;
-}
-`;
-var CART_SVG = `<svg class="nymbal-mini-cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>`;
-var NymbalMiniCart = class extends NymbalElement {
-  setup() {
-    injectStyles("nymbal-mini-cart", STYLES3);
-    this.subscribeToStore(this.client.cart);
-  }
-  render() {
-    const { itemCount } = this.client.cart.getState();
-    this.innerHTML = `
-      <button type="button" data-testid="mini-cart" aria-label="Cart (${itemCount} items)">
-        ${CART_SVG}
-        <span class="nymbal-mini-cart-badge" data-testid="mini-cart-badge">${itemCount > 0 ? itemCount : ""}</span>
-      </button>
-    `;
-    this.querySelector("button")?.addEventListener("click", () => {
-      this.dispatchEvent(new CustomEvent("nymbal:mini-cart:clicked", { bubbles: true, composed: true }));
-    });
-  }
-};
-
-// src/components/variant-selector.ts
-var STYLES4 = `
-nymbal-variant-selector {
-  display: block;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-variant-selector .nymbal-option-group {
-  margin-bottom: var(--nymbal-spacing-md);
-}
-nymbal-variant-selector .nymbal-option-label {
-  display: block;
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-medium);
-  margin-bottom: var(--nymbal-spacing-sm);
-  color: var(--nymbal-color-text);
-}
-nymbal-variant-selector .nymbal-option-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--nymbal-spacing-sm);
-}
-nymbal-variant-selector .nymbal-option-btn {
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-sm);
-  background: var(--nymbal-color-surface);
-  color: var(--nymbal-color-text);
-  border: 1px solid var(--nymbal-color-border);
-  border-radius: var(--nymbal-radius-md);
-  padding: var(--nymbal-spacing-xs) var(--nymbal-spacing-md);
-  cursor: pointer;
-  transition: border-color var(--nymbal-transition-fast), background var(--nymbal-transition-fast);
-}
-nymbal-variant-selector .nymbal-option-btn:hover {
-  border-color: var(--nymbal-color-primary);
-}
-nymbal-variant-selector .nymbal-option-btn[aria-pressed="true"] {
-  background: var(--nymbal-color-primary);
-  color: var(--nymbal-color-text-inverse);
-  border-color: var(--nymbal-color-primary);
-}
-nymbal-variant-selector .nymbal-option-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-`;
-var NymbalVariantSelector = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["options"];
-  }
-  setup() {
-    injectStyles("nymbal-variant-selector", STYLES4);
-    this.subscribeToStore(this.client.product);
-  }
-  render() {
-    const state = this.client.product.getState();
-    const product = state.product;
-    if (!product) {
-      this.innerHTML = "";
-      return;
-    }
-    const optionGroups = this.getOptionGroups(product);
-    const selected = state.selectedVariant;
-    this.innerHTML = optionGroups.map((group) => `
-      <div class="nymbal-option-group">
-        <span class="nymbal-option-label">${this.esc(group.name)}</span>
-        <div class="nymbal-option-buttons">
-          ${group.values.map((value) => {
-      const isSelected = selected?.options.some(
-        (o) => o.name === group.name && o.value === value
-      ) ?? false;
-      return `<button
-              class="nymbal-option-btn"
-              data-testid="variant-option-${this.esc(group.name)}-${this.esc(value)}"
-              data-option-name="${this.esc(group.name)}"
-              data-option-value="${this.esc(value)}"
-              aria-pressed="${isSelected}"
-            >${this.esc(value)}</button>`;
-    }).join("")}
-        </div>
-      </div>
-    `).join("");
-    this.querySelectorAll(".nymbal-option-btn").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        const el = btn;
-        const optionName = el.dataset["optionName"];
-        const optionValue = el.dataset["optionValue"];
-        if (!optionName || !optionValue || !product) return;
-        const currentSelections = /* @__PURE__ */ new Map();
-        if (selected) {
-          for (const opt of selected.options) {
-            currentSelections.set(opt.name, opt.value);
-          }
-        }
-        currentSelections.set(optionName, optionValue);
-        const match = product.variants.find((v) => {
-          const vRaw = v.options;
-          let vOpts = [];
-          if (typeof vRaw === "string") {
-            try {
-              vOpts = JSON.parse(vRaw);
-            } catch (e) {
-              console.warn("[variant-selector] malformed variant options JSON", e);
-              vOpts = [];
-            }
-          } else if (Array.isArray(vRaw)) {
-            vOpts = vRaw;
-          }
-          return vOpts.every((o) => currentSelections.get(o.name) === o.value);
-        });
-        if (match) {
-          this.client.product.selectVariant(match);
-          this.dispatchEvent(
-            new CustomEvent("nymbal:variant:selected", {
-              bubbles: true,
-              composed: true,
-              detail: { variant: match }
-            })
-          );
-        }
-      });
-    });
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.requestRender();
-  }
-  getOptionGroups(product) {
-    const optionsAttr = this.getAttribute("options");
-    if (optionsAttr) {
-      try {
-        return JSON.parse(optionsAttr);
-      } catch (e) {
-        console.warn("[variant-selector] malformed options attribute, falling back to variant derivation", e);
-      }
-    }
-    const groups = /* @__PURE__ */ new Map();
-    for (const variant of product.variants) {
-      const raw = variant.options;
-      let opts = [];
-      if (typeof raw === "string") {
-        try {
-          opts = JSON.parse(raw);
-        } catch (e) {
-          console.warn("[variant-selector] malformed variant options in getOptionGroups", e);
-          opts = [];
-        }
-      } else if (Array.isArray(raw)) {
-        opts = raw;
-      }
-      for (const opt of opts) {
-        let values = groups.get(opt.name);
-        if (!values) {
-          values = /* @__PURE__ */ new Set();
-          groups.set(opt.name, values);
-        }
-        values.add(opt.value);
-      }
-    }
-    return Array.from(groups.entries()).map(([name, values]) => ({
-      name,
-      values: Array.from(values)
-    }));
-  }
-  esc(str) {
-    const div = document.createElement("div");
-    div.textContent = str;
-    return div.innerHTML;
-  }
-};
-
-// src/components/quantity-selector.ts
-var STYLES5 = `
-nymbal-quantity-selector {
-  display: inline-flex;
-  align-items: center;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-quantity-selector button {
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-base);
-  background: var(--nymbal-color-surface);
-  color: var(--nymbal-color-text);
-  border: 1px solid var(--nymbal-color-border);
-  width: 36px;
-  height: 36px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background var(--nymbal-transition-fast);
-}
-nymbal-quantity-selector button:hover:not(:disabled) {
-  background: var(--nymbal-color-secondary, #f4f4f5);
-}
-nymbal-quantity-selector button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-nymbal-quantity-selector button:first-child {
-  border-radius: var(--nymbal-radius-md) 0 0 var(--nymbal-radius-md);
-}
-nymbal-quantity-selector button:last-child {
-  border-radius: 0 var(--nymbal-radius-md) var(--nymbal-radius-md) 0;
-}
-nymbal-quantity-selector input {
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-base);
-  width: 48px;
-  height: 36px;
-  text-align: center;
-  border: 1px solid var(--nymbal-color-border);
-  border-left: none;
-  border-right: none;
-  -moz-appearance: textfield;
-}
-nymbal-quantity-selector input::-webkit-outer-spin-button,
-nymbal-quantity-selector input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-`;
-var NymbalQuantitySelector = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["value", "min", "max"];
-  }
-  _value = 1;
-  setup() {
-    injectStyles("nymbal-quantity-selector", STYLES5);
-    this._value = Number(this.getAttribute("value")) || 1;
-  }
-  render() {
-    const min = Number(this.getAttribute("min")) || 1;
-    const max = Number(this.getAttribute("max")) || 99;
-    this.innerHTML = `
-      <button data-testid="qty-decrement" aria-label="Decrease quantity" ${this._value <= min ? "disabled" : ""}>&#8722;</button>
-      <input data-testid="qty-input" type="number" value="${this._value}" min="${min}" max="${max}" aria-label="Quantity">
-      <button data-testid="qty-increment" aria-label="Increase quantity" ${this._value >= max ? "disabled" : ""}>&#43;</button>
-    `;
-    this.querySelector('[data-testid="qty-decrement"]')?.addEventListener("click", () => {
-      if (this._value > min) {
-        this._value--;
-        this.emitChange();
-        this.render();
-      }
-    });
-    this.querySelector('[data-testid="qty-increment"]')?.addEventListener("click", () => {
-      if (this._value < max) {
-        this._value++;
-        this.emitChange();
-        this.render();
-      }
-    });
-    const input = this.querySelector("input");
-    input?.addEventListener("change", () => {
-      const val = Math.min(max, Math.max(min, Number(input.value) || min));
-      this._value = val;
-      this.emitChange();
-      this.render();
-    });
-  }
-  attributeChangedCallback(name) {
-    if (name === "value") {
-      this._value = Number(this.getAttribute("value")) || 1;
-    }
-    if (this.isConnected) this.requestRender();
-  }
-  emitChange() {
-    this.dispatchEvent(
-      new CustomEvent("nymbal:quantity:changed", {
-        bubbles: true,
-        composed: true,
-        detail: { value: this._value }
-      })
-    );
-  }
-};
-
-// src/components/search-bar.ts
-var STYLES6 = `
-nymbal-search-bar {
-  display: block;
-  position: relative;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-search-bar input {
-  font-family: var(--nymbal-font-family);
-  font-size: var(--nymbal-font-size-base);
-  width: 100%;
-  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-md);
-  border: 1px solid var(--nymbal-color-border);
-  border-radius: var(--nymbal-radius-md);
-  outline: none;
-  transition: border-color var(--nymbal-transition-fast);
-  box-sizing: border-box;
-}
-nymbal-search-bar input:focus {
-  border-color: var(--nymbal-color-accent);
-}
-nymbal-search-bar .nymbal-search-results {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--nymbal-color-surface);
-  border: 1px solid var(--nymbal-color-border);
-  border-top: none;
-  border-radius: 0 0 var(--nymbal-radius-md) var(--nymbal-radius-md);
-  box-shadow: var(--nymbal-shadow-md);
-  z-index: var(--nymbal-z-dropdown);
-  max-height: 300px;
-  overflow-y: auto;
-}
-nymbal-search-bar .nymbal-search-result-item {
-  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-md);
-  cursor: pointer;
-  transition: background var(--nymbal-transition-fast);
-}
-nymbal-search-bar .nymbal-search-result-item:hover,
-nymbal-search-bar .nymbal-search-result-item[aria-selected="true"] {
-  background: var(--nymbal-color-secondary, #f4f4f5);
-}
-nymbal-search-bar .nymbal-search-result-name {
-  font-weight: var(--nymbal-font-weight-medium);
-}
-nymbal-search-bar .nymbal-search-result-price {
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text-muted);
-}
-nymbal-search-bar .nymbal-search-loading {
-  padding: var(--nymbal-spacing-md);
-  text-align: center;
-  color: var(--nymbal-color-text-muted);
-  font-size: var(--nymbal-font-size-sm);
-}
-`;
-var NymbalSearchBar = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["placeholder", "debounce-ms"];
-  }
-  debounceTimer = null;
-  selectedIndex = -1;
-  setup() {
-    injectStyles("nymbal-search-bar", STYLES6);
-    this.subscribeToStore(this.client.search);
-  }
-  render() {
-    const state = this.client.search.getState();
-    const placeholder = this.getAttribute("placeholder") ?? "Search products...";
-    let resultsHtml = "";
-    if (state.query) {
-      if (state.loading) {
-        resultsHtml = `<div class="nymbal-search-results" data-testid="search-results"><div class="nymbal-search-loading">Searching...</div></div>`;
-      } else if (state.results.length > 0) {
-        resultsHtml = `<div class="nymbal-search-results" data-testid="search-results">
-          ${state.results.map(
-          (product, i) => `
-            <div class="nymbal-search-result-item" data-testid="search-result-${this.esc(product.slug)}" data-slug="${this.esc(product.slug)}" aria-selected="${i === this.selectedIndex}">
-              <div class="nymbal-search-result-name">${this.esc(product.name)}</div>
-              ${product.priceMinor !== null ? `<div class="nymbal-search-result-price">${this.formatPrice(product.priceMinor, product.currency ?? "USD")}</div>` : ""}
-            </div>
-          `
-        ).join("")}
-        </div>`;
-      }
-    }
-    this.innerHTML = `
-      <input data-testid="search-input" type="search" placeholder="${this.esc(placeholder)}" value="${this.esc(state.query)}" autocomplete="off" role="combobox" aria-expanded="${state.results.length > 0}" aria-haspopup="listbox">
-      ${resultsHtml}
-    `;
-    this.querySelectorAll(".nymbal-search-result-item").forEach((item, i) => {
-      item.addEventListener("click", () => {
-        const product = state.results[i];
-        if (product) this.select(product);
-      });
-    });
-    const input = this.querySelector("input");
-    input.addEventListener("input", () => {
-      const query = input.value;
-      const debounceMs = Number(this.getAttribute("debounce-ms")) || 300;
-      if (this.debounceTimer !== null) clearTimeout(this.debounceTimer);
-      this.debounceTimer = setTimeout(() => {
-        this.selectedIndex = -1;
-        if (query.trim()) {
-          this.client.search.search(query);
-        } else {
-          this.client.search.clearSearch();
-        }
-      }, debounceMs);
-    });
-    input.addEventListener("keydown", (e) => {
-      const results = state.results;
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        this.selectedIndex = Math.min(this.selectedIndex + 1, results.length - 1);
-        this.render();
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
-        this.render();
-      } else if (e.key === "Enter") {
-        e.preventDefault();
-        const selected = this.selectedIndex >= 0 ? results[this.selectedIndex] : void 0;
-        if (selected) {
-          this.select(selected);
-        } else {
-          const query = input.value.trim();
-          if (query) {
-            window.location.href = `/search?q=${encodeURIComponent(query)}`;
-          }
-        }
-      } else if (e.key === "Escape") {
-        this.client.search.clearSearch();
-        this.selectedIndex = -1;
-      }
-    });
-  }
-  select(product) {
-    this.dispatchEvent(
-      new CustomEvent("nymbal:search:selected", {
-        bubbles: true,
-        composed: true,
-        detail: { product, query: product.name }
-      })
-    );
-    this.client.search.clearSearch();
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.requestRender();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.debounceTimer !== null) {
-      clearTimeout(this.debounceTimer);
-      this.debounceTimer = null;
-    }
-  }
-  /** Escapes a value for both text and quoted-attribute contexts. */
-  esc(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-  }
-  formatPrice(minor, currency) {
-    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(minor / 100);
-  }
-};
-
-// src/components/product-filter.ts
-var STYLES7 = `
-nymbal-product-filter {
-  display: block;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-product-filter .nymbal-filter-group {
-  margin-bottom: var(--nymbal-spacing-lg);
-}
-nymbal-product-filter .nymbal-filter-label {
-  display: block;
-  font-size: var(--nymbal-font-size-sm);
-  font-weight: var(--nymbal-font-weight-bold);
-  margin-bottom: var(--nymbal-spacing-sm);
-  color: var(--nymbal-color-text);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-nymbal-product-filter .nymbal-filter-option {
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-sm);
-  padding: var(--nymbal-spacing-xs) 0;
-  cursor: pointer;
-  font-size: var(--nymbal-font-size-sm);
-  color: var(--nymbal-color-text);
-}
-nymbal-product-filter .nymbal-filter-option input[type="checkbox"] {
-  accent-color: var(--nymbal-color-primary);
-}
-nymbal-product-filter .nymbal-filter-count {
-  color: var(--nymbal-color-text-muted);
-  font-size: var(--nymbal-font-size-xs);
-}
-`;
-var NymbalProductFilter = class extends NymbalElement {
-  static get observedAttributes() {
-    return ["facets"];
-  }
-  setup() {
-    injectStyles("nymbal-product-filter", STYLES7);
-    this.subscribeToStore(this.client.productList);
-  }
-  render() {
-    const state = this.client.productList.getState();
-    const facets = this.getFacets();
-    if (facets.length === 0) {
-      this.innerHTML = "";
-      return;
-    }
-    this.innerHTML = facets.map((facet) => {
-      const activeFilter = state.filters[facet.field];
-      const activeValues = Array.isArray(activeFilter) ? activeFilter : activeFilter ? [activeFilter] : [];
-      return `
-        <div class="nymbal-filter-group" data-testid="filter-group-${facet.field}">
-          <span class="nymbal-filter-label">${this.esc(facet.label)}</span>
-          ${facet.values.map((v) => {
-        const checked = activeValues.includes(v.value);
-        return `
-              <label class="nymbal-filter-option" data-testid="filter-option-${v.value}">
-                <input type="checkbox" data-filter-name="${facet.field}" data-filter-value="${v.value}" ${checked ? "checked" : ""}>
-                <span>${this.esc(v.label ?? v.value)}</span>
-                ${v.count !== void 0 ? `<span class="nymbal-filter-count">(${v.count})</span>` : ""}
-              </label>
-            `;
-      }).join("")}
-        </div>
-      `;
-    }).join("");
-    this.querySelectorAll('input[type="checkbox"]').forEach((input) => {
-      input.addEventListener("change", () => {
-        const el = input;
-        const name = el.dataset["filterName"];
-        const value = el.dataset["filterValue"];
-        if (el.checked) {
-          const current = state.filters[name];
-          const values = Array.isArray(current) ? [...current, value] : current ? [current, value] : value;
-          this.client.productList.applyFilter(name, values);
-        } else {
-          const current = state.filters[name];
-          if (Array.isArray(current)) {
-            const remaining = current.filter((v) => v !== value);
-            if (remaining.length > 0) {
-              this.client.productList.applyFilter(name, remaining);
-            } else {
-              this.client.productList.removeFilter(name);
-            }
-          } else {
-            this.client.productList.removeFilter(name);
-          }
-        }
-        this.dispatchEvent(
-          new CustomEvent("nymbal:filter:changed", { bubbles: true, composed: true, detail: { name, value } })
-        );
-      });
-    });
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.requestRender();
-  }
-  getFacets() {
-    const attr = this.getAttribute("facets");
-    if (!attr) return [];
-    try {
-      return JSON.parse(attr);
-    } catch (err) {
-      console.error("[nymbal-product-filter] failed to parse facets attribute", err);
-      return [];
-    }
-  }
-  esc(str) {
-    const div = document.createElement("div");
-    div.textContent = str;
-    return div.innerHTML;
-  }
-};
-
-// src/components/toast.ts
-var STYLES8 = `
-nymbal-toast {
-  position: fixed;
-  z-index: var(--nymbal-z-toast);
-  display: flex;
-  flex-direction: column;
-  gap: var(--nymbal-spacing-sm);
-  pointer-events: none;
-  font-family: var(--nymbal-font-family);
-}
-nymbal-toast[position="top-right"],
-nymbal-toast:not([position]) {
-  top: var(--nymbal-spacing-lg);
-  right: var(--nymbal-spacing-lg);
-}
-nymbal-toast[position="top-left"] {
-  top: var(--nymbal-spacing-lg);
-  left: var(--nymbal-spacing-lg);
-}
-nymbal-toast[position="bottom-right"] {
-  bottom: var(--nymbal-spacing-lg);
-  right: var(--nymbal-spacing-lg);
-}
-nymbal-toast[position="bottom-left"] {
-  bottom: var(--nymbal-spacing-lg);
-  left: var(--nymbal-spacing-lg);
-}
-nymbal-toast .nymbal-toast-item {
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--nymbal-spacing-sm);
-  padding: var(--nymbal-spacing-sm) var(--nymbal-spacing-md);
-  border-radius: var(--nymbal-radius-md);
-  box-shadow: var(--nymbal-shadow-lg);
-  font-size: var(--nymbal-font-size-sm);
-  background: var(--nymbal-color-surface);
-  color: var(--nymbal-color-text);
-  border: 1px solid var(--nymbal-color-border);
-  animation: nymbal-toast-in var(--nymbal-transition-normal) forwards;
-  max-width: 360px;
-}
-nymbal-toast .nymbal-toast-item[data-type="success"] {
-  border-left: 3px solid var(--nymbal-color-success);
-}
-nymbal-toast .nymbal-toast-item[data-type="error"] {
-  border-left: 3px solid var(--nymbal-color-error);
-}
-nymbal-toast .nymbal-toast-item[data-type="warning"] {
-  border-left: 3px solid var(--nymbal-color-warning);
-}
-nymbal-toast .nymbal-toast-item[data-type="info"] {
-  border-left: 3px solid var(--nymbal-color-accent);
-}
-nymbal-toast .nymbal-toast-close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--nymbal-color-text-muted);
-  font-size: var(--nymbal-font-size-base);
-  padding: 0;
-  margin-left: auto;
-}
-@keyframes nymbal-toast-in {
-  from { opacity: 0; transform: translateY(-8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-`;
-var HTMLElementBase2 = typeof HTMLElement !== "undefined" ? HTMLElement : class {
-};
-var NymbalToast = class extends HTMLElementBase2 {
-  static get observedAttributes() {
-    return ["position", "duration-ms"];
-  }
-  connectedCallback() {
-    injectStyles("nymbal-toast", STYLES8);
-    this.setAttribute("data-testid", "toast");
-  }
-  show(message, type = "info") {
-    const durationMs = Number(this.getAttribute("duration-ms")) || 4e3;
-    const item = document.createElement("div");
-    item.className = "nymbal-toast-item";
-    item.setAttribute("data-type", type);
-    item.setAttribute("role", "alert");
-    const text = document.createElement("span");
-    text.textContent = message;
-    const close = document.createElement("button");
-    close.className = "nymbal-toast-close";
-    close.setAttribute("aria-label", "Dismiss");
-    close.textContent = "\xD7";
-    close.addEventListener("click", () => this.dismiss(item));
-    item.appendChild(text);
-    item.appendChild(close);
-    this.appendChild(item);
-    setTimeout(() => this.dismiss(item), durationMs);
-  }
-  dismiss(item) {
-    if (item.parentNode === this) {
-      this.removeChild(item);
-    }
-  }
-  static showGlobal(message, type = "info") {
-    let toastEl = document.querySelector("nymbal-toast");
-    if (!toastEl) {
-      toastEl = document.createElement("nymbal-toast");
-      document.body.appendChild(toastEl);
-    }
-    toastEl.show(message, type);
-  }
-};
-
-// src/index.ts
-function registerComponents() {
-  const components = [
-    ["nymbal-add-to-cart", NymbalAddToCart],
-    ["nymbal-cart-drawer", NymbalCartDrawer],
-    ["nymbal-mini-cart", NymbalMiniCart],
-    ["nymbal-variant-selector", NymbalVariantSelector],
-    ["nymbal-quantity-selector", NymbalQuantitySelector],
-    ["nymbal-search-bar", NymbalSearchBar],
-    ["nymbal-product-filter", NymbalProductFilter],
-    ["nymbal-toast", NymbalToast]
-  ];
-  for (const [name, ctor] of components) {
-    if (!customElements.get(name)) {
-      customElements.define(name, ctor);
-    }
-  }
-}
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js'
+import {
+  registerComponents
+} from "./chunk-XE6IWISA.js";
+import {
+  NymbalVariantSelector
+} from "./chunk-H3ZBYNHV.js";
+import {
+  NymbalReviewList
+} from "./chunk-7JAAOVCE.js";
+import {
+  NymbalSearchBar
+} from "./chunk-4COVK727.js";
+import {
+  NymbalSearchResults
+} from "./chunk-RAOGZH3Z.js";
+import {
+  NymbalSiteFooter
+} from "./chunk-FIF6GQ6U.js";
+import {
+  NymbalSiteHeader
+} from "./chunk-W23P7SI4.js";
+import {
+  NymbalSortDropdown
+} from "./chunk-EBMA7JGV.js";
+import {
+  NymbalStockBadge
+} from "./chunk-O2YKCDR2.js";
+import {
+  NymbalToast
+} from "./chunk-2TPQNQYO.js";
+import {
+  NymbalProductFilter
+} from "./chunk-WEEHXWM3.js";
+import {
+  NymbalProductGrid
+} from "./chunk-5VWZ2U5K.js";
+import {
+  NymbalProductCard
+} from "./chunk-RZVFA3N5.js";
+import {
+  NymbalProductPrice
+} from "./chunk-DXWMNB5F.js";
+import "./chunk-UYSZOEOA.js";
+import {
+  NymbalProfileForm
+} from "./chunk-WTEVTCIL.js";
+import {
+  NymbalRegisterForm
+} from "./chunk-NW47OJVN.js";
+import {
+  NymbalReviewForm
+} from "./chunk-NE6UHTOT.js";
+import {
+  NymbalCartPage
+} from "./chunk-VTQVGNVC.js";
+import {
+  NymbalQuantitySelector
+} from "./chunk-HPBC3OG7.js";
+import {
+  NymbalCategoryNav
+} from "./chunk-IYT7VXFS.js";
+import {
+  NymbalCheckout
+} from "./chunk-6XCCAAMF.js";
+import {
+  NymbalImageGallery
+} from "./chunk-U2PU4CWB.js";
+import {
+  NymbalLoginForm
+} from "./chunk-42SSME5H.js";
+import {
+  NymbalMiniCart
+} from "./chunk-2XXBQPDB.js";
+import {
+  NymbalOrderSummary
+} from "./chunk-SM7TASEW.js";
+import "./chunk-RVSKX2RX.js";
+import {
+  NymbalPaymentElement
+} from "./chunk-W7D3STJH.js";
+import {
+  NymbalAddToCart
+} from "./chunk-LHYXNQWY.js";
+import {
+  NymbalAddressBook
+} from "./chunk-B73QVSA5.js";
+import {
+  NymbalAddressForm
+} from "./chunk-V55K2CS5.js";
+import "./chunk-PN6QKYE4.js";
+import "./chunk-GHXTJ2CF.js";
+import {
+  NymbalBreadcrumb
+} from "./chunk-N4Y5DI4X.js";
+import "./chunk-LO2EW5YP.js";
+import {
+  NymbalCartDrawer
+} from "./chunk-LSQPUZK6.js";
+import "./chunk-DR5QB5VN.js";
+import {
+  NymbalElement,
+  define,
+  getClient,
+  registerClient
+} from "./chunk-EYDMJNNK.js";
+import "./chunk-UCEVCLQ7.js";
 export {
   NymbalAddToCart,
+  NymbalAddressBook,
+  NymbalAddressForm,
+  NymbalBreadcrumb,
   NymbalCartDrawer,
+  NymbalCartPage,
+  NymbalCategoryNav,
+  NymbalCheckout,
   NymbalElement,
+  NymbalImageGallery,
+  NymbalLoginForm,
   NymbalMiniCart,
+  NymbalOrderSummary,
+  NymbalPaymentElement,
+  NymbalProductCard,
   NymbalProductFilter,
+  NymbalProductGrid,
+  NymbalProductPrice,
+  NymbalProfileForm,
   NymbalQuantitySelector,
+  NymbalRegisterForm,
+  NymbalReviewForm,
+  NymbalReviewList,
   NymbalSearchBar,
+  NymbalSearchResults,
+  NymbalSiteFooter,
+  NymbalSiteHeader,
+  NymbalSortDropdown,
+  NymbalStockBadge,
   NymbalToast,
   NymbalVariantSelector,
+  define,
   getClient,
-  injectStyles,
   registerClient,
   registerComponents
 };