sbuilder-mcp 0.32.1 → 0.32.2

package/CHANGELOG.md

@@ -6,6 +6,12 @@ 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

package/CHANGELOG.vi.md

@@ -6,6 +6,12 @@ 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

package/dist/domains/site/importmap.js

@@ -155,6 +155,10 @@ function one(c, t) {
                 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 } : {}),
                 },
@@ -169,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 } : {}),
                 },
@@ -288,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 ?? '' },

package/dist/domains/site/patterns.js

@@ -83,8 +83,17 @@ const row = (children, wrap = false, align) => ({
     ...(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
@@ -132,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',
@@ -153,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' }),
     },
@@ -163,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',
@@ -176,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbuilder-mcp",
-  "version": "0.32.1",
+  "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",