Dead Neuron Grid Inline

DeadNeuronGridInline is the inline sibling of DeadNeuronAutopsy. Same diagnostic — which neurons in a layer have died under ReLU? — but reduced to a single coloured cell per neuron so the whole population fits inline beside body text. Alive cells fill with cb-accent; dead cells fill with cb-fg-subtle and overlay a diagonal stripe so state never depends on colour alone.

Installation

npx shadcn@latest add https://craftbits.dev/r/dead-neuron-grid-inline.json

Usage

import { DeadNeuronGridInline } from "@craft-bits/core";
 
<DeadNeuronGridInline
  neurons={[
    { id: "n0", alive: true },
    { id: "n1", alive: false },
    { id: "n2", alive: true },
  ]}
/>

Force a fixed column count and shrink the cells to 8px for use inside a sentence:

<DeadNeuronGridInline neurons={neurons} cols={20} cellSize={8} />

Hide the readout when the surrounding prose already names the count:

<DeadNeuronGridInline neurons={neurons} hideReadout />

Anatomy

1. Two states, two visual treatments. Each cell is either alive (bg-cb-accent) or dead (bg-cb-fg-subtle plus a 2px-pitch 45-degree stripe drawn with the page background colour). Both states also expose data-state="alive" or data-state="dead" so callers can hook custom styles.
2. Pure declarative. No threshold, no activations array, no sampling. The caller does the dead/alive classification upstream (using e.g. DeadNeuronAutopsy's deadThreshold rule) and hands the component a boolean per neuron. That keeps the inline variant tiny and zero-allocation per render.
3. Cell size is the only geometry knob. cellSize (default 12px) drives the grid track width and the cell width/height. cols either forces a column count or, when unset, lets grid-template-columns: repeat(auto-fit, ${cellSize}px) fill whatever container width the caller gives it.
4. Inline by default. The root is inline-flex so the component composes inside a paragraph: drop it next to a number, between words, beside a chip. Pass className="block" if you want it on its own line.
5. Readout uses tabular numerals. The N/M alive (P%) trailing label uses font-cb-mono plus tabular-nums so the digits don't reflow as the count changes.
6. No motion budget. This is a sparkline-class component — every render is instant. If you need animated reveals, use DeadNeuronAutopsy instead.

Props

Accessibility

• The root is role="figure" with aria-labelledby pointing at a visually-hidden "Dead neuron grid" heading and aria-describedby at an aria-live="polite" summary.
• The summary announces alive-count, total, and percentage whenever the input changes.
• Each cell carries data-state="alive" or data-state="dead" and an aria-label of the form <id> alive or <id> dead so screen readers can name each neuron individually.
• Dead cells overlay a diagonal stripe pattern so state never depends on colour alone (contrast-safe under any theme).
• The trailing readout is aria-hidden because the aria-live summary already speaks the same numbers — this avoids duplicate announcements.

Credits

• Extracted from: craftingattention (app/src/lessons/primitives/viz/DeadNeuronGridInline.tsx). The source coupled a ReLU/Leaky-ReLU toggle, a LabeledSlider for weight-perturbation, a per-cell motion spring, and project-specific palette vars into one monolithic primitive. Re-architected as a pure declarative inline grid: callers pass { id, alive }[] and the component handles only the dead-vs-alive rendering, readout, and accessibility — no mode toggle, no slider, no animation, no simulation.