import { Meta, Title, Subtitle, Description } from '@storybook/addon-docs/blocks';

<Meta title="Brand/Isotype/Mini" />

<Title>Isotype Mini</Title>
<Subtitle>Third mark in the Xertica isotipos series — a compact 3x3 grid.</Subtitle>

---

## Overview

`IsotypeMini` renders a 3x3 grid of fixed brand colors that reads as a single composed image — a more compact sibling of the 4x4 `Isotype`, for spots where a full-size mark doesn't fit (e.g. beside a page title). It's built the same way as `Isotype`: one generic renderer over a pattern registry, so new 3x3 isotypes join the series as pure data, not new components.

```tsx
import { IsotypeMini } from 'xertica-ui/brand';

<IsotypeMini className="w-14" />
```

---

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `pattern` | `IsotypeMiniPatternId` | `'core'` | Which registered pattern to render. |
| `variantSeed` | `number` | — | Deterministically blanks one cell for decorative variation. Omit for the pure, fully-filled base pattern. |
| `className` | `string` | — | Additional classes on the root grid container — use for sizing (`w-14`, `w-64`, etc). `aspect-square` is built in. |
| `aria-label` | `string` | — | Omit for decorative use (root gets `aria-hidden`); set it to render as `role="img"` instead. |

---

## Patterns

Today the registry (`ISOTYPE_MINI_PATTERNS` in `mini-patterns.ts`) has one entry, `'core'`, reusing the exact same brand colors as the main `Isotype` grid (`ISOTYPE_COLORS` in `patterns.ts`). Add new 3x3 isotypes to the series by adding a new entry there and widening `IsotypeMiniPatternId` — `IsotypeMini.tsx` itself never needs to change.

## Variants

Passing `variantSeed` calls the pure, deterministic `getIsotypeMiniVariant(pattern, seed)` internally — the same `(pattern, seed)` pair always blanks the same cell. Unlike `Isotype`, the base `'core'` pattern has no inherent blank cell, so `variantSeed` always removes exactly one cell. Use it for decorative, repeated placements (e.g. a gallery of instances); canonical brand-mark spots should use the plain base pattern with no seed.

```tsx
// Canonical brand-mark placement — pure base pattern, all 9 cells filled
<IsotypeMini />

// Decorative variation — exactly one cell missing
<IsotypeMini variantSeed={3} />

// Precomputing a batch of variants (e.g. a thumbnail sheet)
import { getIsotypeMiniVariant } from 'xertica-ui/brand';
const variants = Array.from({ length: 8 }, (_, seed) => getIsotypeMiniVariant('core', seed));
```

---

## AI Best Practices

> [!IMPORTANT]
> - **Colors are fixed brand hex values, not theme tokens** — reuses `ISOTYPE_COLORS` from `patterns.ts` verbatim; never replace with CSS custom properties.
> - **No gaps or per-cell borders** — cells must render flush against each other so the grid reads as a single composed image.
> - **New 3x3 isotypes are data, not components** — add patterns via `ISOTYPE_MINI_PATTERNS`/`IsotypeMiniPatternId` in `mini-patterns.ts`.
> - **`variantSeed` is for decorative use only** — canonical placements (page headers, nav) should render the base pattern.