@lettercamp/cli 0.1.13 → 0.1.15

package/dist/build.js

@@ -1,3 +1,4 @@
+import { imageOptimization } from "./image-optimization.js";
 import { publicationLinks } from './publication-links.js';
 import { codeBlocks } from "./code-highlight.js";
 import { contentComponents } from "./content-component-syntax.js";
@@ -38,10 +39,12 @@ export async function buildSite(directory, options) {
             root: workspace, configFile: false, site: origin.origin, base: origin.pathname, trailingSlash: 'always',
             cacheDir: path.join(workspace, '.cache'),
             publicDir: path.join(workspace, '.lettercamp-no-public'), outDir, output: 'static',
-            integrations: [mdx(), react()],
+            integrations: [mdx(), react(), imageOptimization(workspace)],
             vite: reactViteConfig,
             markdown: { syntaxHighlight: false, processor: unified({ remarkPlugins: [contentComponents, readingTime, searchContent, codeBlocks, componentBlocks, [mediaDimensions, { root }], [publicationLinks, { basePath: origin.pathname }]], rehypePlugins: [[mediaDimensions, { root }]] }) },
-            build: { format: 'directory', ...(options.assetsPrefix ? { assetsPrefix: options.assetsPrefix } : {}) },
+            // Ship the publication's CSS with the document, avoiding a render-blocking
+            // HTML -> stylesheet round trip on every cold landing.
+            build: { format: 'directory', inlineStylesheets: 'always', ...(options.assetsPrefix ? { assetsPrefix: options.assetsPrefix } : {}) },
         });
         return outDir;
     }

package/dist/cli.js

@@ -28,9 +28,10 @@ export async function run(argv = process.argv) {
     program.command('new')
         .description('Download the starter into a new or empty directory')
         .argument('[directory]', 'Destination directory', 'my-lettercamp')
-        .action(async (directory) => {
+        .option('--preset <name>', 'Apply a starter preset, such as dark')
+        .action(async (directory, options) => {
         const { createSite } = await import('./new.js');
-        await createSite(directory);
+        await createSite(directory, options);
     });
     program.command('deploy')
         .description('Publish this folder; create or connect a site on first use')

package/dist/code-block.js

@@ -40,10 +40,10 @@ export const codeBlockStyles = `
 [data-lettercamp-code] .tok-invalid, [data-lettercamp-code] .tok-deleted { color: color-mix(in srgb, #aa4747, var(--site-foreground, #000000) var(--site-code-tint, 0%)); }
 [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: var(--site-surface, #fafafa); color: var(--site-text-strong, #414146); font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
+figure[data-lettercamp-code] > pre { --code-comment: var(--site-text-on-surface, #6c6c6c); box-sizing: border-box; margin: 0; padding: 16px 0; overflow-x: auto; border-radius: 8px; background: var(--site-surface, #fafafa); color: var(--site-text-strong, #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: var(--site-text-faint, #b4b4bc); user-select: none; font-variant-numeric: tabular-nums; }
+[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: var(--site-text-on-surface, #6c6c6c); 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: var(--site-text-muted, #888); font: 13px/1.5 var(--font-family, inherit); text-align: center; overflow-wrap: anywhere; }

package/dist/dev.js

@@ -1,3 +1,4 @@
+import { imageOptimization } from "./image-optimization.js";
 import { codeBlocks } from "./code-highlight.js";
 import { contentComponents } from "./content-component-syntax.js";
 import { componentBlocks } from "./component-blocks.js";
@@ -54,7 +55,7 @@ export async function startDev(directory, options) {
             base: options.base ?? '/',
             publicDir: path.join(workspace, '.lettercamp-no-public'),
             output: 'static',
-            integrations: [mdx(), react(), ...(options.middleware ? [{
+            integrations: [mdx(), react(), imageOptimization(workspace), ...(options.middleware ? [{
                         name: 'lettercamp-editor-preview',
                         hooks: { 'astro:config:setup': ({ addMiddleware }) => {
                                 addMiddleware({ entrypoint: options.middleware, order: 'post' });

package/dist/image-optimization.js

@@ -0,0 +1,11 @@
+import path from 'node:path';
+// Run after every page has rendered: includes Markdown, MDX, custom components,
+// and standard templates, without changing authored image URLs.
+export function imageOptimization(workspace) {
+    return {
+        name: 'lettercamp-image-variants',
+        hooks: { 'astro:config:setup': ({ addMiddleware }) => {
+                addMiddleware({ entrypoint: path.join(workspace, 'src/lib/image-middleware.ts'), order: 'post' });
+            } },
+    };
+}

package/dist/new.js

@@ -1,4 +1,4 @@
-import { cp, mkdir, mkdtemp, readdir, rm } from 'node:fs/promises';
+import { cp, mkdir, mkdtemp, readdir, readFile, rm, writeFile } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { downloadTemplate } from 'giget';
@@ -15,7 +15,39 @@ async function ensureEmpty(directory) {
     if (entries.length)
         throw new Error(`Directory is not empty: ${directory}. Choose a new or empty directory.`);
 }
-export async function createSite(directory) {
+function isObject(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+// Merge nested settings while replacing arrays and scalar values in full.
+function mergeSettings(base, overrides) {
+    return Object.fromEntries([...new Set([...Object.keys(base), ...Object.keys(overrides)])].map(key => {
+        if (!Object.hasOwn(overrides, key))
+            return [key, base[key]];
+        const value = overrides[key];
+        return [key, isObject(base[key]) && isObject(value) ? mergeSettings(base[key], value) : value];
+    }));
+}
+async function applyPreset(directory, name) {
+    const presets = path.join(directory, 'presets');
+    const available = (await readdir(presets).catch(error => {
+        if (error.code === 'ENOENT')
+            return [];
+        throw error;
+    })).filter(file => /^[a-z0-9][a-z0-9-]*\.json$/.test(file)).map(file => file.slice(0, -5)).sort();
+    if (!available.includes(name)) {
+        throw new Error(`Unknown preset "${name}". Available presets: ${available.join(', ') || 'none'}. Omit --preset to use the default starter.`);
+    }
+    const preset = JSON.parse(await readFile(path.join(presets, `${name}.json`), 'utf8'));
+    if (!isObject(preset) || !isObject(preset.settings))
+        throw new Error(`Preset "${name}" must contain a settings object.`);
+    const settingsPath = path.join(directory, 'settings.json');
+    const settings = JSON.parse(await readFile(settingsPath, 'utf8'));
+    await writeFile(settingsPath, JSON.stringify(mergeSettings(settings, preset.settings), null, 2) + '\n');
+}
+export async function createSite(directory, options = {}) {
+    if (options.preset !== undefined && !/^[a-z0-9][a-z0-9-]*$/.test(options.preset)) {
+        throw new Error('Use a preset name containing lowercase letters, numbers, and hyphens, such as dark.');
+    }
     const destination = path.resolve(directory);
     await ensureEmpty(destination);
     const temporary = await mkdtemp(path.join(tmpdir(), 'lettercamp-new-'));
@@ -26,6 +58,10 @@ export async function createSite(directory) {
             force: true,
             preferOffline: false,
         });
+        if (options.preset !== undefined)
+            await applyPreset(temporary, options.preset);
+        // Presets are creation inputs, not part of the user's publication.
+        await rm(path.join(temporary, 'presets'), { recursive: true, force: true });
         // Download first, so a failed request does not leave a half-created site.
         await ensureEmpty(destination);
         await mkdir(destination, { recursive: true });

package/dist/upload.js

@@ -8,11 +8,11 @@ async function uploadFile(file, slug, token) {
         const info = await handle.stat();
         if (!info.isFile() || !info.size)
             throw new Error('Choose a nonempty image or font file.');
-        if (info.size > 10 * 1024 * 1024)
-            throw new Error('Files must be 10 MB or smaller.');
+        if (info.size > 100 * 1024 * 1024)
+            throw new Error('Files must be 100 MB or smaller.');
         bytes = await handle.readFile();
-        if (bytes.byteLength > 10 * 1024 * 1024)
-            throw new Error('Files must be 10 MB or smaller.');
+        if (bytes.byteLength > 100 * 1024 * 1024)
+            throw new Error('Files must be 100 MB or smaller.');
     }
     finally {
         await handle.close();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lettercamp/cli",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "The repository for the Lettercamp CLI",
   "keywords": [
     "lettercamp",

package/renderer/src/components/BlogHome.astro

@@ -8,7 +8,6 @@ const { site, category = '' } = Astro.props;
 const allPosts = getPosts(site.language, site.timeZone);
 const posts = allPosts.filter(post => !category || post.category === category);
 const categories = getCategories();
-const hasCategories = categories.length > 0;
 const featuredLimit = 9;
 ---
 
@@ -18,17 +17,17 @@ const featuredLimit = 9;
     {site.description && <p class="description" style="margin-top: 12px">{site.description}</p>}
   </header>
   <div class="blog-toolbar">
-    {hasCategories && <nav class="category-selector" aria-label="Filter posts by category" hidden={site.home?.showCategories === false}>
+    {categories.length > 0 ? <nav class="category-selector" aria-label="Filter posts by category">
       <a href={sitePath("/")} data-category="" aria-current={!category ? "page" : undefined}>All</a>
       {categories.map(item => <a href={item.href} data-category={item.name} aria-current={category === item.name ? "page" : undefined}>{item.name}</a>)}
-    </nav>}
+    </nav> : <p class="post-count">{allPosts.length} posts</p>}
     <PostSearch posts={allPosts} />
   </div>
   <p class="sr-only" data-results-count role="status" aria-live="polite">{posts.length} articles</p>
   <section aria-label="Recent articles">
     <h2 class="sr-only">Recent articles</h2>
     <div class="post-list" data-featured-posts>
-      {posts.slice(0, featuredLimit).map(post => <PostCard post={post} site={site} />)}
+      {posts.slice(0, featuredLimit).map((post, index) => <PostCard post={post} site={site} priority={index === 0} />)}
     </div>
     <p class="empty-state" data-empty-state hidden={posts.length > 0}>No articles here yet.</p>
   </section>

package/renderer/src/components/PostCard.astro

@@ -1,13 +1,13 @@
 ---
 import AuthorByline from './AuthorByline.astro';
-const { post, site } = Astro.props;
+const { post, site, priority = false } = Astro.props;
 const image = post.ogImage ?? post.image ?? site.seo?.ogImage;
 ---
 
 <article class="post-card" data-post-category={post.category}>
   <div class="post-card-layout">
     <div class="post-card-cover">
-      {image ? <img src={image} alt="" width="1200" height="630" loading="lazy" /> : <span class="image-placeholder" aria-hidden="true">{site.name}</span>}
+      {image ? <img src={image} alt="" width="1200" height="630" loading={priority ? 'eager' : 'lazy'} fetchpriority={priority ? 'high' : undefined} /> : <span class="image-placeholder" aria-hidden="true">{site.name}</span>}
     </div>
     <div class="post-card-content">
       {(post.category || post.date?.label) && <div class="post-card-details">

package/renderer/src/components/PostSearch.astro

@@ -1,4 +1,5 @@
 ---
+import { LuSearch } from 'react-icons/lu';
 import '../styles/post-search.css';
 import { postSearchScript } from '../lib/post-search';
 const { posts } = Astro.props;
@@ -14,12 +15,12 @@ const index = JSON.stringify(posts.map(post => ({
 ---
 
 <div class="post-search-trigger" hidden>
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4.5 4.5" /></svg>
-  <button type="button" aria-label="Search articles" aria-haspopup="dialog" aria-controls="post-search-dialog">Search articles…</button>
+  <LuSearch aria-hidden="true" />
+  <button type="button" aria-label="Search articles" aria-haspopup="dialog" aria-controls="post-search-dialog"><span>Search articles…</span></button>
 </div>
 <dialog id="post-search-dialog" class="post-search-dialog" aria-label="Search articles">
   <div class="post-search-header">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4.5 4.5" /></svg>
+    <LuSearch aria-hidden="true" />
     <input type="text" role="searchbox" enterkeyhint="search" placeholder="Search articles…" aria-label="Search article titles and content" aria-controls="post-search-results" autocomplete="off" spellcheck="false" autofocus />
     <button type="button" class="post-search-close" aria-label="Close search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg></button>
   </div>

package/renderer/src/layouts/SiteLayout.astro

@@ -21,8 +21,8 @@ import { googleAnalyticsScript } from '../lib/analytics';
 import Header from '../components/HeaderSlot.astro';
 import Footer from '../components/FooterSlot.astro';
 
-const { site, page, article = false } = Astro.props;
-const meta = pageMetadata(site, page, Astro.url, article, basePath);
+const { site, page, article = false, posts = [], priorityImage } = Astro.props;
+const meta = pageMetadata(site, page, Astro.url, article, basePath, posts);
 const typography = site.design?.typography ?? {};
 const fonts = fontResources(typography, article ? 700 : 500);
 const fontSize = (value, fallback) => typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : fallback;
@@ -38,6 +38,7 @@ const analytics = googleAnalyticsScript(site.analytics?.googleAnalyticsId);
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    {priorityImage && <link rel="preload" as="image" href={priorityImage} fetchpriority="high" />}
     {fonts.preloads.map(href => <link data-lettercamp-font-preload rel="preload" href={href} as="font" type="font/woff2" crossorigin />)}
     {fonts.googleUrl && <>
       <link rel="preconnect" href="https://fonts.googleapis.com" />

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

@@ -69,7 +69,8 @@ export const authorDialogScript = `
       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;
+        if (author.imageAttributes) Object.assign(image, author.imageAttributes);
+        else 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('')));

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

@@ -36,10 +36,10 @@ export const codeBlockStyles = `
 [data-lettercamp-code] .tok-invalid, [data-lettercamp-code] .tok-deleted { color: color-mix(in srgb, #aa4747, var(--site-foreground, #000000) var(--site-code-tint, 0%)); }
 [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: var(--site-surface, #fafafa); color: var(--site-text-strong, #414146); font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
+figure[data-lettercamp-code] > pre { --code-comment: var(--site-text-on-surface, #6c6c6c); box-sizing: border-box; margin: 0; padding: 16px 0; overflow-x: auto; border-radius: 8px; background: var(--site-surface, #fafafa); color: var(--site-text-strong, #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: var(--site-text-faint, #b4b4bc); user-select: none; font-variant-numeric: tabular-nums; }
+[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: var(--site-text-on-surface, #6c6c6c); 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: var(--site-text-muted, #888); font: 13px/1.5 var(--font-family, inherit); text-align: center; overflow-wrap: anywhere; }

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

@@ -0,0 +1,135 @@
+import { fromHtml } from 'hast-util-from-html';
+import { toHtml } from 'hast-util-to-html';
+import type { Element, Root, RootContent } from 'hast';
+import { IMAGE_ORIGIN, imageAttributes, imageAsset, type ImageManifest } from './image-variants';
+import { readImageManifest } from './image-manifest';
+
+const classes = (node: Element) => Array.isArray(node.properties.className) ? node.properties.className : [];
+const has = (nodes: Element[], name: string) => nodes.some(node => classes(node).includes(name));
+const viewport = (max: number) => `(max-width: 600px) min(${max}px, calc(100vw - 32px)), (max-width: 900px) min(${max}px, calc(100vw - 48px)), min(${max}px, calc(100vw - 64px))`;
+
+function managedImage(node: Element, parents: Element[]) {
+  if (node.tagName !== 'img' || typeof node.properties.src !== 'string' || node.properties.srcSet) return false;
+  // Hydrated components own their DOM and props. Rewriting their server HTML
+  // would disagree with the client render and can restore the original URL.
+  if (parents.some(parent => parent.tagName === 'astro-island')) return false;
+  return !parents.some(parent => parent.tagName === 'picture' && parent.children.some(child => child.type === 'element' && child.tagName === 'source'));
+}
+
+function sizesFor(node: Element, parents: Element[]) {
+  const props = node.properties;
+  if (typeof props.sizes === 'string') return props.sizes;
+  if (has([...parents, node], 'author-portrait')) return '24px';
+  if (has(parents, 'brand')) return `${Number(props.width) || 30}px`;
+  if (has(parents, 'post-card-cover')) {
+    const home = parents.find(parent => classes(parent).includes('blog-home'));
+    const max = Number(String(home?.properties.style).match(/--home-content-width:\s*([\d.]+)px/)?.[1]) || 1280;
+    const sizes = [];
+    // The site's container queries use 552/852px; viewport gutters also change.
+    for (const [limit, gutter] of [[600, 32], [900, 48], [100000, 64]]) {
+      const container = `min(${max}px, calc(100vw - ${gutter}px))`;
+      if (home?.properties.dataHomeLayout === 'rows') {
+        sizes.push(max <= 552 || limit === 600
+          ? `(max-width: ${limit}px) calc(${container} - 2px)`
+          : `(max-width: ${limit}px) calc((${container} - 32px) * .43 - 2px)`);
+      } else {
+        if (max <= 552) sizes.push(`(max-width: ${limit}px) calc(${container} - 2px)`);
+        else {
+          sizes.push(`(max-width: ${Math.min(limit, 552 + gutter)}px) calc(${container} - 2px)`);
+          if (max <= 852) sizes.push(`(max-width: ${limit}px) calc((${container} - 32px) / 2 - 2px)`);
+          else {
+            sizes.push(`(max-width: ${Math.min(limit, 852 + gutter)}px) calc((${container} - 32px) / 2 - 2px)`);
+            sizes.push(`(max-width: ${limit}px) calc((${container} - 96px) / 3 - 2px)`);
+          }
+        }
+      }
+    }
+    return sizes.join(', ') + ', 400px';
+  }
+  const hero = parents.find(parent => classes(parent).includes('article-hero-image'));
+  if (hero) {
+    const article = parents.find(parent => classes(parent).includes('publication-post'));
+    const width = Number(article?.properties.dataImageContentWidth) || 640;
+    const mode = hero.properties.dataImageWidth;
+    const fixed = Number(String(hero.properties.style).match(/--cover-image-width:\s*([\d.]+)px/)?.[1]);
+    const max = mode === 'full' ? 1280 : mode === 'regular' ? Math.min(fixed || width, width) : width + 128;
+    if (article?.properties.dataPostHero === 'split') return `(max-width: 600px) min(${max}px, calc(100vw - 32px)), (max-width: 760px) min(${max}px, calc(100vw - 48px)), (max-width: 900px) min(${max}px, calc((100vw - 80px) / 2)), min(${max}px, calc((min(1280px, 100vw - 64px) - 64px) / 2))`;
+    return viewport(max);
+  }
+  // Lazy images use their actual layout size in supporting browsers, including
+  // custom blocks. The fallback supports older browsers without runtime JS.
+  return viewport(Number(props.width) || 800);
+}
+
+export async function optimizeImageHtml(html: string) {
+  if (!html.includes(`${IMAGE_ORIGIN}/`)) return html;
+  const tree = fromHtml(html);
+  const elements: { node: Element; parents: Element[] }[] = [];
+  function walk(node: Root | RootContent, parents: Element[] = []) {
+    if (node.type === 'element') elements.push({ node, parents });
+    if ('children' in node) for (const child of node.children) walk(child, node.type === 'element' ? [...parents, node] : parents);
+  }
+  walk(tree);
+  const urls = new Set<string>();
+  const authors = new Map<Element, { image?: string; imageAttributes?: unknown }[]>();
+  const indexes = new Map<Element, { image?: string; imageAttributes?: unknown }[]>();
+  const add = (url: unknown) => { if (typeof url === 'string' && imageAsset(url)) urls.add(url); };
+  for (const { node, parents } of elements) {
+    if (managedImage(node, parents)) add(node.properties.src);
+    if (node.tagName === 'button' && classes(node).includes('author-more') && typeof node.properties.dataAuthors === 'string') {
+      const data = JSON.parse(node.properties.dataAuthors);
+      authors.set(node, data); data.forEach((author: { image?: string }) => add(author.image));
+    }
+    if (node.tagName === 'script' && node.properties.dataPostSearchIndex !== undefined) {
+      const data = JSON.parse(node.children.map(child => child.type === 'text' ? child.value : '').join(''));
+      indexes.set(node, data); data.forEach((post: { image?: string }) => add(post.image));
+    }
+  }
+  if (!urls.size) return html;
+  const manifests = new Map<string, ImageManifest | null>();
+  const pending = [...urls];
+  // Bound build concurrency; repeated pages reuse the shared manifest cache.
+  await Promise.all(Array.from({ length: Math.min(8, pending.length) }, async () => {
+    for (;;) {
+      const url = pending.shift();
+      if (!url) break;
+      try { manifests.set(url, await readImageManifest(url)); }
+      catch { /* Variant metadata is optional; keep the original image available. */ }
+    }
+  }));
+  const priority = new Map<string, ReturnType<typeof imageAttributes>>();
+  for (const { node, parents } of elements) {
+    if (!managedImage(node, parents)) continue;
+    const original = node.properties.src as string;
+    const manifest = manifests.get(original);
+    const small = has(parents, 'brand') || has(parents, 'author-portrait');
+    const loading = node.properties.loading ?? (!small && node.properties.fetchPriority !== 'high' ? 'lazy' : undefined);
+    const specifiedSizes = sizesFor(node, parents);
+    const sizes = `${loading === 'lazy' && !/^auto(?:\s*,|$)/.test(specifiedSizes) ? 'auto, ' : ''}${specifiedSizes}`;
+    const attrs = imageAttributes(manifest, sizes, small ? 64 : 800);
+    if (!attrs) continue;
+    Object.assign(node.properties, attrs, { loading, decoding: 'async', dataImageOriginal: original });
+    if (manifest) {
+      const width = Number(node.properties.width), height = Number(node.properties.height);
+      if (!width && !height) Object.assign(node.properties, { width: manifest.width, height: manifest.height });
+      else if (width > 0 && !node.properties.height) node.properties.height = Math.max(1, Math.round(width * manifest.height / manifest.width));
+      else if (height > 0 && !node.properties.width) node.properties.width = Math.max(1, Math.round(height * manifest.width / manifest.height));
+    }
+    if (node.properties.fetchPriority === 'high') priority.set(original, attrs);
+  }
+  for (const { node } of elements) {
+    if (node.tagName === 'link' && node.properties.as === 'image') {
+      const attrs = priority.get(String(node.properties.href));
+      if (attrs) Object.assign(node.properties, { href: attrs.src, imageSrcSet: attrs.srcSet, imageSizes: attrs.sizes });
+    }
+  }
+  for (const [node, data] of authors) {
+    for (const author of data) if (author.image) author.imageAttributes = imageAttributes(manifests.get(author.image), '24px', 64);
+    node.properties.dataAuthors = JSON.stringify(data);
+  }
+  for (const [node, data] of indexes) {
+    for (const post of data) if (post.image) post.imageAttributes = imageAttributes(manifests.get(post.image), '64px', 400);
+    node.children = [{ type: 'text', value: JSON.stringify(data).replace(/</g, '\\u003c') }];
+  }
+  return toHtml(tree);
+}

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

@@ -0,0 +1,26 @@
+// Generated from lettercamp/lib/image-manifest.ts.
+import { IMAGE_ORIGIN, imageAsset, type ImageManifest } from "./image-variants";
+
+const cache = new Map<string, { expires: number; value: Promise<ImageManifest | null> }>();
+export async function readImageManifest(url: string): Promise<ImageManifest | null> {
+  const asset = imageAsset(url);
+  if (!asset) return null;
+  const key = `${IMAGE_ORIGIN}/${asset.prefix}/manifest.json`;
+  const cached = cache.get(key);
+  if (cached && cached.expires > Date.now()) return cached.value;
+  if (cache.size >= 512) cache.delete(cache.keys().next().value!);
+  // Keep an in-flight request shared even when a slow response takes >2 seconds.
+  const entry = { expires: Infinity, value: Promise.resolve<ImageManifest | null>(null) };
+  entry.value = (async () => {
+    const response = await fetch(key, { credentials: "omit", headers: typeof window === "undefined" ? { "User-Agent": "Lettercamp/1.0" } : undefined, signal: AbortSignal.timeout(15_000), cache: "no-store" });
+    entry.expires = Date.now() + 2000;
+    if (response.status === 404) return null; // Older uploads remain usable until backfilled.
+    if (!response.ok) throw new Error(`Unable to read image variants (${response.status}).`);
+    const manifest = await response.json() as ImageManifest;
+    if (manifest.status === "ready" || manifest.status === "skipped") entry.expires = Date.now() + 300_000;
+    return manifest;
+  })();
+  cache.set(key, entry);
+  try { return await entry.value; }
+  catch (error) { if (cache.get(key) === entry) cache.delete(key); throw error; }
+}

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

@@ -0,0 +1,11 @@
+import { defineMiddleware } from 'astro:middleware';
+import { optimizeImageHtml } from './image-html';
+
+export const onRequest = defineMiddleware(async (_context, next) => {
+  const response = await next();
+  if (!response.headers.get('content-type')?.includes('text/html')) return response;
+  const html = await optimizeImageHtml(await response.text());
+  const headers = new Headers(response.headers);
+  headers.delete('content-length');
+  return new Response(html, { status: response.status, statusText: response.statusText, headers });
+});

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

@@ -0,0 +1,68 @@
+// Generated from lettercamp/lib/image-variants.ts.
+// Shared by uploads, the editor, and the published renderer. Changing the recipe
+// requires a new version: existing immutable objects must never change in place.
+export const IMAGE_RECIPE = "v1";
+export const IMAGE_WIDTHS = [64, 400, 800, 1600] as const;
+export const IMAGE_ORIGIN = "https://assets.lettercamp.com";
+export type ImageVariant = { url: string; width: number; height: number; bytes: number };
+export type ImageManifest = {
+  version: typeof IMAGE_RECIPE; original: string; width: number; height: number;
+  status: "pending" | "ready" | "skipped" | "failed"; variants: ImageVariant[];
+};
+
+export function imageAsset(url: string) {
+  try {
+    const parsed = new URL(url);
+    if (parsed.origin !== IMAGE_ORIGIN || parsed.search || parsed.hash) return null;
+    const match = /^\/sites\/([a-f0-9-]{36})\/([a-f0-9-]{36})\.(jpg|jpeg|png|webp|gif)$/i.exec(parsed.pathname);
+    if (match) return { key: parsed.pathname.slice(1), siteId: match[1], id: match[2], prefix: `sites/${match[1]}/${match[2]}/${IMAGE_RECIPE}` };
+    // Shared originals keep their existing URLs. Include the full original key
+    // (and extension) so different source libraries cannot collide.
+    if (/^\/(?:starter\/v\d+\/(?:covers|authors)|system\/(?:branding|starter))\/[a-z0-9_./-]+\.(jpg|jpeg|png|webp|gif)$/i.test(parsed.pathname)) {
+      const key = parsed.pathname.slice(1);
+      return { key, siteId: null, id: key, prefix: `starter/assets/${IMAGE_RECIPE}/${key}` };
+    }
+    return null;
+  } catch { return null; }
+}
+
+export function imageWidths(width: number): number[] {
+  return [...new Set(IMAGE_WIDTHS.map(size => Math.min(size, width)))];
+}
+
+export function imageTransformOptions(width: number) {
+  return { width, fit: "scale-down" as const, format: "webp" as const, quality: "high" as const, metadata: "none" as const };
+}
+
+export function imageAttributes(manifest: ImageManifest | null | undefined, sizes: string, fallbackWidth = 800) {
+  if (manifest?.status !== "ready" || !manifest.variants.length) return null;
+  const variants = manifest.variants;
+  const fallback = variants.find(variant => variant.width >= fallbackWidth) ?? variants[variants.length - 1];
+  return { sizes, srcSet: variants.map(variant => `${variant.url} ${variant.width}w`).join(", "), src: fallback.url };
+}
+
+// GIFs remain intact. Detect animated PNG/WebP by their container chunks, never
+// by guessing whether an image is a photo, illustration, or screenshot.
+export function animatedImage(bytes: Uint8Array, format: string): boolean {
+  if (format === "gif") return true;
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const name = (offset: number) => String.fromCharCode(...bytes.subarray(offset, offset + 4));
+  if (format === "png") {
+    for (let offset = 8; offset + 12 <= bytes.length;) {
+      const length = view.getUint32(offset);
+      if (name(offset + 4) === "acTL") return true;
+      if (name(offset + 4) === "IDAT") return false;
+      offset += length + 12;
+    }
+  }
+  if (format === "webp") {
+    for (let offset = 12; offset + 8 <= bytes.length;) {
+      const length = view.getUint32(offset + 4, true);
+      if (name(offset) === "ANIM") return true;
+      if (name(offset) === "VP8X" && length > 0 && offset + 8 < bytes.length) return (bytes[offset + 8] & 2) !== 0;
+      if (name(offset) === "VP8 " || name(offset) === "VP8L") return false;
+      offset += 8 + length + (length % 2);
+    }
+  }
+  return format === "png" || format === "webp";
+}

package/renderer/src/lib/metadata.js

@@ -1,10 +1,26 @@
 // Generated from lettercamp/lib/page-metadata.ts.
-export function pageMetadata(site, page, url, article = false, basePath = "") {
+const text = (value) => typeof value === "string" ? value.trim() : "";
+function siteCover(site, posts) {
+    const timestamp = (value) => {
+        if (value && typeof value === "object" && "timestamp" in value && typeof value.timestamp === "number")
+            return value.timestamp;
+        const time = value ? new Date(String(value)).valueOf() : NaN;
+        return Number.isNaN(time) ? -Infinity : time;
+    };
+    const post = posts.filter(post => post.draft !== true && (text(post.image) || text(post.ogImage)))
+        .sort((a, b) => timestamp(b.date) - timestamp(a.date) || (a.href ?? "").localeCompare(b.href ?? ""))[0];
+    return post
+        ? { image: text(post.image) || text(post.ogImage), alt: (text(post.image) ? text(post.imageAlt) : text(post.ogImageAlt)) || text(post.title) }
+        : { image: text(site.logo), alt: text(site.name) };
+}
+export function pageMetadata(site, page, url, article = false, basePath = "", posts = []) {
     const seo = site.seo && typeof site.seo === "object" ? site.seo : {};
-    const text = (value) => typeof value === "string" ? value.trim() : "";
+    const homepage = !article && new URL(url).pathname.replace(/\/+$/, "") === basePath.replace(/\/+$/, "");
+    // Homepage overrides belong to the blog root, not posts or category pages.
+    if (homepage)
+        page = { ...seo, ...page };
     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;
@@ -21,8 +37,10 @@ export function pageMetadata(site, page, url, article = false, basePath = "") {
             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 explicitImage = text(page.ogImage) || text(page.image) || text(seo.ogImage);
+    const fallback = homepage && !explicitImage ? siteCover(site, posts) : undefined;
+    const imageUrl = resolveUrl(explicitImage || fallback?.image);
+    const imageAlt = text(page.ogImageAlt) || (fallback ? fallback.alt : 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 = "";

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

@@ -81,7 +81,8 @@ export const postSearchScript = String.raw`(() => {
       link.href = post.href;
       if (post.image) {
         const image = element('img', 'post-search-image', '');
-        image.src = post.image;
+        if (post.imageAttributes) Object.assign(image, post.imageAttributes);
+        else image.src = post.image;
         image.alt = '';
         image.width = 1200;
         image.height = 630;

package/renderer/src/lib/site-colors.ts

@@ -4,16 +4,36 @@
 export function siteColors(design?: { backgroundColor?: unknown; accentColor?: unknown }): Record<string, string> {
   const [background, accent] = [design?.backgroundColor, design?.accentColor].map((value, index) =>
     typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value) ? value.toLowerCase() : index === 0 ? "#ffffff" : "");
-  const [text, accentText] = [background, accent || background].map(color => {
+  const luminance = (color: string) => {
     const linear = [1, 3, 5].map(offset => {
       const channel = parseInt(color.slice(offset, offset + 2), 16) / 255;
       return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
     });
-    const luminance = linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
-    return (luminance + 0.05) / 0.05 >= 1.05 / (luminance + 0.05) ? "#000000" : "#ffffff";
+    return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
+  };
+  const contrast = (a: string, b: string) => {
+    const [light, dark] = [luminance(a), luminance(b)].sort((a, b) => b - a);
+    return (light + 0.05) / (dark + 0.05);
+  };
+  const [text, accentText] = [background, accent || background].map(color => {
+    return contrast(color, "#000000") >= contrast(color, "#ffffff") ? "#000000" : "#ffffff";
   });
   const base = [1, 3, 5].map(offset => parseInt(background.slice(offset, offset + 2), 16));
   const target = text === "#000000" ? 0 : 255;
+  const blend = (amount: number) => "#" + base.map(channel => Math.round(channel + (target - channel) * amount).toString(16).padStart(2, "0")).join("");
+  // Test the rounded sRGB color, not a perceptual distance or rounded ratio.
+  // Keep the least contrast possible while still meeting WCAG AA for small text.
+  const readable = (amount: number, backgrounds: string[]) => {
+    const passes = (value: number) => backgrounds.every(bg => contrast(blend(value), bg) >= 4.5);
+    if (passes(amount)) return blend(amount);
+    let low = amount, high = 1;
+    for (let step = 0; step < 24; step++) {
+      const middle = (low + high) / 2;
+      if (passes(middle)) high = middle;
+      else low = middle;
+    }
+    return blend(high);
+  };
   // Reference grays on white. Retain each shade's distance along the
   // background-to-foreground scale; e.g. 250 preserves #fafafa on white.
   const shades: Record<string, number> = {
@@ -36,7 +56,25 @@ export function siteColors(design?: { backgroundColor?: unknown; accentColor?: u
     "--site-code-tint": target === 255 ? "45%" : "0%",
   };
   for (const [name, gray] of Object.entries(shades)) {
-    colors[`--site-${name}`] = "#" + base.map(channel => Math.round(channel + (target - channel) * (1 - gray / 255)).toString(16).padStart(2, "0")).join("");
+    let amount = 1 - gray / 255;
+    // Midtone backgrounds may barely pass with black or white. Do not tint
+    // their surfaces so far that even the foreground can no longer pass.
+    if (name.startsWith("surface") && contrast(blend(amount), text) < 4.5) {
+      let low = 0, high = amount;
+      for (let step = 0; step < 24; step++) {
+        const middle = (low + high) / 2;
+        if (contrast(blend(middle), text) >= 4.5) low = middle;
+        else high = middle;
+      }
+      amount = low;
+    }
+    colors[`--site-${name}`] = blend(amount);
+  }
+  const surfaces = [background, colors["--site-surface"], colors["--site-surface-hover"], colors["--site-surface-active"]];
+  for (const name of ["text-strong", "text-secondary"]) {
+    colors[`--site-${name}`] = readable(1 - shades[name] / 255, surfaces);
   }
+  colors["--site-text-muted"] = colors["--site-text-faint"] = readable(0, [background]);
+  colors["--site-text-on-surface"] = readable(0, surfaces);
   return colors;
 }

package/renderer/src/pages/[...slug].astro

@@ -36,8 +36,9 @@ const coverWidthMode = ['regular', 'wide', 'full'].includes(frontmatter.coverWid
 const coverWidth = /^[0-9]+$/.test(String(frontmatter.coverWidth)) && Number(frontmatter.coverWidth) > 0 ? `${frontmatter.coverWidth}px` : undefined;
 ---
 
-<SiteLayout site={site} page={frontmatter} article>
+<SiteLayout site={site} page={frontmatter} article priorityImage={postLayout.showCover !== false ? coverImage : undefined}>
   <article class="publication publication-post" style={{ '--post-content-width': `calc(var(--text-base) * ${readContentWidthEm(postLayout)})` }} data-post-hero={postLayout.heroLayout ?? 'stacked'}
+    data-image-content-width={readContentWidthEm(postLayout) * (Number(site.design?.typography?.bodyBaseSizePx) || 16)}
     data-reading-minutes={frontmatter.readingMinutes}
     data-post-cover={postLayout.showCover === false ? 'hidden' : 'visible'} data-post-toc={postLayout.showTableOfContents === false ? 'hidden' : 'visible'}>
     <header class:list={['article-header', 'article-hero', { 'article-hero-with-image': coverImage }]}>

package/renderer/src/pages/category/[tag].astro

@@ -1,7 +1,7 @@
 ---
 import SiteLayout from '../../layouts/SiteLayout.astro';
 import BlogHome from '../../components/BlogHome.astro';
-import { getCategories } from '../../lib/posts.js';
+import { getCategories, getPosts } from '../../lib/posts.js';
 import site from '../../site.js';
 
 export function getStaticPaths() {
@@ -9,8 +9,10 @@ export function getStaticPaths() {
 }
 
 const { category } = Astro.props;
+const firstPost = getPosts(site.language, site.timeZone).find(post => post.category === category);
+const priorityImage = firstPost && (firstPost.ogImage ?? firstPost.image ?? site.seo?.ogImage);
 ---
 
-<SiteLayout site={site} page={{ title: category }}>
+<SiteLayout site={site} page={{ title: category }} priorityImage={priorityImage}>
   <BlogHome site={site} category={category} />
 </SiteLayout>

package/renderer/src/pages/index.astro

@@ -2,9 +2,13 @@
 import SiteLayout from '../layouts/SiteLayout.astro';
 import BlogHome from '../components/BlogHome.astro';
 import site from '../site.js';
+import { getPosts } from '../lib/posts.js';
 const title = site.home.title ?? `${site.name} Blog`;
+const posts = getPosts(site.language, site.timeZone);
+const firstPost = posts[0];
+const priorityImage = firstPost && (firstPost.ogImage ?? firstPost.image ?? site.seo?.ogImage);
 ---
 
-<SiteLayout site={site} page={{ title }}>
+<SiteLayout site={site} page={{ title }} posts={posts} priorityImage={priorityImage}>
   <BlogHome site={site} />
 </SiteLayout>

package/renderer/src/styles/post-search.css

@@ -1,11 +1,11 @@
-.post-search-trigger { position: relative; flex: 0 1 240px; min-width: 180px; margin-left: auto; }
+.post-search-trigger { position: relative; flex: 0 0 240px; margin-left: auto; }
 .post-search-trigger svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--site-text-muted); pointer-events: none; }
 .post-search-trigger button { width: 100%; height: 36px; padding: 0 14px 0 38px; border: 0; border-radius: 999px; background: var(--site-surface-hover); color: var(--site-text-secondary); font: 400 var(--text-label)/1.5 var(--font-family); text-align: left; cursor: pointer; }
 .post-search-trigger button:hover { background: var(--site-surface-active); color: var(--site-foreground); }
 .post-search-header input::placeholder { color: var(--site-text-secondary); opacity: 1; }
 .post-search-trigger button:focus-visible { outline: 1px solid var(--site-border-strong); outline-offset: 3px; border-radius: 999px; background: var(--site-surface-active); }
 html:has(.post-search-dialog[open]) { overflow: hidden; }
-.post-search-dialog { position: fixed; inset: 0; width: min(620px, calc(100vw - 32px)); max-width: none; max-height: min(440px, calc(100dvh - 48px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--site-border); border-radius: 14px; background: var(--site-background); color: var(--site-foreground); box-shadow: 0 20px 80px #0003; font: 400 var(--text-label)/1.5 var(--font-family); }
+.post-search-dialog { position: fixed; inset: 0; width: min(640px, calc(100vw - 32px)); max-width: none; max-height: min(440px, calc(100dvh - 48px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--site-border); border-radius: 14px; background: var(--site-background); color: var(--site-foreground); box-shadow: 0 20px 80px #0003; font: 400 var(--text-label)/1.5 var(--font-family); }
 .post-search-dialog[open] { display: flex; flex-direction: column; }
 .post-search-dialog::backdrop { background: color-mix(in srgb, var(--site-background) 65%, transparent); backdrop-filter: blur(3px); }
 .post-search-header { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--site-surface, #fafafa); }
@@ -26,8 +26,18 @@ html:has(.post-search-dialog[open]) { overflow: hidden; }
 .post-search-excerpt { font-size: var(--text-meta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--site-text-secondary); }
 .post-search-empty { margin: 0; padding: 20px 16px; color: var(--site-text-secondary); text-align: center; }
 .post-search-results:empty { flex: 0; }
+@container (max-width: 768px) {
+  .blog-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 0; }
+  .category-selector { grid-area: 1 / 1 / 2 / -1; padding-inline-end: 56px; gap: 20px; }
+  .post-count { grid-area: 1 / 1; }
+  .post-search-trigger { grid-area: 1 / 2; z-index: 1; width: 44px; background: var(--site-background); }
+  .post-search-trigger::before { content: ''; position: absolute; inset: 0 100% 0 -16px; background: linear-gradient(to right, transparent, var(--site-background)); pointer-events: none; }
+  .post-search-trigger svg { left: auto; right: 0; width: 18px; height: 18px; }
+  .post-search-trigger button { height: 44px; padding: 0; background: transparent; }
+  .post-search-trigger button:is(:hover, :focus-visible) { background: transparent; }
+  .post-search-trigger button span { display: none; }
+}
 @media (max-width: 640px) {
-  .post-search-trigger { flex-basis: 100%; min-width: 0; }
   .post-search-dialog { width: calc(100vw - 24px); max-height: min(440px, calc(100dvh - 24px)); }
   .post-search-header { padding: 10px 12px; }
   .post-search-result { gap: 10px; }

package/renderer/src/styles/site.css

@@ -72,18 +72,19 @@ html:has(.site-header[data-header-position='fixed']) { scroll-padding-top: 80px;
 @media (prefers-reduced-motion: reduce) {
   .mobile-menu-toggle svg { transition: none; }
 }
-.blog-home { padding-block: 72px 100px; }
-.blog-heading { margin-bottom: 18px; }
-.blog-home:not(:has(.blog-toolbar > :not([hidden], script, dialog))) > .blog-heading { margin-bottom: 64px; }
+.blog-home { container-type: inline-size; padding-block: 72px 100px; }
+.blog-heading { margin-bottom: 40px; }
 .blog-heading h1 { margin-bottom: 0; }
 .article-category { margin: 0 0 20px; }
 .article-category a, .post-card-category { display: inline-flex; align-items: center; justify-content: center; padding: 4px 15px; border: 0; border-radius: 10px; background: var(--site-surface); color: var(--muted); font-size: var(--text-meta); font-weight: 500; line-height: 1.333333; text-decoration: none; }
 h1 { font-size: var(--text-title); font-weight: 500; line-height: 1.15; letter-spacing: -.04em; margin: 0 0 22px; }
 .description { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.65; max-width: 660px; margin: 0; }
-.blog-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-bottom: 40px; }
-.blog-toolbar:not(:has(> :not([hidden], script, dialog))) { display: none; }
-.category-selector { display: flex; flex-wrap: wrap; gap: 8px 24px; }
-.category-selector a { padding-block: 8px; color: var(--muted); font-size: var(--text-small); line-height: 1.5; text-decoration: none; transition: color .15s; }
+.blog-toolbar { display: flex; align-items: center; gap: 32px; margin-bottom: 40px; }
+.category-selector { display: flex; flex: 1; min-width: 0; gap: 24px; overflow-x: auto; scrollbar-width: none; }
+.category-selector::-webkit-scrollbar { display: none; }
+.category-selector a { flex-shrink: 0; white-space: nowrap; padding-block: 8px; color: var(--muted); font-size: var(--text-small); line-height: 1.5; text-decoration: none; transition: color .15s; }
+.category-selector a:focus-visible { outline-offset: -2px; }
+.post-count { margin: 0; padding-block: 8px; color: var(--muted); font-size: var(--text-small); white-space: nowrap; }
 .category-selector a:hover { color: var(--site-foreground); }
 .category-selector a[aria-current='page'] { color: var(--site-foreground); font-weight: 500; }
 .post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 48px; }
@@ -139,7 +140,7 @@ h1 { font-size: var(--text-title); font-weight: 500; line-height: 1.15; letter-s
 .archive > h2 { font-size: var(--text-h3); font-weight: 500; letter-spacing: -.025em; margin: 0 0 20px; }
 .archive-list { display: grid; gap: 4px; }
 .archive-list .post-card { margin-inline: -12px; padding-inline: 12px; border-radius: 6px; }
-.archive-list .post-card:is(:hover, :focus-within) { background: var(--site-surface-hover); }
+.archive-list .post-card:is(:hover, :focus-within) { --site-text-muted: var(--site-text-on-surface); background: var(--site-surface-hover); }
 .archive-list .post-card-layout { padding-block: 18px; }
 .archive-list .post-card-cover, .archive-list .post-card-description { display: none; }
 .archive-list .post-card-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: center; gap: 16px 32px; }
@@ -235,8 +236,7 @@ h1 { font-size: var(--text-title); font-weight: 500; line-height: 1.15; letter-s
 .site-footer a:hover { color: var(--site-foreground); }
 .footer-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 64px; color: var(--muted); font-size: var(--text-small); }
 .footer-bottom a { text-decoration: none; }
-.footer-credit { margin-left: auto; opacity: .65; }
-.footer-credit:is(:hover, :focus-visible) { opacity: 1; }
+.footer-credit { margin-left: auto; color: var(--site-text-muted); }
 .footer-socials { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
 .footer-socials a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; }
 .footer-socials svg { width: 18px; height: 18px; }
@@ -271,9 +271,7 @@ h1 { font-size: var(--text-title); font-weight: 500; line-height: 1.15; letter-s
   .mobile-menu-panel a { flex: none; padding: 12px 0; font-size: var(--text-base); line-height: 1.4; overflow-wrap: anywhere; }
   @media (prefers-reduced-motion: no-preference) { .mobile-navigation[open] .mobile-menu-panel { animation: mobile-menu-enter 180ms ease-out; } }
   .blog-home { padding-block: 46px 64px; }
-  .blog-home:not(:has(.blog-toolbar > :not([hidden], script, dialog))) > .blog-heading { margin-bottom: 40px; }
-  .blog-toolbar { margin-bottom: 36px; }
-  .category-selector { gap: 4px 20px; }
+  .blog-heading, .blog-toolbar { margin-bottom: 36px; }
   .post-list { grid-template-columns: 1fr; gap: 48px; }
   .related-posts { margin-top: 56px; padding-top: 32px; }
   [data-home-layout='rows'] .post-list .post-card-layout { display: flex; align-items: stretch; gap: 20px; }