emdash 0.34.0 → 0.36.0

package/src/client/index.ts

@@ -193,13 +193,28 @@ export interface MediaItem {
 	size: number;
 	width?: number;
 	height?: number;
+	focalX?: number | null;
+	focalY?: number | null;
 	alt?: string;
 	caption?: string;
 	createdAt: string;
 	updatedAt: string;
+	folderId?: string | null;
 	usage?: MediaUsageSummary;
 }
 
+/** Result of assigning local media to a folder or the Main library */
+export interface MediaFolderAssignment {
+	id: string;
+	folderId: string | null;
+}
+
+/** Flat media-library folder */
+export interface MediaFolder {
+	id: string;
+	name: string;
+}
+
 /** Media usage repair request */
 export type MediaUsageRepairInput = { scope: "collection"; collection: string } | { scope: "all" };
 
@@ -229,6 +244,18 @@ export interface MediaUsageRepairResponse {
 	collections: MediaUsageRepairCollectionSummary[];
 }
 
+export interface MediaUsageProgress {
+	status: "indexing" | "ready" | "needs_attention";
+	readyCollections: number;
+	totalCollections: number;
+}
+
+export interface MediaUsageProgressAdvanceResponse {
+	activation: MediaUsageActivationStatus;
+	progress: MediaUsageProgress | null;
+	nextRequestInMs: 0 | 30_000 | null;
+}
+
 /** Durable media usage entry-work state */
 export type MediaUsageWorkState = "pending" | "retry" | "leased" | "failed";
 
@@ -272,6 +299,28 @@ export interface MediaUsageWorkRetryResponse {
 	item: MediaUsageWorkItem;
 }
 
+export interface MediaUsageActivationStatus {
+	state: "expanded" | "activating" | "active";
+	collectionCursor: string | null;
+	attemptCount: number;
+	drainConfirmedAt: string | null;
+	lastAttemptedAt: string | null;
+	lastErrorCode: "MEDIA_USAGE_ACTIVATION_FAILED" | null;
+	leaseExpiresAt: string | null;
+	activatedAt: string | null;
+	updatedAt: string;
+}
+
+export interface MediaUsageActivationAdvanceInput {
+	writersDrained: true;
+}
+
+export interface MediaUsageActivationAdvanceResponse {
+	outcome: "activating" | "active";
+	processedCollections: number;
+	activation: MediaUsageActivationStatus;
+}
+
 export type MediaUsageCollectionDeletionState = "pending" | "retry" | "leased" | "failed";
 export type MediaUsageCollectionDeletionPhase =
 	| "fence"
@@ -811,16 +860,27 @@ export class EmDashClient {
 		mimeType?: string;
 		limit?: number;
 		cursor?: string;
+		page?: number;
 		includeUsage?: boolean;
-	}): Promise<ListResult<MediaItem>> {
+		folderId?: string | null;
+	}): Promise<ListResult<MediaItem> & { totalCount?: number }> {
 		const params = new URLSearchParams();
 		if (options?.mimeType) params.set("mimeType", options.mimeType);
 		if (options?.limit) params.set("limit", String(options.limit));
 		if (options?.cursor) params.set("cursor", options.cursor);
+		if (options?.page !== undefined) params.set("page", String(options.page));
 		if (options?.includeUsage === true) params.set("includeUsage", "1");
+		if (options?.folderId === null) {
+			params.set("folderId", "unfiled");
+		} else if (options?.folderId !== undefined) {
+			params.set("folderId", options.folderId);
+		}
 
 		const qs = params.toString();
-		return this.request<ListResult<MediaItem>>("GET", `/media${qs ? `?${qs}` : ""}`);
+		return this.request<ListResult<MediaItem> & { totalCount?: number }>(
+			"GET",
+			`/media${qs ? `?${qs}` : ""}`,
+		);
 	}
 
 	/** Get a single media item */
@@ -836,6 +896,58 @@ export class EmDashClient {
 		return data.item;
 	}
 
+	/** List media folders */
+	async mediaFolderList(
+		options: { limit?: number; cursor?: string; q?: string } = {},
+	): Promise<ListResult<MediaFolder>> {
+		const params = new URLSearchParams();
+		if (options.limit !== undefined) params.set("limit", String(options.limit));
+		if (options.cursor !== undefined) params.set("cursor", options.cursor);
+		if (options.q !== undefined) params.set("q", options.q);
+		const qs = params.toString();
+		return this.request<ListResult<MediaFolder>>("GET", `/media/folders${qs ? `?${qs}` : ""}`);
+	}
+
+	/** Get one media folder */
+	async mediaFolderGet(id: string): Promise<MediaFolder> {
+		const data = await this.request<{ item: MediaFolder }>(
+			"GET",
+			`/media/folders/${encodeURIComponent(id)}`,
+		);
+		return data.item;
+	}
+
+	/** Create a media folder */
+	async mediaFolderCreate(name: string): Promise<MediaFolder> {
+		const data = await this.request<{ item: MediaFolder }>("POST", "/media/folders", { name });
+		return data.item;
+	}
+
+	/** Rename a media folder */
+	async mediaFolderUpdate(id: string, name: string): Promise<MediaFolder> {
+		const data = await this.request<{ item: MediaFolder }>(
+			"PUT",
+			`/media/folders/${encodeURIComponent(id)}`,
+			{ name },
+		);
+		return data.item;
+	}
+
+	/** Delete a media folder */
+	async mediaFolderDelete(id: string): Promise<void> {
+		await this.request<unknown>("DELETE", `/media/folders/${encodeURIComponent(id)}`);
+	}
+
+	/** Assign media to a folder, or return it to the Main library */
+	async mediaSetFolder(id: string, folderId: string | null): Promise<MediaFolderAssignment> {
+		const data = await this.request<{ item: MediaFolderAssignment }>(
+			"PUT",
+			`/media/${encodeURIComponent(id)}`,
+			{ folderId },
+		);
+		return { id: data.item.id, folderId: data.item.folderId };
+	}
+
 	/** Get entry-grouped usage details for a media item */
 	async mediaGetUsage(
 		id: string,
@@ -894,6 +1006,32 @@ export class EmDashClient {
 		return this.request<MediaUsageRepairResponse>("POST", "/admin/media-usage/repair", input);
 	}
 
+	/** Read aggregate Media Usage indexing progress */
+	async mediaGetUsageProgress(): Promise<MediaUsageProgress> {
+		return this.request<MediaUsageProgress>("GET", "/admin/media-usage/progress");
+	}
+
+	/** Advance exactly one Media Usage maintenance step */
+	async mediaAdvanceUsageProgress(): Promise<MediaUsageProgressAdvanceResponse> {
+		return this.request<MediaUsageProgressAdvanceResponse>("POST", "/admin/media-usage/progress");
+	}
+
+	/** Read the redacted controlled-activation status */
+	async mediaGetUsageActivation(): Promise<MediaUsageActivationStatus> {
+		return this.request<MediaUsageActivationStatus>("GET", "/admin/media-usage/activation");
+	}
+
+	/** Advance exactly one controlled-activation batch */
+	async mediaAdvanceUsageActivation(
+		input: MediaUsageActivationAdvanceInput,
+	): Promise<MediaUsageActivationAdvanceResponse> {
+		return this.request<MediaUsageActivationAdvanceResponse>(
+			"POST",
+			"/admin/media-usage/activation",
+			input,
+		);
+	}
+
 	/** List a bounded page of durable media usage entry work */
 	async mediaListUsageWork(
 		options: MediaUsageWorkListOptions,

package/src/client/transport.ts

@@ -186,6 +186,10 @@ export function refreshInterceptor(options: {
 	}
 
 	return async (request, next) => {
+		// A request body can only be read once; clone before sending so the
+		// 401 retry has an unconsumed request to rebuild from.
+		const retryTemplate = request.body ? request.clone() : request;
+
 		const response = await next(request);
 
 		if (response.status === 401) {
@@ -199,9 +203,9 @@ export function refreshInterceptor(options: {
 			const newToken = await refreshing;
 			if (newToken) {
 				// Retry with new token
-				const headers = new Headers(request.headers);
+				const headers = new Headers(retryTemplate.headers);
 				headers.set("Authorization", `Bearer ${newToken}`);
-				return next(new Request(request, { headers }));
+				return next(new Request(retryTemplate, { headers }));
 			}
 		}
 

package/src/components/EmDashImage.astro

@@ -15,8 +15,12 @@
  * <!-- With overrides -->
  * <Image image={post.data.featured_image} class="hero" />
  * ```
+ *
+ * When the image value carries a `darkVariant`, both images are rendered and
+ * CSS shows the one matching the page's color scheme. See the dark mode guide
+ * for the `<html>` class convention and how to override the selectors.
  */
-import type { MediaValue } from "../fields/types.js";
+import type { ImageValue, MediaValue } from "../fields/types.js";
 import type { HTMLAttributes } from "astro/types";
 import { Image as AstroImage, getImage } from "astro:assets";
 import type { ImageEmbed } from "../media/types.js";
@@ -28,13 +32,19 @@ import {
 	RESPONSIVE_BREAKPOINTS,
 } from "../media/responsive.js";
 import { getPublicOrigin } from "../api/public-url.js";
+import { focalPointToObjectPosition } from "../media/focal-point.js";
 
 interface Props extends Omit<
 	HTMLAttributes<"img">,
 	"src" | "width" | "height"
 > {
 	/** Image value from content field or media library */
-	image: MediaValue | string | undefined | null;
+	image: ImageValue | string | undefined | null;
+	/**
+	 * Image shown in a dark color scheme. Defaults to `image.darkVariant`;
+	 * pass it explicitly when the dark image comes from another field.
+	 */
+	darkVariant?: MediaValue | string | undefined | null;
 	/** Override alt text (uses image.alt by default) */
 	alt?: string;
 	/** Override width (uses image.width by default) */
@@ -49,12 +59,14 @@ interface Props extends Omit<
 
 const {
 	image,
+	darkVariant,
 	alt,
 	width,
 	height,
 	priority,
 	placeholder = true,
 	class: className,
+	id,
 	...attrs
 } = Astro.props;
 
@@ -96,22 +108,31 @@ function generateSrcset(
 		.join(", ");
 }
 
-const img = normalizeImage(image);
+interface ResolvedImage {
+	src: string;
+	srcset?: string;
+	sizes?: string;
+	astroImageSrc: string;
+	width?: number;
+	height?: number;
+	generatedStyle: string;
+}
 
-// Determine final dimensions (props override image metadata)
-const finalWidth = width ?? img?.width;
-const finalHeight = height ?? img?.height;
-const finalAlt = alt ?? img?.alt ?? "";
-const aspectRatio =
-	finalWidth && finalHeight ? finalWidth / finalHeight : undefined;
+/**
+ * Resolve the source URL, srcset, dimensions, and LQIP style for one media
+ * value. Props override the value's own dimensions.
+ */
+async function resolveImage(img: MediaValue): Promise<ResolvedImage> {
+	const finalWidth = width ?? img.width;
+	const finalHeight = height ?? img.height;
+	const aspectRatio =
+		finalWidth && finalHeight ? finalWidth / finalHeight : undefined;
 
-// Get the image source URL and srcset
-let src = "";
-let srcset: string | undefined;
-let sizes: string | undefined;
-let astroImageSrc = "";
+	let src = "";
+	let srcset: string | undefined;
+	let sizes: string | undefined;
+	let astroImageSrc = "";
 
-if (img) {
 	const providerId = img.provider ?? "local";
 
 	if (providerId === "local" || img.src) {
@@ -170,56 +191,119 @@ if (img) {
 			src = buildLocalImageUrl(img);
 		}
 	}
+
+	// Build placeholder background style. Prefer the first-class MediaValue fields;
+	// fall back to `meta` for snapshots stored before LQIP was promoted off `meta`.
+	const blurhash = img.blurhash ?? (img.meta?.blurhash as string | undefined);
+	const dominantColor =
+		img.dominantColor ?? (img.meta?.dominantColor as string | undefined);
+
+	let placeholderStyle = "";
+	if (placeholder && blurhash) {
+		const { blurhashToImageCssString } = await import("@unpic/placeholder");
+		placeholderStyle = blurhashToImageCssString(blurhash);
+	} else if (placeholder && dominantColor) {
+		placeholderStyle = `background-color: ${dominantColor};`;
+	}
+
+	// The focal point travels with the media value, so the dark variant gets
+	// its own object-position rather than inheriting the light image's.
+	const objectPosition = focalPointToObjectPosition(img.focalX, img.focalY);
+	const generatedStyle = [
+		placeholderStyle,
+		objectPosition ? `object-position: ${objectPosition};` : "",
+	]
+		.filter(Boolean)
+		.join(" ");
+
+	return {
+		src,
+		srcset,
+		sizes,
+		astroImageSrc,
+		width: finalWidth,
+		height: finalHeight,
+		generatedStyle,
+	};
 }
 
-// Build placeholder background style. Prefer the first-class MediaValue fields;
-// fall back to `meta` for snapshots stored before LQIP was promoted off `meta`.
-const blurhash =
-	img?.blurhash ?? (img?.meta?.blurhash as string | undefined);
-const dominantColor =
-	img?.dominantColor ?? (img?.meta?.dominantColor as string | undefined);
-
-let placeholderStyle = "";
-if (placeholder && blurhash) {
-	const { blurhashToImageCssString } = await import("@unpic/placeholder");
-	placeholderStyle = blurhashToImageCssString(blurhash);
-} else if (placeholder && dominantColor) {
-	placeholderStyle = `background-color: ${dominantColor};`;
+const img = normalizeImage(image);
+const darkSource =
+	darkVariant ?? (typeof image === "object" ? image?.darkVariant : undefined);
+const dark = img ? normalizeImage(darkSource) : null;
+const finalAlt = alt ?? img?.alt ?? "";
+
+const resolved = img ? await resolveImage(img) : null;
+const resolvedDark = dark ? await resolveImage(dark) : null;
+
+function imgProps(
+	r: ResolvedImage,
+	variantClass: string | undefined,
+	elementId: string | null | undefined
+): Record<string, unknown> {
+	return {
+		id: elementId,
+		src: r.src,
+		srcset: r.srcset,
+		sizes: r.sizes,
+		width: r.width,
+		height: r.height,
+		alt: finalAlt,
+		loading: priority ? "eager" : "lazy",
+		fetchpriority: priority ? "high" : undefined,
+		decoding: "async",
+		style: r.generatedStyle || undefined,
+		class: ["emdash-image-media", variantClass, className].filter(Boolean).join(" "),
+		...attrs,
+	};
 }
 
-const imgProps: Record<string, unknown> = {
-	src,
-	srcset,
-	sizes,
-	width: finalWidth,
-	height: finalHeight,
-	alt: finalAlt,
-	loading: priority ? "eager" : "lazy",
-	fetchpriority: priority ? "high" : undefined,
-	decoding: "async",
-	style: placeholderStyle || undefined,
-	class: ["emdash-image-media", className].filter(Boolean).join(" "),
-	...attrs,
-};
+const lightClass = resolvedDark ? "emdash-image--light" : undefined;
+// Both variants render into the same document, so a caller-supplied `id` would
+// otherwise appear on two elements.
+const darkId = id ? `${id}--dark` : undefined;
+const astroClass = (variantClass: string | undefined) =>
+	[variantClass, className].filter(Boolean).join(" ") || undefined;
 ---
 
 {
-	img && astroImageSrc ? (
+	resolved && resolved.astroImageSrc ? (
+		<AstroImage
+			id={id}
+			src={resolved.astroImageSrc}
+			alt={finalAlt}
+			width={resolved.width}
+			height={resolved.height}
+			priority={priority}
+			layout="constrained"
+			loading={priority ? "eager" : "lazy"}
+			decoding="async"
+			class={astroClass(lightClass)}
+			style={resolved.generatedStyle || undefined}
+			{...attrs}
+		/>
+	) : resolved && resolved.src ? (
+		<img {...imgProps(resolved, lightClass, id)} />
+	) : null
+}
+{
+	resolvedDark && resolvedDark.astroImageSrc ? (
 		<AstroImage
-			src={astroImageSrc}
+			id={darkId}
+			src={resolvedDark.astroImageSrc}
 			alt={finalAlt}
-			width={finalWidth}
-			height={finalHeight}
+			width={resolvedDark.width}
+			height={resolvedDark.height}
 			priority={priority}
 			layout="constrained"
 			loading={priority ? "eager" : "lazy"}
 			decoding="async"
-			class={className}
-			style={placeholderStyle || undefined}
+			class={astroClass("emdash-image--dark")}
+			style={resolvedDark.generatedStyle || undefined}
 			{...attrs}
 		/>
-	) : img && src ? (
-		<img {...imgProps} />
+	) : resolvedDark && resolvedDark.src ? (
+		<img {...imgProps(resolvedDark, "emdash-image--dark", darkId)} />
 	) : null
 }
 
@@ -229,3 +313,23 @@ const imgProps: Record<string, unknown> = {
 		height: auto;
 	}
 </style>
+
+<style is:global>
+	/* A `dark` or `light` class on <html> wins over the system preference. */
+	:where(:root.dark) .emdash-image--light {
+		display: none;
+	}
+	:where(:root.light) .emdash-image--dark {
+		display: none;
+	}
+	@media (prefers-color-scheme: dark) {
+		:where(:root:not(.light)) .emdash-image--light {
+			display: none;
+		}
+	}
+	@media (prefers-color-scheme: light) {
+		:where(:root:not(.dark)) .emdash-image--dark {
+			display: none;
+		}
+	}
+</style>

package/src/components/Gallery.astro

@@ -13,6 +13,7 @@ import { getMediaProvider } from "../media/provider-loader.js";
 import { buildRenderMediaUrl } from "../media/url.js";
 import { toAbsoluteMediaUrl, RESPONSIVE_BREAKPOINTS } from "../media/responsive.js";
 import { getPublicOrigin } from "../api/public-url.js";
+import { focalPointToObjectPosition } from "../media/focal-point.js";
 
 export interface Props {
 	node: {
@@ -31,6 +32,8 @@ export interface Props {
 			caption?: string;
 			width?: number;
 			height?: number;
+			focalX?: number;
+			focalY?: number;
 			/** LQIP blurhash placeholder (images only) */
 			blurhash?: string;
 			/** LQIP dominant-color placeholder, as a CSS color (images only) */
@@ -72,6 +75,7 @@ const resolvedImages = await Promise.all(
 	images.map(async (image) => {
 		const { asset, alt = "", width, height } = image;
 		const aspectRatio = width && height ? width / height : undefined;
+		const objectPosition = focalPointToObjectPosition(image.focalX, image.focalY);
 
 		let src = "";
 		let srcset: string | undefined;
@@ -145,6 +149,7 @@ const resolvedImages = await Promise.all(
 			sizes,
 			astroImageSrc,
 			placeholderStyle,
+			objectPosition,
 		};
 	}),
 );
@@ -161,6 +166,7 @@ const resolvedImages = await Promise.all(
 						width={image.width!}
 						height={image.height!}
 						layout="constrained"
+						style={image.objectPosition ? `object-position: ${image.objectPosition};` : undefined}
 					/>
 				) : (
 					<img
@@ -172,6 +178,7 @@ const resolvedImages = await Promise.all(
 						height={image.height}
 						loading="lazy"
 						decoding="async"
+						style={image.objectPosition ? `object-position: ${image.objectPosition};` : undefined}
 					/>
 				)}
 				{image.caption && <figcaption>{image.caption}</figcaption>}

package/src/components/InlinePortableTextEditor.tsx

@@ -527,9 +527,10 @@ function convertPTBlock(block: PTBlock): PMNode | null {
 	}
 	if (block._type === "code") {
 		const cb = block as PTBlock & { code?: string; language?: string };
+		const language = typeof cb.language === "string" && cb.language.length > 0 ? cb.language : null;
 		return {
 			type: "codeBlock",
-			attrs: { language: cb.language || null },
+			attrs: { language },
 			content: cb.code ? [{ type: "text", text: cb.code }] : undefined,
 		};
 	}
@@ -2242,6 +2243,8 @@ export function InlinePortableTextEditor({
 			if (mediaPickerOpen) return;
 			const related = e.relatedTarget instanceof HTMLElement ? e.relatedTarget : null;
 			if (related && e.currentTarget.contains(related)) return;
+			// The copy fallback briefly moves focus to its textarea before restoring the editor.
+			if (related?.hasAttribute("data-emdash-clipboard-fallback")) return;
 			// Don't save if focus moved to the slash menu (portalled to body)
 			if (related?.closest(".emdash-slash-menu")) return;
 			if (related?.closest(".emdash-media-picker")) return;
@@ -2283,6 +2286,132 @@ export function InlinePortableTextEditor({
 				onSelect={handleMediaSelect}
 			/>
 			<style>{`
+				.emdash-inline-code-block {
+					position: relative;
+					margin-block: 1rem;
+					--emdash-code-background: var(--emdash-inline-code-background, #f7f7f5);
+					--emdash-code-foreground: var(--emdash-inline-code-foreground, #24292f);
+					--emdash-code-muted: var(--emdash-inline-code-muted, #57606a);
+					--emdash-code-keyword: var(--emdash-inline-code-keyword, #b8172a);
+					--emdash-code-string: var(--emdash-inline-code-string, #0a3069);
+					--emdash-code-number: var(--emdash-inline-code-number, #0550ae);
+					--emdash-code-title: var(--emdash-inline-code-title, #7545c7);
+					--emdash-code-border: var(--emdash-inline-code-border, #7d8590);
+					--emdash-code-control-background: var(
+						--emdash-inline-code-control-background,
+						var(--emdash-inline-bg, #ffffff)
+					);
+					--emdash-code-control-foreground: var(
+						--emdash-inline-code-control-foreground,
+						#24292f
+					);
+					--emdash-code-focus: var(--emdash-inline-code-focus, #0550ae);
+				}
+				.emdash-inline-code-block .emdash-code-block {
+					margin: 0;
+					padding: 1rem;
+					padding-block: 30px !important;
+					border: 0 !important;
+					border-radius: 0.5rem;
+					background: var(--emdash-code-background) !important;
+					color: var(--emdash-code-foreground) !important;
+					caret-color: var(--emdash-code-foreground) !important;
+					overflow-x: auto;
+				}
+				.emdash-inline-code-block .emdash-code-block code {
+					background: transparent !important;
+					color: inherit !important;
+					font-size: 13px !important;
+				}
+				.emdash-inline-code-block :is(.hljs-comment, .hljs-quote) {
+					color: var(--emdash-code-muted);
+				}
+				.emdash-inline-code-block
+					:is(.hljs-keyword, .hljs-literal, .hljs-selector-tag, .hljs-section, .hljs-link, .hljs-deletion) {
+					color: var(--emdash-code-keyword);
+				}
+				.emdash-inline-code-block
+					:is(.hljs-string, .hljs-attr, .hljs-attribute, .hljs-symbol, .hljs-bullet, .hljs-addition) {
+					color: var(--emdash-code-string);
+				}
+				.emdash-inline-code-block :is(.hljs-number, .hljs-meta) {
+					color: var(--emdash-code-number);
+				}
+				.emdash-inline-code-block
+					:is(.hljs-title, .hljs-name, .hljs-type, .hljs-built_in, .hljs-selector-id, .hljs-selector-class) {
+					color: var(--emdash-code-title);
+				}
+				.emdash-inline-code-block-popover,
+				.emdash-inline-code-block-chip {
+					box-sizing: border-box;
+					border: 1px solid var(--emdash-code-border);
+					background: var(--emdash-code-control-background);
+					color: var(--emdash-code-control-foreground);
+				}
+				.emdash-inline-code-block-controls-wrap {
+					position: absolute;
+					inset-block-start: 0;
+					inset-inline-end: 0.25rem;
+					z-index: 100;
+					max-inline-size: min(calc(100% - 0.25rem), calc(100vw - 1rem));
+					opacity: 0;
+					pointer-events: none;
+					user-select: none;
+					transition: opacity 120ms ease-out;
+				}
+				.emdash-inline-code-block:hover .emdash-inline-code-block-controls-wrap,
+				.emdash-inline-code-block:focus-within .emdash-inline-code-block-controls-wrap,
+				.emdash-inline-code-block-controls-wrap[data-persistent="true"] {
+					opacity: 1;
+					pointer-events: auto;
+				}
+				.emdash-inline-code-block-popover {
+					inline-size: min(14rem, 100%, calc(100vw - 1rem));
+				}
+				.emdash-inline-code-block-language-input {
+					min-inline-size: 0;
+					flex: 1;
+					border: 1px solid var(--emdash-code-border);
+					background: transparent;
+					color: inherit;
+				}
+				.emdash-inline-code-block-controls-wrap button:focus-visible,
+				.emdash-inline-code-block-language-input:focus-visible {
+					outline: 2px solid var(--emdash-code-focus);
+					outline-offset: 2px;
+				}
+				@media (hover: none), (pointer: coarse) {
+					.emdash-inline-code-block-controls-wrap {
+						opacity: 1;
+						pointer-events: auto;
+					}
+				}
+				@media (prefers-reduced-motion: reduce) {
+					.emdash-inline-code-block-controls-wrap {
+						transition: none;
+					}
+				}
+				@media (prefers-color-scheme: dark) {
+					.emdash-inline-code-block {
+						--emdash-code-background: var(--emdash-inline-code-background, #202020);
+						--emdash-code-foreground: var(--emdash-inline-code-foreground, #f0f3f6);
+						--emdash-code-muted: var(--emdash-inline-code-muted, #c9d1d9);
+						--emdash-code-keyword: var(--emdash-inline-code-keyword, #ffc1bb);
+						--emdash-code-string: var(--emdash-inline-code-string, #b9ddff);
+						--emdash-code-number: var(--emdash-inline-code-number, #a8d5ff);
+						--emdash-code-title: var(--emdash-inline-code-title, #e5ccff);
+						--emdash-code-border: var(--emdash-inline-code-border, #6e7681);
+						--emdash-code-control-background: var(
+							--emdash-inline-code-control-background,
+							var(--emdash-inline-bg, #161b22)
+						);
+						--emdash-code-control-foreground: var(
+							--emdash-inline-code-control-foreground,
+							#f0f3f6
+						);
+						--emdash-code-focus: var(--emdash-inline-code-focus, #a8d5ff);
+					}
+				}
 				.emdash-bubble-menu {
 					z-index: 100;
 					display: flex;