vowel 0.7.1-beta.0 → 0.7.3

package/plugins/html/bundle/index.js

@@ -18761,9 +18761,10 @@ ${fallback_html}`;
 	    return { type: "blockquote", children: node.body.nodes.map(child => blockFrom$1(child, nodes)) }
 	  }
 	  if (node.type === "alert") {
+	    const title = node.title ? ` ${node.title}` : "";
 	    const marker = {
 	      type: "html",
-	      value: `[!${(node.variant || "note").toUpperCase()}]`
+	      value: `[!${(node.variant || "note").toUpperCase()}]${title}`
 	    };
 	    const body = node.body.nodes.map(child => blockFrom$1(child, nodes));
 	    return { type: "blockquote", children: [marker, ...body] }
@@ -18798,11 +18799,12 @@ ${fallback_html}`;
 	    rule: "-"
 	  });
 	  const heading = frontmatter.title ? `# ${frontmatter.title}\n\n` : "";
+	  const natural = frontmatter.natural || "";
 	  const properties = frontmatter.properties || {};
 	  const yaml = Object.keys(properties).length
 	    ? `---\n${stringify(properties)}---\n\n`
 	    : "";
-	  return yaml + heading + body
+	  return yaml + heading + natural + body
 	}
 
 	const divider = ($$anchor) => {
@@ -19533,9 +19535,11 @@ ${fallback_html}`;
 		// socket pushes, so it is read at save time rather than when the
 		// editor opened. Taking the frontmatter from the source rather than
 		// the rendered page is what lets a key that never renders survive a
-		// save. The title is the one key that isn't kept: it is written back
-		// as a `#` heading, never as `title:`, so a file whose title lived
-		// only in frontmatter gains a heading and loses the key.
+		// save. A title declared in the frontmatter (`h1.fm_title`) stays a
+		// `title:` key; one from a `#` heading is written back as one. The
+		// natural metadata - a date line, an image, a description and its
+		// rule, lifted out of the content when the page was built - goes back
+		// between the heading and the body.
 		async function save() {
 			const { path, markdown: text } = getSource();
 
@@ -19545,8 +19549,10 @@ ${fallback_html}`;
 				return;
 			}
 
-			const { title: ignoredTitle, ...properties } = splitFrontmatter(text).data;
-			const markdown = serialize($$props.session.doc, { title: $$props.frontmatter.title, properties });
+			const { title: sourceTitle, ...rest } = splitFrontmatter(text).data;
+			const properties = $$props.frontmatter.titleDeclared ? { title: sourceTitle, ...rest } : rest;
+			const title = $$props.frontmatter.titleDeclared ? null : $$props.frontmatter.title;
+			const markdown = serialize($$props.session.doc, { title, natural: $$props.frontmatter.natural, properties });
 
 			await writeSettings(path, markdown);
 			console.info("[vowel] saved %s", path);
@@ -19684,14 +19690,14 @@ ${fallback_html}`;
 	delegate(['click']);
 
 	const rampSettings = [
-	  { key: "heading-size", variable: "--font-size-delta", label: "Heading size", hint: "How much larger h1 is than body text", unit: "x", min: 0.25, max: 4, step: 0.05, default: 2 },
-	  { key: "heading-size-decay", variable: "--font-size-decay", label: "Size decay", hint: "Higher makes subheadings smaller", unit: "", min: 0.5, max: 6, step: 0.1, default: 3 },
-	  { key: "h1-letter-spacing", variable: "--letter-spacing-h1", label: "h1 letter spacing", unit: "ch", min: -0.1, max: 0.1, step: 0.005, default: -0.01 },
-	  { key: "h6-letter-spacing", variable: "--letter-spacing-h6", label: "h6 letter spacing", unit: "ch", min: -0.1, max: 0.1, step: 0.005, default: 0 },
-	  { key: "letter-spacing-decay", variable: "--letter-spacing-decay", label: "Spacing decay", unit: "", min: 0.5, max: 6, step: 0.1, default: 2 },
-	  { key: "h1-weight", variable: "--font-weight-h1", label: "h1 weight", unit: "", min: 100, max: 900, step: 10, default: 800 },
-	  { key: "h6-weight", variable: "--font-weight-h6", label: "h6 weight", unit: "", min: 100, max: 900, step: 10, default: 600 },
-	  { key: "weight-decay", variable: "--font-weight-decay", label: "Weight decay", unit: "", min: 0.5, max: 6, step: 0.1, default: 2 }
+	  { key: "heading-size", variable: "--fontsize-delta", label: "Heading size", hint: "How much larger h1 is than body text", unit: "x", min: 0.25, max: 4, step: 0.05, default: 2 },
+	  { key: "heading-size-decay", variable: "--fontsize-decay", label: "Size decay", hint: "Higher makes subheadings smaller", unit: "", min: 0.5, max: 6, step: 0.1, default: 3 },
+	  { key: "h1-letter-spacing", variable: "--letterspacing-h1", label: "h1 letter spacing", unit: "ch", min: -0.1, max: 0.1, step: 0.005, default: -0.01 },
+	  { key: "h6-letter-spacing", variable: "--letterspacing-h6", label: "h6 letter spacing", unit: "ch", min: -0.1, max: 0.1, step: 0.005, default: 0 },
+	  { key: "letter-spacing-decay", variable: "--letterspacing-decay", label: "Spacing decay", unit: "", min: 0.5, max: 6, step: 0.1, default: 2 },
+	  { key: "h1-weight", variable: "--fontweight-h1", label: "h1 weight", unit: "", min: 100, max: 900, step: 10, default: 800 },
+	  { key: "h6-weight", variable: "--fontweight-h6", label: "h6 weight", unit: "", min: 100, max: 900, step: 10, default: 600 },
+	  { key: "weight-decay", variable: "--fontweight-decay", label: "Weight decay", unit: "", min: 0.5, max: 6, step: 0.1, default: 2 }
 	];
 	function themeSettings(theme) {
 	  return theme && typeof theme === "object" && !Array.isArray(theme) ?  (theme) : {}
@@ -19699,7 +19705,7 @@ ${fallback_html}`;
 	function rampValue(setting, value) {
 	  const clamped = Math.min(setting.max, Math.max(setting.min, value));
 	  const number = String(Number(clamped.toFixed(4)));
-	  if (setting.unit === "x") return `calc(${number} * var(--font-size-root))`
+	  if (setting.unit === "x") return `calc(${number} * var(--fontsize-root))`
 	  return `${number}${setting.unit}`
 	}
 	function typographyVariables(theme) {
@@ -20036,6 +20042,10 @@ ${fallback_html}`;
 	  if (properties.length) url.searchParams.set("properties", properties.join(","));
 	  return decodeURIComponent(url.pathname + url.search)
 	}
+	function alertLabel(type) {
+	  const spaced = type.replace(/[-_]+/g, " ");
+	  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+	}
 
 	const TEXT_NODE = 3;
 	const ELEMENT_NODE = 1;
@@ -20063,6 +20073,9 @@ ${fallback_html}`;
 	}
 	function expansionDirective(element) {
 	  const classes = classList(element);
+	  if (element.tagName === "FIGURE" && element.children.length === 1 && element.firstElementChild.tagName === "TABLE") {
+	    return expansionDirective(element.firstElementChild)
+	  }
 	  if ((element.tagName === "UL" || element.tagName === "TABLE") && classes.some(name => name.startsWith("_"))) {
 	    const params = globParams(classes);
 	    return params && globDirective(params)
@@ -20143,7 +20156,7 @@ ${fallback_html}`;
 	  const tag = element.tagName;
 	  if (tag === "P") {
 	    const picture = pictureIn(element);
-	    if (picture && !element.textContent.trim()) return imageFrom(picture, null, element, context)
+	    if (picture && !element.textContent.trim()) return imageFrom(context)
 	    return context.create({
 	      type: "paragraph",
 	      content: textValue(element, context)
@@ -20172,14 +20185,18 @@ ${fallback_html}`;
 	    })
 	  }
 	  if (tag === "ASIDE" && classList(element).includes("alert")) {
-	    const variant = classList(element).find(name => name !== "alert");
+	    const variant = classList(element).find(name => name !== "alert") || "note";
+	    const heading = [...element.children].find(child => child.tagName === "H2");
+	    const text = heading?.textContent.trim() ?? "";
+	    const title = text === alertLabel(variant) ? "" : text;
 	    const body = [...element.children]
-	      .filter(child => child.tagName !== "H2")
+	      .filter(child => child !== heading)
 	      .map(child => blockFrom(child, context));
 	    if (body.some(id => !id)) return null
 	    return context.create({
 	      type: "alert",
-	      variant: variant || "note",
+	      variant,
+	      title,
 	      body: { nodes: body, marks: [], annotations: [] }
 	    })
 	  }
@@ -20207,29 +20224,17 @@ ${fallback_html}`;
 	  }
 	  if (tag === "FIGURE") {
 	    const picture = pictureIn(element);
-	    const caption = element.querySelector("figcaption");
-	    if (picture) return imageFrom(picture, caption, element, context)
+	    if (picture) return imageFrom(context)
 	  }
 	  if (tag === "PICTURE") {
-	    return imageFrom(element, null, element, context)
+	    return imageFrom(context)
 	  }
 	  context.unrecognised.push(tag.toLowerCase() + (element.className ? `.${element.className}` : ""));
 	  return null
 	}
-	function imageFrom(picture, caption, outer, context) {
-	  const img = picture.querySelector("img");
-	  const source = picture.getAttribute("data-original");
-	  if (!source) {
-	    context.unrecognised.push("picture (no data-original)");
-	    return null
-	  }
-	  return context.create({
-	    type: "image",
-	    source,
-	    alt: img ? (img.getAttribute("alt") || "") : "",
-	    caption: caption ? caption.textContent : "",
-	    html: outer.outerHTML
-	  })
+	function imageFrom(context) {
+	  context.unrecognised.push("picture");
+	  return null
 	}
 	function ingest(contentElement, generateId) {
 	  const nodes = {};
@@ -20818,6 +20823,7 @@ ${fallback_html}`;
 	    kind: "block",
 	    properties: {
 	      variant: { type: "string", default: "note" },
+	      title: { type: "string", default: "" },
 	      body: { type: "node_array", node_types: BLOCK_TYPES, default_node_type: "paragraph" }
 	    }
 	  },
@@ -20970,15 +20976,43 @@ ${fallback_html}`;
 	    return { ...accumulated, [node.textContent.trim()]: valueFrom(value) }
 	  }, {})
 	}
+	function naturalLine(element) {
+	  if (element.tagName === "FIGURE") return figureLine(element)
+	  const property = element.getAttribute("itemprop");
+	  if (property === "date") return element.textContent.trim()
+	  if (property === "description") return `${element.textContent.trim()}\n\n---`
+	  if (property !== "image") return null
+	  if (element.tagName !== "IMG") return null
+	  const source = element.getAttribute("src");
+	  return source ? `![${element.getAttribute("alt") ?? ""}](${source})` : null
+	}
+	function figureLine(figure) {
+	  const image = figure.querySelector(":scope > [itemprop=image]");
+	  const line = image ? naturalLine(image) : null;
+	  if (!line) return null
+	  const caption = figure.querySelector(":scope > figcaption")?.textContent.trim();
+	  return caption ? `${line} ${caption}` : line
+	}
+	function isNatural(child) {
+	  if ([...child.classList].some(name => name.startsWith("fm_"))) return false
+	  if (child.hasAttribute("itemprop")) return true
+	  return child.tagName === "FIGURE" && Boolean(child.querySelector(":scope > [itemprop=image]"))
+	}
 	function readFrontmatter(main) {
 	  const children = [...main.children];
+	  const declared = (key) => (child) => child.classList.contains(`fm_${key}`);
 	  const heading = children.find(child => child.tagName === "H1");
-	  const date = children.find(child => child.matches('time[itemprop="date"]'));
-	  const image = children.find(child => child.matches('picture[itemprop="image"]'));
-	  const description = children.find(child => child.matches('p[itemprop="description"]'));
+	  const date = children.find(declared("date"));
+	  const description = children.find(declared("description"));
+	  const naturalChildren = children.filter(isNatural);
+	  const natural = naturalChildren
+	    .map(naturalLine)
+	    .filter(Boolean);
+	  const unrecognised = naturalChildren
+	    .filter(child => child.tagName === "PICTURE" || child.querySelector("picture"))
+	    .map(() => "picture");
 	  const known = {
 	    ...(date ? { date: dateFrom(date) } : {}),
-	    ...(image ? { image: image.getAttribute("data-original") } : {}),
 	    ...(description ? { description: description.textContent.trim() } : {})
 	  };
 	  const generic = children
@@ -20986,7 +21020,10 @@ ${fallback_html}`;
 	    .reduce((accumulated, list) => ({ ...accumulated, ...objectFrom(list) }), {});
 	  return {
 	    title: heading ? heading.textContent.trim() : null,
-	    properties: { ...known, ...generic }
+	    titleDeclared: Boolean(heading?.classList.contains("fm_title")),
+	    properties: { ...known, ...generic },
+	    natural: natural.length ? `${natural.join("\n\n")}\n\n` : "",
+	    unrecognised
 	  }
 	}
 
@@ -21010,7 +21047,10 @@ ${fallback_html}`;
 	  socket.addEventListener('message', e => {
 	    if (!isOpen()) return
 	    const target = JSON.parse(e.data);
-	    if (target.extension !== ".html") return
+	    if (target.extension !== ".html") {
+	      retryImages("/" + target.path);
+	      return
+	    }
 	    const regex = new RegExp(window.location.pathname + "(index)?(\\.html)");
 	    if (!("/" + target.path).match(regex)) return
 	    updateFromTarget(target);
@@ -21097,6 +21137,19 @@ ${fallback_html}`;
 	    if (!produced.has(keyOf(element)) && wasProduced(element)) element.remove();
 	  }
 	}
+	function retryImages(url) {
+	  const failed = [...document.images].filter(img => img.complete && img.naturalWidth === 0);
+	  const elements = failed.map(img => img.parentElement?.tagName === "PICTURE" ? img.parentElement : img);
+	  const naming = elements.filter(element => urlsOf(element).includes(url));
+	  for (const element of naming) element.replaceWith(element.cloneNode(true));
+	}
+	function urlsOf(element) {
+	  const nodes = [element, ...element.querySelectorAll("source, img")];
+	  return nodes.flatMap(node => {
+	    const candidates = (node.getAttribute("srcset") ?? "").split(",").map(candidate => candidate.trim().split(/\s+/)[0]);
+	    return [node.getAttribute("src"), ...candidates].filter(Boolean)
+	  })
+	}
 	function wasProduced(element) {
 	  if (element.tagName === "SCRIPT") return false
 	  if (element.hasAttribute("data-vowel-client")) return false
@@ -21105,7 +21158,7 @@ ${fallback_html}`;
 
 	openSocket();
 	const content = document.getElementById("content");
-	const noFrontmatter = { title: null, properties: {} };
+	const noFrontmatter = { title: null, properties: {}, unrecognised: [] };
 	function startEditing() {
 	  const { session, unrecognised } = create_session(content);
 	  if (!session) {
@@ -21117,6 +21170,10 @@ ${fallback_html}`;
 	  }
 	  const main = content.closest("main");
 	  const frontmatter = main ? readFrontmatter(main) : noFrontmatter;
+	  if (frontmatter.unrecognised.length) {
+	    console.warn("[vowel] editor stayed read-only: <main> holds natural metadata it can't write back:", frontmatter.unrecognised);
+	    return frontmatter.unrecognised
+	  }
 	  content.replaceChildren();
 	  mount(Editor, { target: content, props: { session, frontmatter } });
 	  document.documentElement.dataset.vowelEditing = "true";

package/plugins/html/editor/Editor.svelte

@@ -29,17 +29,21 @@
   // socket pushes, so it is read at save time rather than when the
   // editor opened. Taking the frontmatter from the source rather than
   // the rendered page is what lets a key that never renders survive a
-  // save. The title is the one key that isn't kept: it is written back
-  // as a `#` heading, never as `title:`, so a file whose title lived
-  // only in frontmatter gains a heading and loses the key.
+  // save. A title declared in the frontmatter (`h1.fm_title`) stays a
+  // `title:` key; one from a `#` heading is written back as one. The
+  // natural metadata - a date line, an image, a description and its
+  // rule, lifted out of the content when the page was built - goes back
+  // between the heading and the body.
   async function save() {
     const { path, markdown: text } = getSource()
     if (!path || typeof text !== "string") {
       console.error("[vowel] not saved: this page has no source to save to")
       return
     }
-    const { title: ignoredTitle, ...properties } = splitFrontmatter(text).data
-    const markdown = serialize(session.doc, { title: frontmatter.title, properties })
+    const { title: sourceTitle, ...rest } = splitFrontmatter(text).data
+    const properties = frontmatter.titleDeclared ? { title: sourceTitle, ...rest } : rest
+    const title = frontmatter.titleDeclared ? null : frontmatter.title
+    const markdown = serialize(session.doc, { title, natural: frontmatter.natural, properties })
     await writeFile(path, markdown)
     console.info("[vowel] saved %s", path)
   }

package/plugins/html/editor/create-session.js

@@ -95,11 +95,13 @@ const document_schema = define_document_schema({
       body: { type: "node_array", node_types: BLOCK_TYPES, default_node_type: "paragraph" }
     }
   },
-  // > [!NOTE] - the variant is what the html plugin encodes in the class.
+  // > [!NOTE] Title - the variant is what the html plugin encodes in the
+  // class; the title is its heading, "" when it is the type's default.
   alert: {
     kind: "block",
     properties: {
       variant: { type: "string", default: "note" },
+      title: { type: "string", default: "" },
       body: { type: "node_array", node_types: BLOCK_TYPES, default_node_type: "paragraph" }
     }
   },

package/plugins/html/editor/directives.js

@@ -126,3 +126,15 @@ export function globDirective({ folder, recursive, limit, tag, view = null, prop
   if (properties.length) url.searchParams.set("properties", properties.join(","))
   return decodeURIComponent(url.pathname + url.search)
 }
+
+/**
+ * An alert's heading when the author gave it no title: its type in
+ * sentence case, `[!NOTE]` → "Note", `[!my-card]` → "My card". Here so
+ * the html plugin (which writes it) and the editor (which leaves it out
+ * on save) agree.
+ * @param {string} type - lowercase
+ */
+export function alertLabel(type) {
+  const spaced = type.replace(/[-_]+/g, " ")
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+}

package/plugins/html/editor/frontmatter.js

@@ -1,10 +1,13 @@
-// <main>'s children -> the page's frontmatter.
+// <main>'s children -> the page's frontmatter, and its natural metadata.
 //
-// The inverse of makeFrontmatter in plugins/html/index.js. Each property
-// is its own single-item <dl>, except the ones vowel handles specially,
-// which get their own element identified by itemprop. The title is main's
-// first <h1> - the one piece of data hoisted out of the content - and is
-// written back as a "#" heading rather than a frontmatter key.
+// The inverse of makeFrontmatter in plugins/html/index.js. A property
+// from the frontmatter carries its key as a class (`fm_date`,
+// `dl.fm_client`). The same properties written in the text - a date
+// line, an image, a description ended with a rule - are direct children
+// of <main> too, with their itemprop and no `fm_` class: those are
+// rebuilt as markdown, to go back at the top of the body. The title is
+// main's first <h1>: from the frontmatter when it has `fm_title`, else
+// from a "#" heading, and written back the same way.
 
 /** @param {Element} element */
 function scalarFrom(element) {
@@ -65,21 +68,80 @@ function objectFrom(list) {
   }, {})
 }
 
+/**
+ * One piece of natural metadata, back as the markdown that made it: the
+ * date line as the author wrote it, the image, the description and the
+ * rule that ended it. A description's inline marks are flattened to its
+ * text, the editor's usual lossy rule.
+ * @param {Element} element
+ * @returns {string|null}
+ */
+function naturalLine(element) {
+  if (element.tagName === "FIGURE") return figureLine(element)
+  const property = element.getAttribute("itemprop")
+  if (property === "date") return element.textContent.trim()
+  if (property === "description") return `${element.textContent.trim()}\n\n---`
+  if (property !== "image") return null
+
+  // A plain <img> links the path as written. A <picture> names only its
+  // derivatives, so it can't be written back, and readFrontmatter
+  // reports it.
+  if (element.tagName !== "IMG") return null
+  const source = element.getAttribute("src")
+  return source ? `![${element.getAttribute("alt") ?? ""}](${source})` : null
+}
+
+/**
+ * A captioned image, back as the image and its caption on one line. The
+ * caption's inline marks are flattened to its text, as a description's
+ * are and as ingest does for a captioned image in the content.
+ * @param {Element} figure
+ * @returns {string|null}
+ */
+function figureLine(figure) {
+  const image = figure.querySelector(":scope > [itemprop=image]")
+  const line = image ? naturalLine(image) : null
+  if (!line) return null
+  const caption = figure.querySelector(":scope > figcaption")?.textContent.trim()
+  return caption ? `${line} ${caption}` : line
+}
+
+/**
+ * A captioned image carries its itemprop on the image inside its
+ * <figure>, so the figure is natural metadata when that image is.
+ * @param {Element} child - of <main>
+ */
+function isNatural(child) {
+  if ([...child.classList].some(name => name.startsWith("fm_"))) return false
+  if (child.hasAttribute("itemprop")) return true
+  return child.tagName === "FIGURE" && Boolean(child.querySelector(":scope > [itemprop=image]"))
+}
+
 /**
  * @param {Element} main
- * @returns {{title: string|null, properties: object}}
+ * @returns {{title: string|null, titleDeclared: boolean, properties: object, natural: string, unrecognised: string[]}}
  */
 export default function readFrontmatter(main) {
   const children = [...main.children]
+  const declared = (key) => (child) => child.classList.contains(`fm_${key}`)
 
   const heading = children.find(child => child.tagName === "H1")
-  const date = children.find(child => child.matches('time[itemprop="date"]'))
-  const image = children.find(child => child.matches('picture[itemprop="image"]'))
-  const description = children.find(child => child.matches('p[itemprop="description"]'))
+  const date = children.find(declared("date"))
+  const description = children.find(declared("description"))
+
+  const naturalChildren = children.filter(isNatural)
+  const natural = naturalChildren
+    .map(naturalLine)
+    .filter(Boolean)
+  // A natural image that is a <picture> can't be written back
+  // (naturalLine), so the page stays read-only rather than losing the
+  // line on save.
+  const unrecognised = naturalChildren
+    .filter(child => child.tagName === "PICTURE" || child.querySelector("picture"))
+    .map(() => "picture")
 
   const known = {
     ...(date ? { date: dateFrom(date) } : {}),
-    ...(image ? { image: image.getAttribute("data-original") } : {}),
     ...(description ? { description: description.textContent.trim() } : {})
   }
 
@@ -92,6 +154,9 @@ export default function readFrontmatter(main) {
 
   return {
     title: heading ? heading.textContent.trim() : null,
-    properties: { ...known, ...generic }
+    titleDeclared: Boolean(heading?.classList.contains("fm_title")),
+    properties: { ...known, ...generic },
+    natural: natural.length ? `${natural.join("\n\n")}\n\n` : "",
+    unrecognised
   }
 }

package/plugins/html/editor/ingest.js

@@ -8,7 +8,7 @@
 // guess round-trips to markdown that silently replaces the author's
 // content on save.
 
-import { globParams, globDirective } from "./directives.js"
+import { globParams, globDirective, alertLabel } from "./directives.js"
 
 const TEXT_NODE = 3
 const ELEMENT_NODE = 1
@@ -51,7 +51,12 @@ function expansionDirective(element) {
   const classes = classList(element)
 
   // A glob list is a <ul>, or a <table> in its ?view=table form; the
-  // parameters are in the classes either way.
+  // parameters are in the classes either way. The table comes in a
+  // <figure>, which is only its frame.
+  if (element.tagName === "FIGURE" && element.children.length === 1 && element.firstElementChild.tagName === "TABLE") {
+    return expansionDirective(element.firstElementChild)
+  }
+
   if ((element.tagName === "UL" || element.tagName === "TABLE") && classes.some(name => name.startsWith("_"))) {
     const params = globParams(classes)
     return params && globDirective(params)
@@ -180,7 +185,7 @@ function blockFrom(element, context) {
     // The image transform replaces an <img> in place, so a paragraph whose
     // only element is a <picture> is an image block, not prose.
     const picture = pictureIn(element)
-    if (picture && !element.textContent.trim()) return imageFrom(picture, null, element, context)
+    if (picture && !element.textContent.trim()) return imageFrom(context)
 
     return context.create({
       type: "paragraph",
@@ -215,19 +220,25 @@ function blockFrom(element, context) {
   }
 
   if (tag === "ASIDE" && classList(element).includes("alert")) {
-    // > [!NOTE] became <aside class="alert note">, with the marker line
-    // replaced by an injected <h2>. The variant is the class; the injected
-    // heading is dropped and regenerated on the way out.
-    const variant = classList(element).find(name => name !== "alert")
+    // > [!NOTE] Title became <aside class="alert note"> with the title as
+    // an injected <h2>. The variant is the class. The heading is kept as
+    // the title, as plain text (inline marks in it are flattened, like
+    // any mark the editor can't hold), unless it is the default the html
+    // plugin made from the type - then there was no title to keep.
+    const variant = classList(element).find(name => name !== "alert") || "note"
+    const heading = [...element.children].find(child => child.tagName === "H2")
+    const text = heading?.textContent.trim() ?? ""
+    const title = text === alertLabel(variant) ? "" : text
     const body = [...element.children]
-      .filter(child => child.tagName !== "H2")
+      .filter(child => child !== heading)
       .map(child => blockFrom(child, context))
 
     if (body.some(id => !id)) return null
 
     return context.create({
       type: "alert",
-      variant: variant || "note",
+      variant,
+      title,
       body: { nodes: body, marks: [], annotations: [] }
     })
   }
@@ -263,12 +274,11 @@ function blockFrom(element, context) {
 
   if (tag === "FIGURE") {
     const picture = pictureIn(element)
-    const caption = element.querySelector("figcaption")
-    if (picture) return imageFrom(picture, caption, element, context)
+    if (picture) return imageFrom(context)
   }
 
   if (tag === "PICTURE") {
-    return imageFrom(element, null, element, context)
+    return imageFrom(context)
   }
 
   context.unrecognised.push(tag.toLowerCase() + (element.className ? `.${element.className}` : ""))
@@ -276,26 +286,14 @@ function blockFrom(element, context) {
 }
 
 /**
- * @param {Element} picture
- * @param {Element|null} caption
- * @param {Element} outer the element whose markup is kept for rendering
+ * An image can't be edited yet. Its <picture> names only the image's
+ * derivatives, and the path the author wrote is not in the page (per
+ * Sam, the output carries no data-original for the editor), so a save
+ * could only guess it. It is reported, which leaves the page read-only.
  */
-function imageFrom(picture, caption, outer, context) {
-  const img = picture.querySelector("img")
-  const source = picture.getAttribute("data-original")
-
-  if (!source) {
-    context.unrecognised.push("picture (no data-original)")
-    return null
-  }
-
-  return context.create({
-    type: "image",
-    source,
-    alt: img ? (img.getAttribute("alt") || "") : "",
-    caption: caption ? caption.textContent : "",
-    html: outer.outerHTML
-  })
+function imageFrom(context) {
+  context.unrecognised.push("picture")
+  return null
 }
 
 /**

package/plugins/html/editor/main.js

@@ -15,7 +15,7 @@ openSocket()
 // document's source of truth (see ingest.js).
 const content = document.getElementById("content")
 
-const noFrontmatter = { title: null, properties: {} }
+const noFrontmatter = { title: null, properties: {}, unrecognised: [] }
 
 /**
  * Swaps the server-rendered body for the editor. A previewed page runs
@@ -50,6 +50,10 @@ function startEditing() {
   // them is what lets a save reproduce the whole file.
   const main = content.closest("main")
   const frontmatter = main ? readFrontmatter(main) : noFrontmatter
+  if (frontmatter.unrecognised.length) {
+    console.warn("[vowel] editor stayed read-only: <main> holds natural metadata it can't write back:", frontmatter.unrecognised)
+    return frontmatter.unrecognised
+  }
 
   // Svedit renders the document itself rather than hydrating over the
   // server output, so the original children go before it mounts.

package/plugins/html/editor/serialize.js

@@ -93,9 +93,10 @@ function blockFrom(id, nodes) {
     // The marker line the html plugin consumed is regenerated here. It is
     // emitted raw rather than as text: escaping would make it "\[!NOTE]",
     // which survives vowel's own parser but is not the literal GFM syntax.
+    const title = node.title ? ` ${node.title}` : ""
     const marker = {
       type: "html",
-      value: `[!${(node.variant || "note").toUpperCase()}]`
+      value: `[!${(node.variant || "note").toUpperCase()}]${title}`
     }
     const body = node.body.nodes.map(child => blockFrom(child, nodes))
     return { type: "blockquote", children: [marker, ...body] }
@@ -144,14 +145,17 @@ export default function serialize(doc, frontmatter = { title: null, properties:
     rule: "-"
   })
 
-  // The title is written as a heading rather than a frontmatter key, so a
-  // page whose title only ever lived in frontmatter gains one here.
+  // A title from a `#` heading is written back as one; a declared title
+  // arrives as null and stays in the properties.
   const heading = frontmatter.title ? `# ${frontmatter.title}\n\n` : ""
 
+  // The natural metadata (readFrontmatter), as markdown, already spaced.
+  const natural = frontmatter.natural || ""
+
   const properties = frontmatter.properties || {}
   const yaml = Object.keys(properties).length
     ? `---\n${stringifyYAML(properties)}---\n\n`
     : ""
 
-  return yaml + heading + body
+  return yaml + heading + natural + body
 }