create-bearminion 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # create-bearminion
 
+## 1.6.0
+
+### Minor Changes
+
+- eec6f3d: New starter sections and editor features.
+  
+  - **Gallery** section: grid, masonry and featured layouts, a keyboard-friendly lightbox, an optional box around each picture, and required alt text.
+  - **Text** section: long-form rich text for an About or policy page, with a narrow, readable column on by default. Rich-text fields can opt into **H2** and **H3** (`data-rich-headings`); `renderRichText`, `sanitizeRichHtml` and `stripPlainRich` take a `{ headings }` option.
+  - **Media** now covers video: the separate Video section is gone, and Media gains `playback` (`controls` or `loop`). Content `schemaVersion` 2 migrates existing Video sections to Media automatically.
+  - **Video uploads**: upload an mp4, webm, mov or ogv to `public/videos` from the editor (`videosDir`, `maxVideoBytes`, default 50 MB), pick an uploaded one, and see what a pasted link is or why it will not play. New API routes `GET`/`POST /videos` and `DELETE /videos/:filename`.
+  - `parseMediaSource` and `VIDEO_FILE` are exported from `bearminion`.
+
+### Patch Changes
+
+- eec6f3d: Clearer package descriptions and READMEs: what BearMinion is, who it is for, and what `create-bearminion` refuses (a folder that is not new or empty).
+
 ## 1.5.0
 
 ### Patch Changes

package/README.md

@@ -3,7 +3,7 @@
 </p>
 
 <p align="center">
-  Create a website you edit by clicking on it. No database, no admin panel, no server.<br />
+  The BearMinion for the bare minimum. Create a website you edit by clicking on it: no database to patch at 3 AM, no admin panel, no server.<br />
   Built on <a href="https://astro.build">Astro</a>.
 </p>
 
@@ -50,11 +50,13 @@ Pass options after `--` with npm (`npm create bearminion@latest my-site -- --yes
 | `--no-git` | Skip creating a git repository |
 | `-y`, `--yes` | Ask nothing and use the defaults, for scripts and AI agents |
 
-The folder must be new or empty. Inside an existing git repository, the site is added as a folder and no new repository is made.
+> **Don't poke the bear:** the folder must be new or empty (`.git` and `.DS_Store` are fine). It refuses anything else, and neither of us wants to untangle that.
+
+Inside an existing git repository, the site is added as a folder and no new repository is made.
 
 ## What you get
 
-The [default BearMinion template](https://github.com/langehelp-software/bearminion/tree/main/templates/default): an Astro and Tailwind site with thirteen section types, the [`bearminion`](https://www.npmjs.com/package/bearminion) editor at the same version as this package, and content as JSON files you own and commit. The template ships inside this package, so it works offline and always matches its editor.
+The [default BearMinion template](https://github.com/langehelp-software/bearminion/tree/main/templates/default): an Astro and Tailwind site with fourteen section types, the [`bearminion`](https://www.npmjs.com/package/bearminion) editor at the same version as this package, and content as JSON files you own and commit. The template ships inside this package, so it works offline and always matches its editor.
 
 ## Learn more
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-bearminion",
-  "version": "1.5.0",
-  "description": "Create a BearMinion site: an Astro website you edit by clicking on it.",
+  "version": "1.6.0",
+  "description": "Create a BearMinion site: an Astro website you edit by clicking on it. No database, no server.",
   "license": "MIT",
   "author": "Jakub Lange",
   "homepage": "https://bearminion.com",

package/template/README.md

@@ -29,7 +29,7 @@ This template is yours to change: it is the theme. `bearminion` is the only runt
 
 Organisms are Header, Navigation, MobileMenu, and Footer. A modal, a dialog, and a cookie banner belong in this folder too. They are the chrome around every page (or a standalone widget), and they are fed by `content/site.json`.
 
-Sections are `hero`, `logoStrip`, `steps`, `features`, `textImage`, `stats`, `testimonials`, `pricing`, `video`, `media`, `faq`, `cta`, and `contact`. Each page entry is `{ id, anchor?, type, variant, tone, motion?, props }`. `anchor` is an optional lowercase slug, unique on the page, and it becomes the section element's `id`. `data-section-id` stays the section id. `[data-section-id]` sets `scroll-margin-top: 7rem` so a sticky or floating header does not cover the target. `html` uses `scroll-behavior: smooth`, and `prefers-reduced-motion: reduce` forces `scroll-behavior: auto`. Section components are built from molecules and atoms. A section may use an organism when it needs one, such as a modal. The section root carries `data-section-id`, `data-section-type`, `data-variant`, `data-tone`, and `data-motion`. Atoms accept a `class` and forward `data-*` attributes, including `data-field`, so the editor can find the text.
+Sections are `hero`, `logoStrip`, `steps`, `gallery`, `features`, `text`, `textImage`, `stats`, `testimonials`, `pricing`, `media`, `faq`, `cta`, and `contact`. Each page entry is `{ id, anchor?, type, variant, tone, motion?, props }`. `anchor` is an optional lowercase slug, unique on the page, and it becomes the section element's `id`. `data-section-id` stays the section id. `[data-section-id]` sets `scroll-margin-top: 7rem` so a sticky or floating header does not cover the target. `html` uses `scroll-behavior: smooth`, and `prefers-reduced-motion: reduce` forces `scroll-behavior: auto`. Section components are built from molecules and atoms. A section may use an organism when it needs one, such as a modal. The section root carries `data-section-id`, `data-section-type`, `data-variant`, `data-tone`, and `data-motion`. Atoms accept a `class` and forward `data-*` attributes, including `data-field`, so the editor can find the text.
 
 Paragraph fields (`sub`, `intro`, `body`, `description`, `quote`, `note`, `thanks`, FAQ answers and Text + Image `points`) are markdown. The template renders bold, italic, inline `code` (a mono chip), links, and paragraphs through `bearminion/rich-text`, escapes every other character, and adds `rel="noopener noreferrer"` on `http` and `https` links.
 
@@ -40,7 +40,7 @@ src/components/
   organisms/    Header, Navigation, MobileMenu, Footer, plus site-definition.ts (header and footer layouts, limits)
   sections/     one directory per type, plus definitions.ts, registry.ts, shared.ts, SectionList.astro
     hero/         definition.ts (zod schema, defaults, options), wireframe.ts (picker thumbnail), Hero.astro, Hero.stories.ts
-    logo-strip/ steps/ features/ text-image/ stats/ testimonials/ pricing/ video/ media/ faq/ cta/ contact/
+    logo-strip/ steps/ gallery/ features/ text/ text-image/ stats/ testimonials/ pricing/ media/ faq/ cta/ contact/
   seo/          Seo
 ```
 

package/template/package.json

@@ -19,7 +19,7 @@
     "@fontsource/jetbrains-mono": "^5.3.0",
     "@tailwindcss/vite": "^4.1.12",
     "astro": "^7.4.1",
-    "bearminion": "^1.5.0",
+    "bearminion": "^1.6.0",
     "class-variance-authority": "^0.7.1",
     "sharp": "^0.35.5",
     "tailwind-merge": "^3.7.0",

package/template/src/components/atoms/Typography.astro

@@ -18,6 +18,8 @@ interface Props {
   id?: string
   /** Markdown subset (bold, italic, links, lists, paragraphs). Renders sanitized HTML. */
   markdown?: string
+  /** The markdown may hold `##` and `###` headings, and the editor offers them. */
+  richHeadings?: boolean
   'data-field'?: string
 }
 
@@ -30,10 +32,11 @@ const {
   align,
   class: className,
   markdown,
+  richHeadings = false,
   ...rest
 } = Astro.props
 
-const html = markdown !== undefined ? renderRichText(markdown) : undefined
+const html = markdown !== undefined ? renderRichText(markdown, { headings: richHeadings }) : undefined
 // Rich text is `<p>`s and lists, which a `<p>`, `<span>` or heading cannot hold. A `blockquote`, `li` or `figcaption` can.
 const Tag = html !== undefined && PHRASING_ONLY.has(TagName) ? 'div' : TagName
 const classes = cn(typography({ size, color, weight, font, align }), className)
@@ -41,7 +44,7 @@ const classes = cn(typography({ size, color, weight, font, align }), className)
 
 {
   html !== undefined ? (
-    <Tag class={classes} data-field-kind="rich" set:html={html} {...rest} />
+    <Tag class={classes} data-field-kind="rich" data-rich-headings={richHeadings ? 'true' : undefined} set:html={html} {...rest} />
   ) : (
     <TagName class={classes} {...rest}>
       <slot />

package/template/src/components/sections/SectionList.astro

@@ -12,12 +12,13 @@ const { sections, motion = true } = Astro.props
 const Hero = sectionComponents.hero
 const LogoStrip = sectionComponents.logoStrip
 const Steps = sectionComponents.steps
+const Gallery = sectionComponents.gallery
 const Features = sectionComponents.features
+const Text = sectionComponents.text
 const TextImage = sectionComponents.textImage
 const Stats = sectionComponents.stats
 const Testimonials = sectionComponents.testimonials
 const Pricing = sectionComponents.pricing
-const Video = sectionComponents.video
 const Media = sectionComponents.media
 const Faq = sectionComponents.faq
 const Cta = sectionComponents.cta
@@ -33,8 +34,12 @@ const Contact = sectionComponents.contact
         return <LogoStrip section={section} index={index} motion={motion} />
       case 'steps':
         return <Steps section={section} index={index} motion={motion} />
+      case 'gallery':
+        return <Gallery section={section} index={index} motion={motion} />
       case 'features':
         return <Features section={section} index={index} motion={motion} />
+      case 'text':
+        return <Text section={section} index={index} motion={motion} />
       case 'textImage':
         return <TextImage section={section} index={index} motion={motion} />
       case 'stats':
@@ -43,8 +48,6 @@ const Contact = sectionComponents.contact
         return <Testimonials section={section} index={index} motion={motion} />
       case 'pricing':
         return <Pricing section={section} index={index} motion={motion} />
-      case 'video':
-        return <Video section={section} index={index} motion={motion} />
       case 'media':
         return <Media section={section} index={index} motion={motion} />
       case 'faq':

package/template/src/components/sections/definitions.ts

@@ -10,6 +10,7 @@ import { contact } from './contact/definition'
 import { cta } from './cta/definition'
 import { faq } from './faq/definition'
 import { features } from './features/definition'
+import { gallery } from './gallery/definition'
 import { hero } from './hero/definition'
 import { logoStrip } from './logo-strip/definition'
 import { media } from './media/definition'
@@ -17,8 +18,8 @@ import { pricing } from './pricing/definition'
 import { stats } from './stats/definition'
 import { steps } from './steps/definition'
 import { testimonials } from './testimonials/definition'
+import { text } from './text/definition'
 import { textImage } from './text-image/definition'
-import { video } from './video/definition'
 
 /**
  * Every section type of this site. Each one is defined in its own directory:
@@ -31,12 +32,13 @@ export const sectionDefinitions = {
   hero,
   logoStrip,
   steps,
+  gallery,
   features,
+  text,
   textImage,
   stats,
   testimonials,
   pricing,
-  video,
   media,
   faq,
   cta,

package/template/src/components/sections/gallery/Gallery.astro

@@ -0,0 +1,128 @@
+---
+import type { Section } from '../definitions'
+import Typography from '../../atoms/Typography.astro'
+import MediaFrame from '../../molecules/MediaFrame.astro'
+import SectionHeader from '../../molecules/SectionHeader.astro'
+import SectionShell from '../../molecules/SectionShell.astro'
+import { isRemote, resolveLocalAsset } from '../../../lib/assets'
+import { imageUrl } from '../../../lib/image-url'
+import { cn } from '../../../lib/cn'
+
+interface Props {
+  section: Extract<Section, { type: 'gallery' }>
+  index: number
+  motion?: boolean
+}
+
+const { section, index, motion = true } = Astro.props
+const props = section.props
+const field = (path: string) => `sections.${index}.props.${path}`
+const reveal = section.motion ?? motion
+const images = props.images.filter((image) => !image.hidden)
+const featured = section.variant === 'featured'
+const masonry = section.variant === 'masonry'
+
+// Static class names, so Tailwind sees them.
+const gridColumns = {
+  '2': 'grid-cols-1 @min-[560px]:grid-cols-2',
+  '3': 'grid-cols-1 @min-[560px]:grid-cols-2 @min-[900px]:grid-cols-3',
+  '4': 'grid-cols-2 @min-[700px]:grid-cols-3 @min-[1000px]:grid-cols-4',
+} as const
+const masonryColumns = {
+  '2': 'columns-1 @min-[560px]:columns-2',
+  '3': 'columns-1 @min-[560px]:columns-2 @min-[900px]:columns-3',
+  '4': 'columns-2 @min-[700px]:columns-3 @min-[1000px]:columns-4',
+} as const
+
+/** The index of an image in the section's full list, so the editor's field paths stay right when some are hidden. */
+const pathIndex = (image: (typeof images)[number]) => props.images.indexOf(image)
+const aspect = (position: number) => {
+  if (featured && position === 0) return 'aspect-[4/3] @min-[900px]:aspect-auto @min-[900px]:h-full'
+  if (masonry) return position % 3 === 0 ? 'aspect-[3/4]' : position % 3 === 1 ? 'aspect-[4/3]' : 'aspect-square'
+  return 'aspect-[4/3]'
+}
+const tileClass = (position: number) =>
+  cn(featured && position === 0 && '@min-[900px]:col-span-2 @min-[900px]:row-span-2', masonry && 'mb-4 break-inside-avoid')
+
+/** A picture the lightbox can show: a real file or address, not the placeholder. */
+const viewable = (src: string) => src !== 'placeholder' && (isRemote(src) || Boolean(resolveLocalAsset(src)) || src.replace(/^\//, '').startsWith('src/assets/'))
+
+// The large file each link points at. With JavaScript off the link opens it; with JavaScript on it is what the lightbox loads.
+const larges = await Promise.all(images.map((image) => (props.lightbox && viewable(image.src) ? imageUrl(image) : undefined)))
+const lightbox = props.lightbox && larges.some(Boolean)
+---
+
+<SectionShell id={section.id} anchor={section.anchor} type={section.type} variant={section.variant} tone={section.tone} motion={reveal}>
+  <div class="section-container flex flex-col gap-[clamp(2rem,4cqi,3.5rem)]">
+    <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} size="h2-md" field={field} class="gap-5" />
+    {props.body && <Typography as="div" size="lead" color="muted" class="max-w-[40rem]" data-field={field('body')} markdown={props.body} />}
+    <ul
+      class={cn(
+        masonry ? masonryColumns[props.columns] : gridColumns[props.columns],
+        masonry ? 'gap-x-4' : cn('grid gap-4', featured && '@min-[900px]:auto-rows-fr'),
+      )}
+    >
+      {
+        images.map((image, position) => {
+          const frame = (
+            <MediaFrame
+              src={image.src}
+              alt={image.alt}
+              aspectClass={aspect(position)}
+              fit={masonry ? 'auto' : image.fit}
+              position={image.position}
+              class={cn(props.frame && 'border border-line bg-surface', larges[position] && 'transition-transform duration-300 hover:scale-[1.01] motion-reduce:transition-none')}
+              data-field={field(`images.${pathIndex(image)}.alt`)}
+            />
+          )
+          return (
+            <li class={tileClass(position)}>
+              {larges[position] ? (
+                <a
+                  href={larges[position]}
+                  class="block size-full cursor-zoom-in rounded-card-lg focus-visible:outline-offset-2"
+                  data-gallery-open
+                  data-alt={image.alt}
+                  data-caption={image.caption}
+                  aria-label={`View larger: ${image.alt}`}
+                >
+                  {frame}
+                </a>
+              ) : (
+                frame
+              )}
+            </li>
+          )
+        })
+      }
+    </ul>
+  </div>
+  {
+    lightbox && (
+      <dialog class="bm-lightbox" aria-label={props.heading ? `${props.heading}: pictures` : 'Pictures'} data-gallery-dialog>
+        <div class="bm-lightbox-stage" data-gallery-stage>
+          <button type="button" class="bm-lightbox-close" aria-label="Close" data-gallery-close>
+            <svg viewBox="0 0 24 24" aria-hidden="true" class="bm-lightbox-icon"><path d="M6 6l12 12M18 6L6 18" /></svg>
+          </button>
+          <p class="bm-lightbox-counter" data-gallery-counter aria-hidden="true" />
+          <button type="button" class="bm-lightbox-nav bm-lightbox-prev" aria-label="Previous picture" data-gallery-step="-1">
+            <svg viewBox="0 0 24 24" aria-hidden="true" class="bm-lightbox-icon"><path d="M14.5 5.5L8 12l6.5 6.5" /></svg>
+          </button>
+          <figure class="bm-lightbox-figure" data-gallery-figure>
+            <img class="bm-lightbox-image" alt="" data-gallery-image decoding="async" />
+            <figcaption class="bm-lightbox-caption" data-gallery-caption hidden />
+          </figure>
+          <button type="button" class="bm-lightbox-nav bm-lightbox-next" aria-label="Next picture" data-gallery-step="1">
+            <svg viewBox="0 0 24 24" aria-hidden="true" class="bm-lightbox-icon"><path d="M9.5 5.5L16 12l-6.5 6.5" /></svg>
+          </button>
+          <p class="sr-only" role="status" aria-live="polite" data-gallery-status />
+        </div>
+      </dialog>
+    )
+  }
+</SectionShell>
+
+<script>
+  import { initGalleries } from './lightbox'
+  initGalleries()
+</script>

package/template/src/components/sections/gallery/Gallery.stories.ts

@@ -0,0 +1,24 @@
+import { sectionArgTypes } from '../../../stories/options'
+import { gallery } from './definition'
+import Gallery from './Gallery.astro'
+
+/** The sample pages hold no Gallery section, so the stories start from its defaults. */
+const section = { id: 'gallery', type: 'gallery', variant: 'grid', tone: 'base', props: gallery.defaults } as const
+const captioned = {
+  ...gallery.defaults,
+  images: gallery.defaults.images.map((image, index) => ({ ...image, caption: `Caption for picture ${index + 1}` })),
+}
+
+export default {
+  title: 'Sections/Gallery',
+  component: Gallery,
+  parameters: { layout: 'fullscreen' },
+  argTypes: sectionArgTypes('gallery'),
+}
+
+export const Grid = { args: { section, index: 0 } }
+export const Masonry = { args: { section: { ...section, variant: 'masonry', props: { ...gallery.defaults, columns: '4' } }, index: 0 } }
+export const Featured = { args: { section: { ...section, variant: 'featured', tone: 'subtle', props: captioned }, index: 0 } }
+export const TwoColumns = { args: { section: { ...section, props: { ...gallery.defaults, columns: '2' } }, index: 0 } }
+export const Framed = { args: { section: { ...section, props: { ...gallery.defaults, frame: true } }, index: 0 } }
+export const NoLightbox = { args: { section: { ...section, props: { ...gallery.defaults, lightbox: false } }, index: 0 } }

package/template/src/components/sections/gallery/definition.ts

@@ -0,0 +1,59 @@
+import { z } from 'zod'
+import { defineSection, imageSchema, richTextSchema, textSchema, withEmphasis } from 'bearminion'
+import { accent, eyebrow, heading } from '../shared'
+import { galleryWireframe } from './wireframe'
+
+export const galleryVariants = ['grid', 'masonry', 'featured'] as const
+export const galleryColumns = ['2', '3', '4'] as const
+
+export const galleryCounts = { images: { recommended: '6 to 12', min: 1, max: 24 } } as const
+
+/**
+ * A gallery picture needs a description: it is the only thing a screen reader or a failed load shows. The optional
+ * `caption` is for everyone else: it shows under the picture in the lightbox.
+ */
+export const galleryImageSchema = imageSchema.extend({
+  alt: z.string().min(1, 'Describe the picture'),
+  caption: textSchema.optional(),
+})
+
+export const gallerySchema = withEmphasis({
+  eyebrow,
+  heading,
+  body: richTextSchema.optional(),
+  images: z.array(galleryImageSchema).min(galleryCounts.images.min).max(galleryCounts.images.max),
+  /** Pictures per row on a wide screen. Fewer on narrow ones. */
+  columns: z.enum(galleryColumns).default('3'),
+  /** Off: pictures stay where they are. On: a click opens the picture large, with arrows to move through the rest. */
+  lightbox: z.boolean().default(true),
+  /** On: each picture sits in a bordered box, so a picture that does not fill its frame still shows where the frame ends. */
+  frame: z.boolean().default(false),
+})
+
+export type GalleryProps = z.infer<typeof gallerySchema>
+
+export const gallery = defineSection({
+  type: 'gallery',
+  label: 'Gallery',
+  description: 'A set of pictures. Click one to see it large, with captions, arrows and swipe.',
+  schema: gallerySchema,
+  defaults: {
+    eyebrow: 'Gallery',
+    heading: 'A few pictures say it faster.',
+    marks: accent('A few pictures say it faster.', 'faster.'),
+    images: [1, 2, 3, 4, 5, 6].map((n) => ({ src: 'placeholder', alt: `Picture ${n}` })),
+    columns: '3',
+    lightbox: true,
+    frame: false,
+  },
+  variants: galleryVariants,
+  defaultVariant: 'grid',
+  options: [
+    { name: 'columns', label: 'Pictures per row', type: 'enum', choices: galleryColumns, default: '3' },
+    { name: 'lightbox', label: 'Open pictures large on click', type: 'boolean', default: true },
+    { name: 'frame', label: 'Draw a box around each picture', type: 'boolean', default: false },
+  ],
+  optional: { props: ['eyebrow', 'heading', 'body'], items: { images: ['caption'] } },
+  counts: galleryCounts,
+  wireframe: galleryWireframe,
+})

package/template/src/components/sections/gallery/lightbox.ts

@@ -0,0 +1,159 @@
+/**
+ * The gallery lightbox. Each picture in the page is a link to its large file, so with JavaScript off a click simply
+ * opens the picture. With it on, a click opens a native <dialog> that shows one picture at a time. The large file is
+ * requested when the dialog opens (and the pictures next to it, so the arrows feel instant), never before.
+ */
+
+/** The index after moving `step` places from `from` in a list of `count`, wrapping at both ends. */
+export function stepIndex(from: number, step: number, count: number): number {
+  if (count <= 0) return 0
+  return (((from + step) % count) + count) % count
+}
+
+/** Which way a finger moved: a mostly horizontal drag of at least `threshold` px. Positive is toward the next picture. */
+export function swipeStep(dx: number, dy: number, threshold = 48): -1 | 0 | 1 {
+  if (Math.abs(dx) < threshold || Math.abs(dx) < Math.abs(dy) * 1.25) return 0
+  return dx < 0 ? 1 : -1
+}
+
+interface Item {
+  src: string
+  alt: string
+  caption: string
+  opener: HTMLElement
+}
+
+function itemsOf(section: Element): Item[] {
+  return [...section.querySelectorAll<HTMLElement>('[data-gallery-open]')].map((opener) => ({
+    src: opener.getAttribute('href') ?? '',
+    alt: opener.dataset.alt ?? '',
+    caption: opener.dataset.caption ?? '',
+    opener,
+  }))
+}
+
+class Lightbox {
+  private items: Item[] = []
+  private index = 0
+  private touch: { x: number; y: number } | null = null
+  private readonly image: HTMLImageElement
+  private readonly caption: HTMLElement
+  private readonly counter: HTMLElement
+  private readonly status: HTMLElement
+  private readonly figure: HTMLElement
+
+  constructor(private readonly dialog: HTMLDialogElement) {
+    this.image = this.part<HTMLImageElement>('[data-gallery-image]')
+    this.caption = this.part('[data-gallery-caption]')
+    this.counter = this.part('[data-gallery-counter]')
+    this.status = this.part('[data-gallery-status]')
+    this.figure = this.part('[data-gallery-figure]')
+
+    dialog.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement
+      if (target.closest('[data-gallery-close]')) return this.close()
+      const step = target.closest<HTMLElement>('[data-gallery-step]')
+      if (step) return this.go(Number(step.dataset.galleryStep))
+      // The backdrop and the empty space around the picture close it; the picture and its caption do not.
+      if (target === dialog || target === this.figure || target.hasAttribute('data-gallery-stage')) this.close()
+    })
+    dialog.addEventListener('keydown', (event) => {
+      if (event.key === 'ArrowLeft') this.go(-1)
+      else if (event.key === 'ArrowRight') this.go(1)
+      else if (event.key === 'Home') this.show(0)
+      else if (event.key === 'End') this.show(this.items.length - 1)
+      else return
+      event.preventDefault()
+    })
+    // The dialog's own Escape and the close button both end here, so focus always goes back to the picture opened.
+    dialog.addEventListener('close', () => this.items[this.index]?.opener.focus({ preventScroll: true }))
+    dialog.addEventListener('pointerdown', (event) => {
+      if (event.pointerType !== 'touch') return
+      this.touch = { x: event.clientX, y: event.clientY }
+    })
+    dialog.addEventListener('pointerup', (event) => {
+      if (!this.touch) return
+      const step = swipeStep(event.clientX - this.touch.x, event.clientY - this.touch.y)
+      this.touch = null
+      if (step !== 0) this.go(step)
+    })
+    dialog.addEventListener('pointercancel', () => {
+      this.touch = null
+    })
+    this.image.addEventListener('load', () => this.dialog.removeAttribute('data-loading'))
+    this.image.addEventListener('error', () => {
+      this.dialog.removeAttribute('data-loading')
+      this.status.textContent = 'This picture could not be loaded.'
+    })
+  }
+
+  private part<T extends HTMLElement = HTMLElement>(selector: string): T {
+    const node = this.dialog.querySelector<T>(selector)
+    if (!node) throw new Error(`Gallery lightbox is missing ${selector}`)
+    return node
+  }
+
+  open(section: Element, opener: Element) {
+    this.items = itemsOf(section)
+    const start = this.items.findIndex((item) => item.opener === opener)
+    this.dialog.toggleAttribute('data-single', this.items.length < 2)
+    this.show(Math.max(0, start))
+    if (!this.dialog.open) this.dialog.showModal()
+    this.dialog.querySelector<HTMLElement>('[data-gallery-close]')?.focus({ preventScroll: true })
+  }
+
+  private go(step: number) {
+    this.show(stepIndex(this.index, step, this.items.length))
+  }
+
+  private show(index: number) {
+    const item = this.items[index]
+    if (!item) return
+    this.index = index
+    this.status.textContent = ''
+    this.dialog.setAttribute('data-loading', '')
+    this.image.alt = item.alt
+    this.image.src = item.src
+    // A picture without a caption shows its description, so every picture in the lightbox says what it is.
+    const text = item.caption || item.alt
+    this.caption.textContent = text
+    this.caption.hidden = text === ''
+    this.counter.textContent = `${index + 1} / ${this.items.length}`
+    // Fetch the neighbours now, so the next arrow press shows its picture at once.
+    for (const near of [stepIndex(index, 1, this.items.length), stepIndex(index, -1, this.items.length)]) {
+      if (near !== index) new Image().src = this.items[near]?.src ?? ''
+    }
+  }
+
+  close() {
+    if (this.dialog.open) this.dialog.close()
+  }
+}
+
+const lightboxes = new WeakMap<HTMLDialogElement, Lightbox>()
+
+/** One delegated listener, so sections added later by the editor's live preview work too. Safe to call twice. */
+export function initGalleries(): void {
+  const flag = '__bearminionGallery'
+  const scope = window as unknown as Record<string, boolean | undefined>
+  if (scope[flag]) return
+  scope[flag] = true
+  document.addEventListener('click', (event) => {
+    const opener = (event.target as Element | null)?.closest<HTMLElement>('[data-gallery-open]')
+    if (!opener) return
+    // While the editor is on the page a click edits the picture. Either way the link itself must not navigate.
+    event.preventDefault()
+    // Preview mode shows the page as visitors see it, so the lightbox works there.
+    const root = document.documentElement
+    if (root.hasAttribute('data-bearminion-ready') && !root.hasAttribute('data-bearminion-preview')) return
+    const section = opener.closest('[data-section-id]')
+    const dialog = section?.querySelector<HTMLDialogElement>('dialog[data-gallery-dialog]')
+    if (!section || !dialog) return
+    let box = lightboxes.get(dialog)
+    if (!box) {
+      box = new Lightbox(dialog)
+      lightboxes.set(dialog, box)
+    }
+    box.open(section, opener)
+  })
+}

package/template/src/components/sections/gallery/wireframe.ts

@@ -0,0 +1,12 @@
+import { defineWireframe } from 'bearminion'
+
+/** Add section picker thumbnail: [left %, top %, width %, height %, kind]. */
+export const galleryWireframe = defineWireframe([
+  [8, 10, 34, 8, 'title'],
+  [8, 24, 20, 12, 'figure'],
+  [32, 24, 20, 12, 'figure'],
+  [56, 24, 20, 12, 'figure'],
+  [8, 40, 20, 12, 'figure'],
+  [32, 40, 20, 12, 'figure'],
+  [56, 40, 20, 12, 'figure'],
+])

package/template/src/components/sections/media/Media.astro

@@ -28,6 +28,7 @@ const player = {
   poster: props.poster,
   image: props.image,
   label: props.label,
+  playback: props.playback,
   imageField: field('image.alt'),
   // The first two sections are usually on screen at load, where a lazy cover would hold back the largest paint.
   eager: index <= 1,

package/template/src/components/sections/media/MediaPlayer.astro

@@ -13,6 +13,7 @@ interface Props {
   poster?: Image
   image?: Image
   label?: string
+  playback?: MediaProps['playback']
   /** `data-field` path for the image, so a click on the frame opens the image picker. */
   imageField: string
   /** Near the top of the page: the cover loads at once instead of lazily, since it is likely the largest thing on screen. */
@@ -20,7 +21,7 @@ interface Props {
   class?: string
 }
 
-const { kind, aspect, video, poster, image, label, imageField, eager = false, class: className } = Astro.props
+const { kind, aspect, video, poster, image, label, playback = 'controls', imageField, eager = false, class: className } = Astro.props
 const ASPECT = { '16:9': 'aspect-video', '4:3': 'aspect-[4/3]', '21:9': 'aspect-[21/9]', '1:1': 'aspect-square' } as const
 const frame = cn(
   'relative w-full min-h-48 overflow-hidden rounded-[clamp(1rem,2cqi,1.5rem)] bg-surface shadow-[inset_0_0_0_1px_var(--line),0_40px_80px_-48px_oklch(0.2_0.02_255/0.35)]',
@@ -35,6 +36,9 @@ const coverSrcset = source ? await imageSrcset(poster) : undefined
 // The frame is at most 68rem wide and the full width of a phone.
 const coverSizes = '(min-width: 72rem) 68rem, 100vw'
 const name = label || 'Video'
+// A video file on loop starts muted and without controls once the page script sees it on screen. Until then, and without
+// JavaScript or with reduced motion, it keeps its controls so it can still be played.
+const looping = source?.kind === 'file' && playback === 'loop'
 ---
 
 {
@@ -63,6 +67,10 @@ const name = label || 'Video'
       class="shadow-[inset_0_0_0_1px_var(--line),0_40px_80px_-48px_oklch(0.2_0.02_255/0.35)]"
       data-field={imageField}
     />
+  ) : looping && source?.kind === 'file' ? (
+    <div class={frame}>
+      <video class="absolute inset-0 size-full object-cover" src={source.src} poster={cover} preload="metadata" playsinline muted loop controls aria-label={name} data-video-loop />
+    </div>
   ) : (
     source && (
       <div
@@ -145,4 +153,24 @@ const name = label || 'Video'
   }
   bindMediaPlayers()
   document.addEventListener('bearminion:preview', bindMediaPlayers)
+
+  /** Looping videos play while at least a quarter of them is on screen, and not at all with reduced motion. */
+  function bindLoopingVideos() {
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    for (const video of document.querySelectorAll<HTMLVideoElement>('video[data-video-loop]')) {
+      if (video.dataset.bound === 'true') continue
+      video.dataset.bound = 'true'
+      if (reduced) continue
+      video.controls = false
+      new IntersectionObserver(
+        ([entry]) => {
+          if (entry?.isIntersecting) void video.play().catch(() => (video.controls = true))
+          else video.pause()
+        },
+        { threshold: 0.25 },
+      ).observe(video)
+    }
+  }
+  bindLoopingVideos()
+  document.addEventListener('bearminion:preview', bindLoopingVideos)
 </script>