Merge branch 'main' into hectahertz/selectpanel-content-visibility-perf

Author: hectahertz

.changeset/gold-snakes-smash.md

@@ -0,0 +1,5 @@
+---
+'@primer/mcp': minor
+---
+
+Adds support for fetching docs via the `/llms.txt` endpoint per-component

.changeset/pagelayout-resizable-persistence.md

@@ -0,0 +1,45 @@
+---
+'@primer/react': minor
+---
+
+Add `currentWidth` and `onResizeEnd` props to PageLayout.Pane for controlled resizable width
+
+The `PageLayout.Pane` component now supports controlled width:
+
+- `onResizeEnd` — callback fired when a resize operation ends (pointer release or keyboard key up). Replaces localStorage persistence. Requires `currentWidth`.
+- `currentWidth` — sets the current displayed width in pixels (`number | undefined`). Pass `undefined` when the persisted value hasn't loaded yet. Requires `onResizeEnd`.
+
+Both props must be provided together (enforced by TypeScript). `resizable` remains a plain `boolean` prop.
+
+These props are only meaningful when `resizable={true}` — without it, no drag handle renders so `onResizeEnd` never fires.
+
+**New export:**
+
+- `defaultPaneWidth` — Record of preset width values: `{small: 256, medium: 296, large: 320}`
+
+**Example usage:**
+
+```tsx
+import {PageLayout, defaultPaneWidth} from '@primer/react'
+
+// Default behavior (unchanged) — localStorage persistence
+<PageLayout.Pane resizable />
+
+// Controlled width with custom persistence
+const [width, setWidth] = useState(defaultPaneWidth.medium)
+<PageLayout.Pane
+  resizable
+  currentWidth={width}
+  onResizeEnd={(newWidth) => {
+    setWidth(newWidth)
+    myStorage.save('pane-width', newWidth)
+  }}
+/>
+
+// Async load — pass undefined until value is fetched
+<PageLayout.Pane
+  resizable
+  currentWidth={savedWidth ?? undefined}
+  onResizeEnd={handleResizeEnd}
+/>
+```

.changeset/red-pugs-sing.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update PageHeader story to have semantic headings

.changeset/sixty-keys-perform.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix: ActionBar overflow menu not closing on select

package-lock.json

@@ -21,10 +21,6 @@ function idToSlug(id: string): string {
     return 'dialog'
   }
 
-  if (id.startsWith('skeleton')) {
-    return 'skeleton-loaders'
-  }
-
   return id.replaceAll('_', '-')
 }
 

packages/mcp/src/primer.ts

@@ -111,12 +111,27 @@ server.registerTool(
     })
     if (!match) {
       return {
-        content: [
-          {
-            type: 'text',
-            text: `There is no component named \`${name}\` in the @primer/react package. For a full list of components, use the \`list_components\` tool.`,
-          },
-        ],
+        isError: true,
+        errorMessage: `There is no component named \`${name}\` in the @primer/react package. For a full list of components, use the \`list_components\` tool.`,
+        content: [],
+      }
+    }
+
+    const llmsUrl = new URL(`/product/components/${match.slug}/llms.txt`, 'https://primer.style')
+    const llmsResponse = await fetch(llmsUrl)
+    if (llmsResponse.ok) {
+      try {
+        const llmsText = await llmsResponse.text()
+        return {
+          content: [
+            {
+              type: 'text',
+              text: llmsText,
+            },
+          ],
+        }
+      } catch (_: unknown) {
+        // If there's an error fetching or processing the llms.txt, we fall back to the regular documentation
       }
     }
 
@@ -691,13 +706,7 @@ server.registerTool(
     inputSchema: {
       surroundingText: z.string().describe('Text surrounding the image, relevant to the image.'),
       alt: z.string().describe('The alt text of the image being evaluated'),
-      image: z
-        .union([
-          z.instanceof(File).describe('The image src file being evaluated'),
-          z.url().describe('The URL of the image src being evaluated'),
-          z.string().describe('The file path of the image src being evaluated'),
-        ])
-        .describe('The image file, file path, or URL being evaluated'),
+      image: z.string().describe('The image URL or file path being evaluated'),
     },
   },
   async ({surroundingText, alt, image}) => {

packages/mcp/src/server.ts

@@ -67,7 +67,11 @@ export const Default = () => (
     <ActionBar.IconButton icon={QuoteIcon} aria-label="Insert Quote"></ActionBar.IconButton>
     <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
     <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
+    <ActionBar.IconButton
+      icon={TasklistIcon}
+      aria-label="Task List"
+      onClick={() => alert('Task List clicked')}
+    ></ActionBar.IconButton>
   </ActionBar>
 )
 

packages/react/src/ActionBar/ActionBar.stories.tsx

@@ -3,11 +3,9 @@ import React, {useState, useCallback, useRef, forwardRef, useId} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
 import {ActionList, type ActionListItemProps} from '../ActionList'
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
-import {useOnEscapePress} from '../hooks/useOnEscapePress'
 import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
 import {useResizeObserver} from '../hooks/useResizeObserver'
 
-import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
 import type {IconButtonProps} from '../Button'
 import {IconButton} from '../Button'
 import {ActionMenu} from '../ActionMenu'
@@ -322,8 +320,6 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     if (!Number.isNaN(parsed)) setComputedGap(parsed)
   }, [gap])
   const moreMenuRef = useRef<HTMLLIElement>(null)
-  const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
-  const containerRef = React.useRef<HTMLUListElement>(null)
 
   useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => {
     const navWidth = resizeObserverEntries[0].contentRect.width
@@ -343,29 +339,6 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     [menuItemIds],
   )
 
-  const [isWidgetOpen, setIsWidgetOpen] = useState(false)
-
-  const closeOverlay = React.useCallback(() => {
-    setIsWidgetOpen(false)
-  }, [setIsWidgetOpen])
-
-  const focusOnMoreMenuBtn = React.useCallback(() => {
-    moreMenuBtnRef.current?.focus()
-  }, [])
-
-  useOnEscapePress(
-    (event: KeyboardEvent) => {
-      if (isWidgetOpen) {
-        event.preventDefault()
-        closeOverlay()
-        focusOnMoreMenuBtn()
-      }
-    },
-    [isWidgetOpen],
-  )
-
-  useOnOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [moreMenuBtnRef]})
-
   useFocusZone({
     containerRef: listRef,
     bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
@@ -415,11 +388,8 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                       return (
                         <ActionList.Item
                           key={label}
-                          // eslint-disable-next-line primer-react/prefer-action-list-item-onselect
-                          onClick={(event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
-                            closeOverlay()
-                            focusOnMoreMenuBtn()
-                            typeof onClick === 'function' && onClick(event)
+                          onSelect={event => {
+                            typeof onClick === 'function' && onClick(event as React.MouseEvent<HTMLElement>)
                           }}
                           disabled={disabled}
                         >
@@ -469,8 +439,6 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                                 <ActionList.Item
                                   key={key}
                                   onSelect={event => {
-                                    closeOverlay()
-                                    focusOnMoreMenuBtn()
                                     typeof onClick === 'function' && onClick(event as React.MouseEvent<HTMLElement>)
                                   }}
                                   disabled={disabled}

packages/react/src/ActionBar/ActionBar.tsx

@@ -362,7 +362,9 @@ export const WithPageLayout = () => {
       <PageLayout.Pane>
         <div className={classes.PaneStack}>
           <div>
-            <Text className={classes.PaneSectionHeading}>Assignees</Text>
+            <Heading as="h2" className={classes.PaneSectionHeading}>
+              Assignees
+            </Heading>
             <Text className={classes.PaneMetaTextWithButton}>
               No one —
               <Button
@@ -378,7 +380,9 @@ export const WithPageLayout = () => {
           </div>
           <div className={classes.PaneSeparator} role="separator"></div>
           <div>
-            <Text className={classes.PaneSectionHeading}>Labels</Text>
+            <Heading as="h2" className={classes.PaneSectionHeading}>
+              Labels
+            </Heading>
             <Text className={classes.PaneMetaText}>None yet</Text>
           </div>
         </div>