fimo 0.14.0 → 0.15.0-staging.2

package/assets/skills/fimo-migration/scripts/inventory/locales/next-intl.mjs

@@ -0,0 +1,459 @@
+#!/usr/bin/env node
+
+import { existsSync, lstatSync, readFileSync, readdirSync, realpathSync } from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+
+const IGNORED_DIRECTORIES = new Set([
+  '.git',
+  '.next',
+  '.output',
+  '.turbo',
+  'build',
+  'coverage',
+  'dist',
+  'node_modules',
+  'public',
+]);
+const SOURCE_EXTENSIONS = new Set(['.js', '.jsx', '.mjs', '.mts', '.ts', '.tsx']);
+const MAX_SOURCE_FILES = 5_000;
+const MAX_SOURCE_BYTES = 1_000_000;
+const MAX_DICTIONARY_FILES = 10_000;
+const CONVENTIONAL_PATTERN = 'messages/{locale}.json';
+
+function fail(message) {
+  process.stderr.write(`${message}\n`);
+  process.exit(1);
+}
+
+function parseArguments(argv) {
+  if (argv.length === 0) {
+    fail('Usage: next-intl.mjs <source-root> [--messages-pattern <relative-pattern>]');
+  }
+
+  const sourceRoot = argv[0];
+  let messagesPattern;
+
+  for (let index = 1; index < argv.length; index += 1) {
+    if (argv[index] !== '--messages-pattern' || messagesPattern !== undefined || !argv[index + 1]) {
+      fail('Usage: next-intl.mjs <source-root> [--messages-pattern <relative-pattern>]');
+    }
+    messagesPattern = argv[index + 1];
+    index += 1;
+  }
+
+  return { sourceRoot, messagesPattern };
+}
+
+function toPosix(value) {
+  return value.split(path.sep).join('/');
+}
+
+function lineOf(source, offset) {
+  return source.slice(0, offset).split('\n').length;
+}
+
+function validatePattern(patternValue, root) {
+  if (path.isAbsolute(patternValue)) {
+    fail('The messages pattern must be relative to the source root.');
+  }
+  if ((patternValue.match(/\{locale\}/g) ?? []).length !== 1) {
+    fail('The messages pattern must contain {locale} exactly once.');
+  }
+  if (!patternValue.endsWith('.json')) {
+    fail('The messages pattern must point to JSON files.');
+  }
+
+  const normalized = path.normalize(patternValue);
+  if ((normalized.match(/\{locale\}/g) ?? []).length !== 1) {
+    fail('The normalized messages pattern must retain {locale} exactly once.');
+  }
+  const resolved = path.resolve(root, normalized.replace('{locale}', '__locale__'));
+  if (resolved !== root && !resolved.startsWith(`${root}${path.sep}`)) {
+    fail('The messages pattern must stay inside the source root.');
+  }
+
+  return toPosix(normalized);
+}
+
+function listSourceFiles(root) {
+  const files = [];
+  let truncated = false;
+
+  function visit(directory) {
+    for (const entry of readdirSync(directory, { withFileTypes: true }).sort((left, right) =>
+      left.name.localeCompare(right.name)
+    )) {
+      if (files.length >= MAX_SOURCE_FILES) {
+        truncated = true;
+        return;
+      }
+      const absolute = path.join(directory, entry.name);
+      if (entry.isSymbolicLink()) {
+        continue;
+      }
+      if (entry.isDirectory()) {
+        if (!IGNORED_DIRECTORIES.has(entry.name)) {
+          visit(absolute);
+        }
+        continue;
+      }
+      if (
+        entry.isFile() &&
+        SOURCE_EXTENSIONS.has(path.extname(entry.name)) &&
+        lstatSync(absolute).size <= MAX_SOURCE_BYTES
+      ) {
+        files.push(absolute);
+      }
+    }
+  }
+
+  visit(root);
+  return { files, truncated };
+}
+
+function readPackageEvidence(root) {
+  const packagePath = path.join(root, 'package.json');
+  if (!existsSync(packagePath)) {
+    return { declared: false, evidence: [] };
+  }
+
+  let manifest;
+  try {
+    manifest = JSON.parse(readFileSync(packagePath, 'utf8'));
+  } catch {
+    return { declared: false, evidence: [] };
+  }
+
+  const sections = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies'];
+  for (const section of sections) {
+    if (typeof manifest[section]?.['next-intl'] === 'string') {
+      const source = readFileSync(packagePath, 'utf8');
+      const offset = source.indexOf('"next-intl"');
+      return {
+        declared: true,
+        evidence: [
+          {
+            claim: 'next-intl.declared',
+            path: 'package.json',
+            line: lineOf(source, Math.max(offset, 0)),
+            value: manifest[section]['next-intl'],
+          },
+        ],
+      };
+    }
+  }
+
+  return { declared: false, evidence: [] };
+}
+
+function deriveMessagePatterns(files, root) {
+  const findings = [];
+  const importPattern = /import\s*\(\s*`([^`]*\$\{[^}]+\}[^`]*\.json)`\s*\)/g;
+
+  for (const absolute of files) {
+    const source = readFileSync(absolute, 'utf8');
+    for (const match of source.matchAll(importPattern)) {
+      const template = match[1];
+      if ((template.match(/\$\{[^}]+\}/g) ?? []).length !== 1) {
+        continue;
+      }
+      const relativeTemplate = template.replace(/\$\{[^}]+\}/, '{locale}');
+      const resolvedTemplate = path.resolve(path.dirname(absolute), relativeTemplate.replace('{locale}', '__locale__'));
+      if (resolvedTemplate !== root && !resolvedTemplate.startsWith(`${root}${path.sep}`)) {
+        continue;
+      }
+      const rootRelative = toPosix(path.relative(root, resolvedTemplate)).replace('__locale__', '{locale}');
+      findings.push({
+        pattern: rootRelative,
+        source: 'request-config',
+        path: toPosix(path.relative(root, absolute)),
+        line: lineOf(source, match.index ?? 0),
+      });
+    }
+  }
+
+  return findings;
+}
+
+function parseQuotedValues(value) {
+  return [...value.matchAll(/(['"])(.*?)\1/g)].map((match) => match[2]);
+}
+
+function readStaticBindings(source) {
+  const arrays = new Map();
+  const strings = new Map();
+
+  for (const match of source.matchAll(/(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*\[([^\]]*)\](?:\s+as\s+const)?/g)) {
+    const values = parseQuotedValues(match[2]);
+    if (values.length > 0) {
+      arrays.set(match[1], values);
+    }
+  }
+  for (const match of source.matchAll(/(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(['"])(.*?)\2/g)) {
+    strings.set(match[1], match[3]);
+  }
+
+  return { arrays, strings };
+}
+
+function readRoutingCandidates(files, root) {
+  const localeCandidates = [];
+  const defaultLocaleCandidates = [];
+
+  for (const absolute of files) {
+    const source = readFileSync(absolute, 'utf8');
+    if (!source.includes('defineRouting')) {
+      continue;
+    }
+    const bindings = readStaticBindings(source);
+
+    for (const match of source.matchAll(/\blocales\s*:\s*(\[[^\]]*\]|[A-Za-z_$][\w$]*)/g)) {
+      const expression = match[1];
+      const locales = expression.startsWith('[') ? parseQuotedValues(expression) : bindings.arrays.get(expression);
+      if (locales?.length) {
+        localeCandidates.push({
+          locales: [...new Set(locales)].sort(),
+          path: toPosix(path.relative(root, absolute)),
+          line: lineOf(source, match.index ?? 0),
+        });
+      }
+    }
+
+    for (const match of source.matchAll(/\bdefaultLocale\s*:\s*(?:(['"])(.*?)\1|([A-Za-z_$][\w$]*))/g)) {
+      const locale = match[2] ?? bindings.strings.get(match[3]);
+      if (locale) {
+        defaultLocaleCandidates.push({
+          locale,
+          path: toPosix(path.relative(root, absolute)),
+          line: lineOf(source, match.index ?? 0),
+        });
+      }
+    }
+  }
+
+  return { localeCandidates, defaultLocaleCandidates };
+}
+
+function uniqueBy(items, keyOf) {
+  const seen = new Set();
+  return items.filter((item) => {
+    const key = keyOf(item);
+    if (seen.has(key)) {
+      return false;
+    }
+    seen.add(key);
+    return true;
+  });
+}
+
+function selectConsistent(items, valueOf) {
+  const values = uniqueBy(items.map(valueOf), (value) => JSON.stringify(value));
+  return values.length === 1 ? values[0] : null;
+}
+
+function inspectDictionaries(root, patterns) {
+  const dictionaries = [];
+  let truncated = false;
+
+  for (const patternEntry of patterns) {
+    const escaped = patternEntry.pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace('\\{locale\\}', '([^/]+)');
+    const matcher = new RegExp(`^${escaped}$`);
+    const prefix = patternEntry.pattern.slice(0, patternEntry.pattern.indexOf('{locale}'));
+    const scanRootRelative = prefix.includes('/') ? prefix.slice(0, prefix.lastIndexOf('/')) : '';
+    const scanRoot = path.resolve(root, scanRootRelative || '.');
+    if (!existsSync(scanRoot) || !lstatSync(scanRoot).isDirectory()) {
+      continue;
+    }
+
+    const candidates = [];
+    function visit(directory) {
+      for (const entry of readdirSync(directory, { withFileTypes: true }).sort((left, right) =>
+        left.name.localeCompare(right.name)
+      )) {
+        if (candidates.length >= MAX_DICTIONARY_FILES) {
+          truncated = true;
+          return;
+        }
+        const absolute = path.join(directory, entry.name);
+        if (entry.isSymbolicLink()) {
+          continue;
+        }
+        if (entry.isDirectory()) {
+          if (!IGNORED_DIRECTORIES.has(entry.name)) {
+            visit(absolute);
+          }
+        } else if (entry.isFile() && entry.name.endsWith('.json')) {
+          candidates.push(absolute);
+        }
+      }
+    }
+    visit(scanRoot);
+
+    for (const absolute of candidates) {
+      const relative = toPosix(path.relative(root, absolute));
+      const match = relative.match(matcher);
+      if (match) {
+        dictionaries.push({ locale: match[1], path: relative, pattern: patternEntry.pattern });
+      }
+    }
+  }
+
+  return {
+    dictionaries: uniqueBy(dictionaries, (item) => `${item.locale}\0${item.path}\0${item.pattern}`).sort(
+      (left, right) => left.locale.localeCompare(right.locale) || left.path.localeCompare(right.path)
+    ),
+    truncated,
+  };
+}
+
+const { sourceRoot: sourceRootArgument, messagesPattern: suppliedPattern } = parseArguments(process.argv.slice(2));
+const sourceRoot = path.resolve(sourceRootArgument);
+if (!existsSync(sourceRoot) || !lstatSync(sourceRoot).isDirectory()) {
+  fail(`Source root is not a directory: ${sourceRootArgument}`);
+}
+const canonicalRoot = realpathSync(sourceRoot);
+
+const sourceInspection = listSourceFiles(canonicalRoot);
+const sourceFiles = sourceInspection.files;
+const packageFinding = readPackageEvidence(canonicalRoot);
+const derivedPatterns = deriveMessagePatterns(sourceFiles, canonicalRoot);
+const patterns = [];
+
+if (suppliedPattern) {
+  patterns.push({ pattern: validatePattern(suppliedPattern, canonicalRoot), source: 'agent-supplied' });
+} else {
+  for (const finding of derivedPatterns) {
+    patterns.push({ pattern: validatePattern(finding.pattern, canonicalRoot), source: finding.source });
+  }
+  if (existsSync(path.join(canonicalRoot, 'messages'))) {
+    patterns.push({ pattern: CONVENTIONAL_PATTERN, source: 'conventional' });
+  }
+}
+
+const uniquePatterns = uniqueBy(patterns, (item) => item.pattern).sort((left, right) =>
+  left.pattern.localeCompare(right.pattern)
+);
+const dictionaryInspection = inspectDictionaries(canonicalRoot, uniquePatterns);
+const dictionaries = dictionaryInspection.dictionaries;
+const routing = readRoutingCandidates(sourceFiles, canonicalRoot);
+const configuredLocales = selectConsistent(routing.localeCandidates, (item) => item.locales);
+const defaultLocale = selectConsistent(routing.defaultLocaleCandidates, (item) => item.locale);
+const dictionaryLocales = [...new Set(dictionaries.map((item) => item.locale))].sort();
+const unresolved = [];
+
+if (sourceInspection.truncated) {
+  unresolved.push({ code: 'source-scan-truncated', claim: `Source scanning stopped after ${MAX_SOURCE_FILES} files.` });
+}
+if (!packageFinding.declared) {
+  unresolved.push({
+    code: 'next-intl-not-declared',
+    claim: 'Whether this project uses next-intl is not proven by package.json.',
+  });
+}
+if (uniquePatterns.length === 0) {
+  unresolved.push({
+    code: 'messages-pattern-not-found',
+    claim: 'The location of next-intl message dictionaries is not proven.',
+  });
+} else if (dictionaries.length === 0) {
+  unresolved.push({
+    code: 'message-dictionaries-not-found',
+    claim: 'No JSON message dictionaries matched the selected pattern.',
+  });
+}
+if (dictionaryInspection.truncated) {
+  unresolved.push({
+    code: 'dictionary-scan-truncated',
+    claim: `Dictionary scanning stopped after ${MAX_DICTIONARY_FILES} JSON files.`,
+  });
+}
+if (routing.localeCandidates.length === 0) {
+  unresolved.push({
+    code: 'configured-locales-not-found',
+    claim: 'The statically configured next-intl locales are not proven.',
+  });
+} else if (configuredLocales === null) {
+  unresolved.push({
+    code: 'configured-locales-conflict',
+    claim: 'Static routing files declare different locale lists.',
+  });
+}
+if (routing.defaultLocaleCandidates.length === 0) {
+  unresolved.push({
+    code: 'default-locale-not-found',
+    claim: 'The statically configured next-intl default locale is not proven.',
+  });
+} else if (defaultLocale === null) {
+  unresolved.push({
+    code: 'default-locale-conflict',
+    claim: 'Static routing files declare different default locales.',
+  });
+}
+if (configuredLocales) {
+  for (const locale of configuredLocales.filter((value) => !dictionaryLocales.includes(value))) {
+    unresolved.push({
+      code: 'configured-locale-without-dictionary',
+      claim: `Configured locale ${locale} has no matching message dictionary.`,
+      locale,
+    });
+  }
+  for (const locale of dictionaryLocales.filter((value) => !configuredLocales.includes(value))) {
+    unresolved.push({
+      code: 'dictionary-locale-not-configured',
+      claim: `Message dictionary locale ${locale} is not in the static routing configuration.`,
+      locale,
+    });
+  }
+}
+if (defaultLocale && configuredLocales && !configuredLocales.includes(defaultLocale)) {
+  unresolved.push({
+    code: 'default-locale-not-configured',
+    claim: `Default locale ${defaultLocale} is not in the static routing configuration.`,
+    locale: defaultLocale,
+  });
+}
+
+const evidence = [
+  ...packageFinding.evidence,
+  ...derivedPatterns
+    .filter((item) => uniquePatterns.some((patternEntry) => patternEntry.pattern === item.pattern))
+    .map((item) => ({ claim: 'messages.pattern', path: item.path, line: item.line, value: item.pattern })),
+  ...dictionaries.map((item) => ({ claim: 'messages.dictionary', path: item.path, line: 1, value: item.locale })),
+  ...routing.localeCandidates.map((item) => ({
+    claim: 'routing.locales',
+    path: item.path,
+    line: item.line,
+    value: item.locales,
+  })),
+  ...routing.defaultLocaleCandidates.map((item) => ({
+    claim: 'routing.defaultLocale',
+    path: item.path,
+    line: item.line,
+    value: item.locale,
+  })),
+].sort(
+  (left, right) =>
+    left.path.localeCompare(right.path) || left.line - right.line || left.claim.localeCompare(right.claim)
+);
+
+const result = {
+  version: 1,
+  area: 'locales',
+  facts: {
+    system: 'next-intl',
+    declared: packageFinding.declared,
+    messagesPatterns: uniquePatterns,
+    dictionaryCandidates: dictionaries,
+    configuredLocaleCandidates: routing.localeCandidates,
+    configuredLocales,
+    defaultLocaleCandidates: routing.defaultLocaleCandidates,
+    defaultLocale,
+  },
+  evidence,
+  unresolved: unresolved.sort(
+    (left, right) => left.code.localeCompare(right.code) || (left.locale ?? '').localeCompare(right.locale ?? '')
+  ),
+};
+
+process.stdout.write(`${JSON.stringify(result, null, 2)}\n`);

package/assets/skills/fimo-studio/SKILL.md

@@ -62,5 +62,5 @@ Read the relevant reference file when the user's question matches a topic.
 | Visual changes          | Edit Mode (quick tweaks), AI Chat (bigger changes), Code Editor (full control) |
 | Something went wrong    | Version History, AI Chat                                                       |
 | Working with others     | Sharing, Collaboration                                                         |
-| Starting a project      | Drawing, AI Chat                                                               |
+| Starting a project      | Preview & Responsive, Publish & Deploy                                         |
 | Running out of credits  | Billing                                                                        |

package/assets/skills/fimo-studio/references/project-creation.md

@@ -1,24 +1,16 @@
-## Starting a New Project
+## Create a Project
 
-<!-- TODO(audit 2026-06-03): The in-app "describe your project" creation form was removed (commit dcb977274, "chore: delete new project flow"). The dashboard no longer ships a text-prompt box, image/sketch upload, quick-start suggestion buttons, model selector, or a credit footer. The creation screen at /app/create is now a headless setup/loading screen (OrganizationNewProjectPage) that reads a prompt from localStorage ('fimo-prompt') and immediately starts generation — but no component in apps/ui/src currently writes that key, so the surface that actually collects the prompt could not be confirmed from the code. A human must confirm the current way users describe and submit a new project before this section is re-documented in detail. -->
+1. Open **Projects** in Fimo Studio.
+2. Select **Create project**. If the button is unavailable, ask an organization admin for project creation permission.
+3. Enter a project name and select **Create**.
+4. Studio opens the new project's **Getting started** view.
 
-To begin a new project, use the **Build my website** button. It appears on the Fimo landing page and in the top navigation when you are signed out. It takes you into the project setup flow.
+## Set Up the Project
 
-## What Happens After You Start
+The **For agents** tab is the default. Copy its prompt into your coding agent, or use one of the available agent shortcuts. The prompt identifies this as a newly created Fimo project, gives the agent the exact `fimo init` command, pins the selected CLI channel for every `fimo` command in the setup, and links to the coding-agent guide. Following that guide, the agent initializes the project and creates its first hosted preview with one plain preview deploy — unless you tell it not to deploy.
 
-1. A setup screen appears with a spinner and the message "Setting up your project...". The AI is generating your site.
-2. A **Back to projects** link in the top-left lets you cancel and return to your projects list.
-3. When generation begins, you are taken to a loading screen for the new project, and then your workspace opens with the site ready to explore and edit.
+Use **Manual setup** when you want to run the steps yourself. It provides the exact `fimo init` command, coding-agent shortcuts, and the final `fimo deploy` command.
 
-## If You Are Low on Credits
+The first deploy completes onboarding and removes **Getting started** from the project. You can also select **Dismiss getting started** to hide it without deploying.
 
-Creating a project uses credits. If your balance is too low, you will see a "Credit balance is too low" notification prompting you to upgrade, and you will be returned to your projects list instead of starting a new project. See **Billing & Credits** for how credits work and how to top up.
-
-## Refining Your Site
-
-Once your workspace opens, the AI does not stop there — you keep shaping the site from inside it. Use the **AI Chat** to ask for changes ("add a pricing section", "use a dark theme"), and the **Code Editor** or **Visual Editing** for finer control. The clearer your requests, the closer the result.
-
-- **Mention the site type**: portfolio, landing page, blog, documentation, e-commerce storefront.
-- **List key pages**: home, about, pricing, contact, gallery.
-- **Describe the style**: modern and minimalist, colorful and playful, dark theme with bold typography.
-- **Call out specific elements**: hero section with a video background, pricing table with three tiers, testimonial carousel.
+Deploying creates a preview. It does not publish the site. Publishing is a separate action in Fimo Studio; see **Publish & Deploy** when the site is ready to go live.

package/assets/starters/fimo-site/template/.fimo/agents/content-guide/capabilities.yaml

@@ -1,2 +1 @@
-- files:read
 - cms:read

package/assets/starters/fimo-site/template/.fimo/agents/site-review/capabilities.yaml

@@ -1,4 +1,3 @@
-- files:read
 - cms:read
 - i18n:read
 - net:fetch

package/assets/sveltekit/components/Boolean.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+
+  import type { FimoBoolean } from 'fimo/sveltekit';
+  import { getFimoSource } from 'fimo/sveltekit';
+
+  type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    value: FimoBoolean | boolean | null | undefined;
+    as?: keyof SvelteHTMLElements;
+    [key: string]: unknown;
+  };
+
+  let { value, as = 'span', ...props }: Props = $props();
+  const source = $derived(getFimoSource(value));
+</script>
+
+{#if value != null}
+  <svelte:element this={as} {...props} data-fimo-source={source}>{String(value.valueOf())}</svelte:element>
+{/if}

package/assets/sveltekit/components/Date.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { HTMLTimeAttributes } from 'svelte/elements';
+
+  import type { FimoString } from 'fimo/sveltekit';
+  import { getFimoSource } from 'fimo/sveltekit';
+
+  type Props = Omit<HTMLTimeAttributes, 'datetime' | 'children'> & {
+    value: FimoString | globalThis.Date | string | number | null | undefined;
+    locale?: string;
+    options?: Intl.DateTimeFormatOptions;
+  };
+
+  let { value, locale, options, ...props }: Props = $props();
+  const source = $derived(getFimoSource(value));
+  const rendered = $derived.by(() => {
+    if (value == null) {
+      return null;
+    }
+    const raw = value instanceof String ? value.toString() : value;
+    const date = new globalThis.Date(raw as string | number | globalThis.Date);
+    if (Number.isNaN(date.getTime())) {
+      return null;
+    }
+    return {
+      datetime: date.toISOString().split('T')[0],
+      text: date.toLocaleDateString(locale, options ?? { year: 'numeric', month: 'short', day: 'numeric' }),
+    };
+  });
+</script>
+
+{#if rendered}
+  <time {...props} datetime={rendered.datetime} data-fimo-source={source}>{rendered.text}</time>
+{/if}

package/assets/sveltekit/components/FimoProvider.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { afterNavigate, goto, invalidateAll } from '$app/navigation';
+  import { env } from '$env/dynamic/public';
+  import type { LabelsSnapshot } from 'fimo/sveltekit';
+  import {
+    connectPreview,
+    ensurePreviewScript,
+    LABELS_KEY,
+    sendPreviewLocation,
+    type LabelsSource,
+  } from 'fimo/sveltekit/internal';
+  import { onMount, setContext, type Snippet } from 'svelte';
+
+  let { labels, children }: { labels: LabelsSnapshot; children: Snippet } = $props();
+  let previewEnabled = false;
+
+  setContext<LabelsSource>(LABELS_KEY, () => labels);
+
+  onMount(() => {
+    previewEnabled = ensurePreviewScript(env.PUBLIC_FIMO_PREVIEW_SCRIPT_URL);
+    if (!previewEnabled) {
+      return;
+    }
+
+    return connectPreview({ goto, invalidateAll });
+  });
+
+  afterNavigate(() => {
+    if (previewEnabled) {
+      sendPreviewLocation();
+    }
+  });
+</script>
+
+{@render children()}

package/assets/sveltekit/components/Image.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from 'svelte/elements';
+
+  import type { FimoMedia } from 'fimo/sveltekit';
+  import { getFimoSource } from 'fimo/sveltekit';
+  import {
+    mergeSvelteImageStyle,
+    resolveImagePresentation,
+    type ImageFit,
+  } from 'fimo/sveltekit/internal';
+
+  type Props = Omit<HTMLImgAttributes, 'src' | 'alt' | 'width' | 'height' | 'sizes' | 'srcset'> & {
+    value: FimoMedia | null | undefined;
+    alt?: string;
+    quality?: number;
+    fit?: ImageFit;
+    unoptimized?: boolean;
+    overrideSrc?: string;
+    width?: string | number;
+    height?: string | number;
+    sizes?: string;
+    srcset?: string;
+    srcSet?: string;
+    hostSuffixes?: readonly string[];
+    style?: string;
+  };
+
+  let {
+    value,
+    alt,
+    quality,
+    fit,
+    unoptimized,
+    overrideSrc,
+    width,
+    height,
+    sizes,
+    srcset,
+    srcSet,
+    hostSuffixes,
+    style,
+    ...props
+  }: Props = $props();
+
+  const image = $derived(
+    value
+      ? resolveImagePresentation({
+          src: value.url,
+          alt: alt ?? value.alt,
+          mediaWidth: value.width,
+          mediaHeight: value.height,
+          quality,
+          fit,
+          unoptimized,
+          overrideSrc,
+          width,
+          height,
+          sizes,
+          srcSet: srcset ?? srcSet,
+          hostSuffixes,
+        })
+      : null,
+  );
+  const imageStyle = $derived(image ? mergeSvelteImageStyle(style, image.objectFit) : style);
+  const source = $derived(getFimoSource(value));
+</script>
+
+{#if image}
+  <img
+    {...props}
+    src={image.src}
+    alt={image.alt}
+    width={image.width}
+    height={image.height}
+    sizes={image.sizes}
+    srcset={image.srcSet}
+    style={imageStyle}
+    data-fimo-source={source}
+  />
+{/if}