@shelamkoff/rector 1.0.0

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

@@ -0,0 +1,9 @@
+/**
+ * Code block renderer with syntax highlighting
+ * Uses highlight.js for syntax highlighting with auto-detection
+ * @see https://highlightjs.org/
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes.js').LocaleValue>} locale
+ * @returns {import('../../types.js').BlockRenderer<import('../../types.js').CodeBlock>}
+ */
+export function createCodeRenderer(classPrefix: string, locale: Record<string, import("../../../shared/localeTypes.js").LocaleValue>): import("../../types.js").BlockRenderer<import("../../types.js").CodeBlock>;

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

@@ -0,0 +1,137 @@
+// @ts-check
+import {
+    getHighlightRuntime,
+    highlightCode as highlightWithRuntime,
+    loadHighlightRuntime,
+} from '../../../shared/highlightRuntime.js'
+import { escapeHtml } from '../../../shared/sanitize/escapeHtml.js'
+import { resolvePath } from '../../../shared/resolvePath.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+
+/**
+ * Highlight code with syntax highlighting
+ * @param {string} code
+ * @param {string} [language]
+ * @returns {{ value: string; language: string }}
+ */
+function highlightCode(code, language) {
+    const highlighted = highlightWithRuntime(code, language)
+    if (highlighted) return highlighted
+    return {
+        value: escapeHtml(code),
+        language: language && language !== 'auto' ? language : 'plaintext',
+    }
+}
+// Tabler icons for copy button
+const ICON_CLIPBOARD = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5h-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2"/><path d="M9 3m0 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z"/></svg>`
+const ICON_CHECK = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10-10"/></svg>`
+
+/**
+ * Code block renderer with syntax highlighting
+ * Uses highlight.js for syntax highlighting with auto-detection
+ * @see https://highlightjs.org/
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').CodeBlock>}
+ */
+export function createCodeRenderer(classPrefix, /** @type {Record<string, import('../../../shared/localeTypes').LocaleValue>} */ locale) {
+    /** @type {WeakMap<HTMLElement, number>} */
+    const resetTimers = new WeakMap()
+    /** @type {WeakSet<HTMLElement>} */
+    const liveElements = new WeakSet()
+    const t = (/** @type {string} */ key, /** @type {string} */ fallback) => {
+        const value = locale?.[key]
+        return typeof value === 'string' ? value : fallback
+    }
+    return {
+        type: 'code',
+        styles: [styles],
+
+        /**
+         * @param {import('../../types').CodeBlock} block
+         * @param {import('../../types').InlineParser} _parseInline
+         * @returns {HTMLElement}
+         */
+        render(block, _parseInline) {
+            const { code, language } = block.data
+
+            const wrapper = document.createElement('div')
+            wrapper.className = `${classPrefix}-code`
+            liveElements.add(wrapper)
+
+            const highlighted = highlightCode(code, language)
+
+            // Top bar: language label + copy button
+            const bar = document.createElement('div')
+            bar.className = `${classPrefix}-code__bar`
+
+            const langLabel = document.createElement('span')
+            langLabel.className = `${classPrefix}-code__lang`
+            langLabel.textContent = (highlighted.language && highlighted.language !== 'plaintext') ? highlighted.language : ''
+            bar.appendChild(langLabel)
+
+            const copyBtn = document.createElement('button')
+            copyBtn.type = 'button'
+            copyBtn.className = `${classPrefix}-code__copy`
+            copyBtn.innerHTML = ICON_CLIPBOARD
+            copyBtn.title = t('renderer.code.copy', 'Copy code')
+
+            copyBtn.addEventListener('click', async () => {
+                try {
+                    await navigator.clipboard.writeText(code)
+                    if (!liveElements.has(wrapper)) return
+                    copyBtn.innerHTML = ICON_CHECK
+                    copyBtn.classList.add(`${classPrefix}-code__copy--success`)
+
+                    const previousTimer = resetTimers.get(wrapper)
+                    if (previousTimer !== undefined) clearTimeout(previousTimer)
+                    const timer = window.setTimeout(() => {
+                        resetTimers.delete(wrapper)
+                        if (!liveElements.has(wrapper)) return
+                        copyBtn.innerHTML = ICON_CLIPBOARD
+                        copyBtn.classList.remove(`${classPrefix}-code__copy--success`)
+                    }, 2000)
+                    resetTimers.set(wrapper, timer)
+                } catch {
+                    // Clipboard API unavailable (HTTP without localhost)
+                }
+            })
+
+            bar.appendChild(copyBtn)
+            wrapper.appendChild(bar)
+
+            // Code content
+            const pre = document.createElement('pre')
+            pre.className = `${classPrefix}-code__pre`
+
+            const codeElement = document.createElement('code')
+            codeElement.className = `${classPrefix}-code__content hljs language-${highlighted.language}`
+            codeElement.innerHTML = highlighted.value
+
+            if (!getHighlightRuntime()) {
+                void loadHighlightRuntime().then(() => {
+                    if (!liveElements.has(wrapper)) return
+                    const loaded = highlightCode(code, language)
+                    langLabel.textContent = (loaded.language && loaded.language !== 'plaintext') ? loaded.language : ''
+                    codeElement.className = classPrefix + '-code__content hljs language-' + loaded.language
+                    codeElement.innerHTML = loaded.value
+                }).catch(() => {
+                    // Safe escaped fallback is already rendered.
+                })
+            }
+
+            pre.appendChild(codeElement)
+            wrapper.appendChild(pre)
+
+            return wrapper
+        },
+        destroy(element) {
+            liveElements.delete(element)
+            const timer = resetTimers.get(element)
+            if (timer !== undefined) clearTimeout(timer)
+            resetTimers.delete(element)
+        },
+    }
+}

package/dist/renderer/renderers/code/locale/en.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    'renderer.code.copy': string;
+    'renderer.code.copied': string;
+};
+export default _default;

package/dist/renderer/renderers/code/locale/en.js

@@ -0,0 +1,4 @@
+export default {
+  'renderer.code.copy': 'Copy code',
+  'renderer.code.copied': 'Copied!',
+}

package/dist/renderer/renderers/code/locale/ru.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    'renderer.code.copy': string;
+    'renderer.code.copied': string;
+};
+export default _default;

package/dist/renderer/renderers/code/locale/ru.js

@@ -0,0 +1,4 @@
+export default {
+  'renderer.code.copy': 'Копировать код',
+  'renderer.code.copied': 'Скопировано!',
+}

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

@@ -0,0 +1,330 @@
+.editor-code {
+  position: relative;
+  background-color: var(--er-code-bg);
+  border-radius: var(--er-radius);
+  border: none;
+  overflow: hidden;
+}
+
+.editor-code__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--er-code-border);
+}
+
+.editor-code__lang {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--er-code-copy-color);
+  font-family: var(--er-font-mono), monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.editor-code__copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--er-radius-sm);
+  color: var(--er-code-copy-color);
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.editor-code:hover .editor-code__copy,
+.editor-code__copy:focus-visible {
+  opacity: 1;
+}
+
+.editor-code__copy:hover {
+  color: var(--er-text-2);
+  background-color: var(--er-code-bar-bg);
+}
+
+.editor-code__copy--success {
+  color: var(--er-code-success, #3fb950);
+}
+
+.editor-code__copy svg {
+  flex-shrink: 0;
+}
+
+.editor-code__pre {
+  margin: 0;
+  padding: 16px 24px;
+  background: transparent;
+  overflow-x: auto;
+}
+
+.editor-code__pre::-webkit-scrollbar {
+  height: 5px;
+}
+
+.editor-code__pre::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.editor-code__pre::-webkit-scrollbar-thumb {
+  background: var(--er-code-scrollbar, rgba(255, 255, 255, 0.15));
+  border-radius: 3px;
+}
+
+.editor-code__content {
+  display: block;
+  font-family: var(--er-font-mono), monospace;
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--er-code-text);
+  white-space: pre;
+  tab-size: 2;
+  background: transparent;
+}
+
+.editor-code code {
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* ── Highlight.js theme: Dark (default) ──────────────────────────────────── */
+
+.hljs {
+  background: transparent;
+  color: #c9d1d9;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #8b949e;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-tag,
+.hljs-deletion {
+  color: #ff7b72;
+}
+
+.hljs-literal,
+.hljs-number {
+  color: #79c0ff;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-meta .hljs-string {
+  color: #a5d6ff;
+}
+
+.hljs-type,
+.hljs-built_in {
+  color: #ffa657;
+}
+
+.hljs-attr,
+.hljs-attribute {
+  color: #79c0ff;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #ffa657;
+}
+
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #d2a8ff;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id {
+  color: #a5d6ff;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.function_ {
+  color: #d2a8ff;
+}
+
+.hljs-class .hljs-title {
+  color: #ffa657;
+}
+
+.hljs-name {
+  color: #7ee787;
+}
+
+.hljs-section {
+  color: #79c0ff;
+}
+
+.hljs-subst,
+.hljs-params,
+.hljs-punctuation {
+  color: #c9d1d9;
+}
+
+.hljs-property {
+  color: #79c0ff;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+/* ── Highlight.js theme: Light ───────────────────────────────────────────── */
+
+.editor-content--light .editor-code__pre::-webkit-scrollbar-thumb,
+.editor-content[data-theme="light"] .editor-code__pre::-webkit-scrollbar-thumb {
+  background: var(--er-code-scrollbar, rgba(0, 0, 0, 0.15));
+}
+
+.editor-content--light .editor-code__copy--success,
+.editor-content[data-theme="light"] .editor-code__copy--success {
+  color: var(--er-code-success, #16a34a);
+}
+
+.editor-content--light .hljs,
+.editor-content[data-theme="light"] .hljs {
+  background: transparent;
+  color: #24292e;
+}
+
+.editor-content--light .hljs-comment,
+.editor-content--light .hljs-quote,
+.editor-content[data-theme="light"] .hljs-comment,
+.editor-content[data-theme="light"] .hljs-quote {
+  color: #6a737d;
+  font-style: italic;
+}
+
+.editor-content--light .hljs-keyword,
+.editor-content--light .hljs-selector-tag,
+.editor-content--light .hljs-tag,
+.editor-content--light .hljs-deletion,
+.editor-content[data-theme="light"] .hljs-keyword,
+.editor-content[data-theme="light"] .hljs-selector-tag,
+.editor-content[data-theme="light"] .hljs-tag,
+.editor-content[data-theme="light"] .hljs-deletion {
+  color: #d73a49;
+}
+
+.editor-content--light .hljs-literal,
+.editor-content--light .hljs-number,
+.editor-content[data-theme="light"] .hljs-literal,
+.editor-content[data-theme="light"] .hljs-number {
+  color: #005cc5;
+}
+
+.editor-content--light .hljs-string,
+.editor-content--light .hljs-regexp,
+.editor-content--light .hljs-addition,
+.editor-content--light .hljs-meta .hljs-string,
+.editor-content[data-theme="light"] .hljs-string,
+.editor-content[data-theme="light"] .hljs-regexp,
+.editor-content[data-theme="light"] .hljs-addition,
+.editor-content[data-theme="light"] .hljs-meta .hljs-string {
+  color: #032f62;
+}
+
+.editor-content--light .hljs-type,
+.editor-content--light .hljs-built_in,
+.editor-content[data-theme="light"] .hljs-type,
+.editor-content[data-theme="light"] .hljs-built_in {
+  color: #e36209;
+}
+
+.editor-content--light .hljs-attr,
+.editor-content--light .hljs-attribute,
+.editor-content[data-theme="light"] .hljs-attr,
+.editor-content[data-theme="light"] .hljs-attribute {
+  color: #005cc5;
+}
+
+.editor-content--light .hljs-variable,
+.editor-content--light .hljs-template-variable,
+.editor-content[data-theme="light"] .hljs-variable,
+.editor-content[data-theme="light"] .hljs-template-variable {
+  color: #e36209;
+}
+
+.editor-content--light .hljs-selector-class,
+.editor-content--light .hljs-selector-attr,
+.editor-content--light .hljs-selector-pseudo,
+.editor-content[data-theme="light"] .hljs-selector-class,
+.editor-content[data-theme="light"] .hljs-selector-attr,
+.editor-content[data-theme="light"] .hljs-selector-pseudo {
+  color: #6f42c1;
+}
+
+.editor-content--light .hljs-symbol,
+.editor-content--light .hljs-bullet,
+.editor-content--light .hljs-link,
+.editor-content--light .hljs-meta,
+.editor-content--light .hljs-selector-id,
+.editor-content[data-theme="light"] .hljs-symbol,
+.editor-content[data-theme="light"] .hljs-bullet,
+.editor-content[data-theme="light"] .hljs-link,
+.editor-content[data-theme="light"] .hljs-meta,
+.editor-content[data-theme="light"] .hljs-selector-id {
+  color: #005cc5;
+}
+
+.editor-content--light .hljs-title,
+.editor-content--light .hljs-title.class_,
+.editor-content--light .hljs-title.function_,
+.editor-content[data-theme="light"] .hljs-title,
+.editor-content[data-theme="light"] .hljs-title.class_,
+.editor-content[data-theme="light"] .hljs-title.function_ {
+  color: #6f42c1;
+}
+
+.editor-content--light .hljs-class .hljs-title,
+.editor-content[data-theme="light"] .hljs-class .hljs-title {
+  color: #e36209;
+}
+
+.editor-content--light .hljs-name,
+.editor-content[data-theme="light"] .hljs-name {
+  color: #22863a;
+}
+
+.editor-content--light .hljs-section,
+.editor-content[data-theme="light"] .hljs-section {
+  color: #005cc5;
+}
+
+.editor-content--light .hljs-subst,
+.editor-content--light .hljs-params,
+.editor-content--light .hljs-punctuation,
+.editor-content[data-theme="light"] .hljs-subst,
+.editor-content[data-theme="light"] .hljs-params,
+.editor-content[data-theme="light"] .hljs-punctuation {
+  color: #24292e;
+}
+
+.editor-content--light .hljs-property,
+.editor-content[data-theme="light"] .hljs-property {
+  color: #005cc5;
+}

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

@@ -0,0 +1,33 @@
+# Columns renderer
+
+Renderer for the `columns` 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 { createColumnsRenderer } from '@shelamkoff/rector/renderer/renderers/columns'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createColumnsRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{ "columns": [{ "content": "Left" }, { "content": "Right" }], "layout": "1-1" }
+```
+
+Every column uses the shared inline parser and the validated layout controls the number and proportions of columns. 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/columns/README.ru.md

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

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

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

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

@@ -0,0 +1,53 @@
+// @ts-check
+import { resolvePath } from '../../../shared/resolvePath.js'
+import { mapColumnsTextFields as mapTextFields } from '../../../shared/mapTextFields.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+/** @type {Record<string, string>} */
+const LAYOUT_GRIDS = {
+    '1-1': '1fr 1fr',
+    '1-2': '1fr 2fr',
+    '2-1': '2fr 1fr',
+    '1-1-1': '1fr 1fr 1fr',
+}
+
+/**
+ * Columns layout block renderer
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} _locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').ColumnsBlock>}
+ */
+export function createColumnsRenderer(classPrefix, _locale) {
+    return {
+        type: 'columns',
+        styles: [styles],
+        mapTextFields,
+
+        /**
+         * @param {import('../../types').ColumnsBlock} block
+         * @param {import('../../types').InlineParser} parseInline
+         * @returns {HTMLElement}
+         */
+        render(block, parseInline) {
+            const { columns, layout } = block.data
+
+            const wrapper = document.createElement('div')
+            wrapper.className = `${classPrefix}-columns`
+            wrapper.style.display = 'grid'
+            wrapper.style.gridTemplateColumns = LAYOUT_GRIDS[layout] || '1fr 1fr'
+            wrapper.style.gap = '1rem'
+
+            for (const col of columns) {
+                const colEl = document.createElement('div')
+                colEl.className = `${classPrefix}-columns__col`
+                if (col.content) {
+                    colEl.appendChild(parseInline(col.content))
+                }
+                wrapper.appendChild(colEl)
+            }
+
+            return wrapper
+        },
+    }
+}

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

@@ -0,0 +1,5 @@
+.editor-columns__col {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--er-text-2);
+}

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

@@ -0,0 +1,33 @@
+# Delimiter renderer
+
+Renderer for the `delimiter` 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 { createDelimiterRenderer } from '@shelamkoff/rector/renderer/renderers/delimiter'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createDelimiterRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{}
+```
+
+The renderer creates a fixed separator and does not consume text, URLs, HTML, or the inline parser. It 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.