Pillar Coverage Cell

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 422,
  slug: 'pillar-coverage-cell',
  name: 'Pillar Coverage Cell',
  category: 'pillars-roles',
  subcategory: 'comparison',
  pillar: 'co',
  description: 'Single heatmap cell showing how well a pillar covers a given dimension — atom of a pillar-by-dimension heat surface.',
  spec: `## Intent
One cell of a (pillar × dimension) heatmap. Background scales with coverage score; pillar token applied as accent stripe.

## Acceptance Criteria
- [ ] Pillar label visible inside cell
- [ ] Coverage score readable in tabular-nums
- [ ] Background tint scales with score (success / attention / danger)
- [ ] Negative: does NOT vanish at low scores

## Constraints
- Pure CSS
- Theme-aware via tokens`,
  tags: ['chart', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 86, a11y: 'aa', themed: true, animated: false },
};

const cell = { k: 'CO', dim: 'rigor', score: 64 };
const token = cell.score >= 70 ? 'success' : cell.score >= 40 ? 'attention' : 'danger';
const inkClass = cell.score >= 40 ? 'text-white' : 'text-black';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <div class="font-mono text-[10px] uppercase tracking-widest opacity-60 mb-2">// coverage cell</div>
  <div class={`relative border-4 border-black bg-${token} ${inkClass} p-3 aspect-square flex flex-col justify-between max-w-[160px]`}>
    <div class="font-mono text-[10px] uppercase tracking-widest opacity-90">{cell.k}</div>
    <div class="font-black text-3xl tabular-nums leading-none text-center">{cell.score}</div>
    <div class="font-mono text-[10px] uppercase tracking-widest opacity-90 text-end">{cell.dim}</div>
    <div class="absolute inset-y-0 start-0 w-1 bg-co"></div>
  </div>
</div>