efficient-storefront-blocks 0.32.2 → 0.32.4

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # Changelog
 
+## 0.32.4 — 2026-10-15
+
+- **A wheel page fits a phone in "Select by specs".** On a 390px screen the
+  buy column grew to 406px once the shopper picked a size that is out of
+  stock: the "Notify me when back" row could not get narrower than its email
+  field's built-in width (about 20 characters) plus the button. The field is
+  now `w-0` (it still fills the row), and below 1100px the hero collapses to
+  `minmax(0,1fr)`, as the stacked layout already did, so one wide row can no
+  longer widen the column. Nothing moves on a wider screen.
+- **A long product name fits a phone.** On hartesmetal.com/wheels/stormbreaker
+  at 390px the name "STORMBREAKER", at the site's 60px Heading size, was 454px
+  wide and pushed the hero to 474px. The block around the name is now an
+  inline-size query container, and the name's size is capped at
+  `100cqi / (longest word × 0.72em)` — the header wordmark's fit, applied to
+  the one word that cannot wrap. Measured after: 40.5px, 306px wide, the page
+  390px. A name that already fits (any name on a wide screen, "Strike" on a
+  phone) keeps the site's size.
+
+## 0.32.3 — 2026-10-15
+
+**Every lightbox opens above the header, and ✕ closes it** (card [ADD] INOVIT
+And Hartes Metal US Websites). On hartesmetal.com's wheel pages the owner
+photos ("Out there.", a Gallery B grid) opened a lightbox whose ✕ sat under the
+fixed site header: pressing it hit the header's logo and opened the homepage,
+at 1440 and on a 390 phone. The dialog said `z-[100]` and the header `z-50`,
+but the dialog was drawn inside its section, which is `relative z-[2]`, and a
+z-index only orders things inside one stacking context.
+
+- **One lightbox frame**, `components/Lightbox` (+ `LightboxClose`). The three
+  lightboxes each had their own copy of the overlay: the wheel page's image
+  viewer (`ProductLightbox`), /gallery's (`GalleryShowcase`) and the
+  owner-photo grid's (`GalleryItem`). Each keeps its own content and look; the
+  frame now owns what they must do alike:
+  - drawn through a portal at the end of the themed `<main>`, out of every
+    section, and carrying its section's theme with it (on `<body>` the
+    site's accent and faces would be lost);
+  - its layer is the named token `--sf-layer-lightbox` (app/globals.css, a
+    step of 100; the value is the 100 they wrote by hand, so nothing
+    re-orders);
+  - ✕, Esc and a click on the backdrop close it; ◁ / ▷ keys flip photos;
+  - focus moves in, Tab cannot leave, and focus goes back to the tile that
+    opened it (none of the three did this before);
+  - the page behind does not scroll.
+- `useLightbox` is state only now; its Esc and scroll lock moved into the frame.
+- `react-dom` is a declared peer of the source (the npm package already had it).
+- Guard: `scripts/test-lightbox-above-the-header.tsx` mounts all three inside a
+  `z-index: 2` section beside a fixed `z-index: 50` header.
+
 ## 0.32.2 — 2026-10-15
 
 **A hand-picked Product Grid draws its wheels on the published page** (card

package/dist/chunks/{PreviewFooter-HSKRHXFJ.js → PreviewFooter-DNWYCTDR.js}

@@ -1 +1 @@
-"use client";import{ba as p,l as m}from"./chunk-5XYF5FZK.js";import{Pc as u,Pd as d,jg as c}from"./chunk-QOXKQV6L.js";import"./chunk-GD6ZFQC7.js";import"./chunk-NEQXU52M.js";import{Ga as s,La as a,Ma as f,Qa as g}from"./chunk-IKG5YKP7.js";import"./chunk-VBQY6H55.js";import"./chunk-Y6SLVHK3.js";import{Render as P}from"efficient-easel/render";import{jsx as k}from"react/jsx-runtime";function i({footerBlock:r,rootProps:e,headerSettings:o,siteName:t,legalName:l,foundedYear:n,socialLinks:v}){let I=m({root:{props:{...e??{},kind:d}},content:[r],zones:{}});return k(s.Provider,{value:{logoUrl:o?.logoUrl??null,logoReversed:o?.logoReversed??null,logoInkIsDark:o?.logoInkIsDark??null,siteName:t,legalName:l??null,foundedYear:n??null,socialLinks:v??g},children:k(P,{config:p,data:I})})}import{jsx as h}from"react/jsx-runtime";function F(){let{footerBlock:r,editFooter:e}=c(),{settings:o,websiteName:t}=a();if(!r)return null;let l=o?{logoUrl:o.logoUrl,logoReversed:o.logoReversed??null,logoInkIsDark:o.logoInkIsDark??null}:null;return h("div",{className:"sf-preview-footer-pick",onClick:e?n=>{n.stopPropagation(),e()}:void 0,style:e?{cursor:"pointer"}:void 0,title:e?u("Edit the site footer \u2192"):void 0,children:h(i,{footerBlock:r,headerSettings:l,siteName:t?.trim()||f})})}export{F as default};
+"use client";import{ba as p,l as m}from"./chunk-QMI6XRAE.js";import{Pc as u,Pd as d,jg as c}from"./chunk-QOXKQV6L.js";import"./chunk-GD6ZFQC7.js";import"./chunk-NEQXU52M.js";import{Ga as s,La as a,Ma as f,Qa as g}from"./chunk-IKG5YKP7.js";import"./chunk-VBQY6H55.js";import"./chunk-Y6SLVHK3.js";import{Render as P}from"efficient-easel/render";import{jsx as k}from"react/jsx-runtime";function i({footerBlock:r,rootProps:e,headerSettings:o,siteName:t,legalName:l,foundedYear:n,socialLinks:v}){let I=m({root:{props:{...e??{},kind:d}},content:[r],zones:{}});return k(s.Provider,{value:{logoUrl:o?.logoUrl??null,logoReversed:o?.logoReversed??null,logoInkIsDark:o?.logoInkIsDark??null,siteName:t,legalName:l??null,foundedYear:n??null,socialLinks:v??g},children:k(P,{config:p,data:I})})}import{jsx as h}from"react/jsx-runtime";function F(){let{footerBlock:r,editFooter:e}=c(),{settings:o,websiteName:t}=a();if(!r)return null;let l=o?{logoUrl:o.logoUrl,logoReversed:o.logoReversed??null,logoInkIsDark:o.logoInkIsDark??null}:null;return h("div",{className:"sf-preview-footer-pick",onClick:e?n=>{n.stopPropagation(),e()}:void 0,style:e?{cursor:"pointer"}:void 0,title:e?u("Edit the site footer \u2192"):void 0,children:h(i,{footerBlock:r,headerSettings:l,siteName:t?.trim()||f})})}export{F as default};