// Small architectural visualizations, keyed by calc slug. // Sized to a 240×96 viewBox; styled via currentColor + var(--cat-accent). // Kept intentionally schematic — these are blueprints, not illustrations. const VIZ_PROPS = { viewBox: '0 0 240 96', preserveAspectRatio: 'xMidYMid meet', xmlns: 'http://www.w3.org/2000/svg' }; const CalcViz = { // -------- PAINT -------- 'wall-paint': () => ( ), 'trim-ceiling-paint': () => ( {/* Ceiling band */} {/* Wall */} {/* Door casing */} {/* Window casing */} {/* Baseboard */} ), 'square-footage': () => ( ), // -------- CONCRETE -------- 'concrete-slab': () => ( {/* Slab in perspective */} {/* Front face */} {/* Right face */} {/* Thickness tick marks */} ), 'footing-pier': () => ( {/* Ground line */} {/* Pier 1 — sonotube */} {/* Pier 2 */} {/* Pier 3 */} ), // -------- DRYWALL -------- 'drywall-sheets': () => ( {/* corner screws */} {[34, 92, 150, 208].flatMap(x => [18, 78].map(y => ( )))} ), 'drywall-finishing': () => ( {/* Two sheets meeting */} {/* Feathered mud over seam */} {/* Tape line */} {/* Seam line */} ), // -------- TILE -------- 'tile-boxes': () => ( {[0,1,2,3,4].flatMap(c => [0,1,2].map(r => { const x = 30 + c * 36; const y = 18 + r * 22; const isAccent = (c + r) % 3 === 0; const isCut = c === 4 && r === 0; return ( ); }))} ), 'grout-thinset': () => ( {/* Substrate */} {/* Thinset layer w/ notches */} {/* Tiles */} ), // -------- ROOFING -------- 'roof-pitch': () => ( {/* Right angle base */} {/* Hypotenuse */} {/* Fill */} {/* Right angle marker */} {/* Angle arc */} ), 'shingle-bundles': () => ( {/* Roof slope outline */} {/* Shingle rows */} {[0,1,2,3,4].map(i => { const y = 30 + i * 10; const x1 = 24; const x2 = 24 + (216 - 24) * ((y - 22) / (78 - 22)); const offset = i % 2 === 0 ? 0 : 8; return ( {Array.from({ length: Math.floor((x2 - x1 - offset) / 16) + 1 }).map((_, j) => { const x = x1 + offset + j * 16; if (x + 18 > x2 + 4) return null; return ( ); })} ); })} ), // -------- LUMBER -------- 'board-feet': () => ( {[0,1,2].map(i => { const y = 22 + i * 18; return ( {/* End grain hatching */} ); })} ), 'deck-boards': () => ( {[0,1,2,3,4,5,6].map(i => { const x = 24 + i * 28; const isAccent = i % 3 === 1; return ( ); })} {/* Screw dots */} {[0,1,2,3,4,5,6].flatMap(i => { const cx = 34 + i * 28; return [28, 68].map(cy => ( )); })} ), 'stair-stringer': () => ( {/* Stringer profile */} {/* Tread tops */} {[66, 56, 46, 36, 26].map((y, i) => ( ))} ), // -------- LANDSCAPE -------- 'mulch': () => ( {/* Ground line */} {/* Mulch layer */} {/* Plant stem */} ), 'gravel': () => ( {/* Outline area */} {/* Scattered gravel — deterministic positions */} {[ [46,34,3.5],[62,42,2.8],[78,32,3],[94,46,3.6],[110,36,2.5],[128,44,3.2],[146,32,3.8],[162,44,2.6],[180,36,3.4],[196,42,2.8], [54,56,3.2],[72,62,2.5],[90,58,3.5],[108,66,2.8],[126,56,3.1],[144,64,3.6],[162,58,2.7],[180,66,3.2],[196,60,2.8], [38,68,2.7],[56,72,3.1],[74,68,2.6],[92,72,3.4] ].map(([cx, cy, r], i) => ( ))} ), 'sod': () => ( {/* Sod squares being laid */} {[ [30, 22], [82, 22], [134, 22], [56, 50], [108, 50], [160, 50], [30, 50, true], [186, 22, true] ].map(([x, y, partial], i) => ( {/* Grass blades */} {!partial && [0,1,2,3].map(j => ( ))} ))} ), }; window.CalcViz = CalcViz;