@africanies/angular-web-sdk 0.1.3 → 0.1.4

package/dist/libs/africanies-ui/types/africanies-africanies-ui.d.ts

@@ -84,7 +84,7 @@ declare class ButtonComponent {
      */
     readonly loading: _angular_core.InputSignal<boolean>;
     protected readonly inactive: _angular_core.Signal<boolean>;
-    protected readonly spinnerSize: _angular_core.Signal<14 | 16 | 18>;
+    protected readonly spinnerSize: _angular_core.Signal<14 | 18 | 16>;
     /**
      * Composed Tailwind classes from theme tokens — kept as string literals so
      * the scanner retains utilities in the published UI bundle.
@@ -4853,9 +4853,11 @@ interface TableSortChange {
  * **Sticky columns:** a column with `key: 'actions'` stays pinned to the
  * right while the grid scrolls horizontally. The expand trigger column pins
  * to the left when rows are expandable. Override with
- * {@link TableColumn.sticky}.
+ * {@link TableColumn.sticky}. Sticky columns use a slightly thicker bottom
+ * border (and opaque fill) so dividers stay visible while scrolling.
  */
 declare class TableComponent<T = unknown> {
+    protected readonly modeColor: ModeColorService;
     /**
      * When false, hides row expansion even if {@link RowDetailDefDirective}
      * templates are projected. Defaults to true.
@@ -5005,6 +5007,17 @@ declare class TableComponent<T = unknown> {
     protected cellContext(row: T): {
         $implicit: T;
     };
+    /**
+     * Header row chrome. Soft fill lives on each `th` ({@link headerSoftClass})
+     * so sticky columns do not double-tint and paint over neighbor labels.
+     * @returns Header row class list.
+     */
+    protected headerRowClass(): string;
+    /**
+     * Opaque mode soft fill for header cells (sticky-safe in dark mode).
+     * @returns Soft solid background utilities.
+     */
+    protected headerSoftClass(): string;
     /**
      * Body row classes — row marker for hover styles, plus hide cell borders on
      * the last / expanded row.
@@ -5028,8 +5041,8 @@ declare class TableComponent<T = unknown> {
     protected expandHeaderClass(): string;
     /**
      * Body classes for the expand/collapse trigger column (pinned left).
-     * Omits `border-b` like other sticky cells so the opaque fill does not
-     * double-paint the row divider.
+     * Uses a slightly thicker bottom border than scrolling cells so the
+     * sticky fill still reads a clear divider (no top-shadow fallback).
      * @param index - Index within {@link rows}.
      * @returns Body cell class list.
      */
@@ -5042,9 +5055,8 @@ declare class TableComponent<T = unknown> {
     protected headerCellClass(col: TableColumn<T>): string;
     /**
      * Body cell classes, including sticky pin when set.
-     * Sticky cells omit `border-b`: their opaque fill sits in a higher stacking
-     * context, so a bottom border plus the next row's top shadow paint on the
-     * same pixel and read brighter (especially in dark mode).
+     * Sticky expand/actions columns use a 1.5px bottom border; scrolling cells
+     * stay at 1px. Expanded rows drop the bottom border (see {@link bodyRowClass}).
      * @param col - Column definition.
      * @param index - Index within {@link rows}.
      * @returns Body cell class list.
@@ -5054,22 +5066,17 @@ declare class TableComponent<T = unknown> {
      * Sticky pin utilities for a known edge (expand column or data column).
      * @param edge - Left or right pin.
      * @param surface - Header vs body fill tokens.
-     * @param index - Body row index; unused for the header.
-     * @param afterExpanded - Previous row is expanded — skip the top shadow
-     *   divider so the sticky column stays flush under the detail panel.
      * @returns Sticky utilities.
      */
-    protected stickyPinClass(edge: 'left' | 'right', surface: 'head' | 'body', index?: number, afterExpanded?: boolean): string;
+    protected stickyPinClass(edge: 'left' | 'right', surface: 'head' | 'body'): string;
     /**
      * Sticky pin plus an opaque fill matching the table surface, so scrolled
      * cells do not show through.
      * @param col - Column definition.
      * @param surface - Header vs body fill tokens.
-     * @param index - Body row index; unused for the header.
-     * @param afterExpanded - Previous row is expanded — skip the top shadow.
      * @returns Sticky utilities, or empty when the column scrolls.
      */
-    protected stickySurfaceClass(col: TableColumn<T>, surface: 'head' | 'body', index?: number, afterExpanded?: boolean): string;
+    protected stickySurfaceClass(col: TableColumn<T>, surface: 'head' | 'body'): string;
     /**
      * Stable id for a row — used for expand/collapse state.
      *

package/libs/africanies-theme/src/lib/mode-color.safelist.ts

@@ -11,10 +11,12 @@
  * SFN (export / green):
  * text-export bg-export bg-export-subtle bg-export-light border-export
  * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15
+ * dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]
  *
  * STN (import / orange):
  * text-import bg-import bg-import-subtle bg-import-light border-import
  * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15
+ * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]
  */
 export const MODE_COLOR_SAFELIST = [
   'text-export',
@@ -26,6 +28,7 @@ export const MODE_COLOR_SAFELIST = [
   'hover:bg-export-subtle',
   'dark:bg-export/15',
   'dark:hover:bg-export/15',
+  'dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
   'text-import',
   'bg-import',
   'bg-import-subtle',
@@ -35,4 +38,5 @@ export const MODE_COLOR_SAFELIST = [
   'hover:bg-import-subtle',
   'dark:bg-import/15',
   'dark:hover:bg-import/15',
+  'dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
 ] as const;

package/libs/africanies-theme/src/lib/mode-color.service.ts

@@ -29,8 +29,15 @@ export interface ModeColorClasses {
   ghostPrimary: string;
   /**
    * Soft highlight for selected / active rows (works in dark mode).
+   * Dark uses a translucent tint — fine over solid surfaces, not for
+   * sticky overlays (see {@link softSolid}).
    */
   soft: string;
+  /**
+   * Opaque soft fill — same tint as {@link soft}, but dark mode mixes into
+   * ink so scrolled content cannot show through (sticky table headers/cells).
+   */
+  softSolid: string;
   /**
    * Soft hover highlight for menus and lists.
    */
@@ -74,6 +81,8 @@ export class ModeColorService {
         ghostPrimary:
           'bg-transparent text-export border-transparent hover:bg-export-subtle dark:hover:bg-export/15',
         soft: 'bg-export-subtle dark:bg-export/15',
+        softSolid:
+          'bg-export-subtle dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
         softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',
       };
     }
@@ -87,6 +96,8 @@ export class ModeColorService {
       ghostPrimary:
         'bg-transparent text-import border-transparent hover:bg-import-subtle dark:hover:bg-import/15',
       soft: 'bg-import-subtle dark:bg-import/15',
+      softSolid:
+        'bg-import-subtle dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
       softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',
     };
   });

package/libs/africanies-theme/tailwind-preset.cjs

@@ -69,6 +69,11 @@ function africaniesInteractiveCursorPlugin({ addBase }) {
  * (`white` / `ink-950`) and `-webkit-text-fill-color` keeps body text on
  * `ink` / white. `.dark` matches `ThemeService` (`class` on `<html>`).
  *
+ * WHY one selector per `addBase` key: joining autofill selectors with commas
+ * under a single `.dark ${list}` key only scopes the first selector — the rest
+ * leak into light mode. WHY no `color` in the long transition: delaying color
+ * freezes text when the user toggles light/dark.
+ *
  * @param {import('tailwindcss/types/config').PluginAPI} api
  */
 function africaniesAutofillPlugin({ addBase }) {
@@ -81,21 +86,24 @@ function africaniesAutofillPlugin({ addBase }) {
     'textarea:-webkit-autofill:hover',
     'textarea:-webkit-autofill:focus',
     'textarea:-webkit-autofill:active',
-  ].join(', ');
+  ];
 
-  addBase({
-    [autofillSelectors]: {
+  /** @type {Record<string, Record<string, string>>} */
+  const rules = {};
+  for (const selector of autofillSelectors) {
+    rules[selector] = {
       WebkitTextFillColor: '#212529',
       caretColor: '#212529',
       boxShadow: '0 0 0 1000px #ffffff inset',
       transition: 'background-color 99999s ease-in-out 0s',
-    },
-    [`.dark ${autofillSelectors}`]: {
+    };
+    rules[`.dark ${selector}`] = {
       WebkitTextFillColor: '#ffffff',
       caretColor: '#ffffff',
       boxShadow: '0 0 0 1000px #272729 inset',
-    },
-  });
+    };
+  }
+  addBase(rules);
 }
 
 /**

package/libs/africanies-ui/src/lib/layout/header-weather.spec.ts

@@ -24,9 +24,34 @@ describe('mapWmoWeatherCode', () => {
 
 describe('loadHeaderWeather', () => {
   const originalFetch = globalThis.fetch;
+  const originalGeolocation = navigator.geolocation;
+
+  beforeEach(() => {
+    Object.defineProperty(navigator, 'geolocation', {
+      configurable: true,
+      value: {
+        getCurrentPosition: (
+          _success: PositionCallback,
+          error?: PositionErrorCallback,
+        ) => {
+          error?.({
+            code: 1,
+            message: 'denied',
+            PERMISSION_DENIED: 1,
+            POSITION_UNAVAILABLE: 2,
+            TIMEOUT: 3,
+          } as GeolocationPositionError);
+        },
+      },
+    });
+  });
 
   afterEach(() => {
     globalThis.fetch = originalFetch;
+    Object.defineProperty(navigator, 'geolocation', {
+      configurable: true,
+      value: originalGeolocation,
+    });
     sessionStorage.clear();
   });
 
@@ -41,22 +66,51 @@ describe('loadHeaderWeather', () => {
     ).resolves.toBeNull();
   });
 
-  it('reads Open-Meteo after IP geolocation', async () => {
+  it('reads Open-Meteo after IP geolocation and reverse-geocodes the city', async () => {
     const fetchFn = jest.fn(async (url: string) => {
       if (String(url).includes('geojs')) {
-        return jsonResponse({ latitude: '6.45', longitude: '3.39', city: 'Lagos' });
+        return jsonResponse({
+          latitude: '9.0765',
+          longitude: '7.3986',
+          city: 'Lagos',
+        });
+      }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Abuja', locality: 'Abuja' });
       }
       return jsonResponse({
         current: { weather_code: 61, temperature_2m: 27.4 },
       });
     });
 
-    await expect(loadHeaderWeather(fetchFn as unknown as typeof fetch)).resolves.toEqual({
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
       kind: 'rain',
       temperatureC: 27.4,
+      city: 'Abuja',
+    });
+    expect(fetchFn).toHaveBeenCalledTimes(3);
+  });
+
+  it('falls back to the IP city when reverse geocode is empty', async () => {
+    const fetchFn = jest.fn(async (url: string) => {
+      if (String(url).includes('geojs')) {
+        return jsonResponse({ latitude: 1, longitude: 2, city: 'Lagos' });
+      }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({});
+      }
+      return jsonResponse({ current: { weather_code: 0, temperature_2m: 30 } });
+    });
+
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
+      kind: 'clear',
+      temperatureC: 30,
       city: 'Lagos',
     });
-    expect(fetchFn).toHaveBeenCalledTimes(2);
   });
 
   it('reuses the same-hour session cache', async () => {
@@ -64,6 +118,9 @@ describe('loadHeaderWeather', () => {
       if (String(url).includes('geojs')) {
         return jsonResponse({ latitude: 1, longitude: 2 });
       }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Accra' });
+      }
       return jsonResponse({ current: { weather_code: 0, temperature_2m: 30 } });
     });
 
@@ -71,7 +128,7 @@ describe('loadHeaderWeather', () => {
     const second = await loadHeaderWeather(fetchFn as unknown as typeof fetch);
 
     expect(first).toEqual(second);
-    expect(fetchFn).toHaveBeenCalledTimes(2);
+    expect(fetchFn).toHaveBeenCalledTimes(3);
   });
 
   it('fetches again when the cached hour no longer matches', async () => {
@@ -79,6 +136,9 @@ describe('loadHeaderWeather', () => {
       if (String(url).includes('geojs')) {
         return jsonResponse({ latitude: 1, longitude: 2, city: 'Lagos' });
       }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Lagos' });
+      }
       return jsonResponse({ current: { weather_code: 0, temperature_2m: 30.2 } });
     });
 
@@ -94,7 +154,52 @@ describe('loadHeaderWeather', () => {
     sessionStorage.setItem(cacheKey!, JSON.stringify(stored));
 
     await loadHeaderWeather(fetchFn as unknown as typeof fetch);
-    expect(fetchFn).toHaveBeenCalledTimes(4);
+    expect(fetchFn).toHaveBeenCalledTimes(6);
+  });
+
+  it('uses browser coordinates when geolocation succeeds', async () => {
+    Object.defineProperty(navigator, 'geolocation', {
+      configurable: true,
+      value: {
+        getCurrentPosition: (success: PositionCallback) => {
+          success({
+            coords: {
+              latitude: 9.0765,
+              longitude: 7.3986,
+              accuracy: 10,
+              altitude: null,
+              altitudeAccuracy: null,
+              heading: null,
+              speed: null,
+              toJSON: () => ({}),
+            },
+            timestamp: Date.now(),
+            toJSON: () => ({}),
+          } as GeolocationPosition);
+        },
+      },
+    });
+
+    const fetchFn = jest.fn(async (url: string) => {
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Abuja' });
+      }
+      if (String(url).includes('geojs')) {
+        throw new Error('should not call IP geo');
+      }
+      return jsonResponse({ current: { weather_code: 0, temperature_2m: 31 } });
+    });
+
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
+      kind: 'clear',
+      temperatureC: 31,
+      city: 'Abuja',
+    });
+    expect(
+      fetchFn.mock.calls.some((call) => String(call[0]).includes('geojs')),
+    ).toBe(false);
   });
 });
 

package/libs/africanies-ui/src/lib/layout/header-weather.ts

@@ -2,9 +2,15 @@ import type { IconName } from '@africanies/africanies-icons';
 
 import type { HeaderWeather, HeaderWeatherKind } from './header-greeting.util';
 
-const CACHE_KEY = 'africanies-header-weather-v3';
+/** Bump when cache shape or city resolution strategy changes. */
+const CACHE_KEY = 'africanies-header-weather-v4';
 const FETCH_MS = 4_000;
+const BROWSER_GEO_MS = 3_500;
+/** IP fallback — city string is often wrong (e.g. NG IPs labelled Lagos). */
 const GEO_URL = 'https://get.geojs.io/v1/ip/geo.json';
+/** Client reverse-geocode so the label matches the forecast coordinates. */
+const REVERSE_GEO_URL =
+  'https://api.bigdatacloud.net/data/reverse-geocode-client';
 
 const WEATHER_LABELS: Record<HeaderWeatherKind, string> = {
   clear: 'Clear',
@@ -29,6 +35,12 @@ interface GeoJsPayload {
   longitude?: string | number;
 }
 
+interface ReverseGeoPayload {
+  city?: string;
+  locality?: string;
+  principalSubdivision?: string;
+}
+
 interface OpenMeteoPayload {
   current?: {
     weather_code?: number;
@@ -36,6 +48,11 @@ interface OpenMeteoPayload {
   };
 }
 
+interface Coordinates {
+  latitude: number;
+  longitude: number;
+}
+
 /**
  * Map Open-Meteo / WMO weather codes to a greeting flavor.
  *
@@ -95,7 +112,12 @@ export function headerWeatherIcon(kind: HeaderWeatherKind, hour: number): IconNa
 }
 
 /**
- * City-level forecast via IP geolocation + Open-Meteo (no API key).
+ * City-level forecast via browser / IP geolocation + Open-Meteo (no API key).
+ *
+ * Coordinates prefer the browser Geolocation API (accurate for travellers;
+ * may prompt once). Otherwise IP geo is used. The city label is reverse-
+ * geocoded from those coordinates — IP `city` strings are often wrong for
+ * Nigeria (many networks resolve as Lagos).
  *
  * Fails closed: missing browser APIs, timeouts, and HTTP errors all return
  * `null` so the greeting can stay time-of-day only. Cached per local hour
@@ -119,16 +141,14 @@ export async function loadHeaderWeather(
   }
 
   try {
-    const geo = (await fetchJson(run, GEO_URL)) as GeoJsPayload | null;
-    const latitude = asNumber(geo?.latitude);
-    const longitude = asNumber(geo?.longitude);
-    if (latitude === null || longitude === null) {
+    const coords = await resolveCoordinates(run);
+    if (!coords) {
       return null;
     }
 
     const forecastUrl =
       `https://api.open-meteo.com/v1/forecast` +
-      `?latitude=${latitude}&longitude=${longitude}` +
+      `?latitude=${coords.latitude}&longitude=${coords.longitude}` +
       `&current=weather_code,temperature_2m`;
     const forecast = (await fetchJson(run, forecastUrl)) as OpenMeteoPayload | null;
     const code = asNumber(forecast?.current?.weather_code);
@@ -142,7 +162,9 @@ export async function loadHeaderWeather(
     }
 
     const temperatureC = asNumber(forecast?.current?.temperature_2m) ?? undefined;
-    const city = asCity(geo?.city);
+    const city =
+      (await reverseGeocodeCity(run, coords.latitude, coords.longitude)) ??
+      coords.fallbackCity;
     const weather: HeaderWeather = { kind, temperatureC, city };
     writeCache({ hour, kind, temperatureC, city });
     return weather;
@@ -187,6 +209,80 @@ function writeCache(value: CachedWeather): void {
   }
 }
 
+/**
+ * Prefer device coordinates when available (may prompt once); otherwise fall
+ * back to IP geo. IP city labels for Nigeria are often wrong — reverse
+ * geocoding from these coordinates still depends on accurate lat/lon.
+ */
+async function resolveCoordinates(
+  fetchFn: typeof fetch,
+): Promise<(Coordinates & { fallbackCity?: string }) | null> {
+  const browser = await tryBrowserGeolocation();
+  if (browser) {
+    return browser;
+  }
+
+  const geo = (await fetchJson(fetchFn, GEO_URL)) as GeoJsPayload | null;
+  const latitude = asNumber(geo?.latitude);
+  const longitude = asNumber(geo?.longitude);
+  if (latitude === null || longitude === null) {
+    return null;
+  }
+  return {
+    latitude,
+    longitude,
+    fallbackCity: asCity(geo?.city),
+  };
+}
+
+async function tryBrowserGeolocation(): Promise<Coordinates | null> {
+  if (
+    typeof navigator === 'undefined' ||
+    typeof navigator.geolocation?.getCurrentPosition !== 'function'
+  ) {
+    return null;
+  }
+
+  return await new Promise((resolve) => {
+    const timer = setTimeout(() => resolve(null), BROWSER_GEO_MS);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        clearTimeout(timer);
+        resolve({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        });
+      },
+      () => {
+        clearTimeout(timer);
+        resolve(null);
+      },
+      {
+        enableHighAccuracy: false,
+        maximumAge: 600_000,
+        timeout: BROWSER_GEO_MS,
+      },
+    );
+  });
+}
+
+async function reverseGeocodeCity(
+  fetchFn: typeof fetch,
+  latitude: number,
+  longitude: number,
+): Promise<string | undefined> {
+  const url =
+    `${REVERSE_GEO_URL}?latitude=${encodeURIComponent(String(latitude))}` +
+    `&longitude=${encodeURIComponent(String(longitude))}` +
+    `&localityLanguage=en`;
+  const payload = (await fetchJson(fetchFn, url)) as ReverseGeoPayload | null;
+  return (
+    asCity(payload?.city) ??
+    asCity(payload?.locality) ??
+    asCity(payload?.principalSubdivision)
+  );
+}
+
 function asNumber(value: unknown): number | null {
   if (typeof value === 'number' && Number.isFinite(value)) {
     return value;