@autobusal/common 1.33.5 → 1.33.7

package/AiAssist/AiReviewModal.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
+import { sanitizeHtml } from '@autobusal/utilities';
 import Modal from '../Modal/Modal';
 import { useAiAvailable, useAiGenerate, useAiTranslate, useAiImprove } from './services';
 import { Row, Field, Compare, Pane, Draft, Actions } from './styles';
@@ -146,11 +147,21 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
         </Row>
       ) }
 
+      { /* Edited: Claude - Date: 2026-08-19
+           Both panes are sanitized, for two different reasons. The draft is
+           whatever a model wrote: a prompt-injected source document can talk
+           it into emitting markup, and this preview renders that straight
+           into an admin's browser BEFORE anyone has decided to keep it. The
+           source is the same admin-authored CMS HTML every other sink in this
+           codebase runs through sanitizeHtml (page/Page.tsx, blog, policies).
+           Only the preview is sanitized - Insert still hands the caller the
+           raw draft, so nothing the admin actually meant to save is silently
+           rewritten on its way into the field. */ }
       { draft === null && mode === 'translate' && (
         <Pane>
           <h4>{ tc('ai_assist.source') }</h4>
 
-          <div dangerouslySetInnerHTML={ { __html: text ?? '' } } />
+          <div dangerouslySetInnerHTML={ { __html: sanitizeHtml(text) } } />
         </Pane>
       ) }
 
@@ -159,13 +170,13 @@ const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClo
           <Pane>
             <h4>{ tc('ai_assist.source') }</h4>
 
-            <div dangerouslySetInnerHTML={ { __html: text ?? '' } } />
+            <div dangerouslySetInnerHTML={ { __html: sanitizeHtml(text) } } />
           </Pane>
 
           <Pane>
             <h4>{ tc('ai_assist.draft') }</h4>
 
-            <div dangerouslySetInnerHTML={ { __html: draft } } />
+            <div dangerouslySetInnerHTML={ { __html: sanitizeHtml(draft) } } />
           </Pane>
         </Compare>
       ) }

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.33.7
+
+### Changed
+
+- **`Required` renders a real `<label>`, and takes an optional `htmlFor`.** It was a `styled.span` sitting beside the field it named, which is a label to a sighted reader and nothing at all to a screen reader - every field it introduced announced as a bare "edit text". Nothing in the stylesheets selects `label` and a flex item computes identically either way, so this is semantics only.
+- **`Password` and `Calendar` take an optional `id`.** A caller cannot associate a visible label with a field it has no way to name, so the shared inputs had to be able to accept one before the forms using them could be fixed.
+- `AiAssist/AiReviewModal` runs its three HTML panes through `sanitizeHtml`. Everything the model returns is HTML rendered into an admin's browser, and every other sink in the codebase sanitises; this one did not.
+
+## 1.33.6
+
+### Added
+
+- **New `Map/Tiles` component - the one place the basemap comes from.** The same `TileLayer` line was copy-pasted into `Drive.tsx`, `@autobusal/map`'s `Display.tsx` and magus's own `RouteMap.tsx`, with a fourth copy in the mobile app, all hardcoding `tile.openstreetmap.org`. OSM's Tile Usage Policy does not cover commercial or heavy application use, and those servers throttle or block by referer and volume without notice - so the exposure was never the bill, it was that reacting to a block meant editing three repos, publishing to npm, redeploying both frontends and shipping a mobile store release.
+
+  The URL now comes from `/settings/get` (`map.tile_url`) rather than the build, so all four clients switch from one server env var. `null` - the state until a provider is chosen - means the built-in OpenStreetMap default, so this changes nothing for anyone on upgrade. Attribution is rendered by the component rather than travelling with the URL, since ODbL requires it whoever serves the tiles.
+
+### Changed
+
+- `Drive.tsx` renders `<Tiles />` instead of its own `TileLayer`.
+
 ## 1.33.4
 
 ### Added

package/Calendar/Calendar.tsx

@@ -15,6 +15,12 @@ interface Props {
      on the search form, which is the site's primary conversion path.
      Optional, so existing callers are unaffected. */
   label?: string
+  /* Edited: Claude - Date: 2026-08-19: id for the visible input, so a
+     caller that HAS a visible label can associate it properly instead of
+     duplicating the text into aria-label. Preferred over `label` where
+     both are possible - the association also makes the label a click
+     target, which opens the picker. */
+  id?: string
   defaultValue?: string
   t: TFunction<'general'>
   validation?: string
@@ -36,7 +42,7 @@ interface Props {
   onChange?: (value: string) => void
 }
 
-const Calendar = ({ type, name, label, defaultValue, t, validation, minDate, refs, onUpdate, onChange }: Props): JSX.Element => {
+const Calendar = ({ type, name, label, id, defaultValue, t, validation, minDate, refs, onUpdate, onChange }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
 
   /**
@@ -75,7 +81,7 @@ const Calendar = ({ type, name, label, defaultValue, t, validation, minDate, ref
 
   return (
     <Container ref={ ref }>
-      <input type="text" aria-label={ label } autoComplete="off" readOnly={ true } value={ prepared } onClick={ () => setShow(true) } />
+      <input type="text" id={ id } aria-label={ label } autoComplete="off" readOnly={ true } value={ prepared } onClick={ () => setShow(true) } />
 
       { show && (
         <Picker

package/Drive/Drive.tsx

@@ -1,7 +1,8 @@
 import { TFunction } from 'i18next';
-import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet';
+import { MapContainer, Marker, Popup, Polyline } from 'react-leaflet';
 import { latLngBounds } from 'leaflet';
 import { getCoordinates, getPosition, hasPosition, autobusMarker } from './utilities';
+import Tiles from '../Map/Tiles';
 import { Container, Loading, Disclaimer } from './styles';
 import { LocationData } from '@autobusal/providers/types/locations';
 import { useGetDriveData } from './services';
@@ -79,7 +80,7 @@ const Drive = ({ locations, t }: Props): JSX.Element => {
         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" />
+        <Tiles />
 
         { markers }
 

package/Map/Tiles.tsx

@@ -0,0 +1,56 @@
+import { TileLayer } from 'react-leaflet';
+import { useGetSettings } from '@autobusal/providers/services';
+
+/**
+ * The one place the basemap comes from.
+ *
+ * Added: Claude (audit) - Date: 2026-08-17
+ *
+ * The same TileLayer line was copy-pasted into common's Drive.tsx and map's
+ * Display.tsx, with a third copy in the mobile app's Leaflet HTML. All three
+ * hardcoded `tile.openstreetmap.org`, whose Tile Usage Policy does not cover
+ * commercial or heavy application use - those servers are donation funded for
+ * OSM's own purposes and they throttle or block by referer and volume, without
+ * notice.
+ *
+ * The exposure was never the bill, it was how long a switch would take. With
+ * the URL inlined in a published package, reacting to a block meant editing
+ * three repos, publishing to npm, redeploying both frontends AND shipping a
+ * mobile store release - days of broken maps, the last stretch of it waiting
+ * on app review.
+ *
+ * SO THE URL COMES FROM /settings/get, NOT FROM THE BUILD. That is the mobile
+ * app's constraint (a compiled-in URL there needs a store release to change),
+ * and following it here means all three clients switch from ONE place - a
+ * server env var and a cache flush - rather than each on its own release
+ * cadence. `useGetSettings` is already resolved at bootstrap with
+ * `staleTime: Infinity`, so this reads the warm cache and costs no request.
+ *
+ * `tile_url` is null until a provider is actually chosen, which means the
+ * OpenStreetMap default below - so this lands with nothing changing anywhere
+ * and waits on no decision.
+ *
+ * ATTRIBUTION IS NOT PART OF THE SWITCH. ODbL requires crediting OpenStreetMap
+ * for the underlying data whoever serves the tiles, so it is rendered here
+ * rather than travelling with the URL - a provider swap must not be able to
+ * drop it. A provider needing its own credit too should have it appended, not
+ * substituted.
+ */
+const OPENSTREETMAP = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+
+const ATTRIBUTION = "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors";
+
+interface Props {
+  /** Overrides the configured basemap. Rarely needed - prefer the server setting. */
+  url?: string
+}
+
+const Tiles = ({ url }: Props): JSX.Element => {
+  const { data: settings } = useGetSettings();
+
+  return (
+    <TileLayer attribution={ ATTRIBUTION } url={ url ?? settings.map?.tile_url ?? OPENSTREETMAP } />
+  );
+};
+
+export default Tiles;

package/Password/Password.tsx

@@ -7,6 +7,15 @@ import { Container } from './styles';
 
 interface Props {
   name: string
+  /**
+   * Edited: Claude - Date: 2026-08-19
+   * The id to put on the inner input, so a caller's <label htmlFor> can
+   * reach it. Optional, because the field's own `name` is what the form
+   * payload uses and every existing caller relies on that unchanged - but
+   * without an id there is no way to attach a label from outside, and this
+   * component owns the only input on the login and reset forms.
+   */
+  id?: string
   tabIndex?: number
   validation?: string
   // Pre-fill value (masked). Lets an admin form show a saved secret as dots
@@ -19,7 +28,7 @@ interface Props {
   getValues?: UseFormGetValues<any>
 }
 
-const Password = ({ name, tabIndex, validation, defaultValue, t, refs, getValues }: Props): JSX.Element => {
+const Password = ({ name, id, tabIndex, validation, defaultValue, t, refs, getValues }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
 
   const toggle = (): void => {
@@ -28,7 +37,7 @@ const Password = ({ name, tabIndex, validation, defaultValue, t, refs, getValues
 
   return (
     <Container>
-      <input type={ show ? 'text' : 'password' } tabIndex={ tabIndex } defaultValue={ defaultValue } { ...refs(name, Validate(validation ?? '', t, getValues)) } />
+      <input type={ show ? 'text' : 'password' } id={ id } tabIndex={ tabIndex } defaultValue={ defaultValue } { ...refs(name, Validate(validation ?? '', t, getValues)) } />
 
       { show
         ? <AiFillEye onClick={ toggle } />

package/Required/Required.tsx

@@ -1,6 +1,14 @@
 import { Label, Marker } from './styles';
 
 interface Props {
+  /**
+   * Edited: Claude - Date: 2026-08-19
+   * The id of the field this labels. Optional so existing callers keep
+   * working, but pass it wherever there is a field to point at: without it
+   * the visible text is only visually a label, and the input announces as
+   * a bare "edit text".
+   */
+  htmlFor?: string
   children: React.ReactNode
 }
 
@@ -25,8 +33,8 @@ interface Props {
  * asterisk two separate flex items - and the marker dropped onto its own
  * line under the label.
  */
-const Required = ({ children }: Props): JSX.Element => (
-  <Label>
+const Required = ({ htmlFor, children }: Props): JSX.Element => (
+  <Label htmlFor={ htmlFor }>
     { children }
     <Marker aria-hidden="true">*</Marker>
   </Label>

package/Required/styles.ts

@@ -2,7 +2,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`
+//
+// Edited: Claude - Date: 2026-08-19
+// A real <label>, not a <span>. It was already named Label and already
+// sitting next to the field it names, but a span cannot be associated with
+// an input - so the field reached a screen reader unnamed. Nothing in the
+// stylesheets selects `label`, and a flex item computes the same either
+// way, so this changes semantics only.
+export const Label = styled.label`
   display: inline-flex;
   align-items: baseline;
 `;

package/package.json

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