@half-built/astro 0.1.0

package/ICONS-LICENSE

@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Curt Henrichs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# @half-built/astro
+
+Astro components, islands, and pure helpers for the half-built design
+system.
+
+## Provenance
+
+Extracted from the private `half-built-robots-blog` repository, where
+these components were built and used in production. The extraction
+review that checked them for blog-specific assumptions before the move
+is the design record for this package.
+
+## Icons
+
+Default icon glyphs are derived from Lucide (https://lucide.dev), ISC
+license. See `ICONS-LICENSE`.

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@half-built/astro",
+  "version": "0.1.0",
+  "description": "Astro components, islands, and pure helpers for the half-built design system.",
+  "license": "MIT",
+  "type": "module",
+  "files": ["src", "ICONS-LICENSE"],
+  "exports": {
+    "./components/Masthead.astro": "./src/components/SiteHeader.astro",
+    "./components/*": "./src/components/*",
+    "./content/*": "./src/components/content/*",
+    "./scripts/*": "./src/scripts/*",
+    "./lib/*": "./src/lib/*",
+    "./shiki/code-theme": "./src/shiki/code-theme.mjs"
+  },
+  "peerDependencies": { "astro": "^5.0.0" },
+  "publishConfig": { "access": "public" }
+}

package/src/components/CategoryCard.astro

@@ -0,0 +1,31 @@
+---
+import type { ImageMetadata } from "astro";
+
+interface Props { name: string; href: string; image: ImageMetadata; class?: string }
+const { name, href, image, class: className } = Astro.props;
+const bg = `background-image:url('${image.src.replace(/'/g, "%27").replace(/"/g, "%22")}')`;
+---
+<a class:list={["category-single", className]} href={href}>
+  <span class="category-img" style={bg}></span>
+  <span class="category-label chip">{name}</span>
+</a>
+
+<style>
+  .category-single {
+    aspect-ratio: 4 / 2.8;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-end;
+    border: var(--stroke) solid var(--rule);
+    text-decoration: none;
+  }
+  .category-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
+  /* Chip look comes from the .chip pattern; card-specific metrics only. */
+  .category-label {
+    position: relative;
+    line-height: 1.2;
+    padding: 7px 13px;
+    margin: 5px;
+  }
+</style>

package/src/components/CornerBadges.astro

@@ -0,0 +1,40 @@
+---
+/* Corner badges (owner request 2026-08-27, after launch): the chip
+   family the archive cards' read-time chip belongs to, pinned to the
+   lower-right corner of the image they sit on.
+   - AI Art marks an AI-generated image: heroes through the heroGenAI
+     frontmatter flag, content images through the genai prop on
+     BlogImage, GalleryImage, and MediaText. Images that only went
+     through ordinary editing carry nothing.
+   - Demo marks a post that carries an interactive demo (the demo
+     frontmatter flag), on the card and the post hero.
+   Renders nothing when neither applies. The container is absolutely
+   positioned, so the parent supplies position: relative. pointer-events
+   off: a badge inside a lightbox link must not swallow the tap. */
+import { ICON_PLAY, ICON_SPARKLES } from "../scripts/core/icons";
+
+interface Props { genai?: boolean; demo?: boolean; class?: string; genaiLabel?: string; demoLabel?: string }
+const { genai = false, demo = false, class: className, genaiLabel = "AI Art", demoLabel = "Demo" } = Astro.props;
+---
+{(genai || demo) && (
+  <span class:list={["corner-badges", className]}>
+    {genai && <span class="chip badge-genai"><Fragment set:html={ICON_SPARKLES} /> {genaiLabel}</span>}
+    {demo && <span class="chip badge-demo"><Fragment set:html={ICON_PLAY} /> {demoLabel}</span>}
+  </span>
+)}
+
+<style>
+  /* Chip look comes from the .chip pattern; the read-time chip sits
+     10px in from the card's bottom-left, so these sit 10px in from the
+     bottom-right. */
+  .corner-badges {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    display: flex;
+    gap: 6px;
+    z-index: 1;
+    line-height: 1;
+    pointer-events: none;
+  }
+</style>

package/src/components/Footer.astro

@@ -0,0 +1,209 @@
+---
+import type { SitemapGroup, EcosystemEntry } from "./models";
+import { BP_PHONE_MAX } from "../scripts/core/breakpoints";
+/* The real half-built-robots.com footer is a single bottom bar with the
+   copyright line, and the live site has no footer widget row. The sitemap
+   below the copyright line is a deliberate divergence, owner-directed
+   2026-07-30 (docs/superpowers/specs/2026-07-30-footer-sitemap-design.md).
+   The old theme credit stays dropped: this build is original code, not the
+   Adore theme. Everything below renders from the sitemap/ecosystem props
+   Base.astro passes in; SitemapGroup and EcosystemEntry live in models.ts. */
+interface Props {
+  siteName: string;
+  legalHolder: string;
+  sitemap: SitemapGroup[];
+  ecosystem: EcosystemEntry[];
+  /* The entry rendered as this site itself (unlinked, bold). */
+  ecosystemSelf: string;
+  ecosystemTitle?: string;
+}
+const { siteName, legalHolder, sitemap, ecosystem, ecosystemSelf, ecosystemTitle = "Ecosystem" } = Astro.props;
+const year = new Date().getFullYear();
+---
+<footer id="colophon" class="site-footer">
+  <div class="bottom-footer tint-overlay">
+    <div class="shell">
+      <div class="bottom-footer-info">
+        <div class="site-info">
+          {/* Segments are unbreakable so narrow screens wrap only at
+              the sanctioned points: after the year and at the pipe,
+              which the line break replaces below the mobile breakpoint
+              (owner call 2026-08-20). Desktop and tablet render the
+              one line exactly as before. */}
+          <slot name="site-info"><span>
+              <span class="site-info-seg">Copyright © {year}</span>{" "}
+              <span class="site-info-seg">{legalHolder}</span>{" "}
+              <span class="site-info-sep" aria-hidden="true">|</span>{" "}
+              <a class="site-info-seg" href="/">{siteName}</a>
+            </span></slot>
+        </div>
+      </div>
+      <nav class="footer-sitemap" aria-label="Sitemap">
+        {sitemap.map((group) =>
+          group.collapsible ? (
+            <details class="footer-sitemap-group footer-sitemap-collapsible" open data-phone-open={group.phoneOpen ? "" : undefined}>
+              <summary><h2>{group.title}</h2></summary>
+              <ul>
+                {group.links.map((link) => (
+                  <li><a href={link.href}>{link.label}</a></li>
+                ))}
+              </ul>
+            </details>
+          ) : (
+            <section class="footer-sitemap-group">
+              <h2>{group.title}</h2>
+              <ul>
+                {group.links.map((link) => (
+                  <li><a href={link.href}>{link.label}</a></li>
+                ))}
+              </ul>
+            </section>
+          ),
+        )}
+        <details class="footer-sitemap-group footer-sitemap-collapsible" open>
+          <summary><h2>{ecosystemTitle}</h2></summary>
+          <ul>
+            {ecosystem.map((entry) => (
+              <li>
+                {entry.key === ecosystemSelf ? (
+                  <span class="footer-sitemap-self">{entry.label}</span>
+                ) : entry.href !== null ? (
+                  <a href={entry.href}>{entry.label}</a>
+                ) : (
+                  <span class="footer-sitemap-pending">{entry.label}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        </details>
+      </nav>
+      <script is:inline define:vars={{ bpPhoneMax: BP_PHONE_MAX }}>
+        /* Phones start the collapsible groups closed, except the ones
+           marked data-phone-open (Site, owner call 2026-08-27). A closed
+           <details> cannot be reopened by CSS, so this is the one place
+           script decides layout (spec 2026-08-25, item 5). Inline so it
+           runs before the footer paints; without script the groups stay
+           open, which is the graceful state.
+           The value rides define:vars from core/breakpoints.ts (step 11.1). */
+        if (window.matchMedia(`(max-width: ${bpPhoneMax}px)`).matches) {
+          document.querySelectorAll(".footer-sitemap-collapsible:not([data-phone-open])").forEach((d) => {
+            d.removeAttribute("open");
+          });
+        }
+      </script>
+    </div>
+  </div>
+</footer>
+
+<style>
+  .site-footer { margin-top: 50px; }
+  /* Tint comes from the .tint-overlay pattern (default 0.1 opacity). */
+  .bottom-footer { padding: 15px 0 20px; z-index: 1; }
+  .bottom-footer-info {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    font-size: var(--font-size-sm);
+  }
+  /* The wrapped phone lines center under each other like the sitemap
+     below (owner report 2026-08-25); one line on desktop, as before. */
+  .site-info { text-align: center; }
+  /* Underlined, unlike the sitemap links below: this one sits inside
+     running text (the copyright line), where the same ink at 0.8
+     opacity is not a visible link mark (WCAG 1.4.1, axe
+     link-in-text-block; caught by test/a11y.test.ts at phone width,
+     where the pipe retires and the line break is all that frames it). */
+  .site-info a { text-decoration: underline; opacity: 0.8; transition: var(--transition); color: var(--ink); }
+  .site-info-seg { white-space: nowrap; }
+  /* The pipe's separating job is done by the line break when the
+     segments wrap; below the mobile breakpoint the break is expected,
+     so the pipe retires there. */
+  @media (--bp-phone) { .site-info-sep { display: none; } }
+  .site-info a:hover { opacity: 1; }
+
+  /* Sitemap columns under the copyright line, centered like it (owner
+     feedback 2026-08-01). position: relative lifts the content above the
+     tint ::before, same idiom as .bottom-footer-info. */
+  .footer-sitemap {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px 90px;
+    margin-top: 15px;
+    padding-top: 20px;
+    border-top: 1px solid var(--hairline);
+    font-size: var(--font-size-sm);
+  }
+  .footer-sitemap-group h2 {
+    margin: 0 0 8px;
+    font-size: var(--font-size-xs);
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+  .footer-sitemap-group ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .footer-sitemap-group li { margin: 4px 0; }
+  .footer-sitemap a {
+    text-decoration: none;
+    opacity: 0.8;
+    transition: var(--transition);
+  }
+  .footer-sitemap a:hover,
+  .footer-sitemap a:focus { opacity: 1; text-decoration: underline; }
+  /* The monochrome theme makes a color marker invisible (text already IS
+     the primary color), so "you are here" is weight, not hue. */
+  .footer-sitemap-self { font-weight: 700; }
+  .footer-sitemap-pending { opacity: 0.55; }
+
+  /* Collapsible groups: on desktop the summary is nothing but the
+     heading it replaced (no marker, no pointer). Mouse toggling is off
+     on desktop (the spec's call); keyboard toggling of a focused
+     summary remains, reopening is one keypress. */
+  .footer-sitemap-collapsible summary { list-style: none; cursor: default; pointer-events: none; }
+  .footer-sitemap-collapsible summary::-webkit-details-marker { display: none; }
+  .footer-sitemap-collapsible summary h2 { display: inline-block; }
+
+  /* Phones: one centered column, every group behind a boxed +/- marker
+     in the square grammar (owner call 2026-08-25); Feeds and Ecosystem
+     start closed, Site open (the inline script above). The marker pins
+     to the column's left edge and the title centers over the group, so
+     the three titles line up under the copyright line (owner call
+     2026-08-27). */
+  @media (--bp-phone) {
+    .footer-sitemap {
+      flex-direction: column;
+      align-items: center;
+      gap: 14px;
+    }
+    .footer-sitemap-group { text-align: center; width: 100%; }
+    .footer-sitemap-collapsible summary {
+      display: block;
+      position: relative;
+      cursor: pointer;
+      pointer-events: auto;
+    }
+    .footer-sitemap-collapsible summary::before {
+      content: "+";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      translate: 0 -50%;
+      width: 1.2em;
+      height: 1.2em;
+      line-height: 1.1em;
+      border: var(--stroke) solid currentColor;
+      font-size: var(--font-size-xs);
+      font-weight: 700;
+      text-align: center;
+    }
+    .footer-sitemap-collapsible[open] summary::before { content: "\2212"; }
+    .footer-sitemap-collapsible:not([open]) summary h2 { margin-bottom: 0; }
+    /* Keyboard focus is the site-wide ring (base/reset.css). */
+  }
+</style>

package/src/components/LightboxLink.astro

@@ -0,0 +1,13 @@
+---
+/* The build-time lightbox anchor (step 5, 2026-08-30): owner of the
+   data-lb-* contract that scripts/lightbox.ts itemFor() reads. The
+   caption string feeds both data-lb-caption and the aria-label detail;
+   every pre-step-5 site passed the same string to both. class:list
+   stays FIRST in the tag: content-components and kitchen-sink pin
+   `<a class="lightbox-link"` as the anchor's opening. Base styling
+   (display, position, cursor) lives in styles/lightbox.css; no scoped
+   CSS here so callers' :global-wrapped rules reach the anchor. */
+interface Props extends Record<string, unknown> { href: string; w: number; h: number; caption?: string; class?: string }
+const { href, w, h, caption = "", class: className, ...rest } = Astro.props;
+---
+<a class:list={["lightbox-link", className]} href={href} data-lb-w={w} data-lb-h={h} data-lb-caption={caption} aria-label={`View full-size image${caption ? `: ${caption}` : ""}`} {...rest}><slot /></a>

package/src/components/LinkListWidget.astro

@@ -0,0 +1,19 @@
+---
+/* One list widget for the sidebar's three lists (step 6, 2026-08-30):
+   a Widget holding a link list, counts rendered when present. Replaces
+   RecentPosts, CategoriesWidget, and ArchivesWidget; the sidebar builds
+   the items via src/lib/view-models.ts. The class prop rides down to
+   Widget's root, so this file has no class:list of its own. */
+import Widget from "./Widget.astro";
+import type { LinkListItem } from "./models";
+
+interface Props { title: string; items: LinkListItem[]; headingLevel?: 2 | 3 | 4; class?: string }
+const { title, items, headingLevel = 2, class: className } = Astro.props;
+---
+<Widget title={title} headingLevel={headingLevel} class={className}>
+  <ul>
+    {items.map((i) => (
+      <li><a href={i.href}>{i.label}</a>{i.count !== undefined && ` (${i.count})`}</li>
+    ))}
+  </ul>
+</Widget>

package/src/components/Pagination.astro

@@ -0,0 +1,72 @@
+---
+/* Pagination matching the live WordPress markup: nav.navigation.pagination
+   with .nav-links containing .page-numbers boxes and Prev/Next arrows. */
+import { archivePagePath } from "../lib/paginate";
+interface Props {
+  current: number;
+  total: number;
+  base?: string;
+  class?: string;
+  labels?: { heading?: string; prev?: string; next?: string };
+}
+const { current, total, base = "", class: className, labels: labelsOverride = {} } = Astro.props;
+const labels = { heading: "Posts pagination", prev: "Previous", next: "Next", ...labelsOverride };
+const pageHref = (n: number) => archivePagePath(n, base);
+---
+{total > 1 && (
+  <nav class:list={["navigation", "pagination", className]} aria-label={labels.heading}>
+    <h2 class="screen-reader-text">{labels.heading}</h2>
+    <div class="nav-links">
+      {current > 1 && (
+        <a class="prev page-numbers press-box" href={pageHref(current - 1)}>
+          <svg viewBox="0 0 448 512" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"/></svg>
+          <span class="screen-reader-text">{labels.prev}</span>
+        </a>
+      )}
+      {Array.from({ length: total }, (_, i) => i + 1).map((n) =>
+        n === current
+          ? <span aria-current="page" class="page-numbers current">{n}</span>
+          : <a class="page-numbers press-box" href={pageHref(n)}>{n}</a>
+      )}
+      {current < total && (
+        <a class="next page-numbers press-box" href={pageHref(current + 1)}>
+          <svg viewBox="0 0 448 512" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>
+          <span class="screen-reader-text">{labels.next}</span>
+        </a>
+      )}
+    </div>
+  </nav>
+)}
+
+<style>
+  .nav-links {
+    display: flex;
+    gap: 5px;
+    margin: 10px 0 20px;
+    justify-content: center;
+  }
+  .nav-links a,
+  .nav-links span {
+    text-decoration: none;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition);
+    color: var(--ink);
+    border: 1px solid var(--ink);
+  }
+  .nav-links a:hover,
+  .nav-links a:focus {
+    color: var(--ink);
+    border-color: var(--rule);
+  }
+  /* Press feedback comes from .press-box on the links; the shared rule
+     above keeps this site's 1px cell border over the pattern's 2px. */
+  .nav-links span.current {
+    color: var(--on-ink);
+    background-color: var(--ink);
+    border-color: var(--rule);
+  }
+</style>

package/src/components/PostCard.astro

@@ -0,0 +1,166 @@
+---
+/* Archive/grid post card matching the live markup exactly:
+   article > .post-item.post-grid > .post-item-image (thumbnail link + reading
+   chip) + .post-item-content (categories, underlined title, meta, excerpt).
+   Comments are permanently dropped, so the chip carries read time only.
+   Fed by postCardModel() in src/lib/view-models.ts. */
+import SmartImage from "./SmartImage.astro";
+import CornerBadges from "./CornerBadges.astro";
+import type { PostCardModel } from "./models";
+
+interface Props extends PostCardModel { headingLevel?: 2 | 3 | 4; class?: string; minReadLabel?: string }
+const {
+  href, title, excerpt, author, dateStr, minutes, hero, heroPosition,
+  draft = false, genai, demo, categories, headingLevel = 2, class: className,
+  minReadLabel = "min read",
+} = Astro.props;
+/* Annotated, not cast: an `as` cast in the frontmatter makes the Astro
+   compiler drop the Props type (found 2026-08-25, bisected with
+   convertToTSX). */
+const Heading: "h2" | "h3" | "h4" = `h${headingLevel}`;
+/* Optional per-post crop focus for the cover-fit thumbnail; see the
+   heroPosition comment in content.config.ts. */
+const heroStyle = heroPosition ? `object-position: ${heroPosition}` : undefined;
+---
+{/* The mapper guarantees an image (Henry placeholder when no featured
+    image), so every card takes the thumbnail treatment. */}
+<article class:list={["has-post-thumbnail", className]}>
+  <div class="post-item post-grid">
+    <div class="post-item-image">
+      {/* alt divergence kept from pre-step-5: empty on the svg placeholder, title on a real hero; the anchor is aria-hidden either way. */}
+      <a class="post-thumbnail" href={href} aria-hidden="true" tabindex="-1">
+        <SmartImage src={hero} alt={hero.format === "svg" ? "" : title} widths={[470, 940]} sizes="(max-width: 700px) 100vw, 470px" style={heroStyle} />
+      </a>
+      {draft && <span class="draft-stamp">DRAFT</span>}
+      <div class="read-time-comment">
+        <span class="reading-time chip">
+          <svg viewBox="0 0 512 512" width="12" height="12" fill="currentColor" aria-hidden="true"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>
+          {`${minutes} ${minReadLabel}`}</span>
+      </div>
+      <CornerBadges genai={genai} demo={demo} />
+    </div>
+    <div class="post-item-content">
+      <div class="entry-cat">
+        {/* Owner-approved divergence from live (2026-07-28): live wraps the
+            category list onto extra rows; ours comma-joins on one line and
+            lets the browser ellipsize overflow. Do not restore the flex ul. */}
+        <span class="post-categories">
+          {categories.map((c, idx) => (
+            <Fragment>{idx > 0 && ", "}<a href={c.href} rel="category tag">{c.name}</a></Fragment>
+          ))}
+        </span>
+      </div>
+      <Heading class="entry-title"><a href={href} rel="bookmark">{title}</a></Heading>
+      <ul class="entry-meta">
+        <li class="post-author">
+          <svg viewBox="0 0 448 512" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>
+          {author}
+        </li>
+        <li class="post-date">
+          <svg viewBox="0 0 448 512" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48z"/></svg>
+          {dateStr}
+        </li>
+      </ul>
+      {/* Excerpts arrive display-ready from the migrator (truncation
+          ellipsis included when warranted); render verbatim, never decorate. */}
+      <div class="post-content">{excerpt}</div>
+    </div>
+  </div>
+</article>
+
+<style>
+  .post-item { transition: all 0.5s ease-in-out; }
+  /* Same outline as MediaText media and gallery plates (owner request);
+     on the container so the hover zoom stays clipped inside it. */
+  .post-item-image { position: relative; overflow: hidden; border: var(--stroke) solid var(--rule); }
+  .post-item-image a { display: block; height: 100%; width: 100%; line-height: 0; }
+  /* The image box clips overflow, so the site-wide ring sits inside. */
+  .post-item-image a:focus-visible { outline-offset: -3px; }
+  .post-item-image a :global(img) {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 4 / 2.8;
+    object-fit: cover;
+    transition: all 0.5s ease-in-out;
+  }
+  .post-item:hover .post-item-image :global(img) { transform: scale(1.07); }
+  /* Stamp from the .draft-stamp pattern; the card's size and stacking
+     (above the hover-zoomed image) are here. */
+  .draft-stamp {
+    z-index: 2;
+    font-size: var(--font-size-xl);
+  }
+  /* Chip look comes from the .chip pattern; only placement is contextual. */
+  .read-time-comment {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    z-index: 1;
+  }
+  .post-item-content { padding: 15px 0 0; padding-top: 10px; }
+  .entry-cat .post-categories {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* The links' font box stands taller than this line-height:1 row, and
+       overflow clips at the padding box, so without vertical breathing
+       room the inset focus/hover ring loses its top and bottom bands.
+       The negative margin gives the padding back, keeping card layout
+       identical (smoke test pins the containment). */
+    padding-block: 3px;
+    margin-block: -3px;
+    color: var(--ink);
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: var(--font-size-xs);
+    line-height: 1; /* carried over from the old li a rule; keeps card height */
+    letter-spacing: 0.8px;
+  }
+  .entry-cat .post-categories a {
+    color: inherit;
+    text-decoration: none;
+    transition: var(--transition);
+  }
+  .entry-cat .post-categories a:hover {
+    outline: 2px solid currentColor;
+    outline-offset: -2px; /* Draws outline inside link to avoid clipping by container overflow */
+  }
+  .entry-cat .post-categories a:focus-visible { outline-offset: -2px; }
+  /* Owner-approved divergence from live (2026-07-26): the live theme
+     word-breaks titles mid-word (word-break: break-all); ours wraps at
+     word boundaries on purpose. Do not add break-all for fidelity. */
+  .entry-title {
+    margin-block: 5px 8px;
+    line-height: 1.3;
+    font-size: var(--font-size-base);
+    font-family: var(--font-body);
+  }
+  .entry-title a {
+    color: var(--ink);
+    display: inline;
+    text-decoration-line: underline;
+    transition: var(--transition);
+  }
+  .entry-title a:hover { outline: 2px solid currentColor; }
+  .entry-meta {
+    margin: 0 0 10px;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 5px;
+    column-gap: 10px;
+    align-items: center;
+  }
+  .entry-meta li {
+    margin-bottom: 0;
+    font-size: var(--font-size-xs);
+    text-transform: capitalize;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+  .post-content { font-size: var(--font-size-sm); }
+</style>