@webnumseoagent/next 0.8.0 → 0.9.0

package/blog.tsx

@@ -23,7 +23,7 @@ const blogfs = () => import("./blog-fs");
 // .blogfs.json (платформа пишет бренд-цвет владельца в accent + опц. токены оформления сайта).
 // 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 SeoBlogTocTheme { enabled?: boolean; variant?: string; motion?: boolean; top?: string; maxh?: 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 }
@@ -124,26 +124,34 @@ function safeTocCss(css?: string): string {
   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}}
+const TOC_CSS = `.sa-article-wrap{max-width:1400px;margin:0 auto;padding:var(--sa-blog-top,clamp(5rem,8vw,7rem)) 1.5rem 3rem;container-type:inline-size}
+.sa-article-grid{display:block}
+.sa-article-grid:not(.has-toc){max-width:760px;margin:0 auto}
 .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{font-size:.9rem}
+/* Средняя ширина контента: оглавление слева + статья рядом, блок по центру (формат для узкого контента). */
+@container (min-width:700px){.sa-article-grid.has-toc{display:grid;column-gap:2.5rem;grid-template-columns:250px minmax(0,760px);justify-content:center;align-items:start}
+.sa-toc{position:sticky;top:var(--sa-toc-top,88px)}}
+/* Широкий контент (ZeroMax): статья ПО ЦЕНТРУ вьюпорта, оглавление в левом гуттере, прижато к статье (капнуто ~300px). */
+@container (min-width:1180px){.sa-article-grid.has-toc{grid-template-columns:minmax(0,1fr) minmax(0,760px) minmax(0,1fr);column-gap:0}
+.sa-article-grid.has-toc>.sa-toc{grid-column:1;justify-self:end;width:min(100%,300px);margin-right:2.5rem}
+.sa-article-grid.has-toc>.sa-article{grid-column:2}}
 .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-body{position:relative}
+.sa-toc-list{display:flex;flex-direction:column;gap:.1rem;max-height:var(--sa-toc-maxh,300px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
+.sa-toc-list::-webkit-scrollbar{width:0;height:0;display:none}
 .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="minimal"] .sa-toc-body::before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:2px;background:var(--sa-border,#e5e7eb);z-index:0}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list a{padding-left:.9rem;border-radius:0;box-shadow:inset 2px 0 0 transparent}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list a[data-level="3"]{padding-left:1.7rem}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list a.is-active{box-shadow:inset 2px 0 0 var(--sa-accent,#2563eb)}
 .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}
@@ -231,28 +239,34 @@ export function SeoBlogArticle({ post, locale }: { post: SeoBlogPostFull; locale
   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;
+  const rootStyle = { ...themeStyle(post.theme), ...(toc.top ? { ["--sa-toc-top"]: toc.top } : {}), ...(toc.maxh ? { ["--sa-toc-maxh"]: toc.maxh } : {}) } as CSSProperties;
   return (
-    <div className={showToc ? "sa-article-wrap has-toc" : "sa-article-wrap"} style={rootStyle}>
+    <div className="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>
+      {/* Внутренний грид — CSS-контейнер .sa-article-wrap адаптирует его по ШИРИНЕ контента (@container). */}
+      <div className={showToc ? "sa-article-grid has-toc" : "sa-article-grid"}>
+        {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>
+            {/* .sa-toc-body держит общий рельс (::before) вне скролла; скроллится только список. */}
+            <div className="sa-toc-body">
+              <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>
+            </div>
+            <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>
     </div>
   );
 }

package/dist/blog-toc.js

@@ -20,6 +20,21 @@ function SeoBlogTocSpy({ ids }) {
         const heads = ids.map((id) => document.getElementById(id)).filter(Boolean);
         if (!heads.length)
             return;
+        const reduce = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+        // Держим активный пункт в видимой (обрезанной) зоне списка: подкручиваем сам скролл-контейнер
+        // .sa-toc-list, чтобы при скролле статьи выделенный заголовок не «уезжал» за пределы оглавления.
+        const keepInView = (a) => {
+            const box = a.closest(".sa-toc-list");
+            if (!box || box.scrollHeight <= box.clientHeight)
+                return;
+            const ar = a.getBoundingClientRect(), br = box.getBoundingClientRect();
+            const top = box.scrollTop + (ar.top - br.top);
+            const pad = 8;
+            if (top < box.scrollTop + pad)
+                box.scrollTo({ top: Math.max(0, top - pad), behavior: reduce ? "auto" : "smooth" });
+            else if (top + ar.height > box.scrollTop + box.clientHeight - pad)
+                box.scrollTo({ top: top + ar.height - box.clientHeight + pad, behavior: reduce ? "auto" : "smooth" });
+        };
         let active = "";
         const setActive = (id) => {
             if (id === active)
@@ -33,8 +48,10 @@ function SeoBlogTocSpy({ ids }) {
                 else
                     a.removeAttribute("aria-current");
             });
+            const cur = links.get(id);
+            if (cur)
+                keepInView(cur);
         };
-        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");

package/dist/blog.d.ts

@@ -3,6 +3,7 @@ export interface SeoBlogTocTheme {
     variant?: string;
     motion?: boolean;
     top?: string;
+    maxh?: string;
     css?: string;
 }
 export interface SeoBlogTheme {

package/dist/blog.js

@@ -142,26 +142,34 @@ function safeTocCss(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}}
+const TOC_CSS = `.sa-article-wrap{max-width:1400px;margin:0 auto;padding:var(--sa-blog-top,clamp(5rem,8vw,7rem)) 1.5rem 3rem;container-type:inline-size}
+.sa-article-grid{display:block}
+.sa-article-grid:not(.has-toc){max-width:760px;margin:0 auto}
 .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{font-size:.9rem}
+/* Средняя ширина контента: оглавление слева + статья рядом, блок по центру (формат для узкого контента). */
+@container (min-width:700px){.sa-article-grid.has-toc{display:grid;column-gap:2.5rem;grid-template-columns:250px minmax(0,760px);justify-content:center;align-items:start}
+.sa-toc{position:sticky;top:var(--sa-toc-top,88px)}}
+/* Широкий контент (ZeroMax): статья ПО ЦЕНТРУ вьюпорта, оглавление в левом гуттере, прижато к статье (капнуто ~300px). */
+@container (min-width:1180px){.sa-article-grid.has-toc{grid-template-columns:minmax(0,1fr) minmax(0,760px) minmax(0,1fr);column-gap:0}
+.sa-article-grid.has-toc>.sa-toc{grid-column:1;justify-self:end;width:min(100%,300px);margin-right:2.5rem}
+.sa-article-grid.has-toc>.sa-article{grid-column:2}}
 .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-body{position:relative}
+.sa-toc-list{display:flex;flex-direction:column;gap:.1rem;max-height:var(--sa-toc-maxh,300px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
+.sa-toc-list::-webkit-scrollbar{width:0;height:0;display:none}
 .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="minimal"] .sa-toc-body::before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:2px;background:var(--sa-border,#e5e7eb);z-index:0}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list a{padding-left:.9rem;border-radius:0;box-shadow:inset 2px 0 0 transparent}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list a[data-level="3"]{padding-left:1.7rem}
+.sa-toc[data-sa-toc="minimal"] .sa-toc-list a.is-active{box-shadow:inset 2px 0 0 var(--sa-accent,#2563eb)}
 .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}
@@ -236,8 +244,8 @@ function SeoBlogArticle({ post, locale }) {
     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 } })] })] }));
+    const rootStyle = { ...themeStyle(post.theme), ...(toc.top ? { ["--sa-toc-top"]: toc.top } : {}), ...(toc.maxh ? { ["--sa-toc-maxh"]: toc.maxh } : {}) };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "sa-article-wrap", style: rootStyle, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: BODY_CSS + TOC_CSS + (showToc ? safeTocCss(toc.css) : "") } }), (0, jsx_runtime_1.jsxs)("div", { className: showToc ? "sa-article-grid has-toc" : "sa-article-grid", children: [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)("div", { className: "sa-toc-body", children: (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.8.0",
+  "version": "0.9.0",
   "description": "Runtime SEO adapter + installer for Next.js App Router sites (SEO Agent platform)",
   "main": "dist/client.js",
   "types": "dist/client.d.ts",