@getvitops/emdash 1.0.0 → 2.0.0-alpha.1

package/src/astro/blocks/Reviews.astro

@@ -0,0 +1,122 @@
+---
+/**
+ * Google reviews on the framework's `.review` pattern, from the committed
+ * `.vitops/reviews.json` cache (`vitops reviews`).
+ *
+ * **The data is a build-time import, never a filesystem read.** This renders in a Worker (and,
+ * with pages prerendered, inside the Cloudflare adapter's local workerd), where there is no
+ * `fs`. `virtual:getvitops/reviews` is served by the `vitops()` Astro integration from the
+ * project's `.vitops/reviews.json`; with no file it is an empty cache, so a fresh scaffold
+ * builds and this block renders nothing. A new review therefore reaches the page on the next
+ * rebuild after `vitops reviews` is re-run and committed — not when an editor saves.
+ *
+ * **Which reviews show is `selectReviews()`**, `@getvitops/utils`' one decision (featured ids
+ * first, then `minRating` / `sort` / `limit`). The block's fields are its
+ * `ReviewLocationConfig`; nothing is re-implemented here.
+ *
+ * The cards are the Astro `<ReviewCard>`, in a grid (`<Subgrid>`), a `<Carousel>` or a
+ * `<Marquee>`. Both of those emit their own `<wc-*>`, so there is no wrapper here, and each
+ * works with no JS. Reviewer photos are Google-hosted and default OFF (a third-party request
+ * for every visitor); the source link carries `rel="nofollow"`; review JSON-LD is not offered
+ * — Google treats a business marking up reviews of itself as ineligible for rich results.
+ * `tone` colours the surrounding band, never the cards, so `.tone` and the card's own
+ * background cannot fight over one element.
+ *
+ * With nothing to show the public page gets nothing; `astro dev` gets a note saying why, since
+ * "the block is blank" is otherwise indistinguishable from "the block is broken".
+ */
+import reviewCache from 'virtual:getvitops/reviews';
+import { selectReviews, type Review, type ReviewCache } from '@getvitops/utils/reviews/select';
+import Carousel from '@getvitops/astro/components/Carousel.astro';
+import Marquee from '@getvitops/astro/components/Marquee.astro';
+import ReviewCard from '@getvitops/astro/components/ReviewCard.astro';
+import Subgrid from '@getvitops/astro/components/Subgrid.astro';
+import { joinStyle, resolveTone } from './tone.ts';
+import { resolveBlockValue, splitLines, text } from './value.ts';
+
+interface Value {
+  label?: string;
+  location?: string;
+  layout?: string;
+  columns?: string | number;
+  limit?: string | number;
+  minRating?: string | number;
+  sort?: string;
+  featured?: string;
+  avatars?: boolean;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const cache = reviewCache as unknown as ReviewCache;
+
+// A blank location means "every location in the cache" — the common case is one, and a
+// multi-location site that wants one location names it.
+const key = text(value.location);
+const pool: Review[] = (key ? [cache.locations[key]] : Object.values(cache.locations)).flatMap(
+  (l) => l?.reviews ?? [],
+);
+
+const limit = Math.round(Number(value.limit));
+const minRating = Math.round(Number(value.minRating));
+const reviews = selectReviews(pool, {
+  featured: splitLines(value.featured),
+  ...(minRating >= 1 && minRating <= 5 ? { minRating } : {}),
+  sort: value.sort === 'rating' ? 'rating' : 'recent',
+  // 0 / blank = no cap, the same as leaving `limit` unset in `site.reviews`.
+  ...(limit > 0 ? { limit } : {}),
+});
+
+const label = text(value.label) || 'Customer reviews';
+const layout = ['carousel', 'marquee'].includes(text(value.layout)) ? text(value.layout) : 'grid';
+const columns = Math.min(4, Math.max(1, Math.round(Number(value.columns)) || 3));
+const avatar = Boolean(value.avatars);
+const tone = resolveTone(value.tone, value.color);
+const toned = Boolean(value.tone || value.color);
+const dev = import.meta.env.DEV;
+import { rootAttrs } from './attrs.ts';
+---
+
+{
+  reviews.length > 0 ? (
+    <div
+      {...rootAttrs(value, ['reviews', toned && tone.className], toned ? joinStyle(tone.style) : undefined)}
+    >
+      {layout === 'carousel' ? (
+        <Carousel label={label}>
+          {reviews.map((review) => (
+            <li class="carousel__slide">
+              <ReviewCard review={review} avatar={avatar} />
+            </li>
+          ))}
+        </Carousel>
+      ) : layout === 'marquee' ? (
+        <Marquee pauseOnHover aria-label={label} role="group">
+          {reviews.map((review) => (
+            <ReviewCard review={review} avatar={avatar} />
+          ))}
+        </Marquee>
+      ) : (
+        <Subgrid
+          aria-label={label}
+          style={`--subgrid-cols: ${columns}; --subgrid-row-span: 1`}
+        >
+          {reviews.map((review) => (
+            <li>
+              <ReviewCard review={review} avatar={avatar} />
+            </li>
+          ))}
+        </Subgrid>
+      )}
+    </div>
+  ) : (
+    dev && (
+      <p class="reviews__empty" role="note">
+        vitops.reviews: no reviews to show
+        {key ? ` for location "${key}"` : ''}. Run <code>vitops reviews</code> and commit
+        <code>.vitops/reviews.json</code>, or lower the rating filter. (Shown in dev only.)
+      </p>
+    )
+  )
+}

package/src/astro/blocks/RichText.astro

@@ -0,0 +1,14 @@
+---
+/**
+ * Inline text with `[label](url)` links, rendered from `linkRuns()` runs — no `set:html`,
+ * so editor text can never inject markup. Internal to the block adapters.
+ */
+import { linkRuns } from './value.ts';
+
+interface Props {
+  text: unknown;
+}
+const runs = linkRuns(Astro.props.text);
+---
+
+{runs.map((run) => (run.href ? <a class="link" href={run.href}>{run.text}</a> : run.text))}

package/src/astro/blocks/Section.astro

@@ -0,0 +1,82 @@
+---
+/**
+ * `vitops_section` — the editorial wrapper: kicker, heading, lead-in, then a body of other
+ * blocks. It renders a block TYPE (a `blocks` field entry), not a Portable Text block — see
+ * `block-types.ts` for why — so it is mapped through `blockTypeComponents`, not
+ * `blockComponents`.
+ *
+ * Composed from the framework's layout primitives: `.region` for vertical rhythm, `.centered`
+ * for the tracks (the `width` field picks `breakout`/`spotlight`/`fullbleed`), `.section` for
+ * the head and the heading-left `split` layout, `.tone` for the backdrop. The heading is a
+ * real heading at the editor's `level`.
+ *
+ * The body is rendered by EmDash's `<PortableText>`, which merges this plugin's
+ * `blockComponents`, so a `vitops.cards` or `vitops.actionLink` placed in it renders with its
+ * web component. Class names never come from field values (Tailwind could not see them): the
+ * width and layout are looked up in closed tables, colour is `--tone-*` custom properties.
+ */
+import { PortableText } from 'emdash/ui';
+import { joinStyle, resolveTone } from './tone.ts';
+import { headingTag, resolveBlockValue, text } from './value.ts';
+
+interface Value {
+  kicker?: string;
+  heading?: string;
+  level?: string | number;
+  sub?: string;
+  body?: unknown;
+  layout?: string;
+  width?: string;
+  tone?: string;
+  color?: string;
+  solid?: boolean;
+  theme?: string;
+}
+
+const WIDTHS: Record<string, string> = {
+  breakout: 'breakout',
+  spotlight: 'spotlight',
+  fullbleed: 'fullbleed',
+};
+
+const value = resolveBlockValue<Value>(Astro.props);
+const kicker = text(value.kicker);
+const heading = text(value.heading);
+const sub = text(value.sub);
+const body = Array.isArray(value.body) ? value.body : [];
+const Heading = headingTag(value.level, 2);
+// `theme` is one pick for the common case: `<role>` tints, `<role>:solid` fills. It wins over the
+// older `tone`/`color`/`solid` fields, which stay for content that already uses them.
+const [themeRole, themeFill] = text(value.theme).replace(/^none$/, '').split(':');
+const tone = themeRole ? resolveTone(themeRole) : resolveTone(value.tone, value.color);
+const solid = themeRole ? themeFill === 'solid' : Boolean(value.solid);
+const layout = text(value.layout);
+const width = WIDTHS[text(value.width)];
+const hasHead = Boolean(kicker || heading || sub);
+import { rootAttrs } from './attrs.ts';
+---
+
+{
+  (hasHead || body.length > 0) && (
+    <section
+      {...rootAttrs(value, ['section', 'region', tone.style && tone.className, tone.style && solid && 'tone--solid', layout === 'split' && 'section--split', layout === 'center' && 'section--center'], joinStyle(tone.style))}
+    >
+      <div class="centered">
+        <div class:list={['section__inner', width]}>
+          {hasHead && (
+            <header class="section__head">
+              {kicker && <p class="section__kicker font-eyebrow">{kicker}</p>}
+              {heading && <Heading class="section__title font-title">{heading}</Heading>}
+              {sub && <p class="section__sub font-lead">{sub}</p>}
+            </header>
+          )}
+          {body.length > 0 && (
+            <div class="section__body">
+              <PortableText value={body} />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/astro/blocks/Stats.astro

@@ -0,0 +1,59 @@
+---
+/**
+ * Headline figures on the framework's `.stats` pattern, each figure the existing
+ * `<Counter>` (which emits its own `<wc-counter>` — no wrapper here). `variant: tiles` is
+ * the generic kernel of a dashboard mock: a group line, the figure, its label and a
+ * delta whose `state` (`up`/`down`) colours it through the site's success/danger roles.
+ * The delta's words stay in the text, so colour is never the only carrier.
+ *
+ * `animate: false` renders the plain fragment (`enhance={false}`) — no count-up.
+ */
+import Counter from '@getvitops/astro/components/Counter.astro';
+import { resolveTone, joinStyle } from './tone.ts';
+import { resolveBlockValue, rows, text } from './value.ts';
+
+interface Value {
+  stats?: unknown;
+  variant?: string;
+  animate?: boolean;
+  tone?: string;
+  color?: string;
+}
+
+const STATES = new Set(['up', 'down']);
+
+const value = resolveBlockValue<Value>(Astro.props);
+const stats = rows<Record<string, unknown>>(value.stats)
+  .map((row) => ({
+    value: text(row.value),
+    label: text(row.label),
+    group: text(row.group),
+    delta: text(row.delta),
+    state: STATES.has(text(row.state)) ? text(row.state) : undefined,
+  }))
+  .filter((stat) => stat.value);
+const tiles = value.variant === 'tiles';
+const animate = value.animate !== false;
+const tone = resolveTone(value.tone, value.color);
+import { rootAttrs } from './attrs.ts';
+---
+
+{
+  stats.length > 0 && (
+    <ul
+      {...rootAttrs(value, ['stats', tone.className, tiles && 'stats--tiles'], joinStyle(tone.style))}
+      role="list"
+    >
+      {stats.map((stat) => (
+        <li class="stats__item" data-state={stat.state}>
+          {tiles && stat.group && <p class="stats__group font-eyebrow">{stat.group}</p>}
+          <p class="stats__figure font-display">
+            <Counter value={stat.value} enhance={animate} />
+          </p>
+          {stat.label && <p class="stats__label">{stat.label}</p>}
+          {tiles && stat.delta && <p class="stats__delta">{stat.delta}</p>}
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/astro/blocks/Steps.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * A numbered sequence on the framework's `.steps` pattern: an `<ol>` (so the order is
+ * semantic with no CSS), a CSS-counter marker and a connector line. Each step's title is a
+ * real heading at the editor's `level`, so the outline survives. Colour is the shared tone
+ * convention — see `tone.ts`.
+ */
+import RichText from './RichText.astro';
+import { resolveTone, joinStyle } from './tone.ts';
+import { headingTag, resolveBlockValue, rows, text } from './value.ts';
+
+interface Value {
+  steps?: unknown;
+  level?: string | number;
+  layout?: string;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const steps = rows<Record<string, unknown>>(value.steps)
+  .map((row) => ({ title: text(row.title), text: text(row.text) }))
+  .filter((step) => step.title || step.text);
+const Heading = headingTag(value.level, 3);
+const tone = resolveTone(value.tone, value.color);
+import { rootAttrs } from './attrs.ts';
+---
+
+{
+  steps.length > 0 && (
+    <ol
+      {...rootAttrs(value, ['steps', tone.className, value.layout === 'row' && 'steps--row'], joinStyle(tone.style))}
+    >
+      {steps.map((step) => (
+        <li class="steps__item">
+          <div class="steps__body">
+            {step.title && <Heading class="steps__title font-heading">{step.title}</Heading>}
+            {step.text && (
+              <p class="steps__text">
+                <RichText text={step.text} />
+              </p>
+            )}
+          </div>
+        </li>
+      ))}
+    </ol>
+  )
+}

package/src/astro/blocks/WidgetArea.astro

@@ -0,0 +1,21 @@
+---
+/**
+ * `vitops.widgetArea` — a synced region inside page content: the area is defined once under
+ * Widgets in the admin and every page that places this block shows the same thing. (An EmDash
+ * Section, by contrast, is copied in.) See  `../WidgetArea.astro` for what it renders and why a
+ * widget area cannot hold another. The markup (`.widget-area`) lives there.
+ */
+import WidgetArea from '../WidgetArea.astro';
+import { resolveBlockValue, text } from './value.ts';
+import { rootAttrs } from './attrs.ts';
+
+interface Value {
+  area?: string;
+  level?: string | number;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const name = text(value.area);
+---
+
+{name && <WidgetArea name={name} level={value.level} {...rootAttrs(value, ['widget-area--in-page'])} />}

package/src/astro/blocks/attrs.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { anchorId, blockAttrs, classTokens, customProperties } from './attrs.ts';
+
+describe('anchorId', () => {
+  it('slugifies and accepts a clean id', () => {
+    expect(anchorId('Contact Us')).toBe('contact-us');
+    expect(anchorId('contact')).toBe('contact');
+  });
+  it('rejects what cannot be an id', () => {
+    expect(anchorId('')).toBeUndefined();
+    expect(anchorId('9lives')).toBeUndefined();
+    expect(anchorId(42)).toBeUndefined();
+  });
+});
+
+describe('classTokens', () => {
+  it('keeps valid tokens, drops the rest', () => {
+    expect(classTokens('mt-4  md:flex "x" <b>')).toBe('mt-4 md:flex');
+  });
+  it('is undefined when nothing survives', () => {
+    expect(classTokens('"><script>')).toBeUndefined();
+  });
+});
+
+describe('customProperties', () => {
+  it('keeps custom properties', () => {
+    expect(customProperties('--p-card: 3rem; --gap: 1rem')).toBe('--p-card: 3rem; --gap: 1rem');
+  });
+  it('drops ordinary properties and fetching values', () => {
+    expect(
+      customProperties('background: url(x); --a: url(https://x/y); display: none'),
+    ).toBeUndefined();
+    expect(customProperties('--a: 1px; position: fixed')).toBe('--a: 1px');
+  });
+  it('rejects values that try to leave the declaration', () => {
+    expect(customProperties('--a: red}</style><script>')).toBeUndefined();
+    expect(customProperties('--a: \\75rl(x)')).toBeUndefined();
+  });
+});
+
+describe('blockAttrs', () => {
+  it('is empty for a block that sets nothing', () => {
+    expect(blockAttrs({})).toEqual({});
+    expect(blockAttrs(undefined)).toEqual({});
+  });
+  it('reads the block-type spelling too', () => {
+    expect(blockAttrs({ class_name: 'mt-4' })).toEqual({ class: 'mt-4' });
+  });
+  it('collects the three fields', () => {
+    expect(blockAttrs({ anchor: 'services', className: 'mt-4', style: '--p-card: 2rem' })).toEqual({
+      id: 'services',
+      class: 'mt-4',
+      style: '--p-card: 2rem',
+    });
+  });
+});

package/src/astro/blocks/attrs.ts

@@ -0,0 +1,104 @@
+/**
+ * The escape hatches every block carries: `anchor` (an `id`), `className` (extra classes)
+ * and `style` (CSS custom properties).
+ *
+ * All three are editor-supplied strings that land in attributes, so each is validated against
+ * a closed grammar and anything outside it is dropped, never escaped into place.
+ *
+ * **`style` is custom properties only.** `--p-card: 2rem` tunes a framework hook, which is how
+ * the design system is meant to be overridden. Free-form declarations (`display`, `position`,
+ * `background: url(…)`) would let one page quietly diverge from the tokens, and `url(` is a
+ * request the visitor's browser makes to wherever an editor points it.
+ *
+ * **`className` and the `tailwind` format.** Tailwind scans source for class names, not CMS
+ * content, so a utility typed here exists only if something else already used it. Under the
+ * `css` and `bricks` formats every framework class ships, so the caveat does not apply.
+ */
+
+export interface BlockAttrs {
+  id?: string;
+  class?: string;
+  style?: string;
+}
+
+const ANCHOR = /^[a-z][a-z0-9-]{0,63}$/;
+const CLASS_TOKEN = /^[A-Za-z0-9_:@/.[\]-]{1,80}$/;
+const MAX_CLASSES = 20;
+const PROPERTY = /^--[a-zA-Z][a-zA-Z0-9-]{0,60}$/;
+/** Characters that could end the declaration, open a function that fetches, or leave the attribute. */
+const FORBIDDEN_VALUE = /[\\<>@{}"'`]|url\(|expression\(|image-set\(|;/i;
+
+/** Lowercase an anchor and replace anything else with `-`; `undefined` when nothing valid remains. */
+export function anchorId(input: unknown): string | undefined {
+  if (typeof input !== 'string') return undefined;
+  const slug = input
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+  return ANCHOR.test(slug) ? slug : undefined;
+}
+
+export function classTokens(input: unknown): string | undefined {
+  if (typeof input !== 'string') return undefined;
+  const tokens = input
+    .split(/\s+/)
+    .filter((t) => CLASS_TOKEN.test(t))
+    .slice(0, MAX_CLASSES);
+  return tokens.length ? tokens.join(' ') : undefined;
+}
+
+/** Keep each `--name: value` pair that passes; drop the rest. */
+export function customProperties(input: unknown): string | undefined {
+  if (typeof input !== 'string') return undefined;
+  const kept: string[] = [];
+  for (const decl of input.split(';')) {
+    const at = decl.indexOf(':');
+    if (at < 0) continue;
+    const name = decl.slice(0, at).trim();
+    const value = decl.slice(at + 1).trim();
+    if (!PROPERTY.test(name) || !value || value.length > 200 || FORBIDDEN_VALUE.test(value))
+      continue;
+    kept.push(`${name}: ${value}`);
+  }
+  return kept.length ? kept.join('; ') : undefined;
+}
+
+/** The validated `id` / `class` / `style` for a block's saved value. Empty when none is set. */
+export function blockAttrs(input: object | undefined): BlockAttrs {
+  const value = input as Record<string, unknown> | undefined;
+  const out: BlockAttrs = {};
+  const id = anchorId(value?.anchor);
+  // Portable Text blocks name it `className`; a block TYPE's slugs must be lowercase, so `class_name`.
+  const cls = classTokens(value?.className ?? value?.class_name);
+  const style = customProperties(value?.style);
+  if (id) out.id = id;
+  if (cls) out.class = cls;
+  if (style) out.style = style;
+  return out;
+}
+
+type ClassPart = string | false | null | undefined;
+
+/**
+ * The attributes for a block's outermost element: its own classes and style with the editor's
+ * `anchor` / `className` / `style` merged in. Spread it on that element (`<div {...root}>`) or pass
+ * it to the pattern component that renders it — there is never an extra wrapper node, so a block's
+ * DOM shape does not depend on which fields an editor filled in.
+ *
+ * An anchored element also gets `.block-anchor`, which offsets `scroll-margin-top` for a sticky header.
+ */
+export function rootAttrs(
+  value: object | undefined,
+  own: ClassPart[] = [],
+  ownStyle?: string,
+): BlockAttrs {
+  const user = blockAttrs(value);
+  const out: BlockAttrs = {};
+  if (user.id) out.id = user.id;
+  const cls = [...own, user.id && 'block-anchor', user.class].filter(Boolean).join(' ');
+  if (cls) out.class = cls;
+  const style = [ownStyle, user.style].filter(Boolean).join('; ');
+  if (style) out.style = style;
+  return out;
+}

package/src/astro/blocks/embed.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { resolveEmbed } from './embed.ts';
+
+describe('resolveEmbed', () => {
+  it('rewrites YouTube addresses to the no-cookie embed', () => {
+    for (const url of [
+      'https://www.youtube.com/watch?v=abc_123-Z',
+      'https://youtu.be/abc_123-Z',
+      'https://www.youtube.com/shorts/abc_123-Z',
+    ])
+      expect(resolveEmbed('youtube', url)?.src).toBe(
+        'https://www.youtube-nocookie.com/embed/abc_123-Z',
+      );
+  });
+
+  it('rewrites Vimeo addresses and asks for do-not-track', () => {
+    expect(resolveEmbed('vimeo', 'https://vimeo.com/123456')?.src).toBe(
+      'https://player.vimeo.com/video/123456?dnt=1',
+    );
+  });
+
+  it('accepts only the framing endpoints of a map provider', () => {
+    expect(resolveEmbed('map', 'https://www.google.com/maps/embed?pb=!1m1')?.provider).toBe(
+      'Google Maps',
+    );
+    expect(resolveEmbed('map', 'https://www.google.com/maps/place/Ottawa')).toBeNull();
+    expect(
+      resolveEmbed('map', 'https://www.openstreetmap.org/export/embed.html?bbox=1')?.src,
+    ).toContain('openstreetmap.org/export/embed');
+  });
+
+  it('refuses anything that is not https, and a named provider’s foreign hosts', () => {
+    expect(resolveEmbed('custom', 'javascript:alert(1)')).toBeNull();
+    expect(resolveEmbed('custom', 'http://example.com/x')).toBeNull();
+    expect(resolveEmbed('youtube', 'https://evil.example/watch?v=abc')).toBeNull();
+    expect(resolveEmbed('vimeo', 'https://evil.example/123')).toBeNull();
+    expect(resolveEmbed('custom', undefined)).toBeNull();
+  });
+
+  it('treats an unknown provider as custom https', () => {
+    expect(resolveEmbed('nope', 'https://example.com/w')?.src).toBe('https://example.com/w');
+  });
+});

package/src/astro/blocks/embed.ts

@@ -0,0 +1,84 @@
+/**
+ * Turn an editor-pasted address into the iframe `src` for a provider, and say which
+ * consent category loading it needs.
+ *
+ * Pure so the consequential cases — what is allowed to become a frame, and which
+ * category it waits on — are asserted without rendering. The rule is **closed by
+ * default**: a `custom` embed must still be `https:`, and each named provider only
+ * accepts its own hosts, so a pasted `javascript:` or an unrelated site never reaches an
+ * iframe `src`.
+ */
+export type EmbedProvider = 'youtube' | 'vimeo' | 'map' | 'custom';
+
+export interface ResolvedEmbed {
+  /** Address the consent runtime assigns to the iframe after the visitor allows it. */
+  src: string;
+  /** What the placeholder calls the third party ("YouTube"). */
+  provider: string;
+  /** Where the visitor can open the same content without embedding it. */
+  openUrl: string;
+}
+
+const NAMES: Record<EmbedProvider, string> = {
+  youtube: 'YouTube',
+  vimeo: 'Vimeo',
+  map: 'Google Maps',
+  custom: 'a third party',
+};
+
+function parse(input: unknown): URL | null {
+  if (typeof input !== 'string') return null;
+  try {
+    const url = new URL(input.trim());
+    return url.protocol === 'https:' ? url : null;
+  } catch {
+    return null;
+  }
+}
+
+const host = (url: URL, ...names: string[]) =>
+  names.some((n) => url.hostname === n || url.hostname.endsWith(`.${n}`));
+
+/** The id of a YouTube watch / short / embed address, or null. */
+function youtubeId(url: URL): string | null {
+  if (url.hostname === 'youtu.be') return url.pathname.slice(1) || null;
+  if (!host(url, 'youtube.com', 'youtube-nocookie.com')) return null;
+  if (url.pathname === '/watch') return url.searchParams.get('v');
+  const m = /^\/(?:embed|shorts|live)\/([\w-]+)/.exec(url.pathname);
+  return m ? m[1]! : null;
+}
+
+export function resolveEmbed(provider: unknown, input: unknown): ResolvedEmbed | null {
+  const url = parse(input);
+  if (!url) return null;
+  const kind = (['youtube', 'vimeo', 'map', 'custom'] as const).includes(provider as EmbedProvider)
+    ? (provider as EmbedProvider)
+    : 'custom';
+  const provider_ = NAMES[kind];
+  const done = (src: string): ResolvedEmbed => ({ src, provider: provider_, openUrl: url.href });
+
+  switch (kind) {
+    case 'youtube': {
+      const id = youtubeId(url);
+      // The no-cookie host: the same player, and it sets nothing until the visitor plays.
+      return id && /^[\w-]+$/.test(id)
+        ? done(`https://www.youtube-nocookie.com/embed/${id}`)
+        : null;
+    }
+    case 'vimeo': {
+      const m = /^\/(?:video\/)?(\d+)/.exec(url.pathname);
+      return host(url, 'vimeo.com') && m
+        ? done(`https://player.vimeo.com/video/${m[1]}?dnt=1`)
+        : null;
+    }
+    case 'map': {
+      // Only the embed endpoints: a plain maps.google.com share link refuses framing.
+      const google = host(url, 'google.com') && url.pathname.startsWith('/maps/embed');
+      const osm =
+        url.hostname === 'www.openstreetmap.org' && url.pathname.startsWith('/export/embed');
+      return google || osm ? done(url.href) : null;
+    }
+    default:
+      return done(url.href);
+  }
+}

package/src/astro/blocks/form.sample.ts

@@ -0,0 +1,33 @@
+/**
+ * A realistic saved `vitops.form` block, for tests and the e2e fixtures: the fields a small
+ * service business asks for, including the two names the conversion route treats specially.
+ */
+export const SAMPLE_FORM_BLOCK = {
+  _type: 'vitops.form',
+  _key: 'contact',
+  heading: 'Get in touch',
+  level: '2',
+  intro: 'Tell us about your project and we will reply within one business day.',
+  fields: [
+    { label: 'Your name', name: 'name', type: 'text', required: true },
+    {
+      label: 'Email',
+      name: 'email',
+      type: 'email',
+      required: true,
+      help: 'We only use it to reply.',
+    },
+    { label: 'Phone', name: 'phone', type: 'tel', required: false },
+    {
+      label: 'Service',
+      name: 'service',
+      type: 'select',
+      required: false,
+      options: 'Maintenance\nDesign\nInstallation',
+    },
+    { label: 'Message', name: 'message', type: 'textarea', required: true },
+    { label: 'Add me to your newsletter', name: 'newsletter', type: 'checkbox' },
+  ],
+  submitLabel: 'Send message',
+  successMessage: 'Thanks, we will be in touch.',
+};