[docs-infra] Add @focus and Linter to Automatically Apply

.circleci/orbs/code-infra.yml

@@ -82,6 +82,9 @@ commands:
   eslint:
     description: 'Runs ESLint on the codebase'
     steps:
+      - run:
+          name: Build docs-infra for ESLint plugins
+          command: pnpm run docs:lib
       - restore_cache:
           keys:
             - eslint-cache-{{ checksum "pnpm-lock.yaml" }}

docs/app/bench/docs-infra/components/code-highlighter/demos/CodeContent.tsx

@@ -10,7 +10,9 @@ import styles from './CodeContent.module.css';
 import '../../../../../docs-infra/components/code-highlighter/demos/syntax.css';
 
 export function CodeContent(props: ContentProps<{}>) {
+  // @focus-start @padding 1
   const code = useCode(props, { preClassName: styles.codeBlock });
 
   return <div className={styles.code}>{code.selectedFile}</div>;
+  // @focus-end
 }

docs/app/bench/docs-infra/components/code-highlighter/demos/CodeContentLoading.tsx

@@ -9,9 +9,11 @@ import '../../../../../docs-infra/components/code-highlighter/demos/syntax.css';
 export function CodeContentLoading(props: ContentLoadingProps<{}>) {
   return (
     <div>
+      {/* @focus-start */}
       <div className={styles.code}>
         <pre className={styles.codeBlock}>{props.source}</pre>
       </div>
+      {/* @focus-end */}
     </div>
   );
 }

docs/app/bench/docs-infra/components/code-highlighter/demos/code/page.tsx

@@ -11,6 +11,7 @@ const sourceParser = createParseSource();
 
 export default function Page() {
   return (
+    // @focus-start
     <CodeHighlighter
       Content={CodeContent}
       ContentLoading={CodeContentLoading}
@@ -19,5 +20,6 @@ export default function Page() {
     >
       {code}
     </CodeHighlighter>
+    // @focus-end
   );
 }

docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeController.tsx

@@ -5,11 +5,13 @@ import { CodeControllerContext } from '@mui/internal-docs-infra/CodeControllerCo
 import type { ControlledCode } from '@mui/internal-docs-infra/CodeHighlighter/types';
 
 export function CodeController({ children }: { children: React.ReactNode }) {
+  // @focus-start @padding 1
   const [code, setCode] = React.useState<ControlledCode | undefined>(undefined);
 
   const contextValue = React.useMemo(() => ({ code, setCode }), [code, setCode]);
 
   return (
     <CodeControllerContext.Provider value={contextValue}>{children}</CodeControllerContext.Provider>
   );
+  // @focus-end
 }

docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditor.tsx

@@ -20,6 +20,7 @@ function greet(name) {
 
 export function CodeEditor() {
   return (
+    // @focus-start
     <CodeProvider>
       <CodeController>
         <CodeHighlighter
@@ -31,5 +32,6 @@ export function CodeEditor() {
         />
       </CodeController>
     </CodeProvider>
+    // @focus-end
   );
 }

docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.module.css

@@ -27,15 +27,26 @@
   display: flex;
 }
 .code {
-  padding: 6px;
+  padding: 6px 0;
 }
 
 .codeBlock {
   margin: 0;
-  padding: 6px;
+  padding: 6px 0;
   overflow-x: auto;
 }
 
+/* Code element inside pre — block so frames stretch to the widest line */
+.codeBlock :global(code) {
+  display: block;
+  min-width: fit-content;
+}
+
+.codeBlock :global(.frame) {
+  display: block;
+  padding: 0 12px;
+}
+
 .codeBlock:focus-visible {
   outline: none;
 }

docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.tsx

@@ -10,6 +10,7 @@ import styles from './CodeEditorContent.module.css';
 import '../../../code-highlighter/demos/syntax.css';
 
 export function CodeEditorContent(props: ContentProps<object>) {
+  // @focus-start @padding 1
   const preRef = React.useRef<HTMLPreElement | null>(null);
   const code = useCode(props, { preClassName: styles.codeBlock, preRef });
 
@@ -47,4 +48,5 @@ export function CodeEditorContent(props: ContentProps<object>) {
       <div className={styles.code}>{code.selectedFile}</div>
     </div>
   );
+  // @focus-end
 }

docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoController.tsx

@@ -27,6 +27,7 @@ function Runner({ code }: { code: string }) {
 }
 
 export function DemoController({ children }: { children: React.ReactNode }) {
+  // @focus-start @padding 1
   const [code, setCode] = React.useState<ControlledCode | undefined>(undefined);
 
   const components = React.useMemo(
@@ -56,4 +57,5 @@ export function DemoController({ children }: { children: React.ReactNode }) {
   return (
     <CodeControllerContext.Provider value={contextValue}>{children}</CodeControllerContext.Provider>
   );
+  // @focus-end
 }

docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLive.tsx

@@ -5,10 +5,12 @@ import { DemoCheckboxBasic } from './demo-basic';
 
 export function DemoLive() {
   return (
+    // @focus-start
     <CodeProvider>
       <DemoController>
         <DemoCheckboxBasic />
       </DemoController>
     </CodeProvider>
+    // @focus-end
   );
 }

docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.module.css

@@ -62,15 +62,26 @@
 }
 
 .code {
-  padding: 10px 6px;
+  padding: 10px 0;
 }
 
 .codeBlock {
   margin: 0;
-  padding: 6px;
+  padding: 6px 0;
   overflow-x: auto;
 }
 
+/* Code element inside pre — block so frames stretch to the widest line */
+.codeBlock :global(code) {
+  display: block;
+  min-width: fit-content;
+}
+
+.codeBlock :global(.frame) {
+  display: block;
+  padding: 0 12px;
+}
+
 .codeBlock:focus-visible {
   outline: none;
 }

docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.tsx

@@ -16,6 +16,7 @@ const variantNames: Record<string, string | undefined> = {
 };
 
 export function DemoLiveContent(props: ContentProps<object>) {
+  // @focus-start @padding 1
   const preRef = React.useRef<HTMLPreElement | null>(null);
   const demo = useDemo(props, { preClassName: styles.codeBlock, preRef });
 
@@ -85,4 +86,5 @@ export function DemoLiveContent(props: ContentProps<object>) {
       </div>
     </div>
   );
+  // @focus-end
 }

docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/CheckboxBasic.tsx

@@ -4,8 +4,10 @@ import { Checkbox } from '@/components/Checkbox';
 export default function CheckboxBasic() {
   return (
     <div>
+      {/* @focus-start */}
       <Checkbox defaultChecked />
       <p style={{ color: '#CA244D' }}>Type Whatever You Want Below</p>
+      {/* @focus-end */}
     </div>
   );
 }

docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileContent.tsx

@@ -10,6 +10,7 @@ import styles from '../code-editor/CodeEditorContent.module.css';
 import '../../../code-highlighter/demos/syntax.css';
 
 export function MultiFileContent(props: ContentProps<object>) {
+  // @focus-start @padding 1
   const preRef = React.useRef<HTMLPreElement | null>(null);
   const code = useCode(props, { preClassName: styles.codeBlock, preRef });
 
@@ -43,4 +44,5 @@ export function MultiFileContent(props: ContentProps<object>) {
       <div className={styles.code}>{code.selectedFile}</div>
     </div>
   );
+  // @focus-end
 }

docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileEditor.tsx

@@ -43,6 +43,7 @@ p {
 
 export function MultiFileEditor() {
   return (
+    // @focus-start
     <CodeProvider>
       <CodeController>
         <CodeHighlighter
@@ -54,5 +55,6 @@ export function MultiFileEditor() {
         />
       </CodeController>
     </CodeProvider>
+    // @focus-end
   );
 }

docs/app/docs-infra/components/code-highlighter/demos/CodeBlock.tsx

@@ -19,6 +19,7 @@ export function Code({
   fileName?: string;
 }) {
   return (
+    // @focus-start
     <CodeHighlighter
       language={language}
       fileName={fileName}
@@ -27,5 +28,6 @@ export function Code({
     >
       {children}
     </CodeHighlighter>
+    // @focus-end
   );
 }

docs/app/docs-infra/components/code-highlighter/demos/CodeContent.module.css

@@ -56,15 +56,26 @@
 }
 
 .code {
-  padding: 10px 6px;
+  padding: 10px 0;
 }
 
 .codeBlock {
   margin: 0;
-  padding: 6px;
+  padding: 6px 0;
   overflow-x: auto;
 }
 
+/* Code element inside pre — block so frames stretch to the widest line */
+.codeBlock :global(code) {
+  display: block;
+  min-width: fit-content;
+}
+
+.codeBlock :global(.frame) {
+  display: block;
+  padding: 0 12px;
+}
+
 .codeBlock :global(.frame[data-lined]) {
   display: block;
   white-space: normal;
@@ -75,27 +86,55 @@
   white-space: pre;
 }
 
+/* Highlighted frames get rounded corners and background */
+.codeBlock :global(.frame[data-frame-type='highlighted']),
+.codeBlock :global(.frame[data-frame-type='highlighted-unfocused']) {
+  background: #ebe4ff;
+  border-radius: 8px;
+  margin: 0 6px;
+  padding: 0 6px;
+}
+
+/* Line-level highlight inside a frame (nested emphasis) */
 .codeBlock :global(.line[data-hl]) {
   background: #ebe4ff;
   margin: 0 -6px;
   padding: 0 6px;
 }
 
-.codeBlock :global(:not(.line)[data-hl]) {
-  background: #e1d9ff;
+.codeBlock :global(mark) {
+  background: #ebe4ff;
   border-radius: 4px;
 }
 
+.codeBlock :global(mark[data-hl]) {
+  background: #e1d9ff;
+}
+
+.codeBlock :global(mark[data-hl='strong']) {
+  background: #d4c8ff;
+}
+
+.codeBlock :global(mark[data-hl-part='start']) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.codeBlock :global(mark[data-hl-part='middle']) {
+  border-radius: 0;
+}
+
+.codeBlock :global(mark[data-hl-part='end']) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .codeBlock :global(.line[data-hl='strong']) {
   background: #e1d9ff;
   margin: 0 -6px;
   padding: 0 6px;
 }
 
-.codeBlock :global(.line[data-hl='strong'][data-hl-position='end']) {
-  position: relative;
-}
-
 .codeBlock :global(.line[data-hl-position='single']) {
   border-radius: 8px;
 }
@@ -110,16 +149,6 @@
   border-bottom-right-radius: 8px;
 }
 
-.codeBlock :global(.line[data-hl]:has(+ .line[data-hl='strong'][data-hl-position='start'])) {
-  margin-bottom: -8px;
-  padding-bottom: 8px;
-}
-
-.codeBlock :global(.line[data-hl='strong'][data-hl-position='end']) + :global(.line[data-hl]) {
-  margin-top: -8px;
-  padding-top: 8px;
-}
-
 .codeBlock :global(.line[data-hl-description])::after {
   content: attr(data-hl-description);
   float: right;
@@ -129,3 +158,21 @@
   padding: 2px 4px;
   margin-right: -6px;
 }
+
+.codeBlock :global(.frame[data-frame-description])::before {
+  content: attr(data-frame-description);
+  float: right;
+  background: #8145b5;
+  border-radius: 8px;
+  color: white;
+  padding: 2px 4px;
+}
+
+/* Truncated frames: adjust rounding so visible/hidden halves connect */
+.codeBlock :global(.frame[data-frame-truncated='visible']) {
+  border-radius: 8px 8px 0 0;
+}
+
+.codeBlock :global(.frame[data-frame-truncated='hidden']) {
+  border-radius: 0 0 8px 8px;
+}

docs/app/docs-infra/components/code-highlighter/demos/CodeContent.tsx

@@ -16,6 +16,7 @@ const variantNames: Record<string, string | undefined> = {
 };
 
 export function CodeContent(props: ContentProps<object>) {
+  // @focus-start
   const code = useCode(props, { preClassName: styles.codeBlock });
 
   const hasJsTransform = code.availableTransforms.includes('js');
@@ -85,4 +86,5 @@ export function CodeContent(props: ContentProps<object>) {
       </div>
     </div>
   );
+  // @focus-end
 }