@shelamkoff/rector 1.0.0

package/dist/renderer/renderers/attaches/styles.css

@@ -0,0 +1,196 @@
+/* Attaches renderer — Document Workflow style */
+
+.editor-attaches__card {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 16px;
+  border: 1px solid var(--er-border, #e0e0e4);
+  border-radius: 8px;
+}
+
+.editor-attaches__group {
+  border: 1px solid var(--er-border, #e0e0e4);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.editor-attaches__group-header {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 16px;
+  cursor: pointer;
+  user-select: none;
+}
+.editor-attaches__group-header:hover { background: var(--er-surface-hover, #f5f5f5); }
+
+.editor-attaches__chevron {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+  color: var(--er-text-3, #999);
+  transition: transform 0.2s;
+}
+.editor-attaches__chevron:focus-visible { outline: 2px solid var(--er-accent); outline-offset: 2px; }
+.editor-attaches__chevron--open { transform: rotate(180deg); }
+
+.editor-attaches__group-body {
+  display: none;
+  border-top: 1px solid var(--er-border, #e0e0e4);
+}
+.editor-attaches__group-body--open { display: block; }
+
+.editor-attaches__row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 16px 8px 48px;
+  border-bottom: 1px solid var(--er-border, #e0e0e4);
+}
+.editor-attaches__row:last-child { border-bottom: none; }
+
+.editor-attaches__row-name {
+  flex: 1; min-width: 0;
+  font-size: 14px; color: var(--er-text-1, #1a1a1a);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.editor-attaches__row-size {
+  flex-shrink: 0;
+  font-size: 12px; color: var(--er-text-3, #999);
+}
+
+.editor-attaches__icon {
+  position: relative; flex-shrink: 0;
+  width: 32px; height: 32px;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--er-text-3, #999);
+}
+.editor-attaches__icon svg { width: 32px; height: 32px; }
+
+.editor-attaches__ext {
+  position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
+  padding: 0 4px; font-size: 9px; font-weight: 700; color: var(--er-text-on-accent, #fff);
+  background: var(--er-text-3, #999);
+  border-radius: 2px; letter-spacing: 0.03em; line-height: 1.3;
+}
+
+.editor-attaches__info { flex: 1; min-width: 0; }
+
+.editor-attaches__name {
+  font-size: 14px; font-weight: 500;
+  color: var(--er-text-1, #1a1a1a);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.editor-attaches__meta {
+  display: flex; align-items: center; gap: 12px;
+  font-size: 12px; color: var(--er-text-3, #999);
+  margin-top: 2px;
+}
+
+.editor-attaches__download {
+  color: var(--er-accent, #4357b4);
+  text-decoration: none; font-size: 12px;
+  cursor: pointer;
+}
+.editor-attaches__download:hover { text-decoration: underline; }
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Variant B — Pill / chip
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.editor-attaches__pills { display: flex; flex-wrap: wrap; gap: 6px; }
+
+.editor-attaches__pill {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 6px 14px 6px 10px;
+  border-radius: 20px;
+  background: var(--er-surface);
+  border: 1px solid var(--er-border, #e0e0e4);
+  font-size: 13px; font-weight: 500;
+  text-decoration: none; color: var(--er-text-1, #1a1a1a);
+  transition: border-color 0.15s, background 0.15s;
+}
+.editor-attaches__pill:hover { border-color: var(--er-border-hover, #d0d0d4); background: var(--er-surface-hover); }
+
+.editor-attaches__pill-icon { display: flex; align-items: center; color: var(--er-text-3, #999); flex-shrink: 0; }
+
+.editor-attaches__pill-size { font-size: 11px; color: var(--er-text-3, #999); flex-shrink: 0; }
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Variant F — Notion database
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.editor-attaches__notion {
+  border: 1px solid var(--er-border, #e0e0e4);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.editor-attaches__notion-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--er-border, #e0e0e4);
+  transition: background 0.1s;
+}
+.editor-attaches__notion-row:last-child { border-bottom: none; }
+.editor-attaches__notion-row:hover { background: var(--er-surface-hover, #f5f5f5); }
+
+.editor-attaches__notion-name {
+  flex: 1; min-width: 0;
+  font-size: 14px; font-weight: 500;
+  color: var(--er-text-1, #1a1a1a);
+  text-decoration: none;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.editor-attaches__notion-name:hover { text-decoration: underline; }
+
+.editor-attaches__notion-tag {
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 11px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.02em;
+  flex-shrink: 0;
+}
+
+.editor-attaches__notion-size {
+  font-size: 12px; color: var(--er-text-3, #999);
+  flex-shrink: 0; min-width: 50px; text-align: right;
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Variant G — Material elevated cards
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.editor-attaches__material { display: flex; flex-direction: column; gap: 8px; }
+
+.editor-attaches__material-card {
+  display: flex; align-items: center; gap: 14px;
+  padding: 14px 18px;
+  background: var(--er-surface);
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
+  transition: box-shadow 0.2s, transform 0.15s;
+}
+.editor-attaches__material-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
+
+.editor-attaches__material-icon {
+  position: relative; flex-shrink: 0;
+  width: 36px; height: 36px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--er-surface-hover, #f0f0f2);
+  border-radius: 8px;
+  color: var(--er-text-3, #999);
+}
+.editor-attaches__material-icon svg { width: 20px; height: 20px; }
+
+.editor-attaches__material-dl {
+  display: flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  background: rgba(67, 87, 180, 0.1);
+  color: var(--er-accent, #4357b4);
+  text-decoration: none; flex-shrink: 0;
+  transition: background 0.15s;
+}
+.editor-attaches__material-dl:hover { background: var(--er-accent, #4357b4); color: #fff; }

package/dist/renderer/renderers/carousel/README.md

@@ -0,0 +1,43 @@
+# CarouselBlock renderer
+
+Renderer for the `carousel` block. It converts persisted block data into renderer-owned DOM.
+The Carousel renderer directly uses `@shelamkoff/carousel` and its `carouselStylesUrl` package export.
+
+The `@shelamkoff/rector/renderer` entry contains the synchronous built-in preset, so `@shelamkoff/carousel` and `@shelamkoff/expose` must be installed before importing it. Passing `blockTypes: []` prevents default renderer construction but does not change ESM module resolution.
+
+## Usage
+
+```js
+import { createEditorRenderer } from '@shelamkoff/rector/renderer'
+import { createCarouselRenderer } from '@shelamkoff/rector/renderer/renderers/carousel'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createCarouselRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{
+  "slides": [
+    { "id": "cover", "type": "image", "src": "https://cdn.example/cover.jpg", "alt": "Cover", "caption": "Opening slide" },
+    { "id": "clip", "type": "video", "src": "https://cdn.example/clip.mp4", "poster": "https://cdn.example/poster.jpg", "caption": "Video" },
+    { "id": "note", "type": "html", "html": "<strong>Sanitized HTML</strong>" }
+  ],
+  "options": { "loop": true, "autoplay": false, "autoplayDelay": 5000, "navigation": true, "pagination": true, "thumbnails": false, "aspectRatio": "16 / 9" }
+}
+```
+
+The complete persisted-data contract, including per-slide requirements and option defaults, is defined by the matching [Carousel plugin](../../../plugins/carousel/README.md#field-reference).
+
+Image and video sources use the media URL policy; HTML slides use the raw-HTML sanitizer. The renderer owns the Carousel instance and releases it in `destroy()`. It declares its own and Carousel styles.
+
+When styles are declared, the explicit `EditorRenderer.injectStyles()` call shown above acquires them and its returned owner releases them.
+
+The VitePress guide documents renderer ownership, inline widget reconstruction, styles, cleanup, and security boundaries.

package/dist/renderer/renderers/carousel/README.ru.md

@@ -0,0 +1,43 @@
+# Рендерер CarouselBlock
+
+Преобразует сохранённый блок `carousel` в принадлежащий рендереру DOM.
+Рендерер Carousel напрямую использует `@shelamkoff/carousel` и экспорт пакета `carouselStylesUrl`.
+
+Синхронная точка входа `@shelamkoff/rector/renderer` включает все встроенные рендереры, поэтому до её импорта установите `@shelamkoff/carousel` и `@shelamkoff/expose`. Значение `blockTypes: []` отключает создание встроенных рендереров, но не меняет правила разрешения модулей ESM.
+
+## Использование
+
+```js
+import { createEditorRenderer } from '@shelamkoff/rector/renderer'
+import { createCarouselRenderer } from '@shelamkoff/rector/renderer/renderers/carousel'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createCarouselRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// При удалении добавленного результата:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Типичные данные
+
+```json
+{
+  "slides": [
+    { "id": "cover", "type": "image", "src": "https://cdn.example/cover.jpg", "alt": "Обложка", "caption": "Первый слайд" },
+    { "id": "clip", "type": "video", "src": "https://cdn.example/clip.mp4", "poster": "https://cdn.example/poster.jpg", "caption": "Видео" },
+    { "id": "note", "type": "html", "html": "<strong>Очищенный HTML</strong>" }
+  ],
+  "options": { "loop": true, "autoplay": false, "autoplayDelay": 5000, "navigation": true, "pagination": true, "thumbnails": false, "aspectRatio": "16 / 9" }
+}
+```
+
+Полный контракт сохранённых данных, включая требования к слайдам и значения параметров по умолчанию, описан в [справочнике полей плагина Carousel](../../../plugins/carousel/README.ru.md#поля-данных).
+
+Адреса изображений и видео проходят политику URL для медиафайлов, а HTML-слайды — очиститель произвольного HTML. Рендерер владеет экземпляром Carousel и освобождает его в `destroy()`. Он объявляет собственные стили и стили Carousel.
+
+Если рендерер объявляет стили, показанный выше явный вызов `EditorRenderer.injectStyles()` подключает их, а возвращённый владелец освобождает.
+
+Жизненный цикл, восстановление внутристрочных виджетов, стили и границы безопасности описаны в последовательном руководстве VitePress.

package/dist/renderer/renderers/carousel/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Create the mixed-media carousel renderer and own its Carousel instances.
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes.js').LocaleValue>} locale
+ * @returns {import('../../types.js').BlockRenderer<import('../../types.js').CarouselBlock>}
+ */
+export function createCarouselRenderer(classPrefix: string, locale: Record<string, import("../../../shared/localeTypes.js").LocaleValue>): import("../../types.js").BlockRenderer<import("../../types.js").CarouselBlock>;

package/dist/renderer/renderers/carousel/index.js

@@ -0,0 +1,110 @@
+// @ts-check
+import {
+  Carousel,
+  carouselStylesUrl,
+  createArrows,
+  createAutoplay,
+  createDots,
+  createKeyboard,
+  createSwipe,
+  createThumbnails,
+} from '@shelamkoff/carousel'
+import { resolvePath } from '../../../shared/resolvePath.js'
+import { normalizeCarouselData } from '../../../shared/carouselData.js'
+import { setSanitizedRawHtml } from '../../../shared/sanitize/sanitizeRawHtml.js'
+import { setSafeUrlAttribute } from '../../../shared/sanitize/sanitizeUrl.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+/**
+ * Create the mixed-media carousel renderer and own its Carousel instances.
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').CarouselBlock>}
+ */
+export function createCarouselRenderer(classPrefix, locale) {
+  const p = `${classPrefix}-carousel-block`
+  /** @type {WeakMap<HTMLElement, Carousel>} */
+  const instances = new WeakMap()
+  /** @param {string} key @param {string} fallback */
+  const t = (key, fallback) => {
+    const value = locale[`renderer.carousel.${key}`]
+    return typeof value === 'string' ? value : fallback
+  }
+
+  return {
+    type: 'carousel',
+    styles: [styles, carouselStylesUrl],
+    render(block) {
+      let fallback = 0
+      const data = normalizeCarouselData(block.data, () => `legacy-slide-${++fallback}`)
+      const root = document.createElement('div')
+      root.className = p
+      root.setAttribute('aria-label', t('label', 'Content carousel'))
+      if (data.options.aspectRatio && data.options.aspectRatio !== 'auto') {
+        root.style.aspectRatio = data.options.aspectRatio
+      }
+
+      const slides = data.slides.map(slide => {
+        const content = () => {
+          const figure = document.createElement('figure')
+          figure.className = `${p}__slide`
+          if (slide.type === 'image') {
+            const image = document.createElement('img')
+            setSafeUrlAttribute(image, 'src', slide.src || '', 'media')
+            image.alt = slide.alt || ''
+            image.loading = 'lazy'
+            figure.appendChild(image)
+          } else if (slide.type === 'video') {
+            const video = document.createElement('video')
+            video.controls = true
+            video.preload = 'metadata'
+            setSafeUrlAttribute(video, 'src', slide.src || '', 'media')
+            setSafeUrlAttribute(video, 'poster', slide.poster || '', 'media')
+            video.setAttribute('aria-label', slide.alt || t('video', 'Video slide'))
+            figure.appendChild(video)
+          } else {
+            const html = document.createElement('div')
+            html.className = `${p}__html`
+            setSanitizedRawHtml(html, slide.html || '')
+            figure.appendChild(html)
+          }
+          if (slide.caption) {
+            const caption = document.createElement('figcaption')
+            caption.textContent = slide.caption
+            figure.appendChild(caption)
+          }
+          return figure
+        }
+        return {
+          content,
+          ...(slide.type === 'image' && slide.src ? { thumb: slide.src } : {}),
+          ...(slide.type === 'video' && slide.poster ? { thumb: slide.poster } : {}),
+          meta: { id: slide.id, type: slide.type },
+        }
+      })
+
+      // Preserve mode may intentionally pass a normalized empty carousel.
+      // Avoid constructing a runtime instance with no navigable slides.
+      if (!slides.length) return root
+
+      const plugins = [createKeyboard({ scope: 'container' }), createSwipe({ mouse: true })]
+      if (data.options.navigation) plugins.push(createArrows())
+      if (data.options.pagination) plugins.push(createDots())
+      if (data.options.thumbnails) plugins.push(createThumbnails())
+      if (data.options.autoplay) plugins.push(createAutoplay({ interval: data.options.autoplayDelay }))
+
+      const instance = new Carousel(root, slides, { loop: data.options.loop, plugins })
+      instances.set(root, instance)
+      root.querySelector('.carousel__arrow--prev')?.setAttribute('aria-label', t('previous', 'Previous slide'))
+      root.querySelector('.carousel__arrow--next')?.setAttribute('aria-label', t('next', 'Next slide'))
+      root.querySelectorAll('.carousel__dot').forEach((dot, index) => dot.setAttribute('aria-label', `${t('page', 'Go to page')} ${index + 1}`))
+      root.querySelectorAll('.carousel__thumb').forEach((thumb, index) => thumb.setAttribute('aria-label', `${t('slide', 'Go to slide')} ${index + 1}`))
+      return root
+    },
+    destroy(element) {
+      instances.get(element)?.destroy()
+      instances.delete(element)
+    },
+  }
+}

package/dist/renderer/renderers/carousel/styles.css

@@ -0,0 +1,7 @@
+.editor-carousel-block { position: relative; width: 100%; }
+.editor-carousel-block .carousel__viewport { border-radius: var(--er-radius); background: var(--er-surface); }
+.editor-carousel-block__slide { display: grid; place-items: center; box-sizing: border-box; width: 100%; min-height: 16rem; margin: 0; }
+.editor-carousel-block__slide img, .editor-carousel-block__slide video { display: block; width: 100%; height: 100%; max-height: 36rem; object-fit: contain; }
+.editor-carousel-block__html { box-sizing: border-box; width: 100%; padding: 1rem; }
+.editor-carousel-block figcaption { box-sizing: border-box; width: 100%; padding: .625rem .875rem; color: var(--er-text-2); font-size: .8125rem; text-align: center; }
+.editor-carousel-block .carousel__arrow:focus-visible, .editor-carousel-block .carousel__dot:focus-visible, .editor-carousel-block .carousel__thumb:focus-visible { outline: 2px solid var(--er-accent); outline-offset: 2px; }

package/dist/renderer/renderers/checklist/README.md

@@ -0,0 +1,33 @@
+# Checklist renderer
+
+Renderer for the `checklist` block. It converts persisted block data into renderer-owned DOM.
+
+The `@shelamkoff/rector/renderer` entry contains the synchronous built-in preset, so `@shelamkoff/carousel` and `@shelamkoff/expose` must be installed before importing it. Passing `blockTypes: []` prevents default renderer construction but does not change ESM module resolution.
+
+## Usage
+
+```js
+import { createEditorRenderer } from '@shelamkoff/rector/renderer'
+import { createChecklistRenderer } from '@shelamkoff/rector/renderer/renderers/checklist'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createChecklistRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{ "items": [{ "text": "Ship", "checked": false }] }
+```
+
+Every item text uses the shared inline parser and checked state uses a native disabled checkbox. The renderer declares one stylesheet and creates no listeners or external instances.
+
+When styles are declared, the explicit `EditorRenderer.injectStyles()` call shown above acquires them and its returned owner releases them.
+
+The VitePress guide documents renderer ownership, inline widget reconstruction, styles, cleanup, and security boundaries.

package/dist/renderer/renderers/checklist/README.ru.md

@@ -0,0 +1,33 @@
+# Рендерер Checklist
+
+Преобразует сохранённый блок `checklist` в принадлежащий рендереру DOM.
+
+Синхронная точка входа `@shelamkoff/rector/renderer` включает все встроенные рендереры, поэтому до её импорта установите `@shelamkoff/carousel` и `@shelamkoff/expose`. Значение `blockTypes: []` отключает создание встроенных рендереров, но не меняет правила разрешения модулей ESM.
+
+## Использование
+
+```js
+import { createEditorRenderer } from '@shelamkoff/rector/renderer'
+import { createChecklistRenderer } from '@shelamkoff/rector/renderer/renderers/checklist'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createChecklistRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// При удалении добавленного результата:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Типичные данные
+
+```json
+{ "items": [{ "text": "Опубликовать", "checked": false }] }
+```
+
+Текст каждого пункта проходит общий обработчик внутристрочной разметки, а состояние представлено нативным недоступным для редактирования флажком. Рендерер объявляет одну таблицу стилей и не создаёт обработчиков или сторонних экземпляров.
+
+Если рендерер объявляет стили, показанный выше явный вызов `EditorRenderer.injectStyles()` подключает их, а возвращённый владелец освобождает.
+
+Жизненный цикл, восстановление внутристрочных виджетов, стили и границы безопасности описаны в последовательном руководстве VitePress.

package/dist/renderer/renderers/checklist/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Checklist block renderer
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes.js').LocaleValue>} _locale
+ * @returns {import('../../types.js').BlockRenderer<import('../../types.js').ChecklistBlock>}
+ */
+export function createChecklistRenderer(classPrefix: string, _locale: Record<string, import("../../../shared/localeTypes.js").LocaleValue>): import("../../types.js").BlockRenderer<import("../../types.js").ChecklistBlock>;

package/dist/renderer/renderers/checklist/index.js

@@ -0,0 +1,55 @@
+// @ts-check
+import { resolvePath } from '../../../shared/resolvePath.js'
+import { mapChecklistTextFields as mapTextFields } from '../../../shared/mapTextFields.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+/**
+ * Checklist block renderer
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} _locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').ChecklistBlock>}
+ */
+export function createChecklistRenderer(classPrefix, _locale) {
+  return {
+    type: 'checklist',
+    styles: [styles],
+    mapTextFields,
+
+    /**
+     * @param {import('../../types').ChecklistBlock} block
+     * @param {import('../../types').InlineParser} parseInline
+     * @returns {HTMLElement}
+     */
+    render(block, parseInline) {
+      const { items } = block.data
+
+      const ul = document.createElement('ul')
+      ul.className = `${classPrefix}-checklist`
+
+      for (const item of items) {
+        const li = document.createElement('li')
+        li.className = `${classPrefix}-checklist__item`
+
+        if (item.checked) {
+          li.classList.add(`${classPrefix}-checklist__item--checked`)
+        }
+
+        const checkbox = document.createElement('span')
+        checkbox.className = `${classPrefix}-checklist__checkbox`
+        checkbox.setAttribute('role', 'checkbox')
+        checkbox.setAttribute('aria-checked', String(item.checked))
+
+        const content = document.createElement('span')
+        content.className = `${classPrefix}-checklist__text`
+        content.appendChild(parseInline(item.text))
+
+        li.appendChild(checkbox)
+        li.appendChild(content)
+        ul.appendChild(li)
+      }
+
+      return ul
+    },
+  }
+}

package/dist/renderer/renderers/checklist/styles.css

@@ -0,0 +1,54 @@
+.editor-checklist {
+  padding: 0;
+  list-style: none;
+}
+
+.editor-checklist__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.editor-checklist__item:last-child {
+  margin-bottom: 0;
+}
+
+.editor-checklist__checkbox {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+  border: 2px solid var(--er-border-hover);
+  border-radius: 4px;
+  background-color: var(--er-surface);
+}
+
+.editor-checklist__item--checked .editor-checklist__checkbox {
+  background-color: var(--er-accent);
+  border-color: var(--er-accent);
+  position: relative;
+}
+
+.editor-checklist__item--checked .editor-checklist__checkbox::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 10px;
+  border: solid var(--er-text-on-accent, #fff);
+  border-width: 0 2px 2px 0;
+  transform: translate(-50%, -60%) rotate(45deg);
+}
+
+.editor-checklist__item--checked .editor-checklist__text {
+  color: var(--er-text-3);
+  text-decoration: line-through;
+}
+
+.editor-checklist__text {
+  flex: 1;
+  min-width: 0;
+  color: var(--er-text-2);
+}

package/dist/renderer/renderers/code/README.md

@@ -0,0 +1,33 @@
+# Code renderer
+
+Renderer for the `code` block. It converts persisted block data into renderer-owned DOM.
+
+The `@shelamkoff/rector/renderer` entry contains the synchronous built-in preset, so `@shelamkoff/carousel` and `@shelamkoff/expose` must be installed before importing it. Passing `blockTypes: []` prevents default renderer construction but does not change ESM module resolution.
+
+## Usage
+
+```js
+import { createEditorRenderer } from '@shelamkoff/rector/renderer'
+import { createCodeRenderer } from '@shelamkoff/rector/renderer/renderers/code'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createCodeRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{ "code": "const value = 1", "language": "javascript" }
+```
+
+Code is rendered as text and optionally highlighted. The copy control owns a DOM-scoped listener released with the rendered root. The renderer declares one stylesheet.
+
+When styles are declared, the explicit `EditorRenderer.injectStyles()` call shown above acquires them and its returned owner releases them.
+
+The VitePress guide documents renderer ownership, inline widget reconstruction, styles, cleanup, and security boundaries.

package/dist/renderer/renderers/code/README.ru.md

@@ -0,0 +1,33 @@
+# Рендерер Code
+
+Преобразует сохранённый блок `code` в принадлежащий рендереру DOM.
+
+Синхронная точка входа `@shelamkoff/rector/renderer` включает все встроенные рендереры, поэтому до её импорта установите `@shelamkoff/carousel` и `@shelamkoff/expose`. Значение `blockTypes: []` отключает создание встроенных рендереров, но не меняет правила разрешения модулей ESM.
+
+## Использование
+
+```js
+import { createEditorRenderer } from '@shelamkoff/rector/renderer'
+import { createCodeRenderer } from '@shelamkoff/rector/renderer/renderers/code'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createCodeRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// При удалении добавленного результата:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Типичные данные
+
+```json
+{ "code": "const value = 1", "language": "javascript" }
+```
+
+Код отображается как текст и при наличии модуля подсветки получает синтаксическое выделение. Обработчик кнопки копирования освобождается вместе с результатом. Рендерер объявляет одну таблицу стилей.
+
+Если рендерер объявляет стили, показанный выше явный вызов `EditorRenderer.injectStyles()` подключает их, а возвращённый владелец освобождает.
+
+Жизненный цикл, восстановление внутристрочных виджетов, стили и границы безопасности описаны в последовательном руководстве VitePress.