@shelamkoff/rector 1.0.0

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

@@ -0,0 +1,419 @@
+.editor-gallery {
+  margin: 1.75rem 0;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.editor-gallery__item {
+  position: relative;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  cursor: pointer;
+  min-height: 0;
+}
+
+.editor-gallery__item img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.editor-gallery__caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0.5rem 0.75rem;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  color: #fff;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.editor-gallery__overflow {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  pointer-events: none;
+}
+
+.eg--1 .editor-gallery__item {
+  width: fit-content;
+}
+
+.eg--1 .editor-gallery__item img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 22.5rem;
+  object-fit: contain;
+}
+
+.eg--2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.25rem;
+  aspect-ratio: 2/1;
+}
+
+.eg--3a {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 0.25rem;
+  aspect-ratio: 3/2;
+}
+
+.eg--3a .editor-gallery__item:first-child {
+  grid-row: 1/-1;
+}
+
+.eg--3b {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 0.25rem;
+  aspect-ratio: 3/2;
+}
+
+.eg--3b .editor-gallery__item:last-child {
+  grid-row: 1/-1;
+  grid-column: 2;
+}
+
+.eg--3c {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 2fr 1fr;
+  gap: 0.25rem;
+  aspect-ratio: 3/2;
+}
+
+.eg--3c .editor-gallery__item:first-child {
+  grid-column: 1/-1;
+}
+
+.eg--4a {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 0.25rem;
+  aspect-ratio: 4/3;
+}
+
+.eg--4b {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: repeat(3, 1fr);
+  gap: 0.25rem;
+  aspect-ratio: 4/3;
+}
+
+.eg--4b .editor-gallery__item:first-child {
+  grid-row: 1/-1;
+}
+
+.eg--4c {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 2fr 1fr;
+  gap: 0.25rem;
+  aspect-ratio: 4/3;
+}
+
+.eg--4c .editor-gallery__item:first-child {
+  grid-column: 1/-1;
+}
+
+.eg--5a {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 3fr 2fr;
+  gap: 0.25rem;
+  aspect-ratio: 3/2;
+}
+
+.eg--5a .editor-gallery__item:nth-child(1) {
+  grid-column: 1/4;
+}
+
+.eg--5a .editor-gallery__item:nth-child(2) {
+  grid-column: 4/7;
+}
+
+.eg--5a .editor-gallery__item:nth-child(3) {
+  grid-column: 1/3;
+}
+
+.eg--5a .editor-gallery__item:nth-child(4) {
+  grid-column: 3/5;
+}
+
+.eg--5a .editor-gallery__item:nth-child(5) {
+  grid-column: 5/7;
+}
+
+.eg--5b {
+  display: grid;
+  grid-template-columns: 3fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 0.25rem;
+  aspect-ratio: 3/2;
+}
+
+.eg--5b .editor-gallery__item:first-child {
+  grid-row: 1/-1;
+}
+
+.eg--5c {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: 2fr 1fr;
+  gap: 0.25rem;
+  aspect-ratio: 3/2;
+}
+
+.eg--5c .editor-gallery__item:first-child {
+  grid-column: 1/-1;
+}
+
+.eg--6a {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 3fr 2fr;
+  gap: 0.25rem;
+  aspect-ratio: 3/2;
+}
+
+.eg--6b {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 0.25rem;
+  aspect-ratio: 3/2;
+}
+
+.eg--6b .editor-gallery__item:nth-child(1) {
+  grid-column: 1/4;
+  grid-row: 1/-1;
+}
+
+.eg--6b .editor-gallery__item:nth-child(2) {
+  grid-column: 4/7;
+}
+
+.eg--6b .editor-gallery__item:nth-child(3) {
+  grid-column: 4/7;
+}
+
+.eg--6b .editor-gallery__item:nth-child(4) {
+  grid-column: 4/5;
+}
+
+.eg--6b .editor-gallery__item:nth-child(5) {
+  grid-column: 5/6;
+}
+
+.eg--6b .editor-gallery__item:nth-child(6) {
+  grid-column: 6/7;
+}
+
+.eg--6c {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: 3fr 2fr;
+  gap: 0.25rem;
+  aspect-ratio: 3/2;
+}
+
+.eg--6c .editor-gallery__item:nth-child(1) {
+  grid-column: 1/3;
+}
+
+.eg--6c .editor-gallery__item:nth-child(2) {
+  grid-column: 3/5;
+}
+
+.eg--triptych {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.25rem;
+  aspect-ratio: 3/1.5;
+}
+
+.eg--masonry {
+  column-count: 3;
+  column-gap: 0.25rem;
+}
+
+.eg--masonry .editor-gallery__item {
+  break-inside: avoid;
+  margin-bottom: 0.25rem;
+}
+
+.eg--masonry .editor-gallery__item img {
+  height: auto;
+}
+
+.eg--poly-5 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 28rem;
+}
+
+.eg--poly-5 .editor-gallery__item {
+  border-radius: 0.25rem;
+}
+
+.eg--poly-5 .editor-gallery__item:nth-child(1) {
+  flex: 3 0 0;
+  height: 50%;
+}
+
+.eg--poly-5 .editor-gallery__item:nth-child(2) {
+  flex: 3.6 0 0;
+  height: 72%;
+}
+
+.eg--poly-5 .editor-gallery__item:nth-child(3) {
+  flex: 4 0 0;
+  height: 100%;
+}
+
+.eg--poly-5 .editor-gallery__item:nth-child(4) {
+  flex: 3.6 0 0;
+  height: 72%;
+}
+
+.eg--poly-5 .editor-gallery__item:nth-child(5) {
+  flex: 3 0 0;
+  height: 50%;
+}
+
+.eg--poly-3arch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 28rem;
+}
+
+.eg--poly-3arch .editor-gallery__item {
+  border-radius: 0.25rem;
+}
+
+.eg--poly-3arch .editor-gallery__item:nth-child(1) {
+  flex: 1 0 0;
+  height: 73%;
+}
+
+.eg--poly-3arch .editor-gallery__item:nth-child(2) {
+  flex: 1.15 0 0;
+  height: 100%;
+}
+
+.eg--poly-3arch .editor-gallery__item:nth-child(3) {
+  flex: 1 0 0;
+  height: 73%;
+}
+
+.eg--poly-5flat {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 28rem;
+}
+
+.eg--poly-5flat .editor-gallery__item {
+  border-radius: 0.25rem;
+}
+
+.eg--poly-5flat .editor-gallery__item:nth-child(1) {
+  flex: 3 0 0;
+  height: 55%;
+}
+
+.eg--poly-5flat .editor-gallery__item:nth-child(2) {
+  flex: 3.6 0 0;
+  height: 75%;
+}
+
+.eg--poly-5flat .editor-gallery__item:nth-child(3) {
+  flex: 4 0 0;
+  height: 100%;
+}
+
+.eg--poly-5flat .editor-gallery__item:nth-child(4) {
+  flex: 3.6 0 0;
+  height: 75%;
+}
+
+.eg--poly-5flat .editor-gallery__item:nth-child(5) {
+  flex: 3 0 0;
+  height: 55%;
+}
+
+.eg--poly-3steps {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 28rem;
+}
+
+.eg--poly-3steps .editor-gallery__item {
+  border-radius: 0.25rem;
+}
+
+.eg--poly-3steps .editor-gallery__item:nth-child(1) {
+  flex: 1 0 0;
+  height: 65%;
+  margin-top: 0;
+}
+
+.eg--poly-3steps .editor-gallery__item:nth-child(2) {
+  flex: 1 0 0;
+  height: 65%;
+  margin-top: 12%;
+}
+
+.eg--poly-3steps .editor-gallery__item:nth-child(3) {
+  flex: 1 0 0;
+  height: 65%;
+  margin-top: 24%;
+}
+
+@media (max-width: 479px) {
+  .eg--5b {
+    grid-template-columns: 2fr 1fr 1fr;
+  }
+
+  .eg--6b {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr 1fr;
+  }
+
+  .eg--6b .editor-gallery__item:nth-child(1) {
+    grid-column: 1/-1;
+    grid-row: auto;
+  }
+
+  .eg--6b .editor-gallery__item:nth-child(n+2) {
+    grid-column: auto;
+  }
+
+  .eg--masonry {
+    column-count: 2;
+  }
+}

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

@@ -0,0 +1,33 @@
+# Heading renderer
+
+Renderer for the `heading` 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 { createHeaderRenderer } from '@shelamkoff/rector/renderer/renderers/heading'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createHeaderRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{ "text": "Section", "level": 2, "align": "left" }
+```
+
+The `text` field uses the shared inline parser; validated `level` and `align` values control the element and alignment. 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/heading/README.ru.md

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

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

@@ -0,0 +1,8 @@
+/**
+ * Heading block renderer for the Rector document format.
+ * Block type: 'heading' (not 'header')
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes.js').LocaleValue>} _locale
+ * @returns {import('../../types.js').BlockRenderer<import('../../types.js').HeadingBlock>}
+ */
+export function createHeaderRenderer(classPrefix: string, _locale: Record<string, import("../../../shared/localeTypes.js").LocaleValue>): import("../../types.js").BlockRenderer<import("../../types.js").HeadingBlock>;

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

@@ -0,0 +1,38 @@
+// @ts-check
+import { resolvePath } from '../../../shared/resolvePath.js'
+import { mapHeadingTextFields as mapTextFields } from '../../../shared/mapTextFields.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+/**
+ * Heading block renderer for the Rector document format.
+ * Block type: 'heading' (not 'header')
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} _locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').HeadingBlock>}
+ */
+export function createHeaderRenderer(classPrefix, _locale) {
+  return {
+    type: 'heading',
+    styles: [styles],
+    mapTextFields,
+
+    /**
+     * @param {import('../../types').HeadingBlock} block
+     * @param {import('../../types').InlineParser} parseInline
+     * @returns {HTMLElement}
+     */
+    render(block, parseInline) {
+      const { level, text, align } = block.data
+
+      const heading = document.createElement(`h${level}`)
+      heading.className = `${classPrefix}-header ${classPrefix}-header--level-${level}`
+      if (align && align !== 'left') {
+        heading.style.textAlign = align
+      }
+      heading.appendChild(parseInline(text))
+
+      return heading
+    },
+  }
+}

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

@@ -0,0 +1,26 @@
+.editor-header {
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--er-text-1);
+  letter-spacing: -0.02em;
+}
+
+.editor-header--level-2 {
+  font-size: 24px;
+}
+
+.editor-header--level-3 {
+  font-size: 20px;
+}
+
+.editor-header--level-4 {
+  font-size: 18px;
+}
+
+.editor-header--level-5 {
+  font-size: 16px;
+}
+
+.editor-header--level-6 {
+  font-size: 14px;
+}

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

@@ -0,0 +1,42 @@
+# Image renderer
+
+Renderer for the `image` 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 { createImageRenderer } from '@shelamkoff/rector/renderer/renderers/image'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createImageRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{
+  "file": { "url": "https://cdn.example/image.jpg" },
+  "caption": "Caption",
+  "withBorder": false,
+  "expanded": false,
+  "withBackground": false,
+  "styles": { "objectFit": "cover", "borderRadius": "8px" }
+}
+```
+
+The [image plugin field reference](../../../plugins/image/README.md#field-reference) is the canonical persisted-data contract shared by the editor and renderer.
+
+The image source uses the media URL policy and the caption uses the shared inline parser. 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/image/README.ru.md

@@ -0,0 +1,42 @@
+# Рендерер Image
+
+Преобразует сохранённый блок `image` в принадлежащий рендереру DOM.
+
+Синхронная точка входа `@shelamkoff/rector/renderer` включает все встроенные рендереры, поэтому до её импорта установите `@shelamkoff/carousel` и `@shelamkoff/expose`. Значение `blockTypes: []` отключает создание встроенных рендереров, но не меняет правила разрешения модулей ESM.
+
+## Использование
+
+```js
+import { createEditorRenderer } from '@shelamkoff/rector/renderer'
+import { createImageRenderer } from '@shelamkoff/rector/renderer/renderers/image'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createImageRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// При удалении добавленного результата:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Типичные данные
+
+```json
+{
+  "file": { "url": "https://cdn.example/image.jpg" },
+  "caption": "Подпись",
+  "withBorder": false,
+  "expanded": false,
+  "withBackground": false,
+  "styles": { "objectFit": "cover", "borderRadius": "8px" }
+}
+```
+
+Канонический контракт сохраняемых данных, общий для редактора и рендерера, приведён в [справочнике полей плагина изображения](../../../plugins/image/README.ru.md#поля-данных).
+
+Адрес изображения проходит политику URL для медиафайлов, а подпись — общий обработчик внутристрочной разметки. Рендерер объявляет одну таблицу стилей и не создаёт обработчиков или сторонних экземпляров.
+
+Если рендерер объявляет стили, показанный выше явный вызов `EditorRenderer.injectStyles()` подключает их, а возвращённый владелец освобождает.
+
+Жизненный цикл, восстановление внутристрочных виджетов, стили и границы безопасности описаны в последовательном руководстве VitePress.

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

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