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

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

@@ -22,6 +22,7 @@ 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 { aiLayoutResolveLink } from "./ai-layout-links.js";
 import { AI_LAYOUT_FRAMES, AiLayoutTreeBuilder } from "./ai-layout-tree.js";
 /** A section root's id where the caller gives none. */ function sectionIdOf(index) {
@@ -69,7 +70,14 @@ const componentOf = (targets, id)=>{
         formSection: formSectionOf(sections, plan, targets),
         pageIcon: pageIconOf(sections),
         formsPlaced: new Set(),
-        itemIds: plan.sections.map(()=>[])
+        itemIds: plan.sections.map(()=>[]),
+        design: options.design ? {
+            input: options.design,
+            choices: aiLayoutDesignChoices(options.design)
+        } : null,
+        pictures: 0,
+        features: 0,
+        splitAt: -2
     };
     const roots = plan.sections.map((_, index)=>{
         var _sections_index;
@@ -106,8 +114,8 @@ const componentOf = (targets, id)=>{
 }
 // ── A section ─────────────────────────────────────────────────────────────
 function compileSection(page, raw, index) {
-    var _raw_band, _ref;
-    var _placedHere_, _page_plan_sections_index_name, _page_plan_sections_index, _page_options_sectionIds;
+    var _raw_band, _ref, _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);
     const scope = {
@@ -123,7 +131,15 @@ function compileSection(page, raw, index) {
             sections: page.plan.sections.map((section)=>section.name),
             from: index,
             formSection: page.formSection
-        }
+        },
+        heading: (_raw_blocks_find = raw.blocks.find((block)=>block.kind === 'heading')) == null ? void 0 : _raw_blocks_find.text,
+        words: [
+            (_ref = (_page_plan_sections_index = page.plan.sections[index]) == null ? void 0 : _page_plan_sections_index.name) != null ? _ref : '',
+            ...raw.blocks.filter((block)=>block.kind === 'heading' || block.kind === 'eyebrow').map((block)=>{
+                var _block_text;
+                return (_block_text = block.text) != null ? _block_text : '';
+            })
+        ].join(' ')
     };
     // A quote is a gap the owner fills, and a published page shows no gap (AGL-3660).
     const blocks = placePlanned(scope, raw).filter((block)=>{
@@ -134,6 +150,11 @@ function compileSection(page, raw, index) {
         });
         return false;
     });
+    // The site's design draws the sections it has an arrangement for (AGL-3660).
+    if (page.design) {
+        const designed = designSection(scope, raw, blocks);
+        if (designed) return designed;
+    }
     const cols = raw.cols && raw.cols.length >= 2 ? raw.cols : null;
     // Above the row, the row's columns, and below it.
     const head = [];
@@ -280,13 +301,13 @@ function compileSection(page, raw, index) {
         }
     }
     if (!parts.length) {
-        var _page_plan_sections_index1;
+        var _page_plan_sections_index2;
         // 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_index1 = page.plan.sections[index]) == null ? void 0 : _page_plan_sections_index1.name) || page.plan.title
+                text: ((_page_plan_sections_index2 = page.plan.sections[index]) == null ? void 0 : _page_plan_sections_index2.name) || page.plan.title
             }
         ], 'full');
         if (fallback) parts.push(fallback);
@@ -308,7 +329,7 @@ function compileSection(page, raw, index) {
     }, [
         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}`;
+    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}`
@@ -316,7 +337,7 @@ function compileSection(page, raw, index) {
         colorScheme: 'dark'
     } : {}), bandSx(band), [
         container
-    ], 'section', (_ref = (_page_options_sectionIds = page.options.sectionIds) == null ? void 0 : _page_options_sectionIds[index]) != null ? _ref : sectionIdOf(index));
+    ], 'section', (_ref1 = (_page_options_sectionIds = page.options.sectionIds) == null ? void 0 : _page_options_sectionIds[index]) != null ? _ref1 : sectionIdOf(index));
 }
 /**
  * A component block's prop values as a card item: its title-like prop as the
@@ -650,12 +671,12 @@ function compileBlock(scope, block, room) {
     }
 }
 /** Secondary words' color: muted text, or the band's own on a brand band. */ function muted(scope) {
-    return scope.band === 'brand' ? null : {
+    return scope.band === 'brand' || scope.overPhoto ? null : {
         color: 'text.secondary'
     };
 }
 /** An accent's color: the brand's, or the band's own on a brand band. */ function accent(scope) {
-    return scope.band === 'brand' ? null : {
+    return scope.band === 'brand' || scope.overPhoto ? null : {
         color: 'primary.main'
     };
 }
@@ -713,7 +734,8 @@ function compileButton(scope, block) {
         return null;
     }
     const style = (_block_style = block.style) != null ? _block_style : 'primary';
-    const onBrand = scope.band === 'brand';
+    // 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';
     const look = style === 'quiet' ? {
         variant: 'text',
         color: onBrand ? 'inherit' : 'primary'
@@ -760,6 +782,9 @@ export function destinationProps(destination) {
         href: destination.href,
         target: '_blank'
     };
+    if (destination.kind === 'path') return {
+        href: destination.href
+    };
     return {};
 }
 /**
@@ -968,7 +993,24 @@ function group(scope, block, room) {
     const perRow = across(items.length, room, block.kind);
     const placed = componentOf(scope.page.targets, block.to);
     if (placed) return instances(scope, placed, items, perRow);
-    if (rule1(scope)) return compactGroup(scope, block, items, perRow);
+    const design = scope.page.design;
+    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.
+        const variant = design && block.kind === 'cards' && block.style !== 'quiet' ? aiLayoutGroupVariant(design.input, design.choices, (_scope_words = scope.words) != null ? _scope_words : '') : null;
+        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);
+    }
+    if (design && block.kind === 'steps' && (design.choices.steps === 'timeline' || room !== 'full')) {
+        return timeline(scope, items);
+    }
+    if (design && block.kind === 'cards' && block.style !== 'quiet') {
+        var _scope_groupStyle, _scope_words1;
+        const variant = (_scope_groupStyle = scope.groupStyle) != null ? _scope_groupStyle : aiLayoutGroupVariant(design.input, design.choices, (_scope_words1 = scope.words) != null ? _scope_words1 : '');
+        const drawn = designedGroup(scope, variant, items, room);
+        if (drawn) return drawn;
+    }
     switch(block.kind){
         case 'steps':
             return layOut(scope, noted(scope, items.map((item, position)=>step(scope, item, position))), perRow, '4', 'steps');
@@ -1230,6 +1272,650 @@ function instances(scope, placed, items, perRow) {
         spacing: '1.5'
     }, null, noted(scope, panels), 'faq');
 }
+// ── The designer layer (AGL-3660) ─────────────────────────────────────────
+//
+// What `ai-layout-design.ts` chose for the site, drawn: the hero, a section
+// of words beside a picture, a closing band over a photo, a heading beside
+// its items, and groups drawn as pictures, articles, a menu or open ruled
+// columns. Every variant is built from the same palette elements and theme
+// tokens as the rest of the compiler, so the doctrine holds by construction.
+/** The most pictures a designed page carries, the model's and the stand-ins together. */ export const AI_LAYOUT_MAX_DESIGN_PICTURES = 8;
+/** The block kinds a section of words holds. */ const WORD_KINDS = new Set([
+    'eyebrow',
+    'heading',
+    'lede',
+    'text',
+    'note',
+    'button'
+]);
+/** How many more pictures the page has room for. */ function picturesLeft(page) {
+    return AI_LAYOUT_MAX_DESIGN_PICTURES - page.images - page.pictures;
+}
+/** Whether a heading block has words left once fitted: one with none is no heading. */ function speaksHeading(scope, block) {
+    return block.kind === 'heading' && !!aiLayoutWords(block.text, 'heading', scope.page.targets.facts);
+}
+/** The section root every designed section is written under, as `compileSection` writes its own. */ function designedRoot(scope, children, sx, dark) {
+    var _ref;
+    var _page_plan_sections_index_name, _page_plan_sections_index, _page_options_sectionIds;
+    const { page, index } = scope;
+    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}`
+    }, dark ? {
+        colorScheme: 'dark'
+    } : {}, index === 0 && scope.overPhoto ? {
+        underHeader: true
+    } : {}), sx, children, 'section', (_ref = (_page_options_sectionIds = page.options.sectionIds) == null ? void 0 : _page_options_sectionIds[index]) != null ? _ref : sectionIdOf(index));
+}
+/**
+ * A picture the design places: the model's own where it described one, else
+ * a stand-in — marked decorative, since no one described it, with the
+ * section's words as what a stock search looks for. Either is filled by
+ * `ai-layout-pictures.ts` after the page is checked, as any slot is.
+ */ function designPicture(scope, picture, frameSx, role = 'designFrame', imageSx = {}) {
+    const tree = scope.page.tree;
+    // The picture fills its frame by its own size props, so the frame alone
+    // carries a style: a page of many pictures repeats no inline style (rule 16).
+    const image = designImage(scope, picture, {
+        width: '100%',
+        height: '100%'
+    }, Object.keys(imageSx).length ? imageSx : null);
+    return tree.add('muiBox', null, _extends({
+        position: 'relative',
+        overflow: 'hidden',
+        bgcolor: 'action.hover'
+    }, frameSx), [
+        image
+    ], role);
+}
+/**
+ * The `image` a designed picture is: its alt, its fit and, for a stand-in,
+ * decorative. Its slot is filled after the page is checked.
+ */ function designImage(scope, picture, props, sx) {
+    const { page } = scope;
+    if (picture.given) page.images += 1;
+    else page.pictures += 1;
+    return page.tree.add('image', _extends({
+        alt: picture.alt,
+        objectFit: 'cover'
+    }, picture.given ? {} : {
+        decorative: true
+    }, props), sx, null, 'image');
+}
+/** What a stand-in picture is of, for a stock search: the section's subject, else the site's. */ function standInAlt(scope, words) {
+    var _scope_page_plan_sections_scope_index;
+    return aiLayoutFitText(words, 'alt') || 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') || aiLayoutFitText(scope.page.plan.title, 'alt') || 'A photo';
+}
+/** A grid row of sized cells, as `compileRow` writes one, from ids already compiled. */ function designRow(scope, cells, spacing, alignItems = 'center') {
+    const tree = scope.page.tree;
+    return tree.add('muiGrid', {
+        container: true,
+        spacing
+    }, {
+        alignItems
+    }, cells.map((cell)=>{
+        var _cell_sx;
+        return tree.add('muiGrid', {
+            size: cell.size
+        }, (_cell_sx = cell.sx) != null ? _cell_sx : null, [
+            cell.id
+        ], 'column');
+    }), 'row');
+}
+/** A section's own arrangement where the design has one; `null` to draw it the compiler's first way. */ function designSection(scope, raw, blocks) {
+    var _scope_words, _ref, _ref1;
+    var _group_items, _group_items1;
+    const { page, index } = scope;
+    const design = page.design;
+    if (!design) return null;
+    const images = blocks.filter((block)=>block.kind === 'image');
+    const words = blocks.filter((block)=>block.kind !== 'image');
+    const ofWords = words.length > 0 && words.every((block)=>WORD_KINDS.has(block.kind));
+    if (index === 0) {
+        var _words_find;
+        if (!ofWords || images.length > 1 || picturesLeft(page) < 1) return null;
+        const flow = [
+            ...words
+        ];
+        if (!flow.some((block)=>speaksHeading(scope, block))) {
+            flow.unshift({
+                kind: 'heading',
+                text: page.plan.title
+            });
+            page.settled.push({
+                at: scope.at,
+                what: "no heading; the page's title written as its h1"
+            });
+        }
+        // A designed hero's title is display-sized; beside a photo, in half the
+        // page, it is the page's title size, so a long one still reads in a few lines.
+        const lead = flow.findIndex((block)=>speaksHeading(scope, block));
+        const _flow_lead = flow[lead], { style: _style } = _flow_lead, title = _object_without_properties_loose(_flow_lead, [
+            "style"
+        ]);
+        flow[lead] = design.choices.hero === 'split' ? title : _extends({}, title, {
+            style: 'large'
+        });
+        const given = images[0] ? aiLayoutFitText(images[0].text, 'alt') : '';
+        return hero(scope, raw, flow, given ? {
+            alt: given,
+            given: true
+        } : {
+            alt: standInAlt(scope, (_words_find = words.find((block)=>speaksHeading(scope, block))) == null ? void 0 : _words_find.text),
+            given: false
+        });
+    }
+    if (ofWords && !images.length && words.some((block)=>speaksHeading(scope, block))) {
+        const last = index === page.plan.sections.length - 1;
+        const asks = words.some((block)=>block.kind === 'button');
+        const strong = scope.band === 'brand' || scope.band === 'dark';
+        const told = words.some((block)=>block.kind === 'text' || block.kind === 'lede');
+        if (last && asks && (strong || scope.centered) && design.choices.coverClose && picturesLeft(page) >= 1) {
+            return coverBand(scope, words);
+        }
+        if (design.choices.features && told && page.features < 2 && picturesLeft(page) >= 1 && !(last && asks && strong)) {
+            return feature(scope, words);
+        }
+        return null;
+    }
+    // A heading over one group of items: the heading beside them.
+    if (!design.choices.splitHeads || images.length || page.splitAt === index - 1) return null;
+    const at = words.findIndex((block)=>block.kind === 'cards' || block.kind === 'steps');
+    if (at <= 0) return null;
+    const head = words.slice(0, at);
+    const group = words[at];
+    const tail = words.slice(at + 1);
+    const variant = aiLayoutGroupVariant(design.input, design.choices, (_scope_words = scope.words) != null ? _scope_words : '');
+    if (!head.every((block)=>WORD_KINDS.has(block.kind) && block.kind !== 'button') || !head.some((block)=>speaksHeading(scope, block)) || !tail.every((block)=>WORD_KINDS.has(block.kind)) || ((_ref = (_group_items = group.items) == null ? void 0 : _group_items.length) != null ? _ref : 0) < 2 || ((_ref1 = (_group_items1 = group.items) == null ? void 0 : _group_items1.length) != null ? _ref1 : 0) > 6 || group.to || group.kind === 'cards' && variant !== 'cards' && variant !== 'ruled') {
+        return null;
+    }
+    return splitSection(scope, head, group, tail);
+}
+/** The first section, in the site's hero arrangement. */ function hero(scope, raw, flow, picture) {
+    const { page } = scope;
+    const tree = page.tree;
+    const design = page.design;
+    const home = design.input.home;
+    const variant = design.choices.hero;
+    page.settled.push({
+        at: scope.at,
+        what: `drawn as a ${variant} hero`
+    });
+    if (variant === 'cover') {
+        scope.band = 'dark';
+        scope.centered = raw.align === 'center';
+        return cover(scope, flow, picture, home ? {
+            xs: '78vh',
+            md: '86vh'
+        } : {
+            xs: '46vh',
+            md: '54vh'
+        });
+    }
+    const band = scope.band;
+    scope.centered = false;
+    if (variant === 'split') {
+        const words = compileFlow(scope, flow, 'half');
+        const photo = designPicture(scope, picture, {
+            aspectRatio: home ? {
+                xs: '4 / 3',
+                md: '4 / 5'
+            } : {
+                xs: '4 / 3',
+                md: '1 / 1'
+            },
+            borderRadius: 2
+        });
+        const right = design.choices.featureLeft;
+        const row = designRow(scope, [
+            _extends({
+                id: words,
+                size: 'xs:12 md:6'
+            }, right ? {
+                sx: {
+                    order: {
+                        xs: 0,
+                        md: 1
+                    }
+                }
+            } : {}),
+            {
+                id: photo,
+                size: 'xs:12 md:6'
+            }
+        ], '8');
+        const container = tree.add('muiContainer', {
+            maxWidth: 'lg'
+        }, {
+            py: {
+                xs: 6,
+                md: 10
+            }
+        }, [
+            row
+        ], 'container');
+        return designedRoot(scope, [
+            container
+        ], bandSx(band), band === 'dark');
+    }
+    // Editorial: display type across the page, the rest in a row under it, a wide photo below.
+    const top = flow.filter((block)=>block.kind === 'eyebrow' || block.kind === 'heading');
+    const rest = flow.filter((block)=>block.kind !== 'eyebrow' && block.kind !== 'heading');
+    const lede = rest.filter((block)=>block.kind !== 'button');
+    const actions = rest.filter((block)=>block.kind === 'button');
+    const headId = compileFlow(scope, top, 'full');
+    const ledeId = compileFlow(scope, lede, 'half');
+    const actionsId = compileFlow(scope, actions, 'half');
+    const under = ledeId && actionsId ? designRow(scope, [
+        {
+            id: ledeId,
+            size: 'xs:12 md:7'
+        },
+        {
+            id: actionsId,
+            size: 'xs:12 md:5',
+            sx: {
+                display: 'flex',
+                justifyContent: {
+                    xs: 'flex-start',
+                    md: 'flex-end'
+                }
+            }
+        }
+    ], '4', 'flex-end') : ledeId != null ? ledeId : actionsId;
+    const photo = designPicture(scope, picture, {
+        aspectRatio: home ? {
+            xs: '4 / 3',
+            md: '21 / 9'
+        } : {
+            xs: '16 / 9',
+            md: '3 / 1'
+        },
+        borderRadius: 2
+    });
+    const stack = tree.add('muiStack', {
+        spacing: '6',
+        useFlexGap: true
+    }, null, [
+        headId,
+        under,
+        photo
+    ], 'content');
+    const container = tree.add('muiContainer', {
+        maxWidth: 'lg'
+    }, {
+        pt: {
+            xs: 8,
+            md: 12
+        },
+        pb: {
+            xs: 6,
+            md: 10
+        }
+    }, [
+        stack
+    ], 'container');
+    return designedRoot(scope, [
+        container
+    ], bandSx(band), band === 'dark');
+}
+/** Words over a full-bleed photo, on a scrim that keeps them readable, in the site's dark scheme. */ function cover(scope, flow, picture, minHeight) {
+    const tree = scope.page.tree;
+    // The photo dimmed over black: the scrim that keeps the words over it readable.
+    const photo = designPicture(scope, picture, {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        bgcolor: 'common.black'
+    }, 'coverPhoto', {
+        opacity: 0.42
+    });
+    scope.overPhoto = true;
+    const words = compileFlow(scope, flow, 'full');
+    const measure = tree.add('muiBox', null, scope.centered ? {
+        maxWidth: {
+            xs: '100%',
+            md: '75%'
+        },
+        mx: 'auto'
+    } : {
+        maxWidth: {
+            xs: '100%',
+            md: '62%'
+        }
+    }, [
+        words
+    ], 'measure');
+    const container = tree.add('muiContainer', {
+        maxWidth: 'lg'
+    }, {
+        position: 'relative',
+        zIndex: 1,
+        py: {
+            xs: 10,
+            md: 14
+        }
+    }, [
+        measure
+    ], 'container');
+    return designedRoot(scope, [
+        photo,
+        container
+    ], {
+        position: 'relative',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: {
+            xs: 'flex-end',
+            md: 'center'
+        },
+        minHeight
+    }, true);
+}
+/** A closing section of words over a photo. */ function coverBand(scope, words) {
+    scope.band = 'dark';
+    scope.centered = true;
+    scope.page.settled.push({
+        at: scope.at,
+        what: 'drawn over a photo'
+    });
+    return cover(scope, words, {
+        alt: standInAlt(scope),
+        given: false
+    }, {
+        xs: '56vh',
+        md: '64vh'
+    });
+}
+/** A section of words beside a picture, the side turning section by section. */ function feature(scope, words) {
+    const { page } = scope;
+    const design = page.design;
+    const left = design.choices.featureLeft !== (page.features % 2 === 1);
+    page.features += 1;
+    page.settled.push({
+        at: scope.at,
+        what: `set beside a picture on the ${left ? 'left' : 'right'}`
+    });
+    scope.centered = false;
+    const flow = compileFlow(scope, words, 'half');
+    const photo = designPicture(scope, {
+        alt: standInAlt(scope),
+        given: false
+    }, {
+        aspectRatio: {
+            xs: '4 / 3',
+            md: page.features === 1 ? '4 / 5' : '1 / 1'
+        },
+        borderRadius: 2
+    });
+    const row = designRow(scope, left ? [
+        {
+            id: photo,
+            size: 'xs:12 md:6'
+        },
+        {
+            id: flow,
+            size: 'xs:12 md:6'
+        }
+    ] : [
+        {
+            id: flow,
+            size: 'xs:12 md:6'
+        },
+        {
+            id: photo,
+            size: 'xs:12 md:6'
+        }
+    ], '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');
+}
+/** 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;
+    scope.groupStyle = 'ruled';
+    page.splitAt = scope.index;
+    page.settled.push({
+        at: scope.at,
+        what: 'the heading set beside its items'
+    });
+    const words = compileFlow(scope, [
+        ...head,
+        ...tail
+    ], 'half');
+    const items = compileFlow(scope, [
+        group
+    ], 'half');
+    if (!words || !items) {
+        const flow = [
+            words,
+            items
+        ].filter((id)=>!!id);
+        const container = page.tree.add('muiContainer', {
+            maxWidth: 'lg'
+        }, {
+            py: _extends({}, SECTION_PADDING)
+        }, flow, 'container');
+        return designedRoot(scope, [
+            container
+        ], bandSx(scope.band), scope.band === 'dark');
+    }
+    const row = designRow(scope, [
+        {
+            id: words,
+            size: 'xs:12 md:5'
+        },
+        {
+            id: items,
+            size: 'xs:12 md:7'
+        }
+    ], '8', 'flex-start');
+    const container = page.tree.add('muiContainer', {
+        maxWidth: 'lg'
+    }, {
+        py: _extends({}, SECTION_PADDING)
+    }, [
+        row
+    ], 'container');
+    return designedRoot(scope, [
+        container
+    ], bandSx(scope.band), scope.band === 'dark');
+}
+/**
+ * Items under rules, one a line, each opening under a thin rule in the
+ * text's own color. One style key an element, so a long list repeats no
+ * multi-key inline style (rule 16); and no Stack `divider`, which a
+ * published page's renderer hands a Stack as one child and so never draws.
+ */ function ruledList(scope, ids, role) {
+    const tree = scope.page.tree;
+    return tree.add('muiStack', {
+        spacing: '2'
+    }, null, ids.map((id)=>tree.add('muiBox', null, {
+            borderTop: 1
+        }, [
+            tree.add('muiBox', null, {
+                pt: 2
+            }, [
+                id
+            ], 'ruledWords')
+        ], 'ruledLine')), role);
+}
+/** Numbered items as a ruled list: each number beside its title and words. */ function timeline(scope, items) {
+    const tree = scope.page.tree;
+    const facts = scope.page.targets.facts;
+    const rows = items.map((item, position)=>tree.add('muiStack', {
+            direction: 'row',
+            spacing: '3',
+            alignItems: 'baseline'
+        }, null, [
+            // The numbers keep one column, so every title starts at the same line.
+            tree.add('muiBox', null, {
+                flex: '0 0 3.5rem'
+            }, [
+                tree.add('muiTypography', {
+                    children: String(position + 1).padStart(2, '0'),
+                    variant: 'h4',
+                    component: 'p'
+                }, accent(scope), null, 'number')
+            ], 'numberColumn'),
+            tree.add('muiStack', {
+                spacing: '1'
+            }, null, [
+                item.title.trim() ? tree.add('muiTypography', {
+                    children: aiLayoutWords(item.title, 'itemTitle', facts),
+                    variant: 'h5',
+                    component: itemElement(scope)
+                }, null, null, 'title') : null,
+                item.text.trim() ? tree.add('muiTypography', {
+                    children: aiLayoutWords(item.text, 'itemText', facts),
+                    variant: 'body1'
+                }, muted(scope), null, 'text') : null
+            ], 'stepWords')
+        ], 'step'));
+    return ruledList(scope, noted(scope, rows), 'timeline');
+}
+/** A group drawn the design's way; `null` to draw it as the theme's cards. */ function designedGroup(scope, variant, items, room) {
+    const { page } = scope;
+    const tree = page.tree;
+    const facts = page.targets.facts;
+    const title = (item, type = 'h5')=>item.title.trim() ? tree.add('muiTypography', {
+            children: aiLayoutWords(item.title, 'itemTitle', facts),
+            variant: type,
+            component: itemElement(scope)
+        }, null, null, 'title') : null;
+    const words = (item, type = 'body1')=>item.text.trim() ? tree.add('muiTypography', {
+            children: aiLayoutWords(item.text, 'itemText', facts),
+            variant: type
+        }, muted(scope), null, 'text') : null;
+    if (variant === 'cards') return null;
+    const pictured = variant === 'pictures' || variant === 'articles';
+    if (variant === 'ruled' || pictured && (room !== 'full' || picturesLeft(page) < items.length)) {
+        const perRow = across(items.length, room, 'cards');
+        if (perRow <= 1) {
+            // Stacked, the rules run between the items.
+            const ids = items.map((item)=>tree.add('muiStack', {
+                    spacing: '1'
+                }, null, [
+                    title(item),
+                    words(item)
+                ], 'ruled'));
+            return ruledList(scope, noted(scope, ids), 'ruledItems');
+        }
+        // Side by side, each column opens under a rule in the text's own color.
+        const ids = items.map((item)=>tree.add('muiBox', null, {
+                borderTop: 1
+            }, [
+                tree.add('muiStack', {
+                    spacing: '1'
+                }, {
+                    pt: 2.5
+                }, [
+                    title(item),
+                    words(item)
+                ], 'ruledWords')
+            ], 'ruled'));
+        return layOut(scope, noted(scope, ids), perRow, '5', 'ruledItems');
+    }
+    if (variant === 'menu') {
+        const ids = items.map((item)=>tree.add('muiStack', {
+                spacing: '0.5'
+            }, null, [
+                title(item, 'h6'),
+                words(item, 'body2')
+            ], 'dish'));
+        noted(scope, ids);
+        // Two columns of lines under rules, the first half and the second.
+        const half = room === 'full' && ids.length >= 4 ? Math.ceil(ids.length / 2) : ids.length;
+        const lists = [
+            ids.slice(0, half),
+            ids.slice(half)
+        ].filter((list)=>list.length).map((list)=>ruledList(scope, list, 'menu'));
+        if (lists.length === 1) return lists[0];
+        // On a phone the two columns read as one list, the second opening under
+        // its own rule a line's gap below the first; side by side, a gutter.
+        const [first, second] = lists;
+        return tree.add('muiGrid', {
+            container: true,
+            rowSpacing: '2',
+            columnSpacing: '8'
+        }, {
+            alignItems: 'flex-start'
+        }, [
+            tree.add('muiGrid', {
+                size: 'xs:12 md:6'
+            }, null, [
+                first
+            ], 'column'),
+            tree.add('muiGrid', {
+                size: 'xs:12 md:6'
+            }, null, [
+                second
+            ], 'column')
+        ], 'menuRow');
+    }
+    // Pictures over each item's title and words.
+    const design = page.design;
+    const mosaic = variant === 'pictures' && design.choices.pictures === 'mosaic' && items.length >= 2;
+    const portrait = design.input.kind === 'photography';
+    const perRow = items.length === 4 || items.length === 2 ? 2 : Math.min(3, items.length);
+    page.settled.push({
+        at: scope.at,
+        what: `${items.length} items drawn as ${mosaic ? 'a mosaic of pictures' : variant}`
+    });
+    const cells = items.map((item, position)=>{
+        // A mosaic's rows turn wide-narrow, narrow-wide; an odd one out spans the row.
+        const row = Math.floor(position / 2);
+        const lone = mosaic && position === items.length - 1 && items.length % 2 === 1;
+        const wide = mosaic && !lone && position % 2 === row % 2;
+        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.
+        const photo = designImage(scope, {
+            alt: standInAlt(scope, item.title || item.text),
+            given: false
+        }, {
+            width: '100%'
+        }, {
+            aspectRatio: {
+                xs: '4 / 3',
+                md: aspect
+            }
+        });
+        const id = tree.add('muiStack', {
+            spacing: '1.5'
+        }, null, [
+            photo,
+            title(item, variant === 'articles' ? 'h5' : 'h6'),
+            words(item, 'body2')
+        ], variant === 'articles' ? 'article' : 'work');
+        return {
+            id,
+            size: span === 12 ? 'xs:12 sm:12' : `xs:12 ${span === 6 ? 'sm' : 'md'}:${span}`
+        };
+    });
+    noted(scope, cells.map((cell)=>cell.id));
+    return tree.add('muiGrid', {
+        container: true,
+        spacing: mosaic ? '5' : '4'
+    }, {
+        alignItems: 'flex-start'
+    }, cells.map((cell)=>tree.add('muiGrid', {
+            size: cell.size
+        }, null, [
+            cell.id
+        ], 'cell')), variant);
+}
 /** 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