@autobusal/common 1.34.0 → 1.35.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.35.0 (2026-08-29)
+
+- RouteFeature's compact chip draws a real tooltip on hover AND on focus, so a tap reveals the amenity name; `title` alone was invisible on touch and slow on desktop.
+- Calendar treats an unparseable defaultValue as nothing chosen, and anchors an empty picker on its minDate - so a floored picker (the return leg) opens on the month being travelled rather than on today or on January.
+
+## 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.

package/Calendar/Calendar.tsx

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react';
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { TFunction } from 'i18next';
 import { useOutside } from '@autobusal/hooks';
-import { Validate, prepareDate } from '@autobusal/utilities';
+import { Validate, prepareDate, isPreparedDate } from '@autobusal/utilities';
 import Picker from './Picker';
 import { Container } from './styles';
 
@@ -68,8 +68,18 @@ const Calendar = ({ type, name, label, id, defaultValue, t, validation, minDate,
    * Empty instead, so the field reads as unanswered and the API's
    * `required|date_format:d/m/Y|before:today` says so if it is left that way.
    */
+  /*
+   * Edited: Claude - Date: 2026-08-29
+   *
+   * A defaultValue that is not a date is NOTHING CHOSEN, not a value.
+   * `??` only catches null/undefined, so the search URL's literal "none"
+   * (what it carries for "no return leg") came through as a real value:
+   * the input displayed the word, and the picker built its grid from
+   * createDate('none') - an Invalid Date - so the round-trip calendar
+   * opened on January instead of the month being travelled.
+   */
   const [ prepared, setPrepared ] = useState<string>(
-    defaultValue ?? (type === 'dob' ? '' : prepareDate(new Date()))
+    isPreparedDate(defaultValue) ? String(defaultValue) : (type === 'dob' ? '' : prepareDate(new Date()))
   );
   const [ selected, setSelected ] = useState<string>(prepared);
 
@@ -99,7 +109,13 @@ const Calendar = ({ type, name, label, id, defaultValue, t, validation, minDate,
           // is an Invalid Date and the grid built from it renders as nothing.
           // The anchor is display only - what the form submits stays empty
           // until a day is actually clicked.
-          value={ prepared || prepareDate(new Date()) }
+          /*
+           * Edited: Claude - Date: 2026-08-29: with nothing chosen, open on
+           * the FLOOR when there is one - the return leg's floor is the
+           * outbound's date, so its picker opens on the month being
+           * travelled rather than on today.
+           */
+          value={ prepared || (isPreparedDate(minDate) ? String(minDate) : prepareDate(new Date())) }
           selected={ selected }
           minDate={ minDate }
           maxYears={ maxYears }

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/RouteFeature/RouteFeature.tsx

@@ -1,4 +1,4 @@
-import { Container, Image, Name } from './styles';
+import { Container, Image, Name, Tooltip } from './styles';
 import { FeatureData } from '@autobusal/providers/types/routes';
 
 interface Props {
@@ -16,14 +16,33 @@ interface Props {
   compact?: boolean
 }
 
+/**
+ * Edited: Claude - Date: 2026-08-29
+ *
+ * THE NAME IS DRAWN, not merely promised to the browser.
+ *
+ * The compact chip carried the amenity name in `title` alone, which is the
+ * one tooltip mechanism nobody can rely on: desktop browsers wait about a
+ * second before drawing it, and touch devices never draw it at all - so on
+ * a phone these icons were unlabelled decoration with no way to find out
+ * what they meant. The title stays (it is what screen readers and the
+ * native tooltip use) and a real one is drawn on hover AND on focus, which
+ * a tap produces through tabIndex.
+ */
 const RouteFeature = ({ item, compact = false }: Props): JSX.Element => (
-  <Container $compact={ compact } title={ item.name }>
+  <Container
+    $compact={ compact }
+    title={ item.name }
+    tabIndex={ compact ? 0 : undefined }
+  >
     { /* 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> }
+
+    { compact && <Tooltip role="tooltip">{ item.name }</Tooltip> }
   </Container>
 );
 

package/RouteFeature/styles.ts

@@ -19,8 +19,24 @@ export const Container = styled.div<{ $compact?: boolean }>`
    * template literal, where a backtick terminates the string.)
    */
   ${ props => props.$compact && css`
+    position: relative;
     padding: 5px;
     cursor: help;
+
+    /* Claude - 2026-08-29: the tooltip below is positioned against this
+       chip, and appears on hover or on focus - a tap focuses it, which is
+       the only way a touch device can ever reveal an icon's meaning. */
+    &:hover > span,
+    &:focus > span,
+    &:focus-within > span {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &:focus {
+      outline: 2px solid ${ props => props.theme.primary.normal };
+      outline-offset: 2px;
+    }
   ` }
 `;
 
@@ -32,3 +48,31 @@ export const Image = styled.img`
 export const Name = styled.span`
   font-size: ${ props => props.theme.size.xs };
 `;
+
+/**
+ * The amenity's name, drawn above its chip.
+ *
+ * Claude - Date: 2026-08-29
+ *
+ * `visibility` alongside `opacity` so the label is genuinely inert while
+ * hidden - a transparent tooltip still takes the pointer, and one sitting
+ * over the chip below it would eat that chip's own hover.
+ */
+export const Tooltip = styled.span`
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  z-index: 20;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  font-size: ${ props => props.theme.size.xs };
+  line-height: 1.4;
+  white-space: nowrap;
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
+  border-radius: ${ props => props.theme.borderRadius };
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+`;

package/package.json

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