3.6

New hour selection
Animated UI elements

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 }) {
     </label>`;
 }
 
+// -------------------------------------------------------------------
+// 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`
+    <span class="row-stepper" role="group" aria-label="Row interval">
+      ${showLabel && html`<span class="row-stepper-label">Rows</span>`}
+      <button type="button" class="row-stepper-btn" disabled=${v <= min}
+        title="Finer rows" aria-label="Finer rows - fewer hours per row"
+        onClick=${() => step(v - 1)}>−</button>
+      <span class="row-stepper-value" aria-live="polite"
+        title=${v === 1 ? 'Every hour' : `Every ${v} hours`}>${v}h</span>
+      <button type="button" class="row-stepper-btn" disabled=${v >= max}
+        title="Coarser rows" aria-label="Coarser rows - more hours per row"
+        onClick=${() => step(v + 1)}>+</button>
+    </span>`;
+}
+
 // -------------------------------------------------------------------
 // SKYSCOPE - the little porthole circle next to each hour.
 // -------------------------------------------------------------------