fimo-react-router 0.21.0-experimental.1

package/README.md

@@ -0,0 +1,19 @@
+# fimo-react-router
+
+The Fimo integration for React Router projects. Install it alongside `fimo` and
+`fimo-react` at the same version:
+
+```bash
+npm install fimo fimo-react fimo-react-router
+```
+
+| Entry point                | What it owns                                                                     |
+| -------------------------- | -------------------------------------------------------------------------------- |
+| `fimo-react-router`        | `FimoProviders`, `FimoScripts`, `FimoLink`, locale helpers, route `meta` helpers |
+| `fimo-react-router/routes` | `fimoRoutes()` — the path-prefix locale route expander                           |
+| `fimo-react-router/preset` | `fimoPreset()` — connects a client-rendered React Router build to Fimo hosting   |
+| `fimo-react-router/vite`   | `fimo()` — `fimo-vite`'s plugins plus React Router dependency pre-bundling       |
+
+Content clients, labels, and the editable primitives come from `fimo-react`; the
+framework-neutral Vite plugins come from `fimo-vite`. A React project that does
+not use React Router only needs those two.

package/dist/AppResetScrollOnNavigate.d.ts

@@ -0,0 +1,2 @@
+export declare function AppResetScrollOnNavigate(): null;
+//# sourceMappingURL=AppResetScrollOnNavigate.d.ts.map

package/dist/AppResetScrollOnNavigate.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router';
+export function AppResetScrollOnNavigate() {
+    const { pathname } = useLocation();
+    useEffect(() => {
+        try {
+            window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+        }
+        catch { }
+    }, [pathname]);
+    return null;
+}

package/dist/AppRoutesProvider.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { RouteObject } from 'react-router';
+export interface SlugInfo {
+    schema: string;
+    queryField: string;
+    displayField: string;
+}
+export interface AppRoute extends Omit<RouteObject, 'children' | 'element'> {
+    name?: string;
+    path?: string;
+    element: React.ReactNode;
+    index?: boolean;
+    slugs?: Record<string, SlugInfo>;
+    children?: AppRoute[];
+}
+export interface DisplayRoute extends Omit<AppRoute, 'element' | 'children' | 'handle'> {
+    name: string;
+    path: string;
+}
+export declare function getDisplayRoutes(routes: AppRoute[], basePath?: string): DisplayRoute[];
+export declare function AppRoutesProvider({ appRoutes, children }: {
+    appRoutes?: AppRoute[];
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppRoutesProvider.d.ts.map

package/dist/AppRoutesProvider.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppErrorBoundary, DataSourcesProvider, RefreshContentProvider, ScreenshotProvider, ViteLifecycles, } from 'fimo-react';
+import { onError } from 'fimo-react/internal';
+import { getPreviewLocationChange, getPreviewParentOrigin, getSafePreviewNavigationPath, getDocumentLocale, isPreviewRuntimeEnabled, } from 'fimo/preview';
+import { useCallback, useEffect, useMemo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useLocation, useNavigate, useRoutes } from 'react-router';
+import { AppResetScrollOnNavigate } from './AppResetScrollOnNavigate.js';
+import { OptionalTracking } from './OptionalTracking.js';
+const titleCase = (seg) => seg
+    .replace(/[_-]+/g, ' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join(' ');
+const generateRouteName = (path) => {
+    if (path === '/') {
+        return 'Home';
+    }
+    const firstSegment = path.replace(/^\//, '').split('/')[0];
+    return titleCase(firstSegment);
+};
+export function getDisplayRoutes(routes, basePath = '') {
+    const displayRoutes = [];
+    for (const route of routes) {
+        const { children, ...rest } = route;
+        let fullPath;
+        if (rest.path) {
+            fullPath = rest.path.startsWith('/') ? rest.path : `${basePath.replace(/\/$/, '')}/${rest.path}`;
+        }
+        else {
+            fullPath = basePath;
+        }
+        if (rest.path) {
+            displayRoutes.push({
+                path: fullPath,
+                index: rest.index,
+                slugs: rest.slugs,
+                name: rest.name || generateRouteName(fullPath),
+            });
+        }
+        if (children) {
+            displayRoutes.push(...getDisplayRoutes(children, fullPath));
+        }
+    }
+    return displayRoutes;
+}
+export function AppRoutesProvider({ appRoutes, children }) {
+    const routing = useRoutes((appRoutes ?? []));
+    const navigate = useNavigate();
+    const location = useLocation();
+    const displayRoutes = useMemo(() => getDisplayRoutes(appRoutes ?? []), [appRoutes]);
+    // @ts-ignore - import.meta.env is provided by Vite.
+    const previewEnabled = isPreviewRuntimeEnabled(import.meta.env.VITE_PREVIEW_SCRIPT_URL);
+    const sendRoutes = useCallback(() => {
+        if (!previewEnabled || !appRoutes?.length) {
+            return;
+        }
+        window.parent.postMessage({ type: 'nav/routes', payload: { routes: displayRoutes } }, getPreviewParentOrigin() ?? '*');
+    }, [appRoutes, displayRoutes, previewEnabled]);
+    // This runtime predates locale-aware routing and has no fimo-config to read,
+    // so the document's own `lang` is the only locale the app has declared.
+    const sendLocationChange = useCallback(() => {
+        if (!previewEnabled) {
+            return;
+        }
+        const parentOrigin = getPreviewParentOrigin();
+        window.parent.postMessage({
+            type: 'nav/locationChange',
+            payload: getPreviewLocationChange(location, getDocumentLocale(document, 'en'), parentOrigin),
+        }, parentOrigin ?? '*');
+    }, [location.hash, location.pathname, location.search, previewEnabled]);
+    useEffect(sendRoutes, [sendRoutes]);
+    useEffect(sendLocationChange, [sendLocationChange]);
+    useEffect(() => {
+        if (!previewEnabled) {
+            return;
+        }
+        const handleMessage = (event) => {
+            const parentOrigin = getPreviewParentOrigin();
+            if (event.source !== window.parent || !parentOrigin || event.origin !== parentOrigin) {
+                return;
+            }
+            const type = event.data?.type;
+            const payload = event.data?.payload;
+            switch (type) {
+                case 'nav/navigate':
+                    {
+                        const target = getSafePreviewNavigationPath(payload?.to, window.location.origin);
+                        if (target) {
+                            navigate(target);
+                        }
+                    }
+                    return;
+                case 'nav/read-routes':
+                    sendRoutes();
+                    sendLocationChange();
+                    return;
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return () => {
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [navigate, previewEnabled, sendRoutes, sendLocationChange]);
+    return (_jsx(ErrorBoundary, { FallbackComponent: AppErrorBoundary, onError: onError, children: _jsx(DataSourcesProvider, { children: _jsx(ScreenshotProvider, { children: _jsx(ViteLifecycles, { children: _jsxs(RefreshContentProvider, { children: [_jsx(OptionalTracking, { routes: displayRoutes }), _jsx(AppResetScrollOnNavigate, {}), appRoutes?.length ? routing : children] }) }) }) }) }));
+}

package/dist/FimoProviders.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export { getPreviewLocationChange, getPreviewLocationPath } from 'fimo/preview';
+export interface ParamInfo {
+    schema: string;
+    queryField: string;
+    displayField: string;
+}
+export interface DisplayRoute {
+    id: string;
+    name: string;
+    path: string;
+    params?: Record<string, ParamInfo>;
+}
+/**
+ * The routes the running app can actually navigate to right now.
+ *
+ * Studio gates preview navigation on this list, so it must come from the
+ * router that is currently loaded rather than the build-time config: after a
+ * merge, config metadata can describe a page whose route module has not
+ * reached this iframe yet. Names and params still come from config, which is
+ * where authored metadata lives. Falls back to config when the framework
+ * manifest is unreadable (SSR pass, non-framework mode).
+ */
+export declare function getDisplayRoutes(frameworkManifest: unknown): DisplayRoute[];
+export interface FimoProvidersProps {
+    children?: React.ReactNode;
+    locale?: string;
+}
+export declare function FimoProviders({ children, locale }: FimoProvidersProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FimoProviders.d.ts.map

package/dist/FimoProviders.js

@@ -0,0 +1,187 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryClient, QueryClientContext, QueryClientProvider } from '@tanstack/react-query';
+import { AppErrorBoundary, DataSourcesProvider, RefreshContentProvider, ScreenshotProvider, ViteLifecycles, } from 'fimo-react';
+import { FimoLocaleProvider, onError } from 'fimo-react/internal';
+import { getFimoTextDirection, resolveFimoLocale, toHtmlLang } from 'fimo/config';
+import { ensurePreviewScript, getPreviewLocationChange, getPreviewParentOrigin, getSafePreviewNavigationPath, isPreviewRuntimeEnabled, } from 'fimo/preview';
+import { matchFimoRoute } from 'fimo/routes';
+import { Suspense, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { UNSAFE_FrameworkContext, useLocation, useNavigate } from 'react-router';
+// @ts-ignore - virtual module provided by fimoConfigPlugin in fimo-vite
+import fimoConfig from 'virtual:fimo-config';
+import { getActiveRouterRoutes } from './active-routes.js';
+import { OptionalTracking } from './OptionalTracking.js';
+export { getPreviewLocationChange, getPreviewLocationPath } from 'fimo/preview';
+const titleCase = (seg) => seg
+    .replace(/[_-]+/g, ' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join(' ');
+const generateRouteName = (path) => {
+    if (path === '/') {
+        return 'Home';
+    }
+    const firstSegment = path.replace(/^\//, '').split('/')[0];
+    return titleCase(firstSegment);
+};
+function getConfigDisplayRoutes() {
+    const configRoutes = fimoConfig.routes ?? {};
+    return Object.entries(configRoutes)
+        .filter(([, route]) => route.path)
+        .map(([id, route]) => ({
+        id,
+        path: route.path,
+        name: route.name || generateRouteName(route.path),
+        params: route.params,
+    }));
+}
+function getCanonicalRoutePath(path) {
+    return resolveFimoLocale({ pathname: path }, fimoConfig).routePath;
+}
+/**
+ * The locale a pathname renders.
+ *
+ * The declared route decides it. A route that declares no `:locale` segment is
+ * app-owned and renders the default locale whatever its first segment spells,
+ * which is what stops `/fr` from switching the page to French when `fr` is
+ * really an entry slug under a top-level `/:slug` route.
+ *
+ * Only a URL that no declared route answers falls back to the compatibility
+ * prefix resolver. Existing apps can still rely on that inference while new
+ * route-owned integrations pass an explicit locale to `FimoProviders`.
+ */
+function getRouteLocale(pathname) {
+    return (matchFimoRoute(pathname, fimoConfig)?.locale ?? resolveFimoLocale({ pathname }, fimoConfig).locale);
+}
+function hasReadableFrameworkManifest(manifest) {
+    return Boolean(manifest &&
+        typeof manifest === 'object' &&
+        'routes' in manifest &&
+        manifest.routes &&
+        typeof manifest.routes === 'object');
+}
+/**
+ * The routes the running app can actually navigate to right now.
+ *
+ * Studio gates preview navigation on this list, so it must come from the
+ * router that is currently loaded rather than the build-time config: after a
+ * merge, config metadata can describe a page whose route module has not
+ * reached this iframe yet. Names and params still come from config, which is
+ * where authored metadata lives. Falls back to config when the framework
+ * manifest is unreadable (SSR pass, non-framework mode).
+ */
+export function getDisplayRoutes(frameworkManifest) {
+    const configRoutes = getConfigDisplayRoutes();
+    if (!hasReadableFrameworkManifest(frameworkManifest)) {
+        return configRoutes;
+    }
+    const configByPath = new Map(configRoutes.map((route) => [getCanonicalRoutePath(route.path), route]));
+    return getActiveRouterRoutes(frameworkManifest).map((route) => {
+        const metadata = configByPath.get(getCanonicalRoutePath(route.path));
+        return {
+            id: metadata?.id ?? route.id,
+            path: route.path,
+            name: metadata?.name ?? generateRouteName(route.path),
+            ...(metadata?.params ? { params: metadata.params } : {}),
+        };
+    });
+}
+/**
+ * Studio's window into the running app. Framework-neutral on purpose: it
+ * speaks only postMessage (`nav/routes`, `nav/locationChange`, `nav/navigate`,
+ * `nav/read-routes`) and reads routes through the `readRoutes` callback, so a
+ * future non-React-Router runtime reuses it by supplying its own reader.
+ */
+function PreviewBridge({ readRoutes, locale }) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const sendRoutes = useCallback(() => {
+        // Read at send time: the router can change its route table in place
+        // during HMR, so an explicit nav/read-routes must see the current state.
+        window.parent.postMessage({ type: 'nav/routes', payload: { routes: readRoutes() } }, getPreviewParentOrigin() ?? '*');
+    }, [readRoutes]);
+    // `locale` is a dependency on purpose: an app that settles a new locale
+    // without moving the pathname still has to tell Studio about it.
+    const sendLocationChange = useCallback(() => {
+        const parentOrigin = getPreviewParentOrigin();
+        window.parent.postMessage({ type: 'nav/locationChange', payload: getPreviewLocationChange(location, locale, parentOrigin) }, parentOrigin ?? '*');
+    }, [location.hash, location.pathname, location.search, locale]);
+    useEffect(sendRoutes, [sendRoutes]);
+    useEffect(sendLocationChange, [sendLocationChange]);
+    useEffect(() => {
+        const handleMessage = (event) => {
+            const parentOrigin = getPreviewParentOrigin();
+            if (event.source !== window.parent || !parentOrigin || event.origin !== parentOrigin) {
+                return;
+            }
+            const type = event.data?.type;
+            const payload = event.data?.payload;
+            switch (type) {
+                case 'nav/navigate':
+                    {
+                        const target = getSafePreviewNavigationPath(payload?.to, window.location.origin);
+                        if (target) {
+                            navigate(target);
+                        }
+                    }
+                    return;
+                case 'nav/read-routes':
+                    sendRoutes();
+                    sendLocationChange();
+                    return;
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return () => {
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [navigate, sendRoutes, sendLocationChange]);
+    return null;
+}
+function EnsureQueryClient({ children }) {
+    const existingQueryClient = useContext(QueryClientContext);
+    const fallbackQueryClientRef = useRef(null);
+    if (existingQueryClient) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const fallbackQueryClient = fallbackQueryClientRef.current ?? (fallbackQueryClientRef.current = new QueryClient());
+    return _jsx(QueryClientProvider, { client: fallbackQueryClient, children: children });
+}
+export function FimoProviders({ children, locale }) {
+    const location = useLocation();
+    // The React-Router-specific part of the bridge, isolated here: the live
+    // route table lives on the framework context's manifest, which React Router
+    // may update in place during HMR — hence reading it per render/send instead
+    // of caching. A different framework runtime would swap this reader only.
+    const frameworkContext = useContext(UNSAFE_FrameworkContext);
+    const readRoutes = useCallback(() => getDisplayRoutes(frameworkContext?.manifest), [frameworkContext?.manifest]);
+    const routes = readRoutes();
+    const localeResolution = useMemo(() => resolveFimoLocale({ pathname: location.pathname }, fimoConfig), [location.pathname]);
+    // The app is authoritative: an explicit `locale` wins over anything Fimo can
+    // infer, and inference itself goes through the declared route contract.
+    const activeLocale = useMemo(() => locale ?? getRouteLocale(location.pathname), [locale, location.pathname]);
+    const activeDir = getFimoTextDirection(activeLocale);
+    // @ts-ignore - import.meta.env is provided by Vite and React Router.
+    const previewScriptUrl = import.meta.env.VITE_PREVIEW_SCRIPT_URL;
+    const previewEnabled = isPreviewRuntimeEnabled(previewScriptUrl);
+    useEffect(() => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        document.documentElement.lang = toHtmlLang(activeLocale);
+        document.documentElement.dir = activeDir;
+    }, [activeDir, activeLocale]);
+    useEffect(() => {
+        if (previewEnabled) {
+            ensurePreviewScript(previewScriptUrl);
+        }
+    }, [previewEnabled, previewScriptUrl]);
+    return (_jsx(ErrorBoundary, { FallbackComponent: AppErrorBoundary, onError: onError, children: _jsx(EnsureQueryClient, { children: _jsx(FimoLocaleProvider, { value: {
+                    ...localeResolution,
+                    locale: activeLocale,
+                    dir: activeDir,
+                }, children: _jsx(DataSourcesProvider, { children: _jsx(ScreenshotProvider, { children: _jsx(ViteLifecycles, { children: _jsxs(RefreshContentProvider, { children: [previewEnabled ? _jsx(PreviewBridge, { readRoutes: readRoutes, locale: activeLocale }) : null, _jsx(OptionalTracking, { routes: routes }), _jsx(Suspense, { children: children })] }) }) }) }) }) }) }));
+}

package/dist/FimoScripts.d.ts

@@ -0,0 +1,13 @@
+import 'virtual:fimo-overlay-hmr';
+/**
+ * Renders extra <script> tags in <head>:
+ * - Dev overlay runtime (window.error / unhandledrejection bridge to parent)
+ * - JSON-LD Schema.org Organization + WebSite (when seo.siteName + seo.url set)
+ *
+ * The overlay runtime is embedded inline via the `virtual:fimo-overlay-runtime`
+ * module (resolved by `overlayPlugin` in `fimo-vite`). The previous approach
+ * used `transformIndexHtml`, which doesn't fire in react-router framework mode
+ * since framework mode bypasses `index.html` entirely.
+ */
+export declare function FimoScripts(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FimoScripts.d.ts.map

package/dist/FimoScripts.js

@@ -0,0 +1,45 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore - virtual module provided by fimoConfigPlugin in fimo-vite
+import rawConfig from 'virtual:fimo-config';
+// @ts-ignore - side-effect import; vite-served so import.meta.hot works inside
+import 'virtual:fimo-overlay-hmr';
+// @ts-ignore - virtual module provided by overlayPlugin in fimo-vite; empty in prod
+import overlayRuntime from 'virtual:fimo-overlay-runtime';
+const config = rawConfig;
+const runtime = overlayRuntime;
+function buildSiteSchemas() {
+    const seo = config.seo;
+    if (!seo?.siteName || !seo?.url) {
+        return [];
+    }
+    const organization = {
+        '@context': 'https://schema.org',
+        '@type': 'Organization',
+        name: seo.siteName,
+        url: seo.url,
+    };
+    if (seo.favicon) {
+        organization.logo = seo.favicon;
+    }
+    const website = {
+        '@context': 'https://schema.org',
+        '@type': 'WebSite',
+        name: seo.siteName,
+        url: seo.url,
+    };
+    return [organization, website];
+}
+/**
+ * Renders extra <script> tags in <head>:
+ * - Dev overlay runtime (window.error / unhandledrejection bridge to parent)
+ * - JSON-LD Schema.org Organization + WebSite (when seo.siteName + seo.url set)
+ *
+ * The overlay runtime is embedded inline via the `virtual:fimo-overlay-runtime`
+ * module (resolved by `overlayPlugin` in `fimo-vite`). The previous approach
+ * used `transformIndexHtml`, which doesn't fire in react-router framework mode
+ * since framework mode bypasses `index.html` entirely.
+ */
+export function FimoScripts() {
+    const siteSchemas = buildSiteSchemas();
+    return (_jsxs(_Fragment, { children: [runtime ? _jsx("script", { type: "module", dangerouslySetInnerHTML: { __html: runtime } }) : null, siteSchemas.map((schema, index) => (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(schema) } }, index)))] }));
+}

package/dist/OptionalTracking.d.ts

@@ -0,0 +1,13 @@
+import type { Pageview } from './Pageview.js';
+type PageviewComponent = typeof Pageview;
+type PageviewModule = {
+    Pageview: PageviewComponent;
+};
+type PageviewLoader = () => Promise<PageviewModule>;
+type DisplayRoute = Parameters<PageviewComponent>[0]['routes'][number];
+export declare function loadPageviewComponent(loadPageview?: PageviewLoader): Promise<typeof Pageview | null>;
+export declare function OptionalTracking({ routes }: {
+    routes: DisplayRoute[];
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=OptionalTracking.d.ts.map

package/dist/OptionalTracking.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+const defaultLoadPageview = () => import('./Pageview.js');
+export async function loadPageviewComponent(loadPageview = defaultLoadPageview) {
+    try {
+        return (await loadPageview()).Pageview;
+    }
+    catch {
+        return null;
+    }
+}
+export function OptionalTracking({ routes }) {
+    const [PageviewComponent, setPageviewComponent] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        loadPageviewComponent()
+            .then((component) => {
+            if (!cancelled) {
+                setPageviewComponent(() => component);
+            }
+        })
+            .catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    return PageviewComponent ? _jsx(PageviewComponent, { routes: routes }) : null;
+}

package/dist/Pageview.d.ts

@@ -0,0 +1,9 @@
+type DisplayRoute = {
+    path: string;
+    name: string;
+};
+export declare function Pageview({ routes }: {
+    routes: DisplayRoute[];
+}): null;
+export {};
+//# sourceMappingURL=Pageview.d.ts.map

package/dist/Pageview.js

@@ -0,0 +1,118 @@
+import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router';
+const VISITOR_ID_STORAGE_KEY = 'fimo.analytics.visitor-id';
+const SESSION_ID_STORAGE_KEY = 'fimo.analytics.session-id';
+const viteEnv = import.meta.env;
+const API_BASE_URL = viteEnv?.VITE_API_URL?.replace(/\/$/, '');
+const ENABLE_ANALYTICS = (viteEnv?.VITE_ENABLE_ANALYTICS ?? '').toLowerCase() === 'true';
+function isPreviewContext() {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const search = new URLSearchParams(window.location.search);
+    return search.has('bl_preview_token');
+}
+function createId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function readOrCreateStoredId(storage, key) {
+    const existing = storage.getItem(key);
+    if (existing && existing.length > 0) {
+        return existing;
+    }
+    const generated = createId();
+    storage.setItem(key, generated);
+    return generated;
+}
+function getVisitorId() {
+    if (typeof window === 'undefined') {
+        return createId();
+    }
+    try {
+        return readOrCreateStoredId(window.localStorage, VISITOR_ID_STORAGE_KEY);
+    }
+    catch {
+        return createId();
+    }
+}
+function getSessionId() {
+    if (typeof window === 'undefined') {
+        return createId();
+    }
+    try {
+        return readOrCreateStoredId(window.sessionStorage, SESSION_ID_STORAGE_KEY);
+    }
+    catch {
+        return createId();
+    }
+}
+function normalizePath(path) {
+    const trimmed = path.trim();
+    if (!trimmed) {
+        return '/';
+    }
+    if (trimmed === '/') {
+        return '/';
+    }
+    return trimmed.replace(/\/+$/, '');
+}
+function findRouteName(pathname, routes) {
+    const currentPath = normalizePath(pathname);
+    const exactMatch = routes.find((route) => normalizePath(route.path) === currentPath);
+    if (exactMatch) {
+        return exactMatch.name;
+    }
+    const dynamicMatch = routes.find((route) => {
+        const normalizedPattern = normalizePath(route.path);
+        const regex = new RegExp(`^${normalizedPattern.replace(/:\w+/g, '[^/]+')}$`);
+        return regex.test(currentPath);
+    });
+    if (dynamicMatch) {
+        return dynamicMatch.name;
+    }
+    return null;
+}
+function sendPageview(path, pageName) {
+    if (typeof window === 'undefined' || !API_BASE_URL || !ENABLE_ANALYTICS || isPreviewContext()) {
+        return;
+    }
+    const payload = new URLSearchParams({
+        p: path || '/',
+        n: pageName,
+        v: getVisitorId(),
+        s: getSessionId(),
+    });
+    if (document.referrer) {
+        payload.set('r', document.referrer);
+    }
+    if (navigator.userAgent) {
+        payload.set('u', navigator.userAgent);
+    }
+    void fetch(`${API_BASE_URL}/e/p`, {
+        method: 'POST',
+        body: payload,
+        keepalive: true,
+        mode: 'cors',
+        credentials: 'omit',
+    }).catch(() => {
+        // best-effort analytics
+    });
+}
+export function Pageview({ routes }) {
+    const location = useLocation();
+    const lastTrackedPath = useRef(null);
+    useEffect(() => {
+        const currentPath = `${location.pathname}${location.search}`;
+        const routeName = findRouteName(location.pathname, routes);
+        const currentPageName = routeName ?? normalizePath(location.pathname);
+        if (currentPath === lastTrackedPath.current) {
+            return;
+        }
+        lastTrackedPath.current = currentPath;
+        sendPageview(currentPath, currentPageName);
+    }, [location.pathname, location.search, routes]);
+    return null;
+}

package/dist/active-routes.d.ts

@@ -0,0 +1,12 @@
+export interface ActiveRouterRoute {
+    id: string;
+    path: string;
+}
+/**
+ * Flatten React Router's framework manifest into the route graph the active
+ * router actually loaded. This is intentionally separate from fimo-config:
+ * metadata describes what Studio expects, while this manifest describes what
+ * the iframe can render after its route modules have converged.
+ */
+export declare function getActiveRouterRoutes(manifest: unknown): ActiveRouterRoute[];
+//# sourceMappingURL=active-routes.d.ts.map