Use explicit values, inspect every generated line and keep the source document meaningful before visual placement.
Treat the template as a matrix
Every quoted row in grid-template-areas has exactly the same number of tokens as the explicit column count. GridWeave fills a selected rectangle with its validated lowercase name and emits a dot for every uncovered cell. The same name cannot appear in two disconnected islands or an L shape: CSS requires one filled rectangle. The editor therefore accepts start row, start column and positive spans instead of arbitrary cell painting.
Keep names and placements auditable
Names use a strict lowercase identifier so the generated class, grid-area value and placeholder HTML agree without escaping. Reserved CSS-wide names are rejected, as are duplicates, overlap and positions beyond the explicit grid. Empty cells remain visible as dots rather than being inferred. These constraints make the copied result predictable, but they do not decide which semantic HTML element should own each area; replace placeholder div elements with the correct landmarks in your component.
Verify the real document order
GridWeave previews the validated visual grid, not the meaning or reading order of your page. Keep source HTML in a logical sequence that works before layout CSS, then test keyboard navigation, zoom, long translated text, narrow widths and assistive technology in the real component. Add responsive breakpoints deliberately in your own stylesheet: the generated explicit tracks describe only the current layout. The capsule stores no layout, so keep accepted CSS and HTML in source control.