@polderlabs/bizar 7.0.4 → 8.0.0

package/bizar-dash/src/web/v8/__tests__/kanban.test.tsx

@@ -0,0 +1,176 @@
+/**
+ * Kanban layer tests — KanbanCard, KanbanColumn, KanbanBoard, KanbanQuickAdd,
+ * KanbanContextMenu. Covers rendering, priority/compact variants, quick-add
+ * keyboard behavior, and the right-click menu.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  KanbanCard,
+  KanbanColumn,
+  KanbanBoard,
+  KanbanQuickAdd,
+  KanbanContextMenu,
+} from '../ui/index.js';
+
+describe('KanbanCard', () => {
+  it('renders title and optional metadata', () => {
+    render(<KanbanCard card={{ id: 'a', title: 'Ship S5', priority: 'high', comments: 3, due: 'Mon' }} />);
+    expect(screen.getByText('Ship S5')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('Mon')).toBeInTheDocument();
+  });
+
+  it('hides metadata row in compact variant', () => {
+    render(
+      <KanbanCard
+        variant="compact"
+        card={{ id: 'a', title: 'Compact card', comments: 5 }}
+      />,
+    );
+    expect(screen.getByText('Compact card')).toBeInTheDocument();
+    expect(screen.queryByText('5')).not.toBeInTheDocument();
+  });
+
+  it('renders priority dot with aria-label', () => {
+    render(<KanbanCard card={{ id: 'a', title: 'Urgent!', priority: 'urgent' }} />);
+    expect(screen.getByLabelText(/priority: urgent/i)).toBeInTheDocument();
+  });
+
+  it('applies data-kanban-card-id for keyboard nav', () => {
+    const { container } = render(<KanbanCard card={{ id: 'k-42', title: 'Task' }} />);
+    expect(container.querySelector('[data-kanban-card-id="k-42"]')).toBeInTheDocument();
+  });
+});
+
+describe('KanbanColumn', () => {
+  it('renders title and count', () => {
+    render(
+      <KanbanColumn column={{ id: 'todo', title: 'To Do', count: 5 }}>
+        <span>card</span>
+      </KanbanColumn>,
+    );
+    expect(screen.getByText('To Do')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('shows wip limit', () => {
+    render(
+      <KanbanColumn column={{ id: 'in-progress', title: 'In Progress', count: 7, wipLimit: 5 }} />,
+    );
+    expect(screen.getByText('7 / 5')).toBeInTheDocument();
+  });
+
+  it('renders overflow and add buttons when handlers provided', () => {
+    render(
+      <KanbanColumn
+        column={{ id: 'x', title: 'X' }}
+        onAdd={() => {}}
+        onOverflow={() => {}}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /add card/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /column options/i })).toBeInTheDocument();
+  });
+});
+
+describe('KanbanBoard', () => {
+  it('renders region landmark with accessible label', () => {
+    render(
+      <KanbanBoard columns={[{ id: 'todo' }, { id: 'done' }]}>
+        <KanbanColumn column={{ id: 'todo', title: 'To Do' }} />
+        <KanbanColumn column={{ id: 'done', title: 'Done' }} />
+      </KanbanBoard>,
+    );
+    expect(screen.getByRole('region', { name: /kanban board/i })).toBeInTheDocument();
+  });
+});
+
+describe('KanbanQuickAdd', () => {
+  it('starts idle and reveals editor on click', async () => {
+    render(<KanbanQuickAdd onAdd={() => {}} />);
+    await userEvent.click(screen.getByRole('button', { name: /add task/i }));
+    expect(screen.getByPlaceholderText(/task title/i)).toBeInTheDocument();
+  });
+
+  it('submits via Enter and clears value', async () => {
+    const onAdd = vi.fn();
+    render(<KanbanQuickAdd onAdd={onAdd} />);
+    await userEvent.click(screen.getByRole('button', { name: /add task/i }));
+    const ta = screen.getByPlaceholderText(/task title/i);
+    await userEvent.type(ta, 'New card title{Enter}');
+    expect(onAdd).toHaveBeenCalledWith('New card title');
+  });
+
+  it('does not submit empty titles', async () => {
+    const onAdd = vi.fn();
+    render(<KanbanQuickAdd onAdd={onAdd} />);
+    await userEvent.click(screen.getByRole('button', { name: /add task/i }));
+    const ta = screen.getByPlaceholderText(/task title/i);
+    await userEvent.type(ta, '   {Enter}');
+    expect(onAdd).not.toHaveBeenCalled();
+  });
+
+  it('cancels on Escape', async () => {
+    render(<KanbanQuickAdd onAdd={() => {}} />);
+    await userEvent.click(screen.getByRole('button', { name: /add task/i }));
+    const ta = screen.getByPlaceholderText(/task title/i);
+    await userEvent.type(ta, 'draft');
+    fireEvent.keyDown(ta, { key: 'Escape' });
+    expect(screen.queryByPlaceholderText(/task title/i)).not.toBeInTheDocument();
+  });
+});
+
+describe('KanbanContextMenu', () => {
+  it('renders card content inside trigger', () => {
+    render(
+      <KanbanContextMenu>
+        <div>Card body</div>
+      </KanbanContextMenu>,
+    );
+    expect(screen.getByText('Card body')).toBeInTheDocument();
+  });
+
+  it('shows menu items on contextmenu event', async () => {
+    render(
+      <KanbanContextMenu>
+        <div>Right-click me</div>
+      </KanbanContextMenu>,
+    );
+    fireEvent.contextMenu(screen.getByText('Right-click me'));
+    expect(await screen.findByText('Open detail')).toBeInTheDocument();
+    expect(screen.getByText('Rename')).toBeInTheDocument();
+    expect(screen.getByText('Duplicate')).toBeInTheDocument();
+    expect(screen.getByText('Move to previous column')).toBeInTheDocument();
+    expect(screen.getByText('Move to next column')).toBeInTheDocument();
+    expect(screen.getByText('Assign…')).toBeInTheDocument();
+    expect(screen.getByText('Archive')).toBeInTheDocument();
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+  });
+
+  it('disables move arrows based on canMoveLeft/canMoveRight', async () => {
+    render(
+      <KanbanContextMenu canMoveLeft={false} canMoveRight>
+        <div>x</div>
+      </KanbanContextMenu>,
+    );
+    fireEvent.contextMenu(screen.getByText('x'));
+    const prevItem = await screen.findByText('Move to previous column');
+    expect(prevItem.closest('[data-disabled]')).not.toBeNull();
+    const nextItem = screen.getByText('Move to next column');
+    expect(nextItem.closest('[data-disabled]')).toBeNull();
+  });
+
+  it('invokes onDelete when Delete is selected', async () => {
+    const onDelete = vi.fn();
+    render(
+      <KanbanContextMenu onDelete={onDelete}>
+        <div>x</div>
+      </KanbanContextMenu>,
+    );
+    fireEvent.contextMenu(screen.getByText('x'));
+    await userEvent.click(await screen.findByText('Delete'));
+    expect(onDelete).toHaveBeenCalled();
+  });
+});

package/bizar-dash/src/web/v8/__tests__/libraries.test.tsx

@@ -0,0 +1,70 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LibraryItem } from '../ui/libraries/LibraryItem';
+import { LibraryGrid } from '../ui/libraries/LibraryGrid';
+
+describe('LibraryItem', () => {
+  it('renders name, slug, status, description, meta', () => {
+    const { container } = render(
+      <LibraryItem
+        id="s1"
+        name="Frigg"
+        slug="frigg"
+        status="enabled"
+        description="Read-only codebase Q&A."
+        meta="v1.2.0 · used 14× today"
+      />,
+    );
+    expect(container.textContent).toContain('Frigg');
+    expect(container.textContent).toContain('Read-only codebase Q&A.');
+    expect(container.textContent).toContain('v1.2.0 · used 14× today');
+    expect(container.querySelector('code')?.textContent).toBe('frigg');
+  });
+
+  it('shows the disabled status badge', () => {
+    render(<LibraryItem id="s1" name="x" slug="x" status="disabled" />);
+    expect(screen.getByText(/disabled/i)).toBeInTheDocument();
+  });
+
+  it('shows the error status badge', () => {
+    render(<LibraryItem id="s1" name="x" slug="x" status="error" />);
+    expect(screen.getByText(/error/i)).toBeInTheDocument();
+  });
+
+  it('invokes onOpen when clicked', async () => {
+    const onOpen = vi.fn();
+    render(<LibraryItem id="s1" name="x" slug="x" status="enabled" onOpen={onOpen} />);
+    await userEvent.click(screen.getByRole('button', { name: /x/i }));
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders actions slot', () => {
+    const { container } = render(
+      <LibraryItem
+        id="s1"
+        name="Semble"
+        slug="semble"
+        status="enabled"
+        actions={<button type="button">Toggle</button>}
+      />,
+    );
+    expect(container.querySelectorAll('button').length).toBeGreaterThanOrEqual(2);
+    expect(container.textContent).toContain('Toggle');
+  });
+});
+
+describe('LibraryGrid', () => {
+  it('renders children inside a grid container', () => {
+    const { container } = render(
+      <LibraryGrid>
+        <div>a</div>
+        <div>b</div>
+        <div>c</div>
+      </LibraryGrid>,
+    );
+    const grid = container.firstChild as HTMLElement;
+    expect(grid.style.display).toBe('grid');
+    expect(grid.children).toHaveLength(3);
+  });
+});

package/bizar-dash/src/web/v8/__tests__/memory.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryVault, type MemoryEntry } from '../ui/memory/MemoryVault';
+
+const entries: MemoryEntry[] = [
+  {
+    id: 'm1',
+    content: 'The dashboard rewrite runs on the v8 component tree under `bizar-dash/src/web/v8/`.',
+    tags: ['dashboard', 'rewrite'],
+    scope: 'project',
+    updatedAt: 'Just now',
+  },
+  {
+    id: 'm2',
+    content: 'User prefers OKLch colors and minimal visual flair. Token-driven styling only.',
+    tags: ['preferences'],
+    scope: 'global',
+    updatedAt: '3 days ago',
+  },
+];
+
+describe('MemoryVault', () => {
+  it('renders every entry with content and updatedAt', () => {
+    render(<MemoryVault entries={entries} />);
+    expect(
+      screen.getByText(/The dashboard rewrite runs on the v8 component tree/i),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/User prefers OKLch colors and minimal visual flair/i),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/just now/i)).toBeInTheDocument();
+    expect(screen.getByText(/3 days ago/i)).toBeInTheDocument();
+  });
+
+  it('shows scope badges (Project / Global)', () => {
+    render(<MemoryVault entries={entries} />);
+    expect(screen.getByText(/^Project$/i)).toBeInTheDocument();
+    expect(screen.getByText(/^Global$/i)).toBeInTheDocument();
+  });
+
+  it('renders tags when provided', () => {
+    render(<MemoryVault entries={entries} />);
+    expect(screen.getByText(/^dashboard$/i)).toBeInTheDocument();
+    expect(screen.getByText(/^preferences$/i)).toBeInTheDocument();
+  });
+
+  it('invokes onOpen with the clicked entry', async () => {
+    const onOpen = vi.fn();
+    render(<MemoryVault entries={entries} onOpen={onOpen} />);
+    await userEvent.click(screen.getByRole('button', { name: /The dashboard rewrite/i }));
+    expect(onOpen).toHaveBeenCalledTimes(1);
+    expect(onOpen).toHaveBeenCalledWith(entries[0]);
+  });
+
+  it('renders the empty node when no entries', () => {
+    render(<MemoryVault entries={[]} empty={<div>No memos yet.</div>} />);
+    expect(screen.getByText(/No memos yet\./i)).toBeInTheDocument();
+  });
+});

package/bizar-dash/src/web/v8/__tests__/navigation.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * Navigation layer tests — Tabs, NavLink, Pagination, CommandPalette.
+ */
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  NavLink,
+  Pagination,
+  Dialog,
+  DialogContent,
+  CommandPalette,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+} from '../ui/index.js';
+
+// cmdk uses scrollIntoView for keyboard navigation; jsdom doesn't implement it.
+beforeAll(() => {
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = function () {
+      // noop for tests
+    };
+  }
+});
+
+describe('Tabs', () => {
+  it('switches content on trigger click', async () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">Alpha</TabsTrigger>
+          <TabsTrigger value="b">Beta</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Content A</TabsContent>
+        <TabsContent value="b">Content B</TabsContent>
+      </Tabs>,
+    );
+    expect(screen.getByText('Content A')).toBeInTheDocument();
+    expect(screen.queryByText('Content B')).not.toBeInTheDocument();
+    await userEvent.click(screen.getByRole('tab', { name: /beta/i }));
+    expect(await screen.findByText('Content B')).toBeInTheDocument();
+  });
+
+  it('marks active trigger with data-state="active"', () => {
+    render(
+      <Tabs defaultValue="one">
+        <TabsList>
+          <TabsTrigger value="one">One</TabsTrigger>
+          <TabsTrigger value="two">Two</TabsTrigger>
+        </TabsList>
+        <TabsContent value="one">x</TabsContent>
+        <TabsContent value="two">y</TabsContent>
+      </Tabs>,
+    );
+    expect(screen.getByRole('tab', { name: /one/i })).toHaveAttribute('data-state', 'active');
+  });
+});
+
+describe('NavLink', () => {
+  it('renders link with active state via aria-current', () => {
+    render(<NavLink href="/tasks" aria-current="page">Tasks</NavLink>);
+    const link = screen.getByRole('link', { name: /tasks/i });
+    expect(link).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('renders without active state by default', () => {
+    render(<NavLink href="/about">About</NavLink>);
+    const link = screen.getByRole('link', { name: /about/i });
+    expect(link).not.toHaveAttribute('aria-current');
+  });
+});
+
+describe('Pagination', () => {
+  it('invokes onChange when clicking a visible page button', async () => {
+    const onChange = vi.fn();
+    render(<Pagination page={2} totalPages={10} onChange={onChange} />);
+    await userEvent.click(screen.getByRole('button', { name: /page 3/i }));
+    expect(onChange).toHaveBeenCalledWith(3);
+  });
+
+  it('disables prev/next at edges', () => {
+    render(<Pagination page={1} totalPages={5} onChange={() => {}} />);
+    expect(screen.getByRole('button', { name: /first page/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /previous page/i })).toBeDisabled();
+  });
+
+  it('renders ellipsis when total pages > 7', () => {
+    render(<Pagination page={5} totalPages={20} onChange={() => {}} />);
+    expect(screen.getAllByText('…').length).toBeGreaterThanOrEqual(1);
+  });
+});
+
+describe('CommandPalette', () => {
+  it('renders items and filters by query', async () => {
+    render(
+      <Dialog defaultOpen>
+        <DialogContent title="cmdk">
+          <CommandPalette placeholder="Search…">
+            <CommandPaletteGroup heading="Navigation">
+              <CommandPaletteItem value="go:tasks">Go to Tasks</CommandPaletteItem>
+              <CommandPaletteItem value="go:goals">Go to Goals</CommandPaletteItem>
+              <CommandPaletteItem value="go:agents">Go to Agents</CommandPaletteItem>
+            </CommandPaletteGroup>
+          </CommandPalette>
+        </DialogContent>
+      </Dialog>,
+    );
+    expect(screen.getByText('Go to Tasks')).toBeInTheDocument();
+    const input = screen.getByPlaceholderText(/search/i);
+    fireEvent.change(input, { target: { value: 'goals' } });
+    expect(await screen.findByText('Go to Goals')).toBeInTheDocument();
+    expect(screen.queryByText('Go to Tasks')).not.toBeInTheDocument();
+  });
+
+  it('invokes onSelect when an item is selected', async () => {
+    const onSelect = vi.fn();
+    render(
+      <Dialog defaultOpen>
+        <DialogContent title="cmdk">
+          <CommandPalette>
+            <CommandPaletteGroup>
+              <CommandPaletteItem value="act:ping" onSelect={onSelect}>
+                Ping
+              </CommandPaletteItem>
+            </CommandPaletteGroup>
+          </CommandPalette>
+        </DialogContent>
+      </Dialog>,
+    );
+    await userEvent.click(screen.getByText('Ping'));
+    expect(onSelect).toHaveBeenCalled();
+  });
+});

package/bizar-dash/src/web/v8/__tests__/settings.test.tsx

@@ -0,0 +1,104 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Palette } from 'lucide-react';
+import { SettingsSection } from '../ui/settings/SettingsSection';
+import { SettingsRow } from '../ui/settings/SettingsRow';
+import { SettingsNav } from '../ui/settings/SettingsNav';
+
+describe('SettingsSection', () => {
+  it('renders title, description, and body content', () => {
+    render(
+      <SettingsSection id="theme" title="Theme" description="Light or dark mode.">
+        <div>Body content</div>
+      </SettingsSection>,
+    );
+    expect(screen.getByRole('heading', { level: 2, name: /Theme/i })).toBeInTheDocument();
+    expect(screen.getByText(/Light or dark mode\./i)).toBeInTheDocument();
+    expect(screen.getByText(/Body content/i)).toBeInTheDocument();
+  });
+
+  it('wires aria-labelledby to the title id', () => {
+    const { container } = render(
+      <SettingsSection id="density" title="Density">
+        <div>x</div>
+      </SettingsSection>,
+    );
+    const section = container.querySelector('section#density');
+    expect(section?.getAttribute('aria-labelledby')).toBe('density-title');
+    expect(container.querySelector('#density-title')).not.toBeNull();
+  });
+
+  it('renders the icon and headerActions when provided', () => {
+    render(
+      <SettingsSection
+        id="theme"
+        title="Theme"
+        icon={<Palette size={14} aria-hidden="true" />}
+        headerActions={<button type="button">Reset</button>}
+      >
+        <div>body</div>
+      </SettingsSection>,
+    );
+    expect(screen.getByRole('button', { name: /reset/i })).toBeInTheDocument();
+  });
+});
+
+describe('SettingsRow', () => {
+  it('renders label, description, and control', () => {
+    const { container } = render(
+      <SettingsRow
+        id="theme-mode"
+        label="Mode"
+        description="Light or dark."
+        control={<select aria-label="Theme mode"><option>Light</option></select>}
+      />,
+    );
+    // Label is associated with the control group via aria-labelledby
+    // (WAI-ARIA pattern for generic controls without a native label).
+    const labelEl = container.querySelector('#theme-mode-label');
+    expect(labelEl).not.toBeNull();
+    expect(labelEl?.textContent).toContain('Mode');
+    const group = container.querySelector('[role="group"]');
+    expect(group?.getAttribute('aria-labelledby')).toBe('theme-mode-label');
+    expect(container.textContent).toContain('Mode');
+    expect(container.textContent).toContain('Light or dark.');
+  });
+
+  it('marks the row as disabled when disabled=true', () => {
+    const { container } = render(
+      <SettingsRow id="r" label="L" disabled control={<button>x</button>} />,
+    );
+    const row = container.querySelector('.v8-settings-row');
+    expect(row?.getAttribute('aria-disabled')).toBe('true');
+    expect(row?.getAttribute('data-disabled')).not.toBeNull();
+  });
+});
+
+describe('SettingsNav', () => {
+  const items = [
+    { id: 'general', title: 'General' },
+    { id: 'theme', title: 'Theme', icon: <Palette size={14} aria-hidden="true" /> },
+    { id: 'plugins', title: 'Plugins' },
+  ];
+
+  it('renders every nav item', () => {
+    render(<SettingsNav items={items} />);
+    expect(screen.getByText(/general/i)).toBeInTheDocument();
+    expect(screen.getByText(/theme/i)).toBeInTheDocument();
+    expect(screen.getByText(/plugins/i)).toBeInTheDocument();
+  });
+
+  it('marks the active item with aria-current', () => {
+    render(<SettingsNav items={items} activeId="theme" />);
+    const active = screen.getByRole('button', { name: /theme/i });
+    expect(active.getAttribute('aria-current')).toBe('true');
+  });
+
+  it('invokes onSelect with the item id', async () => {
+    const onSelect = vi.fn();
+    render(<SettingsNav items={items} onSelect={onSelect} />);
+    await userEvent.click(screen.getByText(/plugins/i));
+    expect(onSelect).toHaveBeenCalledWith('plugins');
+  });
+});

package/bizar-dash/src/web/v8/__tests__/theme.test.tsx

@@ -0,0 +1,98 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { ThemeProvider } from '../ui/theme/ThemeProvider.js';
+import { useTheme } from '../ui/theme/useTheme.js';
+import { DensityProvider } from '../ui/theme/DensityProvider.js';
+import { useDensity } from '../ui/theme/useDensity.js';
+import type { ReactNode } from 'react';
+
+function wrapperFactory(mode?: 'light' | 'dark' | 'system') {
+  return ({ children }: { children: ReactNode }) => (
+    <ThemeProvider defaultMode={mode}>
+      <DensityProvider>{children}</DensityProvider>
+    </ThemeProvider>
+  );
+}
+
+describe('ThemeProvider', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('starts with the given defaultMode', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: wrapperFactory('dark') });
+    expect(result.current.mode).toBe('dark');
+    expect(result.current.resolved).toBe('dark');
+  });
+
+  it('persists setMode to localStorage', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: wrapperFactory() });
+    act(() => result.current.setMode('light'));
+    expect(window.localStorage.getItem('bizar:theme')).toBe('light');
+    expect(result.current.mode).toBe('light');
+  });
+
+  it('cycles light → dark → system → light', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: wrapperFactory('light') });
+    expect(result.current.mode).toBe('light');
+
+    act(() => result.current.cycle());
+    expect(result.current.mode).toBe('dark');
+
+    act(() => result.current.cycle());
+    expect(result.current.mode).toBe('system');
+
+    act(() => result.current.cycle());
+    expect(result.current.mode).toBe('light');
+  });
+
+  it('writes data-theme to documentElement on mount', () => {
+    renderHook(() => useTheme(), { wrapper: wrapperFactory('dark') });
+    expect(document.documentElement.dataset['theme']).toBe('dark');
+  });
+});
+
+describe('DensityProvider', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('defaults to comfortable', () => {
+    const { result } = renderHook(() => useDensity(), { wrapper: wrapperFactory() });
+    expect(result.current.density).toBe('comfortable');
+  });
+
+  it('toggle flips between comfortable and compact', () => {
+    const { result } = renderHook(() => useDensity(), { wrapper: wrapperFactory() });
+    act(() => result.current.toggle());
+    expect(result.current.density).toBe('compact');
+    expect(window.localStorage.getItem('bizar:density')).toBe('compact');
+
+    act(() => result.current.toggle());
+    expect(result.current.density).toBe('comfortable');
+  });
+
+  it('writes data-density to documentElement', () => {
+    renderHook(() => useDensity(), { wrapper: wrapperFactory() });
+    expect(document.documentElement.dataset['density']).toBe('comfortable');
+  });
+});
+
+describe('hook usage outside provider', () => {
+  it('useTheme throws when used without a provider', () => {
+    // suppress React's error boundary log
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => renderHook(() => useTheme())).toThrow(/ThemeProvider/);
+    spy.mockRestore();
+  });
+
+  it('useDensity throws when used without a provider', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => renderHook(() => useDensity())).toThrow(/DensityProvider/);
+    spy.mockRestore();
+  });
+});