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

package/src/astro/WidgetArea.astro

@@ -0,0 +1,91 @@
+---
+/**
+ * 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
+ * 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`
+ *   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
+ *   not exported, so an area that holds one is handed whole to the stock `<WidgetArea>`.
+ *
+ * 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 { headingTag, safeHref, text } from './blocks/value.ts';
+
+interface Props {
+  /** The area's `name` as set under Widgets. */
+  name: string;
+  /** Level of each widget's title; default `3`. */
+  level?: number | string;
+  class?: string;
+  id?: string;
+  style?: string;
+}
+
+const { name, level, class: className, id, style } = Astro.props;
+const area = name ? await getWidgetArea(name) : null;
+const widgets = area?.widgets ?? [];
+const delegated = widgets.some((w) => w.type === 'component');
+const Heading = headingTag(level, 3);
+const menus = Object.fromEntries(
+  await Promise.all(
+    widgets
+      .filter((w) => w.type === 'menu' && w.menuName)
+      .map(async (w) => [w.id, await getMenu(w.menuName!)] as const),
+  ),
+);
+const inner = { type: { 'vitops.widgetArea': Nothing } };
+---
+
+{
+  widgets.length > 0 && (
+    <div id={id} class:list={['widget-area', className]} style={style} data-widget-area={area?.name}>
+      {delegated ? (
+        <StockWidgetArea name={name} />
+      ) : (
+        <>
+        {widgets.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 && (
+              <div class="widget__content rhythm">
+                <PortableText value={widget.content} components={inner} />
+              </div>
+            )}
+            {widget.type === 'menu' && menus[widget.id] && (
+              <>
+                {text(widget.title) && <Heading class="widget__title font-heading">{widget.title}</Heading>}
+                <nav class="widget__menu" aria-label={text(widget.title) || area?.label}>
+                  <ul role="list">
+                    {menus[widget.id]!.items.map((item) => {
+                      const href = safeHref(item.url);
+                      return (
+                        href && (
+                          <li>
+                            <a class="link" href={href} title={item.titleAttr || undefined}>
+                              {item.label}
+                            </a>
+                          </li>
+                        )
+                      );
+                    })}
+                  </ul>
+                </nav>
+              </>
+            )}
+          </section>
+        ))}
+        </>
+      )}
+    </div>
+  )
+}

package/src/astro/blocks/Accordion.astro

@@ -21,11 +21,12 @@ const items = rows<Record<string, unknown>>(value.items)
   }))
   .filter((item) => item.summary);
 const group = value.exclusive ? `accordion-${value._key ?? 'group'}` : undefined;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   items.length > 0 && (
-    <div class="accordion">
+    <div {...rootAttrs(value, ['accordion'])}>
       {items.map((item) => (
         <details name={group} open={item.open}>
           <summary>{item.summary}</summary>

package/src/astro/blocks/ActionLink.astro

@@ -51,12 +51,13 @@ const classes = [variant, role ? `${variant}-${role}` : null, newTab ? 'link--ex
 // Only render when there is somewhere to go and something to read — a bare icon
 // with no label would be an unlabelled link.
 const renderable = Boolean(label && href);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   renderable && (
     <a
-      class={classes}
+      {...rootAttrs(value, [classes])}
       href={href}
       {...(newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
       {startIcon && (

package/src/astro/blocks/Badges.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * `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.
+ */
+import { resolveTone } from './tone.ts';
+import { resolveBlockValue, rows, safeHref, text } from './value.ts';
+import { rootAttrs } from './attrs.ts';
+
+interface Props {
+  /** Base URL of the sprite. Matches VitopsEmdashOptions.wcBase. */
+  spriteBase?: string;
+}
+
+interface Value {
+  items?: unknown;
+  variant?: string;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const { spriteBase = '/vitops' } = Astro.props as Props;
+const kind = text(value.variant) === 'tag' ? 'tag' : 'badge';
+const items = rows<Record<string, unknown>>(value.items)
+  .map((row) => {
+    const own = text(row.tone) || text(row.color);
+    const tone = own ? resolveTone(row.tone, row.color) : resolveTone(value.tone, value.color);
+    return {
+      label: text(row.label),
+      icon: /^[a-z0-9-]+$/.test(text(row.icon)) ? text(row.icon) : '',
+      href: safeHref(row.href),
+      tone,
+    };
+  })
+  .filter((item) => item.label);
+---
+
+  {
+    items.length > 0 && (
+      <ul {...rootAttrs(value, ['cluster'])} role="list">
+        {items.map((item) => {
+          const Tag = item.href ? 'a' : 'span';
+          return (
+            <li>
+              <Tag
+                class:list={[kind, item.tone.style && item.tone.className, item.href && 'link']}
+                href={item.href || undefined}
+                style={item.tone.style || undefined}
+              >
+                {item.icon && (
+                  <span class="icon" aria-hidden="true">
+                    <svg>
+                      <use href={`${spriteBase}/icons.svg#icon-${item.icon}`} />
+                    </svg>
+                  </span>
+                )}
+                {item.label}
+              </Tag>
+            </li>
+          );
+        })}
+      </ul>
+    )
+  }

package/src/astro/blocks/Banner.astro

@@ -10,10 +10,11 @@ interface Value {
 const value = resolveBlockValue<Value>(Astro.props);
 const { message, tone = 'info', dismissible = true } = value;
 const bannerClass = `banner bg-${tone}${dismissible ? ' banner--dismissible' : ''}`;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {message && dismissible && (
-  <wc-dismissable>
+  <wc-dismissable {...rootAttrs(value)}>
     <div class={bannerClass}>
       <div class="banner__content">{message}</div>
       <button class="banner__close" data-dismiss aria-label="Dismiss">✕</button>
@@ -21,7 +22,7 @@ const bannerClass = `banner bg-${tone}${dismissible ? ' banner--dismissible' : '
   </wc-dismissable>
 )}
 {message && !dismissible && (
-  <div class={bannerClass}>
+  <div {...rootAttrs(value, [bannerClass])}>
     <div class="banner__content">{message}</div>
   </div>
 )}

package/src/astro/blocks/Callout.astro

@@ -33,18 +33,13 @@ const secondaryHref = safeHref(value.secondaryHref);
 const hasActions = Boolean((primaryLabel && primaryHref) || (secondaryLabel && secondaryHref));
 const Heading = headingTag(value.level, 2);
 const tone = resolveTone(value.tone, value.color);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   (heading || body) && (
     <div
-      class:list={[
-        'callout',
-        tone.className,
-        value.solid && 'tone--solid',
-        value.align === 'center' && 'callout--center',
-      ]}
-      style={joinStyle(tone.style)}
+      {...rootAttrs(value, ['callout', tone.className, value.solid && 'tone--solid', value.align === 'center' && 'callout--center'], joinStyle(tone.style))}
     >
       <div class="callout__body">
         {heading && <Heading class="callout__title font-title">{heading}</Heading>}

package/src/astro/blocks/Cards.astro

@@ -50,11 +50,12 @@ const panel = value.variant === 'panel';
 const Heading = headingTag(value.level, 3);
 const tone = resolveTone(value.tone, value.color);
 const Grid = panel ? Subgrid : Cards;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   cards.length > 0 && (
-    <Grid style={`--subgrid-cols: ${columns}`}>
+    <Grid {...rootAttrs(value, [], `--subgrid-cols: ${columns}`)}>
       {cards.map((card) => (
         <li
           class:list={['card', 'subgrid-card', panel && tone.className]}

package/src/astro/blocks/Carousel.astro

@@ -39,6 +39,7 @@ const slides = fromRepeater.length > 0 ? fromRepeater : fromLegacy;
 // Two blocks with the same label would derive the same id; `_key` is unique per block.
 const id = value._key ? `carousel-${value._key.replace(/[^a-z0-9_-]/gi, '')}` : undefined;
 const autoplay = Number(value.autoplay) || 0;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
@@ -50,6 +51,7 @@ const autoplay = Number(value.autoplay) || 0;
       aspect={value.aspect || '16 / 9'}
       slides={slides}
       id={id}
+      {...rootAttrs(value)}
     />
   )
 }

package/src/astro/blocks/CopyButton.astro

@@ -9,14 +9,15 @@ interface Value {
 
 const value = resolveBlockValue<Value>(Astro.props);
 const { text, label = 'Copy', display = 'code-block' } = value;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {text && display === 'code-block' && (
-  <div class="copy">
+  <div {...rootAttrs(value, ['copy'])}>
     <pre><code>{text}</code></pre>
     <wc-copy value={text} label={label}>{label}</wc-copy>
   </div>
 )}
 {text && display === 'inline' && (
-  <wc-copy value={text} label={label}><code>{text}</code></wc-copy>
+  <wc-copy {...rootAttrs(value)} value={text} label={label}><code>{text}</code></wc-copy>
 )}

package/src/astro/blocks/Details.astro

@@ -9,10 +9,11 @@ interface Value {
 
 const value = resolveBlockValue<Value>(Astro.props);
 const { summary, body, open = false } = value;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {summary && (
-  <details open={open}>
+  <details open={open} {...rootAttrs(value)}>
     <summary>{summary}</summary>
     <p>{body}</p>
   </details>

package/src/astro/blocks/Embed.astro

@@ -33,11 +33,12 @@ const embed = resolveEmbed(value.provider, value.url);
 const category = CATEGORIES.has(text(value.category)) ? text(value.category) : 'marketing';
 // A ratio lands in a style attribute: digits, slash and spaces only.
 const ratio = /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/.test(text(value.ratio)) ? text(value.ratio) : null;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   title && embed && (
-    <div class="embed" style={ratio ? `--embed-ratio: ${ratio}` : undefined}>
+    <div {...rootAttrs(value, ['embed'], ratio ? `--embed-ratio: ${ratio}` : undefined)}>
       <iframe
         class="embed__frame"
         title={title}

package/src/astro/blocks/Entries.astro

@@ -25,6 +25,7 @@ const level = Number(headingTag(value.level, 3).slice(1)) as 2 | 3 | 4 | 5 | 6;
 const breakpoint = /^\d+(\.\d+)?(rem|em|px|ch)$/.test(text(value.breakpoint))
   ? text(value.breakpoint)
   : undefined;
+import { rootAttrs } from './attrs.ts';
 ---
 
-{entries.length > 0 && <Entries entries={entries} level={level} breakpoint={breakpoint} />}
+{entries.length > 0 && <Entries entries={entries} level={level} breakpoint={breakpoint} {...rootAttrs(value)} />}

package/src/astro/blocks/Form.astro

@@ -64,11 +64,12 @@ const tone = resolveTone(value.tone, value.color);
 const successTone = resolveTone('success', '');
 const errorTone = resolveTone('danger', '');
 const hasForm = fields.length > 0;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   hasForm && (
-    <div class:list={['form-block', 'rhythm', tone.className]} style={joinStyle(tone.style)}>
+    <div {...rootAttrs(value, ['form-block', 'rhythm', tone.className], joinStyle(tone.style))}>
       {heading && <Heading class="font-heading">{heading}</Heading>}
       {intro && <p>{intro}</p>}
 

package/src/astro/blocks/Gallery.astro

@@ -25,6 +25,7 @@ const images = rows<{ src?: unknown; alt?: unknown; caption?: unknown }>(value.i
     return src ? [{ src, alt: text(row.alt), ...(caption ? { caption } : {}) }] : [];
   },
 );
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
@@ -33,6 +34,7 @@ const images = rows<{ src?: unknown; alt?: unknown; caption?: unknown }>(value.i
       label={text(value.label) || 'Gallery'}
       images={images}
       id={id}
+      {...rootAttrs(value)}
       aspect={text(value.aspect) || undefined}
       loop={Boolean(value.loop)}
     />

package/src/astro/blocks/Hero.astro

@@ -57,11 +57,12 @@ const cards = rows<Record<string, unknown>>(value.cards)
     linkLabel: text(row.linkLabel) || 'Learn more',
   }))
   .filter((card) => card.title || card.body);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   (heading || body) && (
-    <section class={tone.style ? tone.className : undefined} style={joinStyle(tone.style)}>
+    <section {...rootAttrs(value, [tone.style && tone.className], joinStyle(tone.style))}>
       <div class={split ? 'split split-1-2' : 'centered'}>
         <div class="rhythm">
           {eyebrow && <p class="font-eyebrow">{eyebrow}</p>}

package/src/astro/blocks/ImageCompare.astro

@@ -15,10 +15,11 @@ const { beforeAlt = '', beforeLabel = 'Before', afterAlt = '', afterLabel = 'Aft
 // A `javascript:`/`data:` src is dropped, so the block renders nothing rather than that image.
 const before = safeHref(value.before);
 const after = safeHref(value.after);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {before && after && (
-  <wc-image-compare before-label={beforeLabel} after-label={afterLabel}>
+  <wc-image-compare {...rootAttrs(value)} before-label={beforeLabel} after-label={afterLabel}>
     <img slot="before" src={before} alt={beforeAlt} loading="lazy" />
     <img slot="after" src={after} alt={afterAlt} loading="lazy" />
   </wc-image-compare>

package/src/astro/blocks/Logos.astro

@@ -22,15 +22,15 @@ 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);
 const height = HEIGHTS[text(value.size)];
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   logos.length > 0 && (
     <ul
-      class:list={['logos', value.grayscale && 'logos--grayscale']}
+      {...rootAttrs(value, ['logos', value.grayscale && 'logos--grayscale'], height ? `--logos-height: ${height}` : undefined)}
       role="list"
       aria-label={label}
-      style={height ? `--logos-height: ${height}` : undefined}
     >
       {logos.map((logo) => (
         <li class="logos__item">

package/src/astro/blocks/Marquee.astro

@@ -21,11 +21,12 @@ const items = rows<Record<string, unknown>>(value.items)
     alt: text(row.alt),
   }))
   .filter((item) => item.text || item.image);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   items.length > 0 && (
-    <Marquee pauseOnHover={Boolean(value.pauseOnHover)} reverse={Boolean(value.reverse)}>
+    <Marquee pauseOnHover={Boolean(value.pauseOnHover)} reverse={Boolean(value.reverse)} {...rootAttrs(value)}>
       {items.map((item) =>
         item.image ? (
           <img src={item.image} alt={item.alt} loading="lazy" />

package/src/astro/blocks/Nav.astro

@@ -60,13 +60,13 @@ const tone = resolveTone(value.tone, value.color);
 const toned = Boolean(value.tone || value.color);
 const trimmed = trimDepth(items, depth);
 const current = Astro.url.pathname;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   items.length > 0 && (
     <div
-      class:list={['navblock', toned && tone.className]}
-      style={toned ? joinStyle(tone.style) : undefined}
+      {...rootAttrs(value, ['navblock', toned && tone.className], toned ? joinStyle(tone.style) : undefined)}
     >
       {heading && <Heading class="font-heading">{heading}</Heading>}
       {variant === 'sitenav' ? (

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

package/src/astro/blocks/Section.astro

@@ -30,6 +30,7 @@ interface Value {
   tone?: string;
   color?: string;
   solid?: boolean;
+  theme?: string;
 }
 
 const WIDTHS: Record<string, string> = {
@@ -44,24 +45,21 @@ 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);
+// `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
-      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]}>

package/src/astro/blocks/Stats.astro

@@ -35,14 +35,14 @@ const stats = rows<Record<string, unknown>>(value.stats)
 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}>

package/src/astro/blocks/Steps.astro

@@ -23,13 +23,13 @@ const steps = rows<Record<string, unknown>>(value.steps)
   .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">

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',
+    });
+  });
+});