`}
diff --git a/assets/js/components.js b/assets/js/components.js
index acb436e..5656182 100644
--- a/assets/js/components.js
+++ b/assets/js/components.js
@@ -7,6 +7,7 @@
// Exports (in order of appearance):
// CustomSelect({ value, options, onChange, ... }) styled dropdown pill
// VentPill({ checked, onChange, label, title }) checkbox fused to pill
+// RowStepper({ value, onChange, showLabel }) table row-interval stepper
// SkyScope({ elev, dt, glob, size }) small porthole per hour
// WindVane({ bearing, size }) compass-arrow widget
// CloudIcon({ category, size, elev, dt }) cloud/sun glyph
@@ -257,6 +258,40 @@ export function VentPill({ checked, onChange, label, title, grpClass }) {
`;
}
+// -------------------------------------------------------------------
+// ROWSTEPPER - "Rows [-] 3h [+]"
+// -------------------------------------------------------------------
+// Sets how many hours each forecast row covers. NOT a lookahead: the
+// value picks the clock-aligned bucket size used by aggregateRows()
+// (1h = every hour, 4h = quarter-day blocks).
+//
+// "-" steps toward 1h (finer, more rows), "+" toward 4h (coarser).
+// Direction follows the readout, so + always raises the number shown.
+//
+// props:
+// value - 1..4
+// onChange - fn(n)
+// showLabel - draw the "Rows" caption (off inside the Hour header,
+// where the column title already supplies the context)
+// min/max - bounds, so 6h/12h can be added without a redesign
+// -------------------------------------------------------------------
+export function RowStepper({ value, onChange, showLabel = true, min = 1, max = 4 }) {
+ const v = Math.min(max, Math.max(min, Number(value) || min));
+ const step = (n) => { const next = Math.min(max, Math.max(min, n)); if (next !== v) onChange(next); };
+ return html`
+
+ ${showLabel && html`Rows`}
+
+ ${v}h
+
+ `;
+}
+
// -------------------------------------------------------------------
// SKYSCOPE - the little porthole circle next to each hour.
// -------------------------------------------------------------------
diff --git a/assets/js/config.js b/assets/js/config.js
index 4ca5812..deeda1f 100644
--- a/assets/js/config.js
+++ b/assets/js/config.js
@@ -251,7 +251,7 @@ export const workVariantKeys = ['farming', 'construction', 'market', 'windowclea
// Tooltip text shown when the user clicks/hovers a table column header.
export const COL_DESCRIPTIONS = {
- hour: { title: 'Hour', desc: 'Local wall-clock time for this forecast row. Each row covers one hour.' },
+ hour: { title: 'Hour', desc: 'Local wall-clock time for this forecast row. Each row covers the interval set by the Rows stepper, clock-aligned from midnight — at 3h, a row labelled 09:00 spans 09:00–11:59. Totals like rainfall are summed across the block, risk figures show the block\'s peak, and smooth readings like air temperature are averaged.' },
air: { title: 'Air Temperature', desc: 'Measured air temperature at 2 m above the ground. This is the standard thermometer reading — it does not account for sun, wind, or humidity.' },
shadeT: { title: 'Shade Air', desc: 'Estimated air temperature sitting in the typical shade of the selected Solar Model — building shadow, beach umbrella, tree canopy, boat panels, and so on. Sheltered, sun-warmed surroundings push it above the official open-ground Air figure on calm sunny hours; wind and cloud pull it back toward it. This is an estimate, not a measurement, and differs from the standardised 2 m Air reading.' },
rh: { title: 'Relative Humidity', desc: 'How much moisture the air holds relative to its maximum capacity at that temperature. High RH makes warm days feel stickier and cold days feel rawer.' },
diff --git a/assets/js/hooks/useAppState.js b/assets/js/hooks/useAppState.js
index 5abe0f4..84d5509 100644
--- a/assets/js/hooks/useAppState.js
+++ b/assets/js/hooks/useAppState.js
@@ -529,12 +529,12 @@ export function useAppState() {
return next;
});
- // Table row interval: 1 = every hour (default), 2/3/4 = clock-aligned buckets.
+ // Table row interval: 1 = every hour, 2/3/4 = clock-aligned buckets. Default 2.
const [tableInterval, setTableIntervalState] = useState(() => {
- try { const n = parseInt(localStorage.getItem('sunscope_table_interval'), 10); return [1, 2, 3, 4].includes(n) ? n : 3; } catch (e) { return 3; }
+ try { const n = parseInt(localStorage.getItem('sunscope_table_interval'), 10); return [1, 2, 3, 4].includes(n) ? n : 2; } catch (e) { return 2; }
});
const setTableInterval = (n) => setTableIntervalState(() => {
- const next = [1, 2, 3, 4].includes(n) ? n : 1;
+ const next = [1, 2, 3, 4].includes(n) ? n : 2;
try { localStorage.setItem('sunscope_table_interval', String(next)); } catch (e) { /* ignore */ }
return next;
});