spb/ai-atlas

1'use client';2import { Rows2, Rows3, Rows4 } from 'lucide-react';3import { cn } from '@/lib/cn';4import { DENSITY_LABELS, useDensity } from '@/lib/density';56/** Three-state density toggle (comfortable → compact → dense). Touch target 44 px; `aria-label` announces the current state. */7export function DensityToggle({ className }: { className?: string }) {8  const [d, , cycle] = useDensity();9  const Icon = d === 'comfortable' ? Rows2 : d === 'compact' ? Rows3 : Rows4;10  const label = `Density: ${DENSITY_LABELS[d].toLowerCase()}`;11  return (12    <button type="button" onClick={cycle} data-density-toggle className={cn('flex size-11 items-center justify-center rounded-sm text-ink-2 hover:bg-surface-2 hover:text-ink md:size-10', className)} aria-label={`${label} — switch`} title={label}>13      <Icon className="size-[18px]" aria-hidden />14    </button>15  );16}17