sbuilder-mcp 0.32.0 → 0.32.1

package/CHANGELOG.md

@@ -6,6 +6,15 @@ 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.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,15 @@ 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.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,59 @@ 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,
                     ...(t.headingColor ? { color: t.headingColor } : {}),
                     ...(t.headingWeight ? { fontWeight: t.headingWeight } : {}),
                 },
@@ -336,6 +379,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 +430,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,10 +76,11 @@ 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 });
@@ -97,6 +111,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 +124,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);
         },
     },

package/dist/vision/capture.js

@@ -838,6 +838,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 +859,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.1",
   "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",