// ═══════════════════════════════════════════════════════════════════════
// Dyra — Mobile-native redesign (iPhone-first)
// ═══════════════════════════════════════════════════════════════════════
// Completely separate component tree from the desktop site. Designed for a
// 402px-wide iPhone viewport. Each screen is its own root that fills the
// device frame + scrolls naturally. No scaling tricks — real responsive
// layouts with mobile-appropriate font sizes, touch targets, and chrome.
//
// Shared with the desktop:
// • window.DYRA (seed property data + content)
// • window.DyraStore (live state, reservations, content overrides)
// • window.Placeholder (striped placeholder + photo wrapper)
//
// Design system (matches the brand, scaled for mobile):
// PALETTE — terracotta accent on warm paper, deep umber ink
// TYPE — Cormorant Garamond serif for editorial headlines
// Inter sans for UI + body
// Frank Ruhl Libre for Hebrew accents
// SPACING — 8/12/16/20/24/32/40/56 px scale
// RADII — 8 / 12 / 18 / 24 (cards / sheets)
// TARGETS — 44pt minimum hit area (Apple HIG)
//
// All screens share window.DyraMobile namespace.
// ═══════════════════════════════════════════════════════════════════════
const DYRA_MOBILE_PALETTE = {
bg: '#f5efe3', // warm paper
surface: '#ffffff', // cards
card: '#fbf6ea', // raised section
ink: '#2a241c', // text
inkSoft: '#5b4f3a',
muted: '#6b5e47',
line: '#d9cfba',
lineSoft: '#e8dfc8',
accent: '#b8532a', // terracotta
accentSoft: '#f1d8c5',
accentDark: '#8a3e1f',
shabbos: '#7a5a2e',
success: '#3d6b4a',
danger: '#a8412e',
};
const DYRA_MOBILE_TYPE = {
serif: "'Cormorant Garamond', Georgia, serif",
sans: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
hebrew: "'Frank Ruhl Libre', 'Noto Serif Hebrew', serif",
};
// ─── Tiny shared atoms ────────────────────────────────────────────────
function MEyebrow({ children, color, style }) {
return (
{children}
);
}
function MIconBtn({ children, onClick, label, size = 44 }) {
return (
);
}
// SF-style stroke icons — simple, clean, uniform 1.6 stroke
function MIco({ name, size = 22, color }) {
const c = color || 'currentColor';
const s = { width: size, height: size, fill: 'none', stroke: c, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
switch (name) {
case 'menu': return ;
case 'close': return ;
case 'back': return ;
case 'forward': return ;
case 'search': return ;
case 'home': return ;
case 'star': return ;
case 'heart': return ;
case 'calendar':return ;
case 'users': return ;
case 'check': return ;
case 'plus': return ;
case 'minus': return ;
case 'phone': return ;
case 'mail': return ;
case 'pin': return ;
case 'wifi': return ;
case 'bed': return ;
case 'bath': return ;
case 'shield': return ;
case 'sparkle': return ;
case 'flame': return ;
case 'candle': return ;
case 'doc': return ;
case 'briefcase':return ;
case 'whatsapp':return ;
default: return ;
}
}
// ─── Mobile primary button — full-width, 56h, accent ────────────────
function MButton({ children, onClick, variant = 'primary', size = 'lg', style, disabled }) {
const p = DYRA_MOBILE_PALETTE;
const heights = { sm: 40, md: 48, lg: 56 };
const h = heights[size] || 56;
const variants = {
primary: { bg: p.accent, fg: '#fff', border: 'none' },
secondary: { bg: 'transparent', fg: p.ink, border: `1.5px solid ${p.line}` },
dark: { bg: p.ink, fg: p.bg, border: 'none' },
soft: { bg: p.accentSoft, fg: p.accentDark,border: 'none' },
ghost: { bg: 'transparent', fg: p.accent, border: 'none' },
};
const v = variants[variant] || variants.primary;
return (
);
}
// ─── Sticky top app bar ───────────────────────────────────────────────
// Universal mobile top bar — same layout on every screen:
// [ logo (tap → home) ] [ Parshas X (Hebcal) ] [ hamburger (open menu) ]
// Legacy `title`, `leading`, `trailing` props are accepted for backward
// compatibility but ignored — the bar renders its own fixed layout so
// nothing varies between screens. Hamburger taps fire a window
// `dyra-open-menu` event that the shell listens for, so screens that
// don't receive an `openMenu` prop (stay-detail, booking, admin-res)
// still get a working menu.
function MAppBar({ scrolled, transparent, go }) {
const p = DYRA_MOBILE_PALETTE;
const homeNav = () => {
if (typeof go === 'function') go('home');
else if (typeof window !== 'undefined') window.location.hash = 'home';
};
const openMenu = () => {
if (typeof window !== 'undefined') {
window.dispatchEvent(new CustomEvent('dyra-open-menu'));
}
};
const parsha = (typeof window !== 'undefined' && window.DYRA?.PARSHA?.[0]) || null;
const centerOpacity = transparent && !scrolled ? 0 : 1;
return (
{/* Left: logo (tap → home) */}
{/* Center: parsha widget */}
{parsha && (
This Shabbos
Parshas {parsha.parsha}
)}
{/* Right: hamburger menu */}
{tabs.map(t => {
const active = current === t.id;
return (
);
})}
);
}
// ─── Slide-up bottom sheet ────────────────────────────────────────────
function MSheet({ open, onClose, children, title, height = '85%' }) {
const p = DYRA_MOBILE_PALETTE;
if (!open) return null;
return (
{/* scrim */}
{/* panel */}
{/* grabber */}
{title && (
)}
{children}
{items.map(it => {
const active = current === it.id;
return (
);
})}
);
}
// Export all atoms to window for sibling files
Object.assign(window, {
DYRA_MOBILE_PALETTE,
DYRA_MOBILE_TYPE,
MEyebrow, MIconBtn, MIco, MButton, MAppBar, MTabBar, MSheet, MDrawer,
});