@altazion/commerce-sdk-htmx 26.409.7573 → 26.415.7673

package/dist/index.js

@@ -1,15 +1,695 @@
-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) => {
+import { AltazionApiError, OfflineError } from "@altazion/commerce-sdk-core";
+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 AltazionApiError) {
+    return {
+      name: error.name,
+      message: error.message,
+      status: error.status,
+      problem: error.problem,
+      isOffline: false,
+      isConflict: error.status === 409
+    };
+  }
+  if (error instanceof 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",
@@ -139,133 +819,153 @@ function registerCartHelpers(hbs, getCart, defaults) {
     }, 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;
@@ -274,24 +974,91 @@ function init(config) {
     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());
@@ -308,13 +1075,71 @@ function init(config) {
   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
+  }));
+}
 export {
   init,
+  initAltazionHtmx,
   registerAltazionAuthExtension,
+  registerAltazionExtension,
   registerCartHelpers,
   registerPriceHelpers,
   registerProductHelpers