@onlistify/storefront 0.1.0

package/dist/index.cjs

@@ -0,0 +1,787 @@
+'use strict';
+
+var mobx = require('mobx');
+var R = require('ramda');
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var R__namespace = /*#__PURE__*/_interopNamespace(R);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var FilterStore = class {
+  constructor() {
+    __publicField(this, "minPrice", null);
+    __publicField(this, "maxPrice", null);
+    __publicField(this, "transactionTypeId", null);
+    __publicField(this, "propertyTypeId", null);
+    __publicField(this, "cityId", null);
+    __publicField(this, "stateId", null);
+    __publicField(this, "neighborhoodId", null);
+    __publicField(this, "bedroomsMin", null);
+    __publicField(this, "bathroomsMin", null);
+    __publicField(this, "builtAreaMin", null);
+    __publicField(this, "builtAreaMax", null);
+    __publicField(this, "sort", "newest");
+    __publicField(this, "search", "");
+    __publicField(this, "page", 1);
+    __publicField(this, "perPage", 20);
+    mobx.makeAutoObservable(this);
+  }
+  get queryParams() {
+    const pairs = [
+      ["page", this.page],
+      ["per_page", this.perPage],
+      ["sort", this.sort]
+    ];
+    if (this.minPrice != null) pairs.push(["min_price", this.minPrice]);
+    if (this.maxPrice != null) pairs.push(["max_price", this.maxPrice]);
+    if (this.transactionTypeId) pairs.push(["transaction_type_id", this.transactionTypeId]);
+    if (this.propertyTypeId) pairs.push(["property_type_id", this.propertyTypeId]);
+    if (this.cityId) pairs.push(["city_id", this.cityId]);
+    if (this.stateId) pairs.push(["state_id", this.stateId]);
+    if (this.neighborhoodId) pairs.push(["neighborhood_id", this.neighborhoodId]);
+    if (this.bedroomsMin != null) pairs.push(["bedrooms_min", this.bedroomsMin]);
+    if (this.bathroomsMin != null) pairs.push(["bathrooms_min", this.bathroomsMin]);
+    if (this.builtAreaMin != null) pairs.push(["built_area_min", this.builtAreaMin]);
+    if (this.builtAreaMax != null) pairs.push(["built_area_max", this.builtAreaMax]);
+    if (this.search.trim()) pairs.push(["search", this.search.trim()]);
+    return Object.fromEntries(pairs);
+  }
+  setFilters(partial) {
+    if (partial.page !== void 0) this.page = partial.page;
+    if (partial.minPrice !== void 0) this.minPrice = partial.minPrice;
+    if (partial.maxPrice !== void 0) this.maxPrice = partial.maxPrice;
+    if (partial.transactionTypeId !== void 0) this.transactionTypeId = partial.transactionTypeId;
+    if (partial.propertyTypeId !== void 0) this.propertyTypeId = partial.propertyTypeId;
+    if (partial.cityId !== void 0) this.cityId = partial.cityId;
+    if (partial.stateId !== void 0) this.stateId = partial.stateId;
+    if (partial.neighborhoodId !== void 0) this.neighborhoodId = partial.neighborhoodId;
+    if (partial.bedroomsMin !== void 0) this.bedroomsMin = partial.bedroomsMin;
+    if (partial.bathroomsMin !== void 0) this.bathroomsMin = partial.bathroomsMin;
+    if (partial.builtAreaMin !== void 0) this.builtAreaMin = partial.builtAreaMin;
+    if (partial.builtAreaMax !== void 0) this.builtAreaMax = partial.builtAreaMax;
+    if (partial.sort !== void 0) this.sort = partial.sort;
+    if (partial.search !== void 0) this.search = partial.search;
+    if (partial.perPage !== void 0) this.perPage = partial.perPage;
+    this.page = 1;
+  }
+  setPage(n) {
+    this.page = n;
+  }
+};
+
+// ../shared/site-contract/src/index.ts
+var DEFAULT_SITE_THEME = {
+  primaryColor: "#1a365d",
+  accentColor: "#2b6cb0"};
+var DEFAULT_HERO_BLOCK = {
+  id: "hero-1",
+  type: "onl-hero",
+  props: {
+    title: "Bienvenido a tu inmobiliaria",
+    subtitle: "Encuentra tu pr\xF3ximo hogar",
+    ctaText: "Ver propiedades",
+    ctaUrl: "#",
+    backgroundColor: "#1a365d",
+    textColor: "#fff"
+  }
+};
+function isRecord(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function normalizeBlock(block) {
+  if (!isRecord(block)) {
+    return { id: "", type: "", props: {} };
+  }
+  return {
+    id: typeof block.id === "string" ? block.id : "",
+    type: typeof block.type === "string" ? block.type : "",
+    props: isRecord(block.props) ? block.props : {}
+  };
+}
+function normalizePage(page) {
+  if (!isRecord(page)) {
+    return { id: "", path: "/", blocks: [] };
+  }
+  return {
+    id: typeof page.id === "string" ? page.id : "",
+    path: typeof page.path === "string" ? page.path : "/",
+    blocks: Array.isArray(page.blocks) ? page.blocks.map((block) => normalizeBlock(block)) : []
+  };
+}
+function extractSiteObject(raw) {
+  if (!isRecord(raw)) {
+    return raw;
+  }
+  if (raw.data !== void 0) {
+    return extractSiteObject(raw.data);
+  }
+  return raw;
+}
+function normalizeSiteConfig(raw) {
+  const source = extractSiteObject(raw);
+  if (!isRecord(source)) {
+    return { version: 1, pages: [] };
+  }
+  const pages = Array.isArray(source.pages) ? source.pages.map((page) => normalizePage(page)) : [];
+  return {
+    version: typeof source.version === "number" ? source.version : 1,
+    theme: isRecord(source.theme) ? source.theme : void 0,
+    themeOverrides: isRecord(source.themeOverrides) ? source.themeOverrides : void 0,
+    pages
+  };
+}
+function createDefaultHeroBlock() {
+  return {
+    ...DEFAULT_HERO_BLOCK,
+    props: { ...DEFAULT_HERO_BLOCK.props }
+  };
+}
+function getPrimaryPage(config) {
+  const pages = config.pages ?? [];
+  return pages.find((page) => page.path === "/" || page.id === "listado") ?? pages[0];
+}
+function getPageBlocks(config) {
+  return getPrimaryPage(config)?.blocks ?? [];
+}
+function ensureDefaultHeroInConfig(config) {
+  const pages = config.pages ?? [];
+  if (!pages.length) {
+    return {
+      ...config,
+      version: config.version ?? 1,
+      pages: [{ id: "listado", path: "/", blocks: [createDefaultHeroBlock()] }]
+    };
+  }
+  const first = pages[0];
+  const blocks = first.blocks ?? [];
+  if (blocks.some((block) => block.type === "onl-hero")) {
+    return {
+      ...config,
+      version: config.version ?? 1,
+      pages
+    };
+  }
+  return {
+    ...config,
+    version: config.version ?? 1,
+    pages: [{ ...first, blocks: [createDefaultHeroBlock(), ...blocks] }, ...pages.slice(1)]
+  };
+}
+function getPropiedadCardProps(config) {
+  const block = getPageBlocks(config).find((item) => item.type === "propiedad-card");
+  return block?.props ?? {};
+}
+function resolveSiteTheme(config) {
+  const theme = config.theme ?? {};
+  const overrides = config.themeOverrides ?? {};
+  return {
+    primaryColor: overrides.primaryColor ?? theme.primaryColor ?? DEFAULT_SITE_THEME.primaryColor,
+    accentColor: overrides.accentColor ?? theme.accentColor ?? DEFAULT_SITE_THEME.accentColor,
+    logoUrl: theme.logoUrl,
+    customCssVars: theme.customCssVars ?? {}
+  };
+}
+
+// src/config.ts
+var apiBaseUrl = "";
+function setApiBase(url) {
+  apiBaseUrl = url;
+}
+function getApiBase() {
+  if (apiBaseUrl) return apiBaseUrl;
+  if (typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)) }) !== "undefined" && undefined?.VITE_PUBLIC_API_URL) {
+    return String(undefined.VITE_PUBLIC_API_URL);
+  }
+  return "";
+}
+
+// src/sdk/errors.ts
+var StorefrontConfigError = class _StorefrontConfigError extends Error {
+  /** @param message Human-readable message. @param status Optional HTTP status when error comes from API. */
+  constructor(message, status) {
+    super(message);
+    this.status = status;
+    __publicField(this, "code", "STOREFRONT_CONFIG_ERROR");
+    this.name = "StorefrontConfigError";
+    Object.setPrototypeOf(this, _StorefrontConfigError.prototype);
+  }
+};
+var StorefrontNetworkError = class _StorefrontNetworkError extends Error {
+  /** @param message Human-readable message. @param cause Original error (e.g. fetch failure). */
+  constructor(message, cause) {
+    super(message);
+    this.cause = cause;
+    __publicField(this, "code", "STOREFRONT_NETWORK_ERROR");
+    this.name = "StorefrontNetworkError";
+    Object.setPrototypeOf(this, _StorefrontNetworkError.prototype);
+  }
+};
+
+// src/api.ts
+async function fetchSiteConfig(slug, environment = "live") {
+  const base = getApiBase();
+  const url = `${base}/api/v1/public/tenants/${encodeURIComponent(slug)}/site-config?environment=${environment}`;
+  let res;
+  try {
+    res = await fetch(url);
+  } catch (err) {
+    throw new StorefrontNetworkError(`site-config: request failed`, err);
+  }
+  if (!res.ok) throw new StorefrontConfigError(`site-config: ${res.status}`, res.status);
+  const json = await res.json();
+  return { data: normalizeSiteConfig(json) };
+}
+async function fetchProperties(slug, params = {}) {
+  const base = getApiBase();
+  const q = new URLSearchParams();
+  Object.entries(params).forEach(([k, v]) => {
+    if (v !== void 0 && v !== null && v !== "") q.set(k, String(v));
+  });
+  let res;
+  try {
+    res = await fetch(
+      `${base}/api/v1/public/tenants/${encodeURIComponent(slug)}/properties?${q.toString()}`
+    );
+  } catch (err) {
+    throw new StorefrontNetworkError(`properties: request failed`, err);
+  }
+  if (!res.ok) throw new StorefrontConfigError(`properties: ${res.status}`, res.status);
+  return res.json();
+}
+async function fetchPlugins(slug) {
+  const base = getApiBase();
+  let res;
+  try {
+    res = await fetch(`${base}/api/v1/public/tenants/${encodeURIComponent(slug)}/plugins`);
+  } catch {
+    return { data: [] };
+  }
+  if (!res.ok) return { data: [] };
+  const json = await res.json();
+  const list = Array.isArray(json?.data) ? json.data : [];
+  return { data: list };
+}
+
+// src/stores/list-store.ts
+var ListStore = class {
+  constructor(slug, filterStore) {
+    this.slug = slug;
+    this.filterStore = filterStore;
+    __publicField(this, "items", []);
+    __publicField(this, "totalCount", 0);
+    __publicField(this, "loading", false);
+    __publicField(this, "error", null);
+    mobx.makeAutoObservable(this);
+  }
+  setSlug(slug) {
+    this.slug = slug;
+  }
+  async fetchPage() {
+    if (!this.slug) return;
+    mobx.runInAction(() => {
+      this.loading = true;
+      this.error = null;
+    });
+    try {
+      const params = this.filterStore.queryParams;
+      const res = await fetchProperties(this.slug, params);
+      const payload = res;
+      let raw = [];
+      if (Array.isArray(payload.data)) {
+        raw = payload.data;
+      } else if (payload.data && typeof payload.data === "object" && Array.isArray(payload.data.data)) {
+        raw = payload.data.data;
+      }
+      const inner = payload.data && typeof payload.data === "object" && !Array.isArray(payload.data) ? payload.data : null;
+      const pag = payload.pagination ?? inner?.pagination ?? void 0;
+      const total = pag?.total ?? payload.meta?.total ?? raw.length;
+      const list = Array.isArray(raw) ? raw : [];
+      const items = R__namespace.map((p) => ({ ...p }), list);
+      mobx.runInAction(() => {
+        this.items = items;
+        this.totalCount = total > 0 ? total : items.length;
+      });
+    } catch (e) {
+      mobx.runInAction(() => {
+        this.error = e instanceof Error ? e.message : "Error al cargar";
+        this.items = [];
+      });
+    } finally {
+      mobx.runInAction(() => {
+        this.loading = false;
+      });
+    }
+  }
+};
+var PropiedadCard = class extends lit.LitElement {
+  get showFields() {
+    const def = {
+      title: true,
+      address: true,
+      price: true,
+      transactionType: true,
+      propertyType: true,
+      bedrooms: true,
+      bathrooms: true,
+      parking: true,
+      builtArea: true,
+      city: true
+    };
+    return { ...def, ...this.blockProps?.showFields };
+  }
+  get displayPrice() {
+    const p = this.property;
+    if (p.sale_price != null && p.sale_price > 0) {
+      return new Intl.NumberFormat("es-CO", { style: "currency", currency: p.currency || "COP", maximumFractionDigits: 0 }).format(p.sale_price);
+    }
+    if (p.rental_price != null && p.rental_price > 0) {
+      return new Intl.NumberFormat("es-CO", { style: "currency", currency: p.currency || "COP", maximumFractionDigits: 0 }).format(p.rental_price) + "/mes";
+    }
+    return "Consultar";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const theme = this.blockProps?.theme;
+    if (theme?.primaryColor) this.style.setProperty("--prop-card-primary", theme.primaryColor);
+    if (theme?.accentColor) this.style.setProperty("--prop-card-accent", theme.accentColor);
+    if (theme?.badgeBackground) this.style.setProperty("--prop-card-badge-bg", theme.badgeBackground);
+    if (theme?.cardBorderRadius) this.style.setProperty("--prop-card-radius", theme.cardBorderRadius);
+    if (theme?.imageAspectRatio) {
+      const ratio = theme.imageAspectRatio === "16/9" ? "16/9" : theme.imageAspectRatio === "1/1" ? "1/1" : "4/3";
+      this.style.setProperty("--prop-card-aspect", ratio);
+    }
+  }
+  render() {
+    const p = this.property;
+    if (!p || !p.id) return lit.html`<div class="card" style="padding:1rem;color:#6b7280;">Sin datos</div>`;
+    const show = this.showFields;
+    const badges = [];
+    if (this.blockProps?.badges?.featured?.enabled && p.is_featured) {
+      badges.push(this.blockProps.badges.featured.label ?? "Destacado");
+    }
+    if (this.blockProps?.badges?.virtualTour?.enabled && p.has_virtual_tour) {
+      badges.push(this.blockProps.badges.virtualTour.label ?? "360\xB0");
+    }
+    return lit.html`
+      <a href="#/tienda/${window.__storefrontSlug ?? ""}/propiedad/${p.id}" class="card" style="text-decoration: none; color: inherit;">
+        <div class="img-wrap">
+          ${p.primary_image_url ? lit.html`<img data-src="${p.primary_image_url}" alt="${p.title}" class="lazyload" src="${p.primary_image_url}" loading="lazy" />` : lit.html`<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#9ca3af;">Sin imagen</div>`}
+          ${badges.length ? lit.html`<div class="badges">${badges.map((b) => lit.html`<span class="badge">${b}</span>`)}</div>` : lit.nothing}
+        </div>
+        <div class="body">
+          ${show.title !== false ? lit.html`<h3 class="title">${p.title}</h3>` : lit.nothing}
+          ${show.address !== false && p.address ? lit.html`<p class="address">${p.address}</p>` : lit.nothing}
+          <div class="row">
+            ${show.price !== false ? lit.html`<span class="price">${this.displayPrice}</span>` : lit.nothing}
+            ${show.transactionType !== false && p.transaction_type ? lit.html`<span class="tag">${p.transaction_type.name}</span>` : lit.nothing}
+          </div>
+          <div class="meta">
+            ${show.bedrooms !== false && p.bedrooms != null ? lit.html`<span>${p.bedrooms} hab.</span>` : lit.nothing}
+            ${show.bathrooms !== false && p.bathrooms != null ? lit.html`<span>${p.bathrooms} baños</span>` : lit.nothing}
+            ${show.parking !== false && p.parking_spaces > 0 ? lit.html`<span>${p.parking_spaces} est.</span>` : lit.nothing}
+            ${show.builtArea !== false && p.built_area > 0 ? lit.html`<span>${p.built_area} m²</span>` : lit.nothing}
+            ${show.city !== false && p.city ? lit.html`<span>${p.city.name}</span>` : lit.nothing}
+          </div>
+        </div>
+      </a>
+    `;
+  }
+};
+__publicField(PropiedadCard, "styles", lit.css`
+    :host {
+      display: block;
+      --prop-card-primary: var(--storefront-primary, #1a365d);
+      --prop-card-accent: var(--storefront-accent, #2b6cb0);
+      --prop-card-badge-bg: var(--storefront-accent, #2b6cb0);
+      --prop-card-radius: 8px;
+      --prop-card-aspect: 4 / 3;
+    }
+    .card {
+      border-radius: var(--prop-card-radius);
+      overflow: hidden;
+      background: #fff;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      transition: box-shadow 0.2s;
+    }
+    .card:hover {
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+    .img-wrap {
+      position: relative;
+      width: 100%;
+      aspect-ratio: var(--prop-card-aspect);
+      background: #e5e7eb;
+    }
+    .img-wrap img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .badges {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      right: 8px;
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+    .badge {
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 600;
+      background: var(--prop-card-badge-bg);
+      color: #fff;
+    }
+    .body {
+      padding: 12px;
+    }
+    .title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--prop-card-primary);
+      margin: 0 0 4px 0;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .address {
+      font-size: 0.8rem;
+      color: #6b7280;
+      margin: 0 0 8px 0;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .price {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--prop-card-primary);
+    }
+    .tag {
+      font-size: 0.75rem;
+      padding: 2px 8px;
+      border-radius: 4px;
+      background: rgba(0,0,0,0.06);
+      color: #374151;
+    }
+    .meta {
+      display: flex;
+      gap: 12px;
+      margin-top: 8px;
+      font-size: 0.8rem;
+      color: #6b7280;
+    }
+  `);
+__decorateClass([
+  decorators_js.property({ type: Object })
+], PropiedadCard.prototype, "property", 2);
+__decorateClass([
+  decorators_js.property({ type: Object })
+], PropiedadCard.prototype, "blockProps", 2);
+PropiedadCard = __decorateClass([
+  decorators_js.customElement("propiedad-card")
+], PropiedadCard);
+
+// src/sdk/site-runtime.ts
+var BUILTIN_PLUGIN_URLS = {
+  "onl-hero": { js: "/plugins/example/hero-plugin.js", css: "/plugins/example/hero-plugin.css" }
+};
+var loadedPlugins = /* @__PURE__ */ new Set();
+function getSlugFromPath(pathname) {
+  const match = pathname.match(/^\/tienda\/([^/]+)/);
+  return match ? match[1] : "";
+}
+function getEnvironmentFromQuery(search) {
+  const env = new URLSearchParams(search).get("environment");
+  return env === "draft" ? "draft" : "live";
+}
+function getPluginUrls(slug) {
+  return fetchPlugins(slug).then(({ data }) => {
+    const merged = { ...BUILTIN_PLUGIN_URLS };
+    for (const plugin of data) {
+      const js = plugin.bundle_url?.trim();
+      if (!js) continue;
+      const css2 = plugin.css_url?.trim() || void 0;
+      for (const blockType of plugin.block_types || []) {
+        if (blockType) {
+          merged[blockType] = { js, css: css2 };
+        }
+      }
+    }
+    return merged;
+  }).catch(() => ({ ...BUILTIN_PLUGIN_URLS }));
+}
+function loadPlugin(type, pluginUrls) {
+  const urls = pluginUrls[type];
+  if (!urls || loadedPlugins.has(type)) return Promise.resolve();
+  const promises = [];
+  promises.push(
+    new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = urls.js;
+      script.onload = () => {
+        loadedPlugins.add(type);
+        resolve();
+      };
+      script.onerror = () => reject(new Error(`Plugin ${type} failed to load`));
+      document.head.appendChild(script);
+    })
+  );
+  if (urls.css) {
+    const cssHref = urls.css;
+    promises.push(
+      new Promise((resolve, reject) => {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = cssHref;
+        link.onload = () => resolve();
+        link.onerror = () => reject(new Error(`Plugin ${type} CSS failed to load`));
+        document.head.appendChild(link);
+      })
+    );
+  }
+  return Promise.all(promises).then(() => {
+  });
+}
+async function renderPluginBlocks(blocks, container, pluginUrls) {
+  for (const block of blocks) {
+    if (block.type === "propiedad-card") continue;
+    const urls = pluginUrls[block.type];
+    if (!urls) continue;
+    try {
+      await loadPlugin(block.type, pluginUrls);
+      const el = document.createElement(block.type);
+      el.props = block.props ?? {};
+      el.setAttribute("data-props", JSON.stringify(block.props ?? {}));
+      container.appendChild(el);
+    } catch {
+      const fallback = document.createElement("div");
+      fallback.className = "plugin-error";
+      fallback.textContent = `Bloque ${block.type} no disponible`;
+      container.appendChild(fallback);
+    }
+  }
+}
+function applyTheme(config) {
+  const theme = resolveSiteTheme(config);
+  document.documentElement.style.setProperty("--storefront-primary", theme.primaryColor);
+  document.documentElement.style.setProperty("--storefront-accent", theme.accentColor);
+  if (theme.logoUrl) {
+    document.documentElement.style.setProperty("--storefront-logo-url", theme.logoUrl);
+  }
+  Object.entries(theme.customCssVars).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(`--${key}`, value);
+  });
+}
+function renderFilters(filterStore, listStore, updateList) {
+  const wrap = document.createElement("div");
+  wrap.className = "filters-bar";
+  wrap.innerHTML = `
+    <div class="filters-inner">
+      <input type="number" placeholder="Precio m\xEDn" id="minPrice" />
+      <input type="number" placeholder="Precio m\xE1x" id="maxPrice" />
+      <select id="sort">
+        <option value="newest">M\xE1s recientes</option>
+        <option value="price_asc">Precio menor</option>
+        <option value="price_desc">Precio mayor</option>
+        <option value="area_desc">\xC1rea mayor</option>
+      </select>
+      <input type="text" placeholder="Buscar" id="search" />
+      <button type="button" id="applyFilters">Filtrar</button>
+    </div>
+  `;
+  const minPrice = wrap.querySelector("#minPrice");
+  const maxPrice = wrap.querySelector("#maxPrice");
+  const sort = wrap.querySelector("#sort");
+  const search = wrap.querySelector("#search");
+  const apply = wrap.querySelector("#applyFilters");
+  minPrice.value = filterStore.minPrice != null ? String(filterStore.minPrice) : "";
+  maxPrice.value = filterStore.maxPrice != null ? String(filterStore.maxPrice) : "";
+  sort.value = filterStore.sort;
+  search.value = filterStore.search;
+  apply.addEventListener("click", () => {
+    filterStore.setFilters({
+      minPrice: minPrice.value ? Number(minPrice.value) : null,
+      maxPrice: maxPrice.value ? Number(maxPrice.value) : null,
+      sort: sort.value,
+      search: search.value
+    });
+    listStore.fetchPage().then(updateList);
+  });
+  return wrap;
+}
+function renderList(items, blockProps, slug) {
+  const wrap = document.createElement("div");
+  wrap.className = "list-grid";
+  window.__storefrontSlug = slug;
+  items.forEach((prop) => {
+    const card = document.createElement("propiedad-card");
+    card.property = prop;
+    card.blockProps = blockProps;
+    wrap.appendChild(card);
+  });
+  return wrap;
+}
+function renderPagination(filterStore, listStore, totalPages, updateList) {
+  const wrap = document.createElement("div");
+  wrap.className = "pagination";
+  const prev = document.createElement("button");
+  prev.textContent = "Anterior";
+  prev.disabled = filterStore.page <= 1;
+  prev.addEventListener("click", () => {
+    filterStore.setPage(Math.max(1, filterStore.page - 1));
+    listStore.fetchPage().then(updateList);
+  });
+  const next = document.createElement("button");
+  next.textContent = "Siguiente";
+  next.disabled = filterStore.page >= totalPages;
+  next.addEventListener("click", () => {
+    filterStore.setPage(Math.min(totalPages, filterStore.page + 1));
+    listStore.fetchPage().then(updateList);
+  });
+  const info = document.createElement("span");
+  info.className = "pagination-info";
+  info.textContent = `P\xE1gina ${filterStore.page} de ${totalPages}`;
+  wrap.appendChild(prev);
+  wrap.appendChild(info);
+  wrap.appendChild(next);
+  return wrap;
+}
+async function bootSiteRuntime(app, options = {}) {
+  if (!app) {
+    const err = new StorefrontConfigError("bootSiteRuntime: app element is required");
+    options.onError?.(err);
+    throw err;
+  }
+  if (options.baseUrl != null) {
+    setApiBase(options.baseUrl);
+  } else {
+    setApiBase(getApiBase());
+  }
+  const getSlug = options.getSlugFromPath ?? getSlugFromPath;
+  const slug = getSlug(typeof window !== "undefined" ? window.location.pathname : "");
+  if (!slug) {
+    app.innerHTML = "<p>URL debe ser /tienda/:slug (ej. /tienda/mi-inmobiliaria)</p>";
+    return;
+  }
+  app.innerHTML = "<p>Cargando...</p>";
+  const environment = options.environment ?? (typeof window !== "undefined" ? getEnvironmentFromQuery(window.location.search) : "live");
+  const filterStore = new FilterStore();
+  let config = { pages: [] };
+  try {
+    const res = await fetchSiteConfig(slug, environment);
+    config = ensureDefaultHeroInConfig(res.data ?? config);
+    applyTheme(config);
+  } catch (error) {
+    const err = error instanceof Error ? error : new StorefrontConfigError(String(error));
+    options.onError?.(err);
+    app.innerHTML = `<p>Error al cargar configuraci\xF3n: ${err.message}</p>`;
+    return;
+  }
+  const listStore = new ListStore(slug, filterStore);
+  const blockProps = getPropiedadCardProps(config);
+  const pageBlocks = getPageBlocks(config);
+  const pluginUrls = await getPluginUrls(slug);
+  const style = document.createElement("style");
+  style.textContent = `
+    .filters-bar { padding: 16px; background: #f3f4f6; margin-bottom: 16px; }
+    .filters-inner { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; max-width: 900px; }
+    .filters-inner input, .filters-inner select { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; }
+    .filters-inner button { padding: 8px 16px; background: var(--storefront-primary, #1a365d); color: #fff; border: none; border-radius: 6px; cursor: pointer; }
+    .list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 16px; }
+    .pagination { display: flex; gap: 12px; align-items: center; padding: 16px; }
+    .pagination button { padding: 8px 16px; cursor: pointer; }
+    .pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
+    .error { padding: 16px; color: #b91c1c; }
+    .plugin-error { padding: 12px 16px; background: #fef2f2; color: #b91c1c; font-size: 0.875rem; }
+  `;
+  app.innerHTML = "";
+  app.appendChild(style);
+  const container = document.createElement("div");
+  container.className = "storefront-container";
+  app.appendChild(container);
+  const pluginBlocksEl = document.createElement("div");
+  pluginBlocksEl.className = "plugin-blocks";
+  container.appendChild(pluginBlocksEl);
+  await renderPluginBlocks(pageBlocks, pluginBlocksEl, pluginUrls);
+  const listEl = document.createElement("div");
+  listEl.className = "list-container";
+  const paginationEl = document.createElement("div");
+  const updateList = () => {
+    listEl.innerHTML = "";
+    if (listStore.error) {
+      listEl.innerHTML = `<p class="error">${listStore.error}</p>`;
+      paginationEl.innerHTML = "";
+      return;
+    }
+    if (listStore.loading) {
+      listEl.innerHTML = "<p>Cargando propiedades...</p>";
+      paginationEl.innerHTML = "";
+      return;
+    }
+    const totalPages = Math.max(1, Math.ceil(listStore.totalCount / filterStore.perPage));
+    listEl.appendChild(renderList(listStore.items, blockProps, slug));
+    paginationEl.innerHTML = "";
+    paginationEl.appendChild(renderPagination(filterStore, listStore, totalPages, updateList));
+  };
+  container.appendChild(renderFilters(filterStore, listStore, updateList));
+  container.appendChild(listEl);
+  container.appendChild(paginationEl);
+  try {
+    await listStore.fetchPage();
+  } catch {
+  }
+  updateList();
+}
+
+exports.StorefrontConfigError = StorefrontConfigError;
+exports.StorefrontNetworkError = StorefrontNetworkError;
+exports.bootSiteRuntime = bootSiteRuntime;
+exports.fetchPlugins = fetchPlugins;
+exports.fetchProperties = fetchProperties;
+exports.fetchSiteConfig = fetchSiteConfig;
+exports.setApiBase = setApiBase;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map