meowpress 0.3.0-alpha.3 → 0.3.0-alpha.4

package/dist/src/site.js

@@ -1,142 +1,114 @@
 import { themeAttributes } from "meowcss";
+import { createRuntime, Fragment, h } from "meowjsx";
+import { renderToHtmlWithRuntime } from "meowjsx/web";
+import { Button, Container, Entry, EntryList, Inline, MetaRow, Page, PageHeader, Prose, Section, Tag, Text, createMeowUI, } from "meowtail";
 import { blogTheme } from "./theme.js";
-import { Fragment, h } from "meowjsx/runtime";
-import { renderToHtml } from "meowjsx/web";
 import { withoutLeadingHeading } from "./content.js";
 import { DEFAULT_SITE } from "./identity.js";
 import { sitePageAgentUrl } from "./pages.js";
 import { layoutSkillGraph } from "./skill-graph.js";
 /** The name of the theme stylesheet the package writes by default. */
 export const DEFAULT_THEME_STYLESHEET = "blog-theme.css";
-/** The href of the theme stylesheet for a page at a given depth. */
 function styleHref(depth, stylesheet) {
     return `${"../".repeat(depth)}${stylesheet}`;
 }
-/** The number of directories a slug puts a page below its section. */
 function slugDepth(slug) {
     return slug.split("/").filter(Boolean).length;
 }
 function SiteHeader({ activePath, site }) {
-    return (h("header", { className: "site" },
+    const links = [
+        ["/posts/", "Posts"],
+        ["/thoughts/", "Thoughts"],
+        ["/skills/", "Skills"],
+        ["/about/", "About"],
+    ];
+    return (h("header", { className: "site-header" },
         h("a", { className: "site-name", href: "/" }, site.name),
-        h("nav", { className: "site-nav", "aria-label": "Primary navigation" },
-            h("a", { className: activePath === "/skills/" ? "active" : "", href: "/skills/" }, "Skills"),
-            h("a", { className: activePath === "/about/" ? "active" : "", href: "/about/" }, "About"))));
+        h("nav", { className: "site-nav", "aria-label": "Primary navigation" }, links.map(([href, label]) => (h("a", { href: href, "aria-current": activePath === href ? "page" : undefined }, label))))));
 }
 function SiteFooter({ site }) {
-    return (h("footer", { className: "site" },
-        h("span", { className: "brand" },
+    return (h("footer", { className: "site-footer" },
+        h(Text, { variant: "caption" },
             "\u00A9 ",
             new Date().getFullYear(),
             " ",
             site.name),
-        h("span", null,
+        h(Inline, { gap: "compact" },
             h("a", { href: "/llm.txt" }, "llm.txt"),
-            " \u00B7 ",
             h("a", { href: "/agents.md" }, "agents.md"))));
 }
-function Document({ title, description, activePath, styleHref, baseHref, children, theme, site, }) {
-    const documentTitle = title === site.name ? site.name : `${title} · ${site.name}`;
-    return (h("html", { lang: "en", ...themeAttributes(theme) },
+function Document({ title, description, activePath, styleHref, baseHref, wide, children, theme, site, }) {
+    return (h("html", { lang: "en", "data-meowui-page": "", ...themeAttributes(theme) },
         h("head", null,
             h("meta", { charSet: "UTF-8" }),
             h("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
             h("meta", { name: "description", content: description ?? site.description }),
-            h("meta", { name: "theme-color", media: "(prefers-color-scheme: light)", content: "#faf8f3" }),
-            h("meta", { name: "theme-color", media: "(prefers-color-scheme: dark)", content: "#191816" }),
             baseHref ? h("base", { href: baseHref }) : null,
             h("link", { rel: "stylesheet", href: styleHref }),
-            h("title", null, documentTitle)),
+            h("title", null, title === site.name ? site.name : `${title} · ${site.name}`)),
         h("body", { "data-site": site.id },
-            h("div", { className: "container" },
-                h(SiteHeader, { activePath: activePath, site: site }),
-                children,
-                h(SiteFooter, { site: site })))));
+            h("a", { className: "skip-link", href: "#main-content" }, "Skip to content"),
+            h("div", { className: "site-shell" },
+                h(Container, { width: wide ? "wide" : "content" },
+                    h(SiteHeader, { activePath: activePath, site: site }),
+                    h("main", { id: "main-content", tabIndex: -1 }, children),
+                    h(SiteFooter, { site: site }))))));
 }
 function pageHtml(props) {
-    return `<!doctype html>\n${renderToHtml(h(Document, { ...props }))}`;
+    // Static rendering needs the same part/option adapter as a browser mount. No hydration is needed.
+    const runtime = createRuntime({
+        plugins: [
+            createMeowUI({
+                components: [
+                    Button,
+                    Container,
+                    Entry,
+                    EntryList,
+                    Inline,
+                    MetaRow,
+                    Page,
+                    PageHeader,
+                    Prose,
+                    Section,
+                    Tag,
+                    Text,
+                ],
+            }),
+        ],
+    });
+    return `<!doctype html>\n${renderToHtmlWithRuntime(runtime, h(Document, { ...props }))}`;
 }
 function dateLabel(dateKey) {
     const date = new Date(`${dateKey}T00:00:00Z`);
     if (Number.isNaN(date.getTime()))
         return { date: "Undated", weekday: "" };
-    const weekday = new Intl.DateTimeFormat("en-US", {
-        timeZone: "UTC",
-        weekday: "short",
-    }).format(date);
     return {
         date: new Intl.DateTimeFormat("en-US", {
             timeZone: "UTC",
             month: "long",
             day: "numeric",
         }).format(date),
-        weekday: `${date.getUTCFullYear()} ${weekday}`,
+        weekday: `${date.getUTCFullYear()} ${new Intl.DateTimeFormat("en-US", { timeZone: "UTC", weekday: "short" }).format(date)}`,
     };
 }
 function itemUrl(item) {
     return `/${item.kind}s/${item.slug}/`;
 }
-function Hero({ image }) {
-    return (h("section", { className: "hero", "aria-labelledby": "hero-title" },
-        h("div", { className: "hero-copy" },
-            h("h1", { id: "hero-title" },
-                "Ten thousand years is too long;",
-                h("br", null),
-                h("em", null, "only this day is true."))),
-        h("div", { className: "hero-work", "aria-hidden": "true" },
-            h("svg", { className: "hero-doodle", viewBox: "0 0 260 190" },
-                h("path", { className: "doodle-loop", d: "M24 96C20 45 58 18 122 20c72 2 116 33 114 84-2 48-48 70-113 68-65-2-96-27-99-76Z" }),
-                h("circle", { className: "doodle-sun", cx: "194", cy: "55", r: "27" }),
-                h("path", { className: "doodle-page", d: "M47 100c28-9 57-5 83 11v49c-24-13-52-16-83-7Z" }),
-                h("path", { className: "doodle-page", d: "M130 111c24-15 52-19 82-9v51c-31-7-58-4-82 7Z" }),
-                h("path", { className: "doodle-spine", d: "M130 111v49" }),
-                h("path", { className: "doodle-writing", d: "M61 118c18-3 36-1 53 5M61 132c17-2 32 0 46 5M148 119c17-4 33-5 50-1M148 133c14-3 29-3 44 0" }),
-                h("circle", { className: "doodle-dot", cx: "41", cy: "61", r: "5" }),
-                h("path", { className: "doodle-spark", d: "M72 44v12M66 50h12" })),
-            image ? h("img", { className: "hero-image", src: image, alt: "", decoding: "async" }) : null)));
-}
-function DoodleGithubIcon() {
-    return (h("svg", { className: "github-icon", viewBox: "0 0 48 48", "aria-hidden": "true" },
-        h("path", { className: "github-icon-ring", d: "M24 3.8C11.7 3.5 4.2 11.2 4.6 24.1c.3 12.1 7.8 20.1 19.6 20 12.2-.1 19.4-7.7 19.2-20C43.2 11.7 36.2 4.1 24 3.8Z" }),
-        h("path", { className: "github-icon-cat", d: "M14.3 18.8c-.7-2.4-.3-5.1.8-7.1 3.2.1 5.4 1.3 6.6 2.2 1.5-.4 3.1-.6 4.8-.4 1.4-1 3.7-1.9 6.7-1.8 1 2.2 1.3 4.9.5 7.1 1.5 1.8 2.2 4.1 2 6.8-.4 5.2-3.2 8.2-8.2 8.8.8.7 1.3 1.9 1.3 3.8v4.3c-1.5.4-3.1.6-4.8.6-1.4 0-2.8-.1-4.2-.5v-3.4c0-1.8.5-3.1 1.4-4-4.8-.6-7.7-3.5-8.2-8.7-.3-2.7.4-5 1.3-6.7Z" }),
-        h("path", { className: "github-icon-face", d: "M20.2 24.3h.1M29.2 24.3h.1M21.2 28.9c2.2 1.4 4.5 1.4 6.8 0" })));
-}
-function DoodleExternalArrow() {
-    return (h("svg", { className: "external-arrow", viewBox: "0 0 28 28", "aria-hidden": "true" },
-        h("path", { d: "M7 21 21 7M12 7h9v9" })));
-}
 function Tags({ item }) {
-    if (item.tags.length === 0)
-        return null;
-    return (h("div", { className: "tags" }, item.tags.map((tag) => (h("span", null,
-        "#",
-        tag)))));
+    return item.tags.length ? (h(Inline, { gap: "compact" }, item.tags.map((tag) => (h(Tag, null, tag))))) : null;
 }
 function ThoughtCard({ item, linked = false }) {
-    const body = (h(Fragment, null,
-        h("div", { className: "time" },
-            h("span", { className: "t" }, item.timeLabel || item.dateKey),
-            " \u00B7 Thought"),
-        h("div", { className: "body", dangerouslySetInnerHTML: { __html: withoutLeadingHeading(item.html) } }),
+    return (h(Entry, { className: "thought", "data-kind": "thought", title: item.title, href: linked ? itemUrl(item) : undefined, eyebrow: `${item.timeLabel || item.dateKey} · Thought` },
+        h(Prose, { dangerouslySetInnerHTML: { __html: withoutLeadingHeading(item.html) } }),
         h(Tags, { item: item })));
-    if (!linked)
-        return (h("article", { className: "thought", "data-kind": "thought" }, body));
-    return (h("article", { className: "thought", "data-kind": "thought" },
-        h("a", { className: "thought-link", href: itemUrl(item) }, body)));
 }
 function PostCard({ item }) {
     const category = typeof item.metadata.category === "string" ? item.metadata.category : "Post";
-    return (h("a", { className: "post-card", href: itemUrl(item), "data-kind": "post" },
-        h("div", { className: "card-top" },
-            h("span", { className: "kind" }, category),
-            h("span", { className: "meta" },
-                "About ",
-                item.readingMinutes,
-                " min \u00B7 ",
-                item.characterCount,
-                " characters")),
-        h("h3", null, item.title),
-        h("p", { className: "excerpt" }, item.excerpt || "This post has no summary yet."),
+    return (h(Entry, { size: "feature", "data-kind": "post", title: item.title, href: itemUrl(item), eyebrow: category, description: item.excerpt || "This post has no summary yet.", meta: h(MetaRow, { items: [
+                { label: item.dateKey },
+                { label: `${item.readingMinutes} min read` },
+                { label: `${item.characterCount} characters` },
+            ] }) },
         h(Tags, { item: item })));
 }
 function groupByDate(items) {
@@ -148,108 +120,34 @@ function groupByDate(items) {
     }
     return groups;
 }
-function FeedDecor({ image }) {
-    return (h("div", { className: "feed-decor", "aria-hidden": "true" },
-        h("svg", { className: "yarn-doodle", viewBox: "0 0 88 70" },
-            h("path", { className: "yarn-tail", d: "M42 48c-10 7-17 4-22 9-5 4-2 9 4 8 8-1 11-8 18-6 6 1 10 6 16 4" }),
-            h("circle", { className: "yarn-fill", cx: "48", cy: "34", r: "22" }),
-            h("path", { className: "yarn-line", d: "M31 23c11 1 22 7 34 18M28 34c12-7 24-9 39-5M34 49c7-14 16-24 28-31M28 42c13 1 24 5 33 12" })),
-        h("svg", { className: "paw-trail", viewBox: "0 0 130 82" },
-            h("g", { className: "paw-print", transform: "translate(12 54) rotate(-18)" },
-                h("ellipse", { cx: "9", cy: "11", rx: "6", ry: "5" }),
-                h("circle", { cx: "3", cy: "3", r: "2.5" }),
-                h("circle", { cx: "9", cy: "1", r: "2.5" }),
-                h("circle", { cx: "15", cy: "3", r: "2.5" })),
-            h("g", { className: "paw-print", transform: "translate(45 37) rotate(8)" },
-                h("ellipse", { cx: "9", cy: "11", rx: "6", ry: "5" }),
-                h("circle", { cx: "3", cy: "3", r: "2.5" }),
-                h("circle", { cx: "9", cy: "1", r: "2.5" }),
-                h("circle", { cx: "15", cy: "3", r: "2.5" })),
-            h("g", { className: "paw-print", transform: "translate(79 19) rotate(-12)" },
-                h("ellipse", { cx: "9", cy: "11", rx: "6", ry: "5" }),
-                h("circle", { cx: "3", cy: "3", r: "2.5" }),
-                h("circle", { cx: "9", cy: "1", r: "2.5" }),
-                h("circle", { cx: "15", cy: "3", r: "2.5" })),
-            h("g", { className: "paw-print paw-print-accent", transform: "translate(111 5) rotate(11)" },
-                h("ellipse", { cx: "7", cy: "9", rx: "5", ry: "4" }),
-                h("circle", { cx: "2", cy: "2", r: "2" }),
-                h("circle", { cx: "7", cy: "1", r: "2" }),
-                h("circle", { cx: "12", cy: "2", r: "2" }))),
-        image ? h("img", { className: "feed-image", src: image, alt: "", decoding: "async" }) : null));
-}
 function Feed({ items, image }) {
-    if (items.length === 0) {
-        return (h("main", { className: "feed feed-empty" },
-            h("p", { className: "empty-state" }, "No public content yet."),
-            h(FeedDecor, { image: image })));
-    }
-    return (h("main", { className: "feed" },
-        [...groupByDate(items)].map(([dateKey, group]) => {
+    return (h("div", { className: "feed" },
+        items.length === 0 ? (h(Text, { variant: "secondary" }, "No public content yet.")) : ([...groupByDate(items)].map(([dateKey, group]) => {
             const label = dateLabel(dateKey);
-            return (h("section", { className: "day" },
-                h("h2", { className: "day-header" },
-                    label.date,
-                    " ",
-                    h("span", { className: "weekday" }, label.weekday)),
-                group.map((item) => item.kind === "thought" ? (h(ThoughtCard, { item: item, linked: true })) : (h(PostCard, { item: item })))));
-        }),
-        h(FeedDecor, { image: image })));
+            return (h(Section, { className: "day", title: label.date, description: label.weekday },
+                h(EntryList, null, group.map((item) => item.kind === "thought" ? (h(ThoughtCard, { item: item, linked: true })) : (h(PostCard, { item: item }))))));
+        })),
+        image ? (h("img", { className: "feed-image", src: image, alt: "", loading: "lazy", decoding: "async" })) : null));
 }
 function Filter({ posts, thoughts }) {
-    const total = posts + thoughts;
-    return (h("div", { className: "tag-filter", "data-filter-group": "feed", role: "group", "aria-label": "Filter home feed" },
-        h("button", { type: "button", "data-filter": "all", className: "active", "aria-pressed": "true" },
-            "All",
-            h("i", null, total)),
-        h("button", { type: "button", "data-filter": "post", "aria-pressed": "false" },
-            "Posts",
-            h("i", null, posts)),
-        h("button", { type: "button", "data-filter": "thought", "aria-pressed": "false" },
-            "Thoughts",
-            h("i", null, thoughts))));
+    return (h(Inline, { className: "feed-filter", gap: "compact", "data-filter-group": "feed", role: "group", "aria-label": "Filter home feed" }, [
+        ["all", "All", posts + thoughts],
+        ["post", "Posts", posts],
+        ["thought", "Thoughts", thoughts],
+    ].map(([value, label, count]) => (h(Button, { variant: "quiet", "data-filter": value, "aria-pressed": String(value === "all") },
+        label,
+        " ",
+        h("span", { className: "filter-count" }, count))))));
 }
 const FILTER_SCRIPT = `(() => {
   const links = document.querySelectorAll('[data-filter-group="feed"] [data-filter]');
   const items = document.querySelectorAll('.feed [data-kind]');
   const days = document.querySelectorAll('.feed .day');
-  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  if ('IntersectionObserver' in window && !reduced) {
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          entry.target.classList.add('in');
-          observer.unobserve(entry.target);
-        }
-      });
-    }, { threshold: 0.08 });
-    days.forEach((day) => observer.observe(day));
-  } else {
-    days.forEach((day) => day.classList.add('in'));
-  }
-  links.forEach((link) => link.addEventListener('click', (event) => {
-    event.preventDefault();
+  links.forEach((link) => link.addEventListener('click', () => {
     const filter = link.dataset.filter;
-    links.forEach((item) => {
-      const active = item === link;
-      item.classList.toggle('active', active);
-      item.setAttribute('aria-pressed', String(active));
-    });
-    items.forEach((item) => {
-      item.style.display = filter === 'all' || item.dataset.kind === filter ? '' : 'none';
-    });
-    days.forEach((day) => {
-      const visible = Array.from(day.querySelectorAll('[data-kind]'))
-        .some((item) => item.style.display !== 'none');
-      day.style.display = visible ? '' : 'none';
-      if (!visible) day.classList.remove('in');
-    });
-    if (!reduced) {
-      requestAnimationFrame(() => requestAnimationFrame(() => {
-        days.forEach((day) => {
-          if (day.style.display !== 'none') day.classList.add('in');
-        });
-      }));
-    }
+    links.forEach((button) => button.setAttribute('aria-pressed', String(button === link)));
+    items.forEach((item) => { item.hidden = filter !== 'all' && item.dataset.kind !== filter; });
+    days.forEach((day) => { day.hidden = !Array.from(day.querySelectorAll('[data-kind]')).some((item) => !item.hidden); });
   }));
 })();`;
 export function homePage(items, theme = blogTheme, site = DEFAULT_SITE, stylesheet = DEFAULT_THEME_STYLESHEET) {
@@ -258,29 +156,27 @@ export function homePage(items, theme = blogTheme, site = DEFAULT_SITE, styleshe
         theme,
         title: site.name,
         styleHref: styleHref(0, stylesheet),
-        children: (h(Fragment, null,
-            h(Hero, { image: site.images?.hero ? `./${site.images.hero}` : undefined }),
-            h(Filter, { posts: items.filter((item) => item.kind === "post").length, thoughts: items.filter((item) => item.kind === "thought").length }),
+        children: (h(Page, { header: h("div", { className: "home-heading" },
+                h("div", { className: "home-heading-copy" },
+                    h(Text, { variant: "eyebrow" }, "Journal"),
+                    h(PageHeader, { title: site.name, description: site.description })),
+                site.images?.hero ? (h("img", { className: "hero-image", src: `./${site.images.hero}`, alt: "", decoding: "async" })) : null), toolbar: h(Filter, { posts: items.filter((item) => item.kind === "post").length, thoughts: items.filter((item) => item.kind === "thought").length }) },
             h(Feed, { items: items, image: site.images?.feed ? `./${site.images.feed}` : undefined }),
             h("script", { dangerouslySetInnerHTML: { __html: FILTER_SCRIPT } }))),
     });
 }
 export function listPage(kind, items, theme = blogTheme, site = DEFAULT_SITE, stylesheet = DEFAULT_THEME_STYLESHEET) {
     const isPost = kind === "post";
+    const title = isPost ? "Posts" : "Thoughts";
     return pageHtml({
         site,
         theme,
-        title: isPost ? "Posts" : "Thoughts",
+        title,
         activePath: isPost ? "/posts/" : "/thoughts/",
         styleHref: styleHref(1, stylesheet),
-        children: (h("main", { className: "listing" },
-            h("header", { className: "listing-head" },
-                h("span", { className: "kind" }, isPost ? "Posts" : "Thoughts"),
-                h("h1", null, isPost ? "Posts" : "Thoughts"),
-                h("p", null, isPost
-                    ? "Complete arguments grown from fragments."
-                    : "Short, trimmed thoughts ready to show as they are.")),
-            h("div", { className: isPost ? "post-list" : "thought-list" }, items.length === 0 ? (h("p", { className: "empty-state" }, "No public content yet.")) : (items.map((item) => isPost ? h(PostCard, { item: item }) : h(ThoughtCard, { item: item, linked: true })))))),
+        children: (h(Page, { title: title, eyebrow: "Archive", description: isPost
+                ? "Complete arguments grown from fragments."
+                : "Short, trimmed thoughts ready to show as they are." }, items.length ? (h(EntryList, null, items.map((item) => isPost ? h(PostCard, { item: item }) : h(ThoughtCard, { item: item, linked: true })))) : (h(Text, { variant: "secondary" }, "No public content yet.")))),
     });
 }
 export function notFoundPage(copy, theme, site, stylesheet) {
@@ -292,14 +188,9 @@ export function notFoundPage(copy, theme, site, stylesheet) {
         title,
         description: message,
         styleHref: styleHref(0, stylesheet),
-        // Static hosts can serve 404.html at the missing URL, including deep paths.
         baseHref: "/",
-        children: (h("main", { className: "listing" },
-            h("header", { className: "listing-head" },
-                h("span", { className: "kind" }, "404"),
-                h("h1", null, title),
-                h("p", null, message)),
-            h("div", { className: "prose" },
+        children: (h(Page, { eyebrow: "404", title: title, description: message },
+            h(Prose, null,
                 h("a", { href: "/" }, copy.homeLabel ?? "Back to home")))),
     });
 }
@@ -308,22 +199,13 @@ function PostNavigation({ item, posts }) {
     const older = index >= 0 ? posts[index + 1] : undefined;
     const newer = index > 0 ? posts[index - 1] : undefined;
     return (h("nav", { className: "post-nav", "aria-label": "Post navigation" },
-        older ? (h("a", { href: itemUrl(older) },
-            h("span", { className: "label" }, "\u2190 Previous post (older)"),
-            older.title)) : (h("span", null)),
-        newer ? (h("a", { className: "next", href: itemUrl(newer) },
-            h("span", { className: "label" }, "Next post (newer) \u2192"),
-            newer.title)) : (h("span", { className: "next" },
-            h("span", { className: "label" }, "Next post (newer) \u2192"),
-            "Nothing newer \u2014 this is the latest post."))));
+        older ? (h(Entry, { eyebrow: "\u2190 Previous post (older)", title: older.title, href: itemUrl(older) })) : (h("span", null)),
+        newer ? (h(Entry, { eyebrow: "Next post (newer) \u2192", title: newer.title, href: itemUrl(newer) })) : (h(Text, { variant: "caption" }, "Nothing newer \u2014 this is the latest post."))));
 }
 function RelatedThoughts({ item, thoughts, }) {
     const related = thoughts.filter((thought) => thought.dateKey === item.dateKey).slice(0, 3);
-    if (related.length === 0)
-        return null;
-    return (h("aside", { className: "related-thoughts" },
-        h("h2", null, "Thoughts from the same day"),
-        related.map((thought) => (h(ThoughtCard, { item: thought, linked: true })))));
+    return related.length ? (h(Section, { title: "Thoughts from the same day" },
+        h(EntryList, null, related.map((thought) => (h(ThoughtCard, { item: thought, linked: true })))))) : null;
 }
 export function postPage(item, posts, thoughts, theme = blogTheme, site = DEFAULT_SITE, stylesheet = DEFAULT_THEME_STYLESHEET) {
     const category = typeof item.metadata.category === "string" ? item.metadata.category : "Post";
@@ -334,21 +216,16 @@ export function postPage(item, posts, thoughts, theme = blogTheme, site = DEFAUL
         description: item.excerpt,
         activePath: "/posts/",
         styleHref: styleHref(1 + slugDepth(item.slug), stylesheet),
-        children: (h("main", null,
-            h("article", null,
-                h("header", { className: "post-head" },
-                    h("span", { className: "kind" }, category),
-                    h("h1", null, item.title),
-                    h("div", { className: "meta" },
-                        item.dateKey,
-                        " \u00B7 about ",
-                        item.readingMinutes,
-                        " min \u00B7 ",
-                        item.characterCount,
-                        " characters")),
-                h("div", { className: "prose", dangerouslySetInnerHTML: { __html: item.html } }),
-                h(RelatedThoughts, { item: item, thoughts: thoughts }),
-                h(PostNavigation, { item: item, posts: posts })))),
+        children: (h(Page, { title: item.title, eyebrow: category },
+            h(MetaRow, { items: [
+                    { label: item.dateKey },
+                    { label: `${item.readingMinutes} min read` },
+                    { label: `${item.characterCount} characters` },
+                ] }),
+            h(Prose, { as: "article", dangerouslySetInnerHTML: { __html: withoutLeadingHeading(item.html) } }),
+            h(Tags, { item: item }),
+            h(RelatedThoughts, { item: item, thoughts: thoughts }),
+            h(PostNavigation, { item: item, posts: posts }))),
     });
 }
 export function thoughtPage(item, theme = blogTheme, site = DEFAULT_SITE, stylesheet = DEFAULT_THEME_STYLESHEET) {
@@ -359,15 +236,10 @@ export function thoughtPage(item, theme = blogTheme, site = DEFAULT_SITE, styles
         description: item.excerpt,
         activePath: "/thoughts/",
         styleHref: styleHref(1 + slugDepth(item.slug), stylesheet),
-        children: (h("main", null,
-            h("article", null,
-                h("header", { className: "post-head" },
-                    h("span", { className: "kind" }, "Thought"),
-                    h("h1", null, item.title),
-                    h("div", { className: "meta" },
-                        item.dateKey,
-                        item.timeLabel ? ` · ${item.timeLabel}` : "")),
-                h("div", { className: "prose", dangerouslySetInnerHTML: { __html: item.html } })))),
+        children: (h(Page, { title: item.title, eyebrow: "Thought" },
+            h(MetaRow, { items: [{ label: item.dateKey }, ...(item.timeLabel ? [{ label: item.timeLabel }] : [])] }),
+            h(Prose, { as: "article", dangerouslySetInnerHTML: { __html: withoutLeadingHeading(item.html) } }),
+            h(Tags, { item: item }))),
     });
 }
 export function aboutPage(theme = blogTheme, site = DEFAULT_SITE, stylesheet = DEFAULT_THEME_STYLESHEET) {
@@ -378,19 +250,13 @@ export function aboutPage(theme = blogTheme, site = DEFAULT_SITE, stylesheet = D
         title: "About",
         activePath: "/about/",
         styleHref: styleHref(1, stylesheet),
-        children: (h("main", { className: "about" },
-            h("div", { className: "avatar", "aria-hidden": "true" }, site.images?.about ? (h("img", { src: `../${site.images.about}`, alt: "", decoding: "async" })) : (h("span", { className: "avatar-initial" }, Array.from(site.name.trim())[0] ?? "M"))),
-            about ? (h(Fragment, null,
-                h("h1", null, about.heading),
-                about.paragraphs.map((paragraph) => (h("p", null, paragraph))),
-                about.links && about.links.length > 0 ? (h(Fragment, null,
-                    h("h2", null, about.linksHeading ?? "Find me"),
-                    about.links.map((link) => (h("a", { className: "github-link", href: link.href, target: "_blank", rel: "me noopener noreferrer" },
-                        h(DoodleGithubIcon, null),
-                        h("span", { className: "github-copy" },
-                            h("span", null, link.label),
-                            h("strong", null, link.handle)),
-                        h(DoodleExternalArrow, null)))))) : null)) : (h("h1", null, site.name)))),
+        children: (h(Page, { eyebrow: "About", title: about?.heading ?? site.name },
+            h("div", { className: "site-avatar", "aria-hidden": "true" }, site.images?.about ? (h("img", { src: `../${site.images.about}`, alt: "", decoding: "async" })) : (h("span", { className: "avatar-initial" }, Array.from(site.name.trim())[0] ?? "M"))),
+            about ? (h(Prose, null, about.paragraphs.map((paragraph) => (h("p", null, paragraph))))) : null,
+            about?.links?.length ? (h(Section, { title: about.linksHeading ?? "Find me" },
+                h(EntryList, null, about.links.map((link) => (h(Entry, { title: h("a", { href: link.href, target: "_blank", rel: "me noopener noreferrer" },
+                        link.handle,
+                        " \u2197"), eyebrow: link.label })))))) : null)),
     });
 }
 function skillUrl(skill) {
@@ -402,20 +268,12 @@ function skillInstallCommand(site, skill) {
         : skill.sourceBasePath;
 }
 function SkillCard({ skill, site }) {
-    return (h("a", { className: `skill-card${skill.scope === "project" ? " project-skill" : ""}`, href: skillUrl(skill) },
-        h("span", { className: "skill-card-source" },
-            h("span", { className: "skill-card-path" }, skill.scope === "public" ? skillInstallCommand(site, skill) : skill.sourceBasePath),
-            skill.scope === "project" ? (h("span", { className: "skill-scope-badge" }, "Project Skill")) : null),
-        h("span", { className: "skill-card-main" },
-            h("strong", null, skill.name),
-            h("span", null, skill.description)),
-        h("span", { className: "skill-card-foot" },
-            h("span", null,
-                skill.files.length,
-                " Markdown files \u00B7 ",
-                skill.relations.length,
-                " references"),
-            h("span", { className: "skill-open" }, "Open directory\u00A0 \u2192"))));
+    return (h(Entry, { href: skillUrl(skill), title: skill.name, description: skill.description, eyebrow: skill.scope === "project" ? "Project Skill" : "Public Skill", meta: h(MetaRow, { items: [
+                { label: `${skill.files.length} Markdown files` },
+                { label: `${skill.relations.length} references` },
+            ] }) },
+        h(Text, { variant: "caption" },
+            h("code", { className: "skill-command-text" }, skill.scope === "public" ? skillInstallCommand(site, skill) : skill.sourceBasePath))));
 }
 function skillTree(files) {
     const root = { name: "", children: [] };
@@ -459,7 +317,7 @@ function SkillGraphNodeView({ node }) {
 function SkillRelationGraph({ skill, direction }) {
     const graph = layoutSkillGraph(skill, direction);
     const markerId = `skill-arrow-${skill.slug}-${direction.toLowerCase()}`;
-    return (h("svg", { className: `skill-graph-svg skill-graph-${direction.toLowerCase()}`, viewBox: `0 0 ${graph.width} ${graph.height}`, "aria-label": `${skill.name} file reference graph` },
+    return (h("svg", { className: `skill-graph-svg skill-graph-${direction.toLowerCase()}`, viewBox: `0 0 ${graph.width} ${graph.height}`, width: graph.width, height: graph.height, "aria-label": `${skill.name} file reference graph` },
         h("defs", null,
             h("marker", { id: markerId, viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "5", markerHeight: "5", orient: "auto-start-reverse" },
                 h("path", { className: "skill-graph-arrow", d: "M 0 0 L 10 5 L 0 10 z" }))),
@@ -499,9 +357,8 @@ function SkillRelations({ skill }) {
                 h("strong", null, missingNodes.length),
                 " missing targets")),
         hasRelations ? (h(Fragment, null,
-            h("div", { className: `skill-graph-canvas${compactGraph ? " compact" : ""}` },
-                h(SkillRelationGraph, { skill: skill, direction: "LR" }),
-                h(SkillRelationGraph, { skill: skill, direction: "TB" })),
+            h("div", { className: `skill-graph-canvas${compactGraph ? " compact" : ""}`, tabIndex: 0, role: "region", "aria-label": "Scrollable file reference graph" },
+                h(SkillRelationGraph, { skill: skill, direction: "LR" })),
             h("section", { className: "skill-reading-paths", "aria-labelledby": `${skill.slug}-paths` },
                 h("h3", { id: `${skill.slug}-paths` }, "Where references happen"),
                 h("ol", null, skill.relations.map((relation) => {
@@ -636,24 +493,11 @@ export function skillsIndexPage(skills, theme = blogTheme, site = DEFAULT_SITE,
         description: "Methods and working conventions that can be handed to an Agent.",
         activePath: "/skills/",
         styleHref: styleHref(1, stylesheet),
-        children: (h("main", { className: "skills-index" },
-            h("header", { className: "skills-head" },
-                h("span", { className: "skill-path" }, "~/skills"),
-                h("h1", null, "Skills"),
-                h("p", null, "Methods shared publicly and usable directly by an Agent.")),
-            h("section", { className: "skill-group", "aria-labelledby": "public-skills-heading" },
-                h("header", { className: "skill-group-head" },
-                    h("h2", { id: "public-skills-heading" }, "Public Skills"),
-                    h("span", null, "Public content")),
-                publicSkills.length > 0 ? (h("div", { className: "skill-list" }, publicSkills.map((skill) => (h(SkillCard, { skill: skill, site: site }))))) : (h("p", { className: "skill-group-empty" }, "Public Skills have no content yet."))),
-            projectSkills.length > 0 ? (h("section", { className: "skill-group project-skills", "aria-labelledby": "project-skills-heading" },
-                h("header", { className: "skill-group-head" },
-                    h("div", null,
-                        h("h2", { id: "project-skills-heading" }, "Project Skills"),
-                        h("small", null, "Development and content workflows used inside this project")),
-                    h("span", null, ".agents/skills/")),
-                h("div", { className: "skill-list" }, projectSkills.map((skill) => (h(SkillCard, { skill: skill, site: site })))))) : null,
-            h("p", { className: "skills-prototype-note" }, "The reference graph starts from SKILL.md and is generated at build time from Markdown links."))),
+        children: (h(Page, { eyebrow: "~/skills", title: "Skills", description: "Methods shared publicly and usable directly by an Agent." },
+            h(Section, { title: "Public Skills" }, publicSkills.length ? (h(EntryList, null, publicSkills.map((skill) => (h(SkillCard, { skill: skill, site: site }))))) : (h(Text, { variant: "secondary" }, "Public Skills have no content yet."))),
+            projectSkills.length ? (h(Section, { title: "Project Skills", description: "Development and content workflows used inside this project" },
+                h(EntryList, null, projectSkills.map((skill) => (h(SkillCard, { skill: skill, site: site })))))) : null,
+            h(Text, { variant: "caption" }, "The reference graph starts from SKILL.md and is generated at build time from Markdown links."))),
     });
 }
 export function skillPage(skill, theme = blogTheme, site = DEFAULT_SITE, stylesheet = DEFAULT_THEME_STYLESHEET) {
@@ -663,12 +507,13 @@ export function skillPage(skill, theme = blogTheme, site = DEFAULT_SITE, stylesh
         site,
         theme,
         title: skill.name,
+        wide: true,
         description: skill.description,
         activePath: "/skills/",
         styleHref: skill.scope === "public"
             ? styleHref(1 + slugDepth(skill.slug), stylesheet)
             : styleHref(2 + slugDepth(skill.slug), stylesheet),
-        children: (h("main", { className: "skill-page" },
+        children: (h(Page, { width: "full", className: "skill-page", title: skill.name, eyebrow: "Skill", description: skill.description },
             h("a", { className: "skill-back", href: "/skills/" }, "\u2190 All Skills"),
             h("header", { className: "skill-browser-head" },
                 h("span", { className: "skill-command" },
@@ -687,8 +532,11 @@ export function skillPage(skill, theme = blogTheme, site = DEFAULT_SITE, stylesh
                         h("header", { className: "skill-viewer-bar" },
                             h("span", { "data-current-file": true }, firstFile.path),
                             h("span", null, "Markdown")),
-                        skill.files.map((file, index) => (h("article", { className: `skill-file-panel prose${index === 0 ? " active" : ""}`, "data-skill-panel": file.path, hidden: index !== 0, dangerouslySetInnerHTML: {
-                                __html: Bun.markdown.html(file.content, { tagFilter: true }),
+                        skill.files.map((file, index) => (h(Prose, { as: "article", className: `skill-file-panel${index === 0 ? " active" : ""}`, "data-skill-panel": file.path, hidden: index !== 0, dangerouslySetInnerHTML: {
+                                // The page owns h1; file headings nest under it without dropping any content.
+                                __html: Bun.markdown
+                                    .html(file.content, { tagFilter: true })
+                                    .replace(/<(\/?)h([1-6])(\s[^>]*)?>/g, (_, closing, level, attributes = "") => `<${closing}h${Math.min(6, Number(level) + 1)}${attributes}>`),
                             } }))))),
                 h(SkillRelations, { skill: skill })),
             h("script", { dangerouslySetInnerHTML: { __html: SKILL_BROWSER_SCRIPT } }))),