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

package/dist/scripts/sync-schemas.js

@@ -5,18 +5,22 @@ import { basename, dirname, join, resolve } from 'node:path';
  * hook files generated from the hooks template.
  *
  * - Scans `<cwd>/src/schemas/*.json`.
- * - Renders the shared types plus either the Vite facade or the split Next server/client facades.
+ * - Renders shared types plus either the React facade or 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 { camelCase, pascalCase } from 'change-case';
 import { Eta } from 'eta';
 import { z } from 'zod';
 import { assetPath } from './utils/assets.js';
 const SCHEMAS_REL = 'src/schemas';
+const GENERATED_REGISTRY_MARKER = '// AUTO-GENERATED by `fimo` from src/schemas/*.json - DO NOT EDIT.';
+// Before 0.7, generated schema clients contained their own runtime. Keep using
+// those projects' bundled templates instead of generating imports they cannot satisfy.
 const MINIMUM_THIN_CONTENT_CLIENT_RUNTIME_VERSION = '0.7.0';
 const CONTENT_CLIENT_RUNTIME_UPGRADE_COMMAND = 'npm install fimo@latest';
 const SCHEMA_DEFINITION_SCHEMA = z.object({
     uid: z.string().min(1),
+    name: z.string().min(1).optional(),
     isSingleton: z.boolean().optional(),
     i18n: z.object({ enabled: z.boolean().optional() }).optional(),
     fields: z.record(z.string(), z.unknown()).optional(),
@@ -27,6 +31,7 @@ function getSchemaFiles(schemasDir) {
     }
     return readdirSync(schemasDir)
         .filter((f) => f.endsWith('.json'))
+        .sort()
         .map((f) => join(schemasDir, f));
 }
 function getGeneratedFiles(schemasDir) {
@@ -60,6 +65,16 @@ function isVersionAtLeast(version, minimum) {
     }
     return !parsed.prerelease || parsedMinimum.prerelease;
 }
+function packageExportsSubpath(packageJson, subpath) {
+    if (!packageJson || typeof packageJson !== 'object' || Array.isArray(packageJson)) {
+        return false;
+    }
+    const exports = packageJson.exports;
+    return Boolean(exports &&
+        typeof exports === 'object' &&
+        !Array.isArray(exports) &&
+        Object.prototype.hasOwnProperty.call(exports, subpath));
+}
 function resolveProjectRuntime(cwd) {
     const packagePath = join(cwd, 'node_modules', 'fimo', 'package.json');
     if (!existsSync(packagePath)) {
@@ -67,45 +82,29 @@ function resolveProjectRuntime(cwd) {
             `Run \`${CONTENT_CLIENT_RUNTIME_UPGRADE_COMMAND}\` in the project, then run \`npx fimo@latest validate\` again. ` +
             'No generated files were changed.');
     }
-    let version;
+    let packageJson;
     try {
-        version = JSON.parse(readFileSync(packagePath, 'utf-8')).version;
+        packageJson = JSON.parse(readFileSync(packagePath, 'utf-8'));
     }
     catch {
-        version = null;
+        packageJson = null;
     }
+    const version = packageJson && typeof packageJson === 'object' && !Array.isArray(packageJson)
+        ? packageJson.version
+        : null;
     if (typeof version !== 'string' || !parseVersion(version)) {
         throw new Error(`Cannot generate schema clients with project-local fimo@${typeof version === 'string' ? version : 'unknown'}. ` +
             `Run \`${CONTENT_CLIENT_RUNTIME_UPGRADE_COMMAND}\` in the project, then run \`npx fimo@latest validate\` again. ` +
             'No generated files were changed.');
     }
-    return { packageRoot: dirname(packagePath), version };
+    return {
+        packageRoot: dirname(packagePath),
+        version,
+        providesNextRuntime: packageExportsSubpath(packageJson, './next') && packageExportsSubpath(packageJson, './next/client'),
+    };
 }
-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 contentRuntimeImportFor(framework) {
+    return framework === 'nextjs' ? 'fimo/next' : 'fimo/ui';
 }
 function templatePath(runtime, fileName) {
     if (runtime && !isVersionAtLeast(runtime.version, MINIMUM_THIN_CONTENT_CLIENT_RUNTIME_VERSION)) {
@@ -113,10 +112,56 @@ function templatePath(runtime, fileName) {
     }
     return assetPath('content-templates', fileName);
 }
+function resolveSchemaGenerationTarget(runtimeImport, runtime) {
+    if (runtimeImport === 'fimo/ui') {
+        return 'react';
+    }
+    if (!runtime.providesNextRuntime) {
+        throw new Error(`Cannot generate schema clients because project-local fimo@${runtime.version} does not provide the ` +
+            'fimo/next and fimo/next/client exports required by this Next.js project. ' +
+            `Run \`${CONTENT_CLIENT_RUNTIME_UPGRADE_COMMAND}\` in the project, then run \`npx fimo@latest validate\` again. ` +
+            'No generated files were changed.');
+    }
+    return 'next';
+}
+function templatesForTarget(target, runtime, runtimeImport) {
+    if (target === 'next') {
+        return [
+            {
+                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',
+            },
+        ];
+    }
+    return [
+        {
+            suffix: '.types.ts',
+            path: templatePath(runtime, 'types-template.eta'),
+            runtimeImport,
+        },
+        {
+            suffix: '.ts',
+            path: templatePath(runtime, 'hooks-template.eta'),
+            runtimeImport,
+        },
+    ];
+}
 function loadSchemas(schemaFiles) {
     const errors = [];
     const schemas = [];
     const outputOwners = new Map();
+    const registryOwners = new Map();
     for (const path of schemaFiles) {
         const fileUid = basename(path, '.json');
         const pascal = pascalCase(fileUid);
@@ -156,13 +201,33 @@ function loadSchemas(schemaFiles) {
             errors.push(`${basename(path)} has an invalid schema shape: ${details}`);
             continue;
         }
-        schemas.push({ pascal, schema: validation.data });
+        const registryKey = camelCase(validation.data.name ?? validation.data.uid);
+        const existingRegistryOwner = registryOwners.get(registryKey);
+        if (existingRegistryOwner && existingRegistryOwner !== fileUid) {
+            errors.push(`${basename(path)} and ${existingRegistryOwner}.json both generate the content registry key "${registryKey}". Rename one schema display name to keep generated registry keys unique.`);
+            continue;
+        }
+        registryOwners.set(registryKey, fileUid);
+        schemas.push({ pascal, registryKey, schema: validation.data });
     }
     if (errors.length > 0) {
         throw new Error(`Cannot generate schema clients:\n- ${errors.join('\n- ')}\nNo generated files were changed.`);
     }
     return schemas;
 }
+function renderContentRegistry(schemas) {
+    const imports = schemas.map(({ pascal }) => `import * as ${pascal} from "./${pascal}";`).join('\n');
+    const entries = schemas.map(({ pascal, registryKey }) => `  ${registryKey}: ${pascal},`).join('\n');
+    return `${GENERATED_REGISTRY_MARKER}
+// Server code imports this registry and passes it to createFimo({ content, locale }).
+
+${imports}
+
+export const content = {
+${entries}
+} as const;
+`;
+}
 function normalizeFields(fields) {
     return Object.fromEntries(Object.entries(fields).map(([key, value]) => {
         if (!value || typeof value !== 'object' || Array.isArray(value)) {
@@ -226,7 +291,7 @@ function schemaToModel(schema, localizedByUid) {
         referenceImports: referenceImportsFor(schema, fields),
     };
 }
-export function syncSchemas(options = {}) {
+export function syncSchemas(options) {
     const cwd = options.cwd ?? process.cwd();
     const log = (msg) => {
         if (options.verbose !== false) {
@@ -234,44 +299,20 @@ export function syncSchemas(options = {}) {
         }
     };
     const schemasDir = resolve(cwd, SCHEMAS_REL);
+    const registryPath = join(schemasDir, 'index.ts');
     const schemaFiles = getSchemaFiles(schemasDir);
     const schemas = loadSchemas(schemaFiles);
     const generatedFilesOnDisk = getGeneratedFiles(schemasDir);
     const runtime = schemas.length > 0 || generatedFilesOnDisk.length > 0 ? resolveProjectRuntime(cwd) : null;
-    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 runtimeImport = contentRuntimeImportFor(options.framework);
+    const generationTarget = runtime ? resolveSchemaGenerationTarget(runtimeImport, runtime) : null;
+    const needsNextRegistry = generationTarget === 'next' && schemas.length > 0;
+    const ownsExistingRegistry = existsSync(registryPath) && readFileSync(registryPath, 'utf-8').startsWith(GENERATED_REGISTRY_MARKER);
+    const shouldGenerateRegistry = needsNextRegistry && (!existsSync(registryPath) || ownsExistingRegistry);
+    if (needsNextRegistry && !shouldGenerateRegistry) {
+        log(`Kept project-owned schema barrel: ${registryPath}`);
+    }
+    const templates = generationTarget && runtime ? templatesForTarget(generationTarget, runtime, runtimeImport) : [];
     const loadedTemplates = templates.map((template) => ({
         ...template,
         source: readFileSync(template.path, 'utf-8'),
@@ -291,6 +332,10 @@ export function syncSchemas(options = {}) {
             generatedFiles.set(tsPath, eta.renderString(template.source, { model, runtimeImport: template.runtimeImport }));
         }
     }
+    if (shouldGenerateRegistry) {
+        expectedTsFiles.add(registryPath);
+        generatedFiles.set(registryPath, renderContentRegistry(schemas));
+    }
     for (const [tsPath, content] of generatedFiles) {
         const dir = dirname(tsPath);
         if (!existsSync(dir)) {
@@ -320,6 +365,13 @@ export function syncSchemas(options = {}) {
             }
         }
     }
+    if (!shouldGenerateRegistry &&
+        existsSync(registryPath) &&
+        readFileSync(registryPath, 'utf-8').startsWith(GENERATED_REGISTRY_MARKER)) {
+        unlinkSync(registryPath);
+        deleted++;
+        log(`Deleted orphaned: ${registryPath}`);
+    }
     if ((created > 0 || updated > 0 || deleted > 0) && options.verbose !== false) {
         log(`Sync schemas: ${created} created, ${updated} updated, ${deleted} deleted`);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fimo",
-  "version": "0.12.0-staging.1",
+  "version": "0.12.0-staging.3",
   "description": "Fimo CLI - create, deploy, and manage Fimo projects",
   "bin": {
     "fimo": "dist/cli/index.js"
@@ -93,6 +93,7 @@
     "@fimo/agents-bundle": "workspace:*",
     "@fimo/api-contracts": "workspace:*",
     "@fimo/cli-kit": "workspace:*",
+    "@fimo/framework-detect": "workspace:*",
     "@fimo/mcp": "workspace:*",
     "@fimo/tsconfig": "workspace:*",
     "@modelcontextprotocol/sdk": "1.27.1",

package/templates/react-router/AGENTS.md

@@ -4,10 +4,12 @@ This is a Fimo project — a content + media + forms + analytics platform for Re
 dashboard. Fimo owns everything after the build: content, editing, environments, and hosting stay
 editable by the whole team.
 
+When asked to create or manage an agent in this project, use Fimo's agent workflow.
+
 ## Load the Fimo skills before doing Fimo work
 
-Fimo ships its skills through its CLI so they always match this project's installed version. Before
-writing schema-driven code, running CLI/deploy workflows, or migrating content, load the relevant skill:
+Fimo ships its skills through its CLI. Before writing schema-driven code, running CLI/deploy workflows,
+or migrating content, load the relevant skill:
 
 ```bash
 npx fimo@latest skills list          # what's available

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.3",
     "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 }));
-}