"use client"; import type { HTMLAttributes } from "react"; import { useEffect, useId, useRef, useState } from "react"; export type BlueprintGridBgProps = HTMLAttributes & { /** Minor cell size, in pixels. */ cell?: number; /** Minor cells per major cell. */ majorEvery?: number; /** Draws measured rulers along the top and left edges. */ showRuler?: boolean; /** Label value of one major cell, for example 10 with unit "mm". */ unitsPerMajor?: number; unit?: string; }; const RULER = 22; export function BlueprintGridBg({ children, cell = 16, majorEvery = 5, showRuler = true, unitsPerMajor = 10, unit = "mm", className = "", ...props }: BlueprintGridBgProps) { const baseId = "foundry-grid-" + useId().replace(/[^a-zA-Z0-9_-]/g, ""); const root = useRef(null); const [size, setSize] = useState<{ width: number; height: number } | null>(null); const major = cell * majorEvery; useEffect(() => { const element = root.current; if (!element) return; const measure = () => { const width = element.clientWidth; const height = element.clientHeight; if (width > 0 && height > 0) setSize({ width, height }); }; measure(); if (typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(measure); observer.observe(element); return () => observer.disconnect(); }, []); const xTicks = size && showRuler ? Array.from({ length: Math.floor((size.width - RULER) / cell) + 1 }, (_, index) => index) : []; const yTicks = size && showRuler ? Array.from({ length: Math.floor((size.height - RULER) / cell) + 1 }, (_, index) => index) : []; return (

{children}

); }