From 4e03cd04f9b189906a94498407e521bddadded77 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 12:47:53 +0200
Subject: [PATCH 01/21] feat: add grid block templates experiment

---
 demo/src/defaults/grid-block-templates.ts     |  55 +++
 .../GridBlockTemplates.stories.tsx            |  11 +
 .../GridBlockTemplates.tsx                    |  75 ++++
 .../GridBlockTemplates.test.ts                |  46 ++
 .../BlockInsertPopup.tsx                      | 129 ++++++
 .../GridBlockTemplates.scss                   | 128 ++++++
 .../GridBlockTemplatesView.tsx                | 413 ++++++++++++++++++
 .../GridBlockTemplatesNodeView/NodeView.tsx   | 113 +++++
 .../TemplatesPopup.scss                       |  27 ++
 .../TemplatesPopup.tsx                        | 155 +++++++
 .../GridBlockTemplatesNodeView/const.ts       |   4 +
 .../GridBlockTemplatesNodeView/index.ts       |   1 +
 .../GridBlockTemplatesSpecs/const.ts          |  24 +
 .../GridBlockTemplatesSpecs/index.ts          |  93 ++++
 .../additional/GridBlockTemplates/actions.ts  |  27 ++
 .../additional/GridBlockTemplates/const.ts    |   1 +
 .../additional/GridBlockTemplates/index.ts    |  29 ++
 .../GridBlockTemplates/templates/index.ts     |  17 +
 .../templates/parse.test.ts                   | 100 +++++
 .../GridBlockTemplates/templates/parse.ts     |  95 ++++
 .../templates/storage.test.ts                 |  95 ++++
 .../GridBlockTemplates/templates/storage.ts   |  95 ++++
 .../additional/GridBlockTemplates/types.ts    |  41 ++
 .../src/i18n/grid-block-templates/en.json     |  21 +
 .../src/i18n/grid-block-templates/index.ts    |   8 +
 .../src/i18n/grid-block-templates/ru.json     |  21 +
 26 files changed, 1824 insertions(+)
 create mode 100644 demo/src/defaults/grid-block-templates.ts
 create mode 100644 demo/src/stories/examples/grid-block-templates/GridBlockTemplates.stories.tsx
 create mode 100644 demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/NodeView.tsx
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/const.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/index.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/const.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/index.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
 create mode 100644 packages/editor/src/i18n/grid-block-templates/en.json
 create mode 100644 packages/editor/src/i18n/grid-block-templates/index.ts
 create mode 100644 packages/editor/src/i18n/grid-block-templates/ru.json

diff --git a/demo/src/defaults/grid-block-templates.ts b/demo/src/defaults/grid-block-templates.ts
new file mode 100644
index 00000000..d5d34e77
--- /dev/null
+++ b/demo/src/defaults/grid-block-templates.ts
@@ -0,0 +1,55 @@
+import type {GridBlockTemplate} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/templates/index.js';
+
+export const gridBlockTemplates: GridBlockTemplate[] = [
+    {
+        id: 'feature-grid',
+        title: 'Feature grid',
+        type: 'container',
+        content: `<div class="grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px;background:#f8fafc;border-radius:12px">
+  <div style="padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px"><strong>Fast setup</strong><p>Start from a reusable layout.</p></div>
+  <div style="padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px"><strong>Editable blocks</strong><p>Change content inline.</p></div>
+  <div style="padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px"><strong>Static output</strong><p>Serialize to HTML.</p></div>
+</div>`,
+        containerCss:
+            'display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px;background:#f8fafc;border-radius:12px',
+        blocks: [
+            {
+                css: 'padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px',
+                content: '<strong>Fast setup</strong><p>Start from a reusable layout.</p>',
+            },
+            {
+                css: 'padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px',
+                content: '<strong>Editable blocks</strong><p>Change content inline.</p>',
+            },
+            {
+                css: 'padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px',
+                content: '<strong>Static output</strong><p>Serialize to HTML.</p>',
+            },
+        ],
+    },
+    {
+        id: 'header-two-columns',
+        title: 'Header and two columns',
+        type: 'container',
+        content: `<div class="grid" style="display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px">
+  <div style="grid-column:1 / -1;padding:24px;background:#2563eb;color:#fff;border-radius:10px"><h2>Section title</h2></div>
+  <div style="padding:18px;background:#eff6ff;border-radius:8px">Left column</div>
+  <div style="padding:18px;background:#f0fdf4;border-radius:8px">Right column</div>
+</div>`,
+        containerCss: 'display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px',
+        blocks: [
+            {
+                css: 'grid-column:1 / -1;padding:24px;background:#2563eb;color:#fff;border-radius:10px',
+                content: '<h2>Section title</h2>',
+            },
+            {
+                css: 'padding:18px;background:#eff6ff;border-radius:8px',
+                content: 'Left column',
+            },
+            {
+                css: 'padding:18px;background:#f0fdf4;border-radius:8px',
+                content: 'Right column',
+            },
+        ],
+    },
+];
diff --git a/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.stories.tsx b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.stories.tsx
new file mode 100644
index 00000000..79709059
--- /dev/null
+++ b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.stories.tsx
@@ -0,0 +1,11 @@
+import type {StoryObj} from '@storybook/react';
+
+import {GridBlockTemplatesDemo as component} from './GridBlockTemplates';
+
+export const Story: StoryObj<typeof component> = {};
+Story.storyName = 'Grid block templates';
+
+export default {
+    title: 'Examples / Grid block templates',
+    component,
+};
diff --git a/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
new file mode 100644
index 00000000..e6ea16f3
--- /dev/null
+++ b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
@@ -0,0 +1,75 @@
+import {memo} from 'react';
+
+import {LayoutCells} from '@gravity-ui/icons';
+import {
+    MarkdownEditorView,
+    type ToolbarsPreset,
+    useMarkdownEditor,
+} from '@gravity-ui/markdown-editor';
+import {ToolbarName as Toolbar} from '@gravity-ui/markdown-editor/_/modules/toolbars/constants.js';
+import {defaultPreset} from '@gravity-ui/markdown-editor/_/modules/toolbars/presets.js';
+import {GridBlockTemplates as GridBlockTemplatesExtension} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/index.js';
+
+import {gridBlockTemplates} from '../../../defaults/grid-block-templates';
+import {PlaygroundLayout} from '../../../components/PlaygroundLayout';
+
+const gridBlockTemplatesItemId = 'gridBlockTemplates';
+
+const toolbarsPreset: ToolbarsPreset = {
+    items: {
+        ...defaultPreset.items,
+        [gridBlockTemplatesItemId]: {
+            view: {
+                icon: {data: LayoutCells},
+                title: 'Grid block templates',
+            },
+            wysiwyg: {
+                exec: (e) => e.actions.createGridBlockTemplates.run(),
+                isActive: (e) => e.actions.createGridBlockTemplates.isActive(),
+                isEnable: (e) => e.actions.createGridBlockTemplates.isEnable(),
+            },
+        },
+    },
+    orders: {
+        ...defaultPreset.orders,
+        [Toolbar.wysiwygMain]: [
+            [gridBlockTemplatesItemId],
+            ...defaultPreset.orders[Toolbar.wysiwygMain],
+        ],
+    },
+};
+
+export const GridBlockTemplatesDemo = memo(function GridBlockTemplatesDemo() {
+    const editor = useMarkdownEditor(
+        {
+            initial: {mode: 'wysiwyg', markup: ''},
+            wysiwygConfig: {
+                extensions: (builder) =>
+                    builder.use(GridBlockTemplatesExtension, {
+                        templates: {
+                            items: gridBlockTemplates,
+                            showButton: true,
+                            allowAdd: true,
+                        },
+                    }),
+            },
+        },
+        [],
+    );
+
+    return (
+        <PlaygroundLayout
+            editor={editor}
+            view={({className}) => (
+                <MarkdownEditorView
+                    autofocus
+                    stickyToolbar
+                    settingsVisible
+                    editor={editor}
+                    className={className}
+                    toolbarsPreset={toolbarsPreset}
+                />
+            )}
+        />
+    );
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
new file mode 100644
index 00000000..136425c6
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
@@ -0,0 +1,46 @@
+import {builders} from 'prosemirror-test-builder';
+
+import {ExtensionsManager} from '../../../core';
+import {BaseNode, BaseSchemaSpecs} from '../../specs';
+
+import {GridBlockTemplatesSpecs} from './GridBlockTemplatesSpecs';
+import {GridBlockTemplatesAttrs, gridBlockTemplatesNodeName} from './GridBlockTemplatesSpecs/const';
+
+const {schema, serializer} = new ExtensionsManager({
+    extensions: (builder) => builder.use(BaseSchemaSpecs, {}).use(GridBlockTemplatesSpecs, {}),
+}).buildDeps();
+
+const {doc, gridBlockTemplates} = builders<'doc' | 'gridBlockTemplates'>(schema, {
+    doc: {nodeType: BaseNode.Doc},
+    gridBlockTemplates: {nodeType: gridBlockTemplatesNodeName},
+});
+
+describe('GridBlockTemplates extension', () => {
+    it('should serialize to yfm html block', () => {
+        expect(
+            serializer.serialize(
+                doc(
+                    gridBlockTemplates({
+                        [GridBlockTemplatesAttrs.blocks]: [
+                            {
+                                id: 'block-1',
+                                css: 'padding: 12px;',
+                                content: '<strong>First</strong>',
+                            },
+                        ],
+                        [GridBlockTemplatesAttrs.containerCss]: 'display: grid;',
+                        [GridBlockTemplatesAttrs.EntityId]: 'grid_block_templates-1',
+                    }),
+                ),
+            ),
+        ).toBe(
+            [
+                '::: html',
+                '<div class="grid" style="display: grid;">',
+                '  <div class="block-1" style="padding: 12px;"><strong>First</strong></div>',
+                '</div>',
+                ':::',
+            ].join('\n'),
+        );
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
new file mode 100644
index 00000000..6b7c36db
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
@@ -0,0 +1,129 @@
+import {useMemo, useState} from 'react';
+
+import {Code, Plus} from '@gravity-ui/icons';
+import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
+
+import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
+import {i18n} from 'src/i18n/grid-block-templates';
+
+import {parseTemplateBlock} from '../templates';
+import type {GridBlockBlockTemplate, GridBlockTemplateBlock} from '../types';
+
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+interface BlockInsertPopupProps {
+    anchor: HTMLElement | null;
+    open: boolean;
+    templates: GridBlockBlockTemplate[];
+    onClose: () => void;
+    onApplyTemplate: (template: GridBlockBlockTemplate) => void;
+    onApplyHtml: (block: GridBlockTemplateBlock) => void;
+}
+
+export const BlockInsertPopup: React.FC<BlockInsertPopupProps> = ({
+    anchor,
+    open,
+    templates,
+    onClose,
+    onApplyTemplate,
+    onApplyHtml,
+}) => {
+    const [addingCustomHtml, setAddingCustomHtml] = useState(false);
+    const [input, setInput] = useState('');
+    const [filter, setFilter] = useState('');
+    const showCustomHtmlEditor = addingCustomHtml || templates.length === 0;
+
+    const filtered = useMemo(() => {
+        const query = filter.trim().toLowerCase();
+        if (!query) return templates;
+        return templates.filter((template) => template.title.toLowerCase().includes(query));
+    }, [templates, filter]);
+
+    const close = () => {
+        setAddingCustomHtml(false);
+        setInput('');
+        setFilter('');
+        onClose();
+    };
+
+    const handleApplyHtml = () => {
+        onApplyHtml(parseTemplateBlock(input));
+        close();
+    };
+
+    return (
+        <Popup anchorElement={anchor} open={open} onOpenChange={close} placement="bottom-end">
+            <div className={b('templates', [stop])}>
+                {showCustomHtmlEditor ? (
+                    <div className={b('templates-editor')}>
+                        <TextArea
+                            controlProps={{className: stop}}
+                            value={input}
+                            onUpdate={setInput}
+                            placeholder={i18n('block_html_input_placeholder')}
+                            minRows={8}
+                            autoFocus
+                        />
+                        <div className={b('templates-controls')}>
+                            <Button view="flat" className={stop} onClick={close}>
+                                <span className={stop}>{i18n('cancel')}</span>
+                            </Button>
+                            <Button
+                                view="action"
+                                className={stop}
+                                disabled={!input.trim()}
+                                onClick={handleApplyHtml}
+                            >
+                                <span className={stop}>{i18n('insert')}</span>
+                            </Button>
+                        </div>
+                    </div>
+                ) : (
+                    <>
+                        <div className={b('templates-search')}>
+                            <TextInput
+                                className={stop}
+                                controlProps={{className: stop}}
+                                size="s"
+                                value={filter}
+                                onUpdate={setFilter}
+                                placeholder={i18n('search_templates')}
+                                autoFocus
+                            />
+                        </div>
+                        <Menu className={stop}>
+                            <Menu.Item
+                                className={stop}
+                                iconStart={<Icon data={Code} />}
+                                onClick={() => setAddingCustomHtml(true)}
+                            >
+                                {i18n('custom_html')}
+                            </Menu.Item>
+                            {filtered.map((template) => (
+                                <Menu.Item
+                                    key={template.id}
+                                    className={stop}
+                                    iconStart={<Icon data={Plus} />}
+                                    onClick={() => {
+                                        onApplyTemplate(template);
+                                        close();
+                                    }}
+                                >
+                                    {template.title}
+                                </Menu.Item>
+                            ))}
+                            {filtered.length === 0 && (
+                                <Menu.Item disabled className={stop}>
+                                    {i18n('block_templates_empty')}
+                                </Menu.Item>
+                            )}
+                        </Menu>
+                    </>
+                )}
+            </div>
+        </Popup>
+    );
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
new file mode 100644
index 00000000..27cb5eff
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
@@ -0,0 +1,128 @@
+.g-md-grid-block-templates {
+    position: relative;
+
+    margin-bottom: 15px;
+    padding: 32px 12px 12px;
+
+    border: 1px solid var(--g-color-line-generic);
+    border-radius: var(--g-border-radius-m);
+
+    &__toolbar {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+
+        display: flex;
+        gap: 2px;
+    }
+
+    &__grid {
+        display: grid;
+        align-items: stretch;
+        gap: 8px;
+    }
+
+    &__item {
+        position: relative;
+
+        min-height: 56px;
+        padding: 12px;
+
+        border: 1px dashed var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
+    }
+
+    &__item-gear {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+
+        opacity: 0;
+
+        transition: opacity 0.1s ease-in-out;
+    }
+
+    &__item:hover &__item-gear {
+        opacity: 1;
+    }
+
+    &__item-content {
+        min-height: 1.2em;
+
+        outline: none;
+
+        &_editing {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: 2px;
+        }
+
+        &:empty::before {
+            content: 'Text...';
+
+            color: var(--g-color-text-hint);
+        }
+    }
+
+    &__editable-text {
+        outline: 1px solid var(--g-color-line-focus);
+        outline-offset: 1px;
+        background: var(--g-color-base-selection);
+    }
+
+    &__add {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        min-height: 56px;
+        padding: 12px;
+
+        cursor: pointer;
+
+        color: var(--g-color-text-secondary);
+        border: 1px dashed var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
+        background: transparent;
+
+        &:hover {
+            color: var(--g-color-text-primary);
+            border-color: var(--g-color-line-generic-hover);
+            background: var(--g-color-base-generic);
+        }
+    }
+
+    &__css-editor {
+        width: 320px;
+        padding: 8px;
+
+        .g-text-area__control {
+            font-family: var(--g-font-family-monospace);
+        }
+    }
+
+    &__block-settings-editor {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        width: 380px;
+        max-width: calc(100vw - 32px);
+        padding: 8px;
+
+        .g-text-area__control {
+            font-family: var(--g-font-family-monospace);
+        }
+    }
+
+    &__field {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    &__field-label {
+        font-size: var(--g-text-caption-1-font-size);
+        line-height: var(--g-text-caption-1-line-height);
+        color: var(--g-color-text-secondary);
+    }
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
new file mode 100644
index 00000000..2b441ec6
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -0,0 +1,413 @@
+import {useMemo, useState} from 'react';
+
+import {Gear, LayoutHeaderColumns, Plus, TrashBin} from '@gravity-ui/icons';
+import {Button, Icon, Popup} from '@gravity-ui/uikit';
+import type {Node} from 'prosemirror-model';
+import type {EditorView} from 'prosemirror-view';
+
+import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
+import {i18n} from 'src/i18n/grid-block-templates';
+import {useBooleanState, useElementState} from 'src/react-utils/hooks';
+import {removeNode} from 'src/utils/remove-node';
+
+import {GridBlockTemplatesConsts} from '../GridBlockTemplatesSpecs/const';
+import type {
+    GridBlock,
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplate,
+    GridBlockTemplateBlock,
+    GridBlockTemplatesOptions,
+} from '../types';
+import {mergeTemplatesById, readStoredTemplates} from '../templates';
+
+import {BlockInsertPopup} from './BlockInsertPopup';
+import {TemplatesPopup} from './TemplatesPopup';
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+import './GridBlockTemplates.scss';
+
+export {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+// PROTOTYPE: raw inline declarations, no scoping or sanitization.
+const parseInlineCss = (css: string): React.CSSProperties => {
+    const style: Record<string, string> = {};
+    for (const rule of css.split(';')) {
+        const idx = rule.indexOf(':');
+        if (idx === -1) continue;
+        const prop = rule.slice(0, idx).trim();
+        const value = rule.slice(idx + 1).trim();
+        if (!prop || !value) continue;
+        const camel = prop.replace(/-([a-z])/g, (_, ch) => ch.toUpperCase());
+        style[camel] = value;
+    }
+    return style as React.CSSProperties;
+};
+
+const genId = () => Math.random().toString(36).slice(2, 10);
+
+const toBlock = (template: GridBlockBlockTemplate): GridBlock => ({
+    id: genId(),
+    css: template.block.css,
+    content: template.block.content,
+});
+
+const EDITABLE_TEXT_NODE_ATTR = 'data-grid-block-editable-text';
+const EDITABLE_TEXT_NODE_SELECTOR = `[${EDITABLE_TEXT_NODE_ATTR}="true"]`;
+
+const focusEditableTextNode = (element: HTMLElement) => {
+    element.focus();
+
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+};
+
+const enableTextNodeEditing = (root: HTMLElement) => {
+    const existingTextNode = root.querySelector<HTMLElement>(EDITABLE_TEXT_NODE_SELECTOR);
+    if (existingTextNode) {
+        focusEditableTextNode(existingTextNode);
+        return;
+    }
+
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const textNodes: Text[] = [];
+
+    while (walker.nextNode()) {
+        const current = walker.currentNode as Text;
+        if (current.nodeValue?.trim()) textNodes.push(current);
+    }
+
+    for (const textNode of textNodes) {
+        const span = document.createElement('span');
+        span.setAttribute(EDITABLE_TEXT_NODE_ATTR, 'true');
+        span.className = `${b('editable-text')} ${stop}`;
+        span.contentEditable = 'true';
+        span.textContent = textNode.nodeValue;
+        textNode.replaceWith(span);
+    }
+
+    const firstTextNode = root.querySelector<HTMLElement>(EDITABLE_TEXT_NODE_SELECTOR);
+    if (firstTextNode) focusEditableTextNode(firstTextNode);
+};
+
+const readTextOnlyEditedHtml = (root: HTMLElement) => {
+    const clone = root.cloneNode(true) as HTMLElement;
+    for (const wrapper of clone.querySelectorAll(EDITABLE_TEXT_NODE_SELECTOR)) {
+        wrapper.replaceWith(document.createTextNode(wrapper.textContent ?? ''));
+    }
+    return clone.innerHTML;
+};
+
+const insertPlainTextAtSelection = (text: string) => {
+    const selection = window.getSelection();
+    const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+    if (!selection || !range) return;
+
+    range.deleteContents();
+    const textNode = document.createTextNode(text);
+    range.insertNode(textNode);
+    range.setStartAfter(textNode);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+};
+
+const BlockSettingsPopup: React.FC<{
+    anchor: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    html: string;
+    css: string;
+    onHtmlChange: (value: string) => void;
+    onCssChange: (value: string) => void;
+}> = ({anchor, open, onClose, html, css, onHtmlChange, onCssChange}) => (
+    <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
+        <div className={b('block-settings-editor', [stop])}>
+            <div className={b('field')}>
+                <div className={b('field-label')}>{i18n('html')}</div>
+                <TextArea
+                    controlProps={{className: stop}}
+                    value={html}
+                    onUpdate={onHtmlChange}
+                    placeholder={i18n('block_html_placeholder')}
+                    minRows={6}
+                    autoFocus
+                />
+            </div>
+            <div className={b('field')}>
+                <div className={b('field-label')}>{i18n('css')}</div>
+                <TextArea
+                    controlProps={{className: stop}}
+                    value={css}
+                    onUpdate={onCssChange}
+                    placeholder={'background: #eee;\nborder-radius: 8px;'}
+                    minRows={4}
+                />
+            </div>
+        </div>
+    </Popup>
+);
+
+const CssPopup: React.FC<{
+    anchor: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder: string;
+}> = ({anchor, open, onClose, value, onChange, placeholder}) => (
+    <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
+        <div className={b('css-editor', [stop])}>
+            <TextArea
+                controlProps={{className: stop}}
+                value={value}
+                onUpdate={onChange}
+                placeholder={placeholder}
+                minRows={4}
+                autoFocus
+            />
+        </div>
+    </Popup>
+);
+
+export const GridBlockTemplatesView: React.FC<{
+    node: Node;
+    getPos: () => number | undefined;
+    view: EditorView;
+    onChange: (attrs: Partial<Node['attrs']>) => void;
+    options: {templates?: GridBlockTemplatesOptions};
+}> = ({node, getPos, view, onChange, options}) => {
+    const entityId: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId];
+    const containerCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.containerCss] ?? '';
+    const blocks: GridBlock[] = node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks] ?? [];
+    const {templates} = options;
+
+    const scopeClass = useMemo(
+        () => 'grid-templates-scope-' + entityId.replace(/[^a-z0-9_-]/gi, ''),
+        [entityId],
+    );
+
+    const [containerAnchor, setContainerAnchor] = useElementState();
+    const [containerCssOpen, setContainerCssOpen] = useState(false);
+
+    const [blockAnchor, setBlockAnchor] = useElementState();
+    const [editingBlockSettingsId, setEditingBlockSettingsId] = useState<string | null>(null);
+    const [editingBlockContentId, setEditingBlockContentId] = useState<string | null>(null);
+
+    const allowAdd = Boolean(templates?.allowAdd);
+    const [storedTemplates, setStoredTemplates] =
+        useState<GridBlockTemplate[]>(readStoredTemplates);
+    const effectiveTemplates = useMemo(
+        () => mergeTemplatesById(templates?.items ?? [], storedTemplates),
+        [templates?.items, storedTemplates],
+    );
+    const containerTemplates = effectiveTemplates.filter(
+        (template): template is GridBlockContainerTemplate => template.type === 'container',
+    );
+    const blockTemplates = effectiveTemplates.filter(
+        (template): template is GridBlockBlockTemplate => template.type === 'block',
+    );
+
+    const showContainerTemplatesButton =
+        Boolean(templates?.showButton) && (allowAdd || containerTemplates.length > 0);
+    const [containerTemplatesOpen, , closeContainerTemplates, toggleContainerTemplatesOpen] =
+        useBooleanState(false);
+    const [containerTemplatesAnchor, setContainerTemplatesAnchor] = useElementState();
+    const [blockTemplatesOpen, openBlockTemplates, closeBlockTemplates] = useBooleanState(false);
+    const [blockTemplatesAnchor, setBlockTemplatesAnchor] = useState<HTMLElement | null>(null);
+
+    const setBlocks = (next: GridBlock[]) =>
+        onChange({[GridBlockTemplatesConsts.NodeAttrs.blocks]: next});
+
+    const applyContainerTemplate = (template: GridBlockContainerTemplate) => {
+        onChange({
+            [GridBlockTemplatesConsts.NodeAttrs.containerCss]: template.containerCss,
+            [GridBlockTemplatesConsts.NodeAttrs.blocks]: template.blocks.map((block) => ({
+                id: genId(),
+                css: block.css,
+                content: block.content,
+            })),
+        });
+        closeContainerTemplates();
+    };
+
+    const applyBlockTemplate = (template: GridBlockBlockTemplate) => {
+        setBlocks([...blocks, toBlock(template)]);
+        closeBlockTemplates();
+    };
+
+    const applyRawBlock = (block: GridBlockTemplateBlock) => {
+        setBlocks([...blocks, {id: genId(), css: block.css, content: block.content}]);
+        closeBlockTemplates();
+    };
+
+    const patchBlock = (id: string, patch: Partial<GridBlock>) =>
+        setBlocks(blocks.map((block) => (block.id === id ? {...block, ...patch} : block)));
+
+    const editingBlockSettings =
+        blocks.find((block) => block.id === editingBlockSettingsId) ?? null;
+
+    return (
+        <div className={b()}>
+            {/* PROTOTYPE scoping: wraps user CSS into the grid viewport selector. */}
+            <style>{`.${scopeClass}{display:grid;gap:8px;${containerCss}}`}</style>
+
+            <div className={b('toolbar', [stop])}>
+                <Button
+                    view="flat"
+                    size="s"
+                    ref={setContainerAnchor}
+                    className={stop}
+                    onClick={() => setContainerCssOpen((v) => !v)}
+                    aria-label={i18n('grid_css')}
+                >
+                    <Icon data={Gear} className={stop} />
+                </Button>
+                {showContainerTemplatesButton && (
+                    <>
+                        <Button
+                            view="flat"
+                            size="s"
+                            ref={setContainerTemplatesAnchor}
+                            className={stop}
+                            onClick={toggleContainerTemplatesOpen}
+                            aria-label={i18n('container_templates')}
+                        >
+                            <Icon data={LayoutHeaderColumns} className={stop} />
+                        </Button>
+                        <TemplatesPopup
+                            anchor={containerTemplatesAnchor}
+                            open={containerTemplatesOpen}
+                            templates={containerTemplates}
+                            allowAdd={allowAdd}
+                            emptyText={i18n('container_templates_empty')}
+                            onClose={closeContainerTemplates}
+                            onApply={(template) =>
+                                applyContainerTemplate(template as GridBlockContainerTemplate)
+                            }
+                            onAdded={setStoredTemplates}
+                            onCleared={setStoredTemplates}
+                        />
+                    </>
+                )}
+                <Button
+                    view="flat"
+                    size="s"
+                    className={stop}
+                    onClick={() => {
+                        const pos = getPos();
+                        if (pos === undefined) return;
+                        removeNode({node, pos, tr: view.state.tr, dispatch: view.dispatch});
+                    }}
+                    aria-label={i18n('remove_grid')}
+                >
+                    <Icon data={TrashBin} className={stop} />
+                </Button>
+            </div>
+
+            <div className={`${b('grid')} ${scopeClass}`}>
+                {blocks.map((block, i) => (
+                    <div
+                        key={block.id}
+                        className={`${b('item', [stop])} block-${i + 1}`}
+                        style={parseInlineCss(block.css)}
+                    >
+                        <Button
+                            view="flat"
+                            size="s"
+                            className={`${b('item-gear')} ${stop}`}
+                            onClick={(e) => {
+                                setBlockAnchor(e.currentTarget);
+                                setEditingBlockSettingsId(block.id);
+                            }}
+                            aria-label={i18n('block_css', {index: String(i + 1)})}
+                        >
+                            <Icon data={Gear} size={14} className={stop} />
+                        </Button>
+                        <div
+                            className={`${b('item-content', {
+                                editing: editingBlockContentId === block.id,
+                            })} ${stop}`}
+                            contentEditable={false}
+                            suppressContentEditableWarning
+                            onDoubleClick={(e) => {
+                                setEditingBlockContentId(block.id);
+                                enableTextNodeEditing(e.currentTarget);
+                            }}
+                            onPaste={(e) => {
+                                if (editingBlockContentId !== block.id) return;
+                                e.preventDefault();
+                                insertPlainTextAtSelection(e.clipboardData.getData('text/plain'));
+                            }}
+                            onBlur={(e) => {
+                                const nextFocused = e.relatedTarget;
+                                if (
+                                    nextFocused instanceof window.Node &&
+                                    e.currentTarget.contains(nextFocused)
+                                ) {
+                                    return;
+                                }
+
+                                patchBlock(block.id, {
+                                    content: readTextOnlyEditedHtml(e.currentTarget),
+                                });
+                                setEditingBlockContentId(null);
+                            }}
+                            dangerouslySetInnerHTML={{__html: block.content}}
+                        />
+                    </div>
+                ))}
+
+                <button
+                    type="button"
+                    className={`${b('add', [stop])} ${stop}`}
+                    onClick={(e) => {
+                        setBlockTemplatesAnchor(e.currentTarget);
+                        openBlockTemplates();
+                    }}
+                    aria-label={i18n('add_block')}
+                >
+                    <Icon data={Plus} />
+                </button>
+                <BlockInsertPopup
+                    anchor={blockTemplatesAnchor}
+                    open={blockTemplatesOpen}
+                    templates={blockTemplates}
+                    onClose={closeBlockTemplates}
+                    onApplyTemplate={applyBlockTemplate}
+                    onApplyHtml={applyRawBlock}
+                />
+            </div>
+
+            <CssPopup
+                anchor={containerAnchor}
+                open={containerCssOpen}
+                onClose={() => setContainerCssOpen(false)}
+                value={containerCss}
+                onChange={(value) =>
+                    onChange({[GridBlockTemplatesConsts.NodeAttrs.containerCss]: value})
+                }
+                placeholder={'grid-template-columns: 1fr 1fr;\ngap: 12px;'}
+            />
+
+            {editingBlockSettings && (
+                <BlockSettingsPopup
+                    anchor={blockAnchor}
+                    open
+                    onClose={() => setEditingBlockSettingsId(null)}
+                    html={editingBlockSettings.content}
+                    css={editingBlockSettings.css}
+                    onHtmlChange={(value) => patchBlock(editingBlockSettings.id, {content: value})}
+                    onCssChange={(value) => patchBlock(editingBlockSettings.id, {css: value})}
+                />
+            )}
+        </div>
+    );
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/NodeView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/NodeView.tsx
new file mode 100644
index 00000000..5c904d87
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/NodeView.tsx
@@ -0,0 +1,113 @@
+import {Portal} from '@gravity-ui/uikit';
+import type {Node} from 'prosemirror-model';
+import type {EditorView, NodeView} from 'prosemirror-view';
+
+import {getReactRendererFromState} from 'src/extensions/behavior/ReactRenderer';
+import {generateEntityId, isInvalidEntityId} from 'src/utils/entity-id';
+
+import {
+    GridBlockTemplatesConsts,
+    defaultGridBlockTemplatesEntityId,
+} from '../GridBlockTemplatesSpecs/const';
+import type {GridBlockTemplatesOptions} from '../types';
+
+import {GridBlockTemplatesView} from './GridBlockTemplatesView';
+import {STOP_EVENT_CLASSNAME} from './const';
+
+export class WGridBlockTemplatesNodeView implements NodeView {
+    readonly dom: HTMLElement;
+    private node: Node;
+    private readonly view: EditorView;
+    private readonly getPos: () => number | undefined;
+    private readonly options: {templates?: GridBlockTemplatesOptions};
+    private readonly renderItem;
+
+    constructor({
+        node,
+        view,
+        getPos,
+        options,
+    }: {
+        node: Node;
+        view: EditorView;
+        getPos: () => number | undefined;
+        options: {templates?: GridBlockTemplatesOptions};
+    }) {
+        this.node = node;
+        this.dom = document.createElement('div');
+        this.dom.classList.add('grid-block-templates-container');
+        this.dom.contentEditable = 'false';
+        this.view = view;
+        this.getPos = getPos;
+        this.options = options;
+
+        this.renderItem = getReactRendererFromState(view.state).createItem(
+            'gridBlockTemplates-view',
+            this.renderGridBlockTemplates.bind(this),
+        );
+
+        this.validateEntityId();
+    }
+
+    update(node: Node) {
+        if (node.type !== this.node.type) return false;
+        this.node = node;
+        this.renderItem.rerender();
+        return true;
+    }
+
+    destroy() {
+        this.renderItem.remove();
+    }
+
+    ignoreMutation() {
+        return true;
+    }
+
+    stopEvent(e: Event) {
+        const target = e.target as Element;
+        return Boolean(target.closest?.(`.${STOP_EVENT_CLASSNAME}`));
+    }
+
+    private validateEntityId() {
+        if (
+            isInvalidEntityId({
+                node: this.node,
+                doc: this.view.state.doc,
+                defaultId: defaultGridBlockTemplatesEntityId,
+            })
+        ) {
+            const newId = generateEntityId(GridBlockTemplatesConsts.NodeName);
+            this.view.dispatch(
+                this.view.state.tr.setNodeAttribute(
+                    this.getPos()!,
+                    GridBlockTemplatesConsts.NodeAttrs.EntityId,
+                    newId,
+                ),
+            );
+        }
+    }
+
+    private onChange(attrs: Partial<Node['attrs']>) {
+        const pos = this.getPos();
+        if (pos === undefined) return;
+
+        this.view.dispatch(
+            this.view.state.tr.setNodeMarkup(pos, undefined, {...this.node.attrs, ...attrs}, []),
+        );
+    }
+
+    private renderGridBlockTemplates() {
+        return (
+            <Portal container={this.dom}>
+                <GridBlockTemplatesView
+                    node={this.node}
+                    getPos={this.getPos}
+                    view={this.view}
+                    onChange={this.onChange.bind(this)}
+                    options={this.options}
+                />
+            </Portal>
+        );
+    }
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
new file mode 100644
index 00000000..bedacebf
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
@@ -0,0 +1,27 @@
+.g-md-grid-block-templates {
+    &__templates {
+        width: 320px;
+        max-width: calc(100vw - 32px);
+        padding: 8px;
+    }
+
+    &__templates-editor {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .g-text-area__control {
+            font-family: var(--g-font-family-monospace);
+        }
+    }
+
+    &__templates-controls {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+    }
+
+    &__templates-search {
+        margin-bottom: 6px;
+    }
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
new file mode 100644
index 00000000..62d8485e
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
@@ -0,0 +1,155 @@
+import {useMemo, useState} from 'react';
+
+import {Plus, TrashBin} from '@gravity-ui/icons';
+import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
+
+import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
+import {i18n} from 'src/i18n/grid-block-templates';
+
+import type {GridBlockTemplate} from '../types';
+import {clearStoredTemplates, parseTemplates, saveTemplates} from '../templates';
+
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+import './TemplatesPopup.scss';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+interface TemplatesPopupProps {
+    anchor: HTMLElement | null;
+    open: boolean;
+    templates: GridBlockTemplate[];
+    allowAdd: boolean;
+    emptyText: string;
+    onClose: () => void;
+    onApply: (template: GridBlockTemplate) => void;
+    onAdded: (templates: GridBlockTemplate[]) => void;
+    onCleared: (templates: GridBlockTemplate[]) => void;
+}
+
+export const TemplatesPopup: React.FC<TemplatesPopupProps> = ({
+    anchor,
+    open,
+    templates,
+    allowAdd,
+    emptyText,
+    onClose,
+    onApply,
+    onAdded,
+    onCleared,
+}) => {
+    const [adding, setAdding] = useState(false);
+    const [input, setInput] = useState('');
+    const [filter, setFilter] = useState('');
+
+    const filtered = useMemo(() => {
+        const query = filter.trim().toLowerCase();
+        if (!query) return templates;
+        return templates.filter((template) => template.title.toLowerCase().includes(query));
+    }, [templates, filter]);
+
+    const close = () => {
+        setAdding(false);
+        setInput('');
+        setFilter('');
+        onClose();
+    };
+
+    const handleSave = () => {
+        const parsed = parseTemplates(input);
+        if (parsed.length) onAdded(saveTemplates(parsed));
+        setInput('');
+        setAdding(false);
+    };
+
+    const handleClear = () => {
+        onCleared(clearStoredTemplates());
+        setFilter('');
+    };
+
+    return (
+        <Popup anchorElement={anchor} open={open} onOpenChange={close} placement="bottom-end">
+            <div className={b('templates', [stop])}>
+                {adding ? (
+                    <div className={b('templates-editor')}>
+                        <TextArea
+                            controlProps={{className: stop}}
+                            value={input}
+                            onUpdate={setInput}
+                            placeholder={i18n('templates_input_placeholder')}
+                            minRows={8}
+                            autoFocus
+                        />
+                        <div className={b('templates-controls')}>
+                            <Button view="flat" className={stop} onClick={() => setAdding(false)}>
+                                <span className={stop}>{i18n('cancel')}</span>
+                            </Button>
+                            <Button
+                                view="action"
+                                className={stop}
+                                disabled={!input.trim()}
+                                onClick={handleSave}
+                            >
+                                <span className={stop}>{i18n('save')}</span>
+                            </Button>
+                        </div>
+                    </div>
+                ) : (
+                    <>
+                        {templates.length > 0 && (
+                            <div className={b('templates-search')}>
+                                <TextInput
+                                    className={stop}
+                                    controlProps={{className: stop}}
+                                    size="s"
+                                    value={filter}
+                                    onUpdate={setFilter}
+                                    placeholder={i18n('search_templates')}
+                                    autoFocus
+                                />
+                            </div>
+                        )}
+                        <Menu className={stop}>
+                            {allowAdd && (
+                                <>
+                                    <Menu.Item
+                                        className={stop}
+                                        iconStart={<Icon data={Plus} />}
+                                        onClick={() => setAdding(true)}
+                                    >
+                                        {i18n('add_template')}
+                                    </Menu.Item>
+                                    <Menu.Item
+                                        className={stop}
+                                        iconStart={<Icon data={TrashBin} />}
+                                        onClick={handleClear}
+                                    >
+                                        {i18n('clear_templates')}
+                                    </Menu.Item>
+                                </>
+                            )}
+                            {filtered.map((template) => (
+                                <Menu.Item
+                                    key={template.id}
+                                    className={stop}
+                                    onClick={() => {
+                                        onApply(template);
+                                        close();
+                                    }}
+                                >
+                                    {template.title}
+                                </Menu.Item>
+                            ))}
+                            {filtered.length === 0 && (
+                                <Menu.Item disabled className={stop}>
+                                    {emptyText}
+                                </Menu.Item>
+                            )}
+                        </Menu>
+                    </>
+                )}
+            </div>
+        </Popup>
+    );
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/const.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/const.ts
new file mode 100644
index 00000000..15843f72
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/const.ts
@@ -0,0 +1,4 @@
+import {cn} from 'src/classname';
+
+export const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';
+export const cnGridBlockTemplates = cn('grid-block-templates');
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/index.ts
new file mode 100644
index 00000000..6aa6b9d0
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/index.ts
@@ -0,0 +1 @@
+export {WGridBlockTemplatesNodeView} from './NodeView';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
new file mode 100644
index 00000000..6c75b394
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
@@ -0,0 +1,24 @@
+import {entityIdAttr} from 'src/utils/entity-id';
+import {nodeTypeFactory} from 'src/utils/schema';
+
+export enum GridBlockTemplatesAttrs {
+    // @ts-expect-error error TS18055
+    EntityId = entityIdAttr,
+    /** Array of grid blocks. */
+    blocks = 'blocks',
+    /** CSS rules applied to the grid viewport. */
+    containerCss = 'containerCss',
+}
+
+export const gridBlockTemplatesNodeName = 'grid_block_templates';
+export const gridBlockTemplatesNodeType = nodeTypeFactory(gridBlockTemplatesNodeName);
+
+export const GridBlockTemplatesAction = 'createGridBlockTemplates';
+
+export const GridBlockTemplatesConsts = {
+    NodeName: gridBlockTemplatesNodeName,
+    NodeAttrs: GridBlockTemplatesAttrs,
+    nodeType: gridBlockTemplatesNodeType,
+} as const;
+
+export const defaultGridBlockTemplatesEntityId = gridBlockTemplatesNodeName + '#0';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
new file mode 100644
index 00000000..7b170478
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
@@ -0,0 +1,93 @@
+import type {Node} from 'prosemirror-model';
+
+import type {ExtensionAuto, ExtensionNodeSpec} from '#core';
+
+import type {GridBlock} from '../types';
+
+import {
+    GridBlockTemplatesConsts,
+    defaultGridBlockTemplatesEntityId,
+    gridBlockTemplatesNodeName,
+} from './const';
+
+export {gridBlockTemplatesNodeName, GridBlockTemplatesConsts} from './const';
+
+export type GridBlockTemplatesSpecsOptions = {
+    nodeView?: ExtensionNodeSpec['view'];
+};
+
+const readBlocks = (node: Node): GridBlock[] => {
+    const value = node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks];
+    return Array.isArray(value) ? value : [];
+};
+
+const indent = (text: string, by = '  ') =>
+    text
+        .split('\n')
+        .map((line) => (line ? by + line : line))
+        .join('\n');
+
+/** Assembles the static HTML written into a YFM HTML block. */
+export const buildGridHtml = (node: Node): string => {
+    const containerCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.containerCss] || '';
+    const containerStyle = containerCss.trim() ? ` style="${containerCss.trim()}"` : '';
+
+    const blocks = readBlocks(node)
+        .map((block, i) => {
+            const style = block.css.trim() ? ` style="${block.css.trim()}"` : '';
+            return indent(`<div class="block-${i + 1}"${style}>${block.content ?? ''}</div>`);
+        })
+        .join('\n');
+
+    return `<div class="grid"${containerStyle}>\n${blocks}\n</div>`;
+};
+
+const GridBlockTemplatesSpecsExtension: ExtensionAuto<GridBlockTemplatesSpecsOptions> = (
+    builder,
+    {nodeView},
+) => {
+    builder.addNode(gridBlockTemplatesNodeName, () => ({
+        // The node is created via the toolbar action; no markdown token is emitted for it.
+        fromMd: {
+            tokenSpec: {name: gridBlockTemplatesNodeName, type: 'node', noCloseToken: true},
+        },
+        spec: {
+            atom: true,
+            selectable: true,
+            group: 'block',
+            attrs: {
+                [GridBlockTemplatesConsts.NodeAttrs.blocks]: {default: []},
+                [GridBlockTemplatesConsts.NodeAttrs.containerCss]: {default: ''},
+                [GridBlockTemplatesConsts.NodeAttrs.EntityId]: {
+                    default: defaultGridBlockTemplatesEntityId,
+                },
+            },
+            parseDOM: [],
+            toDOM(node) {
+                return [
+                    'div',
+                    {
+                        class: 'grid-block-templates',
+                        [GridBlockTemplatesConsts.NodeAttrs.EntityId]:
+                            node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId],
+                    },
+                ];
+            },
+            dnd: {props: {offset: [8, 1]}},
+        },
+        toMd: (state, node) => {
+            state.write('::: html');
+            state.write('\n');
+            state.write(buildGridHtml(node));
+            state.ensureNewLine();
+            state.write(':::');
+            state.closeBlock(node);
+        },
+        view: nodeView,
+    }));
+};
+
+export const GridBlockTemplatesSpecs = Object.assign(
+    GridBlockTemplatesSpecsExtension,
+    GridBlockTemplatesConsts,
+);
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts
new file mode 100644
index 00000000..dc99fe19
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts
@@ -0,0 +1,27 @@
+import type {ActionSpec} from '#core';
+import {generateEntityId} from 'src/utils/entity-id';
+
+import {
+    GridBlockTemplatesConsts,
+    gridBlockTemplatesNodeType,
+} from './GridBlockTemplatesSpecs/const';
+
+export const addGridBlockTemplates: ActionSpec = {
+    isEnable(state) {
+        return state.selection.empty;
+    },
+    run(state, dispatch) {
+        const entityId = generateEntityId(GridBlockTemplatesConsts.NodeName);
+
+        const tr = state.tr.insert(
+            state.selection.from,
+            gridBlockTemplatesNodeType(state.schema).create({
+                [GridBlockTemplatesConsts.NodeAttrs.blocks]: [],
+                [GridBlockTemplatesConsts.NodeAttrs.containerCss]: '',
+                [GridBlockTemplatesConsts.NodeAttrs.EntityId]: entityId,
+            }),
+        );
+
+        dispatch(tr);
+    },
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/const.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/const.ts
new file mode 100644
index 00000000..c3cf3be8
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/const.ts
@@ -0,0 +1 @@
+export * from './GridBlockTemplatesSpecs/const';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/index.ts
new file mode 100644
index 00000000..c3f3c71d
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/index.ts
@@ -0,0 +1,29 @@
+import type {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';
+
+import {WGridBlockTemplatesNodeView} from './GridBlockTemplatesNodeView';
+import {GridBlockTemplatesSpecs} from './GridBlockTemplatesSpecs';
+import {GridBlockTemplatesAction} from './GridBlockTemplatesSpecs/const';
+import {addGridBlockTemplates} from './actions';
+import type {GridBlockTemplatesOptions} from './types';
+
+export const GridBlockTemplates: ExtensionAuto<{
+    templates?: GridBlockTemplatesOptions;
+}> = (builder, options = {}) => {
+    builder.use(GridBlockTemplatesSpecs, {
+        nodeView: gridBlockTemplatesNodeViewFactory(options),
+    });
+    builder.addAction(GridBlockTemplatesAction, () => addGridBlockTemplates);
+};
+
+const gridBlockTemplatesNodeViewFactory: (options: {
+    templates?: GridBlockTemplatesOptions;
+}) => (deps: ExtensionDeps) => NodeViewConstructor = (options) => () => (node, view, getPos) =>
+    new WGridBlockTemplatesNodeView({node, view, getPos, options});
+
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [GridBlockTemplatesAction]: Action;
+        }
+    }
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts
new file mode 100644
index 00000000..a52640bf
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts
@@ -0,0 +1,17 @@
+export type {
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplate,
+    GridBlockTemplateBlock,
+    GridBlockTemplateType,
+    GridBlockTemplatesOptions,
+} from '../types';
+
+export {parseTemplateBlock, parseTemplates} from './parse';
+export {
+    GRID_BLOCK_TEMPLATES_STORAGE_KEY,
+    clearStoredTemplates,
+    mergeTemplatesById,
+    readStoredTemplates,
+    saveTemplates,
+} from './storage';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
new file mode 100644
index 00000000..d90e8189
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
@@ -0,0 +1,100 @@
+import {parseTemplateBlock, parseTemplates} from './parse';
+
+describe('parseTemplateBlock', () => {
+    it('normalizes raw html with a styled root element', () => {
+        expect(parseTemplateBlock('<div style="padding:12px"><strong>Text</strong></div>')).toEqual(
+            {
+                css: 'padding:12px',
+                content: '<strong>Text</strong>',
+            },
+        );
+    });
+
+    it('uses the raw value when input has no root element', () => {
+        expect(parseTemplateBlock('Plain text')).toEqual({
+            css: '',
+            content: 'Plain text',
+        });
+    });
+});
+
+describe('parseTemplates', () => {
+    it('parses multiple typed templates at once', () => {
+        const result = parseTemplates(`
+            <template id="layout" title="Layout" type="container">
+                <div class="grid" style="display:grid;grid-template-columns:1fr 1fr">
+                    <div style="padding:8px"><strong>Left</strong></div>
+                    <div style="padding:10px">Right</div>
+                </div>
+            </template>
+            <template id="card" title="Card" type="block">
+                <div style="padding:12px">Card text</div>
+            </template>
+        `);
+
+        expect(result).toHaveLength(2);
+        expect(result[0]).toMatchObject({
+            id: 'layout',
+            title: 'Layout',
+            type: 'container',
+            containerCss: 'display:grid;grid-template-columns:1fr 1fr',
+            blocks: [
+                {css: 'padding:8px', content: '<strong>Left</strong>'},
+                {css: 'padding:10px', content: 'Right'},
+            ],
+        });
+        expect(result[1]).toMatchObject({
+            id: 'card',
+            title: 'Card',
+            type: 'block',
+            block: {css: 'padding:12px', content: 'Card text'},
+        });
+    });
+
+    it('parses a container template from serialized grid html', () => {
+        const [template] = parseTemplates(`
+            <template id="grid" title="Grid" type="container">
+                <div class="grid" style="display:grid;gap:12px">
+                    <div class="block-1" style="padding:12px">First</div>
+                    <div class="block-2" style="padding:14px"><em>Second</em></div>
+                </div>
+            </template>
+        `);
+
+        expect(template).toMatchObject({
+            type: 'container',
+            containerCss: 'display:grid;gap:12px',
+            blocks: [
+                {css: 'padding:12px', content: 'First'},
+                {css: 'padding:14px', content: '<em>Second</em>'},
+            ],
+        });
+    });
+
+    it('falls back to raw content for a plain block template', () => {
+        const [template] = parseTemplates(
+            '<template id="plain" title="Plain" type="block">Plain text</template>',
+        );
+
+        expect(template).toMatchObject({
+            id: 'plain',
+            title: 'Plain',
+            type: 'block',
+            block: {css: '', content: 'Plain text'},
+        });
+    });
+
+    it('ignores templates without a valid type', () => {
+        expect(
+            parseTemplates(`
+                <template id="missing"><div>Missing type</div></template>
+                <template id="unknown" type="section"><div>Unknown type</div></template>
+            `),
+        ).toEqual([]);
+    });
+
+    it('returns an empty array for blank input', () => {
+        expect(parseTemplates('   ')).toEqual([]);
+        expect(parseTemplates('')).toEqual([]);
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
new file mode 100644
index 00000000..eb04e015
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
@@ -0,0 +1,95 @@
+import {v4 as uuidv4} from 'uuid';
+
+import type {
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplate,
+    GridBlockTemplateBlock,
+    GridBlockTemplateType,
+} from '../types';
+
+const genId = () => 'grid-block-template-' + uuidv4();
+
+const isTemplateType = (value: string | null): value is GridBlockTemplateType =>
+    value === 'block' || value === 'container';
+
+const parseHtml = (value: string): Document | null => {
+    if (typeof window === 'undefined' || typeof window.DOMParser === 'undefined') return null;
+    return new DOMParser().parseFromString(value, 'text/html');
+};
+
+const getStyle = (element: Element | null) =>
+    element instanceof HTMLElement ? element.getAttribute('style')?.trim() || '' : '';
+
+export const parseTemplateBlock = (content: string): GridBlockTemplateBlock => {
+    const doc = parseHtml(content);
+    const root = doc?.body.firstElementChild ?? null;
+
+    if (!root) {
+        return {css: '', content};
+    }
+
+    return {
+        css: getStyle(root),
+        content: root.innerHTML.trim(),
+    };
+};
+
+const parseContainerTemplate = (
+    id: string,
+    title: string,
+    content: string,
+): GridBlockContainerTemplate => {
+    const doc = parseHtml(content);
+    const root = doc?.body.firstElementChild ?? null;
+    const children = root ? Array.from(root.children) : [];
+
+    return {
+        id,
+        title,
+        type: 'container',
+        content,
+        containerCss: getStyle(root),
+        blocks: children.map((child) => ({
+            css: getStyle(child),
+            content: child.innerHTML.trim(),
+        })),
+    };
+};
+
+const parseBlockTemplate = (
+    id: string,
+    title: string,
+    content: string,
+): GridBlockBlockTemplate => ({
+    id,
+    title,
+    type: 'block',
+    content,
+    block: parseTemplateBlock(content),
+});
+
+/**
+ * Parses one or more `<template id="..." title="..." type="block|container">...</template>`
+ * blocks. Templates without a valid type are ignored.
+ */
+export function parseTemplates(input: string): GridBlockTemplate[] {
+    const value = input.trim();
+    if (!value) return [];
+
+    const doc = parseHtml(value);
+    if (!doc) return [];
+
+    return Array.from(doc.querySelectorAll('template')).flatMap((el) => {
+        const type = el.getAttribute('type')?.trim() ?? null;
+        if (!isTemplateType(type)) return [];
+
+        const id = el.getAttribute('id')?.trim() || genId();
+        const title = el.getAttribute('title')?.trim() || id;
+        const content = el.innerHTML.trim();
+
+        return type === 'container'
+            ? parseContainerTemplate(id, title, content)
+            : parseBlockTemplate(id, title, content);
+    });
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts
new file mode 100644
index 00000000..ead33784
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts
@@ -0,0 +1,95 @@
+import type {GridBlockTemplate} from '../types';
+
+import {
+    GRID_BLOCK_TEMPLATES_STORAGE_KEY,
+    clearStoredTemplates,
+    mergeTemplatesById,
+    readStoredTemplates,
+    saveTemplates,
+} from './storage';
+
+const blockTpl = (id: string, title = id): GridBlockTemplate => ({
+    id,
+    title,
+    type: 'block',
+    content: `<div>${id}</div>`,
+    block: {css: 'padding:1px', content: id},
+});
+
+const containerTpl = (id: string, title = id): GridBlockTemplate => ({
+    id,
+    title,
+    type: 'container',
+    content: `<div><div>${id}</div></div>`,
+    containerCss: 'display:grid',
+    blocks: [{css: 'padding:1px', content: id}],
+});
+
+beforeEach(() => {
+    window.localStorage.clear();
+});
+
+describe('mergeTemplatesById', () => {
+    it('keeps order and overrides duplicates with the later source', () => {
+        const result = mergeTemplatesById(
+            [blockTpl('a', 'option a'), containerTpl('b')],
+            [blockTpl('a', 'stored a')],
+        );
+
+        expect(result).toEqual([blockTpl('a', 'stored a'), containerTpl('b')]);
+    });
+});
+
+describe('readStoredTemplates', () => {
+    it('returns an empty array when nothing is stored', () => {
+        expect(readStoredTemplates()).toEqual([]);
+    });
+
+    it('ignores malformed json', () => {
+        window.localStorage.setItem(GRID_BLOCK_TEMPLATES_STORAGE_KEY, '{not json');
+        expect(readStoredTemplates()).toEqual([]);
+    });
+
+    it('filters out entries with the wrong shape', () => {
+        window.localStorage.setItem(
+            GRID_BLOCK_TEMPLATES_STORAGE_KEY,
+            JSON.stringify([
+                blockTpl('a'),
+                containerTpl('b'),
+                {id: 'missing-type', title: 'Missing type', content: '<div />'},
+                {id: 'wrong-type', title: 'Wrong type', type: 'section', content: '<div />'},
+                {id: 'bad-block', title: 'Bad block', type: 'block', content: '<div />'},
+                {
+                    id: 'bad-container',
+                    title: 'Bad container',
+                    type: 'container',
+                    content: '<div />',
+                    containerCss: '',
+                    blocks: [{css: 1, content: 'x'}],
+                },
+            ]),
+        );
+
+        expect(readStoredTemplates()).toEqual([blockTpl('a'), containerTpl('b')]);
+    });
+});
+
+describe('saveTemplates', () => {
+    it('persists templates and merges by id across calls', () => {
+        saveTemplates([blockTpl('a', 'first')]);
+        const result = saveTemplates([blockTpl('a', 'second'), containerTpl('b')]);
+
+        expect(result).toEqual([blockTpl('a', 'second'), containerTpl('b')]);
+        expect(readStoredTemplates()).toEqual([blockTpl('a', 'second'), containerTpl('b')]);
+    });
+});
+
+describe('clearStoredTemplates', () => {
+    it('removes saved templates from localStorage', () => {
+        saveTemplates([blockTpl('a'), containerTpl('b')]);
+
+        expect(clearStoredTemplates()).toEqual([]);
+        expect(readStoredTemplates()).toEqual([]);
+        expect(window.localStorage.getItem(GRID_BLOCK_TEMPLATES_STORAGE_KEY)).toBeNull();
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts
new file mode 100644
index 00000000..0ccde769
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts
@@ -0,0 +1,95 @@
+import type {
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplate,
+    GridBlockTemplateBlock,
+} from '../types';
+
+export const GRID_BLOCK_TEMPLATES_STORAGE_KEY = 'gravity-md-editor:grid-block-templates';
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+    typeof value === 'object' && value !== null;
+
+const isTemplateBlock = (value: unknown): value is GridBlockTemplateBlock =>
+    isObject(value) && typeof value.css === 'string' && typeof value.content === 'string';
+
+const isTemplateBase = (value: unknown): value is GridBlockTemplate =>
+    isObject(value) &&
+    typeof value.id === 'string' &&
+    typeof value.title === 'string' &&
+    typeof value.content === 'string' &&
+    (value.type === 'block' || value.type === 'container');
+
+const isBlockTemplate = (value: unknown): value is GridBlockBlockTemplate =>
+    isTemplateBase(value) && value.type === 'block' && isTemplateBlock(value.block);
+
+const isContainerTemplate = (value: unknown): value is GridBlockContainerTemplate =>
+    isTemplateBase(value) &&
+    value.type === 'container' &&
+    typeof value.containerCss === 'string' &&
+    Array.isArray(value.blocks) &&
+    value.blocks.every(isTemplateBlock);
+
+const isGridBlockTemplate = (value: unknown): value is GridBlockTemplate =>
+    isBlockTemplate(value) || isContainerTemplate(value);
+
+const getStorage = (): Storage | null => {
+    if (typeof window === 'undefined') return null;
+    try {
+        return window.localStorage;
+    } catch {
+        return null;
+    }
+};
+
+export function readStoredTemplates(): GridBlockTemplate[] {
+    const storage = getStorage();
+    if (!storage) return [];
+
+    try {
+        const raw = storage.getItem(GRID_BLOCK_TEMPLATES_STORAGE_KEY);
+        if (!raw) return [];
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed.filter(isGridBlockTemplate) : [];
+    } catch {
+        return [];
+    }
+}
+
+/** Merges `next` into already stored templates by id and persists the result. */
+export function saveTemplates(next: GridBlockTemplate[]): GridBlockTemplate[] {
+    const merged = mergeTemplatesById(readStoredTemplates(), next);
+
+    const storage = getStorage();
+    if (storage) {
+        try {
+            storage.setItem(GRID_BLOCK_TEMPLATES_STORAGE_KEY, JSON.stringify(merged));
+        } catch {
+            // Storage may be full or unavailable; keep the in-memory result.
+        }
+    }
+
+    return merged;
+}
+
+export function clearStoredTemplates(): GridBlockTemplate[] {
+    const storage = getStorage();
+    if (storage) {
+        try {
+            storage.removeItem(GRID_BLOCK_TEMPLATES_STORAGE_KEY);
+        } catch {
+            // Storage may be unavailable; keep the in-memory result empty.
+        }
+    }
+
+    return [];
+}
+
+/** Later templates override earlier ones with the same id; order is preserved. */
+export function mergeTemplatesById(...sources: GridBlockTemplate[][]): GridBlockTemplate[] {
+    const byId = new Map<string, GridBlockTemplate>();
+    for (const template of sources.flat()) {
+        byId.set(template.id, template);
+    }
+    return [...byId.values()];
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
new file mode 100644
index 00000000..cbcd36ef
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
@@ -0,0 +1,41 @@
+export type GridBlock = {
+    id: string;
+    /** Inline CSS applied to this block. */
+    css: string;
+    /** Raw HTML content rendered inside the block. */
+    content: string;
+};
+
+export type GridBlockTemplateType = 'block' | 'container';
+
+export type GridBlockTemplateBlock = Omit<GridBlock, 'id'>;
+
+interface GridBlockTemplateBase {
+    id: string;
+    title: string;
+    type: GridBlockTemplateType;
+    /** Original template inner HTML. */
+    content: string;
+}
+
+export interface GridBlockBlockTemplate extends GridBlockTemplateBase {
+    type: 'block';
+    block: GridBlockTemplateBlock;
+}
+
+export interface GridBlockContainerTemplate extends GridBlockTemplateBase {
+    type: 'container';
+    containerCss: string;
+    blocks: GridBlockTemplateBlock[];
+}
+
+export type GridBlockTemplate = GridBlockBlockTemplate | GridBlockContainerTemplate;
+
+export interface GridBlockTemplatesOptions {
+    /** Templates provided via extension options; read-only source. */
+    items?: GridBlockTemplate[];
+    /** Show the container templates button in the block toolbar. */
+    showButton?: boolean;
+    /** Show the "add template" button (writes to localStorage). */
+    allowAdd?: boolean;
+}
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
new file mode 100644
index 00000000..8ef4b5ba
--- /dev/null
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -0,0 +1,21 @@
+{
+  "add_block": "Add block",
+  "add_template": "Add",
+  "block_css": "Block {{index}} CSS",
+  "block_html_input_placeholder": "<div style=\"padding:16px;border-radius:8px;background:#f8fafc\">Block HTML</div>",
+  "block_templates_empty": "No block templates",
+  "cancel": "Cancel",
+  "clear_templates": "Clear all templates",
+  "container_templates": "Container templates",
+  "container_templates_empty": "No container templates",
+  "custom_html": "Custom HTML",
+  "css": "CSS",
+  "grid_css": "Grid CSS",
+  "html": "HTML",
+  "block_html_placeholder": "<button type=\"button\">Button text</button>",
+  "insert": "Insert",
+  "remove_grid": "Remove grid",
+  "save": "Save",
+  "search_templates": "Search by name",
+  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\">\n  <div class=\"grid\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">\n    <div style=\"padding:16px\">Left</div>\n    <div style=\"padding:16px\">Right</div>\n  </div>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\">\n  <div style=\"padding:16px;border-radius:8px;background:#f8fafc\">Card text</div>\n</template>"
+}
diff --git a/packages/editor/src/i18n/grid-block-templates/index.ts b/packages/editor/src/i18n/grid-block-templates/index.ts
new file mode 100644
index 00000000..f6f82374
--- /dev/null
+++ b/packages/editor/src/i18n/grid-block-templates/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const KEYSET = 'grid-block-templates';
+
+export const i18n = registerKeyset(KEYSET, {en, ru});
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
new file mode 100644
index 00000000..38e235af
--- /dev/null
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -0,0 +1,21 @@
+{
+  "add_block": "Добавить блок",
+  "add_template": "Добавить",
+  "block_css": "CSS блока {{index}}",
+  "block_html_input_placeholder": "<div style=\"padding:16px;border-radius:8px;background:#f8fafc\">HTML блока</div>",
+  "block_templates_empty": "Нет шаблонов блоков",
+  "cancel": "Отмена",
+  "clear_templates": "Очистить все шаблоны",
+  "container_templates": "Шаблоны контейнеров",
+  "container_templates_empty": "Нет шаблонов контейнеров",
+  "custom_html": "Свой HTML",
+  "css": "CSS",
+  "grid_css": "CSS сетки",
+  "html": "HTML",
+  "block_html_placeholder": "<button type=\"button\">Текст кнопки</button>",
+  "insert": "Вставить",
+  "remove_grid": "Удалить сетку",
+  "save": "Сохранить",
+  "search_templates": "Поиск по названию",
+  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\">\n  <div class=\"grid\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">\n    <div style=\"padding:16px\">Left</div>\n    <div style=\"padding:16px\">Right</div>\n  </div>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\">\n  <div style=\"padding:16px;border-radius:8px;background:#f8fafc\">Card text</div>\n</template>"
+}

From ba852c99ad10b562cdf13acc640a0c41561c6b91 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 13:22:44 +0200
Subject: [PATCH 02/21] feat: refine grid block templates interactions

---
 .../GridBlockTemplates.scss                   |  51 +++++++
 .../GridBlockTemplatesView.tsx                | 134 +++++++++++++++---
 .../src/i18n/grid-block-templates/en.json     |   1 +
 .../src/i18n/grid-block-templates/ru.json     |   1 +
 4 files changed, 165 insertions(+), 22 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
index 27cb5eff..b5da33fd 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
@@ -30,6 +30,18 @@
 
         border: 1px dashed var(--g-color-line-generic);
         border-radius: var(--g-border-radius-m);
+
+        &_dragged {
+            opacity: 0.45;
+        }
+
+        &_drop-before {
+            box-shadow: -3px 0 0 var(--g-color-line-focus);
+        }
+
+        &_drop-after {
+            box-shadow: 3px 0 0 var(--g-color-line-focus);
+        }
     }
 
     &__item-gear {
@@ -46,6 +58,43 @@
         opacity: 1;
     }
 
+    &__item-drag {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        width: 24px;
+        height: 24px;
+        padding: 0;
+
+        cursor: grab;
+
+        opacity: 0;
+        color: var(--g-color-text-secondary);
+        border: 0;
+        border-radius: var(--g-border-radius-xs);
+        background: transparent;
+
+        transition: opacity 0.1s ease-in-out;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        &:hover {
+            color: var(--g-color-text-primary);
+            background: var(--g-color-base-generic-hover);
+        }
+    }
+
+    &__item:hover &__item-drag {
+        opacity: 1;
+    }
+
     &__item-content {
         min-height: 1.2em;
 
@@ -74,6 +123,8 @@
         justify-content: center;
         align-items: center;
 
+        width: 100%;
+        margin-top: 8px;
         min-height: 56px;
         padding: 12px;
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
index 2b441ec6..a5b24f83 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -1,6 +1,6 @@
 import {useMemo, useState} from 'react';
 
-import {Gear, LayoutHeaderColumns, Plus, TrashBin} from '@gravity-ui/icons';
+import {Gear, GripHorizontal, LayoutHeaderColumns, Plus, TrashBin} from '@gravity-ui/icons';
 import {Button, Icon, Popup} from '@gravity-ui/uikit';
 import type {Node} from 'prosemirror-model';
 import type {EditorView} from 'prosemirror-view';
@@ -55,6 +55,8 @@ const toBlock = (template: GridBlockBlockTemplate): GridBlock => ({
     content: template.block.content,
 });
 
+type DropPlacement = 'before' | 'after';
+
 const EDITABLE_TEXT_NODE_ATTR = 'data-grid-block-editable-text';
 const EDITABLE_TEXT_NODE_SELECTOR = `[${EDITABLE_TEXT_NODE_ATTR}="true"]`;
 
@@ -119,6 +121,40 @@ const insertPlainTextAtSelection = (text: string) => {
     selection.addRange(range);
 };
 
+const getDropPlacement = (event: React.DragEvent<HTMLElement>): DropPlacement => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const useHorizontalAxis = Math.abs(event.clientX - centerX) > Math.abs(event.clientY - centerY);
+
+    return useHorizontalAxis
+        ? event.clientX < centerX
+            ? 'before'
+            : 'after'
+        : event.clientY < centerY
+          ? 'before'
+          : 'after';
+};
+
+const moveBlock = (
+    blocks: GridBlock[],
+    draggedId: string,
+    targetId: string,
+    placement: DropPlacement,
+) => {
+    if (draggedId === targetId) return blocks;
+
+    const dragged = blocks.find((block) => block.id === draggedId);
+    if (!dragged) return blocks;
+
+    const withoutDragged = blocks.filter((block) => block.id !== draggedId);
+    const targetIndex = withoutDragged.findIndex((block) => block.id === targetId);
+    if (targetIndex === -1) return blocks;
+
+    const insertIndex = placement === 'before' ? targetIndex : targetIndex + 1;
+    return [...withoutDragged.slice(0, insertIndex), dragged, ...withoutDragged.slice(insertIndex)];
+};
+
 const BlockSettingsPopup: React.FC<{
     anchor: HTMLElement | null;
     open: boolean;
@@ -200,6 +236,11 @@ export const GridBlockTemplatesView: React.FC<{
     const [blockAnchor, setBlockAnchor] = useElementState();
     const [editingBlockSettingsId, setEditingBlockSettingsId] = useState<string | null>(null);
     const [editingBlockContentId, setEditingBlockContentId] = useState<string | null>(null);
+    const [draggedBlockId, setDraggedBlockId] = useState<string | null>(null);
+    const [dropTarget, setDropTarget] = useState<{
+        id: string;
+        placement: DropPlacement;
+    } | null>(null);
 
     const allowAdd = Boolean(templates?.allowAdd);
     const [storedTemplates, setStoredTemplates] =
@@ -251,6 +292,17 @@ export const GridBlockTemplatesView: React.FC<{
     const patchBlock = (id: string, patch: Partial<GridBlock>) =>
         setBlocks(blocks.map((block) => (block.id === id ? {...block, ...patch} : block)));
 
+    const clearDragging = () => {
+        setDraggedBlockId(null);
+        setDropTarget(null);
+    };
+
+    const reorderBlocks = (targetId: string, placement: DropPlacement) => {
+        if (!draggedBlockId) return;
+        setBlocks(moveBlock(blocks, draggedBlockId, targetId, placement));
+        clearDragging();
+    };
+
     const editingBlockSettings =
         blocks.find((block) => block.id === editingBlockSettingsId) ?? null;
 
@@ -316,9 +368,47 @@ export const GridBlockTemplatesView: React.FC<{
                 {blocks.map((block, i) => (
                     <div
                         key={block.id}
-                        className={`${b('item', [stop])} block-${i + 1}`}
+                        className={`${b('item', {
+                            dragged: draggedBlockId === block.id,
+                            'drop-before':
+                                dropTarget?.id === block.id && dropTarget.placement === 'before',
+                            'drop-after':
+                                dropTarget?.id === block.id && dropTarget.placement === 'after',
+                        })} ${stop} block-${i + 1}`}
                         style={parseInlineCss(block.css)}
+                        onDragOver={(e) => {
+                            if (!draggedBlockId) return;
+                            e.preventDefault();
+                            e.dataTransfer.dropEffect = 'move';
+                            setDropTarget({id: block.id, placement: getDropPlacement(e)});
+                        }}
+                        onDragLeave={(e) => {
+                            if (e.currentTarget.contains(e.relatedTarget as globalThis.Node)) {
+                                return;
+                            }
+                            setDropTarget((current) => (current?.id === block.id ? null : current));
+                        }}
+                        onDrop={(e) => {
+                            e.preventDefault();
+                            const placement = dropTarget?.placement ?? getDropPlacement(e);
+                            reorderBlocks(block.id, placement);
+                        }}
                     >
+                        <button
+                            type="button"
+                            draggable
+                            className={`${b('item-drag')} ${stop}`}
+                            onDragStart={(e) => {
+                                e.stopPropagation();
+                                setDraggedBlockId(block.id);
+                                e.dataTransfer.effectAllowed = 'move';
+                                e.dataTransfer.setData('text/plain', block.id);
+                            }}
+                            onDragEnd={clearDragging}
+                            aria-label={i18n('drag_block', {index: String(i + 1)})}
+                        >
+                            <Icon data={GripHorizontal} size={14} />
+                        </button>
                         <Button
                             view="flat"
                             size="s"
@@ -364,28 +454,28 @@ export const GridBlockTemplatesView: React.FC<{
                         />
                     </div>
                 ))}
-
-                <button
-                    type="button"
-                    className={`${b('add', [stop])} ${stop}`}
-                    onClick={(e) => {
-                        setBlockTemplatesAnchor(e.currentTarget);
-                        openBlockTemplates();
-                    }}
-                    aria-label={i18n('add_block')}
-                >
-                    <Icon data={Plus} />
-                </button>
-                <BlockInsertPopup
-                    anchor={blockTemplatesAnchor}
-                    open={blockTemplatesOpen}
-                    templates={blockTemplates}
-                    onClose={closeBlockTemplates}
-                    onApplyTemplate={applyBlockTemplate}
-                    onApplyHtml={applyRawBlock}
-                />
             </div>
 
+            <button
+                type="button"
+                className={`${b('add', [stop])} ${stop}`}
+                onClick={(e) => {
+                    setBlockTemplatesAnchor(e.currentTarget);
+                    openBlockTemplates();
+                }}
+                aria-label={i18n('add_block')}
+            >
+                <Icon data={Plus} />
+            </button>
+            <BlockInsertPopup
+                anchor={blockTemplatesAnchor}
+                open={blockTemplatesOpen}
+                templates={blockTemplates}
+                onClose={closeBlockTemplates}
+                onApplyTemplate={applyBlockTemplate}
+                onApplyHtml={applyRawBlock}
+            />
+
             <CssPopup
                 anchor={containerAnchor}
                 open={containerCssOpen}
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
index 8ef4b5ba..b7135482 100644
--- a/packages/editor/src/i18n/grid-block-templates/en.json
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -10,6 +10,7 @@
   "container_templates_empty": "No container templates",
   "custom_html": "Custom HTML",
   "css": "CSS",
+  "drag_block": "Drag block {{index}}",
   "grid_css": "Grid CSS",
   "html": "HTML",
   "block_html_placeholder": "<button type=\"button\">Button text</button>",
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
index 38e235af..8408b7d8 100644
--- a/packages/editor/src/i18n/grid-block-templates/ru.json
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -10,6 +10,7 @@
   "container_templates_empty": "Нет шаблонов контейнеров",
   "custom_html": "Свой HTML",
   "css": "CSS",
+  "drag_block": "Перетащить блок {{index}}",
   "grid_css": "CSS сетки",
   "html": "HTML",
   "block_html_placeholder": "<button type=\"button\">Текст кнопки</button>",

From f3df99ecd875f894befb0d44530b0ab93884a8ad Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 13:58:12 +0200
Subject: [PATCH 03/21] feat(GridBlockTemplates): pointer drag handle and
 verbatim raw HTML blocks

Replace native HTML5 drag with a pointer-based drag handle so reordering
works reliably over preview HTML; make the handle visible above block
content (z-index, float background, touch-action: none).

Keep user-entered raw HTML verbatim inside the block instead of unwrapping
its root element, so a pasted <div>text</div> stays as
<div class="block-N"><div>text</div></div> on serialization.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../BlockInsertPopup.tsx                      |   4 +-
 .../GridBlockTemplates.scss                   |   7 +-
 .../GridBlockTemplatesView.tsx                | 121 +++++++++++++-----
 .../GridBlockTemplates/templates/index.ts     |   2 +-
 .../templates/parse.test.ts                   |  18 ++-
 .../GridBlockTemplates/templates/parse.ts     |   6 +
 6 files changed, 118 insertions(+), 40 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
index 6b7c36db..e3dc4ef1 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
@@ -6,7 +6,7 @@ import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
 import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
 import {i18n} from 'src/i18n/grid-block-templates';
 
-import {parseTemplateBlock} from '../templates';
+import {parseRawBlock} from '../templates';
 import type {GridBlockBlockTemplate, GridBlockTemplateBlock} from '../types';
 
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
@@ -50,7 +50,7 @@ export const BlockInsertPopup: React.FC<BlockInsertPopupProps> = ({
     };
 
     const handleApplyHtml = () => {
-        onApplyHtml(parseTemplateBlock(input));
+        onApplyHtml(parseRawBlock(input));
         close();
     };
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
index b5da33fd..9a4567a5 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
@@ -60,6 +60,7 @@
 
     &__item-drag {
         position: absolute;
+        z-index: 1;
         top: 2px;
         left: 2px;
 
@@ -73,11 +74,15 @@
 
         cursor: grab;
 
+        // pointer-based drag: keep the gesture on the handle instead of scrolling
+        touch-action: none;
+
         opacity: 0;
         color: var(--g-color-text-secondary);
         border: 0;
         border-radius: var(--g-border-radius-xs);
-        background: transparent;
+        background: var(--g-color-base-float);
+        box-shadow: 0 0 0 1px var(--g-color-line-generic);
 
         transition: opacity 0.1s ease-in-out;
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
index a5b24f83..88d26eee 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -1,4 +1,4 @@
-import {useMemo, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
 import {Gear, GripHorizontal, LayoutHeaderColumns, Plus, TrashBin} from '@gravity-ui/icons';
 import {Button, Icon, Popup} from '@gravity-ui/uikit';
@@ -31,6 +31,7 @@ export {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
+const BLOCK_ID_ATTR = 'data-grid-block-id';
 
 // PROTOTYPE: raw inline declarations, no scoping or sanitization.
 const parseInlineCss = (css: string): React.CSSProperties => {
@@ -121,17 +122,16 @@ const insertPlainTextAtSelection = (text: string) => {
     selection.addRange(range);
 };
 
-const getDropPlacement = (event: React.DragEvent<HTMLElement>): DropPlacement => {
-    const rect = event.currentTarget.getBoundingClientRect();
+const getDropPlacement = (rect: DOMRect, clientX: number, clientY: number): DropPlacement => {
     const centerX = rect.left + rect.width / 2;
     const centerY = rect.top + rect.height / 2;
-    const useHorizontalAxis = Math.abs(event.clientX - centerX) > Math.abs(event.clientY - centerY);
+    const useHorizontalAxis = Math.abs(clientX - centerX) > Math.abs(clientY - centerY);
 
     return useHorizontalAxis
-        ? event.clientX < centerX
+        ? clientX < centerX
             ? 'before'
             : 'after'
-        : event.clientY < centerY
+        : clientY < centerY
           ? 'before'
           : 'after';
 };
@@ -241,6 +241,11 @@ export const GridBlockTemplatesView: React.FC<{
         id: string;
         placement: DropPlacement;
     } | null>(null);
+    const dragStateRef = useRef<{
+        draggedId: string;
+        target: {id: string; placement: DropPlacement} | null;
+    } | null>(null);
+    const cleanupDragListenersRef = useRef<(() => void) | null>(null);
 
     const allowAdd = Boolean(templates?.allowAdd);
     const [storedTemplates, setStoredTemplates] =
@@ -295,14 +300,83 @@ export const GridBlockTemplatesView: React.FC<{
     const clearDragging = () => {
         setDraggedBlockId(null);
         setDropTarget(null);
+        dragStateRef.current = null;
     };
 
-    const reorderBlocks = (targetId: string, placement: DropPlacement) => {
-        if (!draggedBlockId) return;
-        setBlocks(moveBlock(blocks, draggedBlockId, targetId, placement));
-        clearDragging();
+    const beginBlockDrag = (blockId: string, event: React.PointerEvent<HTMLButtonElement>) => {
+        if (event.button !== 0) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+
+        cleanupDragListenersRef.current?.();
+
+        dragStateRef.current = {draggedId: blockId, target: null};
+        setDraggedBlockId(blockId);
+        setDropTarget(null);
+
+        const handlePointerMove = (pointerEvent: PointerEvent) => {
+            const target = document
+                .elementFromPoint(pointerEvent.clientX, pointerEvent.clientY)
+                ?.closest<HTMLElement>(`[${BLOCK_ID_ATTR}]`);
+            const targetId = target?.getAttribute(BLOCK_ID_ATTR) ?? null;
+
+            if (!target || !targetId || targetId === blockId) {
+                if (dragStateRef.current) dragStateRef.current.target = null;
+                setDropTarget(null);
+                return;
+            }
+
+            const nextTarget = {
+                id: targetId,
+                placement: getDropPlacement(
+                    target.getBoundingClientRect(),
+                    pointerEvent.clientX,
+                    pointerEvent.clientY,
+                ),
+            };
+
+            if (dragStateRef.current) dragStateRef.current.target = nextTarget;
+            setDropTarget(nextTarget);
+        };
+
+        const handlePointerUp = () => {
+            const dragState = dragStateRef.current;
+            if (dragState?.target) {
+                setBlocks(
+                    moveBlock(
+                        blocks,
+                        dragState.draggedId,
+                        dragState.target.id,
+                        dragState.target.placement,
+                    ),
+                );
+            }
+            cleanupDragListenersRef.current?.();
+            cleanupDragListenersRef.current = null;
+            clearDragging();
+        };
+
+        const handlePointerCancel = () => {
+            cleanupDragListenersRef.current?.();
+            cleanupDragListenersRef.current = null;
+            clearDragging();
+        };
+
+        cleanupDragListenersRef.current = () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+            window.removeEventListener('pointercancel', handlePointerCancel);
+        };
+
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp);
+        window.addEventListener('pointercancel', handlePointerCancel);
     };
 
+    useEffect(() => () => cleanupDragListenersRef.current?.(), []);
+
     const editingBlockSettings =
         blocks.find((block) => block.id === editingBlockSettingsId) ?? null;
 
@@ -375,36 +449,13 @@ export const GridBlockTemplatesView: React.FC<{
                             'drop-after':
                                 dropTarget?.id === block.id && dropTarget.placement === 'after',
                         })} ${stop} block-${i + 1}`}
+                        data-grid-block-id={block.id}
                         style={parseInlineCss(block.css)}
-                        onDragOver={(e) => {
-                            if (!draggedBlockId) return;
-                            e.preventDefault();
-                            e.dataTransfer.dropEffect = 'move';
-                            setDropTarget({id: block.id, placement: getDropPlacement(e)});
-                        }}
-                        onDragLeave={(e) => {
-                            if (e.currentTarget.contains(e.relatedTarget as globalThis.Node)) {
-                                return;
-                            }
-                            setDropTarget((current) => (current?.id === block.id ? null : current));
-                        }}
-                        onDrop={(e) => {
-                            e.preventDefault();
-                            const placement = dropTarget?.placement ?? getDropPlacement(e);
-                            reorderBlocks(block.id, placement);
-                        }}
                     >
                         <button
                             type="button"
-                            draggable
                             className={`${b('item-drag')} ${stop}`}
-                            onDragStart={(e) => {
-                                e.stopPropagation();
-                                setDraggedBlockId(block.id);
-                                e.dataTransfer.effectAllowed = 'move';
-                                e.dataTransfer.setData('text/plain', block.id);
-                            }}
-                            onDragEnd={clearDragging}
+                            onPointerDown={(e) => beginBlockDrag(block.id, e)}
                             aria-label={i18n('drag_block', {index: String(i + 1)})}
                         >
                             <Icon data={GripHorizontal} size={14} />
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts
index a52640bf..c462fdc9 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts
@@ -7,7 +7,7 @@ export type {
     GridBlockTemplatesOptions,
 } from '../types';
 
-export {parseTemplateBlock, parseTemplates} from './parse';
+export {parseRawBlock, parseTemplateBlock, parseTemplates} from './parse';
 export {
     GRID_BLOCK_TEMPLATES_STORAGE_KEY,
     clearStoredTemplates,
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
index d90e8189..f6b0b172 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
@@ -1,4 +1,20 @@
-import {parseTemplateBlock, parseTemplates} from './parse';
+import {parseRawBlock, parseTemplateBlock, parseTemplates} from './parse';
+
+describe('parseRawBlock', () => {
+    it('keeps the root element verbatim instead of unwrapping it', () => {
+        expect(parseRawBlock('<div>какой-то текст</div>')).toEqual({
+            css: '',
+            content: '<div>какой-то текст</div>',
+        });
+    });
+
+    it('trims and keeps plain text', () => {
+        expect(parseRawBlock('  Plain text  ')).toEqual({
+            css: '',
+            content: 'Plain text',
+        });
+    });
+});
 
 describe('parseTemplateBlock', () => {
     it('normalizes raw html with a styled root element', () => {
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
index eb04e015..8128c0fb 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
@@ -35,6 +35,12 @@ export const parseTemplateBlock = (content: string): GridBlockTemplateBlock => {
     };
 };
 
+/** Keeps user HTML verbatim inside the block; the block div only carries grid CSS. */
+export const parseRawBlock = (content: string): GridBlockTemplateBlock => ({
+    css: '',
+    content: content.trim(),
+});
+
 const parseContainerTemplate = (
     id: string,
     title: string,

From 92c1dca1f46c304e97cd195ba542fa2c5597c73d Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 14:13:04 +0200
Subject: [PATCH 04/21] feat(GridBlockTemplates): add scoped custom CSS field
 for the container

Add a second textarea in the container gear popup for free-form CSS rules
with selectors (.grid {}, .block-1 {}). Rules are scoped to the grid
instance so they never leak to other grids, applied live in the preview
and serialized into a <style> tag inside the html block.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../GridBlockTemplates.test.ts                | 31 ++++++++-
 .../GridBlockTemplatesView.tsx                | 67 ++++++++++++-------
 .../GridBlockTemplatesSpecs/const.ts          |  4 +-
 .../GridBlockTemplatesSpecs/index.ts          | 12 +++-
 .../additional/GridBlockTemplates/css.ts      | 14 ++++
 .../src/i18n/grid-block-templates/en.json     |  1 +
 .../src/i18n/grid-block-templates/ru.json     |  1 +
 7 files changed, 104 insertions(+), 26 deletions(-)
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/css.ts

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
index 136425c6..ae6aa976 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
@@ -36,11 +36,40 @@ describe('GridBlockTemplates extension', () => {
         ).toBe(
             [
                 '::: html',
-                '<div class="grid" style="display: grid;">',
+                '<div class="grid grid-templates-scope-grid_block_templates-1" style="display: grid;">',
                 '  <div class="block-1" style="padding: 12px;"><strong>First</strong></div>',
                 '</div>',
                 ':::',
             ].join('\n'),
         );
     });
+
+    it('should emit scoped custom css into a style tag', () => {
+        expect(
+            serializer.serialize(
+                doc(
+                    gridBlockTemplates({
+                        [GridBlockTemplatesAttrs.blocks]: [
+                            {id: 'block-1', css: '', content: 'First'},
+                        ],
+                        [GridBlockTemplatesAttrs.customCss]:
+                            '.grid { align-items: center; }\n.block-1 { background: #eee; }',
+                        [GridBlockTemplatesAttrs.EntityId]: 'grid_block_templates-1',
+                    }),
+                ),
+            ),
+        ).toBe(
+            [
+                '::: html',
+                '<style>',
+                '  .grid-templates-scope-grid_block_templates-1 .grid { align-items: center; }',
+                '  .grid-templates-scope-grid_block_templates-1 .block-1 { background: #eee; }',
+                '</style>',
+                '<div class="grid grid-templates-scope-grid_block_templates-1">',
+                '  <div class="block-1">First</div>',
+                '</div>',
+                ':::',
+            ].join('\n'),
+        );
+    });
 });
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
index 88d26eee..9bb04543 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -10,6 +10,7 @@ import {i18n} from 'src/i18n/grid-block-templates';
 import {useBooleanState, useElementState} from 'src/react-utils/hooks';
 import {removeNode} from 'src/utils/remove-node';
 
+import {gridScopeClass, scopeCss} from '../css';
 import {GridBlockTemplatesConsts} from '../GridBlockTemplatesSpecs/const';
 import type {
     GridBlock,
@@ -191,24 +192,38 @@ const BlockSettingsPopup: React.FC<{
     </Popup>
 );
 
-const CssPopup: React.FC<{
+const ContainerCssPopup: React.FC<{
     anchor: HTMLElement | null;
     open: boolean;
     onClose: () => void;
-    value: string;
-    onChange: (value: string) => void;
-    placeholder: string;
-}> = ({anchor, open, onClose, value, onChange, placeholder}) => (
+    inlineCss: string;
+    customCss: string;
+    onInlineCssChange: (value: string) => void;
+    onCustomCssChange: (value: string) => void;
+}> = ({anchor, open, onClose, inlineCss, customCss, onInlineCssChange, onCustomCssChange}) => (
     <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
-        <div className={b('css-editor', [stop])}>
-            <TextArea
-                controlProps={{className: stop}}
-                value={value}
-                onUpdate={onChange}
-                placeholder={placeholder}
-                minRows={4}
-                autoFocus
-            />
+        <div className={b('block-settings-editor', [stop])}>
+            <div className={b('field')}>
+                <div className={b('field-label')}>{i18n('grid_css')}</div>
+                <TextArea
+                    controlProps={{className: stop}}
+                    value={inlineCss}
+                    onUpdate={onInlineCssChange}
+                    placeholder={'grid-template-columns: 1fr 1fr;\ngap: 12px;'}
+                    minRows={4}
+                    autoFocus
+                />
+            </div>
+            <div className={b('field')}>
+                <div className={b('field-label')}>{i18n('container_css')}</div>
+                <TextArea
+                    controlProps={{className: stop}}
+                    value={customCss}
+                    onUpdate={onCustomCssChange}
+                    placeholder={'.grid {\n  align-items: center;\n}\n.block-1 {\n  background: #eee;\n}'}
+                    minRows={6}
+                />
+            </div>
         </div>
     </Popup>
 );
@@ -222,12 +237,14 @@ export const GridBlockTemplatesView: React.FC<{
 }> = ({node, getPos, view, onChange, options}) => {
     const entityId: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId];
     const containerCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.containerCss] ?? '';
+    const customCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.customCss] ?? '';
     const blocks: GridBlock[] = node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks] ?? [];
     const {templates} = options;
 
-    const scopeClass = useMemo(
-        () => 'grid-templates-scope-' + entityId.replace(/[^a-z0-9_-]/gi, ''),
-        [entityId],
+    const scopeClass = useMemo(() => gridScopeClass(entityId), [entityId]);
+    const scopedCustomCss = useMemo(
+        () => (customCss.trim() ? scopeCss(customCss, scopeClass) : ''),
+        [customCss, scopeClass],
     );
 
     const [containerAnchor, setContainerAnchor] = useElementState();
@@ -275,6 +292,7 @@ export const GridBlockTemplatesView: React.FC<{
     const applyContainerTemplate = (template: GridBlockContainerTemplate) => {
         onChange({
             [GridBlockTemplatesConsts.NodeAttrs.containerCss]: template.containerCss,
+            [GridBlockTemplatesConsts.NodeAttrs.customCss]: '',
             [GridBlockTemplatesConsts.NodeAttrs.blocks]: template.blocks.map((block) => ({
                 id: genId(),
                 css: block.css,
@@ -383,7 +401,7 @@ export const GridBlockTemplatesView: React.FC<{
     return (
         <div className={b()}>
             {/* PROTOTYPE scoping: wraps user CSS into the grid viewport selector. */}
-            <style>{`.${scopeClass}{display:grid;gap:8px;${containerCss}}`}</style>
+            <style>{`.${scopeClass}{display:grid;gap:8px;${containerCss}}\n${scopedCustomCss}`}</style>
 
             <div className={b('toolbar', [stop])}>
                 <Button
@@ -438,7 +456,7 @@ export const GridBlockTemplatesView: React.FC<{
                 </Button>
             </div>
 
-            <div className={`${b('grid')} ${scopeClass}`}>
+            <div className={`${b('grid')} grid ${scopeClass}`}>
                 {blocks.map((block, i) => (
                     <div
                         key={block.id}
@@ -527,15 +545,18 @@ export const GridBlockTemplatesView: React.FC<{
                 onApplyHtml={applyRawBlock}
             />
 
-            <CssPopup
+            <ContainerCssPopup
                 anchor={containerAnchor}
                 open={containerCssOpen}
                 onClose={() => setContainerCssOpen(false)}
-                value={containerCss}
-                onChange={(value) =>
+                inlineCss={containerCss}
+                customCss={customCss}
+                onInlineCssChange={(value) =>
                     onChange({[GridBlockTemplatesConsts.NodeAttrs.containerCss]: value})
                 }
-                placeholder={'grid-template-columns: 1fr 1fr;\ngap: 12px;'}
+                onCustomCssChange={(value) =>
+                    onChange({[GridBlockTemplatesConsts.NodeAttrs.customCss]: value})
+                }
             />
 
             {editingBlockSettings && (
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
index 6c75b394..e5d67161 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
@@ -6,8 +6,10 @@ export enum GridBlockTemplatesAttrs {
     EntityId = entityIdAttr,
     /** Array of grid blocks. */
     blocks = 'blocks',
-    /** CSS rules applied to the grid viewport. */
+    /** Inline CSS declarations applied to the grid viewport. */
     containerCss = 'containerCss',
+    /** Free-form CSS rules with selectors, scoped to this grid instance. */
+    customCss = 'customCss',
 }
 
 export const gridBlockTemplatesNodeName = 'grid_block_templates';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
index 7b170478..c7119c34 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
@@ -2,6 +2,7 @@ import type {Node} from 'prosemirror-model';
 
 import type {ExtensionAuto, ExtensionNodeSpec} from '#core';
 
+import {gridScopeClass, scopeCss} from '../css';
 import type {GridBlock} from '../types';
 
 import {
@@ -30,6 +31,10 @@ const indent = (text: string, by = '  ') =>
 /** Assembles the static HTML written into a YFM HTML block. */
 export const buildGridHtml = (node: Node): string => {
     const containerCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.containerCss] || '';
+    const customCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.customCss] || '';
+    const entityId: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId];
+    const scopeClass = gridScopeClass(entityId);
+
     const containerStyle = containerCss.trim() ? ` style="${containerCss.trim()}"` : '';
 
     const blocks = readBlocks(node)
@@ -39,7 +44,11 @@ export const buildGridHtml = (node: Node): string => {
         })
         .join('\n');
 
-    return `<div class="grid"${containerStyle}>\n${blocks}\n</div>`;
+    const styleTag = customCss.trim()
+        ? `<style>\n${indent(scopeCss(customCss.trim(), scopeClass).trim())}\n</style>\n`
+        : '';
+
+    return `${styleTag}<div class="grid ${scopeClass}"${containerStyle}>\n${blocks}\n</div>`;
 };
 
 const GridBlockTemplatesSpecsExtension: ExtensionAuto<GridBlockTemplatesSpecsOptions> = (
@@ -58,6 +67,7 @@ const GridBlockTemplatesSpecsExtension: ExtensionAuto<GridBlockTemplatesSpecsOpt
             attrs: {
                 [GridBlockTemplatesConsts.NodeAttrs.blocks]: {default: []},
                 [GridBlockTemplatesConsts.NodeAttrs.containerCss]: {default: ''},
+                [GridBlockTemplatesConsts.NodeAttrs.customCss]: {default: ''},
                 [GridBlockTemplatesConsts.NodeAttrs.EntityId]: {
                     default: defaultGridBlockTemplatesEntityId,
                 },
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
new file mode 100644
index 00000000..d3b3f7c4
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
@@ -0,0 +1,14 @@
+export const gridScopeClass = (entityId: string) =>
+    'grid-templates-scope-' + entityId.replace(/[^a-z0-9_-]/gi, '');
+
+/** Prefixes every top-level selector with the scope class so rules stay local to one grid. */
+export const scopeCss = (css: string, scopeClass: string): string =>
+    css.replace(/(^|\})\s*([^{}]+)\{/g, (_match, brace, selectorList) => {
+        const scoped = selectorList
+            .split(',')
+            .map((selector: string) => selector.trim())
+            .filter(Boolean)
+            .map((selector: string) => `.${scopeClass} ${selector}`)
+            .join(', ');
+        return `${brace}\n${scoped} {`;
+    });
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
index b7135482..66e8645c 100644
--- a/packages/editor/src/i18n/grid-block-templates/en.json
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -6,6 +6,7 @@
   "block_templates_empty": "No block templates",
   "cancel": "Cancel",
   "clear_templates": "Clear all templates",
+  "container_css": "Container CSS",
   "container_templates": "Container templates",
   "container_templates_empty": "No container templates",
   "custom_html": "Custom HTML",
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
index 8408b7d8..0bbf7002 100644
--- a/packages/editor/src/i18n/grid-block-templates/ru.json
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -6,6 +6,7 @@
   "block_templates_empty": "Нет шаблонов блоков",
   "cancel": "Отмена",
   "clear_templates": "Очистить все шаблоны",
+  "container_css": "CSS контейнера",
   "container_templates": "Шаблоны контейнеров",
   "container_templates_empty": "Нет шаблонов контейнеров",
   "custom_html": "Свой HTML",

From fb62e81f4c351070aa90801f81fb6530097c9329 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 14:30:37 +0200
Subject: [PATCH 05/21] feat(GridBlockTemplates): make the templates list
 scrollable

Wrap the menu in both the container-templates and block-insert popups in
a scrollable container (max-height) so a long list of templates no longer
overflows the viewport; the search field stays pinned above it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../BlockInsertPopup.tsx                      | 48 +++++++-------
 .../TemplatesPopup.scss                       |  6 ++
 .../TemplatesPopup.tsx                        | 66 ++++++++++---------
 3 files changed, 65 insertions(+), 55 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
index e3dc4ef1..a218c878 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
@@ -94,33 +94,35 @@ export const BlockInsertPopup: React.FC<BlockInsertPopupProps> = ({
                                 autoFocus
                             />
                         </div>
-                        <Menu className={stop}>
-                            <Menu.Item
-                                className={stop}
-                                iconStart={<Icon data={Code} />}
-                                onClick={() => setAddingCustomHtml(true)}
-                            >
-                                {i18n('custom_html')}
-                            </Menu.Item>
-                            {filtered.map((template) => (
+                        <div className={b('templates-list', [stop])}>
+                            <Menu className={stop}>
                                 <Menu.Item
-                                    key={template.id}
                                     className={stop}
-                                    iconStart={<Icon data={Plus} />}
-                                    onClick={() => {
-                                        onApplyTemplate(template);
-                                        close();
-                                    }}
+                                    iconStart={<Icon data={Code} />}
+                                    onClick={() => setAddingCustomHtml(true)}
                                 >
-                                    {template.title}
+                                    {i18n('custom_html')}
                                 </Menu.Item>
-                            ))}
-                            {filtered.length === 0 && (
-                                <Menu.Item disabled className={stop}>
-                                    {i18n('block_templates_empty')}
-                                </Menu.Item>
-                            )}
-                        </Menu>
+                                {filtered.map((template) => (
+                                    <Menu.Item
+                                        key={template.id}
+                                        className={stop}
+                                        iconStart={<Icon data={Plus} />}
+                                        onClick={() => {
+                                            onApplyTemplate(template);
+                                            close();
+                                        }}
+                                    >
+                                        {template.title}
+                                    </Menu.Item>
+                                ))}
+                                {filtered.length === 0 && (
+                                    <Menu.Item disabled className={stop}>
+                                        {i18n('block_templates_empty')}
+                                    </Menu.Item>
+                                )}
+                            </Menu>
+                        </div>
                     </>
                 )}
             </div>
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
index bedacebf..53c14885 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
@@ -24,4 +24,10 @@
     &__templates-search {
         margin-bottom: 6px;
     }
+
+    &__templates-list {
+        overflow-y: auto;
+
+        max-height: 280px;
+    }
 }
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
index 62d8485e..cd4f9624 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
@@ -110,43 +110,45 @@ export const TemplatesPopup: React.FC<TemplatesPopupProps> = ({
                                 />
                             </div>
                         )}
-                        <Menu className={stop}>
-                            {allowAdd && (
-                                <>
+                        <div className={b('templates-list', [stop])}>
+                            <Menu className={stop}>
+                                {allowAdd && (
+                                    <>
+                                        <Menu.Item
+                                            className={stop}
+                                            iconStart={<Icon data={Plus} />}
+                                            onClick={() => setAdding(true)}
+                                        >
+                                            {i18n('add_template')}
+                                        </Menu.Item>
+                                        <Menu.Item
+                                            className={stop}
+                                            iconStart={<Icon data={TrashBin} />}
+                                            onClick={handleClear}
+                                        >
+                                            {i18n('clear_templates')}
+                                        </Menu.Item>
+                                    </>
+                                )}
+                                {filtered.map((template) => (
                                     <Menu.Item
+                                        key={template.id}
                                         className={stop}
-                                        iconStart={<Icon data={Plus} />}
-                                        onClick={() => setAdding(true)}
+                                        onClick={() => {
+                                            onApply(template);
+                                            close();
+                                        }}
                                     >
-                                        {i18n('add_template')}
+                                        {template.title}
                                     </Menu.Item>
-                                    <Menu.Item
-                                        className={stop}
-                                        iconStart={<Icon data={TrashBin} />}
-                                        onClick={handleClear}
-                                    >
-                                        {i18n('clear_templates')}
+                                ))}
+                                {filtered.length === 0 && (
+                                    <Menu.Item disabled className={stop}>
+                                        {emptyText}
                                     </Menu.Item>
-                                </>
-                            )}
-                            {filtered.map((template) => (
-                                <Menu.Item
-                                    key={template.id}
-                                    className={stop}
-                                    onClick={() => {
-                                        onApply(template);
-                                        close();
-                                    }}
-                                >
-                                    {template.title}
-                                </Menu.Item>
-                            ))}
-                            {filtered.length === 0 && (
-                                <Menu.Item disabled className={stop}>
-                                    {emptyText}
-                                </Menu.Item>
-                            )}
-                        </Menu>
+                                )}
+                            </Menu>
+                        </div>
                     </>
                 )}
             </div>

From 01b4c9631499e3fbeb78b2b2f683433e8c8a6a4f Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 15:16:50 +0200
Subject: [PATCH 06/21] feat(GridBlockTemplates): switch to selector-based CSS,
 drop inline styles

Replace inline CSS everywhere with a single selector-based model. The
container gear has one CSS field (.grid {}, .block-1 {}); the block gear
keeps HTML + a CSS field where & targets the block root and other
selectors are scoped under it. All rules are scoped to the instance and
emitted into a <style> tag instead of style="" attributes; templates
convert their inline style to rules on insert.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../GridBlockTemplates.test.ts                |  37 +++---
 .../GridBlockTemplatesView.tsx                | 105 +++++++-----------
 .../GridBlockTemplatesSpecs/const.ts          |   4 +-
 .../GridBlockTemplatesSpecs/index.ts          |  29 ++---
 .../additional/GridBlockTemplates/actions.ts  |   2 +-
 .../additional/GridBlockTemplates/css.ts      |  23 +++-
 .../additional/GridBlockTemplates/types.ts    |   2 +-
 .../src/i18n/grid-block-templates/en.json     |   1 -
 .../src/i18n/grid-block-templates/ru.json     |   1 -
 9 files changed, 96 insertions(+), 108 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
index ae6aa976..12d70176 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
@@ -16,19 +16,14 @@ const {doc, gridBlockTemplates} = builders<'doc' | 'gridBlockTemplates'>(schema,
 });
 
 describe('GridBlockTemplates extension', () => {
-    it('should serialize to yfm html block', () => {
+    it('should serialize blocks without inline styles', () => {
         expect(
             serializer.serialize(
                 doc(
                     gridBlockTemplates({
                         [GridBlockTemplatesAttrs.blocks]: [
-                            {
-                                id: 'block-1',
-                                css: 'padding: 12px;',
-                                content: '<strong>First</strong>',
-                            },
+                            {id: 'block-1', css: '', content: '<strong>First</strong>'},
                         ],
-                        [GridBlockTemplatesAttrs.containerCss]: 'display: grid;',
                         [GridBlockTemplatesAttrs.EntityId]: 'grid_block_templates-1',
                     }),
                 ),
@@ -36,24 +31,25 @@ describe('GridBlockTemplates extension', () => {
         ).toBe(
             [
                 '::: html',
-                '<div class="grid grid-templates-scope-grid_block_templates-1" style="display: grid;">',
-                '  <div class="block-1" style="padding: 12px;"><strong>First</strong></div>',
+                '<div class="grid-templates-scope-grid_block_templates-1">',
+                '  <div class="grid">',
+                '    <div class="block-1"><strong>First</strong></div>',
+                '  </div>',
                 '</div>',
                 ':::',
             ].join('\n'),
         );
     });
 
-    it('should emit scoped custom css into a style tag', () => {
+    it('should emit scoped container and per-block css into a style tag', () => {
         expect(
             serializer.serialize(
                 doc(
                     gridBlockTemplates({
                         [GridBlockTemplatesAttrs.blocks]: [
-                            {id: 'block-1', css: '', content: 'First'},
+                            {id: 'block-1', css: '& { padding: 12px; }\nh3 { margin: 0; }', content: 'First'},
                         ],
-                        [GridBlockTemplatesAttrs.customCss]:
-                            '.grid { align-items: center; }\n.block-1 { background: #eee; }',
+                        [GridBlockTemplatesAttrs.customCss]: '.grid { align-items: center; }',
                         [GridBlockTemplatesAttrs.EntityId]: 'grid_block_templates-1',
                     }),
                 ),
@@ -61,12 +57,15 @@ describe('GridBlockTemplates extension', () => {
         ).toBe(
             [
                 '::: html',
-                '<style>',
-                '  .grid-templates-scope-grid_block_templates-1 .grid { align-items: center; }',
-                '  .grid-templates-scope-grid_block_templates-1 .block-1 { background: #eee; }',
-                '</style>',
-                '<div class="grid grid-templates-scope-grid_block_templates-1">',
-                '  <div class="block-1">First</div>',
+                '<div class="grid-templates-scope-grid_block_templates-1">',
+                '  <style>',
+                '    .grid-templates-scope-grid_block_templates-1 .grid { align-items: center; }',
+                '    .grid-templates-scope-grid_block_templates-1 .block-1 { padding: 12px; }',
+                '    .grid-templates-scope-grid_block_templates-1 .block-1 h3 { margin: 0; }',
+                '  </style>',
+                '  <div class="grid">',
+                '    <div class="block-1">First</div>',
+                '  </div>',
                 '</div>',
                 ':::',
             ].join('\n'),
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
index 9bb04543..ddbf8b79 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -10,7 +10,7 @@ import {i18n} from 'src/i18n/grid-block-templates';
 import {useBooleanState, useElementState} from 'src/react-utils/hooks';
 import {removeNode} from 'src/utils/remove-node';
 
-import {gridScopeClass, scopeCss} from '../css';
+import {blockClass, gridScopeClass, inlineToRule, scopeCss} from '../css';
 import {GridBlockTemplatesConsts} from '../GridBlockTemplatesSpecs/const';
 import type {
     GridBlock,
@@ -34,26 +34,11 @@ const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
 const BLOCK_ID_ATTR = 'data-grid-block-id';
 
-// PROTOTYPE: raw inline declarations, no scoping or sanitization.
-const parseInlineCss = (css: string): React.CSSProperties => {
-    const style: Record<string, string> = {};
-    for (const rule of css.split(';')) {
-        const idx = rule.indexOf(':');
-        if (idx === -1) continue;
-        const prop = rule.slice(0, idx).trim();
-        const value = rule.slice(idx + 1).trim();
-        if (!prop || !value) continue;
-        const camel = prop.replace(/-([a-z])/g, (_, ch) => ch.toUpperCase());
-        style[camel] = value;
-    }
-    return style as React.CSSProperties;
-};
-
 const genId = () => Math.random().toString(36).slice(2, 10);
 
 const toBlock = (template: GridBlockBlockTemplate): GridBlock => ({
     id: genId(),
-    css: template.block.css,
+    css: inlineToRule(template.block.css),
     content: template.block.content,
 });
 
@@ -184,8 +169,8 @@ const BlockSettingsPopup: React.FC<{
                     controlProps={{className: stop}}
                     value={css}
                     onUpdate={onCssChange}
-                    placeholder={'background: #eee;\nborder-radius: 8px;'}
-                    minRows={4}
+                    placeholder={'& {\n  padding: 16px;\n  border-radius: 8px;\n}\nh3 {\n  margin: 0;\n}'}
+                    minRows={5}
                 />
             </div>
         </div>
@@ -196,34 +181,19 @@ const ContainerCssPopup: React.FC<{
     anchor: HTMLElement | null;
     open: boolean;
     onClose: () => void;
-    inlineCss: string;
-    customCss: string;
-    onInlineCssChange: (value: string) => void;
-    onCustomCssChange: (value: string) => void;
-}> = ({anchor, open, onClose, inlineCss, customCss, onInlineCssChange, onCustomCssChange}) => (
+    css: string;
+    onCssChange: (value: string) => void;
+}> = ({anchor, open, onClose, css, onCssChange}) => (
     <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
-        <div className={b('block-settings-editor', [stop])}>
-            <div className={b('field')}>
-                <div className={b('field-label')}>{i18n('grid_css')}</div>
-                <TextArea
-                    controlProps={{className: stop}}
-                    value={inlineCss}
-                    onUpdate={onInlineCssChange}
-                    placeholder={'grid-template-columns: 1fr 1fr;\ngap: 12px;'}
-                    minRows={4}
-                    autoFocus
-                />
-            </div>
-            <div className={b('field')}>
-                <div className={b('field-label')}>{i18n('container_css')}</div>
-                <TextArea
-                    controlProps={{className: stop}}
-                    value={customCss}
-                    onUpdate={onCustomCssChange}
-                    placeholder={'.grid {\n  align-items: center;\n}\n.block-1 {\n  background: #eee;\n}'}
-                    minRows={6}
-                />
-            </div>
+        <div className={b('css-editor', [stop])}>
+            <TextArea
+                controlProps={{className: stop}}
+                value={css}
+                onUpdate={onCssChange}
+                placeholder={'.grid {\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.block-1 {\n  background: #eee;\n}'}
+                minRows={6}
+                autoFocus
+            />
         </div>
     </Popup>
 );
@@ -236,16 +206,22 @@ export const GridBlockTemplatesView: React.FC<{
     options: {templates?: GridBlockTemplatesOptions};
 }> = ({node, getPos, view, onChange, options}) => {
     const entityId: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId];
-    const containerCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.containerCss] ?? '';
     const customCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.customCss] ?? '';
     const blocks: GridBlock[] = node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks] ?? [];
     const {templates} = options;
 
     const scopeClass = useMemo(() => gridScopeClass(entityId), [entityId]);
-    const scopedCustomCss = useMemo(
-        () => (customCss.trim() ? scopeCss(customCss, scopeClass) : ''),
-        [customCss, scopeClass],
-    );
+    const scopedCss = useMemo(() => {
+        const rules = [
+            customCss.trim() && scopeCss(customCss, `.${scopeClass}`).trim(),
+            ...blocks.map(
+                (block, i) =>
+                    block.css.trim() &&
+                    scopeCss(block.css, `.${scopeClass} .${blockClass(i)}`).trim(),
+            ),
+        ].filter(Boolean);
+        return rules.join('\n');
+    }, [customCss, blocks, scopeClass]);
 
     const [containerAnchor, setContainerAnchor] = useElementState();
     const [containerCssOpen, setContainerCssOpen] = useState(false);
@@ -291,11 +267,13 @@ export const GridBlockTemplatesView: React.FC<{
 
     const applyContainerTemplate = (template: GridBlockContainerTemplate) => {
         onChange({
-            [GridBlockTemplatesConsts.NodeAttrs.containerCss]: template.containerCss,
-            [GridBlockTemplatesConsts.NodeAttrs.customCss]: '',
+            [GridBlockTemplatesConsts.NodeAttrs.customCss]: inlineToRule(
+                template.containerCss,
+                '.grid',
+            ),
             [GridBlockTemplatesConsts.NodeAttrs.blocks]: template.blocks.map((block) => ({
                 id: genId(),
-                css: block.css,
+                css: inlineToRule(block.css),
                 content: block.content,
             })),
         });
@@ -399,9 +377,9 @@ export const GridBlockTemplatesView: React.FC<{
         blocks.find((block) => block.id === editingBlockSettingsId) ?? null;
 
     return (
-        <div className={b()}>
-            {/* PROTOTYPE scoping: wraps user CSS into the grid viewport selector. */}
-            <style>{`.${scopeClass}{display:grid;gap:8px;${containerCss}}\n${scopedCustomCss}`}</style>
+        <div className={`${b()} ${scopeClass}`}>
+            {/* PROTOTYPE scoping: selectors in user CSS are prefixed with the instance scope. */}
+            <style>{`.${scopeClass} .grid{display:grid;gap:8px}\n${scopedCss}`}</style>
 
             <div className={b('toolbar', [stop])}>
                 <Button
@@ -456,7 +434,7 @@ export const GridBlockTemplatesView: React.FC<{
                 </Button>
             </div>
 
-            <div className={`${b('grid')} grid ${scopeClass}`}>
+            <div className={`${b('grid')} grid`}>
                 {blocks.map((block, i) => (
                     <div
                         key={block.id}
@@ -466,9 +444,8 @@ export const GridBlockTemplatesView: React.FC<{
                                 dropTarget?.id === block.id && dropTarget.placement === 'before',
                             'drop-after':
                                 dropTarget?.id === block.id && dropTarget.placement === 'after',
-                        })} ${stop} block-${i + 1}`}
+                        })} ${stop} ${blockClass(i)}`}
                         data-grid-block-id={block.id}
-                        style={parseInlineCss(block.css)}
                     >
                         <button
                             type="button"
@@ -549,12 +526,8 @@ export const GridBlockTemplatesView: React.FC<{
                 anchor={containerAnchor}
                 open={containerCssOpen}
                 onClose={() => setContainerCssOpen(false)}
-                inlineCss={containerCss}
-                customCss={customCss}
-                onInlineCssChange={(value) =>
-                    onChange({[GridBlockTemplatesConsts.NodeAttrs.containerCss]: value})
-                }
-                onCustomCssChange={(value) =>
+                css={customCss}
+                onCssChange={(value) =>
                     onChange({[GridBlockTemplatesConsts.NodeAttrs.customCss]: value})
                 }
             />
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
index e5d67161..9500ab17 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
@@ -6,9 +6,7 @@ export enum GridBlockTemplatesAttrs {
     EntityId = entityIdAttr,
     /** Array of grid blocks. */
     blocks = 'blocks',
-    /** Inline CSS declarations applied to the grid viewport. */
-    containerCss = 'containerCss',
-    /** Free-form CSS rules with selectors, scoped to this grid instance. */
+    /** CSS rules with selectors, scoped to this grid instance. */
     customCss = 'customCss',
 }
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
index c7119c34..e9d3312b 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
@@ -2,7 +2,7 @@ import type {Node} from 'prosemirror-model';
 
 import type {ExtensionAuto, ExtensionNodeSpec} from '#core';
 
-import {gridScopeClass, scopeCss} from '../css';
+import {blockClass, gridScopeClass, scopeCss} from '../css';
 import type {GridBlock} from '../types';
 
 import {
@@ -30,25 +30,29 @@ const indent = (text: string, by = '  ') =>
 
 /** Assembles the static HTML written into a YFM HTML block. */
 export const buildGridHtml = (node: Node): string => {
-    const containerCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.containerCss] || '';
     const customCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.customCss] || '';
     const entityId: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId];
     const scopeClass = gridScopeClass(entityId);
+    const gridBlocks = readBlocks(node);
 
-    const containerStyle = containerCss.trim() ? ` style="${containerCss.trim()}"` : '';
+    const blocks = gridBlocks
+        .map((block, i) => indent(`<div class="${blockClass(i)}">${block.content ?? ''}</div>`))
+        .join('\n');
 
-    const blocks = readBlocks(node)
-        .map((block, i) => {
-            const style = block.css.trim() ? ` style="${block.css.trim()}"` : '';
-            return indent(`<div class="block-${i + 1}"${style}>${block.content ?? ''}</div>`);
-        })
+    const rules = [
+        customCss.trim() && scopeCss(customCss, `.${scopeClass}`).trim(),
+        ...gridBlocks.map(
+            (block, i) =>
+                block.css.trim() && scopeCss(block.css, `.${scopeClass} .${blockClass(i)}`).trim(),
+        ),
+    ]
+        .filter(Boolean)
         .join('\n');
 
-    const styleTag = customCss.trim()
-        ? `<style>\n${indent(scopeCss(customCss.trim(), scopeClass).trim())}\n</style>\n`
-        : '';
+    const styleTag = rules ? `<style>\n${indent(rules.trim())}\n</style>\n` : '';
+    const grid = `<div class="grid">\n${blocks}\n</div>`;
 
-    return `${styleTag}<div class="grid ${scopeClass}"${containerStyle}>\n${blocks}\n</div>`;
+    return `<div class="${scopeClass}">\n${styleTag ? indent(styleTag.trimEnd()) + '\n' : ''}${indent(grid)}\n</div>`;
 };
 
 const GridBlockTemplatesSpecsExtension: ExtensionAuto<GridBlockTemplatesSpecsOptions> = (
@@ -66,7 +70,6 @@ const GridBlockTemplatesSpecsExtension: ExtensionAuto<GridBlockTemplatesSpecsOpt
             group: 'block',
             attrs: {
                 [GridBlockTemplatesConsts.NodeAttrs.blocks]: {default: []},
-                [GridBlockTemplatesConsts.NodeAttrs.containerCss]: {default: ''},
                 [GridBlockTemplatesConsts.NodeAttrs.customCss]: {default: ''},
                 [GridBlockTemplatesConsts.NodeAttrs.EntityId]: {
                     default: defaultGridBlockTemplatesEntityId,
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts
index dc99fe19..5132843b 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts
@@ -17,7 +17,7 @@ export const addGridBlockTemplates: ActionSpec = {
             state.selection.from,
             gridBlockTemplatesNodeType(state.schema).create({
                 [GridBlockTemplatesConsts.NodeAttrs.blocks]: [],
-                [GridBlockTemplatesConsts.NodeAttrs.containerCss]: '',
+                [GridBlockTemplatesConsts.NodeAttrs.customCss]: '',
                 [GridBlockTemplatesConsts.NodeAttrs.EntityId]: entityId,
             }),
         );
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
index d3b3f7c4..bfbb9991 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
@@ -1,14 +1,31 @@
 export const gridScopeClass = (entityId: string) =>
     'grid-templates-scope-' + entityId.replace(/[^a-z0-9_-]/gi, '');
 
-/** Prefixes every top-level selector with the scope class so rules stay local to one grid. */
-export const scopeCss = (css: string, scopeClass: string): string =>
+export const blockClass = (index: number) => `block-${index + 1}`;
+
+/** Wraps inline declarations (from a template's `style`) into a `selector { ... }` rule. */
+export const inlineToRule = (declarations: string, selector = '&'): string => {
+    const decls = declarations.trim().replace(/;?$/, ';');
+    return decls === ';' ? '' : `${selector} {\n  ${decls}\n}`;
+};
+
+const scopeSelector = (selector: string, base: string) =>
+    selector.includes('&')
+        ? selector.replace(/&/g, base)
+        : `${base} ${selector}`;
+
+/**
+ * Prefixes every top-level selector with `base` so rules stay local. `&` in a selector
+ * is replaced with `base` itself (to target the scoped root), otherwise the selector
+ * becomes a descendant of `base`.
+ */
+export const scopeCss = (css: string, base: string): string =>
     css.replace(/(^|\})\s*([^{}]+)\{/g, (_match, brace, selectorList) => {
         const scoped = selectorList
             .split(',')
             .map((selector: string) => selector.trim())
             .filter(Boolean)
-            .map((selector: string) => `.${scopeClass} ${selector}`)
+            .map((selector: string) => scopeSelector(selector, base))
             .join(', ');
         return `${brace}\n${scoped} {`;
     });
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
index cbcd36ef..df904a89 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
@@ -1,6 +1,6 @@
 export type GridBlock = {
     id: string;
-    /** Inline CSS applied to this block. */
+    /** CSS rules with selectors, scoped to this block. `&` targets the block root. */
     css: string;
     /** Raw HTML content rendered inside the block. */
     content: string;
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
index 66e8645c..b7135482 100644
--- a/packages/editor/src/i18n/grid-block-templates/en.json
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -6,7 +6,6 @@
   "block_templates_empty": "No block templates",
   "cancel": "Cancel",
   "clear_templates": "Clear all templates",
-  "container_css": "Container CSS",
   "container_templates": "Container templates",
   "container_templates_empty": "No container templates",
   "custom_html": "Custom HTML",
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
index 0bbf7002..8408b7d8 100644
--- a/packages/editor/src/i18n/grid-block-templates/ru.json
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -6,7 +6,6 @@
   "block_templates_empty": "Нет шаблонов блоков",
   "cancel": "Отмена",
   "clear_templates": "Очистить все шаблоны",
-  "container_css": "CSS контейнера",
   "container_templates": "Шаблоны контейнеров",
   "container_templates_empty": "Нет шаблонов контейнеров",
   "custom_html": "Свой HTML",

From 206dab9d3ccfd8b4bc5f5e39bcd0f5cc568823ce Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 15:26:24 +0200
Subject: [PATCH 07/21] refactor: tidy grid block templates node view

---
 .../GridBlockItem.tsx                         | 115 +++++
 .../GridBlockTemplatesView.tsx                | 401 +++---------------
 .../SettingsPopups.tsx                        |  66 +++
 .../TemplatesPopup.tsx                        |  12 +-
 .../GridBlockTemplatesNodeView/blockUtils.ts  |  61 +++
 .../GridBlockTemplatesNodeView/drag.ts        | 148 +++++++
 .../GridBlockTemplatesNodeView/textEditing.ts |  74 ++++
 7 files changed, 521 insertions(+), 356 deletions(-)
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
new file mode 100644
index 00000000..d7cbba99
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
@@ -0,0 +1,115 @@
+import {Gear, GripHorizontal} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import type {ClipboardEvent, FocusEvent, MouseEvent, PointerEvent as ReactPointerEvent} from 'react';
+
+import {i18n} from 'src/i18n/grid-block-templates';
+
+import {blockClass} from '../css';
+import type {GridBlock} from '../types';
+
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+import type {DropTarget} from './drag';
+import {getBlockDragAttrs} from './drag';
+import {
+    enableTextNodeEditing,
+    insertPlainTextAtSelection,
+    readTextOnlyEditedHtml,
+} from './textEditing';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+interface GridBlockItemProps {
+    block: GridBlock;
+    index: number;
+    isDragged: boolean;
+    isEditing: boolean;
+    dropTarget: DropTarget | null;
+    onBeginDrag: (blockId: string, event: ReactPointerEvent<HTMLButtonElement>) => void;
+    onOpenSettings: (blockId: string, anchor: HTMLElement) => void;
+    onStartEdit: (blockId: string) => void;
+    onCommitContent: (blockId: string, content: string) => void;
+}
+
+export const GridBlockItem: React.FC<GridBlockItemProps> = ({
+    block,
+    index,
+    isDragged,
+    isEditing,
+    dropTarget,
+    onBeginDrag,
+    onOpenSettings,
+    onStartEdit,
+    onCommitContent,
+}) => {
+    const number = index + 1;
+    const isDropBefore = dropTarget?.id === block.id && dropTarget.placement === 'before';
+    const isDropAfter = dropTarget?.id === block.id && dropTarget.placement === 'after';
+
+    const handleOpenSettings = (event: MouseEvent<HTMLElement>) => {
+        onOpenSettings(block.id, event.currentTarget);
+    };
+
+    const handleDoubleClick = (event: MouseEvent<HTMLDivElement>) => {
+        onStartEdit(block.id);
+        enableTextNodeEditing(event.currentTarget);
+    };
+
+    const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
+        if (!isEditing) return;
+
+        event.preventDefault();
+        insertPlainTextAtSelection(event.clipboardData.getData('text/plain'));
+    };
+
+    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
+        const nextFocused = event.relatedTarget;
+        if (nextFocused instanceof window.Node && event.currentTarget.contains(nextFocused)) {
+            return;
+        }
+
+        onCommitContent(block.id, readTextOnlyEditedHtml(event.currentTarget));
+    };
+
+    const handlePointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
+        onBeginDrag(block.id, event);
+    };
+
+    return (
+        <div
+            className={`${b('item', {
+                dragged: isDragged,
+                'drop-before': isDropBefore,
+                'drop-after': isDropAfter,
+            })} ${stop} ${blockClass(index)}`}
+            {...getBlockDragAttrs(block.id)}
+        >
+            <button
+                type="button"
+                className={`${b('item-drag')} ${stop}`}
+                onPointerDown={handlePointerDown}
+                aria-label={i18n('drag_block', {index: String(number)})}
+            >
+                <Icon data={GripHorizontal} size={14} />
+            </button>
+            <Button
+                view="flat"
+                size="s"
+                className={`${b('item-gear')} ${stop}`}
+                onClick={handleOpenSettings}
+                aria-label={i18n('block_css', {index: String(number)})}
+            >
+                <Icon data={Gear} size={14} className={stop} />
+            </Button>
+            <div
+                className={`${b('item-content', {editing: isEditing})} ${stop}`}
+                contentEditable={false}
+                suppressContentEditableWarning
+                onDoubleClick={handleDoubleClick}
+                onPaste={handlePaste}
+                onBlur={handleBlur}
+                dangerouslySetInnerHTML={{__html: block.content}}
+            />
+        </div>
+    );
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
index ddbf8b79..5c034ce2 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -1,16 +1,14 @@
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {useMemo, useState} from 'react';
 
-import {Gear, GripHorizontal, LayoutHeaderColumns, Plus, TrashBin} from '@gravity-ui/icons';
-import {Button, Icon, Popup} from '@gravity-ui/uikit';
+import {Gear, LayoutHeaderColumns, Plus, TrashBin} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
 import type {Node} from 'prosemirror-model';
 import type {EditorView} from 'prosemirror-view';
 
-import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
 import {i18n} from 'src/i18n/grid-block-templates';
 import {useBooleanState, useElementState} from 'src/react-utils/hooks';
 import {removeNode} from 'src/utils/remove-node';
 
-import {blockClass, gridScopeClass, inlineToRule, scopeCss} from '../css';
 import {GridBlockTemplatesConsts} from '../GridBlockTemplatesSpecs/const';
 import type {
     GridBlock,
@@ -23,8 +21,20 @@ import type {
 import {mergeTemplatesById, readStoredTemplates} from '../templates';
 
 import {BlockInsertPopup} from './BlockInsertPopup';
+import {
+    buildScopedCss,
+    containerTemplateToAttrs,
+    getGridScopeClass,
+    isBlockTemplate,
+    isContainerTemplate,
+    rawTemplateBlockToBlock,
+    templateToBlock,
+} from './blockUtils';
 import {TemplatesPopup} from './TemplatesPopup';
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+import {useGridBlockDrag} from './drag';
+import {GridBlockItem} from './GridBlockItem';
+import {BlockSettingsPopup, ContainerCssPopup} from './SettingsPopups';
 
 import './GridBlockTemplates.scss';
 
@@ -32,171 +42,6 @@ export {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
-const BLOCK_ID_ATTR = 'data-grid-block-id';
-
-const genId = () => Math.random().toString(36).slice(2, 10);
-
-const toBlock = (template: GridBlockBlockTemplate): GridBlock => ({
-    id: genId(),
-    css: inlineToRule(template.block.css),
-    content: template.block.content,
-});
-
-type DropPlacement = 'before' | 'after';
-
-const EDITABLE_TEXT_NODE_ATTR = 'data-grid-block-editable-text';
-const EDITABLE_TEXT_NODE_SELECTOR = `[${EDITABLE_TEXT_NODE_ATTR}="true"]`;
-
-const focusEditableTextNode = (element: HTMLElement) => {
-    element.focus();
-
-    const selection = window.getSelection();
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    range.collapse(false);
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-};
-
-const enableTextNodeEditing = (root: HTMLElement) => {
-    const existingTextNode = root.querySelector<HTMLElement>(EDITABLE_TEXT_NODE_SELECTOR);
-    if (existingTextNode) {
-        focusEditableTextNode(existingTextNode);
-        return;
-    }
-
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-    const textNodes: Text[] = [];
-
-    while (walker.nextNode()) {
-        const current = walker.currentNode as Text;
-        if (current.nodeValue?.trim()) textNodes.push(current);
-    }
-
-    for (const textNode of textNodes) {
-        const span = document.createElement('span');
-        span.setAttribute(EDITABLE_TEXT_NODE_ATTR, 'true');
-        span.className = `${b('editable-text')} ${stop}`;
-        span.contentEditable = 'true';
-        span.textContent = textNode.nodeValue;
-        textNode.replaceWith(span);
-    }
-
-    const firstTextNode = root.querySelector<HTMLElement>(EDITABLE_TEXT_NODE_SELECTOR);
-    if (firstTextNode) focusEditableTextNode(firstTextNode);
-};
-
-const readTextOnlyEditedHtml = (root: HTMLElement) => {
-    const clone = root.cloneNode(true) as HTMLElement;
-    for (const wrapper of clone.querySelectorAll(EDITABLE_TEXT_NODE_SELECTOR)) {
-        wrapper.replaceWith(document.createTextNode(wrapper.textContent ?? ''));
-    }
-    return clone.innerHTML;
-};
-
-const insertPlainTextAtSelection = (text: string) => {
-    const selection = window.getSelection();
-    const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
-    if (!selection || !range) return;
-
-    range.deleteContents();
-    const textNode = document.createTextNode(text);
-    range.insertNode(textNode);
-    range.setStartAfter(textNode);
-    range.collapse(true);
-    selection.removeAllRanges();
-    selection.addRange(range);
-};
-
-const getDropPlacement = (rect: DOMRect, clientX: number, clientY: number): DropPlacement => {
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
-    const useHorizontalAxis = Math.abs(clientX - centerX) > Math.abs(clientY - centerY);
-
-    return useHorizontalAxis
-        ? clientX < centerX
-            ? 'before'
-            : 'after'
-        : clientY < centerY
-          ? 'before'
-          : 'after';
-};
-
-const moveBlock = (
-    blocks: GridBlock[],
-    draggedId: string,
-    targetId: string,
-    placement: DropPlacement,
-) => {
-    if (draggedId === targetId) return blocks;
-
-    const dragged = blocks.find((block) => block.id === draggedId);
-    if (!dragged) return blocks;
-
-    const withoutDragged = blocks.filter((block) => block.id !== draggedId);
-    const targetIndex = withoutDragged.findIndex((block) => block.id === targetId);
-    if (targetIndex === -1) return blocks;
-
-    const insertIndex = placement === 'before' ? targetIndex : targetIndex + 1;
-    return [...withoutDragged.slice(0, insertIndex), dragged, ...withoutDragged.slice(insertIndex)];
-};
-
-const BlockSettingsPopup: React.FC<{
-    anchor: HTMLElement | null;
-    open: boolean;
-    onClose: () => void;
-    html: string;
-    css: string;
-    onHtmlChange: (value: string) => void;
-    onCssChange: (value: string) => void;
-}> = ({anchor, open, onClose, html, css, onHtmlChange, onCssChange}) => (
-    <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
-        <div className={b('block-settings-editor', [stop])}>
-            <div className={b('field')}>
-                <div className={b('field-label')}>{i18n('html')}</div>
-                <TextArea
-                    controlProps={{className: stop}}
-                    value={html}
-                    onUpdate={onHtmlChange}
-                    placeholder={i18n('block_html_placeholder')}
-                    minRows={6}
-                    autoFocus
-                />
-            </div>
-            <div className={b('field')}>
-                <div className={b('field-label')}>{i18n('css')}</div>
-                <TextArea
-                    controlProps={{className: stop}}
-                    value={css}
-                    onUpdate={onCssChange}
-                    placeholder={'& {\n  padding: 16px;\n  border-radius: 8px;\n}\nh3 {\n  margin: 0;\n}'}
-                    minRows={5}
-                />
-            </div>
-        </div>
-    </Popup>
-);
-
-const ContainerCssPopup: React.FC<{
-    anchor: HTMLElement | null;
-    open: boolean;
-    onClose: () => void;
-    css: string;
-    onCssChange: (value: string) => void;
-}> = ({anchor, open, onClose, css, onCssChange}) => (
-    <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
-        <div className={b('css-editor', [stop])}>
-            <TextArea
-                controlProps={{className: stop}}
-                value={css}
-                onUpdate={onCssChange}
-                placeholder={'.grid {\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.block-1 {\n  background: #eee;\n}'}
-                minRows={6}
-                autoFocus
-            />
-        </div>
-    </Popup>
-);
 
 export const GridBlockTemplatesView: React.FC<{
     node: Node;
@@ -210,18 +55,11 @@ export const GridBlockTemplatesView: React.FC<{
     const blocks: GridBlock[] = node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks] ?? [];
     const {templates} = options;
 
-    const scopeClass = useMemo(() => gridScopeClass(entityId), [entityId]);
-    const scopedCss = useMemo(() => {
-        const rules = [
-            customCss.trim() && scopeCss(customCss, `.${scopeClass}`).trim(),
-            ...blocks.map(
-                (block, i) =>
-                    block.css.trim() &&
-                    scopeCss(block.css, `.${scopeClass} .${blockClass(i)}`).trim(),
-            ),
-        ].filter(Boolean);
-        return rules.join('\n');
-    }, [customCss, blocks, scopeClass]);
+    const scopeClass = useMemo(() => getGridScopeClass(entityId), [entityId]);
+    const scopedCss = useMemo(
+        () => buildScopedCss({blocks, customCss, scopeClass}),
+        [customCss, blocks, scopeClass],
+    );
 
     const [containerAnchor, setContainerAnchor] = useElementState();
     const [containerCssOpen, setContainerCssOpen] = useState(false);
@@ -229,16 +67,6 @@ export const GridBlockTemplatesView: React.FC<{
     const [blockAnchor, setBlockAnchor] = useElementState();
     const [editingBlockSettingsId, setEditingBlockSettingsId] = useState<string | null>(null);
     const [editingBlockContentId, setEditingBlockContentId] = useState<string | null>(null);
-    const [draggedBlockId, setDraggedBlockId] = useState<string | null>(null);
-    const [dropTarget, setDropTarget] = useState<{
-        id: string;
-        placement: DropPlacement;
-    } | null>(null);
-    const dragStateRef = useRef<{
-        draggedId: string;
-        target: {id: string; placement: DropPlacement} | null;
-    } | null>(null);
-    const cleanupDragListenersRef = useRef<(() => void) | null>(null);
 
     const allowAdd = Boolean(templates?.allowAdd);
     const [storedTemplates, setStoredTemplates] =
@@ -247,12 +75,8 @@ export const GridBlockTemplatesView: React.FC<{
         () => mergeTemplatesById(templates?.items ?? [], storedTemplates),
         [templates?.items, storedTemplates],
     );
-    const containerTemplates = effectiveTemplates.filter(
-        (template): template is GridBlockContainerTemplate => template.type === 'container',
-    );
-    const blockTemplates = effectiveTemplates.filter(
-        (template): template is GridBlockBlockTemplate => template.type === 'block',
-    );
+    const containerTemplates = effectiveTemplates.filter(isContainerTemplate);
+    const blockTemplates = effectiveTemplates.filter(isBlockTemplate);
 
     const showContainerTemplatesButton =
         Boolean(templates?.showButton) && (allowAdd || containerTemplates.length > 0);
@@ -265,114 +89,44 @@ export const GridBlockTemplatesView: React.FC<{
     const setBlocks = (next: GridBlock[]) =>
         onChange({[GridBlockTemplatesConsts.NodeAttrs.blocks]: next});
 
+    const {beginBlockDrag, draggedBlockId, dropTarget} = useGridBlockDrag({
+        blocks,
+        onMove: setBlocks,
+    });
+
     const applyContainerTemplate = (template: GridBlockContainerTemplate) => {
+        const {customCss: nextCustomCss, blocks: nextBlocks} = containerTemplateToAttrs(template);
+
         onChange({
-            [GridBlockTemplatesConsts.NodeAttrs.customCss]: inlineToRule(
-                template.containerCss,
-                '.grid',
-            ),
-            [GridBlockTemplatesConsts.NodeAttrs.blocks]: template.blocks.map((block) => ({
-                id: genId(),
-                css: inlineToRule(block.css),
-                content: block.content,
-            })),
+            [GridBlockTemplatesConsts.NodeAttrs.customCss]: nextCustomCss,
+            [GridBlockTemplatesConsts.NodeAttrs.blocks]: nextBlocks,
         });
         closeContainerTemplates();
     };
 
     const applyBlockTemplate = (template: GridBlockBlockTemplate) => {
-        setBlocks([...blocks, toBlock(template)]);
+        setBlocks([...blocks, templateToBlock(template)]);
         closeBlockTemplates();
     };
 
     const applyRawBlock = (block: GridBlockTemplateBlock) => {
-        setBlocks([...blocks, {id: genId(), css: block.css, content: block.content}]);
+        setBlocks([...blocks, rawTemplateBlockToBlock(block)]);
         closeBlockTemplates();
     };
 
     const patchBlock = (id: string, patch: Partial<GridBlock>) =>
         setBlocks(blocks.map((block) => (block.id === id ? {...block, ...patch} : block)));
 
-    const clearDragging = () => {
-        setDraggedBlockId(null);
-        setDropTarget(null);
-        dragStateRef.current = null;
+    const openBlockSettings = (id: string, anchor: HTMLElement) => {
+        setBlockAnchor(anchor);
+        setEditingBlockSettingsId(id);
     };
 
-    const beginBlockDrag = (blockId: string, event: React.PointerEvent<HTMLButtonElement>) => {
-        if (event.button !== 0) return;
-
-        event.preventDefault();
-        event.stopPropagation();
-        event.currentTarget.setPointerCapture(event.pointerId);
-
-        cleanupDragListenersRef.current?.();
-
-        dragStateRef.current = {draggedId: blockId, target: null};
-        setDraggedBlockId(blockId);
-        setDropTarget(null);
-
-        const handlePointerMove = (pointerEvent: PointerEvent) => {
-            const target = document
-                .elementFromPoint(pointerEvent.clientX, pointerEvent.clientY)
-                ?.closest<HTMLElement>(`[${BLOCK_ID_ATTR}]`);
-            const targetId = target?.getAttribute(BLOCK_ID_ATTR) ?? null;
-
-            if (!target || !targetId || targetId === blockId) {
-                if (dragStateRef.current) dragStateRef.current.target = null;
-                setDropTarget(null);
-                return;
-            }
-
-            const nextTarget = {
-                id: targetId,
-                placement: getDropPlacement(
-                    target.getBoundingClientRect(),
-                    pointerEvent.clientX,
-                    pointerEvent.clientY,
-                ),
-            };
-
-            if (dragStateRef.current) dragStateRef.current.target = nextTarget;
-            setDropTarget(nextTarget);
-        };
-
-        const handlePointerUp = () => {
-            const dragState = dragStateRef.current;
-            if (dragState?.target) {
-                setBlocks(
-                    moveBlock(
-                        blocks,
-                        dragState.draggedId,
-                        dragState.target.id,
-                        dragState.target.placement,
-                    ),
-                );
-            }
-            cleanupDragListenersRef.current?.();
-            cleanupDragListenersRef.current = null;
-            clearDragging();
-        };
-
-        const handlePointerCancel = () => {
-            cleanupDragListenersRef.current?.();
-            cleanupDragListenersRef.current = null;
-            clearDragging();
-        };
-
-        cleanupDragListenersRef.current = () => {
-            window.removeEventListener('pointermove', handlePointerMove);
-            window.removeEventListener('pointerup', handlePointerUp);
-            window.removeEventListener('pointercancel', handlePointerCancel);
-        };
-
-        window.addEventListener('pointermove', handlePointerMove);
-        window.addEventListener('pointerup', handlePointerUp);
-        window.addEventListener('pointercancel', handlePointerCancel);
+    const commitBlockContent = (id: string, content: string) => {
+        patchBlock(id, {content});
+        setEditingBlockContentId(null);
     };
 
-    useEffect(() => () => cleanupDragListenersRef.current?.(), []);
-
     const editingBlockSettings =
         blocks.find((block) => block.id === editingBlockSettingsId) ?? null;
 
@@ -411,9 +165,7 @@ export const GridBlockTemplatesView: React.FC<{
                             allowAdd={allowAdd}
                             emptyText={i18n('container_templates_empty')}
                             onClose={closeContainerTemplates}
-                            onApply={(template) =>
-                                applyContainerTemplate(template as GridBlockContainerTemplate)
-                            }
+                            onApply={applyContainerTemplate}
                             onAdded={setStoredTemplates}
                             onCleared={setStoredTemplates}
                         />
@@ -436,69 +188,18 @@ export const GridBlockTemplatesView: React.FC<{
 
             <div className={`${b('grid')} grid`}>
                 {blocks.map((block, i) => (
-                    <div
+                    <GridBlockItem
                         key={block.id}
-                        className={`${b('item', {
-                            dragged: draggedBlockId === block.id,
-                            'drop-before':
-                                dropTarget?.id === block.id && dropTarget.placement === 'before',
-                            'drop-after':
-                                dropTarget?.id === block.id && dropTarget.placement === 'after',
-                        })} ${stop} ${blockClass(i)}`}
-                        data-grid-block-id={block.id}
-                    >
-                        <button
-                            type="button"
-                            className={`${b('item-drag')} ${stop}`}
-                            onPointerDown={(e) => beginBlockDrag(block.id, e)}
-                            aria-label={i18n('drag_block', {index: String(i + 1)})}
-                        >
-                            <Icon data={GripHorizontal} size={14} />
-                        </button>
-                        <Button
-                            view="flat"
-                            size="s"
-                            className={`${b('item-gear')} ${stop}`}
-                            onClick={(e) => {
-                                setBlockAnchor(e.currentTarget);
-                                setEditingBlockSettingsId(block.id);
-                            }}
-                            aria-label={i18n('block_css', {index: String(i + 1)})}
-                        >
-                            <Icon data={Gear} size={14} className={stop} />
-                        </Button>
-                        <div
-                            className={`${b('item-content', {
-                                editing: editingBlockContentId === block.id,
-                            })} ${stop}`}
-                            contentEditable={false}
-                            suppressContentEditableWarning
-                            onDoubleClick={(e) => {
-                                setEditingBlockContentId(block.id);
-                                enableTextNodeEditing(e.currentTarget);
-                            }}
-                            onPaste={(e) => {
-                                if (editingBlockContentId !== block.id) return;
-                                e.preventDefault();
-                                insertPlainTextAtSelection(e.clipboardData.getData('text/plain'));
-                            }}
-                            onBlur={(e) => {
-                                const nextFocused = e.relatedTarget;
-                                if (
-                                    nextFocused instanceof window.Node &&
-                                    e.currentTarget.contains(nextFocused)
-                                ) {
-                                    return;
-                                }
-
-                                patchBlock(block.id, {
-                                    content: readTextOnlyEditedHtml(e.currentTarget),
-                                });
-                                setEditingBlockContentId(null);
-                            }}
-                            dangerouslySetInnerHTML={{__html: block.content}}
-                        />
-                    </div>
+                        block={block}
+                        index={i}
+                        isDragged={draggedBlockId === block.id}
+                        isEditing={editingBlockContentId === block.id}
+                        dropTarget={dropTarget}
+                        onBeginDrag={beginBlockDrag}
+                        onOpenSettings={openBlockSettings}
+                        onStartEdit={setEditingBlockContentId}
+                        onCommitContent={commitBlockContent}
+                    />
                 ))}
             </div>
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
new file mode 100644
index 00000000..aa11887d
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
@@ -0,0 +1,66 @@
+import {Popup} from '@gravity-ui/uikit';
+
+import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
+import {i18n} from 'src/i18n/grid-block-templates';
+
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+export const BlockSettingsPopup: React.FC<{
+    anchor: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    html: string;
+    css: string;
+    onHtmlChange: (value: string) => void;
+    onCssChange: (value: string) => void;
+}> = ({anchor, open, onClose, html, css, onHtmlChange, onCssChange}) => (
+    <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
+        <div className={b('block-settings-editor', [stop])}>
+            <div className={b('field')}>
+                <div className={b('field-label')}>{i18n('html')}</div>
+                <TextArea
+                    controlProps={{className: stop}}
+                    value={html}
+                    onUpdate={onHtmlChange}
+                    placeholder={i18n('block_html_placeholder')}
+                    minRows={6}
+                    autoFocus
+                />
+            </div>
+            <div className={b('field')}>
+                <div className={b('field-label')}>{i18n('css')}</div>
+                <TextArea
+                    controlProps={{className: stop}}
+                    value={css}
+                    onUpdate={onCssChange}
+                    placeholder={'& {\n  padding: 16px;\n  border-radius: 8px;\n}\nh3 {\n  margin: 0;\n}'}
+                    minRows={5}
+                />
+            </div>
+        </div>
+    </Popup>
+);
+
+export const ContainerCssPopup: React.FC<{
+    anchor: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    css: string;
+    onCssChange: (value: string) => void;
+}> = ({anchor, open, onClose, css, onCssChange}) => (
+    <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
+        <div className={b('css-editor', [stop])}>
+            <TextArea
+                controlProps={{className: stop}}
+                value={css}
+                onUpdate={onCssChange}
+                placeholder={'.grid {\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.block-1 {\n  background: #eee;\n}'}
+                minRows={6}
+                autoFocus
+            />
+        </div>
+    </Popup>
+);
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
index cd4f9624..1689a237 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
@@ -16,19 +16,19 @@ import './TemplatesPopup.scss';
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
 
-interface TemplatesPopupProps {
+interface TemplatesPopupProps<TTemplate extends GridBlockTemplate> {
     anchor: HTMLElement | null;
     open: boolean;
-    templates: GridBlockTemplate[];
+    templates: TTemplate[];
     allowAdd: boolean;
     emptyText: string;
     onClose: () => void;
-    onApply: (template: GridBlockTemplate) => void;
+    onApply: (template: TTemplate) => void;
     onAdded: (templates: GridBlockTemplate[]) => void;
     onCleared: (templates: GridBlockTemplate[]) => void;
 }
 
-export const TemplatesPopup: React.FC<TemplatesPopupProps> = ({
+export function TemplatesPopup<TTemplate extends GridBlockTemplate>({
     anchor,
     open,
     templates,
@@ -38,7 +38,7 @@ export const TemplatesPopup: React.FC<TemplatesPopupProps> = ({
     onApply,
     onAdded,
     onCleared,
-}) => {
+}: TemplatesPopupProps<TTemplate>) {
     const [adding, setAdding] = useState(false);
     const [input, setInput] = useState('');
     const [filter, setFilter] = useState('');
@@ -154,4 +154,4 @@ export const TemplatesPopup: React.FC<TemplatesPopupProps> = ({
             </div>
         </Popup>
     );
-};
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
new file mode 100644
index 00000000..0cf5f962
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
@@ -0,0 +1,61 @@
+import {blockClass, gridScopeClass, inlineToRule, scopeCss} from '../css';
+import type {
+    GridBlock,
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplate,
+    GridBlockTemplateBlock,
+} from '../types';
+
+export const createGridBlockId = () => Math.random().toString(36).slice(2, 10);
+
+export const templateToBlock = (template: GridBlockBlockTemplate): GridBlock => ({
+    id: createGridBlockId(),
+    css: inlineToRule(template.block.css),
+    content: template.block.content,
+});
+
+export const rawTemplateBlockToBlock = (block: GridBlockTemplateBlock): GridBlock => ({
+    id: createGridBlockId(),
+    css: block.css,
+    content: block.content,
+});
+
+export const containerTemplateToAttrs = (template: GridBlockContainerTemplate) => ({
+    customCss: inlineToRule(template.containerCss, '.grid'),
+    blocks: template.blocks.map((block) => ({
+        id: createGridBlockId(),
+        css: inlineToRule(block.css),
+        content: block.content,
+    })),
+});
+
+export const buildScopedCss = ({
+    blocks,
+    customCss,
+    scopeClass,
+}: {
+    blocks: GridBlock[];
+    customCss: string;
+    scopeClass: string;
+}) => {
+    const rules = [
+        customCss.trim() && scopeCss(customCss, `.${scopeClass}`).trim(),
+        ...blocks.map(
+            (block, i) =>
+                block.css.trim() && scopeCss(block.css, `.${scopeClass} .${blockClass(i)}`).trim(),
+        ),
+    ].filter(Boolean);
+
+    return rules.join('\n');
+};
+
+export const getGridScopeClass = (entityId: string) => gridScopeClass(entityId);
+
+export const isContainerTemplate = (
+    template: GridBlockTemplate,
+): template is GridBlockContainerTemplate => template.type === 'container';
+
+export const isBlockTemplate = (
+    template: GridBlockTemplate,
+): template is GridBlockBlockTemplate => template.type === 'block';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts
new file mode 100644
index 00000000..943ab6f7
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts
@@ -0,0 +1,148 @@
+import {useEffect, useRef, useState} from 'react';
+import type {PointerEvent as ReactPointerEvent} from 'react';
+
+import type {GridBlock} from '../types';
+
+export const BLOCK_ID_ATTR = 'data-grid-block-id';
+
+export const getBlockDragAttrs = (id: string) => ({[BLOCK_ID_ATTR]: id});
+
+export type DropPlacement = 'before' | 'after';
+
+export interface DropTarget {
+    id: string;
+    placement: DropPlacement;
+}
+
+const getDropPlacement = (rect: DOMRect, clientX: number, clientY: number): DropPlacement => {
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const useHorizontalAxis = Math.abs(clientX - centerX) > Math.abs(clientY - centerY);
+
+    return useHorizontalAxis
+        ? clientX < centerX
+            ? 'before'
+            : 'after'
+        : clientY < centerY
+          ? 'before'
+          : 'after';
+};
+
+const getPointerDropTarget = (
+    {clientX, clientY}: PointerEvent,
+    draggedId: string,
+): DropTarget | null => {
+    const target = document
+        .elementFromPoint(clientX, clientY)
+        ?.closest<HTMLElement>(`[${BLOCK_ID_ATTR}]`);
+    const targetId = target?.getAttribute(BLOCK_ID_ATTR) ?? null;
+
+    if (!target || !targetId || targetId === draggedId) return null;
+
+    return {
+        id: targetId,
+        placement: getDropPlacement(target.getBoundingClientRect(), clientX, clientY),
+    };
+};
+
+const moveBlock = (
+    blocks: GridBlock[],
+    draggedId: string,
+    targetId: string,
+    placement: DropPlacement,
+) => {
+    if (draggedId === targetId) return blocks;
+
+    const dragged = blocks.find((block) => block.id === draggedId);
+    if (!dragged) return blocks;
+
+    const withoutDragged = blocks.filter((block) => block.id !== draggedId);
+    const targetIndex = withoutDragged.findIndex((block) => block.id === targetId);
+    if (targetIndex === -1) return blocks;
+
+    const insertIndex = placement === 'before' ? targetIndex : targetIndex + 1;
+    return [...withoutDragged.slice(0, insertIndex), dragged, ...withoutDragged.slice(insertIndex)];
+};
+
+export const useGridBlockDrag = ({
+    blocks,
+    onMove,
+}: {
+    blocks: GridBlock[];
+    onMove: (blocks: GridBlock[]) => void;
+}) => {
+    const [draggedBlockId, setDraggedBlockId] = useState<string | null>(null);
+    const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
+    const dragStateRef = useRef<{
+        draggedId: string;
+        target: DropTarget | null;
+    } | null>(null);
+    const cleanupDragListenersRef = useRef<(() => void) | null>(null);
+
+    const clearDragging = () => {
+        setDraggedBlockId(null);
+        setDropTarget(null);
+        dragStateRef.current = null;
+    };
+
+    const stopListening = () => {
+        cleanupDragListenersRef.current?.();
+        cleanupDragListenersRef.current = null;
+    };
+
+    const beginBlockDrag = (blockId: string, event: ReactPointerEvent<HTMLButtonElement>) => {
+        if (event.button !== 0) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+
+        stopListening();
+
+        dragStateRef.current = {draggedId: blockId, target: null};
+        setDraggedBlockId(blockId);
+        setDropTarget(null);
+
+        const handlePointerMove = (pointerEvent: PointerEvent) => {
+            const nextTarget = getPointerDropTarget(pointerEvent, blockId);
+
+            if (dragStateRef.current) dragStateRef.current.target = nextTarget;
+            setDropTarget(nextTarget);
+        };
+
+        const handlePointerUp = () => {
+            const dragState = dragStateRef.current;
+            if (dragState?.target) {
+                onMove(
+                    moveBlock(
+                        blocks,
+                        dragState.draggedId,
+                        dragState.target.id,
+                        dragState.target.placement,
+                    ),
+                );
+            }
+            stopListening();
+            clearDragging();
+        };
+
+        const handlePointerCancel = () => {
+            stopListening();
+            clearDragging();
+        };
+
+        cleanupDragListenersRef.current = () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+            window.removeEventListener('pointercancel', handlePointerCancel);
+        };
+
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp);
+        window.addEventListener('pointercancel', handlePointerCancel);
+    };
+
+    useEffect(() => () => stopListening(), []);
+
+    return {beginBlockDrag, draggedBlockId, dropTarget};
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
new file mode 100644
index 00000000..23d13997
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
@@ -0,0 +1,74 @@
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+const EDITABLE_TEXT_NODE_ATTR = 'data-grid-block-editable-text';
+const EDITABLE_TEXT_NODE_SELECTOR = `[${EDITABLE_TEXT_NODE_ATTR}="true"]`;
+
+const focusEditableTextNode = (element: HTMLElement) => {
+    element.focus();
+
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+};
+
+const getEditableTextNodes = (root: HTMLElement) => {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const textNodes: Text[] = [];
+
+    while (walker.nextNode()) {
+        const current = walker.currentNode as Text;
+        if (current.nodeValue?.trim()) textNodes.push(current);
+    }
+
+    return textNodes;
+};
+
+const wrapEditableTextNode = (textNode: Text) => {
+    const span = document.createElement('span');
+    span.setAttribute(EDITABLE_TEXT_NODE_ATTR, 'true');
+    span.className = `${b('editable-text')} ${stop}`;
+    span.contentEditable = 'true';
+    span.textContent = textNode.nodeValue;
+    textNode.replaceWith(span);
+};
+
+export const enableTextNodeEditing = (root: HTMLElement) => {
+    const existingTextNode = root.querySelector<HTMLElement>(EDITABLE_TEXT_NODE_SELECTOR);
+    if (existingTextNode) {
+        focusEditableTextNode(existingTextNode);
+        return;
+    }
+
+    getEditableTextNodes(root).forEach(wrapEditableTextNode);
+
+    const firstTextNode = root.querySelector<HTMLElement>(EDITABLE_TEXT_NODE_SELECTOR);
+    if (firstTextNode) focusEditableTextNode(firstTextNode);
+};
+
+export const readTextOnlyEditedHtml = (root: HTMLElement) => {
+    const clone = root.cloneNode(true) as HTMLElement;
+    for (const wrapper of clone.querySelectorAll(EDITABLE_TEXT_NODE_SELECTOR)) {
+        wrapper.replaceWith(document.createTextNode(wrapper.textContent ?? ''));
+    }
+    return clone.innerHTML;
+};
+
+export const insertPlainTextAtSelection = (text: string) => {
+    const selection = window.getSelection();
+    const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+    if (!selection || !range) return;
+
+    range.deleteContents();
+    const textNode = document.createTextNode(text);
+    range.insertNode(textNode);
+    range.setStartAfter(textNode);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+};

From fd217cab7053b5d1360bc229108aa2be7ff065b5 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 16:13:43 +0200
Subject: [PATCH 08/21] fix: address grid templates lint

---
 .../GridBlockTemplates/GridBlockTemplates.test.ts    |  6 +++++-
 .../GridBlockTemplatesNodeView/GridBlockItem.tsx     |  8 +++++++-
 .../GridBlockTemplates.scss                          |  3 ++-
 .../GridBlockTemplatesView.tsx                       | 12 +++++++-----
 .../GridBlockTemplatesNodeView/SettingsPopups.tsx    |  8 ++++++--
 .../GridBlockTemplatesNodeView/TemplatesPopup.tsx    |  2 +-
 .../GridBlockTemplatesNodeView/blockUtils.ts         |  5 ++---
 .../GridBlockTemplatesNodeView/drag.ts               | 12 +++++-------
 .../extensions/additional/GridBlockTemplates/css.ts  |  4 +---
 .../YfmHtmlBlockNodeView/TemplatesPopup.scss         |  3 +--
 10 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
index 12d70176..5d981c35 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
@@ -47,7 +47,11 @@ describe('GridBlockTemplates extension', () => {
                 doc(
                     gridBlockTemplates({
                         [GridBlockTemplatesAttrs.blocks]: [
-                            {id: 'block-1', css: '& { padding: 12px; }\nh3 { margin: 0; }', content: 'First'},
+                            {
+                                id: 'block-1',
+                                css: '& { padding: 12px; }\nh3 { margin: 0; }',
+                                content: 'First',
+                            },
                         ],
                         [GridBlockTemplatesAttrs.customCss]: '.grid { align-items: center; }',
                         [GridBlockTemplatesAttrs.EntityId]: 'grid_block_templates-1',
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
index d7cbba99..32992907 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
@@ -1,6 +1,12 @@
+import type {
+    ClipboardEvent,
+    FocusEvent,
+    MouseEvent,
+    PointerEvent as ReactPointerEvent,
+} from 'react';
+
 import {Gear, GripHorizontal} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
-import type {ClipboardEvent, FocusEvent, MouseEvent, PointerEvent as ReactPointerEvent} from 'react';
 
 import {i18n} from 'src/i18n/grid-block-templates';
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
index 9a4567a5..e21ddbb4 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
@@ -129,8 +129,8 @@
         align-items: center;
 
         width: 100%;
-        margin-top: 8px;
         min-height: 56px;
+        margin-top: 8px;
         padding: 12px;
 
         cursor: pointer;
@@ -179,6 +179,7 @@
     &__field-label {
         font-size: var(--g-text-caption-1-font-size);
         line-height: var(--g-text-caption-1-line-height);
+
         color: var(--g-color-text-secondary);
     }
 }
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
index 5c034ce2..170a62d5 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -10,6 +10,7 @@ import {useBooleanState, useElementState} from 'src/react-utils/hooks';
 import {removeNode} from 'src/utils/remove-node';
 
 import {GridBlockTemplatesConsts} from '../GridBlockTemplatesSpecs/const';
+import {mergeTemplatesById, readStoredTemplates} from '../templates';
 import type {
     GridBlock,
     GridBlockBlockTemplate,
@@ -18,9 +19,11 @@ import type {
     GridBlockTemplateBlock,
     GridBlockTemplatesOptions,
 } from '../types';
-import {mergeTemplatesById, readStoredTemplates} from '../templates';
 
 import {BlockInsertPopup} from './BlockInsertPopup';
+import {GridBlockItem} from './GridBlockItem';
+import {BlockSettingsPopup, ContainerCssPopup} from './SettingsPopups';
+import {TemplatesPopup} from './TemplatesPopup';
 import {
     buildScopedCss,
     containerTemplateToAttrs,
@@ -30,11 +33,8 @@ import {
     rawTemplateBlockToBlock,
     templateToBlock,
 } from './blockUtils';
-import {TemplatesPopup} from './TemplatesPopup';
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 import {useGridBlockDrag} from './drag';
-import {GridBlockItem} from './GridBlockItem';
-import {BlockSettingsPopup, ContainerCssPopup} from './SettingsPopups';
 
 import './GridBlockTemplates.scss';
 
@@ -42,6 +42,7 @@ export {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
+const EMPTY_BLOCKS: GridBlock[] = [];
 
 export const GridBlockTemplatesView: React.FC<{
     node: Node;
@@ -52,7 +53,8 @@ export const GridBlockTemplatesView: React.FC<{
 }> = ({node, getPos, view, onChange, options}) => {
     const entityId: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId];
     const customCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.customCss] ?? '';
-    const blocks: GridBlock[] = node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks] ?? [];
+    const blocks: GridBlock[] =
+        node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks] ?? EMPTY_BLOCKS;
     const {templates} = options;
 
     const scopeClass = useMemo(() => getGridScopeClass(entityId), [entityId]);
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
index aa11887d..023214ec 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
@@ -36,7 +36,9 @@ export const BlockSettingsPopup: React.FC<{
                     controlProps={{className: stop}}
                     value={css}
                     onUpdate={onCssChange}
-                    placeholder={'& {\n  padding: 16px;\n  border-radius: 8px;\n}\nh3 {\n  margin: 0;\n}'}
+                    placeholder={
+                        '& {\n  padding: 16px;\n  border-radius: 8px;\n}\nh3 {\n  margin: 0;\n}'
+                    }
                     minRows={5}
                 />
             </div>
@@ -57,7 +59,9 @@ export const ContainerCssPopup: React.FC<{
                 controlProps={{className: stop}}
                 value={css}
                 onUpdate={onCssChange}
-                placeholder={'.grid {\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.block-1 {\n  background: #eee;\n}'}
+                placeholder={
+                    '.grid {\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.block-1 {\n  background: #eee;\n}'
+                }
                 minRows={6}
                 autoFocus
             />
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
index 1689a237..6466811b 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
@@ -6,8 +6,8 @@ import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
 import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
 import {i18n} from 'src/i18n/grid-block-templates';
 
-import type {GridBlockTemplate} from '../types';
 import {clearStoredTemplates, parseTemplates, saveTemplates} from '../templates';
+import type {GridBlockTemplate} from '../types';
 
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
index 0cf5f962..1771a60c 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
@@ -56,6 +56,5 @@ export const isContainerTemplate = (
     template: GridBlockTemplate,
 ): template is GridBlockContainerTemplate => template.type === 'container';
 
-export const isBlockTemplate = (
-    template: GridBlockTemplate,
-): template is GridBlockBlockTemplate => template.type === 'block';
+export const isBlockTemplate = (template: GridBlockTemplate): template is GridBlockBlockTemplate =>
+    template.type === 'block';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts
index 943ab6f7..1faf88c4 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts
@@ -19,13 +19,11 @@ const getDropPlacement = (rect: DOMRect, clientX: number, clientY: number): Drop
     const centerY = rect.top + rect.height / 2;
     const useHorizontalAxis = Math.abs(clientX - centerX) > Math.abs(clientY - centerY);
 
-    return useHorizontalAxis
-        ? clientX < centerX
-            ? 'before'
-            : 'after'
-        : clientY < centerY
-          ? 'before'
-          : 'after';
+    if (useHorizontalAxis) {
+        return clientX < centerX ? 'before' : 'after';
+    }
+
+    return clientY < centerY ? 'before' : 'after';
 };
 
 const getPointerDropTarget = (
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
index bfbb9991..a50f8b5a 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
@@ -10,9 +10,7 @@ export const inlineToRule = (declarations: string, selector = '&'): string => {
 };
 
 const scopeSelector = (selector: string, base: string) =>
-    selector.includes('&')
-        ? selector.replace(/&/g, base)
-        : `${base} ${selector}`;
+    selector.includes('&') ? selector.replace(/&/g, base) : `${base} ${selector}`;
 
 /**
  * Prefixes every top-level selector with `base` so rules stay local. `&` in a selector
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss
index 3bb299ca..a0369b51 100644
--- a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss
@@ -12,15 +12,14 @@
     &__editor {
         display: flex;
         flex-direction: column;
-
         gap: 8px;
+
         padding: 8px;
     }
 
     &__controls {
         display: flex;
         justify-content: end;
-
         gap: 8px;
     }
 }

From 6bb30aa3dbb4aeba1a11e38808702c7e8df9d8c8 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 16:43:04 +0200
Subject: [PATCH 09/21] fix: order grid templates demo imports

---
 .../examples/grid-block-templates/GridBlockTemplates.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
index e6ea16f3..8cd39f33 100644
--- a/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
+++ b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
@@ -10,8 +10,8 @@ import {ToolbarName as Toolbar} from '@gravity-ui/markdown-editor/_/modules/tool
 import {defaultPreset} from '@gravity-ui/markdown-editor/_/modules/toolbars/presets.js';
 import {GridBlockTemplates as GridBlockTemplatesExtension} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/index.js';
 
-import {gridBlockTemplates} from '../../../defaults/grid-block-templates';
 import {PlaygroundLayout} from '../../../components/PlaygroundLayout';
+import {gridBlockTemplates} from '../../../defaults/grid-block-templates';
 
 const gridBlockTemplatesItemId = 'gridBlockTemplates';
 

From 868e5e1fcb46acd87fa6302dbc24d0b79f0f8808 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 17:14:55 +0200
Subject: [PATCH 10/21] feat: improve grid block templates ui

---
 demo/src/defaults/grid-block-templates.ts     |  54 +-----
 .../BlockInsertPopup.tsx                      |   9 +-
 .../GridBlockItem.tsx                         |  44 +----
 .../GridBlockTemplates.scss                   |  63 +++----
 .../GridBlockTemplatesView.tsx                | 119 +++++++------
 .../SettingsPopups.tsx                        | 127 +++++++++-----
 .../TemplatesPopup.scss                       |   7 +
 .../TemplatesPopup.tsx                        |   4 +
 .../blockUtils.test.ts                        |  50 ++++++
 .../GridBlockTemplatesNodeView/blockUtils.ts  |  40 +++++
 .../GridBlockTemplatesNodeView/textEditing.ts | 166 ++++++++++++------
 11 files changed, 395 insertions(+), 288 deletions(-)
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts

diff --git a/demo/src/defaults/grid-block-templates.ts b/demo/src/defaults/grid-block-templates.ts
index d5d34e77..bf1b5986 100644
--- a/demo/src/defaults/grid-block-templates.ts
+++ b/demo/src/defaults/grid-block-templates.ts
@@ -1,55 +1,3 @@
 import type {GridBlockTemplate} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/templates/index.js';
 
-export const gridBlockTemplates: GridBlockTemplate[] = [
-    {
-        id: 'feature-grid',
-        title: 'Feature grid',
-        type: 'container',
-        content: `<div class="grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px;background:#f8fafc;border-radius:12px">
-  <div style="padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px"><strong>Fast setup</strong><p>Start from a reusable layout.</p></div>
-  <div style="padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px"><strong>Editable blocks</strong><p>Change content inline.</p></div>
-  <div style="padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px"><strong>Static output</strong><p>Serialize to HTML.</p></div>
-</div>`,
-        containerCss:
-            'display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px;background:#f8fafc;border-radius:12px',
-        blocks: [
-            {
-                css: 'padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px',
-                content: '<strong>Fast setup</strong><p>Start from a reusable layout.</p>',
-            },
-            {
-                css: 'padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px',
-                content: '<strong>Editable blocks</strong><p>Change content inline.</p>',
-            },
-            {
-                css: 'padding:18px;background:#fff;border:1px solid #e5e7eb;border-radius:8px',
-                content: '<strong>Static output</strong><p>Serialize to HTML.</p>',
-            },
-        ],
-    },
-    {
-        id: 'header-two-columns',
-        title: 'Header and two columns',
-        type: 'container',
-        content: `<div class="grid" style="display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px">
-  <div style="grid-column:1 / -1;padding:24px;background:#2563eb;color:#fff;border-radius:10px"><h2>Section title</h2></div>
-  <div style="padding:18px;background:#eff6ff;border-radius:8px">Left column</div>
-  <div style="padding:18px;background:#f0fdf4;border-radius:8px">Right column</div>
-</div>`,
-        containerCss: 'display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px',
-        blocks: [
-            {
-                css: 'grid-column:1 / -1;padding:24px;background:#2563eb;color:#fff;border-radius:10px',
-                content: '<h2>Section title</h2>',
-            },
-            {
-                css: 'padding:18px;background:#eff6ff;border-radius:8px',
-                content: 'Left column',
-            },
-            {
-                css: 'padding:18px;background:#f0fdf4;border-radius:8px',
-                content: 'Right column',
-            },
-        ],
-    },
-];
+export const gridBlockTemplates: GridBlockTemplate[] = [];
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
index a218c878..40871a03 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
@@ -1,6 +1,6 @@
 import {useMemo, useState} from 'react';
 
-import {Code, Plus} from '@gravity-ui/icons';
+import {Code} from '@gravity-ui/icons';
 import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
 
 import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
@@ -55,7 +55,7 @@ export const BlockInsertPopup: React.FC<BlockInsertPopupProps> = ({
     };
 
     return (
-        <Popup anchorElement={anchor} open={open} onOpenChange={close} placement="bottom-end">
+        <Popup anchorElement={anchor} open={open} onOpenChange={close} placement="bottom-start">
             <div className={b('templates', [stop])}>
                 {showCustomHtmlEditor ? (
                     <div className={b('templates-editor')}>
@@ -103,11 +103,14 @@ export const BlockInsertPopup: React.FC<BlockInsertPopupProps> = ({
                                 >
                                     {i18n('custom_html')}
                                 </Menu.Item>
+                                <div
+                                    role="separator"
+                                    className={b('templates-separator', [stop])}
+                                />
                                 {filtered.map((template) => (
                                     <Menu.Item
                                         key={template.id}
                                         className={stop}
-                                        iconStart={<Icon data={Plus} />}
                                         onClick={() => {
                                             onApplyTemplate(template);
                                             close();
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
index 32992907..ca1d6d42 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
@@ -1,9 +1,4 @@
-import type {
-    ClipboardEvent,
-    FocusEvent,
-    MouseEvent,
-    PointerEvent as ReactPointerEvent,
-} from 'react';
+import type {MouseEvent, PointerEvent as ReactPointerEvent} from 'react';
 
 import {Gear, GripHorizontal} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
@@ -16,11 +11,7 @@ import type {GridBlock} from '../types';
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 import type {DropTarget} from './drag';
 import {getBlockDragAttrs} from './drag';
-import {
-    enableTextNodeEditing,
-    insertPlainTextAtSelection,
-    readTextOnlyEditedHtml,
-} from './textEditing';
+import {openInlineTextEditor} from './textEditing';
 
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
@@ -29,11 +20,9 @@ interface GridBlockItemProps {
     block: GridBlock;
     index: number;
     isDragged: boolean;
-    isEditing: boolean;
     dropTarget: DropTarget | null;
     onBeginDrag: (blockId: string, event: ReactPointerEvent<HTMLButtonElement>) => void;
     onOpenSettings: (blockId: string, anchor: HTMLElement) => void;
-    onStartEdit: (blockId: string) => void;
     onCommitContent: (blockId: string, content: string) => void;
 }
 
@@ -41,11 +30,9 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
     block,
     index,
     isDragged,
-    isEditing,
     dropTarget,
     onBeginDrag,
     onOpenSettings,
-    onStartEdit,
     onCommitContent,
 }) => {
     const number = index + 1;
@@ -57,24 +44,11 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
     };
 
     const handleDoubleClick = (event: MouseEvent<HTMLDivElement>) => {
-        onStartEdit(block.id);
-        enableTextNodeEditing(event.currentTarget);
-    };
-
-    const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
-        if (!isEditing) return;
-
-        event.preventDefault();
-        insertPlainTextAtSelection(event.clipboardData.getData('text/plain'));
-    };
-
-    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
-        const nextFocused = event.relatedTarget;
-        if (nextFocused instanceof window.Node && event.currentTarget.contains(nextFocused)) {
-            return;
-        }
-
-        onCommitContent(block.id, readTextOnlyEditedHtml(event.currentTarget));
+        openInlineTextEditor({
+            root: event.currentTarget,
+            event,
+            onCommit: (html) => onCommitContent(block.id, html),
+        });
     };
 
     const handlePointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
@@ -108,12 +82,10 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
                 <Icon data={Gear} size={14} className={stop} />
             </Button>
             <div
-                className={`${b('item-content', {editing: isEditing})} ${stop}`}
+                className={`${b('item-content')} ${stop}`}
                 contentEditable={false}
                 suppressContentEditableWarning
                 onDoubleClick={handleDoubleClick}
-                onPaste={handlePaste}
-                onBlur={handleBlur}
                 dangerouslySetInnerHTML={{__html: block.content}}
             />
         </div>
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
index e21ddbb4..2156a7a2 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
@@ -11,7 +11,14 @@
         position: absolute;
         top: 4px;
         right: 4px;
+        left: 4px;
 
+        display: flex;
+        justify-content: space-between;
+        gap: 2px;
+    }
+
+    &__toolbar-group {
         display: flex;
         gap: 2px;
     }
@@ -105,11 +112,6 @@
 
         outline: none;
 
-        &_editing {
-            outline: 2px solid var(--g-color-line-focus);
-            outline-offset: 2px;
-        }
-
         &:empty::before {
             content: 'Text...';
 
@@ -117,51 +119,26 @@
         }
     }
 
-    &__editable-text {
-        outline: 1px solid var(--g-color-line-focus);
-        outline-offset: 1px;
-        background: var(--g-color-base-selection);
-    }
-
-    &__add {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
+    &__inline-text-editor {
         width: 100%;
-        min-height: 56px;
-        margin-top: 8px;
-        padding: 12px;
-
-        cursor: pointer;
-
-        color: var(--g-color-text-secondary);
-        border: 1px dashed var(--g-color-line-generic);
-        border-radius: var(--g-border-radius-m);
-        background: transparent;
-
-        &:hover {
-            color: var(--g-color-text-primary);
-            border-color: var(--g-color-line-generic-hover);
-            background: var(--g-color-base-generic);
-        }
-    }
+        min-height: 32px;
+        padding: 4px 6px;
 
-    &__css-editor {
-        width: 320px;
-        padding: 8px;
+        font: inherit;
+        resize: vertical;
 
-        .g-text-area__control {
-            font-family: var(--g-font-family-monospace);
-        }
+        color: inherit;
+        border: 1px solid var(--g-color-line-focus);
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-base-background);
     }
 
-    &__block-settings-editor {
-        display: flex;
-        flex-direction: column;
+    &__settings-editor {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
         gap: 10px;
 
-        width: 380px;
+        width: 720px;
         max-width: calc(100vw - 32px);
         padding: 8px;
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
index 170a62d5..bce0ba42 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -22,14 +22,16 @@ import type {
 
 import {BlockInsertPopup} from './BlockInsertPopup';
 import {GridBlockItem} from './GridBlockItem';
-import {BlockSettingsPopup, ContainerCssPopup} from './SettingsPopups';
+import {BlockSettingsPopup, ContainerSettingsPopup} from './SettingsPopups';
 import {TemplatesPopup} from './TemplatesPopup';
 import {
+    buildContainerHtml,
     buildScopedCss,
     containerTemplateToAttrs,
     getGridScopeClass,
     isBlockTemplate,
     isContainerTemplate,
+    parseContainerHtml,
     rawTemplateBlockToBlock,
     templateToBlock,
 } from './blockUtils';
@@ -68,7 +70,6 @@ export const GridBlockTemplatesView: React.FC<{
 
     const [blockAnchor, setBlockAnchor] = useElementState();
     const [editingBlockSettingsId, setEditingBlockSettingsId] = useState<string | null>(null);
-    const [editingBlockContentId, setEditingBlockContentId] = useState<string | null>(null);
 
     const allowAdd = Boolean(templates?.allowAdd);
     const [storedTemplates, setStoredTemplates] =
@@ -87,6 +88,7 @@ export const GridBlockTemplatesView: React.FC<{
     const [containerTemplatesAnchor, setContainerTemplatesAnchor] = useElementState();
     const [blockTemplatesOpen, openBlockTemplates, closeBlockTemplates] = useBooleanState(false);
     const [blockTemplatesAnchor, setBlockTemplatesAnchor] = useState<HTMLElement | null>(null);
+    const containerHtml = useMemo(() => buildContainerHtml(blocks), [blocks]);
 
     const setBlocks = (next: GridBlock[]) =>
         onChange({[GridBlockTemplatesConsts.NodeAttrs.blocks]: next});
@@ -126,7 +128,11 @@ export const GridBlockTemplatesView: React.FC<{
 
     const commitBlockContent = (id: string, content: string) => {
         patchBlock(id, {content});
-        setEditingBlockContentId(null);
+    };
+
+    const commitContainerHtml = (html: string) => {
+        const nextBlocks = parseContainerHtml(html, blocks);
+        if (nextBlocks) setBlocks(nextBlocks);
     };
 
     const editingBlockSettings =
@@ -138,18 +144,30 @@ export const GridBlockTemplatesView: React.FC<{
             <style>{`.${scopeClass} .grid{display:grid;gap:8px}\n${scopedCss}`}</style>
 
             <div className={b('toolbar', [stop])}>
-                <Button
-                    view="flat"
-                    size="s"
-                    ref={setContainerAnchor}
-                    className={stop}
-                    onClick={() => setContainerCssOpen((v) => !v)}
-                    aria-label={i18n('grid_css')}
-                >
-                    <Icon data={Gear} className={stop} />
-                </Button>
-                {showContainerTemplatesButton && (
-                    <>
+                <div className={b('toolbar-group', {side: 'left'})}>
+                    <Button
+                        view="flat"
+                        size="s"
+                        ref={setBlockTemplatesAnchor}
+                        className={stop}
+                        onClick={openBlockTemplates}
+                        aria-label={i18n('add_block')}
+                    >
+                        <Icon data={Plus} className={stop} />
+                    </Button>
+                </div>
+                <div className={b('toolbar-group', {side: 'right'})}>
+                    <Button
+                        view="flat"
+                        size="s"
+                        ref={setContainerAnchor}
+                        className={stop}
+                        onClick={() => setContainerCssOpen((v) => !v)}
+                        aria-label={i18n('grid_css')}
+                    >
+                        <Icon data={Gear} className={stop} />
+                    </Button>
+                    {showContainerTemplatesButton && (
                         <Button
                             view="flat"
                             size="s"
@@ -160,32 +178,34 @@ export const GridBlockTemplatesView: React.FC<{
                         >
                             <Icon data={LayoutHeaderColumns} className={stop} />
                         </Button>
-                        <TemplatesPopup
-                            anchor={containerTemplatesAnchor}
-                            open={containerTemplatesOpen}
-                            templates={containerTemplates}
-                            allowAdd={allowAdd}
-                            emptyText={i18n('container_templates_empty')}
-                            onClose={closeContainerTemplates}
-                            onApply={applyContainerTemplate}
-                            onAdded={setStoredTemplates}
-                            onCleared={setStoredTemplates}
-                        />
-                    </>
+                    )}
+                    <Button
+                        view="flat"
+                        size="s"
+                        className={stop}
+                        onClick={() => {
+                            const pos = getPos();
+                            if (pos === undefined) return;
+                            removeNode({node, pos, tr: view.state.tr, dispatch: view.dispatch});
+                        }}
+                        aria-label={i18n('remove_grid')}
+                    >
+                        <Icon data={TrashBin} className={stop} />
+                    </Button>
+                </div>
+                {showContainerTemplatesButton && (
+                    <TemplatesPopup
+                        anchor={containerTemplatesAnchor}
+                        open={containerTemplatesOpen}
+                        templates={containerTemplates}
+                        allowAdd={allowAdd}
+                        emptyText={i18n('container_templates_empty')}
+                        onClose={closeContainerTemplates}
+                        onApply={applyContainerTemplate}
+                        onAdded={setStoredTemplates}
+                        onCleared={setStoredTemplates}
+                    />
                 )}
-                <Button
-                    view="flat"
-                    size="s"
-                    className={stop}
-                    onClick={() => {
-                        const pos = getPos();
-                        if (pos === undefined) return;
-                        removeNode({node, pos, tr: view.state.tr, dispatch: view.dispatch});
-                    }}
-                    aria-label={i18n('remove_grid')}
-                >
-                    <Icon data={TrashBin} className={stop} />
-                </Button>
             </div>
 
             <div className={`${b('grid')} grid`}>
@@ -195,27 +215,14 @@ export const GridBlockTemplatesView: React.FC<{
                         block={block}
                         index={i}
                         isDragged={draggedBlockId === block.id}
-                        isEditing={editingBlockContentId === block.id}
                         dropTarget={dropTarget}
                         onBeginDrag={beginBlockDrag}
                         onOpenSettings={openBlockSettings}
-                        onStartEdit={setEditingBlockContentId}
                         onCommitContent={commitBlockContent}
                     />
                 ))}
             </div>
 
-            <button
-                type="button"
-                className={`${b('add', [stop])} ${stop}`}
-                onClick={(e) => {
-                    setBlockTemplatesAnchor(e.currentTarget);
-                    openBlockTemplates();
-                }}
-                aria-label={i18n('add_block')}
-            >
-                <Icon data={Plus} />
-            </button>
             <BlockInsertPopup
                 anchor={blockTemplatesAnchor}
                 open={blockTemplatesOpen}
@@ -225,11 +232,13 @@ export const GridBlockTemplatesView: React.FC<{
                 onApplyHtml={applyRawBlock}
             />
 
-            <ContainerCssPopup
+            <ContainerSettingsPopup
                 anchor={containerAnchor}
                 open={containerCssOpen}
                 onClose={() => setContainerCssOpen(false)}
+                html={containerHtml}
                 css={customCss}
+                onHtmlCommit={commitContainerHtml}
                 onCssChange={(value) =>
                     onChange({[GridBlockTemplatesConsts.NodeAttrs.customCss]: value})
                 }
@@ -242,7 +251,7 @@ export const GridBlockTemplatesView: React.FC<{
                     onClose={() => setEditingBlockSettingsId(null)}
                     html={editingBlockSettings.content}
                     css={editingBlockSettings.css}
-                    onHtmlChange={(value) => patchBlock(editingBlockSettings.id, {content: value})}
+                    onHtmlCommit={(value) => patchBlock(editingBlockSettings.id, {content: value})}
                     onCssChange={(value) => patchBlock(editingBlockSettings.id, {css: value})}
                 />
             )}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
index 023214ec..ca0ed5b0 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
@@ -1,3 +1,5 @@
+import {useEffect, useState} from 'react';
+
 import {Popup} from '@gravity-ui/uikit';
 
 import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
@@ -8,63 +10,98 @@ import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
 
-export const BlockSettingsPopup: React.FC<{
+interface HtmlCssSettingsPopupProps {
     anchor: HTMLElement | null;
     open: boolean;
     onClose: () => void;
     html: string;
     css: string;
-    onHtmlChange: (value: string) => void;
+    onHtmlCommit: (value: string) => void;
     onCssChange: (value: string) => void;
-}> = ({anchor, open, onClose, html, css, onHtmlChange, onCssChange}) => (
-    <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
-        <div className={b('block-settings-editor', [stop])}>
-            <div className={b('field')}>
-                <div className={b('field-label')}>{i18n('html')}</div>
-                <TextArea
-                    controlProps={{className: stop}}
-                    value={html}
-                    onUpdate={onHtmlChange}
-                    placeholder={i18n('block_html_placeholder')}
-                    minRows={6}
-                    autoFocus
-                />
-            </div>
-            <div className={b('field')}>
-                <div className={b('field-label')}>{i18n('css')}</div>
-                <TextArea
-                    controlProps={{className: stop}}
-                    value={css}
-                    onUpdate={onCssChange}
-                    placeholder={
-                        '& {\n  padding: 16px;\n  border-radius: 8px;\n}\nh3 {\n  margin: 0;\n}'
-                    }
-                    minRows={5}
-                />
+    htmlPlaceholder: string;
+    cssPlaceholder: string;
+}
+
+const HtmlCssSettingsPopup: React.FC<HtmlCssSettingsPopupProps> = ({
+    anchor,
+    open,
+    onClose,
+    html,
+    css,
+    onHtmlCommit,
+    onCssChange,
+    htmlPlaceholder,
+    cssPlaceholder,
+}) => {
+    const [draftHtml, setDraftHtml] = useState(html);
+
+    useEffect(() => {
+        setDraftHtml(html);
+    }, [html, open]);
+
+    const commitHtml = () => {
+        onHtmlCommit(draftHtml);
+    };
+
+    return (
+        <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
+            <div className={b('settings-editor', [stop])}>
+                <div className={b('field')}>
+                    <div className={b('field-label')}>{i18n('html')}</div>
+                    <TextArea
+                        controlProps={{className: stop, onBlur: commitHtml}}
+                        value={draftHtml}
+                        onUpdate={setDraftHtml}
+                        placeholder={htmlPlaceholder}
+                        minRows={8}
+                        autoFocus
+                    />
+                </div>
+                <div className={b('field')}>
+                    <div className={b('field-label')}>{i18n('css')}</div>
+                    <TextArea
+                        controlProps={{className: stop}}
+                        value={css}
+                        onUpdate={onCssChange}
+                        placeholder={cssPlaceholder}
+                        minRows={8}
+                    />
+                </div>
             </div>
-        </div>
-    </Popup>
+        </Popup>
+    );
+};
+
+export const BlockSettingsPopup: React.FC<{
+    anchor: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    html: string;
+    css: string;
+    onHtmlCommit: (value: string) => void;
+    onCssChange: (value: string) => void;
+}> = (props) => (
+    <HtmlCssSettingsPopup
+        {...props}
+        htmlPlaceholder={i18n('block_html_placeholder')}
+        cssPlaceholder={'& {\n  padding: 16px;\n  border-radius: 8px;\n}\nh3 {\n  margin: 0;\n}'}
+    />
 );
 
-export const ContainerCssPopup: React.FC<{
+export const ContainerSettingsPopup: React.FC<{
     anchor: HTMLElement | null;
     open: boolean;
     onClose: () => void;
+    html: string;
     css: string;
+    onHtmlCommit: (value: string) => void;
     onCssChange: (value: string) => void;
-}> = ({anchor, open, onClose, css, onCssChange}) => (
-    <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
-        <div className={b('css-editor', [stop])}>
-            <TextArea
-                controlProps={{className: stop}}
-                value={css}
-                onUpdate={onCssChange}
-                placeholder={
-                    '.grid {\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.block-1 {\n  background: #eee;\n}'
-                }
-                minRows={6}
-                autoFocus
-            />
-        </div>
-    </Popup>
+}> = (props) => (
+    <HtmlCssSettingsPopup
+        {...props}
+        htmlPlaceholder={'<div class="grid">\n  <div>Block HTML</div>\n</div>'}
+        cssPlaceholder={
+            '.grid {\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.block-1 {\n  background: #eee;\n}'
+        }
+    />
 );
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
index 53c14885..a1367ca8 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
@@ -30,4 +30,11 @@
 
         max-height: 280px;
     }
+
+    &__templates-separator {
+        height: 1px;
+        margin: 4px 0;
+
+        background: var(--g-color-line-generic);
+    }
 }
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
index 6466811b..91b9fd5e 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
@@ -128,6 +128,10 @@ export function TemplatesPopup<TTemplate extends GridBlockTemplate>({
                                         >
                                             {i18n('clear_templates')}
                                         </Menu.Item>
+                                        <div
+                                            role="separator"
+                                            className={b('templates-separator', [stop])}
+                                        />
                                     </>
                                 )}
                                 {filtered.map((template) => (
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts
new file mode 100644
index 00000000..d634df16
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts
@@ -0,0 +1,50 @@
+import type {GridBlock} from '../types';
+
+import {buildContainerHtml, parseContainerHtml} from './blockUtils';
+
+const blocks: GridBlock[] = [
+    {id: 'block-a', css: '& { color: red; }', content: '<strong>First</strong>'},
+    {id: 'block-b', css: '& { color: blue; }', content: 'Second'},
+];
+
+describe('GridBlockTemplates block utils', () => {
+    describe('buildContainerHtml', () => {
+        it('builds a grid html draft from blocks', () => {
+            expect(buildContainerHtml(blocks)).toBe(
+                [
+                    '<div class="grid">',
+                    '  <div class="block-1"><strong>First</strong></div>',
+                    '  <div class="block-2">Second</div>',
+                    '</div>',
+                ].join('\n'),
+            );
+        });
+    });
+
+    describe('parseContainerHtml', () => {
+        it('rebuilds blocks and preserves existing ids and css by index', () => {
+            expect(
+                parseContainerHtml(
+                    [
+                        '<div class="grid">',
+                        '  <div style="padding:8px"><em>First</em></div>',
+                        '  <div>Second updated</div>',
+                        '</div>',
+                    ].join('\n'),
+                    blocks,
+                ),
+            ).toEqual([
+                {id: 'block-a', css: '& {\n  padding:8px;\n}', content: '<em>First</em>'},
+                {id: 'block-b', css: '& { color: blue; }', content: 'Second updated'},
+            ]);
+        });
+
+        it('clears blocks for blank html', () => {
+            expect(parseContainerHtml('   ', blocks)).toEqual([]);
+        });
+
+        it('ignores html without a grid root', () => {
+            expect(parseContainerHtml('<section><div>First</div></section>', blocks)).toBeNull();
+        });
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
index 1771a60c..c9398c37 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
@@ -52,6 +52,46 @@ export const buildScopedCss = ({
 
 export const getGridScopeClass = (entityId: string) => gridScopeClass(entityId);
 
+export const buildContainerHtml = (blocks: GridBlock[]) => {
+    const children = blocks
+        .map((block, index) => `  <div class="${blockClass(index)}">${block.content ?? ''}</div>`)
+        .join('\n');
+
+    return children ? `<div class="grid">\n${children}\n</div>` : '<div class="grid">\n</div>';
+};
+
+const parseHtml = (value: string): Document | null => {
+    if (typeof window === 'undefined' || typeof window.DOMParser === 'undefined') return null;
+
+    return new DOMParser().parseFromString(value, 'text/html');
+};
+
+const getInlineCss = (element: Element) =>
+    element instanceof HTMLElement ? (element.getAttribute('style')?.trim() ?? '') : '';
+
+export const parseContainerHtml = (
+    value: string,
+    previousBlocks: GridBlock[],
+): GridBlock[] | null => {
+    const html = value.trim();
+    if (!html) return [];
+
+    const doc = parseHtml(html);
+    const root = doc?.body.firstElementChild;
+    if (!root?.classList.contains('grid')) return null;
+
+    return Array.from(root.children).map((child, index) => {
+        const previousBlock = previousBlocks[index];
+        const inlineCss = getInlineCss(child);
+
+        return {
+            id: previousBlock?.id ?? createGridBlockId(),
+            css: inlineCss ? inlineToRule(inlineCss) : (previousBlock?.css ?? ''),
+            content: child.innerHTML.trim(),
+        };
+    });
+};
+
 export const isContainerTemplate = (
     template: GridBlockTemplate,
 ): template is GridBlockContainerTemplate => template.type === 'container';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
index 23d13997..14580de9 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
@@ -3,72 +3,132 @@ import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
 
-const EDITABLE_TEXT_NODE_ATTR = 'data-grid-block-editable-text';
-const EDITABLE_TEXT_NODE_SELECTOR = `[${EDITABLE_TEXT_NODE_ATTR}="true"]`;
-
-const focusEditableTextNode = (element: HTMLElement) => {
-    element.focus();
-
-    const selection = window.getSelection();
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    range.collapse(false);
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-};
+const INLINE_TEXT_EDITOR_ATTR = 'data-grid-block-inline-text-editor';
+const INLINE_TEXT_EDITOR_SELECTOR = `[${INLINE_TEXT_EDITOR_ATTR}="true"]`;
+
+interface InlineTextEditorOptions {
+    root: HTMLElement;
+    event?: Pick<MouseEvent, 'clientX' | 'clientY'>;
+    textNodeIndex?: number;
+    onCommit: (html: string) => void;
+}
 
-const getEditableTextNodes = (root: HTMLElement) => {
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+const getTextNodes = (root: HTMLElement) => {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+            return node.nodeValue?.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+        },
+    });
     const textNodes: Text[] = [];
 
     while (walker.nextNode()) {
-        const current = walker.currentNode as Text;
-        if (current.nodeValue?.trim()) textNodes.push(current);
+        textNodes.push(walker.currentNode as Text);
     }
 
     return textNodes;
 };
 
-const wrapEditableTextNode = (textNode: Text) => {
-    const span = document.createElement('span');
-    span.setAttribute(EDITABLE_TEXT_NODE_ATTR, 'true');
-    span.className = `${b('editable-text')} ${stop}`;
-    span.contentEditable = 'true';
-    span.textContent = textNode.nodeValue;
-    textNode.replaceWith(span);
-};
+const getRangeFromPoint = (clientX: number, clientY: number) => {
+    const doc = document as Document & {
+        caretRangeFromPoint?: (x: number, y: number) => Range | null;
+        caretPositionFromPoint?: (
+            x: number,
+            y: number,
+        ) => {offsetNode: Node; offset: number} | null;
+    };
 
-export const enableTextNodeEditing = (root: HTMLElement) => {
-    const existingTextNode = root.querySelector<HTMLElement>(EDITABLE_TEXT_NODE_SELECTOR);
-    if (existingTextNode) {
-        focusEditableTextNode(existingTextNode);
-        return;
-    }
+    const range = doc.caretRangeFromPoint?.(clientX, clientY);
+    if (range) return range;
 
-    getEditableTextNodes(root).forEach(wrapEditableTextNode);
+    const position = doc.caretPositionFromPoint?.(clientX, clientY);
+    if (!position) return null;
 
-    const firstTextNode = root.querySelector<HTMLElement>(EDITABLE_TEXT_NODE_SELECTOR);
-    if (firstTextNode) focusEditableTextNode(firstTextNode);
+    const nextRange = document.createRange();
+    nextRange.setStart(position.offsetNode, position.offset);
+    return nextRange;
 };
 
-export const readTextOnlyEditedHtml = (root: HTMLElement) => {
-    const clone = root.cloneNode(true) as HTMLElement;
-    for (const wrapper of clone.querySelectorAll(EDITABLE_TEXT_NODE_SELECTOR)) {
-        wrapper.replaceWith(document.createTextNode(wrapper.textContent ?? ''));
-    }
-    return clone.innerHTML;
-};
+const getTextNodeFromEvent = (
+    root: HTMLElement,
+    event: Pick<MouseEvent, 'clientX' | 'clientY'>,
+) => {
+    const range = getRangeFromPoint(event.clientX, event.clientY);
+    const node = range?.startContainer;
 
-export const insertPlainTextAtSelection = (text: string) => {
-    const selection = window.getSelection();
-    const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
-    if (!selection || !range) return;
-
-    range.deleteContents();
-    const textNode = document.createTextNode(text);
-    range.insertNode(textNode);
-    range.setStartAfter(textNode);
-    range.collapse(true);
-    selection.removeAllRanges();
-    selection.addRange(range);
+    if (node?.nodeType === Node.TEXT_NODE && root.contains(node)) return node as Text;
+
+    return null;
 };
+
+function openTextNodeEditor({
+    root,
+    textNode,
+    textNodeIndex,
+    onCommit,
+}: InlineTextEditorOptions & {textNode: Text; textNodeIndex: number}) {
+    root.querySelector(INLINE_TEXT_EDITOR_SELECTOR)?.remove();
+
+    const textarea = document.createElement('textarea');
+    textarea.setAttribute(INLINE_TEXT_EDITOR_ATTR, 'true');
+    textarea.className = `${b('inline-text-editor')} ${stop}`;
+    textarea.value = textNode.nodeValue ?? '';
+    textarea.rows = 1;
+
+    let committed = false;
+
+    const commit = () => {
+        if (committed) return;
+        committed = true;
+        textarea.replaceWith(document.createTextNode(textarea.value));
+        onCommit(root.innerHTML);
+    };
+
+    const navigate = (direction: 1 | -1) => {
+        const nextIndex = textNodeIndex + direction;
+
+        commit();
+
+        const hasNextTextNode = nextIndex >= 0 && nextIndex < getTextNodes(root).length;
+
+        if (hasNextTextNode) {
+            setTimeout(() => {
+                openInlineTextEditor({root, textNodeIndex: nextIndex, onCommit});
+            });
+        }
+    };
+
+    textarea.addEventListener('keydown', (event) => {
+        if (event.key !== 'Tab') return;
+
+        event.preventDefault();
+        navigate(event.shiftKey ? -1 : 1);
+    });
+    textarea.addEventListener('blur', commit);
+
+    textNode.replaceWith(textarea);
+
+    textarea.focus();
+    textarea.select();
+}
+
+export function openInlineTextEditor({
+    root,
+    event,
+    textNodeIndex,
+    onCommit,
+}: InlineTextEditorOptions) {
+    const textNodes = getTextNodes(root);
+    const textNode =
+        textNodeIndex === undefined
+            ? event && getTextNodeFromEvent(root, event)
+            : textNodes[textNodeIndex];
+
+    if (!textNode) return false;
+
+    const index = textNodeIndex ?? textNodes.indexOf(textNode);
+    if (index === -1) return false;
+
+    openTextNodeEditor({root, event, textNodeIndex: index, textNode, onCommit});
+
+    return true;
+}

From ac65a91c09070bbe53e3a0e6f38428b9ae3a6dab Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 20:20:05 +0200
Subject: [PATCH 11/21] feat: support grouped grid templates

---
 .../BlockInsertPopup.tsx                      |  35 ++---
 .../GroupedTemplatesMenuItems.tsx             | 147 ++++++++++++++++++
 .../TemplatesPopup.scss                       |  13 ++
 .../TemplatesPopup.tsx                        |  35 ++---
 .../GridBlockTemplatesNodeView/blockUtils.ts  |   8 +-
 .../groupTemplates.test.ts                    |  67 ++++++++
 .../groupTemplates.ts                         |  60 +++++++
 .../additional/GridBlockTemplates/css.ts      |   7 +
 .../templates/parse.test.ts                   |  76 +++++++++
 .../GridBlockTemplates/templates/parse.ts     | 138 ++++++++++++++--
 .../templates/storage.test.ts                 |  48 +++---
 .../GridBlockTemplates/templates/storage.ts   |   1 +
 .../additional/GridBlockTemplates/types.ts    |   1 +
 .../src/i18n/grid-block-templates/en.json     |   2 +-
 .../src/i18n/grid-block-templates/ru.json     |   2 +-
 15 files changed, 555 insertions(+), 85 deletions(-)
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.ts

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
index 40871a03..86e53796 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
@@ -1,4 +1,4 @@
-import {useMemo, useState} from 'react';
+import {useState} from 'react';
 
 import {Code} from '@gravity-ui/icons';
 import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
@@ -9,6 +9,7 @@ import {i18n} from 'src/i18n/grid-block-templates';
 import {parseRawBlock} from '../templates';
 import type {GridBlockBlockTemplate, GridBlockTemplateBlock} from '../types';
 
+import {GroupedTemplatesMenuItems} from './GroupedTemplatesMenuItems';
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 
 const b = cnGridBlockTemplates;
@@ -36,12 +37,6 @@ export const BlockInsertPopup: React.FC<BlockInsertPopupProps> = ({
     const [filter, setFilter] = useState('');
     const showCustomHtmlEditor = addingCustomHtml || templates.length === 0;
 
-    const filtered = useMemo(() => {
-        const query = filter.trim().toLowerCase();
-        if (!query) return templates;
-        return templates.filter((template) => template.title.toLowerCase().includes(query));
-    }, [templates, filter]);
-
     const close = () => {
         setAddingCustomHtml(false);
         setInput('');
@@ -107,23 +102,15 @@ export const BlockInsertPopup: React.FC<BlockInsertPopupProps> = ({
                                     role="separator"
                                     className={b('templates-separator', [stop])}
                                 />
-                                {filtered.map((template) => (
-                                    <Menu.Item
-                                        key={template.id}
-                                        className={stop}
-                                        onClick={() => {
-                                            onApplyTemplate(template);
-                                            close();
-                                        }}
-                                    >
-                                        {template.title}
-                                    </Menu.Item>
-                                ))}
-                                {filtered.length === 0 && (
-                                    <Menu.Item disabled className={stop}>
-                                        {i18n('block_templates_empty')}
-                                    </Menu.Item>
-                                )}
+                                <GroupedTemplatesMenuItems
+                                    templates={templates}
+                                    filter={filter}
+                                    emptyText={i18n('block_templates_empty')}
+                                    onApply={(template) => {
+                                        onApplyTemplate(template);
+                                        close();
+                                    }}
+                                />
                             </Menu>
                         </div>
                     </>
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
new file mode 100644
index 00000000..77ce94bc
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
@@ -0,0 +1,147 @@
+import {useEffect, useRef, useState} from 'react';
+
+import {ChevronRight} from '@gravity-ui/icons';
+import {Icon, Menu, Popup} from '@gravity-ui/uikit';
+
+import {useBooleanState, useElementState} from 'src/react-utils/hooks';
+
+import type {GridBlockTemplate} from '../types';
+
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+import {groupTemplatesForMenu} from './groupTemplates';
+
+const CLOSE_DELAY = 120;
+const SUBMENU_WIDTH = 320;
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+type SubmenuPlacement = 'right-start' | 'left-start';
+
+interface GroupedTemplatesMenuItemsProps<TTemplate extends GridBlockTemplate> {
+    templates: TTemplate[];
+    filter: string;
+    emptyText: string;
+    onApply: (template: TTemplate) => void;
+}
+
+interface TemplateGroupMenuItemProps<TTemplate extends GridBlockTemplate> {
+    title: string;
+    templates: TTemplate[];
+    onApply: (template: TTemplate) => void;
+}
+
+function TemplateGroupMenuItem<TTemplate extends GridBlockTemplate>({
+    title,
+    templates,
+    onApply,
+}: TemplateGroupMenuItemProps<TTemplate>) {
+    const [anchorElement, setAnchorElement] = useElementState<HTMLDivElement>();
+    const [open, openPopup, closePopup] = useBooleanState(false);
+    const [placement, setPlacement] = useState<SubmenuPlacement>('right-start');
+    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const cancelClose = () => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    };
+
+    const scheduleClose = () => {
+        cancelClose();
+        closeTimer.current = setTimeout(closePopup, CLOSE_DELAY);
+    };
+
+    const openSubmenu = () => {
+        cancelClose();
+
+        const rect = anchorElement?.getBoundingClientRect();
+        const hasRightSpace =
+            !rect ||
+            typeof window === 'undefined' ||
+            rect.right + SUBMENU_WIDTH <= window.innerWidth;
+        setPlacement(hasRightSpace ? 'right-start' : 'left-start');
+        openPopup();
+    };
+
+    useEffect(() => () => cancelClose(), []);
+
+    return (
+        <Menu.Item
+            ref={setAnchorElement}
+            className={stop}
+            iconEnd={<Icon data={ChevronRight} />}
+            onClick={openSubmenu}
+            extraProps={{
+                onFocus: openSubmenu,
+                onMouseEnter: openSubmenu,
+                onMouseLeave: scheduleClose,
+            }}
+        >
+            {title}
+            <Popup open={open} hasArrow={false} placement={placement} anchorElement={anchorElement}>
+                <div
+                    className={b('templates-submenu', [stop])}
+                    onMouseEnter={cancelClose}
+                    onMouseLeave={scheduleClose}
+                >
+                    <Menu className={stop}>
+                        {templates.map((template) => (
+                            <Menu.Item
+                                key={template.id}
+                                className={stop}
+                                onClick={() => {
+                                    onApply(template);
+                                    closePopup();
+                                }}
+                            >
+                                {template.title}
+                            </Menu.Item>
+                        ))}
+                    </Menu>
+                </div>
+            </Popup>
+        </Menu.Item>
+    );
+}
+
+export function GroupedTemplatesMenuItems<TTemplate extends GridBlockTemplate>({
+    templates,
+    filter,
+    emptyText,
+    onApply,
+}: GroupedTemplatesMenuItemsProps<TTemplate>) {
+    const entries = groupTemplatesForMenu(templates, filter);
+
+    if (entries.length === 0) {
+        return (
+            <Menu.Item disabled className={stop}>
+                {emptyText}
+            </Menu.Item>
+        );
+    }
+
+    return (
+        <>
+            {entries.map((entry) =>
+                entry.type === 'group' ? (
+                    <TemplateGroupMenuItem
+                        key={`group:${entry.title}`}
+                        title={entry.title}
+                        templates={entry.templates}
+                        onApply={onApply}
+                    />
+                ) : (
+                    <Menu.Item
+                        key={entry.template.id}
+                        className={stop}
+                        onClick={() => onApply(entry.template)}
+                    >
+                        {entry.template.title}
+                    </Menu.Item>
+                ),
+            )}
+        </>
+    );
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
index a1367ca8..2675ba0c 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
@@ -31,6 +31,19 @@
         max-height: 280px;
     }
 
+    &__templates-submenu {
+        overflow-y: auto;
+
+        width: 320px;
+        max-width: calc(100vw - 32px);
+        max-height: 280px;
+        padding: 8px;
+
+        border-radius: var(--g-border-radius-m);
+        background: var(--g-color-base-float);
+        box-shadow: 0 2px 10px var(--g-color-sfx-shadow);
+    }
+
     &__templates-separator {
         height: 1px;
         margin: 4px 0;
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
index 91b9fd5e..0d635b6d 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
@@ -1,4 +1,4 @@
-import {useMemo, useState} from 'react';
+import {useState} from 'react';
 
 import {Plus, TrashBin} from '@gravity-ui/icons';
 import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
@@ -9,6 +9,7 @@ import {i18n} from 'src/i18n/grid-block-templates';
 import {clearStoredTemplates, parseTemplates, saveTemplates} from '../templates';
 import type {GridBlockTemplate} from '../types';
 
+import {GroupedTemplatesMenuItems} from './GroupedTemplatesMenuItems';
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 
 import './TemplatesPopup.scss';
@@ -43,12 +44,6 @@ export function TemplatesPopup<TTemplate extends GridBlockTemplate>({
     const [input, setInput] = useState('');
     const [filter, setFilter] = useState('');
 
-    const filtered = useMemo(() => {
-        const query = filter.trim().toLowerCase();
-        if (!query) return templates;
-        return templates.filter((template) => template.title.toLowerCase().includes(query));
-    }, [templates, filter]);
-
     const close = () => {
         setAdding(false);
         setInput('');
@@ -134,23 +129,15 @@ export function TemplatesPopup<TTemplate extends GridBlockTemplate>({
                                         />
                                     </>
                                 )}
-                                {filtered.map((template) => (
-                                    <Menu.Item
-                                        key={template.id}
-                                        className={stop}
-                                        onClick={() => {
-                                            onApply(template);
-                                            close();
-                                        }}
-                                    >
-                                        {template.title}
-                                    </Menu.Item>
-                                ))}
-                                {filtered.length === 0 && (
-                                    <Menu.Item disabled className={stop}>
-                                        {emptyText}
-                                    </Menu.Item>
-                                )}
+                                <GroupedTemplatesMenuItems
+                                    templates={templates}
+                                    filter={filter}
+                                    emptyText={emptyText}
+                                    onApply={(template) => {
+                                        onApply(template);
+                                        close();
+                                    }}
+                                />
                             </Menu>
                         </div>
                     </>
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
index c9398c37..ba61e0f9 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
@@ -1,4 +1,4 @@
-import {blockClass, gridScopeClass, inlineToRule, scopeCss} from '../css';
+import {blockClass, gridScopeClass, inlineToRule, scopeCss, templateCssToRules} from '../css';
 import type {
     GridBlock,
     GridBlockBlockTemplate,
@@ -11,7 +11,7 @@ export const createGridBlockId = () => Math.random().toString(36).slice(2, 10);
 
 export const templateToBlock = (template: GridBlockBlockTemplate): GridBlock => ({
     id: createGridBlockId(),
-    css: inlineToRule(template.block.css),
+    css: templateCssToRules(template.block.css),
     content: template.block.content,
 });
 
@@ -22,10 +22,10 @@ export const rawTemplateBlockToBlock = (block: GridBlockTemplateBlock): GridBloc
 });
 
 export const containerTemplateToAttrs = (template: GridBlockContainerTemplate) => ({
-    customCss: inlineToRule(template.containerCss, '.grid'),
+    customCss: templateCssToRules(template.containerCss, '.grid'),
     blocks: template.blocks.map((block) => ({
         id: createGridBlockId(),
-        css: inlineToRule(block.css),
+        css: templateCssToRules(block.css),
         content: block.content,
     })),
 });
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts
new file mode 100644
index 00000000..1c90d207
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts
@@ -0,0 +1,67 @@
+import type {GridBlockTemplate} from '../types';
+
+import {groupTemplatesForMenu} from './groupTemplates';
+
+const tpl = (id: string, title: string, group?: string): GridBlockTemplate => {
+    const template: GridBlockTemplate = {
+        id,
+        title,
+        type: 'block',
+        content: title,
+        block: {css: '', content: title},
+    };
+
+    return group ? {...template, group} : template;
+};
+
+describe('groupTemplatesForMenu', () => {
+    it('keeps ungrouped templates and groups in first-seen order', () => {
+        expect(
+            groupTemplatesForMenu(
+                [
+                    tpl('a', 'A'),
+                    tpl('b', 'B1', 'Group B'),
+                    tpl('c', 'C'),
+                    tpl('d', 'B2', 'Group B'),
+                    tpl('e', 'E1', 'Group E'),
+                ],
+                '',
+            ),
+        ).toEqual([
+            {type: 'template', template: tpl('a', 'A')},
+            {
+                type: 'group',
+                title: 'Group B',
+                templates: [tpl('b', 'B1', 'Group B'), tpl('d', 'B2', 'Group B')],
+            },
+            {type: 'template', template: tpl('c', 'C')},
+            {type: 'group', title: 'Group E', templates: [tpl('e', 'E1', 'Group E')]},
+        ]);
+    });
+
+    it('returns a whole group when the group title matches search', () => {
+        expect(
+            groupTemplatesForMenu(
+                [tpl('a', 'Hero', 'Marketing'), tpl('b', 'Cards', 'Marketing')],
+                'market',
+            ),
+        ).toEqual([
+            {
+                type: 'group',
+                title: 'Marketing',
+                templates: [tpl('a', 'Hero', 'Marketing'), tpl('b', 'Cards', 'Marketing')],
+            },
+        ]);
+    });
+
+    it('returns only matching templates inside a group when template titles match search', () => {
+        expect(
+            groupTemplatesForMenu(
+                [tpl('a', 'Hero', 'Marketing'), tpl('b', 'Cards', 'Marketing')],
+                'hero',
+            ),
+        ).toEqual([
+            {type: 'group', title: 'Marketing', templates: [tpl('a', 'Hero', 'Marketing')]},
+        ]);
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.ts
new file mode 100644
index 00000000..b8854666
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.ts
@@ -0,0 +1,60 @@
+import type {GridBlockTemplate} from '../types';
+
+export type TemplateMenuEntry<TTemplate extends GridBlockTemplate> =
+    | {type: 'template'; template: TTemplate}
+    | {type: 'group'; title: string; templates: TTemplate[]};
+
+const getGroup = (template: GridBlockTemplate) => template.group?.trim() || null;
+
+const matches = (value: string, query: string) => value.toLowerCase().includes(query);
+
+export const groupTemplatesForMenu = <TTemplate extends GridBlockTemplate>(
+    templates: TTemplate[],
+    filter: string,
+): TemplateMenuEntry<TTemplate>[] => {
+    const grouped = new Map<string, Extract<TemplateMenuEntry<TTemplate>, {type: 'group'}>>();
+    const entries: TemplateMenuEntry<TTemplate>[] = [];
+
+    for (const template of templates) {
+        const group = getGroup(template);
+
+        if (!group) {
+            entries.push({type: 'template', template});
+            continue;
+        }
+
+        let entry = grouped.get(group);
+        if (!entry) {
+            entry = {type: 'group', title: group, templates: []};
+            grouped.set(group, entry);
+            entries.push(entry);
+        }
+        entry.templates.push(template);
+    }
+
+    const query = filter.trim().toLowerCase();
+    if (!query) return entries;
+
+    const filteredEntries: TemplateMenuEntry<TTemplate>[] = [];
+
+    for (const entry of entries) {
+        if (entry.type === 'template') {
+            if (matches(entry.template.title, query)) filteredEntries.push(entry);
+            continue;
+        }
+
+        if (matches(entry.title, query)) {
+            filteredEntries.push(entry);
+            continue;
+        }
+
+        const templatesByTitle = entry.templates.filter((template) =>
+            matches(template.title, query),
+        );
+        if (templatesByTitle.length) {
+            filteredEntries.push({type: 'group', title: entry.title, templates: templatesByTitle});
+        }
+    }
+
+    return filteredEntries;
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
index a50f8b5a..5e0719cd 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
@@ -9,6 +9,13 @@ export const inlineToRule = (declarations: string, selector = '&'): string => {
     return decls === ';' ? '' : `${selector} {\n  ${decls}\n}`;
 };
 
+export const templateCssToRules = (css: string, selector = '&'): string => {
+    const value = css.trim();
+    if (!value) return '';
+
+    return value.includes('{') ? value : inlineToRule(value, selector);
+};
+
 const scopeSelector = (selector: string, base: string) =>
     selector.includes('&') ? selector.replace(/&/g, base) : `${base} ${selector}`;
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
index f6b0b172..d6cc157b 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
@@ -32,6 +32,23 @@ describe('parseTemplateBlock', () => {
             content: 'Plain text',
         });
     });
+
+    it('extracts style and html wrappers into block css and html', () => {
+        expect(
+            parseTemplateBlock(`
+                <style>
+                    & { padding: 12px; }
+                    strong { color: red; }
+                </style>
+                <html>
+                    <strong>Text</strong>
+                </html>
+            `),
+        ).toEqual({
+            css: '& { padding: 12px; }\nstrong { color: red; }',
+            content: '<strong>Text</strong>',
+        });
+    });
 });
 
 describe('parseTemplates', () => {
@@ -87,6 +104,65 @@ describe('parseTemplates', () => {
         });
     });
 
+    it('parses group, style and html wrappers for a container template', () => {
+        const [template] = parseTemplates(`
+            <template id="styled-grid" title="Styled grid" type="container" group="Theme A">
+                <style>
+                    .grid { display: grid; gap: 12px; }
+                    a { color: inherit; }
+                </style>
+                <html>
+                    <div class="grid">
+                        <div>
+                            <style>
+                                & { padding: 12px; }
+                                strong { color: red; }
+                            </style>
+                            <strong>First</strong>
+                        </div>
+                        <div style="padding:14px">Second</div>
+                    </div>
+                </html>
+            </template>
+        `);
+
+        expect(template).toMatchObject({
+            id: 'styled-grid',
+            title: 'Styled grid',
+            group: 'Theme A',
+            type: 'container',
+            containerCss: '.grid { display: grid; gap: 12px; }\na { color: inherit; }',
+            blocks: [
+                {
+                    css: '& { padding: 12px; }\nstrong { color: red; }',
+                    content: '<strong>First</strong>',
+                },
+                {css: 'padding:14px', content: 'Second'},
+            ],
+        });
+    });
+
+    it('parses group, style and html wrappers for a block template', () => {
+        const [template] = parseTemplates(`
+            <template id="card" title="Card" type="block" group="Theme A">
+                <style>
+                    & { padding: 12px; }
+                </style>
+                <html>
+                    <strong>Card text</strong>
+                </html>
+            </template>
+        `);
+
+        expect(template).toMatchObject({
+            id: 'card',
+            title: 'Card',
+            group: 'Theme A',
+            type: 'block',
+            block: {css: '& { padding: 12px; }', content: '<strong>Card text</strong>'},
+        });
+    });
+
     it('falls back to raw content for a plain block template', () => {
         const [template] = parseTemplates(
             '<template id="plain" title="Plain" type="block">Plain text</template>',
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
index 8128c0fb..6386ff84 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
@@ -1,5 +1,6 @@
 import {v4 as uuidv4} from 'uuid';
 
+import {inlineToRule} from '../css';
 import type {
     GridBlockBlockTemplate,
     GridBlockContainerTemplate,
@@ -9,6 +10,7 @@ import type {
 } from '../types';
 
 const genId = () => 'grid-block-template-' + uuidv4();
+const htmlTemplateTagName = 'grid-template-html';
 
 const isTemplateType = (value: string | null): value is GridBlockTemplateType =>
     value === 'block' || value === 'container';
@@ -21,16 +23,110 @@ const parseHtml = (value: string): Document | null => {
 const getStyle = (element: Element | null) =>
     element instanceof HTMLElement ? element.getAttribute('style')?.trim() || '' : '';
 
+const joinCss = (...parts: string[]) =>
+    parts
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .join('\n\n');
+
+const normalizeStyleCss = (css: string) =>
+    css
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean)
+        .join('\n');
+
+const isElementWithTag = (node: ChildNode, tagName: string): node is Element =>
+    node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === tagName;
+
+const normalizeTemplateHtmlTag = (content: string) =>
+    content
+        .replace(/<\/html\s*>/gi, `</${htmlTemplateTagName}>`)
+        .replace(/<html(\s[^>]*)?>/gi, `<${htmlTemplateTagName}$1>`);
+
+const consumeDirectElements = (node: ParentNode, tagName: string) => {
+    const elements = Array.from(node.childNodes).filter((child): child is Element =>
+        isElementWithTag(child, tagName),
+    );
+
+    elements.forEach((element) => element.remove());
+
+    return elements;
+};
+
+const consumeDirectStyleCss = (node: ParentNode) =>
+    joinCss(
+        ...consumeDirectElements(node, 'style').map((style) =>
+            normalizeStyleCss(style.textContent ?? ''),
+        ),
+    );
+
+const createTemplateFragment = (content: string): DocumentFragment | null => {
+    const doc = parseHtml(`<template>${normalizeTemplateHtmlTag(content)}</template>`);
+    const template = doc?.querySelector('template');
+
+    return typeof HTMLTemplateElement !== 'undefined' && template instanceof HTMLTemplateElement
+        ? (template.content.cloneNode(true) as DocumentFragment)
+        : null;
+};
+
+const getFragmentHtml = (fragment: DocumentFragment) => {
+    const host = document.createElement('div');
+    host.append(...Array.from(fragment.childNodes).map((node) => node.cloneNode(true)));
+
+    return host.innerHTML.trim();
+};
+
+const getTemplateParts = (content: string) => {
+    const fragment = createTemplateFragment(content);
+    if (!fragment) return {css: '', html: content, hasHtmlWrapper: false};
+
+    const css = consumeDirectStyleCss(fragment);
+    const htmlElements = consumeDirectElements(fragment, htmlTemplateTagName);
+    const hasHtmlWrapper = htmlElements.length > 0;
+    const html = htmlElements.length
+        ? htmlElements
+              .map((element) => element.innerHTML.trim())
+              .filter(Boolean)
+              .join('\n')
+        : getFragmentHtml(fragment);
+
+    return {css, html, hasHtmlWrapper};
+};
+
+const resolveCss = ({
+    styleCss,
+    inlineCss,
+    inlineSelector,
+}: {
+    styleCss: string;
+    inlineCss: string;
+    inlineSelector?: string;
+}) => {
+    if (!styleCss) return inlineCss;
+
+    return joinCss(styleCss, inlineCss ? inlineToRule(inlineCss, inlineSelector) : '');
+};
+
 export const parseTemplateBlock = (content: string): GridBlockTemplateBlock => {
-    const doc = parseHtml(content);
+    const {css: templateCss, hasHtmlWrapper, html} = getTemplateParts(content);
+
+    if (hasHtmlWrapper) {
+        return {css: templateCss, content: html};
+    }
+
+    const doc = parseHtml(html);
     const root = doc?.body.firstElementChild ?? null;
 
     if (!root) {
-        return {css: '', content};
+        return {css: templateCss, content: doc?.body.innerHTML.trim() || html};
     }
 
+    const rootCss = consumeDirectStyleCss(root);
+    const inlineCss = getStyle(root);
+
     return {
-        css: getStyle(root),
+        css: resolveCss({styleCss: joinCss(templateCss, rootCss), inlineCss}),
         content: root.innerHTML.trim(),
     };
 };
@@ -44,46 +140,61 @@ export const parseRawBlock = (content: string): GridBlockTemplateBlock => ({
 const parseContainerTemplate = (
     id: string,
     title: string,
+    group: string | undefined,
     content: string,
 ): GridBlockContainerTemplate => {
-    const doc = parseHtml(content);
+    const {css: templateCss, html} = getTemplateParts(content);
+    const doc = parseHtml(html);
     const root = doc?.body.firstElementChild ?? null;
+    const rootCss = root ? consumeDirectStyleCss(root) : '';
     const children = root ? Array.from(root.children) : [];
+    const styleCss = joinCss(templateCss, rootCss);
 
     return {
         id,
         title,
+        group,
         type: 'container',
         content,
-        containerCss: getStyle(root),
-        blocks: children.map((child) => ({
-            css: getStyle(child),
-            content: child.innerHTML.trim(),
-        })),
+        containerCss: resolveCss({
+            styleCss,
+            inlineCss: getStyle(root),
+            inlineSelector: '.grid',
+        }),
+        blocks: children.map((child) => {
+            const childStyleCss = consumeDirectStyleCss(child);
+
+            return {
+                css: resolveCss({styleCss: childStyleCss, inlineCss: getStyle(child)}),
+                content: child.innerHTML.trim(),
+            };
+        }),
     };
 };
 
 const parseBlockTemplate = (
     id: string,
     title: string,
+    group: string | undefined,
     content: string,
 ): GridBlockBlockTemplate => ({
     id,
     title,
+    group,
     type: 'block',
     content,
     block: parseTemplateBlock(content),
 });
 
 /**
- * Parses one or more `<template id="..." title="..." type="block|container">...</template>`
+ * Parses one or more `<template id="..." title="..." type="block|container" group="...">...</template>`
  * blocks. Templates without a valid type are ignored.
  */
 export function parseTemplates(input: string): GridBlockTemplate[] {
     const value = input.trim();
     if (!value) return [];
 
-    const doc = parseHtml(value);
+    const doc = parseHtml(normalizeTemplateHtmlTag(value));
     if (!doc) return [];
 
     return Array.from(doc.querySelectorAll('template')).flatMap((el) => {
@@ -92,10 +203,11 @@ export function parseTemplates(input: string): GridBlockTemplate[] {
 
         const id = el.getAttribute('id')?.trim() || genId();
         const title = el.getAttribute('title')?.trim() || id;
+        const group = el.getAttribute('group')?.trim() || undefined;
         const content = el.innerHTML.trim();
 
         return type === 'container'
-            ? parseContainerTemplate(id, title, content)
-            : parseBlockTemplate(id, title, content);
+            ? parseContainerTemplate(id, title, group, content)
+            : parseBlockTemplate(id, title, group, content);
     });
 }
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts
index ead33784..4f2c1dc0 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts
@@ -8,22 +8,30 @@ import {
     saveTemplates,
 } from './storage';
 
-const blockTpl = (id: string, title = id): GridBlockTemplate => ({
-    id,
-    title,
-    type: 'block',
-    content: `<div>${id}</div>`,
-    block: {css: 'padding:1px', content: id},
-});
+const blockTpl = (id: string, title = id, group?: string): GridBlockTemplate => {
+    const template: GridBlockTemplate = {
+        id,
+        title,
+        type: 'block',
+        content: `<div>${id}</div>`,
+        block: {css: 'padding:1px', content: id},
+    };
 
-const containerTpl = (id: string, title = id): GridBlockTemplate => ({
-    id,
-    title,
-    type: 'container',
-    content: `<div><div>${id}</div></div>`,
-    containerCss: 'display:grid',
-    blocks: [{css: 'padding:1px', content: id}],
-});
+    return group ? {...template, group} : template;
+};
+
+const containerTpl = (id: string, title = id, group?: string): GridBlockTemplate => {
+    const template: GridBlockTemplate = {
+        id,
+        title,
+        type: 'container',
+        content: `<div><div>${id}</div></div>`,
+        containerCss: 'display:grid',
+        blocks: [{css: 'padding:1px', content: id}],
+    };
+
+    return group ? {...template, group} : template;
+};
 
 beforeEach(() => {
     window.localStorage.clear();
@@ -54,8 +62,8 @@ describe('readStoredTemplates', () => {
         window.localStorage.setItem(
             GRID_BLOCK_TEMPLATES_STORAGE_KEY,
             JSON.stringify([
-                blockTpl('a'),
-                containerTpl('b'),
+                blockTpl('a', 'a', 'Group A'),
+                containerTpl('b', 'b', 'Group B'),
                 {id: 'missing-type', title: 'Missing type', content: '<div />'},
                 {id: 'wrong-type', title: 'Wrong type', type: 'section', content: '<div />'},
                 {id: 'bad-block', title: 'Bad block', type: 'block', content: '<div />'},
@@ -67,10 +75,14 @@ describe('readStoredTemplates', () => {
                     containerCss: '',
                     blocks: [{css: 1, content: 'x'}],
                 },
+                {...blockTpl('bad-group'), group: 1},
             ]),
         );
 
-        expect(readStoredTemplates()).toEqual([blockTpl('a'), containerTpl('b')]);
+        expect(readStoredTemplates()).toEqual([
+            blockTpl('a', 'a', 'Group A'),
+            containerTpl('b', 'b', 'Group B'),
+        ]);
     });
 });
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts
index 0ccde769..5c337bab 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts
@@ -18,6 +18,7 @@ const isTemplateBase = (value: unknown): value is GridBlockTemplate =>
     typeof value.id === 'string' &&
     typeof value.title === 'string' &&
     typeof value.content === 'string' &&
+    (value.group === undefined || typeof value.group === 'string') &&
     (value.type === 'block' || value.type === 'container');
 
 const isBlockTemplate = (value: unknown): value is GridBlockBlockTemplate =>
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
index df904a89..9249c9bb 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
@@ -13,6 +13,7 @@ export type GridBlockTemplateBlock = Omit<GridBlock, 'id'>;
 interface GridBlockTemplateBase {
     id: string;
     title: string;
+    group?: string;
     type: GridBlockTemplateType;
     /** Original template inner HTML. */
     content: string;
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
index b7135482..687577c7 100644
--- a/packages/editor/src/i18n/grid-block-templates/en.json
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -18,5 +18,5 @@
   "remove_grid": "Remove grid",
   "save": "Save",
   "search_templates": "Search by name",
-  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\">\n  <div class=\"grid\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">\n    <div style=\"padding:16px\">Left</div>\n    <div style=\"padding:16px\">Right</div>\n  </div>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\">\n  <div style=\"padding:16px;border-radius:8px;background:#f8fafc\">Card text</div>\n</template>"
+  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\" group=\"Marketing\">\n  <style>\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n  </style>\n  <html>\n    <div class=\"grid\">\n      <div>Left</div>\n      <div>Right</div>\n    </div>\n  </html>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\" group=\"Marketing\">\n  <style>\n    & { padding: 16px; border-radius: 8px; background: #f8fafc; }\n  </style>\n  <html>\n    <div>Card text</div>\n  </html>\n</template>"
 }
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
index 8408b7d8..c5e504d2 100644
--- a/packages/editor/src/i18n/grid-block-templates/ru.json
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -18,5 +18,5 @@
   "remove_grid": "Удалить сетку",
   "save": "Сохранить",
   "search_templates": "Поиск по названию",
-  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\">\n  <div class=\"grid\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">\n    <div style=\"padding:16px\">Left</div>\n    <div style=\"padding:16px\">Right</div>\n  </div>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\">\n  <div style=\"padding:16px;border-radius:8px;background:#f8fafc\">Card text</div>\n</template>"
+  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\" group=\"Marketing\">\n  <style>\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n  </style>\n  <html>\n    <div class=\"grid\">\n      <div>Left</div>\n      <div>Right</div>\n    </div>\n  </html>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\" group=\"Marketing\">\n  <style>\n    & { padding: 16px; border-radius: 8px; background: #f8fafc; }\n  </style>\n  <html>\n    <div>Card text</div>\n  </html>\n</template>"
 }

From e3c474b0b29344e2156dd6dd26b61c003833d720 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 21:01:49 +0200
Subject: [PATCH 12/21] feat: simplify grouped template menus

---
 .../GroupedTemplatesMenuItems.tsx             | 115 ++++++------------
 .../TemplatesPopup.scss                       |  13 +-
 .../templates/parse.test.ts                   |  51 ++++----
 .../GridBlockTemplates/templates/parse.ts     |  40 +++---
 .../src/i18n/grid-block-templates/en.json     |   2 +-
 .../src/i18n/grid-block-templates/ru.json     |   2 +-
 6 files changed, 89 insertions(+), 134 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
index 77ce94bc..b3cf9280 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
@@ -1,23 +1,16 @@
-import {useEffect, useRef, useState} from 'react';
+import {useState} from 'react';
 
-import {ChevronRight} from '@gravity-ui/icons';
-import {Icon, Menu, Popup} from '@gravity-ui/uikit';
-
-import {useBooleanState, useElementState} from 'src/react-utils/hooks';
+import {ChevronDown, ChevronRight} from '@gravity-ui/icons';
+import {Icon, Menu} from '@gravity-ui/uikit';
 
 import type {GridBlockTemplate} from '../types';
 
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 import {groupTemplatesForMenu} from './groupTemplates';
 
-const CLOSE_DELAY = 120;
-const SUBMENU_WIDTH = 320;
-
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
 
-type SubmenuPlacement = 'right-start' | 'left-start';
-
 interface GroupedTemplatesMenuItemsProps<TTemplate extends GridBlockTemplate> {
     templates: TTemplate[];
     filter: string;
@@ -28,81 +21,39 @@ interface GroupedTemplatesMenuItemsProps<TTemplate extends GridBlockTemplate> {
 interface TemplateGroupMenuItemProps<TTemplate extends GridBlockTemplate> {
     title: string;
     templates: TTemplate[];
+    open: boolean;
     onApply: (template: TTemplate) => void;
+    onToggle: (title: string) => void;
 }
 
 function TemplateGroupMenuItem<TTemplate extends GridBlockTemplate>({
     title,
     templates,
+    open,
     onApply,
+    onToggle,
 }: TemplateGroupMenuItemProps<TTemplate>) {
-    const [anchorElement, setAnchorElement] = useElementState<HTMLDivElement>();
-    const [open, openPopup, closePopup] = useBooleanState(false);
-    const [placement, setPlacement] = useState<SubmenuPlacement>('right-start');
-    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    const cancelClose = () => {
-        if (closeTimer.current) {
-            clearTimeout(closeTimer.current);
-            closeTimer.current = null;
-        }
-    };
-
-    const scheduleClose = () => {
-        cancelClose();
-        closeTimer.current = setTimeout(closePopup, CLOSE_DELAY);
-    };
-
-    const openSubmenu = () => {
-        cancelClose();
-
-        const rect = anchorElement?.getBoundingClientRect();
-        const hasRightSpace =
-            !rect ||
-            typeof window === 'undefined' ||
-            rect.right + SUBMENU_WIDTH <= window.innerWidth;
-        setPlacement(hasRightSpace ? 'right-start' : 'left-start');
-        openPopup();
-    };
-
-    useEffect(() => () => cancelClose(), []);
-
     return (
-        <Menu.Item
-            ref={setAnchorElement}
-            className={stop}
-            iconEnd={<Icon data={ChevronRight} />}
-            onClick={openSubmenu}
-            extraProps={{
-                onFocus: openSubmenu,
-                onMouseEnter: openSubmenu,
-                onMouseLeave: scheduleClose,
-            }}
-        >
-            {title}
-            <Popup open={open} hasArrow={false} placement={placement} anchorElement={anchorElement}>
-                <div
-                    className={b('templates-submenu', [stop])}
-                    onMouseEnter={cancelClose}
-                    onMouseLeave={scheduleClose}
-                >
-                    <Menu className={stop}>
-                        {templates.map((template) => (
-                            <Menu.Item
-                                key={template.id}
-                                className={stop}
-                                onClick={() => {
-                                    onApply(template);
-                                    closePopup();
-                                }}
-                            >
-                                {template.title}
-                            </Menu.Item>
-                        ))}
-                    </Menu>
-                </div>
-            </Popup>
-        </Menu.Item>
+        <>
+            <Menu.Item
+                className={stop}
+                iconEnd={<Icon data={open ? ChevronDown : ChevronRight} />}
+                onClick={() => onToggle(title)}
+                extraProps={{'aria-expanded': open}}
+            >
+                {title}
+            </Menu.Item>
+            {open &&
+                templates.map((template) => (
+                    <Menu.Item
+                        key={template.id}
+                        className={b('templates-group-template', [stop])}
+                        onClick={() => onApply(template)}
+                    >
+                        {template.title}
+                    </Menu.Item>
+                ))}
+        </>
     );
 }
 
@@ -112,7 +63,17 @@ export function GroupedTemplatesMenuItems<TTemplate extends GridBlockTemplate>({
     emptyText,
     onApply,
 }: GroupedTemplatesMenuItemsProps<TTemplate>) {
+    const [openGroups, setOpenGroups] = useState<string[]>([]);
     const entries = groupTemplatesForMenu(templates, filter);
+    const hasFilter = Boolean(filter.trim());
+
+    const toggleGroup = (title: string) => {
+        setOpenGroups((current) =>
+            current.includes(title)
+                ? current.filter((openTitle) => openTitle !== title)
+                : [...current, title],
+        );
+    };
 
     if (entries.length === 0) {
         return (
@@ -130,7 +91,9 @@ export function GroupedTemplatesMenuItems<TTemplate extends GridBlockTemplate>({
                         key={`group:${entry.title}`}
                         title={entry.title}
                         templates={entry.templates}
+                        open={hasFilter || openGroups.includes(entry.title)}
                         onApply={onApply}
+                        onToggle={toggleGroup}
                     />
                 ) : (
                     <Menu.Item
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
index 2675ba0c..7942d85a 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
@@ -31,17 +31,8 @@
         max-height: 280px;
     }
 
-    &__templates-submenu {
-        overflow-y: auto;
-
-        width: 320px;
-        max-width: calc(100vw - 32px);
-        max-height: 280px;
-        padding: 8px;
-
-        border-radius: var(--g-border-radius-m);
-        background: var(--g-color-base-float);
-        box-shadow: 0 2px 10px var(--g-color-sfx-shadow);
+    &__templates-group-template {
+        padding-inline-start: 32px;
     }
 
     &__templates-separator {
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
index d6cc157b..354927ea 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
@@ -33,20 +33,14 @@ describe('parseTemplateBlock', () => {
         });
     });
 
-    it('extracts style and html wrappers into block css and html', () => {
+    it('extracts all style tags into css and keeps the remaining html', () => {
         expect(
-            parseTemplateBlock(`
-                <style>
-                    & { padding: 12px; }
-                    strong { color: red; }
-                </style>
-                <html>
-                    <strong>Text</strong>
-                </html>
-            `),
+            parseTemplateBlock(
+                '<h1>Title</h1><style>& { padding: 12px; }</style><div><strong>Text</strong></div><style>strong { color: red; }</style>',
+            ),
         ).toEqual({
-            css: '& { padding: 12px; }\nstrong { color: red; }',
-            content: '<strong>Text</strong>',
+            css: '& { padding: 12px; }\n\nstrong { color: red; }',
+            content: '<h1>Title</h1><div><strong>Text</strong></div>',
         });
     });
 });
@@ -104,25 +98,23 @@ describe('parseTemplates', () => {
         });
     });
 
-    it('parses group, style and html wrappers for a container template', () => {
+    it('parses group, style tags and remaining html for a container template', () => {
         const [template] = parseTemplates(`
             <template id="styled-grid" title="Styled grid" type="container" group="Theme A">
                 <style>
                     .grid { display: grid; gap: 12px; }
                     a { color: inherit; }
                 </style>
-                <html>
-                    <div class="grid">
-                        <div>
-                            <style>
-                                & { padding: 12px; }
-                                strong { color: red; }
-                            </style>
-                            <strong>First</strong>
-                        </div>
-                        <div style="padding:14px">Second</div>
+                <div class="grid">
+                    <div>
+                        <style>
+                            .block-1 { padding: 12px; }
+                            .block-1 strong { color: red; }
+                        </style>
+                        <strong>First</strong>
                     </div>
-                </html>
+                    <div style="padding:14px">Second</div>
+                </div>
             </template>
         `);
 
@@ -131,10 +123,11 @@ describe('parseTemplates', () => {
             title: 'Styled grid',
             group: 'Theme A',
             type: 'container',
-            containerCss: '.grid { display: grid; gap: 12px; }\na { color: inherit; }',
+            containerCss:
+                '.grid { display: grid; gap: 12px; }\na { color: inherit; }\n\n.block-1 { padding: 12px; }\n.block-1 strong { color: red; }',
             blocks: [
                 {
-                    css: '& { padding: 12px; }\nstrong { color: red; }',
+                    css: '',
                     content: '<strong>First</strong>',
                 },
                 {css: 'padding:14px', content: 'Second'},
@@ -142,15 +135,13 @@ describe('parseTemplates', () => {
         });
     });
 
-    it('parses group, style and html wrappers for a block template', () => {
+    it('parses group, style tags and remaining html for a block template', () => {
         const [template] = parseTemplates(`
             <template id="card" title="Card" type="block" group="Theme A">
                 <style>
                     & { padding: 12px; }
                 </style>
-                <html>
-                    <strong>Card text</strong>
-                </html>
+                <strong>Card text</strong>
             </template>
         `);
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
index 6386ff84..8bea8053 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
@@ -44,17 +44,27 @@ const normalizeTemplateHtmlTag = (content: string) =>
         .replace(/<\/html\s*>/gi, `</${htmlTemplateTagName}>`)
         .replace(/<html(\s[^>]*)?>/gi, `<${htmlTemplateTagName}$1>`);
 
-const consumeDirectElements = (node: ParentNode, tagName: string) => {
-    const elements = Array.from(node.childNodes).filter((child): child is Element =>
-        isElementWithTag(child, tagName),
-    );
-
+const consumeElements = (elements: Element[]) => {
     elements.forEach((element) => element.remove());
 
     return elements;
 };
 
-const consumeDirectStyleCss = (node: ParentNode) =>
+const consumeDirectElements = (node: ParentNode, tagName: string) =>
+    consumeElements(
+        Array.from(node.childNodes).filter((child): child is Element =>
+            isElementWithTag(child, tagName),
+        ),
+    );
+
+const consumeStyleCss = (node: ParentNode) =>
+    joinCss(
+        ...consumeElements(Array.from(node.querySelectorAll('style'))).map((style) =>
+            normalizeStyleCss(style.textContent ?? ''),
+        ),
+    );
+
+const consumeLegacyDirectStyleCss = (node: ParentNode) =>
     joinCss(
         ...consumeDirectElements(node, 'style').map((style) =>
             normalizeStyleCss(style.textContent ?? ''),
@@ -79,11 +89,11 @@ const getFragmentHtml = (fragment: DocumentFragment) => {
 
 const getTemplateParts = (content: string) => {
     const fragment = createTemplateFragment(content);
-    if (!fragment) return {css: '', html: content, hasHtmlWrapper: false};
+    if (!fragment) return {css: '', hasExplicitParts: false, html: content};
 
-    const css = consumeDirectStyleCss(fragment);
+    const css = consumeStyleCss(fragment);
     const htmlElements = consumeDirectElements(fragment, htmlTemplateTagName);
-    const hasHtmlWrapper = htmlElements.length > 0;
+    const hasExplicitParts = Boolean(css || htmlElements.length);
     const html = htmlElements.length
         ? htmlElements
               .map((element) => element.innerHTML.trim())
@@ -91,7 +101,7 @@ const getTemplateParts = (content: string) => {
               .join('\n')
         : getFragmentHtml(fragment);
 
-    return {css, html, hasHtmlWrapper};
+    return {css, hasExplicitParts, html};
 };
 
 const resolveCss = ({
@@ -109,9 +119,9 @@ const resolveCss = ({
 };
 
 export const parseTemplateBlock = (content: string): GridBlockTemplateBlock => {
-    const {css: templateCss, hasHtmlWrapper, html} = getTemplateParts(content);
+    const {css: templateCss, hasExplicitParts, html} = getTemplateParts(content);
 
-    if (hasHtmlWrapper) {
+    if (hasExplicitParts) {
         return {css: templateCss, content: html};
     }
 
@@ -122,7 +132,7 @@ export const parseTemplateBlock = (content: string): GridBlockTemplateBlock => {
         return {css: templateCss, content: doc?.body.innerHTML.trim() || html};
     }
 
-    const rootCss = consumeDirectStyleCss(root);
+    const rootCss = consumeLegacyDirectStyleCss(root);
     const inlineCss = getStyle(root);
 
     return {
@@ -146,7 +156,7 @@ const parseContainerTemplate = (
     const {css: templateCss, html} = getTemplateParts(content);
     const doc = parseHtml(html);
     const root = doc?.body.firstElementChild ?? null;
-    const rootCss = root ? consumeDirectStyleCss(root) : '';
+    const rootCss = root ? consumeLegacyDirectStyleCss(root) : '';
     const children = root ? Array.from(root.children) : [];
     const styleCss = joinCss(templateCss, rootCss);
 
@@ -162,7 +172,7 @@ const parseContainerTemplate = (
             inlineSelector: '.grid',
         }),
         blocks: children.map((child) => {
-            const childStyleCss = consumeDirectStyleCss(child);
+            const childStyleCss = consumeLegacyDirectStyleCss(child);
 
             return {
                 css: resolveCss({styleCss: childStyleCss, inlineCss: getStyle(child)}),
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
index 687577c7..717f5685 100644
--- a/packages/editor/src/i18n/grid-block-templates/en.json
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -18,5 +18,5 @@
   "remove_grid": "Remove grid",
   "save": "Save",
   "search_templates": "Search by name",
-  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\" group=\"Marketing\">\n  <style>\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n  </style>\n  <html>\n    <div class=\"grid\">\n      <div>Left</div>\n      <div>Right</div>\n    </div>\n  </html>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\" group=\"Marketing\">\n  <style>\n    & { padding: 16px; border-radius: 8px; background: #f8fafc; }\n  </style>\n  <html>\n    <div>Card text</div>\n  </html>\n</template>"
+  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\" group=\"Marketing\">\n  <style>\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n  </style>\n  <div class=\"grid\">\n    <div>Left</div>\n    <div>Right</div>\n  </div>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\" group=\"Marketing\">\n  <style>\n    & { padding: 16px; border-radius: 8px; background: #f8fafc; }\n  </style>\n  <div>Card text</div>\n</template>"
 }
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
index c5e504d2..c269fa74 100644
--- a/packages/editor/src/i18n/grid-block-templates/ru.json
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -18,5 +18,5 @@
   "remove_grid": "Удалить сетку",
   "save": "Сохранить",
   "search_templates": "Поиск по названию",
-  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\" group=\"Marketing\">\n  <style>\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n  </style>\n  <html>\n    <div class=\"grid\">\n      <div>Left</div>\n      <div>Right</div>\n    </div>\n  </html>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\" group=\"Marketing\">\n  <style>\n    & { padding: 16px; border-radius: 8px; background: #f8fafc; }\n  </style>\n  <html>\n    <div>Card text</div>\n  </html>\n</template>"
+  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\" group=\"Marketing\">\n  <style>\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n  </style>\n  <div class=\"grid\">\n    <div>Left</div>\n    <div>Right</div>\n  </div>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\" group=\"Marketing\">\n  <style>\n    & { padding: 16px; border-radius: 8px; background: #f8fafc; }\n  </style>\n  <div>Card text</div>\n</template>"
 }

From 338eb43d1920f2213a751c5719833ebd64ee1f83 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 21:23:16 +0200
Subject: [PATCH 13/21] refactor: simplify grid template parser

---
 .../templates/parse.test.ts                   |  22 ++--
 .../GridBlockTemplates/templates/parse.ts     | 100 +++---------------
 2 files changed, 25 insertions(+), 97 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
index 354927ea..c85636c3 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
@@ -17,11 +17,11 @@ describe('parseRawBlock', () => {
 });
 
 describe('parseTemplateBlock', () => {
-    it('normalizes raw html with a styled root element', () => {
+    it('keeps inline style attributes in html instead of extracting them into css', () => {
         expect(parseTemplateBlock('<div style="padding:12px"><strong>Text</strong></div>')).toEqual(
             {
-                css: 'padding:12px',
-                content: '<strong>Text</strong>',
+                css: '',
+                content: '<div style="padding:12px"><strong>Text</strong></div>',
             },
         );
     });
@@ -64,17 +64,17 @@ describe('parseTemplates', () => {
             id: 'layout',
             title: 'Layout',
             type: 'container',
-            containerCss: 'display:grid;grid-template-columns:1fr 1fr',
+            containerCss: '',
             blocks: [
-                {css: 'padding:8px', content: '<strong>Left</strong>'},
-                {css: 'padding:10px', content: 'Right'},
+                {css: '', content: '<strong>Left</strong>'},
+                {css: '', content: 'Right'},
             ],
         });
         expect(result[1]).toMatchObject({
             id: 'card',
             title: 'Card',
             type: 'block',
-            block: {css: 'padding:12px', content: 'Card text'},
+            block: {css: '', content: '<div style="padding:12px">Card text</div>'},
         });
     });
 
@@ -90,10 +90,10 @@ describe('parseTemplates', () => {
 
         expect(template).toMatchObject({
             type: 'container',
-            containerCss: 'display:grid;gap:12px',
+            containerCss: '',
             blocks: [
-                {css: 'padding:12px', content: 'First'},
-                {css: 'padding:14px', content: '<em>Second</em>'},
+                {css: '', content: 'First'},
+                {css: '', content: '<em>Second</em>'},
             ],
         });
     });
@@ -130,7 +130,7 @@ describe('parseTemplates', () => {
                     css: '',
                     content: '<strong>First</strong>',
                 },
-                {css: 'padding:14px', content: 'Second'},
+                {css: '', content: 'Second'},
             ],
         });
     });
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
index 8bea8053..6e92d5e7 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
@@ -1,6 +1,5 @@
 import {v4 as uuidv4} from 'uuid';
 
-import {inlineToRule} from '../css';
 import type {
     GridBlockBlockTemplate,
     GridBlockContainerTemplate,
@@ -10,7 +9,6 @@ import type {
 } from '../types';
 
 const genId = () => 'grid-block-template-' + uuidv4();
-const htmlTemplateTagName = 'grid-template-html';
 
 const isTemplateType = (value: string | null): value is GridBlockTemplateType =>
     value === 'block' || value === 'container';
@@ -20,9 +18,6 @@ const parseHtml = (value: string): Document | null => {
     return new DOMParser().parseFromString(value, 'text/html');
 };
 
-const getStyle = (element: Element | null) =>
-    element instanceof HTMLElement ? element.getAttribute('style')?.trim() || '' : '';
-
 const joinCss = (...parts: string[]) =>
     parts
         .map((part) => part.trim())
@@ -36,27 +31,12 @@ const normalizeStyleCss = (css: string) =>
         .filter(Boolean)
         .join('\n');
 
-const isElementWithTag = (node: ChildNode, tagName: string): node is Element =>
-    node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === tagName;
-
-const normalizeTemplateHtmlTag = (content: string) =>
-    content
-        .replace(/<\/html\s*>/gi, `</${htmlTemplateTagName}>`)
-        .replace(/<html(\s[^>]*)?>/gi, `<${htmlTemplateTagName}$1>`);
-
 const consumeElements = (elements: Element[]) => {
     elements.forEach((element) => element.remove());
 
     return elements;
 };
 
-const consumeDirectElements = (node: ParentNode, tagName: string) =>
-    consumeElements(
-        Array.from(node.childNodes).filter((child): child is Element =>
-            isElementWithTag(child, tagName),
-        ),
-    );
-
 const consumeStyleCss = (node: ParentNode) =>
     joinCss(
         ...consumeElements(Array.from(node.querySelectorAll('style'))).map((style) =>
@@ -64,15 +44,8 @@ const consumeStyleCss = (node: ParentNode) =>
         ),
     );
 
-const consumeLegacyDirectStyleCss = (node: ParentNode) =>
-    joinCss(
-        ...consumeDirectElements(node, 'style').map((style) =>
-            normalizeStyleCss(style.textContent ?? ''),
-        ),
-    );
-
 const createTemplateFragment = (content: string): DocumentFragment | null => {
-    const doc = parseHtml(`<template>${normalizeTemplateHtmlTag(content)}</template>`);
+    const doc = parseHtml(`<template>${content}</template>`);
     const template = doc?.querySelector('template');
 
     return typeof HTMLTemplateElement !== 'undefined' && template instanceof HTMLTemplateElement
@@ -89,55 +62,20 @@ const getFragmentHtml = (fragment: DocumentFragment) => {
 
 const getTemplateParts = (content: string) => {
     const fragment = createTemplateFragment(content);
-    if (!fragment) return {css: '', hasExplicitParts: false, html: content};
+    if (!fragment) return {css: '', html: content};
 
     const css = consumeStyleCss(fragment);
-    const htmlElements = consumeDirectElements(fragment, htmlTemplateTagName);
-    const hasExplicitParts = Boolean(css || htmlElements.length);
-    const html = htmlElements.length
-        ? htmlElements
-              .map((element) => element.innerHTML.trim())
-              .filter(Boolean)
-              .join('\n')
-        : getFragmentHtml(fragment);
-
-    return {css, hasExplicitParts, html};
-};
+    const html = getFragmentHtml(fragment);
 
-const resolveCss = ({
-    styleCss,
-    inlineCss,
-    inlineSelector,
-}: {
-    styleCss: string;
-    inlineCss: string;
-    inlineSelector?: string;
-}) => {
-    if (!styleCss) return inlineCss;
-
-    return joinCss(styleCss, inlineCss ? inlineToRule(inlineCss, inlineSelector) : '');
+    return {css, html};
 };
 
 export const parseTemplateBlock = (content: string): GridBlockTemplateBlock => {
-    const {css: templateCss, hasExplicitParts, html} = getTemplateParts(content);
-
-    if (hasExplicitParts) {
-        return {css: templateCss, content: html};
-    }
-
-    const doc = parseHtml(html);
-    const root = doc?.body.firstElementChild ?? null;
-
-    if (!root) {
-        return {css: templateCss, content: doc?.body.innerHTML.trim() || html};
-    }
-
-    const rootCss = consumeLegacyDirectStyleCss(root);
-    const inlineCss = getStyle(root);
+    const {css, html} = getTemplateParts(content);
 
     return {
-        css: resolveCss({styleCss: joinCss(templateCss, rootCss), inlineCss}),
-        content: root.innerHTML.trim(),
+        css,
+        content: html,
     };
 };
 
@@ -153,12 +91,10 @@ const parseContainerTemplate = (
     group: string | undefined,
     content: string,
 ): GridBlockContainerTemplate => {
-    const {css: templateCss, html} = getTemplateParts(content);
+    const {css, html} = getTemplateParts(content);
     const doc = parseHtml(html);
     const root = doc?.body.firstElementChild ?? null;
-    const rootCss = root ? consumeLegacyDirectStyleCss(root) : '';
     const children = root ? Array.from(root.children) : [];
-    const styleCss = joinCss(templateCss, rootCss);
 
     return {
         id,
@@ -166,19 +102,11 @@ const parseContainerTemplate = (
         group,
         type: 'container',
         content,
-        containerCss: resolveCss({
-            styleCss,
-            inlineCss: getStyle(root),
-            inlineSelector: '.grid',
-        }),
-        blocks: children.map((child) => {
-            const childStyleCss = consumeLegacyDirectStyleCss(child);
-
-            return {
-                css: resolveCss({styleCss: childStyleCss, inlineCss: getStyle(child)}),
-                content: child.innerHTML.trim(),
-            };
-        }),
+        containerCss: css,
+        blocks: children.map((child) => ({
+            css: '',
+            content: child.innerHTML.trim(),
+        })),
     };
 };
 
@@ -204,7 +132,7 @@ export function parseTemplates(input: string): GridBlockTemplate[] {
     const value = input.trim();
     if (!value) return [];
 
-    const doc = parseHtml(normalizeTemplateHtmlTag(value));
+    const doc = parseHtml(value);
     if (!doc) return [];
 
     return Array.from(doc.querySelectorAll('template')).flatMap((el) => {

From 625bdbefdbdd24d9b10f78d41d8d2830eb10b794 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 22:05:35 +0200
Subject: [PATCH 14/21] feat: improve grid block templates

---
 demo/src/defaults/grid-block-placeholder.svg  |    8 +
 demo/src/defaults/grid-block-templates.ts     | 2819 ++++++++++++++++-
 demo/src/global.d.ts                          |    5 +
 .../GridBlockItem.tsx                         |  120 +-
 .../GridBlockTemplates.scss                   |   21 +
 .../GridBlockTemplatesView.tsx                |   19 +-
 .../GroupedTemplatesMenuItems.tsx             |    2 +-
 .../TemplatesPopup.scss                       |   11 +-
 .../derivedBlockTemplates.test.ts             |  113 +
 .../derivedBlockTemplates.ts                  |  171 +
 .../textEditing.test.ts                       |   83 +
 .../GridBlockTemplatesNodeView/textEditing.ts |  102 +-
 .../src/i18n/grid-block-templates/en.json     |    2 +
 .../src/i18n/grid-block-templates/ru.json     |    2 +
 14 files changed, 3447 insertions(+), 31 deletions(-)
 create mode 100644 demo/src/defaults/grid-block-placeholder.svg
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.test.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.ts
 create mode 100644 packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts

diff --git a/demo/src/defaults/grid-block-placeholder.svg b/demo/src/defaults/grid-block-placeholder.svg
new file mode 100644
index 00000000..9c61f2d4
--- /dev/null
+++ b/demo/src/defaults/grid-block-placeholder.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" fill="none">
+  <rect width="960" height="540" rx="32" fill="#F3F6FB"/>
+  <rect x="64" y="64" width="832" height="412" rx="24" fill="#FFFFFF" stroke="#D8DEE8" stroke-width="2"/>
+  <path d="M190 359L330 219L431 320L507 244L770 359" stroke="#9AA7B8" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="666" cy="168" r="46" fill="#FFD88A"/>
+  <rect x="346" y="389" width="268" height="18" rx="9" fill="#C6D0DE"/>
+  <rect x="402" y="423" width="156" height="14" rx="7" fill="#D8DEE8"/>
+</svg>
diff --git a/demo/src/defaults/grid-block-templates.ts b/demo/src/defaults/grid-block-templates.ts
index bf1b5986..f97c10fc 100644
--- a/demo/src/defaults/grid-block-templates.ts
+++ b/demo/src/defaults/grid-block-templates.ts
@@ -1,3 +1,2818 @@
-import type {GridBlockTemplate} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/templates/index.js';
+import {
+    parseTemplates,
+    type GridBlockTemplate,
+} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/templates/index.js';
 
-export const gridBlockTemplates: GridBlockTemplate[] = [];
+import placeholderImage from './grid-block-placeholder.svg';
+
+const templateMarkup = `<template id="product-landing-page" title="Product landing" type="container" group="Product landing">
+  <style>
+    .grid {
+      display: grid;
+      gap: 24px;
+      max-width: 1120px;
+      margin: 0 auto;
+      padding: 32px 16px;
+    }
+  </style>
+  <div class="grid">
+    <div class="block-1">
+      <h1>Launch faster with a focused product page</h1>
+      <p>Describe the offer, show proof, and give readers one obvious next step.</p>
+      <a class="landing-action" href="#">Start now</a>
+    </div>
+    <div class="block-2">
+      <article><strong>Fast setup</strong><span>Reusable layout and copy blocks.</span></article>
+      <article><strong>Clear proof</strong><span>Metrics, outcomes, and quotes.</span></article>
+      <article><strong>Simple CTA</strong><span>One direct conversion path.</span></article>
+    </div>
+  </div>
+</template>
+
+<template id="product-landing-hero" title="Hero" type="block" group="Product landing">
+  <style>
+    & {
+      padding: 48px;
+      border-radius: 24px;
+      background: #101828;
+      color: #ffffff;
+    }
+
+    h1 {
+      max-width: 760px;
+      margin: 0 0 16px;
+      font-size: 56px;
+      line-height: 110%;
+    }
+
+    p {
+      max-width: 560px;
+      margin: 0 0 28px;
+      color: #d0d5dd;
+      font-size: 20px;
+      line-height: 140%;
+    }
+
+    .landing-action {
+      display: inline-flex;
+      padding: 12px 18px;
+      border-radius: 10px;
+      background: #ffbe5c;
+      color: #101828;
+      font-weight: 600;
+      text-decoration: none;
+    }
+  </style>
+  <h1>Launch faster with a focused product page</h1>
+  <p>Describe the offer, show proof, and give readers one obvious next step.</p>
+  <a class="landing-action" href="#">Start now</a>
+</template>
+
+<template id="product-landing-features" title="Feature cards" type="block" group="Product landing">
+  <style>
+    & {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    article {
+      display: grid;
+      gap: 10px;
+      padding: 22px;
+      border: 1px solid #e4e7ec;
+      border-radius: 16px;
+      background: #ffffff;
+    }
+
+    strong {
+      color: #101828;
+      font-size: 22px;
+      line-height: 120%;
+    }
+
+    span {
+      color: #667085;
+      font-size: 16px;
+      line-height: 140%;
+    }
+  </style>
+  <article><strong>Fast setup</strong><span>Reusable layout and copy blocks.</span></article>
+  <article><strong>Clear proof</strong><span>Metrics, outcomes, and quotes.</span></article>
+  <article><strong>Simple CTA</strong><span>One direct conversion path.</span></article>
+</template>
+
+<template id="internal-kb-page" title="Knowledge base page" type="container" group="Internal knowledge base">
+  <style>
+    .grid {
+      display: grid;
+      grid-template-columns: 280px minmax(0, 1fr);
+      gap: 24px;
+      max-width: 1180px;
+      margin: 0 auto;
+      padding: 24px 16px;
+    }
+  </style>
+  <div class="grid">
+    <div class="block-1">
+      <strong>On this page</strong>
+      <a href="#overview">Overview</a>
+      <a href="#process">Process</a>
+      <a href="#owners">Owners</a>
+    </div>
+    <div class="block-2">
+      <h1>Team knowledge base</h1>
+      <p>Use this page to collect status, instructions, owners, and related links.</p>
+      <section id="overview"><h2>Overview</h2><p>Short context for readers.</p></section>
+      <section id="process"><h2>Process</h2><p>Steps, agreements, and deadlines.</p></section>
+    </div>
+  </div>
+</template>
+
+<template id="internal-kb-sidebar" title="Sidebar nav" type="block" group="Internal knowledge base">
+  <style>
+    & {
+      display: grid;
+      align-content: start;
+      gap: 10px;
+      padding: 18px;
+      border-radius: 16px;
+      background: #f4f7fb;
+    }
+
+    strong {
+      color: #1f2937;
+      font-size: 18px;
+    }
+
+    a {
+      color: #2563eb;
+      text-decoration: none;
+    }
+  </style>
+  <strong>On this page</strong>
+  <a href="#overview">Overview</a>
+  <a href="#process">Process</a>
+  <a href="#owners">Owners</a>
+</template>
+
+<template id="internal-kb-content" title="Content body" type="block" group="Internal knowledge base">
+  <style>
+    & {
+      display: grid;
+      gap: 18px;
+      padding: 28px;
+      border: 1px solid #e5e7eb;
+      border-radius: 18px;
+      background: #ffffff;
+      color: #1f2937;
+    }
+
+    h1,
+    h2,
+    p {
+      margin: 0;
+    }
+
+    h1 {
+      font-size: 40px;
+      line-height: 115%;
+    }
+
+    h2 {
+      font-size: 24px;
+      line-height: 125%;
+    }
+
+    p {
+      color: #4b5563;
+      font-size: 16px;
+      line-height: 150%;
+    }
+  </style>
+  <h1>Team knowledge base</h1>
+  <p>Use this page to collect status, instructions, owners, and related links.</p>
+  <section id="overview"><h2>Overview</h2><p>Short context for readers.</p></section>
+  <section id="process"><h2>Process</h2><p>Steps, agreements, and deadlines.</p></section>
+</template>
+
+<template id="benefits-yandex-hr-page" title="Benefits page" type="container" group="Yandex HR benefits">
+  <style>
+    .grid {
+      display: grid;
+      gap: 48px;
+      width: min(100%, 1280px);
+      margin: 0 auto;
+      padding: 0 16px 45px;
+      box-sizing: border-box;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    img {
+      display: block;
+    }
+  </style>
+  <div class="grid">
+      <div class="block-1">
+        <div class="benefits-hero__content">
+          <div class="benefits-hero__title">Бенефиты</div>
+          <div class="benefits-hero__text">
+            Здесь всё про ДМС, массаж,<br>
+            жилищную программу, скидки<br>
+            и другие преимущества
+          </div>
+        </div>
+      </div>
+      <div class="block-2">
+        <a class="benefits-banner benefits-banner_dms" href="https://wiki.yandex-team.ru/hr/kompensacii/straxovanie/" aria-label="ДМС"></a>
+        <a class="benefits-banner benefits-banner_food" href="https://wiki.yandex-team.ru/hr/kompensacii/novaja-stranica-po-pitaniju01092020/" aria-label="Питание"></a>
+        <a class="benefits-banner benefits-banner_sport" href="https://wiki.yandex-team.ru/hr/kompensacii/sport/" aria-label="Спорт"></a>
+        <a class="benefits-banner benefits-banner_family" href="https://wiki.yandex-team.ru/hr/kompensacii/benefity-dlja-semejj-s-detmi/" aria-label="Семья"></a>
+        <a class="benefits-banner benefits-banner_finance" href="https://wiki.yandex-team.ru/hr/kompensacii/fin/" aria-label="Финансы"></a>
+        <a class="benefits-banner benefits-banner_discounts" href="https://wiki.yandex-team.ru/hr/kompensacii/skidkinew/" aria-label="Скидки"></a>
+      </div>
+      <div class="block-3">
+        <a class="benefits-link" href="https://wiki.yandex-team.ru/HR/LgotyBelarus/" target="_blank">
+          <span>Бенефиты в Беларуси</span>
+          <img src="${placeholderImage}" alt="">
+        </a>
+        <a class="benefits-link" href="https://wiki.yandex-team.ru/hr/kompensacii/vseolgotaxdljahrbp/" target="_blank">
+          <span>Вики для HR-партнеров</span>
+          <img src="${placeholderImage}" alt="">
+        </a>
+      </div>
+      <div class="block-4">
+        <div class="benefits-contact-card">
+          <img src="${placeholderImage}" alt="">
+          <div class="benefits-contact-card__title">Чат в Мессенджере</div>
+          <a class="benefits-contact-card__link" href="https://ya.cc/helpy">robot-helpy</a>
+        </div>
+        <div class="benefits-contact-card">
+          <img src="${placeholderImage}" alt="">
+          <div class="benefits-contact-card__title">Почта</div>
+          <a class="benefits-contact-card__link" href="mailto:helpy@yandex-team.ru" target="_blank">helpy@yandex-team.ru</a>
+        </div>
+        <div class="benefits-contact-card">
+          <img src="${placeholderImage}" alt="">
+          <div class="benefits-contact-card__title">Телефон</div>
+          <div class="benefits-contact-card__text">8 (800) 250-96-39, доб. 444</div>
+        </div>
+        <div class="benefits-contact-card">
+          <img src="${placeholderImage}" alt="">
+          <div class="benefits-contact-card__title">Портал</div>
+          <a class="benefits-contact-card__link" href="https://helpy.yandex-team.ru/" target="_blank">helpy.yandex-team.ru</a>
+        </div>
+      </div>
+      <div class="block-5">
+        <img class="benefits-footer-logo" src="${placeholderImage}" alt="YaTeam">
+      </div>
+  </div>
+</template>
+
+<template id="benefits-yandex-hr-hero" title="Hero" type="block" group="Yandex HR benefits">
+  <style>
+    & {
+      display: flex;
+      min-height: 337px;
+      padding: 24px;
+      align-items: center;
+      border-radius: 24px;
+      background: url("${placeholderImage}") no-repeat center / contain;
+      box-sizing: border-box;
+    }
+
+    .benefits-hero__title {
+      margin-bottom: 5px;
+      color: #222a3a;
+      font-size: 64px;
+      font-weight: 600;
+      line-height: 110%;
+    }
+
+    .benefits-hero__text {
+      color: #222a3a;
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 140%;
+    }
+  </style>
+  <div class="benefits-hero__content">
+      <div class="benefits-hero__title">Бенефиты</div>
+      <div class="benefits-hero__text">
+        Здесь всё про ДМС, массаж,<br>
+        жилищную программу, скидки<br>
+        и другие преимущества
+      </div>
+  </div>
+</template>
+
+<template id="benefits-yandex-hr-banners" title="Banner grid" type="block" group="Yandex HR benefits">
+  <style>
+    & {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+
+    .benefits-banner {
+      display: block;
+      height: 310px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      box-sizing: border-box;
+    }
+
+    .benefits-banner_dms {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_dms:hover {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_food {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_food:hover {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_sport {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_sport:hover {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_family {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_family:hover {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_finance {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_finance:hover {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_discounts {
+      background-image: url("${placeholderImage}");
+    }
+
+    .benefits-banner_discounts:hover {
+      background-image: url("${placeholderImage}");
+    }
+  </style>
+  <a class="benefits-banner benefits-banner_dms" href="https://wiki.yandex-team.ru/hr/kompensacii/straxovanie/" aria-label="ДМС"></a>
+    <a class="benefits-banner benefits-banner_food" href="https://wiki.yandex-team.ru/hr/kompensacii/novaja-stranica-po-pitaniju01092020/" aria-label="Питание"></a>
+    <a class="benefits-banner benefits-banner_sport" href="https://wiki.yandex-team.ru/hr/kompensacii/sport/" aria-label="Спорт"></a>
+    <a class="benefits-banner benefits-banner_family" href="https://wiki.yandex-team.ru/hr/kompensacii/benefity-dlja-semejj-s-detmi/" aria-label="Семья"></a>
+    <a class="benefits-banner benefits-banner_finance" href="https://wiki.yandex-team.ru/hr/kompensacii/fin/" aria-label="Финансы"></a>
+  <a class="benefits-banner benefits-banner_discounts" href="https://wiki.yandex-team.ru/hr/kompensacii/skidkinew/" aria-label="Скидки"></a>
+</template>
+
+<template id="benefits-yandex-hr-links" title="Region and HR links" type="block" group="Yandex HR benefits">
+  <style>
+    & {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+
+    .benefits-link {
+      display: flex;
+      width: 100%;
+      padding: 20px 24px;
+      justify-content: space-between;
+      align-items: center;
+      border: 1px solid #cfcddd;
+      border-radius: 64px;
+      box-sizing: border-box;
+      color: #222a3a;
+      font-size: 32px;
+      font-weight: 500;
+      line-height: 120%;
+    }
+
+    .benefits-link img {
+      height: 40px;
+    }
+  </style>
+  <a class="benefits-link" href="https://wiki.yandex-team.ru/HR/LgotyBelarus/" target="_blank">
+      <span>Бенефиты в Беларуси</span>
+      <img src="${placeholderImage}" alt="">
+    </a>
+    <a class="benefits-link" href="https://wiki.yandex-team.ru/hr/kompensacii/vseolgotaxdljahrbp/" target="_blank">
+      <span>Вики для HR-партнеров</span>
+      <img src="${placeholderImage}" alt="">
+  </a>
+</template>
+
+<template id="benefits-yandex-hr-contacts" title="Contacts" type="block" group="Yandex HR benefits">
+  <style>
+    & {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 12px;
+    }
+
+    .benefits-contact-card {
+      display: flex;
+      height: 185px;
+      padding: 24px;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start;
+      border-radius: 24px;
+      background-color: #f5f4fd;
+      box-sizing: border-box;
+    }
+
+    .benefits-contact-card img {
+      height: 32px;
+    }
+
+    .benefits-contact-card__title {
+      color: #222a3a;
+      font-size: 24px;
+      font-weight: 500;
+      line-height: 120%;
+    }
+
+    .benefits-contact-card__link,
+    .benefits-contact-card__text {
+      color: #575e6e;
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 140%;
+    }
+  </style>
+  <div class="benefits-contact-card">
+      <img src="${placeholderImage}" alt="">
+      <div class="benefits-contact-card__title">Чат в Мессенджере</div>
+      <a class="benefits-contact-card__link" href="https://ya.cc/helpy">robot-helpy</a>
+    </div>
+    <div class="benefits-contact-card">
+      <img src="${placeholderImage}" alt="">
+      <div class="benefits-contact-card__title">Почта</div>
+      <a class="benefits-contact-card__link" href="mailto:helpy@yandex-team.ru" target="_blank">helpy@yandex-team.ru</a>
+    </div>
+    <div class="benefits-contact-card">
+      <img src="${placeholderImage}" alt="">
+      <div class="benefits-contact-card__title">Телефон</div>
+      <div class="benefits-contact-card__text">8 (800) 250-96-39, доб. 444</div>
+    </div>
+    <div class="benefits-contact-card">
+      <img src="${placeholderImage}" alt="">
+      <div class="benefits-contact-card__title">Портал</div>
+      <a class="benefits-contact-card__link" href="https://helpy.yandex-team.ru/" target="_blank">helpy.yandex-team.ru</a>
+  </div>
+</template>
+
+<template id="gravity-ui-samples-landing-page" title="UI samples landing" type="container" group="Gravity UI samples">
+  <style>
+    .grid {
+      display: grid;
+      gap: 24px;
+      max-width: 1180px;
+      margin: 0 auto;
+      padding: 32px 16px;
+      box-sizing: border-box;
+      color: #1d2633;
+      font-family: var(--g-font-family-sans, "YS Text", Arial, sans-serif);
+    }
+
+    .grid * {
+      box-sizing: border-box;
+    }
+
+    .grid a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .grid button,
+    .grid input {
+      font: inherit;
+    }
+
+    .block-1 {
+      display: grid;
+      grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
+      gap: 24px;
+      min-height: 520px;
+      padding: 32px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #f7f9fc;
+    }
+
+    .block-1 .guis-hero__copy {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 20px;
+      padding: 16px;
+    }
+
+    .block-1 .guis-kicker {
+      width: fit-content;
+      padding: 6px 10px;
+      border: 1px solid #d8deea;
+      border-radius: 999px;
+      background: #ffffff;
+      color: #4b596c;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 16px;
+    }
+
+    .block-1 h1,
+    .block-1 p {
+      margin: 0;
+    }
+
+    .block-1 h1 {
+      max-width: 520px;
+      color: #111827;
+      font-size: 54px;
+      font-weight: 600;
+      line-height: 1.05;
+    }
+
+    .block-1 p {
+      max-width: 460px;
+      color: #526071;
+      font-size: 18px;
+      line-height: 1.5;
+    }
+
+    .block-1 .guis-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding-top: 4px;
+    }
+
+    .block-1 .guis-button {
+      display: inline-flex;
+      min-height: 40px;
+      padding: 0 16px;
+      align-items: center;
+      border: 1px solid #d8deea;
+      border-radius: 8px;
+      background: #ffffff;
+      color: #1d2633;
+      font-size: 15px;
+      font-weight: 500;
+    }
+
+    .block-1 .guis-button_primary {
+      border-color: #111827;
+      background: #111827;
+      color: #ffffff;
+    }
+
+    .block-1 .guis-hero__panel {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+    }
+
+    .block-1 .guis-window {
+      overflow: hidden;
+      width: 100%;
+      border: 1px solid #d8deea;
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 18px 50px rgba(34, 43, 60, 0.14);
+    }
+
+    .block-1 .guis-window__bar {
+      display: flex;
+      height: 40px;
+      padding: 0 14px;
+      align-items: center;
+      gap: 7px;
+      border-bottom: 1px solid #edf0f6;
+      color: #657185;
+      font-size: 13px;
+    }
+
+    .block-1 .guis-window__bar span {
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background: #d8deea;
+    }
+
+    .block-1 .guis-window__bar strong {
+      margin-left: 8px;
+      font-weight: 500;
+    }
+
+    .block-1 .guis-app {
+      display: grid;
+      grid-template-columns: 160px minmax(0, 1fr);
+      min-height: 360px;
+      background: #ffffff;
+    }
+
+    .block-1 .guis-sidebar {
+      display: grid;
+      align-content: start;
+      gap: 18px;
+      padding: 18px;
+      border-right: 1px solid #edf0f6;
+      background: #f8fafd;
+    }
+
+    .block-1 .guis-logo {
+      display: grid;
+      width: 32px;
+      height: 32px;
+      place-items: center;
+      border-radius: 8px;
+      background: #ffbe5c;
+      color: #111827;
+      font-weight: 700;
+    }
+
+    .block-1 nav {
+      display: grid;
+      gap: 8px;
+    }
+
+    .block-1 nav span {
+      padding: 8px 10px;
+      border-radius: 8px;
+      color: #657185;
+      font-size: 13px;
+    }
+
+    .block-1 nav .active {
+      background: #111827;
+      color: #ffffff;
+    }
+
+    .block-1 .guis-main {
+      display: grid;
+      gap: 16px;
+      align-content: start;
+      padding: 20px;
+    }
+
+    .block-1 .guis-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .block-1 .guis-toolbar strong {
+      color: #111827;
+      font-size: 18px;
+    }
+
+    .block-1 .guis-toolbar button {
+      height: 32px;
+      padding: 0 12px;
+      border: 1px solid #d8deea;
+      border-radius: 8px;
+      background: #ffffff;
+      color: #1d2633;
+    }
+
+    .block-1 .guis-metrics {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .block-1 .guis-metrics article {
+      display: grid;
+      gap: 6px;
+      padding: 14px;
+      border: 1px solid #edf0f6;
+      border-radius: 12px;
+      background: #ffffff;
+    }
+
+    .block-1 .guis-metrics span,
+    .block-1 .guis-metrics em {
+      color: #657185;
+      font-size: 12px;
+      font-style: normal;
+    }
+
+    .block-1 .guis-metrics strong {
+      color: #111827;
+      font-size: 22px;
+      line-height: 1;
+    }
+
+    .block-1 .guis-chart {
+      display: flex;
+      height: 120px;
+      padding: 18px;
+      align-items: end;
+      gap: 10px;
+      border: 1px solid #edf0f6;
+      border-radius: 12px;
+      background: linear-gradient(180deg, #ffffff, #f8fafd);
+    }
+
+    .block-1 .guis-chart i {
+      flex: 1;
+      border-radius: 8px 8px 3px 3px;
+      background: #6b8cff;
+    }
+
+    .block-1 .guis-chart i:nth-child(1) { height: 34%; }
+    .block-1 .guis-chart i:nth-child(2) { height: 56%; }
+    .block-1 .guis-chart i:nth-child(3) { height: 42%; }
+    .block-1 .guis-chart i:nth-child(4) { height: 72%; }
+    .block-1 .guis-chart i:nth-child(5) { height: 64%; }
+    .block-1 .guis-chart i:nth-child(6) { height: 88%; }
+    .block-1 .guis-chart i:nth-child(7) { height: 76%; }
+
+    .block-2 {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    .block-2 article {
+      display: grid;
+      gap: 12px;
+      min-height: 190px;
+      padding: 22px;
+      align-content: start;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 10px 28px rgba(34, 43, 60, 0.06);
+    }
+
+    .block-2 span {
+      width: fit-content;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: #f2f5fa;
+      color: #657185;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .block-2 h2,
+    .block-2 p,
+    .block-3 h2,
+    .block-4 h2 {
+      margin: 0;
+    }
+
+    .block-2 h2 {
+      color: #111827;
+      font-size: 24px;
+      line-height: 1.15;
+    }
+
+    .block-2 p {
+      color: #526071;
+      font-size: 15px;
+      line-height: 1.45;
+    }
+
+    .block-3,
+    .block-4 {
+      display: grid;
+      gap: 18px;
+      padding: 28px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+    }
+
+    .block-4 {
+      overflow-x: auto;
+    }
+
+    .guis-section-heading {
+      display: grid;
+      gap: 8px;
+    }
+
+    .guis-section-heading span {
+      color: #6b8cff;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .guis-section-heading h2 {
+      color: #111827;
+      font-size: 32px;
+      line-height: 1.15;
+    }
+
+    .guis-dashboard {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 14px;
+    }
+
+    .guis-dashboard article {
+      display: grid;
+      gap: 12px;
+      padding: 18px;
+      border: 1px solid #edf0f6;
+      border-radius: 14px;
+      background: #f8fafd;
+    }
+
+    .guis-dashboard .wide {
+      grid-column: 1 / -1;
+      background: #ffffff;
+    }
+
+    .guis-dashboard span {
+      color: #657185;
+      font-size: 13px;
+    }
+
+    .guis-dashboard strong {
+      color: #111827;
+      font-size: 30px;
+      line-height: 1;
+    }
+
+    .guis-progress {
+      height: 8px;
+      overflow: hidden;
+      border-radius: 999px;
+      background: #e7ecf5;
+    }
+
+    .guis-progress i {
+      display: block;
+      width: 72%;
+      height: 100%;
+      border-radius: inherit;
+      background: #6b8cff;
+    }
+
+    .guis-activity {
+      display: grid;
+      gap: 10px;
+    }
+
+    .guis-activity p {
+      display: flex;
+      margin: 0;
+      align-items: center;
+      gap: 10px;
+      color: #1d2633;
+      font-size: 14px;
+    }
+
+    .guis-activity b {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #30aa6e;
+    }
+
+    .guis-activity em {
+      margin-left: auto;
+      color: #657185;
+      font-style: normal;
+    }
+
+    .guis-table {
+      width: 100%;
+      min-width: 620px;
+      border-collapse: collapse;
+      border: 1px solid #edf0f6;
+      border-radius: 12px;
+      overflow: hidden;
+      color: #1d2633;
+      font-size: 14px;
+      white-space: nowrap;
+    }
+
+    .guis-table th,
+    .guis-table td {
+      padding: 14px 16px;
+      border-bottom: 1px solid #edf0f6;
+      text-align: left;
+    }
+
+    .guis-table th {
+      background: #f8fafd;
+      color: #657185;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .guis-table tr:last-child td {
+      border-bottom: 0;
+    }
+
+    .guis-table .ok,
+    .guis-table .warn {
+      display: inline-flex;
+      padding: 4px 8px;
+      border-radius: 999px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .guis-table .ok {
+      background: #e8f7ef;
+      color: #147a47;
+    }
+
+    .guis-table .warn {
+      background: #fff4d7;
+      color: #8a5a00;
+    }
+  </style>
+  <div class="grid">
+    <div class="block-1">
+      <div class="guis-hero__copy">
+        <div class="guis-kicker">UI samples</div>
+        <h1>Build product pages around real interface states</h1>
+        <p>Show dashboards, tables, forms, and cards in a framed Gravity UI preview instead of abstract screenshots.</p>
+        <div class="guis-actions">
+          <a class="guis-button guis-button_primary" href="#">Explore samples</a>
+          <a class="guis-button" href="#">Open docs</a>
+        </div>
+      </div>
+      <div class="guis-hero__panel">
+        <div class="guis-window">
+          <div class="guis-window__bar">
+            <span></span><span></span><span></span>
+            <strong>Cloud console</strong>
+          </div>
+          <div class="guis-app">
+            <aside class="guis-sidebar">
+              <div class="guis-logo">G</div>
+              <nav>
+                <span class="active">Overview</span>
+                <span>Dashboards</span>
+                <span>Tables</span>
+                <span>Forms</span>
+              </nav>
+            </aside>
+            <main class="guis-main">
+              <div class="guis-toolbar">
+                <strong>Service health</strong>
+                <button>Deploy</button>
+              </div>
+              <div class="guis-metrics">
+                <article><span>Requests</span><strong>12.8M</strong><em>+18%</em></article>
+                <article><span>Latency</span><strong>84 ms</strong><em>stable</em></article>
+                <article><span>Errors</span><strong>0.03%</strong><em>low</em></article>
+              </div>
+              <div class="guis-chart" aria-hidden="true">
+                <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="block-2">
+      <article>
+        <span>01</span>
+        <h2>Dashboard previews</h2>
+        <p>Use cards, charts, and status indicators to make operational products feel concrete.</p>
+      </article>
+      <article>
+        <span>02</span>
+        <h2>Structured tables</h2>
+        <p>Dense but readable data blocks work well for analytics, billing, monitoring, and inventory pages.</p>
+      </article>
+      <article>
+        <span>03</span>
+        <h2>Editable forms</h2>
+        <p>Compact fields, toggles, and action rows help explain workflow depth without long copy.</p>
+      </article>
+    </div>
+    <div class="block-3">
+      <div class="guis-section-heading">
+        <span>Dashboard</span>
+        <h2>Metrics and activity in one surface</h2>
+      </div>
+      <div class="guis-dashboard">
+        <article><span>Compute</span><strong>74%</strong><div class="guis-progress"><i></i></div></article>
+        <article><span>Storage</span><strong>18.4 TB</strong><div class="guis-progress"><i></i></div></article>
+        <article><span>Network</span><strong>912 Gb</strong><div class="guis-progress"><i></i></div></article>
+        <article class="wide">
+          <span>Release activity</span>
+          <div class="guis-activity">
+            <p><b></b> API gateway updated <em>2 min ago</em></p>
+            <p><b></b> Billing export completed <em>18 min ago</em></p>
+            <p><b></b> New alert policy published <em>1 h ago</em></p>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="block-4">
+      <div class="guis-section-heading">
+        <span>Data table</span>
+        <h2>Readable density for production data</h2>
+      </div>
+      <table class="guis-table">
+        <thead>
+          <tr><th>Service</th><th>Status</th><th>Owner</th><th>Cost</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>Compute pool</td><td><span class="ok">Healthy</span></td><td>Platform</td><td>$8,420</td></tr>
+          <tr><td>Analytics storage</td><td><span class="warn">Review</span></td><td>Data</td><td>$3,180</td></tr>
+          <tr><td>Notification API</td><td><span class="ok">Healthy</span></td><td>Core</td><td>$920</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<template id="gravity-ui-samples-hero" title="Hero app preview" type="block" group="Gravity UI samples">
+  <style>
+    & {
+      display: grid;
+      grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
+      gap: 24px;
+      min-height: 520px;
+      padding: 32px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #f7f9fc;
+    }
+
+    .guis-hero__copy {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 20px;
+      padding: 16px;
+    }
+
+    .guis-kicker {
+      width: fit-content;
+      padding: 6px 10px;
+      border: 1px solid #d8deea;
+      border-radius: 999px;
+      background: #ffffff;
+      color: #4b596c;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 16px;
+    }
+
+    h1,
+    p {
+      margin: 0;
+    }
+
+    h1 {
+      max-width: 520px;
+      color: #111827;
+      font-size: 54px;
+      font-weight: 600;
+      line-height: 1.05;
+    }
+
+    p {
+      max-width: 460px;
+      color: #526071;
+      font-size: 18px;
+      line-height: 1.5;
+    }
+
+    .guis-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding-top: 4px;
+    }
+
+    .guis-button {
+      display: inline-flex;
+      min-height: 40px;
+      padding: 0 16px;
+      align-items: center;
+      border: 1px solid #d8deea;
+      border-radius: 8px;
+      background: #ffffff;
+      color: #1d2633;
+      font-size: 15px;
+      font-weight: 500;
+    }
+
+    .guis-button_primary {
+      border-color: #111827;
+      background: #111827;
+      color: #ffffff;
+    }
+
+    .guis-hero__panel {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+    }
+
+    .guis-window {
+      overflow: hidden;
+      width: 100%;
+      border: 1px solid #d8deea;
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 18px 50px rgba(34, 43, 60, 0.14);
+    }
+
+    .guis-window__bar {
+      display: flex;
+      height: 40px;
+      padding: 0 14px;
+      align-items: center;
+      gap: 7px;
+      border-bottom: 1px solid #edf0f6;
+      color: #657185;
+      font-size: 13px;
+    }
+
+    .guis-window__bar span {
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background: #d8deea;
+    }
+
+    .guis-window__bar strong {
+      margin-left: 8px;
+      font-weight: 500;
+    }
+
+    .guis-app {
+      display: grid;
+      grid-template-columns: 160px minmax(0, 1fr);
+      min-height: 360px;
+      background: #ffffff;
+    }
+
+    .guis-sidebar {
+      display: grid;
+      align-content: start;
+      gap: 18px;
+      padding: 18px;
+      border-right: 1px solid #edf0f6;
+      background: #f8fafd;
+    }
+
+    .guis-logo {
+      display: grid;
+      width: 32px;
+      height: 32px;
+      place-items: center;
+      border-radius: 8px;
+      background: #ffbe5c;
+      color: #111827;
+      font-weight: 700;
+    }
+
+    nav {
+      display: grid;
+      gap: 8px;
+    }
+
+    nav span {
+      padding: 8px 10px;
+      border-radius: 8px;
+      color: #657185;
+      font-size: 13px;
+    }
+
+    nav .active {
+      background: #111827;
+      color: #ffffff;
+    }
+
+    .guis-main {
+      display: grid;
+      gap: 16px;
+      align-content: start;
+      padding: 20px;
+    }
+
+    .guis-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .guis-toolbar strong {
+      color: #111827;
+      font-size: 18px;
+    }
+
+    .guis-toolbar button {
+      height: 32px;
+      padding: 0 12px;
+      border: 1px solid #d8deea;
+      border-radius: 8px;
+      background: #ffffff;
+      color: #1d2633;
+    }
+
+    .guis-metrics {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .guis-metrics article {
+      display: grid;
+      gap: 6px;
+      padding: 14px;
+      border: 1px solid #edf0f6;
+      border-radius: 12px;
+      background: #ffffff;
+    }
+
+    .guis-metrics span,
+    .guis-metrics em {
+      color: #657185;
+      font-size: 12px;
+      font-style: normal;
+    }
+
+    .guis-metrics strong {
+      color: #111827;
+      font-size: 22px;
+      line-height: 1;
+    }
+
+    .guis-chart {
+      display: flex;
+      height: 120px;
+      padding: 18px;
+      align-items: end;
+      gap: 10px;
+      border: 1px solid #edf0f6;
+      border-radius: 12px;
+      background: linear-gradient(180deg, #ffffff, #f8fafd);
+    }
+
+    .guis-chart i {
+      flex: 1;
+      border-radius: 8px 8px 3px 3px;
+      background: #6b8cff;
+    }
+
+    .guis-chart i:nth-child(1) {
+      height: 34%;
+    }
+
+    .guis-chart i:nth-child(2) {
+      height: 56%;
+    }
+
+    .guis-chart i:nth-child(3) {
+      height: 42%;
+    }
+
+    .guis-chart i:nth-child(4) {
+      height: 72%;
+    }
+
+    .guis-chart i:nth-child(5) {
+      height: 64%;
+    }
+
+    .guis-chart i:nth-child(6) {
+      height: 88%;
+    }
+
+    .guis-chart i:nth-child(7) {
+      height: 76%;
+    }
+  </style>
+  <div class="guis-hero__copy">
+    <div class="guis-kicker">UI samples</div>
+    <h1>Build product pages around real interface states</h1>
+    <p>Show dashboards, tables, forms, and cards in a framed Gravity UI preview instead of abstract screenshots.</p>
+    <div class="guis-actions">
+      <a class="guis-button guis-button_primary" href="#">Explore samples</a>
+      <a class="guis-button" href="#">Open docs</a>
+    </div>
+  </div>
+  <div class="guis-hero__panel">
+    <div class="guis-window">
+      <div class="guis-window__bar">
+        <span></span><span></span><span></span>
+        <strong>Cloud console</strong>
+      </div>
+      <div class="guis-app">
+        <aside class="guis-sidebar">
+          <div class="guis-logo">G</div>
+          <nav>
+            <span class="active">Overview</span>
+            <span>Dashboards</span>
+            <span>Tables</span>
+            <span>Forms</span>
+          </nav>
+        </aside>
+        <main class="guis-main">
+          <div class="guis-toolbar">
+            <strong>Service health</strong>
+            <button>Deploy</button>
+          </div>
+          <div class="guis-metrics">
+            <article><span>Requests</span><strong>12.8M</strong><em>+18%</em></article>
+            <article><span>Latency</span><strong>84 ms</strong><em>stable</em></article>
+            <article><span>Errors</span><strong>0.03%</strong><em>low</em></article>
+          </div>
+          <div class="guis-chart" aria-hidden="true">
+            <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="gravity-ui-samples-cards" title="Sample cards" type="block" group="Gravity UI samples">
+  <style>
+    & {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    article {
+      display: grid;
+      gap: 12px;
+      min-height: 190px;
+      padding: 22px;
+      align-content: start;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 10px 28px rgba(34, 43, 60, 0.06);
+    }
+
+    span {
+      width: fit-content;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: #f2f5fa;
+      color: #657185;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    h2,
+    p {
+      margin: 0;
+    }
+
+    h2 {
+      color: #111827;
+      font-size: 24px;
+      line-height: 1.15;
+    }
+
+    p {
+      color: #526071;
+      font-size: 15px;
+      line-height: 1.45;
+    }
+  </style>
+  <article>
+    <span>01</span>
+    <h2>Dashboard previews</h2>
+    <p>Use cards, charts, and status indicators to make operational products feel concrete.</p>
+  </article>
+  <article>
+    <span>02</span>
+    <h2>Structured tables</h2>
+    <p>Dense but readable data blocks work well for analytics, billing, monitoring, and inventory pages.</p>
+  </article>
+  <article>
+    <span>03</span>
+    <h2>Editable forms</h2>
+    <p>Compact fields, toggles, and action rows help explain workflow depth without long copy.</p>
+  </article>
+</template>
+
+<template id="gravity-ui-samples-dashboard" title="Dashboard section" type="block" group="Gravity UI samples">
+  <style>
+    & {
+      display: grid;
+      gap: 18px;
+      padding: 28px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+    }
+
+    .guis-section-heading {
+      display: grid;
+      gap: 8px;
+    }
+
+    .guis-section-heading span {
+      color: #6b8cff;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .guis-section-heading h2 {
+      margin: 0;
+      color: #111827;
+      font-size: 32px;
+      line-height: 1.15;
+    }
+
+    .guis-dashboard {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 14px;
+    }
+
+    .guis-dashboard article {
+      display: grid;
+      gap: 12px;
+      padding: 18px;
+      border: 1px solid #edf0f6;
+      border-radius: 14px;
+      background: #f8fafd;
+    }
+
+    .guis-dashboard .wide {
+      grid-column: 1 / -1;
+      background: #ffffff;
+    }
+
+    .guis-dashboard span {
+      color: #657185;
+      font-size: 13px;
+    }
+
+    .guis-dashboard strong {
+      color: #111827;
+      font-size: 30px;
+      line-height: 1;
+    }
+
+    .guis-progress {
+      height: 8px;
+      overflow: hidden;
+      border-radius: 999px;
+      background: #e7ecf5;
+    }
+
+    .guis-progress i {
+      display: block;
+      width: 72%;
+      height: 100%;
+      border-radius: inherit;
+      background: #6b8cff;
+    }
+
+    .guis-activity {
+      display: grid;
+      gap: 10px;
+    }
+
+    .guis-activity p {
+      display: flex;
+      margin: 0;
+      align-items: center;
+      gap: 10px;
+      color: #1d2633;
+      font-size: 14px;
+    }
+
+    .guis-activity b {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #30aa6e;
+    }
+
+    .guis-activity em {
+      margin-left: auto;
+      color: #657185;
+      font-style: normal;
+    }
+  </style>
+  <div class="guis-section-heading">
+    <span>Dashboard</span>
+    <h2>Metrics and activity in one surface</h2>
+  </div>
+  <div class="guis-dashboard">
+    <article><span>Compute</span><strong>74%</strong><div class="guis-progress"><i></i></div></article>
+    <article><span>Storage</span><strong>18.4 TB</strong><div class="guis-progress"><i></i></div></article>
+    <article><span>Network</span><strong>912 Gb</strong><div class="guis-progress"><i></i></div></article>
+    <article class="wide">
+      <span>Release activity</span>
+      <div class="guis-activity">
+        <p><b></b> API gateway updated <em>2 min ago</em></p>
+        <p><b></b> Billing export completed <em>18 min ago</em></p>
+        <p><b></b> New alert policy published <em>1 h ago</em></p>
+      </div>
+    </article>
+  </div>
+</template>
+
+<template id="gravity-ui-samples-table" title="Data table section" type="block" group="Gravity UI samples">
+  <style>
+    & {
+      display: grid;
+      gap: 18px;
+      padding: 28px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+      overflow-x: auto;
+    }
+
+    .guis-section-heading {
+      display: grid;
+      gap: 8px;
+    }
+
+    .guis-section-heading span {
+      color: #6b8cff;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .guis-section-heading h2 {
+      margin: 0;
+      color: #111827;
+      font-size: 32px;
+      line-height: 1.15;
+    }
+
+    .guis-table {
+      width: 100%;
+      min-width: 620px;
+      border-collapse: collapse;
+      border: 1px solid #edf0f6;
+      border-radius: 12px;
+      overflow: hidden;
+      color: #1d2633;
+      font-size: 14px;
+      white-space: nowrap;
+    }
+
+    th,
+    td {
+      padding: 14px 16px;
+      border-bottom: 1px solid #edf0f6;
+      text-align: left;
+    }
+
+    th {
+      background: #f8fafd;
+      color: #657185;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    tr:last-child td {
+      border-bottom: 0;
+    }
+
+    .ok,
+    .warn {
+      display: inline-flex;
+      padding: 4px 8px;
+      border-radius: 999px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .ok {
+      background: #e8f7ef;
+      color: #147a47;
+    }
+
+    .warn {
+      background: #fff4d7;
+      color: #8a5a00;
+    }
+  </style>
+  <div class="guis-section-heading">
+    <span>Data table</span>
+    <h2>Readable density for production data</h2>
+  </div>
+  <table class="guis-table">
+    <thead>
+      <tr><th>Service</th><th>Status</th><th>Owner</th><th>Cost</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>Compute pool</td><td><span class="ok">Healthy</span></td><td>Platform</td><td>$8,420</td></tr>
+      <tr><td>Analytics storage</td><td><span class="warn">Review</span></td><td>Data</td><td>$3,180</td></tr>
+      <tr><td>Notification API</td><td><span class="ok">Healthy</span></td><td>Core</td><td>$920</td></tr>
+    </tbody>
+  </table>
+</template>
+
+<template id="gravity-ui-osn-preview-page" title="OSN landing preview" type="container" group="Gravity UI OSN">
+  <style>
+    .grid {
+      display: grid;
+      gap: 28px;
+      max-width: 1180px;
+      margin: 0 auto;
+      padding: 32px 16px;
+      box-sizing: border-box;
+      color: #1d2633;
+      font-family: var(--g-font-family-sans, "YS Text", Arial, sans-serif);
+    }
+
+    .grid * {
+      box-sizing: border-box;
+    }
+
+    .grid a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .block-1,
+    .block-2,
+    .block-3,
+    .block-4,
+    .block-5,
+    .block-6 {
+      min-width: 0;
+    }
+
+    .block-1 {
+      overflow: hidden;
+      min-height: 760px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 18px 56px rgba(34, 43, 60, 0.1);
+    }
+
+    .osn-actionbar {
+      display: flex;
+      min-height: 44px;
+      padding: 0 16px;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #edf0f6;
+      background: #ffffff;
+      color: #657185;
+      font-size: 13px;
+    }
+
+    .osn-breadcrumbs {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .osn-breadcrumbs span + span::before {
+      content: "/";
+      margin-right: 8px;
+      color: #a8b1c1;
+    }
+
+    .osn-actionbar__actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .osn-icon-button,
+    .osn-theme-switch {
+      display: grid;
+      place-items: center;
+      border: 1px solid #dfe4ee;
+      border-radius: 8px;
+      background: #ffffff;
+      color: #4b596c;
+      font-size: 12px;
+    }
+
+    .osn-icon-button {
+      width: 28px;
+      height: 28px;
+    }
+
+    .osn-theme-switch {
+      height: 28px;
+      padding: 0 10px;
+    }
+
+    .osn-page {
+      overflow: auto;
+      height: 716px;
+      background: #f6f8fb;
+    }
+
+    .osn-nav {
+      display: flex;
+      min-height: 72px;
+      padding: 0 40px;
+      align-items: center;
+      justify-content: space-between;
+      background: #ffffff;
+    }
+
+    .osn-logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: #111827;
+      font-weight: 700;
+    }
+
+    .osn-logo img {
+      width: 30px;
+      height: 30px;
+    }
+
+    .osn-nav__links {
+      display: flex;
+      gap: 26px;
+      color: #4b596c;
+      font-size: 15px;
+    }
+
+    .osn-lang {
+      padding: 7px 10px;
+      border: 1px solid #dfe4ee;
+      border-radius: 8px;
+      color: #4b596c;
+      font-size: 14px;
+    }
+
+    .osn-hero {
+      display: grid;
+      grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
+      gap: 40px;
+      min-height: 440px;
+      padding: 68px 40px 58px;
+      align-items: center;
+      background: #f5f7fb;
+    }
+
+    .osn-hero__copy {
+      display: grid;
+      gap: 22px;
+      align-content: center;
+    }
+
+    .osn-label {
+      width: fit-content;
+      padding: 6px 10px;
+      border-radius: 999px;
+      background: #ffffff;
+      color: #657185;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .osn-hero h1,
+    .osn-hero p,
+    .osn-section-heading h2,
+    .osn-section-heading p {
+      margin: 0;
+    }
+
+    .osn-hero h1 {
+      color: #111827;
+      font-size: 64px;
+      font-weight: 700;
+      line-height: 1;
+      letter-spacing: 0;
+    }
+
+    .osn-hero p {
+      max-width: 520px;
+      color: #526071;
+      font-size: 18px;
+      line-height: 1.55;
+    }
+
+    .osn-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .osn-button {
+      display: inline-flex;
+      min-height: 42px;
+      padding: 0 16px;
+      align-items: center;
+      border: 1px solid #d8deea;
+      border-radius: 8px;
+      background: #ffffff;
+      color: #111827;
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .osn-button_primary {
+      border-color: #111827;
+      background: #111827;
+      color: #ffffff;
+    }
+
+    .osn-hero__image {
+      display: grid;
+      place-items: center;
+      min-height: 300px;
+      padding: 24px;
+      border: 1px solid #dfe4ee;
+      border-radius: 24px;
+      background: #ffffff;
+    }
+
+    .osn-hero__image img {
+      display: block;
+      max-width: 100%;
+      max-height: 320px;
+    }
+
+    .block-2,
+    .block-4,
+    .block-5 {
+      display: grid;
+      gap: 22px;
+      padding: 34px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+    }
+
+    .osn-section-heading {
+      display: grid;
+      gap: 10px;
+      max-width: 760px;
+    }
+
+    .osn-section-heading h2 {
+      color: #111827;
+      font-size: 42px;
+      font-weight: 700;
+      line-height: 1.12;
+      letter-spacing: 0;
+    }
+
+    .osn-section-heading p {
+      color: #526071;
+      font-size: 17px;
+      line-height: 1.5;
+    }
+
+    .osn-features {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    .osn-feature {
+      display: grid;
+      gap: 16px;
+      min-height: 260px;
+      padding: 24px;
+      align-content: start;
+      border: 1px solid #edf0f6;
+      border-radius: 16px;
+      background: #f8fafd;
+    }
+
+    .osn-feature img {
+      width: 42px;
+      height: 42px;
+    }
+
+    .osn-feature h3,
+    .osn-feature p,
+    .osn-card h3,
+    .osn-card p,
+    .osn-timeline-card h3,
+    .osn-timeline-card p {
+      margin: 0;
+    }
+
+    .osn-feature h3 {
+      color: #111827;
+      font-size: 24px;
+      line-height: 1.15;
+    }
+
+    .osn-feature p {
+      color: #526071;
+      font-size: 15px;
+      line-height: 1.5;
+    }
+
+    .block-3 {
+      overflow: hidden;
+      display: grid;
+      grid-template-columns: minmax(0, 0.85fr) minmax(380px, 1.15fr);
+      min-height: 360px;
+      border-radius: 16px;
+      background: #15191f;
+      color: #ffffff;
+    }
+
+    .osn-dark-copy {
+      display: grid;
+      gap: 24px;
+      align-content: center;
+      padding: 42px;
+    }
+
+    .osn-dark-copy h2 {
+      margin: 0;
+      font-size: 40px;
+      line-height: 1.12;
+      letter-spacing: 0;
+    }
+
+    .osn-dark-copy .osn-button {
+      width: fit-content;
+      border-color: rgba(255, 255, 255, 0.24);
+      background: #ffffff;
+      color: #111827;
+    }
+
+    .osn-layout-image {
+      min-height: 360px;
+      background:
+        linear-gradient(90deg, rgba(21, 25, 31, 0.1), rgba(21, 25, 31, 0)),
+        url("${placeholderImage}") center / cover no-repeat;
+    }
+
+    .osn-timeline {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    .osn-timeline-card {
+      display: grid;
+      gap: 14px;
+      min-height: 220px;
+      padding: 22px;
+      border: 1px solid #edf0f6;
+      border-radius: 16px;
+      background: #f8fafd;
+    }
+
+    .osn-timeline-card img {
+      height: 56px;
+      width: 56px;
+    }
+
+    .osn-timeline-card h3 {
+      color: #111827;
+      font-size: 22px;
+      line-height: 1.15;
+    }
+
+    .osn-timeline-card p {
+      color: #526071;
+      font-size: 15px;
+      line-height: 1.45;
+    }
+
+    .osn-color-cards {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    .osn-card {
+      position: relative;
+      overflow: hidden;
+      display: grid;
+      gap: 10px;
+      min-height: 230px;
+      padding: 24px;
+      align-content: end;
+      border-radius: 18px;
+      color: #ffffff;
+    }
+
+    .osn-card_theme_light {
+      color: #111827;
+    }
+
+    .osn-card::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-position: top right;
+      background-repeat: no-repeat;
+      background-size: 156px auto;
+      opacity: 0.92;
+    }
+
+    .osn-card > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    .osn-card h3 {
+      font-size: 24px;
+      line-height: 1.15;
+    }
+
+    .osn-card p {
+      max-width: 260px;
+      font-size: 15px;
+      line-height: 1.45;
+      opacity: 0.86;
+    }
+
+    .osn-card_cube {
+      background: #5b768c;
+    }
+
+    .osn-card_cube::before {
+      background-image: url("${placeholderImage}");
+    }
+
+    .osn-card_cubes {
+      background: #277270;
+    }
+
+    .osn-card_cubes::before {
+      background-image: url("${placeholderImage}");
+    }
+
+    .osn-card_numbers {
+      background: #f7af49;
+    }
+
+    .osn-card_numbers::before {
+      background-image: url("${placeholderImage}");
+    }
+
+    .osn-card_code {
+      background: #4761d6;
+    }
+
+    .osn-card_code::before {
+      background-image: url("${placeholderImage}");
+    }
+
+    .osn-card_mail {
+      background: #77e369;
+    }
+
+    .osn-card_mail::before {
+      background-image: url("${placeholderImage}");
+    }
+
+    .osn-card_store {
+      background: #fae26f;
+    }
+
+    .osn-card_store::before {
+      background-image: url("${placeholderImage}");
+    }
+
+    .block-6 {
+      overflow: hidden;
+      display: grid;
+      grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
+      gap: 24px;
+      align-items: center;
+      padding: 34px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+    }
+
+    .osn-media-copy {
+      display: grid;
+      gap: 14px;
+      align-content: center;
+    }
+
+    .osn-media-copy h2,
+    .osn-media-copy p {
+      margin: 0;
+    }
+
+    .osn-media-copy h2 {
+      color: #111827;
+      font-size: 40px;
+      line-height: 1.12;
+    }
+
+    .osn-media-copy p {
+      color: #526071;
+      font-size: 17px;
+      line-height: 1.5;
+    }
+
+    .osn-result {
+      display: grid;
+      place-items: center;
+      min-height: 280px;
+      border-radius: 18px;
+      background: #f8fafd;
+    }
+
+    .osn-result img {
+      max-width: 88%;
+      max-height: 260px;
+    }
+
+    @media (max-width: 900px) {
+      .block-1 .osn-hero,
+      .block-3,
+      .block-6 {
+        grid-template-columns: 1fr;
+      }
+
+      .osn-features,
+      .osn-timeline,
+      .osn-color-cards {
+        grid-template-columns: 1fr;
+      }
+
+      .osn-nav {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 14px;
+        padding: 20px;
+      }
+
+      .osn-hero {
+        padding: 42px 22px;
+      }
+
+      .osn-hero h1 {
+        font-size: 42px;
+      }
+    }
+  </style>
+  <div class="grid">
+    <div class="block-1">
+      <div class="osn-actionbar">
+        <div class="osn-breadcrumbs">
+          <span>Gravity UI</span>
+          <span>Landing</span>
+        </div>
+        <div class="osn-actionbar__actions">
+          <span class="osn-icon-button">S</span>
+          <span class="osn-icon-button">A</span>
+          <span class="osn-theme-switch">Light</span>
+        </div>
+      </div>
+      <div class="osn-page">
+        <header class="osn-nav">
+          <a class="osn-logo" href="#">
+            <img src="${placeholderImage}" alt="">
+            <span>Gravity UI</span>
+          </a>
+          <nav class="osn-nav__links">
+            <a href="#">Projects</a>
+            <a href="#">Technology</a>
+            <a href="#">Contacts</a>
+          </nav>
+          <a class="osn-lang" href="#">Language</a>
+        </header>
+        <section class="osn-hero">
+          <div class="osn-hero__copy">
+            <span class="osn-label">Sample service</span>
+            <h1>Sample Service</h1>
+            <p>The service does good and provides you with a lot of opportunities and features. With the highest tech in mind we created a solution for complex product teams.</p>
+            <div class="osn-actions">
+              <a class="osn-button osn-button_primary" href="#">Get started</a>
+              <a class="osn-button" href="#">Learn more</a>
+            </div>
+          </div>
+          <div class="osn-hero__image">
+            <img src="${placeholderImage}" alt="">
+          </div>
+        </section>
+      </div>
+    </div>
+    <div class="block-2">
+      <div class="osn-section-heading">
+        <h2>Why this solution is good</h2>
+        <p>Three concise arguments from the OSN sample: scalability, rich features, and pricing flexibility.</p>
+      </div>
+      <div class="osn-features">
+        <article class="osn-feature">
+          <img src="${placeholderImage}" alt="">
+          <h3>Scalability</h3>
+          <p>Use one instance or multiple environments depending on team size, load, and rollout strategy.</p>
+        </article>
+        <article class="osn-feature">
+          <img src="${placeholderImage}" alt="">
+          <h3>Features</h3>
+          <p>Describe a broad feature set, integrations, and customization for specific product requirements.</p>
+        </article>
+        <article class="osn-feature">
+          <img src="${placeholderImage}" alt="">
+          <h3>Price</h3>
+          <p>Show flexible subscription or usage-based pricing with a compact argument for purchase.</p>
+        </article>
+      </div>
+    </div>
+    <div class="block-3">
+      <div class="osn-dark-copy">
+        <h2>We have additional content for you to discover</h2>
+        <a class="osn-button" href="#">Learn more</a>
+      </div>
+      <div class="osn-layout-image"></div>
+    </div>
+    <div class="block-4">
+      <div class="osn-section-heading">
+        <h2>Tell a story and build a narrative</h2>
+        <p>The OSN preview uses a timeline-style card layout to explain a multi-step process.</p>
+      </div>
+      <div class="osn-timeline">
+        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Discover Terms</h3><p>Collect the information you need before starting the application.</p></article>
+        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Create Application</h3><p>Proceed to the application after the initial information is ready.</p></article>
+        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Prepare Papers</h3><p>Prepare everything according to the roadmap and checklist.</p></article>
+        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Fill the Form</h3><p>Answer the last questions and confirm the details.</p></article>
+        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Meet Manager</h3><p>Managers guide the team throughout the process.</p></article>
+        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Submit</h3><p>Everything is ready for review and launch.</p></article>
+      </div>
+    </div>
+    <div class="block-5">
+      <div class="osn-section-heading">
+        <h2>Some more cards for your information</h2>
+        <p>Background cards work as a visual catalog of areas, cases, and capabilities.</p>
+      </div>
+      <div class="osn-color-cards">
+        <article class="osn-card osn-card_cube"><h3>The Cube</h3><p>A simplistic yet powerful volume geometry primitive.</p></article>
+        <article class="osn-card osn-card_cubes"><h3>Pile of Cubes</h3><p>Put cubes together to save space and enhance storage.</p></article>
+        <article class="osn-card osn-card_numbers osn-card_theme_light"><h3>Random Numbers</h3><p>Useful data stories for tough management decisions.</p></article>
+        <article class="osn-card osn-card_code"><h3>Code Assistant</h3><p>A future-facing example for developer workflows.</p></article>
+        <article class="osn-card osn-card_mail osn-card_theme_light"><h3>Mail List Service</h3><p>Classic communication still provides useful experience.</p></article>
+        <article class="osn-card osn-card_store osn-card_theme_light"><h3>Project Data</h3><p>Store, share, and collaborate with the team.</p></article>
+      </div>
+    </div>
+    <div class="block-6">
+      <div class="osn-media-copy">
+        <span class="osn-label">Webinar</span>
+        <h2>Discover our latest webinar</h2>
+        <p>Managers and engineers share their expertise on the best practices.</p>
+        <a class="osn-button osn-button_primary" href="#">Watch now</a>
+      </div>
+      <div class="osn-result">
+        <img src="${placeholderImage}" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="gravity-ui-osn-hero-preview" title="OSN hero preview" type="block" group="Gravity UI OSN">
+  <style>
+    & {
+      overflow: hidden;
+      min-height: 760px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 18px 56px rgba(34, 43, 60, 0.1);
+    }
+
+    .osn-actionbar {
+      display: flex;
+      min-height: 44px;
+      padding: 0 16px;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #edf0f6;
+      background: #ffffff;
+      color: #657185;
+      font-size: 13px;
+    }
+
+    .osn-breadcrumbs,
+    .osn-actionbar__actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .osn-breadcrumbs span + span::before {
+      content: "/";
+      margin-right: 8px;
+      color: #a8b1c1;
+    }
+
+    .osn-icon-button,
+    .osn-theme-switch {
+      display: grid;
+      place-items: center;
+      border: 1px solid #dfe4ee;
+      border-radius: 8px;
+      background: #ffffff;
+      color: #4b596c;
+      font-size: 12px;
+    }
+
+    .osn-icon-button {
+      width: 28px;
+      height: 28px;
+    }
+
+    .osn-theme-switch {
+      height: 28px;
+      padding: 0 10px;
+    }
+
+    .osn-page {
+      overflow: auto;
+      height: 716px;
+      background: #f6f8fb;
+    }
+
+    .osn-nav {
+      display: flex;
+      min-height: 72px;
+      padding: 0 40px;
+      align-items: center;
+      justify-content: space-between;
+      background: #ffffff;
+    }
+
+    .osn-logo,
+    .osn-nav__links {
+      display: flex;
+      align-items: center;
+    }
+
+    .osn-logo {
+      gap: 10px;
+      color: #111827;
+      font-weight: 700;
+    }
+
+    .osn-logo img {
+      width: 30px;
+      height: 30px;
+    }
+
+    .osn-nav__links {
+      gap: 26px;
+      color: #4b596c;
+      font-size: 15px;
+    }
+
+    .osn-lang {
+      padding: 7px 10px;
+      border: 1px solid #dfe4ee;
+      border-radius: 8px;
+      color: #4b596c;
+      font-size: 14px;
+    }
+
+    .osn-hero {
+      display: grid;
+      grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
+      gap: 40px;
+      min-height: 440px;
+      padding: 68px 40px 58px;
+      align-items: center;
+      background: #f5f7fb;
+    }
+
+    .osn-hero__copy {
+      display: grid;
+      gap: 22px;
+      align-content: center;
+    }
+
+    .osn-label {
+      width: fit-content;
+      padding: 6px 10px;
+      border-radius: 999px;
+      background: #ffffff;
+      color: #657185;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    h1,
+    p {
+      margin: 0;
+    }
+
+    h1 {
+      color: #111827;
+      font-size: 64px;
+      font-weight: 700;
+      line-height: 1;
+      letter-spacing: 0;
+    }
+
+    p {
+      max-width: 520px;
+      color: #526071;
+      font-size: 18px;
+      line-height: 1.55;
+    }
+
+    .osn-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .osn-button {
+      display: inline-flex;
+      min-height: 42px;
+      padding: 0 16px;
+      align-items: center;
+      border: 1px solid #d8deea;
+      border-radius: 8px;
+      background: #ffffff;
+      color: #111827;
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .osn-button_primary {
+      border-color: #111827;
+      background: #111827;
+      color: #ffffff;
+    }
+
+    .osn-hero__image {
+      display: grid;
+      place-items: center;
+      min-height: 300px;
+      padding: 24px;
+      border: 1px solid #dfe4ee;
+      border-radius: 24px;
+      background: #ffffff;
+    }
+
+    .osn-hero__image img {
+      display: block;
+      max-width: 100%;
+      max-height: 320px;
+    }
+  </style>
+  <div class="osn-actionbar">
+    <div class="osn-breadcrumbs">
+      <span>Gravity UI</span>
+      <span>Landing</span>
+    </div>
+    <div class="osn-actionbar__actions">
+      <span class="osn-icon-button">S</span>
+      <span class="osn-icon-button">A</span>
+      <span class="osn-theme-switch">Light</span>
+    </div>
+  </div>
+  <div class="osn-page">
+    <header class="osn-nav">
+      <a class="osn-logo" href="#">
+        <img src="${placeholderImage}" alt="">
+        <span>Gravity UI</span>
+      </a>
+      <nav class="osn-nav__links">
+        <a href="#">Projects</a>
+        <a href="#">Technology</a>
+        <a href="#">Contacts</a>
+      </nav>
+      <a class="osn-lang" href="#">Language</a>
+    </header>
+    <section class="osn-hero">
+      <div class="osn-hero__copy">
+        <span class="osn-label">Sample service</span>
+        <h1>Sample Service</h1>
+        <p>The service does good and provides you with a lot of opportunities and features. With the highest tech in mind we created a solution for complex product teams.</p>
+        <div class="osn-actions">
+          <a class="osn-button osn-button_primary" href="#">Get started</a>
+          <a class="osn-button" href="#">Learn more</a>
+        </div>
+      </div>
+      <div class="osn-hero__image">
+        <img src="${placeholderImage}" alt="">
+      </div>
+    </section>
+  </div>
+</template>
+
+<template id="gravity-ui-osn-features" title="OSN features" type="block" group="Gravity UI OSN">
+  <style>
+    & {
+      display: grid;
+      gap: 22px;
+      padding: 34px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+      color: #1d2633;
+    }
+
+    .osn-section-heading {
+      display: grid;
+      gap: 10px;
+      max-width: 760px;
+    }
+
+    h2,
+    p,
+    h3 {
+      margin: 0;
+    }
+
+    h2 {
+      color: #111827;
+      font-size: 42px;
+      font-weight: 700;
+      line-height: 1.12;
+      letter-spacing: 0;
+    }
+
+    .osn-section-heading p {
+      color: #526071;
+      font-size: 17px;
+      line-height: 1.5;
+    }
+
+    .osn-features {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    .osn-feature {
+      display: grid;
+      gap: 16px;
+      min-height: 260px;
+      padding: 24px;
+      align-content: start;
+      border: 1px solid #edf0f6;
+      border-radius: 16px;
+      background: #f8fafd;
+    }
+
+    .osn-feature img {
+      width: 42px;
+      height: 42px;
+    }
+
+    .osn-feature h3 {
+      color: #111827;
+      font-size: 24px;
+      line-height: 1.15;
+    }
+
+    .osn-feature p {
+      color: #526071;
+      font-size: 15px;
+      line-height: 1.5;
+    }
+  </style>
+  <div class="osn-section-heading">
+    <h2>Why this solution is good</h2>
+    <p>Three concise arguments from the OSN sample: scalability, rich features, and pricing flexibility.</p>
+  </div>
+  <div class="osn-features">
+    <article class="osn-feature">
+      <img src="${placeholderImage}" alt="">
+      <h3>Scalability</h3>
+      <p>Use one instance or multiple environments depending on team size, load, and rollout strategy.</p>
+    </article>
+    <article class="osn-feature">
+      <img src="${placeholderImage}" alt="">
+      <h3>Features</h3>
+      <p>Describe a broad feature set, integrations, and customization for specific product requirements.</p>
+    </article>
+    <article class="osn-feature">
+      <img src="${placeholderImage}" alt="">
+      <h3>Price</h3>
+      <p>Show flexible subscription or usage-based pricing with a compact argument for purchase.</p>
+    </article>
+  </div>
+</template>
+
+<template id="gravity-ui-osn-story" title="OSN narrative cards" type="block" group="Gravity UI OSN">
+  <style>
+    & {
+      display: grid;
+      gap: 22px;
+      padding: 34px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+    }
+
+    .osn-section-heading {
+      display: grid;
+      gap: 10px;
+      max-width: 760px;
+    }
+
+    h2,
+    p,
+    h3 {
+      margin: 0;
+    }
+
+    h2 {
+      color: #111827;
+      font-size: 42px;
+      font-weight: 700;
+      line-height: 1.12;
+      letter-spacing: 0;
+    }
+
+    .osn-section-heading p {
+      color: #526071;
+      font-size: 17px;
+      line-height: 1.5;
+    }
+
+    .osn-timeline {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    .osn-timeline-card {
+      display: grid;
+      gap: 14px;
+      min-height: 220px;
+      padding: 22px;
+      border: 1px solid #edf0f6;
+      border-radius: 16px;
+      background: #f8fafd;
+    }
+
+    .osn-timeline-card img {
+      width: 56px;
+      height: 56px;
+    }
+
+    .osn-timeline-card h3 {
+      color: #111827;
+      font-size: 22px;
+      line-height: 1.15;
+    }
+
+    .osn-timeline-card p {
+      color: #526071;
+      font-size: 15px;
+      line-height: 1.45;
+    }
+  </style>
+  <div class="osn-section-heading">
+    <h2>Tell a story and build a narrative</h2>
+    <p>The OSN preview uses a timeline-style card layout to explain a multi-step process.</p>
+  </div>
+  <div class="osn-timeline">
+    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Discover Terms</h3><p>Collect the information you need before starting the application.</p></article>
+    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Create Application</h3><p>Proceed to the application after the initial information is ready.</p></article>
+    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Prepare Papers</h3><p>Prepare everything according to the roadmap and checklist.</p></article>
+    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Fill the Form</h3><p>Answer the last questions and confirm the details.</p></article>
+    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Meet Manager</h3><p>Managers guide the team throughout the process.</p></article>
+    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Submit</h3><p>Everything is ready for review and launch.</p></article>
+  </div>
+</template>
+
+<template id="gravity-ui-osn-background-cards" title="OSN background cards" type="block" group="Gravity UI OSN">
+  <style>
+    & {
+      display: grid;
+      gap: 22px;
+      padding: 34px;
+      border: 1px solid #dfe4ee;
+      border-radius: 16px;
+      background: #ffffff;
+    }
+
+    .osn-section-heading {
+      display: grid;
+      gap: 10px;
+      max-width: 760px;
+    }
+
+    h2,
+    p,
+    h3 {
+      margin: 0;
+    }
+
+    h2 {
+      color: #111827;
+      font-size: 42px;
+      font-weight: 700;
+      line-height: 1.12;
+      letter-spacing: 0;
+    }
+
+    .osn-section-heading p {
+      color: #526071;
+      font-size: 17px;
+      line-height: 1.5;
+    }
+
+    .osn-color-cards {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 16px;
+    }
+
+    .osn-card {
+      position: relative;
+      overflow: hidden;
+      display: grid;
+      gap: 10px;
+      min-height: 230px;
+      padding: 24px;
+      align-content: end;
+      border-radius: 18px;
+      color: #ffffff;
+    }
+
+    .osn-card_theme_light {
+      color: #111827;
+    }
+
+    .osn-card::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-position: top right;
+      background-repeat: no-repeat;
+      background-size: 156px auto;
+      opacity: 0.92;
+    }
+
+    .osn-card > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    .osn-card h3 {
+      font-size: 24px;
+      line-height: 1.15;
+    }
+
+    .osn-card p {
+      max-width: 260px;
+      font-size: 15px;
+      line-height: 1.45;
+      opacity: 0.86;
+    }
+
+    .osn-card_cube { background: #5b768c; }
+    .osn-card_cubes { background: #277270; }
+    .osn-card_numbers { background: #f7af49; }
+    .osn-card_code { background: #4761d6; }
+    .osn-card_mail { background: #77e369; }
+    .osn-card_store { background: #fae26f; }
+    .osn-card_cube::before { background-image: url("${placeholderImage}"); }
+    .osn-card_cubes::before { background-image: url("${placeholderImage}"); }
+    .osn-card_numbers::before { background-image: url("${placeholderImage}"); }
+    .osn-card_code::before { background-image: url("${placeholderImage}"); }
+    .osn-card_mail::before { background-image: url("${placeholderImage}"); }
+    .osn-card_store::before { background-image: url("${placeholderImage}"); }
+  </style>
+  <div class="osn-section-heading">
+    <h2>Some more cards for your information</h2>
+    <p>Background cards work as a visual catalog of areas, cases, and capabilities.</p>
+  </div>
+  <div class="osn-color-cards">
+    <article class="osn-card osn-card_cube"><h3>The Cube</h3><p>A simplistic yet powerful volume geometry primitive.</p></article>
+    <article class="osn-card osn-card_cubes"><h3>Pile of Cubes</h3><p>Put cubes together to save space and enhance storage.</p></article>
+    <article class="osn-card osn-card_numbers osn-card_theme_light"><h3>Random Numbers</h3><p>Useful data stories for tough management decisions.</p></article>
+    <article class="osn-card osn-card_code"><h3>Code Assistant</h3><p>A future-facing example for developer workflows.</p></article>
+    <article class="osn-card osn-card_mail osn-card_theme_light"><h3>Mail List Service</h3><p>Classic communication still provides useful experience.</p></article>
+    <article class="osn-card osn-card_store osn-card_theme_light"><h3>Project Data</h3><p>Store, share, and collaborate with the team.</p></article>
+  </div>
+</template>`;
+
+export const gridBlockTemplates: GridBlockTemplate[] = parseTemplates(templateMarkup);
diff --git a/demo/src/global.d.ts b/demo/src/global.d.ts
index 0ae8aa69..1407ec04 100644
--- a/demo/src/global.d.ts
+++ b/demo/src/global.d.ts
@@ -21,3 +21,8 @@ declare module 'markdown-it-ins' {
     declare const plugin: PluginSimple;
     export = plugin;
 }
+
+declare module '*.svg' {
+    const src: string;
+    export default src;
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
index ca1d6d42..fe5aad4a 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
@@ -1,6 +1,7 @@
-import type {MouseEvent, PointerEvent as ReactPointerEvent} from 'react';
+import {useRef, useState} from 'react';
+import type {CSSProperties, MouseEvent, PointerEvent as ReactPointerEvent} from 'react';
 
-import {Gear, GripHorizontal} from '@gravity-ui/icons';
+import {Gear, GripHorizontal, Pencil} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
 
 import {i18n} from 'src/i18n/grid-block-templates';
@@ -11,7 +12,7 @@ import type {GridBlock} from '../types';
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 import type {DropTarget} from './drag';
 import {getBlockDragAttrs} from './drag';
-import {openInlineTextEditor} from './textEditing';
+import {getTextNodeFromEvent, openInlineImageSrcEditor, openInlineTextEditor} from './textEditing';
 
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
@@ -26,6 +27,30 @@ interface GridBlockItemProps {
     onCommitContent: (blockId: string, content: string) => void;
 }
 
+type InlineEditTarget =
+    | {
+          kind: 'text';
+          textNode: Text;
+          style: CSSProperties;
+      }
+    | {
+          kind: 'image';
+          image: HTMLImageElement;
+          style: CSSProperties;
+      };
+
+const getButtonStyle = (
+    root: HTMLElement,
+    coords: Pick<MouseEvent, 'clientX' | 'clientY'>,
+): CSSProperties => {
+    const rect = root.getBoundingClientRect();
+
+    return {
+        left: Math.max(4, Math.min(coords.clientX - rect.left + 8, rect.width - 28)),
+        top: Math.max(4, coords.clientY - rect.top - 18),
+    };
+};
+
 export const GridBlockItem: React.FC<GridBlockItemProps> = ({
     block,
     index,
@@ -35,6 +60,9 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
     onOpenSettings,
     onCommitContent,
 }) => {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [inlineEditTarget, setInlineEditTarget] = useState<InlineEditTarget | null>(null);
+
     const number = index + 1;
     const isDropBefore = dropTarget?.id === block.id && dropTarget.placement === 'before';
     const isDropAfter = dropTarget?.id === block.id && dropTarget.placement === 'after';
@@ -43,16 +71,60 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
         onOpenSettings(block.id, event.currentTarget);
     };
 
-    const handleDoubleClick = (event: MouseEvent<HTMLDivElement>) => {
-        openInlineTextEditor({
-            root: event.currentTarget,
-            event,
-            onCommit: (html) => onCommitContent(block.id, html),
+    const handlePointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
+        onBeginDrag(block.id, event);
+    };
+
+    const handleContentMouseMove = (event: MouseEvent<HTMLDivElement>) => {
+        const root = contentRef.current;
+        const target = event.target;
+        if (!root || !(target instanceof Node) || !root.contains(target)) return;
+
+        if (target instanceof HTMLImageElement) {
+            const imageRect = target.getBoundingClientRect();
+            setInlineEditTarget({
+                kind: 'image',
+                image: target,
+                style: getButtonStyle(root, {
+                    clientX: imageRect.right,
+                    clientY: imageRect.top + 18,
+                }),
+            });
+            return;
+        }
+
+        const textNode = getTextNodeFromEvent(root, event);
+        if (!textNode) return;
+
+        setInlineEditTarget({
+            kind: 'text',
+            textNode,
+            style: getButtonStyle(root, event),
         });
     };
 
-    const handlePointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
-        onBeginDrag(block.id, event);
+    const handleOpenInlineEdit = (event: MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const root = contentRef.current;
+        if (!root || !inlineEditTarget) return;
+
+        if (inlineEditTarget.kind === 'text') {
+            openInlineTextEditor({
+                root,
+                textNode: inlineEditTarget.textNode,
+                onCommit: (html) => onCommitContent(block.id, html),
+            });
+        } else {
+            openInlineImageSrcEditor({
+                root,
+                image: inlineEditTarget.image,
+                onCommit: (html) => onCommitContent(block.id, html),
+            });
+        }
+
+        setInlineEditTarget(null);
     };
 
     return (
@@ -85,9 +157,31 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
                 className={`${b('item-content')} ${stop}`}
                 contentEditable={false}
                 suppressContentEditableWarning
-                onDoubleClick={handleDoubleClick}
-                dangerouslySetInnerHTML={{__html: block.content}}
-            />
+                onMouseMove={handleContentMouseMove}
+                onMouseLeave={() => setInlineEditTarget(null)}
+            >
+                <div
+                    ref={contentRef}
+                    className={b('item-content-html')}
+                    dangerouslySetInnerHTML={{__html: block.content}}
+                />
+                {inlineEditTarget && (
+                    <Button
+                        view="raised"
+                        size="xs"
+                        className={`${b('inline-edit-button')} ${stop}`}
+                        style={inlineEditTarget.style}
+                        onClick={handleOpenInlineEdit}
+                        aria-label={
+                            inlineEditTarget.kind === 'image'
+                                ? i18n('edit_image_src')
+                                : i18n('edit_text')
+                        }
+                    >
+                        <Icon data={Pencil} size={12} className={stop} />
+                    </Button>
+                )}
+            </div>
         </div>
     );
 };
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
index 2156a7a2..e147f710 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
@@ -108,10 +108,14 @@
     }
 
     &__item-content {
+        position: relative;
+
         min-height: 1.2em;
 
         outline: none;
+    }
 
+    &__item-content-html {
         &:empty::before {
             content: 'Text...';
 
@@ -119,6 +123,17 @@
         }
     }
 
+    &__inline-edit-button {
+        position: absolute;
+        z-index: 2;
+
+        width: 24px;
+        height: 24px;
+        padding: 0;
+
+        box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
+    }
+
     &__inline-text-editor {
         width: 100%;
         min-height: 32px;
@@ -131,6 +146,12 @@
         border: 1px solid var(--g-color-line-focus);
         border-radius: var(--g-border-radius-xs);
         background: var(--g-color-base-background);
+
+        &_src {
+            width: min(100%, 420px);
+
+            resize: none;
+        }
     }
 
     &__settings-editor {
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
index bce0ba42..9f1be1c5 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -36,6 +36,7 @@ import {
     templateToBlock,
 } from './blockUtils';
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+import {getBlockTemplatesForMenu} from './derivedBlockTemplates';
 import {useGridBlockDrag} from './drag';
 
 import './GridBlockTemplates.scss';
@@ -78,8 +79,22 @@ export const GridBlockTemplatesView: React.FC<{
         () => mergeTemplatesById(templates?.items ?? [], storedTemplates),
         [templates?.items, storedTemplates],
     );
-    const containerTemplates = effectiveTemplates.filter(isContainerTemplate);
-    const blockTemplates = effectiveTemplates.filter(isBlockTemplate);
+    const containerTemplates = useMemo(
+        () => effectiveTemplates.filter(isContainerTemplate),
+        [effectiveTemplates],
+    );
+    const explicitBlockTemplates = useMemo(
+        () => effectiveTemplates.filter(isBlockTemplate),
+        [effectiveTemplates],
+    );
+    const blockTemplates = useMemo(
+        () =>
+            getBlockTemplatesForMenu({
+                blockTemplates: explicitBlockTemplates,
+                containerTemplates,
+            }),
+        [explicitBlockTemplates, containerTemplates],
+    );
 
     const showContainerTemplatesButton =
         Boolean(templates?.showButton) && (allowAdd || containerTemplates.length > 0);
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
index b3cf9280..d7f7e62e 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
@@ -36,7 +36,7 @@ function TemplateGroupMenuItem<TTemplate extends GridBlockTemplate>({
     return (
         <>
             <Menu.Item
-                className={stop}
+                className={b('templates-group-header', [stop])}
                 iconEnd={<Icon data={open ? ChevronDown : ChevronRight} />}
                 onClick={() => onToggle(title)}
                 extraProps={{'aria-expanded': open}}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
index 7942d85a..ce256940 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
@@ -31,8 +31,17 @@
         max-height: 280px;
     }
 
+    &__templates-group-header {
+        margin: 2px 0;
+
+        font-weight: 600;
+
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-base-generic);
+    }
+
     &__templates-group-template {
-        padding-inline-start: 32px;
+        padding-inline-start: 44px;
     }
 
     &__templates-separator {
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.test.ts
new file mode 100644
index 00000000..9ab2064f
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.test.ts
@@ -0,0 +1,113 @@
+import type {GridBlockBlockTemplate, GridBlockContainerTemplate} from '../types';
+
+import {deriveBlockCss, getBlockTemplatesForMenu} from './derivedBlockTemplates';
+
+const blockTemplate = (content: string): GridBlockBlockTemplate => ({
+    id: 'explicit',
+    title: 'Explicit',
+    type: 'block',
+    content,
+    block: {css: '', content},
+});
+
+const containerTemplate = (
+    blocks: GridBlockContainerTemplate['blocks'],
+    containerCss = '',
+): GridBlockContainerTemplate => ({
+    id: 'container',
+    title: 'Container',
+    group: 'Group',
+    type: 'container',
+    content: '',
+    containerCss,
+    blocks,
+});
+
+describe('GridBlockTemplates derived block templates', () => {
+    it('keeps explicit templates and derives missing blocks from containers', () => {
+        expect(
+            getBlockTemplatesForMenu({
+                blockTemplates: [blockTemplate('<h2>Existing</h2>')],
+                containerTemplates: [
+                    containerTemplate([
+                        {css: '', content: '<h2>Existing</h2>'},
+                        {css: '', content: '<strong>New block</strong>'},
+                    ]),
+                ],
+            }),
+        ).toMatchObject([
+            {id: 'explicit', title: 'Explicit'},
+            {
+                id: 'container__block-2',
+                title: 'New block',
+                group: 'Group',
+                block: {content: '<strong>New block</strong>'},
+            },
+        ]);
+    });
+
+    it('uses aria-label and image alt as derived titles', () => {
+        const result = getBlockTemplatesForMenu({
+            blockTemplates: [],
+            containerTemplates: [
+                containerTemplate([
+                    {css: '', content: '<a aria-label="CTA"></a>'},
+                    {css: '', content: '<img src="x.png" alt="Preview">'},
+                    {css: '', content: '<div></div>'},
+                ]),
+            ],
+        });
+
+        expect(result.map((template) => template.title)).toEqual(['CTA', 'Preview', 'Block 3']);
+    });
+
+    it('rewrites block and shared grid selectors for standalone blocks', () => {
+        expect(
+            deriveBlockCss(
+                [
+                    '.grid { color: #111; }',
+                    '.grid * { box-sizing: border-box; }',
+                    '.block-1, .block-2 { min-width: 0; }',
+                    '.block-1 .title, .block-2 .title { margin: 0; }',
+                    '.shared { font: inherit; }',
+                ].join('\n'),
+                1,
+            ),
+        ).toBe(
+            [
+                '& {\n  color: #111;\n}',
+                '& * {\n  box-sizing: border-box;\n}',
+                '& {\n  min-width: 0;\n}',
+                '& .title {\n  margin: 0;\n}',
+                '.shared {\n  font: inherit;\n}',
+            ].join('\n\n'),
+        );
+    });
+
+    it('rewrites nested media rules recursively', () => {
+        expect(
+            deriveBlockCss(
+                [
+                    '@media (max-width: 900px) {',
+                    '  .block-2 { grid-template-columns: 1fr; }',
+                    '  .block-1 { display: none; }',
+                    '  .grid a { color: inherit; }',
+                    '}',
+                ].join('\n'),
+                2,
+            ),
+        ).toBe(
+            [
+                '@media (max-width: 900px) {',
+                '  & {',
+                '    grid-template-columns: 1fr;',
+                '  }',
+                '',
+                '  & a {',
+                '    color: inherit;',
+                '  }',
+                '}',
+            ].join('\n'),
+        );
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.ts
new file mode 100644
index 00000000..ee8221e1
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.ts
@@ -0,0 +1,171 @@
+import type {
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplateBlock,
+} from '../types';
+
+const BLOCK_CLASS_RE = /\.block-\d+(?![\w-])/;
+
+const normalizeHtml = (html: string) => html.trim().replace(/>\s+</g, '><').replace(/\s+/g, ' ');
+
+const createDocument = (html: string): Document | null => {
+    if (typeof window === 'undefined' || typeof window.DOMParser === 'undefined') return null;
+
+    return new DOMParser().parseFromString(html, 'text/html');
+};
+
+const getText = (element: Element | null) => element?.textContent?.trim().replace(/\s+/g, ' ');
+
+const getDerivedTitle = (html: string, index: number) => {
+    const doc = createDocument(`<div>${html}</div>`);
+
+    if (doc) {
+        const textElement = doc.querySelector('h1, h2, h3, strong');
+        const text = getText(textElement);
+        if (text) return text;
+
+        const labelled = doc.querySelector('[aria-label]');
+        const label = labelled?.getAttribute('aria-label')?.trim();
+        if (label) return label;
+
+        const image = doc.querySelector('img[alt]');
+        const alt = image?.getAttribute('alt')?.trim();
+        if (alt) return alt;
+    }
+
+    return `Block ${index + 1}`;
+};
+
+const splitSelectorList = (selectorList: string) => {
+    const selectors: string[] = [];
+    let current = '';
+    let depth = 0;
+
+    for (const char of selectorList) {
+        if (char === '(' || char === '[') depth += 1;
+        if (char === ')' || char === ']') depth = Math.max(0, depth - 1);
+
+        if (char === ',' && depth === 0) {
+            selectors.push(current.trim());
+            current = '';
+        } else {
+            current += char;
+        }
+    }
+
+    if (current.trim()) selectors.push(current.trim());
+
+    return selectors;
+};
+
+const hasNestedRules = (body: string) => body.includes('{') && body.includes('}');
+
+const splitTopLevelRules = (css: string) => {
+    const rules: Array<{prelude: string; body: string}> = [];
+    let index = 0;
+
+    while (index < css.length) {
+        const start = css.indexOf('{', index);
+        if (start === -1) break;
+
+        const prelude = css.slice(index, start).trim();
+        let depth = 1;
+        let end = start + 1;
+
+        while (end < css.length && depth > 0) {
+            const char = css[end];
+            if (char === '{') depth += 1;
+            if (char === '}') depth -= 1;
+            end += 1;
+        }
+
+        const body = css.slice(start + 1, end - 1).trim();
+        if (prelude && body) rules.push({prelude, body});
+
+        index = end;
+    }
+
+    return rules;
+};
+
+const rewriteSelector = (selector: string, blockNumber: number) => {
+    const currentBlockRe = new RegExp(`\\.block-${blockNumber}(?![\\w-])`, 'g');
+
+    if (currentBlockRe.test(selector)) return selector.replace(currentBlockRe, '&').trim();
+    if (BLOCK_CLASS_RE.test(selector)) return null;
+
+    return selector.replace(/\.grid(?![\w-])/g, '&').trim();
+};
+
+const rewriteSelectorList = (selectorList: string, blockNumber: number) => {
+    const selectors = splitSelectorList(selectorList)
+        .map((selector) => rewriteSelector(selector, blockNumber))
+        .filter(Boolean);
+
+    return selectors.join(', ');
+};
+
+const indentCss = (css: string) =>
+    css
+        .split('\n')
+        .map((line) => (line.trim() ? `  ${line}` : line))
+        .join('\n');
+
+export const deriveBlockCss = (css: string, blockNumber: number): string => {
+    const rules = splitTopLevelRules(css);
+
+    return rules
+        .map(({prelude, body}) => {
+            if (prelude.startsWith('@')) {
+                if (/^@(?:media|supports|container)\b/.test(prelude) && hasNestedRules(body)) {
+                    const nested = deriveBlockCss(body, blockNumber);
+                    return nested ? `${prelude} {\n${indentCss(nested)}\n}` : '';
+                }
+
+                return `${prelude} {\n${indentCss(body)}\n}`;
+            }
+
+            const selectorList = rewriteSelectorList(prelude, blockNumber);
+            return selectorList ? `${selectorList} {\n${indentCss(body)}\n}` : '';
+        })
+        .filter(Boolean)
+        .join('\n\n');
+};
+
+const mergeBlockCss = (containerCss: string, block: GridBlockTemplateBlock, blockNumber: number) =>
+    [deriveBlockCss(containerCss, blockNumber), block.css.trim()].filter(Boolean).join('\n\n');
+
+export const getBlockTemplatesForMenu = ({
+    blockTemplates,
+    containerTemplates,
+}: {
+    blockTemplates: GridBlockBlockTemplate[];
+    containerTemplates: GridBlockContainerTemplate[];
+}): GridBlockBlockTemplate[] => {
+    const seenHtml = new Set(
+        blockTemplates.map((template) => normalizeHtml(template.block.content)),
+    );
+    const derivedTemplates: GridBlockBlockTemplate[] = [];
+
+    for (const template of containerTemplates) {
+        template.blocks.forEach((block, index) => {
+            const normalized = normalizeHtml(block.content);
+            if (!normalized || seenHtml.has(normalized)) return;
+
+            seenHtml.add(normalized);
+            derivedTemplates.push({
+                id: `${template.id}__block-${index + 1}`,
+                title: getDerivedTitle(block.content, index),
+                group: template.group,
+                type: 'block',
+                content: block.content,
+                block: {
+                    css: mergeBlockCss(template.containerCss, block, index + 1),
+                    content: block.content,
+                },
+            });
+        });
+    }
+
+    return [...blockTemplates, ...derivedTemplates];
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts
new file mode 100644
index 00000000..bfa631da
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts
@@ -0,0 +1,83 @@
+import {openInlineImageSrcEditor, openInlineTextEditor} from './textEditing';
+
+const keydown = (target: HTMLElement, key: string) => {
+    target.dispatchEvent(new KeyboardEvent('keydown', {key, bubbles: true}));
+};
+
+describe('GridBlockTemplates inline editing', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('commits text changes on Enter', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<p>Hello</p>';
+        document.body.append(root);
+
+        const textNode = root.querySelector('p')?.firstChild as Text;
+        const onCommit = jest.fn();
+
+        expect(openInlineTextEditor({root, textNode, onCommit})).toBe(true);
+
+        const editor = root.querySelector('textarea') as HTMLTextAreaElement;
+        editor.value = 'Updated';
+        keydown(editor, 'Enter');
+
+        expect(root.innerHTML).toBe('<p>Updated</p>');
+        expect(onCommit).toHaveBeenCalledWith('<p>Updated</p>');
+    });
+
+    it('cancels text changes on Escape', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<p>Hello</p>';
+        document.body.append(root);
+
+        const textNode = root.querySelector('p')?.firstChild as Text;
+        const onCommit = jest.fn();
+
+        openInlineTextEditor({root, textNode, onCommit});
+
+        const editor = root.querySelector('textarea') as HTMLTextAreaElement;
+        editor.value = 'Updated';
+        keydown(editor, 'Escape');
+
+        expect(root.innerHTML).toBe('<p>Hello</p>');
+        expect(onCommit).not.toHaveBeenCalled();
+    });
+
+    it('commits image src changes and preserves other attributes', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<img src="before.png" alt="Preview" class="hero">';
+        document.body.append(root);
+
+        const image = root.querySelector('img') as HTMLImageElement;
+        const onCommit = jest.fn();
+
+        expect(openInlineImageSrcEditor({root, image, onCommit})).toBe(true);
+
+        const editor = root.querySelector('input') as HTMLInputElement;
+        editor.value = 'after.png';
+        keydown(editor, 'Enter');
+
+        expect(root.innerHTML).toBe('<img src="after.png" alt="Preview" class="hero">');
+        expect(onCommit).toHaveBeenCalledWith('<img src="after.png" alt="Preview" class="hero">');
+    });
+
+    it('cancels image src changes on Escape', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<img src="before.png" alt="Preview">';
+        document.body.append(root);
+
+        const image = root.querySelector('img') as HTMLImageElement;
+        const onCommit = jest.fn();
+
+        openInlineImageSrcEditor({root, image, onCommit});
+
+        const editor = root.querySelector('input') as HTMLInputElement;
+        editor.value = 'after.png';
+        keydown(editor, 'Escape');
+
+        expect(root.innerHTML).toBe('<img src="before.png" alt="Preview">');
+        expect(onCommit).not.toHaveBeenCalled();
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
index 14580de9..72ffed51 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
@@ -10,10 +10,11 @@ interface InlineTextEditorOptions {
     root: HTMLElement;
     event?: Pick<MouseEvent, 'clientX' | 'clientY'>;
     textNodeIndex?: number;
+    textNode?: Text;
     onCommit: (html: string) => void;
 }
 
-const getTextNodes = (root: HTMLElement) => {
+export const getTextNodes = (root: HTMLElement) => {
     const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
         acceptNode(node) {
             return node.nodeValue?.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
@@ -28,7 +29,7 @@ const getTextNodes = (root: HTMLElement) => {
     return textNodes;
 };
 
-const getRangeFromPoint = (clientX: number, clientY: number) => {
+export const getRangeFromPoint = (clientX: number, clientY: number) => {
     const doc = document as Document & {
         caretRangeFromPoint?: (x: number, y: number) => Range | null;
         caretPositionFromPoint?: (
@@ -48,7 +49,7 @@ const getRangeFromPoint = (clientX: number, clientY: number) => {
     return nextRange;
 };
 
-const getTextNodeFromEvent = (
+export const getTextNodeFromEvent = (
     root: HTMLElement,
     event: Pick<MouseEvent, 'clientX' | 'clientY'>,
 ) => {
@@ -68,21 +69,28 @@ function openTextNodeEditor({
 }: InlineTextEditorOptions & {textNode: Text; textNodeIndex: number}) {
     root.querySelector(INLINE_TEXT_EDITOR_SELECTOR)?.remove();
 
+    const originalValue = textNode.nodeValue ?? '';
     const textarea = document.createElement('textarea');
     textarea.setAttribute(INLINE_TEXT_EDITOR_ATTR, 'true');
     textarea.className = `${b('inline-text-editor')} ${stop}`;
-    textarea.value = textNode.nodeValue ?? '';
+    textarea.value = originalValue;
     textarea.rows = 1;
 
-    let committed = false;
+    let finished = false;
 
     const commit = () => {
-        if (committed) return;
-        committed = true;
+        if (finished) return;
+        finished = true;
         textarea.replaceWith(document.createTextNode(textarea.value));
         onCommit(root.innerHTML);
     };
 
+    const cancel = () => {
+        if (finished) return;
+        finished = true;
+        textarea.replaceWith(document.createTextNode(originalValue));
+    };
+
     const navigate = (direction: 1 | -1) => {
         const nextIndex = textNodeIndex + direction;
 
@@ -98,10 +106,22 @@ function openTextNodeEditor({
     };
 
     textarea.addEventListener('keydown', (event) => {
-        if (event.key !== 'Tab') return;
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            navigate(event.shiftKey ? -1 : 1);
+            return;
+        }
+
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            commit();
+            return;
+        }
 
-        event.preventDefault();
-        navigate(event.shiftKey ? -1 : 1);
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            cancel();
+        }
     });
     textarea.addEventListener('blur', commit);
 
@@ -115,13 +135,15 @@ export function openInlineTextEditor({
     root,
     event,
     textNodeIndex,
+    textNode: directTextNode,
     onCommit,
 }: InlineTextEditorOptions) {
     const textNodes = getTextNodes(root);
     const textNode =
-        textNodeIndex === undefined
+        directTextNode ??
+        (textNodeIndex === undefined
             ? event && getTextNodeFromEvent(root, event)
-            : textNodes[textNodeIndex];
+            : textNodes[textNodeIndex]);
 
     if (!textNode) return false;
 
@@ -132,3 +154,59 @@ export function openInlineTextEditor({
 
     return true;
 }
+
+export function openInlineImageSrcEditor({
+    root,
+    image,
+    onCommit,
+}: {
+    root: HTMLElement;
+    image: HTMLImageElement;
+    onCommit: (html: string) => void;
+}) {
+    root.querySelector(INLINE_TEXT_EDITOR_SELECTOR)?.remove();
+
+    const originalImage = image.cloneNode(false) as HTMLImageElement;
+    const input = document.createElement('input');
+    input.setAttribute(INLINE_TEXT_EDITOR_ATTR, 'true');
+    input.className = `${b('inline-text-editor', {src: true})} ${stop}`;
+    input.value = image.getAttribute('src') ?? '';
+
+    let finished = false;
+
+    const commit = () => {
+        if (finished) return;
+        finished = true;
+        const nextImage = originalImage.cloneNode(false) as HTMLImageElement;
+        nextImage.setAttribute('src', input.value);
+        input.replaceWith(nextImage);
+        onCommit(root.innerHTML);
+    };
+
+    const cancel = () => {
+        if (finished) return;
+        finished = true;
+        input.replaceWith(originalImage);
+    };
+
+    input.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commit();
+            return;
+        }
+
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            cancel();
+        }
+    });
+    input.addEventListener('blur', commit);
+
+    image.replaceWith(input);
+
+    input.focus();
+    input.select();
+
+    return true;
+}
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
index 717f5685..6752c81a 100644
--- a/packages/editor/src/i18n/grid-block-templates/en.json
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -11,6 +11,8 @@
   "custom_html": "Custom HTML",
   "css": "CSS",
   "drag_block": "Drag block {{index}}",
+  "edit_image_src": "Edit image source",
+  "edit_text": "Edit text",
   "grid_css": "Grid CSS",
   "html": "HTML",
   "block_html_placeholder": "<button type=\"button\">Button text</button>",
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
index c269fa74..4cbbde0d 100644
--- a/packages/editor/src/i18n/grid-block-templates/ru.json
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -11,6 +11,8 @@
   "custom_html": "Свой HTML",
   "css": "CSS",
   "drag_block": "Перетащить блок {{index}}",
+  "edit_image_src": "Изменить ссылку картинки",
+  "edit_text": "Изменить текст",
   "grid_css": "CSS сетки",
   "html": "HTML",
   "block_html_placeholder": "<button type=\"button\">Текст кнопки</button>",

From cbbe2c88f712ebba8656e5ca5d6d6b4332c252c3 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 22:19:42 +0200
Subject: [PATCH 15/21] fix: stabilize grid block hover editing

---
 .../grid-block-background-placeholder.svg     |  16 ++
 demo/src/defaults/grid-block-templates.ts     |  53 ++---
 .../GridBlockItem.tsx                         | 183 +++++++++++++-----
 .../GridBlockTemplates.scss                   |  11 ++
 4 files changed, 191 insertions(+), 72 deletions(-)
 create mode 100644 demo/src/defaults/grid-block-background-placeholder.svg

diff --git a/demo/src/defaults/grid-block-background-placeholder.svg b/demo/src/defaults/grid-block-background-placeholder.svg
new file mode 100644
index 00000000..31f9ebed
--- /dev/null
+++ b/demo/src/defaults/grid-block-background-placeholder.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" fill="none">
+  <rect width="960" height="540" fill="#F7F9FC"/>
+  <defs>
+    <pattern id="grid-small" width="24" height="24" patternUnits="userSpaceOnUse">
+      <path d="M24 0H0V24" stroke="#D9E1EC" stroke-width="1"/>
+    </pattern>
+    <pattern id="grid-large" width="120" height="120" patternUnits="userSpaceOnUse">
+      <rect width="120" height="120" fill="url(#grid-small)"/>
+      <path d="M120 0H0V120" stroke="#B8C4D6" stroke-width="2"/>
+    </pattern>
+  </defs>
+  <rect width="960" height="540" fill="url(#grid-large)"/>
+  <rect x="156" y="120" width="648" height="300" rx="24" fill="#FFFFFF" fill-opacity="0.72" stroke="#AAB8CC" stroke-width="2" stroke-dasharray="14 14"/>
+  <path d="M300 270H660" stroke="#72839B" stroke-width="12" stroke-linecap="round" stroke-dasharray="4 28"/>
+  <path d="M480 90V450" stroke="#72839B" stroke-width="8" stroke-linecap="round" stroke-dasharray="4 28"/>
+</svg>
diff --git a/demo/src/defaults/grid-block-templates.ts b/demo/src/defaults/grid-block-templates.ts
index f97c10fc..490458f0 100644
--- a/demo/src/defaults/grid-block-templates.ts
+++ b/demo/src/defaults/grid-block-templates.ts
@@ -3,6 +3,7 @@ import {
     type GridBlockTemplate,
 } from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/templates/index.js';
 
+import backgroundPlaceholderImage from './grid-block-background-placeholder.svg';
 import placeholderImage from './grid-block-placeholder.svg';
 
 const templateMarkup = `<template id="product-landing-page" title="Product landing" type="container" group="Product landing">
@@ -281,7 +282,7 @@ const templateMarkup = `<template id="product-landing-page" title="Product landi
       padding: 24px;
       align-items: center;
       border-radius: 24px;
-      background: url("${placeholderImage}") no-repeat center / contain;
+      background: url("${backgroundPlaceholderImage}") no-repeat center / contain;
       box-sizing: border-box;
     }
 
@@ -328,51 +329,51 @@ const templateMarkup = `<template id="product-landing-page" title="Product landi
     }
 
     .benefits-banner_dms {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_dms:hover {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_food {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_food:hover {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_sport {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_sport:hover {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_family {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_family:hover {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_finance {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_finance:hover {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_discounts {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .benefits-banner_discounts:hover {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
   </style>
   <a class="benefits-banner benefits-banner_dms" href="https://wiki.yandex-team.ru/hr/kompensacii/straxovanie/" aria-label="ДМС"></a>
@@ -1968,7 +1969,7 @@ const templateMarkup = `<template id="product-landing-page" title="Product landi
       min-height: 360px;
       background:
         linear-gradient(90deg, rgba(21, 25, 31, 0.1), rgba(21, 25, 31, 0)),
-        url("${placeholderImage}") center / cover no-repeat;
+        url("${backgroundPlaceholderImage}") center / cover no-repeat;
     }
 
     .osn-timeline {
@@ -2058,7 +2059,7 @@ const templateMarkup = `<template id="product-landing-page" title="Product landi
     }
 
     .osn-card_cube::before {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .osn-card_cubes {
@@ -2066,7 +2067,7 @@ const templateMarkup = `<template id="product-landing-page" title="Product landi
     }
 
     .osn-card_cubes::before {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .osn-card_numbers {
@@ -2074,7 +2075,7 @@ const templateMarkup = `<template id="product-landing-page" title="Product landi
     }
 
     .osn-card_numbers::before {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .osn-card_code {
@@ -2082,7 +2083,7 @@ const templateMarkup = `<template id="product-landing-page" title="Product landi
     }
 
     .osn-card_code::before {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .osn-card_mail {
@@ -2090,7 +2091,7 @@ const templateMarkup = `<template id="product-landing-page" title="Product landi
     }
 
     .osn-card_mail::before {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .osn-card_store {
@@ -2098,7 +2099,7 @@ const templateMarkup = `<template id="product-landing-page" title="Product landi
     }
 
     .osn-card_store::before {
-      background-image: url("${placeholderImage}");
+      background-image: url("${backgroundPlaceholderImage}");
     }
 
     .block-6 {
@@ -2794,12 +2795,12 @@ const templateMarkup = `<template id="product-landing-page" title="Product landi
     .osn-card_code { background: #4761d6; }
     .osn-card_mail { background: #77e369; }
     .osn-card_store { background: #fae26f; }
-    .osn-card_cube::before { background-image: url("${placeholderImage}"); }
-    .osn-card_cubes::before { background-image: url("${placeholderImage}"); }
-    .osn-card_numbers::before { background-image: url("${placeholderImage}"); }
-    .osn-card_code::before { background-image: url("${placeholderImage}"); }
-    .osn-card_mail::before { background-image: url("${placeholderImage}"); }
-    .osn-card_store::before { background-image: url("${placeholderImage}"); }
+    .osn-card_cube::before { background-image: url("${backgroundPlaceholderImage}"); }
+    .osn-card_cubes::before { background-image: url("${backgroundPlaceholderImage}"); }
+    .osn-card_numbers::before { background-image: url("${backgroundPlaceholderImage}"); }
+    .osn-card_code::before { background-image: url("${backgroundPlaceholderImage}"); }
+    .osn-card_mail::before { background-image: url("${backgroundPlaceholderImage}"); }
+    .osn-card_store::before { background-image: url("${backgroundPlaceholderImage}"); }
   </style>
   <div class="osn-section-heading">
     <h2>Some more cards for your information</h2>
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
index fe5aad4a..9d8f5af2 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
@@ -12,10 +12,36 @@ import type {GridBlock} from '../types';
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 import type {DropTarget} from './drag';
 import {getBlockDragAttrs} from './drag';
-import {getTextNodeFromEvent, openInlineImageSrcEditor, openInlineTextEditor} from './textEditing';
+import {getTextNodes, openInlineImageSrcEditor, openInlineTextEditor} from './textEditing';
 
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
+const inlineEditButtonSelector = `.${b('inline-edit-button')}`;
+const textTargetSelector = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'p',
+    'a',
+    'span',
+    'strong',
+    'em',
+    'b',
+    'i',
+    'li',
+    'dt',
+    'dd',
+    'blockquote',
+    'figcaption',
+    'cite',
+    'small',
+    'label',
+    'td',
+    'th',
+].join(',');
 
 interface GridBlockItemProps {
     block: GridBlock;
@@ -30,24 +56,72 @@ interface GridBlockItemProps {
 type InlineEditTarget =
     | {
           kind: 'text';
-          textNode: Text;
-          style: CSSProperties;
+          element: HTMLElement;
+          buttonStyle: CSSProperties;
+          outlineStyle: CSSProperties;
       }
     | {
           kind: 'image';
           image: HTMLImageElement;
-          style: CSSProperties;
+          element: HTMLImageElement;
+          buttonStyle: CSSProperties;
+          outlineStyle: CSSProperties;
       };
 
-const getButtonStyle = (
-    root: HTMLElement,
-    coords: Pick<MouseEvent, 'clientX' | 'clientY'>,
-): CSSProperties => {
+const clamp = (value: number, min: number, max: number) =>
+    Math.max(min, Math.min(value, Math.max(min, max)));
+
+const getTargetStyles = (root: HTMLElement, target: HTMLElement) => {
     const rect = root.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const left = targetRect.left - rect.left;
+    const top = targetRect.top - rect.top;
+
+    return {
+        buttonStyle: {
+            left: clamp(left + targetRect.width - 28, 4, rect.width - 28),
+            top: clamp(top + 4, 4, rect.height - 28),
+        },
+        outlineStyle: {
+            left: Math.max(0, left - 3),
+            top: Math.max(0, top - 3),
+            width: targetRect.width + 6,
+            height: targetRect.height + 6,
+        },
+    };
+};
+
+const getEditableTextElement = (root: HTMLElement, target: Element) => {
+    const element = target.closest<HTMLElement>(textTargetSelector);
+
+    if (!element || !root.contains(element) || !getTextNodes(element).length) return null;
+
+    return element;
+};
+
+const getInlineEditTarget = (
+    root: HTMLElement,
+    target: EventTarget | null,
+): InlineEditTarget | null => {
+    if (!(target instanceof Element) || target.closest(inlineEditButtonSelector)) return null;
+
+    const image = target instanceof HTMLImageElement ? target : target.closest('img');
+    if (image instanceof HTMLImageElement && root.contains(image)) {
+        return {
+            kind: 'image',
+            image,
+            element: image,
+            ...getTargetStyles(root, image),
+        };
+    }
+
+    const element = getEditableTextElement(root, target);
+    if (!element) return null;
 
     return {
-        left: Math.max(4, Math.min(coords.clientX - rect.left + 8, rect.width - 28)),
-        top: Math.max(4, coords.clientY - rect.top - 18),
+        kind: 'text',
+        element,
+        ...getTargetStyles(root, element),
     };
 };
 
@@ -77,32 +151,39 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
 
     const handleContentMouseMove = (event: MouseEvent<HTMLDivElement>) => {
         const root = contentRef.current;
-        const target = event.target;
-        if (!root || !(target instanceof Node) || !root.contains(target)) return;
-
-        if (target instanceof HTMLImageElement) {
-            const imageRect = target.getBoundingClientRect();
-            setInlineEditTarget({
-                kind: 'image',
-                image: target,
-                style: getButtonStyle(root, {
-                    clientX: imageRect.right,
-                    clientY: imageRect.top + 18,
-                }),
-            });
-            return;
-        }
+        if (!root) return;
 
-        const textNode = getTextNodeFromEvent(root, event);
-        if (!textNode) return;
+        const nextTarget = getInlineEditTarget(root, event.target);
+        if (!nextTarget) return;
 
-        setInlineEditTarget({
-            kind: 'text',
-            textNode,
-            style: getButtonStyle(root, event),
+        setInlineEditTarget((currentTarget) => {
+            if (
+                currentTarget?.kind === nextTarget.kind &&
+                currentTarget.element === nextTarget.element
+            ) {
+                return currentTarget;
+            }
+
+            return nextTarget;
         });
     };
 
+    const handleContentMouseOut = (event: MouseEvent<HTMLDivElement>) => {
+        const element = inlineEditTarget?.element;
+        if (!element || !(event.target instanceof Node) || !element.contains(event.target)) return;
+
+        const nextElement = event.relatedTarget;
+        if (
+            nextElement instanceof Node &&
+            (element.contains(nextElement) ||
+                (nextElement instanceof Element && nextElement.closest(inlineEditButtonSelector)))
+        ) {
+            return;
+        }
+
+        setInlineEditTarget(null);
+    };
+
     const handleOpenInlineEdit = (event: MouseEvent<HTMLButtonElement>) => {
         event.preventDefault();
         event.stopPropagation();
@@ -111,9 +192,12 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
         if (!root || !inlineEditTarget) return;
 
         if (inlineEditTarget.kind === 'text') {
+            const textNode = getTextNodes(inlineEditTarget.element)[0];
+            if (!textNode) return;
+
             openInlineTextEditor({
                 root,
-                textNode: inlineEditTarget.textNode,
+                textNode,
                 onCommit: (html) => onCommitContent(block.id, html),
             });
         } else {
@@ -158,6 +242,7 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
                 contentEditable={false}
                 suppressContentEditableWarning
                 onMouseMove={handleContentMouseMove}
+                onMouseOut={handleContentMouseOut}
                 onMouseLeave={() => setInlineEditTarget(null)}
             >
                 <div
@@ -166,20 +251,26 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
                     dangerouslySetInnerHTML={{__html: block.content}}
                 />
                 {inlineEditTarget && (
-                    <Button
-                        view="raised"
-                        size="xs"
-                        className={`${b('inline-edit-button')} ${stop}`}
-                        style={inlineEditTarget.style}
-                        onClick={handleOpenInlineEdit}
-                        aria-label={
-                            inlineEditTarget.kind === 'image'
-                                ? i18n('edit_image_src')
-                                : i18n('edit_text')
-                        }
-                    >
-                        <Icon data={Pencil} size={12} className={stop} />
-                    </Button>
+                    <>
+                        <div
+                            className={b('inline-edit-outline')}
+                            style={inlineEditTarget.outlineStyle}
+                        />
+                        <Button
+                            view="raised"
+                            size="xs"
+                            className={`${b('inline-edit-button')} ${stop}`}
+                            style={inlineEditTarget.buttonStyle}
+                            onClick={handleOpenInlineEdit}
+                            aria-label={
+                                inlineEditTarget.kind === 'image'
+                                    ? i18n('edit_image_src')
+                                    : i18n('edit_text')
+                            }
+                        >
+                            <Icon data={Pencil} size={12} className={stop} />
+                        </Button>
+                    </>
                 )}
             </div>
         </div>
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
index e147f710..6572fec1 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
@@ -123,6 +123,17 @@
         }
     }
 
+    &__inline-edit-outline {
+        position: absolute;
+        z-index: 1;
+
+        pointer-events: none;
+
+        border: 1px solid var(--g-color-line-focus);
+        border-radius: var(--g-border-radius-xs);
+        background: rgb(82 130 255 / 5%);
+    }
+
     &__inline-edit-button {
         position: absolute;
         z-index: 2;

From 413d653f5d0cb7fadfb000e0a6602006bb14a606 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 22:34:38 +0200
Subject: [PATCH 16/21] fix: polish grid block inline editing

---
 .../GridBlockItem.tsx                         | 117 +++++++++++++++---
 .../GridBlockTemplates.scss                   |  52 +++++++-
 .../textEditing.test.ts                       |  40 +++++-
 .../GridBlockTemplatesNodeView/textEditing.ts |  80 ++++++++++++
 .../src/i18n/grid-block-templates/en.json     |   3 +
 .../src/i18n/grid-block-templates/ru.json     |   3 +
 6 files changed, 272 insertions(+), 23 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
index 9d8f5af2..d424ea0f 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
@@ -12,7 +12,12 @@ import type {GridBlock} from '../types';
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 import type {DropTarget} from './drag';
 import {getBlockDragAttrs} from './drag';
-import {getTextNodes, openInlineImageSrcEditor, openInlineTextEditor} from './textEditing';
+import {
+    getTextNodes,
+    openInlineImageSrcEditor,
+    openInlineLinkEditor,
+    openInlineTextEditor,
+} from './textEditing';
 
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
@@ -60,6 +65,13 @@ type InlineEditTarget =
           buttonStyle: CSSProperties;
           outlineStyle: CSSProperties;
       }
+    | {
+          kind: 'link';
+          link: HTMLAnchorElement;
+          element: HTMLAnchorElement;
+          buttonStyle: CSSProperties;
+          outlineStyle: CSSProperties;
+      }
     | {
           kind: 'image';
           image: HTMLImageElement;
@@ -79,8 +91,8 @@ const getTargetStyles = (root: HTMLElement, target: HTMLElement) => {
 
     return {
         buttonStyle: {
-            left: clamp(left + targetRect.width - 28, 4, rect.width - 28),
-            top: clamp(top + 4, 4, rect.height - 28),
+            left: clamp(left + targetRect.width - 40, 4, rect.width - 40),
+            top: clamp(top + 4, 4, rect.height - 40),
         },
         outlineStyle: {
             left: Math.max(0, left - 3),
@@ -99,6 +111,14 @@ const getEditableTextElement = (root: HTMLElement, target: Element) => {
     return element;
 };
 
+const getEditableLinkElement = (root: HTMLElement, target: Element) => {
+    const link = target instanceof HTMLAnchorElement ? target : target.closest('a');
+
+    if (!(link instanceof HTMLAnchorElement) || !root.contains(link)) return null;
+
+    return link;
+};
+
 const getInlineEditTarget = (
     root: HTMLElement,
     target: EventTarget | null,
@@ -115,6 +135,16 @@ const getInlineEditTarget = (
         };
     }
 
+    const link = getEditableLinkElement(root, target);
+    if (link) {
+        return {
+            kind: 'link',
+            link,
+            element: link,
+            ...getTargetStyles(root, link),
+        };
+    }
+
     const element = getEditableTextElement(root, target);
     if (!element) return null;
 
@@ -184,31 +214,79 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
         setInlineEditTarget(null);
     };
 
-    const handleOpenInlineEdit = (event: MouseEvent<HTMLButtonElement>) => {
-        event.preventDefault();
-        event.stopPropagation();
-
+    const openInlineEditTarget = (target: InlineEditTarget) => {
         const root = contentRef.current;
-        if (!root || !inlineEditTarget) return;
+        if (!root) return false;
 
-        if (inlineEditTarget.kind === 'text') {
-            const textNode = getTextNodes(inlineEditTarget.element)[0];
-            if (!textNode) return;
+        if (target.kind === 'text') {
+            const textNode = getTextNodes(target.element)[0];
+            if (!textNode) return false;
 
             openInlineTextEditor({
                 root,
                 textNode,
                 onCommit: (html) => onCommitContent(block.id, html),
             });
+        } else if (target.kind === 'link') {
+            openInlineLinkEditor({
+                root,
+                link: target.link,
+                onCommit: (html) => onCommitContent(block.id, html),
+            });
         } else {
             openInlineImageSrcEditor({
                 root,
-                image: inlineEditTarget.image,
+                image: target.image,
                 onCommit: (html) => onCommitContent(block.id, html),
             });
         }
 
         setInlineEditTarget(null);
+
+        return true;
+    };
+
+    const handleOpenInlineEdit = (event: MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!inlineEditTarget) return;
+
+        openInlineEditTarget(inlineEditTarget);
+    };
+
+    const handleContentClick = (event: MouseEvent<HTMLDivElement>) => {
+        const root = contentRef.current;
+        const target = event.target;
+        if (!root || !(target instanceof Element) || target.closest(inlineEditButtonSelector)) {
+            return;
+        }
+
+        const link = getEditableLinkElement(root, target);
+        if (!link || target.closest('img')) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        openInlineEditTarget({
+            kind: 'link',
+            link,
+            element: link,
+            ...getTargetStyles(root, link),
+        });
+    };
+
+    const handleContentDoubleClick = (event: MouseEvent<HTMLDivElement>) => {
+        const root = contentRef.current;
+        if (!root) return;
+
+        const target = getInlineEditTarget(root, event.target);
+        if (!target) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        openInlineEditTarget(target);
     };
 
     return (
@@ -241,9 +319,11 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
                 className={`${b('item-content')} ${stop}`}
                 contentEditable={false}
                 suppressContentEditableWarning
+                onClick={handleContentClick}
                 onMouseMove={handleContentMouseMove}
                 onMouseOut={handleContentMouseOut}
                 onMouseLeave={() => setInlineEditTarget(null)}
+                onDoubleClick={handleContentDoubleClick}
             >
                 <div
                     ref={contentRef}
@@ -256,20 +336,21 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
                             className={b('inline-edit-outline')}
                             style={inlineEditTarget.outlineStyle}
                         />
-                        <Button
-                            view="raised"
-                            size="xs"
+                        <button
+                            type="button"
                             className={`${b('inline-edit-button')} ${stop}`}
                             style={inlineEditTarget.buttonStyle}
                             onClick={handleOpenInlineEdit}
                             aria-label={
                                 inlineEditTarget.kind === 'image'
                                     ? i18n('edit_image_src')
-                                    : i18n('edit_text')
+                                    : inlineEditTarget.kind === 'link'
+                                      ? i18n('edit_link')
+                                      : i18n('edit_text')
                             }
                         >
-                            <Icon data={Pencil} size={12} className={stop} />
-                        </Button>
+                            <Icon data={Pencil} size={18} className={stop} />
+                        </button>
                     </>
                 )}
             </div>
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
index 6572fec1..4d9870df 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
@@ -138,11 +138,55 @@
         position: absolute;
         z-index: 2;
 
-        width: 24px;
-        height: 24px;
-        padding: 0;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        width: 40px;
+        height: 40px;
+        padding: 10px;
+
+        cursor: pointer;
+
+        color: var(--g-color-text-primary);
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
+        background: var(--g-color-base-float);
+        box-shadow: 0 8px 18px rgb(0 0 0 / 14%);
+
+        &:hover {
+            border-color: var(--g-color-line-focus);
+            background: var(--g-color-base-generic);
+        }
+    }
 
-        box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
+    &__inline-link-editor {
+        display: inline-grid;
+        grid-template-columns: minmax(96px, 1fr) minmax(132px, 1.3fr);
+        gap: 4px;
+
+        width: min(100%, 520px);
+        padding: 4px;
+
+        vertical-align: middle;
+
+        border: 1px solid var(--g-color-line-focus);
+        border-radius: var(--g-border-radius-s);
+        background: var(--g-color-base-float);
+        box-shadow: 0 8px 18px rgb(0 0 0 / 12%);
+    }
+
+    &__inline-link-editor-input {
+        min-width: 0;
+        height: 28px;
+        padding: 0 8px;
+
+        font: inherit;
+
+        color: inherit;
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-base-background);
     }
 
     &__inline-text-editor {
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts
index bfa631da..93636ca0 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts
@@ -1,4 +1,4 @@
-import {openInlineImageSrcEditor, openInlineTextEditor} from './textEditing';
+import {openInlineImageSrcEditor, openInlineLinkEditor, openInlineTextEditor} from './textEditing';
 
 const keydown = (target: HTMLElement, key: string) => {
     target.dispatchEvent(new KeyboardEvent('keydown', {key, bubbles: true}));
@@ -80,4 +80,42 @@ describe('GridBlockTemplates inline editing', () => {
         expect(root.innerHTML).toBe('<img src="before.png" alt="Preview">');
         expect(onCommit).not.toHaveBeenCalled();
     });
+
+    it('commits link text and href changes and preserves other attributes', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<a href="before.html" class="action">Before</a>';
+        document.body.append(root);
+
+        const link = root.querySelector('a') as HTMLAnchorElement;
+        const onCommit = jest.fn();
+
+        expect(openInlineLinkEditor({root, link, onCommit})).toBe(true);
+
+        const [textInput, hrefInput] = Array.from(root.querySelectorAll('input'));
+        textInput.value = 'After';
+        hrefInput.value = 'after.html';
+        keydown(hrefInput, 'Enter');
+
+        expect(root.innerHTML).toBe('<a href="after.html" class="action">After</a>');
+        expect(onCommit).toHaveBeenCalledWith('<a href="after.html" class="action">After</a>');
+    });
+
+    it('cancels link changes on Escape', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<a href="before.html">Before</a>';
+        document.body.append(root);
+
+        const link = root.querySelector('a') as HTMLAnchorElement;
+        const onCommit = jest.fn();
+
+        openInlineLinkEditor({root, link, onCommit});
+
+        const [textInput, hrefInput] = Array.from(root.querySelectorAll('input'));
+        textInput.value = 'After';
+        hrefInput.value = 'after.html';
+        keydown(textInput, 'Escape');
+
+        expect(root.innerHTML).toBe('<a href="before.html">Before</a>');
+        expect(onCommit).not.toHaveBeenCalled();
+    });
 });
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
index 72ffed51..4f76ff64 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
@@ -1,3 +1,5 @@
+import {i18n} from 'src/i18n/grid-block-templates';
+
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 
 const b = cnGridBlockTemplates;
@@ -210,3 +212,81 @@ export function openInlineImageSrcEditor({
 
     return true;
 }
+
+export function openInlineLinkEditor({
+    root,
+    link,
+    onCommit,
+}: {
+    root: HTMLElement;
+    link: HTMLAnchorElement;
+    onCommit: (html: string) => void;
+}) {
+    root.querySelector(INLINE_TEXT_EDITOR_SELECTOR)?.remove();
+
+    const originalLink = link.cloneNode(true) as HTMLAnchorElement;
+    const wrapper = document.createElement('span');
+    wrapper.setAttribute(INLINE_TEXT_EDITOR_ATTR, 'true');
+    wrapper.className = `${b('inline-link-editor')} ${stop}`;
+
+    const textInput = document.createElement('input');
+    textInput.className = `${b('inline-link-editor-input')} ${stop}`;
+    textInput.value = link.textContent ?? '';
+    textInput.setAttribute('aria-label', i18n('edit_link_text'));
+    textInput.setAttribute('placeholder', i18n('edit_link_text'));
+
+    const hrefInput = document.createElement('input');
+    hrefInput.className = `${b('inline-link-editor-input')} ${stop}`;
+    hrefInput.value = link.getAttribute('href') ?? '';
+    hrefInput.setAttribute('aria-label', i18n('edit_link_href'));
+    hrefInput.setAttribute('placeholder', i18n('edit_link_href'));
+
+    wrapper.append(textInput, hrefInput);
+
+    let finished = false;
+
+    const commit = () => {
+        if (finished) return;
+        finished = true;
+
+        const nextLink = originalLink.cloneNode(false) as HTMLAnchorElement;
+        nextLink.textContent = textInput.value;
+        nextLink.setAttribute('href', hrefInput.value);
+
+        wrapper.replaceWith(nextLink);
+        onCommit(root.innerHTML);
+    };
+
+    const cancel = () => {
+        if (finished) return;
+        finished = true;
+        wrapper.replaceWith(originalLink);
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commit();
+            return;
+        }
+
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            cancel();
+        }
+    };
+
+    wrapper.addEventListener('keydown', handleKeyDown);
+    wrapper.addEventListener('focusout', (event) => {
+        if (event.relatedTarget instanceof Node && wrapper.contains(event.relatedTarget)) return;
+
+        commit();
+    });
+
+    link.replaceWith(wrapper);
+
+    textInput.focus();
+    textInput.select();
+
+    return true;
+}
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
index 6752c81a..a25d8f06 100644
--- a/packages/editor/src/i18n/grid-block-templates/en.json
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -12,6 +12,9 @@
   "css": "CSS",
   "drag_block": "Drag block {{index}}",
   "edit_image_src": "Edit image source",
+  "edit_link": "Edit link",
+  "edit_link_href": "URL",
+  "edit_link_text": "Text",
   "edit_text": "Edit text",
   "grid_css": "Grid CSS",
   "html": "HTML",
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
index 4cbbde0d..8c7354d8 100644
--- a/packages/editor/src/i18n/grid-block-templates/ru.json
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -12,6 +12,9 @@
   "css": "CSS",
   "drag_block": "Перетащить блок {{index}}",
   "edit_image_src": "Изменить ссылку картинки",
+  "edit_link": "Изменить ссылку",
+  "edit_link_href": "URL",
+  "edit_link_text": "Текст",
   "edit_text": "Изменить текст",
   "grid_css": "CSS сетки",
   "html": "HTML",

From 6afaa2983b9905593c441eae858335a213362dc7 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 22:49:02 +0200
Subject: [PATCH 17/21] fix: add grid block actions menu

---
 .../GridBlockItem.tsx                         | 61 ++++++++++++++++---
 .../GridBlockTemplates.scss                   | 12 +++-
 .../GridBlockTemplatesView.tsx                |  7 +++
 .../TemplatesPopup.tsx                        | 20 +++---
 .../src/i18n/grid-block-templates/en.json     |  2 +
 .../src/i18n/grid-block-templates/ru.json     |  2 +
 6 files changed, 84 insertions(+), 20 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
index d424ea0f..42d83a4b 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
@@ -1,8 +1,8 @@
 import {useRef, useState} from 'react';
 import type {CSSProperties, MouseEvent, PointerEvent as ReactPointerEvent} from 'react';
 
-import {Gear, GripHorizontal, Pencil} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Ellipsis, Gear, GripHorizontal, Pencil, TrashBin} from '@gravity-ui/icons';
+import {Button, Icon, Menu, Popup} from '@gravity-ui/uikit';
 
 import {i18n} from 'src/i18n/grid-block-templates';
 
@@ -56,6 +56,7 @@ interface GridBlockItemProps {
     onBeginDrag: (blockId: string, event: ReactPointerEvent<HTMLButtonElement>) => void;
     onOpenSettings: (blockId: string, anchor: HTMLElement) => void;
     onCommitContent: (blockId: string, content: string) => void;
+    onRemove: (blockId: string) => void;
 }
 
 type InlineEditTarget =
@@ -163,9 +164,12 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
     onBeginDrag,
     onOpenSettings,
     onCommitContent,
+    onRemove,
 }) => {
     const contentRef = useRef<HTMLDivElement>(null);
     const [inlineEditTarget, setInlineEditTarget] = useState<InlineEditTarget | null>(null);
+    const [blockMenuAnchor, setBlockMenuAnchor] = useState<HTMLElement | null>(null);
+    const [blockMenuOpen, setBlockMenuOpen] = useState(false);
 
     const number = index + 1;
     const isDropBefore = dropTarget?.id === block.id && dropTarget.placement === 'before';
@@ -175,6 +179,16 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
         onOpenSettings(block.id, event.currentTarget);
     };
 
+    const handleToggleBlockMenu = (event: MouseEvent<HTMLElement>) => {
+        setBlockMenuAnchor(event.currentTarget);
+        setBlockMenuOpen((open) => !open);
+    };
+
+    const handleRemoveBlock = () => {
+        setBlockMenuOpen(false);
+        onRemove(block.id);
+    };
+
     const handlePointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
         onBeginDrag(block.id, event);
     };
@@ -306,15 +320,42 @@ export const GridBlockItem: React.FC<GridBlockItemProps> = ({
             >
                 <Icon data={GripHorizontal} size={14} />
             </button>
-            <Button
-                view="flat"
-                size="s"
-                className={`${b('item-gear')} ${stop}`}
-                onClick={handleOpenSettings}
-                aria-label={i18n('block_css', {index: String(number)})}
+            <div className={`${b('item-controls', {open: blockMenuOpen})} ${stop}`}>
+                <Button
+                    view="flat"
+                    size="s"
+                    className={stop}
+                    onClick={handleOpenSettings}
+                    aria-label={i18n('block_css', {index: String(number)})}
+                >
+                    <Icon data={Gear} size={14} className={stop} />
+                </Button>
+                <Button
+                    view="flat"
+                    size="s"
+                    className={stop}
+                    onClick={handleToggleBlockMenu}
+                    aria-label={i18n('block_actions', {index: String(number)})}
+                >
+                    <Icon data={Ellipsis} size={14} className={stop} />
+                </Button>
+            </div>
+            <Popup
+                anchorElement={blockMenuAnchor}
+                open={blockMenuOpen}
+                onOpenChange={setBlockMenuOpen}
+                placement="bottom-end"
             >
-                <Icon data={Gear} size={14} className={stop} />
-            </Button>
+                <Menu className={stop}>
+                    <Menu.Item
+                        className={stop}
+                        iconStart={<Icon data={TrashBin} />}
+                        onClick={handleRemoveBlock}
+                    >
+                        {i18n('remove_block')}
+                    </Menu.Item>
+                </Menu>
+            </Popup>
             <div
                 className={`${b('item-content')} ${stop}`}
                 contentEditable={false}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
index 4d9870df..706520df 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
@@ -51,17 +51,25 @@
         }
     }
 
-    &__item-gear {
+    &__item-controls {
         position: absolute;
+        z-index: 3;
         top: 2px;
         right: 2px;
 
+        display: flex;
+        gap: 2px;
+
         opacity: 0;
 
         transition: opacity 0.1s ease-in-out;
+
+        &_open {
+            opacity: 1;
+        }
     }
 
-    &__item:hover &__item-gear {
+    &__item:hover &__item-controls {
         opacity: 1;
     }
 
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
index 9f1be1c5..14cf8d79 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -145,6 +145,11 @@ export const GridBlockTemplatesView: React.FC<{
         patchBlock(id, {content});
     };
 
+    const removeBlock = (id: string) => {
+        setBlocks(blocks.filter((block) => block.id !== id));
+        if (editingBlockSettingsId === id) setEditingBlockSettingsId(null);
+    };
+
     const commitContainerHtml = (html: string) => {
         const nextBlocks = parseContainerHtml(html, blocks);
         if (nextBlocks) setBlocks(nextBlocks);
@@ -215,6 +220,7 @@ export const GridBlockTemplatesView: React.FC<{
                         templates={containerTemplates}
                         allowAdd={allowAdd}
                         emptyText={i18n('container_templates_empty')}
+                        hasStoredTemplates={storedTemplates.length > 0}
                         onClose={closeContainerTemplates}
                         onApply={applyContainerTemplate}
                         onAdded={setStoredTemplates}
@@ -234,6 +240,7 @@ export const GridBlockTemplatesView: React.FC<{
                         onBeginDrag={beginBlockDrag}
                         onOpenSettings={openBlockSettings}
                         onCommitContent={commitBlockContent}
+                        onRemove={removeBlock}
                     />
                 ))}
             </div>
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
index 0d635b6d..5c222466 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
@@ -23,6 +23,7 @@ interface TemplatesPopupProps<TTemplate extends GridBlockTemplate> {
     templates: TTemplate[];
     allowAdd: boolean;
     emptyText: string;
+    hasStoredTemplates: boolean;
     onClose: () => void;
     onApply: (template: TTemplate) => void;
     onAdded: (templates: GridBlockTemplate[]) => void;
@@ -35,6 +36,7 @@ export function TemplatesPopup<TTemplate extends GridBlockTemplate>({
     templates,
     allowAdd,
     emptyText,
+    hasStoredTemplates,
     onClose,
     onApply,
     onAdded,
@@ -60,7 +62,7 @@ export function TemplatesPopup<TTemplate extends GridBlockTemplate>({
 
     const handleClear = () => {
         onCleared(clearStoredTemplates());
-        setFilter('');
+        close();
     };
 
     return (
@@ -116,13 +118,15 @@ export function TemplatesPopup<TTemplate extends GridBlockTemplate>({
                                         >
                                             {i18n('add_template')}
                                         </Menu.Item>
-                                        <Menu.Item
-                                            className={stop}
-                                            iconStart={<Icon data={TrashBin} />}
-                                            onClick={handleClear}
-                                        >
-                                            {i18n('clear_templates')}
-                                        </Menu.Item>
+                                        {hasStoredTemplates && (
+                                            <Menu.Item
+                                                className={stop}
+                                                iconStart={<Icon data={TrashBin} />}
+                                                onClick={handleClear}
+                                            >
+                                                {i18n('clear_templates')}
+                                            </Menu.Item>
+                                        )}
                                         <div
                                             role="separator"
                                             className={b('templates-separator', [stop])}
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
index a25d8f06..e2991884 100644
--- a/packages/editor/src/i18n/grid-block-templates/en.json
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -2,6 +2,7 @@
   "add_block": "Add block",
   "add_template": "Add",
   "block_css": "Block {{index}} CSS",
+  "block_actions": "Block {{index}} actions",
   "block_html_input_placeholder": "<div style=\"padding:16px;border-radius:8px;background:#f8fafc\">Block HTML</div>",
   "block_templates_empty": "No block templates",
   "cancel": "Cancel",
@@ -21,6 +22,7 @@
   "block_html_placeholder": "<button type=\"button\">Button text</button>",
   "insert": "Insert",
   "remove_grid": "Remove grid",
+  "remove_block": "Delete block",
   "save": "Save",
   "search_templates": "Search by name",
   "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\" group=\"Marketing\">\n  <style>\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n  </style>\n  <div class=\"grid\">\n    <div>Left</div>\n    <div>Right</div>\n  </div>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\" group=\"Marketing\">\n  <style>\n    & { padding: 16px; border-radius: 8px; background: #f8fafc; }\n  </style>\n  <div>Card text</div>\n</template>"
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
index 8c7354d8..0f479efe 100644
--- a/packages/editor/src/i18n/grid-block-templates/ru.json
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -2,6 +2,7 @@
   "add_block": "Добавить блок",
   "add_template": "Добавить",
   "block_css": "CSS блока {{index}}",
+  "block_actions": "Действия блока {{index}}",
   "block_html_input_placeholder": "<div style=\"padding:16px;border-radius:8px;background:#f8fafc\">HTML блока</div>",
   "block_templates_empty": "Нет шаблонов блоков",
   "cancel": "Отмена",
@@ -21,6 +22,7 @@
   "block_html_placeholder": "<button type=\"button\">Текст кнопки</button>",
   "insert": "Вставить",
   "remove_grid": "Удалить сетку",
+  "remove_block": "Удалить блок",
   "save": "Сохранить",
   "search_templates": "Поиск по названию",
   "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\" group=\"Marketing\">\n  <style>\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n  </style>\n  <div class=\"grid\">\n    <div>Left</div>\n    <div>Right</div>\n  </div>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\" group=\"Marketing\">\n  <style>\n    & { padding: 16px; border-radius: 8px; background: #f8fafc; }\n  </style>\n  <div>Card text</div>\n</template>"

From d0364d0fc02728d5961b9ac27c340029e75dfe5d Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 22:53:15 +0200
Subject: [PATCH 18/21] fix: update grid block settings live

---
 .../SettingsPopups.tsx                        | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
index ca0ed5b0..161dfa35 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
@@ -34,15 +34,31 @@ const HtmlCssSettingsPopup: React.FC<HtmlCssSettingsPopupProps> = ({
     cssPlaceholder,
 }) => {
     const [draftHtml, setDraftHtml] = useState(html);
+    const [draftCss, setDraftCss] = useState(css);
 
     useEffect(() => {
         setDraftHtml(html);
-    }, [html, open]);
+        setDraftCss(css);
+    }, [css, html, open]);
+
+    const handleHtmlUpdate = (value: string) => {
+        setDraftHtml(value);
+        onHtmlCommit(value);
+    };
 
     const commitHtml = () => {
         onHtmlCommit(draftHtml);
     };
 
+    const handleCssUpdate = (value: string) => {
+        setDraftCss(value);
+        onCssChange(value);
+    };
+
+    const commitCss = () => {
+        onCssChange(draftCss);
+    };
+
     return (
         <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
             <div className={b('settings-editor', [stop])}>
@@ -51,7 +67,7 @@ const HtmlCssSettingsPopup: React.FC<HtmlCssSettingsPopupProps> = ({
                     <TextArea
                         controlProps={{className: stop, onBlur: commitHtml}}
                         value={draftHtml}
-                        onUpdate={setDraftHtml}
+                        onUpdate={handleHtmlUpdate}
                         placeholder={htmlPlaceholder}
                         minRows={8}
                         autoFocus
@@ -60,9 +76,9 @@ const HtmlCssSettingsPopup: React.FC<HtmlCssSettingsPopupProps> = ({
                 <div className={b('field')}>
                     <div className={b('field-label')}>{i18n('css')}</div>
                     <TextArea
-                        controlProps={{className: stop}}
-                        value={css}
-                        onUpdate={onCssChange}
+                        controlProps={{className: stop, onBlur: commitCss}}
+                        value={draftCss}
+                        onUpdate={handleCssUpdate}
                         placeholder={cssPlaceholder}
                         minRows={8}
                     />

From 2a9032e2241ae27e651c20fca4e95d23f8a5af46 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 22:57:19 +0200
Subject: [PATCH 19/21] fix: remove hardcoded grid block templates

---
 .../grid-block-background-placeholder.svg     |   16 -
 demo/src/defaults/grid-block-placeholder.svg  |    8 -
 demo/src/defaults/grid-block-templates.ts     | 2819 -----------------
 demo/src/global.d.ts                          |    5 -
 .../GridBlockTemplates.tsx                    |    2 -
 5 files changed, 2850 deletions(-)
 delete mode 100644 demo/src/defaults/grid-block-background-placeholder.svg
 delete mode 100644 demo/src/defaults/grid-block-placeholder.svg
 delete mode 100644 demo/src/defaults/grid-block-templates.ts

diff --git a/demo/src/defaults/grid-block-background-placeholder.svg b/demo/src/defaults/grid-block-background-placeholder.svg
deleted file mode 100644
index 31f9ebed..00000000
--- a/demo/src/defaults/grid-block-background-placeholder.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" fill="none">
-  <rect width="960" height="540" fill="#F7F9FC"/>
-  <defs>
-    <pattern id="grid-small" width="24" height="24" patternUnits="userSpaceOnUse">
-      <path d="M24 0H0V24" stroke="#D9E1EC" stroke-width="1"/>
-    </pattern>
-    <pattern id="grid-large" width="120" height="120" patternUnits="userSpaceOnUse">
-      <rect width="120" height="120" fill="url(#grid-small)"/>
-      <path d="M120 0H0V120" stroke="#B8C4D6" stroke-width="2"/>
-    </pattern>
-  </defs>
-  <rect width="960" height="540" fill="url(#grid-large)"/>
-  <rect x="156" y="120" width="648" height="300" rx="24" fill="#FFFFFF" fill-opacity="0.72" stroke="#AAB8CC" stroke-width="2" stroke-dasharray="14 14"/>
-  <path d="M300 270H660" stroke="#72839B" stroke-width="12" stroke-linecap="round" stroke-dasharray="4 28"/>
-  <path d="M480 90V450" stroke="#72839B" stroke-width="8" stroke-linecap="round" stroke-dasharray="4 28"/>
-</svg>
diff --git a/demo/src/defaults/grid-block-placeholder.svg b/demo/src/defaults/grid-block-placeholder.svg
deleted file mode 100644
index 9c61f2d4..00000000
--- a/demo/src/defaults/grid-block-placeholder.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" fill="none">
-  <rect width="960" height="540" rx="32" fill="#F3F6FB"/>
-  <rect x="64" y="64" width="832" height="412" rx="24" fill="#FFFFFF" stroke="#D8DEE8" stroke-width="2"/>
-  <path d="M190 359L330 219L431 320L507 244L770 359" stroke="#9AA7B8" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
-  <circle cx="666" cy="168" r="46" fill="#FFD88A"/>
-  <rect x="346" y="389" width="268" height="18" rx="9" fill="#C6D0DE"/>
-  <rect x="402" y="423" width="156" height="14" rx="7" fill="#D8DEE8"/>
-</svg>
diff --git a/demo/src/defaults/grid-block-templates.ts b/demo/src/defaults/grid-block-templates.ts
deleted file mode 100644
index 490458f0..00000000
--- a/demo/src/defaults/grid-block-templates.ts
+++ /dev/null
@@ -1,2819 +0,0 @@
-import {
-    parseTemplates,
-    type GridBlockTemplate,
-} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/templates/index.js';
-
-import backgroundPlaceholderImage from './grid-block-background-placeholder.svg';
-import placeholderImage from './grid-block-placeholder.svg';
-
-const templateMarkup = `<template id="product-landing-page" title="Product landing" type="container" group="Product landing">
-  <style>
-    .grid {
-      display: grid;
-      gap: 24px;
-      max-width: 1120px;
-      margin: 0 auto;
-      padding: 32px 16px;
-    }
-  </style>
-  <div class="grid">
-    <div class="block-1">
-      <h1>Launch faster with a focused product page</h1>
-      <p>Describe the offer, show proof, and give readers one obvious next step.</p>
-      <a class="landing-action" href="#">Start now</a>
-    </div>
-    <div class="block-2">
-      <article><strong>Fast setup</strong><span>Reusable layout and copy blocks.</span></article>
-      <article><strong>Clear proof</strong><span>Metrics, outcomes, and quotes.</span></article>
-      <article><strong>Simple CTA</strong><span>One direct conversion path.</span></article>
-    </div>
-  </div>
-</template>
-
-<template id="product-landing-hero" title="Hero" type="block" group="Product landing">
-  <style>
-    & {
-      padding: 48px;
-      border-radius: 24px;
-      background: #101828;
-      color: #ffffff;
-    }
-
-    h1 {
-      max-width: 760px;
-      margin: 0 0 16px;
-      font-size: 56px;
-      line-height: 110%;
-    }
-
-    p {
-      max-width: 560px;
-      margin: 0 0 28px;
-      color: #d0d5dd;
-      font-size: 20px;
-      line-height: 140%;
-    }
-
-    .landing-action {
-      display: inline-flex;
-      padding: 12px 18px;
-      border-radius: 10px;
-      background: #ffbe5c;
-      color: #101828;
-      font-weight: 600;
-      text-decoration: none;
-    }
-  </style>
-  <h1>Launch faster with a focused product page</h1>
-  <p>Describe the offer, show proof, and give readers one obvious next step.</p>
-  <a class="landing-action" href="#">Start now</a>
-</template>
-
-<template id="product-landing-features" title="Feature cards" type="block" group="Product landing">
-  <style>
-    & {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    article {
-      display: grid;
-      gap: 10px;
-      padding: 22px;
-      border: 1px solid #e4e7ec;
-      border-radius: 16px;
-      background: #ffffff;
-    }
-
-    strong {
-      color: #101828;
-      font-size: 22px;
-      line-height: 120%;
-    }
-
-    span {
-      color: #667085;
-      font-size: 16px;
-      line-height: 140%;
-    }
-  </style>
-  <article><strong>Fast setup</strong><span>Reusable layout and copy blocks.</span></article>
-  <article><strong>Clear proof</strong><span>Metrics, outcomes, and quotes.</span></article>
-  <article><strong>Simple CTA</strong><span>One direct conversion path.</span></article>
-</template>
-
-<template id="internal-kb-page" title="Knowledge base page" type="container" group="Internal knowledge base">
-  <style>
-    .grid {
-      display: grid;
-      grid-template-columns: 280px minmax(0, 1fr);
-      gap: 24px;
-      max-width: 1180px;
-      margin: 0 auto;
-      padding: 24px 16px;
-    }
-  </style>
-  <div class="grid">
-    <div class="block-1">
-      <strong>On this page</strong>
-      <a href="#overview">Overview</a>
-      <a href="#process">Process</a>
-      <a href="#owners">Owners</a>
-    </div>
-    <div class="block-2">
-      <h1>Team knowledge base</h1>
-      <p>Use this page to collect status, instructions, owners, and related links.</p>
-      <section id="overview"><h2>Overview</h2><p>Short context for readers.</p></section>
-      <section id="process"><h2>Process</h2><p>Steps, agreements, and deadlines.</p></section>
-    </div>
-  </div>
-</template>
-
-<template id="internal-kb-sidebar" title="Sidebar nav" type="block" group="Internal knowledge base">
-  <style>
-    & {
-      display: grid;
-      align-content: start;
-      gap: 10px;
-      padding: 18px;
-      border-radius: 16px;
-      background: #f4f7fb;
-    }
-
-    strong {
-      color: #1f2937;
-      font-size: 18px;
-    }
-
-    a {
-      color: #2563eb;
-      text-decoration: none;
-    }
-  </style>
-  <strong>On this page</strong>
-  <a href="#overview">Overview</a>
-  <a href="#process">Process</a>
-  <a href="#owners">Owners</a>
-</template>
-
-<template id="internal-kb-content" title="Content body" type="block" group="Internal knowledge base">
-  <style>
-    & {
-      display: grid;
-      gap: 18px;
-      padding: 28px;
-      border: 1px solid #e5e7eb;
-      border-radius: 18px;
-      background: #ffffff;
-      color: #1f2937;
-    }
-
-    h1,
-    h2,
-    p {
-      margin: 0;
-    }
-
-    h1 {
-      font-size: 40px;
-      line-height: 115%;
-    }
-
-    h2 {
-      font-size: 24px;
-      line-height: 125%;
-    }
-
-    p {
-      color: #4b5563;
-      font-size: 16px;
-      line-height: 150%;
-    }
-  </style>
-  <h1>Team knowledge base</h1>
-  <p>Use this page to collect status, instructions, owners, and related links.</p>
-  <section id="overview"><h2>Overview</h2><p>Short context for readers.</p></section>
-  <section id="process"><h2>Process</h2><p>Steps, agreements, and deadlines.</p></section>
-</template>
-
-<template id="benefits-yandex-hr-page" title="Benefits page" type="container" group="Yandex HR benefits">
-  <style>
-    .grid {
-      display: grid;
-      gap: 48px;
-      width: min(100%, 1280px);
-      margin: 0 auto;
-      padding: 0 16px 45px;
-      box-sizing: border-box;
-    }
-
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    img {
-      display: block;
-    }
-  </style>
-  <div class="grid">
-      <div class="block-1">
-        <div class="benefits-hero__content">
-          <div class="benefits-hero__title">Бенефиты</div>
-          <div class="benefits-hero__text">
-            Здесь всё про ДМС, массаж,<br>
-            жилищную программу, скидки<br>
-            и другие преимущества
-          </div>
-        </div>
-      </div>
-      <div class="block-2">
-        <a class="benefits-banner benefits-banner_dms" href="https://wiki.yandex-team.ru/hr/kompensacii/straxovanie/" aria-label="ДМС"></a>
-        <a class="benefits-banner benefits-banner_food" href="https://wiki.yandex-team.ru/hr/kompensacii/novaja-stranica-po-pitaniju01092020/" aria-label="Питание"></a>
-        <a class="benefits-banner benefits-banner_sport" href="https://wiki.yandex-team.ru/hr/kompensacii/sport/" aria-label="Спорт"></a>
-        <a class="benefits-banner benefits-banner_family" href="https://wiki.yandex-team.ru/hr/kompensacii/benefity-dlja-semejj-s-detmi/" aria-label="Семья"></a>
-        <a class="benefits-banner benefits-banner_finance" href="https://wiki.yandex-team.ru/hr/kompensacii/fin/" aria-label="Финансы"></a>
-        <a class="benefits-banner benefits-banner_discounts" href="https://wiki.yandex-team.ru/hr/kompensacii/skidkinew/" aria-label="Скидки"></a>
-      </div>
-      <div class="block-3">
-        <a class="benefits-link" href="https://wiki.yandex-team.ru/HR/LgotyBelarus/" target="_blank">
-          <span>Бенефиты в Беларуси</span>
-          <img src="${placeholderImage}" alt="">
-        </a>
-        <a class="benefits-link" href="https://wiki.yandex-team.ru/hr/kompensacii/vseolgotaxdljahrbp/" target="_blank">
-          <span>Вики для HR-партнеров</span>
-          <img src="${placeholderImage}" alt="">
-        </a>
-      </div>
-      <div class="block-4">
-        <div class="benefits-contact-card">
-          <img src="${placeholderImage}" alt="">
-          <div class="benefits-contact-card__title">Чат в Мессенджере</div>
-          <a class="benefits-contact-card__link" href="https://ya.cc/helpy">robot-helpy</a>
-        </div>
-        <div class="benefits-contact-card">
-          <img src="${placeholderImage}" alt="">
-          <div class="benefits-contact-card__title">Почта</div>
-          <a class="benefits-contact-card__link" href="mailto:helpy@yandex-team.ru" target="_blank">helpy@yandex-team.ru</a>
-        </div>
-        <div class="benefits-contact-card">
-          <img src="${placeholderImage}" alt="">
-          <div class="benefits-contact-card__title">Телефон</div>
-          <div class="benefits-contact-card__text">8 (800) 250-96-39, доб. 444</div>
-        </div>
-        <div class="benefits-contact-card">
-          <img src="${placeholderImage}" alt="">
-          <div class="benefits-contact-card__title">Портал</div>
-          <a class="benefits-contact-card__link" href="https://helpy.yandex-team.ru/" target="_blank">helpy.yandex-team.ru</a>
-        </div>
-      </div>
-      <div class="block-5">
-        <img class="benefits-footer-logo" src="${placeholderImage}" alt="YaTeam">
-      </div>
-  </div>
-</template>
-
-<template id="benefits-yandex-hr-hero" title="Hero" type="block" group="Yandex HR benefits">
-  <style>
-    & {
-      display: flex;
-      min-height: 337px;
-      padding: 24px;
-      align-items: center;
-      border-radius: 24px;
-      background: url("${backgroundPlaceholderImage}") no-repeat center / contain;
-      box-sizing: border-box;
-    }
-
-    .benefits-hero__title {
-      margin-bottom: 5px;
-      color: #222a3a;
-      font-size: 64px;
-      font-weight: 600;
-      line-height: 110%;
-    }
-
-    .benefits-hero__text {
-      color: #222a3a;
-      font-size: 20px;
-      font-weight: 400;
-      line-height: 140%;
-    }
-  </style>
-  <div class="benefits-hero__content">
-      <div class="benefits-hero__title">Бенефиты</div>
-      <div class="benefits-hero__text">
-        Здесь всё про ДМС, массаж,<br>
-        жилищную программу, скидки<br>
-        и другие преимущества
-      </div>
-  </div>
-</template>
-
-<template id="benefits-yandex-hr-banners" title="Banner grid" type="block" group="Yandex HR benefits">
-  <style>
-    & {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 12px;
-    }
-
-    .benefits-banner {
-      display: block;
-      height: 310px;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      box-sizing: border-box;
-    }
-
-    .benefits-banner_dms {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_dms:hover {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_food {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_food:hover {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_sport {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_sport:hover {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_family {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_family:hover {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_finance {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_finance:hover {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_discounts {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .benefits-banner_discounts:hover {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-  </style>
-  <a class="benefits-banner benefits-banner_dms" href="https://wiki.yandex-team.ru/hr/kompensacii/straxovanie/" aria-label="ДМС"></a>
-    <a class="benefits-banner benefits-banner_food" href="https://wiki.yandex-team.ru/hr/kompensacii/novaja-stranica-po-pitaniju01092020/" aria-label="Питание"></a>
-    <a class="benefits-banner benefits-banner_sport" href="https://wiki.yandex-team.ru/hr/kompensacii/sport/" aria-label="Спорт"></a>
-    <a class="benefits-banner benefits-banner_family" href="https://wiki.yandex-team.ru/hr/kompensacii/benefity-dlja-semejj-s-detmi/" aria-label="Семья"></a>
-    <a class="benefits-banner benefits-banner_finance" href="https://wiki.yandex-team.ru/hr/kompensacii/fin/" aria-label="Финансы"></a>
-  <a class="benefits-banner benefits-banner_discounts" href="https://wiki.yandex-team.ru/hr/kompensacii/skidkinew/" aria-label="Скидки"></a>
-</template>
-
-<template id="benefits-yandex-hr-links" title="Region and HR links" type="block" group="Yandex HR benefits">
-  <style>
-    & {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 12px;
-    }
-
-    .benefits-link {
-      display: flex;
-      width: 100%;
-      padding: 20px 24px;
-      justify-content: space-between;
-      align-items: center;
-      border: 1px solid #cfcddd;
-      border-radius: 64px;
-      box-sizing: border-box;
-      color: #222a3a;
-      font-size: 32px;
-      font-weight: 500;
-      line-height: 120%;
-    }
-
-    .benefits-link img {
-      height: 40px;
-    }
-  </style>
-  <a class="benefits-link" href="https://wiki.yandex-team.ru/HR/LgotyBelarus/" target="_blank">
-      <span>Бенефиты в Беларуси</span>
-      <img src="${placeholderImage}" alt="">
-    </a>
-    <a class="benefits-link" href="https://wiki.yandex-team.ru/hr/kompensacii/vseolgotaxdljahrbp/" target="_blank">
-      <span>Вики для HR-партнеров</span>
-      <img src="${placeholderImage}" alt="">
-  </a>
-</template>
-
-<template id="benefits-yandex-hr-contacts" title="Contacts" type="block" group="Yandex HR benefits">
-  <style>
-    & {
-      display: grid;
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-      gap: 12px;
-    }
-
-    .benefits-contact-card {
-      display: flex;
-      height: 185px;
-      padding: 24px;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: flex-start;
-      border-radius: 24px;
-      background-color: #f5f4fd;
-      box-sizing: border-box;
-    }
-
-    .benefits-contact-card img {
-      height: 32px;
-    }
-
-    .benefits-contact-card__title {
-      color: #222a3a;
-      font-size: 24px;
-      font-weight: 500;
-      line-height: 120%;
-    }
-
-    .benefits-contact-card__link,
-    .benefits-contact-card__text {
-      color: #575e6e;
-      font-size: 20px;
-      font-weight: 400;
-      line-height: 140%;
-    }
-  </style>
-  <div class="benefits-contact-card">
-      <img src="${placeholderImage}" alt="">
-      <div class="benefits-contact-card__title">Чат в Мессенджере</div>
-      <a class="benefits-contact-card__link" href="https://ya.cc/helpy">robot-helpy</a>
-    </div>
-    <div class="benefits-contact-card">
-      <img src="${placeholderImage}" alt="">
-      <div class="benefits-contact-card__title">Почта</div>
-      <a class="benefits-contact-card__link" href="mailto:helpy@yandex-team.ru" target="_blank">helpy@yandex-team.ru</a>
-    </div>
-    <div class="benefits-contact-card">
-      <img src="${placeholderImage}" alt="">
-      <div class="benefits-contact-card__title">Телефон</div>
-      <div class="benefits-contact-card__text">8 (800) 250-96-39, доб. 444</div>
-    </div>
-    <div class="benefits-contact-card">
-      <img src="${placeholderImage}" alt="">
-      <div class="benefits-contact-card__title">Портал</div>
-      <a class="benefits-contact-card__link" href="https://helpy.yandex-team.ru/" target="_blank">helpy.yandex-team.ru</a>
-  </div>
-</template>
-
-<template id="gravity-ui-samples-landing-page" title="UI samples landing" type="container" group="Gravity UI samples">
-  <style>
-    .grid {
-      display: grid;
-      gap: 24px;
-      max-width: 1180px;
-      margin: 0 auto;
-      padding: 32px 16px;
-      box-sizing: border-box;
-      color: #1d2633;
-      font-family: var(--g-font-family-sans, "YS Text", Arial, sans-serif);
-    }
-
-    .grid * {
-      box-sizing: border-box;
-    }
-
-    .grid a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    .grid button,
-    .grid input {
-      font: inherit;
-    }
-
-    .block-1 {
-      display: grid;
-      grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
-      gap: 24px;
-      min-height: 520px;
-      padding: 32px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #f7f9fc;
-    }
-
-    .block-1 .guis-hero__copy {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 20px;
-      padding: 16px;
-    }
-
-    .block-1 .guis-kicker {
-      width: fit-content;
-      padding: 6px 10px;
-      border: 1px solid #d8deea;
-      border-radius: 999px;
-      background: #ffffff;
-      color: #4b596c;
-      font-size: 13px;
-      font-weight: 500;
-      line-height: 16px;
-    }
-
-    .block-1 h1,
-    .block-1 p {
-      margin: 0;
-    }
-
-    .block-1 h1 {
-      max-width: 520px;
-      color: #111827;
-      font-size: 54px;
-      font-weight: 600;
-      line-height: 1.05;
-    }
-
-    .block-1 p {
-      max-width: 460px;
-      color: #526071;
-      font-size: 18px;
-      line-height: 1.5;
-    }
-
-    .block-1 .guis-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      padding-top: 4px;
-    }
-
-    .block-1 .guis-button {
-      display: inline-flex;
-      min-height: 40px;
-      padding: 0 16px;
-      align-items: center;
-      border: 1px solid #d8deea;
-      border-radius: 8px;
-      background: #ffffff;
-      color: #1d2633;
-      font-size: 15px;
-      font-weight: 500;
-    }
-
-    .block-1 .guis-button_primary {
-      border-color: #111827;
-      background: #111827;
-      color: #ffffff;
-    }
-
-    .block-1 .guis-hero__panel {
-      display: flex;
-      align-items: center;
-      min-width: 0;
-    }
-
-    .block-1 .guis-window {
-      overflow: hidden;
-      width: 100%;
-      border: 1px solid #d8deea;
-      border-radius: 16px;
-      background: #ffffff;
-      box-shadow: 0 18px 50px rgba(34, 43, 60, 0.14);
-    }
-
-    .block-1 .guis-window__bar {
-      display: flex;
-      height: 40px;
-      padding: 0 14px;
-      align-items: center;
-      gap: 7px;
-      border-bottom: 1px solid #edf0f6;
-      color: #657185;
-      font-size: 13px;
-    }
-
-    .block-1 .guis-window__bar span {
-      width: 9px;
-      height: 9px;
-      border-radius: 50%;
-      background: #d8deea;
-    }
-
-    .block-1 .guis-window__bar strong {
-      margin-left: 8px;
-      font-weight: 500;
-    }
-
-    .block-1 .guis-app {
-      display: grid;
-      grid-template-columns: 160px minmax(0, 1fr);
-      min-height: 360px;
-      background: #ffffff;
-    }
-
-    .block-1 .guis-sidebar {
-      display: grid;
-      align-content: start;
-      gap: 18px;
-      padding: 18px;
-      border-right: 1px solid #edf0f6;
-      background: #f8fafd;
-    }
-
-    .block-1 .guis-logo {
-      display: grid;
-      width: 32px;
-      height: 32px;
-      place-items: center;
-      border-radius: 8px;
-      background: #ffbe5c;
-      color: #111827;
-      font-weight: 700;
-    }
-
-    .block-1 nav {
-      display: grid;
-      gap: 8px;
-    }
-
-    .block-1 nav span {
-      padding: 8px 10px;
-      border-radius: 8px;
-      color: #657185;
-      font-size: 13px;
-    }
-
-    .block-1 nav .active {
-      background: #111827;
-      color: #ffffff;
-    }
-
-    .block-1 .guis-main {
-      display: grid;
-      gap: 16px;
-      align-content: start;
-      padding: 20px;
-    }
-
-    .block-1 .guis-toolbar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .block-1 .guis-toolbar strong {
-      color: #111827;
-      font-size: 18px;
-    }
-
-    .block-1 .guis-toolbar button {
-      height: 32px;
-      padding: 0 12px;
-      border: 1px solid #d8deea;
-      border-radius: 8px;
-      background: #ffffff;
-      color: #1d2633;
-    }
-
-    .block-1 .guis-metrics {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 10px;
-    }
-
-    .block-1 .guis-metrics article {
-      display: grid;
-      gap: 6px;
-      padding: 14px;
-      border: 1px solid #edf0f6;
-      border-radius: 12px;
-      background: #ffffff;
-    }
-
-    .block-1 .guis-metrics span,
-    .block-1 .guis-metrics em {
-      color: #657185;
-      font-size: 12px;
-      font-style: normal;
-    }
-
-    .block-1 .guis-metrics strong {
-      color: #111827;
-      font-size: 22px;
-      line-height: 1;
-    }
-
-    .block-1 .guis-chart {
-      display: flex;
-      height: 120px;
-      padding: 18px;
-      align-items: end;
-      gap: 10px;
-      border: 1px solid #edf0f6;
-      border-radius: 12px;
-      background: linear-gradient(180deg, #ffffff, #f8fafd);
-    }
-
-    .block-1 .guis-chart i {
-      flex: 1;
-      border-radius: 8px 8px 3px 3px;
-      background: #6b8cff;
-    }
-
-    .block-1 .guis-chart i:nth-child(1) { height: 34%; }
-    .block-1 .guis-chart i:nth-child(2) { height: 56%; }
-    .block-1 .guis-chart i:nth-child(3) { height: 42%; }
-    .block-1 .guis-chart i:nth-child(4) { height: 72%; }
-    .block-1 .guis-chart i:nth-child(5) { height: 64%; }
-    .block-1 .guis-chart i:nth-child(6) { height: 88%; }
-    .block-1 .guis-chart i:nth-child(7) { height: 76%; }
-
-    .block-2 {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    .block-2 article {
-      display: grid;
-      gap: 12px;
-      min-height: 190px;
-      padding: 22px;
-      align-content: start;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-      box-shadow: 0 10px 28px rgba(34, 43, 60, 0.06);
-    }
-
-    .block-2 span {
-      width: fit-content;
-      padding: 4px 8px;
-      border-radius: 999px;
-      background: #f2f5fa;
-      color: #657185;
-      font-size: 12px;
-      font-weight: 600;
-    }
-
-    .block-2 h2,
-    .block-2 p,
-    .block-3 h2,
-    .block-4 h2 {
-      margin: 0;
-    }
-
-    .block-2 h2 {
-      color: #111827;
-      font-size: 24px;
-      line-height: 1.15;
-    }
-
-    .block-2 p {
-      color: #526071;
-      font-size: 15px;
-      line-height: 1.45;
-    }
-
-    .block-3,
-    .block-4 {
-      display: grid;
-      gap: 18px;
-      padding: 28px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-    }
-
-    .block-4 {
-      overflow-x: auto;
-    }
-
-    .guis-section-heading {
-      display: grid;
-      gap: 8px;
-    }
-
-    .guis-section-heading span {
-      color: #6b8cff;
-      font-size: 13px;
-      font-weight: 600;
-    }
-
-    .guis-section-heading h2 {
-      color: #111827;
-      font-size: 32px;
-      line-height: 1.15;
-    }
-
-    .guis-dashboard {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 14px;
-    }
-
-    .guis-dashboard article {
-      display: grid;
-      gap: 12px;
-      padding: 18px;
-      border: 1px solid #edf0f6;
-      border-radius: 14px;
-      background: #f8fafd;
-    }
-
-    .guis-dashboard .wide {
-      grid-column: 1 / -1;
-      background: #ffffff;
-    }
-
-    .guis-dashboard span {
-      color: #657185;
-      font-size: 13px;
-    }
-
-    .guis-dashboard strong {
-      color: #111827;
-      font-size: 30px;
-      line-height: 1;
-    }
-
-    .guis-progress {
-      height: 8px;
-      overflow: hidden;
-      border-radius: 999px;
-      background: #e7ecf5;
-    }
-
-    .guis-progress i {
-      display: block;
-      width: 72%;
-      height: 100%;
-      border-radius: inherit;
-      background: #6b8cff;
-    }
-
-    .guis-activity {
-      display: grid;
-      gap: 10px;
-    }
-
-    .guis-activity p {
-      display: flex;
-      margin: 0;
-      align-items: center;
-      gap: 10px;
-      color: #1d2633;
-      font-size: 14px;
-    }
-
-    .guis-activity b {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #30aa6e;
-    }
-
-    .guis-activity em {
-      margin-left: auto;
-      color: #657185;
-      font-style: normal;
-    }
-
-    .guis-table {
-      width: 100%;
-      min-width: 620px;
-      border-collapse: collapse;
-      border: 1px solid #edf0f6;
-      border-radius: 12px;
-      overflow: hidden;
-      color: #1d2633;
-      font-size: 14px;
-      white-space: nowrap;
-    }
-
-    .guis-table th,
-    .guis-table td {
-      padding: 14px 16px;
-      border-bottom: 1px solid #edf0f6;
-      text-align: left;
-    }
-
-    .guis-table th {
-      background: #f8fafd;
-      color: #657185;
-      font-size: 12px;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    .guis-table tr:last-child td {
-      border-bottom: 0;
-    }
-
-    .guis-table .ok,
-    .guis-table .warn {
-      display: inline-flex;
-      padding: 4px 8px;
-      border-radius: 999px;
-      font-size: 12px;
-      font-weight: 600;
-    }
-
-    .guis-table .ok {
-      background: #e8f7ef;
-      color: #147a47;
-    }
-
-    .guis-table .warn {
-      background: #fff4d7;
-      color: #8a5a00;
-    }
-  </style>
-  <div class="grid">
-    <div class="block-1">
-      <div class="guis-hero__copy">
-        <div class="guis-kicker">UI samples</div>
-        <h1>Build product pages around real interface states</h1>
-        <p>Show dashboards, tables, forms, and cards in a framed Gravity UI preview instead of abstract screenshots.</p>
-        <div class="guis-actions">
-          <a class="guis-button guis-button_primary" href="#">Explore samples</a>
-          <a class="guis-button" href="#">Open docs</a>
-        </div>
-      </div>
-      <div class="guis-hero__panel">
-        <div class="guis-window">
-          <div class="guis-window__bar">
-            <span></span><span></span><span></span>
-            <strong>Cloud console</strong>
-          </div>
-          <div class="guis-app">
-            <aside class="guis-sidebar">
-              <div class="guis-logo">G</div>
-              <nav>
-                <span class="active">Overview</span>
-                <span>Dashboards</span>
-                <span>Tables</span>
-                <span>Forms</span>
-              </nav>
-            </aside>
-            <main class="guis-main">
-              <div class="guis-toolbar">
-                <strong>Service health</strong>
-                <button>Deploy</button>
-              </div>
-              <div class="guis-metrics">
-                <article><span>Requests</span><strong>12.8M</strong><em>+18%</em></article>
-                <article><span>Latency</span><strong>84 ms</strong><em>stable</em></article>
-                <article><span>Errors</span><strong>0.03%</strong><em>low</em></article>
-              </div>
-              <div class="guis-chart" aria-hidden="true">
-                <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
-              </div>
-            </main>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="block-2">
-      <article>
-        <span>01</span>
-        <h2>Dashboard previews</h2>
-        <p>Use cards, charts, and status indicators to make operational products feel concrete.</p>
-      </article>
-      <article>
-        <span>02</span>
-        <h2>Structured tables</h2>
-        <p>Dense but readable data blocks work well for analytics, billing, monitoring, and inventory pages.</p>
-      </article>
-      <article>
-        <span>03</span>
-        <h2>Editable forms</h2>
-        <p>Compact fields, toggles, and action rows help explain workflow depth without long copy.</p>
-      </article>
-    </div>
-    <div class="block-3">
-      <div class="guis-section-heading">
-        <span>Dashboard</span>
-        <h2>Metrics and activity in one surface</h2>
-      </div>
-      <div class="guis-dashboard">
-        <article><span>Compute</span><strong>74%</strong><div class="guis-progress"><i></i></div></article>
-        <article><span>Storage</span><strong>18.4 TB</strong><div class="guis-progress"><i></i></div></article>
-        <article><span>Network</span><strong>912 Gb</strong><div class="guis-progress"><i></i></div></article>
-        <article class="wide">
-          <span>Release activity</span>
-          <div class="guis-activity">
-            <p><b></b> API gateway updated <em>2 min ago</em></p>
-            <p><b></b> Billing export completed <em>18 min ago</em></p>
-            <p><b></b> New alert policy published <em>1 h ago</em></p>
-          </div>
-        </article>
-      </div>
-    </div>
-    <div class="block-4">
-      <div class="guis-section-heading">
-        <span>Data table</span>
-        <h2>Readable density for production data</h2>
-      </div>
-      <table class="guis-table">
-        <thead>
-          <tr><th>Service</th><th>Status</th><th>Owner</th><th>Cost</th></tr>
-        </thead>
-        <tbody>
-          <tr><td>Compute pool</td><td><span class="ok">Healthy</span></td><td>Platform</td><td>$8,420</td></tr>
-          <tr><td>Analytics storage</td><td><span class="warn">Review</span></td><td>Data</td><td>$3,180</td></tr>
-          <tr><td>Notification API</td><td><span class="ok">Healthy</span></td><td>Core</td><td>$920</td></tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>
-
-<template id="gravity-ui-samples-hero" title="Hero app preview" type="block" group="Gravity UI samples">
-  <style>
-    & {
-      display: grid;
-      grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
-      gap: 24px;
-      min-height: 520px;
-      padding: 32px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #f7f9fc;
-    }
-
-    .guis-hero__copy {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 20px;
-      padding: 16px;
-    }
-
-    .guis-kicker {
-      width: fit-content;
-      padding: 6px 10px;
-      border: 1px solid #d8deea;
-      border-radius: 999px;
-      background: #ffffff;
-      color: #4b596c;
-      font-size: 13px;
-      font-weight: 500;
-      line-height: 16px;
-    }
-
-    h1,
-    p {
-      margin: 0;
-    }
-
-    h1 {
-      max-width: 520px;
-      color: #111827;
-      font-size: 54px;
-      font-weight: 600;
-      line-height: 1.05;
-    }
-
-    p {
-      max-width: 460px;
-      color: #526071;
-      font-size: 18px;
-      line-height: 1.5;
-    }
-
-    .guis-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      padding-top: 4px;
-    }
-
-    .guis-button {
-      display: inline-flex;
-      min-height: 40px;
-      padding: 0 16px;
-      align-items: center;
-      border: 1px solid #d8deea;
-      border-radius: 8px;
-      background: #ffffff;
-      color: #1d2633;
-      font-size: 15px;
-      font-weight: 500;
-    }
-
-    .guis-button_primary {
-      border-color: #111827;
-      background: #111827;
-      color: #ffffff;
-    }
-
-    .guis-hero__panel {
-      display: flex;
-      align-items: center;
-      min-width: 0;
-    }
-
-    .guis-window {
-      overflow: hidden;
-      width: 100%;
-      border: 1px solid #d8deea;
-      border-radius: 16px;
-      background: #ffffff;
-      box-shadow: 0 18px 50px rgba(34, 43, 60, 0.14);
-    }
-
-    .guis-window__bar {
-      display: flex;
-      height: 40px;
-      padding: 0 14px;
-      align-items: center;
-      gap: 7px;
-      border-bottom: 1px solid #edf0f6;
-      color: #657185;
-      font-size: 13px;
-    }
-
-    .guis-window__bar span {
-      width: 9px;
-      height: 9px;
-      border-radius: 50%;
-      background: #d8deea;
-    }
-
-    .guis-window__bar strong {
-      margin-left: 8px;
-      font-weight: 500;
-    }
-
-    .guis-app {
-      display: grid;
-      grid-template-columns: 160px minmax(0, 1fr);
-      min-height: 360px;
-      background: #ffffff;
-    }
-
-    .guis-sidebar {
-      display: grid;
-      align-content: start;
-      gap: 18px;
-      padding: 18px;
-      border-right: 1px solid #edf0f6;
-      background: #f8fafd;
-    }
-
-    .guis-logo {
-      display: grid;
-      width: 32px;
-      height: 32px;
-      place-items: center;
-      border-radius: 8px;
-      background: #ffbe5c;
-      color: #111827;
-      font-weight: 700;
-    }
-
-    nav {
-      display: grid;
-      gap: 8px;
-    }
-
-    nav span {
-      padding: 8px 10px;
-      border-radius: 8px;
-      color: #657185;
-      font-size: 13px;
-    }
-
-    nav .active {
-      background: #111827;
-      color: #ffffff;
-    }
-
-    .guis-main {
-      display: grid;
-      gap: 16px;
-      align-content: start;
-      padding: 20px;
-    }
-
-    .guis-toolbar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .guis-toolbar strong {
-      color: #111827;
-      font-size: 18px;
-    }
-
-    .guis-toolbar button {
-      height: 32px;
-      padding: 0 12px;
-      border: 1px solid #d8deea;
-      border-radius: 8px;
-      background: #ffffff;
-      color: #1d2633;
-    }
-
-    .guis-metrics {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 10px;
-    }
-
-    .guis-metrics article {
-      display: grid;
-      gap: 6px;
-      padding: 14px;
-      border: 1px solid #edf0f6;
-      border-radius: 12px;
-      background: #ffffff;
-    }
-
-    .guis-metrics span,
-    .guis-metrics em {
-      color: #657185;
-      font-size: 12px;
-      font-style: normal;
-    }
-
-    .guis-metrics strong {
-      color: #111827;
-      font-size: 22px;
-      line-height: 1;
-    }
-
-    .guis-chart {
-      display: flex;
-      height: 120px;
-      padding: 18px;
-      align-items: end;
-      gap: 10px;
-      border: 1px solid #edf0f6;
-      border-radius: 12px;
-      background: linear-gradient(180deg, #ffffff, #f8fafd);
-    }
-
-    .guis-chart i {
-      flex: 1;
-      border-radius: 8px 8px 3px 3px;
-      background: #6b8cff;
-    }
-
-    .guis-chart i:nth-child(1) {
-      height: 34%;
-    }
-
-    .guis-chart i:nth-child(2) {
-      height: 56%;
-    }
-
-    .guis-chart i:nth-child(3) {
-      height: 42%;
-    }
-
-    .guis-chart i:nth-child(4) {
-      height: 72%;
-    }
-
-    .guis-chart i:nth-child(5) {
-      height: 64%;
-    }
-
-    .guis-chart i:nth-child(6) {
-      height: 88%;
-    }
-
-    .guis-chart i:nth-child(7) {
-      height: 76%;
-    }
-  </style>
-  <div class="guis-hero__copy">
-    <div class="guis-kicker">UI samples</div>
-    <h1>Build product pages around real interface states</h1>
-    <p>Show dashboards, tables, forms, and cards in a framed Gravity UI preview instead of abstract screenshots.</p>
-    <div class="guis-actions">
-      <a class="guis-button guis-button_primary" href="#">Explore samples</a>
-      <a class="guis-button" href="#">Open docs</a>
-    </div>
-  </div>
-  <div class="guis-hero__panel">
-    <div class="guis-window">
-      <div class="guis-window__bar">
-        <span></span><span></span><span></span>
-        <strong>Cloud console</strong>
-      </div>
-      <div class="guis-app">
-        <aside class="guis-sidebar">
-          <div class="guis-logo">G</div>
-          <nav>
-            <span class="active">Overview</span>
-            <span>Dashboards</span>
-            <span>Tables</span>
-            <span>Forms</span>
-          </nav>
-        </aside>
-        <main class="guis-main">
-          <div class="guis-toolbar">
-            <strong>Service health</strong>
-            <button>Deploy</button>
-          </div>
-          <div class="guis-metrics">
-            <article><span>Requests</span><strong>12.8M</strong><em>+18%</em></article>
-            <article><span>Latency</span><strong>84 ms</strong><em>stable</em></article>
-            <article><span>Errors</span><strong>0.03%</strong><em>low</em></article>
-          </div>
-          <div class="guis-chart" aria-hidden="true">
-            <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
-          </div>
-        </main>
-      </div>
-    </div>
-  </div>
-</template>
-
-<template id="gravity-ui-samples-cards" title="Sample cards" type="block" group="Gravity UI samples">
-  <style>
-    & {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    article {
-      display: grid;
-      gap: 12px;
-      min-height: 190px;
-      padding: 22px;
-      align-content: start;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-      box-shadow: 0 10px 28px rgba(34, 43, 60, 0.06);
-    }
-
-    span {
-      width: fit-content;
-      padding: 4px 8px;
-      border-radius: 999px;
-      background: #f2f5fa;
-      color: #657185;
-      font-size: 12px;
-      font-weight: 600;
-    }
-
-    h2,
-    p {
-      margin: 0;
-    }
-
-    h2 {
-      color: #111827;
-      font-size: 24px;
-      line-height: 1.15;
-    }
-
-    p {
-      color: #526071;
-      font-size: 15px;
-      line-height: 1.45;
-    }
-  </style>
-  <article>
-    <span>01</span>
-    <h2>Dashboard previews</h2>
-    <p>Use cards, charts, and status indicators to make operational products feel concrete.</p>
-  </article>
-  <article>
-    <span>02</span>
-    <h2>Structured tables</h2>
-    <p>Dense but readable data blocks work well for analytics, billing, monitoring, and inventory pages.</p>
-  </article>
-  <article>
-    <span>03</span>
-    <h2>Editable forms</h2>
-    <p>Compact fields, toggles, and action rows help explain workflow depth without long copy.</p>
-  </article>
-</template>
-
-<template id="gravity-ui-samples-dashboard" title="Dashboard section" type="block" group="Gravity UI samples">
-  <style>
-    & {
-      display: grid;
-      gap: 18px;
-      padding: 28px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-    }
-
-    .guis-section-heading {
-      display: grid;
-      gap: 8px;
-    }
-
-    .guis-section-heading span {
-      color: #6b8cff;
-      font-size: 13px;
-      font-weight: 600;
-    }
-
-    .guis-section-heading h2 {
-      margin: 0;
-      color: #111827;
-      font-size: 32px;
-      line-height: 1.15;
-    }
-
-    .guis-dashboard {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 14px;
-    }
-
-    .guis-dashboard article {
-      display: grid;
-      gap: 12px;
-      padding: 18px;
-      border: 1px solid #edf0f6;
-      border-radius: 14px;
-      background: #f8fafd;
-    }
-
-    .guis-dashboard .wide {
-      grid-column: 1 / -1;
-      background: #ffffff;
-    }
-
-    .guis-dashboard span {
-      color: #657185;
-      font-size: 13px;
-    }
-
-    .guis-dashboard strong {
-      color: #111827;
-      font-size: 30px;
-      line-height: 1;
-    }
-
-    .guis-progress {
-      height: 8px;
-      overflow: hidden;
-      border-radius: 999px;
-      background: #e7ecf5;
-    }
-
-    .guis-progress i {
-      display: block;
-      width: 72%;
-      height: 100%;
-      border-radius: inherit;
-      background: #6b8cff;
-    }
-
-    .guis-activity {
-      display: grid;
-      gap: 10px;
-    }
-
-    .guis-activity p {
-      display: flex;
-      margin: 0;
-      align-items: center;
-      gap: 10px;
-      color: #1d2633;
-      font-size: 14px;
-    }
-
-    .guis-activity b {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #30aa6e;
-    }
-
-    .guis-activity em {
-      margin-left: auto;
-      color: #657185;
-      font-style: normal;
-    }
-  </style>
-  <div class="guis-section-heading">
-    <span>Dashboard</span>
-    <h2>Metrics and activity in one surface</h2>
-  </div>
-  <div class="guis-dashboard">
-    <article><span>Compute</span><strong>74%</strong><div class="guis-progress"><i></i></div></article>
-    <article><span>Storage</span><strong>18.4 TB</strong><div class="guis-progress"><i></i></div></article>
-    <article><span>Network</span><strong>912 Gb</strong><div class="guis-progress"><i></i></div></article>
-    <article class="wide">
-      <span>Release activity</span>
-      <div class="guis-activity">
-        <p><b></b> API gateway updated <em>2 min ago</em></p>
-        <p><b></b> Billing export completed <em>18 min ago</em></p>
-        <p><b></b> New alert policy published <em>1 h ago</em></p>
-      </div>
-    </article>
-  </div>
-</template>
-
-<template id="gravity-ui-samples-table" title="Data table section" type="block" group="Gravity UI samples">
-  <style>
-    & {
-      display: grid;
-      gap: 18px;
-      padding: 28px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-      overflow-x: auto;
-    }
-
-    .guis-section-heading {
-      display: grid;
-      gap: 8px;
-    }
-
-    .guis-section-heading span {
-      color: #6b8cff;
-      font-size: 13px;
-      font-weight: 600;
-    }
-
-    .guis-section-heading h2 {
-      margin: 0;
-      color: #111827;
-      font-size: 32px;
-      line-height: 1.15;
-    }
-
-    .guis-table {
-      width: 100%;
-      min-width: 620px;
-      border-collapse: collapse;
-      border: 1px solid #edf0f6;
-      border-radius: 12px;
-      overflow: hidden;
-      color: #1d2633;
-      font-size: 14px;
-      white-space: nowrap;
-    }
-
-    th,
-    td {
-      padding: 14px 16px;
-      border-bottom: 1px solid #edf0f6;
-      text-align: left;
-    }
-
-    th {
-      background: #f8fafd;
-      color: #657185;
-      font-size: 12px;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    tr:last-child td {
-      border-bottom: 0;
-    }
-
-    .ok,
-    .warn {
-      display: inline-flex;
-      padding: 4px 8px;
-      border-radius: 999px;
-      font-size: 12px;
-      font-weight: 600;
-    }
-
-    .ok {
-      background: #e8f7ef;
-      color: #147a47;
-    }
-
-    .warn {
-      background: #fff4d7;
-      color: #8a5a00;
-    }
-  </style>
-  <div class="guis-section-heading">
-    <span>Data table</span>
-    <h2>Readable density for production data</h2>
-  </div>
-  <table class="guis-table">
-    <thead>
-      <tr><th>Service</th><th>Status</th><th>Owner</th><th>Cost</th></tr>
-    </thead>
-    <tbody>
-      <tr><td>Compute pool</td><td><span class="ok">Healthy</span></td><td>Platform</td><td>$8,420</td></tr>
-      <tr><td>Analytics storage</td><td><span class="warn">Review</span></td><td>Data</td><td>$3,180</td></tr>
-      <tr><td>Notification API</td><td><span class="ok">Healthy</span></td><td>Core</td><td>$920</td></tr>
-    </tbody>
-  </table>
-</template>
-
-<template id="gravity-ui-osn-preview-page" title="OSN landing preview" type="container" group="Gravity UI OSN">
-  <style>
-    .grid {
-      display: grid;
-      gap: 28px;
-      max-width: 1180px;
-      margin: 0 auto;
-      padding: 32px 16px;
-      box-sizing: border-box;
-      color: #1d2633;
-      font-family: var(--g-font-family-sans, "YS Text", Arial, sans-serif);
-    }
-
-    .grid * {
-      box-sizing: border-box;
-    }
-
-    .grid a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    .block-1,
-    .block-2,
-    .block-3,
-    .block-4,
-    .block-5,
-    .block-6 {
-      min-width: 0;
-    }
-
-    .block-1 {
-      overflow: hidden;
-      min-height: 760px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-      box-shadow: 0 18px 56px rgba(34, 43, 60, 0.1);
-    }
-
-    .osn-actionbar {
-      display: flex;
-      min-height: 44px;
-      padding: 0 16px;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 1px solid #edf0f6;
-      background: #ffffff;
-      color: #657185;
-      font-size: 13px;
-    }
-
-    .osn-breadcrumbs {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .osn-breadcrumbs span + span::before {
-      content: "/";
-      margin-right: 8px;
-      color: #a8b1c1;
-    }
-
-    .osn-actionbar__actions {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .osn-icon-button,
-    .osn-theme-switch {
-      display: grid;
-      place-items: center;
-      border: 1px solid #dfe4ee;
-      border-radius: 8px;
-      background: #ffffff;
-      color: #4b596c;
-      font-size: 12px;
-    }
-
-    .osn-icon-button {
-      width: 28px;
-      height: 28px;
-    }
-
-    .osn-theme-switch {
-      height: 28px;
-      padding: 0 10px;
-    }
-
-    .osn-page {
-      overflow: auto;
-      height: 716px;
-      background: #f6f8fb;
-    }
-
-    .osn-nav {
-      display: flex;
-      min-height: 72px;
-      padding: 0 40px;
-      align-items: center;
-      justify-content: space-between;
-      background: #ffffff;
-    }
-
-    .osn-logo {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      color: #111827;
-      font-weight: 700;
-    }
-
-    .osn-logo img {
-      width: 30px;
-      height: 30px;
-    }
-
-    .osn-nav__links {
-      display: flex;
-      gap: 26px;
-      color: #4b596c;
-      font-size: 15px;
-    }
-
-    .osn-lang {
-      padding: 7px 10px;
-      border: 1px solid #dfe4ee;
-      border-radius: 8px;
-      color: #4b596c;
-      font-size: 14px;
-    }
-
-    .osn-hero {
-      display: grid;
-      grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
-      gap: 40px;
-      min-height: 440px;
-      padding: 68px 40px 58px;
-      align-items: center;
-      background: #f5f7fb;
-    }
-
-    .osn-hero__copy {
-      display: grid;
-      gap: 22px;
-      align-content: center;
-    }
-
-    .osn-label {
-      width: fit-content;
-      padding: 6px 10px;
-      border-radius: 999px;
-      background: #ffffff;
-      color: #657185;
-      font-size: 13px;
-      font-weight: 600;
-    }
-
-    .osn-hero h1,
-    .osn-hero p,
-    .osn-section-heading h2,
-    .osn-section-heading p {
-      margin: 0;
-    }
-
-    .osn-hero h1 {
-      color: #111827;
-      font-size: 64px;
-      font-weight: 700;
-      line-height: 1;
-      letter-spacing: 0;
-    }
-
-    .osn-hero p {
-      max-width: 520px;
-      color: #526071;
-      font-size: 18px;
-      line-height: 1.55;
-    }
-
-    .osn-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-    }
-
-    .osn-button {
-      display: inline-flex;
-      min-height: 42px;
-      padding: 0 16px;
-      align-items: center;
-      border: 1px solid #d8deea;
-      border-radius: 8px;
-      background: #ffffff;
-      color: #111827;
-      font-size: 15px;
-      font-weight: 600;
-    }
-
-    .osn-button_primary {
-      border-color: #111827;
-      background: #111827;
-      color: #ffffff;
-    }
-
-    .osn-hero__image {
-      display: grid;
-      place-items: center;
-      min-height: 300px;
-      padding: 24px;
-      border: 1px solid #dfe4ee;
-      border-radius: 24px;
-      background: #ffffff;
-    }
-
-    .osn-hero__image img {
-      display: block;
-      max-width: 100%;
-      max-height: 320px;
-    }
-
-    .block-2,
-    .block-4,
-    .block-5 {
-      display: grid;
-      gap: 22px;
-      padding: 34px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-    }
-
-    .osn-section-heading {
-      display: grid;
-      gap: 10px;
-      max-width: 760px;
-    }
-
-    .osn-section-heading h2 {
-      color: #111827;
-      font-size: 42px;
-      font-weight: 700;
-      line-height: 1.12;
-      letter-spacing: 0;
-    }
-
-    .osn-section-heading p {
-      color: #526071;
-      font-size: 17px;
-      line-height: 1.5;
-    }
-
-    .osn-features {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    .osn-feature {
-      display: grid;
-      gap: 16px;
-      min-height: 260px;
-      padding: 24px;
-      align-content: start;
-      border: 1px solid #edf0f6;
-      border-radius: 16px;
-      background: #f8fafd;
-    }
-
-    .osn-feature img {
-      width: 42px;
-      height: 42px;
-    }
-
-    .osn-feature h3,
-    .osn-feature p,
-    .osn-card h3,
-    .osn-card p,
-    .osn-timeline-card h3,
-    .osn-timeline-card p {
-      margin: 0;
-    }
-
-    .osn-feature h3 {
-      color: #111827;
-      font-size: 24px;
-      line-height: 1.15;
-    }
-
-    .osn-feature p {
-      color: #526071;
-      font-size: 15px;
-      line-height: 1.5;
-    }
-
-    .block-3 {
-      overflow: hidden;
-      display: grid;
-      grid-template-columns: minmax(0, 0.85fr) minmax(380px, 1.15fr);
-      min-height: 360px;
-      border-radius: 16px;
-      background: #15191f;
-      color: #ffffff;
-    }
-
-    .osn-dark-copy {
-      display: grid;
-      gap: 24px;
-      align-content: center;
-      padding: 42px;
-    }
-
-    .osn-dark-copy h2 {
-      margin: 0;
-      font-size: 40px;
-      line-height: 1.12;
-      letter-spacing: 0;
-    }
-
-    .osn-dark-copy .osn-button {
-      width: fit-content;
-      border-color: rgba(255, 255, 255, 0.24);
-      background: #ffffff;
-      color: #111827;
-    }
-
-    .osn-layout-image {
-      min-height: 360px;
-      background:
-        linear-gradient(90deg, rgba(21, 25, 31, 0.1), rgba(21, 25, 31, 0)),
-        url("${backgroundPlaceholderImage}") center / cover no-repeat;
-    }
-
-    .osn-timeline {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    .osn-timeline-card {
-      display: grid;
-      gap: 14px;
-      min-height: 220px;
-      padding: 22px;
-      border: 1px solid #edf0f6;
-      border-radius: 16px;
-      background: #f8fafd;
-    }
-
-    .osn-timeline-card img {
-      height: 56px;
-      width: 56px;
-    }
-
-    .osn-timeline-card h3 {
-      color: #111827;
-      font-size: 22px;
-      line-height: 1.15;
-    }
-
-    .osn-timeline-card p {
-      color: #526071;
-      font-size: 15px;
-      line-height: 1.45;
-    }
-
-    .osn-color-cards {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    .osn-card {
-      position: relative;
-      overflow: hidden;
-      display: grid;
-      gap: 10px;
-      min-height: 230px;
-      padding: 24px;
-      align-content: end;
-      border-radius: 18px;
-      color: #ffffff;
-    }
-
-    .osn-card_theme_light {
-      color: #111827;
-    }
-
-    .osn-card::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background-position: top right;
-      background-repeat: no-repeat;
-      background-size: 156px auto;
-      opacity: 0.92;
-    }
-
-    .osn-card > * {
-      position: relative;
-      z-index: 1;
-    }
-
-    .osn-card h3 {
-      font-size: 24px;
-      line-height: 1.15;
-    }
-
-    .osn-card p {
-      max-width: 260px;
-      font-size: 15px;
-      line-height: 1.45;
-      opacity: 0.86;
-    }
-
-    .osn-card_cube {
-      background: #5b768c;
-    }
-
-    .osn-card_cube::before {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .osn-card_cubes {
-      background: #277270;
-    }
-
-    .osn-card_cubes::before {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .osn-card_numbers {
-      background: #f7af49;
-    }
-
-    .osn-card_numbers::before {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .osn-card_code {
-      background: #4761d6;
-    }
-
-    .osn-card_code::before {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .osn-card_mail {
-      background: #77e369;
-    }
-
-    .osn-card_mail::before {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .osn-card_store {
-      background: #fae26f;
-    }
-
-    .osn-card_store::before {
-      background-image: url("${backgroundPlaceholderImage}");
-    }
-
-    .block-6 {
-      overflow: hidden;
-      display: grid;
-      grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
-      gap: 24px;
-      align-items: center;
-      padding: 34px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-    }
-
-    .osn-media-copy {
-      display: grid;
-      gap: 14px;
-      align-content: center;
-    }
-
-    .osn-media-copy h2,
-    .osn-media-copy p {
-      margin: 0;
-    }
-
-    .osn-media-copy h2 {
-      color: #111827;
-      font-size: 40px;
-      line-height: 1.12;
-    }
-
-    .osn-media-copy p {
-      color: #526071;
-      font-size: 17px;
-      line-height: 1.5;
-    }
-
-    .osn-result {
-      display: grid;
-      place-items: center;
-      min-height: 280px;
-      border-radius: 18px;
-      background: #f8fafd;
-    }
-
-    .osn-result img {
-      max-width: 88%;
-      max-height: 260px;
-    }
-
-    @media (max-width: 900px) {
-      .block-1 .osn-hero,
-      .block-3,
-      .block-6 {
-        grid-template-columns: 1fr;
-      }
-
-      .osn-features,
-      .osn-timeline,
-      .osn-color-cards {
-        grid-template-columns: 1fr;
-      }
-
-      .osn-nav {
-        align-items: flex-start;
-        flex-direction: column;
-        gap: 14px;
-        padding: 20px;
-      }
-
-      .osn-hero {
-        padding: 42px 22px;
-      }
-
-      .osn-hero h1 {
-        font-size: 42px;
-      }
-    }
-  </style>
-  <div class="grid">
-    <div class="block-1">
-      <div class="osn-actionbar">
-        <div class="osn-breadcrumbs">
-          <span>Gravity UI</span>
-          <span>Landing</span>
-        </div>
-        <div class="osn-actionbar__actions">
-          <span class="osn-icon-button">S</span>
-          <span class="osn-icon-button">A</span>
-          <span class="osn-theme-switch">Light</span>
-        </div>
-      </div>
-      <div class="osn-page">
-        <header class="osn-nav">
-          <a class="osn-logo" href="#">
-            <img src="${placeholderImage}" alt="">
-            <span>Gravity UI</span>
-          </a>
-          <nav class="osn-nav__links">
-            <a href="#">Projects</a>
-            <a href="#">Technology</a>
-            <a href="#">Contacts</a>
-          </nav>
-          <a class="osn-lang" href="#">Language</a>
-        </header>
-        <section class="osn-hero">
-          <div class="osn-hero__copy">
-            <span class="osn-label">Sample service</span>
-            <h1>Sample Service</h1>
-            <p>The service does good and provides you with a lot of opportunities and features. With the highest tech in mind we created a solution for complex product teams.</p>
-            <div class="osn-actions">
-              <a class="osn-button osn-button_primary" href="#">Get started</a>
-              <a class="osn-button" href="#">Learn more</a>
-            </div>
-          </div>
-          <div class="osn-hero__image">
-            <img src="${placeholderImage}" alt="">
-          </div>
-        </section>
-      </div>
-    </div>
-    <div class="block-2">
-      <div class="osn-section-heading">
-        <h2>Why this solution is good</h2>
-        <p>Three concise arguments from the OSN sample: scalability, rich features, and pricing flexibility.</p>
-      </div>
-      <div class="osn-features">
-        <article class="osn-feature">
-          <img src="${placeholderImage}" alt="">
-          <h3>Scalability</h3>
-          <p>Use one instance or multiple environments depending on team size, load, and rollout strategy.</p>
-        </article>
-        <article class="osn-feature">
-          <img src="${placeholderImage}" alt="">
-          <h3>Features</h3>
-          <p>Describe a broad feature set, integrations, and customization for specific product requirements.</p>
-        </article>
-        <article class="osn-feature">
-          <img src="${placeholderImage}" alt="">
-          <h3>Price</h3>
-          <p>Show flexible subscription or usage-based pricing with a compact argument for purchase.</p>
-        </article>
-      </div>
-    </div>
-    <div class="block-3">
-      <div class="osn-dark-copy">
-        <h2>We have additional content for you to discover</h2>
-        <a class="osn-button" href="#">Learn more</a>
-      </div>
-      <div class="osn-layout-image"></div>
-    </div>
-    <div class="block-4">
-      <div class="osn-section-heading">
-        <h2>Tell a story and build a narrative</h2>
-        <p>The OSN preview uses a timeline-style card layout to explain a multi-step process.</p>
-      </div>
-      <div class="osn-timeline">
-        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Discover Terms</h3><p>Collect the information you need before starting the application.</p></article>
-        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Create Application</h3><p>Proceed to the application after the initial information is ready.</p></article>
-        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Prepare Papers</h3><p>Prepare everything according to the roadmap and checklist.</p></article>
-        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Fill the Form</h3><p>Answer the last questions and confirm the details.</p></article>
-        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Meet Manager</h3><p>Managers guide the team throughout the process.</p></article>
-        <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Submit</h3><p>Everything is ready for review and launch.</p></article>
-      </div>
-    </div>
-    <div class="block-5">
-      <div class="osn-section-heading">
-        <h2>Some more cards for your information</h2>
-        <p>Background cards work as a visual catalog of areas, cases, and capabilities.</p>
-      </div>
-      <div class="osn-color-cards">
-        <article class="osn-card osn-card_cube"><h3>The Cube</h3><p>A simplistic yet powerful volume geometry primitive.</p></article>
-        <article class="osn-card osn-card_cubes"><h3>Pile of Cubes</h3><p>Put cubes together to save space and enhance storage.</p></article>
-        <article class="osn-card osn-card_numbers osn-card_theme_light"><h3>Random Numbers</h3><p>Useful data stories for tough management decisions.</p></article>
-        <article class="osn-card osn-card_code"><h3>Code Assistant</h3><p>A future-facing example for developer workflows.</p></article>
-        <article class="osn-card osn-card_mail osn-card_theme_light"><h3>Mail List Service</h3><p>Classic communication still provides useful experience.</p></article>
-        <article class="osn-card osn-card_store osn-card_theme_light"><h3>Project Data</h3><p>Store, share, and collaborate with the team.</p></article>
-      </div>
-    </div>
-    <div class="block-6">
-      <div class="osn-media-copy">
-        <span class="osn-label">Webinar</span>
-        <h2>Discover our latest webinar</h2>
-        <p>Managers and engineers share their expertise on the best practices.</p>
-        <a class="osn-button osn-button_primary" href="#">Watch now</a>
-      </div>
-      <div class="osn-result">
-        <img src="${placeholderImage}" alt="">
-      </div>
-    </div>
-  </div>
-</template>
-
-<template id="gravity-ui-osn-hero-preview" title="OSN hero preview" type="block" group="Gravity UI OSN">
-  <style>
-    & {
-      overflow: hidden;
-      min-height: 760px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-      box-shadow: 0 18px 56px rgba(34, 43, 60, 0.1);
-    }
-
-    .osn-actionbar {
-      display: flex;
-      min-height: 44px;
-      padding: 0 16px;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 1px solid #edf0f6;
-      background: #ffffff;
-      color: #657185;
-      font-size: 13px;
-    }
-
-    .osn-breadcrumbs,
-    .osn-actionbar__actions {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .osn-breadcrumbs span + span::before {
-      content: "/";
-      margin-right: 8px;
-      color: #a8b1c1;
-    }
-
-    .osn-icon-button,
-    .osn-theme-switch {
-      display: grid;
-      place-items: center;
-      border: 1px solid #dfe4ee;
-      border-radius: 8px;
-      background: #ffffff;
-      color: #4b596c;
-      font-size: 12px;
-    }
-
-    .osn-icon-button {
-      width: 28px;
-      height: 28px;
-    }
-
-    .osn-theme-switch {
-      height: 28px;
-      padding: 0 10px;
-    }
-
-    .osn-page {
-      overflow: auto;
-      height: 716px;
-      background: #f6f8fb;
-    }
-
-    .osn-nav {
-      display: flex;
-      min-height: 72px;
-      padding: 0 40px;
-      align-items: center;
-      justify-content: space-between;
-      background: #ffffff;
-    }
-
-    .osn-logo,
-    .osn-nav__links {
-      display: flex;
-      align-items: center;
-    }
-
-    .osn-logo {
-      gap: 10px;
-      color: #111827;
-      font-weight: 700;
-    }
-
-    .osn-logo img {
-      width: 30px;
-      height: 30px;
-    }
-
-    .osn-nav__links {
-      gap: 26px;
-      color: #4b596c;
-      font-size: 15px;
-    }
-
-    .osn-lang {
-      padding: 7px 10px;
-      border: 1px solid #dfe4ee;
-      border-radius: 8px;
-      color: #4b596c;
-      font-size: 14px;
-    }
-
-    .osn-hero {
-      display: grid;
-      grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
-      gap: 40px;
-      min-height: 440px;
-      padding: 68px 40px 58px;
-      align-items: center;
-      background: #f5f7fb;
-    }
-
-    .osn-hero__copy {
-      display: grid;
-      gap: 22px;
-      align-content: center;
-    }
-
-    .osn-label {
-      width: fit-content;
-      padding: 6px 10px;
-      border-radius: 999px;
-      background: #ffffff;
-      color: #657185;
-      font-size: 13px;
-      font-weight: 600;
-    }
-
-    h1,
-    p {
-      margin: 0;
-    }
-
-    h1 {
-      color: #111827;
-      font-size: 64px;
-      font-weight: 700;
-      line-height: 1;
-      letter-spacing: 0;
-    }
-
-    p {
-      max-width: 520px;
-      color: #526071;
-      font-size: 18px;
-      line-height: 1.55;
-    }
-
-    .osn-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-    }
-
-    .osn-button {
-      display: inline-flex;
-      min-height: 42px;
-      padding: 0 16px;
-      align-items: center;
-      border: 1px solid #d8deea;
-      border-radius: 8px;
-      background: #ffffff;
-      color: #111827;
-      font-size: 15px;
-      font-weight: 600;
-    }
-
-    .osn-button_primary {
-      border-color: #111827;
-      background: #111827;
-      color: #ffffff;
-    }
-
-    .osn-hero__image {
-      display: grid;
-      place-items: center;
-      min-height: 300px;
-      padding: 24px;
-      border: 1px solid #dfe4ee;
-      border-radius: 24px;
-      background: #ffffff;
-    }
-
-    .osn-hero__image img {
-      display: block;
-      max-width: 100%;
-      max-height: 320px;
-    }
-  </style>
-  <div class="osn-actionbar">
-    <div class="osn-breadcrumbs">
-      <span>Gravity UI</span>
-      <span>Landing</span>
-    </div>
-    <div class="osn-actionbar__actions">
-      <span class="osn-icon-button">S</span>
-      <span class="osn-icon-button">A</span>
-      <span class="osn-theme-switch">Light</span>
-    </div>
-  </div>
-  <div class="osn-page">
-    <header class="osn-nav">
-      <a class="osn-logo" href="#">
-        <img src="${placeholderImage}" alt="">
-        <span>Gravity UI</span>
-      </a>
-      <nav class="osn-nav__links">
-        <a href="#">Projects</a>
-        <a href="#">Technology</a>
-        <a href="#">Contacts</a>
-      </nav>
-      <a class="osn-lang" href="#">Language</a>
-    </header>
-    <section class="osn-hero">
-      <div class="osn-hero__copy">
-        <span class="osn-label">Sample service</span>
-        <h1>Sample Service</h1>
-        <p>The service does good and provides you with a lot of opportunities and features. With the highest tech in mind we created a solution for complex product teams.</p>
-        <div class="osn-actions">
-          <a class="osn-button osn-button_primary" href="#">Get started</a>
-          <a class="osn-button" href="#">Learn more</a>
-        </div>
-      </div>
-      <div class="osn-hero__image">
-        <img src="${placeholderImage}" alt="">
-      </div>
-    </section>
-  </div>
-</template>
-
-<template id="gravity-ui-osn-features" title="OSN features" type="block" group="Gravity UI OSN">
-  <style>
-    & {
-      display: grid;
-      gap: 22px;
-      padding: 34px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-      color: #1d2633;
-    }
-
-    .osn-section-heading {
-      display: grid;
-      gap: 10px;
-      max-width: 760px;
-    }
-
-    h2,
-    p,
-    h3 {
-      margin: 0;
-    }
-
-    h2 {
-      color: #111827;
-      font-size: 42px;
-      font-weight: 700;
-      line-height: 1.12;
-      letter-spacing: 0;
-    }
-
-    .osn-section-heading p {
-      color: #526071;
-      font-size: 17px;
-      line-height: 1.5;
-    }
-
-    .osn-features {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    .osn-feature {
-      display: grid;
-      gap: 16px;
-      min-height: 260px;
-      padding: 24px;
-      align-content: start;
-      border: 1px solid #edf0f6;
-      border-radius: 16px;
-      background: #f8fafd;
-    }
-
-    .osn-feature img {
-      width: 42px;
-      height: 42px;
-    }
-
-    .osn-feature h3 {
-      color: #111827;
-      font-size: 24px;
-      line-height: 1.15;
-    }
-
-    .osn-feature p {
-      color: #526071;
-      font-size: 15px;
-      line-height: 1.5;
-    }
-  </style>
-  <div class="osn-section-heading">
-    <h2>Why this solution is good</h2>
-    <p>Three concise arguments from the OSN sample: scalability, rich features, and pricing flexibility.</p>
-  </div>
-  <div class="osn-features">
-    <article class="osn-feature">
-      <img src="${placeholderImage}" alt="">
-      <h3>Scalability</h3>
-      <p>Use one instance or multiple environments depending on team size, load, and rollout strategy.</p>
-    </article>
-    <article class="osn-feature">
-      <img src="${placeholderImage}" alt="">
-      <h3>Features</h3>
-      <p>Describe a broad feature set, integrations, and customization for specific product requirements.</p>
-    </article>
-    <article class="osn-feature">
-      <img src="${placeholderImage}" alt="">
-      <h3>Price</h3>
-      <p>Show flexible subscription or usage-based pricing with a compact argument for purchase.</p>
-    </article>
-  </div>
-</template>
-
-<template id="gravity-ui-osn-story" title="OSN narrative cards" type="block" group="Gravity UI OSN">
-  <style>
-    & {
-      display: grid;
-      gap: 22px;
-      padding: 34px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-    }
-
-    .osn-section-heading {
-      display: grid;
-      gap: 10px;
-      max-width: 760px;
-    }
-
-    h2,
-    p,
-    h3 {
-      margin: 0;
-    }
-
-    h2 {
-      color: #111827;
-      font-size: 42px;
-      font-weight: 700;
-      line-height: 1.12;
-      letter-spacing: 0;
-    }
-
-    .osn-section-heading p {
-      color: #526071;
-      font-size: 17px;
-      line-height: 1.5;
-    }
-
-    .osn-timeline {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    .osn-timeline-card {
-      display: grid;
-      gap: 14px;
-      min-height: 220px;
-      padding: 22px;
-      border: 1px solid #edf0f6;
-      border-radius: 16px;
-      background: #f8fafd;
-    }
-
-    .osn-timeline-card img {
-      width: 56px;
-      height: 56px;
-    }
-
-    .osn-timeline-card h3 {
-      color: #111827;
-      font-size: 22px;
-      line-height: 1.15;
-    }
-
-    .osn-timeline-card p {
-      color: #526071;
-      font-size: 15px;
-      line-height: 1.45;
-    }
-  </style>
-  <div class="osn-section-heading">
-    <h2>Tell a story and build a narrative</h2>
-    <p>The OSN preview uses a timeline-style card layout to explain a multi-step process.</p>
-  </div>
-  <div class="osn-timeline">
-    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Discover Terms</h3><p>Collect the information you need before starting the application.</p></article>
-    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Create Application</h3><p>Proceed to the application after the initial information is ready.</p></article>
-    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Prepare Papers</h3><p>Prepare everything according to the roadmap and checklist.</p></article>
-    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Fill the Form</h3><p>Answer the last questions and confirm the details.</p></article>
-    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Meet Manager</h3><p>Managers guide the team throughout the process.</p></article>
-    <article class="osn-timeline-card"><img src="${placeholderImage}" alt=""><h3>Submit</h3><p>Everything is ready for review and launch.</p></article>
-  </div>
-</template>
-
-<template id="gravity-ui-osn-background-cards" title="OSN background cards" type="block" group="Gravity UI OSN">
-  <style>
-    & {
-      display: grid;
-      gap: 22px;
-      padding: 34px;
-      border: 1px solid #dfe4ee;
-      border-radius: 16px;
-      background: #ffffff;
-    }
-
-    .osn-section-heading {
-      display: grid;
-      gap: 10px;
-      max-width: 760px;
-    }
-
-    h2,
-    p,
-    h3 {
-      margin: 0;
-    }
-
-    h2 {
-      color: #111827;
-      font-size: 42px;
-      font-weight: 700;
-      line-height: 1.12;
-      letter-spacing: 0;
-    }
-
-    .osn-section-heading p {
-      color: #526071;
-      font-size: 17px;
-      line-height: 1.5;
-    }
-
-    .osn-color-cards {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    .osn-card {
-      position: relative;
-      overflow: hidden;
-      display: grid;
-      gap: 10px;
-      min-height: 230px;
-      padding: 24px;
-      align-content: end;
-      border-radius: 18px;
-      color: #ffffff;
-    }
-
-    .osn-card_theme_light {
-      color: #111827;
-    }
-
-    .osn-card::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background-position: top right;
-      background-repeat: no-repeat;
-      background-size: 156px auto;
-      opacity: 0.92;
-    }
-
-    .osn-card > * {
-      position: relative;
-      z-index: 1;
-    }
-
-    .osn-card h3 {
-      font-size: 24px;
-      line-height: 1.15;
-    }
-
-    .osn-card p {
-      max-width: 260px;
-      font-size: 15px;
-      line-height: 1.45;
-      opacity: 0.86;
-    }
-
-    .osn-card_cube { background: #5b768c; }
-    .osn-card_cubes { background: #277270; }
-    .osn-card_numbers { background: #f7af49; }
-    .osn-card_code { background: #4761d6; }
-    .osn-card_mail { background: #77e369; }
-    .osn-card_store { background: #fae26f; }
-    .osn-card_cube::before { background-image: url("${backgroundPlaceholderImage}"); }
-    .osn-card_cubes::before { background-image: url("${backgroundPlaceholderImage}"); }
-    .osn-card_numbers::before { background-image: url("${backgroundPlaceholderImage}"); }
-    .osn-card_code::before { background-image: url("${backgroundPlaceholderImage}"); }
-    .osn-card_mail::before { background-image: url("${backgroundPlaceholderImage}"); }
-    .osn-card_store::before { background-image: url("${backgroundPlaceholderImage}"); }
-  </style>
-  <div class="osn-section-heading">
-    <h2>Some more cards for your information</h2>
-    <p>Background cards work as a visual catalog of areas, cases, and capabilities.</p>
-  </div>
-  <div class="osn-color-cards">
-    <article class="osn-card osn-card_cube"><h3>The Cube</h3><p>A simplistic yet powerful volume geometry primitive.</p></article>
-    <article class="osn-card osn-card_cubes"><h3>Pile of Cubes</h3><p>Put cubes together to save space and enhance storage.</p></article>
-    <article class="osn-card osn-card_numbers osn-card_theme_light"><h3>Random Numbers</h3><p>Useful data stories for tough management decisions.</p></article>
-    <article class="osn-card osn-card_code"><h3>Code Assistant</h3><p>A future-facing example for developer workflows.</p></article>
-    <article class="osn-card osn-card_mail osn-card_theme_light"><h3>Mail List Service</h3><p>Classic communication still provides useful experience.</p></article>
-    <article class="osn-card osn-card_store osn-card_theme_light"><h3>Project Data</h3><p>Store, share, and collaborate with the team.</p></article>
-  </div>
-</template>`;
-
-export const gridBlockTemplates: GridBlockTemplate[] = parseTemplates(templateMarkup);
diff --git a/demo/src/global.d.ts b/demo/src/global.d.ts
index 1407ec04..0ae8aa69 100644
--- a/demo/src/global.d.ts
+++ b/demo/src/global.d.ts
@@ -21,8 +21,3 @@ declare module 'markdown-it-ins' {
     declare const plugin: PluginSimple;
     export = plugin;
 }
-
-declare module '*.svg' {
-    const src: string;
-    export default src;
-}
diff --git a/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
index 8cd39f33..d7c59583 100644
--- a/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
+++ b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
@@ -11,7 +11,6 @@ import {defaultPreset} from '@gravity-ui/markdown-editor/_/modules/toolbars/pres
 import {GridBlockTemplates as GridBlockTemplatesExtension} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/index.js';
 
 import {PlaygroundLayout} from '../../../components/PlaygroundLayout';
-import {gridBlockTemplates} from '../../../defaults/grid-block-templates';
 
 const gridBlockTemplatesItemId = 'gridBlockTemplates';
 
@@ -47,7 +46,6 @@ export const GridBlockTemplatesDemo = memo(function GridBlockTemplatesDemo() {
                 extensions: (builder) =>
                     builder.use(GridBlockTemplatesExtension, {
                         templates: {
-                            items: gridBlockTemplates,
                             showButton: true,
                             allowAdd: true,
                         },

From 75d2f754ce27c7635b640649bde54eb60d00bb3d Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 17 Jun 2026 23:33:28 +0200
Subject: [PATCH 20/21] fix: support css-only grid templates

---
 .../GridBlockTemplatesView.tsx                |  5 ++-
 .../TemplatesPopup.tsx                        | 21 +++++-------
 .../blockUtils.test.ts                        | 23 ++++++++++++-
 .../GridBlockTemplatesNodeView/blockUtils.ts  | 17 ++++++----
 .../groupTemplates.test.ts                    | 34 +++++++++++++++++++
 .../templates/parse.test.ts                   | 18 ++++++++++
 .../src/i18n/grid-block-templates/en.json     |  2 +-
 .../src/i18n/grid-block-templates/ru.json     |  2 +-
 8 files changed, 99 insertions(+), 23 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
index 14cf8d79..0853990b 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -114,7 +114,10 @@ export const GridBlockTemplatesView: React.FC<{
     });
 
     const applyContainerTemplate = (template: GridBlockContainerTemplate) => {
-        const {customCss: nextCustomCss, blocks: nextBlocks} = containerTemplateToAttrs(template);
+        const {customCss: nextCustomCss, blocks: nextBlocks} = containerTemplateToAttrs(
+            template,
+            blocks,
+        );
 
         onChange({
             [GridBlockTemplatesConsts.NodeAttrs.customCss]: nextCustomCss,
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
index 5c222466..804ec59b 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
@@ -1,6 +1,6 @@
 import {useState} from 'react';
 
-import {Plus, TrashBin} from '@gravity-ui/icons';
+import {TrashBin} from '@gravity-ui/icons';
 import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
 
 import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
@@ -111,22 +111,17 @@ export function TemplatesPopup<TTemplate extends GridBlockTemplate>({
                             <Menu className={stop}>
                                 {allowAdd && (
                                     <>
+                                        <Menu.Item className={stop} onClick={() => setAdding(true)}>
+                                            {i18n('add_template')}
+                                        </Menu.Item>
                                         <Menu.Item
                                             className={stop}
-                                            iconStart={<Icon data={Plus} />}
-                                            onClick={() => setAdding(true)}
+                                            disabled={!hasStoredTemplates}
+                                            iconStart={<Icon data={TrashBin} />}
+                                            onClick={handleClear}
                                         >
-                                            {i18n('add_template')}
+                                            {i18n('clear_templates')}
                                         </Menu.Item>
-                                        {hasStoredTemplates && (
-                                            <Menu.Item
-                                                className={stop}
-                                                iconStart={<Icon data={TrashBin} />}
-                                                onClick={handleClear}
-                                            >
-                                                {i18n('clear_templates')}
-                                            </Menu.Item>
-                                        )}
                                         <div
                                             role="separator"
                                             className={b('templates-separator', [stop])}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts
index d634df16..89111411 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts
@@ -1,6 +1,6 @@
 import type {GridBlock} from '../types';
 
-import {buildContainerHtml, parseContainerHtml} from './blockUtils';
+import {buildContainerHtml, containerTemplateToAttrs, parseContainerHtml} from './blockUtils';
 
 const blocks: GridBlock[] = [
     {id: 'block-a', css: '& { color: red; }', content: '<strong>First</strong>'},
@@ -47,4 +47,25 @@ describe('GridBlockTemplates block utils', () => {
             expect(parseContainerHtml('<section><div>First</div></section>', blocks)).toBeNull();
         });
     });
+
+    describe('containerTemplateToAttrs', () => {
+        it('keeps existing blocks when applying a css-only container template', () => {
+            expect(
+                containerTemplateToAttrs(
+                    {
+                        id: 'theme',
+                        title: 'Theme',
+                        type: 'container',
+                        content: '<style>.grid { gap: 16px; }</style>',
+                        containerCss: '.grid { gap: 16px; }',
+                        blocks: [],
+                    },
+                    blocks,
+                ),
+            ).toEqual({
+                customCss: '.grid { gap: 16px; }',
+                blocks,
+            });
+        });
+    });
 });
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
index ba61e0f9..11091c94 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
@@ -21,13 +21,18 @@ export const rawTemplateBlockToBlock = (block: GridBlockTemplateBlock): GridBloc
     content: block.content,
 });
 
-export const containerTemplateToAttrs = (template: GridBlockContainerTemplate) => ({
+export const containerTemplateToAttrs = (
+    template: GridBlockContainerTemplate,
+    previousBlocks?: GridBlock[],
+) => ({
     customCss: templateCssToRules(template.containerCss, '.grid'),
-    blocks: template.blocks.map((block) => ({
-        id: createGridBlockId(),
-        css: templateCssToRules(block.css),
-        content: block.content,
-    })),
+    blocks: template.blocks.length
+        ? template.blocks.map((block) => ({
+              id: createGridBlockId(),
+              css: templateCssToRules(block.css),
+              content: block.content,
+          }))
+        : (previousBlocks ?? []),
 });
 
 export const buildScopedCss = ({
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts
index 1c90d207..66d6119f 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts
@@ -14,6 +14,19 @@ const tpl = (id: string, title: string, group?: string): GridBlockTemplate => {
     return group ? {...template, group} : template;
 };
 
+const containerTpl = (id: string, title: string, group?: string): GridBlockTemplate => {
+    const template: GridBlockTemplate = {
+        id,
+        title,
+        type: 'container',
+        content: title,
+        containerCss: '',
+        blocks: [],
+    };
+
+    return group ? {...template, group} : template;
+};
+
 describe('groupTemplatesForMenu', () => {
     it('keeps ungrouped templates and groups in first-seen order', () => {
         expect(
@@ -64,4 +77,25 @@ describe('groupTemplatesForMenu', () => {
             {type: 'group', title: 'Marketing', templates: [tpl('a', 'Hero', 'Marketing')]},
         ]);
     });
+
+    it('groups container templates by group', () => {
+        expect(
+            groupTemplatesForMenu(
+                [
+                    containerTpl('a', 'Theme A', 'Shared styles'),
+                    containerTpl('b', 'Theme B', 'Shared styles'),
+                ],
+                '',
+            ),
+        ).toEqual([
+            {
+                type: 'group',
+                title: 'Shared styles',
+                templates: [
+                    containerTpl('a', 'Theme A', 'Shared styles'),
+                    containerTpl('b', 'Theme B', 'Shared styles'),
+                ],
+            },
+        ]);
+    });
 });
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
index c85636c3..3f10bf1e 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
@@ -135,6 +135,24 @@ describe('parseTemplates', () => {
         });
     });
 
+    it('parses a css-only container template without blocks', () => {
+        const [template] = parseTemplates(`
+            <template id="theme" title="Theme" type="container">
+                <style>
+                    .grid { gap: 16px; }
+                </style>
+            </template>
+        `);
+
+        expect(template).toMatchObject({
+            id: 'theme',
+            title: 'Theme',
+            type: 'container',
+            containerCss: '.grid { gap: 16px; }',
+            blocks: [],
+        });
+    });
+
     it('parses group, style tags and remaining html for a block template', () => {
         const [template] = parseTemplates(`
             <template id="card" title="Card" type="block" group="Theme A">
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
index e2991884..5a21d969 100644
--- a/packages/editor/src/i18n/grid-block-templates/en.json
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -1,6 +1,6 @@
 {
   "add_block": "Add block",
-  "add_template": "Add",
+  "add_template": "Import",
   "block_css": "Block {{index}} CSS",
   "block_actions": "Block {{index}} actions",
   "block_html_input_placeholder": "<div style=\"padding:16px;border-radius:8px;background:#f8fafc\">Block HTML</div>",
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
index 0f479efe..d4b25801 100644
--- a/packages/editor/src/i18n/grid-block-templates/ru.json
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -1,6 +1,6 @@
 {
   "add_block": "Добавить блок",
-  "add_template": "Добавить",
+  "add_template": "Импорт",
   "block_css": "CSS блока {{index}}",
   "block_actions": "Действия блока {{index}}",
   "block_html_input_placeholder": "<div style=\"padding:16px;border-radius:8px;background:#f8fafc\">HTML блока</div>",

From 21a2a318078e1c1ef3774213d9446309479cdc02 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Thu, 18 Jun 2026 00:01:19 +0200
Subject: [PATCH 21/21] fix: add import template icon

---
 .../GridBlockTemplatesNodeView/TemplatesPopup.tsx         | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
index 804ec59b..edb41bc4 100644
--- a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
@@ -1,6 +1,6 @@
 import {useState} from 'react';
 
-import {TrashBin} from '@gravity-ui/icons';
+import {FilePlus, TrashBin} from '@gravity-ui/icons';
 import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
 
 import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
@@ -111,7 +111,11 @@ export function TemplatesPopup<TTemplate extends GridBlockTemplate>({
                             <Menu className={stop}>
                                 {allowAdd && (
                                     <>
-                                        <Menu.Item className={stop} onClick={() => setAdding(true)}>
+                                        <Menu.Item
+                                            className={stop}
+                                            iconStart={<Icon data={FilePlus} />}
+                                            onClick={() => setAdding(true)}
+                                        >
                                             {i18n('add_template')}
                                         </Menu.Item>
                                         <Menu.Item