fimo 0.12.0-staging.1 → 0.12.0-staging.2

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

@@ -9,7 +9,14 @@ export type { CollectionContentClient, InfiniteListResult, SingletonContentClien
 export { createContentCore, createSingletonCore } from '../content/index.js';
 export type { CollectionContentCore, CollectionPage, CollectionPageInfo, ContentClientConfig, ContentClientHandle, ContentModuleMeta, ContentModuleRef, ContentReadOptions, ContentResult, ContentRuntime, ContentSchema, ContentSchemaField, SingletonContentCore, } from '../content/index.js';
 export { FIMO_PARTS, FIMO_SOURCE, FimoBoolean, FimoDate, FimoMedia, FimoRichText, FimoString, getFimoParts, getFimoSource, hasFimoSource, isFimoDate, isFimoString, } from '../content/index.js';
-export { Text } from '../primitives/components/Text.js';
+export { Boolean } from '../react/primitives/editable/Boolean.js';
+export { Date } from '../react/primitives/editable/Date.js';
+export { Image } from '../react/primitives/editable/Image.js';
+export { Json } from '../react/primitives/editable/Json.js';
+export { RichText } from '../react/primitives/editable/RichText.js';
+export { StaticImage } from '../react/primitives/renderers/StaticImage.js';
+export { Text } from '../react/primitives/editable/Text.js';
+export { Video } from '../react/primitives/editable/Video.js';
 export type { BoolOps, DateOps, Field, Fields, FilterFor, FimoPart, FimoPolymorphicReference, FimoReference, FimoRichTextComponents, FimoRichTextContent, FimoRichTextMarkProps, FimoRichTextNodeProps, FimoSource, NullOnlyOps, NumberOps, Populate, Populated, PopulatedResult, Projected, ProjectedWithPopulate, Query, ReferenceField, ReferenceMap, ScalarOps, Sort, SortField, StringOps, Where, WithReferences, } from '../content/index.js';
 export { FimoNextProvider } from './provider.js';
 export type { FimoNextProviderProps } from './provider.js';

package/dist/runtime/next/client.js

@@ -11,5 +11,12 @@ export function createSingletonClient(config) {
 }
 export { createContentCore, createSingletonCore } from '../content/index.js';
 export { FIMO_PARTS, FIMO_SOURCE, FimoBoolean, FimoDate, FimoMedia, FimoRichText, FimoString, getFimoParts, getFimoSource, hasFimoSource, isFimoDate, isFimoString, } from '../content/index.js';
-export { Text } from '../primitives/components/Text.js';
+export { Boolean } from '../react/primitives/editable/Boolean.js';
+export { Date } from '../react/primitives/editable/Date.js';
+export { Image } from '../react/primitives/editable/Image.js';
+export { Json } from '../react/primitives/editable/Json.js';
+export { RichText } from '../react/primitives/editable/RichText.js';
+export { StaticImage } from '../react/primitives/renderers/StaticImage.js';
+export { Text } from '../react/primitives/editable/Text.js';
+export { Video } from '../react/primitives/editable/Video.js';
 export { FimoNextProvider } from './provider.js';

package/dist/runtime/next/{Text.d.ts → primitives/Text.d.ts}

@@ -1,5 +1,5 @@
 import { type ElementType } from 'react';
-import type { TextProps } from '../primitives/components/Text.js';
+import type { TextProps } from '../../react/primitives/contracts.js';
 /**
  * Server-safe text primitive for Next.js Server Components.
  *

package/dist/runtime/next/{Text.js → primitives/Text.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { getFimoParts, getFimoSource } from '../content/index.js';
+import { getFimoParts, getFimoSource } from '../../content/index.js';
 /**
  * Server-safe text primitive for Next.js Server Components.
  *

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

@@ -0,0 +1,9 @@
+import { type ElementType } from 'react';
+import type { BooleanProps, DateProps, ImageProps, JsonProps, RichTextProps, VideoProps } from '../../react/primitives/contracts.js';
+export declare function Boolean<T extends ElementType = 'span'>({ value, as, children, ...props }: BooleanProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function Date({ value, ...props }: DateProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Image(props: ImageProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Json<T extends ElementType = 'span'>({ value, as, children, ...props }: JsonProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function RichText({ value, components, ...props }: RichTextProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Video(props: VideoProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=server.d.ts.map

package/dist/runtime/next/primitives/server.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FIMO_SOURCE, getFimoSource } from '../../content/index.js';
+import { DateRenderer } from '../../react/primitives/renderers/DateRenderer.js';
+import { ImageRenderer } from '../../react/primitives/renderers/ImageRenderer.js';
+import { RichTextRenderer } from '../../react/primitives/renderers/RichTextRenderer.js';
+import { VideoRenderer } from '../../react/primitives/renderers/VideoRenderer.js';
+export function Boolean({ value, as, children, ...props }) {
+    if (!value) {
+        return null;
+    }
+    const Component = as || 'span';
+    const booleanValue = value.valueOf();
+    return (_jsx(Component, { ...props, "data-fimo-source": value[FIMO_SOURCE], children: children ? children(booleanValue) : String(booleanValue) }));
+}
+export function Date({ value, ...props }) {
+    if (!value) {
+        return null;
+    }
+    const source = typeof value === 'object' && FIMO_SOURCE in value ? (value[FIMO_SOURCE] ?? undefined) : undefined;
+    return _jsx(DateRenderer, { ...props, value: value, source: source });
+}
+export function Image(props) {
+    if (!props.value) {
+        return null;
+    }
+    return _jsx(ImageRenderer, { ...props });
+}
+export function Json({ value, as, children, ...props }) {
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const Component = as || 'span';
+    return (_jsx(Component, { ...props, "data-fimo-source": getFimoSource(value), children: children ? children(value) : JSON.stringify(value) }));
+}
+export function RichText({ value, components, ...props }) {
+    if (!value) {
+        return null;
+    }
+    return _jsx(RichTextRenderer, { ...props, document: value.content, source: value[FIMO_SOURCE], components: components });
+}
+export function Video(props) {
+    if (!props.value) {
+        return null;
+    }
+    return _jsx(VideoRenderer, { ...props });
+}

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

@@ -1,5 +1,7 @@
 import type { CollectionContentClient, ContentClientConfig, SingletonContentClient } from '../content/client/types.js';
-export { Text } from './Text.js';
+export { StaticImage } from '../react/primitives/renderers/StaticImage.js';
+export { Text } from './primitives/Text.js';
+export { Boolean, Date, Image, Json, RichText, Video } from './primitives/server.js';
 export declare function createContentClient<T extends {
     id: string;
 }, TInput extends object>(config: ContentClientConfig): CollectionContentClient<T, TInput>;

package/dist/runtime/next/server.js

@@ -1,6 +1,8 @@
 import { createServerContentClient, createServerSingletonClient } from '../content/client/server-content-client.js';
 import { nextServerContentRuntime } from './server-runtime.js';
-export { Text } from './Text.js';
+export { StaticImage } from '../react/primitives/renderers/StaticImage.js';
+export { Text } from './primitives/Text.js';
+export { Boolean, Date, Image, Json, RichText, Video } from './primitives/server.js';
 export function createContentClient(config) {
     return createServerContentClient(config, nextServerContentRuntime);
 }

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

@@ -1,12 +1,12 @@
-export { Text } from './components/Text.js';
-export { Image } from './components/Image.js';
-export { StaticImage } from './components/StaticImage.js';
-export { Video } from './components/Video.js';
-export { Date } from './components/Date.js';
-export { Boolean } from './components/Boolean.js';
-export { Json } from './components/Json.js';
-export { RichText } from './components/RichText.js';
-export { useLabels, useTranslations } from './translations.js';
-export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, type FimoPolymorphicReference, type FimoReference, type FimoSource, type FimoPart, type FimoRichTextContent, type FimoRichTextNodeProps, type FimoRichTextMarkProps, type FimoRichTextComponents, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, fimo, useFimoLiveValue, } from './lib/index.js';
+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 { Boolean } from '../react/primitives/editable/Boolean.js';
+export { Json } from '../react/primitives/editable/Json.js';
+export { RichText } from '../react/primitives/editable/RichText.js';
+export { useLabels, useTranslations } from '../vite/translations.js';
+export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, type FimoPolymorphicReference, type FimoReference, type FimoSource, type FimoPart, type FimoRichTextContent, type FimoRichTextNodeProps, type FimoRichTextMarkProps, type FimoRichTextComponents, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, fimo, } from './lib/index.js';
+export { useFimoLiveValue } from '../react/useFimoLiveValue.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 './lib/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/runtime/primitives/index.js

@@ -1,15 +1,15 @@
 // 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 './components/Text.js';
-export { Image } from './components/Image.js';
-export { StaticImage } from './components/StaticImage.js';
-export { Video } from './components/Video.js';
-export { Date } from './components/Date.js';
-export { Boolean } from './components/Boolean.js';
-export { Json } from './components/Json.js';
-export { RichText } from './components/RichText.js';
+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 { Boolean } from '../react/primitives/editable/Boolean.js';
+export { Json } from '../react/primitives/editable/Json.js';
+export { RichText } from '../react/primitives/editable/RichText.js';
 // Labels
-export { useLabels, useTranslations } from './translations.js';
+export { useLabels, useTranslations } from '../vite/translations.js';
 // Primitives & utilities
-export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, fimo, useFimoLiveValue, } from './lib/index.js';
+export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, fimo, } from './lib/index.js';
+export { useFimoLiveValue } from '../react/useFimoLiveValue.js';

package/dist/runtime/primitives/lib/image-optimization.d.ts

@@ -1,4 +1,11 @@
 import type { ComponentPropsWithoutRef } from 'react';
+/** Default host suffixes eligible for Cloudflare Image Resizing optimization. */
+export declare const DEFAULT_IMAGE_HOST_SUFFIXES: readonly [".fimo.team", ".fimo.ai", ".fimo.site"];
+/**
+ * Get allowed host suffixes from env or use defaults.
+ * Env format: comma-separated suffixes, e.g. ".fimo.team,.fimo.ai,.fimo.site"
+ */
+export declare function parseImageHostSuffixes(value: string | undefined): readonly string[];
 export declare const DEFAULT_IMAGE_QUALITY = 85;
 export declare const DEFAULT_IMAGE_FIT: "scale-down";
 export declare const DEFAULT_IMAGE_DPRS: readonly [1, 2];
@@ -21,7 +28,7 @@ export declare function toObjectFit(fit: ImageFit): NonNullable<ComponentPropsWi
 /** Parse value to positive integer, or undefined if invalid. */
 export declare function toPositiveInt(value: string | number | undefined): number | undefined;
 /** Check if URL can be optimized (valid http(s) URL on allowed host). */
-export declare function isOptimizableFimoUrl(value: string): value is string;
+export declare function isOptimizableFimoUrl(value: string, hostSuffixes?: readonly string[]): value is string;
 /**
  * Build optimized URL with Cloudflare Image Resizing query params.
  * Adds: w (width), q (quality), fit, f (format=auto), dpr.
@@ -31,6 +38,7 @@ export declare function buildOptimizedUrl(src: string, options: {
     quality: number;
     fit: ImageFit;
     dpr?: number;
+    hostSuffixes?: readonly string[];
 }): string;
 export type ImageOptimizationConfig = {
     generatedSrcSet?: string;
@@ -46,5 +54,6 @@ export declare function computeImageOptimizationConfig(options: {
     renderWidth: number | undefined;
     quality: number;
     fit: ImageFit;
+    hostSuffixes?: readonly string[];
 }): ImageOptimizationConfig;
 //# sourceMappingURL=image-optimization.d.ts.map

package/dist/runtime/primitives/lib/image-optimization.js

@@ -1,14 +1,12 @@
 /** Default host suffixes eligible for Cloudflare Image Resizing optimization. */
-const DEFAULT_IMAGE_HOST_SUFFIXES = ['.fimo.team', '.fimo.ai', '.fimo.site'];
+export const DEFAULT_IMAGE_HOST_SUFFIXES = ['.fimo.team', '.fimo.ai', '.fimo.site'];
 /**
  * Get allowed host suffixes from env or use defaults.
  * Env format: comma-separated suffixes, e.g. ".fimo.team,.fimo.ai,.fimo.site"
  */
-function getImageHostSuffixes() {
-    // @ts-ignore - meta.env is a vite injected variable
-    const envHosts = import.meta.env.VITE_FIMO_IMAGE_HOSTS;
-    if (typeof envHosts === 'string' && envHosts.trim().length > 0) {
-        return envHosts.split(',').map((s) => s.trim());
+export function parseImageHostSuffixes(value) {
+    if (typeof value === 'string' && value.trim().length > 0) {
+        return value.split(',').map((suffix) => suffix.trim());
     }
     return DEFAULT_IMAGE_HOST_SUFFIXES;
 }
@@ -91,14 +89,14 @@ function parseHttpUrl(value) {
     }
 }
 /** Check if hostname is eligible for Cloudflare optimization. */
-function isAllowedHost(hostname) {
+function isAllowedHost(hostname, hostSuffixes) {
     const host = hostname.toLowerCase();
-    return getImageHostSuffixes().some((suffix) => host.endsWith(suffix));
+    return hostSuffixes.some((suffix) => host.endsWith(suffix.toLowerCase()));
 }
 /** Check if URL can be optimized (valid http(s) URL on allowed host). */
-export function isOptimizableFimoUrl(value) {
+export function isOptimizableFimoUrl(value, hostSuffixes = DEFAULT_IMAGE_HOST_SUFFIXES) {
     const url = parseHttpUrl(value);
-    return Boolean(url && isAllowedHost(url.hostname));
+    return Boolean(url && isAllowedHost(url.hostname, hostSuffixes));
 }
 /**
  * Build optimized URL with Cloudflare Image Resizing query params.
@@ -106,7 +104,7 @@ export function isOptimizableFimoUrl(value) {
  */
 export function buildOptimizedUrl(src, options) {
     const parsed = parseHttpUrl(src);
-    if (!parsed || !isAllowedHost(parsed.hostname)) {
+    if (!parsed || !isAllowedHost(parsed.hostname, options.hostSuffixes ?? DEFAULT_IMAGE_HOST_SUFFIXES)) {
         return src;
     }
     const transformed = new URL(parsed.toString());
@@ -152,7 +150,7 @@ function buildWidthSrcSet(src, options, widths) {
         .join(', ');
 }
 export function computeImageOptimizationConfig(options) {
-    const { shouldOptimize, hasSizesAttr, srcSetOverride, originalSrc, mediaWidth, renderWidth, quality, fit } = options;
+    const { shouldOptimize, hasSizesAttr, srcSetOverride, originalSrc, mediaWidth, renderWidth, quality, fit, hostSuffixes, } = options;
     if (!shouldOptimize || srcSetOverride != null) {
         return {
             generatedSrcSet: undefined,
@@ -166,6 +164,7 @@ export function computeImageOptimizationConfig(options) {
             generatedSrcSet: buildWidthSrcSet(originalSrc, {
                 quality,
                 fit,
+                hostSuffixes,
             }, responsiveWidths),
             transformWidth: responsiveWidths[responsiveWidths.length - 1] ?? renderWidth,
             transformDpr: undefined,
@@ -176,6 +175,7 @@ export function computeImageOptimizationConfig(options) {
             width: renderWidth,
             quality,
             fit,
+            hostSuffixes,
         }),
         transformWidth: renderWidth,
         transformDpr: renderWidth ? DEFAULT_IMAGE_DPRS[DEFAULT_IMAGE_DPRS.length - 1] : undefined,

package/dist/runtime/primitives/lib/index.d.ts

@@ -1,5 +1,4 @@
 export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, type FimoPolymorphicReference, type FimoReference, type FimoSource, type FimoPart, type FimoRichTextContent, type FimoRichTextNodeProps, type FimoRichTextMarkProps, type FimoRichTextComponents, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, } from './primitives.js';
 export { fimo } from './template.js';
-export { useFimoLiveValue } from './useFimoLiveValue.js';
 export type { BoolOps, DateOps, Field, Fields, FilterFor, NullOnlyOps, NumberOps, Populate, Populated, PopulatedResult, ProjectedWithPopulate, Projected, Query, ReferenceField, ReferenceMap, ScalarOps, Sort, SortField, StringOps, Where, WithReferences, } from './query.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/runtime/primitives/lib/index.js

@@ -1,4 +1,3 @@
 // Fimo - Source tracking for inline editing
 export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, } from './primitives.js';
 export { fimo } from './template.js';
-export { useFimoLiveValue } from './useFimoLiveValue.js';

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

@@ -0,0 +1,56 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import type { ImageFit } from '../../primitives/lib/image-optimization.js';
+import type { FimoBoolean, FimoDate, FimoMedia, FimoRichText, FimoRichTextComponents, FimoString } from '../../primitives/lib/index.js';
+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'> & {
+    /** 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 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 '../../../primitives/lib/index.js';
+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 '../../../primitives/lib/index.js';
+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/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 '../../../primitives/lib/index.js';
+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 '../../../primitives/lib/index.js';
+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/{primitives/components → react/primitives/editable}/Text.d.ts

@@ -1,9 +1,6 @@
-import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
-export type TextProps<T extends ElementType = 'span'> = {
-    value: unknown;
-    as?: T;
-    children?: (value: string) => ReactNode;
-} & Omit<ComponentPropsWithoutRef<T>, 'value' | 'as' | 'children'>;
+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
  *

package/dist/runtime/{primitives/components → react/primitives/editable}/Text.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { getFimoParts, getFimoSource, useFimoLiveValue } from '../lib/index.js';
+import { getFimoParts, getFimoSource } from '../../../primitives/lib/index.js';
+import { useFimoLiveValue } from '../../useFimoLiveValue.js';
 /**
  * Text component for rendering text with source tracking
  *

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,11 @@
+import { type ReactNode, type Ref } from 'react';
+import type { FimoDate, FimoString } from '../../../primitives/lib/index.js';
+export interface DateRendererProps {
+    value: FimoDate | FimoString | Date | string | number;
+    source: string | undefined;
+    children?: (date: Date) => ReactNode;
+    className?: string;
+    elementRef?: Ref<HTMLTimeElement>;
+}
+export declare function DateRenderer({ value, source, 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,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DateRenderer({ value, source, children, className, elementRef }) {
+    const rawValue = value instanceof String ? value.toString() : value;
+    const dateValue = new globalThis.Date(rawValue);
+    const isoDate = dateValue.toISOString().split('T')[0];
+    const content = children
+        ? children(dateValue)
+        : dateValue.toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    return (_jsx("time", { ref: elementRef, dateTime: isoDate, 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,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buildOptimizedUrl, clampQuality, computeImageOptimizationConfig, isOptimizableFimoUrl, resolveFit, toObjectFit, toPositiveInt, } from '../../../primitives/lib/image-optimization.js';
+import { FIMO_SOURCE } from '../../../primitives/lib/primitives.js';
+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 normalizedQuality = clampQuality(quality);
+    const normalizedFit = resolveFit(fit);
+    const requestedWidth = toPositiveInt(width);
+    const requestedHeight = toPositiveInt(height);
+    const displayWidth = requestedWidth ?? media.width;
+    const displayHeight = requestedHeight ?? media.height;
+    const originalSrc = media.url;
+    const resolvedAlt = altOverride ?? media.alt;
+    const hasSizesAttr = typeof sizes === 'string' && sizes.trim().length > 0;
+    const hasSizingHint = hasSizesAttr || requestedWidth !== undefined || requestedHeight !== undefined;
+    const canOptimizeSource = !unoptimized && isOptimizableFimoUrl(originalSrc, hostSuffixes);
+    const shouldOptimize = canOptimizeSource && hasSizingHint;
+    const { generatedSrcSet, transformWidth, transformDpr } = computeImageOptimizationConfig({
+        shouldOptimize,
+        hasSizesAttr,
+        srcSetOverride,
+        originalSrc,
+        mediaWidth: media.width,
+        renderWidth: displayWidth,
+        quality: normalizedQuality,
+        fit: normalizedFit,
+        hostSuffixes,
+    });
+    const finalSrcSet = srcSetOverride ?? generatedSrcSet;
+    const optimizedSrc = shouldOptimize
+        ? buildOptimizedUrl(originalSrc, {
+            width: transformWidth,
+            quality: normalizedQuality,
+            fit: normalizedFit,
+            dpr: transformDpr,
+            hostSuffixes,
+        })
+        : originalSrc;
+    const finalSrc = overrideSrc ?? optimizedSrc;
+    const finalStyle = style?.objectFit
+        ? style
+        : {
+            ...style,
+            objectFit: toObjectFit(normalizedFit),
+        };
+    return (_jsx("img", { ref: elementRef, src: finalSrc, alt: resolvedAlt, width: displayWidth, height: displayHeight, style: finalStyle, sizes: sizes, srcSet: finalSrcSet, ...imgProps, "data-fimo-source": mediaSource }));
+}

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

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithoutRef, type Ref } from 'react';
+import type { FimoRichTextComponents, FimoRichTextContent } from '../../../primitives/lib/index.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