fimo 0.11.0-staging.12 → 0.11.0-staging.13

package/dist/cli/bundle.json

@@ -1,7 +1,7 @@
 {
   "bundled": true,
   "bundler": "esbuild",
-  "bundledAt": "2026-08-06T13:51:18.875Z",
+  "bundledAt": "2026-08-06T15:15:13.492Z",
   "cliVersion": "0.10.0",
   "external": [
     "oxc-parser",

package/dist/runtime/app/FimoProviders.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export { getPreviewLocationChange, getPreviewLocationPath } from '../react-router/preview-location.js';
 export interface ParamInfo {
     schema: string;
     queryField: string;
@@ -10,6 +11,17 @@ export interface DisplayRoute {
     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;

package/dist/runtime/app/FimoProviders.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { QueryClient, QueryClientContext, QueryClientProvider } from '@tanstack/react-query';
 import { Suspense, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useLocation, useNavigate } from 'react-router';
+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 { DataSourcesProvider } from '../content/DataSourcesProvider.js';
@@ -12,7 +12,10 @@ import { ViteLifecycles } from '../core/ViteLifecycles.js';
 import { FimoLocaleProvider } from '../i18n/FimoLocaleContext.js';
 import { getFimoTextDirection, resolveFimoLocale, toHtmlLang } from '../i18n/locale.js';
 import { ScreenshotProvider } from '../iframe/ScreenshotProvider.js';
+import { getActiveRouterRoutes } from '../react-router/active-routes.js';
+import { getPreviewLocationChange, getPreviewParentOrigin, } from '../react-router/preview-location.js';
 import { OptionalTracking } from '../t/OptionalTracking.js';
+export { getPreviewLocationChange, getPreviewLocationPath } from '../react-router/preview-location.js';
 const titleCase = (seg) => seg
     .replace(/[_-]+/g, ' ')
     .replace(/([a-z])([A-Z])/g, '$1 $2')
@@ -27,7 +30,7 @@ const generateRouteName = (path) => {
     const firstSegment = path.replace(/^\//, '').split('/')[0];
     return titleCase(firstSegment);
 };
-function getDisplayRoutes() {
+function getConfigDisplayRoutes() {
     const configRoutes = fimoConfig.routes ?? {};
     return Object.entries(configRoutes)
         .filter(([, route]) => route.path)
@@ -38,28 +41,77 @@ function getDisplayRoutes() {
         params: route.params,
     }));
 }
-function PreviewBridge() {
+function getCanonicalRoutePath(path) {
+    return resolveFimoLocale({ pathname: path }, fimoConfig).routePath;
+}
+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 }) {
     const navigate = useNavigate();
     const location = useLocation();
     const localeResolution = useMemo(() => resolveFimoLocale({ pathname: location.pathname }, fimoConfig), [location.pathname]);
     const sendRoutes = useCallback(() => {
-        const displayRoutes = getDisplayRoutes();
-        window.parent.postMessage({ type: 'nav/routes', payload: { routes: displayRoutes } }, '*');
-    }, []);
+        // 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]);
     const sendLocationChange = useCallback(() => {
+        const locationChange = getPreviewLocationChange(location);
+        const parentOrigin = getPreviewParentOrigin();
         window.parent.postMessage({
             type: 'nav/locationChange',
             payload: {
-                path: location.pathname,
+                ...(parentOrigin ? locationChange : { path: locationChange.path }),
                 routePath: localeResolution.routePath,
                 locale: localeResolution.locale,
             },
-        }, '*');
-    }, [location.pathname, localeResolution.locale, localeResolution.routePath]);
+        }, parentOrigin ?? '*');
+    }, [location.hash, location.pathname, location.search, localeResolution.locale, localeResolution.routePath]);
     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) {
@@ -92,6 +144,13 @@ function EnsureQueryClient({ 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]);
     const activeLocale = locale ?? localeResolution.locale;
     const activeDir = getFimoTextDirection(activeLocale);
@@ -106,5 +165,5 @@ export function FimoProviders({ children, locale }) {
                     ...localeResolution,
                     locale: activeLocale,
                     dir: activeDir,
-                }, children: _jsx(DataSourcesProvider, { children: _jsx(ScreenshotProvider, { children: _jsx(ViteLifecycles, { children: _jsxs(RefreshContentProvider, { children: [_jsx(PreviewBridge, {}), _jsx(OptionalTracking, { routes: getDisplayRoutes() }), _jsx(Suspense, { children: children })] }) }) }) }) }) }) }));
+                }, children: _jsx(DataSourcesProvider, { children: _jsx(ScreenshotProvider, { children: _jsx(ViteLifecycles, { children: _jsxs(RefreshContentProvider, { children: [_jsx(PreviewBridge, { readRoutes: readRoutes }), _jsx(OptionalTracking, { routes: routes }), _jsx(Suspense, { children: children })] }) }) }) }) }) }) }));
 }

package/dist/runtime/react-router/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

package/dist/runtime/react-router/active-routes.js

@@ -0,0 +1,60 @@
+const normalizeRoutePath = (path) => {
+    const withSlash = path.startsWith('/') ? path : `/${path}`;
+    const normalized = withSlash.replace(/\/{2,}/g, '/');
+    return normalized.length > 1 ? normalized.replace(/\/+$/, '') : normalized;
+};
+const joinRoutePath = (parentPath, childPath) => {
+    if (!childPath) {
+        return parentPath;
+    }
+    if (childPath.startsWith('/')) {
+        return normalizeRoutePath(childPath);
+    }
+    return normalizeRoutePath(`${parentPath}/${childPath}`);
+};
+/**
+ * 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 function getActiveRouterRoutes(manifest) {
+    const routeRecord = manifest?.routes;
+    if (!routeRecord) {
+        return [];
+    }
+    const entries = Object.values(routeRecord).filter(isActiveRouteManifestEntry);
+    const byId = new Map(entries.map((entry) => [entry.id, entry]));
+    const pathCache = new Map();
+    const resolvePath = (entry, resolving = new Set()) => {
+        const cached = pathCache.get(entry.id);
+        if (cached !== undefined) {
+            return cached;
+        }
+        if (resolving.has(entry.id)) {
+            return '';
+        }
+        const nextResolving = new Set(resolving).add(entry.id);
+        const parentPath = entry.parentId
+            ? resolvePath(byId.get(entry.parentId) ?? { id: entry.parentId }, nextResolving)
+            : '';
+        const path = entry.index ? parentPath || '/' : joinRoutePath(parentPath, entry.path ?? '');
+        pathCache.set(entry.id, path);
+        return path;
+    };
+    return entries.flatMap((entry) => {
+        // A pathless/root layout is part of the framework manifest, but it is not
+        // a URL the router can navigate to. Treat only an explicit index route as
+        // the root path; including the layout would add a phantom `/` entry and
+        // make exact route-graph convergence impossible for apps without a home
+        // page.
+        if ((entry.path === undefined || entry.path === '') && !entry.index) {
+            return [];
+        }
+        const path = normalizeRoutePath(resolvePath(entry));
+        return [{ id: entry.id, path }];
+    });
+}
+function isActiveRouteManifestEntry(value) {
+    return Boolean(value && typeof value === 'object' && typeof value.id === 'string');
+}

package/dist/runtime/react-router/preview-location.d.ts

@@ -0,0 +1,29 @@
+export interface PreviewLocationLike {
+    pathname: string;
+    search?: string;
+    hash?: string;
+}
+export interface PreviewLocationChange {
+    /** Safe workspace focus value; query/hash state stays navigation-only. */
+    path: string;
+    /** Exact app location used to keep the parent's iframe URL in sync. */
+    navigationPath: string;
+}
+/**
+ * `ancestorOrigins[0]` identifies the immediate embedding document and stays
+ * stable when the preview document itself navigates or reloads. The referrer
+ * is the fallback for browsers without ancestor origins (Firefox), where it
+ * can go stale after in-app navigation — which is why the runtime wrapper
+ * below remembers the first successful resolution.
+ */
+export declare function resolvePreviewParentOrigin(referrer: string | undefined, ancestorOrigins: readonly string[] | undefined): string | null;
+/**
+ * Resolve the parent origin for the iframe's authenticated preview channel
+ * from the live browser context. Standalone app loads have no trusted parent
+ * origin and must not receive query/hash-bearing location data.
+ */
+export declare function getPreviewParentOrigin(): string | null;
+/** Keep sandbox credentials and the iframe cache-buster out of app navigation state. */
+export declare function getPreviewLocationPath(location: PreviewLocationLike): string;
+export declare function getPreviewLocationChange(location: PreviewLocationLike): PreviewLocationChange;
+//# sourceMappingURL=preview-location.d.ts.map

package/dist/runtime/react-router/preview-location.js

@@ -0,0 +1,94 @@
+const PREVIEW_INTERNAL_QUERY_PARAMS = new Set(['bl_preview_token', 'preview_token', 't']);
+const PREVIEW_PARENT_ORIGIN_STORAGE_KEY = 'fimo-preview-parent-origin';
+let rememberedPreviewParentOrigin;
+const getOrigin = (value) => {
+    if (!value) {
+        return null;
+    }
+    try {
+        const origin = new URL(value).origin;
+        return origin === 'null' ? null : origin;
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * `ancestorOrigins[0]` identifies the immediate embedding document and stays
+ * stable when the preview document itself navigates or reloads. The referrer
+ * is the fallback for browsers without ancestor origins (Firefox), where it
+ * can go stale after in-app navigation — which is why the runtime wrapper
+ * below remembers the first successful resolution.
+ */
+export function resolvePreviewParentOrigin(referrer, ancestorOrigins) {
+    return getOrigin(ancestorOrigins?.[0]) ?? getOrigin(referrer);
+}
+/**
+ * Resolve the parent origin for the iframe's authenticated preview channel
+ * from the live browser context. Standalone app loads have no trusted parent
+ * origin and must not receive query/hash-bearing location data.
+ */
+export function getPreviewParentOrigin() {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    const ancestorOrigin = getOrigin(window.location.ancestorOrigins?.[0]);
+    if (ancestorOrigin) {
+        rememberPreviewParentOrigin(ancestorOrigin);
+        return ancestorOrigin;
+    }
+    // The referrer becomes the previous preview URL after in-app navigation, so
+    // a remembered first resolution outranks it on reloads.
+    const rememberedOrigin = readRememberedPreviewParentOrigin();
+    if (rememberedOrigin) {
+        return rememberedOrigin;
+    }
+    const referrerOrigin = getOrigin(typeof document === 'undefined' ? undefined : document.referrer);
+    if (referrerOrigin) {
+        rememberPreviewParentOrigin(referrerOrigin);
+    }
+    return referrerOrigin;
+}
+function readRememberedPreviewParentOrigin() {
+    if (rememberedPreviewParentOrigin !== undefined) {
+        return rememberedPreviewParentOrigin;
+    }
+    if (typeof sessionStorage === 'undefined') {
+        rememberedPreviewParentOrigin = null;
+        return null;
+    }
+    try {
+        rememberedPreviewParentOrigin = getOrigin(sessionStorage.getItem(PREVIEW_PARENT_ORIGIN_STORAGE_KEY) ?? undefined);
+    }
+    catch {
+        rememberedPreviewParentOrigin = null;
+    }
+    return rememberedPreviewParentOrigin;
+}
+function rememberPreviewParentOrigin(origin) {
+    rememberedPreviewParentOrigin = origin;
+    if (typeof sessionStorage === 'undefined') {
+        return;
+    }
+    try {
+        sessionStorage.setItem(PREVIEW_PARENT_ORIGIN_STORAGE_KEY, origin);
+    }
+    catch {
+        // Storage availability must not block the preview message channel.
+    }
+}
+/** Keep sandbox credentials and the iframe cache-buster out of app navigation state. */
+export function getPreviewLocationPath(location) {
+    const search = new URLSearchParams(location.search ?? '');
+    for (const key of PREVIEW_INTERNAL_QUERY_PARAMS) {
+        search.delete(key);
+    }
+    const query = search.toString();
+    return `${location.pathname}${query ? `?${query}` : ''}${location.hash ?? ''}`;
+}
+export function getPreviewLocationChange(location) {
+    return {
+        path: location.pathname,
+        navigationPath: getPreviewLocationPath(location),
+    };
+}

package/dist/runtime/routing/AppRoutesProvider.js

@@ -7,6 +7,7 @@ import { RefreshContentProvider } from '../content/RefreshContentProvider.js';
 import { AppErrorBoundary, onError } from '../core/AppErrorBoundary.js';
 import { ViteLifecycles } from '../core/ViteLifecycles.js';
 import { ScreenshotProvider } from '../iframe/ScreenshotProvider.js';
+import { getPreviewLocationChange, getPreviewParentOrigin } from '../react-router/preview-location.js';
 import { OptionalTracking } from '../t/OptionalTracking.js';
 import { AppResetScrollOnNavigate } from './AppResetScrollOnNavigate.js';
 const titleCase = (seg) => seg
@@ -57,18 +58,24 @@ export function AppRoutesProvider({ appRoutes, children }) {
         if (!appRoutes?.length) {
             return;
         }
-        window.parent.postMessage({ type: 'nav/routes', payload: { routes: displayRoutes } }, '*');
+        window.parent.postMessage({ type: 'nav/routes', payload: { routes: displayRoutes } }, getPreviewParentOrigin() ?? '*');
     }, [appRoutes, displayRoutes]);
     const sendLocationChange = useCallback(() => {
+        const locationChange = getPreviewLocationChange(location);
+        const parentOrigin = getPreviewParentOrigin();
         window.parent.postMessage({
             type: 'nav/locationChange',
-            payload: { path: location.pathname },
-        }, '*');
-    }, [location.pathname]);
+            payload: parentOrigin ? locationChange : { path: locationChange.path },
+        }, parentOrigin ?? '*');
+    }, [location.hash, location.pathname, location.search]);
     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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fimo",
-  "version": "0.11.0-staging.12",
+  "version": "0.11.0-staging.13",
   "description": "Fimo CLI - create, deploy, and manage Fimo projects",
   "bin": {
     "fimo": "dist/cli/index.js"

package/templates/react-router/package.json

@@ -21,7 +21,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "fimo": "0.11.0-staging.12",
+    "fimo": "0.11.0-staging.13",
     "input-otp": "^1.4.2",
     "isbot": "^5",
     "lucide-react": "^0.577.0",