emdash 1.3.0 → 1.4.0

package/src/astro/routes/api/widget-areas/index.ts

@@ -14,7 +14,7 @@ import { isParseError, parseBody } from "#api/parse.js";
 import { createWidgetAreaBody } from "#api/schemas.js";
 import { widgetAreaTag } from "#cache/chrome-tags.js";
 import { invalidateRouteCache } from "#cache/route-cache.js";
-import { rowToWidget } from "#widgets/index.js";
+import { invalidateWidgetObjectCache, rowToWidget } from "#widgets/index.js";
 import type { WidgetRow } from "#widgets/types.js";
 
 export const prerender = false;
@@ -90,6 +90,7 @@ export const POST: APIRoute = async ({ request, locals, cache }) => {
 				description: body.description ?? null,
 			})
 			.execute();
+		invalidateWidgetObjectCache();
 
 		const area = await db
 			.selectFrom("_emdash_widget_areas")

package/src/astro/types.ts

@@ -49,9 +49,9 @@ export interface ManifestCollection {
 	titleField?: string;
 	dateField?: string;
 	/**
-	 * Omit the auto-generated sidebar entry and dashboard quick action in the
-	 * admin. The collection is still listed in the manifest so its routes,
-	 * editor, and API keep working.
+	 * Omit the auto-generated sidebar entry, dashboard quick action, and
+	 * dashboard Content card row in the admin. The collection is still listed
+	 * in the manifest so its routes, editor, and API keep working.
 	 */
 	hidden?: boolean;
 	/** Phosphor icon name for the sidebar entry (kebab-case, e.g. `calendar-blank`). */
@@ -255,6 +255,7 @@ export interface EmDashManifest {
 		siteName?: string;
 		footerLabel?: string | false;
 		favicon?: string;
+		hiddenNavItems?: string[];
 	};
 }
 

package/src/auth/api-tokens.ts

@@ -25,3 +25,6 @@ export {
 	computeS256Challenge,
 	type ApiTokenScope,
 } from "@emdash-cms/auth";
+
+/** OAuth access token TTL: 1 hour */
+export const ACCESS_TOKEN_TTL_SECONDS = 60 * 60;

package/src/auth/types.ts

@@ -166,6 +166,12 @@ export interface AuthProviderAdminExports {
 	 */
 	LoginForm?: import("react").ComponentType;
 
+	/**
+	 * Optional help text shown below the provider's LoginForm. Providers can
+	 * export a string or a component; components keep text localisable.
+	 */
+	loginHelp?: string | import("react").ComponentType;
+
 	/**
 	 * Setup wizard step for creating the admin account via this provider.
 	 * When present, this provider appears as an option in the setup wizard's

package/src/cleanup.ts

@@ -12,6 +12,7 @@
 import { createKyselyAdapter, type AuthTables } from "@emdash-cms/auth/adapters/kysely";
 import type { Kysely } from "kysely";
 
+import { ACCESS_TOKEN_TTL_SECONDS } from "./auth/api-tokens.js";
 import { cleanupExpiredChallenges } from "./auth/challenge-store.js";
 import { MediaRepository } from "./database/repositories/media.js";
 import { RedirectRepository } from "./database/repositories/redirect.js";
@@ -28,6 +29,9 @@ import type { Storage } from "./storage/types.js";
 export interface CleanupResult {
 	challenges: number;
 	expiredTokens: number;
+	oauthTokens: number;
+	authorizationCodes: number;
+	deviceCodes: number;
 	pendingUploads: number;
 	pendingUploadFiles: number;
 	uploadAttempts: number;
@@ -42,6 +46,13 @@ export interface CleanupResult {
 const REVISION_KEEP_COUNT = 50;
 const REVISION_PRUNE_BATCH_SIZE = 10;
 
+/**
+ * Revoking a refresh token finds the access tokens issued from it through its
+ * row, and those can outlive it by one access token lifetime. A device code's
+ * row is what lets a client that is still polling get `expired_token`.
+ */
+const OAUTH_EXPIRY_GRACE_MS = ACCESS_TOKEN_TTL_SECONDS * 1000;
+
 /** Target cadence for full system cleanup. */
 export const SYSTEM_CLEANUP_INTERVAL_MS = 60 * 60 * 1000;
 
@@ -86,6 +97,9 @@ export async function runSystemCleanup(
 	const result: CleanupResult = {
 		challenges: -1,
 		expiredTokens: -1,
+		oauthTokens: -1,
+		authorizationCodes: -1,
+		deviceCodes: -1,
 		pendingUploads: -1,
 		pendingUploadFiles: -1,
 		uploadAttempts: -1,
@@ -162,6 +176,36 @@ export async function runSystemCleanup(
 		console.error("[cleanup] Failed to clean media upload attempts:", error);
 	}
 
+	const oauthCutoff = new Date(Date.now() - OAUTH_EXPIRY_GRACE_MS).toISOString();
+
+	try {
+		const deleted = await db
+			.deleteFrom("_emdash_oauth_tokens")
+			.where("expires_at", "<", oauthCutoff)
+			.executeTakeFirst();
+		result.oauthTokens = Number(deleted.numDeletedRows);
+	} catch (error) {
+		console.error("[cleanup] Failed to clean expired OAuth tokens:", error);
+	}
+
+	try {
+		const { cleanupExpiredAuthorizationCodes } =
+			await import("./api/handlers/oauth-authorization.js");
+		result.authorizationCodes = await cleanupExpiredAuthorizationCodes(db);
+	} catch (error) {
+		console.error("[cleanup] Failed to clean expired authorization codes:", error);
+	}
+
+	try {
+		const deleted = await db
+			.deleteFrom("_emdash_device_codes")
+			.where("expires_at", "<", oauthCutoff)
+			.executeTakeFirst();
+		result.deviceCodes = Number(deleted.numDeletedRows);
+	} catch (error) {
+		console.error("[cleanup] Failed to clean expired device codes:", error);
+	}
+
 	try {
 		result.revisionsPruned = await pruneQueuedRevisions(db);
 	} catch (error) {

package/src/cli/commands/export-seed.ts

@@ -26,6 +26,7 @@ import type { ContentItem } from "../../database/repositories/types.js";
 import type { Database } from "../../database/types.js";
 import { validateIdentifier } from "../../database/validate.js";
 import { getI18nConfig, isI18nEnabled } from "../../i18n/config.js";
+import { getMediaCaption } from "../../media/caption.js";
 import { BlockTypeRegistry } from "../../schema/block-type-registry.js";
 import { SchemaRegistry } from "../../schema/registry.js";
 import type { FieldType } from "../../schema/types.js";
@@ -1076,7 +1077,7 @@ interface MediaInfo {
 	url: string;
 	filename: string;
 	alt?: string;
-	caption?: string;
+	caption?: string | null;
 }
 
 interface ExportedContent {
@@ -1118,7 +1119,7 @@ async function exportContent(
 					url: `${mediaUrlPrefix}${media.storageKey}`,
 					filename: media.filename,
 					alt: media.alt || undefined,
-					caption: media.caption || undefined,
+					caption: typeof media.caption === "string" ? media.caption : null,
 				});
 			}
 			cursor = result.nextCursor;
@@ -1374,7 +1375,7 @@ function toSeedMedia(
 	mediaCounter: { count: number },
 ): unknown {
 	if (!value || typeof value !== "object") return value;
-	const mediaValue = value as { id?: unknown; alt?: unknown };
+	const mediaValue = value as { id?: unknown; alt?: unknown; caption?: unknown; meta?: unknown };
 	const mediaInfo = typeof mediaValue.id === "string" ? mediaMap.get(mediaValue.id) : undefined;
 	if (!mediaInfo) return value;
 
@@ -1384,7 +1385,8 @@ function toSeedMedia(
 			url: mediaInfo.url,
 			filename: mediaInfo.filename,
 			alt: (typeof mediaValue.alt === "string" && mediaValue.alt) || mediaInfo.alt,
-			caption: mediaInfo.caption,
+			caption: getMediaCaption(mediaValue) ?? mediaInfo.caption,
+			libraryCaption: mediaInfo.caption ?? null,
 		},
 	};
 }

package/src/cli/commands/login.ts

@@ -189,7 +189,6 @@ export const loginCommand = defineCommand({
 			type: "string",
 			alias: "u",
 			description: "EmDash instance URL",
-			default: "http://localhost:4321",
 		},
 		header: {
 			type: "string",
@@ -198,7 +197,7 @@ export const loginCommand = defineCommand({
 		},
 	},
 	async run({ args }) {
-		const baseUrl = args.url || "http://localhost:4321";
+		const baseUrl = resolveBaseUrl(args);
 		consola.start(`Connecting to ${baseUrl}...`);
 
 		// Resolve custom headers from --header flags and EMDASH_HEADERS env
@@ -371,11 +370,10 @@ export const logoutCommand = defineCommand({
 			type: "string",
 			alias: "u",
 			description: "EmDash instance URL",
-			default: "http://localhost:4321",
 		},
 	},
 	async run({ args }) {
-		const baseUrl = args.url || "http://localhost:4321";
+		const baseUrl = resolveBaseUrl(args);
 
 		// Get stored credentials
 		const cred = getCredentials(baseUrl);

package/src/client/index.ts

@@ -620,6 +620,7 @@ export class EmDashClient {
 								options.onTokenRefresh!(accessToken, expiresIn);
 							}
 						: undefined,
+					fetch: createTransport({ interceptors: options.interceptors }).fetch,
 				}),
 			);
 		}

package/src/client/transport.ts

@@ -140,18 +140,22 @@ export function refreshInterceptor(options: {
 	refreshToken: string;
 	tokenEndpoint: string;
 	onTokenRefreshed?: (accessToken: string, refreshToken: string, expiresAt: string) => void;
+	fetch?: (request: Request) => Promise<Response>;
 }): Interceptor {
+	const send = options.fetch ?? baseFetch;
 	let refreshing: Promise<string | null> | null = null;
 
 	async function refresh(): Promise<string | null> {
-		const res = await globalThis.fetch(options.tokenEndpoint, {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({
-				grant_type: "refresh_token",
-				refresh_token: options.refreshToken,
+		const res = await send(
+			new Request(options.tokenEndpoint, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					grant_type: "refresh_token",
+					refresh_token: options.refreshToken,
+				}),
 			}),
-		});
+		);
 
 		if (!res.ok) return null;
 

package/src/components/EmDashImage.astro

@@ -22,6 +22,7 @@
  */
 import type { ImageValue, MediaValue } from "../fields/types.js";
 import type { HTMLAttributes } from "astro/types";
+import type { LocalImageProps } from "astro:assets";
 import { Image as AstroImage, getImage } from "astro:assets";
 import type { ImageEmbed } from "../media/types.js";
 import { getMediaProvider } from "../media/provider-loader.js";
@@ -52,6 +53,8 @@ interface Props extends Omit<
 	width?: number;
 	/** Override height (uses image.height by default) */
 	height?: number;
+	/** Output quality for Astro's image service or providers that support it. */
+	quality?: LocalImageProps["quality"];
 	/** Priority loading (disables lazy loading) */
 	priority?: boolean;
 	/** Render the LQIP placeholder as an inline background. Disable for strict CSP. */
@@ -64,6 +67,7 @@ const {
 	alt,
 	width,
 	height,
+	quality,
 	priority,
 	placeholder = true,
 	class: className,
@@ -105,7 +109,7 @@ function generateSrcset(
 	return responsiveWidths(maxWidth, originalWidth)
 		.map((w) => {
 			const h = aspectRatio ? Math.round(w / aspectRatio) : undefined;
-			return `${getSrc({ width: w, height: h })} ${w}w`;
+			return `${getSrc({ width: w, height: h, quality })} ${w}w`;
 		})
 		.join(", ");
 }
@@ -149,6 +153,7 @@ async function resolveImage(img: MediaValue): Promise<ResolvedImage> {
 				width: finalWidth,
 				height: finalHeight,
 				originalWidth: img.width,
+				quality,
 			});
 			if (optimized) {
 				src = optimized.src;
@@ -164,6 +169,7 @@ async function resolveImage(img: MediaValue): Promise<ResolvedImage> {
 				const result = provider.getEmbed(img, {
 					width: finalWidth,
 					height: finalHeight,
+					quality,
 				});
 				const embed = result instanceof Promise ? await result : result;
 				if (embed.type === "image") {
@@ -212,8 +218,12 @@ async function resolveImage(img: MediaValue): Promise<ResolvedImage> {
 	// 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 normalizedPlaceholder =
+		placeholderStyle && !placeholderStyle.endsWith(";")
+			? `${placeholderStyle};`
+			: placeholderStyle;
 	const generatedStyle = [
-		placeholderStyle,
+		normalizedPlaceholder,
 		objectPosition ? `object-position: ${objectPosition};` : "",
 	]
 		.filter(Boolean)
@@ -277,6 +287,7 @@ const astroClass = (variantClass: string | undefined) =>
 			alt={finalAlt}
 			width={resolved.width}
 			height={resolved.height}
+			quality={quality}
 			priority={priority}
 			layout="constrained"
 			loading={priority ? "eager" : "lazy"}
@@ -297,6 +308,7 @@ const astroClass = (variantClass: string | undefined) =>
 			alt={finalAlt}
 			width={resolvedDark.width}
 			height={resolvedDark.height}
+			quality={quality}
 			priority={priority}
 			layout="constrained"
 			loading={priority ? "eager" : "lazy"}

package/src/components/InlinePortableTextEditor.tsx

@@ -1244,7 +1244,10 @@ export function InlinePortableTextEditor({
 			Superscript,
 			Link.configure({
 				openOnClick: false,
-				HTMLAttributes: { class: "underline text-blue-600 dark:text-blue-400" },
+				// TipTap's Link extension defaults target to "_blank". Without an
+				// explicit override it would deep-merge that default in, causing every
+				// link created via setLink to serialize as blank: true.
+				HTMLAttributes: { target: null, class: "underline text-blue-600 dark:text-blue-400" },
 			}),
 			Placeholder.configure({
 				includeChildren: true,

package/src/components/inline-bubble-menu.tsx

@@ -262,6 +262,7 @@ function LinkToolbar({
 	});
 	const [shown, setShown] = React.useState(false);
 	const menuRef = React.useRef<HTMLDivElement>(null);
+	const surfaceRef = React.useRef<HTMLDivElement>(null);
 	const getReferencedVirtualElement = React.useCallback(() => {
 		const rect = linkLineRect(editor);
 		return rect && { getBoundingClientRect: () => rect, getClientRects: () => [rect] };
@@ -283,7 +284,7 @@ function LinkToolbar({
 			scrollTarget,
 			onShow: () => {
 				setShown(true);
-				playToolbarEntrance(menuRef.current?.firstElementChild);
+				playToolbarEntrance(surfaceRef.current);
 			},
 			onHide: () => setShown(false),
 		}),
@@ -314,38 +315,42 @@ function LinkToolbar({
 			updateDelay={0}
 			options={options}
 			shouldShow={shouldShow}
-			role="toolbar"
-			aria-label="Link options"
-			className="emdash-inline-ui-bar emdash-inline-ui-link-preview emdash-link-bubble-menu"
-			onKeyDown={(event) => handleToolbarKeyDown(event, editor)}
 		>
-			<ToolbarShownContext.Provider value={shown}>
-				<ToolbarTooltipGroup>
-					<Globe className="emdash-inline-ui-link-globe" aria-hidden="true" />
-					{SAFE_LINK_HREF_REGEX.test(href) ? (
-						<a
-							href={href}
-							target="_blank"
-							rel="noopener noreferrer"
-							dir="auto"
-							className="emdash-inline-ui-link-url"
-						>
-							{href.replace(LINK_DISPLAY_PREFIX_REGEX, "")}
-						</a>
-					) : (
-						<span dir="auto" className="emdash-inline-ui-link-url">
-							{href}
-						</span>
-					)}
-					<ToolbarSeparator />
-					<ToolbarButton label="Edit link" onClick={onEdit}>
-						<PencilSimple />
-					</ToolbarButton>
-					<ToolbarButton label="Remove link" onClick={() => removeLinkAtCaret(editor)}>
-						<LinkBreak />
-					</ToolbarButton>
-				</ToolbarTooltipGroup>
-			</ToolbarShownContext.Provider>
+			<div
+				ref={surfaceRef}
+				role="toolbar"
+				aria-label="Link options"
+				className="emdash-inline-ui-bar emdash-inline-ui-link-preview emdash-link-bubble-menu"
+				onKeyDown={(event) => handleToolbarKeyDown(event, editor)}
+			>
+				<ToolbarShownContext.Provider value={shown}>
+					<ToolbarTooltipGroup>
+						<Globe className="emdash-inline-ui-link-globe" aria-hidden="true" />
+						{SAFE_LINK_HREF_REGEX.test(href) ? (
+							<a
+								href={href}
+								target="_blank"
+								rel="noopener noreferrer"
+								dir="auto"
+								className="emdash-inline-ui-link-url"
+							>
+								{href.replace(LINK_DISPLAY_PREFIX_REGEX, "")}
+							</a>
+						) : (
+							<span dir="auto" className="emdash-inline-ui-link-url">
+								{href}
+							</span>
+						)}
+						<ToolbarSeparator />
+						<ToolbarButton label="Edit link" onClick={onEdit}>
+							<PencilSimple />
+						</ToolbarButton>
+						<ToolbarButton label="Remove link" onClick={() => removeLinkAtCaret(editor)}>
+							<LinkBreak />
+						</ToolbarButton>
+					</ToolbarTooltipGroup>
+				</ToolbarShownContext.Provider>
+			</div>
 		</BubbleMenu>
 	);
 }
@@ -458,6 +463,7 @@ export function InlineBubbleMenu({
 		setOpenMenu((current) => (open ? menu : current === menu ? null : current));
 	const [shown, setShown] = React.useState(false);
 	const menuRef = React.useRef<HTMLDivElement>(null);
+	const surfaceRef = React.useRef<HTMLDivElement>(null);
 	const editingLinkRef = React.useRef(editingLink);
 	editingLinkRef.current = editingLink;
 	useTabIntoToolbar(editor, uiRoot);
@@ -501,7 +507,7 @@ export function InlineBubbleMenu({
 			},
 			scrollTarget: scrollTarget ?? undefined,
 			onShow: () => {
-				const surface = menuRef.current?.firstElementChild;
+				const surface = surfaceRef.current;
 				setShown(true);
 				playToolbarEntrance(surface);
 				// Edit link opens the field while this toolbar is still hidden, too early to focus it.
@@ -618,72 +624,80 @@ export function InlineBubbleMenu({
 				updateDelay={120}
 				options={options}
 				shouldShow={shouldShow}
-				role="toolbar"
-				aria-label="Format selection"
-				className="emdash-inline-ui-bar emdash-bubble-menu"
-				onKeyDown={(event) => handleToolbarKeyDown(event, editor)}
 			>
-				<ToolbarShownContext.Provider value={shown}>
-					<ToolbarTooltipGroup>
-						{editingLink ? (
-							<LinkField editor={editor} linked={state.link} onDone={() => setEditingLink(false)} />
-						) : (
-							// Scrolls sideways, fading at the cut-off edge, when a narrow screen can't fit it.
-							<div className="emdash-inline-ui-toolbar">
-								{state.canTurnInto && (
-									<>
-										<ToolbarMenu
-											editor={editor}
-											label="Turn into"
-											placement="bottom-start"
-											open={openMenu === "turnInto"}
-											onOpenChange={(open) => toggleMenu("turnInto", open)}
-											trigger={
-												<>
-													<span className="emdash-inline-ui-trigger-label">
-														{activeType?.label ?? "Turn into"}
-													</span>
-													<CaretDown className="emdash-inline-ui-caret" aria-hidden="true" />
-												</>
-											}
-											groups={turnIntoGroups}
-										/>
-										<ToolbarSeparator />
-									</>
-								)}
-								<ToolbarButton
-									label={state.link ? "Edit link" : "Add link"}
-									active={state.link}
-									onClick={() => setEditingLink(true)}
-								>
-									<LinkIcon />
-								</ToolbarButton>
-								<ToolbarSeparator />
-								{INLINE_MARKS.map(({ mark, label, icon: MarkIcon }) => (
+				<div
+					ref={surfaceRef}
+					role="toolbar"
+					aria-label="Format selection"
+					className="emdash-inline-ui-bar emdash-bubble-menu"
+					onKeyDown={(event) => handleToolbarKeyDown(event, editor)}
+				>
+					<ToolbarShownContext.Provider value={shown}>
+						<ToolbarTooltipGroup>
+							{editingLink ? (
+								<LinkField
+									editor={editor}
+									linked={state.link}
+									onDone={() => setEditingLink(false)}
+								/>
+							) : (
+								// Scrolls sideways, fading at the cut-off edge, when a narrow screen can't fit it.
+								<div className="emdash-inline-ui-toolbar">
+									{state.canTurnInto && (
+										<>
+											<ToolbarMenu
+												editor={editor}
+												label="Turn into"
+												placement="bottom-start"
+												open={openMenu === "turnInto"}
+												onOpenChange={(open) => toggleMenu("turnInto", open)}
+												trigger={
+													<>
+														<span className="emdash-inline-ui-trigger-label">
+															{activeType?.label ?? "Turn into"}
+														</span>
+														<CaretDown className="emdash-inline-ui-caret" aria-hidden="true" />
+													</>
+												}
+												groups={turnIntoGroups}
+											/>
+											<ToolbarSeparator />
+										</>
+									)}
 									<ToolbarButton
-										key={mark}
-										label={label}
-										active={state[mark]}
-										onClick={() => editor.chain().focus().toggleMark(mark).run()}
+										label={state.link ? "Edit link" : "Add link"}
+										active={state.link}
+										onClick={() => setEditingLink(true)}
 									>
-										<MarkIcon />
+										<LinkIcon />
 									</ToolbarButton>
-								))}
-								<ToolbarSeparator />
-								<ToolbarMenu
-									editor={editor}
-									label="More formatting"
-									placement="bottom-end"
-									iconOnly
-									open={openMenu === "more"}
-									onOpenChange={(open) => toggleMenu("more", open)}
-									trigger={<DotsThree weight="bold" aria-hidden="true" />}
-									groups={moreGroups}
-								/>
-							</div>
-						)}
-					</ToolbarTooltipGroup>
-				</ToolbarShownContext.Provider>
+									<ToolbarSeparator />
+									{INLINE_MARKS.map(({ mark, label, icon: MarkIcon }) => (
+										<ToolbarButton
+											key={mark}
+											label={label}
+											active={state[mark]}
+											onClick={() => editor.chain().focus().toggleMark(mark).run()}
+										>
+											<MarkIcon />
+										</ToolbarButton>
+									))}
+									<ToolbarSeparator />
+									<ToolbarMenu
+										editor={editor}
+										label="More formatting"
+										placement="bottom-end"
+										iconOnly
+										open={openMenu === "more"}
+										onOpenChange={(open) => toggleMenu("more", open)}
+										trigger={<DotsThree weight="bold" aria-hidden="true" />}
+										groups={moreGroups}
+									/>
+								</div>
+							)}
+						</ToolbarTooltipGroup>
+					</ToolbarShownContext.Provider>
+				</div>
 			</BubbleMenu>
 			<InlineImageToolbar
 				editor={editor}