@aglyn/plugins-ai 1.0.0-beta.237 → 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`
@@ -1054,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);
     }
@@ -1457,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,
@@ -1859,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');
@@ -1944,12 +1964,16 @@ function instances(scope, placed, items, perRow) {
         // 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) : {}), {
+        }, opens ? lightboxProps(scope, item.title) : {}, shop ? {
+            screenId: shop
+        } : {}), {
             aspectRatio: {
                 xs: '4 / 3',
                 md: aspect
@@ -2028,6 +2052,11 @@ function listingSection(scope, blocks, placed) {
     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({
@@ -2035,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"
         ]);
@@ -2049,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({
@@ -2102,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
@@ -2113,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
@@ -2157,6 +2450,9 @@ function listingSection(scope, blocks, placed) {
             showCategories: true
         }, {
             cardStyle: 'photo',
+            // 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,