create-bearminion 1.4.0 → 1.6.0

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>

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

@@ -6,6 +6,8 @@ import { mediaWireframe } from './wireframe'
 
 export const mediaVariants = ['centered', 'wide', 'split'] as const
 export const mediaKinds = ['video', 'image'] as const
+/** `controls`: the visitor presses play. `loop`: a video file plays silently on repeat while it is on screen, like a moving image. */
+export const mediaPlayback = ['controls', 'loop'] 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. */
@@ -32,6 +34,7 @@ export const mediaSchema = withEmphasis({
   /** What the video shows, read out by screen readers. An image uses its own alt text. */
   label: textSchema.optional(),
   caption: textSchema.optional(),
+  playback: z.enum(mediaPlayback).default('controls'),
 })
 
 export type MediaProps = z.infer<typeof mediaSchema>
@@ -39,7 +42,7 @@ 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.',
+  description: 'One video or image under a heading. YouTube, Vimeo or a video file, with a poster and a caption.',
   schema: mediaSchema,
   defaults: {
     eyebrow: 'Demo',
@@ -50,12 +53,14 @@ export const media = defineSection({
     aspect: '16:9',
     intro: true,
     label: 'Product walkthrough',
+    playback: 'controls',
   },
   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: 'playback', label: 'Video playback', type: 'enum', choices: mediaPlayback, default: 'controls' },
     { name: 'intro', label: 'Show heading', type: 'boolean', default: true },
   ],
   optional: { props: ['eyebrow', 'heading', 'body', 'video', 'poster', 'image', 'label', 'caption'] },

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

@@ -1,33 +1,3 @@
-/**
- * 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
-}
+/** The parser lives in the library, where the editor's video box uses it too. Re-exported so sections keep one import. */
+export { VIDEO_FILE, parseMediaSource } from 'bearminion'
+export type { MediaSource } from 'bearminion'

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

@@ -3,6 +3,7 @@ import Contact from './contact/Contact.astro'
 import Cta from './cta/Cta.astro'
 import Faq from './faq/Faq.astro'
 import Features from './features/Features.astro'
+import Gallery from './gallery/Gallery.astro'
 import Hero from './hero/Hero.astro'
 import LogoStrip from './logo-strip/LogoStrip.astro'
 import Media from './media/Media.astro'
@@ -10,20 +11,21 @@ import Pricing from './pricing/Pricing.astro'
 import Stats from './stats/Stats.astro'
 import Steps from './steps/Steps.astro'
 import Testimonials from './testimonials/Testimonials.astro'
+import Text from './text/Text.astro'
 import TextImage from './text-image/TextImage.astro'
-import Video from './video/Video.astro'
 
 /** Maps a content section `type` to the component that renders it. Definitions live in `definitions.ts`. */
 export const sectionComponents = {
   hero: Hero,
   logoStrip: LogoStrip,
   steps: Steps,
+  gallery: Gallery,
   features: Features,
+  text: Text,
   textImage: TextImage,
   stats: Stats,
   testimonials: Testimonials,
   pricing: Pricing,
-  video: Video,
   media: Media,
   faq: Faq,
   cta: Cta,

package/template/src/components/sections/text/Text.astro

@@ -0,0 +1,43 @@
+---
+import type { Section } from '../definitions'
+import Typography from '../../atoms/Typography.astro'
+import SectionHeader from '../../molecules/SectionHeader.astro'
+import SectionShell from '../../molecules/SectionShell.astro'
+import { cn } from '../../../lib/cn'
+
+interface Props {
+  section: Extract<Section, { type: 'text' }>
+  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 center = section.variant === 'center'
+---
+
+<SectionShell id={section.id} anchor={section.anchor} type={section.type} variant={section.variant} tone={section.tone} motion={reveal}>
+  <div class={cn('section-container flex flex-col gap-[clamp(1.75rem,3.5cqi,2.75rem)]', center && 'items-center')}>
+    <div class={cn('flex w-full flex-col', props.narrow && 'max-w-[42rem]', center && 'items-center text-center')}>
+      <SectionHeader
+        eyebrow={props.eyebrow}
+        heading={props.heading}
+        marks={props.marks}
+        size="h2-md"
+        align={center ? 'center' : 'left'}
+        field={field}
+        class="gap-5"
+      />
+    </div>
+    <Typography
+      as="div"
+      size="lead"
+      class={cn('w-full', props.narrow && 'max-w-[42rem]', center && 'text-left')}
+      data-field={field('body')}
+      markdown={props.body}
+      richHeadings
+    />
+  </div>
+</SectionShell>

package/template/src/components/sections/text/Text.stories.ts

@@ -0,0 +1,17 @@
+import { sectionArgTypes } from '../../../stories/options'
+import { text } from './definition'
+import Text from './Text.astro'
+
+/** The sample pages hold no Text section, so the stories start from its defaults. */
+const section = { id: 'text', type: 'text', variant: 'left', tone: 'base', props: text.defaults } as const
+
+export default {
+  title: 'Sections/Text',
+  component: Text,
+  parameters: { layout: 'fullscreen' },
+  argTypes: sectionArgTypes('text'),
+}
+
+export const Left = { args: { section, index: 0 } }
+export const Center = { args: { section: { ...section, variant: 'center' }, index: 0 } }
+export const FullWidth = { args: { section: { ...section, props: { ...text.defaults, narrow: false } }, index: 0 } }

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

@@ -0,0 +1,36 @@
+import { z } from 'zod'
+import { defineSection, richTextSchema, withEmphasis } from 'bearminion'
+import { accent, eyebrow, heading } from '../shared'
+import { textWireframe } from './wireframe'
+
+export const textVariants = ['left', 'center'] as const
+
+export const textSchema = withEmphasis({
+  eyebrow,
+  heading,
+  /** Long-form text. Besides bold, italic, links, code and lists it may hold `##` and `###` headings. */
+  body: richTextSchema,
+  /** On: a readable column about 65 characters wide. Off: the full width of the page. */
+  narrow: z.boolean().default(true),
+})
+
+export type TextProps = z.infer<typeof textSchema>
+
+export const text = defineSection({
+  type: 'text',
+  label: 'Text',
+  description: 'Plain long-form text with headings, lists and links. For an About, a policy or any simple page.',
+  schema: textSchema,
+  defaults: {
+    eyebrow: 'About',
+    heading: 'A page of plain words.',
+    marks: accent('A page of plain words.', 'plain words.'),
+    body: 'Write as much as you need. Select a few words to make them **bold**, *italic* or a link.\n\n## A heading\n\nHeadings split a long page into parts a reader can scan.\n\n- Lists work too\n- With as many items as you need',
+    narrow: true,
+  },
+  variants: textVariants,
+  defaultVariant: 'left',
+  options: [{ name: 'narrow', label: 'Narrow column (easier to read)', type: 'boolean', default: true }],
+  optional: { props: ['eyebrow', 'heading'] },
+  wireframe: textWireframe,
+})

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

@@ -0,0 +1,12 @@
+import { defineWireframe } from 'bearminion'
+
+/** Add section picker thumbnail: [left %, top %, width %, height %, kind]. */
+export const textWireframe = defineWireframe([
+  [20, 12, 40, 8, 'title'],
+  [20, 30, 60, 3, 'text'],
+  [20, 38, 60, 3, 'text'],
+  [20, 46, 52, 3, 'text'],
+  [20, 58, 30, 5, 'title'],
+  [20, 70, 60, 3, 'text'],
+  [20, 78, 44, 3, 'text'],
+])

package/template/src/components/seo/Seo.astro

@@ -1,5 +1,5 @@
 ---
-import type { Page } from 'bearminion'
+import { hasJsonLdId, mergeJsonLd, siteJsonLdIds, type Page } from 'bearminion'
 import type { Site } from '../organisms/site-definition'
 import { isRemote, resolveLocalAsset } from '../../lib/assets'
 
@@ -31,19 +31,21 @@ const robots = [page.seo.noindex ? 'noindex' : 'index', page.seo.nofollow ? 'nof
 const ogImageSrc = page.seo.ogImage ?? site.seo.ogImage
 const ogImage = ogImageSrc ? absoluteImage(ogImageSrc) : undefined
 
-const jsonLd = {
+// Blocks from site.seo.jsonLd go on every page. When the site describes itself, the generated WebPage points at those blocks.
+const siteBlocks = site.seo.jsonLd ?? []
+const ids = siteJsonLdIds(site.url)
+const webPage = {
   '@context': 'https://schema.org',
   '@type': 'WebPage',
   name: title,
   description,
   url: canonical,
   ...(ogImage ? { image: ogImage } : {}),
-  isPartOf: {
-    '@type': 'WebSite',
-    name: site.name,
-    url: site.url,
-  },
+  isPartOf: hasJsonLdId(siteBlocks, ids.website) ? { '@id': ids.website } : { '@type': 'WebSite', name: site.name, url: site.url },
+  ...(hasJsonLdId(siteBlocks, ids.organization) ? { publisher: { '@id': ids.organization } } : {}),
 }
+// A page's own JSON-LD replaces only the generated WebPage. Blocks with the same @id are emitted once, the page's first.
+const blocks = mergeJsonLd(siteBlocks, page.seo.jsonLd ?? [webPage])
 ---
 
 <title>{title}</title>
@@ -60,9 +62,9 @@ const jsonLd = {
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
 {ogImage && <meta name="twitter:image" content={ogImage} />}
-{/* Custom JSON-LD replaces the generated WebPage block. `<` is escaped so a value cannot close the script tag. */}
+{/* `<` is escaped so a value cannot close the script tag. */}
 {
-  (page.seo.jsonLd ?? [jsonLd]).map((block) => (
+  blocks.map((block) => (
     <script type="application/ld+json" set:html={JSON.stringify(block).replace(/</g, '\\u003c')} />
   ))
 }

package/template/src/lib/content-model.ts

@@ -1,6 +1,7 @@
 import { defineTheme } from 'bearminion'
 import { siteDefinition } from '../components/organisms/site-definition'
 import { sectionDefinitions } from '../components/sections/definitions'
+import { migrateVideoToMedia } from './migrations'
 
 /**
  * Everything the editor and the loaders need to know about this site's content: its section types
@@ -20,6 +21,8 @@ export const contentModel = {
   /**
    * Raise this when a schema change would reject files written before it, and add `migrations[n]`
    * to upgrade version n to n + 1. Files without a `schemaVersion` count as version 1.
+   * Version 2 folded the Video section into Media.
    */
-  schemaVersion: 1,
+  schemaVersion: 2,
+  migrations: { 1: migrateVideoToMedia },
 }

package/template/src/lib/migrations.ts

@@ -0,0 +1,27 @@
+import type { ContentMigration } from 'bearminion'
+
+type Record_ = Record<string, unknown>
+const isRecord = (value: unknown): value is Record_ => typeof value === 'object' && value !== null && !Array.isArray(value)
+
+/** The old Video section's layouts, as the Media section names them. */
+const VARIANT: Record<string, string> = { framed: 'centered', wide: 'wide', split: 'split' }
+
+/** A Video section is a Media section of kind `video`: its `intro` is the Media `body`, and an empty placeholder frame is no link. */
+export function videoToMedia(section: Record_): Record_ {
+  const { intro, video, playback, ...rest } = isRecord(section.props) ? section.props : ({} as Record_)
+  const props: Record_ = { ...rest, kind: 'video' }
+  if (intro !== undefined) props.body = intro
+  if (typeof video === 'string' && video !== 'placeholder') props.video = video
+  if (playback === 'loop') props.playback = 'loop'
+  const variant = typeof section.variant === 'string' ? (VARIANT[section.variant] ?? 'centered') : 'centered'
+  return { ...section, type: 'media', variant, props }
+}
+
+/** Version 1 to 2: the Video section is folded into Media. */
+export const migrateVideoToMedia: ContentMigration = (document, kind) => {
+  if (kind !== 'page' || !Array.isArray(document.sections)) return document
+  return {
+    ...document,
+    sections: document.sections.map((section) => (isRecord(section) && section.type === 'video' ? videoToMedia(section) : section)),
+  }
+}

package/template/src/styles/global.css

@@ -229,6 +229,31 @@
     color: var(--fg);
     white-space: nowrap;
   }
+  /* Headings in long-form text (the Text section). Sized for reading, below the section heading. */
+  [data-rich-headings="true"] h2,
+  [data-rich-headings="true"] h3 {
+    color: var(--fg);
+    font-weight: 600;
+    text-wrap: balance;
+  }
+  [data-rich-headings="true"] h2 {
+    margin: 1.75em 0 0.5em;
+    font-size: 1.625em;
+    line-height: 1.15;
+    letter-spacing: -0.03em;
+  }
+  [data-rich-headings="true"] h3 {
+    margin: 1.5em 0 0.4em;
+    font-size: 1.25em;
+    line-height: 1.25;
+    letter-spacing: -0.02em;
+  }
+  [data-rich-headings="true"] > :first-child {
+    margin-top: 0;
+  }
+  [data-rich-headings="true"] :is(h2, h3) + p {
+    margin-top: 0;
+  }
   blockquote[data-field-kind="rich"]::before {
     content: "“";
   }
@@ -320,6 +345,142 @@
     outline: none;
     border-bottom-color: var(--fg);
   }
+  /* The gallery lightbox: a native <dialog> over the whole screen, one picture at a time. */
+  .bm-lightbox {
+    /* 100%, not 100vw: vw counts the page scrollbar, which pushed the close button off the right edge. */
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    max-height: none;
+    overscroll-behavior: contain;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: rgb(0 0 0 / 0.94);
+    color: #fff;
+    overflow: hidden;
+  }
+  .bm-lightbox::backdrop {
+    background: rgb(0 0 0 / 0.94);
+  }
+  .bm-lightbox[open] {
+    display: block;
+  }
+  /* The page behind does not scroll while a picture is open. */
+  html:has(.bm-lightbox[open]) {
+    overflow: hidden;
+  }
+  .bm-lightbox-stage {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    padding: clamp(3.5rem, 8vh, 5rem) clamp(1rem, 9vw, 6.5rem);
+    touch-action: pan-y;
+  }
+  /* The picture takes whatever height the caption leaves, so a tall picture and a long caption both stay whole. */
+  .bm-lightbox-figure {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto;
+    justify-items: center;
+    gap: 0.875rem;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    margin: 0;
+  }
+  .bm-lightbox-image {
+    display: block;
+    align-self: center;
+    max-width: 100%;
+    max-height: 100%;
+    min-height: 0;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: 8px;
+    transition: opacity 0.2s ease;
+  }
+  .bm-lightbox[data-loading] .bm-lightbox-image {
+    opacity: 0;
+  }
+  .bm-lightbox-caption {
+    width: min(100%, 46rem);
+    font-size: 0.9375rem;
+    line-height: 1.5;
+    text-align: center;
+    color: rgb(255 255 255 / 0.82);
+    text-wrap: pretty;
+    max-height: 7.5rem;
+    overflow-y: auto;
+  }
+  .bm-lightbox-counter {
+    position: absolute;
+    top: 1.375rem;
+    left: 1.25rem;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    letter-spacing: 0.06em;
+    color: rgb(255 255 255 / 0.7);
+  }
+  .bm-lightbox-close,
+  .bm-lightbox-nav {
+    position: absolute;
+    display: grid;
+    place-items: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 9999px;
+    background: rgb(255 255 255 / 0.12);
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+  .bm-lightbox-icon {
+    display: block;
+    width: 1.25rem;
+    height: 1.25rem;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .bm-lightbox-close:hover,
+  .bm-lightbox-nav:hover {
+    background: rgb(255 255 255 / 0.24);
+  }
+  .bm-lightbox-close:focus-visible,
+  .bm-lightbox-nav:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+  .bm-lightbox-close {
+    top: 0.875rem;
+    right: 0.875rem;
+  }
+  .bm-lightbox-nav {
+    top: 50%;
+    translate: 0 -50%;
+  }
+  .bm-lightbox-prev {
+    left: 0.875rem;
+  }
+  .bm-lightbox-next {
+    right: 0.875rem;
+  }
+  .bm-lightbox[data-single] .bm-lightbox-nav,
+  .bm-lightbox[data-single] .bm-lightbox-counter {
+    display: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .bm-lightbox-image,
+    .bm-lightbox-close,
+    .bm-lightbox-nav {
+      transition: none;
+    }
+  }
   .bm-marquee-mask {
     mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
   }

package/template/src/components/sections/video/Video.astro

@@ -1,78 +0,0 @@
----
-import type { Section } from '../definitions'
-import Typography from '../../atoms/Typography.astro'
-import SectionHeader from '../../molecules/SectionHeader.astro'
-import SectionShell from '../../molecules/SectionShell.astro'
-import VideoFrame from './VideoFrame.astro'
-
-interface Props {
-  section: Extract<Section, { type: 'video' }>
-  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 loop = props.playback === 'loop'
-const hasHeader = Boolean(props.eyebrow || props.heading || props.intro)
-// The empty frame is an editor hint. A built site leaves it out rather than show visitors an instruction.
-const showFrame = props.video !== 'placeholder' || import.meta.env.DEV
----
-
-<SectionShell id={section.id} anchor={section.anchor} type={section.type} variant={section.variant} tone={section.tone} motion={reveal}>
-  {
-    section.variant === 'framed' && (
-      <div class="section-container flex flex-col items-center gap-10">
-        {hasHeader && (
-          <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} intro={props.intro} align="center" field={field} />
-        )}
-        {showFrame && (<figure class="w-full max-w-5xl">
-          <VideoFrame src={props.video} poster={props.poster} label={props.label} loop={loop} class="shadow-[0_30px_80px_-40px_rgb(0_0_0/0.45)]" />
-          {props.caption && (
-            <Typography as="p" size="sm" color="muted" class="mt-3 text-center" data-field={field('caption')}>
-              {props.caption}
-            </Typography>
-          )}
-        </figure>)}
-      </div>
-    )
-  }
-  {
-    section.variant === 'wide' && (
-      <div class="flex flex-col gap-10">
-        {hasHeader && (
-          <div class="section-container">
-            <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} intro={props.intro} field={field} />
-          </div>
-        )}
-        {showFrame && (<figure>
-          <VideoFrame src={props.video} poster={props.poster} label={props.label} loop={loop} roundedClass="rounded-none" />
-          {props.caption && (
-            <div class="section-container">
-              <Typography as="p" size="sm" color="muted" class="mt-3" data-field={field('caption')}>
-                {props.caption}
-              </Typography>
-            </div>
-          )}
-        </figure>)}
-      </div>
-    )
-  }
-  {
-    section.variant === 'split' && (
-      <div class="section-container grid items-center gap-12 @min-[860px]:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
-        {hasHeader && <SectionHeader eyebrow={props.eyebrow} heading={props.heading} marks={props.marks} intro={props.intro} field={field} />}
-        {showFrame && (<figure class:list={[!hasHeader && '@min-[860px]:col-span-2']}>
-          <VideoFrame src={props.video} poster={props.poster} label={props.label} loop={loop} />
-          {props.caption && (
-            <Typography as="p" size="sm" color="muted" class="mt-3" data-field={field('caption')}>
-              {props.caption}
-            </Typography>
-          )}
-        </figure>)}
-      </div>
-    )
-  }
-</SectionShell>

package/template/src/components/sections/video/Video.stories.ts

@@ -1,17 +0,0 @@
-import { sectionArgTypes } from '../../../stories/options'
-import { video } from './definition'
-import Video from './Video.astro'
-
-/** The sample pages hold no video, so the stories use the section's defaults: an empty frame until a file is linked. */
-const section = { id: 'video', type: 'video', variant: 'framed', tone: 'base', props: video.defaults } as const
-
-export default {
-  title: 'Sections/Video',
-  component: Video,
-  parameters: { layout: 'fullscreen' },
-  argTypes: sectionArgTypes('video'),
-}
-
-export const Framed = { args: { section, index: 0 } }
-export const Wide = { args: { section: { ...section, variant: 'wide' }, index: 0 } }
-export const Split = { args: { section: { ...section, variant: 'split' }, index: 0 } }