sbuilder-mcp 0.76.2 → 0.76.4

package/CHANGELOG.md

@@ -6,6 +6,19 @@ 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.76.4] - 2026-10-08
+
+### Added
+- `sb_look` reports two new layout findings, `title_bar_stranded` and `title_bar_offcenter`, when a hand-built heading-plus-action row leaves the button short of the right edge or off the heading's centre line, and skips rows that declare a centred layout.
+
+### Fixed
+- `sb_import` and `sb_import_site` now map a heading beside a single action such as "Xem tất cả" to a space-between row with centred alignment, so the button sits on the right edge, shares the heading's centre line, and stacks left-aligned on mobile.
+
+## [0.76.3] - 2026-09-28
+
+### Fixed
+- `sb_review`'s `catalogue` readiness gap now reads "1 product" instead of "1 products" when the store has exactly one inactive product and none active.
+
 ## [0.76.2] - 2026-09-28
 
 ### Fixed

package/CHANGELOG.vi.md

@@ -6,6 +6,19 @@ 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.76.4] - 2026-10-08
+
+### Added
+- `sb_look` báo thêm hai finding bố cục `title_bar_stranded` và `title_bar_offcenter` khi một hàng tiêu đề kèm nút được dựng tay để nút lệch khỏi mép phải hoặc lệch tâm dọc so với tiêu đề, và bỏ qua các hàng khai báo bố cục căn giữa.
+
+### Fixed
+- `sb_import` và `sb_import_site` giờ ánh xạ một tiêu đề đi kèm một nút duy nhất như "Xem tất cả" thành hàng space-between căn giữa theo chiều dọc, nên nút nằm sát mép phải, cùng tâm dọc với tiêu đề và xếp dọc căn trái trên mobile.
+
+## [0.76.3] - 2026-09-28
+
+### Fixed
+- Gap readiness `catalogue` của `sb_review` giờ hiển thị "1 product" thay vì "1 products" khi store chỉ có đúng một sản phẩm inactive và không cái nào active.
+
 ## [0.76.2] - 2026-09-28
 
 ### Fixed

package/dist/domains/site/findings.js

@@ -71,6 +71,11 @@ export const FIX = {
     dead_binding_field: 'Rebind with sb_bind and a field of the form "specials.<key>".',
     off_canvas: 'Give it a width that can shrink — sb_set id "<id>", namespace style, keys { "maxWidth": "100%" } at this breakpoint.',
     text_too_small: 'Raise it for this breakpoint: sb_set id "<id>", namespace style, keys { "fontSize": "16px" }.',
+    title_bar_stranded: 'Put the action on the right edge: sb_set id "<id>", namespace style, keys ' +
+        '{ "justifyContent": "space-between", "alignItems": "center" }, and sb_set id "<cell>", ' +
+        'namespace style, keys { "flex": "0 0 auto", "width": "auto" }. On mobile give "<id>" ' +
+        '{ "flexDirection": "column", "alignItems": "flex-start" }.',
+    title_bar_offcenter: 'Centre the pair on one line: sb_set id "<id>", namespace style, keys { "alignItems": "center" } at this breakpoint.',
     overlap: 'Check the two for a fixed height or a negative margin at this breakpoint; sb_look with node_id on each shows which one is out of place.',
     // Both sticky findings name a node OTHER than the one at fault, because in
     // both cases the node carrying the defect is not the node to edit.

package/dist/domains/site/importmap.js

@@ -184,6 +184,22 @@ function textScale(slug, fallback) {
     }
     return { style, config: { textGlobalStyle: slug } };
 }
+const holds = (c, kind) => c.kind === kind || (c.children ?? []).some((k) => holds(k, kind));
+/** A button, or a packed run of nothing but buttons. */
+const isAction = (c) => c.kind === 'button' || (c.kind === 'group' && !!c.children?.length && c.children.every((k) => k.kind === 'button'));
+/**
+ * A row of a heading block and ONE action — a shelf's title and its "see all".
+ * `align: 'center'` is a caller asking for a centred band, and keeps the
+ * equal-share answer it asked for.
+ */
+export function isTitleBar(c) {
+    const kids = c.children ?? [];
+    if (c.kind !== 'group' || c.direction === 'column' || c.wrap || c.pack || c.align === 'center')
+        return false;
+    if (kids.length !== 2)
+        return false;
+    return holds(kids[0], 'heading') && !holds(kids[0], 'button') && isAction(kids[1]);
+}
 function one(c, t) {
     const n = shape(c, t);
     const x = c.extra;
@@ -510,6 +526,43 @@ function shape(c, t) {
                     })),
                 };
             }
+            // A TITLE BAR IS NOT TWO EQUAL COLUMNS. A heading with one action beside
+            // it ("Xem tất cả") went down the equal-share path below: each side got
+            // half the row, the action sat at the LEFT of its half — the middle of
+            // the band — and `flex-start` hung it from the heading's top edge. The
+            // shape wanted is the opposite on both axes: the heading takes what it
+            // needs, the action sits on the right edge, and both share a centre line.
+            // A phone stacks them and keeps them flush left.
+            if (kids.length === 2 && isTitleBar(c)) {
+                return {
+                    type: 'flex-block',
+                    style: {
+                        width: '100%',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        flexWrap: 'nowrap',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        gap: '24px',
+                    },
+                    responsive: { mobile: { style: { flexDirection: 'column', alignItems: 'flex-start', gap: '12px' } } },
+                    // `width: auto` on both, for the reason the packed row records:
+                    // `flex-block` seeds `width: 100%`, which would hand the heading the
+                    // whole line and push the action onto nothing.
+                    children: [
+                        {
+                            type: 'flex-block',
+                            style: { flex: '1 1 auto', width: 'auto', minWidth: '0', display: 'flex', flexDirection: 'column', gap: '8px' },
+                            children: [kids[0]],
+                        },
+                        {
+                            type: 'flex-block',
+                            style: { flex: '0 0 auto', width: 'auto', display: 'flex', flexDirection: 'column' },
+                            children: [kids[1]],
+                        },
+                    ],
+                };
+            }
             if (c.wrap) {
                 return {
                     type: 'flex-block',

package/dist/domains/site/readiness.js

@@ -553,7 +553,7 @@ export function readinessGaps(input) {
             gaps.push({
                 id: 'catalogue',
                 draft: false,
-                problem: `The store has ${input.products.inactive} products and none is active — a product ` +
+                problem: `The store has ${input.products.inactive} product${input.products.inactive === 1 ? '' : 's'} and none is active — a product ` +
                     'created without status is stored as "draft", which the storefront never lists and ' +
                     'the checkout refuses. Every product list renders its empty state.',
                 fix: 'PUT /api/v1/products/{id} with the whole object read back and status: "active" ' +

package/dist/tools/live.js

@@ -366,7 +366,7 @@ export function registerLiveTools(server, ctx, session) {
         // and judging its geometry produced thirteen false off-canvas findings
         // per page on a site whose pages were correct.
         const skip = offscreenNodes(doc);
-        const visual = node_id ? [] : measure(shots, skip);
+        const visual = node_id ? [] : measure(shots, skip, doc);
         const layout = compactFindings(visual);
         const layoutNotice = visual.length > 0 ? ctx.notices.once('measure', MEASURE_NOTICE) : undefined;
         // The legend rides with the first look only; the shape does not change after.

package/dist/vision/measure.js

@@ -1,4 +1,5 @@
 import { fill } from '../domains/site/findings.js';
+import { childrenOf, subtreeIds } from '../core/tree.js';
 /** Below this, body text is uncomfortable on a phone. */
 const MIN_BODY_PX = 12;
 /** A few pixels of overlap is a rounding artefact, not a defect. */
@@ -16,7 +17,7 @@ function overlaps(a, b) {
  * 1440 and spills at 390 is the ordinary responsive failure, and saying which
  * width it happened at is most of the fix.
  */
-export function measureShot(shot, skip = new Set()) {
+export function measureShot(shot, skip = new Set(), doc) {
     const out = [];
     const byId = new Map(shot.boxes.map((b) => [b.id, b]));
     const seen = new Set();
@@ -109,7 +110,88 @@ export function measureShot(shot, skip = new Set()) {
             });
         }
     }
-    void byId;
+    if (doc)
+        out.push(...titleBars(shot, doc, byId, skip));
+    return out;
+}
+function union(bs) {
+    if (!bs.length)
+        return null;
+    const x = Math.min(...bs.map((b) => b.x));
+    const y = Math.min(...bs.map((b) => b.y));
+    return { x, y, w: Math.max(...bs.map((b) => b.x + b.w)) - x, h: Math.max(...bs.map((b) => b.y + b.h)) - y };
+}
+/** Every value a node declares for one style key, at any width. */
+function declared(doc, id, key) {
+    const n = doc.nodes[id];
+    return [n?.style, ...Object.values(n?.responsive ?? {}).map((r) => r?.style)].map((s) => s?.[key]).filter((v) => v !== undefined);
+}
+/** Spacings that mean "not flush right" on purpose. */
+const SPREAD = new Set(['center', 'space-around', 'space-evenly']);
+/** Cross-axis answers that mean "not on the centre line" on purpose. */
+const LINED = new Set(['flex-end', 'end', 'baseline']);
+/** Containers an action may sit in, and nothing else. */
+const WRAPS = new Set(['flex-block']);
+const visible = (b) => !!b && b.w > 0 && b.h > 0;
+/**
+ * A HEADING WITH ONE ACTION BESIDE IT, judged where the eye judges it.
+ *
+ * The row that went wrong split itself in two equal halves: the action sat at
+ * the left of its half — mid-band — and the top-aligned row hung it from the
+ * heading's top edge. Neither shows in the tree as a defect, because every
+ * style on it is a legitimate value. Only side-by-side pairs are judged, so a
+ * stacked phone layout is not reported; the action side must be buttons and
+ * their wrappers ONLY (the mapper's `isTitleBar`), so a text column beside a
+ * card or a grid holding buttons is a different shape; and a row that DECLARES
+ * a centred spacing or cross-axis line is left to its own decision.
+ */
+function titleBars(shot, doc, byId, skip) {
+    const out = [];
+    const typeOf = (id) => doc.nodes[id]?.data.type ?? '';
+    for (const id of Object.keys(doc.nodes)) {
+        const kids = childrenOf(doc, id);
+        const row = byId.get(id);
+        if (kids.length !== 2 || !visible(row) || skip.has(id))
+            continue;
+        const trees = kids.map((k) => subtreeIds(doc, k));
+        const isAction = (t) => {
+            const n = t.filter((x) => typeOf(x) === 'button').length;
+            return n >= 1 && n <= 3 && t.every((x) => typeOf(x) === 'button' || WRAPS.has(typeOf(x)));
+        };
+        const isHead = (t) => t.some((x) => typeOf(x) === 'heading') && !t.some((x) => typeOf(x) === 'button');
+        const h = isHead(trees[0]) && isAction(trees[1]) ? 0 : isHead(trees[1]) && isAction(trees[0]) ? 1 : -1;
+        if (h === -1)
+            continue;
+        const btnIds = trees[1 - h].filter((x) => typeOf(x) === 'button');
+        const head = union(trees[h].filter((x) => !childrenOf(doc, x).length).map((x) => byId.get(x)).filter(visible));
+        const btn = union(btnIds.map((x) => byId.get(x)).filter(visible));
+        if (!head || !btn)
+            continue;
+        // Stacked (a phone), or the action leads: not this shape.
+        if (btn.x < head.x + head.w - SLOP || btn.y >= head.y + head.h || head.y >= btn.y + btn.h)
+            continue;
+        const centredText = [id, kids[h], ...trees[h].filter((x) => typeOf(x) === 'heading')].some((x) => declared(doc, x, 'textAlign').includes('center'));
+        const rightGap = row.x + row.w - (btn.x + btn.w);
+        if (!centredText && !declared(doc, id, 'justifyContent').some((v) => SPREAD.has(String(v))) && rightGap > Math.max(24, row.w * 0.15)) {
+            out.push({
+                code: 'title_bar_stranded',
+                nodeId: btnIds[0],
+                width: shot.width,
+                problem: `Sits ${Math.round(rightGap)}px short of the right edge of its ${row.w}px row, beside a heading — it reads as floating mid-band.`,
+                fix: fill('title_bar_stranded', { id, cell: kids[1 - h] }),
+            });
+        }
+        const dy = Math.abs(btn.y + btn.h / 2 - (head.y + head.h / 2));
+        if (!declared(doc, id, 'alignItems').some((v) => LINED.has(String(v))) && dy > Math.max(6, head.h * 0.2)) {
+            out.push({
+                code: 'title_bar_offcenter',
+                nodeId: btnIds[0],
+                width: shot.width,
+                problem: `Its centre is ${Math.round(dy)}px off the heading's at ${shot.width}px wide — the pair does not share a line.`,
+                fix: fill('title_bar_offcenter', { id }),
+            });
+        }
+    }
     return out;
 }
 function contains(outer, inner) {
@@ -125,10 +207,10 @@ function contains(outer, inner) {
  * widths it spills at is the useful part, so the widths are collected onto the
  * single finding rather than repeated as separate ones.
  */
-export function measure(shots, skip = new Set()) {
+export function measure(shots, skip = new Set(), doc) {
     const merged = new Map();
     for (const shot of shots) {
-        for (const f of measureShot(shot, skip)) {
+        for (const f of measureShot(shot, skip, doc)) {
             const key = `${f.code}|${f.nodeId}`;
             const existing = merged.get(key);
             if (existing)

package/package.json

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