@shelamkoff/rector 1.0.2 → 1.0.4

package/dist/inline-plugins/color/README.md

@@ -13,7 +13,6 @@ import { createEditor } from '@shelamkoff/rector'
 import { Paragraph } from '@shelamkoff/rector/plugins/paragraph'
 import { createColorSwatchPlugin } from '@shelamkoff/rector/inline-plugins/color'
 import '@shelamkoff/rector/styles/editor.css'
-import '@shelamkoff/color-picker/styles.css'
 
 const editor = createEditor({
   holder: document.querySelector('#editor'),
@@ -54,7 +53,7 @@ In read-only mode the widget remains visible but does not open the picker. `edit
 
 ## Styles and document output
 
-Import the color-picker stylesheet in addition to the Rector editor stylesheet. The widget root uses `.oe-ip.oe-ip--color`; its dot and label use `.oe-ip__dot` and `.oe-ip__label`. Scope host overrides under the editor or renderer container.
+The plugin acquires the color-picker stylesheet through Rector's reference-counted style registry while its editor is mounted, so applications must not import it separately. The widget root uses `.oe-ip.oe-ip--color`; its dot and label use `.oe-ip__dot` and `.oe-ip__label`. Scope host overrides under the editor or renderer container.
 
 For document output, pass `createColorSwatchPlugin()` in `EditorRenderer`'s `inlinePlugins` array. The renderer uses its `createWidget()` and `getData()` subset; the picker is not mounted by the renderer.
 

package/dist/inline-plugins/color/README.ru.md

@@ -13,7 +13,6 @@ import { createEditor } from '@shelamkoff/rector'
 import { Paragraph } from '@shelamkoff/rector/plugins/paragraph'
 import { createColorSwatchPlugin } from '@shelamkoff/rector/inline-plugins/color'
 import '@shelamkoff/rector/styles/editor.css'
-import '@shelamkoff/color-picker/styles.css'
 
 const editor = createEditor({
   holder: document.querySelector('#editor'),
@@ -54,7 +53,7 @@ const editor = createEditor({
 
 ## Стили и отображение документа
 
-Кроме стилей редактора импортируйте таблицу стилей средства выбора цвета. Корневой элемент использует `.oe-ip.oe-ip--color`, а точка и подпись — `.oe-ip__dot` и `.oe-ip__label`. Ограничивайте переопределения контейнером редактора или рендерера.
+Плагин сам подключает таблицу стилей средства выбора цвета через реестр Rector с подсчётом ссылок на время жизни редактора, поэтому приложению не нужно импортировать её отдельно. Корневой элемент использует `.oe-ip.oe-ip--color`, а точка и подпись — `.oe-ip__dot` и `.oe-ip__label`. Ограничивайте переопределения контейнером редактора или рендерера.
 
 Для отображения документа передайте `createColorSwatchPlugin()` в массив `inlinePlugins` конструктора `EditorRenderer`. Рендерер использует только `createWidget()` и `getData()`; окно выбора цвета в нём не подключается.
 

package/dist/inline-plugins/color.js

@@ -1,4 +1,5 @@
-import { ColorPicker } from '@shelamkoff/color-picker'
+import { ColorPicker, colorPickerStylesUrl } from '@shelamkoff/color-picker'
+import { injectStyleUrls } from '../core/StyleInjector.js'
 import { generateInlineId } from '../shared/inlineMarshal.js'
 import { normalizeTextValue } from '../shared/textFormat.js'
 
@@ -12,6 +13,8 @@ import { normalizeTextValue } from '../shared/textFormat.js'
 export function createColorSwatchPlugin() {
   /** @type {import('../core/types').IScopedI18n | null} */
   let i18n = null
+  /** @type {{ destroy(): void } | null} */
+  let styleHandle = null
 
   return {
     type: 'color',
@@ -19,6 +22,10 @@ export function createColorSwatchPlugin() {
     icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21a9 9 0 0 1 0-18c4.97 0 9 3.582 9 8c0 1.06-.474 2.078-1.318 2.828S17.938 15 16.5 15H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21"/><circle cx="7.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="12" cy="7.5" r=".5" fill="currentColor"/><circle cx="16.5" cy="10.5" r=".5" fill="currentColor"/></svg>',
     /** @param {import('../core/types').IScopedI18n} _i18n */
     setI18n(_i18n) { i18n = _i18n },
+    mount() {
+      if (styleHandle) throw new Error('Color swatch plugin is already mounted')
+      styleHandle = injectStyleUrls([colorPickerStylesUrl])
+    },
     pasteConfig: {
       patterns: [
         /^#[0-9a-fA-F]{3}$/,
@@ -72,6 +79,11 @@ export function createColorSwatchPlugin() {
         value: element.dataset.value || '#000000',
       }
     },
+
+    destroy() {
+      styleHandle?.destroy()
+      styleHandle = null
+    },
   }
 }
 

package/dist/plugins/gallery/README.md

@@ -1,92 +1,92 @@
-# Gallery block plugin
-
-Multi-image gallery with layouts, captions, appearance settings, reordering, and viewer options.
-
-## Install and register
-
-```bash
-npm install @shelamkoff/rector
-```
-
-```js
-import { createEditor } from '@shelamkoff/rector'
-import { Gallery } from '@shelamkoff/rector/plugins/gallery'
-import '@shelamkoff/rector/styles/editor.css'
-
-const editor = createEditor({
-  holder: document.querySelector('#editor'),
-  plugins: [new Gallery()],
-})
-```
-
-The registered block type is `gallery`. The class is also exported by the complete `@shelamkoff/rector/plugins` preset and can be loaded through `@shelamkoff/rector/plugins/async`.
-
-## Data
-
-```json
-{
-  "images": [{ "url": "https://cdn.example/a.jpg", "caption": "A" }],
-  "layout": "auto",
-  "styles": { "gap": "8px", "borderRadius": "8px", "height": "420px" },
-  "options": { "loop": true, "zoom": true, "navigation": true, "captions": true, "thumbnails": true, "fullscreen": true, "autoplayInterval": 3000 }
-}
-```
-
-### Field reference
-
-| Field | Required | Meaning and constraints |
-| --- | --- | --- |
-| `images` | yes | Non-empty array. Every item requires a media-policy `url`; `caption` is an optional string. |
-| `layout` | yes | One of `auto`, `1`, `2`, `3a`, `3b`, `3c`, `4a`, `4b`, `4c`, `5a`, `5b`, `5c`, `6a`, `6b`, `6c`, `triptych`, `masonry`, `poly-5`, `poly-3arch`, `poly-5flat`, or `poly-3steps`. |
-| `styles` | no | String-valued map. The built-in settings UI uses `gap`, `borderRadius`, and `height`. |
-| `options.loop` | no | Wraps viewer navigation from the last image to the first. The new-block default is `true`. |
-| `options.zoom`, `navigation`, `captions`, `fullscreen` | no | Boolean viewer controls; new-block defaults are `true`. |
-| `options.thumbnails` | no | Shows viewer thumbnails; the new-block default is `false`. |
-| `options.autoplayInterval` | no | Positive finite interval in milliseconds. Omit it to disable autoplay. `0` is not valid persisted data. |
-
-Without `uploadFile`, local files become data URLs. Callback results are accepted only when `url` passes the shared media URL policy. The viewer requires `@shelamkoff/expose`.
-
-## Configuration
-
-Every built-in block plugin accepts two style ownership options: `injectStyles?: boolean` defaults to `true`; set it to `false` when the host bundles that plugin's CSS. `css?: string` adds one host-provided stylesheet URL after the plugin default, or acts as the replacement URL when default injection is disabled.
-
-`uploadFile?: (file: File, context: { signal: AbortSignal }) => Promise<{ url: string; alt?: string }>` uploads each file. `actions?: Array<{ icon?; label; handler(context: { signal: AbortSignal }): Promise<Array<{ url: string; alt?: string }> | null> }>` adds application media sources. Both callbacks must stop work when the supplied signal is aborted.
-
-## Application file sources
-
-Use `uploadFile` for browser `File` objects and `actions` for existing assets selected from a media library, cloud drive, or another application-owned catalog. An action may return several images; the complete selection becomes one undo/redo step.
-
-```js
-const gallery = new Gallery({
-  actions: [{
-    label: 'Media library',
-    async handler({ signal }) {
-      const assets = await openMediaLibrary({
-        accept: ['image/*'],
-        multiple: true,
-        signal,
-      })
-      return assets?.map(asset => ({
-        url: asset.url,
-        alt: asset.alt,
-      })) ?? null
-    },
-  }],
-})
-```
-
-Return `null` when selection is cancelled. The optional `alt` value initializes the image caption. Multiple independent sources may be added as separate `actions` entries. See [File sources and media libraries](https://shelamkoff.github.io/editor/guide/file-sources) for upload, cancellation, validation, and reusable adapter guidance.
-
-## Capabilities
-
-Multi-file upload; image-file paste with an async transaction; layout/style controls; drag reordering; custom media actions.
-
-## Undo, lifecycle, and styles
-
-User actions exposed by the plugin enter the command pipeline through the supplied `context.mutate()` capability, so each completed action is one undo/redo step. The editor reference-counts the plugin's declared stylesheet URLs. Removing a block calls its cleanup hook; removing the editor calls `destroy()` for every remaining block and then releases shared plugin resources.
-
-Do not remove the editor holder without first calling `editor.destroy()`.
-
-## Document output
-
-Use the matching renderer from `@shelamkoff/rector/renderer/renderers/gallery`. The VitePress guide documents configuration, commands and history, extension contracts, document migrations, styling, security, and lifecycle in a sequential form.
+# Gallery block plugin
+
+Multi-image gallery with layouts, captions, appearance settings, reordering, and viewer options.
+
+## Install and register
+
+```bash
+npm install @shelamkoff/rector
+```
+
+```js
+import { createEditor } from '@shelamkoff/rector'
+import { Gallery } from '@shelamkoff/rector/plugins/gallery'
+import '@shelamkoff/rector/styles/editor.css'
+
+const editor = createEditor({
+  holder: document.querySelector('#editor'),
+  plugins: [new Gallery()],
+})
+```
+
+The registered block type is `gallery`. The class is also exported by the complete `@shelamkoff/rector/plugins` preset and can be loaded through `@shelamkoff/rector/plugins/async`.
+
+## Data
+
+```json
+{
+  "images": [{ "url": "https://cdn.example/a.jpg", "caption": "A" }],
+  "layout": "auto",
+  "styles": { "gap": "8px", "borderRadius": "8px", "height": "420px" },
+  "options": { "loop": true, "zoom": true, "navigation": true, "captions": true, "thumbnails": true, "fullscreen": true, "autoplayInterval": 3000 }
+}
+```
+
+### Field reference
+
+| Field | Required | Meaning and constraints |
+| --- | --- | --- |
+| `images` | yes | Non-empty array. Every item requires a media-policy `url`; `caption` is an optional string. |
+| `layout` | yes | One of `auto`, `1`, `2`, `3a`, `3b`, `3c`, `4a`, `4b`, `4c`, `5a`, `5b`, `5c`, `6a`, `6b`, `6c`, `triptych`, `masonry`, `poly-5`, `poly-3arch`, `poly-5flat`, or `poly-3steps`. |
+| `styles` | no | String-valued map. The built-in settings UI uses `gap`, `borderRadius`, and `height`. |
+| `options.loop` | no | Wraps viewer navigation from the last image to the first. The new-block default is `true`. |
+| `options.zoom`, `navigation`, `captions`, `fullscreen` | no | Boolean viewer controls; new-block defaults are `true`. |
+| `options.thumbnails` | no | Shows viewer thumbnails; the new-block default is `false`. |
+| `options.autoplayInterval` | no | Positive finite interval in milliseconds. Omit it to disable autoplay. `0` is not valid persisted data. |
+
+Without `uploadFile`, local files become data URLs. Callback results are accepted only when `url` passes the shared media URL policy. The viewer requires `@shelamkoff/expose`. The `masonry` layout is measured and positioned by `@shelamkoff/masonry`; it is not a CSS-columns approximation.
+
+## Configuration
+
+Every built-in block plugin accepts two style ownership options: `injectStyles?: boolean` defaults to `true`; set it to `false` when the host bundles that plugin's CSS. `css?: string` adds one host-provided stylesheet URL after the plugin default, or acts as the replacement URL when default injection is disabled.
+
+`uploadFile?: (file: File, context: { signal: AbortSignal }) => Promise<{ url: string; alt?: string }>` uploads each file. `actions?: Array<{ icon?; label; handler(context: { signal: AbortSignal }): Promise<Array<{ url: string; alt?: string }> | null> }>` adds application media sources. Both callbacks must stop work when the supplied signal is aborted.
+
+## Application file sources
+
+Use `uploadFile` for browser `File` objects and `actions` for existing assets selected from a media library, cloud drive, or another application-owned catalog. An action may return several images; the complete selection becomes one undo/redo step.
+
+```js
+const gallery = new Gallery({
+  actions: [{
+    label: 'Media library',
+    async handler({ signal }) {
+      const assets = await openMediaLibrary({
+        accept: ['image/*'],
+        multiple: true,
+        signal,
+      })
+      return assets?.map(asset => ({
+        url: asset.url,
+        alt: asset.alt,
+      })) ?? null
+    },
+  }],
+})
+```
+
+Return `null` when selection is cancelled. The optional `alt` value initializes the image caption. Multiple independent sources may be added as separate `actions` entries. See [File sources and media libraries](https://shelamkoff.github.io/editor/guide/file-sources) for upload, cancellation, validation, and reusable adapter guidance.
+
+## Capabilities
+
+Multi-file upload; image-file paste with an async transaction; layout/style controls; drag reordering; custom media actions.
+
+## Undo, lifecycle, and styles
+
+User actions exposed by the plugin enter the command pipeline through the supplied `context.mutate()` capability, so each completed action is one undo/redo step. The editor reference-counts the plugin's declared stylesheet URLs. Removing a block calls its cleanup hook; removing the editor calls `destroy()` for every remaining block and then releases shared plugin resources.
+
+Do not remove the editor holder without first calling `editor.destroy()`.
+
+## Document output
+
+Use the matching renderer from `@shelamkoff/rector/renderer/renderers/gallery`. The VitePress guide documents configuration, commands and history, extension contracts, document migrations, styling, security, and lifecycle in a sequential form.

package/dist/plugins/gallery/README.ru.md

@@ -28,23 +28,23 @@ const editor = createEditor({
   "images": [{ "url": "https://cdn.example/a.jpg", "caption": "A" }],
   "layout": "auto",
   "styles": { "gap": "8px", "borderRadius": "8px", "height": "420px" },
-  "options": { "loop": true, "zoom": true, "navigation": true, "captions": true, "thumbnails": true, "fullscreen": true, "autoplayInterval": 3000 }
-}
-```
-
-### Поля данных
-
-| Поле | Обязательное | Назначение и ограничения |
-| --- | --- | --- |
-| `images` | да | Непустой массив. Каждому элементу нужен разрешённый политикой медиафайлов `url`; `caption` — необязательная строка. |
-| `layout` | да | Одно из значений `auto`, `1`, `2`, `3a`, `3b`, `3c`, `4a`, `4b`, `4c`, `5a`, `5b`, `5c`, `6a`, `6b`, `6c`, `triptych`, `masonry`, `poly-5`, `poly-3arch`, `poly-5flat` или `poly-3steps`. |
-| `styles` | нет | Карта строковых значений. Встроенная панель настроек использует `gap`, `borderRadius` и `height`. |
-| `options.loop` | нет | После последнего изображения переходит к первому; для нового блока по умолчанию `true`. |
-| `options.zoom`, `navigation`, `captions`, `fullscreen` | нет | Логические параметры просмотра; для нового блока по умолчанию `true`. |
-| `options.thumbnails` | нет | Показывает миниатюры; для нового блока по умолчанию `false`. |
-| `options.autoplayInterval` | нет | Положительный конечный интервал в миллисекундах. Отсутствие поля отключает автовоспроизведение. Значение `0` недопустимо в сохранённых данных. |
-
-Без `uploadFile` файлы сохраняются как URL со встроенными данными. Для полноэкранного просмотра нужен `@shelamkoff/expose`.
+  "options": { "loop": true, "zoom": true, "navigation": true, "captions": true, "thumbnails": true, "fullscreen": true, "autoplayInterval": 3000 }
+}
+```
+
+### Поля данных
+
+| Поле | Обязательное | Назначение и ограничения |
+| --- | --- | --- |
+| `images` | да | Непустой массив. Каждому элементу нужен разрешённый политикой медиафайлов `url`; `caption` — необязательная строка. |
+| `layout` | да | Одно из значений `auto`, `1`, `2`, `3a`, `3b`, `3c`, `4a`, `4b`, `4c`, `5a`, `5b`, `5c`, `6a`, `6b`, `6c`, `triptych`, `masonry`, `poly-5`, `poly-3arch`, `poly-5flat` или `poly-3steps`. |
+| `styles` | нет | Карта строковых значений. Встроенная панель настроек использует `gap`, `borderRadius` и `height`. |
+| `options.loop` | нет | После последнего изображения переходит к первому; для нового блока по умолчанию `true`. |
+| `options.zoom`, `navigation`, `captions`, `fullscreen` | нет | Логические параметры просмотра; для нового блока по умолчанию `true`. |
+| `options.thumbnails` | нет | Показывает миниатюры; для нового блока по умолчанию `false`. |
+| `options.autoplayInterval` | нет | Положительный конечный интервал в миллисекундах. Отсутствие поля отключает автовоспроизведение. Значение `0` недопустимо в сохранённых данных. |
+
+Без `uploadFile` файлы сохраняются как URL со встроенными данными. Для полноэкранного просмотра нужен `@shelamkoff/expose`. Раскладка `masonry` измеряется и позиционируется библиотекой `@shelamkoff/masonry`, а не имитацией через CSS columns.
 
 ## Конфигурация
 

package/dist/plugins/gallery/gallery.css

@@ -434,19 +434,40 @@
   aspect-ratio: 3 / 1.5;
 }
 
-/* Masonry: CSS columns */
-.eg--masonry {
-  column-count: 3;
-  column-gap: 0.25rem;
-}
-.eg--masonry .oe-gallery__slot {
-  break-inside: avoid;
-  margin-bottom: 0.25rem;
-}
-.eg--masonry .oe-gallery__slot-img {
-  height: auto;
-}
-
+/* Masonry: layout is calculated by @shelamkoff/masonry. */
+.eg--masonry {
+  position: relative;
+  width: 100%;
+  gap: 0.25rem;
+}
+
+.eg--masonry.masonry-container > .masonry-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  will-change: transform;
+  opacity: 0;
+}
+
+.eg--masonry.masonry-container > .masonry-item--visible {
+  opacity: 1;
+}
+
+.eg--masonry .oe-gallery__slot {
+  width: 100%;
+  margin: 0;
+}
+
+.eg--masonry .oe-gallery__slot-img {
+  height: auto;
+}
+
+.eg--masonry-fallback {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
+  height: auto !important;
+}
+
 /* ── Polyptych templates ── */
 
 /* poly-5: Classic 5-panel pyramid, center tallest */
@@ -511,11 +532,10 @@
   .eg--6b {
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 1fr 1fr;
-  }
-  .eg--6b .oe-gallery__slot:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
-  .eg--6b .oe-gallery__slot:nth-child(n+2) { grid-column: auto; }
-  .eg--masonry { column-count: 2; }
-}
+  }
+  .eg--6b .oe-gallery__slot:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
+  .eg--6b .oe-gallery__slot:nth-child(n+2) { grid-column: auto; }
+}
 
 /* ── Action bar ───────────────────────────────────────────────────────────── */
 

package/dist/plugins/gallery/settings.js

@@ -153,20 +153,25 @@ function buildStylesGroup(wrapper, state, deps, signal) {
   const group = createGroup(deps.t('styles', 'Styles'))
   const styles = state.data.styles
 
-  const makeStyleInput = (/** @type {string} */ key, /** @type {string} */ value) => {
-    const input = document.createElement('input')
-    input.type = 'text'
-    input.className = CSS.styleInput
-    input.value = value || ''
+  const makeStyleInput = (/** @type {string} */ key, /** @type {string} */ value) => {
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.className = CSS.styleInput
+    input.value = value || ''
     input.addEventListener('input', () => {
       deps.mutate(() => {
         if (input.value) styles[key] = input.value
         else delete styles[key]
-        applyGalleryStyles(wrapper, state)
-      })
-    }, { signal })
-    return input
-  }
+        applyGalleryStyles(wrapper, state)
+      })
+    }, { signal })
+    if (key === 'gap') {
+      input.addEventListener('change', () => {
+        if (state.data.layout === 'masonry') deps.reRender()
+      }, { signal })
+    }
+    return input
+  }
 
   const makeRow = (/** @type {string} */ label, /** @type {HTMLElement} */ input) => {
     const row = document.createElement('div')

package/dist/plugins/gallery/view-filled.js

@@ -10,10 +10,11 @@ import {
 } from './layout.js'
 import { applyGalleryStyles } from './styles.js'
 import { buildSettingsPanel } from './settings.js'
-import {
-  attachExternalDrop, createEmptySlot, createFilledSlot, createOverflowItem,
-} from './slot.js'
-import { createPluginLayer } from '../shared/layer.js'
+import {
+  attachExternalDrop, createEmptySlot, createFilledSlot, createOverflowItem,
+} from './slot.js'
+import { createPluginLayer } from '../shared/layer.js'
+import { mountGalleryMasonry } from '../../shared/galleryMasonry.js'
 
 /**
  * @typedef {Object} FilledViewDeps
@@ -66,21 +67,27 @@ export function renderFilledView(wrapper, state, deps) {
  * @param {FilledViewDeps} deps
  * @param {AbortSignal} signal
  */
-function renderMasonry(wrapper, state, deps, signal) {
-  const grid = document.createElement('div')
-  grid.className = `${CSS.grid} eg--masonry`
-
-  const slotDeps = makeSlotDeps(deps)
-
-  state.data.images.forEach((img, i) => {
-    const slot = createFilledSlot(img, i, signal, slotDeps)
-    slot.dataset.index = String(i)
-    grid.appendChild(slot)
-  })
-
-  if (!deps.readOnly) attachExternalDrop(grid, signal, deps.onFilesDropped)
-  wrapper.appendChild(grid)
-}
+function renderMasonry(wrapper, state, deps, signal) {
+  const grid = document.createElement('div')
+  grid.className = `${CSS.grid} eg--masonry`
+
+  const slotDeps = makeSlotDeps(deps)
+  /** @type {HTMLElement[]} */
+  const slots = []
+
+  state.data.images.forEach((img, i) => {
+    const slot = createFilledSlot(img, i, signal, slotDeps)
+    slot.dataset.index = String(i)
+    const image = /** @type {HTMLImageElement | null} */ (slot.querySelector(`.${CSS.slotImg}`))
+    if (image) image.loading = 'eager'
+    slots.push(slot)
+    grid.appendChild(slot)
+  })
+
+  if (!deps.readOnly) attachExternalDrop(grid, signal, deps.onFilesDropped)
+  wrapper.appendChild(grid)
+  mountGalleryMasonry(grid, slots, { signal })
+}
 
 /**
  * Slot-based: fixed template + optional overflow row.

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

@@ -1,41 +1,41 @@
-# Gallery renderer
-
-Renderer for the `gallery` block. It converts persisted block data into renderer-owned DOM.
-The Gallery renderer directly uses `@shelamkoff/expose` and its `exposeStylesUrl` 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 { createGalleryRenderer } from '@shelamkoff/rector/renderer/renderers/gallery'
-
-const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
-renderer.registerRenderer(createGalleryRenderer('article', {}))
-const rendererStyles = renderer.injectStyles()
-renderer.renderTo(documentData, document.querySelector('#article'))
-
-// When the mounted output is removed:
-renderer.destroy()
-rendererStyles.destroy()
-```
-
-## Typical data
-
-```json
-{
-  "images": [{ "url": "https://cdn.example/a.jpg", "caption": "A" }],
-  "layout": "auto",
-  "styles": { "gap": "8px", "borderRadius": "8px", "height": "420px" },
-  "options": { "loop": true, "zoom": true, "navigation": true, "captions": true, "thumbnails": true, "fullscreen": true, "autoplayInterval": 3000 }
-}
-```
-
-The complete persisted-data contract, including layouts, defaults, and validation constraints, is defined by the matching [Gallery plugin](../../../plugins/gallery/README.md#field-reference).
-
-Image sources use the media URL policy. The renderer owns its Expose viewers and image-readiness listeners; `destroy()` releases them. It declares gallery and Expose 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.
+# Gallery renderer
+
+Renderer for the `gallery` block. It converts persisted block data into renderer-owned DOM.
+The Gallery renderer directly uses `@shelamkoff/expose` and its `exposeStylesUrl` package export. Its `masonry` layout is powered by `@shelamkoff/masonry` and is disposed together with renderer-owned output.
+
+The `@shelamkoff/rector/renderer` entry contains the synchronous built-in preset, so `@shelamkoff/carousel`, `@shelamkoff/expose`, and `@shelamkoff/masonry` 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 { createGalleryRenderer } from '@shelamkoff/rector/renderer/renderers/gallery'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createGalleryRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{
+  "images": [{ "url": "https://cdn.example/a.jpg", "caption": "A" }],
+  "layout": "auto",
+  "styles": { "gap": "8px", "borderRadius": "8px", "height": "420px" },
+  "options": { "loop": true, "zoom": true, "navigation": true, "captions": true, "thumbnails": true, "fullscreen": true, "autoplayInterval": 3000 }
+}
+```
+
+The complete persisted-data contract, including layouts, defaults, and validation constraints, is defined by the matching [Gallery plugin](../../../plugins/gallery/README.md#field-reference).
+
+Image sources use the media URL policy. The renderer owns its Expose viewers and image-readiness listeners; `destroy()` releases them. It declares gallery and Expose 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.