/* Slow Weekend — cards & score visualizations.
Exports RecommendationCard, ScoreViz, FilterBreakdown, TextureBlock. */
const CAT_ACCENT = {
Recharge: "#7E9078",
Explore: "#A6884F",
Connect: "#8576A0",
};
// Soft abstract texture field built from a pick's tones — stands in for photography.
function TextureBlock({ tones, style, seed = 0, children, className }) {
const [a, b, c] = tones;
const bg = `radial-gradient(115% 85% at ${22 + seed * 6}% 18%, ${a}, transparent 58%),
radial-gradient(95% 80% at 82% ${78 - seed * 4}%, ${c}, transparent 55%),
radial-gradient(120% 120% at 50% 120%, ${a}, transparent 70%),
${b}`;
return (
{children}
);
}
// 0–2 score shown as up to two filled dots.
function CalmDots({ value, accent }) {
return (
{[0, 1].map((i) => (
))}
);
}
// Compact score on the card. variant: single | dots | ring
function ScoreViz({ variant, pick, accent }) {
const dims = window.SLOW_WEEKEND_DATA.filterDimensions;
if (variant === "ring") {
const r = 22, c = 2 * Math.PI * r;
const frac = pick.calmScore / 10;
return (
Fit Score
);
}
if (variant === "dots") {
return (
{dims.map((d) => (
{d.label}
))}
);
}
// single — dense, one-line (functional over the decorative ring; founder 2026-06-22)
return (
{pick.calmScore}/10Fit
);
}
// Full, transparent breakdown for the detail page.
function FilterBreakdown({ pick, accent }) {
const dims = window.SLOW_WEEKEND_DATA.filterDimensions;
return (
{dims.map((d) => (
{d.label}
{[0, 1].map((i) => (
))}
{d.note}
))}
);
}
/* ---- Card layouts. variant: editorial | quiet | panel ---- */
// Energy Level — a small "meter" glyph (1–3 bars) + label. Orthogonal to the
// category accent, so it gets its own muted scale: calm → sand → terracotta.
const ENERGY_COLOR = { Gentle: "#8FA9B8", Active: "#C2A878", Adventure: "#B0764F" };
function EnergyBadge({ level, lg }) {
const meta = window.SW && SW.energyMeta ? SW.energyMeta(level) : null;
if (!meta) return null;
const color = ENERGY_COLOR[level] || "#7E9078";
const h = lg ? [8, 11, 14] : [6, 9, 12];
return (
{[0, 1, 2].map((i) => (
))}
{level}
);
}
// Partner provenance — "Shared by ". The trust-by-provenance signal for
// partner-seeded inventory. variant: chip (on cards) | full (detail block).
function PartnerBadge({ partnerKey, variant = "chip" }) {
const reg = window.SLOW_WEEKEND_DATA.partners || {};
const p = reg[partnerKey];
if (!p) return null;
if (variant === "full") {
return (
✦
Shared by a partner
{p.name} {p.handle}
{p.blurb}
);
}
return (
✦{p.name}
);
}
function HeartIcon({ filled, color, size = 21 }) {
return (
);
}
// Quiet "save" affordance: a heart, not a social like (accent fill, no counts).
function HeartButton({ saved, onToggle, accent }) {
const a = accent || CAT_ACCENT.Recharge;
const [pop, setPop] = React.useState(false);
return (
);
}
// "In season now" — the shared timing chip (collections, cards, hike detail all
// speak the same visual language for "this is at its best right now").
function SeasonNowChip() {
return (
In season now
);
}
// The living draw, surfaced on the card so it isn't buried on the detail page.
function DrawHint({ pick, accent }) {
const t = pick.trail;
if (!t) return null;
const lead = t.hint || (t.draws && t.draws[0]);
if (!lead) return null;
const season = window.SW && SW.trailSeasonStatus ? SW.trailSeasonStatus(pick) : { inBest: false };
return (
) : null;
const cta = (
Why it made the cut
→
);
if (variant === "quiet") {
return (
{heart}
{pick.partner && }
{pick.title}
{pick.blurb}
{cta}
);
}
if (variant === "panel") {
return (
{heart}
{pick.category}
{pick.partner &&
}
{pick.title}
{pick.blurb}
{cta}
);
}
// editorial (default)
return (
{heart}
{/* Slimmed texture block (the §16 "earn its place" shrink): a thin accent that
still names the kind and is ready to host a real photo later, not a big
decorative gradient eating the fold. */}
{pick.category} · {pick.texture}
{pick.partner &&
}
{pick.title}
{pick.blurb}
{cta}
);
}
function ShareIcon({ size = 15 }) {
return (
);
}
// One calm Share affordance (PRD §8) — native share sheet on mobile, copy-link
// with a quiet "Link copied" on desktop. Public content only (bank test); no
// share counts or vanity metrics. `route` is {type: outing|plan|collection|week, id}.
function ShareButton({ route, label = "Share", variant = "pill" }) {
const [copied, setCopied] = React.useState(false);
const onShare = async (e) => {
e.stopPropagation();
const data = window.SLOW_WEEKEND_DATA;
const { title, text } = SW.shareText(route, data);
// Share through the /s endpoint so the pasted link gets per-link OG previews
// (api/share.js); /s redirects humans straight into the SPA on open.
const base = (location.origin || "") + "/s";
const url = SW.shareUrl(route, base);
const track = (method) => { try { if (window.SWA) SWA.track("share", { type: route.type, id: route.id || route.window, method }); } catch (er) {} };
const flash = () => { setCopied(true); setTimeout(() => setCopied(false), 1800); };
try {
if (navigator.share) { await navigator.share({ title, text, url }); track("native"); }
else { await navigator.clipboard.writeText(url); flash(); track("copy"); }
} catch (err) {
if (err && err.name === "AbortError") return; // user dismissed the share sheet
try { await navigator.clipboard.writeText(url); flash(); track("copy"); } catch (e2) {}
}
};
if (variant === "icon") {
return (
);
}
return (
);
}
Object.assign(window, {
CAT_ACCENT, ENERGY_COLOR, TextureBlock, CalmDots, ScoreViz, FilterBreakdown,
CardMeta, CategoryTag, EnergyBadge, PartnerBadge, FactChip, OutingFacts, RecommendationCard,
SeasonNowChip, DrawHint, HeartButton, ShareIcon, ShareButton,
});