@shelamkoff/rector 1.0.0

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

@@ -0,0 +1,59 @@
+// @ts-check
+import { resolvePath } from '../../../shared/resolvePath.js'
+import { mapToggleTextFields as mapTextFields } from '../../../shared/mapTextFields.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+// Tabler icon: chevron-right
+const ICON_CHEVRON = `<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="M9 6l6 6l-6 6"/></svg>`
+
+/**
+ * Toggle (accordion) block renderer
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} _locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').ToggleBlock>}
+ */
+export function createToggleRenderer(classPrefix, _locale) {
+    return {
+        type: 'toggle',
+        styles: [styles],
+        mapTextFields,
+
+        /**
+         * @param {import('../../types').ToggleBlock} block
+         * @param {import('../../types').InlineParser} parseInline
+         * @returns {HTMLElement}
+         */
+        render(block, parseInline) {
+            const { title, content, open } = block.data
+
+            const details = document.createElement('details')
+            details.className = `${classPrefix}-toggle`
+            details.open = open === true
+
+            const summary = document.createElement('summary')
+            summary.className = `${classPrefix}-toggle__summary`
+
+            const chevron = document.createElement('span')
+            chevron.className = `${classPrefix}-toggle__chevron`
+            chevron.setAttribute('aria-hidden', 'true')
+            chevron.innerHTML = ICON_CHEVRON
+
+            const titleEl = document.createElement('span')
+            titleEl.className = `${classPrefix}-toggle__title`
+            if (title) titleEl.appendChild(parseInline(title))
+
+            summary.append(chevron, titleEl)
+            details.appendChild(summary)
+
+            if (content) {
+                const body = document.createElement('div')
+                body.className = `${classPrefix}-toggle__body`
+                body.appendChild(parseInline(content))
+                details.appendChild(body)
+            }
+
+            return details
+        },
+    }
+}

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

@@ -0,0 +1,49 @@
+.editor-toggle {
+  border: 1px solid var(--er-border);
+  border-radius: var(--er-radius);
+  overflow: hidden;
+}
+
+.editor-toggle__summary {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  cursor: pointer;
+  list-style: none;
+  font-weight: 500;
+  color: var(--er-text-1);
+  transition: background-color 0.15s;
+}
+
+.editor-toggle__summary::-webkit-details-marker {
+  display: none;
+}
+
+.editor-toggle__summary:hover {
+  background-color: var(--er-surface);
+}
+
+.editor-toggle__chevron {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--er-text-3);
+  transition: transform 0.2s;
+}
+
+.editor-toggle[open] .editor-toggle__chevron {
+  transform: rotate(90deg);
+}
+
+.editor-toggle__title {
+  flex: 1;
+}
+
+.editor-toggle__body {
+  padding: 14px 18px;
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--er-text-2);
+  border-top: 1px solid var(--er-border);
+}

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

@@ -0,0 +1,33 @@
+# Warning renderer
+
+Renderer for the `warning` 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 { createWarningRenderer } from '@shelamkoff/rector/renderer/renderers/warning'
+
+const renderer = createEditorRenderer({ classPrefix: 'article', blockTypes: [] })
+renderer.registerRenderer(createWarningRenderer('article', {}))
+const rendererStyles = renderer.injectStyles()
+renderer.renderTo(documentData, document.querySelector('#article'))
+
+// When the mounted output is removed:
+renderer.destroy()
+rendererStyles.destroy()
+```
+
+## Typical data
+
+```json
+{ "title": "Note", "message": "Important details" }
+```
+
+The title and message use 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/warning/README.ru.md

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

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

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

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

@@ -0,0 +1,62 @@
+// @ts-check
+import { resolvePath } from '../../../shared/resolvePath.js'
+import { mapWarningTextFields as mapTextFields } from '../../../shared/mapTextFields.js'
+
+const styles = resolvePath('./styles.css', import.meta.url)
+
+// Tabler icon: alert-triangle
+const ICON_WARNING = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z"/><path d="M12 16h.01"/></svg>`
+
+/**
+ * Warning block renderer
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} _locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').WarningBlock>}
+ */
+export function createWarningRenderer(classPrefix, _locale) {
+    return {
+        type: 'warning',
+        styles: [styles],
+        mapTextFields,
+
+        /**
+         * @param {import('../../types').WarningBlock} block
+         * @param {import('../../types').InlineParser} parseInline
+         * @returns {HTMLElement}
+         */
+        render(block, parseInline) {
+            const { title, message } = block.data
+
+            const wrapper = document.createElement('div')
+            wrapper.className = `${classPrefix}-warning`
+            wrapper.setAttribute('role', 'note')
+
+            const icon = document.createElement('span')
+            icon.className = `${classPrefix}-warning__icon`
+            icon.setAttribute('aria-hidden', 'true')
+            icon.innerHTML = ICON_WARNING
+
+            const content = document.createElement('div')
+            content.className = `${classPrefix}-warning__content`
+
+            if (title) {
+                const titleElement = document.createElement('strong')
+                titleElement.className = `${classPrefix}-warning__title`
+                titleElement.appendChild(parseInline(title))
+                content.appendChild(titleElement)
+            }
+
+            if (message) {
+                const messageElement = document.createElement('p')
+                messageElement.className = `${classPrefix}-warning__message`
+                messageElement.appendChild(parseInline(message))
+                content.appendChild(messageElement)
+            }
+
+            wrapper.appendChild(icon)
+            wrapper.appendChild(content)
+
+            return wrapper
+        },
+    }
+}

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

@@ -0,0 +1,41 @@
+.editor-warning {
+  display: flex;
+  gap: 14px;
+  padding: 16px 18px;
+  background-color: var(--er-warning-bg);
+  border: 1px solid var(--er-warning-border);
+  border-radius: var(--er-radius);
+}
+
+.editor-warning__icon {
+  display: flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+  color: var(--er-warning-accent);
+  padding-top: 1px;
+}
+
+.editor-warning__icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.editor-warning__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.editor-warning__title {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--er-warning-accent);
+}
+
+.editor-warning__message {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--er-text-2);
+}

package/dist/renderer/styles/base.css

@@ -0,0 +1,168 @@
+/* =============================================================================
+   Renderer base — CSS variables + global inline styles
+   ============================================================================= */
+
+/* ── Dark theme (default) ─────────────────────────────────────────────────── */
+
+.editor-content {
+  --er-font: var(--font, inherit);
+  --er-font-mono: 'JetBrains Mono', 'Fira Code', Monaco, Consolas, monospace;
+  --er-font-size: 15px;
+  --er-line-height: 1.7;
+
+  --er-text-1: #f5f5f5;
+  --er-text-2: #c4c4c4;
+  --er-text-3: #908c8c;
+
+  --er-bg: #0d0d0d;
+  --er-surface: #0a0a0a;
+  --er-surface-hover: #111;
+  --er-border: #1a1a1a;
+  --er-border-hover: #2a2a2a;
+  --er-accent: #4357b4;
+  --er-text-on-accent: #fff;
+  --er-danger: #f87171;
+
+  --er-block-spacing: 0.5rem;
+  --er-radius: 10px;
+  --er-radius-sm: 6px;
+
+  --er-code-bg: #0d1117;
+  --er-code-border: #21262d;
+  --er-code-text: #c9d1d9;
+  --er-code-bar-bg: #21262d;
+  --er-code-copy-color: rgba(255, 255, 255, 0.5);
+  --er-code-success: #3fb950;
+  --er-code-scrollbar: rgba(255, 255, 255, 0.15);
+  --er-code-inline-bg: #1e1e24;
+  --er-code-inline-text: #a78bfa;
+
+  --er-quote-bg: rgba(99, 102, 241, 0.06);
+  --er-quote-border: rgba(99, 102, 241, 0.15);
+  --er-quote-accent: #818cf8;
+
+  --er-warning-bg: rgba(234, 179, 8, 0.06);
+  --er-warning-border: rgba(234, 179, 8, 0.2);
+  --er-warning-accent: #eab308;
+
+  --er-mark-bg: rgba(245, 166, 35, 0.2);
+
+  --er-embed-play-bg: #f1f1f1;
+  --er-embed-play-color: #2a2b2d;
+  --er-embed-placeholder: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  --er-embed-placeholder-icon: rgba(255, 255, 255, 0.3);
+
+  font-size: var(--er-font-size);
+  line-height: var(--er-line-height);
+  color: var(--er-text-1);
+  font-family: var(--er-font), sans-serif;
+}
+
+/* ── Light theme ──────────────────────────────────────────────────────────── */
+
+.editor-content--light,
+.editor-content[data-theme="light"] {
+  --er-text-1: #1a1a1a;
+  --er-text-2: #4a4a4a;
+  --er-text-3: #888;
+
+  --er-bg: #fff;
+  --er-surface: #f7f7f8;
+  --er-surface-hover: #f0f0f2;
+  --er-border: #e0e0e4;
+  --er-border-hover: #d0d0d4;
+  --er-accent: #4357b4;
+  --er-text-on-accent: #fff;
+
+  --er-code-bg: #f6f8fa;
+  --er-code-border: #d1d5db;
+  --er-code-text: #24292e;
+  --er-code-bar-bg: #e5e7eb;
+  --er-code-copy-color: rgba(0, 0, 0, 0.4);
+  --er-code-success: #16a34a;
+  --er-code-scrollbar: rgba(0, 0, 0, 0.15);
+  --er-code-inline-bg: #f0eef8;
+  --er-code-inline-text: #6d4de6;
+
+  --er-quote-bg: rgba(99, 102, 241, 0.04);
+  --er-quote-border: rgba(99, 102, 241, 0.15);
+  --er-quote-accent: #6366f1;
+
+  --er-warning-bg: rgba(234, 179, 8, 0.06);
+  --er-warning-border: rgba(234, 179, 8, 0.2);
+  --er-warning-accent: #ca8a04;
+
+  --er-mark-bg: rgba(245, 166, 35, 0.15);
+
+  --er-embed-play-bg: #fff;
+  --er-embed-play-color: #1a1a1a;
+  --er-embed-placeholder: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #94a3b8 100%);
+  --er-embed-placeholder-icon: rgba(0, 0, 0, 0.2);
+}
+
+/* ── Spacing ──────────────────────────────────────────────────────────────── */
+
+.editor-content > * {
+  margin-bottom: var(--er-block-spacing);
+}
+
+.editor-content > *:last-child {
+  margin-bottom: 0;
+}
+
+/* ── Inline formatting ────────────────────────────────────────────────────── */
+
+.editor-content b,
+.editor-content strong {
+  font-weight: 600;
+  color: var(--er-text-1);
+}
+
+.editor-content i,
+.editor-content em {
+  font-style: italic;
+}
+
+.editor-content code {
+  padding: 2px 6px;
+  background-color: var(--er-code-inline-bg, #1e1e24);
+  border: 1px solid var(--er-border-hover, #2a2a2a);
+  border-radius: 4px;
+  font-family: var(--er-font-mono), monospace;
+  font-size: 0.875em;
+  color: var(--er-code-inline-text, #a78bfa);
+}
+
+.editor-content mark {
+  padding: 1px 4px;
+  background-color: var(--er-mark-bg);
+  border-radius: 3px;
+  color: var(--er-text-1);
+}
+
+.editor-content a {
+  color: var(--er-text-2);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  transition: color 0.15s;
+}
+
+.editor-content a:hover {
+  color: var(--er-text-1);
+}
+
+/* ── Unknown block fallback ───────────────────────────────────────────────── */
+
+.editor-unknown {
+  padding: 12px;
+  background-color: var(--er-surface);
+  border: 1px dashed var(--er-border);
+  border-radius: var(--er-radius-sm);
+  font-size: 13px;
+  color: var(--er-text-3);
+  text-align: center;
+}
+
+.editor-unknown::before {
+  content: 'Unknown block: ' attr(data-block-type);
+}