@getvitops/emdash 1.0.0 → 2.0.0-alpha.0

package/src/astro/blocks/NavTree.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * One `<ul class="navlist">` level of `vitops.nav`, recursing for sub-links. Internal — import
+ * `Nav.astro`. Plain nested lists, no disclosure widgets: a page-body menu is read, not
+ * collapsed, so there is no state to manage and no runtime JS. The `.navlist` pattern is
+ * `patterns/sitenav.css`'s (all formats).
+ */
+import { isCurrent, linkRel, type NavItem } from '@getvitops/astro/components/sitenav.ts';
+import { safeHref } from './value.ts';
+
+interface Props {
+  items: NavItem[];
+  current: string;
+  /** Modifier classes on the top-level list (`navlist--inline`, …); empty for sub-levels. */
+  modifiers?: string[];
+  top?: boolean;
+}
+
+const { items, current, modifiers = [], top = true } = Astro.props;
+---
+
+<ul class:list={[top ? 'navlist' : 'navlist__sub', ...modifiers]} role="list">
+  {
+    items.map((item) => {
+      const href = safeHref(item.url);
+      const kids = item.children ?? [];
+      return (
+        <li class="navlist__item">
+          {href ? (
+            <a
+              class:list={['navlist__link', item.cssClasses]}
+              href={href}
+              target={item.target || undefined}
+              rel={linkRel(item)}
+              aria-current={isCurrent(item.url, current) ? 'page' : undefined}
+            >
+              {item.label}
+            </a>
+          ) : (
+            // A heading-only item (no or an unsafe URL) is a label, not a dead link.
+            <span class="navlist__label">{item.label}</span>
+          )}
+          {kids.length > 0 && <Astro.self items={kids} current={current} top={false} />}
+        </li>
+      );
+    })
+  }
+</ul>

package/src/astro/blocks/Pricing.astro

@@ -0,0 +1,66 @@
+---
+/**
+ * Plan cards on the framework's `.pricing-grid` / `.pricing-card` pattern (patterns/
+ * subgrid.css): each card is a subgrid over four shared rows — header, price, features,
+ * button — so features and buttons line up across plans whatever each holds.
+ *
+ * `--pricing-card-rows` must name those four rows or the cards do not span them; it is set
+ * here rather than left to the pattern's `auto`, which is not a valid `span`.
+ */
+import { headingTag, lines, resolveBlockValue, rows, safeHref, text } from './value.ts';
+
+interface Value {
+  plans?: unknown;
+  level?: string | number;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const plans = rows<Record<string, unknown>>(value.plans)
+  .map((row) => ({
+    name: text(row.name),
+    price: text(row.price),
+    period: text(row.period),
+    features: lines(row.features),
+    ctaLabel: text(row.ctaLabel),
+    ctaHref: safeHref(row.ctaHref),
+    featured: row.featured === true,
+  }))
+  .filter((plan) => plan.name || plan.price);
+const Heading = headingTag(value.level, 3);
+const columns = Math.min(4, Math.max(1, plans.length));
+---
+
+{
+  plans.length > 0 && (
+    <ul
+      class="pricing-grid"
+      role="list"
+      style={`--pricing-columns: ${columns}; --pricing-card-rows: 4`}
+    >
+      {plans.map((plan) => (
+        <li class:list={['pricing-card', plan.featured && 'pricing-card--featured']}>
+          <div class="pricing-card__header">
+            {plan.name && <Heading class="font-title">{plan.name}</Heading>}
+          </div>
+          <p class="pricing-card__price">
+            {plan.price}
+            {plan.period && <small class="font-caption"> {plan.period}</small>}
+          </p>
+          <ul class="pricing-card__features" role="list">
+            {plan.features.map((feature) => (
+              <li class="pricing-card__feature">{feature}</li>
+            ))}
+          </ul>
+          <div class="pricing-card__cta">
+            {plan.ctaLabel && plan.ctaHref && (
+              <a class:list={[plan.featured ? 'cta' : 'btn']} href={plan.ctaHref}>
+                {plan.ctaLabel}
+                <span class="sr-only"> — {plan.name}</span>
+              </a>
+            )}
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}

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;
+---
+
+{
+  reviews.length > 0 ? (
+    <div
+      class:list={['reviews', toned && tone.className]}
+      style={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,84 @@
+---
+/**
+ * `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;
+}
+
+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);
+const tone = resolveTone(value.tone, value.color);
+const layout = text(value.layout);
+const width = WIDTHS[text(value.width)];
+const hasHead = Boolean(kicker || heading || sub);
+---
+
+{
+  (hasHead || body.length > 0) && (
+    <section
+      class:list={[
+        'section',
+        'region',
+        tone.style && tone.className,
+        tone.style && value.solid && 'tone--solid',
+        layout === 'split' && 'section--split',
+        layout === 'center' && 'section--center',
+      ]}
+      style={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);
+---
+
+{
+  stats.length > 0 && (
+    <ul
+      class:list={['stats', tone.className, tiles && 'stats--tiles']}
+      role="list"
+      style={joinStyle(tone.style)}
+    >
+      {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);
+---
+
+{
+  steps.length > 0 && (
+    <ol
+      class:list={['steps', tone.className, value.layout === 'row' && 'steps--row']}
+      style={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/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.',
+};

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

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { fieldName, resolveFields, safeAction, safeNext, slugName } from './form.ts';
+
+describe('field names', () => {
+  it('derives a safe name from the label', () => {
+    expect(slugName('Your full name!')).toBe('your_full_name');
+    expect(slugName('Café ☕')).toBe('cafe');
+  });
+  it('keeps clear of every name the conversion route treats specially', () => {
+    const taken = new Set<string>();
+    expect(fieldName('phone', 'Phone', 'tel', taken)).toBe('tel');
+    expect(fieldName('event', 'Event', 'text', taken)).toBe('event_field');
+    expect(fieldName('website', 'Website', 'text', taken)).toBe('website_field');
+    expect(fieldName('cf-turnstile-response', 'x', 'text', taken)).toBe('cf_turnstile_response');
+  });
+  it('de-duplicates and never starts with a digit', () => {
+    const taken = new Set<string>();
+    expect(fieldName('', 'Name', 'text', taken)).toBe('name');
+    expect(fieldName('', 'Name', 'text', taken)).toBe('name_2');
+    expect(fieldName('', '3 guests', 'text', new Set())).toBe('f_3_guests');
+  });
+});
+
+describe('resolveFields', () => {
+  it('drops unlabeled rows, coerces unknown kinds, and turns an empty select into text', () => {
+    const f = resolveFields([
+      { label: '' },
+      { label: 'A', type: 'bogus' },
+      { label: 'B', type: 'select', options: '' },
+      { label: 'C', type: 'select', options: 'x\n y \n' },
+    ]);
+    expect(f.map((x) => [x.name, x.type])).toEqual([
+      ['a', 'text'],
+      ['b', 'text'],
+      ['c', 'select'],
+    ]);
+    expect(f[2]!.options).toEqual(['x', 'y']);
+  });
+  it('caps the number of fields', () => {
+    const many = Array.from({ length: 40 }, (_, i) => ({ label: `F${i}` }));
+    expect(resolveFields(many)).toHaveLength(20);
+  });
+});
+
+describe('same-site paths only', () => {
+  it.each(['//evil.example', 'https://evil.example', '/a\\b', '/a?x=1', '/a#f', 'contact', ''])(
+    'refuses %j',
+    (v) => expect(safeNext(v)).toBeNull(),
+  );
+  it('accepts a plain path and defaults the action', () => {
+    expect(safeNext('/contact')).toBe('/contact');
+    expect(safeAction(undefined)).toBe('/api/track');
+    expect(safeAction('/api/enquiry')).toBe('/api/enquiry');
+  });
+});