fimo 0.9.0-experimental.7 → 0.9.0-experimental.9

package/dist/runtime/app/FimoProviders.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useCallback, useEffect, useMemo } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useLocation, useNavigate } from 'react-router';
 // @ts-ignore - virtual module provided by fimoConfigPlugin in fimo/vite
@@ -59,6 +60,27 @@ function PreviewBridge() {
     }, [navigate, sendRoutes, sendLocationChange]);
     return null;
 }
+/**
+ * Template projects mount their own QueryClientProvider in root.tsx, but an
+ * ADOPTED app wired straight onto FimoProviders (react-router library SPAs)
+ * has none — and the inner runtime (RefreshContentProvider, content clients)
+ * calls useQueryClient(). Mount a fallback client only when no provider
+ * exists above, so both worlds work and template caches stay untouched.
+ */
+function EnsureQueryClient({ children }) {
+    let existing = null;
+    try {
+        existing = useQueryClient();
+    }
+    catch {
+        existing = null;
+    }
+    const [fallbackClient] = useState(() => new QueryClient());
+    if (existing) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return _jsx(QueryClientProvider, { client: fallbackClient, children: children });
+}
 export function FimoProviders({ children, locale }) {
     const location = useLocation();
     const localeResolution = useMemo(() => resolveFimoLocale({ pathname: location.pathname }, fimoConfig), [location.pathname]);
@@ -71,9 +93,9 @@ export function FimoProviders({ children, locale }) {
         document.documentElement.lang = toHtmlLang(activeLocale);
         document.documentElement.dir = activeDir;
     }, [activeDir, activeLocale]);
-    return (_jsx(ErrorBoundary, { FallbackComponent: AppErrorBoundary, onError: onError, children: _jsx(FimoLocaleProvider, { value: {
-                ...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 })] }) }) }) }) }) }));
+    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: [_jsx(PreviewBridge, {}), _jsx(OptionalTracking, { routes: getDisplayRoutes() }), _jsx(Suspense, { children: children })] }) }) }) }) }) }) }));
 }

package/dist/runtime/primitives/components/RichText.d.ts

@@ -3,7 +3,11 @@ import { type FimoRichText, type FimoRichTextComponents } from '../lib/index.js'
 type RichTextProps = {
     value: FimoRichText;
     components?: FimoRichTextComponents;
+    /** Wrapper element. Use `span` when the block sits inside phrasing
+     *  content (a `<p>`): a div there is invalid HTML — the browser closes
+     *  the paragraph early and React trashes the hydrated tree. */
+    as?: 'div' | 'span';
 } & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
-export declare function RichText({ value, components, ...props }: RichTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichText({ value, components, as: Wrapper, ...props }: RichTextProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RichText.d.ts.map

package/dist/runtime/primitives/components/RichText.js

@@ -128,8 +128,8 @@ function renderNode(node, components, key) {
     }
     return _jsx(Fragment, { children: children }, key);
 }
-export function RichText({ value, components, ...props }) {
+export function RichText({ value, components, as: Wrapper = 'div', ...props }) {
     const source = value[FIMO_SOURCE];
     const { value: liveContent, ref } = useFimoLiveValue(value.content);
-    return (_jsx("div", { ref: ref, ...props, "data-fimo-source": source, "data-fimo-richtext": "", children: renderNode(liveContent, components, 0) }));
+    return (_jsx(Wrapper, { ref: ref, ...props, "data-fimo-source": source, "data-fimo-richtext": "", children: renderNode(liveContent, components, 0) }));
 }

package/dist/runtime/react/FimoSpaProviders.js

@@ -1,9 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { getFimoDefaultLocale, getFimoLocales } from '../i18n/locale.js';
 import { fetchLabelBundle, serializeBundle } from '../shared/labels-fetch.pure.js';
+import { fetchWrappedContent } from '../wrapped/content-fetch.pure.js';
 import { WrappedProviders } from '../wrapped/WrappedProviders.js';
+import { readInitialSpaContent, writeSpaContentCache } from './spa-content-cache.js';
 /** Browser-safe stable signature (labelSignature uses Buffer, server-only). */
 function bundleSignature(bundle) {
     const serialized = serializeBundle(bundle);
@@ -33,31 +35,97 @@ function bundleSignature(bundle) {
  * router without depending on one.
  */
 export function FimoSpaProviders({ config, apiUrl, previewScriptUrl, media, richText, locale, children, }) {
-    const [labels, setLabels] = useState(undefined);
+    // Synchronous first paint: baked SSG payload or the last visit's cached
+    // one renders IMMEDIATELY (the SDK owns rendering — no fallback flash
+    // while the network round-trips); the fetches below revalidate it.
+    const initial = useMemo(() => readInitialSpaContent(apiUrl), [apiUrl]);
+    const [labels, setLabels] = useState(initial?.labels ?? undefined);
+    const [content, setContent] = useState(initial?.content ?? undefined);
+    const latestRef = useRef({
+        labels: initial?.labels ?? undefined,
+        content: initial?.content ?? undefined,
+    });
     useEffect(() => {
         if (!apiUrl) {
             return;
         }
-        let cancelled = false;
-        const defaultLocale = getFimoDefaultLocale(config);
-        fetchLabelBundle(apiUrl, getFimoLocales(config), defaultLocale)
-            .then((bundle) => {
-            if (!cancelled) {
-                setLabels({ ...bundle, signature: bundleSignature(bundle) });
+        let disposed = false;
+        const persist = () => {
+            writeSpaContentCache(apiUrl, { labels: latestRef.current.labels, content: latestRef.current.content });
+        };
+        const revalidate = () => {
+            const defaultLocale = getFimoDefaultLocale(config);
+            fetchLabelBundle(apiUrl, getFimoLocales(config), defaultLocale)
+                .then((bundle) => {
+                if (!disposed) {
+                    const next = { ...bundle, signature: bundleSignature(bundle) };
+                    latestRef.current.labels = next;
+                    setLabels(next);
+                    persist();
+                }
+            })
+                .catch(() => {
+                // Unreachable API: keep rendering the cached/baked values or fallbacks.
+            });
+            // Wrapped rich text and media live in the plumbing types — without this
+            // fetch a client-rendered app only ever shows their inline fallbacks
+            // and Studio edits to them render nowhere.
+            fetchWrappedContent(apiUrl)
+                .then((fetched) => {
+                if (!disposed) {
+                    latestRef.current.content = fetched;
+                    setContent(fetched);
+                    persist();
+                }
+            })
+                .catch(() => {
+                // Unreachable API: keep rendering the cached/baked values or fallbacks.
+            });
+        };
+        revalidate();
+        // Live updates, no refresh needed:
+        // 1. Inside the Fimo Studio preview, every save posts
+        //    `{ type: 'content/refresh' }` into the iframe — refetch on the spot
+        //    (same contract the template runtime's RefreshContentProvider uses).
+        // 2. In a plain tab, coming back to the site (alt-tab from the Studio)
+        //    revalidates on focus/visibility — edits appear without a reload.
+        let lastRun = Date.now();
+        const throttledRevalidate = () => {
+            if (Date.now() - lastRun < 1500) {
+                return;
+            }
+            lastRun = Date.now();
+            revalidate();
+        };
+        const onMessage = (event) => {
+            if (event.data?.type === 'content/refresh') {
+                lastRun = Date.now();
+                revalidate();
             }
-        })
-            .catch(() => {
-            // Unreachable API: keep rendering the inline fallbacks.
-        });
+        };
+        const onVisibility = () => {
+            if (document.visibilityState === 'visible') {
+                throttledRevalidate();
+            }
+        };
+        window.addEventListener('message', onMessage);
+        window.addEventListener('focus', throttledRevalidate);
+        document.addEventListener('visibilitychange', onVisibility);
         return () => {
-            cancelled = true;
+            disposed = true;
+            window.removeEventListener('message', onMessage);
+            window.removeEventListener('focus', throttledRevalidate);
+            document.removeEventListener('visibilitychange', onVisibility);
         };
     }, [apiUrl, config]);
+    // Explicitly-passed maps win over the fetched ones (caller override).
+    const mergedMedia = useMemo(() => (content?.media || media ? { ...(content?.media ?? {}), ...(media ?? {}) } : undefined), [content?.media, media]);
+    const mergedRichText = useMemo(() => (content?.richText || richText ? { ...(content?.richText ?? {}), ...(richText ?? {}) } : undefined), [content?.richText, richText]);
     const navigation = useMemo(() => ({
         pathname: typeof window !== 'undefined' ? window.location.pathname : null,
         navigate: (to) => {
             window.location.assign(to);
         },
     }), []);
-    return (_jsxs(WrappedProviders, { config: config, labels: labels, media: media, richText: richText, locale: locale, navigation: navigation, children: [previewScriptUrl ? _jsx("script", { type: "module", src: previewScriptUrl }) : null, children] }));
+    return (_jsxs(WrappedProviders, { config: config, labels: labels, media: mergedMedia, richText: mergedRichText, locale: locale, navigation: navigation, children: [previewScriptUrl ? _jsx("script", { type: "module", src: previewScriptUrl }) : null, children] }));
 }

package/dist/runtime/react/index.d.ts

@@ -30,4 +30,5 @@ export type { FimoLocaleResolution } from '../i18n/locale.js';
 export { getDisplayRoutes } from '../shared/display-routes.js';
 export type { DisplayRoute, ParamInfo } from '../shared/display-routes.js';
 export type { FimoConfig, FimoRouteConfig, FimoSEO } from '../shared/fimo-config.types.js';
+export { serializeFimoSpaContent } from './spa-content-cache.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/runtime/react/index.js

@@ -37,3 +37,4 @@ export { FimoLocaleProvider, useLocale } from '../i18n/FimoLocaleContext.js';
 export { getFimoDefaultLocale, getFimoLocales, getFimoTextDirection, localizeFimoPath, resolveFimoLocale, toHtmlLang, } from '../i18n/locale.js';
 // Config + routes
 export { getDisplayRoutes } from '../shared/display-routes.js';
+export { serializeFimoSpaContent } from './spa-content-cache.js';

package/dist/runtime/react/spa-content-cache.d.ts

@@ -0,0 +1,27 @@
+import type { WrappedContent } from '../wrapped/content-fetch.pure.js';
+import type { WrappedLabels } from '../wrapped/WrappedProviders.js';
+/**
+ * Instant first paint for client-rendered wrapped apps: the SDK controls
+ * rendering, so it never has to flash fallbacks while the network round
+ * trips. Two synchronous sources, in priority order:
+ *
+ * 1. `window.__FIMO_CONTENT__` — baked by the site's SSG/prerender step
+ *    (`serializeFimoSpaContent`), zero flash even on the first ever visit;
+ * 2. the last fetched payload cached in localStorage — instant from the
+ *    second visit on, revalidated in the background (stale-while-revalidate).
+ */
+export interface SpaContentPayload {
+    labels?: WrappedLabels;
+    content?: WrappedContent;
+}
+declare global {
+    interface Window {
+        __FIMO_CONTENT__?: SpaContentPayload;
+    }
+}
+export declare function readInitialSpaContent(apiUrl: string | undefined): SpaContentPayload | null;
+export declare function writeSpaContentCache(apiUrl: string, payload: SpaContentPayload): void;
+/** SSG helper: a script tag baking the payload into prerendered HTML so the
+ *  provider hydrates it synchronously — zero content flash. */
+export declare function serializeFimoSpaContent(payload: SpaContentPayload): string;
+//# sourceMappingURL=spa-content-cache.d.ts.map

package/dist/runtime/react/spa-content-cache.js

@@ -0,0 +1,36 @@
+const CACHE_PREFIX = 'fimo:spa-content:';
+export function readInitialSpaContent(apiUrl) {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    if (window.__FIMO_CONTENT__ && typeof window.__FIMO_CONTENT__ === 'object') {
+        return window.__FIMO_CONTENT__;
+    }
+    if (!apiUrl) {
+        return null;
+    }
+    try {
+        const raw = window.localStorage.getItem(CACHE_PREFIX + apiUrl);
+        return raw ? JSON.parse(raw) : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function writeSpaContentCache(apiUrl, payload) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        window.localStorage.setItem(CACHE_PREFIX + apiUrl, JSON.stringify(payload));
+    }
+    catch {
+        // Quota/private mode: the cache is an optimization, never a requirement.
+    }
+}
+/** SSG helper: a script tag baking the payload into prerendered HTML so the
+ *  provider hydrates it synchronously — zero content flash. */
+export function serializeFimoSpaContent(payload) {
+    const json = JSON.stringify(payload).replace(/</g, '\\u003c');
+    return `<script>window.__FIMO_CONTENT__=${json}</script>`;
+}

package/dist/runtime/wrapped/FimoRichTextBlock.d.ts

@@ -7,6 +7,9 @@ interface FimoRichTextBlockProps {
     children?: ReactNode;
     components?: FimoRichTextComponents;
     className?: string;
+    /** Wrapper element — `span` when the block sits inside a `<p>` (a div
+     *  there is invalid HTML and breaks hydration). */
+    as?: 'div' | 'span';
 }
 /**
  * Wraps formatted text (bold, italic, underline, links) so it becomes
@@ -18,6 +21,6 @@ interface FimoRichTextBlockProps {
  *     <p>We help teams <strong>ship faster</strong> and <em>stay safe</em>.</p>
  *   </FimoRichTextBlock>
  */
-export declare function FimoRichTextBlock({ id, children, components, className }: FimoRichTextBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function FimoRichTextBlock({ id, children, components, className, as }: FimoRichTextBlockProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FimoRichTextBlock.d.ts.map

package/dist/runtime/wrapped/FimoRichTextBlock.js

@@ -13,10 +13,10 @@ import { useWrappedRichText } from './WrappedContentContext.js';
  *     <p>We help teams <strong>ship faster</strong> and <em>stay safe</em>.</p>
  *   </FimoRichTextBlock>
  */
-export function FimoRichTextBlock({ id, children, components, className }) {
+export function FimoRichTextBlock({ id, children, components, className, as }) {
     const entry = useWrappedRichText(id);
     if (!entry) {
         return _jsx(_Fragment, { children: children });
     }
-    return (_jsx(RichText, { value: new FimoRichText(entry.content, entry.source), components: components, className: className }));
+    return (_jsx(RichText, { value: new FimoRichText(entry.content, entry.source), components: components, className: className, as: as }));
 }

package/dist/runtime/wrapped/content-fetch.pure.d.ts

@@ -0,0 +1,20 @@
+import type { WrappedMediaEntry, WrappedRichTextEntry } from './WrappedContentContext.js';
+export interface WrappedEntryRow {
+    id: string;
+    data: Record<string, unknown>;
+}
+/** Every published row of a content type, paginated to the end. Returns []
+ *  when the API is unreachable so wrapped sites keep their fallbacks. */
+export declare function fetchAllWrappedRows(apiUrl: string, typeName: string): Promise<WrappedEntryRow[]>;
+/** WrappedMedia rows → key → media entry (the FimoMediaImage/Video id map). */
+export declare function mapWrappedMedia(rows: WrappedEntryRow[]): Record<string, WrappedMediaEntry>;
+/** WrappedRichText rows → key → TipTap content (the FimoRichTextBlock map). */
+export declare function mapWrappedRichText(rows: WrappedEntryRow[]): Record<string, WrappedRichTextEntry>;
+export interface WrappedContent {
+    media: Record<string, WrappedMediaEntry>;
+    richText: Record<string, WrappedRichTextEntry>;
+}
+/** Both plumbing maps in one round: what a client-rendered wrapped app needs
+ *  so Studio edits to rich text and media are LIVE, not fallback-only. */
+export declare function fetchWrappedContent(apiUrl: string): Promise<WrappedContent>;
+//# sourceMappingURL=content-fetch.pure.d.ts.map

package/dist/runtime/wrapped/content-fetch.pure.js

@@ -0,0 +1,106 @@
+// Wrapped-content fetching, PURE core: fetch/URL/AbortController only — no
+// node builtins, importable from client-bundled code (the SPA provider) and
+// from the server loaders alike. The plumbing types (WrappedRichText,
+// WrappedMedia) hold ALL of a site's wrapped rich text and media, so the
+// fetch PAGINATES to the end — the tenant API caps limit at 100 and a real
+// site exceeds it (the Fimo site carries 147 rich-text entries).
+import { fetchWithTimeout } from '../shared/labels-fetch.pure.js';
+const PAGE_LIMIT = 100;
+const MAX_ROWS = 5000;
+function readString(value) {
+    return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+function readNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+/** Every published row of a content type, paginated to the end. Returns []
+ *  when the API is unreachable so wrapped sites keep their fallbacks. */
+export async function fetchAllWrappedRows(apiUrl, typeName) {
+    const rows = [];
+    try {
+        for (let offset = 0; offset < MAX_ROWS; offset += PAGE_LIMIT) {
+            const url = new URL(`/entries/${typeName}`, apiUrl);
+            url.searchParams.set('limit', String(PAGE_LIMIT));
+            url.searchParams.set('offset', String(offset));
+            const response = await fetchWithTimeout(url, 4000);
+            if (!response.ok) {
+                break;
+            }
+            const body = (await response.json());
+            const page = Array.isArray(body.data) ? body.data : [];
+            for (const row of page) {
+                if (!row || typeof row !== 'object') {
+                    continue;
+                }
+                const record = row;
+                const id = String(record.id ?? record.documentId ?? '');
+                if (id.length === 0) {
+                    continue;
+                }
+                rows.push({
+                    id,
+                    data: (record.data && typeof record.data === 'object' ? record.data : record),
+                });
+            }
+            const hasMore = body.meta?.hasMore === true || page.length === PAGE_LIMIT;
+            if (!hasMore) {
+                break;
+            }
+        }
+    }
+    catch {
+        // Unreachable API mid-pagination: return what we have (possibly []).
+    }
+    return rows;
+}
+/** WrappedMedia rows → key → media entry (the FimoMediaImage/Video id map). */
+export function mapWrappedMedia(rows) {
+    const map = {};
+    for (const entry of rows) {
+        const key = readString(entry.data.key) ?? readString(entry.data.slug);
+        const asset = entry.data.image;
+        if (!key || !asset || typeof asset !== 'object') {
+            continue;
+        }
+        const assetRecord = asset;
+        const url = readString(assetRecord.url);
+        if (!url) {
+            continue;
+        }
+        map[key] = {
+            url,
+            alt: readString(assetRecord.alt) ?? readString(entry.data.alt),
+            name: readString(assetRecord.name),
+            mime: readString(assetRecord.mime) ?? readString(assetRecord.mimeType),
+            width: readNumber(assetRecord.width),
+            height: readNumber(assetRecord.height),
+            source: `WrappedMedia.${entry.id}.image`,
+        };
+    }
+    return map;
+}
+/** WrappedRichText rows → key → TipTap content (the FimoRichTextBlock map). */
+export function mapWrappedRichText(rows) {
+    const map = {};
+    for (const entry of rows) {
+        const key = readString(entry.data.key) ?? readString(entry.data.slug);
+        const body = entry.data.body;
+        if (!key || !body || typeof body !== 'object') {
+            continue;
+        }
+        map[key] = {
+            content: body,
+            source: `WrappedRichText.${entry.id}.body`,
+        };
+    }
+    return map;
+}
+/** Both plumbing maps in one round: what a client-rendered wrapped app needs
+ *  so Studio edits to rich text and media are LIVE, not fallback-only. */
+export async function fetchWrappedContent(apiUrl) {
+    const [mediaRows, richTextRows] = await Promise.all([
+        fetchAllWrappedRows(apiUrl, 'WrappedMedia'),
+        fetchAllWrappedRows(apiUrl, 'WrappedRichText'),
+    ]);
+    return { media: mapWrappedMedia(mediaRows), richText: mapWrappedRichText(richTextRows) };
+}

package/dist/runtime/wrapped/server.d.ts

@@ -39,12 +39,15 @@ export declare function fetchEntries(typeName: string, options?: FimoServerOptio
 /**
  * Load the WrappedMedia entries (key → media) seeded by the wrap migration.
  * Each entry has a `key` (the FimoMediaImage/Video/FileLink id) and an
- * asset-typed `image` field.
+ * asset-typed `image` field. Paginates to the end — a site's wrapped media
+ * routinely exceeds one API page.
  */
 export declare function loadWrappedMedia(options?: FimoServerOptions): Promise<Record<string, WrappedMediaEntry>>;
 /**
  * Load the WrappedRichText entries (key → TipTap JSON) seeded by the wrap
- * migration for formatted text (bold/italic/underline/links).
+ * migration for formatted text (bold/italic/underline/links). Paginates to
+ * the end — the Fimo site alone carries 147 entries against a 20-row API
+ * default page.
  */
 export declare function loadWrappedRichText(options?: FimoServerOptions): Promise<Record<string, WrappedRichTextEntry>>;
 /**

package/dist/runtime/wrapped/server.js

@@ -5,6 +5,7 @@
 import { getConfigServer } from '../shared/fimo-config.server.js';
 import { deepMergeMessages, unflattenMessages } from '../shared/i18n-messages.js';
 import { fetchLabelDictionary, fetchWithTimeout, labelSignature, loadLabelBundle, readProjectEnv, resolveTenantApiUrl, } from '../shared/labels-fetch.server.js';
+import { fetchAllWrappedRows, mapWrappedMedia, mapWrappedRichText } from './content-fetch.pure.js';
 export function loadFimoConfig(rootDir = process.cwd()) {
     return getConfigServer(rootDir);
 }
@@ -72,62 +73,31 @@ export async function fetchEntries(typeName, options = {}) {
         return [];
     }
 }
-function readString(value) {
-    return typeof value === 'string' && value.length > 0 ? value : undefined;
-}
-function readNumber(value) {
-    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
-}
 /**
  * Load the WrappedMedia entries (key → media) seeded by the wrap migration.
  * Each entry has a `key` (the FimoMediaImage/Video/FileLink id) and an
- * asset-typed `image` field.
+ * asset-typed `image` field. Paginates to the end — a site's wrapped media
+ * routinely exceeds one API page.
  */
 export async function loadWrappedMedia(options = {}) {
-    const entries = await fetchEntries('WrappedMedia', options);
-    const map = {};
-    for (const entry of entries) {
-        const key = readString(entry.data.key) ?? readString(entry.data.slug);
-        const asset = entry.data.image;
-        if (!key || !asset || typeof asset !== 'object') {
-            continue;
-        }
-        const assetRecord = asset;
-        const url = readString(assetRecord.url);
-        if (!url) {
-            continue;
-        }
-        map[key] = {
-            url,
-            alt: readString(assetRecord.alt) ?? readString(entry.data.alt),
-            name: readString(assetRecord.name),
-            mime: readString(assetRecord.mime) ?? readString(assetRecord.mimeType),
-            width: readNumber(assetRecord.width),
-            height: readNumber(assetRecord.height),
-            source: `WrappedMedia.${entry.id}.image`,
-        };
-    }
-    return map;
+    const apiUrl = await resolveApiUrl(options);
+    if (!apiUrl) {
+        return {};
+    }
+    return mapWrappedMedia(await fetchAllWrappedRows(apiUrl, 'WrappedMedia'));
 }
 /**
  * Load the WrappedRichText entries (key → TipTap JSON) seeded by the wrap
- * migration for formatted text (bold/italic/underline/links).
+ * migration for formatted text (bold/italic/underline/links). Paginates to
+ * the end — the Fimo site alone carries 147 entries against a 20-row API
+ * default page.
  */
 export async function loadWrappedRichText(options = {}) {
-    const entries = await fetchEntries('WrappedRichText', options);
-    const map = {};
-    for (const entry of entries) {
-        const key = readString(entry.data.key) ?? readString(entry.data.slug);
-        const body = entry.data.body;
-        if (!key || !body || typeof body !== 'object') {
-            continue;
-        }
-        map[key] = {
-            content: body,
-            source: `WrappedRichText.${entry.id}.body`,
-        };
+    const apiUrl = await resolveApiUrl(options);
+    if (!apiUrl) {
+        return {};
     }
-    return map;
+    return mapWrappedRichText(await fetchAllWrappedRows(apiUrl, 'WrappedRichText'));
 }
 /** Key fields tried, in order, to align a source row with its Fimo entry. */
 const COLLECTION_KEY_FIELDS = ['slug', 'id', 'key', 'name', 'title', 'question'];

package/dist/scripts/apply-wrap-templates.js

@@ -66,7 +66,7 @@ export function applyTemplateWrapToFile(code, style, items, allocator) {
             continue;
         }
         const collapsed = match[2].replace(/\s+/g, ' ').trim();
-        const id = allocator.allocate(scope || 'shared', slugify(collapsed));
+        const id = allocator.allocate(scope || 'shared', slugify(decodeJsxEntities(collapsed)));
         const escaped = collapsed.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
         const replacement = `>${match[1]}${style.open}"${id}", "${escaped}"${style.close}${match[3]}<`;
         next = next.slice(0, match.index) + replacement + next.slice(match.index + match[0].length);

package/dist/scripts/apply-wrap.js

@@ -33,10 +33,27 @@ const JSX_ENTITIES = {
     ''': "'",
     ' ': ' ',
     '©': '©',
+    '®': '®',
+    '™': '™',
+    '°': '°',
+    '·': '·',
+    '•': '•',
+    '…': '…',
+    '—': '—',
+    '–': '–',
+    '‘': '‘',
+    '’': '’',
+    '“': '“',
+    '”': '”',
+    '«': '«',
+    '»': '»',
+    '×': '×',
+    '→': '→',
+    '←': '←',
 };
 export function decodeJsxEntities(text) {
     return text
-        .replace(/&(amp|lt|gt|quot|apos|nbsp|copy);/g, (entity) => JSX_ENTITIES[entity] ?? entity)
+        .replace(/&(amp|lt|gt|quot|apos|nbsp|copy|reg|trade|deg|middot|bull|hellip|mdash|ndash|lsquo|rsquo|ldquo|rdquo|laquo|raquo|times|rarr|larr);/g, (entity) => JSX_ENTITIES[entity] ?? entity)
         .replace(/&#(\d+);/g, (_, code) => String.fromCodePoint(Number(code)))
         .replace(/&#x([0-9a-f]+);/gi, (_, code) => String.fromCodePoint(parseInt(code, 16)));
 }
@@ -62,7 +79,12 @@ export function keyScope(file) {
     return slugify(stem) || 'shared';
 }
 export function slugify(text) {
+    // camelCase boundaries become segments BEFORE lowercasing, so component
+    // file names keep their word structure (AgentStrip.tsx → agent-strip.*)
+    // and every humanized display of the key reads like the component name.
     return collapse(text)
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
         .toLowerCase()
         .normalize('NFD')
         .replace(/[̀-ͯ]/g, '')
@@ -154,7 +176,9 @@ export function applyWrapToFile(code, items, allocator, importModule = 'fimo/nex
             }
             const lead = raw.slice(0, raw.indexOf(core));
             const trail = raw.slice(raw.indexOf(core) + core.length);
-            const id = allocator.allocate(scope, slugify(core));
+            // Slug from the DECODED text — "'" must never leak "apos" into a
+            // key ("today-apos-s-total" read "Today Apos S Total" in the Studio).
+            const id = allocator.allocate(scope, slugify(decodeJsxEntities(core)));
             edits.push({
                 start: span.start,
                 end: span.end,

package/dist/scripts/cms/strapi/wiring.js

@@ -35,7 +35,7 @@ const SINGLETONS = [${singletons.map((name) => `'${name}'`).join(', ')}];
 
 // Structural field shapes (single components read as objects; block items and
 // dynamic zones reshape into the Strapi shape the components expect).
-const FIELD_SHAPES = ${fieldShapes};
+const FIELD_SHAPES = ${fieldShapes} as const;
 
 export const fimoStrapiFetch = createFimoStrapiFetch({
   types: TYPES,

package/dist/scripts/detect-framework.js

@@ -18,6 +18,12 @@ export function detectFramework(cwd) {
         return { framework: null };
     }
     const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    // A CMS backend is never an adoptable frontend — Strapi 5 ships vite+react
+    // devDeps for its admin panel, which the bare-vite fallback would match
+    // (the sandbox/website monorepo suggested `fimo init apps/strapi`).
+    if (deps['@strapi/strapi']) {
+        return { framework: null };
+    }
     if (deps.next) {
         const appDir = ['app', 'src/app'].find((dir) => existsSync(join(cwd, dir)));
         const pagesDir = ['pages', 'src/pages'].find((dir) => existsSync(join(cwd, dir)));