-
- ${[['common','Common'],['places','Places'],['activities','Activities'],['work','Work']].map(([key, label]) => html`
-
- `)}
-
-
+
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openPanel(); } }}
+ style=${rowGradient ? { '--row-bg': rowGradient } : undefined}
+ title="Change profile & settings">
+
+ Profile
+ ${mainLabel}
+
+ ${mainConfigValue && html`
+ ·
+
+ Viewing
+ ${mainConfigValue}
+ `}
+ Change ✎
@@ -295,14 +204,29 @@ export function DayTabs({
const isActive = i === selectedDay;
const dDate = new Date(d.key + 'T00:00Z');
const dayName = i === 0 ? 'Today'
- : i === 1 ? 'Tomorrow'
+ : i === 1 ? 'Tom'
: dDate.toLocaleDateString('en-GB', { weekday: 'short', timeZone: 'UTC' });
- const utcipVals = d.rows.map(r => r.utciAdj).filter(v => isFinite(v));
- const dayHi = utcipVals.length ? Math.round(Math.max(...utcipVals)) : null;
- const dayLo = utcipVals.length ? Math.round(Math.min(...utcipVals)) : null;
- const shadeVals = d.rows.map(r => r.shadeT).filter(v => isFinite(v));
- const shadeHi = shadeVals.length ? Math.round(Math.max(...shadeVals)) : null;
- const shadeLo = shadeVals.length ? Math.round(Math.min(...shadeVals)) : null;
+ const mainVals = d.rows.map(r => r[mainField]).filter(v => isFinite(v));
+ const dayHi = mainVals.length ? Math.round(Math.max(...mainVals)) : null;
+ const dayLo = mainVals.length ? Math.round(Math.min(...mainVals)) : null;
+
+ // Vehicle/Driver: no table column exists for the ventilated cabin
+ // temp (ventilation is just an input toggle on the main vehicleT
+ // calc), so run the physics model again with vent forced on, to
+ // show "if you opened the windows" as a reference hi/lo.
+ let shadeHi = null, shadeLo = null;
+ if (isVehicleProfile) {
+ const speedMph = (VEHICLE_SPEEDS[vehicleSpeed] ?? VEHICLE_SPEEDS.static).mph;
+ const ventVals = d.rows
+ .map(r => calcVehicleInteriorTemp(r.Ta, r.glob, r.elev, vehicleType, true, speedMph))
+ .filter(v => isFinite(v));
+ shadeHi = ventVals.length ? Math.round(Math.max(...ventVals)) : null;
+ shadeLo = ventVals.length ? Math.round(Math.min(...ventVals)) : null;
+ } else if (secondaryField) {
+ const secondaryVals = d.rows.map(r => r[secondaryField]).filter(v => isFinite(v));
+ shadeHi = secondaryVals.length ? Math.round(Math.max(...secondaryVals)) : null;
+ shadeLo = secondaryVals.length ? Math.round(Math.min(...secondaryVals)) : null;
+ }
// Day-tab weather icon - use core daylight rows (elev > 10°) where
// available, falling back to any above-horizon rows, then all rows.
@@ -320,6 +244,30 @@ export function DayTabs({
const repDt = noonRow ? noonRow.dt : dDate;
const showPrecip = dayPrecip >= 0.3 || daySnow >= 0.1;
+ // Vehicle tab: swap the default car glyph for a hazard icon when
+ // conditions could affect driving. Uses the full day (not just
+ // daylight repRows) since fog and frost often hit overnight or on
+ // an early commute, then picks the worst hazard by priority.
+ let vehicleHazard = null;
+ let hazPrecip = 0, hazSnow = 0;
+ if (isVehicleProfile) {
+ const allSnow = d.rows.reduce((s, r) => s + (r.snow || 0), 0);
+ const allPrecip = d.rows.reduce((s, r) => s + (r.precip || 0), 0);
+ const visVals = d.rows.map(r => r.visKm).filter(v => isFinite(v));
+ const minVis = visVals.length ? Math.min(...visVals) : null;
+ const taVals = d.rows.map(r => r.Ta).filter(v => isFinite(v));
+ const minTa = taVals.length ? Math.min(...taVals) : null;
+ if (allSnow >= 0.1) {
+ vehicleHazard = 'snow'; hazSnow = allSnow;
+ } else if (minTa !== null && minTa <= 0 && allPrecip < 0.3) {
+ vehicleHazard = 'ice';
+ } else if (minVis !== null && minVis < 2) {
+ vehicleHazard = 'fog';
+ } else if (allPrecip >= 0.3) {
+ vehicleHazard = 'rain'; hazPrecip = allPrecip;
+ }
+ }
+
// Day-tab colour — PRIORITY model, no hue blending.
// Mixing a warm yellow with grey/blue passes through green, so rather
// than blend temperature with sky we pick ONE dimension by priority and
@@ -336,8 +284,15 @@ export function DayTabs({
const isHot = dayHi !== null && dayHi >= 29; // Hot band and above
const isDanger = tBand.solid === true;
+ // Home/indoor/vehicle tabs show a modelled temperature, not the
+ // outdoor sky, so the tab shade should track that temperature only
+ // — no rain/snow/cloud tinting, and no weather icon.
+ const tempOnly = isHomeOrOffice || isVehicleProfile;
+
let rgb;
- if (isHot) {
+ if (tempOnly) {
+ rgb = hex2rgb(tBand.bg);
+ } else if (isHot) {
// Keep the heat hue; cloud only mutes it a touch (orange/red never
// greens) and rain does not override heat.
const heatFactor = dayHi >= 39 ? 0.15 : dayHi >= 34 ? 0.30 : 0.45;
@@ -409,9 +364,17 @@ export function DayTabs({
${dDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' })}
- ${showPrecip
- ? html`<${PrecipIcon} precip=${dayPrecip} snow=${daySnow} size=${30} />`
- : html`<${CloudIcon} category=${modalCloudCat} elev=${repElev} dt=${repDt} size=${30} />`}
+ ${tempOnly
+ ? (isVehicleProfile
+ ? (vehicleHazard === 'snow' ? html`<${PrecipIcon} precip=${0} snow=${hazSnow} size=${30} />`
+ : vehicleHazard === 'rain' ? html`<${PrecipIcon} precip=${hazPrecip} snow=${0} size=${30} />`
+ : vehicleHazard === 'fog' ? html`<${FogIcon} size=${30} />`
+ : vehicleHazard === 'ice' ? html`<${IceIcon} size=${30} />`
+ : html`<${CarIcon} size=${30} />`)
+ : html`<${HouseIcon} size=${30} />`)
+ : showPrecip
+ ? html`<${PrecipIcon} precip=${dayPrecip} snow=${daySnow} size=${30} />`
+ : html`<${CloudIcon} category=${modalCloudCat} elev=${repElev} dt=${repDt} size=${30} />`}
${dayHi !== null && html`
dateStr >= ev.start && dateStr <= ev.end)
- .map(ev => Object.assign({}, ev, { message: dynamicCosmicMessage(ev, dateStr) }));
+ .map(ev => Object.assign({}, ev, { chance: activityChance(ev, dateStr) }))
+ .filter(ev => ev.chance >= ACTIVITY_THRESHOLD)
+ .map(ev => Object.assign(ev, { message: dynamicCosmicMessage(ev, dateStr) }));
// 3. Weather-derived events (all that match, not just first)
const weatherEvents = [];
diff --git a/assets/js/events/activity-profile.js b/assets/js/events/activity-profile.js
new file mode 100644
index 0000000..07c96e3
--- /dev/null
+++ b/assets/js/events/activity-profile.js
@@ -0,0 +1,52 @@
+// ------------------------------------------------------------------------
+// activity-profile.js - Estimates the % chance of a good viewing on a given
+// day for a multi-day cosmic event (meteor shower, conjunction), based on
+// how far that day sits from the event's peak.
+//
+// The calendar data only has start/end/peak dates, not real activity
+// curves, so this is a simplified heuristic (not live forecast data):
+// chance falls off exponentially from 100% at peak, halving every
+// `riseTau`/`decayTau` days on the approach/departure side. Values below
+// are rough approximations of each shower's real-world activity profile
+// (sharp showers like the Quadrantids get small tau, broad ones like the
+// Eta Aquariids get larger tau) - good enough to gate "is this worth
+// looking up for" without pretending to be precise astronomy.
+//
+// Single-day events (start === end) are always 100% - they only ever
+// appear in COSMIC_CALENDAR on their one active day anyway.
+// ------------------------------------------------------------------------
+
+const ACTIVITY_PROFILES = {
+ quadrantids: { riseTau: 0.3, decayTau: 0.4 },
+ lyrids: { riseTau: 0.6, decayTau: 0.7 },
+ 'eta-aquariids': { riseTau: 3.5, decayTau: 3.0 },
+ perseids: { riseTau: 2.2, decayTau: 1.8 },
+ orionids: { riseTau: 1.5, decayTau: 1.5 },
+ leonids: { riseTau: 0.5, decayTau: 0.6 },
+ geminids: { riseTau: 1.0, decayTau: 1.0 },
+ ursids: { riseTau: 0.4, decayTau: 0.4 },
+ 'mars-conjunction': { riseTau: 1.0, decayTau: 1.0 },
+ 'venus-jupiter-conjunction': { riseTau: 1.0, decayTau: 1.0 },
+};
+
+const DEFAULT_PROFILE = { riseTau: 1.0, decayTau: 1.0 };
+
+function baseKey(id) {
+ return String(id).replace(/-\d{4}$/, '');
+}
+
+export function getActivityProfile(id) {
+ return ACTIVITY_PROFILES[baseKey(id)] || DEFAULT_PROFILE;
+}
+
+// Returns an integer 0-100.
+export function activityChance(ev, dateStr) {
+ if (!ev.peak || ev.start === ev.end) return 100;
+ const today = new Date(dateStr + 'T00:00Z');
+ const peak = new Date(ev.peak + 'T00:00Z');
+ const diffDays = (today - peak) / 86400000;
+ const { riseTau, decayTau } = getActivityProfile(ev.id);
+ const tau = diffDays <= 0 ? riseTau : decayTau;
+ const pct = 100 * Math.pow(0.5, Math.abs(diffDays) / tau);
+ return Math.round(pct);
+}
diff --git a/assets/js/events/calendar/2026.js b/assets/js/events/calendar/2026.js
index e7878b8..db97a3d 100644
--- a/assets/js/events/calendar/2026.js
+++ b/assets/js/events/calendar/2026.js
@@ -153,7 +153,7 @@ export const cosmic = [
textColor: '#ffc8d8',
type: 'cosmic',
nightOnly: true,
- start: '2026-06-30', end: '2026-07-02',
+ start: '2026-06-30', end: '2026-07-02', peak: '2026-07-01',
},
];
diff --git a/assets/js/events/dynamic-message.js b/assets/js/events/dynamic-message.js
index e3bf60e..2f16496 100644
--- a/assets/js/events/dynamic-message.js
+++ b/assets/js/events/dynamic-message.js
@@ -2,11 +2,13 @@
// dynamic-message.js - Rewrites a cosmic event's message based on where
// today sits vs. the peak.
//
-// Before peak : "is active and building - peak on . "
-// On peak -1d : "peaks tonight - "
-// After peak : "is past its peak () but still possibly visible - "
+// Before peak : "is active and building - peak on . (~NN% chance...)"
+// On peak -1d : "peaks tonight - (~NN% chance...)"
+// After peak : "is past its peak () but still possibly visible - (~NN% chance...)"
//
// Single-day events (start === end) keep their static message unchanged.
+// `ev.chance` (see ../events/activity-profile.js), when present, is
+// appended as an estimated viewing-chance figure.
// ------------------------------------------------------------------------
export function dynamicCosmicMessage(ev, dateStr) {
@@ -19,11 +21,12 @@ export function dynamicCosmicMessage(ev, dateStr) {
.replace(/^.*?(?:peaks tonight|peak tonight|is active tonight|is active|peaks)\s*—\s*/i, '')
.trim();
var baseCapd = base.charAt(0).toUpperCase() + base.slice(1);
+ var chanceSuffix = typeof ev.chance === 'number' ? ' (~' + ev.chance + '% chance of a good show tonight)' : '';
if (diffDays < -1) {
- return ev.title + ' is active and building — peak on ' + peakFmt + '. ' + baseCapd;
+ return ev.title + ' is active and building — peak on ' + peakFmt + '. ' + baseCapd + chanceSuffix;
} else if (diffDays <= 1) {
- return ev.title + ' peaks tonight — ' + base;
+ return ev.title + ' peaks tonight — ' + base + chanceSuffix;
} else {
- return ev.title + ' is past its peak (' + peakFmt + ') but still possibly visible — ' + base;
+ return ev.title + ' is past its peak (' + peakFmt + ') but still possibly visible — ' + base + chanceSuffix;
}
}
diff --git a/assets/js/hooks/useAppState.js b/assets/js/hooks/useAppState.js
index 8c7a525..f761e4a 100644
--- a/assets/js/hooks/useAppState.js
+++ b/assets/js/hooks/useAppState.js
@@ -367,6 +367,11 @@ export function useAppState() {
const openRestore = () => setRestoreOpen(true);
const closeRestore = () => setRestoreOpen(false);
+ // Profile & config flyout panel (right-side drawer).
+ const [panelOpen, setPanelOpen] = useState(false);
+ const openPanel = () => setPanelOpen(true);
+ const closePanel = () => setPanelOpen(false);
+
const [showUnits, setShowUnits] = useState(() => {
try {
const s = localStorage.getItem('sunscope_show_units');
@@ -660,6 +665,7 @@ export function useAppState() {
showDecimals, toggleShowDecimals,
welcomeOpen, closeWelcome, openWelcome,
restoreOpen, openRestore, closeRestore,
+ panelOpen, openPanel, closePanel,
showUnits, toggleShowUnits,
tableInterval, setTableInterval,
forecastView, setForecastView,
diff --git a/assets/js/utils.js b/assets/js/utils.js
index 18c20f7..cb462da 100644
--- a/assets/js/utils.js
+++ b/assets/js/utils.js
@@ -15,7 +15,7 @@
// VEHICLE_TYPES vehicle presets for cabin heat model
// BUILDING_TYPES building presets for indoor heat model
// FUR_COLORS fur presets for the fur surface temp model
-// pawBurnRiskLabel(concreteT) - 'Safe'|'Caution'|'Danger' paw contact risk
+// PET_BANDS / petCategory(t) pet skin/surface stress band - {label,bg,fg}
// cloudCategory(total,low,mid,high) - 'clear'|'wispy'|'scattered'|'overcast'
// confidenceBand(i) day-tab gradient colour + label
// moonPhaseFraction(date) 0..1 synodic phase fraction
@@ -56,6 +56,52 @@ export function utciCategory(u) {
}
}
+// -------------------------------------------------------------------
+// PET_BANDS - same shape as UTCI_BANDS, recalibrated for pet skin/fur
+// instead of bare human skin.
+// -------------------------------------------------------------------
+// Covers the pet-specific columns (Fur Colour, Pet Shade, Pet Home, Paw)
+// in the table and simple view. Fur, a thicker dermis, and natural skin
+// oils give real extra insulation at both ends of the scale, so every
+// threshold is shifted from UTCI_BANDS, not just the warm half:
+// - Warm half shifted up - calibrated against the pavement-burn guidance
+// this app already used ("7-second hand test": safe below 40 -C,
+// caution to 52 -C, danger above) and the furSurfaceT glance-card
+// alert (>=45 -C, which now falls inside "Extreme" rather than
+// jumping straight to "Danger").
+// - Cold half shifted down ~8 -C - a healthy cat or dog's coat copes
+// with a frosty night (e.g. -2 -C) that would be "Freezing" on the
+// bare-skin human scale; here that same reading lands in "Cold".
+//
+// Colours are re-interpolated (not copy-pasted from UTCI_BANDS) against
+// the same purple->blue->cyan->green->yellow->orange->red family, sampled
+// at each band's new threshold so the shade actually reflects its shifted
+// position on the pet scale, rather than reusing a human band's colour at
+// a different absolute temperature. Danger keeps the human scale's flat
+// alarm red unchanged - it's a deliberate stop-everything colour, not
+// part of the smooth gradient.
+// -------------------------------------------------------------------
+export const PET_BANDS = [
+ { max: -28, label: 'Extreme cold', bg: '#7f61ab', fg: '#ffffff' },
+ { max: -18, label: 'Arctic', bg: '#957abe', fg: '#ffffff' },
+ { max: -8, label: 'Freezing', bg: '#84a0d4', fg: '#ffffff' },
+ { max: -3, label: 'Very cold', bg: '#7eb6e2', fg: '#1a1200' },
+ { max: 2, label: 'Cold', bg: '#7ec0e8', fg: '#1a1200' },
+ { max: 7, label: 'Chilly', bg: '#a8d4ee', fg: '#1a1200' },
+ { max: 11, label: 'Cool', bg: '#b5dee9', fg: '#1a1200' },
+ { max: 25, label: 'Comfortable', bg: '#a5daa3', fg: '#157a15', themedFg: '#157a15', fontWeight: 700 },
+ { max: 32, label: 'Warm', bg: '#f7cd54', fg: '#1a1200' },
+ { max: 40, label: 'Caution', bg: '#f5974e', fg: '#1a1200' },
+ { max: 52, label: 'Extreme', bg: '#df6f41', fg: '#ffffff' },
+ { label: 'Danger', bg: '#880000', fg: '#ffffff', fontWeight: 700, darkenAmt: 0.18, textShadow: '-1px -1px 0 #3a0000, 1px -1px 0 #3a0000, -1px 1px 0 #3a0000, 1px 1px 0 #3a0000', solid: true },
+];
+
+export function petCategory(t) {
+ for (const band of PET_BANDS) {
+ if (band.max === undefined || t < band.max) return band;
+ }
+}
+
// Diagonal sweep gradient for a band background hex colour.
// Pre-blends with 50% white to sit harmoniously alongside lighter table cells,
// then applies a light→mid→dark sweep for depth.
@@ -247,19 +293,6 @@ export const FUR_COLORS = {
white: { name: 'White / Pale', albedo: 0.40 },
};
-// -------------------------------------------------------------------
-// PAW BURN RISK - traffic-light label from ground/pavement surface temp.
-// -------------------------------------------------------------------
-// Uses concreteT directly - the "7-second hand test" pavement-burn
-// guidance already documented on calcConcreteTemp in physics.js.
-// -------------------------------------------------------------------
-export function pawBurnRiskLabel(concreteT) {
- if (concreteT == null) return null;
- if (concreteT < 40) return 'Safe';
- if (concreteT < 52) return 'Caution';
- return 'Danger';
-}
-
// -------------------------------------------------------------------
// CLOUD CATEGORY - pick one of 4 icon styles from low/mid/high split.
// -------------------------------------------------------------------