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>
 
       {/* Несколько примеров */}