fimo 0.8.0 → 0.9.0-experimental.10

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

@@ -1,15 +1,5 @@
 import React from 'react';
-export interface ParamInfo {
-    schema: string;
-    queryField: string;
-    displayField: string;
-}
-export interface DisplayRoute {
-    id: string;
-    name: string;
-    path: string;
-    params?: Record<string, ParamInfo>;
-}
+export type { DisplayRoute, ParamInfo } from '../shared/display-routes.js';
 export interface FimoProvidersProps {
     children?: React.ReactNode;
     locale?: string;

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
@@ -11,31 +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 { getDisplayRoutes as getDisplayRoutesFromConfig } from '../shared/display-routes.js';
 import { OptionalTracking } from '../t/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);
-};
 function getDisplayRoutes() {
-    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,
-    }));
+    return getDisplayRoutesFromConfig(fimoConfig);
 }
 function PreviewBridge() {
     const navigate = useNavigate();
@@ -80,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]);
@@ -92,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/astro/index.d.ts

@@ -0,0 +1,2 @@
+export * from './server.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/runtime/astro/index.js

@@ -0,0 +1,3 @@
+// fimo/astro — see ./server.js (Astro is server-loader + DOM-attrs based;
+// no client component set in v1).
+export * from './server.js';

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

@@ -0,0 +1,3 @@
+export * from '../wrapped/server.js';
+export { fimoLabelAttrs, fimoMediaAttrs } from '../wrapped/dom.js';
+//# sourceMappingURL=server.d.ts.map

package/dist/runtime/astro/server.js

@@ -0,0 +1,6 @@
+// fimo/astro/server — Astro adapter, server surface. The loaders are
+// framework-neutral (Astro needs no React): call them in server-side code
+// (frontmatter / load functions / useAsyncData) and render values with the
+// DOM attribute helpers so edit mode can select the elements.
+export * from '../wrapped/server.js';
+export { fimoLabelAttrs, fimoMediaAttrs } from '../wrapped/dom.js';

package/dist/runtime/content/client/internal.js

@@ -179,6 +179,7 @@ function wrapReference(value, uid, resolve) {
 function wrapField(field, value, source, resolve) {
     switch (field.type) {
         case 'string':
+        case 'text':
             return value != null ? new FimoString(value, source) : value;
         case 'richtext':
             return value != null ? new FimoRichText(value, source) : value;

package/dist/runtime/content/client/types.d.ts

@@ -18,6 +18,7 @@ export type ContentResult<T extends {
 export interface ContentSchemaField {
     type?: string;
     required?: boolean;
+    default?: unknown;
     /** Media fields: multiple assets. */
     multiple?: boolean;
     /** Reference fields: to-many. */
@@ -26,6 +27,21 @@ export interface ContentSchemaField {
     target?: string;
     /** Polymorphic reference fields: allowed target schema uids. */
     targets?: readonly string[];
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    regex?: string;
+    schema?: {
+        fields: Readonly<Record<string, ContentSchemaField>>;
+    } | {
+        oneOf: readonly {
+            uid: string;
+            label: string;
+            description?: string;
+            fields: Readonly<Record<string, ContentSchemaField>>;
+        }[];
+    };
 }
 export interface ContentSchema {
     uid: string;

package/dist/runtime/core/BuiltWithBadge.d.ts

@@ -0,0 +1,2 @@
+export declare function BuiltWithBadge(): import("react").ReactPortal | null;
+//# sourceMappingURL=BuiltWithBadge.d.ts.map

package/dist/runtime/core/BuiltWithBadge.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+const STORAGE_KEY = 'fimoBadgeDismissed';
+export function BuiltWithBadge() {
+    const hideFimoBadge = __FIMO_HIDE_BADGE__;
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        try {
+            const dismissed = sessionStorage.getItem(STORAGE_KEY) === 'true';
+            setVisible(!dismissed);
+        }
+        catch {
+            setVisible(true);
+        }
+    }, []);
+    if (hideFimoBadge) {
+        return null;
+    } // hide fimo badge config
+    // @ts-ignore
+    if (!import.meta.env.PROD) {
+        return null;
+    } // only show in prod
+    if (!visible) {
+        return null;
+    }
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    return createPortal(_jsx("div", { style: {
+            position: 'fixed',
+            right: '16px',
+            bottom: '16px',
+            zIndex: 100000,
+            margin: 0,
+        }, children: _jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                borderRadius: '9999px',
+                color: '#fff',
+                boxShadow: '0 12px 30px rgba(0, 0, 0, 0.35)',
+                padding: '8px 12px',
+                fontSize: '12px',
+                lineHeight: 1.2,
+                backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                fontFamily: 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif',
+            }, children: [_jsxs("a", { href: "https://fimo.ai", target: "_blank", rel: "noopener noreferrer", style: {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        color: '#fff',
+                        textDecoration: 'none',
+                    }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 12", fill: "none", children: _jsx("path", { d: "M22.8569 4.85715H14.9866L15.9132 3.58186C16.5027 2.77062 17.4534 2.28627 18.4561 2.28627H22.8569C23.4882 2.28627 23.9999 1.7745 23.9999 1.14328C23.9999 0.512061 23.4884 0 22.8569 0H18.4561C16.7239 0 15.082 0.836671 14.0639 2.23798L12.1611 4.85715H6.9979C5.2657 4.85715 3.62379 5.69382 2.60567 7.09513L0.360255 10.1852C-0.0109321 10.6958 0.10251 11.4108 0.613142 11.7817C0.816023 11.9291 1.05119 12 1.28408 12C1.63755 12 1.98616 11.8366 2.20962 11.5288L4.45474 8.43872C5.04424 7.62748 5.99493 7.14314 6.99762 7.14314H10.5L8.28977 10.1852C7.91858 10.6958 8.03203 11.4108 8.54266 11.7817C8.74554 11.9291 8.98071 12 9.2136 12C9.56707 12 9.91568 11.8366 10.1391 11.5288L12.3843 8.43872C12.9738 7.62748 13.9244 7.14314 14.9271 7.14314H22.8566C23.4879 7.14314 23.9996 6.63136 23.9996 6.00014C23.9996 5.36893 23.4879 4.85715 22.8566 4.85715H22.8569Z", fill: "white" }) }), _jsx("span", { style: { fontWeight: 600 }, children: "Built with Fimo" })] }), _jsx("button", { "aria-label": "Dismiss badge", style: {
+                        color: '#ddd',
+                        background: 'transparent',
+                        cursor: 'pointer',
+                        border: 'none',
+                        padding: 0,
+                        lineHeight: 0,
+                    }, onClick: () => {
+                        try {
+                            sessionStorage.setItem(STORAGE_KEY, 'true');
+                        }
+                        catch { }
+                        setVisible(false);
+                    }, type: "button", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) })] }) }), document.body);
+}

package/dist/runtime/i18n/FimoLocaleContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 const fallbackLocale = {

package/dist/runtime/next/FimoNextProviders.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { FimoConfig } from '../shared/fimo-config.types.js';
+import type { WrappedMediaEntry, WrappedRichTextEntry } from '../wrapped/WrappedContentContext.js';
+import { type WrappedLabels } from '../wrapped/WrappedProviders.js';
+export type FimoNextLabels = WrappedLabels;
+export interface FimoNextProvidersProps {
+    config: FimoConfig;
+    labels?: FimoNextLabels;
+    media?: Record<string, WrappedMediaEntry>;
+    richText?: Record<string, WrappedRichTextEntry>;
+    locale?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Fimo providers for wrapped Next.js apps — the Next adapter supplies only
+ * the navigation hooks; everything else lives in the framework-neutral
+ * WrappedProviders. Mount once in the root layout:
+ *
+ *   const config = loadFimoConfig();
+ *   const labels = await loadFimoLabels();
+ *   <FimoNextProviders config={config} labels={labels}>{children}</FimoNextProviders>
+ */
+export declare function FimoNextProviders(props: FimoNextProvidersProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FimoNextProviders.d.ts.map

package/dist/runtime/next/FimoNextProviders.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname, useRouter } from 'next/navigation';
+import { useMemo } from 'react';
+import { WrappedProviders } from '../wrapped/WrappedProviders.js';
+/**
+ * Fimo providers for wrapped Next.js apps — the Next adapter supplies only
+ * the navigation hooks; everything else lives in the framework-neutral
+ * WrappedProviders. Mount once in the root layout:
+ *
+ *   const config = loadFimoConfig();
+ *   const labels = await loadFimoLabels();
+ *   <FimoNextProviders config={config} labels={labels}>{children}</FimoNextProviders>
+ */
+export function FimoNextProviders(props) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const navigation = useMemo(() => ({ pathname, navigate: (to) => router.push(to) }), [pathname, router]);
+    return _jsx(WrappedProviders, { ...props, navigation: navigation });
+}

package/dist/runtime/next/FimoNextScripts.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Renders the Fimo preview client script in development so the Fimo Studio
+ * preview can select/edit elements. Mount inside <head> in the root layout.
+ *
+ * The script URL comes from NEXT_PUBLIC_FIMO_PREVIEW_SCRIPT_URL (written by
+ * `fimo init` for wrapped projects, pointing at `<apiUrl>/preview.js`).
+ * Renders nothing in production builds.
+ */
+export declare function FimoNextScripts(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FimoNextScripts.d.ts.map

package/dist/runtime/next/FimoNextScripts.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Renders the Fimo preview client script in development so the Fimo Studio
+ * preview can select/edit elements. Mount inside <head> in the root layout.
+ *
+ * The script URL comes from NEXT_PUBLIC_FIMO_PREVIEW_SCRIPT_URL (written by
+ * `fimo init` for wrapped projects, pointing at `<apiUrl>/preview.js`).
+ * Renders nothing in production builds.
+ */
+export function FimoNextScripts() {
+    if (process.env.NODE_ENV !== 'development') {
+        return null;
+    }
+    const previewScriptUrl = process.env.NEXT_PUBLIC_FIMO_PREVIEW_SCRIPT_URL;
+    if (!previewScriptUrl) {
+        return null;
+    }
+    return _jsx("script", { type: "module", src: previewScriptUrl });
+}

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

@@ -0,0 +1,14 @@
+export { FimoNextProviders } from './FimoNextProviders.js';
+export type { FimoNextLabels, FimoNextProvidersProps } from './FimoNextProviders.js';
+export { FimoNextScripts } from './FimoNextScripts.js';
+export { FimoText } from '../wrapped/FimoText.js';
+export { FimoRichTextBlock } from '../wrapped/FimoRichTextBlock.js';
+export { FimoMediaImage } from '../wrapped/FimoMediaImage.js';
+export { FimoMediaVideo } from '../wrapped/FimoMediaVideo.js';
+export { FimoFileLink } from '../wrapped/FimoFileLink.js';
+export { useWrappedMedia, useWrappedRichText } from '../wrapped/WrappedContentContext.js';
+export type { WrappedMediaEntry, WrappedRichTextEntry } from '../wrapped/WrappedContentContext.js';
+export { useLabels, useTranslations } from '../primitives/labels-hook.js';
+export { Text, Image, Video, RichText } from '../react/index.js';
+export type { FimoConfig } from '../shared/fimo-config.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/runtime/next/index.js

@@ -0,0 +1,14 @@
+// fimo/next — the Next.js adapter for wrapped (migrated) sites.
+// Client components; server loaders live in fimo/next/server.
+export { FimoNextProviders } from './FimoNextProviders.js';
+export { FimoNextScripts } from './FimoNextScripts.js';
+export { FimoText } from '../wrapped/FimoText.js';
+export { FimoRichTextBlock } from '../wrapped/FimoRichTextBlock.js';
+export { FimoMediaImage } from '../wrapped/FimoMediaImage.js';
+export { FimoMediaVideo } from '../wrapped/FimoMediaVideo.js';
+export { FimoFileLink } from '../wrapped/FimoFileLink.js';
+export { useWrappedMedia, useWrappedRichText } from '../wrapped/WrappedContentContext.js';
+// Framework-neutral React surface, re-exported for convenience so wrapped
+// apps import everything from fimo/next.
+export { useLabels, useTranslations } from '../primitives/labels-hook.js';
+export { Text, Image, Video, RichText } from '../react/index.js';

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

@@ -0,0 +1,2 @@
+export * from '../wrapped/server.js';
+//# sourceMappingURL=server.d.ts.map

package/dist/runtime/next/server.js

@@ -0,0 +1,4 @@
+// fimo/next/server — the Next.js adapter's server surface. The loaders are
+// framework-neutral and live in ../wrapped/server.js; this module is the
+// adapter-facing entry so future adapters (fimo/astro) mirror it.
+export * from '../wrapped/server.js';

package/dist/runtime/nuxt/composables.d.ts

@@ -0,0 +1,9 @@
+export declare function useFimoLabels(locale?: string): Promise<Record<string, string>>;
+/**
+ * Server-loaded, hydration-safe label accessor for `<script setup>`:
+ *
+ *   const t = await useFimoT();
+ *   <h1 v-bind="fimoLabelAttrs('hero.title')">{{ t('hero.title', 'Fallback') }}</h1>
+ */
+export declare function useFimoT(locale?: string): Promise<(key: string, fallback?: string) => string>;
+//# sourceMappingURL=composables.d.ts.map

package/dist/runtime/nuxt/composables.js

@@ -0,0 +1,57 @@
+// Nuxt composables over the PURE label-fetch core. Constraints proven by the
+// nuxtship dogfood, in order:
+//  - no node builtins anywhere in this module graph (`<script setup>` imports
+//    land in the client bundle; named imports from externalized builtins hard-
+//    fail `nuxt build`);
+//  - no `#app` import (Vite's dep optimizer prebundles node_modules with no
+//    knowledge of Nuxt aliases);
+//  - no `nuxt/app` import either (server-side the package is a nitro external
+//    resolved by raw node, where nuxt/app's internal `#build/*` imports do not
+//    exist).
+// So: import only from 'vue', reach the Nuxt app via the current component
+// instance, and hand labels to the client through `nuxtApp.payload.data` —
+// the exact bucket useAsyncData serializes into the page payload.
+import { getCurrentInstance } from 'vue';
+import { fetchLabelDictionary, resolveTenantApiUrl } from '../shared/labels-fetch.pure.js';
+function currentNuxtApp() {
+    const instance = getCurrentInstance();
+    const vueApp = instance?.appContext?.app;
+    return vueApp?.$nuxt ?? vueApp?.config?.globalProperties?.$nuxt ?? instance?.proxy?.$nuxt;
+}
+export async function useFimoLabels(locale = 'en') {
+    const key = `__fimo_labels_${locale}`;
+    const payloadData = currentNuxtApp()?.payload?.data;
+    const cached = payloadData?.[key];
+    if (cached) {
+        return cached;
+    }
+    // `typeof window` (not import.meta.server): as a nitro external this module
+    // runs as plain node ESM where Nuxt's import.meta flags do not exist.
+    if (typeof window !== 'undefined') {
+        return {};
+    }
+    const apiUrl = resolveTenantApiUrl(process.env);
+    if (!apiUrl) {
+        return {};
+    }
+    try {
+        const { labels } = await fetchLabelDictionary(apiUrl, locale);
+        if (payloadData) {
+            payloadData[key] = labels;
+        }
+        return labels;
+    }
+    catch {
+        return {};
+    }
+}
+/**
+ * Server-loaded, hydration-safe label accessor for `<script setup>`:
+ *
+ *   const t = await useFimoT();
+ *   <h1 v-bind="fimoLabelAttrs('hero.title')">{{ t('hero.title', 'Fallback') }}</h1>
+ */
+export async function useFimoT(locale = 'en') {
+    const labels = await useFimoLabels(locale);
+    return (key, fallback = '') => labels[key] ?? fallback;
+}

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

@@ -0,0 +1,3 @@
+export { fimoLabelAttrs, fimoMediaAttrs, FIMO_SOURCE_ATTR } from '../wrapped/dom.js';
+export { useFimoLabels, useFimoT } from './composables.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/runtime/nuxt/index.js

@@ -0,0 +1,6 @@
+// fimo/nuxt — CLIENT-SAFE surface for universal Vue SFCs. Never re-export
+// the server barrel here: a `<script setup>` import lands in the client
+// bundle, and the server loaders read fs/env (the nuxtship dogfood broke
+// `nuxt build` exactly this way). Server routes import fimo/nuxt/server.
+export { fimoLabelAttrs, fimoMediaAttrs, FIMO_SOURCE_ATTR } from '../wrapped/dom.js';
+export { useFimoLabels, useFimoT } from './composables.js';

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

@@ -0,0 +1,3 @@
+export * from '../wrapped/server.js';
+export { fimoLabelAttrs, fimoMediaAttrs } from '../wrapped/dom.js';
+//# sourceMappingURL=server.d.ts.map

package/dist/runtime/nuxt/server.js

@@ -0,0 +1,6 @@
+// fimo/nuxt/server — Nuxt adapter, server surface. The loaders are
+// framework-neutral (Nuxt needs no React): call them in server-side code
+// (frontmatter / load functions / useAsyncData) and render values with the
+// DOM attribute helpers so edit mode can select the elements.
+export * from '../wrapped/server.js';
+export { fimoLabelAttrs, fimoMediaAttrs } from '../wrapped/dom.js';

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/primitives/labels-hook.d.ts

@@ -0,0 +1,33 @@
+import { FimoString } from './lib/index.js';
+/**
+ * Hook to provide a label function (`t`).
+ *
+ * Returns FimoString with source tracking for inline editing.
+ * Use with <Text> component for rendering, or String() for escape hatch.
+ *
+ * The optional `fallback` renders when the key has no value in the store —
+ * used by wrapped (migrated) projects where the original hardcoded string
+ * stays in code as a resilience fallback. Template projects keep the
+ * single-argument form (labels are DB-owned there).
+ *
+ * @example
+ * const { t } = useLabels();
+ *
+ * // With Text component (recommended)
+ * <Text value={t('welcome')} />
+ *
+ * // Escape hatch for attributes
+ * <input placeholder={String(t('email.placeholder'))} />
+ */
+export declare function useLabels(): {
+    t: (fullKey: string, fallback?: string) => FimoString;
+    locale: string;
+};
+/**
+ * Legacy alias for older projects. Prefer useLabels() in new code.
+ */
+export declare function useTranslations(): {
+    t: (fullKey: string, fallback?: string) => FimoString;
+    locale: string;
+};
+//# sourceMappingURL=labels-hook.d.ts.map

package/dist/runtime/primitives/labels-hook.js

@@ -0,0 +1,41 @@
+import { useSyncExternalStore } from 'react';
+import { useLocale } from '../i18n/FimoLocaleContext.js';
+import { getLabelSnapshot, subscribeLabels } from './labels-store.js';
+import { FimoString } from './lib/index.js';
+/**
+ * Hook to provide a label function (`t`).
+ *
+ * Returns FimoString with source tracking for inline editing.
+ * Use with <Text> component for rendering, or String() for escape hatch.
+ *
+ * The optional `fallback` renders when the key has no value in the store —
+ * used by wrapped (migrated) projects where the original hardcoded string
+ * stays in code as a resilience fallback. Template projects keep the
+ * single-argument form (labels are DB-owned there).
+ *
+ * @example
+ * const { t } = useLabels();
+ *
+ * // With Text component (recommended)
+ * <Text value={t('welcome')} />
+ *
+ * // Escape hatch for attributes
+ * <input placeholder={String(t('email.placeholder'))} />
+ */
+export function useLabels() {
+    const localeContext = useLocale();
+    const labels = useSyncExternalStore(subscribeLabels, getLabelSnapshot, getLabelSnapshot);
+    const t = (fullKey, fallback) => {
+        const locale = localeContext.locale || labels.defaultLocale || 'en';
+        const dictionary = labels.dictionaries[locale] ?? labels.dictionaries[labels.defaultLocale] ?? {};
+        const text = dictionary[fullKey] ?? fallback ?? '';
+        return new FimoString(text, `__labels.${locale}.${fullKey}.value`);
+    };
+    return { t, locale: localeContext.locale };
+}
+/**
+ * Legacy alias for older projects. Prefer useLabels() in new code.
+ */
+export function useTranslations() {
+    return useLabels();
+}

package/dist/runtime/primitives/labels-store.d.ts

@@ -0,0 +1,12 @@
+export interface LabelState {
+    dictionaries: Record<string, Record<string, string>>;
+    defaultLocale: string;
+    signature: string;
+    updatedAt: string | null;
+}
+export declare function subscribeLabels(listener: () => void): () => void;
+export declare function getLabelSnapshot(): LabelState;
+export declare function setLabelState(next: LabelState): void;
+export declare function hydrateLabels(bundle: LabelState): void;
+export declare function applyLabelUpdate(payload: unknown): void;
+//# sourceMappingURL=labels-store.d.ts.map

package/dist/runtime/primitives/labels-store.js

@@ -0,0 +1,60 @@
+// Framework-neutral label store. No Vite virtual modules, no HMR, no React:
+// adapters (fimo/ui via ./translations.ts, fimo/next, ...) hydrate it with
+// their own label source and the hook layer subscribes to it.
+const labelListeners = new Set();
+let labelState = {
+    dictionaries: {},
+    defaultLocale: 'en',
+    signature: '__fimo-labels-uninitialized__',
+    updatedAt: null,
+};
+export function subscribeLabels(listener) {
+    labelListeners.add(listener);
+    return () => {
+        labelListeners.delete(listener);
+    };
+}
+export function getLabelSnapshot() {
+    return labelState;
+}
+export function setLabelState(next) {
+    if (next.signature === labelState.signature) {
+        return;
+    }
+    labelState = next;
+    for (const listener of labelListeners) {
+        listener();
+    }
+}
+export function hydrateLabels(bundle) {
+    setLabelState(bundle);
+}
+function isRecord(value) {
+    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+function normalizeDictionaries(value) {
+    if (!isRecord(value)) {
+        return null;
+    }
+    const dictionaries = {};
+    for (const [locale, labels] of Object.entries(value)) {
+        if (!isRecord(labels)) {
+            continue;
+        }
+        dictionaries[locale] = Object.fromEntries(Object.entries(labels).filter((entry) => typeof entry[1] === 'string'));
+    }
+    return dictionaries;
+}
+export function applyLabelUpdate(payload) {
+    if (!isRecord(payload)) {
+        return;
+    }
+    const dictionaries = normalizeDictionaries(payload.dictionaries);
+    if (!dictionaries) {
+        return;
+    }
+    const defaultLocale = typeof payload.defaultLocale === 'string' ? payload.defaultLocale : labelState.defaultLocale;
+    const signature = typeof payload.signature === 'string' ? payload.signature : JSON.stringify({ dictionaries, defaultLocale });
+    const updatedAt = typeof payload.updatedAt === 'string' ? payload.updatedAt : null;
+    setLabelState({ dictionaries, defaultLocale, signature, updatedAt });
+}