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

package/src/astro/blocks/Pricing.astro

@@ -28,14 +28,14 @@ const plans = rows<Record<string, unknown>>(value.plans)
   .filter((plan) => plan.name || plan.price);
 const Heading = headingTag(value.level, 3);
 const columns = Math.min(4, Math.max(1, plans.length));
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   plans.length > 0 && (
     <ul
-      class="pricing-grid"
+      {...rootAttrs(value, ['pricing-grid'], `--pricing-columns: ${columns}; --pricing-card-rows: 4`)}
       role="list"
-      style={`--pricing-columns: ${columns}; --pricing-card-rows: 4`}
     >
       {plans.map((plan) => (
         <li class:list={['pricing-card', plan.featured && 'pricing-card--featured']}>

package/src/astro/blocks/Reviews.astro

@@ -75,13 +75,13 @@ 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
-      class:list={['reviews', toned && tone.className]}
-      style={toned ? joinStyle(tone.style) : undefined}
+      {...rootAttrs(value, ['reviews', toned && tone.className], toned ? joinStyle(tone.style) : undefined)}
     >
       {layout === 'carousel' ? (
         <Carousel label={label}>
@@ -113,7 +113,7 @@ const dev = import.meta.env.DEV;
   ) : (
     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;
@@ -30,6 +35,7 @@ interface Value {
   tone?: string;
   color?: string;
   solid?: boolean;
+  theme?: string;
 }
 
 const WIDTHS: Record<string, string> = {
@@ -43,25 +49,22 @@ 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 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);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   (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)}
+      {...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]}>
@@ -75,6 +78,7 @@ const hasHead = Boolean(kicker || heading || sub);
           {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,22 +30,23 @@ 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';
 const animate = value.animate !== false;
 const tone = resolveTone(value.tone, value.color);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   stats.length > 0 && (
     <ul
-      class:list={['stats', tone.className, tiles && 'stats--tiles']}
+      {...rootAttrs(value, ['stats', tone.className, tiles && 'stats--tiles'], joinStyle(tone.style))}
       role="list"
-      style={joinStyle(tone.style)}
     >
       {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,20 +19,20 @@ 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);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   steps.length > 0 && (
     <ol
-      class:list={['steps', tone.className, value.layout === 'row' && 'steps--row']}
-      style={joinStyle(tone.style)}
+      {...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

@@ -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,74 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { anchorId, blockAttrs, classTokens, customProperties, rootAttrs } 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',
+    });
+  });
+});
+
+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

@@ -0,0 +1,116 @@
+/**
+ * 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.
+ */
+
+import { resolveTheme } from './tone.ts';
+
+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);
+  // `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.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, 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),

package/src/astro/blocks/nav.ts

@@ -1,5 +1,5 @@
 /**
- * Pure decisions behind the `vitops.nav` block, kept out of `Nav.astro` so they are asserted in
+ * Pure decisions behind the `vitops_nav` block, kept out of `Nav.astro` so they are asserted in
  * `nav.test.ts` without rendering (the split `sitenav.ts` makes for `<SiteNav>`). The menu-tree
  * helpers themselves — depth trimming, `aria-current` — are `@getvitops/astro`'s, not copied.
  */