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

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

@@ -23,8 +23,17 @@ 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 { aiLayoutResolveLink } from "./ai-layout-links.js";
+import { AI_LAYOUT_FEATURED_RECORDS, AI_LAYOUT_LISTING_ELEMENTS, aiLayoutListingAt } from "./ai-layout-listings.js";
+import { aiLayoutRenamedLabel, aiLayoutResolveLink } from "./ai-layout-links.js";
 import { AI_LAYOUT_FRAMES, AiLayoutTreeBuilder } from "./ai-layout-tree.js";
+/**
+ * What a section is called to a screen reader: its plan name, with any note
+ * the plan left in brackets taken out. A live blog plan (2026-10-09) named a
+ * section "reader notes and kind words [to be added by owner]"; carried into
+ * the label it read as a gap, and the page's gap pass took the section out.
+ */ function sectionLabel(name, index) {
+    return aiLayoutFitText(name.replace(/\[[^\]]*\]/g, ' ').replace(/\s+/g, ' ').trim(), 'note') || `Section ${index + 1}`;
+}
 /** A section root's id where the caller gives none. */ function sectionIdOf(index) {
     return `section-${index + 1}`;
 }
@@ -77,7 +86,8 @@ const componentOf = (targets, id)=>{
         } : null,
         pictures: 0,
         features: 0,
-        splitAt: -2
+        splitAt: -2,
+        quotesOnly: []
     };
     const roots = plan.sections.map((_, index)=>{
         var _sections_index;
@@ -95,7 +105,8 @@ const componentOf = (targets, id)=>{
         sectionRoots: roots,
         scrollTo: page.scrollTo,
         settled: page.settled,
-        itemIds: page.itemIds
+        itemIds: page.itemIds,
+        quotesOnly: page.quotesOnly
     };
 }
 /** The first icon the design names anywhere, else a sparkle: what an empty picture shows. */ function pageIconOf(sections) {
@@ -114,7 +125,7 @@ const componentOf = (targets, id)=>{
 }
 // ── A section ─────────────────────────────────────────────────────────────
 function compileSection(page, raw, index) {
-    var _raw_band, _ref, _ref1;
+    var _raw_band, _ref, _page_targets_listings, _ref1;
     var _raw_blocks_find, _page_plan_sections_index, _placedHere_, _page_plan_sections_index_name, _page_plan_sections_index1, _page_options_sectionIds;
     const at = `sections[${index}]`;
     const band = settleBand(page, (_raw_band = raw.band) != null ? _raw_band : 'plain', at);
@@ -150,6 +161,15 @@ function compileSection(page, raw, index) {
         });
         return false;
     });
+    // A section whose only items were those quotes has none left to show, and is
+    // not asked for them again: no answer can give words the brief did not (AGL-3676).
+    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 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);
+    if (listed) return listingSection(scope, blocks, listed);
     // The site's design draws the sections it has an arrangement for (AGL-3660).
     if (page.design) {
         const designed = designSection(scope, raw, blocks);
@@ -332,7 +352,7 @@ function compileSection(page, raw, index) {
     const name = ((_page_plan_sections_index1 = page.plan.sections[index]) == null ? void 0 : (_page_plan_sections_index_name = _page_plan_sections_index1.name) == null ? void 0 : _page_plan_sections_index_name.trim()) || `Section ${index + 1}`;
     return tree.add('section', _extends({
         element: 'section',
-        ariaLabel: aiLayoutFitText(name, 'note') || `Section ${index + 1}`
+        ariaLabel: sectionLabel(name, index)
     }, band === 'dark' ? {
         colorScheme: 'dark'
     } : {}), bandSx(band), [
@@ -723,16 +743,22 @@ function words(scope, block, place, variant, props, sx) {
 }
 function compileButton(scope, block) {
     var _block_style;
-    const label = aiLayoutFitText(block.text, 'label');
-    if (!label) return null;
-    const destination = aiLayoutResolveLink(block.to, label, scope.link, scope.page.targets);
+    const asked = aiLayoutFitText(block.text, 'label');
+    if (!asked) return null;
+    const destination = aiLayoutResolveLink(block.to, asked, scope.link, scope.page.targets);
     if (!destination) {
         scope.page.settled.push({
             at: scope.at,
-            what: `the button "${label}" has nowhere to go; left out`
+            what: `the button "${asked}" has nowhere to go; left out`
         });
         return null;
     }
+    // A button to a page merged into the blog names the blog (AGL-3676).
+    const label = aiLayoutRenamedLabel(asked, destination);
+    if (label !== asked) scope.page.settled.push({
+        at: scope.at,
+        what: `the button "${asked}" named for the blog: "${label}"`
+    });
     const style = (_block_style = block.style) != null ? _block_style : 'primary';
     // Over a photo, a quiet or outlined button takes the words' own color, as on a brand band.
     const onBrand = scope.band === 'brand' || !!scope.overPhoto && style !== 'primary';
@@ -1301,7 +1327,7 @@ function instances(scope, placed, items, perRow) {
     const name = ((_page_plan_sections_index = page.plan.sections[index]) == null ? void 0 : (_page_plan_sections_index_name = _page_plan_sections_index.name) == null ? void 0 : _page_plan_sections_index_name.trim()) || `Section ${index + 1}`;
     return page.tree.add('section', _extends({
         element: 'section',
-        ariaLabel: aiLayoutFitText(name, 'note') || `Section ${index + 1}`
+        ariaLabel: sectionLabel(name, index)
     }, dark ? {
         colorScheme: 'dark'
     } : {}, index === 0 && scope.overPhoto ? {
@@ -1916,6 +1942,278 @@ function instances(scope, placed, items, perRow) {
             cell.id
         ], 'cell')), variant);
 }
+// ── A section the site's records fill (AGL-3676) ──────────────────────────
+//
+// The section's words — its eyebrow, heading and lede — are the design's;
+// what it lists is the site's: its products through the commerce plugin's
+// Product grid, its posts through the content plugin's Collection Entries.
+// Any group the design drew for those records (cards naming products, a list
+// of post titles) stands in for them, and is left out.
+/** The block kinds a listing stands in for: the records the design described in words. */ const LISTING_REPLACES = new Set([
+    'cards',
+    'steps',
+    'stats',
+    'quotes',
+    'list',
+    'image',
+    'component'
+]);
+/** The tokens a post's card binds, filled per post when the page renders. */ export const AI_LAYOUT_POST_CARD_TOKENS = [
+    '{{entry.title}}',
+    '{{entry.excerpt}}',
+    '{{entry.date}}',
+    '{{entry.author}}',
+    '{{entry.url}}',
+    '{{entry.coverImage}}'
+];
+/** The tokens a post's card puts in a link or a picture, which the page's store admits whole. */ export const AI_LAYOUT_POST_ADDRESS_TOKENS = [
+    '{{entry.url}}',
+    '{{entry.coverImage}}'
+];
+/** The button under a featured band that opens the whole list, where the site has one and the design gave none. */ function listingAllButton(page, listing) {
+    if (listing.kind === 'posts') return listing.href ? {
+        kind: 'button',
+        text: 'All posts',
+        to: listing.href,
+        style: 'secondary'
+    } : null;
+    const index = listing.placements.find((placement)=>placement.role === 'index' && placement.screenId !== page.targets.pageId);
+    return index ? {
+        kind: 'button',
+        text: '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;
+    const left = blocks.filter((block)=>LISTING_REPLACES.has(block.kind));
+    if (left.length) {
+        page.settled.push({
+            at,
+            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)=>{
+        let { col: _col } = _0, block = _object_without_properties_loose(_0, [
+            "col"
+        ]);
+        return block;
+    });
+    const words = kept.filter((block)=>block.kind !== 'button' && block.kind !== 'form');
+    let actions = kept.filter((block)=>block.kind === 'button');
+    if (!actions.length && role === 'featured') {
+        const all = listingAllButton(page, listing);
+        if (all) actions = [
+            all
+        ];
+    }
+    if (!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({
+            kind: 'heading',
+            text: index === 0 ? page.plan.title : ((_page_plan_sections_index1 = page.plan.sections[index]) == null ? void 0 : _page_plan_sections_index1.name) || page.plan.title
+        });
+    }
+    page.settled.push({
+        at,
+        what: `lists the site's ${listing.kind} (${role})`
+    });
+    const tree = page.tree;
+    const centered = scope.centered;
+    const head = compileFlow(scope, words, centered ? 'full' : 'half');
+    const link = compileFlow(scope, actions, 'half');
+    // An editorial band's head: the words on the left, the way to the whole list on the right.
+    const top = head && link && !centered ? designRow(scope, [
+        {
+            id: head,
+            size: 'xs:12 md:8'
+        },
+        {
+            id: link,
+            size: 'xs:12 md:4',
+            sx: {
+                display: 'flex',
+                justifyContent: {
+                    xs: 'flex-start',
+                    md: 'flex-end'
+                }
+            }
+        }
+    ], '3', 'flex-end') : head;
+    const records = listingElement(scope, listing, role);
+    const parts = [
+        top ? centered ? tree.add('muiContainer', {
+            maxWidth: 'md',
+            disableGutters: true
+        }, null, [
+            top
+        ], 'measure') : top : null,
+        records,
+        centered || !head ? link : null
+    ].filter((id)=>!!id);
+    const content = tree.add('muiStack', _extends({
+        spacing: '6',
+        useFlexGap: true
+    }, centered ? {
+        alignItems: 'center'
+    } : {}), null, parts, 'content');
+    const container = tree.add('muiContainer', {
+        maxWidth: 'lg'
+    }, {
+        py: index === 0 ? _extends({}, HERO_PADDING) : _extends({}, SECTION_PADDING)
+    }, [
+        content
+    ], 'container');
+    const name = ((_page_plan_sections_index = page.plan.sections[index]) == null ? void 0 : (_page_plan_sections_index_name = _page_plan_sections_index.name) == null ? void 0 : _page_plan_sections_index_name.trim()) || `Section ${index + 1}`;
+    return tree.add('section', _extends({
+        element: 'section',
+        ariaLabel: sectionLabel(name, index)
+    }, scope.band === 'dark' ? {
+        colorScheme: 'dark'
+    } : {}), bandSx(scope.band), [
+        container
+    ], 'section', (_ref = (_page_options_sectionIds = page.options.sectionIds) == null ? void 0 : _page_options_sectionIds[index]) != null ? _ref : sectionIdOf(index));
+}
+/**
+ * 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
+ * card as the template it repeats. Its records count as the section's items.
+ */ function listingElement(scope, listing, role) {
+    const { page } = scope;
+    const tree = page.tree;
+    const featured = role === 'featured';
+    const shown = featured ? AI_LAYOUT_FEATURED_RECORDS[listing.kind] : 12;
+    const element = AI_LAYOUT_LISTING_ELEMENTS[listing.kind];
+    let id;
+    if (listing.kind === 'products') {
+        id = tree.add(element, _extends({
+            source: 'all',
+            sort: 'newest',
+            columns: String(featured ? Math.min(AI_LAYOUT_FEATURED_RECORDS.products, Math.max(3, listing.records.length)) : 3)
+        }, featured ? {
+            maxItems: String(shown)
+        } : {
+            pageSize: String(shown)
+        }, {
+            cardStyle: 'photo',
+            emptyText: 'New products are on their way.'
+        }), null, null, 'products');
+    } else {
+        id = postsElement(scope, listing, featured ? shown : COLLECTION_INDEX_POSTS);
+    }
+    // What a visitor sees here is the site's records, however many it keeps:
+    // the section shows its planned items when it has any to show.
+    noted(scope, Array.from({
+        length: Math.max(2, Math.min(shown, listing.records.length))
+    }, ()=>id));
+    return id;
+}
+/** 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;
+    const { page } = scope;
+    const tree = page.tree;
+    const ruled = ((_page_design = page.design) == null ? void 0 : _page_design.choices.writing) === 'ruled';
+    const titleElement = itemElement(scope);
+    const cover = (sx)=>tree.add('image', {
+            src: '{{entry.coverImage}}',
+            alt: '{{entry.title}}',
+            href: '{{entry.url}}',
+            objectFit: 'cover',
+            width: '100%',
+            loading: 'lazy'
+        }, sx, null, 'postCover');
+    const meta = tree.add('muiTypography', {
+        children: '{{entry.date}} · {{entry.author}}',
+        variant: 'caption',
+        component: 'p'
+    }, muted(scope), null, 'postMeta');
+    const title = tree.add('muiTypography', {
+        children: '{{entry.title}}',
+        variant: ruled ? 'h5' : 'h6',
+        component: titleElement
+    }, null, null, 'postTitle');
+    const excerpt = tree.add('muiTypography', {
+        children: '{{entry.excerpt}}',
+        variant: 'body2'
+    }, muted(scope), null, 'postExcerpt');
+    const more = tree.add('muiScreenLink', {
+        children: 'Read the post',
+        href: '{{entry.url}}',
+        renderAs: 'link',
+        color: 'inherit'
+    }, {
+        alignSelf: 'flex-start'
+    }, null, 'postLink');
+    page.settled.push({
+        at: scope.at,
+        what: `posts listed as ${ruled ? 'a ruled list' : 'a grid of covers'}`
+    });
+    const card = ruled ? tree.add('muiBox', null, {
+        borderTop: 1,
+        pt: 3
+    }, [
+        tree.add('muiStack', {
+            direction: 'row',
+            spacing: '3',
+            alignItems: 'flex-start'
+        }, null, [
+            tree.add('muiStack', {
+                spacing: '1'
+            }, {
+                flex: '1 1 auto',
+                minWidth: 0
+            }, [
+                meta,
+                title,
+                excerpt,
+                more
+            ], 'postWords'),
+            tree.add('muiBox', null, {
+                flex: '0 0 auto',
+                width: {
+                    xs: '30%',
+                    md: '24%'
+                }
+            }, [
+                cover({
+                    aspectRatio: '4 / 3',
+                    borderRadius: 2
+                })
+            ], 'postThumb')
+        ], 'postRow')
+    ], 'post') : tree.add('muiStack', {
+        spacing: '1.5'
+    }, null, [
+        cover({
+            aspectRatio: '3 / 2',
+            borderRadius: 2
+        }),
+        meta,
+        title,
+        excerpt,
+        more
+    ], 'post');
+    return tree.add(AI_LAYOUT_LISTING_ELEMENTS.posts, {
+        collectionSlug: listing.collectionSlug,
+        entriesLimit: String(limit),
+        spacing: ruled ? '3' : '0'
+    }, ruled ? null : {
+        display: 'grid',
+        gridTemplateColumns: {
+            xs: '1fr',
+            md: 'repeat(3, 1fr)'
+        },
+        gap: 5
+    }, [
+        card
+    ], 'posts');
+}
 /** 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