@aglyn/plugins-ai 1.0.0-beta.261 → 1.0.0-beta.263

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

@@ -689,6 +689,15 @@ function compileBlock(scope, block, room) {
         color: 'text.secondary'
     };
 }
+/**
+ * A List Item Text's secondary words: MUI draws them in the muted text color
+ * whatever they sit on, so on a brand band, or over a photo, they take the
+ * band's own color as the primary words do (AGL-3886).
+ */ function mutedSecondary(scope) {
+    return scope.band === 'brand' || scope.overPhoto ? {
+        secondaryColor: 'inherit'
+    } : {};
+}
 /** An accent's color: the brand's, or the band's own on a brand band. */ function accent(scope) {
     return scope.band === 'brand' || scope.overPhoto ? null : {
         color: 'primary.main'
@@ -1109,9 +1118,9 @@ function instances(scope, placed, items, perRow) {
         const text = block.kind === 'quotes' ? '[Customer name]' : aiLayoutWords(item.text, block.kind === 'stats' ? 'statLabel' : 'itemText', facts, scope.page.options.language);
         return tree.add('muiListItemText', _extends({
             primary: title
-        }, text ? {
+        }, text ? _extends({
             secondary: text
-        } : {}), null, null, 'pair');
+        }, mutedSecondary(scope)) : {}), null, null, 'pair');
     });
     return layOut(scope, noted(scope, pairs), perRow, '3', 'compact');
 }
@@ -1120,11 +1129,13 @@ function instances(scope, placed, items, perRow) {
     const tree = scope.page.tree;
     const facts = scope.page.targets.facts;
     const icon = (_aiIconOfWord = aiIconOfWord(item.icon)) != null ? _aiIconOfWord : aiIconOfWord(block.icon);
+    // A quiet card draws no surface of its own, so it is colored as the band it sits on.
+    const quiet = block.style === 'quiet';
     const children = [
         icon ? tree.add(AI_ICON_COMPONENT_ID, {
             iconId: icon.id,
             size: '32'
-        }, {
+        }, quiet ? accent(scope) : {
             color: 'primary.main'
         }, null, 'icon') : null,
         item.title.trim() ? tree.add('muiTypography', {
@@ -1135,14 +1146,14 @@ function instances(scope, placed, items, perRow) {
         item.text.trim() ? tree.add('muiTypography', {
             children: aiLayoutWords(item.text, 'itemText', facts, scope.page.options.language),
             variant: 'body1'
-        }, {
+        }, quiet ? muted(scope) : {
             color: 'text.secondary'
         }, null, 'text') : null
     ];
     const stack = tree.add('muiStack', {
         spacing: '1.5'
     }, null, children, 'cardStack');
-    if (block.style === 'quiet') return stack;
+    if (quiet) return stack;
     const content = tree.add('muiCardContent', null, {
         p: 3
     }, [
@@ -1307,9 +1318,9 @@ function instances(scope, placed, items, perRow) {
             }, null, [
                 tree.add('muiListItemText', _extends({
                     primary: aiLayoutWords(item.title, 'question', facts, scope.page.options.language)
-                }, item.text.trim() ? {
+                }, item.text.trim() ? _extends({
                     secondary: aiLayoutWords(item.text, 'answer', facts, scope.page.options.language)
-                } : {}), null, null, 'qa')
+                }, mutedSecondary(scope)) : {}), null, null, 'qa')
             ], 'row'));
         return tree.add('muiList', {
             disablePadding: true