@lettercamp/cli 0.1.6 → 0.1.8

package/renderer/src/lib/author-dialog.ts

@@ -0,0 +1,102 @@
+// Delegation also supports bylines replaced by the editor preview bridge.
+export const authorDialogScript = `
+(() => {
+  let panel;
+  let trigger;
+  let tracking;
+  let frame;
+  const element = (tag, className, text) => {
+    const node = document.createElement(tag);
+    node.className = className;
+    if (text != null) node.textContent = text;
+    return node;
+  };
+  const close = (restoreFocus = false) => {
+    if (!panel?.matches(':popover-open')) return;
+    panel.hidePopover();
+    trigger?.setAttribute('aria-expanded', 'false');
+    tracking?.abort();
+    cancelAnimationFrame(frame);
+    if (restoreFocus && trigger?.isConnected) trigger.focus({ preventScroll: true });
+  };
+  const position = () => {
+    if (!panel?.matches(':popover-open')) return;
+    if (!trigger?.isConnected) { close(); return; }
+    const anchor = trigger.getBoundingClientRect();
+    const viewport = window.visualViewport;
+    const left = viewport?.offsetLeft || 0;
+    const top = viewport?.offsetTop || 0;
+    const width = viewport?.width || innerWidth;
+    const height = viewport?.height || innerHeight;
+    if (anchor.bottom < top || anchor.top > top + height) { close(); return; }
+    const below = top + height - anchor.bottom - 14;
+    const above = anchor.top - top - 14;
+    const upwards = below < Math.min(panel.scrollHeight, 320) && above > below;
+    panel.style.maxHeight = Math.max(40, Math.min(320, upwards ? above : below)) + 'px';
+    panel.style.left = Math.max(left + 8, Math.min(anchor.left, left + width - panel.offsetWidth - 8)) + 'px';
+    panel.style.top = (upwards ? anchor.top - panel.offsetHeight - 6 : anchor.bottom + 6) + 'px';
+  };
+  const schedulePosition = () => { cancelAnimationFrame(frame); frame = requestAnimationFrame(position); };
+  document.addEventListener('click', event => {
+    const button = event.target instanceof Element ? event.target.closest('button.author-more') : null;
+    if (!button) return;
+    event.preventDefault();
+    if (trigger === button && panel?.matches(':popover-open')) { close(true); return; }
+    close();
+    const authors = JSON.parse(button.dataset.authors);
+    if (!panel) {
+      panel = element('div', 'authors-popover');
+      panel.id = 'authors-popover';
+      panel.popover = 'auto';
+      panel.tabIndex = -1;
+      panel.setAttribute('role', 'dialog');
+      panel.setAttribute('aria-label', 'Authors');
+      panel.append(element('ul', 'authors-popover-list'));
+      panel.addEventListener('toggle', event => {
+        if (event.newState === 'closed') {
+          trigger?.setAttribute('aria-expanded', 'false');
+          tracking?.abort();
+          cancelAnimationFrame(frame);
+        }
+      });
+      document.body.append(panel);
+    }
+    const list = panel.querySelector('ul');
+    list.replaceChildren();
+    for (const author of authors) {
+      const row = element('li', 'authors-popover-author');
+      const portrait = element('span', 'author-portrait');
+      portrait.setAttribute('aria-hidden', 'true');
+      if (author.image) {
+        const image = element('img', 'author-avatar');
+        image.src = author.image; image.alt = ''; image.width = 28; image.height = 28;
+        portrait.append(image);
+      } else {
+        portrait.append(element('span', 'author-initials', author.name.trim().split(/\\s+/).map(part => part[0]).slice(0, 2).join('')));
+      }
+      row.append(portrait, element('span', '', author.name));
+      list.append(row);
+    }
+    trigger = button;
+    trigger.setAttribute('aria-controls', panel.id);
+    trigger.setAttribute('popovertarget', panel.id);
+    trigger.setAttribute('aria-expanded', 'true');
+    panel.showPopover();
+    position();
+    panel.focus({ preventScroll: true });
+    tracking = new AbortController();
+    const signal = tracking.signal;
+    document.addEventListener('keydown', event => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault(); close(true);
+    }, { signal, capture: true });
+    document.addEventListener('focusin', event => {
+      if (!panel.contains(event.target) && event.target !== trigger) close();
+    }, { signal });
+    document.addEventListener('scroll', schedulePosition, { signal, capture: true, passive: true });
+    window.addEventListener('resize', schedulePosition, { signal, passive: true });
+    window.visualViewport?.addEventListener('resize', schedulePosition, { signal, passive: true });
+    window.visualViewport?.addEventListener('scroll', schedulePosition, { signal, passive: true });
+  });
+})();
+`;

package/renderer/src/lib/authors.js

@@ -0,0 +1,18 @@
+// Generated from lettercamp/lib/authors.ts. Run pnpm sync:renderer in the app repository.
+export function readAuthors(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.flatMap(item => item && typeof item.name === "string"
+        ? [{ name: item.name, ...(typeof item.image === "string" ? { image: item.image } : {}) }] : []);
+}
+// Keep blank names while editing; only bylines omit unfinished author rows.
+export function resolveAuthors(source) {
+    return readAuthors(source.authors);
+}
+// Names alone are not identities: two contributors can share a name.
+export function authorKey(author) {
+    return JSON.stringify([author.name.trim().toLowerCase(), author.image || ""]);
+}
+export function uniqueAuthors(authors) {
+    return [...new Map(authors.filter(author => author.name.trim()).map(author => [authorKey(author), author])).values()];
+}

package/renderer/src/lib/block-widths.ts

@@ -0,0 +1,30 @@
+// Generated from lettercamp/lib/block-widths.ts. Run pnpm sync:renderer in the app repository.
+// One sizing contract for editor surfaces and published body blocks.
+const blocks = ':is(.publication-post .prose > table, [data-lettercamp-table], [data-lettercamp-code][data-code-width], [data-block-width], .publication-post .prose :is(img, video)[data-image-width]:not([width]), .publication-post .prose :is(img, video):is([data-image-width="wide"], [data-image-width="full"]))';
+const wide = ':is([data-table-width="wide"], [data-code-width="wide"], [data-block-width="wide"], [data-image-width="wide"])';
+const full = ':is([data-table-width="full"], [data-code-width="full"], [data-block-width="full"], [data-image-width="full"])';
+
+export const blockWidthStyles = `
+.publication-post { container-type: inline-size; }
+${blocks} {
+  --block-normal-width: 100%;
+  --block-display-width: var(--block-normal-width);
+  box-sizing: border-box; width: var(--block-display-width); max-width: var(--block-normal-width); margin-inline: auto;
+}
+${blocks}${wide} {
+  --block-display-width: max(var(--block-normal-width), min(calc(var(--block-normal-width) + 128px), var(--block-available-width, 100cqw)));
+  max-width: none; margin-inline: calc((100% - var(--block-display-width)) / 2);
+  margin-left: calc((100% - var(--block-display-width)) / 2 + min(0px, (var(--block-available-width, 100cqw) - var(--block-display-width)) / 2 - var(--block-column-offset, 0px)));
+}
+${blocks}${full} {
+  --block-display-width: max(var(--block-normal-width), var(--block-available-width, 100cqw));
+  max-width: none; margin-inline: calc((100% - var(--block-display-width)) / 2);
+  margin-left: calc((100% - var(--block-display-width)) / 2 - var(--block-column-offset, 0px));
+}
+/* The two-column TOC layout shifts the reading column 106px from center. */
+@media (min-width: 761px) and (max-width: 1199px) {
+  .publication-post[data-post-hero="split"][data-post-toc="visible"] .article-body-with-toc .prose {
+    --block-column-offset: 106px;
+  }
+}
+`;

package/renderer/src/lib/branding.js

@@ -0,0 +1,15 @@
+export const defaultSiteBranding = {
+  name: 'Lettercamp Blog',
+  logo: 'https://lettercamp.com/lettercamp-logo.png?v=7',
+  favicon: 'https://lettercamp.com/favicon-96x96.png?v=7',
+};
+
+export function withDefaultBranding(source) {
+  const branding = Object.fromEntries(Object.entries(defaultSiteBranding).map(([key, fallback]) =>
+    [key, typeof source[key] === 'string' && source[key].trim() ? source[key] : fallback]));
+  return {
+    ...source,
+    ...branding,
+    home: { ...source.home, title: source.home?.title ?? (branding.name === defaultSiteBranding.name ? branding.name : `${branding.name} Blog`) },
+  };
+}

package/renderer/src/lib/button.js

@@ -0,0 +1,10 @@
+// Keep the color fallback and contrast calculation aligned with the editor preview.
+export function buttonColors(value) {
+  const background = typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value) ? value : '#111111';
+  const channels = [1, 3, 5].map(offset => {
+    const channel = parseInt(background.slice(offset, offset + 2), 16) / 255;
+    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  });
+  const luminance = channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+  return { background, text: luminance > 0.179 ? '#000000' : '#ffffff' };
+}

package/renderer/src/lib/category-routes.js

@@ -0,0 +1,19 @@
+// Generated from lettercamp/lib/category-routes.ts. Run pnpm sync:renderer in the app repository.
+export function categoryTag(category) {
+    return category.trim().normalize("NFKC").toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "") || "category";
+}
+export function categoryRoutes(categories) {
+    const names = [...new Set(categories.map(name => name.trim()).filter(Boolean))];
+    const used = new Set();
+    const tags = new Map();
+    // Assign unique tags independently of the posts' date order.
+    for (const name of [...names].sort()) {
+        const base = categoryTag(name);
+        let tag = base;
+        for (let suffix = 2; used.has(tag); suffix++)
+            tag = `${base}-${suffix}`;
+        used.add(tag);
+        tags.set(name, tag);
+    }
+    return names.map(name => ({ name, tag: tags.get(name), href: `/category/${encodeURIComponent(tags.get(name))}/` }));
+}

package/renderer/src/lib/code-block.ts

@@ -0,0 +1,46 @@
+// Generated from lettercamp/lib/code-block.ts. Run pnpm sync:renderer in the app repository.
+export const codeThemes = { classic: "Classic", ocean: "Ocean", forest: "Forest", mono: "Monochrome" } as const;
+export type CodeBlockSettings = { width: "regular" | "wide" | "full"; wrap: boolean; theme: keyof typeof codeThemes; caption: string };
+const settingPattern = /(?:^|\s)lc-(width|wrap|theme|caption)=([^\s]*)/g;
+
+export function readCodeSettings(meta = ""): CodeBlockSettings {
+  const settings: CodeBlockSettings = { width: "regular", wrap: true, theme: "classic", caption: "" };
+  for (const match of meta.matchAll(settingPattern)) {
+    const [, key, value] = match;
+    if (key === "width" && (value === "regular" || value === "wide" || value === "full")) settings.width = value;
+    if (key === "theme" && Object.hasOwn(codeThemes, value)) settings.theme = value as CodeBlockSettings["theme"];
+    if (key === "wrap") settings.wrap = value !== "false";
+    if (key === "caption") { try { settings.caption = decodeURIComponent(value); } catch { /* Keep malformed source editable. */ } }
+  }
+  return settings;
+}
+
+export function writeCodeSettings(meta: string, patch: Partial<CodeBlockSettings>) {
+  const settings = { ...readCodeSettings(meta), ...patch };
+  return [meta.replace(settingPattern, "").trim(), `lc-width=${settings.width}`, `lc-wrap=${settings.wrap}`, `lc-theme=${settings.theme}`,
+    ...(settings.caption ? [`lc-caption=${encodeURIComponent(settings.caption)}`] : [])].filter(Boolean).join(" ");
+}
+
+// The editor and both publication renderers use the same token classes and palette.
+export const codeBlockStyles = `
+[data-lettercamp-code] { --code-keyword: #8250a0; --code-string: #3d7757; --code-number: #a15c32; --code-name: #326b99; --code-comment: #93939b; color: #414146; }
+[data-lettercamp-code][data-code-width] { margin-block: 24px; }
+[data-lettercamp-code][data-code-theme="ocean"] { --code-keyword: #3d62a8; --code-string: #277c85; --code-number: #98623e; --code-name: #6961a4; }
+[data-lettercamp-code][data-code-theme="forest"] { --code-keyword: #47724a; --code-string: #827030; --code-number: #a25d47; --code-name: #3c7b79; }
+[data-lettercamp-code][data-code-theme="mono"] { --code-keyword: #45454a; --code-string: #62626a; --code-number: #62626a; --code-name: #45454a; }
+[data-lettercamp-code] .tok-keyword, [data-lettercamp-code] .tok-operator { color: var(--code-keyword); }
+[data-lettercamp-code] .tok-string, [data-lettercamp-code] .tok-string2, [data-lettercamp-code] .tok-inserted { color: var(--code-string); }
+[data-lettercamp-code] .tok-number, [data-lettercamp-code] .tok-bool, [data-lettercamp-code] .tok-atom, [data-lettercamp-code] .tok-literal { color: var(--code-number); }
+[data-lettercamp-code] .tok-typeName, [data-lettercamp-code] .tok-className, [data-lettercamp-code] .tok-propertyName, [data-lettercamp-code] .tok-definition, [data-lettercamp-code] .tok-variableName2, [data-lettercamp-code] .tok-labelName { color: var(--code-name); }
+[data-lettercamp-code] .tok-comment, [data-lettercamp-code] .tok-meta { color: var(--code-comment); }
+[data-lettercamp-code] .tok-invalid, [data-lettercamp-code] .tok-deleted { color: #aa4747; }
+[data-lettercamp-code] .tok-strong { font-weight: 600; }
+[data-lettercamp-code] .tok-emphasis { font-style: italic; }
+figure[data-lettercamp-code] > pre { box-sizing: border-box; margin: 0; padding: 16px 0; overflow-x: auto; border-radius: 8px; background: #fafafa; color: #414146; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
+figure[data-lettercamp-code] > pre > code { display: block; width: max-content; min-width: 100%; padding: 0; background: transparent; color: inherit; font: inherit; white-space: normal; counter-reset: code-line; }
+[data-lettercamp-code] .code-line { position: relative; display: block; box-sizing: border-box; min-height: 1.7em; padding: 0 18px 0 calc(var(--code-gutter, 3ch) + 24px); white-space: pre; }
+[data-lettercamp-code] .code-line::before { position: absolute; left: 8px; width: var(--code-gutter, 3ch); text-align: right; content: counter(code-line); counter-increment: code-line; color: #b4b4bc; user-select: none; font-variant-numeric: tabular-nums; }
+[data-lettercamp-code][data-code-wrap="true"] > pre > code { width: 100%; }
+[data-lettercamp-code][data-code-wrap="true"] .code-line { white-space: pre-wrap; overflow-wrap: anywhere; }
+figure[data-lettercamp-code] > figcaption { margin: 8px 0 0; color: #888; font: 13px/1.5 var(--font-family, inherit); text-align: center; overflow-wrap: anywhere; }
+`;

package/renderer/src/lib/fonts.js

@@ -0,0 +1,33 @@
+// Generated from lettercamp/lib/font-resources.js. Run pnpm sync:renderer in the app repository.
+/** @param {Record<string, any>} typography */
+export function fontResources(typography = {}) {
+  const quote = value => '"' + Array.from(String(value), char => /[a-zA-Z0-9 -]/.test(char) ? char : '\\' + char.codePointAt(0).toString(16) + ' ').join('') + '"';
+  const google = new Set();
+  const custom = new Map();
+  const faces = [];
+  const resolve = value => {
+    if (value && typeof value.url === 'string' && !(typeof value.google === 'string' && value.google.trim())) {
+      try {
+        const url = new URL(value.url);
+        if (url.protocol !== 'https:' || url.username || url.password) throw new Error();
+        const weight = typeof value.weight === 'string' && /^(?:[1-9]\d{0,2}|1000)(?: (?:[1-9]\d{0,2}|1000))?$/.test(value.weight) ? value.weight : '400';
+        const key = url.href + ' ' + weight;
+        if (!custom.has(key)) {
+          const family = 'Lettercamp Custom ' + custom.size;
+          custom.set(key, family);
+          faces.push('@font-face{font-family:' + quote(family) + ';src:url(' + quote(url.href) + ');font-weight:' + weight + ';font-style:normal;font-display:swap;}');
+        }
+        return quote(custom.get(key)) + ', Arial, Helvetica, sans-serif';
+      } catch { /* Invalid custom URLs use the default family. */ }
+    }
+    const family = value && typeof value.google === 'string' && value.google.trim() ? value.google.trim() : 'Inter';
+    google.add(family);
+    return quote(family) + ', Arial, Helvetica, sans-serif';
+  };
+  const headingFamily = resolve(typography.headingFont);
+  const bodyFamily = resolve(typography.bodyFont);
+  return {
+    headingFamily, bodyFamily, css: faces.join('\n'),
+    googleUrl: google.size ? 'https://fonts.googleapis.com/css2?' + [...google].map(family => 'family=' + encodeURIComponent(family) + ':wght@400;500;600;700').join('&') + '&display=swap' : null,
+  };
+}

package/renderer/src/lib/home-layout.ts

@@ -0,0 +1,5 @@
+// Generated from lettercamp/lib/home-layout.ts. Run pnpm sync:renderer in the app repository.
+export function readHomeWidthPx(layout: { contentWidthPx?: unknown } = {}) {
+  const width = layout.contentWidthPx;
+  return typeof width === "number" && Number.isFinite(width) && width > 0 ? width : 1280;
+}

package/renderer/src/lib/image-radius.ts

@@ -0,0 +1,5 @@
+// Generated from lettercamp/lib/image-rounding.ts. Run pnpm sync:renderer in the app repository.
+export const defaultImageRadius = 2;
+export function readImageRadius(value: unknown): number {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 20 ? value : defaultImageRadius;
+}

package/renderer/src/lib/image-rounding.ts

@@ -0,0 +1,28 @@
+export { readImageRadius } from "./image-radius";
+
+export const siteImageSelector = ".post-card-cover, .cover img, .prose img, .article-hero-image img";
+// Observe published and preview content, including live editor replacements.
+export const imageRoundingScript = `(
+function observeImageSizes(root, selector) {
+  const observed = new Set();
+  const resize = new ResizeObserver(entries => {
+    for (const entry of entries) {
+      const box = entry.borderBoxSize[0];
+      const size = box ? Math.min(box.inlineSize, box.blockSize) : Math.min(entry.contentRect.width, entry.contentRect.height);
+      entry.target.style.setProperty("--image-short-side", size + "px");
+    }
+  });
+  const sync = () => {
+    for (const target of observed) {
+      if (!root.contains(target)) { resize.unobserve(target); observed.delete(target); }
+    }
+    for (const target of root.querySelectorAll(selector)) {
+      if (!observed.has(target)) { observed.add(target); resize.observe(target); }
+    }
+  };
+  sync();
+  const mutations = new MutationObserver(sync);
+  mutations.observe(root, { childList: true, subtree: true });
+  return () => { resize.disconnect(); mutations.disconnect(); };
+}
+)(document, ${JSON.stringify(siteImageSelector)});`;

package/renderer/src/lib/image-widths.ts

@@ -0,0 +1,13 @@
+export const imageWidthStyles = `
+.publication-post { container-type: inline-size; }
+.publication-post .prose video[data-image-width] { width: 100%; height: auto; }
+.publication-post .prose span:has(> img[data-image-width]),
+.publication-post .prose span:has(> a > img[data-image-width]) { display: block; }
+.publication-post .article-hero-image { width: min(100%, var(--post-content-width)); max-width: none; margin-inline: auto; }
+.publication-post .article-hero-image:not([data-image-width="regular"]):not([data-image-width="full"]) { width: min(100%, calc(var(--post-content-width) + 128px)); max-width: none; }
+.publication-post .article-hero-image[data-image-width="full"] { width: 100%; max-width: none; }
+.publication-post .article-hero-image[data-image-width="regular"] { width: min(100%, var(--cover-image-width, var(--post-content-width)), var(--post-content-width)); max-width: none; }
+.publication-post .article-hero:has(.article-hero-image:not([data-image-width="regular"])) { display: block; }
+.publication-post .article-hero:has(.article-hero-image:not([data-image-width="regular"])) .article-intro { max-width: var(--post-content-width); margin-inline: auto; }
+.publication-post .article-hero:has(.article-hero-image:not([data-image-width="regular"])) .article-hero-image { margin-top: 32px; }
+`;

package/renderer/src/lib/metadata.js

@@ -0,0 +1,47 @@
+// Generated from lettercamp/lib/page-metadata.ts. Run pnpm sync:renderer in the app repository.
+export function pageMetadata(site, page, url, article = false, basePath = "") {
+    const seo = site.seo && typeof site.seo === "object" ? site.seo : {};
+    const text = (value) => typeof value === "string" ? value.trim() : "";
+    const title = text(page.title) || text(site.name);
+    const pageTitle = title === site.name ? title : `${title} — ${text(site.name)}`;
+    const homepage = !article && new URL(url).pathname.replace(/\/+$/, "") === basePath.replace(/\/+$/, "");
+    const documentTitle = text(page.metaTitle) || (homepage && text(seo.metaTitle)) || pageTitle;
+    const description = text(page.metaDescription) || text(page.description) || text(site.description);
+    const socialTitle = text(page.ogTitle) || (homepage && (text(seo.ogTitle) || text(seo.metaTitle))) || title;
+    const socialDescription = text(page.ogDescription) || text(page.description) || text(seo.ogDescription) || description;
+    const canonical = new URL(url);
+    canonical.search = "";
+    canonical.hash = "";
+    const resolveUrl = (value) => {
+        try {
+            const resolved = text(value) && new URL(text(value), canonical);
+            return resolved && ["https:", "http:"].includes(resolved.protocol) ? resolved.href : "";
+        }
+        catch {
+            return "";
+        }
+    };
+    const imageUrl = resolveUrl(page.ogImage || page.image || seo.ogImage);
+    const imageAlt = text(page.ogImageAlt) || (page.ogImage || page.image ? text(page.imageAlt) : text(seo.ogImageAlt));
+    const twitterImageUrl = resolveUrl(page.twitterImage) || imageUrl;
+    const language = text(page.language) || text(site.language) || "en";
+    let locale = "";
+    try {
+        const parsed = new Intl.Locale(language).maximize();
+        locale = `${parsed.language}_${parsed.region}`;
+    }
+    catch { }
+    const keywords = page.keywords || seo.keywords || "";
+    return {
+        documentTitle, description, socialTitle, socialDescription, imageUrl, imageAlt, language, locale,
+        canonical: resolveUrl(page.canonicalUrl) || canonical.href,
+        keywords: Array.isArray(keywords) ? keywords.filter(value => typeof value === "string").join(", ") : text(keywords),
+        robots: page.noindex === true ? "noindex, follow" : "index, follow",
+        videoUrl: resolveUrl(page.ogVideo), videoType: text(page.ogVideoType),
+        twitterTitle: text(page.twitterTitle) || socialTitle,
+        twitterDescription: text(page.twitterDescription) || socialDescription,
+        twitterImageUrl, twitterImageAlt: text(page.twitterImageAlt) || (page.twitterImage ? "" : imageAlt),
+        twitterCard: ["summary", "summary_large_image"].includes(text(page.twitterCard)) ? text(page.twitterCard) : twitterImageUrl ? "summary_large_image" : "summary",
+        twitterSite: text(page.twitterSite), twitterCreator: text(page.twitterCreator),
+    };
+}

package/renderer/src/lib/mobile-navigation.ts

@@ -0,0 +1,76 @@
+// Delegated events also handle header controls rebuilt by the design preview.
+export const mobileNavigationScript = `
+(() => {
+  const mobile = matchMedia('(max-width: 600px)');
+  let active;
+  let restore;
+  const close = (focus = false) => {
+    if (!active) return;
+    const menu = active;
+    active = null;
+    menu.open = false;
+    const toggle = menu.querySelector('summary');
+    toggle.setAttribute('aria-label', 'Open menu');
+    toggle.setAttribute('aria-expanded', 'false');
+    restore?.();
+    restore = null;
+    if (focus && toggle.isConnected) toggle.focus({ preventScroll: true });
+  };
+  const position = () => {
+    if (!active) return;
+    const header = active.closest('.site-header');
+    header.style.setProperty('--mobile-menu-top', Math.max(0, header.getBoundingClientRect().bottom) + 'px');
+  };
+  document.addEventListener('toggle', event => {
+    const menu = event.target;
+    if (!(menu instanceof HTMLDetailsElement) || !menu.matches('.mobile-navigation')) return;
+    if (!menu.open) { if (active === menu) close(); return; }
+    if (!mobile.matches) { menu.open = false; return; }
+    if (active === menu) return;
+    close();
+    active = menu;
+    const header = menu.closest('.site-header');
+    const toggle = menu.querySelector('summary');
+    toggle.setAttribute('aria-label', 'Close menu');
+    toggle.setAttribute('aria-expanded', 'true');
+    const body = document.body;
+    const root = document.documentElement;
+    const overflow = body.style.overflow;
+    const rootOverflow = root.style.overflow;
+    const padding = body.style.paddingRight;
+    const scrollbar = innerWidth - root.clientWidth;
+    if (scrollbar > 0) body.style.paddingRight = (parseFloat(getComputedStyle(body).paddingRight) + scrollbar) + 'px';
+    body.style.overflow = root.style.overflow = 'hidden';
+    const background = [...body.children].filter(node => node instanceof HTMLElement && !node.contains(header) && !['SCRIPT', 'STYLE'].includes(node.tagName));
+    const inert = background.map(node => node.inert);
+    background.forEach(node => { node.inert = true; });
+    restore = () => {
+      body.style.overflow = overflow;
+      root.style.overflow = rootOverflow;
+      body.style.paddingRight = padding;
+      background.forEach((node, index) => { node.inert = inert[index]; });
+      header.style.removeProperty('--mobile-menu-top');
+    };
+    position();
+  }, true);
+  document.addEventListener('keydown', event => {
+    if (!active) return;
+    if (event.key === 'Escape') { event.preventDefault(); close(true); return; }
+    if (event.key !== 'Tab') return;
+    const header = active.closest('.site-header');
+    const items = [...header.querySelectorAll('a[href], summary, button:not(:disabled)')].filter(node => node.getClientRects().length);
+    const first = items[0], last = items[items.length - 1];
+    if (event.shiftKey && (document.activeElement === first || !header.contains(document.activeElement))) {
+      event.preventDefault(); last?.focus();
+    } else if (!event.shiftKey && (document.activeElement === last || !header.contains(document.activeElement))) {
+      event.preventDefault(); first?.focus();
+    }
+  });
+  document.addEventListener('click', event => {
+    if (active && event.target instanceof Element && event.target.closest('.site-header a[href]')) close();
+  }, true);
+  document.addEventListener('lettercamp:header-update', () => close());
+  window.addEventListener('pagehide', () => close());
+  window.addEventListener('resize', () => { if (!mobile.matches) close(); else position(); });
+})();
+`;

package/renderer/src/lib/post-layout.ts

@@ -0,0 +1,6 @@
+// Generated from lettercamp/lib/post-layout.ts. Run pnpm sync:renderer in the app repository.
+export function readContentWidthEm(layout: { contentWidthEm?: unknown } = {}) {
+  const width = layout.contentWidthEm;
+  if (typeof width === "number" && Number.isFinite(width) && width > 0) return width;
+  return 40;
+}