@ecomcx/nexus-theme-sdk 0.0.0-stage → 1.24.1

package/dist/plugin-form.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getSite, pluginFetch } from "./api.js";
+import { getT } from "./i18n.js";
+import { PluginFormClient } from "./plugin-form-client.js";
+/**
+ * Form tự sinh cho bảng EF của plugin có [PublicCreate] (form liên hệ, đặt lịch, đăng ký…):
+ *   <PluginForm plugin="lien-he" table="messages" />   — hoặc shortcode [cms-form plugin="lien-he" table="messages"]
+ * Ô nhập, nhãn, ràng buộc lấy từ kiểu dữ liệu C# của plugin; máy chủ kiểm tra lại và giới hạn số lần gửi.
+ * Class CSS: cms-form, cms-form-field, cms-form-{kiểu}, form-error, form-success.
+ */
+export async function PluginForm({ plugin, table, submitLabel, className }) {
+    if (!/^[a-z0-9][a-z0-9-]{1,63}$/.test(plugin) || !/^[a-z][a-z0-9_]*$/.test(table))
+        return null;
+    const site = await getSite();
+    const form = await pluginFetch(plugin, `/data/${table}/form`, { query: { lang: site.locale ?? site.language } })
+        .catch(() => null);
+    if (!form)
+        return null;
+    const t = await getT();
+    return _jsx(PluginFormClient, { plugin: plugin, table: table, fields: form.fields, successMessage: form.successMessage, className: className, labels: { submit: submitLabel ?? t("form.submit"), sending: t("form.sending"), error: t("form.error") } });
+}
+/** Shortcode có sẵn: [cms-form plugin="lien-he" table="messages" submit="Gửi liên hệ" class="…"]. */
+export function CmsFormShortcode({ attrs }) {
+    return _jsx(PluginForm, { plugin: attrs.plugin ?? "", table: attrs.table ?? "", submitLabel: attrs.submit, className: attrs.class });
+}

package/dist/preferences.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tuỳ chọn hiển thị của người đọc (sáng/tối, cỡ chữ…). Lưu ở cookie "cms-pref-{key}" để server render đúng ngay lần tải đầu.
+ * Theme/plugin dùng API này thay vì đọc/ghi document.cookie (bị bộ quét bảo mật chặn).
+ * Giới hạn: key [a-z0-9-] tối đa 32 ký tự; value [a-zA-Z0-9_-] tối đa 64 ký tự — không thể dùng để lưu dữ liệu nhạy cảm.
+ */
+export declare const PREF_PREFIX = "cms-pref-";
+export declare const isValidPreference: (key: string, value: string) => boolean;
+/** Đọc tuỳ chọn ở Server Component (layout/template). */
+export declare function getPreference(key: string): Promise<string | undefined>;

package/dist/preferences.js

@@ -0,0 +1,17 @@
+/**
+ * Tuỳ chọn hiển thị của người đọc (sáng/tối, cỡ chữ…). Lưu ở cookie "cms-pref-{key}" để server render đúng ngay lần tải đầu.
+ * Theme/plugin dùng API này thay vì đọc/ghi document.cookie (bị bộ quét bảo mật chặn).
+ * Giới hạn: key [a-z0-9-] tối đa 32 ký tự; value [a-zA-Z0-9_-] tối đa 64 ký tự — không thể dùng để lưu dữ liệu nhạy cảm.
+ */
+export const PREF_PREFIX = "cms-pref-";
+const KEY = /^[a-z0-9-]{1,32}$/;
+const VALUE = /^[A-Za-z0-9_-]{0,64}$/;
+export const isValidPreference = (key, value) => KEY.test(key) && VALUE.test(value);
+/** Đọc tuỳ chọn ở Server Component (layout/template). */
+export async function getPreference(key) {
+    if (!KEY.test(key))
+        return undefined;
+    const { cookies } = await import("next/headers");
+    const v = (await cookies()).get(PREF_PREFIX + key)?.value;
+    return v !== undefined && VALUE.test(v) ? v : undefined;
+}

package/dist/rich.d.ts

@@ -0,0 +1,66 @@
+import { type ComponentType, type ReactNode } from "react";
+import { type Block, type BlockDefinition, type ContentDoc, type RichNode } from "@ecomcx/nexus-content";
+import type { BlockProps, Post, ResolveResult, ShortcodeProps, Site } from "./types.js";
+/**
+ * Vẽ nội dung (định dạng của CMS — @ecomcx/nexus-content) thành React, không phụ thuộc trình soạn.
+ * Hàm thuần: shortcode/khối của plugin tra qua `resolve`, bọc lỗi qua `boundary` → test được không cần Next/runtime.
+ */
+export interface RenderContext {
+    site: Site;
+    post?: Post | null;
+    resolve: {
+        shortcode(name: string): Promise<ComponentType<ShortcodeProps> | null>;
+        /** Khối của plugin: khối cấp cao nhất và nút trong nội dung soạn thảo dùng chung một renderer (definePlugin → blocks). */
+        block(type: string): Promise<ComponentType<BlockProps> | null>;
+    };
+    /** Bọc component của plugin (lỗi chỉ ẩn phần đó). Mặc định: không bọc. */
+    boundary?(name: string, key: string, el: ReactNode): ReactNode;
+    /** Khối của plugin (defineBlock) — chuẩn hoá thuộc tính + nâng phiên bản khối lưu bằng bản cũ. */
+    blocks?: readonly BlockDefinition[];
+    /** Chữ giao diện (vd "Tải tệp", "Mục lục"). */
+    labels?: {
+        download?: string;
+        toc?: string;
+    };
+    /** Ngữ cảnh template: trang đang xem (khối động postTitle, postContent, query… đọc từ đây). Không có = đang vẽ nội dung bài. */
+    data?: ResolveResult;
+    /** Vẽ khối động (@ecomcx/nexus-content DYNAMIC_NODES). Không có → khối động bị bỏ qua. */
+    dynamic?(node: RenderNode, key: string, ctx: RenderContext, children: (ctx: RenderContext, nodes?: RenderNode[]) => Promise<ReactNode[]>): Promise<ReactNode>;
+    /** Bài của vòng lặp `query` gần nhất (+ dữ liệu phân trang khi dùng danh sách của trang). */
+    query?: {
+        posts: Post[];
+        data?: ResolveResult;
+    };
+    /** Nội dung template part theo slug (khối templatePart). */
+    parts?(slug: string): Promise<ContentDoc | null>;
+    partDepth?: number;
+    /** Nội dung mẫu đồng bộ theo id (khối syncedPattern). */
+    pattern?(ref: number): Promise<ContentDoc | null>;
+    /** Plugin thay vùng (definePlugin → regions): nhận bản template part đã vẽ, trả bản thay thế. Không có = giữ nguyên. */
+    region?(name: string, fallback: ReactNode): Promise<ReactNode>;
+    /** CSS kiểu dáng khối (attrs.style) gom theo class — renderContent ngoài cùng tạo và xuất thành một thẻ <style>. */
+    styles?: Map<string, string>;
+    /** Đang vẽ bên trong nhóm nút (`buttons`): nút không bọc thêm đoạn văn. */
+    inButtons?: boolean;
+    /** Tiêu đề của bài (khối mục lục) — renderContent ngoài cùng tính. */
+    headings?: Array<{
+        level: number;
+        id: string;
+        text: string;
+    }>;
+}
+type Node = Omit<RichNode, "attrs" | "content" | "marks"> & {
+    attrs?: Record<string, any>;
+    content?: Node[];
+    marks?: Array<{
+        type: string;
+        attrs?: Record<string, any>;
+    }>;
+};
+export type RenderNode = Node;
+/**
+ * Vẽ nội dung bài viết: chuẩn hoá theo định dạng của CMS (bài lưu bằng bản cũ được nâng cấp, cấu trúc hỏng bị bỏ),
+ * rồi vẽ từng khối. Khối/nút của plugin không có renderer (plugin tắt) → bỏ qua, dữ liệu vẫn nguyên trong DB.
+ */
+export declare function renderContent(content: ContentDoc | unknown, ctx: RenderContext, transform?: (blocks: Block[]) => Block[] | Promise<Block[]>): Promise<ReactNode[]>;
+export {};

package/dist/rich.js

@@ -0,0 +1,388 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, cloneElement, isValidElement } from "react";
+import { DYNAMIC_NODES, colorCss, embedInfo, normalizeContent, safeUrl, spacingValue, styleClass, styleCss } from "@ecomcx/nexus-content";
+import { cx } from "./utils.js";
+import { SOCIAL_ICONS } from "./social-icons.js";
+const DYNAMIC = new Set(DYNAMIC_NODES);
+const SHORTCODE = /^\s*\[([a-z0-9_-]+)((?:\s+[a-z0-9_-]+=(?:"[^"]*"|'[^']*'|[^\s\]]+))*)\s*\]\s*$/i;
+const SHORTCODE_INLINE = /\[([a-z0-9_-]+)((?:\s+[a-z0-9_-]+=(?:"[^"]*"|'[^']*'|[^\s\]]+))*)\s*\]/gi;
+function parseAttrs(raw) {
+    const attrs = {};
+    for (const m of raw.matchAll(/([a-z0-9_-]+)=(?:"([^"]*)"|'([^']*)'|([^\s\]]+))/gi))
+        attrs[m[1]] = m[2] ?? m[3] ?? m[4] ?? "";
+    return attrs;
+}
+const SOCIAL = {
+    facebook: "Facebook", x: "X", twitter: "X", instagram: "Instagram", youtube: "YouTube", tiktok: "TikTok", linkedin: "LinkedIn", zalo: "Zalo",
+    github: "GitHub", threads: "Threads", pinterest: "Pinterest", telegram: "Telegram", messenger: "Messenger", email: "Email", website: "Website",
+};
+/** id của tiêu đề (neo cho mục lục): thuộc tính id, không thì chữ không dấu nối bằng gạch ngang. */
+function headingId(node) {
+    return node.attrs?.anchor ?? node.attrs?.id ?? plainText(node).toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/đ/g, "d").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+function collectHeadings(blocks) {
+    const out = [];
+    const walk = (n) => {
+        if (n.type === "heading")
+            out.push({ level: Math.min(6, Math.max(1, Number(n.attrs?.level) || 2)), id: headingId(n), text: plainText(n) });
+        else
+            for (const c of n.content ?? [])
+                walk(c);
+    };
+    for (const b of blocks)
+        if (b.type === "richtext" && b.data)
+            walk(b.data);
+    return out;
+}
+function plainText(node) {
+    if (node.type === "text")
+        return node.text ?? "";
+    return (node.content ?? []).map(plainText).join("");
+}
+/** Màu do người viết chọn (nhóm, chữ): chỉ nhận dạng màu CSS, không nhận chuỗi tuỳ ý (url(), dấu ;…). */
+const COLOR = /^(#[0-9a-f]{3,8}|(?:rgb|hsl)a?\([\d\s.,%deg/]+\)|[a-z]{3,20}|var\(--[\w-]+\))$/i;
+const safeColor = (v) => (typeof v === "string" && COLOR.test(v.trim()) ? v.trim() : undefined);
+const PADDING = { none: "0", small: "0.75rem", medium: "1.5rem", large: "3rem" };
+const TONES = { info: "#2563eb", success: "#16a34a", warning: "#d97706", danger: "#dc2626" };
+function alignStyle(attrs) {
+    return attrs?.textAlign && attrs.textAlign !== "left" ? { textAlign: attrs.textAlign } : undefined;
+}
+function renderMarks(text, marks, key) {
+    let out = text;
+    for (const [i, m] of (marks ?? []).entries()) {
+        const k = `${key}-m${i}`;
+        switch (m.type) {
+            case "bold":
+                out = _jsx("strong", { children: out }, k);
+                break;
+            case "italic":
+                out = _jsx("em", { children: out }, k);
+                break;
+            case "underline":
+                out = _jsx("u", { children: out }, k);
+                break;
+            case "strike":
+                out = _jsx("s", { children: out }, k);
+                break;
+            case "code":
+                out = _jsx("code", { children: out }, k);
+                break;
+            case "subscript":
+                out = _jsx("sub", { children: out }, k);
+                break;
+            case "superscript":
+                out = _jsx("sup", { children: out }, k);
+                break;
+            case "highlight":
+                out = _jsx("mark", { style: m.attrs?.color ? { background: m.attrs.color } : undefined, children: out }, k);
+                break;
+            case "textStyle":
+                out = m.attrs?.color ? _jsx("span", { style: { color: m.attrs.color }, children: out }, k) : out;
+                break;
+            case "link": {
+                const target = m.attrs?.target;
+                // rel do người viết/plugin đặt (nofollow, sponsored, ugc…) + luôn noopener khi mở tab mới
+                const rel = new Set(String(m.attrs?.rel ?? "").toLowerCase().split(/\s+/).filter((x) => /^[a-z-]+$/.test(x)));
+                if (target === "_blank") {
+                    rel.add("noopener");
+                    rel.add("noreferrer");
+                }
+                out = _jsx("a", { href: safeUrl(m.attrs?.href), target: target ?? undefined, rel: rel.size ? [...rel].join(" ") : undefined, children: out }, k);
+                break;
+            }
+        }
+    }
+    return out;
+}
+const SIDES = ["", "Top", "Right", "Bottom", "Left"];
+/** Thuộc tính inline của renderer bị kiểu dáng khối thay thế (inline luôn thắng class → phải bỏ). */
+function overridden(style) {
+    const keys = [];
+    if (style.padding)
+        keys.push(...SIDES.map((x) => `padding${x}`));
+    if (style.margin)
+        keys.push(...SIDES.map((x) => `margin${x}`), "marginLeft", "marginRight");
+    if (style.gap)
+        keys.push("gap");
+    if (style.width)
+        keys.push("width");
+    if (style.maxWidth)
+        keys.push("maxWidth");
+    if (style.fontSize)
+        keys.push("fontSize");
+    if (style.lineHeight)
+        keys.push("lineHeight");
+    if (style.fontWeight)
+        keys.push("fontWeight");
+    if (style.textAlign)
+        keys.push("textAlign");
+    if (style.color?.text)
+        keys.push("color");
+    if (style.color?.background)
+        keys.push("background", "backgroundColor");
+    if (style.border)
+        keys.push(...SIDES.map((x) => `border${x}`));
+    if (style.radius)
+        keys.push("borderRadius");
+    return keys;
+}
+/**
+ * Gắn kiểu dáng (class `ecx-s-…`), biến thể (`ecx-is-…`), class riêng và neo (id) của khối vào phần tử đã vẽ
+ * (không có phần tử bọc ngoài → thêm div). Giá trị đã được normalizeContent kiểm.
+ */
+function decorate(el, a, key, ctx) {
+    if (el == null || el === false)
+        return el;
+    const style = a.style && typeof a.style === "object" ? a.style : null;
+    const cls = style ? styleClass(style) : null;
+    if (style && cls && ctx.styles && !ctx.styles.has(cls))
+        ctx.styles.set(cls, styleCss(style, cls));
+    const extra = cx(cls, a.blockStyle && `ecx-is-${a.blockStyle}`, a.className);
+    if (isValidElement(el) && el.type !== Fragment && typeof el.type === "string") {
+        const e = el;
+        let inline = e.props.style;
+        if (inline && style) {
+            const drop = new Set(overridden(style));
+            inline = Object.fromEntries(Object.entries(inline).filter(([k]) => !drop.has(k)));
+        }
+        return cloneElement(e, { className: cx(e.props.className, extra) || undefined, style: inline, id: a.anchor ?? e.props.id });
+    }
+    return _jsx("div", { className: extra || undefined, id: a.anchor, children: el }, key);
+}
+async function renderNode(node, key, ctx) {
+    const el = await renderNodeInner(node, key, ctx);
+    const a = node.attrs;
+    return a && (a.style || a.blockStyle || a.className || a.anchor) ? decorate(el, a, key, ctx) : el;
+}
+async function renderNodeInner(node, key, ctx) {
+    const children = async () => Promise.all((node.content ?? []).map((c, i) => renderNode(c, `${key}-${i}`, ctx)));
+    const a = node.attrs ?? {};
+    switch (node.type) {
+        case "doc": return _jsx(Fragment, { children: await children() }, key);
+        case "text": return renderMarks(node.text ?? "", node.marks, key);
+        case "paragraph": {
+            // Đoạn văn chỉ chứa shortcode → render component của plugin.
+            const text = plainText(node);
+            const sc = SHORTCODE.exec(text);
+            if (sc) {
+                const Comp = await ctx.resolve.shortcode(sc[1]);
+                if (Comp)
+                    return wrap(ctx, `Shortcode [${sc[1]}]`, key, _jsx(Comp, { attrs: parseAttrs(sc[2] ?? ""), site: ctx.site, post: ctx.post }));
+                // Shortcode của plugin chưa cài/đã tắt: ẩn với người đọc thay vì hiện mã thô.
+                console.warn(`[cms] Shortcode [${sc[1]}] không có plugin nào xử lý — đã ẩn khỏi trang`);
+                return null;
+            }
+            return _jsx("p", { style: alignStyle(a), children: await children() }, key);
+        }
+        case "heading": {
+            const level = Math.min(6, Math.max(1, Number(a.level) || 2));
+            const Tag = `h${level}`;
+            const id = headingId(node);
+            return _jsx(Tag, { id: id || undefined, style: alignStyle(a), children: await children() }, key);
+        }
+        case "bulletList": return _jsx("ul", { children: await children() }, key);
+        case "orderedList": return _jsx("ol", { start: a.start && a.start !== 1 ? a.start : undefined, children: await children() }, key);
+        case "listItem": return _jsx("li", { children: await children() }, key);
+        case "taskList": return _jsx("ul", { className: "ecx-task-list task-list", children: await children() }, key);
+        case "taskItem": return _jsxs("li", { className: "ecx-task-item task-item", children: [_jsx("input", { type: "checkbox", checked: !!a.checked, readOnly: true }), " ", await children()] }, key);
+        case "blockquote": return _jsx("blockquote", { children: await children() }, key);
+        case "codeBlock": return _jsx("pre", { children: _jsx("code", { className: a.language ? `language-${a.language}` : undefined, children: plainText(node) }) }, key);
+        case "hardBreak": return _jsx("br", {}, key);
+        case "horizontalRule": return _jsx("hr", {}, key);
+        case "image": {
+            // Ảnh chèn từ thư viện mang sẵn srcset (JPEG + WebP) và kích thước → responsive, không nhảy layout
+            // Bề rộng hiển thị = cỡ người viết kéo trong trình soạn → trình duyệt chọn file vừa đúng
+            const sizes = a.width ? `(max-width: ${a.width}px) 100vw, ${a.width}px` : (a.sizes || "(max-width: 1024px) 100vw, 1024px");
+            const img = _jsx("img", { src: safeUrl(a.src, ""), srcSet: a.srcset || undefined, sizes: a.srcset ? sizes : undefined, alt: a.alt ?? "", title: a.title ?? undefined, width: a.width ?? undefined, height: a.height ?? undefined, loading: "lazy", decoding: "async" });
+            const pic = a.webpSrcset ? _jsxs("picture", { children: [_jsx("source", { type: "image/webp", srcSet: a.webpSrcset, sizes: sizes }), img] }) : img;
+            const cls = cx("ecx-image cms-image", a.align && `ecx-align-${a.align} align${a.align}`, a.mediaId && `ecx-image-${a.mediaId} cms-image-${a.mediaId}`);
+            return a.caption || a.align ? _jsxs("figure", { className: cls, children: [pic, a.caption && _jsx("figcaption", { children: a.caption })] }, key) : _jsx(Fragment, { children: pic }, key);
+        }
+        case "gallery": {
+            const items = (a.images ?? []);
+            const cols = Math.min(6, Math.max(1, Number(a.columns) || 3));
+            return (_jsxs("figure", { className: cx("ecx-gallery cms-gallery", `ecx-gallery-columns-${cols} columns-${cols}`), style: { display: "grid", gap: 8, gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }, children: [items.map((im, i) => {
+                        const el = _jsx("img", { src: safeUrl(im.src, ""), srcSet: im.srcset || undefined, sizes: `(max-width: 768px) 50vw, ${Math.round(100 / cols)}vw`, alt: im.alt ?? "", width: im.width, height: im.height, loading: "lazy", decoding: "async", style: { width: "100%", height: "100%", objectFit: "cover", aspectRatio: "1" } });
+                        const pic = im.webpSrcset ? _jsxs("picture", { children: [_jsx("source", { type: "image/webp", srcSet: im.webpSrcset, sizes: `(max-width: 768px) 50vw, ${Math.round(100 / cols)}vw` }), el] }) : el;
+                        return _jsxs("figure", { className: "ecx-gallery-item cms-gallery-item", style: { margin: 0 }, children: [im.full ? _jsx("a", { href: safeUrl(im.full), children: pic }) : pic, im.caption && _jsx("figcaption", { children: im.caption })] }, i);
+                    }), a.caption && _jsx("figcaption", { className: "ecx-gallery-caption cms-gallery-caption", style: { gridColumn: "1 / -1" }, children: a.caption })] }, key));
+        }
+        case "video":
+            return _jsxs("figure", { className: "ecx-video cms-video", children: [_jsx("video", { src: safeUrl(a.src, ""), poster: a.poster ? safeUrl(a.poster, "") : undefined, controls: true, preload: "metadata", playsInline: true, style: { width: "100%", height: "auto" } }), a.caption && _jsx("figcaption", { children: a.caption })] }, key);
+        case "audio":
+            return _jsxs("figure", { className: "ecx-audio cms-audio", children: [_jsx("audio", { src: safeUrl(a.src, ""), controls: true, preload: "metadata", style: { width: "100%" } }), a.caption && _jsx("figcaption", { children: a.caption })] }, key);
+        case "file": {
+            const isPdf = String(a.mime ?? "").includes("pdf") || /\.pdf($|\?)/i.test(String(a.src ?? ""));
+            return (_jsxs("div", { className: "ecx-file cms-file", children: [isPdf && a.embed !== false && _jsx("object", { data: safeUrl(a.src, ""), type: "application/pdf", style: { width: "100%", height: 600 }, "aria-label": a.name, children: _jsx("a", { href: safeUrl(a.src), children: a.name }) }), _jsx("a", { className: "ecx-file-link cms-file-link", href: safeUrl(a.src), download: a.download ? "" : undefined, target: "_blank", rel: "noopener", children: a.name || ctx.labels?.download || "Download" })] }, key));
+        }
+        case "table": {
+            // Hàng đầu toàn ô tiêu đề → <thead>
+            const rows = await children();
+            const head = node.content?.[0]?.content?.length && node.content[0].content.every((c) => c.type === "tableHeader");
+            // Hàng cuối là chân bảng (attrs.footer) → <tfoot>
+            const foot = a.footer === true && rows.length > (head ? 2 : 1);
+            const body = rows.slice(head ? 1 : 0, foot ? -1 : undefined);
+            return _jsx("div", { className: "ecx-table table-wrap", children: _jsxs("table", { className: a.fixed ? "is-fixed" : undefined, children: [head && _jsx("thead", { children: rows[0] }), _jsx("tbody", { children: body }), foot && _jsx("tfoot", { children: rows.at(-1) })] }) }, key);
+        }
+        case "tableRow": return _jsx("tr", { children: await children() }, key);
+        case "tableHeader": return _jsx("th", { colSpan: a.colspan > 1 ? a.colspan : undefined, rowSpan: a.rowspan > 1 ? a.rowspan : undefined, children: await children() }, key);
+        case "tableCell": return _jsx("td", { colSpan: a.colspan > 1 ? a.colspan : undefined, rowSpan: a.rowspan > 1 ? a.rowspan : undefined, children: await children() }, key);
+        case "youtube": {
+            const m = String(a.src ?? "").match(/(?:v=|youtu\.be\/|embed\/)([\w-]{11})/);
+            const start = Number(a.start) > 0 ? `?start=${Math.floor(Number(a.start))}` : "";
+            return m ? _jsx("div", { className: "ecx-youtube embed", children: _jsx("iframe", { src: `https://www.youtube-nocookie.com/embed/${m[1]}${start}`, allowFullScreen: true, loading: "lazy", title: "YouTube" }) }, key) : null;
+        }
+        // Bố cục (@ecomcx/nexus-content 1.2). Cấu trúc dùng style trực tiếp → mọi theme hiển thị đúng; class `ecx-*` để theme tạo kiểu thêm (`cms-*` giữ tới 2.0).
+        case "columns": {
+            // Cột co giãn theo tỉ lệ độ rộng; màn hẹp (mỗi cột < 14rem) tự xuống dòng thành một cột — không cần CSS của theme
+            const stack = a.stack !== false;
+            const align = a.verticalAlign === "center" ? "center" : a.verticalAlign === "bottom" ? "flex-end" : "flex-start";
+            const cols = await Promise.all((node.content ?? []).map(async (c, i) => {
+                const w = Number(c.attrs?.width) > 0 ? Number(c.attrs?.width) : 1;
+                const inner = await Promise.all((c.content ?? []).map((cc, j) => renderNode(cc, `${key}-${i}-${j}`, ctx)));
+                return _jsx("div", { className: "ecx-column cms-column", style: { flex: `${w} 1 0`, minWidth: stack ? "min(100%, 14rem)" : 0 }, children: inner }, `${key}-${i}`);
+            }));
+            return _jsx("div", { className: cx("ecx-columns cms-columns", a.verticalAlign && `ecx-columns-${a.verticalAlign} cms-columns-${a.verticalAlign}`), style: { display: "flex", flexWrap: stack ? "wrap" : "nowrap", gap: "1.5rem", alignItems: align }, children: cols }, key);
+        }
+        case "column": return _jsx("div", { className: "ecx-column cms-column", children: await children() }, key);
+        case "group": {
+            const bg = safeColor(a.background), fg = safeColor(a.textColor);
+            const pad = PADDING[a.padding] ?? (bg ? PADDING.medium : undefined);
+            return _jsx("div", { className: cx("ecx-group cms-group", a.padding && `ecx-group-${a.padding} cms-group-${a.padding}`), style: { background: bg, color: fg, padding: pad, borderRadius: bg ? 12 : undefined }, children: await children() }, key);
+        }
+        case "callout": {
+            const tone = TONES[a.tone] ? a.tone : "info";
+            return (_jsxs("div", { role: "note", className: cx("ecx-callout cms-callout", `ecx-callout-${tone} cms-callout-${tone}`), style: { borderLeft: `4px solid ${TONES[tone]}`, background: `color-mix(in srgb, ${TONES[tone]} 8%, transparent)`, padding: "0.75rem 1rem", borderRadius: 8 }, children: [a.title && _jsx("p", { className: "ecx-callout-title cms-callout-title", style: { margin: 0, fontWeight: 600 }, children: a.title }), await children()] }, key));
+        }
+        case "button": {
+            if (!a.text)
+                return null;
+            const variant = a.variant === "secondary" || a.variant === "outline" ? a.variant : "primary";
+            const target = a.target === "_blank" ? "_blank" : undefined;
+            const rel = new Set(String(a.rel ?? "").toLowerCase().split(/\s+/).filter((x) => /^[a-z-]+$/.test(x)));
+            if (target) {
+                rel.add("noopener");
+                rel.add("noreferrer");
+            }
+            const look = variant === "outline"
+                ? { border: "1px solid var(--ecx-button-bg, var(--cms-button-bg, var(--primary, currentColor)))", color: "var(--ecx-button-bg, var(--cms-button-bg, var(--primary, inherit)))" }
+                : variant === "secondary"
+                    ? { background: "var(--ecx-button-secondary-bg, var(--cms-button-secondary-bg, rgba(127,127,127,.15)))", color: "inherit" }
+                    : { background: "var(--ecx-button-bg, var(--cms-button-bg, var(--primary, #18181b)))", color: "var(--ecx-button-fg, var(--cms-button-fg, #fff))" };
+            const link = (_jsx("a", { className: cx("ecx-button cms-button", `ecx-button-${variant} cms-button-${variant}`), href: safeUrl(a.href), target: target, rel: rel.size ? [...rel].join(" ") : undefined, style: { display: "inline-block", padding: "0.6em 1.2em", borderRadius: 8, textDecoration: "none", fontWeight: 600, lineHeight: 1.2, ...look }, children: a.text }, ctx.inButtons ? key : undefined));
+            if (ctx.inButtons)
+                return link;
+            return (_jsx("p", { className: cx("ecx-buttons cms-buttons", a.align && `ecx-buttons-${a.align} cms-buttons-${a.align}`), style: a.align ? { textAlign: a.align } : undefined, children: link }, key));
+        }
+        // Bộ khối cơ bản (@ecomcx/nexus-content 1.9)
+        case "spacer":
+            return _jsx("div", { className: "ecx-spacer", style: { height: spacingValue(a.height ?? "lg") ?? "1.5rem" }, "aria-hidden": "true" }, key);
+        case "buttons": {
+            const items = await Promise.all((node.content ?? []).map((c, i) => renderNode(c, `${key}-${i}`, { ...ctx, inButtons: true })));
+            return _jsx("div", { className: cx("ecx-buttons-group", a.align && `is-${a.align}`), children: items }, key);
+        }
+        case "cover": {
+            const src = a.src ? safeUrl(a.src, "") : "";
+            const overlay = colorCss(a.overlay) ?? (src ? "#000" : undefined);
+            return (_jsxs("div", { className: cx("ecx-cover", a.contentAlign && a.contentAlign !== "center" && `is-${a.contentAlign}`, a.fixed && src && "is-fixed"), style: { minHeight: spacingValue(a.minHeight ?? "400px"), backgroundImage: a.fixed && src ? `url("${src.replace(/["\\()]/g, encodeURIComponent)}")` : undefined }, children: [src && !a.fixed && _jsx("img", { className: "ecx-cover-img", src: src, alt: a.alt ?? "", loading: "lazy", decoding: "async" }), overlay && _jsx("span", { className: "ecx-cover-overlay", "aria-hidden": "true", style: { background: overlay, opacity: Math.min(100, Math.max(0, Number(a.opacity ?? 50))) / 100 } }), _jsx("div", { className: "ecx-cover-inner", children: await children() })] }, key));
+        }
+        case "mediaText": {
+            const width = Math.min(80, Math.max(20, Number(a.width) || 50));
+            return (_jsxs("div", { className: cx("ecx-media-text", a.position === "right" && "is-right", a.verticalAlign && a.verticalAlign !== "center" && `is-${a.verticalAlign}`, a.stack !== false && "is-stack"), style: { ["--ecx-media-width"]: `${width}%` }, children: [_jsx("figure", { className: "ecx-media-text-media", style: { margin: 0 }, children: a.src && _jsx("img", { src: safeUrl(a.src, ""), alt: a.alt ?? "", loading: "lazy", decoding: "async" }) }), _jsx("div", { className: "ecx-media-text-content", children: await children() })] }, key));
+        }
+        case "pullquote":
+            return _jsxs("figure", { className: "ecx-pullquote", children: [_jsx("blockquote", { children: _jsx("p", { children: await children() }) }), a.citation && _jsx("figcaption", { children: a.citation })] }, key);
+        case "details":
+            return _jsxs("details", { className: "ecx-details", open: a.open === true || undefined, children: [_jsx("summary", { children: a.summary || "…" }), await children()] }, key);
+        case "customHtml":
+            // Máy chủ đã lọc HTML khi người soạn thiếu quyền unfiltered_html (ContentSanitizer)
+            return a.html ? _jsx("div", { className: "ecx-html", dangerouslySetInnerHTML: { __html: String(a.html) } }, key) : null;
+        case "socialLinks": {
+            const links = (Array.isArray(a.links) ? a.links : []).filter((l) => l && typeof l.url === "string" && typeof l.service === "string" && /^[a-z0-9-]{1,30}$/.test(l.service));
+            if (!links.length)
+                return null;
+            return (_jsx("ul", { className: cx("ecx-social", `is-${a.size ?? "medium"}`, a.align && `is-${a.align}`, a.showLabels && "has-labels"), children: links.map((l, i) => {
+                    const name = l.label || SOCIAL[l.service] || l.service;
+                    return (_jsx("li", { children: _jsxs("a", { className: `ecx-social-${l.service}`, href: safeUrl(l.url), target: "_blank", rel: "noopener noreferrer me", "aria-label": a.showLabels ? undefined : name, title: name, children: [_jsx("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: SOCIAL_ICONS[l.service] ?? SOCIAL_ICONS.website, fillRule: SOCIAL_ICONS[l.service] && !["email", "website", "linkedin"].includes(l.service) ? undefined : "evenodd" }) }), a.showLabels && _jsx("span", { children: name })] }) }, i));
+                }) }, key));
+        }
+        case "tableOfContents": {
+            const max = Math.min(4, Math.max(2, Number(a.maxLevel) || 3));
+            const items = (ctx.headings ?? []).filter((h) => h.level >= 2 && h.level <= max && h.id);
+            if (!items.length)
+                return null;
+            const title = a.title || ctx.labels?.toc || "Contents";
+            return (_jsxs("nav", { className: "ecx-toc", "aria-label": title, children: [_jsx("p", { className: "ecx-toc-title", children: title }), _jsx("ol", { children: items.map((h, i) => _jsx("li", { className: `ecx-toc-l${h.level}`, style: h.level > 2 ? { marginLeft: `${h.level - 2}em` } : undefined, children: _jsx("a", { href: `#${h.id}`, children: h.text }) }, i)) })] }, key));
+        }
+        case "preformatted":
+            return _jsx("pre", { className: "ecx-pre", children: await children() }, key);
+        case "embed": {
+            // Khung nhúng chỉ cho nhà cung cấp đã biết; địa chỉ khung do embedInfo dựng → không nhúng được trang tuỳ ý
+            const info = embedInfo(a.url);
+            if (!info)
+                return a.url ? _jsx("p", { className: "ecx-embed-link cms-embed-link", children: _jsx("a", { href: safeUrl(a.url), target: "_blank", rel: "noopener noreferrer", children: a.caption || a.url }) }, key) : null;
+            const box = info.aspect ? { position: "relative", aspectRatio: String(info.aspect) } : { position: "relative", height: info.height };
+            return (_jsxs("figure", { className: cx("ecx-embed cms-embed", `ecx-embed-${info.provider} cms-embed-${info.provider}`), style: { maxWidth: info.maxWidth, marginLeft: info.maxWidth ? "auto" : undefined, marginRight: info.maxWidth ? "auto" : undefined }, children: [_jsx("div", { style: box, children: _jsx("iframe", { src: info.src, title: a.caption || info.title, loading: "lazy", allowFullScreen: true, referrerPolicy: "strict-origin-when-cross-origin", allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture", style: { position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, borderRadius: 8 } }) }), a.caption && _jsx("figcaption", { children: a.caption })] }, key));
+        }
+        default: {
+            if (DYNAMIC.has(node.type))
+                return ctx.dynamic ? ctx.dynamic(node, key, ctx, (c, nodes = node.content ?? []) => Promise.all(nodes.map((n, i) => renderNode(n, `${key}-${i}`, c)))) : null;
+            // Nút của plugin trong nội dung soạn thảo (defineBlock) — cùng renderer với khối cấp cao nhất: definePlugin({ blocks })
+            const Comp = await ctx.resolve.block(node.type);
+            const inner = node.content ? await children() : null;
+            if (Comp) {
+                const block = { type: node.type, data: a };
+                return wrap(ctx, `Block ${node.type}`, key, _jsx(Comp, { block: block, data: a, site: ctx.site, post: ctx.post, children: inner }));
+            }
+            // Plugin đã tắt/chưa cài: vẫn hiện phần chữ bên trong (nếu có), không để lại khung rỗng
+            return inner ? _jsx(Fragment, { children: inner }, key) : null;
+        }
+    }
+}
+/** HTML (vd nội dung nhập từ hệ thống cũ): thay shortcode đứng riêng bằng component. */
+async function renderHtml(html, key, ctx) {
+    const parts = [];
+    let last = 0;
+    let i = 0;
+    for (const m of html.matchAll(SHORTCODE_INLINE)) {
+        const Comp = await ctx.resolve.shortcode(m[1]);
+        if (!Comp)
+            continue;
+        if (m.index > last)
+            parts.push(_jsx("div", { dangerouslySetInnerHTML: { __html: html.slice(last, m.index) } }, `${key}-h${i++}`));
+        parts.push(wrap(ctx, `Shortcode [${m[1]}]`, `${key}-s${i++}`, _jsx(Comp, { attrs: parseAttrs(m[2] ?? ""), site: ctx.site, post: ctx.post })));
+        last = m.index + m[0].length;
+    }
+    if (last < html.length)
+        parts.push(_jsx("div", { dangerouslySetInnerHTML: { __html: html.slice(last) } }, `${key}-h${i++}`));
+    return _jsx(Fragment, { children: parts }, key);
+}
+async function renderBlock(block, key, ctx) {
+    switch (block.type) {
+        case "richtext": return block.data ? await renderNode(block.data, key, ctx) : null;
+        case "html": return await renderHtml(String(block.data?.html ?? ""), key, ctx);
+        default: {
+            const Comp = await ctx.resolve.block(block.type);
+            return Comp ? wrap(ctx, `Block ${block.type}`, key, _jsx(Comp, { block: block, data: block.data, site: ctx.site, post: ctx.post })) : null;
+        }
+    }
+}
+function wrap(ctx, name, key, el) {
+    return ctx.boundary ? ctx.boundary(name, key, el) : _jsx(Fragment, { children: el }, key);
+}
+/**
+ * Vẽ nội dung bài viết: chuẩn hoá theo định dạng của CMS (bài lưu bằng bản cũ được nâng cấp, cấu trúc hỏng bị bỏ),
+ * rồi vẽ từng khối. Khối/nút của plugin không có renderer (plugin tắt) → bỏ qua, dữ liệu vẫn nguyên trong DB.
+ */
+export async function renderContent(content, ctx, transform) {
+    const { doc } = normalizeContent(content, { blocks: ctx.blocks });
+    const blocks = transform ? await transform(doc.blocks) : doc.blocks;
+    // Lần vẽ ngoài cùng gom CSS kiểu dáng của mọi khối (kể cả phần lồng bên trong) thành một thẻ <style>
+    const own = !ctx.styles;
+    if (own)
+        ctx = { ...ctx, styles: new Map(), headings: ctx.headings ?? collectHeadings(blocks) };
+    const out = await Promise.all(blocks.map((b, i) => renderBlock(b, b.id ?? `b${i}`, ctx)));
+    if (own && ctx.styles.size)
+        out.unshift(_jsx("style", { "data-ecx-styles": "", children: [...ctx.styles.values()].join("") }, "ecx-styles"));
+    return out;
+}

package/dist/runtime.d.ts

@@ -0,0 +1,58 @@
+import type { ComponentType } from "react";
+import type { FilterMap, LayoutProps, PluginDefinition, PluginLoader, RegionProps, ShortcodeProps, Site, TemplateProps, ThemeEntry } from "./types.js";
+interface RuntimeConfig {
+    themes: Record<string, ThemeEntry>;
+    plugins: Record<string, PluginLoader>;
+}
+/** Frontend core gọi một lần với registry được sinh tự động (generated/registry.ts). */
+export declare function configureRuntime(config: RuntimeConfig): void;
+export declare const FALLBACK_THEME = "default";
+/** Tên template trang có sẵn (theme có template cùng tên thì dùng của theme). */
+export declare const BUILTIN_PAGE_TEMPLATES: readonly ["canvas", "full-width"];
+export interface LoadedTheme {
+    slug: string;
+    chain: ThemeEntry[];
+    templateNames: string[];
+    /** layout = false: template tự vẽ cả trang, không bọc trong layout của theme (`export const layout = false` trong file template). */
+    resolveTemplate(candidates: string[]): Promise<{
+        name: string;
+        Component: ComponentType<TemplateProps>;
+        layout: boolean;
+    }>;
+    layout(): Promise<ComponentType<LayoutProps> | null>;
+}
+/** Theme đang active (kèm theme cha nếu là child theme). Fallback về "default" nếu theme không tồn tại trong bản build. */
+export declare const getActiveTheme: (site?: Site) => Promise<LoadedTheme>;
+/** Định nghĩa của plugin đang bật + phần "extend" của theme. */
+export declare const getActiveExtensions: (site?: Site) => Promise<PluginDefinition[]>;
+/**
+ * Hàm mà plugin đang bật công bố qua definePlugin({ exports }). null nếu plugin chưa cài/chưa bật — luôn kiểm tra:
+ *   const shop = await getPlugin<ShopApi>("shop");
+ *   if (shop) cart = await shop.getCart();
+ * Chỉ dùng phía server (Server Component, route, generateMetadata). Component client nhận dữ liệu qua props.
+ */
+export declare function getPlugin<T = Record<string, unknown>>(slug: string, site?: Site): Promise<T | null>;
+/** Plugin có đang bật không. */
+export declare function hasPlugin(slug: string, site?: Site): Promise<boolean>;
+export declare function findShortcode(name: string, site?: Site): Promise<ComponentType<ShortcodeProps> | null>;
+export declare function findWidget(type: string, site?: Site): Promise<ComponentType<import("./types.js").WidgetProps<any>> | null>;
+/** Route gốc của plugin đang bật (vd "/news-sitemap.xml"). */
+export declare function findRoute(path: string, site?: Site): Promise<import("./types.js").PluginRoute | null>;
+export declare function findBlock(type: string, site?: Site): Promise<ComponentType<import("./types.js").BlockProps<any>> | null>;
+/** Component thay vùng (definePlugin → regions): priority nhỏ nhất thắng, bằng nhau thì plugin trước theme. */
+export declare function findRegion(name: string, site?: Site): Promise<ComponentType<RegionProps> | null>;
+export interface LoadedSlotItem {
+    Component: ComponentType<any>;
+    priority: number;
+}
+export declare function getSlotItems(name: string, site?: Site): Promise<LoadedSlotItem[]>;
+/** Lấy các component gắn vào slot, đã sắp xếp theo priority */
+export declare function getSlotComponents(name: string, site?: Site): Promise<ComponentType<any>[]>;
+/** Chạy filter của các plugin/theme đang bật theo thứ tự, bỏ qua filter bị lỗi. */
+export declare function applyFilters<K extends keyof FilterMap>(name: K, value: Parameters<NonNullable<FilterMap[K]>>[0], ctx?: Parameters<NonNullable<FilterMap[K]>>[1], site?: Site): Promise<Parameters<NonNullable<FilterMap[K]>>[0]>;
+export declare function applyFilters<T = any>(name: string, value: T, ctx?: any, site?: Site): Promise<T>;
+/** Phát action tới các plugin/theme đang bật. */
+export declare function doAction(name: string, arg?: any, site?: Site): Promise<void>;
+/** Dùng trong file entry của plugin/theme: export default definePlugin({...}). */
+export declare function definePlugin(def: PluginDefinition): PluginDefinition;
+export {};