create-bearminion 1.5.0 → 1.6.0

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/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 } }

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

@@ -1,60 +0,0 @@
----
-import type { Image } from 'bearminion'
-import { imageUrl } from '../../../lib/image-url'
-import { cn } from '../../../lib/cn'
-
-interface Props {
-  /** A video file URL, or `placeholder` for an empty frame. */
-  src: string
-  poster?: Image
-  label?: string
-  loop: boolean
-  roundedClass?: string
-  class?: string
-}
-
-const { src, poster, label, loop, roundedClass = 'rounded-card-lg', class: className } = Astro.props
-const placeholder = src === 'placeholder'
-
-const posterSrc = await imageUrl(poster)
-// A looping video 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 playback = loop ? { muted: true, loop: true, controls: true, 'data-video-loop': '' } : { controls: true }
----
-
-<div class={cn('relative overflow-hidden bg-surface', placeholder && 'placeholder-stripes aspect-video', roundedClass, className)}>
-  {
-    placeholder ? (
-      <div class="absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center">
-        <span class="flex size-14 items-center justify-center rounded-full bg-fg text-bg" aria-hidden="true">
-          <svg viewBox="0 0 16 16" class="ms-0.5 size-5" fill="currentColor"><path d="M4 2.5v11l9-5.5z" /></svg>
-        </span>
-        <span class="font-mono text-[0.6875rem] tracking-[0.04em] text-muted">Add a video link in the section settings</span>
-      </div>
-    ) : (
-      <video class="block h-auto w-full" src={src} poster={posterSrc} preload="metadata" playsinline aria-label={label} {...playback} />
-    )
-  }
-</div>
-
-<script>
-  /** 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/video/definition.ts

@@ -1,58 +0,0 @@
-import { z } from 'zod'
-import { defineSection, imageSchema, richTextSchema, textSchema, withEmphasis } from 'bearminion'
-import { VIDEO_FILE } from '../media/source'
-import { accent, eyebrow, heading } from '../shared'
-import { videoWireframe } from './wireframe'
-
-export const videoVariants = ['framed', 'wide', 'split'] as const
-
-/** `controls`: the visitor presses play. `loop`: plays silently and on repeat while it is on screen, like a moving image. */
-export const videoPlayback = ['controls', 'loop'] as const
-
-/**
- * A video file the browser can play: a path in the site's `public/` folder (`/videos/demo.webm`) or an `https://` link
- * to the file. `placeholder` shows an empty frame. A page link such as YouTube does not play in a video element.
- */
-export const videoSourceSchema = z
-  .string()
-  .min(1)
-  .refine((value) => value === 'placeholder' || VIDEO_FILE.test(value), {
-    message:
-      'Use a link to a video file ending in .mp4 or .webm, or a path in public/ such as /videos/demo.webm. YouTube and similar page links do not play here.',
-  })
-
-export const videoSchema = withEmphasis({
-  eyebrow,
-  heading,
-  intro: richTextSchema.optional(),
-  video: videoSourceSchema,
-  /** What the video shows, read out by screen readers. */
-  label: textSchema.optional(),
-  /** Shown before the video plays and while it loads. */
-  poster: imageSchema.optional(),
-  caption: textSchema.optional(),
-  playback: z.enum(videoPlayback).default('controls'),
-})
-
-export type VideoProps = z.infer<typeof videoSchema>
-
-export const video = defineSection({
-  type: 'video',
-  label: 'Video',
-  description: 'A video with a heading, a poster image and a caption.',
-  schema: videoSchema,
-  defaults: {
-    eyebrow: 'Watch',
-    heading: 'See it in action.',
-    marks: accent('See it in action.', 'in action.'),
-    intro: 'A short video says more than a page of text. Link an .mp4 or .webm file and add a poster image to show before it plays.',
-    video: 'placeholder',
-    label: 'Product walkthrough',
-    playback: 'controls',
-  },
-  variants: videoVariants,
-  defaultVariant: 'framed',
-  options: [{ name: 'playback', label: 'Playback', type: 'enum', choices: videoPlayback, default: 'controls' }],
-  optional: { props: ['eyebrow', 'heading', 'intro', 'label', 'poster', 'caption'] },
-  wireframe: videoWireframe,
-})

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

@@ -1,9 +0,0 @@
-import { defineWireframe } from 'bearminion'
-
-/** Add section picker thumbnail: [left %, top %, width %, height %, kind]. */
-export const videoWireframe = defineWireframe([
-  [30, 10, 40, 8, 'title'],
-  [24, 22, 52, 4, 'text'],
-  [12, 32, 76, 58, 'dark'],
-  [45, 54, 10, 14, 'light'],
-])