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

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 }));
-}

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

@@ -1,6 +0,0 @@
-export { Text } from './Text.js';
-export { Image } from './Image.js';
-export { Date } from './Date.js';
-export { Boolean } from './Boolean.js';
-export { RichText } from './RichText.js';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,5 +0,0 @@
-export { Text } from './Text.js';
-export { Image } from './Image.js';
-export { Date } from './Date.js';
-export { Boolean } from './Boolean.js';
-export { RichText } from './RichText.js';