@autobusal/common 1.33.14 → 1.34.1

package/Back/BackWithTitle.tsx

@@ -1,11 +1,31 @@
 import { TFunction } from 'i18next';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import BackTo from './BackTo';
 
+/**
+ * A link offered beside the page title.
+ *
+ * Edited: Claude - Date: 2026-08-29
+ *
+ * For the places a record OWNS a list that is the main reason to open it.
+ * The country form is the case in point: its "Manage Available Cities"
+ * link sat as one row among the form's fields, styled like a value rather
+ * than a way out of the page, and the stations underneath it could only be
+ * reached by opening a city first. A record's onward journeys belong with
+ * its title, not buried between its inputs.
+ */
+export interface TitleAction {
+  label: string
+  to: string
+  icon?: JSX.Element
+}
+
 interface Props {
   title: string
   to: string
   t: TFunction<'common'>
+  actions?: TitleAction[]
 }
 
 const Container = styled.div`
@@ -19,12 +39,51 @@ const Container = styled.div`
   }
 `;
 
-const BackWithTitle = ({ title, to, t }: Props): JSX.Element => (
+const Actions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+
+  /* pushed to the far end of the title line, whatever the title's length */
+  margin-left: auto;
+`;
+
+const Action = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 14px;
+  font-weight: 700;
+  font-size: calc(${ props => props.theme.size.xs } + 1px);
+  background: ${ props => props.theme.background.neutral };
+  border-radius: 100px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 0 4px 15px ${ props => props.theme.background.neutral };
+  }
+`;
+
+const BackWithTitle = ({ title, to, t, actions }: Props): JSX.Element => (
   <Container>
     <BackTo to={ to } t={ t } />
 
     <h1>{ title }</h1>
+
+    { (actions !== undefined && actions.length > 0) && (
+      <Actions>
+        { actions.map(action => (
+          <Action key={ action.to } to={ action.to }>
+            { action.icon }
+            { action.label }
+          </Action>
+        )) }
+      </Actions>
+    ) }
   </Container>
 );
 
-export default BackWithTitle;
+export default BackWithTitle;

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.34.1 (2026-08-29)
+
+- Meta's stale-tag cleanup can no longer remove a tag React owns: it now identifies leftovers by having existed before React rendered, not by comparing values (Sentry BUSMAGUS-7 - on a prerendered page the leftover and the live tag carry the same value, so the old comparison deleted React's own node and the next navigation crashed on removeChild).
+
+## 1.34.0 (2026-08-29)
+
+- Calendar renders one month per page - the neighbouring months' days are blank padding now, so a grid no longer shows two different 1sts and 31sts.
+- Calendar takes `maxYears`, raising a single picker's ceiling above what its type allows (booking pickers stay at one year); Viewer forwards it on 'picker' rows.
+- New SearchableSelect: a <select> you can type into - accent-insensitive matching, group headings, inert disabled options, written for the operator's stop picker.
+- BackWithTitle takes `actions`, rendered as pill links at the far end of the title line.
+- Table row actions for 'cities' and 'stations'.
+
 ## 1.33.14 (2026-08-26)
 
 - ChooseSeat: seat-selection add-on mode - `optional` + `fee` props; unpicked state shows the free-auto note, a made choice gets a back-to-automatic control. Default behaviour (required free pick) unchanged.

package/Calendar/Browse/Browse.tsx

@@ -8,11 +8,12 @@ import { Container, ButtonBrowse, Choose, Select } from './styles';
 interface Props {
   type: 'picker' | 'dob' | 'date'
   value: string
+  maxYears?: number
   t: TFunction<'general'>
   onChange: (date: Date) => void
 }
 
-const Browse = ({ type, value, t, onChange }: Props): JSX.Element => {
+const Browse = ({ type, value, maxYears, t, onChange }: Props): JSX.Element => {
   const date = createDate(value);
 
   const onPrevious = (): void => {
@@ -51,7 +52,7 @@ const Browse = ({ type, value, t, onChange }: Props): JSX.Element => {
         </Select>
 
         <Select $type="year" value={ date.getFullYear() } onChange={ onYear }>
-          { getYears(type, date.getFullYear()) }
+          { getYears(type, date.getFullYear(), maxYears) }
         </Select>
       </Choose>
 

package/Calendar/Calendar.tsx

@@ -32,6 +32,15 @@ interface Props {
    * alert after pressing search.
    */
   minDate?: string
+  /**
+   * Edited: Claude - Date: 2026-08-29
+   * How many years ahead this picker may reach, when the type's own ceiling
+   * is too near. A booking picker stops at one year because that is how far
+   * ahead seats are sold; an operator planning a route SCHEDULE works in
+   * multi-year seasons, and had no way to enter one. Raises the ceiling
+   * only - it can never bring a picker below what its type already allows.
+   */
+  maxYears?: number
   refs: UseFormRegister<any>
   onUpdate: UseFormSetValue<any>
   /**
@@ -42,7 +51,7 @@ interface Props {
   onChange?: (value: string) => void
 }
 
-const Calendar = ({ type, name, label, id, defaultValue, t, validation, minDate, refs, onUpdate, onChange }: Props): JSX.Element => {
+const Calendar = ({ type, name, label, id, defaultValue, t, validation, minDate, maxYears, refs, onUpdate, onChange }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
 
   /**
@@ -93,6 +102,7 @@ const Calendar = ({ type, name, label, id, defaultValue, t, validation, minDate,
           value={ prepared || prepareDate(new Date()) }
           selected={ selected }
           minDate={ minDate }
+          maxYears={ maxYears }
           t={ t }
           onClick={ onClick }
         />

package/Calendar/Days.tsx

@@ -9,10 +9,16 @@ interface Props {
   value: string
   selected: string
   minDate?: string
+  /**
+   * Edited: Claude - Date: 2026-08-29
+   * How many years ahead this particular picker may reach, overriding what
+   * the type allows. See the note on Calendar's own prop.
+   */
+  maxYears?: number
   onSelected: (prepared: string, disabled: boolean) => void
 }
 
-const Days = ({ type, value, selected, minDate, onSelected }: Props): JSX.Element => {
+const Days = ({ type, value, selected, minDate, maxYears, onSelected }: Props): JSX.Element => {
   const [ calendar, setCalendar ] = useState<CalendarData>(getCalendar(value));
 
   useEffect(() => {
@@ -24,7 +30,7 @@ const Days = ({ type, value, selected, minDate, onSelected }: Props): JSX.Elemen
   // getLimits below, which for a booking picker follows the server.
   const today = prepareDate(new Date());
 
-  const limits = getLimits(type);
+  const limits = getLimits(type, maxYears);
 
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-01
@@ -47,45 +53,29 @@ const Days = ({ type, value, selected, minDate, onSelected }: Props): JSX.Elemen
 
   let currentDay: number = 1;
 
-  // prepare the previous date
-  const previousDate: Date = createDate(value);
-  previousDate.setMonth(previousDate.getMonth() - 1);
-
   // setup the current date
   const currentDate: Date = createDate(value);
 
-  // prepare the next date
-  const nextDate: Date = createDate(value);
-  nextDate.setMonth(nextDate.getMonth() + 1);
-
   for (let i = 1; i <= calendar.weeks; i++) {
     for (let j = 1; j <= 7; j++) {
       const key = i * 10 + j;
 
-      if (i == 1 && j < calendar.begins) {
-        previousDate.setDate(calendar.previous);
-
-        const disabled = compareDates(previousDate, limits);
-
-        rows.push(
-          <Day key={ key } $type="other" $disabled={ disabled }>
-            <span>{ calendar.previous }</span>
-          </Day>
-        );
-
-        calendar.previous++;
-      } else if (currentDay > calendar.month) {
-        nextDate.setDate(calendar.next);
-
-        const disabled = compareDates(nextDate, limits);
-
-        rows.push(
-          <Day key={ key } $type="other" $disabled={ disabled }>
-            <span>{ calendar.next }</span>
-          </Day>
-        );
-
-        calendar.next++;
+      /*
+       * Edited: Claude - Date: 2026-08-29
+       *
+       * ONE MONTH PER PAGE. The leading and trailing cells used to spell out
+       * the neighbouring months' days - so a picker opened on September
+       * showed "31" (August) in the first cell and "1, 2, 3" (October) in the
+       * last, greyed but numbered. Two different 1sts and two different 31sts
+       * on screen is exactly the ambiguity a date picker exists to remove,
+       * and on the booking form those neighbours were legitimately selectable
+       * dates rendered as though they were not part of the month being read.
+       *
+       * The cells stay - blank - because the grid is what puts the 1st under
+       * the right weekday; only the foreign numbers go.
+       */
+      if ((i == 1 && j < calendar.begins) || currentDay > calendar.month) {
+        rows.push(<Day key={ key } $type="blank" aria-hidden={ true } />);
       } else {
         currentDate.setDate(currentDay);
 

package/Calendar/Picker.tsx

@@ -11,11 +11,12 @@ interface Props {
   value: string
   selected: string
   minDate?: string
+  maxYears?: number
   t: TFunction<'general'>
   onClick: (prepared: string) => void
 }
 
-const Picker = ({ type, value, selected, minDate, t, onClick }: Props): (JSX.Element | null) => {
+const Picker = ({ type, value, selected, minDate, maxYears, t, onClick }: Props): (JSX.Element | null) => {
   const [ prepared, setPrepared ] = useState<string>(value);
 
   const onSelected = (prepared: string, disabled: boolean): void => {
@@ -39,11 +40,11 @@ const Picker = ({ type, value, selected, minDate, t, onClick }: Props): (JSX.Ele
 
   return (
     <ContainerPicker>
-      <Browse type={ type } value={ prepared } t={ t } onChange={ onChange } />
+      <Browse type={ type } value={ prepared } maxYears={ maxYears } t={ t } onChange={ onChange } />
 
       <Header t={ t } />
 
-      <Days type={ type } value={ prepared } selected={ selected } minDate={ minDate } onSelected={ onSelected } />
+      <Days type={ type } value={ prepared } selected={ selected } minDate={ minDate } maxYears={ maxYears } onSelected={ onSelected } />
     </ContainerPicker>
   );
 };

package/Calendar/styles.ts

@@ -22,7 +22,7 @@ export const ContainerDays = styled.div`
 `;
 
 export const Day = styled.div<{
-  $type?: ('today' | 'other')
+  $type?: ('today' | 'other' | 'blank')
   $disabled?: boolean
   $selected?: boolean
 }>`
@@ -31,6 +31,14 @@ export const Day = styled.div<{
   padding: 2px;
   cursor: pointer;
 
+  /* Edited: Claude - Date: 2026-08-29: the padding cells that hold the 1st
+     under its weekday - they hold space and nothing else (see Days.tsx) */
+  ${ props => props.$type === 'blank' && css`
+    height: 30px;
+    cursor: default;
+    pointer-events: none;
+  ` }
+
   & > span {
     width: 26px;
     height: 26px;

package/Calendar/utilities/browse.tsx

@@ -26,8 +26,11 @@ export const getMonths = (t: TFunction<'general'>): JSX.Element[] => {
   return options;
 };
 
-export const getYears = (type: ('picker' | 'dob' | 'date'), currentYear: number): JSX.Element[] => {
-  const limits = getLimits(type);
+export const getYears = (type: ('picker' | 'dob' | 'date'), currentYear: number, maxYears?: number): JSX.Element[] => {
+  // Edited: Claude - Date: 2026-08-29: the year dropdown has to reach as far
+  // as the day grid does, or a five-year schedule could be validated but
+  // never navigated to
+  const limits = getLimits(type, maxYears);
 
   const current = new Date().getFullYear();
   const start = current - limits.year.min;

package/Calendar/utilities/settings.ts

@@ -47,7 +47,17 @@ export const setServerToday = (value?: string): void => {
   serverToday = new Date(year, month - 1, day, 0, 0, 0, 0);
 };
 
-export const getLimits = (type: ('picker' | 'dob' | 'date')): CalendarLimit => {
+/**
+ * Edited: Claude - Date: 2026-08-29
+ *
+ * `maxYears` raises this picker's ceiling above what its type allows, for
+ * the callers that genuinely reach further than a booking does: an
+ * operator's route schedule is now planned up to five years out, while the
+ * booking picker every passenger uses stays at one. Only the ceiling moves
+ * - the floor, and the whole of the `dob` and `date` behaviour, are
+ * untouched, and omitting it leaves every existing picker exactly as it was.
+ */
+export const getLimits = (type: ('picker' | 'dob' | 'date'), maxYears?: number): CalendarLimit => {
   // Edited: Ferjolt Ozuni - Date: 2026-08-03
   //
   // The BOOKING floor comes from the server; a date of birth does not.
@@ -113,6 +123,15 @@ export const getLimits = (type: ('picker' | 'dob' | 'date')): CalendarLimit => {
     limits.max.year = 0;
   }
 
+  if (maxYears !== undefined && maxYears > limits.max.year) {
+    limits.max.year = maxYears;
+
+    // the ceiling is a whole year further out, so it ends on ITS last day -
+    // a max of {year + 5, month 11, day 31} rather than today's month/day
+    limits.max.month = 11;
+    limits.max.day = 31;
+  }
+
   return {
     year: {
       min: limits.min.year,

package/Meta.tsx

@@ -46,19 +46,42 @@ const withBrand = (value: string): string => (brand ? `${ value } - ${ brand }`
 // title alone; a description/canonical duplicate is worse, since crawlers
 // commonly pick the FIRST occurrence, which is the potentially-stale one.
 //
-// This makes Meta the sole owner of every tag it manages: for each one, if
-// it has a current value, keep the element carrying that value and remove
-// 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.
-// 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[] };
+// This makes Meta the sole owner of every tag it manages: whatever was
+// carrying one of these before React rendered goes, and React's own output
+// is all that is left. Edited: Claude - 2026-08-29 - it used to decide that
+// by VALUE (keep the element whose value matches this page, drop the rest),
+// which is what BUSMAGUS-7 turned out to be; see preReactHeadTags below.
+// A selector is all this needs now: the hreflang alternates, which
+// legitimately repeat, need no special case either, because the rule is no
+// longer "keep one of them".
+
+/**
+ * Every head tag that existed BEFORE React rendered anything.
+ *
+ * Edited: Claude - Date: 2026-08-29 (Sentry BUSMAGUS-7)
+ *
+ * The cleanup below could not tell a leftover prerendered tag from React's
+ * own freshly hoisted one, so it compared VALUES and kept the first match
+ * in document order. On a prerendered page those values are identical by
+ * construction - the snapshot was produced by this very component - and the
+ * first match is always the snapshot's, sitting in the served HTML. So the
+ * cleanup kept the dead tag and removed REACT'S: the fiber went on holding
+ * a detached node, and the next navigation's unmount reached
+ * `n.parentNode.removeChild(n)` with a null parent. That is BUSMAGUS-7,
+ * thrown from React 19's HostHoistable deletion path, on a
+ * /bus-lines/... URL - and it aborts the navigation in flight, which is
+ * what the DOM-corruption watchdog in @autobusal/providers then has to
+ * paper over with a full reload.
+ *
+ * This module is evaluated before the first <Meta> can render, and
+ * `createRoot` (unlike `hydrateRoot`) never adopts existing markup - so
+ * anything captured here is provably NOT React's, and anything React
+ * hoists later is provably not in here. Identity instead of value: the
+ * cleanup can now only ever remove tags React does not own.
+ */
+const preReactHeadTags: Set<Element> = new Set(
+  typeof document === 'undefined' ? [] : document.head.querySelectorAll('title, meta, link')
+);
 
 // Edited: Ferjolt Ozuni - Date: 2026-07-31
 // Bug: this ran on EVERY render of EVERY <Meta> usage (no dependency array),
@@ -86,7 +109,7 @@ type OwnedTag = { selector: string, attr: 'text' | string, value?: string, value
 // is the sole owner of this part of the DOM.
 let hasCleanedPrerenderedTags = false;
 
-const useSoleMetaOwnership = (tags: OwnedTag[]): void => {
+const useSoleMetaOwnership = (selectors: string[]): void => {
   useEffect(() => {
     if (hasCleanedPrerenderedTags) {
       return;
@@ -94,33 +117,21 @@ const useSoleMetaOwnership = (tags: OwnedTag[]): void => {
 
     hasCleanedPrerenderedTags = true;
 
-    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;
-      }
-
-      const mine = elements.find(el => (
-        attr === 'text' ? el.textContent === value : el.getAttribute(attr) === value
-      ));
-
-      elements.forEach(el => {
-        if (el !== mine) {
-          el.remove();
+    /*
+     * Edited: Claude - Date: 2026-08-29 (Sentry BUSMAGUS-7)
+     *
+     * Remove the tags that were here before React was, and nothing else.
+     * React has already committed its own copy of every tag this component
+     * owns by the time this effect runs, so a leftover is by definition one
+     * of the nodes captured above - no value comparison needed, and none
+     * possible: on a prerendered page the leftover and the live tag carry
+     * the SAME value, which is precisely how the old comparison came to
+     * delete React's own node. See the note on preReactHeadTags.
+     */
+    selectors.forEach(selector => {
+      document.querySelectorAll(`head > ${ selector }`).forEach(element => {
+        if (preReactHeadTags.has(element)) {
+          element.remove();
         }
       });
     });
@@ -273,22 +284,22 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
   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 },
-    { selector: 'meta[property="og:image"]', attr: 'content', value: resolvedImage },
-    { selector: 'meta[property="og:url"]', attr: 'content', value: canonicalUrl },
-    { selector: 'meta[property="og:site_name"]', attr: 'content', value: brand },
-    { selector: 'meta[name="twitter:card"]', attr: 'content', value: 'summary_large_image' },
-    { selector: 'meta[name="twitter:title"]', attr: 'content', value: fullTitle },
-    { selector: 'meta[name="twitter:description"]', attr: 'content', value: description },
-    { selector: 'meta[name="twitter:image"]', attr: 'content', value: resolvedImage }
+    'title',
+    'meta[name="robots"]',
+    'meta[name="keywords"]',
+    'meta[name="description"]',
+    'link[rel="canonical"]',
+    'link[rel="alternate"][hreflang]',
+    'meta[property="og:type"]',
+    'meta[property="og:title"]',
+    'meta[property="og:description"]',
+    'meta[property="og:image"]',
+    'meta[property="og:url"]',
+    'meta[property="og:site_name"]',
+    'meta[name="twitter:card"]',
+    'meta[name="twitter:title"]',
+    'meta[name="twitter:description"]',
+    'meta[name="twitter:image"]'
   ]);
   usePageviewTracking(location.pathname + location.search, fullTitle);
 

package/SearchableSelect/SearchableSelect.tsx

@@ -0,0 +1,199 @@
+import { useState, useRef, useEffect, ChangeEvent, KeyboardEvent } from 'react';
+import { TFunction } from 'i18next';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { useOutside } from '@autobusal/hooks';
+import { Validate } from '@autobusal/utilities';
+import { fold } from '../Autocomplete/fold';
+import { Container, ContainerOptions, Group, Option, Note, Empty } from './styles';
+import { SearchableOption } from './types';
+
+interface Props {
+  name: string
+  options: SearchableOption[]
+  /** shown while nothing is chosen, and as the input's accessible name */
+  placeholder: string
+  /** what to say when the query matches nothing */
+  empty: string
+  defaultValue?: string
+  validation?: string
+  t: TFunction<any>
+  refs: UseFormRegister<any>
+  onUpdate: UseFormSetValue<any>
+}
+
+/**
+ * A <select> you can type into.
+ *
+ * Edited: Claude - Date: 2026-08-29
+ *
+ * Written for the operator's "add a stop to this route" control, which was
+ * a native select listing every station on the platform grouped by country
+ * - hundreds of options, in an order no operator knows, with no way to
+ * search. Finding one's own city meant scrolling the whole list (and on a
+ * phone, scrolling a native picker of the same length).
+ *
+ * Matching is accent-insensitive through the same `fold` the public search
+ * box uses, so "korce" finds "Korçë" - the spelling anybody without an
+ * Albanian keyboard actually types. Empty query lists everything, so it
+ * still behaves like the select it replaces if nobody types at all.
+ *
+ * The chosen value lives in a hidden input registered with react-hook-form,
+ * the same idiom Calendar and Autocomplete already use here, so the
+ * surrounding form and its validation are unchanged.
+ */
+const SearchableSelect = ({ name, options, placeholder, empty, defaultValue, validation, t, refs, onUpdate }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+  const [ value, setValue ] = useState<string>(defaultValue ?? '');
+  const [ q, setQ ] = useState<string>('');
+  const [ highlighted, setHighlighted ] = useState<number>(-1);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutside(ref, () => setShow(false));
+
+  const chosen = options.find(option => option.value === value);
+
+  // the option list arrives asynchronously and is rebuilt when the language
+  // changes; a value chosen before that must keep showing the right label
+  useEffect(() => {
+    if (value && !options.some(option => option.value === value)) {
+      setValue('');
+      onUpdate(name, '');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ options ]);
+
+  const needle = fold(q.trim());
+
+  const matches = needle === ''
+    ? options
+    : options.filter(option => (
+        [ option.label, option.group ?? '', ...(option.search ?? []) ]
+          .some(candidate => fold(candidate).includes(needle))
+      ));
+
+  // only the choosable ones take part in keyboard navigation
+  const navigable = matches.filter(option => option.disabled !== true);
+
+  const onSelect = (option: SearchableOption): void => {
+    if (option.disabled === true) {
+      return;
+    }
+
+    setValue(option.value);
+
+    // shouldValidate so a "required" message from an earlier submit clears
+    // the instant a station is chosen, rather than lingering over a filled
+    // field until the next submit
+    onUpdate(name, option.value, { shouldValidate: true });
+
+    setQ('');
+    setHighlighted(-1);
+    setShow(false);
+  };
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    setQ(event.target.value);
+
+    setShow(true);
+    setHighlighted(-1);
+
+    // typing means the previous choice is being replaced - clear it now so a
+    // half-typed query can never be submitted as the old selection
+    if (value) {
+      setValue('');
+      onUpdate(name, '');
+    }
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'Escape') {
+      setShow(false);
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+
+      setShow(true);
+      setHighlighted(Math.min(highlighted + 1, navigable.length - 1));
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+
+      setHighlighted(Math.max(highlighted - 1, 0));
+    } else if (event.key === 'Enter') {
+      // a picker inside a form: Enter chooses the highlighted option rather
+      // than submitting whatever is half-typed
+      event.preventDefault();
+
+      const option = navigable[highlighted];
+
+      if (option !== undefined) {
+        onSelect(option);
+      }
+    }
+  };
+
+  const items: JSX.Element[] = [];
+
+  let group: string | undefined;
+
+  matches.forEach(option => {
+    if (option.group !== undefined && option.group !== group) {
+      group = option.group;
+
+      items.push(<Group key={ `group-${ group }` }>{ group }</Group>);
+    }
+
+    const index = navigable.indexOf(option);
+
+    items.push(
+      <Option
+        key={ option.value }
+        type="button"
+        $selected={ index >= 0 && index === highlighted }
+        $disabled={ option.disabled }
+        aria-disabled={ option.disabled }
+        onClick={ () => onSelect(option) }
+      >
+        { option.label }
+
+        { option.note !== undefined && <Note>({ option.note })</Note> }
+      </Option>
+    );
+  });
+
+  return (
+    <Container ref={ ref }>
+      <input
+        type="text"
+        autoComplete="off"
+        aria-label={ placeholder }
+        placeholder={ placeholder }
+        value={ show ? q : (chosen?.label ?? '') }
+        onFocus={ () => setShow(true) }
+        onClick={ () => setShow(true) }
+        onChange={ onChange }
+        onKeyDown={ onKeyDown }
+      />
+
+      { show && (
+        <ContainerOptions>
+          { items.length > 0 ? items : <Empty>{ empty }</Empty> }
+        </ContainerOptions>
+      ) }
+
+      { /* The same idiom Calendar uses, INCLUDING the part that looks
+           redundant: `defaultValue` must track the chosen value, not stay
+           fixed at the initial one.
+
+           React re-applies a hidden input's `defaultValue` on every update,
+           and because react-hook-form writes the field's value as a plain
+           property assignment (which never marks the node dirty), a static
+           defaultValue silently wiped that write on the next render. The
+           label showed the choice, the form saw an empty field, and the
+           submit answered "this field is required" with an option visibly
+           selected. Caught in the browser; the types could not have. */ }
+      <input type="hidden" defaultValue={ value } { ...refs(name, Validate(validation ?? '', t)) } />
+    </Container>
+  );
+};
+
+export default SearchableSelect;

package/SearchableSelect/styles.ts

@@ -0,0 +1,69 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const ContainerOptions = styled.div`
+  position: absolute;
+  top: 44px;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  min-width: 260px;
+  max-height: 260px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  background: ${ props => props.theme.foreground.normal };
+  box-shadow: ${ props => props.theme.boxShadow };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Group = styled.div`
+  padding: 8px 12px 4px;
+  font-weight: 700;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  text-transform: uppercase;
+`;
+
+export const Option = styled.button<{ $selected: boolean, $disabled?: boolean }>`
+  padding: 6px 12px;
+  text-align: left;
+  border-radius: ${ props => props.theme.borderRadius };
+  transition: all 0.3s ease;
+
+  &:hover {
+    color: ${ props => props.theme.primary.contrast };
+    background-color: ${ props => props.theme.primary.normal };
+  }
+
+  ${ props => props.$selected && css`
+    color: ${ props => props.theme.primary.contrast };
+    background-color: ${ props => props.theme.primary.normal };
+  ` }
+
+  /* a station awaiting approval is shown so the proposal does not look
+     lost, and is inert because the server refuses it anyway */
+  ${ props => props.$disabled && css`
+    opacity: .45;
+    cursor: default;
+    pointer-events: none;
+  ` }
+`;
+
+export const Note = styled.span`
+  margin-left: 6px;
+  font-size: ${ props => props.theme.size.xs };
+  opacity: .8;
+`;
+
+export const Empty = styled.div`
+  padding: 10px 12px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+`;

package/SearchableSelect/types.ts

@@ -0,0 +1,23 @@
+export interface SearchableOption {
+  /** what the form submits */
+  value: string
+
+  /** what the option shows, already in the reader's language */
+  label: string
+
+  /** heading this option sits under, e.g. its country */
+  group?: string
+
+  /** listed, but not choosable - a station awaiting approval, say */
+  disabled?: boolean
+
+  /** short parenthetical after the label, e.g. "pending approval" */
+  note?: string
+
+  /**
+   * Extra spellings this option should MATCH on but never display - the
+   * same idea as Autocomplete's own `search`, so a Greek station can be
+   * found by typing its Latin name and the other way round.
+   */
+  search?: string[]
+}

package/Table/Actions/Icon.tsx

@@ -1,9 +1,10 @@
 import { TFunction } from 'i18next';
 import { AiOutlineCheck, AiOutlineCloudDownload } from 'react-icons/ai';
 import { BiEditAlt, BiTransfer, BiTrash } from 'react-icons/bi';
-import { FaTrash } from 'react-icons/fa';
+import { FaCity, FaTrash } from 'react-icons/fa';
 import { GiMoneyStack } from 'react-icons/gi';
 import { IoDocumentLockOutline } from 'react-icons/io5';
+import { MdLocationOn } from 'react-icons/md';
 import { FaFileInvoice } from 'react-icons/fa';
 import { RiBusLine, RiExternalLinkLine, RiEyeLine, RiLoginCircleLine, RiPrinterLine, RiReplyLine } from 'react-icons/ri';
 
@@ -71,6 +72,20 @@ const Icon = ({ type, t }: Props): (JSX.Element | null) => {
     case 'bus':
       return <RiBusLine  title={ t('table.actions.custom.bus', { ns: 'common' }) }  />;
 
+    /*
+     * Edited: Claude - Date: 2026-08-29
+     *
+     * Locations are three levels deep - country, then its cities, then a
+     * city's stations - and reaching a station meant opening the country,
+     * opening the city, and only then the stops. These two put both lists
+     * one click from the country row itself.
+     */
+    case 'cities':
+      return <FaCity title={ t('table.actions.custom.cities', { ns: 'common' }) } />;
+
+    case 'stops':
+      return <MdLocationOn title={ t('table.actions.custom.stops', { ns: 'common' }) } />;
+
     case 'douane':
       return <IoDocumentLockOutline  title={ t('table.actions.custom.douane', { ns: 'common' }) }  />;
   }

package/Viewer/Data.tsx

@@ -110,6 +110,7 @@ const Data = ({ id, field, item, refs, t, onUpdate }: Props): (JSX.Element | nul
           defaultValue={ value.string }
           t={ t }
           validation={ item.rules }
+          maxYears={ item.maxYears }
           refs={ refs }
           onUpdate={ onUpdate }
           // Edited: Ferjolt Ozuni - Date: 2026-08-01

package/Viewer/types.ts

@@ -25,6 +25,12 @@ export interface ViewData {
   values?: DropdownData[]
   selected?: any[]
   rules?: string
+  /**
+   * Edited: Claude - Date: 2026-08-29
+   * For 'picker' rows only: how many years ahead the calendar may reach.
+   * Omitted, the picker keeps its type's own ceiling (one year).
+   */
+  maxYears?: number
   notice?: string
   url?: string
   // Edited: Ferjolt Ozuni - Date: 2026-08-01

package/index.ts

@@ -8,6 +8,7 @@ import BlogItem from './BlogItem/BlogItem';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs';
 import Button from './Button/Button';
 import Calendar from './Calendar/Calendar';
+import SearchableSelect from './SearchableSelect/SearchableSelect';
 import ChangeLanguage from './ChangeLanguage/ChangeLanguage';
 import ChooseSeat from './Seats/ChooseSeat';
 import CompanyItem from './CompanyItem/CompanyItem';
@@ -60,6 +61,7 @@ export {
   Breadcrumbs,
   Button,
   Calendar,
+  SearchableSelect,
   ChangeLanguage,
   ChooseSeat,
   CompanyItem,

package/package.json

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