@aglyn/plugins-ai 1.0.0-beta.236 → 1.0.0-beta.238

package/src/lib/layout-language/ai-layout-compiler.js

@@ -22,8 +22,9 @@ import { AI_INSTANCE_REF_PROP } from "../runtime/ai-node-tree.js";
 import { aiPageScrollInteraction } from "../runtime/ai-page-links.js";
 import { aiLayoutFitText, aiLayoutQuoteGap, aiLayoutWords } from "./ai-layout-copy.js";
 import { AI_LAYOUT_GROUP_KINDS, AI_LAYOUT_MAX_ITEMS } from "./ai-layout-language.js";
-import { aiLayoutDesignChoices, aiLayoutGroupVariant } from "./ai-layout-design.js";
+import { aiLayoutDesignChoices, aiLayoutFamily, aiLayoutGroupVariant } from "./ai-layout-design.js";
 import { AI_LAYOUT_FEATURED_RECORDS, AI_LAYOUT_LISTING_ELEMENTS, aiLayoutListingAt } from "./ai-layout-listings.js";
+import { aiStorefrontItemIcons } from "./ai-layout-storefront.js";
 import { aiLayoutRenamedLabel, aiLayoutResolveLink } from "./ai-layout-links.js";
 import { AI_LAYOUT_FRAMES, AiLayoutTreeBuilder } from "./ai-layout-tree.js";
 /**
@@ -166,6 +167,9 @@ function compileSection(page, raw, index) {
     if (raw.blocks.some((block)=>block.kind === 'quotes') && !blocks.some((block)=>AI_LAYOUT_GROUP_KINDS.has(block.kind) || block.kind === 'component')) {
         page.quotesOnly.push(index);
     }
+    // A store's Shop page opens on its grid (AGL-3676): its first section is a
+    // short title bar, never a hero, so the products start above the fold.
+    if (index === 0 && shopGridAt(page) > 0) return shopTitle(scope, blocks);
     // A section the site's records fill — its catalog, its blog — shows them
     // through the element that keeps them, around the words the design gave it (AGL-3676).
     const listed = aiLayoutListingAt((_page_targets_listings = page.targets.listings) != null ? _page_targets_listings : [], page.targets.pageId, index);
@@ -385,7 +389,11 @@ function compileSection(page, raw, index) {
 }
 /** A band the page has room for: past two brand or two dark bands, a soft one instead. */ function settleBand(page, band, at) {
     if (band !== 'brand' && band !== 'dark') return band;
-    if (page.strong[band] >= AI_LAYOUT_MAX_STRONG_BANDS) {
+    // A storefront keeps one dark band at most (AGL-3676): the beta.237 Willow
+    // Wick home ran its text bands dark, and read as big empty dark slabs
+    // between the products.
+    const most = band === 'dark' && page.design && aiLayoutFamily(page.design.input.kind) === 'retail' ? 1 : AI_LAYOUT_MAX_STRONG_BANDS;
+    if (page.strong[band] >= most) {
         page.settled.push({
             at: `${at}.band`,
             what: `a third ${band} band drawn soft`
@@ -819,8 +827,39 @@ export function destinationProps(destination) {
  * text (rule 9), and no source is set here: the compiler stays pure, and
  * `ai-layout-pictures.ts` fills the slot with a photo the site serves itself
  * once the page is checked.
- */ function image(scope, block, room) {
+ */ /**
+ * The site kinds whose galleries open in a lightbox by default (AGL-3717): a
+ * portfolio's or a photographer's work is looked at, not skimmed, and a
+ * visitor who presses a picture expects to see it large and step through the
+ * rest. Every other kind opens a picture only where the design says so.
+ */ export const AI_LIGHTBOX_GALLERY_KINDS = new Set([
+    'portfolio',
+    'photography'
+]);
+/** The `to` that opens an image block's picture in a lightbox (AGL-3717). */ export const AI_LAYOUT_LIGHTBOX_TO = 'lightbox';
+/** Whether this page's galleries open in a lightbox by default. */ export function aiOpensGalleriesInLightbox(page) {
+    var _page_design;
+    const kind = (_page_design = page.design) == null ? void 0 : _page_design.input.kind;
+    return Boolean(kind && AI_LIGHTBOX_GALLERY_KINDS.has(kind));
+}
+/**
+ * The Image props that make a picture open in a lightbox: as one gallery
+ * with the section's other pictures, named for the section, and with the
+ * item's title as its caption. The Image element reads exactly these.
+ */ function lightboxProps(scope, caption) {
+    var _scope_page_plan_sections_scope_index;
+    const name = aiLayoutFitText(scope.heading, 'alt') || aiLayoutFitText((_scope_page_plan_sections_scope_index = scope.page.plan.sections[scope.index]) == null ? void 0 : _scope_page_plan_sections_scope_index.name, 'alt') || `Gallery ${scope.index + 1}`;
+    const words = aiLayoutFitText(caption, 'alt');
+    return _extends({
+        lightbox: true,
+        lightboxGallery: name
+    }, words ? {
+        lightboxCaption: words
+    } : {});
+}
+function image(scope, block, room) {
     var _aiIconOfWord;
+    var _block_to;
     const { page } = scope;
     const alt = aiLayoutFitText(block.text, 'alt');
     if (!alt) return null;
@@ -840,10 +879,13 @@ export function destinationProps(destination) {
     }, {
         color: 'primary.main'
     }, null, 'imageIcon');
-    const picture = tree.add('image', {
+    // `to: lightbox` opens the picture large (AGL-3717); one picture is its
+    // own gallery, so it opens alone unless the section has more.
+    const opensLarge = ((_block_to = block.to) == null ? void 0 : _block_to.trim().toLowerCase()) === AI_LAYOUT_LIGHTBOX_TO;
+    const picture = tree.add('image', _extends({
         alt,
         objectFit: 'cover'
-    }, {
+    }, opensLarge ? lightboxProps(scope) : {}), {
         position: 'absolute',
         top: 0,
         left: 0,
@@ -1020,11 +1062,21 @@ function group(scope, block, room) {
     const placed = componentOf(scope.page.targets, block.to);
     if (placed) return instances(scope, placed, items, perRow);
     const design = scope.page.design;
+    const retail = !!design && aiLayoutFamily(design.input.kind) === 'retail';
+    // A store's making, shown: its steps as pictures over their words (AGL-3676),
+    // where the page has the pictures for them.
+    if (retail && block.kind === 'steps' && room === 'full' && items.length >= 2 && items.length <= 4 && picturesLeft(scope.page) >= items.length) {
+        const drawn = designedGroup(scope, 'articles', items, room);
+        if (drawn) return drawn;
+    }
     if (rule1(scope)) {
         var _scope_words;
         // Picture cards the design draws are the compiler's, not a block typed out
-        // by hand (`repeatsCompiled`, AGL-3660); every other repeat stays compact.
+        // by hand (`repeatsCompiled`, AGL-3660), and so are a storefront's icon
+        // columns (AGL-3676): the beta.237 Willow Wick home, on a paid plan, drew
+        // every other group compact — four bands of a title and a sentence.
         const variant = design && block.kind === 'cards' && block.style !== 'quiet' ? aiLayoutGroupVariant(design.input, design.choices, (_scope_words = scope.words) != null ? _scope_words : '') : null;
+        if (variant === 'icons') return iconColumns(scope, items, room);
         const pictured = (variant === 'pictures' || variant === 'articles') && room === 'full' && picturesLeft(scope.page) >= items.length;
         return pictured && designedGroup(scope, variant, items, room) || compactGroup(scope, block, items, perRow);
     }
@@ -1423,6 +1475,7 @@ function instances(scope, placed, items, perRow) {
         flow[lead] = design.choices.hero === 'split' ? title : _extends({}, title, {
             style: 'large'
         });
+        sellingHero(scope, flow);
         const given = images[0] ? aiLayoutFitText(images[0].text, 'alt') : '';
         return hero(scope, raw, flow, given ? {
             alt: given,
@@ -1825,6 +1878,7 @@ function instances(scope, placed, items, perRow) {
             variant: type
         }, muted(scope), null, 'text') : null;
     if (variant === 'cards') return null;
+    if (variant === 'icons') return iconColumns(scope, items, room);
     const pictured = variant === 'pictures' || variant === 'articles';
     if (variant === 'ruled' || pictured && (room !== 'full' || picturesLeft(page) < items.length)) {
         const perRow = across(items.length, room, 'cards');
@@ -1907,12 +1961,19 @@ function instances(scope, placed, items, perRow) {
         const span = !mosaic ? 12 / perRow : lone ? 12 : wide ? 7 : 5;
         const aspect = !mosaic ? variant === 'articles' ? '3 / 2' : portrait ? '4 / 5' : '4 / 3' : lone ? '21 / 9' : wide ? '4 / 3' : '4 / 5';
         // The picture is its own frame: its shape its one style, so a grid of them repeats no inline style.
+        // A portfolio's or a photographer's gallery opens in a lightbox, its
+        // pictures one gallery with the item's title as each caption (AGL-3717).
+        const opens = variant === 'pictures' && aiOpensGalleriesInLightbox(page);
+        // A store's collection tiles open its Shop page (AGL-3676).
+        const shop = variant === 'pictures' && !opens && aiLayoutFamily(design.input.kind) === 'retail' ? shopPageOf(page) : null;
         const photo = designImage(scope, {
             alt: standInAlt(scope, item.title || item.text),
             given: false
-        }, {
+        }, _extends({
             width: '100%'
-        }, {
+        }, opens ? lightboxProps(scope, item.title) : {}, shop ? {
+            screenId: shop
+        } : {}), {
             aspectRatio: {
                 xs: '4 / 3',
                 md: aspect
@@ -1978,18 +2039,24 @@ function instances(scope, placed, items, perRow) {
         style: 'secondary'
     } : null;
     const index = listing.placements.find((placement)=>placement.role === 'index' && placement.screenId !== page.targets.pageId);
-    return index ? {
+    if (!index) return null;
+    return {
         kind: 'button',
-        text: 'Shop all',
+        text: listing.kind === 'tracks' ? 'All music' : 'Shop all',
         to: `page:${index.screenId}`,
         style: 'secondary'
-    } : null;
+    };
 }
 function listingSection(scope, blocks, placed) {
     var _ref;
     var _page_plan_sections_index_name, _page_plan_sections_index, _page_options_sectionIds;
     const { page, index, at } = scope;
     const { listing, role } = placed;
+    if (listing.kind === 'reviews') return reviewsSection(scope, blocks);
+    if (listing.kind === 'signup') return signupSection(scope, blocks);
+    // The grid straight under a Shop page's title bar opens on the products:
+    // the title bar already heads the page (AGL-3676).
+    const underTitle = listing.kind === 'products' && role === 'index' && index === 1 && shopGridAt(page) === 1;
     const left = blocks.filter((block)=>LISTING_REPLACES.has(block.kind));
     if (left.length) {
         page.settled.push({
@@ -1997,7 +2064,7 @@ function listingSection(scope, blocks, placed) {
             what: `${left.map((block)=>block.kind).join(', ')} left out: the section lists the site's own ${listing.kind}`
         });
     }
-    const kept = blocks.filter((block)=>!LISTING_REPLACES.has(block.kind)).map((_0)=>{
+    const kept = underTitle ? [] : blocks.filter((block)=>!LISTING_REPLACES.has(block.kind)).map((_0)=>{
         let { col: _col } = _0, block = _object_without_properties_loose(_0, [
             "col"
         ]);
@@ -2011,7 +2078,7 @@ function listingSection(scope, blocks, placed) {
             all
         ];
     }
-    if (!words.some((block)=>speaksHeading(scope, block))) {
+    if (!underTitle && !words.some((block)=>speaksHeading(scope, block))) {
         var _page_plan_sections_index1;
         // Every band of records is headed: the plan's name for it, or on a first section the page's title.
         words.unshift({
@@ -2064,7 +2131,13 @@ function listingSection(scope, blocks, placed) {
     } : {}), null, parts, 'content');
     const container = tree.add('muiContainer', {
         maxWidth: 'lg'
-    }, {
+    }, underTitle ? {
+        pt: {
+            xs: 2,
+            md: 3
+        },
+        pb: _extends({}, SECTION_PADDING)
+    } : {
         py: index === 0 ? _extends({}, HERO_PADDING) : _extends({}, SECTION_PADDING)
     }, [
         content
@@ -2075,10 +2148,268 @@ function listingSection(scope, blocks, placed) {
         ariaLabel: sectionLabel(name, index)
     }, scope.band === 'dark' ? {
         colorScheme: 'dark'
-    } : {}), bandSx(scope.band), [
+    } : {}), underTitle ? null : bandSx(scope.band), [
         container
     ], 'section', (_ref = (_page_options_sectionIds = page.options.sectionIds) == null ? void 0 : _page_options_sectionIds[index]) != null ? _ref : sectionIdOf(index));
 }
+/** What a store's reviews are headed with where neither the design nor the plan says. */ export const AI_LAYOUT_REVIEWS_HEADING = 'What our customers say';
+/**
+ * A store's own customer reviews (AGL-3676): the commerce plugin's Product
+ * reviews in its store-wide scope, carrying the section's heading itself.
+ * It lists approved reviews with their star ratings, and on a published page
+ * with none — every store that just opened — it shows nothing, heading and
+ * all, so the band takes no room until a shopper has written one. No review
+ * is ever written here: the design's quotes, if it gave any, were left out.
+ */ function reviewsSection(scope, blocks) {
+    var _page_plan_sections_index;
+    const { page, index, at } = scope;
+    const tree = page.tree;
+    const given = blocks.find((block)=>speaksHeading(scope, block));
+    const heading = aiLayoutWords(given == null ? void 0 : given.text, 'heading', page.targets.facts) || aiLayoutFitText((_page_plan_sections_index = page.plan.sections[index]) == null ? void 0 : _page_plan_sections_index.name, 'heading') || AI_LAYOUT_REVIEWS_HEADING;
+    page.settled.push({
+        at,
+        what: "the store's own reviews placed: shown once shoppers leave them, never written for them"
+    });
+    const id = tree.add(AI_LAYOUT_LISTING_ELEMENTS.reviews, {
+        scope: 'store',
+        heading,
+        maxItems: String(AI_LAYOUT_FEATURED_RECORDS.reviews)
+    }, // The padding is the element's, so a store with no reviews yet keeps no empty band.
+    {
+        py: _extends({}, SECTION_PADDING)
+    }, null, 'reviews');
+    // The reviews are what the section shows: its shoppers' to write.
+    noted(scope, [
+        id,
+        id
+    ]);
+    const container = tree.add('muiContainer', {
+        maxWidth: 'lg'
+    }, null, [
+        id
+    ], 'container');
+    return designedRoot(scope, [
+        container
+    ], bandSx(scope.band), scope.band === 'dark');
+}
+/** What a store's sign-up is headed with where neither the design nor the plan says. */ export const AI_LAYOUT_SIGNUP_HEADING = 'Join our newsletter';
+/**
+ * A store's newsletter sign-up (AGL-3676): the design's heading and words
+ * beside the commerce plugin's Newsletter signup field, or over it on a
+ * centered band. Any form or button the design drew for it is the field's.
+ */ function signupSection(scope, blocks) {
+    const { page, index, at } = scope;
+    const tree = page.tree;
+    const flow = blocks.filter((block)=>WORD_KINDS.has(block.kind) && block.kind !== 'button').map((_0)=>{
+        let { col: _col } = _0, block = _object_without_properties_loose(_0, [
+            "col"
+        ]);
+        return block;
+    });
+    if (!flow.some((block)=>speaksHeading(scope, block))) {
+        var _page_plan_sections_index;
+        flow.unshift({
+            kind: 'heading',
+            text: ((_page_plan_sections_index = page.plan.sections[index]) == null ? void 0 : _page_plan_sections_index.name) || AI_LAYOUT_SIGNUP_HEADING
+        });
+    }
+    page.settled.push({
+        at,
+        what: "the store's newsletter sign-up placed"
+    });
+    const field = tree.add(AI_LAYOUT_LISTING_ELEMENTS.signup, {
+        buttonLabel: 'Subscribe'
+    }, null, null, 'signup');
+    noted(scope, [
+        field,
+        field
+    ]);
+    const words = compileFlow(scope, flow, scope.centered ? 'full' : 'half');
+    const body = scope.centered ? tree.add('muiStack', {
+        spacing: '4',
+        alignItems: 'center'
+    }, null, [
+        words,
+        tree.add('muiContainer', {
+            maxWidth: 'sm',
+            disableGutters: true
+        }, null, [
+            field
+        ], 'measure')
+    ], 'content') : designRow(scope, [
+        ...words ? [
+            {
+                id: words,
+                size: 'xs:12 md:6'
+            }
+        ] : [],
+        {
+            id: field,
+            size: 'xs:12 md:6'
+        }
+    ], '6');
+    const container = tree.add('muiContainer', {
+        maxWidth: 'lg'
+    }, {
+        py: _extends({}, SECTION_PADDING)
+    }, [
+        body
+    ], 'container');
+    return designedRoot(scope, [
+        container
+    ], bandSx(scope.band), scope.band === 'dark');
+}
+/** A store's Shop page's grid section on this page, by plan index; -1 where this page is not its Shop page. */ function shopGridAt(page) {
+    var _page_targets_listings, _ref;
+    var _products_placements_find;
+    const products = ((_page_targets_listings = page.targets.listings) != null ? _page_targets_listings : []).find((listing)=>listing.kind === 'products');
+    return (_ref = products == null ? void 0 : (_products_placements_find = products.placements.find((placement)=>placement.role === 'index' && placement.screenId === page.targets.pageId)) == null ? void 0 : _products_placements_find.section) != null ? _ref : -1;
+}
+/** A store's Shop page, by its id, where this page is another page of the store; `null` otherwise. */ function shopPageOf(page) {
+    var _page_targets_listings;
+    var _products_placements_find;
+    const products = ((_page_targets_listings = page.targets.listings) != null ? _page_targets_listings : []).find((listing)=>listing.kind === 'products');
+    const shop = products == null ? void 0 : (_products_placements_find = products.placements.find((placement)=>placement.role === 'index')) == null ? void 0 : _products_placements_find.screenId;
+    return shop && shop !== page.targets.pageId && page.targets.pages.some((entry)=>entry.id === shop) ? shop : null;
+}
+/**
+ * A Shop page's opening, as a storefront's collection page opens (AGL-3676):
+ * the page's title and one line under it, on the page's own ground, with
+ * little room around them — no photo and no buttons — so the grid that
+ * follows starts above the fold. The beta.237 Willow Wick /shop opened on a
+ * tall candle photo and its words, the products below the fold.
+ */ function shopTitle(scope, blocks) {
+    var _ref;
+    const { page, at } = scope;
+    const left = blocks.filter((block)=>![
+            'eyebrow',
+            'heading',
+            'lede',
+            'text'
+        ].includes(block.kind));
+    if (left.length) {
+        page.settled.push({
+            at,
+            what: `${left.map((block)=>block.kind).join(', ')} left out: a Shop page opens on its title and its grid`
+        });
+    }
+    const heading = blocks.find((block)=>speaksHeading(scope, block));
+    const line = blocks.find((block)=>block.kind === 'lede' || block.kind === 'text');
+    const eyebrow = blocks.find((block)=>block.kind === 'eyebrow');
+    const flow = [
+        ...eyebrow ? [
+            eyebrow
+        ] : [],
+        {
+            kind: 'heading',
+            text: (_ref = heading == null ? void 0 : heading.text) != null ? _ref : page.plan.title
+        },
+        ...line ? [
+            {
+                kind: 'lede',
+                text: line.text
+            }
+        ] : []
+    ];
+    scope.band = 'plain';
+    scope.centered = false;
+    page.settled.push({
+        at,
+        what: "drawn as the Shop page's title bar, the grid under it"
+    });
+    const words = compileFlow(scope, flow, 'half');
+    const container = page.tree.add('muiContainer', {
+        maxWidth: 'lg'
+    }, {
+        pt: {
+            xs: 5,
+            md: 7
+        },
+        pb: {
+            xs: 1,
+            md: 2
+        }
+    }, [
+        words
+    ], 'container');
+    return designedRoot(scope, [
+        container
+    ], null, false);
+}
+/**
+ * A storefront's home hero sells (AGL-3676): it opens the shop. Where the
+ * design gave it no button to the Shop page, "Shop all" leads its buttons,
+ * and any other primary button steps back to secondary beside it.
+ */ function sellingHero(scope, flow) {
+    const design = scope.page.design;
+    if (!(design == null ? void 0 : design.input.home) || aiLayoutFamily(design.input.kind) !== 'retail') return;
+    const shop = shopPageOf(scope.page);
+    if (!shop || flow.some((block)=>block.kind === 'button' && block.to === `page:${shop}`)) return;
+    const firstButton = flow.findIndex((block)=>block.kind === 'button');
+    for (const [at, block] of flow.entries()){
+        var _block_style;
+        if (block.kind === 'button' && ((_block_style = block.style) != null ? _block_style : 'primary') === 'primary') flow[at] = _extends({}, block, {
+            style: 'secondary'
+        });
+    }
+    const shopAll = {
+        kind: 'button',
+        text: AI_LAYOUT_SHOP_ALL,
+        to: `page:${shop}`,
+        style: 'primary'
+    };
+    if (firstButton === -1) flow.push(shopAll);
+    else flow.splice(firstButton, 0, shopAll);
+    scope.page.settled.push({
+        at: scope.at,
+        what: `the hero opens the shop: "${AI_LAYOUT_SHOP_ALL}" leads its buttons`
+    });
+}
+/** The button a storefront's hero opens its shop with. */ export const AI_LAYOUT_SHOP_ALL = 'Shop all';
+/**
+ * A storefront's reasons to buy as open columns, each led by an icon over its
+ * title and words (AGL-3676): the icon the design named for it, else one its
+ * words suggest (shipping a truck, returns the arrows, small batch the hand),
+ * never the same twice in a row. One style key an element, so a row repeats
+ * no multi-key inline style (rule 16).
+ */ function iconColumns(scope, items, room) {
+    const { page } = scope;
+    const tree = page.tree;
+    const facts = page.targets.facts;
+    const iconWords = aiStorefrontItemIcons(items, (word)=>!!aiIconOfWord(word));
+    const perRow = across(items.length, room, 'cards');
+    const textAlign = scope.centered ? {
+        align: 'center'
+    } : {};
+    page.settled.push({
+        at: scope.at,
+        what: `${items.length} items drawn as icon columns`
+    });
+    const ids = items.map((item, position)=>{
+        var _aiIconOfWord;
+        const icon = (_aiIconOfWord = aiIconOfWord(iconWords[position])) != null ? _aiIconOfWord : AI_ICON_LIBRARY.star;
+        return tree.add('muiStack', _extends({
+            spacing: '1.5'
+        }, scope.centered ? {
+            alignItems: 'center'
+        } : {}), null, [
+            tree.add(AI_ICON_COMPONENT_ID, {
+                iconId: icon.id,
+                size: '32'
+            }, accent(scope), null, 'icon'),
+            item.title.trim() ? tree.add('muiTypography', _extends({
+                children: aiLayoutWords(item.title, 'itemTitle', facts),
+                variant: 'h6',
+                component: itemElement(scope)
+            }, textAlign), null, null, 'title') : null,
+            item.text.trim() ? tree.add('muiTypography', _extends({
+                children: aiLayoutWords(item.text, 'itemText', facts),
+                variant: 'body2'
+            }, textAlign), muted(scope), null, 'text') : null
+        ], 'iconItem');
+    });
+    return layOut(scope, noted(scope, ids), perRow, '5', 'icons');
+}
 /**
  * The element that lists the records, bound to them: the Product grid over
  * the site's catalog, or Collection Entries over its blog with one post's
@@ -2090,6 +2421,22 @@ function listingSection(scope, blocks, placed) {
     const shown = featured ? AI_LAYOUT_FEATURED_RECORDS[listing.kind] : 12;
     const element = AI_LAYOUT_LISTING_ELEMENTS[listing.kind];
     let id;
+    if (listing.kind === 'tracks') {
+        // An empty player (AGL-3716): its "add your tracks" state, which the owner
+        // fills from their own media library. No source, ever — the section's
+        // heading and words are the model's, the recordings the owner's.
+        id = tree.add(element, null, null, null, 'player');
+        page.settled.push({
+            at: scope.at,
+            what: 'an empty music player placed for the owner’s own tracks'
+        });
+        // The player is what the section shows: its tracks are the owner's to add.
+        noted(scope, [
+            id,
+            id
+        ]);
+        return id;
+    }
     if (listing.kind === 'products') {
         id = tree.add(element, _extends({
             source: 'all',
@@ -2098,11 +2445,22 @@ function listingSection(scope, blocks, placed) {
         }, featured ? {
             maxItems: String(shown)
         } : {
-            pageSize: String(shown)
+            pageSize: String(shown),
+            showSort: true,
+            showCategories: true
         }, {
             cardStyle: 'photo',
-            emptyText: 'New products are on their way.'
-        }), null, null, 'products');
+            // A storefront's cards sell from the grid (AGL-3676): Add to cart on a
+            // product with one variant, Choose options on one with several.
+            quickAdd: true,
+            // A store that opens before its first products are in says so, with a
+            // way to hear when they land (AGL-3676): never placeholder products.
+            emptyTitle: AI_LAYOUT_STORE_EMPTY.title,
+            emptyText: listing.emptyAction ? AI_LAYOUT_STORE_EMPTY.text : AI_LAYOUT_STORE_EMPTY.textAlone
+        }, listing.emptyAction ? {
+            emptyActionLabel: listing.emptyAction.label,
+            emptyActionHref: listing.emptyAction.href
+        } : {}), null, null, 'products');
     } else {
         id = postsElement(scope, listing, featured ? shown : COLLECTION_INDEX_POSTS);
     }
@@ -2113,6 +2471,11 @@ function listingSection(scope, blocks, placed) {
     }, ()=>id));
     return id;
 }
+/** What a store's Product grid says while the store lists nothing yet (AGL-3676). */ export const AI_LAYOUT_STORE_EMPTY = {
+    title: 'New pieces are on the way',
+    text: 'Our first pieces are being finished now. Get in touch and we will let you know the moment they land.',
+    /** Said where the site has no page to get in touch on. */ textAlone: 'Our first pieces are being finished now. Check back soon.'
+};
 /** The most posts a page of the site lists where it is the writing's own page. */ const COLLECTION_INDEX_POSTS = 9;
 /** The blog's posts as the site's design lists them: a grid of covers, or a ruled list with the dates. */ function postsElement(scope, listing, limit) {
     var _page_design;