@sdcorejs/angular 19.2.0 → 19.2.2

package/fesm2022/sdcorejs-angular-components-api-contract-builder.mjs

@@ -0,0 +1,3411 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, input, output, computed, ChangeDetectionStrategy, Component, inject, booleanAttribute, linkedSignal, viewChild, signal, model, effect, untracked, HostBinding } from '@angular/core';
+import { sdIsTemporalValueTransform } from '@sdcorejs/angular/forms/models';
+import { SdTranslatePipe, I18nService } from '@sdcorejs/angular/i18n';
+import { SdButton } from '@sdcorejs/angular/components/button';
+import { SdCodeEditor } from '@sdcorejs/angular/components/code-editor';
+import { SdIcon } from '@sdcorejs/angular/modules/icon';
+import { SdInput } from '@sdcorejs/angular/forms/input';
+import { SdSelect } from '@sdcorejs/angular/forms/select';
+import { SdSideDrawer } from '@sdcorejs/angular/components/side-drawer';
+import { SdDate } from '@sdcorejs/angular/forms/date';
+import { SdDatetime } from '@sdcorejs/angular/forms/datetime';
+import { SdInputNumber } from '@sdcorejs/angular/forms/input-number';
+
+const SD_API_CONTRACT_DATA_TYPES = [
+    'string',
+    'number',
+    'boolean',
+    'date',
+    'datetime',
+    'object',
+    'array',
+];
+const SD_API_CONTRACT_SCALAR_DATA_TYPES = [
+    'string',
+    'number',
+    'boolean',
+    'date',
+    'datetime',
+];
+function sdIsApiContractDataType(value) {
+    return typeof value === 'string' && SD_API_CONTRACT_DATA_TYPES.includes(value);
+}
+function sdIsApiContractScalarDataType(value) {
+    return typeof value === 'string' && SD_API_CONTRACT_SCALAR_DATA_TYPES.includes(value);
+}
+function sdIsApiContractTemporalDataType(value) {
+    return value === 'date' || value === 'datetime';
+}
+const SD_API_CONTRACT_HTTP_METHODS = [
+    'GET',
+    'POST',
+    'PUT',
+    'PATCH',
+    'DELETE',
+    'HEAD',
+    'OPTIONS',
+];
+function sdIsApiContractHttpMethod(value) {
+    return typeof value === 'string' && SD_API_CONTRACT_HTTP_METHODS.includes(value);
+}
+// ---------------------------------------------------------------------------
+// Contract
+// ---------------------------------------------------------------------------
+/** The only `contractVersion` this release understands. */
+const SD_API_CONTRACT_VERSION = 1;
+const SD_API_CONTRACT_EXPRESSION_ROOTS = ['input', 'env', 'res'];
+const SD_API_CONTRACT_ALLOWED_ROOTS = {
+    request: ['input', 'env'],
+    output: ['res', 'input', 'env'],
+};
+
+/** What the builder falls back to when the host application provides no configuration. */
+const SD_API_CONTRACT_EMPTY_CONFIGURATION = Object.freeze({ env: Object.freeze({}) });
+const SD_API_CONTRACT_CONFIGURATION = new InjectionToken('sd-api-contract.configuration');
+/**
+ * Registers the env catalog available to every `<sd-api-contract-builder>` in the injector.
+ *
+ * ```ts
+ * provideSdApiContract({
+ *   env: {
+ *     baseUrl: { type: 'string', label: 'Backend base URL' },
+ *     token: { type: 'string', label: 'Access token', sensitive: true },
+ *   },
+ * });
+ * ```
+ */
+function provideSdApiContract(configuration) {
+    return makeEnvironmentProviders([{ provide: SD_API_CONTRACT_CONFIGURATION, useValue: configuration }]);
+}
+/** Normalizes an optionally-injected configuration into one that is always safe to read. */
+function resolveSdApiContractConfiguration(configuration) {
+    if (!configuration || typeof configuration !== 'object' || !configuration.env || typeof configuration.env !== 'object') {
+        return SD_API_CONTRACT_EMPTY_CONFIGURATION;
+    }
+    return configuration;
+}
+
+const OPEN = '${';
+const CLOSE = '}';
+// why: chỉ chấp nhận identifier thuần. Mọi thứ khác — `a[0]`, `a.toUpperCase()`, `1 + 1`, `a ? b : c`
+// — trượt regex này và bị từ chối NGAY tại parser, nên không có nhánh nào có thể chạy JavaScript.
+const IDENTIFIER = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+// why: ba tên này là đường vào prototype chain. Chặn ở parser (không phải ở resolver) để mọi
+// consumer của reference — validator, autocomplete, executor tương lai — đều được bảo vệ như nhau.
+const FORBIDDEN_SEGMENTS = new Set(['__proto__', 'prototype', 'constructor']);
+function isKnownRoot(value) {
+    return SD_API_CONTRACT_EXPRESSION_ROOTS.includes(value);
+}
+/**
+ * Parses a `source` / URL template into references and errors.
+ *
+ * Pure string scanning — no `eval`, no `new Function`, no expression evaluation of any kind. The
+ * grammar accepts exactly `${<root>.<identifier>(.<identifier>)*}` and nothing else.
+ */
+function parseSdApiContractTemplate(source) {
+    if (typeof source !== 'string') {
+        return { kind: 'literal', valid: true, references: [], errors: [] };
+    }
+    const spans = [];
+    const errors = [];
+    let cursor = 0;
+    while (cursor <= source.length) {
+        const open = source.indexOf(OPEN, cursor);
+        if (open < 0)
+            break;
+        const close = source.indexOf(CLOSE, open + OPEN.length);
+        if (close < 0) {
+            const raw = source.slice(open);
+            spans.push({ open, close: source.length - 1, raw, reference: null });
+            errors.push({ code: 'template.unterminated', message: `Expression "${raw}" is missing its closing "}".`, index: open, raw });
+            break;
+        }
+        const raw = source.slice(open, close + 1);
+        const inner = source.slice(open + OPEN.length, close);
+        const error = validateInner(inner, raw, open);
+        if (error) {
+            errors.push(error);
+            spans.push({ open, close, raw, reference: null });
+        }
+        else {
+            const segments = inner.split('.');
+            spans.push({
+                open,
+                close,
+                raw,
+                reference: {
+                    root: segments[0],
+                    path: segments.slice(1),
+                    expression: inner,
+                    raw,
+                    start: open,
+                    end: close + 1,
+                },
+            });
+        }
+        cursor = close + 1;
+    }
+    return {
+        kind: resolveKind(source, spans),
+        valid: errors.length === 0,
+        references: spans.map(span => span.reference).filter((reference) => reference !== null),
+        errors,
+    };
+}
+/** The well-formed references of a template. Malformed expressions are dropped, not thrown. */
+function extractSdApiContractReferences(source) {
+    return parseSdApiContractTemplate(source).references;
+}
+function validateInner(inner, raw, index) {
+    if (inner.includes(OPEN)) {
+        return { code: 'template.nested', message: `Expression "${raw}" nests another "\${".`, index, raw };
+    }
+    if (inner.trim() === '') {
+        return { code: 'template.empty', message: 'Expression "${}" declares no path.', index, raw };
+    }
+    const segments = inner.split('.');
+    // why: kiểm identifier TRƯỚC root — `${input["a"]}` phải báo là path sai, không phải root lạ.
+    if (segments.some(segment => !IDENTIFIER.test(segment))) {
+        return {
+            code: 'template.invalid-path',
+            message: `Expression "${raw}" is not a plain dotted path of identifiers.`,
+            index,
+            raw,
+        };
+    }
+    if (segments.length < 2) {
+        return {
+            code: 'template.invalid-path',
+            message: `Expression "${raw}" needs a root and at least one segment, e.g. "\${env.baseUrl}".`,
+            index,
+            raw,
+        };
+    }
+    if (!isKnownRoot(segments[0])) {
+        return {
+            code: 'template.unknown-root',
+            message: `Unknown expression root "${segments[0]}" — expected one of ${SD_API_CONTRACT_EXPRESSION_ROOTS.join(', ')}.`,
+            index,
+            raw,
+        };
+    }
+    const forbidden = segments.slice(1).find(segment => FORBIDDEN_SEGMENTS.has(segment));
+    if (forbidden) {
+        return { code: 'template.forbidden-segment', message: `Segment "${forbidden}" is not addressable.`, index, raw };
+    }
+    if (segments[0] === 'env' && segments.length !== 2) {
+        return {
+            code: 'template.invalid-path',
+            message: `Environment references address a single key, e.g. "\${env.baseUrl}" — got "${raw}".`,
+            index,
+            raw,
+        };
+    }
+    return null;
+}
+function resolveKind(source, spans) {
+    if (spans.length === 0)
+        return 'literal';
+    const only = spans[0];
+    const isWholeString = spans.length === 1 && only.reference !== null && only.open === 0 && only.close === source.length - 1;
+    return isWholeString ? 'exact' : 'interpolated';
+}
+
+// why: `in` và truy cập trực tiếp đều đi qua prototype chain — `properties['constructor']` trả về
+// hàm dựng của Object chứ không phải undefined. Mọi lần đọc key động trong file này phải qua đây.
+function hasOwn$1(record, key) {
+    return Object.prototype.hasOwnProperty.call(record, key);
+}
+const PLACEHOLDER_NAME = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+// ---------------------------------------------------------------------------
+// Traversal
+// ---------------------------------------------------------------------------
+/** Flattens a node tree into addressable fields. See `SdApiContractSchemaField` for the convention. */
+function listSdApiContractSchemaFields(node, options) {
+    const flatten = (options?.arrays ?? 'flatten') === 'flatten';
+    const base = options?.basePath ? options.basePath.split('.') : [];
+    const fields = [];
+    const descendsInto = (candidate) => {
+        if (candidate.type === 'object')
+            return true;
+        if (candidate.type !== 'array' || !flatten)
+            return false;
+        const items = candidate.items;
+        return !!items && (items.type === 'object' || items.type === 'array');
+    };
+    const walk = (current, segments, arrayItem) => {
+        if (current.type === 'object') {
+            const properties = current.properties;
+            if (!properties)
+                return;
+            for (const key of Object.keys(properties)) {
+                const child = properties[key];
+                if (!child)
+                    continue;
+                const childSegments = [...segments, key];
+                fields.push({
+                    path: childSegments.join('.'),
+                    segments: childSegments,
+                    type: child.type,
+                    required: child.required,
+                    label: child.label,
+                    description: child.description,
+                    leaf: !descendsInto(child),
+                    arrayItem,
+                });
+                walk(child, childSegments, arrayItem);
+            }
+            return;
+        }
+        if (current.type === 'array' && flatten && current.items) {
+            walk(current.items, segments, true);
+        }
+    };
+    walk(node, base, false);
+    return fields;
+}
+/** Every `${res.…}` path the output layer may address, in a stable order. */
+function listSdApiContractResponseFields(response) {
+    const fields = [
+        { path: 'status', segments: ['status'], type: 'number', required: true, leaf: true, arrayItem: false },
+    ];
+    const headers = response.headers;
+    if (headers) {
+        for (const key of Object.keys(headers)) {
+            const node = headers[key];
+            if (!node)
+                continue;
+            fields.push({
+                path: `headers.${key}`,
+                segments: ['headers', key],
+                type: node.type,
+                required: node.required,
+                label: node.label,
+                description: node.description,
+                leaf: true,
+                arrayItem: false,
+            });
+        }
+    }
+    const body = response.body;
+    if (body) {
+        fields.push({
+            path: 'body',
+            segments: ['body'],
+            type: body.type,
+            required: body.required,
+            label: body.label,
+            description: body.description,
+            leaf: body.type !== 'object',
+            arrayItem: false,
+        });
+        fields.push(...listSdApiContractSchemaFields(body, { arrays: 'stop', basePath: 'body' }));
+    }
+    return fields;
+}
+/**
+ * Resolves a *logical* reference path (`customer.id`) against a schema.
+ *
+ * Arrays are terminal: `${res.body.items}` addresses the whole array, `${res.body.items.id}` does
+ * not exist because there is no element to address. Per-item projection is out of scope.
+ */
+function resolveSdApiContractSchemaPath(root, path) {
+    let current = root;
+    for (const segment of path) {
+        if (!current || current.type !== 'object')
+            return null;
+        const properties = current.properties;
+        if (!properties || !hasOwn$1(properties, segment))
+            return null;
+        current = properties[segment];
+    }
+    return current ?? null;
+}
+/** Resolves `status` / `headers.<name>` / `body.<path>` against a response declaration. */
+function resolveSdApiContractResponsePath(response, path) {
+    if (path.length === 0)
+        return null;
+    const [section, ...rest] = path;
+    if (section === 'status') {
+        return rest.length === 0 ? { type: 'number', required: true, node: null } : null;
+    }
+    if (section === 'headers') {
+        const headers = response.headers;
+        if (rest.length !== 1 || !headers || !hasOwn$1(headers, rest[0]))
+            return null;
+        return describe(headers[rest[0]]);
+    }
+    if (section === 'body') {
+        const body = response.body;
+        if (!body)
+            return null;
+        const node = resolveSdApiContractSchemaPath(body, rest);
+        return node ? describe(node) : null;
+    }
+    return null;
+}
+function describe(node) {
+    return { type: node.type, required: node.required, label: node.label, description: node.description, node };
+}
+// ---------------------------------------------------------------------------
+// Immutable structural editing
+// ---------------------------------------------------------------------------
+/** Reads the node a structural pointer addresses, or `null` when the pointer does not resolve. */
+function getSdApiContractNodeAt(root, pointer) {
+    let current = root;
+    for (let index = 0; index < pointer.length; index += 1) {
+        if (!current)
+            return null;
+        const segment = pointer[index];
+        if (segment === 'properties') {
+            const key = pointer[index + 1];
+            const properties = current.properties;
+            if (key === undefined || !properties || !hasOwn$1(properties, key))
+                return null;
+            current = properties[key];
+            index += 1;
+        }
+        else if (segment === 'items') {
+            current = current.items;
+        }
+        else {
+            return null;
+        }
+    }
+    return current ?? null;
+}
+/** Replaces the node a pointer addresses, rebuilding only the spine. Never mutates `root`. */
+function setSdApiContractNodeAt(root, pointer, node) {
+    return replaceAt(root, pointer, 0, node);
+}
+function replaceAt(current, pointer, index, next) {
+    if (index >= pointer.length)
+        return next;
+    const segment = pointer[index];
+    if (segment === 'properties') {
+        const key = pointer[index + 1];
+        const properties = current.properties;
+        // why: pointer trỏ vào chỗ không tồn tại thì trả nguyên object cũ — im lặng bỏ qua an toàn hơn
+        // là dựng ra nhánh rỗng mà người dùng không hề khai báo.
+        if (key === undefined || !properties || !hasOwn$1(properties, key))
+            return current;
+        return { ...current, properties: { ...properties, [key]: replaceAt(properties[key], pointer, index + 2, next) } };
+    }
+    if (segment === 'items') {
+        if (!current.items)
+            return current;
+        return { ...current, items: replaceAt(current.items, pointer, index + 1, next) };
+    }
+    return current;
+}
+/** Appends a property. A key that already exists is left untouched — the caller must dedupe first. */
+function addSdApiContractProperty(node, key, child) {
+    const properties = node.properties ?? {};
+    if (!key || hasOwn$1(properties, key))
+        return asObjectShape(node, properties);
+    return { ...node, type: 'object', properties: { ...properties, [key]: child } };
+}
+/** Renames a property **in place in the key order**, so the JSON diff stays readable. */
+function renameSdApiContractProperty(node, from, to) {
+    const properties = node.properties;
+    if (!properties || !hasOwn$1(properties, from) || !to || from === to || hasOwn$1(properties, to)) {
+        return node;
+    }
+    const next = {};
+    for (const key of Object.keys(properties))
+        next[key === from ? to : key] = properties[key];
+    return { ...node, type: 'object', properties: next };
+}
+function removeSdApiContractProperty(node, key) {
+    const properties = node.properties;
+    if (!properties || !hasOwn$1(properties, key))
+        return node;
+    const next = {};
+    for (const existing of Object.keys(properties)) {
+        if (existing !== key)
+            next[existing] = properties[existing];
+    }
+    return { ...node, type: 'object', properties: next };
+}
+function asObjectShape(node, properties) {
+    return node.type === 'object' && node.properties ? node : { ...node, type: 'object', properties };
+}
+/** A minimal well-formed node of the given type. */
+function createSdApiContractNode(type) {
+    if (type === 'object')
+        return { type: 'object', properties: {} };
+    if (type === 'array')
+        return { type: 'array', items: { type: 'string' } };
+    return { type };
+}
+/**
+ * Retypes a node, dropping the members the new type cannot carry.
+ *
+ * Returns the same reference when the type is unchanged, so an idempotent UI write never produces a
+ * spurious `modelChange`.
+ */
+function changeSdApiContractNodeType(node, type) {
+    if (node.type === type)
+        return node;
+    const next = { type };
+    if (node.required !== undefined)
+        next.required = node.required;
+    if (node.label !== undefined)
+        next.label = node.label;
+    if (node.description !== undefined)
+        next.description = node.description;
+    if (node.source !== undefined)
+        next.source = node.source;
+    if (node.value !== undefined)
+        next.value = node.value;
+    if (node.transform !== undefined && sdIsApiContractTemporalDataType(type))
+        next.transform = node.transform;
+    if (type === 'object')
+        next.properties = {};
+    if (type === 'array')
+        next.items = { type: 'string' };
+    return next;
+}
+/** Deep copy of a node subtree. Used when a response subtree is adopted as the output schema. */
+function cloneSdApiContractNode(node) {
+    return deepClone(node);
+}
+/**
+ * Deep copy of a whole contract.
+ *
+ * The builder clones on the way in so the object a parent owns is never reachable from an edit, and
+ * a consumer can do the same before handing a contract to anything that might mutate it.
+ */
+function cloneSdApiContract(contract) {
+    return deepClone(contract);
+}
+/** Deep copy of any JSON-shaped value. Own enumerable keys only, so nothing inherited leaks in. */
+function deepClone(value) {
+    if (Array.isArray(value))
+        return value.map(item => deepClone(item));
+    if (value && typeof value === 'object') {
+        const source = value;
+        const out = {};
+        for (const key of Object.keys(source))
+            out[key] = deepClone(source[key]);
+        return out;
+    }
+    return value;
+}
+// ---------------------------------------------------------------------------
+// Record helpers (`req.path` / `req.query` / `req.headers` / `res.headers`)
+// ---------------------------------------------------------------------------
+function sdApiContractRecordSet(record, key, value) {
+    return { ...(record ?? {}), [key]: value };
+}
+function sdApiContractRecordRemove(record, key) {
+    if (!hasOwn$1(record, key))
+        return record;
+    const next = {};
+    for (const existing of Object.keys(record)) {
+        if (existing !== key)
+            next[existing] = record[existing];
+    }
+    return next;
+}
+/** Renames a key in place. A collision or an empty target is a no-op — the caller reports it. */
+function sdApiContractRecordRename(record, from, to) {
+    if (!hasOwn$1(record, from) || !to || from === to || hasOwn$1(record, to))
+        return record;
+    const next = {};
+    for (const key of Object.keys(record))
+        next[key === from ? to : key] = record[key];
+    return next;
+}
+// ---------------------------------------------------------------------------
+// Formatting
+// ---------------------------------------------------------------------------
+/** Builds the canonical expression text — the inverse of `parseSdApiContractTemplate`. */
+function formatSdApiContractExpression(root, path) {
+    return `\${${[root, ...path].join('.')}}`;
+}
+/** Joins a diagnostic base path with a structural pointer, e.g. `req.body` + `properties.x`. */
+function formatSdApiContractPointer(base, pointer) {
+    return pointer.length === 0 ? base : `${base}.${pointer.join('.')}`;
+}
+/**
+ * Reads REST placeholders out of a URL template.
+ *
+ * `${…}` interpolation is masked out first, so `${env.baseUrl}` is never mistaken for a `{…}`
+ * path placeholder.
+ */
+function parseSdApiContractUrlPlaceholders(url) {
+    if (typeof url !== 'string')
+        return { names: [], duplicates: [], malformed: [] };
+    const masked = url.replace(/\$\{[^}]*\}/g, match => ' '.repeat(match.length));
+    const names = [];
+    const seen = new Set();
+    const duplicates = [];
+    const malformed = [];
+    let cursor = 0;
+    while (cursor < masked.length) {
+        const open = masked.indexOf('{', cursor);
+        if (open < 0)
+            break;
+        const close = masked.indexOf('}', open + 1);
+        if (close < 0) {
+            malformed.push(url.slice(open));
+            break;
+        }
+        const inner = masked.slice(open + 1, close);
+        if (!PLACEHOLDER_NAME.test(inner)) {
+            malformed.push(url.slice(open, close + 1));
+        }
+        else if (seen.has(inner)) {
+            if (!duplicates.includes(inner))
+                duplicates.push(inner);
+        }
+        else {
+            seen.add(inner);
+            names.push(inner);
+        }
+        cursor = close + 1;
+    }
+    return { names, duplicates, malformed };
+}
+
+/**
+ * Deterministic JSON for an API contract.
+ *
+ * Three guarantees the persisted file depends on:
+ *
+ * 1. **System keys are ordered**, so two authors editing the same contract produce the same bytes
+ *    and a `git diff` shows the semantic change instead of a reshuffle.
+ * 2. **User-declared keys keep their order** (`properties`, `query`, `headers`, …) — that order is
+ *    authored information, and sorting it would churn every diff.
+ * 3. **Only contract vocabulary survives.** The builder's transient UI state (expansion, selection,
+ *    internal ids) is dropped by construction: the serializer copies a fixed key whitelist rather
+ *    than the object it was handed, so a new piece of UI state can never leak into the file.
+ *
+ * `undefined` members are omitted; declared `false`, `0`, `null` and `""` are kept.
+ */
+function serializeSdApiContract(contract) {
+    return JSON.stringify(normalizeContract(contract), null, 2);
+}
+function isRecord$1(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function put(target, key, value) {
+    if (value !== undefined)
+        target[key] = value;
+}
+function normalizeContract(contract) {
+    if (!isRecord$1(contract))
+        return null;
+    const out = {};
+    put(out, 'contractVersion', contract['contractVersion']);
+    put(out, 'code', contract['code']);
+    put(out, 'name', contract['name']);
+    put(out, 'description', contract['description']);
+    put(out, 'input', normalizeSchemaHolder(contract['input']));
+    put(out, 'req', normalizeRequest(contract['req']));
+    put(out, 'res', normalizeResponse(contract['res']));
+    put(out, 'output', normalizeSchemaHolder(contract['output']));
+    return out;
+}
+function normalizeSchemaHolder(holder) {
+    if (!isRecord$1(holder))
+        return undefined;
+    const out = {};
+    put(out, 'schema', normalizeNode(holder['schema']));
+    return out;
+}
+function normalizeRequest(request) {
+    if (!isRecord$1(request))
+        return undefined;
+    const out = {};
+    put(out, 'method', request['method']);
+    put(out, 'url', request['url']);
+    put(out, 'path', normalizeNodeRecord(request['path']));
+    put(out, 'query', normalizeNodeRecord(request['query']));
+    put(out, 'headers', normalizeNodeRecord(request['headers']));
+    put(out, 'body', normalizeNode(request['body']));
+    return out;
+}
+function normalizeResponse(response) {
+    if (!isRecord$1(response))
+        return undefined;
+    const out = {};
+    put(out, 'status', Array.isArray(response['status']) ? [...response['status']] : response['status']);
+    put(out, 'headers', normalizeNodeRecord(response['headers']));
+    put(out, 'body', normalizeNode(response['body']));
+    return out;
+}
+function normalizeNode(node) {
+    if (!isRecord$1(node))
+        return undefined;
+    const out = {};
+    put(out, 'type', node['type']);
+    put(out, 'required', node['required']);
+    put(out, 'label', node['label']);
+    put(out, 'description', node['description']);
+    put(out, 'transform', node['transform']);
+    put(out, 'source', node['source']);
+    put(out, 'value', normalizeJsonValue(node['value']));
+    put(out, 'properties', normalizeNodeRecord(node['properties']));
+    put(out, 'items', normalizeNode(node['items']));
+    return out;
+}
+function normalizeNodeRecord(record) {
+    if (!isRecord$1(record))
+        return undefined;
+    const out = {};
+    for (const key of Object.keys(record)) {
+        const node = normalizeNode(record[key]);
+        if (node !== undefined)
+            out[key] = node;
+    }
+    return out;
+}
+// why: static literal là dữ liệu tự do của người dùng — copy nguyên hình dạng (giữ null, 0, '',
+// thứ tự key) thay vì lọc theo whitelist như node.
+function normalizeJsonValue(value) {
+    if (Array.isArray(value))
+        return value.map(item => normalizeJsonValue(item));
+    if (isRecord$1(value)) {
+        const out = {};
+        for (const key of Object.keys(value)) {
+            const normalized = normalizeJsonValue(value[key]);
+            if (normalized !== undefined)
+                out[key] = normalized;
+        }
+        return out;
+    }
+    return value;
+}
+
+/**
+ * Validates a contract against the grammar, the schema rules, the REST rules and the injected env
+ * catalog.
+ *
+ * Pure and UI-free: it takes `unknown` because an externally supplied contract may be malformed,
+ * and it **never repairs anything** — a silent fix would hide the very mistake the author needs to
+ * see. Diagnostics come back in a fixed traversal order (metadata → `input` → `req` → `res` →
+ * `output`, declaration order within each), so the same contract always yields the same list.
+ */
+function validateSdApiContract(contract, configuration) {
+    const diagnostics = [];
+    if (!isRecord(contract)) {
+        return [{ code: 'contract.invalid', severity: 'error', path: '', message: 'A contract must be an object.' }];
+    }
+    const env = resolveSdApiContractConfiguration(configuration).env;
+    const inputSchema = readSchema(contract['input']);
+    const response = isRecord(contract['res']) ? contract['res'] : null;
+    const push = (code, severity, path, message) => {
+        diagnostics.push({ code, severity, path, message });
+    };
+    // -------------------------------------------------------------------------
+    // Reference resolution
+    // -------------------------------------------------------------------------
+    const resolveReference = (reference) => {
+        if (reference.root === 'env') {
+            const key = reference.path[0];
+            if (!key || !hasOwn(env, key))
+                return null;
+            const variable = env[key];
+            return { type: variable.type, required: true, label: variable.label, description: variable.description, node: null };
+        }
+        if (reference.root === 'input') {
+            if (!inputSchema)
+                return null;
+            const node = resolveSdApiContractSchemaPath(inputSchema, reference.path);
+            return node ? { type: node.type, required: node.required, label: node.label, description: node.description, node } : null;
+        }
+        if (!response)
+            return null;
+        return resolveSdApiContractResponsePath(response, reference.path);
+    };
+    /** Checks roots and existence for every reference. Returns `false` when a root was rejected. */
+    const checkReferences = (references, path, context) => {
+        const allowed = SD_API_CONTRACT_ALLOWED_ROOTS[context];
+        let rootsOk = true;
+        for (const reference of references) {
+            if (!allowed.includes(reference.root)) {
+                rootsOk = false;
+                push('mapping.root.forbidden', 'error', path, `"${reference.raw}" is not readable here — this position accepts ${allowed.map(root => `\${${root}.…}`).join(', ')}.`);
+                continue;
+            }
+            if (resolveReference(reference))
+                continue;
+            if (reference.root === 'env') {
+                push('mapping.env.unknown', 'error', path, `Environment variable "${reference.path.join('.')}" is not declared in the injected configuration.`);
+            }
+            else {
+                push('mapping.reference.missing', 'error', path, `"${reference.raw}" does not resolve to a declared field.`);
+            }
+        }
+        return rootsOk;
+    };
+    // -------------------------------------------------------------------------
+    // Node structure — shared by every layer
+    // -------------------------------------------------------------------------
+    const validateStructure = (node, path, allowTransform, requireContainerMembers) => {
+        const type = node['type'];
+        if (!sdIsApiContractDataType(type)) {
+            push('schema.type.invalid', 'error', path, `"${String(type)}" is not a supported data type.`);
+            return false;
+        }
+        if (type === 'object' && requireContainerMembers && !isRecord(node['properties'])) {
+            push('schema.object.properties.missing', 'error', path, 'An object node must declare "properties".');
+        }
+        if (type === 'array' && !isRecord(node['items'])) {
+            push('schema.array.items.missing', 'error', path, 'An array node must declare "items".');
+        }
+        if (sdIsApiContractScalarDataType(type)) {
+            if (node['properties'] !== undefined)
+                push('schema.scalar.properties.forbidden', 'error', path, `A "${type}" node cannot declare "properties".`);
+            if (node['items'] !== undefined)
+                push('schema.scalar.items.forbidden', 'error', path, `A "${type}" node cannot declare "items".`);
+        }
+        const required = node['required'];
+        if (required !== undefined && typeof required !== 'boolean') {
+            push('schema.required.invalid', 'error', path, '"required" must be true, false, or omitted.');
+        }
+        const transform = node['transform'];
+        if (transform !== undefined) {
+            if (!allowTransform || !sdIsApiContractTemporalDataType(type)) {
+                push('schema.transform.invalid', 'error', path, '"transform" is only valid on a date or datetime node in input.schema / output.schema.');
+            }
+            else if (!sdIsTemporalValueTransform(transform)) {
+                push('schema.transform.unknown', 'error', path, `"${String(transform)}" is not a known temporal transform.`);
+            }
+        }
+        return true;
+    };
+    const checkDuplicateKeysIgnoringCase = (record, basePath) => {
+        const seen = new Map();
+        for (const key of Object.keys(record)) {
+            const normalized = key.trim().toLowerCase();
+            if (!normalized)
+                continue;
+            const previous = seen.get(normalized);
+            if (previous !== undefined) {
+                push('schema.property.key.duplicate', 'error', `${basePath}.${key}`, `"${key}" collides with "${previous}" — header names are case-insensitive.`);
+            }
+            else {
+                seen.set(normalized, key);
+            }
+        }
+    };
+    // -------------------------------------------------------------------------
+    // Declaration layers — `input.schema`, `res.headers`, `res.body`
+    // -------------------------------------------------------------------------
+    const validateDeclaration = (node, path, allowTransform) => {
+        if (!isRecord(node))
+            return;
+        if (!validateStructure(node, path, allowTransform, true))
+            return;
+        if (node['source'] !== undefined || node['value'] !== undefined) {
+            push('schema.mapping.forbidden', 'error', path, 'A declaration cannot carry "source" or "value" — nothing maps into it.');
+        }
+        const type = node['type'];
+        const properties = node['properties'];
+        if (type === 'object' && isRecord(properties)) {
+            for (const key of Object.keys(properties)) {
+                const childPath = `${path}.properties.${key}`;
+                if (!key.trim())
+                    push('schema.property.key.empty', 'error', childPath, 'A property name cannot be empty.');
+                validateDeclaration(properties[key], childPath, allowTransform);
+            }
+        }
+        if (type === 'array' && isRecord(node['items'])) {
+            validateDeclaration(node['items'], `${path}.items`, allowTransform);
+        }
+    };
+    // -------------------------------------------------------------------------
+    // Mapped layers — `req.*`, `output.schema`
+    // -------------------------------------------------------------------------
+    const validateStaticValue = (value, type, path) => {
+        if (value === null)
+            return;
+        const ok = type === 'string' || type === 'date' || type === 'datetime'
+            ? typeof value === 'string'
+            : type === 'number'
+                ? typeof value === 'number' && Number.isFinite(value)
+                : type === 'boolean'
+                    ? typeof value === 'boolean'
+                    : type === 'object'
+                        ? isRecord(value)
+                        : Array.isArray(value);
+        if (!ok)
+            push('mapping.value.type-mismatch', 'error', path, `The static value does not fit the declared type "${type}".`);
+    };
+    const validateSource = (node, type, path, context) => {
+        const source = node['source'];
+        if (typeof source !== 'string') {
+            push('mapping.template.invalid', 'error', path, '"source" must be a string template.');
+            return;
+        }
+        const template = parseSdApiContractTemplate(source);
+        if (!template.valid) {
+            push('mapping.template.invalid', 'error', path, template.errors[0].message);
+            return;
+        }
+        if (!checkReferences(template.references, path, context))
+            return;
+        if (template.kind === 'exact') {
+            const resolved = resolveReference(template.references[0]);
+            if (!resolved)
+                return;
+            if (!isTypeCompatible(resolved.type, type)) {
+                push('mapping.type.mismatch', 'error', path, `"${source}" resolves to "${resolved.type}", which cannot fill a "${type}" node.`);
+            }
+            if (context === 'output' && node['required'] === true && resolved.required !== true) {
+                push('mapping.required.optional-source', 'warning', path, `A required output field is fed by "${source}", which is not declared required.`);
+            }
+            return;
+        }
+        // why: literal + interpolated đều cho ra string. `req.url` không đi qua đây nên vẫn nội suy tự do.
+        if (type !== 'string') {
+            push('mapping.interpolation.forbidden', 'error', path, `String interpolation can only fill a "string" node, not "${type}".`);
+        }
+    };
+    const validateMapped = (node, path, context, covered, allowTransform) => {
+        if (!isRecord(node))
+            return;
+        const hasSource = node['source'] !== undefined;
+        const hasValue = node['value'] !== undefined;
+        const wholeNodeMapped = hasSource || hasValue;
+        if (!validateStructure(node, path, allowTransform, !wholeNodeMapped))
+            return;
+        const type = node['type'];
+        if (hasSource && hasValue) {
+            push('mapping.source-and-value', 'error', path, '"source" and "value" are mutually exclusive.');
+        }
+        const properties = node['properties'];
+        const childCount = type === 'object' && isRecord(properties) ? Object.keys(properties).length : 0;
+        if (wholeNodeMapped && childCount > 0) {
+            push('mapping.object.conflict', 'error', path, 'An object mapped as a whole cannot also map its properties.');
+        }
+        if (hasSource)
+            validateSource(node, type, path, context);
+        else if (hasValue)
+            validateStaticValue(node['value'], type, path);
+        else if (!covered && (type !== 'object' || childCount === 0)) {
+            push('mapping.node.unmapped', 'warning', path, 'This node receives no value — declare a "source" or a static "value".');
+        }
+        const childCovered = covered || wholeNodeMapped;
+        if (type === 'object' && isRecord(properties)) {
+            for (const key of Object.keys(properties)) {
+                const childPath = `${path}.properties.${key}`;
+                if (!key.trim())
+                    push('schema.property.key.empty', 'error', childPath, 'A property name cannot be empty.');
+                validateMapped(properties[key], childPath, context, childCovered, allowTransform);
+            }
+        }
+        if (type === 'array' && isRecord(node['items'])) {
+            validateMapped(node['items'], `${path}.items`, context, childCovered, allowTransform);
+        }
+    };
+    // -------------------------------------------------------------------------
+    // 1. Contract metadata
+    // -------------------------------------------------------------------------
+    if (contract['contractVersion'] !== SD_API_CONTRACT_VERSION) {
+        push('contract.version.invalid', 'error', 'contractVersion', `"contractVersion" must be ${SD_API_CONTRACT_VERSION}.`);
+    }
+    if (!isFilledString(contract['code']))
+        push('contract.code.empty', 'error', 'code', 'A contract needs a non-empty "code".');
+    if (!isFilledString(contract['name']))
+        push('contract.name.empty', 'error', 'name', 'A contract needs a non-empty "name".');
+    // -------------------------------------------------------------------------
+    // 2. input.schema
+    // -------------------------------------------------------------------------
+    if (!inputSchema)
+        push('schema.missing', 'error', 'input.schema', '"input.schema" is missing.');
+    else
+        validateDeclaration(inputSchema, 'input.schema', true);
+    // -------------------------------------------------------------------------
+    // 3. req
+    // -------------------------------------------------------------------------
+    const request = isRecord(contract['req']) ? contract['req'] : null;
+    if (!request) {
+        push('req.method.invalid', 'error', 'req.method', 'The request is missing.');
+        push('req.url.empty', 'error', 'req.url', 'The request is missing.');
+    }
+    else {
+        const method = request['method'];
+        if (!sdIsApiContractHttpMethod(method)) {
+            push('req.method.invalid', 'error', 'req.method', `"${String(method)}" is not a supported HTTP method.`);
+        }
+        const url = request['url'];
+        const placeholders = isFilledString(url) ? parseSdApiContractUrlPlaceholders(url) : { names: [], duplicates: [], malformed: [] };
+        if (!isFilledString(url)) {
+            push('req.url.empty', 'error', 'req.url', 'A request needs a non-empty "url".');
+        }
+        else {
+            const template = parseSdApiContractTemplate(url);
+            if (!template.valid)
+                push('req.url.template.invalid', 'error', 'req.url', template.errors[0].message);
+            else
+                checkReferences(template.references, 'req.url', 'request');
+            for (const fragment of placeholders.malformed) {
+                push('req.url.placeholder.malformed', 'error', 'req.url', `"${fragment}" is not a valid path placeholder.`);
+            }
+            for (const name of placeholders.duplicates) {
+                push('req.url.placeholder.duplicate', 'error', 'req.url', `Path placeholder "{${name}}" appears more than once.`);
+            }
+        }
+        const pathRecord = isRecord(request['path']) ? request['path'] : null;
+        const declaredPathKeys = pathRecord ? Object.keys(pathRecord) : [];
+        for (const name of placeholders.names) {
+            if (!declaredPathKeys.includes(name)) {
+                push('req.path.missing', 'error', `req.path.${name}`, `The url declares "{${name}}" but "req.path" has no entry for it.`);
+            }
+        }
+        for (const key of declaredPathKeys) {
+            if (!placeholders.names.includes(key)) {
+                push('req.path.unused', 'error', `req.path.${key}`, `"req.path.${key}" has no matching "{${key}}" in the url.`);
+            }
+        }
+        if (pathRecord) {
+            for (const key of declaredPathKeys) {
+                const entryPath = `req.path.${key}`;
+                const entry = pathRecord[key];
+                if (!key.trim())
+                    push('schema.property.key.empty', 'error', entryPath, 'A path parameter name cannot be empty.');
+                if (isRecord(entry)) {
+                    if (entry['required'] !== true) {
+                        push('req.path.required', 'error', entryPath, 'A path parameter is part of the url and must be declared "required": true.');
+                    }
+                    if (entry['type'] !== undefined && !sdIsApiContractScalarDataType(entry['type'])) {
+                        push('req.path.type.invalid', 'error', entryPath, 'A path parameter must be a scalar.');
+                    }
+                }
+                validateMapped(entry, entryPath, 'request', false, false);
+            }
+        }
+        const queryRecord = isRecord(request['query']) ? request['query'] : null;
+        if (queryRecord) {
+            for (const key of Object.keys(queryRecord)) {
+                const entryPath = `req.query.${key}`;
+                const entry = queryRecord[key];
+                if (!key.trim())
+                    push('schema.property.key.empty', 'error', entryPath, 'A query parameter name cannot be empty.');
+                if (isRecord(entry) && entry['type'] !== undefined && !sdIsApiContractScalarDataType(entry['type']) && entry['type'] !== 'array') {
+                    push('req.query.type.invalid', 'error', entryPath, 'A query parameter must be a scalar or an array of scalars.');
+                }
+                validateMapped(entry, entryPath, 'request', false, false);
+            }
+        }
+        const headerRecord = isRecord(request['headers']) ? request['headers'] : null;
+        if (headerRecord) {
+            checkDuplicateKeysIgnoringCase(headerRecord, 'req.headers');
+            for (const key of Object.keys(headerRecord)) {
+                const entryPath = `req.headers.${key}`;
+                const entry = headerRecord[key];
+                if (!key.trim())
+                    push('req.header.name.empty', 'error', entryPath, 'A header name cannot be empty.');
+                if (isRecord(entry) && entry['type'] !== undefined && !sdIsApiContractScalarDataType(entry['type'])) {
+                    push('req.header.type.invalid', 'error', entryPath, 'A header must be a scalar.');
+                }
+                validateMapped(entry, entryPath, 'request', false, false);
+            }
+        }
+        if (request['body'] !== undefined) {
+            if (method === 'GET' || method === 'HEAD') {
+                push('req.body.unexpected', 'warning', 'req.body', `A ${method} request with a body is ignored by many clients and proxies.`);
+            }
+            validateMapped(request['body'], 'req.body', 'request', false, false);
+        }
+    }
+    // -------------------------------------------------------------------------
+    // 4. res
+    // -------------------------------------------------------------------------
+    if (!response) {
+        push('res.status.invalid', 'error', 'res.status', 'The response declaration is missing.');
+    }
+    else {
+        const rawStatus = response['status'];
+        const statuses = Array.isArray(rawStatus) ? rawStatus : [rawStatus];
+        if (Array.isArray(rawStatus) && rawStatus.length === 0) {
+            push('res.status.empty', 'error', 'res.status', 'Declare at least one success status.');
+        }
+        const seenStatus = new Set();
+        for (const status of statuses) {
+            if (typeof status !== 'number' || !Number.isInteger(status) || status < 100 || status > 599) {
+                push('res.status.invalid', 'error', 'res.status', `"${String(status)}" is not an HTTP status code between 100 and 599.`);
+            }
+            else if (seenStatus.has(status)) {
+                push('res.status.duplicate', 'error', 'res.status', `Status ${status} is declared more than once.`);
+            }
+            else {
+                seenStatus.add(status);
+            }
+        }
+        const responseHeaders = isRecord(response['headers']) ? response['headers'] : null;
+        if (responseHeaders) {
+            checkDuplicateKeysIgnoringCase(responseHeaders, 'res.headers');
+            for (const key of Object.keys(responseHeaders)) {
+                const entryPath = `res.headers.${key}`;
+                if (!key.trim())
+                    push('req.header.name.empty', 'error', entryPath, 'A header name cannot be empty.');
+                validateDeclaration(responseHeaders[key], entryPath, false);
+            }
+        }
+        if (response['body'] !== undefined) {
+            if (seenStatus.has(204)) {
+                push('res.body.unexpected', 'warning', 'res.body', 'HTTP 204 means "no content" — a declared body will never arrive.');
+            }
+            validateDeclaration(response['body'], 'res.body', false);
+        }
+    }
+    // -------------------------------------------------------------------------
+    // 5. output.schema
+    // -------------------------------------------------------------------------
+    const outputSchema = readSchema(contract['output']);
+    if (!outputSchema)
+        push('schema.missing', 'error', 'output.schema', '"output.schema" is missing.');
+    else
+        validateMapped(outputSchema, 'output.schema', 'output', false, true);
+    return diagnostics;
+}
+/** `true` when a source of `sourceType` may fill a target of `targetType`. */
+function isTypeCompatible(sourceType, targetType) {
+    if (sourceType === targetType)
+        return true;
+    // why: date/datetime là kiểu LOGIC, trên dây luôn là string — nên string ↔ temporal đi được cả hai
+    // chiều. Mọi cặp khác phải khớp chính xác, vì exact expression giữ nguyên type của nguồn.
+    const sourceTemporalish = sdIsApiContractTemporalDataType(sourceType) || sourceType === 'string';
+    const targetTemporalish = sdIsApiContractTemporalDataType(targetType) || targetType === 'string';
+    return sourceTemporalish && targetTemporalish;
+}
+function readSchema(holder) {
+    if (!isRecord(holder) || !isRecord(holder['schema']))
+        return null;
+    return holder['schema'];
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isFilledString(value) {
+    return typeof value === 'string' && value.trim().length > 0;
+}
+function hasOwn(record, key) {
+    return Object.prototype.hasOwnProperty.call(record, key);
+}
+
+/**
+ * Reference contracts, shared by the docs, the showcase and the test-suite so the canonical example
+ * can never drift between them.
+ *
+ * Each is a **factory**, not a constant: the builder takes a two-way `[(model)]`, and handing two
+ * demos the same object would let one seed the other.
+ */
+/** The env catalog the samples reference. Definitions only — no secret ever has a value here. */
+const SD_API_CONTRACT_SAMPLE_ENVIRONMENT = {
+    env: {
+        baseUrl: { type: 'string', label: 'Backend base URL' },
+        token: { type: 'string', label: 'Access token', sensitive: true },
+        userId: { type: 'string', label: 'Current user ID' },
+    },
+};
+/** `GET` list endpoint whose output is a root array — the dropdown / table shape. */
+function sdApiContractSearchSample() {
+    return {
+        contractVersion: 1,
+        code: 'product.search',
+        name: 'Search products',
+        description: 'Search active products for dropdown or table',
+        input: {
+            schema: {
+                type: 'object',
+                properties: {
+                    keyword: { type: 'string', required: false },
+                    page: { type: 'number' },
+                    createdFrom: { type: 'datetime', transform: 'ISOString' },
+                },
+            },
+        },
+        req: {
+            method: 'GET',
+            url: '${env.baseUrl}/products',
+            query: {
+                keyword: { type: 'string', source: '${input.keyword}' },
+                page: { type: 'number', source: '${input.page}' },
+                createdFrom: { type: 'datetime', source: '${input.createdFrom}' },
+            },
+            headers: {
+                Authorization: { type: 'string', source: 'Bearer ${env.token}' },
+                'x-user-id': { type: 'string', source: '${env.userId}' },
+            },
+        },
+        res: {
+            status: 200,
+            headers: { 'x-request-id': { type: 'string', required: false } },
+            body: {
+                type: 'object',
+                properties: {
+                    items: {
+                        type: 'array',
+                        required: true,
+                        items: {
+                            type: 'object',
+                            properties: {
+                                id: { type: 'string', required: true },
+                                name: { type: 'string', required: true },
+                                createdAt: { type: 'datetime' },
+                            },
+                        },
+                    },
+                    total: { type: 'number', required: true },
+                },
+            },
+        },
+        output: {
+            schema: {
+                type: 'array',
+                source: '${res.body.items}',
+                items: {
+                    type: 'object',
+                    properties: {
+                        id: { type: 'string', required: true },
+                        name: { type: 'string', required: true },
+                        createdAt: { type: 'datetime' },
+                    },
+                },
+            },
+        },
+    };
+}
+/**
+ * `POST` endpoint showing every mapping flavour at once:
+ * `input.a → req.body.x`, `input.b → req.body.y`, `input.c → req.body.z`,
+ * `env.userId → req.body.u`, and a static literal in `req.body.v`.
+ */
+function sdApiContractCreateSample() {
+    return {
+        contractVersion: 1,
+        code: 'order.create',
+        name: 'Create order',
+        description: 'Maps a frontend payload onto the backend order body',
+        input: {
+            schema: {
+                type: 'object',
+                properties: {
+                    a: { type: 'string', required: true, label: 'Order code' },
+                    b: { type: 'number', label: 'Quantity' },
+                    c: { type: 'array', items: { type: 'string' }, label: 'Tags' },
+                },
+            },
+        },
+        req: {
+            method: 'POST',
+            url: '${env.baseUrl}/orders',
+            headers: { Authorization: { type: 'string', source: 'Bearer ${env.token}' } },
+            body: {
+                type: 'object',
+                properties: {
+                    x: { type: 'string', required: true, source: '${input.a}' },
+                    y: { type: 'number', source: '${input.b}' },
+                    z: { type: 'array', source: '${input.c}', items: { type: 'string' } },
+                    u: { type: 'string', source: '${env.userId}' },
+                    v: { type: 'string', value: 'STATIC VALUE' },
+                },
+            },
+        },
+        res: {
+            status: [200, 201],
+            body: {
+                type: 'object',
+                properties: {
+                    id: { type: 'string', required: true },
+                    createdAt: { type: 'datetime' },
+                },
+            },
+        },
+        output: {
+            schema: {
+                type: 'object',
+                properties: {
+                    id: { type: 'string', required: true, source: '${res.body.id}' },
+                    createdAt: { type: 'datetime', source: '${res.body.createdAt}' },
+                },
+            },
+        },
+    };
+}
+/**
+ * Deliberately broken contract used to demonstrate the diagnostics: an undeclared env variable, a
+ * `{id}` placeholder with no `req.path` entry, a `${input.page}` that does not exist, and an output
+ * source pointing at a scalar while the output declares an array.
+ */
+function sdApiContractInvalidSample() {
+    return {
+        contractVersion: 1,
+        code: 'product.broken',
+        name: 'Broken product search',
+        description: 'Every diagnostic class in one contract',
+        input: {
+            schema: {
+                type: 'object',
+                properties: { keyword: { type: 'string' } },
+            },
+        },
+        req: {
+            method: 'GET',
+            url: '${env.baseUrl}/products/{id}',
+            query: { page: { type: 'number', source: '${input.page}' } },
+            headers: { Authorization: { type: 'string', source: 'Bearer ${env.unknown}' } },
+        },
+        res: {
+            status: 200,
+            body: {
+                type: 'object',
+                properties: {
+                    items: { type: 'array', required: true, items: { type: 'object', properties: { id: { type: 'string' } } } },
+                    total: { type: 'number' },
+                },
+            },
+        },
+        output: {
+            schema: {
+                type: 'array',
+                source: '${res.body.total}',
+                items: { type: 'object', properties: { id: { type: 'string' } } },
+            },
+        },
+    };
+}
+
+/**
+ * Validation summary + the diagnostic list.
+ *
+ * Severity is never signalled by colour alone: every row carries an icon, the severity word, the
+ * stable `code` and the structural `path`, so the list stays readable for a colour-blind reader and
+ * usable from a screen reader.
+ */
+class SdApiContractDiagnosticList {
+    diagnostics = input([]);
+    autoId = input();
+    navigate = output();
+    errorCount = computed(() => this.diagnostics().filter(diagnostic => diagnostic.severity === 'error').length);
+    warningCount = computed(() => this.diagnostics().filter(diagnostic => diagnostic.severity === 'warning').length);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractDiagnosticList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdApiContractDiagnosticList, isStandalone: true, selector: "sd-api-contract-diagnostic-list", inputs: { diagnostics: { classPropertyName: "diagnostics", publicName: "diagnostics", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: `
+    @let _diagnostics = diagnostics();
+    @let _errors = errorCount();
+    @let _warnings = warningCount();
+    @let _autoId = autoId();
+
+    <div class="sd-acb-diagnostics" [attr.data-autoId]="_autoId">
+      <div class="sd-acb-diagnostics__summary" role="status">
+        @if (!_diagnostics.length) {
+          <span class="sd-acb-diagnostics__badge" data-severity="ok">
+            <sd-icon name="check_circle" size="sm"></sd-icon>
+            <span>{{ 'core.component.api-contract-builder.review.valid' | sdTranslate }}</span>
+          </span>
+        } @else {
+          <span class="sd-acb-diagnostics__badge" data-severity="error">
+            <sd-icon name="error" size="sm"></sd-icon>
+            <span>{{ 'core.component.api-contract-builder.review.errors' | sdTranslate: { count: _errors } }}</span>
+          </span>
+          <span class="sd-acb-diagnostics__badge" data-severity="warning">
+            <sd-icon name="warning" size="sm"></sd-icon>
+            <span>{{ 'core.component.api-contract-builder.review.warnings' | sdTranslate: { count: _warnings } }}</span>
+          </span>
+        }
+      </div>
+
+      @if (_diagnostics.length) {
+        <ul class="sd-acb-diagnostics__list">
+          @for (diagnostic of _diagnostics; track diagnostic.code + '|' + diagnostic.path + '|' + $index) {
+            <li class="sd-acb-diagnostics__item" [attr.data-severity]="diagnostic.severity" [attr.data-code]="diagnostic.code">
+              <button
+                type="button"
+                class="sd-acb-diagnostics__nav"
+                [attr.data-autoId]="_autoId ? _autoId + '-goto-' + $index : null"
+                (click)="navigate.emit(diagnostic)">
+                <sd-icon [name]="diagnostic.severity === 'error' ? 'error' : 'warning'" size="sm"></sd-icon>
+                <span class="sd-acb-diagnostics__path">{{ diagnostic.path || '(contract)' }}</span>
+                <span class="sd-acb-diagnostics__message">{{ diagnostic.message }}</span>
+                <span class="sd-acb-diagnostics__code">{{ diagnostic.code }}</span>
+              </button>
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.sd-acb-diagnostics__summary{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}.sd-acb-diagnostics__badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;&[data-severity=ok]{color:var(--sd-success, #1c6c3a)}&[data-severity=error]{color:var(--sd-error, #b3261e)}&[data-severity=warning]{color:var(--sd-warning, #8a5a00)}}.sd-acb-diagnostics__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sd-acb-diagnostics__nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:6px;padding:6px 8px;cursor:pointer;font:inherit;font-size:12px;&:hover,&:focus-visible{border-color:var(--sd-border-color, #e6e6e6);background:var(--sd-surface-muted, #f3f5f8)}}.sd-acb-diagnostics__item[data-severity=error] .sd-acb-diagnostics__nav{color:var(--sd-error, #b3261e)}.sd-acb-diagnostics__item[data-severity=warning] .sd-acb-diagnostics__nav{color:var(--sd-warning, #8a5a00)}.sd-acb-diagnostics__path{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-weight:600}.sd-acb-diagnostics__message{color:var(--sd-text, #1f2937)}.sd-acb-diagnostics__code{margin-left:auto;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;color:var(--sd-text-secondary, #6b6b6b)}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractDiagnosticList, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-api-contract-diagnostic-list', standalone: true, imports: [SdIcon, SdTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @let _diagnostics = diagnostics();
+    @let _errors = errorCount();
+    @let _warnings = warningCount();
+    @let _autoId = autoId();
+
+    <div class="sd-acb-diagnostics" [attr.data-autoId]="_autoId">
+      <div class="sd-acb-diagnostics__summary" role="status">
+        @if (!_diagnostics.length) {
+          <span class="sd-acb-diagnostics__badge" data-severity="ok">
+            <sd-icon name="check_circle" size="sm"></sd-icon>
+            <span>{{ 'core.component.api-contract-builder.review.valid' | sdTranslate }}</span>
+          </span>
+        } @else {
+          <span class="sd-acb-diagnostics__badge" data-severity="error">
+            <sd-icon name="error" size="sm"></sd-icon>
+            <span>{{ 'core.component.api-contract-builder.review.errors' | sdTranslate: { count: _errors } }}</span>
+          </span>
+          <span class="sd-acb-diagnostics__badge" data-severity="warning">
+            <sd-icon name="warning" size="sm"></sd-icon>
+            <span>{{ 'core.component.api-contract-builder.review.warnings' | sdTranslate: { count: _warnings } }}</span>
+          </span>
+        }
+      </div>
+
+      @if (_diagnostics.length) {
+        <ul class="sd-acb-diagnostics__list">
+          @for (diagnostic of _diagnostics; track diagnostic.code + '|' + diagnostic.path + '|' + $index) {
+            <li class="sd-acb-diagnostics__item" [attr.data-severity]="diagnostic.severity" [attr.data-code]="diagnostic.code">
+              <button
+                type="button"
+                class="sd-acb-diagnostics__nav"
+                [attr.data-autoId]="_autoId ? _autoId + '-goto-' + $index : null"
+                (click)="navigate.emit(diagnostic)">
+                <sd-icon [name]="diagnostic.severity === 'error' ? 'error' : 'warning'" size="sm"></sd-icon>
+                <span class="sd-acb-diagnostics__path">{{ diagnostic.path || '(contract)' }}</span>
+                <span class="sd-acb-diagnostics__message">{{ diagnostic.message }}</span>
+                <span class="sd-acb-diagnostics__code">{{ diagnostic.code }}</span>
+              </button>
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  `, styles: [":host{display:block}.sd-acb-diagnostics__summary{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}.sd-acb-diagnostics__badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;&[data-severity=ok]{color:var(--sd-success, #1c6c3a)}&[data-severity=error]{color:var(--sd-error, #b3261e)}&[data-severity=warning]{color:var(--sd-warning, #8a5a00)}}.sd-acb-diagnostics__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sd-acb-diagnostics__nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:6px;padding:6px 8px;cursor:pointer;font:inherit;font-size:12px;&:hover,&:focus-visible{border-color:var(--sd-border-color, #e6e6e6);background:var(--sd-surface-muted, #f3f5f8)}}.sd-acb-diagnostics__item[data-severity=error] .sd-acb-diagnostics__nav{color:var(--sd-error, #b3261e)}.sd-acb-diagnostics__item[data-severity=warning] .sd-acb-diagnostics__nav{color:var(--sd-warning, #8a5a00)}.sd-acb-diagnostics__path{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-weight:600}.sd-acb-diagnostics__message{color:var(--sd-text, #1f2937)}.sd-acb-diagnostics__code{margin-left:auto;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;color:var(--sd-text-secondary, #6b6b6b)}\n"] }]
+        }] });
+
+/**
+ * One collapsed, read-only row for a node in a layer list.
+ *
+ * The whole point is that it holds NO editable control. Editing a node happens in the drawer, so the
+ * list can stay a thing you scan rather than a wall of inputs — and so a node never has two editors
+ * writing it at once.
+ *
+ * The row shows what an author needs to spot a mistake without opening anything: the name, the
+ * declared type, whether it is required, and where its value comes from.
+ */
+class SdApiContractNodeSummary {
+    #i18n = inject(I18nService);
+    name = input.required();
+    node = input.required();
+    /** `view` mode and `disabled` both land here: the row becomes text, with no action at all. */
+    readonly = input(false, { transform: booleanAttribute });
+    autoId = input();
+    edit = output();
+    remove = output();
+    requiredLabel = this.#i18n.t('core.component.api-contract-builder.field.required');
+    removeLabel = this.#i18n.t('core.component.api-contract-builder.node.remove');
+    unmapped = computed(() => {
+        const node = this.node();
+        if (node.source !== undefined || node.value !== undefined)
+            return false;
+        return !(node.type === 'object' && node.properties);
+    });
+    /**
+     * One line describing where the value comes from.
+     *
+     * why bốn dạng khác nhau: `${input.keyword}` rút về `input.keyword` vì dấu `${}` là cú pháp chứ
+     * không phải thông tin; còn template ghép giữ NGUYÊN VĂN vì rút gọn nó sẽ sai. Literal hiện giá trị
+     * để thấy ngay, object hiện số trường để biết còn bao nhiêu phải mở ra xem.
+     */
+    mappingSummary = computed(() => {
+        const node = this.node();
+        if (typeof node.source === 'string' && node.source !== '') {
+            const parsed = parseSdApiContractTemplate(node.source);
+            const reference = parsed.kind === 'exact' ? parsed.references[0] : undefined;
+            return `← ${reference ? reference.expression : node.source}`;
+        }
+        if (node.value !== undefined)
+            return `= ${formatLiteral(node.value)}`;
+        if (node.type === 'object' && node.properties) {
+            return this.#i18n.t('core.component.api-contract-builder.summary.field-count', {
+                count: Object.keys(node.properties).length,
+            });
+        }
+        return this.#i18n.t('core.component.api-contract-builder.summary.unmapped');
+    });
+    requestEdit() {
+        if (this.readonly())
+            return;
+        this.edit.emit();
+    }
+    /**
+     * why stopPropagation: nút xoá nằm TRONG hàng có `(click)`, nên không chặn thì bấm xoá cũng mở
+     * drawer — người dùng bấm xoá lại thấy form hiện ra.
+     */
+    requestRemove(event) {
+        event.stopPropagation();
+        if (this.readonly())
+            return;
+        this.remove.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractNodeSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdApiContractNodeSummary, isStandalone: true, selector: "sd-api-contract-node-summary", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", remove: "remove" }, ngImport: i0, template: `
+    @let _autoId = autoId();
+    @let _readonly = readonly();
+
+    <div
+      class="sd-acb-row"
+      [class.sd-acb-row--readonly]="_readonly"
+      [attr.role]="_readonly ? null : 'button'"
+      [attr.tabindex]="_readonly ? null : 0"
+      [attr.data-autoid]="_autoId || null"
+      (click)="requestEdit()"
+      (keydown.enter)="requestEdit()"
+      (keydown.space)="requestEdit()">
+      <span class="sd-acb-row__name">{{ name() }}</span>
+      <span class="sd-acb-row__type">{{ node().type }}</span>
+
+      @if (node().required === true) {
+        <span class="sd-acb-row__required">{{ requiredLabel }}</span>
+      }
+
+      <span class="sd-acb-row__mapping" [class.sd-acb-row__mapping--unmapped]="unmapped()">{{ mappingSummary() }}</span>
+
+      @if (!_readonly) {
+        <button
+          type="button"
+          class="sd-acb-row__remove"
+          [attr.data-autoid]="_autoId ? _autoId + '-remove' : null"
+          [attr.aria-label]="removeLabel"
+          [title]="removeLabel"
+          (click)="requestRemove($event)">
+          <sd-icon name="delete" size="sm"></sd-icon>
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}.sd-acb-row{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--sd-border-color, #e6e6e6);border-radius:6px;background:var(--sd-surface, #fff);font-size:13px;cursor:pointer}.sd-acb-row:hover{border-color:var(--sd-primary, #005cbb)}.sd-acb-row--readonly{cursor:default}.sd-acb-row--readonly:hover{border-color:var(--sd-border-color, #e6e6e6)}.sd-acb-row__name{min-width:0;font-weight:600;overflow-wrap:anywhere}.sd-acb-row__type{padding:1px 6px;border-radius:4px;background:var(--sd-surface-muted, #f3f5f8);color:var(--sd-text-secondary, #6b6b6b);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px}.sd-acb-row__required{padding:1px 6px;border-radius:4px;background:color-mix(in srgb,var(--sd-primary, #005cbb) 12%,transparent);color:var(--sd-primary, #005cbb);font-size:11px}.sd-acb-row__mapping{min-width:0;margin-left:auto;overflow:hidden;color:var(--sd-text-secondary, #6b6b6b);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.sd-acb-row__mapping--unmapped{color:var(--sd-warning, #8a5a00);font-style:italic}.sd-acb-row__remove{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-error, #b3261e);cursor:pointer}.sd-acb-row__remove:hover{background:color-mix(in srgb,var(--sd-error, #b3261e) 12%,transparent)}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractNodeSummary, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-api-contract-node-summary', standalone: true, imports: [SdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @let _autoId = autoId();
+    @let _readonly = readonly();
+
+    <div
+      class="sd-acb-row"
+      [class.sd-acb-row--readonly]="_readonly"
+      [attr.role]="_readonly ? null : 'button'"
+      [attr.tabindex]="_readonly ? null : 0"
+      [attr.data-autoid]="_autoId || null"
+      (click)="requestEdit()"
+      (keydown.enter)="requestEdit()"
+      (keydown.space)="requestEdit()">
+      <span class="sd-acb-row__name">{{ name() }}</span>
+      <span class="sd-acb-row__type">{{ node().type }}</span>
+
+      @if (node().required === true) {
+        <span class="sd-acb-row__required">{{ requiredLabel }}</span>
+      }
+
+      <span class="sd-acb-row__mapping" [class.sd-acb-row__mapping--unmapped]="unmapped()">{{ mappingSummary() }}</span>
+
+      @if (!_readonly) {
+        <button
+          type="button"
+          class="sd-acb-row__remove"
+          [attr.data-autoid]="_autoId ? _autoId + '-remove' : null"
+          [attr.aria-label]="removeLabel"
+          [title]="removeLabel"
+          (click)="requestRemove($event)">
+          <sd-icon name="delete" size="sm"></sd-icon>
+        </button>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%}.sd-acb-row{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--sd-border-color, #e6e6e6);border-radius:6px;background:var(--sd-surface, #fff);font-size:13px;cursor:pointer}.sd-acb-row:hover{border-color:var(--sd-primary, #005cbb)}.sd-acb-row--readonly{cursor:default}.sd-acb-row--readonly:hover{border-color:var(--sd-border-color, #e6e6e6)}.sd-acb-row__name{min-width:0;font-weight:600;overflow-wrap:anywhere}.sd-acb-row__type{padding:1px 6px;border-radius:4px;background:var(--sd-surface-muted, #f3f5f8);color:var(--sd-text-secondary, #6b6b6b);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px}.sd-acb-row__required{padding:1px 6px;border-radius:4px;background:color-mix(in srgb,var(--sd-primary, #005cbb) 12%,transparent);color:var(--sd-primary, #005cbb);font-size:11px}.sd-acb-row__mapping{min-width:0;margin-left:auto;overflow:hidden;color:var(--sd-text-secondary, #6b6b6b);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.sd-acb-row__mapping--unmapped{color:var(--sd-warning, #8a5a00);font-style:italic}.sd-acb-row__remove{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-error, #b3261e);cursor:pointer}.sd-acb-row__remove:hover{background:color-mix(in srgb,var(--sd-error, #b3261e) 12%,transparent)}\n"] }]
+        }] });
+/** Renders a literal short enough for one row: strings quoted, composites collapsed. */
+function formatLiteral(value) {
+    if (typeof value === 'string')
+        return JSON.stringify(value);
+    if (value === null || typeof value !== 'object')
+        return String(value);
+    if (Array.isArray(value))
+        return `[${value.length}]`;
+    return `{${Object.keys(value).length}}`;
+}
+
+/**
+ * Value editor for one mapped node: a mode picker plus one control chosen by the mode.
+ *
+ * `source` shows a single dropdown of the references the surrounding schemas and the injected env
+ * catalog make available — the author never types `${…}` for the common case. `advanced` keeps a raw
+ * expression field for what a dropdown cannot express (`Bearer ${env.token}`). `static` renders a
+ * control matching the declared type, including a JSON editor for `object` / `array` literals.
+ *
+ * The JSON editor for a composite literal only writes when the text parses. While it is half-typed it
+ * emits the raw string, and that string is dropped — otherwise one keystroke would turn a literal
+ * object into a garbage string in the contract.
+ */
+class SdApiContractSourceEditor {
+    #i18n = inject(I18nService);
+    node = input.required();
+    suggestions = input([]);
+    disabled = input(false, { transform: booleanAttribute });
+    autoId = input();
+    nodeChange = output();
+    advancedPlaceholder = 'Bearer ${env.token}';
+    // why: dựng MỘT lần trong field initializer. `[items]` nhận mảng mới mỗi CD sẽ kích
+    // `toObservable(items)` của sd-select → markForCheck → CD mới → treo trình duyệt (bug OOM
+    // đã gặp ở query-builder). Ngôn ngữ chỉ đổi kèm reload trang nên dựng một lần là đủ.
+    booleanOptions = [
+        { value: 'true', label: this.#i18n.t('core.component.api-contract-builder.boolean.true') },
+        { value: 'false', label: this.#i18n.t('core.component.api-contract-builder.boolean.false') },
+    ];
+    #sourceMode = {
+        value: 'source',
+        label: this.#i18n.t('core.component.api-contract-builder.mapping.mode.source'),
+    };
+    #advancedMode = {
+        value: 'advanced',
+        label: this.#i18n.t('core.component.api-contract-builder.mapping.mode.advanced'),
+    };
+    #scalarModes = [
+        this.#sourceMode,
+        { value: 'static', label: this.#i18n.t('core.component.api-contract-builder.mapping.mode.static') },
+        this.#advancedMode,
+    ];
+    #objectModes = [
+        this.#sourceMode,
+        { value: 'static', label: this.#i18n.t('core.component.api-contract-builder.mapping.mode.static') },
+        this.#advancedMode,
+        { value: 'nested', label: this.#i18n.t('core.component.api-contract-builder.mapping.mode.nested') },
+    ];
+    #arrayModes = [
+        this.#sourceMode,
+        { value: 'static', label: this.#i18n.t('core.component.api-contract-builder.mapping.mode.static') },
+        this.#advancedMode,
+    ];
+    // why: mode là state của GIAO DIỆN, không nằm trong contract — nó được suy lại từ node mỗi khi cha
+    // đẩy giá trị mới. `linkedSignal` (không phải `computed`) vì có đúng một trường hợp phải GHI ĐÈ
+    // suy diễn: người dùng đang ở `advanced` và gõ tới lúc chuỗi tình cờ còn đúng một reference sạch.
+    // Nếu để suy diễn thắng, ô text đang gõ sẽ biến thành dropdown giữa lúc gõ.
+    mode = linkedSignal({
+        source: () => this.node(),
+        computation: (node, previous) => {
+            const derived = deriveMode(node);
+            if (previous?.value === 'advanced' && derived === 'source')
+                return 'advanced';
+            return derived;
+        },
+    });
+    /**
+     * Giá trị hiển thị của picker.
+     *
+     * why: `none` không còn là một option, nên bind nó vào `[model]` sẽ ra một ô trống mà người dùng
+     * không hiểu tại sao. Trả `null` để picker rỗng THẬT — cộng `required`, một node chưa gán trở thành
+     * lỗi thấy được ngay trên hàng, khớp với diagnostic `mapping.node.unmapped` mà validation đã báo.
+     */
+    modeValue = computed(() => {
+        const mode = this.mode();
+        return mode === 'none' ? null : mode;
+    });
+    modeOptions = computed(() => {
+        const type = this.node().type;
+        if (type === 'object')
+            return this.#objectModes;
+        if (type === 'array')
+            return this.#arrayModes;
+        return this.#scalarModes;
+    });
+    suggestionOptions = computed(() => {
+        const type = this.node().type;
+        const all = [...this.suggestions()];
+        // why: lọc mềm — ưu tiên gợi ý hợp type, nhưng trả toàn bộ khi không cái nào khớp, để template
+        // string (`Bearer ${env.token}`) và các cặp type tương thích không bị giấu mất.
+        const compatible = all.filter(suggestion => isAssignable(suggestion.type, type));
+        return compatible.length > 0 ? compatible : all;
+    });
+    /**
+     * Options for the source dropdown.
+     *
+     * why: một `source` đang lưu có thể trỏ vào trường đã bị xoá hoặc đổi tên — nó KHÔNG còn trong
+     * danh sách gợi ý. `sd-select` không tìm thấy value sẽ hiện ô rỗng, và giá trị vẫn nằm trong
+     * contract mà người dùng không thấy để sửa. Thêm một option dựng từ chính giá trị đó để nó luôn
+     * hiển thị; validation lo phần báo `mapping.reference.missing`.
+     */
+    sourceOptions = computed(() => {
+        const options = this.suggestionOptions();
+        const current = this.node().source;
+        if (typeof current !== 'string' || current === '')
+            return options;
+        if (options.some(option => option.expression === current))
+            return options;
+        const parsed = parseSdApiContractTemplate(current);
+        if (parsed.kind !== 'exact')
+            return options;
+        const reference = parsed.references[0];
+        return [
+            ...options,
+            {
+                expression: current,
+                path: reference?.expression ?? current,
+                root: reference?.root ?? 'input',
+                type: this.node().type,
+                display: reference?.expression ?? current,
+            },
+        ];
+    });
+    staticText = computed(() => {
+        const value = this.node().value;
+        return value === undefined || value === null ? '' : String(value);
+    });
+    staticNumber = computed(() => {
+        const value = this.node().value;
+        return typeof value === 'number' ? value : null;
+    });
+    setMode(mode) {
+        const node = this.node();
+        // why: đặt mode TRƯỚC khi emit. Node quay lại từ cha sẽ kích `linkedSignal` tính lại, và nó đọc
+        // `previous.value` — nếu chưa đặt, carve-out `advanced` sẽ giữ lại mode cũ và chặn việc rời khỏi
+        // `advanced` sang `source`.
+        if (mode === 'source' || mode === 'advanced') {
+            this.mode.set(mode);
+            // Rời `advanced` sang `source` thì template ghép không còn diễn đạt được bằng dropdown — xoá để
+            // dropdown bắt đầu sạch. Ngược lại, đã có key `source` thì đổi mode không đụng tới model.
+            const abandonsTemplate = mode === 'source' && parseSdApiContractTemplate(node.source).kind === 'interpolated';
+            if (node.source === undefined || abandonsTemplate) {
+                this.nodeChange.emit({ ...withoutMapping(node), source: '' });
+            }
+            return;
+        }
+        if (mode === 'static') {
+            this.mode.set('static');
+            this.nodeChange.emit({ ...withoutMapping(node), value: defaultStatic(node.type) });
+            return;
+        }
+        this.mode.set(node.type === 'object' ? 'nested' : 'none');
+        this.nodeChange.emit(withoutMapping(node));
+    }
+    setSource(value) {
+        this.nodeChange.emit({ ...withoutMapping(this.node()), source: typeof value === 'string' ? value : '' });
+    }
+    setStaticScalar(value) {
+        const node = this.node();
+        this.nodeChange.emit({ ...withoutMapping(node), value: value === null || value === undefined ? '' : String(value) });
+    }
+    setStaticNumber(value) {
+        const node = this.node();
+        const parsed = typeof value === 'number' ? value : Number(value === null || value === undefined ? '' : String(value).trim());
+        this.nodeChange.emit({ ...withoutMapping(node), value: Number.isFinite(parsed) ? parsed : 0 });
+    }
+    /**
+     * Stores a `date` / `datetime` literal.
+     *
+     * why: `<sd-date>` / `<sd-datetime>` có thể bắn ra một `Date`. `String(new Date())` ra
+     * `Mon Aug 17 2026 …` — không parse lại được và đổi theo locale của máy tác giả, nên contract sẽ
+     * mang một giá trị không portable. Chuẩn hoá về ISO.
+     */
+    setStaticTemporal(value) {
+        const node = this.node();
+        if (value instanceof Date) {
+            const iso = Number.isNaN(value.getTime()) ? '' : value.toISOString();
+            this.nodeChange.emit({ ...withoutMapping(node), value: iso });
+            return;
+        }
+        this.nodeChange.emit({ ...withoutMapping(node), value: value === null || value === undefined ? '' : String(value) });
+    }
+    /**
+     * Stores an `object` / `array` literal from the JSON editor.
+     *
+     * why: `<sd-code-editor language="json">` bắn ra STRING khi cú pháp còn dở (`{"a":`). Ghi chuỗi đó
+     * vào contract sẽ biến một literal object thành rác, nên bỏ qua và giữ giá trị hợp lệ cuối cùng —
+     * người dùng vẫn thấy nguyên văn mình đang gõ trong editor.
+     */
+    setStaticJson(value) {
+        if (value === null || typeof value !== 'object')
+            return;
+        this.nodeChange.emit({ ...withoutMapping(this.node()), value: value });
+    }
+    setStaticBoolean(value) {
+        this.nodeChange.emit({ ...withoutMapping(this.node()), value: value === 'true' || value === true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractSourceEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdApiContractSourceEditor, isStandalone: true, selector: "sd-api-contract-source-editor", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeChange: "nodeChange" }, ngImport: i0, template: `
+    @let _node = node();
+    @let _disabled = disabled();
+    @let _mode = mode();
+    @let _autoId = autoId();
+    @let _suggestions = sourceOptions();
+
+    <div class="sd-acb-source">
+      <sd-select
+        class="sd-acb-source__mode"
+        size="sm"
+        hideInlineError
+        [clearable]="false"
+        [autoId]="_autoId ? _autoId + '-mode' : undefined"
+        [label]="'core.component.api-contract-builder.mapping.mode' | sdTranslate"
+        [items]="modeOptions()"
+        valueField="value"
+        displayField="label"
+        [required]="true"
+        [model]="modeValue()"
+        [disabled]="_disabled"
+        (sdChange)="setMode($event)"></sd-select>
+
+      @if (_mode === 'source') {
+        <sd-select
+          class="sd-acb-source__expression"
+          size="sm"
+          hideInlineError
+          [clearable]="false"
+          [autoId]="_autoId ? _autoId + '-source' : undefined"
+          [label]="'core.component.api-contract-builder.mapping.source' | sdTranslate"
+          [items]="_suggestions"
+          valueField="expression"
+          displayField="display"
+          [model]="_node.source ?? ''"
+          [disabled]="_disabled"
+          (sdChange)="setSource($event)"></sd-select>
+      } @else if (_mode === 'advanced') {
+        <sd-input
+          class="sd-acb-source__expression"
+          size="sm"
+          hideInlineError
+          [autoId]="_autoId ? _autoId + '-advanced' : undefined"
+          [label]="'core.component.api-contract-builder.mapping.source' | sdTranslate"
+          [placeholder]="advancedPlaceholder"
+          [model]="_node.source ?? ''"
+          [disabled]="_disabled"
+          (sdChange)="setSource($event)"></sd-input>
+      } @else if (_mode === 'static') {
+        @let _staticAutoId = _autoId ? _autoId + '-static' : undefined;
+        @let _staticLabel = 'core.component.api-contract-builder.mapping.value' | sdTranslate;
+
+        @switch (_node.type) {
+          @case ('boolean') {
+            <sd-select
+              class="sd-acb-source__static"
+              size="sm"
+              hideInlineError
+              [clearable]="false"
+              [autoId]="_staticAutoId"
+              [label]="_staticLabel"
+              [items]="booleanOptions"
+              valueField="value"
+              displayField="label"
+              [model]="_node.value === true ? 'true' : 'false'"
+              [disabled]="_disabled"
+              (sdChange)="setStaticBoolean($event)"></sd-select>
+          }
+          @case ('number') {
+            <sd-input-number
+              class="sd-acb-source__static"
+              size="sm"
+              hideInlineError
+              [autoId]="_staticAutoId"
+              [label]="_staticLabel"
+              [model]="staticNumber()"
+              [disabled]="_disabled"
+              (sdChange)="setStaticNumber($event)"></sd-input-number>
+          }
+          @case ('date') {
+            <sd-date
+              class="sd-acb-source__static"
+              size="sm"
+              hideInlineError
+              [autoId]="_staticAutoId"
+              [label]="_staticLabel"
+              [model]="staticText()"
+              [disabled]="_disabled"
+              (sdChange)="setStaticTemporal($event)"></sd-date>
+          }
+          @case ('datetime') {
+            <sd-datetime
+              class="sd-acb-source__static"
+              size="sm"
+              hideInlineError
+              [autoId]="_staticAutoId"
+              [label]="_staticLabel"
+              [model]="staticText()"
+              [disabled]="_disabled"
+              (sdChange)="setStaticTemporal($event)"></sd-datetime>
+          }
+          @case ('object') {
+            <sd-code-editor
+              class="sd-acb-source__static sd-acb-source__static--json"
+              language="json"
+              maxHeight="220px"
+              [model]="_node.value"
+              [viewed]="_disabled"
+              (modelChange)="setStaticJson($event)"></sd-code-editor>
+          }
+          @case ('array') {
+            <sd-code-editor
+              class="sd-acb-source__static sd-acb-source__static--json"
+              language="json"
+              maxHeight="220px"
+              [model]="_node.value"
+              [viewed]="_disabled"
+              (modelChange)="setStaticJson($event)"></sd-code-editor>
+          }
+          @default {
+            <sd-input
+              class="sd-acb-source__static"
+              size="sm"
+              hideInlineError
+              [autoId]="_staticAutoId"
+              [label]="_staticLabel"
+              [model]="staticText()"
+              [disabled]="_disabled"
+              (sdChange)="setStaticScalar($event)"></sd-input>
+          }
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}.sd-acb-source{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.sd-acb-source__mode{flex:0 0 200px;min-width:180px}.sd-acb-source__expression,.sd-acb-source__static{flex:1 1 260px;min-width:220px}.sd-acb-source__static--json{flex:1 1 100%;min-width:0}\n"], dependencies: [{ kind: "component", type: SdCodeEditor, selector: "sd-code-editor", inputs: ["model", "language", "maxHeight", "viewed"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "transform", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "transform", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "showSelectAll", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractSourceEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-api-contract-source-editor', standalone: true, imports: [SdCodeEditor, SdDate, SdDatetime, SdInput, SdInputNumber, SdSelect, SdTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @let _node = node();
+    @let _disabled = disabled();
+    @let _mode = mode();
+    @let _autoId = autoId();
+    @let _suggestions = sourceOptions();
+
+    <div class="sd-acb-source">
+      <sd-select
+        class="sd-acb-source__mode"
+        size="sm"
+        hideInlineError
+        [clearable]="false"
+        [autoId]="_autoId ? _autoId + '-mode' : undefined"
+        [label]="'core.component.api-contract-builder.mapping.mode' | sdTranslate"
+        [items]="modeOptions()"
+        valueField="value"
+        displayField="label"
+        [required]="true"
+        [model]="modeValue()"
+        [disabled]="_disabled"
+        (sdChange)="setMode($event)"></sd-select>
+
+      @if (_mode === 'source') {
+        <sd-select
+          class="sd-acb-source__expression"
+          size="sm"
+          hideInlineError
+          [clearable]="false"
+          [autoId]="_autoId ? _autoId + '-source' : undefined"
+          [label]="'core.component.api-contract-builder.mapping.source' | sdTranslate"
+          [items]="_suggestions"
+          valueField="expression"
+          displayField="display"
+          [model]="_node.source ?? ''"
+          [disabled]="_disabled"
+          (sdChange)="setSource($event)"></sd-select>
+      } @else if (_mode === 'advanced') {
+        <sd-input
+          class="sd-acb-source__expression"
+          size="sm"
+          hideInlineError
+          [autoId]="_autoId ? _autoId + '-advanced' : undefined"
+          [label]="'core.component.api-contract-builder.mapping.source' | sdTranslate"
+          [placeholder]="advancedPlaceholder"
+          [model]="_node.source ?? ''"
+          [disabled]="_disabled"
+          (sdChange)="setSource($event)"></sd-input>
+      } @else if (_mode === 'static') {
+        @let _staticAutoId = _autoId ? _autoId + '-static' : undefined;
+        @let _staticLabel = 'core.component.api-contract-builder.mapping.value' | sdTranslate;
+
+        @switch (_node.type) {
+          @case ('boolean') {
+            <sd-select
+              class="sd-acb-source__static"
+              size="sm"
+              hideInlineError
+              [clearable]="false"
+              [autoId]="_staticAutoId"
+              [label]="_staticLabel"
+              [items]="booleanOptions"
+              valueField="value"
+              displayField="label"
+              [model]="_node.value === true ? 'true' : 'false'"
+              [disabled]="_disabled"
+              (sdChange)="setStaticBoolean($event)"></sd-select>
+          }
+          @case ('number') {
+            <sd-input-number
+              class="sd-acb-source__static"
+              size="sm"
+              hideInlineError
+              [autoId]="_staticAutoId"
+              [label]="_staticLabel"
+              [model]="staticNumber()"
+              [disabled]="_disabled"
+              (sdChange)="setStaticNumber($event)"></sd-input-number>
+          }
+          @case ('date') {
+            <sd-date
+              class="sd-acb-source__static"
+              size="sm"
+              hideInlineError
+              [autoId]="_staticAutoId"
+              [label]="_staticLabel"
+              [model]="staticText()"
+              [disabled]="_disabled"
+              (sdChange)="setStaticTemporal($event)"></sd-date>
+          }
+          @case ('datetime') {
+            <sd-datetime
+              class="sd-acb-source__static"
+              size="sm"
+              hideInlineError
+              [autoId]="_staticAutoId"
+              [label]="_staticLabel"
+              [model]="staticText()"
+              [disabled]="_disabled"
+              (sdChange)="setStaticTemporal($event)"></sd-datetime>
+          }
+          @case ('object') {
+            <sd-code-editor
+              class="sd-acb-source__static sd-acb-source__static--json"
+              language="json"
+              maxHeight="220px"
+              [model]="_node.value"
+              [viewed]="_disabled"
+              (modelChange)="setStaticJson($event)"></sd-code-editor>
+          }
+          @case ('array') {
+            <sd-code-editor
+              class="sd-acb-source__static sd-acb-source__static--json"
+              language="json"
+              maxHeight="220px"
+              [model]="_node.value"
+              [viewed]="_disabled"
+              (modelChange)="setStaticJson($event)"></sd-code-editor>
+          }
+          @default {
+            <sd-input
+              class="sd-acb-source__static"
+              size="sm"
+              hideInlineError
+              [autoId]="_staticAutoId"
+              [label]="_staticLabel"
+              [model]="staticText()"
+              [disabled]="_disabled"
+              (sdChange)="setStaticScalar($event)"></sd-input>
+          }
+        }
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%}.sd-acb-source{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.sd-acb-source__mode{flex:0 0 200px;min-width:180px}.sd-acb-source__expression,.sd-acb-source__static{flex:1 1 260px;min-width:220px}.sd-acb-source__static--json{flex:1 1 100%;min-width:0}\n"] }]
+        }] });
+/**
+ * Reads the mode out of the node alone — the contract never stores it.
+ *
+ * An EMPTY `source` means "Lấy từ nguồn đã chọn, chưa pick" and stays in `source`; anything the
+ * dropdown cannot express (a template with literal text, or text with no reference at all) is
+ * `advanced`. A clean single reference stays in `source` even when it resolves to nothing, so a typo
+ * is fixed in the friendly picker while validation reports `mapping.reference.missing`.
+ */
+function deriveMode(node) {
+    if (node.source !== undefined) {
+        if (node.source === '')
+            return 'source';
+        return parseSdApiContractTemplate(node.source).kind === 'exact' ? 'source' : 'advanced';
+    }
+    if (node.value !== undefined)
+        return 'static';
+    return node.type === 'object' ? 'nested' : 'none';
+}
+/** Rebuilds a node without `source` / `value`, so the key is gone rather than set to `undefined`. */
+function withoutMapping(node) {
+    const next = {};
+    for (const key of Object.keys(node)) {
+        if (key === 'source' || key === 'value')
+            continue;
+        next[key] = node[key];
+    }
+    return next;
+}
+function defaultStatic(type) {
+    if (type === 'number')
+        return 0;
+    if (type === 'boolean')
+        return false;
+    if (type === 'object')
+        return {};
+    if (type === 'array')
+        return [];
+    return '';
+}
+function isAssignable(sourceType, targetType) {
+    if (sourceType === targetType)
+        return true;
+    const temporalish = (type) => type === 'string' || type === 'date' || type === 'datetime';
+    return temporalish(sourceType) && temporalish(targetType);
+}
+
+/**
+ * Editing surface for exactly one node, staged and committed in one go.
+ *
+ * The layer lists outside are read-only, so this drawer is the only place a node changes. It holds a
+ * DEEP COPY of the node it was seeded from and emits `nodeCommit` once, when the author saves — that
+ * is what makes "Huỷ" able to actually cancel, and what keeps the tree from changing under the
+ * author's cursor on every keystroke.
+ *
+ * Save is blocked only for the two problems that stop a node from existing at all: no name, or a name
+ * a sibling already holds. Everything else — a reference to a field that does not exist yet, a type
+ * that will not fit — saves and is reported by `validateSdApiContract`, because inventing rules here
+ * would stop an author declaring one end of a mapping before the other exists.
+ */
+class SdApiContractNodeDrawer {
+    #i18n = inject(I18nService);
+    /** `mapping` shows the value editor; `schema` is a plain declaration with no mapping. */
+    layer = input('mapping');
+    allowTransform = input(false, { transform: booleanAttribute });
+    suggestions = input([]);
+    autoId = input();
+    nodeCommit = output();
+    // why không phải ES-private: Angular từ chối `viewChild` trên field `#` (diagnostic 1053).
+    drawerRef = viewChild.required('drawer');
+    // why: seed là mốc so sánh để biết draft có bẩn hay chưa. Không có nó thì "Huỷ" phải đoán, và mọi
+    // lần mở drawer đều bị coi là đã sửa.
+    #seedName = '';
+    #seedJson = '';
+    #draftName = signal('');
+    #draft = signal(null);
+    #rootSiblings = signal([]);
+    #editingName = signal(null);
+    #discardPrompt = signal(false);
+    // why pointer chứ không phải "node hiện tại": draft luôn là GỐC của subtree, và một lần Lưu commit
+    // cả gốc. Giữ node con rời ra sẽ phải ghép lại lúc Save, và ghép sai là mất nhánh.
+    #pointer = signal([]);
+    // why: tên đang gõ ở CẤP HIỆN TẠI, kể cả khi nó chưa áp được vào draft.
+    #typedName = signal('');
+    draftName = this.#draftName.asReadonly();
+    discardPrompt = this.#discardPrompt.asReadonly();
+    /** The node the author is looking at right now — the draft root, or a descendant of it. */
+    current = computed(() => {
+        const draft = this.#draft();
+        if (!draft)
+            return null;
+        return getSdApiContractNodeAt(draft, this.#pointer());
+    });
+    /** Every key on the breadcrumb. The pointer alternates `properties`/key, so keys sit on odd slots. */
+    breadcrumb = computed(() => {
+        const pointer = this.#pointer();
+        const keys = pointer.filter((_, index) => index % 2 === 1);
+        return [this.#draftName() || this.#i18n.t('core.component.api-contract-builder.drawer.add-title'), ...keys];
+    });
+    /**
+     * What the name field shows.
+     *
+     * why một signal riêng chứ không đọc thẳng từ draft: một tên KHÔNG áp được — rỗng, hoặc trùng
+     * sibling — vẫn phải hiện ra để người dùng thấy mình vừa gõ gì và đọc được lý do bị chặn. Đọc
+     * thẳng từ draft thì ô input nhảy về tên cũ ngay khi gõ, tức là từ chối im lặng.
+     */
+    currentName = this.#typedName.asReadonly();
+    children = computed(() => {
+        const node = this.current();
+        const properties = node?.properties;
+        if (!properties)
+            return [];
+        return Object.keys(properties).map(key => ({ key, node: properties[key] }));
+    });
+    /** Siblings on the level the author is on — the root list, or the parent object's keys. */
+    siblingNames = computed(() => {
+        const pointer = this.#pointer();
+        if (pointer.length === 0)
+            return this.#rootSiblings();
+        const draft = this.#draft();
+        if (!draft)
+            return [];
+        const parent = getSdApiContractNodeAt(draft, pointer.slice(0, -2));
+        return parent?.properties ? Object.keys(parent.properties) : [];
+    });
+    typeOptions = SD_API_CONTRACT_DATA_TYPES.map(type => ({
+        value: type,
+        label: type,
+    }));
+    requiredOptions = [
+        { value: 'true', label: this.#i18n.t('core.component.api-contract-builder.required.true') },
+        { value: 'false', label: this.#i18n.t('core.component.api-contract-builder.required.false') },
+    ];
+    transformOptions = [
+        { value: '', label: this.#i18n.t('core.component.api-contract-builder.transform.none') },
+        { value: 'ISOString', label: 'ISOString' },
+        { value: 'UTCString', label: 'UTCString' },
+    ];
+    title = computed(() => this.#editingName() === null
+        ? this.#i18n.t('core.component.api-contract-builder.drawer.add-title')
+        : this.#i18n.t('core.component.api-contract-builder.drawer.edit-title'));
+    dirty = computed(() => {
+        const draft = this.#draft();
+        if (!draft)
+            return false;
+        return this.#draftName() !== this.#seedName || JSON.stringify(draft) !== this.#seedJson;
+    });
+    nameError = computed(() => {
+        const name = this.currentName().trim();
+        if (name === '')
+            return this.#i18n.t('core.component.api-contract-builder.node.name-required');
+        // why: node đang sửa luôn nằm trong danh sách sibling của chính cấp nó — so với chính nó là tự báo
+        // trùng. "Chính nó" phải là key THẬT đang lưu, không phải chữ đang gõ: lấy chữ đang gõ thì gõ đúng
+        // tên một sibling khác cũng tự loại chính mình và lỗi trùng không bao giờ nổi lên.
+        const pointer = this.#pointer();
+        const self = pointer.length === 0 ? this.#editingName() : pointer[pointer.length - 1];
+        const taken = this.siblingNames().some(sibling => sibling === name && sibling !== self);
+        return taken ? this.#i18n.t('core.component.api-contract-builder.node.duplicate-key') : null;
+    });
+    // why chỉ xét lỗi ở GỐC: Lưu commit cả subtree, và tên đang gõ ở cấp sâu đã được `setName` áp vào
+    // draft ngay. Nếu chặn theo cấp hiện tại thì đứng ở cấp sâu sẽ không Lưu được gốc hợp lệ.
+    canSave = computed(() => {
+        if (this.#draft() === null)
+            return false;
+        if (this.#draftName().trim() === '')
+            return false;
+        return this.nameError() === null;
+    });
+    /**
+     * `beforeClose` guard for `<sd-side-drawer>`.
+     *
+     * why an arrow field, not a method: the drawer takes it as an input value, so it must keep `this`
+     * without the template having to bind it.
+     */
+    closeGuard = () => this.guardClose();
+    // -------------------------------------------------------------------------
+    // Public surface the owning builder drives
+    // -------------------------------------------------------------------------
+    openForAdd(siblingNames = [], type = 'string') {
+        this.#seed(null, createSdApiContractNode(type), siblingNames);
+        this.drawerRef().open();
+    }
+    openForEdit(name, node, siblingNames = []) {
+        this.#seed(name, cloneSdApiContractNode(node), siblingNames);
+        this.drawerRef().open();
+    }
+    // -------------------------------------------------------------------------
+    // Draft edits
+    // -------------------------------------------------------------------------
+    /**
+     * Types into the name field.
+     *
+     * The typed text is ALWAYS kept, then applied to the draft only when it can be. A name that cannot
+     * be applied — empty, or already taken by a sibling — stays visible and `nameError()` explains it,
+     * which is what blocks Save. Refusing the keystroke instead would leave the field showing one name
+     * while the contract holds another.
+     */
+    setName(value) {
+        const name = typeof value === 'string' ? value : '';
+        this.#typedName.set(name);
+        const pointer = this.#pointer();
+        if (pointer.length === 0) {
+            // why chỉ ghi khi hợp lệ: `#draftName` là thứ `save()` phát ra. Ghi tên rỗng vào đó rồi chặn ở
+            // `canSave` cũng được, nhưng giữ nó luôn hợp lệ thì `save()` không cần tin vào cổng chặn.
+            if (name.trim() !== '')
+                this.#draftName.set(name);
+            return;
+        }
+        const draft = this.#draft();
+        const from = pointer[pointer.length - 1];
+        if (!draft || name.trim() === '' || name === from)
+            return;
+        const parentPointer = pointer.slice(0, -2);
+        const parent = getSdApiContractNodeAt(draft, parentPointer);
+        if (!parent)
+            return;
+        const renamed = renameSdApiContractProperty(parent, from, name);
+        // why: helper trả về CHÍNH object cũ khi trùng key. Không áp được thì thôi — `#typedName` đã giữ
+        // chữ người dùng gõ và `nameError()` đã báo, nên không có gì bị nuốt im lặng.
+        if (renamed === parent)
+            return;
+        this.#draft.set(setSdApiContractNodeAt(draft, parentPointer, renamed));
+        // why dời pointer theo: nếu không, pointer vẫn trỏ key CŨ — `current()` trả null và form trắng xoá.
+        this.#pointer.set([...parentPointer, 'properties', name]);
+    }
+    setType(value) {
+        const draft = this.#draft();
+        if (!draft || typeof value !== 'string')
+            return;
+        if (!SD_API_CONTRACT_DATA_TYPES.includes(value))
+            return;
+        this.applyCurrent(changeSdApiContractNodeType(draft, value));
+    }
+    setRequired(value) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        if (value === 'true') {
+            this.applyCurrent({ ...draft, required: true });
+            return;
+        }
+        // why: bỏ hẳn key thay vì ghi `false` — key vắng và `false` nghĩa như nhau với consumer, và JSON
+        // gọn hơn. Một `false` do người khác viết tay vẫn được giữ khi nạp vào.
+        const next = { ...draft };
+        delete next['required'];
+        this.applyCurrent(next);
+    }
+    setText(key, value) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        const text = typeof value === 'string' ? value.trim() : '';
+        const next = { ...draft };
+        if (text === '')
+            delete next[key];
+        else
+            next[key] = text;
+        this.applyCurrent(next);
+    }
+    setTransform(value) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        const next = { ...draft };
+        if (value === 'ISOString' || value === 'UTCString')
+            next['transform'] = value;
+        else
+            delete next['transform'];
+        this.applyCurrent(next);
+    }
+    applyCurrent(node) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        this.#draft.set(setSdApiContractNodeAt(draft, this.#pointer(), node));
+    }
+    enter(key) {
+        this.#pointer.set([...this.#pointer(), 'properties', key]);
+        this.#syncTypedName();
+        this.#discardPrompt.set(false);
+    }
+    /** `depth` counts breadcrumb entries, so 0 is the draft root. */
+    backTo(depth) {
+        this.#pointer.set(this.#pointer().slice(0, depth * 2));
+        this.#syncTypedName();
+        this.#discardPrompt.set(false);
+    }
+    addChild() {
+        const node = this.current();
+        const draft = this.#draft();
+        if (!node || !draft)
+            return;
+        const key = uniqueChildKey(node.properties ?? {});
+        const next = addSdApiContractProperty(node, key, createSdApiContractNode('string'));
+        this.#draft.set(setSdApiContractNodeAt(draft, this.#pointer(), next));
+    }
+    removeChild(key) {
+        const node = this.current();
+        const draft = this.#draft();
+        if (!node || !draft)
+            return;
+        this.#draft.set(setSdApiContractNodeAt(draft, this.#pointer(), removeSdApiContractProperty(node, key)));
+    }
+    // -------------------------------------------------------------------------
+    // Chốt sổ
+    // -------------------------------------------------------------------------
+    save() {
+        const draft = this.#draft();
+        if (!draft || !this.canSave())
+            return;
+        this.#discardPrompt.set(false);
+        this.nodeCommit.emit({ name: this.#draftName().trim(), node: draft });
+        // why: forceClose bỏ qua `beforeClose`. Save đã là chủ ý rõ ràng — hỏi lại "bỏ thay đổi?" ngay sau
+        // khi vừa lưu là vô nghĩa.
+        this.#markCommitted();
+        this.drawerRef().forceClose();
+    }
+    requestCancel() {
+        void this.drawerRef().requestClose();
+    }
+    confirmDiscard() {
+        this.#discardPrompt.set(false);
+        this.#markCommitted();
+        this.drawerRef().forceClose();
+    }
+    cancelDiscard() {
+        this.#discardPrompt.set(false);
+    }
+    /**
+     * Blocks the close while the draft is dirty and raises an inline prompt instead.
+     *
+     * why inline chứ không `window.confirm`: một component thư viện không được dựng dialog của browser
+     * — nó không style được, không test được, và chặn cả tab.
+     */
+    guardClose() {
+        if (!this.dirty())
+            return true;
+        this.#discardPrompt.set(true);
+        return false;
+    }
+    onClosed() {
+        this.#discardPrompt.set(false);
+    }
+    // -------------------------------------------------------------------------
+    #seed(name, node, siblingNames) {
+        this.#editingName.set(name);
+        this.#draftName.set(name ?? '');
+        this.#draft.set(node);
+        this.#pointer.set([]);
+        this.#typedName.set(name ?? '');
+        this.#rootSiblings.set([...siblingNames]);
+        this.#discardPrompt.set(false);
+        this.#seedName = name ?? '';
+        this.#seedJson = JSON.stringify(node);
+    }
+    /** Re-points the name field at whatever level the author just moved to. */
+    #syncTypedName() {
+        const pointer = this.#pointer();
+        this.#typedName.set(pointer.length === 0 ? this.#draftName() : pointer[pointer.length - 1]);
+    }
+    /** Re-baselines the seed so a closing drawer is never considered dirty any more. */
+    #markCommitted() {
+        const draft = this.#draft();
+        this.#seedName = this.#draftName();
+        this.#seedJson = draft ? JSON.stringify(draft) : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractNodeDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdApiContractNodeDrawer, isStandalone: true, selector: "sd-api-contract-node-drawer", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null }, allowTransform: { classPropertyName: "allowTransform", publicName: "allowTransform", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeCommit: "nodeCommit" }, viewQueries: [{ propertyName: "drawerRef", first: true, predicate: ["drawer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @let _autoId = autoId();
+    @let _current = current();
+    @let _nameError = nameError();
+
+    <sd-side-drawer
+      #drawer
+      width="560px"
+      disableBackdropClose
+      [title]="title()"
+      [autoId]="_autoId"
+      [beforeClose]="closeGuard"
+      (sdClosed)="onClosed()">
+      @if (_current) {
+        <div class="sd-acb-drawer">
+          @let _breadcrumb = breadcrumb();
+          @if (_breadcrumb.length > 1) {
+            <nav class="sd-acb-drawer__crumbs" [attr.aria-label]="title()">
+              @for (crumb of _breadcrumb; track $index) {
+                @if ($index < _breadcrumb.length - 1) {
+                  <button
+                    type="button"
+                    class="sd-acb-drawer__crumb"
+                    [attr.data-autoid]="_autoId ? _autoId + '-crumb-' + $index : null"
+                    (click)="backTo($index)">
+                    {{ crumb }}
+                  </button>
+                  <span class="sd-acb-drawer__crumb-sep">›</span>
+                } @else {
+                  <span class="sd-acb-drawer__crumb sd-acb-drawer__crumb--current">{{ crumb }}</span>
+                }
+              }
+            </nav>
+          }
+
+          <sd-input
+            size="sm"
+            [autoId]="_autoId ? _autoId + '-name' : undefined"
+            [label]="'core.component.api-contract-builder.node.name' | sdTranslate"
+            [model]="currentName()"
+            [inlineError]="_nameError ?? undefined"
+            (sdChange)="setName($event)"></sd-input>
+
+          <sd-select
+            size="sm"
+            hideInlineError
+            [clearable]="false"
+            [autoId]="_autoId ? _autoId + '-type' : undefined"
+            [label]="'core.component.api-contract-builder.node.type' | sdTranslate"
+            [items]="typeOptions"
+            valueField="value"
+            displayField="label"
+            [model]="_current.type"
+            (sdChange)="setType($event)"></sd-select>
+
+          <sd-select
+            size="sm"
+            hideInlineError
+            [clearable]="false"
+            [autoId]="_autoId ? _autoId + '-required' : undefined"
+            [label]="'core.component.api-contract-builder.node.required' | sdTranslate"
+            [items]="requiredOptions"
+            valueField="value"
+            displayField="label"
+            [model]="_current.required === true ? 'true' : 'false'"
+            (sdChange)="setRequired($event)"></sd-select>
+
+          <sd-input
+            size="sm"
+            hideInlineError
+            [autoId]="_autoId ? _autoId + '-label' : undefined"
+            [label]="'core.component.api-contract-builder.node.label' | sdTranslate"
+            [model]="_current.label ?? ''"
+            (sdChange)="setText('label', $event)"></sd-input>
+
+          <sd-input
+            size="sm"
+            hideInlineError
+            [autoId]="_autoId ? _autoId + '-description' : undefined"
+            [label]="'core.component.api-contract-builder.node.description' | sdTranslate"
+            [model]="_current.description ?? ''"
+            (sdChange)="setText('description', $event)"></sd-input>
+
+          @if (allowTransform() && (_current.type === 'date' || _current.type === 'datetime')) {
+            <sd-select
+              size="sm"
+              hideInlineError
+              [clearable]="false"
+              [autoId]="_autoId ? _autoId + '-transform' : undefined"
+              [label]="'core.component.api-contract-builder.node.transform' | sdTranslate"
+              [items]="transformOptions"
+              valueField="value"
+              displayField="label"
+              [model]="_current.transform ?? ''"
+              (sdChange)="setTransform($event)"></sd-select>
+          }
+
+          @if (layer() === 'mapping') {
+            <sd-api-contract-source-editor
+              [node]="_current"
+              [suggestions]="suggestions()"
+              [autoId]="_autoId ? _autoId + '-value' : undefined"
+              (nodeChange)="applyCurrent($event)"></sd-api-contract-source-editor>
+          }
+
+          @if (_current.type === 'object') {
+            @let _children = children();
+            <div class="sd-acb-drawer__children">
+              <h5 class="sd-acb-drawer__children-title">
+                {{ 'core.component.api-contract-builder.node.add-property' | sdTranslate }}
+              </h5>
+
+              @if (!_children.length) {
+                <p class="sd-acb-drawer__empty">{{ 'core.component.api-contract-builder.node.empty' | sdTranslate }}</p>
+              }
+
+              @for (child of _children; track child.key) {
+                <sd-api-contract-node-summary
+                  [name]="child.key"
+                  [node]="child.node"
+                  [autoId]="_autoId ? _autoId + '-child-' + child.key : undefined"
+                  (edit)="enter(child.key)"
+                  (remove)="removeChild(child.key)"></sd-api-contract-node-summary>
+              }
+
+              <sd-button
+                type="light"
+                size="sm"
+                prefixIcon="add"
+                [autoId]="_autoId ? _autoId + '-add-child' : undefined"
+                [title]="'core.component.api-contract-builder.node.add-property' | sdTranslate"
+                (click)="addChild()"></sd-button>
+            </div>
+          }
+
+          @if (discardPrompt()) {
+            <div class="sd-acb-drawer__confirm" role="alertdialog">
+              <span>{{ 'core.component.api-contract-builder.drawer.discard-confirm' | sdTranslate }}</span>
+              <sd-button
+                type="text"
+                size="sm"
+                color="error"
+                [autoId]="_autoId ? _autoId + '-discard' : undefined"
+                [title]="'core.component.api-contract-builder.confirm.yes' | sdTranslate"
+                (click)="confirmDiscard()"></sd-button>
+              <sd-button
+                type="text"
+                size="sm"
+                [autoId]="_autoId ? _autoId + '-keep' : undefined"
+                [title]="'core.component.api-contract-builder.confirm.no' | sdTranslate"
+                (click)="cancelDiscard()"></sd-button>
+            </div>
+          }
+        </div>
+      }
+
+      <sd-button
+        sdFooterRight
+        type="text"
+        [autoId]="_autoId ? _autoId + '-cancel' : undefined"
+        [title]="'core.component.api-contract-builder.drawer.cancel' | sdTranslate"
+        (click)="requestCancel()"></sd-button>
+      <sd-button
+        sdFooterRight
+        type="fill"
+        color="primary"
+        [autoId]="_autoId ? _autoId + '-save' : undefined"
+        [disabled]="!canSave()"
+        [title]="'core.component.api-contract-builder.drawer.save' | sdTranslate"
+        (click)="save()"></sd-button>
+    </sd-side-drawer>
+  `, isInline: true, styles: [".sd-acb-drawer{display:flex;flex-direction:column;gap:12px;padding:16px}.sd-acb-drawer__crumbs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px}.sd-acb-drawer__crumb{padding:2px 4px;border:0;border-radius:4px;background:transparent;color:var(--sd-primary, #005cbb);font:inherit;cursor:pointer}.sd-acb-drawer__crumb:hover{background:color-mix(in srgb,var(--sd-primary, #005cbb) 10%,transparent)}.sd-acb-drawer__crumb--current{color:var(--sd-text, #1a1b1f);font-weight:600;cursor:default}.sd-acb-drawer__crumb-sep{color:var(--sd-text-secondary, #6b6b6b)}.sd-acb-drawer__children{display:flex;flex-direction:column;gap:6px;padding-top:4px;border-top:1px solid var(--sd-border-color, #e6e6e6)}.sd-acb-drawer__children-title{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb-drawer__empty{margin:0;font-size:12px;font-style:italic;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb-drawer__confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border:1px dashed var(--sd-border-color, #e6e6e6);border-radius:6px;background:var(--sd-surface-muted, #f3f5f8);font-size:12px}\n"], dependencies: [{ kind: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableBackdropClose", "beforeClose", "drawerClass", "autoId"], outputs: ["sdClosed", "sdCloseError"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "showSelectAll", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdApiContractNodeSummary, selector: "sd-api-contract-node-summary", inputs: ["name", "node", "readonly", "autoId"], outputs: ["edit", "remove"] }, { kind: "component", type: SdApiContractSourceEditor, selector: "sd-api-contract-source-editor", inputs: ["node", "suggestions", "disabled", "autoId"], outputs: ["nodeChange"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractNodeDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-api-contract-node-drawer', standalone: true, imports: [SdSideDrawer, SdButton, SdInput, SdSelect, SdApiContractNodeSummary, SdApiContractSourceEditor, SdTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @let _autoId = autoId();
+    @let _current = current();
+    @let _nameError = nameError();
+
+    <sd-side-drawer
+      #drawer
+      width="560px"
+      disableBackdropClose
+      [title]="title()"
+      [autoId]="_autoId"
+      [beforeClose]="closeGuard"
+      (sdClosed)="onClosed()">
+      @if (_current) {
+        <div class="sd-acb-drawer">
+          @let _breadcrumb = breadcrumb();
+          @if (_breadcrumb.length > 1) {
+            <nav class="sd-acb-drawer__crumbs" [attr.aria-label]="title()">
+              @for (crumb of _breadcrumb; track $index) {
+                @if ($index < _breadcrumb.length - 1) {
+                  <button
+                    type="button"
+                    class="sd-acb-drawer__crumb"
+                    [attr.data-autoid]="_autoId ? _autoId + '-crumb-' + $index : null"
+                    (click)="backTo($index)">
+                    {{ crumb }}
+                  </button>
+                  <span class="sd-acb-drawer__crumb-sep">›</span>
+                } @else {
+                  <span class="sd-acb-drawer__crumb sd-acb-drawer__crumb--current">{{ crumb }}</span>
+                }
+              }
+            </nav>
+          }
+
+          <sd-input
+            size="sm"
+            [autoId]="_autoId ? _autoId + '-name' : undefined"
+            [label]="'core.component.api-contract-builder.node.name' | sdTranslate"
+            [model]="currentName()"
+            [inlineError]="_nameError ?? undefined"
+            (sdChange)="setName($event)"></sd-input>
+
+          <sd-select
+            size="sm"
+            hideInlineError
+            [clearable]="false"
+            [autoId]="_autoId ? _autoId + '-type' : undefined"
+            [label]="'core.component.api-contract-builder.node.type' | sdTranslate"
+            [items]="typeOptions"
+            valueField="value"
+            displayField="label"
+            [model]="_current.type"
+            (sdChange)="setType($event)"></sd-select>
+
+          <sd-select
+            size="sm"
+            hideInlineError
+            [clearable]="false"
+            [autoId]="_autoId ? _autoId + '-required' : undefined"
+            [label]="'core.component.api-contract-builder.node.required' | sdTranslate"
+            [items]="requiredOptions"
+            valueField="value"
+            displayField="label"
+            [model]="_current.required === true ? 'true' : 'false'"
+            (sdChange)="setRequired($event)"></sd-select>
+
+          <sd-input
+            size="sm"
+            hideInlineError
+            [autoId]="_autoId ? _autoId + '-label' : undefined"
+            [label]="'core.component.api-contract-builder.node.label' | sdTranslate"
+            [model]="_current.label ?? ''"
+            (sdChange)="setText('label', $event)"></sd-input>
+
+          <sd-input
+            size="sm"
+            hideInlineError
+            [autoId]="_autoId ? _autoId + '-description' : undefined"
+            [label]="'core.component.api-contract-builder.node.description' | sdTranslate"
+            [model]="_current.description ?? ''"
+            (sdChange)="setText('description', $event)"></sd-input>
+
+          @if (allowTransform() && (_current.type === 'date' || _current.type === 'datetime')) {
+            <sd-select
+              size="sm"
+              hideInlineError
+              [clearable]="false"
+              [autoId]="_autoId ? _autoId + '-transform' : undefined"
+              [label]="'core.component.api-contract-builder.node.transform' | sdTranslate"
+              [items]="transformOptions"
+              valueField="value"
+              displayField="label"
+              [model]="_current.transform ?? ''"
+              (sdChange)="setTransform($event)"></sd-select>
+          }
+
+          @if (layer() === 'mapping') {
+            <sd-api-contract-source-editor
+              [node]="_current"
+              [suggestions]="suggestions()"
+              [autoId]="_autoId ? _autoId + '-value' : undefined"
+              (nodeChange)="applyCurrent($event)"></sd-api-contract-source-editor>
+          }
+
+          @if (_current.type === 'object') {
+            @let _children = children();
+            <div class="sd-acb-drawer__children">
+              <h5 class="sd-acb-drawer__children-title">
+                {{ 'core.component.api-contract-builder.node.add-property' | sdTranslate }}
+              </h5>
+
+              @if (!_children.length) {
+                <p class="sd-acb-drawer__empty">{{ 'core.component.api-contract-builder.node.empty' | sdTranslate }}</p>
+              }
+
+              @for (child of _children; track child.key) {
+                <sd-api-contract-node-summary
+                  [name]="child.key"
+                  [node]="child.node"
+                  [autoId]="_autoId ? _autoId + '-child-' + child.key : undefined"
+                  (edit)="enter(child.key)"
+                  (remove)="removeChild(child.key)"></sd-api-contract-node-summary>
+              }
+
+              <sd-button
+                type="light"
+                size="sm"
+                prefixIcon="add"
+                [autoId]="_autoId ? _autoId + '-add-child' : undefined"
+                [title]="'core.component.api-contract-builder.node.add-property' | sdTranslate"
+                (click)="addChild()"></sd-button>
+            </div>
+          }
+
+          @if (discardPrompt()) {
+            <div class="sd-acb-drawer__confirm" role="alertdialog">
+              <span>{{ 'core.component.api-contract-builder.drawer.discard-confirm' | sdTranslate }}</span>
+              <sd-button
+                type="text"
+                size="sm"
+                color="error"
+                [autoId]="_autoId ? _autoId + '-discard' : undefined"
+                [title]="'core.component.api-contract-builder.confirm.yes' | sdTranslate"
+                (click)="confirmDiscard()"></sd-button>
+              <sd-button
+                type="text"
+                size="sm"
+                [autoId]="_autoId ? _autoId + '-keep' : undefined"
+                [title]="'core.component.api-contract-builder.confirm.no' | sdTranslate"
+                (click)="cancelDiscard()"></sd-button>
+            </div>
+          }
+        </div>
+      }
+
+      <sd-button
+        sdFooterRight
+        type="text"
+        [autoId]="_autoId ? _autoId + '-cancel' : undefined"
+        [title]="'core.component.api-contract-builder.drawer.cancel' | sdTranslate"
+        (click)="requestCancel()"></sd-button>
+      <sd-button
+        sdFooterRight
+        type="fill"
+        color="primary"
+        [autoId]="_autoId ? _autoId + '-save' : undefined"
+        [disabled]="!canSave()"
+        [title]="'core.component.api-contract-builder.drawer.save' | sdTranslate"
+        (click)="save()"></sd-button>
+    </sd-side-drawer>
+  `, styles: [".sd-acb-drawer{display:flex;flex-direction:column;gap:12px;padding:16px}.sd-acb-drawer__crumbs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px}.sd-acb-drawer__crumb{padding:2px 4px;border:0;border-radius:4px;background:transparent;color:var(--sd-primary, #005cbb);font:inherit;cursor:pointer}.sd-acb-drawer__crumb:hover{background:color-mix(in srgb,var(--sd-primary, #005cbb) 10%,transparent)}.sd-acb-drawer__crumb--current{color:var(--sd-text, #1a1b1f);font-weight:600;cursor:default}.sd-acb-drawer__crumb-sep{color:var(--sd-text-secondary, #6b6b6b)}.sd-acb-drawer__children{display:flex;flex-direction:column;gap:6px;padding-top:4px;border-top:1px solid var(--sd-border-color, #e6e6e6)}.sd-acb-drawer__children-title{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb-drawer__empty{margin:0;font-size:12px;font-style:italic;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb-drawer__confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border:1px dashed var(--sd-border-color, #e6e6e6);border-radius:6px;background:var(--sd-surface-muted, #f3f5f8);font-size:12px}\n"] }]
+        }] });
+/** First free `truong`, `truong2`, … so adding twice never collides. */
+function uniqueChildKey(properties) {
+    const base = 'truong';
+    if (!Object.prototype.hasOwnProperty.call(properties, base))
+        return base;
+    for (let index = 2;; index += 1) {
+        const candidate = `${base}${index}`;
+        if (!Object.prototype.hasOwnProperty.call(properties, candidate))
+            return candidate;
+    }
+}
+
+/**
+ * One schema layer — `input.schema`, `req.body`, `res.body`, `output.schema` — rendered as a flat list
+ * of the fields it declares.
+ *
+ * It used to be a recursive tree of editable seven-column rows. It is now a list you read: adding and
+ * editing ask the builder to open its drawer, and only removal is applied straight away. The list is
+ * deliberately FLAT — an `object` field shows how many fields it holds and the author drills into it
+ * inside the drawer, so a deeply nested node is edited with a drawer's worth of room instead of a
+ * 100px cell.
+ */
+class SdApiContractNodeEditor {
+    /** The layer's root node. */
+    node = input.required();
+    /** Diagnostic path of the layer itself, e.g. `input.schema`. */
+    basePath = input.required();
+    disabled = input(false, { transform: booleanAttribute });
+    autoId = input();
+    nodeChange = output();
+    editRequest = output();
+    /**
+     * Which node actually holds the fields.
+     *
+     * why: một tầng `array` (`output.schema` sau khi nhận `${res.body.items}`) khai field ở `items`, chứ
+     * bản thân nó không có `properties`. Đọc thẳng `node.properties` sẽ ra danh sách rỗng và tầng output
+     * của contract mẫu thành không sửa được.
+     */
+    #container = computed(() => {
+        const node = this.node();
+        return node.type === 'array' && node.items ? node.items : node;
+    });
+    /** `['items']` for an array layer, `[]` otherwise — the prefix a commit has to be written under. */
+    #containerPointer = computed(() => {
+        const node = this.node();
+        return node.type === 'array' && node.items ? ['items'] : [];
+    });
+    entries = computed(() => {
+        const properties = this.#container().properties;
+        if (!properties)
+            return [];
+        return Object.keys(properties).map(key => ({ key, node: properties[key] }));
+    });
+    #keys = computed(() => this.entries().map(entry => entry.key));
+    requestAdd() {
+        this.editRequest.emit({ name: null, node: null, siblingNames: this.#keys(), pointer: this.#containerPointer() });
+    }
+    requestEdit(key, node) {
+        this.editRequest.emit({ name: key, node, siblingNames: this.#keys(), pointer: this.#containerPointer() });
+    }
+    removeProperty(key) {
+        const stripped = removeSdApiContractProperty(this.#container(), key);
+        this.nodeChange.emit(setSdApiContractNodeAt(this.node(), this.#containerPointer(), stripped));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractNodeEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdApiContractNodeEditor, isStandalone: true, selector: "sd-api-contract-node-editor", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeChange: "nodeChange", editRequest: "editRequest" }, ngImport: i0, template: "@let _entries = entries();\n@let _disabled = disabled();\n@let _autoId = autoId();\n\n<div class=\"sd-acb-list\">\n  @if (!_entries.length) {\n    <p class=\"sd-acb-list__empty\">{{ 'core.component.api-contract-builder.node.empty' | sdTranslate }}</p>\n  }\n\n  @for (entry of _entries; track entry.key) {\n    <sd-api-contract-node-summary\n      [name]=\"entry.key\"\n      [node]=\"entry.node\"\n      [readonly]=\"_disabled\"\n      [autoId]=\"_autoId ? _autoId + '-' + entry.key : undefined\"\n      (edit)=\"requestEdit(entry.key, entry.node)\"\n      (remove)=\"removeProperty(entry.key)\"></sd-api-contract-node-summary>\n  }\n\n  @if (!_disabled) {\n    <sd-button\n      class=\"sd-acb-list__add\"\n      type=\"light\"\n      size=\"sm\"\n      prefixIcon=\"add\"\n      [autoId]=\"_autoId ? _autoId + '-add' : undefined\"\n      [title]=\"'core.component.api-contract-builder.node.add-property' | sdTranslate\"\n      (click)=\"requestAdd()\"></sd-button>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.sd-acb-list{display:flex;flex-direction:column;gap:6px}.sd-acb-list__empty{margin:0;font-size:12px;font-style:italic;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb-list__add{align-self:flex-start}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }, { kind: "component", type: SdApiContractNodeSummary, selector: "sd-api-contract-node-summary", inputs: ["name", "node", "readonly", "autoId"], outputs: ["edit", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractNodeEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-api-contract-node-editor', standalone: true, imports: [SdButton, SdTranslatePipe, SdApiContractNodeSummary], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let _entries = entries();\n@let _disabled = disabled();\n@let _autoId = autoId();\n\n<div class=\"sd-acb-list\">\n  @if (!_entries.length) {\n    <p class=\"sd-acb-list__empty\">{{ 'core.component.api-contract-builder.node.empty' | sdTranslate }}</p>\n  }\n\n  @for (entry of _entries; track entry.key) {\n    <sd-api-contract-node-summary\n      [name]=\"entry.key\"\n      [node]=\"entry.node\"\n      [readonly]=\"_disabled\"\n      [autoId]=\"_autoId ? _autoId + '-' + entry.key : undefined\"\n      (edit)=\"requestEdit(entry.key, entry.node)\"\n      (remove)=\"removeProperty(entry.key)\"></sd-api-contract-node-summary>\n  }\n\n  @if (!_disabled) {\n    <sd-button\n      class=\"sd-acb-list__add\"\n      type=\"light\"\n      size=\"sm\"\n      prefixIcon=\"add\"\n      [autoId]=\"_autoId ? _autoId + '-add' : undefined\"\n      [title]=\"'core.component.api-contract-builder.node.add-property' | sdTranslate\"\n      (click)=\"requestAdd()\"></sd-button>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.sd-acb-list{display:flex;flex-direction:column;gap:6px}.sd-acb-list__empty{margin:0;font-size:12px;font-style:italic;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb-list__add{align-self:flex-start}\n"] }]
+        }] });
+
+/**
+ * One keyed collection of nodes — `req.path` / `req.query` / `req.headers` / `res.headers` — rendered
+ * as a list you read, not a list you type into.
+ *
+ * Every entry is a collapsed row. Adding and editing both ask the builder to open its drawer; only
+ * removal is applied straight away, because there is nothing to stage about deleting a row. That is
+ * why `add()` emits an edit request rather than an entry: a half-declared field must never reach the
+ * contract just because someone clicked the add button and changed their mind.
+ */
+class SdApiContractRecordEditor {
+    record = input();
+    /** Diagnostic path of the collection itself, e.g. `req.query`. */
+    basePath = input.required();
+    disabled = input(false, { transform: booleanAttribute });
+    emptyLabel = input('');
+    autoId = input();
+    recordChange = output();
+    editRequest = output();
+    entries = computed(() => {
+        const record = this.record();
+        if (!record)
+            return [];
+        const base = this.basePath();
+        return Object.keys(record).map(key => ({ key, node: record[key], path: `${base}.${key}` }));
+    });
+    #keys = computed(() => this.entries().map(entry => entry.key));
+    requestAdd() {
+        this.editRequest.emit({ name: null, node: null, siblingNames: this.#keys() });
+    }
+    requestEdit(entry) {
+        this.editRequest.emit({ name: entry.key, node: entry.node, siblingNames: this.#keys() });
+    }
+    remove(key) {
+        const record = this.record();
+        if (!record)
+            return;
+        this.recordChange.emit(sdApiContractRecordRemove(record, key));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractRecordEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdApiContractRecordEditor, isStandalone: true, selector: "sd-api-contract-record-editor", inputs: { record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordChange: "recordChange", editRequest: "editRequest" }, ngImport: i0, template: `
+    @let _entries = entries();
+    @let _disabled = disabled();
+    @let _autoId = autoId();
+
+    <div class="sd-acb-record">
+      @if (!_entries.length) {
+        <p class="sd-acb-record__empty">{{ emptyLabel() }}</p>
+      }
+
+      @for (entry of _entries; track entry.key) {
+        <sd-api-contract-node-summary
+          [name]="entry.key"
+          [node]="entry.node"
+          [readonly]="_disabled"
+          [autoId]="_autoId ? _autoId + '-' + entry.key : undefined"
+          (edit)="requestEdit(entry)"
+          (remove)="remove(entry.key)"></sd-api-contract-node-summary>
+      }
+
+      @if (!_disabled) {
+        <sd-button
+          class="sd-acb-record__add"
+          type="light"
+          size="sm"
+          prefixIcon="add"
+          [autoId]="_autoId ? _autoId + '-add' : undefined"
+          [title]="'core.component.api-contract-builder.request.add-entry' | sdTranslate"
+          (click)="requestAdd()"></sd-button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}.sd-acb-record{display:flex;flex-direction:column;gap:6px}.sd-acb-record__empty{margin:0;font-size:12px;font-style:italic;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb-record__add{align-self:flex-start}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }, { kind: "component", type: SdApiContractNodeSummary, selector: "sd-api-contract-node-summary", inputs: ["name", "node", "readonly", "autoId"], outputs: ["edit", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractRecordEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-api-contract-record-editor', standalone: true, imports: [SdButton, SdTranslatePipe, SdApiContractNodeSummary], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @let _entries = entries();
+    @let _disabled = disabled();
+    @let _autoId = autoId();
+
+    <div class="sd-acb-record">
+      @if (!_entries.length) {
+        <p class="sd-acb-record__empty">{{ emptyLabel() }}</p>
+      }
+
+      @for (entry of _entries; track entry.key) {
+        <sd-api-contract-node-summary
+          [name]="entry.key"
+          [node]="entry.node"
+          [readonly]="_disabled"
+          [autoId]="_autoId ? _autoId + '-' + entry.key : undefined"
+          (edit)="requestEdit(entry)"
+          (remove)="remove(entry.key)"></sd-api-contract-node-summary>
+      }
+
+      @if (!_disabled) {
+        <sd-button
+          class="sd-acb-record__add"
+          type="light"
+          size="sm"
+          prefixIcon="add"
+          [autoId]="_autoId ? _autoId + '-add' : undefined"
+          [title]="'core.component.api-contract-builder.request.add-entry' | sdTranslate"
+          (click)="requestAdd()"></sd-button>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%}.sd-acb-record{display:flex;flex-direction:column;gap:6px}.sd-acb-record__empty{margin:0;font-size:12px;font-style:italic;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb-record__add{align-self:flex-start}\n"] }]
+        }] });
+
+const STEP_GENERAL = 0;
+const STEP_INPUT = 1;
+const STEP_REQUEST = 2;
+const STEP_RESPONSE = 3;
+const STEP_OUTPUT = 4;
+const STEP_REVIEW = 5;
+/**
+ * Visual builder for an `SdApiContract`.
+ *
+ * The component is a **design-time** tool: it never performs a request, never resolves an
+ * expression and never holds a secret. It edits, validates and serializes the contract; executing
+ * it is a separate concern for a future `form-builder` / `form-render` integration.
+ *
+ * @example
+ * ```html
+ * <sd-api-contract-builder [(model)]="contract" autoId="product-search"></sd-api-contract-builder>
+ * ```
+ */
+class SdApiContractBuilder {
+    #i18n = inject(I18nService);
+    #configuration = resolveSdApiContractConfiguration(inject(SD_API_CONTRACT_CONFIGURATION, { optional: true }));
+    model = model(null);
+    mode = input('edit');
+    disabled = input(false, { transform: booleanAttribute });
+    autoId = input();
+    /** Fires whenever the diagnostics change, including once for the initially seeded contract. */
+    diagnosticsChange = output();
+    /** Fires only when validity flips, so a consumer can gate a Save button without debouncing. */
+    validChange = output();
+    // why: bản nháp nội bộ là BẢN SAO SÂU của model cha. Component không bao giờ ghi vào object cha —
+    // mọi thao tác dựng contract mới rồi mới `model.set`.
+    #draft = signal(null);
+    // why: mốc so sánh để phân biệt "cha đưa giá trị mới vào" với "chính ta vừa bắn ra" — thiếu nó,
+    // effect seed sẽ clone lại contract ta vừa emit và tạo vòng lặp phản hồi.
+    #lastEmitted = null;
+    #lastValid = null;
+    activeStep = signal(STEP_GENERAL);
+    contractVersion = SD_API_CONTRACT_VERSION;
+    responseFieldToken = signal(null);
+    urlPlaceholder = '${env.baseUrl}/products/{id}';
+    draft = this.#draft.asReadonly();
+    readonly = computed(() => this.disabled() || this.mode() === 'view');
+    isView = computed(() => this.mode() === 'view');
+    steps = [
+        { index: STEP_GENERAL, key: 'general', label: this.#i18n.t('core.component.api-contract-builder.step.general') },
+        { index: STEP_INPUT, key: 'input', label: this.#i18n.t('core.component.api-contract-builder.step.input') },
+        { index: STEP_REQUEST, key: 'request', label: this.#i18n.t('core.component.api-contract-builder.step.request') },
+        { index: STEP_RESPONSE, key: 'response', label: this.#i18n.t('core.component.api-contract-builder.step.response') },
+        { index: STEP_OUTPUT, key: 'output', label: this.#i18n.t('core.component.api-contract-builder.step.output') },
+        { index: STEP_REVIEW, key: 'review', label: this.#i18n.t('core.component.api-contract-builder.step.review') },
+    ];
+    methodOptions = SD_API_CONTRACT_HTTP_METHODS.map(method => ({ value: method, label: method }));
+    allTypes = SD_API_CONTRACT_DATA_TYPES;
+    scalarTypes = SD_API_CONTRACT_SCALAR_DATA_TYPES;
+    queryTypes = [...SD_API_CONTRACT_SCALAR_DATA_TYPES, 'array'];
+    #envSuggestions = Object.keys(this.#configuration.env).map(key => {
+        const variable = this.#configuration.env[key];
+        const sensitiveMark = variable.sensitive ? ` · ${this.#i18n.t('core.component.api-contract-builder.mapping.sensitive')}` : '';
+        return {
+            expression: formatSdApiContractExpression('env', [key]),
+            path: `env.${key}`,
+            root: 'env',
+            type: variable.type,
+            display: `env.${key} — ${variable.type}${sensitiveMark}`,
+        };
+    });
+    // why: builder sở hữu ĐÚNG MỘT drawer, nên phải tự nhớ danh sách nào vừa yêu cầu mở nó. Không có
+    // mốc này thì `applyNodeCommit` không biết ghi kết quả vào `req.query` hay `res.headers`.
+    #drawerTarget = signal(null);
+    nodeDrawer = viewChild('nodeDrawer');
+    drawerLayer = computed(() => this.#drawerTarget()?.section === 'input.schema' ? 'schema' : 'mapping');
+    // why chỉ input/output schema: `transform` là thuộc tính của schema frontend. `req`/`res` mô tả HTTP,
+    // ở đó một giá trị thời gian đã là chuỗi trên đường truyền rồi.
+    drawerAllowsTransform = computed(() => {
+        const section = this.#drawerTarget()?.section;
+        return section === 'input.schema' || section === 'output.schema';
+    });
+    drawerSuggestions = computed(() => {
+        const section = this.#drawerTarget()?.section;
+        if (section === undefined)
+            return [];
+        if (section === 'output.schema')
+            return this.outputSuggestions();
+        if (section === 'res.headers' || section === 'res.body')
+            return this.outputSuggestions();
+        return this.requestSuggestions();
+    });
+    // why: JSON dán vào có thể chưa parse được (đang gõ dở, thiếu ngoặc). Lỗi đó KHÔNG đến từ
+    // `validateSdApiContract` — nó chưa bao giờ thấy contract — nên phải mang riêng rồi trộn vào
+    // danh sách chẩn đoán, để người dán thấy lý do thay vì thấy contract im lặng không đổi.
+    #pasteError = signal(null);
+    diagnostics = computed(() => {
+        const draft = this.#draft();
+        const base = draft ? validateSdApiContract(draft, this.#configuration) : [];
+        const pasteError = this.#pasteError();
+        return pasteError ? [pasteError, ...base] : base;
+    });
+    json = computed(() => serializeSdApiContract(this.#draft()));
+    // why: contract từ ngoài có thể thiếu hẳn một tầng. Mọi computed đọc draft phải chịu được điều đó —
+    // builder có nhiệm vụ HIỂN THỊ contract sai kèm chẩn đoán, không được nổ và cũng không được tự vá.
+    #inputSuggestions = computed(() => {
+        const schema = this.#draft()?.input?.schema;
+        if (!schema)
+            return [];
+        return listSdApiContractSchemaFields(schema, { arrays: 'stop' }).map(field => ({
+            expression: formatSdApiContractExpression('input', field.segments),
+            path: `input.${field.path}`,
+            root: 'input',
+            type: field.type,
+            display: `input.${field.path} — ${field.type}${field.label ? ` (${field.label})` : ''}`,
+        }));
+    });
+    #responseSuggestions = computed(() => {
+        const response = this.#draft()?.res;
+        if (!response)
+            return [];
+        return listSdApiContractResponseFields(response).map(field => ({
+            expression: formatSdApiContractExpression('res', field.segments),
+            path: `res.${field.path}`,
+            root: 'res',
+            type: field.type,
+            display: `res.${field.path} — ${field.type}`,
+        }));
+    });
+    requestSuggestions = computed(() => [...this.#inputSuggestions(), ...this.#envSuggestions]);
+    outputSuggestions = computed(() => [
+        ...this.#responseSuggestions(),
+        ...this.#inputSuggestions(),
+        ...this.#envSuggestions,
+    ]);
+    /** Response paths offered by the "use a response field as the output" action. */
+    responseFieldOptions = computed(() => {
+        const response = this.#draft()?.res;
+        if (!response)
+            return [];
+        return listSdApiContractResponseFields(response).map(field => ({ value: field.path, label: `${field.path} — ${field.type}` }));
+    });
+    /** Leaf fields a dropdown / table consumer will see once this contract runs. */
+    outputFields = computed(() => {
+        const schema = this.#draft()?.output?.schema;
+        if (!schema)
+            return [];
+        return listSdApiContractSchemaFields(schema).filter(field => field.leaf);
+    });
+    statusText = computed(() => {
+        const status = this.#draft()?.res?.status;
+        if (status === undefined)
+            return '';
+        return Array.isArray(status) ? status.join(', ') : String(status);
+    });
+    get autoIdAttr() {
+        return this.autoId() ?? null;
+    }
+    constructor() {
+        effect(() => {
+            const external = this.model();
+            untracked(() => {
+                if (external === this.#lastEmitted)
+                    return;
+                // why: clone sâu — cha giữ nguyên object của mình, mọi chỉnh sửa chỉ chạm bản nháp.
+                // Contract sai cấu trúc vẫn được nạp nguyên trạng để hiển thị + chẩn đoán, KHÔNG tự sửa.
+                this.#draft.set(external ? cloneSdApiContract(external) : null);
+            });
+        });
+        effect(() => {
+            const diagnostics = this.diagnostics();
+            untracked(() => {
+                this.diagnosticsChange.emit(diagnostics);
+                const valid = !diagnostics.some(diagnostic => diagnostic.severity === 'error');
+                if (valid !== this.#lastValid) {
+                    this.#lastValid = valid;
+                    this.validChange.emit(valid);
+                }
+            });
+        });
+    }
+    // -------------------------------------------------------------------------
+    // Navigation
+    // -------------------------------------------------------------------------
+    goToStep(index) {
+        this.activeStep.set(index);
+    }
+    goToDiagnostic(diagnostic) {
+        this.activeStep.set(stepForPath(diagnostic.path));
+    }
+    // -------------------------------------------------------------------------
+    // Contract-level edits
+    // -------------------------------------------------------------------------
+    createContract() {
+        this.#commit({
+            contractVersion: SD_API_CONTRACT_VERSION,
+            code: '',
+            name: '',
+            input: { schema: { type: 'object', properties: {} } },
+            req: { method: 'GET', url: '' },
+            res: { status: 200 },
+            output: { schema: { type: 'object', properties: {} } },
+        });
+    }
+    setText(key, value) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        const text = typeof value === 'string' ? value : '';
+        if (key === 'description' && !text) {
+            const { description: _dropped, ...rest } = draft;
+            this.#commit(rest);
+            return;
+        }
+        this.#commit({ ...draft, [key]: text });
+    }
+    setInputSchema(node) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        this.#commit({ ...draft, input: { schema: node } });
+    }
+    setMethod(value) {
+        const draft = this.#draft();
+        if (!draft || typeof value !== 'string')
+            return;
+        this.#commit({ ...draft, req: { ...draft.req, method: value } });
+    }
+    setUrl(value) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        this.#commit({ ...draft, req: { ...draft.req, url: typeof value === 'string' ? value : '' } });
+    }
+    // -------------------------------------------------------------------------
+    // Drawer
+    // -------------------------------------------------------------------------
+    /**
+     * Opens the one drawer for whichever list asked.
+     *
+     * why gác `readonly` ở đây nữa: hàng thu gọn đã tự chặn khi read-only, nhưng builder là nơi duy nhất
+     * biết `mode`/`disabled` thật. Hai lớp gác rẻ hơn một đường mở drawer lọt trong chế độ xem.
+     */
+    openNodeDrawer(section, request) {
+        if (this.readonly())
+            return;
+        this.#drawerTarget.set({ section, request });
+        const drawer = this.nodeDrawer();
+        if (!drawer)
+            return;
+        if (request.name === null || request.node === null)
+            drawer.openForAdd(request.siblingNames);
+        else
+            drawer.openForEdit(request.name, request.node, request.siblingNames);
+    }
+    /**
+     * Writes a committed node back where it came from — one `modelChange`, at Save time.
+     *
+     * A rename goes through `sdApiContractRecordRename` first so the entry keeps its position in the
+     * JSON instead of jumping to the end. The drawer has already refused a duplicate name, so the
+     * rename cannot collide by the time it reaches here.
+     */
+    applyNodeCommit(commit) {
+        const target = this.#drawerTarget();
+        const draft = this.#draft();
+        this.#drawerTarget.set(null);
+        if (!target || !draft)
+            return;
+        const previous = target.request.name;
+        const pointer = target.request.pointer ?? [];
+        switch (target.section) {
+            case 'req.path':
+            case 'req.query':
+            case 'req.headers': {
+                const key = target.section.slice('req.'.length);
+                const record = (draft.req?.[key] ?? {});
+                this.setRequestRecord(key, commitIntoRecord(record, previous, commit));
+                return;
+            }
+            case 'res.headers': {
+                const record = (draft.res?.headers ?? {});
+                this.setResponseHeaders(commitIntoRecord(record, previous, commit));
+                return;
+            }
+            case 'input.schema': {
+                const root = draft.input?.schema;
+                if (!root)
+                    return;
+                this.setInputSchema(commitIntoProperties(root, pointer, previous, commit));
+                return;
+            }
+            case 'req.body': {
+                const root = draft.req?.body;
+                if (!root)
+                    return;
+                this.setRequestBody(commitIntoProperties(root, pointer, previous, commit));
+                return;
+            }
+            case 'res.body': {
+                const root = draft.res?.body;
+                if (!root)
+                    return;
+                this.setResponseBody(commitIntoProperties(root, pointer, previous, commit));
+                return;
+            }
+            case 'output.schema': {
+                const root = draft.output?.schema;
+                if (!root)
+                    return;
+                this.setOutputSchema(commitIntoProperties(root, pointer, previous, commit));
+                return;
+            }
+            default:
+                return;
+        }
+    }
+    setRequestRecord(section, record) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        this.#commit({ ...draft, req: { ...draft.req, [section]: record } });
+    }
+    setRequestBody(node) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        this.#commit({ ...draft, req: { ...draft.req, body: node } });
+    }
+    addRequestBody() {
+        this.setRequestBody(createSdApiContractNode('object'));
+    }
+    removeRequestBody() {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        const { body: _dropped, ...req } = draft.req;
+        this.#commit({ ...draft, req });
+    }
+    setStatus(value) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        const parts = String(value ?? '')
+            .split(',')
+            .map(part => part.trim())
+            .filter(part => part.length > 0)
+            .map(part => Number(part));
+        // why: KHÔNG bỏ giá trị không phải số — validator phải báo `res.status.invalid` cho người dùng
+        // thấy, im lặng nuốt đi là "âm thầm sửa contract sai".
+        const status = parts.length === 1 ? parts[0] : parts;
+        this.#commit({ ...draft, res: { ...draft.res, status } });
+    }
+    setResponseHeaders(record) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        this.#commit({ ...draft, res: { ...draft.res, headers: record } });
+    }
+    setResponseBody(node) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        this.#commit({ ...draft, res: { ...draft.res, body: node } });
+    }
+    addResponseBody() {
+        this.setResponseBody(createSdApiContractNode('object'));
+    }
+    removeResponseBody() {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        const { body: _dropped, ...res } = draft.res;
+        this.#commit({ ...draft, res });
+    }
+    setOutputSchema(node) {
+        const draft = this.#draft();
+        if (!draft)
+            return;
+        this.#commit({ ...draft, output: { schema: node } });
+    }
+    /**
+     * Adopts a response subtree as the output schema.
+     *
+     * The subtree is **deep-copied**, never referenced: editing the output afterwards must not reach
+     * back into the response declaration. An array or scalar target takes a whole-node `source`; an
+     * object target keeps its shape and each branch gets its own `source`, because an object with both
+     * a whole-node source and child mappings is invalid by design.
+     */
+    useResponseFieldAsOutput(value) {
+        const draft = this.#draft();
+        if (!draft || typeof value !== 'string' || !value)
+            return;
+        const segments = value.split('.');
+        const resolved = resolveSdApiContractResponsePath(draft.res, segments);
+        this.responseFieldToken.set(null);
+        if (!resolved)
+            return;
+        const schema = resolved.node
+            ? adoptResponseNode(resolved.node, segments)
+            : { type: resolved.type, source: formatSdApiContractExpression('res', segments) };
+        this.setOutputSchema(schema);
+    }
+    /**
+     * Adopts a contract pasted into the review editor.
+     *
+     * `<sd-code-editor language="json">` emits the PARSED value when the text is valid JSON and the
+     * raw STRING while it is still half-typed. A string therefore means "not parseable yet": keep the
+     * current draft and report it, because replacing a contract with a fragment of text would destroy
+     * the author's work on a keystroke.
+     *
+     * A parseable object is adopted VERBATIM — no field is added, removed or repaired. Whatever is
+     * wrong with it surfaces through `validateSdApiContract`, which is the whole point of pasting.
+     */
+    applyPastedJson(value) {
+        if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+            this.#pasteError.set({
+                code: 'contract.invalid',
+                severity: 'error',
+                path: '',
+                message: 'The pasted text is not valid JSON. The contract was left unchanged.',
+            });
+            return;
+        }
+        this.#pasteError.set(null);
+        this.#commit(cloneSdApiContract(value));
+    }
+    #commit(next) {
+        this.#lastEmitted = next;
+        this.#draft.set(next);
+        this.model.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdApiContractBuilder, isStandalone: true, selector: "sd-api-contract-builder", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", diagnosticsChange: "diagnosticsChange", validChange: "validChange" }, host: { properties: { "attr.data-autoId": "this.autoIdAttr" } }, viewQueries: [{ propertyName: "nodeDrawer", first: true, predicate: ["nodeDrawer"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _draft = draft();\n@let _readonly = readonly();\n@let _autoId = autoId();\n@let _diagnostics = diagnostics();\n@let _activeStep = activeStep();\n@let _requestSuggestions = requestSuggestions();\n@let _responseFieldOptions = responseFieldOptions();\n\n<!-- why: contract t\u1EEB ngo\u00E0i c\u00F3 th\u1EC3 thi\u1EBFu h\u1EB3n m\u1ED9t t\u1EA7ng. M\u1ECDi nh\u00E1nh \u0111\u1ECDc `_draft.<section>` \u0111\u1EC1u ph\u1EA3i\n     g\u00E1c \u2014 builder hi\u1EC3n th\u1ECB contract sai k\u00E8m ch\u1EA9n \u0111o\u00E1n ch\u1EE9 kh\u00F4ng t\u1EF1 v\u00E1, v\u00E0 c\u0169ng kh\u00F4ng \u0111\u01B0\u1EE3c n\u1ED5. -->\n@if (!_draft) {\n  <div class=\"sd-acb__empty\">\n    <sd-icon name=\"description\" size=\"lg\"></sd-icon>\n    <p>{{ 'core.component.api-contract-builder.empty.contract' | sdTranslate }}</p>\n    @if (!_readonly) {\n      <sd-button\n        type=\"fill\"\n        color=\"primary\"\n        size=\"sm\"\n        prefixIcon=\"add\"\n        [autoId]=\"_autoId ? _autoId + '-create' : undefined\"\n        [title]=\"'core.component.api-contract-builder.create-contract' | sdTranslate\"\n        (click)=\"createContract()\"></sd-button>\n    }\n  </div>\n} @else if (isView()) {\n  <section class=\"sd-acb__view\">\n    <dl class=\"sd-acb__summary\">\n      <dt>{{ 'core.component.api-contract-builder.contract.code' | sdTranslate }}</dt>\n      <dd data-field=\"code\">{{ _draft.code }}</dd>\n      <dt>{{ 'core.component.api-contract-builder.contract.name' | sdTranslate }}</dt>\n      <dd data-field=\"name\">{{ _draft.name }}</dd>\n      <dt>{{ 'core.component.api-contract-builder.request.method' | sdTranslate }}</dt>\n      <dd data-field=\"method\">{{ _draft.req?.method }}</dd>\n      <dt>{{ 'core.component.api-contract-builder.request.url' | sdTranslate }}</dt>\n      <dd data-field=\"url\">{{ _draft.req?.url }}</dd>\n    </dl>\n\n    <sd-api-contract-diagnostic-list\n      [diagnostics]=\"_diagnostics\"\n      [autoId]=\"_autoId ? _autoId + '-diagnostics' : undefined\"></sd-api-contract-diagnostic-list>\n\n    <sd-code-editor language=\"json\" [viewed]=\"true\" maxHeight=\"420px\" [model]=\"json()\"></sd-code-editor>\n  </section>\n} @else {\n  <nav class=\"sd-acb__steps\" [attr.aria-label]=\"'core.component.api-contract-builder.steps' | sdTranslate\">\n    @for (step of steps; track step.index) {\n      <button\n        type=\"button\"\n        class=\"sd-acb__step\"\n        [class.sd-acb__step--active]=\"_activeStep === step.index\"\n        [attr.aria-current]=\"_activeStep === step.index ? 'step' : null\"\n        [attr.data-autoId]=\"_autoId ? _autoId + '-step-' + step.key : null\"\n        (click)=\"goToStep(step.index)\">\n        <span class=\"sd-acb__step-index\">{{ step.index + 1 }}</span>\n        <span class=\"sd-acb__step-label\">{{ step.label }}</span>\n      </button>\n    }\n  </nav>\n\n  <div class=\"sd-acb__body\">\n    @switch (_activeStep) {\n      @case (0) {\n        <section class=\"sd-acb__section\" data-step=\"general\">\n          <div class=\"sd-acb__grid\">\n            <sd-input\n              size=\"sm\"\n              hideInlineError\n              [autoId]=\"_autoId ? _autoId + '-code' : undefined\"\n              [label]=\"'core.component.api-contract-builder.contract.code' | sdTranslate\"\n              [model]=\"_draft.code\"\n              [disabled]=\"_readonly\"\n              (sdChange)=\"setText('code', $event)\"></sd-input>\n            <sd-input\n              size=\"sm\"\n              hideInlineError\n              [autoId]=\"_autoId ? _autoId + '-name' : undefined\"\n              [label]=\"'core.component.api-contract-builder.contract.name' | sdTranslate\"\n              [model]=\"_draft.name\"\n              [disabled]=\"_readonly\"\n              (sdChange)=\"setText('name', $event)\"></sd-input>\n            <sd-input\n              size=\"sm\"\n              hideInlineError\n              [autoId]=\"_autoId ? _autoId + '-description' : undefined\"\n              [label]=\"'core.component.api-contract-builder.contract.description' | sdTranslate\"\n              [model]=\"_draft.description ?? ''\"\n              [disabled]=\"_readonly\"\n              (sdChange)=\"setText('description', $event)\"></sd-input>\n            <sd-input\n              size=\"sm\"\n              hideInlineError\n              [autoId]=\"_autoId ? _autoId + '-version' : undefined\"\n              [label]=\"'core.component.api-contract-builder.contract.version' | sdTranslate\"\n              [model]=\"contractVersion\"\n              [readonly]=\"true\"\n              [disabled]=\"true\"></sd-input>\n          </div>\n        </section>\n      }\n\n      @case (1) {\n        <section class=\"sd-acb__section\" data-step=\"input\">\n          @if (_draft.input?.schema; as _inputSchema) {\n            <sd-api-contract-node-editor\n              [node]=\"$any(_inputSchema)\"\n              basePath=\"input.schema\"\n              [disabled]=\"_readonly\"\n              [autoId]=\"_autoId ? _autoId + '-input' : undefined\"\n              (nodeChange)=\"setInputSchema($event)\"\n                (editRequest)=\"openNodeDrawer('input.schema', $event)\"></sd-api-contract-node-editor>\n          } @else {\n            <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.section' | sdTranslate }}</p>\n          }\n        </section>\n      }\n\n      @case (2) {\n        <section class=\"sd-acb__section\" data-step=\"request\">\n          @if (_draft.req; as _req) {\n            <div class=\"sd-acb__grid\">\n              <sd-select\n                size=\"sm\"\n                hideInlineError\n                [clearable]=\"false\"\n                [autoId]=\"_autoId ? _autoId + '-method' : undefined\"\n                [label]=\"'core.component.api-contract-builder.request.method' | sdTranslate\"\n                [items]=\"methodOptions\"\n                valueField=\"value\"\n                displayField=\"label\"\n                [model]=\"_req.method\"\n                [disabled]=\"_readonly\"\n                (sdChange)=\"setMethod($event)\"></sd-select>\n              <sd-input\n                class=\"sd-acb__url\"\n                size=\"sm\"\n                hideInlineError\n                [autoId]=\"_autoId ? _autoId + '-url' : undefined\"\n                [label]=\"'core.component.api-contract-builder.request.url' | sdTranslate\"\n                [placeholder]=\"urlPlaceholder\"\n                [model]=\"_req.url\"\n                [disabled]=\"_readonly\"\n                (sdChange)=\"setUrl($event)\"></sd-input>\n            </div>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.request.path' | sdTranslate }}</h4>\n            <sd-api-contract-record-editor\n              [record]=\"$any(_req.path)\"\n              basePath=\"req.path\"\n              [disabled]=\"_readonly\"\n              [emptyLabel]=\"'core.component.api-contract-builder.empty.path' | sdTranslate\"\n              [autoId]=\"_autoId ? _autoId + '-path' : undefined\"\n              (recordChange)=\"setRequestRecord('path', $event)\"\n              (editRequest)=\"openNodeDrawer('req.path', $event)\"></sd-api-contract-record-editor>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.request.query' | sdTranslate }}</h4>\n            <sd-api-contract-record-editor\n              [record]=\"$any(_req.query)\"\n              basePath=\"req.query\"\n              [disabled]=\"_readonly\"\n              [emptyLabel]=\"'core.component.api-contract-builder.empty.query' | sdTranslate\"\n              [autoId]=\"_autoId ? _autoId + '-query' : undefined\"\n              (recordChange)=\"setRequestRecord('query', $event)\"\n              (editRequest)=\"openNodeDrawer('req.query', $event)\"></sd-api-contract-record-editor>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.request.headers' | sdTranslate }}</h4>\n            <sd-api-contract-record-editor\n              [record]=\"$any(_req.headers)\"\n              basePath=\"req.headers\"\n              [disabled]=\"_readonly\"\n              [emptyLabel]=\"'core.component.api-contract-builder.empty.headers' | sdTranslate\"\n              [autoId]=\"_autoId ? _autoId + '-headers' : undefined\"\n              (recordChange)=\"setRequestRecord('headers', $event)\"\n              (editRequest)=\"openNodeDrawer('req.headers', $event)\"></sd-api-contract-record-editor>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.request.body' | sdTranslate }}</h4>\n            @if (_req.body) {\n              <sd-api-contract-node-editor\n                [node]=\"$any(_req.body)\"\n                basePath=\"req.body\"\n                [disabled]=\"_readonly\"\n                [autoId]=\"_autoId ? _autoId + '-body' : undefined\"\n                (nodeChange)=\"setRequestBody($event)\"\n                  (editRequest)=\"openNodeDrawer('req.body', $event)\"></sd-api-contract-node-editor>\n              @if (!_readonly) {\n                <sd-button\n                  type=\"text\"\n                  color=\"error\"\n                  size=\"sm\"\n                  prefixIcon=\"delete\"\n                  [autoId]=\"_autoId ? _autoId + '-remove-body' : undefined\"\n                  [title]=\"'core.component.api-contract-builder.request.remove-body' | sdTranslate\"\n                  (click)=\"removeRequestBody()\"></sd-button>\n              }\n            } @else {\n              <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.body' | sdTranslate }}</p>\n              @if (!_readonly) {\n                <sd-button\n                  type=\"light\"\n                  size=\"sm\"\n                  prefixIcon=\"add\"\n                  [autoId]=\"_autoId ? _autoId + '-add-body' : undefined\"\n                  [title]=\"'core.component.api-contract-builder.request.add-body' | sdTranslate\"\n                  (click)=\"addRequestBody()\"></sd-button>\n              }\n            }\n          } @else {\n            <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.section' | sdTranslate }}</p>\n          }\n        </section>\n      }\n\n      @case (3) {\n        <section class=\"sd-acb__section\" data-step=\"response\">\n          @if (_draft.res; as _res) {\n            <sd-input\n              class=\"sd-acb__status\"\n              size=\"sm\"\n              hideInlineError\n              [autoId]=\"_autoId ? _autoId + '-status' : undefined\"\n              [label]=\"'core.component.api-contract-builder.response.status' | sdTranslate\"\n              [helperText]=\"'core.component.api-contract-builder.response.status-hint' | sdTranslate\"\n              [model]=\"statusText()\"\n              [disabled]=\"_readonly\"\n              (sdChange)=\"setStatus($event)\"></sd-input>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.response.headers' | sdTranslate }}</h4>\n            <sd-api-contract-record-editor\n              [record]=\"$any(_res.headers)\"\n              basePath=\"res.headers\"\n              [disabled]=\"_readonly\"\n              [emptyLabel]=\"'core.component.api-contract-builder.empty.headers' | sdTranslate\"\n              [autoId]=\"_autoId ? _autoId + '-res-headers' : undefined\"\n              (recordChange)=\"setResponseHeaders($event)\"\n              (editRequest)=\"openNodeDrawer('res.headers', $event)\"></sd-api-contract-record-editor>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.response.body' | sdTranslate }}</h4>\n            @if (_res.body) {\n              <sd-api-contract-node-editor\n                [node]=\"$any(_res.body)\"\n                basePath=\"res.body\"\n                [disabled]=\"_readonly\"\n                [autoId]=\"_autoId ? _autoId + '-res-body' : undefined\"\n                (nodeChange)=\"setResponseBody($event)\"\n                  (editRequest)=\"openNodeDrawer('res.body', $event)\"></sd-api-contract-node-editor>\n              @if (!_readonly) {\n                <sd-button\n                  type=\"text\"\n                  color=\"error\"\n                  size=\"sm\"\n                  prefixIcon=\"delete\"\n                  [autoId]=\"_autoId ? _autoId + '-remove-res-body' : undefined\"\n                  [title]=\"'core.component.api-contract-builder.response.remove-body' | sdTranslate\"\n                  (click)=\"removeResponseBody()\"></sd-button>\n              }\n            } @else {\n              <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.body' | sdTranslate }}</p>\n              @if (!_readonly) {\n                <sd-button\n                  type=\"light\"\n                  size=\"sm\"\n                  prefixIcon=\"add\"\n                  [autoId]=\"_autoId ? _autoId + '-add-res-body' : undefined\"\n                  [title]=\"'core.component.api-contract-builder.response.add-body' | sdTranslate\"\n                  (click)=\"addResponseBody()\"></sd-button>\n              }\n            }\n          } @else {\n            <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.section' | sdTranslate }}</p>\n          }\n        </section>\n      }\n\n      @case (4) {\n        <section class=\"sd-acb__section\" data-step=\"output\">\n          @if (_draft.output?.schema; as _outputSchema) {\n            @if (!_readonly && _responseFieldOptions.length) {\n              <sd-select\n                class=\"sd-acb__adopt\"\n                size=\"sm\"\n                hideInlineError\n                [autoId]=\"_autoId ? _autoId + '-use-response' : undefined\"\n                [label]=\"'core.component.api-contract-builder.output.use-response' | sdTranslate\"\n                [items]=\"_responseFieldOptions\"\n                valueField=\"value\"\n                displayField=\"label\"\n                [(model)]=\"responseFieldToken\"\n                (sdChange)=\"useResponseFieldAsOutput($event)\"></sd-select>\n            }\n\n            <sd-api-contract-node-editor\n              [node]=\"$any(_outputSchema)\"\n              basePath=\"output.schema\"\n              [disabled]=\"_readonly\"\n              [autoId]=\"_autoId ? _autoId + '-output' : undefined\"\n              (nodeChange)=\"setOutputSchema($event)\"\n                (editRequest)=\"openNodeDrawer('output.schema', $event)\"></sd-api-contract-node-editor>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.output.fields' | sdTranslate }}</h4>\n            @let _outputFields = outputFields();\n            @if (_outputFields.length) {\n              <ul class=\"sd-acb__fields\" [attr.data-autoId]=\"_autoId ? _autoId + '-output-fields' : null\">\n                @for (field of _outputFields; track field.path) {\n                  <li class=\"sd-acb__field\">\n                    <code>{{ field.path }}</code>\n                    <span class=\"sd-acb__field-type\">{{ field.type }}</span>\n                    @if (field.required === true) {\n                      <span class=\"sd-acb__field-flag\">{{ 'core.component.api-contract-builder.field.required' | sdTranslate }}</span>\n                    }\n                  </li>\n                }\n              </ul>\n            } @else {\n              <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.output.no-fields' | sdTranslate }}</p>\n            }\n          } @else {\n            <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.section' | sdTranslate }}</p>\n          }\n        </section>\n      }\n\n      @default {\n        <section class=\"sd-acb__section\" data-step=\"review\">\n          <sd-api-contract-diagnostic-list\n            [diagnostics]=\"_diagnostics\"\n            [autoId]=\"_autoId ? _autoId + '-diagnostics' : undefined\"\n            (navigate)=\"goToDiagnostic($event)\"></sd-api-contract-diagnostic-list>\n\n          <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.review.json' | sdTranslate }}</h4>\n          <sd-code-editor\n            language=\"json\"\n            maxHeight=\"480px\"\n            [viewed]=\"disabled() || mode() === 'view'\"\n            [model]=\"json()\"\n            (modelChange)=\"applyPastedJson($event)\"></sd-code-editor>\n        </section>\n      }\n    }\n  </div>\n\n  <!-- why M\u1ED8T instance duy nh\u1EA5t, \u0111\u1EB7t ngo\u00E0i @switch: m\u1ED7i layer m\u1ED9t drawer s\u1EBD l\u00E0 m\u1ED7i layer m\u1ED9t draft, v\u00E0\n       \u0111\u1ED5i step gi\u1EEFa l\u00FAc \u0111ang s\u1EEDa s\u1EBD destroy drawer c\u00F9ng v\u1EDBi thay \u0111\u1ED5i ch\u01B0a l\u01B0u. -->\n  <sd-api-contract-node-drawer\n    #nodeDrawer\n    [layer]=\"drawerLayer()\"\n    [allowTransform]=\"drawerAllowsTransform()\"\n    [suggestions]=\"drawerSuggestions()\"\n    [autoId]=\"_autoId ? _autoId + '-node-drawer' : undefined\"\n    (nodeCommit)=\"applyNodeCommit($event)\"></sd-api-contract-node-drawer>\n}\n", styles: [":host{display:block;width:100%}.sd-acb__empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 16px;border:1px dashed var(--sd-border-color, #e6e6e6);border-radius:8px;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb__empty p{margin:0;font-size:13px}.sd-acb__steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--sd-border-color, #e6e6e6);padding-bottom:8px}.sd-acb__step{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--sd-text-secondary, #6b6b6b);font:inherit;font-size:13px;cursor:pointer}.sd-acb__step:hover,.sd-acb__step:focus-visible{background:var(--sd-surface-muted, #f3f5f8)}.sd-acb__step--active{border-color:var(--sd-primary, #005cbb);background:var(--sd-primary-light, #e5efff);color:var(--sd-primary-dark, #00419e);font-weight:600}.sd-acb__step-index{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--sd-surface-muted, #f3f5f8);font-size:11px;font-weight:700}.sd-acb__step--active .sd-acb__step-index{background:var(--sd-primary, #005cbb);color:#fff}.sd-acb__body{display:block}.sd-acb__section{display:flex;flex-direction:column;gap:12px}.sd-acb__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start}.sd-acb__url,.sd-acb__status{grid-column:span 2}.sd-acb__adopt{max-width:420px}.sd-acb__heading{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--sd-text, #1f2937)}.sd-acb__empty-text{margin:0;font-size:12px;font-style:italic;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb__fields{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.sd-acb__field{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--sd-border-color, #e6e6e6);border-radius:6px;background:var(--sd-surface-muted, #f3f5f8);font-size:12px}.sd-acb__field-type{color:var(--sd-primary, #005cbb);font-weight:600}.sd-acb__field-flag{color:var(--sd-text-secondary, #6b6b6b)}.sd-acb__view{display:flex;flex-direction:column;gap:16px}.sd-acb__summary{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 16px;margin:0;font-size:13px}.sd-acb__summary dt{color:var(--sd-text-secondary, #6b6b6b)}.sd-acb__summary dd{margin:0;font-weight:600;overflow-wrap:anywhere}@media(max-width:768px){.sd-acb__url,.sd-acb__status{grid-column:span 1}.sd-acb__step-label{display:none}}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdCodeEditor, selector: "sd-code-editor", inputs: ["model", "language", "maxHeight", "viewed"], outputs: ["modelChange"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "showSelectAll", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }, { kind: "component", type: SdApiContractDiagnosticList, selector: "sd-api-contract-diagnostic-list", inputs: ["diagnostics", "autoId"], outputs: ["navigate"] }, { kind: "component", type: SdApiContractNodeEditor, selector: "sd-api-contract-node-editor", inputs: ["node", "basePath", "disabled", "autoId"], outputs: ["nodeChange", "editRequest"] }, { kind: "component", type: SdApiContractNodeDrawer, selector: "sd-api-contract-node-drawer", inputs: ["layer", "allowTransform", "suggestions", "autoId"], outputs: ["nodeCommit"] }, { kind: "component", type: SdApiContractRecordEditor, selector: "sd-api-contract-record-editor", inputs: ["record", "basePath", "disabled", "emptyLabel", "autoId"], outputs: ["recordChange", "editRequest"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdApiContractBuilder, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-api-contract-builder', standalone: true, imports: [
+                        SdButton,
+                        SdCodeEditor,
+                        SdIcon,
+                        SdInput,
+                        SdSelect,
+                        SdTranslatePipe,
+                        SdApiContractDiagnosticList,
+                        SdApiContractNodeEditor,
+                        SdApiContractNodeDrawer,
+                        SdApiContractRecordEditor,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let _draft = draft();\n@let _readonly = readonly();\n@let _autoId = autoId();\n@let _diagnostics = diagnostics();\n@let _activeStep = activeStep();\n@let _requestSuggestions = requestSuggestions();\n@let _responseFieldOptions = responseFieldOptions();\n\n<!-- why: contract t\u1EEB ngo\u00E0i c\u00F3 th\u1EC3 thi\u1EBFu h\u1EB3n m\u1ED9t t\u1EA7ng. M\u1ECDi nh\u00E1nh \u0111\u1ECDc `_draft.<section>` \u0111\u1EC1u ph\u1EA3i\n     g\u00E1c \u2014 builder hi\u1EC3n th\u1ECB contract sai k\u00E8m ch\u1EA9n \u0111o\u00E1n ch\u1EE9 kh\u00F4ng t\u1EF1 v\u00E1, v\u00E0 c\u0169ng kh\u00F4ng \u0111\u01B0\u1EE3c n\u1ED5. -->\n@if (!_draft) {\n  <div class=\"sd-acb__empty\">\n    <sd-icon name=\"description\" size=\"lg\"></sd-icon>\n    <p>{{ 'core.component.api-contract-builder.empty.contract' | sdTranslate }}</p>\n    @if (!_readonly) {\n      <sd-button\n        type=\"fill\"\n        color=\"primary\"\n        size=\"sm\"\n        prefixIcon=\"add\"\n        [autoId]=\"_autoId ? _autoId + '-create' : undefined\"\n        [title]=\"'core.component.api-contract-builder.create-contract' | sdTranslate\"\n        (click)=\"createContract()\"></sd-button>\n    }\n  </div>\n} @else if (isView()) {\n  <section class=\"sd-acb__view\">\n    <dl class=\"sd-acb__summary\">\n      <dt>{{ 'core.component.api-contract-builder.contract.code' | sdTranslate }}</dt>\n      <dd data-field=\"code\">{{ _draft.code }}</dd>\n      <dt>{{ 'core.component.api-contract-builder.contract.name' | sdTranslate }}</dt>\n      <dd data-field=\"name\">{{ _draft.name }}</dd>\n      <dt>{{ 'core.component.api-contract-builder.request.method' | sdTranslate }}</dt>\n      <dd data-field=\"method\">{{ _draft.req?.method }}</dd>\n      <dt>{{ 'core.component.api-contract-builder.request.url' | sdTranslate }}</dt>\n      <dd data-field=\"url\">{{ _draft.req?.url }}</dd>\n    </dl>\n\n    <sd-api-contract-diagnostic-list\n      [diagnostics]=\"_diagnostics\"\n      [autoId]=\"_autoId ? _autoId + '-diagnostics' : undefined\"></sd-api-contract-diagnostic-list>\n\n    <sd-code-editor language=\"json\" [viewed]=\"true\" maxHeight=\"420px\" [model]=\"json()\"></sd-code-editor>\n  </section>\n} @else {\n  <nav class=\"sd-acb__steps\" [attr.aria-label]=\"'core.component.api-contract-builder.steps' | sdTranslate\">\n    @for (step of steps; track step.index) {\n      <button\n        type=\"button\"\n        class=\"sd-acb__step\"\n        [class.sd-acb__step--active]=\"_activeStep === step.index\"\n        [attr.aria-current]=\"_activeStep === step.index ? 'step' : null\"\n        [attr.data-autoId]=\"_autoId ? _autoId + '-step-' + step.key : null\"\n        (click)=\"goToStep(step.index)\">\n        <span class=\"sd-acb__step-index\">{{ step.index + 1 }}</span>\n        <span class=\"sd-acb__step-label\">{{ step.label }}</span>\n      </button>\n    }\n  </nav>\n\n  <div class=\"sd-acb__body\">\n    @switch (_activeStep) {\n      @case (0) {\n        <section class=\"sd-acb__section\" data-step=\"general\">\n          <div class=\"sd-acb__grid\">\n            <sd-input\n              size=\"sm\"\n              hideInlineError\n              [autoId]=\"_autoId ? _autoId + '-code' : undefined\"\n              [label]=\"'core.component.api-contract-builder.contract.code' | sdTranslate\"\n              [model]=\"_draft.code\"\n              [disabled]=\"_readonly\"\n              (sdChange)=\"setText('code', $event)\"></sd-input>\n            <sd-input\n              size=\"sm\"\n              hideInlineError\n              [autoId]=\"_autoId ? _autoId + '-name' : undefined\"\n              [label]=\"'core.component.api-contract-builder.contract.name' | sdTranslate\"\n              [model]=\"_draft.name\"\n              [disabled]=\"_readonly\"\n              (sdChange)=\"setText('name', $event)\"></sd-input>\n            <sd-input\n              size=\"sm\"\n              hideInlineError\n              [autoId]=\"_autoId ? _autoId + '-description' : undefined\"\n              [label]=\"'core.component.api-contract-builder.contract.description' | sdTranslate\"\n              [model]=\"_draft.description ?? ''\"\n              [disabled]=\"_readonly\"\n              (sdChange)=\"setText('description', $event)\"></sd-input>\n            <sd-input\n              size=\"sm\"\n              hideInlineError\n              [autoId]=\"_autoId ? _autoId + '-version' : undefined\"\n              [label]=\"'core.component.api-contract-builder.contract.version' | sdTranslate\"\n              [model]=\"contractVersion\"\n              [readonly]=\"true\"\n              [disabled]=\"true\"></sd-input>\n          </div>\n        </section>\n      }\n\n      @case (1) {\n        <section class=\"sd-acb__section\" data-step=\"input\">\n          @if (_draft.input?.schema; as _inputSchema) {\n            <sd-api-contract-node-editor\n              [node]=\"$any(_inputSchema)\"\n              basePath=\"input.schema\"\n              [disabled]=\"_readonly\"\n              [autoId]=\"_autoId ? _autoId + '-input' : undefined\"\n              (nodeChange)=\"setInputSchema($event)\"\n                (editRequest)=\"openNodeDrawer('input.schema', $event)\"></sd-api-contract-node-editor>\n          } @else {\n            <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.section' | sdTranslate }}</p>\n          }\n        </section>\n      }\n\n      @case (2) {\n        <section class=\"sd-acb__section\" data-step=\"request\">\n          @if (_draft.req; as _req) {\n            <div class=\"sd-acb__grid\">\n              <sd-select\n                size=\"sm\"\n                hideInlineError\n                [clearable]=\"false\"\n                [autoId]=\"_autoId ? _autoId + '-method' : undefined\"\n                [label]=\"'core.component.api-contract-builder.request.method' | sdTranslate\"\n                [items]=\"methodOptions\"\n                valueField=\"value\"\n                displayField=\"label\"\n                [model]=\"_req.method\"\n                [disabled]=\"_readonly\"\n                (sdChange)=\"setMethod($event)\"></sd-select>\n              <sd-input\n                class=\"sd-acb__url\"\n                size=\"sm\"\n                hideInlineError\n                [autoId]=\"_autoId ? _autoId + '-url' : undefined\"\n                [label]=\"'core.component.api-contract-builder.request.url' | sdTranslate\"\n                [placeholder]=\"urlPlaceholder\"\n                [model]=\"_req.url\"\n                [disabled]=\"_readonly\"\n                (sdChange)=\"setUrl($event)\"></sd-input>\n            </div>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.request.path' | sdTranslate }}</h4>\n            <sd-api-contract-record-editor\n              [record]=\"$any(_req.path)\"\n              basePath=\"req.path\"\n              [disabled]=\"_readonly\"\n              [emptyLabel]=\"'core.component.api-contract-builder.empty.path' | sdTranslate\"\n              [autoId]=\"_autoId ? _autoId + '-path' : undefined\"\n              (recordChange)=\"setRequestRecord('path', $event)\"\n              (editRequest)=\"openNodeDrawer('req.path', $event)\"></sd-api-contract-record-editor>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.request.query' | sdTranslate }}</h4>\n            <sd-api-contract-record-editor\n              [record]=\"$any(_req.query)\"\n              basePath=\"req.query\"\n              [disabled]=\"_readonly\"\n              [emptyLabel]=\"'core.component.api-contract-builder.empty.query' | sdTranslate\"\n              [autoId]=\"_autoId ? _autoId + '-query' : undefined\"\n              (recordChange)=\"setRequestRecord('query', $event)\"\n              (editRequest)=\"openNodeDrawer('req.query', $event)\"></sd-api-contract-record-editor>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.request.headers' | sdTranslate }}</h4>\n            <sd-api-contract-record-editor\n              [record]=\"$any(_req.headers)\"\n              basePath=\"req.headers\"\n              [disabled]=\"_readonly\"\n              [emptyLabel]=\"'core.component.api-contract-builder.empty.headers' | sdTranslate\"\n              [autoId]=\"_autoId ? _autoId + '-headers' : undefined\"\n              (recordChange)=\"setRequestRecord('headers', $event)\"\n              (editRequest)=\"openNodeDrawer('req.headers', $event)\"></sd-api-contract-record-editor>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.request.body' | sdTranslate }}</h4>\n            @if (_req.body) {\n              <sd-api-contract-node-editor\n                [node]=\"$any(_req.body)\"\n                basePath=\"req.body\"\n                [disabled]=\"_readonly\"\n                [autoId]=\"_autoId ? _autoId + '-body' : undefined\"\n                (nodeChange)=\"setRequestBody($event)\"\n                  (editRequest)=\"openNodeDrawer('req.body', $event)\"></sd-api-contract-node-editor>\n              @if (!_readonly) {\n                <sd-button\n                  type=\"text\"\n                  color=\"error\"\n                  size=\"sm\"\n                  prefixIcon=\"delete\"\n                  [autoId]=\"_autoId ? _autoId + '-remove-body' : undefined\"\n                  [title]=\"'core.component.api-contract-builder.request.remove-body' | sdTranslate\"\n                  (click)=\"removeRequestBody()\"></sd-button>\n              }\n            } @else {\n              <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.body' | sdTranslate }}</p>\n              @if (!_readonly) {\n                <sd-button\n                  type=\"light\"\n                  size=\"sm\"\n                  prefixIcon=\"add\"\n                  [autoId]=\"_autoId ? _autoId + '-add-body' : undefined\"\n                  [title]=\"'core.component.api-contract-builder.request.add-body' | sdTranslate\"\n                  (click)=\"addRequestBody()\"></sd-button>\n              }\n            }\n          } @else {\n            <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.section' | sdTranslate }}</p>\n          }\n        </section>\n      }\n\n      @case (3) {\n        <section class=\"sd-acb__section\" data-step=\"response\">\n          @if (_draft.res; as _res) {\n            <sd-input\n              class=\"sd-acb__status\"\n              size=\"sm\"\n              hideInlineError\n              [autoId]=\"_autoId ? _autoId + '-status' : undefined\"\n              [label]=\"'core.component.api-contract-builder.response.status' | sdTranslate\"\n              [helperText]=\"'core.component.api-contract-builder.response.status-hint' | sdTranslate\"\n              [model]=\"statusText()\"\n              [disabled]=\"_readonly\"\n              (sdChange)=\"setStatus($event)\"></sd-input>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.response.headers' | sdTranslate }}</h4>\n            <sd-api-contract-record-editor\n              [record]=\"$any(_res.headers)\"\n              basePath=\"res.headers\"\n              [disabled]=\"_readonly\"\n              [emptyLabel]=\"'core.component.api-contract-builder.empty.headers' | sdTranslate\"\n              [autoId]=\"_autoId ? _autoId + '-res-headers' : undefined\"\n              (recordChange)=\"setResponseHeaders($event)\"\n              (editRequest)=\"openNodeDrawer('res.headers', $event)\"></sd-api-contract-record-editor>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.response.body' | sdTranslate }}</h4>\n            @if (_res.body) {\n              <sd-api-contract-node-editor\n                [node]=\"$any(_res.body)\"\n                basePath=\"res.body\"\n                [disabled]=\"_readonly\"\n                [autoId]=\"_autoId ? _autoId + '-res-body' : undefined\"\n                (nodeChange)=\"setResponseBody($event)\"\n                  (editRequest)=\"openNodeDrawer('res.body', $event)\"></sd-api-contract-node-editor>\n              @if (!_readonly) {\n                <sd-button\n                  type=\"text\"\n                  color=\"error\"\n                  size=\"sm\"\n                  prefixIcon=\"delete\"\n                  [autoId]=\"_autoId ? _autoId + '-remove-res-body' : undefined\"\n                  [title]=\"'core.component.api-contract-builder.response.remove-body' | sdTranslate\"\n                  (click)=\"removeResponseBody()\"></sd-button>\n              }\n            } @else {\n              <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.body' | sdTranslate }}</p>\n              @if (!_readonly) {\n                <sd-button\n                  type=\"light\"\n                  size=\"sm\"\n                  prefixIcon=\"add\"\n                  [autoId]=\"_autoId ? _autoId + '-add-res-body' : undefined\"\n                  [title]=\"'core.component.api-contract-builder.response.add-body' | sdTranslate\"\n                  (click)=\"addResponseBody()\"></sd-button>\n              }\n            }\n          } @else {\n            <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.section' | sdTranslate }}</p>\n          }\n        </section>\n      }\n\n      @case (4) {\n        <section class=\"sd-acb__section\" data-step=\"output\">\n          @if (_draft.output?.schema; as _outputSchema) {\n            @if (!_readonly && _responseFieldOptions.length) {\n              <sd-select\n                class=\"sd-acb__adopt\"\n                size=\"sm\"\n                hideInlineError\n                [autoId]=\"_autoId ? _autoId + '-use-response' : undefined\"\n                [label]=\"'core.component.api-contract-builder.output.use-response' | sdTranslate\"\n                [items]=\"_responseFieldOptions\"\n                valueField=\"value\"\n                displayField=\"label\"\n                [(model)]=\"responseFieldToken\"\n                (sdChange)=\"useResponseFieldAsOutput($event)\"></sd-select>\n            }\n\n            <sd-api-contract-node-editor\n              [node]=\"$any(_outputSchema)\"\n              basePath=\"output.schema\"\n              [disabled]=\"_readonly\"\n              [autoId]=\"_autoId ? _autoId + '-output' : undefined\"\n              (nodeChange)=\"setOutputSchema($event)\"\n                (editRequest)=\"openNodeDrawer('output.schema', $event)\"></sd-api-contract-node-editor>\n\n            <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.output.fields' | sdTranslate }}</h4>\n            @let _outputFields = outputFields();\n            @if (_outputFields.length) {\n              <ul class=\"sd-acb__fields\" [attr.data-autoId]=\"_autoId ? _autoId + '-output-fields' : null\">\n                @for (field of _outputFields; track field.path) {\n                  <li class=\"sd-acb__field\">\n                    <code>{{ field.path }}</code>\n                    <span class=\"sd-acb__field-type\">{{ field.type }}</span>\n                    @if (field.required === true) {\n                      <span class=\"sd-acb__field-flag\">{{ 'core.component.api-contract-builder.field.required' | sdTranslate }}</span>\n                    }\n                  </li>\n                }\n              </ul>\n            } @else {\n              <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.output.no-fields' | sdTranslate }}</p>\n            }\n          } @else {\n            <p class=\"sd-acb__empty-text\">{{ 'core.component.api-contract-builder.empty.section' | sdTranslate }}</p>\n          }\n        </section>\n      }\n\n      @default {\n        <section class=\"sd-acb__section\" data-step=\"review\">\n          <sd-api-contract-diagnostic-list\n            [diagnostics]=\"_diagnostics\"\n            [autoId]=\"_autoId ? _autoId + '-diagnostics' : undefined\"\n            (navigate)=\"goToDiagnostic($event)\"></sd-api-contract-diagnostic-list>\n\n          <h4 class=\"sd-acb__heading\">{{ 'core.component.api-contract-builder.review.json' | sdTranslate }}</h4>\n          <sd-code-editor\n            language=\"json\"\n            maxHeight=\"480px\"\n            [viewed]=\"disabled() || mode() === 'view'\"\n            [model]=\"json()\"\n            (modelChange)=\"applyPastedJson($event)\"></sd-code-editor>\n        </section>\n      }\n    }\n  </div>\n\n  <!-- why M\u1ED8T instance duy nh\u1EA5t, \u0111\u1EB7t ngo\u00E0i @switch: m\u1ED7i layer m\u1ED9t drawer s\u1EBD l\u00E0 m\u1ED7i layer m\u1ED9t draft, v\u00E0\n       \u0111\u1ED5i step gi\u1EEFa l\u00FAc \u0111ang s\u1EEDa s\u1EBD destroy drawer c\u00F9ng v\u1EDBi thay \u0111\u1ED5i ch\u01B0a l\u01B0u. -->\n  <sd-api-contract-node-drawer\n    #nodeDrawer\n    [layer]=\"drawerLayer()\"\n    [allowTransform]=\"drawerAllowsTransform()\"\n    [suggestions]=\"drawerSuggestions()\"\n    [autoId]=\"_autoId ? _autoId + '-node-drawer' : undefined\"\n    (nodeCommit)=\"applyNodeCommit($event)\"></sd-api-contract-node-drawer>\n}\n", styles: [":host{display:block;width:100%}.sd-acb__empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 16px;border:1px dashed var(--sd-border-color, #e6e6e6);border-radius:8px;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb__empty p{margin:0;font-size:13px}.sd-acb__steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--sd-border-color, #e6e6e6);padding-bottom:8px}.sd-acb__step{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--sd-text-secondary, #6b6b6b);font:inherit;font-size:13px;cursor:pointer}.sd-acb__step:hover,.sd-acb__step:focus-visible{background:var(--sd-surface-muted, #f3f5f8)}.sd-acb__step--active{border-color:var(--sd-primary, #005cbb);background:var(--sd-primary-light, #e5efff);color:var(--sd-primary-dark, #00419e);font-weight:600}.sd-acb__step-index{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--sd-surface-muted, #f3f5f8);font-size:11px;font-weight:700}.sd-acb__step--active .sd-acb__step-index{background:var(--sd-primary, #005cbb);color:#fff}.sd-acb__body{display:block}.sd-acb__section{display:flex;flex-direction:column;gap:12px}.sd-acb__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start}.sd-acb__url,.sd-acb__status{grid-column:span 2}.sd-acb__adopt{max-width:420px}.sd-acb__heading{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--sd-text, #1f2937)}.sd-acb__empty-text{margin:0;font-size:12px;font-style:italic;color:var(--sd-text-secondary, #6b6b6b)}.sd-acb__fields{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.sd-acb__field{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--sd-border-color, #e6e6e6);border-radius:6px;background:var(--sd-surface-muted, #f3f5f8);font-size:12px}.sd-acb__field-type{color:var(--sd-primary, #005cbb);font-weight:600}.sd-acb__field-flag{color:var(--sd-text-secondary, #6b6b6b)}.sd-acb__view{display:flex;flex-direction:column;gap:16px}.sd-acb__summary{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 16px;margin:0;font-size:13px}.sd-acb__summary dt{color:var(--sd-text-secondary, #6b6b6b)}.sd-acb__summary dd{margin:0;font-weight:600;overflow-wrap:anywhere}@media(max-width:768px){.sd-acb__url,.sd-acb__status{grid-column:span 1}.sd-acb__step-label{display:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { autoIdAttr: [{
+                type: HostBinding,
+                args: ['attr.data-autoId']
+            }] } });
+/**
+ * Places a committed node back under a schema root's `properties`.
+ *
+ * why phân biệt add với overwrite: `addSdApiContractProperty` CỐ Ý không ghi đè key đã tồn tại (nó bảo
+ * caller phải tự dedupe). Sửa một field đang có thì phải đi qua `setSdApiContractNodeAt`, nếu không
+ * mọi lần Lưu trên field cũ sẽ im lặng không có tác dụng.
+ */
+function commitIntoProperties(root, pointer, previous, commit) {
+    // why đi qua pointer: danh sách nói cho ta biết nó đang đọc `properties` hay `items.properties`.
+    // Ghi thẳng vào root sẽ tạo ra một nhánh `properties` song song mà tầng `array` không bao giờ đọc.
+    const container = getSdApiContractNodeAt(root, pointer);
+    if (!container)
+        return root;
+    let next = container;
+    if (previous !== null && previous !== commit.name) {
+        next = renameSdApiContractProperty(next, previous, commit.name);
+    }
+    const exists = next.properties && Object.prototype.hasOwnProperty.call(next.properties, commit.name);
+    next = exists
+        ? setSdApiContractNodeAt(next, ['properties', commit.name], commit.node)
+        : addSdApiContractProperty(next, commit.name, commit.node);
+    return setSdApiContractNodeAt(root, pointer, next);
+}
+/** Places a committed node back into a keyed record, keeping the author's key order. */
+function commitIntoRecord(record, previous, commit) {
+    if (previous !== null && previous !== commit.name) {
+        const renamed = sdApiContractRecordRename(record, previous, commit.name);
+        return sdApiContractRecordSet(renamed, commit.name, commit.node);
+    }
+    return sdApiContractRecordSet(record, commit.name, commit.node);
+}
+/** Recursively rebuilds a response subtree as a mapped output subtree. */
+function adoptResponseNode(node, segments) {
+    if (node.type === 'object' && node.properties) {
+        const properties = {};
+        for (const key of Object.keys(node.properties)) {
+            properties[key] = adoptResponseNode(node.properties[key], [...segments, key]);
+        }
+        const next = { type: 'object', properties };
+        if (node.required !== undefined)
+            next.required = node.required;
+        if (node.label !== undefined)
+            next.label = node.label;
+        if (node.description !== undefined)
+            next.description = node.description;
+        return next;
+    }
+    return { ...cloneSdApiContractNode(node), source: formatSdApiContractExpression('res', segments) };
+}
+function stepForPath(path) {
+    if (path.startsWith('input.'))
+        return STEP_INPUT;
+    if (path.startsWith('req'))
+        return STEP_REQUEST;
+    if (path.startsWith('res'))
+        return STEP_RESPONSE;
+    if (path.startsWith('output'))
+        return STEP_OUTPUT;
+    return STEP_GENERAL;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SD_API_CONTRACT_ALLOWED_ROOTS, SD_API_CONTRACT_CONFIGURATION, SD_API_CONTRACT_DATA_TYPES, SD_API_CONTRACT_EMPTY_CONFIGURATION, SD_API_CONTRACT_EXPRESSION_ROOTS, SD_API_CONTRACT_HTTP_METHODS, SD_API_CONTRACT_SAMPLE_ENVIRONMENT, SD_API_CONTRACT_SCALAR_DATA_TYPES, SD_API_CONTRACT_VERSION, SdApiContractBuilder, addSdApiContractProperty, changeSdApiContractNodeType, cloneSdApiContract, cloneSdApiContractNode, createSdApiContractNode, extractSdApiContractReferences, formatSdApiContractExpression, formatSdApiContractPointer, getSdApiContractNodeAt, listSdApiContractResponseFields, listSdApiContractSchemaFields, parseSdApiContractTemplate, parseSdApiContractUrlPlaceholders, provideSdApiContract, removeSdApiContractProperty, renameSdApiContractProperty, resolveSdApiContractConfiguration, resolveSdApiContractResponsePath, resolveSdApiContractSchemaPath, sdApiContractCreateSample, sdApiContractInvalidSample, sdApiContractRecordRemove, sdApiContractRecordRename, sdApiContractRecordSet, sdApiContractSearchSample, sdIsApiContractDataType, sdIsApiContractHttpMethod, sdIsApiContractScalarDataType, sdIsApiContractTemporalDataType, serializeSdApiContract, setSdApiContractNodeAt, validateSdApiContract };
+//# sourceMappingURL=sdcorejs-angular-components-api-contract-builder.mjs.map