@syntrologie/adapt-product 2.27.0 → 2.28.0

package/dist/cdn.js

@@ -1,7 +1,7 @@
 import {
   runtime
-} from "./chunk-HFT5OENK.js";
-import "./chunk-SM35E4R3.js";
+} from "./chunk-QZZVFYL6.js";
+import "./chunk-SGJGJRCP.js";
 
 // src/cdn.ts
 var manifest = {

package/dist/{chunk-HFT5OENK.js → chunk-QZZVFYL6.js}

@@ -1,4 +1,5 @@
 import {
+  VISIBLE_FACT_KEYS,
   __privateAdd,
   __privateGet,
   __privateMethod,
@@ -7,7 +8,7 @@ import {
   comparisonSchema,
   gridSchema,
   heroSchema
-} from "./chunk-SM35E4R3.js";
+} from "./chunk-SGJGJRCP.js";
 
 // ../../sdk-contracts/dist/mount-plumbing.js
 var MOUNT_PLUMBING_KEYS = ["instanceId", "runtime", "tileId"];
@@ -46,15 +47,13 @@ var COUNTABLE_EVENTS = [
   "ui.idle",
   "ui.scroll_thrash",
   "ui.focus_bounce",
+  "ui.hesitate",
+  "ui.rage_click",
   // Navigation
   "nav.page_view",
-  "nav.page_leave",
-  // Derived behavioral signals
-  "behavior.rage_click",
-  "behavior.hesitation",
-  "behavior.confusion"
+  "nav.page_leave"
 ];
-var CountableEventZ = z.enum(COUNTABLE_EVENTS).describe("Event name to count. ui.* = user interactions and behavioral detectors, nav.* = page navigation, behavior.* = derived behavioral signals.");
+var CountableEventZ = z.enum(COUNTABLE_EVENTS).describe("Event name to count. ui.* = user interactions and behavioral detectors (hesitate, rage_click, scroll_thrash, focus_bounce, idle, hover); nav.* = page navigation.");
 var SESSION_METRIC_KEYS = ["time_on_page", "page_views", "scroll_depth"];
 var SessionMetricKeyZ = z.enum(SESSION_METRIC_KEYS).describe("Session metric key. time_on_page = seconds on current page, page_views = pages visited this session, scroll_depth = 0-100 percentage.");
 var PageUrlConditionZ = z.object({
@@ -188,6 +187,7 @@ var NotifyZ = z.object({
 
 // src/widgets/ProductCardLit.ts
 import { html, LitElement, nothing } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
 
 // src/bind/dom-selector.ts
 async function resolveDomSelectorPrice(input, _signal) {
@@ -566,7 +566,8 @@ var ProductCardLit = class extends LitElement {
     return renderProductCard(
       parsed.data.product,
       parsed.data.density,
-      this.resolved[parsed.data.product.id]
+      this.resolved[parsed.data.product.id],
+      parsed.data.visibleFacts
     );
   }
 };
@@ -601,12 +602,146 @@ ProductCardLit.properties = {
   resolved: { state: true },
   validationError: { state: true }
 };
-function renderProductCard(product, density, resolved) {
+var AVAILABILITY_LABELS = {
+  in_stock: "In stock",
+  preorder: "Preorder",
+  backorder: "Backorder",
+  out_of_stock: "Out of stock"
+};
+function buildSpecGroups(product) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const spec of product.specs ?? []) {
+    let group = groups.get(spec.section);
+    if (!group) {
+      group = { section: spec.section, rows: [] };
+      groups.set(spec.section, group);
+    }
+    group.rows.push({
+      name: spec.name,
+      value: spec.value,
+      unit: spec.unit,
+      emphasis: spec.emphasis ?? false
+    });
+  }
+  if (product.attributes && product.attributes.length > 0) {
+    const about = groups.get("About") ?? { section: "About", rows: [] };
+    for (const attr of product.attributes) {
+      about.rows.push({
+        name: attr.label,
+        value: attr.value,
+        emphasis: attr.emphasis ?? false
+      });
+    }
+    if (!groups.has("About")) groups.set("About", about);
+  }
+  return Array.from(groups.values());
+}
+function renderProductCard(product, density, resolved, visibleFacts) {
   const imgSrc = resolved?.image ?? product.image.src;
-  const priceText = resolved?.price ?? product.price?.amount;
   const showFraming = density === "standard" && product.framing;
+  const specGroups = buildSpecGroups(product);
+  const isVisible = (key) => visibleFacts === void 0 ? true : visibleFacts.includes(key);
+  const factOrder = visibleFacts ?? VISIBLE_FACT_KEYS;
+  const hasSalePrice = product.salePrice !== void 0;
+  const activePriceText = resolved?.price ?? product.salePrice?.amount ?? product.price?.amount;
+  const activeCadence = hasSalePrice ? product.salePrice?.cadence : product.price?.cadence;
+  const thumbPx = density === "compact" ? 64 : 96;
+  const articleStyles = {
+    display: "flow-root"
+  };
+  const imageStyles = {
+    float: "left",
+    width: `${thumbPx}px`,
+    height: `${thumbPx}px`,
+    objectFit: "cover",
+    borderRadius: "6px",
+    marginRight: density === "compact" ? "0.5rem" : "0.75rem",
+    marginBottom: density === "compact" ? "0.25rem" : "0.5rem"
+  };
+  const priceBlockStyles = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "baseline",
+    flexWrap: "wrap",
+    gap: "0.5rem"
+  };
+  const priceOriginalStyles = {
+    textDecoration: "line-through",
+    opacity: "0.6",
+    fontSize: "0.9em"
+  };
+  const priceSaleStyles = {
+    fontWeight: "600",
+    fontSize: "1.1em"
+  };
+  const priceCadenceStyles = {
+    fontSize: "0.85em",
+    opacity: "0.7"
+  };
+  const specGroupStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem"
+  };
+  const specHeadingStyles = {
+    fontSize: "0.75rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    opacity: "0.7",
+    margin: "0",
+    fontWeight: "600"
+  };
+  const specRowsStyles = {
+    listStyle: "none",
+    margin: "0",
+    padding: "0",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.125rem"
+  };
+  const specRowStyles = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: "0.5rem",
+    fontSize: "0.875rem"
+  };
+  const specNameStyles = {
+    flex: "1",
+    minWidth: "0"
+  };
+  const specValueStyles = {
+    fontVariantNumeric: "tabular-nums",
+    textAlign: "right"
+  };
+  const specUnitStyles = {
+    fontSize: "0.85em",
+    opacity: "0.7",
+    minWidth: "2.5rem"
+  };
+  const specsContainerStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5rem"
+  };
+  const availabilityStyles = {
+    display: "inline-block",
+    fontSize: "0.8rem",
+    opacity: "0.85"
+  };
+  const ctasStyles = {
+    display: "flex",
+    flexDirection: "row",
+    gap: "0.5rem",
+    marginTop: "0.25rem"
+  };
   return html`
-    <article class="sc-product-card" data-density=${density}>
+    <article
+      class="sc-product-card"
+      data-density=${density}
+      data-labels=${product.labels ? JSON.stringify(product.labels) : nothing}
+      style=${styleMap(articleStyles)}
+    >
       <img
         class="sc-product-card__image"
         data-product-image
@@ -614,34 +749,143 @@ function renderProductCard(product, density, resolved) {
         alt=${product.image.alt}
         loading="lazy"
         @error=${onImageError}
+        style=${styleMap(imageStyles)}
       />
-      <header class="sc-product-card__header">
-        <h3 class="sc-product-card__name" data-product-name>${product.name}</h3>
-        ${product.tagline ? html`<p class="sc-product-card__tagline" data-product-tagline>${product.tagline}</p>` : nothing}
+      <header
+        class="sc-product-card__header"
+        style=${styleMap({ margin: "0", display: "block" })}
+      >
+        <h3
+          class="sc-product-card__name"
+          data-product-name
+          style=${styleMap({ margin: "0 0 0.125rem", fontSize: "1.05rem", fontWeight: "600", lineHeight: "1.2" })}
+        >${product.name}</h3>
+        ${product.tagline && isVisible("tagline") ? html`<p
+                class="sc-product-card__tagline"
+                data-product-tagline
+                style=${styleMap({ margin: "0 0 0.125rem", fontSize: "0.875rem", opacity: "0.75", lineHeight: "1.3" })}
+              >${product.tagline}</p>` : nothing}
+        ${product.rating && isVisible("rating") ? html`<div
+              class="sc-product-card__rating"
+              data-product-rating
+              data-rating-value=${product.rating.value}
+              data-rating-max=${product.rating.max ?? 5}
+              aria-label=${`${product.rating.value} out of ${product.rating.max ?? 5}, ${product.rating.count} reviews`}
+              style=${styleMap({ fontSize: "0.85rem" })}
+            >
+              <span class="sc-product-card__rating-stars">★ ${product.rating.value}</span>
+              <span class="sc-product-card__rating-count" style=${styleMap({ opacity: "0.7", marginLeft: "0.25rem" })}>(${product.rating.count.toLocaleString()})</span>
+            </div>` : nothing}
       </header>
-      ${product.price ? html`<div class="sc-product-card__price" data-product-price>
-            <span class="sc-product-card__amount">${priceText}</span>
-            ${product.price.cadence ? html`<span class="sc-product-card__cadence">${product.price.cadence}</span>` : nothing}
-          </div>` : nothing}
-      ${product.badge ? html`<span
+      <div
+        class="sc-product-card__body"
+        data-product-body
+        style=${styleMap({ display: "block", marginTop: "0.5rem" })}
+      >
+      ${factOrder.map((key) => {
+    if (key === "price") {
+      if (!isVisible("price") || !product.price && !product.salePrice) return nothing;
+      return html`<div
+            class="sc-product-card__price"
+            data-product-price
+            style=${styleMap(priceBlockStyles)}
+          >
+            ${hasSalePrice && product.price ? html`<span
+                    class="sc-product-card__amount-original"
+                    data-product-price-original
+                    style=${styleMap(priceOriginalStyles)}
+                    >${product.price.amount}</span
+                  >` : nothing}
+            <span
+              class="sc-product-card__amount"
+              data-product-price-sale=${hasSalePrice ? "true" : nothing}
+              style=${styleMap(priceSaleStyles)}
+              >${activePriceText}</span
+            >
+            ${activeCadence ? html`<span
+                    class="sc-product-card__cadence"
+                    style=${styleMap(priceCadenceStyles)}
+                    >${activeCadence}</span
+                  >` : nothing}
+          </div>`;
+    }
+    if (key === "availability") {
+      if (!isVisible("availability") || !product.availability) return nothing;
+      return html`<span
+            class="sc-product-card__availability"
+            data-product-availability
+            data-availability=${product.availability}
+            style=${styleMap(availabilityStyles)}
+            >${AVAILABILITY_LABELS[product.availability]}</span
+          >`;
+    }
+    if (key === "badge") {
+      if (!isVisible("badge") || !product.badge) return nothing;
+      return html`<span
             class="sc-product-card__badge"
             data-product-badge
             data-tone=${product.badge.tone}
             >${product.badge.label}</span
-          >` : nothing}
-      ${product.attributes.length > 0 ? html`<ul class="sc-product-card__attrs">
-            ${product.attributes.map(
-    (a) => html`<li data-attribute-emphasis=${a.emphasis ? "true" : "false"}>
-                <span class="sc-product-card__attr-label">${a.label}</span>
-                <span class="sc-product-card__attr-value">${a.value}</span>
-              </li>`
-  )}
-          </ul>` : nothing}
-      ${showFraming ? html`<p
+          >`;
+    }
+    if (key === "specs") {
+      if (!isVisible("specs") || specGroups.length === 0) return nothing;
+      return html`<div class="sc-product-card__specs" style=${styleMap(specsContainerStyles)}>
+            ${specGroups.map(
+        (g) => html`<section
+                class="sc-product-card__spec-section"
+                data-spec-section=${g.section}
+                style=${styleMap(specGroupStyles)}
+              >
+                <h4
+                  class="sc-product-card__spec-heading"
+                  style=${styleMap(specHeadingStyles)}
+                >${g.section}</h4>
+                <ul
+                  class="sc-product-card__spec-rows"
+                  style=${styleMap(specRowsStyles)}
+                >
+                  ${g.rows.map(
+          (r) => html`<li
+                      data-spec-row
+                      data-attribute-emphasis=${r.emphasis ? "true" : "false"}
+                      style=${styleMap(specRowStyles)}
+                    >
+                      <span
+                        class="sc-product-card__spec-name"
+                        data-spec-name
+                        style=${styleMap(specNameStyles)}
+                        >${r.name}</span
+                      >
+                      <span
+                        class="sc-product-card__spec-value"
+                        data-spec-value
+                        style=${styleMap(specValueStyles)}
+                        >${r.value}</span
+                      >
+                      ${r.unit ? html`<span
+                              class="sc-product-card__spec-unit"
+                              data-spec-unit
+                              style=${styleMap(specUnitStyles)}
+                              >${r.unit}</span
+                            >` : nothing}
+                    </li>`
+        )}
+                </ul>
+              </section>`
+      )}
+          </div>`;
+    }
+    if (key === "framing") {
+      if (!isVisible("framing") || !showFraming) return nothing;
+      return html`<p
             class="sc-product-card__framing"
             .innerHTML=${sanitizeHtml(product.framing ?? "")}
-          ></p>` : nothing}
-      <div class="sc-product-card__ctas">
+          ></p>`;
+    }
+    return nothing;
+  })}
+      <div class="sc-product-card__ctas" style=${styleMap(ctasStyles)}>
         ${product.ctas.map(
     (c, i) => html`<a
             class="sc-product-card__cta"
@@ -655,6 +899,7 @@ function renderProductCard(product, density, resolved) {
           >`
   )}
       </div>
+      </div>
     </article>
   `;
 }
@@ -786,6 +1031,7 @@ renderRow_fn = function(product) {
               src=${imgSrc}
               alt=${product.image.alt}
               loading="lazy"
+              style="width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0;"
             />
             <span class="sc-product-comparison__name">${product.name}</span>
             ${product.price ? html2`<span class="sc-product-comparison__price"
@@ -808,7 +1054,7 @@ renderRow_fn = function(product) {
           </span>
         </div>
         ${expanded ? html2`<div class="sc-product-comparison__panel" id=${regionId} role="region">
-              ${product.attributes.length > 0 ? html2`<ul class="sc-product-comparison__attrs">
+              ${product.attributes && product.attributes.length > 0 ? html2`<ul class="sc-product-comparison__attrs">
                     ${product.attributes.map(
     (a) => html2`<li data-attribute-emphasis=${a.emphasis ? "true" : "false"}>
                         <span>${a.label}</span><span>${a.value}</span>
@@ -946,15 +1192,20 @@ var ProductHeroLit = class extends LitElement4 {
     const resolved = this.resolved[product.id];
     const imgSrc = resolved?.image ?? product.image.src;
     const priceText = resolved?.price ?? product.price?.amount;
+    const isTopLayout = layout === "image-top";
+    const sectionStyles = isTopLayout ? "display:block;" : `display:flex;flex-direction:${layout === "image-right" ? "row-reverse" : "row"};gap:1rem;align-items:flex-start;`;
+    const imageStyles = isTopLayout ? "width:100%;max-height:160px;object-fit:cover;border-radius:8px;display:block;margin-bottom:0.75rem;" : "width:128px;height:128px;object-fit:cover;border-radius:8px;flex-shrink:0;";
+    const contentStyles = isTopLayout ? "" : "flex:1;min-width:0;";
     return html4`
-      <section class="sc-product-hero" data-hero-layout=${layout}>
+      <section class="sc-product-hero" data-hero-layout=${layout} style=${sectionStyles}>
         <img
           class="sc-product-hero__image"
           src=${imgSrc}
           alt=${product.image.alt}
           loading="lazy"
+          style=${imageStyles}
         />
-        <div class="sc-product-hero__content">
+        <div class="sc-product-hero__content" style=${contentStyles}>
           <h2 class="sc-product-hero__name">${product.name}</h2>
           ${product.tagline ? html4`<p class="sc-product-hero__tagline">${product.tagline}</p>` : nothing4}
           ${product.price ? html4`<p class="sc-product-hero__price">
@@ -1098,4 +1349,4 @@ export {
   runtime,
   runtime_default
 };
-//# sourceMappingURL=chunk-HFT5OENK.js.map
+//# sourceMappingURL=chunk-QZZVFYL6.js.map