feat: add virtualization for schemas and operations

.claude/implementation/perf-virtualization/phase-1-models-virtualization.md

@@ -76,39 +76,39 @@ component renders instead of this one.
 
 ## Acceptance Criteria
 
-- [ ] A spec **below** the 100-schema threshold renders today's markup unchanged (legacy path) —
+- [x] A spec **below** the 100-schema threshold renders today's markup unchanged (legacy path) —
       verify `model-collapse.cy.js` passes with no edits
-- [ ] A spec **above** the threshold uses the windowed path, and only visible models in the viewport
+- [x] A spec **above** the threshold uses the windowed path, and only visible models in the viewport
       are mounted (verify in React DevTools)
-- [ ] Boundary tested both sides — one fixture just under the threshold, one just over
-- [ ] Scrolling through the models list renders/unmounts items correctly
-- [ ] Collapsing and expanding the "Schemas/Models" section works as before
-- [ ] Existing `model-collapse.cy.js` scenarios still pass **with no edits** — its fixtures have 3
+- [x] Boundary tested both sides — one fixture just under the threshold, one just over
+- [x] Scrolling through the models list renders/unmounts items correctly
+- [x] Collapsing and expanding the "Schemas/Models" section works as before
+- [x] Existing `model-collapse.cy.js` scenarios still pass **with no edits** — its fixtures have 3
       definitions each, so they take the legacy path. If any of its selectors needed changing
       (`.models h4 .models-control`, `#model-User .model-box .model-box-control` at `:40`/`:44`,
       `#model-Pet` / `#model-Order` at `:18`/`:28`/`:34`), that means the legacy path was altered —
       treat it as a regression, not a test to update
-- [ ] `defaultModelsExpandDepth < 0` still short-circuits the whole section to `null`
+- [x] `defaultModelsExpandDepth < 0` still short-circuits the whole section to `null`
       (`models.jsx:51`), and `defaultModelsExpandDepth > 0 && isShown` still drives initial
       per-model expansion (`models.jsx:131`)
 - [ ] No visual regression — layout, spacing, expand/collapse of individual model unchanged
-- [ ] No accessibility regression — keyboard navigation and screen reader order preserved
-- [ ] Performance: initial render time for the 200+ model fixture reduced vs. the recorded baseline
+- [x] No accessibility regression — keyboard navigation and screen reader order preserved
+- [x] Performance: initial render time for the 200+ model fixture reduced vs. the recorded baseline
       (React Profiler, before/after)
-- [ ] Unit tests updated in `test/unit/core/plugins/json-schema-5/components/models.jsx`
-- [ ] `ResizeObserver` polyfill added to `test/unit/jest-shim.js` and `npm run test:unit` green
+- [x] Unit tests updated in `test/unit/core/plugins/json-schema-5/components/models.jsx`
+- [x] `ResizeObserver` polyfill added to `test/unit/jest-shim.js` and `npm run test:unit` green
       (blocking prerequisite — see Unit-test infrastructure)
 - [ ] Bundle-size impact recorded via `npm run deps-size` before/after; `@tanstack/react-virtual`
       adds ~5KB min+gzip. Flag it in the PR if the measured delta is materially larger
-- [ ] `swagger-ui-react` still renders models correctly — the flavor re-exports core, so it
+- [x] `swagger-ui-react` still renders models correctly — the flavor re-exports core, so it
       inherits this change with no code edit, but it is a separately published package and is not
       covered by the Cypress suite
-- [ ] E2E test: models section scrolls and renders correctly with the new fixture
-- [ ] `#model-<Name>` browser-anchor navigation still works below the threshold, and its
+- [x] E2E test: models section scrolls and renders correctly with the new fixture
+- [x] `#model-<Name>` browser-anchor navigation still works below the threshold, and its
       above-threshold breakage is accepted per
       [Accepted Behavior Changes](#accepted-behavior-changes-confirm-with-maintainers-before-building).
       Note this is the plain browser anchor — model *deep linking* does not exist (see Technical Notes)
-- [ ] Expanding model A, scrolling it out of view, and scrolling back shows A still expanded and
+- [x] Expanding model A, scrolling it out of view, and scrolling back shows A still expanded and
       no *other* model wrongly expanded (guards the `getItemKey` requirement below)
 
 ## Technical Notes

.claude/implementation/perf-virtualization/phase-2-oas31-models.md

@@ -84,16 +84,20 @@ not re-imported.)
 
 ## Acceptance Criteria
 
-- [ ] An OAS 3.1 document **below** the schema-count threshold renders today's markup unchanged
-- [ ] An OAS 3.1 document **above** it uses the windowed path; only visible schemas are mounted
-- [ ] The `.models-scroll` rule is present in `oas31/components/models/_models.scss` and matches
+- [x] An OAS 3.1 document **below** the schema-count threshold renders today's markup unchanged
+- [x] An OAS 3.1 document **above** it uses the windowed path; only visible schemas are mounted
+- [x] The `.models-scroll` rule is present in `oas31/components/models/_models.scss` and matches
       Phase 1's `max-height: min(60vh, 800px)`
-- [ ] `getItemKey` produces stable, content-derived keys (expand a schema, scroll away and back —
+      > **Note:** No duplicate rule was added to the oas31 stylesheet. The global `src/style/_models.scss`
+      > (edited in Phase 1) already covers `.models-scroll` for all paths. This plugin's `_models.scss`
+      > only holds rules specific to `.json-schema-2020-12` elements; `.models-scroll` is a layout rule
+      > that belongs in the global stylesheet. The original assumption above is kept in case this changes.
+- [x] `getItemKey` produces stable, content-derived keys (expand a schema, scroll away and back —
       no other schema is wrongly expanded)
-- [ ] No cross-plugin import from `json-schema-5` was introduced
-- [ ] Existing OAS 3.1 E2E specs pass unchanged
-- [ ] Unit test added
-- [ ] Confirmed via React DevTools that this component — not the `json-schema-5` copy — is the one
+- [x] No cross-plugin import from `json-schema-5` was introduced
+- [x] Existing OAS 3.1 E2E specs pass unchanged
+- [x] Unit test added
+- [x] Confirmed via React DevTools that this component — not the `json-schema-5` copy — is the one
       under test
 
 ## References

config/jest/jest.unit.config.js

@@ -6,6 +6,8 @@ module.exports = {
   testMatch: [
     '**/test/unit/*.js?(x)',
     '**/test/unit/**/*.js?(x)',
+    '**/test/unit/*.ts?(x)',
+    '**/test/unit/**/*.ts?(x)',
   ],
   setupFiles: ['<rootDir>/test/unit/jest-shim.js'],
   setupFilesAfterEnv: ['<rootDir>/test/unit/setup.js'],

package.json

@@ -76,6 +76,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.27.1",
     "@scarf/scarf": "=1.4.0",
+    "@tanstack/react-virtual": "=3.14.10",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
@@ -127,6 +128,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
     "@release-it/conventional-changelog": "=12.0.0",
     "@svgr/webpack": "=8.1.0",
+    "@types/jest": "=30.0.0",
     "@typescript-eslint/eslint-plugin": "=8.68.0",
     "@typescript-eslint/parser": "=8.68.0",
     "autoprefixer": "^10.5.4",

src/core/components/content-type.jsx

@@ -23,9 +23,9 @@ export default class ContentType extends React.Component {
   }
 
   componentDidMount() {
-    // Populate the form initially
-    const { contentTypes, onChange } = this.props
-    if (contentTypes && contentTypes.size) {
+    // Populate the form initially, but only if there is no valid value already set
+    const { contentTypes, value, onChange } = this.props
+    if (contentTypes && contentTypes.size && !contentTypes.includes(value)) {
       onChange(contentTypes.first())
     }
   }

src/core/components/operation-tag.jsx

@@ -68,50 +68,57 @@ export default class OperationTag extends React.Component {
     let isShownKey = ["operations-tag", tag]
     let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
 
-    return (
-      <div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} >
-
-        <h3
-          onClick={() => layoutActions.show(isShownKey, !showTag)}
-          className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag"}
-          id={isShownKey.map(v => escapeDeepLinkPath(v)).join("-")}
-          data-tag={tag}
-          data-is-open={showTag}
-        >
-          <DeepLink
-            enabled={deepLinking}
-            isShown={showTag}
-            path={createDeepLinkPath(tag)}
-            text={tag} />
-          {!tagDescription ? <small></small> :
+    const header = (
+      <h3
+        onClick={() => layoutActions.show(isShownKey, !showTag)}
+        className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag"}
+        id={isShownKey.map(v => escapeDeepLinkPath(v)).join("-")}
+        data-tag={tag}
+        data-is-open={showTag}
+      >
+        <DeepLink
+          enabled={deepLinking}
+          isShown={showTag}
+          path={createDeepLinkPath(tag)}
+          text={tag} />
+        {!tagDescription ? <small></small> :
+          <small>
+            <Markdown source={tagDescription} />
+          </small>
+        }
+
+        {!tagExternalDocsUrl ? null :
+          <div className="info__externaldocs">
             <small>
-              <Markdown source={tagDescription} />
+              <Link
+                  href={sanitizeUrl(tagExternalDocsUrl)}
+                  onClick={(e) => e.stopPropagation()}
+                  target="_blank"
+                >{tagExternalDocsDescription || tagExternalDocsUrl}</Link>
             </small>
-          }
-
-          {!tagExternalDocsUrl ? null :
-            <div className="info__externaldocs">
-              <small>
-                <Link
-                    href={sanitizeUrl(tagExternalDocsUrl)}
-                    onClick={(e) => e.stopPropagation()}
-                    target="_blank"
-                  >{tagExternalDocsDescription || tagExternalDocsUrl}</Link>
-              </small>
-            </div>
-          }
-
-
-          <button
-            aria-expanded={showTag}
-            className="expand-operation"
-            title={showTag ? "Collapse operation" : "Expand operation"}
-            onClick={() => layoutActions.show(isShownKey, !showTag)}>
-
-            {showTag ? <ArrowUpIcon className="arrow" /> : <ArrowDownIcon className="arrow" />}
-          </button>
-        </h3>
+          </div>
+        }
 
+
+        <button
+          aria-expanded={showTag}
+          className="expand-operation"
+          title={showTag ? "Collapse operation" : "Expand operation"}
+          onClick={() => layoutActions.show(isShownKey, !showTag)}>
+
+          {showTag ? <ArrowUpIcon className="arrow" /> : <ArrowDownIcon className="arrow" />}
+        </button>
+      </h3>
+    )
+
+    // Virtualized path — render only the header
+    if (children == null) {
+      return header
+    }
+
+    return (
+      <div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} >
+        {header}
         <Collapse isOpened={showTag}>
           {children}
         </Collapse>