@vscode/markdown-editor 0.0.2-12 → 0.0.2-120

package/src/view/editor.css

@@ -1,3 +1,6 @@
+@import '@vscode/codicons/dist/codicon.css';
+@import '../contrib/find/find.css';
+
 /*
  * Base editor styles — ABSOLUTE MINIMUM.
  *
@@ -17,16 +20,35 @@
  * theme-agnostic and know nothing about VS Code. Where a value needs to vary
  * per theme, expose a local `--md-*` custom property WITH a sensible literal
  * fallback (e.g. `var(--md-cursor-background, #000)`) and let a theme file set
- * it. Only `themes/vscode.css` is permitted to read `--vscode-*` variables and
- * map them onto these `--md-*` properties.
+ * it. Only the `themes/vscode-*.css` themes are permitted to read `--vscode-*`
+ * variables and map them onto these `--md-*` properties.
  */
 
 .md-editor {
+	--md-marker-font-family: 'Cascadia Code', 'Fira Code', monospace;
+	--md-marker-font-scale: 0.85;
+	--md-readonly-toggle-width: 58px;
+	--md-readonly-toggle-height: 32px;
+	--md-readonly-toggle-inset: 8px;
+	display: flow-root;
+	min-height: 100%;
 	outline: none;
 	/* The editor paints its own cursor (`.md-cursor`); hide the native caret. */
 	caret-color: transparent;
 }
 
+.md-editor-a11y-status {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
 /*
  * The transient empty paragraph — the blank line conjured by pressing Enter at
  * the end of a paragraph (see `PendingParagraph` in the model). It is not part
@@ -42,20 +64,66 @@
  * overlays, which position themselves relative to this box, so it is the
  * positioning context. In limited-width mode the editor sets an inline
  * `max-width` here and the auto inline margins center it within the full-width
- * `.md-editor`.
+ * `.md-editor`. The block-start padding keeps every document clear of the top
+ * edge, independent of the first block's theme margins.
  */
 .md-editor-content {
+	--md-editor-min-inline-padding: 8px;
+	--md-editor-content-inline-start-padding: var(--md-editor-min-inline-padding);
+	--md-editor-content-inline-end-padding: var(--md-editor-content-inline-start-padding);
 	position: relative;
+	display: flow-root;
 	margin-inline: auto;
-	padding: 48px;
+	padding-block: 32px 0;
+	padding-inline: var(--md-editor-content-inline-start-padding) var(--md-editor-content-inline-end-padding);
+}
+
+.md-editor-medium-margins > .md-editor-content {
+	--md-editor-content-inline-start-padding: max(var(--md-editor-min-inline-padding), 48px);
+}
+
+.md-editor-content:has(> .md-document > .md-heading) {
+	--md-editor-min-inline-padding: 2em;
+}
+
+.md-editor-content>.md-document :is(.md-heading, .md-paragraph) {
+	overflow-wrap: anywhere;
+}
+
+.md-editor .md-document > :first-child,
+.md-editor .md-blockquote > :nth-child(1 of .md-block) {
+	margin-block-start: 0;
 }
 
-.md-block-active {
+:where(.md-editor:not(.md-no-active-block-highlight)) .md-block-active {
 	background: var(--md-block-active-background, #f8f8f8);
 	border-radius: 4px;
 	box-shadow: 0 0 0 8px var(--md-block-active-background, #f8f8f8);
 }
 
+/*
+ * The whole-empty-document case. Markdown has no empty-paragraph node, so a
+ * document with no content parses to a single empty paragraph (see
+ * `_ensureBlocks` in the parser) which renders as a childless `<p>` of zero
+ * height. Give it one line's height so the editor presents an intentional,
+ * clickable empty editing surface — and so typing the first character causes no
+ * layout shift (a filled line is also one `lh` tall).
+ */
+.md-paragraph:empty {
+	min-height: 1lh;
+}
+
+/*
+ * ...and never paint the active-block card over that zero-content line: with no
+ * text to size it, the card's background + 8px box-shadow glow would show up as
+ * a stray gray bar. The two extra classes outrank the base `.md-block-active`
+ * rule above in every theme (themes only remap `--md-block-active-background`).
+ */
+.md-paragraph:empty.md-block-active {
+	background: transparent;
+	box-shadow: none;
+}
+
 /*
  * Cursor mirrors the same open affordance as the underline below: the anchor's
  * pointer cursor appears exactly when a click would open the link. An inactive
@@ -87,6 +155,560 @@
 	text-decoration: none;
 }
 
+.md-rich-link {
+	display: inline-flex;
+	align-items: baseline;
+	max-width: min(100%, var(--md-rich-link-line-width, 52rem));
+	box-sizing: border-box;
+	gap: 0.24em;
+	padding: 1px 0.3em;
+	border: 1px solid color-mix(in srgb, var(--vscode-textLink-foreground, #0969da) 24%, transparent);
+	border-radius: 0.3em;
+	background: var(--vscode-button-secondaryBackground, #f3f3f3);
+	color: inherit;
+	font-size: 1em;
+	line-height: 1.25;
+	text-decoration: none;
+	vertical-align: baseline;
+	white-space: nowrap;
+	cursor: pointer;
+	--md-rich-link-success-color: var(--vscode-charts-green, #1f883d);
+}
+
+.md-rich-link:hover {
+	border-color: var(--vscode-focusBorder, color-mix(in srgb, currentColor 42%, transparent));
+	background: var(--vscode-button-secondaryHoverBackground, #e5e5e5);
+	text-decoration: none;
+}
+
+.md-rich-link:focus-visible {
+	outline: 1px solid var(--vscode-focusBorder, currentColor);
+	outline-offset: 1px;
+}
+
+.md-rich-link-icon {
+	flex: none;
+	align-self: center;
+	font-size: 0.92em;
+	color: color-mix(in srgb, var(--vscode-textLink-foreground, #0969da) 78%, currentColor);
+}
+
+.md-rich-link-label,
+.md-rich-link-title,
+.md-rich-link-detail {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.md-rich-link-label,
+.md-rich-link-title {
+	flex: 0 1 auto;
+	min-width: 0;
+	color: var(--vscode-textLink-foreground, currentColor);
+	font-weight: 600;
+}
+
+.md-rich-link-title {
+	max-width: var(--md-rich-link-title-width, 200px);
+}
+
+.md-rich-link-label {
+	max-width: var(--md-rich-link-title-width, none);
+}
+
+.md-rich-link[data-md-rich-link-kind='session'] :is(.md-rich-link-label, .md-rich-link-title) {
+	max-width: var(--md-rich-link-title-width, 150px);
+}
+
+.md-rich-link-line-end {
+	--md-rich-link-title-width: none;
+}
+
+.md-rich-link-label[hidden],
+.md-rich-link-title[hidden],
+.md-rich-link-reference[hidden] {
+	display: none;
+}
+
+.md-rich-link-reference {
+	flex: none;
+	color: var(--vscode-descriptionForeground, color-mix(in srgb, currentColor 72%, transparent));
+	font-size: 0.92em;
+}
+
+.md-rich-link-detail {
+	flex: 1 1 auto;
+	min-width: 1.5em;
+	color: var(--vscode-descriptionForeground, color-mix(in srgb, currentColor 72%, transparent));
+	font-size: 0.92em;
+}
+
+.md-rich-link-detail::before {
+	content: '·';
+	margin-right: 0.28em;
+}
+
+.md-rich-link-status {
+	flex: none;
+	display: inline-flex;
+	align-self: center;
+	align-items: center;
+	gap: 0.22em;
+	margin-left: 0.04em;
+	color: var(--vscode-descriptionForeground, currentColor);
+	font-size: 0.86em;
+	font-weight: 600;
+	line-height: 1;
+}
+
+.md-rich-link-detail[hidden],
+.md-rich-link-changes[hidden],
+.md-rich-link-status[hidden] {
+	display: none;
+}
+
+.md-rich-link-changes {
+	flex: none;
+	display: inline-flex;
+	align-self: center;
+	gap: 0.28em;
+	font-size: 0.86em;
+	font-weight: 600;
+	line-height: 1;
+}
+
+.md-rich-link-changes::before,
+.md-rich-link:not(
+	[data-md-rich-link-kind='issue'],
+	[data-md-rich-link-kind='pullRequest'],
+	[data-md-rich-link-kind='session']
+) .md-rich-link-primary-status::before {
+	content: '·';
+	color: var(--vscode-descriptionForeground, currentColor);
+	font-weight: 400;
+}
+
+.md-rich-link-insertions {
+	color: var(--vscode-charts-green, #1f883d);
+}
+
+.md-rich-link-deletions {
+	color: var(--vscode-charts-red, #cf222e);
+}
+
+.md-rich-link-status-icon {
+	flex: none;
+	align-self: center;
+	font-size: 1em;
+}
+
+.md-rich-link:is(
+	[data-md-rich-link-status='open'],
+	[data-md-rich-link-status='closed'],
+	[data-md-rich-link-status='merged'],
+	[data-md-rich-link-status='draft'],
+	[data-md-rich-link-status='notPlanned']
+) .md-rich-link-primary-status {
+	color: var(--md-rich-link-state-color);
+}
+
+.md-rich-link-secondary-status {
+	margin-left: 0.06em;
+}
+
+.md-rich-link-secondary-status::before {
+	content: '·';
+	margin-right: 0.08em;
+	color: var(--vscode-descriptionForeground, currentColor);
+	font-weight: 400;
+}
+
+.md-rich-link:is(
+	[data-md-rich-link-status='open'],
+	[data-md-rich-link-status='closed'],
+	[data-md-rich-link-status='merged'],
+	[data-md-rich-link-status='draft'],
+	[data-md-rich-link-status='notPlanned']
+) .md-rich-link-primary-status {
+	align-self: baseline;
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	font-size: 1em;
+	line-height: inherit;
+}
+
+.md-rich-link[data-md-rich-link-status='success'] .md-rich-link-primary-status {
+	color: var(--vscode-charts-green, #1f883d);
+}
+
+.md-rich-link[data-md-rich-link-secondary-status='success'] .md-rich-link-secondary-status {
+	color: var(--md-rich-link-success-color);
+}
+
+.md-rich-link[data-md-rich-link-status='warning'] .md-rich-link-primary-status,
+.md-rich-link[data-md-rich-link-secondary-status='warning'] .md-rich-link-secondary-status {
+	color: var(--vscode-editorWarning-foreground, #bf8700);
+}
+
+.md-rich-link[data-md-rich-link-status='error'] .md-rich-link-primary-status,
+.md-rich-link[data-md-rich-link-secondary-status='error'] .md-rich-link-secondary-status {
+	color: var(--vscode-errorForeground, #cf222e);
+}
+
+.md-rich-link[data-md-rich-link-status='pending'] .md-rich-link-primary-status,
+.md-rich-link[data-md-rich-link-secondary-status='pending'] .md-rich-link-secondary-status {
+	color: var(--vscode-editorWarning-foreground, #bf8700);
+}
+
+.md-rich-link[data-md-rich-link-kind='issue'] .md-rich-link-primary-status .md-rich-link-status-label,
+.md-rich-link[data-md-rich-link-kind='pullRequest'] :is(
+	.md-rich-link-primary-status,
+	.md-rich-link-secondary-status
+) .md-rich-link-status-label {
+	display: none;
+}
+
+.md-rich-link[data-md-rich-link-status='open'] {
+	--md-rich-link-state-color: var(--vscode-charts-green, #1f883d);
+}
+
+.md-rich-link[data-md-rich-link-kind='issue'][data-md-rich-link-status='closed'],
+.md-rich-link[data-md-rich-link-status='merged'] {
+	--md-rich-link-state-color: var(--vscode-charts-purple, #8250df);
+}
+
+.md-rich-link[data-md-rich-link-kind='pullRequest'][data-md-rich-link-status='closed'] {
+	--md-rich-link-state-color: var(--vscode-charts-red, #cf222e);
+}
+
+.md-rich-link[data-md-rich-link-status='draft'],
+.md-rich-link[data-md-rich-link-status='notPlanned'] {
+	--md-rich-link-state-color: var(--vscode-descriptionForeground, #656d76);
+}
+
+.md-rich-link[data-md-rich-link-kind='pullRequest'][data-md-rich-link-secondary-status='error'] .md-rich-link-secondary-status {
+	color: var(--vscode-charts-red, var(--vscode-errorForeground, #cf222e));
+}
+
+.md-rich-link:is(
+	[data-md-rich-link-kind='issue'],
+	[data-md-rich-link-kind='pullRequest']
+) {
+	align-items: center;
+	gap: 4px;
+	padding: 1px 6px;
+	border-color: var(--vscode-button-secondaryBorder, var(--vscode-button-border, transparent));
+	border-radius: 4px;
+	background: var(--vscode-button-secondaryBackground, #f3f3f3);
+	color: var(--vscode-button-secondaryForeground, #242424);
+	font-size: 1em;
+	line-height: 1.25;
+	vertical-align: -0.5px;
+}
+
+.md-rich-link:is(
+	[data-md-rich-link-kind='issue'],
+	[data-md-rich-link-kind='pullRequest']
+):hover {
+	border-color: var(--vscode-button-secondaryBorder, var(--vscode-button-border, transparent));
+	background: var(--vscode-button-secondaryHoverBackground, #e5e5e5);
+	color: var(--vscode-button-secondaryForeground, #242424);
+}
+
+.md-rich-link:is(
+	[data-md-rich-link-kind='issue'],
+	[data-md-rich-link-kind='pullRequest']
+) .md-rich-link-reference {
+	display: none;
+}
+
+.md-rich-link:is(
+	[data-md-rich-link-kind='issue'],
+	[data-md-rich-link-kind='pullRequest']
+) :is(
+	.md-rich-link-label,
+	.md-rich-link-title,
+	.md-rich-link-primary-status,
+	.md-rich-link-secondary-status
+) {
+	align-self: center;
+	font-size: inherit;
+	line-height: inherit;
+}
+
+.md-rich-link:is(
+	[data-md-rich-link-kind='issue'],
+	[data-md-rich-link-kind='pullRequest']
+) :is(.md-rich-link-label, .md-rich-link-title) {
+	position: relative;
+	top: 0.25px;
+	max-width: var(--md-rich-link-title-width, 200px);
+	color: inherit;
+	font-weight: 400;
+}
+
+.md-rich-link:is(
+	[data-md-rich-link-kind='issue'],
+	[data-md-rich-link-kind='pullRequest']
+) .md-rich-link-status {
+	align-items: center;
+	height: 1.25em;
+}
+
+.md-rich-link:is(
+	[data-md-rich-link-kind='issue'],
+	[data-md-rich-link-kind='pullRequest']
+) .md-rich-link-status-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 12px;
+	height: 12px;
+	font-size: 12px;
+	line-height: 12px;
+}
+
+.md-rich-link:is(
+	[data-md-rich-link-kind='issue'],
+	[data-md-rich-link-kind='pullRequest']
+) .md-rich-link-secondary-status::before {
+	align-self: center;
+	line-height: inherit;
+}
+
+.md-rich-link[data-md-rich-link-kind='session'] {
+	align-items: center;
+	gap: 4px;
+	padding: 1px 6px;
+	border-color: var(--vscode-chat-requestBorder, var(--vscode-input-border, color-mix(in srgb, currentColor 24%, transparent)));
+	border-radius: 4px;
+	background: var(--vscode-button-secondaryBackground, #f3f3f3);
+	color: var(--vscode-descriptionForeground, #656d76);
+	font-size: 1em;
+	font-weight: var(--vscode-agents-fontWeight-regular, 400);
+	line-height: 1.25;
+	vertical-align: baseline;
+}
+
+.md-rich-link[data-md-rich-link-kind='session']:hover {
+	border-color: var(--vscode-chat-requestBorder, var(--vscode-input-border, color-mix(in srgb, currentColor 24%, transparent)));
+	background: var(--vscode-toolbar-hoverBackground, color-mix(in srgb, currentColor 8%, transparent));
+}
+
+.md-rich-link[data-md-rich-link-kind='session'] :is(.md-rich-link-label, .md-rich-link-title) {
+	color: inherit;
+	font-weight: 400;
+}
+
+.md-rich-link[data-md-rich-link-kind='session'] .md-rich-link-primary-status {
+	align-self: center;
+	align-items: center;
+	width: 12px;
+	height: 12px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	font-size: 1em;
+	line-height: inherit;
+}
+
+.md-rich-link[data-md-rich-link-kind='session'] .md-rich-link-primary-status .md-rich-link-status-label {
+	display: none;
+}
+
+.md-rich-link[data-md-rich-link-kind='session'] .md-rich-link-status-icon:not(.monaco-pixel-spinner, [hidden]) {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 12px;
+	height: 12px;
+	font-size: 12px;
+	line-height: 12px;
+}
+
+.md-rich-link .md-rich-link-status-icon[hidden] {
+	display: none;
+}
+
+.md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='neutral'] .md-rich-link-primary-status,
+.md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='success'] .md-rich-link-primary-status,
+.md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='pending'] .md-rich-link-primary-status {
+	color: var(--vscode-descriptionForeground, #656d76);
+}
+
+.md-rich-link .monaco-pixel-spinner {
+	display: inline-grid;
+	grid-template-columns: repeat(2, 2px);
+	grid-template-rows: repeat(3, 2px);
+	column-gap: 2px;
+	row-gap: 2px;
+	place-content: center;
+	width: 16px;
+	height: 16px;
+	color: currentColor;
+	contain: layout style size paint;
+	isolation: isolate;
+	pointer-events: none;
+	transform: translateZ(0);
+}
+
+.md-rich-link[data-md-rich-link-kind='session'] .monaco-pixel-spinner {
+	width: 12px;
+	height: 12px;
+}
+
+.md-rich-link .monaco-pixel-spinner-dot {
+	display: block;
+	width: 2px;
+	height: 2px;
+	border-radius: 50%;
+	background-color: currentColor;
+	opacity: 0;
+	transform: translateY(-4px);
+	animation: monaco-pixel-spinner-dot-cycle 1820ms steps(6, jump-none) infinite;
+}
+
+.md-rich-link .monaco-pixel-spinner-dot:nth-child(1) {
+	animation-delay: 520ms;
+}
+
+.md-rich-link .monaco-pixel-spinner-dot:nth-child(2) {
+	animation-delay: 650ms;
+}
+
+.md-rich-link .monaco-pixel-spinner-dot:nth-child(3) {
+	animation-delay: 260ms;
+}
+
+.md-rich-link .monaco-pixel-spinner-dot:nth-child(4) {
+	animation-delay: 390ms;
+}
+
+.md-rich-link .monaco-pixel-spinner-dot:nth-child(5) {
+	animation-name: monaco-pixel-spinner-dot-cycle-long;
+}
+
+.md-rich-link .monaco-pixel-spinner-dot:nth-child(6) {
+	animation-name: monaco-pixel-spinner-dot-cycle-short;
+	animation-delay: 130ms;
+}
+
+.md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot {
+	opacity: 0.25;
+	transform: none;
+	animation: monaco-pixel-spinner-ring-pulse 1200ms steps(4, jump-none) infinite;
+}
+
+.md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(1) {
+	animation-delay: 0ms;
+}
+
+.md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(2) {
+	animation-delay: 200ms;
+}
+
+.md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(3) {
+	animation-delay: 1000ms;
+}
+
+.md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(4) {
+	animation-delay: 400ms;
+}
+
+.md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(5) {
+	animation-delay: 800ms;
+}
+
+.md-rich-link .monaco-pixel-spinner-ring .monaco-pixel-spinner-dot:nth-child(6) {
+	animation-delay: 600ms;
+}
+
+@keyframes monaco-pixel-spinner-dot-cycle {
+	0% {
+		opacity: 0;
+		transform: translateY(-4px);
+	}
+	9.34%, 57.14% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	66.48%, 100% {
+		opacity: 0;
+		transform: translateY(7px);
+	}
+}
+
+@keyframes monaco-pixel-spinner-dot-cycle-long {
+	0% {
+		opacity: 0;
+		transform: translateY(-4px);
+	}
+	9.34%, 64.29% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	73.63%, 100% {
+		opacity: 0;
+		transform: translateY(7px);
+	}
+}
+
+@keyframes monaco-pixel-spinner-dot-cycle-short {
+	0% {
+		opacity: 0;
+		transform: translateY(-4px);
+	}
+	9.34%, 50% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	59.34%, 100% {
+		opacity: 0;
+		transform: translateY(7px);
+	}
+}
+
+@keyframes monaco-pixel-spinner-ring-pulse {
+	0%, 100% {
+		opacity: 0.25;
+		transform: none;
+	}
+	16.67% {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.md-rich-link .monaco-pixel-spinner-dot {
+		animation: none;
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='warning'] .md-rich-link-primary-status {
+	color: var(--vscode-list-warningForeground, #855f00);
+}
+
+.md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='warning'] {
+	border-color: var(--vscode-list-warningForeground, #855f00);
+	background-color: color-mix(in srgb, var(--vscode-list-warningForeground, #855f00) 12%, transparent);
+	color: var(--vscode-list-warningForeground, #855f00);
+}
+
+.md-rich-link[data-md-rich-link-kind='session'][data-md-rich-link-status='error'] .md-rich-link-primary-status {
+	color: var(--vscode-errorForeground, #cf222e);
+}
+
+.md-rich-link-unavailable {
+	border-style: dashed;
+}
+
 .md-fence-spacer {
 	visibility: hidden;
 	font-family: 'Cascadia Code', 'Fira Code', monospace;
@@ -95,8 +717,8 @@
 
 .md-marker {
 	color: #999;
-	font-family: 'Cascadia Code', 'Fira Code', monospace;
-	font-size: 0.85em;
+	font-family: var(--md-marker-font-family);
+	font-size: calc(1em * var(--md-marker-font-scale));
 	display: inline;
 	overflow: hidden;
 	max-width: 100px;
@@ -122,6 +744,88 @@
 	white-space: pre-wrap;
 }
 
+.md-video-wrapper {
+	max-width: 100%;
+}
+
+.md-video {
+	display: block;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.md-editor:not(.md-readonly) .md-video:not([controls]) {
+	cursor: text;
+}
+
+.md-video-source {
+	overflow-wrap: anywhere;
+	white-space: pre-wrap;
+}
+
+/*
+ * An unhandled block: a construct the parser does not model (setext heading,
+ * an extension token). Its raw source is shown verbatim,
+ * styled like a code block but visibly flagged as "not understood" by a dashed
+ * warning border, so the content is preserved and editable rather than silently
+ * dropped.
+ *
+ * The wrapper is the non-scrolling box (border + block spacing); the inner
+ * `.md-unhandled-scroll` <pre> is the horizontal scroller.
+ */
+.md-unhandled-block {
+	margin: 0.5em 0;
+	border: 1px dashed #d0a000;
+	border-radius: 4px;
+}
+
+/*
+ * Inner scroller. Beats the per-theme `.md-theme-* .md-code-block` box rules
+ * (same class count) via the extra `pre` type selector: no margin/border of its
+ * own (those live on the wrapper).
+ */
+pre.md-unhandled-scroll.md-code-block {
+	margin: 0;
+	border: 0;
+	border-radius: 4px;
+}
+
+/*
+ * Complete block HTML comments are authoring metadata, not unsupported-syntax
+ * warnings. Keep them source-identifiable but quiet while reading, and reveal
+ * their exact whitespace when the block becomes active.
+ */
+.md-html-comment {
+	margin: 0.125em 0 0.25em;
+	padding: 0.125em 0;
+	overflow: hidden;
+	color: var(--md-html-comment-foreground, #6e7378);
+	font-family: var(--md-html-comment-font-family, 'Cascadia Code', 'Fira Code', monospace);
+	font-size: 0.85em;
+	line-height: 1.5;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	transition: color 80ms ease-out;
+}
+
+.md-html-comment:not(.md-html-comment-source):hover {
+	color: var(--md-html-comment-hover-foreground, #45494e);
+}
+
+.md-html-comment-source {
+	overflow: visible;
+	text-overflow: clip;
+	white-space: pre-wrap;
+}
+
+.md-html-comment-syntax {
+	opacity: 0.6;
+}
+
+.md-html-comment-source .md-html-comment-syntax {
+	opacity: 1;
+}
+
 /*
  * Visible whitespace indicators, shown only in the active/source view. The real
  * whitespace character stays in the DOM (so source ↔ DOM mapping and selection
@@ -155,7 +859,7 @@
 	left: 0;
 	right: 0;
 	text-align: center;
-	color: #b0b0b0;
+	color: var(--md-whitespace-foreground, #b0b0b0);
 	pointer-events: none;
 }
 
@@ -169,7 +873,7 @@
 
 .md-ws-newline::before {
 	content: '↵';
-	color: #b0b0b0;
+	color: var(--md-whitespace-foreground, #b0b0b0);
 	pointer-events: none;
 }
 
@@ -221,39 +925,162 @@
 }
 
 /*
- * Glue (table cell pipes, the task `[x] ` source, source padding) keeps its
- * inline footprint when hidden so column widths and the checkbox gutter stay
- * identical between active and inactive states.
+ * A soft ending followed by an explicit blockquote continuation marker renders
+ * a real line break in both views. Its source newline is still mapped and is
+ * revealed while editing, but contributes no hidden width in rendered mode.
+ */
+.md-blockquote-linebreak-source-hidden {
+	display: none;
+}
+
+/*
+ * Structural quote prefixes between child blocks can be owned by a source gap
+ * instead of an inline continuation marker. Keep the exact gap for active
+ * editing, but remove it entirely from inactive layout and hit testing.
+ */
+.md-glue-blockQuoteSourceGap.md-glue-hidden {
+	display: none;
+}
+
+/* A fallback-font newline glyph must not increase the source line's height. */
+.md-glue-blockQuoteSourceGap > .md-ws-newline-glyph {
+	line-height: 0;
+}
+
+/*
+ * Glue normally keeps its inline footprint when hidden so source padding and
+ * widget gutters stay identical between active and inactive states. Hidden
+ * table-cell glue is the exception below: leaving it in inline flow lets its
+ * invisible spaces wrap around long cell content.
  */
 .md-glue-hidden {
 	display: inline;
 	visibility: hidden;
 }
 
+/*
+ * Inactive table pipes stay in the DOM/source tree, but leave layout and
+ * hit-testing entirely. Keeping an invisible rect either in the content flow or
+ * over the cell padding can create phantom lines or steal clicks from visible
+ * text. Hidden source offsets therefore collapse to the neighboring semantic
+ * seam, matching other display-none markers. Visible pipes retain the per-theme
+ * active/source layout.
+ */
+.md-table td>.md-glue-tableCellGlue.md-glue-hidden {
+	display: none;
+}
+
+/*
+ * Active table: take each cell's TRAILING structural glue (the source space
+ * after the cell text, and — via the per-theme `right: 0` rule — the last
+ * column's closing `|`) out of the cell's inline flow. Left in flow, that glue
+ * wraps below long cell content (the same wrapping the hidden-glue note above
+ * describes), which makes the cell two lines tall: the browser's default
+ * `vertical-align: middle` then re-centres the other cells' single-line content
+ * in Y, their runs merge into one oversized VisualLine, and the caret — sized
+ * directly from that line box — grows far past the line height while the
+ * visible pipes drift apart row-to-row. Positioning the trailing glue
+ * absolutely removes it from wrapping flow while keeping its real client rects
+ * at the static (content-line) position, so caret placement, hit-testing,
+ * source mapping and injectivity are unchanged. `top`/`bottom: auto` keep it on
+ * that content line rather than the cell's top edge. This mirrors the inactive
+ * `display: none` above; the leading `| ` glue deliberately stays in flow (a
+ * relative glyph shift, per theme) so first-text X is preserved.
+ *
+ * `:not(:first-child)` restricts this to a genuine trailing glue: a non-empty
+ * cell emits leading + trailing glue, but an EMPTY cell parses to a single glue
+ * node that is simultaneously first and last child. That lone node is the
+ * cell's leading pipe, so it must stay in flow like every other leading pipe;
+ * excluding it keeps empty cells identical to their previous (base) behaviour.
+ */
+.md-table.md-block-active td {
+	position: relative;
+}
+
+.md-table.md-block-active td>.md-glue-tableCellGlue:last-child:not(:first-child) {
+	position: absolute;
+	top: auto;
+	bottom: auto;
+}
+
 /*
  * Inter-block glue: the run of blank lines between two top-level blocks. It is
  * mounted as the last inline child of the block that precedes it, so it sits at
  * the end of that block's last line rather than on its own lines between the
  * blocks. When a neighbouring block is active it is revealed: each blank-line
- * newline shows a real `↵` glyph character (`.md-ws-newline-glyph`) while the
- * trailing line-terminator `\n` collapses (`white-space: normal`) so the run
- * adds no line break and no height — active and inactive therefore have the
- * same height. When hidden it collapses to nothing.
+ * newline shows a real `↵` glyph character (`.md-ws-newline-glyph`) so each
+ * source offset remains distinct. The glyphs stay on the preceding source line
+ * rather than introducing line breaks. When hidden the run collapses to nothing.
  */
-.md-glue-blockGap {
+.md-glue-blockGap,
+.md-glue-blockQuoteSourceGap {
 	white-space: normal;
 }
 
 /*
  * The structural block break between two top-level blocks. Like `.md-glue-blockGap`
- * its trailing line-terminator `\n` collapses (`white-space: normal`) so the run
- * adds no height; its leading newline is painted as the blue break glyph
+ * its newlines stay inline so the run adds no height; its leading newline is painted as the blue break glyph
  * (`.md-ws-blockbreak-glyph`).
  */
 .md-glue-blockBreak {
 	white-space: normal;
 }
 
+.md-source-editing :is(.md-paragraph, .md-heading, .md-empty-block, td),
+.md-source-editing :is(.md-text, .md-marker) {
+	white-space: pre-wrap;
+}
+
+.md-editor.md-source-editing .md-block,
+.md-editor.md-source-editing .md-list > li {
+	margin-block: 0;
+}
+
+.md-source-editing .md-empty-block {
+	min-height: 1lh;
+}
+
+.md-source-editing .md-list > .md-empty-block {
+	list-style: none;
+	counter-increment: list-item 0;
+	margin-inline-start: calc(-1 * var(--md-list-indent-step, 2em));
+}
+
+.md-source-editing .md-list > li > .md-empty-block {
+	padding-inline-start: calc(var(--md-list-label-reserve) + var(--md-list-source-padding));
+}
+
+.md-source-editing .md-glue-emptyLine {
+	white-space: pre-wrap;
+	visibility: visible;
+}
+
+.md-source-editing .md-glue-blockTerminator {
+	display: none;
+}
+
+.md-source-editing .md-glue-lineSuffix {
+	white-space: pre-wrap;
+	visibility: visible;
+}
+
+.md-source-editing .md-ws-newline::before {
+	content: none;
+}
+
+.md-source-editing :is(.md-ws-space, .md-ws-tab) {
+	white-space: inherit;
+}
+
+/* These source holders already have a <br> supplying their line ending. */
+.md-source-block :is(.md-hardbreak-src, .md-blockquote-linebreak-source) {
+	white-space: normal;
+}
+
+.md-source-block .md-blockquote-linebreak-source .md-ws-newline::before {
+	content: none;
+}
+
 /*
  * The task-list checkbox marker (`[x]`/`[ ]`) is special: instead of being
  * removed from layout when hidden, it keeps its inline width (visibility
@@ -266,15 +1093,6 @@
 	visibility: hidden;
 }
 
-/*
- * Table cell-glue pipes (`| `) keep their inline footprint when hidden so the
- * column widths stay identical active and inactive.
- */
-.md-marker-tableCellGlue.md-marker-hidden {
-	display: inline;
-	visibility: hidden;
-}
-
 /*
  * The code-block fences (```lang / ```) each sit on their own source line. When
  * hidden they keep their vertical footprint (visibility hidden, not display
@@ -309,6 +1127,69 @@
 	height: 16px;
 }
 
+/*
+ * A wide table scrolls horizontally inside its wrapper (the block box) instead
+ * of overflowing the page and scrolling the editor's fixed left gutter away.
+ * The wrapper is the scroll viewport the selection/caret clipping measures (see
+ * `BlockViewNode.scrollElement` / `blockViewportClip`); the inner `<table>`
+ * keeps `width: auto` (theme-defined) so it sizes to its content and overflows.
+ *
+ * `width: fit-content` keeps the wrapper hugging the table's intrinsic width, so
+ * a narrow table — and the active-block glow redirected onto the wrapper below —
+ * stays as wide as the table (unchanged from before this wrapper existed).
+ * `max-width: 100%` caps it at the content column, past which the table
+ * overflows and scrolls locally. This is the standard responsive-table pattern
+ * (cf. GitHub's own `width: max-content; max-width: 100%`).
+ */
+.md-table-wrapper {
+	overflow-x: auto;
+	width: fit-content;
+	max-width: 100%;
+}
+
+.md-table:has(> .md-glue-blockGap) {
+	position: relative;
+}
+
+/* Table trivia must not generate an anonymous row when source is revealed. */
+.md-table > .md-glue-blockGap {
+	position: absolute;
+	left: 100%;
+	bottom: 0.3em;
+}
+
+.md-editor:not(.md-source-editing) .md-paragraph:has(> .md-glue-indent:first-child) {
+	position: relative;
+}
+
+.md-editor:not(.md-source-editing) .md-paragraph > .md-glue-indent:first-child {
+	position: absolute;
+	right: 100%;
+	top: 0;
+}
+
+/*
+ * The active-block highlight is an *outset* glow (`box-shadow: 0 0 0 8px`).
+ * Making the wrapper a scroll box (`overflow-x: auto`, which also forces
+ * `overflow-y: auto`) clips descendant paint to its padding box, so the glow on
+ * the inner active `<table>` would be cut off (the table has no horizontal
+ * margin to give the shadow room). Render the generic active chrome on the
+ * wrapper instead — a scroll box's own shadow is never clipped by its own
+ * overflow, exactly like a code block carries the glow on its own scroller —
+ * and drop it from the table, which keeps `md-block-active` purely for the
+ * per-theme source-pipe styling.
+ */
+:where(.md-editor:not(.md-no-active-block-highlight)) .md-table-wrapper:has(> .md-table.md-block-active) {
+	background: var(--md-block-active-background, #f8f8f8);
+	border-radius: 4px;
+	box-shadow: 0 0 0 8px var(--md-block-active-background, #f8f8f8);
+}
+
+.md-table.md-block-active {
+	background: none;
+	box-shadow: none;
+}
+
 .md-selection-layer {
 	position: absolute;
 	top: 0;
@@ -374,6 +1255,7 @@
 /* Source markers occupy the gutter so toggling them never shifts content. */
 .md-heading {
 	position: relative;
+	min-height: 1lh;
 }
 
 .md-heading>.md-marker:first-child {
@@ -390,7 +1272,7 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: flex-end;
-	transform: scale(0.85);
+	transform: scale(var(--md-heading-marker-scale, 0.85));
 	transform-origin: right center;
 }
 
@@ -403,6 +1285,18 @@
 	display: none;
 }
 
+/* Nested heading prefixes must not overlap their enclosing quote/list gutter. */
+.md-source-editing :is(.md-blockquote, .md-list) .md-heading > .md-marker:first-child {
+	position: static;
+	display: inline;
+	font-size: calc(1em * var(--md-marker-font-scale));
+	transform: none;
+}
+
+.md-source-editing :is(.md-blockquote, .md-list) .md-heading > .md-marker-hidden:first-child {
+	display: none;
+}
+
 /*
  * Block-quote prefixes (`> `, one per quoted source line) are real
  * `blockQuoteMarker` markers, siblings of the quote's child blocks. Each hangs
@@ -422,11 +1316,33 @@
 	position: relative;
 }
 
-.md-blockquote>.md-marker-blockQuoteMarker {
+.md-blockquote>.md-marker-blockQuoteMarker,
+.md-source-editing li > .md-glue-blockQuotePrefix {
 	position: absolute;
-	right: calc(100% - var(--md-blockquote-pad, 0px));
+	right: calc(100% - var(--md-blockquote-pad, 0px) - 1ch);
 	top: auto;
+	/*
+	 * Reserve the optional-space column so adding it cannot move the `>` glyph,
+	 * then shift and scale every active quote marker consistently to leave a
+	 * virtual gap before body text without consuming source width. These tuned
+	 * properties are shared by ordinary and marker-only quote lines.
+	 */
+	--md-blockquote-marker-shift: -0.18ch;
+	--md-blockquote-marker-scale: 0.9;
+	display: inline-flex;
+	min-width: 2ch;
+	font-size: inherit;
+	line-height: inherit;
+	height: 1lh;
+	align-items: center;
+	text-align: left;
 	white-space: pre;
+	transform: translateX(var(--md-blockquote-marker-shift)) scale(var(--md-blockquote-marker-scale));
+	transform-origin: left center;
+}
+
+.md-source-editing li > .md-glue-blockQuotePrefix {
+	right: calc(100% + var(--md-list-indent-step, 2em) - 1ch);
 }
 
 /* Inactive: gone entirely (the gutter is empty, the text stays put). */
@@ -434,9 +1350,106 @@
 	display: none;
 }
 
-/* Code/math blocks scroll horizontally; their look is theme-defined. */
-.md-code-block {
-	overflow-x: auto;
+/* Collapsed block-gap newlines still need one flow box per marker-only line. */
+.md-blockquote-line-anchor {
+	display: block;
+}
+
+/* A trailing marker-only source line follows the preceding quoted line directly. */
+.md-blockquote-marker-only-line>.md-paragraph:last-of-type {
+	margin-bottom: 0;
+}
+
+/* Code/math blocks scroll horizontally; their look is theme-defined. */
+.md-code-block {
+	overflow-x: auto;
+}
+
+/* Keep actions out of the horizontal scroller and sticky within a long block. */
+.md-code-block-container {
+	display: flow-root;
+	position: relative;
+	min-width: 0;
+}
+
+.md-code-block-container > .md-code-block {
+	box-sizing: border-box;
+	min-height: 36px;
+}
+
+.md-code-block-actions {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 6px;
+	box-sizing: border-box;
+	height: 32px;
+	margin-bottom: -32px;
+	padding: 4px 4px 0;
+	opacity: 0;
+	pointer-events: none;
+	user-select: none;
+}
+
+.md-code-block-container:hover>.md-code-block-actions,
+.md-code-block-actions:focus-within,
+.md-code-block-actions.md-code-block-copy-feedback {
+	opacity: 1;
+}
+
+.md-code-block-copy {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	width: 28px;
+	height: 28px;
+	padding: 4px;
+	border: 1px solid var(--md-readonly-border, #b8b8b8);
+	border-radius: 4px;
+	background: var(--md-readonly-background, #f3f3f3);
+	color: var(--md-readonly-foreground, #444444);
+	cursor: pointer;
+	pointer-events: auto;
+}
+
+.md-code-block-copy:hover {
+	background: var(--md-readonly-background-hover, #e9e9e9);
+}
+
+.md-code-block-copy:focus-visible {
+	outline: 2px solid var(--md-readonly-accent, #4c8bf5);
+	outline-offset: 1px;
+}
+
+.md-code-block-copy-status:not(:empty) {
+	padding: 2px 6px;
+	border-radius: 4px;
+	background: var(--md-readonly-background, #f3f3f3);
+	color: var(--md-readonly-foreground, #444444);
+	font: 12px/1.4 sans-serif;
+}
+
+@media (hover: none) {
+	.md-code-block-actions {
+		opacity: 1;
+	}
+}
+
+@media (forced-colors: active) {
+	.md-code-block-copy,
+	.md-code-block-copy-status:not(:empty) {
+		background: ButtonFace;
+		color: ButtonText;
+		border-color: ButtonText;
+	}
+
+	.md-code-block-copy:focus-visible {
+		outline-color: Highlight;
+	}
 }
 
 .md-math-block {
@@ -447,7 +1460,8 @@
 	margin: 0;
 }
 
-.md-list li>.md-block {
+.md-list li>.md-block,
+.md-list li>.md-code-block-container>.md-code-block {
 	margin: 0;
 }
 
@@ -460,25 +1474,97 @@
 	position: relative;
 }
 
+.md-list > li {
+	min-height: 1lh;
+	position: relative;
+}
+
 /*
  * The list marker is pulled into the gutter by markerKind (not `:first-child`),
  * because a nested item may carry its source indentation as a leading glue
  * before the marker. Gutter-positioning keeps the marker out of the inline
  * flow so toggling it never shifts the item's text horizontally.
  *
- * `line-height: inherit` makes the marker share the item's line box (its own
- * `.md-marker` rule shrinks it to `line-height: 1`, which floats the glyph to
- * the top of the taller text line); matching the line box vertically centres
- * the `-` with the rendered text.
+ * The source box follows the first body line; the native reading marker is
+ * never replaced or resized. Source symbols share the body's font baseline,
+ * not a font-dependent optical centre of the painted asterisk.
  */
 .md-list-item-active>.md-marker-listItemMarker {
 	position: absolute;
 	right: 100%;
 	top: 0;
+}
+
+.md-list-item-active>.md-marker-listItemMarker,
+.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
+.md-source-editing .md-list-gutter > .md-marker-listItemMarker {
 	line-height: inherit;
+	height: calc(1lh / var(--md-marker-font-scale));
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-end;
+	white-space: pre;
+}
+
+/*
+ * `display: inline-flex` above outranks the plain `.md-marker-hidden`
+ * (`display: none`), so — exactly as for headings — re-hide the marker here for
+ * the states that ask for it, otherwise the bullet could never be hidden.
+ */
+.md-list-item-active>.md-marker-listItemMarker.md-marker-hidden,
+.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker.md-marker-hidden {
+	display: none;
+}
+
+/* An unfinished marker still uses the gutter of its completed "marker + space" prefix. */
+.md-list-item-incomplete > .md-marker-listItemMarker::after,
+.md-list-item-incomplete > .md-list-gutter > .md-marker-listItemMarker::after {
+	content: ' ';
 	white-space: pre;
 }
 
+.md-list-item-incomplete .md-marker-listItemMarker > .md-list-item-line-anchor {
+	font-size: calc(1em / var(--md-marker-font-scale));
+}
+
+.md-marker-listItemMarker:has(> .md-list-marker-symbol) {
+	font-family: inherit;
+	--md-marker-font-scale: 1;
+}
+
+.md-list-marker-symbol {
+	display: inline-block;
+	flex: 0 0 1em;
+	width: 1em;
+	text-align: center;
+}
+
+.md-marker-listItemMarker:has(> .md-list-marker-symbol) > :is(.md-ws-space, .md-ws-tab),
+.md-source-editing .md-list-continuation-separator {
+	font-family: var(--md-marker-font-family);
+	word-spacing: calc(0.5em - 1ch + var(--md-list-marker-reserve) / var(--md-list-marker-spaces));
+	tab-size: calc(0.5em + var(--md-list-marker-reserve) / var(--md-list-marker-spaces));
+}
+
+.md-list-item-incomplete > .md-marker-listItemMarker:has(> .md-list-marker-symbol)::after,
+.md-list-item-incomplete > .md-list-gutter > .md-marker-listItemMarker:has(> .md-list-marker-symbol)::after {
+	width: 0.5em;
+}
+
+/*
+ * An inactive ordered item uses the browser's native `::marker`. Match its
+ * typography when revealing the source marker so switching the active item
+ * does not change the number's width or horizontal position: an ordered marker
+ * opts out of the muted size step entirely, which also makes the `1lh`
+ * compensation above a no-op for it.
+ */
+ol.md-list>.md-list-item-active>.md-marker-listItemMarker,
+ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
+.md-source-editing ol.md-list > li > .md-list-gutter > .md-marker-listItemMarker {
+	font-family: inherit;
+	--md-marker-font-scale: 1;
+}
+
 /*
  * A nested item's source indentation precedes its bullet (`␣␣- text`). The
  * indent glue and the bullet are mounted together in this gutter span, which is
@@ -507,8 +1593,66 @@
 	justify-content: space-between;
 }
 
+.md-source-editing .md-list-gutter {
+	top: 0;
+	height: 1lh;
+	align-items: center;
+}
+
+.md-source-editing .md-list-gutter > .md-glue-indent,
+.md-source-editing .md-list-continuation-indent {
+	--md-source-indent-width: calc(var(--md-list-source-indent) * var(--md-list-indent-step, 2em));
+	--md-source-space-width: calc(var(--md-source-indent-width) / var(--md-indent-length));
+	flex-basis: var(--md-source-indent-width);
+	display: block;
+	font-family: var(--md-marker-font-family);
+	/* Stretch the source character itself so DOM ranges and selections fill the cell too. */
+	word-spacing: calc(var(--md-source-space-width) - 1ch);
+	tab-size: var(--md-source-space-width);
+}
+
+.md-source-editing .md-task-list-item > .md-list-gutter > .md-glue-indent {
+	--md-source-indent-width: calc(var(--md-list-source-indent) * var(--md-list-indent-step, 2em) / 2);
+}
+
+.md-source-editing .md-list-continuation-prefix {
+	font-family: var(--md-marker-font-family);
+	white-space: pre;
+}
+
+.md-source-editing .md-list-continuation-prefix > span {
+	display: inline;
+}
+
+.md-source-editing .md-list-continuation-symbol {
+	word-spacing: calc(1em - 1ch);
+}
+
+.md-source-editing .md-list-continuation-outside {
+	margin-inline-start: calc((var(--md-list-level) - var(--md-list-source-indent)) * var(--md-list-indent-step, 2em) - 1.5em - var(--md-list-marker-reserve));
+}
+
+.md-source-editing .md-list-gutter > .md-marker-listItemMarker.md-marker-hidden {
+	display: inline-flex;
+	visibility: hidden;
+}
+
 .md-list-gutter>.md-marker-listItemMarker {
 	flex: 0 0 auto;
+	white-space: pre;
+}
+
+/*
+ * A nested item's gutter stays one body line tall. The marker has the same
+ * compensated line box as a top-level marker, including when it hosts the
+ * incomplete item's zero-source caret anchor.
+ *
+ * The gutter and source symbol carry body typography, so their baselines stay
+ * aligned without measuring fonts or changing native reading markers.
+ */
+.md-list-item-active>.md-list-gutter {
+	height: 1lh;
+	align-items: center;
 }
 
 
@@ -523,6 +1667,20 @@
 	white-space: pre;
 }
 
+/*
+ * A continuation-line indent inside a paragraph is source-only padding. When
+ * inactive, the preceding soft-break newline already collapses to the single
+ * rendered space Markdown requires; retaining the hidden indent would add the
+ * tab/space run's width on top of it.
+ */
+.md-paragraph>.md-glue-indent.md-glue-hidden {
+	display: none;
+}
+
+.md-source-editing .md-paragraph>.md-glue-indent.md-glue-hidden {
+	display: inline;
+}
+
 /*
  * A loose list item's later block (its second paragraph etc.) owns the source
  * continuation indent that precedes it as its `leadingTrivia`. Like a nested
@@ -532,12 +1690,14 @@
  * active (the footprint is identical in both states, so the text never shifts).
  */
 .md-list li>.md-block,
-.md-task-list-item>.md-block {
+.md-task-list-item>.md-block,
+.md-list li>.md-code-block-container>.md-code-block {
 	position: relative;
 }
 
 .md-list li>.md-block>.md-glue-indent:first-child,
-.md-task-list-item>.md-block>.md-glue-indent:first-child {
+.md-task-list-item>.md-block>.md-glue-indent:first-child,
+.md-list li>.md-code-block-container>.md-code-block>.md-glue-indent:first-child {
 	position: absolute;
 	right: 100%;
 	top: 0;
@@ -546,34 +1706,140 @@
 .md-task-list-item {
 	list-style: none;
 	position: relative;
-	/*
-	 * Width of the checkbox / `[x]` source column. Single-sourced so the marker
-	 * reservation on the first paragraph and the left indent of any following
-	 * block (loose task items) stay in lockstep — keeping every block's text in
-	 * one vertical column under the marker.
-	 */
-	--md-task-marker-width: 1.75em;
 }
 
-/*
- * Reserve the marker column after the `[x]`/`[ ]` source marker (the first glue
- * in a task item's paragraph) so the rendered checkbox widget overlaid on it has
- * a comfortable gap before the text. The fixed width applies in both active and
- * inactive states, so the first text character does not drift horizontally when
- * markers toggle (see the compare fixture's `checkMarkedTextX` assertion).
- */
-.md-task-list-item .md-paragraph>.md-glue:first-child {
+.md-list > li {
+	--md-list-label-reserve: 0em;
+	--md-list-marker-reserve: var(--md-list-label-reserve);
+	--md-list-source-padding: 0em;
+}
+
+.md-list > .md-list-item-active {
+	--md-list-source-padding: calc((var(--md-list-marker-spaces) - 1) * 0.5em);
+}
+
+.md-list > .md-task-list-item {
+	--md-list-marker-reserve: 0em;
+}
+
+.md-list-with-task-items > li:not(.md-empty-block) {
+	--md-list-label-reserve: 0.5em;
+}
+
+.md-editor .md-list > li > .md-paragraph {
+	padding-inline-start: calc(var(--md-list-label-reserve) + var(--md-list-source-padding));
+}
+
+.md-editor .md-list > li > .md-list-item-line-anchor {
+	margin-inline-start: calc(var(--md-list-label-reserve) + var(--md-list-source-padding));
+}
+
+.md-editor .md-list > li > .md-marker-listItemMarker {
+	right: calc(100% - (var(--md-list-label-reserve) + var(--md-list-source-padding)) / var(--md-marker-font-scale));
+}
+
+.md-editor .md-list-gutter {
+	right: calc(100% - var(--md-list-label-reserve) - var(--md-list-source-padding));
+}
+
+.md-source-editing .md-marker-listItemMarker {
+	word-spacing: calc(var(--md-list-marker-reserve) / var(--md-marker-font-scale) / var(--md-list-marker-spaces));
+}
+
+/* Keep the mandatory separator's native width; each extra source space adds a body-sized half-em cell. */
+.md-source-editing .md-marker-listItemMarker > :is(.md-ws-space, .md-ws-tab) ~ :is(.md-ws-space, .md-ws-tab) {
+	font-family: var(--md-marker-font-family);
+	word-spacing: calc((0.5em + var(--md-list-marker-reserve) / var(--md-list-marker-spaces)) / var(--md-marker-font-scale) - 1ch);
+	tab-size: calc((0.5em + var(--md-list-marker-reserve) / var(--md-list-marker-spaces)) / var(--md-marker-font-scale));
+}
+
+.md-task-separator {
+	position: absolute;
+	left: calc(var(--md-list-source-padding) - 1em + 1.5ch * var(--md-marker-font-scale));
+	top: 0;
+	font-family: var(--md-marker-font-family);
+	white-space: pre;
+	word-spacing: calc((1.5em - 1.5ch * var(--md-marker-font-scale)) / var(--md-separator-length) - 1ch);
+	tab-size: calc((1.5em - 1.5ch * var(--md-marker-font-scale)) / var(--md-separator-length));
+}
+
+.md-task-list-item>.md-paragraph>.md-glue-taskListCheck {
+	position: absolute;
+	top: 0;
+	font-family: var(--md-marker-font-family);
+	font-size: calc(1em * var(--md-marker-font-scale));
+	left: calc((var(--md-list-source-padding) - 1em) / var(--md-marker-font-scale) - 1.5ch);
+	width: 3ch;
+}
+
+.md-source-editing .md-task-list-item > .md-paragraph > .md-glue-taskListCheck {
+	position: static;
 	display: inline-block;
-	width: var(--md-task-marker-width);
+	margin-inline-start: calc((-1em - var(--md-list-label-reserve)) / var(--md-marker-font-scale) - 1.5ch);
 }
 
-/*
- * Following blocks in a loose task item (the second paragraph etc.) carry no
- * marker glue, so indent them by the marker column to line their text up under
- * the first paragraph's text rather than under the checkbox.
- */
-.md-task-list-item>.md-block+.md-block {
-	padding-left: var(--md-task-marker-width);
+.md-source-editing .md-task-separator {
+	position: static;
+}
+
+.md-source-editing .md-list li > .md-paragraph .md-list-continuation-gutter {
+	position: absolute;
+	right: calc(100% - var(--md-list-label-reserve) - var(--md-list-source-padding));
+	top: auto;
+	white-space: pre;
+}
+
+.md-source-editing .md-list .md-code-block-container:has(> .md-code-list-source) {
+	display: block;
+	--md-list-prefix-width: calc(var(--md-list-source-indent) * var(--md-list-indent-step, 2em) + 1em + var(--md-list-marker-spaces) * 0.5em + var(--md-list-label-reserve));
+	margin-inline-start: calc(var(--md-list-label-reserve) + var(--md-list-source-padding) - var(--md-list-prefix-width));
+}
+
+.md-source-editing .md-list .md-code-list-source {
+	position: relative;
+	font-size: inherit;
+	border-inline-start-width: 0;
+	padding-inline-start: var(--md-list-prefix-width);
+}
+
+.md-source-editing .md-list li > .md-code-block-container > .md-code-list-source > .md-list-continuation-prefix:first-child {
+	right: calc(100% - var(--md-list-prefix-width));
+	top: auto;
+}
+
+.md-code-source-line {
+	position: relative;
+}
+
+.md-code-source-line > .md-list-continuation-prefix {
+	position: absolute;
+	right: 100%;
+}
+
+.md-editor .md-task-list-item > .md-list-gutter {
+	right: calc(100% - var(--md-list-source-padding));
+}
+
+.md-task-list-item > .md-list-gutter::after {
+	content: '';
+	font-family: var(--md-marker-font-family);
+	font-size: calc(1em * var(--md-marker-font-scale));
+	flex: 0 0 calc(1em / var(--md-marker-font-scale) + 1.5ch);
+}
+
+.md-task-list-item > .md-block + .md-block:not(.md-list) {
+	padding-left: calc(var(--md-list-label-reserve) + var(--md-list-source-padding));
+}
+
+.md-task-list-item > .md-list {
+	padding-left: var(--md-list-indent-step, 2em);
+}
+
+.md-task-list-item > .md-checkbox {
+	font-family: var(--md-marker-font-family);
+	font-size: calc(1em * var(--md-marker-font-scale));
+	left: calc((var(--md-list-source-padding) - 1em) / var(--md-marker-font-scale) - 8px);
+	top: calc((1lh / var(--md-marker-font-scale) - 16px) / 2);
 }
 
 .md-checkbox {
@@ -588,6 +1854,7 @@
 	position: absolute;
 	left: 0;
 	top: 0.25em;
+	z-index: 1;
 	cursor: pointer;
 	transition: background-color 0.15s ease, border-color 0.15s ease;
 }
@@ -600,8 +1867,8 @@
 .md-checkbox:checked::after {
 	content: '';
 	position: absolute;
-	left: 3px;
-	top: 0px;
+	left: 2.5px;
+	top: -1px;
 	width: 5px;
 	height: 9px;
 	border: solid white;
@@ -613,6 +1880,39 @@
 	border-color: #888;
 }
 
+/*
+ * The rotating "broken rounded-square" progress ring for an inactive task item
+ * whose text begins with the hidden `:running:` marker (see
+ * `ListItemViewData.isRunning`). Rendered as a conic-gradient ring — masked so
+ * only the ring (not its center) paints — with a transparent gap that spins,
+ * reading as a segmented spinner rather than a checked/unchecked box.
+ */
+.md-checkbox-running,
+.md-checkbox-running:checked {
+	padding: 2px;
+	border: 0;
+	border-radius: 4px;
+	background: conic-gradient(
+		transparent 0deg 42deg,
+		#bbb 62deg 360deg
+	);
+	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask-composite: exclude;
+	animation: md-checkbox-spin 0.8s linear infinite;
+	opacity: 1;
+}
+
+@keyframes md-checkbox-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.md-checkbox-running:hover {
+	border-color: transparent;
+}
+
 .md-checkbox:checked:hover {
 	background-color: #3a73d4;
 	border-color: #3a73d4;
@@ -623,14 +1923,66 @@
 	opacity: 0.6;
 }
 
+.md-checkbox-running:disabled {
+	opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.md-checkbox-running {
+		animation: none !important;
+	}
+}
+
+/*
+ * The `:running:` marker hidden from an inactive task item's rendered text
+ * (see `TextViewData.hiddenPrefixLength`). It stays real, selectable source —
+ * only visually hidden, per "Hidden markers remain real source" — so it takes
+ * no layout space in either state.
+ */
+.md-runner-marker {
+	display: none;
+}
+
 .md-cursor {
 	position: absolute;
 	width: 2px;
 	background: var(--md-cursor-background, #000);
 	pointer-events: none;
+}
+
+/*
+ * The painted caret is only shown while the editor is genuinely focused — focus
+ * rests inside it and its window is focused, mirrored onto the root as
+ * `.md-focused`. When unfocused, hide the caret element but keep its layout box
+ * (so caret geometry, selection and comment anchoring are unchanged) and stop
+ * the blink. Adding the animation on focus restarts it from 0% (a solid caret).
+ */
+.md-editor:not(.md-focused) .md-cursor {
+	visibility: hidden;
+}
+
+.md-editor.md-focused .md-cursor {
 	animation: md-cursor-blink 1s step-end infinite;
 }
 
+/*
+ * Read-only mode retains the logical caret for selection and comment anchoring.
+ * Hide only its painted element so unlocking can restore it in place.
+ */
+.md-editor.md-readonly .md-cursor {
+	visibility: hidden;
+}
+
+.md-editor.md-readonly-editing-attempt {
+	animation: md-readonly-editing-attempt 300ms ease-out;
+}
+
+@keyframes md-readonly-editing-attempt {
+	50% {
+		box-shadow: inset 0 0 0 2px var(--md-readonly-shine-glow, rgba(255, 255, 255, 0.58));
+	}
+}
+
 @keyframes md-cursor-blink {
 
 	0%,
@@ -641,4 +1993,189 @@
 	50% {
 		opacity: 0;
 	}
+}
+
+/*
+ * Edit / read-only lock toggle.
+ *
+ * The sticky overlay never changes text flow or the symmetric content margins.
+ * Narrow margins let the control overlap content rather than reserving a rail.
+ * Colors use local `--md-readonly-*` custom
+ * properties with literal fallbacks so this base file stays theme-agnostic
+ * (themes may override them).
+ */
+.md-readonly-toggle-host {
+	position: sticky;
+	top: var(--md-readonly-toggle-inset);
+	height: 0;
+	z-index: 10;
+	pointer-events: none;
+}
+
+.md-readonly-toggle {
+	position: absolute;
+	top: 4px;
+	right: var(--md-readonly-toggle-inset);
+	pointer-events: auto;
+	display: inline-grid;
+	grid-template-columns: repeat(3, 24px);
+	align-items: center;
+	justify-items: center;
+	gap: 2px;
+	box-sizing: border-box;
+	width: var(--md-readonly-toggle-width);
+	height: var(--md-readonly-toggle-height);
+	padding: 3px;
+	overflow: hidden;
+	direction: ltr;
+	appearance: none;
+	border-radius: 999px;
+	border: 1px solid var(--md-readonly-border, #b8b8b8);
+	background: var(--md-readonly-background, #f3f3f3);
+	color: var(--md-readonly-foreground, #444444);
+	font-size: 16px;
+	line-height: 1;
+	cursor: pointer;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
+	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.md-readonly-toggle::after {
+	content: '';
+	position: absolute;
+	z-index: 2;
+	top: -8px;
+	bottom: -8px;
+	left: -30px;
+	width: 24px;
+	background: linear-gradient(90deg,
+			transparent,
+			var(--md-readonly-shine-edge, rgba(255, 255, 255, 0.16)) 24%,
+			var(--md-readonly-shine, #ffffff) 50%,
+			var(--md-readonly-shine-edge, rgba(255, 255, 255, 0.16)) 76%,
+			transparent);
+	box-shadow: 0 0 8px 2px var(--md-readonly-shine-glow, rgba(255, 255, 255, 0.58));
+	opacity: 0;
+	pointer-events: none;
+	transform: skewX(-20deg);
+}
+
+.md-readonly-toggle.md-readonly-toggle-shine::after {
+	animation: md-readonly-toggle-shine 2s linear;
+	will-change: transform, opacity;
+}
+
+@keyframes md-readonly-toggle-shine {
+	0% {
+		opacity: 0;
+		transform: translateX(0) skewX(-20deg);
+	}
+
+	12%,
+	88% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateX(122px) skewX(-20deg);
+	}
+}
+
+.md-readonly-toggle:hover {
+	border-color: var(--md-readonly-border-hover, #8d8d8d);
+	background: var(--md-readonly-background-hover, #e9e9e9);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.1);
+}
+
+.md-readonly-toggle:focus-visible {
+	outline: 2px solid var(--md-readonly-accent, #4c8bf5);
+	outline-offset: 1px;
+}
+
+.md-readonly-toggle .md-readonly-toggle-indicator {
+	position: absolute;
+	top: 50%;
+	left: 3px;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	background: var(--md-readonly-accent, #4c8bf5);
+	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
+	transform: translate(26px, -50%);
+	transition: background-color 0.12s ease, transform 0.16s ease;
+}
+
+.md-readonly-toggle .md-readonly-toggle-icon {
+	position: relative;
+	z-index: 1;
+	display: block;
+	width: 16px;
+	height: 16px;
+	color: var(--md-readonly-foreground, #444444);
+	opacity: 0.62;
+	pointer-events: none;
+	transition: color 0.12s ease, opacity 0.12s ease;
+}
+
+.md-readonly-toggle:not(.md-readonly-toggle-locked) .md-readonly-toggle-icon-editing,
+.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
+	color: var(--md-readonly-accent-foreground, #ffffff);
+	opacity: 1;
+}
+
+.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-indicator {
+	transform: translate(0, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.md-editor.md-readonly-editing-attempt,
+	.md-readonly-toggle,
+	.md-readonly-toggle .md-readonly-toggle-indicator,
+	.md-readonly-toggle .md-readonly-toggle-icon,
+	.md-readonly-toggle.md-readonly-toggle-shine::after {
+		animation: none;
+		transition: none;
+	}
+}
+
+@media (forced-colors: active) {
+	.md-readonly-toggle {
+		forced-color-adjust: none;
+		border-color: ButtonText;
+		background: ButtonFace;
+		color: ButtonText;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle::after {
+		display: none;
+	}
+
+	.md-readonly-toggle:hover {
+		border-color: Highlight;
+		background: ButtonFace;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle:focus-visible {
+		outline-color: Highlight;
+	}
+
+	.md-readonly-toggle .md-readonly-toggle-indicator {
+		background: Highlight;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle .md-readonly-toggle-icon {
+		color: ButtonText;
+		opacity: 1;
+	}
+
+	.md-readonly-toggle:not(.md-readonly-toggle-locked):not(.md-readonly-toggle-source) .md-readonly-toggle-icon-editing,
+	.md-readonly-toggle.md-readonly-toggle-source .md-readonly-toggle-icon-source,
+	.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
+		color: HighlightText;
+	}
 }