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

package/dist/runtime/{primitives/components/RichText.js → react/primitives/renderers/RichTextRenderer.js}

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { FIMO_SOURCE, useFimoLiveValue, } from '../lib/index.js';
 function DefaultParagraph({ children }) {
     return _jsx("p", { children: children });
 }
@@ -118,7 +117,7 @@ function renderNode(node, components, key) {
         }
         return _jsx(Fragment, { children: result }, key);
     }
-    const children = node.content?.map((child, i) => renderNode(child, components, i)) ?? null;
+    const children = node.content?.map((child, index) => renderNode(child, components, index)) ?? null;
     if (node.type === 'doc') {
         return _jsx(Fragment, { children: children }, key);
     }
@@ -128,10 +127,9 @@ function renderNode(node, components, key) {
     }
     return _jsx(Fragment, { children: children }, key);
 }
-export function RichText({ value, components, ...props }) {
-    const { value: liveContent, ref } = useFimoLiveValue(value?.content ?? null);
-    if (!value || !liveContent) {
+export function RichTextRenderer({ document, source, components, elementRef, ...props }) {
+    if (!document) {
         return null;
     }
-    return (_jsx("div", { ref: ref, ...props, "data-fimo-source": value[FIMO_SOURCE], "data-fimo-richtext": "", children: renderNode(liveContent, components, 0) }));
+    return (_jsx("div", { ref: elementRef, ...props, "data-fimo-source": source, "data-fimo-richtext": "", children: renderNode(document, components, 0) }));
 }

package/dist/runtime/{primitives/components → react/primitives/renderers}/StaticImage.d.ts

@@ -1,13 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-import { type ImageFit } from '../lib/image-optimization.js';
-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 original URL. */
-    unoptimized?: boolean;
-};
+import type { StaticImageProps } from '../contracts.js';
+export type { StaticImageProps } from '../contracts.js';
 /**
  * Optimized image component for non-schema images.
  *
@@ -40,5 +32,4 @@ type StaticImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'children'> & {
  * <StaticImage src="/images/logo.svg" alt="Logo" unoptimized />
  */
 export declare function StaticImage(props: StaticImageProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
 //# sourceMappingURL=StaticImage.d.ts.map

package/dist/runtime/{primitives/components → react/primitives/renderers}/StaticImage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { clampQuality, resolveFit, toObjectFit, toPositiveInt, isOptimizableFimoUrl, buildOptimizedUrl, computeImageOptimizationConfig, } from '../lib/image-optimization.js';
+import { clampQuality, resolveFit, toObjectFit, toPositiveInt, isOptimizableFimoUrl, buildOptimizedUrl, computeImageOptimizationConfig, } from '../../../primitives/lib/image-optimization.js';
 /**
  * Optimized image component for non-schema images.
  *
@@ -32,7 +32,7 @@ import { clampQuality, resolveFit, toObjectFit, toPositiveInt, isOptimizableFimo
  * <StaticImage src="/images/logo.svg" alt="Logo" unoptimized />
  */
 export function StaticImage(props) {
-    const { src, alt, quality, unoptimized = false, fit, width, height, srcSet: srcSetOverride, sizes, style, ...imgProps } = props;
+    const { src, alt, quality, unoptimized = false, fit, width, height, srcSet: srcSetOverride, sizes, style, hostSuffixes, ...imgProps } = props;
     if (!src) {
         return null;
     }
@@ -42,7 +42,7 @@ export function StaticImage(props) {
     const requestedHeight = toPositiveInt(height);
     const hasSizesAttr = typeof sizes === 'string' && sizes.trim().length > 0;
     const hasSizingHint = hasSizesAttr || requestedWidth !== undefined || requestedHeight !== undefined;
-    const canOptimizeSource = !unoptimized && isOptimizableFimoUrl(src);
+    const canOptimizeSource = !unoptimized && isOptimizableFimoUrl(src, hostSuffixes);
     const shouldOptimize = canOptimizeSource && hasSizingHint;
     const { generatedSrcSet, transformWidth, transformDpr } = computeImageOptimizationConfig({
         shouldOptimize,
@@ -53,6 +53,7 @@ export function StaticImage(props) {
         renderWidth: requestedWidth,
         quality: normalizedQuality,
         fit: normalizedFit,
+        hostSuffixes,
     });
     const finalSrcSet = srcSetOverride ?? generatedSrcSet;
     const optimizedSrc = shouldOptimize
@@ -61,6 +62,7 @@ export function StaticImage(props) {
             quality: normalizedQuality,
             fit: normalizedFit,
             dpr: transformDpr,
+            hostSuffixes,
         })
         : src;
     const finalStyle = style?.objectFit

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

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+import type { VideoProps } from '../contracts.js';
+interface VideoRendererProps extends VideoProps {
+    elementRef?: RefObject<HTMLElement | null>;
+}
+export declare function VideoRenderer({ value: media, children, overrideSrc, autoPlay, loop, muted, playsInline, style, elementRef, ...videoProps }: VideoRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VideoRenderer.d.ts.map

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FIMO_SOURCE } from '../../../primitives/lib/primitives.js';
+export function VideoRenderer({ value: media, children, overrideSrc, autoPlay = true, loop = true, muted = true, playsInline = true, style, elementRef, ...videoProps }) {
+    const mediaSource = media[FIMO_SOURCE];
+    if (children) {
+        return (_jsx("span", { ref: elementRef, "data-fimo-source": mediaSource, children: children(media) }));
+    }
+    const finalSrc = overrideSrc ?? media.url;
+    return (_jsx("video", { ref: elementRef, src: finalSrc, width: media.width, height: media.height, autoPlay: autoPlay, loop: loop, muted: muted, playsInline: playsInline, style: style, ...videoProps, "data-fimo-source": mediaSource }));
+}

package/dist/runtime/{primitives/lib → react}/useFimoLiveValue.d.ts

@@ -9,9 +9,9 @@ import { type RefObject } from 'react';
  * preview knows to dispatch events instead of falling back to raw DOM writes,
  * and updates internal state when a mutation arrives.
  *
- * The subscription is framework-neutral: Vite and Next.js render the same
- * primitives, and environments that never dispatch `fimo:live-edit` simply
- * keep mirroring the external value.
+ * The hook is framework-adapter-neutral: Vite and Next.js clients render the
+ * same React primitives, and environments that never dispatch
+ * `fimo:live-edit` simply keep mirroring the external value.
  */
 export declare function useFimoLiveValue<T, E extends HTMLElement = HTMLElement>(external: T): {
     value: T;

package/dist/runtime/{primitives/lib → react}/useFimoLiveValue.js

@@ -9,9 +9,9 @@ import { useEffect, useRef, useState } from 'react';
  * preview knows to dispatch events instead of falling back to raw DOM writes,
  * and updates internal state when a mutation arrives.
  *
- * The subscription is framework-neutral: Vite and Next.js render the same
- * primitives, and environments that never dispatch `fimo:live-edit` simply
- * keep mirroring the external value.
+ * The hook is framework-adapter-neutral: Vite and Next.js clients render the
+ * same React primitives, and environments that never dispatch
+ * `fimo:live-edit` simply keep mirroring the external value.
  */
 export function useFimoLiveValue(external) {
     const ref = useRef(null);

package/dist/runtime/vite/primitives/Images.d.ts

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

package/dist/runtime/vite/primitives/Images.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { parseImageHostSuffixes } from '../../primitives/lib/image-optimization.js';
+import { Image as BaseImage } from '../../react/primitives/editable/Image.js';
+import { StaticImage as BaseStaticImage } from '../../react/primitives/renderers/StaticImage.js';
+const viteEnvironment = import.meta.env;
+const IMAGE_HOST_SUFFIXES = parseImageHostSuffixes(viteEnvironment?.VITE_FIMO_IMAGE_HOSTS);
+export function Image(props) {
+    return _jsx(BaseImage, { ...props, hostSuffixes: IMAGE_HOST_SUFFIXES });
+}
+export function StaticImage(props) {
+    return _jsx(BaseStaticImage, { ...props, hostSuffixes: IMAGE_HOST_SUFFIXES });
+}

package/dist/runtime/{primitives → vite}/translations.d.ts

@@ -1,4 +1,4 @@
-import { FimoString } from './lib/index.js';
+import { FimoString } from '../primitives/lib/index.js';
 /**
  * Hook to provide a label function (`t`).
  *

package/dist/runtime/{primitives → vite}/translations.js

@@ -1,7 +1,7 @@
 import { useSyncExternalStore } from 'react';
 import { defaultLocale as bundledDefaultLocale, dictionaries as bundledDictionaries, signature as translationSignature, updatedAt as bundledUpdatedAt, } from 'virtual:translations';
 import { useLocale } from '../i18n/FimoLocaleContext.js';
-import { FimoString } from './lib/index.js';
+import { FimoString } from '../primitives/lib/index.js';
 const labelListeners = new Set();
 let labelState = {
     dictionaries: bundledDictionaries ?? {},

package/package.json

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

package/templates/react-router/package.json

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

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

@@ -1,29 +0,0 @@
-import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
-import { type FimoBoolean } from '../lib/index.js';
-type BooleanProps<T extends ElementType = 'span'> = {
-    value: FimoBoolean;
-    as?: T;
-    children?: (value: boolean) => ReactNode;
-} & Omit<ComponentPropsWithoutRef<T>, 'value' | 'as' | 'children'>;
-/**
- * Boolean component for rendering boolean values with source tracking
- *
- * Use children render function to customize how the boolean is displayed.
- *
- * @example
- * // Default (renders "true" or "false")
- * <Boolean value={product.inStock} />
- *
- * // With render function for custom display
- * <Boolean value={product.inStock}>
- *   {(val) => val ? '✓ In Stock' : '✗ Out of Stock'}
- * </Boolean>
- *
- * // Conditional styling
- * <Boolean value={product.featured}>
- *   {(val) => val && <span className="badge">Featured</span>}
- * </Boolean>
- */
-export declare function Boolean<T extends ElementType = 'span'>({ value, as, children, ...props }: BooleanProps<T>): import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=Boolean.d.ts.map

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

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FIMO_SOURCE, useFimoLiveValue } from '../lib/index.js';
-/**
- * Boolean component for rendering boolean values with source tracking
- *
- * Use children render function to customize how the boolean is displayed.
- *
- * @example
- * // Default (renders "true" or "false")
- * <Boolean value={product.inStock} />
- *
- * // With render function for custom display
- * <Boolean value={product.inStock}>
- *   {(val) => val ? '✓ In Stock' : '✗ Out of Stock'}
- * </Boolean>
- *
- * // Conditional styling
- * <Boolean value={product.featured}>
- *   {(val) => val && <span className="badge">Featured</span>}
- * </Boolean>
- */
-export function Boolean({ value, as, children, ...props }) {
-    const Component = as || 'span';
-    const { value: liveBool, ref } = useFimoLiveValue(value ? value.valueOf() : false);
-    // Defensive: return null if no value
-    if (!value) {
-        return null;
-    }
-    const source = value[FIMO_SOURCE];
-    // Use render function if provided, otherwise display raw boolean
-    const content = children ? children(liveBool) : String(liveBool);
-    return (_jsx(Component, { ref: ref, ...props, "data-fimo-source": source, children: content }));
-}

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

@@ -1,30 +0,0 @@
-import { type ReactNode } from 'react';
-import { type FimoDate, type FimoString } from '../lib/index.js';
-type DateProps = {
-    value: FimoDate | FimoString | Date | string;
-    children?: (date: Date) => ReactNode;
-    className?: string;
-};
-/**
- * Date component for rendering dates with source tracking
- *
- * Default format uses browser's locale (e.g., "28 ene 2026" in Spain, "Jan 28, 2026" in US)
- * Use children render function for custom formatting.
- *
- * @example
- * // Default format (locale-aware)
- * <Date value={post.publishedAt} />
- *
- * // Custom format with render function
- * <Date value={post.publishedAt}>
- *   {(date) => format(date, 'EEEE, MMMM do yyyy')}
- * </Date>
- *
- * // Relative time
- * <Date value={post.publishedAt}>
- *   {(date) => formatDistanceToNow(date, { addSuffix: true })}
- * </Date>
- */
-export declare function Date({ value, children, className }: DateProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=Date.d.ts.map

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

@@ -1,43 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FIMO_SOURCE, useFimoLiveValue } from '../lib/index.js';
-/**
- * Date component for rendering dates with source tracking
- *
- * Default format uses browser's locale (e.g., "28 ene 2026" in Spain, "Jan 28, 2026" in US)
- * Use children render function for custom formatting.
- *
- * @example
- * // Default format (locale-aware)
- * <Date value={post.publishedAt} />
- *
- * // Custom format with render function
- * <Date value={post.publishedAt}>
- *   {(date) => format(date, 'EEEE, MMMM do yyyy')}
- * </Date>
- *
- * // Relative time
- * <Date value={post.publishedAt}>
- *   {(date) => formatDistanceToNow(date, { addSuffix: true })}
- * </Date>
- */
-export function Date({ value, children, className }) {
-    const { value: liveValue, ref } = useFimoLiveValue(value ?? null);
-    // Defensive: return null if no value
-    if (!liveValue) {
-        return null;
-    }
-    const source = typeof value === 'object' && FIMO_SOURCE in value ? value[FIMO_SOURCE] : undefined;
-    const rawValue = liveValue instanceof String ? liveValue.toString() : liveValue;
-    const dateValue = new globalThis.Date(rawValue);
-    // Format for datetime attribute (ISO format)
-    const isoDate = dateValue.toISOString().split('T')[0];
-    // Render content - use children if provided, otherwise locale-aware default
-    const content = children
-        ? children(dateValue)
-        : dateValue.toLocaleDateString(undefined, {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-        });
-    return (_jsx("time", { ref: ref, dateTime: isoDate, className: className, "data-fimo-source": source, children: content }));
-}

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

@@ -1,72 +0,0 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type ImageFit } from '../lib/image-optimization.js';
-import { type FimoMedia } from '../lib/index.js';
-/** Base props for Image, extending native img props with optimization options. */
-type BaseImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'alt' | '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 original URL. */
-    unoptimized?: boolean;
-    overrideSrc?: string;
-};
-type ImageProps = BaseImageProps & {
-    /** The FimoMedia object from schema data. */
-    value: FimoMedia;
-    /** Override the alt text from FimoMedia. */
-    alt?: string;
-    /** Render function for custom markup (bypasses default img rendering). */
-    children?: (media: FimoMedia) => ReactNode;
-};
-/**
- * Image component for rendering schema media with optional optimization.
- *
- * Optimization:
- * - Applies only to http(s) URLs on *.fimo.team, *.fimo.ai, and *.fimo.site.
- * - Generates optimized `src` automatically only when at least one sizing hint
- *   is provided (`width`, `height`, or `sizes`).
- * - Uses default quality 85 and internal format=auto.
- * - Maps `fit` to CSS object-fit by default.
- *
- * Escape hatch:
- * - Pass `unoptimized` to bypass all URL rewriting.
- *
- * Use children render function for custom rendering (e.g., picture element).
- *
- * @example
- * <Image value={post.coverImage} />
- * <Image value={post.coverImage} className="rounded-lg" loading="lazy" />
- *
- * // With render function for custom markup
- * <Image value={post.cover}>
- *   {(media) => (
- *     <img src={media.url} alt={media.alt} />
- *   )}
- * </Image>
- *
- * // Fixed-size mode (no `sizes`): uses DPR candidates
- * <Image value={post.coverImage} width={320} />
- * // srcSet:
- * // ...?w=320&q=85&fit=scale-down&f=auto&dpr=1 1x,
- * // ...?w=320&q=85&fit=scale-down&f=auto&dpr=2 2x
- * // src:
- * // ...?w=320&q=85&fit=scale-down&f=auto&dpr=2
- *
- * // Responsive mode (`sizes`): uses width candidates
- * <Image
- *   value={post.coverImage}
- *   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
- * />
- * // srcSet (example):
- * // ...?w=640&q=85&fit=scale-down&f=auto 640w,
- * // ...?w=750&q=85&fit=scale-down&f=auto 750w,
- * // ...?w=828&q=85&fit=scale-down&f=auto 828w
- *
- * // No `width`/`height`/`sizes`: keep source URL unchanged
- * <Image value={post.coverImage} />
- * // src: original media URL
- */
-export declare function Image(props: ImageProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=Image.d.ts.map

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

@@ -1,108 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { clampQuality, resolveFit, toObjectFit, toPositiveInt, isOptimizableFimoUrl, buildOptimizedUrl, computeImageOptimizationConfig, } from '../lib/image-optimization.js';
-import { FIMO_SOURCE, useFimoLiveValue } from '../lib/index.js';
-/**
- * Image component for rendering schema media with optional optimization.
- *
- * Optimization:
- * - Applies only to http(s) URLs on *.fimo.team, *.fimo.ai, and *.fimo.site.
- * - Generates optimized `src` automatically only when at least one sizing hint
- *   is provided (`width`, `height`, or `sizes`).
- * - Uses default quality 85 and internal format=auto.
- * - Maps `fit` to CSS object-fit by default.
- *
- * Escape hatch:
- * - Pass `unoptimized` to bypass all URL rewriting.
- *
- * Use children render function for custom rendering (e.g., picture element).
- *
- * @example
- * <Image value={post.coverImage} />
- * <Image value={post.coverImage} className="rounded-lg" loading="lazy" />
- *
- * // With render function for custom markup
- * <Image value={post.cover}>
- *   {(media) => (
- *     <img src={media.url} alt={media.alt} />
- *   )}
- * </Image>
- *
- * // Fixed-size mode (no `sizes`): uses DPR candidates
- * <Image value={post.coverImage} width={320} />
- * // srcSet:
- * // ...?w=320&q=85&fit=scale-down&f=auto&dpr=1 1x,
- * // ...?w=320&q=85&fit=scale-down&f=auto&dpr=2 2x
- * // src:
- * // ...?w=320&q=85&fit=scale-down&f=auto&dpr=2
- *
- * // Responsive mode (`sizes`): uses width candidates
- * <Image
- *   value={post.coverImage}
- *   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
- * />
- * // srcSet (example):
- * // ...?w=640&q=85&fit=scale-down&f=auto 640w,
- * // ...?w=750&q=85&fit=scale-down&f=auto 750w,
- * // ...?w=828&q=85&fit=scale-down&f=auto 828w
- *
- * // No `width`/`height`/`sizes`: keep source URL unchanged
- * <Image value={post.coverImage} />
- * // src: original media URL
- */
-export function Image(props) {
-    const { value: media, children, quality, unoptimized = false, fit, width, height, alt: altOverride, overrideSrc, srcSet: srcSetOverride, sizes, style, ...imgProps } = props;
-    const { value: liveMedia, ref } = useFimoLiveValue(media ?? null);
-    // Defensive: return null if no media
-    if (!liveMedia) {
-        return null;
-    }
-    const mediaSource = liveMedia[FIMO_SOURCE];
-    if (children) {
-        return (_jsx("span", { ref: ref, "data-fimo-source": mediaSource, children: children(liveMedia) }));
-    }
-    const normalizedQuality = clampQuality(quality);
-    const normalizedFit = resolveFit(fit);
-    const requestedWidth = toPositiveInt(width);
-    const requestedHeight = toPositiveInt(height);
-    const displayWidth = requestedWidth ?? liveMedia.width;
-    const displayHeight = requestedHeight ?? liveMedia.height;
-    const originalSrc = liveMedia.url;
-    const resolvedAlt = altOverride ?? liveMedia.alt;
-    // User-defined sizes attribute
-    const hasSizesAttr = typeof sizes === 'string' && sizes.trim().length > 0;
-    const hasSizingHint = hasSizesAttr || requestedWidth !== undefined || requestedHeight !== undefined;
-    const canOptimizeSource = !unoptimized && isOptimizableFimoUrl(originalSrc);
-    const shouldOptimize = canOptimizeSource && hasSizingHint;
-    const { generatedSrcSet, transformWidth, transformDpr } = computeImageOptimizationConfig({
-        shouldOptimize,
-        hasSizesAttr,
-        srcSetOverride,
-        originalSrc,
-        mediaWidth: media.width,
-        renderWidth: displayWidth,
-        quality: normalizedQuality,
-        fit: normalizedFit,
-    });
-    const finalSrcSet = srcSetOverride ?? generatedSrcSet;
-    const optimizedSrc = shouldOptimize
-        ? buildOptimizedUrl(originalSrc, {
-            width: transformWidth,
-            quality: normalizedQuality,
-            fit: normalizedFit,
-            dpr: transformDpr,
-        })
-        : originalSrc;
-    const finalSrc = overrideSrc ?? optimizedSrc;
-    /**
-     * Apply browser-side object fitting so the rendered image also respects
-     * the container box. Cloudflare `fit` controls transformed pixels, while
-     * `object-fit` controls layout behavior at render time.
-     */
-    const finalStyle = style?.objectFit
-        ? style
-        : {
-            ...style,
-            objectFit: toObjectFit(normalizedFit),
-        };
-    return (_jsx("img", { ref: ref, src: finalSrc, alt: resolvedAlt, width: displayWidth, height: displayHeight, style: finalStyle, sizes: sizes, srcSet: finalSrcSet, ...imgProps, "data-fimo-source": mediaSource }));
-}

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

@@ -1,25 +0,0 @@
-import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
-type JsonProps<T extends ElementType = 'span'> = {
-    value: unknown;
-    as?: T;
-    children?: (value: unknown) => ReactNode;
-} & Omit<ComponentPropsWithoutRef<T>, 'value' | 'as' | 'children'>;
-/**
- * Json component for rendering JSON field values with source tracking.
- *
- * Use children render function to customize how the value is displayed.
- * Pass `as="pre"` (with a `white-space: pre-wrap` class) for formatted output.
- *
- * @example
- * // Default (single-line JSON text)
- * <Json value={product.metadata} />
- *
- * // Pretty-printed
- * <Json value={product.metadata} as="pre" className="whitespace-pre-wrap" />
- *
- * // With render function for custom display
- * <Json value={product.metadata}>{(val) => val.tags?.join(', ')}</Json>
- */
-export declare function Json<T extends ElementType = 'span'>({ value, as, children, ...props }: JsonProps<T>): import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=Json.d.ts.map

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

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getFimoSource, useFimoLiveValue } from '../lib/index.js';
-/**
- * Json component for rendering JSON field values with source tracking.
- *
- * Use children render function to customize how the value is displayed.
- * Pass `as="pre"` (with a `white-space: pre-wrap` class) for formatted output.
- *
- * @example
- * // Default (single-line JSON text)
- * <Json value={product.metadata} />
- *
- * // Pretty-printed
- * <Json value={product.metadata} as="pre" className="whitespace-pre-wrap" />
- *
- * // With render function for custom display
- * <Json value={product.metadata}>{(val) => val.tags?.join(', ')}</Json>
- */
-export function Json({ value, as, children, ...props }) {
-    const Component = as || 'span';
-    const { value: liveValue, ref } = useFimoLiveValue(value);
-    // Defensive: return null if no value
-    if (value === null || value === undefined) {
-        return null;
-    }
-    const source = getFimoSource(value);
-    const content = children ? children(liveValue) : JSON.stringify(liveValue);
-    return (_jsx(Component, { ref: ref, ...props, "data-fimo-source": source, children: content }));
-}

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

@@ -1,9 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import { type FimoRichText, type FimoRichTextComponents } from '../lib/index.js';
-type RichTextProps = {
-    value: FimoRichText | null | undefined;
-    components?: FimoRichTextComponents;
-} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
-export declare function RichText({ value, components, ...props }: RichTextProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=RichText.d.ts.map

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

@@ -1,31 +0,0 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type FimoMedia } from '../lib/index.js';
-type BaseVideoProps = Omit<ComponentPropsWithoutRef<'video'>, 'src' | 'children'> & {
-    overrideSrc?: string;
-};
-type VideoProps = BaseVideoProps & {
-    value: FimoMedia;
-    children?: (media: FimoMedia) => ReactNode;
-};
-/**
- * Video component for rendering schema media with source tracking.
- *
- * Renders a native `<video>` element with `data-fimo-source` for edit tracking.
- * Defaults to `autoPlay`, `loop`, `muted`, and `playsInline` for hero/background use.
- * All defaults can be overridden via props.
- *
- * @example
- * <Video value={post.heroVideo} />
- * <Video value={post.heroVideo} autoPlay={false} controls />
- * <Video value={post.bgVideo} className="absolute inset-0 object-cover" />
- *
- * // With render function for custom markup
- * <Video value={post.video}>
- *   {(media) => (
- *     <video src={media.url} controls />
- *   )}
- * </Video>
- */
-export declare function Video(props: VideoProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=Video.d.ts.map

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

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FIMO_SOURCE, useFimoLiveValue } from '../lib/index.js';
-/**
- * Video component for rendering schema media with source tracking.
- *
- * Renders a native `<video>` element with `data-fimo-source` for edit tracking.
- * Defaults to `autoPlay`, `loop`, `muted`, and `playsInline` for hero/background use.
- * All defaults can be overridden via props.
- *
- * @example
- * <Video value={post.heroVideo} />
- * <Video value={post.heroVideo} autoPlay={false} controls />
- * <Video value={post.bgVideo} className="absolute inset-0 object-cover" />
- *
- * // With render function for custom markup
- * <Video value={post.video}>
- *   {(media) => (
- *     <video src={media.url} controls />
- *   )}
- * </Video>
- */
-export function Video(props) {
-    const { value: media, children, overrideSrc, autoPlay = true, loop = true, muted = true, playsInline = true, style, ...videoProps } = props;
-    const { value: liveMedia, ref } = useFimoLiveValue(media ?? null);
-    if (!liveMedia) {
-        return null;
-    }
-    const mediaSource = liveMedia[FIMO_SOURCE];
-    if (children) {
-        return (_jsx("span", { ref: ref, "data-fimo-source": mediaSource, children: children(liveMedia) }));
-    }
-    const finalSrc = overrideSrc ?? liveMedia.url;
-    return (_jsx("video", { ref: ref, src: finalSrc, width: liveMedia.width, height: liveMedia.height, autoPlay: autoPlay, loop: loop, muted: muted, playsInline: playsInline, style: style, ...videoProps, "data-fimo-source": mediaSource }));
-}