@metron-labs/quote-react 0.1.58 → 0.1.60

package/dist/app/stages/ScheduleResultsStage.js

@@ -598,17 +598,8 @@ export default function ScheduleResultsStage({ scheduleResult, onStartOver, cart
         onCartSeeded();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [cartSeeded]);
-    // The cart is authoritative once a row has been added. Rebuilding an existing row from
-    // scheduleResult can overwrite contextual quantities resolved in the basket when the
-    // user navigates back here. Only seed rows that are not already present.
-    useEffect(() => {
-        for (const row of rows) {
-            const existing = cart[row.item.line_id];
-            if (!existing && !row.unmatchable && row.best)
-                onAddToCart(toCartItem(row));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [scheduleResult]);
+    // After seeding, the cart is authoritative: coming back here never re-adds a line the user
+    // removed in the basket, nor rebuilds one and overwrites quantities resolved there.
     useEffect(() => {
         if (!selectedReviewId) {
             setCatalogueSearchResults([]);

package/dist/components/estimators/BrickBlockEstimator.js

@@ -5,7 +5,14 @@ const BRICK_COVERAGE = 60;
 const BLOCK_COVERAGE = 10;
 const BRICK_MORTAR_M3_PER_M2 = 0.02;
 const BLOCK_MORTAR_M3_PER_M2 = 0.012;
-const MORTAR_MIX_YIELD_M3 = 0.01;
+// Mortar is mixed on site from general purpose cement and building sand, 1:4 by volume. Dry
+// materials bulk up by about a third before water goes in, so each m³ of mortar takes 1.33 m³ of
+// dry mix. Both are asked for by weight; the basket turns that into the merchant's bags.
+const MORTAR_CEMENT_PARTS = 1;
+const MORTAR_SAND_PARTS = 4;
+const MORTAR_DRY_VOLUME_FACTOR = 1.33;
+const CEMENT_KG_PER_M3 = 1440;
+const SAND_KG_PER_M3 = 1600;
 const toNumber = (value) => Number.parseFloat(value) || 0;
 const formatNumber = (value, decimals = 2) => value.toFixed(decimals);
 export default function BrickBlockEstimator({ onBack, onReview, submitLabel = "Add to basket" }) {
@@ -20,7 +27,9 @@ export default function BrickBlockEstimator({ onBack, onReview, submitLabel = "A
     const baseUnits = areaM2 * coverage;
     const units = Math.ceil(baseUnits);
     const mortarM3 = areaM2 * (masonryType === "brick" ? BRICK_MORTAR_M3_PER_M2 : BLOCK_MORTAR_M3_PER_M2);
-    const mortarBags = Math.ceil(mortarM3 / MORTAR_MIX_YIELD_M3);
+    const dryMixM3 = (mortarM3 * MORTAR_DRY_VOLUME_FACTOR) / (MORTAR_CEMENT_PARTS + MORTAR_SAND_PARTS);
+    const cementKg = Math.ceil(dryMixM3 * MORTAR_CEMENT_PARTS * CEMENT_KG_PER_M3);
+    const sandKg = Math.ceil(dryMixM3 * MORTAR_SAND_PARTS * SAND_KG_PER_M3);
     const displayedArea = unit === "metric" ? areaM2 : areaM2 * 10.7639;
     // Masonry requested as wall area - units per m² is a property of the brick or block.
     const requirements = [
@@ -34,7 +43,12 @@ export default function BrickBlockEstimator({ onBack, onReview, submitLabel = "A
             query: masonryType === "brick" ? "facing brick" : "concrete block",
             category: "masonry",
         },
-        ...(addMortar ? [{ key: "mortar", label: "Blue Circle Quality Assured Mortar Mix 20kg", qty: mortarBags, unit: "bag", query: "ready mixed mortar", category: "mortar" }] : []),
+        ...(addMortar
+            ? [
+                { key: "mortar-cement", label: "General purpose cement", qty: cementKg, unit: "kg", query: "general purpose cement", category: "cement" },
+                { key: "mortar-sand", label: "Building sand", qty: sandKg, unit: "kg", query: "building sand", category: "aggregate" },
+            ]
+            : []),
     ];
     const changeUnit = (nextUnit) => {
         if (nextUnit === unit)
@@ -44,12 +58,12 @@ export default function BrickBlockEstimator({ onBack, onReview, submitLabel = "A
         setWidth((toNumber(width) * factor).toFixed(2));
         setUnit(nextUnit);
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "truss-estimator", children: [_jsxs("div", { className: "quick-order-hero", children: [_jsx("div", { className: "quick-order-eyebrow", children: "Estimating Tools" }), _jsx("h1", { children: "Brick and Block Calculator" }), _jsx("p", { children: "Estimate masonry units, sand and cement for a wall." })] }), _jsxs("div", { className: "truss-estimator__card brick-calculator", children: [_jsx("h2", { className: "truss-estimator__step-title", children: "Wall area and masonry type" }), _jsx("p", { className: "truss-estimator__step-sub", children: "Pick brick or block and enter the wall dimensions for unit counts plus ready-mixed mortar." }), _jsxs("div", { className: "brick-calculator__section", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Masonry type" }), _jsx("div", { className: "truss-estimator__option-grid truss-estimator__option-grid--two", children: [
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "truss-estimator", children: [_jsxs("div", { className: "quick-order-hero", children: [_jsx("div", { className: "quick-order-eyebrow", children: "Estimating Tools" }), _jsx("h1", { children: "Brick and Block Calculator" }), _jsx("p", { children: "Estimate masonry units, sand and cement for a wall." })] }), _jsxs("div", { className: "truss-estimator__card brick-calculator", children: [_jsx("h2", { className: "truss-estimator__step-title", children: "Wall area and masonry type" }), _jsx("p", { className: "truss-estimator__step-sub", children: "Pick brick or block and enter the wall dimensions for unit counts plus the cement and sand for the mortar." }), _jsxs("div", { className: "brick-calculator__section", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Masonry type" }), _jsx("div", { className: "truss-estimator__option-grid truss-estimator__option-grid--two", children: [
                                         ["brick", "Brick"],
                                         ["block", "Block"],
                                     ].map(([id, label]) => (_jsxs("button", { type: "button", className: `truss-estimator__option-card${masonryType === id ? " is-selected" : ""}`, onClick: () => setMasonryType(id), children: [_jsx("div", { className: "truss-estimator__option-title", children: label }), _jsxs("div", { className: "truss-estimator__option-copy", children: ["Approx. ", id === "brick" ? BRICK_COVERAGE : BLOCK_COVERAGE, " per m\u00B2"] })] }, id))) })] }), masonryType === "brick" && (_jsxs("div", { className: "brick-calculator__section", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Brick type" }), _jsx("div", { className: "truss-estimator__option-grid truss-estimator__option-grid--three", children: [
                                         ["common", "Common concrete", "General-purpose grey concrete brick"],
                                         ["engineering-red", "Engineering red", "Class B perforated, 65mm"],
                                         ["engineering-blue", "Engineering blue", "Class B solid, 65mm"],
-                                    ].map(([id, label, blurb]) => (_jsxs("button", { type: "button", className: `truss-estimator__option-card${brickOption === id ? " is-selected" : ""}`, onClick: () => setBrickOption(id), children: [_jsx("div", { className: "truss-estimator__option-title", children: label }), _jsx("div", { className: "truss-estimator__option-copy", children: blurb })] }, id))) })] })), _jsxs("div", { className: "brick-calculator__section", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Wall dimensions" }), _jsxs("div", { className: "brick-calculator__unit-toggle", role: "group", "aria-label": "Measurement units", children: [_jsx("button", { type: "button", className: unit === "metric" ? "is-selected" : "", onClick: () => changeUnit("metric"), children: "Metric" }), _jsx("button", { type: "button", className: unit === "imperial" ? "is-selected" : "", onClick: () => changeUnit("imperial"), children: "Imperial" })] }), _jsxs("div", { className: "truss-estimator__field-grid", children: [_jsxs("label", { className: "truss-estimator__field", children: [_jsxs("span", { children: ["Height (", unit === "metric" ? "m" : "ft", ")"] }), _jsx("input", { type: "number", min: "0", step: "0.01", value: height, onChange: (event) => setHeight(event.target.value) })] }), _jsxs("label", { className: "truss-estimator__field", children: [_jsxs("span", { children: ["Width (", unit === "metric" ? "m" : "ft", ")"] }), _jsx("input", { type: "number", min: "0", step: "0.01", value: width, onChange: (event) => setWidth(event.target.value) })] })] })] }), _jsx("div", { className: "brick-calculator__options", children: _jsxs("label", { className: "brick-calculator__checkbox", children: [_jsx("input", { type: "checkbox", checked: addMortar, onChange: (event) => setAddMortar(event.target.checked) }), _jsx("span", { children: "Include ready-mixed mortar" })] }) }), _jsxs("div", { className: "brick-calculator__totals", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Totals" }), _jsxs("div", { className: "brick-calculator__result-grid", children: [_jsxs("div", { children: [_jsx("span", { children: "Wall area" }), _jsxs("strong", { children: [formatNumber(displayedArea), " ", unit === "metric" ? "m²" : "ft²"] })] }), _jsxs("div", { children: [_jsx("span", { children: masonryType === "brick" ? "Bricks" : "Blocks" }), _jsx("strong", { children: units.toLocaleString("en-GB") })] }), addMortar ? (_jsxs("div", { children: [_jsx("span", { children: "Ready-mixed mortar" }), _jsxs("strong", { children: [mortarBags, " x 20kg bags"] })] })) : null] }), _jsx("p", { className: "brick-calculator__note", children: "Estimate based on standard nominal sizes and 10mm joints. Mortar bags are approximate; confirm the required mortar specification before ordering." })] }), _jsxs("div", { className: "brick-calculator__actions", children: [_jsx("button", { type: "button", className: "cta-btn cta-btn-secondary estimator-actions__back", onClick: onBack, children: "Back" }), _jsx("button", { type: "button", className: "cta-btn estimator-actions__calculate", onClick: () => onReview?.(requirements), disabled: areaM2 <= 0, children: submitLabel })] })] })] }) }));
+                                    ].map(([id, label, blurb]) => (_jsxs("button", { type: "button", className: `truss-estimator__option-card${brickOption === id ? " is-selected" : ""}`, onClick: () => setBrickOption(id), children: [_jsx("div", { className: "truss-estimator__option-title", children: label }), _jsx("div", { className: "truss-estimator__option-copy", children: blurb })] }, id))) })] })), _jsxs("div", { className: "brick-calculator__section", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Wall dimensions" }), _jsxs("div", { className: "brick-calculator__unit-toggle", role: "group", "aria-label": "Measurement units", children: [_jsx("button", { type: "button", className: unit === "metric" ? "is-selected" : "", onClick: () => changeUnit("metric"), children: "Metric" }), _jsx("button", { type: "button", className: unit === "imperial" ? "is-selected" : "", onClick: () => changeUnit("imperial"), children: "Imperial" })] }), _jsxs("div", { className: "truss-estimator__field-grid", children: [_jsxs("label", { className: "truss-estimator__field", children: [_jsxs("span", { children: ["Height (", unit === "metric" ? "m" : "ft", ")"] }), _jsx("input", { type: "number", min: "0", step: "0.01", value: height, onChange: (event) => setHeight(event.target.value) })] }), _jsxs("label", { className: "truss-estimator__field", children: [_jsxs("span", { children: ["Width (", unit === "metric" ? "m" : "ft", ")"] }), _jsx("input", { type: "number", min: "0", step: "0.01", value: width, onChange: (event) => setWidth(event.target.value) })] })] })] }), _jsx("div", { className: "brick-calculator__options", children: _jsxs("label", { className: "brick-calculator__checkbox", children: [_jsx("input", { type: "checkbox", checked: addMortar, onChange: (event) => setAddMortar(event.target.checked) }), _jsx("span", { children: "Include mortar (cement and building sand, mixed 1:4)" })] }) }), _jsxs("div", { className: "brick-calculator__totals", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Totals" }), _jsxs("div", { className: "brick-calculator__result-grid", children: [_jsxs("div", { children: [_jsx("span", { children: "Wall area" }), _jsxs("strong", { children: [formatNumber(displayedArea), " ", unit === "metric" ? "m²" : "ft²"] })] }), _jsxs("div", { children: [_jsx("span", { children: masonryType === "brick" ? "Bricks" : "Blocks" }), _jsx("strong", { children: units.toLocaleString("en-GB") })] }), addMortar ? (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("span", { children: "Cement" }), _jsxs("strong", { children: [cementKg, " kg"] })] }), _jsxs("div", { children: [_jsx("span", { children: "Building sand" }), _jsxs("strong", { children: [sandKg, " kg"] })] })] })) : null] }), _jsx("p", { className: "brick-calculator__note", children: "Estimate based on standard nominal sizes and 10mm joints. Mortar is a general purpose 1:4 cement and sand mix; quantities are approximate, so confirm the specification before ordering." })] }), _jsxs("div", { className: "brick-calculator__actions", children: [_jsx("button", { type: "button", className: "cta-btn cta-btn-secondary estimator-actions__back", onClick: onBack, children: "Back" }), _jsx("button", { type: "button", className: "cta-btn estimator-actions__calculate", onClick: () => onReview?.(requirements), disabled: areaM2 <= 0, children: submitLabel })] })] })] }) }));
 }

package/dist/components/estimators/DeckingEstimator.js

@@ -159,7 +159,7 @@ export default function DeckingEstimator({ onBack, onReview, submitLabel = "Add
     const results = computeResults();
     const requirements = results
         ? [
-            { key: `boards-${state.range ?? "meridian"}`, label: `Deck boards (${results.range.label})`, qty: results.boardCount, unit: "each", query: "timber decking board", category: "decking", calculatorWasteIncluded: true },
+            { key: `boards-${state.range ?? "meridian"}`, label: `Deck boards (${results.range.label})`, qty: Math.round(results.boardCount * results.range.boardLengthM * 100) / 100, unit: "m", query: "timber decking board", category: "decking", calculatorWasteIncluded: true },
             { key: "joists", label: "Treated C24 joists", qty: results.joistMetres, unit: "m", query: "treated joist", category: "timber", calculatorWasteIncluded: true },
             { key: "screws", label: "Green decking screws (200/box)", qty: results.screwBoxes, unit: "box", query: "green decking screws", category: "fixings", calculatorWasteIncluded: true },
         ]

package/dist/components/estimators/EstimatorResults.js

@@ -7,7 +7,7 @@ import ForwardArrow from "../ForwardArrow";
 import { renderDisplayUnit, formatPriceBasis } from "../../app/components/UnitDisplay";
 import { useOptionalCart } from "../../lib/cart/CartContext";
 import { candidateToCartItem } from "../../lib/boq/toCartItem";
-import { fetchCatalogueStatus, resolveRequirements, searchCatalogue } from "../../lib/estimators/resolveProducts";
+import { estimateRequestUnit, fetchCatalogueStatus, resolveRequirements, searchCatalogue } from "../../lib/estimators/resolveProducts";
 import { fmtCurrency, fmtQty } from "../../lib/formatters";
 import { productImageSrc } from "../../lib/productImage";
 import { getPricingBreakdown } from "../../util/pricing";
@@ -64,7 +64,7 @@ export default function EstimatorResults({ toolId, requirements, ready, onBack,
     const toCartLine = (row) => candidateToCartItem(row.chosen, {
         lineId: lineIdFor(row.requirement.key),
         description: row.requirement.label,
-        unit: row.requirement.unit,
+        unit: estimateRequestUnit(row.requirement.unit, row.chosen),
         qty: row.requirement.qty,
     });
     // Requirements are rebuilt on every render; only their content should retrigger a lookup.

package/dist/components/estimators/FencingEstimator.js

@@ -23,7 +23,7 @@ const CONFIG = {
     },
     heights: ["0.9", "1.2", "1.5", "1.8"],
     gate: {
-        single: { label: "Single lap gate", widthDefault: 0.9 },
+        single: { label: "Single gate", widthDefault: 0.9 },
     },
     mounting: {
         concrete: { label: "Concrete posts", blurb: "Slotted concrete posts with matching panels." },
@@ -212,7 +212,8 @@ export default function FencingEstimator({ onBack, onReview, submitLabel = "Add
                     { key: `timber-post-${postLength}`, label: "Timber fence posts", qty: results.totalPostCount, unit: "each", query: "timber fence post", category: "fencing" },
                     { key: "postcrete", label: "Postcrete", qty: results.bagsCount, unit: "bag", query: "postcrete", category: "cement" },
                 ]),
-            ...(gateLabel ? [{ key: "gate", label: gateLabel, qty: 1, unit: "each", query: "lap gate", category: "fencing" }] : []),
+            // The gate matches the panels: a lap gate in a lap fence, a feather edge gate in a feather edge one.
+            ...(gateLabel ? [{ key: `gate-${state.range ?? "boundary"}`, label: state.range === "skyline" ? "Single feather edge gate" : "Single lap gate", qty: 1, unit: "each", query: state.range === "skyline" ? "feather edge gate" : "lap gate", category: "fencing" }] : []),
             ...(results.gravelCount > 0
                 ? [{ key: "gravel-boards", label: "Concrete gravel boards", qty: results.gravelCount, unit: "each", query: "gravel board", category: "fencing" }]
                 : []),

package/dist/components/estimators/InsulationEstimator.js

@@ -1,16 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-// byArea: ask for the area and let the matched product's own coverage turn it into packs, which
-// is right whichever client's product it is. Floor and wall still ask for packs worked out from
-// the coverage here.
-// ponytail: floor/wall stay on packs because FORT's catalogue coverage for its floor roll and wall
-// slab is wrong (0.06 and 0.546 m2); switch them to byArea once that data is fixed.
+// The basket is asked for the area; the matched product's own coverage turns it into packs, which
+// is right whichever merchant's product it is. coverage here only feeds the on-screen pack estimate.
 const APPLICATIONS = {
-    floor: { label: "Floor", product: "Knauf Acoustic Roll", thickness: "100mm", coverage: 12.36, salesUnit: "roll" },
-    wall: { label: "Cavity wall", product: "Celotex CW4100", thickness: "100mm", coverage: 3.24, salesUnit: "pack" },
-    roof: { label: "Pitched roof", product: "Kingspan K107", thickness: "100mm", coverage: 8.64, salesUnit: "pack", byArea: true },
-    loft: { label: "Loft", product: "Knauf Loft Roll 44", thickness: "100mm", coverage: 13.89, salesUnit: "roll", byArea: true },
+    // Between joists of an upstairs floor, where the job is sound; a ground floor needs heat kept in.
+    floor: { label: "Floor between rooms", product: "Knauf Acoustic Roll", thickness: "100mm", coverage: 12.36 },
+    ground: { label: "Ground floor", product: "Rigid PIR insulation board", thickness: "100mm", coverage: 2.88 },
+    wall: { label: "Cavity wall", product: "Celotex CW4100", thickness: "100mm", coverage: 3.24 },
+    roof: { label: "Pitched roof", product: "Kingspan K107", thickness: "100mm", coverage: 8.64 },
+    loft: { label: "Loft", product: "Knauf Loft Roll 44", thickness: "100mm", coverage: 13.89 },
 };
 export default function InsulationEstimator({ onBack, onReview, submitLabel = "Add to basket" }) {
     const [application, setApplication] = useState("floor");
@@ -23,12 +22,12 @@ export default function InsulationEstimator({ onBack, onReview, submitLabel = "A
         {
             key: `insulation-${application}`,
             label: `${selected.product} ${selected.thickness}`,
-            qty: selected.byArea ? Math.round(area * 100) / 100 : packs,
-            unit: selected.byArea ? "m2" : selected.salesUnit,
+            qty: Math.round(area * 100) / 100,
+            unit: "m2",
             query: selected.product,
             category: "insulation",
         },
     ];
     const applications = Object.entries(APPLICATIONS);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "truss-estimator", children: [_jsxs("div", { className: "quick-order-hero", children: [_jsx("div", { className: "quick-order-eyebrow", children: "Estimating Tools" }), _jsx("h1", { children: "Insulation Calculator" }), _jsx("p", { children: "Estimate insulation coverage and pack quantities for floors, walls, roofs and lofts." })] }), _jsxs("div", { className: "truss-estimator__card materials-calculator", children: [_jsx("h2", { className: "truss-estimator__step-title", children: "Where and what you are insulating" }), _jsx("p", { className: "truss-estimator__step-sub", children: "Choose the application and product, and enter the area, for coverage and pack quantities." }), _jsxs("div", { className: "materials-calculator__section", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Application" }), _jsx("div", { className: "truss-estimator__option-grid truss-estimator__option-grid--two", children: applications.map(([id, option]) => _jsxs("button", { type: "button", className: `truss-estimator__option-card${application === id ? " is-selected" : ""}`, onClick: () => setApplication(id), children: [_jsx("div", { className: "truss-estimator__option-title", children: option.label }), _jsxs("div", { className: "truss-estimator__option-copy", children: [option.product, ", ", option.thickness] })] }, id)) })] }), _jsxs("div", { className: "materials-calculator__section", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Area" }), _jsxs("div", { className: "truss-estimator__field-grid", children: [_jsxs("label", { className: "truss-estimator__field", children: [_jsx("span", { children: "Length (m)" }), _jsx("input", { type: "number", min: "0", step: "0.01", value: length, onChange: (event) => setLength(event.target.value) })] }), _jsxs("label", { className: "truss-estimator__field", children: [_jsx("span", { children: "Width (m)" }), _jsx("input", { type: "number", min: "0", step: "0.01", value: width, onChange: (event) => setWidth(event.target.value) })] })] })] }), _jsxs("div", { className: "materials-calculator__totals", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Totals" }), _jsxs("div", { className: "materials-calculator__result-grid", children: [_jsxs("div", { children: [_jsx("span", { children: "Insulated area" }), _jsxs("strong", { children: [area.toFixed(2), " m\u00B2"] })] }), _jsxs("div", { children: [_jsx("span", { children: selected.product }), _jsxs("strong", { children: [packs, " packs"] })] })] }), _jsx("p", { className: "materials-calculator__note", children: "This is a simple product choice, not thermal or Building Regulations advice. Confirm the specification before ordering." })] }), _jsxs("div", { className: "materials-calculator__actions", children: [_jsx("button", { type: "button", className: "cta-btn cta-btn-secondary estimator-actions__back", onClick: onBack, children: "Back" }), _jsx("button", { type: "button", className: "cta-btn estimator-actions__calculate", onClick: () => onReview?.(requirements), disabled: area <= 0, children: submitLabel })] })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "truss-estimator", children: [_jsxs("div", { className: "quick-order-hero", children: [_jsx("div", { className: "quick-order-eyebrow", children: "Estimating Tools" }), _jsx("h1", { children: "Insulation Calculator" }), _jsx("p", { children: "Estimate insulation coverage and pack quantities for floors, walls, roofs and lofts." })] }), _jsxs("div", { className: "truss-estimator__card materials-calculator", children: [_jsx("h2", { className: "truss-estimator__step-title", children: "Where and what you are insulating" }), _jsx("p", { className: "truss-estimator__step-sub", children: "Choose the application and product, and enter the area, for coverage and pack quantities." }), _jsxs("div", { className: "materials-calculator__section", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Application" }), _jsx("div", { className: "truss-estimator__option-grid truss-estimator__option-grid--three", children: applications.map(([id, option]) => _jsxs("button", { type: "button", className: `truss-estimator__option-card${application === id ? " is-selected" : ""}`, onClick: () => setApplication(id), children: [_jsx("div", { className: "truss-estimator__option-title", children: option.label }), _jsxs("div", { className: "truss-estimator__option-copy", children: [option.product, ", ", option.thickness] })] }, id)) })] }), _jsxs("div", { className: "materials-calculator__section", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Area" }), _jsxs("div", { className: "truss-estimator__field-grid", children: [_jsxs("label", { className: "truss-estimator__field", children: [_jsx("span", { children: "Length (m)" }), _jsx("input", { type: "number", min: "0", step: "0.01", value: length, onChange: (event) => setLength(event.target.value) })] }), _jsxs("label", { className: "truss-estimator__field", children: [_jsx("span", { children: "Width (m)" }), _jsx("input", { type: "number", min: "0", step: "0.01", value: width, onChange: (event) => setWidth(event.target.value) })] })] })] }), _jsxs("div", { className: "materials-calculator__totals", children: [_jsx("div", { className: "truss-estimator__section-heading", children: "Totals" }), _jsxs("div", { className: "materials-calculator__result-grid", children: [_jsxs("div", { children: [_jsx("span", { children: "Insulated area" }), _jsxs("strong", { children: [area.toFixed(2), " m\u00B2"] })] }), _jsxs("div", { children: [_jsx("span", { children: selected.product }), _jsxs("strong", { children: [packs, " packs"] })] })] }), _jsx("p", { className: "materials-calculator__note", children: "This is a simple product choice, not thermal or Building Regulations advice. Confirm the specification before ordering." })] }), _jsxs("div", { className: "materials-calculator__actions", children: [_jsx("button", { type: "button", className: "cta-btn cta-btn-secondary estimator-actions__back", onClick: onBack, children: "Back" }), _jsx("button", { type: "button", className: "cta-btn estimator-actions__calculate", onClick: () => onReview?.(requirements), disabled: area <= 0, children: submitLabel })] })] })] }) }));
 }