@contentrain/astro-kit 0.1.0

package/components/cta/meta.json

@@ -0,0 +1,28 @@
+{
+  "id": "cta",
+  "name": "CTA",
+  "description": "A call to action: a short heading, an optional line of text and one or two buttons — across the whole section, or as a card inside it.",
+  "category": "section",
+  "uses": [],
+  "shared": ["Button.astro", "Section.astro", "types.ts"],
+  "variants": {
+    "layout": { "options": ["inline", "centered"], "default": "inline", "description": "inline: text left, buttons right on wide screens. centered: everything centred." },
+    "frame": { "options": ["full", "card"], "default": "full", "description": "full: the tone fills the section. card: a rounded box in a plain section carries the tone." },
+    "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "accent", "description": "Background. On accent, primary buttons are drawn in the secondary style so they stay visible." }
+  },
+  "props": {
+    "heading": { "type": "string", "required": true, "description": "The call's heading (Divi CTA title, Elementor call-to-action title)." },
+    "body": { "type": "text", "description": "One or two sentences under the heading." },
+    "actions": { "type": "array", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "newTab": { "type": "boolean" }, "style": { "type": "select", "options": ["primary", "secondary", "ghost"] } } }, "description": "Buttons, in order; usually one." },
+    "id": { "type": "string", "description": "Anchor id of the section; the heading gets `<id>-title`." }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "elementor": ["elementor/call-to-action"],
+    "divi": ["divi/et_pb_cta"],
+    "classic": ["classic/cta"]
+  },
+  "a11y": "A labelled region (aria-labelledby its h2). Buttons are links with their own text. Accent tone swaps the primary button style so its contrast holds."
+}

package/components/faq/Faq.astro

@@ -0,0 +1,79 @@
+---
+// Questions and answers as native disclosure widgets (<details>) — no script.
+// `exclusive` groups them by name, so opening one closes the others. With
+// `schema`, the page also carries FAQPage structured data for search engines
+// and AI answers.
+import { tv } from 'tailwind-variants'
+import Section from '../_shared/Section.astro'
+
+export interface FaqItem {
+  question: string
+  /** The answer as HTML (the rich text the question came with). */
+  answer: string
+}
+
+const faq = tv({
+  slots: {
+    heading: 'mb-8 text-2xl font-bold tracking-tight text-balance md:text-3xl',
+    list: 'flex flex-col',
+    item: 'group',
+    summary: 'flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg font-semibold [&::-webkit-details-marker]:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    marker: 'size-5 shrink-0 transition-transform duration-200 group-open:rotate-45',
+    answer: 'prose-site prose max-w-none pb-5 text-current',
+  },
+  variants: {
+    style: {
+      lines: { list: 'divide-y divide-line border-y border-line' },
+      cards: { list: 'gap-3', item: 'rounded-card border border-line px-5', summary: 'py-5' },
+    },
+    tone: { default: {}, muted: { item: 'bg-surface' }, inverse: { answer: 'prose-invert' }, accent: { answer: 'prose-invert' } },
+  },
+  compoundVariants: [
+    { style: 'cards', tone: 'muted', class: { item: 'border-transparent' } },
+  ],
+  defaultVariants: { style: 'lines', tone: 'default' },
+})
+
+interface Props {
+  items: FaqItem[]
+  heading?: string | undefined
+  style?: 'lines' | 'cards' | undefined
+  /** One answer open at a time (`<details name>`). */
+  exclusive?: boolean | undefined
+  /** Open the first answer. */
+  openFirst?: boolean | undefined
+  /** Add FAQPage structured data (JSON-LD). Once per page. */
+  schema?: boolean | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  id?: string | undefined
+}
+
+const { items, heading, style, exclusive = false, openFirst = false, schema = false, tone, id = 'faq' } = Astro.props
+const s = faq({ style, tone })
+const headingId = heading ? `${id}-title` : undefined
+const plain = (html: string) => html.replace(/<[^>]*>/g, ' ').replace(/&nbsp;/g, ' ').replace(/\s+/g, ' ').trim()
+const structured = schema && items.length > 0
+  ? JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: items.map(item => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: plain(item.answer) } })),
+    }).replace(/</g, '\\u003c')
+  : null
+---
+{items.length > 0 && (
+  <Section tone={tone} spacing="md" width="prose" id={id} aria-labelledby={headingId}>
+    {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+    <div class={s.list()}>
+      {items.map((item, i) => (
+        <details class={s.item()} name={exclusive ? id : undefined} open={openFirst && i === 0}>
+          <summary class={s.summary()}>
+            <span>{item.question}</span>
+            <svg class={s.marker()} viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="M10 4v12M4 10h12" /></svg>
+          </summary>
+          <div class={s.answer()} set:html={item.answer} />
+        </details>
+      ))}
+    </div>
+    {structured && <script type="application/ld+json" set:html={structured} />}
+  </Section>
+)}

package/components/faq/fixtures.json

@@ -0,0 +1,36 @@
+[
+  {
+    "name": "lines-exclusive-schema",
+    "props": {
+      "heading": "Frequently asked questions",
+      "exclusive": true,
+      "openFirst": true,
+      "schema": true,
+      "items": [
+        { "question": "Do you accept guest essays?", "answer": "<p>Yes — we publish reader essays every season. Send a <a href=\"/pitch/\">short pitch</a> first.</p>" },
+        { "question": "Can I reuse your photographs?", "answer": "<p>Only with written permission. Most are licensed from the photographers, not owned by us.</p>" },
+        { "question": "How often do you publish?", "answer": "<p>Two or three pieces a month, plus the seasonal issue.</p><ul><li>Guides: monthly</li><li>Essays: seasonal</li></ul>" }
+      ]
+    }
+  },
+  {
+    "name": "cards-muted",
+    "props": {
+      "style": "cards",
+      "tone": "muted",
+      "id": "faq-cards",
+      "items": [
+        { "question": "Is the newsletter free?", "answer": "<p>Yes, and it always will be.</p>" },
+        { "question": "Do you run ads?", "answer": "<p>No. The journal is funded by members.</p>" }
+      ]
+    }
+  },
+  {
+    "name": "lines-inverse",
+    "props": { "tone": "inverse", "id": "faq-dark", "openFirst": true, "items": [{ "question": "Where are you based?", "answer": "<p>Lisbon, most of the year.</p>" }] }
+  },
+  {
+    "name": "cards-accent",
+    "props": { "style": "cards", "tone": "accent", "id": "faq-accent", "items": [{ "question": "How do I cancel my membership?", "answer": "<p>From your account page, at any time.</p>" }] }
+  }
+]

package/components/faq/meta.json

@@ -0,0 +1,30 @@
+{
+  "id": "faq",
+  "name": "FAQ",
+  "description": "Questions and answers as native <details> disclosures (no script), in lines or cards; optionally one open at a time, and optionally with FAQPage structured data for search engines and AI answers.",
+  "category": "section",
+  "uses": [],
+  "shared": ["Section.astro"],
+  "variants": {
+    "style": { "options": ["lines", "cards"], "default": "lines", "description": "lines: rows divided by rules. cards: each question in a rounded box." },
+    "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background." }
+  },
+  "props": {
+    "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "question": { "type": "string", "required": true }, "answer": { "type": "richtext", "required": true } } }, "description": "The questions in order (core/details summary + content, Elementor accordion/toggle tabs, Divi accordion/toggle items)." },
+    "heading": { "type": "string", "description": "Section heading." },
+    "exclusive": { "type": "boolean", "default": false, "description": "One answer open at a time (Elementor accordion, Divi accordion). Off for toggles." },
+    "openFirst": { "type": "boolean", "default": false, "description": "The first answer starts open (Divi open_toggle, Elementor active item 1)." },
+    "schema": { "type": "boolean", "default": false, "description": "Emit FAQPage JSON-LD built from these items. Use on at most one FAQ per page, and only when the page is really a FAQ." },
+    "id": { "type": "string", "description": "Section id; also the exclusive group's name." }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": ["core/details"],
+    "elementor": ["elementor/accordion", "elementor/toggle", "elementor/nested-accordion"],
+    "divi": ["divi/et_pb_accordion", "divi/et_pb_toggle"],
+    "classic": ["classic/faq"]
+  },
+  "a11y": "Native <details>/<summary>: keyboard operable and announced as expandable by every screen reader, with no script to fail. The plus icon is decorative. The JSON-LD answer text is the answer with its markup removed."
+}

package/components/footer/Footer.astro

@@ -0,0 +1,87 @@
+---
+// Site footer: brand and tagline, link columns or a single link row, social
+// links and the copyright line.
+import { tv } from 'tailwind-variants'
+import type { LinkInput } from '../_shared/types'
+
+const footer = tv({
+  slots: {
+    root: 'mt-auto',
+    inner: 'container-page py-10 text-sm',
+    muted: 'opacity-75',
+    link: 'text-current no-underline opacity-75 hover:opacity-100 hover:underline',
+  },
+  variants: {
+    layout: {
+      simple: { inner: 'flex flex-col gap-6 md:flex-row md:items-center md:justify-between' },
+      columns: { inner: 'grid gap-10 md:grid-cols-[2fr_repeat(var(--footer-columns),1fr)] md:py-16' },
+    },
+    tone: {
+      default: { root: 'border-t border-line bg-surface text-ink' },
+      muted: { root: 'bg-surface-muted text-ink' },
+      inverse: { root: 'bg-ink text-surface' },
+    },
+  },
+  defaultVariants: { layout: 'simple', tone: 'default' },
+})
+
+interface Props {
+  siteName: string
+  tagline?: string | undefined
+  /** Link groups for the `columns` layout. */
+  columns?: Array<{ title: string, links: LinkInput[] }> | undefined
+  /** A single row of links (the footer menu). */
+  links?: LinkInput[] | undefined
+  social?: LinkInput[] | undefined
+  /** The copyright line, e.g. "© 2026 Northwind Studio". */
+  copyright?: string | undefined
+  /** Accessible name of the footer navigation ("Footer"). */
+  navLabel?: string | undefined
+  layout?: 'simple' | 'columns' | undefined
+  tone?: 'default' | 'muted' | 'inverse' | undefined
+}
+
+const { siteName, tagline, columns = [], links = [], social = [], copyright, navLabel = 'Footer', layout = 'simple', tone } = Astro.props
+const { root, inner, muted, link } = footer({ layout, tone })
+const line = copyright ?? `© ${new Date().getFullYear()} ${siteName}`
+---
+<footer class={root()}>
+  <div class={inner()} style={layout === 'columns' ? `--footer-columns: ${Math.max(columns.length, 1)}` : undefined}>
+    <div class="flex flex-col gap-3">
+      <p class="text-base font-semibold">{siteName}</p>
+      {tagline && <p class={muted()}>{tagline}</p>}
+      {layout === 'columns' && <p class:list={[muted(), 'mt-auto pt-6']}>{line}</p>}
+    </div>
+    {layout === 'columns'
+      ? columns.map(column => (
+        <nav aria-label={column.title}>
+          <p class="mb-3 font-semibold">{column.title}</p>
+          <ul class="flex flex-col gap-2">
+            {column.links.map(item => <li><a href={item.href} class={link()}>{item.label}</a></li>)}
+          </ul>
+        </nav>
+      ))
+      : (
+        <div class="flex flex-col gap-4 md:items-end">
+          {social.length > 0 && (
+            <ul class="flex flex-wrap gap-4">
+              {social.map(item => <li><a href={item.href} rel="me noopener" target="_blank" class={link()}>{item.label}</a></li>)}
+            </ul>
+          )}
+          {links.length > 0 && (
+            <nav aria-label={navLabel}>
+              <ul class="flex flex-wrap gap-x-6 gap-y-2">
+                {links.map(item => <li><a href={item.href} class={link()}>{item.label}</a></li>)}
+              </ul>
+            </nav>
+          )}
+          <p class={muted()}>{line}</p>
+        </div>
+      )}
+    {layout === 'columns' && social.length > 0 && (
+      <ul class="flex flex-wrap gap-4 md:col-span-full">
+        {social.map(item => <li><a href={item.href} rel="me noopener" target="_blank" class={link()}>{item.label}</a></li>)}
+      </ul>
+    )}
+  </div>
+</footer>

package/components/footer/fixtures.json

@@ -0,0 +1,5 @@
+[
+  { "name": "simple", "props": { "siteName": "Northwind Studio", "copyright": "© 2026 Northwind Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Privacy", "href": "/privacy/" }, { "label": "RSS feed", "href": "/rss.xml" }] } },
+  { "name": "columns-inverse", "props": { "siteName": "Northwind Studio", "tagline": "Calm, fast websites for teams who write.", "layout": "columns", "tone": "inverse", "copyright": "© 2026 Northwind Studio", "columns": [{ "title": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Team", "href": "/about/team/" }] }, { "title": "Journal", "links": [{ "label": "Guides", "href": "/category/guides/" }, { "label": "News", "href": "/category/news/" }] }, { "title": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }], "social": [{ "label": "GitHub", "href": "https://github.com/contentrain" }, { "label": "Mastodon", "href": "https://mastodon.social/@contentrain" }] } },
+  { "name": "muted", "props": { "siteName": "Northwind", "tone": "muted", "copyright": "© 2026 Northwind", "links": [{ "label": "Imprint", "href": "/imprint/" }] } }
+]

package/components/footer/meta.json

@@ -0,0 +1,31 @@
+{
+  "id": "footer",
+  "name": "Footer",
+  "description": "Site footer: brand and tagline, link columns or one row of links, social links and the copyright line.",
+  "category": "chrome",
+  "uses": [],
+  "shared": ["types.ts"],
+  "variants": {
+    "layout": { "options": ["simple", "columns"], "default": "simple", "description": "simple: brand left, links and copyright right. columns: brand column plus one column per link group." },
+    "tone": { "options": ["default", "muted", "inverse"], "default": "default", "description": "Surface with a top border, muted surface, or dark (ink) background." }
+  },
+  "props": {
+    "siteName": { "type": "string", "required": true, "description": "Site title (site.title or site.organization)." },
+    "tagline": { "type": "string", "description": "One line under the name (site.tagline)." },
+    "columns": { "type": "array", "items": { "type": "object", "fields": { "title": { "type": "string", "required": true }, "links": { "type": "array", "required": true } } }, "description": "Link groups for the columns layout; each footer menu or widget area becomes one." },
+    "links": { "type": "array", "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true } } }, "description": "One row of links (the footer menu) for the simple layout." },
+    "social": { "type": "array", "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true } } }, "description": "Social profile links (site.same_as)." },
+    "copyright": { "type": "string", "description": "Copyright line; defaults to © <year> <siteName>." },
+    "navLabel": { "type": "string", "description": "Accessible name of the footer navigation (ui-strings nav.footer)." }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": ["core/template-part:footer", "core/social-links"],
+    "elementor": ["elementor/social-icons", "elementor/icon-list"],
+    "divi": ["divi/et_pb_social_media_follow"],
+    "classic": ["classic/footer", "classic/widget-area"]
+  },
+  "a11y": "One <footer> landmark; each link group is a <nav> named by its title. Social links open in a new tab with rel=me."
+}

package/components/gallery/Gallery.astro

@@ -0,0 +1,88 @@
+---
+// Images in a grid or in columns, with optional captions. Opening an image
+// shows it large in a native popover — no script: `popovertarget` opens it,
+// Escape and a click outside close it. `link` opens the image file instead.
+import { tv } from 'tailwind-variants'
+import KitImage from '../_shared/KitImage.astro'
+import Section from '../_shared/Section.astro'
+import type { ImageInput } from '../_shared/types'
+
+export interface GalleryItem {
+  image: ImageInput
+  caption?: string | undefined
+}
+
+const gallery = tv({
+  slots: {
+    heading: 'mb-8 text-2xl font-bold tracking-tight md:text-3xl',
+    list: 'gap-3 md:gap-4',
+    item: 'm-0',
+    frame: 'block w-full cursor-zoom-in overflow-hidden rounded-card focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    thumb: 'h-full w-full object-cover transition-transform duration-300 hover:scale-[1.02]',
+    caption: 'mt-2 text-sm opacity-75',
+    viewer: 'm-auto max-h-[92vh] max-w-[92vw] bg-transparent p-0 backdrop:bg-ink/85',
+  },
+  variants: {
+    layout: {
+      grid: { list: 'grid', frame: 'aspect-square' },
+      masonry: { list: 'columns-2 [&>*]:mb-3 md:[&>*]:mb-4', item: 'break-inside-avoid' },
+    },
+    columns: { '2': { list: 'grid-cols-2' }, '3': { list: 'grid-cols-2 md:grid-cols-3' }, '4': { list: 'grid-cols-2 md:grid-cols-4' } },
+    open: { popover: {}, link: {}, none: { frame: 'cursor-default' } },
+  },
+  compoundVariants: [
+    { layout: 'masonry', columns: '3', class: { list: 'md:columns-3' } },
+    { layout: 'masonry', columns: '4', class: { list: 'md:columns-4' } },
+  ],
+  defaultVariants: { layout: 'grid', columns: '3', open: 'popover' },
+})
+
+interface Props {
+  items: GalleryItem[]
+  heading?: string | undefined
+  layout?: 'grid' | 'masonry' | undefined
+  columns?: '2' | '3' | '4' | undefined
+  /** What a click on an image does: show it large in place, open the file, or nothing. */
+  open?: 'popover' | 'link' | 'none' | undefined
+  /** Text of the viewer's close button ("Close"). */
+  closeLabel?: string | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  id?: string | undefined
+}
+
+const { items, heading, layout, columns, open = 'popover', closeLabel = 'Close', tone, id = 'gallery' } = Astro.props
+const s = gallery({ layout, columns, open })
+const headingId = heading ? `${id}-title` : undefined
+const sizes = columns === '2' ? '50vw' : columns === '4' ? '(min-width: 768px) 25vw, 50vw' : '(min-width: 768px) 33vw, 50vw'
+---
+{items.length > 0 && (
+  <Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+    {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+    <ul class={s.list()} role="list">
+      {items.map((item, i) => {
+        const viewer = `${id}-image-${i + 1}`
+        return (
+          <li class={s.item()}>
+            <figure class="m-0">
+              {open === 'popover'
+                ? <button type="button" popovertarget={viewer} class={s.frame()} aria-label={item.image.alt || item.caption || undefined}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></button>
+                : open === 'link'
+                  ? <a href={item.image.src} class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></a>
+                  : <div class={s.frame()}><KitImage image={item.image} sizes={sizes} class={s.thumb()} /></div>}
+              {item.caption && <figcaption class={s.caption({ class: tone === 'accent' ? 'opacity-100' : undefined })}>{item.caption}</figcaption>}
+            </figure>
+            {open === 'popover' && (
+              <div id={viewer} popover class={s.viewer()}>
+                <figure class="m-0 flex flex-col items-center gap-3">
+                  <KitImage image={item.image} sizes="92vw" class="max-h-[80vh] w-auto rounded-card object-contain" />
+                  {item.caption && <figcaption class="text-sm text-surface">{item.caption}</figcaption>}
+                  <button type="button" popovertarget={viewer} popovertargetaction="hide" class="rounded-md border border-surface/40 px-4 py-2 text-sm text-surface hover:bg-surface/10">{closeLabel}</button>
+                </figure>
+              </div>
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  </Section>
+)}

package/components/gallery/fixtures.json

@@ -0,0 +1,191 @@
+[
+  {
+    "name": "grid-popover",
+    "props": {
+      "heading": "From the road",
+      "id": "road",
+      "items": [
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-1.svg",
+            "alt": "Photo 1",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Porto at dawn"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-2.svg",
+            "alt": "Photo 2",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Train to Coimbra"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-3.svg",
+            "alt": "Photo 3",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Market day"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-4.svg",
+            "alt": "Photo 4",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Harbour"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-5.svg",
+            "alt": "Photo 5",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Old town"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-6.svg",
+            "alt": "Photo 6",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Last light"
+        }
+      ]
+    }
+  },
+  {
+    "name": "masonry-4-link",
+    "props": {
+      "layout": "masonry",
+      "columns": "4",
+      "open": "link",
+      "id": "masonry",
+      "items": [
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-1.svg",
+            "alt": "Photo 1",
+            "width": 1200,
+            "height": 800
+          }
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-2.svg",
+            "alt": "Photo 2",
+            "width": 1200,
+            "height": 1500
+          }
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-3.svg",
+            "alt": "Photo 3",
+            "width": 1200,
+            "height": 900
+          }
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-4.svg",
+            "alt": "Photo 4",
+            "width": 1200,
+            "height": 1200
+          }
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-5.svg",
+            "alt": "Photo 5",
+            "width": 1200,
+            "height": 1600
+          }
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-6.svg",
+            "alt": "Photo 6",
+            "width": 1200,
+            "height": 700
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "grid-2-none-muted",
+    "props": {
+      "columns": "2",
+      "open": "none",
+      "tone": "muted",
+      "id": "pair",
+      "items": [
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-1.svg",
+            "alt": "Photo 1",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Before"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-2.svg",
+            "alt": "Photo 2",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "After"
+        }
+      ]
+    }
+  },
+  {
+    "name": "grid-accent-captions",
+    "props": {
+      "tone": "accent",
+      "columns": "3",
+      "open": "none",
+      "id": "accent-captions",
+      "items": [
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-4.svg",
+            "alt": "",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Harbour"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-5.svg",
+            "alt": "",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Old town"
+        },
+        {
+          "image": {
+            "src": "/kit-fixtures/photo-6.svg",
+            "alt": "",
+            "width": 1200,
+            "height": 800
+          },
+          "caption": "Last light"
+        }
+      ]
+    }
+  }
+]

package/components/gallery/meta.json

@@ -0,0 +1,30 @@
+{
+  "id": "gallery",
+  "name": "Gallery",
+  "description": "Images in a square grid or in masonry columns, with optional captions. A click shows the image large in a native popover (no script), opens the image file, or does nothing.",
+  "category": "section",
+  "uses": [],
+  "shared": ["KitImage.astro", "Section.astro", "types.ts"],
+  "variants": {
+    "layout": { "options": ["grid", "masonry"], "default": "grid", "description": "grid: square crops in rows. masonry: columns that keep each image's shape." },
+    "columns": { "options": ["2", "3", "4"], "default": "3", "description": "Columns on wide screens; phones show two." },
+    "open": { "options": ["popover", "link", "none"], "default": "popover", "description": "popover: the image opens large in place (Popover API; Escape or a click outside closes it). link: the thumbnail links to the image file (the WordPress 'link to media file'). none: images only." }
+  },
+  "props": {
+    "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "image": { "type": "object", "required": true, "fields": { "src": { "type": "image", "required": true }, "alt": { "type": "string", "required": true }, "width": { "type": "integer" }, "height": { "type": "integer" } } }, "caption": { "type": "string" } } }, "description": "The images in order (core/gallery inner images, Elementor gallery items, Divi gallery_ids)." },
+    "heading": { "type": "string", "description": "Section heading above the images." },
+    "closeLabel": { "type": "string", "description": "Text of the viewer's close button (ui-strings gallery.close)." },
+    "tone": { "type": "select", "options": ["default", "muted", "inverse", "accent"], "description": "Section background." },
+    "id": { "type": "string", "description": "Section id, unique per page: viewer ids derive from it (`<id>-image-<n>`)." }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": ["core/gallery"],
+    "elementor": ["elementor/image-gallery", "elementor/gallery"],
+    "divi": ["divi/et_pb_gallery"],
+    "classic": ["classic/gallery"]
+  },
+  "a11y": "A list of figures. In popover mode each thumbnail is a <button> named by the image's alt (or caption) that opens the viewer; the viewer has a visible close button, and Escape closes it, returning focus to the thumbnail. Captions are <figcaption>s."
+}