diff --git a/.eslintrc b/.eslintrc
index f8b03f98a..7bc6ab933 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,18 +2,36 @@
   "root": true,
   "extends": "next/core-web-vitals",
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler"],
+  "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler", "local-rules"],
   "rules": {
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}],
     "react-hooks/exhaustive-deps": "error",
     "react/no-unknown-property": ["error", {"ignore": ["meta"]}],
-    "react-compiler/react-compiler": "error"
+    "react-compiler/react-compiler": "error",
+    "local-rules/lint-markdown-code-blocks": "error"
   },
   "env": {
     "node": true,
     "commonjs": true,
     "browser": true,
     "es6": true
-  }
+  },
+  "overrides": [
+    {
+      "files": ["src/content/**/*.md"],
+      "parser": "./eslint-local-rules/parser",
+      "parserOptions": {
+        "sourceType": "module"
+      },
+      "rules": {
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "react-hooks/exhaustive-deps": "off",
+        "react/no-unknown-property": "off",
+        "react-compiler/react-compiler": "off",
+        "local-rules/lint-markdown-code-blocks": "error"
+      }
+    }
+  ]
 }
diff --git a/.gitignore b/.gitignore
index be4e56a88..29a806940 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
diff --git a/colors.js b/colors.js
index 872f33cac..2b282c820 100644
--- a/colors.js
+++ b/colors.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/eslint-local-rules/__tests__/fixtures/src/content/basic-error.md b/eslint-local-rules/__tests__/fixtures/src/content/basic-error.md
new file mode 100644
index 000000000..8e7670fdc
--- /dev/null
+++ b/eslint-local-rules/__tests__/fixtures/src/content/basic-error.md
@@ -0,0 +1,8 @@
+```jsx
+import {useState} from 'react';
+function Counter() {
+  const [count, setCount] = useState(0);
+  setCount(count + 1);
+  return <div>{count}</div>;
+}
+```
diff --git a/eslint-local-rules/__tests__/fixtures/src/content/duplicate-metadata.md b/eslint-local-rules/__tests__/fixtures/src/content/duplicate-metadata.md
new file mode 100644
index 000000000..67d6b62bb
--- /dev/null
+++ b/eslint-local-rules/__tests__/fixtures/src/content/duplicate-metadata.md
@@ -0,0 +1,8 @@
+```jsx title="Counter" {expectedErrors: {'react-compiler': [99]}} {expectedErrors: {'react-compiler': [2]}}
+import {useState} from 'react';
+function Counter() {
+  const [count, setCount] = useState(0);
+  setCount(count + 1);
+  return <div>{count}</div>;
+}
+```
diff --git a/eslint-local-rules/__tests__/fixtures/src/content/malformed-metadata.md b/eslint-local-rules/__tests__/fixtures/src/content/malformed-metadata.md
new file mode 100644
index 000000000..fd542bf03
--- /dev/null
+++ b/eslint-local-rules/__tests__/fixtures/src/content/malformed-metadata.md
@@ -0,0 +1,8 @@
+```jsx {expectedErrors: {'react-compiler': 'invalid'}}
+import {useState} from 'react';
+function Counter() {
+  const [count, setCount] = useState(0);
+  setCount(count + 1);
+  return <div>{count}</div>;
+}
+```
diff --git a/eslint-local-rules/__tests__/fixtures/src/content/mixed-language.md b/eslint-local-rules/__tests__/fixtures/src/content/mixed-language.md
new file mode 100644
index 000000000..313b0e30f
--- /dev/null
+++ b/eslint-local-rules/__tests__/fixtures/src/content/mixed-language.md
@@ -0,0 +1,7 @@
+```bash
+setCount()
+```
+
+```txt
+import {useState} from 'react';
+```
diff --git a/eslint-local-rules/__tests__/fixtures/src/content/stale-expected-error.md b/eslint-local-rules/__tests__/fixtures/src/content/stale-expected-error.md
new file mode 100644
index 000000000..46e330ac0
--- /dev/null
+++ b/eslint-local-rules/__tests__/fixtures/src/content/stale-expected-error.md
@@ -0,0 +1,5 @@
+```jsx {expectedErrors: {'react-compiler': [3]}}
+function Hello() {
+  return <h1>Hello</h1>;
+}
+```
diff --git a/eslint-local-rules/__tests__/fixtures/src/content/suppressed-error.md b/eslint-local-rules/__tests__/fixtures/src/content/suppressed-error.md
new file mode 100644
index 000000000..ecefa8495
--- /dev/null
+++ b/eslint-local-rules/__tests__/fixtures/src/content/suppressed-error.md
@@ -0,0 +1,8 @@
+```jsx {expectedErrors: {'react-compiler': [4]}}
+import {useState} from 'react';
+function Counter() {
+  const [count, setCount] = useState(0);
+  setCount(count + 1);
+  return <div>{count}</div>;
+}
+```
diff --git a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js
new file mode 100644
index 000000000..250e0a1e5
--- /dev/null
+++ b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+const {ESLint} = require('eslint');
+const plugin = require('..');
+
+const FIXTURES_DIR = path.join(
+  __dirname,
+  'fixtures',
+  'src',
+  'content'
+);
+const PARSER_PATH = path.join(__dirname, '..', 'parser.js');
+
+function createESLint({fix = false} = {}) {
+  return new ESLint({
+    useEslintrc: false,
+    fix,
+    plugins: {
+      'local-rules': plugin,
+    },
+    overrideConfig: {
+      parser: PARSER_PATH,
+      plugins: ['local-rules'],
+      rules: {
+        'local-rules/lint-markdown-code-blocks': 'error',
+      },
+      parserOptions: {
+        sourceType: 'module',
+      },
+    },
+  });
+}
+
+function readFixture(name) {
+  return fs.readFileSync(path.join(FIXTURES_DIR, name), 'utf8');
+}
+
+async function lintFixture(name, {fix = false} = {}) {
+  const eslint = createESLint({fix});
+  const filePath = path.join(FIXTURES_DIR, name);
+  const markdown = readFixture(name);
+  const [result] = await eslint.lintText(markdown, {filePath});
+  return result;
+}
+
+async function run() {
+  const basicResult = await lintFixture('basic-error.md');
+  assert.strictEqual(
+    basicResult.messages.length,
+    1,
+    'expected one diagnostic'
+  );
+  assert(
+    basicResult.messages[0].message.includes('Calling setState during render'),
+    'expected message to mention setState during render'
+  );
+
+  const suppressedResult = await lintFixture('suppressed-error.md');
+  assert.strictEqual(
+    suppressedResult.messages.length,
+    0,
+    'expected suppression metadata to silence diagnostic'
+  );
+
+  const staleResult = await lintFixture('stale-expected-error.md');
+  assert.strictEqual(
+    staleResult.messages.length,
+    1,
+    'expected stale metadata error'
+  );
+  assert.strictEqual(
+    staleResult.messages[0].message,
+    'React Compiler expected error on line 3 was not triggered'
+  );
+
+  const duplicateResult = await lintFixture('duplicate-metadata.md');
+  assert.strictEqual(
+    duplicateResult.messages.length,
+    2,
+    'expected duplicate metadata to surface compiler diagnostic and stale metadata notice'
+  );
+  const duplicateFixed = await lintFixture('duplicate-metadata.md', {
+    fix: true,
+  });
+  assert(
+    duplicateFixed.output.includes(
+      "{expectedErrors: {'react-compiler': [4]}}"
+    ),
+    'expected duplicates to be rewritten to a single canonical block'
+  );
+  assert(
+    !duplicateFixed.output.includes('[99]'),
+    'expected stale line numbers to be removed from metadata'
+  );
+
+  const mixedLanguageResult = await lintFixture('mixed-language.md');
+  assert.strictEqual(
+    mixedLanguageResult.messages.length,
+    0,
+    'expected non-js code fences to be ignored'
+  );
+
+  const malformedResult = await lintFixture('malformed-metadata.md');
+  assert.strictEqual(
+    malformedResult.messages.length,
+    1,
+    'expected malformed metadata to fall back to compiler diagnostics'
+  );
+  const malformedFixed = await lintFixture('malformed-metadata.md', {
+    fix: true,
+  });
+  assert(
+    malformedFixed.output.includes(
+      "{expectedErrors: {'react-compiler': [4]}}"
+    ),
+    'expected malformed metadata to be replaced with canonical form'
+  );
+}
+
+run().catch(error => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/eslint-local-rules/index.js b/eslint-local-rules/index.js
new file mode 100644
index 000000000..b1f747ccb
--- /dev/null
+++ b/eslint-local-rules/index.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const lintMarkdownCodeBlocks = require('./rules/lint-markdown-code-blocks');
+
+module.exports = {
+  rules: {
+    'lint-markdown-code-blocks': lintMarkdownCodeBlocks,
+  },
+};
diff --git a/eslint-local-rules/package.json b/eslint-local-rules/package.json
new file mode 100644
index 000000000..9940fee20
--- /dev/null
+++ b/eslint-local-rules/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "eslint-plugin-local-rules",
+  "version": "0.0.0",
+  "main": "index.js",
+  "private": "true",
+  "scripts": {
+    "test": "node __tests__/lint-markdown-code-blocks.test.js"
+  },
+  "devDependencies": {
+    "eslint-mdx": "^2"
+  }
+}
diff --git a/eslint-local-rules/parser.js b/eslint-local-rules/parser.js
new file mode 100644
index 000000000..043f2e520
--- /dev/null
+++ b/eslint-local-rules/parser.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = require('eslint-mdx');
diff --git a/eslint-local-rules/rules/diagnostics.js b/eslint-local-rules/rules/diagnostics.js
new file mode 100644
index 000000000..4e433164b
--- /dev/null
+++ b/eslint-local-rules/rules/diagnostics.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+function getRelativeLine(loc) {
+  return loc?.start?.line ?? loc?.line ?? 1;
+}
+
+function getRelativeColumn(loc) {
+  return loc?.start?.column ?? loc?.column ?? 0;
+}
+
+function getRelativeEndLine(loc, fallbackLine) {
+  if (loc?.end?.line != null) {
+    return loc.end.line;
+  }
+  if (loc?.line != null) {
+    return loc.line;
+  }
+  return fallbackLine;
+}
+
+function getRelativeEndColumn(loc, fallbackColumn) {
+  if (loc?.end?.column != null) {
+    return loc.end.column;
+  }
+  if (loc?.column != null) {
+    return loc.column;
+  }
+  return fallbackColumn;
+}
+
+/**
+ * @param {import('./markdown').MarkdownCodeBlock} block
+ * @param {Array<{detail: any, loc: any, message: string}>} diagnostics
+ * @returns {Array<{detail: any, message: string, relativeStartLine: number, markdownLoc: {start: {line: number, column: number}, end: {line: number, column: number}}}>}
+ */
+function normalizeDiagnostics(block, diagnostics) {
+  return diagnostics.map(({detail, loc, message}) => {
+    const relativeStartLine = Math.max(getRelativeLine(loc), 1);
+    const relativeStartColumn = Math.max(getRelativeColumn(loc), 0);
+    const relativeEndLine = Math.max(
+      getRelativeEndLine(loc, relativeStartLine),
+      relativeStartLine
+    );
+    const relativeEndColumn = Math.max(
+      getRelativeEndColumn(loc, relativeStartColumn),
+      relativeStartColumn
+    );
+
+    const markdownStartLine = block.codeStartLine + relativeStartLine - 1;
+    const markdownEndLine = block.codeStartLine + relativeEndLine - 1;
+
+    return {
+      detail,
+      message,
+      relativeStartLine,
+      markdownLoc: {
+        start: {
+          line: markdownStartLine,
+          column: relativeStartColumn,
+        },
+        end: {
+          line: markdownEndLine,
+          column: relativeEndColumn,
+        },
+      },
+    };
+  });
+}
+
+module.exports = {
+  normalizeDiagnostics,
+};
diff --git a/eslint-local-rules/rules/lint-markdown-code-blocks.js b/eslint-local-rules/rules/lint-markdown-code-blocks.js
new file mode 100644
index 000000000..5ec327947
--- /dev/null
+++ b/eslint-local-rules/rules/lint-markdown-code-blocks.js
@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const {
+  buildFenceLine,
+  getCompilerExpectedLines,
+  getSortedUniqueNumbers,
+  hasCompilerEntry,
+  metadataEquals,
+  metadataHasExpectedErrorsToken,
+  removeCompilerExpectedLines,
+  setCompilerExpectedLines,
+} = require('./metadata');
+const {normalizeDiagnostics} = require('./diagnostics');
+const {parseMarkdownFile} = require('./markdown');
+const {runReactCompiler} = require('./react-compiler');
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Run React Compiler on markdown code blocks',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    hasSuggestions: true,
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      Program(node) {
+        const filename = context.getFilename();
+        if (!filename.endsWith('.md') || !filename.includes('src/content')) {
+          return;
+        }
+
+        const sourceCode = context.getSourceCode();
+        const {blocks} = parseMarkdownFile(sourceCode.text, filename);
+        // For each supported code block, run the compiler and reconcile metadata.
+        for (const block of blocks) {
+          const compilerResult = runReactCompiler(
+            block.code,
+            `${filename}#codeblock`
+          );
+
+          const expectedLines = getCompilerExpectedLines(block.metadata);
+          const expectedLineSet = new Set(expectedLines);
+          const diagnostics = normalizeDiagnostics(
+            block,
+            compilerResult.diagnostics
+          );
+
+          const errorLines = new Set();
+          const unexpectedDiagnostics = [];
+
+          for (const diagnostic of diagnostics) {
+            const line = diagnostic.relativeStartLine;
+            errorLines.add(line);
+            if (!expectedLineSet.has(line)) {
+              unexpectedDiagnostics.push(diagnostic);
+            }
+          }
+
+          const normalizedErrorLines = getSortedUniqueNumbers(
+            Array.from(errorLines)
+          );
+          const missingExpectedLines = expectedLines.filter(
+            (line) => !errorLines.has(line)
+          );
+
+          const desiredMetadata = normalizedErrorLines.length
+            ? setCompilerExpectedLines(block.metadata, normalizedErrorLines)
+            : removeCompilerExpectedLines(block.metadata);
+
+          // Compute canonical metadata and attach an autofix when it differs.
+          const metadataChanged = !metadataEquals(
+            block.metadata,
+            desiredMetadata
+          );
+          const replacementLine = buildFenceLine(block.lang, desiredMetadata);
+          const replacementDiffers = block.fence.rawText !== replacementLine;
+          const applyReplacementFix = replacementDiffers
+            ? (fixer) =>
+                fixer.replaceTextRange(block.fence.range, replacementLine)
+            : null;
+
+          const hasDuplicateMetadata =
+            block.metadata.hadDuplicateExpectedErrors;
+          const hasExpectedErrorsMetadata = metadataHasExpectedErrorsToken(
+            block.metadata
+          );
+
+          const shouldFixUnexpected =
+            Boolean(applyReplacementFix) &&
+            normalizedErrorLines.length > 0 &&
+            (metadataChanged ||
+              hasDuplicateMetadata ||
+              !hasExpectedErrorsMetadata);
+
+          let fixAlreadyAttached = false;
+
+          for (const diagnostic of unexpectedDiagnostics) {
+            const reportData = {
+              node,
+              loc: diagnostic.markdownLoc,
+              message: diagnostic.message,
+            };
+
+            if (
+              shouldFixUnexpected &&
+              applyReplacementFix &&
+              !fixAlreadyAttached
+            ) {
+              reportData.fix = applyReplacementFix;
+              reportData.suggest = [
+                {
+                  desc: 'Add expectedErrors metadata to suppress these errors',
+                  fix: applyReplacementFix,
+                },
+              ];
+              fixAlreadyAttached = true;
+            }
+
+            context.report(reportData);
+          }
+
+          // Assert that expectedErrors is actually needed
+          if (
+            Boolean(applyReplacementFix) &&
+            missingExpectedLines.length > 0 &&
+            hasCompilerEntry(block.metadata)
+          ) {
+            const plural = missingExpectedLines.length > 1;
+            const message = plural
+              ? `React Compiler expected errors on lines ${missingExpectedLines.join(
+                  ', '
+                )} were not triggered`
+              : `React Compiler expected error on line ${missingExpectedLines[0]} was not triggered`;
+
+            const reportData = {
+              node,
+              loc: {
+                start: {
+                  line: block.position.start.line,
+                  column: 0,
+                },
+                end: {
+                  line: block.position.start.line,
+                  column: block.fence.rawText.length,
+                },
+              },
+              message,
+            };
+
+            if (!fixAlreadyAttached && applyReplacementFix) {
+              reportData.fix = applyReplacementFix;
+              fixAlreadyAttached = true;
+            } else if (applyReplacementFix) {
+              reportData.suggest = [
+                {
+                  desc: 'Remove stale expectedErrors metadata',
+                  fix: applyReplacementFix,
+                },
+              ];
+            }
+
+            context.report(reportData);
+          }
+        }
+      },
+    };
+  },
+};
diff --git a/eslint-local-rules/rules/markdown.js b/eslint-local-rules/rules/markdown.js
new file mode 100644
index 000000000..d888d1311
--- /dev/null
+++ b/eslint-local-rules/rules/markdown.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const remark = require('remark');
+const {parseFenceMetadata} = require('./metadata');
+
+/**
+ * @typedef {Object} MarkdownCodeBlock
+ * @property {string} code
+ * @property {number} codeStartLine
+ * @property {{start: {line: number, column: number}, end: {line: number, column: number}}} position
+ * @property {{lineIndex: number, rawText: string, metaText: string, range: [number, number]}} fence
+ * @property {string} filePath
+ * @property {string} lang
+ * @property {import('./metadata').FenceMetadata} metadata
+ */
+
+const SUPPORTED_LANGUAGES = new Set([
+  'js',
+  'jsx',
+  'javascript',
+  'ts',
+  'tsx',
+  'typescript',
+]);
+
+function computeLineOffsets(lines) {
+  const offsets = [];
+  let currentOffset = 0;
+
+  for (const line of lines) {
+    offsets.push(currentOffset);
+    currentOffset += line.length + 1;
+  }
+
+  return offsets;
+}
+
+function parseMarkdownFile(content, filePath) {
+  const tree = remark().parse(content);
+  const lines = content.split('\n');
+  const lineOffsets = computeLineOffsets(lines);
+  const blocks = [];
+
+  function traverse(node) {
+    if (!node || typeof node !== 'object') {
+      return;
+    }
+
+    if (node.type === 'code') {
+      const rawLang = node.lang || '';
+      const normalizedLang = rawLang.toLowerCase();
+      if (!normalizedLang || !SUPPORTED_LANGUAGES.has(normalizedLang)) {
+        return;
+      }
+
+      const fenceLineIndex = (node.position?.start?.line ?? 1) - 1;
+      const fenceStartOffset = node.position?.start?.offset ?? 0;
+      const fenceLine = lines[fenceLineIndex] ?? '';
+      const fenceEndOffset = fenceStartOffset + fenceLine.length;
+
+      let metaText = '';
+      if (fenceLine) {
+        const prefixMatch = fenceLine.match(/^`{3,}\s*/);
+        const prefixLength = prefixMatch ? prefixMatch[0].length : 3;
+        metaText = fenceLine.slice(prefixLength + rawLang.length);
+      } else if (node.meta) {
+        metaText = ` ${node.meta}`;
+      }
+
+      const metadata = parseFenceMetadata(metaText);
+
+      blocks.push({
+        lang: rawLang || normalizedLang,
+        metadata,
+        filePath,
+        code: node.value || '',
+        codeStartLine: (node.position?.start?.line ?? 1) + 1,
+        position: {
+          start: {
+            line: fenceLineIndex + 1,
+            column: (node.position?.start?.column ?? 1) - 1,
+          },
+          end: {
+            line: fenceLineIndex + 1,
+            column: (node.position?.start?.column ?? 1) - 1 + fenceLine.length,
+          },
+        },
+        fence: {
+          lineIndex: fenceLineIndex,
+          rawText: fenceLine,
+          metaText,
+          range: [fenceStartOffset, fenceEndOffset],
+        },
+      });
+      return;
+    }
+
+    if ('children' in node && Array.isArray(node.children)) {
+      for (const child of node.children) {
+        traverse(child);
+      }
+    }
+  }
+
+  traverse(tree);
+
+  return {
+    content,
+    blocks,
+    lines,
+    lineOffsets,
+  };
+}
+
+module.exports = {
+  SUPPORTED_LANGUAGES,
+  computeLineOffsets,
+  parseMarkdownFile,
+};
diff --git a/eslint-local-rules/rules/metadata.js b/eslint-local-rules/rules/metadata.js
new file mode 100644
index 000000000..fb58a37c2
--- /dev/null
+++ b/eslint-local-rules/rules/metadata.js
@@ -0,0 +1,377 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @typedef {{type: 'text', raw: string}} TextToken
+ * @typedef {{
+ *   type: 'expectedErrors',
+ *   entries: Record<string, Array<number>>,
+ *   raw?: string,
+ * }} ExpectedErrorsToken
+ * @typedef {TextToken | ExpectedErrorsToken} MetadataToken
+ *
+ * @typedef {{
+ *   leading: string,
+ *   trailing: string,
+ *   tokens: Array<MetadataToken>,
+ *   parseError: boolean,
+ *   hadDuplicateExpectedErrors: boolean,
+ * }} FenceMetadata
+ */
+
+const EXPECTED_ERRORS_BLOCK_REGEX = /\{\s*expectedErrors\s*:/;
+const REACT_COMPILER_KEY = 'react-compiler';
+
+function getSortedUniqueNumbers(values) {
+  return Array.from(new Set(values))
+    .filter((value) => typeof value === 'number' && !Number.isNaN(value))
+    .sort((a, b) => a - b);
+}
+
+function tokenizeMeta(body) {
+  if (!body) {
+    return [];
+  }
+
+  const tokens = [];
+  let current = '';
+  let depth = 0;
+
+  for (let i = 0; i < body.length; i++) {
+    const char = body[i];
+    if (char === '{') {
+      depth++;
+    } else if (char === '}') {
+      depth = Math.max(depth - 1, 0);
+    }
+
+    if (char === ' ' && depth === 0) {
+      if (current) {
+        tokens.push(current);
+        current = '';
+      }
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current) {
+    tokens.push(current);
+  }
+
+  return tokens;
+}
+
+function normalizeEntryValues(values) {
+  if (!Array.isArray(values)) {
+    return [];
+  }
+  return getSortedUniqueNumbers(values);
+}
+
+function parseExpectedErrorsEntries(rawEntries) {
+  const normalized = rawEntries
+    .replace(/([{,]\s*)([a-zA-Z_$][\w$]*)\s*:/g, '$1"$2":')
+    .replace(/'([^']*)'/g, '"$1"');
+
+  const parsed = JSON.parse(normalized);
+  const entries = {};
+
+  if (parsed && typeof parsed === 'object') {
+    for (const [key, value] of Object.entries(parsed)) {
+      entries[key] = normalizeEntryValues(Array.isArray(value) ? value.flat() : value);
+    }
+  }
+
+  return entries;
+}
+
+function parseExpectedErrorsToken(tokenText) {
+  const match = tokenText.match(/^\{\s*expectedErrors\s*:\s*(\{[\s\S]*\})\s*\}$/);
+  if (!match) {
+    return null;
+  }
+
+  const entriesSource = match[1];
+  let parseError = false;
+  let entries;
+
+  try {
+    entries = parseExpectedErrorsEntries(entriesSource);
+  } catch (error) {
+    parseError = true;
+    entries = {};
+  }
+
+  return {
+    token: {
+      type: 'expectedErrors',
+      entries,
+      raw: tokenText,
+    },
+    parseError,
+  };
+}
+
+function parseFenceMetadata(metaText) {
+  if (!metaText) {
+    return {
+      leading: '',
+      trailing: '',
+      tokens: [],
+      parseError: false,
+      hadDuplicateExpectedErrors: false,
+    };
+  }
+
+  const leading = metaText.match(/^\s*/)?.[0] ?? '';
+  const trailing = metaText.match(/\s*$/)?.[0] ?? '';
+  const bodyStart = leading.length;
+  const bodyEnd = metaText.length - trailing.length;
+  const body = metaText.slice(bodyStart, bodyEnd).trim();
+
+  if (!body) {
+    return {
+      leading,
+      trailing,
+      tokens: [],
+      parseError: false,
+      hadDuplicateExpectedErrors: false,
+    };
+  }
+
+  const tokens = [];
+  let parseError = false;
+  let sawExpectedErrors = false;
+  let hadDuplicateExpectedErrors = false;
+
+  for (const rawToken of tokenizeMeta(body)) {
+    const normalizedToken = rawToken.trim();
+    if (!normalizedToken) {
+      continue;
+    }
+
+    if (EXPECTED_ERRORS_BLOCK_REGEX.test(normalizedToken)) {
+      const parsed = parseExpectedErrorsToken(normalizedToken);
+      if (parsed) {
+        if (sawExpectedErrors) {
+          hadDuplicateExpectedErrors = true;
+          // Drop duplicates. We'll rebuild the canonical block on write.
+          continue;
+        }
+        tokens.push(parsed.token);
+        parseError = parseError || parsed.parseError;
+        sawExpectedErrors = true;
+        continue;
+      }
+    }
+
+    tokens.push({type: 'text', raw: normalizedToken});
+  }
+
+  return {
+    leading,
+    trailing,
+    tokens,
+    parseError,
+    hadDuplicateExpectedErrors,
+  };
+}
+
+function cloneMetadata(metadata) {
+  return {
+    leading: metadata.leading,
+    trailing: metadata.trailing,
+    parseError: metadata.parseError,
+    hadDuplicateExpectedErrors: metadata.hadDuplicateExpectedErrors,
+    tokens: metadata.tokens.map((token) => {
+      if (token.type === 'expectedErrors') {
+        const clonedEntries = {};
+        for (const [key, value] of Object.entries(token.entries)) {
+          clonedEntries[key] = [...value];
+        }
+        return {type: 'expectedErrors', entries: clonedEntries};
+      }
+      return {type: 'text', raw: token.raw};
+    }),
+  };
+}
+
+function findExpectedErrorsToken(metadata) {
+  return metadata.tokens.find((token) => token.type === 'expectedErrors') || null;
+}
+
+function getCompilerExpectedLines(metadata) {
+  const token = findExpectedErrorsToken(metadata);
+  if (!token) {
+    return [];
+  }
+  return getSortedUniqueNumbers(token.entries[REACT_COMPILER_KEY] || []);
+}
+
+function hasCompilerEntry(metadata) {
+  const token = findExpectedErrorsToken(metadata);
+  return Boolean(token && token.entries[REACT_COMPILER_KEY]?.length);
+}
+
+function metadataHasExpectedErrorsToken(metadata) {
+  return Boolean(findExpectedErrorsToken(metadata));
+}
+
+function stringifyExpectedErrorsToken(token) {
+  const entries = token.entries || {};
+  const keys = Object.keys(entries).filter((key) => entries[key].length > 0);
+  if (keys.length === 0) {
+    return '';
+  }
+
+  keys.sort();
+
+  const segments = keys.map((key) => {
+    const values = entries[key];
+    return `'${key}': [${values.join(', ')}]`;
+  });
+
+  return `{expectedErrors: {${segments.join(', ')}}}`;
+}
+
+function stringifyFenceMetadata(metadata) {
+  if (!metadata.tokens.length) {
+    return '';
+  }
+
+  const parts = metadata.tokens
+    .map((token) => {
+      if (token.type === 'expectedErrors') {
+        return stringifyExpectedErrorsToken(token);
+      }
+      return token.raw;
+    })
+    .filter(Boolean);
+
+  if (!parts.length) {
+    return '';
+  }
+
+  const leading = metadata.leading || ' ';
+  const trailing = metadata.trailing ? metadata.trailing.trimEnd() : '';
+  const body = parts.join(' ');
+  return `${leading}${body}${trailing}`;
+}
+
+function buildFenceLine(lang, metadata) {
+  const meta = stringifyFenceMetadata(metadata);
+  return meta ? `\`\`\`${lang}${meta}` : `\`\`\`${lang}`;
+}
+
+function metadataEquals(a, b) {
+  if (a.leading !== b.leading || a.trailing !== b.trailing) {
+    return false;
+  }
+
+  if (a.tokens.length !== b.tokens.length) {
+    return false;
+  }
+
+  for (let i = 0; i < a.tokens.length; i++) {
+    const left = a.tokens[i];
+    const right = b.tokens[i];
+    if (left.type !== right.type) {
+      return false;
+    }
+    if (left.type === 'text') {
+      if (left.raw !== right.raw) {
+        return false;
+      }
+    } else {
+      const leftKeys = Object.keys(left.entries).sort();
+      const rightKeys = Object.keys(right.entries).sort();
+      if (leftKeys.length !== rightKeys.length) {
+        return false;
+      }
+      for (let j = 0; j < leftKeys.length; j++) {
+        if (leftKeys[j] !== rightKeys[j]) {
+          return false;
+        }
+        const lValues = getSortedUniqueNumbers(left.entries[leftKeys[j]]);
+        const rValues = getSortedUniqueNumbers(right.entries[rightKeys[j]]);
+        if (lValues.length !== rValues.length) {
+          return false;
+        }
+        for (let k = 0; k < lValues.length; k++) {
+          if (lValues[k] !== rValues[k]) {
+            return false;
+          }
+        }
+      }
+    }
+  }
+
+  return true;
+}
+
+function normalizeMetadata(metadata) {
+  const normalized = cloneMetadata(metadata);
+  normalized.hadDuplicateExpectedErrors = false;
+  normalized.parseError = false;
+  if (!normalized.tokens.length) {
+    normalized.leading = '';
+    normalized.trailing = '';
+  }
+  return normalized;
+}
+
+function setCompilerExpectedLines(metadata, lines) {
+  const normalizedLines = getSortedUniqueNumbers(lines);
+  if (normalizedLines.length === 0) {
+    return removeCompilerExpectedLines(metadata);
+  }
+
+  const next = cloneMetadata(metadata);
+  let token = findExpectedErrorsToken(next);
+  if (!token) {
+    token = {type: 'expectedErrors', entries: {}};
+    next.tokens = [token, ...next.tokens];
+  }
+
+  token.entries[REACT_COMPILER_KEY] = normalizedLines;
+  return normalizeMetadata(next);
+}
+
+function removeCompilerExpectedLines(metadata) {
+  const next = cloneMetadata(metadata);
+  const token = findExpectedErrorsToken(next);
+  if (!token) {
+    return normalizeMetadata(next);
+  }
+
+  delete token.entries[REACT_COMPILER_KEY];
+
+  const hasEntries = Object.values(token.entries).some(
+    (value) => Array.isArray(value) && value.length > 0
+  );
+
+  if (!hasEntries) {
+    next.tokens = next.tokens.filter((item) => item !== token);
+  }
+
+  return normalizeMetadata(next);
+}
+
+module.exports = {
+  buildFenceLine,
+  getCompilerExpectedLines,
+  getSortedUniqueNumbers,
+  hasCompilerEntry,
+  metadataEquals,
+  metadataHasExpectedErrorsToken,
+  parseFenceMetadata,
+  removeCompilerExpectedLines,
+  setCompilerExpectedLines,
+  stringifyFenceMetadata,
+};
diff --git a/eslint-local-rules/rules/react-compiler.js b/eslint-local-rules/rules/react-compiler.js
new file mode 100644
index 000000000..26d3878ee
--- /dev/null
+++ b/eslint-local-rules/rules/react-compiler.js
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const {transformFromAstSync} = require('@babel/core');
+const {parse: babelParse} = require('@babel/parser');
+const BabelPluginReactCompiler = require('babel-plugin-react-compiler').default;
+const {
+  parsePluginOptions,
+  validateEnvironmentConfig,
+} = require('babel-plugin-react-compiler');
+
+const COMPILER_OPTIONS = {
+  noEmit: true,
+  panicThreshold: 'none',
+  environment: validateEnvironmentConfig({
+    validateRefAccessDuringRender: true,
+    validateNoSetStateInRender: true,
+    validateNoSetStateInEffects: true,
+    validateNoJSXInTryStatements: true,
+    validateNoImpureFunctionsInRender: true,
+    validateStaticComponents: true,
+    validateNoFreezingKnownMutableFunctions: true,
+    validateNoVoidUseMemo: true,
+    validateNoCapitalizedCalls: [],
+    validateHooksUsage: true,
+    validateNoDerivedComputationsInEffects: true,
+  }),
+};
+
+function hasRelevantCode(code) {
+  const functionPattern = /^(export\s+)?(default\s+)?function\s+\w+/m;
+  const arrowPattern =
+    /^(export\s+)?(const|let|var)\s+\w+\s*=\s*(\([^)]*\)|\w+)\s*=>/m;
+  const hasImports = /^import\s+/m.test(code);
+
+  return functionPattern.test(code) || arrowPattern.test(code) || hasImports;
+}
+
+function runReactCompiler(code, filename) {
+  const result = {
+    sourceCode: code,
+    events: [],
+  };
+
+  if (!hasRelevantCode(code)) {
+    return {...result, diagnostics: []};
+  }
+
+  const options = parsePluginOptions({
+    ...COMPILER_OPTIONS,
+  });
+
+  options.logger = {
+    logEvent: (_, event) => {
+      if (event.kind === 'CompileError') {
+        const category = event.detail?.category;
+        if (category === 'Todo' || category === 'Invariant') {
+          return;
+        }
+        result.events.push(event);
+      }
+    },
+  };
+
+  try {
+    const ast = babelParse(code, {
+      sourceFilename: filename,
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript'],
+    });
+
+    transformFromAstSync(ast, code, {
+      filename,
+      highlightCode: false,
+      retainLines: true,
+      plugins: [[BabelPluginReactCompiler, options]],
+      sourceType: 'module',
+      configFile: false,
+      babelrc: false,
+    });
+  } catch (error) {
+    return {...result, diagnostics: []};
+  }
+
+  const diagnostics = [];
+
+  for (const event of result.events) {
+    if (event.kind !== 'CompileError') {
+      continue;
+    }
+
+    const detail = event.detail;
+    if (!detail) {
+      continue;
+    }
+
+    const loc = typeof detail.primaryLocation === 'function'
+      ? detail.primaryLocation()
+      : null;
+
+    if (loc == null || typeof loc === 'symbol') {
+      continue;
+    }
+
+    const message = typeof detail.printErrorMessage === 'function'
+      ? detail.printErrorMessage(result.sourceCode, {eslint: true})
+      : detail.description || 'Unknown React Compiler error';
+
+    diagnostics.push({detail, loc, message});
+  }
+
+  return {...result, diagnostics};
+}
+
+module.exports = {
+  hasRelevantCode,
+  runReactCompiler,
+};
diff --git a/eslint-local-rules/yarn.lock b/eslint-local-rules/yarn.lock
new file mode 100644
index 000000000..5a7cf126d
--- /dev/null
+++ b/eslint-local-rules/yarn.lock
@@ -0,0 +1,1421 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.16.0":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.27.1.tgz#200f715e66d52a23b221a9435534a91cc13ad5be"
+  integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.27.1"
+    js-tokens "^4.0.0"
+    picocolors "^1.1.1"
+
+"@babel/helper-validator-identifier@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
+  integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@npmcli/config@^6.0.0":
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/@npmcli/config/-/config-6.4.1.tgz#006409c739635db008e78bf58c92421cc147911d"
+  integrity sha512-uSz+elSGzjCMANWa5IlbGczLYPkNI/LeR+cHrgaTqTrTSh9RHhOFA4daD2eRUz6lMtOW+Fnsb+qv7V2Zz8ML0g==
+  dependencies:
+    "@npmcli/map-workspaces" "^3.0.2"
+    ci-info "^4.0.0"
+    ini "^4.1.0"
+    nopt "^7.0.0"
+    proc-log "^3.0.0"
+    read-package-json-fast "^3.0.2"
+    semver "^7.3.5"
+    walk-up-path "^3.0.1"
+
+"@npmcli/map-workspaces@^3.0.2":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@npmcli/map-workspaces/-/map-workspaces-3.0.6.tgz#27dc06c20c35ef01e45a08909cab9cb3da08cea6"
+  integrity sha512-tkYs0OYnzQm6iIRdfy+LcLBjcKuQCeE5YLb8KnrIlutJfheNaPvPpgoFEyEFgbjzl5PLZ3IA/BWAwRU0eHuQDA==
+  dependencies:
+    "@npmcli/name-from-folder" "^2.0.0"
+    glob "^10.2.2"
+    minimatch "^9.0.0"
+    read-package-json-fast "^3.0.0"
+
+"@npmcli/name-from-folder@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@npmcli/name-from-folder/-/name-from-folder-2.0.0.tgz#c44d3a7c6d5c184bb6036f4d5995eee298945815"
+  integrity sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg==
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@pkgr/core@^0.1.0":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.2.tgz#1cf95080bb7072fafaa3cb13b442fab4695c3893"
+  integrity sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ==
+
+"@types/acorn@^4.0.0":
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
+  integrity sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==
+  dependencies:
+    "@types/estree" "*"
+
+"@types/concat-stream@^2.0.0":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/concat-stream/-/concat-stream-2.0.3.tgz#1f5c2ad26525716c181191f7ed53408f78eb758e"
+  integrity sha512-3qe4oQAPNwVNwK4C9c8u+VJqv9kez+2MR4qJpoPFfXtgxxif1QbFusvXzK0/Wra2VX07smostI2VMmJNSpZjuQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/debug@^4.0.0":
+  version "4.1.12"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917"
+  integrity sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==
+  dependencies:
+    "@types/ms" "*"
+
+"@types/estree-jsx@^1.0.0":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/estree-jsx/-/estree-jsx-1.0.5.tgz#858a88ea20f34fe65111f005a689fa1ebf70dc18"
+  integrity sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==
+  dependencies:
+    "@types/estree" "*"
+
+"@types/estree@*", "@types/estree@^1.0.0":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
+  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
+
+"@types/hast@^2.0.0":
+  version "2.3.10"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.10.tgz#5c9d9e0b304bbb8879b857225c5ebab2d81d7643"
+  integrity sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==
+  dependencies:
+    "@types/unist" "^2"
+
+"@types/is-empty@^1.0.0":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@types/is-empty/-/is-empty-1.2.3.tgz#a2d55ea8a5ec57bf61e411ba2a9e5132fe4f0899"
+  integrity sha512-4J1l5d79hoIvsrKh5VUKVRA1aIdsOb10Hu5j3J2VfP/msDnfTdGPmNp2E1Wg+vs97Bktzo+MZePFFXSGoykYJw==
+
+"@types/mdast@^3.0.0":
+  version "3.0.15"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
+  integrity sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==
+  dependencies:
+    "@types/unist" "^2"
+
+"@types/ms@*":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-2.1.0.tgz#052aa67a48eccc4309d7f0191b7e41434b90bb78"
+  integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==
+
+"@types/node@*":
+  version "24.5.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-24.5.1.tgz#dab6917c47113eb4502d27d06e89a407ec0eff95"
+  integrity sha512-/SQdmUP2xa+1rdx7VwB9yPq8PaKej8TD5cQ+XfKDPWWC+VDJU4rvVVagXqKUzhKjtFoNA8rXDJAkCxQPAe00+Q==
+  dependencies:
+    undici-types "~7.12.0"
+
+"@types/node@^18.0.0":
+  version "18.19.126"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.126.tgz#b1a9e0bac6338098f465ab242cbd6a8884d79b80"
+  integrity sha512-8AXQlBfrGmtYJEJUPs63F/uZQqVeFiN9o6NUjbDJYfxNxFnArlZufANPw4h6dGhYGKxcyw+TapXFvEsguzIQow==
+  dependencies:
+    undici-types "~5.26.4"
+
+"@types/supports-color@^8.0.0":
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/@types/supports-color/-/supports-color-8.1.3.tgz#b769cdce1d1bb1a3fa794e35b62c62acdf93c139"
+  integrity sha512-Hy6UMpxhE3j1tLpl27exp1XqHD7n8chAiNPzWfz16LPZoMMoSc4dzLl6w9qijkEb/r5O1ozdu1CWGA2L83ZeZg==
+
+"@types/unist@^2", "@types/unist@^2.0.0":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.11.tgz#11af57b127e32487774841f7a4e54eab166d03c4"
+  integrity sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==
+
+abbrev@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-2.0.0.tgz#cf59829b8b4f03f89dda2771cb7f3653828c89bf"
+  integrity sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==
+
+acorn-jsx@^5.0.0, acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^8.0.0, acorn@^8.10.0, acorn@^8.9.0:
+  version "8.15.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
+  integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.2.2.tgz#60216eea464d864597ce2832000738a0589650c1"
+  integrity sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==
+
+ansi-styles@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^6.1.0:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.3.tgz#c044d5dcc521a076413472597a1acb1f103c4041"
+  integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
+
+bail@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
+  integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+brace-expansion@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.2.tgz#54fc53237a613d854c7bd37463aad17df87214e7"
+  integrity sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==
+  dependencies:
+    balanced-match "^1.0.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+ccount@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
+  integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
+
+character-entities-html4@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
+  integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
+
+character-entities-legacy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b"
+  integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
+
+character-entities@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+  integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
+
+character-reference-invalid@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
+  integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
+
+ci-info@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-4.3.0.tgz#c39b1013f8fdbd28cd78e62318357d02da160cd7"
+  integrity sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+concat-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-2.0.0.tgz#414cf5af790a48c60ab9be4527d56d5e41133cb1"
+  integrity sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.0.2"
+    typedarray "^0.0.6"
+
+cross-spawn@^7.0.6:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+debug@^4.0.0:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
+  integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
+  dependencies:
+    ms "^2.1.3"
+
+decode-named-character-reference@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz#25c32ae6dd5e21889549d40f676030e9514cc0ed"
+  integrity sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==
+  dependencies:
+    character-entities "^2.0.0"
+
+dequal@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
+diff@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.2.0.tgz#26ded047cd1179b78b9537d5ef725503ce1ae531"
+  integrity sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+error-ex@^1.3.2:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.4.tgz#b3a8d8bb6f92eecc1629e3e27d3c8607a8a32414"
+  integrity sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+eslint-mdx@^2:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/eslint-mdx/-/eslint-mdx-2.3.4.tgz#87a5d95d6fcb27bafd2b15092f16f5aa559e336b"
+  integrity sha512-u4NszEUyoGtR7Q0A4qs0OymsEQdCO6yqWlTzDa9vGWsK7aMotdnW0hqifHTkf6lEtA2vHk2xlkWHTCrhYLyRbw==
+  dependencies:
+    acorn "^8.10.0"
+    acorn-jsx "^5.3.2"
+    espree "^9.6.1"
+    estree-util-visit "^1.2.1"
+    remark-mdx "^2.3.0"
+    remark-parse "^10.0.2"
+    remark-stringify "^10.0.3"
+    synckit "^0.9.0"
+    tslib "^2.6.1"
+    unified "^10.1.2"
+    unified-engine "^10.1.0"
+    unist-util-visit "^4.1.2"
+    uvu "^0.5.6"
+    vfile "^5.3.7"
+
+eslint-visitor-keys@^3.4.1:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
+estree-util-is-identifier-name@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.1.0.tgz#fb70a432dcb19045e77b05c8e732f1364b4b49b2"
+  integrity sha512-bEN9VHRyXAUOjkKVQVvArFym08BTWB0aJPppZZr0UNyAqWsLaVfAqP7hbaTJjzHifmB5ebnR8Wm7r7yGN/HonQ==
+
+estree-util-visit@^1.0.0, estree-util-visit@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/estree-util-visit/-/estree-util-visit-1.2.1.tgz#8bc2bc09f25b00827294703835aabee1cc9ec69d"
+  integrity sha512-xbgqcrkIVbIG+lI/gzbvd9SGTJL4zqJKBFttUl5pP27KhAjtMKbX/mQXJ7qgyXpMgVy/zvpm0xoQQaGL8OloOw==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/unist" "^2.0.0"
+
+extend@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+fault@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-2.0.1.tgz#d47ca9f37ca26e4bd38374a7c500b5a384755b6c"
+  integrity sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==
+  dependencies:
+    format "^0.2.0"
+
+foreground-child@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.1.tgz#32e8e9ed1b68a3497befb9ac2b6adf92a638576f"
+  integrity sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==
+  dependencies:
+    cross-spawn "^7.0.6"
+    signal-exit "^4.0.1"
+
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+glob@^10.2.2:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+glob@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
+ignore@^5.0.0:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+import-meta-resolve@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/import-meta-resolve/-/import-meta-resolve-2.2.2.tgz#75237301e72d1f0fbd74dbc6cca9324b164c2cc9"
+  integrity sha512-f8KcQ1D80V7RnqVm+/lirO9zkOxjGxhaTC1IPrBGd3MEfNgmNG67tSUO9gTi2F3Blr2Az6g1vocaxzkVnWl9MA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ini@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.3.tgz#4c359675a6071a46985eb39b14e4a2c0ec98a795"
+  integrity sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==
+
+is-alphabetical@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b"
+  integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==
+
+is-alphanumerical@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz#7c03fbe96e3e931113e57f964b0a368cc2dfd875"
+  integrity sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==
+  dependencies:
+    is-alphabetical "^2.0.0"
+    is-decimal "^2.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-buffer@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
+is-decimal@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7"
+  integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==
+
+is-empty@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-empty/-/is-empty-1.2.0.tgz#de9bb5b278738a05a0b09a57e1fb4d4a341a9f6b"
+  integrity sha512-F2FnH/otLNJv0J6wc73A5Xo7oHLNnqplYqZhUu01tD54DIPvxIRSTSLkrUB/M0nHO4vo1O9PDfN4KoTxCzLh/w==
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-hexadecimal@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027"
+  integrity sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==
+
+is-plain-obj@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
+  integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-parse-even-better-errors@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz#b43d35e89c0f3be6b5fbbe9dc6c82467b30c28da"
+  integrity sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==
+
+kleur@^4.0.3:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
+lines-and-columns@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-2.0.4.tgz#d00318855905d2660d8c0822e3f5a4715855fc42"
+  integrity sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==
+
+load-plugin@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/load-plugin/-/load-plugin-5.1.0.tgz#15600f5191c742b16e058cfc908c227c13db0104"
+  integrity sha512-Lg1CZa1CFj2CbNaxijTL6PCbzd4qGTlZov+iH2p5Xwy/ApcZJh+i6jMN2cYePouTfjJfrNu3nXFdEw8LvbjPFQ==
+  dependencies:
+    "@npmcli/config" "^6.0.0"
+    import-meta-resolve "^2.0.0"
+
+longest-streak@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4"
+  integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==
+
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+mdast-util-from-markdown@^1.0.0, mdast-util-from-markdown@^1.1.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz#9421a5a247f10d31d2faed2a30df5ec89ceafcf0"
+  integrity sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    mdast-util-to-string "^3.1.0"
+    micromark "^3.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-decode-string "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-stringify-position "^3.0.0"
+    uvu "^0.5.0"
+
+mdast-util-mdx-expression@^1.0.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-mdx-expression/-/mdast-util-mdx-expression-1.3.2.tgz#d027789e67524d541d6de543f36d51ae2586f220"
+  integrity sha512-xIPmR5ReJDu/DHH1OoIT1HkuybIfRGYRywC+gJtI7qHjCJp/M9jrmBEJW22O8lskDWm562BX2W8TiAwRTb0rKA==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-to-markdown "^1.0.0"
+
+mdast-util-mdx-jsx@^2.0.0:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-2.1.4.tgz#7c1f07f10751a78963cfabee38017cbc8b7786d1"
+  integrity sha512-DtMn9CmVhVzZx3f+optVDF8yFgQVt7FghCRNdlIaS3X5Bnym3hZwPbg/XW86vdpKjlc1PVj26SpnLGeJBXD3JA==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    ccount "^2.0.0"
+    mdast-util-from-markdown "^1.1.0"
+    mdast-util-to-markdown "^1.3.0"
+    parse-entities "^4.0.0"
+    stringify-entities "^4.0.0"
+    unist-util-remove-position "^4.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile-message "^3.0.0"
+
+mdast-util-mdx@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-mdx/-/mdast-util-mdx-2.0.1.tgz#49b6e70819b99bb615d7223c088d295e53bb810f"
+  integrity sha512-38w5y+r8nyKlGvNjSEqWrhG0w5PmnRA+wnBvm+ulYCct7nsGYhFVb0lljS9bQav4psDAS1eGkP2LMVcZBi/aqw==
+  dependencies:
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-mdx-expression "^1.0.0"
+    mdast-util-mdx-jsx "^2.0.0"
+    mdast-util-mdxjs-esm "^1.0.0"
+    mdast-util-to-markdown "^1.0.0"
+
+mdast-util-mdxjs-esm@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-1.3.1.tgz#645d02cd607a227b49721d146fd81796b2e2d15b"
+  integrity sha512-SXqglS0HrEvSdUEfoXFtcg7DRl7S2cwOXc7jkuusG472Mmjag34DUDeOJUZtl+BVnyeO1frIgVpHlNRWc2gk/w==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    mdast-util-to-markdown "^1.0.0"
+
+mdast-util-phrasing@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz#c7c21d0d435d7fb90956038f02e8702781f95463"
+  integrity sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    unist-util-is "^5.0.0"
+
+mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz#c13343cb3fc98621911d33b5cd42e7d0731171c6"
+  integrity sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    longest-streak "^3.0.0"
+    mdast-util-phrasing "^3.0.0"
+    mdast-util-to-string "^3.0.0"
+    micromark-util-decode-string "^1.0.0"
+    unist-util-visit "^4.0.0"
+    zwitch "^2.0.0"
+
+mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz#66f7bb6324756741c5f47a53557f0cbf16b6f789"
+  integrity sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+
+micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz#1386628df59946b2d39fb2edfd10f3e8e0a75bb8"
+  integrity sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-factory-destination "^1.0.0"
+    micromark-factory-label "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-factory-title "^1.0.0"
+    micromark-factory-whitespace "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-classify-character "^1.0.0"
+    micromark-util-html-tag-name "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
+micromark-extension-mdx-expression@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-1.0.8.tgz#5bc1f5fd90388e8293b3ef4f7c6f06c24aff6314"
+  integrity sha512-zZpeQtc5wfWKdzDsHRBY003H2Smg+PUi2REhqgIhdzAa5xonhP03FcXxqFSerFiNUr5AWmHpaNPQTBVOS4lrXw==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    micromark-factory-mdx-expression "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-events-to-acorn "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-extension-mdx-jsx@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-1.0.5.tgz#e72d24b7754a30d20fb797ece11e2c4e2cae9e82"
+  integrity sha512-gPH+9ZdmDflbu19Xkb8+gheqEDqkSpdCEubQyxuz/Hn8DOXiXvrXeikOoBA71+e8Pfi0/UYmU3wW3H58kr7akA==
+  dependencies:
+    "@types/acorn" "^4.0.0"
+    "@types/estree" "^1.0.0"
+    estree-util-is-identifier-name "^2.0.0"
+    micromark-factory-mdx-expression "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+    vfile-message "^3.0.0"
+
+micromark-extension-mdx-md@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-extension-mdx-md/-/micromark-extension-mdx-md-1.0.1.tgz#595d4b2f692b134080dca92c12272ab5b74c6d1a"
+  integrity sha512-7MSuj2S7xjOQXAjjkbjBsHkMtb+mDGVW6uI2dBL9snOBCbZmoNgDAeZ0nSn9j3T42UE/g2xVNMn18PJxZvkBEA==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-extension-mdxjs-esm@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-1.0.5.tgz#e4f8be9c14c324a80833d8d3a227419e2b25dec1"
+  integrity sha512-xNRBw4aoURcyz/S69B19WnZAkWJMxHMT5hE36GtDAyhoyn/8TuAeqjFJQlwk+MKQsUD7b3l7kFX+vlfVWgcX1w==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    micromark-core-commonmark "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-events-to-acorn "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-position-from-estree "^1.1.0"
+    uvu "^0.5.0"
+    vfile-message "^3.0.0"
+
+micromark-extension-mdxjs@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs/-/micromark-extension-mdxjs-1.0.1.tgz#f78d4671678d16395efeda85170c520ee795ded8"
+  integrity sha512-7YA7hF6i5eKOfFUzZ+0z6avRG52GpWR8DL+kN47y3f2KhxbBZMhmxe7auOeaTBrW2DenbbZTf1ea9tA2hDpC2Q==
+  dependencies:
+    acorn "^8.0.0"
+    acorn-jsx "^5.0.0"
+    micromark-extension-mdx-expression "^1.0.0"
+    micromark-extension-mdx-jsx "^1.0.0"
+    micromark-extension-mdx-md "^1.0.0"
+    micromark-extension-mdxjs-esm "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-destination@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz#eb815957d83e6d44479b3df640f010edad667b9f"
+  integrity sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-label@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz#cc95d5478269085cfa2a7282b3de26eb2e2dec68"
+  integrity sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-factory-mdx-expression@^1.0.0:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-1.0.9.tgz#57ba4571b69a867a1530f34741011c71c73a4976"
+  integrity sha512-jGIWzSmNfdnkJq05c7b0+Wv0Kfz3NJ3N4cBjnbO4zjXIlxJr+f8lk+5ZmwFvqdAbUy2q6B5rCY//g0QAAaXDWA==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-events-to-acorn "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-position-from-estree "^1.0.0"
+    uvu "^0.5.0"
+    vfile-message "^3.0.0"
+
+micromark-factory-space@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz#c8f40b0640a0150751d3345ed885a080b0d15faf"
+  integrity sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-title@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz#dd0fe951d7a0ac71bdc5ee13e5d1465ad7f50ea1"
+  integrity sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-whitespace@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz#798fb7489f4c8abafa7ca77eed6b5745853c9705"
+  integrity sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-character@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-1.2.0.tgz#4fedaa3646db249bc58caeb000eb3549a8ca5dcc"
+  integrity sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-chunked@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz#37a24d33333c8c69a74ba12a14651fd9ea8a368b"
+  integrity sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-classify-character@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz#6a7f8c8838e8a120c8e3c4f2ae97a2bff9190e9d"
+  integrity sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-combine-extensions@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz#192e2b3d6567660a85f735e54d8ea6e3952dbe84"
+  integrity sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-decode-numeric-character-reference@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz#b1e6e17009b1f20bc652a521309c5f22c85eb1c6"
+  integrity sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-decode-string@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz#dc12b078cba7a3ff690d0203f95b5d5537f2809c"
+  integrity sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz#92e4f565fd4ccb19e0dcae1afab9a173bbeb19a5"
+  integrity sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==
+
+micromark-util-events-to-acorn@^1.0.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-1.2.3.tgz#a4ab157f57a380e646670e49ddee97a72b58b557"
+  integrity sha512-ij4X7Wuc4fED6UoLWkmo0xJQhsktfNh1J0m8g4PbIMPlx+ek/4YdW5mvbye8z/aZvAPUoxgXHrwVlXAPKMRp1w==
+  dependencies:
+    "@types/acorn" "^4.0.0"
+    "@types/estree" "^1.0.0"
+    "@types/unist" "^2.0.0"
+    estree-util-visit "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+    vfile-message "^3.0.0"
+
+micromark-util-html-tag-name@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz#48fd7a25826f29d2f71479d3b4e83e94829b3588"
+  integrity sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==
+
+micromark-util-normalize-identifier@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz#7a73f824eb9f10d442b4d7f120fecb9b38ebf8b7"
+  integrity sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-resolve-all@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz#4652a591ee8c8fa06714c9b54cd6c8e693671188"
+  integrity sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-util-sanitize-uri@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz#613f738e4400c6eedbc53590c67b197e30d7f90d"
+  integrity sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-subtokenize@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz#941c74f93a93eaf687b9054aeb94642b0e92edb1"
+  integrity sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-util-symbol@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz#813cd17837bdb912d069a12ebe3a44b6f7063142"
+  integrity sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==
+
+micromark-util-types@^1.0.0, micromark-util-types@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-1.1.0.tgz#e6676a8cae0bb86a2171c498167971886cb7e283"
+  integrity sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==
+
+micromark@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/micromark/-/micromark-3.2.0.tgz#1af9fef3f995ea1ea4ac9c7e2f19c48fd5c006e9"
+  integrity sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==
+  dependencies:
+    "@types/debug" "^4.0.0"
+    debug "^4.0.0"
+    decode-named-character-reference "^1.0.0"
+    micromark-core-commonmark "^1.0.1"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^9.0.0, minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nopt@^7.0.0:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-7.2.1.tgz#1cac0eab9b8e97c9093338446eddd40b2c8ca1e7"
+  integrity sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==
+  dependencies:
+    abbrev "^2.0.0"
+
+npm-normalize-package-bin@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz#25447e32a9a7de1f51362c61a559233b89947832"
+  integrity sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+parse-entities@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.2.tgz#61d46f5ed28e4ee62e9ddc43d6b010188443f159"
+  integrity sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    character-entities-legacy "^3.0.0"
+    character-reference-invalid "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    is-alphanumerical "^2.0.0"
+    is-decimal "^2.0.0"
+    is-hexadecimal "^2.0.0"
+
+parse-json@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-6.0.2.tgz#6bf79c201351cc12d5d66eba48d5a097c13dc200"
+  integrity sha512-SA5aMiaIjXkAiBrW/yPgLgQAQg42f7K3ACO+2l/zOvtQBwX58DMUsFJXelW2fx3yMBmWOVkR6j1MGsdSbCA4UA==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    error-ex "^1.3.2"
+    json-parse-even-better-errors "^2.3.1"
+    lines-and-columns "^2.0.2"
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+proc-log@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-3.0.0.tgz#fb05ef83ccd64fd7b20bbe9c8c1070fc08338dd8"
+  integrity sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==
+
+read-package-json-fast@^3.0.0, read-package-json-fast@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz#394908a9725dc7a5f14e70c8e7556dff1d2b1049"
+  integrity sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==
+  dependencies:
+    json-parse-even-better-errors "^3.0.0"
+    npm-normalize-package-bin "^3.0.0"
+
+readable-stream@^3.0.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+remark-mdx@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-2.3.0.tgz#efe678025a8c2726681bde8bf111af4a93943db4"
+  integrity sha512-g53hMkpM0I98MU266IzDFMrTD980gNF3BJnkyFcmN+dD873mQeD5rdMO3Y2X+x8umQfbSE0PcoEDl7ledSA+2g==
+  dependencies:
+    mdast-util-mdx "^2.0.0"
+    micromark-extension-mdxjs "^1.0.0"
+
+remark-parse@^10.0.2:
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.2.tgz#ca241fde8751c2158933f031a4e3efbaeb8bc262"
+  integrity sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    unified "^10.0.0"
+
+remark-stringify@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-10.0.3.tgz#83b43f2445c4ffbb35b606f967d121b2b6d69717"
+  integrity sha512-koyOzCMYoUHudypbj4XpnAKFbkddRMYZHwghnxd7ue5210WzGw6kOBwauJTRUMq16jsovXx8dYNvSSWP89kZ3A==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.0.0"
+    unified "^10.0.0"
+
+sade@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+  dependencies:
+    mri "^1.1.0"
+
+safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+semver@^7.3.5:
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58"
+  integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+stringify-entities@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.4.tgz#b3b79ef5f277cc4ac73caeb0236c5ba939b3a4f3"
+  integrity sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==
+  dependencies:
+    character-entities-html4 "^2.0.0"
+    character-entities-legacy "^3.0.0"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.2.tgz#132875abde678c7ea8d691533f2e7e22bb744dba"
+  integrity sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+supports-color@^9.0.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.4.0.tgz#17bfcf686288f531db3dea3215510621ccb55954"
+  integrity sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==
+
+synckit@^0.9.0:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.3.tgz#1cfd60d9e61f931e07fb7f56f474b5eb31b826a7"
+  integrity sha512-JJoOEKTfL1urb1mDoEblhD9NhEbWmq9jHEMEnxoC4ujUaZ4itA8vKgwkFAyNClgxplLi9tsUKX+EduK0p/l7sg==
+  dependencies:
+    "@pkgr/core" "^0.1.0"
+    tslib "^2.6.2"
+
+to-vfile@^7.0.0:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/to-vfile/-/to-vfile-7.2.4.tgz#b97ecfcc15905ffe020bc975879053928b671378"
+  integrity sha512-2eQ+rJ2qGbyw3senPI0qjuM7aut8IYXK6AEoOWb+fJx/mQYzviTckm1wDjq91QYHAPBTYzmdJXxMFA6Mk14mdw==
+  dependencies:
+    is-buffer "^2.0.0"
+    vfile "^5.1.0"
+
+trough@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-2.2.0.tgz#94a60bd6bd375c152c1df911a4b11d5b0256f50f"
+  integrity sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==
+
+tslib@^2.6.1, tslib@^2.6.2:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
+
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
+undici-types@~7.12.0:
+  version "7.12.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.12.0.tgz#15c5c7475c2a3ba30659529f5cdb4674b622fafb"
+  integrity sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==
+
+unified-engine@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/unified-engine/-/unified-engine-10.1.0.tgz#6899f00d1f53ee9af94f7abd0ec21242aae3f56c"
+  integrity sha512-5+JDIs4hqKfHnJcVCxTid1yBoI/++FfF/1PFdSMpaftZZZY+qg2JFruRbf7PaIwa9KgLotXQV3gSjtY0IdcFGQ==
+  dependencies:
+    "@types/concat-stream" "^2.0.0"
+    "@types/debug" "^4.0.0"
+    "@types/is-empty" "^1.0.0"
+    "@types/node" "^18.0.0"
+    "@types/unist" "^2.0.0"
+    concat-stream "^2.0.0"
+    debug "^4.0.0"
+    fault "^2.0.0"
+    glob "^8.0.0"
+    ignore "^5.0.0"
+    is-buffer "^2.0.0"
+    is-empty "^1.0.0"
+    is-plain-obj "^4.0.0"
+    load-plugin "^5.0.0"
+    parse-json "^6.0.0"
+    to-vfile "^7.0.0"
+    trough "^2.0.0"
+    unist-util-inspect "^7.0.0"
+    vfile-message "^3.0.0"
+    vfile-reporter "^7.0.0"
+    vfile-statistics "^2.0.0"
+    yaml "^2.0.0"
+
+unified@^10.0.0, unified@^10.1.2:
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
+  integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    bail "^2.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^4.0.0"
+    trough "^2.0.0"
+    vfile "^5.0.0"
+
+unist-util-inspect@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-inspect/-/unist-util-inspect-7.0.2.tgz#858e4f02ee4053f7c6ada8bc81662901a0ee1893"
+  integrity sha512-Op0XnmHUl6C2zo/yJCwhXQSm/SmW22eDZdWP2qdf4WpGrgO1ZxFodq+5zFyeRGasFjJotAnLgfuD1jkcKqiH1Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-is@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.2.1.tgz#b74960e145c18dcb6226bc57933597f5486deae9"
+  integrity sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-position-from-estree@^1.0.0, unist-util-position-from-estree@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-position-from-estree/-/unist-util-position-from-estree-1.1.2.tgz#8ac2480027229de76512079e377afbcabcfcce22"
+  integrity sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-remove-position@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-4.0.2.tgz#a89be6ea72e23b1a402350832b02a91f6a9afe51"
+  integrity sha512-TkBb0HABNmxzAcfLf4qsIbFbaPDvMO6wa3b3j4VcEzFVaw1LBKwnW4/sRJ/atSLSzoIg41JWEdnE7N6DIhGDGQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-visit "^4.0.0"
+
+unist-util-stringify-position@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz#03ad3348210c2d930772d64b489580c13a7db39d"
+  integrity sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-visit-parents@^5.1.1:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb"
+  integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
+unist-util-visit@^4.0.0, unist-util-visit@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2"
+  integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.1.1"
+
+util-deprecate@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+uvu@^0.5.0, uvu@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
+  integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==
+  dependencies:
+    dequal "^2.0.0"
+    diff "^5.0.0"
+    kleur "^4.0.3"
+    sade "^1.7.3"
+
+vfile-message@^3.0.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.4.tgz#15a50816ae7d7c2d1fa87090a7f9f96612b59dea"
+  integrity sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+
+vfile-reporter@^7.0.0:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/vfile-reporter/-/vfile-reporter-7.0.5.tgz#a0cbf3922c08ad428d6db1161ec64a53b5725785"
+  integrity sha512-NdWWXkv6gcd7AZMvDomlQbK3MqFWL1RlGzMn++/O2TI+68+nqxCPTvLugdOtfSzXmjh+xUyhp07HhlrbJjT+mw==
+  dependencies:
+    "@types/supports-color" "^8.0.0"
+    string-width "^5.0.0"
+    supports-color "^9.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile "^5.0.0"
+    vfile-message "^3.0.0"
+    vfile-sort "^3.0.0"
+    vfile-statistics "^2.0.0"
+
+vfile-sort@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vfile-sort/-/vfile-sort-3.0.1.tgz#4b06ec63e2946749b0bb514e736554cd75e441a2"
+  integrity sha512-1os1733XY6y0D5x0ugqSeaVJm9lYgj0j5qdcZQFyxlZOSy1jYarL77lLyb5gK4Wqr1d5OxmuyflSO3zKyFnTFw==
+  dependencies:
+    vfile "^5.0.0"
+    vfile-message "^3.0.0"
+
+vfile-statistics@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/vfile-statistics/-/vfile-statistics-2.0.1.tgz#2e1adae1cd3a45c1ed4f2a24bd103c3d71e4bce3"
+  integrity sha512-W6dkECZmP32EG/l+dp2jCLdYzmnDBIw6jwiLZSER81oR5AHRcVqL+k3Z+pfH1R73le6ayDkJRMk0sutj1bMVeg==
+  dependencies:
+    vfile "^5.0.0"
+    vfile-message "^3.0.0"
+
+vfile@^5.0.0, vfile@^5.1.0, vfile@^5.3.7:
+  version "5.3.7"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.7.tgz#de0677e6683e3380fafc46544cfe603118826ab7"
+  integrity sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile-message "^3.0.0"
+
+walk-up-path@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/walk-up-path/-/walk-up-path-3.0.1.tgz#c8d78d5375b4966c717eb17ada73dbd41490e886"
+  integrity sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+yaml@^2.0.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.1.tgz#1870aa02b631f7e8328b93f8bc574fac5d6c4d79"
+  integrity sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==
+
+zwitch@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
+  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==
diff --git a/next.config.js b/next.config.js
index 861792c8e..5a5755307 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/package.json b/package.json
index 01b46a0c2..c5fd70d2d 100644
--- a/package.json
+++ b/package.json
@@ -4,26 +4,42 @@
   "scripts": {
     "analyze": "ANALYZE=true next build",
     "dev": "next-remote-watch ./src/content",
+<<<<<<< HEAD
     "build": "yarn cache-reset && next build && node --experimental-modules ./scripts/downloadFonts.mjs",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
+=======
+    "build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs",
+    "lint": "next lint && eslint \"src/content/**/*.md\"",
+    "lint:fix": "next lint --fix && eslint \"src/content/**/*.md\" --fix",
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
     "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
     "nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
     "prettier": "yarn format:source",
     "prettier:diff": "yarn nit:source",
     "lint-heading-ids": "node scripts/headingIdLinter.js",
     "fix-headings": "node scripts/headingIdLinter.js --fix",
+<<<<<<< HEAD
     "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss lint-editorconfig",
+=======
+    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss deadlinks",
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
     "tsc": "tsc --noEmit",
     "start": "next start",
-    "postinstall": "is-ci || husky install .husky",
+    "postinstall": "yarn --cwd eslint-local-rules install && is-ci || husky install .husky",
     "check-all": "npm-run-all prettier lint:fix tsc rss",
     "rss": "node scripts/generateRss.js",
+<<<<<<< HEAD
     "cache-reset": "rm -rf node_modules/.cache && rm -rf .next && yarn cache clean",
     "lint-editorconfig": "yarn editorconfig-checker",
     "textlint-test": "yarn mocha ./textlint/tests/utils && yarn mocha ./textlint/tests/rules",
     "textlint-docs": "node ./textlint/generators/genTranslateGlossaryDocs.js && git add wiki/translate-glossary.md",
     "textlint-lint": "yarn textlint ./src/content --rulesdir ./textlint/rules -f pretty-error && npx --yes eslint@9 -c eslint.config.mjs"
+=======
+    "deadlinks": "node scripts/deadLinkChecker.js",
+    "copyright": "node scripts/copyright.js",
+    "test:eslint-local-rules": "yarn --cwd eslint-local-rules test"
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "2.13.5",
@@ -63,15 +79,24 @@
     "asyncro": "^3.0.0",
     "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
+<<<<<<< HEAD
     "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
     "editorconfig-checker": "^6.0.1",
+=======
+    "babel-plugin-react-compiler": "^19.1.0-rc.3",
+    "chalk": "4.1.2",
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
     "eslint": "7.x",
     "eslint-config-next": "12.0.3",
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "4.x",
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
+<<<<<<< HEAD
     "eslint-plugin-mark": "^0.1.0-canary.2",
+=======
+    "eslint-plugin-local-rules": "link:eslint-local-rules",
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112",
     "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
diff --git a/plugins/markdownToHtml.js b/plugins/markdownToHtml.js
index 0d5fe7afb..e9b0c3ec3 100644
--- a/plugins/markdownToHtml.js
+++ b/plugins/markdownToHtml.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 const remark = require('remark');
 const externalLinks = require('remark-external-links'); // Add _target and rel to external links
 const customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n
diff --git a/plugins/remark-header-custom-ids.js b/plugins/remark-header-custom-ids.js
index 356de1bf1..c5430ce8a 100644
--- a/plugins/remark-header-custom-ids.js
+++ b/plugins/remark-header-custom-ids.js
@@ -1,5 +1,8 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 /*!
diff --git a/plugins/remark-smartypants.js b/plugins/remark-smartypants.js
index 4694ff674..f56f14b61 100644
--- a/plugins/remark-smartypants.js
+++ b/plugins/remark-smartypants.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*!
  * Based on 'silvenon/remark-smartypants'
  * https://github.com/silvenon/remark-smartypants/pull/80
diff --git a/postcss.config.js b/postcss.config.js
index d55c43c90..6b55f9277 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/public/images/tutorial/react-starter-code-codesandbox.png b/public/images/tutorial/react-starter-code-codesandbox.png
old mode 100644
new mode 100755
index d65f161bc..b01e18297
Binary files a/public/images/tutorial/react-starter-code-codesandbox.png and b/public/images/tutorial/react-starter-code-codesandbox.png differ
diff --git a/public/js/jsfiddle-integration-babel.js b/public/js/jsfiddle-integration-babel.js
index 56059472f..56133855a 100644
--- a/public/js/jsfiddle-integration-babel.js
+++ b/public/js/jsfiddle-integration-babel.js
@@ -1,5 +1,8 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 // Do not delete or move this file.
diff --git a/public/js/jsfiddle-integration.js b/public/js/jsfiddle-integration.js
index 2151435d4..aeae13607 100644
--- a/public/js/jsfiddle-integration.js
+++ b/public/js/jsfiddle-integration.js
@@ -1,5 +1,8 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 // Do not delete or move this file.
diff --git a/scripts/copyright.js b/scripts/copyright.js
new file mode 100644
index 000000000..f1c6f786c
--- /dev/null
+++ b/scripts/copyright.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const glob = require('glob');
+
+const META_COPYRIGHT_COMMENT_BLOCK =
+  `/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */`.trim() + '\n\n';
+
+const files = glob.sync('**/*.{js,ts,tsx,jsx,rs}', {
+  ignore: [
+    '**/dist/**',
+    '**/node_modules/**',
+    '**/tests/fixtures/**',
+    '**/__tests__/fixtures/**',
+  ],
+});
+
+const updatedFiles = new Map();
+let hasErrors = false;
+files.forEach((file) => {
+  try {
+    const result = processFile(file);
+    if (result != null) {
+      updatedFiles.set(file, result);
+    }
+  } catch (e) {
+    console.error(e);
+    hasErrors = true;
+  }
+});
+if (hasErrors) {
+  console.error('Update failed');
+  process.exit(1);
+} else {
+  for (const [file, source] of updatedFiles) {
+    fs.writeFileSync(file, source, 'utf8');
+  }
+  console.log('Update complete');
+}
+
+function processFile(file) {
+  if (fs.lstatSync(file).isDirectory()) {
+    return;
+  }
+  let source = fs.readFileSync(file, 'utf8');
+  let shebang = '';
+
+  if (source.startsWith('#!')) {
+    const newlineIndex = source.indexOf('\n');
+    if (newlineIndex === -1) {
+      shebang = `${source}\n`;
+      source = '';
+    } else {
+      shebang = source.slice(0, newlineIndex + 1);
+      source = source.slice(newlineIndex + 1);
+    }
+  }
+
+  if (source.indexOf(META_COPYRIGHT_COMMENT_BLOCK) === 0) {
+    return null;
+  }
+  if (/^\/\*\*/.test(source)) {
+    source = source.replace(/\/\*\*[^\/]+\/\s+/, META_COPYRIGHT_COMMENT_BLOCK);
+  } else {
+    source = `${META_COPYRIGHT_COMMENT_BLOCK}${source}`;
+  }
+
+  if (shebang) {
+    return `${shebang}${source}`;
+  }
+  return source;
+}
diff --git a/scripts/deadLinkChecker.js b/scripts/deadLinkChecker.js
new file mode 100644
index 000000000..46a21cdc9
--- /dev/null
+++ b/scripts/deadLinkChecker.js
@@ -0,0 +1,391 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const globby = require('globby');
+const chalk = require('chalk');
+
+const CONTENT_DIR = path.join(__dirname, '../src/content');
+const PUBLIC_DIR = path.join(__dirname, '../public');
+const fileCache = new Map();
+const anchorMap = new Map(); // Map<filepath, Set<anchorId>>
+const contributorMap = new Map(); // Map<anchorId, URL>
+const redirectMap = new Map(); // Map<source, destination>
+let errorCodes = new Set();
+
+async function readFileWithCache(filePath) {
+  if (!fileCache.has(filePath)) {
+    try {
+      const content = await fs.promises.readFile(filePath, 'utf8');
+      fileCache.set(filePath, content);
+    } catch (error) {
+      throw new Error(`Failed to read file ${filePath}: ${error.message}`);
+    }
+  }
+  return fileCache.get(filePath);
+}
+
+async function fileExists(filePath) {
+  try {
+    await fs.promises.access(filePath, fs.constants.R_OK);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function getMarkdownFiles() {
+  // Convert Windows paths to POSIX for globby compatibility
+  const baseDir = CONTENT_DIR.replace(/\\/g, '/');
+  const patterns = [
+    path.posix.join(baseDir, '**/*.md'),
+    path.posix.join(baseDir, '**/*.mdx'),
+  ];
+  return globby.sync(patterns);
+}
+
+function extractAnchorsFromContent(content) {
+  const anchors = new Set();
+
+  // MDX-style heading IDs: {/*anchor-id*/}
+  const mdxPattern = /\{\/\*([a-zA-Z0-9-_]+)\*\/\}/g;
+  let match;
+  while ((match = mdxPattern.exec(content)) !== null) {
+    anchors.add(match[1].toLowerCase());
+  }
+
+  // HTML id attributes
+  const htmlIdPattern = /\sid=["']([a-zA-Z0-9-_]+)["']/g;
+  while ((match = htmlIdPattern.exec(content)) !== null) {
+    anchors.add(match[1].toLowerCase());
+  }
+
+  // Markdown heading with explicit ID: ## Heading {#anchor-id}
+  const markdownHeadingPattern = /^#+\s+.*\{#([a-zA-Z0-9-_]+)\}/gm;
+  while ((match = markdownHeadingPattern.exec(content)) !== null) {
+    anchors.add(match[1].toLowerCase());
+  }
+
+  return anchors;
+}
+
+async function buildAnchorMap(files) {
+  for (const filePath of files) {
+    const content = await readFileWithCache(filePath);
+    const anchors = extractAnchorsFromContent(content);
+    if (anchors.size > 0) {
+      anchorMap.set(filePath, anchors);
+    }
+  }
+}
+
+function extractLinksFromContent(content) {
+  const linkPattern = /\[([^\]]*)\]\(([^)]+)\)/g;
+  const links = [];
+  let match;
+
+  while ((match = linkPattern.exec(content)) !== null) {
+    const [, linkText, linkUrl] = match;
+    if (linkUrl.startsWith('/') && !linkUrl.startsWith('//')) {
+      const lines = content.substring(0, match.index).split('\n');
+      const line = lines.length;
+      const lastLineStart =
+        lines.length > 1 ? content.lastIndexOf('\n', match.index - 1) + 1 : 0;
+      const column = match.index - lastLineStart + 1;
+
+      links.push({
+        text: linkText,
+        url: linkUrl,
+        line,
+        column,
+      });
+    }
+  }
+
+  return links;
+}
+
+async function findTargetFile(urlPath) {
+  // Check if it's an image or static asset that might be in the public directory
+  const imageExtensions = [
+    '.png',
+    '.jpg',
+    '.jpeg',
+    '.gif',
+    '.svg',
+    '.ico',
+    '.webp',
+  ];
+  const hasImageExtension = imageExtensions.some((ext) =>
+    urlPath.toLowerCase().endsWith(ext)
+  );
+
+  if (hasImageExtension || urlPath.includes('.')) {
+    // Check in public directory (with and without leading slash)
+    const publicPaths = [
+      path.join(PUBLIC_DIR, urlPath),
+      path.join(PUBLIC_DIR, urlPath.substring(1)),
+    ];
+
+    for (const p of publicPaths) {
+      if (await fileExists(p)) {
+        return p;
+      }
+    }
+  }
+
+  const possiblePaths = [
+    path.join(CONTENT_DIR, urlPath + '.md'),
+    path.join(CONTENT_DIR, urlPath + '.mdx'),
+    path.join(CONTENT_DIR, urlPath, 'index.md'),
+    path.join(CONTENT_DIR, urlPath, 'index.mdx'),
+    // Without leading slash
+    path.join(CONTENT_DIR, urlPath.substring(1) + '.md'),
+    path.join(CONTENT_DIR, urlPath.substring(1) + '.mdx'),
+    path.join(CONTENT_DIR, urlPath.substring(1), 'index.md'),
+    path.join(CONTENT_DIR, urlPath.substring(1), 'index.mdx'),
+  ];
+
+  for (const p of possiblePaths) {
+    if (await fileExists(p)) {
+      return p;
+    }
+  }
+  return null;
+}
+
+async function validateLink(link) {
+  const urlAnchorPattern = /#([a-zA-Z0-9-_]+)$/;
+  const anchorMatch = link.url.match(urlAnchorPattern);
+  const urlWithoutAnchor = link.url.replace(urlAnchorPattern, '');
+
+  if (urlWithoutAnchor === '/') {
+    return {valid: true};
+  }
+
+  // Check for redirects
+  if (redirectMap.has(urlWithoutAnchor)) {
+    const redirectDestination = redirectMap.get(urlWithoutAnchor);
+    if (
+      redirectDestination.startsWith('http://') ||
+      redirectDestination.startsWith('https://')
+    ) {
+      return {valid: true};
+    }
+    const redirectedLink = {
+      ...link,
+      url: redirectDestination + (anchorMatch ? anchorMatch[0] : ''),
+    };
+    return validateLink(redirectedLink);
+  }
+
+  // Check if it's an error code link
+  const errorCodeMatch = urlWithoutAnchor.match(/^\/errors\/(\d+)$/);
+  if (errorCodeMatch) {
+    const code = errorCodeMatch[1];
+    if (!errorCodes.has(code)) {
+      return {
+        valid: false,
+        reason: `Error code ${code} not found in React error codes`,
+      };
+    }
+    return {valid: true};
+  }
+
+  // Check if it's a contributor link on the team or acknowledgements page
+  if (
+    anchorMatch &&
+    (urlWithoutAnchor === '/community/team' ||
+      urlWithoutAnchor === '/community/acknowledgements')
+  ) {
+    const anchorId = anchorMatch[1].toLowerCase();
+    if (contributorMap.has(anchorId)) {
+      const correctUrl = contributorMap.get(anchorId);
+      if (correctUrl !== link.url) {
+        return {
+          valid: false,
+          reason: `Contributor link should be updated to: ${correctUrl}`,
+        };
+      }
+      return {valid: true};
+    } else {
+      return {
+        valid: false,
+        reason: `Contributor link not found`,
+      };
+    }
+  }
+
+  const targetFile = await findTargetFile(urlWithoutAnchor);
+
+  if (!targetFile) {
+    return {
+      valid: false,
+      reason: `Target file not found for: ${urlWithoutAnchor}`,
+    };
+  }
+
+  // Only check anchors for content files, not static assets
+  if (anchorMatch && targetFile.startsWith(CONTENT_DIR)) {
+    const anchorId = anchorMatch[1].toLowerCase();
+
+    // TODO handle more special cases. These are usually from custom MDX components that include
+    // a Heading from src/components/MDX/Heading.tsx which automatically injects an anchor tag.
+    switch (anchorId) {
+      case 'challenges':
+      case 'recap': {
+        return {valid: true};
+      }
+    }
+
+    const fileAnchors = anchorMap.get(targetFile);
+
+    if (!fileAnchors || !fileAnchors.has(anchorId)) {
+      return {
+        valid: false,
+        reason: `Anchor #${anchorMatch[1]} not found in ${path.relative(
+          CONTENT_DIR,
+          targetFile
+        )}`,
+      };
+    }
+  }
+
+  return {valid: true};
+}
+
+async function processFile(filePath) {
+  const content = await readFileWithCache(filePath);
+  const links = extractLinksFromContent(content);
+  const deadLinks = [];
+
+  for (const link of links) {
+    const result = await validateLink(link);
+    if (!result.valid) {
+      deadLinks.push({
+        file: path.relative(process.cwd(), filePath),
+        line: link.line,
+        column: link.column,
+        text: link.text,
+        url: link.url,
+        reason: result.reason,
+      });
+    }
+  }
+
+  return {deadLinks, totalLinks: links.length};
+}
+
+async function buildContributorMap() {
+  const teamFile = path.join(CONTENT_DIR, 'community/team.md');
+  const teamContent = await readFileWithCache(teamFile);
+
+  const teamMemberPattern = /<TeamMember[^>]*permalink=["']([^"']+)["']/g;
+  let match;
+
+  while ((match = teamMemberPattern.exec(teamContent)) !== null) {
+    const permalink = match[1];
+    contributorMap.set(permalink, `/community/team#${permalink}`);
+  }
+
+  const ackFile = path.join(CONTENT_DIR, 'community/acknowledgements.md');
+  const ackContent = await readFileWithCache(ackFile);
+  const contributorPattern = /\*\s*\[([^\]]+)\]\(([^)]+)\)/g;
+
+  while ((match = contributorPattern.exec(ackContent)) !== null) {
+    const name = match[1];
+    const url = match[2];
+    const hyphenatedName = name.toLowerCase().replace(/\s+/g, '-');
+    if (!contributorMap.has(hyphenatedName)) {
+      contributorMap.set(hyphenatedName, url);
+    }
+  }
+}
+
+async function fetchErrorCodes() {
+  try {
+    const response = await fetch(
+      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
+    );
+    if (!response.ok) {
+      throw new Error(`Failed to fetch error codes: ${response.status}`);
+    }
+    const codes = await response.json();
+    errorCodes = new Set(Object.keys(codes));
+    console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`));
+  } catch (error) {
+    throw new Error(`Failed to fetch error codes: ${error.message}`);
+  }
+}
+
+async function buildRedirectsMap() {
+  try {
+    const vercelConfigPath = path.join(__dirname, '../vercel.json');
+    const vercelConfig = JSON.parse(
+      await fs.promises.readFile(vercelConfigPath, 'utf8')
+    );
+
+    if (vercelConfig.redirects) {
+      for (const redirect of vercelConfig.redirects) {
+        redirectMap.set(redirect.source, redirect.destination);
+      }
+      console.log(
+        chalk.gray(`Loaded ${redirectMap.size} redirects from vercel.json`)
+      );
+    }
+  } catch (error) {
+    console.log(
+      chalk.yellow(
+        `Warning: Could not load redirects from vercel.json: ${error.message}\n`
+      )
+    );
+  }
+}
+
+async function main() {
+  const files = getMarkdownFiles();
+  console.log(chalk.gray(`Checking ${files.length} markdown files...`));
+
+  await fetchErrorCodes();
+  await buildRedirectsMap();
+  await buildContributorMap();
+  await buildAnchorMap(files);
+
+  const filePromises = files.map((filePath) => processFile(filePath));
+  const results = await Promise.all(filePromises);
+  const deadLinks = results.flatMap((r) => r.deadLinks);
+  const totalLinks = results.reduce((sum, r) => sum + r.totalLinks, 0);
+
+  if (deadLinks.length > 0) {
+    console.log('\n');
+    for (const link of deadLinks) {
+      console.log(chalk.yellow(`${link.file}:${link.line}:${link.column}`));
+      console.log(chalk.reset(`  Link text: ${link.text}`));
+      console.log(chalk.reset(`  URL: ${link.url}`));
+      console.log(`  ${chalk.red('✗')} ${chalk.red(link.reason)}\n`);
+    }
+
+    console.log(
+      chalk.red(
+        `\nFound ${deadLinks.length} dead link${
+          deadLinks.length > 1 ? 's' : ''
+        } out of ${totalLinks} total links\n`
+      )
+    );
+    process.exit(1);
+  }
+
+  console.log(chalk.green(`\n✓ All ${totalLinks} links are valid!\n`));
+  process.exit(0);
+}
+
+main().catch((error) => {
+  console.log(chalk.red(`Error: ${error.message}`));
+  process.exit(1);
+});
diff --git a/scripts/generateRss.js b/scripts/generateRss.js
index e0f3d5561..3231b1d73 100644
--- a/scripts/generateRss.js
+++ b/scripts/generateRss.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/scripts/headingIDHelpers/generateHeadingIDs.js b/scripts/headingIDHelpers/generateHeadingIDs.js
index 40925d444..79839f513 100644
--- a/scripts/headingIDHelpers/generateHeadingIDs.js
+++ b/scripts/headingIDHelpers/generateHeadingIDs.js
@@ -1,5 +1,8 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 // To do: Make this ESM.
diff --git a/scripts/headingIDHelpers/validateHeadingIDs.js b/scripts/headingIDHelpers/validateHeadingIDs.js
index c3cf1ab8c..798a63e12 100644
--- a/scripts/headingIDHelpers/validateHeadingIDs.js
+++ b/scripts/headingIDHelpers/validateHeadingIDs.js
@@ -1,6 +1,10 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
+
 const fs = require('fs');
 const walk = require('./walk');
 
diff --git a/scripts/headingIDHelpers/walk.js b/scripts/headingIDHelpers/walk.js
index 54cd500ca..f1ed5e0b3 100644
--- a/scripts/headingIDHelpers/walk.js
+++ b/scripts/headingIDHelpers/walk.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 const fs = require('fs');
 
 module.exports = function walk(dir) {
diff --git a/scripts/headingIdLinter.js b/scripts/headingIdLinter.js
index 6b8f75fc7..32116752b 100644
--- a/scripts/headingIdLinter.js
+++ b/scripts/headingIdLinter.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 const validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs');
 const generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs');
 
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index e64b486d1..177af2c56 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 65c0151ba..6b79a958f 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx
index 23c971756..bd98d5b38 100644
--- a/src/components/ButtonLink.tsx
+++ b/src/components/ButtonLink.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx
index 68e9cf7ec..8d13ec825 100644
--- a/src/components/DocsFooter.tsx
+++ b/src/components/DocsFooter.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
@@ -80,7 +87,7 @@ function FooterLink({
       />
       <div className="flex flex-col overflow-hidden">
         <span className="text-sm font-bold tracking-wide no-underline uppercase text-secondary dark:text-secondary-dark group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
-          {type}
+          {type === 'Previous' ? 'Previous' : 'Next'}
         </span>
         <span className="text-lg break-words group-hover:underline">
           {title}
diff --git a/src/components/ErrorDecoderContext.tsx b/src/components/ErrorDecoderContext.tsx
index 080969efe..77e9ebf7d 100644
--- a/src/components/ErrorDecoderContext.tsx
+++ b/src/components/ErrorDecoderContext.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 // Error Decoder requires reading pregenerated error message from getStaticProps,
 // but MDX component doesn't support props. So we use React Context to populate
 // the value without prop-drilling.
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
index 13fe6d3a9..ccd91fe9c 100644
--- a/src/components/ExternalLink.tsx
+++ b/src/components/ExternalLink.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconArrow.tsx b/src/components/Icon/IconArrow.tsx
index 61e4e52cd..2d0b9fecd 100644
--- a/src/components/Icon/IconArrow.tsx
+++ b/src/components/Icon/IconArrow.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx
index 4a3d3ad02..81301c047 100644
--- a/src/components/Icon/IconArrowSmall.tsx
+++ b/src/components/Icon/IconArrowSmall.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
@@ -19,6 +26,7 @@ export const IconArrowSmall = memo<
   const classes = cn(className, {
     'rotate-180': displayDirection === 'left',
     'rotate-180 rtl:rotate-0': displayDirection === 'start',
+    'rtl:rotate-180': displayDirection === 'end',
     'rotate-90': displayDirection === 'down',
   });
   return (
diff --git a/src/components/Icon/IconBsky.tsx b/src/components/Icon/IconBsky.tsx
index 5d461556f..ec930923d 100644
--- a/src/components/Icon/IconBsky.tsx
+++ b/src/components/Icon/IconBsky.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconCanary.tsx b/src/components/Icon/IconCanary.tsx
index 7f584fed7..97b9f7cef 100644
--- a/src/components/Icon/IconCanary.tsx
+++ b/src/components/Icon/IconCanary.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconChevron.tsx b/src/components/Icon/IconChevron.tsx
index 4d40330ce..15f34e153 100644
--- a/src/components/Icon/IconChevron.tsx
+++ b/src/components/Icon/IconChevron.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconClose.tsx b/src/components/Icon/IconClose.tsx
index d685fb217..dc4ad7c72 100644
--- a/src/components/Icon/IconClose.tsx
+++ b/src/components/Icon/IconClose.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconCodeBlock.tsx b/src/components/Icon/IconCodeBlock.tsx
index 755a2ae34..ba61f237e 100644
--- a/src/components/Icon/IconCodeBlock.tsx
+++ b/src/components/Icon/IconCodeBlock.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconCopy.tsx b/src/components/Icon/IconCopy.tsx
index 500cd4fda..f62134607 100644
--- a/src/components/Icon/IconCopy.tsx
+++ b/src/components/Icon/IconCopy.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconDeepDive.tsx b/src/components/Icon/IconDeepDive.tsx
index dfe1a928c..121391f33 100644
--- a/src/components/Icon/IconDeepDive.tsx
+++ b/src/components/Icon/IconDeepDive.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconDownload.tsx b/src/components/Icon/IconDownload.tsx
index c0e7f49c2..be551d83e 100644
--- a/src/components/Icon/IconDownload.tsx
+++ b/src/components/Icon/IconDownload.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconError.tsx b/src/components/Icon/IconError.tsx
index f101f62b2..966777fd4 100644
--- a/src/components/Icon/IconError.tsx
+++ b/src/components/Icon/IconError.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconExperimental.tsx b/src/components/Icon/IconExperimental.tsx
index 0bba612eb..c0dce97f4 100644
--- a/src/components/Icon/IconExperimental.tsx
+++ b/src/components/Icon/IconExperimental.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
@@ -6,7 +13,7 @@ import {memo} from 'react';
 
 export const IconExperimental = memo<
   JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
->(function IconCanary(
+>(function IconExperimental(
   {className, title, size} = {
     className: undefined,
     title: undefined,
diff --git a/src/components/Icon/IconFacebookCircle.tsx b/src/components/Icon/IconFacebookCircle.tsx
index 7f1080afa..dea2764d5 100644
--- a/src/components/Icon/IconFacebookCircle.tsx
+++ b/src/components/Icon/IconFacebookCircle.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconGitHub.tsx b/src/components/Icon/IconGitHub.tsx
index 1852f52f1..06c8f1556 100644
--- a/src/components/Icon/IconGitHub.tsx
+++ b/src/components/Icon/IconGitHub.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconHamburger.tsx b/src/components/Icon/IconHamburger.tsx
index 8bc90ee0c..5ab29fa37 100644
--- a/src/components/Icon/IconHamburger.tsx
+++ b/src/components/Icon/IconHamburger.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconHint.tsx b/src/components/Icon/IconHint.tsx
index b802bc79c..802382b5d 100644
--- a/src/components/Icon/IconHint.tsx
+++ b/src/components/Icon/IconHint.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconInstagram.tsx b/src/components/Icon/IconInstagram.tsx
index 79def08e3..00d25a909 100644
--- a/src/components/Icon/IconInstagram.tsx
+++ b/src/components/Icon/IconInstagram.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconLink.tsx b/src/components/Icon/IconLink.tsx
index e6e716d00..0f7d4dfed 100644
--- a/src/components/Icon/IconLink.tsx
+++ b/src/components/Icon/IconLink.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconNavArrow.tsx b/src/components/Icon/IconNavArrow.tsx
index f61175e9b..40fde8afe 100644
--- a/src/components/Icon/IconNavArrow.tsx
+++ b/src/components/Icon/IconNavArrow.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconNewPage.tsx b/src/components/Icon/IconNewPage.tsx
index dfa13bac9..aaf3e8157 100644
--- a/src/components/Icon/IconNewPage.tsx
+++ b/src/components/Icon/IconNewPage.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconNote.tsx b/src/components/Icon/IconNote.tsx
index 1510c91c7..82ed947b4 100644
--- a/src/components/Icon/IconNote.tsx
+++ b/src/components/Icon/IconNote.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconPitfall.tsx b/src/components/Icon/IconPitfall.tsx
index ee6247891..a80fc7d68 100644
--- a/src/components/Icon/IconPitfall.tsx
+++ b/src/components/Icon/IconPitfall.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconRestart.tsx b/src/components/Icon/IconRestart.tsx
index b4a6b62f5..976203c65 100644
--- a/src/components/Icon/IconRestart.tsx
+++ b/src/components/Icon/IconRestart.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconRocket.tsx b/src/components/Icon/IconRocket.tsx
index 457736c7c..c5bb2473a 100644
--- a/src/components/Icon/IconRocket.tsx
+++ b/src/components/Icon/IconRocket.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconRss.tsx b/src/components/Icon/IconRss.tsx
index 6208236f4..13029ec96 100644
--- a/src/components/Icon/IconRss.tsx
+++ b/src/components/Icon/IconRss.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconSearch.tsx b/src/components/Icon/IconSearch.tsx
index 917513561..1dda00eb2 100644
--- a/src/components/Icon/IconSearch.tsx
+++ b/src/components/Icon/IconSearch.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconSolution.tsx b/src/components/Icon/IconSolution.tsx
index 668e41afe..b0f1d44b3 100644
--- a/src/components/Icon/IconSolution.tsx
+++ b/src/components/Icon/IconSolution.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconTerminal.tsx b/src/components/Icon/IconTerminal.tsx
index 7b3a97a8c..66dfd47b7 100644
--- a/src/components/Icon/IconTerminal.tsx
+++ b/src/components/Icon/IconTerminal.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconThreads.tsx b/src/components/Icon/IconThreads.tsx
index 9ea0bafdf..72ded5201 100644
--- a/src/components/Icon/IconThreads.tsx
+++ b/src/components/Icon/IconThreads.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx
index e84971f4e..01802c253 100644
--- a/src/components/Icon/IconTwitter.tsx
+++ b/src/components/Icon/IconTwitter.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Icon/IconWarning.tsx b/src/components/Icon/IconWarning.tsx
index 83534ec5f..90b7cd41e 100644
--- a/src/components/Icon/IconWarning.tsx
+++ b/src/components/Icon/IconWarning.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 3ada276d0..6b0a9d838 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index ed5324d45..5603f7294 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 8c1219c2a..48c351ace 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
@@ -782,9 +789,7 @@ function CommunityGallery() {
   }, []);
 
   return (
-    <div
-      ref={ref}
-      className="relative flex overflow-x-hidden overflow-y-visible w-auto">
+    <div ref={ref} className="relative flex overflow-x-clip w-auto">
       <div
         className="w-full py-12 lg:py-20 whitespace-nowrap flex flex-row animate-marquee lg:animate-large-marquee"
         style={{
@@ -811,21 +816,26 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
         <div
           key={i}
           className={cn(
-            `group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative`
+            `group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl`
           )}>
           <div
             className={cn(
-              'h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300',
+              'h-auto rounded-2xl before:rounded-2xl before:absolute before:pointer-events-none before:inset-0 before:transition-opacity before:-z-1 before:shadow-lg lg:before:shadow-2xl before:opacity-0 before:group-hover:opacity-100  transition-transform ease-in-out duration-300',
               i % 2 === 0
-                ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl'
-                : 'group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]'
+                ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110'
+                : 'group-hover:rotate-1 group-hover:scale-110 rotate-[-2deg]'
             )}>
-            <img
-              loading={isLazy ? 'lazy' : 'eager'}
-              src={src}
-              alt={alt}
-              className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
-            />
+            <div
+              className={cn(
+                'overflow-clip relative before:absolute before:inset-0 before:pointer-events-none before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-transform ease-in-out duration-300'
+              )}>
+              <img
+                loading={isLazy ? 'lazy' : 'eager'}
+                src={src}
+                alt={alt}
+                className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
+              />
+            </div>
           </div>
         </div>
       ))}
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index c3224e517..89c25f46f 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/Sidebar/SidebarButton.tsx b/src/components/Layout/Sidebar/SidebarButton.tsx
index dc1f29a8d..744172bec 100644
--- a/src/components/Layout/Sidebar/SidebarButton.tsx
+++ b/src/components/Layout/Sidebar/SidebarButton.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index aadb6cf4d..5c01fefc3 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 72003df74..863355bfd 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index d0e291547..69664e6bc 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx
index 171270960..77beb4d72 100644
--- a/src/components/Layout/SidebarNav/SidebarNav.tsx
+++ b/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/SidebarNav/index.tsx b/src/components/Layout/SidebarNav/index.tsx
index b268bbd29..f9680d803 100644
--- a/src/components/Layout/SidebarNav/index.tsx
+++ b/src/components/Layout/SidebarNav/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx
index e4e7f6769..8a1b53a09 100644
--- a/src/components/Layout/Toc.tsx
+++ b/src/components/Layout/Toc.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/TopNav/BrandMenu.tsx b/src/components/Layout/TopNav/BrandMenu.tsx
index 3bd8776f2..218e423ce 100644
--- a/src/components/Layout/TopNav/BrandMenu.tsx
+++ b/src/components/Layout/TopNav/BrandMenu.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import {IconCopy} from 'components/Icon/IconCopy';
 import {IconDownload} from 'components/Icon/IconDownload';
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 02fea5dc7..08342d4b3 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/TopNav/index.tsx b/src/components/Layout/TopNav/index.tsx
index 8472fb126..e76fa5ed0 100644
--- a/src/components/Layout/TopNav/index.tsx
+++ b/src/components/Layout/TopNav/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx
index b3d14725d..5a85a3e21 100644
--- a/src/components/Layout/getRouteMeta.tsx
+++ b/src/components/Layout/getRouteMeta.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Layout/useTocHighlight.tsx b/src/components/Layout/useTocHighlight.tsx
index 544396c68..02385409f 100644
--- a/src/components/Layout/useTocHighlight.tsx
+++ b/src/components/Layout/useTocHighlight.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 8c4f7da4f..3ea4ba9ac 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/BlogCard.tsx b/src/components/MDX/BlogCard.tsx
index 1937cdc3c..3143ee262 100644
--- a/src/components/MDX/BlogCard.tsx
+++ b/src/components/MDX/BlogCard.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Challenges/Challenge.tsx b/src/components/MDX/Challenges/Challenge.tsx
index 3b8231061..53d97bd6c 100644
--- a/src/components/MDX/Challenges/Challenge.tsx
+++ b/src/components/MDX/Challenges/Challenge.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Challenges/Challenges.tsx b/src/components/MDX/Challenges/Challenges.tsx
index 344ea18ec..a9509b985 100644
--- a/src/components/MDX/Challenges/Challenges.tsx
+++ b/src/components/MDX/Challenges/Challenges.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx
index 736db093c..0511bd05a 100644
--- a/src/components/MDX/Challenges/Navigation.tsx
+++ b/src/components/MDX/Challenges/Navigation.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
@@ -108,7 +115,7 @@ export function Navigation({
           onClick={handleScrollLeft}
           aria-label="Scroll left"
           className={cn(
-            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r rtl:rotate-180',
+            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l rtl:rounded-r rtl:rounded-l-none border-gray-20 border-r rtl:border-l rtl:border-r-0',
             {
               'text-primary dark:text-primary-dark': canScrollLeft,
               'text-gray-30': !canScrollLeft,
@@ -120,7 +127,7 @@ export function Navigation({
           onClick={handleScrollRight}
           aria-label="Scroll right"
           className={cn(
-            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e rtl:rotate-180',
+            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e',
             {
               'text-primary dark:text-primary-dark': canScrollRight,
               'text-gray-30': !canScrollRight,
diff --git a/src/components/MDX/Challenges/index.tsx b/src/components/MDX/Challenges/index.tsx
index 413fd4611..27e3df1ef 100644
--- a/src/components/MDX/Challenges/index.tsx
+++ b/src/components/MDX/Challenges/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index 42165c57d..3eeac3945 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/CodeBlock/index.tsx b/src/components/MDX/CodeBlock/index.tsx
index 551c1d1b6..d3ed3a065 100644
--- a/src/components/MDX/CodeBlock/index.tsx
+++ b/src/components/MDX/CodeBlock/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/CodeDiagram.tsx b/src/components/MDX/CodeDiagram.tsx
index 2a198fc56..ba18ae973 100644
--- a/src/components/MDX/CodeDiagram.tsx
+++ b/src/components/MDX/CodeDiagram.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx
index 6044b1370..1847abc5c 100644
--- a/src/components/MDX/ConsoleBlock.tsx
+++ b/src/components/MDX/ConsoleBlock.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Diagram.tsx b/src/components/MDX/Diagram.tsx
index 649f48dff..579c86ebe 100644
--- a/src/components/MDX/Diagram.tsx
+++ b/src/components/MDX/Diagram.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/DiagramGroup.tsx b/src/components/MDX/DiagramGroup.tsx
index 6c5130a3d..8e3bf46c3 100644
--- a/src/components/MDX/DiagramGroup.tsx
+++ b/src/components/MDX/DiagramGroup.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx
index a9b7455df..423790198 100644
--- a/src/components/MDX/ErrorDecoder.tsx
+++ b/src/components/MDX/ErrorDecoder.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import {useEffect, useState} from 'react';
 import {useErrorDecoderParams} from '../ErrorDecoderContext';
 import cn from 'classnames';
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index 48634ffe5..0777e69cc 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/src/components/MDX/ExpandableCallout.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx
index d643f98e7..33db159f2 100644
--- a/src/components/MDX/ExpandableExample.tsx
+++ b/src/components/MDX/ExpandableExample.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx
index a9f3efc38..5890a3a48 100644
--- a/src/components/MDX/Heading.tsx
+++ b/src/components/MDX/Heading.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx
index 5759a7c0a..17e4683b9 100644
--- a/src/components/MDX/InlineCode.tsx
+++ b/src/components/MDX/InlineCode.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Intro.tsx b/src/components/MDX/Intro.tsx
index 0522df678..b0bee624d 100644
--- a/src/components/MDX/Intro.tsx
+++ b/src/components/MDX/Intro.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/LanguagesContext.tsx b/src/components/MDX/LanguagesContext.tsx
index 776a11c0d..cd9f88816 100644
--- a/src/components/MDX/LanguagesContext.tsx
+++ b/src/components/MDX/LanguagesContext.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Link.tsx b/src/components/MDX/Link.tsx
index 7bf041e56..8a47c401f 100644
--- a/src/components/MDX/Link.tsx
+++ b/src/components/MDX/Link.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index 2127c39f1..88d75d898 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
@@ -37,6 +44,7 @@ import {finishedTranslations} from 'utils/finishedTranslations';
 
 import ErrorDecoder from './ErrorDecoder';
 import {IconCanary} from '../Icon/IconCanary';
+import {IconExperimental} from 'components/Icon/IconExperimental';
 
 function CodeStep({children, step}: {children: any; step: number}) {
   return (
@@ -130,7 +138,7 @@ const ExperimentalBadge = ({title}: {title: string}) => (
     className={
       'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
     }>
-    <IconCanary
+    <IconExperimental
       size="s"
       className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
     />
diff --git a/src/components/MDX/PackageImport.tsx b/src/components/MDX/PackageImport.tsx
index 5e2da820e..222353ff5 100644
--- a/src/components/MDX/PackageImport.tsx
+++ b/src/components/MDX/PackageImport.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Recap.tsx b/src/components/MDX/Recap.tsx
index 9c5b08c8d..98059aa13 100644
--- a/src/components/MDX/Recap.tsx
+++ b/src/components/MDX/Recap.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/ClearButton.tsx b/src/components/MDX/Sandpack/ClearButton.tsx
new file mode 100644
index 000000000..be7451ab3
--- /dev/null
+++ b/src/components/MDX/Sandpack/ClearButton.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {IconClose} from '../../Icon/IconClose';
+export interface ClearButtonProps {
+  onClear: () => void;
+}
+
+export function ClearButton({onClear}: ClearButtonProps) {
+  return (
+    <button
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
+      onClick={onClear}
+      title="Clear all edits and reload sandbox"
+      type="button">
+      <IconClose className="inline mx-1 relative" />
+      <span className="hidden md:block">Clear</span>
+    </button>
+  );
+}
diff --git a/src/components/MDX/Sandpack/Console.tsx b/src/components/MDX/Sandpack/Console.tsx
index b5276fc13..3417e11f1 100644
--- a/src/components/MDX/Sandpack/Console.tsx
+++ b/src/components/MDX/Sandpack/Console.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
index c272bd669..f5c2f8e93 100644
--- a/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx
index 6314f4ae5..95ea9c89a 100644
--- a/src/components/MDX/Sandpack/DownloadButton.tsx
+++ b/src/components/MDX/Sandpack/DownloadButton.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/ErrorMessage.tsx b/src/components/MDX/Sandpack/ErrorMessage.tsx
index 7c67ee461..3dbeb113b 100644
--- a/src/components/MDX/Sandpack/ErrorMessage.tsx
+++ b/src/components/MDX/Sandpack/ErrorMessage.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/LoadingOverlay.tsx b/src/components/MDX/Sandpack/LoadingOverlay.tsx
index de883629c..1945f0c6f 100644
--- a/src/components/MDX/Sandpack/LoadingOverlay.tsx
+++ b/src/components/MDX/Sandpack/LoadingOverlay.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import {useState} from 'react';
 
 import {
diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index cf211a2d7..cd6b6883c 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
@@ -17,7 +24,8 @@ import {
   useSandpackNavigation,
 } from '@codesandbox/sandpack-react/unstyled';
 import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
-import {ResetButton} from './ResetButton';
+import {ReloadButton} from './ReloadButton';
+import {ClearButton} from './ClearButton';
 import {DownloadButton} from './DownloadButton';
 import {IconChevron} from '../../Icon/IconChevron';
 import {Listbox} from '@headlessui/react';
@@ -95,7 +103,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
     // Note: in a real useEvent, onContainerResize would be omitted.
   }, [isMultiFile, onContainerResize]);
 
-  const handleReset = () => {
+  const handleClear = () => {
     /**
      * resetAllFiles must come first, otherwise
      * the previous content will appear for a second
@@ -103,13 +111,20 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
      *
      * Plus, it should only prompt if there's any file changes
      */
+<<<<<<< HEAD
     if (
       sandpack.editorState === 'dirty' &&
       confirm('모든 수정 사항이 초기화됩니다. 계속하시겠습니까?')
     ) {
+=======
+    if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) {
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
       sandpack.resetAllFiles();
     }
+    refresh();
+  };
 
+  const handleReload = () => {
     refresh();
   };
 
@@ -188,7 +203,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
         className="px-3 flex items-center justify-end text-start"
         translate="yes">
         <DownloadButton providedFiles={providedFiles} />
-        <ResetButton onReset={handleReset} />
+        <ReloadButton onReload={handleReload} />
+        <ClearButton onClear={handleClear} />
         <OpenInCodeSandboxButton />
         {activeFile.endsWith('.tsx') && (
           <OpenInTypeScriptPlaygroundButton
diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
index d0a34ed83..ae1603c84 100644
--- a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
+++ b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
index 7284912e3..ca0286530 100644
--- a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
+++ b/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index e4fe0afe4..ead9341b6 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/ReloadButton.tsx b/src/components/MDX/Sandpack/ReloadButton.tsx
new file mode 100644
index 000000000..71a25ea47
--- /dev/null
+++ b/src/components/MDX/Sandpack/ReloadButton.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {IconRestart} from '../../Icon/IconRestart';
+export interface ReloadButtonProps {
+  onReload: () => void;
+}
+
+export function ReloadButton({onReload}: ReloadButtonProps) {
+  return (
+    <button
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
+      onClick={onReload}
+      title="Keep your edits and reload sandbox"
+      type="button">
+      <IconRestart className="inline mx-1 relative" />
+      <span className="hidden md:block">Reload</span>
+    </button>
+  );
+}
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
index 67f40d0b3..48d8daee5 100644
--- a/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/Themes.tsx b/src/components/MDX/Sandpack/Themes.tsx
index 3923470ca..8aa34dc95 100644
--- a/src/components/MDX/Sandpack/Themes.tsx
+++ b/src/components/MDX/Sandpack/Themes.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/createFileMap.ts b/src/components/MDX/Sandpack/createFileMap.ts
index 193b07be8..049face93 100644
--- a/src/components/MDX/Sandpack/createFileMap.ts
+++ b/src/components/MDX/Sandpack/createFileMap.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
@@ -9,6 +16,66 @@ export const AppJSPath = `/src/App.js`;
 export const StylesCSSPath = `/src/styles.css`;
 export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
 
+/**
+ * Tokenize meta attributes while ignoring brace-wrapped metadata (e.g. {expectedErrors: …}).
+ */
+function splitMeta(meta: string): string[] {
+  const tokens: string[] = [];
+  let current = '';
+  let depth = 0;
+  const trimmed = meta.trim();
+
+  for (let ii = 0; ii < trimmed.length; ii++) {
+    const char = trimmed[ii];
+
+    if (char === '{') {
+      if (depth === 0 && current) {
+        tokens.push(current);
+        current = '';
+      }
+      depth += 1;
+      continue;
+    }
+
+    if (char === '}') {
+      if (depth > 0) {
+        depth -= 1;
+      }
+      if (depth === 0) {
+        current = '';
+      }
+      if (depth < 0) {
+        throw new Error(`Unexpected closing brace in meta: ${meta}`);
+      }
+      continue;
+    }
+
+    if (depth > 0) {
+      continue;
+    }
+
+    if (/\s/.test(char)) {
+      if (current) {
+        tokens.push(current);
+        current = '';
+      }
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current) {
+    tokens.push(current);
+  }
+
+  if (depth !== 0) {
+    throw new Error(`Unclosed brace in meta: ${meta}`);
+  }
+
+  return tokens;
+}
+
 export const createFileMap = (codeSnippets: any) => {
   return codeSnippets.reduce(
     (result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
@@ -30,12 +97,17 @@ export const createFileMap = (codeSnippets: any) => {
       let fileActive = false; // if the file tab is shown by default
 
       if (props.meta) {
-        const [name, ...params] = props.meta.split(' ');
-        filePath = '/' + name;
-        if (params.includes('hidden')) {
+        const tokens = splitMeta(props.meta);
+        const name = tokens.find(
+          (token) => token.includes('/') || token.includes('.')
+        );
+        if (name) {
+          filePath = name.startsWith('/') ? name : `/${name}`;
+        }
+        if (tokens.includes('hidden')) {
           fileHidden = true;
         }
-        if (params.includes('active')) {
+        if (tokens.includes('active')) {
           fileActive = true;
         }
       } else {
@@ -50,6 +122,18 @@ export const createFileMap = (codeSnippets: any) => {
         }
       }
 
+      if (!filePath) {
+        if (props.className === 'language-js') {
+          filePath = AppJSPath;
+        } else if (props.className === 'language-css') {
+          filePath = StylesCSSPath;
+        } else {
+          throw new Error(
+            `Code block is missing a filename: ${props.children}`
+          );
+        }
+      }
+
       if (result[filePath]) {
         throw new Error(
           `File ${filePath} was defined multiple times. Each file snippet should have a unique path name`
diff --git a/src/components/MDX/Sandpack/index.tsx b/src/components/MDX/Sandpack/index.tsx
index 6755ba8de..08e7dd6f0 100644
--- a/src/components/MDX/Sandpack/index.tsx
+++ b/src/components/MDX/Sandpack/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/Sandpack/runESLint.tsx b/src/components/MDX/Sandpack/runESLint.tsx
index 5fea2f110..a0b835461 100644
--- a/src/components/MDX/Sandpack/runESLint.tsx
+++ b/src/components/MDX/Sandpack/runESLint.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 // @ts-nocheck
 
 import {Linter} from 'eslint/lib/linter/linter';
diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts
index dd6fd12bd..358c8616e 100644
--- a/src/components/MDX/Sandpack/template.ts
+++ b/src/components/MDX/Sandpack/template.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 export const template = {
   '/src/index.js': {
     hidden: true,
diff --git a/src/components/MDX/Sandpack/useSandpackLint.tsx b/src/components/MDX/Sandpack/useSandpackLint.tsx
index ec05fbe0d..479b53ee0 100644
--- a/src/components/MDX/Sandpack/useSandpackLint.tsx
+++ b/src/components/MDX/Sandpack/useSandpackLint.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx
index 51ce28dc1..c5149deb9 100644
--- a/src/components/MDX/SandpackWithHTMLOutput.tsx
+++ b/src/components/MDX/SandpackWithHTMLOutput.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import {Children, memo} from 'react';
 import InlineCode from './InlineCode';
 import Sandpack from './Sandpack';
diff --git a/src/components/MDX/SimpleCallout.tsx b/src/components/MDX/SimpleCallout.tsx
index ae259bcf5..0e124baa7 100644
--- a/src/components/MDX/SimpleCallout.tsx
+++ b/src/components/MDX/SimpleCallout.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 2c2fffa73..2d0c65537 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index 992f84c36..f9a0766e4 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/TocContext.tsx b/src/components/MDX/TocContext.tsx
index 8aeead370..924e6e09e 100644
--- a/src/components/MDX/TocContext.tsx
+++ b/src/components/MDX/TocContext.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/MDX/YouWillLearnCard.tsx b/src/components/MDX/YouWillLearnCard.tsx
index d46a70277..20fc3b5fe 100644
--- a/src/components/MDX/YouWillLearnCard.tsx
+++ b/src/components/MDX/YouWillLearnCard.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index 3f15afe95..760542750 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index c7401487b..24b066d70 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
index b8a8394b6..906041020 100644
--- a/src/components/Seo.tsx
+++ b/src/components/Seo.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index 4ca093022..da518ecb6 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -1,6 +1,8 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
 
 import {useRef, useEffect} from 'react';
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 6ae063568..f415d1b46 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
index 2fb2cd398..87a1b868f 100644
--- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -107,7 +107,11 @@ Activity는 여전히 연구 중이며, 라이브러리 개발자에게 노출
 
 이번 업데이트 외에도 우리 팀은 컨퍼런스에서 발표하고 팟캐스트 출연을 통해 우리의 작업에 관해 이야기를 나누고 질문에 답변했습니다.
 
+<<<<<<< HEAD
 - [Sathya Gunasekaran](/community/team#sathya-gunasekaran)은 [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) 컨퍼런스에서 React 컴파일러에 관해 이야기했습니다.
+=======
+- [Sathya Gunasekaran](https://github.com/gsathya) spoke about the React Compiler at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 - [Dan Abramov](/community/team#dan-abramov)은 [RemixConf](https://www.youtube.com/watch?v=zMf_xeGPn6s)에서 "다른 차원의 React"를 주제로 강연했습니다. 이곳에서 React 서버 컴포넌트와 액션을 어떻게 만들었는지에 관한 대안적인 역사를 탐구했습니다.
 
diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md
index 7e25ac7a6..db665e797 100644
--- a/src/content/blog/2024/10/21/react-compiler-beta-release.md
+++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md
@@ -72,11 +72,11 @@ Or, if you're using Yarn:
 yarn add -D eslint-plugin-react-compiler@beta
 </TerminalBlock>
 
-After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
+After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler/installation#eslint-integration). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
 
 ## Backwards Compatibility {/*backwards-compatibility*/}
 
-React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/learn/react-compiler#using-react-compiler-with-react-17-or-18).
+React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/reference/react-compiler/configuration#react-17-18).
 
 ## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/}
 
@@ -86,7 +86,7 @@ React Compiler can also be used to compile libraries. Because React Compiler nee
 
 Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
 
-[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries)
+[You can find more docs on this here.](/reference/react-compiler/compiling-libraries)
 
 ## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/}
 
diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md
index 44f939c70..c317504fb 100644
--- a/src/content/blog/2025/04/21/react-compiler-rc.md
+++ b/src/content/blog/2025/04/21/react-compiler-rc.md
@@ -57,7 +57,12 @@ RC에서는 React 컴파일러를 프로젝트에 더 쉽게 추가할 수 있
 
 RC 기간 동안 React 사용자들이 컴파일러를 사용해보시고 React 레포지토리에 피드백을 제공해 주시길 바랍니다. 버그나 예상치 못한 동작을 발견하면 [이슈](https://github.com/facebook/react/issues)를 등록해 주세요. 일반적인 질문이나 제안이 있다면 [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions)에 남겨 주시면 됩니다.
 
+<<<<<<< HEAD
 ## 하위 호환성 {/*backwards-compatibility*/}
+=======
+## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
+If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@rc`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 베타 발표 때 언급했듯이 React 컴파일러는 React 17 이상에서 호환됩니다. 아직 React 19로 업데이트하지 않았다면 컴파일러 설정에서 최소 타겟을 지정하고 `react-compiler-runtime`을 의존성에 추가하면 React 컴파일러를 사용할 수 있습니다. 자세한 방법은 [문서](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18)에서 확인할 수 있습니다.
 
@@ -70,19 +75,31 @@ RC 기간 동안 React 사용자들이 컴파일러를 사용해보시고 React
 npm
 
 <TerminalBlock>
+<<<<<<< HEAD
   {`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+=======
+{`npm install --save-dev eslint-plugin-react-hooks@rc`}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 </TerminalBlock>
 
 pnpm
 
 <TerminalBlock>
+<<<<<<< HEAD
   {`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+=======
+{`pnpm add --save-dev eslint-plugin-react-hooks@rc`}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 </TerminalBlock>
 
 yarn
 
 <TerminalBlock>
+<<<<<<< HEAD
   {`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+=======
+{`yarn add --dev eslint-plugin-react-hooks@rc`}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 </TerminalBlock>
 
 ```js
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index 86994ebda..82e252cbb 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -2495,7 +2495,11 @@ root.render(
 </ViewTransition>
 ```
 
+<<<<<<< HEAD
 그리고 [View Transition 클래스](/reference/react/ViewTransition#view-transition-classes)를 사용하여 CSS에서 `slow-fade`를 정의합니다.
+=======
+And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-class):
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ```css
 ::view-transition-old(.slow-fade) {
@@ -2521,7 +2525,7 @@ export default function App() {
   const { url } = useRouter();
 
   // Define a default animation of .slow-fade.
-  // See animations.css for the animation definiton.
+  // See animations.css for the animation definition.
   return (
     <ViewTransition default="slow-fade">
       {url === '/' ? <Home /> : <Details />}
@@ -11465,7 +11469,19 @@ _View Transition을 구축한 배경에 대한 자세한 내용은 다음을 참
 
 ## Activity {/*activity*/}
 
+<<<<<<< HEAD
 [지난](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen) [업데이트](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity)에서, 컴포넌트를 시각적으로 숨기고 우선순위를 지정 해제할 수 있는 API를 연구 중이며, CSS로 마운트 해제하거나 숨기는 것에 비해 성능 비용을 줄이면서 UI 상태를 유지할 수 있다고 공유한 바 있습니다.
+=======
+<Note>
+
+**`<Activity />` is now available in React’s Canary channel.**
+
+[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
+
+</Note>
+
+In [past](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen) [updates](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity), we shared that we were researching an API to allow components to be visually hidden and deprioritized, preserving UI state with reduced performance costs relative to unmounting or hiding with CSS.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 이제 API와 그 작동 방식을 공유할 준비가 되었고, 실험적인 React 버전에서 테스트를 시작할 수 있습니다.
 
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 583df23e6..16048996d 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,6 +10,7 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
+<<<<<<< HEAD
 ### CityJS London 2025 {/*cityjs-london*/}
 
 April 23 - 25, 2025. In-person in London, UK
@@ -41,6 +42,8 @@ July 03 - 05, 2025. In-person in Bangalore, India
 
 [Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
 
+=======
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 ### React Universe Conf 2025 {/*react-universe-conf-2025*/}
 September 2-4, 2025. Wrocław, Poland.
 
@@ -51,6 +54,11 @@ October 2-4, 2025. Alicante, Spain.
 
 [Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
 
+### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/}
+October 04, 2025. Nairobi, Kenya
+
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
+
 ### React Conf 2025 {/*react-conf-2025*/}
 October 7-8, 2025. Henderson, Nevada, USA and free livestream
 
@@ -61,6 +69,12 @@ October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15
 
 [Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
 
+
+### CityJS New Delhi 2025 {/*cityjs-newdelhi*/}
+November 6-7,  2025. In-person in New Delhi, India
+
+[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
 ### React Summit US 2025 {/*react-summit-us-2025*/}
 November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event)
 
@@ -71,13 +85,49 @@ November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)
 
 [Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
 
+### React Paris 2026 {/*react-paris-2026*/}
+March 26 - 27, 2026. In-person in Paris, France (hybrid event)
+
+[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
+
 
 ## Past Conferences {/*past-conferences*/}
 
+
+### React Nexus 2025 {/*react-nexus-2025*/}
+July 03 - 05, 2025. In-person in Bangalore, India
+
+[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
+### React Summit 2025 {/*react-summit-2025*/}
+June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
+
+### React Norway 2025 {/*react-norway-2025*/}
+June 13, 2025. In-person in Oslo, Norway + remote (virtual event)
+
+[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
+
+### CityJS Athens 2025 {/*cityjs-athens*/}
+May 27 - 31, 2025. In-person in Athens, Greece
+
+[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### App.js Conf 2025 {/*appjs-conf-2025*/}
+May 28 - 30, 2025. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### CityJS London 2025 {/*cityjs-london*/}
+April 23 - 25, 2025. In-person in London, UK
+
+[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) -  [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
 ### React Paris 2025 {/*react-paris-2025*/}
 March 20 - 21, 2025. In-person in Paris, France (hybrid event)
 
-[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
+[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj)
 
 ### React Native Connection 2025 {/*react-native-connection-2025*/}
 April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France.
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index b4da5cdff..78d48093a 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -58,6 +58,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
 * [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
 * [React Advanced London](https://guild.host/react-advanced-london)
+* [React Native Liverpool](https://www.meetup.com/react-native-liverpool/)
 * [React Native London](https://guild.host/RNLDN)
 
 ## Finland {/*finland*/}
@@ -138,7 +139,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Lisbon](https://www.meetup.com/JavaScript-Lisbon/)
 
 ## Scotland (UK) {/*scotland-uk*/}
-* [Edinburgh](https://www.meetup.com/React-Scotland/)
+* [Edinburgh](https://www.meetup.com/react-edinburgh/)
 
 ## Spain {/*spain*/}
 * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
diff --git a/src/content/community/videos.md b/src/content/community/videos.md
index cb14245d9..eb783f875 100644
--- a/src/content/community/videos.md
+++ b/src/content/community/videos.md
@@ -8,6 +8,75 @@ React와 React 생태계<sup>Ecosystem</sup>에 대한 토론 영상들입니다
 
 </Intro>
 
+## React Conf 2024 {/*react-conf-2024*/}
+
+At React Conf 2024, Meta CTO [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) shared a welcome message to kick off the conference:
+
+<YouTubeIframe src="https://www.youtube.com/embed/T8TZQ6k4SLE?t=975s" title="Boz and Seth Intro" />
+
+### React 19 Keynote {/*react-19-keynote*/}
+
+In the Day 1 keynote, we shared vision for React starting with React 19 and the React Compiler. Watch the full keynote from [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Andrew Clark](https://twitter.com/acdlite), [Josh Story](https://twitter.com/joshcstory), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei):
+
+
+<YouTubeIframe src="https://www.youtube.com/embed/lyEKhv8-3n0" title="YouTube video player" />
+
+### React Unpacked: A Roadmap to React 19 {/*react-unpacked-a-roadmap-to-react-19*/}
+
+React 19 introduced new features including Actions, `use()`, `useOptimistic` and more. For a deep dive on using new features in React 19, see [Sam Selikoff's](https://twitter.com/samselikoff) talk:
+
+<YouTubeIframe src="https://www.youtube.com/embed/R0B2HsSM78s" title="React Unpacked: A Roadmap to React 19" />
+
+### What's New in React 19 {/*whats-new-in-react-19*/}
+
+[Lydia Hallie](https://twitter.com/lydiahallie) gave a visual deep dive of React 19's new features:
+
+<YouTubeIframe src="https://www.youtube.com/embed/AJOGzVygGcY" title="What's New in React 19" />
+
+### React 19 Deep Dive: Coordinating HTML {/*react-19-deep-dive-coordinating-html*/}
+
+[Josh Story](https://twitter.com/joshcstory) provided a deep dive on the document and resource streaming APIs in React 19:
+
+<YouTubeIframe src="https://www.youtube.com/embed/IBBN-s77YSI" title="React 19 Deep Dive: Coordinating HTML" />
+
+### React for Two Computers {/*react-for-two-computers*/}
+
+[Dan Abramov](https://bsky.app/profile/danabra.mov) imagined an alternate history where React started server-first:
+
+<YouTubeIframe src="https://www.youtube.com/embed/ozI4V_29fj4" title="React for Two Computers" />
+
+### Forget About Memo {/*forget-about-memo*/}
+
+[Lauren Tan](https://twitter.com/potetotes) gave a talk on using the React Compiler in practice:
+
+<YouTubeIframe src="https://www.youtube.com/embed/lvhPq5chokM" title="Forget About Memo" />
+
+### React Compiler Deep Dive {/*react-compiler-deep-dive*/}
+
+[Sathya Gunasekaran](https://twitter.com/_gsathya) and [Mofei Zhang](https://twitter.com/zmofei) provided a deep dive on how the React Compiler works:
+
+<YouTubeIframe src="https://www.youtube.com/embed/uA_PVyZP7AI" title="React Compiler Deep Dive" />
+
+### And more... {/*and-more-2024*/}
+
+**We also heard talks from the community on Server Components:**
+* [Enhancing Forms with React Server Components](https://www.youtube.com/embed/0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff)
+* [And Now You Understand React Server Components](https://www.youtube.com/embed/pOo7x8OiAec) by [Kent C. Dodds](https://twitter.com/kentcdodds)
+* [Real-time Server Components](https://www.youtube.com/embed/6sMANTHWtLM) by [Sunil Pai](https://twitter.com/threepointone)
+
+**Talks from React frameworks using new features:**
+
+* [Vanilla React](https://www.youtube.com/embed/ZcwA0xt8FlQ) by [Ryan Florence](https://twitter.com/ryanflorence)
+* [React Rhythm & Blues](https://www.youtube.com/embed/rs9X5MjvC4s) by [Lee Robinson](https://twitter.com/leeerob)
+* [RedwoodJS, now with React Server Components](https://www.youtube.com/embed/sjyY4MTECUU) by [Amy Dutton](https://twitter.com/selfteachme)
+* [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/embed/djhEgxQf3Kw) by [Evan Bacon](https://twitter.com/Baconbrix)
+
+**And Q&As with the React and React Native teams:**
+- [React Q&A](https://www.youtube.com/embed/T8TZQ6k4SLE&t=27518s) hosted by [Michael Chan](https://twitter.com/chantastic)
+- [React Native Q&A](https://www.youtube.com/embed/0ckOUBiuxVY&t=27935s) hosted by [Jamon Holmgren](https://twitter.com/jamonholmgren)
+
+You can watch all of the talks at React Conf 2024 at [conf2024.react.dev](https://conf2024.react.dev/talks).
+
 ## React Conf 2021 {/*react-conf-2021*/}
 
 ### React 18 기조연설 {/*react-18-keynote*/}
@@ -16,13 +85,13 @@ React와 React 생태계<sup>Ecosystem</sup>에 대한 토론 영상들입니다
 
 [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), 그리고 [Rick Hanlon](https://twitter.com/rickhanlonii)의 전체 기조연설 보기.
 
-<YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="React 18 Keynote" />
 
 ### 애플리케이션 개발자를 위한 React 18 {/*react-18-for-application-developers*/}
 
 React 18로 업그레이드하는 데모는 여기에서 [Shruti Kapoor](https://twitter.com/shrutikapoor08)의 강연을 참조하세요.
 
-<YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="React 18 for Application Developers" />
 
 ### Suspense가 있는 스트리밍 서버 렌더링 {/*streaming-server-rendering-with-suspense*/}
 
@@ -32,7 +101,7 @@ React 18에는 Suspense를 사용한 서버 측 렌더링 성능 개선 사항
 
 더 자세히 알아보려면 [Shaundai Person](https://twitter.com/shaundai)의 강연을 참조하세요.
 
-<YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="Streaming Server Rendering with Suspense" />
 
 ### 첫 번째 React 워킹 그룹 {/*the-first-react-working-group*/}
 
@@ -40,7 +109,7 @@ React 18에서는 전문가, 개발자, 라이브러리 관리자, 교육자들
 
 이 작업에 대한 개요는 [Aakansha' Doshi](https://twitter.com/aakansha1216)의 강연을 참조하세요.
 
-<YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="The first React working group" />
 
 ### React 개발자 도구 {/*react-developer-tooling*/}
 
@@ -48,19 +117,19 @@ React 18에서는 전문가, 개발자, 라이브러리 관리자, 교육자들
 
 새로운 개발자 도구 기능에 대한 자세한 내용과 데모는 [Brian Vaughn](https://twitter.com/brian_d_vaughn)의 강연을 참조하세요.
 
-<YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="React Developer Tooling" />
 
 ### memo 없는 React {/*react-without-memo*/}
 
 미래를 내다보며, [Xuan Huang(黄玄)](https://twitter.com/Huxpro)이 자동 메모화 컴파일러에 대한 React Labs 연구의 업데이트를 공유했습니다. 이 강연에서 자세한 정보와 컴파일러 프로토타입 데모를 확인하세요.
 
-<YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="React without memo" />
 
 ### React 문서 기조연설 {/*react-docs-keynote*/}
 
 [Rachel Nabors](https://twitter.com/rachelnabors)가 React의 새 문서에 대한 투자와 관련한 기조연설로 React로 학습하고 디자인하는 방법에 대한 강연을 시작했습니다. ([현재 react.dev로 제공됨](/blog/2023/03/16/introducing-react-dev).)
 
-<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="React docs keynote" />
 
 ### 그리고... {/*and-more*/}
 
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index f6f212b83..209a3cbc0 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -24,7 +24,11 @@ title: 기존 프로젝트에 React 추가하기
 2. 사용하는 프레임워크 설정에서 **`/some-app` 을 *기본 경로*<sup>*Base Path*</sup>로 명시하세요**. (이때, [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)를 사용하세요!)
 3. **서버 또는 프록시를 구성**하여 `/some-app/` 하위의 모든 요청이 React 앱에서 처리되도록 하세요.
 
+<<<<<<< HEAD
 이는 앱의 React 부분이 이러한 프레임워크에 내장된 [최고의 사례들<sup>Best Practices</sup>로부터 이점을 얻을 수 있습니다.](/learn/start-a-new-react-project#can-i-use-react-without-a-framework)
+=======
+This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 많은 React 기반의 프레임워크는 풀스택이며 React 앱이 서버를 활용할 수 있도록 합니다. 그러나 서버에서 자바스크립트를 실행할 수 없거나 실행하고 싶지 않은 경우에도 동일한 접근방식을 사용할 수 있습니다. 이러한 경우에는 HTML/CSS/JS 내보내기(Next.js의 경우 [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby의 경우 기본값)를 `/some-app/`에서 대신 제공하세요.
 
diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md
index b3f1a0fc8..802c4c25a 100644
--- a/src/content/learn/build-a-react-app-from-scratch.md
+++ b/src/content/learn/build-a-react-app-from-scratch.md
@@ -122,7 +122,11 @@ GraphQL API에서 데이터를 가져온다면 다음을 사용할 것을 제안
 
 ### 애플리케이션 성능 향상 {/*improving-application-performance*/}
 
+<<<<<<< HEAD
 선택한 빌드 도구가 단일 페이지 앱(SPA)만 지원하므로, 서버 측 렌더링(SSR), 정적 사이트 생성(SSG), 그리고/또는 React 서버 컴포넌트(RSC)와 같은 다른 [렌더링 패턴](https://www.patterns.dev/vanilla/rendering-patterns)을 구현해야 합니다. 처음에는 이러한 기능이 필요 없더라도, 나중에는 일부 라우트가 SSR, SSG 또는 RSC의 이점을 얻을 수 있습니다.
+=======
+Since the build tool you select only supports single page apps (SPAs), you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 * **단일 페이지 앱 (SPA)** 은 단일 HTML 페이지를 로드하고 사용자가 앱과 상호작용을 할 때 페이지를 동적으로 업데이트합니다. SPA는 시작하기는 더 쉽지만, 초기 로드 시간이 느릴 수 있습니다. SPA는 대부분의 빌드 도구에서 기본 아키텍처입니다.
 
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 5f24071b2..3b9917155 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -473,7 +473,7 @@ h2 { font-size: 20px; }
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [5]}}
 let guest = 0;
 
 function Cup() {
diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md
index 8cf840b06..0d96577cf 100644
--- a/src/content/learn/escape-hatches.md
+++ b/src/content/learn/escape-hatches.md
@@ -201,7 +201,7 @@ Effect가 필요하지 않은 두 가지 일반적인 경우가 있습니다.
 
 예를 들어, 다른 State에 따라 일부 State를 조정하는 데는 Effect가 필요하지 않습니다.
 
-```js {5-9}
+```js {expectedErrors: {'react-compiler': [8]}} {5-9}
 function Form() {
   const [firstName, setFirstName] = useState('Taylor');
   const [lastName, setLastName] = useState('Swift');
diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index c5c0d13c5..868dab852 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -93,7 +93,7 @@ React의 렌더링 과정은 항상 순수해야 합니다. 컴포넌트는 JSX
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [5]}}
 let guest = 0;
 
 function Cup() {
@@ -378,7 +378,7 @@ body > * {
 
 <Sandpack>
 
-```js src/Profile.js
+```js {expectedErrors: {'react-compiler': [7]}} src/Profile.js
 import Panel from './Panel.js';
 import { getImageUrl } from './utils.js';
 
@@ -600,7 +600,7 @@ export default function StoryTray({ stories }) {
 }
 ```
 
-```js src/App.js hidden
+```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
@@ -696,7 +696,7 @@ export default function StoryTray({ stories }) {
 }
 ```
 
-```js src/App.js hidden
+```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
@@ -788,7 +788,7 @@ export default function StoryTray({ stories }) {
 }
 ```
 
-```js src/App.js hidden
+```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md
index 3572c280f..f61ac0e6d 100644
--- a/src/content/learn/lifecycle-of-reactive-effects.md
+++ b/src/content/learn/lifecycle-of-reactive-effects.md
@@ -1132,7 +1132,7 @@ body {
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [16]}}
 import { useState, useEffect } from 'react';
 
 export default function App() {
@@ -1375,7 +1375,7 @@ export default function App() {
 }
 ```
 
-```js src/ChatRoom.js active
+```js {expectedErrors: {'react-compiler': [8]}} src/ChatRoom.js active
 import { useState, useEffect } from 'react';
 
 export default function ChatRoom({ roomId, createConnection }) {
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 7bc118d6a..a94b8e06a 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -211,7 +211,11 @@ li {
 
 이 문제를 해결하는 한 방법은 부모 요소에서 단일 ref를 얻고, [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)과 같은 DOM 조작 메서드를 사용하여 그 안에서 개별 자식 노드를 "찾는" 것입니다. 하지만 이는 다루기가 힘들며 DOM 구조가 바뀌는 경우 작동하지 않을 수 있습니다.
 
+<<<<<<< HEAD
 또 다른 해결책은 **`ref` 어트리뷰트에 함수를 전달하는 것**입니다. 이것을 [`ref` 콜백](/reference/react-dom/components/common#ref-callback)이라고 합니다. React는 ref를 설정할 때 DOM 노드와 함께 ref 콜백을 호출하며, ref를 지울 때에는 null을 전달합니다. 이를 통해 자체 배열이나 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)을 유지하고, 인덱스나 특정 ID를 사용하여 어떤 ref에든 접근할 수 있습니다.
+=======
+Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and call the cleanup function returned from the callback when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 아래 예시는 긴 목록에서 특정 노드에 스크롤 하기 위해 앞에서 말한 접근법을 사용합니다.
 
@@ -247,13 +251,13 @@ export default function CatFriends() {
       <nav>
         <button onClick={() => scrollToCat(catList[0])}>Neo</button>
         <button onClick={() => scrollToCat(catList[5])}>Millie</button>
-        <button onClick={() => scrollToCat(catList[9])}>Bella</button>
+        <button onClick={() => scrollToCat(catList[8])}>Bella</button>
       </nav>
       <div>
         <ul>
           {catList.map((cat) => (
             <li
-              key={cat}
+              key={cat.id}
               ref={(node) => {
                 const map = getMap();
                 map.set(cat, node);
@@ -263,7 +267,7 @@ export default function CatFriends() {
                 };
               }}
             >
-              <img src={cat} />
+              <img src={cat.imageUrl} />
             </li>
           ))}
         </ul>
@@ -273,11 +277,22 @@ export default function CatFriends() {
 }
 
 function setupCatList() {
-  const catList = [];
-  for (let i = 0; i < 10; i++) {
-    catList.push("https://loremflickr.com/320/240/cat?lock=" + i);
+  const catCount = 10;
+  const catList = new Array(catCount)
+  for (let i = 0; i < catCount; i++) {
+    let imageUrl = '';
+    if (i < 5) {
+      imageUrl = "https://placecats.com/neo/320/240";
+    } else if (i < 8) {
+      imageUrl = "https://placecats.com/millie/320/240";
+    } else {
+      imageUrl = "https://placecats.com/bella/320/240";
+    }
+    catList[i] = {
+      id: i,
+      imageUrl,
+    };
   }
-
   return catList;
 }
 
@@ -879,12 +894,30 @@ export default function CatFriends() {
   );
 }
 
-const catList = [];
-for (let i = 0; i < 10; i++) {
-  catList.push({
+const catCount = 10;
+const catList = new Array(catCount);
+for (let i = 0; i < catCount; i++) {
+  const bucket = Math.floor(Math.random() * catCount) % 2;
+  let imageUrl = '';
+  switch (bucket) {
+    case 0: {
+      imageUrl = "https://placecats.com/neo/250/200";
+      break;
+    }
+    case 1: {
+      imageUrl = "https://placecats.com/millie/250/200";
+      break;
+    }
+    case 2:
+    default: {
+      imageUrl = "https://placecats.com/bella/250/200";
+      break;
+    }
+  }
+  catList[i] = {
     id: i,
-    imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
-  });
+    imageUrl,
+  };
 }
 
 ```
@@ -996,12 +1029,30 @@ export default function CatFriends() {
   );
 }
 
-const catList = [];
-for (let i = 0; i < 10; i++) {
-  catList.push({
+const catCount = 10;
+const catList = new Array(catCount);
+for (let i = 0; i < catCount; i++) {
+  const bucket = Math.floor(Math.random() * catCount) % 2;
+  let imageUrl = '';
+  switch (bucket) {
+    case 0: {
+      imageUrl = "https://placecats.com/neo/250/200";
+      break;
+    }
+    case 1: {
+      imageUrl = "https://placecats.com/millie/250/200";
+      break;
+    }
+    case 2:
+    default: {
+      imageUrl = "https://placecats.com/bella/250/200";
+      break;
+    }
+  }
+  catList[i] = {
     id: i,
-    imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
-  });
+    imageUrl,
+  };
 }
 
 ```
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index e5b4b5d0d..c0eca03f4 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -703,7 +703,7 @@ label {
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [7]}}
 import { useState } from 'react';
 
 export default function MyComponent() {
diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md
new file mode 100644
index 000000000..1883125a6
--- /dev/null
+++ b/src/content/learn/react-compiler/debugging.md
@@ -0,0 +1,93 @@
+---
+title: Debugging and Troubleshooting
+---
+
+<Intro>
+This guide helps you identify and fix issues when using React Compiler. Learn how to debug compilation problems and resolve common issues.
+</Intro>
+
+<YouWillLearn>
+
+* The difference between compiler errors and runtime issues
+* Common patterns that break compilation
+* Step-by-step debugging workflow
+
+</YouWillLearn>
+
+## Understanding Compiler Behavior {/*understanding-compiler-behavior*/}
+
+React Compiler is designed to handle code that follows the [Rules of React](/reference/rules). When it encounters code that might break these rules, it safely skips optimization rather than risk changing your app's behavior.
+
+### Compiler Errors vs Runtime Issues {/*compiler-errors-vs-runtime-issues*/}
+
+**Compiler errors** occur at build time and prevent your code from compiling. These are rare because the compiler is designed to skip problematic code rather than fail.
+
+**Runtime issues** occur when compiled code behaves differently than expected. Most of the time, if you encounter an issue with React Compiler, it's a runtime issue. This typically happens when your code violates the Rules of React in subtle ways that the compiler couldn't detect, and the compiler mistakenly compiled a component it should have skipped.
+
+When debugging runtime issues, focus your efforts on finding Rules of React violations in the affected components that were not detected by the ESLint rule. The compiler relies on your code following these rules, and when they're broken in ways it can't detect, that's when runtime problems occur.
+
+
+## Common Breaking Patterns {/*common-breaking-patterns*/}
+
+One of the main ways React Compiler can break your app is if your code was written to rely on memoization for correctness. This means your app depends on specific values being memoized to work properly. Since the compiler may memoize differently than your manual approach, this can lead to unexpected behavior like effects over-firing, infinite loops, or missing updates.
+
+Common scenarios where this occurs:
+
+- **Effects that rely on referential equality** - When effects depend on objects or arrays maintaining the same reference across renders
+- **Dependency arrays that need stable references** - When unstable dependencies cause effects to fire too often or create infinite loops
+- **Conditional logic based on reference checks** - When code uses referential equality checks for caching or optimization
+
+## Debugging Workflow {/*debugging-workflow*/}
+
+Follow these steps when you encounter issues:
+
+### Compiler Build Errors {/*compiler-build-errors*/}
+
+If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [facebook/react](https://github.com/facebook/react/issues) repository with:
+- The error message
+- The code that caused the error
+- Your React and compiler versions
+
+### Runtime Issues {/*runtime-issues*/}
+
+For runtime behavior issues:
+
+### 1. Temporarily Disable Compilation {/*temporarily-disable-compilation*/}
+
+Use `"use no memo"` to isolate whether an issue is compiler-related:
+
+```js
+function ProblematicComponent() {
+  "use no memo"; // Skip compilation for this component
+  // ... rest of component
+}
+```
+
+If the issue disappears, it's likely related to a Rules of React violation.
+
+You can also try removing manual memoization (useMemo, useCallback, memo) from the problematic component to verify that your app works correctly without any memoization. If the bug still occurs when all memoization is removed, you have a Rules of React violation that needs to be fixed.
+
+### 2. Fix Issues Step by Step {/*fix-issues-step-by-step*/}
+
+1. Identify the root cause (often memoization-for-correctness)
+2. Test after each fix
+3. Remove `"use no memo"` once fixed
+4. Verify the component shows the ✨ badge in React DevTools
+
+## Reporting Compiler Bugs {/*reporting-compiler-bugs*/}
+
+If you believe you've found a compiler bug:
+
+1. **Verify it's not a Rules of React violation** - Check with ESLint
+2. **Create a minimal reproduction** - Isolate the issue in a small example
+3. **Test without the compiler** - Confirm the issue only occurs with compilation
+4. **File an [issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml)**:
+   - React and compiler versions
+   - Minimal reproduction code
+   - Expected vs actual behavior
+   - Any error messages
+
+## Next Steps {/*next-steps*/}
+
+- Review the [Rules of React](/reference/rules) to prevent issues
+- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies
\ No newline at end of file
diff --git a/src/content/learn/react-compiler/incremental-adoption.md b/src/content/learn/react-compiler/incremental-adoption.md
new file mode 100644
index 000000000..56d932034
--- /dev/null
+++ b/src/content/learn/react-compiler/incremental-adoption.md
@@ -0,0 +1,225 @@
+---
+title: Incremental Adoption
+---
+
+<Intro>
+React Compiler can be adopted incrementally, allowing you to try it on specific parts of your codebase first. This guide shows you how to gradually roll out the compiler in existing projects.
+</Intro>
+
+<YouWillLearn>
+
+* Why incremental adoption is recommended
+* Using Babel overrides for directory-based adoption
+* Using the "use memo" directive for opt-in compilation
+* Using the "use no memo" directive to exclude components
+* Runtime feature flags with gating
+* Monitoring your adoption progress
+
+</YouWillLearn>
+
+## Why Incremental Adoption? {/*why-incremental-adoption*/}
+
+React Compiler is designed to optimize your entire codebase automatically, but you don't have to adopt it all at once. Incremental adoption gives you control over the rollout process, letting you test the compiler on small parts of your app before expanding to the rest.
+
+Starting small helps you build confidence in the compiler's optimizations. You can verify that your app behaves correctly with compiled code, measure performance improvements, and identify any edge cases specific to your codebase. This approach is especially valuable for production applications where stability is critical.
+
+Incremental adoption also makes it easier to address any Rules of React violations the compiler might find. Instead of fixing violations across your entire codebase at once, you can tackle them systematically as you expand compiler coverage. This keeps the migration manageable and reduces the risk of introducing bugs.
+
+By controlling which parts of your code get compiled, you can also run A/B tests to measure the real-world impact of the compiler's optimizations. This data helps you make informed decisions about full adoption and demonstrates the value to your team.
+
+## Approaches to Incremental Adoption {/*approaches-to-incremental-adoption*/}
+
+There are three main approaches to adopt React Compiler incrementally:
+
+1. **Babel overrides** - Apply the compiler to specific directories
+2. **Opt-in with "use memo"** - Only compile components that explicitly opt in
+3. **Runtime gating** - Control compilation with feature flags
+
+All approaches allow you to test the compiler on specific parts of your application before full rollout.
+
+## Directory-Based Adoption with Babel Overrides {/*directory-based-adoption*/}
+
+Babel's `overrides` option lets you apply different plugins to different parts of your codebase. This is ideal for gradually adopting React Compiler directory by directory.
+
+### Basic Configuration {/*basic-configuration*/}
+
+Start by applying the compiler to a specific directory:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    // Global plugins that apply to all files
+  ],
+  overrides: [
+    {
+      test: './src/modern/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        'babel-plugin-react-compiler'
+      ]
+    }
+  ]
+};
+```
+
+### Expanding Coverage {/*expanding-coverage*/}
+
+As you gain confidence, add more directories:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    // Global plugins
+  ],
+  overrides: [
+    {
+      test: ['./src/modern/**/*.{js,jsx,ts,tsx}', './src/features/**/*.{js,jsx,ts,tsx}'],
+      plugins: [
+        'babel-plugin-react-compiler'
+      ]
+    },
+    {
+      test: './src/legacy/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        // Different plugins for legacy code
+      ]
+    }
+  ]
+};
+```
+
+### With Compiler Options {/*with-compiler-options*/}
+
+You can also configure compiler options per override:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [],
+  overrides: [
+    {
+      test: './src/experimental/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        ['babel-plugin-react-compiler', {
+          // options ...
+        }]
+      ]
+    },
+    {
+      test: './src/production/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        ['babel-plugin-react-compiler', {
+          // options ...
+        }]
+      ]
+    }
+  ]
+};
+```
+
+
+## Opt-in Mode with "use memo" {/*opt-in-mode-with-use-memo*/}
+
+For maximum control, you can use `compilationMode: 'annotation'` to only compile components and hooks that explicitly opt in with the `"use memo"` directive.
+
+<Note>
+This approach gives you fine-grained control over individual components and hooks. It's useful when you want to test the compiler on specific components without affecting entire directories.
+</Note>
+
+### Annotation Mode Configuration {/*annotation-mode-configuration*/}
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'annotation',
+    }],
+  ],
+};
+```
+
+### Using the Directive {/*using-the-directive*/}
+
+Add `"use memo"` at the beginning of functions you want to compile:
+
+```js
+function TodoList({ todos }) {
+  "use memo"; // Opt this component into compilation
+
+  const sortedTodos = todos.slice().sort();
+
+  return (
+    <ul>
+      {sortedTodos.map(todo => (
+        <TodoItem key={todo.id} todo={todo} />
+      ))}
+    </ul>
+  );
+}
+
+function useSortedData(data) {
+  "use memo"; // Opt this hook into compilation
+
+  return data.slice().sort();
+}
+```
+
+With `compilationMode: 'annotation'`, you must:
+- Add `"use memo"` to every component you want optimized
+- Add `"use memo"` to every custom hook
+- Remember to add it to new components
+
+This gives you precise control over which components are compiled while you evaluate the compiler's impact.
+
+## Runtime Feature Flags with Gating {/*runtime-feature-flags-with-gating*/}
+
+The `gating` option enables you to control compilation at runtime using feature flags. This is useful for running A/B tests or gradually rolling out the compiler based on user segments.
+
+### How Gating Works {/*how-gating-works*/}
+
+The compiler wraps optimized code in a runtime check. If the gate returns `true`, the optimized version runs. Otherwise, the original code runs.
+
+### Gating Configuration {/*gating-configuration*/}
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      gating: {
+        source: 'ReactCompilerFeatureFlags',
+        importSpecifierName: 'isCompilerEnabled',
+      },
+    }],
+  ],
+};
+```
+
+### Implementing the Feature Flag {/*implementing-the-feature-flag*/}
+
+Create a module that exports your gating function:
+
+```js
+// ReactCompilerFeatureFlags.js
+export function isCompilerEnabled() {
+  // Use your feature flag system
+  return getFeatureFlag('react-compiler-enabled');
+}
+```
+
+## Troubleshooting Adoption {/*troubleshooting-adoption*/}
+
+If you encounter issues during adoption:
+
+1. Use `"use no memo"` to temporarily exclude problematic components
+2. Check the [debugging guide](/learn/react-compiler/debugging) for common issues
+3. Fix Rules of React violations identified by the ESLint plugin
+4. Consider using `compilationMode: 'annotation'` for more gradual adoption
+
+## Next Steps {/*next-steps*/}
+
+- Read the [configuration guide](/reference/react-compiler/configuration) for more options
+- Learn about [debugging techniques](/learn/react-compiler/debugging)
+- Check the [API reference](/reference/react-compiler/configuration) for all compiler options
\ No newline at end of file
diff --git a/src/content/learn/react-compiler/index.md b/src/content/learn/react-compiler/index.md
new file mode 100644
index 000000000..480187ed5
--- /dev/null
+++ b/src/content/learn/react-compiler/index.md
@@ -0,0 +1,33 @@
+---
+title: React Compiler
+---
+
+## Introduction {/*introduction*/}
+
+Learn [what React Compiler does](/learn/react-compiler/introduction) and how it automatically optimizes your React application by handling memoization for you, eliminating the need for manual `useMemo`, `useCallback`, and `React.memo`.
+
+## Installation {/*installation*/}
+
+Get started with [installing React Compiler](/learn/react-compiler/installation) and learn how to configure it with your build tools.
+
+
+## Incremental Adoption {/*incremental-adoption*/}
+
+Learn [strategies for gradually adopting React Compiler](/learn/react-compiler/incremental-adoption) in your existing codebase if you're not ready to enable it everywhere yet.
+
+## Debugging and Troubleshooting {/*debugging-and-troubleshooting*/}
+
+When things don't work as expected, use our [debugging guide](/learn/react-compiler/debugging) to understand the difference between compiler errors and runtime issues, identify common breaking patterns, and follow a systematic debugging workflow.
+
+## Configuration and Reference {/*configuration-and-reference*/}
+
+For detailed configuration options and API reference:
+
+- [Configuration Options](/reference/react-compiler/configuration) - All compiler configuration options including React version compatibility
+- [Directives](/reference/react-compiler/directives) - Function-level compilation control
+- [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Shipping pre-compiled libraries
+
+## Additional resources {/*additional-resources*/}
+
+In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
+
diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
new file mode 100644
index 000000000..a40b1f5af
--- /dev/null
+++ b/src/content/learn/react-compiler/installation.md
@@ -0,0 +1,249 @@
+---
+title: Installation
+---
+
+<Intro>
+This guide will help you install and configure React Compiler in your React application.
+</Intro>
+
+<YouWillLearn>
+
+* How to install React Compiler
+* Basic configuration for different build tools
+* How to verify your setup is working
+
+</YouWillLearn>
+
+## Prerequisites {/*prerequisites*/}
+
+React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about [React version compatibility](/reference/react-compiler/target).
+
+<Note>
+React Compiler is currently in RC. Install it using the `@rc` tag to get the latest release candidate version.
+</Note>
+
+## Installation {/*installation*/}
+
+Install React Compiler as a `devDependency`:
+
+<TerminalBlock>
+npm install -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+Or with Yarn:
+
+<TerminalBlock>
+yarn add -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+Or with pnpm:
+
+<TerminalBlock>
+pnpm install -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+## Basic Setup {/*basic-setup*/}
+
+React Compiler is designed to work by default without any configuration. However, if you need to configure it in special circumstances (for example, to target React versions below 19), refer to the [compiler options reference](/reference/react-compiler/configuration).
+
+The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline.
+
+<Pitfall>
+React Compiler must run **first** in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations.
+</Pitfall>
+
+### Babel {/*babel*/}
+
+Create or update your `babel.config.js`:
+
+```js {3}
+module.exports = {
+  plugins: [
+    'babel-plugin-react-compiler', // must run first!
+    // ... other plugins
+  ],
+  // ... other config
+};
+```
+
+### Vite {/*vite*/}
+
+If you use Vite, you can add the plugin to vite-plugin-react:
+
+```js {3,9}
+// vite.config.js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+  ],
+});
+```
+
+Alternatively, if you prefer a separate Babel plugin for Vite:
+
+<TerminalBlock>
+npm install -D vite-plugin-babel
+</TerminalBlock>
+
+```js {2,11}
+// vite.config.js
+import babel from 'vite-plugin-babel';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    babel({
+      babelConfig: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+  ],
+});
+```
+
+### Next.js {/*usage-with-nextjs*/}
+
+Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information.
+
+### React Router {/*usage-with-react-router*/}
+Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
+
+<TerminalBlock>
+{`npm install vite-plugin-babel`}
+</TerminalBlock>
+
+```js {3-4,16}
+// vite.config.js
+import { defineConfig } from "vite";
+import babel from "vite-plugin-babel";
+import { reactRouter } from "@react-router/dev/vite";
+
+const ReactCompilerConfig = { /* ... */ };
+
+export default defineConfig({
+  plugins: [
+    reactRouter(),
+    babel({
+      filter: /\.[jt]sx?$/,
+      babelConfig: {
+        presets: ["@babel/preset-typescript"], // if you use TypeScript
+        plugins: [
+          ["babel-plugin-react-compiler", ReactCompilerConfig],
+        ],
+      },
+    }),
+  ],
+});
+```
+
+### Webpack {/*usage-with-webpack*/}
+
+A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
+
+### Expo {/*usage-with-expo*/}
+
+Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps.
+
+### Metro (React Native) {/*usage-with-react-native-metro*/}
+
+React Native uses Babel via Metro, so refer to the [Usage with Babel](#babel) section for installation instructions.
+
+### Rspack {/*usage-with-rspack*/}
+
+Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps.
+
+### Rsbuild {/*usage-with-rsbuild*/}
+
+Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps.
+
+
+## ESLint Integration {/*eslint-integration*/}
+
+React Compiler includes an ESLint rule that helps identify code that can't be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don't need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
+
+Install the ESLint plugin:
+
+<TerminalBlock>
+npm install -D eslint-plugin-react-hooks@rc
+</TerminalBlock>
+
+If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rule is enabled by default in the latest RC, so no additional configuration is needed.
+
+The ESLint rule will:
+- Identify violations of the [Rules of React](/reference/rules)
+- Show which components can't be optimized
+- Provide helpful error messages for fixing issues
+
+## Verify Your Setup {/*verify-your-setup*/}
+
+After installation, verify that React Compiler is working correctly.
+
+### Check React DevTools {/*check-react-devtools*/}
+
+Components optimized by React Compiler will show a "Memo ✨" badge in React DevTools:
+
+1. Install the [React Developer Tools](/learn/react-developer-tools) browser extension
+2. Open your app in development mode
+3. Open React DevTools
+4. Look for the ✨ emoji next to component names
+
+If the compiler is working:
+- Components will show a "Memo ✨" badge in React DevTools
+- Expensive calculations will be automatically memoized
+- No manual `useMemo` is required
+
+### Check Build Output {/*check-build-output*/}
+
+You can also verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic that the compiler adds automatically.
+
+```js
+import { c as _c } from "react/compiler-runtime";
+export default function MyApp() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>Hello World</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Opting out specific components {/*opting-out-specific-components*/}
+
+If a component is causing issues after compilation, you can temporarily opt it out using the `"use no memo"` directive:
+
+```js
+function ProblematicComponent() {
+  "use no memo";
+  // Component code here
+}
+```
+
+This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved.
+
+For more troubleshooting help, see the [debugging guide](/learn/react-compiler/debugging).
+
+## Next Steps {/*next-steps*/}
+
+Now that you have React Compiler installed, learn more about:
+
+- [React version compatibility](/reference/react-compiler/target) for React 17 and 18
+- [Configuration options](/reference/react-compiler/configuration) to customize the compiler
+- [Incremental adoption strategies](/learn/react-compiler/incremental-adoption) for existing codebases
+- [Debugging techniques](/learn/react-compiler/debugging) for troubleshooting issues
+- [Compiling Libraries guide](/reference/react-compiler/compiling-libraries) for compiling your React library
\ No newline at end of file
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
new file mode 100644
index 000000000..96fa8802a
--- /dev/null
+++ b/src/content/learn/react-compiler/introduction.md
@@ -0,0 +1,191 @@
+---
+title: Introduction
+---
+
+<Intro>
+React Compiler is a new build-time tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
+</Intro>
+
+<YouWillLearn>
+
+* What React Compiler does
+* Getting started with the compiler
+* Incremental adoption strategies
+* Debugging and troubleshooting when things go wrong
+* Using the compiler on your React library
+
+</YouWillLearn>
+
+<Note>
+React Compiler is currently in Release Candidate (RC). We now recommend everyone to try the compiler and provide feedback. The latest RC release can be found with the `@rc` tag.
+</Note>
+
+## What does React Compiler do? {/*what-does-react-compiler-do*/}
+
+React Compiler automatically optimizes your React application at build time. React is often fast enough without optimization, but sometimes you need to manually memoize components and values to keep your app responsive. This manual memoization is tedious, easy to get wrong, and adds extra code to maintain. React Compiler does this optimization automatically for you, freeing you from this mental burden so you can focus on building features.
+
+### Before React Compiler {/*before-react-compiler*/}
+
+Without the compiler, you need to manually memoize components and values to optimize re-renders:
+
+```js {expectedErrors: {'react-compiler': [4]}}
+import { useMemo, useCallback, memo } from 'react';
+
+const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
+  const processedData = useMemo(() => {
+    return expensiveProcessing(data);
+  }, [data]);
+
+  const handleClick = useCallback((item) => {
+    onClick(item.id);
+  }, [onClick]);
+
+  return (
+    <div>
+      {processedData.map(item => (
+        <Item key={item.id} onClick={() => handleClick(item)} />
+      ))}
+    </div>
+  );
+});
+```
+
+
+<Note>
+
+This manual memoization has a subtle bug that breaks memoization:
+
+```js [[2, 1, "() => handleClick(item)"]]
+<Item key={item.id} onClick={() => handleClick(item)} />
+```
+
+Even though `handleClick` is wrapped in `useCallback`, the arrow function `() => handleClick(item)` creates a new function every time the component renders. This means that `Item` will always receive a new `onClick` prop, breaking memoization.
+
+React Compiler is able to optimize this correctly with or without the arrow function, ensuring that `Item` only re-renders when `props.onClick` changes.
+
+</Note>
+
+### After React Compiler {/*after-react-compiler*/}
+
+With React Compiler, you write the same code without manual memoization:
+
+```js
+function ExpensiveComponent({ data, onClick }) {
+  const processedData = expensiveProcessing(data);
+
+  const handleClick = (item) => {
+    onClick(item.id);
+  };
+
+  return (
+    <div>
+      {processedData.map(item => (
+        <Item key={item.id} onClick={() => handleClick(item)} />
+      ))}
+    </div>
+  );
+}
+```
+
+_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_
+
+React Compiler automatically applies the optimal memoization, ensuring your app only re-renders when necessary.
+
+<DeepDive>
+#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/}
+
+React Compiler's automatic memoization is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases:
+
+1. **Skipping cascading re-rendering of components**
+    * Re-rendering `<Parent />` causes many components in its component tree to re-render, even though only `<Parent />` has changed
+1. **Skipping expensive calculations from outside of React**
+    * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data
+
+#### Optimizing Re-renders {/*optimizing-re-renders*/}
+
+React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ — unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes:
+
+```javascript
+function FriendList({ friends }) {
+  const onlineCount = useFriendOnlineCount();
+  if (friends.length === 0) {
+    return <NoFriends />;
+  }
+  return (
+    <div>
+      <span>{onlineCount} online</span>
+      {friends.map((friend) => (
+        <FriendListCard key={friend.id} friend={friend} />
+      ))}
+      <MessageButton />
+    </div>
+  );
+}
+```
+[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
+
+React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `<FriendListCard />` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `<MessageButton>` as the count changes.
+
+#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/}
+
+React Compiler can also automatically memoize expensive calculations used during rendering:
+
+```js
+// **Not** memoized by React Compiler, since this is not a component or hook
+function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }
+
+// Memoized by React Compiler since this is a component
+function TableContainer({ items }) {
+  // This function call would be memoized:
+  const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
+  // ...
+}
+```
+[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA)
+
+However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because:
+
+- React Compiler only memoizes React components and hooks, not every function
+- React Compiler's memoization is not shared across multiple components or hooks
+
+So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
+</DeepDive>
+
+## Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
+
+We encourage everyone to start using React Compiler. While the compiler is still an optional addition to React today, in the future some features may require the compiler in order to fully work.
+
+### Is it safe to use? {/*is-it-safe-to-use*/}
+
+React Compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
+
+## What build tools are supported? {/*what-build-tools-are-supported*/}
+
+React Compiler can be installed across [several build tools](/learn/react-compiler/installation) such as Babel, Vite, Metro, and Rsbuild.
+
+React Compiler is primarily a light Babel plugin wrapper around the core compiler, which was designed to be decoupled from Babel itself. While the initial stable version of the compiler will remain primarily a Babel plugin, we are working with the swc and [oxc](https://github.com/oxc-project/oxc/issues/10048) teams to build first class support for React Compiler so you won't have to add Babel back to your build pipelines in the future.
+
+Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) and up.
+
+## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
+
+React Compiler adds automatic memoization more precisely and granularly than is possible with [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component.
+
+This is done out of caution as a common anti-pattern with manual memoization is using it for correctness.  This means your app depends on specific values being memoized to work properly. For example, in order to prevent an infinite loop, you may have memoized some values to stop a `useEffect` call from firing. This breaks the Rules of React, but since it can potentially be dangerous for the compiler to automatically remove manual memoization, the compiler will just bail out instead. You should manually remove your handwritten memoization and verify that your app still works as expected.
+
+## Try React Compiler {/*try-react-compiler*/}
+
+This section will help you get started with React Compiler and understand how to use it effectively in your projects.
+
+* **[Installation](/learn/react-compiler/installation)** - Install React Compiler and configure it for your build tools
+* **[React Version Compatibility](/reference/react-compiler/target)** - Support for React 17, 18, and 19
+* **[Configuration](/reference/react-compiler/configuration)** - Customize the compiler for your specific needs
+* **[Incremental Adoption](/learn/react-compiler/incremental-adoption)** - Strategies for gradually rolling out the compiler in existing codebases
+* **[Debugging and Troubleshooting](/learn/react-compiler/debugging)** - Identify and fix issues when using the compiler
+* **[Compiling Libraries](/reference/react-compiler/compiling-libraries)** - Best practices for shipping compiled code
+* **[API Reference](/reference/react-compiler/configuration)** - Detailed documentation of all configuration options
+
+## Additional resources {/*additional-resources*/}
+
+In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
+
diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md
index 3369ef91b..3bb880c60 100644
--- a/src/content/learn/referencing-values-with-refs.md
+++ b/src/content/learn/referencing-values-with-refs.md
@@ -211,7 +211,7 @@ export default function Counter() {
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [13]}}
 import { useRef } from 'react';
 
 export default function Counter() {
@@ -311,7 +311,7 @@ console.log(ref.current); // 5
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [10]}}
 import { useState } from 'react';
 
 export default function Chat() {
@@ -416,7 +416,7 @@ export default function Chat() {
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [10]}}
 import { useRef } from 'react';
 
 export default function Toggle() {
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index ed8f0b79e..35a1ccaa6 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -303,7 +303,7 @@ useEffect(() => {
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [14]}}
 import { useState, useEffect } from 'react';
 
 export default function Timer() {
@@ -795,7 +795,7 @@ function ChatRoom({ roomId }) {
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [10]}}
 import { useState, useEffect } from 'react';
 import { createConnection } from './chat.js';
 
diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 1418cfc63..f62a4af34 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -546,7 +546,7 @@ button { margin-left: 5px; }
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [5, 7]}}
 export default function LightSwitch() {
   function handleClick() {
     let bodyStyle = document.body.style;
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index eb6de196a..5a15f77b7 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -1418,10 +1418,36 @@ function SaveButton() {
 
 #### React가 데이터 패칭을 위한 내부 해결책을 제공할까요? {/*will-react-provide-any-built-in-solution-for-data-fetching*/}
 
+<<<<<<< HEAD
 아직 세부적인 사항을 작업 중이지만, 앞으로는 이와 같이 데이터 가져오도록 작성하게 될 것으로 예상합니다.
 
 ```js {1,4,6}
 import { use } from 'react'; // 아직 사용 불가능합니다!
+=======
+Today, with the [`use`](/reference/react/use#streaming-data-from-server-to-client) API, data can be read in render by passing a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to `use`:
+
+```js {1,4,11}
+import { use, Suspense } from "react";
+
+function Message({ messagePromise }) {
+  const messageContent = use(messagePromise);
+  return <p>Here is the message: {messageContent}</p>;
+}
+
+export function MessageContainer({ messagePromise }) {
+  return (
+    <Suspense fallback={<p>⌛Downloading message...</p>}>
+      <Message messagePromise={messagePromise} />
+    </Suspense>
+  );
+}
+```
+
+We're still working out the details, but we expect that in the future, you'll write data fetching like this:
+
+```js {1,4,6}
+import { use } from 'react';
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 function ShippingForm({ country }) {
   const cities = use(fetch(`/api/cities?country=${country}`));
diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md
index 2c2de631f..d021a6c8a 100644
--- a/src/content/learn/separating-events-from-effects.md
+++ b/src/content/learn/separating-events-from-effects.md
@@ -711,7 +711,7 @@ Effect 이벤트가 `visitedUrl`을 명시적으로 "요구"하므로 `url`을 E
 
 기존 코드베이스에서는 아래와 같이 린트 규칙이 억제된 것을 가끔 볼 수 있습니다.
 
-```js {7-9}
+```js {expectedErrors: {'react-compiler': [8]}} {7-9}
 function Page({ url }) {
   const { items } = useContext(ShoppingCartContext);
   const numberOfItems = items.length;
@@ -735,7 +735,7 @@ function Page({ url }) {
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [16]}}
 import { useState, useEffect } from 'react';
 
 export default function App() {
@@ -990,7 +990,7 @@ Effect 이벤트는 Effect의 코드 중 비반응형인 "부분"입니다. Effe
 ```
 
 
-```js
+```js {expectedErrors: {'react-compiler': [14]}}
 import { useState, useEffect } from 'react';
 
 export default function Timer() {
diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index 6de8ea89f..d883739c8 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -23,7 +23,7 @@ title: "State: 컴포넌트의 기억 저장소"
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [7]}}
 import { sculptureList } from './data.js';
 
 export default function Gallery() {
@@ -1228,7 +1228,7 @@ img { width: 120px; height: 120px; }
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [6]}}
 export default function Form() {
   let firstName = '';
   let lastName = '';
@@ -1335,7 +1335,7 @@ h1 { margin-top: 10px; }
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [9]}}
 import { useState } from 'react';
 
 export default function FeedbackForm() {
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index a4cb2fde7..81130d4ce 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -95,7 +95,7 @@ function VideoPlayer({ src, isPlaying }) {
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [7, 9]}}
 import { useState, useRef, useEffect } from 'react';
 
 function VideoPlayer({ src, isPlaying }) {
@@ -617,7 +617,11 @@ Effect가 개발 모드에서 두 번 실행되는 것을 막으려다 흔히 
 
 이렇게 하면 개발 모드에서 `"✅ 연결 중..."`이 한 번만 보이지만 버그가 수정된 건 아닙니다.
 
+<<<<<<< HEAD
 사용자가 다른 곳에 가더라도 연결이 끊어지지 않고 사용자가 다시 돌아왔을 때 새로운 연결이 생성됩니다. 사용자가 앱을 탐색하면 버그가 수정되기 전처럼 연결이 계속 쌓이게 됩니다.
+=======
+When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix".
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 버그를 수정하기 위해선 Effect를 단순히 한 번만 실행되도록 만드는 것으로는 부족합니다. Effect는 위에 있는 예시가 연결을 클린업 한것처럼 다시 마운트된 이후에도 제대로 동작해야 합니다.
 
@@ -732,8 +736,13 @@ Effect 안에서 `fetch` 호출을 작성하는 것은 [데이터를 가져오
 
 이 단점 목록은 React에만 해당되는 것은 아닙니다. 어떤 라이브러리에서든 마운트 시에 데이터를 가져온다면 비슷한 단점이 존재합니다. 마운트 시에 데이터를 페칭하는 것도 라우팅과 마찬가지로 잘 수행하기 어려운 작업이므로 다음 접근 방식을 권장합니다.
 
+<<<<<<< HEAD
 - **[프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)를 사용하는 경우 해당 프레임워크의 내장 데이터 페칭 메커니즘을 사용하세요.** 현대적인 React 프레임워크에는 위의 단점을 겪지 않는 효율적이고 통합적인 데이터 페칭 메커니즘이 포함되어 있습니다.
 - **그렇지 않은 경우 클라이언트 측 캐시를 사용하거나 구축하는 것을 고려하세요.** 인기 있는 오픈 소스 솔루션으로는 [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/) 및 [React Router 6.4+](https://beta.reactrouter.com/en/main/start/overview)이 있습니다. 직접 솔루션을 구축할 수도 있으며 이 경우 Effect를 내부적으로 사용하면서 요청 중복을 제거하고 응답을 캐시하고 네트워크 폭포를 피하는 로직을 추가할 것입니다. (데이터를 사전에 로드하거나 데이터 요구 사항을 라우트)
+=======
+- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 이러한 접근 방식 중 어느 것도 적합하지 않은 경우, Effect 내에서 데이터를 직접 가져오는 것을 계속하셔도 됩니다.
 
@@ -1004,7 +1013,11 @@ import { useEffect, useRef } from 'react';
 export default function MyInput({ value, onChange }) {
   const ref = useRef(null);
 
+<<<<<<< HEAD
   // TODO: 작동하지 않는다. 고쳐야함
+=======
+  // TODO: This doesn't quite work. Fix it.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
   // ref.current.focus()
 
   return (
@@ -1468,7 +1481,8 @@ body {
 
 <Sandpack>
 
-```js src/App.js
+{/* not the most efficient, but this validation is enabled in the linter only, so it's fine to ignore it here since we know what we're doing */}
+```js {expectedErrors: {'react-compiler': [9]}} src/App.js
 import { useState, useEffect } from 'react';
 import { fetchBio } from './api.js';
 
@@ -1541,7 +1555,8 @@ Effect가 비동기로 무언가를 가져오는 경우 일반적으로 클린
 
 <Sandpack>
 
-```js src/App.js
+{/* not the most efficient, but this validation is enabled in the linter only, so it's fine to ignore it here since we know what we're doing */}
+```js {expectedErrors: {'react-compiler': [9]}} src/App.js
 import { useState, useEffect } from 'react';
 import { fetchBio } from './api.js';
 
@@ -1605,4 +1620,3 @@ export async function fetchBio(person) {
 </Solution>
 
 </Challenges>
-
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index c354f9fb8..2d22e65b4 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -288,9 +288,15 @@ CodeSandBox에는 세 가지 주요 구역이 있습니다.
 
 ![CodeSandBox의 초기 코드](../images/tutorial/react-starter-code-codesandbox.png)
 
+<<<<<<< HEAD
 1. `App.js`, `index.js`, `style.css` 와 같은 파일 목록과 `public` 폴더가 있는 _파일_ 구역
 1. 선택한 파일의 소스 코드를 볼 수 있는 _코드 편집기_
 1. 작성한 코드가 어떻게 보이는지 확인할 수 있는 _브라우저_ 구역
+=======
+1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` in `src` folder and a folder called `public`
+1. The _code editor_ where you'll see the source code of your selected file
+1. The _browser_ section where you'll see how the code you've written will be displayed
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 _파일_ 구역에서 `App.js` 파일을 선택하세요. _코드 편집기_ 에서 해당 파일의 내용이 있어야 합니다.
 
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 7822f3623..e8a19410c 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -11,16 +11,27 @@ TypeScript는 JavaScript 코드 베이스에 타입 정의를 추가하는 데 
 
 <YouWillLearn>
 
+<<<<<<< HEAD
 * [React 컴포넌트가 있는 TypeScript](/learn/typescript#typescript-with-react-components)
 * [Hooks 타이핑 예시](/learn/typescript#example-hooks)
 * [`@types/react`의 일반적인 타입](/learn/typescript/#useful-types)
 * [추가 학습 위치](/learn/typescript/#further-learning)
+=======
+* [TypeScript with React Components](/learn/typescript#typescript-with-react-components)
+* [Examples of typing with Hooks](/learn/typescript#example-hooks)
+* [Common types from `@types/react`](/learn/typescript#useful-types)
+* [Further learning locations](/learn/typescript#further-learning)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 </YouWillLearn>
 
 ## 설치 {/*installation*/}
 
+<<<<<<< HEAD
 모든 [프로덕션 수준의 React 프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)는 TypeScript 사용을 지원합니다. 프레임워크별 설치 가이드를 따르세요.
+=======
+All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 - [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
 - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
@@ -32,14 +43,20 @@ TypeScript는 JavaScript 코드 베이스에 타입 정의를 추가하는 데 
 최신 버전의 React 타입 정의를 설치합니다.
 
 <TerminalBlock>
-npm install @types/react @types/react-dom
+npm install --save-dev @types/react @types/react-dom
 </TerminalBlock>
 
 다음 컴파일러 옵션을 `tsconfig.json`에 설정해야 합니다.
 
+<<<<<<< HEAD
 1. `dom`은 [`lib`](https://www.typescriptlang.org/ko/tsconfig/#lib)에 포함되어야 합니다(주의: `lib` 옵션이 지정되지 않으면, 기본적으로 `dom`이 포함됩니다).
 1. [`jsx`](https://www.typescriptlang.org/ko/tsconfig/#jsx)를 유효한 옵션 중 하나로 설정해야 합니다. 대부분의 애플리케이션에서는 `preserve`로 충분합니다.
   라이브러리를 게시하는 경우 어떤 값을 선택해야 하는지 [`jsx` 설명서](https://www.typescriptlang.org/ko/tsconfig/#jsx)를 참조하세요.
+=======
+1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default).
+2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications.
+  If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ## React 컴포넌트가 있는 TypeScript {/*typescript-with-react-components*/}
 
@@ -124,7 +141,11 @@ export default App = AppTSX;
 
 ## Hooks 예시 {/*example-hooks*/}
 
+<<<<<<< HEAD
 `@types/react`의 타입 정의에는 내장 Hooks에 대한 타입이 포함되어 있으므로 추가 설정 없이 컴포넌트에 사용할 수 있습니다. 컴포넌트에 작성한 코드를 고려하도록 만들어졌기 때문에 대부분의 경우 [추론된 타입](https://www.typescriptlang.org/ko/docs/handbook/type-inference.html)을 얻을 수 있으며, 이상적으로는 타입을 제공하는 사소한 작업을 처리할 필요가 없습니다.
+=======
+The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 하지만, hooks에 타입을 제공하는 방법의 몇 가지 예시를 볼 수 있습니다.
 
@@ -140,7 +161,11 @@ const [enabled, setEnabled] = useState(false);
 `boolean` 타입이 `enabled`에 할당되고, `setEnabled` 는 `boolean` 인수나 `boolean`을 반환하는 함수를 받는 함수가 됩니다. state에 대한 타입을 명시적으로 제공하려면 `useState` 호출에 타입 인수를 제공하면 됩니다.
 
 ```ts
+<<<<<<< HEAD
 // 명시적으로 타입을 "boolean"으로 설정합니다
+=======
+// Explicitly set the type to "boolean"
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 const [enabled, setEnabled] = useState<boolean>(false);
 ```
 
@@ -284,7 +309,11 @@ export default App = AppTSX;
 
 </Sandpack>
 
+<<<<<<< HEAD
 이 기술은 합리적인 기본값이 있을 때 효과적이지만 그렇지 않은 경우도 간혹 있으며, 그러한 경우 `null`이 기본값으로 합리적이라고 느낄 수 있습니다. 그러나, 타입 시스템이 코드를 이해할 수 있도록 하려면 `createContext`에서 `ContextShape | null`을 명시적으로 설정해야 합니다.
+=======
+This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 이에 따라 context 소비자에 대한 타입에서 `| null`을 제거해야 하는 문제가 발생합니다. 권장 사항은 Hook이 런타임에 존재 여부를 검사하고 존재하지 않을 경우 에러를 throw 하는 것입니다.
 
@@ -329,7 +358,17 @@ function MyComponent() {
 
 ### `useMemo` {/*typing-usememo*/}
 
+<<<<<<< HEAD
 [`useMemo`](/reference/react/useMemo) Hooks는 함수 호출로부터 memorized 된 값을 생성/재접근하여, 두 번째 매개변수로 전달된 종속성이 변경될 때만 함수를 다시 실행합니다. Hook을 호출한 결과는 첫 번째 매개변수에 있는 함수의 반환 값에서 추론됩니다. Hook에 타입 인수를 제공하여 더욱더 명확하게 할 수 있습니다.
+=======
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useMemo` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
+The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ```ts
 // visibleTodos의 타입은 filterTodos의 반환 값에서 추론됩니다.
@@ -339,7 +378,17 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
 
 ### `useCallback` {/*typing-usecallback*/}
 
+<<<<<<< HEAD
 [`useCallback`](/reference/react/useCallback)는 두 번째 매개변수로 전달되는 종속성이 같다면 함수에 대한 안정적인 참조를 제공합니다. `useMemo`와 마찬가지로, 함수의 타입은 첫 번째 매개변수에 있는 함수의 반환 값에서 추론되며, Hook에 타입 인수를 제공하여 더욱더 명확하게 할 수 있습니다.
+=======
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useCallback` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
+The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the Hook.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 
 ```ts
@@ -350,7 +399,11 @@ const handleClick = useCallback(() => {
 
 TypeScript strict mode에서 작업할 때 `useCallback`을 사용하려면 콜백에 매개변수를 위한 타입을 추가해야 합니다. 콜백의 타입은 함수의 반환 값에서 추론되고, 매개변수 없이는 타입을 완전히 이해할 수 없기 때문입니다.
 
+<<<<<<< HEAD
 코드 스타일 선호도에 따라, 콜백을 정의하는 동시에 이벤트 핸들러의 타입을 제공하기 위해 React 타입의 `*EventHandler` 함수를 사용할 수 있습니다.
+=======
+Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback:
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ```ts
 import { useState, useCallback } from 'react';
@@ -433,7 +486,11 @@ interface ModalRendererProps {
 }
 ```
 
+<<<<<<< HEAD
 자식이 특정 JSX 엘리먼트 타입이라고 설명하기 위해 TypeScript를 사용할 수 없으므로, `<li>` 자식만 허용하는 컴포넌트를 설명하기 위해 타입 시스템을 사용할 수 없다는 점에 주의하세요.
+=======
+Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 [TypeScript 플레이그라운드](https://www.typescriptlang.org/ko/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA)에서 타입 체커를 사용하여 `React.ReactNode`와 `React.ReactElement`의 모든 예시를 확인할 수 있습니다.
 
diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md
index d12b263a8..4642c14d7 100644
--- a/src/content/learn/updating-objects-in-state.md
+++ b/src/content/learn/updating-objects-in-state.md
@@ -55,7 +55,7 @@ position.x = 5;
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [11]}}
 import { useState } from 'react';
 
 export default function MovingDot() {
@@ -209,7 +209,7 @@ setPosition({
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [11, 15, 19]}}
 import { useState } from 'react';
 
 export default function Form() {
@@ -833,7 +833,7 @@ img { width: 200px; height: 200px; }
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [11]}}
 import { useState } from 'react';
 
 export default function Scoreboard() {
@@ -989,7 +989,7 @@ input { margin-left: 5px; margin-bottom: 5px; }
 
 <Sandpack>
 
-```js src/App.js
+```js {expectedErrors: {'react-compiler': [17]}} src/App.js
 import { useState } from 'react';
 import Background from './Background.js';
 import Box from './Box.js';
@@ -1294,7 +1294,7 @@ select { margin-bottom: 10px; }
 
 <Sandpack>
 
-```js src/App.js
+```js {expectedErrors: {'react-compiler': [18]}} src/App.js
 import { useState } from 'react';
 import { useImmer } from 'use-immer';
 import Background from './Background.js';
diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index 7c1e57132..4bb567106 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -26,7 +26,11 @@ Effect가 필요하지 않은 두 가지 일반적인 경우가 있습니다.
 * **렌더링을 위해 데이터를 변환하는 데 Effect가 필요하지 않습니다.** 예를 들어 리스트를 표시하기 전에 필터링하고 싶다고 가정해 보겠습니다. 리스트가 변경될 때 state 변수를 업데이트하는 Effect를 작성하고 싶을 수 있습니다. 하지만 이는 비효율적입니다. state를 업데이트할 때 React는 먼저 컴포넌트 함수를 호출해 화면에 표시될 내용을 계산합니다. 그런 다음 React는 이러한 변경 사항을 DOM에 ["commit"](/learn/render-and-commit)하여 화면을 업데이트합니다. 그리고 나서 React가 Effect를 실행합니다. 만약 Effect도 *즉시* state를 업데이트한다면 전체 프로세스가 처음부터 다시 시작됩니다! 불필요한 렌더링 패스를 피하려면, 컴포넌트의 최상위 레벨에서 모든 데이터를 변환하세요. 그러면 props나 state가 변경될 때마다 해당 코드가 자동으로 다시 실행됩니다.
 * **사용자 이벤트를 처리하는 데 Effect가 필요하지 않습니다.** 예를 들어 사용자가 제품을 구매할 때 `/api/buy` POST 요청을 전송하고 알림을 표시하고 싶다고 가정해 보겠습니다. 구매 버튼 클릭 이벤트 핸들러에서는 정확히 어떤 일이 일어났는지 알 수 있습니다. Effect가 실행될 때까지 사용자가 무엇을 했는지 (예: 어떤 버튼을 클릭 했는지) 알 수 없습니다. 그렇기 때문에 일반적으로 해당되는 이벤트 핸들러에서 사용자 이벤트를 처리합니다.
 
+<<<<<<< HEAD
 외부 시스템과 [동기화](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events)하려면 Effect가 *반드시* 필요합니다. 예를 들어 jQuery 위젯이 React State와 동기화되도록 유지하는 Effect를 작성할 수 있습니다. Effect로 데이터를 가져올 수도 있습니다: 예를 들어 검색 결과를 현재 검색 쿼리와 동기화할 수 있습니다. 모던 [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)는 컴포넌트에 직접 Effect를 작성하는 것보다 더 효율적인 내장 데이터 가져오기 메커니즘을 제공한다는 점을 명심하세요.
+=======
+You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 올바른 직관을 얻기 위해, 몇 가지 일반적이고 구체적인 예를 살펴봅시다!
 
@@ -34,7 +38,7 @@ Effect가 필요하지 않은 두 가지 일반적인 경우가 있습니다.
 
 `firstName`과 `lastName`이라는 두 개의 state 변수가 있다고 가정해 봅시다. 두 변수를 연결해서 `fullName`을 계산하고 싶습니다. 또한 `firstName`이나 `lastName`이 변경될 때마다 `fullName`이 업데이트되기를 바랍니다. 가장 먼저 `fullName` State 변수를 추가하고 Effect에서 업데이트하고 싶을 것입니다.
 
-```js {5-9}
+```js {expectedErrors: {'react-compiler': [8]}} {5-9}
 function Form() {
   const [firstName, setFirstName] = useState('Taylor');
   const [lastName, setLastName] = useState('Swift');
@@ -66,7 +70,7 @@ function Form() {
 
 이 컴포넌트는 props로 받은 `todos`를 `filter` prop에 따라 필터링하여 `visibleTodos`를 계산합니다. 결과를 state에 저장하고 Effect에서 업데이트하고 싶을 수 있습니다.
 
-```js {4-8}
+```js {expectedErrors: {'react-compiler': [7]}} {4-8}
 function TodoList({ todos, filter }) {
   const [newTodo, setNewTodo] = useState('');
 
@@ -95,6 +99,12 @@ function TodoList({ todos, filter }) {
 
 [`useMemo`](/reference/react/useMemo) Hook으로 래핑해서 값비싼 계산을 캐시(또는 ["메모이제이션"](https://ko.wikipedia.org/wiki/메모이제이션)) 할 수 있습니다.
 
+<Note>
+
+[React Compiler](/learn/react-compiler) can automatically memoize expensive calculations for you, eliminating the need for manual `useMemo` in many cases.
+
+</Note>
+
 ```js {5-8}
 import { useMemo, useState } from 'react';
 
@@ -159,7 +169,7 @@ console.timeEnd('filter array');
 
 이 `ProfilePage` 컴포넌트는 `userId` prop을 받습니다. 페이지는 댓글 입력을 포함하며 `comment` state 변수를 사용해 해당 값을 보관합니다. 어느 날 한 프로필에서 다른 프로필로 이동할 때 `comment` state가 재설정되지 않는 문제를 발견했습니다. 그 결과 실수로 잘못된 사용자의 프로필에 댓글을 게시하기 쉽습니다. 이 문제를 해결하기 위해 `userId`가 변경될 때마다 `comment` state 변수를 비우려고 합니다.
 
-```js {4-7}
+```js {expectedErrors: {'react-compiler': [6]}} {4-7}
 export default function ProfilePage({ userId }) {
   const [comment, setComment] = useState('');
 
@@ -202,7 +212,7 @@ prop이 변경될 때 전체가 아닌 일부 state만 재설정하거나 조정
 
 이 `List` 컴포넌트는 `items` 목록을 prop으로 받고 `selection` state 변수에 선택된 item을 유지합니다. `items` prop이 다른 배열을 받을 때마다 `selection`을 `null`로 재설정하고 싶습니다.
 
-```js {5-8}
+```js {expectedErrors: {'react-compiler': [7]}} {5-8}
 function List({ items }) {
   const [isReverse, setIsReverse] = useState(false);
   const [selection, setSelection] = useState(null);
@@ -752,7 +762,11 @@ function SearchResults({ query }) {
 
 데이터 가져오기를 구현할 때 경쟁 조건을 처리하는 것만이 어려운 것은 아닙니다. 응답 캐싱(사용자가 뒤로가기 버튼을 클릭하여 이전 화면을 즉시 볼 수 있도록), 서버에서 데이터를 가져오는 방법(초기 서버 렌더링 HTML에 스피너 대신 가져온 콘텐츠가 포함되도록), 네트워크 워터폴을 피하는 방법(자식이 모든 부모를 기다리지 않고 데이터를 가져올 수 있도록)도 고려해야 합니다.
 
+<<<<<<< HEAD
 **이러한 문제는 React뿐만 아니라 모든 UI 라이브러리에 적용됩니다. 이러한 문제를 해결하는 것은 간단하지 않기 때문에 모던 [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)는 Effect에서 데이터를 가져오는 것보다 더 효율적인 내장 데이터 가져오기 메커니즘을 제공합니다.**
+=======
+**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 프레임워크를 사용하지 않고(그리고 직접 빌드하고 싶지 않고) Effect에서 데이터를 보다 인체공학적으로 가져오고 싶다면 이 예시처럼 가져오기 로직을 사용자 정의 Hook으로 추출하는 것을 고려하세요.
 
@@ -814,7 +828,7 @@ function useData(url) {
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [12, 16, 20]}}
 import { useState, useEffect } from 'react';
 import { initialTodos, createTodo } from './todos.js';
 
@@ -1017,7 +1031,7 @@ input { margin-top: 10px; }
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [11]}}
 import { useState, useEffect } from 'react';
 import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
 
@@ -1101,7 +1115,7 @@ state 변수와 Effect를 제거하고 대신 `getVisibleTodos()`를 호출한 
 
 <Sandpack>
 
-```js
+```js {expectedErrors: {'react-compiler': [8]}}
 import { useState, useMemo } from 'react';
 import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
 
@@ -1358,7 +1372,7 @@ export default function ContactList({
 }
 ```
 
-```js src/EditContact.js active
+```js {expectedErrors: {'react-compiler': [8, 9]}} src/EditContact.js active
 import { useState, useEffect } from 'react';
 
 export default function EditContact({ savedContact, onSave }) {
diff --git a/src/content/reference/eslint-plugin-react-hooks/index.md b/src/content/reference/eslint-plugin-react-hooks/index.md
new file mode 100644
index 000000000..6494bd78f
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/index.md
@@ -0,0 +1,37 @@
+---
+title: eslint-plugin-react-hooks
+---
+
+<Intro>
+
+`eslint-plugin-react-hooks` provides ESLint rules to enforce the [Rules of React](/reference/rules).
+
+</Intro>
+
+This plugin helps you catch violations of React's rules at build time, ensuring your components and hooks follow React's rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automatically surfaced by this ESLint plugin, and can be used even if your app hasn't adopted the compiler yet.
+
+<Note>
+When the compiler reports a diagnostic, it means that the compiler was able to statically detect a pattern that is not supported or breaks the Rules of React. When it detects this, it **automatically** skips over those components and hooks, while keeping the rest of your app compiled. This ensures optimal coverage of safe optimizations that won't break your app.
+
+What this means for linting, is that you don’t need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
+</Note>
+
+## Available Lints {/*available-lints*/}
+
+* [`component-hook-factories`](/reference/eslint-plugin-react-hooks/lints/component-hook-factories) - Validates against higher order functions defining nested components or hooks
+* [`config`](/reference/eslint-plugin-react-hooks/lints/config) - Validates the compiler configuration options
+* [`error-boundaries`](/reference/eslint-plugin-react-hooks/lints/error-boundaries) - Validates usage of Error Boundaries instead of try/catch for child errors
+* [`exhaustive-deps`](/reference/eslint-plugin-react-hooks/lints/exhaustive-deps) - Validates that dependency arrays for React hooks contain all necessary dependencies
+* [`gating`](/reference/eslint-plugin-react-hooks/lints/gating) - Validates configuration of gating mode
+* [`globals`](/reference/eslint-plugin-react-hooks/lints/globals) - Validates against assignment/mutation of globals during render
+* [`immutability`](/reference/eslint-plugin-react-hooks/lints/immutability) - Validates against mutating props, state, and other immutable values
+* [`incompatible-library`](/reference/eslint-plugin-react-hooks/lints/incompatible-library) - Validates against usage of libraries which are incompatible with memoization
+* [`preserve-manual-memoization`](/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization) - Validates that existing manual memoization is preserved by the compiler
+* [`purity`](/reference/eslint-plugin-react-hooks/lints/purity) - Validates that components/hooks are pure by checking known-impure functions
+* [`refs`](/reference/eslint-plugin-react-hooks/lints/refs) - Validates correct usage of refs, not reading/writing during render
+* [`rules-of-hooks`](/reference/eslint-plugin-react-hooks/lints/rules-of-hooks) - Validates that components and hooks follow the Rules of Hooks
+* [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect) - Validates against calling setState synchronously in an effect
+* [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render) - Validates against setting state during render
+* [`static-components`](/reference/eslint-plugin-react-hooks/lints/static-components) - Validates that components are static, not recreated every render
+* [`unsupported-syntax`](/reference/eslint-plugin-react-hooks/lints/unsupported-syntax) - Validates against syntax that React Compiler does not support
+* [`use-memo`](/reference/eslint-plugin-react-hooks/lints/use-memo) - Validates usage of the `useMemo` hook without a return value
\ No newline at end of file
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md
new file mode 100644
index 000000000..537903abd
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md
@@ -0,0 +1,102 @@
+---
+title: component-hook-factories
+---
+
+<Intro>
+
+Validates against higher order functions defining nested components or hooks. Components and hooks should be defined at the module level.
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+Defining components or hooks inside other functions creates new instances on every call. React treats each as a completely different component, destroying and recreating the entire component tree, losing all state, and causing performance problems.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js {expectedErrors: {'react-compiler': [14]}}
+// ❌ Factory function creating components
+function createComponent(defaultValue) {
+  return function Component() {
+    // ...
+  };
+}
+
+// ❌ Component defined inside component
+function Parent() {
+  function Child() {
+    // ...
+  }
+
+  return <Child />;
+}
+
+// ❌ Hook factory function
+function createCustomHook(endpoint) {
+  return function useData() {
+    // ...
+  };
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Component defined at module level
+function Component({ defaultValue }) {
+  // ...
+}
+
+// ✅ Custom hook at module level
+function useData(endpoint) {
+  // ...
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I need dynamic component behavior {/*dynamic-behavior*/}
+
+You might think you need a factory to create customized components:
+
+```js
+// ❌ Wrong: Factory pattern
+function makeButton(color) {
+  return function Button({children}) {
+    return (
+      <button style={{backgroundColor: color}}>
+        {children}
+      </button>
+    );
+  };
+}
+
+const RedButton = makeButton('red');
+const BlueButton = makeButton('blue');
+```
+
+Pass [JSX as children](/learn/passing-props-to-a-component#passing-jsx-as-children) instead:
+
+```js
+// ✅ Better: Pass JSX as children
+function Button({color, children}) {
+  return (
+    <button style={{backgroundColor: color}}>
+      {children}
+    </button>
+  );
+}
+
+function App() {
+  return (
+    <>
+      <Button color="red">Red</Button>
+      <Button color="blue">Blue</Button>
+    </>
+  );
+}
+```
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/config.md b/src/content/reference/eslint-plugin-react-hooks/lints/config.md
new file mode 100644
index 000000000..719e08412
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/config.md
@@ -0,0 +1,90 @@
+---
+title: config
+---
+
+<Intro>
+
+Validates the compiler [configuration options](/reference/react-compiler/configuration).
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+React Compiler accepts various [configuration options](/reference/react-compiler/configuration)  to control its behavior. This rule validates that your configuration uses correct option names and value types, preventing silent failures from typos or incorrect settings.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Unknown option name
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compileMode: 'all' // Typo: should be compilationMode
+    }]
+  ]
+};
+
+// ❌ Invalid option value
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'everything' // Invalid: use 'all' or 'infer'
+    }]
+  ]
+};
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Valid compiler configuration
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'infer',
+      panicThreshold: 'critical_errors'
+    }]
+  ]
+};
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Configuration not working as expected {/*config-not-working*/}
+
+Your compiler configuration might have typos or incorrect values:
+
+```js
+// ❌ Wrong: Common configuration mistakes
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      // Typo in option name
+      compilationMod: 'all',
+      // Wrong value type
+      panicThreshold: true,
+      // Unknown option
+      optimizationLevel: 'max'
+    }]
+  ]
+};
+```
+
+Check the [configuration documentation](/reference/react-compiler/configuration) for valid options:
+
+```js
+// ✅ Better: Valid configuration
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'all', // or 'infer'
+      panicThreshold: 'none', // or 'critical_errors', 'all_errors'
+      // Only use documented options
+    }]
+  ]
+};
+```
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md
new file mode 100644
index 000000000..830098e5b
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md
@@ -0,0 +1,72 @@
+---
+title: error-boundaries
+---
+
+<Intro>
+
+Validates usage of Error Boundaries instead of try/catch for errors in child components.
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+Try/catch blocks can't catch errors that happen during React's rendering process. Errors thrown in rendering methods or hooks bubble up through the component tree. Only [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) can catch these errors.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js {expectedErrors: {'react-compiler': [4]}}
+// ❌ Try/catch won't catch render errors
+function Parent() {
+  try {
+    return <ChildComponent />; // If this throws, catch won't help
+  } catch (error) {
+    return <div>Error occurred</div>;
+  }
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Using error boundary
+function Parent() {
+  return (
+    <ErrorBoundary>
+      <ChildComponent />
+    </ErrorBoundary>
+  );
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Why is the linter telling me not to wrap `use` in `try`/`catch`? {/*why-is-the-linter-telling-me-not-to-wrap-use-in-trycatch*/}
+
+The `use` hook doesn't throw errors in the traditional sense, it suspends component execution. When `use` encounters a pending promise, it suspends the component and lets React show a fallback. Only Suspense and Error Boundaries can handle these cases. The linter warns against `try`/`catch` around `use` to prevent confusion as the `catch` block would never run.
+
+```js {expectedErrors: {'react-compiler': [5]}}
+// ❌ Try/catch around `use` hook
+function Component({promise}) {
+  try {
+    const data = use(promise); // Won't catch - `use` suspends, not throws
+    return <div>{data}</div>;
+  } catch (error) {
+    return <div>Failed to load</div>; // Unreachable
+  }
+}
+
+// ✅ Error boundary catches `use` errors
+function App() {
+  return (
+    <ErrorBoundary fallback={<div>Failed to load</div>}>
+      <Suspense fallback={<div>Loading...</div>}>
+        <DataComponent promise={fetchData()} />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+```
\ No newline at end of file
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md b/src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md
new file mode 100644
index 000000000..cd26483a1
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md
@@ -0,0 +1,155 @@
+---
+title: exhaustive-deps
+---
+
+<Intro>
+
+Validates that dependency arrays for React hooks contain all necessary dependencies.
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+React hooks like `useEffect`, `useMemo`, and `useCallback` accept dependency arrays. When a value referenced inside these hooks isn't included in the dependency array, React won't re-run the effect or recalculate the value when that dependency changes. This causes stale closures where the hook uses outdated values.
+
+## Common Violations {/*common-violations*/}
+
+This error often happens when you try to "trick" React about dependencies to control when an effect runs. Effects should synchronize your component with external systems. The dependency array tells React which values the effect uses, so React knows when to re-synchronize.
+
+If you find yourself fighting with the linter, you likely need to restructure your code. See [Removing Effect Dependencies](/learn/removing-effect-dependencies) to learn how.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Missing dependency
+useEffect(() => {
+  console.log(count);
+}, []); // Missing 'count'
+
+// ❌ Missing prop
+useEffect(() => {
+  fetchUser(userId);
+}, []); // Missing 'userId'
+
+// ❌ Incomplete dependencies
+useMemo(() => {
+  return items.sort(sortOrder);
+}, [items]); // Missing 'sortOrder'
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ All dependencies included
+useEffect(() => {
+  console.log(count);
+}, [count]);
+
+// ✅ All dependencies included
+useEffect(() => {
+  fetchUser(userId);
+}, [userId]);
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Adding a function dependency causes infinite loops {/*function-dependency-loops*/}
+
+You have an effect, but you're creating a new function on every render:
+
+```js
+// ❌ Causes infinite loop
+const logItems = () => {
+  console.log(items);
+};
+
+useEffect(() => {
+  logItems();
+}, [logItems]); // Infinite loop!
+```
+
+In most cases, you don't need the effect. Call the function where the action happens instead:
+
+```js
+// ✅ Call it from the event handler
+const logItems = () => {
+  console.log(items);
+};
+
+return <button onClick={logItems}>Log</button>;
+
+// ✅ Or derive during render if there's no side effect
+items.forEach(item => {
+  console.log(item);
+});
+```
+
+If you genuinely need the effect (for example, to subscribe to something external), make the dependency stable:
+
+```js
+// ✅ useCallback keeps the function reference stable
+const logItems = useCallback(() => {
+  console.log(items);
+}, [items]);
+
+useEffect(() => {
+  logItems();
+}, [logItems]);
+
+// ✅ Or move the logic straight into the effect
+useEffect(() => {
+  console.log(items);
+}, [items]);
+```
+
+### Running an effect only once {/*effect-on-mount*/}
+
+You want to run an effect once on mount, but the linter complains about missing dependencies:
+
+```js
+// ❌ Missing dependency
+useEffect(() => {
+  sendAnalytics(userId);
+}, []); // Missing 'userId'
+```
+
+Either include the dependency (recommended) or use a ref if you truly need to run once:
+
+```js
+// ✅ Include dependency
+useEffect(() => {
+  sendAnalytics(userId);
+}, [userId]);
+
+// ✅ Or use a ref guard inside an effect
+const sent = useRef(false);
+
+useEffect(() => {
+  if (sent.current) {
+    return;
+  }
+
+  sent.current = true;
+  sendAnalytics(userId);
+}, [userId]);
+```
+
+## Options {/*options*/}
+
+This rule accepts an options object:
+
+```js
+{
+  "rules": {
+    "react-hooks/exhaustive-deps": ["warn", {
+      "additionalHooks": "(useMyCustomHook|useAnotherHook)"
+    }]
+  }
+}
+```
+
+- `additionalHooks`: Regex for hooks that should be checked for exhaustive dependencies
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/gating.md b/src/content/reference/eslint-plugin-react-hooks/lints/gating.md
new file mode 100644
index 000000000..3bd662a86
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/gating.md
@@ -0,0 +1,72 @@
+---
+title: gating
+---
+
+<Intro>
+
+Validates configuration of [gating mode](/reference/react-compiler/gating).
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+Gating mode lets you gradually adopt React Compiler by marking specific components for optimization. This rule ensures your gating configuration is valid so the compiler knows which components to process.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Missing required fields
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      gating: {
+        importSpecifierName: '__experimental_useCompiler'
+        // Missing 'source' field
+      }
+    }]
+  ]
+};
+
+// ❌ Invalid gating type
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      gating: '__experimental_useCompiler' // Should be object
+    }]
+  ]
+};
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Complete gating configuration
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      gating: {
+        importSpecifierName: 'isCompilerEnabled', // exported function name
+        source: 'featureFlags' // module name
+      }
+    }]
+  ]
+};
+
+// featureFlags.js
+export function isCompilerEnabled() {
+  // ...
+}
+
+// ✅ No gating (compile everything)
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      // No gating field - compiles all components
+    }]
+  ]
+};
+```
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/globals.md b/src/content/reference/eslint-plugin-react-hooks/lints/globals.md
new file mode 100644
index 000000000..fe0cbe008
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/globals.md
@@ -0,0 +1,84 @@
+---
+title: globals
+---
+
+<Intro>
+
+Validates against assignment/mutation of globals during render, part of ensuring that [side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+Global variables exist outside React's control. When you modify them during render, you break React's assumption that rendering is pure. This can cause components to behave differently in development vs production, break Fast Refresh, and make your app impossible to optimize with features like React Compiler.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Global counter
+let renderCount = 0;
+function Component() {
+  renderCount++; // Mutating global
+  return <div>Count: {renderCount}</div>;
+}
+
+// ❌ Modifying window properties
+function Component({userId}) {
+  window.currentUser = userId; // Global mutation
+  return <div>User: {userId}</div>;
+}
+
+// ❌ Global array push
+const events = [];
+function Component({event}) {
+  events.push(event); // Mutating global array
+  return <div>Events: {events.length}</div>;
+}
+
+// ❌ Cache manipulation
+const cache = {};
+function Component({id}) {
+  if (!cache[id]) {
+    cache[id] = fetchData(id); // Modifying cache during render
+  }
+  return <div>{cache[id]}</div>;
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Use state for counters
+function Component() {
+  const [clickCount, setClickCount] = useState(0);
+
+  const handleClick = () => {
+    setClickCount(c => c + 1);
+  };
+
+  return (
+    <button onClick={handleClick}>
+      Clicked: {clickCount} times
+    </button>
+  );
+}
+
+// ✅ Use context for global values
+function Component() {
+  const user = useContext(UserContext);
+  return <div>User: {user.id}</div>;
+}
+
+// ✅ Synchronize external state with React
+function Component({title}) {
+  useEffect(() => {
+    document.title = title; // OK in effect
+  }, [title]);
+
+  return <div>Page: {title}</div>;
+}
+```
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md
new file mode 100644
index 000000000..2314cde06
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md
@@ -0,0 +1,161 @@
+---
+title: immutability
+---
+
+<Intro>
+
+Validates against mutating props, state, and other values that [are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable).
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+A component’s props and state are immutable snapshots. Never mutate them directly. Instead, pass new props down, and use the setter function from `useState`.
+
+## Common Violations {/*common-violations*/}
+
+### Invalid {/*invalid*/}
+
+```js
+// ❌ Array push mutation
+function Component() {
+  const [items, setItems] = useState([1, 2, 3]);
+
+  const addItem = () => {
+    items.push(4); // Mutating!
+    setItems(items); // Same reference, no re-render
+  };
+}
+
+// ❌ Object property assignment
+function Component() {
+  const [user, setUser] = useState({name: 'Alice'});
+
+  const updateName = () => {
+    user.name = 'Bob'; // Mutating!
+    setUser(user); // Same reference
+  };
+}
+
+// ❌ Sort without spreading
+function Component() {
+  const [items, setItems] = useState([3, 1, 2]);
+
+  const sortItems = () => {
+    setItems(items.sort()); // sort mutates!
+  };
+}
+```
+
+### Valid {/*valid*/}
+
+```js
+// ✅ Create new array
+function Component() {
+  const [items, setItems] = useState([1, 2, 3]);
+
+  const addItem = () => {
+    setItems([...items, 4]); // New array
+  };
+}
+
+// ✅ Create new object
+function Component() {
+  const [user, setUser] = useState({name: 'Alice'});
+
+  const updateName = () => {
+    setUser({...user, name: 'Bob'}); // New object
+  };
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I need to add items to an array {/*add-items-array*/}
+
+Mutating arrays with methods like `push()` won't trigger re-renders:
+
+```js
+// ❌ Wrong: Mutating the array
+function TodoList() {
+  const [todos, setTodos] = useState([]);
+
+  const addTodo = (id, text) => {
+    todos.push({id, text});
+    setTodos(todos); // Same array reference!
+  };
+
+  return (
+    <ul>
+      {todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
+    </ul>
+  );
+}
+```
+
+Create a new array instead:
+
+```js
+// ✅ Better: Create a new array
+function TodoList() {
+  const [todos, setTodos] = useState([]);
+
+  const addTodo = (id, text) => {
+    setTodos([...todos, {id, text}]);
+    // Or: setTodos(todos => [...todos, {id: Date.now(), text}])
+  };
+
+  return (
+    <ul>
+      {todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
+    </ul>
+  );
+}
+```
+
+### I need to update nested objects {/*update-nested-objects*/}
+
+Mutating nested properties doesn't trigger re-renders:
+
+```js
+// ❌ Wrong: Mutating nested object
+function UserProfile() {
+  const [user, setUser] = useState({
+    name: 'Alice',
+    settings: {
+      theme: 'light',
+      notifications: true
+    }
+  });
+
+  const toggleTheme = () => {
+    user.settings.theme = 'dark'; // Mutation!
+    setUser(user); // Same object reference
+  };
+}
+```
+
+Spread at each level that needs updating:
+
+```js
+// ✅ Better: Create new objects at each level
+function UserProfile() {
+  const [user, setUser] = useState({
+    name: 'Alice',
+    settings: {
+      theme: 'light',
+      notifications: true
+    }
+  });
+
+  const toggleTheme = () => {
+    setUser({
+      ...user,
+      settings: {
+        ...user.settings,
+        theme: 'dark'
+      }
+    });
+  };
+}
+```
\ No newline at end of file
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md
new file mode 100644
index 000000000..e057e1978
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md
@@ -0,0 +1,138 @@
+---
+title: incompatible-library
+---
+
+<Intro>
+
+Validates against usage of libraries which are incompatible with memoization (manual or automatic).
+
+</Intro>
+
+<Note>
+
+These libraries were designed before React's memoization rules were fully documented. They made the correct choices at the time to optimize for ergonomic ways to keep components just the right amount of reactive as app state changes. While these legacy patterns worked, we have since discovered that it's incompatible with React's programming model. We will continue working with library authors to migrate these libraries to use patterns that follow the Rules of React.
+
+</Note>
+
+## Rule Details {/*rule-details*/}
+
+Some libraries use patterns that aren't supported by React. When the linter detects usages of these APIs from a [known list](https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/HIR/DefaultModuleTypeProvider.ts), it flags them under this rule. This means that React Compiler can automatically skip over components that use these incompatible APIs, in order to avoid breaking your app.
+
+```js
+// Example of how memoization breaks with these libraries
+function Form() {
+  const { watch } = useForm();
+
+  // ❌ This value will never update, even when 'name' field changes
+  const name = useMemo(() => watch('name'), [watch]);
+
+  return <div>Name: {name}</div>; // UI appears "frozen"
+}
+```
+
+React Compiler automatically memoizes values following the Rules of React. If something breaks with manual `useMemo`, it will also break the compiler's automatic optimization. This rule helps identify these problematic patterns.
+
+<DeepDive>
+
+#### Designing APIs that follow the Rules of React {/*designing-apis-that-follow-the-rules-of-react*/}
+
+One question to think about when designing a library API or hook is whether calling the API can be safely memoized with `useMemo`. If it can't, then both manual and React Compiler memoizations will break your user's code.
+
+For example, one such incompatible pattern is "interior mutability". Interior mutability is when an object or function keeps its own hidden state that changes over time, even though the reference to it stays the same. Think of it like a box that looks the same on the outside but secretly rearranges its contents. React can't tell anything changed because it only checks if you gave it a different box, not what's inside. This breaks memoization, since React relies on the outer object (or function) changing if part of its value has changed.
+
+As a rule of thumb, when designing React APIs, think about whether `useMemo` would break it:
+
+```js
+function Component() {
+  const { someFunction } = useLibrary();
+  // it should always be safe to memoize functions like this
+  const result = useMemo(() => someFunction(), [someFunction]);
+}
+```
+
+Instead, design APIs that return immutable state and use explicit update functions:
+
+```js
+// ✅ Good: Return immutable state that changes reference when updated
+function Component() {
+  const { field, updateField } = useLibrary();
+  // this is always safe to memo
+  const greeting = useMemo(() => `Hello, ${field.name}!`, [field.name]);
+
+  return (
+    <div>
+      <input
+        value={field.name}
+        onChange={(e) => updateField('name', e.target.value)}
+      />
+      <p>{greeting}</p>
+    </div>
+  );
+}
+```
+
+</DeepDive>
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ react-hook-form `watch`
+function Component() {
+  const {watch} = useForm();
+  const value = watch('field'); // Interior mutability
+  return <div>{value}</div>;
+}
+
+// ❌ TanStack Table `useReactTable`
+function Component({data}) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+  // table instance uses interior mutability
+  return <Table table={table} />;
+}
+```
+
+<Pitfall>
+
+#### MobX {/*mobx*/}
+
+MobX patterns like `observer` also break memoization assumptions, but the linter does not yet detect them. If you rely on MobX and find that your app doesn't work with React Compiler, you may need to use the `"use no memo" directive`.
+
+```js
+// ❌ MobX `observer`
+const Component = observer(() => {
+  const [timer] = useState(() => new Timer());
+  return <span>Seconds passed: {timer.secondsPassed}</span>;
+});
+```
+
+</Pitfall>
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ For react-hook-form, use `useWatch`:
+function Component() {
+  const {register, control} = useForm();
+  const watchedValue = useWatch({
+    control,
+    name: 'field'
+  });
+
+  return (
+    <>
+      <input {...register('field')} />
+      <div>Current value: {watchedValue}</div>
+    </>
+  );
+}
+```
+
+Some other libraries do not yet have alternative APIs that are compatible with React's memoization model. If the linter doesn't automatically skip over your components or hooks that call these APIs, please [file an issue](https://github.com/facebook/react/issues) so we can add it to the linter.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md
new file mode 100644
index 000000000..93b582b1e
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md
@@ -0,0 +1,93 @@
+---
+title: preserve-manual-memoization
+---
+
+<Intro>
+
+Validates that existing manual memoization is preserved by the compiler. React Compiler will only compile components and hooks if its inference [matches or exceeds the existing manual memoization](/learn/react-compiler/introduction#what-should-i-do-about-usememo-usecallback-and-reactmemo).
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+React Compiler preserves your existing `useMemo`, `useCallback`, and `React.memo` calls. If you've manually memoized something, the compiler assumes you had a good reason and won't remove it. However, incomplete dependencies prevent the compiler from understanding your code's data flow and applying further optimizations.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Missing dependencies in useMemo
+function Component({ data, filter }) {
+  const filtered = useMemo(
+    () => data.filter(filter),
+    [data] // Missing 'filter' dependency
+  );
+
+  return <List items={filtered} />;
+}
+
+// ❌ Missing dependencies in useCallback
+function Component({ onUpdate, value }) {
+  const handleClick = useCallback(() => {
+    onUpdate(value);
+  }, [onUpdate]); // Missing 'value'
+
+  return <button onClick={handleClick}>Update</button>;
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Complete dependencies
+function Component({ data, filter }) {
+  const filtered = useMemo(
+    () => data.filter(filter),
+    [data, filter] // All dependencies included
+  );
+
+  return <List items={filtered} />;
+}
+
+// ✅ Or let the compiler handle it
+function Component({ data, filter }) {
+  // No manual memoization needed
+  const filtered = data.filter(filter);
+  return <List items={filtered} />;
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Should I remove my manual memoization? {/*remove-manual-memoization*/}
+
+You might wonder if React Compiler makes manual memoization unnecessary:
+
+```js
+// Do I still need this?
+function Component({items, sortBy}) {
+  const sorted = useMemo(() => {
+    return [...items].sort((a, b) => {
+      return a[sortBy] - b[sortBy];
+    });
+  }, [items, sortBy]);
+
+  return <List items={sorted} />;
+}
+```
+
+You can safely remove it if using React Compiler:
+
+```js
+// ✅ Better: Let the compiler optimize
+function Component({items, sortBy}) {
+  const sorted = [...items].sort((a, b) => {
+    return a[sortBy] - b[sortBy];
+  });
+
+  return <List items={sorted} />;
+}
+```
\ No newline at end of file
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/purity.md b/src/content/reference/eslint-plugin-react-hooks/lints/purity.md
new file mode 100644
index 000000000..af8aacc61
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/purity.md
@@ -0,0 +1,83 @@
+---
+title: purity
+---
+
+<Intro>
+
+Validates that [components/hooks are pure](/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions.
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+React components must be pure functions - given the same props, they should always return the same JSX. When components use functions like `Math.random()` or `Date.now()` during render, they produce different output each time, breaking React's assumptions and causing bugs like hydration mismatches, incorrect memoization, and unpredictable behavior.
+
+## Common Violations {/*common-violations*/}
+
+In general, any API that returns a different value for the same inputs violates this rule. Usual examples include:
+
+- `Math.random()`
+- `Date.now()` / `new Date()`
+- `crypto.randomUUID()`
+- `performance.now()`
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Math.random() in render
+function Component() {
+  const id = Math.random(); // Different every render
+  return <div key={id}>Content</div>;
+}
+
+// ❌ Date.now() for values
+function Component() {
+  const timestamp = Date.now(); // Changes every render
+  return <div>Created at: {timestamp}</div>;
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Stable IDs from initial state
+function Component() {
+  const [id] = useState(() => crypto.randomUUID());
+  return <div key={id}>Content</div>;
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I need to show the current time {/*current-time*/}
+
+Calling `Date.now()` during render makes your component impure:
+
+```js {expectedErrors: {'react-compiler': [3]}}
+// ❌ Wrong: Time changes every render
+function Clock() {
+  return <div>Current time: {Date.now()}</div>;
+}
+```
+
+Instead, [move the impure function outside of render](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent):
+
+```js
+function Clock() {
+  const [time, setTime] = useState(() => Date.now());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(Date.now());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return <div>Current time: {time}</div>;
+}
+```
\ No newline at end of file
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/refs.md b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md
new file mode 100644
index 000000000..3108fdd89
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md
@@ -0,0 +1,115 @@
+---
+title: refs
+---
+
+<Intro>
+
+Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](/reference/react/useRef#usage).
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+Refs hold values that aren't used for rendering. Unlike state, changing a ref doesn't trigger a re-render. Reading or writing `ref.current` during render breaks React's expectations. Refs might not be initialized when you try to read them, and their values can be stale or inconsistent.
+
+## How It Detects Refs {/*how-it-detects-refs*/}
+
+The lint only applies these rules to values it knows are refs. A value is inferred as a ref when the compiler sees any of the following patterns:
+
+- Returned from `useRef()` or `React.createRef()`.
+
+  ```js
+  const scrollRef = useRef(null);
+  ```
+
+- An identifier named `ref` or ending in `Ref` that reads from or writes to `.current`.
+
+  ```js
+  buttonRef.current = node;
+  ```
+
+- Passed through a JSX `ref` prop (for example `<div ref={someRef} />`).
+
+  ```jsx
+  <input ref={inputRef} />
+  ```
+
+Once something is marked as a ref, that inference follows the value through assignments, destructuring, or helper calls. This lets the lint surface violations even when `ref.current` is accessed inside another function that received the ref as an argument.
+
+## Common Violations {/*common-violations*/}
+
+- Reading `ref.current` during render
+- Updating `refs` during render
+- Using `refs` for values that should be state
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Reading ref during render
+function Component() {
+  const ref = useRef(0);
+  const value = ref.current; // Don't read during render
+  return <div>{value}</div>;
+}
+
+// ❌ Modifying ref during render
+function Component({value}) {
+  const ref = useRef(null);
+  ref.current = value; // Don't modify during render
+  return <div />;
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Read ref in effects/handlers
+function Component() {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      console.log(ref.current.offsetWidth); // OK in effect
+    }
+  });
+
+  return <div ref={ref} />;
+}
+
+// ✅ Use state for UI values
+function Component() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      {count}
+    </button>
+  );
+}
+
+// ✅ Lazy initialization of ref value
+function Component() {
+  const ref = useRef(null);
+
+  // Initialize only once on first use
+  if (ref.current === null) {
+    ref.current = expensiveComputation(); // OK - lazy initialization
+  }
+
+  const handleClick = () => {
+    console.log(ref.current); // Use the initialized value
+  };
+
+  return <button onClick={handleClick}>Click</button>;
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### The lint flagged my plain object with `.current` {/*plain-object-current*/}
+
+The name heuristic intentionally treats `ref.current` and `fooRef.current` as real refs. If you're modeling a custom container object, pick a different name (for example, `box`) or move the mutable value into state. Renaming avoids the lint because the compiler stops inferring it as a ref.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md
new file mode 100644
index 000000000..6508fc867
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md
@@ -0,0 +1,161 @@
+---
+title: rules-of-hooks
+---
+
+<Intro>
+
+Validates that components and hooks follow the [Rules of Hooks](/reference/rules/rules-of-hooks).
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+React relies on the order in which hooks are called to correctly preserve state between renders. Each time your component renders, React expects the exact same hooks to be called in the exact same order. When hooks are called conditionally or in loops, React loses track of which state corresponds to which hook call, leading to bugs like state mismatches and "Rendered fewer/more hooks than expected" errors.
+
+## Common Violations {/*common-violations*/}
+
+These patterns violate the Rules of Hooks:
+
+- **Hooks in conditions** (`if`/`else`, ternary, `&&`/`||`)
+- **Hooks in loops** (`for`, `while`, `do-while`)
+- **Hooks after early returns**
+- **Hooks in callbacks/event handlers**
+- **Hooks in async functions**
+- **Hooks in class methods**
+- **Hooks at module level**
+
+<Note>
+
+### `use` hook {/*use-hook*/}
+
+The `use` hook is different from other React hooks. You can call it conditionally and in loops:
+
+```js
+// ✅ `use` can be conditional
+if (shouldFetch) {
+  const data = use(fetchPromise);
+}
+
+// ✅ `use` can be in loops
+for (const promise of promises) {
+  results.push(use(promise));
+}
+```
+
+However, `use` still has restrictions:
+- Can't be wrapped in try/catch
+- Must be called inside a component or hook
+
+Learn more: [`use` API Reference](/reference/react/use)
+
+</Note>
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Hook in condition
+if (isLoggedIn) {
+  const [user, setUser] = useState(null);
+}
+
+// ❌ Hook after early return
+if (!data) return <Loading />;
+const [processed, setProcessed] = useState(data);
+
+// ❌ Hook in callback
+<button onClick={() => {
+  const [clicked, setClicked] = useState(false);
+}}/>
+
+// ❌ `use` in try/catch
+try {
+  const data = use(promise);
+} catch (e) {
+  // error handling
+}
+
+// ❌ Hook at module level
+const globalState = useState(0); // Outside component
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+function Component({ isSpecial, shouldFetch, fetchPromise }) {
+  // ✅ Hooks at top level
+  const [count, setCount] = useState(0);
+  const [name, setName] = useState('');
+
+  if (!isSpecial) {
+    return null;
+  }
+
+  if (shouldFetch) {
+    // ✅ `use` can be conditional
+    const data = use(fetchPromise);
+    return <div>{data}</div>;
+  }
+
+  return <div>{name}: {count}</div>;
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I want to fetch data based on some condition {/*conditional-data-fetching*/}
+
+You're trying to conditionally call useEffect:
+
+```js
+// ❌ Conditional hook
+if (isLoggedIn) {
+  useEffect(() => {
+    fetchUserData();
+  }, []);
+}
+```
+
+Call the hook unconditionally, check condition inside:
+
+```js
+// ✅ Condition inside hook
+useEffect(() => {
+  if (isLoggedIn) {
+    fetchUserData();
+  }
+}, [isLoggedIn]);
+```
+
+<Note>
+
+There are better ways to fetch data rather than in a useEffect. Consider using React Query, useSWR, or React Router 6.4+ for data fetching. These solutions handle deduplicating requests, caching responses, and avoiding network waterfalls.
+
+Learn more: [Fetching Data](/learn/synchronizing-with-effects#fetching-data)
+
+</Note>
+
+### I need different state for different scenarios {/*conditional-state-initialization*/}
+
+You're trying to conditionally initialize state:
+
+```js
+// ❌ Conditional state
+if (userType === 'admin') {
+  const [permissions, setPermissions] = useState(adminPerms);
+} else {
+  const [permissions, setPermissions] = useState(userPerms);
+}
+```
+
+Always call useState, conditionally set the initial value:
+
+```js
+// ✅ Conditional initial value
+const [permissions, setPermissions] = useState(
+  userType === 'admin' ? adminPerms : userPerms
+);
+```
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md
new file mode 100644
index 000000000..8c6a7cb47
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md
@@ -0,0 +1,93 @@
+---
+title: set-state-in-effect
+---
+
+<Intro>
+
+Validates against calling setState synchronously in an effect, which can lead to re-renders that degrade performance.
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+Setting state immediately inside an effect forces React to restart the entire render cycle. When you update state in an effect, React must re-render your component, apply changes to the DOM, and then run effects again. This creates an extra render pass that could have been avoided by transforming data directly during render or deriving state from props. Transform data at the top level of your component instead. This code will naturally re-run when props or state change without triggering additional render cycles.
+
+Synchronous `setState` calls in effects trigger immediate re-renders before the browser can paint, causing performance issues and visual jank. React has to render twice: once to apply the state update, then again after effects run. This double rendering is wasteful when the same result could be achieved with a single render.
+
+In many cases, you may also not need an effect at all. Please see [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) for more information.
+
+## Common Violations {/*common-violations*/}
+
+This rule catches several patterns where synchronous setState is used unnecessarily:
+
+- Setting loading state synchronously
+- Deriving state from props in effects
+- Transforming data in effects instead of render
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Synchronous setState in effect
+function Component({data}) {
+  const [items, setItems] = useState([]);
+
+  useEffect(() => {
+    setItems(data); // Extra render, use initial state instead
+  }, [data]);
+}
+
+// ❌ Setting loading state synchronously
+function Component() {
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true); // Synchronous, causes extra render
+    fetchData().then(() => setLoading(false));
+  }, []);
+}
+
+// ❌ Transforming data in effect
+function Component({rawData}) {
+  const [processed, setProcessed] = useState([]);
+
+  useEffect(() => {
+    setProcessed(rawData.map(transform)); // Should derive in render
+  }, [rawData]);
+}
+
+// ❌ Deriving state from props
+function Component({selectedId, items}) {
+  const [selected, setSelected] = useState(null);
+
+  useEffect(() => {
+    setSelected(items.find(i => i.id === selectedId));
+  }, [selectedId, items]);
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js {expectedErrors: {'react-compiler': [8]}}
+// ✅ setState in an effect is fine if the value comes from a ref
+function Tooltip() {
+  const ref = useRef(null);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const { height } = ref.current.getBoundingClientRect();
+    setTooltipHeight(height);
+  }, []);
+}
+
+// ✅ Calculate during render
+function Component({selectedId, items}) {
+  const selected = items.find(i => i.id === selectedId);
+  return <div>{selected?.name}</div>;
+}
+```
+
+**When something can be calculated from the existing props or state, don't put it in state.** Instead, calculate it during rendering. This makes your code faster, simpler, and less error-prone. Learn more in [You Might Not Need an Effect](/learn/you-might-not-need-an-effect).
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
new file mode 100644
index 000000000..61852990a
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
@@ -0,0 +1,95 @@
+---
+title: set-state-in-render
+---
+
+<Intro>
+
+Validates against setting state during render, which can trigger additional renders and potential infinite render loops.
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+Calling `setState` during render triggers another render before the current one finishes. This creates an infinite loop that crashes your app.
+
+## Common Violations {/*common-violations*/}
+
+### Invalid {/*invalid*/}
+
+```js {expectedErrors: {'react-compiler': [4]}}
+// ❌ setState directly in render
+function Component({value}) {
+  const [count, setCount] = useState(0);
+  setCount(value); // Infinite loop!
+  return <div>{count}</div>;
+}
+```
+
+### Valid {/*valid*/}
+
+```js
+// ✅ Derive during render
+function Component({items}) {
+  const sorted = [...items].sort(); // Just calculate it in render
+  return <ul>{sorted.map(/*...*/)}</ul>;
+}
+
+// ✅ Set state in event handler
+function Component() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      {count}
+    </button>
+  );
+}
+
+// ✅ Derive from props instead of setting state
+function Component({user}) {
+  const name = user?.name || '';
+  const email = user?.email || '';
+  return <div>{name}</div>;
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I want to sync state to a prop {/*clamp-state-to-prop*/}
+
+A common problem is trying to "fix" state after it renders. Suppose you want to keep a counter from exceeding a `max` prop:
+
+```js
+// ❌ Wrong: clamps during render
+function Counter({max}) {
+  const [count, setCount] = useState(0);
+
+  if (count > max) {
+    setCount(max);
+  }
+
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      {count}
+    </button>
+  );
+}
+```
+
+As soon as `count` exceeds `max`, an infinite loop is triggered.
+
+Instead, it's often better to move this logic to the event (the place where the state is first set). For example, you can enforce the maximum at the moment you update state:
+
+```js
+// ✅ Clamp when updating
+function Counter({max}) {
+  const [count, setCount] = useState(0);
+
+  const increment = () => {
+    setCount(current => Math.min(current + 1, max));
+  };
+
+  return <button onClick={increment}>{count}</button>;
+}
+```
+
+Now the setter only runs in response to the click, React finishes the render normally, and `count` never crosses `max`.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md
new file mode 100644
index 000000000..709303612
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md
@@ -0,0 +1,103 @@
+---
+title: static-components
+---
+
+<Intro>
+
+Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering.
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+Components defined inside other components are recreated on every render. React sees each as a brand new component type, unmounting the old one and mounting the new one, destroying all state and DOM nodes in the process.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Component defined inside component
+function Parent() {
+  const ChildComponent = () => { // New component every render!
+    const [count, setCount] = useState(0);
+    return <button onClick={() => setCount(count + 1)}>{count}</button>;
+  };
+
+  return <ChildComponent />; // State resets every render
+}
+
+// ❌ Dynamic component creation
+function Parent({type}) {
+  const Component = type === 'button' 
+    ? () => <button>Click</button>
+    : () => <div>Text</div>;
+  
+  return <Component />;
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Components at module level
+const ButtonComponent = () => <button>Click</button>;
+const TextComponent = () => <div>Text</div>;
+
+function Parent({type}) {
+  const Component = type === 'button' 
+    ? ButtonComponent  // Reference existing component
+    : TextComponent;
+  
+  return <Component />;
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I need to render different components conditionally {/*conditional-components*/}
+
+You might define components inside to access local state:
+
+```js {expectedErrors: {'react-compiler': [13]}}
+// ❌ Wrong: Inner component to access parent state
+function Parent() {
+  const [theme, setTheme] = useState('light');
+  
+  function ThemedButton() { // Recreated every render!
+    return (
+      <button className={theme}>
+        Click me
+      </button>
+    );
+  }
+  
+  return <ThemedButton />;
+}
+```
+
+Pass data as props instead:
+
+```js
+// ✅ Better: Pass props to static component
+function ThemedButton({theme}) {
+  return (
+    <button className={theme}>
+      Click me
+    </button>
+  );
+}
+
+function Parent() {
+  const [theme, setTheme] = useState('light');
+  return <ThemedButton theme={theme} />;
+}
+```
+
+<Note>
+
+If you find yourself wanting to define components inside other components to access local variables, that's a sign you should be passing props instead. This makes components more reusable and testable.
+
+</Note>
\ No newline at end of file
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md b/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md
new file mode 100644
index 000000000..a3eefcdb2
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md
@@ -0,0 +1,102 @@
+---
+title: unsupported-syntax
+---
+
+<Intro>
+
+Validates against syntax that React Compiler does not support. If you need to, you can still use this syntax outside of React, such as in a standalone utility function.
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+React Compiler needs to statically analyze your code to apply optimizations. Features like `eval` and `with` make it impossible to statically understand what the code does at compile time, so the compiler can't optimize components that use them.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Using eval in component
+function Component({ code }) {
+  const result = eval(code); // Can't be analyzed
+  return <div>{result}</div>;
+}
+
+// ❌ Using with statement
+function Component() {
+  with (Math) { // Changes scope dynamically
+    return <div>{sin(PI / 2)}</div>;
+  }
+}
+
+// ❌ Dynamic property access with eval
+function Component({propName}) {
+  const value = eval(`props.${propName}`);
+  return <div>{value}</div>;
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Use normal property access
+function Component({propName, props}) {
+  const value = props[propName]; // Analyzable
+  return <div>{value}</div>;
+}
+
+// ✅ Use standard Math methods
+function Component() {
+  return <div>{Math.sin(Math.PI / 2)}</div>;
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I need to evaluate dynamic code {/*evaluate-dynamic-code*/}
+
+You might need to evaluate user-provided code:
+
+```js {expectedErrors: {'react-compiler': [3]}}
+// ❌ Wrong: eval in component
+function Calculator({expression}) {
+  const result = eval(expression); // Unsafe and unoptimizable
+  return <div>Result: {result}</div>;
+}
+```
+
+Use a safe expression parser instead:
+
+```js
+// ✅ Better: Use a safe parser
+import {evaluate} from 'mathjs'; // or similar library
+
+function Calculator({expression}) {
+  const [result, setResult] = useState(null);
+
+  const calculate = () => {
+    try {
+      // Safe mathematical expression evaluation
+      setResult(evaluate(expression));
+    } catch (error) {
+      setResult('Invalid expression');
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={calculate}>Calculate</button>
+      {result && <div>Result: {result}</div>}
+    </div>
+  );
+}
+```
+
+<Note>
+
+Never use `eval` with user input - it's a security risk. Use dedicated parsing libraries for specific use cases like mathematical expressions, JSON parsing, or template evaluation.
+
+</Note>
\ No newline at end of file
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
new file mode 100644
index 000000000..54bbe1579
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
@@ -0,0 +1,94 @@
+---
+title: use-memo
+---
+
+<Intro>
+
+Validates usage of the `useMemo` hook without a return value. See [`useMemo` docs](/reference/react/useMemo) for more information.
+
+</Intro>
+
+## Rule Details {/*rule-details*/}
+
+`useMemo` is for computing and caching expensive values, not for side effects. Without a return value, `useMemo` returns `undefined`, which defeats its purpose and likely indicates you're using the wrong hook.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js {expectedErrors: {'react-compiler': [3]}}
+// ❌ No return value
+function Component({ data }) {
+  const processed = useMemo(() => {
+    data.forEach(item => console.log(item));
+    // Missing return!
+  }, [data]);
+
+  return <div>{processed}</div>; // Always undefined
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Returns computed value
+function Component({ data }) {
+  const processed = useMemo(() => {
+    return data.map(item => item * 2);
+  }, [data]);
+
+  return <div>{processed}</div>;
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I need to run side effects when dependencies change {/*side-effects*/}
+
+You might try to use `useMemo` for side effects:
+
+{/* TODO(@poteto) fix compiler validation to check for unassigned useMemos */}
+```js {expectedErrors: {'react-compiler': [4]}}
+// ❌ Wrong: Side effects in useMemo
+function Component({user}) {
+  // No return value, just side effect
+  useMemo(() => {
+    analytics.track('UserViewed', {userId: user.id});
+  }, [user.id]);
+
+  // Not assigned to a variable
+  useMemo(() => {
+    return analytics.track('UserViewed', {userId: user.id});
+  }, [user.id]);
+}
+```
+
+If the side effect needs to happen in response to user interaction, it's best to colocate the side effect with the event:
+
+```js
+// ✅ Good: Side effects in event handlers
+function Component({user}) {
+  const handleClick = () => {
+    analytics.track('ButtonClicked', {userId: user.id});
+    // Other click logic...
+  };
+
+  return <button onClick={handleClick}>Click me</button>;
+}
+```
+
+If the side effect sychronizes React state with some external state (or vice versa), use `useEffect`:
+
+```js
+// ✅ Good: Synchronization in useEffect
+function Component({theme}) {
+  useEffect(() => {
+    localStorage.setItem('preferredTheme', theme);
+    document.body.className = theme;
+  }, [theme]);
+
+  return <div>Current theme: {theme}</div>;
+}
+```
diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md
new file mode 100644
index 000000000..5513d1c6a
--- /dev/null
+++ b/src/content/reference/react-compiler/compilationMode.md
@@ -0,0 +1,201 @@
+---
+title: compilationMode
+---
+
+<Intro>
+
+The `compilationMode` option controls how the React Compiler selects which functions to compile.
+
+</Intro>
+
+```js
+{
+  compilationMode: 'infer' // or 'annotation', 'syntax', 'all'
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `compilationMode` {/*compilationmode*/}
+
+Controls the strategy for determining which functions the React Compiler will optimize.
+
+#### Type {/*type*/}
+
+```
+'infer' | 'syntax' | 'annotation' | 'all'
+```
+
+#### Default value {/*default-value*/}
+
+`'infer'`
+
+#### Options {/*options*/}
+
+- **`'infer'`** (default): The compiler uses intelligent heuristics to identify React components and hooks:
+  - Functions explicitly annotated with `"use memo"` directive
+  - Functions that are named like components (PascalCase) or hooks (`use` prefix) AND create JSX and/or call other hooks
+
+- **`'annotation'`**: Only compile functions explicitly marked with the `"use memo"` directive. Ideal for incremental adoption.
+
+- **`'syntax'`**: Only compile components and hooks that use Flow's [component](https://flow.org/en/docs/react/component-syntax/) and [hook](https://flow.org/en/docs/react/hook-syntax/) syntax.
+
+- **`'all'`**: Compile all top-level functions. Not recommended as it may compile non-React functions.
+
+#### Caveats {/*caveats*/}
+
+- The `'infer'` mode requires functions to follow React naming conventions to be detected
+- Using `'all'` mode may negatively impact performance by compiling utility functions
+- The `'syntax'` mode requires Flow and won't work with TypeScript
+- Regardless of mode, functions with `"use no memo"` directive are always skipped
+
+---
+
+## Usage {/*usage*/}
+
+### Default inference mode {/*default-inference-mode*/}
+
+The default `'infer'` mode works well for most codebases that follow React conventions:
+
+```js
+{
+  compilationMode: 'infer'
+}
+```
+
+With this mode, these functions will be compiled:
+
+```js
+// ✅ Compiled: Named like a component + returns JSX
+function Button(props) {
+  return <button>{props.label}</button>;
+}
+
+// ✅ Compiled: Named like a hook + calls hooks
+function useCounter() {
+  const [count, setCount] = useState(0);
+  return [count, setCount];
+}
+
+// ✅ Compiled: Explicit directive
+function expensiveCalculation(data) {
+  "use memo";
+  return data.reduce(/* ... */);
+}
+
+// ❌ Not compiled: Not a component/hook pattern
+function calculateTotal(items) {
+  return items.reduce((a, b) => a + b, 0);
+}
+```
+
+### Incremental adoption with annotation mode {/*incremental-adoption*/}
+
+For gradual migration, use `'annotation'` mode to only compile marked functions:
+
+```js
+{
+  compilationMode: 'annotation'
+}
+```
+
+Then explicitly mark functions to compile:
+
+```js
+// Only this function will be compiled
+function ExpensiveList(props) {
+  "use memo";
+  return (
+    <ul>
+      {props.items.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+}
+
+// This won't be compiled without the directive
+function NormalComponent(props) {
+  return <div>{props.content}</div>;
+}
+```
+
+### Using Flow syntax mode {/*flow-syntax-mode*/}
+
+If your codebase uses Flow instead of TypeScript:
+
+```js
+{
+  compilationMode: 'syntax'
+}
+```
+
+Then use Flow's component syntax:
+
+```js
+// Compiled: Flow component syntax
+component Button(label: string) {
+  return <button>{label}</button>;
+}
+
+// Compiled: Flow hook syntax
+hook useCounter(initial: number) {
+  const [count, setCount] = useState(initial);
+  return [count, setCount];
+}
+
+// Not compiled: Regular function syntax
+function helper(data) {
+  return process(data);
+}
+```
+
+### Opting out specific functions {/*opting-out*/}
+
+Regardless of compilation mode, use `"use no memo"` to skip compilation:
+
+```js
+function ComponentWithSideEffects() {
+  "use no memo"; // Prevent compilation
+
+  // This component has side effects that shouldn't be memoized
+  logToAnalytics('component_rendered');
+
+  return <div>Content</div>;
+}
+```
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Component not being compiled in infer mode {/*component-not-compiled-infer*/}
+
+In `'infer'` mode, ensure your component follows React conventions:
+
+```js
+// ❌ Won't be compiled: lowercase name
+function button(props) {
+  return <button>{props.label}</button>;
+}
+
+// ✅ Will be compiled: PascalCase name
+function Button(props) {
+  return <button>{props.label}</button>;
+}
+
+// ❌ Won't be compiled: doesn't create JSX or call hooks
+function useData() {
+  return window.localStorage.getItem('data');
+}
+
+// ✅ Will be compiled: calls a hook
+function useData() {
+  const [data] = useState(() => window.localStorage.getItem('data'));
+  return data;
+}
+```
diff --git a/src/content/reference/react-compiler/compiling-libraries.md b/src/content/reference/react-compiler/compiling-libraries.md
new file mode 100644
index 000000000..f09ffcb72
--- /dev/null
+++ b/src/content/reference/react-compiler/compiling-libraries.md
@@ -0,0 +1,106 @@
+---
+title: Compiling Libraries
+---
+
+<Intro>
+This guide helps library authors understand how to use React Compiler to ship optimized library code to their users.
+</Intro>
+
+<InlineToc />
+
+## Why Ship Compiled Code? {/*why-ship-compiled-code*/}
+
+As a library author, you can compile your library code before publishing to npm. This provides several benefits:
+
+- **Performance improvements for all users** - Your library users get optimized code even if they aren't using React Compiler yet
+- **No configuration required by users** - The optimizations work out of the box
+- **Consistent behavior** - All users get the same optimized version regardless of their build setup
+
+## Setting Up Compilation {/*setting-up-compilation*/}
+
+Add React Compiler to your library's build process:
+
+<TerminalBlock>
+npm install -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+Configure your build tool to compile your library. For example, with Babel:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    'babel-plugin-react-compiler',
+  ],
+  // ... other config
+};
+```
+
+## Backwards Compatibility {/*backwards-compatibility*/}
+
+If your library supports React versions below 19, you'll need additional configuration:
+
+### 1. Install the runtime package {/*install-runtime-package*/}
+
+We recommend installing react-compiler-runtime as a direct dependency:
+
+<TerminalBlock>
+npm install react-compiler-runtime@rc
+</TerminalBlock>
+
+```json
+{
+  "dependencies": {
+    "react-compiler-runtime": "^19.1.0-rc.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  }
+}
+```
+
+### 2. Configure the target version {/*configure-target-version*/}
+
+Set the minimum React version your library supports:
+
+```js
+{
+  target: '17', // Minimum supported React version
+}
+```
+
+## Testing Strategy {/*testing-strategy*/}
+
+Test your library both with and without compilation to ensure compatibility. Run your existing test suite against the compiled code, and also create a separate test configuration that bypasses the compiler. This helps catch any issues that might arise from the compilation process and ensures your library works correctly in all scenarios.
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Library doesn't work with older React versions {/*library-doesnt-work-with-older-react-versions*/}
+
+If your compiled library throws errors in React 17 or 18:
+
+1. Verify you've installed `react-compiler-runtime` as a dependency
+2. Check that your `target` configuration matches your minimum supported React version
+3. Ensure the runtime package is included in your published bundle
+
+### Compilation conflicts with other Babel plugins {/*compilation-conflicts-with-other-babel-plugins*/}
+
+Some Babel plugins may conflict with React Compiler:
+
+1. Place `babel-plugin-react-compiler` early in your plugin list
+2. Disable conflicting optimizations in other plugins
+3. Test your build output thoroughly
+
+### Runtime module not found {/*runtime-module-not-found*/}
+
+If users see "Cannot find module 'react-compiler-runtime'":
+
+1. Ensure the runtime is listed in `dependencies`, not `devDependencies`
+2. Check that your bundler includes the runtime in the output
+3. Verify the package is published to npm with your library
+
+## Next Steps {/*next-steps*/}
+
+- Learn about [debugging techniques](/learn/react-compiler/debugging) for compiled code
+- Check the [configuration options](/reference/react-compiler/configuration) for all compiler options
+- Explore [compilation modes](/reference/react-compiler/compilationMode) for selective optimization
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/configuration.md b/src/content/reference/react-compiler/configuration.md
new file mode 100644
index 000000000..f38f1afc0
--- /dev/null
+++ b/src/content/reference/react-compiler/configuration.md
@@ -0,0 +1,151 @@
+---
+title: Configuration
+---
+
+<Intro>
+
+This page lists all configuration options available in React Compiler.
+
+</Intro>
+
+<Note>
+
+For most apps, the default options should work out of the box. If you have a special need, you can use these advanced options.
+
+</Note>
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      'babel-plugin-react-compiler', {
+        // compiler options
+      }
+    ]
+  ]
+};
+```
+
+---
+
+## Compilation Control {/*compilation-control*/}
+
+These options control *what* the compiler optimizes and *how* it selects components and hooks to compile.
+
+* [`compilationMode`](/reference/react-compiler/compilationMode) controls the strategy for selecting functions to compile (e.g., all functions, only annotated ones, or intelligent detection).
+
+```js
+{
+  compilationMode: 'annotation' // Only compile "use memo" functions
+}
+```
+
+---
+
+## Version Compatibility {/*version-compatibility*/}
+
+React version configuration ensures the compiler generates code compatible with your React version.
+
+[`target`](/reference/react-compiler/target) specifies which React version you're using (17, 18, or 19).
+
+```js
+// For React 18 projects
+{
+  target: '18' // Also requires react-compiler-runtime package
+}
+```
+
+---
+
+## Error Handling {/*error-handling*/}
+
+These options control how the compiler responds to code that doesn't follow the [Rules of React](/reference/rules).
+
+[`panicThreshold`](/reference/react-compiler/panicThreshold) determines whether to fail the build or skip problematic components.
+
+```js
+// Recommended for production
+{
+  panicThreshold: 'none' // Skip components with errors instead of failing the build
+}
+```
+
+---
+
+## Debugging {/*debugging*/}
+
+Logging and analysis options help you understand what the compiler is doing.
+
+[`logger`](/reference/react-compiler/logger) provides custom logging for compilation events.
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      if (event.kind === 'CompileSuccess') {
+        console.log('Compiled:', filename);
+      }
+    }
+  }
+}
+```
+
+---
+
+## Feature Flags {/*feature-flags*/}
+
+Conditional compilation lets you control when optimized code is used.
+
+[`gating`](/reference/react-compiler/gating) enables runtime feature flags for A/B testing or gradual rollouts.
+
+```js
+{
+  gating: {
+    source: 'my-feature-flags',
+    importSpecifierName: 'isCompilerEnabled'
+  }
+}
+```
+
+---
+
+## Common Configuration Patterns {/*common-patterns*/}
+
+### Default configuration {/*default-configuration*/}
+
+For most React 19 applications, the compiler works without configuration:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    'babel-plugin-react-compiler'
+  ]
+};
+```
+
+### React 17/18 projects {/*react-17-18*/}
+
+Older React versions need the runtime package and target configuration:
+
+```bash
+npm install react-compiler-runtime@rc
+```
+
+```js
+{
+  target: '18' // or '17'
+}
+```
+
+### Incremental adoption {/*incremental-adoption*/}
+
+Start with specific directories and expand gradually:
+
+```js
+{
+  compilationMode: 'annotation' // Only compile "use memo" functions
+}
+```
+
diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md
new file mode 100644
index 000000000..705d0f620
--- /dev/null
+++ b/src/content/reference/react-compiler/directives.md
@@ -0,0 +1,198 @@
+---
+title: Directives
+---
+
+<Intro>
+React Compiler directives are special string literals that control whether specific functions are compiled.
+</Intro>
+
+```js
+function MyComponent() {
+  "use memo"; // Opt this component into compilation
+  return <div>{/* ... */}</div>;
+}
+```
+
+<InlineToc />
+
+---
+
+## Overview {/*overview*/}
+
+React Compiler directives provide fine-grained control over which functions are optimized by the compiler. They are string literals placed at the beginning of a function body or at the top of a module.
+
+### Available directives {/*available-directives*/}
+
+* **[`"use memo"`](/reference/react-compiler/directives/use-memo)** - Opts a function into compilation
+* **[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - Opts a function out of compilation
+
+### Quick comparison {/*quick-comparison*/}
+
+| Directive | Purpose | When to use |
+|-----------|---------|-------------|
+| [`"use memo"`](/reference/react-compiler/directives/use-memo) | Force compilation | When using `annotation` mode or to override `infer` mode heuristics |
+| [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) | Prevent compilation | Debugging issues or working with incompatible code |
+
+---
+
+## Usage {/*usage*/}
+
+### Function-level directives {/*function-level*/}
+
+Place directives at the beginning of a function to control its compilation:
+
+```js
+// Opt into compilation
+function OptimizedComponent() {
+  "use memo";
+  return <div>This will be optimized</div>;
+}
+
+// Opt out of compilation
+function UnoptimizedComponent() {
+  "use no memo";
+  return <div>This won't be optimized</div>;
+}
+```
+
+### Module-level directives {/*module-level*/}
+
+Place directives at the top of a file to affect all functions in that module:
+
+```js
+// At the very top of the file
+"use memo";
+
+// All functions in this file will be compiled
+function Component1() {
+  return <div>Compiled</div>;
+}
+
+function Component2() {
+  return <div>Also compiled</div>;
+}
+
+// Can be overridden at function level
+function Component3() {
+  "use no memo"; // This overrides the module directive
+  return <div>Not compiled</div>;
+}
+```
+
+### Compilation modes interaction {/*compilation-modes*/}
+
+Directives behave differently depending on your [`compilationMode`](/reference/react-compiler/compilationMode):
+
+* **`annotation` mode**: Only functions with `"use memo"` are compiled
+* **`infer` mode**: Compiler decides what to compile, directives override decisions
+* **`all` mode**: Everything is compiled, `"use no memo"` can exclude specific functions
+
+---
+
+## Best practices {/*best-practices*/}
+
+### Use directives sparingly {/*use-sparingly*/}
+
+Directives are escape hatches. Prefer configuring the compiler at the project level:
+
+```js
+// ✅ Good - project-wide configuration
+{
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'infer'
+    }]
+  ]
+}
+
+// ⚠️ Use directives only when needed
+function SpecialCase() {
+  "use no memo"; // Document why this is needed
+  // ...
+}
+```
+
+### Document directive usage {/*document-usage*/}
+
+Always explain why a directive is used:
+
+```js
+// ✅ Good - clear explanation
+function DataGrid() {
+  "use no memo"; // TODO: Remove after fixing issue with dynamic row heights (JIRA-123)
+  // Complex grid implementation
+}
+
+// ❌ Bad - no explanation
+function Mystery() {
+  "use no memo";
+  // ...
+}
+```
+
+### Plan for removal {/*plan-removal*/}
+
+Opt-out directives should be temporary:
+
+1. Add the directive with a TODO comment
+2. Create a tracking issue
+3. Fix the underlying problem
+4. Remove the directive
+
+```js
+function TemporaryWorkaround() {
+  "use no memo"; // TODO: Remove after upgrading ThirdPartyLib to v2.0
+  return <ThirdPartyComponent />;
+}
+```
+
+---
+
+## Common patterns {/*common-patterns*/}
+
+### Gradual adoption {/*gradual-adoption*/}
+
+When adopting the React Compiler in a large codebase:
+
+```js
+// Start with annotation mode
+{
+  compilationMode: 'annotation'
+}
+
+// Opt in stable components
+function StableComponent() {
+  "use memo";
+  // Well-tested component
+}
+
+// Later, switch to infer mode and opt out problematic ones
+function ProblematicComponent() {
+  "use no memo"; // Fix issues before removing
+  // ...
+}
+```
+
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+For specific issues with directives, see the troubleshooting sections in:
+
+* [`"use memo"` troubleshooting](/reference/react-compiler/directives/use-memo#troubleshooting)
+* [`"use no memo"` troubleshooting](/reference/react-compiler/directives/use-no-memo#troubleshooting)
+
+### Common issues {/*common-issues*/}
+
+1. **Directive ignored**: Check placement (must be first) and spelling
+2. **Compilation still happens**: Check `ignoreUseNoForget` setting
+3. **Module directive not working**: Ensure it's before all imports
+
+---
+
+## See also {/*see-also*/}
+
+* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure how the compiler chooses what to optimize
+* [`Configuration`](/reference/react-compiler/configuration) - Full compiler configuration options
+* [React Compiler documentation](https://react.dev/learn/react-compiler) - Getting started guide
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/directives/use-memo.md b/src/content/reference/react-compiler/directives/use-memo.md
new file mode 100644
index 000000000..431862682
--- /dev/null
+++ b/src/content/reference/react-compiler/directives/use-memo.md
@@ -0,0 +1,157 @@
+---
+title: "use memo"
+titleForTitleTag: "'use memo' directive"
+---
+
+<Intro>
+
+`"use memo"` marks a function for React Compiler optimization.
+
+</Intro>
+
+<Note>
+
+In most cases, you don't need `"use memo"`. It's primarily needed in `annotation` mode where you must explicitly mark functions for optimization. In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`.
+
+</Note>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `"use memo"` {/*use-memo*/}
+
+Add `"use memo"` at the beginning of a function to mark it for React Compiler optimization.
+
+```js {1}
+function MyComponent() {
+  "use memo";
+  // ...
+}
+```
+
+When a function contains `"use memo"`, the React Compiler will analyze and optimize it during build time. The compiler will automatically memoize values and components to prevent unnecessary re-computations and re-renders.
+
+#### Caveats {/*caveats*/}
+
+* `"use memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK).
+* The directive must be written with double or single quotes, not backticks.
+* The directive must exactly match `"use memo"`.
+* Only the first directive in a function is processed; additional directives are ignored.
+* The effect of the directive depends on your [`compilationMode`](/reference/react-compiler/compilationMode) setting.
+
+### How `"use memo"` marks functions for optimization {/*how-use-memo-marks*/}
+
+In a React app that uses the React Compiler, functions are analyzed at build time to determine if they can be optimized. By default, the compiler automatically infers which components to memoize, but this can depend on your [`compilationMode`](/reference/react-compiler/compilationMode) setting if you've set it.
+
+`"use memo"` explicitly marks a function for optimization, overriding the default behavior:
+
+* In `annotation` mode: Only functions with `"use memo"` are optimized
+* In `infer` mode: The compiler uses heuristics, but `"use memo"` forces optimization
+* In `all` mode: Everything is optimized by default, making `"use memo"` redundant
+
+The directive creates a clear boundary in your codebase between optimized and non-optimized code, giving you fine-grained control over the compilation process.
+
+### When to use `"use memo"` {/*when-to-use*/}
+
+You should consider using `"use memo"` when:
+
+#### You're using annotation mode {/*annotation-mode-use*/}
+In `compilationMode: 'annotation'`, the directive is required for any function you want optimized:
+
+```js
+// ✅ This component will be optimized
+function OptimizedList() {
+  "use memo";
+  // ...
+}
+
+// ❌ This component won't be optimized
+function SimpleWrapper() {
+  // ...
+}
+```
+
+#### You're gradually adopting React Compiler {/*gradual-adoption*/}
+Start with `annotation` mode and selectively optimize stable components:
+
+```js
+// Start by optimizing leaf components
+function Button({ onClick, children }) {
+  "use memo";
+  // ...
+}
+
+// Gradually move up the tree as you verify behavior
+function ButtonGroup({ buttons }) {
+  "use memo";
+  // ...
+}
+```
+
+---
+
+## Usage {/*usage*/}
+
+### Working with different compilation modes {/*compilation-modes*/}
+
+The behavior of `"use memo"` changes based on your compiler configuration:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'annotation' // or 'infer' or 'all'
+    }]
+  ]
+};
+```
+
+#### Annotation mode {/*annotation-mode-example*/}
+```js
+// ✅ Optimized with "use memo"
+function ProductCard({ product }) {
+  "use memo";
+  // ...
+}
+
+// ❌ Not optimized (no directive)
+function ProductList({ products }) {
+  // ...
+}
+```
+
+#### Infer mode (default) {/*infer-mode-example*/}
+```js
+// Automatically memoized because this is named like a Component
+function ComplexDashboard({ data }) {
+  // ...
+}
+
+// Skipped: Is not named like a Component
+function simpleDisplay({ text }) {
+  // ...
+}
+```
+
+In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Verifying optimization {/*verifying-optimization*/}
+
+To confirm your component is being optimized:
+
+1. Check the compiled output in your build
+2. Use React DevTools to check for Memo ✨ badge
+
+### See also {/*see-also*/}
+
+* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - Opt out of compilation
+* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure compilation behavior
+* [React Compiler](/learn/react-compiler) - Getting started guide
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/directives/use-no-memo.md b/src/content/reference/react-compiler/directives/use-no-memo.md
new file mode 100644
index 000000000..e6c419bc6
--- /dev/null
+++ b/src/content/reference/react-compiler/directives/use-no-memo.md
@@ -0,0 +1,147 @@
+---
+title: "use no memo"
+titleForTitleTag: "'use no memo' directive"
+---
+
+<Intro>
+
+`"use no memo"` prevents a function from being optimized by React Compiler.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `"use no memo"` {/*use-no-memo*/}
+
+Add `"use no memo"` at the beginning of a function to prevent React Compiler optimization.
+
+```js {1}
+function MyComponent() {
+  "use no memo";
+  // ...
+}
+```
+
+When a function contains `"use no memo"`, the React Compiler will skip it entirely during optimization. This is useful as a temporary escape hatch when debugging or when dealing with code that doesn't work correctly with the compiler.
+
+#### Caveats {/*caveats*/}
+
+* `"use no memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK).
+* The directive must be written with double or single quotes, not backticks.
+* The directive must exactly match `"use no memo"` or its alias `"use no forget"`.
+* This directive takes precedence over all compilation modes and other directives.
+* It's intended as a temporary debugging tool, not a permanent solution.
+
+### How `"use no memo"` opts-out of optimization {/*how-use-no-memo-opts-out*/}
+
+React Compiler analyzes your code at build time to apply optimizations. `"use no memo"` creates an explicit boundary that tells the compiler to skip a function entirely.
+
+This directive takes precedence over all other settings:
+* In `all` mode: The function is skipped despite the global setting
+* In `infer` mode: The function is skipped even if heuristics would optimize it
+
+The compiler treats these functions as if the React Compiler wasn't enabled, leaving them exactly as written.
+
+### When to use `"use no memo"` {/*when-to-use*/}
+
+`"use no memo"` should be used sparingly and temporarily. Common scenarios include:
+
+#### Debugging compiler issues {/*debugging-compiler*/}
+When you suspect the compiler is causing issues, temporarily disable optimization to isolate the problem:
+
+```js
+function ProblematicComponent({ data }) {
+  "use no memo"; // TODO: Remove after fixing issue #123
+
+  // Rules of React violations that weren't statically detected
+  // ...
+}
+```
+
+#### Third-party library integration {/*third-party*/}
+When integrating with libraries that might not be compatible with the compiler:
+
+```js
+function ThirdPartyWrapper() {
+  "use no memo";
+
+  useThirdPartyHook(); // Has side effects that compiler might optimize incorrectly
+  // ...
+}
+```
+
+---
+
+## Usage {/*usage*/}
+
+The `"use no memo"` directive is placed at the beginning of a function body to prevent React Compiler from optimizing that function:
+
+```js
+function MyComponent() {
+  "use no memo";
+  // Function body
+}
+```
+
+The directive can also be placed at the top of a file to affect all functions in that module:
+
+```js
+"use no memo";
+
+// All functions in this file will be skipped by the compiler
+```
+
+`"use no memo"` at the function level overrides the module level directive.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Directive not preventing compilation {/*not-preventing*/}
+
+If `"use no memo"` isn't working:
+
+```js
+// ❌ Wrong - directive after code
+function Component() {
+  const data = getData();
+  "use no memo"; // Too late!
+}
+
+// ✅ Correct - directive first
+function Component() {
+  "use no memo";
+  const data = getData();
+}
+```
+
+Also check:
+* Spelling - must be exactly `"use no memo"`
+* Quotes - must use single or double quotes, not backticks
+
+### Best practices {/*best-practices*/}
+
+**Always document why** you're disabling optimization:
+
+```js
+// ✅ Good - clear explanation and tracking
+function DataProcessor() {
+  "use no memo"; // TODO: Remove after fixing rule of react violation
+  // ...
+}
+
+// ❌ Bad - no explanation
+function Mystery() {
+  "use no memo";
+  // ...
+}
+```
+
+### See also {/*see-also*/}
+
+* [`"use memo"`](/reference/react-compiler/directives/use-memo) - Opt into compilation
+* [React Compiler](/learn/react-compiler) - Getting started guide
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md
new file mode 100644
index 000000000..479506af3
--- /dev/null
+++ b/src/content/reference/react-compiler/gating.md
@@ -0,0 +1,141 @@
+---
+title: gating
+---
+
+<Intro>
+
+The `gating` option enables conditional compilation, allowing you to control when optimized code is used at runtime.
+
+</Intro>
+
+```js
+{
+  gating: {
+    source: 'my-feature-flags',
+    importSpecifierName: 'shouldUseCompiler'
+  }
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `gating` {/*gating*/}
+
+Configures runtime feature flag gating for compiled functions.
+
+#### Type {/*type*/}
+
+```
+{
+  source: string;
+  importSpecifierName: string;
+} | null
+```
+
+#### Default value {/*default-value*/}
+
+`null`
+
+#### Properties {/*properties*/}
+
+- **`source`**: Module path to import the feature flag from
+- **`importSpecifierName`**: Name of the exported function to import
+
+#### Caveats {/*caveats*/}
+
+- The gating function must return a boolean
+- Both compiled and original versions increase bundle size
+- The import is added to every file with compiled functions
+
+---
+
+## Usage {/*usage*/}
+
+### Basic feature flag setup {/*basic-setup*/}
+
+1. Create a feature flag module:
+
+```js
+// src/utils/feature-flags.js
+export function shouldUseCompiler() {
+  // your logic here
+  return getFeatureFlag('react-compiler-enabled');
+}
+```
+
+2. Configure the compiler:
+
+```js
+{
+  gating: {
+    source: './src/utils/feature-flags',
+    importSpecifierName: 'shouldUseCompiler'
+  }
+}
+```
+
+3. The compiler generates gated code:
+
+```js
+// Input
+function Button(props) {
+  return <button>{props.label}</button>;
+}
+
+// Output (simplified)
+import { shouldUseCompiler } from './src/utils/feature-flags';
+
+const Button = shouldUseCompiler()
+  ? function Button_optimized(props) { /* compiled version */ }
+  : function Button_original(props) { /* original version */ };
+```
+
+Note that the gating function is evaluated once at module time, so once the JS bundle has been parsed and evaluated the choice of component stays static for the rest of the browser session.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Feature flag not working {/*flag-not-working*/}
+
+Verify your flag module exports the correct function:
+
+```js
+// ❌ Wrong: Default export
+export default function shouldUseCompiler() {
+  return true;
+}
+
+// ✅ Correct: Named export matching importSpecifierName
+export function shouldUseCompiler() {
+  return true;
+}
+```
+
+### Import errors {/*import-errors*/}
+
+Ensure the source path is correct:
+
+```js
+// ❌ Wrong: Relative to babel.config.js
+{
+  source: './src/flags',
+  importSpecifierName: 'flag'
+}
+
+// ✅ Correct: Module resolution path
+{
+  source: '@myapp/feature-flags',
+  importSpecifierName: 'flag'
+}
+
+// ✅ Also correct: Absolute path from project root
+{
+  source: './src/utils/flags',
+  importSpecifierName: 'flag'
+}
+```
diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md
new file mode 100644
index 000000000..41e2a1da0
--- /dev/null
+++ b/src/content/reference/react-compiler/logger.md
@@ -0,0 +1,118 @@
+---
+title: logger
+---
+
+<Intro>
+
+The `logger` option provides custom logging for React Compiler events during compilation.
+
+</Intro>
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      console.log(`[Compiler] ${event.kind}: ${filename}`);
+    }
+  }
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `logger` {/*logger*/}
+
+Configures custom logging to track compiler behavior and debug issues.
+
+#### Type {/*type*/}
+
+```
+{
+  logEvent: (filename: string | null, event: LoggerEvent) => void;
+} | null
+```
+
+#### Default value {/*default-value*/}
+
+`null`
+
+#### Methods {/*methods*/}
+
+- **`logEvent`**: Called for each compiler event with the filename and event details
+
+#### Event types {/*event-types*/}
+
+- **`CompileSuccess`**: Function successfully compiled
+- **`CompileError`**: Function skipped due to errors
+- **`CompileDiagnostic`**: Non-fatal diagnostic information
+- **`CompileSkip`**: Function skipped for other reasons
+- **`PipelineError`**: Unexpected compilation error
+- **`Timing`**: Performance timing information
+
+#### Caveats {/*caveats*/}
+
+- Event structure may change between versions
+- Large codebases generate many log entries
+
+---
+
+## Usage {/*usage*/}
+
+### Basic logging {/*basic-logging*/}
+
+Track compilation success and failures:
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      switch (event.kind) {
+        case 'CompileSuccess': {
+          console.log(`✅ Compiled: ${filename}`);
+          break;
+        }
+        case 'CompileError': {
+          console.log(`❌ Skipped: ${filename}`);
+          break;
+        }
+        default: {}
+      }
+    }
+  }
+}
+```
+
+### Detailed error logging {/*detailed-error-logging*/}
+
+Get specific information about compilation failures:
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      if (event.kind === 'CompileError') {
+        console.error(`\nCompilation failed: ${filename}`);
+        console.error(`Reason: ${event.detail.reason}`);
+
+        if (event.detail.description) {
+          console.error(`Details: ${event.detail.description}`);
+        }
+
+        if (event.detail.loc) {
+          const { line, column } = event.detail.loc.start;
+          console.error(`Location: Line ${line}, Column ${column}`);
+        }
+
+        if (event.detail.suggestions) {
+          console.error('Suggestions:', event.detail.suggestions);
+        }
+      }
+    }
+  }
+}
+```
+
diff --git a/src/content/reference/react-compiler/panicThreshold.md b/src/content/reference/react-compiler/panicThreshold.md
new file mode 100644
index 000000000..e20f5c0c5
--- /dev/null
+++ b/src/content/reference/react-compiler/panicThreshold.md
@@ -0,0 +1,87 @@
+---
+title: panicThreshold
+---
+
+<Intro>
+
+The `panicThreshold` option controls how the React Compiler handles errors during compilation.
+
+</Intro>
+
+```js
+{
+  panicThreshold: 'none' // Recommended
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `panicThreshold` {/*panicthreshold*/}
+
+Determines whether compilation errors should fail the build or skip optimization.
+
+#### Type {/*type*/}
+
+```
+'none' | 'critical_errors' | 'all_errors'
+```
+
+#### Default value {/*default-value*/}
+
+`'none'`
+
+#### Options {/*options*/}
+
+- **`'none'`** (default, recommended): Skip components that can't be compiled and continue building
+- **`'critical_errors'`**: Fail the build only on critical compiler errors
+- **`'all_errors'`**: Fail the build on any compiler diagnostic
+
+#### Caveats {/*caveats*/}
+
+- Production builds should always use `'none'`
+- Build failures prevent your application from building
+- The compiler automatically detects and skips problematic code with `'none'`
+- Higher thresholds are only useful during development for debugging
+
+---
+
+## Usage {/*usage*/}
+
+### Production configuration (recommended) {/*production-configuration*/}
+
+For production builds, always use `'none'`. This is the default value:
+
+```js
+{
+  panicThreshold: 'none'
+}
+```
+
+This ensures:
+- Your build never fails due to compiler issues
+- Components that can't be optimized run normally
+- Maximum components get optimized
+- Stable production deployments
+
+### Development debugging {/*development-debugging*/}
+
+Temporarily use stricter thresholds to find issues:
+
+```js
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+{
+  panicThreshold: isDevelopment ? 'critical_errors' : 'none',
+  logger: {
+    logEvent(filename, event) {
+      if (isDevelopment && event.kind === 'CompileError') {
+        // ...
+      }
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md
new file mode 100644
index 000000000..381748513
--- /dev/null
+++ b/src/content/reference/react-compiler/target.md
@@ -0,0 +1,148 @@
+---
+title: target
+---
+
+<Intro>
+
+The `target` option specifies which React version the compiler should generate code for.
+
+</Intro>
+
+```js
+{
+  target: '19' // or '18', '17'
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `target` {/*target*/}
+
+Configures the React version compatibility for the compiled output.
+
+#### Type {/*type*/}
+
+```
+'17' | '18' | '19'
+```
+
+#### Default value {/*default-value*/}
+
+`'19'`
+
+#### Valid values {/*valid-values*/}
+
+- **`'19'`**: Target React 19 (default). No additional runtime required.
+- **`'18'`**: Target React 18. Requires `react-compiler-runtime` package.
+- **`'17'`**: Target React 17. Requires `react-compiler-runtime` package.
+
+#### Caveats {/*caveats*/}
+
+- Always use string values, not numbers (e.g., `'17'` not `17`)
+- Don't include patch versions (e.g., use `'18'` not `'18.2.0'`)
+- React 19 includes built-in compiler runtime APIs
+- React 17 and 18 require installing `react-compiler-runtime@rc`
+
+---
+
+## Usage {/*usage*/}
+
+### Targeting React 19 (default) {/*targeting-react-19*/}
+
+For React 19, no special configuration is needed:
+
+```js
+{
+  // defaults to target: '19'
+}
+```
+
+The compiler will use React 19's built-in runtime APIs:
+
+```js
+// Compiled output uses React 19's native APIs
+import { c as _c } from 'react/compiler-runtime';
+```
+
+### Targeting React 17 or 18 {/*targeting-react-17-or-18*/}
+
+For React 17 and React 18 projects, you need two steps:
+
+1. Install the runtime package:
+
+```bash
+npm install react-compiler-runtime@rc
+```
+
+2. Configure the target:
+
+```js
+// For React 18
+{
+  target: '18'
+}
+
+// For React 17
+{
+  target: '17'
+}
+```
+
+The compiler will use the polyfill runtime for both versions:
+
+```js
+// Compiled output uses the polyfill
+import { c as _c } from 'react-compiler-runtime';
+```
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Runtime errors about missing compiler runtime {/*missing-runtime*/}
+
+If you see errors like "Cannot find module 'react/compiler-runtime'":
+
+1. Check your React version:
+   ```bash
+   npm why react
+   ```
+
+2. If using React 17 or 18, install the runtime:
+   ```bash
+   npm install react-compiler-runtime@rc
+   ```
+
+3. Ensure your target matches your React version:
+   ```js
+   {
+     target: '18' // Must match your React major version
+   }
+   ```
+
+### Runtime package not working {/*runtime-not-working*/}
+
+Ensure the runtime package is:
+
+1. Installed in your project (not globally)
+2. Listed in your `package.json` dependencies
+3. The correct version (`@rc` tag)
+4. Not in `devDependencies` (it's needed at runtime)
+
+### Checking compiled output {/*checking-output*/}
+
+To verify the correct runtime is being used, note the different import (`react/compiler-runtime` for builtin, `react-compiler-runtime` standalone package for 17/18):
+
+```js
+// For React 19 (built-in runtime)
+import { c } from 'react/compiler-runtime'
+//                      ^
+
+// For React 17/18 (polyfill runtime)
+import { c } from 'react-compiler-runtime'
+//                      ^
+```
\ No newline at end of file
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index 574f5c57c..4833baa2a 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -207,7 +207,11 @@ HTML이 비어있으면, 앱의 자바스크립트 코드가 로드되고 실행
 <div id="root"></div>
 ```
 
+<<<<<<< HEAD
 이것은 매우 느리게 느껴질 수 있습니다! 이 문제를 해결하기 위해 [서버에서 또는 빌드 중에](/reference/react-dom/server) 컴포넌트로부터 초기 HTML을 생성할 수 있습니다. 그러면 방문자는 자바스크립트 코드가 로드되기 전에 텍스트를 읽고, 이미지를 보고, 링크를 클릭할 수 있습니다. 이 최적화를 기본적으로 수행하는 [프레임워크를 사용](/learn/start-a-new-react-project#production-grade-react-frameworks)하는 것이 좋습니다. 실행 시점에 따라 이를 *서버 측 렌더링<sup>SSR</sup>* 또는 *정적 사이트 생성<sup>SSG</sup>* 이라고 합니다.
+=======
+This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 </Note>
 
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index 1ae9279c7..326867cef 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -293,7 +293,8 @@ import App from './App.js';
 hydrateRoot(document.getElementById('root'), <App />);
 ```
 
-```js src/App.js active
+{/* kind of an edge case, seems fine to use this hack here */}
+```js {expectedErrors: {'react-compiler': [7]}} src/App.js active
 import { useState, useEffect } from "react";
 
 export default function App() {
diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md
index 16bbf609a..8c411182c 100644
--- a/src/content/reference/react-dom/client/index.md
+++ b/src/content/reference/react-dom/client/index.md
@@ -4,7 +4,12 @@ title: Client React DOM APIs
 
 <Intro>
 
+<<<<<<< HEAD
 `react-dom/client` API를 사용하면 클라이언트(브라우저)에서 React 컴포넌트를 렌더링 할 수 있습니다. 이러한 API는 일반적으로 앱의 최상위 수준에서 React 트리를 초기화하기 위해 사용합니다. [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)가 대신 호출할 수도 있습니다. 대부분의 컴포넌트는 이를 가져오거나 사용할 필요가 없습니다.
+=======
+The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
+
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 </Intro>
 
 ---
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 2490374ad..95718b438 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -917,7 +917,11 @@ export default function Form() {
 
 </Sandpack>
 
+<<<<<<< HEAD
 [ref로 DOM 조작하기](/learn/manipulating-the-dom-with-refs) 및 [더 많은 예시](/reference/react/useRef#examples-dom)에 대해 더 자세히 읽어보세요.
+=======
+Read more about [manipulating DOM with refs](/learn/manipulating-the-dom-with-refs) and [check out more examples.](/reference/react/useRef#usage)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 고급 사용 사례의 경우 `ref` 어트리뷰트는 [콜백 함수](#ref-callback)도 허용합니다.
 
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index b77f538a5..0aba8ec90 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -36,9 +36,15 @@ title: "<form>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<form>`은 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
 
 [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): URL 혹은 함수. URL을 `action`을 통해 전달하면, 폼은 HTML 폼 컴포넌트처럼 동작합니다. 함수를 `action`을 통해 전달하면, 해당 함수는 폼 제출을 처리합니다. `action`을 통한 함수는 비동기로 동작할 수 있으며, 폼을 통해 제출된 [`formData`](https://developer.mozilla.org/ko/docs/Web/API/FormData)를 포함한 단일 인수로 호출됩니다. `action`의 프로퍼티는 `formAction`의 속성인 `<button>`, `<input type="submit">`, 혹은 `<input type="image">`로 재정의될 수 있습니다.
+=======
+`<form>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+
+[`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission in a Transition following [the Action prop pattern](/reference/react/useTransition#exposing-action-props-from-components). The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a `<button>`, `<input type="submit">`, or `<input type="image">` component.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 #### 주의 사항 {/*caveats*/}
 
@@ -232,7 +238,12 @@ export async function deliverMessage(message) {
 
 </Sandpack>
 
+<<<<<<< HEAD
 `useOptimistic` Hook에 대해 더 알고 싶다면 [참고 문서](/reference/react/useOptimistic)를 확인하세요.
+=======
+[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentation page is published'
+[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/useOptimistic).'
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ### 폼 제출 오류 처리하기 {/*handling-form-submission-errors*/}
 
diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
index 463e16661..00344c00f 100644
--- a/src/content/reference/react-dom/components/index.md
+++ b/src/content/reference/react-dom/components/index.md
@@ -162,15 +162,137 @@ React는 브라우저에 내장된 모든 HTML 컴포넌트를 지원합니다.
 
 ### 커스텀 HTML 요소 {/*custom-html-elements*/}
 
+<<<<<<< HEAD
 `<my-element>`같이 대시<sup>Dash</sup>가 포함된 태그를 렌더링하면 React는 [커스텀 HTML 요소](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)를 렌더링한다고 가정합니다. React에서 커스텀 요소를 렌더링하는 방법은 브라우저 내장 태그를 렌더링하는 방법과 다릅니다.
 
 - 모든 커스텀 요소 Props는 문자열로 직렬화되며 항상 어트리뷰트를 사용하여 설정됩니다.
 - 커스텀 엘리먼트는 `class` 대신 `className`을 사용하고 `for` 대신 `htmlFor`를 사용합니다.
+=======
+If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) 어트리뷰트를 사용하여 브라우저 내장 HTML 요소를 렌더링하면 커스텀 엘리먼트로 취급됩니다.
 
+#### Setting values on custom elements {/*attributes-vs-properties*/}
+
+Custom elements have two methods of passing data into them:
+
+1) Attributes: Which are displayed in markup and can only be set to string values
+2) Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values
+
+By default, React will pass values bound in JSX as attributes:
+
+```jsx
+<my-element value="Hello, world!"></my-element>
+```
+
+Non-string JavaScript values passed to custom elements will be serialized by default:
+
+```jsx
+// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
+<my-element value={[1,2,3]}></my-element>
+```
+
+React will, however, recognize an custom element's property as one that it may pass arbitrary values to if the property name shows up on the class during construction:
+
+<Sandpack>
+
+```js src/index.js hidden
+import {MyElement} from './MyElement.js';
+import { createRoot } from 'react-dom/client';
+import {App} from "./App.js";
+
+customElements.define('my-element', MyElement);
+
+const root = createRoot(document.getElementById('root'))
+root.render(<App />);
+```
+
+```js src/MyElement.js active
+export class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    // The value here will be overwritten by React 
+    // when initialized as an element
+    this.value = undefined;
+  }
+
+  connectedCallback() {
+    this.innerHTML = this.value.join(", ");
+  }
+}
+```
+
+```js src/App.js
+export function App() {
+  return <my-element value={[1,2,3]}></my-element>
+}
+```
+
+</Sandpack>
+
+#### Listening for events on custom elements {/*custom-element-events*/}
+
+A common pattern when using custom elements is that they may dispatch [`CustomEvent`s](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) rather than accept a function to call when an event occur. You can listen for these events using an `on` prefix when binding to the event via JSX.
+
+<Sandpack>
+
+```js src/index.js hidden
+import {MyElement} from './MyElement.js';
+import { createRoot } from 'react-dom/client';
+import {App} from "./App.js";
+
+customElements.define('my-element', MyElement);
+
+const root = createRoot(document.getElementById('root'))
+root.render(<App />);
+```
+
+```javascript src/MyElement.js
+export class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    this.test = undefined;
+    this.emitEvent = this._emitEvent.bind(this);
+  }
+
+  _emitEvent() {
+    const event = new CustomEvent('speak', {
+      detail: {
+        message: 'Hello, world!',
+      },
+    });
+    this.dispatchEvent(event);
+  }
+
+  connectedCallback() {
+    this.el = document.createElement('button');
+    this.el.innerText = 'Say hi';
+    this.el.addEventListener('click', this.emitEvent);
+    this.appendChild(this.el);
+  }
+
+  disconnectedCallback() {
+    this.el.removeEventListener('click', this.emitEvent);
+  }
+}
+```
+
+```jsx src/App.js active
+export function App() {
+  return (
+    <my-element
+      onspeak={e => console.log(e.detail.message)}
+    ></my-element>
+  )
+}
+```
+
+</Sandpack>
+
 <Note>
 
+<<<<<<< HEAD
 [향후 React 버전에는 커스텀 엘리먼트에 대한 더 포괄적인 지원을 제공할 예정입니다.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
 
 React 패키지를 최신 실험 버전으로 업그레이드하여 사용해 볼 수 있습니다.
@@ -179,6 +301,16 @@ React 패키지를 최신 실험 버전으로 업그레이드하여 사용해 
 - `react-dom@experimental`
 
 React 실험 버전은 버그가 있을 수 있습니다. 프로덕션 환경에서 사용하지 마세요.
+=======
+Events are case-sensitive and support dashes (`-`). Preserve the casing of the event and include all dashes when listening for custom element's events:
+
+```jsx
+// Listens for `say-hi` events
+<my-element onsay-hi={console.log}></my-element>
+// Listens for `sayHi` events
+<my-element onsayHi={console.log}></my-element>
+```
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 </Note>
 ---
diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
index d23c7189c..ed53d4ebc 100644
--- a/src/content/reference/react-dom/components/input.md
+++ b/src/content/reference/react-dom/components/input.md
@@ -30,7 +30,11 @@ title: "<input>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<input>`은 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<input>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 - [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
 
diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
index d3b35a696..727081dfd 100644
--- a/src/content/reference/react-dom/components/link.md
+++ b/src/content/reference/react-dom/components/link.md
@@ -30,7 +30,11 @@ link: "<link>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<link>`는 모든 [공통 요소 속성](/reference/react-dom/components/common#props)을 지원합니다.
+=======
+`<link>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 * `rel`: 문자열 타입, 필수, [리소스와의 관계](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)를 지정합니다. React는 다른 링크와는 달리 [`rel="stylesheet"` 링크를 특별하게 처리](#special-rendering-behavior)합니다.
 
diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md
index aa3ebe11d..13c80c0af 100644
--- a/src/content/reference/react-dom/components/meta.md
+++ b/src/content/reference/react-dom/components/meta.md
@@ -30,7 +30,11 @@ meta: "<meta>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<meta>`는 [공통 요소 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<meta>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 다음 속성 중 _하나만_ 가져야 합니다. `name`, `httpEquiv`, `charset`, `itemProp`.
 
diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md
index 4138e2908..c67878aed 100644
--- a/src/content/reference/react-dom/components/option.md
+++ b/src/content/reference/react-dom/components/option.md
@@ -36,7 +36,11 @@ title: "<option>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<option>`은 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<option>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 또한, `<option>`은 아래와 같은 Props를 지원합니다.
 
diff --git a/src/content/reference/react-dom/components/progress.md b/src/content/reference/react-dom/components/progress.md
index 5f731b971..f8b5fa513 100644
--- a/src/content/reference/react-dom/components/progress.md
+++ b/src/content/reference/react-dom/components/progress.md
@@ -30,7 +30,11 @@ title: "<progress>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<progress>`는 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<progress>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 또한 `<progress>`는 아래와 같은 Props를 지원합니다.
 
diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md
index 37ecb9f8b..2d9f7e368 100644
--- a/src/content/reference/react-dom/components/script.md
+++ b/src/content/reference/react-dom/components/script.md
@@ -31,7 +31,11 @@ script: "<script>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<script>`는 모든 [공통 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
+=======
+`<script>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 `children` 또는 `src` 속성을 가져야 합니다.
 
diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index bb9ab9c1c..b06522484 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -36,7 +36,11 @@ select box를 표시하려면 [내장 브라우저 `<select>` 컴포넌트](http
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<select>`는 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<select>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 [select box를 제어](#controlling-a-select-box-with-a-state-variable)하려면 `value` Prop을 전달하세요.
 
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
index ba4698076..2cc306135 100644
--- a/src/content/reference/react-dom/components/style.md
+++ b/src/content/reference/react-dom/components/style.md
@@ -30,7 +30,11 @@ style: "<style>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<style>`은 [공통 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
+=======
+`<style>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 * `children`: 문자열 타입. 필수 항목. 스타일시트의 내용.
 * `precedence`: 문자열 타입. 문서의 `<head>` 내 다른 요소들에 비해 `<style>` DOM 노드의 순위를 지정하여, 어떤 스타일시트가 다른 스타일시트를 덮어쓸 수 있는지를 결정합니다. React는 먼저 발견한 우선순위를 "낮게", 나중에 발견한 우선순위를 "높게" 추론합니다. 많은 스타일 시스템은 스타일 규칙이 원자적이기 때문에 단일 우선순위 값을 사용해도 잘 작동할 수 있습니다. 동일한 우선순위를 가지는 스타일시트는 `<link>` 태그인지 인라인 `<style>` 태그인지 [`preinit`](/reference/react-dom/preinit) 함수로 로드된 것인지와 무관하게 함께 적용됩니다.
@@ -49,7 +53,15 @@ React는 `<style>` 컴포넌트를 문서의 `<head>`로 이동시키고, 동일
 
 이 동작을 사용하려면 `href`와 `precedence` 속성을 제공하세요. React는 동일한 `href`를 가진 스타일의 중복을 제거합니다. `precedence` 속성은 문서의 `<head>` 내 다른 요소에 비해 `<style>` DOM 노드의 순위를 지정하며, 어떤 스타일시트가 다른 스타일시트를 덮어쓸 수 있는지를 결정합니다.
 
+<<<<<<< HEAD
 이러한 처리는 세 가지 주의 사항이 있습니다.
+=======
+This special treatment comes with three caveats:
+
+* React will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.)
+* React will drop all extraneous props when using the `precedence` prop (beyond `href` and `precedence`).
+* React may leave the style in the DOM even after the component that rendered it has been unmounted.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 * 스타일이 렌더링된 후에는 React가 Props 변경을 무시합니다. (개발 중에 이 상황이 발생하면 React는 경고를 표시합니다.)
 * React는 `precedence` Prop을 사용할 때 불필요한 Props를 제거합니다. (단, `href`와 `precedence`는 제외.)
diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md
index 462a7ce2c..726f0fb21 100644
--- a/src/content/reference/react-dom/components/textarea.md
+++ b/src/content/reference/react-dom/components/textarea.md
@@ -30,7 +30,11 @@ title: "<textarea>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<textarea>`는 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
+=======
+`<textarea>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 [텍스트 영역을 제어](#controlling-a-select-box-with-a-state-variable)하려면 `value` Prop을 전달하세요.
 
diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md
index 84c611347..a9e8a716f 100644
--- a/src/content/reference/react-dom/components/title.md
+++ b/src/content/reference/react-dom/components/title.md
@@ -30,7 +30,11 @@ title: "<title>"
 
 #### Props {/*props*/}
 
+<<<<<<< HEAD
 `<title>`은 [공통 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
+=======
+`<title>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 * `children`: `<title>`은 자식으로 텍스트만 허용합니다. 이 텍스트는 문서의 제목이 됩니다. 텍스트만 렌더링하는 한, 사용자 정의 컴포넌트도 전달할 수 있습니다.
 
diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md
index 1182b9424..4d5354380 100644
--- a/src/content/reference/react-dom/createPortal.md
+++ b/src/content/reference/react-dom/createPortal.md
@@ -49,7 +49,11 @@ Portal은 DOM 노드의 물리적 배치만 변경합니다. 이외의 모든 
 
 * `domNode` : `document.getElementById()`가 반환하는 것과 같은 일부 DOM 노드. 노드가 이미 존재해야 합니다. 업데이트 중에 다른 DOM 노드를 전달하면 Portal 콘텐츠가 다시 생성됩니다.
 
+<<<<<<< HEAD
 * **Optional** `key`: Portal의 [`key`](/learn/rendering-lists/#keeping-list-items-in-order-with-key)로 사용할 고유한 문자열 또는 숫자입니다.
+=======
+* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 #### 반환값 {/*returns*/}
 
@@ -397,7 +401,8 @@ return (
 }
 ```
 
-```js src/App.js
+{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */}
+```js {expectedErrors: {'react-compiler': [15]}} src/App.js
 import { useRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { createMapWidget, addPopupToMapWidget } from './map-widget.js';
diff --git a/src/content/reference/react-dom/flushSync.md b/src/content/reference/react-dom/flushSync.md
index f6cad28ad..50a51bd20 100644
--- a/src/content/reference/react-dom/flushSync.md
+++ b/src/content/reference/react-dom/flushSync.md
@@ -130,3 +130,75 @@ export default function PrintApp() {
 대부분의 경우 `flushSync`를 사용하지 않을 수 있으므로 최후의 수단으로 사용하세요.
 
 </Pitfall>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I'm getting an error: "flushSync was called from inside a lifecycle method" {/*im-getting-an-error-flushsync-was-called-from-inside-a-lifecycle-method*/}
+
+
+React cannot `flushSync` in the middle of a render. If you do, it will noop and warn:
+
+<ConsoleBlock level="error">
+
+Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
+
+</ConsoleBlock>
+
+This includes calling `flushSync` inside:
+
+- rendering a component.
+- `useLayoutEffect` or `useEffect` hooks.
+- Class component lifecycle methods.
+
+For example, calling `flushSync` in an Effect will noop and warn:
+
+```js
+import { useEffect } from 'react';
+import { flushSync } from 'react-dom';
+
+function MyComponent() {
+  useEffect(() => {
+    // 🚩 Wrong: calling flushSync inside an effect
+    flushSync(() => {
+      setSomething(newValue);
+    });
+  }, []);
+
+  return <div>{/* ... */}</div>;
+}
+```
+
+To fix this, you usually want to move the `flushSync` call to an event:
+
+```js
+function handleClick() {
+  // ✅ Correct: flushSync in event handlers is safe
+  flushSync(() => {
+    setSomething(newValue);
+  });
+}
+```
+
+
+If it's difficult to move to an event, you can defer `flushSync` in a microtask:
+
+```js {3,7}
+useEffect(() => {
+  // ✅ Correct: defer flushSync to a microtask
+  queueMicrotask(() => {
+    flushSync(() => {
+      setSomething(newValue);
+    });
+  });
+}, []);
+```
+
+This will allow the current render to finish and schedule another syncronous render to flush the updates.
+
+<Pitfall>
+
+`flushSync` can significantly hurt performance, but this particular pattern is even worse for performance. Exhaust all other options before calling `flushSync` in a microtask as an escape hatch.
+
+</Pitfall>
diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md
index 1ef5474df..de239622e 100644
--- a/src/content/reference/react-dom/server/index.md
+++ b/src/content/reference/react-dom/server/index.md
@@ -4,7 +4,11 @@ title: Server React DOM APIs
 
 <Intro>
 
+<<<<<<< HEAD
 `react-dom/server` API를 사용하면 React 컴포넌트를 서버 측에서 HTML로 렌더링할 수 있습니다. 이 API는 앱의 최상위 레벨에 있는 서버에서만 초기 HTML을 생성하는 데 사용됩니다. [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)가 대신 호출할 수도 있습니다. 대부분의 컴포넌트는 이를 가져오거나 사용할 필요가 없습니다.
+=======
+The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 </Intro>
 
diff --git a/src/content/reference/react-dom/static/index.md b/src/content/reference/react-dom/static/index.md
index 06750193c..556ca3ade 100644
--- a/src/content/reference/react-dom/static/index.md
+++ b/src/content/reference/react-dom/static/index.md
@@ -4,7 +4,11 @@ title: Static React DOM APIs
 
 <Intro>
 
+<<<<<<< HEAD
 `react-dom/static` API를 사용하면 React 컴포넌트를 위한 정적 HTML을 생성할 수 있습니다. 이는 스트리밍 API에 비해 제한된 기능을 가지고 있습니다. [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)가 대신 호출할 수도 있습니다. 대부분의 컴포넌트는 이를 가져오거나 사용할 필요가 없습니다.
+=======
+The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 </Intro>
 
diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index a0763e230..872f91887 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -1,10 +1,11 @@
 ---
 title: <Activity>
-version: experimental
+version: canary
 ---
 
-<Experimental>
+<Canary>
 
+<<<<<<< HEAD
 **이 API는 실험적이며 아직 React의 안정 버전에서 사용할 수 없습니다.**
 
 React 패키지를 최신 실험적 버전으로 업그레이드하여 시도해 볼 수 있습니다.
@@ -21,10 +22,21 @@ React의 실험적 버전에는 버그가 포함될 수 있습니다. 프로덕
 
 `<Activity>`를 사용하면 UI 일부를 숨기거나 보여줄 수 있습니다.
 
+=======
+**The `<Activity />` API is currently only available in React’s Canary and Experimental channels.** 
+
+[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
+
+</Canary>
+
+<Intro>
+
+`<Activity>` lets you hide and restore the UI and internal state of its children.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ```js
-<Activity mode={mode}>
-  <Page />
+<Activity mode={visibility}>
+  <Sidebar />
 </Activity>
 ```
 
@@ -38,16 +50,19 @@ React의 실험적 버전에는 버그가 포함될 수 있습니다. 프로덕
 
 ### `<Activity>` {/*activity*/}
 
+<<<<<<< HEAD
 UI 일부를 `<Activity>`로 감싸서 표시 상태를 관리할 수 있습니다.
+=======
+You can use Activity to hide part of your application:
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
-```js
-import {unstable_Activity as Activity} from 'react';
-
-<Activity mode={isVisible ? 'visible' : 'hidden'}>
-  <Page />
+```js [[1, 1, "\\"hidden\\""], [2, 2, "<Sidebar />"], [3, 1, "\\"visible\\""]]
+<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+  <Sidebar />
 </Activity>
 ```
 
+<<<<<<< HEAD
 "hidden" 상태일 때 `<Activity />`의 `children`은 페이지에 표시되지 않습니다. 새로운 `<Activity>`가 "hidden" 상태로 마운트되면 페이지의 표시되는 콘텐츠를 차단하지 않으면서 낮은 우선순위로 콘텐츠를 사전 렌더링하지만, Effect를 생성하여 마운트하지는 않습니다. "visible" Activity가 "hidden"으로 전환되면 모든 Effect를 제거하여 개념적으로는 마운트 해제되지만, 상태는 저장됩니다. 이를 통해 "hidden" Activity의 상태를 재생성하지 않고도 "visible"과 "hidden" 상태 간의 빠른 전환이 가능합니다.
 
 앞으로는 메모리 등 리소스 상황에 따라, "hidden" Activity의 상태가 자동으로 제거될 수 있습니다.
@@ -56,162 +71,109 @@ import {unstable_Activity as Activity} from 'react';
 
 * `children`: 실제로 렌더링하려는 UI입니다.
 * **optional** `mode`: "visible" 또는 "hidden" 중 하나입니다. 기본값은 "visible"입니다. "hidden"일 때는 자식 컴포넌트의 업데이트가 낮은 우선순위로 지연됩니다. 컴포넌트는 Activity가 "visible"로 전환할 때까지 Effect를 생성하지 않습니다. "visible" Activity가 "hidden"으로 전환되면 Effect가 제거됩니다.
+=======
+When an Activity boundary is <CodeStep step={1}>hidden</CodeStep>, React will visually hide <CodeStep step={2}>its children</CodeStep> using the `display: "none"` CSS property. It will also destroy their Effects, cleaning up any active subscriptions.
+
+While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content.
+
+When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and re-create their Effects.
+
+In this way, Activity can be thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring that your hidden content has no unwanted side effects.
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+* `children`: The UI you intend to show and hide.
+* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. 
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 #### 주의 사항 {/*caveats*/}
 
+<<<<<<< HEAD
 - 숨겨진 상태에서 `<Activity>`의 `children`은 페이지에 숨겨집니다.
 - `<Activity>`는 "visible"에서 "hidden"으로 전환할 때 React나 DOM 상태를 제거하지 않고 모든 Effect를 마운트 해제합니다. 이는 마운트 시 한 번만 실행될 것으로 예상되는 Effect가 "hidden"에서 "visible"로 전환할 때 다시 실행됨을 의미합니다. 개념적으로는 "hidden" Activity는 마운트 해제되지만, 제거되지는 않습니다. 이러한 동작으로 인한 예상치 못한 부작용을 잡기 위해 [`<StrictMode>`](/reference/react/StrictMode)를 사용하는 것을 추천합니다.
 - `<ViewTransition>`과 함께 사용할 때 전환에서 나타나는 숨겨진 Activity는 "enter" 애니메이션을 활성화합니다. 전환에서 숨겨지는 표시되는 Activity는 "exit" 애니메이션을 활성화합니다.
 - `<Activity mode="hidden">`으로 감싸진 UI 부분은 SSR 응답에 포함되지 않습니다.
 - `<Activity mode="visible">`으로 감싸진 UI 부분은 다른 콘텐츠보다 낮은 우선순위로 하이드레이션됩니다.
+=======
+- If an Activity is rendered inside of a [ViewTransition](/reference/react/ViewTransition), and it becomes visible as a result of an update caused by [startTransition](/reference/react/startTransition), it will activate the ViewTransition's `enter` animation. If it becomes hidden, it will activate its `exit` animation.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ---
 
 ## 사용법 {/*usage*/}
 
+<<<<<<< HEAD
 ### UI 일부 사전 렌더링하기 {/*pre-render-part-of-the-ui*/}
 
 `<Activity mode="hidden">`을 사용하여 UI 일부를 사전 렌더링할 수 있습니다.
+=======
+### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/}
 
-```js
-<Activity mode={tab === "posts" ? "visible" : "hidden"}>
-  <PostsTab />
+In React, when you want to conditionally show or hide a component, you typically mount or unmount it based on that condition:
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
+
+```jsx
+{isShowingSidebar && (
+  <Sidebar />
+)}
+```
+
+But unmounting a component destroys its internal state, which is not always what you want.
+
+When you hide a component using an Activity boundary instead, React will "save" its state for later:
+
+```jsx
+<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+  <Sidebar />
 </Activity>
 ```
 
+<<<<<<< HEAD
 Activity가 `mode="hidden"`으로 렌더링되면 `children`은 페이지에 표시되지 않지만, 페이지의 표시되는 콘텐츠보다 낮은 우선순위로 렌더링됩니다.
 
 나중에 `mode`가 "visible"로 전환되면 사전 렌더링 된 자식 컴포넌트가 마운트되고 표시됩니다. 이를 통해 사용자가 다음에 상호작용을 할 가능성이 높은 UI 부분을 미리 준비하여 로딩 시간을 줄일 수 있습니다.
 
 다음은 [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators)에서 가져온 예시입니다. `PostsTab` 컴포넌트는 `use`를 사용하여 일부 데이터를 가져옵니다. "Posts" 탭을 클릭하면 `PostsTab` 컴포넌트가 일시 중단되어 버튼 로딩 상태가 나타납니다.
+=======
+This makes it possible to hide and then later restore components in the state they were previously in.
 
-<Sandpack>
-
-```js
-import { Suspense, useState } from 'react';
-import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
-
-export default function TabContainer() {
-  const [tab, setTab] = useState('about');
-  return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton
-        isActive={tab === 'about'}
-        action={() => setTab('about')}
-      >
-        About
-      </TabButton>
-      <TabButton
-        isActive={tab === 'posts'}
-        action={() => setTab('posts')}
-      >
-        Posts
-      </TabButton>
-      <TabButton
-        isActive={tab === 'contact'}
-        action={() => setTab('contact')}
-      >
-        Contact
-      </TabButton>
-      <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </Suspense>
-  );
-}
-```
-
+The following example has a sidebar with an expandable section. You can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
 
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
-  if (isActive) {
-    return <b>{children}</b>
-  }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
-  return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
-      {children}
-    </button>
-  );
-}
-```
+Try expanding the Overview section, and then toggling the sidebar closed then open:
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+<Sandpack>
 
-export default function AboutTab() {
-  return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
-  );
-}
-```
+```js src/App.js active
+import { useState } from 'react';
+import Sidebar from './Sidebar.js';
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
+export default function App() {
+  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
 
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
   return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
+    <>
+      {isShowingSidebar && (
+        <Sidebar />
       )}
-    </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
-  return (
-    <li className="item">
-      {title}
-    </li>
-  );
-}
-
-export default PostsTab;
-```
-
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
 
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
-      <textarea />
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </ViewTransition>
+      <main>
+        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
+          Toggle sidebar
+        </button>
+        <h1>Main content</h1>
+      </main>
+    </>
   );
 }
 ```
 
+```js src/Sidebar.js
+import { useState } from 'react';
 
+<<<<<<< HEAD
 ```js src/data.js hidden
 // Note: 데이터 페칭 방법은
 // Suspense와 함께 사용하는 프레임워크에 따라 달라집니다.
@@ -247,14 +209,62 @@ async function getPosts() {
     });
   }
   return posts;
+=======
+export default function Sidebar() {
+  const [isExpanded, setIsExpanded] = useState(false)
+  
+  return (
+    <nav>
+      <button onClick={() => setIsExpanded(!isExpanded)}>
+        Overview
+        <span className={`indicator ${isExpanded ? 'down' : 'right'}`}>
+          &#9650;
+        </span>
+      </button>
+
+      {isExpanded && (
+        <ul>
+          <li>Section 1</li>
+          <li>Section 2</li>
+          <li>Section 3</li>
+        </ul>
+      )}
+    </nav>
+  );
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 }
 ```
 
 ```css
-body { height: 275px; }
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
-.pending { color: #777; }
+body { height: 275px; margin: 0; }
+#root {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+nav {
+  padding: 10px;
+  background: #eee;
+  font-size: 14px;
+  height: 100%;
+}
+main {
+  padding: 10px;
+}
+p {
+  margin: 0;
+}
+h1 {
+  margin-top: 10px;
+}
+.indicator {
+  margin-left: 4px;
+  display: inline-block;
+  rotate: 90deg;
+}
+.indicator.down {
+  rotate: 180deg;
+}
 ```
 
 ```json package.json hidden
@@ -276,99 +286,84 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
+<<<<<<< HEAD
 이 예시에서 "Posts" 탭을 클릭할 때 게시물이 로드될 때까지 기다려야 합니다.
 
 숨겨진 `<Activity>`로 비활성 탭을 사전 렌더링하여 "Posts" 탭의 지연 시간을 줄일 수 있습니다.
+=======
+The Overview section always starts out collapsed. Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost.
 
-<Sandpack>
+This is a perfect use case for Activity. We can preserve the internal state of our sidebar, even when visually hiding it.
 
-```js
-import { Suspense, useState, unstable_Activity as Activity } from "react";
-import TabButton from "./TabButton.js";
-import AboutTab from "./AboutTab.js";
-import PostsTab from "./PostsTab.js";
-import ContactTab from "./ContactTab.js";
-
-export default function TabContainer() {
-  const [tab, setTab] = useState("about");
-  return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton isActive={tab === "about"} action={() => setTab("about")}>
-        About
-      </TabButton>
-      <TabButton isActive={tab === "posts"} action={() => setTab("posts")}>
-        Posts
-      </TabButton>
-      <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
-        Contact
-      </TabButton>
-      <hr />
-      <Activity mode={tab === "about" ? "visible" : "hidden"}>
-        <AboutTab />
-      </Activity>
-      <Activity mode={tab === "posts" ? "visible" : "hidden"}>
-        <PostsTab />
-      </Activity>
-      <Activity mode={tab === "contact" ? "visible" : "hidden"}>
-        <ContactTab />
-      </Activity>
-    </Suspense>
-  );
-}
+Let's replace the conditional rendering of our sidebar with an Activity boundary:
+
+```jsx {7,9}
+// Before
+{isShowingSidebar && (
+  <Sidebar />
+)}
+
+// After
+<Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
+  <Sidebar />
+</Activity>
 ```
 
+and check out the new behavior:
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
-```js src/TabButton.js active
-import { useTransition } from 'react';
+<Sandpack>
 
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
-  if (isActive) {
-    return <b>{children}</b>
-  }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
-  return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
-      {children}
-    </button>
-  );
-}
-```
+```js src/App.js active
+import { unstable_Activity as Activity, useState } from 'react';
+import Sidebar from './Sidebar.js';
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+export default function App() {
+  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
 
-export default function AboutTab() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <>
+      <Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
+        <Sidebar />
+      </Activity>
+
+      <main>
+        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
+          Toggle sidebar
+        </button>
+        <h1>Main content</h1>
+      </main>
+    </>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
+```js src/Sidebar.js
+import { useState } from 'react';
 
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
+export default function Sidebar() {
+  const [isExpanded, setIsExpanded] = useState(false)
+  
   return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
+    <nav>
+      <button onClick={() => setIsExpanded(!isExpanded)}>
+        Overview
+        <span className={`indicator ${isExpanded ? 'down' : 'right'}`}>
+          &#9650;
+        </span>
+      </button>
+
+      {isExpanded && (
+        <ul>
+          <li>Section 1</li>
+          <li>Section 2</li>
+          <li>Section 3</li>
+        </ul>
       )}
-    </ul>
-      </ViewTransition>
+    </nav>
   );
 }
+<<<<<<< HEAD
 
 function Post({ title }) {
   return (
@@ -440,13 +435,40 @@ async function getPosts() {
   }
   return posts;
 }
+=======
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 ```
 
 ```css
-body { height: 275px; }
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
-.pending { color: #777; }
+body { height: 275px; margin: 0; }
+#root {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+nav {
+  padding: 10px;
+  background: #eee;
+  font-size: 14px;
+  height: 100%;
+}
+main {
+  padding: 10px;
+}
+p {
+  margin: 0;
+}
+h1 {
+  margin-top: 10px;
+}
+.indicator {
+  margin-left: 4px;
+  display: inline-block;
+  rotate: 90deg;
+}
+.indicator.down {
+  rotate: 180deg;
+}
 ```
 
 ```json package.json hidden
@@ -468,167 +490,358 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
+Our sidebar's internal state is now restored, without any changes to its implementation.
+
 ---
 
+<<<<<<< HEAD
 ### UI 일부의 상태 유지하기 {/*keeping-state-for-part-of-the-ui*/}
+=======
+### Restoring the DOM of hidden components {/*restoring-the-dom-of-hidden-components*/}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
+Since Activity boundaries hide their children using `display: none`, their children's DOM is also preserved when hidden. This makes them great for maintaining ephemeral state in parts of the UI that the user is likely to interact with again.
 
+<<<<<<< HEAD
 `<Activity>`를 "visible"에서 "hidden"으로 전환하여 UI 일부의 상태를 유지할 수 있습니다.
-
-```js
-<Activity mode={tab === "posts" ? "visible" : "hidden"}>
-  <PostsTab />
-</Activity>
-```
-
-Activity가 `mode="visible"`에서 "hidden"으로 전환되면 `children`은 페이지에서 숨겨지고 모든 Effect를 제거하여 마운트 해제되지만, React와 DOM 상태는 유지됩니다.
-
-나중에 `mode`가 "visible"로 전환되면 저장된 상태가 모든 Effect를 생성하여 자식 컴포넌트를 마운트할 때 재사용됩니다. 이를 통해 사용자가 다시 상호작용할 가능성이 높은 UI 부분의 상태를 유지하여 DOM이나 React 상태를 유지할 수 있습니다.
-
-다음은 [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators)에서 가져온 예시입니다. `ContactTab`은 보낼 메시지 초안이 담긴 `<textarea>`를 포함합니다. 텍스트를 입력하고 다른 탭으로 변경한 다음 "Contact" 탭을 다시 클릭하면 메시지 초안이 사라집니다.
-
+=======
+In this example, the Contact tab has a `<textarea>` where the user can enter a message. If you enter some text, change to the Home tab, then change back to the Contact tab, the draft message is lost:
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 <Sandpack>
 
-```js
-import { Suspense, useState } from 'react';
+```js src/App.js 
+import { useState } from 'react';
 import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
+import Home from './Home.js';
+import Contact from './Contact.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('contact');
 
-export default function TabContainer() {
-  const [tab, setTab] = useState('contact');
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton
-        isActive={tab === 'about'}
-        action={() => setTab('about')}
-      >
-        About
-      </TabButton>
+    <>
       <TabButton
-        isActive={tab === 'posts'}
-        action={() => setTab('posts')}
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
       >
-        Posts
+        Home
       </TabButton>
       <TabButton
-        isActive={tab === 'contact'}
-        action={() => setTab('contact')}
+        isActive={activeTab === 'contact'}
+        onClick={() => setActiveTab('contact')}
       >
         Contact
       </TabButton>
+
       <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </Suspense>
+
+      {activeTab === 'home' && <Home />}
+      {activeTab === 'contact' && <Contact />}
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function AboutTab() {
+```js src/Home.js
+export default function Home() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
-
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
-  return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
-      )}
-    </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
+```js src/Contact.js active
+export default function Contact() {
   return (
-    <li className="item">
-      {title}
-    </li>
-  );
-}
-
-export default PostsTab;
-```
-
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+    <div>
+      <p>Send me a message!</p>
 
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
       <textarea />
-      <p>
-        You can find me online here:
-      </p>
+
+      <p>You can find me online here:</p>
       <ul>
         <li>admin@mysite.com</li>
         <li>+123456789</li>
       </ul>
-    </ViewTransition>
+    </div>
   );
 }
 ```
 
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+This is because we're fully unmounting `Contact` in `App`. When the Contact tab unmounts, the `<textarea>` element's internal DOM state is lost.
+
+If we switch to using an Activity boundary to show and hide the active tab, we can preserve the state of each tab's DOM. Try entering text and switching tabs again, and you'll see the draft message is no longer reset:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Contact from './Contact.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('contact');
+
+  return (
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'contact'}
+        onClick={() => setActiveTab('contact')}
+      >
+        Contact
+      </TabButton>
+
+      <hr />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === 'contact' ? 'visible' : 'hidden'}>
+        <Contact />
+      </Activity>
+    </>
+  );
+}
+```
+
+```js src/TabButton.js
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js src/Contact.js 
+export default function Contact() {
+  return (
+    <div>
+      <p>Send me a message!</p>
+
+      <textarea />
+
+      <p>You can find me online here:</p>
+      <ul>
+        <li>admin@mysite.com</li>
+        <li>+123456789</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+Again, the Activity boundary let us preserve the Contact tab's internal state without changing its implementation.
+
+---
+
+### Pre-rendering content that's likely to become visible {/*pre-rendering-content-thats-likely-to-become-visible*/}
+
+So far, we've seen how Activity can hide some content that the user has interacted with, without discarding that content's ephemeral state.
+
+But Activity boundaries can also be used to _prepare_ content that the user has yet to see for the first time:
+
+```jsx [[1, 1, "\\"hidden\\""]]
+<Activity mode="hidden">
+  <SlowComponent />
+</Activity>
+```
+
+<<<<<<< HEAD
+Activity가 `mode="visible"`에서 "hidden"으로 전환되면 `children`은 페이지에서 숨겨지고 모든 Effect를 제거하여 마운트 해제되지만, React와 DOM 상태는 유지됩니다.
+
+나중에 `mode`가 "visible"로 전환되면 저장된 상태가 모든 Effect를 생성하여 자식 컴포넌트를 마운트할 때 재사용됩니다. 이를 통해 사용자가 다시 상호작용할 가능성이 높은 UI 부분의 상태를 유지하여 DOM이나 React 상태를 유지할 수 있습니다.
+
+다음은 [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators)에서 가져온 예시입니다. `ContactTab`은 보낼 메시지 초안이 담긴 `<textarea>`를 포함합니다. 텍스트를 입력하고 다른 탭으로 변경한 다음 "Contact" 탭을 다시 클릭하면 메시지 초안이 사라집니다.
+=======
+When an Activity boundary is <CodeStep step={1}>hidden</CodeStep> during its initial render, its children won't be visible on the page — but they will _still be rendered_, albeit at a lower priority than the visible content, and without mounting their Effects.
+
+This _pre-rendering_ allows the children to load any code or data they need ahead of time, so that later, when the Activity boundary becomes visible, the children can appear faster with reduced loading times.
+
+Let's look at an example.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
+
+In this demo, the Posts tab loads some data. If you press it, you'll see a Suspense fallback displayed while the data is being fetched:
+
+<Sandpack>
+
+```js src/App.js
+import { useState, Suspense } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Posts from './Posts.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'posts'}
+        onClick={() => setActiveTab('posts')}
+      >
+        Posts
+      </TabButton>
+
+      <hr />
+
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        {activeTab === 'home' && <Home />}
+        {activeTab === 'posts' && <Posts />}
+      </Suspense>
+    </>
+  );
+}
+```
+
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js src/Posts.js
+import { use } from 'react';
+import { fetchData } from './data.js';
+
+export default function Posts() {
+  const posts = use(fetchData('/posts'));
+
+  return (
+    <ul className="items">
+      {posts.map(post =>
+        <li className="item" key={post.id}>
+          {post.title}
+        </li>
+      )}
+    </ul>
+  );
+}
+```
+
+```js src/data.js hidden
+// Note: 데이터 페칭 방법은
+// Suspense와 함께 사용하는 프레임워크에 따라 달라집니다.
+// 일반적으로 캐싱 로직은 프레임워크 내부에 있습니다.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
 
-```js src/data.js hidden
-// Note: 데이터 페칭 방법은
-// Suspense와 함께 사용하는 프레임워크에 따라 달라집니다.
-// 일반적으로 캐싱 로직은 프레임워크 내부에 있습니다.
-
-let cache = new Map();
-
-export function fetchData(url) {
-  if (!cache.has(url)) {
-    cache.set(url, getData(url));
-  }
-  return cache.get(url);
-}
-
 async function getData(url) {
   if (url.startsWith('/posts')) {
     return await getPosts();
@@ -658,6 +871,7 @@ body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
 .pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -679,133 +893,98 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
+<<<<<<< HEAD
 이는 사용자가 입력한 DOM 상태를 잃게 됩니다. `<Activity>`로 비활성 탭을 숨겨서 Contact 탭의 상태를 유지할 수 있습니다.
+=======
+This is because `App` doesn't mount `Posts` until its tab is active.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
+
+If we update `App` to use an Activity boundary to show and hide the active tab, `Posts` will be pre-rendered when the app first loads, allowing it to fetch its data before it becomes visible.
 
+Try clicking the Posts tab now:
 
 <Sandpack>
 
-```js
-import { Suspense, useState, unstable_Activity as Activity } from "react";
-import TabButton from "./TabButton.js";
-import AboutTab from "./AboutTab.js";
-import PostsTab from "./PostsTab.js";
-import ContactTab from "./ContactTab.js";
-
-export default function TabContainer() {
-  const [tab, setTab] = useState("about");
+```js src/App.js
+import { useState, Suspense, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Posts from './Posts.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('home');
+
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton isActive={tab === "about"} action={() => setTab("about")}>
-        About
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
       </TabButton>
-      <TabButton isActive={tab === "posts"} action={() => setTab("posts")}>
+      <TabButton
+        isActive={activeTab === 'posts'}
+        onClick={() => setActiveTab('posts')}
+      >
         Posts
       </TabButton>
-      <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
-        Contact
-      </TabButton>
+
       <hr />
-      <Activity mode={tab === "about" ? "visible" : "hidden"}>
-        <AboutTab />
-      </Activity>
-      <Activity mode={tab === "posts" ? "visible" : "hidden"}>
-        <PostsTab />
-      </Activity>
-      <Activity mode={tab === "contact" ? "visible" : "hidden"}>
-        <ContactTab />
-      </Activity>
-    </Suspense>
+
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+          <Home />
+        </Activity>
+        <Activity mode={activeTab === 'posts' ? 'visible' : 'hidden'}>
+          <Posts />
+        </Activity>
+      </Suspense>
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function AboutTab() {
+```js src/Home.js
+export default function Home() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
+```js src/Posts.js
+import { use } from 'react';
 import { fetchData } from './data.js';
 
-function PostsTab() {
+export default function Posts() {
   const posts = use(fetchData('/posts'));
+
   return (
-    <ViewTransition>
     <ul className="items">
       {posts.map(post =>
-        <Post key={post.id} title={post.title} />
+        <li className="item" key={post.id}>
+          {post.title}
+        </li>
       )}
     </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
-  return (
-    <li className="item">
-      {title}
-    </li>
   );
 }
-
-export default PostsTab;
 ```
 
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
-      <textarea />
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </ViewTransition>
-  );
-}
-```
-
-
 ```js src/data.js hidden
 // Note: 데이터 페칭 방법은
 // Suspense와 함께 사용하는 프레임워크에 따라 달라집니다.
@@ -849,6 +1028,7 @@ body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
 .pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -868,12 +1048,172 @@ b { display: inline-block; margin-right: 10px; }
 }
 ```
 
-</Sandpack>
+</Sandpack>
+
+`Posts` was able to prepare itself for a faster render, thanks to the hidden Activity boundary.
+
+---
+
+Pre-rendering components with hidden Activity boundaries is a powerful way to reduce loading times for parts of the UI that the user is likely to interact with next.
+
+<Note>
+
+**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include:
+
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a cached Promise with [`use`](/reference/react/use)
+
+Activity **does not** detect data that is fetched inside an Effect.
+
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
+
+</Note>
+
+---
+
+
+### Speeding up interactions during page load {/*speeding-up-interactions-during-page-load*/}
+
+React includes an under-the-hood performance optimization called Selective Hydration. It works by hydrating your app's initial HTML _in chunks_, enabling some components to become interactive even if other components on the page haven't loaded their code or data yet.
+
+Suspense boundaries participate in Selective Hydration, because they naturally divide your component tree into units that are independent from one another:
+
+```jsx
+function Page() {
+  return (
+    <>
+      <MessageComposer />
+
+      <Suspense fallback="Loading chats...">
+        <Chats />
+      </Suspense>
+    </>
+  )
+}
+```
+
+Here, `MessageComposer` can be fully hydrated during the initial render of the page, even before `Chats` is mounted and starts to fetch its data.
+
+So by breaking up your component tree into discrete units, Suspense allows React to hydrate your app's server-rendered HTML in chunks, enabling parts of your app to become interactive as fast as possible.
+
+But what about pages that don't use Suspense?
+
+Take this tabs example:
+
+```jsx
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      {activeTab === 'home' && (
+        <Home />
+      )}
+      {activeTab === 'video' && (
+        <Video />
+      )}
+    </>
+  )
+}
+```
+
+Here, React must hydrate the entire page all at once. If `Home` or `Video` are slower to render, they could make the tab buttons feel unresponsive during hydration.
+
+Adding Suspense around the active tab would solve this:
+
+```jsx {13,20}
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      <Suspense fallback={<Placeholder />}>
+        {activeTab === 'home' && (
+          <Home />
+        )}
+        {activeTab === 'video' && (
+          <Video />
+        )}
+      </Suspense>
+    </>
+  )
+}
+```
+
+...but it would also change the UI, since the `Placeholder` fallback would be displayed on the initial render.
+
+Instead, we can use Activity. Since Activity boundaries show and hide their children, they already naturally divide the component tree into independent units. And just like Suspense, this feature allows them to participate in Selective Hydration.
+
+Let's update our example to use Activity boundaries around the active tab:
+
+```jsx {13-18}
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      <Activity mode={activeTab === "home" ? "visible" : "hidden"}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === "video" ? "visible" : "hidden"}>
+        <Video />
+      </Activity>
+    </>
+  )
+}
+```
+
+Now our initial server-rendered HTML looks the same as it did in the original version, but thanks to Activity, React can hydrate the tab buttons first, before it even mounts `Home` or `Video`.
+
+---
+
+Thus, in addition to hiding and showing content, Activity boundaries help improve your app's performance during hydration by letting React know which parts of your page can become interactive in isolation.
+
+And even if your page doesn't ever hide part of its content, you can still add always-visible Activity boundaries to improve hydration performance:
+
+```jsx
+function Page() {
+  return (
+    <>
+      <Post />
+
+      <Activity>
+        <Comments />
+      </Activity>
+    </>
+  );
+} 
+```
 
 ---
 
 ## 문제 해결 {/*troubleshooting*/}
 
+<<<<<<< HEAD
 ### Activity가 숨겨져 있을 때 Effect가 마운트되지 않습니다 {/*effects-dont-mount-when-an-activity-is-hidden*/}
 
 `<Activity>`가 "hidden"일 때 모든 Effect가 마운트 해제됩니다. 개념적으로는 컴포넌트가 마운트 해제되지만, React는 나중에 사용할 상태를 저장합니다.
@@ -881,33 +1221,30 @@ b { display: inline-block; margin-right: 10px; }
 이는 Activity의 기능입니다. 숨겨진 UI 부분에 대한 구독이 이루어지지 않아 숨겨진 콘텐츠에 대한 작업량이 줄어들기 때문입니다. 또한 비디오 일시 정지와 같은 정리 작업(Activity 없이 마운트 해제했을 때 예상되는 동작)이 실행됩니다. Activity가 "visible"로 전환되면 Effect를 생성하여 마운트하고, 이때 구독하고 비디오를 재생합니다.
 
 각 버튼에 대해 다른 비디오가 재생되는 다음 예시를 살펴보세요.
+=======
+### My hidden components have unwanted side effects {/*my-hidden-components-have-unwanted-side-effects*/}
 
+An Activity boundary hides its content by setting `display: none` on its children and cleaning up any of their Effects. So, most well-behaved React components that properly clean up their side effects will already be robust to being hidden by Activity.
 
-<Sandpack>
-
-```js
-import { useState, useRef, useEffect } from 'react';
-import './checker.js';
+But there _are_ some situations where a hidden component behaves differently than an unmounted one. Most notably, since a hidden component's DOM is not destroyed, any side effects from that DOM will persist, even after the component is hidden.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
-function VideoPlayer({ src, isPlaying }) {
-  const ref = useRef(null);
+As an example, consider a `<video>` tag. Typically it doesn't require any cleanup, because even if you're playing a video, unmounting the tag stops the video and audio from playing in the browser. Try playing the video and then pressing Home in this demo:
 
-  useEffect(() => {
-    const videoRef = ref.current;
-    videoRef.play();
-    
-    return () => {
-      videoRef.pause();
-    }
-  }, []);
+<Sandpack>
 
-  return <video ref={ref} src={src} muted loop playsInline/>;
-}
+```js src/App.js active
+import { useState } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
-  const [video, setVideo] = useState(1);
+  const [activeTab, setActiveTab] = useState('video');
+
   return (
     <>
+<<<<<<< HEAD
       <div>
         <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
         <button onClick={() => setVideo(2)}>Elephants Dream</button>
@@ -924,24 +1261,37 @@ export default function App() {
           src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
         />
       }
+=======
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      {activeTab === 'home' && <Home />}
+      {activeTab === 'video' && <Video />}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
     </>
   );
 }
 ```
 
-```js src/checker.js hidden
-let interval = setInterval(() => {
-  const videos = Array.from(document.querySelectorAll('video'));
-  const playing = videos.filter(
-    (v) => !v.paused
-  );
-  if (playing.length > 1) {
-    console.error(`Multiple playing videos: ${playing.length}`);
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
   }
-    
-}, 50);
-```
 
+<<<<<<< HEAD
 
 ```css
 body { height: 275px; }
@@ -999,10 +1349,17 @@ export default function App() {
       </div>
       <VideoChecker />
     </>
+=======
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
   );
 }
 ```
 
+<<<<<<< HEAD
 ```js src/checker.js hidden
 import {useRef, useEffect} from 'react';
 
@@ -1092,47 +1449,300 @@ export default function App() {
       </Activity>
       <VideoChecker />
     </>
+=======
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
   );
 }
 ```
 
-```js src/checker.js hidden
-import {useRef, useEffect} from 'react';
+```js src/Video.js 
+export default function Video() {
+  return (
+    <video
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+      controls
+      playsInline
+    />
 
-export default function VideoChecker() {
-  const hasLogged = useRef(false);
+  );
+}
+```
 
-  useEffect(() => {
-    let interval = setInterval(() => {
-      if (hasLogged.current === false) {
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
+```
 
-        const videos = Array.from(document.querySelectorAll('video'));
-        const playing = videos.filter(
-          (v) => !v.paused
-        );
-        if (hasLogged.current === false && playing.length > 1) {
-          hasLogged.current = true;
-          console.error(`Multiple playing videos: ${playing.length}`);
-        }
-      }
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+<<<<<<< HEAD
+이러한 이유로 Activity를 개념적으로는 컴포넌트를 "마운트 해제"하고 "재마운트"하되 React나 DOM 상태는 나중에 사용할 수 있도록 저장하는 것으로 생각하는 것이 좋습니다. 실제로는 [You Might Not Need an Effect](learn/you-might-not-need-an-effect) 가이드를 따랐다면 예상대로 작동합니다. 문제가 있는 Effect를 적극적으로 찾으려면 Activity 마운트 해제와 마운트를 적극적으로 수행하여 예상치 못한 부작용을 잡아내는 [`<StrictMode>`](/reference/react/StrictMode)를 추가하는 것을 추천합니다.
+
+### 숨겨진 Activity가 SSR에서 렌더링되지 않습니다 {/*my-hidden-activity-is-not-rendered-in-ssr*/}
+
+서버 사이드 렌더링 중에 `<Activity mode="hidden">`을 사용하면 Activity의 콘텐츠가 SSR 응답에 포함되지 않습니다. 이는 콘텐츠가 페이지에 표시되지 않고 초기 렌더링에 필요하지 않기 때문입니다. SSR 응답에 콘텐츠를 포함해야 한다면 [`useDeferredValue`](/reference/react/useDeferredValue)를 사용하여 콘텐츠의 렌더링을 지연시키는 것과 같은 다른 접근 방법을 사용할 수 있습니다.
+=======
+The video stops playing as expected.
+
+Now, let's say we wanted to preserve the timecode where the user last watched, so that when they tab back to the video, it doesn't start over from the beginning again.
+
+This is a great use case for Activity!
+
+Let's update `App` to hide the inactive tab with a hidden Activity boundary instead of unmounting it, and see how the demo behaves this time:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('video');
+
+  return (
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <Video />
+      </Activity>
+    </>
+  );
+}
+```
+
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js src/Video.js 
+export default function Video() {
+  return (
+    <video
+      controls
+      playsInline
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    />
+
+  );
+}
+```
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+Whoops! The video and audio continue to play even after it's been hidden, because the tab's `<video>` element is still in the DOM.
+
+To fix this, we can add an Effect with a cleanup function that pauses the video:
+
+```jsx {2,4-10,14}
+export default function VideoTab() {
+  const ref = useRef();
+
+  useLayoutEffect(() => {
+    const videoRef = ref.current;
 
-    }, 50);
-    
     return () => {
-      hasLogged.current = false;
-      clearInterval(interval);
+      videoRef.pause()
     }
-  });
-  
+  }, []);
+
+  return (
+    <video
+      ref={ref}
+      controls
+      playsInline
+      src="..."
+    />
+
+  );
+}
+```
+
+We call `useLayoutEffect` instead of `useEffect` because conceptually the clean-up code is tied to the component's UI being visually hidden. If we used a regular effect, the code could be delayed by (say) a re-suspending Suspense boundary or a View Transition.
+
+Let's see the new behavior. Try playing the video, switching to the Home tab, then back to the Video tab:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('video');
+
+  return (
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <Video />
+      </Activity>
+    </>
+  );
+}
+```
+
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
 }
+```
+
+```js src/Video.js 
+import { useRef, useLayoutEffect } from 'react';
+
+export default function Video() {
+  const ref = useRef();
+
+  useLayoutEffect(() => {
+    const videoRef = ref.current
 
+    return () => {
+      videoRef.pause()
+    };
+  }, [])
+
+  return (
+    <video
+      ref={ref}
+      controls
+      playsInline
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    />
+
+  );
+}
 ```
 
 ```css
 body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
-video { width: 300px; margin-top: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -1154,8 +1764,32 @@ video { width: 300px; margin-top: 10px; }
 
 </Sandpack>
 
-이러한 이유로 Activity를 개념적으로는 컴포넌트를 "마운트 해제"하고 "재마운트"하되 React나 DOM 상태는 나중에 사용할 수 있도록 저장하는 것으로 생각하는 것이 좋습니다. 실제로는 [You Might Not Need an Effect](learn/you-might-not-need-an-effect) 가이드를 따랐다면 예상대로 작동합니다. 문제가 있는 Effect를 적극적으로 찾으려면 Activity 마운트 해제와 마운트를 적극적으로 수행하여 예상치 못한 부작용을 잡아내는 [`<StrictMode>`](/reference/react/StrictMode)를 추가하는 것을 추천합니다.
+It works great! Our cleanup function ensures that the video stops playing if it's ever hidden by an Activity boundary, and even better, because the `<video>` tag is never destroyed, the timecode is preserved, and the video itself doesn't need to be initialized or downloaded again when the user switches back to keep watching it.
 
-### 숨겨진 Activity가 SSR에서 렌더링되지 않습니다 {/*my-hidden-activity-is-not-rendered-in-ssr*/}
+This is a great example of using Activity to preserve ephemeral DOM state for parts of the UI that become hidden, but the user is likely to interact with again soon.
 
-서버 사이드 렌더링 중에 `<Activity mode="hidden">`을 사용하면 Activity의 콘텐츠가 SSR 응답에 포함되지 않습니다. 이는 콘텐츠가 페이지에 표시되지 않고 초기 렌더링에 필요하지 않기 때문입니다. SSR 응답에 콘텐츠를 포함해야 한다면 [`useDeferredValue`](/reference/react/useDeferredValue)를 사용하여 콘텐츠의 렌더링을 지연시키는 것과 같은 다른 접근 방법을 사용할 수 있습니다.
+---
+
+Our example illustrates that for certain tags like `<video>`, unmounting and hiding have different behavior. If a component renders DOM that has a side effect, and you want to prevent that side effect when an Activity boundary hides it, add an Effect with a return function to clean it up.
+
+The most common cases of this will be from the following tags:
+
+  - `<video>`
+  - `<audio>`
+  - `<iframe>`
+
+Typically, though, most of your React components should already be robust to being hidden by an Activity boundary. And conceptually, you should think of "hidden" Activities as being unmounted.
+
+To eagerly discover other Effects that don't have proper cleanup, which is important not only for Activity boundaries but for many other behaviors in React, we recommend using [`<StrictMode>`](/reference/react/StrictMode). 
+
+---
+
+
+### My hidden components have Effects that aren't running {/*my-hidden-components-have-effects-that-arent-running*/}
+
+When an `<Activity>` is "hidden", all its children's Effects are cleaned up. Conceptually, the children are unmounted, but React saves their state for later. This is a feature of Activity because it means subscriptions won't be active for hidden parts of the UI, reducing the amount of work needed for hidden content.
+
+If you're relying on an Effect mounting to clean up a component's side effects, refactor the Effect to do the work in the returned cleanup function instead.
+
+To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. 
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
index 04b45a68b..63d6ae502 100644
--- a/src/content/reference/react/StrictMode.md
+++ b/src/content/reference/react/StrictMode.md
@@ -226,7 +226,11 @@ li {
 
 위 코드에는 실수가 있습니다. 하지만 초기 출력이 올바르게 나타나기 때문에 놓치기 쉽습니다.
 
+<<<<<<< HEAD
 이 실수는 `StoryTray` 컴포넌트가 여러 번 다시 렌더링하면 더 눈에 띄게 됩니다. 예를 들어 `StoryTray`에 마우스를 올려놓을 때마다 다른 배경색으로 다시 렌더링하도록 해 보겠습니다.
+=======
+This mistake will become more noticeable if the `StoryTray` component re-renders multiple times. For example, let's make the `StoryTray` re-render with a different background color whenever you hover over it:
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 <Sandpack>
 
@@ -861,12 +865,12 @@ root.render(<App />);
 ```js src/App.js active
 import { useRef, useState } from "react";
 
-export default function AnimalFriends() {
+export default function CatFriends() {
   const itemsRef = useRef([]);
-  const [animalList, setAnimalList] = useState(setupAnimalList);
-  const [animal, setAnimal] = useState('cat');
+  const [catList, setCatList] = useState(setupCatList);
+  const [cat, setCat] = useState('neo');
 
-  function scrollToAnimal(index) {
+  function scrollToCat(index) {
     const list = itemsRef.current;
     const {node} = list[index];
     node.scrollIntoView({
@@ -876,24 +880,29 @@ export default function AnimalFriends() {
     });
   }
 
+<<<<<<< HEAD
   const animals = animalList.filter(a => a.type === animal)
+=======
+  const cats = catList.filter(c => c.type === cat)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
   return (
     <>
       <nav>
-        <button onClick={() => setAnimal('cat')}>Cats</button>
-        <button onClick={() => setAnimal('dog')}>Dogs</button>
+        <button onClick={() => setCat('neo')}>Neo</button>
+        <button onClick={() => setCat('millie')}>Millie</button>
       </nav>
       <hr />
       <nav>
-        <span>Scroll to:</span>{animals.map((animal, index) => (
-          <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+        <span>Scroll to:</span>{cats.map((cat, index) => (
+          <button key={cat.src} onClick={() => scrollToCat(index)}>
             {index}
           </button>
         ))}
       </nav>
       <div>
         <ul>
+<<<<<<< HEAD
           {animals.map((animal) => (
               <li
                 key={animal.src}
@@ -914,22 +923,43 @@ export default function AnimalFriends() {
               </li>
             ))}
 
+=======
+          {cats.map((cat) => (
+            <li
+              key={cat.src}
+              ref={(node) => {
+                const list = itemsRef.current;
+                const item = {cat: cat, node};
+                list.push(item);
+                console.log(`✅ Adding cat to the map. Total cats: ${list.length}`);
+                if (list.length > 10) {
+                  console.log('❌ Too many cats in the list!');
+                }
+                return () => {
+                  // 🚩 No cleanup, this is a bug!
+                }
+              }}
+            >
+              <img src={cat.src} />
+            </li>
+          ))}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
         </ul>
       </div>
     </>
   );
 }
 
-function setupAnimalList() {
-  const animalList = [];
+function setupCatList() {
+  const catList = [];
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+    catList.push({type: 'neo', src: "https://placecats.com/neo/320/240?" + i});
   }
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+    catList.push({type: 'millie', src: "https://placecats.com/millie/320/240?" + i});
   }
 
-  return animalList;
+  return catList;
 }
 
 ```
@@ -1003,12 +1033,12 @@ root.render(
 ```js src/App.js active
 import { useRef, useState } from "react";
 
-export default function AnimalFriends() {
+export default function CatFriends() {
   const itemsRef = useRef([]);
-  const [animalList, setAnimalList] = useState(setupAnimalList);
-  const [animal, setAnimal] = useState('cat');
+  const [catList, setCatList] = useState(setupCatList);
+  const [cat, setCat] = useState('neo');
 
-  function scrollToAnimal(index) {
+  function scrollToCat(index) {
     const list = itemsRef.current;
     const {node} = list[index];
     node.scrollIntoView({
@@ -1018,24 +1048,29 @@ export default function AnimalFriends() {
     });
   }
 
+<<<<<<< HEAD
   const animals = animalList.filter(a => a.type === animal)
+=======
+  const cats = catList.filter(c => c.type === cat)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
   return (
     <>
       <nav>
-        <button onClick={() => setAnimal('cat')}>Cats</button>
-        <button onClick={() => setAnimal('dog')}>Dogs</button>
+        <button onClick={() => setCat('neo')}>Neo</button>
+        <button onClick={() => setCat('millie')}>Millie</button>
       </nav>
       <hr />
       <nav>
-        <span>Scroll to:</span>{animals.map((animal, index) => (
-          <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+        <span>Scroll to:</span>{cats.map((cat, index) => (
+          <button key={cat.src} onClick={() => scrollToCat(index)}>
             {index}
           </button>
         ))}
       </nav>
       <div>
         <ul>
+<<<<<<< HEAD
           {animals.map((animal) => (
               <li
                 key={animal.src}
@@ -1056,22 +1091,43 @@ export default function AnimalFriends() {
               </li>
             ))}
 
+=======
+          {cats.map((cat) => (
+            <li
+              key={cat.src}
+              ref={(node) => {
+                const list = itemsRef.current;
+                const item = {cat: cat, node};
+                list.push(item);
+                console.log(`✅ Adding cat to the map. Total cats: ${list.length}`);
+                if (list.length > 10) {
+                  console.log('❌ Too many cats in the list!');
+                }
+                return () => {
+                  // 🚩 No cleanup, this is a bug!
+                }
+              }}
+            >
+              <img src={cat.src} />
+            </li>
+          ))}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
         </ul>
       </div>
     </>
   );
 }
 
-function setupAnimalList() {
-  const animalList = [];
+function setupCatList() {
+  const catList = [];
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+    catList.push({type: 'neo', src: "https://placecats.com/neo/320/240?" + i});
   }
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+    catList.push({type: 'millie', src: "https://placecats.com/millie/320/240?" + i});
   }
 
-  return animalList;
+  return catList;
 }
 
 ```
@@ -1129,12 +1185,12 @@ root.render(
 ```js src/App.js active
 import { useRef, useState } from "react";
 
-export default function AnimalFriends() {
+export default function CatFriends() {
   const itemsRef = useRef([]);
-  const [animalList, setAnimalList] = useState(setupAnimalList);
-  const [animal, setAnimal] = useState('cat');
+  const [catList, setCatList] = useState(setupCatList);
+  const [cat, setCat] = useState('neo');
 
-  function scrollToAnimal(index) {
+  function scrollToCat(index) {
     const list = itemsRef.current;
     const {node} = list[index];
     node.scrollIntoView({
@@ -1144,24 +1200,29 @@ export default function AnimalFriends() {
     });
   }
 
+<<<<<<< HEAD
   const animals = animalList.filter(a => a.type === animal)
+=======
+  const cats = catList.filter(c => c.type === cat)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
   return (
     <>
       <nav>
-        <button onClick={() => setAnimal('cat')}>Cats</button>
-        <button onClick={() => setAnimal('dog')}>Dogs</button>
+        <button onClick={() => setCat('neo')}>Neo</button>
+        <button onClick={() => setCat('millie')}>Millie</button>
       </nav>
       <hr />
       <nav>
-        <span>Scroll to:</span>{animals.map((animal, index) => (
-          <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+        <span>Scroll to:</span>{cats.map((cat, index) => (
+          <button key={cat.src} onClick={() => scrollToCat(index)}>
             {index}
           </button>
         ))}
       </nav>
       <div>
         <ul>
+<<<<<<< HEAD
           {animals.map((animal) => (
               <li
                 key={animal.src}
@@ -1183,22 +1244,44 @@ export default function AnimalFriends() {
               </li>
             ))}
 
+=======
+          {cats.map((cat) => (
+            <li
+              key={cat.src}
+              ref={(node) => {
+                const list = itemsRef.current;
+                const item = {cat: cat, node};
+                list.push(item);
+                console.log(`✅ Adding cat to the map. Total cats: ${list.length}`);
+                if (list.length > 10) {
+                  console.log('❌ Too many cats in the list!');
+                }
+                return () => {
+                  list.splice(list.indexOf(item));
+                  console.log(`❌ Removing cat from the map. Total cats: ${itemsRef.current.length}`);
+                }
+              }}
+            >
+              <img src={cat.src} />
+            </li>
+          ))}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
         </ul>
       </div>
     </>
   );
 }
 
-function setupAnimalList() {
-  const animalList = [];
+function setupCatList() {
+  const catList = [];
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+    catList.push({type: 'neo', src: "https://placecats.com/neo/320/240?" + i});
   }
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+    catList.push({type: 'millie', src: "https://placecats.com/millie/320/240?" + i});
   }
 
-  return animalList;
+  return catList;
 }
 
 ```
@@ -1247,7 +1330,11 @@ li {
 Strict Mode 없이는 고장 난 기능을 알아차릴 때까지 여기저기 클릭해야 하므로 버그를 놓치기 쉽습니다. Strict Mode는 버그를 즉시 드러나도록 하여 프로덕션에 배포하기 전에 문제를 발견할 수 있습니다.
 
 ---
+<<<<<<< HEAD
 ### Strict Mode에서 활성화된 더 이상 사용되지 않는 경고 수정하기 {/*fixing-deprecation-warnings-enabled-by-strict-mode*/}
+=======
+### Fixing deprecation warnings enabled by Strict Mode {/*fixing-deprecation-warnings-enabled-by-strict-mode*/}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 React는 `<StrictMode>` 트리 내부의 컴포넌트가 더 이상 사용되지 않는 다음 API 중 하나를 사용하는 경우 경고를 표시합니다.
 
diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index 306b22e78..fab595ed7 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -143,10 +143,17 @@ View Transition 클래스는 ViewTransition이 활성화될 때 Transition 중
 
 #### 주의 사항 {/*caveats*/}
 
+<<<<<<< HEAD
 - 기본적으로 `setState` 업데이트는 즉시 이루어지며 `<ViewTransition>`을 활성화하지 않습니다. [Transition](/reference/react/useTransition)으로 감싼 업데이트만 해당됩니다. [`<Suspense>`](/reference/react/Suspense)를 사용하여 Transition을 선택하여 [콘텐츠를 표시](/link-to-suspense-below)할 수도 있습니다.
 - `<ViewTransition>`은 이동, 확대/축소, 크로스 페이드할 수 있는 이미지를 생성합니다. React Native나 Motion에서 본 레이아웃 애니메이션과 달리 내부의 모든 개별 엘리먼트가 위치에 애니메이션되지는 않습니다. 이는 더 나은 성능과 개별 부분을 애니메이션하는 것과 비교하여 더 연속적이고 부드러운 애니메이션 느낌을 줄 수 있습니다. 그러나 스스로 움직여야 하는 것들의 연속성을 잃을 수도 있습니다. 결과적으로 더 많은 `<ViewTransition>` 경계를 수동으로 추가해야 할 수 있습니다.
 - 많은 사용자가 페이지에서 애니메이션을 선호하지 않을 수 있습니다. React는 이 경우 애니메이션을 자동으로 비활성화하지 않습니다. 사용자 선호도에 따라 `@media (prefers-reduced-motion)` 미디어 쿼리를 사용하여 애니메이션을 비활성화하거나 약하게 만드는 것을 권장합니다. 향후 CSS 라이브러리에서는 프리셋에 이것이 내장되어 있을 수 있습니다.
 - 현재 `<ViewTransition>`은 DOM에서만 작동합니다. React Native 및 다른 플랫폼에 대한 지원을 추가하는 작업을 진행하고 있습니다.
+=======
+- By default, `setState` updates immediately and does not activate `<ViewTransition>`, only updates wrapped in a [Transition](/reference/react/useTransition). You can also use [`<Suspense>`](/reference/react/Suspense) to opt-in to a Transition to [reveal content](/reference/react/Suspense#revealing-content-together-at-once).
+- `<ViewTransition>` creates an image that can be moved around, scaled and cross-faded. Unlike Layout Animations you may have seen in React Native or Motion, this means that not every individual Element inside of it animates its position. This can lead to better performance and a more continuous feeling, smooth animation compared to animating every individual piece. However, it can also lose continuity in things that should be moving by themselves. So you might have to add more `<ViewTransition>` boundaries manually as a result.
+- Many users may prefer not having animations on the page. React doesn't automatically disable animations for this case. We recommend that using the `@media (prefers-reduced-motion)` media query to disable animations or tone them down based on user preference. In the future, CSS libraries may have this built-in to their presets.
+- Currently, `<ViewTransition>` only works in the DOM. We're working on adding support for React Native and other platforms.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ---
 
diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
index cc4af4fe7..79b6acd80 100644
--- a/src/content/reference/react/cache.md
+++ b/src/content/reference/react/cache.md
@@ -62,10 +62,19 @@ function Chart({data}) {
 
 #### 주의 사항 {/*caveats*/}
 
+<<<<<<< HEAD
 - React는 서버 요청마다 모든 메모화된 함수들을 위해 캐시를 무효화합니다.
 - `cache`를 호출할 때마다 새 함수가 생성됩니다. 즉, 동일한 함수로 `cache`를 여러 번 호출하면 동일한 캐시를 공유하지 않는 다른 메모화된 함수가 반환됩니다.
 - `cachedFn` 또한 캐시 오류를 잡아냅니다. `fn`이 특정 인수에 대해 오류를 던지면 캐싱되고, 동일한 인수로 `cachedFn`를 호출하면 동일한 오류가 다시 발생합니다.
 - `cache`는 [서버 컴포넌트](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)에서만 사용가능합니다.
+=======
+[//]: # 'TODO: add links to Server/Client Component reference once https://github.com/reactjs/react.dev/pull/6177 is merged'
+
+- React will invalidate the cache for all memoized functions for each server request.
+- Each call to `cache` creates a new function. This means that calling `cache` with the same function multiple times will return different memoized functions that do not share the same cache.
+- `cachedFn` will also cache errors. If `fn` throws an error for certain arguments, it will be cached, and the same error is re-thrown when `cachedFn` is called with those same arguments.
+- `cache` is for use in [Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) only.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ---
 
@@ -96,9 +105,17 @@ function TeamReport({users}) {
 ```
 같은 `user` 객체가 `Profile`과 `TeamReport`에서 렌더링될 때, 두 컴포넌트는 작업을 공유하고, `user`를 위한 `calculateUserMetrics`를 한 번만 호출합니다.
 
+<<<<<<< HEAD
 `Profile`이 먼저 렌더링된다고 가정합시다. `Profile`은 <CodeStep step={1}>`getUserMetrics`</CodeStep>를 호출하고, 캐싱된 결과가 있는지 확인합니다. `user`와 함께 `getUserMetrics`를 처음 호출하기 때문에, 현재 저장된 캐시는 없습니다. `getUserMetrics`는 `user`와 함께 `calculateUserMetrics`를 호출하고 캐시에 결과값을 저장합니다.
 
 `TeamReport`가 `users` 목록과 함께 렌더링될 때 같은 `user` 객체를 사용하게 되고, 이는 <CodeStep step={2}>`getUserMetrics`</CodeStep>를 호출해 캐시에서 결과값을 읽어옵니다.
+=======
+If the same `user` object is rendered in both `Profile` and `TeamReport`, the two components can share work and only call `calculateUserMetrics` once for that `user`.
+
+Assume `Profile` is rendered first. It will call <CodeStep step={1}>`getUserMetrics`</CodeStep>, and check if there is a cached result. Since it is the first time `getUserMetrics` is called with that `user`, there will be a cache miss. `getUserMetrics` will then call `calculateUserMetrics` with that `user` and write the result to cache.
+
+When `TeamReport` renders its list of `users` and reaches the same `user` object, it will call <CodeStep step={2}>`getUserMetrics`</CodeStep> and read the result from cache.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 <Pitfall>
 
@@ -166,12 +183,20 @@ export default function Precipitation({cityData}) {
   // ...
 }
 ```
+<<<<<<< HEAD
 여기 두 컴포넌트가 같은 캐시를 읽고 쓰기 위해 `./getWeekReport.js`로 부터 `export`해 온 <CodeStep step={3}>같은 메모화된 함수</CodeStep>를 호출했습니다.
+=======
+Here, both components call the <CodeStep step={3}>same memoized function</CodeStep> exported from `./getWeekReport.js` to read and write to the same cache.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 </Pitfall>
 
 ### 데이터의 스냅샷 공유하기 {/*take-and-share-snapshot-of-data*/}
 
+<<<<<<< HEAD
 컴포넌트끼리 데이터의 스냅샷을 공유하기 위해선 `fetch`와 같이 데이터를 가져오는 함수와 함께 `cache`를 사용해야 합니다. 여러 컴포넌트가 같은 데이터를 받아올 때, 요청이 한 번만 발생하고 받아온 데이터는 캐싱되며 컴포넌트끼리 공유됩니다. 모든 컴포넌트는 서버 렌더링 전반에 걸쳐 동일한 데이터 스냅샷을 참조합니다.
+=======
+To share a snapshot of data between components, call `cache` with a data-fetching function like `fetch`. When multiple components make the same data fetch, only one request is made and the data returned is cached and shared across components. All components refer to the same snapshot of data across the server render.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ```js [[1, 4, "city"], [1, 5, "fetchTemperature(city)"], [2, 4, "getTemperature"], [2, 9, "getTemperature"], [1, 9, "city"], [2, 14, "getTemperature"], [1, 14, "city"]]
 import {cache} from 'react';
@@ -192,7 +217,11 @@ async function MinimalWeatherCard({city}) {
 }
 ```
 
+<<<<<<< HEAD
 `AnimatedWeatherCard`와 `MinimalWeatherCard`가 같은 <CodeStep step={1}>city</CodeStep>를 렌더링할 때, <CodeStep step={2}>메모화된 함수</CodeStep>로 부터 같은 데이터의 스냅샷을 받게 됩니다.
+=======
+If `AnimatedWeatherCard` and `MinimalWeatherCard` both render for the same <CodeStep step={1}>city</CodeStep>, they will receive the same snapshot of data from the <CodeStep step={2}>memoized function</CodeStep>.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 `AnimatedWeatherCard`와 `MinimalWeatherCard`가 다른 <CodeStep step={1}>city</CodeStep>를 <CodeStep step={2}>`getTemperature`</CodeStep>의 인수로 받게 된다면, `fetchTemperature`는 두 번 호출되고 호출마다 다른 데이터를 받게됩니다.
 
@@ -253,7 +282,11 @@ function Page({id}) {
 
 [비동기 함수](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function)의 결과를 보면, [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 받습니다. 이 Promise는 작업에 대한 상태(_대기_, _완료_, _실패_)와 최종적으로 확정된 결과를 가지고 있습니다.
 
+<<<<<<< HEAD
 이 예시에서, 비동기 함수 <CodeStep step={1}>`fetchData`</CodeStep>는 `fetch`를 기다리는 Promise를 반환합니다.
+=======
+In this example, the asynchronous function <CodeStep step={1}>`fetchData`</CodeStep> returns a promise that is awaiting the `fetch`.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ```js [[1, 1, "fetchData()"], [2, 8, "getData()"], [3, 10, "getData()"]]
 async function fetchData() {
@@ -274,7 +307,11 @@ async function MyComponent() {
 
 첫 번째 <CodeStep step={2}>`getData`</CodeStep> 호출은 기다리지<sup>`await`</sup> 않지만 <CodeStep step={3}>두 번째</CodeStep>는 기다립니다. [`await`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await)은 자바스크립트 연산자로, 기다렸다가 확정된 Promise의 결과를 반환합니다. 첫 번째 <CodeStep step={2}>`getData`</CodeStep>는 단순히 조회할 두 번째 <CodeStep step={3}>`getData`</CodeStep>에 대한 Promise를 캐싱하기 위해 `fetch`를 실행합니다.
 
+<<<<<<< HEAD
 <CodeStep step={3}>두 번째 호출</CodeStep>에서 Promise가 여전히 <em>대기 중</em>이면, 결과를 기다리는 동안 `await`이 일시 중지됩니다. 이 최적화는 데이터 불러오기를 기다리는 동안 React가 계산 작업을 계속할 수 있게 해 <CodeStep step={3}>두 번째 호출</CodeStep>에 대한 대기 시간을 줄일 수 있게 합니다.
+=======
+If by the <CodeStep step={3}>second call</CodeStep> the promise is still _pending_, then `await` will pause for the result. The optimization is that while we wait on the `fetch`, React can continue with computational work, thus reducing the wait time for the <CodeStep step={3}>second call</CodeStep>.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 _완료된_ 결과나 오류에 대한 Promise가 이미 정해진 경우, `await`는 즉시 값을 반환합니다. 두 결과 모두 성능상의 이점이 있습니다.
 </DeepDive>
@@ -302,7 +339,11 @@ async function DemoProfile() {
 
 React는 컴포넌트에서 메모화된 함수의 캐시 접근만 제공합니다. 컴포넌트 외부에서 <CodeStep step={1}>`getUser`</CodeStep>를 호출하면 여전히 함수를 실행하지만, 캐시를 읽거나 업데이트하지는 않습니다.
 
+<<<<<<< HEAD
 이는 컴포넌트에서만 접근할 수 있는 [Context](/learn/passing-data-deeply-with-context)를 통해 캐시 접근이 제공되기 때문입니다.
+=======
+This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessible from a component.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 </Pitfall>
 
@@ -314,9 +355,13 @@ React는 컴포넌트에서 메모화된 함수의 캐시 접근만 제공합니
 
 #### `useMemo` {/*deep-dive-use-memo*/}
 
+<<<<<<< HEAD
 일반적으로 [`useMemo`](/reference/react/useMemo)는 클라이언트 컴포넌트에서 렌더링에 걸쳐 고비용의 계산을 캐싱할 때 사용합니다. 예를 들어 컴포넌트 내에서 데이터의 변환을 메모화할 수 있습니다.
+=======
+In general, you should use [`useMemo`](/reference/react/useMemo) for caching an expensive computation in a Client Component across renders. As an example, to memoize a transformation of data within a component.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
-```jsx {4}
+```jsx {expectedErrors: {'react-compiler': [4]}} {4}
 'use client';
 
 function WeatherReport({record}) {
@@ -335,9 +380,13 @@ function App() {
 }
 ```
 
+<<<<<<< HEAD
 이 예시에서 `App`은 두 개의 `WeatherReport`를 같은 데이터와 함께 렌더링했습니다. 두 컴포넌트가 같은 작업을 수행했음에도 불구하고 서로 작업을 공유하지 않습니다. `useMemo`의 캐시는 해당 컴포넌트 내부에만 있습니다.
 
 하지만 `useMemo`는 `App`이 다시 렌더링되고 `record` 객체가 변경되지 않는 경우, 각 컴포넌트 인스턴스가 작업을 건너뛰고 메모화된 `avgTemp`의 값을 사용합니다. `useMemo`는 주어진 종속성을 가진 `avgTemp`의 마지막 계산만 캐싱합니다.
+=======
+However, `useMemo` does ensure that if `App` re-renders and the `record` object doesn't change, each component instance would skip work and use the memoized value of `avgTemp`. `useMemo` will only cache the last computation of `avgTemp` with the given dependencies.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 #### `cache` {/*deep-dive-cache*/}
 
@@ -390,7 +439,11 @@ function App() {
 }
 ```
 
+<<<<<<< HEAD
 예시에서 `MemoWeatherReport` 컴포넌트 모두 첫 번째 렌더링에서 `calculateAvg`를 호출합니다. 하지만 `App`이 다시 렌더링될 때 `record`의 변경이 없다면 프로퍼티의 변경이 없기 때문에 `MemoWeatherReport`가 다시 렌더링되지 않습니다.
+=======
+In this example, both `MemoWeatherReport` components will call `calculateAvg` when first rendered. However, if `App` re-renders, with no changes to `record`, none of the props have changed and `MemoWeatherReport` will not re-render.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 `useMemo`와 비교하면 `memo`는 프로퍼티와 특정 계산을 기반으로 컴포넌트 렌더링을 메모화합니다. `useMemo`와 유사하게, 메모화된 컴포넌트는 마지막 프로퍼티 값에 대한 마지막 렌더링을 캐싱합니다. 프로퍼티가 변경되면, 캐시는 무효화되고 컴포넌트는 다시 렌더링됩니다.
 
@@ -488,4 +541,3 @@ function App() {
   );
 }
 ```
-
diff --git a/src/content/reference/react/captureOwnerStack.md b/src/content/reference/react/captureOwnerStack.md
index 1d5c7d4e0..52453edd3 100644
--- a/src/content/reference/react/captureOwnerStack.md
+++ b/src/content/reference/react/captureOwnerStack.md
@@ -57,7 +57,11 @@ Owner Stack을 사용할 수 없는 경우, `null`을 반환합니다. ([문제
 
 #### Owner Stack vs Component Stack {/*owner-stack-vs-component-stack*/}
 
+<<<<<<< HEAD
 Owner Stack은 [`onUncaughtError` 내부의 `errorInfo.componentStack`](/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors)과 같은 React 오류 핸들러에서 사용할 수 있는 컴포넌트 Stack과 다릅니다.
+=======
+The Owner Stack is different from the Component Stack available in React error handlers like [`errorInfo.componentStack` in `onUncaughtError`](/reference/react-dom/client/hydrateRoot#error-logging-in-production).
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 예를 들어 다음 코드를 살펴보겠습니다.
 
diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md
index b068b57d1..60d9d72e6 100644
--- a/src/content/reference/react/forwardRef.md
+++ b/src/content/reference/react/forwardRef.md
@@ -12,7 +12,11 @@ React 19부터는 더 이상 `forwardRef`이 필요하지 않습니다. 이제 `
 
 <Intro>
 
+<<<<<<< HEAD
 `forwardRef`를 사용하면 컴포넌트가 [Ref](/learn/manipulating-the-dom-with-refs)를 사용하여 부모 컴포넌트의 DOM 노드를 노출할 수 있습니다.
+=======
+`forwardRef` lets your component expose a DOM node to the parent component with a [ref.](/learn/manipulating-the-dom-with-refs)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ```js
 const SomeComponent = forwardRef(render)
diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index 0b28853f6..fba7c2dc4 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -29,7 +29,25 @@ React DOM은 브라우저 DOM 환경에서 실행되는 웹 애플리케이션
 * [클라이언트 API](/reference/react-dom/client) - `react-dom/client` API를 사용하면 브라우저에서 React 컴포넌트를 렌더링할 수 있습니다.
 * [서버 API](/reference/react-dom/server) - `react-dom/server` API를 사용하면 서버에서 React 컴포넌트를 HTML로 렌더링할 수 있습니다.
 
+<<<<<<< HEAD
 ## React의 규칙 {/*rules-of-react*/}
+=======
+## React Compiler {/*react-compiler*/}
+
+The React Compiler is a build-time optimization tool that automatically memoizes your React components and values:
+
+* [Configuration](/reference/react-compiler/configuration) - Configuration options for React Compiler.
+* [Directives](/reference/react-compiler/directives) - Function-level directives to control compilation.
+* [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Guide for shipping pre-compiled library code.
+
+## ESLint Plugin React Hooks {/*eslint-plugin-react-hooks*/}
+
+The [ESLint plugin for React Hooks](/reference/eslint-plugin-react-hooks) helps enforce the Rules of React:
+
+* [Lints](/reference/eslint-plugin-react-hooks) - Detailed documentation for each lint with examples.
+
+## Rules of React {/*rules-of-react*/}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 React에는 패턴 이해를 쉽게 하며 고품질의 애플리케이션을 만들 수 있게 하는 일종의 규칙 혹은 모범적인 방식이 있습니다.
 
diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md
index af3769702..49b9f7a31 100644
--- a/src/content/reference/react/memo.md
+++ b/src/content/reference/react/memo.md
@@ -12,6 +12,12 @@ const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
 
 </Intro>
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically applies the equivalent of `memo` to all components, reducing the need for manual memoization. You can use the compiler to handle component memoization automatically.
+
+</Note>
+
 <InlineToc />
 
 ---
@@ -111,7 +117,11 @@ label {
 
 #### 모든 곳에 `memo`를 추가해야할까요? {/*should-you-add-memo-everywhere*/}
 
+<<<<<<< HEAD
 이 사이트와 같이 대부분의 상호작용이 투박한 앱의 경우(페이지 또는 전체 섹션 교체 등) 일반적으로 메모이제이션은 불필요합니다. 반면 앱이 그림 편집기이고 도형 이동과 같은 대부분의 상호작용이 세분되어 있다면, 메모이제이션이 유용할 수 있습니다.
+=======
+If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 `memo`로 최적화하는 것은 컴포넌트가 정확히 동일한 Props로 자주 리렌더링 되고, 리렌더링 로직이 비용이 많이 드는 경우에만 유용합니다. 컴포넌트가 리렌더링 될 때 인지할 수 있을 만큼의 지연이 없다면 `memo`가 필요하지 않습니다. `memo`는 객체 또는 렌더링 중에 정의된 일반 함수처럼 *항상 다른* Props가 컴포넌트에 전달되는 경우에 완전히 무용지물입니다. 따라서 `memo`와 함께 [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components)와 [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components)이 종종 필요합니다.
 
@@ -355,7 +365,93 @@ function arePropsEqual(oldProps, newProps) {
 
 ---
 
+<<<<<<< HEAD
 ## 문제 해결 {/*troubleshooting*/}
 ### Prop가 객체, 배열 또는 함수인 경우 컴포넌트가 리렌더링됩니다. {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
+=======
+### Do I still need React.memo if I use React Compiler? {/*react-compiler-memo*/}
+
+When you enable [React Compiler](/learn/react-compiler), you typically don't need `React.memo` anymore. The compiler automatically optimizes component re-rendering for you.
+
+Here's how it works:
+
+**Without React Compiler**, you need `React.memo` to prevent unnecessary re-renders:
+
+```js
+// Parent re-renders every second
+function Parent() {
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSeconds(s => s + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <h1>Seconds: {seconds}</h1>
+      <ExpensiveChild name="John" />
+    </>
+  );
+}
+
+// Without memo, this re-renders every second even though props don't change
+const ExpensiveChild = memo(function ExpensiveChild({ name }) {
+  console.log('ExpensiveChild rendered');
+  return <div>Hello, {name}!</div>;
+});
+```
+
+**With React Compiler enabled**, the same optimization happens automatically:
+
+```js
+// No memo needed - compiler prevents re-renders automatically
+function ExpensiveChild({ name }) {
+  console.log('ExpensiveChild rendered');
+  return <div>Hello, {name}!</div>;
+}
+```
+
+Here's the key part of what the React Compiler generates:
+
+```js {6-12}
+function Parent() {
+  const $ = _c(7);
+  const [seconds, setSeconds] = useState(0);
+  // ... other code ...
+
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <ExpensiveChild name="John" />;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  // ... return statement ...
+}
+```
+
+Notice the highlighted lines: The compiler wraps `<ExpensiveChild name="John" />` in a cache check. Since the `name` prop is always `"John"`, this JSX is created once and reused on every parent re-render. This is exactly what `React.memo` does - it prevents the child from re-rendering when its props haven't changed.
+
+The React Compiler automatically:
+1. Tracks that the `name` prop passed to `ExpensiveChild` hasn't changed
+2. Reuses the previously created JSX for `<ExpensiveChild name="John" />`
+3. Skips re-rendering `ExpensiveChild` entirely
+
+This means **you can safely remove `React.memo` from your components when using React Compiler**. The compiler provides the same optimization automatically, making your code cleaner and easier to maintain.
+
+<Note>
+
+The compiler's optimization is actually more comprehensive than `React.memo`. It also memoizes intermediate values and expensive computations within your components, similar to combining `React.memo` with `useMemo` throughout your component tree.
+
+</Note>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+### My component re-renders when a prop is an object, array, or function {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 React는 얕은 비교를 기준으로 이전 Props와 새로운 Props를 비교합니다. 즉, 각각의 새로운 Prop가 이전 Prop와 참조가 동일한지 여부를 고려합니다. 부모가 리렌더링 될 때마다 새로운 객체나 배열을 생성하면, 개별 요소들이 모두 동일하더라도 React는 여전히 변경된 것으로 간주합니다. 마찬가지로 부모 컴포넌트를 렌더링할 때 새로운 함수를 만들면 React는 함수의 정의가 동일하더라도 변경된 것으로 간주합니다. 이를 방지하려면 [부모 컴포넌트에서 Props를 단순화하거나 메모화 하세요.](#minimizing-props-changes)
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 902ee1032..9be6ca5b5 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -310,7 +310,11 @@ export default async function App() {
 }
 ```
 
+<<<<<<< HEAD
 하지만 [서버 컴포넌트](/reference/react/use-server)에서 `await`을 사용하면 `await` 문이 완료될 때까지 렌더링이 차단됩니다. 서버 컴포넌트에서 클라이언트 컴포넌트로 Promise를 Prop으로 전달하면 Promise가 서버 컴포넌트의 렌더링을 차단하는 것을 방지할 수 있습니다.
+=======
+But using `await` in a [Server Component](/reference/rsc/server-components) will block its rendering until the `await` statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 </DeepDive>
 
diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md
index a44530baa..d6b92d142 100644
--- a/src/content/reference/react/useCallback.md
+++ b/src/content/reference/react/useCallback.md
@@ -12,6 +12,12 @@ const cachedFn = useCallback(fn, dependencies)
 
 </Intro>
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useCallback` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
 <InlineToc />
 
 ---
@@ -200,8 +206,13 @@ function ProductPage({ productId, referrer }) {
 
 이미 [`useMemo`](/reference/react/useMemo)에 익숙하다면 `useCallback`을 다음과 같이 생각하는 것이 도움이 될 수 있습니다.
 
+<<<<<<< HEAD
 ```js
 // (React 내부의) 간단한 구현
+=======
+```js {expectedErrors: {'react-compiler': [3]}}
+// Simplified implementation (inside React)
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 function useCallback(fn, dependencies) {
   return useMemo(() => fn, dependencies);
 }
@@ -215,7 +226,11 @@ function useCallback(fn, dependencies) {
 
 #### 항상 `useCallback`을 사용해야 할까요? {/*should-you-add-usecallback-everywhere*/}
 
+<<<<<<< HEAD
 이 사이트처럼 대부분의 상호작용이 (페이지 전체나 전체 부문을 교체하는 것처럼) 굵직한 경우, 보통 memoization이 필요하지 않습니다. 반면에 앱이 (도형을 이동하는 것과 같이) 미세한 상호작용을 하는 그림 편집기 같은 경우, memoization이 매우 유용할 수 있습니다.
+=======
+If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 `useCallback`으로 함수를 캐싱하는 것은 몇 가지 경우에만 가치 있습니다.
 
@@ -303,7 +318,7 @@ function post(url, data) {
 }
 ```
 
-```js src/ShippingForm.js
+```js {expectedErrors: {'react-compiler': [7, 8]}} src/ShippingForm.js
 import { memo, useState } from 'react';
 
 const ShippingForm = memo(function ShippingForm({ onSubmit }) {
@@ -442,7 +457,7 @@ function post(url, data) {
 }
 ```
 
-```js src/ShippingForm.js
+```js {expectedErrors: {'react-compiler': [7, 8]}} src/ShippingForm.js
 import { memo, useState } from 'react';
 
 const ShippingForm = memo(function ShippingForm({ onSubmit }) {
@@ -861,7 +876,7 @@ Object.is(temp1[2], temp2[2]); // ... 나머지 모든 의존성도 확인합니
 
 `Chart` 컴포넌트가 [`memo`](/reference/react/memo)로 감싸져 있다고 생각해 봅시다. `ReportList` 컴포넌트가 렌더링 될 때마다, 모든 `Chart` 항목이 리렌더링 하는 것을 막고 싶습니다. 하지만 반복문에서 `useCallback`을 호출할 수 없습니다.
 
-```js {5-14}
+```js {expectedErrors: {'react-compiler': [6]}} {5-14}
 function ReportList({ items }) {
   return (
     <article>
diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md
index 9cc144a84..b2a28fa70 100644
--- a/src/content/reference/react/useDeferredValue.md
+++ b/src/content/reference/react/useDeferredValue.md
@@ -245,7 +245,11 @@ input { margin: 10px; }
 
 </Sandpack>
 
+<<<<<<< HEAD
 일반적인 대체 UI 패턴은 결과 목록 업데이트를 *지연*하고 새 결과가 준비될 때까지 이전 결과를 계속 표시합니다. `useDeferredValue`를 호출하여 쿼리의 지연된 버전을 전달하세요.
+=======
+A common alternative UI pattern is to *defer* updating the list of results and to keep showing the previous results until the new results are ready. Call `useDeferredValue` to pass a deferred version of the query down:
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ```js {3,11}
 export default function App() {
@@ -670,7 +674,7 @@ export default function App() {
 }
 ```
 
-```js src/SlowList.js
+```js {expectedErrors: {'react-compiler': [19, 20]}} src/SlowList.js
 import { memo } from 'react';
 
 const SlowList = memo(function SlowList({ text }) {
@@ -745,7 +749,7 @@ export default function App() {
 }
 ```
 
-```js src/SlowList.js
+```js {expectedErrors: {'react-compiler': [19, 20]}} src/SlowList.js
 import { memo } from 'react';
 
 const SlowList = memo(function SlowList({ text }) {
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 1b8ee4e36..61a4592a9 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -897,7 +897,11 @@ button { margin: 5px; }
 
 ### Effect를 이용한 데이터 페칭 {/*fetching-data-with-effects*/}
 
+<<<<<<< HEAD
 컴포넌트에 데이터를 페칭하기 위해 Effect를 사용할 수 있습니다. 만약 [프레임워크를 사용하고 있다면](/learn/start-a-new-react-project#production-grade-react-frameworks) 프레임워크의 데이터 페칭 메커니즘을 이용하는 것이 Effect를 직접 작성하는 것보다 더 효율적일 것입니다.
+=======
+You can use an Effect to fetch data for your component. Note that [if you use a framework,](/learn/start-a-new-react-project#full-stack-frameworks) using your framework's data fetching mechanism will be a lot more efficient than writing Effects manually.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 만약 직접 Effect를 작성하여 데이터를 페칭하고 싶다면, 코드는 다음과 같을 수 있습니다.
 
@@ -929,7 +933,8 @@ export default function Page() {
 
 <Sandpack>
 
-```js src/App.js
+{/* TODO(@poteto) - investigate potential false positives in react compiler validation */}
+```js {expectedErrors: {'react-compiler': [9]}} src/App.js
 import { useState, useEffect } from 'react';
 import { fetchBio } from './api.js';
 
@@ -1049,8 +1054,13 @@ Effect 내부에서 `fetch` 호출을 작성하는 것은 클라이언트 사이
 
 이러한 단점은 React만 해당되는 것이 아닙니다. 다른 라이브러리를 사용하여 데이터를 페칭할 때도 해당됩니다. 라우팅과 마찬가지로 데이터 페칭은 세부적인 사항이 많으므로 다음과 같은 접근 방식을 권장합니다.
 
+<<<<<<< HEAD
 - **[프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)를 사용하는 경우, 해당 프레임워크에 내장된 데이터 페칭 메커니즘을 활용하세요.** 현대 React 프레임워크는 매우 효율적이며 위에서 언급한 문제점이 없는 통합된 데이터 페칭 기능을 가지고 있습니다.
 - **그렇지 않은 경우, 클라이언트 측 캐시를 사용하거나 직접 개발을 고려해 보세요.** 인기 있는 오픈소스 솔루션으로는 [React Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), 그리고 [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview)가 있습니다. 물론 직접 솔루션을 개발할수도 있으며 이 경우에는 이펙트를 내부적으로 사용하면서도 데이터 사전로드 또는 데이터 요구사항을 라우트로 호이스팅하는 방법을 통해 중복 요청 방지, 응답 캐싱 및 네트워크 폭포 효과 방지를 구현할 수 있습니다.
+=======
+- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 만약 이러한 접근 방식이 적합하지 않다면 Effect 내부에서 데이터를 페칭하는 것을 계속 진행할 수 있습니다.
 
@@ -1733,11 +1743,17 @@ function Page({ url, shoppingCart }) {
 
 ### 서버와 클라이언트에서 다른 컨텐츠를 표시하기 {/*displaying-different-content-on-the-server-and-the-client*/}
 
+<<<<<<< HEAD
 앱이 서버 렌더링을 사용하는 경우 ([직접](/reference/react-dom/server) 또는 [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)를 통해) 컴포넌트는 두 가지 다른 환경에서 렌더링됩니다. 서버에서는 초기 HTML을 생성하기 위해 렌더링되고, 클라이언트에서는 React가 이벤트 핸들러를 해당 HTML에 연결하기 위해 다시 렌더링 코드를 실행합니다. 이것이 [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html)이 작동하려면 초기 렌더링 출력이 서버와 클라이언트에서 동일해야 하는 이유입니다.
+=======
+If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/start-a-new-react-project#full-stack-frameworks)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 드물게 클라이언트에서 다른 내용을 표시해야 할 수 있습니다. 예를 들어 앱이 [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)에서 일부 데이터를 읽는 경우, 이를 서버에서 구현할 수 없습니다. 다음은 이것을 구현하는 방법입니다.
 
-```js
+
+{/* TODO(@poteto) - investigate potential false positives in react compiler validation */}
+```js {expectedErrors: {'react-compiler': [5]}}
 function MyComponent() {
   const [didMount, setDidMount] = useState(false);
 
diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index f1bd6a3e8..ea951c114 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -134,7 +134,11 @@ function useCSS(rule) {
 
 #### 이것이 렌더링 중에 스타일을 주입하거나 useLayoutEffect를 사용하는 것보다 어떻게 더 나은가요? {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
 
+<<<<<<< HEAD
 렌더링 중에 스타일을 주입하고 React가 [non-blocking update](/reference/react/useTransition#marking-a-state-update-as-non-blocking-transition)를 처리하는 경우 브라우저는 컴포넌트 트리를 렌더링하는 동안 매 프레임마다 스타일을 다시 계산하므로 **매우 느릴 수 있습니다.**
+=======
+If you insert styles during rendering and React is processing a [non-blocking update,](/reference/react/useTransition#perform-non-blocking-updates-with-actions) the browser will recalculate the styles every single frame while rendering a component tree, which can be **extremely slow.**
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 `useInsertionEffect`는 컴포넌트에서 다른 Effect가 실행될 때 `<style>` 태그가 주입되어 있음을 보장하기 때문에 [`useLayoutEffect`](/reference/react/useLayoutEffect) 또는 [`useEffect`](/reference/react/useEffect)로 스타일을 주입하는 것보다 낫습니다. 그렇지 않으면 오래된 스타일로 인해 일반 Effects의 레이아웃 계산이 잘못될 수 있습니다.
 
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index 627640ebb..f7d5d5863 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -48,7 +48,13 @@ function Tooltip() {
 
 #### 매개변수 {/*parameters*/}
 
+<<<<<<< HEAD
 * `setup`: Effect의 로직이 포함된 함수입니다. setup 함수는 선택적으로 *cleanup* 함수를 반환할 수도 있습니다. 컴포넌트가 DOM에 추가되기 전에 React는 setup 함수를 실행합니다. `dependencies`가 변경되어 다시 렌더링 될 때마다, React는 (cleanup 함수를 제공했다면) 먼저 이전 값으로 cleanup 함수를 실행한 다음, 새로운 값으로 setup 함수를 실행합니다. 컴포넌트가 DOM에서 제거되기 전에 React는 cleanup 함수를 한 번 더 실행합니다.
+=======
+* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function.
+
+* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If you omit this argument, your Effect will re-run after every re-render of the component.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 * **선택사항** `dependencies`: `setup`코드 내에서 참조된 모든 반응형 값의 목록입니다. 반응형 값에는 props, state, 그리고 컴포넌트 본문에 직접 선언된 모든 변수와 함수가 포함됩니다. linter가 [React용으로 설정된](/learn/editor-setup#linting) 경우, 모든 반응형 값이 의존성으로 올바르게 지정되었는지 확인합니다. 의존성 목록에는 일정한 수의 항목이 있어야 하며 `[dep1, dep2, dep3]`와 같이 작성해야 합니다. React는 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교합니다. 의존성을 전혀 지정하지 않으면 컴포넌트를 다시 렌더링할 때마다 Effect가 다시 실행됩니다.
 
@@ -88,7 +94,8 @@ function Tooltip() {
 
 **이 작업은 브라우저가 화면을 다시 그리기 전에 모두 이루어져야 합니다.** 툴팁이 움직이는 걸 사용자에게 보이고 싶지 않으니까요. `useLayoutEffect`를 호출해서 브라우저가 화면을 다시 그리기 전에 레이아웃을 계산하세요.
 
-```js {5-8}
+{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */}
+```js {expectedErrors: {'react-compiler': [7]}} {5-8}
 function Tooltip() {
   const ref = useRef(null);
   const [tooltipHeight, setTooltipHeight] = useState(0); // 아직 실제 높이를 모릅니다.
@@ -188,7 +195,8 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js src/Tooltip.js active
+{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */}
+```js {expectedErrors: {'react-compiler': [11]}} src/Tooltip.js active
 import { useRef, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
@@ -338,7 +346,8 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js src/Tooltip.js active
+{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */}
+```js {expectedErrors: {'react-compiler': [11]}} src/Tooltip.js active
 import { useRef, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
@@ -485,7 +494,8 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js src/Tooltip.js active
+{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */}
+```js {expectedErrors: {'react-compiler': [11]}} src/Tooltip.js active
 import { useRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
@@ -628,7 +638,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js src/Tooltip.js active
+```js {expectedErrors: {'react-compiler': [10, 11]}} src/Tooltip.js active
 import { useRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index e2fcc16b5..d4b0235a6 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -12,6 +12,12 @@ const cachedValue = useMemo(calculateValue, dependencies)
 
 </Intro>
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useMemo` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
 <InlineToc />
 
 ---
@@ -143,7 +149,11 @@ console.timeEnd('filter array');
 
 #### 모든 곳에 useMemo를 추가해야 하나요? {/*should-you-add-usememo-everywhere*/}
 
+<<<<<<< HEAD
 이 사이트와 같이 대부분의 상호 작용이 거친 경우(페이지 또는 전체 섹션이 교체되는 것과 같이) 메모이제이션이 필요하지 않습니다. 반면, 앱이 그림 편집기와 비슷하고 대부분의 상호 작용이 세분화된 경우(도형 이동과 같은) 메모이제이션이 매우 유용할 수 있습니다.
+=======
+If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 `useMemo`로 최적화하는 것은 몇몇 경우에만 유용합니다.
 
@@ -219,7 +229,8 @@ export default function App() {
 
 ```
 
-```js src/TodoList.js active
+{/* TODO(@poteto) - investigate potential false positives in react compiler validation */}
+```js {expectedErrors: {'react-compiler': [5]}} src/TodoList.js active
 import { useMemo } from 'react';
 import { filterTodos } from './utils.js'
 
@@ -711,7 +722,7 @@ export default function TodoList({ todos, theme, tab }) {
 }
 ```
 
-```js src/List.js
+```js {expectedErrors: {'react-compiler': [5, 6]}} src/List.js
 import { memo } from 'react';
 
 const List = memo(function List({ items }) {
@@ -849,7 +860,7 @@ export default function TodoList({ todos, theme, tab }) {
 }
 ```
 
-```js src/List.js
+```js {expectedErrors: {'react-compiler': [5, 6]}} src/List.js
 import { memo } from 'react';
 
 const List = memo(function List({ items }) {
@@ -1364,7 +1375,7 @@ Object.is(temp1[2], temp2[2]); // ... 그리고 기타 모든 종속성들이 
 
 `Chart` 컴포넌트가 [`memo`](/reference/react/memo)로 감싸져 있다고 가정해보겠습니다. `ReportList` 컴포넌트가 다시 렌더링 될 때 목록의 모든 `Chart`를 다시 렌더링하는 것을 생략하고 싶을 것입니다. 그러나 반복문에서 `useMemo`를 호출할 수 없습니다.
 
-```js {5-11}
+```js {expectedErrors: {'react-compiler': [6]}} {5-11}
 function ReportList({ items }) {
   return (
     <article>
diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md
index bcc19c259..258ece29f 100644
--- a/src/content/reference/react/useRef.md
+++ b/src/content/reference/react/useRef.md
@@ -197,7 +197,7 @@ React는 컴포넌트의 본문이 [순수 함수처럼 동작하기](/learn/kee
 
 **렌더링 중에** ref를 읽거나 쓰면 이러한 기대가 깨집니다.
 
-```js {3-4,6-7}
+```js {expectedErrors: {'react-compiler': [4]}} {3-4,6-7}
 function MyComponent() {
   // ...
   // 🚩 Don't write a ref during rendering
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index f021a75ca..3dc8b05fd 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -163,7 +163,11 @@ function CheckoutForm() {
 }
 ```
 
+<<<<<<< HEAD
 `startTransition` 내에서 호출되는 함수를 "Actions"이라고 합니다. Action 내에서 상태를 업데이트하고(선택적으로) 사이드 이펙트를 수행할 수 있으며, 작업은 페이지에서 사용자 상호 작용을 차단하지 않고 백그라운드에서 수행됩니다. 하나의 Transition은 여러 개의 Action을 포함할 수 있으며, Transition이 진행되는 동안 UI는 계속 반응합니다. 예를 들어 사용자가 탭을 클릭했다가 마음이 바뀌어 다른 탭을 클릭하면 첫 번째 업데이트가 완료될 때까지 기다리지 않고 두 번째 클릭이 즉시 처리됩니다.
+=======
+The function passed to `startTransition` is called the "Action". You can update state and (optionally) perform side effects within an Action, and the work will be done in the background without blocking user interactions on the page. A Transition can include multiple Actions, and while a Transition is in progress, your UI stays responsive. For example, if the user clicks a tab but then changes their mind and clicks another tab, the second click will be immediately handled without waiting for the first update to finish.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 진행 중인 Transition에 대해 사용자에게 피드백을 제공하기 위해 `isPending` 상태는 `startTransition`을 처음 호출할 때 `true`로 전환되며, 모든 Action이 완료되어 최종 상태가 사용자에게 표시될 때까지 `true` 상태를 유지합니다. Transition은 Action 내의 사이드 이펙트가 완료되도록 보장하여 [원치 않는 로딩 표시기가 표시되지 않도록 합니다.](#preventing-unwanted-loading-indicators) 또한, Transition이 진행 중일 때 `useOptimistic`을 사용하여 즉각적인 피드백을 제공할 수 있습니다.
 
@@ -599,7 +603,7 @@ export default function TabButton({ action, children, isActive }) {
     <button onClick={() => {
       startTransition(async () => {
         // await the action that's passed in.
-        // This allows it to be either sync or async. 
+        // This allows it to be either sync or async.
         await action();
       });
     }}>
@@ -666,7 +670,7 @@ export default function TabButton({ action, children, isActive }) {
     <button onClick={async () => {
       startTransition(async () => {
         // await the action that's passed in.
-        // This allows it to be either sync or async. 
+        // This allows it to be either sync or async.
         await action();
       });
     }}>
@@ -684,7 +688,7 @@ export default function AboutTab() {
 }
 ```
 
-```js src/PostsTab.js
+```js {expectedErrors: {'react-compiler': [19, 20]}} src/PostsTab.js
 import { memo } from 'react';
 
 const PostsTab = memo(function PostsTab() {
@@ -744,7 +748,11 @@ b { display: inline-block; margin-right: 10px; }
 
 <Note>
 
+<<<<<<< HEAD
 컴포넌트에서 `action` Prop을 노출할 때는 Transition 내부에서 `await` 해야 합니다.
+=======
+When exposing an `action` prop from a component, you should `await` it inside the transition.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 이렇게 하면 `action` 콜백이 동기적이든 비동기적이든 상관없이 작동할 수 있으며, `action` 내부의 `await`을 추가적인 `startTransition`으로 감쌀 필요가 없습니다.
 
@@ -839,7 +847,7 @@ export default function AboutTab() {
 }
 ```
 
-```js src/PostsTab.js
+```js {expectedErrors: {'react-compiler': [19, 20]}} src/PostsTab.js
 import { memo } from 'react';
 
 const PostsTab = memo(function PostsTab() {
@@ -1775,7 +1783,11 @@ function setState() {
 
 `startTransition` 내부에서 `await`를 사용하면 상태 업데이트가 순서대로 발생하지 않을 수 있습니다.
 
+<<<<<<< HEAD
 이 예시에서 `updateQuantity` 함수는 서버에 요청을 보내 장바구니에서 항목의 수량을 업데이트하는 동작을 시뮬레이션합니다. 이 함수는 *이전 요청 후마다 다른 요청을 인위적으로 반환*하여 네트워크 요청에 대한 경쟁 상태(race condition)를 시뮬레이션합니다.
+=======
+In this example, the `updateQuantity` function simulates a request to the server to update the item's quantity in the cart. This function *artificially returns every other request after the previous* to simulate race conditions for network requests.
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 수량을 한 번 업데이트한 후, 빠르게 여러 번 업데이트를 시도해 보세요. 그러면 잘못된 총합이 표시될 수 있습니다
 
@@ -2005,7 +2017,7 @@ export default function Item({action}) {
     startTransition(() => {
       action(e.target.value);
     });
-  }  
+  }
   return (
     <div className="item">
       <span>Eras Tour Tickets</span>
diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md
index 0f8148649..69697816a 100644
--- a/src/content/reference/rsc/server-functions.md
+++ b/src/content/reference/rsc/server-functions.md
@@ -196,7 +196,11 @@ function UpdateName() {
 
 서버 함수 함께 `useActionState`를 사용하는 경우, React는 Hydration이 완료되기 전에 입력된 폼 제출을 자동으로 다시 실행합니다. 즉, 사용자는 앱이 Hydration 되기 전에도 앱과 상호작용을 할 수 있습니다.
 
+<<<<<<< HEAD
 자세한 내용은 [`useActionState`](/reference/react/useActionState) 문서를 참조하세요.
+=======
+For more, see the docs for [`useActionState`](/reference/react/useActionState).
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ### `useActionState`를 통한 점진적 향상 {/*progressive-enhancement-with-useactionstate*/}
 
@@ -220,4 +224,8 @@ function UpdateName() {
 
 <CodeStep step={2}>permalink</CodeStep>가 `useActionState`에 제공될 때, 자바스크립트 번들이 로드되기 전에 폼이 제출되면 React는 제공된 URL로 리디렉션합니다.
 
+<<<<<<< HEAD
 자세한 내용은 [`useActionState`](/reference/react/useActionState) 문서를 참조하세요.
+=======
+For more, see the docs for [`useActionState`](/reference/react/useActionState).
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
diff --git a/src/content/reference/rsc/use-server.md b/src/content/reference/rsc/use-server.md
index 354cce57a..7a082d68b 100644
--- a/src/content/reference/rsc/use-server.md
+++ b/src/content/reference/rsc/use-server.md
@@ -96,7 +96,14 @@ async function addToCart(data) {
 
 지원되는 직렬화 가능한 반환 값은 경계 클라이언트 컴포넌트의 [직렬화 가능한 Props](/reference/rsc/use-client#passing-props-from-server-to-client-components)와 동일합니다.
 
+<<<<<<< HEAD
 ## 사용법 {/*usage*/}
+=======
+Supported serializable return values are the same as [serializable props](/reference/rsc/use-client#serializable-types) for a boundary Client Component.
+
+
+## Usage {/*usage*/}
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ### Server Functions in forms {/*server-functions-in-forms*/}
 
diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md
index 9044d4f5a..ca52f6b17 100644
--- a/src/content/reference/rules/components-and-hooks-must-be-pure.md
+++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md
@@ -209,7 +209,7 @@ Props와 State 값을 렌더링 후에 업데이트되는 스냅샷으로 생각
 ### Props를 변경하지 마세요 {/*props*/}
 Props는 불변입니다. Props를 변경한다면 애플리케이션이 일관성 없는 출력을 생성하게 되며, 상황에 따라 작동할 수도 있고 안 할 수도 있기 때문에 디버깅이 어려워질 수 있습니다.
 
-```js {2}
+```js {expectedErrors: {'react-compiler': [2]}} {2}
 function Post({ item }) {
   item.url = new Url(item.url, base); // 🔴 Bad: 절대 Props를 직접 변경하지 마세요.
   return <Link url={item.url}>{item.title}</Link>;
@@ -232,7 +232,7 @@ const [stateVariable, setter] = useState(0);
 
 State 변수를 직접 변경하는 대신, `useState`에 의해 반환된 Setter 함수를 사용하여 변경해야 합니다. State 변수의 값을 변경하면 컴포넌트가 변경되지 않아 사용자는 이전 UI를 보게 됩니다. Setter 함수를 사용하면 React에 State가 변경되었으며 UI를 변경하기 위해 리렌더링을 대기열에 추가해야 한다는 것을 알립니다.
 
-```js {5}
+```js {expectedErrors: {'react-compiler': [2, 5]}} {5}
 function Counter() {
   const [count, setCount] = useState(0);
 
@@ -270,7 +270,7 @@ function Counter() {
 
 값이 Hook에 전달되면, 이를 수정해서는 안 됩니다. JSX의 Props와 마찬가지로 Hook에 전달된 값은 불변입니다.
 
-```js {4}
+```js {expectedErrors: {'react-compiler': [4]}} {4}
 function useIconStyle(icon) {
   const theme = useContext(ThemeContext);
   if (icon.enabled) {
@@ -331,7 +331,7 @@ JSX에 사용된 후에는 값을 변경하지 마세요. JSX가 생성되기 
 
 JSX를 표현식에서 사용할 때, React는 컴포넌트의 렌더링이 끝나기 전에 JSX를 성급하게 평가할 수 있습니다. 이는 JSX에 전달된 후에 값을 변경하면 React가 컴포넌트의 출력을 업데이트할지 여부를 알지 못하므로 오래된 UI로 이어질 수 있음을 의미합니다.
 
-```js {4}
+```js {expectedErrors: {'react-compiler': [4]}} {4}
 function Page({ colour }) {
   const styles = { colour, size: "large" };
   const header = <Header styles={styles} />;
diff --git a/src/content/reference/rules/react-calls-components-and-hooks.md b/src/content/reference/rules/react-calls-components-and-hooks.md
index 58a8a8a51..392e78bac 100644
--- a/src/content/reference/rules/react-calls-components-and-hooks.md
+++ b/src/content/reference/rules/react-calls-components-and-hooks.md
@@ -21,7 +21,7 @@ function BlogPost() {
 }
 ```
 
-```js {2}
+```js {expectedErrors: {'react-compiler': [2]}} {2}
 function BlogPost() {
   return <Layout>{Article()}</Layout>; // 🔴 Bad: 컴포넌트 함수를 직접 호출하지 마세요.
 }
@@ -51,7 +51,7 @@ Hook은 컴포넌트에 React 기능을 추가할 수 있게 합니다. Hook은
 
 Hook은 가능한 한 "정적"으로 유지되어야 합니다. 이는 Hook을 동적으로 변경해서는 안 된다는 의미입니다. 예를 들어 고차 Hook을 작성하면 안됩니다.
 
-```js {2}
+```js {expectedErrors: {'react-compiler': [2, 3]}} {2}
 function ChatInput() {
   const useDataWithLogging = withLogging(useData); // 🔴 Bad: 고차 Hook을 작성하지 마세요.
   const data = useDataWithLogging();
@@ -74,7 +74,7 @@ function useDataWithLogging() {
 
 Hook은 동적으로 사용해서도 안 됩니다. 예를 들어 Hook을 값으로 전달하여 컴포넌트에 의존성을 주입하는 대신,
 
-```js {2}
+```js {expectedErrors: {'react-compiler': [2]}} {2}
 function ChatInput() {
   return <Button useData={useDataWithLogging} /> // 🔴 Bad: Hook을 Props로 전달하지 마세요.
 }
diff --git a/src/hooks/usePendingRoute.ts b/src/hooks/usePendingRoute.ts
index 229a36e64..17d7525b4 100644
--- a/src/hooks/usePendingRoute.ts
+++ b/src/hooks/usePendingRoute.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/pages/404.js b/src/pages/404.js
index 113014a8b..3400d6815 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/pages/500.js b/src/pages/500.js
index f0a6e5088..09f1d7c07 100644
--- a/src/pages/500.js
+++ b/src/pages/500.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/pages/[[...markdownPath]].js b/src/pages/[[...markdownPath]].js
index bef4508df..cb2e23a38 100644
--- a/src/pages/[[...markdownPath]].js
+++ b/src/pages/[[...markdownPath]].js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 5431f87cc..80a0a0f86 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index c03cba2a8..4be0c5ddc 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx
index c8cf28ad8..67466a1d9 100644
--- a/src/pages/errors/[errorCode].tsx
+++ b/src/pages/errors/[errorCode].tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import {Fragment, useMemo} from 'react';
 import {Page} from 'components/Layout/Page';
 import {MDXComponents} from 'components/MDX/MDXComponents';
diff --git a/src/pages/errors/index.tsx b/src/pages/errors/index.tsx
index d7742f03a..0c154039c 100644
--- a/src/pages/errors/index.tsx
+++ b/src/pages/errors/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import ErrorDecoderPage from './[errorCode]';
 export default ErrorDecoderPage;
 export {getStaticProps} from './[errorCode]';
diff --git a/src/sidebarHome.json b/src/sidebarHome.json
index e986ce6e8..94bd7337e 100644
--- a/src/sidebarHome.json
+++ b/src/sidebarHome.json
@@ -14,6 +14,14 @@
       "title": "설치하기",
       "path": "/learn/installation"
     },
+    {
+      "title": "Setup",
+      "path": "/learn/setup"
+    },
+    {
+      "title": "React Compiler",
+      "path": "/learn/react-compiler"
+    },
     {
       "hasSectionHeader": true,
       "sectionHeader": "React 학습하기"
@@ -76,7 +84,27 @@
     },
     {
       "hasSectionHeader": true,
+<<<<<<< HEAD
       "sectionHeader": "참여하기"
+=======
+      "sectionHeader": "REACT COMPILER API"
+    },
+    {
+      "title": "Configuration",
+      "path": "/reference/react-compiler/configuration"
+    },
+    {
+      "title": "Directives",
+      "path": "/reference/react-compiler/directives"
+    },
+    {
+      "title": "Compiling Libraries",
+      "path": "/reference/react-compiler/compiling-libraries"
+    },
+    {
+      "hasSectionHeader": true,
+      "sectionHeader": "GET INVOLVED"
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
     },
     {
       "title": "React 커뮤니티",
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index aca75a736..0640213eb 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -53,11 +53,35 @@
         {
           "title": "React 개발자 도구",
           "path": "/learn/react-developer-tools"
+        }
+      ]
+    },
+    {
+      "title": "React Compiler",
+      "path": "/learn/react-compiler",
+      "canary": true,
+      "routes": [
+        {
+          "title": "Introduction",
+          "path": "/learn/react-compiler/introduction"
         },
         {
+<<<<<<< HEAD
           "title": "React 컴파일러",
           "path": "/learn/react-compiler",
           "canary": true
+=======
+          "title": "Installation",
+          "path": "/learn/react-compiler/installation"
+        },
+        {
+          "title": "Incremental Adoption",
+          "path": "/learn/react-compiler/incremental-adoption"
+        },
+        {
+          "title": "Debugging and Troubleshooting",
+          "path": "/learn/react-compiler/debugging"
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
         }
       ]
     },
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 9ea98232e..b8b300847 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -107,7 +107,7 @@
         {
           "title": "<Activity>",
           "path": "/reference/react/Activity",
-          "version": "experimental"
+          "version": "canary"
         },
         {
           "title": "<ViewTransition>",
@@ -127,7 +127,8 @@
         {
           "title": "cache",
           "path": "/reference/react/cache"
-        },        {
+        },
+        {
           "title": "captureOwnerStack",
           "path": "/reference/react/captureOwnerStack"
         },
@@ -326,7 +327,137 @@
     },
     {
       "hasSectionHeader": true,
+<<<<<<< HEAD
       "sectionHeader": "React의 규칙"
+=======
+      "sectionHeader": "React Compiler"
+    },
+    {
+      "title": "Configuration",
+      "path": "/reference/react-compiler/configuration",
+      "routes": [
+        {
+          "title": "compilationMode",
+          "path": "/reference/react-compiler/compilationMode"
+        },
+        {
+          "title": "gating",
+          "path": "/reference/react-compiler/gating"
+        },
+        {
+          "title": "logger",
+          "path": "/reference/react-compiler/logger"
+        },
+        {
+          "title": "panicThreshold",
+          "path": "/reference/react-compiler/panicThreshold"
+        },
+        {
+          "title": "target",
+          "path": "/reference/react-compiler/target"
+        }
+      ]
+    },
+    {
+      "title": "Directives",
+      "path": "/reference/react-compiler/directives",
+      "routes": [
+        {
+          "title": "\"use memo\"",
+          "path": "/reference/react-compiler/directives/use-memo"
+        },
+        {
+          "title": "\"use no memo\"",
+          "path": "/reference/react-compiler/directives/use-no-memo"
+        }
+      ]
+    },
+    {
+      "title": "Compiling Libraries",
+      "path": "/reference/react-compiler/compiling-libraries"
+    },
+    {
+      "hasSectionHeader": true,
+      "sectionHeader": "eslint-plugin-react-hooks"
+    },
+    {
+      "title": "Lints",
+      "path": "/reference/eslint-plugin-react-hooks",
+      "routes": [
+        {
+          "title": "component-hook-factories",
+          "path": "/reference/eslint-plugin-react-hooks/lints/component-hook-factories"
+        },
+        {
+          "title": "config",
+          "path": "/reference/eslint-plugin-react-hooks/lints/config"
+        },
+        {
+          "title": "error-boundaries",
+          "path": "/reference/eslint-plugin-react-hooks/lints/error-boundaries"
+        },
+        {
+          "title": "exhaustive-deps",
+          "path": "/reference/eslint-plugin-react-hooks/lints/exhaustive-deps"
+        },
+        {
+          "title": "gating",
+          "path": "/reference/eslint-plugin-react-hooks/lints/gating"
+        },
+        {
+          "title": "globals",
+          "path": "/reference/eslint-plugin-react-hooks/lints/globals"
+        },
+        {
+          "title": "immutability",
+          "path": "/reference/eslint-plugin-react-hooks/lints/immutability"
+        },
+        {
+          "title": "incompatible-library",
+          "path": "/reference/eslint-plugin-react-hooks/lints/incompatible-library"
+        },
+        {
+          "title": "preserve-manual-memoization",
+          "path": "/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization"
+        },
+        {
+          "title": "purity",
+          "path": "/reference/eslint-plugin-react-hooks/lints/purity"
+        },
+        {
+          "title": "refs",
+          "path": "/reference/eslint-plugin-react-hooks/lints/refs"
+        },
+        {
+          "title": "rules-of-hooks",
+          "path": "/reference/eslint-plugin-react-hooks/lints/rules-of-hooks"
+        },
+        {
+          "title": "set-state-in-effect",
+          "path": "/reference/eslint-plugin-react-hooks/lints/set-state-in-effect"
+        },
+        {
+          "title": "set-state-in-render",
+          "path": "/reference/eslint-plugin-react-hooks/lints/set-state-in-render"
+        },
+        {
+          "title": "static-components",
+          "path": "/reference/eslint-plugin-react-hooks/lints/static-components"
+        },
+        {
+          "title": "unsupported-syntax",
+          "path": "/reference/eslint-plugin-react-hooks/lints/unsupported-syntax"
+        },
+        {
+          "title": "use-memo",
+          "path": "/reference/eslint-plugin-react-hooks/lints/use-memo"
+        }
+      ]
+    },
+    {
+      "hasSectionHeader": true,
+      "sectionHeader": "Rules of React"
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
     },
     {
       "title": "개요",
diff --git a/src/siteConfig.js b/src/siteConfig.js
index 4f777d1a2..820c9640a 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/types/docsearch-react-modal.d.ts b/src/types/docsearch-react-modal.d.ts
index 568ffed80..f169f0364 100644
--- a/src/types/docsearch-react-modal.d.ts
+++ b/src/types/docsearch-react-modal.d.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/utils/analytics.ts b/src/utils/analytics.ts
index c2cc623b9..bd5b5f600 100644
--- a/src/utils/analytics.ts
+++ b/src/utils/analytics.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/utils/compileMDX.ts b/src/utils/compileMDX.ts
index be770c29a..807b50da5 100644
--- a/src/utils/compileMDX.ts
+++ b/src/utils/compileMDX.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import {LanguageItem} from 'components/MDX/LanguagesContext';
 import {MDXComponents} from 'components/MDX/MDXComponents';
 
diff --git a/src/utils/finishedTranslations.ts b/src/utils/finishedTranslations.ts
index 6f509f0b5..1bd55637a 100644
--- a/src/utils/finishedTranslations.ts
+++ b/src/utils/finishedTranslations.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 // This is a list of languages with enough translated content.
 // Add more languages here when they have enough content.
 // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
diff --git a/src/utils/forwardRefWithAs.tsx b/src/utils/forwardRefWithAs.tsx
index eddcda2da..3709e3b45 100644
--- a/src/utils/forwardRefWithAs.tsx
+++ b/src/utils/forwardRefWithAs.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/utils/prepareMDX.js b/src/utils/prepareMDX.js
index e295ba687..84d30256e 100644
--- a/src/utils/prepareMDX.js
+++ b/src/utils/prepareMDX.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/utils/processShim.js b/src/utils/processShim.js
index 7d8454988..915a9ea33 100644
--- a/src/utils/processShim.js
+++ b/src/utils/processShim.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/utils/rafShim.js b/src/utils/rafShim.js
index 9c3097d8f..f4984da83 100644
--- a/src/utils/rafShim.js
+++ b/src/utils/rafShim.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/utils/rss.js b/src/utils/rss.js
index 29e5511ea..82764351c 100644
--- a/src/utils/rss.js
+++ b/src/utils/rss.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/src/utils/toCommaSeparatedList.tsx b/src/utils/toCommaSeparatedList.tsx
index e95ee1799..affa1970a 100644
--- a/src/utils/toCommaSeparatedList.tsx
+++ b/src/utils/toCommaSeparatedList.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/tailwind.config.js b/tailwind.config.js
index f31a24516..9450cfa59 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
diff --git a/yarn.lock b/yarn.lock
index 1dcb1446a..6a358a1d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2521,12 +2521,12 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-react-compiler@19.0.0-beta-e552027-20250112:
-  version "19.0.0-beta-e552027-20250112"
-  resolved "https://registry.yarnpkg.com/babel-plugin-react-compiler/-/babel-plugin-react-compiler-19.0.0-beta-e552027-20250112.tgz#f06f0436420bd09df5abf37337ecd8fb43b0d847"
-  integrity sha512-pUTT0mAZ4XLewC6bvqVeX015nVRLVultcSQlkzGdC10G6YV6K2h4E7cwGlLAuLKWTj3Z08mTO9uTnPP/opUBsg==
+babel-plugin-react-compiler@^19.1.0-rc.3:
+  version "19.1.0-rc.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-compiler/-/babel-plugin-react-compiler-19.1.0-rc.3.tgz#45e5a282a2460b3701971e5eb8310a90a7919022"
+  integrity sha512-mjRn69WuTz4adL0bXGx8Rsyk1086zFJeKmes6aK0xPuK3aaXmDJdLHqwKKMrpm6KAI1MCoUK72d2VeqQbu8YIA==
   dependencies:
-    "@babel/types" "^7.19.0"
+    "@babel/types" "^7.26.0"
 
 bail@^1.0.0:
   version "1.0.5"
@@ -2733,6 +2733,14 @@ ccount@^2.0.0:
   resolved "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz"
   integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
 
+chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^2.0.0, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
@@ -2742,6 +2750,7 @@ chalk@^2.0.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+<<<<<<< HEAD
 chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -2755,6 +2764,8 @@ chalk@^5.4.1:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.4.1.tgz#1b48bf0963ec158dce2aacf69c093ae2dd2092d8"
   integrity sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==
 
+=======
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 character-entities-html4@^1.0.0:
   version "1.1.4"
   resolved "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz"
@@ -3872,6 +3883,7 @@ eslint-plugin-jsx-a11y@^6.4.1:
     safe-regex-test "^1.0.3"
     string.prototype.includes "^2.0.0"
 
+<<<<<<< HEAD
 eslint-plugin-mark@^0.1.0-canary.2:
   version "0.1.0-canary.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-mark/-/eslint-plugin-mark-0.1.0-canary.2.tgz#b7b05eb6201aab0f3225c99f1c7274c4a0fde3e3"
@@ -3881,6 +3893,11 @@ eslint-plugin-mark@^0.1.0-canary.2:
     "@types/mdast" "^4.0.4"
     cheerio "^1.0.0"
     emoji-regex "^10.4.0"
+=======
+"eslint-plugin-local-rules@link:eslint-local-rules":
+  version "0.0.0"
+  uid ""
+>>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 eslint-plugin-react-compiler@^19.0.0-beta-e552027-20250112:
   version "19.0.0-beta-e552027-20250112"