// fs-ui.jsx — shared UI for ShortsFieldStation.org // Depends on window.FS_SEALS (fs-seals.js) and the FS_* data globals. const { useState, useEffect } = React; /* ---- navigation: real anchors that crawlers can follow, SPA takeover on click ---- */ function hrefTo(to){ return '/'+(to==='home'?'':to); } function navTo(to){ history.pushState(null,'',hrefTo(to)); window.dispatchEvent(new Event('srfs:navigate')); } function NavA(props){ const { to, children, ...rest } = props; const onClick = (e)=>{ e.stopPropagation(); if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button===1) return; e.preventDefault(); navTo(to); }; return {children}; } /* ---- seals: render the real artwork via dangerouslySetInnerHTML ---- */ function Seal({ dept, size=120, house=false, className, style, title }){ let markup; if(house) markup = FS_SEALS.houseSealR4(size, 'var(--ink)'); else { const opts = dept.legendOverride ? { legend: dept.s1 } : {}; markup = FS_SEALS.sealRound4(dept.key, dept.s1, dept.s2, dept.code, dept.plate, dept.color, size, opts); } const a11y = title ? { role:'img', 'aria-label':title } : { 'aria-hidden':'true' }; return
; } const DEPT_BY = {}; FS_SEALS.DEPTS.forEach(d=>{ DEPT_BY[d.key]=d; }); /* ---- masthead ---- */ function Masthead({ route, go }){ const [open,setOpen] = useState(false); const nav = ()=> setOpen(false); return (
{e.preventDefault();go('home');nav();}}>
Short’s Resort
Field Station
Est. 2026 · No. 01
); } /* ---- folio header on each sheet ---- */ function Folio({ left, right }){ return
{left}{right}
; } function PlateStamp({ no }){ return ( ); } function SectionHead({ no, title, deck, aside, seal }){ return (
{seal && (seal==='house' ? : )}
Section {no} · Short’s Resort Field Station

{title}

{aside || null}
{deck &&

{deck}

}
); } /* ---- the property plat (real trace from the section atlas) ---- */ function PlatMap(){ return ( G·01G·02G·03 415 3762 ); } /* ---- footer ---- */ /* ---- agency partner marks (official art, rendered in station ink) ---- USDA symbol traced from the department's official logo (Wikimedia Commons, PD); TPWD square is the department's own vector (tpwd.texas.gov/icon.svg), text knockouts preserved via mask so the paper shows through. */ function AgencyMark({ kind, size=46 }){ if(kind==='nrcs') return ( ); return ( ); } function Footer({ go }){ return ( ); } Object.assign(window, { Seal, DEPT_BY, Masthead, Folio, SectionHead, PlatMap, AgencyMark, Footer });