fimo 0.12.0-staging.1 → 0.12.0-staging.3

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

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/dist/scripts/sync-schemas.d.ts

@@ -1,5 +1,6 @@
 export interface SyncSchemasOptions {
     cwd?: string;
+    framework: string | null;
     verbose?: boolean;
 }
 export interface SyncResult {
@@ -7,4 +8,4 @@ export interface SyncResult {
     updated: number;
     deleted: number;
 }
-export declare function syncSchemas(options?: SyncSchemasOptions): SyncResult;
+export declare function syncSchemas(options: SyncSchemasOptions): SyncResult;