@ecomcx/ecomweb-content 1.14.0 → 1.15.0

package/README.md

@@ -74,6 +74,27 @@ Mọi khối có thể mang `attrs.blockStyle` (tên biến thể → class `ecx
 
 `theme.json › styles` (`colors`, `fontSizes`, `spacing`, `fonts`) + bản sửa của quản trị viên → `mergePresets(theme, user)` → `presetCss()` sinh `:root{--ecx-color-*;--ecx-font-size-*;--ecx-spacing-*;--ecx-font-family-*}`. Giá trị được kiểm: màu hex/rgb/hsl, độ dài hoặc `clamp()`, danh sách phông không có `; { }`.
 
+## Bố cục, hiệu ứng, Global Styles (1.15)
+
+Thêm vào `attrs.style`:
+
+```json
+{
+  "layout": { "type": "flex", "direction": { "base": "row", "mobile": "column" }, "justify": "between", "align": "center", "wrap": true },
+  "layout": { "type": "grid", "columns": { "base": 3, "tablet": 2, "mobile": 1 }, "minColumnWidth": "14rem" },
+  "gradient": "linear-gradient(135deg, #1a597b 0%, #f26251 100%)",
+  "shadow": "md", "aspectRatio": "16/9", "position": { "type": "sticky", "top": "md" },
+  "hover": { "color": { "text": "#fff", "background": "primary" }, "border": { "color": "accent" }, "shadow": "lg", "lift": true }
+}
+```
+
+- `layout`: `flex` (hàng ngang / xếp dọc — `direction`, `justify` start|center|end|between, `align` start|center|end|stretch, `wrap`) hoặc `grid` (`columns` 1–12 theo khổ, không có thì tự chia cột theo `minColumnWidth`). Không đặt `gap` thì dùng `--ecx-block-gap` (mặc định 1rem).
+- `gradient`: preset (`brand` → `var(--ecx-gradient-brand)`) hoặc `linear-gradient` / `radial-gradient` với 2–6 điểm màu hex/rgb/hsl (kèm %) — mọi phần được kiểm, không chèn được CSS.
+- `shadow`: preset (`sm` `md` `lg` `xl` có sẵn giá trị dự phòng, theme ghi đè) hoặc `none`. `aspectRatio`: `1/1` `4/3` `3/2` `16/9` `21/9` `3/4` `2/3` `9/16`.
+- `hover` → `:hover` kèm chuyển động. `ruleCss(selector, style)` sinh CSS cho bộ chọn bất kỳ (website, trình soạn, Global Styles).
+
+Preset có thêm `gradients`, `shadows` (tối đa 3 lớp bóng đã kiểm) và **Global Styles**: `blocks` (kiểu mặc định theo loại khối — `BLOCK_SELECTORS`) và `elements` (`link`, `button`, `heading`, `h1`–`h6`, `caption` — `ELEMENT_SELECTORS`). `presetCss` sinh luật trong `:where(.ecx-content)` (độ ưu tiên thấp: kiểu riêng của từng khối luôn thắng). Máy chủ chạy cùng quy tắc (`StyleFormat.cs`, fixture `style-layout-effects`).
+
 ## Nhúng theo đường dẫn — `embedInfo`
 
 Khối `embed` chỉ lưu `url` (+ `caption`). `embedInfo(url)` nhận ra nhà cung cấp trong danh sách (YouTube, Vimeo, Loom, Spotify, SoundCloud, TikTok, X, Instagram, Facebook video, CodePen, Figma, Google Maps dạng embed) và **tự dựng** địa chỉ khung từ mã trong đường dẫn — không dùng HTML nhúng do người dùng dán, nên bài viết không chèn được khung tới trang tuỳ ý. Không nhận ra → `null`, website hiện liên kết thường. Trình soạn (xem trước) và website dùng chung hàm này.

package/dist/bindings.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Gắn dữ liệu (1.15): `attrs.bindings` — thuộc tính của khối lấy giá trị từ một nguồn lúc hiển thị (tiêu đề bài, trường meta,
+ * thuộc tính sản phẩm của plugin…) thay vì chữ gõ tay: `{ content: { source: "core/post", args: { field: "title" } } }`.
+ * Khoá khối: `attrs.lock` `{ move, remove }`, `attrs.templateLock` của khối chứa. Máy chủ chạy cùng quy tắc (ContentFormat.cs).
+ */
+export interface Binding {
+    /** Tên nguồn "nhóm/tên" (core/post, core/post-meta, core/site, tên-plugin/nguồn). */
+    source: string;
+    args?: Record<string, string | number | boolean>;
+}
+/** Chuẩn hoá `attrs.bindings`: tối đa 10 thuộc tính, nguồn đúng dạng, tham số là chữ (≤ 200 ký tự) / số / đúng-sai. */
+export declare function normalizeBindings(v: unknown): Record<string, Binding> | undefined;
+/** `attrs.lock`: chỉ giữ cờ bật. */
+export declare function normalizeLock(v: unknown): {
+    move?: true;
+    remove?: true;
+} | undefined;
+/** `attrs.templateLock` của khối chứa: all | insert | contentOnly | none (khối con thoát khoá của khối ngoài). */
+export declare function normalizeTemplateLock(v: unknown): "all" | "insert" | "contentOnly" | "none" | undefined;

package/dist/bindings.js

@@ -0,0 +1,44 @@
+const SOURCE = /^[a-z0-9-]{1,40}\/[a-z0-9-]{1,40}$/;
+const KEY = /^[a-zA-Z][a-zA-Z0-9]{0,29}$/;
+const ARG_KEY = /^[a-zA-Z][\w-]{0,39}$/;
+const isObj = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+/** Chuẩn hoá `attrs.bindings`: tối đa 10 thuộc tính, nguồn đúng dạng, tham số là chữ (≤ 200 ký tự) / số / đúng-sai. */
+export function normalizeBindings(v) {
+    if (!isObj(v))
+        return undefined;
+    const out = {};
+    for (const [k, b] of Object.entries(v)) {
+        if (Object.keys(out).length >= 10)
+            break;
+        if (!KEY.test(k) || !isObj(b) || typeof b.source !== "string" || !SOURCE.test(b.source))
+            continue;
+        const args = {};
+        if (isObj(b.args)) {
+            for (const [ak, av] of Object.entries(b.args)) {
+                if (Object.keys(args).length >= 10)
+                    break;
+                if (!ARG_KEY.test(ak))
+                    continue;
+                if ((typeof av === "string" && av.length <= 200) || (typeof av === "number" && Number.isFinite(av)) || typeof av === "boolean")
+                    args[ak] = av;
+            }
+        }
+        out[k] = Object.keys(args).length ? { source: b.source, args } : { source: b.source };
+    }
+    return Object.keys(out).length ? out : undefined;
+}
+/** `attrs.lock`: chỉ giữ cờ bật. */
+export function normalizeLock(v) {
+    if (!isObj(v))
+        return undefined;
+    const out = {};
+    if (v.move === true)
+        out.move = true;
+    if (v.remove === true)
+        out.remove = true;
+    return Object.keys(out).length ? out : undefined;
+}
+/** `attrs.templateLock` của khối chứa: all | insert | contentOnly | none (khối con thoát khoá của khối ngoài). */
+export function normalizeTemplateLock(v) {
+    return v === "all" || v === "insert" || v === "contentOnly" || v === "none" ? v : undefined;
+}

package/dist/index.d.ts

@@ -6,5 +6,6 @@ export { contentText, nodeText, visitNodes, wordCount } from "./text.js";
 export { isSafeUrl, safeUrl } from "./url.js";
 export { BLOCK_VERSION_ATTR, blockDefaults, blockNodeSpec, defineBlock, migrateBlockAttrs, type AttrControl, type BlockAttrSpec, type BlockContent, type BlockDefinition, type BlockDefinitionInput } from "./block.js";
 export { EMBED_PROVIDERS, embedInfo, type EmbedInfo } from "./embed.js";
-export { BREAKPOINTS, DEVICES, collectStyles, colorCss, normalizeStyle, spacingValue, styleClass, styleCss, type BlockStyle, type Box, type Device, type Responsive } from "./style.js";
-export { CORE_BLOCK_STYLES, mergePresets, normalizeAnchor, normalizeBlockStyleName, normalizeClassName, normalizePresets, presetCss, type StylePresets } from "./style.js";
+export { BREAKPOINTS, DEVICES, collectStyles, colorCss, normalizeGradient, normalizeStyle, ruleCss, spacingValue, styleClass, styleCss, type BlockLayout, type BlockStyle, type Box, type Device, type Responsive } from "./style.js";
+export { BLOCK_SELECTORS, CORE_BLOCK_STYLES, ELEMENT_SELECTORS, mergePresets, normalizeAnchor, normalizeBlockStyleName, normalizeClassName, normalizePresets, presetCss, type StylePresets } from "./style.js";
+export { normalizeBindings, normalizeLock, normalizeTemplateLock, type Binding } from "./bindings.js";

package/dist/index.js

@@ -6,5 +6,6 @@ export { contentText, nodeText, visitNodes, wordCount } from "./text.js";
 export { isSafeUrl, safeUrl } from "./url.js";
 export { BLOCK_VERSION_ATTR, blockDefaults, blockNodeSpec, defineBlock, migrateBlockAttrs } from "./block.js";
 export { EMBED_PROVIDERS, embedInfo } from "./embed.js";
-export { BREAKPOINTS, DEVICES, collectStyles, colorCss, normalizeStyle, spacingValue, styleClass, styleCss } from "./style.js";
-export { CORE_BLOCK_STYLES, mergePresets, normalizeAnchor, normalizeBlockStyleName, normalizeClassName, normalizePresets, presetCss } from "./style.js";
+export { BREAKPOINTS, DEVICES, collectStyles, colorCss, normalizeGradient, normalizeStyle, ruleCss, spacingValue, styleClass, styleCss } from "./style.js";
+export { BLOCK_SELECTORS, CORE_BLOCK_STYLES, ELEMENT_SELECTORS, mergePresets, normalizeAnchor, normalizeBlockStyleName, normalizeClassName, normalizePresets, presetCss } from "./style.js";
+export { normalizeBindings, normalizeLock, normalizeTemplateLock } from "./bindings.js";

package/dist/normalize.js

@@ -2,6 +2,7 @@ import { blockNodeSpec, migrateBlockAttrs } from "./block.js";
 import { migrateContent } from "./migrate.js";
 import { CORE_MARKS, CORE_NODES, normalizeAttrs } from "./schema.js";
 import { normalizeAnchor, normalizeBlockStyleName, normalizeClassName, normalizeStyle } from "./style.js";
+import { normalizeBindings, normalizeLock, normalizeTemplateLock } from "./bindings.js";
 import { CONTENT_VERSION } from "./types.js";
 const empty = () => ({ version: CONTENT_VERSION, blocks: [] });
 const isObj = (v) => !!v && typeof v === "object" && !Array.isArray(v);
@@ -105,7 +106,7 @@ function normalizeNode(node, depth, state) {
             delete attrs.style;
     }
     // Biến thể kiểu, neo, class riêng (mọi khối)
-    for (const [k, fn] of [["blockStyle", normalizeBlockStyleName], ["anchor", normalizeAnchor], ["className", normalizeClassName]]) {
+    for (const [k, fn] of [["blockStyle", normalizeBlockStyleName], ["anchor", normalizeAnchor], ["className", normalizeClassName], ["bindings", normalizeBindings], ["lock", normalizeLock], ["templateLock", normalizeTemplateLock]]) {
         if (attrs && k in attrs) {
             const v = fn(attrs[k]);
             if (v === undefined)

package/dist/schema.d.ts

@@ -23,7 +23,7 @@ export interface NodeSpec {
  */
 export declare const CORE_NODES: Record<string, NodeSpec>;
 /** Khối động: nội dung lấy theo ngữ cảnh lúc hiển thị (website, trang, bài trong vòng lặp). */
-export declare const DYNAMIC_NODES: readonly ["siteTitle", "siteLogo", "siteTagline", "navigation", "search", "languageSwitcher", "copyright", "postTitle", "postContent", "postExcerpt", "featuredImage", "postDate", "postAuthor", "postTerms", "comments", "query", "postTemplate", "pagination", "queryEmpty", "templatePart", "syncedPattern"];
+export declare const DYNAMIC_NODES: readonly ["siteTitle", "siteLogo", "siteTagline", "navigation", "search", "languageSwitcher", "copyright", "postTitle", "postContent", "postExcerpt", "featuredImage", "postDate", "postAuthor", "postTerms", "comments", "queryTitle", "termDescription", "breadcrumbs", "postNavigation", "query", "postTemplate", "pagination", "queryEmpty", "templatePart", "syncedPattern"];
 export declare const CORE_MARKS: Record<string, NodeSpec>;
 /** Ép giá trị theo mô tả. Trả về undefined = bỏ thuộc tính (dùng mặc định). */
 export declare function coerceAttr(spec: AttrSpec, value: unknown): unknown;

package/dist/schema.js

@@ -87,6 +87,11 @@ export const CORE_NODES = {
     postAuthor: { attrs: { avatar: b({ default: false }) } },
     postTerms: { attrs: { taxonomy: s({ default: "category" }), separator: s({ default: ", " }) } },
     comments: {},
+    // 1.15: khối theme cho SEO / điều hướng — H1 của trang lưu trữ, mô tả chuyên mục, breadcrumb, bài trước / sau
+    queryTitle: { attrs: { level: i({ min: 1, max: 6, default: 1 }), prefix: b({ default: false }), textAlign: align } },
+    termDescription: { attrs: { textAlign: align } },
+    breadcrumbs: { attrs: { separator: s({ default: "›" }), showHome: b({ default: true }), showCurrent: b({ default: true }) } },
+    postNavigation: { attrs: { showTitle: b({ default: true }) } },
     query: {
         attrs: {
             inherit: b({ default: true }), postType: s({ default: "post" }), perPage: i({ min: 1, max: 50, default: 10 }),
@@ -104,6 +109,7 @@ export const CORE_NODES = {
 export const DYNAMIC_NODES = [
     "siteTitle", "siteLogo", "siteTagline", "navigation", "search", "languageSwitcher", "copyright",
     "postTitle", "postContent", "postExcerpt", "featuredImage", "postDate", "postAuthor", "postTerms", "comments",
+    "queryTitle", "termDescription", "breadcrumbs", "postNavigation",
     "query", "postTemplate", "pagination", "queryEmpty", "templatePart", "syncedPattern",
 ];
 export const CORE_MARKS = {

package/dist/style.d.ts

@@ -39,7 +39,48 @@ export interface BlockStyle {
     };
     radius?: string;
     hide?: Array<"desktop" | "tablet" | "mobile">;
+    /** Bố cục khối chứa (1.15): xếp ngang/dọc (flex) hoặc lưới — khối con xếp theo đây. */
+    layout?: BlockLayout;
+    /** Nền chuyển màu (1.15): preset của theme (`brand` → --ecx-gradient-brand) hoặc linear/radial-gradient đã kiểm. */
+    gradient?: string;
+    /** Đổ bóng (1.15): preset (`sm` `md` `lg` `xl` có sẵn, theme thêm) hoặc `none`. */
+    shadow?: string;
+    /** Tỉ lệ khung (1.15). */
+    aspectRatio?: string;
+    /** Ghim khi cuộn (1.15): `{ type: "sticky", top }`. */
+    position?: {
+        type: "sticky";
+        top?: string;
+    };
+    /** Khi rê chuột (1.15): màu chữ / nền / viền, bóng, nhấc lên. */
+    hover?: {
+        color?: {
+            text?: string;
+            background?: string;
+        };
+        border?: {
+            color?: string;
+        };
+        shadow?: string;
+        lift?: boolean;
+    };
+}
+/** Bố cục của khối chứa. Không có `type` = luồng thường (khối con xếp dọc như văn bản). */
+export interface BlockLayout {
+    type: "flex" | "grid";
+    /** flex: hàng ngang (row) hoặc xếp dọc (column). */
+    direction?: Responsive<"row" | "column">;
+    justify?: Responsive<"start" | "center" | "end" | "between">;
+    align?: Responsive<"start" | "center" | "end" | "stretch">;
+    /** flex: cho xuống dòng khi hết chỗ (mặc định có). */
+    wrap?: boolean;
+    /** grid: số cột (1–12) theo khổ. */
+    columns?: Responsive<number>;
+    /** grid: không đặt số cột → tự chia cột, mỗi cột tối thiểu bằng này. */
+    minColumnWidth?: string;
 }
+/** Gradient: preset hoặc linear/radial-gradient(hướng?, 2–6 điểm màu hex/rgb/hsl kèm %) — dạng chuẩn hoá khoảng trắng. */
+export declare function normalizeGradient(v: unknown): string | undefined;
 /** Chuẩn hoá `attrs.style`: giữ đúng thứ tự khoá, bỏ giá trị không hợp lệ. Rỗng → undefined. */
 export declare function normalizeStyle(v: unknown): BlockStyle | undefined;
 /** Độ dài / preset khoảng cách hợp lệ → giá trị CSS (preset thành biến); không hợp lệ → undefined. Dùng cho thuộc tính khối như chiều cao khoảng trống. */
@@ -48,8 +89,13 @@ export declare function spacingValue(v: unknown): string | undefined;
 export declare function colorCss(v: unknown): string | undefined;
 /** Tên class ổn định theo nội dung style (cùng kiểu dáng → cùng class). */
 export declare function styleClass(style: BlockStyle): string;
-/** CSS của một kiểu dáng: `.cls.cls{…}` + media query cho tablet / mobile + ẩn theo khổ. Rỗng → "". */
+/** CSS của một kiểu dáng: `.cls.cls{…}` + media query cho tablet / mobile + ẩn theo khổ + :hover. Rỗng → "". */
 export declare function styleCss(style: BlockStyle, cls?: string): string;
+/**
+ * CSS của một kiểu dáng cho bộ chọn bất kỳ (danh sách cách nhau dấu phẩy) — dùng cho kiểu của từng khối và Global Styles
+ * (kiểu mặc định theo loại khối / phần tử). Bộ chọn do mã gọi đưa vào, không lấy từ dữ liệu người dùng.
+ */
+export declare function ruleCss(selector: string, style: BlockStyle): string;
 /** Gom CSS cho cả một cây nội dung: trả về css (mỗi class một lần) — website và trình soạn dùng chung. */
 export declare function collectStyles(styles: Iterable<BlockStyle>): string;
 /** Biến thể kiểu (`blockStyle`): tên preset → class `ecx-is-<tên>`. */
@@ -65,7 +111,19 @@ export interface StylePresets {
     fontSizes?: Record<string, string>;
     spacing?: Record<string, string>;
     fonts?: Record<string, string>;
+    /** 1.15: nền chuyển màu (linear/radial-gradient đã kiểm) → --ecx-gradient-*. */
+    gradients?: Record<string, string>;
+    /** 1.15: đổ bóng (tối đa 3 lớp "x y blur spread? màu") → --ecx-shadow-*. */
+    shadows?: Record<string, string>;
+    /** 1.15 Global Styles: kiểu mặc định theo loại khối (paragraph, heading, button, group…). */
+    blocks?: Record<string, BlockStyle>;
+    /** 1.15 Global Styles: kiểu mặc định theo phần tử (link, button, heading, h1–h6, caption). */
+    elements?: Record<string, BlockStyle>;
 }
+/** Bộ chọn của khối lõi trên website (markup của renderer) — Global Styles theo loại khối. */
+export declare const BLOCK_SELECTORS: Record<string, string>;
+/** Bộ chọn của phần tử — Global Styles theo phần tử. */
+export declare const ELEMENT_SELECTORS: Record<string, string>;
 /** Chuẩn hoá preset: tên preset hợp lệ, giá trị đã kiểm (màu hex/rgb/hsl, độ dài hoặc clamp(), danh sách phông không có ; { }). */
 export declare function normalizePresets(v: unknown): StylePresets;
 /** Gộp preset theo thứ tự (sau đè trước): theme → bản sửa của quản trị viên. */

package/dist/style.js

@@ -18,6 +18,104 @@ const FONT_STYLES = ["normal", "italic"];
 const DECORATIONS = ["none", "underline", "line-through"];
 const TRANSFORMS = ["none", "uppercase", "lowercase", "capitalize"];
 const preset = (v) => (typeof v === "string" && PRESET.test(v) ? v : undefined);
+const DIRECTIONS = ["row", "column"];
+const JUSTIFY = ["start", "center", "end", "between"];
+const ALIGN_ITEMS = ["start", "center", "end", "stretch"];
+const RATIOS = ["1/1", "4/3", "3/2", "16/9", "21/9", "3/4", "2/3", "9/16"];
+const columns = (v) => {
+    const n = typeof v === "number" ? v : typeof v === "string" && /^\d{1,2}$/.test(v) ? Number(v) : NaN;
+    return Number.isInteger(n) && n >= 1 && n <= 12 ? n : undefined;
+};
+/** Tách tham số CSS theo dấu phẩy ngoài ngoặc: "90deg, rgb(1,2,3) 0%, #fff" → 3 phần. */
+function splitArgs(s) {
+    const out = [];
+    let depth = 0, cur = "";
+    for (const ch of s) {
+        if (ch === "(")
+            depth++;
+        if (ch === ")")
+            depth--;
+        if (ch === "," && depth === 0) {
+            out.push(cur.trim());
+            cur = "";
+        }
+        else
+            cur += ch;
+        if (depth < 0)
+            return [];
+    }
+    out.push(cur.trim());
+    return out;
+}
+const STOP = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\([\d\s.,%/]{1,40}\))(\s+\d{1,3}%)?$/i;
+const LINEAR_DIR = /^(\d{1,3}deg|to (top|bottom|left|right)( (top|bottom|left|right))?)$/;
+const RADIAL_SHAPE = /^(circle|ellipse)( at center)?$/;
+/** Gradient: preset hoặc linear/radial-gradient(hướng?, 2–6 điểm màu hex/rgb/hsl kèm %) — dạng chuẩn hoá khoảng trắng. */
+export function normalizeGradient(v) {
+    if (typeof v !== "string")
+        return undefined;
+    const t = v.trim();
+    if (PRESET.test(t))
+        return t;
+    const m = /^(linear|radial)-gradient\((.{1,400})\)$/i.exec(t);
+    if (!m)
+        return undefined;
+    const kind = m[1].toLowerCase();
+    const args = splitArgs(m[2]).map((a) => a.replace(/\s+/g, " "));
+    if (!args.length || args.some((a) => !a))
+        return undefined;
+    const head = kind === "linear" ? LINEAR_DIR.test(args[0]) : RADIAL_SHAPE.test(args[0]);
+    const stops = head ? args.slice(1) : args;
+    if (stops.length < 2 || stops.length > 6 || !stops.every((x) => STOP.test(x)))
+        return undefined;
+    return `${kind}-gradient(${args.join(", ")})`;
+}
+/** Bóng: preset hoặc none (giá trị tuỳ ý chỉ khai báo được ở preset của theme). */
+const shadow = (v) => (v === "none" ? "none" : preset(v));
+function layout(v) {
+    if (!isObj(v) || (v.type !== "flex" && v.type !== "grid"))
+        return undefined;
+    const out = { type: v.type };
+    if (v.type === "flex") {
+        const d = responsive(v.direction, oneOf(DIRECTIONS));
+        if (d)
+            out.direction = d;
+    }
+    const j = responsive(v.justify, oneOf(JUSTIFY));
+    if (j)
+        out.justify = j;
+    const a = responsive(v.align, oneOf(ALIGN_ITEMS));
+    if (a)
+        out.align = a;
+    if (v.type === "flex" && typeof v.wrap === "boolean")
+        out.wrap = v.wrap;
+    if (v.type === "grid") {
+        const c = responsive(v.columns, columns);
+        if (c)
+            out.columns = c;
+        const w = size(v.minColumnWidth);
+        if (w)
+            out.minColumnWidth = w;
+    }
+    return out;
+}
+function hover(v) {
+    if (!isObj(v))
+        return undefined;
+    const out = {};
+    const c = group(v.color, { text: color, background: color });
+    if (c)
+        out.color = c;
+    const b = group(v.border, { color });
+    if (b)
+        out.border = b;
+    const sh = shadow(v.shadow);
+    if (sh)
+        out.shadow = sh;
+    if (v.lift === true)
+        out.lift = true;
+    return Object.keys(out).length ? out : undefined;
+}
 const isObj = (v) => !!v && typeof v === "object" && !Array.isArray(v);
 const size = (v) => (typeof v === "string" && (LENGTH.test(v) || PRESET.test(v)) ? v : undefined);
 const color = (v) => (typeof v === "string" && (COLOR.test(v.trim()) || PRESET.test(v)) ? v.trim() : undefined);
@@ -91,6 +189,15 @@ export function normalizeStyle(v) {
         if (h.length)
             out.hide = [...h];
     }
+    set("layout", layout(v.layout));
+    set("gradient", normalizeGradient(v.gradient));
+    set("shadow", shadow(v.shadow));
+    set("aspectRatio", oneOf(RATIOS)(v.aspectRatio));
+    if (isObj(v.position) && v.position.type === "sticky") {
+        const top = size(v.position.top);
+        set("position", top ? { type: "sticky", top } : { type: "sticky" });
+    }
+    set("hover", hover(v.hover));
     return Object.keys(out).length ? out : undefined;
 }
 // ---------------------------------------------------------------------------
@@ -158,6 +265,69 @@ function declarations(style) {
         out.base.push(`border:${style.border.width ? spacing(style.border.width) : "1px"} ${style.border.style ?? "solid"} ${style.border.color ? colorValue(style.border.color) : "currentColor"}`);
     if (style.radius)
         out.base.push(`border-radius:${spacing(style.radius)}`);
+    // 1.15: bố cục, nền chuyển màu, bóng, tỉ lệ, ghim
+    const l = style.layout;
+    if (l?.type === "flex") {
+        out.base.push("display:flex", `flex-wrap:${l.wrap === false ? "nowrap" : "wrap"}`);
+        if (!l.direction?.base)
+            out.base.push("flex-direction:row");
+        if (style.gap === undefined)
+            out.base.push("gap:var(--ecx-block-gap, 1rem)");
+    }
+    else if (l?.type === "grid") {
+        out.base.push("display:grid");
+        if (!l.columns?.base)
+            out.base.push(`grid-template-columns:repeat(auto-fill,minmax(min(${l.minColumnWidth ? spacing(l.minColumnWidth) : "12rem"},100%),1fr))`);
+        if (style.gap === undefined)
+            out.base.push("gap:var(--ecx-block-gap, 1rem)");
+    }
+    for (const d of DEVICES) {
+        const dir = l?.direction?.[d];
+        if (dir)
+            out[d].push(`flex-direction:${dir}`);
+        const j = l?.justify?.[d];
+        if (j)
+            out[d].push(`justify-content:${JUSTIFY_CSS[j]}`);
+        const a = l?.align?.[d];
+        if (a)
+            out[d].push(`align-items:${ALIGN_CSS[a]}`);
+        const c = l?.columns?.[d];
+        if (c)
+            out[d].push(`grid-template-columns:repeat(${c},minmax(0,1fr))`);
+    }
+    if (style.gradient)
+        out.base.push(`background:${gradientValue(style.gradient)}`);
+    if (style.shadow)
+        out.base.push(`box-shadow:${shadowValue(style.shadow)}`);
+    if (style.aspectRatio)
+        out.base.push(`aspect-ratio:${style.aspectRatio}`, "object-fit:cover");
+    if (style.position)
+        out.base.push("position:sticky", `top:${style.position.top ? spacing(style.position.top) : "0"}`, "z-index:10");
+    if (style.hover)
+        out.base.push("transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease");
+    return out;
+}
+const JUSTIFY_CSS = { start: "flex-start", center: "center", end: "flex-end", between: "space-between" };
+const ALIGN_CSS = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch" };
+/** Bóng có sẵn (theme ghi đè bằng preset cùng tên). */
+const SHADOWS = {
+    sm: "0 1px 2px rgb(0 0 0 / .08)", md: "0 4px 12px rgb(0 0 0 / .1)", lg: "0 12px 32px rgb(0 0 0 / .14)", xl: "0 24px 64px rgb(0 0 0 / .18)",
+};
+const shadowValue = (v) => (v === "none" ? "none" : `var(--ecx-shadow-${v}${SHADOWS[v] ? `, ${SHADOWS[v]}` : ""})`);
+const gradientValue = (v) => (PRESET.test(v) ? `var(--ecx-gradient-${v})` : v);
+/** Khai báo khi rê chuột. */
+function hoverDeclarations(h) {
+    const out = [];
+    if (h.color?.text)
+        out.push(`color:${colorValue(h.color.text)}`);
+    if (h.color?.background)
+        out.push(`background:${colorValue(h.color.background)}`);
+    if (h.border?.color)
+        out.push(`border-color:${colorValue(h.border.color)}`);
+    if (h.shadow)
+        out.push(`box-shadow:${shadowValue(h.shadow)}`);
+    if (h.lift)
+        out.push("transform:translateY(-2px)");
     return out;
 }
 /** Độ dài / preset khoảng cách hợp lệ → giá trị CSS (preset thành biến); không hợp lệ → undefined. Dùng cho thuộc tính khối như chiều cao khoảng trống. */
@@ -180,9 +350,17 @@ export function styleClass(style) {
     }
     return `ecx-s-${h.toString(36)}`;
 }
-/** CSS của một kiểu dáng: `.cls.cls{…}` + media query cho tablet / mobile + ẩn theo khổ. Rỗng → "". */
+/** CSS của một kiểu dáng: `.cls.cls{…}` + media query cho tablet / mobile + ẩn theo khổ + :hover. Rỗng → "". */
 export function styleCss(style, cls = styleClass(style)) {
-    const sel = `.${cls}.${cls}`;
+    return ruleCss(`.${cls}.${cls}`, style);
+}
+/**
+ * CSS của một kiểu dáng cho bộ chọn bất kỳ (danh sách cách nhau dấu phẩy) — dùng cho kiểu của từng khối và Global Styles
+ * (kiểu mặc định theo loại khối / phần tử). Bộ chọn do mã gọi đưa vào, không lấy từ dữ liệu người dùng.
+ */
+export function ruleCss(selector, style) {
+    const sel = selector;
+    const each = (suffix) => sel.split(",").map((x) => `${x.trim()}${suffix}`).join(",");
     const d = declarations(style);
     let css = d.base.length ? `${sel}{${d.base.join(";")}}` : "";
     if (d.tablet.length)
@@ -193,6 +371,14 @@ export function styleCss(style, cls = styleClass(style)) {
         const q = h === "desktop" ? `(min-width:${BREAKPOINTS.tablet + 1}px)` : h === "tablet" ? `(min-width:${BREAKPOINTS.mobile + 1}px) and (max-width:${BREAKPOINTS.tablet}px)` : `(max-width:${BREAKPOINTS.mobile}px)`;
         css += `@media ${q}{${sel}{display:none!important}}`;
     }
+    if (style.hover) {
+        const hv = hoverDeclarations(style.hover);
+        if (hv.length)
+            css += `${each(":hover")}{${hv.join(";")}}`;
+    }
+    // Hàng ngang / lưới: khoảng cách do gap lo — bỏ lề dọc của khối con (lề luồng văn bản làm lệch hàng)
+    if (style.layout)
+        css += `${each(" > *")}{margin-block:0}`;
     return css;
 }
 /** Gom CSS cho cả một cây nội dung: trả về css (mỗi class một lần) — website và trình soạn dùng chung. */
@@ -234,11 +420,46 @@ export const CORE_BLOCK_STYLES = {
     button: ["pill"],
     group: ["card"],
 };
+/** Bộ chọn của khối lõi trên website (markup của renderer) — Global Styles theo loại khối. */
+export const BLOCK_SELECTORS = {
+    paragraph: "p", heading: "h1,h2,h3,h4,h5,h6", bulletList: "ul", orderedList: "ol", blockquote: "blockquote", codeBlock: "pre",
+    preformatted: ".ecx-pre", horizontalRule: "hr", image: ".ecx-image", gallery: ".ecx-gallery", table: ".ecx-table table", group: ".ecx-group",
+    columns: ".ecx-columns", column: ".ecx-column", buttons: ".ecx-buttons-group", button: ".ecx-button", spacer: ".ecx-spacer", callout: ".ecx-callout",
+    cover: ".ecx-cover", mediaText: ".ecx-media-text", pullquote: ".ecx-pullquote", details: ".ecx-details", socialLinks: ".ecx-social",
+    siteTitle: ".ecx-site-title", siteTagline: ".ecx-site-tagline", navigation: ".ecx-navigation", postTitle: ".ecx-post-title", postExcerpt: ".ecx-post-excerpt",
+    postDate: ".ecx-post-date", featuredImage: ".ecx-featured-image", query: ".ecx-query",
+};
+/** Bộ chọn của phần tử — Global Styles theo phần tử. */
+export const ELEMENT_SELECTORS = {
+    link: "a", button: ".ecx-button", heading: "h1,h2,h3,h4,h5,h6", h1: "h1", h2: "h2", h3: "h3", h4: "h4", h5: "h5", h6: "h6", caption: "figcaption",
+};
 const FLUID = /^clamp\(\s*-?[\d.]+(px|rem|em|vw|vh|%)?\s*,\s*[\d.\s+\-*()a-z%]{1,60},\s*-?[\d.]+(px|rem|em|vw|vh|%)?\s*\)$/;
 const FONT = /^[\w\s"',.\-]{1,200}$/;
 const presetSize = (v) => (typeof v === "string" && (LENGTH.test(v.trim()) || FLUID.test(v.trim())) ? v.trim() : undefined);
 const presetColor = (v) => (typeof v === "string" && COLOR.test(v.trim()) ? v.trim() : undefined);
 const presetFont = (v) => (typeof v === "string" && FONT.test(v.trim()) ? v.trim() : undefined);
+const presetGradient = (v) => { const g = normalizeGradient(v); return g && !PRESET.test(g) ? g : undefined; };
+const SHADOW_LAYER = /^(inset )?(-?\d{1,3}(\.\d{1,2})?(px|rem|em)? ){2,3}(-?\d{1,3}(\.\d{1,2})?(px|rem|em)? )?(#[0-9a-f]{3,8}|(rgb|hsl)a?\([\d\s.,%/]{1,40}\))$/i;
+const presetShadow = (v) => {
+    if (typeof v !== "string")
+        return undefined;
+    const layers = splitArgs(v.trim()).map((x) => x.replace(/\s+/g, " "));
+    return layers.length >= 1 && layers.length <= 3 && layers.every((x) => SHADOW_LAYER.test(x)) ? layers.join(", ") : undefined;
+};
+/** Kiểu dáng theo tên (khối / phần tử): tên trong danh sách, kiểu chuẩn hoá như attrs.style. */
+function styleMap(v, names) {
+    if (!isObj(v))
+        return undefined;
+    const out = {};
+    for (const [k, x] of Object.entries(v)) {
+        if (!(k in names))
+            continue;
+        const st = normalizeStyle(x);
+        if (st)
+            out[k] = st;
+    }
+    return Object.keys(out).length ? out : undefined;
+}
 /** Chuẩn hoá preset: tên preset hợp lệ, giá trị đã kiểm (màu hex/rgb/hsl, độ dài hoặc clamp(), danh sách phông không có ; { }). */
 export function normalizePresets(v) {
     const out = {};
@@ -262,6 +483,14 @@ export function normalizePresets(v) {
     pick("fontSizes", presetSize);
     pick("spacing", presetSize);
     pick("fonts", presetFont);
+    pick("gradients", presetGradient);
+    pick("shadows", presetShadow);
+    const blocks = styleMap(v.blocks, BLOCK_SELECTORS);
+    if (blocks)
+        out.blocks = blocks;
+    const elements = styleMap(v.elements, ELEMENT_SELECTORS);
+    if (elements)
+        out.elements = elements;
     return out;
 }
 /** Gộp preset theo thứ tự (sau đè trước): theme → bản sửa của quản trị viên. */
@@ -280,6 +509,15 @@ export function presetCss(presets, selector = ":root") {
         ...Object.entries(p.fontSizes ?? {}).map(([k, v]) => `--ecx-font-size-${k}:${v}`),
         ...Object.entries(p.spacing ?? {}).map(([k, v]) => `--ecx-spacing-${k}:${v}`),
         ...Object.entries(p.fonts ?? {}).map(([k, v]) => `--ecx-font-family-${k}:${v}`),
+        ...Object.entries(p.gradients ?? {}).map(([k, v]) => `--ecx-gradient-${k}:${v}`),
+        ...Object.entries(p.shadows ?? {}).map(([k, v]) => `--ecx-shadow-${k}:${v}`),
     ];
-    return decl.length ? `${selector}{${decl.join(";")}}` : "";
+    let css = decl.length ? `${selector}{${decl.join(";")}}` : "";
+    // Global Styles: :where() giữ độ ưu tiên thấp → kiểu riêng của từng khối (.ecx-s-…) luôn thắng
+    const scoped = (sel) => sel.split(",").map((x) => `:where(.ecx-content) ${x.trim()}`).join(",");
+    for (const [name, st] of Object.entries(p.elements ?? {}))
+        css += ruleCss(scoped(ELEMENT_SELECTORS[name]), st);
+    for (const [name, st] of Object.entries(p.blocks ?? {}))
+        css += ruleCss(scoped(BLOCK_SELECTORS[name]), st);
+    return css;
 }

package/fixtures/bindings-lock.json

@@ -0,0 +1,33 @@
+{
+  "name": "bindings-lock",
+  "note": "Gắn dữ liệu + khoá khối (1.15): attrs.bindings (nguồn nhóm/tên, tham số chữ/số/đúng-sai), attrs.lock (chỉ cờ bật), attrs.templateLock — giá trị lạ bị bỏ",
+  "input": {
+    "version": 1,
+    "blocks": [{ "id": "main", "type": "richtext", "data": { "type": "doc", "content": [
+      { "type": "heading", "attrs": { "level": 2, "bindings": {
+        "content": { "source": "core/post", "args": { "field": "title", "x;y": 1, "obj": { "a": 1 } } },
+        "bad key": { "source": "core/post" },
+        "alt": { "source": "javascript:alert(1)" },
+        "url": "core/post"
+      }, "lock": { "move": true, "remove": "yes" } }, "content": [{ "type": "text", "text": "Tiêu đề mẫu" }] },
+      { "type": "group", "attrs": { "templateLock": "everything" }, "content": [
+        { "type": "paragraph", "attrs": { "bindings": { "content": { "source": "shop/product", "args": { "id": 42, "field": "price", "sale": true } } } } }
+      ] },
+      { "type": "group", "attrs": { "templateLock": "contentOnly", "lock": { "move": false } }, "content": [
+        { "type": "paragraph", "attrs": { "bindings": {} } }
+      ] }
+    ] } }]
+  },
+  "expected": {
+    "version": 1,
+    "blocks": [{ "id": "main", "type": "richtext", "data": { "type": "doc", "content": [
+      { "type": "heading", "attrs": { "level": 2, "bindings": { "content": { "source": "core/post", "args": { "field": "title" } } }, "lock": { "move": true } }, "content": [{ "type": "text", "text": "Tiêu đề mẫu" }] },
+      { "type": "group", "content": [
+        { "type": "paragraph", "attrs": { "bindings": { "content": { "source": "shop/product", "args": { "id": 42, "field": "price", "sale": true } } } } }
+      ] },
+      { "type": "group", "attrs": { "templateLock": "contentOnly" }, "content": [
+        { "type": "paragraph" }
+      ] }
+    ] } }]
+  }
+}

package/fixtures/style-layout-effects.json

@@ -0,0 +1,47 @@
+{
+  "name": "style-layout-effects",
+  "note": "Kiểu dáng 1.15: bố cục flex/grid (theo khổ), nền chuyển màu đã kiểm, bóng, tỉ lệ, ghim, hover — giá trị lạ và CSS chèn bị bỏ; dạng gọn thành theo khổ",
+  "input": {
+    "version": 1,
+    "blocks": [{ "id": "main", "type": "richtext", "data": { "type": "doc", "content": [
+      { "type": "group", "attrs": { "style": {
+        "layout": { "type": "flex", "direction": { "base": "row", "mobile": "column" }, "justify": "between", "align": "middle", "wrap": "yes", "columns": 3 },
+        "gradient": "linear-gradient(135deg,#1a597b 0%,  rgb(242, 98, 81) 100%)",
+        "shadow": "lg",
+        "hover": { "color": { "background": "primary", "text": "red;}" }, "lift": true, "shadow": "0 0 1px red" }
+      } }, "content": [
+        { "type": "paragraph", "content": [{ "type": "text", "text": "Hàng ngang" }] }
+      ] },
+      { "type": "group", "attrs": { "style": {
+        "layout": { "type": "grid", "columns": { "base": "3", "tablet": 2, "mobile": 0 }, "minColumnWidth": "14rem", "direction": "row" },
+        "gradient": "url(javascript:alert(1))",
+        "aspectRatio": "16/9",
+        "position": { "type": "sticky", "top": "1e9px" }
+      } }, "content": [
+        { "type": "paragraph", "content": [{ "type": "text", "text": "Lưới" }] }
+      ] },
+      { "type": "image", "attrs": { "src": "https://a.vn/a.png", "style": { "aspectRatio": "7/3", "shadow": "none", "layout": "grid" } } }
+    ] } }]
+  },
+  "expected": {
+    "version": 1,
+    "blocks": [{ "id": "main", "type": "richtext", "data": { "type": "doc", "content": [
+      { "type": "group", "attrs": { "style": {
+        "layout": { "type": "flex", "direction": { "base": "row", "mobile": "column" }, "justify": { "base": "between" } },
+        "gradient": "linear-gradient(135deg, #1a597b 0%, rgb(242, 98, 81) 100%)",
+        "shadow": "lg",
+        "hover": { "color": { "background": "primary" }, "lift": true }
+      } }, "content": [
+        { "type": "paragraph", "content": [{ "type": "text", "text": "Hàng ngang" }] }
+      ] },
+      { "type": "group", "attrs": { "style": {
+        "layout": { "type": "grid", "columns": { "base": 3, "tablet": 2 }, "minColumnWidth": "14rem" },
+        "aspectRatio": "16/9",
+        "position": { "type": "sticky" }
+      } }, "content": [
+        { "type": "paragraph", "content": [{ "type": "text", "text": "Lưới" }] }
+      ] },
+      { "type": "image", "attrs": { "src": "https://a.vn/a.png", "style": { "shadow": "none" } } }
+    ] } }]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomcx/ecomweb-content",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Định dạng nội dung của Ecomweb CMS: kiểu dữ liệu, schema khối lõi, chuẩn hoá, nâng phiên bản và bộ fixture hợp đồng — dùng chung cho trình soạn, website và máy chủ, không phụ thuộc trình soạn nào.",
   "license": "MIT",
   "type": "module",
@@ -37,7 +37,7 @@
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "check-dist": "node scripts/check-dist.mjs",
-    "test": "tsc -p tsconfig.test.json && node --test .test-build/test/ && node scripts/check-dist.mjs"
+    "test": "tsc -p tsconfig.test.json && node --test \".test-build/test/*.test.js\" && node scripts/check-dist.mjs"
   },
   "devDependencies": {
     "@types/node": "22.19.1",

package/style.css

@@ -130,6 +130,14 @@
   :where(.ecx-site-title) { margin: 0; font-weight: 700; }
   :where(.ecx-site-title) :where(a) { color: inherit; text-decoration: none; }
   :where(.ecx-site-tagline, .ecx-copyright, .ecx-post-date, .ecx-post-terms, .ecx-post-author) { color: var(--_muted, inherit); }
+  :where(.ecx-breadcrumbs) :where(ol) { display: flex; flex-wrap: wrap; gap: .35em; margin: 0 0 1em; padding: 0; list-style: none; font-size: .875em; color: var(--_muted, inherit); }
+  :where(.ecx-breadcrumbs) :where(a) { color: inherit; }
+  :where(.ecx-breadcrumbs-sep) { margin-right: .35em; opacity: .6; }
+  :where(.ecx-term-description) { color: var(--_muted, inherit); margin: 0 0 1.5em; }
+  :where(.ecx-post-navigation) { display: flex; justify-content: space-between; gap: 1em; margin: 2em 0; padding-top: 1em; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
+  :where(.ecx-post-navigation) :where(a) { display: flex; flex-direction: column; gap: .2em; max-width: 48%; color: inherit; text-decoration: none; }
+  :where(.ecx-post-navigation-next) { text-align: right; margin-left: auto; }
+  :where(.ecx-post-navigation) :where(span) { font-size: .8em; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
   :where(.ecx-navigation-menu) :where(ul) { display: flex; flex-wrap: wrap; gap: .25em 1.25em; margin: 0; padding: 0; list-style: none; }
   :where(.ecx-navigation-menu) :where(ul ul) { display: none; }
   :where(.ecx-navigation-menu) :where(a) { color: inherit; text-decoration: none; }