@coywolf/emdash 0.0.0-stage → 0.35.14

package/src/files/card.ts

@@ -0,0 +1,231 @@
+/**
+ * Download card markup and CSS, shared by the coywolf-file block
+ * (src/astro/files/FileCard.astro) and the live preview on the Files
+ * settings tab, so the preview is exactly what the site prints. No imports
+ * beyond format.ts, so `node --test` can load it.
+ */
+import { extensionOf, formatDate, formatSize, iconFor, safeColor } from "./format.js";
+
+export interface FileCardData {
+	title: string;
+	description: string;
+	/** File name, for the type badge. */
+	name: string;
+	size: number;
+	uploadedAt: string;
+	/** Download link (site-relative). */
+	href: string;
+	/** Absolute download URL for Copy link. */
+	absolute: string;
+}
+
+export interface FileCardOptions {
+	scheme: "auto" | "light" | "dark";
+	/** Hex accent, or "" for the default. */
+	accent: string;
+	showIcon?: boolean;
+	showDescription?: boolean;
+	showMeta?: boolean;
+	showDownload?: boolean;
+	showCopyLink?: boolean;
+}
+
+const escapeHtml = (text: string) =>
+	String(text).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] as string);
+
+const ICON_DOWNLOAD =
+	'<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" x2="12" y1="15" y2="3" /></svg>';
+const ICON_LINK =
+	'<svg class="cw-file__ic-link" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>';
+const ICON_CHECK =
+	'<svg class="cw-file__ic-check" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5" /></svg>';
+
+/** "PDF · 2.4 MB · Uploaded Mar 4, 2026". */
+export function fileMeta(name: string, size: number, uploadedAt: string): string {
+	const ext = extensionOf(name);
+	const uploaded = formatDate(uploadedAt);
+	return [ext.toUpperCase(), size > 0 ? formatSize(size) : "", uploaded ? `Uploaded ${uploaded}` : ""].filter(Boolean).join(" · ");
+}
+
+/** The card's HTML. Options left undefined count as on, like the block's toggles. */
+export function renderFileCardHtml(card: FileCardData, o: FileCardOptions): string {
+	const on = (value: boolean | undefined) => value !== false;
+	const icon = iconFor(extensionOf(card.name));
+	const title = escapeHtml(card.title);
+	const meta = fileMeta(card.name, card.size, card.uploadedAt);
+	const scheme = ["auto", "light", "dark"].includes(o.scheme) ? o.scheme : "auto";
+	const accent = safeColor(o.accent);
+	const parts: string[] = [];
+	if (on(o.showIcon))
+		parts.push(
+			`<div class="cw-file__icon"><svg width="40" height="48" viewBox="0 0 40 48" fill="none" aria-hidden="true" focusable="false"><path d="M10 3 h14 l10 10 v28 a4 4 0 0 1 -4 4 H10 a4 4 0 0 1 -4 -4 V7 a4 4 0 0 1 4 -4 z" fill="var(--cw-file-page)" stroke="var(--cw-file-stroke)" stroke-width="1.5" /><path d="M24 3 L24 13 L34 13" fill="var(--cw-file-fold)" stroke="var(--cw-file-stroke)" stroke-width="1.5" stroke-linejoin="round" /><rect x="2" y="26" width="27" height="15" rx="3.5" fill="${escapeHtml(icon.color)}" /><text x="15.5" y="36.5" text-anchor="middle" font-size="8.5" font-weight="700" fill="#fff" style="letter-spacing:0.02em">${escapeHtml(icon.label)}</text></svg></div>`,
+		);
+	parts.push(
+		`<div class="cw-file__body"><div class="cw-file__name">${title}</div>${
+			on(o.showDescription) && card.description ? `<div class="cw-file__desc">${escapeHtml(card.description)}</div>` : ""
+		}${on(o.showMeta) && meta ? `<div class="cw-file__meta">${escapeHtml(meta)}</div>` : ""}</div>`,
+	);
+	const actions = [
+		on(o.showDownload)
+			? `<a class="cw-file__btn cw-file__download" href="${escapeHtml(card.href)}" download aria-label="Download ${title}" title="Download">${ICON_DOWNLOAD}</a>`
+			: "",
+		on(o.showCopyLink)
+			? `<button type="button" class="cw-file__btn cw-file__copy" data-cw-file-url="${escapeHtml(card.absolute)}" aria-label="Copy download link for ${title}" title="Copy link">${ICON_LINK}${ICON_CHECK}</button>`
+			: "",
+	].join("");
+	parts.push(`<div class="cw-file__actions">${actions}</div>`);
+	parts.push('<span class="cw-file__sr" role="status" aria-live="polite"></span>');
+	return `<div class="cw-file cw-file--${scheme}"${accent ? ` style="--cw-file-accent:${accent}"` : ""}>${parts.join("")}</div>`;
+}
+
+/** Sample file for the admin preview. */
+export const SAMPLE_FILE: FileCardData = {
+	title: "Annual report 2026.pdf",
+	description: "Our year in numbers, with highlights from every team.",
+	name: "annual-report-2026.pdf",
+	size: 2_516_582,
+	uploadedAt: "2026-03-04T12:00:00Z",
+	href: "#",
+	absolute: "https://example.com/download/sample/annual-report-2026.pdf",
+};
+
+export const FILE_CSS = `.cw-file {
+	--cw-file-bg: #fff;
+	--cw-file-border: #e6e6e6;
+	--cw-file-text: #1e2a3b;
+	--cw-file-muted: #5b6472;
+	--cw-file-hover: rgba(0, 0, 0, 0.06);
+	--cw-file-accent: #007392;
+	--cw-file-page: #fff;
+	--cw-file-stroke: #d0d5dd;
+	--cw-file-fold: #eaecf0;
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	margin: 0 0 1.25em;
+	padding: 12px 14px;
+	border: 1px solid var(--cw-file-border);
+	border-radius: 12px;
+	background: var(--cw-file-bg);
+	color: var(--cw-file-text);
+}
+.cw-file--dark {
+	--cw-file-bg: #1b1b1c;
+	--cw-file-border: #343437;
+	--cw-file-text: #d5d8dc;
+	--cw-file-muted: #9ea3a8;
+	--cw-file-hover: rgba(255, 255, 255, 0.08);
+	--cw-file-accent: #21a1c4;
+	--cw-file-page: #e7eaee;
+	--cw-file-stroke: #aab1ba;
+	--cw-file-fold: #d0d5dd;
+}
+@media (prefers-color-scheme: dark) {
+	.cw-file--auto {
+		--cw-file-bg: #1b1b1c;
+		--cw-file-border: #343437;
+		--cw-file-text: #d5d8dc;
+		--cw-file-muted: #9ea3a8;
+		--cw-file-hover: rgba(255, 255, 255, 0.08);
+		--cw-file-accent: #21a1c4;
+		--cw-file-page: #e7eaee;
+		--cw-file-stroke: #aab1ba;
+		--cw-file-fold: #d0d5dd;
+	}
+}
+.cw-file__icon {
+	flex-shrink: 0;
+	line-height: 0;
+}
+.cw-file__icon svg {
+	display: block;
+	width: 40px;
+	height: 48px;
+}
+.cw-file__body {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+.cw-file__name {
+	font-weight: 500;
+	line-height: 1.35;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.cw-file__desc,
+.cw-file__meta {
+	margin-top: 2px;
+	font-size: 0.875em;
+	line-height: 1.4;
+	color: var(--cw-file-muted);
+}
+.cw-file__meta {
+	font-variant-numeric: tabular-nums;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.cw-file__actions {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+.cw-file__btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--cw-file-muted);
+	cursor: pointer;
+	text-decoration: none;
+	box-shadow: none;
+	appearance: none;
+	transition: background 0.15s ease, color 0.15s ease;
+}
+.cw-file__btn:hover {
+	background: var(--cw-file-hover);
+	color: var(--cw-file-text);
+}
+.cw-file__btn:focus-visible {
+	outline: 2px solid var(--cw-file-accent);
+	outline-offset: 2px;
+}
+.cw-file__download,
+.cw-file__copy.is-copied {
+	color: var(--cw-file-accent);
+}
+.cw-file__btn svg {
+	display: block;
+}
+.cw-file__copy .cw-file__ic-check,
+.cw-file__copy.is-copied .cw-file__ic-link {
+	display: none;
+}
+.cw-file__copy.is-copied .cw-file__ic-check {
+	display: block;
+}
+.cw-file__sr {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+	.cw-file__btn {
+		transition: none;
+	}
+}`;

package/src/files/counts.ts

@@ -0,0 +1,60 @@
+/**
+ * Batched download counts. Counts made in one isolate within `delayMs` are
+ * written together in one D1 batch after the response. The flush loop drains
+ * `pending` until it's empty and clears `flushing` in the same synchronous
+ * step, so a count either lands in a running flush or starts a new one; none
+ * is left behind on a finished promise. No imports, so `node --test` can
+ * load this file directly.
+ */
+
+/** The slice of D1 the counter uses (stubbed in tests). */
+export interface CountDb {
+	prepare(sql: string): { bind(...values: unknown[]): unknown };
+	batch(statements: unknown[]): Promise<unknown>;
+}
+
+const UPSERT = `INSERT INTO _plugin_storage (plugin_id, collection, id, data, revision, created_at, updated_at)
+	 VALUES (?1, ?2, ?3, json_object('downloads', ?4, 'lastDownload', ?5), ?6, ?5, ?5)
+	 ON CONFLICT (plugin_id, collection, id) DO UPDATE SET
+	   data = json_set(data, '$.downloads', COALESCE(json_extract(data, '$.downloads'), 0) + ?4, '$.lastDownload', ?5),
+	   revision = ?6, updated_at = ?5`;
+
+export function createDownloadCounter(pluginId: string, collection: string, delayMs = 1_000) {
+	const pending = new Map<string, number>();
+	let flushing: Promise<void> | null = null;
+
+	async function write(db: CountDb): Promise<void> {
+		const batch = [...pending.entries()];
+		pending.clear();
+		const now = new Date().toISOString();
+		await db.batch(batch.map(([id, n]) => db.prepare(UPSERT).bind(pluginId, collection, id, n, now, crypto.randomUUID())));
+	}
+
+	async function drain(db: CountDb): Promise<void> {
+		await new Promise((resolve) => setTimeout(resolve, delayMs));
+		while (pending.size) {
+			try {
+				await write(db);
+			} catch (error) {
+				console.error("coywolf-pack files: could not record downloads", error);
+			}
+		}
+		flushing = null; // Same tick as the empty check above.
+	}
+
+	return {
+		/** Count one download of `id`; `waitUntil` keeps the shared flush alive past this response. */
+		count(db: CountDb, id: string, waitUntil: (p: Promise<unknown>) => void): void {
+			pending.set(id, (pending.get(id) ?? 0) + 1);
+			flushing ??= drain(db);
+			waitUntil(flushing);
+		},
+		/** For tests. */
+		get pendingSize() {
+			return pending.size;
+		},
+		get idle() {
+			return flushing === null;
+		},
+	};
+}

package/src/files/export.ts

@@ -0,0 +1,44 @@
+/**
+ * Files CSV export: an inventory of download files with their links, sizes,
+ * download counts and where each is used. Pure, so the admin page and the
+ * tests share it.
+ */
+import { type CsvCell, toCsv } from "../core/csv.js";
+
+export interface ExportFile {
+	id: string;
+	source: string;
+	status: string;
+	name: string;
+	type: string;
+	size: number;
+	uploadedAt: string | null;
+	url: string | null;
+	downloads: number;
+	lastDownload: string | null;
+	usedIn: Array<{ collection: string; id: string; title: string }>;
+}
+
+export const FILE_CSV_COLUMNS = ["name", "download_url", "type", "size_bytes", "source", "status", "uploaded_at", "downloads", "last_download", "entries", "used_in", "id"] as const;
+
+/** Spreadsheet-safe CSV. `origin` turns site-relative download links into full URLs. */
+export function filesToCsv(files: ExportFile[], origin = ""): string {
+	const rows: CsvCell[][] = [[...FILE_CSV_COLUMNS]];
+	for (const f of files) {
+		rows.push([
+			f.name,
+			f.url ? `${origin}${f.url}` : "",
+			f.type,
+			f.size,
+			f.source === "upload" ? "large upload" : f.source === "media" ? "media library" : "missing",
+			f.status,
+			f.uploadedAt ?? "",
+			f.downloads,
+			f.lastDownload ?? "",
+			f.usedIn.length,
+			f.usedIn.map((u) => `${u.title || u.id} (${u.collection}/${u.id})`).join(" | "),
+			f.id,
+		]);
+	}
+	return toCsv(rows, { guard: true });
+}

package/src/files/format.ts

@@ -0,0 +1,163 @@
+/**
+ * Pure helpers shared by the download card, the download middleware and the
+ * admin page: file-type badges, sizes, safe names, and Content-Disposition.
+ * No imports, so `node --test` can load this file directly.
+ */
+
+/** Badge color per extension (the palette Coywolf Files uses in WordPress). */
+const ICON_COLORS: Record<string, string> = {};
+const FAMILIES: Array<[string, string[]]> = [
+	["#B42318", ["pdf"]],
+	["#155EEF", ["doc", "docx", "rtf", "odt", "pages"]],
+	["#475467", ["txt", "md"]],
+	["#067647", ["xls", "xlsx", "csv", "ods", "numbers"]],
+	["#C4320A", ["ppt", "pptx", "key", "odp"]],
+	["#C11574", ["png", "jpg", "jpeg", "gif", "webp", "avif", "svg", "heic", "bmp", "tif", "tiff"]],
+	["#93264A", ["mp4", "mov", "webm", "mkv", "avi", "m4v"]],
+	["#026AA2", ["mp3", "wav", "m4a", "aac", "ogg", "flac"]],
+	["#6941E0", ["zip", "rar", "7z", "tar", "gz", "tgz", "bz2", "xz", "dmg", "iso"]],
+	["#B54708", ["json", "js", "jsx", "ts", "tsx", "html", "css", "xml", "yml", "yaml"]],
+];
+for (const [color, exts] of FAMILIES) for (const ext of exts) ICON_COLORS[ext] = color;
+
+export const DEFAULT_ICON_COLOR = "#667085";
+
+/** Lowercase extension of a file name, without the dot ("" when there is none). */
+export function extensionOf(name: string): string {
+	const match = /\.([a-z0-9]+)$/i.exec(String(name ?? "").trim());
+	return match ? match[1].toLowerCase() : "";
+}
+
+/** Badge color and label (at most four characters) for an extension. */
+export function iconFor(ext: string): { color: string; label: string } {
+	const clean = String(ext ?? "")
+		.toLowerCase()
+		.replace(/[^a-z0-9]/g, "");
+	return { color: ICON_COLORS[clean] ?? DEFAULT_ICON_COLOR, label: clean ? clean.toUpperCase().slice(0, 4) : "FILE" };
+}
+
+/** 1024-based size with one decimal, e.g. "2.4 MB". */
+export function formatSize(bytes: number): string {
+	const n = Math.max(0, Math.floor(Number(bytes) || 0));
+	if (n < 1024) return `${n} B`;
+	const units = ["KB", "MB", "GB", "TB", "PB"];
+	let value = n / 1024;
+	let i = 0;
+	while (value >= 1024 && i < units.length - 1) {
+		value /= 1024;
+		i++;
+	}
+	return `${value.toFixed(1)} ${units[i]}`;
+}
+
+/** "Mar 4, 2026" (UTC, so server and build output agree). */
+export function formatDate(iso: string): string {
+	const date = new Date(iso);
+	if (Number.isNaN(date.getTime())) return "";
+	return new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeZone: "UTC" }).format(date);
+}
+
+/**
+ * A file name that is safe in an object key and a URL path segment: ASCII
+ * letters, digits, dot, dash and underscore. Keeps the extension.
+ */
+export function safeFilename(name: string): string {
+	const base = String(name ?? "")
+		.split(/[\\/]/)
+		.pop()!
+		.normalize("NFKD")
+		.replace(/[\u0300-\u036f]/g, "")
+		.replace(/[^A-Za-z0-9._-]+/g, "-")
+		.replace(/-{2,}/g, "-")
+		.replace(/-+\./g, ".")
+		.replace(/^[-.]+|[-.]+$/g, "");
+	return (base || "file").slice(0, 120);
+}
+
+/** RFC 3986 percent-encoding as RFC 5987 requires (attr-char only). */
+function encodeRfc5987(value: string): string {
+	return encodeURIComponent(value).replace(/['()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
+}
+
+/**
+ * Content-Disposition for a download: an ASCII `filename` fallback plus a
+ * UTF-8 `filename*` (RFC 6266 / RFC 5987) when the name isn't plain ASCII.
+ */
+export function contentDisposition(filename: string, type: "attachment" | "inline" = "attachment"): string {
+	const name = String(filename ?? "")
+		.replace(/[\r\n\t\0]/g, " ")
+		.split(/[\\/]/)
+		.pop()!
+		.trim() || "download";
+	const fallback = name
+		.normalize("NFKD")
+		.replace(/[\u0300-\u036f]/g, "")
+		.replace(/[^\x20-\x7e]/g, "_")
+		.replace(/["\\]/g, "_")
+		.replace(/%/g, "_");
+	if (fallback === name) return `${type}; filename="${fallback}"`;
+	return `${type}; filename="${fallback}"; filename*=UTF-8''${encodeRfc5987(name)}`;
+}
+
+/** Download URL path: /<base>/<id>/<filename>. */
+export function downloadPath(base: string, id: string, filename: string): string {
+	return `/${base}/${encodeURIComponent(id)}/${encodeURIComponent(safeFilename(filename))}`;
+}
+
+/** A valid base slug: one lowercase path segment. */
+export function normalizeBase(value: unknown): string {
+	const slug = String(value ?? "")
+		.trim()
+		.replace(/^\/+|\/+$/g, "")
+		.toLowerCase();
+	return /^[a-z0-9][a-z0-9_-]{0,63}$/.test(slug) && !slug.startsWith("_") ? slug : "download";
+}
+
+/** A #rgb / #rrggbb accent color, or "" when the value isn't one. */
+export function safeColor(value: unknown): string {
+	const color = String(value ?? "").trim();
+	return /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(color) ? color : "";
+}
+
+/** Large-upload ids: "f" + 15 lowercase base-32 characters. Media library ids are ULIDs (26 uppercase). */
+export const UPLOAD_ID = /^f[a-z2-7]{15}$/;
+export const MEDIA_ID = /^[0-9A-HJKMNP-TV-Z]{26}$/;
+/**
+ * Files moved from Coywolf Files for WordPress keep their WordPress id (20
+ * lowercase hex characters), so old download links and imported blocks still
+ * resolve. They're stored like large uploads.
+ */
+export const WORDPRESS_FILE_ID = /^[0-9a-f]{20}$/;
+
+/** Ids stored as large uploads (plugin storage) rather than media library items. */
+export function isUploadId(id: string): boolean {
+	return UPLOAD_ID.test(id) || WORDPRESS_FILE_ID.test(id);
+}
+
+export function isFileId(id: string): boolean {
+	return isUploadId(id) || MEDIA_ID.test(id);
+}
+
+export function newUploadId(): string {
+	const alphabet = "abcdefghijklmnopqrstuvwxyz234567";
+	const bytes = crypto.getRandomValues(new Uint8Array(15));
+	let id = "f";
+	for (const b of bytes) id += alphabet[b & 31];
+	return id;
+}
+
+/** Parse /<base>/<id>[/<filename>] (null when it isn't a download URL). */
+export function parseDownloadPath(pathname: string, base: string): { id: string; filename: string | null } | null {
+	const prefix = `/${base}/`;
+	if (!pathname.startsWith(prefix)) return null;
+	const rest = pathname.slice(prefix.length).split("/");
+	if (rest.length > 2 || !rest[0]) return null;
+	let id: string;
+	try {
+		id = decodeURIComponent(rest[0]);
+	} catch {
+		return null;
+	}
+	if (!isFileId(id)) return null;
+	return { id, filename: rest[1] ? rest[1] : null };
+}