@aglyn/plugins-ai 1.0.0-beta.237 → 1.0.0-beta.239

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
@@ -2016,9 +2040,10 @@ function instances(scope, placed, items, perRow) {
     } : null;
     const index = listing.placements.find((placement)=>placement.role === 'index' && placement.screenId !== page.targets.pageId);
     if (!index) return null;
+    const text = listing.kind === 'tracks' ? 'All music' : listing.kind === 'records' ? 'See all' : 'Shop all';
     return {
         kind: 'button',
-        text: listing.kind === 'tracks' ? 'All music' : 'Shop all',
+        text,
         to: `page:${index.screenId}`,
         style: 'secondary'
     };
@@ -2028,6 +2053,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 +2065,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 +2079,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 +2132,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 +2149,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 +2451,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,
@@ -2165,6 +2462,8 @@ function listingSection(scope, blocks, placed) {
             emptyActionLabel: listing.emptyAction.label,
             emptyActionHref: listing.emptyAction.href
         } : {}), null, null, 'products');
+    } else if (listing.kind === 'records') {
+        id = recordsElement(scope, listing, featured ? shown : null);
     } else {
         id = postsElement(scope, listing, featured ? shown : COLLECTION_INDEX_POSTS);
     }
@@ -2281,6 +2580,95 @@ function listingSection(scope, blocks, placed) {
         card
     ], 'posts');
 }
+// ── A dataset's records (AGL-3616) ───────────────────────────────────────
+/** A field whose name says it is a record's kicker: its category, role, time or place. */ const RECORD_KICKER = /\b(category|categories|type|kind|role|title|position|section|course|date|dates|time|times|when|day|days|location|place|where|venue|city|duration|level|tag|tags)\b/i;
+/** A field whose name says it is a record's words: its description, bio or answer. */ const RECORD_BODY = /\b(description|summary|details?|about|bio|biography|answer|text|notes?|body|blurb|overview|excerpt|ingredients|includes)\b/i;
+/** A dataset of questions and answers, listed as a ruled list rather than cards. */ const RECORD_QUESTIONS = /\b(faqs?|questions?|q ?& ?a)\b/i;
+/** The fields a record's card shows: its name, a kicker line and its words, each by id. */ export function aiLayoutRecordCardFields(fields) {
+    var _ref, _ref1, _ref2, _ref3;
+    var _texts_find, _rest_find, _rest_find1, _rest_find2;
+    const texts = fields.filter((field)=>field.type === 'text' || field.type === 'sorted');
+    const title = (_ref = (_texts_find = texts.find((field)=>field.type === 'text')) == null ? void 0 : _texts_find.id) != null ? _ref : null;
+    const rest = texts.filter((field)=>field.id !== title);
+    const body = (_ref1 = (_rest_find = rest.find((field)=>field.type === 'text' && RECORD_BODY.test(field.name))) == null ? void 0 : _rest_find.id) != null ? _ref1 : null;
+    const kicker = (_ref2 = (_rest_find1 = rest.find((field)=>field.id !== body && RECORD_KICKER.test(field.name))) == null ? void 0 : _rest_find1.id) != null ? _ref2 : null;
+    // Failing a named one, the next text field is the record's words.
+    const words = (_ref3 = body != null ? body : (_rest_find2 = rest.find((field)=>field.type === 'text' && field.id !== kicker)) == null ? void 0 : _rest_find2.id) != null ? _ref3 : null;
+    return {
+        title,
+        kicker,
+        body: words
+    };
+}
+/**
+ * A dataset's records, as the site's design lists them: a Box that repeats
+ * its one card over the dataset — the platform's own repeat, which the page
+ * renders once per record — or, for questions and answers, a ruled list.
+ * The card binds the record's fields as `{{item.<field>}}`: its name as the
+ * item's title, a kicker over it (its category, role or time), and its words.
+ * A featured band shows the first few; a page of its own, every record.
+ */ function recordsElement(scope, listing, limit) {
+    var _listing_fields;
+    const { page } = scope;
+    const tree = page.tree;
+    const fields = aiLayoutRecordCardFields((_listing_fields = listing.fields) != null ? _listing_fields : []);
+    const questions = RECORD_QUESTIONS.test(listing.name);
+    const textAlign = scope.centered && !questions ? {
+        align: 'center'
+    } : {};
+    const kicker = fields.kicker ? tree.add('muiTypography', _extends({
+        children: `{{item.${fields.kicker}}}`,
+        variant: 'overline',
+        component: 'p'
+    }, textAlign), accent(scope), null, 'recordKicker') : null;
+    const title = fields.title ? tree.add('muiTypography', _extends({
+        children: `{{item.${fields.title}}}`,
+        variant: questions ? 'h6' : 'h5',
+        component: itemElement(scope)
+    }, textAlign), null, null, 'recordTitle') : null;
+    const body = fields.body ? tree.add('muiTypography', _extends({
+        children: `{{item.${fields.body}}}`,
+        variant: 'body2'
+    }, textAlign), muted(scope), null, 'recordBody') : null;
+    page.settled.push({
+        at: scope.at,
+        what: `${listing.name} listed from its dataset${questions ? ' as a ruled list' : ' as cards'}`
+    });
+    const card = questions ? tree.add('muiStack', {
+        spacing: '1'
+    }, {
+        borderTop: 1,
+        pt: 3
+    }, [
+        title,
+        body
+    ], 'record') : tree.add('muiStack', _extends({
+        spacing: '1'
+    }, scope.centered ? {
+        alignItems: 'center'
+    } : {}), null, [
+        kicker,
+        title,
+        body
+    ], 'record');
+    return tree.add(AI_LAYOUT_LISTING_ELEMENTS.records, _extends({
+        repeatDataset: listing.datasetId
+    }, limit ? {
+        repeatLimit: String(limit)
+    } : {}), questions ? {
+        display: 'grid',
+        gap: 3
+    } : {
+        display: 'grid',
+        gridTemplateColumns: {
+            xs: '1fr',
+            md: 'repeat(3, 1fr)'
+        },
+        gap: 5
+    }, [
+        card
+    ], 'records');
+}
 /** The id the compiled page's root is stored under. */ export const AI_LAYOUT_PAGE_ROOT_ID = CANVAS_ROOT_ELEMENT_ID;
 
 //# sourceMappingURL=ai-layout-compiler.js.map