@ecomcx/ecomweb-content 0.0.0-stage → 1.14.0

package/dist/schema.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Mô tả thuộc tính của khối / định dạng chữ — dùng cho khối lõi dưới đây và cho khối của plugin (defineBlock).
+ * Giá trị sai kiểu được ép về đúng kiểu nếu được (số dạng chuỗi → số), không ép được thì bỏ (= giá trị mặc định).
+ * `null` và "không có" là một: thuộc tính null không được lưu.
+ */
+export type AttrType = "string" | "number" | "integer" | "boolean" | "url" | "json";
+export interface AttrSpec {
+    type: AttrType;
+    /** Giá trị khi không có — trình soạn và website dùng chung. */
+    default?: unknown;
+    /** Chỉ nhận các giá trị này. */
+    enum?: readonly unknown[];
+    /** Số: kẹp trong [min, max]. */
+    min?: number;
+    max?: number;
+}
+export interface NodeSpec {
+    attrs?: Record<string, AttrSpec>;
+}
+/**
+ * Khối lõi trong nội dung soạn thảo (khối `richtext`). Thuộc tính không có trong danh sách vẫn được giữ nguyên
+ * (plugin có thể thêm thuộc tính vào khối lõi) — chỉ thuộc tính có mô tả mới được kiểm kiểu.
+ */
+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 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;
+/** Chuẩn hoá bộ thuộc tính: ép kiểu thuộc tính có mô tả, giữ nguyên thuộc tính khác, bỏ null. Rỗng → undefined. */
+export declare function normalizeAttrs(attrs: unknown, spec?: Record<string, AttrSpec>): Record<string, unknown> | undefined;

package/dist/schema.js

@@ -0,0 +1,167 @@
+const s = (extra = {}) => ({ type: "string", ...extra });
+const n = (extra = {}) => ({ type: "number", ...extra });
+const i = (extra = {}) => ({ type: "integer", ...extra });
+const b = (extra = {}) => ({ type: "boolean", ...extra });
+const url = () => ({ type: "url" });
+const align = s({ enum: ["left", "center", "right", "justify"] });
+const media = { src: url(), name: s(), mime: s(), mediaId: { type: "json" }, caption: s() };
+/**
+ * Khối lõi trong nội dung soạn thảo (khối `richtext`). Thuộc tính không có trong danh sách vẫn được giữ nguyên
+ * (plugin có thể thêm thuộc tính vào khối lõi) — chỉ thuộc tính có mô tả mới được kiểm kiểu.
+ */
+export const CORE_NODES = {
+    doc: {},
+    text: {},
+    paragraph: { attrs: { textAlign: align } },
+    heading: { attrs: { level: i({ min: 1, max: 6, default: 2 }), textAlign: align, id: s() } },
+    bulletList: {},
+    orderedList: { attrs: { start: i({ min: 0, default: 1 }) } },
+    listItem: {},
+    taskList: {},
+    taskItem: { attrs: { checked: b({ default: false }) } },
+    blockquote: {},
+    codeBlock: { attrs: { language: s() } },
+    hardBreak: {},
+    horizontalRule: {},
+    image: {
+        attrs: {
+            src: url(), alt: s(), title: s(), width: n({ min: 1 }), height: n({ min: 1 }), srcset: s(), webpSrcset: s(),
+            mediaId: { type: "json" }, size: s({ default: "large" }), caption: s(), align: s({ enum: ["left", "right", "center", "wide", "full"] }),
+        },
+    },
+    gallery: { attrs: { images: { type: "json", default: [] }, columns: i({ min: 1, max: 6, default: 3 }), caption: s() } },
+    video: { attrs: { ...media, poster: url() } },
+    audio: { attrs: { ...media } },
+    file: { attrs: { ...media, size: n({ min: 0 }), embed: b({ default: true }), download: b() } },
+    table: { attrs: { footer: b({ default: false }), fixed: b({ default: false }) } },
+    tableRow: {},
+    tableHeader: { attrs: { colspan: i({ min: 1, default: 1 }), rowspan: i({ min: 1, default: 1 }), colwidth: { type: "json" } } },
+    tableCell: { attrs: { colspan: i({ min: 1, default: 1 }), rowspan: i({ min: 1, default: 1 }), colwidth: { type: "json" } } },
+    youtube: { attrs: { src: url(), start: i({ min: 0 }), width: n({ min: 1 }), height: n({ min: 1 }) } },
+    // Bố cục (1.2): cột, nhóm, hộp lưu ý chứa khối khác; nút; nhúng theo đường dẫn (embedInfo)
+    columns: { attrs: { verticalAlign: s({ enum: ["top", "center", "bottom"] }), stack: b({ default: true }) } },
+    column: { attrs: { width: n({ min: 5, max: 100 }) } },
+    group: { attrs: { background: s(), textColor: s(), padding: s({ enum: ["none", "small", "medium", "large"], default: "medium" }) } },
+    callout: { attrs: { tone: s({ enum: ["info", "success", "warning", "danger"], default: "info" }), title: s() } },
+    button: {
+        attrs: {
+            text: s(), href: url(), target: s(), rel: s(),
+            variant: s({ enum: ["primary", "secondary", "outline"], default: "primary" }), align: s({ enum: ["left", "center", "right"] }),
+        },
+    },
+    embed: { attrs: { url: url(), caption: s() } },
+    // Bộ khối cơ bản (1.9)
+    spacer: { attrs: { height: s({ default: "lg" }) } },
+    buttons: { attrs: { align: s({ enum: ["left", "center", "right", "space-between"] }) } },
+    cover: {
+        attrs: {
+            src: url(), mediaId: { type: "json" }, alt: s(), overlay: s(), opacity: i({ min: 0, max: 100, default: 50 }), minHeight: s({ default: "400px" }),
+            contentAlign: s({ enum: ["top", "center", "bottom"], default: "center" }), fixed: b({ default: false }),
+        },
+    },
+    mediaText: {
+        attrs: {
+            src: url(), mediaId: { type: "json" }, alt: s(), position: s({ enum: ["left", "right"], default: "left" }), width: i({ min: 20, max: 80, default: 50 }),
+            verticalAlign: s({ enum: ["top", "center", "bottom"], default: "center" }), stack: b({ default: true }),
+        },
+    },
+    pullquote: { attrs: { citation: s() } },
+    details: { attrs: { summary: s(), open: b({ default: false }) } },
+    customHtml: { attrs: { html: s() } },
+    socialLinks: { attrs: { links: { type: "json", default: [] }, size: s({ enum: ["small", "medium", "large"], default: "medium" }), align: s({ enum: ["left", "center", "right"] }), showLabels: b({ default: false }) } },
+    tableOfContents: { attrs: { title: s(), maxLevel: i({ min: 2, max: 4, default: 3 }) } },
+    preformatted: {},
+    // Khối động (1.6): lấy dữ liệu lúc hiển thị theo ngữ cảnh (website, trang đang xem, bài trong vòng lặp) — dùng trong template
+    siteTitle: { attrs: { level: i({ min: 0, max: 6, default: 0 }), link: b({ default: true }), textAlign: align } },
+    siteLogo: { attrs: { width: n({ min: 16, max: 600, default: 120 }), link: b({ default: true }) } },
+    siteTagline: { attrs: { textAlign: align } },
+    navigation: { attrs: { location: s({ default: "primary" }), orientation: s({ enum: ["horizontal", "vertical"], default: "horizontal" }), mobile: b({ default: true }) } },
+    search: { attrs: { placeholder: s(), buttonText: s() } },
+    languageSwitcher: {},
+    copyright: { attrs: { text: s(), textAlign: align } },
+    postTitle: { attrs: { level: i({ min: 1, max: 6, default: 1 }), link: b({ default: false }), textAlign: align } },
+    postContent: {},
+    postExcerpt: { attrs: { moreText: s() } },
+    featuredImage: { attrs: { size: s({ default: "large" }), link: b({ default: false }), aspect: s({ enum: ["auto", "16/9", "4/3", "1/1", "3/4"], default: "auto" }) } },
+    postDate: { attrs: { textAlign: align } },
+    postAuthor: { attrs: { avatar: b({ default: false }) } },
+    postTerms: { attrs: { taxonomy: s({ default: "category" }), separator: s({ default: ", " }) } },
+    comments: {},
+    query: {
+        attrs: {
+            inherit: b({ default: true }), postType: s({ default: "post" }), perPage: i({ min: 1, max: 50, default: 10 }),
+            category: s(), tag: s(), orderBy: s({ enum: ["date", "title", "menu_order"], default: "date" }), order: s({ enum: ["desc", "asc"], default: "desc" }),
+        },
+    },
+    postTemplate: { attrs: { layout: s({ enum: ["list", "grid"], default: "list" }), columns: i({ min: 1, max: 6, default: 3 }) } },
+    pagination: {},
+    queryEmpty: {},
+    templatePart: { attrs: { slug: s(), tagName: s({ enum: ["div", "header", "footer", "aside", "section"], default: "div" }) } },
+    /** Mẫu đồng bộ: tham chiếu tới mẫu (id) — sửa mẫu gốc thì mọi chỗ dùng đổi theo. */
+    syncedPattern: { attrs: { ref: i({ min: 1 }) } },
+};
+/** 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 const DYNAMIC_NODES = [
+    "siteTitle", "siteLogo", "siteTagline", "navigation", "search", "languageSwitcher", "copyright",
+    "postTitle", "postContent", "postExcerpt", "featuredImage", "postDate", "postAuthor", "postTerms", "comments",
+    "query", "postTemplate", "pagination", "queryEmpty", "templatePart", "syncedPattern",
+];
+export const CORE_MARKS = {
+    bold: {}, italic: {}, underline: {}, strike: {}, code: {}, subscript: {}, superscript: {},
+    highlight: { attrs: { color: s() } },
+    textStyle: { attrs: { color: s() } },
+    link: { attrs: { href: url(), target: s(), rel: s() } },
+};
+/** Ép giá trị theo mô tả. Trả về undefined = bỏ thuộc tính (dùng mặc định). */
+export function coerceAttr(spec, value) {
+    if (value === null || value === undefined)
+        return undefined;
+    let v = value;
+    switch (spec.type) {
+        case "string":
+        case "url":
+            if (typeof v === "number" || typeof v === "boolean")
+                v = String(v);
+            if (typeof v !== "string")
+                return undefined;
+            break;
+        case "number":
+        case "integer": {
+            const num = typeof v === "number" ? v : typeof v === "string" && v.trim() !== "" ? Number(v) : NaN;
+            if (!Number.isFinite(num))
+                return undefined;
+            let x = spec.type === "integer" ? Math.round(num) : num;
+            if (spec.min !== undefined)
+                x = Math.max(spec.min, x);
+            if (spec.max !== undefined)
+                x = Math.min(spec.max, x);
+            v = x;
+            break;
+        }
+        case "boolean":
+            if (v === "true")
+                v = true;
+            else if (v === "false")
+                v = false;
+            if (typeof v !== "boolean")
+                return undefined;
+            break;
+        case "json":
+            break;
+    }
+    if (spec.enum && !spec.enum.includes(v))
+        return undefined;
+    return v;
+}
+/** Chuẩn hoá bộ thuộc tính: ép kiểu thuộc tính có mô tả, giữ nguyên thuộc tính khác, bỏ null. Rỗng → undefined. */
+export function normalizeAttrs(attrs, spec) {
+    if (!attrs || typeof attrs !== "object" || Array.isArray(attrs))
+        return undefined;
+    const out = {};
+    for (const [key, value] of Object.entries(attrs)) {
+        const v = spec?.[key] ? coerceAttr(spec[key], value) : value === null ? undefined : value;
+        if (v !== undefined)
+            out[key] = v;
+    }
+    return Object.keys(out).length ? out : undefined;
+}

package/dist/style.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Kiểu dáng của khối (`attrs.style`, mọi khối): khoảng cách, cỡ chữ, màu, viền, ẩn theo khổ màn hình.
+ * Giá trị theo khổ: `{ base, tablet, mobile }` (tablet ≤ 1024px, mobile ≤ 640px). Giá trị là preset của theme
+ * (`lg`, `primary` → biến CSS `--ecx-spacing-lg`, `--ecx-color-primary`) hoặc giá trị CSS đã kiểm (độ dài, màu).
+ * Chỉ nhận giá trị trong danh sách → không chèn được CSS tuỳ ý. Máy chủ chạy cùng quy tắc (ContentFormat.cs).
+ */
+export declare const BREAKPOINTS: {
+    readonly tablet: 1024;
+    readonly mobile: 640;
+};
+export declare const DEVICES: readonly ["base", "tablet", "mobile"];
+export type Device = (typeof DEVICES)[number];
+export type Responsive<T> = Partial<Record<Device, T>>;
+export type Box = string | Partial<Record<"top" | "right" | "bottom" | "left", string>>;
+export interface BlockStyle {
+    padding?: Responsive<Box>;
+    margin?: Responsive<Box>;
+    gap?: Responsive<string>;
+    width?: Responsive<string>;
+    maxWidth?: Responsive<string>;
+    minHeight?: Responsive<string>;
+    fontFamily?: string;
+    fontSize?: Responsive<string>;
+    lineHeight?: Responsive<number>;
+    letterSpacing?: Responsive<string>;
+    fontWeight?: string;
+    fontStyle?: string;
+    textDecoration?: string;
+    textTransform?: string;
+    textAlign?: Responsive<string>;
+    color?: {
+        text?: string;
+        background?: string;
+    };
+    border?: {
+        width?: string;
+        style?: string;
+        color?: string;
+    };
+    radius?: string;
+    hide?: Array<"desktop" | "tablet" | "mobile">;
+}
+/** 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. */
+export declare function spacingValue(v: unknown): string | undefined;
+/** Màu hợp lệ (hex/rgb/hsl hoặc preset) → giá trị CSS; không hợp lệ → 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 → "". */
+export declare function styleCss(style: BlockStyle, cls?: string): 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>`. */
+export declare function normalizeBlockStyleName(v: unknown): string | undefined;
+/** Neo (`anchor`) → id của phần tử. */
+export declare function normalizeAnchor(v: unknown): string | undefined;
+/** Class CSS riêng (`className`): tối đa 5 class hợp lệ, cách nhau bởi dấu cách. */
+export declare function normalizeClassName(v: unknown): string | undefined;
+/** Biến thể có sẵn của lõi (CSS trong style.css); theme thêm bằng theme.json › blockStyles. */
+export declare const CORE_BLOCK_STYLES: Record<string, string[]>;
+export interface StylePresets {
+    colors?: Record<string, string>;
+    fontSizes?: Record<string, string>;
+    spacing?: Record<string, string>;
+    fonts?: 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. */
+export declare function mergePresets(...list: unknown[]): StylePresets;
+/** Biến CSS của preset: `--ecx-color-*`, `--ecx-font-size-*`, `--ecx-spacing-*`, `--ecx-font-family-*`. */
+export declare function presetCss(presets: unknown, selector?: string): string;

package/dist/style.js

@@ -0,0 +1,285 @@
+/**
+ * Kiểu dáng của khối (`attrs.style`, mọi khối): khoảng cách, cỡ chữ, màu, viền, ẩn theo khổ màn hình.
+ * Giá trị theo khổ: `{ base, tablet, mobile }` (tablet ≤ 1024px, mobile ≤ 640px). Giá trị là preset của theme
+ * (`lg`, `primary` → biến CSS `--ecx-spacing-lg`, `--ecx-color-primary`) hoặc giá trị CSS đã kiểm (độ dài, màu).
+ * Chỉ nhận giá trị trong danh sách → không chèn được CSS tuỳ ý. Máy chủ chạy cùng quy tắc (ContentFormat.cs).
+ */
+export const BREAKPOINTS = { tablet: 1024, mobile: 640 };
+export const DEVICES = ["base", "tablet", "mobile"];
+const SIDES = ["top", "right", "bottom", "left"];
+const LENGTH = /^(0|-?\d{1,4}(\.\d{1,3})?(px|rem|em|%|vw|vh))$/;
+const PRESET = /^([a-z][a-z0-9-]{0,30}|[1-9]x[sl])$/;
+const COLOR = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\([\d\s.,%/]{1,40}\))$/i;
+const WEIGHTS = ["300", "400", "500", "600", "700", "800", "900"];
+const ALIGNS = ["left", "center", "right", "justify"];
+const BORDER_STYLES = ["solid", "dashed", "dotted"];
+const HIDE = ["desktop", "tablet", "mobile"];
+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 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);
+const oneOf = (list) => (v) => (typeof v === "string" && list.includes(v) ? v : undefined);
+const lineHeight = (v) => {
+    const n = typeof v === "number" ? v : typeof v === "string" && v.trim() !== "" ? Number(v) : NaN;
+    return Number.isFinite(n) && n >= 0.5 && n <= 4 ? Math.round(n * 100) / 100 : undefined;
+};
+function box(v) {
+    if (typeof v === "string")
+        return size(v);
+    if (!isObj(v))
+        return undefined;
+    const out = {};
+    for (const s of SIDES) {
+        const x = size(v[s]);
+        if (x !== undefined)
+            out[s] = x;
+    }
+    return Object.keys(out).length ? out : undefined;
+}
+/** Giá trị theo khổ: nhận cả dạng gọn (một giá trị = base). */
+function responsive(v, fn) {
+    const src = isObj(v) && DEVICES.some((d) => d in v) ? v : { base: v };
+    const out = {};
+    for (const d of DEVICES) {
+        const x = fn(src[d]);
+        if (x !== undefined)
+            out[d] = x;
+    }
+    return Object.keys(out).length ? out : undefined;
+}
+function group(v, fields) {
+    if (!isObj(v))
+        return undefined;
+    const out = {};
+    for (const k of Object.keys(fields)) {
+        const x = fields[k](v[k]);
+        if (x !== undefined)
+            out[k] = x;
+    }
+    return Object.keys(out).length ? out : undefined;
+}
+/** Chuẩn hoá `attrs.style`: giữ đúng thứ tự khoá, bỏ giá trị không hợp lệ. Rỗng → undefined. */
+export function normalizeStyle(v) {
+    if (!isObj(v))
+        return undefined;
+    const out = {};
+    const set = (k, x) => { if (x !== undefined)
+        out[k] = x; };
+    set("padding", responsive(v.padding, box));
+    set("margin", responsive(v.margin, box));
+    set("gap", responsive(v.gap, size));
+    set("width", responsive(v.width, size));
+    set("maxWidth", responsive(v.maxWidth, size));
+    set("minHeight", responsive(v.minHeight, size));
+    set("fontFamily", preset(v.fontFamily));
+    set("fontSize", responsive(v.fontSize, size));
+    set("lineHeight", responsive(v.lineHeight, lineHeight));
+    set("letterSpacing", responsive(v.letterSpacing, size));
+    set("fontWeight", oneOf(WEIGHTS)(typeof v.fontWeight === "number" ? String(v.fontWeight) : v.fontWeight));
+    set("fontStyle", oneOf(FONT_STYLES)(v.fontStyle));
+    set("textDecoration", oneOf(DECORATIONS)(v.textDecoration));
+    set("textTransform", oneOf(TRANSFORMS)(v.textTransform));
+    set("textAlign", responsive(v.textAlign, oneOf(ALIGNS)));
+    set("color", group(v.color, { text: color, background: color }));
+    set("border", group(v.border, { width: size, style: oneOf(BORDER_STYLES), color }));
+    set("radius", size(v.radius));
+    if (Array.isArray(v.hide)) {
+        const h = HIDE.filter((d) => v.hide.includes(d));
+        if (h.length)
+            out.hide = [...h];
+    }
+    return Object.keys(out).length ? out : undefined;
+}
+// ---------------------------------------------------------------------------
+// CSS
+// ---------------------------------------------------------------------------
+const lit = (v) => v === "auto" || v === "0" || LENGTH.test(v);
+const spacing = (v) => (lit(v) ? v : `var(--ecx-spacing-${v})`);
+const fontSize = (v) => (lit(v) ? v : `var(--ecx-font-size-${v})`);
+const colorValue = (v) => (COLOR.test(v) ? v : `var(--ecx-color-${v}, ${v})`);
+function boxDecl(prop, v) {
+    if (typeof v === "string")
+        return [`${prop}:${spacing(v)}`];
+    return SIDES.filter((s) => v[s] !== undefined).map((s) => `${prop}-${s}:${spacing(v[s])}`);
+}
+/** Khai báo CSS cho từng khổ màn hình. */
+function declarations(style) {
+    const out = { base: [], tablet: [], mobile: [] };
+    for (const d of DEVICES) {
+        const p = style.padding?.[d];
+        if (p !== undefined)
+            out[d].push(...boxDecl("padding", p));
+        const m = style.margin?.[d];
+        if (m !== undefined)
+            out[d].push(...boxDecl("margin", m));
+        const g = style.gap?.[d];
+        if (g !== undefined)
+            out[d].push(`gap:${spacing(g)}`);
+        const w = style.width?.[d];
+        if (w !== undefined)
+            out[d].push(`width:${spacing(w)}`);
+        const mw = style.maxWidth?.[d];
+        if (mw !== undefined)
+            out[d].push(`max-width:${spacing(mw)}`);
+        const mh = style.minHeight?.[d];
+        if (mh !== undefined)
+            out[d].push(`min-height:${spacing(mh)}`);
+        const fs = style.fontSize?.[d];
+        if (fs !== undefined)
+            out[d].push(`font-size:${fontSize(fs)}`);
+        const lh = style.lineHeight?.[d];
+        if (lh !== undefined)
+            out[d].push(`line-height:${lh}`);
+        const ls = style.letterSpacing?.[d];
+        if (ls !== undefined)
+            out[d].push(`letter-spacing:${lit(ls) ? ls : `var(--ecx-letter-spacing-${ls})`}`);
+        const ta = style.textAlign?.[d];
+        if (ta !== undefined)
+            out[d].push(`text-align:${ta}`);
+    }
+    if (style.fontFamily)
+        out.base.push(`font-family:var(--ecx-font-family-${style.fontFamily}, inherit)`);
+    if (style.fontWeight)
+        out.base.push(`font-weight:${style.fontWeight}`);
+    if (style.fontStyle)
+        out.base.push(`font-style:${style.fontStyle}`);
+    if (style.textDecoration)
+        out.base.push(`text-decoration:${style.textDecoration}`);
+    if (style.textTransform)
+        out.base.push(`text-transform:${style.textTransform}`);
+    if (style.color?.text)
+        out.base.push(`color:${colorValue(style.color.text)}`);
+    if (style.color?.background)
+        out.base.push(`background:${colorValue(style.color.background)}`);
+    if (style.border?.width || style.border?.style || style.border?.color)
+        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)}`);
+    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. */
+export function spacingValue(v) {
+    const x = size(v);
+    return x === undefined ? undefined : spacing(x);
+}
+/** Màu hợp lệ (hex/rgb/hsl hoặc preset) → giá trị CSS; không hợp lệ → undefined. */
+export function colorCss(v) {
+    const x = color(v);
+    return x === undefined ? undefined : colorValue(x);
+}
+/** Tên class ổn định theo nội dung style (cùng kiểu dáng → cùng class). */
+export function styleClass(style) {
+    let h = 0x811c9dc5;
+    const s = JSON.stringify(style);
+    for (let i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = Math.imul(h, 0x01000193) >>> 0;
+    }
+    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 → "". */
+export function styleCss(style, cls = styleClass(style)) {
+    const sel = `.${cls}.${cls}`;
+    const d = declarations(style);
+    let css = d.base.length ? `${sel}{${d.base.join(";")}}` : "";
+    if (d.tablet.length)
+        css += `@media (max-width:${BREAKPOINTS.tablet}px){${sel}{${d.tablet.join(";")}}}`;
+    if (d.mobile.length)
+        css += `@media (max-width:${BREAKPOINTS.mobile}px){${sel}{${d.mobile.join(";")}}}`;
+    for (const h of style.hide ?? []) {
+        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}}`;
+    }
+    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. */
+export function collectStyles(styles) {
+    const seen = new Map();
+    for (const s of styles) {
+        const cls = styleClass(s);
+        if (!seen.has(cls))
+            seen.set(cls, styleCss(s, cls));
+    }
+    return [...seen.values()].join("");
+}
+// ---------------------------------------------------------------------------
+// Thuộc tính chung của khối (1.10): biến thể kiểu, neo, class riêng
+// ---------------------------------------------------------------------------
+const ANCHOR = /^[A-Za-z][\w-]{0,63}$/;
+const CLASS_TOKEN = /^-?[_a-zA-Z][\w-]{0,40}$/;
+/** Biến thể kiểu (`blockStyle`): tên preset → class `ecx-is-<tên>`. */
+export function normalizeBlockStyleName(v) {
+    return typeof v === "string" && /^[a-z][a-z0-9-]{0,30}$/.test(v) ? v : undefined;
+}
+/** Neo (`anchor`) → id của phần tử. */
+export function normalizeAnchor(v) {
+    return typeof v === "string" && ANCHOR.test(v.trim()) ? v.trim() : undefined;
+}
+/** Class CSS riêng (`className`): tối đa 5 class hợp lệ, cách nhau bởi dấu cách. */
+export function normalizeClassName(v) {
+    if (typeof v !== "string")
+        return undefined;
+    const tokens = v.split(/\s+/).filter(Boolean).filter((t) => CLASS_TOKEN.test(t)).slice(0, 5);
+    return tokens.length ? [...new Set(tokens)].join(" ") : undefined;
+}
+/** Biến thể có sẵn của lõi (CSS trong style.css); theme thêm bằng theme.json › blockStyles. */
+export const CORE_BLOCK_STYLES = {
+    table: ["stripes"],
+    image: ["rounded", "circle"],
+    blockquote: ["plain"],
+    horizontalRule: ["dots", "wide"],
+    button: ["pill"],
+    group: ["card"],
+};
+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);
+/** 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 = {};
+    if (!isObj(v))
+        return out;
+    const pick = (key, fn) => {
+        const src = v[key];
+        if (!isObj(src))
+            return;
+        const r = {};
+        for (const [k, x] of Object.entries(src)) {
+            const value = isObj(x) ? x.value : x;
+            const ok = /^([a-z][a-z0-9-]{0,30}|[1-9]x[sl])$/.test(k) ? fn(value) : undefined;
+            if (ok !== undefined)
+                r[k] = ok;
+        }
+        if (Object.keys(r).length)
+            out[key] = r;
+    };
+    pick("colors", presetColor);
+    pick("fontSizes", presetSize);
+    pick("spacing", presetSize);
+    pick("fonts", presetFont);
+    return out;
+}
+/** Gộp preset theo thứ tự (sau đè trước): theme → bản sửa của quản trị viên. */
+export function mergePresets(...list) {
+    const out = {};
+    for (const p of list.map(normalizePresets))
+        for (const k of Object.keys(p))
+            out[k] = { ...out[k], ...p[k] };
+    return out;
+}
+/** Biến CSS của preset: `--ecx-color-*`, `--ecx-font-size-*`, `--ecx-spacing-*`, `--ecx-font-family-*`. */
+export function presetCss(presets, selector = ":root") {
+    const p = normalizePresets(presets);
+    const decl = [
+        ...Object.entries(p.colors ?? {}).map(([k, v]) => `--ecx-color-${k}:${v}`),
+        ...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}`),
+    ];
+    return decl.length ? `${selector}{${decl.join(";")}}` : "";
+}

package/dist/text.d.ts

@@ -0,0 +1,9 @@
+import type { ContentDoc, RichNode } from "./types.js";
+/** Chữ thuần của một nút (không định dạng). */
+export declare function nodeText(node: RichNode): string;
+/** Chữ thuần của cả bài (tìm kiếm, tóm tắt, đếm từ). Khối HTML bỏ thẻ; khối plugin bỏ qua. */
+export declare function contentText(doc: ContentDoc): string;
+/** Số từ (tách theo khoảng trắng — đúng cho tiếng Việt và tiếng Anh). */
+export declare const wordCount: (doc: ContentDoc) => number;
+/** Duyệt mọi nút soạn thảo của bài (kể cả lồng nhau). Trả false để không đi vào con. */
+export declare function visitNodes(doc: ContentDoc, visit: (node: RichNode, parent: RichNode | null) => void | false): void;

package/dist/text.js

@@ -0,0 +1,30 @@
+const BLOCK_BREAK = new Set(["paragraph", "heading", "listItem", "taskItem", "blockquote", "codeBlock", "tableCell", "tableHeader"]);
+/** Chữ thuần của một nút (không định dạng). */
+export function nodeText(node) {
+    if (node.type === "text")
+        return node.text ?? "";
+    if (node.type === "hardBreak")
+        return "\n";
+    if (node.type === "button")
+        return typeof node.attrs?.text === "string" && node.attrs.text ? node.attrs.text + "\n" : "";
+    return (node.content ?? []).map(nodeText).join("") + (BLOCK_BREAK.has(node.type) ? "\n" : "");
+}
+/** Chữ thuần của cả bài (tìm kiếm, tóm tắt, đếm từ). Khối HTML bỏ thẻ; khối plugin bỏ qua. */
+export function contentText(doc) {
+    return doc.blocks.map((b) => (b.type === "richtext" && b.data ? nodeText(b.data) : b.type === "html" ? String(b.data?.html ?? "").replace(/<[^>]+>/g, " ") : ""))
+        .join("\n").replace(/[ \t]+/g, " ").replace(/\n{3,}/g, "\n\n").trim();
+}
+/** Số từ (tách theo khoảng trắng — đúng cho tiếng Việt và tiếng Anh). */
+export const wordCount = (doc) => contentText(doc).split(/\s+/).filter(Boolean).length;
+/** Duyệt mọi nút soạn thảo của bài (kể cả lồng nhau). Trả false để không đi vào con. */
+export function visitNodes(doc, visit) {
+    const walk = (node, parent) => {
+        if (visit(node, parent) === false)
+            return;
+        for (const c of node.content ?? [])
+            walk(c, node);
+    };
+    for (const b of doc.blocks)
+        if (b.type === "richtext" && b.data)
+            walk(b.data, null);
+}

package/dist/types.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Định dạng nội dung của CMS (phiên bản 1). Đây là chuẩn của CMS — trình soạn (hiện là TipTap/ProseMirror) phải
+ * chuyển sang chuẩn này, website và máy chủ chỉ đọc chuẩn này. Đổi trình soạn không đổi dữ liệu đã lưu.
+ */
+/** Phiên bản định dạng hiện tại. Tăng khi đổi cấu trúc — kèm hàm nâng cấp trong migrate.ts. */
+export declare const CONTENT_VERSION = 1;
+/** Nội dung một bài viết / trang: danh sách khối cấp cao nhất. */
+export interface ContentDoc {
+    version: number;
+    blocks: Block[];
+}
+/**
+ * Khối cấp cao nhất.
+ * - `richtext`: `data` là cây {@link RichNode} gốc `type: "doc"` (nội dung soạn bằng trình soạn).
+ * - `html`: `data.html` là HTML (nội dung nhập từ hệ thống cũ).
+ * - tên khác: khối của plugin, `data` do plugin định nghĩa. Plugin không có/đã tắt → giữ nguyên dữ liệu, website bỏ qua.
+ */
+export interface Block {
+    id?: string;
+    type: string;
+    data: any;
+}
+/** Nút trong nội dung soạn thảo: khối (đoạn, tiêu đề, ảnh…) hoặc chữ (`type: "text"`). */
+export interface RichNode {
+    type: string;
+    attrs?: Record<string, unknown>;
+    content?: RichNode[];
+    /** Chỉ có ở `type: "text"`, không rỗng. */
+    text?: string;
+    /** Định dạng chữ (đậm, liên kết…), chỉ có ở `type: "text"`. */
+    marks?: RichMark[];
+}
+export interface RichMark {
+    type: string;
+    attrs?: Record<string, unknown>;
+}

package/dist/types.js

@@ -0,0 +1,6 @@
+/**
+ * Định dạng nội dung của CMS (phiên bản 1). Đây là chuẩn của CMS — trình soạn (hiện là TipTap/ProseMirror) phải
+ * chuyển sang chuẩn này, website và máy chủ chỉ đọc chuẩn này. Đổi trình soạn không đổi dữ liệu đã lưu.
+ */
+/** Phiên bản định dạng hiện tại. Tăng khi đổi cấu trúc — kèm hàm nâng cấp trong migrate.ts. */
+export const CONTENT_VERSION = 1;

package/dist/url.d.ts

@@ -0,0 +1,7 @@
+/**
+ * URL an toàn cho href/src: http(s), mailto, tel, tương đối (/, #, ?, ./), ảnh data:image/* (không SVG).
+ * Cùng quy tắc với ContentSanitizer.IsSafeUrl của máy chủ.
+ */
+export declare function isSafeUrl(url: unknown): boolean;
+/** URL an toàn hoặc chuỗi thay thế. */
+export declare const safeUrl: (url: unknown, fallback?: string) => string;