sbuilder-mcp 0.63.2 → 0.64.0

package/CHANGELOG.md

@@ -6,6 +6,20 @@ 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.64.0] - 2026-09-24
+
+### Added
+- `sb_templates` / `sb_template_use` gained four built-in layout patterns — testimonials, numbered steps, image-and-text, and a pricing table — alongside the existing hero, feature, stats, CTA, gallery, and FAQ bands.
+- `sb_add`'s node specs (and the import mapper's captured nodes) now accept `states`, so a caller can seed an interaction state such as hover directly on a new node instead of writing it in a second call.
+
+### Changed
+- The built-in layout patterns are no longer flat: feature, testimonial, and pricing rows now render as cards on accent-tinted bands, the CTA band is an accent panel, headings carry eyebrow labels, and heroes gained a second (ghost) button and a narrower text measure.
+- The built-in layout patterns now animate: first-screen text enters on load line by line, lower bands reveal on scroll staggered by position, cards lift on hover, and buttons get a matching hover treatment through their own `config.stateHover` slot.
+- The built-in layout patterns now wear the target page's own accent and heading colors when composed onto an existing page, falling back to the site's theme only when the page has none of its own.
+
+### Fixed
+- A page built or extended by this server on a site that had never saved a theme now gets the starter theme saved to the platform on the first write, so the published page's buttons and headings actually match what the editor's canvas showed instead of publishing unstyled (`var(--wb-color-primary)` referencing nothing declared).
+
 ## [0.63.2] - 2026-09-24
 
 ### Fixed

package/CHANGELOG.vi.md

@@ -6,6 +6,20 @@ 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.64.0] - 2026-09-24
+
+### Added
+- `sb_templates` / `sb_template_use` có thêm bốn layout dựng sẵn — cảm nhận khách hàng, các bước đánh số, ảnh kèm nội dung, và bảng giá — bên cạnh các band hero, lợi ích, số liệu, kêu gọi hành động, thư viện ảnh và FAQ đã có.
+- Node spec của `sb_add` (và node được capture bởi bộ mapper nhập trang) giờ nhận `states`, để có thể gieo sẵn một trạng thái tương tác như hover ngay trên node mới thay vì phải gọi thêm một lần nữa.
+
+### Changed
+- Các layout dựng sẵn không còn phẳng: các hàng lợi ích, cảm nhận khách hàng và bảng giá giờ render thành thẻ (card) trên nền có tông màu nhấn nhạt, band CTA trở thành một khối màu nhấn, tiêu đề có nhãn nhỏ phía trên, và hero có thêm nút thứ hai (dạng viền) cùng bề rộng chữ hẹp hơn.
+- Các layout dựng sẵn giờ có chuyển động: chữ ở màn hình đầu hiện dần khi tải trang theo từng dòng, các band phía dưới hiện dần khi cuộn tới theo thứ tự vị trí, thẻ nổi lên khi rê chuột, và nút bấm có hiệu ứng hover riêng qua đúng nơi nó thuộc về — `config.stateHover`.
+- Các layout dựng sẵn giờ mang màu nhấn và màu tiêu đề của chính trang đích khi được ghép vào một trang đã có nội dung, chỉ dùng lại theme của site khi trang đó chưa có gì.
+
+### Fixed
+- Một trang được server này tạo hoặc chỉnh sửa trên site chưa từng lưu theme giờ sẽ được lưu theme khởi đầu (starter theme) lên nền tảng ngay ở lần ghi đầu tiên, để trang đã publish có nút và tiêu đề đúng như những gì canvas của editor hiển thị, thay vì publish ra trang không có style (`var(--wb-color-primary)` trỏ tới một biến chưa được khai báo ở đâu cả).
+
 ## [0.63.2] - 2026-09-24
 
 ### Fixed

package/dist/domains/site/builder.js

@@ -98,6 +98,7 @@ export function addSubtree(doc, parentId, spec, index, guard) {
             config: s.config,
             specials: s.specials,
             responsive: s.responsive,
+            states: s.states,
         });
         // Before the owner is handed to a patch: minting rewrites its `config`.
         const sats = mintSatellites(n);

package/dist/domains/site/importmap.js

@@ -178,6 +178,18 @@ function textScale(slug, fallback) {
     return { style, config: { textGlobalStyle: slug } };
 }
 function one(c, t) {
+    const n = shape(c, t);
+    const x = c.extra;
+    if (!n || !x)
+        return n;
+    return {
+        ...n,
+        ...(x.style ? { style: { ...n.style, ...x.style } } : {}),
+        ...(x.config ? { config: { ...n.config, ...x.config } } : {}),
+        ...(x.states ? { states: { ...n.states, ...x.states } } : {}),
+    };
+}
+function shape(c, t) {
     switch (c.kind) {
         case 'heading': {
             const text = c.text?.trim();

package/dist/domains/site/node.js

@@ -78,7 +78,7 @@ export function createNode(type, opts = {}) {
             'guessing a type produces a node nothing can render.');
     }
     const d = meta.defaults;
-    const states = d.states;
+    const states = opts.states ? { ...copy(d.states ?? {}), ...copy(opts.states) } : d.states;
     const config = { ...copy(d.config ?? {}), ...(opts.config ?? {}) };
     return {
         id: genId(type),

package/dist/domains/site/patterns.js

@@ -57,24 +57,46 @@ export const THEME_TOKENS = {
     // commits to for a page that cannot answer for itself.
     sectionMaxWidth: '1200px',
 };
+const ACCENT = 'var(--wb-color-primary)';
+const HEADING = 'var(--wb-color-heading)';
+/**
+ * THE ACCENT AND THE INK ARE THE PAGE'S, not the theme's, when the page has its
+ * own. The helpers below write the theme variables because that is the answer
+ * on a blank page; on a page whose tokens were read off its content, a band in
+ * the theme's accent reads as a different website (rule 0). One substitution
+ * here covers every helper rather than threading `t` through each of them.
+ */
+function wear(spec, t) {
+    let json = JSON.stringify(spec);
+    const swap = (from, to) => {
+        if (to && to !== from)
+            json = json.split(from).join(JSON.stringify(to).slice(1, -1));
+    };
+    swap(ACCENT, t.buttonBg);
+    swap(HEADING, t.headingColor);
+    return JSON.parse(json);
+}
 /** One section, through the same mapper an import goes through. */
-function section(children, t, style, innerStyle) {
+function section(children, t, style, innerStyle, mobile) {
     const [spec] = toSpecs([{ kind: 'section', children }], t);
     if (!spec)
         return null;
-    const outer = style ? { ...spec, style: { ...spec.style, ...style } } : spec;
+    const styled = style ? { ...spec, style: { ...spec.style, ...style } } : spec;
+    const outer = mobile
+        ? { ...styled, responsive: { ...styled.responsive, mobile: { ...styled.responsive?.mobile, style: { ...styled.responsive?.mobile?.style, ...mobile } } } }
+        : styled;
     if (!innerStyle)
-        return outer;
+        return wear(outer, t);
     // THE SECTION CENTRES ITS BLOCK; THE BLOCK CENTRES ITS CHILDREN. `textAlign`
     // moves the words and leaves a `width: fit-content` button where it was, so a
     // centred band came out with its call to action against the left margin.
     const [inner, ...rest] = outer.children ?? [];
     if (!inner)
-        return outer;
-    return {
+        return wear(outer, t);
+    return wear({
         ...outer,
         children: [{ ...inner, style: { ...inner.style, ...innerStyle } }, ...rest],
-    };
+    }, t);
 }
 const row = (children, wrap = false, align) => ({
     kind: 'group',
@@ -94,7 +116,100 @@ const p = (text, textAlign) => ({
     text,
     ...(textAlign ? { textAlign } : {}),
 });
-const cta = (text, href = '#') => ({ kind: 'button', variant: 'cta', text, href });
+/** Lay extras over a capture, merging each namespace rather than replacing it. */
+function dress(c, ...xs) {
+    const out = { ...c.extra };
+    for (const x of xs) {
+        if (x.style)
+            out.style = { ...out.style, ...x.style };
+        if (x.config)
+            out.config = { ...out.config, ...x.config };
+        if (x.states)
+            out.states = { ...out.states, ...x.states };
+    }
+    return { ...c, extra: out };
+}
+// SCHEME ROLES, with the light scheme's own values as fallbacks. `--wb-sc-*` is
+// what the theme swaps for dark mode, so a card drawn from these follows it.
+const BORDER = 'var(--wb-sc-border, #e5e7eb)';
+const SHADOW = 'var(--wb-sc-shadow, rgba(17,24,39,0.08))';
+const SURFACE = 'var(--wb-sc-background, #ffffff)';
+/** A band set apart from its neighbours: the page's background, tinted by its accent. */
+const TINT = { backgroundColor: `color-mix(in srgb, ${ACCENT} 5%, ${SURFACE})` };
+/**
+ * REVEAL ON SCROLL, staggered by position.
+ *
+ * `trigger: "view"` ties the animation to the scroll timeline, where a time
+ * delay means nothing, so the stagger is carried by `range` (how far into the
+ * viewport the entrance completes): the first column lands first. `delay` is
+ * kept for browsers without scroll timelines, which play it at first paint.
+ * Reduced motion is honoured by the renderer, not here.
+ */
+const reveal = (i = 0, type = 'fade_in_up') => ({
+    config: {
+        animation: { active: true, type, intensity: 'soft', trigger: 'view', range: 40 + i * 15, delay: Number((i * 0.1).toFixed(2)) },
+    },
+});
+/** The first screen: nothing to scroll to, so it plays at load, one line after another. */
+const enter = (i = 0, type = 'fade_in_up') => ({
+    config: { animation: { active: true, type, intensity: 'soft', delay: Number((i * 0.12).toFixed(2)) } },
+});
+/**
+ * A button that answers the pointer. A button's hover lives in the flat,
+ * base-only `config.stateHover` (see `hover.ts`); `states.hover` paints nothing
+ * on one. `translate`, not `transform`: an entrance animation fills `transform`
+ * and would outrank a hover written there.
+ */
+const cta = (text, href = '#') => dress({ kind: 'button', variant: 'cta', text, href }, {
+    style: { transition: 'translate 0.2s ease, box-shadow 0.2s ease' },
+    config: { stateHover: { translate: '0 -2px', boxShadow: `0 10px 24px ${SHADOW}` } },
+});
+/** The second choice beside a call to action: same shape, no fill. */
+const ghost = (text, href = '#') => dress(cta(text, href), {
+    style: { backgroundColor: 'transparent', color: HEADING, border: `1px solid ${BORDER}` },
+});
+/** Two buttons side by side, packed rather than spread across the row. */
+const actions = (kids, centred = false) => ({
+    kind: 'group',
+    direction: 'row',
+    pack: true,
+    ...(centred ? { align: 'center' } : {}),
+    children: kids,
+});
+/** The small label above a heading that says what the band is. */
+const eyebrow = (text, textAlign) => dress(p(text, textAlign), {
+    style: {
+        fontSize: 'var(--wb-ts-text-2-size)',
+        fontWeight: '600',
+        letterSpacing: '0.12em',
+        textTransform: 'uppercase',
+        lineHeight: '1.4',
+        color: ACCENT,
+    },
+});
+const muted = (text, textAlign) => dress(p(text, textAlign), { style: { color: 'var(--wb-color-muted)' } });
+/**
+ * A CARD: a surface, a hairline, a radius, and a lift under the pointer. It
+ * fills its cell (`flex`), so a row of cards shares one height when the row
+ * stretches.
+ */
+const card = (children, i, highlight = false) => dress({ kind: 'group', direction: 'column', children }, {
+    style: {
+        flex: '1 1 auto',
+        padding: '28px',
+        borderRadius: '16px',
+        backgroundColor: SURFACE,
+        border: highlight ? `2px solid ${ACCENT}` : `1px solid ${BORDER}`,
+        ...(highlight ? { boxShadow: `0 16px 40px ${SHADOW}` } : {}),
+    },
+    states: { hover: { style: { translate: '0 -4px', boxShadow: `0 16px 40px ${SHADOW}` } } },
+}, reveal(i));
+/** The heading block every band opens with: label, title, and one line. */
+const intro = (label, title, line, textAlign) => [
+    eyebrow(label, textAlign),
+    h(title, 2, textAlign),
+    ...(line ? [muted(line, textAlign)] : []),
+];
 /**
  * The picture slot: a real image when the site has one, and WORDS when it does
  * not.
@@ -179,7 +294,7 @@ export const LAYOUT_PATTERNS = [
     {
         id: 'sb_hero_split',
         name: 'Hero — hai cột',
-        use: 'Mở đầu trang: tiêu đề, một câu, nút hành động bên trái; chỗ cho ảnh bên phải',
+        use: 'Mở đầu trang: nhãn, tiêu đề, một câu, hai nút bên trái; ảnh bo góc bên phải — hiện dần khi tải trang',
         images: 1,
         build: (t, pool) => {
             const used = new Set();
@@ -189,61 +304,87 @@ export const LAYOUT_PATTERNS = [
                 // 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')] },
                     {
                         kind: 'group',
                         direction: 'column',
                         children: [
-                            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.'),
+                            dress(eyebrow('Bộ sưu tập mới'), enter(0)),
+                            dress(h('Tiêu đề chính', 1), enter(1)),
+                            dress(p('Một câu nói rõ bạn bán gì và cho ai.'), enter(2)),
+                            dress(actions([cta('Mua ngay'), ghost('Tìm hiểu thêm')]), enter(3)),
+                        ],
+                    },
+                    {
+                        kind: 'group',
+                        direction: 'column',
+                        children: [
+                            dress(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.'), { style: { borderRadius: '20px', overflow: 'hidden' } }, enter(2, 'fade_in')),
                         ],
                     },
                 ], false, 'center'),
-            ], t);
+            ], t, { padding: '96px 24px' }, undefined, { padding: '56px 20px' });
         },
     },
     {
         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',
+        use: 'Mở đầu trang khi chưa có ảnh: nhãn, tiêu đề lớn, một câu, hai nút — canh giữa, hiện dần khi tải trang',
         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' }),
+        [
+            dress(eyebrow('Chào mừng', 'center'), enter(0)),
+            dress(h('Tiêu đề chính', 1, 'center'), enter(1)),
+            dress(p('Một câu nói rõ bạn bán gì và cho ai.', 'center'), enter(2)),
+            dress(actions([cta('Mua ngay'), ghost('Tìm hiểu thêm')], true), enter(3)),
+        ], t, { alignItems: 'center', textAlign: 'center', padding: '112px 24px' }, 
+        // A NARROWER MEASURE than the 1200px band: a centred headline over a
+        // full-width line reads as a banner, not a sentence.
+        { alignItems: 'center', maxWidth: '760px' }, { padding: '64px 20px' }),
     },
     {
         id: 'sb_feature_trio',
         name: 'Ba lợi ích',
-        use: 'Ba cột ngang nhau: mỗi cột một tiêu đề nhỏ và một đoạn — lý do nên mua',
+        use: 'Nền nhạt, ba thẻ ngang nhau: icon, tiêu đề nhỏ, một đoạn — lý do nên mua; thẻ nổi lên khi rê chuột',
         build: (t) => section([
-            h('Vì sao chọn chúng tôi'),
+            ...intro('Lợi ích', 'Vì sao chọn chúng tôi', 'Ba điều khách hàng nhắc đến nhiều nhất.'),
             row([
-                { kind: 'group', direction: 'column', children: [h('Lợi ích một', 3), p('Một hoặc hai câu.')] },
-                { kind: 'group', direction: 'column', children: [h('Lợi ích hai', 3), p('Một hoặc hai câu.')] },
-                { kind: 'group', direction: 'column', children: [h('Lợi ích ba', 3), p('Một hoặc hai câu.')] },
-            ]),
-        ], t),
+                card([icon('SparklingLine'), h('Lợi ích một', 3), p('Một hoặc hai câu.')], 0),
+                card([icon('LeafLine'), h('Lợi ích hai', 3), p('Một hoặc hai câu.')], 1),
+                card([icon('CustomerService2Line'), h('Lợi ích ba', 3), p('Một hoặc hai câu.')], 2),
+            ], false, 'stretch'),
+        ], t, TINT),
     },
     {
         id: 'sb_stats_row',
         name: 'Dải số liệu',
-        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',
+        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; hiện lần lượt khi cuộn tới',
         build: (t) => section([
             row([
-                { 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')] },
+                dress({ kind: 'group', direction: 'column', children: [h('1.000+', 2, 'center'), muted('Khách hàng', 'center')] }, reveal(0)),
+                dress({ kind: 'group', direction: 'column', children: [h('4,9/5', 2, 'center'), muted('Đánh giá trung bình', 'center')] }, reveal(1)),
+                dress({ kind: 'group', direction: 'column', children: [h('24h', 2, 'center'), muted('Giao trong nội thành', 'center')] }, reveal(2)),
             ]),
         ], t, { alignItems: 'center', textAlign: 'center' }, { alignItems: 'center' }),
     },
     {
         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',
+        use: 'Khối màu chủ đạo bo góc: một câu, một nút đảo màu — đặt cuối trang hoặc giữa hai band nội dung',
         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' }),
+        [
+            // ON THE ACCENT, the ink is the page's button text — or, on a page
+            // that has none, its background, which is the inversion that reads.
+            dress(h('Sẵn sàng bắt đầu?', 2, 'center'), { style: { color: t.buttonColor ?? SURFACE } }, reveal(0)),
+            dress(p('Một câu nhắc lại lời hứa chính.', 'center'), { style: { color: t.buttonColor ?? SURFACE, opacity: '0.85' } }, reveal(1)),
+            dress(cta('Mua ngay'), { style: { backgroundColor: t.buttonColor ?? SURFACE, color: ACCENT } }, reveal(2)),
+        ], t, { alignItems: 'center', textAlign: 'center' }, 
+        // THE PANEL IS THE INNER BLOCK, so the band keeps the page's gutters and
+        // the colour sits inside the same 1200px measure as everything else.
+        { alignItems: 'center', backgroundColor: ACCENT, borderRadius: '24px', padding: '56px 32px' }),
     },
     {
         id: 'sb_gallery',
@@ -281,7 +422,7 @@ export const LAYOUT_PATTERNS = [
                 .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 } : {}) });
+                shots.push(dress({ kind: 'image', src: m.url, alt: m.name ?? 'Ảnh', ...(frame ? { ratio: frame } : {}) }, { style: { borderRadius: '12px', overflow: 'hidden' } }, reveal(shots.length % 3, 'zoom_in')));
             }
             if (shots.length === 0) {
                 return section([
@@ -297,8 +438,9 @@ export const LAYOUT_PATTERNS = [
         name: 'Câu hỏi thường gặp',
         use: 'Ba câu hỏi mở/đóng — nơi trả lời những gì cản trở việc mua',
         build: (t) => section([
-            h('Câu hỏi thường gặp'),
+            ...intro('Hỗ trợ', 'Câu hỏi thường gặp'),
             {
+                extra: reveal(0),
                 kind: 'accordion',
                 children: [
                     { kind: 'accordion-item', text: 'Giao hàng mất bao lâu?', children: [p('Trả lời ngắn gọn.')] },
@@ -366,21 +508,25 @@ export const LAYOUT_PATTERNS = [
             h('Cam kết của chúng tôi'),
             row([
                 {
+                    extra: reveal(0),
                     kind: 'group',
                     direction: 'column',
                     children: [icon('TruckLine'), h('Giao hàng nhanh', 3), p('Giao toàn quốc trong 24-48h.')],
                 },
                 {
+                    extra: reveal(1),
                     kind: 'group',
                     direction: 'column',
                     children: [icon('ShieldCheckLine'), h('Bảo hành chính hãng', 3), p('Đổi mới trong 7 ngày nếu lỗi.')],
                 },
                 {
+                    extra: reveal(2),
                     kind: 'group',
                     direction: 'column',
                     children: [icon('RefreshLine'), h('Đổi trả dễ dàng', 3), p('30 ngày đổi ý, hoàn tiền nhanh.')],
                 },
                 {
+                    extra: reveal(3),
                     kind: 'group',
                     direction: 'column',
                     children: [icon('BankCardLine'), h('Thanh toán an toàn', 3), p('Hỗ trợ nhiều hình thức thanh toán.')],
@@ -388,5 +534,102 @@ export const LAYOUT_PATTERNS = [
             ]),
         ], t),
     },
+    // ---------------------------------------------------------------------
+    // THE BANDS A LANDING PAGE REACHES FOR AFTER THE FIRST SCREEN: social proof,
+    // a process, a picture beside a claim, and a choice between offers.
+    // ---------------------------------------------------------------------
+    {
+        id: 'sb_testimonials',
+        name: 'Cảm nhận khách hàng',
+        use: 'Nền nhạt, ba thẻ trích dẫn: năm sao, lời khách, tên và nơi ở — bằng chứng xã hội',
+        build: (t) => section([
+            ...intro('Khách hàng nói gì', 'Được hàng nghìn người tin chọn', undefined, 'center'),
+            row([
+                ['Nguyễn Minh Anh', 'Hà Nội'],
+                ['Trần Quốc Bảo', 'TP. Hồ Chí Minh'],
+                ['Lê Thu Hà', 'Đà Nẵng'],
+            ].map(([name, place], i) => card([
+                dress(p('★★★★★'), { style: { color: ACCENT, letterSpacing: '0.1em' } }),
+                dress(p('“Một hoặc hai câu khách hàng thật sự đã nói — cụ thể hơn một lời khen.”'), {
+                    style: { fontSize: 'var(--wb-ts-heading-5-size)', color: HEADING },
+                }),
+                h(name, 4),
+                muted(`Khách hàng tại ${place}`),
+            ], i)), false, 'stretch'),
+        ], t, TINT, { alignItems: 'center' }),
+    },
+    {
+        id: 'sb_steps',
+        name: 'Các bước',
+        use: 'Ba bước đánh số 01-02-03, mỗi bước một tiêu đề nhỏ và một câu — quy trình đặt hàng, sử dụng, bảo hành',
+        build: (t) => section([
+            ...intro('Cách hoạt động', 'Ba bước đơn giản'),
+            row([
+                ['01', 'Chọn sản phẩm', 'Một câu nói bước này làm gì.'],
+                ['02', 'Đặt hàng', 'Một câu nói bước này làm gì.'],
+                ['03', 'Nhận hàng', 'Một câu nói bước này làm gì.'],
+            ].map(([n, title, line], i) => dress({
+                kind: 'group',
+                direction: 'column',
+                children: [
+                    dress(p(n), {
+                        style: { fontSize: 'var(--wb-ts-heading-2-size)', fontWeight: '700', lineHeight: '1', color: ACCENT },
+                    }),
+                    h(title, 3),
+                    p(line),
+                ],
+            }, { style: { borderTop: `2px solid ${ACCENT}`, paddingTop: '20px' } }, reveal(i)))),
+        ], t),
+    },
+    {
+        id: 'sb_image_text',
+        name: 'Ảnh và nội dung',
+        use: 'Ảnh bên trái, bên phải là nhãn, tiêu đề, một đoạn, ba ý có dấu và một link — đặt xen kẽ với hero hai cột',
+        images: 1,
+        build: (t, pool) => {
+            const used = new Set();
+            return section([
+                row([
+                    dress({
+                        kind: 'group',
+                        direction: 'column',
+                        children: [
+                            img(pick(pool, used, 'landscape'), 'Ảnh minh hoạ', '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.'),
+                        ],
+                    }, { style: { borderRadius: '20px', overflow: 'hidden' } }, reveal(0, 'fade_in_left')),
+                    dress({
+                        kind: 'group',
+                        direction: 'column',
+                        children: [
+                            ...intro('Câu chuyện', 'Một điều làm bạn khác biệt'),
+                            p('Hai hoặc ba câu kể cụ thể: nguyên liệu, cách làm, người làm.'),
+                            { kind: 'list', items: ['Ý thứ nhất', 'Ý thứ hai', 'Ý thứ ba'] },
+                            linkTo('Tìm hiểu thêm →'),
+                        ],
+                    }, reveal(1, 'fade_in_right')),
+                ], false, 'center'),
+            ], t);
+        },
+    },
+    {
+        id: 'sb_pricing',
+        name: 'Bảng giá',
+        use: 'Ba thẻ gói: tên, giá, một câu, danh sách quyền lợi, nút — thẻ giữa được làm nổi bật',
+        build: (t) => section([
+            ...intro('Bảng giá', 'Chọn gói phù hợp', 'Đổi gói bất cứ lúc nào.', 'center'),
+            row([
+                ['Cơ bản', '99.000đ', false],
+                ['Tiêu chuẩn', '199.000đ', true],
+                ['Cao cấp', '399.000đ', false],
+            ].map(([name, price, best], i) => card([
+                ...(best ? [eyebrow('Phổ biến nhất')] : []),
+                h(String(name), 3),
+                h(String(price), 2),
+                muted('Một câu cho biết gói này dành cho ai.'),
+                { kind: 'list', items: ['Quyền lợi thứ nhất', 'Quyền lợi thứ hai', 'Quyền lợi thứ ba'] },
+                best ? cta('Chọn gói') : ghost('Chọn gói'),
+            ], i, Boolean(best))), false, 'stretch'),
+        ], t, undefined, { alignItems: 'center' }),
+    },
 ];
 export const PATTERN_BY_ID = new Map(LAYOUT_PATTERNS.map((p2) => [p2.id, p2]));

package/dist/tools/page.js

@@ -15,6 +15,7 @@ import { PAGE_TYPES } from '../catalog/storepages.generated.js';
 import { animationNote, deadKeyNote, unknownValueNote, unknownWriteNote, preconditionNotes, unsupportedSettingNote, } from '../domains/site/vocabulary.js';
 import { skinLevelNote } from '../domains/site/fieldskin.js';
 import { siteTheme } from '../domains/site/theme-fetch.js';
+import { ensureSiteTheme } from './theme.js';
 import { request, redact } from '../transport/http.js';
 import { siteToken } from './credentialpick.js';
 import { validateForSave } from '../domains/site/validate.js';
@@ -475,6 +476,7 @@ export class PageSession {
         // "is the document now different from what the server holds", and the
         // re-stamp wrote the server's own answer back into it.
         this.savedRev = d.rev;
+        await ensureSiteTheme(this.ctx, this.siteId);
     }
 }
 const specSchema = z.lazy(() => z.object({
@@ -1563,6 +1565,7 @@ export function registerPageTools(server, ctx) {
                         body: { document, schemaVersion: document.schema_version },
                         fetchImpl: ctx.fetchImpl,
                     });
+                    await ensureSiteTheme(ctx, site_id);
                     seeded = layout
                         ? { layout, nodes: Object.keys(document.nodes).length }
                         : { type, nodes: Object.keys(document.nodes).length };

package/dist/tools/theme.js

@@ -31,6 +31,44 @@ export async function readTheme(ctx, siteId) {
         return { theme: got.theme, origin: 'site' };
     return { theme: structuredClone(STARTER_THEME), origin: 'starter' };
 }
+/**
+ * SAVE THE STARTER THEME FOR A SITE THAT HAS NONE, once per site per process.
+ *
+ * A new site stores no theme. The editor paints against `DEFAULT_THEME` anyway,
+ * and it saves that theme the first time a node references a token. Publish
+ * compiles only the STORED theme, so a page this server builds on a fresh site
+ * references `var(--wb-color-primary)` and the `-default` preset classes with
+ * nothing declaring them. The result: buttons with white text on no fill, and
+ * headings at body size. The canvas looks right and the published page does not.
+ * Measured on a fresh local site, 2026-09-24.
+ *
+ * This does the save the editor would have done. It never replaces a stored
+ * theme (`readTheme` answers 'site' for one), and it never fails the page
+ * write it rides on. A failed attempt is simply retried on the next save.
+ */
+const themeSeeded = new Set();
+export async function ensureSiteTheme(ctx, siteId) {
+    if (themeSeeded.has(siteId))
+        return;
+    try {
+        const { theme, origin } = await readTheme(ctx, siteId);
+        if (origin === 'starter') {
+            await request({
+                base: ctx.base,
+                method: 'PUT',
+                path: `/api/sites/${encodeURIComponent(siteId)}/theme`,
+                token: siteToken(ctx),
+                body: { theme },
+                fetchImpl: ctx.fetchImpl,
+            });
+            clearThemeCache();
+        }
+        themeSeeded.add(siteId);
+    }
+    catch {
+        // The page write already succeeded; the next save retries.
+    }
+}
 export function registerThemeTools(server, ctx) {
     server.registerTool('sb_theme', {
         description: "The site's palette and type scale — the layer every element's style preset resolves " +

package/package.json

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