From 8d369f8a999fbf12648b4a7db4df637d0d5ddb5f Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 20:05:44 +0300
Subject: [PATCH 01/49] feat: align whats new page typography with admin shell

---
 src/css/welcome.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/css/welcome.scss b/src/css/welcome.scss
index 9d4c0702c..9e83aa4d6 100644
--- a/src/css/welcome.scss
+++ b/src/css/welcome.scss
@@ -7,10 +7,12 @@
 $breakpoint: 1060px;
 
 .code-snippets-welcome {
+	// Page and section titles follow the shared page-header typography.
 	h2 {
-		font-size: 1.5rem;
-		font-weight: 400;
-		line-height: 1.3;
+		font-size: 32px;
+		font-weight: 510;
+		line-height: 1.25;
+		color: #2c3337;
 		padding: 0;
 		margin-block: 50px 1rem;
 	}

From 657582bd279f4a14c619c7b3b7acd00c16cd645e Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 20:50:29 +0300
Subject: [PATCH 02/49] feat: extract snippet priority input into common
 component

---
 .../ManageMenu/SnippetsTable/TableColumns.tsx | 41 ++------------
 .../common/SnippetPriorityInput.tsx           | 53 +++++++++++++++++++
 2 files changed, 57 insertions(+), 37 deletions(-)
 create mode 100644 src/js/components/common/SnippetPriorityInput.tsx

diff --git a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
index ee2c15ab6..b53f91039 100644
--- a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
@@ -1,7 +1,7 @@
 import { humanTimeDiff } from '@wordpress/date'
 import { RawHTML } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
-import React, { Fragment, useState } from 'react'
+import React, { Fragment } from 'react'
 import { useSnippetsAPI } from '../../../hooks/useSnippetsAPI'
 import { useSnippetsList } from '../../../hooks/useSnippetsList'
 import { handleUnknownError } from '../../../utils/errors'
@@ -9,6 +9,7 @@ import { isNetworkAdmin } from '../../../utils/screen'
 import { getSnippetDisplayName, getSnippetEditUrl, getSnippetType } from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { Badge } from '../../common/Badge'
+import { SnippetPriorityInput } from '../../common/SnippetPriorityInput'
 import { Tooltip } from '../../common/Tooltip'
 import { RowActions } from './RowActions'
 import { useFilteredSnippets } from './WithFilteredSnippetsContext'
@@ -153,42 +154,8 @@ export const DateColumn: React.FC<ColumnProps> = ({ snippet }) =>
 		</span>
 		: <>&#8212;</>
 
-export const PriorityColumn: React.FC<ColumnProps> = ({ snippet }) => {
-	const [value, setValue] = useState(snippet.priority)
-	const snippetsAPI = useSnippetsAPI()
-	const { refreshSnippetsList } = useSnippetsList()
-	const id = `snippet-${snippet.id}-priority`
-
-	const handleUpdate = () => {
-		snippetsAPI.update({ ...snippet, priority: value })
-			.then(response => {
-				if (response.id === snippet.id) {
-					setValue(response.priority)
-				}
-			})
-			.then(refreshSnippetsList)
-			.catch(handleUnknownError)
-	}
-
-	return (
-		<form onSubmit={event => {
-			event.preventDefault()
-			handleUpdate()
-		}}>
-			<input
-				id={id}
-				type="number"
-				className="snippet-priority"
-				value={value}
-				step="1"
-				onBlur={handleUpdate}
-				aria-label={__('Snippet priority', 'code-snippets')}
-				onChange={event => setValue(Number(event.target.value))}
-				disabled={snippet.locked || snippet.trashed}
-			/>
-		</form>
-	)
-}
+export const PriorityColumn: React.FC<ColumnProps> = ({ snippet }) =>
+	<SnippetPriorityInput snippet={snippet} />
 
 const baseTableColumns: ListTableColumn<Snippet>[] = [
 	{
diff --git a/src/js/components/common/SnippetPriorityInput.tsx b/src/js/components/common/SnippetPriorityInput.tsx
new file mode 100644
index 000000000..15a48c7c0
--- /dev/null
+++ b/src/js/components/common/SnippetPriorityInput.tsx
@@ -0,0 +1,53 @@
+import { __ } from '@wordpress/i18n'
+import React, { useState } from 'react'
+import { useSnippetsAPI } from '../../hooks/useSnippetsAPI'
+import { useSnippetsList } from '../../hooks/useSnippetsList'
+import { handleUnknownError } from '../../utils/errors'
+import type { Snippet } from '../../types/Snippet'
+
+export interface SnippetPriorityInputProps {
+	snippet: Snippet
+	inputId?: string
+}
+
+/**
+ * Inline number field for updating a snippet's priority, saving on blur or
+ * form submission. Shared between the snippets list table, card kebab menu,
+ * and preview modal. Pass `inputId` to keep element IDs unique when the same
+ * snippet is rendered in more than one place at once.
+ */
+export const SnippetPriorityInput: React.FC<SnippetPriorityInputProps> = ({ snippet, inputId }) => {
+	const [value, setValue] = useState(snippet.priority)
+	const snippetsAPI = useSnippetsAPI()
+	const { refreshSnippetsList } = useSnippetsList()
+
+	const handleUpdate = () => {
+		snippetsAPI.update({ ...snippet, priority: value })
+			.then(response => {
+				if (response.id === snippet.id) {
+					setValue(response.priority)
+				}
+			})
+			.then(refreshSnippetsList)
+			.catch(handleUnknownError)
+	}
+
+	return (
+		<form onSubmit={event => {
+			event.preventDefault()
+			handleUpdate()
+		}}>
+			<input
+				id={inputId ?? `snippet-${snippet.id}-priority`}
+				type="number"
+				className="snippet-priority"
+				value={value}
+				step="1"
+				onBlur={handleUpdate}
+				aria-label={__('Snippet priority', 'code-snippets')}
+				onChange={event => setValue(Number(event.target.value))}
+				disabled={snippet.locked || snippet.trashed}
+			/>
+		</form>
+	)
+}

From 721ec5d53774ea447134ad89ba321b2eb866b2dd Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 20:50:45 +0300
Subject: [PATCH 03/49] feat: add snippet actions footer to preview modal

---
 .../SnippetsTable/ManageSnippetCard.tsx       |   1 +
 .../ManageMenu/SnippetsTable/RowActions.tsx   |   1 +
 .../components/common/SnippetPreviewModal.tsx | 123 ++++++++++++++++--
 3 files changed, 116 insertions(+), 9 deletions(-)

diff --git a/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx b/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx
index 055fa2415..2dcb7524c 100644
--- a/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx
@@ -42,6 +42,7 @@ const CardPreviewButton: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
 				type={getSnippetType(snippet)}
 				isOpen={isPreviewOpen}
 				setIsOpen={setIsPreviewOpen}
+				snippet={snippet}
 			/>
 		</>
 	)
diff --git a/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx b/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx
index f55ce5689..9bf2d4298 100644
--- a/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx
@@ -32,6 +32,7 @@ const PreviewLink: React.FC<RowActionsProps> = ({ snippet }) => {
 				type={getSnippetType(snippet)}
 				isOpen={isPreviewOpen}
 				setIsOpen={setIsPreviewOpen}
+				snippet={snippet}
 			/>
 		</>
 	)
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 751236a93..a9177852b 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -1,9 +1,18 @@
-import React, { useEffect, useRef } from 'react'
 import { Modal } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
+import React, { useEffect, useRef } from 'react'
+import { useSnippetsAPI } from '../../hooks/useSnippetsAPI'
+import { useSnippetsList } from '../../hooks/useSnippetsList'
+import { handleUnknownError } from '../../utils/errors'
+import { downloadSnippetExportFile } from '../../utils/files'
+import { cloneSnippetObject, getSnippetEditUrl } from '../../utils/snippets/snippets'
 import { Badge } from './Badge'
+import { Button } from './Button'
+import { useDeleteSnippet } from './DeleteButton'
+import { SnippetPriorityInput } from './SnippetPriorityInput'
 import type { BadgeName } from './Badge'
 import type { EditorFromTextArea } from 'codemirror'
+import type { Snippet } from '../../types/Snippet'
 
 export interface SnippetPreviewModalProps {
 	title: string
@@ -11,6 +20,7 @@ export interface SnippetPreviewModalProps {
 	type: string
 	isOpen: boolean
 	setIsOpen: (isOpen: boolean) => void
+	snippet?: Snippet
 }
 
 // Mirrors the type-to-mode mapping used by the live editor in SnippetTypeInput.
@@ -21,17 +31,106 @@ const EDITOR_MODES: Record<string, string> = {
 	html: 'application/x-httpd-php'
 }
 
+interface SnippetPreviewActionsProps {
+	snippet: Snippet
+	closeModal: () => void
+}
+
+interface SnippetPreviewButtonsProps extends SnippetPreviewActionsProps {
+	requestDelete: () => void
+}
+
+const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet, closeModal, requestDelete }) => {
+	const api = useSnippetsAPI()
+	const { refreshSnippetsList } = useSnippetsList()
+
+	return (
+		<div className="code-snippets-preview-modal__buttons">
+			{snippet.locked
+				? null
+				: <Button
+					link
+					className="code-snippets-preview-modal__trash"
+					onClick={requestDelete}
+				>
+					{__('Trash', 'code-snippets')}
+				</Button>}
+
+			<Button
+				secondary
+				onClick={() => {
+					api.export(snippet)
+						.then(response => downloadSnippetExportFile(response, snippet))
+						.catch(handleUnknownError)
+				}}
+			>
+				{__('Export', 'code-snippets')}
+			</Button>
+
+			<Button
+				secondary
+				onClick={() => {
+					api.create(cloneSnippetObject(snippet))
+						.then(refreshSnippetsList)
+						.then(closeModal)
+						.catch(handleUnknownError)
+				}}
+			>
+				{__('Clone', 'code-snippets')}
+			</Button>
+
+			<a className="button button-primary" href={getSnippetEditUrl(snippet)}>
+				{snippet.locked ? __('View', 'code-snippets') : __('Edit', 'code-snippets')}
+			</a>
+		</div>
+	)
+}
+
+/**
+ * Footer action bar for previews of local snippets. Requires the snippets API
+ * and snippets list contexts, so it is only rendered when the modal receives a
+ * full snippet object rather than bare title/code/type values.
+ */
+const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({ snippet, closeModal }) => {
+	const { refreshSnippetsList } = useSnippetsList()
+	const priorityInputId = `snippet-${snippet.id}-preview-priority`
+
+	const { requestDelete, confirmDialog } = useDeleteSnippet({
+		snippet,
+		onSuccess: () => {
+			closeModal()
+			return refreshSnippetsList()
+		},
+		onError: handleUnknownError
+	})
+
+	return (
+		<div className="code-snippets-preview-modal__footer">
+			<div className="code-snippets-preview-modal__priority">
+				<label htmlFor={priorityInputId}>{__('Priority', 'code-snippets')}</label>
+				<SnippetPriorityInput snippet={snippet} inputId={priorityInputId} />
+			</div>
+
+			<SnippetPreviewButtons snippet={snippet} closeModal={closeModal} requestDelete={requestDelete} />
+
+			{confirmDialog}
+		</div>
+	)
+}
+
 /**
  * Modal for quickly viewing a snippet's code in a read-only CodeMirror editor,
  * without navigating to the edit page. Shared between local snippets and cloud
- * snippet previews.
+ * snippet previews. Passing a full snippet object adds a footer of snippet
+ * actions, which requires the snippets API and snippets list contexts.
  */
 export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 	title,
 	code,
 	type,
 	isOpen,
-	setIsOpen
+	setIsOpen,
+	snippet
 }) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
 
@@ -65,12 +164,18 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 				</span>
 			}
 		>
-			<textarea
-				ref={textareaRef}
-				readOnly
-				aria-label={__('Snippet code preview', 'code-snippets')}
-				defaultValue={`${'php' === type ? '<?php\n\n' : ''}${code}`}
-			/>
+			<div className="code-snippets-preview-modal__editor">
+				<textarea
+					ref={textareaRef}
+					readOnly
+					aria-label={__('Snippet code preview', 'code-snippets')}
+					defaultValue={`${'php' === type ? '<?php\n\n' : ''}${code}`}
+				/>
+			</div>
+
+			{snippet
+				? <SnippetPreviewActions snippet={snippet} closeModal={() => setIsOpen(false)} />
+				: null}
 		</Modal>
 		: null
 }

From 224d47a3324acc34e2a36d978616c79cf4cc56a6 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 20:50:52 +0300
Subject: [PATCH 04/49] feat: style preview modal as pinned code viewport with
 actions footer

---
 src/css/common/_modal.scss | 80 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 77 insertions(+), 3 deletions(-)

diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index d03c607ea..c97975552 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -55,8 +55,8 @@
 .components-modal__frame.code-snippets-preview-modal {
 	min-inline-size: 520px;
 	min-block-size: 240px;
-	max-inline-size: 80vw;
-	max-block-size: 80vh;
+	inline-size: min(900px, 90vw);
+	max-block-size: 85vh;
 
 	@media (width <= 600px) {
 		min-inline-size: 90vw;
@@ -72,7 +72,81 @@
 		}
 	}
 
+	.components-modal__header {
+		border-block-end-color: #ddd;
+	}
+
+	// Header and footer stay pinned; the CodeMirror editor is the only
+	// scroll region, scrolling long code both vertically and horizontally.
 	.components-modal__content {
-		overflow: auto;
+		display: flex;
+		flex-flow: column;
+		min-block-size: 0;
+		padding: 0;
+		overflow: hidden;
+	}
+
+	.code-snippets-preview-modal__editor {
+		display: flex;
+		flex-flow: column;
+		flex: 1;
+		min-block-size: 0;
+
+		.CodeMirror {
+			flex: 1;
+			min-block-size: 0;
+			block-size: 100%;
+		}
+	}
+
+	.code-snippets-preview-modal__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-shrink: 0;
+		gap: 16px;
+		padding: 11px 19px;
+		border-block-start: 1px solid #e2e2e4;
+		background: #f6f7f7;
+	}
+
+	.code-snippets-preview-modal__priority {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 14px;
+
+		input.snippet-priority {
+			inline-size: 52px;
+			block-size: 30px;
+			margin: 0;
+			padding-block: 0;
+			padding-inline: 4px;
+			border: 1px solid #e2e2e4;
+			border-radius: 4px;
+			text-align: center;
+			color: #2c3337;
+		}
+	}
+
+	.code-snippets-preview-modal__buttons {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		.button {
+			border-radius: 5px;
+			font-size: 14px;
+		}
+
+		.button-link.code-snippets-preview-modal__trash {
+			color: #b32d2e;
+			text-decoration: none;
+
+			&:hover,
+			&:focus {
+				color: #d63638;
+			}
+		}
 	}
 }

From 26afd5fc4f7533464c4584280be101aabb29cac3 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 21:13:08 +0300
Subject: [PATCH 05/49] fix: keep preview modal footer pinned by flexing the
 modal wrapper

---
 src/css/common/_modal.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index c97975552..ac199488d 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -86,6 +86,16 @@
 		overflow: hidden;
 	}
 
+	// The modal component wraps its children in an unstyled focus container;
+	// it must join the flex chain or the editor grows to its content height.
+	.components-modal__header + div {
+		display: flex;
+		flex-flow: column;
+		flex: 1;
+		min-block-size: 0;
+		overflow: hidden;
+	}
+
 	.code-snippets-preview-modal__editor {
 		display: flex;
 		flex-flow: column;

From dc1b6b2c02b4aeb587ec49a0c3c102bf109fcf94 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 21:17:31 +0300
Subject: [PATCH 06/49] fix: lead preview modal actions with edit and show
 read-only priority

---
 src/css/common/_modal.scss                    | 12 ++---
 .../components/common/SnippetPreviewModal.tsx | 49 +++++++++----------
 2 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index ac199488d..3f5c71f3b 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -125,16 +125,10 @@
 		align-items: center;
 		gap: 8px;
 		font-size: 14px;
+		color: #646970;
 
-		input.snippet-priority {
-			inline-size: 52px;
-			block-size: 30px;
-			margin: 0;
-			padding-block: 0;
-			padding-inline: 4px;
-			border: 1px solid #e2e2e4;
-			border-radius: 4px;
-			text-align: center;
+		.code-snippets-preview-modal__priority-value {
+			font-weight: 600;
 			color: #2c3337;
 		}
 	}
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index a9177852b..9216ee510 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -9,7 +9,6 @@ import { cloneSnippetObject, getSnippetEditUrl } from '../../utils/snippets/snip
 import { Badge } from './Badge'
 import { Button } from './Button'
 import { useDeleteSnippet } from './DeleteButton'
-import { SnippetPriorityInput } from './SnippetPriorityInput'
 import type { BadgeName } from './Badge'
 import type { EditorFromTextArea } from 'codemirror'
 import type { Snippet } from '../../types/Snippet'
@@ -46,42 +45,42 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet,
 
 	return (
 		<div className="code-snippets-preview-modal__buttons">
-			{snippet.locked
-				? null
-				: <Button
-					link
-					className="code-snippets-preview-modal__trash"
-					onClick={requestDelete}
-				>
-					{__('Trash', 'code-snippets')}
-				</Button>}
+			<a className="button button-primary" href={getSnippetEditUrl(snippet)}>
+				{snippet.locked ? __('View', 'code-snippets') : __('Edit', 'code-snippets')}
+			</a>
 
 			<Button
 				secondary
 				onClick={() => {
-					api.export(snippet)
-						.then(response => downloadSnippetExportFile(response, snippet))
+					api.create(cloneSnippetObject(snippet))
+						.then(refreshSnippetsList)
+						.then(closeModal)
 						.catch(handleUnknownError)
 				}}
 			>
-				{__('Export', 'code-snippets')}
+				{__('Clone', 'code-snippets')}
 			</Button>
 
 			<Button
 				secondary
 				onClick={() => {
-					api.create(cloneSnippetObject(snippet))
-						.then(refreshSnippetsList)
-						.then(closeModal)
+					api.export(snippet)
+						.then(response => downloadSnippetExportFile(response, snippet))
 						.catch(handleUnknownError)
 				}}
 			>
-				{__('Clone', 'code-snippets')}
+				{__('Export', 'code-snippets')}
 			</Button>
 
-			<a className="button button-primary" href={getSnippetEditUrl(snippet)}>
-				{snippet.locked ? __('View', 'code-snippets') : __('Edit', 'code-snippets')}
-			</a>
+			{snippet.locked
+				? null
+				: <Button
+					link
+					className="code-snippets-preview-modal__trash"
+					onClick={requestDelete}
+				>
+					{__('Trash', 'code-snippets')}
+				</Button>}
 		</div>
 	)
 }
@@ -93,8 +92,6 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet,
  */
 const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({ snippet, closeModal }) => {
 	const { refreshSnippetsList } = useSnippetsList()
-	const priorityInputId = `snippet-${snippet.id}-preview-priority`
-
 	const { requestDelete, confirmDialog } = useDeleteSnippet({
 		snippet,
 		onSuccess: () => {
@@ -106,13 +103,13 @@ const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({ snippet,
 
 	return (
 		<div className="code-snippets-preview-modal__footer">
+			<SnippetPreviewButtons snippet={snippet} closeModal={closeModal} requestDelete={requestDelete} />
+
 			<div className="code-snippets-preview-modal__priority">
-				<label htmlFor={priorityInputId}>{__('Priority', 'code-snippets')}</label>
-				<SnippetPriorityInput snippet={snippet} inputId={priorityInputId} />
+				<span>{__('Priority', 'code-snippets')}</span>
+				<span className="code-snippets-preview-modal__priority-value">{snippet.priority}</span>
 			</div>
 
-			<SnippetPreviewButtons snippet={snippet} closeModal={closeModal} requestDelete={requestDelete} />
-
 			{confirmDialog}
 		</div>
 	)

From 994837d8845fce88b1e7f784aeb2d7eda19292d0 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 21:24:29 +0300
Subject: [PATCH 07/49] fix: squeeze toolbar components instead of wrapping
 above mobile widths

---
 src/css/common/_list-table.scss | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index e75668cf0..3c7b5cad7 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -350,9 +350,15 @@
 	}
 }
 
-// Toolbar squeeze: components shrink gracefully before the row is allowed
-// to wrap, so moderate viewports keep everything on one line.
+// Toolbar squeeze: above the mobile breakpoint the row never wraps —
+// components shrink gracefully instead (flex-wrap would otherwise win
+// before flex-shrink ever engages). Wrapping remains the small-screen
+// fallback only.
 .snippets-list-view .tablenav {
+	@media (width > 782px) {
+		flex-wrap: nowrap;
+	}
+
 	.alignleft.actions {
 		display: flex;
 		align-items: center;
@@ -384,7 +390,8 @@
 		min-inline-size: 0;
 	}
 
-	@media (width <= 960px) {
+	// The item count is the first thing to give way when space runs short.
+	@media (width <= 1240px) {
 		.tablenav-pages .displaying-num {
 			display: none;
 		}

From b6a7f0a96e0d93e69404b9264007eeec88821823 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 23:27:54 +0300
Subject: [PATCH 08/49] fix: keep snippet type tabs on a single scrolling row

---
 src/css/common/_subnav.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 498552ded..93215c679 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -40,7 +40,7 @@
 	ul {
 		display: flex;
 		align-items: stretch;
-		flex-wrap: wrap;
+		flex-wrap: nowrap;
 		min-block-size: 52px;
 		margin: 0;
 		padding: 0;

From 94bfa1b0e37c780b80c565eba056d8de6e1e398e Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 12:53:59 +0300
Subject: [PATCH 09/49] feat: localize snippet type counts for instant tab
 rendering

---
 .../SnippetsTable/SnippetsTable.tsx           | 21 ++++++++++++----
 src/js/types/Window.ts                        |  1 +
 src/php/Admin/Menus/Manage_Menu.php           | 25 +++++++++++++++++++
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index ed11fefd3..fdbf25b74 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -1,6 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n'
 import { createInterpolateElement } from '@wordpress/element'
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import classnames from 'classnames'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
 import { useSnippetView } from '../../../hooks/useSnippetView'
@@ -80,6 +80,8 @@ const SafeModeNotice = () =>
 		</Notice>
 		: null
 
+// Counts render immediately from the values localized with the page, then
+// switch to live values derived from the snippets list once it has loaded.
 const useSnippetTypeCounts = () => {
 	const { snippetsList } = useSnippetsList()
 
@@ -96,14 +98,23 @@ const useSnippetTypeCounts = () => {
 		[countedSnippets]
 	)
 
-	return { countedSnippets, typeCounts }
+	const localized = window.CODE_SNIPPETS_MANAGE?.typeCounts
+
+	const getCount = useCallback(
+		(type?: SnippetType) => countedSnippets
+			? type ? typeCounts?.get(type) ?? 0 : countedSnippets.length
+			: localized?.[type ?? 'all'],
+		[countedSnippets, typeCounts, localized]
+	)
+
+	return { getCount }
 }
 
 const SnippetsTableInner = () => {
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 	const { snippetView, setSnippetView } = useSnippetView()
 	const { currentType } = useSnippetsFilters()
-	const { countedSnippets, typeCounts } = useSnippetTypeCounts()
+	const { getCount } = useSnippetTypeCounts()
 
 	return (
 		<>
@@ -112,12 +123,12 @@ const SnippetsTableInner = () => {
 				aria-label={__('Snippet types', 'code-snippets')}
 			>
 				<ul>
-					<SnippetTypeTab count={countedSnippets?.length} setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
+					<SnippetTypeTab count={getCount()} setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
 					{SNIPPET_TYPES.map(type =>
 						<SnippetTypeTab
 							key={type}
 							type={type}
-							count={countedSnippets && (typeCounts?.get(type) ?? 0)}
+							count={getCount(type)}
 							setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
 						/>)}
 				</ul>
diff --git a/src/js/types/Window.ts b/src/js/types/Window.ts
index f29630376..a2eac25ee 100644
--- a/src/js/types/Window.ts
+++ b/src/js/types/Window.ts
@@ -66,6 +66,7 @@ declare global {
 			hiddenColumns: string[]
 			truncateRowValues: number | string
 			snippetsPerPage: number
+			typeCounts?: Record<string, number>
 			cloudSearchPerPage: number
 			isSafeModeActive: boolean
 			bulkDownloadNonce: string
diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index bc89312b0..7e26aa4d8 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -234,6 +234,7 @@ public function enqueue_assets() {
 			'bulkDownloadNonce'    => wp_create_nonce( 'code_snippets_bulk_download' ),
 			'supportsZipDownloads' => class_exists( 'ZipArchive' ),
 			'editorTheme'          => get_setting( 'editor', 'theme' ),
+			'typeCounts'           => $this->count_snippets_by_type(),
 		];
 
 		// Only the manage-table view consumes the full snippets list; skip the
@@ -272,6 +273,30 @@ public static function get_default_snippets_per_page(): int {
 		return max( 1, intval( $default ) );
 	}
 
+		/**
+         * Count non-trashed snippets per type with a single grouped query, so the
+         * type tabs can render their counts without loading full snippet data.
+         *
+         * @return array<string, int> Map of type name to snippet count, including 'all'.
+         */
+	private function count_snippets_by_type(): array {
+		global $wpdb;
+		$table = code_snippets()->db->get_table_name();
+
+		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotSafe -- table name from trusted source; counts are cheap and rendered per-request.
+		$results = $wpdb->get_results( "SELECT scope, COUNT(*) AS count FROM $table WHERE active >= 0 GROUP BY scope" );
+
+		$counts = [ 'all' => 0 ];
+
+		foreach ( $results as $row ) {
+			$type = Snippet::get_type_from_scope( $row->scope );
+			$counts[ $type ] = ( $counts[ $type ] ?? 0 ) + (int) $row->count;
+			$counts['all'] += (int) $row->count;
+		}
+
+		return $counts;
+	}
+
 	/**
 	 * Get the number of snippets to show per page.
 	 *

From 465d51c80cd09077f08e49626c8e939f90c6e780 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 13:57:46 +0300
Subject: [PATCH 10/49] fix: only save snippet priority when the value has
 changed

---
 src/js/components/common/SnippetPriorityInput.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/js/components/common/SnippetPriorityInput.tsx b/src/js/components/common/SnippetPriorityInput.tsx
index 15a48c7c0..110b240a7 100644
--- a/src/js/components/common/SnippetPriorityInput.tsx
+++ b/src/js/components/common/SnippetPriorityInput.tsx
@@ -22,6 +22,13 @@ export const SnippetPriorityInput: React.FC<SnippetPriorityInputProps> = ({ snip
 	const { refreshSnippetsList } = useSnippetsList()
 
 	const handleUpdate = () => {
+		// The kebab menu can focus this input on open, so a blur without a
+		// real change must not trigger a write.
+		if (Number.isNaN(value) || value === snippet.priority) {
+			setValue(snippet.priority)
+			return
+		}
+
 		snippetsAPI.update({ ...snippet, priority: value })
 			.then(response => {
 				if (response.id === snippet.id) {

From 461e8e6a1729205ec26f2b80a86c654cc8376b70 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:24:52 +0300
Subject: [PATCH 11/49] fix: correct docblock indentation in Manage_Menu

---
 src/php/Admin/Menus/Manage_Menu.php | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index b1318436b..0d311c353 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -279,12 +279,12 @@ public static function get_default_snippets_per_page(): int {
 		return max( 1, intval( $default ) );
 	}
 
-		/**
-         * Count non-trashed snippets per type with a single grouped query, so the
-         * type tabs can render their counts without loading full snippet data.
-         *
-         * @return array<string, int> Map of type name to snippet count, including 'all'.
-         */
+	/**
+	 * Count non-trashed snippets per type with a single grouped query, so the
+	 * type tabs can render their counts without loading full snippet data.
+	 *
+	 * @return array<string, int> Map of type name to snippet count, including 'all'.
+	 */
 	private function count_snippets_by_type(): array {
 		global $wpdb;
 		$table = code_snippets()->db->get_table_name();

From e14d5de3eae09363086c28dcb1ce2be3c1094e93 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:25:51 +0300
Subject: [PATCH 12/49] fix: hide modifying actions in preview modal for
 read-only snippets

---
 .../components/common/SnippetPreviewModal.tsx | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 9216ee510..6b0a4b825 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -5,7 +5,7 @@ import { useSnippetsAPI } from '../../hooks/useSnippetsAPI'
 import { useSnippetsList } from '../../hooks/useSnippetsList'
 import { handleUnknownError } from '../../utils/errors'
 import { downloadSnippetExportFile } from '../../utils/files'
-import { cloneSnippetObject, getSnippetEditUrl } from '../../utils/snippets/snippets'
+import { canModifySnippet, cloneSnippetObject, getSnippetEditUrl } from '../../utils/snippets/snippets'
 import { Badge } from './Badge'
 import { Button } from './Button'
 import { useDeleteSnippet } from './DeleteButton'
@@ -42,24 +42,27 @@ interface SnippetPreviewButtonsProps extends SnippetPreviewActionsProps {
 const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet, closeModal, requestDelete }) => {
 	const api = useSnippetsAPI()
 	const { refreshSnippetsList } = useSnippetsList()
+	const canModify = canModifySnippet(snippet)
 
 	return (
 		<div className="code-snippets-preview-modal__buttons">
 			<a className="button button-primary" href={getSnippetEditUrl(snippet)}>
-				{snippet.locked ? __('View', 'code-snippets') : __('Edit', 'code-snippets')}
+				{snippet.locked || !canModify ? __('View', 'code-snippets') : __('Edit', 'code-snippets')}
 			</a>
 
-			<Button
-				secondary
-				onClick={() => {
-					api.create(cloneSnippetObject(snippet))
-						.then(refreshSnippetsList)
-						.then(closeModal)
-						.catch(handleUnknownError)
-				}}
-			>
-				{__('Clone', 'code-snippets')}
-			</Button>
+			{canModify
+				? <Button
+					secondary
+					onClick={() => {
+						api.create(cloneSnippetObject(snippet))
+							.then(refreshSnippetsList)
+							.then(closeModal)
+							.catch(handleUnknownError)
+					}}
+				>
+					{__('Clone', 'code-snippets')}
+				</Button>
+				: null}
 
 			<Button
 				secondary
@@ -72,7 +75,7 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet,
 				{__('Export', 'code-snippets')}
 			</Button>
 
-			{snippet.locked
+			{snippet.locked || !canModify
 				? null
 				: <Button
 					link

From 947035d08a54661be333d0c3a028dc4e95e85fec Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:33:50 +0300
Subject: [PATCH 13/49] fix: degrade snippet preview gracefully when the code
 editor is unavailable

---
 src/css/common/_modal.scss                                | 8 ++++++++
 .../components/EditMenu/SnippetForm/fields/CodeEditor.tsx | 2 +-
 src/js/components/common/SnippetPreviewModal.tsx          | 4 ++--
 src/js/services/settings/editor-preview.ts                | 2 +-
 src/js/types/Window.ts                                    | 2 +-
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index 3f5c71f3b..28f38528f 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -107,6 +107,14 @@
 			min-block-size: 0;
 			block-size: 100%;
 		}
+
+		textarea {
+			flex: 1;
+			min-block-size: 0;
+			inline-size: 100%;
+			resize: none;
+			font-family: monospace;
+		}
 	}
 
 	.code-snippets-preview-modal__footer {
diff --git a/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx b/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx
index c816b93a6..b09c2cacb 100644
--- a/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx
@@ -80,7 +80,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({ isExpanded, setIsExpande
 
 	useEffect(() => {
 		setCodeEditorInstance(editorInstance => {
-			if (textareaRef.current && !editorInstance) {
+			if (textareaRef.current && !editorInstance && window.wp.codeEditor) {
 				editorInstance = window.wp.codeEditor.initialize(textareaRef.current)
 
 				editorInstance.codemirror.on('changes', instance => {
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 6b0a4b825..1e3ee3604 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -135,13 +135,13 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
 
 	useEffect(() => {
-		if (!isOpen || !textareaRef.current) {
+		if (!isOpen || !textareaRef.current || !window.wp.codeEditor) {
 			return undefined
 		}
 
 		const instance = window.wp.codeEditor.initialize(textareaRef.current, {
 			codemirror: {
-				readOnly: true,
+				readOnly: 'nocursor',
 				lineNumbers: true,
 				theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
 				mode: EDITOR_MODES[type] ?? EDITOR_MODES.php
diff --git a/src/js/services/settings/editor-preview.ts b/src/js/services/settings/editor-preview.ts
index 7e3ac9f5b..637b30fb6 100644
--- a/src/js/services/settings/editor-preview.ts
+++ b/src/js/services/settings/editor-preview.ts
@@ -8,7 +8,7 @@ const initialiseCodeMirror = () => {
 	const { codeEditor } = window.wp
 	const textarea = document.getElementById('code_snippets_editor_preview')
 
-	if (textarea) {
+	if (textarea && codeEditor) {
 		window.code_snippets_editor_preview = codeEditor.initialize(textarea)
 		return window.code_snippets_editor_preview.codemirror
 	}
diff --git a/src/js/types/Window.ts b/src/js/types/Window.ts
index a2eac25ee..2c0eb5986 100644
--- a/src/js/types/Window.ts
+++ b/src/js/types/Window.ts
@@ -11,7 +11,7 @@ declare global {
 	interface Window {
 		readonly wp: {
 			readonly editor?: WordPressEditor
-			readonly codeEditor: WordPressCodeEditor
+			readonly codeEditor?: WordPressCodeEditor
 		}
 		readonly pagenow: string
 		readonly ajaxurl: string

From 3686e0665e66d42fc2f6c2c92943b443bc9854b6 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:34:40 +0300
Subject: [PATCH 14/49] fix: correct preview modal title prop type mismatch

---
 src/js/components/common/SnippetPreviewModal.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 1e3ee3604..0d6ae482c 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -10,9 +10,14 @@ import { Badge } from './Badge'
 import { Button } from './Button'
 import { useDeleteSnippet } from './DeleteButton'
 import type { BadgeName } from './Badge'
+import type { ComponentProps, ReactNode } from 'react'
 import type { EditorFromTextArea } from 'codemirror'
 import type { Snippet } from '../../types/Snippet'
 
+// The vendor type only declares `title` as a string, but the component renders
+// it as a plain ReactNode, which is needed here to include the type badge.
+const ModalWithNodeTitle = Modal as React.FC<Omit<ComponentProps<typeof Modal>, 'title'> & { title?: ReactNode }>
+
 export interface SnippetPreviewModalProps {
 	title: string
 	code: string
@@ -154,7 +159,7 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 	}, [isOpen, type])
 
 	return isOpen
-		? <Modal
+		? <ModalWithNodeTitle
 			className="code-snippets-preview-modal"
 			onRequestClose={() => setIsOpen(false)}
 			title={
@@ -176,6 +181,6 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			{snippet
 				? <SnippetPreviewActions snippet={snippet} closeModal={() => setIsOpen(false)} />
 				: null}
-		</Modal>
+		</ModalWithNodeTitle>
 		: null
 }

From 2c72537f705410142492371317b29fd1809c35a7 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 15:50:16 +0300
Subject: [PATCH 15/49] fix: lead snippet type options with the language badge

---
 .../SnippetForm/fields/SnippetTypeInput.tsx        | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx b/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
index 77b4d0120..655cd8982 100644
--- a/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
@@ -35,15 +35,13 @@ interface SnippetTypeOptionProps {
 
 const SnippetTypeOption: React.FC<SnippetTypeOptionProps> = ({ option: { value, label }, context }) =>
 	<div className={classnames('snippet-type-option', { 'inverted-badges': isProType(value) && !isLicensed() })}>
-		{'menu' === context
-			? <div>
-				{label}
-				{isProType(value) && !isLicensed()
-					? <Badge name="pro" small>{_x('Pro', 'Upgrade to Pro', 'code-snippets')}</Badge>
-					: null}
-			</div>
+		<span className="snippet-type-option-main">
+			<Badge name={value} />
+			{'menu' === context ? label : null}
+		</span>
+		{'menu' === context && isProType(value) && !isLicensed()
+			? <Badge name="pro" small>{_x('Pro', 'Upgrade to Pro', 'code-snippets')}</Badge>
 			: null}
-		<Badge name={value} />
 	</div>
 
 export const SnippetTypeInput: React.FC<SnippetTypeInputProps> = ({ setIsUpgradeDialogOpen }) => {

From a83e5fcc52dabaac5e6f057eda513b1ea5d103f1 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 15:50:26 +0300
Subject: [PATCH 16/49] fix: match location selector height to the conditions
 button

---
 src/css/edit/_form.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/css/edit/_form.scss b/src/css/edit/_form.scss
index 41df1bdd4..59a97a24f 100644
--- a/src/css/edit/_form.scss
+++ b/src/css/edit/_form.scss
@@ -38,6 +38,12 @@ $sidebar-gap: 30px;
 	flex-flow: row;
 	gap: 2em;
 
+	.snippet-type-option-main {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
 	.small-badge {
 		margin-inline-start: 0.5em;
 	}
@@ -145,3 +151,12 @@ $sidebar-gap: 30px;
 		min-inline-size: 180px;
 	}
 }
+
+// Match the location selector's control height to the adjacent conditions
+// button so the two sidebar controls line up. This targets a different
+// container than the type selector rules above, so their relative order does
+// not affect the cascade.
+// stylelint-disable-next-line no-descending-specificity
+.snippet-editor-sidebar .code-snippets-select.code-snippets-select-location > div:first-of-type {
+	min-block-size: 48px;
+}

From a6c96238cc86c47d6e7c1092590bd1b363456061 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 01:18:17 +0300
Subject: [PATCH 17/49] fix: harden preview modal interactions

---
 .../components/common/SnippetPreviewModal.tsx | 113 ++++++++++++++----
 1 file changed, 91 insertions(+), 22 deletions(-)

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 95b4e7fe1..b3eb93e97 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -1,6 +1,6 @@
 import { Modal } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useSnippetsAPI } from '../../hooks/useSnippetsAPI'
 import { useSnippetsList } from '../../hooks/useSnippetsList'
 import { handleUnknownError } from '../../utils/errors'
@@ -10,14 +10,9 @@ import { Badge } from './Badge'
 import { Button } from './Button'
 import { useDeleteSnippet } from './DeleteButton'
 import type { BadgeName } from './Badge'
-import type { ComponentProps, ReactNode } from 'react'
 import type { EditorFromTextArea } from 'codemirror'
 import type { Snippet } from '../../types/Snippet'
 
-// The vendor type only declares `title` as a string, but the component renders
-// it as a plain ReactNode, which is needed here to include the type badge.
-const ModalWithNodeTitle = Modal as React.FC<Omit<ComponentProps<typeof Modal>, 'title'> & { title?: ReactNode }>
-
 export interface SnippetPreviewModalProps {
 	title: string
 	code: string
@@ -42,12 +37,64 @@ interface SnippetPreviewActionsProps {
 
 interface SnippetPreviewButtonsProps extends SnippetPreviewActionsProps {
 	requestDelete: () => void
+	isWorking: boolean
+	beginWorking: () => boolean
+	finishWorking: () => void
 }
 
-const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet, closeModal, requestDelete }) => {
+const usePreviewActionHandlers = ({
+	snippet,
+	closeModal,
+	beginWorking,
+	finishWorking
+}: Omit<SnippetPreviewButtonsProps, 'requestDelete' | 'isWorking'>) => {
 	const api = useSnippetsAPI()
 	const { refreshSnippetsList } = useSnippetsList()
+	const handleClone = () => {
+		if (!beginWorking()) {
+			return
+		}
+
+		api.create(cloneSnippetObject(snippet))
+			.then(refreshSnippetsList)
+			.then(() => {
+				finishWorking()
+				closeModal()
+			})
+			.catch((error: unknown) => {
+				finishWorking()
+				handleUnknownError(error)
+			})
+	}
+	const handleExport = () => {
+		if (!beginWorking()) {
+			return
+		}
+
+		api.export(snippet)
+			.then(response => downloadSnippetExportFile(response, snippet))
+			.catch(handleUnknownError)
+			.finally(finishWorking)
+	}
+
+	return { handleClone, handleExport }
+}
+
+const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({
+	snippet,
+	closeModal,
+	requestDelete,
+	isWorking,
+	beginWorking,
+	finishWorking
+}) => {
 	const canModify = canModifySnippet(snippet)
+	const { handleClone, handleExport } = usePreviewActionHandlers({
+		snippet,
+		closeModal,
+		beginWorking,
+		finishWorking
+	})
 
 	return (
 		<div className="code-snippets-preview-modal__buttons">
@@ -58,12 +105,8 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet,
 			{canModify
 				? <Button
 					secondary
-					onClick={() => {
-						api.create(cloneSnippetObject(snippet))
-							.then(refreshSnippetsList)
-							.then(closeModal)
-							.catch(handleUnknownError)
-					}}
+					disabled={isWorking}
+					onClick={handleClone}
 				>
 					{__('Clone', 'code-snippets')}
 				</Button>
@@ -71,11 +114,8 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet,
 
 			<Button
 				secondary
-				onClick={() => {
-					api.export(snippet)
-						.then(response => downloadSnippetExportFile(response, snippet))
-						.catch(handleUnknownError)
-				}}
+				disabled={isWorking}
+				onClick={handleExport}
 			>
 				{__('Export', 'code-snippets')}
 			</Button>
@@ -85,6 +125,7 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet,
 				: <Button
 					link
 					className="code-snippets-preview-modal__trash"
+					disabled={isWorking}
 					onClick={requestDelete}
 				>
 					{__('Trash', 'code-snippets')}
@@ -93,6 +134,25 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet,
 	)
 }
 
+const useWorkingState = () => {
+	const [isWorking, setIsWorking] = useState(false)
+	const isWorkingRef = useRef(false)
+	const updateWorking = (value: boolean) => {
+		isWorkingRef.current = value
+		setIsWorking(value)
+	}
+	const beginWorking = () => {
+		if (isWorkingRef.current) {
+			return false
+		}
+
+		updateWorking(true)
+		return true
+	}
+
+	return { isWorking, beginWorking, finishWorking: () => updateWorking(false), setIsWorking: updateWorking }
+}
+
 /**
  * Footer action bar for previews of local snippets. Requires the snippets API
  * and snippets list contexts, so it is only rendered when the modal receives a
@@ -100,8 +160,10 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({ snippet,
  */
 const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({ snippet, closeModal }) => {
 	const { refreshSnippetsList } = useSnippetsList()
+	const { isWorking, beginWorking, finishWorking, setIsWorking } = useWorkingState()
 	const { requestDelete, confirmDialog } = useDeleteSnippet({
 		snippet,
+		setIsWorking,
 		onSuccess: () => {
 			closeModal()
 			return refreshSnippetsList()
@@ -111,7 +173,14 @@ const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({ snippet,
 
 	return (
 		<div className="code-snippets-preview-modal__footer">
-			<SnippetPreviewButtons snippet={snippet} closeModal={closeModal} requestDelete={requestDelete} />
+			<SnippetPreviewButtons
+				snippet={snippet}
+				closeModal={closeModal}
+				requestDelete={requestDelete}
+				isWorking={isWorking}
+				beginWorking={beginWorking}
+				finishWorking={finishWorking}
+			/>
 
 			<div className="code-snippets-preview-modal__priority">
 				<span>{__('Priority', 'code-snippets')}</span>
@@ -146,7 +215,7 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 
 		const instance = window.wp.codeEditor.initialize(textareaRef.current, {
 			codemirror: {
-				readOnly: 'nocursor',
+				readOnly: true,
 				lineNumbers: true,
 				theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
 				mode: EDITOR_MODES[type] ?? EDITOR_MODES.php
@@ -159,7 +228,7 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 	}, [isOpen, type])
 
 	return isOpen
-		? <ModalWithNodeTitle
+		? <Modal
 			className="code-snippets-preview-modal"
 			onRequestClose={() => setIsOpen(false)}
 			title={title}
@@ -177,6 +246,6 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			{snippet
 				? <SnippetPreviewActions snippet={snippet} closeModal={() => setIsOpen(false)} />
 				: null}
-		</ModalWithNodeTitle>
+		</Modal>
 		: null
 }

From b093545a177809e8ba60a62cba59c06d13c1ec86 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 01:18:26 +0300
Subject: [PATCH 18/49] fix: cover grouped snippet type counts

---
 tests/unit/Admin/Menus/Manage_Menu_Test.php | 30 +++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/tests/unit/Admin/Menus/Manage_Menu_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Test.php
index 7c945fcad..c6ef52add 100644
--- a/tests/unit/Admin/Menus/Manage_Menu_Test.php
+++ b/tests/unit/Admin/Menus/Manage_Menu_Test.php
@@ -10,6 +10,7 @@
 use WP_UnitTest_Factory;
 use function Code_Snippets\code_snippets;
 use function Code_Snippets\save_snippet;
+use function Code_Snippets\trash_snippet;
 
 /**
  * Tests for the manage menu registration.
@@ -124,6 +125,35 @@ public function test_enqueue_assets_loads_preview_editor_without_full_editor_dep
 		$this->assertFalse( wp_script_is( 'code-snippets-code-editor', 'enqueued' ) );
 	}
 
+	/**
+	 * Type counts combine compatible scopes and exclude trashed snippets.
+	 *
+	 * @return void
+	 *
+	 * @throws ReflectionException Creates instance of ReflectionMethod class.
+	 */
+	public function test_count_snippets_by_type_groups_scopes_and_excludes_trashed_snippets(): void {
+		$menu = new Manage_Menu();
+		$method = new ReflectionMethod( $menu, 'count_snippets_by_type' );
+		$method->setAccessible( true );
+		$before = $method->invoke( $menu );
+
+		save_snippet( new Snippet( [ 'scope' => 'global' ] ) );
+		save_snippet( new Snippet( [ 'scope' => 'admin' ] ) );
+		save_snippet( new Snippet( [ 'scope' => 'content' ] ) );
+		$trashed = save_snippet( new Snippet( [ 'scope' => 'site-css' ] ) );
+
+		$this->assertInstanceOf( Snippet::class, $trashed );
+		trash_snippet( $trashed->id );
+
+		$after = $method->invoke( $menu );
+
+		$this->assertSame( ( $before['all'] ?? 0 ) + 3, $after['all'] );
+		$this->assertSame( ( $before['php'] ?? 0 ) + 2, $after['php'] );
+		$this->assertSame( ( $before['html'] ?? 0 ) + 1, $after['html'] );
+		$this->assertSame( $before['css'] ?? 0, $after['css'] ?? 0 );
+	}
+
 	/**
 	 * The manage screen renders a truncation toggle in Screen Options.
 	 *

From 3979a45360b13a67e45e1cb1bd69573332c8a77b Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 01:18:43 +0300
Subject: [PATCH 19/49] fix: cover preview modal mutation paths

---
 tests/e2e/code-snippets-list.spec.ts | 49 ++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts
index 0875a0801..64eedf688 100644
--- a/tests/e2e/code-snippets-list.spec.ts
+++ b/tests/e2e/code-snippets-list.spec.ts
@@ -87,6 +87,55 @@ test.describe('Code Snippets List Page Actions', () => {
 		await expect(page.locator(SELECTORS.SNIPPETS_TABLE)).toBeVisible()
 	})
 
+	test('Can clone a snippet once from the preview modal', async ({ page }) => {
+		let createRequests = 0
+
+		await page.route('**/wp-json/code-snippets/v1/snippets*', async route => {
+			const request = route.request()
+			const isCreateRequest = 'POST' === request.method() && /\/snippets\/?(?:\?.*)?$/.test(request.url())
+
+			if (isCreateRequest) {
+				createRequests += 1
+				await new Promise(resolve => setTimeout(resolve, 500))
+			}
+
+			await route.continue()
+		})
+
+		const snippetRow = page
+			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
+			.first()
+		await snippetRow.getByRole('button', { name: 'Preview' }).click()
+
+		const previewModal = page.getByRole('dialog', { name: snippetName })
+		const cloneButton = previewModal.getByRole('button', { name: 'Clone' })
+		await cloneButton.click()
+		await expect(cloneButton).toBeDisabled()
+		await cloneButton.click({ force: true })
+
+		await expect(previewModal).toBeHidden()
+		expect(createRequests).toBe(1)
+		await helper.cleanupSnippet(`${snippetName} [CLONE]`)
+	})
+
+	test('Can trash a snippet from the preview modal', async ({ page }) => {
+		const snippetRow = page
+			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
+			.first()
+		await snippetRow.getByRole('button', { name: 'Preview' }).click()
+
+		const previewModal = page.getByRole('dialog', { name: snippetName })
+		await previewModal.getByRole('button', { name: 'Trash' }).click()
+
+		const confirmDialog = page.getByRole('dialog', { name: 'Are you sure?' })
+		await confirmDialog.getByRole('button', { name: 'Trash' }).click()
+		await expect(previewModal).toBeHidden()
+
+		await page.locator('a[href*="status=trashed"]').first().click()
+		await expect(page).toHaveURL(/status=trashed/)
+		await expect(page.locator(`${SELECTORS.SNIPPET_ROW}:has-text("${snippetName}")`).first()).toBeVisible()
+	})
+
 	test('Can delete snippet from list page', async ({ page }) => {
 		const snippetRow = page
 			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)

From 6c516be2385e2e3b87778aeacd5196580386aac2 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 01:20:23 +0300
Subject: [PATCH 20/49] fix: cap cloud pagination before REST validation

---
 src/php/Admin/Menus/Manage_Menu.php                       | 4 +++-
 src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php | 7 +++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index 7b7da87a4..695647a34 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -3,6 +3,7 @@
 namespace Code_Snippets\Admin\Menus;
 
 use Code_Snippets\Admin\Contextual_Help;
+use Code_Snippets\Controller\Cloud_Search_Controller;
 use Code_Snippets\Integration\Evaluate_Functions;
 use Code_Snippets\Migration\Export\Download_Code;
 use Code_Snippets\Model\Snippet;
@@ -264,7 +265,8 @@ function ( $snippet ) {
 	 * @return int
 	 */
 	public static function get_cloud_search_per_page(): int {
-		return intval( apply_filters( 'code_snippets/cloud_search/per_page', self::get_snippets_per_page() ) );
+		$per_page = intval( apply_filters( 'code_snippets/cloud_search/per_page', self::get_snippets_per_page() ) );
+		return min( Cloud_Search_Controller::MAX_RESULTS_PER_PAGE, max( 1, $per_page ) );
 	}
 
 	/**
diff --git a/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php b/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
index effa5549d..001ee9d47 100644
--- a/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
+++ b/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
@@ -195,13 +195,16 @@ public function register_routes() {
 	}
 
 	/**
-	 * Augment the standard controller collection query params with the correct per_page default value.
+	 * Return collection parameters without a route-level per-page default.
 	 *
 	 * @return array Query parameters for the collection.
 	 */
 	public function get_collection_params(): array {
 		$params = parent::get_collection_params();
-		$params['per_page']['default'] = Manage_Menu::get_cloud_search_per_page();
+
+		// REST route defaults are registered globally, while this value belongs to the current user.
+		unset( $params['per_page']['default'] );
+
 		return $params;
 	}
 

From 47d8f75325fd71350ea117fbc221f05b092d4ab3 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:11:20 +0300
Subject: [PATCH 21/49] fix: confirm dirty history navigation

---
 .../EditorSidebar/controls/LockControl.tsx    |  4 +-
 .../EditMenu/SnippetForm/SnippetForm.tsx      | 38 +++++++++++++------
 .../SnippetForm/WithSnippetFormContext.tsx    | 30 ++++++++++++++-
 src/js/hooks/useSubmitSnippet.tsx             |  6 +--
 tests/e2e/code-snippets-edit.spec.ts          | 26 +++++++++++++
 5 files changed, 87 insertions(+), 17 deletions(-)

diff --git a/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx b/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx
index a6f929918..ba0441f0a 100644
--- a/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx
+++ b/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx
@@ -6,7 +6,7 @@ import { TooltipButton } from '../../../common/TooltipButton'
 import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
 
 export const LockControl: React.FC = () => {
-	const { snippet, setSnippet, isWorking, setIsWorking, setCurrentNotice } = useSnippetForm()
+	const { acceptSnippet, snippet, setSnippet, isWorking, setIsWorking, setCurrentNotice } = useSnippetForm()
 	const { update } = useSnippetsAPI()
 
 	const handleToggle = () => {
@@ -15,7 +15,7 @@ export const LockControl: React.FC = () => {
 
 		update({ id: snippet.id, network: snippet.network, locked: !snippet.locked })
 			.then(result => {
-				setSnippet(result)
+				acceptSnippet(result)
 
 				setCurrentNotice(['updated', result.locked
 					? __('Snippet <strong>locked</strong>.', 'code-snippets')
diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index 6ccede60f..9b6d7ccc8 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import { __ } from '@wordpress/i18n'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
@@ -141,20 +141,36 @@ const ConditionsEditor: React.FC = () => {
 		: null
 }
 
-const EditFormWrap: React.FC = () => {
-	const { snippet, isReadOnly } = useSnippetForm()
-	const [isExpanded, setIsExpanded] = useState(false)
-	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
+const useReloadOnPopState = (isDirty: boolean) => {
+	const currentUrl = useRef(window.location.href)
 
-	// The Add New link and the post-save transition swap the snippet in place via
-	// history.pushState (no reload). Without this, the browser Back/Forward buttons
-	// change the URL but leave the stale form mounted; reload so the server
-	// re-renders the snippet that matches the restored URL.
 	useEffect(() => {
-		const handlePopState = () => window.location.reload()
+		currentUrl.current = window.location.href
+	})
+
+	useEffect(() => {
+		const handlePopState = () => {
+			if (isDirty && !window.confirm(
+				__('You have unsaved changes. Leave this page and discard them?', 'code-snippets')
+			)) {
+				window.history.pushState({}, document.title, currentUrl.current)
+				return
+			}
+
+			window.location.reload()
+		}
+
 		window.addEventListener('popstate', handlePopState)
 		return () => window.removeEventListener('popstate', handlePopState)
-	}, [])
+	}, [isDirty])
+}
+
+const EditFormWrap: React.FC = () => {
+	const { snippet, isReadOnly, isDirty } = useSnippetForm()
+	const [isExpanded, setIsExpanded] = useState(false)
+	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
+
+	useReloadOnPopState(isDirty)
 
 	return (
 		<>
diff --git a/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx b/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
index 6c909dce3..d96be6666 100644
--- a/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
+++ b/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
@@ -12,7 +12,9 @@ export interface SnippetFormContext {
 	snippet: Snippet
 	isWorking: boolean
 	isReadOnly: boolean
+	isDirty: boolean
 	setSnippet: Dispatch<SetStateAction<Snippet>>
+	acceptSnippet: (snippet: Snippet) => void
 	updateSnippet: Dispatch<SetStateAction<Snippet>>
 	setIsWorking: Dispatch<SetStateAction<boolean>>
 	currentNotice: ScreenNotice | undefined
@@ -28,8 +30,24 @@ export interface WithSnippetFormContextProps extends PropsWithChildren {
 	initialSnippet: () => Snippet
 }
 
+const getSnippetDraftState = (snippet: Snippet) => ({
+	name: snippet.name,
+	desc: snippet.desc,
+	code: snippet.code,
+	tags: snippet.tags,
+	scope: snippet.scope,
+	priority: snippet.priority,
+	active: snippet.active,
+	locked: snippet.locked,
+	network: snippet.network,
+	sharedNetwork: snippet.shared_network,
+	conditionId: snippet.conditionId
+})
+
 export const WithSnippetFormContext: React.FC<WithSnippetFormContextProps> = ({ children, initialSnippet }) => {
-	const [snippet, setSnippet] = useState<Snippet>(initialSnippet)
+	const [initialValue] = useState<Snippet>(initialSnippet)
+	const [snippet, setSnippet] = useState<Snippet>(initialValue)
+	const [savedSnippet, setSavedSnippet] = useState<Snippet>(initialValue)
 	const [isWorking, setIsWorking] = useState(false)
 	const [currentNotice, setCurrentNotice] = useState<ScreenNotice>()
 	const [codeEditorInstance, setCodeEditorInstance] = useState<CodeEditorInstance>()
@@ -38,6 +56,14 @@ export const WithSnippetFormContext: React.FC<WithSnippetFormContextProps> = ({
 		() => snippet.locked || !isLicensed() && isProSnippet({ scope: snippet.scope }),
 		[snippet.locked, snippet.scope]
 	)
+	const isDirty = useMemo(
+		() => JSON.stringify(getSnippetDraftState(snippet)) !== JSON.stringify(getSnippetDraftState(savedSnippet)),
+		[snippet, savedSnippet]
+	)
+	const acceptSnippet = useCallback((value: Snippet) => {
+		setSnippet(value)
+		setSavedSnippet(value)
+	}, [])
 
 	const handleRequestError = useCallback((error: unknown, message?: string) => {
 		console.error('Request failed', error)
@@ -58,7 +84,9 @@ export const WithSnippetFormContext: React.FC<WithSnippetFormContextProps> = ({
 		snippet,
 		isWorking,
 		isReadOnly,
+		isDirty,
 		setSnippet,
+		acceptSnippet,
 		setIsWorking,
 		updateSnippet,
 		currentNotice,
diff --git a/src/js/hooks/useSubmitSnippet.tsx b/src/js/hooks/useSubmitSnippet.tsx
index 448f04bbd..827ec36d5 100644
--- a/src/js/hooks/useSubmitSnippet.tsx
+++ b/src/js/hooks/useSubmitSnippet.tsx
@@ -90,7 +90,7 @@ export interface UseSubmitSnippet {
 
 export const useSubmitSnippet = (): UseSubmitSnippet => {
 	const api = useSnippetsAPI()
-	const { setIsWorking, setCurrentNotice, setSnippet } = useSnippetForm()
+	const { acceptSnippet, setIsWorking, setCurrentNotice } = useSnippetForm()
 
 	const submitSnippet: UseSubmitSnippet['submitSnippet'] = useCallback(async (snippet, action) => {
 		setCurrentNotice(undefined)
@@ -132,7 +132,7 @@ export const useSubmitSnippet = (): UseSubmitSnippet => {
 			return undefined
 		}
 
-		setSnippet(result)
+		acceptSnippet(result)
 
 		if (result.code_error && SubmitSnippetAction.SAVE_AND_ACTIVATE === action) {
 			setCurrentNotice(getActivationErrorNotice(result))
@@ -146,7 +146,7 @@ export const useSubmitSnippet = (): UseSubmitSnippet => {
 		}
 
 		return result
-	}, [api, setIsWorking, setCurrentNotice, setSnippet])
+	}, [acceptSnippet, api, setIsWorking, setCurrentNotice])
 
 	return { submitSnippet }
 }
diff --git a/tests/e2e/code-snippets-edit.spec.ts b/tests/e2e/code-snippets-edit.spec.ts
index 389b85c9d..4c33d9c48 100644
--- a/tests/e2e/code-snippets-edit.spec.ts
+++ b/tests/e2e/code-snippets-edit.spec.ts
@@ -83,6 +83,32 @@ test.describe('Code Snippets Admin', () => {
 		await helper.cleanupSnippet(snippetName)
 	})
 
+	test('Back navigation confirms before discarding unsaved changes', async ({ page }) => {
+		const snippetName = SnippetsTestHelper.makeUniqueSnippetName()
+		await helper.createSnippet({
+			name: snippetName,
+			code: "add_filter('show_admin_bar', '__return_false');"
+		})
+		await helper.openSnippet(snippetName)
+
+		const editedName = `${snippetName} edited`
+		await page.locator('#title').fill(editedName)
+		page.once('dialog', async dialog => {
+			expect(dialog.message()).toContain('unsaved changes')
+			await dialog.dismiss()
+		})
+		await page.goBack()
+
+		await expect(page).toHaveURL(/page=edit-snippet/)
+		await expect(page.locator('#title')).toHaveValue(editedName)
+
+		page.once('dialog', dialog => dialog.accept())
+		await page.goBack()
+		await expect(page).toHaveURL(/page=snippets/)
+
+		await helper.cleanupSnippet(snippetName)
+	})
+
 	test('Shows an error notice when activation fails after saving', async ({ page }) => {
 		const snippetName = SnippetsTestHelper.makeUniqueSnippetName()
 		await helper.clickAddNewSnippet()

From c7c0f2129a071a03eeb7ee10546ee04f06cc7925 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:11:29 +0300
Subject: [PATCH 22/49] fix: simplify kebab menu focus handling

---
 src/js/components/common/KebabMenu.tsx | 99 +++++++++++++++-----------
 1 file changed, 57 insertions(+), 42 deletions(-)

diff --git a/src/js/components/common/KebabMenu.tsx b/src/js/components/common/KebabMenu.tsx
index 411cb8756..09484a609 100644
--- a/src/js/components/common/KebabMenu.tsx
+++ b/src/js/components/common/KebabMenu.tsx
@@ -113,6 +113,61 @@ const usePopoverPlacement = ({ isOpen, triggerRef, popoverRef }: PopoverBehaviou
 	return isFlipped
 }
 
+const movePopoverFocus = (
+	event: KeyboardEvent,
+	focusable: HTMLElement[],
+	currentIndex: number
+): boolean => {
+	if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+		return false
+	}
+
+	if (0 < focusable.length) {
+		event.preventDefault()
+		const offset = 'ArrowDown' === event.key ? currentIndex + 1 : currentIndex - 1
+		const target = 'Home' === event.key
+			? 0
+			: 'End' === event.key ? focusable.length - 1 : (offset + focusable.length) % focusable.length
+		focusable[target].focus()
+	}
+
+	return true
+}
+
+const handlePopoverKeyDown = (
+	event: KeyboardEvent,
+	popover: HTMLUListElement | null,
+	closeMenu: () => void
+) => {
+	if ('Escape' === event.key) {
+		event.preventDefault()
+		closeMenu()
+		return
+	}
+
+	if (!popover) {
+		return
+	}
+
+	const focusable = Array.from(popover.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+	const active = document.activeElement
+	const currentIndex = active instanceof HTMLElement ? focusable.indexOf(active) : -1
+
+	if (movePopoverFocus(event, focusable, currentIndex) || 'Tab' !== event.key) {
+		return
+	}
+
+	if (0 === focusable.length) {
+		event.preventDefault()
+	} else if (event.shiftKey && 0 >= currentIndex) {
+		event.preventDefault()
+		focusable[focusable.length - 1].focus()
+	} else if (!event.shiftKey && (-1 === currentIndex || currentIndex === focusable.length - 1)) {
+		event.preventDefault()
+		focusable[0].focus()
+	}
+}
+
 // Close the open popover on outside clicks or Escape, and trap Tab focus
 // within it while it remains open.
 const usePopoverDismissal = ({ isOpen, setIsOpen, closeMenu, containerRef, popoverRef }: PopoverBehaviourOptions) => {
@@ -127,48 +182,8 @@ const usePopoverDismissal = ({ isOpen, setIsOpen, closeMenu, containerRef, popov
 			}
 		}
 
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if ('Escape' === event.key) {
-				event.preventDefault()
-				closeMenu()
-				return
-			}
-
-			if (!popoverRef.current) {
-				return
-			}
-
-			const focusable = Array.from(popoverRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
-			const active = document.activeElement
-			const currentIndex = active instanceof HTMLElement ? focusable.indexOf(active) : -1
-
-			if ('ArrowDown' === event.key || 'ArrowUp' === event.key || 'Home' === event.key || 'End' === event.key) {
-				if (0 < focusable.length) {
-					event.preventDefault()
-					const offset = 'ArrowDown' === event.key ? currentIndex + 1 : currentIndex - 1
-					const target = 'Home' === event.key
-						? 0
-						: 'End' === event.key ? focusable.length - 1 : (offset + focusable.length) % focusable.length
-					focusable[target].focus()
-				}
-
-				return
-			}
-
-			if ('Tab' !== event.key) {
-				return
-			}
-
-			if (0 === focusable.length) {
-				event.preventDefault()
-			} else if (event.shiftKey && 0 >= currentIndex) {
-				event.preventDefault()
-				focusable[focusable.length - 1].focus()
-			} else if (!event.shiftKey && (-1 === currentIndex || currentIndex === focusable.length - 1)) {
-				event.preventDefault()
-				focusable[0].focus()
-			}
-		}
+		const handleKeyDown = (event: KeyboardEvent) =>
+			handlePopoverKeyDown(event, popoverRef.current, closeMenu)
 
 		document.addEventListener('mousedown', handlePointerDown)
 		document.addEventListener('keydown', handleKeyDown)

From c63a033f198bb0c49e4aaf3244fa01367cd2243b Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:11:38 +0300
Subject: [PATCH 23/49] fix: improve shared text contrast

---
 src/css/common/_subnav.scss          | 3 +--
 src/css/manage/_cloud-community.scss | 2 +-
 src/css/manage/_snippets-table.scss  | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 21bed856c..d5ad3f6ed 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -199,8 +199,7 @@
 	font-size: 14px;
 	font-weight: 600;
 	line-height: 1.5;
-	color: #2c3337;
-	opacity: 0.4;
+	color: #646970;
 }
 
 // The active tab's count adopts the accent alongside its label.
diff --git a/src/css/manage/_cloud-community.scss b/src/css/manage/_cloud-community.scss
index 53f2c55d3..cd43cd29f 100644
--- a/src/css/manage/_cloud-community.scss
+++ b/src/css/manage/_cloud-community.scss
@@ -158,7 +158,7 @@ $status-colors: (
 		}
 
 		.snippet-card-modified {
-			color: #6c7e7e;
+			color: #646970;
 			margin-inline-start: auto;
 		}
 	}
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 9e5d48acc..6c82a6a78 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -167,7 +167,7 @@
 		}
 
 		.snippet-card-modified {
-			color: #6c7e7e;
+			color: #646970;
 			margin-inline-start: auto;
 		}
 	}

From 3c81e3b1ba951d3eb38480684b4be76cbb82b1f8 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:11:39 +0300
Subject: [PATCH 24/49] fix: translate cloud author attribution

---
 .../components/ManageMenu/CommunityCloud/SearchResult.tsx  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
index 6d2bb56ae..bd8dab5de 100644
--- a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
@@ -19,9 +19,12 @@ export interface CloudSnippetAuthorProps {
 
 export const CloudSnippetAuthor: React.FC<CloudSnippetAuthorProps> = ({ snippet }) =>
 	<p className="cloud-snippet-author">
-		{_x('By ', 'snippet author', 'code-snippets')}
 		<a href={`${window.CODE_SNIPPETS?.urls.cloud}/codevault/${snippet.codevault}`} target="_blank" rel="noopener noreferrer">
-			{snippet.codevault}
+			{sprintf(
+				/* translators: %s: cloud library author name. */
+				_x('By %s', 'snippet author', 'code-snippets'),
+				snippet.codevault
+			)}
 		</a>
 	</p>
 

From fdc1171d46da5edd7a606587fc743128b490749f Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:11:48 +0300
Subject: [PATCH 25/49] fix: expose the inline snippets limit

---
 src/php/Admin/Menus/Manage_Menu.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index 695647a34..1531b842c 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -240,10 +240,11 @@ public function enqueue_assets() {
 		// table scan and inline payload on subpages that don't render the table.
 		if ( $this->is_manage_table_view() ) {
 			$snippets = get_snippets();
+			$inline_limit = max( 0, intval( apply_filters( 'code_snippets/manage/inline_snippets_limit', 100 ) ) );
 
 			// The inline payload includes full code bodies, so its size grows with
 			// library content; larger libraries defer to the REST fetch instead.
-			if ( count( $snippets ) <= 100 ) {
+			if ( 0 < $inline_limit && count( $snippets ) <= $inline_limit ) {
 				$localized['snippetsList'] = array_map(
 					function ( $snippet ) {
 						return $snippet->get_fields();

From 10437563810e951c04da633ee3d7d9b1c046538e Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:12:03 +0300
Subject: [PATCH 26/49] fix: cover manage menu review behavior

---
 tests/unit/Admin/Menus/Manage_Menu_Test.php | 42 +++++++++++++++++----
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/tests/unit/Admin/Menus/Manage_Menu_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Test.php
index c6ef52add..7f58b7200 100644
--- a/tests/unit/Admin/Menus/Manage_Menu_Test.php
+++ b/tests/unit/Admin/Menus/Manage_Menu_Test.php
@@ -126,13 +126,33 @@ public function test_enqueue_assets_loads_preview_editor_without_full_editor_dep
 	}
 
 	/**
-	 * Type counts combine compatible scopes and exclude trashed snippets.
+	 * The inline snippets threshold can be disabled for constrained installations.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_assets_applies_inline_snippets_limit_filter(): void {
+		add_filter( 'code_snippets/manage/inline_snippets_limit', '__return_zero' );
+
+		$menu = new Manage_Menu();
+		$menu->enqueue_assets();
+		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
+		$localized_offset = is_string( $data ) ? strrpos( $data, 'var CODE_SNIPPETS_MANAGE = ' ) : false;
+
+		remove_filter( 'code_snippets/manage/inline_snippets_limit', '__return_zero' );
+
+		$this->assertIsString( $data );
+		$this->assertNotFalse( $localized_offset );
+		$this->assertStringNotContainsString( '"snippetsList":', substr( $data, $localized_offset ) );
+	}
+
+	/**
+	 * Localized type counts combine compatible scopes and exclude trashed snippets.
 	 *
 	 * @return void
 	 *
 	 * @throws ReflectionException Creates instance of ReflectionMethod class.
 	 */
-	public function test_count_snippets_by_type_groups_scopes_and_excludes_trashed_snippets(): void {
+	public function test_enqueue_assets_localizes_grouped_non_trashed_type_counts(): void {
 		$menu = new Manage_Menu();
 		$method = new ReflectionMethod( $menu, 'count_snippets_by_type' );
 		$method->setAccessible( true );
@@ -146,12 +166,18 @@ public function test_count_snippets_by_type_groups_scopes_and_excludes_trashed_s
 		$this->assertInstanceOf( Snippet::class, $trashed );
 		trash_snippet( $trashed->id );
 
-		$after = $method->invoke( $menu );
-
-		$this->assertSame( ( $before['all'] ?? 0 ) + 3, $after['all'] );
-		$this->assertSame( ( $before['php'] ?? 0 ) + 2, $after['php'] );
-		$this->assertSame( ( $before['html'] ?? 0 ) + 1, $after['html'] );
-		$this->assertSame( $before['css'] ?? 0, $after['css'] ?? 0 );
+		$menu->enqueue_assets();
+		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
+		$prefix = 'var CODE_SNIPPETS_MANAGE = ';
+		$offset = is_string( $data ) ? strrpos( $data, $prefix ) : false;
+		$this->assertNotFalse( $offset );
+		$json = substr( $data, $offset + strlen( $prefix ) );
+		$localized = json_decode( substr( $json, 0, strrpos( $json, ';' ) ), true );
+
+		$this->assertSame( ( $before['all'] ?? 0 ) + 3, $localized['typeCounts']['all'] );
+		$this->assertSame( ( $before['php'] ?? 0 ) + 2, $localized['typeCounts']['php'] );
+		$this->assertSame( ( $before['html'] ?? 0 ) + 1, $localized['typeCounts']['html'] );
+		$this->assertSame( $before['css'] ?? 0, $localized['typeCounts']['css'] ?? 0 );
 	}
 
 	/**

From eaddcf5010bf9fc72cd0a4dcc04a94c055512f82 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:12:13 +0300
Subject: [PATCH 27/49] fix: cover Add New notice filtering

---
 tests/unit/Admin/Notice_Filter_Test.php | 26 ++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/tests/unit/Admin/Notice_Filter_Test.php b/tests/unit/Admin/Notice_Filter_Test.php
index 0d2455678..73f1b2ebd 100644
--- a/tests/unit/Admin/Notice_Filter_Test.php
+++ b/tests/unit/Admin/Notice_Filter_Test.php
@@ -51,12 +51,12 @@ public function set_up() {
 		parent::set_up();
 
 		wp_set_current_user( self::$admin_user_id );
-		set_current_screen( 'toplevel_page_' . code_snippets()->get_menu_slug() );
+		set_current_screen( 'dashboard' );
+
+		code_snippets()->admin = new Bootstrap_Admin();
+		code_snippets()->admin->load_classes();
 
-		if ( ! isset( code_snippets()->admin ) ) {
-			code_snippets()->admin = new Bootstrap_Admin();
-			code_snippets()->admin->load_classes();
-		}
+		set_current_screen( code_snippets()->admin->menus['manage']->get_hookname() );
 
 		$this->notice_filter = new Notice_Filter();
 	}
@@ -91,6 +91,22 @@ public function test_registers_filtering_on_code_snippets_screen(): void {
 		$this->assertNotFalse( has_action( 'admin_head', [ $this->notice_filter, 'print_fallback_styles' ] ) );
 	}
 
+	/**
+	 * The separate Add New editor screen also registers notice filtering.
+	 *
+	 * @return void
+	 */
+	public function test_registers_filtering_on_add_new_screen(): void {
+		$edit_menu = code_snippets()->admin->menus['edit'];
+		$hooknames = $edit_menu->get_hooknames();
+		set_current_screen( $hooknames[1] );
+
+		$this->notice_filter->register_filtering( get_current_screen() );
+
+		$this->assertNotFalse( has_action( 'admin_head', [ $this->notice_filter, 'filter_foreign_notices' ] ) );
+		$this->assertNotFalse( has_action( 'admin_head', [ $this->notice_filter, 'print_fallback_styles' ] ) );
+	}
+
 	/**
 	 * The filter_foreign_notices filter disables filtering when set to false.
 	 *

From 6479b1ef1b8f1880f851269603d822a6df6548ac Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:12:24 +0300
Subject: [PATCH 28/49] fix: cover snippet description sanitization

---
 tests/unit/Model/Snippet_Test.php | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 tests/unit/Model/Snippet_Test.php

diff --git a/tests/unit/Model/Snippet_Test.php b/tests/unit/Model/Snippet_Test.php
new file mode 100644
index 000000000..bb7005ab4
--- /dev/null
+++ b/tests/unit/Model/Snippet_Test.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace Code_Snippets\Model;
+
+use Code_Snippets\UnitTestCase;
+
+/**
+ * Tests for snippet field normalization.
+ */
+class Snippet_Test extends UnitTestCase {
+
+	/**
+	 * Descriptions preserve post-safe markup and strip executable elements.
+	 *
+	 * @return void
+	 */
+	public function test_description_sanitizes_remote_markup(): void {
+		$snippet = new Snippet(
+			[
+				'desc' => '<strong>Allowed</strong><script>alert("unsafe")</script>',
+			]
+		);
+
+		$this->assertStringContainsString( '<strong>Allowed</strong>', $snippet->desc );
+		$this->assertStringNotContainsString( '<script', $snippet->desc );
+	}
+}

From 2f33ee8d4d80781ba2dd5e70e15c62138ce8f3c5 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:12:34 +0300
Subject: [PATCH 29/49] fix: cover card pagination URL state

---
 tests/e2e/code-snippets-list.spec.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts
index 64eedf688..5e7422552 100644
--- a/tests/e2e/code-snippets-list.spec.ts
+++ b/tests/e2e/code-snippets-list.spec.ts
@@ -397,6 +397,23 @@ test.describe('Manage table Screen Options', () => {
 		}
 	}
 
+	test('Card pagination initializes from the page URL', async ({ page }) => {
+		await SnippetsTestHelper.setSnippetsPerPage(1)
+
+		try {
+			await helper.navigateToSnippetsAdmin()
+			await page.getByRole('button', { name: 'Card view' }).click()
+			await expect(page.locator('.snippets-card-grid')).toBeVisible()
+
+			await page.goto('/wp-admin/admin.php?page=snippets&paged=2')
+			await expect(page.locator('.tablenav.top .current-page')).toHaveValue('2')
+			await expect(page.locator('.snippets-card-grid .code-snippets-card')).toHaveCount(1)
+		} finally {
+			await page.getByRole('button', { name: 'Table view' }).click().catch(() => undefined)
+			await SnippetsTestHelper.resetSnippetsPerPage()
+		}
+	})
+
 	test('Column visibility toggle hides and shows columns in real time', async ({ page }) => {
 		await openScreenOptions(page)
 

From fa9dc55c2b12b90880db2935839cef11bfbbfeca Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:32:19 +0300
Subject: [PATCH 30/49] fix: cover post-save history navigation

---
 tests/e2e/code-snippets-edit.spec.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/tests/e2e/code-snippets-edit.spec.ts b/tests/e2e/code-snippets-edit.spec.ts
index 4c33d9c48..56f897435 100644
--- a/tests/e2e/code-snippets-edit.spec.ts
+++ b/tests/e2e/code-snippets-edit.spec.ts
@@ -85,11 +85,13 @@ test.describe('Code Snippets Admin', () => {
 
 	test('Back navigation confirms before discarding unsaved changes', async ({ page }) => {
 		const snippetName = SnippetsTestHelper.makeUniqueSnippetName()
-		await helper.createSnippet({
+		await helper.clickAddNewSnippet()
+		await helper.fillSnippetForm({
 			name: snippetName,
 			code: "add_filter('show_admin_bar', '__return_false');"
 		})
-		await helper.openSnippet(snippetName)
+		await helper.saveSnippet()
+		await expect(page).toHaveURL(/page=edit-snippet/)
 
 		const editedName = `${snippetName} edited`
 		await page.locator('#title').fill(editedName)
@@ -104,7 +106,7 @@ test.describe('Code Snippets Admin', () => {
 
 		page.once('dialog', dialog => dialog.accept())
 		await page.goBack()
-		await expect(page).toHaveURL(/page=snippets/)
+		await expect(page).toHaveURL(/page=add-snippet/)
 
 		await helper.cleanupSnippet(snippetName)
 	})

From 56ea7b9793c070228de45d574486b4e1cd27c8d5 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:41:08 +0300
Subject: [PATCH 31/49] fix: target the visible location control

---
 tests/e2e/helpers/SnippetsTestHelper.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/e2e/helpers/SnippetsTestHelper.ts b/tests/e2e/helpers/SnippetsTestHelper.ts
index 24690e41b..13fc22fb1 100644
--- a/tests/e2e/helpers/SnippetsTestHelper.ts
+++ b/tests/e2e/helpers/SnippetsTestHelper.ts
@@ -212,9 +212,9 @@ export class SnippetsTestHelper {
 	private async selectSnippetLocation(location: keyof typeof SNIPPET_LOCATIONS): Promise<void> {
 		const locationLabel = SNIPPET_LOCATIONS[location]
 
-		const combobox = this.page.getByRole('combobox', { name: /location/i }).first()
-		await expect(combobox).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
-		await combobox.click()
+		const locationSelect = this.page.locator(SELECTORS.LOCATION_SELECT)
+		await expect(locationSelect).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+		await locationSelect.click()
 
 		const listbox = this.page.getByRole('listbox').first()
 		await expect(listbox).toBeVisible({ timeout: TIMEOUTS.DEFAULT })

From 4ae22c1f73d271b893fa79c3284f348b8b1590ff Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:47:14 +0300
Subject: [PATCH 32/49] fix: target the visible type control

---
 tests/e2e/helpers/SnippetsTestHelper.ts | 7 +++----
 tests/e2e/helpers/constants.ts          | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/tests/e2e/helpers/SnippetsTestHelper.ts b/tests/e2e/helpers/SnippetsTestHelper.ts
index 13fc22fb1..4a3493122 100644
--- a/tests/e2e/helpers/SnippetsTestHelper.ts
+++ b/tests/e2e/helpers/SnippetsTestHelper.ts
@@ -264,13 +264,12 @@ export class SnippetsTestHelper {
 		await this.page.fill(SELECTORS.TITLE_INPUT, options.name)
 
 		if (options.type && 'PHP' !== options.type) {
-			const snippetTypeInput = this.page.locator(SELECTORS.SNIPPET_TYPE_SELECT)
-			await snippetTypeInput.click()
+			const snippetTypeSelect = this.page.locator(SELECTORS.SNIPPET_TYPE_SELECT)
+			await snippetTypeSelect.click()
 
 			// React Select renders options in a listbox; scope the click to options to avoid matching
 			// other UI strings like "Skip to main content".
-			const listboxId = await snippetTypeInput.getAttribute('aria-controls')
-			const listbox = listboxId ? this.page.locator(`#${listboxId}`) : this.page.getByRole('listbox')
+			const listbox = this.page.getByRole('listbox')
 			const optionLabel = SNIPPET_TYPES[options.type]
 
 			await listbox.getByRole('option', { name: new RegExp(escapeRegExp(optionLabel), 'i') }).click()
diff --git a/tests/e2e/helpers/constants.ts b/tests/e2e/helpers/constants.ts
index d6d2e64c0..cee3c8703 100644
--- a/tests/e2e/helpers/constants.ts
+++ b/tests/e2e/helpers/constants.ts
@@ -1,7 +1,7 @@
 export const SELECTORS = <const> {
 	TITLE_INPUT: '#title',
 	CODE_MIRROR_TEXTAREA: '.CodeMirror textarea',
-	SNIPPET_TYPE_SELECT: '#snippet-type-select-input',
+	SNIPPET_TYPE_SELECT: '.snippet-type-container .code-snippets-select',
 	LOCATION_SELECT: '.code-snippets-select-location',
 
 	SUCCESS_MESSAGE: '.snippet-editor-sidebar .notice.updated',

From 9c7041901aae3c0a1a12a13241a7f8e847829877 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 02:56:39 +0300
Subject: [PATCH 33/49] fix: match both WordPress REST URL forms

---
 tests/e2e/code-snippets-list.spec.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts
index 5e7422552..99fb77e7d 100644
--- a/tests/e2e/code-snippets-list.spec.ts
+++ b/tests/e2e/code-snippets-list.spec.ts
@@ -2,7 +2,7 @@ import { readFileSync } from 'fs'
 import { expect, test } from '@playwright/test'
 import { DEFAULT_E2E_SNIPPET_BASE_NAME, SnippetsTestHelper } from './helpers/SnippetsTestHelper'
 import { SELECTORS } from './helpers/constants'
-import type { Page } from '@playwright/test'
+import type { Page, Route } from '@playwright/test'
 
 test.describe('Code Snippets List Page Actions', () => {
 	let helper: SnippetsTestHelper
@@ -90,9 +90,14 @@ test.describe('Code Snippets List Page Actions', () => {
 	test('Can clone a snippet once from the preview modal', async ({ page }) => {
 		let createRequests = 0
 
-		await page.route('**/wp-json/code-snippets/v1/snippets*', async route => {
+		const trackCreateRequest = async (route: Route) => {
 			const request = route.request()
-			const isCreateRequest = 'POST' === request.method() && /\/snippets\/?(?:\?.*)?$/.test(request.url())
+			const requestUrl = new URL(request.url())
+			const restRoute = requestUrl.searchParams.get('rest_route')
+			const isCreateRequest = 'POST' === request.method() && (
+				requestUrl.pathname.endsWith('/code-snippets/v1/snippets') ||
+				'/code-snippets/v1/snippets' === restRoute
+			)
 
 			if (isCreateRequest) {
 				createRequests += 1
@@ -100,7 +105,10 @@ test.describe('Code Snippets List Page Actions', () => {
 			}
 
 			await route.continue()
-		})
+		}
+
+		await page.route('**/wp-json/code-snippets/v1/snippets*', trackCreateRequest)
+		await page.route(/\/index\.php\?rest_route=/, trackCreateRequest)
 
 		const snippetRow = page
 			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)

From 04e22252705d787e6f0447684efa9bbabba3a11c Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 09:11:03 +0300
Subject: [PATCH 34/49] chore: drop a narrating stylesheet comment

---
 src/css/welcome.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/css/welcome.scss b/src/css/welcome.scss
index 9e83aa4d6..d15e7c3f8 100644
--- a/src/css/welcome.scss
+++ b/src/css/welcome.scss
@@ -7,7 +7,6 @@
 $breakpoint: 1060px;
 
 .code-snippets-welcome {
-	// Page and section titles follow the shared page-header typography.
 	h2 {
 		font-size: 32px;
 		font-weight: 510;

From 2216010ee70e3261bf4163d4141ec63483aa734b Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 09:11:32 +0300
Subject: [PATCH 35/49] fix: assert the post-save back destination correctly

---
 tests/e2e/code-snippets-edit.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/code-snippets-edit.spec.ts b/tests/e2e/code-snippets-edit.spec.ts
index 56f897435..b37952421 100644
--- a/tests/e2e/code-snippets-edit.spec.ts
+++ b/tests/e2e/code-snippets-edit.spec.ts
@@ -106,7 +106,7 @@ test.describe('Code Snippets Admin', () => {
 
 		page.once('dialog', dialog => dialog.accept())
 		await page.goBack()
-		await expect(page).toHaveURL(/page=add-snippet/)
+		await expect(page).toHaveURL(/page=snippets/)
 
 		await helper.cleanupSnippet(snippetName)
 	})

From aec2f13be4b607756494e7ac780db43c895218d8 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 09:15:26 +0300
Subject: [PATCH 36/49] feat: allow extra actions in the preview modal footer

---
 .../components/common/SnippetPreviewModal.tsx | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index b3eb93e97..c5642f900 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -11,6 +11,7 @@ import { Button } from './Button'
 import { useDeleteSnippet } from './DeleteButton'
 import type { BadgeName } from './Badge'
 import type { EditorFromTextArea } from 'codemirror'
+import type { ReactNode } from 'react'
 import type { Snippet } from '../../types/Snippet'
 
 export interface SnippetPreviewModalProps {
@@ -20,6 +21,7 @@ export interface SnippetPreviewModalProps {
 	isOpen: boolean
 	setIsOpen: (isOpen: boolean) => void
 	snippet?: Snippet
+	extraActions?: ReactNode
 }
 
 // Mirrors the type-to-mode mapping used by the live editor in SnippetTypeInput.
@@ -33,6 +35,7 @@ const EDITOR_MODES: Record<string, string> = {
 interface SnippetPreviewActionsProps {
 	snippet: Snippet
 	closeModal: () => void
+	extraActions?: ReactNode
 }
 
 interface SnippetPreviewButtonsProps extends SnippetPreviewActionsProps {
@@ -86,15 +89,11 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({
 	requestDelete,
 	isWorking,
 	beginWorking,
-	finishWorking
+	finishWorking,
+	extraActions
 }) => {
 	const canModify = canModifySnippet(snippet)
-	const { handleClone, handleExport } = usePreviewActionHandlers({
-		snippet,
-		closeModal,
-		beginWorking,
-		finishWorking
-	})
+	const { handleClone, handleExport } = usePreviewActionHandlers({ snippet, closeModal, beginWorking, finishWorking })
 
 	return (
 		<div className="code-snippets-preview-modal__buttons">
@@ -112,6 +111,7 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({
 				</Button>
 				: null}
 
+			{extraActions}
 			<Button
 				secondary
 				disabled={isWorking}
@@ -158,7 +158,7 @@ const useWorkingState = () => {
  * and snippets list contexts, so it is only rendered when the modal receives a
  * full snippet object rather than bare title/code/type values.
  */
-const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({ snippet, closeModal }) => {
+const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({ snippet, closeModal, extraActions }) => {
 	const { refreshSnippetsList } = useSnippetsList()
 	const { isWorking, beginWorking, finishWorking, setIsWorking } = useWorkingState()
 	const { requestDelete, confirmDialog } = useDeleteSnippet({
@@ -180,6 +180,7 @@ const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({ snippet,
 				isWorking={isWorking}
 				beginWorking={beginWorking}
 				finishWorking={finishWorking}
+				extraActions={extraActions}
 			/>
 
 			<div className="code-snippets-preview-modal__priority">
@@ -204,7 +205,8 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 	type,
 	isOpen,
 	setIsOpen,
-	snippet
+	snippet,
+	extraActions
 }) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
 
@@ -244,7 +246,7 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			</div>
 
 			{snippet
-				? <SnippetPreviewActions snippet={snippet} closeModal={() => setIsOpen(false)} />
+				? <SnippetPreviewActions snippet={snippet} extraActions={extraActions} closeModal={() => setIsOpen(false)} />
 				: null}
 		</Modal>
 		: null

From e96ed9c3592b84ecb71b9a45b720f0d735f2ef84 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 09:49:44 +0300
Subject: [PATCH 37/49] fix: share the preview working state with slotted
 footer actions

---
 .../components/common/SnippetPreviewModal.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index fffb991ab..0a9ba929d 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -14,6 +14,17 @@ import type { EditorFromTextArea } from 'codemirror'
 import type { ReactNode } from 'react'
 import type { Snippet } from '../../types/Snippet'
 
+// Slotted actions render inside the footer group; the function form receives
+// the modal's shared working state so injected buttons lock together with the
+// built-in actions instead of racing them.
+export interface PreviewWorkingState {
+	isWorking: boolean
+	beginWorking: () => boolean
+	finishWorking: () => void
+}
+
+type PreviewExtraActions = ReactNode | ((working: PreviewWorkingState) => ReactNode)
+
 export interface SnippetPreviewModalProps {
 	title: string
 	code: string
@@ -21,7 +32,7 @@ export interface SnippetPreviewModalProps {
 	isOpen: boolean
 	setIsOpen: (isOpen: boolean) => void
 	snippet?: Snippet
-	extraActions?: ReactNode
+	extraActions?: PreviewExtraActions
 }
 
 // Mirrors the type-to-mode mapping used by the live editor in SnippetTypeInput.
@@ -35,7 +46,7 @@ const EDITOR_MODES: Record<string, string> = {
 interface SnippetPreviewActionsProps {
 	snippet: Snippet
 	closeModal: () => void
-	extraActions?: ReactNode
+	extraActions?: PreviewExtraActions
 }
 
 interface SnippetPreviewButtonsProps extends SnippetPreviewActionsProps {
@@ -111,7 +122,9 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({
 				</Button>
 				: null}
 
-			{extraActions}
+			{'function' === typeof extraActions
+				? extraActions({ isWorking, beginWorking, finishWorking })
+				: extraActions}
 			<Button
 				secondary
 				disabled={isWorking}

From 4457f443b101e9b502b979eff13f0197ac0e1953 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 20:56:24 +0300
Subject: [PATCH 38/49] fix: preserve keyboard access to snippet previews

---
 .../components/common/SnippetPreviewModal.tsx |  2 +-
 tests/e2e/code-snippets-preview.spec.ts       | 42 +++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 0a9ba929d..5d70b643e 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -230,7 +230,7 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 
 		const instance = window.wp.codeEditor.initialize(textareaRef.current, {
 			codemirror: {
-				readOnly: 'nocursor',
+				readOnly: true,
 				lineNumbers: true,
 				theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
 				mode: EDITOR_MODES[type] ?? EDITOR_MODES.php
diff --git a/tests/e2e/code-snippets-preview.spec.ts b/tests/e2e/code-snippets-preview.spec.ts
index 4ca61090d..2f2626a1a 100644
--- a/tests/e2e/code-snippets-preview.spec.ts
+++ b/tests/e2e/code-snippets-preview.spec.ts
@@ -3,6 +3,8 @@ import { DEFAULT_E2E_SNIPPET_BASE_NAME, SnippetsTestHelper } from './helpers/Sni
 import { SELECTORS, TIMEOUTS } from './helpers/constants'
 import { wpCli } from './helpers/wpCli'
 
+const MAXIMUM_FOCUS_ATTEMPTS = 10
+
 // Disabling the admin's "Syntax Highlighting" preference makes
 // wp_enqueue_code_editor() a no-op, so window.wp.codeEditor is undefined when
 // the preview modal opens. The modal must fall back to the read-only textarea
@@ -60,4 +62,44 @@ test.describe('Code Snippets Preview Modal', () => {
 
 		expect(pageErrors).toEqual([])
 	})
+
+	test('Preview code can be selected with the keyboard without being changed', async ({ page }) => {
+		await setSyntaxHighlighting(true)
+		await helper.navigateToSnippetsAdmin()
+		await helper.filterSnippetsByName(snippetName)
+
+		const row = page
+			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
+			.first()
+		await expect(row).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+
+		await row.hover()
+		await row.locator(SELECTORS.PREVIEW_ACTION).first().click()
+
+		const preview = page.locator('.code-snippets-preview-modal')
+		const editor = preview.locator('.CodeMirror')
+		const codeArea = preview.getByLabel('Snippet code preview')
+		const initialValue = await codeArea.inputValue()
+		await expect(editor).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+
+		for (let attempt = 0; attempt < MAXIMUM_FOCUS_ATTEMPTS; attempt++) {
+			if (await editor.evaluate(element => element.classList.contains('CodeMirror-focused'))) {
+				break
+			}
+
+			await page.keyboard.press('Tab')
+		}
+
+		await expect(editor).toHaveClass(/CodeMirror-focused/)
+		await page.keyboard.press('Shift+ArrowRight')
+
+		await expect.poll(() => editor.evaluate(element => {
+			const codeMirror = (<HTMLElement & {
+				CodeMirror?: { getSelection?: () => string }
+			}>element).CodeMirror
+
+			return codeMirror?.getSelection?.() ?? ''
+		})).not.toBe('')
+		await expect(codeArea).toHaveValue(initialValue)
+	})
 })

From 9cea6766a017621a029dff70ff383fbce5d56a18 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 20:56:57 +0300
Subject: [PATCH 39/49] fix: replace add history after creating a snippet

---
 src/js/components/EditMenu/SnippetForm/SnippetForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index 9b6d7ccc8..4ca0d4016 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -96,7 +96,7 @@ const EditForm: React.FC<EditFormProps> = ({ children, className }) => {
 							.replace(__('Create New Condition', 'code-snippets'), __('Edit Condition', 'code-snippets'))
 
 						const newUrl = buildUrl(window.CODE_SNIPPETS.urls.edit, { id: response.id })
-						window.history.pushState({}, document.title, newUrl)
+						window.history.replaceState({}, document.title, newUrl)
 					}
 				}
 			})

From 5488de37328886ffaa83c4b9374d50405218339c Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 21:27:13 +0300
Subject: [PATCH 40/49] chore: extract manage menu data concerns

---
 src/php/Admin/Menus/Manage_Menu.php           | 466 ++----------------
 src/php/Admin/Menus/Manage_Menu_Assets.php    | 108 ++++
 .../Admin/Menus/Manage_Menu_Bulk_Download.php | 162 ++++++
 .../Admin/Menus/Manage_Menu_Registration.php  | 126 +++++
 .../Menus/Manage_Menu_Screen_Options.php      | 169 +++++++
 src/php/Admin/Menus/Snippet_Type_Counter.php  |  37 ++
 .../Admin/Menus/Manage_Menu_Assets_Test.php   | 158 ++++++
 .../Menus/Manage_Menu_Bulk_Download_Test.php  |  77 +++
 .../Menus/Manage_Menu_Registration_Test.php   |  24 +
 .../Menus/Manage_Menu_Screen_Options_Test.php | 149 ++++++
 tests/unit/Admin/Menus/Manage_Menu_Test.php   |  82 ---
 .../Admin/Menus/Snippet_Type_Counter_Test.php |  39 ++
 12 files changed, 1096 insertions(+), 501 deletions(-)
 create mode 100644 src/php/Admin/Menus/Manage_Menu_Assets.php
 create mode 100644 src/php/Admin/Menus/Manage_Menu_Bulk_Download.php
 create mode 100644 src/php/Admin/Menus/Manage_Menu_Registration.php
 create mode 100644 src/php/Admin/Menus/Manage_Menu_Screen_Options.php
 create mode 100644 src/php/Admin/Menus/Snippet_Type_Counter.php
 create mode 100644 tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php
 create mode 100644 tests/unit/Admin/Menus/Manage_Menu_Bulk_Download_Test.php
 create mode 100644 tests/unit/Admin/Menus/Manage_Menu_Registration_Test.php
 create mode 100644 tests/unit/Admin/Menus/Manage_Menu_Screen_Options_Test.php
 create mode 100644 tests/unit/Admin/Menus/Snippet_Type_Counter_Test.php

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index 1531b842c..72464fbef 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -4,24 +4,10 @@
 
 use Code_Snippets\Admin\Contextual_Help;
 use Code_Snippets\Controller\Cloud_Search_Controller;
-use Code_Snippets\Integration\Evaluate_Functions;
-use Code_Snippets\Migration\Export\Download_Code;
-use Code_Snippets\Model\Snippet;
-use Code_Snippets\Utils\Code_Highlighter;
-use WP_Error;
 use function Code_Snippets\code_snippets;
-use function Code_Snippets\get_snippet;
-use function Code_Snippets\get_snippets;
-use function Code_Snippets\Settings\get_setting;
-use function Code_Snippets\Utils\enqueue_code_preview_editor;
-use const Code_Snippets\PLUGIN_FILE;
-use const Code_Snippets\PLUGIN_VERSION;
 
 /**
- * This class handles the manage snippets menu
- *
- * @since   2.4.0
- * @package Code_Snippets
+ * Provides the manage snippets admin menu.
  */
 class Manage_Menu extends Admin_Menu {
 
@@ -41,9 +27,42 @@ class Manage_Menu extends Admin_Menu {
 	public const DEFAULT_SNIPPETS_PER_PAGE = 100;
 
 	/**
-	 * Class constructor
+	 * Manage menu asset service.
+	 *
+	 * @var Manage_Menu_Assets
+	 */
+	private Manage_Menu_Assets $assets;
+
+	/**
+	 * Manage menu bulk download service.
+	 *
+	 * @var Manage_Menu_Bulk_Download
+	 */
+	private Manage_Menu_Bulk_Download $bulk_download;
+
+	/**
+	 * Manage menu registration service.
+	 *
+	 * @var Manage_Menu_Registration
+	 */
+	private Manage_Menu_Registration $registration;
+
+	/**
+	 * Manage menu Screen Options.
+	 *
+	 * @var Manage_Menu_Screen_Options
+	 */
+	private Manage_Menu_Screen_Options $screen_options;
+
+	/**
+	 * Class constructor.
 	 */
 	public function __construct() {
+		$this->screen_options = new Manage_Menu_Screen_Options();
+		$this->assets = new Manage_Menu_Assets( $this->screen_options, new Snippet_Type_Counter() );
+		$this->bulk_download = new Manage_Menu_Bulk_Download();
+		$this->registration = new Manage_Menu_Registration();
+
 		parent::__construct(
 			'manage',
 			_x( 'All Snippets', 'menu label', 'code-snippets' ),
@@ -68,17 +87,7 @@ public function __construct() {
 	 * Register the top-level 'Snippets' menu and associated 'Manage' subpage
 	 */
 	public function register() {
-		add_menu_page(
-			__( 'Snippets', 'code-snippets' ),
-			_x( 'Snippets', 'top-level menu label', 'code-snippets' ),
-			code_snippets()->get_cap(),
-			code_snippets()->get_menu_slug(),
-			array( $this, 'render' ),
-			'none', // Added through CSS as a mask to prevent loading 'blinking'.
-			apply_filters( 'code_snippets/admin/menu_position', is_network_admin() ? 21 : 67 )
-		);
-
-		// Register the sub-menu.
+		$this->registration->register_top_level( $this );
 		parent::register();
 	}
 
@@ -88,27 +97,7 @@ public function register() {
 	 * @return void
 	 */
 	public function register_upgrade_menu() {
-		if ( code_snippets()->licensing->is_licensed() || get_setting( 'general', 'hide_upgrade_menu' ) ) {
-			return;
-		}
-
-		$menu_title = sprintf(
-			'<span class="button button-primary code-snippets-upgrade-button">%s %s</span>',
-			_x( 'Go Pro', 'top-level menu label', 'code-snippets' ),
-			'<span class="dashicons dashicons-external" aria-hidden="true"></span>'
-		);
-
-		$hook = add_submenu_page(
-			code_snippets()->get_menu_slug(),
-			__( 'Upgrade to Pro', 'code-snippets' ),
-			$menu_title,
-			code_snippets()->get_cap(),
-			'code_snippets_upgrade',
-			'__return_empty_string',
-			100
-		);
-
-		add_action( "load-$hook", [ $this, 'load_upgrade_menu' ] );
+		$this->registration->register_upgrade_menu( $this );
 	}
 
 	/**
@@ -117,12 +106,7 @@ public function register_upgrade_menu() {
 	 * @return void
 	 */
 	public function enqueue_menu_css() {
-		wp_enqueue_style(
-			'code-snippets-menu',
-			plugins_url( 'dist/menu.css', PLUGIN_FILE ),
-			[],
-			PLUGIN_VERSION
-		);
+		$this->registration->enqueue_menu_css();
 	}
 
 	/**
@@ -131,44 +115,14 @@ public function enqueue_menu_css() {
 	 * @return void
 	 */
 	public function load_upgrade_menu() {
-		wp_safe_redirect( 'https://snipco.de/JE2f' );
-		exit;
+		$this->registration->load_upgrade_menu();
 	}
 
 	/**
 	 * Add menu pages for the compact menu
 	 */
 	public function register_compact_menu() {
-
-		if ( ! code_snippets()->is_compact_menu() ) {
-			return;
-		}
-
-		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Value is matched to known classes.
-		$sub = code_snippets()->get_menu_slug( isset( $_GET['sub'] ) ? sanitize_key( $_GET['sub'] ) : 'snippets' );
-
-		$classmap = array(
-			'snippets'             => 'manage',
-			'add-snippet'          => 'edit',
-			'edit-snippet'         => 'edit',
-			'import-code-snippets' => 'import',
-			'snippets-settings'    => 'settings',
-		);
-
-		$menus = code_snippets()->admin->menus;
-		$class = isset( $classmap[ $sub ], $menus[ $classmap[ $sub ] ] ) ? $menus[ $classmap[ $sub ] ] : $this;
-
-		/* Add a submenu to the Tools menu */
-		$hook = add_submenu_page(
-			'tools.php',
-			__( 'Snippets', 'code-snippets' ),
-			_x( 'Snippets', 'tools submenu label', 'code-snippets' ),
-			code_snippets()->get_cap(),
-			code_snippets()->get_menu_slug(),
-			array( $class, 'render' )
-		);
-
-		add_action( 'load-' . $hook, array( $class, 'load' ) );
+		$this->registration->register_compact_menu( $this );
 	}
 
 	/**
@@ -179,7 +133,7 @@ public function load() {
 
 		$screen = get_current_screen();
 
-		if ( $screen && ! $this->is_cloud_community_view() ) {
+		if ( $screen && ! $this->screen_options->is_cloud_community_view() ) {
 			add_filter( "manage_{$screen->id}_columns", [ $this, 'get_screen_columns' ] );
 			add_filter( 'screen_settings', [ $this, 'render_screen_settings' ] );
 		}
@@ -201,60 +155,7 @@ public function load() {
 	 * Enqueue scripts and stylesheets for the admin page.
 	 */
 	public function enqueue_assets() {
-		wp_enqueue_style(
-			self::CSS_HANDLE,
-			plugins_url( 'dist/manage.css', PLUGIN_FILE ),
-			self::$style_deps,
-			PLUGIN_VERSION
-		);
-
-		wp_enqueue_script(
-			self::JS_HANDLE,
-			plugins_url( 'dist/manage.js', PLUGIN_FILE ),
-			self::$script_deps,
-			PLUGIN_VERSION,
-			[ 'in_footer' => true ]
-		);
-
-		Code_Highlighter::enqueue_all_prism_themes();
-
-		enqueue_code_preview_editor( 'php' );
-
-		wp_set_script_translations( self::JS_HANDLE, 'code-snippets' );
-		code_snippets()->localize_script( self::JS_HANDLE );
-
-		$localized = [
-			'hasNetworkCap'        => current_user_can( code_snippets()->get_network_cap_name() ),
-			'hiddenColumns'        => $this->get_hidden_manage_columns(),
-			'truncateRowValues'    => (int) $this->truncate_row_values(),
-			'snippetsPerPage'      => self::get_snippets_per_page(),
-			'cloudSearchPerPage'   => $this->get_cloud_search_per_page(),
-			'isSafeModeActive'     => Evaluate_Functions::is_safe_mode_active(),
-			'bulkDownloadNonce'    => wp_create_nonce( 'code_snippets_bulk_download' ),
-			'supportsZipDownloads' => class_exists( 'ZipArchive' ),
-			'editorTheme'          => get_setting( 'editor', 'theme' ),
-			'typeCounts'           => $this->count_snippets_by_type(),
-		];
-
-		// Only the manage-table view consumes the full snippets list; skip the
-		// table scan and inline payload on subpages that don't render the table.
-		if ( $this->is_manage_table_view() ) {
-			$snippets = get_snippets();
-			$inline_limit = max( 0, intval( apply_filters( 'code_snippets/manage/inline_snippets_limit', 100 ) ) );
-
-			// The inline payload includes full code bodies, so its size grows with
-			// library content; larger libraries defer to the REST fetch instead.
-			if ( 0 < $inline_limit && count( $snippets ) <= $inline_limit ) {
-				$localized['snippetsList'] = array_map(
-					function ( $snippet ) {
-						return $snippet->get_fields();
-					},
-					$snippets
-				);
-			}
-		}
-
-		wp_localize_script( self::JS_HANDLE, 'CODE_SNIPPETS_MANAGE', $localized );
+		$this->assets->enqueue( self::$script_deps, self::$style_deps );
 	}
 
 	/**
@@ -280,30 +181,6 @@ public static function get_default_snippets_per_page(): int {
 		return max( 1, intval( $default ) );
 	}
 
-	/**
-	 * Count non-trashed snippets per type with a single grouped query, so the
-	 * type tabs can render their counts without loading full snippet data.
-	 *
-	 * @return array<string, int> Map of type name to snippet count, including 'all'.
-	 */
-	private function count_snippets_by_type(): array {
-		global $wpdb;
-		$table = code_snippets()->db->get_table_name();
-
-		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotSafe -- table name from trusted source; counts are cheap and rendered per-request.
-		$results = $wpdb->get_results( "SELECT scope, COUNT(*) AS count FROM $table WHERE active >= 0 GROUP BY scope" );
-
-		$counts = [ 'all' => 0 ];
-
-		foreach ( $results as $row ) {
-			$type = Snippet::get_type_from_scope( $row->scope );
-			$counts[ $type ] = ( $counts[ $type ] ?? 0 ) + (int) $row->count;
-			$counts['all'] += (int) $row->count;
-		}
-
-		return $counts;
-	}
-
 	/**
 	 * Get the number of snippets to show per page.
 	 *
@@ -337,68 +214,7 @@ public function render() {
 	 * @return string[]
 	 */
 	public function get_screen_columns( array $columns = array() ): array {
-		return array_merge(
-			$columns,
-			array(
-				'_title'   => __( 'Columns', 'code-snippets' ),
-				'activate' => __( 'Active', 'code-snippets' ),
-				'name'     => __( 'Name', 'code-snippets' ),
-				'type'     => __( 'Type', 'code-snippets' ),
-				'desc'     => __( 'Description', 'code-snippets' ),
-				'tags'     => __( 'Tags', 'code-snippets' ),
-				'date'     => __( 'Modified', 'code-snippets' ),
-				'priority' => __( 'Priority', 'code-snippets' ),
-			)
-		);
-	}
-
-	/**
-	 * Get the list of columns hidden for the current user on the snippets screen.
-	 *
-	 * @return string[]
-	 */
-	protected function get_hidden_manage_columns(): array {
-		$screen = get_current_screen();
-
-		return $screen ? get_hidden_columns( $screen ) : array();
-	}
-
-	/**
-	 * Whether to truncate long row values in the snippets table.
-	 *
-	 * @return bool
-	 */
-	protected function truncate_row_values(): bool {
-		$setting = get_user_option( 'snippets_table_truncate_row_values' );
-		return false === $setting || $setting;
-	}
-
-	/**
-	 * Read the current `subpage` routing parameter.
-	 *
-	 * @return string
-	 */
-	protected function get_current_subpage(): string {
-		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only routing parameter.
-		return isset( $_REQUEST['subpage'] ) ? sanitize_key( wp_unslash( $_REQUEST['subpage'] ) ) : '';
-	}
-
-	/**
-	 * Whether the current request renders the snippets-table view (the default subpage).
-	 *
-	 * @return bool
-	 */
-	protected function is_manage_table_view(): bool {
-		return ! $this->get_current_subpage();
-	}
-
-	/**
-	 * Whether the current manage subpage is the Community Cloud view.
-	 *
-	 * @return bool
-	 */
-	protected function is_cloud_community_view(): bool {
-		return 'cloud-community' === $this->get_current_subpage();
+		return $this->screen_options->get_columns( $columns );
 	}
 
 	/**
@@ -409,30 +225,7 @@ protected function is_cloud_community_view(): bool {
 	 * @return string
 	 */
 	public function render_screen_settings( string $screen_settings ): string {
-		if ( $this->is_cloud_community_view() ) {
-			return $screen_settings;
-		}
-
-		ob_start();
-		?>
-		<fieldset class="metabox-prefs table-options-prefs">
-			<legend><?php esc_html_e( 'Table Options', 'code-snippets' ); ?></legend>
-			<div class="metabox-prefs-container">
-				<label for="snippets-table-truncate-row-values">
-					<input
-						id="snippets-table-truncate-row-values"
-						name="snippets_table_truncate_row_values"
-						type="checkbox"
-						value="1"
-						<?php checked( $this->truncate_row_values() ); ?>
-					/>
-					<?php esc_html_e( 'Truncate long snippet names and descriptions', 'code-snippets' ); ?>
-				</label>
-			</div>
-		</fieldset>
-		<?php
-
-		return $screen_settings . ob_get_clean();
+		return $this->screen_options->render( $screen_settings );
 	}
 
 	/**
@@ -441,35 +234,7 @@ public function render_screen_settings( string $screen_settings ): string {
 	 * @return void
 	 */
 	public function save_truncation_preference(): void {
-		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified below before persisting the option.
-		if ( empty( $_POST['wp_screen_options'] ) || ! is_array( $_POST['wp_screen_options'] ) ) {
-			return;
-		}
-
-		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Sanitized and matched to a known admin page.
-		$page = isset( $_REQUEST['page'] ) ? sanitize_key( wp_unslash( $_REQUEST['page'] ) ) : '';
-
-		if ( code_snippets()->get_menu_slug() !== $page || ! current_user_can( code_snippets()->get_cap() ) ) {
-			return;
-		}
-
-		if ( $this->is_cloud_community_view() ) {
-			return;
-		}
-
-		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified here before persisting the option.
-		$nonce = isset( $_POST['screenoptionnonce'] ) ? sanitize_text_field( wp_unslash( $_POST['screenoptionnonce'] ) ) : '';
-
-		if ( ! wp_verify_nonce( $nonce, 'screen-options-nonce' ) ) {
-			return;
-		}
-
-		update_user_option(
-			get_current_user_id(),
-			'snippets_table_truncate_row_values',
-			// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified above before reading the checkbox state.
-			isset( $_POST['snippets_table_truncate_row_values'] ) ? 1 : 0
-		);
+		$this->screen_options->save_truncation_preference();
 	}
 
 	/**
@@ -482,7 +247,7 @@ public function save_truncation_preference(): void {
 	 * @return mixed
 	 */
 	public function save_screen_option( $status, string $option, $value ) {
-		return 'snippets_per_page' === $option ? $value : $status;
+		return $this->screen_options->save_per_page_option( $status, $option, $value );
 	}
 
 	/**
@@ -491,143 +256,6 @@ public function save_screen_option( $status, string $option, $value ) {
 	 * @return void
 	 */
 	public function handle_bulk_download_request(): void {
-		if ( ! $this->is_bulk_download_request() ) {
-			return;
-		}
-
-		if ( ! current_user_can( code_snippets()->get_cap() ) ) {
-			$this->send_download_error( __( 'You are not allowed to download these snippets.', 'code-snippets' ), 403 );
-		}
-
-		$nonce = filter_input( INPUT_POST, 'code_snippets_bulk_download_nonce', FILTER_SANITIZE_FULL_SPECIAL_CHARS ) ?? '';
-
-		if ( ! wp_verify_nonce( $nonce, 'code_snippets_bulk_download' ) ) {
-			$this->send_download_error( __( 'The download request is no longer valid. Please refresh and try again.', 'code-snippets' ), 403 );
-		}
-
-		$snippets_json = wp_unslash( filter_input( INPUT_POST, 'snippets', FILTER_DEFAULT ) ?? '' );
-		$snippets = $this->get_requested_download_snippets( $snippets_json );
-
-		if ( $snippets instanceof WP_Error ) {
-			$status = $snippets->get_error_data( 'status' );
-			$this->send_download_error( $snippets->get_error_message(), is_numeric( $status ) ? (int) $status : 403 );
-		}
-
-		if ( empty( $snippets ) ) {
-			$this->send_download_error( __( 'No snippets were selected for download.', 'code-snippets' ) );
-		}
-
-		$download = 1 === count( $snippets )
-			? Download_Code::build_snippet_download( $snippets[0] )
-			: Download_Code::build_archive_download( $snippets );
-
-		if ( $download instanceof WP_Error ) {
-			$status = $download->get_error_data( 'status' );
-			$this->send_download_error( $download->get_error_message(), is_numeric( $status ) ? (int) $status : 500 );
-		}
-
-		$this->send_download_response( $download );
-	}
-
-	/**
-	 * Determine whether the current request is a bulk download request.
-	 *
-	 * @return bool
-	 */
-	private function is_bulk_download_request(): bool {
-		$page = sanitize_key( filter_input( INPUT_GET, 'page' ) ?? '' );
-		$action = sanitize_key( filter_input( INPUT_POST, 'code_snippets_action' ) ?? '' );
-
-		return code_snippets()->get_menu_slug() === $page && 'bulk-download' === $action;
-	}
-
-	/**
-	 * Resolve the snippets requested for download.
-	 *
-	 * @param string $snippets_json JSON-encoded list of requested snippets.
-	 *
-	 * @return Snippet[]|WP_Error
-	 */
-	private function get_requested_download_snippets( string $snippets_json ) {
-		$payload = '' === $snippets_json ? [] : json_decode( $snippets_json, true );
-
-		if ( ! is_array( $payload ) ) {
-			return [];
-		}
-
-		$snippets = [];
-
-		foreach ( $payload as $snippet_data ) {
-			if ( ! is_array( $snippet_data ) || empty( $snippet_data['id'] ) ) {
-				continue;
-			}
-
-			if ( ! empty( $snippet_data['network'] ) && ! current_user_can( code_snippets()->get_network_cap_name() ) ) {
-				return new WP_Error(
-					'code_snippets_forbidden_network_download',
-					__( 'You are not allowed to download network snippets.', 'code-snippets' ),
-					[ 'status' => 403 ]
-				);
-			}
-
-			$snippet = get_snippet(
-				absint( $snippet_data['id'] ),
-				! empty( $snippet_data['network'] )
-			);
-
-			if ( $snippet->id ) {
-				$snippets[] = $snippet;
-			}
-		}
-
-		return $snippets;
-	}
-
-	/**
-	 * Send a download file response and end execution.
-	 *
-	 * @param array{filename:string, content_type:string, content:string} $download Download data.
-	 *
-	 * @return void
-	 */
-	private function send_download_response( array $download ): void {
-		while ( ob_get_level() ) {
-			ob_end_clean();
-		}
-
-		nocache_headers();
-		send_nosniff_header();
-
-		header( 'Content-Description: File Transfer' );
-		header( 'Content-Type: ' . $download['content_type'] );
-		header( 'Content-Disposition: attachment; filename="' . $download['filename'] . '"' );
-		header( 'Content-Length: ' . strlen( $download['content'] ) );
-		header( 'X-Suggested-Filename: ' . $download['filename'] );
-
-		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Binary download payload.
-		echo $download['content'];
-		exit;
-	}
-
-	/**
-	 * Send a plain text download error response and end execution.
-	 *
-	 * @param string $message Error message.
-	 * @param int    $status  HTTP status code.
-	 *
-	 * @return void
-	 */
-	private function send_download_error( string $message, int $status = 400 ): void {
-		while ( ob_get_level() ) {
-			ob_end_clean();
-		}
-
-		status_header( $status );
-		nocache_headers();
-		send_nosniff_header();
-		header( 'Content-Type: text/plain; charset=' . get_option( 'blog_charset' ) );
-
-		echo esc_html( $message );
-		exit;
+		$this->bulk_download->handle();
 	}
 }
diff --git a/src/php/Admin/Menus/Manage_Menu_Assets.php b/src/php/Admin/Menus/Manage_Menu_Assets.php
new file mode 100644
index 000000000..28b8540f5
--- /dev/null
+++ b/src/php/Admin/Menus/Manage_Menu_Assets.php
@@ -0,0 +1,108 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Integration\Evaluate_Functions;
+use Code_Snippets\Utils\Code_Highlighter;
+use function Code_Snippets\code_snippets;
+use function Code_Snippets\get_snippets;
+use function Code_Snippets\Settings\get_setting;
+use function Code_Snippets\Utils\enqueue_code_preview_editor;
+use const Code_Snippets\PLUGIN_FILE;
+use const Code_Snippets\PLUGIN_VERSION;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Enqueues assets and builds localized data for the manage menu.
+ */
+class Manage_Menu_Assets {
+
+	/**
+	 * Manage menu Screen Options.
+	 *
+	 * @var Manage_Menu_Screen_Options
+	 */
+	private Manage_Menu_Screen_Options $screen_options;
+
+	/**
+	 * Snippet type counter.
+	 *
+	 * @var Snippet_Type_Counter
+	 */
+	private Snippet_Type_Counter $type_counter;
+
+	/**
+	 * Class constructor.
+	 *
+	 * @param Manage_Menu_Screen_Options $screen_options Manage menu Screen Options.
+	 * @param Snippet_Type_Counter       $type_counter   Snippet type counter.
+	 */
+	public function __construct(
+		Manage_Menu_Screen_Options $screen_options,
+		Snippet_Type_Counter $type_counter
+	) {
+		$this->screen_options = $screen_options;
+		$this->type_counter = $type_counter;
+	}
+
+	/**
+	 * Enqueue manage assets and localize their runtime data.
+	 *
+	 * @param string[] $script_dependencies JavaScript dependencies.
+	 * @param string[] $style_dependencies  CSS dependencies.
+	 *
+	 * @return void
+	 */
+	public function enqueue( array $script_dependencies, array $style_dependencies ): void {
+		wp_enqueue_style(
+			Manage_Menu::CSS_HANDLE,
+			plugins_url( 'dist/manage.css', PLUGIN_FILE ),
+			$style_dependencies,
+			PLUGIN_VERSION
+		);
+
+		wp_enqueue_script(
+			Manage_Menu::JS_HANDLE,
+			plugins_url( 'dist/manage.js', PLUGIN_FILE ),
+			$script_dependencies,
+			PLUGIN_VERSION,
+			[ 'in_footer' => true ]
+		);
+
+		Code_Highlighter::enqueue_all_prism_themes();
+		enqueue_code_preview_editor( 'php' );
+		wp_set_script_translations( Manage_Menu::JS_HANDLE, 'code-snippets' );
+		code_snippets()->localize_script( Manage_Menu::JS_HANDLE );
+
+		$localized = [
+			'hasNetworkCap'        => current_user_can( code_snippets()->get_network_cap_name() ),
+			'hiddenColumns'        => $this->screen_options->get_hidden_columns(),
+			'truncateRowValues'    => (int) $this->screen_options->should_truncate_rows(),
+			'snippetsPerPage'      => Manage_Menu::get_snippets_per_page(),
+			'cloudSearchPerPage'   => Manage_Menu::get_cloud_search_per_page(),
+			'isSafeModeActive'     => Evaluate_Functions::is_safe_mode_active(),
+			'bulkDownloadNonce'    => wp_create_nonce( 'code_snippets_bulk_download' ),
+			'supportsZipDownloads' => class_exists( 'ZipArchive' ),
+			'editorTheme'          => get_setting( 'editor', 'theme' ),
+			'typeCounts'           => $this->type_counter->count(),
+		];
+
+		if ( $this->screen_options->is_manage_table_view() ) {
+			$snippets = get_snippets();
+			$inline_limit = max( 0, intval( apply_filters( 'code_snippets/manage/inline_snippets_limit', 100 ) ) );
+
+			// Full code bodies make this payload grow with the size of the snippet library.
+			if ( 0 < $inline_limit && count( $snippets ) <= $inline_limit ) {
+				$localized['snippetsList'] = array_map(
+					function ( $snippet ) {
+						return $snippet->get_fields();
+					},
+					$snippets
+				);
+			}
+		}
+
+		wp_localize_script( Manage_Menu::JS_HANDLE, 'CODE_SNIPPETS_MANAGE', $localized );
+	}
+}
diff --git a/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php b/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php
new file mode 100644
index 000000000..e65e47813
--- /dev/null
+++ b/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php
@@ -0,0 +1,162 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Migration\Export\Download_Code;
+use Code_Snippets\Model\Snippet;
+use WP_Error;
+use function Code_Snippets\code_snippets;
+use function Code_Snippets\get_snippet;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Handles bulk snippet code downloads from the manage screen.
+ */
+class Manage_Menu_Bulk_Download {
+
+	/**
+	 * Handle a bulk download request.
+	 *
+	 * @return void
+	 */
+	public function handle(): void {
+		if ( ! $this->is_request() ) {
+			return;
+		}
+
+		if ( ! current_user_can( code_snippets()->get_cap() ) ) {
+			$this->send_error( __( 'You are not allowed to download these snippets.', 'code-snippets' ), 403 );
+		}
+
+		$nonce = filter_input( INPUT_POST, 'code_snippets_bulk_download_nonce', FILTER_SANITIZE_FULL_SPECIAL_CHARS ) ?? '';
+
+		if ( ! wp_verify_nonce( $nonce, 'code_snippets_bulk_download' ) ) {
+			$this->send_error( __( 'The download request is no longer valid. Please refresh and try again.', 'code-snippets' ), 403 );
+		}
+
+		$snippets_json = wp_unslash( filter_input( INPUT_POST, 'snippets', FILTER_DEFAULT ) ?? '' );
+		$snippets = $this->resolve_snippets( $snippets_json );
+
+		if ( $snippets instanceof WP_Error ) {
+			$status = $snippets->get_error_data( 'status' );
+			$this->send_error( $snippets->get_error_message(), is_numeric( $status ) ? (int) $status : 403 );
+		}
+
+		if ( empty( $snippets ) ) {
+			$this->send_error( __( 'No snippets were selected for download.', 'code-snippets' ) );
+		}
+
+		$download = 1 === count( $snippets )
+			? Download_Code::build_snippet_download( $snippets[0] )
+			: Download_Code::build_archive_download( $snippets );
+
+		if ( $download instanceof WP_Error ) {
+			$status = $download->get_error_data( 'status' );
+			$this->send_error( $download->get_error_message(), is_numeric( $status ) ? (int) $status : 500 );
+		}
+
+		$this->send_response( $download );
+	}
+
+	/**
+	 * Resolve snippets from a JSON request payload.
+	 *
+	 * @param string $snippets_json JSON-encoded list of requested snippets.
+	 *
+	 * @return Snippet[]|WP_Error
+	 */
+	public function resolve_snippets( string $snippets_json ) {
+		$payload = '' === $snippets_json ? [] : json_decode( $snippets_json, true );
+
+		if ( ! is_array( $payload ) ) {
+			return [];
+		}
+
+		$snippets = [];
+
+		foreach ( $payload as $snippet_data ) {
+			if ( ! is_array( $snippet_data ) || empty( $snippet_data['id'] ) ) {
+				continue;
+			}
+
+			if ( ! empty( $snippet_data['network'] ) && ! current_user_can( code_snippets()->get_network_cap_name() ) ) {
+				return new WP_Error(
+					'code_snippets_forbidden_network_download',
+					__( 'You are not allowed to download network snippets.', 'code-snippets' ),
+					[ 'status' => 403 ]
+				);
+			}
+
+			$snippet = get_snippet(
+				absint( $snippet_data['id'] ),
+				! empty( $snippet_data['network'] )
+			);
+
+			if ( $snippet->id ) {
+				$snippets[] = $snippet;
+			}
+		}
+
+		return $snippets;
+	}
+
+	/**
+	 * Determine whether the current request is a bulk download request.
+	 *
+	 * @return bool
+	 */
+	private function is_request(): bool {
+		$page = sanitize_key( filter_input( INPUT_GET, 'page' ) ?? '' );
+		$action = sanitize_key( filter_input( INPUT_POST, 'code_snippets_action' ) ?? '' );
+
+		return code_snippets()->get_menu_slug() === $page && 'bulk-download' === $action;
+	}
+
+	/**
+	 * Send a download response and end execution.
+	 *
+	 * @param array{filename:string, content_type:string, content:string} $download Download data.
+	 *
+	 * @return void
+	 */
+	private function send_response( array $download ): void {
+		while ( ob_get_level() ) {
+			ob_end_clean();
+		}
+
+		nocache_headers();
+		send_nosniff_header();
+		header( 'Content-Description: File Transfer' );
+		header( 'Content-Type: ' . $download['content_type'] );
+		header( 'Content-Disposition: attachment; filename="' . $download['filename'] . '"' );
+		header( 'Content-Length: ' . strlen( $download['content'] ) );
+		header( 'X-Suggested-Filename: ' . $download['filename'] );
+
+		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Binary download payload.
+		echo $download['content'];
+		exit;
+	}
+
+	/**
+	 * Send a download error and end execution.
+	 *
+	 * @param string $message Error message.
+	 * @param int    $status  HTTP status code.
+	 *
+	 * @return void
+	 */
+	private function send_error( string $message, int $status = 400 ): void {
+		while ( ob_get_level() ) {
+			ob_end_clean();
+		}
+
+		status_header( $status );
+		nocache_headers();
+		send_nosniff_header();
+		header( 'Content-Type: text/plain; charset=' . get_option( 'blog_charset' ) );
+
+		echo esc_html( $message );
+		exit;
+	}
+}
diff --git a/src/php/Admin/Menus/Manage_Menu_Registration.php b/src/php/Admin/Menus/Manage_Menu_Registration.php
new file mode 100644
index 000000000..7ef816b13
--- /dev/null
+++ b/src/php/Admin/Menus/Manage_Menu_Registration.php
@@ -0,0 +1,126 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use function Code_Snippets\code_snippets;
+use function Code_Snippets\Settings\get_setting;
+use const Code_Snippets\PLUGIN_FILE;
+use const Code_Snippets\PLUGIN_VERSION;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Registers manage menu pages and their shared stylesheet.
+ */
+class Manage_Menu_Registration {
+
+	/**
+	 * Register the top-level Snippets menu.
+	 *
+	 * @param Manage_Menu $menu Manage menu instance.
+	 *
+	 * @return void
+	 */
+	public function register_top_level( Manage_Menu $menu ): void {
+		add_menu_page(
+			__( 'Snippets', 'code-snippets' ),
+			_x( 'Snippets', 'top-level menu label', 'code-snippets' ),
+			code_snippets()->get_cap(),
+			code_snippets()->get_menu_slug(),
+			[ $menu, 'render' ],
+			'none', // Added through CSS as a mask to prevent loading 'blinking'.
+			apply_filters( 'code_snippets/admin/menu_position', is_network_admin() ? 21 : 67 )
+		);
+	}
+
+	/**
+	 * Register the upgrade menu item.
+	 *
+	 * @param Manage_Menu $menu Manage menu instance.
+	 *
+	 * @return void
+	 */
+	public function register_upgrade_menu( Manage_Menu $menu ): void {
+		if ( code_snippets()->licensing->is_licensed() || get_setting( 'general', 'hide_upgrade_menu' ) ) {
+			return;
+		}
+
+		$menu_title = sprintf(
+			'<span class="button button-primary code-snippets-upgrade-button">%s %s</span>',
+			_x( 'Go Pro', 'top-level menu label', 'code-snippets' ),
+			'<span class="dashicons dashicons-external" aria-hidden="true"></span>'
+		);
+
+		$hook = add_submenu_page(
+			code_snippets()->get_menu_slug(),
+			__( 'Upgrade to Pro', 'code-snippets' ),
+			$menu_title,
+			code_snippets()->get_cap(),
+			'code_snippets_upgrade',
+			'__return_empty_string',
+			100
+		);
+
+		add_action( "load-$hook", [ $menu, 'load_upgrade_menu' ] );
+	}
+
+	/**
+	 * Enqueue the admin menu icon stylesheet.
+	 *
+	 * @return void
+	 */
+	public function enqueue_menu_css(): void {
+		wp_enqueue_style(
+			'code-snippets-menu',
+			plugins_url( 'dist/menu.css', PLUGIN_FILE ),
+			[],
+			PLUGIN_VERSION
+		);
+	}
+
+	/**
+	 * Redirect the upgrade menu to the product site.
+	 *
+	 * @return void
+	 */
+	public function load_upgrade_menu(): void {
+		wp_safe_redirect( 'https://snipco.de/JE2f' );
+		exit;
+	}
+
+	/**
+	 * Register the compact menu page under Tools.
+	 *
+	 * @param Manage_Menu $menu Manage menu instance.
+	 *
+	 * @return void
+	 */
+	public function register_compact_menu( Manage_Menu $menu ): void {
+		if ( ! code_snippets()->is_compact_menu() ) {
+			return;
+		}
+
+		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Value is matched to known classes.
+		$sub = code_snippets()->get_menu_slug( isset( $_GET['sub'] ) ? sanitize_key( $_GET['sub'] ) : 'snippets' );
+		$classmap = [
+			'snippets'             => 'manage',
+			'add-snippet'          => 'edit',
+			'edit-snippet'         => 'edit',
+			'import-code-snippets' => 'import',
+			'snippets-settings'    => 'settings',
+		];
+		$menus = code_snippets()->admin->menus;
+		$class = isset( $classmap[ $sub ], $menus[ $classmap[ $sub ] ] ) ? $menus[ $classmap[ $sub ] ] : $menu;
+
+		$hook = add_submenu_page(
+			'tools.php',
+			__( 'Snippets', 'code-snippets' ),
+			_x( 'Snippets', 'tools submenu label', 'code-snippets' ),
+			code_snippets()->get_cap(),
+			code_snippets()->get_menu_slug(),
+			[ $class, 'render' ]
+		);
+
+		add_action( 'load-' . $hook, [ $class, 'load' ] );
+	}
+}
diff --git a/src/php/Admin/Menus/Manage_Menu_Screen_Options.php b/src/php/Admin/Menus/Manage_Menu_Screen_Options.php
new file mode 100644
index 000000000..e6e1561ac
--- /dev/null
+++ b/src/php/Admin/Menus/Manage_Menu_Screen_Options.php
@@ -0,0 +1,169 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use function Code_Snippets\code_snippets;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Provides Screen Options for the manage snippets table.
+ */
+class Manage_Menu_Screen_Options {
+
+	/**
+	 * Add the snippets table columns.
+	 *
+	 * @param string[] $columns Existing columns.
+	 *
+	 * @return string[]
+	 */
+	public function get_columns( array $columns = [] ): array {
+		return array_merge(
+			$columns,
+			[
+				'_title'   => __( 'Columns', 'code-snippets' ),
+				'activate' => __( 'Active', 'code-snippets' ),
+				'name'     => __( 'Name', 'code-snippets' ),
+				'type'     => __( 'Type', 'code-snippets' ),
+				'desc'     => __( 'Description', 'code-snippets' ),
+				'tags'     => __( 'Tags', 'code-snippets' ),
+				'date'     => __( 'Modified', 'code-snippets' ),
+				'priority' => __( 'Priority', 'code-snippets' ),
+			]
+		);
+	}
+
+	/**
+	 * Get the columns hidden for the current user.
+	 *
+	 * @return string[]
+	 */
+	public function get_hidden_columns(): array {
+		$screen = get_current_screen();
+
+		return $screen ? get_hidden_columns( $screen ) : [];
+	}
+
+	/**
+	 * Whether long row values should be truncated.
+	 *
+	 * @return bool
+	 */
+	public function should_truncate_rows(): bool {
+		$setting = get_user_option( 'snippets_table_truncate_row_values' );
+		return false === $setting || $setting;
+	}
+
+	/**
+	 * Read the current manage subpage.
+	 *
+	 * @return string
+	 */
+	public function get_current_subpage(): string {
+		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only routing parameter.
+		return isset( $_REQUEST['subpage'] ) ? sanitize_key( wp_unslash( $_REQUEST['subpage'] ) ) : '';
+	}
+
+	/**
+	 * Whether the current request renders the snippets table.
+	 *
+	 * @return bool
+	 */
+	public function is_manage_table_view(): bool {
+		return ! $this->get_current_subpage();
+	}
+
+	/**
+	 * Whether the current request renders Community Cloud.
+	 *
+	 * @return bool
+	 */
+	public function is_cloud_community_view(): bool {
+		return 'cloud-community' === $this->get_current_subpage();
+	}
+
+	/**
+	 * Render the manage table controls.
+	 *
+	 * @param string $screen_settings Existing screen settings HTML.
+	 *
+	 * @return string
+	 */
+	public function render( string $screen_settings ): string {
+		if ( $this->is_cloud_community_view() ) {
+			return $screen_settings;
+		}
+
+		ob_start();
+		?>
+		<fieldset class="metabox-prefs table-options-prefs">
+			<legend><?php esc_html_e( 'Table Options', 'code-snippets' ); ?></legend>
+			<div class="metabox-prefs-container">
+				<label for="snippets-table-truncate-row-values">
+					<input
+						id="snippets-table-truncate-row-values"
+						name="snippets_table_truncate_row_values"
+						type="checkbox"
+						value="1"
+						<?php checked( $this->should_truncate_rows() ); ?>
+					/>
+					<?php esc_html_e( 'Truncate long snippet names and descriptions', 'code-snippets' ); ?>
+				</label>
+			</div>
+		</fieldset>
+		<?php
+
+		return $screen_settings . ob_get_clean();
+	}
+
+	/**
+	 * Persist the row truncation preference.
+	 *
+	 * @return void
+	 */
+	public function save_truncation_preference(): void {
+		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified below before persisting the option.
+		if ( empty( $_POST['wp_screen_options'] ) || ! is_array( $_POST['wp_screen_options'] ) ) {
+			return;
+		}
+
+		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Sanitized and matched to a known admin page.
+		$page = isset( $_REQUEST['page'] ) ? sanitize_key( wp_unslash( $_REQUEST['page'] ) ) : '';
+
+		if ( code_snippets()->get_menu_slug() !== $page || ! current_user_can( code_snippets()->get_cap() ) ) {
+			return;
+		}
+
+		if ( $this->is_cloud_community_view() ) {
+			return;
+		}
+
+		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified here before persisting the option.
+		$nonce = isset( $_POST['screenoptionnonce'] ) ? sanitize_text_field( wp_unslash( $_POST['screenoptionnonce'] ) ) : '';
+
+		if ( ! wp_verify_nonce( $nonce, 'screen-options-nonce' ) ) {
+			return;
+		}
+
+		update_user_option(
+			get_current_user_id(),
+			'snippets_table_truncate_row_values',
+			// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified above before reading the checkbox state.
+			isset( $_POST['snippets_table_truncate_row_values'] ) ? 1 : 0
+		);
+	}
+
+	/**
+	 * Save only the snippets per-page Screen Option.
+	 *
+	 * @param mixed  $status Current screen option status.
+	 * @param string $option The screen option name.
+	 * @param mixed  $value  Screen option value.
+	 *
+	 * @return mixed
+	 */
+	public function save_per_page_option( $status, string $option, $value ) {
+		return 'snippets_per_page' === $option ? $value : $status;
+	}
+}
diff --git a/src/php/Admin/Menus/Snippet_Type_Counter.php b/src/php/Admin/Menus/Snippet_Type_Counter.php
new file mode 100644
index 000000000..402979368
--- /dev/null
+++ b/src/php/Admin/Menus/Snippet_Type_Counter.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Model\Snippet;
+use function Code_Snippets\code_snippets;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Counts stored snippets by their editor type.
+ */
+class Snippet_Type_Counter {
+
+	/**
+	 * Count non-trashed snippets by type.
+	 *
+	 * @return array<string, int> Map of type name to snippet count, including 'all'.
+	 */
+	public function count(): array {
+		global $wpdb;
+		$table = code_snippets()->db->get_table_name();
+
+		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotSafe -- The table name comes from the database service.
+		$results = $wpdb->get_results( "SELECT scope, COUNT(*) AS count FROM $table WHERE active >= 0 GROUP BY scope" );
+
+		$counts = [ 'all' => 0 ];
+
+		foreach ( $results as $row ) {
+			$type = Snippet::get_type_from_scope( $row->scope );
+			$counts[ $type ] = ( $counts[ $type ] ?? 0 ) + (int) $row->count;
+			$counts['all'] += (int) $row->count;
+		}
+
+		return $counts;
+	}
+}
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php
new file mode 100644
index 000000000..3187ccfd7
--- /dev/null
+++ b/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php
@@ -0,0 +1,158 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Model\Snippet;
+use Code_Snippets\UnitTestCase;
+use WP_UnitTest_Factory;
+use function Code_Snippets\code_snippets;
+use function Code_Snippets\save_snippet;
+use function Code_Snippets\trash_snippet;
+
+/**
+ * Tests for manage menu assets and localized data.
+ */
+class Manage_Menu_Assets_Test extends UnitTestCase {
+
+	/**
+	 * Administrator user ID.
+	 *
+	 * @var int
+	 */
+	protected static int $admin_user_id;
+
+	/**
+	 * Set up fixtures before any tests run.
+	 *
+	 * @param WP_UnitTest_Factory $factory Factory object.
+	 *
+	 * @return void
+	 */
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$admin_user_id = $factory->user->create( [ 'role' => 'administrator' ] );
+	}
+
+	/**
+	 * Set up before each test.
+	 *
+	 * @return void
+	 */
+	public function set_up() {
+		parent::set_up();
+
+		wp_set_current_user( self::$admin_user_id );
+		set_current_screen( 'toplevel_page_' . code_snippets()->get_menu_slug() );
+		unset( $_REQUEST['subpage'] );
+	}
+
+	/**
+	 * Hidden columns and table preferences are localized.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_localizes_manage_table_preferences(): void {
+		$screen = get_current_screen();
+		update_user_option( self::$admin_user_id, 'manage' . $screen->id . 'columnshidden', [ 'desc', 'date' ] );
+		update_user_option( self::$admin_user_id, 'snippets_table_truncate_row_values', 0 );
+
+		$this->enqueue_assets();
+		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
+
+		$this->assertIsString( $data );
+		$this->assertStringContainsString( '"hiddenColumns":["desc","date"]', $data );
+		$this->assertStringContainsString( '"truncateRowValues":"0"', $data );
+		$this->assertStringContainsString( '"bulkDownloadNonce":"', $data );
+		$this->assertStringContainsString( '"supportsZipDownloads":', $data );
+	}
+
+	/**
+	 * Preview assets exclude the full editing dependencies.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_loads_only_preview_editor_dependencies(): void {
+		foreach ( [ 'htmlhint', 'csslint', 'jshint', 'code-snippets-code-editor' ] as $handle ) {
+			wp_dequeue_script( $handle );
+		}
+
+		$this->enqueue_assets();
+
+		$this->assertTrue( wp_script_is( 'code-editor', 'enqueued' ) );
+		$this->assertTrue( wp_style_is( 'code-editor', 'enqueued' ) );
+		$this->assertFalse( wp_script_is( 'htmlhint', 'enqueued' ) );
+		$this->assertFalse( wp_script_is( 'csslint', 'enqueued' ) );
+		$this->assertFalse( wp_script_is( 'jshint', 'enqueued' ) );
+		$this->assertFalse( wp_script_is( 'code-snippets-code-editor', 'enqueued' ) );
+	}
+
+	/**
+	 * The inline snippets threshold remains filterable.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_applies_inline_snippets_limit_filter(): void {
+		add_filter( 'code_snippets/manage/inline_snippets_limit', '__return_zero' );
+
+		$this->enqueue_assets();
+		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
+		$localized_offset = is_string( $data ) ? strrpos( $data, 'var CODE_SNIPPETS_MANAGE = ' ) : false;
+
+		remove_filter( 'code_snippets/manage/inline_snippets_limit', '__return_zero' );
+
+		$this->assertIsString( $data );
+		$this->assertNotFalse( $localized_offset );
+		$this->assertStringNotContainsString( '"snippetsList":', substr( $data, $localized_offset ) );
+	}
+
+	/**
+	 * Localized type counts retain their grouped, non-trashed shape.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_localizes_grouped_non_trashed_type_counts(): void {
+		$counter = new Snippet_Type_Counter();
+		$before = $counter->count();
+
+		save_snippet( new Snippet( [ 'scope' => 'global' ] ) );
+		save_snippet( new Snippet( [ 'scope' => 'admin' ] ) );
+		save_snippet( new Snippet( [ 'scope' => 'content' ] ) );
+		$trashed = save_snippet( new Snippet( [ 'scope' => 'site-css' ] ) );
+
+		$this->assertInstanceOf( Snippet::class, $trashed );
+		trash_snippet( $trashed->id );
+
+		$this->enqueue_assets();
+		$localized = $this->get_localized_data();
+
+		$this->assertSame( ( $before['all'] ?? 0 ) + 3, $localized['typeCounts']['all'] );
+		$this->assertSame( ( $before['php'] ?? 0 ) + 2, $localized['typeCounts']['php'] );
+		$this->assertSame( ( $before['html'] ?? 0 ) + 1, $localized['typeCounts']['html'] );
+		$this->assertSame( $before['css'] ?? 0, $localized['typeCounts']['css'] ?? 0 );
+	}
+
+	/**
+	 * Enqueue assets through the extracted service.
+	 *
+	 * @return void
+	 */
+	private function enqueue_assets(): void {
+		$assets = new Manage_Menu_Assets( new Manage_Menu_Screen_Options(), new Snippet_Type_Counter() );
+		$assets->enqueue( Admin_Menu::$script_deps, Admin_Menu::$style_deps );
+	}
+
+	/**
+	 * Decode the latest manage menu localization payload.
+	 *
+	 * @return array<string, mixed>
+	 */
+	private function get_localized_data(): array {
+		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
+		$prefix = 'var CODE_SNIPPETS_MANAGE = ';
+		$offset = is_string( $data ) ? strrpos( $data, $prefix ) : false;
+
+		$this->assertNotFalse( $offset );
+		$json = substr( $data, $offset + strlen( $prefix ) );
+
+		return json_decode( substr( $json, 0, strrpos( $json, ';' ) ), true );
+	}
+}
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Bulk_Download_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Bulk_Download_Test.php
new file mode 100644
index 000000000..d60132a0e
--- /dev/null
+++ b/tests/unit/Admin/Menus/Manage_Menu_Bulk_Download_Test.php
@@ -0,0 +1,77 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Model\Snippet;
+use Code_Snippets\UnitTestCase;
+use WP_Error;
+use function Code_Snippets\save_snippet;
+
+/**
+ * Tests for manage menu bulk downloads.
+ */
+class Manage_Menu_Bulk_Download_Test extends UnitTestCase {
+
+	/**
+	 * Malformed request data does not resolve any snippets.
+	 *
+	 * @return void
+	 */
+	public function test_resolve_snippets_ignores_malformed_payload(): void {
+		$bulk_download = new Manage_Menu_Bulk_Download();
+
+		$this->assertSame( [], $bulk_download->resolve_snippets( '{invalid' ) );
+	}
+
+	/**
+	 * Valid local snippet identifiers resolve to snippet models.
+	 *
+	 * @return void
+	 */
+	public function test_resolve_snippets_returns_requested_local_snippets(): void {
+		$snippet = save_snippet( new Snippet( [ 'name' => 'Bulk Download Fixture' ] ) );
+		$this->assertInstanceOf( Snippet::class, $snippet );
+
+		$payload = wp_json_encode( [ [ 'id' => $snippet->id ] ] );
+		$result = ( new Manage_Menu_Bulk_Download() )->resolve_snippets( $payload );
+
+		$this->assertCount( 1, $result );
+		$this->assertSame( $snippet->id, $result[0]->id );
+	}
+
+	/**
+	 * Subsite admins cannot resolve network snippets for download.
+	 *
+	 * @return void
+	 */
+	public function test_resolve_snippets_requires_network_cap(): void {
+		if ( ! is_multisite() ) {
+			$this->markTestSkipped( 'Network snippet downloads only apply on multisite.' );
+		}
+
+		$snippet = save_snippet(
+			new Snippet(
+				[
+					'name'    => 'Network Download Fixture',
+					'code'    => '<?php echo "network";',
+					'scope'   => 'global',
+					'network' => true,
+				]
+			)
+		);
+
+		$payload = wp_json_encode(
+			[
+				[
+					'id'      => $snippet->id,
+					'network' => true,
+				],
+			]
+		);
+
+		$result = ( new Manage_Menu_Bulk_Download() )->resolve_snippets( $payload );
+
+		$this->assertInstanceOf( WP_Error::class, $result );
+		$this->assertSame( 'code_snippets_forbidden_network_download', $result->get_error_code() );
+	}
+}
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Registration_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Registration_Test.php
new file mode 100644
index 000000000..c96a42b2a
--- /dev/null
+++ b/tests/unit/Admin/Menus/Manage_Menu_Registration_Test.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\UnitTestCase;
+
+/**
+ * Tests for manage menu registration support.
+ */
+class Manage_Menu_Registration_Test extends UnitTestCase {
+
+	/**
+	 * The menu icon stylesheet is registered through the helper.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_menu_css_enqueues_menu_icon_stylesheet(): void {
+		wp_dequeue_style( 'code-snippets-menu' );
+
+		( new Manage_Menu_Registration() )->enqueue_menu_css();
+
+		$this->assertTrue( wp_style_is( 'code-snippets-menu', 'enqueued' ) );
+	}
+}
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Screen_Options_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Screen_Options_Test.php
new file mode 100644
index 000000000..f2db78565
--- /dev/null
+++ b/tests/unit/Admin/Menus/Manage_Menu_Screen_Options_Test.php
@@ -0,0 +1,149 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\UnitTestCase;
+use WP_UnitTest_Factory;
+use function Code_Snippets\code_snippets;
+
+/**
+ * Tests for manage menu Screen Options.
+ */
+class Manage_Menu_Screen_Options_Test extends UnitTestCase {
+
+	/**
+	 * Administrator user ID.
+	 *
+	 * @var int
+	 */
+	protected static int $admin_user_id;
+
+	/**
+	 * Set up fixtures before any tests run.
+	 *
+	 * @param WP_UnitTest_Factory $factory Factory object.
+	 *
+	 * @return void
+	 */
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$admin_user_id = $factory->user->create( [ 'role' => 'administrator' ] );
+	}
+
+	/**
+	 * Set up before each test.
+	 *
+	 * @return void
+	 */
+	public function set_up() {
+		parent::set_up();
+
+		wp_set_current_user( self::$admin_user_id );
+		set_current_screen( 'toplevel_page_' . code_snippets()->get_menu_slug() );
+		delete_user_option( self::$admin_user_id, 'snippets_table_truncate_row_values' );
+		unset(
+			$_POST['wp_screen_options'],
+			$_POST['screenoptionnonce'],
+			$_POST['snippets_table_truncate_row_values'],
+			$_REQUEST['page'],
+			$_REQUEST['subpage']
+		);
+	}
+
+	/**
+	 * Screen columns retain existing values and add the snippet fields.
+	 *
+	 * @return void
+	 */
+	public function test_get_columns_adds_snippet_columns(): void {
+		$options = new Manage_Menu_Screen_Options();
+
+		$columns = $options->get_columns( [ 'existing' => 'Existing' ] );
+
+		$this->assertSame( 'Existing', $columns['existing'] );
+		$this->assertSame( 'Columns', $columns['_title'] );
+		$this->assertSame( 'Description', $columns['desc'] );
+		$this->assertSame( 'Modified', $columns['date'] );
+	}
+
+	/**
+	 * The manage screen renders a truncation toggle.
+	 *
+	 * @return void
+	 */
+	public function test_render_adds_truncation_toggle(): void {
+		$options = new Manage_Menu_Screen_Options();
+
+		$output = $options->render( '' );
+
+		$this->assertStringContainsString( 'snippets-table-truncate-row-values', $output );
+		$this->assertStringContainsString( 'Truncate long snippet names and descriptions', $output );
+	}
+
+	/**
+	 * The Community Cloud view does not render snippet table controls.
+	 *
+	 * @return void
+	 */
+	public function test_render_skips_truncation_toggle_on_cloud_community_view(): void {
+		$_REQUEST['subpage'] = 'cloud-community';
+		$options = new Manage_Menu_Screen_Options();
+
+		$this->assertSame( '', $options->render( '' ) );
+		$this->assertTrue( $options->is_cloud_community_view() );
+		$this->assertFalse( $options->is_manage_table_view() );
+	}
+
+	/**
+	 * The truncation preference is saved from the Screen Options form.
+	 *
+	 * @return void
+	 */
+	public function test_save_truncation_preference_updates_user_option(): void {
+		$_REQUEST['page'] = code_snippets()->get_menu_slug();
+		$_POST['wp_screen_options'] = [
+			'option' => 'snippets_per_page',
+			'value'  => '20',
+		];
+		$_POST['screenoptionnonce'] = wp_create_nonce( 'screen-options-nonce' );
+		$options = new Manage_Menu_Screen_Options();
+
+		$options->save_truncation_preference();
+		$this->assertFalse( (bool) get_user_option( 'snippets_table_truncate_row_values', self::$admin_user_id ) );
+
+		$_POST['snippets_table_truncate_row_values'] = '1';
+		$options->save_truncation_preference();
+		$this->assertTrue( (bool) get_user_option( 'snippets_table_truncate_row_values', self::$admin_user_id ) );
+	}
+
+	/**
+	 * The Community Cloud screen does not overwrite the truncation preference.
+	 *
+	 * @return void
+	 */
+	public function test_save_truncation_preference_ignores_cloud_community_view(): void {
+		update_user_option( self::$admin_user_id, 'snippets_table_truncate_row_values', 1 );
+		$_REQUEST['page'] = code_snippets()->get_menu_slug();
+		$_REQUEST['subpage'] = 'cloud-community';
+		$_POST['wp_screen_options'] = [
+			'option' => 'snippets_per_page',
+			'value'  => '20',
+		];
+		$_POST['screenoptionnonce'] = wp_create_nonce( 'screen-options-nonce' );
+
+		( new Manage_Menu_Screen_Options() )->save_truncation_preference();
+
+		$this->assertTrue( (bool) get_user_option( 'snippets_table_truncate_row_values', self::$admin_user_id ) );
+	}
+
+	/**
+	 * Only the snippets per-page option is saved by the filter.
+	 *
+	 * @return void
+	 */
+	public function test_save_per_page_option_limits_the_filter_to_snippets(): void {
+		$options = new Manage_Menu_Screen_Options();
+
+		$this->assertSame( '25', $options->save_per_page_option( false, 'snippets_per_page', '25' ) );
+		$this->assertFalse( $options->save_per_page_option( false, 'other_option', '25' ) );
+	}
+}
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Test.php
index 7f58b7200..8f08db959 100644
--- a/tests/unit/Admin/Menus/Manage_Menu_Test.php
+++ b/tests/unit/Admin/Menus/Manage_Menu_Test.php
@@ -2,15 +2,9 @@
 
 namespace Code_Snippets\Admin\Menus;
 
-use Code_Snippets\Model\Snippet;
 use Code_Snippets\UnitTestCase;
-use ReflectionException;
-use ReflectionMethod;
-use WP_Error;
 use WP_UnitTest_Factory;
 use function Code_Snippets\code_snippets;
-use function Code_Snippets\save_snippet;
-use function Code_Snippets\trash_snippet;
 
 /**
  * Tests for the manage menu registration.
@@ -145,41 +139,6 @@ public function test_enqueue_assets_applies_inline_snippets_limit_filter(): void
 		$this->assertStringNotContainsString( '"snippetsList":', substr( $data, $localized_offset ) );
 	}
 
-	/**
-	 * Localized type counts combine compatible scopes and exclude trashed snippets.
-	 *
-	 * @return void
-	 *
-	 * @throws ReflectionException Creates instance of ReflectionMethod class.
-	 */
-	public function test_enqueue_assets_localizes_grouped_non_trashed_type_counts(): void {
-		$menu = new Manage_Menu();
-		$method = new ReflectionMethod( $menu, 'count_snippets_by_type' );
-		$method->setAccessible( true );
-		$before = $method->invoke( $menu );
-
-		save_snippet( new Snippet( [ 'scope' => 'global' ] ) );
-		save_snippet( new Snippet( [ 'scope' => 'admin' ] ) );
-		save_snippet( new Snippet( [ 'scope' => 'content' ] ) );
-		$trashed = save_snippet( new Snippet( [ 'scope' => 'site-css' ] ) );
-
-		$this->assertInstanceOf( Snippet::class, $trashed );
-		trash_snippet( $trashed->id );
-
-		$menu->enqueue_assets();
-		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
-		$prefix = 'var CODE_SNIPPETS_MANAGE = ';
-		$offset = is_string( $data ) ? strrpos( $data, $prefix ) : false;
-		$this->assertNotFalse( $offset );
-		$json = substr( $data, $offset + strlen( $prefix ) );
-		$localized = json_decode( substr( $json, 0, strrpos( $json, ';' ) ), true );
-
-		$this->assertSame( ( $before['all'] ?? 0 ) + 3, $localized['typeCounts']['all'] );
-		$this->assertSame( ( $before['php'] ?? 0 ) + 2, $localized['typeCounts']['php'] );
-		$this->assertSame( ( $before['html'] ?? 0 ) + 1, $localized['typeCounts']['html'] );
-		$this->assertSame( $before['css'] ?? 0, $localized['typeCounts']['css'] ?? 0 );
-	}
-
 	/**
 	 * The manage screen renders a truncation toggle in Screen Options.
 	 *
@@ -287,45 +246,4 @@ public function test_save_truncation_preference_ignores_cloud_community_view():
 
 		$this->assertTrue( (bool) get_user_option( 'snippets_table_truncate_row_values', self::$admin_user_id ) );
 	}
-
-	/**
-	 * Subsite admins cannot request downloads from the network snippets table.
-	 *
-	 * @return void
-	 *
-	 * @throws ReflectionException Creates instance of ReflectionMethod class.
-	 */
-	public function test_network_bulk_download_requires_network_cap(): void {
-		if ( ! is_multisite() ) {
-			$this->markTestSkipped( 'Network snippet downloads only apply on multisite.' );
-		}
-
-		$snippet = save_snippet(
-			new Snippet(
-				array(
-					'name'    => 'Network Download Fixture',
-					'code'    => '<?php echo "network";',
-					'scope'   => 'global',
-					'network' => true,
-				)
-			)
-		);
-
-		$snippets_json = wp_json_encode(
-			array(
-				array(
-					'id'      => $snippet->id,
-					'network' => true,
-				),
-			)
-		);
-
-		$menu = new Manage_Menu();
-		$method = new ReflectionMethod( $menu, 'get_requested_download_snippets' );
-		$method->setAccessible( true );
-		$result = $method->invoke( $menu, $snippets_json );
-
-		$this->assertInstanceOf( WP_Error::class, $result );
-		$this->assertSame( 'code_snippets_forbidden_network_download', $result->get_error_code() );
-	}
 }
diff --git a/tests/unit/Admin/Menus/Snippet_Type_Counter_Test.php b/tests/unit/Admin/Menus/Snippet_Type_Counter_Test.php
new file mode 100644
index 000000000..0dff03fd3
--- /dev/null
+++ b/tests/unit/Admin/Menus/Snippet_Type_Counter_Test.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Model\Snippet;
+use Code_Snippets\UnitTestCase;
+use function Code_Snippets\save_snippet;
+use function Code_Snippets\trash_snippet;
+
+/**
+ * Tests for snippet type counts used by the manage menu.
+ */
+class Snippet_Type_Counter_Test extends UnitTestCase {
+
+	/**
+	 * Compatible scopes are combined and trashed snippets are excluded.
+	 *
+	 * @return void
+	 */
+	public function test_count_returns_non_trashed_counts_by_snippet_type(): void {
+		$counter = new Snippet_Type_Counter();
+		$before = $counter->count();
+
+		save_snippet( new Snippet( [ 'scope' => 'global' ] ) );
+		save_snippet( new Snippet( [ 'scope' => 'admin' ] ) );
+		save_snippet( new Snippet( [ 'scope' => 'content' ] ) );
+		$trashed = save_snippet( new Snippet( [ 'scope' => 'site-css' ] ) );
+
+		$this->assertInstanceOf( Snippet::class, $trashed );
+		trash_snippet( $trashed->id );
+
+		$counts = $counter->count();
+
+		$this->assertSame( ( $before['all'] ?? 0 ) + 3, $counts['all'] );
+		$this->assertSame( ( $before['php'] ?? 0 ) + 2, $counts['php'] );
+		$this->assertSame( ( $before['html'] ?? 0 ) + 1, $counts['html'] );
+		$this->assertSame( $before['css'] ?? 0, $counts['css'] ?? 0 );
+	}
+}

From d48ac2dce0b2d307cb84b5a4cc2ad78e23d56042 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 22:35:46 +0300
Subject: [PATCH 41/49] fix: confirm dirty history navigation

---
 .../EditMenu/SnippetForm/SnippetForm.tsx      | 15 ++++++++++
 tests/e2e/code-snippets-edit.spec.ts          | 11 ++++---
 .../Frontend/Snippet_Form_Source_Test.php     | 30 +++++++++++++++++++
 3 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 tests/unit/Frontend/Snippet_Form_Source_Test.php

diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index 4ca0d4016..a299a9d3d 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -148,6 +148,21 @@ const useReloadOnPopState = (isDirty: boolean) => {
 		currentUrl.current = window.location.href
 	})
 
+	useEffect(() => {
+		const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+			event.preventDefault()
+			// Required by Chrome and Edge versions before 119.
+			// eslint-disable-next-line @typescript-eslint/no-deprecated
+			event.returnValue = true
+		}
+
+		if (isDirty) {
+			window.addEventListener('beforeunload', handleBeforeUnload)
+		}
+
+		return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+	}, [isDirty])
+
 	useEffect(() => {
 		const handlePopState = () => {
 			if (isDirty && !window.confirm(
diff --git a/tests/e2e/code-snippets-edit.spec.ts b/tests/e2e/code-snippets-edit.spec.ts
index b37952421..5e3462378 100644
--- a/tests/e2e/code-snippets-edit.spec.ts
+++ b/tests/e2e/code-snippets-edit.spec.ts
@@ -96,16 +96,19 @@ test.describe('Code Snippets Admin', () => {
 		const editedName = `${snippetName} edited`
 		await page.locator('#title').fill(editedName)
 		page.once('dialog', async dialog => {
-			expect(dialog.message()).toContain('unsaved changes')
+			expect(dialog.type()).toBe('beforeunload')
 			await dialog.dismiss()
 		})
-		await page.goBack()
+		await page.evaluate(() => window.history.back())
 
 		await expect(page).toHaveURL(/page=edit-snippet/)
 		await expect(page.locator('#title')).toHaveValue(editedName)
 
-		page.once('dialog', dialog => dialog.accept())
-		await page.goBack()
+		page.once('dialog', async dialog => {
+			expect(dialog.type()).toBe('beforeunload')
+			await dialog.accept()
+		})
+		await page.evaluate(() => window.history.back())
 		await expect(page).toHaveURL(/page=snippets/)
 
 		await helper.cleanupSnippet(snippetName)
diff --git a/tests/unit/Frontend/Snippet_Form_Source_Test.php b/tests/unit/Frontend/Snippet_Form_Source_Test.php
new file mode 100644
index 000000000..246d8f544
--- /dev/null
+++ b/tests/unit/Frontend/Snippet_Form_Source_Test.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Code_Snippets\Frontend;
+
+use Code_Snippets\UnitTestCase;
+use WP_Filesystem_Direct;
+
+/**
+ * Source contracts for the snippet editor form.
+ */
+class Snippet_Form_Source_Test extends UnitTestCase {
+
+	/**
+	 * Dirty navigation supports browsers that require the legacy return value.
+	 *
+	 * @return void
+	 */
+	public function test_dirty_beforeunload_handler_sets_legacy_return_value(): void {
+		$filesystem = new WP_Filesystem_Direct( null );
+		$source = $filesystem->get_contents(
+			dirname( __DIR__, 3 ) . '/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx'
+		);
+
+		$this->assertIsString( $source );
+		$this->assertMatchesRegularExpression(
+			'/event\.preventDefault\(\)\s+(?:(?:\/\/[^\n]*)\s+)*event\.returnValue = true/',
+			$source
+		);
+	}
+}

From b17c2d3d05be2d8bc0f780670bf35f6a22611f8d Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Sat, 18 Jul 2026 02:12:18 +0300
Subject: [PATCH 42/49] fix: make snippet preview focus accessible

---
 .../components/common/SnippetPreviewModal.tsx | 30 +++++---
 tests/e2e/code-snippets-preview.spec.ts       | 76 +++++++++++++------
 2 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 5d70b643e..200246867 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -10,7 +10,7 @@ import { Badge } from './Badge'
 import { Button } from './Button'
 import { useDeleteSnippet } from './DeleteButton'
 import type { BadgeName } from './Badge'
-import type { EditorFromTextArea } from 'codemirror'
+import type { EditorConfiguration, EditorFromTextArea } from 'codemirror'
 import type { ReactNode } from 'react'
 import type { Snippet } from '../../types/Snippet'
 
@@ -25,6 +25,8 @@ export interface PreviewWorkingState {
 
 type PreviewExtraActions = ReactNode | ((working: PreviewWorkingState) => ReactNode)
 
+const CODE_PREVIEW_LABEL = __('Snippet code preview', 'code-snippets')
+
 export interface SnippetPreviewModalProps {
 	title: string
 	code: string
@@ -43,6 +45,18 @@ const EDITOR_MODES: Record<string, string> = {
 	html: 'application/x-httpd-php'
 }
 
+const getPreviewEditorSettings = (type: string): EditorConfiguration => ({
+	extraKeys: {
+		'Tab': false,
+		'Shift-Tab': false
+	},
+	readOnly: true,
+	lineNumbers: true,
+	theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
+	mode: EDITOR_MODES[type] ?? EDITOR_MODES.php,
+	screenReaderLabel: CODE_PREVIEW_LABEL
+})
+
 interface SnippetPreviewActionsProps {
 	snippet: Snippet
 	closeModal: () => void
@@ -228,14 +242,10 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			return undefined
 		}
 
-		const instance = window.wp.codeEditor.initialize(textareaRef.current, {
-			codemirror: {
-				readOnly: true,
-				lineNumbers: true,
-				theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
-				mode: EDITOR_MODES[type] ?? EDITOR_MODES.php
-			}
-		})
+		const instance = window.wp.codeEditor.initialize(
+			textareaRef.current,
+			{ codemirror: getPreviewEditorSettings(type) }
+		)
 
 		return () => {
 			(instance.codemirror as EditorFromTextArea).toTextArea()
@@ -253,7 +263,7 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 				<textarea
 					ref={textareaRef}
 					readOnly
-					aria-label={__('Snippet code preview', 'code-snippets')}
+					aria-label={CODE_PREVIEW_LABEL}
 					defaultValue={`${'php' === type ? '<?php\n\n' : ''}${code}`}
 				/>
 			</div>
diff --git a/tests/e2e/code-snippets-preview.spec.ts b/tests/e2e/code-snippets-preview.spec.ts
index 2f2626a1a..efda2b1f2 100644
--- a/tests/e2e/code-snippets-preview.spec.ts
+++ b/tests/e2e/code-snippets-preview.spec.ts
@@ -2,6 +2,7 @@ import { expect, test } from '@playwright/test'
 import { DEFAULT_E2E_SNIPPET_BASE_NAME, SnippetsTestHelper } from './helpers/SnippetsTestHelper'
 import { SELECTORS, TIMEOUTS } from './helpers/constants'
 import { wpCli } from './helpers/wpCli'
+import type { Locator, Page } from '@playwright/test'
 
 const MAXIMUM_FOCUS_ATTEMPTS = 10
 
@@ -24,6 +25,34 @@ const setSyntaxHighlighting = (enabled: boolean): Promise<string> => {
 test.describe('Code Snippets Preview Modal', () => {
 	let helper: SnippetsTestHelper
 	let snippetName: string
+	const openPreviewEditor = async (page: Page): Promise<Locator> => {
+		await setSyntaxHighlighting(true)
+		await helper.navigateToSnippetsAdmin()
+		await helper.filterSnippetsByName(snippetName)
+
+		const row = page
+			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
+			.first()
+		await expect(row).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+
+		await row.hover()
+		await row.locator(SELECTORS.PREVIEW_ACTION).first().click()
+
+		const editor = page.locator('.code-snippets-preview-modal .CodeMirror')
+		await expect(editor).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+		return editor
+	}
+	const focusPreviewEditor = async (page: Page, editor: Locator): Promise<void> => {
+		for (let attempt = 0; attempt < MAXIMUM_FOCUS_ATTEMPTS; attempt++) {
+			if (await editor.evaluate(element => element.classList.contains('CodeMirror-focused'))) {
+				break
+			}
+
+			await page.keyboard.press('Tab')
+		}
+
+		await expect(editor).toHaveClass(/CodeMirror-focused/)
+	}
 
 	test.beforeEach(async ({ page }) => {
 		helper = new SnippetsTestHelper(page)
@@ -64,33 +93,11 @@ test.describe('Code Snippets Preview Modal', () => {
 	})
 
 	test('Preview code can be selected with the keyboard without being changed', async ({ page }) => {
-		await setSyntaxHighlighting(true)
-		await helper.navigateToSnippetsAdmin()
-		await helper.filterSnippetsByName(snippetName)
-
-		const row = page
-			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
-			.first()
-		await expect(row).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
-
-		await row.hover()
-		await row.locator(SELECTORS.PREVIEW_ACTION).first().click()
-
+		const editor = await openPreviewEditor(page)
 		const preview = page.locator('.code-snippets-preview-modal')
-		const editor = preview.locator('.CodeMirror')
-		const codeArea = preview.getByLabel('Snippet code preview')
+		const codeArea = preview.locator('textarea[aria-label="Snippet code preview"]')
 		const initialValue = await codeArea.inputValue()
-		await expect(editor).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
-
-		for (let attempt = 0; attempt < MAXIMUM_FOCUS_ATTEMPTS; attempt++) {
-			if (await editor.evaluate(element => element.classList.contains('CodeMirror-focused'))) {
-				break
-			}
-
-			await page.keyboard.press('Tab')
-		}
-
-		await expect(editor).toHaveClass(/CodeMirror-focused/)
+		await focusPreviewEditor(page, editor)
 		await page.keyboard.press('Shift+ArrowRight')
 
 		await expect.poll(() => editor.evaluate(element => {
@@ -102,4 +109,23 @@ test.describe('Code Snippets Preview Modal', () => {
 		})).not.toBe('')
 		await expect(codeArea).toHaveValue(initialValue)
 	})
+
+	test('Preview editor exposes its accessible label', async ({ page }) => {
+		const editor = await openPreviewEditor(page)
+
+		await expect(editor.locator('[aria-label="Snippet code preview"]')).toBeAttached()
+	})
+
+	for (const keypress of <const> ['Tab', 'Shift+Tab']) {
+		test(`${keypress} leaves the preview editor`, async ({ page }) => {
+			const editor = await openPreviewEditor(page)
+			await focusPreviewEditor(page, editor)
+
+			await page.keyboard.press(keypress)
+
+			await expect.poll(
+				() => editor.evaluate(element => element.contains(document.activeElement))
+			).toBe(false)
+		})
+	}
 })

From fb4bc4e9f879c38d20d06d6a3240beda0bbace12 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Sat, 18 Jul 2026 02:12:43 +0300
Subject: [PATCH 43/49] fix: avoid duplicate dirty navigation prompts

---
 .../EditMenu/SnippetForm/SnippetForm.tsx      |  7 +++++
 tests/e2e/code-snippets-edit.spec.ts          | 29 +++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index a299a9d3d..c78cb6411 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -143,6 +143,7 @@ const ConditionsEditor: React.FC = () => {
 
 const useReloadOnPopState = (isDirty: boolean) => {
 	const currentUrl = useRef(window.location.href)
+	const skipNextUnloadPrompt = useRef(false)
 
 	useEffect(() => {
 		currentUrl.current = window.location.href
@@ -150,6 +151,11 @@ const useReloadOnPopState = (isDirty: boolean) => {
 
 	useEffect(() => {
 		const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+			if (skipNextUnloadPrompt.current) {
+				skipNextUnloadPrompt.current = false
+				return
+			}
+
 			event.preventDefault()
 			// Required by Chrome and Edge versions before 119.
 			// eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -172,6 +178,7 @@ const useReloadOnPopState = (isDirty: boolean) => {
 				return
 			}
 
+			skipNextUnloadPrompt.current = isDirty
 			window.location.reload()
 		}
 
diff --git a/tests/e2e/code-snippets-edit.spec.ts b/tests/e2e/code-snippets-edit.spec.ts
index 5e3462378..1f48840b5 100644
--- a/tests/e2e/code-snippets-edit.spec.ts
+++ b/tests/e2e/code-snippets-edit.spec.ts
@@ -114,6 +114,35 @@ test.describe('Code Snippets Admin', () => {
 		await helper.cleanupSnippet(snippetName)
 	})
 
+	test('Accepted in-page Back navigation shows one confirmation', async ({ page }) => {
+		const snippetName = SnippetsTestHelper.makeUniqueSnippetName()
+		await helper.createSnippet({
+			name: snippetName,
+			code: "add_filter('show_admin_bar', '__return_false');"
+		})
+		await helper.openSnippet(snippetName)
+
+		await page.locator('a.page-title-action').filter({ hasText: 'Add New' }).click()
+		await expect(page).toHaveURL(/page=add-snippet/)
+		await page.locator('#title').fill(`${snippetName} draft`)
+
+		const dialogs: { message: string, type: string }[] = []
+		page.on('dialog', async dialog => {
+			dialogs.push({ message: dialog.message(), type: dialog.type() })
+			await dialog.accept()
+		})
+
+		await page.evaluate(() => window.history.back())
+		await expect(page).toHaveURL(/page=edit-snippet/)
+		await expect(page.locator('#title')).toHaveValue(snippetName)
+
+		expect(dialogs).toHaveLength(1)
+		expect(dialogs[0].type).toBe('confirm')
+		expect(dialogs[0].message).toContain('unsaved changes')
+
+		await helper.cleanupSnippet(snippetName)
+	})
+
 	test('Shows an error notice when activation fails after saving', async ({ page }) => {
 		const snippetName = SnippetsTestHelper.makeUniqueSnippetName()
 		await helper.clickAddNewSnippet()

From c70b0fdea2bad74112b2fa81615befbd30d05f7d Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Sat, 18 Jul 2026 02:23:45 +0300
Subject: [PATCH 44/49] chore: enforce preview source limits

---
 .../EditMenu/SnippetForm/SnippetForm.tsx      | 15 ++++++++--
 .../components/common/SnippetPreviewModal.tsx | 28 +++++++++++++++----
 src/php/Admin/Menus/Snippet_Type_Counter.php  |  6 +++-
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index c78cb6411..e2e80b392 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -6,7 +6,12 @@ import { WithSnippetsAPIContext } from '../../../hooks/useSnippetsAPI'
 import { WithSnippetsListContext, useSnippetsList } from '../../../hooks/useSnippetsList'
 import { SubmitSnippetAction, useSubmitSnippet } from '../../../hooks/useSubmitSnippet'
 import { handleUnknownError } from '../../../utils/errors'
-import { createSnippetObject, getSnippetType, isCondition, validateSnippet } from '../../../utils/snippets/snippets'
+import {
+	createSnippetObject,
+	getSnippetType,
+	isCondition,
+	validateSnippet
+} from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { ConfirmDialog } from '../../common/ConfirmDialog'
 import { Toolbar } from '../../common/Toolbar'
@@ -126,7 +131,9 @@ const EditForm: React.FC<EditFormProps> = ({ children, className }) => {
 				{children}
 			</form>
 
-			<ConfirmSubmitDialog {...{ doSubmit, submitAction, setSubmitAction, validationWarning, setValidationWarning }} />
+			<ConfirmSubmitDialog
+				{...{ doSubmit, submitAction, setSubmitAction, validationWarning, setValidationWarning }}
+			/>
 		</>
 	)
 }
@@ -228,7 +235,9 @@ export const SnippetForm: React.FC = () =>
 	<WithRestAPIContext>
 		<WithSnippetsAPIContext>
 			<WithSnippetsListContext>
-				<WithSnippetFormContext initialSnippet={() => createSnippetObject(window.CODE_SNIPPETS_EDIT?.snippet)}>
+				<WithSnippetFormContext
+					initialSnippet={() => createSnippetObject(window.CODE_SNIPPETS_EDIT?.snippet)}
+				>
 					<Toolbar />
 					<EditFormWrap />
 				</WithSnippetFormContext>
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 200246867..86360ff3f 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -5,7 +5,11 @@ import { useSnippetsAPI } from '../../hooks/useSnippetsAPI'
 import { useSnippetsList } from '../../hooks/useSnippetsList'
 import { handleUnknownError } from '../../utils/errors'
 import { downloadSnippetExportFile } from '../../utils/files'
-import { canModifySnippet, cloneSnippetObject, getSnippetEditUrl } from '../../utils/snippets/snippets'
+import {
+	canModifySnippet,
+	cloneSnippetObject,
+	getSnippetEditUrl
+} from '../../utils/snippets/snippets'
 import { Badge } from './Badge'
 import { Button } from './Button'
 import { useDeleteSnippet } from './DeleteButton'
@@ -118,7 +122,8 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({
 	extraActions
 }) => {
 	const canModify = canModifySnippet(snippet)
-	const { handleClone, handleExport } = usePreviewActionHandlers({ snippet, closeModal, beginWorking, finishWorking })
+	const actionOptions = { snippet, closeModal, beginWorking, finishWorking }
+	const { handleClone, handleExport } = usePreviewActionHandlers(actionOptions)
 
 	return (
 		<div className="code-snippets-preview-modal__buttons">
@@ -177,7 +182,12 @@ const useWorkingState = () => {
 		return true
 	}
 
-	return { isWorking, beginWorking, finishWorking: () => updateWorking(false), setIsWorking: updateWorking }
+	return {
+		isWorking,
+		beginWorking,
+		finishWorking: () => updateWorking(false),
+		setIsWorking: updateWorking
+	}
 }
 
 /**
@@ -185,7 +195,11 @@ const useWorkingState = () => {
  * and snippets list contexts, so it is only rendered when the modal receives a
  * full snippet object rather than bare title/code/type values.
  */
-const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({ snippet, closeModal, extraActions }) => {
+const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({
+	snippet,
+	closeModal,
+	extraActions
+}) => {
 	const { refreshSnippetsList } = useSnippetsList()
 	const { isWorking, beginWorking, finishWorking, setIsWorking } = useWorkingState()
 	const { requestDelete, confirmDialog } = useDeleteSnippet({
@@ -269,7 +283,11 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			</div>
 
 			{snippet
-				? <SnippetPreviewActions snippet={snippet} extraActions={extraActions} closeModal={() => setIsOpen(false)} />
+				? <SnippetPreviewActions
+					snippet={snippet}
+					extraActions={extraActions}
+					closeModal={() => setIsOpen(false)}
+				/>
 				: null}
 		</Modal>
 		: null
diff --git a/src/php/Admin/Menus/Snippet_Type_Counter.php b/src/php/Admin/Menus/Snippet_Type_Counter.php
index 402979368..6dbbc892c 100644
--- a/src/php/Admin/Menus/Snippet_Type_Counter.php
+++ b/src/php/Admin/Menus/Snippet_Type_Counter.php
@@ -21,8 +21,12 @@ public function count(): array {
 		global $wpdb;
 		$table = code_snippets()->db->get_table_name();
 
-		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotSafe -- The table name comes from the database service.
+		// The table name comes from the plugin database service and cannot be parameterized.
+		// phpcs:disable WordPress.DB.DirectDatabaseQuery.DirectQuery
+		// phpcs:disable WordPress.DB.DirectDatabaseQuery.NoCaching
+		// phpcs:disable WordPress.DB.PreparedSQL.InterpolatedNotSafe
 		$results = $wpdb->get_results( "SELECT scope, COUNT(*) AS count FROM $table WHERE active >= 0 GROUP BY scope" );
+		// phpcs:enable
 
 		$counts = [ 'all' => 0 ];
 

From 953e061e8e59fbac2922203ced2ed3fcf0887d45 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Sat, 18 Jul 2026 02:47:44 +0300
Subject: [PATCH 45/49] chore: wrap preview support source lines

---
 .../EditMenu/EditorSidebar/controls/LockControl.tsx      | 9 ++++++++-
 .../EditMenu/SnippetForm/WithSnippetFormContext.tsx      | 4 +++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx b/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx
index ba0441f0a..cab91695a 100644
--- a/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx
+++ b/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx
@@ -6,7 +6,14 @@ import { TooltipButton } from '../../../common/TooltipButton'
 import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
 
 export const LockControl: React.FC = () => {
-	const { acceptSnippet, snippet, setSnippet, isWorking, setIsWorking, setCurrentNotice } = useSnippetForm()
+	const {
+		acceptSnippet,
+		snippet,
+		setSnippet,
+		isWorking,
+		setIsWorking,
+		setCurrentNotice
+	} = useSnippetForm()
 	const { update } = useSnippetsAPI()
 
 	const handleToggle = () => {
diff --git a/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx b/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
index d96be6666..85c709df2 100644
--- a/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
+++ b/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
@@ -57,7 +57,9 @@ export const WithSnippetFormContext: React.FC<WithSnippetFormContextProps> = ({
 		[snippet.locked, snippet.scope]
 	)
 	const isDirty = useMemo(
-		() => JSON.stringify(getSnippetDraftState(snippet)) !== JSON.stringify(getSnippetDraftState(savedSnippet)),
+		() =>
+			JSON.stringify(getSnippetDraftState(snippet)) !==
+			JSON.stringify(getSnippetDraftState(savedSnippet)),
 		[snippet, savedSnippet]
 	)
 	const acceptSnippet = useCallback((value: Snippet) => {

From a5e745a84c1c1d5d4b01297aff40f86bc0cac949 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Sat, 18 Jul 2026 02:48:52 +0300
Subject: [PATCH 46/49] chore: isolate snippet draft comparison

---
 .../EditMenu/SnippetForm/WithSnippetFormContext.tsx    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx b/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
index 85c709df2..a006df03f 100644
--- a/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
+++ b/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
@@ -44,6 +44,12 @@ const getSnippetDraftState = (snippet: Snippet) => ({
 	conditionId: snippet.conditionId
 })
 
+const isSnippetDraftDirty = (snippet: Snippet, savedSnippet: Snippet): boolean => {
+	const draftState = JSON.stringify(getSnippetDraftState(snippet))
+	const savedDraftState = JSON.stringify(getSnippetDraftState(savedSnippet))
+	return draftState !== savedDraftState
+}
+
 export const WithSnippetFormContext: React.FC<WithSnippetFormContextProps> = ({ children, initialSnippet }) => {
 	const [initialValue] = useState<Snippet>(initialSnippet)
 	const [snippet, setSnippet] = useState<Snippet>(initialValue)
@@ -57,9 +63,7 @@ export const WithSnippetFormContext: React.FC<WithSnippetFormContextProps> = ({
 		[snippet.locked, snippet.scope]
 	)
 	const isDirty = useMemo(
-		() =>
-			JSON.stringify(getSnippetDraftState(snippet)) !==
-			JSON.stringify(getSnippetDraftState(savedSnippet)),
+		() => isSnippetDraftDirty(snippet, savedSnippet),
 		[snippet, savedSnippet]
 	)
 	const acceptSnippet = useCallback((value: Snippet) => {

From 6aa193e940618e0a67bfbf4081090045dc7ff37a Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Sat, 18 Jul 2026 03:23:27 +0300
Subject: [PATCH 47/49] chore: remove preview implementation narration

---
 src/js/components/common/SnippetPreviewModal.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 86360ff3f..0dce2ccfe 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -18,9 +18,6 @@ import type { EditorConfiguration, EditorFromTextArea } from 'codemirror'
 import type { ReactNode } from 'react'
 import type { Snippet } from '../../types/Snippet'
 
-// Slotted actions render inside the footer group; the function form receives
-// the modal's shared working state so injected buttons lock together with the
-// built-in actions instead of racing them.
 export interface PreviewWorkingState {
 	isWorking: boolean
 	beginWorking: () => boolean
@@ -41,7 +38,6 @@ export interface SnippetPreviewModalProps {
 	extraActions?: PreviewExtraActions
 }
 
-// Mirrors the type-to-mode mapping used by the live editor in SnippetTypeInput.
 const EDITOR_MODES: Record<string, string> = {
 	css: 'text/css',
 	js: 'javascript',

From e203956be88d038813e0ccb5be4c0e530a8c0c51 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sun, 19 Jul 2026 17:28:34 +0000
Subject: [PATCH 48/49] fix: remove duplicate preview test constant

Propagation also duplicated the keyboard-selection test; the older inline
copy (same title) blocked Playwright discovery, so it is removed in favor
of the refactored helper-based version.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 tests/e2e/code-snippets-preview.spec.ts | 53 -------------------------
 1 file changed, 53 deletions(-)

diff --git a/tests/e2e/code-snippets-preview.spec.ts b/tests/e2e/code-snippets-preview.spec.ts
index d6b6d74cc..2bfb6a3f9 100644
--- a/tests/e2e/code-snippets-preview.spec.ts
+++ b/tests/e2e/code-snippets-preview.spec.ts
@@ -6,8 +6,6 @@ import type { Locator, Page } from '@playwright/test'
 
 const MAXIMUM_FOCUS_ATTEMPTS = 10
 
-const MAXIMUM_FOCUS_ATTEMPTS = 10
-
 // Disabling the admin's "Syntax Highlighting" preference makes
 // wp_enqueue_code_editor() a no-op, so window.wp.codeEditor is undefined when
 // the preview modal opens. The modal must fall back to the read-only textarea
@@ -104,57 +102,6 @@ test.describe('Code Snippets Preview Modal', () => {
 			expect(pageErrors).toEqual([])
 		})
 
-	test('Preview code can be selected with the keyboard without being changed', async ({ page }) => {
-		await setSyntaxHighlighting(true)
-		await helper.navigateToSnippetsAdmin()
-		await helper.filterSnippetsByName(snippetName)
-
-		const row = page
-			.locator(
-				`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`
-			)
-			.first()
-		await expect(row).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
-
-		await row.hover()
-		await row.locator(SELECTORS.PREVIEW_ACTION).first().click()
-
-		const preview = page.locator('.code-snippets-preview-modal')
-		const editor = preview.locator('.CodeMirror')
-
-		// The source textarea always precedes CodeMirror's injected wrapper in
-		// DOM order; CodeMirror's live input (labelled below) would also match
-		// a getByLabel lookup.
-		const codeArea = preview.locator('textarea').first()
-		const initialValue = await codeArea.inputValue()
-		await expect(editor).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
-
-		// CodeMirror hides the labelled source textarea and focuses its own
-		// internal input; that input must carry its own accessible name.
-		await expect(editor.locator('[aria-label="Snippet code preview"]').first())
-			.toBeAttached()
-
-		for (let attempt = 0; attempt < MAXIMUM_FOCUS_ATTEMPTS; attempt++) {
-			if (await editor.evaluate(element => element.classList.contains('CodeMirror-focused'))) {
-				break
-			}
-
-			await page.keyboard.press('Tab')
-		}
-
-		await expect(editor).toHaveClass(/CodeMirror-focused/)
-		await page.keyboard.press('Shift+ArrowRight')
-
-		await expect.poll(() => editor.evaluate(element => {
-			const codeMirror = (<HTMLElement & {
-				CodeMirror?: { getSelection?: () => string }
-			}>element).CodeMirror
-
-			return codeMirror?.getSelection?.() ?? ''
-		})).not.toBe('')
-		await expect(codeArea).toHaveValue(initialValue)
-	})
-
 	test('Preview code can be selected with the keyboard without being changed', async ({ page }) => {
 		const editor = await openPreviewEditor(page)
 		const preview = page.locator('.code-snippets-preview-modal')

From 6b645f7378621249d3b3ccb357f041c9dab49389 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sun, 19 Jul 2026 17:53:27 +0000
Subject: [PATCH 49/49] fix: scope preview editor locator

The keyboard-selection test located textarea[aria-label] from the whole
modal, matching both the readonly fallback and the CodeMirror input.
The input element also differs by CodeMirror inputStyle (contenteditable
on current WordPress, textarea on older builds), so inputValue/toHaveValue
cannot target it portably. Read the document and selection through the
already-scoped .CodeMirror editor instance instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 tests/e2e/code-snippets-preview.spec.ts | 26 ++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/tests/e2e/code-snippets-preview.spec.ts b/tests/e2e/code-snippets-preview.spec.ts
index 2bfb6a3f9..eed05a74a 100644
--- a/tests/e2e/code-snippets-preview.spec.ts
+++ b/tests/e2e/code-snippets-preview.spec.ts
@@ -53,6 +53,17 @@ test.describe('Code Snippets Preview Modal', () => {
 
 		await expect(editor).toHaveClass(/CodeMirror-focused/)
 	}
+	// The CodeMirror input differs by inputStyle ('textarea' or 'contenteditable'
+	// depending on the WordPress version), so read the document and selection
+	// through the editor instance instead of locating the input element.
+	const readPreviewEditor = (editor: Locator, method: 'getSelection' | 'getValue'): Promise<string> =>
+		editor.evaluate((element, editorMethod) => {
+			const codeMirror = (<HTMLElement & {
+				CodeMirror?: Partial<Record<'getSelection' | 'getValue', () => string>>
+			}>element).CodeMirror
+
+			return codeMirror?.[editorMethod]?.() ?? ''
+		}, method)
 
 	test.beforeEach(async ({ page }) => {
 		helper = new SnippetsTestHelper(page)
@@ -104,20 +115,13 @@ test.describe('Code Snippets Preview Modal', () => {
 
 	test('Preview code can be selected with the keyboard without being changed', async ({ page }) => {
 		const editor = await openPreviewEditor(page)
-		const preview = page.locator('.code-snippets-preview-modal')
-		const codeArea = preview.locator('textarea[aria-label="Snippet code preview"]')
-		const initialValue = await codeArea.inputValue()
+		const initialValue = await readPreviewEditor(editor, 'getValue')
+		expect(initialValue).not.toBe('')
 		await focusPreviewEditor(page, editor)
 		await page.keyboard.press('Shift+ArrowRight')
 
-		await expect.poll(() => editor.evaluate(element => {
-			const codeMirror = (<HTMLElement & {
-				CodeMirror?: { getSelection?: () => string }
-			}>element).CodeMirror
-
-			return codeMirror?.getSelection?.() ?? ''
-		})).not.toBe('')
-		await expect(codeArea).toHaveValue(initialValue)
+		await expect.poll(() => readPreviewEditor(editor, 'getSelection')).not.toBe('')
+		await expect.poll(() => readPreviewEditor(editor, 'getValue')).toBe(initialValue)
 	})
 
 	test('Preview editor exposes its accessible label', async ({ page }) => {