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

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

@@ -0,0 +1,570 @@
+/**
+ * Real-render tests for the block adapters, through Astro's container API: HTML in, HTML out.
+ *
+ * `blocks.test.ts` reads each `.astro` file as text, which proves a field name is mentioned
+ * but never that the component renders — a prop destructured wrong or a heading level that
+ * never reaches the tag passes it. These assert the markup an editor's saved block produces.
+ *
+ * Props arrive as `{ node }` here, the shape `astro-portabletext` passes (see `value.ts`).
+ */
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+import { describe, expect, it, vi } from 'vite-plus/test';
+import Callout from './Callout.astro';
+import Cards from './Cards.astro';
+import Embed from './Embed.astro';
+import Entries from './Entries.astro';
+import Form from './Form.astro';
+import head from './head.stub.ts';
+import { SAMPLE_FORM_BLOCK } from './form.sample.ts';
+import Hero from './Hero.astro';
+import Logos from './Logos.astro';
+import Pricing from './Pricing.astro';
+import Stats from './Stats.astro';
+import Steps from './Steps.astro';
+
+// `.astro` imports are typed as plain prop functions here (see `astro-modules.d.ts`), which the
+// container's `AstroComponentFactory` parameter does not accept; the cast is the whole bridge.
+type Component = Parameters<AstroContainer['renderToString']>[0];
+async function render(component: unknown, node: object) {
+  const container = await AstroContainer.create();
+  return container.renderToString(component as Component, { props: { node } });
+}
+
+describe('vitops.cards', () => {
+  const cards = [
+    {
+      title: 'Cut costs',
+      body: 'you pay [less](/pricing) for what you use',
+      href: '/a',
+      linkLabel: 'More',
+    },
+  ];
+
+  it('renders the title as a heading at the chosen level (U19), not a paragraph', async () => {
+    const html = await render(Cards, { cards, level: '4' });
+    expect(html).toContain('<h4 class="font-heading">Cut costs</h4>');
+    expect(html).not.toContain('<p class="font-heading"');
+  });
+
+  it('keeps an inline link in the body and stays a <wc-cards> grid', async () => {
+    const html = await render(Cards, { cards });
+    expect(html).toContain('<a class="link" href="/pricing">less</a>');
+    expect(html).toContain('<wc-cards');
+    expect(html).toContain('class="link stretched-link"');
+  });
+
+  it('panel variant: tinted by tone through custom properties, with checklist and button', async () => {
+    const html = await render(Cards, {
+      variant: 'panel',
+      tone: 'brand-primary',
+      cards: [{ title: 'Pillar', checklist: 'one\ntwo', ctaLabel: 'Go', ctaHref: '/go' }],
+    });
+    expect(html).toContain('class="card subgrid-card tone"');
+    expect(html).toContain('--tone-bg: var(--color-bg-brand-primary-muted');
+    expect(html).toContain('<li>one</li>');
+    expect(html).toContain('class="cta" href="/go"');
+    // A panel holds its own button, so it is not a click-forwarding <wc-cards>.
+    expect(html).not.toContain('<wc-cards');
+  });
+
+  it('drops an unsafe link instead of rendering it', async () => {
+    const html = await render(Cards, { cards: [{ title: 'x', body: '[bad](javascript:alert)' }] });
+    expect(html).not.toContain('javascript:');
+  });
+});
+
+describe('vitops.hero', () => {
+  it('accents starred words and honours the heading level', async () => {
+    const html = await render(Hero, { heading: 'Two services. *One team.*', level: '3' });
+    expect(html).toContain(
+      '<h3 class="font-display">Two services. <em class="accent">One team.</em></h3>',
+    );
+  });
+
+  it('renders the optional cards slot', async () => {
+    const html = await render(Hero, { heading: 'Hi', cards: [{ title: 'A', body: 'b' }] });
+    expect(html).toContain('<h3 class="font-heading">A</h3>');
+  });
+});
+
+describe('vitops.logos', () => {
+  it('is a labelled list of images with alt text', async () => {
+    const html = await render(Logos, {
+      label: 'Key partners',
+      grayscale: true,
+      logos: [
+        { image: '/a.svg', alt: 'Acme', href: '/acme' },
+        { image: '/b.svg', alt: 'Beta' },
+      ],
+    });
+    expect(html).toContain('aria-label="Key partners"');
+    expect(html).toContain('logos--grayscale');
+    expect(html).toContain('alt="Acme"');
+    expect(html).toContain('<a href="/acme">');
+  });
+
+  it('renders nothing with no logos', async () => {
+    expect((await render(Logos, { logos: [] })).trim()).toBe('');
+  });
+});
+
+describe('vitops.steps', () => {
+  it('is an ordered list with real headings and a tone', async () => {
+    const html = await render(Steps, {
+      steps: [{ title: 'Call', text: 'We talk' }, { title: 'Build' }],
+      level: '4',
+      tone: 'success',
+      layout: 'row',
+    });
+    expect(html).toContain('<ol');
+    expect(html).toContain('steps--row');
+    expect(html).toContain('<h4 class="steps__title font-heading">Call</h4>');
+    expect(html).toContain('--tone-solid: var(--color-bg-success-solid');
+  });
+});
+
+describe('vitops.stats', () => {
+  const stats = [
+    { value: '82%', label: 'Faster', group: 'Ops', delta: '+3 this week', state: 'up' },
+  ];
+
+  it('renders each figure through <wc-counter>', async () => {
+    const html = await render(Stats, { stats });
+    expect(html).toContain('<wc-counter');
+    expect(html).toContain('82%');
+    expect(html).not.toContain('stats__delta');
+  });
+
+  it('tiles variant adds group, delta and state; animate off drops the element', async () => {
+    const html = await render(Stats, { stats, variant: 'tiles', animate: false });
+    expect(html).toContain('stats--tiles');
+    expect(html).toContain('data-state="up"');
+    expect(html).toContain('Ops');
+    expect(html).toContain('+3 this week');
+    expect(html).not.toContain('<wc-counter');
+  });
+
+  it('ignores an invented state', async () => {
+    const html = await render(Stats, { stats: [{ value: '1', state: 'x" onload="y' }] });
+    expect(html).not.toContain('onload');
+  });
+});
+
+describe('vitops.callout', () => {
+  it('is a heading, text and actions in a tinted or solid band — not a banner', async () => {
+    const html = await render(Callout, {
+      heading: 'Ready?',
+      body: 'Funding is [available](/funding).',
+      primaryLabel: 'Apply',
+      primaryHref: '/apply',
+      solid: true,
+      tone: 'brand-primary',
+    });
+    expect(html).toContain('class="callout tone tone--solid"');
+    expect(html).toContain('<h2 class="callout__title font-title">Ready?</h2>');
+    expect(html).toContain('<a class="link" href="/funding">available</a>');
+    expect(html).toContain('class="cta" href="/apply"');
+    expect(html).not.toContain('banner');
+  });
+});
+
+describe('vitops.entries', () => {
+  it('emits <wc-entries> with a semantic heading + dl per entry', async () => {
+    const html = await render(Entries, {
+      level: '4',
+      breakpoint: '40rem',
+      entries: [{ heading: 'Mon', pairs: 'Open | 9\nClose | 5' }],
+    });
+    expect(html).toContain('<wc-entries');
+    expect(html).toContain('breakpoint="40rem"');
+    expect(html).toContain('<h4>Mon</h4>');
+    expect(html).toContain('<dt>Open</dt>');
+    expect(html).toContain('<dd>9</dd>');
+  });
+
+  it('rejects a breakpoint that is not a CSS length', async () => {
+    const html = await render(Entries, {
+      breakpoint: '1" onload="x',
+      entries: [{ heading: 'a', pairs: 'k | v' }],
+    });
+    expect(html).not.toContain('onload');
+  });
+});
+
+describe('vitops.pricing', () => {
+  it('aligns plans through the pricing-card subgrid rows', async () => {
+    const html = await render(Pricing, {
+      plans: [
+        {
+          name: 'Basic',
+          price: '$9',
+          period: 'per month',
+          features: 'a\nb',
+          ctaLabel: 'Buy',
+          ctaHref: '/buy',
+        },
+        {
+          name: 'Pro',
+          price: '$29',
+          features: 'a\nb\nc',
+          featured: true,
+          ctaLabel: 'Buy',
+          ctaHref: '/buy',
+        },
+      ],
+    });
+    expect(html).toContain('class="pricing-grid"');
+    expect(html).toContain('--pricing-columns: 2; --pricing-card-rows: 4');
+    expect(html).toContain('pricing-card pricing-card--featured');
+    expect(html).toContain('<h3 class="font-title">Pro</h3>');
+    expect(html).toContain('pricing-card__feature');
+  });
+});
+
+describe('vitops.embed', () => {
+  it('ships the iframe with NO src and the address on data-consent-src', async () => {
+    const html = await render(Embed, {
+      provider: 'youtube',
+      url: 'https://www.youtube.com/watch?v=abc123',
+      title: 'Our story',
+      category: 'marketing',
+    });
+    expect(html).toContain('data-consent="marketing"');
+    expect(html).toContain('data-consent-src="https://www.youtube-nocookie.com/embed/abc123"');
+    expect(html).toContain('title="Our story"');
+    // The load-bearing rule: never a live src before consent.
+    expect(html).not.toMatch(/<iframe[^>]*\ssrc=/);
+    // And a usable fallback with no JS.
+    expect(html).toContain('href="https://www.youtube.com/watch?v=abc123"');
+  });
+
+  it('renders nothing without a title or with an address the provider refuses', async () => {
+    const ok = { provider: 'youtube', url: 'https://youtu.be/abc123' };
+    expect((await render(Embed, ok)).trim()).toBe('');
+    expect(
+      (
+        await render(Embed, { provider: 'youtube', url: 'https://evil.example/x', title: 't' })
+      ).trim(),
+    ).toBe('');
+    expect(
+      (await render(Embed, { provider: 'custom', url: 'javascript:alert(1)', title: 't' })).trim(),
+    ).toBe('');
+  });
+
+  it('falls back to marketing for an unknown category, so nothing ungated can be asked for', async () => {
+    const html = await render(Embed, {
+      provider: 'vimeo',
+      url: 'https://vimeo.com/12',
+      title: 't',
+      category: 'whatever',
+    });
+    expect(html).toContain('data-consent="marketing"');
+  });
+});
+
+// The data the two new blocks read: the reviews cache (a virtual module the `vitops()`
+// integration serves; a container cannot register integrations) and EmDash's `getMenu`.
+const fixtures = vi.hoisted(() => ({
+  cache: { version: 1, locations: {} } as { version: 1; locations: Record<string, unknown> },
+  menus: {} as Record<string, unknown>,
+}));
+vi.mock('virtual:getvitops/reviews', () => ({
+  get default() {
+    return fixtures.cache;
+  },
+}));
+vi.mock('virtual:getvitops/icons', () => ({
+  default: { ui: 'ph', brand: 'ph', overrides: {}, engine: 'none' },
+}));
+vi.mock('emdash', () => ({ getMenu: async (name: string) => fixtures.menus[name] ?? null }));
+
+const review = (id: string, rating: number, extra: object = {}) => ({
+  id,
+  location: 'ottawa',
+  rating,
+  author: `Author ${id}`,
+  text: `Text ${id}`,
+  publishedAt: `2026-0${rating}-01T00:00:00Z`,
+  updatedAt: '2026-01-01T00:00:00Z',
+  ...extra,
+});
+
+describe('vitops.reviews', () => {
+  it('renders nothing when the cache is empty (a fresh scaffold has no reviews.json)', async () => {
+    fixtures.cache = { version: 1, locations: {} };
+    const { default: Reviews } = await import('./Reviews.astro');
+    // The dev-only note is allowed (vitest runs with DEV on); no card or wrapper is.
+    const html = await render(Reviews, { _type: 'vitops.reviews' });
+    expect(html).not.toContain('<article');
+    expect(html).not.toMatch(/class="reviews[" ]/);
+  });
+
+  it('selects with selectReviews: minRating, sort, limit and featured-first', async () => {
+    fixtures.cache = {
+      version: 1,
+      locations: {
+        ottawa: {
+          reviews: [review('a', 5), review('b', 4), review('c', 2), review('d', 5, { text: 'D' })],
+        },
+        toronto: { reviews: [review('z', 5)] },
+      },
+    };
+    const { default: Reviews } = await import('./Reviews.astro');
+    const html = await render(Reviews, {
+      location: 'ottawa',
+      minRating: '4',
+      sort: 'rating',
+      limit: 2,
+      featured: 'b',
+    });
+    // Featured first, then best rated; the 2-star and the other location are out.
+    const authors = [...html.matchAll(/Author (\w)</g)].map((m) => m[1]);
+    expect(authors).toEqual(['b', 'a']);
+    expect(html).not.toContain('Author z');
+  });
+
+  it('defaults avatars off, links the source with nofollow, and lays out as a subgrid', async () => {
+    fixtures.cache = {
+      version: 1,
+      locations: {
+        ottawa: {
+          reviews: [
+            review('a', 5, {
+              authorPhoto: 'https://lh3.googleusercontent.com/x',
+              url: 'https://g.co/r/1',
+            }),
+          ],
+        },
+      },
+    };
+    const { default: Reviews } = await import('./Reviews.astro');
+    const html = await render(Reviews, { columns: '2' });
+    expect(html).not.toContain('googleusercontent');
+    expect(html).toContain('class="subgrid"');
+    expect(html).toContain('--subgrid-cols: 2');
+    expect(html).toMatch(
+      /<a class="review__source link" href="https:\/\/g\.co\/r\/1" rel="nofollow/,
+    );
+    // JSON-LD is opt-in elsewhere and never emitted by the block.
+    expect(html).not.toContain('application/ld+json');
+    const withPhoto = await render(Reviews, { avatars: true });
+    expect(withPhoto).toContain('googleusercontent');
+  });
+
+  it('carousel and marquee layouts use the existing components', async () => {
+    fixtures.cache = { version: 1, locations: { ottawa: { reviews: [review('a', 5)] } } };
+    const { default: Reviews } = await import('./Reviews.astro');
+    const carousel = await render(Reviews, { layout: 'carousel', label: 'Praise' });
+    expect(carousel).toContain('<wc-carousel');
+    expect(carousel).toContain('aria-label="Praise"');
+    expect(carousel).toContain('class="carousel__slide"');
+    const marquee = await render(Reviews, { layout: 'marquee' });
+    expect(marquee).toContain('<wc-marquee');
+  });
+
+  it('puts tone on the surrounding band, not on the cards', async () => {
+    fixtures.cache = { version: 1, locations: { ottawa: { reviews: [review('a', 5)] } } };
+    const { default: Reviews } = await import('./Reviews.astro');
+    const html = await render(Reviews, { tone: 'brand-primary' });
+    expect(html).toContain('class="reviews tone"');
+    expect(html).toContain('<article class="review"');
+  });
+});
+
+describe('vitops.nav', () => {
+  const menu = {
+    label: 'Footer site map',
+    items: [
+      {
+        label: 'Services',
+        url: '/services',
+        children: [{ label: 'Web', url: '/services/web' }],
+      },
+      { label: 'Contact', url: '/contact' },
+      { label: 'Bad', url: 'javascript:alert(1)' },
+    ],
+  };
+
+  it('renders a named <nav> with the list, current page and no javascript: link', async () => {
+    fixtures.menus = { 'footer-sitemap': menu };
+    const { default: Nav } = await import('./Nav.astro');
+    const html = await render(Nav, { menu: 'footer-sitemap', depth: '2' });
+    expect(html).toContain('<nav aria-label="Footer site map">');
+    expect(html).toContain('class="navlist"');
+    expect(html).toContain('class="navlist__sub"');
+    expect(html).toContain('href="/services/web"');
+    expect(html).not.toContain('javascript:');
+  });
+
+  it('depth 1 drops the sub-links; columns/inline add their modifier', async () => {
+    fixtures.menus = { 'footer-sitemap': menu };
+    const { default: Nav } = await import('./Nav.astro');
+    const flat = await render(Nav, { menu: 'footer-sitemap', variant: 'columns' });
+    expect(flat).toContain('navlist navlist--columns');
+    expect(flat).not.toContain('/services/web');
+  });
+
+  it('never names itself like the header or footer landmark', async () => {
+    fixtures.menus = { primary: { label: 'Primary', items: [{ label: 'A', url: '/a' }] } };
+    const { default: Nav } = await import('./Nav.astro');
+    const html = await render(Nav, { menu: 'primary' });
+    expect(html).toContain('aria-label="Primary (this page)"');
+  });
+
+  it('heading is a real heading at the chosen level, outside the nav', async () => {
+    fixtures.menus = { 'footer-sitemap': menu };
+    const { default: Nav } = await import('./Nav.astro');
+    const html = await render(Nav, { menu: 'footer-sitemap', heading: 'Explore', level: '3' });
+    expect(html).toContain('<h3 class="font-heading">Explore</h3>');
+    expect(html).toContain('<nav aria-label="Explore">');
+  });
+
+  it('the sitenav variant renders <SiteNav> with that label', async () => {
+    fixtures.menus = { 'footer-sitemap': menu };
+    const { default: Nav } = await import('./Nav.astro');
+    const html = await render(Nav, { menu: 'footer-sitemap', variant: 'sitenav', _key: 'k1' });
+    expect(html).toContain('sitenav__list');
+    expect(html).toContain('aria-label="Footer site map"');
+    expect(html).toContain('navblock-k1');
+  });
+
+  it('a missing menu, an empty one or a non-slug name renders nothing', async () => {
+    fixtures.menus = { empty: { label: 'E', items: [] } };
+    const { default: Nav } = await import('./Nav.astro');
+    for (const name of ['nope', 'empty', '../etc'])
+      expect((await render(Nav, { menu: name })).trim(), name).toBe('');
+  });
+});
+
+// EmDash's <PortableText> reads the site's merged plugin component map from a virtual module its
+// own integration provides — which a container cannot register. Provide the real adapter for the
+// block the test nests, so it resolves as in production. (Not the whole `blockComponents` map:
+// that imports Section.astro, which imports `emdash/ui`, which awaits this very factory.)
+vi.mock('virtual:emdash/block-components', async () => ({
+  pluginBlockComponents: { 'vitops.logos': (await import('./Logos.astro')).default },
+}));
+
+vi.mock('virtual:emdash/config', () => ({ default: {} }));
+
+describe('vitops_section', () => {
+  it('renders the head, tone and a Portable Text body', async () => {
+    const { default: Section } = await import('./Section.astro');
+    const container = await AstroContainer.create();
+    const html = await container.renderToString(Section as unknown as Component, {
+      props: {
+        value: {
+          kicker: 'Why us',
+          heading: 'Two services',
+          level: '3',
+          sub: 'Lead-in',
+          layout: 'split',
+          tone: 'surface',
+          body: [
+            {
+              _type: 'block',
+              _key: 'a',
+              style: 'normal',
+              children: [{ _type: 'span', _key: 'b', text: 'Body copy' }],
+            },
+            // The point of the block: another vitops.* block resolves INSIDE the body.
+            { _type: 'vitops.logos', _key: 'c', logos: [{ image: '/x.svg', alt: 'Acme' }] },
+          ],
+        },
+      },
+    });
+    expect(html).toContain('section region tone section--split');
+    expect(html).toContain('<h3 class="section__title font-title">Two services</h3>');
+    expect(html).toContain('Why us');
+    expect(html).toContain('Body copy');
+    expect(html).toContain('class="logos"');
+    expect(html).toContain('alt="Acme"');
+  }, 60_000);
+});
+
+describe('vitops.form', () => {
+  async function renderForm(node: object, path = '/contact') {
+    const container = await AstroContainer.create();
+    return container.renderToString(Form as unknown as Component, {
+      props: { node },
+      request: new Request(`http://localhost${path}`),
+    });
+  }
+
+  it('renders a no-JS form: real labels, a post to the endpoint, and its own page as _next', async () => {
+    head.turnstileSiteKey = null;
+    const html = await renderForm(SAMPLE_FORM_BLOCK);
+    expect(html).toContain('<form method="post" action="/api/track"');
+    expect(html).toContain('name="_next" value="/contact"');
+    expect(html).toMatch(/<label class="form-group__label" for="form-1-name">\s*Your name/);
+    expect(html).toContain('id="form-1-name"');
+    expect(html).toContain('autocomplete="name"');
+    expect(html).toContain('type="email"');
+    expect(html).toContain('autocomplete="email"');
+    expect(html).toContain('<textarea');
+    expect(html).toContain('<option value="Design">Design</option>');
+    expect(html).toContain('type="checkbox"');
+    expect(html).toContain('Send message');
+  });
+
+  it('never submits a phone field as `phone`: the route drops that name', async () => {
+    const html = await renderForm(SAMPLE_FORM_BLOCK);
+    expect(html).toContain('name="tel"');
+    expect(html).not.toContain('name="phone"');
+    expect(html).toContain('autocomplete="tel"');
+  });
+
+  it('marks required fields and ties help text to its control', async () => {
+    const html = await renderForm(SAMPLE_FORM_BLOCK);
+    expect(html).toMatch(/id="form-2-email"[^>]*required/);
+    expect(html).toContain('aria-describedby="form-2-email-help"');
+    expect(html).toContain('id="form-2-email-help"');
+    expect(html).toContain('(optional)');
+  });
+
+  it('ships a honeypot the route recognises, hidden from assistive tech and the tab order', async () => {
+    const html = await renderForm(SAMPLE_FORM_BLOCK);
+    expect(html).toMatch(/aria-hidden="true"[\s\S]*name="website"[^>]*tabindex="-1"/);
+  });
+
+  it('carries both result notices, revealed by the URL fragment, with the editor message', async () => {
+    const html = await renderForm(SAMPLE_FORM_BLOCK);
+    expect(html).toMatch(/id="form-sent"[^>]*role="status"/);
+    expect(html).toMatch(/id="form-error"[^>]*role="alert"/);
+    expect(html).toContain('form-notice--target');
+    expect(html).toContain('Thanks, we will be in touch.');
+  });
+
+  it('has no Turnstile and no third-party reference without a site key', async () => {
+    head.turnstileSiteKey = null;
+    const html = await renderForm(SAMPLE_FORM_BLOCK);
+    expect(html).not.toContain('wc-turnstile');
+    expect(html).not.toContain('cloudflare.com');
+  });
+
+  it('renders <wc-turnstile> with its no-JS explanation when a site key exists, and no script', async () => {
+    head.turnstileSiteKey = '0x4AAAAAAAexample1234';
+    try {
+      const html = await renderForm(SAMPLE_FORM_BLOCK);
+      expect(html).toContain('<wc-turnstile sitekey="0x4AAAAAAAexample1234">');
+      expect(html).toContain('data-turnstile-fallback');
+      expect(html).toContain('needs JavaScript');
+      // The widget script is loaded by the element on interaction, never emitted here.
+      expect(html).not.toContain('<script');
+      expect(html).not.toContain('challenges.cloudflare.com');
+    } finally {
+      head.turnstileSiteKey = null;
+    }
+  });
+
+  it('refuses an off-site action and renders nothing for a form with no fields', async () => {
+    const html = await renderForm({ ...SAMPLE_FORM_BLOCK, action: 'https://evil.example/steal' });
+    expect(html).toContain('action="/api/track"');
+    expect(html).not.toContain('evil.example');
+    expect(await renderForm({ _type: 'vitops.form', fields: [] })).not.toContain('<form');
+  });
+
+  it('escapes editor text', async () => {
+    const html = await renderForm({ ...SAMPLE_FORM_BLOCK, heading: '<script>alert(1)</script>' });
+    expect(html).not.toContain('<script>alert(1)');
+  });
+});

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

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { joinStyle, resolveTone, toneChain } from './tone.ts';
+
+describe('toneChain', () => {
+  it('tries the role, then its relatives, then neutral', () => {
+    expect(toneChain('brand-primary')).toEqual(['brand-primary', 'ui-primary', 'info', 'neutral']);
+    expect(toneChain('danger')).toEqual(['danger', 'neutral']);
+  });
+
+  it('collapses anything that is not a role identifier to neutral', () => {
+    expect(toneChain(undefined)).toEqual(['neutral']);
+    expect(toneChain('red; background: url(x)')).toEqual(['neutral']);
+    expect(toneChain('Danger')).toEqual(['danger', 'neutral']);
+  });
+});
+
+describe('resolveTone', () => {
+  it('is empty when nothing is set, so an unconfigured block stays transparent', () => {
+    expect(resolveTone()).toEqual({ className: 'tone', style: '' });
+    expect(resolveTone('', '')).toEqual({ className: 'tone', style: '' });
+  });
+
+  it('resolves a role to var() chains the framework tokens satisfy', () => {
+    const { style } = resolveTone('brand-secondary');
+    expect(style).toContain(
+      '--tone-bg: var(--color-bg-brand-secondary-muted, var(--color-bg-ui-secondary-muted, var(--color-bg-info-muted, var(--color-bg-neutral-muted))))',
+    );
+    expect(style).toContain('--tone-fg: var(--color-text-brand-secondary,');
+    // A solid chain falls back to the bare surface token for surface roles.
+    expect(style).toMatch(
+      /--tone-solid: var\(--color-bg-brand-secondary-solid,.*--color-bg-neutral\)/,
+    );
+  });
+
+  it('lets color win and accepts a hue with or without a step', () => {
+    expect(resolveTone('danger', 'amber').style).toContain('--tone-solid: var(--color-amber-600)');
+    expect(resolveTone(undefined, 'amber-300').style).toContain(
+      '--tone-solid: var(--color-amber-300)',
+    );
+  });
+
+  it('never lets editor input escape the style attribute', () => {
+    expect(resolveTone('x', 'amber); color: red').style).not.toContain('red');
+    expect(resolveTone('a;b', undefined).style).not.toContain(';b');
+  });
+});
+
+describe('joinStyle', () => {
+  it('skips empties and returns undefined when nothing is left', () => {
+    expect(joinStyle('', undefined, false)).toBeUndefined();
+    expect(joinStyle('--a: 1', '', '--b: 2')).toBe('--a: 1; --b: 2');
+  });
+});