@webnumseoagent/next 0.7.7 → 0.8.0

package/blog.tsx

@@ -14,13 +14,17 @@
 
 import type { CSSProperties } from "react";
 import { SeoBlogGrid } from "./blog-grid";
+import { SeoBlogTocSpy } from "./blog-toc";
 
 // Файловый ридер (node:fs) грузим лениво — только когда блог реально рендерится (на сборке).
 const blogfs = () => import("./blog-fs");
 
 // Тема блога: цвета/скругления как ВАЛИДНЫЕ CSS-значения → пакет кладёт их в свои --sa-*. Приходит из
 // .blogfs.json (платформа пишет бренд-цвет владельца в accent + опц. токены оформления сайта).
-export interface SeoBlogTheme { accent?: string; border?: string; muted?: string; surface?: string; thBg?: string; radius?: string }
+// toc — оглавление статьи: enabled (вкл/выкл), variant (вид), motion (анимация), top (офсет sticky/якоря),
+// css (маленький scoped-CSS под .sa-toc от Designer-агента — индивидуальный вид/анимация под стиль сайта).
+export interface SeoBlogTocTheme { enabled?: boolean; variant?: string; motion?: boolean; top?: string; css?: string }
+export interface SeoBlogTheme { accent?: string; border?: string; muted?: string; surface?: string; thBg?: string; radius?: string; toc?: SeoBlogTocTheme }
 export interface SeoBlogSummary { slug: string; title: string; excerpt: string; cover: string | null; date: string | null }
 export interface SeoBlogPostFull extends SeoBlogSummary { bodyHtml: string; theme?: SeoBlogTheme }
 
@@ -57,8 +61,8 @@ export async function seoBlogStaticParams(opts?: { localeParam?: string }): Prom
 const BODY_CSS = `.seoagent-blog-body{color:inherit}
 .seoagent-blog-body img{max-width:100%;height:auto;border-radius:var(--sa-radius,8px);margin:1rem 0}
 .seoagent-blog-body table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95em}
-.seoagent-blog-body th,.seoagent-blog-body td{border:1px solid var(--sa-border,#e5e7eb);padding:.5rem .75rem;text-align:left}
-.seoagent-blog-body th{background:var(--sa-th-bg,#f8fafc)}
+.seoagent-blog-body th,.seoagent-blog-body td{border:1px solid var(--sa-border,color-mix(in srgb,currentColor 16%,transparent));padding:.5rem .75rem;text-align:left}
+.seoagent-blog-body th{background:var(--sa-th-bg,color-mix(in srgb,currentColor 8%,transparent));color:inherit;font-weight:700}
 .seoagent-blog-body h2{margin:1.75rem 0 .75rem;font-size:1.5rem;line-height:1.3}
 .seoagent-blog-body h3{margin:1.4rem 0 .6rem;font-size:1.2rem}
 .seoagent-blog-body p{margin:0 0 1rem}
@@ -73,6 +77,84 @@ const BODY_CSS = `.seoagent-blog-body{color:inherit}
 .seoagent-blog-body figcaption{color:var(--sa-muted,#94a3b8);font-size:.85em;text-align:center;margin-top:.4rem}
 .seoagent-blog-body blockquote{margin:1rem 0;padding:.5rem 1rem;border-left:3px solid var(--sa-border,#e5e7eb);color:var(--sa-muted,#475569)}`;
 
+// ── Оглавление статьи (TOC) ────────────────────────────────────────────────────────────────────
+// Санитайзер РЕЖЕТ id у заголовков → якоря нельзя протащить из контента. Поэтому адаптер САМ строит
+// оглавление и проставляет id при рендере (детерминированно, server-side, без сети и без зависимостей).
+const TOC_LABEL: Record<string, string> = { ru: "Содержание", uz: "Mundarija", en: "Contents", ar: "المحتويات", tr: "İçindekiler" };
+const TOC_MIN = 3; // меньше 3 заголовков — оглавление не показываем (не нужно)
+
+// Транслит кириллицы → латиница для стабильных слагов-якорей (uzbek-latin уже латиница).
+const TRANSLIT: Record<string, string> = {
+  а:"a",б:"b",в:"v",г:"g",д:"d",е:"e",ё:"e",ж:"zh",з:"z",и:"i",й:"y",к:"k",л:"l",м:"m",н:"n",о:"o",п:"p",
+  р:"r",с:"s",т:"t",у:"u",ф:"f",х:"h",ц:"ts",ч:"ch",ш:"sh",щ:"sch",ъ:"",ы:"y",ь:"",э:"e",ю:"yu",я:"ya",
+  ў:"o",қ:"q",ғ:"g",ҳ:"h",
+};
+function slugify(text: string): string {
+  const s = text.toLowerCase().split("").map((ch) => TRANSLIT[ch] ?? ch).join("")
+    .replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
+  return s || "section";
+}
+
+export interface SeoTocItem { id: string; text: string; level: 2 | 3 }
+// Извлекает h2/h3, впрыскивает уникальные id в открывающие теги, возвращает {html, items}. Fail-safe.
+function buildToc(html: string): { html: string; items: SeoTocItem[] } {
+  const items: SeoTocItem[] = [];
+  const used = new Set<string>();
+  try {
+    const out = html.replace(/<(h2|h3)(\s[^>]*)?>([\s\S]*?)<\/\1>/gi, (full, tag: string, attrs: string, inner: string) => {
+      const text = inner.replace(/<[^>]+>/g, "").replace(/\s+/g, " ").trim();
+      if (!text) return full;
+      let id = slugify(text); const base = id; let n = 2;
+      while (used.has(id)) { id = `${base}-${n}`; n++; }
+      used.add(id);
+      items.push({ id, text, level: tag.toLowerCase() === "h3" ? 3 : 2 });
+      return `<${tag}${attrs || ""} id="${id}">${inner}</${tag}>`;
+    });
+    return { html: out, items };
+  } catch {
+    return { html, items: [] };
+  }
+}
+
+// Валидатор персонального CSS оглавления (от Designer-агента). Только безопасные правила под .sa-toc:
+// без выхода из <style>, без @import/expression/js-url. Иначе возвращаем пусто (fail-safe).
+function safeTocCss(css?: string): string {
+  if (!css || typeof css !== "string") return "";
+  if (/<\/?style|@import|expression\s*\(|javascript:|<script/i.test(css)) return "";
+  return css.slice(0, 4000);
+}
+
+const TOC_CSS = `.sa-article-wrap{max-width:1080px;margin:0 auto;padding:var(--sa-blog-top,clamp(5rem,8vw,7rem)) 1.5rem 3rem}
+.sa-article-wrap.has-toc{display:grid;gap:2.5rem;grid-template-columns:1fr}
+@media(min-width:1024px){.sa-article-wrap.has-toc{grid-template-columns:250px minmax(0,760px);justify-content:center;align-items:start}}
+.sa-article{min-width:0;line-height:1.7}
+.sa-article-wrap:not(.has-toc) .sa-article{max-width:760px;margin:0 auto}
+.sa-toc{order:-1;font-size:.9rem}
+@media(min-width:1024px){.sa-toc{position:sticky;top:var(--sa-toc-top,88px);max-height:calc(100vh - 120px);overflow:auto}}
+.sa-toc>summary{list-style:none;font-weight:700;font-size:.95rem;margin:0 0 .75rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:inherit;cursor:pointer}
+.sa-toc>summary::-webkit-details-marker{display:none}
+.sa-toc>summary .sa-toc-chev{transition:transform .2s ease;color:var(--sa-muted,#94a3b8)}
+.sa-toc[open]>summary .sa-toc-chev{transform:rotate(90deg)}
+@media(min-width:1024px){.sa-toc>summary{pointer-events:none}.sa-toc>summary .sa-toc-chev{display:none}}
+.sa-toc-list{display:flex;flex-direction:column;gap:.1rem}
+.sa-toc-list a{display:block;text-decoration:none;color:var(--sa-muted,#64748b);padding:.35rem .6rem;border-radius:var(--sa-radius,8px);line-height:1.4;transition:color .15s ease,background .15s ease,border-color .15s ease}
+.sa-toc-list a[data-level="3"]{padding-left:1.4rem;font-size:.85em}
+.sa-toc-list a:hover{color:inherit}
+.sa-toc-list a.is-active{color:var(--sa-accent,#2563eb)}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list{border-left:2px solid var(--sa-border,#e5e7eb);padding-left:.2rem}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list a{border-left:2px solid transparent;margin-left:-.2rem;border-radius:0}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list a.is-active{border-left-color:var(--sa-accent,#2563eb);font-weight:600}
+.sa-toc[data-sa-toc="bordered"]{border:1px solid var(--sa-border,#e5e7eb);border-radius:var(--sa-radius,12px);padding:1rem;background:var(--sa-surface,transparent)}
+.sa-toc[data-sa-toc="bordered"] .sa-toc-list a.is-active{background:var(--sa-th-bg,color-mix(in srgb,currentColor 8%,transparent))}
+.sa-toc[data-sa-toc="pill"] .sa-toc-list a.is-active{background:var(--sa-accent,#2563eb);color:#fff}
+.sa-toc[data-sa-toc="numbered"] .sa-toc-list{counter-reset:sa-toc}
+.sa-toc[data-sa-toc="numbered"] .sa-toc-list a[data-level="2"]{counter-increment:sa-toc}
+.sa-toc[data-sa-toc="numbered"] .sa-toc-list a[data-level="2"]::before{content:counter(sa-toc) ". ";color:var(--sa-muted,#94a3b8)}
+.sa-toc[data-sa-toc="numbered"] .sa-toc-list a.is-active::before{color:var(--sa-accent,#2563eb)}
+.seoagent-blog-body h2,.seoagent-blog-body h3{scroll-margin-top:var(--sa-toc-top,88px)}
+@media(prefers-reduced-motion:no-preference){.sa-toc[data-motion="on"] .sa-toc-list{animation:sa-toc-in .45s ease both}}
+@keyframes sa-toc-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}`;
+
 // Тема → CSS-переменные пакета (--sa-*). Кладём на корень блока — они каскадируются вниз к
 // ссылкам/карточкам/телу. Отдаём только заданные ключи (пустые не трогаем → останется fallback).
 function themeStyle(theme?: SeoBlogTheme): Record<string, string> {
@@ -142,15 +224,36 @@ export async function SeoBlogIndex(props: { locale?: string; basePath?: string;
 
 // Одна статья. Принимает пост (из seoBlogPost) — так страница может сделать notFound()/метаданные.
 export function SeoBlogArticle({ post, locale }: { post: SeoBlogPostFull; locale?: string }) {
+  const toc = post.theme?.toc ?? {};
+  // Оглавление строим ВСЕГДА (нужны id-якоря в тексте), а показываем только если вкл. и ≥TOC_MIN заголовков.
+  const { html, items } = buildToc(post.bodyHtml);
+  const showToc = toc.enabled !== false && items.length >= TOC_MIN;
+  const variant = toc.variant || "minimal";
+  const motion = toc.motion === false ? "off" : "on";
+  const label = L(TOC_LABEL, locale ?? "", "Contents");
+  const rootStyle = { ...themeStyle(post.theme), ...(toc.top ? { ["--sa-toc-top"]: toc.top } : {}) } as CSSProperties;
   return (
-    <article style={{ maxWidth: 760, margin: "0 auto", padding: "var(--sa-blog-top, clamp(5rem, 8vw, 7rem)) 1.5rem 3rem", lineHeight: 1.7, ...themeStyle(post.theme) } as CSSProperties}>
-      <style dangerouslySetInnerHTML={{ __html: BODY_CSS }} />
-      {post.cover ? <img src={post.cover} alt={post.title} style={{ width: "100%", aspectRatio: "3 / 2", objectFit: "cover", display: "block", borderRadius: "var(--sa-radius, 12px)", marginBottom: "1.5rem" }} /> : null}
-      <h1 style={{ fontSize: "2.2rem", lineHeight: 1.2, margin: "0 0 1rem" }}>{post.title}</h1>
-      {post.date ? <p style={{ color: "var(--sa-muted, #94a3b8)", margin: "0 0 1.5rem" }}>{fmtDate(post.date, locale)}</p> : null}
-      {/* Тело уже санитайзено при доставке — рендерим как HTML. */}
-      <div className="seoagent-blog-body" dangerouslySetInnerHTML={{ __html: post.bodyHtml }} />
-    </article>
+    <div className={showToc ? "sa-article-wrap has-toc" : "sa-article-wrap"} style={rootStyle}>
+      <style dangerouslySetInnerHTML={{ __html: BODY_CSS + TOC_CSS + (showToc ? safeTocCss(toc.css) : "") }} />
+      {showToc ? (
+        <details className="sa-toc" data-sa-toc={variant} data-motion={motion} open>
+          <summary>{label}<span className="sa-toc-chev" aria-hidden="true">›</span></summary>
+          <nav className="sa-toc-list" aria-label={label}>
+            {items.map((it) => (
+              <a key={it.id} href={`#${it.id}`} data-toc-link={it.id} data-level={it.level}>{it.text}</a>
+            ))}
+          </nav>
+          <SeoBlogTocSpy ids={items.map((it) => it.id)} />
+        </details>
+      ) : null}
+      <article className="sa-article">
+        {post.cover ? <img src={post.cover} alt={post.title} style={{ width: "100%", aspectRatio: "3 / 2", objectFit: "cover", display: "block", borderRadius: "var(--sa-radius, 12px)", marginBottom: "1.5rem" }} /> : null}
+        <h1 style={{ fontSize: "2.2rem", lineHeight: 1.2, margin: "0 0 1rem" }}>{post.title}</h1>
+        {post.date ? <p style={{ color: "var(--sa-muted, #94a3b8)", margin: "0 0 1.5rem" }}>{fmtDate(post.date, locale)}</p> : null}
+        {/* Тело уже санитайзено при доставке; id-якоря добавлены buildToc при рендере. */}
+        <div className="seoagent-blog-body" dangerouslySetInnerHTML={{ __html: html }} />
+      </article>
+    </div>
   );
 }
 

package/dist/blog-toc.d.ts

@@ -0,0 +1,3 @@
+export declare function SeoBlogTocSpy({ ids }: {
+    ids: string[];
+}): null;

package/dist/blog-toc.js

@@ -0,0 +1,69 @@
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeoBlogTocSpy = SeoBlogTocSpy;
+// Прогрессивное улучшение оглавления статьи: ссылки уже отрендерены сервером (работают без JS как
+// якоря). Этот компонент лишь ДОБАВЛЯЕТ: подсветку активного раздела при скролле (IntersectionObserver)
+// и плавную прокрутку по клику. Ничего не рендерит (return null). Fail-safe: при отсутствии заголовков
+// или API просто ничего не делает.
+const react_1 = require("react");
+function SeoBlogTocSpy({ ids }) {
+    const key = ids.join(",");
+    (0, react_1.useEffect)(() => {
+        if (!ids.length || typeof document === "undefined")
+            return;
+        const links = new Map();
+        document.querySelectorAll("[data-toc-link]").forEach((a) => {
+            const id = a.getAttribute("data-toc-link");
+            if (id)
+                links.set(id, a);
+        });
+        const heads = ids.map((id) => document.getElementById(id)).filter(Boolean);
+        if (!heads.length)
+            return;
+        let active = "";
+        const setActive = (id) => {
+            if (id === active)
+                return;
+            active = id;
+            links.forEach((a, lid) => {
+                const on = lid === id;
+                a.classList.toggle("is-active", on);
+                if (on)
+                    a.setAttribute("aria-current", "true");
+                else
+                    a.removeAttribute("aria-current");
+            });
+        };
+        const reduce = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+        const onClick = (e) => {
+            const a = e.currentTarget;
+            const id = a.getAttribute("data-toc-link");
+            const el = id ? document.getElementById(id) : null;
+            if (!el)
+                return;
+            e.preventDefault();
+            el.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
+            try {
+                history.replaceState(null, "", `#${id}`);
+            }
+            catch { /* noop */ }
+            setActive(id);
+        };
+        links.forEach((a) => a.addEventListener("click", onClick));
+        let io = null;
+        if (typeof IntersectionObserver !== "undefined") {
+            io = new IntersectionObserver((entries) => {
+                const vis = entries.filter((en) => en.isIntersecting)
+                    .sort((x, y) => x.boundingClientRect.top - y.boundingClientRect.top);
+                if (vis[0])
+                    setActive(vis[0].target.id);
+            }, { rootMargin: "-88px 0px -70% 0px", threshold: 0 });
+            heads.forEach((h) => io.observe(h));
+        }
+        return () => {
+            io?.disconnect();
+            links.forEach((a) => a.removeEventListener("click", onClick));
+        };
+    }, [key]); // eslint-disable-line react-hooks/exhaustive-deps
+    return null;
+}

package/dist/blog.d.ts

@@ -1,3 +1,10 @@
+export interface SeoBlogTocTheme {
+    enabled?: boolean;
+    variant?: string;
+    motion?: boolean;
+    top?: string;
+    css?: string;
+}
 export interface SeoBlogTheme {
     accent?: string;
     border?: string;
@@ -5,6 +12,7 @@ export interface SeoBlogTheme {
     surface?: string;
     thBg?: string;
     radius?: string;
+    toc?: SeoBlogTocTheme;
 }
 export interface SeoBlogSummary {
     slug: string;
@@ -27,6 +35,11 @@ export declare function seoBlogPost(slug: string, opts?: {
 export declare function seoBlogStaticParams(opts?: {
     localeParam?: string;
 }): Promise<Array<Record<string, string>>>;
+export interface SeoTocItem {
+    id: string;
+    text: string;
+    level: 2 | 3;
+}
 export declare function SeoBlogIndex(props: {
     locale?: string;
     basePath?: string;

package/dist/blog.js

@@ -40,6 +40,7 @@ exports.SeoBlogIndex = SeoBlogIndex;
 exports.SeoBlogArticle = SeoBlogArticle;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const blog_grid_1 = require("./blog-grid");
+const blog_toc_1 = require("./blog-toc");
 // Файловый ридер (node:fs) грузим лениво — только когда блог реально рендерится (на сборке).
 const blogfs = () => Promise.resolve().then(() => __importStar(require("./blog-fs")));
 // ── Публичные data-функции (для generateMetadata / generateStaticParams) — читают файлы content/blog. ──
@@ -75,8 +76,8 @@ async function seoBlogStaticParams(opts) {
 const BODY_CSS = `.seoagent-blog-body{color:inherit}
 .seoagent-blog-body img{max-width:100%;height:auto;border-radius:var(--sa-radius,8px);margin:1rem 0}
 .seoagent-blog-body table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95em}
-.seoagent-blog-body th,.seoagent-blog-body td{border:1px solid var(--sa-border,#e5e7eb);padding:.5rem .75rem;text-align:left}
-.seoagent-blog-body th{background:var(--sa-th-bg,#f8fafc)}
+.seoagent-blog-body th,.seoagent-blog-body td{border:1px solid var(--sa-border,color-mix(in srgb,currentColor 16%,transparent));padding:.5rem .75rem;text-align:left}
+.seoagent-blog-body th{background:var(--sa-th-bg,color-mix(in srgb,currentColor 8%,transparent));color:inherit;font-weight:700}
 .seoagent-blog-body h2{margin:1.75rem 0 .75rem;font-size:1.5rem;line-height:1.3}
 .seoagent-blog-body h3{margin:1.4rem 0 .6rem;font-size:1.2rem}
 .seoagent-blog-body p{margin:0 0 1rem}
@@ -90,6 +91,87 @@ const BODY_CSS = `.seoagent-blog-body{color:inherit}
 .seoagent-blog-body figure{margin:1.25rem 0}
 .seoagent-blog-body figcaption{color:var(--sa-muted,#94a3b8);font-size:.85em;text-align:center;margin-top:.4rem}
 .seoagent-blog-body blockquote{margin:1rem 0;padding:.5rem 1rem;border-left:3px solid var(--sa-border,#e5e7eb);color:var(--sa-muted,#475569)}`;
+// ── Оглавление статьи (TOC) ────────────────────────────────────────────────────────────────────
+// Санитайзер РЕЖЕТ id у заголовков → якоря нельзя протащить из контента. Поэтому адаптер САМ строит
+// оглавление и проставляет id при рендере (детерминированно, server-side, без сети и без зависимостей).
+const TOC_LABEL = { ru: "Содержание", uz: "Mundarija", en: "Contents", ar: "المحتويات", tr: "İçindekiler" };
+const TOC_MIN = 3; // меньше 3 заголовков — оглавление не показываем (не нужно)
+// Транслит кириллицы → латиница для стабильных слагов-якорей (uzbek-latin уже латиница).
+const TRANSLIT = {
+    а: "a", б: "b", в: "v", г: "g", д: "d", е: "e", ё: "e", ж: "zh", з: "z", и: "i", й: "y", к: "k", л: "l", м: "m", н: "n", о: "o", п: "p",
+    р: "r", с: "s", т: "t", у: "u", ф: "f", х: "h", ц: "ts", ч: "ch", ш: "sh", щ: "sch", ъ: "", ы: "y", ь: "", э: "e", ю: "yu", я: "ya",
+    ў: "o", қ: "q", ғ: "g", ҳ: "h",
+};
+function slugify(text) {
+    const s = text.toLowerCase().split("").map((ch) => TRANSLIT[ch] ?? ch).join("")
+        .replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
+    return s || "section";
+}
+// Извлекает h2/h3, впрыскивает уникальные id в открывающие теги, возвращает {html, items}. Fail-safe.
+function buildToc(html) {
+    const items = [];
+    const used = new Set();
+    try {
+        const out = html.replace(/<(h2|h3)(\s[^>]*)?>([\s\S]*?)<\/\1>/gi, (full, tag, attrs, inner) => {
+            const text = inner.replace(/<[^>]+>/g, "").replace(/\s+/g, " ").trim();
+            if (!text)
+                return full;
+            let id = slugify(text);
+            const base = id;
+            let n = 2;
+            while (used.has(id)) {
+                id = `${base}-${n}`;
+                n++;
+            }
+            used.add(id);
+            items.push({ id, text, level: tag.toLowerCase() === "h3" ? 3 : 2 });
+            return `<${tag}${attrs || ""} id="${id}">${inner}</${tag}>`;
+        });
+        return { html: out, items };
+    }
+    catch {
+        return { html, items: [] };
+    }
+}
+// Валидатор персонального CSS оглавления (от Designer-агента). Только безопасные правила под .sa-toc:
+// без выхода из <style>, без @import/expression/js-url. Иначе возвращаем пусто (fail-safe).
+function safeTocCss(css) {
+    if (!css || typeof css !== "string")
+        return "";
+    if (/<\/?style|@import|expression\s*\(|javascript:|<script/i.test(css))
+        return "";
+    return css.slice(0, 4000);
+}
+const TOC_CSS = `.sa-article-wrap{max-width:1080px;margin:0 auto;padding:var(--sa-blog-top,clamp(5rem,8vw,7rem)) 1.5rem 3rem}
+.sa-article-wrap.has-toc{display:grid;gap:2.5rem;grid-template-columns:1fr}
+@media(min-width:1024px){.sa-article-wrap.has-toc{grid-template-columns:250px minmax(0,760px);justify-content:center;align-items:start}}
+.sa-article{min-width:0;line-height:1.7}
+.sa-article-wrap:not(.has-toc) .sa-article{max-width:760px;margin:0 auto}
+.sa-toc{order:-1;font-size:.9rem}
+@media(min-width:1024px){.sa-toc{position:sticky;top:var(--sa-toc-top,88px);max-height:calc(100vh - 120px);overflow:auto}}
+.sa-toc>summary{list-style:none;font-weight:700;font-size:.95rem;margin:0 0 .75rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:inherit;cursor:pointer}
+.sa-toc>summary::-webkit-details-marker{display:none}
+.sa-toc>summary .sa-toc-chev{transition:transform .2s ease;color:var(--sa-muted,#94a3b8)}
+.sa-toc[open]>summary .sa-toc-chev{transform:rotate(90deg)}
+@media(min-width:1024px){.sa-toc>summary{pointer-events:none}.sa-toc>summary .sa-toc-chev{display:none}}
+.sa-toc-list{display:flex;flex-direction:column;gap:.1rem}
+.sa-toc-list a{display:block;text-decoration:none;color:var(--sa-muted,#64748b);padding:.35rem .6rem;border-radius:var(--sa-radius,8px);line-height:1.4;transition:color .15s ease,background .15s ease,border-color .15s ease}
+.sa-toc-list a[data-level="3"]{padding-left:1.4rem;font-size:.85em}
+.sa-toc-list a:hover{color:inherit}
+.sa-toc-list a.is-active{color:var(--sa-accent,#2563eb)}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list{border-left:2px solid var(--sa-border,#e5e7eb);padding-left:.2rem}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list a{border-left:2px solid transparent;margin-left:-.2rem;border-radius:0}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list a.is-active{border-left-color:var(--sa-accent,#2563eb);font-weight:600}
+.sa-toc[data-sa-toc="bordered"]{border:1px solid var(--sa-border,#e5e7eb);border-radius:var(--sa-radius,12px);padding:1rem;background:var(--sa-surface,transparent)}
+.sa-toc[data-sa-toc="bordered"] .sa-toc-list a.is-active{background:var(--sa-th-bg,color-mix(in srgb,currentColor 8%,transparent))}
+.sa-toc[data-sa-toc="pill"] .sa-toc-list a.is-active{background:var(--sa-accent,#2563eb);color:#fff}
+.sa-toc[data-sa-toc="numbered"] .sa-toc-list{counter-reset:sa-toc}
+.sa-toc[data-sa-toc="numbered"] .sa-toc-list a[data-level="2"]{counter-increment:sa-toc}
+.sa-toc[data-sa-toc="numbered"] .sa-toc-list a[data-level="2"]::before{content:counter(sa-toc) ". ";color:var(--sa-muted,#94a3b8)}
+.sa-toc[data-sa-toc="numbered"] .sa-toc-list a.is-active::before{color:var(--sa-accent,#2563eb)}
+.seoagent-blog-body h2,.seoagent-blog-body h3{scroll-margin-top:var(--sa-toc-top,88px)}
+@media(prefers-reduced-motion:no-preference){.sa-toc[data-motion="on"] .sa-toc-list{animation:sa-toc-in .45s ease both}}
+@keyframes sa-toc-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}`;
 // Тема → CSS-переменные пакета (--sa-*). Кладём на корень блока — они каскадируются вниз к
 // ссылкам/карточкам/телу. Отдаём только заданные ключи (пустые не трогаем → останется fallback).
 function themeStyle(theme) {
@@ -147,7 +229,15 @@ async function SeoBlogIndex(props) {
 }
 // Одна статья. Принимает пост (из seoBlogPost) — так страница может сделать notFound()/метаданные.
 function SeoBlogArticle({ post, locale }) {
-    return ((0, jsx_runtime_1.jsxs)("article", { style: { maxWidth: 760, margin: "0 auto", padding: "var(--sa-blog-top, clamp(5rem, 8vw, 7rem)) 1.5rem 3rem", lineHeight: 1.7, ...themeStyle(post.theme) }, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: BODY_CSS } }), post.cover ? (0, jsx_runtime_1.jsx)("img", { src: post.cover, alt: post.title, style: { width: "100%", aspectRatio: "3 / 2", objectFit: "cover", display: "block", borderRadius: "var(--sa-radius, 12px)", marginBottom: "1.5rem" } }) : null, (0, jsx_runtime_1.jsx)("h1", { style: { fontSize: "2.2rem", lineHeight: 1.2, margin: "0 0 1rem" }, children: post.title }), post.date ? (0, jsx_runtime_1.jsx)("p", { style: { color: "var(--sa-muted, #94a3b8)", margin: "0 0 1.5rem" }, children: fmtDate(post.date, locale) }) : null, (0, jsx_runtime_1.jsx)("div", { className: "seoagent-blog-body", dangerouslySetInnerHTML: { __html: post.bodyHtml } })] }));
+    const toc = post.theme?.toc ?? {};
+    // Оглавление строим ВСЕГДА (нужны id-якоря в тексте), а показываем только если вкл. и ≥TOC_MIN заголовков.
+    const { html, items } = buildToc(post.bodyHtml);
+    const showToc = toc.enabled !== false && items.length >= TOC_MIN;
+    const variant = toc.variant || "minimal";
+    const motion = toc.motion === false ? "off" : "on";
+    const label = L(TOC_LABEL, locale ?? "", "Contents");
+    const rootStyle = { ...themeStyle(post.theme), ...(toc.top ? { ["--sa-toc-top"]: toc.top } : {}) };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: showToc ? "sa-article-wrap has-toc" : "sa-article-wrap", style: rootStyle, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: BODY_CSS + TOC_CSS + (showToc ? safeTocCss(toc.css) : "") } }), showToc ? ((0, jsx_runtime_1.jsxs)("details", { className: "sa-toc", "data-sa-toc": variant, "data-motion": motion, open: true, children: [(0, jsx_runtime_1.jsxs)("summary", { children: [label, (0, jsx_runtime_1.jsx)("span", { className: "sa-toc-chev", "aria-hidden": "true", children: "\u203A" })] }), (0, jsx_runtime_1.jsx)("nav", { className: "sa-toc-list", "aria-label": label, children: items.map((it) => ((0, jsx_runtime_1.jsx)("a", { href: `#${it.id}`, "data-toc-link": it.id, "data-level": it.level, children: it.text }, it.id))) }), (0, jsx_runtime_1.jsx)(blog_toc_1.SeoBlogTocSpy, { ids: items.map((it) => it.id) })] })) : null, (0, jsx_runtime_1.jsxs)("article", { className: "sa-article", children: [post.cover ? (0, jsx_runtime_1.jsx)("img", { src: post.cover, alt: post.title, style: { width: "100%", aspectRatio: "3 / 2", objectFit: "cover", display: "block", borderRadius: "var(--sa-radius, 12px)", marginBottom: "1.5rem" } }) : null, (0, jsx_runtime_1.jsx)("h1", { style: { fontSize: "2.2rem", lineHeight: 1.2, margin: "0 0 1rem" }, children: post.title }), post.date ? (0, jsx_runtime_1.jsx)("p", { style: { color: "var(--sa-muted, #94a3b8)", margin: "0 0 1.5rem" }, children: fmtDate(post.date, locale) }) : null, (0, jsx_runtime_1.jsx)("div", { className: "seoagent-blog-body", dangerouslySetInnerHTML: { __html: html } })] })] }));
 }
 function fmtDate(d, locale) {
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webnumseoagent/next",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "description": "Runtime SEO adapter + installer for Next.js App Router sites (SEO Agent platform)",
   "main": "dist/client.js",
   "types": "dist/client.d.ts",