@stoplight/elements-core 7.6.4 → 7.7.0

package/index.js

@@ -6,11 +6,11 @@ var tslib = require('tslib');
 var React = require('react');
 var json = require('@stoplight/json');
 var isArray = require('lodash/isArray.js');
-var isObject = require('lodash/isObject.js');
 var isPlainObject = require('lodash/isPlainObject.js');
 var types = require('@stoplight/types');
 var yaml = require('@stoplight/yaml');
 var mosaic = require('@stoplight/mosaic');
+var isObject = require('lodash/isObject.js');
 var reactErrorBoundary = require('@stoplight/react-error-boundary');
 var markdownViewer = require('@stoplight/markdown-viewer');
 var cn = require('classnames');
@@ -39,9 +39,9 @@ var uniqBy = require('lodash/uniqBy.js');
 var formatXml = require('xml-formatter');
 var entries = require('lodash/entries.js');
 var keys = require('lodash/keys.js');
+var reactRouterDom = require('react-router-dom');
 var jsonSchemaViewer = require('@stoplight/json-schema-viewer');
 var sortBy = require('lodash/sortBy.js');
-var reactRouterDom = require('react-router-dom');
 var reactRouterHashLink = require('react-router-hash-link');
 var reactQuery = require('react-query');
 var $RefParser = require('@stoplight/json-schema-ref-parser');
@@ -72,8 +72,8 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
-var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
+var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var URI__default = /*#__PURE__*/_interopDefaultLegacy(URI);
 var HTTPSnippet__default = /*#__PURE__*/_interopDefaultLegacy(HTTPSnippet);
@@ -159,7 +159,7 @@ const isResolvedObjectProxy = (someObject) => {
 const getOriginalObject = (resolvedObject) => {
     return resolvedObject[originalObjectSymbol] || resolvedObject;
 };
-const isReference = (value) => isObject__default["default"](value) && typeof value['$ref'] === 'string';
+const isReference = json.hasRef;
 
 const InlineRefResolverContext = React__namespace.createContext(undefined);
 InlineRefResolverContext.displayName = 'InlineRefResolverContext';
@@ -179,6 +179,15 @@ const useResolvedObject = (currentObject) => {
     return React__namespace.useMemo(() => createResolvedObject(currentObject, { contextObject: document, resolver }), [currentObject, document, resolver]);
 };
 
+const DEFAULT_CONTEXT = {};
+const ElementsOptionsContext = React__namespace.createContext(DEFAULT_CONTEXT);
+const useOptionsCtx = () => {
+    return React__namespace.useContext(ElementsOptionsContext) || DEFAULT_CONTEXT;
+};
+function ElementsOptionsProvider({ children, nodeHasChanged }) {
+    return (React__namespace.createElement(ElementsOptionsContext.Provider, { value: Object.assign({}, DEFAULT_CONTEXT, { nodeHasChanged }) }, children));
+}
+
 function isSMDASTRoot(maybeAst) {
     return isObject__default["default"](maybeAst) && maybeAst['type'] === 'root' && mosaic.isArray(maybeAst['children']);
 }
@@ -212,6 +221,7 @@ const parserMap = {
     [types.NodeType.TableOfContents]: parseUnknown,
     [types.NodeType.SpectralRuleset]: parseUnknown,
     [types.NodeType.Styleguide]: parseUnknown,
+    [types.NodeType.Image]: parseUnknown,
     [types.NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
@@ -325,6 +335,11 @@ var faEye = {
   iconName: 'eye',
   icon: [576, 512, [128065], "f06e", "M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"]
 };
+var faImage = {
+  prefix: 'fas',
+  iconName: 'image',
+  icon: [512, 512, [], "f03e", "M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z"]
+};
 var faServer = {
   prefix: 'fas',
   iconName: 'server',
@@ -342,6 +357,7 @@ const NodeTypeColors = {
     table_of_contents: '',
     spectral_ruleset: '',
     styleguide: '',
+    image: '',
 };
 const NodeTypePrettyName = {
     http_operation: 'Endpoint',
@@ -354,6 +370,7 @@ const NodeTypePrettyName = {
     table_of_contents: '',
     spectral_ruleset: '',
     styleguide: '',
+    image: '',
 };
 const NodeTypeIconDefs = {
     http_operation: faCrosshairs,
@@ -366,6 +383,7 @@ const NodeTypeIconDefs = {
     table_of_contents: faQuestionCircle,
     spectral_ruleset: faQuestionCircle,
     styleguide: faQuestionCircle,
+    image: faImage,
 };
 const HttpMethodColors = {
     get: 'success',
@@ -464,6 +482,21 @@ function createNamedContext(name, defaultValue) {
     return context;
 }
 
+const ALPHANUMERIC = /[^A-Za-z0-9]+$/;
+function useChosenServerUrl(chosenServerUrl) {
+    const match = ALPHANUMERIC.exec(chosenServerUrl);
+    if (match === null) {
+        return {
+            leading: chosenServerUrl,
+            trailing: null,
+        };
+    }
+    return {
+        leading: chosenServerUrl.substring(0, match.index),
+        trailing: chosenServerUrl.substring(match.index),
+    };
+}
+
 const chosenServerAtom = jotai.atom(undefined);
 
 function isValidServer(server) {
@@ -478,6 +511,7 @@ const getServersToDisplay = (originalServers, mockUrl) => {
         .filter(isValidServer);
     if (mockUrl) {
         servers.push({
+            id: 'mock',
             description: 'Mock Server',
             url: mockUrl,
         });
@@ -667,15 +701,12 @@ const requestSampleConfigs = {
         mosaicCodeViewerLanguage: 'php',
         httpSnippetLanguage: 'php',
         libraries: {
-            'pecl/http 1': {
-                httpSnippetLibrary: 'http1',
-            },
-            'pecl/http 2': {
-                httpSnippetLibrary: 'http2',
-            },
             cURL: {
                 httpSnippetLibrary: 'curl',
             },
+            guzzle: {
+                httpSnippetLibrary: 'guzzle',
+            },
         },
     },
     Powershell: {
@@ -1038,9 +1069,12 @@ function parameterSupportsFileUpload(parameter) {
         (((_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.contentEncoding) === 'base64' ||
             ((_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.contentMediaType) === 'application/octet-stream'));
 }
+function stringifyValue(value) {
+    return typeof value === 'object' ? JSON.stringify(value) : escapeQuotes(String(value));
+}
 function exampleValue(example) {
     const value = 'value' in example ? example.value : example.externalValue;
-    return escapeQuotes(String(value));
+    return stringifyValue(value);
 }
 function escapeQuotes(value) {
     return value.replace(/"/g, '\\"');
@@ -1061,7 +1095,7 @@ const getValueForParameter = (parameter) => {
     var _a, _b, _c;
     const defaultValue = retrieveDefaultFromSchema(parameter);
     if (typeof defaultValue !== 'undefined') {
-        return { value: String(defaultValue), isDefault: true };
+        return { value: stringifyValue(defaultValue), isDefault: true };
     }
     const examples = (_a = parameter.examples) !== null && _a !== void 0 ? _a : [];
     if (examples.length > 0) {
@@ -1069,7 +1103,7 @@ const getValueForParameter = (parameter) => {
     }
     const enums = (_c = (_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.enum) !== null && _c !== void 0 ? _c : [];
     if (enums.length > 0) {
-        return { value: String(enums[0]) };
+        return { value: stringifyValue(enums[0]) };
     }
     return { value: '' };
 };
@@ -1354,13 +1388,77 @@ const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, }) =>
     }
     return serverUrl;
 };
+const getQueryParams = ({ httpOperation, parameterValues, }) => {
+    var _a;
+    const query = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.query;
+    if (!query)
+        return [];
+    return query.reduce((acc, param) => {
+        var _a, _b, _c, _d, _e;
+        const value = (_a = parameterValues[param.name]) !== null && _a !== void 0 ? _a : '';
+        if (value.length === 0)
+            return acc;
+        const explode = (_b = param.explode) !== null && _b !== void 0 ? _b : true;
+        if (((_c = param.schema) === null || _c === void 0 ? void 0 : _c.type) === 'object' && param.style === 'form' && value) {
+            let nested;
+            try {
+                nested = JSON.parse(value);
+                if (!(typeof nested === 'object' && nested !== null))
+                    throw Error();
+            }
+            catch (e) {
+                throw new Error(`Cannot use param value "${value}". JSON object expected.`);
+            }
+            if (explode) {
+                acc.push(...Object.entries(nested).map(([name, value]) => ({ name, value: value.toString() })));
+            }
+            else {
+                acc.push({
+                    name: param.name,
+                    value: Object.entries(nested)
+                        .map(entry => entry.join(','))
+                        .join(','),
+                });
+            }
+        }
+        else if (((_d = param.schema) === null || _d === void 0 ? void 0 : _d.type) === 'array' && value) {
+            let nested;
+            try {
+                nested = JSON.parse(value);
+                if (!Array.isArray(nested))
+                    throw Error();
+            }
+            catch (e) {
+                throw new Error(`Cannot use param value "${value}". JSON array expected.`);
+            }
+            if (explode) {
+                acc.push(...nested.map(value => ({ name: param.name, value: value.toString() })));
+            }
+            else {
+                const delimiter = {
+                    [types.HttpParamStyles.Form]: ',',
+                    [types.HttpParamStyles.SpaceDelimited]: ' ',
+                    [types.HttpParamStyles.PipeDelimited]: '|',
+                };
+                acc.push({
+                    name: param.name,
+                    value: nested.join((_e = delimiter[param.style]) !== null && _e !== void 0 ? _e : delimiter[types.HttpParamStyles.Form]),
+                });
+            }
+        }
+        else {
+            acc.push({ name: param.name, value });
+        }
+        return acc;
+    }, []);
+};
 function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c;
     return tslib.__awaiter(this, void 0, void 0, function* () {
         const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase());
-        const queryParams = (_c = (_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.map(param => { var _a; return ({ name: param.name, value: (_a = parameterValues[param.name]) !== null && _a !== void 0 ? _a : '' }); }).filter(({ value }) => value.length > 0)) !== null && _c !== void 0 ? _c : [];
-        const rawHeaders = filterOutAuthorizationParams((_e = (_d = httpOperation.request) === null || _d === void 0 ? void 0 : _d.headers) !== null && _e !== void 0 ? _e : [], httpOperation.security)
+        const queryParams = getQueryParams({ httpOperation, parameterValues });
+        const rawHeaders = filterOutAuthorizationParams((_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.headers) !== null && _b !== void 0 ? _b : [], httpOperation.security)
             .map(header => { var _a; return ({ name: header.name, value: (_a = parameterValues[header.name]) !== null && _a !== void 0 ? _a : '' }); })
             .filter(({ value }) => value.length > 0);
         const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
@@ -1369,7 +1467,7 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
         urlObject.search = new URLSearchParams(queryParamsWithAuth.map(nameAndValueObjectToPair)).toString();
         const body = typeof bodyInput === 'object' ? yield createRequestBody(mediaTypeContent, bodyInput) : bodyInput;
         const headers = Object.assign(Object.assign(Object.assign({}, ((mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== 'multipart/form-data' && {
-            'Content-Type': (_f = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _f !== void 0 ? _f : 'application/json',
+            'Content-Type': (_c = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _c !== void 0 ? _c : 'application/json',
         })), Object.fromEntries(headersWithAuth.map(nameAndValueObjectToPair))), mockData === null || mockData === void 0 ? void 0 : mockData.header);
         return [
             urlObject.href,
@@ -1429,13 +1527,13 @@ const runAuthRequestEhancements = (auth, queryParams, headers) => {
     return [newQueryParams, newHeaders];
 };
 function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d;
     return tslib.__awaiter(this, void 0, void 0, function* () {
         const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
         const mimeType = (_a = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _a !== void 0 ? _a : 'application/json';
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase());
-        const queryParams = (_d = (_c = (_b = httpOperation.request) === null || _b === void 0 ? void 0 : _b.query) === null || _c === void 0 ? void 0 : _c.map(param => { var _a; return ({ name: param.name, value: (_a = parameterValues[param.name]) !== null && _a !== void 0 ? _a : '' }); }).filter(({ value }) => value.length > 0)) !== null && _d !== void 0 ? _d : [];
-        const headerParams = (_g = (_f = (_e = httpOperation.request) === null || _e === void 0 ? void 0 : _e.headers) === null || _f === void 0 ? void 0 : _f.map(header => { var _a; return ({ name: header.name, value: (_a = parameterValues[header.name]) !== null && _a !== void 0 ? _a : '' }); })) !== null && _g !== void 0 ? _g : [];
+        const queryParams = getQueryParams({ httpOperation, parameterValues });
+        const headerParams = (_d = (_c = (_b = httpOperation.request) === null || _b === void 0 ? void 0 : _b.headers) === null || _c === void 0 ? void 0 : _c.map(header => { var _a; return ({ name: header.name, value: (_a = parameterValues[header.name]) !== null && _a !== void 0 ? _a : '' }); })) !== null && _d !== void 0 ? _d : [];
         if (mockData === null || mockData === void 0 ? void 0 : mockData.header) {
             headerParams.push({ name: 'Prefer', value: mockData.header.Prefer });
         }
@@ -2044,9 +2142,20 @@ ${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
     return description;
 }
 
+const RouterTypeContext = React__namespace.createContext('history');
+
+const LinkHeading = React__namespace.memo(function LinkHeading(_a) {
+    var { id: _id } = _a, props = tslib.__rest(_a, ["id"]);
+    const { pathname } = reactRouterDom.useLocation();
+    const routerKind = React__namespace.useContext(RouterTypeContext);
+    const route = pathname.split('#')[0];
+    const id = routerKind === 'hash' ? `${route}#${_id}` : _id;
+    return React__namespace.createElement(mosaic.LinkHeading, Object.assign({ id: id }, props));
+});
+
 const SectionTitle = ({ title, id, size = 2, children }) => {
     return (React__namespace.createElement(mosaic.HStack, { spacing: 6 },
-        React__namespace.createElement(mosaic.Box, { as: mosaic.LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
+        React__namespace.createElement(mosaic.Box, { as: LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
         children));
 };
 const SectionSubtitle = props => {
@@ -2069,6 +2178,7 @@ const Body = ({ body, onChange }) => {
     var _a;
     const refResolver = useInlineRefResolver();
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
+    const { nodeHasChanged } = useOptionsCtx();
     React__namespace.useEffect(() => {
         onChange(chosenContent);
     }, [chosenContent]);
@@ -2076,11 +2186,14 @@ const Body = ({ body, onChange }) => {
         return null;
     const { contents = [], description } = body;
     const schema = (_a = contents[chosenContent]) === null || _a === void 0 ? void 0 : _a.schema;
+    const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: body.id, attr: 'description' });
     return (React__namespace.createElement(mosaic.VStack, { spacing: 6 },
         React__namespace.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
             React__namespace.createElement(mosaic.Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
-        description && React__namespace.createElement(MarkdownViewer, { markdown: description }),
-        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true }))));
+        description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
+            React__namespace.createElement(MarkdownViewer, { markdown: description }),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
+        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2104,14 +2217,16 @@ const defaultStyle = {
     cookie: types.HttpParamStyles.Form,
 };
 const Parameters = ({ parameters, parameterType }) => {
+    const { nodeHasChanged } = useOptionsCtx();
+    const refResolver = useInlineRefResolver();
     const schema = React__namespace.useMemo(() => httpOperationParamsToSchema({ parameters, parameterType }), [parameters, parameterType]);
     if (!schema)
         return null;
-    return React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: schema, disableCrumbs: true });
+    return React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: schema, disableCrumbs: true, nodeHasChanged: nodeHasChanged });
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
-    var _a;
+    var _a, _b, _c;
     if (!parameters || !parameters.length)
         return null;
     const schema = {
@@ -2120,8 +2235,6 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
     };
     const sortedParams = sortBy__default["default"](parameters, ['required', 'name']);
     for (const p of sortedParams) {
-        if (!p.schema)
-            continue;
         const { name, description, required, deprecated, examples, style } = p;
         const paramExamples = (examples === null || examples === void 0 ? void 0 : examples.map(example => {
             if (isNodeExample(example)) {
@@ -2131,10 +2244,10 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
         })) || [];
         const schemaExamples = (_a = p.schema) === null || _a === void 0 ? void 0 : _a.examples;
         const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
-        const paramDescription = description || p.schema.description;
+        const paramDescription = description || ((_b = p.schema) === null || _b === void 0 ? void 0 : _b.description);
         const paramDeprecated = deprecated || p.schema.deprecated;
         const paramStyle = style && defaultStyle[parameterType] !== style ? readableStyles[style] || style : undefined;
-        schema.properties[p.name] = Object.assign(Object.assign({}, p.schema), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle });
+        schema.properties[p.name] = Object.assign(Object.assign({}, (p.schema || {})), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle, 'x-stoplight': Object.assign(Object.assign({}, (((_c = p.schema) === null || _c === void 0 ? void 0 : _c['x-stoplight']) || {})), { id: p.id }) });
         if (required) {
             schema.required.push(name);
         }
@@ -2157,7 +2270,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
         return null;
     return (React__namespace.createElement(mosaic.VStack, { spacing: 8 },
         React__namespace.createElement(SectionTitle, { title: "Request" }),
-        securitySchemes.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 3 }, securitySchemes.map((scheme, i) => (React__namespace.createElement(SecurityPanel, { key: i, scheme: scheme, includeKey: shouldIncludeKey(securitySchemes, scheme.type) }))))),
+        React__namespace.createElement(SecuritySchemes$1, { schemes: securitySchemes }),
         pathParams.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
             React__namespace.createElement(SectionSubtitle, { title: "Path Parameters" }),
             React__namespace.createElement(Parameters, { parameterType: "path", parameters: pathParams }))),
@@ -2178,6 +2291,15 @@ const SecurityPanel = ({ scheme, includeKey }) => {
     const [expandedState, setExpanded] = jotai.useAtom(schemeExpandedState);
     return (React__namespace.createElement(SubSectionPanel, { title: `Security: ${getReadableSecurityName(scheme, includeKey)}`, defaultIsOpen: !!expandedState[scheme.key], onChange: isOpen => setExpanded(Object.assign(Object.assign({}, expandedState), { [scheme.key]: isOpen })) },
         React__namespace.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) })));
+};
+const SecuritySchemes$1 = ({ schemes }) => {
+    const { nodeHasChanged } = useOptionsCtx();
+    if (!schemes.length) {
+        return null;
+    }
+    return (React__namespace.createElement(mosaic.VStack, { spacing: 3 }, schemes.map((scheme, i) => (React__namespace.createElement(mosaic.Box, { pos: "relative", key: i },
+        React__namespace.createElement(SecurityPanel, { scheme: scheme, includeKey: shouldIncludeKey(schemes, scheme.type) }),
+        React__namespace.createElement(mosaic.NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) }))))));
 };
 
 const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }) => {
@@ -2200,13 +2322,17 @@ const Response = ({ response, onMediaTypeChange }) => {
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
     const refResolver = useInlineRefResolver();
+    const { nodeHasChanged } = useOptionsCtx();
     const responseContent = contents[chosenContent];
     const schema = responseContent === null || responseContent === void 0 ? void 0 : responseContent.schema;
     React__namespace.useEffect(() => {
         responseContent && onMediaTypeChange(responseContent.mediaType);
     }, [responseContent]);
+    const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: response.id, attr: 'description' });
     return (React__namespace.createElement(mosaic.VStack, { spacing: 8, pt: 8 },
-        description && React__namespace.createElement(MarkdownViewer, { markdown: description }),
+        description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
+            React__namespace.createElement(MarkdownViewer, { markdown: description }),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
         headers.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
             React__namespace.createElement(SectionSubtitle, { title: "Headers", id: "response-headers" }),
             React__namespace.createElement(Parameters, { parameterType: "header", parameters: headers }))),
@@ -2214,7 +2340,7 @@ const Response = ({ response, onMediaTypeChange }) => {
             React__namespace.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
                     React__namespace.createElement(mosaic.Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
+            schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2232,6 +2358,7 @@ const codeToIntentVal = (code) => {
 };
 
 const HttpOperationComponent = React__namespace.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
+    const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
     const mocking = React__namespace.useContext(MockingContext);
     const isDeprecated = !!data.deprecated;
@@ -2241,15 +2368,12 @@ const HttpOperationComponent = React__namespace.memo(({ className, data: unresol
     const [requestBodyIndex, setTextRequestBodyIndex] = React__namespace.useState(0);
     const prettyName = (data.summary || data.iid || '').trim();
     const hasBadges = isDeprecated || isInternal;
-    const header = (!(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) || hasBadges) && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
-        React__namespace.createElement(mosaic.HStack, { spacing: 5 },
-            !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && prettyName ? (React__namespace.createElement(mosaic.Heading, { size: 1, fontWeight: "semibold" }, prettyName)) : null,
-            React__namespace.createElement(mosaic.HStack, { spacing: 2 },
-                isDeprecated && React__namespace.createElement(DeprecatedBadge, null),
-                isInternal && React__namespace.createElement(InternalBadge, { isHttpService: true }))),
-        React__namespace.createElement(MethodPath, { method: data.method, path: data.path })));
+    const header = (React__namespace.createElement(OperationHeader, { id: data.id, method: data.method, path: data.path, noHeading: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading, hasBadges: hasBadges, name: prettyName, isDeprecated: isDeprecated, isInternal: isInternal }));
+    const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
     const description = (React__namespace.createElement(mosaic.VStack, { spacing: 10 },
-        data.description && React__namespace.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
+        data.description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
+            React__namespace.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
         React__namespace.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
         data.responses && (React__namespace.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode }))));
     const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React__namespace.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
@@ -2271,12 +2395,34 @@ function MethodPath({ method, path }) {
 function MethodPathInner({ method, path, chosenServerUrl }) {
     const isDark = mosaic.useThemeIsDark();
     const fullUrl = `${chosenServerUrl}${path}`;
-    const pathElem = (React__namespace.createElement(mosaic.Flex, { overflowX: "hidden" },
-        chosenServerUrl ? (React__namespace.createElement(mosaic.Box, { dir: "rtl", color: "muted", fontSize: "lg", textOverflow: "truncate", overflowX: "hidden" }, chosenServerUrl)) : null,
-        React__namespace.createElement(mosaic.Box, { fontSize: "lg", fontWeight: "semibold", flex: 1 }, path)));
+    const { leading, trailing } = useChosenServerUrl(chosenServerUrl);
+    const pathElem = (React__namespace.createElement(mosaic.Flex, { overflowX: "hidden", fontSize: "lg", userSelect: "all" },
+        React__namespace.createElement(mosaic.Box, { dir: "rtl", color: "muted", textOverflow: "truncate", overflowX: "hidden" },
+            leading,
+            trailing !== null && (React__namespace.createElement(mosaic.Box, { as: "span", dir: "ltr", style: { unicodeBidi: 'bidi-override' } }, trailing))),
+        React__namespace.createElement(mosaic.Box, { fontWeight: "semibold", flex: 1 }, path)));
     return (React__namespace.createElement(mosaic.HStack, { spacing: 3, pl: 2.5, pr: 4, py: 2, bg: "canvas-50", rounded: "lg", fontFamily: "mono", display: "inline-flex", maxW: "full", title: fullUrl },
         React__namespace.createElement(mosaic.Box, { py: 1, px: 2.5, rounded: "lg", bg: !isDark ? HttpMethodColors[method] : 'canvas-100', color: !isDark ? 'on-primary' : 'body', fontSize: "lg", fontWeight: "semibold", textTransform: "uppercase" }, method),
         pathElem));
+}
+function OperationHeader({ id, noHeading, hasBadges, name, isDeprecated, isInternal, method, path, }) {
+    const { nodeHasChanged } = useOptionsCtx();
+    if (noHeading && !hasBadges) {
+        return null;
+    }
+    const lineOneChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: id, attr: ['iid', 'summary', 'deprecated', 'internal'] });
+    const lineTwoChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: id, attr: ['method', 'path'] });
+    return (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
+        React__namespace.createElement(mosaic.Box, { pos: "relative" },
+            React__namespace.createElement(mosaic.HStack, { spacing: 5 },
+                !noHeading && name ? (React__namespace.createElement(mosaic.Heading, { size: 1, fontWeight: "semibold" }, name)) : null,
+                React__namespace.createElement(mosaic.HStack, { spacing: 2 },
+                    isDeprecated && React__namespace.createElement(DeprecatedBadge, null),
+                    isInternal && React__namespace.createElement(InternalBadge, { isHttpService: true }))),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: lineOneChanged })),
+        React__namespace.createElement(mosaic.Box, { pos: "relative" },
+            React__namespace.createElement(MethodPath, { method: method, path: path }),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: lineTwoChanged }))));
 }
 
 const PoweredByLink = ({ source, pathname, packageType, layout = 'sidebar' }) => {
@@ -2287,7 +2433,9 @@ const PoweredByLink = ({ source, pathname, packageType, layout = 'sidebar' }) =>
             React__namespace.createElement("strong", null, "Stoplight"))));
 };
 
-const AdditionalInfo = ({ termsOfService, contact, license }) => {
+const AdditionalInfo = ({ id, termsOfService, contact, license }) => {
+    const { nodeHasChanged } = useOptionsCtx();
+    const hasChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: id, attr: ['termsOfService', 'contact', 'license'] });
     const contactLink = (contact === null || contact === void 0 ? void 0 : contact.name) && (contact === null || contact === void 0 ? void 0 : contact.url)
         ? `[Contact ${contact.name}](${contact.url})`
         : (contact === null || contact === void 0 ? void 0 : contact.email)
@@ -2296,12 +2444,13 @@ const AdditionalInfo = ({ termsOfService, contact, license }) => {
     const licenseUrl = (license === null || license === void 0 ? void 0 : license.url) || `https://spdx.org/licenses/${license === null || license === void 0 ? void 0 : license.identifier}.html`;
     const licenseLink = (license === null || license === void 0 ? void 0 : license.name) && licenseUrl ? `[${license.name} License](${licenseUrl})` : '';
     const tosLink = termsOfService ? `[Terms of Service](${termsOfService})` : '';
-    return contactLink || licenseLink || tosLink ? (React__default["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
+    return contactLink || licenseLink || tosLink ? (React__default["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: false, pos: "relative" },
         React__default["default"].createElement(mosaic.Panel.Titlebar, { bg: "canvas-300" },
             React__default["default"].createElement("span", { role: "heading" }, "Additional Information")),
         React__default["default"].createElement(mosaic.Panel.Content, { p: 0 },
             React__default["default"].createElement(mosaic.Panel.Content, null,
-                React__default["default"].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${contactLink}\n \n${licenseLink}\n \n ${tosLink}` }))))) : null;
+                React__default["default"].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${contactLink}\n \n${licenseLink}\n \n ${tosLink}` }))),
+        React__default["default"].createElement(mosaic.NodeAnnotation, { change: hasChanged }))) : null;
 };
 
 const ExportButton = ({ original, bundled }) => {
@@ -2323,11 +2472,14 @@ const SecuritySchemes = ({ schemes, defaultScheme, defaultCollapsed = false, })
         React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, sortBy__default["default"](schemes, 'type').map((scheme, i) => (React__default["default"].createElement(SecurityScheme, { key: i, scheme: scheme, defaultIsOpen: defaultScheme ? scheme.key === defaultScheme : i === 0, isCollapsible: schemes.length > 1, showSchemeKey: shouldIncludeKey(schemes, scheme.type) }))))));
 };
 const SecurityScheme = ({ scheme, defaultIsOpen, isCollapsible, showSchemeKey }) => {
-    return (React__default["default"].createElement(mosaic.Panel, { defaultIsOpen: defaultIsOpen, isCollapsible: isCollapsible },
+    const { nodeHasChanged } = useOptionsCtx();
+    const hasChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id });
+    return (React__default["default"].createElement(mosaic.Panel, { defaultIsOpen: defaultIsOpen, isCollapsible: isCollapsible, pos: "relative" },
         React__default["default"].createElement(mosaic.Panel.Titlebar, null,
             React__default["default"].createElement(mosaic.Box, { as: "span", role: "heading" }, getReadableSecurityName(scheme, showSchemeKey))),
         React__default["default"].createElement(mosaic.Panel.Content, null,
-            React__default["default"].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) }))));
+            React__default["default"].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) })),
+        React__default["default"].createElement(mosaic.NodeAnnotation, { change: hasChanged })));
 };
 
 const ServerInfo = ({ servers, mockUrl }) => {
@@ -2341,13 +2493,14 @@ const ServerInfo = ({ servers, mockUrl }) => {
     return (React__namespace.createElement(mosaic.InvertTheme, null,
         React__namespace.createElement(mosaic.Panel, { rounded: true, isCollapsible: false, className: "BaseURLContent", w: "full" },
             React__namespace.createElement(mosaic.Panel.Titlebar, { whitespace: "nowrap" }, "API Base URL"),
-            React__namespace.createElement(mosaic.Box, { overflowX: "auto" },
-                React__namespace.createElement(mosaic.Panel.Content, { w: "full", className: "sl-flex sl-flex-col" },
-                    React__namespace.createElement(mosaic.VStack, { spacing: 1, divider: true }, serversToDisplay.map((server, index) => (React__namespace.createElement(ServerUrl, Object.assign({}, server, { key: index }))))))))));
+            React__namespace.createElement(mosaic.Panel.Content, { w: "full", className: "sl-flex sl-flex-col" },
+                React__namespace.createElement(mosaic.VStack, { spacing: 1, divider: true }, serversToDisplay.map((server, index) => (React__namespace.createElement(ServerUrl, Object.assign({}, server, { key: index })))))))));
 };
-const ServerUrl = ({ description, url, marginBottom = true }) => {
+const ServerUrl = ({ id, description, url }) => {
+    const { nodeHasChanged } = useOptionsCtx();
     const { onCopy, hasCopied } = mosaic.useClipboard(url);
-    return (React__namespace.createElement(mosaic.Box, { whitespace: "nowrap" },
+    const hasChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: id });
+    return (React__namespace.createElement(mosaic.Box, { whitespace: "nowrap", pos: "relative" },
         React__namespace.createElement(mosaic.Text, { pr: 2, fontWeight: "bold" },
             description,
             ":"),
@@ -2357,26 +2510,37 @@ const ServerUrl = ({ description, url, marginBottom = true }) => {
                 React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
             hasCopied && (React__namespace.createElement(mosaic.Box, { p: 1 },
                 "Copied Server URL ",
-                React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: ['fas', 'check'] }))))));
+                React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: ['fas', 'check'] })))),
+        React__namespace.createElement(mosaic.NodeAnnotation, { change: hasChanged, additionalLeftOffset: 16 })));
 };
 
-const HttpServiceComponent = React__namespace.memo(({ data, location = {}, layoutOptions, exportProps }) => {
+const HttpServiceComponent = React__namespace.memo(({ data: unresolvedData, location = {}, layoutOptions, exportProps }) => {
     var _a, _b, _c, _d;
+    const { nodeHasChanged } = useOptionsCtx();
+    const data = useResolvedObject(unresolvedData);
     const { search, pathname } = location;
     const mocking = React__namespace.useContext(MockingContext);
     const query = new URLSearchParams(search);
+    const nameChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'name' });
+    const versionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'version' });
+    const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
     return (React__namespace.createElement(mosaic.Box, { mb: 10 },
         data.name && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (React__namespace.createElement(mosaic.Flex, { justifyContent: "between", alignItems: "center" },
-            React__namespace.createElement(mosaic.Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
+            React__namespace.createElement(mosaic.Box, { pos: "relative" },
+                React__namespace.createElement(mosaic.Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
+                React__namespace.createElement(mosaic.NodeAnnotation, { change: nameChanged })),
             exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React__namespace.createElement(ExportButton, Object.assign({}, exportProps)))),
-        data.version && (React__namespace.createElement(mosaic.Box, { mb: 5 },
-            React__namespace.createElement(VersionBadge, { value: data.version }))),
+        data.version && (React__namespace.createElement(mosaic.Box, { mb: 5, pos: "relative" },
+            React__namespace.createElement(VersionBadge, { value: data.version }),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: versionChanged }))),
         pathname && (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.showPoweredByLink) && (React__namespace.createElement(PoweredByLink, { source: (_a = data.name) !== null && _a !== void 0 ? _a : 'no-title', pathname: pathname, packageType: "elements", layout: "stacked" })),
         React__namespace.createElement(mosaic.VStack, { spacing: 6 },
             React__namespace.createElement(ServerInfo, { servers: (_b = data.servers) !== null && _b !== void 0 ? _b : [], mockUrl: mocking.mockUrl }),
-            React__namespace.createElement(mosaic.Box, null, ((_c = data.securitySchemes) === null || _c === void 0 ? void 0 : _c.length) && (React__namespace.createElement(SecuritySchemes, { schemes: data.securitySchemes, defaultScheme: query.get('security') || undefined }))),
-            React__namespace.createElement(mosaic.Box, null, (((_d = data.contact) === null || _d === void 0 ? void 0 : _d.email) || data.license || data.termsOfService) && (React__namespace.createElement(AdditionalInfo, { contact: data.contact, license: data.license, termsOfService: data.termsOfService })))),
-        data.description && React__namespace.createElement(MarkdownViewer, { className: "sl-my-5", markdown: data.description })));
+            React__namespace.createElement(mosaic.Box, null, ((_c = data.securitySchemes) === null || _c === void 0 ? void 0 : _c.length) ? (React__namespace.createElement(SecuritySchemes, { schemes: data.securitySchemes, defaultScheme: query.get('security') || undefined })) : null),
+            React__namespace.createElement(mosaic.Box, null, (((_d = data.contact) === null || _d === void 0 ? void 0 : _d.email) || data.license || data.termsOfService) && (React__namespace.createElement(AdditionalInfo, { id: data.id, contact: data.contact, license: data.license, termsOfService: data.termsOfService })))),
+        data.description && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
+            React__namespace.createElement(MarkdownViewer, { className: "sl-my-5", markdown: data.description }),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged })))));
 });
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = reactErrorBoundary.withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
@@ -2398,23 +2562,31 @@ function useIsCompact(layoutOptions) {
 }
 
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
-    var _a;
+    var _a, _b;
     const resolveRef = useInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
+    const { nodeHasChanged } = useOptionsCtx();
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
-    const title = (_a = data.title) !== null && _a !== void 0 ? _a : nodeTitle;
+    const nodeId = (_a = data === null || data === void 0 ? void 0 : data['x-stoplight']) === null || _a === void 0 ? void 0 : _a.id;
+    const title = (_b = data.title) !== null && _b !== void 0 ? _b : nodeTitle;
     const isInternal = !!data['x-internal'];
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
+    const titleChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: ['title', 'internal'] });
     const header = (shouldDisplayHeader || isInternal) && (React__namespace.createElement(mosaic.Flex, { justifyContent: "between", alignItems: "center" },
-        React__namespace.createElement(mosaic.HStack, { spacing: 5 },
-            title && (React__namespace.createElement(mosaic.Heading, { size: 1, fontWeight: "semibold" }, title)),
-            React__namespace.createElement(mosaic.HStack, { spacing: 2 }, isInternal && React__namespace.createElement(InternalBadge, null))),
+        React__namespace.createElement(mosaic.Box, { pos: "relative" },
+            React__namespace.createElement(mosaic.HStack, { spacing: 5 },
+                title && (React__namespace.createElement(mosaic.Heading, { size: 1, fontWeight: "semibold" }, title)),
+                React__namespace.createElement(mosaic.HStack, { spacing: 2 }, isInternal && React__namespace.createElement(InternalBadge, null))),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: titleChanged })),
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React__namespace.createElement(ExportButton, Object.assign({}, exportProps))));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React__namespace.createElement(ModelExamples, { data: data, isCollapsible: isCompact });
+    const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: 'description' });
     const description = (React__namespace.createElement(mosaic.VStack, { spacing: 10 },
-        data.description && data.type === 'object' && React__namespace.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
+        data.description && data.type === 'object' && (React__namespace.createElement(mosaic.Box, { pos: "relative" },
+            React__namespace.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: descriptionChanged }))),
         isCompact && modelExamples,
-        React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(data) })));
+        React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, skipTopLevelDescription: true })));
     return (React__namespace.createElement(TwoColumnLayout, { ref: layoutRef, className: cn__default["default"]('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
 const ModelExamples = React__namespace.memo(({ data, isCollapsible = false }) => {
@@ -2436,16 +2608,16 @@ const ModelExamples = React__namespace.memo(({ data, isCollapsible = false }) =>
 const Model = reactErrorBoundary.withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React__namespace.memo((_a) => {
-    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver"]);
+    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, nodeHasChanged } = _a, commonProps = tslib.__rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "nodeHasChanged"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         return null;
     }
-    const parsedDocs = React__namespace.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
+    let elem = React__namespace.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
     if (useNodeForRefResolving) {
-        return (React__namespace.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver }, parsedDocs));
+        elem = (React__namespace.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver }, elem));
     }
-    return parsedDocs;
+    return React__namespace.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged }, elem);
 });
 const ParsedDocs = (_a) => {
     var { node } = _a, commonProps = tslib.__rest(_a, ["node"]);
@@ -2873,16 +3045,33 @@ const useRouter = (router, basePath, staticRouterPath) => {
     };
 };
 
+const components = {
+    a: ReactRouterMarkdownLink,
+    h2: (_a) => {
+        var props = tslib.__rest(_a, ["color"]);
+        return React__namespace.createElement(LinkHeading, Object.assign({ size: 2 }, props));
+    },
+    h3: (_a) => {
+        var props = tslib.__rest(_a, ["color"]);
+        return React__namespace.createElement(LinkHeading, Object.assign({ size: 3 }, props));
+    },
+    h4: (_a) => {
+        var props = tslib.__rest(_a, ["color"]);
+        return React__namespace.createElement(LinkHeading, Object.assign({ size: 4 }, props));
+    },
+};
 function withRouter(WrappedComponent) {
     const WithRouter = (props) => {
         var _a, _b, _c;
         const basePath = (_a = props.basePath) !== null && _a !== void 0 ? _a : '/';
         const staticRouterPath = (_b = props.staticRouterPath) !== null && _b !== void 0 ? _b : '';
-        const { Router, routerProps } = useRouter((_c = props.router) !== null && _c !== void 0 ? _c : 'history', basePath, staticRouterPath);
-        return (React__namespace.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
-            React__namespace.createElement(reactRouterDom.Route, { path: "/" },
-                React__namespace.createElement(MarkdownComponentsProvider, { value: { a: ReactRouterMarkdownLink } },
-                    React__namespace.createElement(WrappedComponent, Object.assign({}, props))))));
+        const routerType = (_c = props.router) !== null && _c !== void 0 ? _c : 'history';
+        const { Router, routerProps } = useRouter(routerType, basePath, staticRouterPath);
+        return (React__namespace.createElement(RouterTypeContext.Provider, { value: routerType },
+            React__namespace.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
+                React__namespace.createElement(reactRouterDom.Route, { path: "/" },
+                    React__namespace.createElement(MarkdownComponentsProvider, { value: components },
+                        React__namespace.createElement(WrappedComponent, Object.assign({}, props)))))));
     };
     WithRouter.displayName = `WithRouter(${getDisplayName(WrappedComponent)})`;
     return WithRouter;