@autobusal/common 1.15.0 → 1.15.6

package/CHANGELOG.md

@@ -3,6 +3,97 @@
 All notable changes to `@autobusal/common` are documented here. This project follows
 [Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/).
 
+> 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.15.6] - 2026-08-01
+
+### Changed
+
+- **An admin sees the real site while maintenance is on.** Deliberately
+  admin only - an operator or agent signing in still gets the holding page,
+  because the site is not open to them either. Presentation, not
+  protection: obtapi still decides what any account may do.
+- `Calendar` takes an optional `minDate`, which can only RAISE the floor
+  the type already sets. Used by the return leg so it cannot start before
+  the outbound date.
+
+### Fixed
+
+- `Required` rendered a fragment, so in the column-flex form rows the label
+  and its asterisk became two flex items and the asterisk dropped onto its
+  own line.
+
+## [1.15.5] - 2026-08-01
+
+### Added
+
+- `Required` - marks a form label as mandatory. The asterisk is
+  `aria-hidden`, since a screen reader announcing "star" tells nobody
+  anything; the input's own validation carries the semantics.
+
+## [1.15.4] - 2026-08-01
+
+### Fixed
+
+- **The language dropdown opened upward over the navbar.** It positioned
+  itself with `bottom: calc((-1 * languages * 27px) - 50px - 8px)`, guessing
+  where its own bottom edge should land by multiplying an assumed 27px row
+  height by the language count. The rows are not 27px, so the error grew
+  with every language a brand enabled - at thirteen it was far enough out to
+  open over the page instead of below the trigger. Now `top: 100%`, which
+  needs no arithmetic and cannot drift, plus a height cap so a brand with
+  twenty languages does not run off the screen.
+- **`RouteItem` showed the wrong arrival country.** The city read
+  `locations[lastLocation]` but the country read `locations[1]`. Identical
+  on a two-stop route, wrong on anything longer: Tirana-Veria-Thessaloniki
+  rendered "Thessaloniki (alb)", because `locations[1]` is Elbasan.
+- Country codes render upper case here too, matching the search results.
+
+## [1.15.3] - 2026-08-01
+
+### Changed
+
+- **Language switcher shows just the language name**, left-aligned, with
+  the panel title left-aligned too. The "Change to" prefix on every row
+  said nothing the panel's own title and the flag beside it were not
+  already saying. One component serves both the public header and the
+  panel sidebar, so both are fixed.
+- **The route map fits the trip** instead of sitting at a fixed zoom 6
+  centred on the first stop. Every route drew the same view of the Balkans
+  and none of them filled it, so following a route meant panning.
+
+### Fixed
+
+- **`getCoordinates` sent every interior stop twice** - a four-stop route
+  went out as A,B,B,C,C,D,D,D, with the last point repeated against
+  itself. Directions APIs reject consecutive identical coordinates, so the
+  request failed and the map fell back to bare markers with no road line.
+- **`useGetDriveData` cached on a bare `['drive-data']` key**, with the
+  coordinates absent - so every route on the site shared one itinerary and
+  the second route page you opened drew the first one's road.
+- Stops with no coordinates are dropped rather than plotted at 0,0, which
+  put a pin off the west coast of Africa and dragged the fitted view
+  across the Atlantic.
+- The query is skipped entirely when no `VITE_OPEN_ROUTE_SERVICE_KEY` is
+  configured, instead of a guaranteed 401 on every route page view.
+- A stray `}` inside the `ButtonChange` styled-component template.
+
+## [1.15.2] - 2026-08-01
+
+### Added
+
+- `RouteFeature` takes an optional `compact` prop: icon only, with the name
+  as a hover tooltip and a help cursor to advertise that the hover does
+  something. Opt-in, because the browse and route-view pages have the room
+  and their labels earn it - only the search results card asks for this.
+
+### Fixed
+
+- `RouteFeature`'s image had **no `alt` at all**. That mattered already; it
+  matters more in compact mode, where the image is the only content and a
+  screen reader would otherwise announce nothing whatsoever per amenity.
+
 ## [1.9.0] - 2026-07-31
 
 ### Added

package/Calendar/Calendar.tsx

@@ -12,11 +12,19 @@ interface Props {
   defaultValue?: string
   t: TFunction<'general'>
   validation?: string
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   * Earliest selectable day, DD/MM/YYYY. Used by the return leg so it
+   * cannot be set before the outbound date - the picker previously floored
+   * at today, so a return in the past was selectable and only caught by an
+   * alert after pressing search.
+   */
+  minDate?: string
   refs: UseFormRegister<any>
   onUpdate: UseFormSetValue<any>
 }
 
-const Calendar = ({ type, name, defaultValue, t, validation, refs, onUpdate }: Props): JSX.Element => {
+const Calendar = ({ type, name, defaultValue, t, validation, minDate, refs, onUpdate }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
   const [ prepared, setPrepared ] = useState<string>(defaultValue ?? prepareDate(new Date()));
   const [ selected, setSelected ] = useState<string>(prepared);
@@ -43,6 +51,7 @@ const Calendar = ({ type, name, defaultValue, t, validation, refs, onUpdate }: P
           type={ type }
           value={ prepared }
           selected={ selected }
+          minDate={ minDate }
           t={ t }
           onClick={ onClick }
         />

package/Calendar/Days.tsx

@@ -8,10 +8,11 @@ interface Props {
   type: 'picker' | 'dob' | 'date'
   value: string
   selected: string
+  minDate?: string
   onSelected: (prepared: string, disabled: boolean) => void
 }
 
-const Days = ({ type, value, selected, onSelected }: Props): JSX.Element => {
+const Days = ({ type, value, selected, minDate, onSelected }: Props): JSX.Element => {
   const [ calendar, setCalendar ] = useState<CalendarData>(getCalendar(value));
 
   useEffect(() => {
@@ -22,6 +23,23 @@ const Days = ({ type, value, selected, onSelected }: Props): JSX.Element => {
 
   const limits = getLimits(type);
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * Raise the floor, never lower it: a caller-supplied minimum can only
+   * narrow what the type already allows, so a return date cannot be
+   * pushed before today just because the outbound was.
+   */
+  if (minDate) {
+    const floor = createDate(minDate);
+
+    floor.setHours(0, 0, 0, 0);
+
+    if (floor.getTime() > limits.time.min) {
+      limits.time.min = floor.getTime();
+    }
+  }
+
   const rows: JSX.Element[] = [];
 
   let currentDay: number = 1;

package/Calendar/Picker.tsx

@@ -10,11 +10,12 @@ interface Props {
   type: 'picker' | 'dob' | 'date'
   value: string
   selected: string
+  minDate?: string
   t: TFunction<'general'>
   onClick: (prepared: string) => void
 }
 
-const Picker = ({ type, value, selected, t, onClick }: Props): (JSX.Element | null) => {
+const Picker = ({ type, value, selected, minDate, t, onClick }: Props): (JSX.Element | null) => {
   const [ prepared, setPrepared ] = useState<string>(value);
 
   const onSelected = (prepared: string, disabled: boolean): void => {
@@ -37,7 +38,7 @@ const Picker = ({ type, value, selected, t, onClick }: Props): (JSX.Element | nu
 
       <Header t={ t } />
 
-      <Days type={ type } value={ prepared } selected={ selected } onSelected={ onSelected } />
+      <Days type={ type } value={ prepared } selected={ selected } minDate={ minDate } onSelected={ onSelected } />
     </ContainerPicker>
   );
 };

package/ChangeLanguage/ChangeLanguage.tsx

@@ -27,15 +27,21 @@ const ChangeLanguage = ({ type, t, i18n, onClose }: Props): JSX.Element => {
 
   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,
+  // and it made a list of options read as a list of sentences.
+  // `languages.change` is now unused; the key stays in the translation
+  // files rather than being stripped out of fifteen of them for nothing.
   const items = available.map((item, index) => (
     <ButtonChange key={ index } onClick={ () => onChange(item) }>
       <Flag language={ item } size={ 22 } />
-      { `${ t('languages.change', { ns: 'common' }) } ${ t(`languages.${ item }`, { ns: 'common' }) }` }
+      { t(`languages.${ item }`, { ns: 'common' }) }
     </ButtonChange>
   ));
 
   return (
-    <Container ref={ ref } className="change-language" $type={ type } $languages={ available.length }>
+    <Container ref={ ref } className="change-language" $type={ type }>
       <Title>{ t('languages.title', { ns: 'common' }) }</Title>
 
       <ContainerButtons>

package/ChangeLanguage/styles.ts

@@ -1,26 +1,48 @@
 import styled, { css } from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Hangs off the bottom of the trigger with `top: 100%`, instead of being
+ * pushed there by a computed offset.
+ *
+ * It used to be `bottom: calc((-1 * languages * 27px) - 50px - 8px)`, which
+ * guesses where the panel's own bottom edge should land by multiplying an
+ * assumed 27px row height by the language count. The rows are not 27px, so
+ * the error grew with every language a brand enabled: at thirteen it was
+ * far enough out that the panel opened UPWARD, over the navbar and the page
+ * text. `top: 100%` needs no arithmetic and cannot drift.
+ *
+ * Capped and scrollable, because a brand with twenty languages would
+ * otherwise run off the bottom of the screen.
+ */
 export const Container = styled.div<{
   $type: 'top' | 'bottom'
-  $languages: number
 }>`
   position: absolute;
-  bottom: calc((-1 * ${ props => props.$languages } * 27px) - 50px - 8px);
+  top: calc(100% + 8px);
   right: 0;
   z-index: 101;
   padding: 10px;
+  max-height: 70vh;
+  overflow-y: auto;
   background-color: ${ props => props.theme.background.normal };
   box-shadow: ${ props => props.theme.boxShadow };
   border-radius: ${ props => props.theme.borderRadius };
 
+  // the panel switcher sits at the foot of the sidebar, so its list has to
+  // open upward - there is nothing below it to open into
   ${ props => props.$type === 'bottom' && css`
+    top: auto;
     right: 10px;
-    bottom: 50px; 
+    bottom: 50px;
   ` }
 `;
 
+// Edited: Ferjolt Ozuni - Date: 2026-08-01
+// Left-aligned, with the rows below it. Centred short names left the flags
+// on a ragged edge, which is what made the list hard to scan.
 export const Title = styled.h5`
-  text-align: center;
   font-size: ${ props => props.theme.size.s };
   margin-bottom: 10px;
 `;
@@ -41,7 +63,8 @@ export const ButtonChange = styled.button`
   display: flex;
   padding: 5px 10px;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  text-align: left;
   gap: 8px;
   font-size: ${ props => props.theme.size.xs };
   background: ${ props => props.theme.background.neutral };
@@ -51,4 +74,4 @@ export const ButtonChange = styled.button`
   &:hover {
     background-color: ${ props => props.theme.primary.neutral };
   }
-}`;
+`;

package/Drive/Drive.tsx

@@ -1,6 +1,7 @@
 import { TFunction } from 'i18next';
 import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet';
-import { getCoordinates, getPosition, autobusMarker } from './utilities';
+import { latLngBounds } from 'leaflet';
+import { getCoordinates, getPosition, hasPosition, autobusMarker } from './utilities';
 import { Container, Loading, Disclaimer } from './styles';
 import { LocationData } from '@autobusal/providers/types/locations';
 import { useGetDriveData } from './services';
@@ -36,8 +37,12 @@ const Drive = ({ locations, t }: Props): JSX.Element => {
     return <Polyline key={ index } positions={ [from, to] } color="#3388FF" />;
   });
 
-  // we add the stop markers
-  const markers = locations.map((item, index) => (
+  // we add the stop markers, skipping stops with no coordinates - those
+  // would otherwise pin to 0,0 off the west coast of Africa and drag the
+  // fitted view across the Atlantic with them
+  const placed = locations.filter(item => hasPosition(item.stop?.location));
+
+  const markers = placed.map((item, index) => (
     <Marker key={ index } position={ getPosition(item.stop?.location) } icon={ autobusMarker }>
       <Popup>
         <strong>{ item.city.name }</strong> <br />
@@ -46,9 +51,34 @@ const Drive = ({ locations, t }: Props): JSX.Element => {
     </Marker>
   ));
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * Fit the view to the route instead of a fixed zoom 6 centred on the
+   * first stop. Zoom 6 showed most of the Balkans whatever the trip was, so
+   * a Tirana-Durres hop and a Tirana-Bucharest run drew the same map and
+   * neither filled it - the whole route was there but you had to pan to
+   * follow it.
+   *
+   * Bounds beat a computed zoom because they adapt to the aspect of the
+   * container as well as the span of the trip. A single placed stop has no
+   * extent to fit, so that case keeps a centred view at a readable zoom.
+   */
+  const bounds = placed.length > 1
+    ? latLngBounds(placed.map(item => getPosition(item.stop?.location)))
+    : undefined;
+
   return (
     <Container>
-      <MapContainer center={ getPosition(locations[0].stop?.location) } minZoom={ 6 } maxZoom={ 13 } zoom={ 6 } scrollWheelZoom={ true }>
+      <MapContainer
+        bounds={ bounds }
+        boundsOptions={ { padding: [ 30, 30 ] } }
+        center={ bounds === undefined ? getPosition(placed[0]?.stop?.location) : undefined }
+        zoom={ bounds === undefined ? 11 : undefined }
+        minZoom={ 5 }
+        maxZoom={ 15 }
+        scrollWheelZoom={ true }
+      >
         <TileLayer attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
 
         { markers }

package/Drive/services.ts

@@ -4,7 +4,16 @@ import { GeoJsonData } from './types';
 
 export const useGetDriveData = (coordinates: number[][]): UseQueryResult<GeoJsonData> => (
   useQuery({
-    queryKey: ['drive-data'],
+    // Edited: Ferjolt Ozuni - Date: 2026-08-01
+    // The key was a bare ['drive-data'] with the coordinates absent, so
+    // every route on the site shared one cached itinerary: open one route
+    // page and then another, and the second drew the first one's road line.
+    queryKey: ['drive-data', { coordinates }],
+    // With no key configured (or a route with fewer than two placed stops)
+    // this only buys a 401 and a console error on every route page view.
+    // Skipping it leaves the map showing stops and no road, which is what
+    // it already did - just quietly.
+    enabled: Boolean(import.meta.env.VITE_OPEN_ROUTE_SERVICE_KEY) && coordinates.length > 1,
     queryFn: async () => (
       await apiClient
         .post('https://api.openrouteservice.org/v2/directions/driving-car/geojson', {

package/Drive/utilities.ts

@@ -5,23 +5,42 @@ import { LocationData } from '@autobusal/providers/types/locations';
 
 const STOP_UNDEFINED = ['0', '0'];
 
-export const getCoordinates = (locations: LocationData[]): number[][] => {
-  const coordinates: number[][] = [];
-
-  locations.forEach((item, index) => {
-    const nextLocation = locations[index + 1] ?? item;
-
-    const from = getPosition(item.stop?.location ?? STOP_UNDEFINED, 'coordinates') as number[];
-    const to = getPosition(nextLocation.stop?.location ?? STOP_UNDEFINED, 'coordinates') as number[];
+/**
+ * Whether a stop actually carries usable coordinates.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ */
+export const hasPosition = (position?: string[]): boolean => {
+  if (position === undefined || position.length < 2) {
+    return false;
+  }
 
-    // we push both coordinates
-    coordinates.push(from)
-    coordinates.push(to)
-  });
+  const [ first, second ] = position.map(Number);
 
-  return coordinates;
+  return Number.isFinite(first) && Number.isFinite(second) && (first !== 0 || second !== 0);
 };
 
+/**
+ * The route's stops as [lng, lat] pairs, in order, for the directions API.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * This used to push BOTH the current stop and the next one on every
+ * iteration, so a four-stop route went out as A,B,B,C,C,D,D,D - every
+ * interior point duplicated and the last one repeated against itself.
+ * Directions APIs reject consecutive identical coordinates, so the request
+ * failed and the map fell back to bare markers with no road line.
+ *
+ * Stops with no coordinates are dropped rather than sent as 0,0: a point in
+ * the Gulf of Guinea either fails the request or drags the itinerary
+ * through the Atlantic.
+ */
+export const getCoordinates = (locations: LocationData[]): number[][] => (
+  locations
+    .filter(item => hasPosition(item.stop?.location))
+    .map(item => getPosition(item.stop?.location ?? STOP_UNDEFINED, 'coordinates') as number[])
+);
+
 export const getPosition = (position: string[] | undefined, type: string = 'normal'): LatLngExpression => {
   if (position === undefined) {
     return [0, 0];

package/Required/Required.tsx

@@ -0,0 +1,35 @@
+import { Label, Marker } from './styles';
+
+interface Props {
+  children: React.ReactNode
+}
+
+/**
+ * Marks a form label as required.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The purchase form validated required fields but never said which ones
+ * they were, so the first a buyer heard of it was an error message after
+ * pressing pay.
+ *
+ * The asterisk is aria-hidden: a screen reader announcing "star" tells
+ * nobody anything, and react-hook-form's own `required` on the input is
+ * what actually carries the semantics to assistive technology.
+ */
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Wrapped in a single element rather than a fragment. The form rows are
+ * column flex containers, so a bare fragment made the label and the
+ * asterisk two separate flex items - and the marker dropped onto its own
+ * line under the label.
+ */
+const Required = ({ children }: Props): JSX.Element => (
+  <Label>
+    { children }
+    <Marker aria-hidden="true">*</Marker>
+  </Label>
+);
+
+export default Required;

package/Required/styles.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+// keeps the label and its asterisk as ONE flex item - the form rows are
+// column flex containers, so two items would stack vertically
+export const Label = styled.span`
+  display: inline-flex;
+  align-items: baseline;
+`;
+
+export const Marker = styled.span`
+  margin-left: 3px;
+  font-weight: 700;
+  color: ${ props => props.theme.font.error };
+`;

package/RouteFeature/RouteFeature.tsx

@@ -3,13 +3,28 @@ import { FeatureData } from '@autobusal/providers/types/routes';
 
 interface Props {
   item: FeatureData
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * Icon only, with the name as a hover tooltip. Used on the search results
+   * card, where eight amenities spelled out took more width than everything
+   * else in that row put together.
+   *
+   * Opt-in rather than the default, because this also renders on the browse
+   * and route-view pages, which have the room and where the labels earn it.
+   */
+  compact?: boolean
 }
 
-const RouteFeature = ({ item }: Props): JSX.Element => (
-  <Container>
-    <Image src={ item.image_url } title={ item.name } />
-    <Name>{ item.name }</Name>
+const RouteFeature = ({ item, compact = false }: Props): JSX.Element => (
+  <Container $compact={ compact } title={ item.name }>
+    { /* alt was missing entirely before. It matters more now: with the
+         label hidden the image IS the content, so without it a screen
+         reader announces nothing at all for each amenity. */ }
+    <Image src={ item.image_url } alt={ item.name } />
+
+    { !compact && <Name>{ item.name }</Name> }
   </Container>
 );
 
-export default RouteFeature;
+export default RouteFeature;

package/RouteFeature/styles.ts

@@ -1,12 +1,27 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Container = styled.div`
+export const Container = styled.div<{ $compact?: boolean }>`
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 3px 6px;
   border: 1px solid ${ props => props.theme.primary.normal };
   border-radius: 100px;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * Icon-only chip. The help cursor is the affordance that something sits
+   * behind the hover - without it an unlabelled icon reads as decoration
+   * and nobody discovers the tooltip.
+   *
+   * (No backticks in this comment: it lives inside a styled-components
+   * template literal, where a backtick terminates the string.)
+   */
+  ${ props => props.$compact && css`
+    padding: 5px;
+    cursor: help;
+  ` }
 `;
 
 export const Image = styled.img`
@@ -16,4 +31,4 @@ export const Image = styled.img`
 
 export const Name = styled.span`
   font-size: ${ props => props.theme.size.xs };
-`;
+`;

package/RouteItem/RouteItem.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { HiOutlineInformationCircle, HiOutlineClock, HiArrowCircleRight } from 'react-icons/hi';
 import More from './More/More';
-import { Container, About, Image, Logo, Information, Name, Code, ButtonMore, Locations, Location, City, Date, Arrow, Order, LinkOrder } from './styles';
+import { Container, About, Image, Logo, Information, Name, Code, ButtonMore, Locations, Location, City, Iso, Date, Arrow, Order, LinkOrder } from './styles';
 import { RouteData } from '@autobusal/providers/types/routes';
 
 interface Props {
@@ -38,7 +38,7 @@ const RouteItem = ({ type, route, t }: Props): JSX.Element => {
 
         <Locations>
           <Location>
-            <City>{ route.locations[0].city.name } ({ route.locations[0].city.country?.iso_code })</City>
+            <City>{ route.locations[0].city.name } <Iso>({ route.locations[0].city.country?.iso_code })</Iso></City>
 
             <Date>
               { t('route_item.departure') }: 
@@ -51,7 +51,14 @@ const RouteItem = ({ type, route, t }: Props): JSX.Element => {
           </Arrow>
 
           <Location>
-            <City>{ route.locations[lastLocation].city.name } ({ route.locations[1].city.country?.iso_code })</City>
+            { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+                 The country read locations[1] while the city read
+                 locations[lastLocation]. On a two-stop route those are the
+                 same index so it looked fine, but on anything longer the
+                 arrival carried the SECOND stop's country - Tirana-Veria-
+                 Thessaloniki rendered "Thessaloniki (alb)", because
+                 locations[1] is Elbasan. */ }
+            <City>{ route.locations[lastLocation].city.name } <Iso>({ route.locations[lastLocation].city.country?.iso_code })</Iso></City>
 
             <Date>
               { t('route_item.arrival') }: 

package/RouteItem/styles.ts

@@ -109,6 +109,20 @@ export const City = styled.h5`
   font-weight: 700;
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The country code arrives lower case from the database ("alb", "grc").
+ * An ISO country code is upper case by definition, so it is cased at
+ * render time. Same treatment as the search results card.
+ */
+export const Iso = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  color: ${ props => props.theme.font.faded };
+`;
+
 export const Date = styled.div`
   display: flex;
   align-items: center;

package/UnderConstruction/useUnderConstruction.ts

@@ -1,5 +1,5 @@
-import { useLocation } from 'react-router-dom';
 import { useGetSettings } from '@autobusal/providers/services';
+import { useUserStore } from '@autobusal/providers/stores/user';
 
 /**
  * Paths that stay reachable while the site is closed.
@@ -7,18 +7,28 @@ import { useGetSettings } from '@autobusal/providers/services';
  * Edited: Ferjolt Ozuni - Date: 2026-08-01
  *
  * Without this the switch is one-way: the holding page replaces the whole
- * router, so /admin goes behind it too and the only way to turn maintenance
- * back OFF is a database edit. Found by actually switching it on and then
+ * router, so /admin went behind it too and the only way to turn maintenance
+ * back OFF was a database edit. Found by actually switching it on and then
  * trying to switch it off again.
  *
  * Staff routes are the exception, not the public site - somebody has to be
  * able to log in and finish the work the site is closed for. Everything a
- * visitor can reach still gets the holding page, including deep links.
+ * visitor can reach still gets the holding page, deep links included.
  */
 const ALWAYS_OPEN = [ '/admin', '/account', '/auth' ];
 
 /**
- * Whether the holding page should replace the app for the current route.
+ * Whether the holding page should replace the app right now.
+ *
+ * Reads the path from `window.location` rather than react-router's
+ * useLocation: this runs ABOVE <RouterProvider> (it decides whether to
+ * render the router at all), so there is no router context to read from -
+ * calling useLocation here throws and blanks the entire page, which is
+ * exactly what happened the first time.
+ *
+ * The consequence is that it does not re-evaluate on client-side
+ * navigation, which is fine: the holding page renders no links, so the only
+ * way to leave it is a real page load, and that re-runs this.
  *
  * obtapi sends `construction` only while the brand is actually under
  * construction, so its presence is the switch.
@@ -26,14 +36,33 @@ const ALWAYS_OPEN = [ '/admin', '/account', '/auth' ];
 const useUnderConstruction = (): boolean => {
   const { data: settings } = useGetSettings();
 
-  const location = useLocation();
+  const { data: user } = useUserStore();
 
   if (!settings?.construction) {
     return false;
   }
 
-  return !ALWAYS_OPEN.some(path => (
-    location.pathname === path || location.pathname.startsWith(`${ path }/`)
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * An admin sees the real site while it is closed - that is rather the
+   * point of closing it: somebody has to be able to look at the thing they
+   * are working on. Deliberately ADMIN only; an operator or agent signing
+   * in still gets the holding page, because the site is not open to them
+   * either.
+   *
+   * Presentation, not protection. obtapi still decides what any account may
+   * actually do, so a forged user in the client store would only reveal a
+   * site that is about to be public anyway.
+   */
+  if (user?.type === 'admin') {
+    return false;
+  }
+
+  const path = typeof window === 'undefined' ? '/' : window.location.pathname;
+
+  return !ALWAYS_OPEN.some(open => (
+    path === open || path.startsWith(`${ open }/`)
   ));
 };
 

package/index.ts

@@ -28,6 +28,7 @@ import Password from './Password/Password';
 import Policy from './Policy/Policy';
 import Report from './Report/Report';
 import RouteFeature from './RouteFeature/RouteFeature';
+import Required from './Required/Required';
 import RouteItem from './RouteItem/RouteItem';
 import Row from './Table/Row';
 import Table from './Table/Table';
@@ -70,6 +71,7 @@ export {
   Policy,
   Report,
   RouteFeature,
+  Required,
   RouteItem,
   Row,
   Table,

package/package.json

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