@aglyn/plugins-ai 1.0.0-beta.284 → 1.0.0-beta.287

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

@@ -99,7 +99,10 @@ function formSectionOf(sections, plan, targets) {
         pictures: 0,
         features: 0,
         splitAt: -2,
-        quotesOnly: []
+        quotesOnly: [],
+        drawnBands: [],
+        bare: 0,
+        rhythm: 0
     };
     const roots = plan.sections.map((_, index)=>{
         var _sections_index;
@@ -136,12 +139,58 @@ function formSectionOf(sections, plan, targets) {
     return AI_ICON_LIBRARY.sparkle;
 }
 // ── A section ─────────────────────────────────────────────────────────────
-function compileSection(page, raw, index) {
-    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;
+/** The listings whose element shows each record's picture: products, posts and events (AGL-4065). */ const PICTURED_LISTINGS = new Set([
+    'products',
+    'posts',
+    'events'
+]);
+/**
+ * A section drawn, and what the next one reads of it (AGL-4065): the band it
+ * was drawn in, and whether it showed a picture — its own, a stand-in, a
+ * record's photo or a listing that shows its records' pictures.
+ */ function compileSection(page, raw, index) {
+    var _page, _drawnBands, _page_targets_listings, _page_bare;
+    const scope = sectionScope(page, raw, index);
+    const id = drawSection(page, raw, index, scope);
+    (_drawnBands = (_page = page).drawnBands) != null ? _drawnBands : _page.drawnBands = [];
+    page.drawnBands[index] = scope.band;
+    const listed = aiLayoutListingAt((_page_targets_listings = page.targets.listings) != null ? _page_targets_listings : [], page.targets.pageId, index);
+    const pictured = !!listed && PICTURED_LISTINGS.has(listed.listing.kind) || holdsPicture(page.tree, id);
+    page.bare = pictured ? 0 : ((_page_bare = page.bare) != null ? _page_bare : 0) + 1;
+    return id;
+}
+/** Whether a compiled part holds an Image anywhere under it. */ function holdsPicture(tree, id) {
+    var _node_nodes;
+    const node = tree.nodes[id];
+    if (!node) return false;
+    return node.componentId === 'image' || ((_node_nodes = node.nodes) != null ? _node_nodes : []).some((child)=>holdsPicture(tree, child));
+}
+/**
+ * The band a section is drawn in where the site's design keeps a rhythm
+ * (AGL-4065): on a `plain` rhythm one ground, every soft band plain; on an
+ * `alternate` rhythm the model's bands, except a plain or soft band that
+ * would meet the same band above it, which takes the other. Brand and dark
+ * bands, and the first section's, are the model's.
+ */ function rhythmBand(page, index, band) {
+    var _page_drawnBands;
+    if (!page.design || index === 0 || band !== 'plain' && band !== 'soft') return band;
+    if (page.design.choices.bandRhythm === 'plain') return 'plain';
+    const above = (_page_drawnBands = page.drawnBands) == null ? void 0 : _page_drawnBands[index - 1];
+    if (above !== band) return band;
+    return band === 'plain' ? 'soft' : 'plain';
+}
+function sectionScope(page, raw, index) {
+    var _raw_band, _ref;
+    var _page_design, _raw_blocks_find, _page_plan_sections_index;
     const at = `sections[${index}]`;
-    const band = settleBand(page, (_raw_band = raw.band) != null ? _raw_band : 'plain', at);
-    const scope = {
+    const asked = (_raw_band = raw.band) != null ? _raw_band : 'plain';
+    const ruled = rhythmBand(page, index, asked);
+    if (ruled !== asked) page.settled.push({
+        at: `${at}.band`,
+        what: `drawn ${ruled}: the page's ${(_page_design = page.design) == null ? void 0 : _page_design.choices.bandRhythm} band rhythm`
+    });
+    const band = settleBand(page, ruled, at);
+    return {
         page,
         index,
         at,
@@ -164,6 +213,11 @@ function compileSection(page, raw, index) {
             })
         ].join(' ')
     };
+}
+function drawSection(page, raw, index, scope) {
+    var _page_targets_listings, _ref;
+    var _placedHere_, _page_plan_sections_index_name, _page_plan_sections_index, _page_options_sectionIds;
+    const { at, band } = scope;
     // A quote is a gap the owner fills, and a published page shows no gap (AGL-3660).
     const blocks = placePlanned(scope, raw).filter((block)=>{
         if (block.kind !== 'quotes') return true;
@@ -185,8 +239,11 @@ function compileSection(page, raw, index) {
     // 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).
+    // The site's design draws the sections it has an arrangement for (AGL-3660),
+    // the third band in a row with no picture beside one (AGL-4065).
     if (page.design) {
+        const beside = rhythmSection(scope, raw, blocks);
+        if (beside) return beside;
         const designed = designSection(scope, raw, blocks);
         if (designed) return designed;
     }
@@ -336,13 +393,13 @@ function compileSection(page, raw, index) {
         }
     }
     if (!parts.length) {
-        var _page_plan_sections_index2;
+        var _page_plan_sections_index1;
         // Nothing the design gave this section could be shown: it keeps its
         // place on the page under the name its plan gives it.
         const fallback = compileFlow(scope, [
             {
                 kind: 'heading',
-                text: ((_page_plan_sections_index2 = page.plan.sections[index]) == null ? void 0 : _page_plan_sections_index2.name) || page.plan.title
+                text: ((_page_plan_sections_index1 = page.plan.sections[index]) == null ? void 0 : _page_plan_sections_index1.name) || page.plan.title
             }
         ], 'full');
         if (fallback) parts.push(fallback);
@@ -364,7 +421,7 @@ function compileSection(page, raw, index) {
     }, [
         content
     ], 'container');
-    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}`;
+    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, page.options.language)
@@ -372,7 +429,7 @@ function compileSection(page, raw, index) {
         colorScheme: 'dark'
     } : {}), bandSx(band), [
         container
-    ], 'section', (_ref1 = (_page_options_sectionIds = page.options.sectionIds) == null ? void 0 : _page_options_sectionIds[index]) != null ? _ref1 : sectionIdOf(index));
+    ], 'section', (_ref = (_page_options_sectionIds = page.options.sectionIds) == null ? void 0 : _page_options_sectionIds[index]) != null ? _ref : sectionIdOf(index));
 }
 /**
  * A component block's prop values as a card item: its title-like prop as the
@@ -2203,6 +2260,119 @@ function instances(scope, placed, items, perRow) {
         container
     ], bandSx(scope.band), scope.band === 'dark');
 }
+/** The most sections a page sets beside a photo for being the third in a row with none (AGL-4065). */ const AI_LAYOUT_RHYTHM_MOST = 2;
+/** What the compiler notes of a section it set beside a photo for the page's rhythm (AGL-4065). */ export const AI_LAYOUT_RHYTHM_NOTE = 'drawn beside a photo: third text-only band';
+/**
+ * NO THREE TEXT-ONLY BANDS IN A ROW (AGL-4065). The booth-kit trades homes
+ * of 2026-10-25 stacked their middles as bands of words with no picture —
+ * Holeshot Moto Repair's numbered steps, its repair list and its reasons to
+ * trust the shop, one under another. On a page drawn with a design, whose
+ * stand-in pictures the stock library fills, a section that would be the
+ * third in a row to show no picture is set beside one instead: its words
+ * and its items in one half, a photo of its heading's subject in the other,
+ * the side turning as the design's own photo-led sections turn. At most
+ * twice a page, and only where the page has a picture left.
+ *
+ * A section of words or of one group of cards or lines qualifies. Steps,
+ * questions and figures read best as text and stay so; a section with a
+ * picture, a form, a component or a row of columns of its own is drawn as
+ * designed; a group the design draws as pictures, articles or a menu
+ * already is one; and the page's closing call to action is the design's to
+ * draw (`coverClose`). `null` leaves the section to the design.
+ */ function rhythmSection(scope, raw, blocks) {
+    var _page_bare, _page_rhythm, _ref, _scope_words, _page_rhythm1;
+    var _group_items;
+    const { page, index } = scope;
+    const design = page.design;
+    if (!design || index === 0 || ((_page_bare = page.bare) != null ? _page_bare : 0) < 2 || ((_page_rhythm = page.rhythm) != null ? _page_rhythm : 0) >= AI_LAYOUT_RHYTHM_MOST || picturesLeft(page) < 1) return null;
+    if (raw.cols && raw.cols.length >= 2) return null;
+    const words = blocks.filter((block)=>WORD_KINDS.has(block.kind));
+    const groups = blocks.filter((block)=>!WORD_KINDS.has(block.kind));
+    if (groups.length > 1 || !words.some((block)=>speaksHeading(scope, block))) return null;
+    const group = groups[0];
+    if (group && (group.kind !== 'cards' && group.kind !== 'list' || group.to || ((_ref = (_group_items = group.items) == null ? void 0 : _group_items.length) != null ? _ref : 0) > 6)) return null;
+    if ((group == null ? void 0 : group.kind) === 'cards' && group.style !== 'quiet' && aiLayoutGroupVariant(design.input, design.choices, (_scope_words = scope.words) != null ? _scope_words : '') !== design.choices.group) return null;
+    const last = index === page.plan.sections.length - 1;
+    if (last && words.some((block)=>block.kind === 'button')) return null;
+    if (!group) {
+        var _page_rhythm2;
+        // A section of words the design already sets beside a photo needs no rule.
+        if (!words.some((block)=>block.kind === 'text' || block.kind === 'lede') || design.choices.features && page.features < 2) return null;
+        page.rhythm = ((_page_rhythm2 = page.rhythm) != null ? _page_rhythm2 : 0) + 1;
+        page.settled.push({
+            at: scope.at,
+            what: AI_LAYOUT_RHYTHM_NOTE
+        });
+        return feature(scope, words);
+    }
+    page.rhythm = ((_page_rhythm1 = page.rhythm) != null ? _page_rhythm1 : 0) + 1;
+    page.settled.push({
+        at: scope.at,
+        what: AI_LAYOUT_RHYTHM_NOTE
+    });
+    return featureGroup(scope, words, group);
+}
+/**
+ * A section's words and its one group beside a picture of its subject
+ * (AGL-4065): the words over the items in the wider half, the photo at 4:3
+ * in the other, on the side the design's photo-led sections turn to next.
+ */ function featureGroup(scope, words, group) {
+    const { page } = scope;
+    const design = page.design;
+    const left = design.choices.featureLeft !== (page.features % 2 === 1);
+    page.features += 1;
+    scope.centered = false;
+    // The heading and its words open the half, the group under them, any button last.
+    const flow = compileFlow(scope, [
+        ...words.filter((block)=>block.kind !== 'button'),
+        group,
+        ...words.filter((block)=>block.kind === 'button')
+    ], 'half');
+    const photo = designPicture(scope, {
+        alt: standInAlt(scope),
+        given: false
+    }, {
+        aspectRatio: '4 / 3',
+        borderRadius: 2
+    });
+    const row = designRow(scope, left ? [
+        {
+            id: photo,
+            size: 'xs:12 md:5'
+        },
+        {
+            id: flow,
+            size: 'xs:12 md:7'
+        }
+    ] : [
+        {
+            id: flow,
+            size: 'xs:12 md:7'
+        },
+        {
+            id: photo,
+            size: 'xs:12 md:5'
+        }
+    ], '8');
+    const container = page.tree.add('muiContainer', {
+        maxWidth: 'lg'
+    }, {
+        py: _extends({}, SECTION_PADDING)
+    }, [
+        row
+    ], 'container');
+    return designedRoot(scope, [
+        container
+    ], bandSx(scope.band), scope.band === 'dark');
+}
+/**
+ * The variant a designed group's item title takes (AGL-4065): the heading
+ * style it names, or — where the site's seed sets its titles as labels — the
+ * theme's own overline, spaced capitals over the item's words.
+ */ function itemTitleVariant(scope, heading) {
+    var _scope_page_design;
+    return ((_scope_page_design = scope.page.design) == null ? void 0 : _scope_page_design.choices.headingCase) === 'caps' ? 'overline' : heading;
+}
 /** A heading beside its items: the words in a narrow column, the items ruled in the wide one. */ function splitSection(scope, head, group, tail) {
     const { page } = scope;
     scope.centered = false;
@@ -2296,7 +2466,7 @@ function instances(scope, placed, items, perRow) {
             }, null, [
                 item.title.trim() ? tree.add('muiTypography', {
                     children: aiLayoutWords(item.title, 'itemTitle', facts, scope.page.options.language),
-                    variant: 'h5',
+                    variant: itemTitleVariant(scope, 'h5'),
                     component: itemElement(scope)
                 }, null, null, 'title') : null,
                 item.text.trim() ? tree.add('muiTypography', {
@@ -2330,7 +2500,7 @@ function instances(scope, placed, items, perRow) {
             const ids = items.map((item)=>tree.add('muiStack', {
                     spacing: '1'
                 }, null, [
-                    title(item),
+                    title(item, itemTitleVariant(scope, 'h5')),
                     words(item)
                 ], 'ruled'));
             return ruledList(scope, noted(scope, ids), 'ruledItems');
@@ -2344,7 +2514,7 @@ function instances(scope, placed, items, perRow) {
                 }, {
                     pt: 2.5
                 }, [
-                    title(item),
+                    title(item, itemTitleVariant(scope, 'h5')),
                     words(item)
                 ], 'ruledWords')
             ], 'ruled'));
@@ -2816,13 +2986,19 @@ function listingSection(scope, blocks, placed) {
  * 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).
+ * else one neutral icon along the row; a row of places ("Areas we serve")
+ * shows the place marker for every place (AGL-4065). One style key an
+ * element, so a row repeats no multi-key inline style (rule 16).
  */ function iconColumns(scope, items, room) {
+    var _scope_words;
     const { page } = scope;
     const tree = page.tree;
     const facts = page.targets.facts;
-    const iconWords = aiStorefrontItemIcons(items, (word)=>!!aiIconOfWord(word));
+    const iconWords = aiStorefrontItemIcons(items, (word)=>!!aiIconOfWord(word), _extends({
+        section: (_scope_words = scope.words) != null ? _scope_words : ''
+    }, page.design ? {
+        kind: page.design.input.kind
+    } : {}));
     const perRow = across(items.length, room, 'cards');
     const textAlign = scope.centered ? {
         align: 'center'
@@ -2845,7 +3021,7 @@ function listingSection(scope, blocks, placed) {
             }, accent(scope), null, 'icon'),
             item.title.trim() ? tree.add('muiTypography', _extends({
                 children: aiLayoutWords(item.title, 'itemTitle', facts, scope.page.options.language),
-                variant: 'h6',
+                variant: itemTitleVariant(scope, 'h6'),
                 component: itemElement(scope)
             }, textAlign), null, null, 'title') : null,
             item.text.trim() ? tree.add('muiTypography', _extends({