// itrymo prototype — shared UI primitives & filter/sort engine
// Loaded after data.js. Exports tokens, icons, chips, cards, hooks.
// ─────────────────────────────────────────────────────────────
// Tokens
// ─────────────────────────────────────────────────────────────
const T = {
bg: '#FAF7F2',
panel: '#FFFFFF',
ink: '#1A1814',
faintInk: '#3A3530',
muted: '#8A857C',
border: '#EAE3D6',
borderSoft:'#F0EAE0',
selBg: '#1A1814',
selFg: '#FFFFFF',
accent: '#B36A00',
accentBg: '#FBEEDA',
accentBd: '#E7C896',
fontUI: "'DM Sans', system-ui, sans-serif",
fontDisp: "'DM Sans', system-ui, sans-serif",
};
// ─────────────────────────────────────────────────────────────
// Icon set — keep tiny and stroke-based
// ─────────────────────────────────────────────────────────────
function Icon({ name, size = 14, color = 'currentColor', fill = 'none', style }) {
const p = {
sparkle: <>,
bolt: <>,
map: <>,
compass: <>,
bed: <>,
filter: <>,
sort: <>,
close: <>,
plus: <>,
minus: <>,
chev: <>,
chevR: <>,
search: <>,
check: <>,
star: <>,
pin: <>,
heart: <>,
flame: <>,
bookmark:<>,
globe: <>,
luggage: <>,
calendar:<>,
plane: <>,
car: <>,
coffee: <>,
utensils:<>,
moon: <>,
grip: <>,
pencil: <>,
trash: <>,
stamp: <>,
postage: <>,
seal: <>,
triedoc: <>,
tried: <>
{/* Outer dashed circle */}
{/* Inner circle */}
{/* Checkmark */}
{/* Stars */}
,
gear: <>,
}[name];
return (
);
}
// ─────────────────────────────────────────────────────────────
// Pill — single source of truth for chips
// ─────────────────────────────────────────────────────────────
function Pill({ active, accent, small, onClick, onRemove, leading, children, title }) {
const h = small ? 28 : 32;
const bg = active ? T.selBg : accent ? T.accentBg : '#fff';
const fg = active ? T.selFg : accent ? T.accent : T.faintInk;
const bd = active ? T.selBg : accent ? T.accentBd : T.border;
return (
);
}
// ─────────────────────────────────────────────────────────────
// Place card — used by both mobile (full width) and web (grid)
// variants: 'wide' (mobile, image up top) | 'grid' (web)
// ─────────────────────────────────────────────────────────────
function placePrice(place) {
let h = 0;
for (let i = 0; i < place.id.length; i++) h = (h * 31 + place.id.charCodeAt(i)) >>> 0;
const idx = h % 4;
const bands = {
eat: [[800, 1500], [1500, 3000], [3000, 6000], [6000, 12000]],
do: [[0, 1000], [1000, 2500], [2500, 5000], [5000, 12000]],
stay: [[5000, 9000], [9000, 18000], [18000, 38000], [38000, 80000]],
};
const rates = { jpy: 1, usd: 0.0067, eur: 0.0062, gbp: 0.0053 };
const syms = { jpy: '¥', usd: '$', eur: '€', gbp: '£' };
const [curId, setCurId] = React.useState(() => { try { return localStorage.getItem('itrymo_currency') || 'jpy'; } catch { return 'jpy'; } });
React.useEffect(() => {
const handler = () => { try { setCurId(localStorage.getItem('itrymo_currency') || 'jpy'); } catch {} };
window.addEventListener('itrymo_pref_change', handler);
return () => window.removeEventListener('itrymo_pref_change', handler);
}, []);
const rate = rates[curId] || 1;
const sym = syms[curId] || '¥';
const isFree = place.bucket === 'do' && place.budget === 'free';
const unit = isFree ? '' : ({ eat: '/ person', do: '/ ticket', stay: '/ night' }[place.bucket] || '');
const fmt = (v) => curId === 'jpy' ? v.toLocaleString() : (v * rate).toFixed(0);
// For Eat places use the actual eatBudget field
if (place.bucket === 'eat') {
if (place.eatBudget === 'budget') return { label: `Under ${sym}${fmt(1500)}`, unit };
if (place.eatBudget === 'mid') return { label: `${sym}${fmt(1500)}–${sym}${fmt(3000)}`, unit };
if (place.eatBudget === 'splurge') return { label: `${sym}${fmt(3000)}+`, unit };
}
// For Do places use the actual budget field
if (place.bucket === 'do') {
if (place.budget === 'free') return { label: 'Free', unit };
if (place.budget === 'mid') return { label: `${sym}${fmt(1000)}–${sym}${fmt(3000)}`, unit };
if (place.budget === 'high') return { label: `${sym}${fmt(3000)}–${sym}${fmt(8000)}`, unit };
if (place.budget === 'splurge') return { label: `${sym}${fmt(8000)}+`, unit };
}
// For Stay places use the tier field
if (place.bucket === 'stay') {
if (place.tier === 'savings') return { label: `${sym}${fmt(3000)}–${sym}${fmt(8000)}`, unit };
if (place.tier === 'safe') return { label: `${sym}${fmt(8000)}–${sym}${fmt(20000)}`, unit };
if (place.tier === 'premium') return { label: `${sym}${fmt(20000)}+`, unit };
}
const [lo, hi] = (bands[place.bucket] || bands.eat)[idx];
const label = `${lo === 0 ? 'Free' : sym + fmt(lo)}–${sym}${fmt(hi)}`;
return { label, unit };
}
function useEscClose(onClose) {
React.useEffect(() => {
if (!onClose) return;
const h = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', h);
return () => document.removeEventListener('keydown', h);
}, [onClose]);
}
function PlaceCard({ place, variant = 'wide', onTag, activeTags, onOpen }) {
const isGrid = variant === 'grid';
const isList = variant === 'list';
const fav = useIsFav(place.id);
const [hover, setHover] = React.useState(false);
const price = placePrice(place);
const distLabel = place.distKm < 10
? `${place.distKm.toFixed(1)} km`
: `${Math.round(place.distKm)} km`;
const subLabel = ((GROUPS[place.bucket] || []).find((g) => g.id === place.sub) || {}).label || '';
const cardA11y = onOpen ? {
role: 'button', tabIndex: 0,
'aria-label': `${place.name}, rated ${place.rating}, ${place.area}`,
onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(place); } },
} : {};
if (isList) {
return (
onOpen && onOpen(place)} {...cardA11y}
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
style={{
background: T.panel, borderRadius: 12,
border: `1px solid ${T.borderSoft}`,
padding: '12px 14px', flexShrink: 0,
display: 'flex', alignItems: 'center', gap: 14,
cursor: onOpen ? 'pointer' : 'default',
boxShadow: hover && onOpen ? '0 4px 14px rgba(0,0,0,0.07)' : 'none',
transition: 'box-shadow .15s ease',
}}>
{place.rating.toFixed(1)}
·
{place.area}
·
{distLabel}
{price.label}
{price.unit}
onOpen && onOpen(place)} {...cardA11y}
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
style={{
background: T.panel, borderRadius: 16,
border: `1px solid ${T.borderSoft}`,
overflow: 'hidden', flexShrink: 0,
display: 'flex', flexDirection: 'column',
cursor: onOpen ? 'pointer' : 'default',
transform: hover && onOpen ? 'translateY(-2px)' : 'none',
boxShadow: hover && onOpen ? '0 10px 24px rgba(0,0,0,0.08)' : 'none',
transition: 'transform .15s ease, box-shadow .15s ease',
}}>
{price.label}
{price.unit}
{place.name}
{place.rating.toFixed(1)}
{place.area}
·
{distLabel}
·
{place.saved.toLocaleString()}
{/* Show tags only when searching/filtering, or on non-grid variants */}
{(!isGrid || (activeTags && activeTags.length > 0)) && (
{place.tags.slice(0, 3).map((tg) => {
const on = activeTags && activeTags.includes(tg);
return (
{ e.stopPropagation(); onTag && onTag(tg); }} style={{
cursor: onTag ? 'pointer' : 'default',
fontSize: 11, padding: '2px 8px', borderRadius: 999,
background: on ? T.selBg : T.bg,
color: on ? T.selFg : T.muted,
border: `1px solid ${on ? T.selBg : T.borderSoft}`,
fontWeight: 500,
}}>{tg}
);
})}
)}
{options.map((o) => {
const on = o.id === value;
return (
);
})}
);
}
Object.assign(window, {
T, Icon, Pill, PlaceCard, applyFilters, sortPlaces, getGroupsFor, Segmented,
getTagCounts, suggestTags, Highlight, TagSuggestion, useEscClose,
});
// ─────────────────────────────────────────────────────────────
// Autosuggest helpers
// ─────────────────────────────────────────────────────────────
function getTagCounts(places) {
const m = new Map();
places.forEach((p) => p.tags.forEach((t) => m.set(t, (m.get(t) || 0) + 1)));
return m;
}
// Returns ranked flat list of {tag, group, groupId, count, active}.
// Prioritizes prefix matches > substring matches > popular tags.
function suggestTags(query, groups, tagCounts, activeTags, max = 14) {
if (!query) return [];
const q = query.trim().toLowerCase();
if (!q) return [];
const seen = new Set();
const out = [];
groups.forEach((g) => {
g.tags.forEach((tag) => {
if (seen.has(tag)) return;
const lower = tag.toLowerCase();
const idx = lower.indexOf(q);
if (idx < 0) return;
// Also match individual words (e.g. "soup" matches "Noodles & Soups")
seen.add(tag);
const wordStart = idx === 0 || /[\s&/.]/.test(lower[idx - 1]);
const count = tagCounts.get(tag) || 0;
const score = (idx === 0 ? 1000 : wordStart ? 500 : 100) - idx + Math.log10(count + 1) * 5;
out.push({
tag, group: g.label, groupId: g.id,
count, score,
active: activeTags.includes(tag),
});
});
});
return out.sort((a, b) => b.score - a.score).slice(0, max);
}
function Highlight({ text, query }) {
if (!query) return text;
const q = query.trim();
if (!q) return text;
const idx = text.toLowerCase().indexOf(q.toLowerCase());
if (idx < 0) return text;
return (
<>
{text.slice(0, idx)}
{text.slice(idx, idx + q.length)}
{text.slice(idx + q.length)}
);
}
// One row in the suggestion list
function TagSuggestion({ s, query, onToggle, showGroup = true }) {
return (
);
}