astroidjs 0.1.1 → 0.2.0

package/src/components/Section.astro

@@ -1,46 +1,112 @@
 ---
-// `<Section>` — the section-library dispatcher (ADR 0003, item 2). It's a
-// discriminated union over `SectionKind` (see ./sections.ts): `<Section
-// kind="hero" heading="…" />` requires hero fields and rejects another kind's, and
-// each arm renders the matching section-library component. Bespoke, site-owned
-// sections stay first-class (as the reference site's hand-written ones are) — this
-// is for the catalog sections, not a mandate to route everything through it.
-import type { SectionProps } from "./sections.js";
+// `<Section>` — the section-library dispatcher (ADR 0003 item 2, on the ADR 0005
+// model).
+//
+// It renders ONE stored `SectionItem`: dispatch on `_type`, hand the component
+// its `base` path, and let the component own every pixel. What changed from the
+// old `kind`-prop version is where the truth lives — the item is data loaded from
+// the page's `sections` column, not props a template hand-wrote, so what renders
+// is exactly what the on-canvas editor edits in place.
+//
+// Two marker responsibilities, split the way ADR 0005 §2 splits them:
+//   • the BOUNDARY (`data-louise-section` / `data-louise-block`) is stamped here,
+//     because only the dispatcher knows an item's position;
+//   • the FIELDS (`data-louise-sfield`) are stamped by `<Editable base={base}
+//     field="…">` inside each component, because only the component knows which
+//     of its text nodes are editable.
+//
+// Blocks recurse through this same component with a deeper `base`. That's the
+// whole trick: a component never learns its own depth, so a type that renders as
+// a section renders unchanged as a block.
+import type { MediaMeta, SectionItem, SectionRenderProps } from "./sections.js";
+import AboutIntro from "./sections/AboutIntro.astro";
+import Banner from "./sections/Banner.astro";
 import Contact from "./sections/Contact.astro";
 import Cta from "./sections/Cta.astro";
+import Faq from "./sections/Faq.astro";
 import FeatureGrid from "./sections/FeatureGrid.astro";
+import Gallery from "./sections/Gallery.astro";
 import Hero from "./sections/Hero.astro";
+import LocationHours from "./sections/LocationHours.astro";
+import Media from "./sections/Media.astro";
+import PricingTiers from "./sections/PricingTiers.astro";
+import ProductGrid from "./sections/ProductGrid.astro";
+import SplitImage from "./sections/SplitImage.astro";
+import Steps from "./sections/Steps.astro";
+import Testimonial from "./sections/Testimonial.astro";
 
-const p = Astro.props as SectionProps;
+interface Props {
+  item: SectionItem;
+  /** This item's path within the page's `sections` array: `"2"` at the top
+   *  level, `"2.blocks.0"` for a block. */
+  base: string;
+  /** Force edit markers on/off. Defaults to `Astro.locals.editMode`. */
+  edit?: boolean;
+  /** Page-wide media alt/caption, resolved once by `<Sections>`. */
+  mediaMeta?: MediaMeta;
+}
+
+/**
+ * `_type` → render component. A map rather than a chain of `{type === "x" && …}`
+ * for one reason that matters: it can be checked. A catalog entry whose type is
+ * missing here renders NOTHING — a silent hole in the page rather than an error
+ * — so the test suite asserts these keys and the catalog's are the same set.
+ */
+const COMPONENTS: Record<string, ((props: SectionRenderProps) => unknown) | undefined> = {
+  hero: Hero,
+  featureGrid: FeatureGrid,
+  cta: Cta,
+  contact: Contact,
+  gallery: Gallery,
+  media: Media,
+  splitImage: SplitImage,
+  steps: Steps,
+  banner: Banner,
+  faq: Faq,
+  pricingTiers: PricingTiers,
+  testimonial: Testimonial,
+  aboutIntro: AboutIntro,
+  productGrid: ProductGrid,
+  locationHours: LocationHours,
+};
+
+const { item, base, edit, mediaMeta } = Astro.props;
+
+const editing = edit ?? (Astro.locals as { editMode?: boolean }).editMode ?? false;
+const type = String(item._type);
+
+// `blocks` is the reserved structural key; its marker path is positional
+// (`<i>.blocks.<j>`), which is what the client's depth-agnostic path parser walks.
+const blocks = Array.isArray(item.blocks) ? item.blocks : [];
+
+// The boundary marker the on-canvas chrome draws its ring on. `class="contents"`
+// keeps this wrapper out of layout entirely — the ring is drawn as a box-shadow
+// on the element itself (ADR 0005 §3), so an extra block box here would offset
+// every section's spacing for the sake of an attribute.
+const boundary = editing
+  ? base.includes(".blocks.")
+    ? { "data-louise-block": base }
+    : { "data-louise-section": base }
+  : {};
+
+const shared = { item, base, edit: editing, mediaMeta };
+
+// Resolved in the frontmatter so the template is one dynamic tag rather than a
+// ladder of comparisons. The map itself is the dispatch check — an unknown
+// `_type` (legitimate mid-migration, and already rejected on write) simply
+// finds nothing and renders nothing, which is why the lookup is typed as
+// possibly-undefined rather than asserted.
+const Component = COMPONENTS[type];
 ---
 
 {
-  p.kind === "hero" && (
-    <Hero
-      heading={p.heading}
-      subheading={p.subheading}
-      ctaLabel={p.ctaLabel}
-      ctaHref={p.ctaHref}
-      colorway={p.colorway}
-      align={p.align}
-    />
-  )
-}
-{
-  p.kind === "featureGrid" && (
-    <FeatureGrid heading={p.heading} items={p.items} colorway={p.colorway} align={p.align} />
-  )
-}
-{
-  p.kind === "cta" && (
-    <Cta
-      heading={p.heading}
-      body={p.body}
-      ctaLabel={p.ctaLabel}
-      ctaHref={p.ctaHref}
-      colorway={p.colorway}
-      align={p.align}
-    />
+  Component && (
+    <div {...boundary} class="contents">
+      <Component {...shared} />
+
+      {blocks.map((block, j) => (
+        <Astro.self item={block} base={`${base}.blocks.${j}`} edit={editing} mediaMeta={mediaMeta} />
+      ))}
+    </div>
   )
 }
-{p.kind === "contact" && <Contact heading={p.heading} blurb={p.blurb} colorway={p.colorway} align={p.align} />}

package/src/components/Sections.astro

@@ -0,0 +1,64 @@
+---
+// `<Sections>` — render a page's whole `sections` array.
+//
+// This exists for one reason `<Section>` can't serve: the media lookup has to
+// span the page. A section stores an image as a URL, but the `alt`/`caption` an
+// editor typed live on the media ASSET, so rendering images correctly means
+// joining back to the registry — and doing that per image is thirty D1
+// round-trips for one gallery. Here it's ONE bounded `IN (...)` per page,
+// threaded down as `mediaMeta`.
+//
+// It's also the only place that knows an item's index, which is what every
+// `data-louise-*` marker path is built from.
+import { collectSectionMediaUrls, type MediaMetaDatabase, resolveSectionMedia } from "./media-meta.js";
+import type { MediaMeta, SectionCatalog, SectionItem } from "./sections.js";
+import { astroidSectionCatalog } from "./sections.js";
+import Section from "./Section.astro";
+
+interface Props {
+  /** The page's stored `sections` array. Untrusted JSON — a non-array, or an
+   *  item with an unknown `_type`, renders nothing rather than throwing. */
+  items: unknown;
+  /** D1, for the media alt/caption lookup. Omit to skip it entirely. */
+  db?: MediaMetaDatabase;
+  /** Public media base, for turning a stored URL back into a registry key.
+   *  Matches the site's `MEDIA_URL`. */
+  mediaBase?: string;
+  /** Override the catalog — a site that extends Astroid's set passes its own. */
+  catalog?: SectionCatalog;
+  /** Force edit markers on/off. Defaults to `Astro.locals.editMode`. */
+  edit?: boolean;
+  /** Pre-resolved media metadata, when the page already looked it up. */
+  mediaMeta?: MediaMeta;
+}
+
+const {
+  items,
+  db,
+  mediaBase = "/media",
+  catalog = astroidSectionCatalog,
+  edit,
+  mediaMeta: providedMeta,
+} = Astro.props;
+
+// A page with no sections column yet, or a malformed one, is a normal state
+// (nothing seeded) — not an error worth failing the render over.
+const list: SectionItem[] = Array.isArray(items) ? (items as SectionItem[]) : [];
+
+// One lookup for the page. Skipped when the caller already did it (a layout that
+// renders sections in two places) or when there's no DB to ask.
+const mediaMeta =
+  providedMeta ?? (await resolveSectionMedia(db, collectSectionMediaUrls(list, catalog), mediaBase));
+---
+
+{/*
+  The host element. `mountSections(el, opts)` takes the element to scan for
+  `[data-louise-sfield]` markers and to hang on-canvas chrome off, so rendering
+  it here — rather than asking every page to remember a wrapper — is what makes
+  `<Sections>` self-sufficient: drop it on a page and the editor can find it.
+  A plain block wrapper, not `display: contents`, because the chrome positions
+  toolbars against a real box.
+*/}
+<div data-louise-sections-host>
+  {list.map((item, i) => <Section item={item} base={String(i)} edit={edit} mediaMeta={mediaMeta} />)}
+</div>

package/src/components/Seo.astro

@@ -0,0 +1,57 @@
+---
+// `<Seo>` — the settings-driven `<head>` block: title (templated), description,
+// canonical, robots, Open Graph, and the Twitter/X card.
+//
+// Tags are emitted directly rather than through a wrapper library. There are
+// about fifteen of them, the shapes are frozen by the OG and Twitter specs, and
+// owning them means the resolution rules (see `resolvePageSeo`) are the ONLY
+// place a value can come from — which is what makes the layer predictable.
+//
+// JSON-LD is not here: it's a separate concern with different escaping rules and
+// its own component (`<StructuredData>`).
+import { resolvePageSeo } from "astroidjs";
+import type { AstroidSeoSettings, PageSeoInput } from "astroidjs";
+
+interface Props extends PageSeoInput {
+  /** The `site_settings` row (or the SEO-relevant subset of it). */
+  settings: AstroidSeoSettings;
+  /** Absolute canonical URL. Defaults to the URL being rendered. */
+  canonical?: string;
+  /** Overrides the config's `seo.titleTemplate` for this page. */
+  titleTemplate?: string;
+  twitterHandle?: string;
+  locale?: string;
+}
+
+const { settings, canonical, titleTemplate, twitterHandle, locale, ...page } = Astro.props;
+
+const seo = resolvePageSeo(settings, page, {
+  canonical: canonical ?? Astro.url.href,
+  titleTemplate,
+  twitterHandle,
+  locale,
+});
+---
+
+<title>{seo.title}</title>
+<link rel="canonical" href={seo.canonical} />
+{seo.description && <meta name="description" content={seo.description} />}
+{/* nofollow alongside noindex: a page worth hiding is rarely worth crawling. */}
+{seo.noindex && <meta name="robots" content="noindex, nofollow" />}
+
+<meta property="og:type" content={seo.ogType} />
+{/* The bare title, not the templated one — og:site_name already carries the brand. */}
+<meta property="og:title" content={seo.bareTitle} />
+<meta property="og:url" content={seo.canonical} />
+{seo.description && <meta property="og:description" content={seo.description} />}
+{seo.siteName && <meta property="og:site_name" content={seo.siteName} />}
+{seo.locale && <meta property="og:locale" content={seo.locale} />}
+{seo.ogImage && <meta property="og:image" content={seo.ogImage} />}
+{seo.ogImageAlt && <meta property="og:image:alt" content={seo.ogImageAlt} />}
+
+<meta name="twitter:card" content={seo.ogImage ? "summary_large_image" : "summary"} />
+<meta name="twitter:title" content={seo.bareTitle} />
+{seo.description && <meta name="twitter:description" content={seo.description} />}
+{seo.ogImage && <meta name="twitter:image" content={seo.ogImage} />}
+{seo.twitterHandle && <meta name="twitter:site" content={seo.twitterHandle} />}
+{seo.twitterHandle && <meta name="twitter:creator" content={seo.twitterHandle} />}

package/src/components/StageBar.astro

@@ -0,0 +1,137 @@
+---
+// `<StageBar>` — a pipeline's progress as a segmented bar.
+//
+// Generalized from ghostfire's six-stage floor tracker, which hard-coded the
+// segment count, the corner radii, the brand hex codes, and a mascot image.
+// Here the stage list drives everything and the colours are theme tokens, so a
+// four-stage onboarding flow and an eight-stage production line both work and
+// a re-theme needs no edit.
+//
+// Rendered as an ordered list rather than a row of divs: the stages ARE a
+// sequence, `aria-current` says which one is live, and a screen reader gets
+// "step 3 of 6, Dried, current" instead of silence.
+interface Props {
+  /** Stage labels, in order. */
+  stages: readonly string[];
+  /** Stage currently in progress. `>= stages.length` renders everything done. */
+  stage: number;
+  /**
+   * An optional marker (an emoji, a mascot glyph) that rides above the active
+   * segment. Off by default — the reference's bobbing ghost is brand, not
+   * mechanism.
+   */
+  marker?: string;
+  class?: string;
+}
+
+const { stages, stage, marker, class: className } = Astro.props;
+
+// Clamp rather than trust: `stage` comes from a database column, and a value
+// past the end is the normal "complete" state rather than an error.
+const current = Math.max(0, Math.min(stage, stages.length));
+const complete = current >= stages.length;
+
+// Percent across the bar, centred on the active segment. Only computed when
+// there is an active segment to point at.
+const markerLeft = complete ? null : `${(((current + 0.5) / stages.length) * 100).toFixed(2)}%`;
+---
+
+<div class:list={["astroid-stagebar", className]}>
+  {marker && markerLeft && (
+    <span aria-hidden="true" class="astroid-stagebar__marker" style={`left:${markerLeft}`}>
+      {marker}
+    </span>
+  )}
+  <ol class="astroid-stagebar__track">
+    {stages.map((label, i) => (
+      <li
+        class="astroid-stagebar__step"
+        data-state={i < current ? "done" : i === current ? "current" : "upcoming"}
+        aria-current={i === current ? "step" : undefined}
+      >
+        <span class="astroid-stagebar__seg" />
+        <span class="astroid-stagebar__label">{label}</span>
+      </li>
+    ))}
+  </ol>
+</div>
+
+<style>
+  .astroid-stagebar {
+    position: relative;
+  }
+  .astroid-stagebar__track {
+    display: flex;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .astroid-stagebar__step {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .astroid-stagebar__seg {
+    height: 1.75rem;
+    border-radius: 0.25rem;
+    background: var(--fallback-b3, oklch(var(--b3)));
+    transition: background-color 300ms ease;
+  }
+  /* Round only the outer ends, so the bar reads as one track rather than a row
+     of separate pills — at any segment count. */
+  .astroid-stagebar__step:first-child .astroid-stagebar__seg {
+    border-start-start-radius: 999px;
+    border-end-start-radius: 999px;
+  }
+  .astroid-stagebar__step:last-child .astroid-stagebar__seg {
+    border-start-end-radius: 999px;
+    border-end-end-radius: 999px;
+  }
+  .astroid-stagebar__step[data-state="done"] .astroid-stagebar__seg {
+    background: var(--fallback-p, oklch(var(--p)));
+  }
+  .astroid-stagebar__step[data-state="current"] .astroid-stagebar__seg {
+    background: var(--fallback-a, oklch(var(--a)));
+    animation: astroid-stagebar-pulse 1.6s ease-in-out infinite;
+  }
+  .astroid-stagebar__label {
+    text-align: center;
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    opacity: 0.45;
+  }
+  .astroid-stagebar__step[data-state="done"] .astroid-stagebar__label,
+  .astroid-stagebar__step[data-state="current"] .astroid-stagebar__label {
+    opacity: 1;
+  }
+  .astroid-stagebar__marker {
+    position: absolute;
+    top: -1.9rem;
+    z-index: 1;
+    translate: -50%;
+    font-size: 1.5rem;
+    line-height: 1;
+    transition: left 500ms ease;
+  }
+
+  @keyframes astroid-stagebar-pulse {
+    50% {
+      opacity: 0.6;
+    }
+  }
+  /* The pulse is decoration on top of a state that colour and `aria-current`
+     already convey, so it costs nothing to drop. */
+  @media (prefers-reduced-motion: reduce) {
+    .astroid-stagebar__step[data-state="current"] .astroid-stagebar__seg {
+      animation: none;
+    }
+    .astroid-stagebar__marker {
+      transition: none;
+    }
+  }
+</style>

package/src/components/StructuredData.astro

@@ -0,0 +1,33 @@
+---
+// `<StructuredData>` — the schema.org JSON-LD `@graph` for rich results and AI
+// answer surfaces: the business (its `@type` from the archetype), the WebSite,
+// and optionally the entity this page is about.
+//
+// `is:inline` is required, not stylistic. Astro would otherwise treat the block
+// as a script to process and hash; `application/ld+json` is a data block the
+// browser never executes, so `script-src` doesn't govern it and it needs no
+// hash. See `escapeJsonLd` for why the payload is escaped rather than stringified.
+import { astroidStructuredData, escapeJsonLd } from "astroidjs";
+import type { AstroidConfig, JsonLdNode, StructuredDataInput } from "astroidjs";
+
+interface Props {
+  config: AstroidConfig;
+  settings: StructuredDataInput["settings"];
+  /** Absolute origin serving this page. Defaults to the current origin, which
+   *  keeps a preview deploy describing itself rather than the live domain. */
+  siteUrl?: string;
+  /** The thing this page is about — a Product, VisualArtwork, Article. */
+  entity?: JsonLdNode;
+}
+
+const { config, settings, siteUrl, entity } = Astro.props;
+
+const graph = astroidStructuredData({
+  config,
+  settings,
+  siteUrl: siteUrl ?? Astro.url.origin,
+  entity,
+});
+---
+
+<script type="application/ld+json" is:inline set:html={escapeJsonLd(graph)} />

package/src/components/justify.ts

@@ -0,0 +1,170 @@
+// Copyright (c) 2026 BowenLabs. Astroid is MIT licensed.
+//
+// Justified (Flickr-style) row balancing.
+//
+// The layout every photo grid actually wants: images keep their aspect ratios,
+// each row is exactly as wide as the container, and rows land near a target
+// height. CSS can't express it — `grid` needs uniform tracks, and `columns`
+// gives you a masonry *column* flow where reading order runs down instead of
+// across — so it's arithmetic, done once here rather than re-derived per site.
+//
+// Pure and synchronous on purpose. It's called twice for the same gallery:
+// once during SSR with the aspect ratios the media library recorded, and again
+// on the client after the images decode, with their true dimensions. Keeping it
+// free of DOM access is what lets the same function serve both, and what lets it
+// be tested without a browser.
+//
+// Self-contained by the same rule as `sections.ts`: this module ships as SOURCE
+// (the `.astro` beside it imports it, and so does the client script it inlines),
+// so it must not reach back into astroid's built `src/*`.
+
+/** One item to lay out. `aspect` is width ÷ height. */
+export interface JustifyItem {
+  /** Intrinsic aspect ratio (w/h). Non-finite or ≤ 0 falls back to {@link DEFAULT_ASPECT}. */
+  aspect: number;
+}
+
+/**
+ * One image in a `<JustifiedGallery>`.
+ *
+ * Declared here rather than in the `.astro` component so consumers can import
+ * the type from a plain module — an `.astro` file's non-`Props` exports are
+ * awkward to reach from TypeScript, and a scaffolded page shouldn't have to.
+ */
+export interface GalleryItem {
+  src: string;
+  /**
+   * Alternative text. Required, and `""` is a legitimate value for a purely
+   * decorative tile — what must not happen is the attribute going missing.
+   */
+  alt: string;
+  /** Intrinsic dimensions, when the media library recorded them. Used for the
+   *  pre-decode layout; the client corrects from the decoded image regardless. */
+  width?: number;
+  height?: number;
+  caption?: string;
+  /** Wrap the tile in a link (a detail page, a lightbox route). */
+  href?: string;
+}
+
+/** A laid-out item: its position in the input, at a concrete pixel size. */
+export interface JustifiedBox {
+  /** Index into the input array — the caller maps this back to its own data. */
+  index: number;
+  width: number;
+  height: number;
+}
+
+/** One completed row. Every box in it shares `height`. */
+export interface JustifiedRow {
+  height: number;
+  boxes: JustifiedBox[];
+}
+
+export interface JustifyOptions {
+  /** Content-box width available, in px. */
+  containerWidth: number;
+  /** The height rows aim for. Rows land near it, never exactly on it. */
+  targetHeight: number;
+  /** Horizontal gap between items in a row, in px. Default 8. */
+  gap?: number;
+  /**
+   * How much taller than `targetHeight` a trailing row may be before it's left
+   * un-stretched. Default 1.5.
+   *
+   * This is the knob that stops the classic justified-layout embarrassment: a
+   * gallery whose last row holds one landscape photo, stretched to the full
+   * container width and four times the height of every other row. Past this
+   * multiple the last row keeps `targetHeight` and simply ends early.
+   */
+  lastRowSlack?: number;
+}
+
+/** Aspect used for an item whose real ratio isn't known yet (3:2 landscape —
+ *  the most common photographic frame, so first paint is usually close). */
+export const DEFAULT_ASPECT = 1.5;
+
+/** Clamp a caller-supplied aspect into something layout-safe. A zero or NaN
+ *  ratio (an image that hasn't decoded, a media row with no dimensions) would
+ *  otherwise divide the row height to Infinity and blow up the whole grid. */
+function safeAspect(aspect: number): number {
+  return Number.isFinite(aspect) && aspect > 0 ? aspect : DEFAULT_ASPECT;
+}
+
+/**
+ * Balance `items` into rows that each fill `containerWidth` exactly.
+ *
+ * The rule per row: with n items of total aspect A and n−1 gaps, the height
+ * that makes the row exactly fill is `(containerWidth − gap·(n−1)) / A`. Adding
+ * items only ever *lowers* that height, so items are appended until it drops to
+ * `targetHeight` and the row closes — which is why rows come out near, but
+ * never exactly at, the target.
+ *
+ * ```ts
+ * const rows = justifyRows(photos.map((p) => ({ aspect: p.width / p.height })), {
+ *   containerWidth: 960,
+ *   targetHeight: 240,
+ * });
+ * ```
+ *
+ * Widths are distributed so each row sums to `containerWidth` to the pixel:
+ * rounding each box independently leaves a 1–2px seam that reads as a ragged
+ * right edge, so the last box in every row absorbs the rounding remainder.
+ */
+export function justifyRows(items: JustifyItem[], options: JustifyOptions): JustifiedRow[] {
+  const { containerWidth, targetHeight, gap = 8, lastRowSlack = 1.5 } = options;
+
+  // A container with no width (SSR with no measurement, a display:none parent)
+  // has no meaningful layout. Returning empty lets the caller render its
+  // fallback rather than emitting boxes at NaN.
+  if (items.length === 0 || !(containerWidth > 0) || !(targetHeight > 0)) return [];
+
+  const rows: JustifiedRow[] = [];
+  let run: { index: number; aspect: number }[] = [];
+  let runAspect = 0;
+
+  /** Turn the accumulated run into a row at `height`, filling the width exactly. */
+  const flush = (height: number, stretch: boolean) => {
+    if (run.length === 0) return;
+    const h = Math.max(1, Math.round(height));
+    const available = containerWidth - gap * (run.length - 1);
+
+    let used = 0;
+    const boxes = run.map((item, i) => {
+      const last = i === run.length - 1;
+      // Every box but the last takes its proportional share; the last takes
+      // whatever is left, so the row's widths sum to `available` exactly and the
+      // right edge stays flush. An un-stretched trailing row keeps natural
+      // widths instead — it isn't meant to reach the edge.
+      const width =
+        stretch && last
+          ? available - used
+          : Math.round(stretch ? (available * item.aspect) / runAspect : h * item.aspect);
+      used += width;
+      return { index: item.index, width: Math.max(1, width), height: h };
+    });
+
+    rows.push({ height: h, boxes });
+    run = [];
+    runAspect = 0;
+  };
+
+  items.forEach((item, index) => {
+    const aspect = safeAspect(item.aspect);
+    run.push({ index, aspect });
+    runAspect += aspect;
+
+    const height = (containerWidth - gap * (run.length - 1)) / runAspect;
+    if (height <= targetHeight) flush(height, true);
+  });
+
+  // Whatever didn't fill a row. Stretching it to the full width is right when
+  // it's nearly full and grotesque when it holds one wide photo, so the slack
+  // multiple decides.
+  if (run.length > 0) {
+    const height = (containerWidth - gap * (run.length - 1)) / runAspect;
+    flush(Math.min(height, targetHeight * lastRowSlack), height <= targetHeight * lastRowSlack);
+  }
+
+  return rows;
+}