@deckbuilderkit/editor 0.0.0-stage → 0.1.0

package/src/http.ts

@@ -0,0 +1,251 @@
+import {
+  HTTP_TIMEOUT_MAX_MS,
+  HTTP_TIMEOUT_MIN_MS,
+  type HttpAuthKind,
+  type HttpMethod,
+  type HttpRequestDraft,
+  type HttpRequestSpec,
+  type HttpResponseInfo,
+} from '@deckbuilderkit/server-core/protocol';
+import type { Lang } from './languages';
+
+import type { HttpHeaderDraft } from '@deckbuilderkit/server-core/protocol';
+
+export type { HttpHeaderDraft, HttpRequestDraft } from '@deckbuilderkit/server-core/protocol';
+
+/** The timeout field's text (seconds) as whole-second milliseconds within the protocol bounds; undefined for empty or not a number. */
+export function timeoutFromSeconds(text: string): number | undefined {
+  const n = Number(text);
+  if (text.trim() === '' || !Number.isFinite(n)) return undefined;
+  return Math.min(HTTP_TIMEOUT_MAX_MS, Math.max(HTTP_TIMEOUT_MIN_MS, Math.round(n) * 1000));
+}
+
+/** Headers as "Name: Value" lines; disabled ones are prefixed with "// ". */
+export function headersToText(headers: HttpHeaderDraft[]): string {
+  return headers.map((h) => `${h.enabled ? '' : '// '}${h.name}: ${h.value}`).join('\n');
+}
+
+export function headersFromText(text: string): HttpHeaderDraft[] {
+  const headers: HttpHeaderDraft[] = [];
+  for (const raw of text.split(/\r?\n/)) {
+    let line = raw.trim();
+    const enabled = !line.startsWith('//');
+    if (!enabled) line = line.slice(2).trim();
+    if (line === '') continue;
+    const colon = line.indexOf(':');
+    headers.push(
+      colon < 0
+        ? { name: line, value: '', enabled }
+        : { name: line.slice(0, colon).trim(), value: line.slice(colon + 1).trim(), enabled },
+    );
+  }
+  return headers;
+}
+
+const XML_TOKEN = /<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|<\?[\s\S]*?\?>|<![\s\S]*?>|<\/?[A-Za-z_][^>]*>|[^<]+|</g;
+
+/**
+ * Re-indents XML with two spaces. Text-only elements stay on one line and whitespace-only text between
+ * tags is dropped; throws on unbalanced tags. Text nodes are trimmed, which is fine for data but not for mixed content.
+ */
+export function formatXml(source: string): string {
+  const tokens = source.match(XML_TOKEN) ?? [];
+  const lines: string[] = [];
+  const open: string[] = [];
+  const nameOf = (tag: string) => /^<\/?([^\s/>]+)/.exec(tag)![1];
+  for (let i = 0; i < tokens.length; i++) {
+    const tok = tokens[i];
+    const pad = '  '.repeat(open.length);
+    if (tok === '<') throw new Error('Unexpected "<"');
+    if (!tok.startsWith('<')) {
+      const text = tok.trim();
+      if (text) lines.push(pad + text);
+    } else if (tok.startsWith('</')) {
+      const name = nameOf(tok);
+      if (open.pop() !== name) throw new Error(`Unexpected closing tag </${name}>`);
+      lines.push('  '.repeat(open.length) + tok);
+    } else if (/^<[A-Za-z_]/.test(tok) && !tok.endsWith('/>')) {
+      const next = tokens[i + 1];
+      const after = tokens[i + 2];
+      if (next !== undefined && !next.startsWith('<') && after?.startsWith('</') && nameOf(after) === nameOf(tok)) {
+        lines.push(pad + tok + next.trim() + after);
+        i += 2;
+      } else {
+        open.push(nameOf(tok));
+        lines.push(pad + tok);
+      }
+    } else {
+      lines.push(pad + tok);
+    }
+  }
+  if (open.length) throw new Error(`Unclosed tag <${open[open.length - 1]}>`);
+  return lines.join('\n');
+}
+
+export interface QueryParam {
+  name: string;
+  value: string;
+}
+
+/** The URL split at the query: text before `?`, the raw query (undefined without `?`) and the `#fragment`. */
+function splitQuery(url: string): { base: string; query?: string; hash: string } {
+  const h = url.indexOf('#');
+  const hash = h < 0 ? '' : url.slice(h);
+  const rest = h < 0 ? url : url.slice(0, h);
+  const q = rest.indexOf('?');
+  return q < 0 ? { base: rest, hash } : { base: rest.slice(0, q), query: rest.slice(q + 1), hash };
+}
+
+/** The query of `url` as raw (not decoded) name/value pairs; empty segments are skipped. */
+export function queryParams(url: string): QueryParam[] {
+  const { query } = splitQuery(url);
+  if (!query) return [];
+  return query
+    .split('&')
+    .filter((s) => s !== '')
+    .map((s) => {
+      const eq = s.indexOf('=');
+      return eq < 0 ? { name: s, value: '' } : { name: s.slice(0, eq), value: s.slice(eq + 1) };
+    });
+}
+
+const escapeQueryPart = (s: string, isName: boolean) =>
+  s.replace(isName ? /[&#=]/g : /[&#]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
+
+/** `url` with its query replaced by `params`; everything else (scheme-less, `{{vars}}`, fragment) stays as typed. */
+export function withQueryParams(url: string, params: QueryParam[]): string {
+  const { base, hash } = splitQuery(url);
+  const query = params
+    .filter((p) => p.name !== '' || p.value !== '')
+    .map((p) => escapeQueryPart(p.name, true) + (p.value === '' ? '' : `=${escapeQueryPart(p.value, false)}`))
+    .join('&');
+  return query === '' ? base + hash : `${base}?${query}${hash}`;
+}
+
+export interface AuthParts {
+  kind?: HttpAuthKind;
+  user: string;
+  password: string;
+  token: string;
+}
+
+const toBase64 = (s: string) => btoa(Array.from(new TextEncoder().encode(s), (b) => String.fromCharCode(b)).join(''));
+
+function fromBase64(s: string): string | undefined {
+  try {
+    return new TextDecoder('utf-8', { fatal: true }).decode(Uint8Array.from(atob(s), (c) => c.charCodeAt(0)));
+  } catch {
+    return undefined;
+  }
+}
+
+/** The Authorization header value for `kind`: `Basic base64(user:password)` or `Bearer token`; '' when the fields are empty. */
+export function authHeaderValue(kind: HttpAuthKind, parts: Pick<AuthParts, 'user' | 'password' | 'token'>): string {
+  if (kind === 'bearer') return parts.token.trim() === '' ? '' : `Bearer ${parts.token.trim()}`;
+  return parts.user === '' && parts.password === '' ? '' : `Basic ${toBase64(`${parts.user}:${parts.password}`)}`;
+}
+
+/** Splits an Authorization value back into the Auth tab's fields; `kind` is undefined when it is neither Basic nor Bearer. */
+export function parseAuthValue(value: string): AuthParts {
+  const empty = { user: '', password: '', token: '' };
+  const m = /^(\w+)\s+(.*)$/s.exec(value.trim());
+  if (!m) return empty;
+  const scheme = m[1].toLowerCase();
+  if (scheme === 'bearer') return { ...empty, kind: 'bearer', token: m[2] };
+  if (scheme !== 'basic') return empty;
+  const decoded = fromBase64(m[2].trim());
+  if (decoded === undefined) return { ...empty, kind: 'basic' };
+  const colon = decoded.indexOf(':');
+  return colon < 0
+    ? { ...empty, kind: 'basic', user: decoded }
+    : { ...empty, kind: 'basic', user: decoded.slice(0, colon), password: decoded.slice(colon + 1) };
+}
+
+/** True when an enabled header named Authorization (any case) is set by hand; it wins over the Auth tab. */
+export const hasAuthHeader = (headers: HttpHeaderDraft[]): boolean =>
+  headers.some((h) => h.enabled && h.name.trim().toLowerCase() === 'authorization');
+
+export const emptyDraft =(): HttpRequestDraft => ({ method: 'GET', url: '', headers: [], body: '', bodyLang: 'json' });
+
+/** GET and HEAD requests carry no body. */
+export const sendsBody = (method: HttpMethod): boolean => method !== 'GET' && method !== 'HEAD';
+
+export function draftToSpec(draft: HttpRequestDraft): HttpRequestSpec {
+  const headers: Array<[string, string]> = draft.headers
+    .filter((h) => h.enabled && h.name.trim() !== '')
+    .map((h) => [h.name.trim(), h.value]);
+  const spec: HttpRequestSpec = { method: draft.method, url: draft.url, headers };
+  if (draft.bodyLang === 'form' || draft.bodyLang === 'multipart') {
+    const form = (draft.form ?? []).filter((f) => f.name.trim() !== '').map((f): [string, string] => [f.name.trim(), f.value]);
+    if (sendsBody(draft.method) && form.length) {
+      spec.bodyKind = draft.bodyLang;
+      spec.form = form;
+    }
+  } else if (sendsBody(draft.method) && draft.body !== '') {
+    spec.body = draft.body;
+    if (draft.bodyLang !== 'text' && !headers.some(([name]) => name.toLowerCase() === 'content-type')) {
+      headers.push(['Content-Type', draft.bodyLang === 'xml' ? 'application/xml' : 'application/json']);
+    }
+  }
+  if (draft.timeoutMs !== undefined) spec.timeoutMs = draft.timeoutMs;
+  if (draft.insecure !== undefined) spec.insecure = draft.insecure;
+  if (draft.followRedirects !== undefined) spec.followRedirects = draft.followRedirects;
+  return spec;
+}
+
+const shq = (s: string) => `'${s.replace(/'/g, `'\\''`)}'`;
+
+/**
+ * The request as a multi-line cURL command for a POSIX shell. `auth` is the Authorization value
+ * from the Auth tab (Basic → `-u user:pass`, otherwise a header); an Authorization header in the
+ * spec wins over it. Form rows become `--data-urlencode 'n=v'`, multipart rows `-F 'n=v'`
+ * (`--form-string` when the value starts with `@`/`<` or holds `;`, which `-F` would read as a file or part option).
+ */
+export function toCurl(spec: HttpRequestSpec, auth?: string): string {
+  const parts = [`curl ${shq(spec.url)}`];
+  const form = spec.bodyKind && spec.form?.length ? spec.form : undefined;
+  const bodyless = spec.method === 'GET' && spec.body === undefined && !form;
+  if (!bodyless) parts.push(`-X ${spec.method}`);
+  if (spec.followRedirects !== false) parts.push('-L');
+  if (spec.insecure) parts.push('--insecure');
+  if (spec.timeoutMs !== undefined) parts.push(`--max-time ${Math.round(spec.timeoutMs / 1000)}`);
+  if (auth && !spec.headers.some(([name]) => name.toLowerCase() === 'authorization')) {
+    const parsed = parseAuthValue(auth);
+    const basic = parsed.kind === 'basic' && authHeaderValue('basic', parsed) === auth.trim();
+    parts.push(basic ? `-u ${shq(`${parsed.user}:${parsed.password}`)}` : `-H ${shq(`Authorization: ${auth.trim()}`)}`);
+  }
+  for (const [name, value] of spec.headers) parts.push(`-H ${shq(`${name}: ${value}`)}`);
+  if (form && spec.bodyKind === 'form') for (const [name, value] of form) parts.push(`--data-urlencode ${shq(`${name}=${value}`)}`);
+  else if (form) for (const [name, value] of form) parts.push(`${/^[@<]|;/.test(value) ? '--form-string' : '-F'} ${shq(`${name}=${value}`)}`);
+  else if (spec.body !== undefined) parts.push(`--data-raw ${shq(spec.body)}`);
+  return parts.join(' \\\n  ');
+}
+
+export function statusTone(status: number): 'ok' | 'info' | 'warn' | 'err' {
+  if (status >= 200 && status < 300) return 'ok';
+  if (status >= 300 && status < 400) return 'info';
+  if (status >= 400 && status < 500) return 'warn';
+  return 'err';
+}
+
+export function formatMs(n: number): string {
+  if (n < 1000) return `${Math.round(n)} ms`;
+  const s = n / 1000;
+  return `${s >= 10 ? Math.round(s) : Math.round(s * 10) / 10} s`;
+}
+
+export type BodyView =
+  | { kind: 'json'; value: unknown; pretty: string }
+  | { kind: 'text'; lang: Lang; text: string }
+  | { kind: 'binary' };
+
+export function bodyView(info: Pick<HttpResponseInfo, 'binary' | 'text' | 'contentType'>): BodyView {
+  if (info.binary || info.text === undefined) return { kind: 'binary' };
+  try {
+    const value: unknown = JSON.parse(info.text);
+    return { kind: 'json', value, pretty: JSON.stringify(value, null, 2) };
+  } catch {
+    const markdown = info.contentType.split(';')[0].trim().toLowerCase() === 'text/markdown';
+    return { kind: 'text', lang: markdown ? 'markdown' : 'text', text: info.text };
+  }
+}

package/src/import-warning.ts

@@ -0,0 +1,8 @@
+import { tryT } from '@deckbuilderkit/ui';
+
+/** `<code>:<argument>` from the parser → translated text; unknown codes show as they are. */
+export const warningText = (warning: string) => {
+  const colon = warning.indexOf(':');
+  const code = colon < 0 ? warning : warning.slice(0, colon);
+  return tryT(`rest.import.warn.${code}`, { arg: colon < 0 ? '' : warning.slice(colon + 1) }) ?? warning;
+};

package/src/index.ts

@@ -0,0 +1,56 @@
+export * from './ArchiveView';
+export * from './CodeEditor';
+export * from './CodeView';
+export * from './DiffView';
+export * from './FilePreview';
+export * from './http';
+export { HEX_LIMIT } from './HexView';
+export type { SqliteContent } from './SqliteView';
+export * from './http-import';
+export * from './curl-file';
+export * from './import-warning';
+export * from './RequestEditor';
+export * from './http-client';
+export * from './ResponseView';
+export * from './languages';
+export { DEFAULT_FORMAT_OPTIONS, FORMAT_OPTION_META, formatSql, type FormatOptionMeta, type SqlFormatOptions } from './sql/format';
+export * from './markdown';
+export * from './MarkdownEditor';
+export * from './MarkdownView';
+export * from './text-save';
+export * from './SqlSteps';
+export * from './SqlGraph';
+export * from './sqlProblems';
+export {
+  sqlOutline,
+  type SqlJoin,
+  type SqlJoinType,
+  type SqlOutline,
+  type SqlRead,
+  type SqlSetOp,
+  type SqlStatementKind,
+  type SqlStatementOutline,
+  type SqlStep,
+} from './sql/outline';
+export { SQL_LINT_SEVERITY, sqlLint, type SqlLintCode, type SqlLintSeverity, type SqlProblem } from './sql/lint';
+export { splitStatements, statementAt, type Statement } from './sql/statements';
+export { resolveMarkers, sqlMarkers, sqlParams, type SqlParam } from './sql/markers';
+export {
+  layoutGraph,
+  lineageGraph,
+  lineageOf,
+  sqlNameKey,
+  type Layout,
+  type LayoutBox,
+  type LayoutOptions,
+  type LayoutPoint,
+  type LineageEdge,
+  type LineageGraph,
+  type LineageJoin,
+  type LineageNode,
+  type LineageNodeKind,
+} from './sql/lineage';
+export * from './theme';
+export * from './editorOptions';
+export * from './VarSuggest';
+export * from './sql/xmlQuery';

package/src/languages.ts

@@ -0,0 +1,107 @@
+import type { Completion, CompletionSource } from '@codemirror/autocomplete';
+import { json, jsonLanguage } from '@codemirror/lang-json';
+import { markdown } from '@codemirror/lang-markdown';
+import { GFM } from '@lezer/markdown';
+import { MSSQL, MySQL, PLSQL, PostgreSQL, sql, SQLDialect, SQLite, StandardSQL } from '@codemirror/lang-sql';
+import { type Language, StreamLanguage } from '@codemirror/language';
+import { c, cpp, csharp, java, kotlin } from '@codemirror/legacy-modes/mode/clike';
+import { css } from '@codemirror/legacy-modes/mode/css';
+import { diff } from '@codemirror/legacy-modes/mode/diff';
+import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
+import { go } from '@codemirror/legacy-modes/mode/go';
+import { javascript, typescript } from '@codemirror/legacy-modes/mode/javascript';
+import { properties } from '@codemirror/legacy-modes/mode/properties';
+import { python } from '@codemirror/legacy-modes/mode/python';
+import { rust } from '@codemirror/legacy-modes/mode/rust';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { toml } from '@codemirror/legacy-modes/mode/toml';
+import { html, xml } from '@codemirror/legacy-modes/mode/xml';
+import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+import type { Extension } from '@codemirror/state';
+
+export type Lang =
+  | 'sql' | 'json' | 'shell' | 'java' | 'markdown' | 'xml' | 'text'
+  | 'javascript' | 'typescript' | 'css' | 'html' | 'python' | 'yaml' | 'toml' | 'properties'
+  | 'rust' | 'go' | 'c' | 'cpp' | 'csharp' | 'kotlin' | 'diff' | 'dockerfile';
+/** Display names, as VS Code's language picker shows them. */
+const LANG_LABELS: Record<Lang, string> = {
+  sql: 'SQL', json: 'JSON', shell: 'Shell Script', java: 'Java', markdown: 'Markdown', xml: 'XML', text: 'Plain Text',
+  javascript: 'JavaScript', typescript: 'TypeScript', css: 'CSS', html: 'HTML', python: 'Python', yaml: 'YAML', toml: 'TOML', properties: 'Properties',
+  rust: 'Rust', go: 'Go', c: 'C', cpp: 'C++', csharp: 'C#', kotlin: 'Kotlin', diff: 'Diff', dockerfile: 'Dockerfile',
+};
+
+export const langLabel = (lang: Lang) => LANG_LABELS[lang];
+
+export type SqlDialect = 'postgres' | 'mysql' | 'sqlite' | 'mssql' | 'plsql' | 'standard';
+/** Table name → column names, for SQL completion. */
+export type SqlSchema = Record<string, string[]>;
+
+// Oracle's unquoted names are case-insensitive: without this, completing an upper-case table inserts it in "quotes".
+const OracleSQL = SQLDialect.define({ ...PLSQL.spec, caseInsensitiveIdentifiers: true });
+
+const DIALECTS = { postgres: PostgreSQL, mysql: MySQL, sqlite: SQLite, mssql: MSSQL, plsql: OracleSQL, standard: StandardSQL };
+
+const STREAM_MODES = { shell, java, xml, html, javascript, typescript, css, python, yaml, toml, properties, rust, go, c, cpp, csharp, kotlin, diff, dockerfile: dockerFile };
+type StreamLang = keyof typeof STREAM_MODES;
+const streamLanguages = new Map<string, Language>();
+/** The language of a legacy stream mode, defined once per mode. */
+const streamLanguage = (lang: StreamLang): Language => {
+  let language = streamLanguages.get(lang);
+  if (!language) {
+    language = StreamLanguage.define(STREAM_MODES[lang]);
+    streamLanguages.set(lang, language);
+  }
+  return language;
+};
+const isStreamLang = (lang: Lang): lang is StreamLang => lang in STREAM_MODES;
+
+export function languageFor(lang: Lang, opts: { sqlDialect?: SqlDialect; sqlSchema?: SqlSchema } = {}): Extension {
+  switch (lang) {
+    case 'sql': {
+      const support = sql({ dialect: DIALECTS[opts.sqlDialect ?? 'standard'], schema: opts.sqlSchema });
+      return opts.sqlSchema ? [support, support.language.data.of({ autocomplete: columnCompletion(opts.sqlSchema) })] : support;
+    }
+    case 'json': return json();
+    case 'markdown': return markdown({ extensions: GFM });
+    default: return isStreamLang(lang) ? streamLanguage(lang) : [];
+  }
+}
+
+const IDENT = /[A-Za-z_][\w$#]*/g;
+/** Most text scanned for table names; a longer document gets no column completions. */
+const MAX_SCAN = 200_000;
+
+/**
+ * Columns of the schema's tables named anywhere in the text, without a `table.` prefix (lang-sql
+ * only completes columns after one). Table names match case-insensitively, as Oracle's unquoted ones do.
+ */
+export function columnCompletion(schema: SqlSchema): CompletionSource {
+  const tables = new Map(Object.keys(schema).map((name) => [name.toUpperCase(), name]));
+  return (ctx) => {
+    const word = ctx.matchBefore(/[\w$#]*/);
+    if (!word || (word.from === word.to && !ctx.explicit)) return null;
+    if (ctx.state.sliceDoc(word.from - 1, word.from) === '.' || ctx.state.doc.length > MAX_SCAN) return null;
+    const named = new Set<string>();
+    for (const [ident] of ctx.state.doc.toString().matchAll(IDENT)) {
+      const table = tables.get(ident.toUpperCase());
+      if (table) named.add(table);
+    }
+    const options: Completion[] = [];
+    for (const table of named) for (const label of schema[table]!) options.push({ label, type: 'property', detail: table, boost: -1 });
+    return options.length ? { from: word.from, options, validFor: /^[\w$#]*$/ } : null;
+  };
+}
+
+export type Parser = Language['parser'];
+
+/** The parser behind a language, for highlighting text outside an editor; null when there is none. */
+export function parserOf(lang: Lang): Parser | null {
+  switch (lang) {
+    case 'sql': return StandardSQL.language.parser;
+    case 'json': return jsonLanguage.parser;
+    default: return isStreamLang(lang) ? streamLanguage(lang).parser : null;
+  }
+}
+
+
+export { langOfFile, previewKind, type PreviewKind } from './fileKinds';

package/src/markdown.ts

@@ -0,0 +1,123 @@
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+
+export interface MarkdownOptions {
+  /** Maps a relative image src to a URL the page may load (e.g. a blob URL); null blocks it. */
+  resolveImage?(src: string): string | null;
+  /** Text of the placeholder that replaces a blocked image. */
+  blockedLabel?: string;
+}
+
+/** Links that stay: http(s) open outside the app, `#anchors` jump within the page; anything else loses its href. */
+export function linkPolicy(href: string): { href: string; external: boolean } | null {
+  const h = href.trim();
+  if (h.startsWith('#')) return { href: h, external: false };
+  if (/^https?:/i.test(h)) return { href: h, external: true };
+  return null;
+}
+
+const SAFE_DATA_IMAGE = /^data:image\/(png|jpeg|gif|webp);base64,/i;
+// Any scheme (http:, file:, data:, javascript:, ...) or a protocol-relative //host.
+const ABSOLUTE = /^([a-z][a-z0-9+.-]*:|\/\/)/i;
+
+/** The src an image may use: relative ones go through `resolveImage`, remote and other schemes are blocked. */
+export function imagePolicy(src: string, resolveImage?: (src: string) => string | null): string | 'blocked' {
+  const s = src.trim();
+  if (SAFE_DATA_IMAGE.test(s)) return s;
+  if (!s || ABSOLUTE.test(s)) return 'blocked';
+  return resolveImage?.(s) ?? 'blocked';
+}
+
+const FRONTMATTER = /^?---[ \t]*\r?\n(?:([\s\S]*?)\r?\n)?(?:---|\.\.\.)[ \t]*(?:\r?\n|$)/;
+
+/** A leading YAML frontmatter block (`---` ... `---`): its full length and its YAML text; null if there is none. */
+export function frontmatter(md: string): { length: number; yaml: string } | null {
+  const m = FRONTMATTER.exec(md);
+  return m ? { length: m[0].length, yaml: m[1] ?? '' } : null;
+}
+
+/** Top-level `key: value` pairs of frontmatter YAML; nested lines and list items fold into their key's value. Null if no key is found. */
+export function frontmatterEntries(yaml: string): [string, string][] | null {
+  const entries: [string, string[]][] = [];
+  for (const line of yaml.split(/\r?\n/)) {
+    const m = /^([^\s#:-][^:]*?|-[^\s:][^:]*?):(?:\s+(.*))?$/.exec(line.trimEnd());
+    if (m) {
+      entries.push([m[1], m[2] && !/^[|>][+-]?$/.test(m[2]) ? [unquote(m[2].trim())] : []]);
+    } else if (entries.length && line.trim() && !line.trim().startsWith('#')) {
+      entries[entries.length - 1][1].push(unquote(line.trim().replace(/^-\s+/, '')));
+    }
+  }
+  if (!entries.length) return null;
+  return entries.map(([k, v]) => [k, v.join(', ')]);
+}
+
+function unquote(v: string): string {
+  return /^(".*"|'.*')$/.test(v) ? v.slice(1, -1) : v;
+}
+
+/** The frontmatter as a two-column table (built with textContent, so values are never parsed as HTML). */
+export function frontmatterTable(entries: [string, string][]): HTMLTableElement {
+  const table = document.createElement('table');
+  table.className = 'md-frontmatter';
+  const body = table.createTBody();
+  for (const [key, value] of entries) {
+    const row = body.insertRow();
+    const th = document.createElement('th');
+    th.scope = 'row';
+    th.textContent = key;
+    row.append(th);
+    row.insertCell().textContent = value;
+  }
+  return table;
+}
+
+const BLOCKED_ATTR = 'data-md-blocked';
+
+/** Markdown (GFM) to sanitized HTML. Needs a DOM (DOMPurify): browser only. */
+export function renderMarkdown(md: string, opts: MarkdownOptions = {}): string {
+  const fm = frontmatter(md);
+  const entries = fm ? frontmatterEntries(fm.yaml) : null;
+  if (fm) md = (entries ? '' : '~~~~yaml\n' + fm.yaml + '\n~~~~\n') + md.slice(fm.length);
+  const raw = marked.parse(md, { gfm: true, async: false }) as string;
+  const hook = (node: Element) => {
+    if (node.tagName === 'A' && node.hasAttribute('href')) {
+      const link = linkPolicy(node.getAttribute('href')!);
+      if (!link) {
+        node.removeAttribute('href');
+      } else if (link.external) {
+        node.setAttribute('target', '_blank');
+        node.setAttribute('rel', 'noopener noreferrer');
+      }
+    } else if (node.tagName === 'IMG') {
+      node.removeAttribute('srcset');
+      const src = imagePolicy(node.getAttribute('src') ?? '', opts.resolveImage);
+      if (src === 'blocked') node.setAttribute(BLOCKED_ATTR, node.getAttribute('src') ?? '');
+      else node.setAttribute('src', src);
+    }
+  };
+  DOMPurify.addHook('afterSanitizeAttributes', hook);
+  let fragment: DocumentFragment;
+  try {
+    fragment = DOMPurify.sanitize(raw, {
+      // HTML only: SVG/MathML links and images escape the A/IMG policies above.
+      USE_PROFILES: { html: true },
+      // Media and <picture> sources would load remote URLs past imagePolicy.
+      FORBID_TAGS: ['style', 'iframe', 'form', 'object', 'embed', 'video', 'audio', 'source', 'track', 'picture', 'input', 'button'],
+      FORBID_ATTR: ['style', 'ping', 'download', 'formaction', 'background', 'id', 'name'],
+      RETURN_DOM_FRAGMENT: true,
+    });
+  } finally {
+    DOMPurify.removeHook('afterSanitizeAttributes', hook);
+  }
+  for (const img of fragment.querySelectorAll(`img[${BLOCKED_ATTR}]`)) {
+    const span = document.createElement('span');
+    span.className = 'md-img-blocked';
+    span.title = img.getAttribute(BLOCKED_ATTR) ?? '';
+    span.textContent = opts.blockedLabel ?? 'Remote image blocked';
+    img.replaceWith(span);
+  }
+  const box = document.createElement('div');
+  if (entries) box.append(frontmatterTable(entries));
+  box.append(fragment);
+  return box.innerHTML;
+}