feat(sprint-5.5): add NestJS API, BlockMetaBar, block components + fix Vercel build

- Add vercel.json to build only apps/web (fix Vercel build failure)
- NestJS API: BlocksModule, BlocksController, BlocksService with Prisma 7
- PostgreSQL migration: Block model (path, version, isInPreview)
- BlockMetaBar component: inline version edit, API fetch with offline fallback
- New block components: CeoBlock, ContactFormsBlock, FooterBlock, NewsBlock, ReviewsBlock
- PreviewClient: fetch isInPreview from API, block visibility toggle
- Pages updated: hero, doctors, ceo, contact-forms, contact, news, reviews
- docker-compose: PostgreSQL on port 5434

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/app/blocks/ceo/page.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+import { CeoBlock, CEO_QUESTIONS } from "@/components/blocks/CeoBlock";
 
 export const metadata: Metadata = {
   title: "Вводный текст (CEO-блок). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -46,13 +48,6 @@ const LLM_CEO_TEXT = `
 ✕ Не менять стиль вопросов на другой формат
 `.trim();
 
-const CEO_QUESTIONS = [
-  "У вас болит ухо, заложен нос, першит в горле, и вы не можете понять причину?",
-  "Вам срочно нужен платный ЛОР в Перми или, как ещё говорят, «ухогорлонос»?",
-  "Заболел ребёнок?",
-  "Срочно ищете частные ЛОР-клиники Перми для детей 0+ и взрослых с удобным режимом работы с 9:00 до 21:00 по будням?",
-  "Вам назначили проведение эндоскопической операции на ухе, горле или носе?",
-];
 
 export default function CeoPage() {
   return (
@@ -68,6 +63,7 @@ export default function CeoPage() {
         <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
           Вводный текст (CEO-блок)
         </h1>
+        <BlockMetaBar path="/blocks/ceo" defaultVersion="v1.0" defaultIsInPreview={false} />
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
           Блок после hero-баннера на perm.oclinica.ru/lor. Описание специализации клиники
           + вопросы-стимулы для пациентов.
@@ -79,38 +75,8 @@ export default function CeoPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-        <div
-          className="rounded-xl p-8"
-          style={{
-            background: "#fff",
-            border: "1px solid var(--bb-border)",
-            fontFamily: "var(--font-web)",
-            fontSize: 14,
-            lineHeight: 1.75,
-            color: "#374151",
-          }}
-        >
-          <p>
-            Клиника ухо, нос специализируется на оториноларингологии – лечении взрослых и детей
-            с ЛОР заболеваниями. ЛОР клиника представлена на двух адресах:{" "}
-            <a href="#" style={{ color: "#0089c3" }}>ул. Цитная, 9</a>, <a href="#" style={{ color: "#0089c3" }}>ул. Г. Звезда, 31а</a>.{" "}
-            Это <a href="#" style={{ color: "#0089c3" }}>Клиника лечения кашля и аллергии</a>.
-          </p>
-
-          <div className="mt-4 space-y-2">
-            {CEO_QUESTIONS.map((q) => (
-              <p key={q}>— {q}</p>
-            ))}
-          </div>
-
-          <p className="mt-4">
-            Обращайтесь в ЛОР центр ухо, горло, нос в Перми, наши врачи оториноларингологи обязательно Вам помогут!
-          </p>
-          <p className="mt-2">
-            Клиника ЛОР болезней ухо, горло, нос – это наиболее современный центр оториноларингологии в Перми,
-            благодаря эндоскопическому оборудованию, высокому профессионализму оториноларингологов.
-          </p>
-          <p className="mt-4 font-medium">Будьте здоровы!</p>
+        <div className="rounded-xl overflow-hidden" style={{ border: "1px solid var(--bb-border)" }}>
+          <CeoBlock />
         </div>
       </section>
 

apps/web/app/blocks/contact-forms/page.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+import { ContactFormsBlock } from "@/components/blocks/ContactFormsBlock";
 
 export const metadata: Metadata = {
   title: "Формы записи. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -62,104 +64,18 @@ export default function ContactFormsPage() {
         <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
           Формы записи
         </h1>
+        <BlockMetaBar path="/blocks/contact-forms" defaultVersion="v1.0" defaultIsInPreview={false} />
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
           Два блока форм с perm.oclinica.ru/lor — запись на приём и запрос стоимости операции.
         </p>
       </div>
 
-      {/* Форма 1: Будьте здоровы */}
+      {/* Живой пример */}
       <section className="space-y-3">
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
-          Форма 1 — «Будьте здоровы!»
+          Живой пример
         </h2>
-        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
-          Фон секции: #b8e6ed. Запись на приём к врачу.
-        </p>
-        <div
-          className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
-          style={{ background: "#b8e6ed" }}
-        >
-          <div className="text-center">
-            <h2 className="text-2xl font-bold mb-1" style={{ color: "#111827" }}>
-              Будьте здоровы!
-            </h2>
-            <p className="text-sm" style={{ color: "#374151" }}>
-              Запишитесь на приём к врачу!
-            </p>
-          </div>
-          <div className="w-full max-w-sm space-y-3">
-            <input
-              className="bb-input"
-              type="text"
-              placeholder="Введите ваше имя"
-              readOnly
-            />
-            <input
-              className="bb-input"
-              type="tel"
-              placeholder="Введите ваш телефон"
-              readOnly
-            />
-            <select className="bb-select" disabled>
-              <option>Выберите ЛОР врача</option>
-            </select>
-            <label className="flex items-start gap-2 text-xs cursor-pointer" style={{ color: "#374151" }}>
-              <input type="checkbox" className="bb-checkbox mt-0.5" readOnly />
-              <span>
-                Отправляя данные, я даю согласие на обработку персональных данных
-              </span>
-            </label>
-            <button className="bb-btn bb-btn-md bb-btn-primary w-full">
-              Запишите меня!
-            </button>
-          </div>
-        </div>
-      </section>
-
-      {/* Форма 2: Узнайте стоимость */}
-      <section className="space-y-3">
-        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
-          Форма 2 — «Узнайте стоимость операции»
-        </h2>
-        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
-          Фон секции: #ffffff. Запрос консультации по стоимости.
-        </p>
-        <div
-          className="rounded-xl py-10 px-8 flex flex-col items-center gap-6"
-          style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
-        >
-          <div className="text-center">
-            <h2 className="text-2xl font-bold mb-1" style={{ color: "#111827" }}>
-              Узнайте стоимость операции
-            </h2>
-            <p className="text-sm" style={{ color: "#374151" }}>
-              Проконсультируйтесь с ассистентом хирурга
-            </p>
-          </div>
-          <div className="w-full max-w-sm space-y-3">
-            <input
-              className="bb-input"
-              type="text"
-              placeholder="Введите ваше имя"
-              readOnly
-            />
-            <input
-              className="bb-input"
-              type="tel"
-              placeholder="Введите ваш телефон"
-              readOnly
-            />
-            <label className="flex items-start gap-2 text-xs cursor-pointer" style={{ color: "#374151" }}>
-              <input type="checkbox" className="bb-checkbox mt-0.5" readOnly />
-              <span>
-                Отправляя данные, я даю согласие на обработку персональных данных
-              </span>
-            </label>
-            <button className="bb-btn bb-btn-md bb-btn-primary w-full">
-              Перезвоните мне
-            </button>
-          </div>
-        </div>
+        <ContactFormsBlock />
       </section>
 
       {/* Сравнение двух форм */}

apps/web/app/blocks/contact/page.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+import { FooterBlock } from "@/components/blocks/FooterBlock";
 
 export const metadata: Metadata = {
   title: "Подвал (Footer). Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -82,6 +84,7 @@ export default function ContactFooterPage() {
         <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
           Подвал (Footer)
         </h1>
+        <BlockMetaBar path="/blocks/contact" defaultVersion="v1.0" defaultIsInPreview={false} />
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
           Подвал сайта с perm.oclinica.ru — 4 колонки ссылок, логотип, адрес, часы работы, соцсети.
         </p>
@@ -92,97 +95,7 @@ export default function ContactFooterPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-        <div
-          className="rounded-xl overflow-hidden"
-          style={{ border: "1px solid var(--bb-border)" }}
-        >
-          {/* 4 колонки ссылок */}
-          <div
-            className="grid grid-cols-4 gap-6 p-8"
-            style={{ background: "#f8f9fa", borderBottom: "1px solid #e5e7eb" }}
-          >
-            {FOOTER_COLUMNS.map((col) => (
-              <div key={col.title}>
-                <p className="font-semibold text-sm mb-3" style={{ color: "#111827" }}>
-                  {col.title}
-                </p>
-                <ul className="space-y-1.5">
-                  {col.links.map((link) => (
-                    <li key={link}>
-                      <a
-                        href="#"
-                        className="text-xs bb-nav-link"
-                        style={{ color: "#53514e", textDecoration: "none" }}
-                      >
-                        {link}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-
-          {/* Нижняя полоса */}
-          <div
-            className="flex items-start justify-between gap-6 px-8 py-5"
-            style={{ background: "#fff" }}
-          >
-            {/* Логотип */}
-            <div className="flex items-center gap-2 shrink-0">
-              <div
-                className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold"
-                style={{ background: "#0089c3" }}
-              >
-                ✚
-              </div>
-              <div>
-                <div
-                  className="text-[10px] font-bold uppercase leading-tight"
-                  style={{ color: "#53514e" }}
-                >
-                  Клиника<br />ухо, горло, нос
-                </div>
-                <div className="text-[8px] leading-tight" style={{ color: "#9ca3af" }}>
-                  им. проф. Е.Н.Оленевой
-                </div>
-              </div>
-            </div>
-
-            {/* Адрес и соцсети */}
-            <div className="text-center space-y-2">
-              <p className="text-xs" style={{ color: "#374151" }}>
-                Мы находимся по адресу: Пермь, ул. Г. Звезда, 31а
-              </p>
-              <div className="flex items-center justify-center gap-2">
-                {["VK", "OK", "YT", "TG"].map((s) => (
-                  <a
-                    key={s}
-                    href="#"
-                    className="text-[11px] px-2 py-1 rounded"
-                    style={{
-                      background: "var(--bb-sidebar-bg)",
-                      border: "1px solid var(--bb-border)",
-                      color: "var(--bb-text-muted)",
-                    }}
-                  >
-                    {s}
-                  </a>
-                ))}
-              </div>
-            </div>
-
-            {/* Часы работы */}
-            <div className="text-right text-xs space-y-1" style={{ color: "#374151" }}>
-              <p className="font-semibold text-xs mb-1" style={{ color: "#111827" }}>
-                Часы работы:
-              </p>
-              <p>Пн–пт: 9:00–21:00</p>
-              <p>Сб: 9:00–18:00</p>
-              <p>Вс: выходной</p>
-            </div>
-          </div>
-        </div>
+        <FooterBlock />
       </section>
 
       {/* Колонки */}

apps/web/app/blocks/doctors/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
 import { DoctorsBlock, STATS, DOCTORS } from "@/components/blocks/DoctorsBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
 
 export const metadata: Metadata = {
   title: "Блок «Наши врачи». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -58,6 +59,7 @@ export default function DoctorsBlockPage() {
         <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
           Блок «Наши врачи»
         </h1>
+        <BlockMetaBar path="/blocks/doctors" defaultVersion="v1.1" defaultIsInPreview={true} />
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
           Блок на странице perm.oclinica.ru/lor — заголовок, 3 стат-блока, сетка из 6 карточек врачей.
         </p>

apps/web/app/blocks/hero/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
 import { HeroBlock, HERO_CHECKS } from "@/components/blocks/HeroBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
 
 export const metadata: Metadata = {
   title: "Hero-баннер. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -63,6 +64,7 @@ export default function HeroPage() {
         <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
           Hero-баннер
         </h1>
+        <BlockMetaBar path="/blocks/hero" defaultVersion="v1.1" defaultIsInPreview={true} />
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
           Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон{" "}
           <strong>#f9f4e7</strong>.

apps/web/app/blocks/news/page.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+import { NewsBlock } from "@/components/blocks/NewsBlock";
 
 export const metadata: Metadata = {
   title: "Блок «Новости». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -79,6 +81,7 @@ export default function NewsBlockPage() {
         <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
           Блок «Новости»
         </h1>
+        <BlockMetaBar path="/blocks/news" defaultVersion="v1.0" defaultIsInPreview={false} />
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
           Блок новостей с perm.oclinica.ru/lor — 4 карточки в ряд (дата + заголовок-ссылка),
           кнопка «Все новости».
@@ -90,42 +93,7 @@ export default function NewsBlockPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-        <div
-          className="rounded-xl p-8 space-y-6"
-          style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
-        >
-          <h2 className="text-xl font-bold" style={{ color: "#111827" }}>
-            Новости
-          </h2>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            {MOCK_NEWS.map((n) => (
-              <div
-                key={n.date}
-                className="bb-news-card rounded-lg p-3 cursor-pointer"
-                style={{
-                  border: "1px solid var(--bb-border)",
-                  transition: "background 0.15s, box-shadow 0.15s",
-                }}
-              >
-                <p className="text-xs mb-2" style={{ color: "#6b7280" }}>
-                  {n.date}
-                </p>
-                <a
-                  href={n.href}
-                  className="text-sm font-medium leading-snug block"
-                  style={{ color: "#0089c3", textDecoration: "none" }}
-                >
-                  {n.title}
-                </a>
-              </div>
-            ))}
-          </div>
-          <div className="text-center">
-            <button className="bb-btn bb-btn-md bb-btn-outline">
-              Все новости
-            </button>
-          </div>
-        </div>
+        <NewsBlock />
       </section>
 
       {/* Анатомия карточки */}

apps/web/app/blocks/reviews/page.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+import { ReviewsBlock } from "@/components/blocks/ReviewsBlock";
 
 export const metadata: Metadata = {
   title: "Блок «Отзывы». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -64,6 +66,7 @@ export default function ReviewsBlockPage() {
         <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
           Блок «Отзывы о нас»
         </h1>
+        <BlockMetaBar path="/blocks/reviews" defaultVersion="v1.0" defaultIsInPreview={false} />
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
           Карусель отзывов с perm.oclinica.ru/lor — большая кавычка, текст, «Читать полностью», стрелки.
         </p>
@@ -74,76 +77,7 @@ export default function ReviewsBlockPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Живой пример
         </h2>
-        <div
-          className="rounded-xl p-8 space-y-6"
-          style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
-        >
-          {/* Заголовок */}
-          <div>
-            <h2 className="text-xl font-bold mb-2" style={{ color: "#111827" }}>
-              Отзывы о нас
-            </h2>
-            <p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
-              За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа
-              более 50 000 пациентов. Но даже сейчас мы высоко ценим каждый положительный отзыв
-              и искренние слова благодарности.
-            </p>
-          </div>
-
-          {/* Карусель (статичная) */}
-          <div className="relative flex items-center gap-4">
-            {/* Стрелка влево */}
-            <button
-              className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
-              style={{
-                background: "var(--bb-sidebar-bg)",
-                border: "1px solid var(--bb-border)",
-                color: "var(--bb-text-muted)",
-              }}
-            >
-              ‹
-            </button>
-
-            {/* Карточка отзыва */}
-            <div
-              className="flex-1 rounded-xl p-6 relative"
-              style={{ background: "#eef4d1" }}
-            >
-              {/* Декоративная кавычка */}
-              <div
-                className="text-8xl leading-none mb-2 font-serif"
-                style={{ color: "#b8e6ed", lineHeight: 0.8 }}
-              >
-                «
-              </div>
-              <p
-                className="text-sm italic leading-relaxed"
-                style={{ color: "#374151" }}
-              >
-                {MOCK_REVIEWS[0].text}
-              </p>
-              <a
-                href="#"
-                className="inline-block mt-3 text-sm"
-                style={{ color: "#0089c3" }}
-              >
-                Читать отзыв полностью
-              </a>
-            </div>
-
-            {/* Стрелка вправо */}
-            <button
-              className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg"
-              style={{
-                background: "var(--bb-sidebar-bg)",
-                border: "1px solid var(--bb-border)",
-                color: "var(--bb-text-muted)",
-              }}
-            >
-              ›
-            </button>
-          </div>
-        </div>
+        <ReviewsBlock />
       </section>
 
       {/* Несколько примеров */}

apps/web/app/components/buttons/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Button } from "@/components/ui/Button";
 import { CodeCopy } from "@/components/ui/CodeCopy";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
 
 export const metadata: Metadata = {
   title: "Кнопки. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -227,6 +228,7 @@ a.callback_url {
         <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
           Кнопки
         </h1>
+        <BlockMetaBar path="/components/buttons" defaultVersion="v2.0" defaultIsInPreview={false} />
         <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
           Кнопки скопированы с реального сайта{" "}
           <span className="font-mono text-sm" style={{ color: "var(--bb-text)" }}>

apps/web/app/components/cards/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { CodeCopy } from "@/components/ui/CodeCopy";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
 
 export const metadata: Metadata = {
   title: "Карточки. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -417,6 +418,7 @@ export default function CardsPage() {
         <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
           Карточки
         </h1>
+        <BlockMetaBar path="/components/cards" defaultVersion="v1.0" defaultIsInPreview={false} />
         <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
           Карточки врача, новости, отзыва, цены и услуги — основные блоки контента сайта.
           Бейджи, теги и алерты — вспомогательные элементы.

apps/web/app/components/forms/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Toggle } from "@/components/ui/Toggle";
 import { CodeCopy } from "@/components/ui/CodeCopy";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
 
 export const metadata: Metadata = {
   title: "Форм-контролы. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -264,6 +265,7 @@ input[type=email] {
         <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
           Форм-контролы
         </h1>
+        <BlockMetaBar path="/components/forms" defaultVersion="v2.0" defaultIsInPreview={false} />
         <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
           Элементы ввода данных: текстовые поля, выпадающие списки, флажки, переключатели.
           Применяются в формах записи, фильтрах и настройках.

apps/web/app/components/navigation/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
 import { NavigationBlock, NAV_ITEMS } from "@/components/blocks/NavigationBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
 
 export const metadata: Metadata = {
   title: "Шапка и навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
@@ -57,6 +58,7 @@ export default function NavigationPage() {
         <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
           Шапка и навигация
         </h1>
+        <BlockMetaBar path="/components/navigation" defaultVersion="v1.0" defaultIsInPreview={true} />
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
           Точное воспроизведение шапки с perm.oclinica.ru/lor. Три зоны: топ-бар, логотип, главное меню.
         </p>

apps/web/app/pages/preview/PreviewClient.tsx

@@ -4,6 +4,11 @@ import { useState, useEffect } from "react";
 import { NavigationBlock } from "@/components/blocks/NavigationBlock";
 import { HeroBlock } from "@/components/blocks/HeroBlock";
 import { DoctorsBlock } from "@/components/blocks/DoctorsBlock";
+import { CeoBlock } from "@/components/blocks/CeoBlock";
+import { ReviewsBlock } from "@/components/blocks/ReviewsBlock";
+import { NewsBlock } from "@/components/blocks/NewsBlock";
+import { ContactFormsBlock } from "@/components/blocks/ContactFormsBlock";
+import { FooterBlock } from "@/components/blocks/FooterBlock";
 
 const STORAGE_KEY = "bb-preview-created";
 
@@ -30,71 +35,89 @@ function BlockPlaceholder({ name, href }: { name: string; href: string }) {
   );
 }
 
-const BLOCKS: Array<{
+interface BlockDef {
   id: string;
   name: string;
   href: string;
-  ready: boolean;
+  path: string;
+  defaultReady: boolean;
   component?: React.ReactNode;
-}> = [
+}
+
+const BLOCKS: BlockDef[] = [
   {
     id: "navigation",
     name: "Шапка / Навигация",
     href: "/components/navigation",
-    ready: true,
+    path: "/components/navigation",
+    defaultReady: true,
     component: <NavigationBlock />,
   },
   {
     id: "hero",
     name: "Hero-баннер",
     href: "/blocks/hero",
-    ready: true,
+    path: "/blocks/hero",
+    defaultReady: true,
     component: <HeroBlock />,
   },
   {
     id: "ceo",
     name: "Вводный текст (CEO-блок)",
     href: "/blocks/ceo",
-    ready: false,
+    path: "/blocks/ceo",
+    defaultReady: false,
+    component: <CeoBlock />,
   },
   {
     id: "doctors",
     name: "Наши врачи",
     href: "/blocks/doctors",
-    ready: true,
+    path: "/blocks/doctors",
+    defaultReady: true,
     component: <DoctorsBlock />,
   },
   {
     id: "reviews",
     name: "Отзывы",
     href: "/blocks/reviews",
-    ready: false,
+    path: "/blocks/reviews",
+    defaultReady: false,
+    component: <ReviewsBlock />,
   },
   {
     id: "contact-forms",
     name: "Формы записи",
     href: "/blocks/contact-forms",
-    ready: false,
+    path: "/blocks/contact-forms",
+    defaultReady: false,
+    component: <ContactFormsBlock />,
   },
   {
     id: "news",
     name: "Новости",
     href: "/blocks/news",
-    ready: false,
+    path: "/blocks/news",
+    defaultReady: false,
+    component: <NewsBlock />,
   },
   {
     id: "footer",
     name: "Подвал / Контакт",
     href: "/blocks/contact",
-    ready: false,
+    path: "/blocks/contact",
+    defaultReady: false,
+    component: <FooterBlock />,
   },
 ];
 
-const READY_COUNT = BLOCKS.filter((b) => b.ready).length;
-
 export function PreviewClient() {
   const [created, setCreated] = useState(false);
   const [mounted, setMounted] = useState(false);
+  // Map of path → isInPreview from API; null = not loaded yet
+  const [apiMeta, setApiMeta] = useState<Record<string, boolean> | null>(null);
+
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
 
   useEffect(() => {
     setMounted(true);
@@ -103,6 +126,27 @@ export function PreviewClient() {
     }
   }, []);
 
+  useEffect(() => {
+    if (!apiUrl) return;
+    fetch(`${apiUrl}/blocks`)
+      .then((r) => r.json())
+      .then((data: Array<{ path: string; isInPreview: boolean }>) => {
+        const map: Record<string, boolean> = {};
+        for (const b of data) map[b.path] = b.isInPreview;
+        setApiMeta(map);
+      })
+      .catch(() => {
+        // API offline — fall back to defaultReady
+      });
+  }, [apiUrl]);
+
+  function isReady(block: BlockDef): boolean {
+    if (apiMeta !== null && block.path in apiMeta) {
+      return apiMeta[block.path] && !!block.component;
+    }
+    return block.defaultReady && !!block.component;
+  }
+
   function handleCreate() {
     localStorage.setItem(STORAGE_KEY, "true");
     setCreated(true);
@@ -113,9 +157,10 @@ export function PreviewClient() {
     setCreated(false);
   }
 
-  // Avoid hydration mismatch — render nothing until mounted
   if (!mounted) return null;
 
+  const readyCount = BLOCKS.filter(isReady).length;
+
   /* ── ПУСТОЕ СОСТОЯНИЕ ── */
   if (!created) {
     return (
@@ -147,11 +192,11 @@ export function PreviewClient() {
               style={{ background: "#22c55e" }}
             />
             <span style={{ color: "var(--bb-text-muted)" }}>
-              Готово блоков: {READY_COUNT} из {BLOCKS.length}
+              Готово блоков: {readyCount} из {BLOCKS.length}
             </span>
             <span style={{ color: "var(--bb-text-muted)" }}>·</span>
             <span style={{ color: "var(--bb-text-muted)" }}>
-              {BLOCKS.length - READY_COUNT} плейсхолдеров
+              {BLOCKS.length - readyCount} плейсхолдеров
             </span>
           </div>
           <div>
@@ -183,7 +228,10 @@ export function PreviewClient() {
             Просмотр текущей страницы
           </p>
           <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
-            perm.oclinica.ru/lor · {READY_COUNT}/{BLOCKS.length} блоков готово
+            perm.oclinica.ru/lor · {readyCount}/{BLOCKS.length} блоков готово
+            {apiMeta === null && apiUrl && (
+              <span style={{ color: "#f59e0b" }}> · API загружается...</span>
+            )}
           </p>
         </div>
         <button onClick={handleRebuild} className="bb-btn bb-btn-sm bb-btn-outline">
@@ -194,7 +242,7 @@ export function PreviewClient() {
       {/* Собранная страница */}
       <div className="max-w-5xl mx-auto px-8 py-8 space-y-12">
         {BLOCKS.map((block) =>
-          block.ready && block.component ? (
+          isReady(block) ? (
             <section key={block.id}>{block.component}</section>
           ) : (
             <section key={block.id}>