@vectoriox/iox-builder 4.32.2 → 4.32.3

package/fesm2022/vectoriox-iox-builder.mjs

@@ -10063,25 +10063,34 @@ function button(label, createConfig, interaction, styles = {}) {
     return btn;
 }
 /** The C1/C2 board button voices — Swiss by fallback, the brand's the moment tokens seed. */
+// width:'auto' + flexShrink:'0' on every voice: a consent button never stretches to its row's
+// height nor shrinks until its label wraps — both happened on the canvas (Rule 0, 2026-10-10).
 const SOLID = {
     backgroundColor: TOKEN$1('brand-500', '#1f1d1b'), color: TOKEN$1('brandInk', '#ffffff'),
     fontSize: '12px', fontWeight: '600', padding: '9px 16px',
     borderRadius: TOKEN$1('radius-control', '4px'),
+    width: 'auto', flexShrink: '0',
 };
 const OUTLINED = {
     backgroundColor: 'transparent', color: TOKEN$1('ink', '#1f1d1b'),
     borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('ink', '#1f1d1b'),
     fontSize: '12px', fontWeight: '600', padding: '8px 16px',
     borderRadius: TOKEN$1('radius-control', '4px'),
+    width: 'auto', flexShrink: '0',
 };
 const QUIET = {
     backgroundColor: 'transparent', color: TOKEN$1('inkMuted', '#4a453f'),
     fontSize: '11px', fontWeight: '400', padding: '2px 4px', textDecoration: 'underline',
+    width: 'auto', flexShrink: '0',
 };
 function row(createConfig, styles, children) {
     const container = createConfig('Container');
     if (!container || children.some(c => !c))
         return null;
+    // The Container config defaults (minHeight 200px — the canvas droppability affordance) are
+    // serialized with the node, so a preset box must OWN its height or every card ships 200px
+    // tall with dead space (Rule 0 catch, 2026-10-10). Callers may still override.
+    setStyleTrait(container, 'minHeight', 'auto');
     for (const [prop, value] of Object.entries(styles))
         setStyleTrait(container, prop, value);
     container.children = children;
@@ -10111,7 +10120,9 @@ function buildConsentPreset(createConfig) {
     const heading = text$1('Cookies on this site', { fontSize: '13px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
     // The first layer NAMES the three categories (plan §7) — the board does it in the copy.
     const body = text$1('We use analytics and marketing cookies only if you allow them. Necessary ones always run.', { fontSize: '11px', color: TOKEN$1('inkMuted', '#4a453f'), lineHeight: '1.5', maxWidth: '330px' }, createConfig);
-    const textCol = row(createConfig, { display: 'flex', flexDirection: 'column', gap: '4px', flexGrow: '1' }, [heading, body]);
+    // width:'auto' throughout — the Container default is 100%, and two 100%-wide columns
+    // cannot share the bar's row (they wrap into a stack; Rule 0 catch, 2026-10-10).
+    const textCol = row(createConfig, { display: 'flex', flexDirection: 'column', gap: '4px', flexGrow: '1', width: 'auto' }, [heading, body]);
     const accept = button('Accept all', createConfig, click([
         { type: 'grantConsent' },
         { type: 'closeDialog', target: banner.id },
@@ -10123,9 +10134,9 @@ function buildConsentPreset(createConfig) {
     const prefs = button('Preferences', createConfig, click([
         { type: 'openConsentPreferences', target: preferences.id },
     ]), QUIET);
-    const acceptRejectRow = row(createConfig, { display: 'flex', gap: '7px' }, [accept, reject]);
-    const buttonsCol = row(createConfig, { display: 'flex', flexDirection: 'column', gap: '7px', alignItems: 'center' }, [acceptRejectRow, prefs]);
-    const bannerRow = row(createConfig, { display: 'flex', gap: '18px', alignItems: 'flex-start', flexWrap: 'wrap' }, [textCol, buttonsCol]);
+    const acceptRejectRow = row(createConfig, { display: 'flex', gap: '7px', alignItems: 'center', width: 'auto' }, [accept, reject]);
+    const buttonsCol = row(createConfig, { display: 'flex', flexDirection: 'column', gap: '7px', alignItems: 'center', width: 'auto', flexShrink: '0' }, [acceptRejectRow, prefs]);
+    const bannerRow = row(createConfig, { display: 'flex', gap: '18px', alignItems: 'center', flexWrap: 'wrap' }, [textCol, buttonsCol]);
     if (!bannerRow)
         return null;
     banner.children = [bannerRow];
@@ -10147,11 +10158,12 @@ function buildConsentPreset(createConfig) {
     };
     const nameText = (s) => text$1(s, { fontSize: '13px', fontWeight: '600', color: TOKEN$1('ink', '#1f1d1b') }, createConfig);
     const descText = (s) => text$1(s, { fontSize: '11px', color: TOKEN$1('inkMuted', '#6b6560'), lineHeight: '1.5' }, createConfig);
-    const textColOf = (name, desc) => row(createConfig, { display: 'flex', flexDirection: 'column', gap: '2px', flexGrow: '1' }, [nameText(name), descText(desc)]);
+    const textColOf = (name, desc) => row(createConfig, { display: 'flex', flexDirection: 'column', gap: '2px', flexGrow: '1', width: 'auto' }, [nameText(name), descText(desc)]);
     const alwaysOn = text$1('ALWAYS ON', {
         fontSize: '10px', fontWeight: '600', color: TOKEN$1('inkMuted', '#6b6560'),
         borderWidth: '1px', borderStyle: 'solid', borderColor: TOKEN$1('line', '#e6e3e1'),
         borderRadius: '999px', padding: '3px 8px',
+        width: 'auto', flexShrink: '0', // a chip hugs its word (Text defaults to 100%)
     }, createConfig);
     const necessaryCard = row(createConfig, CARD, [
         textColOf('Necessary', 'Keeps the site working: your session, your language, this very choice. Always on.'),
@@ -10169,6 +10181,7 @@ function buildConsentPreset(createConfig) {
         setTrait(sw, 'control', 'switch');
         setTrait(sw, 'name', `consent-${category}`);
         setStyleTrait(sw, 'width', 'auto');
+        setStyleTrait(sw, 'flexShrink', '0');
         return row(createConfig, CARD, [textColOf(name, desc), sw]);
     };
     const analyticsCard = categoryCard('analytics', 'Analytics', 'Anonymous counts of visits and pages. Off means the analytics script never loads.');
@@ -10185,8 +10198,11 @@ function buildConsentPreset(createConfig) {
         { type: 'grantConsent' },
         { type: 'closeDialog', target: preferences.id },
     ]), SOLID);
-    const spacer = row(createConfig, { flexGrow: '1' }, []);
-    const footer = row(createConfig, { display: 'flex', gap: '8px', alignItems: 'center' }, [prefsReject, spacer, prefsDone, prefsAccept]);
+    // No spacer Container — an EMPTY container paints the canvas "click to select" placeholder
+    // and squeezes the buttons until their labels wrap (Rule 0 catch). space-between + an end
+    // group is the same board layout with no empty node.
+    const footerEnd = row(createConfig, { display: 'flex', gap: '8px', alignItems: 'center', width: 'auto', flexShrink: '0' }, [prefsDone, prefsAccept]);
+    const footer = row(createConfig, { display: 'flex', gap: '8px', alignItems: 'center', justifyContent: 'space-between' }, [prefsReject, footerEnd]);
     if (!prefsHeading || !prefsSub || !necessaryCard || !analyticsCard || !marketingCard || !footer)
         return null;
     preferences.children = [prefsHeading, prefsSub, necessaryCard, analyticsCard, marketingCard, footer];