@getvitops/emdash 2.0.0-alpha.1 → 2.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/emdash",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "description": "EmDash CMS native plugin for the Vitops design system — Portable Text block types editors can insert from the admin, rendered with the design-system web components and CSS framework.",
   "homepage": "https://docs.vitops.ca",
   "bugs": "https://github.com/getvitops/design-system/issues",
@@ -31,15 +31,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@getvitops/generator": "8.3.0-alpha.1",
-    "@getvitops/utils": "8.3.0-alpha.1"
+    "@getvitops/generator": "8.3.0-alpha.2",
+    "@getvitops/utils": "8.3.0-alpha.2"
   },
   "devDependencies": {
     "@astrojs/cloudflare": "^14.0.0",
     "@astrojs/react": "^7.0.0",
     "@emdash-cms/cloudflare": "^1.4.0",
-    "@getvitops/astro": "8.3.0-alpha.1",
-    "@getvitops/core": "8.3.0-alpha.1",
+    "@getvitops/astro": "8.3.0-alpha.2",
+    "@getvitops/core": "8.3.0-alpha.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "astro": "^7.4.4",

package/src/astro/WidgetArea.astro

@@ -2,11 +2,11 @@
 /**
  * A widget area rendered in the framework's vocabulary, in place of `emdash/ui`'s
  * `<WidgetArea>`: titles at a chosen heading level (the stock one is always `h3`), a menu as a
- * labelled `<nav>` of `.link`s, content through `<PortableText>` so every `vitops.*` block
+ * labelled `<nav>` of `.link`s, content through `<PortableText>` so every `vitops_*` block
  * works inside it. Renders nothing when the area is missing or empty.
  *
  * Two limits, both deliberate:
- * - **No widget area inside a widget area.** A content widget that held a `vitops.widgetArea`
+ * - **No widget area inside a widget area.** A content widget that held a `vitops_widgetArea`
  *   block could name its own area and recurse, and a request-scoped depth counter cannot be kept
  *   honest while Astro streams children, so the block is simply not rendered in here.
  * - **`component` widgets** (`core:recent-posts`, …) are EmDash's closed map and its renderer is
@@ -15,9 +15,13 @@
  * Prerendered pages bake the area at build time: an edit in the admin shows after the next deploy.
  */
 import { getMenu, getWidgetArea } from 'emdash';
-import { PortableText, WidgetArea as StockWidgetArea } from 'emdash/ui';
 import Nothing from './Nothing.astro';
+import { unrenderedTypes } from './blocks/unrendered.ts';
+import { joinStyle, resolveTheme } from './blocks/tone.ts';
 import { headingTag, safeHref, text } from './blocks/value.ts';
+// Lazy for the same reason as `blocks/Section.astro`: a static `emdash/ui` import makes a cycle
+// through `virtual:emdash/block-components` and empties the plugin block map in a static build.
+const { PortableText, WidgetArea: StockWidgetArea } = await import('emdash/ui');
 
 interface Props {
   /** The area's `name` as set under Widgets. */
@@ -27,9 +31,12 @@ interface Props {
   class?: string;
   id?: string;
   style?: string;
+  /** A backdrop for the area, from the site's colour roles: `surface`, `brand-primary:solid`, … */
+  theme?: string;
 }
 
-const { name, level, class: className, id, style } = Astro.props;
+const { name, level, class: className, id, style, theme } = Astro.props;
+const themed = resolveTheme(theme);
 const area = name ? await getWidgetArea(name) : null;
 const widgets = area?.widgets ?? [];
 const delegated = widgets.some((w) => w.type === 'component');
@@ -41,22 +48,36 @@ const menus = Object.fromEntries(
       .map(async (w) => [w.id, await getMenu(w.menuName!)] as const),
   ),
 );
-const inner = { type: { 'vitops.widgetArea': Nothing } };
+/** A content widget with no text and no blocks is what the admin creates by default; showing its title alone is noise. */
+const hasBody = (content: unknown) =>
+  Array.isArray(content) &&
+  content.some(
+    (b: any) =>
+      b?._type !== 'block' ||
+      (Array.isArray(b.children) && b.children.some((c: any) => text(c?.text).trim())),
+  );
+const shown = widgets.filter(
+  (w) => w.type !== 'content' || hasBody(w.content),
+);
+const missing = [
+  ...new Set((await Promise.all(shown.map((w) => unrenderedTypes(w.content)))).flat()),
+];
+const inner = { type: { 'vitops_widgetArea': Nothing } };
 ---
 
 {
-  widgets.length > 0 && (
-    <div id={id} class:list={['widget-area', className]} style={style} data-widget-area={area?.name}>
+  shown.length > 0 && (
+    <div id={id} class:list={['widget-area', themed?.className, className]} style={joinStyle(themed?.style, style)} data-widget-area={area?.name}>
       {delegated ? (
         <StockWidgetArea name={name} />
       ) : (
         <>
-        {widgets.map((widget) => (
+        {shown.map((widget) => (
           <section class="widget" data-widget-type={widget.type}>
             {text(widget.title) && widget.type !== 'menu' && (
               <Heading class="widget__title font-heading">{widget.title}</Heading>
             )}
-            {widget.type === 'content' && widget.content && (
+            {widget.type === 'content' && (
               <div class="widget__content rhythm">
                 <PortableText value={widget.content} components={inner} />
               </div>
@@ -84,6 +105,7 @@ const inner = { type: { 'vitops.widgetArea': Nothing } };
             )}
           </section>
         ))}
+        {missing.map((type) => <template data-vitops-unrendered={type} />)}
         </>
       )}
     </div>

package/src/astro/blocks/Badges.astro

@@ -1,6 +1,6 @@
 ---
 /**
- * `vitops.badges` — a row of short labels on the framework's `.badge` (static) or `.tag`
+ * `vitops_badges` — a row of short labels on the framework's `.badge` (static) or `.tag`
  * pattern. Each row may carry its own tone, falling back to the block's, which is what lets
  * one block show a pine label beside an amber one. An icon is child order, not a modifier, and
  * a row with a `href` becomes a link.

package/src/astro/blocks/Callout.astro

@@ -1,6 +1,6 @@
 ---
 /**
- * A call-to-action band on the framework's `.callout` pattern. Not `vitops.banner`: that is
+ * A call-to-action band on the framework's `.callout` pattern. Not `vitops_banner`: that is
  * a dismissible announcement, this is content that stays. The heading is a real heading at
  * the editor's `level`; colour is the shared tone convention, tinted by default and filled
  * with the role's solid when `solid` is on.

package/src/astro/blocks/Cards.astro

@@ -19,7 +19,7 @@
 import Cards from '@getvitops/astro/components/Cards.astro';
 import Subgrid from '@getvitops/astro/components/Subgrid.astro';
 import RichText from './RichText.astro';
-import { joinStyle, resolveTone } from './tone.ts';
+import { joinStyle, resolveTone, rowTone } from './tone.ts';
 import { headingTag, lines, resolveBlockValue, rows, safeHref, text } from './value.ts';
 
 interface Value {
@@ -43,6 +43,7 @@ const cards = rows<Record<string, unknown>>(value.cards)
     checklist: lines(row.checklist),
     ctaLabel: text(row.ctaLabel),
     ctaHref: safeHref(row.ctaHref),
+    style: rowTone(row),
   }))
   .filter((card) => card.title || card.body || card.image);
 const columns = Math.min(4, Math.max(1, Math.round(Number(value.columns) || 3)));
@@ -59,10 +60,10 @@ import { rootAttrs } from './attrs.ts';
       {cards.map((card) => (
         <li
           class:list={['card', 'subgrid-card', panel && tone.className]}
-          style={panel ? joinStyle(tone.style) : undefined}
+          style={panel ? joinStyle(tone.style, card.style) : card.style}
         >
           {card.image && <img src={card.image} alt={card.imageAlt} loading="lazy" />}
-          {card.title && <Heading class="font-heading">{card.title}</Heading>}
+          {card.title && <Heading class="card__title font-heading">{card.title}</Heading>}
           {card.body && (
             <p>
               <RichText text={card.body} />

package/src/astro/blocks/Form.astro

@@ -123,6 +123,24 @@ import { rootAttrs } from './attrs.ts';
                 </p>
               )}
             </div>
+          ) : f.type === 'checkboxes' ? (
+            <fieldset class="form-group" aria-describedby={describedby}>
+              <legend class="form-group__label">{f.label}</legend>
+              {f.options.map((o) => (
+                <label class="custom-check">
+                  <input type="checkbox" name={f.name} value={o} />
+                  <span class="custom-check__box">
+                    <span class="custom-check__indicator custom-check__indicator--check" />
+                  </span>
+                  <span>{o}</span>
+                </label>
+              ))}
+              {f.help && (
+                <p id={`${f.id}-help`} class="form-group__helper">
+                  {f.help}
+                </p>
+              )}
+            </fieldset>
           ) : (
             <div class="form-group">
               <label class="form-group__label" for={f.id}>

package/src/astro/blocks/Hero.astro

@@ -8,10 +8,10 @@
  * Flat fields, because a block cannot contain other blocks.
  */
 import RichText from './RichText.astro';
-import { joinStyle, resolveTone } from './tone.ts';
+import { joinStyle, resolveTone, rowTone } from './tone.ts';
 import {
   accentRuns,
-  headingTag,
+  outlineTag,
   resolveBlockValue,
   rows,
   safeHref,
@@ -39,7 +39,9 @@ const value = resolveBlockValue<Value>(Astro.props);
 const eyebrow = text(value.eyebrow);
 const heading = text(value.heading);
 const headingRuns = accentRuns(heading);
-const Heading = headingTag(value.level, 2);
+const Heading = outlineTag(value.level, 1);
+// A hero titled `h1` puts its option cards one level down, at `h2`.
+const CardHeading = Heading === 'h1' ? 'h2' : 'h3';
 const body = text(value.body);
 const primaryLabel = text(value.primaryLabel);
 const primaryHref = safeHref(value.primaryHref);
@@ -55,6 +57,10 @@ const cards = rows<Record<string, unknown>>(value.cards)
     body: text(row.body),
     href: safeHref(row.href),
     linkLabel: text(row.linkLabel) || 'Learn more',
+    eyebrow: text(row.eyebrow),
+    ctaLabel: text(row.ctaLabel),
+    ctaHref: safeHref(row.ctaHref),
+    style: rowTone(row),
   }))
   .filter((card) => card.title || card.body);
 import { rootAttrs } from './attrs.ts';
@@ -94,18 +100,27 @@ import { rootAttrs } from './attrs.ts';
       {cards.length > 0 && (
         <ul class="subgrid centered" role="list" style={`--subgrid-cols: ${Math.min(4, cards.length)}`}>
           {cards.map((card) => (
-            <li class="card subgrid-card">
-              {card.title && <h3 class="font-heading">{card.title}</h3>}
+            <li class:list={['card', 'subgrid-card', card.style && 'tone']} style={card.style}>
+              {card.eyebrow && <p class="font-eyebrow">{card.eyebrow}</p>}
+              {card.title && <CardHeading class="font-heading">{card.title}</CardHeading>}
               {card.body && (
                 <p>
                   <RichText text={card.body} />
                 </p>
               )}
-              {card.href && (
-                <a class="link stretched-link" href={card.href}>
-                  {card.linkLabel}
-                  {card.title && <span class="sr-only">: {card.title}</span>}
-                </a>
+              {card.ctaLabel && card.ctaHref ? (
+                <p class="subgrid-card__footer">
+                  <a class="cta" href={card.ctaHref}>
+                    {card.ctaLabel}
+                  </a>
+                </p>
+              ) : (
+                card.href && (
+                  <a class="link stretched-link" href={card.href}>
+                    {card.linkLabel}
+                    {card.title && <span class="sr-only">: {card.title}</span>}
+                  </a>
+                )
               )}
             </li>
           ))}

package/src/astro/blocks/Logos.astro

@@ -1,9 +1,10 @@
 ---
 /**
- * A still row of partner/client marks on the framework's `.logos` pattern. `vitops.marquee`
+ * A still row of partner/client marks on the framework's `.logos` pattern. `vitops_marquee`
  * is the scrolling version; this one holds still. A list, so the count is announced, and
  * each mark is an image with the editor's name as its alt text — a logo with no alt is a
- * link or a fact the page silently drops.
+ * link or a fact the page silently drops. An entry with a name and no image renders the name as
+ * text in the same list (`.logos__name`), for partners who have no wordmark.
  */
 import { resolveBlockValue, rows, safeHref, text } from './value.ts';
 
@@ -20,7 +21,7 @@ const value = resolveBlockValue<Value>(Astro.props);
 const label = text(value.label) || 'Partners';
 const logos = rows<Record<string, unknown>>(value.logos)
   .map((row) => ({ image: safeHref(row.image), alt: text(row.alt), href: safeHref(row.href) }))
-  .filter((logo) => logo.image);
+  .filter((logo) => logo.image || logo.alt);
 const height = HEIGHTS[text(value.size)];
 import { rootAttrs } from './attrs.ts';
 ---
@@ -36,10 +37,12 @@ import { rootAttrs } from './attrs.ts';
         <li class="logos__item">
           {logo.href ? (
             <a href={logo.href}>
-              <img src={logo.image} alt={logo.alt} loading="lazy" />
+              {logo.image ? <img src={logo.image} alt={logo.alt} loading="lazy" /> : <span class="logos__name font-heading">{logo.alt}</span>}
             </a>
-          ) : (
+          ) : logo.image ? (
             <img src={logo.image} alt={logo.alt} loading="lazy" />
+          ) : (
+            <span class="logos__name font-heading">{logo.alt}</span>
           )}
         </li>
       ))}

package/src/astro/blocks/NavTree.astro

@@ -1,6 +1,6 @@
 ---
 /**
- * One `<ul class="navlist">` level of `vitops.nav`, recursing for sub-links. Internal — import
+ * 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).

package/src/astro/blocks/Reviews.astro

@@ -113,7 +113,7 @@ import { rootAttrs } from './attrs.ts';
   ) : (
     dev && (
       <p class="reviews__empty" role="note">
-        vitops.reviews: no reviews to show
+        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/Section.astro

@@ -11,13 +11,18 @@
  * 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
+ * `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';
+// Imported lazily on purpose. `emdash/ui` statically imports `virtual:emdash/block-components`,
+// which is this package's `index.ts`, which imports this file: a static import here is a cycle
+// that evaluates the virtual module before `blockComponents` exists, so the static build ships
+// an empty plugin block map and drops every `vitops_*` block in a section body.
+const { PortableText } = await import('emdash/ui');
+import { unrenderedTypes } from './unrendered.ts';
 import { joinStyle, resolveTone } from './tone.ts';
-import { headingTag, resolveBlockValue, text } from './value.ts';
+import { outlineTag, resolveBlockValue, text } from './value.ts';
 
 interface Value {
   kicker?: string;
@@ -44,12 +49,12 @@ 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 Heading = outlineTag(value.level, 2);
+const missing = await unrenderedTypes(body);
+// `theme` (every block's backdrop) is applied by `rootAttrs`, and wins over the older
+// `tone`/`color`/`solid` fields, which stay for content that already uses them.
+const tone = resolveTone(value.tone, value.color);
+const solid = Boolean(value.solid);
 const layout = text(value.layout);
 const width = WIDTHS[text(value.width)];
 const hasHead = Boolean(kicker || heading || sub);
@@ -73,6 +78,7 @@ import { rootAttrs } from './attrs.ts';
           {body.length > 0 && (
             <div class="section__body">
               <PortableText value={body} />
+              {missing.map((type) => <template data-vitops-unrendered={type} />)}
             </div>
           )}
         </div>

package/src/astro/blocks/Stats.astro

@@ -9,7 +9,7 @@
  * `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 { resolveTone, joinStyle, rowTone } from './tone.ts';
 import { resolveBlockValue, rows, text } from './value.ts';
 
 interface Value {
@@ -30,6 +30,7 @@ const stats = rows<Record<string, unknown>>(value.stats)
     group: text(row.group),
     delta: text(row.delta),
     state: STATES.has(text(row.state)) ? text(row.state) : undefined,
+    style: rowTone(row),
   }))
   .filter((stat) => stat.value);
 const tiles = value.variant === 'tiles';
@@ -45,7 +46,7 @@ import { rootAttrs } from './attrs.ts';
       role="list"
     >
       {stats.map((stat) => (
-        <li class="stats__item" data-state={stat.state}>
+        <li class="stats__item" data-state={stat.state} style={stat.style}>
           {tiles && stat.group && <p class="stats__group font-eyebrow">{stat.group}</p>}
           <p class="stats__figure font-display">
             <Counter value={stat.value} enhance={animate} />

package/src/astro/blocks/Steps.astro

@@ -6,7 +6,7 @@
  * convention — see `tone.ts`.
  */
 import RichText from './RichText.astro';
-import { resolveTone, joinStyle } from './tone.ts';
+import { resolveTone, joinStyle, rowTone } from './tone.ts';
 import { headingTag, resolveBlockValue, rows, text } from './value.ts';
 
 interface Value {
@@ -19,7 +19,7 @@ interface Value {
 
 const value = resolveBlockValue<Value>(Astro.props);
 const steps = rows<Record<string, unknown>>(value.steps)
-  .map((row) => ({ title: text(row.title), text: text(row.text) }))
+  .map((row) => ({ title: text(row.title), text: text(row.text), style: rowTone(row) }))
   .filter((step) => step.title || step.text);
 const Heading = headingTag(value.level, 3);
 const tone = resolveTone(value.tone, value.color);
@@ -32,7 +32,7 @@ import { rootAttrs } from './attrs.ts';
       {...rootAttrs(value, ['steps', tone.className, value.layout === 'row' && 'steps--row'], joinStyle(tone.style))}
     >
       {steps.map((step) => (
-        <li class="steps__item">
+        <li class="steps__item" style={step.style}>
           <div class="steps__body">
             {step.title && <Heading class="steps__title font-heading">{step.title}</Heading>}
             {step.text && (

package/src/astro/blocks/WidgetArea.astro

@@ -1,6 +1,6 @@
 ---
 /**
- * `vitops.widgetArea` — a synced region inside page content: the area is defined once under
+ * `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.

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vite-plus/test';
-import { anchorId, blockAttrs, classTokens, customProperties } from './attrs.ts';
+import { anchorId, blockAttrs, classTokens, customProperties, rootAttrs } from './attrs.ts';
 
 describe('anchorId', () => {
   it('slugifies and accepts a clean id', () => {
@@ -54,3 +54,21 @@ describe('blockAttrs', () => {
     });
   });
 });
+
+describe('theme on every block', () => {
+  it('adds the tinted classes and --tone-* properties to the root', () => {
+    const a = rootAttrs({ theme: 'surface' }, ['callout']);
+    expect(a.class).toBe('callout tone');
+    expect(a.style).toContain('--tone-bg: var(--color-bg-surface-muted');
+  });
+  it('fills with the role solid and its computed text for `<role>:solid`', () => {
+    const a = rootAttrs({ theme: 'brand-primary:solid' }, ['hero']);
+    expect(a.class).toBe('hero tone tone--solid');
+    expect(a.style).toContain('--tone-on-solid: var(--color-text-on-brand-primary');
+  });
+  it("replaces a block's own tone classes rather than doubling them, and is inert for none", () => {
+    expect(rootAttrs({ theme: 'info' }, ['x', 'tone', 'tone--solid']).class).toBe('x tone');
+    expect(rootAttrs({ theme: 'none' }, ['x', 'tone']).class).toBe('x tone');
+    expect(rootAttrs({ theme: 'bad role!' }, ['x']).class).toBe('x');
+  });
+});

package/src/astro/blocks/attrs.ts

@@ -15,6 +15,8 @@
  * `css` and `bricks` formats every framework class ships, so the caveat does not apply.
  */
 
+import { resolveTheme } from './tone.ts';
+
 export interface BlockAttrs {
   id?: string;
   class?: string;
@@ -94,11 +96,21 @@ export function rootAttrs(
   ownStyle?: string,
 ): BlockAttrs {
   const user = blockAttrs(value);
+  // `theme` is the block's backdrop: classes and `--tone-*` properties on its own root, after the
+  // block's own tone so an explicit theme wins, and before the editor's `style` so that wins over it.
+  const theme = resolveTheme((value as Record<string, unknown> | undefined)?.theme);
   const out: BlockAttrs = {};
   if (user.id) out.id = user.id;
-  const cls = [...own, user.id && 'block-anchor', user.class].filter(Boolean).join(' ');
+  const cls = [
+    ...own.filter((c) => !theme || (c !== 'tone' && c !== 'tone--solid')),
+    theme?.className,
+    user.id && 'block-anchor',
+    user.class,
+  ]
+    .filter(Boolean)
+    .join(' ');
   if (cls) out.class = cls;
-  const style = [ownStyle, user.style].filter(Boolean).join('; ');
+  const style = [ownStyle, theme?.style, user.style].filter(Boolean).join('; ');
   if (style) out.style = style;
   return out;
 }

package/src/astro/blocks/cycle.container.test.ts

@@ -0,0 +1,73 @@
+/**
+ * Import-order regression: `@getvitops/emdash/astro` before `emdash/ui`.
+ *
+ * `emdash/ui` reads `virtual:emdash/block-components`, which in a real build re-exports this
+ * package's `blockComponents`. The entry used to import `Section.astro`, which imported
+ * `emdash/ui` at module load, closing a cycle: with the entry imported first, the virtual module
+ * evaluated while `blockComponents` was still undefined and every `vitops.*` block inside a
+ * `vitops_section` body was dropped from the prerendered HTML. The build still passed.
+ *
+ * This mock has the real shape (it reads the entry's export), and the test imports the entry
+ * first, which is the order that used to break.
+ */
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+import { describe, expect, it, vi } from 'vite-plus/test';
+
+vi.mock('virtual:emdash/block-components', async () => {
+  const entry = await import('../index.ts');
+  return { pluginBlockComponents: { ...entry.blockComponents } };
+});
+vi.mock('virtual:emdash/config', () => ({ default: {} }));
+vi.mock('virtual:getvitops/reviews', () => ({ default: { locations: {} } }));
+vi.mock('virtual:getvitops/icons', () => ({
+  default: {
+    engine: 'sprite',
+    brand: 'simple-icons',
+    ui: 'lucide',
+    overrides: {},
+    weight: null,
+    root: '',
+  },
+}));
+
+type Component = Parameters<AstroContainer['renderToString']>[0];
+
+describe('import order', () => {
+  it('a vitops_section body keeps its vitops.* blocks when the entry is imported first', async () => {
+    const entry = await import('../index.ts');
+    const container = await AstroContainer.create();
+    const html = await container.renderToString(
+      entry.blockTypeComponents.vitops_section as unknown as Component,
+      {
+        props: {
+          value: {
+            heading: 'Services',
+            body: [
+              {
+                _type: 'vitops_cards',
+                _key: 'c',
+                cards: [{ title: 'Managed IT', body: 'We run it.' }],
+              },
+            ],
+          },
+        },
+      },
+    );
+    expect(html).toContain('Managed IT');
+    expect(html).not.toContain('data-vitops-unrendered');
+  }, 60_000);
+
+  it('marks a body block with no renderer so check-prerender can fail the build', async () => {
+    const entry = await import('../index.ts');
+    const container = await AstroContainer.create();
+    const html = await container.renderToString(
+      entry.blockTypeComponents.vitops_section as unknown as Component,
+      {
+        props: {
+          value: { heading: 'Services', body: [{ _type: 'vitops_nope', _key: 'x' }] },
+        },
+      },
+    );
+    expect(html).toContain('data-vitops-unrendered="vitops_nope"');
+  }, 60_000);
+});

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

@@ -1,9 +1,9 @@
 /**
- * A realistic saved `vitops.form` block, for tests and the e2e fixtures: the fields a small
+ * 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',
+  _type: 'vitops_form',
   _key: 'contact',
   heading: 'Get in touch',
   level: '2',
@@ -25,6 +25,12 @@ export const SAMPLE_FORM_BLOCK = {
       required: false,
       options: 'Maintenance\nDesign\nInstallation',
     },
+    {
+      label: 'Interested in',
+      name: 'interests',
+      type: 'checkboxes',
+      options: 'Managed IT\nWeb design\nSEO',
+    },
     { label: 'Message', name: 'message', type: 'textarea', required: true },
     { label: 'Add me to your newsletter', name: 'newsletter', type: 'checkbox' },
   ],

package/src/astro/blocks/form.ts

@@ -1,5 +1,5 @@
 /**
- * Pure decisions for the `vitops.form` block: which of an editor's field rows become real
+ * Pure decisions for the `vitops_form` block: which of an editor's field rows become real
  * controls, and under what submitted names.
  *
  * Names matter more than they look. `createConversionRoute` (`@getvitops/astro/routes`) is
@@ -12,7 +12,15 @@
  * that is where it goes.
  */
 
-export const FIELD_TYPES = ['text', 'email', 'tel', 'textarea', 'select', 'checkbox'] as const;
+export const FIELD_TYPES = [
+  'text',
+  'email',
+  'tel',
+  'textarea',
+  'select',
+  'checkbox',
+  'checkboxes',
+] as const;
 export type FieldType = (typeof FIELD_TYPES)[number];
 
 /** Names the route treats specially. A field must never submit under one of these. */
@@ -114,14 +122,15 @@ export function resolveFields(rows: Record<string, unknown>[]): FormField[] {
       : 'text';
     const name = fieldName(row['name'], label, type, taken);
     const options =
-      type === 'select'
+      type === 'select' || type === 'checkboxes'
         ? str(row['options'])
             .split('\n')
             .map((o) => o.trim())
             .filter(Boolean)
         : [];
     // A select with nothing to choose is unusable; render it as free text instead.
-    const effective: FieldType = type === 'select' && options.length === 0 ? 'text' : type;
+    const effective: FieldType =
+      (type === 'select' || type === 'checkboxes') && options.length === 0 ? 'text' : type;
     out.push({
       name,
       id: `form-${out.length + 1}-${name}`,
@@ -129,7 +138,9 @@ export function resolveFields(rows: Record<string, unknown>[]): FormField[] {
       type: effective,
       required: row['required'] === true,
       placeholder:
-        effective === 'checkbox' || effective === 'select' ? '' : str(row['placeholder']),
+        effective === 'checkbox' || effective === 'select' || effective === 'checkboxes'
+          ? ''
+          : str(row['placeholder']),
       help: str(row['help']),
       options,
       autocomplete: autocompleteFor(name, effective),