fimo-sveltekit 0.21.0-experimental.1

package/README.md

@@ -0,0 +1,39 @@
+# fimo-sveltekit
+
+Fimo's SvelteKit runtime and hosting adapter. Install it next to `fimo` at the
+same version:
+
+```bash
+npm install fimo fimo-sveltekit
+```
+
+```js
+// svelte.config.js
+import { fimo } from 'fimo-sveltekit/config';
+
+export default {
+  kit: { adapter: fimo() },
+};
+```
+
+```ts
+// vite.config.ts
+import { sveltekit } from '@sveltejs/kit/vite';
+import { fimo } from 'fimo-sveltekit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({ plugins: [fimo(), sveltekit()] });
+```
+
+| Entry                       | What it owns                                                    |
+| --------------------------- | --------------------------------------------------------------- |
+| `fimo-sveltekit`            | `createFimo`, `getLabels`, `useLabels`, `createFimoFormClient`  |
+| `fimo-sveltekit/components` | `FimoProvider` plus the native source-tracked Svelte primitives |
+| `fimo-sveltekit/vite`       | Branch env and dev-only `data-fimo-id` source tagging           |
+| `fimo-sveltekit/config`     | The hosting adapter, behind Fimo's config seam                  |
+
+Everything SvelteKit-specific lives here so a project on another framework never
+resolves a SvelteKit or Svelte peer graph. `fimo` keeps the framework-neutral
+building blocks this package is built on.
+
+Docs: https://fimo.ai/docs/cli/frameworks/sveltekit

package/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/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/components/DateTime.svelte

@@ -0,0 +1,35 @@
+<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 {
+      // The whole instant, not just the day: a `datetime` field exists to name
+      // a moment, and truncating it here would throw the time away.
+      datetime: date.toISOString(),
+      text: date.toLocaleString(locale, options ?? { dateStyle: 'medium', timeStyle: 'short' }),
+    };
+  });
+</script>
+
+{#if rendered}
+  <time {...props} datetime={rendered.datetime} data-fimo-source={source}>{rendered.text}</time>
+{/if}

package/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, locale: () => labels.locale });
+  });
+
+  afterNavigate(() => {
+    if (previewEnabled) {
+      sendPreviewLocation(labels.locale);
+    }
+  });
+</script>
+
+{@render children()}

package/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}

package/components/Json.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+
+  import { getFimoSource } from 'fimo-sveltekit';
+
+  type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    value: unknown;
+    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}>{JSON.stringify(value)}</svelte:element>
+{/if}

package/components/Label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { useLabels } from 'fimo-sveltekit';
+  import type { ComponentProps } from 'svelte';
+
+  import Text from './Text.svelte';
+
+  type Props = Omit<ComponentProps<typeof Text>, 'value'> & {
+    value: string;
+  };
+
+  let { value, ...props }: Props = $props();
+  const labels = useLabels();
+  const label = $derived(labels.t(value));
+</script>
+
+<Text {...props} value={label} />

package/components/Number.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+
+  // Content numbers stay plain JS numbers (there is no FimoNumber wrapper), so
+  // this primitive has no source to expose: it formats for display only and is
+  // not editable in the preview.
+  type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    value: number | null | undefined;
+    as?: keyof SvelteHTMLElements;
+    locale?: string;
+    options?: Intl.NumberFormatOptions;
+    [key: string]: unknown;
+  };
+
+  let { value, as = 'span', locale, options, ...props }: Props = $props();
+  const rendered = $derived(value != null && !Number.isNaN(value) ? value.toLocaleString(locale, options) : null);
+</script>
+
+{#if rendered != null}
+  <svelte:element this={as} {...props}>{rendered}</svelte:element>
+{/if}

package/components/RichText.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  import type { FimoRichText } from 'fimo-sveltekit';
+  import { getFimoSource } from 'fimo-sveltekit';
+  import { renderRichTextHtml } from 'fimo-sveltekit/internal';
+
+  type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    value: FimoRichText | null | undefined;
+  };
+
+  let { value, ...props }: Props = $props();
+  const source = $derived(getFimoSource(value));
+  const html = $derived(renderRichTextHtml(value?.content));
+</script>
+
+{#if value}
+  <div {...props} data-fimo-source={source} data-fimo-richtext="">{@html html}</div>
+{/if}

package/components/Text.svelte

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

package/components/Video.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { HTMLVideoAttributes } from 'svelte/elements';
+
+  import type { FimoMedia } from 'fimo-sveltekit';
+  import { getFimoSource } from 'fimo-sveltekit';
+
+  type Props = Omit<HTMLVideoAttributes, 'src' | 'width' | 'height' | 'children'> & {
+    value: FimoMedia | null | undefined;
+    overrideSrc?: string;
+  };
+
+  let {
+    value,
+    overrideSrc,
+    autoplay = true,
+    loop = true,
+    muted = true,
+    playsinline = true,
+    ...props
+  }: Props = $props();
+  const source = $derived(getFimoSource(value));
+</script>
+
+{#if value}
+  <!-- svelte-ignore a11y_media_has_caption -->
+  <video
+    {...props}
+    src={overrideSrc ?? value.url}
+    width={value.width}
+    height={value.height}
+    {autoplay}
+    {loop}
+    {muted}
+    {playsinline}
+    data-fimo-source={source}
+  ></video>
+{/if}

package/components/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Boolean } from './Boolean.svelte';
+export { default as Date } from './Date.svelte';
+export { default as DateTime } from './DateTime.svelte';
+export { default as FimoProvider } from './FimoProvider.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Json } from './Json.svelte';
+export { default as Label } from './Label.svelte';
+export { default as Number } from './Number.svelte';
+export { default as RichText } from './RichText.svelte';
+export { default as Text } from './Text.svelte';
+export { default as Video } from './Video.svelte';

package/components/index.js

@@ -0,0 +1,11 @@
+export { default as Boolean } from './Boolean.svelte';
+export { default as Date } from './Date.svelte';
+export { default as DateTime } from './DateTime.svelte';
+export { default as FimoProvider } from './FimoProvider.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Json } from './Json.svelte';
+export { default as Label } from './Label.svelte';
+export { default as Number } from './Number.svelte';
+export { default as RichText } from './RichText.svelte';
+export { default as Text } from './Text.svelte';
+export { default as Video } from './Video.svelte';

package/dist/config.d.ts

@@ -0,0 +1,10 @@
+import type { Adapter } from '@sveltejs/kit';
+/**
+ * Configure a SvelteKit project for Fimo hosting without exposing the hosting
+ * provider in the generated application: `kit: { adapter: fimo() }`.
+ *
+ * Lives outside `fimo` so the provider adapter and its SvelteKit peer graph are
+ * only installed by SvelteKit projects (FIMO-1635).
+ */
+export declare function fimo(): Adapter;
+//# sourceMappingURL=config.d.ts.map

package/dist/config.js

@@ -0,0 +1,11 @@
+import adapter from '@sveltejs/adapter-vercel';
+/**
+ * Configure a SvelteKit project for Fimo hosting without exposing the hosting
+ * provider in the generated application: `kit: { adapter: fimo() }`.
+ *
+ * Lives outside `fimo` so the provider adapter and its SvelteKit peer graph are
+ * only installed by SvelteKit projects (FIMO-1635).
+ */
+export function fimo() {
+    return adapter({ runtime: 'nodejs24.x' });
+}

package/dist/data-id.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vite';
+export default function svelteDataIdPlugin(): Plugin;
+//# sourceMappingURL=data-id.d.ts.map

package/dist/data-id.js

@@ -0,0 +1,171 @@
+import { createRequire } from 'node:module';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { getLineColumn } from 'fimo/vite/data-id';
+// Native DOM elements are always taggable. Fimo's editable primitives are the
+// only component exception: they forward arbitrary element attributes to the
+// native element they render, so tagging them gives Studio the precise source
+// location without leaking data-fimo-id props into arbitrary user components.
+const TAGGABLE_ELEMENT_TYPES = new Set(['RegularElement', 'SvelteElement']);
+const FIMO_PRIMITIVE_EXPORTS = new Set(['Text', 'Image', 'RichText']);
+const FIMO_COMPONENTS_MODULE = 'fimo-sveltekit/components';
+const EXCLUDED_ID_SEGMENTS = ['/node_modules/', '/.svelte-kit/', 'components/ui/', '.fimo/ui/'];
+export default function svelteDataIdPlugin() {
+    let config;
+    let compilerLoad;
+    // Svelte is owned by the consuming app, never by fimo: resolve the compiler
+    // from the project root so tagging parses with the exact Svelte version
+    // that later compiles the file.
+    function loadCompiler() {
+        compilerLoad ??= (async () => {
+            try {
+                const projectRequire = createRequire(join(config.root, 'package.json'));
+                const compilerUrl = pathToFileURL(projectRequire.resolve('svelte/compiler')).href;
+                // The require condition can point at a CJS bundle; depending on the
+                // named-export lexer, `parse` may only be reachable via `default`.
+                const imported = (await import(compilerUrl));
+                const compiler = typeof imported.parse === 'function' ? imported : imported.default;
+                if (typeof compiler?.parse !== 'function') {
+                    throw new Error('svelte/compiler does not expose parse()');
+                }
+                return compiler;
+            }
+            catch (error) {
+                config.logger.warn(`[fimo] data-fimo-id tagging disabled: svelte/compiler is not resolvable from ${config.root} (${String(error)})`);
+                return null;
+            }
+        })();
+        return compilerLoad;
+    }
+    return {
+        name: 'vite-plugin-svelte-data-id',
+        enforce: 'pre',
+        configResolved(resolvedConfig) {
+            config = resolvedConfig;
+        },
+        async transform(code, id) {
+            if (config.command === 'build') {
+                return null;
+            }
+            // Query'd sub-requests (`+page.svelte?svelte&type=style…`) carry
+            // compiled non-Svelte content and never end with `.svelte`.
+            if (!id.endsWith('.svelte')) {
+                return null;
+            }
+            if (EXCLUDED_ID_SEGMENTS.some((segment) => id.includes(segment))) {
+                return null;
+            }
+            const compiler = await loadCompiler();
+            if (!compiler) {
+                return null;
+            }
+            let parsed;
+            try {
+                parsed = compiler.parse(code, { modern: true });
+            }
+            catch {
+                // Invalid Svelte: leave the file untouched so vite-plugin-svelte
+                // reports the real syntax error against the original source.
+                return null;
+            }
+            const relativePath = id.startsWith(`${config.root}/`) ? id.slice(config.root.length + 1) : id;
+            const insertions = [];
+            const primitiveComponents = collectFimoPrimitiveComponents(parsed.instance, parsed.module);
+            collectInsertions(parsed.fragment, code, relativePath, primitiveComponents, insertions);
+            if (insertions.length === 0) {
+                return null;
+            }
+            insertions.sort((a, b) => b.offset - a.offset);
+            let transformed = code;
+            for (const insertion of insertions) {
+                transformed = transformed.slice(0, insertion.offset) + insertion.value + transformed.slice(insertion.offset);
+            }
+            return { code: transformed, map: null };
+        },
+    };
+}
+function collectInsertions(node, code, relativePath, primitiveComponents, insertions) {
+    if (!node || typeof node !== 'object') {
+        return;
+    }
+    if (Array.isArray(node)) {
+        for (const item of node) {
+            collectInsertions(item, code, relativePath, primitiveComponents, insertions);
+        }
+        return;
+    }
+    const element = node;
+    if (typeof element.type === 'string' &&
+        (TAGGABLE_ELEMENT_TYPES.has(element.type) ||
+            (element.type === 'Component' && typeof element.name === 'string' && primitiveComponents.has(element.name))) &&
+        typeof element.start === 'number' &&
+        typeof element.name === 'string' &&
+        !hasExplicitId(element.attributes)) {
+        const { line, column } = getLineColumn(code, element.start);
+        insertions.push({
+            // `start` points at `<`, so this lands right after the tag name — also
+            // valid for `<svelte:element>`, whose `name` is the literal pseudo-tag.
+            offset: element.start + 1 + element.name.length,
+            value: ` data-fimo-id="${relativePath}#${line}-${column}"`,
+        });
+    }
+    for (const [key, child] of Object.entries(node)) {
+        // `metadata` is compiler-internal bookkeeping and may hold
+        // back-references; `parent` would make the walk cyclic.
+        if (key === 'parent' || key === 'metadata') {
+            continue;
+        }
+        collectInsertions(child, code, relativePath, primitiveComponents, insertions);
+    }
+}
+function collectFimoPrimitiveComponents(...instances) {
+    const names = new Set();
+    for (const instance of instances) {
+        if (!instance || typeof instance !== 'object') {
+            continue;
+        }
+        const content = instance.content;
+        if (!content || typeof content !== 'object') {
+            continue;
+        }
+        const body = content.body;
+        if (!Array.isArray(body)) {
+            continue;
+        }
+        for (const statement of body) {
+            if (!statement || typeof statement !== 'object') {
+                continue;
+            }
+            const declaration = statement;
+            const source = declaration.source;
+            if (declaration.type !== 'ImportDeclaration' || source?.value !== FIMO_COMPONENTS_MODULE) {
+                continue;
+            }
+            if (!Array.isArray(declaration.specifiers)) {
+                continue;
+            }
+            for (const specifier of declaration.specifiers) {
+                if (!specifier || typeof specifier !== 'object') {
+                    continue;
+                }
+                const imported = specifier;
+                if (imported.type === 'ImportSpecifier' &&
+                    typeof imported.imported?.name === 'string' &&
+                    FIMO_PRIMITIVE_EXPORTS.has(imported.imported.name) &&
+                    typeof imported.local?.name === 'string') {
+                    names.add(imported.local.name);
+                }
+            }
+        }
+    }
+    return names;
+}
+function hasExplicitId(attributes) {
+    if (!Array.isArray(attributes)) {
+        return false;
+    }
+    return attributes.some((attribute) => {
+        const attr = attribute;
+        return attr.type === 'Attribute' && attr.name === 'data-fimo-id';
+    });
+}

package/dist/runtime/__fixtures__/public-env.d.ts

@@ -0,0 +1,2 @@
+export declare const env: Record<string, string | undefined>;
+//# sourceMappingURL=public-env.d.ts.map

package/dist/runtime/__fixtures__/public-env.js

@@ -0,0 +1 @@
+export const env = {};

package/dist/runtime/content.d.ts

@@ -0,0 +1,25 @@
+import { type CollectionContentCore, type ContentClientConfig, type ContentClientHandle, type SingletonContentCore } from 'fimo/content';
+export interface SvelteKitContentClientConfig extends ContentClientConfig {
+    apiUrl: string | undefined;
+    defaultLocale?: string;
+}
+export interface SvelteKitEvent {
+    fetch: typeof globalThis.fetch;
+}
+export interface SvelteKitContentModule {
+    default: ContentClientHandle;
+}
+export type SvelteKitContentRegistry = Readonly<Record<string, SvelteKitContentModule>>;
+export interface CreateFimoOptions<TContent extends SvelteKitContentRegistry> {
+    content: TContent;
+    event: SvelteKitEvent;
+    locale?: string;
+}
+export declare function createContentClient<T extends {
+    id: string;
+}, TInput extends object>(config: SvelteKitContentClientConfig): CollectionContentCore<T, TInput>;
+export declare function createSingletonClient<T extends {
+    id: string;
+}, TInput extends object>(config: SvelteKitContentClientConfig): SingletonContentCore<T, TInput>;
+export declare function createFimo<const TContent extends SvelteKitContentRegistry>({ content, event, locale, }: CreateFimoOptions<TContent>): TContent;
+//# sourceMappingURL=content.d.ts.map

package/dist/runtime/content.js

@@ -0,0 +1,33 @@
+import { createServerContentClient, createServerSingletonClient, } from 'fimo/content';
+import { createSvelteKitContentRuntime } from './runtime.js';
+const requestClientFactories = new WeakMap();
+export function createContentClient(config) {
+    const create = (requestFetch, locale) => createServerContentClient(config, createSvelteKitContentRuntime({
+        apiUrl: config.apiUrl,
+        defaultLocale: locale ?? config.defaultLocale,
+        fetch: requestFetch,
+    }));
+    const client = create(globalThis.fetch);
+    requestClientFactories.set(client, create);
+    return client;
+}
+export function createSingletonClient(config) {
+    const create = (requestFetch, locale) => createServerSingletonClient(config, createSvelteKitContentRuntime({
+        apiUrl: config.apiUrl,
+        defaultLocale: locale ?? config.defaultLocale,
+        fetch: requestFetch,
+    }));
+    const client = create(globalThis.fetch);
+    requestClientFactories.set(client, create);
+    return client;
+}
+export function createFimo({ content, event, locale, }) {
+    return Object.fromEntries(Object.entries(content).map(([key, contentModule]) => {
+        const create = requestClientFactories.get(contentModule.default);
+        if (!create) {
+            throw new Error(`Content module "${key}" was not created by fimo-sveltekit.`);
+        }
+        const client = create(event.fetch, locale);
+        return [key, { ...contentModule, ...client, default: client }];
+    }));
+}

package/dist/runtime/context-contract.d.ts

@@ -0,0 +1,5 @@
+import type { LabelsSnapshot } from 'fimo/labels';
+/** Shared by duplicated `fimo-sveltekit` instances in the same Svelte tree. */
+export declare const LABELS_KEY: unique symbol;
+export type LabelsSource = () => LabelsSnapshot;
+//# sourceMappingURL=context-contract.d.ts.map

package/dist/runtime/context-contract.js

@@ -0,0 +1,2 @@
+/** Shared by duplicated `fimo-sveltekit` instances in the same Svelte tree. */
+export const LABELS_KEY = Symbol.for('fimo.sveltekit.labels');

package/dist/runtime/context.d.ts

@@ -0,0 +1,8 @@
+import { type Labels } from 'fimo/labels';
+/**
+ * Read the labels installed by `FimoProvider`. Call it while a component
+ * initializes; the returned `t()` is usable at any time afterwards and returns
+ * a source-tracked `FimoString`, empty for keys the project has no value for.
+ */
+export declare function useLabels(): Labels;
+//# sourceMappingURL=context.d.ts.map

package/dist/runtime/context.js

@@ -0,0 +1,25 @@
+import { createLabels } from 'fimo/labels';
+import { getContext } from 'svelte';
+import { LABELS_KEY } from './context-contract.js';
+/**
+ * Read the labels installed by `FimoProvider`. Call it while a component
+ * initializes; the returned `t()` is usable at any time afterwards and returns
+ * a source-tracked `FimoString`, empty for keys the project has no value for.
+ */
+export function useLabels() {
+    const readSnapshot = getContext(LABELS_KEY);
+    if (!readSnapshot) {
+        throw new Error('useLabels() found no Fimo labels. Render FimoProvider with the label snapshot from your root layout load.');
+    }
+    // Every member reads the snapshot on access: binding one `createLabels` result
+    // here would freeze the labels at initialization and stop tracking `data`.
+    return {
+        get locale() {
+            return readSnapshot().locale;
+        },
+        get snapshot() {
+            return readSnapshot();
+        },
+        t: (key) => createLabels(readSnapshot()).t(key),
+    };
+}

package/dist/runtime/forms.d.ts

@@ -0,0 +1,15 @@
+import { type FormClient } from 'fimo/forms';
+import type { SvelteKitEvent } from './content.js';
+export interface CreateFimoFormClientOptions {
+    event?: SvelteKitEvent;
+    apiUrl?: string;
+    defaultLocale?: string;
+}
+/**
+ * Create a form client for a SvelteKit request. Pass `event` from a server
+ * action or load function when the request-aware fetch should be preserved.
+ */
+export declare function createFimoFormClient({ event, apiUrl, defaultLocale }?: CreateFimoFormClientOptions): FormClient;
+/** Browser-friendly default for simple client-side submissions. */
+export declare const formClient: FormClient;
+//# sourceMappingURL=forms.d.ts.map

package/dist/runtime/forms.js

@@ -0,0 +1,15 @@
+import { createFormClient } from 'fimo/forms';
+import { createSvelteKitContentRuntime } from './runtime.js';
+/**
+ * Create a form client for a SvelteKit request. Pass `event` from a server
+ * action or load function when the request-aware fetch should be preserved.
+ */
+export function createFimoFormClient({ event, apiUrl, defaultLocale } = {}) {
+    return createFormClient(createSvelteKitContentRuntime({
+        apiUrl,
+        defaultLocale,
+        fetch: event?.fetch ?? globalThis.fetch,
+    }));
+}
+/** Browser-friendly default for simple client-side submissions. */
+export const formClient = createFimoFormClient();

package/dist/runtime/index.d.ts

@@ -0,0 +1,9 @@
+export { createContentClient, createFimo, createSingletonClient, type CreateFimoOptions, type SvelteKitContentClientConfig, type SvelteKitContentModule, type SvelteKitContentRegistry, type SvelteKitEvent, } from './content.js';
+export { useLabels } from './context.js';
+export { getLabels, type GetLabelsOptions } from './labels.js';
+export { createFimoFormClient, formClient } from './forms.js';
+export { type FormClient, type FormSubmissionResult } from 'fimo/forms';
+export type { Labels, LabelsSnapshot } from 'fimo/labels';
+export type { CollectionContentCore as CollectionContentClient, SingletonContentCore as SingletonContentClient, } from 'fimo/content';
+export * from 'fimo/content';
+//# sourceMappingURL=index.d.ts.map

package/dist/runtime/index.js

@@ -0,0 +1,5 @@
+export { createContentClient, createFimo, createSingletonClient, } from './content.js';
+export { useLabels } from './context.js';
+export { getLabels } from './labels.js';
+export { createFimoFormClient, formClient } from './forms.js';
+export * from 'fimo/content';

package/dist/runtime/internal.d.ts

@@ -0,0 +1,5 @@
+export { renderRichTextHtml, resolveImagePresentation, type ImageFit } from 'fimo/primitives';
+export { LABELS_KEY, type LabelsSource } from './context-contract.js';
+export { connectPreview, ensurePreviewScript, sendPreviewLocation, type PreviewNavigation } from './preview.js';
+export declare function mergeSvelteImageStyle(style: string | null | undefined, objectFit: string): string;
+//# sourceMappingURL=internal.d.ts.map

package/dist/runtime/internal.js

@@ -0,0 +1,11 @@
+export { renderRichTextHtml, resolveImagePresentation } from 'fimo/primitives';
+export { LABELS_KEY } from './context-contract.js';
+export { connectPreview, ensurePreviewScript, sendPreviewLocation } from './preview.js';
+export function mergeSvelteImageStyle(style, objectFit) {
+    if (style && /(?:^|;)\s*object-fit\s*:/i.test(style)) {
+        return style;
+    }
+    const value = style?.trim() ?? '';
+    const separator = value === '' || value.endsWith(';') ? '' : ';';
+    return `${value}${separator}object-fit:${objectFit}`;
+}

package/dist/runtime/labels.d.ts

@@ -0,0 +1,20 @@
+import { type LabelsSnapshot } from 'fimo/labels';
+import type { SvelteKitEvent } from './content.js';
+export interface GetLabelsOptions {
+    /** Optional escape hatch for a custom content API endpoint. */
+    apiUrl?: string;
+    event: SvelteKitEvent;
+    /**
+     * The application resolves the active locale; Fimo never infers it from the
+     * URL. Omit it to let the Fimo API answer with the project default.
+     */
+    locale?: string;
+}
+/**
+ * Read the label dictionary for one locale through the request `fetch`.
+ *
+ * Returns plain data because SvelteKit serializes whatever a `load` returns:
+ * pass it to `FimoProvider` in a layout to expose `Label` and `useLabels()`.
+ */
+export declare function getLabels({ apiUrl, event, locale }: GetLabelsOptions): Promise<LabelsSnapshot>;
+//# sourceMappingURL=labels.d.ts.map

package/dist/runtime/labels.js

@@ -0,0 +1,13 @@
+import { fetchLabels } from 'fimo/labels';
+import { createSvelteKitContentRuntime } from './runtime.js';
+/**
+ * Read the label dictionary for one locale through the request `fetch`.
+ *
+ * Returns plain data because SvelteKit serializes whatever a `load` returns:
+ * pass it to `FimoProvider` in a layout to expose `Label` and `useLabels()`.
+ */
+export async function getLabels({ apiUrl, event, locale }) {
+    const runtime = createSvelteKitContentRuntime({ apiUrl, fetch: event.fetch });
+    const labels = await fetchLabels(runtime, { locale });
+    return labels.snapshot;
+}

package/dist/runtime/preview.d.ts

@@ -0,0 +1,27 @@
+export { ensurePreviewScript } from 'fimo/preview';
+export interface PreviewNavigation {
+    /** SvelteKit `goto` — the app router stays in charge of the transition. */
+    goto: (to: string) => unknown;
+    /** SvelteKit `invalidateAll` — reruns every `load` against fresh content. */
+    invalidateAll: () => Promise<unknown>;
+    /** Optional app-owned locale resolver, evaluated for every bridge message. */
+    locale?: () => string | undefined;
+}
+/**
+ * Report where the app is now, and in which locale. Studio keeps its URL,
+ * route selector and content locale in sync from this.
+ *
+ * `locale` defaults to the locale the SvelteKit shell rendered into
+ * `<html lang>`; pass one explicitly when the app resolves it somewhere the
+ * document does not show, for example a cookie or a user preference.
+ */
+export declare function sendPreviewLocation(locale?: string): void;
+/**
+ * Listen for the live Studio preview protocol and answer it with SvelteKit's
+ * own navigation APIs. Returns the disconnect function.
+ *
+ * Only messages from the established parent origin are honored. History stays
+ * native, so Studio's back/forward controls need no protocol of their own.
+ */
+export declare function connectPreview({ goto, invalidateAll, locale }: PreviewNavigation): () => void;
+//# sourceMappingURL=preview.d.ts.map

package/dist/runtime/preview.js

@@ -0,0 +1,69 @@
+import { getDocumentLocale, getPreviewLocationChange, getPreviewParentOrigin } from 'fimo/preview';
+export { ensurePreviewScript } from 'fimo/preview';
+/**
+ * Report where the app is now, and in which locale. Studio keeps its URL,
+ * route selector and content locale in sync from this.
+ *
+ * `locale` defaults to the locale the SvelteKit shell rendered into
+ * `<html lang>`; pass one explicitly when the app resolves it somewhere the
+ * document does not show, for example a cookie or a user preference.
+ */
+export function sendPreviewLocation(locale) {
+    const parentOrigin = getPreviewParentOrigin();
+    window.parent.postMessage({
+        type: 'nav/locationChange',
+        payload: getPreviewLocationChange(window.location, locale ?? getDocumentLocale(document, 'en'), parentOrigin),
+    }, parentOrigin ?? '*');
+}
+/** Reliable-delivery reply: the parent retries an unacknowledged message forever. */
+function acknowledge(message, result) {
+    const parentOrigin = getPreviewParentOrigin();
+    if (!message.requiresAck || typeof message.messageId !== 'string' || !parentOrigin) {
+        return;
+    }
+    window.parent.postMessage({ type: 'ack', payload: { messageId: message.messageId, ...result } }, parentOrigin);
+}
+async function refreshContent(message, invalidateAll) {
+    try {
+        await invalidateAll();
+        acknowledge(message, { ok: true });
+    }
+    catch (error) {
+        console.error(error);
+        acknowledge(message, { ok: false, error: error instanceof Error ? error.message : String(error) });
+    }
+}
+/**
+ * Listen for the live Studio preview protocol and answer it with SvelteKit's
+ * own navigation APIs. Returns the disconnect function.
+ *
+ * Only messages from the established parent origin are honored. History stays
+ * native, so Studio's back/forward controls need no protocol of their own.
+ */
+export function connectPreview({ goto, invalidateAll, locale }) {
+    const onMessage = (event) => {
+        const parentOrigin = getPreviewParentOrigin();
+        if (event.source !== window.parent || !parentOrigin || event.origin !== parentOrigin) {
+            return;
+        }
+        const message = (event.data ?? {});
+        switch (message.type) {
+            case 'nav/navigate':
+                if (typeof message.payload?.to === 'string') {
+                    void goto(message.payload.to);
+                }
+                return;
+            case 'nav/read-routes':
+                // The app owns its route table; answer with where it actually is.
+                sendPreviewLocation(locale?.());
+                return;
+            case 'content/refresh':
+                void refreshContent(message, invalidateAll);
+                return;
+        }
+    };
+    window.addEventListener('message', onMessage);
+    return () => {
+        window.removeEventListener('message', onMessage);
+    };
+}

package/dist/runtime/runtime.d.ts

@@ -0,0 +1,9 @@
+import { type ContentRuntime } from 'fimo/content';
+export interface SvelteKitContentRuntimeOptions {
+    /** Optional escape hatch for tests or deliberately custom API endpoints. */
+    apiUrl?: string;
+    defaultLocale?: string;
+    fetch: typeof globalThis.fetch;
+}
+export declare function createSvelteKitContentRuntime(options: SvelteKitContentRuntimeOptions): ContentRuntime;
+//# sourceMappingURL=runtime.d.ts.map

package/dist/runtime/runtime.js

@@ -0,0 +1,26 @@
+import { env as publicEnv } from '$env/dynamic/public';
+import { requireContentApiUrl } from 'fimo/content';
+function resolveApiUrl(apiUrl) {
+    return (apiUrl ??
+        publicEnv.PUBLIC_FIMO_API_URL ??
+        (typeof process === 'undefined' ? undefined : process.env.PUBLIC_FIMO_API_URL));
+}
+export function createSvelteKitContentRuntime(options) {
+    const apiUrl = resolveApiUrl(options.apiUrl);
+    return {
+        apiBase() {
+            return requireContentApiUrl(apiUrl, 'PUBLIC_FIMO_API_URL');
+        },
+        defaultLocale() {
+            // `undefined` leaves `locale` off the request so the Fimo API answers with
+            // the project default; hardcoding `en` here would silently override it.
+            return options.defaultLocale?.trim() || undefined;
+        },
+        headers(extra) {
+            return { ...extra };
+        },
+        fetch(input, init) {
+            return options.fetch(input, init);
+        },
+    };
+}

package/dist/vite.d.ts

@@ -0,0 +1,12 @@
+import type { PluginOption } from 'vite';
+/**
+ * Narrow SvelteKit build connector. Points dev and production builds at the
+ * git branch's Fimo env (`PUBLIC_FIMO_API_URL`, `FIMO_ENV`), and tags native Svelte
+ * template elements with deterministic `data-fimo-id="<path>#<line>-<column>"`
+ * attributes during `vite dev` so the Fimo preview can map DOM nodes back to
+ * source. Explicit `data-fimo-id` attributes are preserved.
+ *
+ * Usage in the app's vite.config.ts: `plugins: [fimo(), sveltekit()]`.
+ */
+export declare function fimo(): PluginOption[];
+//# sourceMappingURL=vite.d.ts.map

package/dist/vite.js

@@ -0,0 +1,14 @@
+import runtimeEnvPlugin from 'fimo/vite/runtime-env';
+import svelteDataIdPlugin from './data-id.js';
+/**
+ * Narrow SvelteKit build connector. Points dev and production builds at the
+ * git branch's Fimo env (`PUBLIC_FIMO_API_URL`, `FIMO_ENV`), and tags native Svelte
+ * template elements with deterministic `data-fimo-id="<path>#<line>-<column>"`
+ * attributes during `vite dev` so the Fimo preview can map DOM nodes back to
+ * source. Explicit `data-fimo-id` attributes are preserved.
+ *
+ * Usage in the app's vite.config.ts: `plugins: [fimo(), sveltekit()]`.
+ */
+export function fimo() {
+    return [runtimeEnvPlugin(), svelteDataIdPlugin()];
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "fimo-sveltekit",
+  "version": "0.21.0-experimental.1",
+  "description": "Fimo runtime and hosting adapter for SvelteKit projects. Pairs with the fimo package at the same version.",
+  "files": [
+    "dist/",
+    "!dist/**/*.d.ts.map",
+    "components/",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js"
+    },
+    "./components": {
+      "types": "./components/index.d.ts",
+      "svelte": "./components/index.js",
+      "import": "./components/index.js"
+    },
+    "./internal": {
+      "types": "./dist/runtime/internal.d.ts",
+      "import": "./dist/runtime/internal.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
+    },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b tsconfig.json",
+    "check:types": "tsc -b tsconfig.json --noEmit",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@sveltejs/adapter-vercel": "6.3.4"
+  },
+  "devDependencies": {
+    "@fimo/tsconfig": "0.21.0-experimental.1",
+    "@types/node": "^22.15.29",
+    "fimo": "0.21.0-experimental.1",
+    "typescript": "7.0.2",
+    "vitest": "^4.1.6"
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "^2.0.0",
+    "fimo": ">=0.14.0",
+    "svelte": "^5.0.0",
+    "vite": "^7.0.0 || ^8.0.0"
+  },
+  "engines": {
+    "node": ">=20.12.0"
+  }
+}