@syntrologie/adapt-product 2.49.1 → 2.51.0

package/dist/cdn.js

@@ -1,7 +1,7 @@
 import {
   onActivate,
   runtime
-} from "./chunk-LFYTHTQS.js";
+} from "./chunk-F6ZXHGAT.js";
 import "./chunk-D2W6UYLT.js";
 
 // src/cdn.ts

package/dist/{chunk-LFYTHTQS.js → chunk-F6ZXHGAT.js}

@@ -342,6 +342,110 @@ var NotifyZ = z.object({
   icon: z.string().optional().describe("Notification icon (emoji or URL)")
 }).describe("Optional toast notification shown when this action triggers.").nullable().optional();
 
+// ../../sdk-contracts/dist/viewport.js
+var VIEWPORT_CLASS_ATTR = "data-viewport";
+var DESKTOP_MIN_WIDTH_PX = 720;
+function isCoarsePointer() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+    return true;
+  return window.matchMedia("(pointer: coarse)").matches;
+}
+function classifyPointer() {
+  return isCoarsePointer() ? "coarse" : "fine";
+}
+function hasAnyFinePointer() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+    return true;
+  return window.matchMedia("(any-pointer: fine)").matches;
+}
+function observePointer(cb) {
+  const read = () => ({ primary: classifyPointer(), anyFine: hasAnyFinePointer() });
+  let current = read();
+  cb(current);
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+    return () => {
+    };
+  const coarse = window.matchMedia("(pointer: coarse)");
+  const anyFine = window.matchMedia("(any-pointer: fine)");
+  const onChange = () => {
+    const next = read();
+    if (next.primary !== current.primary || next.anyFine !== current.anyFine) {
+      current = next;
+      cb(next);
+    }
+  };
+  const sub = (mq) => {
+    if (mq.addEventListener)
+      mq.addEventListener("change", onChange);
+    else
+      mq.addListener?.(onChange);
+  };
+  const unsub = (mq) => {
+    if (mq.removeEventListener)
+      mq.removeEventListener("change", onChange);
+    else
+      mq.removeListener?.(onChange);
+  };
+  sub(coarse);
+  sub(anyFine);
+  return () => {
+    unsub(coarse);
+    unsub(anyFine);
+  };
+}
+var POINTER_CLASS_ATTR = "data-pointer";
+function classifyViewport() {
+  if (typeof window === "undefined")
+    return "mobile";
+  return window.innerWidth >= DESKTOP_MIN_WIDTH_PX ? "desktop" : "mobile";
+}
+function observeViewportClass(cb) {
+  let current = classifyViewport();
+  cb(current);
+  if (typeof window === "undefined")
+    return () => {
+    };
+  const onResize = () => {
+    const next = classifyViewport();
+    if (next !== current) {
+      current = next;
+      cb(next);
+    }
+  };
+  window.addEventListener("resize", onResize, { passive: true });
+  return () => window.removeEventListener("resize", onResize);
+}
+var ViewportClassController = class {
+  constructor(host) {
+    this.value = classifyViewport();
+    this.pointer = classifyPointer();
+    this.anyFinePointer = hasAnyFinePointer();
+    this._unsubscribes = [];
+    this._host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+    this._unsubscribes = [
+      observeViewportClass((c2) => {
+        this.value = c2;
+        this._host.setAttribute(VIEWPORT_CLASS_ATTR, c2);
+        this._host.requestUpdate();
+      }),
+      observePointer(({ primary, anyFine }) => {
+        this.pointer = primary;
+        this.anyFinePointer = anyFine;
+        this._host.setAttribute(POINTER_CLASS_ATTR, primary);
+        this._host.requestUpdate();
+      })
+    ];
+  }
+  hostDisconnected() {
+    for (const off of this._unsubscribes)
+      off();
+    this._unsubscribes = [];
+  }
+};
+
 // src/presets-store.ts
 function presetsWindow() {
   if (typeof window === "undefined") return void 0;
@@ -1903,16 +2007,22 @@ syntro-pdp-other-products-carousel {
   box-sizing: border-box;
 }
 
-@media (max-width: 719px) {
-  .opc-item {
-    flex: 0 0 80%;
-  }
+/* viewport-scoped (was a width media query): classification is central
+   (sdk-contracts classifyViewport()); the host tag carries data-viewport. */
+syntro-pdp-other-products-carousel[data-viewport="mobile"] .opc-item {
+  flex: 0 0 80%;
 }
 `;
 var PdpOtherProductsCarouselLit = class extends LitElement4 {
   constructor() {
     super(...arguments);
     this.data = null;
+    /** Stamps data-viewport on this tag (central classification,
+     *  sdk-contracts) — the viewport-scoped CSS keys off it. */
+    // biome-ignore lint/correctness/noUnusedPrivateClassMembers: the
+    // constructor registers the controller (stamps data-viewport); the
+    // field exists to own its lifetime, not to be read.
+    this._viewport = new ViewportClassController(this);
   }
   createRenderRoot() {
     return this;
@@ -1969,16 +2079,22 @@ syntro-pdp-other-products-grid {
   gap: 0.75rem;
 }
 
-@media (max-width: 719px) {
-  .grid {
-    grid-template-columns: 1fr;
-  }
+/* viewport-scoped (was a width media query): classification is central
+   (sdk-contracts classifyViewport()); the host tag carries data-viewport. */
+syntro-pdp-other-products-grid[data-viewport="mobile"] .grid {
+  grid-template-columns: 1fr;
 }
 `;
 var PdpOtherProductsGridLit = class extends LitElement5 {
   constructor() {
     super(...arguments);
     this.data = null;
+    /** Stamps data-viewport on this tag (central classification,
+     *  sdk-contracts) — the viewport-scoped CSS keys off it. */
+    // biome-ignore lint/correctness/noUnusedPrivateClassMembers: the
+    // constructor registers the controller (stamps data-viewport); the
+    // field exists to own its lifetime, not to be read.
+    this._viewport = new ViewportClassController(this);
   }
   createRenderRoot() {
     return this;
@@ -2443,8 +2559,10 @@ var SECTION_LAYOUT_CSS = `
    the full-bleed band (a grid can't be both full-width AND content-centered)
    for the side-by-side reading rhythm; the section reads as a deliberate
    magazine block on the base background. Mobile keeps the stacked layout. */
-@media (min-width: 720px) {
-  [data-syntro-pdp-section][data-slot='pdp-slot-trending-news'] {
+/* viewport-scoped (was a width media query): classification is central
+   (sdk-contracts classifyViewport()); the syntro-pdp tag carries
+   data-viewport, stamped by ViewportClassController. */
+  syntro-pdp[data-viewport="desktop"] [data-syntro-pdp-section][data-slot='pdp-slot-trending-news'] {
     background: transparent;
     display: grid;
     grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
@@ -2456,26 +2574,26 @@ var SECTION_LAYOUT_CSS = `
   }
   /* Title column: header left-aligned (not the full-band centered eyebrow),
      and gently sticky so it holds while the stories scroll past. */
-  [data-syntro-pdp-section][data-slot='pdp-slot-trending-news'] > syntro-pdp-section-header {
+  syntro-pdp[data-viewport="desktop"] [data-syntro-pdp-section][data-slot='pdp-slot-trending-news'] > syntro-pdp-section-header {
     position: sticky;
     top: clamp(24px, 8vh, 72px);
   }
-  [data-syntro-pdp-section][data-slot='pdp-slot-trending-news'] .syntro-pdp-section-eyebrow {
+  syntro-pdp[data-viewport="desktop"] [data-syntro-pdp-section][data-slot='pdp-slot-trending-news'] .syntro-pdp-section-eyebrow {
     justify-content: flex-start;
   }
-  [data-syntro-pdp-section][data-slot='pdp-slot-trending-news'] .syntro-pdp-section-headline {
+  syntro-pdp[data-viewport="desktop"] [data-syntro-pdp-section][data-slot='pdp-slot-trending-news'] .syntro-pdp-section-headline {
     max-width: none;
     margin-inline: 0;
     padding-inline: 0;
   }
   /* Stories column: the body fills the wider right column (drop the centered
      inner constraint + the header-gap top margin \u2014 the grid gap spaces it). */
-  [data-syntro-pdp-section][data-slot='pdp-slot-trending-news'] > [data-syntro-pdp-section-inner] {
+  syntro-pdp[data-viewport="desktop"] [data-syntro-pdp-section][data-slot='pdp-slot-trending-news'] > [data-syntro-pdp-section-inner] {
     max-width: none;
     margin: 0;
     padding: 0;
   }
-}
+
 `;
 var CHAT_EXCERPT_KEY = "syntro.chat.lastExcerpt";
 var CHAT_EXCERPT_MAX = 7500;
@@ -2662,6 +2780,12 @@ var _SyntroPdpLit = class _SyntroPdpLit extends LitElement6 {
       const open = e2.target.open;
       this._dispatchDecision({ type: "dossier-toggled", open });
     };
+    /** Stamps data-viewport on this tag (central classification,
+     *  sdk-contracts) — the viewport-scoped CSS keys off it. */
+    // biome-ignore lint/correctness/noUnusedPrivateClassMembers: the
+    // constructor registers the controller (stamps data-viewport); the
+    // field exists to own its lifetime, not to be read.
+    this._viewport = new ViewportClassController(this);
   }
   /**
    * Widget props (the `adaptive-product:pdp` mountable sets `el.props` before
@@ -5855,6 +5979,26 @@ function _readDevice() {
 }
 var SPEC_CHIP_FADE_MASK = "linear-gradient(90deg, black 0, black calc(100% - 18px), transparent 100%)";
 var CARD_FLIP_CSS = `
+  /* \u2500\u2500 Height-bounded container opt-in (velvet deck band) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+     The canvas that owns a DEFINITE-height mount opts the card into filling
+     it by setting --sc-card-host-height: 100% (velvet: .deck-card tokens).
+     The chain below then hands that definite height to the front-face grid,
+     whose 1fr/auto rows resolve inside it and whose image box (max-height:
+     100% on .sc-product-card__media) crops to what remains. Everywhere the
+     token is unset the host is auto-height and every percentage in the
+     chain is inert \u2014 chat/PDP stacked cards are untouched.
+     Regression this exists for: #3591 shaved the solo-deck band 24px and
+     the fixed 132\xD7176 image box pushed the CTA/link row past the card
+     bottom (live on iglowmedspa.com 2026-09-03; pinned by
+     test-server/tests/velvet-deck-product-card-fit.spec.ts). */
+  syntro-product-card {
+    height: var(--sc-card-host-height, auto);
+    min-height: 0;
+  }
+  .sc-product-card { height: 100%; min-height: 0; }
+  .sc-product-card > [data-face] { height: 100%; min-height: 0; }
+  .sc-product-card [data-product-card-grid] { height: 100%; min-height: 0; }
+
   /* Hide the scrollbar chrome on the declared, scrollable spec-chip tracks
      (data-clip-ok scroll containers) while keeping them scrollable. The inline
      styles set scrollbar-width:none (Firefox); WebKit needs this pseudo. */
@@ -6365,6 +6509,16 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     height: "var(--sc-card-image-h, auto)",
     // 132 × (4/3) = 176 → the spec's 132×176 portrait. Velvet's token wins.
     aspectRatio: "var(--sc-card-image-aspect, 3 / 4)",
+    // The aspect box is a PREFERENCE, never a floor: in a definite-height
+    // container (velvet's deck band) the box caps at the area's height and
+    // the photo object-fit:covers into whatever remains, so the card always
+    // fits the band. In auto-height contexts (chat/PDP stacked layout)
+    // 100% resolves against auto → no-op, the 3/4 box stands unchanged.
+    // Regression this guards: #3591 shaved the solo-deck band 24px and the
+    // fixed 176px box pushed the CTA/link row past the card bottom
+    // (velvet-deck-product-card-fit.spec.ts).
+    maxHeight: "100%",
+    overflow: "hidden",
     alignSelf: "var(--sc-card-image-align, start)",
     minWidth: "0",
     minHeight: "0"
@@ -6534,7 +6688,12 @@ function renderProductCardInner(product, density, resolved, visibleFacts, ctas,
     justifyContent: "space-between",
     gap: "var(--sc-card-cta-gap, 0.5rem)",
     marginTop: "0",
-    minWidth: "0"
+    minWidth: "0",
+    // Lift the CTA pair off the card's bottom edge where a canvas overlays
+    // chrome there (velvet's deck pager circles half-lap that edge — the
+    // "Product Page" link sat right under them on crushed cards). The
+    // canvas sets the token; default 0 keeps every other surface as-is.
+    paddingBottom: "var(--sc-card-cta-padding-bottom, 0)"
   };
   const primaryCtaStyles = {
     display: "inline-flex",
@@ -11977,4 +12136,4 @@ export {
    * SPDX-License-Identifier: BSD-3-Clause
    *)
 */
-//# sourceMappingURL=chunk-LFYTHTQS.js.map
+//# sourceMappingURL=chunk-F6ZXHGAT.js.map