sbuilder-mcp 0.32.0 → 0.32.2

package/CHANGELOG.md

@@ -6,6 +6,21 @@ All notable changes to this project are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.32.2] - 2026-09-11
+
+### Fixed
+- A centred section built by sb_import, sb_import_site, or the built-in layout patterns applied by sb_template_use no longer renders half left-aligned: the theme's heading preset overrides inherited text alignment, so headings and paragraphs now carry `textAlign` directly on the node when the source (or pattern) centers or right-aligns them.
+- The gallery-wall layout pattern applied by sb_template_use now frames every photo to a shared aspect ratio measured as the median of the pictures actually picked, instead of leaving each tile its own shape, so a wall of portraits or landscapes no longer renders with mismatched row heights.
+
+## [0.32.1] - 2026-09-11
+
+### Fixed
+- sb_import, sb_import_site, and the built-in layout patterns applied by sb_template_use now cap every section's width at 1200px instead of leaving it unbounded, so an imported or generated band no longer sets prose on a 1392px line.
+- A wrapping row of two or more columns (a photo gallery, a card shelf) is now built as a CSS grid instead of a flex row, so every cell comes out the same size instead of the last, shorter line stretching to fill the row.
+- Headings built by sb_import, sb_import_site, and the built-in layout patterns now wear the site's own theme text style (heading-1 through heading-6, by reference) instead of the flat 48px default, so an h2 and an h3 no longer render at an identical size.
+- A row of two unequal-weight columns (a hero's text beside its photograph) now keeps the source page's own cross-axis alignment, such as centering, instead of always aligning to the top and leaving dead space under the shorter column.
+- Node ids generated during a build (sb_add, sb_import, sb_import_site) can no longer collide: each process now remembers every id it has issued and redraws on a repeat instead of risking one node silently overwriting another.
+
 ## [0.32.0] - 2026-09-11
 
 ### Added

package/CHANGELOG.vi.md

@@ -6,6 +6,21 @@ Mọi thay đổi đáng chú ý của dự án được ghi lại trong file n
 Định dạng dựa trên [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 và dự án tuân theo [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.32.2] - 2026-09-11
+
+### Fixed
+- Một section được căn giữa do sb_import, sb_import_site, hoặc các layout pattern có sẵn được sb_template_use áp dụng giờ không còn hiển thị nửa căn trái nữa: preset heading của theme ghi đè cách căn chữ được kế thừa, nên heading và đoạn văn giờ mang `textAlign` trực tiếp trên node khi trang nguồn (hoặc pattern) căn giữa hay căn phải chúng.
+- Layout pattern dạng tường ảnh do sb_template_use áp dụng giờ đóng khung mọi ảnh theo một tỉ lệ khung hình chung, tính bằng trung vị của các ảnh thực sự được chọn, thay vì để mỗi ô giữ nguyên hình dạng riêng, nên một tường ảnh chân dung hay ảnh ngang không còn hiển thị với chiều cao các hàng lệch nhau.
+
+## [0.32.1] - 2026-09-11
+
+### Fixed
+- sb_import, sb_import_site, và các layout pattern có sẵn được sb_template_use áp dụng giờ giới hạn chiều rộng mỗi section ở 1200px thay vì để không giới hạn, nên một band được nhập hoặc dựng sẵn không còn đặt đoạn văn trên một dòng dài 1392px.
+- Một hàng bị wrap gồm hai cột trở lên (một dải ảnh, một kệ thẻ sản phẩm) giờ được dựng bằng CSS grid thay vì hàng flex, nên mọi ô đều có cùng kích thước thay vì dòng cuối ngắn hơn bị kéo giãn để lấp đầy hàng.
+- Các heading do sb_import, sb_import_site, và các layout pattern có sẵn dựng ra giờ mang text style của theme site (heading-1 đến heading-6, theo tham chiếu) thay vì cỡ 48px cố định, nên một h2 và một h3 không còn hiển thị cùng một cỡ chữ.
+- Một hàng gồm hai cột có trọng số khác nhau (phần chữ của hero cạnh ảnh của nó) giờ giữ nguyên cách căn theo trục ngang của trang nguồn, ví dụ căn giữa, thay vì luôn căn lên trên và để lại khoảng trống bên dưới cột ngắn hơn.
+- Id của node được tạo trong lúc dựng trang (sb_add, sb_import, sb_import_site) giờ không thể trùng nhau nữa: mỗi tiến trình ghi nhớ mọi id đã cấp và tạo lại nếu bị trùng thay vì để một node âm thầm ghi đè lên node khác.
+
 ## [0.32.0] - 2026-09-11
 
 ### Added

package/dist/catalog/elements.generated.js

@@ -36215,6 +36215,19 @@ export const BASE_ONLY_EXCEPTIONS = [
  * It is also BASE-ONLY (see BASE_ONLY_CONFIG) — render/css.go emits it into the
  * base lane because the config object is read with no responsive merge.
  */
+/**
+ * The eight node-style keys a THEME TEXT STYLE controls, and the var prop each
+ * compiles to: a node wears a style by setting these to
+ * var(--wb-ts-<slug>-<prop>), never by writing the value.
+ *
+ * The theme ships heading-1 (48px) through heading-6, and text-1..3 — a real
+ * type scale that every page built by these tools was ignoring, because the
+ * mapper wrote only htmlTag and the heading-default preset pins 48px flat.
+ *
+ * BY REFERENCE, NEVER BY LITERAL. A literal outranks the preset beneath it
+ * permanently and stops the node following the theme.
+ */
+export const TEXT_STYLE_KEYS = [["fontFamily", "family"], ["fontSize", "size"], ["fontWeight", "weight"], ["fontStyle", "style"], ["lineHeight", "line-height"], ["letterSpacing", "letter-spacing"], ["textTransform", "transform"], ["color", "color"]];
 export const ANIMATION = {
     "types": [
         "fade_in",

package/dist/domains/site/ids.js

@@ -21,7 +21,34 @@ const PREFIXES = {
     'tab-content': 'tc',
     'tab-item': 'ti',
 };
+/**
+ * Every id this process has issued, so it can never issue one twice.
+ *
+ * FOUR RANDOM BYTES IS 32 BITS, AND THAT IS THIN FOR THE JOB. The birthday
+ * bound puts a collision at roughly 1 in 34,000 across 500 draws — which
+ * sounds like never until you notice that one `sb_import_site` run mints
+ * thousands, and that the suite's own uniqueness test HIT IT: 499 unique out of
+ * 500, once, in an ordinary run.
+ *
+ * The consequence is not a warning. Two nodes sharing an id means one
+ * overwrites the other in `doc.nodes` — content silently gone, a parent's child
+ * list pointing at the survivor, and a document that validates, saves and
+ * publishes. It is the same family as every other entry in this repo's file:
+ * the failure has no error attached to it.
+ *
+ * The width stays FOUR BYTES because the platform's own ids are eight hex
+ * characters and a document this server builds should be indistinguishable
+ * from one a human built. Uniqueness comes from remembering instead — which is
+ * the scope that actually matters, since one process builds one document.
+ */
+const issued = new Set();
 export function genId(type) {
     const prefix = PREFIXES[type] ?? (type.replace(/[^a-z]/g, '').slice(0, 2) || 'nd');
-    return `${prefix}_${randomBytes(4).toString('hex')}`;
+    for (;;) {
+        const id = `${prefix}_${randomBytes(4).toString('hex')}`;
+        if (issued.has(id))
+            continue;
+        issued.add(id);
+        return id;
+    }
 }

package/dist/domains/site/importmap.js

@@ -1,5 +1,6 @@
 import { walk } from '../../core/tree.js';
 import { stickySeeds } from './sticky.js';
+import { TEXT_STYLE_KEYS } from '../../catalog/elements.generated.js';
 import { normalizeUrl } from './discover.js';
 import { ICON_NAMES } from '../../catalog/icons.generated.js';
 /** Style keys read off a node, ignoring anything unset. */
@@ -101,17 +102,63 @@ function iconFor(raw) {
  * empty node is the difference between an imported page and an imported page
  * plus twenty findings from `sb_review`.
  */
+/**
+ * THE SITE'S OWN TYPE SCALE, worn by reference.
+ *
+ * The theme ships `heading-1` (48px) through `heading-6` (16px) and `text-1`..
+ * `text-3`, and every page these tools built ignored all of it: the mapper
+ * wrote `htmlTag` and nothing else, so a heading took the `heading-default`
+ * preset, which pins `fontSize: 48px` FLAT. MEASURED on a real build — a
+ * section title and the three item titles beneath it came out identical, on a
+ * page whose document correctly said h2 and h3. "About four type sizes" is the
+ * checklist item; the page had one.
+ *
+ * BY REFERENCE, NEVER BY LITERAL — `var(--wb-ts-<slug>-<prop>)` is what the
+ * editor's own picker stamps. A literal `36px` would outrank the preset beneath
+ * it permanently and stop the node following the theme, which is the detachment
+ * this repo already records for imported icons.
+ *
+ * SIZE AND LINE HEIGHT ONLY, of the eight keys a style controls. Colour and
+ * weight are already answered by the tokens read off the target page (rule 0),
+ * and overwriting those here would make an imported band stop matching the page
+ * it landed on — which is the one thing the token pass exists to prevent. The
+ * editor supports exactly this partial state: the pick is recorded so the
+ * picker shows it, and it can also show that the style has drifted.
+ *
+ * A theme with no such style leaves the var undefined, so every ref carries the
+ * element's own former answer as its CSS fallback: a site on a slimmer theme
+ * renders exactly as it did before this existed.
+ */
+function textScale(slug, fallback) {
+    const style = {};
+    for (const [key, prop] of TEXT_STYLE_KEYS) {
+        if (key !== 'fontSize' && key !== 'lineHeight')
+            continue;
+        const fb = fallback[key];
+        style[key] = `var(--wb-ts-${slug}-${prop}${fb ? `, ${fb}` : ''})`;
+    }
+    return { style, config: { textGlobalStyle: slug } };
+}
 function one(c, t) {
     switch (c.kind) {
         case 'heading': {
             const text = c.text?.trim();
             if (!text)
                 return null;
+            // The level is already decided and already correct in the document; it
+            // simply reached no CSS. heading-1..6 are the theme's own slugs.
+            const scale = textScale(`heading-${Math.min(6, Math.max(1, c.level ?? 2))}`, {});
             return {
                 type: 'heading',
                 specials: { htmlTag: headingTag(c.level), text },
+                config: scale.config,
                 style: {
                     margin: '0',
+                    ...scale.style,
+                    // ON THE NODE, never left to inheritance: the theme's heading preset
+                    // declares its own textAlign, and a class rule beats an inherited
+                    // value.
+                    ...(c.textAlign ? { textAlign: c.textAlign } : {}),
                     ...(t.headingColor ? { color: t.headingColor } : {}),
                     ...(t.headingWeight ? { fontWeight: t.headingWeight } : {}),
                 },
@@ -126,6 +173,7 @@ function one(c, t) {
                 specials: { htmlTag: 'p', text },
                 style: {
                     lineHeight: '1.7',
+                    ...(c.textAlign ? { textAlign: c.textAlign } : {}),
                     ...(t.textColor ? { color: t.textColor } : {}),
                     ...(t.textSize ? { fontSize: t.textSize } : {}),
                 },
@@ -245,6 +293,27 @@ function one(c, t) {
             // a width/height ATTRIBUTE is a used height, and without this the cap below
             // would be the thing ignored. `contain` because the source's crop is not
             // ours to guess.
+            // A FRAME, WHEN THE CALLER MEASURED ONE. `height: auto` is what makes
+            // `aspect-ratio` work here at all — the platform writes the intrinsic
+            // width/height ATTRIBUTES onto every <img>, and a presentational height is
+            // a USED height, so the ratio would otherwise be ignored. That is the same
+            // fix the platform applied to its own media CSS.
+            //
+            // `cover` only inside a frame: filling one means cropping, which is the
+            // trade a wall of tiles makes on purpose. With no frame the answer stays
+            // `contain` — the source's crop is not ours to guess.
+            if (c.ratio) {
+                return {
+                    type: 'image',
+                    specials: { src: c.src, alt: c.alt ?? '' },
+                    style: {
+                        width: '100%',
+                        height: 'auto',
+                        aspectRatio: c.ratio,
+                        objectFit: 'cover',
+                    },
+                };
+            }
             return {
                 type: 'image',
                 specials: { src: c.src, alt: c.alt ?? '' },
@@ -336,6 +405,41 @@ function one(c, t) {
             }
             if (kids.length === 1)
                 return kids[0];
+            // A WRAPPING ROW IS A GRID, because flex cannot wrap into EQUAL CELLS.
+            //
+            // `flex: 1 1 <basis>` lets every item absorb the free space on ITS OWN
+            // LINE, so a short last line is a disaster: MEASURED on a page built by
+            // these tools, a gallery of five photographs came out as four cells of
+            // 330x220 and a fifth of 1392x420 — the same picture, four times the size,
+            // under the others. Nothing reported it, because no box overflowed and no
+            // two boxes overlapped; `measure` cannot see a cell that is merely wrong.
+            //
+            // Dropping the grow factor instead (`0 1 280px`) fixes the blow-up and
+            // buys a ragged right edge on every full line. `repeat(auto-fill,
+            // minmax(280px, 1fr))` is the thing actually wanted and the platform
+            // renders it — verified against a live server before this was written:
+            // as many cells as fit, all equal, the last line cell-sized like the rest.
+            //
+            // Mobile gets one column by name. The flex path's `flexDirection: column`
+            // says nothing to a grid, and a mobile answer that silently does nothing
+            // is rule 3 failing with a value in the document to prove it tried.
+            if (c.wrap) {
+                return {
+                    type: 'flex-block',
+                    style: {
+                        width: '100%',
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+                        gap: '24px',
+                    },
+                    responsive: { mobile: { style: { gridTemplateColumns: '1fr', gap: '16px' } } },
+                    children: kids.map((k) => ({
+                        type: 'flex-block',
+                        style: { width: '100%', minWidth: '0', display: 'flex', flexDirection: 'column', gap: '12px' },
+                        children: [k],
+                    })),
+                };
+            }
             // A ROW OF TWO OR MORE COLUMNS NEEDS AN EXPLICIT STACK BREAKPOINT, and
             // nothing catches it for you: the columns SHRINK to fit, so no box
             // overflows and `measure` stays silent while a photo becomes a sliver and
@@ -352,8 +456,8 @@ function one(c, t) {
                     width: '100%',
                     display: 'flex',
                     flexDirection: 'row',
-                    flexWrap: c.wrap ? 'wrap' : 'nowrap',
-                    alignItems: 'flex-start',
+                    flexWrap: 'nowrap',
+                    alignItems: c.align && c.align !== 'start' ? c.align : 'flex-start',
                     gap: '24px',
                 },
                 responsive: { mobile: { style: { flexDirection: 'column', gap: '16px' } } },

package/dist/domains/site/patterns.js

@@ -43,6 +43,19 @@ export const THEME_TOKENS = {
     textColor: 'var(--wb-color-text)',
     buttonBg: 'var(--wb-color-primary)',
     buttonColor: '#ffffff',
+    // A PAGE WITH NO MEASURE IS NOT AN UNSTYLED PAGE, IT IS A WRONGLY STYLED ONE.
+    //
+    // `sectionMaxWidth` is read off the TARGET page so an imported band matches
+    // what is already there — and a blank page offers nothing to read, so it came
+    // out unbounded. MEASURED at 1440 on a page built entirely by these tools:
+    // every block 1392px wide, every heading and paragraph set on a 1392px line.
+    // That is roughly 200 characters where prose is readable at 60-75, and it is
+    // the single loudest way a generated page announces itself.
+    //
+    // Unbounded was a decision too, and the worse one. This is the same class of
+    // answer as the `64px 24px` padding and the `16px` gap the mapper already
+    // commits to for a page that cannot answer for itself.
+    sectionMaxWidth: '1200px',
 };
 /** One section, through the same mapper an import goes through. */
 function section(children, t, style, innerStyle) {
@@ -63,14 +76,24 @@ function section(children, t, style, innerStyle) {
         children: [{ ...inner, style: { ...inner.style, ...innerStyle } }, ...rest],
     };
 }
-const row = (children, wrap = false) => ({
+const row = (children, wrap = false, align) => ({
     kind: 'group',
     direction: 'row',
     wrap,
+    ...(align ? { align } : {}),
     children,
 });
-const h = (text, level = 2) => ({ kind: 'heading', level, text });
-const p = (text) => ({ kind: 'text', text });
+const h = (text, level = 2, textAlign) => ({
+    kind: 'heading',
+    level,
+    text,
+    ...(textAlign ? { textAlign } : {}),
+});
+const p = (text, textAlign) => ({
+    kind: 'text',
+    text,
+    ...(textAlign ? { textAlign } : {}),
+});
 const cta = (text, href = '#') => ({ kind: 'button', variant: 'cta', text, href });
 /**
  * The picture slot: a real image when the site has one, and WORDS when it does
@@ -97,6 +120,10 @@ export const LAYOUT_PATTERNS = [
         build: (t, pool) => {
             const used = new Set();
             return section([
+                // CENTRED, because a hero's two columns are unequal BY DESIGN: a few
+                // words on one side, a photograph on the other. Top-aligned they
+                // measured 154px beside 420px, and the band read as a caption that
+                // had slipped off the picture.
                 row([
                     { kind: 'group', direction: 'column', children: [h('Tiêu đề chính', 1), p('Một câu nói rõ bạn bán gì và cho ai.'), cta('Mua ngay')] },
                     {
@@ -106,7 +133,7 @@ export const LAYOUT_PATTERNS = [
                             img(pick(pool, used, 'landscape'), 'Ảnh mở đầu', 'Chưa có ảnh nào trong thư viện — sb_media_upload một URL, rồi sb_set src lên khối này.'),
                         ],
                     },
-                ]),
+                ], false, 'center'),
             ], t);
         },
     },
@@ -114,7 +141,10 @@ export const LAYOUT_PATTERNS = [
         id: 'sb_hero_centered',
         name: 'Hero — canh giữa',
         use: 'Mở đầu trang khi chưa có ảnh: tiêu đề lớn, một câu, một nút',
-        build: (t) => section([h('Tiêu đề chính', 1), p('Một câu nói rõ bạn bán gì và cho ai.'), cta('Mua ngay')], t, { alignItems: 'center', textAlign: 'center' }, { alignItems: 'center' }),
+        build: (t) => section(
+        // Centred on the NODES, not left to the section's inherited textAlign —
+        // the theme's heading preset declares its own and wins.
+        [h('Tiêu đề chính', 1, 'center'), p('Một câu nói rõ bạn bán gì và cho ai.', 'center'), cta('Mua ngay')], t, { alignItems: 'center', textAlign: 'center' }, { alignItems: 'center' }),
     },
     {
         id: 'sb_feature_trio',
@@ -135,9 +165,9 @@ export const LAYOUT_PATTERNS = [
         use: 'Ba đến bốn con số lớn với nhãn bên dưới — bằng chứng, không phải lời hứa',
         build: (t) => section([
             row([
-                { kind: 'group', direction: 'column', children: [h('1.000+', 2), p('Khách hàng')] },
-                { kind: 'group', direction: 'column', children: [h('4,9/5', 2), p('Đánh giá trung bình')] },
-                { kind: 'group', direction: 'column', children: [h('24h', 2), p('Giao trong nội thành')] },
+                { kind: 'group', direction: 'column', children: [h('1.000+', 2, 'center'), p('Khách hàng', 'center')] },
+                { kind: 'group', direction: 'column', children: [h('4,9/5', 2, 'center'), p('Đánh giá trung bình', 'center')] },
+                { kind: 'group', direction: 'column', children: [h('24h', 2, 'center'), p('Giao trong nội thành', 'center')] },
             ]),
         ], t, { alignItems: 'center', textAlign: 'center' }, { alignItems: 'center' }),
     },
@@ -145,7 +175,11 @@ export const LAYOUT_PATTERNS = [
         id: 'sb_cta_band',
         name: 'Dải kêu gọi hành động',
         use: 'Một câu và một nút, đặt cuối trang hoặc giữa hai band nội dung',
-        build: (t) => section([h('Sẵn sàng bắt đầu?'), p('Một câu nhắc lại lời hứa chính.'), cta('Mua ngay')], t, { alignItems: 'center', textAlign: 'center' }, { alignItems: 'center' }),
+        build: (t) => section(
+        // CENTRED ON THE NODES. The section's own `textAlign` is inherited, and
+        // the theme's heading preset declares its own — so the band came out
+        // with its words hard left and only the button in the middle.
+        [h('Sẵn sàng bắt đầu?', 2, 'center'), p('Một câu nhắc lại lời hứa chính.', 'center'), cta('Mua ngay')], t, { alignItems: 'center', textAlign: 'center' }, { alignItems: 'center' }),
     },
     {
         id: 'sb_gallery',
@@ -158,11 +192,32 @@ export const LAYOUT_PATTERNS = [
             // SIX IS A WALL, THREE IS A ROW. Bounded because a gallery is a design
             // decision and not a dump of the library — a merchant with 164 assets does
             // not want 164 of them in one band.
+            const picked = [];
             for (let i = 0; i < 6; i += 1) {
                 const m = pick(pool, used, 'any');
                 if (!m)
                     break;
-                shots.push({ kind: 'image', src: m.url, alt: m.name ?? 'Ảnh' });
+                picked.push(m);
+            }
+            // ONE FRAME FOR THE WALL, MEASURED RATHER THAN INVENTED.
+            //
+            // Rule 6 says match a frame's ratio to the ASSET, and a wall of
+            // photographs is the case it does not cover: there is no single asset.
+            // Left alone, every tile keeps its own shape and the grid's rows come out
+            // different heights — measured on a real build, four tiles at 330x220 and
+            // a fifth noticeably taller, which reads as unfinished.
+            //
+            // The MEDIAN of the pictures actually being shown is the honest frame:
+            // most crop by nothing, the outliers crop least, and a library of
+            // portraits gets a portrait wall rather than a landscape one imposed on
+            // it. A picture whose size the library did not report votes for nothing.
+            const ratios = picked
+                .map((m) => (m.width && m.height ? m.width / m.height : 0))
+                .filter((r) => r > 0)
+                .sort((a, b) => a - b);
+            const frame = ratios.length ? ratios[Math.floor(ratios.length / 2)].toFixed(2) : undefined;
+            for (const m of picked) {
+                shots.push({ kind: 'image', src: m.url, alt: m.name ?? 'Ảnh', ...(frame ? { ratio: frame } : {}) });
             }
             if (shots.length === 0) {
                 return section([

package/dist/vision/capture.js

@@ -274,6 +274,23 @@ function capturePage(limits) {
      * loader is displaying until the real one arrives, which is precisely the
      * placeholder this import must not ship.
      */
+    /**
+     * The SOURCE'S OWN text alignment, and only when it is not the default.
+     *
+     * A hero that centres its copy is making a decision; a copy that left-aligns
+     * it is not the same band. `start`/`left` is the browser's answer and saying
+     * it out loud would put a value on every imported paragraph for nothing —
+     * and worse, would override the target page's own centred preset with a
+     * literal.
+     */
+    const alignOf = (el) => {
+        const a = getComputedStyle(el).textAlign;
+        if (a === 'center')
+            return { textAlign: 'center' };
+        if (a === 'right' || a === 'end')
+            return { textAlign: 'right' };
+        return {};
+    };
     const LAZY_SRC = ['data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'data-echo', 'data-url'];
     const widest = (srcset) => {
         let best = '';
@@ -657,7 +674,7 @@ function capturePage(limits) {
                 if (!text)
                     return [];
                 taken.nodes++;
-                return [{ kind: 'heading', level: Number(tag.slice(1)), text }];
+                return [{ kind: 'heading', level: Number(tag.slice(1)), text, ...alignOf(el) }];
             }
             if (tag === 'IMG') {
                 const src = realSrc(el);
@@ -801,7 +818,7 @@ function capturePage(limits) {
                 if (!text)
                     return [];
                 taken.nodes++;
-                return [{ kind: 'text', text }];
+                return [{ kind: 'text', text, ...alignOf(el) }];
             }
             const kids = walkChildren(el);
             if (kids.length > 0) {
@@ -838,6 +855,16 @@ function capturePage(limits) {
                 // cards because it had more than a dozen. The bound that remains is the
                 // whole-import node budget, which is the honest place for "this page is
                 // enormous".
+                // THE SOURCE'S OWN CROSS-AXIS ANSWER. A hero that centres its words
+                // against a tall photograph is making a layout decision, and a copy
+                // that top-aligns them is not the same band — the same reasoning the
+                // `pinned` read already carries. Only the three values that mean
+                // something here; `stretch` is the browser's default and saying it
+                // would put a value in every imported row for nothing.
+                const av = cs.alignItems;
+                const align = av === 'center' ? 'center'
+                    : av === 'flex-end' || av === 'end' ? 'end'
+                        : undefined;
                 const wraps = grid || cs.flexWrap === 'wrap';
                 const ROW_MAX = wraps ? 60 : 12;
                 if (lays && row && kids.length >= 2 && kids.length <= ROW_MAX) {
@@ -849,6 +876,7 @@ function capturePage(limits) {
                             // `nowrap` on one because the property does not apply. Carrying that
                             // literally gave the columns nowhere to go at any width.
                             wrap: wraps,
+                            ...(align ? { align } : {}),
                             children: kids,
                         }];
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbuilder-mcp",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "description": "MCP server that designs and operates a Store Builder site — pages, data, theme and publish — through the platform's own API and live-edit protocol.",
   "mcpName": "io.github.vuluu2k/sbuilder-mcp",
   "type": "module",