@autobusal/common 1.16.0 → 1.18.0

package/CHANGELOG.md

@@ -6,6 +6,48 @@ 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.18.0] - 2026-08-02
+
+### Added
+
+- **`SeoOverride`** - a per-language editor for the SEO title/description
+  overrides, shared by the label, country and city forms. One language is
+  shown at a time (a brand writes copy for one or two, and thirteen sets of
+  empty inputs invite nobody to fill any of them in) and the languages that
+  already have copy are marked, so it is obvious which are done. Controlled
+  and deliberately form-less: those pages submit every field in one request,
+  so an editor with its own save would either post a partial update or leave
+  two save buttons meaning different things on one screen.
+
+## [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

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

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { ContainerLocales, LocaleButton, Notice, Field, Label, Input, Textarea } from './styles';
+import { useGetSettings } from '@autobusal/providers/services';
+
+export interface SeoEntry {
+  title?: string
+  description?: string
+}
+
+export type SeoOverrides = Record<string, SeoEntry>;
+
+interface Props {
+  /**
+   * The stored map, keyed by locale. A language with no entry has no
+   * override, which is what returns that language's page to its own
+   * translated template.
+   */
+  value?: SeoOverrides
+  t: TFunction<'common'>
+  onChange: (next: SeoOverrides) => void
+}
+
+/**
+ * Per-language SEO override editor.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-02
+ *
+ * These overrides used to be one title and one description served to every
+ * language. That was merely a limitation while the whole site lived at one
+ * URL per page; once /{locale}/city/tirana existed and was announced to
+ * search engines as a distinct language version it became a contradiction -
+ * and because an override REPLACES the localised template the public pages
+ * build from live route and price data, filling one in actively made
+ * multilingual SEO worse than leaving it blank.
+ *
+ * CONTROLLED, and deliberately not a form of its own. The country and city
+ * pages submit every field in one request, so an editor with its own save
+ * button would either post a partial update and wipe the rest of the record,
+ * or leave two save buttons on one screen with different meanings. The
+ * parent owns the state and the submit; this owns the editing.
+ *
+ * One language is shown at a time rather than thirteen sets of fields down
+ * the page: a brand writes copy for one or two, and a wall of empty inputs
+ * invites nobody to fill in any of them. Languages that already have copy
+ * are marked, so it is obvious which ones are done without clicking through
+ * all of them.
+ */
+const SeoOverride = ({ value, t, onChange }: Props): JSX.Element => {
+  const { data } = useGetSettings();
+
+  const available = data.preferences.languages.available;
+
+  const [ locale, setLocale ] = useState<string>(data.preferences.languages.default);
+
+  const overrides = value ?? {};
+
+  const current = overrides[locale] ?? {};
+
+  const update = (field: keyof SeoEntry, next: string): void => {
+    onChange({
+      ...overrides,
+      [locale]: { ...current, [field]: next }
+    });
+  };
+
+  const written = (language: string): boolean => {
+    const entry = overrides[language];
+
+    return !!(entry?.title?.trim() || entry?.description?.trim());
+  };
+
+  return (
+    <>
+      <ContainerLocales>
+        { available.map(language => (
+          <LocaleButton
+            key={ language }
+            type="button"
+            $selected={ language === locale }
+            $written={ written(language) }
+            onClick={ () => setLocale(language) }
+          >
+            { t(`languages.${ language }`, { ns: 'common' }) }
+          </LocaleButton>
+        )) }
+      </ContainerLocales>
+
+      <Notice>{ t('seo_override.notice', { ns: 'common' }) }</Notice>
+
+      <Field>
+        <Label>{ t('seo_override.title', { ns: 'common' }) }</Label>
+
+        <Input
+          type="text"
+          maxLength={ 250 }
+          value={ current.title ?? '' }
+          onChange={ (event) => update('title', event.target.value) }
+        />
+      </Field>
+
+      <Field>
+        <Label>{ t('seo_override.description', { ns: 'common' }) }</Label>
+
+        <Textarea
+          maxLength={ 500 }
+          value={ current.description ?? '' }
+          onChange={ (event) => update('description', event.target.value) }
+        />
+      </Field>
+    </>
+  );
+};
+
+export default SeoOverride;

package/SeoOverride/styles.ts

@@ -0,0 +1,88 @@
+import styled, { css } from 'styled-components';
+
+export const ContainerLocales = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+`;
+
+/**
+ * One button per language.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-02
+ * `$written` marks the languages that actually have copy, so it is obvious
+ * at a glance which ones are done - without it, thirteen identical buttons
+ * say nothing about where the work stands, and the only way to find out is
+ * to click every one of them.
+ */
+export const LocaleButton = styled.button<{ $selected: boolean, $written: boolean }>`
+  padding: 4px 12px;
+  border: none;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => (props.$selected ? props.theme.background.neutral : 'transparent') };
+  color: ${ props => (props.$written ? props.theme.font.normal : props.theme.font.faded) };
+  font-size: ${ props => props.theme.size.s };
+  font-weight: ${ props => (props.$selected ? 700 : 400) };
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    background: ${ props => props.theme.background.neutral };
+  }
+
+  ${ props => props.$written && css`
+    &::after {
+      content: '•';
+      margin-left: 6px;
+      color: ${ props => props.theme.primary.normal };
+    }
+  ` }
+`;
+
+export const Notice = styled.p`
+  margin-bottom: 15px;
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.s };
+`;
+
+/**
+ * The editor's own fields, rather than Viewer rows.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-02
+ * Viewer's inputs are uncontrolled (defaultValue + a react-hook-form ref),
+ * which cannot hold thirteen languages' worth of state while showing one -
+ * switching language would discard whatever had just been typed. These are
+ * controlled, and styled to match the rows they sit among.
+ */
+export const Field = styled.div`
+  margin-bottom: 15px;
+`;
+
+export const Label = styled.label`
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 600;
+  font-size: ${ props => props.theme.size.m };
+`;
+
+const field = css`
+  width: 100%;
+  padding: 10px;
+  border: 1px solid ${ props => props.theme.primary.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+  background: transparent;
+  color: ${ props => props.theme.font.normal };
+  font-family: inherit;
+  font-size: ${ props => props.theme.size.m };
+`;
+
+export const Input = styled.input`
+  ${ field }
+`;
+
+export const Textarea = styled.textarea`
+  ${ field }
+  min-height: 90px;
+  resize: vertical;
+`;

package/index.ts

@@ -30,6 +30,10 @@ 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 SeoOverride from './SeoOverride/SeoOverride';
+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';
@@ -74,6 +78,12 @@ export {
   RouteFeature,
   Required,
   Road,
+  LocaleGate,
+  SeoOverride,
+  localiseRoutes,
+  splitLocale,
+  withLocale,
+  localeFromPath,
   RouteItem,
   Row,
   Table,

package/package.json

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