@aglyn/plugins-ai 1.0.0-beta.231 → 1.0.0-beta.232

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

@@ -1,4 +1,5 @@
 import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
 /**
  * @license
  * Copyright 2026 Aglyn LLC
@@ -67,7 +68,8 @@ const componentOf = (targets, id)=>{
         },
         formSection: formSectionOf(sections, plan, targets),
         pageIcon: pageIconOf(sections),
-        formsPlaced: new Set()
+        formsPlaced: new Set(),
+        itemIds: plan.sections.map(()=>[])
     };
     const roots = plan.sections.map((_, index)=>{
         var _sections_index;
@@ -84,7 +86,8 @@ const componentOf = (targets, id)=>{
         },
         sectionRoots: roots,
         scrollTo: page.scrollTo,
-        settled: page.settled
+        settled: page.settled,
+        itemIds: page.itemIds
     };
 }
 /** The first icon the design names anywhere, else a sparkle: what an empty picture shows. */ function pageIconOf(sections) {
@@ -104,7 +107,7 @@ const componentOf = (targets, id)=>{
 // ── A section ─────────────────────────────────────────────────────────────
 function compileSection(page, raw, index) {
     var _raw_band, _ref;
-    var _page_plan_sections_index_name, _page_plan_sections_index, _page_options_sectionIds;
+    var _placedHere_, _page_plan_sections_index_name, _page_plan_sections_index, _page_options_sectionIds;
     const at = `sections[${index}]`;
     const band = settleBand(page, (_raw_band = raw.band) != null ? _raw_band : 'plain', at);
     const scope = {
@@ -154,6 +157,29 @@ function compileSection(page, raw, index) {
             weight: (_ref = cols == null ? void 0 : cols[position]) != null ? _ref : 1
         };
     }).filter((entry)=>entry.column.length);
+    // A row whose columns each place the same component, one instance a
+    // column or more, is that component's group of cards: the compiler lays
+    // its instances out once, rather than one like Grid a column (rule 1).
+    // Row by row, as the columns showed them: the first of each column, then the second.
+    const deepest = Math.max(0, ...filled.map((entry)=>entry.column.length));
+    const placedHere = Array.from({
+        length: deepest
+    }, (_, row)=>filled.flatMap((entry)=>entry.column[row] ? [
+                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)) {
+        head.push({
+            kind: 'cards',
+            to: repeated.id,
+            items: placedHere.map((block)=>componentItem(block, repeated.props))
+        });
+        page.settled.push({
+            at,
+            what: `${placedHere.length} ${repeated.name} instances in ${filled.length} columns drawn as one group`
+        });
+        filled = [];
+    }
     // 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);
@@ -292,6 +318,30 @@ function compileSection(page, raw, index) {
         container
     ], '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
+ * title and its text-like prop as the text, which `instanceValues` writes
+ * back into the same props.
+ */ function componentItem(block, props) {
+    var _block_items, _block_items1;
+    // An item that names no prop is the card itself, written as a cards item.
+    const own = ((_block_items = block.items) != null ? _block_items : []).find((item)=>!(item.title in props) && (item.title.trim() || item.text.trim()));
+    if (own && !((_block_items1 = block.items) != null ? _block_items1 : []).some((item)=>item.title in props)) return {
+        title: own.title,
+        text: own.text
+    };
+    const value = (pattern)=>{
+        var _ref, _block_items;
+        var _find;
+        return (_ref = (_find = ((_block_items = block.items) != null ? _block_items : []).find((item)=>item.title in props && pattern.test(item.title) && item.text.trim())) == null ? void 0 : _find.text) != null ? _ref : '';
+    };
+    const title = value(/title|name|heading|label|question|figure|value/i) || block.text || '';
+    const text = value(/text|description|body|summary|copy|answer|detail|caption/i);
+    return {
+        title,
+        text
+    };
+}
 /** A band the page has room for: past two brand or two dark bands, a soft one instead. */ function settleBand(page, band, at) {
     if (band !== 'brand' && band !== 'dark') return band;
     if (page.strong[band] >= AI_LAYOUT_MAX_STRONG_BANDS) {
@@ -357,6 +407,7 @@ function compileSection(page, raw, index) {
         } : {}));
     const lastCol = raw.cols && raw.cols.length >= 2 ? raw.cols.length - 1 : undefined;
     for (const block of blocks){
+        var _block_items;
         if (block.kind === 'form' && !(block.to && forms.has(block.to))) {
             var _plannedForms_;
             const only = page.targets.forms.length === 1 ? page.targets.forms[0].id : undefined;
@@ -367,6 +418,21 @@ function compileSection(page, raw, index) {
             else delete block.to;
         }
         if (block.kind === 'component' && !block.to) block.to = plannedComponents[0];
+        // A group whose every item names the same component is that component's
+        // placements (AGL-3660): the design put the id on its items, not the block.
+        if (AI_LAYOUT_GROUP_KINDS.has(block.kind) && !block.to && ((_block_items = block.items) == null ? void 0 : _block_items.length)) {
+            var _block_items_;
+            const named = (_block_items_ = block.items[0]) == null ? void 0 : _block_items_.to;
+            if (named && componentOf(page.targets, named) && block.items.every((item)=>item.to === named)) {
+                block.to = named;
+                block.items = block.items.map((_0)=>{
+                    let { to: _to } = _0, item = _object_without_properties_loose(_0, [
+                        "to"
+                    ]);
+                    return item;
+                });
+            }
+        }
     }
     for (const form of plannedForms){
         if (!blocks.some((block)=>block.kind === 'form' && block.to === form)) {
@@ -387,7 +453,11 @@ function compileSection(page, raw, index) {
         // A group the design drew where the plan places a component is that component's placements.
         const group = blocks.find((block)=>AI_LAYOUT_GROUP_KINDS.has(block.kind) && block.kind !== 'faq' && block.kind !== 'list' && !block.to);
         if (group) {
-            group.to = component;
+            // Every group of that kind the design split over the row's columns, so
+            // each item of the row is drawn alike (AGL-3660), never the first alone.
+            for (const like of blocks){
+                if (like.kind === group.kind && !like.to) like.to = component;
+            }
             continue;
         }
         blocks.push(_extends({
@@ -508,7 +578,7 @@ export function compileRow(scope, columns) {
             spacing: '2',
             useFlexGap: true,
             flexWrap: 'wrap'
-        }, scope.centered && room === 'full' ? {
+        }, scope.centered ? {
             justifyContent: 'center'
         } : {}), null, buttons, 'actions'));
         buttons = [];
@@ -658,7 +728,11 @@ function compileButton(scope, block) {
         children: label
     }, look, {
         size: scope.index === 0 || block.style === 'large' ? 'large' : 'medium'
-    }, destinationProps(destination)), null, null, 'button');
+    }, destinationProps(destination)), // Sized to its words, never stretched across the column a Stack would
+    // stretch it over (AGL-3660), and aligned with its section.
+    {
+        alignSelf: scope.centered ? 'center' : 'flex-start'
+    }, null, 'button');
     linkTo(scope, id, destination);
     return id;
 }
@@ -691,7 +765,9 @@ export function destinationProps(destination) {
 /**
  * A picture slot: a soft frame at a stock shape showing an icon until the
  * owner places the picture, which then fills it. Its description is its alt
- * text (rule 9), and no source is set: a picture comes from the media library.
+ * text (rule 9), and no source is set here: the compiler stays pure, and
+ * `ai-layout-pictures.ts` fills the slot with a photo the site serves itself
+ * once the page is checked.
  */ function image(scope, block, room) {
     var _aiIconOfWord;
     const { page } = scope;
@@ -729,7 +805,8 @@ export function destinationProps(destination) {
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
-        borderRadius: 4,
+        // In multiples of the theme's corner radius, so a sharp site's frames are sharp.
+        borderRadius: 2,
         bgcolor: 'action.hover',
         // The frame's shape follows its room, so no two slots of a page share one style.
         aspectRatio: room === 'full' ? page.images === 1 ? '16 / 9' : '21 / 9' : room === 'half' ? '4 / 3' : page.images === 1 ? '1 / 1' : '3 / 4'
@@ -751,9 +828,12 @@ export function destinationProps(destination) {
     }, [
         placed
     ], 'formContent');
-    return tree.add('muiCard', {
-        variant: 'outlined'
-    }, null, [
+    // The card style is the site theme's (AGL-3660), as a card dropped from the
+    // drawer takes it; it takes the flow's width, so a centered section never
+    // shrinks a form to its button.
+    return tree.add('muiCard', null, {
+        alignSelf: 'stretch'
+    }, [
         content
     ], 'formCard');
 }
@@ -797,6 +877,11 @@ function textProps(props) {
     return values;
 }
 // ── Groups ────────────────────────────────────────────────────────────────
+/** Records the elements that draw a section's repeated items, and hands them back. */ function noted(scope, ids) {
+    var _scope_page_itemIds_scope_index;
+    if (!scope.frame) (_scope_page_itemIds_scope_index = scope.page.itemIds[scope.index]) == null ? void 0 : _scope_page_itemIds_scope_index.push(...ids);
+    return ids;
+}
 /** How many items sit side by side in a room. */ function across(count, room, kind) {
     if (room === 'narrow') return 1;
     if (room === 'half') return count >= 2 && kind === 'stats' ? 2 : 1;
@@ -847,10 +932,17 @@ function itemSize(perRow) {
     const facts = scope.page.targets.facts;
     return !!(aiLayoutWords(item.title, 'itemTitle', facts) || aiLayoutWords(item.text, 'itemText', facts));
 }
-/** A group's items with every part that has no words left once cleaned emptied, and wordless items left out. */ function cleanItems(scope, items) {
+/** A group's items with every part that has no words left once cleaned emptied, and wordless items left out. */ /** A title that only names the kind of thing it is: "Card", "Item 2", "Title". */ const AI_LAYOUT_PLACEHOLDER_TITLE = /^(?:card|item|title|heading|placeholder|tile|box|feature|service|post|article|entry)\s*\d*$/i;
+function cleanItems(scope, items) {
     const facts = scope.page.targets.facts;
+    // A title that is only the name or id of what places it — a "Card" item of
+    // the Card component (AGL-3660) — is no words a visitor reads.
+    const references = new Set(scope.page.targets.components.flatMap((component)=>[
+            component.name,
+            component.id
+        ]).map((name)=>name.trim().toLowerCase()));
     return items.map((item)=>_extends({}, item, {
-            title: aiLayoutWords(item.title, 'itemTitle', facts) ? item.title : '',
+            title: aiLayoutWords(item.title, 'itemTitle', facts) && !references.has(item.title.trim().toLowerCase()) && !AI_LAYOUT_PLACEHOLDER_TITLE.test(item.title.trim()) ? item.title : '',
             text: aiLayoutWords(item.text, 'itemText', facts) ? item.text : ''
         })).filter((item)=>speaks(scope, item));
 }
@@ -879,13 +971,13 @@ function group(scope, block, room) {
     if (rule1(scope)) return compactGroup(scope, block, items, perRow);
     switch(block.kind){
         case 'steps':
-            return layOut(scope, items.map((item, position)=>step(scope, item, position)), perRow, '4', 'steps');
+            return layOut(scope, noted(scope, items.map((item, position)=>step(scope, item, position))), perRow, '4', 'steps');
         case 'stats':
-            return layOut(scope, items.map((item)=>stat(scope, item)), perRow, '4', 'stats');
+            return layOut(scope, noted(scope, items.map((item)=>stat(scope, item))), perRow, '4', 'stats');
         case 'quotes':
-            return layOut(scope, items.map((item)=>quote(scope, item)), perRow, '3', 'quotes');
+            return layOut(scope, noted(scope, items.map((item)=>quote(scope, item))), perRow, '3', 'quotes');
         default:
-            return layOut(scope, items.map((item)=>card(scope, block, item)), perRow, '3', 'cards');
+            return layOut(scope, noted(scope, items.map((item)=>card(scope, block, item))), perRow, '3', 'cards');
     }
 }
 function instances(scope, placed, items, perRow) {
@@ -898,7 +990,7 @@ function instances(scope, placed, items, perRow) {
             propValues: values
         } : {}), null, null, 'instance');
     });
-    return layOut(scope, ids, perRow, '3', 'instances');
+    return layOut(scope, noted(scope, ids), perRow, '3', 'instances');
 }
 /**
  * A group in its compact form, a title over its text: two elements an item,
@@ -915,7 +1007,7 @@ function instances(scope, placed, items, perRow) {
             secondary: text
         } : {}), null, null, 'pair');
     });
-    return layOut(scope, pairs, perRow, '3', 'compact');
+    return layOut(scope, noted(scope, pairs), perRow, '3', 'compact');
 }
 /** A card: an optional icon, its title one level under the section's heading, and its words. */ function card(scope, block, item) {
     var _aiIconOfWord;
@@ -950,12 +1042,9 @@ function instances(scope, placed, items, perRow) {
     }, [
         stack
     ], 'cardContent');
-    return tree.add('muiCard', block.style === 'primary' || block.style === 'large' ? {
-        variant: 'elevation',
-        elevation: '2'
-    } : {
-        variant: 'outlined'
-    }, {
+    // Flat, outlined, raised, tinted or ruled is the site theme's card style
+    // (AGL-3660), never a choice stamped on this card.
+    return tree.add('muiCard', null, {
         height: '100%'
     }, [
         content
@@ -1030,9 +1119,7 @@ function instances(scope, placed, items, perRow) {
     }, [
         stack
     ], 'quoteContent');
-    return tree.add('muiCard', {
-        variant: 'outlined'
-    }, {
+    return tree.add('muiCard', null, {
         height: '100%'
     }, [
         content
@@ -1062,7 +1149,7 @@ function instances(scope, placed, items, perRow) {
         });
         return links.length ? tree.add('muiStack', {
             spacing: '1'
-        }, null, links, 'links') : null;
+        }, null, noted(scope, links), 'links') : null;
     }
     const lines = cleanItems(scope, (_block_items1 = block.items) != null ? _block_items1 : []).map((item)=>aiLayoutWords([
             item.title,
@@ -1080,7 +1167,7 @@ function instances(scope, placed, items, perRow) {
             ], 'row'));
         return tree.add('muiList', {
             disablePadding: true
-        }, null, rows, 'list');
+        }, null, noted(scope, rows), 'list');
     }
     const check = (_aiIconOfWord = aiIconOfWord(block.icon)) != null ? _aiIconOfWord : AI_ICON_LIBRARY.check;
     const rows = lines.map((line)=>tree.add('muiStack', {
@@ -1099,7 +1186,7 @@ function instances(scope, placed, items, perRow) {
         ], 'row'));
     return tree.add('muiStack', {
         spacing: '1.5'
-    }, null, rows, 'list');
+    }, null, noted(scope, rows), 'list');
 }
 /** Questions and answers: an accordion each, or question-over-answer pairs where rule 1 holds. */ function faq(scope, block) {
     var _block_items;
@@ -1120,7 +1207,7 @@ function instances(scope, placed, items, perRow) {
             ], 'row'));
         return tree.add('muiList', {
             disablePadding: true
-        }, null, rows, 'faq');
+        }, null, noted(scope, rows), 'faq');
     }
     const panels = items.map((item, position)=>tree.add('muiAccordion', _extends({
             disableGutters: true
@@ -1141,7 +1228,7 @@ function instances(scope, placed, items, perRow) {
         ], 'panel'));
     return tree.add('muiStack', {
         spacing: '1.5'
-    }, null, panels, 'faq');
+    }, null, noted(scope, panels), 'faq');
 }
 /** The id the compiled page's root is stored under. */ export const AI_LAYOUT_PAGE_ROOT_ID = CANVAS_ROOT_ELEMENT_ID;