create-bearminion 1.1.0 → 1.2.1

package/template/src/components/sections/hero/Hero.astro

@@ -4,6 +4,8 @@ import Button from '../../atoms/Button.astro'
 import { buttonLinkProps, buttonVariant } from '../../../lib/link-attrs'
 import Emphasis from '../../atoms/Emphasis.astro'
 import Typography from '../../atoms/Typography.astro'
+import CommandLine from '../../molecules/CommandLine.astro'
+import HeroBadge from './HeroBadge.astro'
 import MediaFrame from '../../molecules/MediaFrame.astro'
 import Pill from '../../molecules/Pill.astro'
 import SectionShell from '../../molecules/SectionShell.astro'
@@ -18,16 +20,34 @@ 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 hasActions = Boolean(props.primary || props.secondary)
+const primary = props.button ? props.primary : undefined
+const command = props.code !== 'off' ? props.command : undefined
+// `action` puts the command in the button row, in the secondary button's place.
+const action = props.code === 'action' ? command : undefined
+const secondary = action ? undefined : props.secondary
+const below = props.code === 'chip' || props.code === 'terminal' ? command : undefined
+const belowVariant = props.code === 'terminal' ? 'terminal' : 'chip'
+const hasActions = Boolean(primary || secondary || action)
 const media = props.image ?? { src: 'placeholder', alt: 'hero visual — editor beside live page preview' }
 ---
 
 <SectionShell id={section.id} anchor={section.anchor} type={section.type} variant={section.variant} tone={section.tone} motion={reveal}>
+  {
+    // Centred on the heading and faded out well before the edges, so it never meets the section above in a seam.
+    props.glow && (
+      <div
+        class="pointer-events-none absolute inset-0"
+        style="background: radial-gradient(ellipse 70% 60% at 50% 36%, color-mix(in oklch, var(--accent) var(--hero-glow, 20%), transparent), transparent 72%)"
+        aria-hidden="true"
+        data-hero-glow
+      />
+    )
+  }
   {
     section.variant === 'split' && (
-      <div class="mx-auto grid max-w-[80rem] grid-cols-[repeat(auto-fit,minmax(min(100%,26rem),1fr))] items-center gap-[clamp(2.5rem,5cqi,5rem)] px-[clamp(1.25rem,4cqi,3rem)] py-[clamp(3.5rem,2rem+5cqi,7rem)]">
+      <div class="relative mx-auto grid max-w-[80rem] grid-cols-[repeat(auto-fit,minmax(min(100%,26rem),1fr))] items-center gap-[clamp(2.5rem,5cqi,5rem)] px-[clamp(1.25rem,4cqi,3rem)] py-[clamp(3.5rem,2rem+5cqi,7rem)]">
         <div class="flex flex-col items-start gap-6">
-          {props.eyebrow && <Pill data-field={field('eyebrow')}>{props.eyebrow}</Pill>}
+          {props.badge ? <HeroBadge badge={props.badge} field={field} /> : props.eyebrow && <Pill data-field={field('eyebrow')}>{props.eyebrow}</Pill>}
           {
             props.heading && (
               <Typography as="h1" size="display">
@@ -39,19 +59,21 @@ const media = props.image ?? { src: 'placeholder', alt: 'hero visual — editor
           {
             hasActions && (
               <div class="mt-2 flex flex-wrap gap-2.5">
-                {props.primary && (
-                  <Button {...buttonLinkProps(props.primary)} variant={buttonVariant(props.primary, 'primary')} arrow data-field={field('primary.label')}>
-                    {props.primary.label}
+                {primary && (
+                  <Button {...buttonLinkProps(primary)} variant={buttonVariant(primary, 'primary')} arrow data-field={field('primary.label')}>
+                    {primary.label}
                   </Button>
                 )}
-                {props.secondary && (
-                  <Button {...buttonLinkProps(props.secondary)} variant={buttonVariant(props.secondary, 'secondary')} data-field={field('secondary.label')}>
-                    {props.secondary.label}
+                {secondary && (
+                  <Button {...buttonLinkProps(secondary)} variant={buttonVariant(secondary, 'secondary')} data-field={field('secondary.label')}>
+                    {secondary.label}
                   </Button>
                 )}
+                {action && <CommandLine command={action} variant="action" data-field={field('command')} />}
               </div>
             )
           }
+          {below && <CommandLine command={below} variant={belowVariant} data-field={field('command')} />}
         </div>
         {!props.image?.hidden && (
 <MediaFrame src={media.src} alt={media.alt} aspectClass="aspect-[4/3.4]" fit={media?.fit} position={media?.position} data-field={field('image.alt')} priority />
@@ -61,8 +83,8 @@ const media = props.image ?? { src: 'placeholder', alt: 'hero visual — editor
   }
   {
     section.variant === 'centered' && (
-      <div class="mx-auto flex max-w-[80rem] flex-col items-center gap-6 px-[clamp(1.25rem,4cqi,3rem)] pt-[clamp(4rem,2rem+6cqi,8rem)] pb-[clamp(3rem,2rem+4cqi,6rem)] text-center">
-        {props.eyebrow && <Pill data-field={field('eyebrow')}>{props.eyebrow}</Pill>}
+      <div class="relative mx-auto flex max-w-[80rem] flex-col items-center gap-6 px-[clamp(1.25rem,4cqi,3rem)] pt-[clamp(4rem,2rem+6cqi,8rem)] pb-[clamp(5rem,3rem+7cqi,10rem)] text-center">
+        {props.badge ? <HeroBadge badge={props.badge} field={field} /> : props.eyebrow && <Pill data-field={field('eyebrow')}>{props.eyebrow}</Pill>}
         {
           props.heading && (
             <Typography as="h1" size="display-center">
@@ -74,19 +96,21 @@ const media = props.image ?? { src: 'placeholder', alt: 'hero visual — editor
         {
           hasActions && (
             <div class="mt-2 flex flex-wrap justify-center gap-2.5">
-              {props.primary && (
-                <Button {...buttonLinkProps(props.primary)} variant={buttonVariant(props.primary, 'primary')} arrow data-field={field('primary.label')}>
-                  {props.primary.label}
+              {primary && (
+                <Button {...buttonLinkProps(primary)} variant={buttonVariant(primary, 'primary')} arrow data-field={field('primary.label')}>
+                  {primary.label}
                 </Button>
               )}
-              {props.secondary && (
-                <Button {...buttonLinkProps(props.secondary)} variant={buttonVariant(props.secondary, 'secondary')} data-field={field('secondary.label')}>
-                  {props.secondary.label}
+              {secondary && (
+                <Button {...buttonLinkProps(secondary)} variant={buttonVariant(secondary, 'secondary')} data-field={field('secondary.label')}>
+                  {secondary.label}
                 </Button>
               )}
+              {action && <CommandLine command={action} variant="action" data-field={field('command')} />}
             </div>
           )
         }
+        {below && <CommandLine command={below} variant={belowVariant} data-field={field('command')} class="mt-1" />}
         {!props.image?.hidden && (
 <MediaFrame
           src={media.src}
@@ -103,7 +127,7 @@ const media = props.image ?? { src: 'placeholder', alt: 'hero visual — editor
   }
   {
     section.variant === 'editorial' && (
-      <div class="mx-auto max-w-[80rem] px-[clamp(1.25rem,4cqi,3rem)] pt-[clamp(3.5rem,2rem+5cqi,7rem)] pb-[clamp(2.5rem,2rem+3cqi,5rem)]">
+      <div class="relative mx-auto max-w-[80rem] px-[clamp(1.25rem,4cqi,3rem)] pt-[clamp(3.5rem,2rem+5cqi,7rem)] pb-[clamp(2.5rem,2rem+3cqi,5rem)]">
         {
           props.eyebrow && (
             <Typography as="p" size="eyebrow" color="muted" data-field={field('eyebrow')}>
@@ -119,21 +143,27 @@ const media = props.image ?? { src: 'placeholder', alt: 'hero visual — editor
           )
         }
         {
-          (props.sub || hasActions) && (
+          (props.sub || hasActions || below) && (
             <div class="mt-[clamp(2rem,4cqi,3.5rem)] flex flex-wrap items-end justify-between gap-x-12 gap-y-6 border-t border-[var(--line)] pt-6">
               {props.sub && <Typography as="p" size="lead" color="muted" data-field={field('sub')} class="max-w-xl flex-[1_1_22rem]" markdown={props.sub} />}
-              {hasActions && (
-                <div class="flex flex-wrap gap-2.5">
-                  {props.secondary && (
-                    <Button {...buttonLinkProps(props.secondary)} variant={buttonVariant(props.secondary, 'secondary')} data-field={field('secondary.label')}>
-                      {props.secondary.label}
-                    </Button>
-                  )}
-                  {props.primary && (
-                    <Button {...buttonLinkProps(props.primary)} variant={buttonVariant(props.primary, 'primary')} arrow data-field={field('primary.label')}>
-                      {props.primary.label}
-                    </Button>
+              {(hasActions || below) && (
+                <div class="flex flex-col items-start gap-4">
+                  {hasActions && (
+                    <div class="flex flex-wrap items-center gap-2.5">
+                      {action && <CommandLine command={action} variant="action" data-field={field('command')} />}
+                      {secondary && (
+                        <Button {...buttonLinkProps(secondary)} variant={buttonVariant(secondary, 'secondary')} data-field={field('secondary.label')}>
+                          {secondary.label}
+                        </Button>
+                      )}
+                      {primary && (
+                        <Button {...buttonLinkProps(primary)} variant={buttonVariant(primary, 'primary')} arrow data-field={field('primary.label')}>
+                          {primary.label}
+                        </Button>
+                      )}
+                    </div>
                   )}
+                  {below && <CommandLine command={below} variant={belowVariant} data-field={field('command')} />}
                 </div>
               )}
             </div>

package/template/src/components/sections/hero/HeroBadge.astro

@@ -0,0 +1,26 @@
+---
+import { anchorAttrs } from '../../../lib/link-attrs'
+import type { HeroProps } from './definition'
+
+interface Props {
+  badge: NonNullable<HeroProps['badge']>
+  field: (path: string) => string
+}
+
+const { badge, field } = Astro.props
+---
+
+<a
+  {...anchorAttrs({ href: badge.href })}
+  class="inline-flex h-9 max-w-full items-center gap-2.5 rounded-full bg-surface ps-1.5 pe-3.5 text-[0.875rem] text-fg ring-line transition-shadow hover:shadow-[inset_0_0_0_1px_var(--fg)]"
+>
+  {
+    badge.tag && (
+      <span class="inline-flex h-6 shrink-0 items-center rounded-full bg-accent px-2.5 text-[0.8125rem] font-semibold tracking-[-0.01em] text-on" data-field={field('badge.tag')}>
+        {badge.tag}
+      </span>
+    )
+  }
+  <span class="truncate font-medium" data-field={field('badge.text')}>{badge.text}</span>
+  <span class="text-muted" aria-hidden="true">→</span>
+</a>

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

@@ -1,16 +1,39 @@
-import type { z } from 'zod'
-import { defineSection, imageSchema, linkSchema, richTextSchema, withEmphasis } from 'bearminion'
+import { z } from 'zod'
+import { defineSection, imageSchema, linkSchema, richTextSchema, textSchema, withEmphasis } from 'bearminion'
 import { accent, eyebrow, heading } from '../shared'
 import { heroWireframe } from './wireframe'
 
 export const heroVariants = ['split', 'centered', 'editorial'] as const
 
+/**
+ * How the install command shows. `off` hides it. `action` is a pill in the button row that takes the secondary
+ * button's place, `chip` a smaller pill under the buttons, `terminal` a dark block under the buttons.
+ */
+export const heroCodeStyles = ['off', 'action', 'chip', 'terminal'] as const
+
+/** A linked pill with a short tag, such as "1.2 · Available now". It takes the eyebrow's place in split and centered. */
+export const heroBadgeSchema = z
+  .object({
+    tag: textSchema.optional(),
+    text: textSchema,
+    href: z.string().min(1),
+  })
+  .strict()
+
 export const heroSchema = withEmphasis({
   eyebrow,
   heading,
   sub: richTextSchema.optional(),
+  badge: heroBadgeSchema.optional(),
   primary: linkSchema.optional(),
   secondary: linkSchema.optional(),
+  /** Off hides the primary button and keeps it in the file, for a page whose only action is the command. */
+  button: z.boolean().default(true),
+  /** The shell command the Copy button copies, such as `npm create bearminion@latest`. */
+  command: textSchema.optional(),
+  code: z.enum(heroCodeStyles).default('off'),
+  /** A soft light in the accent color behind the heading. It follows the tone and the site palette. */
+  glow: z.boolean().default(false),
   image: imageSchema.optional(),
 })
 
@@ -28,9 +51,24 @@ export const hero = defineSection({
     sub: 'Use this paragraph to say who it is for and what they get. Keep it to two sentences.',
     primary: { label: 'Primary action', href: '#' },
     secondary: { label: 'Secondary action', href: '#' },
+    button: true,
+    command: 'npm create astro@latest',
+    code: 'off',
+    glow: false,
   },
   variants: heroVariants,
   defaultVariant: 'split',
-  optional: { props: ['eyebrow', 'heading', 'sub', 'primary', 'secondary', 'image'] },
+  options: [
+    { name: 'button', label: 'Primary button', type: 'boolean', default: true },
+    { name: 'code', label: 'Install command', type: 'enum', choices: heroCodeStyles, default: 'off' },
+    { name: 'glow', label: 'Background glow', type: 'boolean', default: false },
+  ],
+  optional: { props: ['eyebrow', 'heading', 'sub', 'badge', 'primary', 'secondary', 'command', 'image'] },
+  showWhen: {
+    badge: { variant: ['split', 'centered'] },
+    primary: { button: true },
+    secondary: { code: ['off', 'chip', 'terminal'] },
+    command: { code: ['action', 'chip', 'terminal'] },
+  },
   wireframe: heroWireframe,
 })

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

@@ -0,0 +1,117 @@
+---
+import type { Section } from '../definitions'
+import Typography from '../../atoms/Typography.astro'
+import SectionHeader from '../../molecules/SectionHeader.astro'
+import SectionShell from '../../molecules/SectionShell.astro'
+import MediaPlayer from './MediaPlayer.astro'
+import { parseMediaSource } from './source'
+
+interface Props {
+  section: Extract<Section, { type: 'media' }>
+  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 intro = props.intro && Boolean(props.eyebrow || props.heading || props.body)
+const filled = props.kind === 'video' ? Boolean(props.video && parseMediaSource(props.video)) : Boolean(props.image?.src && props.image.src !== 'placeholder' && !props.image.hidden)
+// A built site leaves out an empty frame, and with no heading either, the whole section.
+const showFrame = filled || import.meta.env.DEV
+const rendered = showFrame || intro
+const player = {
+  kind: props.kind,
+  aspect: props.aspect,
+  video: props.video,
+  poster: props.poster,
+  image: props.image,
+  label: props.label,
+  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,
+}
+---
+
+{rendered && (<SectionShell id={section.id} anchor={section.anchor} type={section.type} variant={section.variant} tone={section.tone} motion={reveal}>
+  {
+    section.variant === 'centered' && (
+      <div
+        class:list={[
+          'mx-auto flex max-w-[80rem] flex-col items-center gap-5 px-[clamp(1.25rem,4cqi,3rem)] pb-[clamp(4rem,2rem+6cqi,8rem)] text-center',
+          intro && 'pt-[clamp(4rem,2rem+6cqi,8rem)]',
+        ]}
+      >
+        {intro && (
+          <SectionHeader
+            eyebrow={props.eyebrow}
+            heading={props.heading}
+            marks={props.marks}
+            intro={props.body}
+            introField="body"
+            align="center"
+            size="h2-md"
+            field={field}
+            headingClass="max-w-[20ch]"
+            class="gap-5"
+          />
+        )}
+        {showFrame && (<figure class:list={['flex w-full flex-col gap-3', intro ? 'mt-[clamp(1.5rem,3cqi,2.5rem)] max-w-[56rem]' : 'max-w-[68rem]']}>
+          <MediaPlayer {...player} />
+          {props.caption && (
+            <Typography as="figcaption" size="small" color="muted" data-field={field('caption')}>
+              {props.caption}
+            </Typography>
+          )}
+        </figure>)}
+      </div>
+    )
+  }
+  {
+    section.variant === 'wide' && (
+      <div class="section-container flex flex-col gap-[clamp(2rem,4cqi,3.5rem)]">
+        {intro && (
+          <div class="flex flex-wrap items-end justify-between gap-x-12 gap-y-5">
+            <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} size="h2-md" field={field} headingClass="max-w-[16ch]" class="flex-[1_1_24rem] gap-5" />
+            {props.body && <Typography as="p" size="lead" color="muted" data-field={field('body')} class="flex-[0_1_26rem]" markdown={props.body} />}
+          </div>
+        )}
+        {showFrame && (<figure class="flex flex-col gap-3">
+          <MediaPlayer {...player} />
+          {props.caption && (
+            <Typography as="figcaption" size="small" color="muted" data-field={field('caption')}>
+              {props.caption}
+            </Typography>
+          )}
+        </figure>)}
+      </div>
+    )
+  }
+  {
+    section.variant === 'split' && (
+      <div class="section-container grid grid-cols-[repeat(auto-fit,minmax(min(100%,22rem),1fr))] items-center gap-[clamp(2.5rem,5cqi,5rem)]">
+        {intro && (
+          <SectionHeader
+            eyebrow={props.eyebrow}
+            heading={props.heading}
+            marks={props.marks}
+            intro={props.body}
+            introField="body"
+            size="h2-md"
+            field={field}
+            class="gap-5"
+          />
+        )}
+        {showFrame && (<figure class:list={['flex flex-col gap-3', !intro && 'col-span-full']}>
+          <MediaPlayer {...player} />
+          {props.caption && (
+            <Typography as="figcaption" size="small" color="muted" data-field={field('caption')}>
+              {props.caption}
+            </Typography>
+          )}
+        </figure>)}
+      </div>
+    )
+  }
+</SectionShell>)}

package/template/src/components/sections/media/Media.stories.ts

@@ -0,0 +1,31 @@
+import { sectionArgTypes } from '../../../stories/options'
+import { media } from './definition'
+import Media from './Media.astro'
+
+/** The sample pages hold no Media section, so the stories start from its defaults. */
+const section = { id: 'media', type: 'media', variant: 'centered', tone: 'subtle', props: media.defaults } as const
+// A file path rather than a YouTube link, so Storybook loads nothing from a third party.
+const linked = { ...media.defaults, video: '/videos/demo.webm' }
+
+export default {
+  title: 'Sections/Media',
+  component: Media,
+  parameters: { layout: 'fullscreen' },
+  argTypes: sectionArgTypes('media'),
+}
+
+export const Empty = { args: { section, index: 0 } }
+export const Centered = { args: { section: { ...section, props: linked }, index: 0 } }
+export const NoIntro = { args: { section: { ...section, tone: 'base', props: { ...linked, intro: false } }, index: 0 } }
+export const Wide = { args: { section: { ...section, variant: 'wide', props: linked }, index: 0 } }
+export const Split = { args: { section: { ...section, variant: 'split', props: { ...linked, aspect: '4:3' } }, index: 0 } }
+export const Image = {
+  args: {
+    section: {
+      ...section,
+      variant: 'split',
+      props: { ...media.defaults, kind: 'image', image: { src: 'placeholder', alt: 'Screenshot' } },
+    },
+    index: 0,
+  },
+}

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

@@ -0,0 +1,148 @@
+---
+import type { Image } from 'bearminion'
+import { imageSrcset, imageUrl } from '../../../lib/image-url'
+import { cn } from '../../../lib/cn'
+import MediaFrame from '../../molecules/MediaFrame.astro'
+import type { MediaProps } from './definition'
+import { parseMediaSource } from './source'
+
+interface Props {
+  kind: MediaProps['kind']
+  aspect: MediaProps['aspect']
+  video?: string
+  poster?: Image
+  image?: Image
+  label?: string
+  /** `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. */
+  eager?: boolean
+  class?: string
+}
+
+const { kind, aspect, video, poster, image, label, 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)]',
+  ASPECT[aspect],
+  className,
+)
+const source = kind === 'video' && video ? parseMediaSource(video) : null
+const hasImage = kind === 'image' && Boolean(image?.src) && image?.src !== 'placeholder' && !image?.hidden
+const empty = kind === 'video' ? !source : !hasImage
+const cover = source ? ((await imageUrl(poster)) ?? (source.kind === 'youtube' ? source.thumbnail : undefined)) : undefined
+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'
+---
+
+{
+  empty ? (
+    // The empty frame is an editor hint, so a built site leaves it out.
+    import.meta.env.DEV && (
+      <div class={cn(frame, 'placeholder-stripes flex flex-col items-center justify-center gap-4 p-6 text-center')} data-field={kind === 'image' ? imageField : undefined}>
+        {kind === 'video' && (
+          <span class="flex size-14 items-center justify-center rounded-full bg-fg text-bg" aria-hidden="true">
+            <svg viewBox="0 0 24 24" class="ms-0.5 size-[18px]" fill="currentColor"><path d="M8 5.5v13l11-6.5z" /></svg>
+          </span>
+        )}
+        <span class="font-mono text-[0.75rem] tracking-[0.02em] text-muted">
+          {kind === 'video' ? 'Add a video link in the section settings' : 'Add an image in the section settings'}
+        </span>
+      </div>
+    )
+  ) : kind === 'image' && image ? (
+    <MediaFrame
+      src={image.src}
+      alt={image.alt}
+      fit={image.fit === 'auto' ? 'cover' : image.fit}
+      position={image.position}
+      aspectClass={cn(ASPECT[aspect], 'min-h-48 w-full p-0')}
+      roundedClass="rounded-[clamp(1rem,2cqi,1.5rem)]"
+      class="shadow-[inset_0_0_0_1px_var(--line),0_40px_80px_-48px_oklch(0.2_0.02_255/0.35)]"
+      data-field={imageField}
+    />
+  ) : (
+    source && (
+      <div
+        class={frame}
+        data-media-player
+        data-kind={source.kind}
+        data-src={source.kind === 'file' ? source.src : source.embed}
+        data-label={name}
+        data-poster={source.kind === 'file' ? cover : undefined}
+      >
+        {cover && (
+          <img
+            src={cover}
+            srcset={coverSrcset}
+            sizes={coverSrcset ? coverSizes : undefined}
+            alt=""
+            class="absolute inset-0 size-full object-cover"
+            loading={eager ? 'eager' : 'lazy'}
+            decoding="async"
+          />
+        )}
+        <button
+          type="button"
+          class="group absolute inset-0 grid cursor-pointer place-items-center bg-[oklch(0.15_0.01_255/0.12)] transition-colors hover:bg-[oklch(0.15_0.01_255/0.22)] focus-visible:outline-2 focus-visible:outline-offset-[-4px] focus-visible:outline-accent"
+          aria-label={`Play video: ${name}`}
+          data-media-play
+        >
+          <span class="grid size-16 place-items-center rounded-full bg-fg text-bg shadow-[0_12px_32px_-12px_oklch(0.15_0.02_255/0.6)] transition-transform group-hover:scale-105">
+            <svg viewBox="0 0 24 24" class="ms-0.5 size-5" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" /></svg>
+          </span>
+        </button>
+      </div>
+    )
+  )
+}
+
+<script>
+  /**
+   * Nothing is loaded from YouTube, Vimeo or the video file until the visitor presses play. Then the button and cover
+   * are swapped for the player, which starts at once.
+   */
+  function play(frame: HTMLElement) {
+    const src = frame.dataset.src
+    if (!src) return
+    const label = frame.dataset.label ?? 'Video'
+    let player: HTMLElement
+    if (frame.dataset.kind === 'file') {
+      const video = document.createElement('video')
+      video.src = src
+      if (frame.dataset.poster) video.poster = frame.dataset.poster
+      video.controls = true
+      video.autoplay = true
+      video.playsInline = true
+      video.setAttribute('aria-label', label)
+      video.className = 'absolute inset-0 size-full bg-black object-contain'
+      player = video
+    } else {
+      const iframe = document.createElement('iframe')
+      iframe.src = src
+      iframe.title = label
+      iframe.allow = 'autoplay; fullscreen; picture-in-picture; encrypted-media'
+      iframe.allowFullscreen = true
+      iframe.referrerPolicy = 'strict-origin-when-cross-origin'
+      iframe.className = 'absolute inset-0 size-full border-0'
+      player = iframe
+    }
+    frame.replaceChildren(player)
+    player.focus()
+  }
+
+  function bindMediaPlayers() {
+    for (const button of document.querySelectorAll<HTMLButtonElement>('[data-media-play]')) {
+      if (button.dataset.bound === 'true') continue
+      button.dataset.bound = 'true'
+      button.addEventListener('click', () => {
+        const frame = button.closest<HTMLElement>('[data-media-player]')
+        if (frame) play(frame)
+      })
+    }
+  }
+  bindMediaPlayers()
+  document.addEventListener('bearminion:preview', bindMediaPlayers)
+</script>

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

@@ -0,0 +1,72 @@
+import { z } from 'zod'
+import { defineSection, imageSchema, richTextSchema, textSchema, withEmphasis } from 'bearminion'
+import { accent, eyebrow, heading } from '../shared'
+import { parseMediaSource } from './source'
+import { mediaWireframe } from './wireframe'
+
+export const mediaVariants = ['centered', 'wide', 'split'] as const
+export const mediaKinds = ['video', 'image'] as const
+export const mediaAspects = ['16:9', '4:3', '21:9', '1:1'] as const
+
+/** A YouTube or Vimeo link, a path in `public/` such as `/videos/demo.webm`, or an `https://` link to a video file. */
+export const mediaVideoSchema = z
+  .string()
+  .min(1)
+  .refine((value) => parseMediaSource(value) !== null, {
+    message: 'Use a YouTube or Vimeo link, a link to a video file ending in .mp4 or .webm, or a path in public/ such as /videos/demo.webm.',
+  })
+
+export const mediaSchema = withEmphasis({
+  eyebrow,
+  heading,
+  body: richTextSchema.optional(),
+  /** `video` plays the link in `video`; `image` shows `image`. */
+  kind: z.enum(mediaKinds).default('video'),
+  aspect: z.enum(mediaAspects).default('16:9'),
+  /** Off: no eyebrow, heading or body, and in the centered layout a wider frame with no top padding. */
+  intro: z.boolean().default(true),
+  video: mediaVideoSchema.optional(),
+  /** Shown before the video plays. Without one, a YouTube video shows its own thumbnail. */
+  poster: imageSchema.optional(),
+  image: imageSchema.optional(),
+  /** What the video shows, read out by screen readers. An image uses its own alt text. */
+  label: textSchema.optional(),
+  caption: textSchema.optional(),
+})
+
+export type MediaProps = z.infer<typeof mediaSchema>
+
+export const media = defineSection({
+  type: 'media',
+  label: 'Media',
+  description: 'One video or image under a heading. YouTube, Vimeo or a video file.',
+  schema: mediaSchema,
+  defaults: {
+    eyebrow: 'Demo',
+    heading: 'See it in action.',
+    marks: accent('See it in action.', 'in action.'),
+    body: 'Paste a YouTube or Vimeo link, or a link to a video file. Nothing loads until the visitor presses play.',
+    kind: 'video',
+    aspect: '16:9',
+    intro: true,
+    label: 'Product walkthrough',
+  },
+  variants: mediaVariants,
+  defaultVariant: 'centered',
+  options: [
+    { name: 'kind', label: 'Type', type: 'enum', choices: mediaKinds, default: 'video' },
+    { name: 'aspect', label: 'Shape', type: 'enum', choices: mediaAspects, default: '16:9' },
+    { name: 'intro', label: 'Show heading', type: 'boolean', default: true },
+  ],
+  optional: { props: ['eyebrow', 'heading', 'body', 'video', 'poster', 'image', 'label', 'caption'] },
+  showWhen: {
+    eyebrow: { intro: true },
+    heading: { intro: true },
+    body: { intro: true },
+    video: { kind: 'video' },
+    poster: { kind: 'video' },
+    label: { kind: 'video' },
+    image: { kind: 'image' },
+  },
+  wireframe: mediaWireframe,
+})

package/template/src/components/sections/media/source.ts

@@ -0,0 +1,33 @@
+/**
+ * What a Media section's video link points at. YouTube and Vimeo links become privacy-friendly embeds
+ * (youtube-nocookie.com, Vimeo with Do Not Track) that load only after the visitor presses play. A link to a video file
+ * plays in a `<video>` element.
+ */
+export type MediaSource =
+  | { kind: 'youtube'; id: string; embed: string; thumbnail: string }
+  | { kind: 'vimeo'; id: string; embed: string }
+  | { kind: 'file'; src: string }
+
+const YOUTUBE =
+  /^https?:\/\/(?:(?:www|m)\.)?(?:youtube\.com\/(?:watch\?(?:[^#\s]*&)?v=|embed\/|shorts\/|live\/)|youtube-nocookie\.com\/embed\/|youtu\.be\/)([\w-]{6,})(?:[?&#][^\s]*)?$/i
+const VIMEO = /^https?:\/\/(?:(?:www|player)\.)?vimeo\.com\/(?:video\/)?(\d+)(?:[/?#][^\s]*)?$/i
+/** A path in `public/` (`/videos/demo.webm`) or an `https://` link to a video file. */
+export const VIDEO_FILE = /^(?:\/(?!\/)|https?:\/\/)\S+\.(?:mp4|webm|m4v|mov|ogv)(?:[?#]\S*)?$/i
+
+export function parseMediaSource(value: string): MediaSource | null {
+  const src = value.trim()
+  const youtube = YOUTUBE.exec(src)
+  if (youtube?.[1]) {
+    const id = youtube[1]
+    return {
+      kind: 'youtube',
+      id,
+      embed: `https://www.youtube-nocookie.com/embed/${id}?autoplay=1&rel=0`,
+      thumbnail: `https://i.ytimg.com/vi/${id}/hqdefault.jpg`,
+    }
+  }
+  const vimeo = VIMEO.exec(src)
+  if (vimeo?.[1]) return { kind: 'vimeo', id: vimeo[1], embed: `https://player.vimeo.com/video/${vimeo[1]}?autoplay=1&dnt=1` }
+  if (VIDEO_FILE.test(src)) return { kind: 'file', src }
+  return null
+}