feat: typed i18n token contract for data-source providers

.github/workflows/pr-title.yml

@@ -5,10 +5,14 @@ on:
     types: [opened, edited, synchronize, reopened]
 
 permissions:
-  # `pull-requests: write` is needed because `wip: true` makes the action
-  # set the PR check to "pending" while the title contains [WIP].
-  # See: https://github.com/amannn/action-semantic-pull-request#wip
+  # `statuses: write` is required because action-semantic-pull-request@v6
+  # reports its result via the commit-statuses API (also used by `wip: true`
+  # to flag [WIP] titles). Without it the action fails with
+  # "Resource not accessible by integration". `pull-requests: write` lets it
+  # read the PR title under `pull_request_target`.
+  # See: https://github.com/amannn/action-semantic-pull-request#permissions
   pull-requests: write
+  statuses: write
 
 jobs:
   validate:

apps/api/src/integration-host.ts

@@ -24,6 +24,7 @@ import {
   integrationBackendBundlePath,
   integrationFrontendBundlePath,
 } from "@openmapx/integration-framework/installer";
+import { sharedStrings } from "@openmapx/integration-framework/strings";
 import { registerPoiSources as registerPoiSourcesInStore } from "@openmapx/poi-source-registry";
 import { eq } from "drizzle-orm";
 import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
@@ -1059,12 +1060,15 @@ export async function initIntegrations(
 
   // Register the /api/integrations endpoint
   fastify.get("/api/integrations", async () => {
-    return Array.from(integrations.values())
-      .filter((i) => i.enabled)
-      .map((i) => ({
-        ...toIntegrationMeta(i),
-        isBuiltIn: i.isBuiltIn,
-      }));
+    return {
+      integrations: Array.from(integrations.values())
+        .filter((i) => i.enabled)
+        .map((i) => ({
+          ...toIntegrationMeta(i),
+          isBuiltIn: i.isBuiltIn,
+        })),
+      frameworkStrings: sharedStrings,
+    };
   });
 
   // Serve community integration frontend bundles

apps/web/package.json

@@ -65,11 +65,13 @@
     "@mapbox/maki": "^8.2.0",
     "@rapideditor/temaki": "^5.13.0",
     "@tailwindcss/postcss": "^4.2.4",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^25.6.0",
     "@types/qrcode": "^1.5.6",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "esbuild": "^0.28.0",
+    "jsdom": "^29.1.1",
     "tailwindcss": "^4.2.4",
     "typescript": "^5.9.3"
   }

apps/web/src/components/map/layers/DataSourceLayer.tsx

@@ -22,11 +22,13 @@ import {
 import type { DataSourceAttribution } from "@openmapx/integration-framework";
 import { dataSourceToAttribution } from "@openmapx/integration-framework";
 import { useIntegrationRegistry } from "@openmapx/integration-framework/react";
+import { isI18nToken, type Translatable } from "@openmapx/integration-framework/strings";
 import type { Attribution } from "@openmapx/mobility-core/attribution";
 import type maplibregl from "maplibre-gl";
 import type { GeoJSONSource, Map as MaplibreMap, MapMouseEvent } from "maplibre-gl";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useDataSourceI18nResolver } from "@/components/panels/place/useDataSourceI18nResolver";
 import { usePinMarker } from "@/hooks/usePinMarker";
 import { translateDataSourceSummary } from "@/lib/dataSourceSummaryI18n";
 import { INTERACTIVE_LAYER_IDS } from "@/lib/interactiveLayers";
@@ -63,7 +65,7 @@ function mapContextOutlineLayerId(dsId: string) {
 
 function buildGeoJson(
   results: DataSourceResult[],
-  translateSummary: (summary: string | undefined) => string | undefined,
+  translateSummary: (summary: Translatable | undefined) => string | undefined,
   imageId?: string,
 ) {
   return {
@@ -218,6 +220,7 @@ export function DataSourceLayer() {
   }, [activeSource, sourcesData]);
 
   const registry = useIntegrationRegistry();
+  const resolveToken = useDataSourceI18nResolver(activeSource ?? undefined);
 
   // Separate server-side filters (sent to the API) from client-side filters
   // (applied locally on the result set). Uses the `clientSide` flag from
@@ -419,7 +422,12 @@ export function DataSourceLayer() {
       const imageId = useIconMarkers ? `ds-marker-${activeSource}` : undefined;
       const geojson = buildGeoJson(
         filteredResults,
-        (summary) => translateDataSourceSummary(summary, t),
+        (summary) => {
+          if (summary === undefined) return undefined;
+          if (isI18nToken(summary)) return resolveToken(summary);
+          if (typeof summary === "number") return String(summary);
+          return translateDataSourceSummary(summary, t);
+        },
         imageId,
       );
 
@@ -645,6 +653,7 @@ export function DataSourceLayer() {
     mapRef,
     mapContext,
     t,
+    resolveToken,
   ]);
 
   const { setSelectedPlace } = usePlaceStore();

apps/web/src/components/panels/datasource/DataSourceFilterContent.tsx

@@ -41,8 +41,10 @@ import {
   usePlaceStore,
   useSidebarStore,
 } from "@openmapx/core";
+import { isI18nToken } from "@openmapx/integration-framework/strings";
 import { useTranslations } from "next-intl";
 import { useCallback, useMemo, useState } from "react";
+import { useDataSourceI18nResolver } from "@/components/panels/place/useDataSourceI18nResolver";
 import { translateDataSourceLabel, translateDataSourceSummary } from "@/lib/dataSourceSummaryI18n";
 import { TEAL } from "@/lib/theme";
 import { BrandMark } from "../shared/BrandMark";
@@ -199,6 +201,7 @@ export function DataSourceFilterContent() {
   const t = useTranslations("dataSources");
   const tc = useTranslations("common");
   const activeSource = useDataSourceStore((s) => s.activeSource);
+  const resolveToken = useDataSourceI18nResolver(activeSource ?? undefined);
   const filters = useDataSourceStore((s) => s.filters);
   const searchBbox = useDataSourceStore((s) => s.searchBbox);
   const viewportZoom = useDataSourceStore((s) => s.viewportZoom);
@@ -537,7 +540,12 @@ export function DataSourceFilterContent() {
                         {result.summary && (
                           <Typography variant="caption" color="text.secondary">
                             <FormattedSummary
-                              text={translateDataSourceSummary(result.summary, t) ?? result.summary}
+                              text={
+                                isI18nToken(result.summary)
+                                  ? resolveToken(result.summary)
+                                  : (translateDataSourceSummary(result.summary, t) ??
+                                    result.summary)
+                              }
                             />
                           </Typography>
                         )}