useGrid

function useGrid(): UseGridResult;

interface UseGridResult {
    gridConfig: GridConfig;
    toggleGrid: () => void;
    toggleSnap: () => void;
    setGridSize: (size: number) => void;
}

interface GridConfig {
    enabled: boolean;
    size: number;          // default: 20
    snapEnabled: boolean;
    snapThreshold: number; // default: 5
    visible: boolean;
}

import { useGrid } from '@hfu.digital/boardkit-react';

function GridControls() {
    const { gridConfig, toggleGrid, toggleSnap, setGridSize } = useGrid();

    return (
        <div>
            <button onClick={toggleGrid}>
                Grid: {gridConfig.enabled ? 'On' : 'Off'}
            </button>
            <button onClick={toggleSnap}>
                Snap: {gridConfig.snapEnabled ? 'On' : 'Off'}
            </button>
            <select
                value={gridConfig.size}
                onChange={(e) => setGridSize(Number(e.target.value))}
            >
                <option value={10}>10px</option>
                <option value={20}>20px (default)</option>
                <option value={40}>40px</option>
            </select>
        </div>
    );
}