@altazion/commerce-sdk-htmx 26.409.7573 → 26.415.7673

package/dist/index.iife.js

@@ -1,17 +1,696 @@
-var AltazionCommerceSdkHtmx = function(exports) {
+var AltazionCommerceSdkHtmx = function(exports, commerceSdkCore) {
   "use strict";
-  function registerAltazionAuthExtension(client) {
-    if (typeof window === "undefined" || !window.htmx) {
-      console.warn("[AltazionHtmx] htmx non disponible sur window — extension non enregistrée");
-      return;
-    }
-    const handler = (event) => {
+  const EXTENSION_NAME = "altazion";
+  const JSON_VALUES_ATTRIBUTE = "hx-vals";
+  const REFRESH_ATTRIBUTE = "hx-altazion-refresh";
+  const REFRESH_EVENT_NAME = "altazion:refresh";
+  const REQUEST_ATTRIBUTES = [
+    { attribute: "hx-get", method: "GET" },
+    { attribute: "hx-post", method: "POST" },
+    { attribute: "hx-put", method: "PUT" },
+    { attribute: "hx-patch", method: "PATCH" },
+    { attribute: "hx-delete", method: "DELETE" }
+  ];
+  function createAltazionExtension(client, modules) {
+    const requestHandler = (event) => {
       const e = event;
       e.detail.headers["Accept-Language"] = client.context.locale;
       e.detail.headers["X-Altazion-Currency"] = client.context.currency;
     };
-    window.htmx.on("htmx:configRequest", handler);
+    if (typeof window !== "undefined" && window.htmx) {
+      window.htmx.on("htmx:configRequest", requestHandler);
+    }
+    if (typeof document === "undefined") {
+      return {
+        dispose() {
+          if (typeof window !== "undefined" && window.htmx) {
+            window.htmx.off("htmx:configRequest", requestHandler);
+          }
+        }
+      };
+    }
+    const handleClick = (event) => {
+      const mouseEvent = event;
+      if (mouseEvent.defaultPrevented || mouseEvent.button !== 0 || mouseEvent.metaKey || mouseEvent.ctrlKey || mouseEvent.shiftKey || mouseEvent.altKey) {
+        return;
+      }
+      const target = event.target;
+      if (!(target instanceof Element)) {
+        return;
+      }
+      const matchedAction = findMatchedAction(target, modules);
+      if (!matchedAction || matchedAction.element instanceof HTMLFormElement || !hasAltazionExtension(matchedAction.element)) {
+        return;
+      }
+      event.preventDefault();
+      void runModuleAction(client, matchedAction);
+    };
+    const handleSubmit = (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLFormElement)) {
+        return;
+      }
+      const matchedAction = findMatchedAction(target, modules);
+      if (!matchedAction || matchedAction.element !== target || !hasAltazionExtension(target)) {
+        return;
+      }
+      event.preventDefault();
+      void runModuleAction(client, matchedAction);
+    };
+    document.addEventListener("click", handleClick);
+    document.addEventListener("submit", handleSubmit);
+    return {
+      dispose() {
+        if (typeof window !== "undefined" && window.htmx) {
+          window.htmx.off("htmx:configRequest", requestHandler);
+        }
+        document.removeEventListener("click", handleClick);
+        document.removeEventListener("submit", handleSubmit);
+      }
+    };
+  }
+  function requireString(value, fieldName) {
+    if (typeof value === "string" && value.trim().length > 0) {
+      return value.trim();
+    }
+    throw new Error(`Missing payload field: ${fieldName}`);
+  }
+  function requireNumber(value, fieldName) {
+    if (typeof value === "number" && Number.isFinite(value)) {
+      return value;
+    }
+    if (typeof value === "string" && value.trim().length > 0) {
+      const parsed = Number(value);
+      if (Number.isFinite(parsed)) {
+        return parsed;
+      }
+    }
+    throw new Error(`Invalid payload field: ${fieldName}`);
+  }
+  function asRecord(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+      return void 0;
+    }
+    return value;
+  }
+  async function runModuleAction(client, matchedAction) {
+    var _a;
+    const { definition, element } = matchedAction;
+    const action = readActionName(element, definition);
+    const payload = collectPayload(element, definition);
+    const releasePending = markPending(element);
+    dispatchModuleEvent(element, buildModuleEventName(definition.moduleName, "before"), {
+      module: definition.moduleName,
+      action,
+      element,
+      payload
+    });
+    try {
+      const result = await definition.execute(client, action, payload);
+      dispatchModuleEvent(element, buildModuleEventName(definition.moduleName, "after"), {
+        module: definition.moduleName,
+        action,
+        element,
+        payload,
+        result
+      });
+      const successEventKind = resolveSuccessEventKind(definition, action, result, payload);
+      const emittedSuffixes = /* @__PURE__ */ new Set();
+      if (successEventKind !== "none") {
+        emittedSuffixes.add(successEventKind);
+        dispatchModuleEvent(element, buildModuleEventName(definition.moduleName, successEventKind), {
+          module: definition.moduleName,
+          action,
+          element,
+          payload,
+          result
+        });
+      }
+      for (const suffix of ((_a = definition.getResultEventSuffixes) == null ? void 0 : _a.call(definition, action, result, payload)) ?? []) {
+        if (emittedSuffixes.has(suffix)) {
+          continue;
+        }
+        dispatchModuleEvent(element, buildModuleEventName(definition.moduleName, suffix), {
+          module: definition.moduleName,
+          action,
+          element,
+          payload,
+          result
+        });
+      }
+      await refreshTargets(element);
+    } catch (error) {
+      const errorDetail = normalizeError(error);
+      dispatchModuleEvent(element, buildModuleEventName(definition.moduleName, "error"), {
+        module: definition.moduleName,
+        action,
+        element,
+        payload,
+        error,
+        errorDetail
+      });
+      console.error(`[AltazionHtmx] ${definition.moduleName} action failed`, error);
+    } finally {
+      releasePending();
+    }
+  }
+  function findMatchedAction(target, modules) {
+    let current = target;
+    while (current) {
+      for (const definition of modules) {
+        if (current.hasAttribute(definition.actionAttribute)) {
+          return { definition, element: current };
+        }
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+  function readActionName(element, definition) {
+    const action = element.getAttribute(definition.actionAttribute);
+    if (!action) {
+      throw new Error(`Missing ${definition.actionAttribute} attribute`);
+    }
+    return definition.parseAction(action);
+  }
+  function collectPayload(element, definition) {
+    var _a;
+    const payload = {};
+    const form = element instanceof HTMLFormElement ? element : element.closest("form");
+    if (form) {
+      Object.assign(payload, formDataToObject(new FormData(form)));
+      mergeJsonValues(payload, form);
+      applyAttributePayload(payload, form, definition.payloadAttributes);
+      applyJsonAttributePayload(payload, form, definition.jsonPayloadAttributes);
+    }
+    mergeJsonValues(payload, element);
+    applyAttributePayload(payload, element, definition.payloadAttributes);
+    applyJsonAttributePayload(payload, element, definition.jsonPayloadAttributes);
+    applyPayloadAliases(payload, definition.payloadAliases);
+    (_a = definition.normalizePayload) == null ? void 0 : _a.call(definition, payload);
+    return payload;
+  }
+  function mergeJsonValues(payload, element) {
+    const values = readJsonValues(element, JSON_VALUES_ATTRIBUTE);
+    if (values) {
+      Object.assign(payload, values);
+    }
+  }
+  function applyAttributePayload(payload, element, attributes) {
+    if (!attributes) {
+      return;
+    }
+    for (const [attributeName, payloadKey] of Object.entries(attributes)) {
+      const value = element.getAttribute(attributeName);
+      if (value !== null) {
+        payload[payloadKey] = value;
+      }
+    }
+  }
+  function applyJsonAttributePayload(payload, element, attributes) {
+    if (!attributes) {
+      return;
+    }
+    for (const [attributeName, payloadKey] of Object.entries(attributes)) {
+      const value = readJsonValues(element, attributeName);
+      if (value !== void 0) {
+        payload[payloadKey] = value;
+      }
+    }
+  }
+  function applyPayloadAliases(payload, aliases) {
+    if (!aliases) {
+      return;
+    }
+    for (const [alias, canonicalKey] of Object.entries(aliases)) {
+      if (payload[alias] !== void 0 && payload[canonicalKey] === void 0) {
+        payload[canonicalKey] = payload[alias];
+      }
+    }
+  }
+  function formDataToObject(formData) {
+    const payload = {};
+    for (const [key, value] of formData.entries()) {
+      const normalizedValue = typeof value === "string" ? value : value.name;
+      const previous = payload[key];
+      if (previous === void 0) {
+        payload[key] = normalizedValue;
+      } else if (Array.isArray(previous)) {
+        previous.push(normalizedValue);
+      } else {
+        payload[key] = [previous, normalizedValue];
+      }
+    }
+    return payload;
+  }
+  function dispatchModuleEvent(element, eventName, detail) {
+    element.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      detail
+    }));
+  }
+  function buildModuleEventName(moduleName, suffix) {
+    return `altazion:${moduleName}:${suffix}`;
+  }
+  function resolveSuccessEventKind(definition, action, result, payload) {
+    const configuredKind = definition.successEventKind;
+    if (typeof configuredKind === "function") {
+      return configuredKind(action, result, payload);
+    }
+    if (configuredKind) {
+      return configuredKind;
+    }
+    return inferSuccessEventKind(action, result);
+  }
+  function inferSuccessEventKind(action, result) {
+    if (result === void 0) {
+      return "changed";
+    }
+    const normalizedAction = action.toLowerCase();
+    if (normalizedAction.startsWith("get") || normalizedAction.startsWith("find") || normalizedAction.startsWith("search") || normalizedAction.startsWith("suggest") || normalizedAction.startsWith("load") || normalizedAction.startsWith("list")) {
+      return "loaded";
+    }
+    return "updated";
+  }
+  function normalizeError(error) {
+    if (error instanceof commerceSdkCore.AltazionApiError) {
+      return {
+        name: error.name,
+        message: error.message,
+        status: error.status,
+        problem: error.problem,
+        isOffline: false,
+        isConflict: error.status === 409
+      };
+    }
+    if (error instanceof commerceSdkCore.OfflineError) {
+      return {
+        name: error.name,
+        message: error.message,
+        isOffline: true,
+        isConflict: false
+      };
+    }
+    if (error instanceof Error) {
+      return {
+        name: error.name,
+        message: error.message,
+        isOffline: false,
+        isConflict: false
+      };
+    }
+    return {
+      name: "UnknownError",
+      message: "Unknown error",
+      isOffline: false,
+      isConflict: false
+    };
+  }
+  async function refreshTargets(element) {
+    const targets = resolveRefreshTargets(element);
+    if (targets.length === 0) {
+      return;
+    }
+    await Promise.all(targets.map((target) => refreshTargetElement(element, target)));
+  }
+  function resolveRefreshTargets(element) {
+    if (typeof document === "undefined") {
+      return [];
+    }
+    const selectors = collectRefreshSelectors(element);
+    if (selectors.length === 0) {
+      return [];
+    }
+    const targets = /* @__PURE__ */ new Set();
+    for (const selector of selectors) {
+      try {
+        for (const target of document.querySelectorAll(selector)) {
+          targets.add(target);
+        }
+      } catch (error) {
+        console.error(`[AltazionHtmx] invalid refresh selector: ${selector}`, error);
+      }
+    }
+    return [...targets];
+  }
+  function collectRefreshSelectors(element) {
+    const values = /* @__PURE__ */ new Set();
+    const form = element instanceof HTMLFormElement ? element : element.closest("form");
+    addRefreshSelectors(values, form);
+    addRefreshSelectors(values, element);
+    return [...values];
+  }
+  function addRefreshSelectors(values, element) {
+    const rawValue = element == null ? void 0 : element.getAttribute(REFRESH_ATTRIBUTE);
+    if (!rawValue) {
+      return;
+    }
+    for (const selector of rawValue.split(";")) {
+      const trimmed = selector.trim();
+      if (trimmed.length > 0) {
+        values.add(trimmed);
+      }
+    }
+  }
+  async function refreshTargetElement(sourceElement, targetElement) {
+    var _a;
+    const request = readRefreshRequest(targetElement);
+    if (request && typeof window !== "undefined" && ((_a = window.htmx) == null ? void 0 : _a.ajax)) {
+      const context = {
+        source: sourceElement,
+        target: targetElement
+      };
+      const swap = targetElement.getAttribute("hx-swap");
+      if (swap) {
+        context.swap = swap;
+      }
+      const select = targetElement.getAttribute("hx-select");
+      if (select) {
+        context.select = select;
+      }
+      const values = readJsonValues(targetElement, JSON_VALUES_ATTRIBUTE);
+      if (values) {
+        context.values = values;
+      }
+      await Promise.resolve(window.htmx.ajax(request.method, request.path, context));
+      return;
+    }
+    targetElement.dispatchEvent(new CustomEvent(REFRESH_EVENT_NAME, {
+      bubbles: true,
+      detail: {
+        source: sourceElement,
+        target: targetElement
+      }
+    }));
+  }
+  function readRefreshRequest(element) {
+    for (const requestAttribute of REQUEST_ATTRIBUTES) {
+      const path = element.getAttribute(requestAttribute.attribute);
+      if (path) {
+        return {
+          method: requestAttribute.method,
+          path
+        };
+      }
+    }
+    return null;
+  }
+  function readJsonValues(element, attributeName) {
+    const raw = element.getAttribute(attributeName);
+    if (!raw) {
+      return void 0;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        return parsed;
+      }
+    } catch {
+      throw new Error(`Invalid JSON in ${attributeName}`);
+    }
+    return void 0;
+  }
+  function markPending(element) {
+    const previousBusy = element.getAttribute("aria-busy");
+    element.setAttribute("aria-busy", "true");
+    const disableable = isDisableableElement(element) ? element : null;
+    const previousDisabled = (disableable == null ? void 0 : disableable.disabled) ?? false;
+    if (disableable) {
+      disableable.disabled = true;
+    }
+    return () => {
+      if (previousBusy === null) {
+        element.removeAttribute("aria-busy");
+      } else {
+        element.setAttribute("aria-busy", previousBusy);
+      }
+      if (disableable) {
+        disableable.disabled = previousDisabled;
+      }
+    };
+  }
+  function isDisableableElement(element) {
+    return "disabled" in element;
+  }
+  function hasAltazionExtension(element) {
+    let current = element;
+    while (current) {
+      const extensions = current.getAttribute("hx-ext");
+      if (extensions && parseExtensions(extensions).includes(EXTENSION_NAME)) {
+        return true;
+      }
+      current = current.parentElement;
+    }
+    return false;
+  }
+  function parseExtensions(value) {
+    return value.split(/[\s,]+/).map((extension) => extension.trim()).filter((extension) => extension.length > 0);
+  }
+  const cartModuleDefinition = {
+    moduleName: "cart",
+    actionAttribute: "hx-altazion-cart-action",
+    payloadAttributes: {
+      "hx-altazion-cart-reference": "reference",
+      "hx-altazion-cart-quantity": "quantity",
+      "hx-altazion-cart-line-id": "lineId",
+      "hx-altazion-cart-code": "code"
+    },
+    jsonPayloadAttributes: {
+      "hx-altazion-cart-options": "options"
+    },
+    payloadAliases: {
+      ref: "reference",
+      productReference: "reference",
+      qty: "quantity",
+      line: "lineId",
+      coupon: "code"
+    },
+    parseAction(actionValue) {
+      switch (actionValue) {
+        case "getCart":
+        case "getValidationStatus":
+        case "addItem":
+        case "updateItem":
+        case "removeItem":
+        case "applyCoupon":
+        case "removeCoupon":
+          return actionValue;
+        default:
+          throw new Error(`Unsupported cart action: ${actionValue}`);
+      }
+    },
+    execute(client, action, payload) {
+      switch (action) {
+        case "getCart":
+          return client.cart.getCart();
+        case "getValidationStatus":
+          return client.cart.getValidationStatus();
+        case "addItem": {
+          const reference = requireString(payload.reference, "reference");
+          const quantity = requireNumber(payload.quantity, "quantity");
+          const options = buildAddItemOptions(payload);
+          return client.cart.addItem(reference, quantity, options);
+        }
+        case "updateItem": {
+          const lineId = requireString(payload.lineId, "lineId");
+          const quantity = requireNumber(payload.quantity, "quantity");
+          return client.cart.updateItem(lineId, quantity);
+        }
+        case "removeItem":
+          return client.cart.removeItem(requireString(payload.lineId, "lineId"));
+        case "applyCoupon":
+          return client.cart.applyCoupon(requireString(payload.code, "code"));
+        case "removeCoupon":
+          return client.cart.removeCoupon(requireString(payload.code, "code"));
+      }
+    },
+    successEventKind(action) {
+      switch (action) {
+        case "getCart":
+          return "loaded";
+        case "getValidationStatus":
+          return "none";
+        case "addItem":
+        case "updateItem":
+        case "removeItem":
+        case "applyCoupon":
+        case "removeCoupon":
+          return "updated";
+      }
+    },
+    getResultEventSuffixes(_action, result) {
+      return isCart(result) ? ["updated"] : ["status"];
+    }
+  };
+  function buildAddItemOptions(payload) {
+    const options = asRecord(payload.options);
+    const extraEntries = Object.entries(payload).filter(([key]) => ![
+      "reference",
+      "ref",
+      "productReference",
+      "quantity",
+      "qty",
+      "options"
+    ].includes(key));
+    if (extraEntries.length === 0 && !options) {
+      return void 0;
+    }
+    return {
+      ...Object.fromEntries(extraEntries),
+      ...options
+    };
+  }
+  function isCart(result) {
+    return "guid" in result;
   }
+  const sessionModuleDefinition = {
+    moduleName: "session",
+    actionAttribute: "hx-altazion-session-action",
+    parseAction(actionValue) {
+      switch (actionValue) {
+        case "getSession":
+          return actionValue;
+        default:
+          throw new Error(`Unsupported session action: ${actionValue}`);
+      }
+    },
+    execute(client, action) {
+      switch (action) {
+        case "getSession":
+          return client.session.getSession();
+      }
+    },
+    successEventKind() {
+      return "loaded";
+    }
+  };
+  const marketingModuleDefinition = {
+    moduleName: "marketing",
+    actionAttribute: "hx-altazion-marketing-action",
+    payloadAttributes: {
+      "hx-altazion-marketing-code": "code"
+    },
+    jsonPayloadAttributes: {
+      "hx-altazion-marketing-codes": "codes"
+    },
+    parseAction(actionValue) {
+      switch (actionValue) {
+        case "getItem":
+        case "getItems":
+          return actionValue;
+        default:
+          throw new Error(`Unsupported marketing action: ${actionValue}`);
+      }
+    },
+    execute(client, action, payload) {
+      switch (action) {
+        case "getItem":
+          return client.marketing.getItem(requireString(payload.code, "code"));
+        case "getItems":
+          return client.marketing.getItems(readCodes(payload));
+      }
+    },
+    successEventKind() {
+      return "loaded";
+    },
+    getResultEventSuffixes(action) {
+      switch (action) {
+        case "getItem":
+          return ["item-loaded"];
+        case "getItems":
+          return ["items-loaded"];
+      }
+    }
+  };
+  function readCodes(payload) {
+    const value = payload.codes;
+    if (Array.isArray(value)) {
+      const codes = value.filter((entry) => typeof entry === "string").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
+      if (codes.length > 0) {
+        return codes;
+      }
+    }
+    if (typeof value === "string") {
+      const codes = value.split(",").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
+      if (codes.length > 0) {
+        return codes;
+      }
+    }
+    if (typeof payload.code === "string" && payload.code.trim().length > 0) {
+      return [payload.code.trim()];
+    }
+    throw new Error("Missing payload field: codes");
+  }
+  const storesModuleDefinition = {
+    moduleName: "stores",
+    actionAttribute: "hx-altazion-stores-action",
+    payloadAttributes: {
+      "hx-altazion-stores-store-guid": "storeGuid",
+      "hx-altazion-stores-latitude": "latitude",
+      "hx-altazion-stores-longitude": "longitude",
+      "hx-altazion-stores-radius-km": "radiusKm",
+      "hx-altazion-stores-postal-code": "postalCode",
+      "hx-altazion-stores-country-code": "countryCode"
+    },
+    payloadAliases: {
+      lat: "latitude",
+      lon: "longitude",
+      lng: "longitude",
+      radius: "radiusKm",
+      storeId: "storeGuid",
+      id: "storeGuid",
+      postal: "postalCode",
+      country: "countryCode"
+    },
+    parseAction(actionValue) {
+      switch (actionValue) {
+        case "findByLocation":
+        case "findByPostalCode":
+        case "getStore":
+          return actionValue;
+        default:
+          throw new Error(`Unsupported stores action: ${actionValue}`);
+      }
+    },
+    execute(client, action, payload) {
+      switch (action) {
+        case "findByLocation": {
+          const latitude = requireNumber(payload.latitude, "latitude");
+          const longitude = requireNumber(payload.longitude, "longitude");
+          const radiusKm = payload.radiusKm === void 0 ? 50 : requireNumber(payload.radiusKm, "radiusKm");
+          return client.stores.findByLocation(latitude, longitude, radiusKm);
+        }
+        case "findByPostalCode": {
+          const postalCode = requireString(payload.postalCode, "postalCode");
+          const countryCode = payload.countryCode === void 0 ? "FR" : requireString(payload.countryCode, "countryCode");
+          return client.stores.findByPostalCode(postalCode, countryCode);
+        }
+        case "getStore":
+          return client.stores.getStore(requireString(payload.storeGuid, "storeGuid"));
+      }
+    },
+    successEventKind() {
+      return "loaded";
+    },
+    getResultEventSuffixes(action) {
+      switch (action) {
+        case "getStore":
+          return ["store-loaded"];
+        case "findByLocation":
+        case "findByPostalCode":
+          return ["stores-loaded"];
+      }
+    }
+  };
+  function registerAltazionExtension(client) {
+    return createAltazionExtension(client, [
+      cartModuleDefinition,
+      sessionModuleDefinition,
+      marketingModuleDefinition,
+      storesModuleDefinition
+    ]);
+  }
+  const registerAltazionAuthExtension = registerAltazionExtension;
   function registerPriceHelpers(hbs, defaults) {
     hbs.registerHelper(
       "formatPrice",
@@ -141,133 +820,153 @@ var AltazionCommerceSdkHtmx = function(exports) {
       }, 0);
     });
   }
-  const productCardTemplate = `<article class="altz-product-card{{#unless (isAvailable availability)}} altz-product-card--unavailable{{/unless}}">
-  {{#if imageUrl}}
-  <a href="{{productUrl reference}}" class="altz-product-card__image-link" aria-label="{{name}}">
-    <img
-      src="{{thumbnailUrl imageUrl 400}}"
-      alt="{{name}}"
-      class="altz-product-card__image"
-      loading="lazy"
-      width="400"
-    />
-  </a>
-  {{/if}}
-
-  <div class="altz-product-card__body">
-    <a href="{{productUrl reference}}" class="altz-product-card__title">
-      {{name}}
-    </a>
-
-    <div class="altz-product-card__pricing">
-      {{#if discount}}
-      <span class="altz-product-card__price altz-product-card__price--discounted">
-        {{formatPrice price}}
-      </span>
-      <span class="altz-product-card__price altz-product-card__price--original">
-        {{formatPrice originalPrice}}
-      </span>
-      <span class="altz-product-card__discount-badge">
-        {{discountPercent originalPrice price}}
-      </span>
-      {{else}}
-      <span class="altz-product-card__price">
-        {{formatPrice price}}
-      </span>
-      {{/if}}
-    </div>
-
-    {{#unless (isAvailable availability)}}
-    <p class="altz-product-card__unavailable">{{unavailableLabel}}</p>
-    {{/unless}}
-
-    {{#if (isAvailable availability)}}
-    <button
-      class="altz-product-card__add-to-cart"
-      hx-post="/commerce/api/process/cart/lines"
-      hx-vals='{"productReference":"{{reference}}","quantity":1}'
-      hx-target="#altz-cart-summary"
-      hx-swap="outerHTML"
-      hx-indicator=".altz-spinner"
-    >
-      {{addToCartLabel}}
-    </button>
-    {{/if}}
-  </div>
-</article>
-`;
+  const DATA_SOURCE_ATTRIBUTE = "hx-altazion-data-source";
+  const DATA_STATUS_ATTRIBUTE = "hx-altazion-data-status";
+  const RENDER_TEMPLATE_ATTRIBUTE = "hx-render-template";
+  const DATA_SOURCE_ALIASES = {
+    cart: "cart",
+    session: "session",
+    store: "store",
+    stores: "stores",
+    "marketing-item": "marketingItem",
+    "marketing-items": "marketingItems"
+  };
+  function createAltazionDeclarativeRenderer(handlebars) {
+    const state = {
+      cart: null,
+      session: null,
+      store: null,
+      stores: [],
+      marketingItem: null,
+      marketingItems: [],
+      slots: {}
+    };
+    const templateCache = /* @__PURE__ */ new Map();
+    const render = () => {
+      if (typeof document === "undefined") {
+        return;
+      }
+      for (const element of document.querySelectorAll(`[${DATA_SOURCE_ATTRIBUTE}]`)) {
+        const rawSource = element.getAttribute(DATA_SOURCE_ATTRIBUTE);
+        const source = resolveDataSource(rawSource);
+        if (!source) {
+          continue;
+        }
+        const rawStatus = element.getAttribute(DATA_STATUS_ATTRIBUTE);
+        const sourceValue = resolveSourceValue(state, source);
+        const isVisible = matchesStatus(rawStatus, sourceValue);
+        applyVisibility(element, isVisible);
+        renderElementTemplate(element, isVisible, state, sourceValue, handlebars, templateCache);
+      }
+    };
+    return {
+      update(key, value) {
+        state[key] = value;
+        render();
+      },
+      updateSlot(name, value) {
+        state.slots[name] = value;
+        render();
+      },
+      render,
+      dispose() {
+        templateCache.clear();
+      }
+    };
+  }
+  function matchesStatus(status, value) {
+    if (Array.isArray(value)) {
+      switch (status) {
+        case "empty":
+          return value.length === 0;
+        case "not-empty":
+          return value.length > 0;
+        default:
+          return true;
+      }
+    }
+    switch (status) {
+      case "null":
+        return value == null;
+      case "not-null":
+        return value != null;
+      default:
+        return true;
+    }
+  }
+  function resolveDataSource(source) {
+    if (!source) {
+      return null;
+    }
+    if (source.startsWith("slot:")) {
+      const slotKey = source.slice(5).trim();
+      return slotKey.length > 0 ? { kind: "slot", key: slotKey } : null;
+    }
+    const resolvedKey = DATA_SOURCE_ALIASES[source];
+    return resolvedKey ? { kind: "state", key: resolvedKey } : null;
+  }
+  function resolveSourceValue(state, source) {
+    if (source.kind === "slot") {
+      return state.slots[source.key] ?? null;
+    }
+    return state[source.key];
+  }
+  function applyVisibility(element, isVisible) {
+    element.setAttribute("aria-hidden", isVisible ? "false" : "true");
+    if (element instanceof HTMLElement) {
+      element.hidden = !isVisible;
+    } else if (isVisible) {
+      element.removeAttribute("hidden");
+    } else {
+      element.setAttribute("hidden", "");
+    }
+  }
+  function renderElementTemplate(element, isVisible, state, sourceValue, handlebars, templateCache) {
+    if (!isVisible || !element.hasAttribute(RENDER_TEMPLATE_ATTRIBUTE) || !handlebars) {
+      return;
+    }
+    const templateId = element.getAttribute(RENDER_TEMPLATE_ATTRIBUTE);
+    if (!templateId) {
+      return;
+    }
+    const template = resolveTemplate(templateId, handlebars, templateCache);
+    if (!template) {
+      return;
+    }
+    element.innerHTML = template({
+      ...state,
+      slot: sourceValue
+    });
+  }
+  function resolveTemplate(templateId, handlebars, templateCache) {
+    const cached = templateCache.get(templateId);
+    if (cached) {
+      return cached;
+    }
+    if (typeof document === "undefined") {
+      return null;
+    }
+    const templateElement = document.getElementById(templateId);
+    if (!templateElement) {
+      console.warn(`[AltazionHtmx] Template not found: ${templateId}`);
+      return null;
+    }
+    const compiled = handlebars.compile(templateElement.innerHTML);
+    templateCache.set(templateId, compiled);
+    return compiled;
+  }
+  const productCardTemplate = '<article class="altz-product-card{{#unless (isAvailable availability)}} altz-product-card--unavailable{{/unless}}">\n  {{#if imageUrl}}\n  <a href="{{productUrl reference}}" class="altz-product-card__image-link" aria-label="{{name}}">\n    <img\n      src="{{thumbnailUrl imageUrl 400}}"\n      alt="{{name}}"\n      class="altz-product-card__image"\n      loading="lazy"\n      width="400"\n    />\n  </a>\n  {{/if}}\n\n  <div class="altz-product-card__body">\n    <a href="{{productUrl reference}}" class="altz-product-card__title">\n      {{name}}\n    </a>\n\n    <div class="altz-product-card__pricing">\n      {{#if discount}}\n      <span class="altz-product-card__price altz-product-card__price--discounted">\n        {{formatPrice price}}\n      </span>\n      <span class="altz-product-card__price altz-product-card__price--original">\n        {{formatPrice originalPrice}}\n      </span>\n      <span class="altz-product-card__discount-badge">\n        {{discountPercent originalPrice price}}\n      </span>\n      {{else}}\n      <span class="altz-product-card__price">\n        {{formatPrice price}}\n      </span>\n      {{/if}}\n    </div>\n\n    {{#unless (isAvailable availability)}}\n    <p class="altz-product-card__unavailable">{{unavailableLabel}}</p>\n    {{/unless}}\n\n    {{#if (isAvailable availability)}}\n    <button\n      class="altz-product-card__add-to-cart"\n      hx-ext="altazion"\n      hx-altazion-cart-action="addItem"\n      hx-altazion-cart-reference="{{reference}}"\n      hx-altazion-cart-quantity="1"\n      hx-altazion-refresh="#altz-cart-mini"\n      hx-indicator=".altz-spinner"\n    >\n      {{addToCartLabel}}\n    </button>\n    {{/if}}\n  </div>\n</article>\n';
   const cartMiniTemplate = '<div id="altz-cart-mini" class="altz-cart-mini">\n  <div class="altz-cart-mini__header">\n    <span class="altz-cart-mini__label">{{cartLabel}}</span>\n    <span class="altz-cart-mini__count">{{cartCount}}</span>\n  </div>\n\n  {{#cartHasItems}}\n  <ul class="altz-cart-mini__lines">\n    {{#each lines}}\n    <li class="altz-cart-mini__line">\n      <span class="altz-cart-mini__line-name">{{this.productName}}</span>\n      <span class="altz-cart-mini__line-qty">× {{this.quantity}}</span>\n      <span class="altz-cart-mini__line-price">{{formatPrice this.unitPriceWithTax}}</span>\n    </li>\n    {{/each}}\n  </ul>\n\n  <div class="altz-cart-mini__total">\n    <span>{{totalLabel}}</span>\n    <strong>{{cartTotal}}</strong>\n  </div>\n\n  <a href="{{cartUrl}}" class="altz-cart-mini__cta">\n    {{viewCartLabel}}\n  </a>\n  {{/cartHasItems}}\n\n  {{^cartHasItems}}\n  <p class="altz-cart-mini__empty">{{emptyLabel}}</p>\n  {{/cartHasItems}}\n</div>\n';
-  const productListTemplate = `<section class="altz-product-list">
-  {{#if title}}
-  <h2 class="altz-product-list__title">{{title}}</h2>
-  {{/if}}
-
-  {{#if products.length}}
-  <ul class="altz-product-list__grid" role="list">
-    {{#each products}}
-    <li class="altz-product-list__item">
-      <article class="altz-product-card{{#unless (isAvailable this.availability)}} altz-product-card--unavailable{{/unless}}">
-        {{#if this.imageUrl}}
-        <a href="{{productUrl this.reference}}" class="altz-product-card__image-link" aria-label="{{this.name}}">
-          <img
-            src="{{thumbnailUrl this.imageUrl 300}}"
-            alt="{{this.name}}"
-            class="altz-product-card__image"
-            loading="lazy"
-            width="300"
-          />
-        </a>
-        {{/if}}
-
-        <div class="altz-product-card__body">
-          <a href="{{productUrl this.reference}}" class="altz-product-card__title">
-            {{this.name}}
-          </a>
-
-          <div class="altz-product-card__pricing">
-            {{#if this.discount}}
-            <span class="altz-product-card__price altz-product-card__price--discounted">
-              {{formatPrice this.price}}
-            </span>
-            <span class="altz-product-card__price altz-product-card__price--original">
-              {{formatPrice this.originalPrice}}
-            </span>
-            <span class="altz-product-card__discount-badge">
-              {{discountPercent this.originalPrice this.price}}
-            </span>
-            {{else}}
-            <span class="altz-product-card__price">
-              {{formatPrice this.price}}
-            </span>
-            {{/if}}
-          </div>
-
-          {{#if (isAvailable this.availability)}}
-          <button
-            class="altz-product-card__add-to-cart"
-            hx-post="/commerce/api/process/cart/lines"
-            hx-vals='{"productReference":"{{this.reference}}","quantity":1}'
-            hx-target="#altz-cart-summary"
-            hx-swap="outerHTML"
-            hx-indicator=".altz-spinner"
-          >
-            {{../addToCartLabel}}
-          </button>
-          {{/if}}
-        </div>
-      </article>
-    </li>
-    {{/each}}
-  </ul>
-  {{else}}
-  <p class="altz-product-list__empty">{{emptyLabel}}</p>
-  {{/if}}
-</section>
-`;
-  function init(config) {
+  const productListTemplate = '<section class="altz-product-list">\n  {{#if title}}\n  <h2 class="altz-product-list__title">{{title}}</h2>\n  {{/if}}\n\n  {{#if products.length}}\n  <ul class="altz-product-list__grid" role="list">\n    {{#each products}}\n    <li class="altz-product-list__item">\n      <article class="altz-product-card{{#unless (isAvailable this.availability)}} altz-product-card--unavailable{{/unless}}">\n        {{#if this.imageUrl}}\n        <a href="{{productUrl this.reference}}" class="altz-product-card__image-link" aria-label="{{this.name}}">\n          <img\n            src="{{thumbnailUrl this.imageUrl 300}}"\n            alt="{{this.name}}"\n            class="altz-product-card__image"\n            loading="lazy"\n            width="300"\n          />\n        </a>\n        {{/if}}\n\n        <div class="altz-product-card__body">\n          <a href="{{productUrl this.reference}}" class="altz-product-card__title">\n            {{this.name}}\n          </a>\n\n          <div class="altz-product-card__pricing">\n            {{#if this.discount}}\n            <span class="altz-product-card__price altz-product-card__price--discounted">\n              {{formatPrice this.price}}\n            </span>\n            <span class="altz-product-card__price altz-product-card__price--original">\n              {{formatPrice this.originalPrice}}\n            </span>\n            <span class="altz-product-card__discount-badge">\n              {{discountPercent this.originalPrice this.price}}\n            </span>\n            {{else}}\n            <span class="altz-product-card__price">\n              {{formatPrice this.price}}\n            </span>\n            {{/if}}\n          </div>\n\n          {{#if (isAvailable this.availability)}}\n          <button\n            class="altz-product-card__add-to-cart"\n            hx-ext="altazion"\n            hx-altazion-cart-action="addItem"\n            hx-altazion-cart-reference="{{this.reference}}"\n            hx-altazion-cart-quantity="1"\n            hx-altazion-refresh="#altz-cart-mini"\n            hx-indicator=".altz-spinner"\n          >\n            {{../addToCartLabel}}\n          </button>\n          {{/if}}\n        </div>\n      </article>\n    </li>\n    {{/each}}\n  </ul>\n  {{else}}\n  <p class="altz-product-list__empty">{{emptyLabel}}</p>\n  {{/if}}\n</section>\n';
+  function initAltazionHtmx(config) {
     var _a;
-    const { client, handlebars, offlineSelector = "body" } = config;
-    registerAltazionAuthExtension(client);
+    const {
+      client,
+      handlebars,
+      offlineSelector = "body",
+      terminalMode
+    } = config;
+    const extensionHandle = registerAltazionExtension(client);
     if (typeof window !== "undefined" && window.htmx) {
       window.htmx.config = window.htmx.config ?? {};
       window.htmx.config.withCredentials = true;
@@ -276,24 +975,91 @@ var AltazionCommerceSdkHtmx = function(exports) {
       locale: client.context.locale,
       currency: client.context.currency
     };
+    const handlebarsRuntime = handlebars ?? (typeof window !== "undefined" ? window.Handlebars : void 0);
+    const declarativeRenderer = createAltazionDeclarativeRenderer(handlebarsRuntime);
+    const syncSlotFromEvent = (detail) => {
+      var _a2;
+      const slotName = (_a2 = detail.element.getAttribute("hx-altazion-data-slot")) == null ? void 0 : _a2.trim();
+      if (!slotName) {
+        return;
+      }
+      declarativeRenderer.updateSlot(slotName, detail.result ?? null);
+    };
     let currentCart = null;
     const getCart = () => currentCart;
-    client.onQueueEvent(async (event) => {
-      if (event.type === "flushed") {
-        try {
-          currentCart = await client.cart.getCart();
-        } catch {
-        }
+    const syncCartFromEvent = (event) => {
+      const customEvent = event;
+      if (customEvent.detail.result) {
+        currentCart = customEvent.detail.result;
+        declarativeRenderer.update("cart", currentCart);
       }
+      syncSlotFromEvent(customEvent.detail);
+    };
+    const syncSessionFromEvent = (event) => {
+      const customEvent = event;
+      declarativeRenderer.update("session", customEvent.detail.result ?? null);
+      syncSlotFromEvent(customEvent.detail);
+    };
+    const syncStoreFromEvent = (event) => {
+      const customEvent = event;
+      declarativeRenderer.update("store", customEvent.detail.result ?? null);
+      syncSlotFromEvent(customEvent.detail);
+    };
+    const syncStoresFromEvent = (event) => {
+      const customEvent = event;
+      declarativeRenderer.update("stores", Array.isArray(customEvent.detail.result) ? customEvent.detail.result : []);
+      syncSlotFromEvent(customEvent.detail);
+    };
+    const syncMarketingItemFromEvent = (event) => {
+      const customEvent = event;
+      declarativeRenderer.update("marketingItem", Array.isArray(customEvent.detail.result) ? null : customEvent.detail.result ?? null);
+      syncSlotFromEvent(customEvent.detail);
+    };
+    const syncMarketingItemsFromEvent = (event) => {
+      const customEvent = event;
+      declarativeRenderer.update("marketingItems", Array.isArray(customEvent.detail.result) ? customEvent.detail.result : []);
+      syncSlotFromEvent(customEvent.detail);
+    };
+    if (typeof document !== "undefined") {
+      document.addEventListener("altazion:cart:loaded", syncCartFromEvent);
+      document.addEventListener("altazion:cart:updated", syncCartFromEvent);
+      document.addEventListener("altazion:session:loaded", syncSessionFromEvent);
+      document.addEventListener("altazion:stores:store-loaded", syncStoreFromEvent);
+      document.addEventListener("altazion:stores:stores-loaded", syncStoresFromEvent);
+      document.addEventListener("altazion:marketing:item-loaded", syncMarketingItemFromEvent);
+      document.addEventListener("altazion:marketing:items-loaded", syncMarketingItemsFromEvent);
+    }
+    void client.cart.getCart().then((cart) => {
+      currentCart = cart;
+      declarativeRenderer.update("cart", cart);
+    }).catch(() => {
     });
     if (handlebars) {
       registerPriceHelpers(handlebars, defaults);
       registerProductHelpers(handlebars, client.context.siteUrl ?? "");
       registerCartHelpers(handlebars, getCart, defaults);
     }
-    const offlineEl = typeof document !== "undefined" ? document.querySelector(offlineSelector) : null;
+    declarativeRenderer.render();
+    const offlineEl = typeof document !== "undefined" ? document.querySelector(offlineSelector) ?? document.body : null;
+    let lastConnectivityStatus = null;
     const updateOfflineClass = () => {
-      offlineEl == null ? void 0 : offlineEl.classList.toggle("altz-offline", client.isOffline);
+      if (!offlineEl) {
+        return;
+      }
+      const status = client.isOffline ? "offline" : "online";
+      const isOffline = status === "offline";
+      offlineEl.classList.toggle("altz-offline", isOffline);
+      offlineEl.classList.toggle("altz-terminal-offline", isOffline);
+      offlineEl.classList.toggle("altz-terminal-online", !isOffline);
+      offlineEl.setAttribute("data-altazion-terminal-state", status);
+      updateManagedVisibility(resolveManagedElements(terminalMode == null ? void 0 : terminalMode.interactiveSelectors), isOffline, "altz-terminal-interactive-hidden");
+      updateManagedVisibility(resolveManagedElements(terminalMode == null ? void 0 : terminalMode.offlineScreenSelectors), !isOffline, "altz-terminal-offline-screen-hidden");
+      if (lastConnectivityStatus === status) {
+        return;
+      }
+      lastConnectivityStatus = status;
+      dispatchConnectivityEvent(offlineEl, "altazion:connectivity:changed", status);
+      dispatchConnectivityEvent(offlineEl, isOffline ? "altazion:offline" : "altazion:online", status);
     };
     updateOfflineClass();
     const unsubscribeConnectivity = (_a = client.connectivity) == null ? void 0 : _a.subscribe(() => updateOfflineClass());
@@ -310,16 +1076,74 @@ var AltazionCommerceSdkHtmx = function(exports) {
     return {
       templates,
       dispose() {
+        extensionHandle.dispose();
+        if (typeof document !== "undefined") {
+          document.removeEventListener("altazion:cart:loaded", syncCartFromEvent);
+          document.removeEventListener("altazion:cart:updated", syncCartFromEvent);
+          document.removeEventListener("altazion:session:loaded", syncSessionFromEvent);
+          document.removeEventListener("altazion:stores:store-loaded", syncStoreFromEvent);
+          document.removeEventListener("altazion:stores:stores-loaded", syncStoresFromEvent);
+          document.removeEventListener("altazion:marketing:item-loaded", syncMarketingItemFromEvent);
+          document.removeEventListener("altazion:marketing:items-loaded", syncMarketingItemsFromEvent);
+        }
+        declarativeRenderer.dispose();
         unsubscribeConnectivity == null ? void 0 : unsubscribeConnectivity();
       }
     };
   }
+  const init = initAltazionHtmx;
+  function resolveManagedElements(selectorInput) {
+    if (typeof document === "undefined" || !selectorInput) {
+      return [];
+    }
+    const selectors = Array.isArray(selectorInput) ? selectorInput : [selectorInput];
+    const elements = /* @__PURE__ */ new Set();
+    for (const selector of selectors) {
+      if (!selector.trim()) {
+        continue;
+      }
+      try {
+        for (const element of document.querySelectorAll(selector)) {
+          elements.add(element);
+        }
+      } catch {
+      }
+    }
+    return [...elements];
+  }
+  function updateManagedVisibility(elements, hidden, hiddenClassName) {
+    for (const element of elements) {
+      element.classList.toggle(hiddenClassName, hidden);
+      element.setAttribute("aria-hidden", hidden ? "true" : "false");
+      if (element instanceof HTMLElement) {
+        element.hidden = hidden;
+      } else if (hidden) {
+        element.setAttribute("hidden", "");
+      } else {
+        element.removeAttribute("hidden");
+      }
+    }
+  }
+  function dispatchConnectivityEvent(root, eventName, status) {
+    const detail = {
+      status,
+      isOnline: status === "online",
+      isOffline: status === "offline",
+      root
+    };
+    root.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      detail
+    }));
+  }
   exports.init = init;
+  exports.initAltazionHtmx = initAltazionHtmx;
   exports.registerAltazionAuthExtension = registerAltazionAuthExtension;
+  exports.registerAltazionExtension = registerAltazionExtension;
   exports.registerCartHelpers = registerCartHelpers;
   exports.registerPriceHelpers = registerPriceHelpers;
   exports.registerProductHelpers = registerProductHelpers;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
   return exports;
-}({});
+}({}, AltazionCommerceCore);
 //# sourceMappingURL=index.iife.js.map