@ckeditor/ckeditor5-dev-manual-server 58.0.0 → 59.0.0

package/dist/index.d.ts

@@ -3,7 +3,6 @@
 * For licensing, see LICENSE.md.
 */
 export { manualTestsPlugin, type ManualTestsPluginOptions } from "./manual-test-plugin/plugin.js";
-export { manualStaticAssetsPlugin, type ManualStaticAssetsPluginOptions } from "./static-assets-plugin/plugin.js";
 export { ckDebugPlugin } from "./debug-plugin/plugin.js";
 export { refreshPlugin } from "./refresh-plugin/plugin.js";
 export { rawSvgPlugin } from "./svg-plugin/plugin.js";

package/dist/index.js

@@ -1,6 +1,6 @@
-import { createReadStream, existsSync, globSync, readFileSync, realpathSync, statSync } from "node:fs";
+import { existsSync, globSync, readFileSync, realpathSync } from "node:fs";
 import { fileURLToPath } from "node:url";
-import { basename, extname, isAbsolute, posix, relative, resolve } from "node:path";
+import { basename, isAbsolute, posix, relative, resolve } from "node:path";
 //#region src/utils.ts
 /**
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
@@ -61,11 +61,11 @@ function stripLeadingSlash(value) {
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md.
 */
-const MANUAL_TESTS_DIRECTORY$1 = "tests/manual/";
-const MANUAL_TEST_SUFFIX$2 = ".manual.html";
+const MANUAL_TESTS_DIRECTORY$1 = "manual/";
+const MANUAL_TEST_SUFFIX$1 = ".manual.html";
 /**
 * Discovers manual test pages. A manual test is a single full HTML document named
-* `<slug>.manual.html` located under a package's `tests/manual/` directory. Plain `.html`
+* `<slug>.manual.html` located under a package's `manual/` directory. Plain `.html`
 * files are treated as static fixtures and are never collected here.
 *
 * The `patterns` are package root globs, for example `packages/*`.
@@ -75,12 +75,12 @@ function collectManualPages(patterns, workspaceRoot) {
 	return new Map(manualPages);
 }
 function matchManualPageFiles(patterns, workspaceRoot) {
-	return patterns.map((pattern) => `${pattern.replace(/\/+$/, "")}/${MANUAL_TESTS_DIRECTORY$1}**/*${MANUAL_TEST_SUFFIX$2}`).flatMap((pattern) => globSync(pattern, { cwd: workspaceRoot }).map((match) => toPosixPath(match)));
+	return patterns.map((pattern) => `${pattern.replace(/\/+$/, "")}/${MANUAL_TESTS_DIRECTORY$1}**/*${MANUAL_TEST_SUFFIX$1}`).flatMap((pattern) => globSync(pattern, { cwd: workspaceRoot }).map((match) => toPosixPath(match)));
 }
 function toManualPageEntry(relativeFilePath, workspaceRoot) {
 	const directoryStartIndex = relativeFilePath.startsWith(MANUAL_TESTS_DIRECTORY$1) ? 0 : relativeFilePath.indexOf(`/${MANUAL_TESTS_DIRECTORY$1}`) + 1;
 	const packagePath = relativeFilePath.slice(0, Math.max(directoryStartIndex - 1, 0));
-	const slugPath = relativeFilePath.slice(directoryStartIndex + 13);
+	const slugPath = relativeFilePath.slice(directoryStartIndex + 7);
 	return {
 		htmlFilePath: toPublicSpecifier(relativeFilePath),
 		packageName: packagePath ? packagePath.slice(packagePath.lastIndexOf("/") + 1) : basename(workspaceRoot),
@@ -94,9 +94,9 @@ function toManualPageEntry(relativeFilePath, workspaceRoot) {
 * For licensing, see LICENSE.md.
 */
 const MANUAL_HEADER_ELEMENT = "ck-manual-header";
-const MANUAL_TEST_SUFFIX$1 = ".manual.html";
-const MANUAL_TESTS_DIRECTORY = "/tests/manual/";
-const THEME_ENTRY_FILE_PATH = "theme/index.css";
+const MANUAL_TEST_SUFFIX = ".manual.html";
+const MANUAL_TESTS_DIRECTORY = "/manual/";
+const THEME_ENTRY_FILE_PATHS = ["theme/index-editor.css", "theme/index-content.css"];
 const MANUAL_ENTRIES_VIRTUAL_ID = "virtual:ckeditor5-manual-entries";
 const MANUAL_THEME_ROOT = realpathSync(fileURLToPath(import.meta.resolve("@ckeditor/ckeditor5-dev-manual-server/theme")));
 const MANUAL_CATALOG_FILE_PATH = resolve(MANUAL_THEME_ROOT, "catalog.html");
@@ -113,14 +113,14 @@ function manualTestsPlugin(options) {
 		return getManualPages().get(toPublicSpecifier(relative(workspaceRoot, filePath)));
 	};
 	const getManualPageEntryForScriptSpecifier = (scriptSpecifier) => {
-		const htmlSpecifier = scriptSpecifier.replace(/\.(?:js|ts)$/, MANUAL_TEST_SUFFIX$1);
+		const htmlSpecifier = scriptSpecifier.replace(/\.(?:js|ts)$/, MANUAL_TEST_SUFFIX);
 		return htmlSpecifier == scriptSpecifier ? void 0 : getManualPages().get(htmlSpecifier);
 	};
 	const packageThemeEntryCache = /* @__PURE__ */ new Map();
-	const hasPackageThemeEntry = (packageRootSpecifier) => {
+	const getPackageThemeEntries = (packageRootSpecifier) => {
 		if (!packageThemeEntryCache.has(packageRootSpecifier)) {
-			const themeEntryFilePath = resolve(workspaceRoot, stripLeadingSlash(packageRootSpecifier), THEME_ENTRY_FILE_PATH);
-			packageThemeEntryCache.set(packageRootSpecifier, existsSync(themeEntryFilePath));
+			const themeEntries = THEME_ENTRY_FILE_PATHS.filter((themeEntryFilePath) => existsSync(resolve(workspaceRoot, stripLeadingSlash(packageRootSpecifier), themeEntryFilePath)));
+			packageThemeEntryCache.set(packageRootSpecifier, themeEntries);
 		}
 		return packageThemeEntryCache.get(packageRootSpecifier);
 	};
@@ -174,9 +174,12 @@ function manualTestsPlugin(options) {
 				const entry = getManualPageEntryForScriptSpecifier(scriptSpecifier);
 				if (!entry) return;
 				const packageRootSpecifier = entry.htmlFilePath.slice(0, entry.htmlFilePath.indexOf(MANUAL_TESTS_DIRECTORY));
-				if (!hasPackageThemeEntry(packageRootSpecifier)) return;
+				const themeEntries = getPackageThemeEntries(packageRootSpecifier);
+				if (!themeEntries.length) return;
 				return {
-					code: `${code}\nimport '${posix.relative(posix.dirname(scriptSpecifier), `${packageRootSpecifier}/${THEME_ENTRY_FILE_PATH}`)}';\n`,
+					code: `${code}\n${themeEntries.map((themeEntryFilePath) => {
+						return `import '${posix.relative(posix.dirname(scriptSpecifier), `${packageRootSpecifier}/${themeEntryFilePath}`)}';`;
+					}).join("\n")}\n`,
 					map: null
 				};
 			}
@@ -324,126 +327,6 @@ function parseRequestUrl(requestUrl) {
 	return URL.parse(requestUrl || "", "http://localhost");
 }
 //#endregion
-//#region src/static-assets-plugin/static-assets.ts
-/**
-* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
-* For licensing, see LICENSE.md.
-*/
-const PROCESSED_MANUAL_TEST_EXTENSIONS = /* @__PURE__ */ new Set([".js", ".ts"]);
-const MANUAL_TEST_SUFFIX = ".manual.html";
-const VITE_MODULE_QUERY_PARAMETERS = /* @__PURE__ */ new Set([
-	"import",
-	"raw",
-	"url",
-	"worker",
-	"inline"
-]);
-function collectManualStaticAssets(patterns, workspaceRoot) {
-	return new Map(patterns.map((pattern) => `${pattern.replace(/\/+$/, "")}/tests/manual/**/*`).flatMap((pattern) => globSync(pattern, { cwd: workspaceRoot })).sort().filter((relativeFilePath) => statSync(resolve(workspaceRoot, relativeFilePath), { throwIfNoEntry: false })?.isFile()).filter(isManualStaticAssetPath).map((relativeFilePath) => [toPublicSpecifier(relativeFilePath), resolve(workspaceRoot, relativeFilePath)]));
-}
-function createManualStaticAssetsMiddleware(collectStaticAssets) {
-	return (request, response, next) => {
-		if (request.method != "GET" && request.method != "HEAD") {
-			next();
-			return;
-		}
-		const publicPath = getManualStaticAssetPublicPath(request.url);
-		const filePath = publicPath && collectStaticAssets().get(publicPath);
-		const fileStats = filePath ? statSync(filePath, { throwIfNoEntry: false }) : void 0;
-		if (!filePath || !fileStats?.isFile()) {
-			next();
-			return;
-		}
-		response.statusCode = 200;
-		response.setHeader("Content-Length", fileStats.size);
-		response.setHeader("Content-Type", getContentType(extname(filePath)));
-		if (request.method == "HEAD") {
-			response.end();
-			return;
-		}
-		const fileStream = createReadStream(filePath);
-		fileStream.on("error", () => response.destroy());
-		fileStream.pipe(response);
-	};
-}
-function getManualStaticAssetPublicPath(requestUrl) {
-	const url = URL.parse(requestUrl || "", "http://localhost");
-	if (!url) return null;
-	if ([...url.searchParams.keys()].some((key) => VITE_MODULE_QUERY_PARAMETERS.has(key))) return null;
-	const pathname = decodePathname(url.pathname);
-	if (!pathname || !isManualStaticAssetPath(pathname)) return null;
-	return pathname;
-}
-function decodePathname(pathname) {
-	try {
-		return decodeURIComponent(pathname);
-	} catch {
-		return null;
-	}
-}
-function isManualStaticAssetPath(filePath) {
-	if (filePath.endsWith(MANUAL_TEST_SUFFIX)) return false;
-	return extname(filePath) != "" && !PROCESSED_MANUAL_TEST_EXTENSIONS.has(extname(filePath));
-}
-function getContentType(extension) {
-	switch (extension) {
-		case ".avif": return "image/avif";
-		case ".css": return "text/css; charset=utf-8";
-		case ".gif": return "image/gif";
-		case ".htm":
-		case ".html": return "text/html; charset=utf-8";
-		case ".ico": return "image/x-icon";
-		case ".jpg":
-		case ".jpeg": return "image/jpeg";
-		case ".json":
-		case ".map": return "application/json; charset=utf-8";
-		case ".mp3": return "audio/mpeg";
-		case ".mp4": return "video/mp4";
-		case ".png": return "image/png";
-		case ".svg": return "image/svg+xml";
-		case ".txt": return "text/plain; charset=utf-8";
-		case ".webp": return "image/webp";
-		case ".woff": return "font/woff";
-		case ".woff2": return "font/woff2";
-		default: return "application/octet-stream";
-	}
-}
-//#endregion
-//#region src/static-assets-plugin/plugin.ts
-/**
-* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
-* For licensing, see LICENSE.md.
-*/
-function manualStaticAssetsPlugin(options) {
-	let workspaceRoot = process.cwd();
-	const includePackageNames = (options.include || []).filter(Boolean);
-	const getManualStaticAssets = cacheValue(() => filterManualStaticAssets(collectManualStaticAssets(options.paths, workspaceRoot), includePackageNames, workspaceRoot)).get;
-	return {
-		name: "ckeditor5-manual-static-assets",
-		configResolved(config) {
-			workspaceRoot = config.root;
-		},
-		configureServer(server) {
-			server.middlewares.use(createManualStaticAssetsMiddleware(getManualStaticAssets));
-		},
-		generateBundle() {
-			for (const [publicPath, filePath] of getManualStaticAssets()) this.emitFile({
-				type: "asset",
-				fileName: stripLeadingSlash(publicPath),
-				source: readFileSync(filePath)
-			});
-		}
-	};
-}
-function filterManualStaticAssets(staticAssets, includePackageNames, workspaceRoot) {
-	const isIncluded = createPackageNameFilter(includePackageNames);
-	return new Map([...staticAssets].filter(([publicPath]) => isIncluded(getManualTestPackageName(publicPath, workspaceRoot))));
-}
-function getManualTestPackageName(publicPath, workspaceRoot) {
-	if (publicPath.startsWith("/tests/manual/")) return basename(workspaceRoot);
-	return publicPath.match(/^\/(?:.*\/)?([^/]+)\/tests\/manual\//)?.[1] || null;
-}
-//#endregion
 //#region src/debug-plugin/plugin.ts
 /**
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
@@ -598,4 +481,4 @@ function rawSvgPlugin() {
 * For licensing, see LICENSE.md.
 */
 //#endregion
-export { ckDebugPlugin, manualStaticAssetsPlugin, manualTestsPlugin, rawSvgPlugin, refreshPlugin, stringifyValues };
+export { ckDebugPlugin, manualTestsPlugin, rawSvgPlugin, refreshPlugin, stringifyValues };

package/dist/manual-test-plugin/collect-pages.d.ts

@@ -5,7 +5,7 @@
 import type { ManualPageEntry } from "./types.js";
 /**
 * Discovers manual test pages. A manual test is a single full HTML document named
-* `<slug>.manual.html` located under a package's `tests/manual/` directory. Plain `.html`
+* `<slug>.manual.html` located under a package's `manual/` directory. Plain `.html`
 * files are treated as static fixtures and are never collected here.
 *
 * The `patterns` are package root globs, for example `packages/*`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-dev-manual-server",
-  "version": "58.0.0",
+  "version": "59.0.0",
   "description": "Used to extend Vite to create a manual test server for CKEditor 5.",
   "keywords": [],
   "author": "CKSource (http://cksource.com/)",

package/theme/catalog-favorites.ts

@@ -0,0 +1,94 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+interface FavoritableEntry {
+	packageName: string;
+	slug: string;
+}
+
+const FAVORITES_STORAGE_KEY = 'ckeditor5-manual-test-favorites';
+
+/**
+ * Returns the stable identifier used to persist a manual test as a favorite.
+ */
+export function getFavoriteId( entry: FavoritableEntry ): string {
+	return `${ entry.packageName }/${ entry.slug }`;
+}
+
+/**
+ * Returns the accessible label for a favorite toggle action.
+ */
+export function getFavoriteActionLabel( isFavorite: boolean ): string {
+	return isFavorite ? 'Remove from favorites' : 'Add to favorites';
+}
+
+/**
+ * Updates a favorite button from the current favorite identifier set.
+ */
+export function updateFavoriteButtonState(
+	button: HTMLButtonElement,
+	favoriteIds: Set<string>,
+	favoriteId: string
+): void {
+	const isFavorite = favoriteIds.has( favoriteId );
+	const label = getFavoriteActionLabel( isFavorite );
+
+	button.title = label;
+	button.setAttribute( 'aria-label', label );
+	button.setAttribute( 'aria-pressed', String( isFavorite ) );
+	button.classList.toggle( 'favorite--active', isFavorite );
+}
+
+/**
+ * Returns favorite entries in their original order.
+ */
+export function filterFavoriteEntries<T extends FavoritableEntry>( entries: Array<T>, favoriteIds: Set<string> ): Array<T> {
+	return entries.filter( entry => favoriteIds.has( getFavoriteId( entry ) ) );
+}
+
+/**
+ * Toggles an identifier in the favorite set.
+ */
+export function toggleFavoriteId( favoriteIds: Set<string>, favoriteId: string ): void {
+	if ( favoriteIds.has( favoriteId ) ) {
+		favoriteIds.delete( favoriteId );
+	} else {
+		favoriteIds.add( favoriteId );
+	}
+}
+
+/**
+ * Loads favorite entry identifiers from local storage.
+ */
+export function loadFavoriteIds(): Set<string> {
+	try {
+		const storedValue = localStorage.getItem( FAVORITES_STORAGE_KEY );
+
+		if ( !storedValue ) {
+			return new Set();
+		}
+
+		const parsedValue: unknown = JSON.parse( storedValue );
+
+		if ( !Array.isArray( parsedValue ) || parsedValue.some( value => typeof value != 'string' ) ) {
+			return new Set();
+		}
+
+		return new Set( parsedValue );
+	} catch {
+		return new Set();
+	}
+}
+
+/**
+ * Persists favorite entry identifiers in local storage.
+ */
+export function saveFavoriteIds( favoriteIds: Set<string> ): void {
+	try {
+		localStorage.setItem( FAVORITES_STORAGE_KEY, JSON.stringify( [ ...favoriteIds ] ) );
+	} catch {
+		// Favorites are optional, so storage failures must not block the catalog.
+	}
+}

package/theme/catalog-search.ts

@@ -0,0 +1,152 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+interface SearchableEntry {
+	packageName: string;
+	slug: string;
+}
+
+const PACKAGE_MATCH_PRIORITY = {
+	exactName: 0,
+	namePrefix: 1,
+	nameContains: 2,
+	testSlugOnly: 3
+} as const;
+
+type PackageMatchPriority = typeof PACKAGE_MATCH_PRIORITY[keyof typeof PACKAGE_MATCH_PRIORITY];
+
+interface PackageSearchResult<T extends SearchableEntry> {
+	visibleEntries: Array<T>;
+	priority: PackageMatchPriority;
+	matchingSlugCount: number;
+}
+
+export interface MatchOffset {
+	start: number;
+	end: number;
+}
+
+/**
+ * Filters tests and orders matching packages by relevance:
+ *
+ * 1. Exact full or short package name, e.g. `ckeditor5-table` or `table`.
+ * 2. Package name whose full or short name starts with the query.
+ * 3. Package name containing the query.
+ * 4. Packages with matching test slugs only.
+ *
+ * Packages at the same priority are ordered by the number of matching test slugs. Stable sorting
+ * preserves the original package order when that number is also equal. Tests within a package
+ * always retain their original order.
+ *
+ * A package-name match shows all tests from that package. A slug match shows only matching tests.
+ */
+export function filterEntries<T extends SearchableEntry>( entries: Array<T>, normalizedQuery: string ): Array<T> {
+	if ( !normalizedQuery ) {
+		return entries;
+	}
+
+	const packageGroups = groupEntriesByPackage( entries );
+	const searchResults = [ ...packageGroups.entries() ]
+		.map( ( [ packageName, packageEntries ] ) => createPackageSearchResult(
+			packageName,
+			packageEntries,
+			normalizedQuery
+		) )
+		.filter( result => result.visibleEntries.length );
+
+	searchResults.sort( comparePackageSearchResults );
+
+	return searchResults.flatMap( result => result.visibleEntries );
+}
+
+/**
+ * Groups entries by package while preserving their original order.
+ */
+function groupEntriesByPackage<T extends SearchableEntry>( entries: Array<T> ): Map<string, Array<T>> {
+	const packageGroups = new Map<string, Array<T>>();
+
+	for ( const entry of entries ) {
+		const packageEntries = packageGroups.get( entry.packageName ) || [];
+
+		packageEntries.push( entry );
+		packageGroups.set( entry.packageName, packageEntries );
+	}
+
+	return packageGroups;
+}
+
+/**
+ * Creates the visible entries and ranking metadata for one package.
+ */
+function createPackageSearchResult<T extends SearchableEntry>(
+	packageName: string,
+	packageEntries: Array<T>,
+	normalizedQuery: string
+): PackageSearchResult<T> {
+	const priority = getPackageMatchPriority( packageName, normalizedQuery );
+	const matchingSlugEntries = packageEntries.filter( entry => entry.slug.toLowerCase().includes( normalizedQuery ) );
+	const packageNameMatches = priority != PACKAGE_MATCH_PRIORITY.testSlugOnly;
+
+	return {
+		visibleEntries: packageNameMatches ? packageEntries : matchingSlugEntries,
+		priority,
+		matchingSlugCount: matchingSlugEntries.length
+	};
+}
+
+/**
+ * Orders package search results by match priority and matching test count.
+ */
+function comparePackageSearchResults<T extends SearchableEntry>(
+	first: PackageSearchResult<T>,
+	second: PackageSearchResult<T>
+): number {
+	return first.priority - second.priority ||
+		second.matchingSlugCount - first.matchingSlugCount;
+}
+
+/**
+ * Returns how closely a package name matches the normalized query.
+ */
+function getPackageMatchPriority( packageName: string, normalizedQuery: string ): PackageMatchPriority {
+	const normalizedPackageName = packageName.toLowerCase();
+	const searchablePackageNames = [ normalizedPackageName, normalizedPackageName.replace( /^ckeditor5-/, '' ) ];
+
+	if ( searchablePackageNames.includes( normalizedQuery ) ) {
+		return PACKAGE_MATCH_PRIORITY.exactName;
+	}
+
+	if ( searchablePackageNames.some( name => name.startsWith( normalizedQuery ) ) ) {
+		return PACKAGE_MATCH_PRIORITY.namePrefix;
+	}
+
+	if ( searchablePackageNames.some( name => name.includes( normalizedQuery ) ) ) {
+		return PACKAGE_MATCH_PRIORITY.nameContains;
+	}
+
+	return PACKAGE_MATCH_PRIORITY.testSlugOnly;
+}
+
+/**
+ * Returns offsets of all non-overlapping, case-insensitive query matches in text.
+ */
+export function findMatchOffsets( text: string, normalizedQuery: string ): Array<MatchOffset> {
+	if ( !normalizedQuery ) {
+		return [];
+	}
+
+	const normalizedText = text.toLowerCase();
+	const matches: Array<MatchOffset> = [];
+	let matchStart = normalizedText.indexOf( normalizedQuery );
+
+	while ( matchStart != -1 ) {
+		const matchEnd = matchStart + normalizedQuery.length;
+
+		matches.push( { start: matchStart, end: matchEnd } );
+		matchStart = normalizedText.indexOf( normalizedQuery, matchEnd );
+	}
+
+	return matches;
+}

package/theme/catalog.css

@@ -1,3 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
 :root {
 	color-scheme: light;
 	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
@@ -15,6 +20,10 @@
 	--text-subtle: #a3a3a3;
 	--accent: #171717;
 	--accent-ring: rgb(23 23 23 / 10%);
+	--search-match-background: #e6d3fa;
+	--search-match-text: #480090;
+	--favorites-surface: #f7f0ff;
+	--favorites-border: #d9c2f0;
 	--radius-lg: 12px;
 	--radius-md: 8px;
 	--radius-sm: 6px;
@@ -36,6 +45,12 @@ a {
 	color: inherit;
 }
 
+::highlight(ckeditor5-manual-search-match) {
+	background-color: var(--search-match-background);
+	color: var(--search-match-text);
+}
+
+/* Application shell. */
 .app {
 	max-width: 1280px;
 	margin: 0 auto;
@@ -75,12 +90,11 @@ a {
 	font-variant-numeric: tabular-nums;
 }
 
+/* Search. */
 .app__search {
 	display: flex;
 	align-items: center;
-	gap: 10px;
 	height: 44px;
-	padding: 0 14px;
 	background: var(--surface);
 	border: 1px solid var(--border);
 	border-radius: var(--radius-md);
@@ -92,7 +106,19 @@ a {
 	box-shadow: 0 0 0 4px var(--accent-ring);
 }
 
-.app__search-icon {
+.app__search-label {
+	display: flex;
+	align-items: center;
+	align-self: stretch;
+	flex: 1;
+	min-width: 0;
+	gap: 10px;
+	padding: 0 10px 0 14px;
+	cursor: text;
+}
+
+.app__search-icon,
+.app__search-clear {
 	flex-shrink: 0;
 	color: var(--text-subtle);
 }
@@ -110,13 +136,33 @@ a {
 }
 
 .app__search-input::-webkit-search-cancel-button {
-	cursor: pointer;
+	display: none;
 }
 
 .app__search-input::placeholder {
 	color: var(--text-muted);
 }
 
+.app__search:has(.app__search-input:placeholder-shown) .app__search-clear {
+	visibility: hidden;
+}
+
+.app__search-clear {
+	margin-inline-end: 10px;
+	padding: 6px;
+	line-height: 0;
+	background: none;
+	border: 0;
+	border-radius: var(--radius-sm);
+	cursor: pointer;
+}
+
+.app__search-clear:hover {
+	color: var(--text);
+	background: var(--surface-hover);
+}
+
+/* Catalog content. */
 .app__list {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
@@ -145,6 +191,7 @@ a {
 	color: var(--text-muted);
 }
 
+/* Package cards. */
 .pkg {
 	background: var(--surface);
 	border: 1px solid var(--border);
@@ -160,11 +207,14 @@ a {
 .pkg__header {
 	display: flex;
 	align-items: center;
-	gap: 10px;
-	padding: 12px 16px;
+	padding: 12px 6px 12px 16px;
 	border-bottom: 1px solid var(--border);
 }
 
+.pkg__header > * + * {
+	margin-inline-start: 10px;
+}
+
 .pkg__name {
 	flex: 1;
 	min-width: 0;
@@ -177,23 +227,91 @@ a {
 }
 
 .pkg__count {
-	flex-shrink: 0;
-	min-width: 24px;
-	text-align: right;
+	flex: 0 0 38px;
+	text-align: center;
 	font-size: 12px;
 	color: var(--text-muted);
 	font-variant-numeric: tabular-nums;
 }
 
+.pkg__favorite,
+.pkg__favorites-clear {
+	flex-shrink: 0;
+	line-height: 0;
+	color: var(--text-subtle);
+	background: none;
+	border: 0;
+	border-radius: var(--radius-sm);
+	cursor: pointer;
+}
+
+/* Favorites card. */
+.pkg--favorites,
+.pkg--favorites:hover {
+	border-color: var(--favorites-border);
+}
+
+.pkg--favorites .pkg__header {
+	color: var(--search-match-text);
+	background: var(--favorites-surface);
+}
+
+.pkg--favorites .pkg__name {
+	font-family: inherit;
+}
+
+.pkg__favorites-icon {
+	flex-shrink: 0;
+}
+
+.pkg__favorites-icon path,
+.pkg__favorite-icon path {
+	fill: none;
+	stroke: currentColor;
+	stroke-linejoin: round;
+	stroke-width: 1.5px;
+}
+
+.pkg__favorites-icon path,
+.favorite--active .pkg__favorite-icon path {
+	fill: currentColor;
+}
+
+.pkg__favorites-clear {
+	padding: 0;
+}
+
+.pkg__favorites-clear:hover {
+	color: var(--text);
+}
+
+.pkg__favorites-clear:not([hidden]) + .pkg__count {
+	margin-inline-start: 2px;
+}
+
+/* Package contents. */
 .pkg__list {
 	list-style: none;
 	margin: 0;
 	padding: 6px;
 }
 
+.pkg__favorites-empty {
+	padding: 10px 12px;
+	font-size: 12px;
+	color: var(--text-muted);
+}
+
+.pkg__item {
+	display: flex;
+	align-items: center;
+}
+
 .pkg__link {
 	display: flex;
 	align-items: center;
+	flex: 1;
+	min-width: 0;
 	gap: 12px;
 	padding: 10px 12px;
 	border-radius: var(--radius-sm);
@@ -206,12 +324,6 @@ a {
 	background: var(--surface-hover);
 }
 
-.pkg__link:focus-visible {
-	outline: none;
-	background: var(--surface-hover);
-	box-shadow: inset 0 0 0 2px var(--border-strong);
-}
-
 .pkg__test-name {
 	flex: 1;
 	min-width: 0;
@@ -223,6 +335,27 @@ a {
 	white-space: nowrap;
 }
 
+.pkg__favorite {
+	padding: 11px;
+}
+
+.pkg__favorite:hover {
+	color: var(--text);
+	background: var(--surface-hover);
+}
+
+.pkg__favorite.favorite--active {
+	color: var(--search-match-text);
+}
+
+.pkg__link:focus-visible,
+.pkg__favorite:focus-visible,
+.pkg__favorites-clear:focus-visible {
+	outline: none;
+	background: var(--surface-hover);
+	box-shadow: inset 0 0 0 2px var(--border-strong);
+}
+
 @media (max-width: 600px) {
 	.app {
 		padding: 0 16px 48px;

package/theme/catalog.html

@@ -15,12 +15,19 @@
 					<h1 class="app__title">CKEditor 5 manual tests</h1>
 					<p class="app__subtitle"></p>
 				</div>
-				<label class="app__search">
-					<svg class="app__search-icon" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
-						<path fill="currentColor" d="M7 2a5 5 0 103.546 8.546l3.204 3.204a.75.75 0 101.06-1.06l-3.204-3.204A5 5 0 007 2zM3.5 7a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z"/>
-					</svg>
-					<input type="search" class="app__search-input" placeholder="Filter by package or test name…" autocomplete="off" autofocus>
-				</label>
+				<div class="app__search" role="search">
+					<label class="app__search-label">
+						<svg class="app__search-icon" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
+							<path fill="currentColor" d="M7 2a5 5 0 103.546 8.546l3.204 3.204a.75.75 0 101.06-1.06l-3.204-3.204A5 5 0 007 2zM3.5 7a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z"/>
+						</svg>
+						<input type="search" class="app__search-input" placeholder="Filter by package or test name…" autocomplete="off" autofocus>
+					</label>
+					<button type="button" class="app__search-clear" aria-label="Clear search">
+						<svg viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
+							<path fill="currentColor" d="M3.22 3.22a.75.75 0 011.06 0L8 6.94l3.72-3.72a.75.75 0 111.06 1.06L9.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L8 9.06l-3.72 3.72a.75.75 0 01-1.06-1.06L6.94 8 3.22 4.28a.75.75 0 010-1.06z"/>
+						</svg>
+					</button>
+				</div>
 			</header>
 			<div class="app__list" role="list"></div>
 		</main>
@@ -43,11 +50,31 @@
 		</section>
 	</template>
 
+	<template id="manual-favorites-template">
+		<section class="pkg pkg--favorites" role="listitem">
+			<header class="pkg__header">
+				<span class="pkg__name">Favorites</span>
+				<button type="button" class="pkg__favorites-clear" aria-label="Clear all favorites" title="Clear all favorites" hidden>
+					<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+						<path fill="currentColor" d="M5.5 2.5h5l.5 1H14V5H2V3.5h3l.5-1zM3.5 6h9l-.65 8h-7.7L3.5 6zm2.25 1.5v5h1.5v-5h-1.5zm3 0v5h1.5v-5h-1.5z"/>
+					</svg>
+				</button>
+				<span class="pkg__count"></span>
+			</header>
+			<ul class="pkg__list"></ul>
+		</section>
+	</template>
+
+	<template id="manual-favorites-empty-template">
+		<li class="pkg__favorites-empty">Star tests to add them here.</li>
+	</template>
+
 	<template id="manual-test-template">
 		<li class="pkg__item">
 			<a class="pkg__link">
 				<span class="pkg__test-name"></span>
 			</a>
+			<button type="button" class="pkg__favorite"></button>
 		</li>
 	</template>
 

package/theme/catalog.ts

@@ -5,10 +5,22 @@
 
 // @ts-expect-error Virtual module provided by the manual test entries plugin.
 import { manualTestEntries, type ManualTestEntry } from 'virtual:ckeditor5-manual-entries';
+import {
+	filterFavoriteEntries,
+	getFavoriteId,
+	loadFavoriteIds,
+	saveFavoriteIds,
+	toggleFavoriteId,
+	updateFavoriteButtonState
+} from './catalog-favorites.js';
+import { filterEntries, findMatchOffsets } from './catalog-search.js';
+import { createFavoriteIcon } from './favorite-icon.js';
 
 import './catalog.css';
 
 const SEARCH_QUERY_PARAMETER = 'q';
+const SEARCH_HIGHLIGHT_NAME = 'ckeditor5-manual-search-match';
+const SEARCH_LABEL_SELECTOR = '.pkg__name, .pkg__test-name';
 
 /**
  * Root element for the manual test index application.
@@ -22,6 +34,7 @@ renderApp( appElement, manualTestEntries );
  */
 function renderApp( root: HTMLElement, entries: Array<ManualTestEntry> ): void {
 	const packageCount = new Set( entries.map( entry => entry.packageName ) ).size;
+	const favoriteIds = loadFavoriteIds();
 
 	root.replaceChildren( cloneTemplateElement( 'manual-index-template' ) );
 
@@ -29,9 +42,18 @@ function renderApp( root: HTMLElement, entries: Array<ManualTestEntry> ): void {
 
 	const listElement = root.querySelector<HTMLElement>( '.app__list' )!;
 	const searchInput = root.querySelector<HTMLInputElement>( '.app__search-input' )!;
+	const clearSearchButton = root.querySelector<HTMLButtonElement>( '.app__search-clear' )!;
 
 	const render = ( query: string ): void => {
-		listElement.replaceChildren( ...renderGroups( filterEntries( entries, query ) ) );
+		const normalizedQuery = query.trim().toLowerCase();
+		const renderedGroups = renderGroups( filterEntries( entries, normalizedQuery ), favoriteIds );
+
+		if ( !normalizedQuery && entries.length ) {
+			renderedGroups.unshift( renderFavoritesCard( entries, favoriteIds ) );
+		}
+
+		listElement.replaceChildren( ...renderedGroups );
+		updateSearchHighlights( listElement, normalizedQuery );
 	};
 
 	const setQuery = ( query: string ): void => {
@@ -39,9 +61,54 @@ function renderApp( root: HTMLElement, entries: Array<ManualTestEntry> ): void {
 		render( query );
 	};
 
-	searchInput.addEventListener( 'input', () => {
+	const applySearchInput = (): void => {
 		updateSearchQueryInUrl( searchInput.value );
 		render( searchInput.value );
+	};
+
+	searchInput.addEventListener( 'input', applySearchInput );
+
+	listElement.addEventListener( 'click', event => {
+		const target = event.target;
+
+		if ( !( target instanceof Element ) ) {
+			return;
+		}
+
+		const favoriteActionButton = target.closest<HTMLButtonElement>( '.pkg__favorite, .pkg__favorites-clear' );
+
+		if ( !favoriteActionButton ) {
+			return;
+		}
+
+		const favoriteId = favoriteActionButton.dataset.favoriteId;
+		const shouldRestoreFocus = document.activeElement == favoriteActionButton;
+
+		if ( favoriteId ) {
+			toggleFavoriteId( favoriteIds, favoriteId );
+		} else {
+			favoriteIds.clear();
+		}
+
+		saveFavoriteIds( favoriteIds );
+		render( searchInput.value );
+
+		if ( !shouldRestoreFocus ) {
+			return;
+		}
+
+		if ( favoriteId ) {
+			focusFavoriteButton( listElement, favoriteId );
+		} else {
+			searchInput.focus();
+		}
+	} );
+
+	clearSearchButton.addEventListener( 'click', () => {
+		searchInput.value = '';
+		searchInput.focus();
+
+		applySearchInput();
 	} );
 
 	window.addEventListener( 'popstate', () => {
@@ -59,6 +126,16 @@ function renderApp( root: HTMLElement, entries: Array<ManualTestEntry> ): void {
 	setQuery( getSearchQueryFromUrl() );
 }
 
+/**
+ * Focuses the re-rendered favorite control in its package card.
+ */
+function focusFavoriteButton( root: HTMLElement, favoriteId: string ): void {
+	const favoriteButton = [ ...root.querySelectorAll<HTMLButtonElement>( '.pkg:not(.pkg--favorites) .pkg__favorite' ) ]
+		.find( button => button.dataset.favoriteId == favoriteId );
+
+	favoriteButton?.focus();
+}
+
 /**
  * Returns the current search query from the page URL.
  */
@@ -86,25 +163,46 @@ function updateSearchQueryInUrl( query: string ): void {
 }
 
 /**
- * Returns entries matching the current search query.
+ * Highlights query matches in the currently rendered package and test names.
  */
-function filterEntries( entries: Array<ManualTestEntry>, query: string ): Array<ManualTestEntry> {
-	const normalized = query.trim().toLowerCase();
+function updateSearchHighlights( root: HTMLElement, normalizedQuery: string ): void {
+	if ( !( 'highlights' in CSS ) ) {
+		return;
+	}
 
-	if ( !normalized ) {
-		return entries;
+	CSS.highlights.delete( SEARCH_HIGHLIGHT_NAME );
+
+	if ( !normalizedQuery ) {
+		return;
 	}
 
-	return entries.filter( entry =>
-		entry.packageName.toLowerCase().includes( normalized ) ||
-		entry.slug.toLowerCase().includes( normalized )
-	);
+	const ranges: Array<Range> = [];
+
+	for ( const label of root.querySelectorAll<HTMLElement>( SEARCH_LABEL_SELECTOR ) ) {
+		const textNode = label.firstChild;
+
+		if ( !textNode || textNode.nodeType != Node.TEXT_NODE ) {
+			continue;
+		}
+
+		for ( const { start, end } of findMatchOffsets( textNode.textContent!, normalizedQuery ) ) {
+			const range = new Range();
+
+			range.setStart( textNode, start );
+			range.setEnd( textNode, end );
+			ranges.push( range );
+		}
+	}
+
+	if ( ranges.length ) {
+		CSS.highlights.set( SEARCH_HIGHLIGHT_NAME, new Highlight( ...ranges ) );
+	}
 }
 
 /**
  * Groups visible entries by package and renders package cards.
  */
-function renderGroups( entries: Array<ManualTestEntry> ): Array<HTMLElement> {
+function renderGroups( entries: Array<ManualTestEntry>, favoriteIds: Set<string> ): Array<HTMLElement> {
 	if ( !entries.length ) {
 		return [ cloneTemplateElement( 'manual-empty-template' ) ];
 	}
@@ -118,32 +216,64 @@ function renderGroups( entries: Array<ManualTestEntry> ): Array<HTMLElement> {
 		groups.set( entry.packageName, group );
 	}
 
-	return [ ...groups.entries() ].map( ( [ packageName, packageEntries ] ) => renderPackageCard( packageName, packageEntries ) );
+	return [ ...groups.entries() ].map( ( [ packageName, packageEntries ] ) =>
+		renderPackageCard( packageName, packageEntries, favoriteIds )
+	);
 }
 
 /**
  * Renders a single package card with all tests belonging to that package.
  */
-function renderPackageCard( packageName: string, entries: Array<ManualTestEntry> ): HTMLElement {
+function renderPackageCard( packageName: string, entries: Array<ManualTestEntry>, favoriteIds: Set<string> ): HTMLElement {
 	const packageCard = cloneTemplateElement( 'manual-package-template' );
 	const list = packageCard.querySelector<HTMLElement>( '.pkg__list' )!;
 
 	packageCard.querySelector<HTMLElement>( '.pkg__name' )!.textContent = packageName;
 	packageCard.querySelector<HTMLElement>( '.pkg__count' )!.textContent = String( entries.length );
-	list.replaceChildren( ...entries.map( entry => renderTestItem( entry ) ) );
+	list.replaceChildren( ...entries.map( entry => renderTestItem( entry, favoriteIds ) ) );
 
 	return packageCard;
 }
 
+/**
+ * Renders the favorites card, including its empty state.
+ */
+function renderFavoritesCard( entries: Array<ManualTestEntry>, favoriteIds: Set<string> ): HTMLElement {
+	const favoritesCard = cloneTemplateElement( 'manual-favorites-template' );
+	const favoriteEntries = filterFavoriteEntries( entries, favoriteIds );
+	const list = favoritesCard.querySelector<HTMLElement>( '.pkg__list' )!;
+	const clearButton = favoritesCard.querySelector<HTMLButtonElement>( '.pkg__favorites-clear' )!;
+
+	favoritesCard.querySelector<HTMLElement>( '.pkg__header' )!.prepend( createFavoriteIcon( 'pkg__favorites-icon' ) );
+	favoritesCard.querySelector<HTMLElement>( '.pkg__count' )!.textContent = String( favoriteEntries.length );
+	clearButton.hidden = !favoriteEntries.length;
+
+	if ( favoriteEntries.length ) {
+		list.replaceChildren( ...favoriteEntries.map( entry => renderTestItem( entry, favoriteIds, true ) ) );
+	} else {
+		list.replaceChildren( cloneTemplateElement( 'manual-favorites-empty-template' ) );
+	}
+
+	return favoritesCard;
+}
+
 /**
  * Renders a single test link inside a package card.
  */
-function renderTestItem( entry: ManualTestEntry ): HTMLElement {
+function renderTestItem( entry: ManualTestEntry, favoriteIds: Set<string>, showPackageName = false ): HTMLElement {
 	const testItem = cloneTemplateElement( 'manual-test-template' );
 	const link = testItem.querySelector<HTMLAnchorElement>( '.pkg__link' )!;
+	const favoriteButton = testItem.querySelector<HTMLButtonElement>( '.pkg__favorite' )!;
+	const favoriteId = getFavoriteId( entry );
 
 	link.href = entry.href;
-	testItem.querySelector<HTMLElement>( '.pkg__test-name' )!.textContent = entry.slug;
+
+	testItem.querySelector<HTMLElement>( '.pkg__test-name' )!.textContent = showPackageName ? favoriteId : entry.slug;
+
+	favoriteButton.dataset.favoriteId = favoriteId;
+	favoriteButton.append( createFavoriteIcon( 'pkg__favorite-icon' ) );
+
+	updateFavoriteButtonState( favoriteButton, favoriteIds, favoriteId );
 
 	return testItem;
 }

package/theme/favorite-icon.ts

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const FAVORITE_ICON_PATH = 'M8 1.5l1.94 3.93 4.34.63-3.14 3.06.74 4.32L8 11.4l-3.88 2.04.74-4.32-3.14-3.06 4.34-.63L8 1.5z';
+
+/**
+ * Creates the favorite star icon used by the catalog and manual test header.
+ */
+export function createFavoriteIcon( className: string ): SVGSVGElement {
+	const icon = document.createElementNS( SVG_NAMESPACE, 'svg' );
+	const path = document.createElementNS( SVG_NAMESPACE, 'path' );
+
+	icon.classList.add( className );
+	icon.setAttribute( 'viewBox', '0 0 16 16' );
+	icon.setAttribute( 'width', '16' );
+	icon.setAttribute( 'height', '16' );
+	icon.setAttribute( 'aria-hidden', 'true' );
+	path.setAttribute( 'd', FAVORITE_ICON_PATH );
+	icon.append( path );
+
+	return icon;
+}

package/theme/manual-bootstrap.css

@@ -7,7 +7,7 @@
 
 .refresh-prompt {
 	position: fixed;
-	top: calc( var( --ck-manual-header-height, 44px ) / 1.25 );
+	top: 16px;
 	left: 50%;
 	z-index: 100000;
 	box-sizing: border-box;
@@ -20,14 +20,14 @@
 	cursor: pointer;
 	opacity: 0;
 	pointer-events: none;
-	transform: translate(-50%, calc( -100% - var( --ck-manual-header-height, 44px ) ) );
+	transform: translate(-50%, calc( -100% - 16px ) );
 	transition: transform 0.18s ease-out, opacity 0.18s ease-out, background 0.1s;
 }
 
 .refresh-prompt--visible {
 	opacity: 1;
 	pointer-events: auto;
-	transform: translate(-50%, -50%);
+	transform: translate(-50%, 0);
 }
 
 .refresh-prompt:hover {

package/theme/manual-header.css

@@ -7,15 +7,9 @@
 
 :host {
 	display: block;
-	--ck-manual-header-height: 44px;
 }
 
 .bar {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	z-index: 99999;
 	display: flex;
 	align-items: stretch;
 	box-sizing: border-box;
@@ -37,7 +31,7 @@
 	padding: 8px 14px;
 	border: 0;
 	background: transparent;
-	border-radius: 999px;
+	border-radius: 6px;
 	text-decoration: none;
 	color: inherit;
 	font: inherit;
@@ -74,7 +68,7 @@
 	align-items: center;
 	flex: 1 1 auto;
 	gap: 10px;
-	padding: 8px 14px;
+	padding: 0 14px;
 	overflow: hidden;
 	min-width: 0;
 }
@@ -96,6 +90,29 @@
 	white-space: nowrap;
 }
 
+.favorite {
+	flex-shrink: 0;
+	justify-content: center;
+	padding: 8px;
+	margin-inline-start: -8px;
+	color: #737373;
+}
+
+.favorite__icon {
+	fill: none;
+	stroke: currentColor;
+	stroke-linejoin: round;
+	stroke-width: 1.5px;
+}
+
+.favorite--active {
+	color: #6d28d9;
+}
+
+.favorite--active .favorite__icon {
+	fill: currentColor;
+}
+
 :host( :not( [ has-instructions ] ) ) .instructions-only {
 	display: none;
 }
@@ -119,7 +136,7 @@
 	--panel-transition-duration: 0.18s;
 
 	position: fixed;
-	top: var(--ck-manual-header-height);
+	top: 0;
 	right: 0;
 	bottom: 0;
 	z-index: 99998;

package/theme/manual-header.ts

@@ -7,6 +7,14 @@
 // Imported as raw strings so they can be adopted into constructable stylesheets.
 import headerStyles from './manual-header.css?inline';
 import instructionsStyles from './manual-instructions.css?inline';
+import {
+	getFavoriteId,
+	loadFavoriteIds,
+	saveFavoriteIds,
+	toggleFavoriteId,
+	updateFavoriteButtonState
+} from './catalog-favorites.js';
+import { createFavoriteIcon } from './favorite-icon.js';
 
 const MANUAL_HEADER_DATA_META = 'ck-manual-header';
 
@@ -19,6 +27,7 @@ const TEMPLATE = /* html */ `
 		<a class="pill back" title="Back to test index">&larr; All tests</a>
 		<span class="divider" aria-hidden="true"></span>
 		<span class="label">
+			<button type="button" class="pill favorite" data-action="favorite"></button>
 			<span class="label__name" data-field="name"></span>
 			<span class="label__package" data-field="package"></span>
 		</span>
@@ -47,9 +56,9 @@ const TEMPLATE = /* html */ `
 /* eslint-enable @stylistic/max-len */
 
 /**
- * `<ck-manual-header>` renders the manual test chrome: a fixed header bar with the test
- * name, package name and a back-to-index link, plus a collapsible instructions panel that
- * projects the element's light-DOM children (default slot).
+ * `<ck-manual-header>` renders the manual test chrome: a header bar with the test name,
+ * package name, back-to-index link and favorite toggle, plus a collapsible instructions
+ * panel that projects the element's light-DOM children (default slot).
  *
  * The manual test server injects a `<meta name="ck-manual-header">` carrying the package
  * name and the base-aware catalog href, and the `<script>` that defines this
@@ -61,6 +70,7 @@ const TEMPLATE = /* html */ `
  */
 class ManualHeaderElement extends HTMLElement {
 	private _panel!: HTMLElement;
+	private _favoriteId!: string;
 
 	constructor() {
 		super();
@@ -69,6 +79,7 @@ class ManualHeaderElement extends HTMLElement {
 
 		shadow.adoptedStyleSheets = [ headerStyleSheet ];
 		shadow.innerHTML = TEMPLATE;
+		shadow.querySelector<HTMLElement>( '[data-action="favorite"]' )!.append( createFavoriteIcon( 'favorite__icon' ) );
 	}
 
 	public connectedCallback(): void {
@@ -82,6 +93,10 @@ class ManualHeaderElement extends HTMLElement {
 		const backLink = shadow.querySelector<HTMLAnchorElement>( '.back' )!;
 
 		backLink.href = data.catalogHref;
+		this._favoriteId = getFavoriteId( {
+			packageName: data.packageName,
+			slug: getSlugFromLocation()
+		} );
 
 		for ( const element of shadow.querySelectorAll<HTMLElement>( '[data-field="name"]' ) ) {
 			element.textContent = this._resolveDisplayName();
@@ -91,6 +106,7 @@ class ManualHeaderElement extends HTMLElement {
 			element.textContent = data.packageName;
 		}
 
+		this._renderFavoriteAction( loadFavoriteIds() );
 		this._setUpInstructions();
 		this._setUpActions( shadow );
 	}
@@ -129,7 +145,9 @@ class ManualHeaderElement extends HTMLElement {
 				return;
 			}
 
-			if ( trigger.dataset.action == 'toggle' ) {
+			if ( trigger.dataset.action == 'favorite' ) {
+				this._toggleFavorite();
+			} else if ( trigger.dataset.action == 'toggle' ) {
 				this._toggleInstructions( !this._panel.classList.contains( 'panel--open' ) );
 			} else if ( trigger.dataset.action == 'close' ) {
 				this._toggleInstructions( false );
@@ -143,6 +161,20 @@ class ManualHeaderElement extends HTMLElement {
 		} );
 	}
 
+	private _toggleFavorite(): void {
+		const favoriteIds = loadFavoriteIds();
+
+		toggleFavoriteId( favoriteIds, this._favoriteId );
+		saveFavoriteIds( favoriteIds );
+		this._renderFavoriteAction( favoriteIds );
+	}
+
+	private _renderFavoriteAction( favoriteIds: Set<string> ): void {
+		const trigger = this.shadowRoot!.querySelector<HTMLButtonElement>( '[data-action="favorite"]' )!;
+
+		updateFavoriteButtonState( trigger, favoriteIds, this._favoriteId );
+	}
+
 	private _toggleInstructions( isOpen: boolean ): void {
 		const trigger = this.shadowRoot!.querySelector<HTMLElement>( '[data-action="toggle"]' )!;
 

package/theme/manual-instructions.css

@@ -11,12 +11,20 @@
  * reach nested nodes, so instruction typography is scoped here to `ck-manual-header` descendants.
  */
 
-/* Offset for the fixed header bar injected by the component. */
-body {
-	padding-top: var( --ck-manual-header-height, 44px );
+/*
+ * `:where()` keeps zero specificity so anything a test styles itself takes precedence.
+ */
+:where(*, *::before, *::after) {
+	box-sizing: border-box;
+}
+
+:where(body) {
+	margin: 0;
+	min-height: 100vh;
 }
 
 ck-manual-header {
+	margin-bottom: 12px;
 	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 	line-height: 1.6;
 	color: #0a0a0a;

package/dist/static-assets-plugin/plugin.d.ts

@@ -1,10 +0,0 @@
-/**
-* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
-* For licensing, see LICENSE.md.
-*/
-import type { Plugin } from "vite";
-export interface ManualStaticAssetsPluginOptions {
-	paths: Array<string>;
-	include?: Array<string>;
-}
-export declare function manualStaticAssetsPlugin(options: ManualStaticAssetsPluginOptions): Plugin;

package/dist/static-assets-plugin/static-assets.d.ts

@@ -1,9 +0,0 @@
-/**
-* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
-* For licensing, see LICENSE.md.
-*/
-import type { IncomingMessage, ServerResponse } from "node:http";
-type ManualStaticAssetsMiddleware = (request: IncomingMessage, response: ServerResponse, next: () => void) => void;
-export declare function collectManualStaticAssets(patterns: Array<string>, workspaceRoot: string): Map<string, string>;
-export declare function createManualStaticAssetsMiddleware(collectStaticAssets: () => Map<string, string>): ManualStaticAssetsMiddleware;
-export {};