diff --git a/package.json b/package.json
index 527112a..3e4d146 100644
--- a/package.json
+++ b/package.json
@@ -266,6 +266,16 @@
         "default": "./build/cjs/modules/QueryComparison/index.js"
       }
     },
+    "./components/DataTypePopup": {
+      "import": {
+        "types": "./build/esm/components/DataTypePopup/index.d.ts",
+        "default": "./build/esm/components/DataTypePopup/index.js"
+      },
+      "require": {
+        "types": "./build/cjs/components/DataTypePopup/index.d.ts",
+        "default": "./build/cjs/components/DataTypePopup/index.js"
+      }
+    },
     "./components/DataTable": {
       "import": {
         "types": "./build/esm/components/DataTable/index.d.ts",
diff --git a/src/components/DataTypePopup/DataTypePopup.scss b/src/components/DataTypePopup/DataTypePopup.scss
new file mode 100644
index 0000000..7e196ec
--- /dev/null
+++ b/src/components/DataTypePopup/DataTypePopup.scss
@@ -0,0 +1,25 @@
+.qp-data-type-popup {
+    min-width: 0;
+    border-radius: var(--g-border-radius-xs);
+
+    &_interactive {
+        cursor: pointer;
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--g-color-line-focus);
+        outline-offset: 2px;
+    }
+
+    &__icon {
+        flex-shrink: 0;
+        color: var(--g-color-text-hint);
+    }
+
+    &__content {
+        max-height: 300px;
+        max-width: min(600px, calc(100vw - 32px));
+        overflow: auto;
+        padding: var(--g-spacing-3);
+    }
+}
diff --git a/src/components/DataTypePopup/DataTypePopup.stories.tsx b/src/components/DataTypePopup/DataTypePopup.stories.tsx
new file mode 100644
index 0000000..9a13b23
--- /dev/null
+++ b/src/components/DataTypePopup/DataTypePopup.stories.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ThemeProvider} from '@gravity-ui/uikit';
+import {DataTypePopup} from './DataTypePopup';
+import type {ParameterType} from '../../types/dataTypes';
+
+const nestedType: ParameterType = {
+    name: 'Struct',
+    struct: [
+        {key: 'id', type: {name: 'Uint64'}},
+        {key: 'name', type: {name: 'Utf8', optional: true}},
+        {
+            key: 'items',
+            type: {
+                name: 'List',
+                type: {
+                    name: 'Struct',
+                    struct: [
+                        {key: 'price', type: {name: 'Decimal', params: [22, 9]}},
+                        {key: 'tags', type: {name: 'Set', type: {name: 'String'}}},
+                    ],
+                },
+            },
+        },
+    ],
+};
+
+const meta = {
+    title: 'Components/DataTypePopup',
+    component: DataTypePopup,
+    tags: ['autodocs'],
+    parameters: {layout: 'centered'},
+    args: {children: 'Uint64', type: {name: 'Uint64'}},
+} satisfies Meta<typeof DataTypePopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primitive: Story = {};
+export const Nested: Story = {args: {children: 'Struct', type: nestedType}};
+export const OptionalAndTagged: Story = {
+    args: {
+        children: 'Decimal',
+        type: {
+            name: 'Decimal',
+            params: [22, 9],
+            optional: true,
+            optionalLevel: 3,
+            tagged: true,
+            tags: ['Money', 'USD'],
+        },
+    },
+};
+export const Dictionary: Story = {
+    args: {
+        children: 'Dict',
+        type: {name: 'Dict', type: [{name: 'Utf8'}, {name: 'List', type: {name: 'Int64'}}]},
+    },
+};
+export const Variant: Story = {
+    args: {
+        children: 'Variant',
+        type: {
+            name: 'Variant',
+            struct: [
+                {key: 'text', type: {name: 'Utf8'}},
+                {key: 'point', type: {name: 'Tuple', type: [{name: 'Double'}, {name: 'Double'}]}},
+                {key: 'status', type: {name: 'Enum', type: [{name: 'ready'}, {name: 'pending'}]}},
+            ],
+        },
+    },
+};
+export const WithoutIcon: Story = {args: {...Nested.args, hideIcon: true}};
+export const WithoutType: Story = {args: {children: 'No type information', type: undefined}};
+export const LongStructure: Story = {
+    args: {
+        children: 'Struct with 50 fields',
+        type: {
+            name: 'Struct',
+            struct: Array.from({length: 50}, (_, index) => ({
+                key: `field_${index}`,
+                type: {name: 'Utf8'},
+            })),
+        },
+    },
+};
+export const DarkTheme: Story = {
+    args: Nested.args,
+    decorators: [
+        (Story) => (
+            <ThemeProvider theme="dark">
+                <Story />
+            </ThemeProvider>
+        ),
+    ],
+};
diff --git a/src/components/DataTypePopup/DataTypePopup.tsx b/src/components/DataTypePopup/DataTypePopup.tsx
new file mode 100644
index 0000000..009c2b6
--- /dev/null
+++ b/src/components/DataTypePopup/DataTypePopup.tsx
@@ -0,0 +1,56 @@
+import React, {useState} from 'react';
+import {CircleInfo} from '@gravity-ui/icons';
+import {Flex, Icon, Popover} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import type {DataTypePopupProps} from '../../types/dataTypePopup';
+import {formatType} from '../../helpers/dataTypes';
+import {DataTypeTree} from './internal/DataTypeTree';
+import './DataTypePopup.scss';
+
+const block = cn('qp-data-type-popup');
+
+export function DataTypePopup({children, type, hideIcon, className}: DataTypePopupProps) {
+    const [open, setOpen] = useState(false);
+    if (!type) {
+        return <span className={block(null, className)}>{children}</span>;
+    }
+    const label = formatType(type);
+    return (
+        <Popover
+            hasArrow={false}
+            enableSafePolygon
+            open={open}
+            onOpenChange={setOpen}
+            content={
+                <div className={block('content')}>
+                    <DataTypeTree key={label} type={type} />
+                </div>
+            }
+        >
+            <Flex
+                as="span"
+                inline
+                alignItems="center"
+                gap={1}
+                className={block({interactive: true}, className)}
+                role="button"
+                tabIndex={0}
+                aria-label={label}
+                aria-haspopup="dialog"
+                aria-expanded={open}
+                onClick={() => setOpen((current) => !current)}
+                onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        setOpen((current) => !current);
+                    } else if (event.key === 'Escape' && open) {
+                        setOpen(false);
+                    }
+                }}
+            >
+                {children}
+                {!hideIcon && <Icon className={block('icon')} data={CircleInfo} size={12} />}
+            </Flex>
+        </Popover>
+    );
+}
diff --git a/src/components/DataTypePopup/README.md b/src/components/DataTypePopup/README.md
new file mode 100644
index 0000000..60408af
--- /dev/null
+++ b/src/components/DataTypePopup/README.md
@@ -0,0 +1,24 @@
+# DataTypePopup
+
+Displays a parsed data type in an interactive popover. It uses the shared
+`ParameterType` descriptor from `src/types/dataTypes` and has no dependencies on
+the YQL application or its type parser.
+
+```tsx
+import {DataTypePopup} from '@gravity-ui/querieskit';
+
+<DataTypePopup type={{name: 'List', type: {name: 'Uint64'}}}>List&lt;Uint64&gt;</DataTypePopup>;
+```
+
+- `type`: optional type descriptor. Without it, children render without a popup.
+- `children`: visible trigger content.
+- `hideIcon`: hides the information icon.
+- `className`: styles the trigger.
+
+The popover supports hover, click and keyboard activation. Container types form
+an expandable tree; the first two levels start expanded. Struct/Variant fields,
+Enum members, Decimal parameters, Optional depth and tags are displayed. Content
+scrolls when it exceeds 300px in height.
+
+See **Components / DataTypePopup** in Storybook. QueryParameters uses this component
+for its visible type labels.
diff --git a/src/components/DataTypePopup/i18n/dicts.ts b/src/components/DataTypePopup/i18n/dicts.ts
new file mode 100644
index 0000000..4fa3a86
--- /dev/null
+++ b/src/components/DataTypePopup/i18n/dicts.ts
@@ -0,0 +1,4 @@
+import en from './en.json';
+import ru from './ru.json';
+
+export default {en, ru};
diff --git a/src/components/DataTypePopup/i18n/en.json b/src/components/DataTypePopup/i18n/en.json
new file mode 100644
index 0000000..1a63e55
--- /dev/null
+++ b/src/components/DataTypePopup/i18n/en.json
@@ -0,0 +1,4 @@
+{
+  "action_expand": "Expand {{type}}",
+  "action_collapse": "Collapse {{type}}"
+}
diff --git a/src/components/DataTypePopup/i18n/index.ts b/src/components/DataTypePopup/i18n/index.ts
new file mode 100644
index 0000000..58abaa6
--- /dev/null
+++ b/src/components/DataTypePopup/i18n/index.ts
@@ -0,0 +1,4 @@
+import {addI18Keysets} from '../../../i18n';
+import dicts from './dicts';
+
+export default addI18Keysets('qp:data-type-popup', dicts);
diff --git a/src/components/DataTypePopup/i18n/ru.json b/src/components/DataTypePopup/i18n/ru.json
new file mode 100644
index 0000000..b8ff96b
--- /dev/null
+++ b/src/components/DataTypePopup/i18n/ru.json
@@ -0,0 +1,4 @@
+{
+  "action_expand": "Развернуть {{type}}",
+  "action_collapse": "Свернуть {{type}}"
+}
diff --git a/src/components/DataTypePopup/index.ts b/src/components/DataTypePopup/index.ts
new file mode 100644
index 0000000..89d39d3
--- /dev/null
+++ b/src/components/DataTypePopup/index.ts
@@ -0,0 +1,2 @@
+export {DataTypePopup} from './DataTypePopup';
+export type {DataTypePopupProps} from '../../types/dataTypePopup';
diff --git a/src/components/DataTypePopup/internal/DataTypeTree.scss b/src/components/DataTypePopup/internal/DataTypeTree.scss
new file mode 100644
index 0000000..5eea17b
--- /dev/null
+++ b/src/components/DataTypePopup/internal/DataTypeTree.scss
@@ -0,0 +1,24 @@
+.qp-data-type-tree {
+    min-width: 0;
+    overflow-wrap: anywhere;
+
+    &__toggle {
+        --g-button-padding: 0;
+        font-family: var(--g-font-family-monospace);
+        font-weight: 600;
+        --g-button-text-color: var(--g-color-text-link);
+    }
+
+    &__optional {
+        font-size: var(--g-text-code-1-font-size);
+        font-style: italic;
+    }
+
+    &__children {
+        padding-inline-start: var(--g-spacing-4);
+    }
+
+    &__expand {
+        align-self: flex-start;
+    }
+}
diff --git a/src/components/DataTypePopup/internal/DataTypeTree.tsx b/src/components/DataTypePopup/internal/DataTypeTree.tsx
new file mode 100644
index 0000000..850ab46
--- /dev/null
+++ b/src/components/DataTypePopup/internal/DataTypeTree.tsx
@@ -0,0 +1,109 @@
+import React, {useState} from 'react';
+import {Button, Flex, Text} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import type {ParameterType} from '../../../types/dataTypes';
+import {optionalDepth} from '../../../helpers/dataTypes';
+import i18n from '../i18n';
+import './DataTypeTree.scss';
+
+const block = cn('qp-data-type-tree');
+
+function TypeChildren({type, level}: {type: ParameterType; level: number}) {
+    if ('struct' in type) {
+        return (
+            <>
+                {type.struct.map((entry, index) => (
+                    <DataTypeTree key={index} type={entry.type} member={entry.key} level={level} />
+                ))}
+            </>
+        );
+    }
+    if (type.name === 'Enum') {
+        return (
+            <>
+                {type.type.map((entry, index) => (
+                    <Text key={index} variant="code-1">
+                        {entry.name}
+                    </Text>
+                ))}
+            </>
+        );
+    }
+    if ('type' in type) {
+        const children = Array.isArray(type.type) ? type.type : [type.type];
+        return (
+            <>
+                {children.map((child, index) => (
+                    <DataTypeTree key={index} type={child} level={level} />
+                ))}
+            </>
+        );
+    }
+    return null;
+}
+
+export function DataTypeTree({
+    type,
+    level = 0,
+    member,
+}: {
+    type: ParameterType;
+    level?: number;
+    member?: string | number;
+}) {
+    const [expanded, setExpanded] = useState(level < 2);
+    const complex = 'struct' in type || 'type' in type;
+    const depth = optionalDepth(type);
+    const name = type.name + (type.params?.length ? `(${type.params.join(', ')})` : '');
+    return (
+        <Flex className={block()} direction="column" gap={1}>
+            <Flex alignItems="center" gap={1} wrap="wrap">
+                {member !== undefined && <Text variant="code-1">{member}:</Text>}
+                {complex ? (
+                    <Button
+                        className={block('toggle')}
+                        view="flat"
+                        size="xs"
+                        aria-label={i18n(expanded ? 'action_collapse' : 'action_expand', {
+                            type: name,
+                        })}
+                        aria-expanded={expanded}
+                        onClick={() => setExpanded((current) => !current)}
+                    >
+                        {name}
+                    </Button>
+                ) : (
+                    <Text variant="code-1">{name}</Text>
+                )}
+                {depth > 0 && (
+                    <Text className={block('optional')} color="secondary">
+                        {depth > 1 ? `Optional × ${depth}` : 'Optional'}
+                    </Text>
+                )}
+                {type.tags?.map((tag, index) => (
+                    <Text key={index} variant="code-1">
+                        [{tag}]
+                    </Text>
+                ))}
+            </Flex>
+            {complex && (
+                <Flex className={block('children')} direction="column" gap={1}>
+                    {expanded ? (
+                        <TypeChildren type={type} level={level + 1} />
+                    ) : (
+                        <Button
+                            className={block('expand')}
+                            view="flat"
+                            size="xs"
+                            aria-label={i18n('action_expand', {type: name})}
+                            aria-expanded={false}
+                            onClick={() => setExpanded(true)}
+                        >
+                            …
+                        </Button>
+                    )}
+                </Flex>
+            )}
+        </Flex>
+    );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 1f264d9..051ec1e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -96,4 +96,6 @@ export * from './AttachmentList';
 export * from './AttachmentListPlaceholder';
 export {QueryGraph} from './QueryGraph';
 export type {QueryGraphProps} from './QueryGraph';
+export {DataTypePopup} from './DataTypePopup';
+export type {DataTypePopupProps} from './DataTypePopup';
 export * from './MonacoDiffEditor';
diff --git a/src/helpers/dataTypes.ts b/src/helpers/dataTypes.ts
new file mode 100644
index 0000000..0108dcf
--- /dev/null
+++ b/src/helpers/dataTypes.ts
@@ -0,0 +1,15 @@
+import type {ParameterType} from '../types/dataTypes';
+
+export const optionalDepth = (type: ParameterType) =>
+    type.optional ? Math.max(1, type.optionalLevel || 1) : 0;
+
+export function formatType(type: ParameterType): string {
+    let result: string = type.name;
+    if ('struct' in type)
+        result += `<${type.struct.map((field) => `${field.key}: ${formatType(field.type)}`).join(', ')}>`;
+    else if ('type' in type) {
+        result += `<${Array.isArray(type.type) ? type.type.map((item) => (type.name === 'Enum' ? item.name : formatType(item as ParameterType))).join(', ') : formatType(type.type)}>`;
+    } else if (type.params?.length) result += `(${type.params.join(', ')})`;
+    for (const tag of type.tags || []) result = `Tagged<${result}, ${tag}>`;
+    return result + '?'.repeat(optionalDepth(type));
+}
diff --git a/src/helpers/parameterDate.ts b/src/helpers/parameterDate.ts
new file mode 100644
index 0000000..12a59c8
--- /dev/null
+++ b/src/helpers/parameterDate.ts
@@ -0,0 +1,75 @@
+const SECOND = 1_000_000n;
+const DAY = 86400n * SECOND;
+
+const ranges: Record<string, [bigint, bigint]> = {
+    Date: [0n, 49672n],
+    Date32: [-53375809n, 53375807n],
+    Datetime: [0n, 4291747199n],
+    Datetime64: [-4611669897600n, 4611638361599n],
+    Timestamp: [0n, 4291747199999999n],
+    Timestamp64: [-4611669897600000000n, 4611638361599999999n],
+    Interval: [-4291747199999999n, 4291747199999999n],
+    Interval64: [-9223339190399999999n, 9223339190399999999n],
+};
+
+function isDateValue(value: string, name: string) {
+    if (!/^-?\d+$/.test(value)) return false;
+    const range = ranges[name];
+    return Boolean(range && BigInt(value) >= range[0] && BigInt(value) <= range[1]);
+}
+
+function parseInterval(text: string, name: string): string | undefined {
+    const match =
+        /^(-)?P(?:(\d+)W)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)(?:\.(\d{1,6}))?S)?)?$/.exec(
+            text,
+        );
+    if (!match || !match.slice(2).some(Boolean) || text.endsWith('T')) return undefined;
+    const [, negative, weeks, days, hours, minutes, seconds, fraction] = match;
+    const micros =
+        (BigInt(weeks || 0) * 7n * DAY +
+            BigInt(days || 0) * DAY +
+            BigInt(hours || 0) * 3600n * SECOND +
+            BigInt(minutes || 0) * 60n * SECOND +
+            BigInt(seconds || 0) * SECOND +
+            BigInt((fraction || '').padEnd(6, '0'))) *
+        (negative ? -1n : 1n);
+    return isDateValue(String(micros), name) ? String(micros) : undefined;
+}
+
+export function parseDate(text: string, name: string): string | undefined {
+    if (name.startsWith('Interval')) return parseInterval(text, name);
+    const dateOnly = name === 'Date' || name === 'Date32';
+    const match =
+        /^(-?\d{4,6})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,6}))?Z)?$/.exec(text);
+    if (!match || (dateOnly ? match[4] !== undefined : match[4] === undefined)) return undefined;
+    const [, yearText, month, day, hour = '0', minute = '0', second = '0', fraction = ''] = match;
+    const year = Number(yearText);
+    if (year === 0 || (!name.startsWith('Timestamp') && fraction)) return undefined;
+    const jsYear = year < 0 ? year + 1 : year;
+    const date = new Date(0);
+    date.setUTCFullYear(jsYear, Number(month) - 1, Number(day));
+    date.setUTCHours(Number(hour), Number(minute), Number(second), 0);
+    const actual = [
+        date.getUTCFullYear(),
+        date.getUTCMonth() + 1,
+        date.getUTCDate(),
+        date.getUTCHours(),
+        date.getUTCMinutes(),
+        date.getUTCSeconds(),
+    ];
+    const expected = [
+        jsYear,
+        Number(month),
+        Number(day),
+        Number(hour),
+        Number(minute),
+        Number(second),
+    ];
+    if (!actual.every((part, index) => part === expected[index])) return undefined;
+    const seconds = BigInt(date.getTime() / 1000);
+    let result = seconds;
+    if (dateOnly) result = seconds / 86400n;
+    else if (name.startsWith('Timestamp'))
+        result = seconds * SECOND + BigInt(fraction.padEnd(6, '0'));
+    return isDateValue(String(result), name) ? String(result) : undefined;
+}
diff --git a/src/helpers/parameterValidation.ts b/src/helpers/parameterValidation.ts
new file mode 100644
index 0000000..371bb21
--- /dev/null
+++ b/src/helpers/parameterValidation.ts
@@ -0,0 +1,45 @@
+const decimalPattern = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i;
+const specialNumberPattern = /^[+-]?(?:inf|nan)$/i;
+
+function validateInteger(value: string, name: string, bits: bigint) {
+    const unsigned = name.startsWith('Uint');
+    if (!/^[+-]?\d+$/.test(value)) return false;
+    const min = unsigned ? 0n : -(2n ** (bits - 1n));
+    const max = unsigned ? 2n ** bits - 1n : 2n ** (bits - 1n) - 1n;
+    const integer = BigInt(value);
+    return integer >= min && integer <= max;
+}
+
+function validateDecimal(value: string, params?: readonly unknown[]) {
+    if (specialNumberPattern.test(value)) return true;
+    const match = /^[+-]?(\d+)(?:\.(\d*))?$/.exec(value);
+    if (!match) return false;
+    const [precision, scale] = params?.map(Number) || [];
+    if (!Number.isInteger(precision) || !Number.isInteger(scale)) return true;
+    return (
+        match[1].replace(/^0+/, '').length <= precision - scale && (match[2]?.length || 0) <= scale
+    );
+}
+
+/** Validates numeric parameter strings without losing integer precision through JS Number. */
+export function validateNumericValue(
+    value: unknown,
+    name: string,
+    params?: readonly unknown[],
+): boolean {
+    if (typeof value !== 'string') return false;
+    const integer = /^(?:Uint|Int)(8|16|32|64)$/.exec(name);
+    if (integer) return validateInteger(value, name, BigInt(integer[1]));
+    switch (name) {
+        case 'Decimal':
+            return validateDecimal(value, params);
+        case 'Float':
+        case 'Double':
+            return specialNumberPattern.test(value) || decimalPattern.test(value);
+        case 'DyNumber':
+        case 'Number':
+            return decimalPattern.test(value);
+        default:
+            return false;
+    }
+}
diff --git a/src/index.ts b/src/index.ts
index 8e94f8e..693a471 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -23,6 +23,8 @@ export * from './types/errorTree';
 export * from './types/queryStatistics';
 export * from './types/queryResults';
 export * from './types/queryGraph';
+export * from './types/dataTypes';
+export * from './types/dataTypePopup';
 export * from './types/queryTimeline';
 export * from './types/queryExecutionPanel';
 export * from './types/queriesSidebar';
diff --git a/src/modules/QueryParameters/QueryParameters.tsx b/src/modules/QueryParameters/QueryParameters.tsx
index 7df5cd7..49731b7 100644
--- a/src/modules/QueryParameters/QueryParameters.tsx
+++ b/src/modules/QueryParameters/QueryParameters.tsx
@@ -65,7 +65,7 @@ export function QueryParameters({
     const parameters = session?.draft ?? value;
     const current = parameters.filter((parameter) => !parameter.deleted);
     const deleted = parameters.filter((parameter) => parameter.deleted);
-    const validation = attempted ? validateParameters(parameters) : {};
+    const validation = editing ? validateParameters(parameters) : {};
     const query = search.trim().toLocaleLowerCase();
     const matches = (parameter: QueryParameter) =>
         `${parameter.name} ${formatType(parameter.type)}`.toLocaleLowerCase().includes(query);
@@ -424,7 +424,12 @@ export function QueryParameters({
                         <>
                             <Button
                                 onClick={save}
-                                disabled={locked || conflict || pendingValues.size > 0}
+                                disabled={
+                                    locked ||
+                                    conflict ||
+                                    pendingValues.size > 0 ||
+                                    Object.keys(validation).length > 0
+                                }
                                 loading={pending === 'save'}
                             >
                                 <Icon data={SaveIcon} size={16} />
diff --git a/src/modules/QueryParameters/README.md b/src/modules/QueryParameters/README.md
index 296e5b7..2d42c9e 100644
--- a/src/modules/QueryParameters/README.md
+++ b/src/modules/QueryParameters/README.md
@@ -148,9 +148,9 @@ text fields without a calendar. Uuid requires hexadecimal groups of `8-4-4-4-12`
 characters without a UUID version restriction.
 
 Json, JsonDocument and Yson all require JSON input, preserving the original text
-rather than parsing and reserializing it. Their inline TextArea grows with content;
-the pencil opens a larger JSON editor loaded on demand. Apply accepts valid JSON
-into the form draft, while Cancel leaves the inline value unchanged. View mode
+and large numeric literals. Editing uses an inline Monaco editor loaded on demand,
+with no plain textarea or separate document dialog. Changes update the form draft;
+invalid JSON stays visible and blocks Save until corrected. Read mode syntax
 highlights the original document, with plain text as the loading/error fallback.
 Bool uses True/False segments; Enum uses the schema's option list.
 
diff --git a/src/modules/QueryParameters/helpers/dataTypes.ts b/src/modules/QueryParameters/helpers/dataTypes.ts
new file mode 100644
index 0000000..da8d83a
--- /dev/null
+++ b/src/modules/QueryParameters/helpers/dataTypes.ts
@@ -0,0 +1,52 @@
+import type {ParameterType} from '../../../types/dataTypes';
+import type {QueryParameterType} from '../../../types/queryParameters';
+import {validType} from './parameters';
+
+function convertType(type: QueryParameterType): ParameterType {
+    switch (type.kind) {
+        case 'Optional': {
+            const item = convertType(type.item);
+            return {...item, optional: true, optionalLevel: (item.optionalLevel ?? 0) + 1};
+        }
+        case 'List':
+            return {name: 'List', type: convertType(type.item)};
+        case 'Tuple':
+            return {name: 'Tuple', type: type.items.map(convertType)};
+        case 'Dict':
+            return {name: 'Dict', type: [convertType(type.key), convertType(type.value)]};
+        case 'Struct':
+            return {
+                name: 'Struct',
+                struct: type.fields.map((field) => ({
+                    key: field.name,
+                    type: convertType(field.type),
+                })),
+            };
+        case 'Variant':
+            return {
+                name: 'Variant',
+                struct: type.options.map((option) => ({
+                    key: option.name,
+                    type: convertType(option.type),
+                })),
+            };
+        case 'Enum':
+            return {name: 'Enum', type: type.options.map((name) => ({name}))};
+        case 'Decimal':
+            return {
+                name: 'Decimal',
+                params: type.precision === undefined ? undefined : [type.precision, type.scale],
+            };
+        case 'Pg':
+            return {name: `pg${type.name}`};
+        case 'Unknown':
+            return {name: 'Unknown', params: type.name === 'Unknown' ? undefined : [type.name]};
+        default:
+            return {name: type.kind};
+    }
+}
+
+/** Adapt the query parameter schema to the shared type inspector. */
+export function toParameterType(type: QueryParameterType): ParameterType | undefined {
+    return validType(type) ? convertType(type) : undefined;
+}
diff --git a/src/modules/QueryParameters/helpers/parameters.ts b/src/modules/QueryParameters/helpers/parameters.ts
index 05204b6..7ec651d 100644
--- a/src/modules/QueryParameters/helpers/parameters.ts
+++ b/src/modules/QueryParameters/helpers/parameters.ts
@@ -5,6 +5,8 @@ import type {
     QueryParameterType,
     QueryParameterValue,
 } from '../../../types/queryParameters';
+import {parseDate} from '../../../helpers/parameterDate';
+import {validateNumericValue} from '../../../helpers/parameterValidation';
 import i18n from '../i18n';
 
 export const parameterKinds: QueryParameterType['kind'][] = [
@@ -299,34 +301,14 @@ export function parameterFormatExample(type: QueryParameterType): string | undef
     }
 }
 
+/** Preserve the query editor's short/signed extended years when using the shared parser. */
 function validDateValue(kind: string, value: string): boolean {
     const extended = /(?:32|64)$/.test(kind);
-    const year = extended ? '[+-]?\\d{1,6}' : '\\d{4}';
-    const date = `(${year})-(\\d{2})-(\\d{2})`;
-    const dateOnly = /^Date(?:32)?$/.test(kind);
-    const fraction = kind.startsWith('Timestamp') ? '(?:\\.\\d{1,6})?' : '';
-    const pattern = new RegExp(
-        `^${date}${dateOnly ? '' : `T(\\d{2}):(\\d{2}):(\\d{2})${fraction}Z`}$`,
-    );
+    const pattern = extended ? /^([+-]?)(\d{1,6})(-.*)$/ : /^()(\d{4})(-.*)$/;
     const match = pattern.exec(value);
     if (!match) return false;
-    const month = Number(match[2]);
-    const day = Number(match[3]);
-    return (
-        month >= 1 &&
-        month <= 12 &&
-        day >= 1 &&
-        day <= 31 &&
-        (dateOnly || (Number(match[4]) <= 23 && Number(match[5]) <= 59 && Number(match[6]) <= 59))
-    );
-}
-
-function validInterval(value: string): boolean {
-    return (
-        /^-?P(?:\d+W)?(?:\d+D)?(?:T(?:\d+H)?(?:\d+M)?(?:\d+(?:\.\d{1,6})?S)?)?$/.test(value) &&
-        /\d/.test(value) &&
-        !value.endsWith('T')
-    );
+    const normalized = `${match[1] === '-' ? '-' : ''}${match[2].padStart(4, '0')}${match[3]}`;
+    return parseDate(normalized, kind) !== undefined;
 }
 
 function valueErrors(
@@ -354,14 +336,12 @@ function valueErrors(
             return;
         }
         if (isNumericType(type)) {
-            const integer = /^(?:Uint|Int)/.test(type.kind);
-            const unsigned = type.kind.startsWith('Uint');
-            const pattern = integer
-                ? unsigned
-                    ? /^\+?\d+$/
-                    : /^[+-]?\d+$/
-                : /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/;
-            if (!pattern.test(value)) errors[path] = i18n('alert_invalid-number');
+            const params =
+                type.kind === 'Decimal' && type.precision !== undefined && type.scale !== undefined
+                    ? [type.precision, type.scale]
+                    : undefined;
+            if (!validateNumericValue(value, type.kind, params))
+                errors[path] = i18n('alert_invalid-number');
         }
         if (isDocumentType(type) || type.kind === 'Unknown') {
             try {
@@ -375,7 +355,10 @@ function valueErrors(
             !validDateValue(type.kind, value)
         )
             errors[path] = i18n('alert_invalid-date');
-        if ((type.kind === 'Interval' || type.kind === 'Interval64') && !validInterval(value))
+        if (
+            (type.kind === 'Interval' || type.kind === 'Interval64') &&
+            parseDate(value, type.kind) === undefined
+        )
             errors[path] = i18n('alert_invalid-interval');
         if (
             type.kind === 'Uuid' &&
diff --git a/src/modules/QueryParameters/i18n/en.json b/src/modules/QueryParameters/i18n/en.json
index 21d3d97..398e570 100644
--- a/src/modules/QueryParameters/i18n/en.json
+++ b/src/modules/QueryParameters/i18n/en.json
@@ -1,4 +1,5 @@
 {
+  "alert_editor-load-failed": "Could not load the code editor. Reload the page to try again.",
   "title_current": "Current",
   "title_deleted": "Deleted",
   "title_parameters": "Parameters",
diff --git a/src/modules/QueryParameters/i18n/ru.json b/src/modules/QueryParameters/i18n/ru.json
index 2c37f2e..e261a0e 100644
--- a/src/modules/QueryParameters/i18n/ru.json
+++ b/src/modules/QueryParameters/i18n/ru.json
@@ -1,4 +1,5 @@
 {
+  "alert_editor-load-failed": "Не удалось загрузить редактор кода. Обновите страницу, чтобы попробовать снова.",
   "title_current": "Текущие",
   "title_deleted": "Удалённые",
   "title_parameters": "Параметры",
diff --git a/src/modules/QueryParameters/internal/CollectionValue.scss b/src/modules/QueryParameters/internal/CollectionValue.scss
index 85671fb..107f0a2 100644
--- a/src/modules/QueryParameters/internal/CollectionValue.scss
+++ b/src/modules/QueryParameters/internal/CollectionValue.scss
@@ -2,12 +2,6 @@
 
 .qp-parameter-value {
     @include layout.cell;
-    &__collection_list {
-        // Center the 1px guide under the 12px chevron; keep a 16px nesting step.
-        margin-inline-start: calc(var(--g-spacing-3) / 2 - 0.5px);
-        padding-inline-start: calc(var(--g-spacing-4) - var(--g-spacing-3) / 2 - 0.5px);
-        border-inline-start: 1px solid var(--g-color-line-generic);
-    }
     &__add {
         align-self: flex-start;
     }
diff --git a/src/modules/QueryParameters/internal/CollectionValue.tsx b/src/modules/QueryParameters/internal/CollectionValue.tsx
index db20bcf..79ad4b2 100644
--- a/src/modules/QueryParameters/internal/CollectionValue.tsx
+++ b/src/modules/QueryParameters/internal/CollectionValue.tsx
@@ -38,12 +38,7 @@ export function CollectionValue(props: RecursiveValueProps) {
         addButton.current?.focus();
     };
     return (
-        <Flex
-            ref={root}
-            direction="column"
-            gap={2}
-            className={block('collection', {list: type.kind === 'List'})}
-        >
+        <Flex ref={root} direction="column" gap={2} className={block('collection')}>
             {items.map((item, index) => {
                 const initial = baseline.find(({id}) => id === item.id);
                 const update = (next: QueryParameterValue) =>
diff --git a/src/modules/QueryParameters/internal/NullableValue.scss b/src/modules/QueryParameters/internal/NullableValue.scss
index 28d6304..e625105 100644
--- a/src/modules/QueryParameters/internal/NullableValue.scss
+++ b/src/modules/QueryParameters/internal/NullableValue.scss
@@ -2,6 +2,7 @@
 
 .qp-parameter-value {
     @include layout.root;
+    @include layout.nested-content;
     &_nullable {
         display: grid;
         grid-template-columns: minmax(0, 1fr) auto;
diff --git a/src/modules/QueryParameters/internal/NullableValue.tsx b/src/modules/QueryParameters/internal/NullableValue.tsx
index 9fa7980..f1461c7 100644
--- a/src/modules/QueryParameters/internal/NullableValue.tsx
+++ b/src/modules/QueryParameters/internal/NullableValue.tsx
@@ -78,7 +78,9 @@ export function NullableValue(
                         NULL
                     </Text>
                 ) : (
-                    child
+                    <div className={block('content', {nested: type.kind === 'Optional'})}>
+                        {child}
+                    </div>
                 )}
             </Flex>
         );
@@ -122,7 +124,7 @@ export function NullableValue(
                     />
                 )}
             </Flex>
-            <div className={block('content')}>
+            <div className={block('content', {nested: type.kind === 'Optional' && !nullActive})}>
                 {child}
                 {nullActive && props.errors?.[props.path ?? '$'] && (
                     <Text color="danger" role="alert">
diff --git a/src/modules/QueryParameters/internal/ParameterDocument.scss b/src/modules/QueryParameters/internal/ParameterDocument.scss
index 62dc9aa..0e0df89 100644
--- a/src/modules/QueryParameters/internal/ParameterDocument.scss
+++ b/src/modules/QueryParameters/internal/ParameterDocument.scss
@@ -2,14 +2,26 @@
     min-width: 0;
     width: 100%;
 
-    &__input {
-        flex: 1;
-        min-width: 0;
+    &_disabled {
+        opacity: 0.5;
     }
 
     &__editor {
-        height: min(60vh, 480px);
-        min-height: 200px;
+        height: 120px;
+        min-height: 80px;
+        min-width: 0;
+        overflow: hidden;
+        resize: vertical;
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
+
+        &_invalid {
+            border-color: var(--g-color-line-danger);
+        }
+    }
+
+    &__loading {
+        height: 100%;
     }
 
     &__view {
diff --git a/src/modules/QueryParameters/internal/ParameterDocument.tsx b/src/modules/QueryParameters/internal/ParameterDocument.tsx
index 41a284a..e8a1933 100644
--- a/src/modules/QueryParameters/internal/ParameterDocument.tsx
+++ b/src/modules/QueryParameters/internal/ParameterDocument.tsx
@@ -1,8 +1,7 @@
-import React, {useEffect, useId, useState} from 'react';
-import {Button, Dialog, Flex, Icon, TextArea, useThemeValue} from '@gravity-ui/uikit';
-import PencilIcon from '@gravity-ui/icons/svgs/pencil.svg';
+import React, {useEffect, useMemo, useState} from 'react';
+import {Flex, Loader, Text, useThemeValue} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
-import type {MonacoEditorProps} from '../../../types/monacoEditor';
+import type {MonacoEditorConfig, MonacoEditorProps} from '../../../types/monacoEditor';
 import i18n from '../i18n';
 import './ParameterDocument.scss';
 
@@ -17,15 +16,6 @@ type ParameterDocumentProps = {
     error?: string;
 };
 
-function validJson(value: string) {
-    try {
-        JSON.parse(value);
-        return true;
-    } catch {
-        return false;
-    }
-}
-
 export function ParameterDocument({
     value,
     onUpdate,
@@ -34,31 +24,43 @@ export function ParameterDocument({
     label,
     error,
 }: ParameterDocumentProps) {
-    const [open, setOpen] = useState(false);
-    const [draft, setDraft] = useState(value);
+    const [loadFailed, setLoadFailed] = useState(false);
     const [Editor, setEditor] = useState<React.ComponentType<MonacoEditorProps>>();
     const [highlight, setHighlight] = useState<{
         value: string;
         tokens: {text: string; kind: string}[];
     }>();
-    const titleId = useId();
     const theme = useThemeValue();
+    const config = useMemo<MonacoEditorConfig>(
+        () => ({
+            ariaLabel: label,
+            tabIndex: disabled ? -1 : 0,
+            scrollBeyondLastLine: false,
+            wordWrap: 'on',
+            lineNumbersMinChars: 3,
+            folding: true,
+            tabSize: 2,
+            padding: {top: 8, bottom: 8},
+        }),
+        [label, disabled],
+    );
 
     useEffect(() => {
-        if (!open) return undefined;
+        if (!editing) return undefined;
+        setLoadFailed(false);
         let active = true;
         import('../../../components/MonacoEditor').then(
             ({MonacoEditor}) => {
                 if (active) setEditor(() => MonacoEditor);
             },
             () => {
-                // The text editor remains available when the optional chunk cannot load.
+                if (active) setLoadFailed(true);
             },
         );
         return () => {
             active = false;
         };
-    }, [open]);
+    }, [editing]);
 
     useEffect(() => {
         if (editing) return undefined;
@@ -100,10 +102,6 @@ export function ParameterDocument({
         };
     }, [editing, value, theme]);
 
-    useEffect(() => {
-        if (!editing || disabled) setOpen(false);
-    }, [editing, disabled]);
-
     if (!editing) {
         return highlight?.value === value ? (
             <div className={block('view')}>
@@ -118,81 +116,37 @@ export function ParameterDocument({
         );
     }
 
-    const invalid = !validJson(draft);
     return (
-        <div className={block()}>
-            <Flex gap={1} alignItems="start">
-                <TextArea
-                    className={block('input')}
-                    value={value}
-                    onUpdate={onUpdate}
-                    size="m"
-                    minRows={3}
-                    disabled={disabled}
-                    validationState={error ? 'invalid' : undefined}
-                    errorMessage={error}
-                    controlProps={{'aria-label': label}}
-                />
-                <Button
-                    view="flat-secondary"
-                    size="m"
-                    disabled={disabled}
-                    aria-label={i18n('action_edit-document')}
-                    title={i18n('action_edit-document')}
-                    onClick={() => {
-                        setDraft(value);
-                        setOpen(true);
-                    }}
-                >
-                    <Icon data={PencilIcon} size={16} />
-                </Button>
-            </Flex>
-            <Dialog
-                open={open}
-                onClose={() => setOpen(false)}
-                maxWidth="l"
-                fullWidth
-                aria-labelledby={titleId}
-            >
-                <Dialog.Header caption={label} id={titleId} />
-                <Dialog.Body>
-                    {Editor ? (
-                        <Editor
-                            className={block('editor')}
-                            value={draft}
-                            onChange={setDraft}
-                            language="json"
-                            theme={theme}
-                            monacoConfig={{
-                                automaticLayout: true,
-                                minimap: {enabled: false},
-                                ariaLabel: label,
-                            }}
-                        />
-                    ) : (
-                        <TextArea
-                            value={draft}
-                            onUpdate={setDraft}
-                            minRows={12}
-                            controlProps={{'aria-label': label}}
-                        />
-                    )}
-                </Dialog.Body>
-                <Dialog.Footer
-                    textButtonApply={i18n('action_apply')}
-                    textButtonCancel={i18n('action_cancel')}
-                    propsButtonApply={{disabled: invalid || disabled}}
-                    showError={invalid}
-                    errorText={invalid ? i18n('alert_invalid-json') : undefined}
-                    onClickButtonCancel={() => setOpen(false)}
-                    onClickButtonApply={() => {
-                        if (!invalid && !disabled) {
-                            onUpdate(draft);
-                            setOpen(false);
-                        }
-                    }}
-                />
-            </Dialog>
-        </div>
+        <Flex className={block({disabled})} direction="column" gap={1}>
+            <div className={block('editor', {invalid: Boolean(error) && !disabled})}>
+                {Editor ? (
+                    <Editor
+                        value={value}
+                        onChange={(next) => {
+                            if (!disabled) onUpdate(next);
+                        }}
+                        language="json"
+                        theme={theme}
+                        readOnly={disabled}
+                        monacoConfig={config}
+                    />
+                ) : (
+                    <Flex className={block('loading')} alignItems="center" justifyContent="center">
+                        {loadFailed ? (
+                            <Text color="danger" role="alert">
+                                {i18n('alert_editor-load-failed')}
+                            </Text>
+                        ) : (
+                            <Loader />
+                        )}
+                    </Flex>
+                )}
+            </div>
+            {error && !disabled && (
+                <Text color="danger" role="alert">
+                    {error}
+                </Text>
+            )}
+        </Flex>
     );
 }
diff --git a/src/modules/QueryParameters/internal/ParameterRow.tsx b/src/modules/QueryParameters/internal/ParameterRow.tsx
index 41d2d7a..4f7946f 100644
--- a/src/modules/QueryParameters/internal/ParameterRow.tsx
+++ b/src/modules/QueryParameters/internal/ParameterRow.tsx
@@ -1,12 +1,14 @@
 import React, {useMemo, useState} from 'react';
 import {Dialog, DropdownMenu, Flex, Text, TextInput} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
+import {DataTypePopup} from '../../../components/DataTypePopup';
 import type {
     QueryParameter,
     QueryParameterErrors,
     QueryParameterType,
 } from '../../../types/queryParameters';
 import {defaultValue, formatType, validType} from '../helpers/parameters';
+import {toParameterType} from '../helpers/dataTypes';
 import i18n from '../i18n';
 import {ParameterTypeEditor} from './ParameterTypeEditor';
 import {ParameterValue} from './ParameterValue';
@@ -76,17 +78,20 @@ export function ParameterRow({
         <Flex alignItems="center" gap={2} className={block('header')}>
             <Text className={block('title')}>
                 <Text variant="subheader-1">{label}</Text>{' '}
-                <Text color="secondary" title={formatType(parameter.type)}>
-                    [
-                    {parameter.type.kind === 'Optional'
-                        ? `${formatType(parameter.type.item)}?`
-                        : parameter.type.kind === 'Pg'
-                          ? `pg${parameter.type.name}`
-                          : parameter.type.kind === 'Decimal' || parameter.type.kind === 'Unknown'
-                            ? formatType(parameter.type)
-                            : parameter.type.kind}
-                    ]:
-                </Text>
+                <DataTypePopup type={toParameterType(parameter.type)}>
+                    <Text color="secondary">
+                        [
+                        {parameter.type.kind === 'Optional'
+                            ? `${formatType(parameter.type.item)}?`
+                            : parameter.type.kind === 'Pg'
+                              ? `pg${parameter.type.name}`
+                              : parameter.type.kind === 'Decimal' ||
+                                  parameter.type.kind === 'Unknown'
+                                ? formatType(parameter.type)
+                                : parameter.type.kind}
+                        ]:
+                    </Text>
+                </DataTypePopup>
             </Text>
             {editing && (
                 <DropdownMenu
diff --git a/src/modules/QueryParameters/internal/ParameterValueContent.scss b/src/modules/QueryParameters/internal/ParameterValueContent.scss
index e1667bb..e63d0fd 100644
--- a/src/modules/QueryParameters/internal/ParameterValueContent.scss
+++ b/src/modules/QueryParameters/internal/ParameterValueContent.scss
@@ -2,6 +2,7 @@
 
 .qp-parameter-value {
     @include layout.root;
+    @include layout.nested-content;
     &_boxed {
         padding: var(--g-spacing-3);
         border: 1px solid var(--g-color-line-generic);
diff --git a/src/modules/QueryParameters/internal/ParameterValueContent.tsx b/src/modules/QueryParameters/internal/ParameterValueContent.tsx
index dd74a9e..9a213c6 100644
--- a/src/modules/QueryParameters/internal/ParameterValueContent.tsx
+++ b/src/modules/QueryParameters/internal/ParameterValueContent.tsx
@@ -47,8 +47,7 @@ export function ParameterValueContent(props: RecursiveValueProps) {
         onChange(nextValue);
     };
     const scalar = isScalarType(type);
-    const boxed =
-        ['Variant', 'Dict', 'Struct'].includes(type.kind) || (editing && type.kind === 'Tuple');
+    const boxed = ['Variant', 'Dict', 'Struct', 'Tuple'].includes(type.kind);
     const actions =
         editing && !isDocumentType(type) && type.kind !== 'Bool' ? (
             <ValueActions
@@ -135,7 +134,10 @@ export function ParameterValueContent(props: RecursiveValueProps) {
                     actions={actions}
                 />
             )}
-            <div className={block('content')} hidden={!expanded || (props.nullActive && !scalar)}>
+            <div
+                className={block('content', {nested: !scalar})}
+                hidden={!expanded || (props.nullActive && !scalar)}
+            >
                 {content}
             </div>
             {error && !scalar && representation.mode !== 'raw' && (
diff --git a/src/modules/QueryParameters/internal/ParameterValueHeaders.scss b/src/modules/QueryParameters/internal/ParameterValueHeaders.scss
index a788e4e..d5cd070 100644
--- a/src/modules/QueryParameters/internal/ParameterValueHeaders.scss
+++ b/src/modules/QueryParameters/internal/ParameterValueHeaders.scss
@@ -12,9 +12,9 @@
         flex-shrink: 0;
         white-space: nowrap;
     }
-    &__list-toggle {
+    &__toggle {
         --g-button-padding: 0px;
-        --g-button-icon-space: var(--g-spacing-3);
-        --g-button-icon-offset: var(--g-spacing-1);
+        flex-shrink: 0;
+        width: var(--qp-parameter-toggle-size);
     }
 }
diff --git a/src/modules/QueryParameters/internal/ParameterValueHeaders.tsx b/src/modules/QueryParameters/internal/ParameterValueHeaders.tsx
index 69ea375..e399940 100644
--- a/src/modules/QueryParameters/internal/ParameterValueHeaders.tsx
+++ b/src/modules/QueryParameters/internal/ParameterValueHeaders.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import {Button, Flex, Icon, Text} from '@gravity-ui/uikit';
 import ChevronDownIcon from '@gravity-ui/icons/svgs/chevron-down.svg';
 import ChevronRightIcon from '@gravity-ui/icons/svgs/chevron-right.svg';
+import {DataTypePopup} from '../../../components/DataTypePopup';
 import type {QueryParameterType} from '../../../types/queryParameters';
+import {toParameterType} from '../helpers/dataTypes';
 import {formatType} from '../helpers/parameters';
 import i18n from '../i18n';
 import cn from 'bem-cn-lite';
@@ -42,6 +44,7 @@ export function BoxHeader({
         <Flex alignItems="center" gap={1} className={block('box-header', className)}>
             {collapsible && (
                 <Button
+                    className={block('toggle')}
                     view="flat-secondary"
                     size="m"
                     disabled={disabled}
@@ -53,7 +56,11 @@ export function BoxHeader({
                 </Button>
             )}
             <div className={block('cell')}>
-                {header ?? <Text variant="code-1">{formatType(type)}</Text>}
+                {header ?? (
+                    <DataTypePopup type={toParameterType(type)}>
+                        <Text variant="code-1">{formatType(type)}</Text>
+                    </DataTypePopup>
+                )}
             </div>
             {collapsible && type.kind !== 'Variant' && (
                 <Text color="secondary" variant="caption-2" className={block('count')}>
@@ -89,7 +96,7 @@ export function ListHeader({
     return (
         <Flex gap={1} alignItems="center" className={className}>
             <Button
-                className={block('list-toggle')}
+                className={block('toggle')}
                 view="flat"
                 size="m"
                 disabled={disabled}
@@ -98,13 +105,15 @@ export function ListHeader({
                 onClick={onToggle}
             >
                 <Icon data={expanded ? ChevronDownIcon : ChevronRightIcon} size={12} />
+            </Button>
+            <DataTypePopup type={toParameterType(type)}>
                 <Text variant="code-1">
                     {'List '}
                     <Text variant="code-1" color="secondary">
                         {`<${formatType(type.item)}>`}
                     </Text>
                 </Text>
-            </Button>
+            </DataTypePopup>
             <Text color="secondary" variant="caption-2" className={block('cell')}>
                 {i18n('value_elements', {count})}
             </Text>
diff --git a/src/modules/QueryParameters/internal/StructValue.tsx b/src/modules/QueryParameters/internal/StructValue.tsx
index 8f01406..8d8c79e 100644
--- a/src/modules/QueryParameters/internal/StructValue.tsx
+++ b/src/modules/QueryParameters/internal/StructValue.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import {Flex, Text} from '@gravity-ui/uikit';
+import {DataTypePopup} from '../../../components/DataTypePopup';
 import type {QueryParameterItem, QueryParameterType} from '../../../types/queryParameters';
+import {toParameterType} from '../helpers/dataTypes';
 import {defaultValue, formatType} from '../helpers/parameters';
 import type {RecursiveValueProps} from './parameterValueTypes';
 import cn from 'bem-cn-lite';
@@ -46,7 +48,9 @@ export function StructValue(
                     <Flex key={field.id} direction={editing ? 'column' : 'row'} gap={1}>
                         <Text className={editing ? undefined : block('field-name')}>
                             {field.name}
-                            {editing && <Text color="secondary"> [{formatType(field.type)}]:</Text>}
+                            <DataTypePopup type={toParameterType(field.type)}>
+                                <Text color="secondary"> [{formatType(field.type)}]:</Text>
+                            </DataTypePopup>
                         </Text>
                         {child}
                     </Flex>
diff --git a/src/modules/QueryParameters/internal/VariantValue.tsx b/src/modules/QueryParameters/internal/VariantValue.tsx
index 85e2584..af724b6 100644
--- a/src/modules/QueryParameters/internal/VariantValue.tsx
+++ b/src/modules/QueryParameters/internal/VariantValue.tsx
@@ -1,6 +1,8 @@
 import React, {useState} from 'react';
 import {Flex, Radio, Text} from '@gravity-ui/uikit';
+import {DataTypePopup} from '../../../components/DataTypePopup';
 import type {QueryParameterType, QueryParameterValue} from '../../../types/queryParameters';
+import {toParameterType} from '../helpers/dataTypes';
 import {defaultValue, formatType} from '../helpers/parameters';
 import type {RecursiveValueProps} from './parameterValueTypes';
 import cn from 'bem-cn-lite';
@@ -66,7 +68,9 @@ export function VariantValue(
                             >
                                 <Text variant="code-1" color={active ? 'primary' : 'secondary'}>
                                     {option.name}{' '}
-                                    <Text color="secondary">[{formatType(option.type)}]:</Text>
+                                    <DataTypePopup type={toParameterType(option.type)}>
+                                        <Text color="secondary">[{formatType(option.type)}]:</Text>
+                                    </DataTypePopup>
                                 </Text>
                                 <ValueComponent
                                     {...childProps(
diff --git a/src/modules/QueryParameters/internal/_parameterValueLayout.scss b/src/modules/QueryParameters/internal/_parameterValueLayout.scss
index 4aedc90..902816f 100644
--- a/src/modules/QueryParameters/internal/_parameterValueLayout.scss
+++ b/src/modules/QueryParameters/internal/_parameterValueLayout.scss
@@ -1,4 +1,7 @@
 @mixin root {
+    --qp-parameter-toggle-size: var(--g-spacing-7);
+    --qp-parameter-guide-inset: calc(var(--qp-parameter-toggle-size) / 2);
+
     min-width: 0;
     &__header,
     &__content,
@@ -34,6 +37,34 @@
             grid-column: 1 / -1;
             grid-row: 1;
         }
+
+        &_horizontal#{&}_boxed > &__content {
+            grid-column: 1 / -1;
+        }
+    }
+}
+
+@mixin nested-content {
+    &__content_nested {
+        position: relative;
+        margin-inline-start: var(--qp-parameter-guide-inset);
+        padding-inline-start: var(--qp-parameter-guide-inset);
+    }
+
+    &__content_nested::before {
+        content: '';
+        position: absolute;
+        inset-inline-start: 0;
+        inset-block: 0;
+        width: 1px;
+        background: var(--g-color-line-generic);
+        // Center the stroke on the chevron axis without snapping a half-pixel border.
+        transform: translateX(-50%);
+        pointer-events: none;
+    }
+
+    &__content_nested:dir(rtl)::before {
+        transform: translateX(50%);
     }
 }
 
diff --git a/src/modules/QueryParameters/story/QueryParameters.stories.tsx b/src/modules/QueryParameters/story/QueryParameters.stories.tsx
index 3afa963..23964e4 100644
--- a/src/modules/QueryParameters/story/QueryParameters.stories.tsx
+++ b/src/modules/QueryParameters/story/QueryParameters.stories.tsx
@@ -5,6 +5,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import {action} from 'storybook/actions';
 import type {QueryParameter, QueryParametersProps} from '../../../types/queryParameters';
 import {QueryParameters} from '../QueryParameters';
+import {isScalarType} from '../helpers/parameters';
 import {ParameterRow} from '../internal/ParameterRow';
 import {allTypesParameters} from './allTypes';
 
@@ -199,6 +200,27 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+export const SimpleTypes: Story = {
+    args: {
+        initialValue: [
+            {id: 'Number', name: 'number', type: {kind: 'Number'}, value: '123.45'},
+            ...allTypesParameters
+                .filter(({type}) => isScalarType(type) && type.kind !== 'Unknown')
+                .map<QueryParameter>((parameter) =>
+                    parameter.type.kind === 'Decimal'
+                        ? {...parameter, type: {kind: 'Decimal', precision: 5, scale: 2}}
+                        : parameter,
+                ),
+        ],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'All simple types in the complete QueryParameters panel. Click Edit to change values, inspect a type with its info button, then Save to see the result. Validation runs while editing and blocks Save for invalid values. Try 128 for Int8, -1 for Uint8, 1000 or 1.234 for Decimal(5, 2), or an invalid calendar date. Cancel restores the saved values.',
+            },
+        },
+    },
+};
 export const Empty: Story = {args: {initialValue: []}};
 export const ExternalErrors: Story = {
     args: {
diff --git a/src/types/dataTypePopup.ts b/src/types/dataTypePopup.ts
new file mode 100644
index 0000000..81a8cb0
--- /dev/null
+++ b/src/types/dataTypePopup.ts
@@ -0,0 +1,9 @@
+import type {ReactNode} from 'react';
+import type {ParameterType} from './dataTypes';
+
+export interface DataTypePopupProps {
+    children: ReactNode;
+    type?: ParameterType;
+    hideIcon?: boolean;
+    className?: string;
+}
diff --git a/src/types/dataTypes.ts b/src/types/dataTypes.ts
new file mode 100644
index 0000000..cd23f49
--- /dev/null
+++ b/src/types/dataTypes.ts
@@ -0,0 +1,64 @@
+/** Parsed type descriptor. Optional and tagged wrappers are metadata on the underlying type. */
+export type ParameterType = {
+    optional?: boolean;
+    optionalLevel?: number;
+    tagged?: boolean;
+    tags?: string[];
+    params?: unknown[];
+} & (
+    | {name: ParameterPrimitiveTypeName; complex?: false}
+    | {name: 'List' | 'Set' | 'Stream'; complex?: true; type: ParameterType}
+    | {name: 'Tuple'; complex?: true; type: ParameterType[]}
+    | {name: 'Dict'; complex?: true; type: [ParameterType, ParameterType]}
+    | {name: 'Struct' | 'Variant'; complex?: true; struct: ParameterTypeMember[]}
+    | {name: 'Enum'; complex?: true; type: {name: string | number}[]}
+);
+
+export type ParameterPrimitiveTypeName =
+    | 'Bool'
+    | 'Number'
+    | 'Int8'
+    | 'Int16'
+    | 'Int32'
+    | 'Int64'
+    | 'Uint8'
+    | 'Uint16'
+    | 'Uint32'
+    | 'Uint64'
+    | 'Float'
+    | 'Double'
+    | 'Decimal'
+    | 'DyNumber'
+    | 'String'
+    | 'Utf8'
+    | 'Uuid'
+    | 'Json'
+    | 'JsonDocument'
+    | 'Yson'
+    | 'Date'
+    | 'Date32'
+    | 'Datetime'
+    | 'Datetime64'
+    | 'Timestamp'
+    | 'Timestamp64'
+    | 'Interval'
+    | 'Interval64'
+    | 'TzDate'
+    | 'TzDate32'
+    | 'TzDatetime'
+    | 'TzDatetime64'
+    | 'TzTimestamp'
+    | 'TzTimestamp64'
+    | 'Void'
+    | 'Null'
+    | 'EmptyList'
+    | 'EmptyDict'
+    | 'Unknown'
+    | `pg${string}`
+    | `_pg${string}`;
+
+export interface ParameterTypeMember {
+    /** Strings identify struct fields; numbers identify tuple variants. */
+    key: string | number;
+    type: ParameterType;
+}
diff --git a/tests/components/ParameterDocument.test.tsx b/tests/components/ParameterDocument.test.tsx
index 1fa8468..6ef8652 100644
--- a/tests/components/ParameterDocument.test.tsx
+++ b/tests/components/ParameterDocument.test.tsx
@@ -5,13 +5,16 @@ import {ThemeProvider, configure} from '@gravity-ui/uikit';
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {ParameterDocument} from '../../src/modules/QueryParameters/internal/ParameterDocument';
 import {setLang} from '../../src/i18n';
+import type {MonacoEditorProps} from '../../src/types/monacoEditor';
 
 vi.mock('../../src/components/MonacoEditor', () => ({
-    MonacoEditor: ({value, onChange}: {value: string; onChange: (value: string) => void}) => (
+    MonacoEditor: ({value, onChange, readOnly, monacoConfig}: MonacoEditorProps) => (
         <textarea
-            aria-label="JSON editor"
+            aria-label={monacoConfig?.ariaLabel}
+            tabIndex={monacoConfig?.tabIndex}
             value={value}
-            onChange={(event) => onChange(event.target.value)}
+            readOnly={readOnly}
+            onChange={(event) => onChange?.(event.target.value)}
         />
     ),
 }));
@@ -59,7 +62,7 @@ describe('ParameterDocument', () => {
         container.remove();
         vi.unstubAllGlobals();
     });
-    async function render(value = '{"a":1}', editing = true, disabled = false) {
+    async function render(value = '{"a":1}', editing = true, disabled = false, error?: string) {
         await act(async () =>
             root.render(
                 <ThemeProvider>
@@ -69,20 +72,14 @@ describe('ParameterDocument', () => {
                         editing={editing}
                         disabled={disabled}
                         label="Document"
+                        error={error}
                     />
                 </ThemeProvider>,
             ),
         );
     }
-    async function click(text: string) {
-        const button = [...document.querySelectorAll('button')].find(
-            (node) => node.getAttribute('aria-label') === text || node.textContent === text,
-        );
-        if (!button) throw new Error(`Missing button ${text}`);
-        await act(async () => button.click());
-    }
     function change(value: string) {
-        const input = document.querySelector('textarea[aria-label="JSON editor"]');
+        const input = container.querySelector('textarea[aria-label="Document"]');
         if (!input) throw new Error('Missing editor');
         act(() => {
             Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set?.call(
@@ -92,37 +89,36 @@ describe('ParameterDocument', () => {
             input.dispatchEvent(new Event('input', {bubbles: true}));
         });
     }
-    it('applies exact text only after Apply', async () => {
+    it('updates the form draft immediately and preserves exact document text', async () => {
         await render();
-        await click('Edit document');
         const value = '{\n  "n": 12345678901234567890\n}';
         change(value);
-        expect(onUpdate).not.toHaveBeenCalled();
-        await click('Apply');
         expect(onUpdate).toHaveBeenCalledExactlyOnceWith(value);
     });
-    it('cancels edits and reopens with the original value', async () => {
+    it('follows controlled value changes without emitting another update', async () => {
         await render();
-        await click('Edit document');
         change('{"new":true}');
-        await click('Cancel');
+        await render('{"new":true}');
+        onUpdate.mockClear();
+        await render('{"a":1}');
         expect(onUpdate).not.toHaveBeenCalled();
-        await click('Edit document');
         expect(
-            document.querySelector<HTMLTextAreaElement>('textarea[aria-label="JSON editor"]')
-                ?.value,
+            container.querySelector<HTMLTextAreaElement>('textarea[aria-label="Document"]')?.value,
         ).toBe('{"a":1}');
     });
-    it('blocks invalid JSON and allows correction', async () => {
+    it('forwards invalid drafts and displays validation supplied by the form', async () => {
         await render();
-        await click('Edit document');
         change('{');
-        await click('Apply');
-        expect(onUpdate).not.toHaveBeenCalled();
-        expect(document.body.textContent).toContain('Enter a valid JSON document.');
+        expect(onUpdate).toHaveBeenLastCalledWith('{');
+        await render('{', true, false, 'Enter a valid JSON document.');
+        expect(container.querySelector('[role="alert"]')?.textContent).toBe(
+            'Enter a valid JSON document.',
+        );
+        expect(container.querySelector('textarea')?.value).toBe('{');
         change('null');
-        await click('Apply');
-        expect(onUpdate).toHaveBeenCalledWith('null');
+        expect(onUpdate).toHaveBeenLastCalledWith('null');
+        await render('null');
+        expect(container.querySelector('[role="alert"]')).toBeNull();
     });
     it('preserves readonly text when colorization fails', async () => {
         const value = '  {"a":1}\n';
@@ -143,9 +139,16 @@ describe('ParameterDocument', () => {
         await render(value, false);
         expect(container.textContent).toBe(value);
     });
-    it('disables document actions for NULL', async () => {
+    it('makes the NULL editor read-only and ignores updates until enabled', async () => {
         await render('', true, true);
-        expect(container.querySelector('textarea')?.disabled).toBe(true);
-        expect(container.querySelector('button')?.disabled).toBe(true);
+        expect(container.querySelector('textarea')?.readOnly).toBe(true);
+        expect(container.querySelector('textarea')?.tabIndex).toBe(-1);
+        change('{"ignored":true}');
+        expect(onUpdate).not.toHaveBeenCalled();
+        await render('{}');
+        expect(container.querySelector('textarea')?.readOnly).toBe(false);
+        expect(container.querySelector('textarea')?.tabIndex).toBe(0);
+        change('{"enabled":true}');
+        expect(onUpdate).toHaveBeenCalledExactlyOnceWith('{"enabled":true}');
     });
 });
diff --git a/tests/components/QueryParameters.test.tsx b/tests/components/QueryParameters.test.tsx
index 06ed8ab..d74849d 100644
--- a/tests/components/QueryParameters.test.tsx
+++ b/tests/components/QueryParameters.test.tsx
@@ -8,6 +8,19 @@ import {QueryParameters} from '../../src/modules/QueryParameters/QueryParameters
 import type {QueryParameter, QueryParametersProps} from '../../src/types/queryParameters';
 import {setLang} from '../../src/i18n';
 import {allTypesParameters} from '../../src/modules/QueryParameters/story/allTypes';
+import type {MonacoEditorProps} from '../../src/types/monacoEditor';
+
+vi.mock('../../src/components/MonacoEditor', () => ({
+    MonacoEditor: ({value, onChange, readOnly, monacoConfig}: MonacoEditorProps) => (
+        <textarea
+            aria-label={monacoConfig?.ariaLabel}
+            tabIndex={monacoConfig?.tabIndex}
+            value={value}
+            readOnly={readOnly}
+            onChange={(event) => onChange?.(event.target.value)}
+        />
+    ),
+}));
 
 const initial: QueryParameter[] = [{id: 'p', name: 'limit', type: {kind: 'Number'}, value: '10'}];
 
@@ -388,6 +401,7 @@ describe('QueryParameters', () => {
         change('Parameter name 2', 'limit');
         await click('Apply', dialog());
         change('$limit', 'NaN');
+        expect(button('Save').disabled).toBe(true);
         await click('Save');
         expect(onChange).not.toHaveBeenCalled();
         expect(container.textContent).toContain('Parameter names must be unique');
@@ -402,13 +416,40 @@ describe('QueryParameters', () => {
         await click('Apply', dialog());
         change('$limit', '12');
         change('$document', '{bad');
+        expect(field('$document').value).toBe('{bad');
+        expect(button('Save').disabled).toBe(true);
         await click('Save');
         expect(onChange).not.toHaveBeenCalled();
         expect(container.textContent).toContain('Enter a valid JSON');
         change('$document', '{"number":9007199254740993}');
+        expect(button('Save').disabled).toBe(false);
         await click('Save');
         expect(lastValue()[1].value).toBe('{"number":9007199254740993}');
     });
+    it.each(['Json', 'JsonDocument', 'Yson'] as const)(
+        'keeps %s document edits in the draft until Save and discards them on Cancel',
+        async (kind) => {
+            controlled([{id: 'document', name: 'document', type: {kind}, value: '{}'}]);
+            await click('Edit');
+            change('$document', '{"cancelled":true}');
+            expect(onChange).not.toHaveBeenCalled();
+            await click('Editing actions');
+            await click('Cancel', document);
+            await click('Edit');
+            expect(field('$document').value).toBe('{}');
+            change('$document', '{');
+            expect(button('Save').disabled).toBe(true);
+            const value = '{\n  "number": 9007199254740993\n}';
+            change('$document', value);
+            expect(button('Save').disabled).toBe(false);
+            await click('Save');
+            expect(onChange).toHaveBeenCalledExactlyOnceWith([
+                {id: 'document', name: 'document', type: {kind}, value},
+            ]);
+            await click('Edit');
+            expect(field('$document').value).toBe(value);
+        },
+    );
     it('keeps Number and Json editors free of RAW and preserves numeric precision', async () => {
         render({
             value: [...initial, {id: 'json', name: 'document', type: {kind: 'Json'}, value: '{}'}],