@autobusal/common 1.15.7 → 1.17.0

package/CHANGELOG.md

@@ -6,6 +6,46 @@ All notable changes to `@autobusal/common` are documented here. This project fol
 > Note: 1.10.0 through 1.15.1 were published without changelog entries. The
 > gap is left as-is rather than reconstructed after the fact.
 
+## [1.17.0] - 2026-08-02
+
+### Added
+
+- **Locale-prefixed URLs.** `localiseRoutes()` mirrors an absolute-path route
+  tree under `/:locale`, and `LocaleGate` guards that branch - rejecting a
+  prefix that is not one of the brand's languages, redirecting the default
+  language back to its unprefixed home so only one URL is canonical, and
+  switching i18n to whatever the URL asks for. `splitLocale`/`withLocale`/
+  `localeFromPath` are the shared, router-free definition of a localised
+  path, so the crawler and the sitemap agree with the components.
+- **hreflang alternates on every page.** Emitted from `Meta`, which already
+  sits on ~136 call sites, so every real page gains them at once and a new
+  page cannot forget them. `x-default` points at the unprefixed URL.
+  Suppressed for noindex pages and whenever a caller passes an explicit
+  canonical, which the path-derived alternates would contradict.
+
+### Changed
+
+- **`ChangeLanguage` navigates** instead of only swapping the rendered text -
+  behind an explicit `localised` prop, so the account and admin areas (which
+  are deliberately not locale-prefixed) keep switching in place rather than
+  navigating to a 404.
+- **The canonical drops a trailing slash.** Apache serves a prerendered page
+  from a directory and 301s `/contact` to `/contact/`, so the same page used
+  to advertise whichever form the visitor happened to arrive on. Harmless
+  when it was the only path-derived tag; not harmless now that the alternates
+  come from the same value, because one page would announce two URL sets.
+
+## [1.16.0] - 2026-08-01
+
+### Added
+
+- **The date field can tell its form when the day changes.** `ViewData.onChange`
+  was already honoured by `select` and `checkbox`, but not by `date`/`dob`/
+  `picker`, so a form whose other fields depend on the chosen day had no way
+  to observe it short of not using `Viewer` at all. `Calendar` now takes an
+  optional `onChange(DD/MM/YYYY)` and `Viewer` passes `item.onChange` through
+  to it. Purely additive - existing callers are unaffected.
+
 ## [1.15.6] - 2026-08-01
 
 ### Changed

package/Calendar/Calendar.tsx

@@ -22,9 +22,15 @@ interface Props {
   minDate?: string
   refs: UseFormRegister<any>
   onUpdate: UseFormSetValue<any>
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   * Notified with the newly picked DD/MM/YYYY day, for callers that need to
+   * react to it rather than only read it back at submit time.
+   */
+  onChange?: (value: string) => void
 }
 
-const Calendar = ({ type, name, defaultValue, t, validation, minDate, refs, onUpdate }: Props): JSX.Element => {
+const Calendar = ({ type, name, defaultValue, t, validation, minDate, refs, onUpdate, onChange }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
   const [ prepared, setPrepared ] = useState<string>(defaultValue ?? prepareDate(new Date()));
   const [ selected, setSelected ] = useState<string>(prepared);
@@ -40,6 +46,8 @@ const Calendar = ({ type, name, defaultValue, t, validation, minDate, refs, onUp
     setPrepared(prepared);
 
     onUpdate(name, prepared);
+
+    onChange?.(prepared);
   };
 
   return (

package/ChangeLanguage/ChangeLanguage.tsx

@@ -1,7 +1,9 @@
 import { useRef } from 'react';
 import { TFunction, i18n } from 'i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useOutside } from '@autobusal/hooks';
 import Flag from './Flag';
+import { withLocale } from '../Locale/locale';
 import { Container, Title, ContainerButtons, ButtonChange } from './styles';
 import { useGetSettings } from '@autobusal/providers/services';
 
@@ -9,24 +11,64 @@ interface Props {
   type: 'top' | 'bottom'
   t: TFunction<'public'>
   i18n: i18n
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-02
+   * Whether the page this is rendered on has a locale-prefixed URL. Only
+   * the public tree does; the account/admin areas are deliberately not
+   * localised (noindex, behind a login), so navigating there would land on
+   * a 404. Defaults to false so that any call site not explicitly opting in
+   * keeps the previous switch-in-place behaviour rather than silently
+   * gaining a broken link.
+   */
+  localised?: boolean
   onClose: () => void
 }
 
-const ChangeLanguage = ({ type, t, i18n, onClose }: Props): JSX.Element => {
+const ChangeLanguage = ({ type, t, i18n, localised = false, onClose }: Props): JSX.Element => {
   const ref = useRef<HTMLDivElement>(null);
 
   const { data } = useGetSettings();
 
+  const location = useLocation();
+
+  const navigate = useNavigate();
+
   useOutside(ref, onClose);
 
+  const available = data.preferences.languages.available;
+
+  const fallback = data.preferences.languages.default;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-02
+   *
+   * Switching language now NAVIGATES. It used to change i18n state and stop
+   * there, which left one URL serving every language: nothing to link to,
+   * nothing for hreflang to point at, and only one of the thirteen could
+   * ever be indexed.
+   *
+   * Only pages that HAVE a localised URL are navigated. The account, admin
+   * and auth areas are deliberately not locale-prefixed - they are noindex
+   * and behind a login, so a per-language URL buys nothing - and sending
+   * somebody from /account/orders to /it/account/orders would land them on a
+   * 404. There, the old behaviour is still exactly right: switch the
+   * language in place and stay put.
+   */
   const onChange = (language: string): void => {
     i18n.changeLanguage(language);
     localStorage.setItem('language', language);
+
+    if (localised) {
+      const to = withLocale(location.pathname, language, fallback, available);
+
+      if (to !== location.pathname) {
+        navigate(`${ to }${ location.search }${ location.hash }`);
+      }
+    }
+
     onClose();
   };
 
-  const available = data.preferences.languages.available;
-
   // Edited: Ferjolt Ozuni - Date: 2026-08-01
   // Just the language name. A "Change to" prefix on every row said nothing
   // the panel's own title and the flag beside it were not already saying,
@@ -51,4 +93,4 @@ const ChangeLanguage = ({ type, t, i18n, onClose }: Props): JSX.Element => {
   );
 };
 
-export default ChangeLanguage;
+export default ChangeLanguage;

package/Locale/LocaleGate.tsx

@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { splitLocale } from './locale';
+import { useGetSettings } from '@autobusal/providers/services';
+
+interface Props {
+  children: JSX.Element
+}
+
+/**
+ * Guards the `/:locale` branch of the router and keeps i18n pointed at
+ * whatever the URL says.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-02
+ *
+ * Three jobs, in order:
+ *
+ *  1. Reject a prefix that is not one of this brand's languages. `:locale`
+ *     matches any single segment, so without this `/nonsense/city/tirana`
+ *     would render the city page as though nothing were wrong - a
+ *     duplicate-content URL for every page, generated by anyone who
+ *     mistypes. Those go to the app's own not-found handling instead.
+ *
+ *  2. Send the DEFAULT language back to its unprefixed home. `/en/contact`
+ *     and `/contact` are the same page, and only one of them may be the
+ *     canonical, so the prefixed form redirects rather than being quietly
+ *     served (and indexed) alongside it.
+ *
+ *  3. Switch i18n to the URL's language. The URL has to win over the stored
+ *     preference: the entire point of localised URLs is that a link decides
+ *     what the recipient sees, and someone who last browsed in Albanian
+ *     opening a shared Italian link must get Italian.
+ *
+ * The stored preference is updated too, so leaving a localised page for an
+ * unprefixed one (the account area, say) keeps the language the visitor was
+ * actually reading.
+ */
+const LocaleGate = ({ children }: Props): JSX.Element => {
+  const location = useLocation();
+
+  const { i18n } = useTranslation();
+
+  const { data } = useGetSettings();
+
+  const available = data?.preferences?.languages?.available ?? [];
+
+  const fallback = data?.preferences?.languages?.default ?? 'en';
+
+  // Read from the path rather than useParams: this renders as the LAYOUT
+  // element of the route whose CHILDREN carry the :locale segment, and a
+  // parent match does not expose a child's params. The path is the same
+  // source of truth either way, and one fewer thing to keep in step with the
+  // route shape.
+  const [ , segment ] = location.pathname.split('/');
+
+  const locale = segment ?? '';
+
+  const known = available.includes(locale);
+
+  const redundant = known && locale === fallback;
+
+  useEffect(() => {
+    if (!known || redundant) {
+      return;
+    }
+
+    if (i18n.language !== locale) {
+      i18n.changeLanguage(locale);
+    }
+
+    localStorage.setItem('language', locale);
+  }, [ known, redundant, locale, i18n ]);
+
+  if (!known) {
+    // not a language - let the app's normal not-found path handle it rather
+    // than inventing a second way to say the same thing
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  if (redundant) {
+    const { path } = splitLocale(location.pathname, available);
+
+    return <Navigate to={ `${ path === '' ? '/' : path }${ location.search }${ location.hash }` } replace />;
+  }
+
+  return children;
+};
+
+export default LocaleGate;

package/Locale/locale.ts

@@ -0,0 +1,81 @@
+/**
+ * Locale-prefixed URLs: /{locale}/whatever, with the default language left
+ * unprefixed.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-02
+ *
+ * Until now switching language changed only what was rendered - the URL
+ * never moved. One URL therefore served every language, so a search engine
+ * could index exactly one of them, there were no alternate URLs for
+ * hreflang to point at, and a link to "this page in Italian" did not exist.
+ *
+ * The DEFAULT language stays unprefixed on purpose. Prefixing everything
+ * would be tidier to read, but it would change every URL that is already
+ * indexed and already earning, and force a redirect on the majority of
+ * traffic to gain nothing a canonical does not already say. So `/city/tirana`
+ * remains the English page and `/it/city/tirana` is its Italian counterpart.
+ *
+ * These helpers are deliberately pure and router-free so the prerender
+ * crawler, the sitemap comparison and the components can all share one
+ * definition of what a localised path is.
+ */
+
+/**
+ * Pull a locale prefix off a path, if the first segment is one of the
+ * brand's languages.
+ *
+ * Only ever treats a segment as a locale when it is in `available` - which
+ * is what stops `/city/tirana` being read as locale `city`, and what makes
+ * an unknown prefix land on a real 404 rather than silently rendering the
+ * homepage in the default language.
+ */
+export const splitLocale = (pathname: string, available: string[]): { locale?: string, path: string } => {
+  const [ , first, ...rest ] = pathname.split('/');
+
+  if (first && available.includes(first)) {
+    return { locale: first, path: '/' + rest.join('/') };
+  }
+
+  return { path: pathname };
+};
+
+/**
+ * The path a page should live at in a given language.
+ *
+ * Round-trips with splitLocale: the default language returns the bare path,
+ * everything else gets its prefix. Query and hash are the caller's business -
+ * this only ever rewrites the pathname.
+ */
+export const withLocale = (pathname: string, locale: string, defaultLocale: string, available: string[]): string => {
+  const { path } = splitLocale(pathname, available);
+
+  const clean = path === '' ? '/' : path;
+
+  if (locale === defaultLocale) {
+    return clean;
+  }
+
+  return clean === '/' ? `/${ locale }` : `/${ locale }${ clean }`;
+};
+
+/**
+ * Which language a URL is asking for, falling back to the stored preference
+ * and then the brand default.
+ *
+ * The URL wins deliberately: once a page can be linked to per language, the
+ * link has to be what decides, or somebody who last browsed in Albanian
+ * would open a shared Italian link and be shown Albanian.
+ */
+export const localeFromPath = (pathname: string, available: string[], defaultLocale: string, stored?: string | null): string => {
+  const { locale } = splitLocale(pathname, available);
+
+  if (locale) {
+    return locale;
+  }
+
+  if (stored && available.includes(stored)) {
+    return stored;
+  }
+
+  return defaultLocale;
+};

package/Locale/routes.ts

@@ -0,0 +1,42 @@
+import { RouteObject } from 'react-router-dom';
+
+/**
+ * Mirror a public route tree under a `/:locale` prefix.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-02
+ *
+ * Both apps declare their public routes with ABSOLUTE paths ('/city/:slug'),
+ * nested children included, so the same tree cannot simply be dropped under
+ * a parent path - every path has to be rewritten. Doing that here, from the
+ * one existing definition, is what keeps the localised tree from drifting:
+ * a page added to the public routes is localised automatically, and there is
+ * no second list to forget to update.
+ *
+ * Route ranking does the disambiguation for us. React Router scores a static
+ * segment above a dynamic one, so `/admin/...`, `/account/...` and every
+ * other real static route still win against `:locale`; only a first segment
+ * that matches nothing else can fall through to it. LocaleGate then rejects
+ * anything that is not actually one of the brand's languages, so an unknown
+ * prefix 404s instead of quietly rendering the homepage.
+ */
+const localise = (routes: RouteObject[]): RouteObject[] => (
+  routes.map(route => {
+    const localised: RouteObject = { ...route };
+
+    if (typeof route.path === 'string') {
+      // '' is the index route (the homepage) - under a locale that is the
+      // bare '/:locale', not '/:locale/'
+      localised.path = route.path === '' || route.path === '/'
+        ? '/:locale'
+        : `/:locale${ route.path.startsWith('/') ? '' : '/' }${ route.path }`;
+    }
+
+    if (route.children) {
+      localised.children = localise(route.children);
+    }
+
+    return localised;
+  })
+);
+
+export default localise;

package/Meta.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
+import { splitLocale, withLocale } from './Locale/locale';
 import { pageview } from '@autobusal/providers/Setup/analytics';
 import { useGetSettings } from '@autobusal/providers/services';
 
@@ -50,7 +51,14 @@ const withBrand = (value: string): string => (brand ? `${ value } - ${ brand }`
 // every other element matching the same selector; if it has no value for
 // this page (description/keywords/image are optional), remove all of
 // them, since nothing here can claim the page has one.
-type OwnedTag = { selector: string, attr: 'text' | string, value?: string };
+// Edited: Ferjolt Ozuni - Date: 2026-08-02
+// `values` (plural) is for tags that legitimately repeat - the hreflang
+// alternates. With a single `value` the cleanup below keeps one element and
+// deletes the rest, which for alternates would throw away every language but
+// one. With `values` it keeps every element whose attribute is in the set,
+// which is exactly React's own current output, and removes only the leftovers
+// a prerendered snapshot brought with it.
+type OwnedTag = { selector: string, attr: 'text' | string, value?: string, values?: string[] };
 
 // Edited: Ferjolt Ozuni - Date: 2026-07-31
 // Bug: this ran on EVERY render of EVERY <Meta> usage (no dependency array),
@@ -86,9 +94,21 @@ const useSoleMetaOwnership = (tags: OwnedTag[]): void => {
 
     hasCleanedPrerenderedTags = true;
 
-    tags.forEach(({ selector, attr, value }) => {
+    tags.forEach(({ selector, attr, value, values }) => {
       const elements = [...document.querySelectorAll(`head > ${ selector }`)];
 
+      if (values !== undefined) {
+        const keep = new Set(values);
+
+        elements.forEach(el => {
+          if (!keep.has(el.getAttribute(attr) ?? '')) {
+            el.remove();
+          }
+        });
+
+        return;
+      }
+
       if (value === undefined) {
         elements.forEach(el => el.remove());
         return;
@@ -118,10 +138,27 @@ const useSoleMetaOwnership = (tags: OwnedTag[]): void => {
 // to its bare /bus-lines/{from}/{to}/... path, and a static page's own path
 // is already the correct canonical. Callers can still pass `url` explicitly
 // to override (e.g. to canonicalize a paginated URL back to page 1).
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-02
+ * The trailing slash is normalised away first.
+ *
+ * Apache serves a prerendered page out of a directory, so it 301s
+ * /contact to /contact/ - which means the same page is reachable at two
+ * paths and, before this, advertised whichever one the visitor happened to
+ * arrive on as its canonical. Harmless while that was the only tag derived
+ * from the path; not harmless now that the hreflang alternates are built
+ * from the same value, because /ro/contact and /ro/contact/ would be
+ * announced as different URLs for one page - the exact duplication
+ * localised URLs exist to remove. One form, always, whichever door was used.
+ */
+const normalisePath = (pathname: string): string => (
+  pathname.length > 1 && pathname.endsWith('/') ? pathname.replace(/\/+$/, '') : pathname
+);
+
 const useCanonicalUrl = (explicit?: string): string => {
   const location = useLocation();
 
-  return explicit ?? `${ window.location.origin }${ location.pathname }`;
+  return explicit ?? `${ window.location.origin }${ normalisePath(location.pathname) }`;
 };
 
 // A single-page app never reloads, so GTM's page-load trigger fires exactly
@@ -152,18 +189,69 @@ const usePageviewTracking = (path: string, title: string): void => {
   }, [container, path]);
 };
 
+/**
+ * Every language this page exists in, as rel="alternate" hreflang links.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-02
+ *
+ * Emitted from here rather than per page for the same reason the canonical
+ * is: this component is already on ~136 call sites across both apps, so
+ * hreflang lands on every real page at once and cannot be forgotten on a new
+ * one. hreflang is only meaningful when each language has its own URL, which
+ * is what the /{locale} prefix introduced.
+ *
+ * `x-default` points at the unprefixed URL - the default language - which is
+ * what a search engine should show when it has no better signal about the
+ * visitor's language.
+ *
+ * Suppressed for noindex pages: they have nothing to offer alternates for,
+ * and telling a crawler about language variants of a page it has just been
+ * asked not to index is noise at best.
+ */
+const useAlternates = (noIndex: boolean, explicitUrl?: string): { locale: string, href: string }[] => {
+  const location = useLocation();
+
+  const { data } = useGetSettings();
+
+  const available = data?.preferences?.languages?.available ?? [];
+
+  const fallback = data?.preferences?.languages?.default ?? 'en';
+
+  // an explicit canonical means the caller is pointing somewhere other than
+  // the current path (a paginated page folding back to page 1, say) - the
+  // path-derived alternates below would contradict it
+  if (noIndex || explicitUrl || available.length < 2) {
+    return [];
+  }
+
+  const origin = window.location.origin;
+
+  const { path } = splitLocale(normalisePath(location.pathname), available);
+
+  return [
+    { locale: 'x-default', href: `${ origin }${ withLocale(path, fallback, fallback, available) }` },
+    ...available.map(locale => ({
+      locale,
+      href: `${ origin }${ withLocale(path, locale, fallback, available) }`
+    }))
+  ];
+};
+
 const Meta = ({ title, keywords, description, image, url, type = 'website', noIndex = false, children }: Props): JSX.Element => {
   const fullTitle = withBrand(title);
   const canonicalUrl = useCanonicalUrl(url);
   const location = useLocation();
   const robots = noIndex ? 'noindex, nofollow' : 'index, follow';
 
+  const alternates = useAlternates(noIndex, url);
+
   useSoleMetaOwnership([
     { selector: 'title', attr: 'text', value: fullTitle },
     { selector: 'meta[name="robots"]', attr: 'content', value: robots },
     { selector: 'meta[name="keywords"]', attr: 'content', value: keywords },
     { selector: 'meta[name="description"]', attr: 'content', value: description },
     { selector: 'link[rel="canonical"]', attr: 'href', value: canonicalUrl },
+    { selector: 'link[rel="alternate"][hreflang]', attr: 'href', values: alternates.map(item => item.href) },
     { selector: 'meta[property="og:type"]', attr: 'content', value: type },
     { selector: 'meta[property="og:title"]', attr: 'content', value: fullTitle },
     { selector: 'meta[property="og:description"]', attr: 'content', value: description },
@@ -188,6 +276,9 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
       { keywords && <meta name="keywords" content={ keywords } /> }
       { description && <meta name="description" content={ description } /> }
       <link rel="canonical" href={ canonicalUrl } />
+      { alternates.map(item => (
+        <link key={ item.locale } rel="alternate" hrefLang={ item.locale } href={ item.href } />
+      )) }
 
       {/* Open Graph / Facebook */}
       <meta property="og:type" content={ type } />

package/Road/Road.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { RiBus2Line } from 'react-icons/ri';
+import { Container, Bus, Vehicle, Fallback } from './styles';
+
+interface Props {
+  /**
+   * Brand asset root (SettingsData.url). The bus is served from the label's
+   * own storage, exactly like its logo and hero artwork, so a whitelabel can
+   * ship its own vehicle without a code change.
+   */
+  url?: string
+}
+
+/**
+ * A road with a bus travelling along it.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Shared by the under-construction holding page and the error pages, which
+ * had been growing their own copies of the same CSS.
+ *
+ * The vehicle is an image from label storage rather than a bundled asset,
+ * for the same reason the logo is: every brand gets its own without a
+ * rebuild. If the brand has not supplied one the icon stands in, so a
+ * missing file degrades to what the page looked like before rather than
+ * leaving a hole where a bus should be.
+ *
+ * Entirely decorative - the caller marks it aria-hidden.
+ */
+const Road = ({ url }: Props): JSX.Element => {
+  const [ failed, setFailed ] = useState<boolean>(false);
+
+  return (
+    <Container>
+      <Bus>
+        { url !== undefined && !failed
+          ? (
+            /* WebP first (10KB against the PNG's 66KB), with the PNG as the
+               fallback source and the icon as the fallback for a brand that
+               has not supplied artwork at all */
+            <picture>
+              <source srcSet={ `${ url }/bus-artwork.webp` } type="image/webp" />
+
+              <Vehicle src={ `${ url }/bus-artwork.png` } alt="" onError={ () => setFailed(true) } />
+            </picture>
+          )
+          : <Fallback><RiBus2Line /></Fallback> }
+      </Bus>
+    </Container>
+  );
+};
+
+export default Road;

package/Road/styles.ts

@@ -0,0 +1,87 @@
+import styled, { keyframes } from 'styled-components';
+
+const drift = keyframes`
+  from { transform: translateX(0); }
+  to { transform: translateX(-84px); }
+`;
+
+const travel = keyframes`
+  from { transform: translateX(-26vw); }
+  to { transform: translateX(114vw); }
+`;
+
+/**
+ * Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * A band of road across the foot of the page. Lifted out of
+ * UnderConstruction so the error pages could use the same one instead of a
+ * second copy of the same CSS.
+ */
+export const Container = styled.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 150px;
+  overflow: hidden;
+  background: linear-gradient(
+    to top,
+    ${ props => props.theme.primary.normal }22,
+    transparent
+  );
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 46px;
+    left: 0;
+    width: 200%;
+    height: 3px;
+    border-radius: 3px;
+    background: repeating-linear-gradient(
+      to right,
+      ${ props => props.theme.primary.normal }66 0 42px,
+      transparent 42px 84px
+    );
+    animation: ${ drift } 6s linear infinite;
+  }
+
+  /* a moving road is exactly the kind of thing that should stop for anyone
+     who has asked motion to stop */
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      animation: none;
+    }
+  }
+`;
+
+export const Bus = styled.div`
+  position: absolute;
+  bottom: 44px;
+  left: 0;
+  display: flex;
+  align-items: flex-end;
+  animation: ${ travel } 18s linear infinite;
+
+  /* parked, not removed - the scene should still make sense standing still */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    transform: translateX(10vw);
+  }
+`;
+
+export const Vehicle = styled.img`
+  display: block;
+  width: 150px;
+  height: auto;
+
+  @media (min-width: 768px) {
+    width: 200px;
+  }
+`;
+
+export const Fallback = styled.span`
+  display: flex;
+  font-size: 44px;
+  color: ${ props => props.theme.primary.normal };
+`;

package/UnderConstruction/UnderConstruction.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { TFunction } from 'i18next';
-import { Screen, Content, Logo, Title, Message, Road } from './styles';
+import Road from '../Road/Road';
+import { Screen, Content, Logo, Title, Message } from './styles';
 import { useGetSettings } from '@autobusal/providers/services';
 
 interface Props {
@@ -75,7 +76,12 @@ const UnderConstruction = ({ t }: Props): JSX.Element => {
 
       </Content>
 
-      <Road aria-hidden="true" />
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+           Shared with the error pages now, and carrying the brand's bus
+           rather than a bare strip of road. */ }
+      <div aria-hidden="true">
+        <Road url={ settings?.url } />
+      </div>
     </Screen>
   );
 };

package/UnderConstruction/styles.ts

@@ -11,11 +11,6 @@ import styled, { keyframes } from 'styled-components';
  * rather than a generic maintenance page.
  */
 
-const drift = keyframes`
-  from { transform: translate3d(0, 0, 0); }
-  to   { transform: translate3d(-50%, 0, 0); }
-`;
-
 const rise = keyframes`
   from { opacity: 0; transform: translateY(14px); }
   to   { opacity: 1; transform: translateY(0); }
@@ -72,44 +67,3 @@ export const Message = styled.p`
   color: ${ props => props.theme.font.faded };
 `;
 
-/**
- * A slow band of road at the foot of the page. Purely decorative, and
- * hidden from assistive tech - it carries no information.
- */
-export const Road = styled.div`
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 96px;
-  opacity: 0.5;
-  background: linear-gradient(
-    to top,
-    ${ props => props.theme.primary.normal }22,
-    transparent
-  );
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 34px;
-    left: 0;
-    width: 200%;
-    height: 3px;
-    border-radius: 3px;
-    background: repeating-linear-gradient(
-      to right,
-      ${ props => props.theme.primary.normal }66 0 42px,
-      transparent 42px 84px
-    );
-    animation: ${ drift } 6s linear infinite;
-  }
-
-  /* a moving dashed line is exactly the kind of thing that should stop for
-     anyone who has asked motion to stop */
-  @media (prefers-reduced-motion: reduce) {
-    &::after {
-      animation: none;
-    }
-  }
-`;

package/Viewer/Data.tsx

@@ -83,6 +83,12 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
           validation={ item.rules }
           refs={ refs }
           onUpdate={ onUpdate }
+          // Edited: Ferjolt Ozuni - Date: 2026-08-01
+          // `select` and `checkbox` already surfaced item.onChange; date did
+          // not, so a form whose other fields react to the chosen day (e.g.
+          // the Telegram broadcast's live recipient count) had no way to
+          // observe it short of not using Viewer at all.
+          onChange={ item.onChange }
         />
       );
 

package/index.ts

@@ -29,6 +29,10 @@ import Policy from './Policy/Policy';
 import Report from './Report/Report';
 import RouteFeature from './RouteFeature/RouteFeature';
 import Required from './Required/Required';
+import Road from './Road/Road';
+import LocaleGate from './Locale/LocaleGate';
+import localiseRoutes from './Locale/routes';
+import { splitLocale, withLocale, localeFromPath } from './Locale/locale';
 import RouteItem from './RouteItem/RouteItem';
 import Row from './Table/Row';
 import Table from './Table/Table';
@@ -72,6 +76,12 @@ export {
   Report,
   RouteFeature,
   Required,
+  Road,
+  LocaleGate,
+  localiseRoutes,
+  splitLocale,
+  withLocale,
+  localeFromPath,
   RouteItem,
   Row,
   Table,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.15.7",
+  "version": "1.17.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"