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

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,14 +9,12 @@ 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.
  *
- * In prod (published app): Vite statically inlines `import.meta.env.DEV`, so
- * `useFimoLiveValueProd` is the only implementation linked and the listener
- * machinery is dead-code-eliminated.
+ * 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.
  */
-declare function useFimoLiveValueDev<T, E extends HTMLElement = HTMLElement>(external: T): {
+export declare function useFimoLiveValue<T, E extends HTMLElement = HTMLElement>(external: T): {
     value: T;
     ref: RefObject<E | null>;
 };
-export declare const useFimoLiveValue: typeof useFimoLiveValueDev;
-export {};
 //# sourceMappingURL=useFimoLiveValue.d.ts.map

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

@@ -1,4 +1,3 @@
-/// <reference types="vite/client" />
 import { useEffect, useRef, useState } from 'react';
 /**
  * useFimoLiveValue — mirror a Fimo value into React state so live edits
@@ -10,11 +9,11 @@ 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.
  *
- * In prod (published app): Vite statically inlines `import.meta.env.DEV`, so
- * `useFimoLiveValueProd` is the only implementation linked and the listener
- * machinery is dead-code-eliminated.
+ * 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.
  */
-function useFimoLiveValueDev(external) {
+export function useFimoLiveValue(external) {
     const ref = useRef(null);
     const [value, setValue] = useState(external);
     const externalRef = useRef(external);
@@ -42,8 +41,3 @@ function useFimoLiveValueDev(external) {
     }, []);
     return { value, ref };
 }
-function useFimoLiveValueProd(external) {
-    const ref = useRef(null);
-    return { value: external, ref };
-}
-export const useFimoLiveValue = (import.meta.env.DEV ? useFimoLiveValueDev : useFimoLiveValueProd);

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.js

@@ -5,8 +5,8 @@ import { basename, dirname, join, resolve } from 'node:path';
  * hook files generated from the hooks template.
  *
  * - Scans `<cwd>/src/schemas/*.json`.
- * - Renders `assets/content-templates/types-template.eta` and `hooks-template.eta`.
- * - Creates/updates `<cwd>/src/schemas/<Pascal>.types.ts` and `<Pascal>.ts`; deletes orphans.
+ * - Renders the shared types plus either the Vite facade or the split Next server/client facades.
+ * - Creates/updates `<Pascal>.types.ts` and `<Pascal>.ts`, plus `<Pascal>.client.ts` for Next; deletes orphans.
  */
 import { pascalCase } from 'change-case';
 import { Eta } from 'eta';
@@ -81,6 +81,32 @@ function resolveProjectRuntime(cwd) {
     }
     return { packageRoot: dirname(packagePath), version };
 }
+function resolveContentRuntimeImport(cwd) {
+    const packagePath = join(cwd, 'package.json');
+    if (!existsSync(packagePath)) {
+        return 'fimo/ui';
+    }
+    let packageJson;
+    try {
+        packageJson = JSON.parse(readFileSync(packagePath, 'utf-8'));
+    }
+    catch {
+        return 'fimo/ui';
+    }
+    if (!packageJson || typeof packageJson !== 'object' || Array.isArray(packageJson)) {
+        return 'fimo/ui';
+    }
+    const manifest = packageJson;
+    const dependencyGroups = ['dependencies', 'devDependencies', 'peerDependencies'];
+    const usesNext = dependencyGroups.some((group) => {
+        const dependencies = manifest[group];
+        return Boolean(dependencies &&
+            typeof dependencies === 'object' &&
+            !Array.isArray(dependencies) &&
+            typeof dependencies.next === 'string');
+    });
+    return usesNext ? 'fimo/next' : 'fimo/ui';
+}
 function templatePath(runtime, fileName) {
     if (runtime && !isVersionAtLeast(runtime.version, MINIMUM_THIN_CONTENT_CLIENT_RUNTIME_VERSION)) {
         return join(runtime.packageRoot, 'assets', 'content-templates', fileName);
@@ -115,11 +141,11 @@ function loadSchemas(schemaFiles) {
         }
         const candidate = parsed;
         if (typeof candidate.uid !== 'string' || candidate.uid.length === 0) {
-            errors.push(`${basename(path)} is missing \"uid\". Set it to \"${fileUid}\".`);
+            errors.push(`${basename(path)} is missing "uid". Set it to "${fileUid}".`);
             continue;
         }
         if (candidate.uid !== fileUid) {
-            errors.push(`${basename(path)} declares uid \"${candidate.uid}\". It must match the file name \"${fileUid}\".`);
+            errors.push(`${basename(path)} declares uid "${candidate.uid}". It must match the file name "${fileUid}".`);
             continue;
         }
         const validation = SCHEMA_DEFINITION_SCHEMA.safeParse(candidate);
@@ -212,16 +238,41 @@ export function syncSchemas(options = {}) {
     const schemas = loadSchemas(schemaFiles);
     const generatedFilesOnDisk = getGeneratedFiles(schemasDir);
     const runtime = schemas.length > 0 || generatedFilesOnDisk.length > 0 ? resolveProjectRuntime(cwd) : null;
-    const templates = [
-        {
-            suffix: '.types.ts',
-            path: templatePath(runtime, 'types-template.eta'),
-        },
-        {
-            suffix: '.ts',
-            path: templatePath(runtime, 'hooks-template.eta'),
-        },
-    ].map((template) => ({
+    const runtimeImport = resolveContentRuntimeImport(cwd);
+    const usesCurrentNextRuntime = runtimeImport === 'fimo/next' &&
+        runtime !== null &&
+        isVersionAtLeast(runtime.version, MINIMUM_THIN_CONTENT_CLIENT_RUNTIME_VERSION);
+    const templates = usesCurrentNextRuntime
+        ? [
+            {
+                suffix: '.types.ts',
+                path: templatePath(runtime, 'types-template.eta'),
+                runtimeImport: 'fimo/next',
+            },
+            {
+                suffix: '.ts',
+                path: templatePath(runtime, 'next-server-template.eta'),
+                runtimeImport: 'fimo/next',
+            },
+            {
+                suffix: '.client.ts',
+                path: templatePath(runtime, 'next-client-template.eta'),
+                runtimeImport: 'fimo/next/client',
+            },
+        ]
+        : [
+            {
+                suffix: '.types.ts',
+                path: templatePath(runtime, 'types-template.eta'),
+                runtimeImport,
+            },
+            {
+                suffix: '.ts',
+                path: templatePath(runtime, 'hooks-template.eta'),
+                runtimeImport,
+            },
+        ];
+    const loadedTemplates = templates.map((template) => ({
         ...template,
         source: readFileSync(template.path, 'utf-8'),
     }));
@@ -234,10 +285,10 @@ export function syncSchemas(options = {}) {
     let deleted = 0;
     for (const { pascal, schema } of schemas) {
         const model = schemaToModel(schema, localizedByUid);
-        for (const template of templates) {
+        for (const template of loadedTemplates) {
             const tsPath = join(schemasDir, `${pascal}${template.suffix}`);
             expectedTsFiles.add(tsPath);
-            generatedFiles.set(tsPath, eta.renderString(template.source, { model }));
+            generatedFiles.set(tsPath, eta.renderString(template.source, { model, runtimeImport: template.runtimeImport }));
         }
     }
     for (const [tsPath, content] of generatedFiles) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fimo",
-  "version": "0.11.1-staging.1",
+  "version": "0.12.0-staging.2",
   "description": "Fimo CLI - create, deploy, and manage Fimo projects",
   "bin": {
     "fimo": "dist/cli/index.js"
@@ -22,6 +22,18 @@
       "types": "./dist/runtime/index.d.ts",
       "import": "./dist/runtime/index.js"
     },
+    "./content": {
+      "types": "./dist/runtime/content/index.d.ts",
+      "import": "./dist/runtime/content/index.js"
+    },
+    "./next": {
+      "types": "./dist/runtime/next/server.d.ts",
+      "import": "./dist/runtime/next/server.js"
+    },
+    "./next/client": {
+      "types": "./dist/runtime/next/client.d.ts",
+      "import": "./dist/runtime/next/client.js"
+    },
     "./react-router": {
       "types": "./dist/runtime/react-router/index.d.ts",
       "import": "./dist/runtime/react-router/index.js"
@@ -63,6 +75,7 @@
     "publish:dry-run": "npm publish --dry-run",
     "postinstall": "node scripts/postinstall.mjs",
     "test": "vitest run",
+    "test:integration:next": "vitest run --config vitest.integration.config.ts",
     "test:watch": "vitest",
     "clean": "rm -rf dist *.tsbuildinfo"
   },

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.11.1-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