fimo-react 0.21.0-experimental.1

package/dist/runtime/iframe/ScreenshotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const ScreenshotProvider: FC<PropsWithChildren>;
+//# sourceMappingURL=ScreenshotProvider.d.ts.map

package/dist/runtime/iframe/ScreenshotProvider.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIsFetching } from '@tanstack/react-query';
+import { useCallback, useEffect, useRef } from 'react';
+// Wait for all running CSS/JS animations to complete
+const waitForAnimations = async () => {
+    const animations = document.getAnimations();
+    if (animations.length === 0) {
+        return;
+    }
+    await Promise.all(animations.map((a) => a.finished.catch(() => { })));
+    // Small buffer for final paint after animations
+    await new Promise((r) => setTimeout(r, 100));
+};
+// This internal component tracks query status and signals when it's safe to screenshot.
+const ScreenshotReadySignaler = () => {
+    const isFetching = useIsFetching();
+    const hasSeenFetching = useRef(false);
+    const hasSignaledReady = useRef(false);
+    const fallbackTimerRef = useRef(null);
+    const signalReady = useCallback(async () => {
+        if (hasSignaledReady.current) {
+            return;
+        }
+        hasSignaledReady.current = true;
+        await waitForAnimations();
+        document.body.setAttribute('data-screenshot-ready', 'true');
+    }, []);
+    // This effect handles the primary logic for pages with data fetching.
+    useEffect(() => {
+        if (hasSignaledReady.current) {
+            return;
+        }
+        if (isFetching > 0) {
+            hasSeenFetching.current = true;
+            // A query is active, so we can clear the fallback timer.
+            if (fallbackTimerRef.current) {
+                clearTimeout(fallbackTimerRef.current);
+            }
+        }
+        if (hasSeenFetching.current && isFetching === 0) {
+            signalReady();
+        }
+    }, [isFetching, signalReady]);
+    // This effect sets up a fallback for static pages without queries.
+    useEffect(() => {
+        fallbackTimerRef.current = setTimeout(() => {
+            signalReady();
+        }, 1500); // Wait 1.5 seconds for static pages.
+        // Cleanup the timer on unmount.
+        return () => {
+            if (fallbackTimerRef.current) {
+                clearTimeout(fallbackTimerRef.current);
+            }
+        };
+    }, [signalReady]); // Run only once on mount.
+    return null;
+};
+export const ScreenshotProvider = ({ children }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ScreenshotReadySignaler, {}), children] }));
+};

package/dist/runtime/index.d.ts

@@ -0,0 +1,24 @@
+export { useLocale } from './i18n-context.js';
+export { localizeFimoPath, resolveFimoLocale } from 'fimo/config';
+export type { FimoLocaleContextValue } from './i18n-context.js';
+export type { FimoLocaleResolution } from 'fimo/config';
+export { DataSourcesProvider } from './content/DataSourcesProvider.js';
+export { RefreshContentProvider } from './content/RefreshContentProvider.js';
+export { parseCollectionResponse } from 'fimo/content';
+export type { CollectionResponse } from 'fimo/content';
+export { createContentClient } from './content/createContentClient.js';
+export { createSingletonClient } from './content/createSingletonClient.js';
+export { createReactContentClient } from './content/react-content-client.js';
+export { createReactSingletonClient } from './content/react-singleton-client.js';
+export { createFormClient, type FormClient, type FormSubmissionResult } from 'fimo/forms';
+export { Label } from './vite/Label.js';
+export type { LabelProps } from './vite/Label.js';
+export { useLabels, useTranslations } from './vite/translations.js';
+export declare const formClient: import("fimo/forms").FormClient;
+export type { CollectionContentClient, CollectionPage, CollectionPageInfo, ContentClientConfig, ContentClientHandle, ContentModuleMeta, ContentModuleRef, ContentReadOptions, ContentResult, ContentSchema, ContentSchemaField, InfiniteListResult, SingletonContentClient, } from './content/types.js';
+export { AppErrorBoundary } from './core/AppErrorBoundary.js';
+export { ViteLifecycles } from './core/ViteLifecycles.js';
+export { ConsoleErrorProvider } from './iframe/ConsoleErrorProvider.js';
+export { ScreenshotProvider } from './iframe/ScreenshotProvider.js';
+export * from './primitives.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/runtime/index.js

@@ -0,0 +1,24 @@
+import { createFormClient } from 'fimo/forms';
+import { viteContentRuntime } from './content/vite-runtime.js';
+// Locale
+export { useLocale } from './i18n-context.js';
+export { localizeFimoPath, resolveFimoLocale } from 'fimo/config';
+// Content
+export { DataSourcesProvider } from './content/DataSourcesProvider.js';
+export { RefreshContentProvider } from './content/RefreshContentProvider.js';
+export { parseCollectionResponse } from 'fimo/content';
+export { createContentClient } from './content/createContentClient.js';
+export { createSingletonClient } from './content/createSingletonClient.js';
+export { createReactContentClient } from './content/react-content-client.js';
+export { createReactSingletonClient } from './content/react-singleton-client.js';
+export { createFormClient } from 'fimo/forms';
+export { Label } from './vite/Label.js';
+export { useLabels, useTranslations } from './vite/translations.js';
+export const formClient = createFormClient(viteContentRuntime);
+// Core
+export { AppErrorBoundary } from './core/AppErrorBoundary.js';
+export { ViteLifecycles } from './core/ViteLifecycles.js';
+// Iframe
+export { ConsoleErrorProvider } from './iframe/ConsoleErrorProvider.js';
+export { ScreenshotProvider } from './iframe/ScreenshotProvider.js';
+export * from './primitives.js';

package/dist/runtime/internal.d.ts

@@ -0,0 +1,3 @@
+export { FimoLocaleProvider, useLocale } from './i18n-context.js';
+export { onError } from './core/AppErrorBoundary.js';
+//# sourceMappingURL=internal.d.ts.map

package/dist/runtime/internal.js

@@ -0,0 +1,6 @@
+// `fimo-react/internal` — pieces the Fimo framework adapters compose but that
+// applications never import directly. Not covered by semver expectations for
+// application code; it exists so `fimo-react-router` (and any future React
+// framework adapter) does not have to reach into `dist/` paths.
+export { FimoLocaleProvider, useLocale } from './i18n-context.js';
+export { onError } from './core/AppErrorBoundary.js';

package/dist/runtime/primitives-server.d.ts

@@ -0,0 +1,7 @@
+export { DateRenderer } from './react/primitives/renderers/DateRenderer.js';
+export { ImageRenderer } from './react/primitives/renderers/ImageRenderer.js';
+export { RichTextRenderer } from './react/primitives/renderers/RichTextRenderer.js';
+export { StaticImage } from './react/primitives/renderers/StaticImage.js';
+export { VideoRenderer } from './react/primitives/renderers/VideoRenderer.js';
+export type { BaseImageProps, BaseVideoProps, BooleanProps, DateProps, FimoRichTextComponents, FimoRichTextMarkProps, FimoRichTextNodeProps, ImageProps, JsonProps, RichTextProps, StaticImageProps, TextProps, VideoProps, } from './react/primitives/contracts.js';
+//# sourceMappingURL=primitives-server.d.ts.map

package/dist/runtime/primitives-server.js

@@ -0,0 +1,5 @@
+export { DateRenderer } from './react/primitives/renderers/DateRenderer.js';
+export { ImageRenderer } from './react/primitives/renderers/ImageRenderer.js';
+export { RichTextRenderer } from './react/primitives/renderers/RichTextRenderer.js';
+export { StaticImage } from './react/primitives/renderers/StaticImage.js';
+export { VideoRenderer } from './react/primitives/renderers/VideoRenderer.js';

package/dist/runtime/primitives.d.ts

@@ -0,0 +1,17 @@
+export { Text } from './react/primitives/editable/Text.js';
+export { Image, StaticImage } from './vite/primitives/Images.js';
+export { Video } from './react/primitives/editable/Video.js';
+export { Date } from './react/primitives/editable/Date.js';
+export { DateTime } from './react/primitives/editable/DateTime.js';
+export { Boolean } from './react/primitives/editable/Boolean.js';
+export { Json } from './react/primitives/editable/Json.js';
+export { RichText } from './react/primitives/editable/RichText.js';
+export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, type FimoPolymorphicReference, type FimoReference, type FimoSource, type FimoPart, type FimoRichTextContent, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, fimo, } from 'fimo/primitives';
+export type { BaseImageProps, BaseVideoProps, BooleanProps, DateProps, FimoRichTextComponents, FimoRichTextMarkProps, FimoRichTextNodeProps, ImageProps, JsonProps, RichTextProps, StaticImageProps, TextProps, VideoProps, } from './react/primitives/contracts.js';
+export { useFimoLiveValue } from './react/useFimoLiveValue.js';
+export { DateRenderer } from './react/primitives/renderers/DateRenderer.js';
+export { ImageRenderer } from './react/primitives/renderers/ImageRenderer.js';
+export { RichTextRenderer } from './react/primitives/renderers/RichTextRenderer.js';
+export { VideoRenderer } from './react/primitives/renderers/VideoRenderer.js';
+export type { BoolOps, DateOps, Field, Fields, FilterFor, NullOnlyOps, NumberOps, Populate, Populated, PopulatedResult, Projected, ProjectedWithPopulate, Query, ReferenceField, ReferenceMap, ScalarOps, Sort, SortField, StringOps, WithReferences, Where, } from 'fimo/primitives';
+//# sourceMappingURL=primitives.d.ts.map

package/dist/runtime/primitives.js

@@ -0,0 +1,18 @@
+// Fimo UI — components and primitives for source-tracked inline editing
+// This module is auto-synced and should not be modified by agents or users.
+// Components
+export { Text } from './react/primitives/editable/Text.js';
+export { Image, StaticImage } from './vite/primitives/Images.js';
+export { Video } from './react/primitives/editable/Video.js';
+export { Date } from './react/primitives/editable/Date.js';
+export { DateTime } from './react/primitives/editable/DateTime.js';
+export { Boolean } from './react/primitives/editable/Boolean.js';
+export { Json } from './react/primitives/editable/Json.js';
+export { RichText } from './react/primitives/editable/RichText.js';
+// Primitives & utilities
+export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, fimo, } from 'fimo/primitives';
+export { useFimoLiveValue } from './react/useFimoLiveValue.js';
+export { DateRenderer } from './react/primitives/renderers/DateRenderer.js';
+export { ImageRenderer } from './react/primitives/renderers/ImageRenderer.js';
+export { RichTextRenderer } from './react/primitives/renderers/RichTextRenderer.js';
+export { VideoRenderer } from './react/primitives/renderers/VideoRenderer.js';

package/dist/runtime/react/primitives/contracts.d.ts

@@ -0,0 +1,100 @@
+import type { ImageFit } from 'fimo/primitives';
+import type { FimoBoolean, FimoDate, FimoMedia, FimoRichText, FimoRichTextContent, FimoString } from 'fimo/primitives';
+import type { ComponentPropsWithoutRef, ComponentType, ElementType, ReactNode } from 'react';
+export interface FimoRichTextNodeProps {
+    children?: ReactNode;
+    node: FimoRichTextContent;
+}
+export interface FimoRichTextMarkProps {
+    children: ReactNode;
+    mark: {
+        type: string;
+        attrs?: Record<string, unknown>;
+    };
+}
+export interface FimoRichTextComponents {
+    paragraph?: ComponentType<FimoRichTextNodeProps>;
+    heading?: ComponentType<FimoRichTextNodeProps>;
+    bulletList?: ComponentType<FimoRichTextNodeProps>;
+    orderedList?: ComponentType<FimoRichTextNodeProps>;
+    listItem?: ComponentType<FimoRichTextNodeProps>;
+    blockquote?: ComponentType<FimoRichTextNodeProps>;
+    codeBlock?: ComponentType<FimoRichTextNodeProps>;
+    horizontalRule?: ComponentType<FimoRichTextNodeProps>;
+    hardBreak?: ComponentType<FimoRichTextNodeProps>;
+    image?: ComponentType<FimoRichTextNodeProps>;
+    table?: ComponentType<FimoRichTextNodeProps>;
+    tableRow?: ComponentType<FimoRichTextNodeProps>;
+    tableCell?: ComponentType<FimoRichTextNodeProps>;
+    tableHeader?: ComponentType<FimoRichTextNodeProps>;
+    iframe?: ComponentType<FimoRichTextNodeProps>;
+    bold?: ComponentType<FimoRichTextMarkProps>;
+    italic?: ComponentType<FimoRichTextMarkProps>;
+    underline?: ComponentType<FimoRichTextMarkProps>;
+    strike?: ComponentType<FimoRichTextMarkProps>;
+    code?: ComponentType<FimoRichTextMarkProps>;
+    link?: ComponentType<FimoRichTextMarkProps>;
+}
+export type BooleanProps<T extends ElementType = 'span'> = {
+    value: FimoBoolean;
+    as?: T;
+    children?: (value: boolean) => ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, 'value' | 'as' | 'children'>;
+export interface DateProps {
+    value: FimoDate | FimoString | Date | string;
+    children?: (date: Date) => ReactNode;
+    className?: string;
+}
+export interface BaseImageProps extends Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'alt' | 'children'> {
+    quality?: number;
+    fit?: ImageFit;
+    unoptimized?: boolean;
+    overrideSrc?: string;
+    hostSuffixes?: readonly string[];
+}
+export interface ImageProps extends BaseImageProps {
+    value: FimoMedia;
+    alt?: string;
+    children?: (media: FimoMedia) => ReactNode;
+}
+export type JsonProps<T extends ElementType = 'span'> = {
+    value: unknown;
+    as?: T;
+    children?: (value: unknown) => ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, 'value' | 'as' | 'children'>;
+export interface RichTextProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    value: FimoRichText | null | undefined;
+    components?: FimoRichTextComponents;
+}
+export type StaticImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'children' | 'src'> & {
+    /**
+     * Direct URL to the image. React's own `img` typings widened `src` to accept
+     * a Blob; this renderer resolves a URL through the optimizer, so it stays a
+     * string. Same reason `BaseVideoProps` omits `src`.
+     */
+    src?: string;
+    /** Image quality (1-100). Defaults to 85. */
+    quality?: number;
+    /** Resize fit mode. Also maps to CSS object-fit. Defaults to 'scale-down'. */
+    fit?: ImageFit;
+    /** Skip optimization and use the original URL. */
+    unoptimized?: boolean;
+    hostSuffixes?: readonly string[];
+};
+export type TextProps<T extends ElementType = 'span'> = {
+    value: unknown;
+    as?: T;
+    children?: (value: string) => ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, 'value' | 'as' | 'children'>;
+export type LabelProps<T extends ElementType = 'span'> = Omit<TextProps<T>, 'value'> & {
+    /** Literal label key, e.g. `hero.title`. Dynamic keys cannot be validated. */
+    value: string;
+};
+export interface BaseVideoProps extends Omit<ComponentPropsWithoutRef<'video'>, 'src' | 'children'> {
+    overrideSrc?: string;
+}
+export interface VideoProps extends BaseVideoProps {
+    value: FimoMedia;
+    children?: (media: FimoMedia) => ReactNode;
+}
+//# sourceMappingURL=contracts.d.ts.map

package/dist/runtime/react/primitives/contracts.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/react/primitives/editable/Boolean.d.ts

@@ -0,0 +1,5 @@
+import { type ElementType } from 'react';
+import type { BooleanProps } from '../contracts.js';
+export type { BooleanProps } from '../contracts.js';
+export declare function Boolean<T extends ElementType = 'span'>({ value, as, children, ...props }: BooleanProps<T>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Boolean.d.ts.map

package/dist/runtime/react/primitives/editable/Boolean.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FIMO_SOURCE } from 'fimo/primitives';
+import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+export function Boolean({ value, as, children, ...props }) {
+    const Component = as || 'span';
+    const { value: liveValue, ref } = useFimoLiveValue(value ? value.valueOf() : false);
+    if (!value) {
+        return null;
+    }
+    return (_jsx(Component, { ref: ref, ...props, "data-fimo-source": value[FIMO_SOURCE], children: children ? children(liveValue) : String(liveValue) }));
+}

package/dist/runtime/react/primitives/editable/Date.d.ts

@@ -0,0 +1,4 @@
+import type { DateProps } from '../contracts.js';
+export type { DateProps } from '../contracts.js';
+export declare function Date({ value, ...props }: DateProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Date.d.ts.map

package/dist/runtime/react/primitives/editable/Date.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FIMO_SOURCE } from 'fimo/primitives';
+import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+import { DateRenderer } from '../renderers/DateRenderer.js';
+export function Date({ value, ...props }) {
+    const { value: liveValue, ref } = useFimoLiveValue(value ?? null);
+    if (!liveValue) {
+        return null;
+    }
+    const source = typeof value === 'object' && FIMO_SOURCE in value ? (value[FIMO_SOURCE] ?? undefined) : undefined;
+    return _jsx(DateRenderer, { ...props, value: liveValue, source: source, elementRef: ref });
+}

package/dist/runtime/react/primitives/editable/DateTime.d.ts

@@ -0,0 +1,4 @@
+import type { DateProps } from '../contracts.js';
+/** Renders a `datetime` field: the `dateTime` attribute keeps the whole instant. */
+export declare function DateTime({ value, ...props }: DateProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DateTime.d.ts.map

package/dist/runtime/react/primitives/editable/DateTime.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FIMO_SOURCE } from 'fimo/primitives';
+import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+import { DateRenderer } from '../renderers/DateRenderer.js';
+/** Renders a `datetime` field: the `dateTime` attribute keeps the whole instant. */
+export function DateTime({ value, ...props }) {
+    const { value: liveValue, ref } = useFimoLiveValue(value ?? null);
+    if (!liveValue) {
+        return null;
+    }
+    const source = typeof value === 'object' && FIMO_SOURCE in value ? (value[FIMO_SOURCE] ?? undefined) : undefined;
+    return _jsx(DateRenderer, { ...props, value: liveValue, source: source, precision: "instant", elementRef: ref });
+}

package/dist/runtime/react/primitives/editable/Image.d.ts

@@ -0,0 +1,4 @@
+import type { ImageProps } from '../contracts.js';
+export type { BaseImageProps, ImageProps } from '../contracts.js';
+export declare function Image({ value: media, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Image.d.ts.map

package/dist/runtime/react/primitives/editable/Image.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+import { ImageRenderer } from '../renderers/ImageRenderer.js';
+export function Image({ value: media, ...props }) {
+    const { value: liveMedia, ref } = useFimoLiveValue(media ?? null);
+    if (!liveMedia) {
+        return null;
+    }
+    return _jsx(ImageRenderer, { ...props, value: liveMedia, elementRef: ref });
+}

package/dist/runtime/react/primitives/editable/Json.d.ts

@@ -0,0 +1,5 @@
+import { type ElementType } from 'react';
+import type { JsonProps } from '../contracts.js';
+export type { JsonProps } from '../contracts.js';
+export declare function Json<T extends ElementType = 'span'>({ value, as, children, ...props }: JsonProps<T>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Json.d.ts.map

package/dist/runtime/react/primitives/editable/Json.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFimoSource } from 'fimo/primitives';
+import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+export function Json({ value, as, children, ...props }) {
+    const Component = as || 'span';
+    const { value: liveValue, ref } = useFimoLiveValue(value);
+    if (value === null || value === undefined) {
+        return null;
+    }
+    return (_jsx(Component, { ref: ref, ...props, "data-fimo-source": getFimoSource(value), children: children ? children(liveValue) : JSON.stringify(liveValue) }));
+}

package/dist/runtime/react/primitives/editable/RichText.d.ts

@@ -0,0 +1,4 @@
+import type { RichTextProps } from '../contracts.js';
+export type { RichTextProps } from '../contracts.js';
+export declare function RichText({ value, components, ...props }: RichTextProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=RichText.d.ts.map

package/dist/runtime/react/primitives/editable/RichText.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FIMO_SOURCE } from 'fimo/primitives';
+import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+import { RichTextRenderer } from '../renderers/RichTextRenderer.js';
+export function RichText({ value, components, ...props }) {
+    const { value: liveContent, ref } = useFimoLiveValue(value?.content ?? null);
+    if (!value) {
+        return null;
+    }
+    return (_jsx(RichTextRenderer, { ...props, document: liveContent, source: value[FIMO_SOURCE], components: components, elementRef: ref }));
+}

package/dist/runtime/react/primitives/editable/Text.d.ts

@@ -0,0 +1,20 @@
+import { type ElementType } from 'react';
+import type { TextProps } from '../contracts.js';
+export type { TextProps } from '../contracts.js';
+/**
+ * Text component for rendering text with source tracking
+ *
+ * Works with both schema data (FimoString) and translations.
+ * The `as` prop changes the rendered element (polymorphic).
+ * Use children render function for custom formatting.
+ *
+ * @example
+ * <Text value={post.title} />
+ * <Text value={post.title} as="h1" className="text-4xl" />
+ * <Text value={t('welcome')} as="p" />
+ *
+ * // With render function for formatting
+ * <Text value={product.price}>{(p) => `$${Number(p).toLocaleString()}`}</Text>
+ */
+export declare function Text<T extends ElementType = 'span'>({ value, as, children, ...props }: TextProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Text.d.ts.map

package/dist/runtime/react/primitives/editable/Text.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFimoParts, getFimoSource } from 'fimo/primitives';
+import { Fragment } from 'react';
+import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+/**
+ * Text component for rendering text with source tracking
+ *
+ * Works with both schema data (FimoString) and translations.
+ * The `as` prop changes the rendered element (polymorphic).
+ * Use children render function for custom formatting.
+ *
+ * @example
+ * <Text value={post.title} />
+ * <Text value={post.title} as="h1" className="text-4xl" />
+ * <Text value={t('welcome')} as="p" />
+ *
+ * // With render function for formatting
+ * <Text value={product.price}>{(p) => `$${Number(p).toLocaleString()}`}</Text>
+ */
+export function Text({ value, as, children, ...props }) {
+    const Component = as || 'span';
+    const parts = getFimoParts(value);
+    const source = getFimoSource(value);
+    const { value: liveValue, ref } = useFimoLiveValue(String(value));
+    // Composed fimo value with parts — decompose into individually tracked spans
+    if (parts && parts.length > 1 && !children) {
+        return (_jsx(Component, { ...props, children: parts.map((part, i) => part.source ? (_jsx(TextPart, { part: part }, i)) : (_jsx(Fragment, { children: part.text }, i))) }));
+    }
+    // Use render function if provided, otherwise display raw value
+    const content = children ? children(liveValue) : liveValue;
+    return (_jsx(Component, { ref: ref, ...props, "data-fimo-source": source, children: content }));
+}
+function TextPart({ part }) {
+    const { value: liveText, ref } = useFimoLiveValue(part.text);
+    return (_jsx("span", { ref: ref, "data-fimo-source": part.source, children: liveText }));
+}

package/dist/runtime/react/primitives/editable/Video.d.ts

@@ -0,0 +1,4 @@
+import type { VideoProps } from '../contracts.js';
+export type { BaseVideoProps, VideoProps } from '../contracts.js';
+export declare function Video({ value: media, ...props }: VideoProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Video.d.ts.map

package/dist/runtime/react/primitives/editable/Video.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+import { VideoRenderer } from '../renderers/VideoRenderer.js';
+export function Video({ value: media, ...props }) {
+    const { value: liveMedia, ref } = useFimoLiveValue(media ?? null);
+    if (!liveMedia) {
+        return null;
+    }
+    return _jsx(VideoRenderer, { ...props, value: liveMedia, elementRef: ref });
+}

package/dist/runtime/react/primitives/renderers/DateRenderer.d.ts

@@ -0,0 +1,17 @@
+import type { FimoDate, FimoString } from 'fimo/primitives';
+import { type ReactNode, type Ref } from 'react';
+export interface DateRendererProps {
+    value: FimoDate | FimoString | Date | string | number;
+    source: string | undefined;
+    /**
+     * `day` emits the calendar day in `dateTime`; `instant` keeps the full ISO
+     * instant, which is the whole point of a `datetime` field. Defaults to `day`
+     * so `<Date>` renders exactly what it always has.
+     */
+    precision?: 'day' | 'instant';
+    children?: (date: Date) => ReactNode;
+    className?: string;
+    elementRef?: Ref<HTMLTimeElement>;
+}
+export declare function DateRenderer({ value, source, precision, children, className, elementRef }: DateRendererProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DateRenderer.d.ts.map

package/dist/runtime/react/primitives/renderers/DateRenderer.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DateRenderer({ value, source, precision = 'day', children, className, elementRef }) {
+    const rawValue = value instanceof String ? value.toString() : value;
+    const dateValue = new globalThis.Date(rawValue);
+    const iso = dateValue.toISOString();
+    const dateTime = precision === 'instant' ? iso : iso.split('T')[0];
+    const content = children
+        ? children(dateValue)
+        : precision === 'instant'
+            ? dateValue.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })
+            : dateValue.toLocaleDateString(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            });
+    return (_jsx("time", { ref: elementRef, dateTime: dateTime, className: className, "data-fimo-source": source, children: content }));
+}

package/dist/runtime/react/primitives/renderers/ImageRenderer.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+import type { ImageProps } from '../contracts.js';
+interface ImageRendererProps extends ImageProps {
+    elementRef?: RefObject<HTMLElement | null>;
+}
+export declare function ImageRenderer({ value: media, children, quality, unoptimized, fit, width, height, alt: altOverride, overrideSrc, srcSet: srcSetOverride, sizes, style, hostSuffixes, elementRef, ...imgProps }: ImageRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ImageRenderer.d.ts.map

package/dist/runtime/react/primitives/renderers/ImageRenderer.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FIMO_SOURCE, resolveImagePresentation } from 'fimo/primitives';
+export function ImageRenderer({ value: media, children, quality, unoptimized = false, fit, width, height, alt: altOverride, overrideSrc, srcSet: srcSetOverride, sizes, style, hostSuffixes, elementRef, ...imgProps }) {
+    const mediaSource = media[FIMO_SOURCE];
+    if (children) {
+        return (_jsx("span", { ref: elementRef, "data-fimo-source": mediaSource, children: children(media) }));
+    }
+    const image = resolveImagePresentation({
+        src: media.url,
+        alt: altOverride ?? media.alt,
+        mediaWidth: media.width,
+        mediaHeight: media.height,
+        quality,
+        fit,
+        unoptimized,
+        overrideSrc,
+        width,
+        height,
+        sizes,
+        srcSet: srcSetOverride,
+        hostSuffixes,
+    });
+    const finalStyle = style?.objectFit
+        ? style
+        : {
+            ...style,
+            objectFit: image.objectFit,
+        };
+    return (_jsx("img", { ref: elementRef, src: image.src, alt: image.alt, width: image.width, height: image.height, style: finalStyle, sizes: image.sizes, srcSet: image.srcSet, ...imgProps, "data-fimo-source": mediaSource }));
+}

package/dist/runtime/react/primitives/renderers/RichTextRenderer.d.ts

@@ -0,0 +1,12 @@
+import type { FimoRichTextContent } from 'fimo/primitives';
+import { type ComponentPropsWithoutRef, type Ref } from 'react';
+import type { FimoRichTextComponents } from '../contracts.js';
+interface RichTextRendererProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    document: FimoRichTextContent | null | undefined;
+    source: string | undefined;
+    components?: FimoRichTextComponents;
+    elementRef?: Ref<HTMLDivElement>;
+}
+export declare function RichTextRenderer({ document, source, components, elementRef, ...props }: RichTextRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=RichTextRenderer.d.ts.map