@aglyn/plugins-ai 1.0.0-beta.292 → 1.0.0-beta.293

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

@@ -19,6 +19,7 @@ import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_wi
 import { CANVAS_ROOT_ELEMENT_ID } from "@aglyn/aglyn/foundation/constants/canvas";
 import { AI_ICON_COMPONENT_ID, aiIconOfWord, AI_ICON_LIBRARY } from "../runtime/ai-icon-library.js";
 import { AI_INSTANCE_REF_PROP } from "../runtime/ai-node-tree.js";
+import { AI_TEXT_LIMITS } from "../runtime/ai-palette.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";
@@ -29,6 +30,9 @@ import { aiLayoutContactLabel, aiLayoutWithContactLines } from "./ai-layout-cont
 import { AI_LAYOUT_LABELS_EN, aiLayoutLabel } from "./ai-layout-labels.js";
 import { aiLayoutRenamedLabel, aiLayoutResolveLink } from "./ai-layout-links.js";
 import { aiLayoutSpans, AI_LAYOUT_FRAMES, AiLayoutTreeBuilder } from "./ai-layout-tree.js";
+/** Words exactly as given, one space between them: how a page brought in shows them (AGL-4107). */ export function aiLayoutAsWritten(value) {
+    return typeof value === 'string' ? value.replace(/\s+/g, ' ').trim() : '';
+}
 /**
  * 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
@@ -41,6 +45,7 @@ import { aiLayoutSpans, AI_LAYOUT_FRAMES, AiLayoutTreeBuilder } from "./ai-layou
     return `section-${index + 1}`;
 }
 /** The most pictures a page carries; each beyond it is one more empty slot to fill. */ export const AI_LAYOUT_MAX_IMAGES = 3;
+/** The most characters a heading style holds; a longer heading of a page brought in is set as a subtitle (AGL-4107). */ export const AI_LAYOUT_HEADLINE_MAX_CHARS = AI_TEXT_LIMITS.headline;
 /** The most `brand` or `dark` bands a page shows; more and none stands out. */ export const AI_LAYOUT_MAX_STRONG_BANDS = 2;
 const SECTION_PADDING = {
     xs: 8,
@@ -74,8 +79,9 @@ function formSectionOf(sections, plan, targets) {
     const tree = new AiLayoutTreeBuilder();
     const formSection = formSectionOf(designed, plan, targets);
     // The page a visitor opens to get in touch shows the phone and email the
-    // business gave, as links, wherever the design did not (AGL-3979).
-    const sections = aiLayoutWithContactLines(designed, formSection, targets.contact);
+    // business gave, as links, wherever the design did not (AGL-3979). A page
+    // brought in shows what its source shows, and nothing more (AGL-4107).
+    const sections = options.verbatim ? designed : aiLayoutWithContactLines(designed, formSection, targets.contact);
     const page = {
         tree,
         plan,
@@ -184,12 +190,14 @@ function sectionScope(page, raw, index) {
     var _page_design, _raw_blocks_find, _page_plan_sections_index;
     const at = `sections[${index}]`;
     const asked = (_raw_band = raw.band) != null ? _raw_band : 'plain';
-    const ruled = rhythmBand(page, index, asked);
+    // A page brought in keeps the source's bands, every one (AGL-4107).
+    const verbatim = page.options.verbatim === true;
+    const ruled = verbatim ? asked : 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);
+    const band = verbatim ? asked : settleBand(page, ruled, at);
     return {
         page,
         index,
@@ -198,7 +206,7 @@ function sectionScope(page, raw, index) {
         centered: raw.align === 'center',
         level: index === 0 ? 1 : 2,
         headed: false,
-        itemsLeft: AI_LAYOUT_MAX_ITEMS,
+        itemsLeft: verbatim ? Number.POSITIVE_INFINITY : AI_LAYOUT_MAX_ITEMS,
         link: {
             sections: page.plan.sections.map((section)=>section.name),
             from: index,
@@ -218,9 +226,11 @@ 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 verbatim = page.options.verbatim === true;
+    // A quote is a gap the owner fills, and a published page shows no gap
+    // (AGL-3660); a page brought in quotes its own customers' words (AGL-4107).
     const blocks = placePlanned(scope, raw).filter((block)=>{
-        if (block.kind !== 'quotes') return true;
+        if (block.kind !== 'quotes' || verbatim) return true;
         page.settled.push({
             at,
             what: 'a quotes group left out: a published page shows no customer words the brief did not give'
@@ -229,19 +239,23 @@ function drawSection(page, raw, index, scope) {
     });
     // 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')) {
+    if (!verbatim && 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);
+    if (!verbatim && 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);
+    const listed = verbatim ? null : 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 third band in a row with no picture beside one (AGL-4065).
-    if (page.design) {
+    // the third band in a row with no picture beside one (AGL-4065). A page
+    // brought in takes only its hero, around the source's own picture (AGL-4107).
+    if (verbatim) {
+        const opening = index === 0 && raw.hero ? importedHero(scope, raw, blocks) : null;
+        if (opening) return opening;
+    } else if (page.design) {
         const beside = rhythmSection(scope, raw, blocks);
         if (beside) return beside;
         const designed = designSection(scope, raw, blocks);
@@ -281,7 +295,7 @@ function drawSection(page, raw, index, scope) {
                 entry.column[row]
             ] : [])).flat();
     const repeated = ((_placedHere_ = placedHere[0]) == null ? void 0 : _placedHere_.kind) === 'component' ? componentOf(page.targets, placedHere[0].to) : null;
-    if (filled.length >= 2 && repeated && placedHere.every((block)=>block.kind === 'component' && block.to === repeated.id)) {
+    if (!verbatim && filled.length >= 2 && repeated && placedHere.every((block)=>block.kind === 'component' && block.to === repeated.id)) {
         head.push({
             kind: 'cards',
             to: repeated.id,
@@ -296,7 +310,7 @@ function drawSection(page, raw, index, scope) {
     // A row whose columns each hold only one kind of group — a card a column —
     // is that group, laid out by the compiler rather than column by column.
     const groups = filled.flatMap((entry)=>entry.column);
-    if (filled.length >= 2 && groups.every((block)=>isItemGroup(block) && block.kind === groups[0].kind && block.to === groups[0].to)) {
+    if (!verbatim && filled.length >= 2 && groups.every((block)=>isItemGroup(block) && block.kind === groups[0].kind && block.to === groups[0].to)) {
         head.push(_extends({}, groups[0], {
             col: undefined,
             items: groups.flatMap((block)=>{
@@ -312,7 +326,7 @@ function drawSection(page, raw, index, scope) {
     }
     // A row whose columns all say the same kind of thing, three or more across,
     // is a group of cards: one design, the words the columns gave.
-    if (filled.length >= 3 && sameShape(filled.map((entry)=>entry.column))) {
+    if (!verbatim && filled.length >= 3 && sameShape(filled.map((entry)=>entry.column))) {
         head.push(...columnsAsCards(filled.map((entry)=>entry.column)));
         page.settled.push({
             at,
@@ -329,7 +343,7 @@ function drawSection(page, raw, index, scope) {
     // heading, the first section always carries the page's one h1, and a
     // heading written after a group whose titles sit under it moves above it.
     const inOrder = ()=>head.concat(filled.flatMap((entry)=>entry.column), tail);
-    const speaks = (block)=>block.kind === 'heading' && !!aiLayoutWords(block.text, 'heading', page.targets.facts, page.options.language);
+    const speaks = (block)=>block.kind === 'heading' && !!(verbatim ? aiLayoutAsWritten(block.text) : aiLayoutWords(block.text, 'heading', page.targets.facts, page.options.language));
     for (const list of [
         head,
         tail,
@@ -349,7 +363,7 @@ function drawSection(page, raw, index, scope) {
     }
     const order = inOrder();
     const first = order.findIndex(speaks);
-    if (first > 0 && order.slice(0, first).some((block)=>block.kind === 'cards' || block.kind === 'steps' || block.kind === 'component')) {
+    if (!verbatim && first > 0 && order.slice(0, first).some((block)=>block.kind === 'cards' || block.kind === 'steps' || block.kind === 'component')) {
         const lead = order[first];
         for (const list of [
             head,
@@ -484,10 +498,12 @@ function drawSection(page, raw, index, scope) {
 /** A group whose items sit side by side. */ function isItemGroup(block) {
     return block.kind === 'cards' || block.kind === 'steps' || block.kind === 'stats' || block.kind === 'quotes';
 }
-/** Whether a block spans more than a reading column: a row of several items. */ function isWideGroup(block) {
+/** Whether a block spans more than a reading column: a row of several items, or a table, tabs or logos of a page brought in. */ function isWideGroup(block) {
     var _ref;
     var _block_items;
-    return (block.kind === 'cards' || block.kind === 'steps' || block.kind === 'stats' || block.kind === 'quotes') && ((_ref = (_block_items = block.items) == null ? void 0 : _block_items.length) != null ? _ref : 0) >= 2;
+    if (block.kind === 'table' || block.kind === 'tabs' || block.kind === 'logos') return true;
+    return (block.kind === 'cards' || block.kind === 'steps' || block.kind === 'stats' || block.kind === 'quotes') && ((_ref = (_block_items = block.items) == null ? void 0 : _block_items.length) != null ? _ref : 0) >= 2 && // A page brought in lays a group out as its source does: one to a row reads at a reading width.
+    block.columns !== 1;
 }
 /** A full-width flow centered on a wide section is held to a reading width. */ function centered(scope, flowId, wide) {
     var _flow_nodes;
@@ -828,7 +844,7 @@ function compileBlock(scope, block, room) {
         case 'component':
             return component(scope, block);
         case 'list':
-            return list(scope, block);
+            return list(scope, block, room);
         case 'faq':
             return faq(scope, block);
         case 'cards':
@@ -836,6 +852,12 @@ function compileBlock(scope, block, room) {
         case 'stats':
         case 'quotes':
             return group(scope, block, room);
+        case 'table':
+            return table(scope, block);
+        case 'tabs':
+            return tabs(scope, block, room);
+        case 'logos':
+            return logos(scope, block);
         default:
             return null;
     }
@@ -864,8 +886,15 @@ function align(scope) {
         align: 'center'
     } : {};
 }
+/**
+ * Words as a page shows them: fitted to their place at a clean boundary, or,
+ * on a page brought in (AGL-4107), exactly as the source wrote them.
+ */ function say(scope, value, place) {
+    if (scope.page.options.verbatim) return aiLayoutAsWritten(value);
+    return aiLayoutWords(value, place, scope.page.targets.facts, scope.page.options.language);
+}
 function words(scope, block, place, variant, props, sx) {
-    const text = aiLayoutWords(block.text, place, scope.page.targets.facts, scope.page.options.language);
+    const text = say(scope, block.text, place);
     if (!text) return null;
     return scope.page.tree.add('muiTypography', _extends({
         children: text,
@@ -884,10 +913,13 @@ function words(scope, block, place, variant, props, sx) {
     const own = !scope.headed;
     const level = own ? scope.level : scope.level + 1;
     const place = level === 1 ? 'title' : own ? 'heading' : 'itemTitle';
-    const text = aiLayoutWords(block.text, place, scope.page.targets.facts, scope.page.options.language);
+    const text = say(scope, block.text, place);
     if (!text) return null;
     scope.headed = scope.headed || own;
-    const variant = level === 1 ? block.style === 'large' ? 'displayXl' : 'h1' : own ? 'h2' : 'h4';
+    // A source's heading longer than a heading style holds is set in a subtitle
+    // style, still a heading at its level (AGL-4107): every word of it is kept.
+    const long = scope.page.options.verbatim === true && text.length > AI_LAYOUT_HEADLINE_MAX_CHARS;
+    const variant = long ? 'subtitle1' : level === 1 ? block.style === 'large' ? 'displayXl' : 'h1' : own ? 'h2' : 'h4';
     return scope.page.tree.add('muiTypography', _extends({
         children: text,
         variant,
@@ -902,19 +934,25 @@ function words(scope, block, place, variant, props, sx) {
 }
 function compileButton(scope, block) {
     var _block_style;
+    const verbatim = scope.page.options.verbatim === true;
     // Words that carry the phone or the email are kept whole (AGL-3979).
-    const asked = aiLayoutContactLabel(block.text, scope.page.targets.contact) || aiLayoutFitText(block.text, 'label', scope.page.options.language);
+    const asked = verbatim ? aiLayoutAsWritten(block.text) : aiLayoutContactLabel(block.text, scope.page.targets.contact) || aiLayoutFitText(block.text, 'label', scope.page.options.language);
     if (!asked) return null;
-    const destination = aiLayoutResolveLink(block.to, asked, scope.link, scope.page.targets);
+    const destination = verbatim ? aiLayoutImportedDestination(block.to, scope.page.plan.sections.length) : aiLayoutResolveLink(block.to, asked, scope.link, scope.page.targets);
     if (!destination) {
+        // A page brought in keeps the words of a link that goes nowhere here (AGL-4107).
+        if (verbatim) return words(scope, block, 'text', 'body1', {}, muted(scope));
         scope.page.settled.push({
             at: scope.at,
             what: `the button "${asked}" has nowhere to go; left out`
         });
         return null;
     }
+    // A link of a page brought in longer than a button's label holds is its
+    // words, as a link (AGL-4107): every word kept, and it still goes there.
+    if (verbatim && asked.length > AI_TEXT_LIMITS.button) return linkedWords(scope, asked, destination);
     // A button to a page merged into the blog names the blog (AGL-3676).
-    const label = aiLayoutRenamedLabel(asked, destination);
+    const label = verbatim ? asked : aiLayoutRenamedLabel(asked, destination);
     if (label !== asked) scope.page.settled.push({
         at: scope.at,
         what: `the button "${asked}" named for the blog: "${label}"`
@@ -944,6 +982,42 @@ function compileButton(scope, block) {
     linkTo(scope, id, destination);
     return id;
 }
+/**
+ * Where a link of a page brought in goes (AGL-4107), as its compile wrote it:
+ * `page:<id>` a page of the site by its id — any page the import plans, which
+ * a visitor reaches once that page is live and sees as words until then —
+ * `#<n>` section n of this page, a `mailto:` or `tel:` link, or the
+ * `https:` address the source linked. Anything else goes nowhere.
+ */ export function aiLayoutImportedDestination(to, sections) {
+    const value = (to != null ? to : '').trim();
+    if (!value) return null;
+    const page = /^page:([A-Za-z0-9_-]{1,128})$/.exec(value);
+    if (page) return {
+        kind: 'page',
+        screenId: page[1]
+    };
+    const section = /^#(\d{1,3})$/.exec(value);
+    if (section) {
+        const index = Number(section[1]) - 1;
+        return index >= 0 && index < sections ? {
+            kind: 'section',
+            index
+        } : null;
+    }
+    if (/^mailto:[^\s@]+@[^\s@]+$/i.test(value) || /^tel:\+?[\d\s().-]{3,}$/i.test(value)) return {
+        kind: 'contact',
+        href: value
+    };
+    try {
+        const url = new URL(value);
+        return url.protocol === 'https:' ? {
+            kind: 'href',
+            href: url.toString()
+        } : null;
+    } catch (unused) {
+        return null;
+    }
+}
 /**
  * A link to a section of this page carries the platform's Scroll to element
  * interaction to that section's root (AGL-3097), by the id the page stores it
@@ -1017,6 +1091,8 @@ function image(scope, block, room) {
     var _aiIconOfWord;
     var _block_to;
     const { page } = scope;
+    // A page brought in places the source's own picture, as the library holds it (AGL-4107).
+    if (page.options.verbatim) return block.picture ? sourcePicture(scope, block.picture, room) : null;
     const alt = aiLayoutFitText(block.text, 'alt', scope.page.options.language);
     if (!alt) return null;
     if (page.images >= maxImages(page)) {
@@ -1212,6 +1288,7 @@ function takeItems(scope, items) {
 }
 function group(scope, block, room) {
     var _block_items;
+    if (scope.page.options.verbatim) return importedGroup(scope, block, room);
     const items = takeItems(scope, cleanItems(scope, (_block_items = block.items) != null ? _block_items : []));
     if (!items.length) return null;
     const perRow = across(items.length, room, block.kind);
@@ -1406,8 +1483,9 @@ function instances(scope, placed, items, perRow) {
         content
     ], 'quoteCard');
 }
-/** A list: check-marked lines, or plain lines where rule 1 holds and the list is long. */ function list(scope, block) {
+/** A list: check-marked lines, or plain lines where rule 1 holds and the list is long. */ function list(scope, block, room = 'full') {
     var _block_items, _block_items1, _aiIconOfWord;
+    if (scope.page.options.verbatim) return importedList(scope, block, room);
     const tree = scope.page.tree;
     const facts = scope.page.targets.facts;
     // A list whose lines go somewhere is a list of links: each line that
@@ -1471,6 +1549,7 @@ function instances(scope, placed, items, perRow) {
 }
 /** Questions and answers: an accordion each, or question-over-answer pairs where rule 1 holds. */ function faq(scope, block) {
     var _block_items;
+    if (scope.page.options.verbatim) return importedFaq(scope, block);
     const tree = scope.page.tree;
     const facts = scope.page.targets.facts;
     const items = takeItems(scope, cleanItems(scope, (_block_items = block.items) != null ? _block_items : []).filter((item)=>!!aiLayoutWords(item.title, 'question', facts, scope.page.options.language)));
@@ -1531,7 +1610,7 @@ function instances(scope, placed, items, perRow) {
     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, scope.page.options.language);
+    return block.kind === 'heading' && !!say(scope, block.text, 'heading');
 }
 /** The section root every designed section is written under, as `compileSection` writes its own. */ function designedRoot(scope, children, sx, dark) {
     var _ref;
@@ -1575,7 +1654,20 @@ function instances(scope, placed, items, perRow) {
     const { page } = scope;
     if (picture.given) page.images += 1;
     else page.pictures += 1;
-    return page.tree.add('image', _extends({
+    // A page brought in places the source's own picture (AGL-4107), described as
+    // the source described it, and decorative where it was not described.
+    const described = picture.alt ? {
+        alt: picture.alt
+    } : {
+        decorative: true
+    };
+    return page.tree.add('image', picture.src ? _extends({
+        src: picture.src
+    }, described, {
+        objectFit: 'cover'
+    }, page.images > 1 ? {
+        loading: 'lazy'
+    } : {}, props) : _extends({
         alt: picture.alt,
         objectFit: 'cover'
     }, picture.given ? {} : {
@@ -1675,14 +1767,15 @@ function instances(scope, placed, items, perRow) {
     }
     return splitSection(scope, head, group, tail);
 }
-/** The first section, in the site's hero arrangement. */ function hero(scope, flow, picture) {
+/** The first section, in the site's hero arrangement. */ function hero(scope, flow, picture, /** The hero a page brought in opens as (AGL-4107), over the site's own. */ asked) {
     const { page } = scope;
     const tree = page.tree;
     const design = page.design;
     const home = design.input.home;
-    // A collage holds two pictures: on a page with room for one, it is drawn split.
-    const chosen = design.choices.hero;
-    const variant = chosen === 'collage' && picturesLeft(page) < 2 ? 'split' : chosen;
+    // A collage holds two pictures: on a page with room for one, it is drawn
+    // split, and so it is on a page brought in, which shows only its own.
+    const chosen = asked != null ? asked : design.choices.hero;
+    const variant = chosen === 'collage' && (picturesLeft(page) < 2 || page.options.verbatim) ? 'split' : chosen;
     page.settled.push({
         at: scope.at,
         what: `drawn as a ${variant} hero`
@@ -3351,6 +3444,557 @@ function listingSection(scope, blocks, placed) {
         card
     ], 'records');
 }
+// ── A page brought in (AGL-4107) ──────────────────────────────────────────
+//
+// What a page brought in from its owner's own website draws that a designed
+// page never does: the source's own pictures and icons, every item of every
+// group with all its parts (its figure, its paragraphs, its bullet points,
+// its own links), its tables, its tabs and its strips of logos. Every word is
+// the source's, as written, and every element is the palette's with the
+// theme's tokens, as the rest of the compiler draws: a card is the theme's
+// Card, a question the Accordion, a link the Button. One style key on each
+// repeated element, so a page of many items repeats no inline style (rule 16).
+/** The source's picture, at its own shape, rounded as the theme rounds a frame. */ function sourcePicture(scope, picture, role = 'image') {
+    const { page } = scope;
+    page.images += 1;
+    const destination = picture.to ? aiLayoutImportedDestination(picture.to, page.plan.sections.length) : null;
+    return page.tree.add('image', _extends({
+        src: picture.src
+    }, picture.alt ? {
+        alt: picture.alt
+    } : {
+        decorative: true
+    }, {
+        objectFit: 'cover'
+    }, picture.small ? {
+        width: AI_LAYOUT_PORTRAIT_SIZE,
+        height: AI_LAYOUT_PORTRAIT_SIZE
+    } : {}, page.images > 1 ? {
+        loading: 'lazy'
+    } : {}, destination ? destinationProps(destination) : {}), {
+        borderRadius: picture.small ? '50%' : 2
+    }, null, role);
+}
+/** The size a byline's portrait is drawn at on a page brought in (AGL-4107): the Image element's own size field, as an author sets it. */ export const AI_LAYOUT_PORTRAIT_SIZE = '4rem';
+/** An item's picture, over its words: the card's own top, at one shape across its group. */ function itemPicture(scope, picture) {
+    const { page } = scope;
+    page.images += 1;
+    return page.tree.add('image', _extends({
+        src: picture.src
+    }, picture.alt ? {
+        alt: picture.alt
+    } : {
+        decorative: true
+    }, {
+        objectFit: 'cover'
+    }, page.images > 1 ? {
+        loading: 'lazy'
+    } : {}), {
+        aspectRatio: '16 / 9'
+    }, null, 'itemPicture');
+}
+/** An icon of a page brought in: the source's own drawing, else the library icon its word names. */ function sourceIcon(scope, own, size, sx, role = 'icon') {
+    const tree = scope.page.tree;
+    if (own.iconPath) return tree.add(AI_ICON_COMPONENT_ID, {
+        iconPath: own.iconPath,
+        size
+    }, sx, null, role);
+    const icon = aiIconOfWord(own.icon);
+    return icon ? tree.add(AI_ICON_COMPONENT_ID, {
+        iconId: icon.id,
+        size
+    }, sx, null, role) : null;
+}
+/** Lines of words as paragraphs of one style, each its own element. */ function paragraphs(scope, lines, variant, sx, role = 'text') {
+    const tree = scope.page.tree;
+    return lines.map((line)=>aiLayoutAsWritten(line)).filter(Boolean).map((line)=>tree.add('muiTypography', _extends({
+            children: line,
+            variant
+        }, align(scope)), sx, null, role));
+}
+/**
+ * Words of a page brought in that are a link longer than a button's label
+ * holds (AGL-4107): the words in the brand color, inside a Link Container
+ * that goes where the source's link went.
+ */ function linkedWords(scope, text, destination) {
+    const tree = scope.page.tree;
+    const words = tree.add('muiTypography', _extends({
+        children: text,
+        variant: 'body1'
+    }, align(scope)), accent(scope), null, 'linkWords');
+    if (destination.kind === 'section') {
+        linkTo(scope, words, destination);
+        return words;
+    }
+    return tree.add('muiLinkBox', _extends({}, destinationProps(destination), {
+        ariaLabel: text.slice(0, AI_TEXT_LIMITS.label)
+    }, destination.kind === 'href' ? {
+        newTab: true
+    } : {}), null, [
+        words
+    ], 'longLink');
+}
+/** An item's bullet points: each led by the source's mark where it drew one, else one under another. */ function bullets(scope, lines, iconPath) {
+    const tree = scope.page.tree;
+    const said = lines.map((line)=>aiLayoutAsWritten(line)).filter(Boolean);
+    if (!said.length) return null;
+    if (!iconPath) {
+        const rows = said.map((line)=>tree.add('muiTypography', {
+                children: line,
+                variant: 'body2'
+            }, null, null, 'line'));
+        return tree.add('muiStack', {
+            spacing: '1'
+        }, null, rows, 'bullets');
+    }
+    const rows = said.map((line)=>tree.add('muiStack', {
+            direction: 'row',
+            spacing: '1',
+            alignItems: 'flex-start'
+        }, null, [
+            sourceIcon(scope, {
+                iconPath
+            }, '20', accent(scope), 'check'),
+            tree.add('muiTypography', {
+                children: line,
+                variant: 'body2'
+            }, null, null, 'line')
+        ], 'row'));
+    return tree.add('muiStack', {
+        spacing: '1'
+    }, null, rows, 'bullets');
+}
+/** An item's own calls to action, side by side, each as the source drew it. */ function itemLinks(scope, links) {
+    const tree = scope.page.tree;
+    const ids = links.map((link)=>{
+        var _link_style;
+        return compileButton(scope, _extends({
+            kind: 'button',
+            text: link.text
+        }, link.to ? {
+            to: link.to
+        } : {}, {
+            style: (_link_style = link.style) != null ? _link_style : 'quiet'
+        }));
+    }).filter((id)=>!!id);
+    if (!ids.length) return null;
+    if (ids.length === 1) return ids[0];
+    return tree.add('muiStack', {
+        direction: 'row',
+        spacing: '2',
+        useFlexGap: true,
+        flexWrap: 'wrap'
+    }, null, ids, 'actions');
+}
+/** How many items of a page brought in sit side by side: as the source lays them out, within the room. */ function importedAcross(block, count, room) {
+    const source = block.columns && block.columns > 0 ? block.columns : count <= 3 ? count : 3;
+    const wide = Math.max(1, Math.min(4, source, count));
+    if (room === 'narrow') return 1;
+    if (room === 'half') return Math.min(2, wide);
+    return wide;
+}
+/** Whether an item has anything to show. */ function itemShows(item) {
+    var _item_figure, _item_more, _item_list, _item_links;
+    return Boolean(item.title.trim() || item.text.trim() || ((_item_figure = item.figure) == null ? void 0 : _item_figure.trim()) || ((_item_more = item.more) == null ? void 0 : _item_more.length) || ((_item_list = item.list) == null ? void 0 : _item_list.length) || ((_item_links = item.links) == null ? void 0 : _item_links.length) || item.picture || item.iconPath);
+}
+/**
+ * A group of a page brought in: every item of it, each with all its parts,
+ * laid out in the source's columns and drawn the way its design answer chose
+ * (`variant`): the theme's cards, open columns under a rule, open columns led
+ * by their icons, or pictures over their words.
+ */ function importedGroup(scope, block, room) {
+    var _block_items;
+    const items = ((_block_items = block.items) != null ? _block_items : []).filter(itemShows);
+    if (!items.length) return null;
+    const perRow = importedAcross(block, items.length, room);
+    const ids = items.map((item)=>importedItem(scope, block, item));
+    return layOut(scope, noted(scope, ids), perRow, block.kind === 'stats' ? '4' : '3', block.kind === 'cards' ? 'cards' : block.kind);
+}
+/** The style an item of a group is drawn in: the design answer's, else the source's own box or none. */ function itemStyle(block) {
+    if (block.variant) return block.variant;
+    if (block.kind === 'stats') return 'open';
+    return block.style === 'quiet' ? 'open' : 'cards';
+}
+/** One item of a group of a page brought in, every part of it in the source's order. */ function importedItem(scope, block, item) {
+    var _tree_nodes_shown_, _item_links;
+    const tree = scope.page.tree;
+    const style = itemStyle(block);
+    const kind = block.kind;
+    const parts = [];
+    const title = aiLayoutAsWritten(item.title);
+    const figure = aiLayoutAsWritten(item.figure);
+    const titleNode = ()=>title ? tree.add('muiTypography', _extends({
+            children: title,
+            variant: itemTitleVariant(scope, 'h5'),
+            component: itemElement(scope)
+        }, align(scope)), null, null, 'title') : null;
+    if (kind === 'quotes') {
+        var _item_more;
+        parts.push(tree.add(AI_ICON_COMPONENT_ID, {
+            iconId: AI_ICON_LIBRARY.quote.id,
+            size: '32'
+        }, {
+            color: 'primary.main'
+        }, null, 'quoteMark'));
+        parts.push(...paragraphs(scope, [
+            item.text,
+            ...(_item_more = item.more) != null ? _item_more : []
+        ], 'body1', null, 'quote'));
+        if (title) parts.push(tree.add('muiTypography', _extends({
+            children: title,
+            variant: 'subtitle2',
+            component: 'p'
+        }, align(scope)), null, null, 'attribution'));
+    } else if (kind === 'stats') {
+        var _item_more1;
+        const lead = figure || title;
+        if (lead) parts.push(tree.add('muiTypography', _extends({
+            children: lead,
+            variant: 'h2',
+            component: 'p'
+        }, align(scope)), accent(scope), null, 'figure'));
+        if (figure && title) parts.push(titleNode());
+        parts.push(...paragraphs(scope, [
+            item.text,
+            ...(_item_more1 = item.more) != null ? _item_more1 : []
+        ], 'body2', muted(scope), 'label'));
+    } else {
+        var _item_more2;
+        var _item_list, _item_links1;
+        if (item.picture) parts.push(itemPicture(scope, item.picture));
+        parts.push(sourceIcon(scope, item, '32', style === 'cards' ? {
+            color: 'primary.main'
+        } : accent(scope)));
+        const number = figure ? tree.add('muiTypography', _extends({
+            children: figure,
+            variant: kind === 'steps' ? 'h3' : 'h4',
+            component: 'p'
+        }, align(scope)), accent(scope), null, kind === 'steps' ? 'number' : 'figure') : null;
+        // A step's number leads it; a plan's price follows its name.
+        if (kind === 'steps') parts.push(number, titleNode());
+        else parts.push(titleNode(), number);
+        parts.push(...paragraphs(scope, [
+            item.text,
+            ...(_item_more2 = item.more) != null ? _item_more2 : []
+        ], 'body1', muted(scope)));
+        if ((_item_list = item.list) == null ? void 0 : _item_list.length) parts.push(bullets(scope, item.list, item.listIconPath));
+        if ((_item_links1 = item.links) == null ? void 0 : _item_links1.length) parts.push(itemLinks(scope, item.links));
+    }
+    const shown = parts.filter((id)=>!!id);
+    // The picture of a card is its top, edge to edge; the rest sit in its padding.
+    const picture = style === 'cards' || style === 'articles' ? shown[0] && ((_tree_nodes_shown_ = tree.nodes[shown[0]]) == null ? void 0 : _tree_nodes_shown_.componentId) === 'image' ? shown.shift() : null : null;
+    const stack = tree.add('muiStack', _extends({
+        spacing: '1.5'
+    }, scope.centered && (kind === 'stats' || style === 'icons') ? {
+        alignItems: 'center'
+    } : {}), null, shown, kind === 'steps' ? 'step' : kind === 'stats' ? 'stat' : 'cardStack');
+    let drawn;
+    if (style === 'cards' || style === 'articles') {
+        const content = tree.add('muiCardContent', null, {
+            p: 3
+        }, [
+            stack
+        ], 'cardContent');
+        drawn = tree.add('muiCard', null, {
+            height: '100%'
+        }, picture ? [
+            picture,
+            content
+        ] : [
+            content
+        ], kind === 'quotes' ? 'quoteCard' : 'card');
+    } else if (style === 'ruled') {
+        drawn = tree.add('muiBox', null, {
+            borderTop: 1
+        }, [
+            tree.add('muiBox', null, {
+                pt: 2.5
+            }, [
+                stack
+            ], 'ruledWords')
+        ], 'ruled');
+    } else {
+        drawn = stack;
+    }
+    // An item the source made one link as a whole is one here (AGL-4107): its
+    // words keep their places, and pressing anywhere on it goes where it went.
+    const whole = !((_item_links = item.links) == null ? void 0 : _item_links.length) && item.to ? aiLayoutImportedDestination(item.to, scope.page.plan.sections.length) : null;
+    if (!whole || whole.kind === 'section') return drawn;
+    return tree.add('muiLinkBox', _extends({}, destinationProps(whole), title ? {
+        ariaLabel: title.slice(0, 200)
+    } : {}, whole.kind === 'href' ? {
+        newTab: true
+    } : {}), {
+        height: '100%'
+    }, [
+        drawn
+    ], 'linked');
+}
+/** A list of a page brought in: each line as written, led by the source's mark where it drew one, a link where it was one. */ function importedList(scope, block, room) {
+    var _block_items, _block_columns;
+    const tree = scope.page.tree;
+    const items = ((_block_items = block.items) != null ? _block_items : []).filter((item)=>aiLayoutAsWritten(item.title || item.text));
+    if (!items.length) return null;
+    const rows = items.map((item)=>{
+        const line = aiLayoutAsWritten([
+            item.title,
+            item.text
+        ].filter((part)=>part.trim()).join(' '));
+        const destination = item.to ? aiLayoutImportedDestination(item.to, scope.page.plan.sections.length) : null;
+        const words = !destination ? tree.add('muiTypography', {
+            children: line,
+            variant: 'body1'
+        }, null, null, 'line') : line.length > AI_TEXT_LIMITS.button ? linkedWords(scope, line, destination) : tree.add('muiScreenLink', _extends({
+            children: line,
+            renderAs: 'link',
+            color: 'inherit'
+        }, destinationProps(destination)), null, null, 'link');
+        if (destination && line.length <= AI_TEXT_LIMITS.button) linkTo(scope, words, destination);
+        const mark = item.iconPath || item.icon ? sourceIcon(scope, item, '22', accent(scope), 'check') : null;
+        return mark ? tree.add('muiStack', {
+            direction: 'row',
+            spacing: '1.5',
+            alignItems: 'flex-start'
+        }, null, [
+            mark,
+            words
+        ], 'row') : words;
+    });
+    noted(scope, rows);
+    const perRow = importedAcross(_extends({}, block, {
+        columns: (_block_columns = block.columns) != null ? _block_columns : 1
+    }), rows.length, room);
+    if (perRow > 1) return layOut(scope, rows, perRow, '2', 'list');
+    return tree.add('muiStack', {
+        spacing: '1.5'
+    }, null, rows, 'list');
+}
+/** Questions and answers of a page brought in: an accordion each, the first open, every answer's paragraphs in it. */ function importedFaq(scope, block) {
+    var _block_items;
+    const tree = scope.page.tree;
+    const items = ((_block_items = block.items) != null ? _block_items : []).filter((item)=>aiLayoutAsWritten(item.title));
+    if (!items.length) return null;
+    const panels = items.map((item, position)=>{
+        var _item_more;
+        var _item_list, _item_links;
+        const answer = paragraphs(scope, [
+            item.text,
+            ...(_item_more = item.more) != null ? _item_more : []
+        ], 'body1', {
+            color: 'text.secondary'
+        }, 'answer');
+        if ((_item_list = item.list) == null ? void 0 : _item_list.length) answer.push(bullets(scope, item.list, item.listIconPath));
+        if ((_item_links = item.links) == null ? void 0 : _item_links.length) {
+            const links = itemLinks(scope, item.links);
+            if (links) answer.push(links);
+        }
+        const shown = answer.filter(Boolean);
+        return tree.add('muiAccordion', _extends({
+            disableGutters: true
+        }, position === 0 ? {
+            defaultExpanded: true
+        } : {}), null, [
+            tree.add('muiAccordionSummary', {
+                children: aiLayoutAsWritten(item.title)
+            }, null, null, 'question'),
+            shown.length ? tree.add('muiAccordionDetails', null, null, [
+                shown.length === 1 ? shown[0] : tree.add('muiStack', {
+                    spacing: '1.5'
+                }, null, shown, 'answerStack')
+            ], 'details') : null
+        ], 'panel');
+    });
+    noted(scope, panels);
+    return tree.add('muiStack', {
+        spacing: '1.5'
+    }, null, panels, 'faq');
+}
+/** A table's cell as the Table element's grid holds it: one line, its pipes escaped. */ function tableCell(text) {
+    return aiLayoutAsWritten(text).replace(/\|/g, '\\|');
+}
+/** A table of a page brought in: the theme's Table element, every cell's words as written. */ function table(scope, block) {
+    var _block_rows;
+    const rows = ((_block_rows = block.rows) != null ? _block_rows : []).filter((row)=>row.cells.some((cell)=>aiLayoutAsWritten(cell)));
+    if (!rows.length) return null;
+    const width = Math.max(...rows.map((row)=>row.cells.length));
+    const grid = rows.map((row)=>`| ${Array.from({
+            length: width
+        }, (_, at)=>{
+            var _row_cells_at;
+            return tableCell((_row_cells_at = row.cells[at]) != null ? _row_cells_at : '');
+        }).join(' | ')} |`).join('\n');
+    return scope.page.tree.add('dataTable', {
+        rows: grid,
+        headerRow: block.header === true
+    }, null, null, 'table');
+}
+/** A label the Tabs element can name a panel by: its words on one line, with no comma it would split at. */ function tabLabel(label) {
+    const text = aiLayoutAsWritten(label);
+    return text && !text.includes(',') && text.length <= AI_TEXT_LIMITS.label ? text : null;
+}
+/**
+ * Tabs of a page brought in: the Tabs element with a panel for each tab,
+ * opening on the one the source shows open, where every tab has its panel.
+ * A source whose script draws its other panels only when clicked gives a
+ * page the open one alone (aglyn.com's plan tabs): then its labels are drawn
+ * as the strip they are — the open one filled, the rest outlined — over the
+ * panel the source showed, so every label and every word is on the page and
+ * no tab opens onto nothing.
+ */ function tabs(scope, block, room) {
+    var _block_tabs;
+    const tree = scope.page.tree;
+    const given = ((_block_tabs = block.tabs) != null ? _block_tabs : []).filter((tab)=>aiLayoutAsWritten(tab.label) || tab.blocks.length);
+    if (!given.length) return null;
+    const labels = given.map((tab)=>tabLabel(tab.label));
+    const panels = given.map((tab)=>tab.blocks.length ? compileFlow(scope, tab.blocks, room) : null);
+    const whole = given.length >= 2 && given.length <= 8 && labels.every((label)=>!!label) && new Set(labels.map((label)=>label.toLowerCase())).size === labels.length && panels.every(Boolean);
+    if (whole) {
+        const open = given.findIndex((tab)=>tab.selected);
+        return tree.add('muiTabs', _extends({
+            labels: labels.join('\n'),
+            variant: 'scrollable'
+        }, open > 0 ? {
+            opensOn: labels[open]
+        } : {}), null, given.map((_, at)=>tree.add('muiTabPanel', {
+                label: labels[at]
+            }, null, [
+                panels[at]
+            ], 'tabPanel')), 'tabs');
+    }
+    const strip = given.map((tab)=>({
+            text: aiLayoutAsWritten(tab.label),
+            selected: tab.selected === true
+        })).filter((tab)=>tab.text).map((tab)=>tab.selected ? tree.add('muiPaper', {
+            variant: 'elevation',
+            elevation: '0'
+        }, {
+            bgcolor: 'primary.main'
+        }, [
+            tree.add('muiBox', null, {
+                py: 0.75,
+                color: 'primary.contrastText'
+            }, [
+                tree.add('muiTypography', {
+                    children: tab.text,
+                    variant: 'body2'
+                }, {
+                    px: 2
+                }, null, 'tabLabel')
+            ], 'tabWords')
+        ], 'tab') : chip(scope, tab.text, 'tab'));
+    const parts = [
+        strip.length ? tree.add('muiStack', _extends({
+            direction: 'row',
+            spacing: '1',
+            useFlexGap: true,
+            flexWrap: 'wrap'
+        }, scope.centered ? {
+            justifyContent: 'center'
+        } : {}), null, strip, 'tabStrip') : null,
+        ...panels
+    ].filter((id)=>!!id);
+    if (!parts.length) return null;
+    return parts.length === 1 ? parts[0] : tree.add('muiStack', {
+        spacing: '4'
+    }, null, parts, 'tabs');
+}
+/** A short line on an outlined surface of the theme's own shape: a label, a tag, a tab the source draws as one. */ function chip(scope, words, role) {
+    const tree = scope.page.tree;
+    return tree.add('muiPaper', {
+        variant: 'outlined'
+    }, {
+        py: 0.75
+    }, [
+        tree.add('muiTypography', {
+            children: words,
+            variant: 'body2'
+        }, {
+            px: 2
+        }, null, `${role}Label`)
+    ], role);
+}
+/** A strip of logos of a page brought in: each picture at one height, or each short line as a label on an outlined surface. */ function logos(scope, block) {
+    var _block_items;
+    var _block_items1;
+    const tree = scope.page.tree;
+    const ids = ((_block_items = block.items) != null ? _block_items : []).flatMap((item)=>{
+        if (item.picture) {
+            scope.page.images += 1;
+            return [
+                tree.add('image', _extends({
+                    src: item.picture.src
+                }, item.picture.alt ? {
+                    alt: item.picture.alt
+                } : {
+                    decorative: true
+                }, {
+                    objectFit: 'contain',
+                    width: 'auto'
+                }, scope.page.images > 1 ? {
+                    loading: 'lazy'
+                } : {}), {
+                    height: {
+                        xs: 32,
+                        md: 40
+                    }
+                }, null, 'logo')
+            ];
+        }
+        const words = aiLayoutAsWritten([
+            item.title,
+            item.text
+        ].filter((part)=>part.trim()).join(' '));
+        return words ? [
+            chip(scope, words, 'chip')
+        ] : [];
+    });
+    if (!ids.length) return null;
+    return tree.add('muiStack', _extends({
+        direction: 'row',
+        spacing: ((_block_items1 = block.items) == null ? void 0 : _block_items1.some((item)=>item.picture)) ? '5' : '1.5',
+        useFlexGap: true,
+        flexWrap: 'wrap',
+        alignItems: 'center'
+    }, scope.centered ? {
+        justifyContent: 'center'
+    } : {}), null, noted(scope, ids), 'logos');
+}
+/**
+ * The opening of a page brought in, as the hero its design answer chose
+ * around the source's own picture (AGL-4107): its words and one picture of
+ * the source's, nothing else. Any other opening is drawn as its source lays
+ * it out, its picture where the source placed it.
+ */ function importedHero(scope, raw, blocks) {
+    const { page } = scope;
+    if (!page.design || !raw.hero) return null;
+    const pictures = blocks.filter((block)=>block.kind === 'image' && block.picture);
+    if (pictures.length !== 1) return null;
+    const flow = blocks.filter((block)=>block.kind !== 'image');
+    if (!flow.length || !flow.every((block)=>WORD_KINDS.has(block.kind))) return null;
+    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"
+        });
+    }
+    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] = AI_LAYOUT_HALF_HEROES.has(raw.hero) ? title : _extends({}, title, {
+        style: 'large'
+    });
+    const picture = pictures[0].picture;
+    return hero(scope, flow, {
+        alt: picture.alt,
+        given: true,
+        src: picture.src
+    }, raw.hero);
+}
 /** 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