umberto 10.6.1 → 10.7.0

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 Changelog
 =========
 
+## [10.7.0](https://github.com/cksource/umberto/compare/v10.6.1...v10.7.0) (July 2, 2026)
+
+### Features
+
+* Enabled MCP install menu in the Kapa widget.
+
+### Bug fixes
+
+* Fixed scrolling to a section in the Gloria theme when navigating to an anchor without a full page reload — for example, changing the anchor in the address bar, using the browser's back/forward buttons, or opening a link to a section on the current page. The target heading is now offset below the sticky header instead of being hidden beneath it.
+* Moved `chokidar` from `devDependencies` to `dependencies`. It is imported at runtime by the file watcher (`src/tasks/watcher.js`), which ships with the package, so it must be installed for consumers. Previously it resolved only by chance through a hoisted copy in the consumer's tree, which fails when the consumer enables pnpm's `enableGlobalVirtualStore` and the package is linked from the global store, outside the consumer's `node_modules`.
+
+### Other changes
+
+* The tabbed content component now sets a `data-tab-label` attribute on each tab panel, carrying the label of its tab. This exposes the label to tools that process the rendered HTML, where it otherwise lives only inside the tab button.
+
+
 ## [10.6.1](https://github.com/cksource/umberto/compare/v10.6.0...v10.6.1) (June 18, 2026)
 
 ### Other changes
@@ -37,13 +53,6 @@ Changelog
 
 * Added the Call for feedback component for documentation pages.
 
-
-## [10.4.1](https://github.com/cksource/umberto/compare/v10.4.0...v10.4.1) (April 13, 2026)
-
-### Bug fixes
-
-* Fixed URL in the dropdown for LTS item to have absolute URL to pass documentation validation.
-
 ---
 
 To see all releases, visit the [release page](https://github.com/cksource/umberto/releases).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "10.6.1",
+  "version": "10.7.0",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "type": "module",
@@ -20,6 +20,7 @@
     "@minify-html/node": "^0.17.1",
     "@vscode/markdown-it-katex": "^1.1.2",
     "babel-loader": "^10.0.0",
+    "chokidar": "^4.0.3",
     "css-select": "^6.0.0",
     "dom-serializer": "^2.0.0",
     "domhandler": "^5.0.3",

package/themes/umberto/layout/gloria/_components/tabs/index.pug

@@ -70,6 +70,7 @@ mixin tabs({ id: tabsId, ariaLabel = 'Tabbed content', className, align = 'left'
 				aria-labelledby=`${idPrefix}-${ id }-tab`
 				aria-hidden=tab.active ? 'false' : 'true'
 				data-tab-id=id
+				data-tab-label=tab.label
 				class={
 					[className]: !!className,
 					'is-spaced': tab.spaced,

package/themes/umberto/layout/gloria/_modules/kapa/index.pug

@@ -139,11 +139,32 @@ mixin load-kapa-script( kapa )
 			return projectConfig.sourceGroupIds.join( ',' );
 		}
 
+		function getMcpServerUrl() {
+			const defaultMcpServerUrl = kapa.default.mcpServerUrl || null;
+
+			if ( !projectConfig ) {
+				return defaultMcpServerUrl;
+			}
+
+			if ( !projectConfig.mcpServerUrl ) {
+				return defaultMcpServerUrl;
+			}
+
+			return projectConfig.mcpServerUrl;
+		}
+
 		attributes[ 'data-modal-title' ] = getModalTitle( projectConfig );
 		attributes[ 'data-modal-ask-ai-input-placeholder' ] = getQuestionPlaceholder();
 		attributes[ 'data-modal-example-questions' ] = getExampleQuestions();
 		attributes[ 'data-source-group-ids-include' ] = getSourceGroupIds();
 
+		const mcpServerUrl = getMcpServerUrl();
+
+		if ( mcpServerUrl ) {
+			attributes[ 'data-mcp-enabled' ] = 'true';
+			attributes[ 'data-mcp-server-url' ] = mcpServerUrl;
+		}
+
 	script&attributes(attributes)
 
 	style#custom_kapa_styles

package/themes/umberto/src/gloria/css/layout/_base.scss

@@ -5,6 +5,10 @@
 		height: 100%;
 		overscroll-behavior-y: none; /* Prevent vertical bounce, allow horizontal trackpad gestures. */
 		overflow-x: hidden;
+
+		/* Offset native fragment navigation (anchor jumps, pasting a hash URL) below the
+		   sticky header. `--header-height` is kept up to date by the header module. */
+		scroll-padding-top: calc(var(--header-height, 0px) + 32px);
 	}
 
 	body {

package/themes/umberto/src/gloria/js/components/hash-link.js

@@ -18,6 +18,10 @@ export class HashLink extends BaseComponent {
 		// Handle initial hash link navigation if present in the URL
 		this._handleInitialHash();
 
+		// Handle hash changes on an already-loaded page (e.g. editing the hash in the
+		// address bar or browser back/forward navigation).
+		this._handleHashChange();
+
 		// Add click event listener to handle hash link clicks
 		document.addEventListener( 'click', event => {
 			const target = event.target.closest( 'a[href^="#"]' );
@@ -57,4 +61,30 @@ export class HashLink extends BaseComponent {
 			} );
 		}, { once: true } );
 	}
+
+	/**
+	 * Handles hash changes that happen without a full page reload, e.g. editing the
+	 * hash in the address bar or navigating with the browser's back/forward buttons.
+	 *
+	 * In these cases the browser performs native fragment navigation, which scrolls
+	 * the target to the very top of the viewport without accounting for the sticky
+	 * header. Re-running the scroll with the proper offset keeps the heading visible.
+	 *
+	 * Clicking an `a[href^="#"]` link does not trigger this handler, because the click
+	 * handler updates the URL via `history.pushState()`, which does not emit a
+	 * `hashchange` event.
+	 *
+	 * @private
+	 */
+	static _handleHashChange() {
+		window.addEventListener( 'hashchange', () => {
+			if ( !window.location.hash ) {
+				return;
+			}
+
+			scrollToHash( window.location.hash.substring( 1 ), {
+				pushState: false
+			} );
+		} );
+	}
 }

package/themes/umberto/src/gloria/js/modules/header.js

@@ -83,6 +83,11 @@ export class Header extends BaseComponent {
 			this.element.classList.toggle( 'is-on-top-overlay', state.isOnOverlay );
 			this.dispatchHeaderResizeEvent();
 		} else if ( prevState?.height !== state.height && state.height !== null ) {
+			// Expose the header height on the document root so that native fragment navigation
+			// (e.g. pasting a URL with a hash, which fires no `hashchange` or `load` event) can
+			// offset the target below the sticky header via `scroll-padding-top`. See `_base.scss`.
+			document.documentElement.style.setProperty( '--header-height', `${ state.height }px` );
+
 			this.dispatchHeaderResizeEvent();
 		}
 	}
@@ -128,7 +133,7 @@ export class Header extends BaseComponent {
 	}
 
 	/**
-	 * Sets the header height variable on the body element.
+	 * Tracks the header height and updates the component state.
 	 */
 	_trackHeight() {
 		this.setState( {