astroidjs 0.1.1 → 0.2.0

package/src/components/media-meta.ts

@@ -0,0 +1,174 @@
+// Copyright (c) 2026 BowenLabs. Astroid is MIT licensed.
+//
+// One media lookup per page, not one per image.
+//
+// A section stores an image as a URL. The `alt` and `caption` an editor typed
+// live on the media ASSET, so rendering a page's images correctly means joining
+// every image field back to the media registry. Done naively — a query per
+// `<MediaSlot>` — a gallery section is thirty round-trips to D1 on every render.
+//
+// So the whole page is resolved in ONE bounded `IN (...)` lookup before anything
+// renders, and the result is threaded down as `mediaMeta`. This is the pattern
+// ghostfire's `Sections.astro` arrived at independently, generalized.
+//
+// The collection step is SCHEMA-DRIVEN: it walks the catalog looking for fields
+// of `type: "image"` rather than hardcoding field names. That's what keeps it
+// correct as sections are added — a new section with an image field is picked up
+// because it declared one, not because someone remembered to update a list here.
+//
+// Self-contained (ships as source): type-only imports, no astroid `src/*` reach.
+
+import type { SectionCatalog, SectionField, SectionItem } from "louise-toolkit/content";
+import type { MediaMeta } from "./sections.js";
+
+/** SQLite's default parameter ceiling is 999; stay well under it and let the
+ *  caller's URL count drive the number of statements rather than the limit. */
+const CHUNK = 100;
+
+/** Walk one item's declared fields, collecting the values of `image` ones.
+ *  Recurses into `array` item fields — a gallery's images live there. */
+function collectFrom(
+  item: Record<string, unknown>,
+  fields: Record<string, SectionField> | undefined,
+  out: Set<string>,
+): void {
+  if (!fields) return;
+  for (const [key, field] of Object.entries(fields)) {
+    const value = item[key];
+    if (field.type === "image") {
+      if (typeof value === "string" && value !== "") out.add(value);
+    } else if (field.type === "array" && Array.isArray(value)) {
+      for (const row of value) {
+        if (typeof row !== "object" || row === null || Array.isArray(row)) continue;
+        // With a discriminator, an item's variant contributes extra fields on
+        // top of the shared set — an image declared only on the "image" variant
+        // of a blocks-style array would be missed otherwise.
+        const sub = row as Record<string, unknown>;
+        let itemFields = field.itemFields ?? {};
+        const disc = field.discriminator;
+        if (disc) {
+          const variant = sub[disc.key];
+          const extra = typeof variant === "string" ? disc.variants[variant] : undefined;
+          if (extra) itemFields = { ...itemFields, ...extra };
+        }
+        collectFrom(sub, itemFields, out);
+      }
+    }
+  }
+}
+
+/**
+ * Every media URL a page's sections reference, deduplicated.
+ *
+ * Blocks are walked too, against the block catalog — a section's images and its
+ * blocks' images are the same lookup, and splitting them would reintroduce the
+ * per-section query this exists to avoid.
+ */
+export function collectSectionMediaUrls(
+  items: SectionItem[],
+  catalog: SectionCatalog,
+  blockCatalog: SectionCatalog = {},
+): string[] {
+  const urls = new Set<string>();
+  for (const item of items) {
+    const def = catalog[String(item._type)];
+    if (def) collectFrom(item, def.fields, urls);
+    if (!Array.isArray(item.blocks)) continue;
+    for (const block of item.blocks) {
+      if (typeof block !== "object" || block === null) continue;
+      const blockDef = blockCatalog[String((block as { _type?: unknown })._type)];
+      if (blockDef) collectFrom(block as Record<string, unknown>, blockDef.fields, urls);
+    }
+  }
+  return [...urls];
+}
+
+/** The D1 surface this needs. Structural, so a real `D1Database` fits and a test
+ *  can pass a stub. */
+export interface MediaMetaDatabase {
+  prepare(query: string): {
+    bind(...values: unknown[]): {
+      all<T = Record<string, unknown>>(): Promise<{ results?: T[] }>;
+    };
+  };
+}
+
+/**
+ * Turn a public media URL into its registry `key`.
+ *
+ * The public URL is `MEDIA_URL + "/" + key`, so this is prefix removal — but it
+ * has to tolerate an absolute URL too (a site whose media base is a full origin),
+ * which is why it falls back to the pathname's last segment rather than assuming
+ * the string starts with `mediaBase`.
+ */
+export function mediaKeyFromUrl(url: string, mediaBase: string): string | null {
+  if (!url) return null;
+  const base = mediaBase.replace(/\/+$/, "");
+  if (base && url.startsWith(`${base}/`)) return url.slice(base.length + 1);
+  // Absolute or unexpected shape — take the path's tail, which is the key for
+  // every URL the media route produces.
+  try {
+    const path = url.startsWith("http") ? new URL(url).pathname : url;
+    const tail = path.split("/").filter(Boolean).pop();
+    return tail ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Resolve alt/caption for a set of media URLs in one bounded lookup per chunk.
+ *
+ * Returns `{}` on any failure rather than throwing: missing alt text degrades a
+ * page, but a media table that isn't provisioned yet must not take the whole
+ * render down with it. The caller's per-image `alt` (a usage-level override)
+ * always wins over what comes back here — this is the ASSET-level fallback.
+ */
+export async function resolveSectionMedia(
+  db: MediaMetaDatabase | undefined,
+  urls: string[],
+  mediaBase = "/media",
+): Promise<MediaMeta> {
+  if (!db || urls.length === 0) return {};
+
+  // key → the URL(s) that produced it, so results map back to what the sections
+  // actually reference.
+  const byKey = new Map<string, string[]>();
+  for (const url of urls) {
+    const key = mediaKeyFromUrl(url, mediaBase);
+    if (!key) continue;
+    const existing = byKey.get(key);
+    if (existing) existing.push(url);
+    else byKey.set(key, [url]);
+  }
+  if (byKey.size === 0) return {};
+
+  const keys = [...byKey.keys()];
+  const meta: MediaMeta = {};
+
+  try {
+    for (let i = 0; i < keys.length; i += CHUNK) {
+      const chunk = keys.slice(i, i + CHUNK);
+      const placeholders = chunk.map(() => "?").join(", ");
+      const { results } = await db
+        .prepare(`SELECT key, alt, caption FROM media WHERE key IN (${placeholders})`)
+        .bind(...chunk)
+        .all<{ key: string; alt: string | null; caption: string | null }>();
+
+      for (const row of results ?? []) {
+        for (const url of byKey.get(row.key) ?? []) {
+          meta[url] = {
+            ...(row.alt ? { alt: row.alt } : {}),
+            ...(row.caption ? { caption: row.caption } : {}),
+          };
+        }
+      }
+    }
+  } catch {
+    // No media table yet (pre-provision), or a transient D1 error. Alt text
+    // falls back to whatever the section itself carries.
+    return meta;
+  }
+
+  return meta;
+}

package/src/components/sections/AboutIntro.astro

@@ -0,0 +1,46 @@
+---
+// A portrait beside an introduction — the "about the maker" opener.
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, mediaAlt, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+import MediaSlot from "../MediaSlot.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit, mediaMeta } = Astro.props;
+
+const heading = field(item, "heading");
+const body = field(item, "body");
+const image = field(item, "image");
+---
+
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
+  <div class="mx-auto grid max-w-5xl items-start gap-10 px-6 md:grid-cols-[minmax(0,18rem)_1fr]">
+    {image && (
+      <MediaSlot
+        src={image}
+        alt={mediaAlt(mediaMeta, image, field(item, "alt"))}
+        width={576}
+        sizes="(max-width: 48rem) 100vw, 18rem"
+        ratio="3/4"
+      />
+    )}
+    <div>
+      <Editable as="h2" base={base} field="heading" edit={edit} class="text-3xl font-bold">
+        {heading}
+      </Editable>
+      {body && (
+        <Editable
+          as="div"
+          base={base}
+          field="body"
+          type="richtext"
+          edit={edit}
+          class="prose mt-4 max-w-none"
+        >
+          <Fragment set:html={body} />
+        </Editable>
+      )}
+    </div>
+  </div>
+</section>

package/src/components/sections/Banner.astro

@@ -0,0 +1,31 @@
+---
+// A single-line attention strip. Defaults to the brand colorway, since that's
+// what a banner is for.
+import type { SectionRenderProps } from "../sections.js";
+import { alignClass, colorwayClass, field, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit } = Astro.props;
+
+const text = field(item, "text");
+const ctaLabel = field(item, "ctaLabel");
+const ctaHref = field(item, "ctaHref");
+---
+
+<section class:list={["py-4", colorwayClass(setting(item, "colorway", "brand"))]}>
+  <div
+    class:list={[
+      "mx-auto flex max-w-6xl flex-wrap items-center justify-center gap-x-4 gap-y-2 px-6",
+      alignClass(setting(item, "align", "center")),
+    ]}
+  >
+    <Editable as="p" base={base} field="text" edit={edit} class="font-medium">{text}</Editable>
+    {ctaLabel && (
+      <a class="btn btn-sm" href={ctaHref || "#"}>
+        <Editable as="span" base={base} field="ctaLabel" edit={edit}>{ctaLabel}</Editable>
+      </a>
+    )}
+  </div>
+</section>

package/src/components/sections/Contact.astro

@@ -1,18 +1,31 @@
 ---
-// Contact section (ADR 0003, item 4) — a heading + blurb + link to the contact
-// route (the generated worker's contact form lives at /contact).
-import type { ContactFields, SectionBase } from "../sections.js";
-import { colorwayClass } from "../sections.js";
+// Contact section — a heading + blurb + link to the contact route (the generated
+// worker's contact form lives at /contact).
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, setting } from "../sections.js";
+import Editable from "../Editable.astro";
 
-type Props = SectionBase & ContactFields;
+type Props = SectionRenderProps;
 
-const { heading = "Get in touch", blurb, colorway = "base" } = Astro.props;
+const { item, base, edit } = Astro.props;
+
+// The default is a render-time fallback, not stored data: an editor who hasn't
+// typed a heading still gets a sensible section, and the moment they do the
+// stored value takes over.
+const heading = field(item, "heading") || "Get in touch";
+const blurb = field(item, "blurb");
 ---
 
-<section class:list={["py-16", colorwayClass(colorway)]}>
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
   <div class="mx-auto max-w-xl px-6 text-center">
-    <h2 class="text-3xl font-bold">{heading}</h2>
-    {blurb && <p class="mt-2 opacity-80">{blurb}</p>}
+    <Editable as="h2" base={base} field="heading" edit={edit} class="text-3xl font-bold">
+      {heading}
+    </Editable>
+    {blurb && (
+      <Editable as="p" base={base} field="blurb" edit={edit} multiline class="mt-2 opacity-80">
+        {blurb}
+      </Editable>
+    )}
     <a class="btn btn-primary mt-6" href="/contact">Contact us</a>
   </div>
 </section>

package/src/components/sections/Cta.astro

@@ -1,17 +1,40 @@
 ---
-// Call-to-action band (ADR 0003, item 4). Defaults to the brand colorway.
-import type { CtaFields, SectionBase } from "../sections.js";
-import { alignClass, colorwayClass } from "../sections.js";
+// Call-to-action band. Defaults to the brand colorway — a setting token, so an
+// editor can change it in the inspector without touching this file.
+import type { SectionRenderProps } from "../sections.js";
+import { alignClass, colorwayClass, field, setting } from "../sections.js";
+import Editable from "../Editable.astro";
 
-type Props = SectionBase & CtaFields;
+type Props = SectionRenderProps;
 
-const { heading, body, ctaLabel, ctaHref, colorway = "brand", align = "center" } = Astro.props;
+const { item, base, edit } = Astro.props;
+
+const heading = field(item, "heading");
+const body = field(item, "body");
+const ctaLabel = field(item, "ctaLabel");
+const ctaHref = field(item, "ctaHref");
 ---
 
-<section class:list={["py-16", colorwayClass(colorway)]}>
-  <div class:list={["mx-auto flex max-w-3xl flex-col gap-4 px-6", alignClass(align)]}>
-    <h2 class="text-3xl font-bold">{heading}</h2>
-    {body && <p class="text-lg opacity-90">{body}</p>}
-    <a class="btn" href={ctaHref}>{ctaLabel}</a>
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "brand"))]}>
+  <div
+    class:list={[
+      "mx-auto flex max-w-3xl flex-col gap-4 px-6",
+      alignClass(setting(item, "align", "center")),
+    ]}
+  >
+    <Editable as="h2" base={base} field="heading" edit={edit} class="text-3xl font-bold">
+      {heading}
+    </Editable>
+    {body && (
+      <Editable as="p" base={base} field="body" edit={edit} multiline class="text-lg opacity-90">
+        {body}
+      </Editable>
+    )}
+    {/* Rendered even without an href so the label stays editable: a CTA whose
+        link hasn't been filled in yet would otherwise vanish from the canvas,
+        and an editor can't click what isn't there. */}
+    <a class="btn" href={ctaHref || "#"}>
+      <Editable as="span" base={base} field="ctaLabel" edit={edit}>{ctaLabel}</Editable>
+    </a>
   </div>
 </section>

package/src/components/sections/Faq.astro

@@ -0,0 +1,50 @@
+---
+// Frequently-asked questions on native <details>/<summary>.
+//
+// Native rather than a JS accordion on purpose: it is keyboard-accessible and
+// screen-reader-correct with no script, it works before hydration, and browser
+// find-in-page can open a collapsed answer — which a div-based accordion
+// silently breaks.
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, itemField, list, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit } = Astro.props;
+
+const heading = field(item, "heading");
+const items = list(item, "items");
+---
+
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
+  <div class="mx-auto max-w-3xl px-6">
+    {heading && (
+      <Editable as="h2" base={base} field="heading" edit={edit} class="mb-8 text-3xl font-bold">
+        {heading}
+      </Editable>
+    )}
+    <div class="divide-y divide-base-300">
+      {items.map((row, i) => (
+        /* `open` while editing: a collapsed answer is unreachable for in-place
+           editing, and the editor can't be expected to expand each one first. */
+        <details class="group py-4" open={edit}>
+          <summary class="cursor-pointer list-none font-semibold marker:content-none">
+            <Editable as="span" sfield={`${base}.items.${i}.question`} edit={edit}>
+              {itemField(row, "question")}
+            </Editable>
+          </summary>
+          <Editable
+            as="div"
+            sfield={`${base}.items.${i}.answer`}
+            type="richtext"
+            edit={edit}
+            class="prose mt-3 max-w-none"
+          >
+            <Fragment set:html={itemField(row, "answer") ?? ""} />
+          </Editable>
+        </details>
+      ))}
+    </div>
+  </div>
+</section>

package/src/components/sections/FeatureGrid.astro

@@ -1,23 +1,52 @@
 ---
-// Feature-grid section (ADR 0003, item 4) — value-prop cards. Declarative
-// props → `Theme` tokens via `colorwayClass`.
-import type { FeatureGridFields, SectionBase } from "../sections.js";
-import { colorwayClass } from "../sections.js";
+// Feature-grid section — value-prop cards over an `array` field.
+//
+// The array is where `base` earns its keep. Each card's fields address
+// `<base>.items.<i>.<key>`, so the marker is built from the item's position
+// rather than a fixed slot name — which is why the schema can use a real
+// repeatable array instead of the `card1…card6` flattening sites fall back to.
+// The client's path parser is depth-agnostic (it splits on `.` and coerces
+// numeric segments), so this needs nothing new on the editor side.
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, itemField, list, setting } from "../sections.js";
+import Editable from "../Editable.astro";
 
-type Props = SectionBase & FeatureGridFields;
+type Props = SectionRenderProps;
 
-const { heading, items, colorway = "base" } = Astro.props;
+const { item, base, edit } = Astro.props;
+
+const heading = field(item, "heading");
+const items = list(item, "items");
 ---
 
-<section class:list={["py-16", colorwayClass(colorway)]}>
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
   <div class="mx-auto max-w-5xl px-6">
-    {heading && <h2 class="mb-8 text-3xl font-bold">{heading}</h2>}
+    {heading && (
+      <Editable as="h2" base={base} field="heading" edit={edit} class="mb-8 text-3xl font-bold">
+        {heading}
+      </Editable>
+    )}
     <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-      {items.map((item) => (
+      {items.map((row, i) => (
         <div class="card bg-base-100 text-base-content shadow-sm">
           <div class="card-body">
-            <h3 class="card-title">{item.title}</h3>
-            <p class="opacity-80">{item.body}</p>
+            <Editable
+              as="h3"
+              sfield={`${base}.items.${i}.title`}
+              edit={edit}
+              class="card-title"
+            >
+              {itemField(row, "title")}
+            </Editable>
+            <Editable
+              as="p"
+              sfield={`${base}.items.${i}.body`}
+              edit={edit}
+              multiline
+              class="opacity-80"
+            >
+              {itemField(row, "body")}
+            </Editable>
           </div>
         </div>
       ))}

package/src/components/sections/Gallery.astro

@@ -0,0 +1,46 @@
+---
+// A gallery section over the justified-grid primitive (#257).
+//
+// The layout maths lives in `<JustifiedGallery>`; what this adds is the mapping
+// from stored section rows to gallery items, including the asset-level alt and
+// caption fallback that the page's single media lookup makes cheap.
+import type { GalleryItem } from "../justify.js";
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, itemField, list, mediaAlt, mediaCaption, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+import JustifiedGallery from "../JustifiedGallery.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit, mediaMeta } = Astro.props;
+
+const heading = field(item, "heading");
+
+// Rows with no image are dropped rather than rendered as a gap: an editor who
+// adds a row and hasn't picked the picture yet shouldn't see a broken tile.
+const items: GalleryItem[] = list(item, "items").flatMap((row) => {
+  const src = itemField(row, "image");
+  if (!src) return [];
+  const caption = mediaCaption(mediaMeta, src, itemField(row, "caption"));
+  const href = itemField(row, "href");
+  return [
+    {
+      src,
+      alt: mediaAlt(mediaMeta, src, itemField(row, "alt")),
+      ...(caption ? { caption } : {}),
+      ...(href ? { href } : {}),
+    },
+  ];
+});
+---
+
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
+  <div class="mx-auto max-w-6xl px-6">
+    {heading && (
+      <Editable as="h2" base={base} field="heading" edit={edit} class="mb-8 text-3xl font-bold">
+        {heading}
+      </Editable>
+    )}
+    {items.length > 0 && <JustifiedGallery items={items} />}
+  </div>
+</section>

package/src/components/sections/Hero.astro

@@ -1,22 +1,50 @@
 ---
-// Hero section (ADR 0003, item 4). Declarative props → `Theme` tokens via the
-// `colorwayClass` / `alignClass` maps — no raw class names in the prop surface, so
-// a brand re-theme flows through without touching markup.
-import type { HeroFields, SectionBase } from "../sections.js";
-import { alignClass, colorwayClass } from "../sections.js";
+// Hero section. Renders a stored `SectionItem`; every visible text node is
+// wrapped in `<Editable base={base} field="…">`, which is what makes it editable
+// in place on the real design rather than through a proxy form.
+//
+// Presentation comes from `_settings` TOKENS, not props: Louise stores
+// `colorway: "brand"` and never learns what that renders as, so the mapping
+// below is the site-owned half of the contract (ADR 0005 §5) and a re-theme
+// needs no content rewrite.
+import type { SectionRenderProps } from "../sections.js";
+import { alignClass, colorwayClass, field, setting } from "../sections.js";
+import Editable from "../Editable.astro";
 
-type Props = SectionBase & HeroFields;
+type Props = SectionRenderProps;
 
-const { heading, subheading, ctaLabel, ctaHref, colorway = "base", align = "center" } = Astro.props;
+const { item, base, edit } = Astro.props;
+
+const heading = field(item, "heading");
+const subheading = field(item, "subheading");
+const ctaLabel = field(item, "ctaLabel");
+const ctaHref = field(item, "ctaHref");
 ---
 
-<section class:list={["hero py-20", colorwayClass(colorway)]}>
-  <div class:list={["hero-content flex-col", alignClass(align)]}>
+<section class:list={["hero py-20", colorwayClass(setting(item, "colorway", "base"))]}>
+  <div class:list={["hero-content flex-col", alignClass(setting(item, "align", "center"))]}>
     <div class="max-w-2xl">
-      <h1 class="text-5xl font-bold">{heading}</h1>
-      {subheading && <p class="py-6 text-lg opacity-80">{subheading}</p>}
+      <Editable as="h1" base={base} field="heading" edit={edit} class="text-5xl font-bold">
+        {heading}
+      </Editable>
+      {subheading && (
+        <Editable
+          as="p"
+          base={base}
+          field="subheading"
+          edit={edit}
+          multiline
+          class="py-6 text-lg opacity-80"
+        >
+          {subheading}
+        </Editable>
+      )}
+      {/* The label is editable in place; the href is not — you can't point at a
+          URL, so it lives in the inspector (`inline: false` in the catalog). */}
       {ctaLabel && ctaHref && (
-        <a class="btn btn-primary" href={ctaHref}>{ctaLabel}</a>
+        <a class="btn btn-primary" href={ctaHref}>
+          <Editable as="span" base={base} field="ctaLabel" edit={edit}>{ctaLabel}</Editable>
+        </a>
       )}
     </div>
   </div>

package/src/components/sections/LocationHours.astro

@@ -0,0 +1,59 @@
+---
+// Address, phone, and opening hours.
+//
+// Hours are a <dl>: each day is a term and its hours the description, which is
+// what the pairing actually is. A table would imply columns that don't exist,
+// and a list of "Monday 9–5" strings loses the association entirely.
+import type { SectionRenderProps } from "../sections.js";
+import { colorwayClass, field, itemField, list, setting } from "../sections.js";
+import Editable from "../Editable.astro";
+
+type Props = SectionRenderProps;
+
+const { item, base, edit } = Astro.props;
+
+const heading = field(item, "heading");
+const address = field(item, "address");
+const phone = field(item, "phone");
+const items = list(item, "items");
+---
+
+<section class:list={["py-16", colorwayClass(setting(item, "colorway", "base"))]}>
+  <div class="mx-auto grid max-w-4xl gap-10 px-6 sm:grid-cols-2">
+    <div>
+      {heading && (
+        <Editable as="h2" base={base} field="heading" edit={edit} class="text-3xl font-bold">
+          {heading}
+        </Editable>
+      )}
+      {address && (
+        <Editable as="address" base={base} field="address" edit={edit} multiline class="mt-4 not-italic opacity-80">
+          {address}
+        </Editable>
+      )}
+      {phone && (
+        /* The visible number stays editable; the tel: href is derived from it,
+           stripping the formatting a human reads but a dialler can't. */
+        <p class="mt-2">
+          <a href={`tel:${phone.replace(/[^\d+]/g, "")}`}>
+            <Editable as="span" base={base} field="phone" edit={edit}>{phone}</Editable>
+          </a>
+        </p>
+      )}
+    </div>
+    {items.length > 0 && (
+      <dl class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-1">
+        {items.map((row, i) => (
+          <>
+            <Editable as="dt" sfield={`${base}.items.${i}.day`} edit={edit} class="font-medium">
+              {itemField(row, "day")}
+            </Editable>
+            <Editable as="dd" sfield={`${base}.items.${i}.hours`} edit={edit} class="opacity-80">
+              {itemField(row, "hours")}
+            </Editable>
+          </>
+        ))}
+      </dl>
+    )}
+  </div>
+</section>