fimo 0.10.1-staging.4 → 0.11.0-staging.2

package/dist/runtime/content/client/createContentClient.d.ts

@@ -1,4 +1,19 @@
 import type { CollectionContentClient, ContentClientConfig } from './types.js';
+/**
+ * React Query's structural sharing (`replaceEqualDeep`) rebuilds plain objects
+ * and arrays key-by-key from `Object.keys`, which silently drops the
+ * non-enumerable, symbol-keyed source tag `wrapField` puts on `json` values.
+ * A `json` field would then lose its `data-fimo-source` on the first refetch
+ * that changes it, making it unselectable in every editing surface. Every other
+ * wrapped type is a class instance, which structural sharing returns untouched.
+ *
+ * Turning it off costs nothing here: `wrapEntry` allocates fresh wrappers on
+ * every fetch, so a wrapped entry never compared equal to its predecessor and
+ * sharing was already returning the new object.
+ */
+export declare const SOURCE_TRACKED_QUERY_OPTIONS: {
+    readonly structuralSharing: false;
+};
 export declare function createContentClient<T extends {
     id: string;
 }, TInput extends object>(config: ContentClientConfig): CollectionContentClient<T, TInput>;

package/dist/runtime/content/client/createContentClient.js

@@ -2,6 +2,19 @@ import { useInfiniteQuery, useMutation, useQuery, useQueryClient, useSuspenseQue
 import { parseCollectionResponse } from '../parseCollectionResponse.js';
 import { apiBase, buildReadPath, fimoHeaders, interpretSchema, readCollectionLocale, resolveClientHandle, splitWritePayload, validateReferences, withMutationLocale, wrapEntry, } from './internal.js';
 import { useQueryLocale } from './useQueryLocale.js';
+/**
+ * React Query's structural sharing (`replaceEqualDeep`) rebuilds plain objects
+ * and arrays key-by-key from `Object.keys`, which silently drops the
+ * non-enumerable, symbol-keyed source tag `wrapField` puts on `json` values.
+ * A `json` field would then lose its `data-fimo-source` on the first refetch
+ * that changes it, making it unselectable in every editing surface. Every other
+ * wrapped type is a class instance, which structural sharing returns untouched.
+ *
+ * Turning it off costs nothing here: `wrapEntry` allocates fresh wrappers on
+ * every fetch, so a wrapped entry never compared equal to its predecessor and
+ * sharing was already returning the new object.
+ */
+export const SOURCE_TRACKED_QUERY_OPTIONS = { structuralSharing: false };
 export function createContentClient(config) {
     const references = config.references ?? {};
     const info = interpretSchema(config.schema);
@@ -147,6 +160,7 @@ export function createContentClient(config) {
         return useQuery({
             queryKey: qk.byId(id, localizedOptions),
             queryFn: () => getById(id, localizedOptions),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
         });
     }
     function useGetBySlug(slug, options = {}) {
@@ -155,6 +169,7 @@ export function createContentClient(config) {
         return useQuery({
             queryKey: qk.bySlug(slug, localizedOptions),
             queryFn: () => getBySlug(slug, localizedOptions),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
             enabled: !!slug,
         });
     }
@@ -164,6 +179,7 @@ export function createContentClient(config) {
         return useQuery({
             queryKey: qk.byField(fieldName, value, localizedOptions),
             queryFn: () => getByField(fieldName, value, localizedOptions),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
             enabled: !!value,
         });
     }
@@ -173,6 +189,7 @@ export function createContentClient(config) {
         return useQuery({
             queryKey: qk.list(localizedParams),
             queryFn: () => list(localizedParams),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
             select: (page) => page.items,
         });
     }
@@ -182,6 +199,7 @@ export function createContentClient(config) {
         return useQuery({
             queryKey: qk.list(localizedParams),
             queryFn: () => list(localizedParams),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
         });
     }
     function useInfiniteList(params = {}) {
@@ -190,6 +208,7 @@ export function createContentClient(config) {
         const query = useInfiniteQuery({
             queryKey: qk.infiniteList(localizedParams),
             queryFn: ({ pageParam }) => list({ ...localizedParams, offset: pageParam }),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
             initialPageParam: 0,
             getNextPageParam: (lastPage) => lastPage.pageInfo.nextOffset ?? undefined,
         });
@@ -208,6 +227,7 @@ export function createContentClient(config) {
         return useSuspenseQuery({
             queryKey: qk.byId(id, localizedOptions),
             queryFn: () => getById(id, localizedOptions),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
         });
     }
     function useSuspenseGetBySlug(slug, options = {}) {
@@ -216,6 +236,7 @@ export function createContentClient(config) {
         return useSuspenseQuery({
             queryKey: qk.bySlug(slug, localizedOptions),
             queryFn: () => getBySlug(slug, localizedOptions),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
         });
     }
     function useSuspenseGetByField(fieldName, value, options = {}) {
@@ -224,6 +245,7 @@ export function createContentClient(config) {
         return useSuspenseQuery({
             queryKey: qk.byField(fieldName, value, localizedOptions),
             queryFn: () => getByField(fieldName, value, localizedOptions),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
         });
     }
     function useSuspenseGet(params = {}) {
@@ -232,6 +254,7 @@ export function createContentClient(config) {
         return useSuspenseQuery({
             queryKey: qk.list(localizedParams),
             queryFn: () => list(localizedParams),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
             select: (page) => page.items,
         });
     }

package/dist/runtime/content/client/createSingletonClient.js

@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import { SOURCE_TRACKED_QUERY_OPTIONS } from './createContentClient.js';
 import { apiBase, buildReadPath, fimoHeaders, interpretSchema, readSingletonLocale, referenceTargetUids, resolveClientHandle, splitWritePayload, validateReferences, withMutationLocale, wrapEntry, } from './internal.js';
 import { useQueryLocale } from './useQueryLocale.js';
 export function createSingletonClient(config) {
@@ -78,6 +79,7 @@ export function createSingletonClient(config) {
         return useQuery({
             queryKey: qk.document(localizedOptions),
             queryFn: () => get(localizedOptions),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
         });
     }
     function useSuspenseGet(options = {}) {
@@ -86,6 +88,7 @@ export function createSingletonClient(config) {
         return useSuspenseQuery({
             queryKey: qk.document(localizedOptions),
             queryFn: () => get(localizedOptions),
+            ...SOURCE_TRACKED_QUERY_OPTIONS,
         });
     }
     function useUpdate() {

package/dist/runtime/content/client/internal.js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'change-case';
 // @ts-ignore - virtual module provided by fimoConfigPlugin in fimo/vite
 import fimoConfig from 'virtual:fimo-config';
-import { FimoBoolean, FimoMedia, FimoRichText, FimoString } from '../../primitives/lib/primitives.js';
+import { FIMO_SOURCE, FimoBoolean, FimoMedia, FimoRichText, FimoString } from '../../primitives/lib/primitives.js';
 export function interpretSchema(schema) {
     if (!schema || typeof schema.uid !== 'string' || schema.uid.length === 0) {
         throw new Error('Content schema is missing a "uid".');
@@ -176,15 +176,59 @@ function wrapReference(value, uid, resolve) {
     }
     return target.wrapWithSource(value);
 }
+/**
+ * Blocks values have no wrapper class of their own — the array structure stays
+ * plain JSON (matching the API/codegen shape) and only the scalar leaves inside
+ * each item are wrapped. `_key`/`_type` are structural metadata, never fields.
+ */
+function blockItemFields(field, item) {
+    const schema = field.schema;
+    if (!schema) {
+        return undefined;
+    }
+    if ('oneOf' in schema) {
+        return schema.oneOf.find((variant) => variant.uid === item._type)?.fields;
+    }
+    return schema.fields;
+}
+function wrapBlockItem(field, item, source, resolve) {
+    if (item == null || typeof item !== 'object' || Array.isArray(item)) {
+        return item;
+    }
+    const record = item;
+    const fields = blockItemFields(field, record);
+    if (!fields) {
+        return item;
+    }
+    const wrapped = { ...record };
+    for (const [key, childField] of Object.entries(fields)) {
+        wrapped[key] = wrapField(childField, record[key], `${source}.${key}`, resolve);
+    }
+    return wrapped;
+}
+/**
+ * A JSON field's declared shape is a plain object/array — tagging it in place
+ * (rather than boxing it, like the scalar wrappers below) keeps that shape
+ * intact so consumers that read it as ordinary JSON see no difference.
+ */
+function tagWithSource(value, source) {
+    Object.defineProperty(value, FIMO_SOURCE, { value: source, enumerable: false, configurable: true });
+    return value;
+}
 function wrapField(field, value, source, resolve) {
     switch (field.type) {
         case 'string':
         case 'text':
-            return value != null ? new FimoString(value, source) : value;
+        case 'date':
+            return value != null ? new FimoString(String(value), source) : value;
         case 'richtext':
             return value != null ? new FimoRichText(value, source) : value;
         case 'boolean':
             return value != null ? new FimoBoolean(value, source) : value;
+        case 'json':
+            return value != null && typeof value === 'object'
+                ? tagWithSource(Array.isArray(value) ? [...value] : { ...value }, source)
+                : value;
         case 'media':
             if (field.multiple) {
                 return (value?.map((m, i) => new FimoMedia(m, `${source}[${i}]`)) ?? value);
@@ -207,6 +251,23 @@ function wrapField(field, value, source, resolve) {
             }
             return wrapReference(value, uid, resolve);
         }
+        case 'blocks':
+            return Array.isArray(value)
+                ? value.map((item, i) => wrapBlockItem(field, item, `${source}[${i}]`, resolve))
+                : value;
+        // 'number' deliberately falls through here — this is a decision, not a
+        // gap. React renders a boxed String directly (`<span>{new FimoString(...)}
+        // </span>` works, because React special-cases String objects), but it
+        // throws "Objects are not valid as a React child" on a boxed Number. A
+        // FimoNumber wrapper — whether a plain class or `extends Number` — would
+        // break `{post.views}`, which is exactly how a raw number field renders
+        // in every Fimo site today. `extends Number` would recover `.toFixed()`/
+        // `.toPrecision()`/`.toLocaleString()` and make `JSON.stringify` emit `7`
+        // instead of `{"value":7}`, but it does NOT fix JSX rendering, and
+        // `typeof`/`===`/`Number.isInteger` stay broken either way (boxed
+        // primitives never satisfy those). Revisiting this needs a `<Number>`
+        // component in `fimo/ui` (none exists yet — every other wrapped type has
+        // one) plus a migration path for sites already rendering numbers raw.
         default:
             return value;
     }

package/dist/runtime/content/utils/retrieve-data-sources.d.ts

@@ -6,6 +6,19 @@ interface RecordData {
     visible: boolean;
 }
 export type GroupedDataSources = Record<string, RecordData[]>;
+/**
+ * Parses a `data-fimo-source` attribute into its schema, identity, and field
+ * parts. The field itself may contain dots (e.g. a blocks leaf such as
+ * "body[0].title"), so only the first two segments are fixed positions.
+ */
+export declare function parseDataSource(source: string): {
+    schemaName: string;
+    identity: {
+        id: string;
+        locale?: string;
+    };
+    fieldName: string;
+} | null;
 /**
  * Finds all visible elements with a `data-fimo-source` attribute and groups them
  * by schema and ID into a structured object.

package/dist/runtime/content/utils/retrieve-data-sources.js

@@ -14,6 +14,24 @@ function parseRecordIdentity(token) {
         return null;
     }
 }
+/**
+ * Parses a `data-fimo-source` attribute into its schema, identity, and field
+ * parts. The field itself may contain dots (e.g. a blocks leaf such as
+ * "body[0].title"), so only the first two segments are fixed positions.
+ */
+export function parseDataSource(source) {
+    const parts = source.split('.');
+    if (parts.length < 3) {
+        return null;
+    }
+    const [schemaName, identityToken] = parts;
+    const fieldName = parts.slice(2).join('.');
+    const identity = parseRecordIdentity(identityToken);
+    if (!identity) {
+        return null;
+    }
+    return { schemaName, identity, fieldName };
+}
 /**
  * Checks if an element is genuinely visible to the user within the viewport.
  * @param el The element to check.
@@ -51,37 +69,33 @@ export function retrieveVisibleDataSources() {
         if (!source) {
             return;
         }
-        const parts = source.split('.');
-        // Expects the format "SchemaName.id.fieldName"
-        if (parts.length === 3) {
-            const [schemaName, identityToken, fieldName] = parts;
-            const identity = parseRecordIdentity(identityToken);
-            if (!identity) {
-                return;
-            }
-            const { id, locale } = identity;
-            const recordKey = JSON.stringify([id, locale ?? null]);
-            // Skip __translations
-            if (schemaName === '__translations') {
-                return;
-            }
-            // Ensure the schema key exists
-            if (!tempGroupedData[schemaName]) {
-                tempGroupedData[schemaName] = {};
-            }
-            // Ensure the record (by ID) exists for  this schema
-            if (!tempGroupedData[schemaName][recordKey]) {
-                tempGroupedData[schemaName][recordKey] = {
-                    id: id,
-                    ...(locale ? { locale } : {}),
-                    data: {},
-                    visible: isElementVisible(el),
-                };
-            }
-            // Add the field and its text content to the record
-            if (el.textContent) {
-                tempGroupedData[schemaName][recordKey].data[fieldName] = el.textContent.trim();
-            }
+        const parsed = parseDataSource(source);
+        if (!parsed) {
+            return;
+        }
+        const { schemaName, identity, fieldName } = parsed;
+        const { id, locale } = identity;
+        const recordKey = JSON.stringify([id, locale ?? null]);
+        // Skip __translations
+        if (schemaName === '__translations') {
+            return;
+        }
+        // Ensure the schema key exists
+        if (!tempGroupedData[schemaName]) {
+            tempGroupedData[schemaName] = {};
+        }
+        // Ensure the record (by ID) exists for  this schema
+        if (!tempGroupedData[schemaName][recordKey]) {
+            tempGroupedData[schemaName][recordKey] = {
+                id: id,
+                ...(locale ? { locale } : {}),
+                data: {},
+                visible: isElementVisible(el),
+            };
+        }
+        // Add the field and its text content to the record
+        if (el.textContent) {
+            tempGroupedData[schemaName][recordKey].data[fieldName] = el.textContent.trim();
         }
     });
     // Convert the temporary object into the final desired array structure.

package/dist/runtime/primitives/components/Json.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
+type JsonProps<T extends ElementType = 'span'> = {
+    value: unknown;
+    as?: T;
+    children?: (value: unknown) => ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, 'value' | 'as' | 'children'>;
+/**
+ * Json component for rendering JSON field values with source tracking.
+ *
+ * Use children render function to customize how the value is displayed.
+ * Pass `as="pre"` (with a `white-space: pre-wrap` class) for formatted output.
+ *
+ * @example
+ * // Default (single-line JSON text)
+ * <Json value={product.metadata} />
+ *
+ * // Pretty-printed
+ * <Json value={product.metadata} as="pre" className="whitespace-pre-wrap" />
+ *
+ * // With render function for custom display
+ * <Json value={product.metadata}>{(val) => val.tags?.join(', ')}</Json>
+ */
+export declare function Json<T extends ElementType = 'span'>({ value, as, children, ...props }: JsonProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=Json.d.ts.map

package/dist/runtime/primitives/components/Json.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFimoSource, useFimoLiveValue } from '../lib/index.js';
+/**
+ * Json component for rendering JSON field values with source tracking.
+ *
+ * Use children render function to customize how the value is displayed.
+ * Pass `as="pre"` (with a `white-space: pre-wrap` class) for formatted output.
+ *
+ * @example
+ * // Default (single-line JSON text)
+ * <Json value={product.metadata} />
+ *
+ * // Pretty-printed
+ * <Json value={product.metadata} as="pre" className="whitespace-pre-wrap" />
+ *
+ * // With render function for custom display
+ * <Json value={product.metadata}>{(val) => val.tags?.join(', ')}</Json>
+ */
+export function Json({ value, as, children, ...props }) {
+    const Component = as || 'span';
+    const { value: liveValue, ref } = useFimoLiveValue(value);
+    // Defensive: return null if no value
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const source = getFimoSource(value);
+    const content = children ? children(liveValue) : JSON.stringify(liveValue);
+    return (_jsx(Component, { ref: ref, ...props, "data-fimo-source": source, children: content }));
+}

package/dist/runtime/primitives/index.d.ts

@@ -4,6 +4,7 @@ export { StaticImage } from './components/StaticImage.js';
 export { Video } from './components/Video.js';
 export { Date } from './components/Date.js';
 export { Boolean } from './components/Boolean.js';
+export { Json } from './components/Json.js';
 export { RichText } from './components/RichText.js';
 export { useLabels, useTranslations } from './translations.js';
 export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, type FimoPolymorphicReference, type FimoReference, type FimoSource, type FimoPart, type FimoRichTextContent, type FimoRichTextNodeProps, type FimoRichTextMarkProps, type FimoRichTextComponents, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, fimo, useFimoLiveValue, } from './lib/index.js';

package/dist/runtime/primitives/index.js

@@ -7,6 +7,7 @@ export { StaticImage } from './components/StaticImage.js';
 export { Video } from './components/Video.js';
 export { Date } from './components/Date.js';
 export { Boolean } from './components/Boolean.js';
+export { Json } from './components/Json.js';
 export { RichText } from './components/RichText.js';
 // Labels
 export { useLabels, useTranslations } from './translations.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fimo",
-  "version": "0.10.1-staging.4",
+  "version": "0.11.0-staging.2",
   "description": "Fimo CLI - create, deploy, and manage Fimo projects",
   "bin": {
     "fimo": "dist/cli/index.js"
@@ -68,7 +68,7 @@
     "eta": "^3.5.0",
     "oxc-parser": "^0.118.0",
     "react-error-boundary": "^6.0.0",
-    "zod": "4.1.8"
+    "zod": "4.4.3"
   },
   "devDependencies": {
     "@clack/core": "^1.2.0",
@@ -82,7 +82,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "agent-install": "^0.0.5",
-    "better-auth": "1.6.23",
+    "better-auth": "1.6.25",
     "cheerio": "^1.0.0",
     "commander": "^13.1.0",
     "esbuild": "^0.25.10",
@@ -94,7 +94,7 @@
     "typescript": "5.9.2",
     "vite": "^8.0.13",
     "vitest": "^4.1.6",
-    "wrangler": "^4.83.0",
+    "wrangler": "4.114.0",
     "yaml": "2.8.2"
   },
   "peerDependencies": {

package/templates/react-router/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
-    "@hookform/resolvers": "^5.2.2",
+    "@hookform/resolvers": "^5.5.7",
     "@react-router/node": "^8.2.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-query": "^5.80.6",
@@ -21,25 +21,25 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "fimo": "0.10.1-staging.4",
+    "fimo": "0.11.0-staging.2",
     "input-otp": "^1.4.2",
     "isbot": "^5",
     "lucide-react": "^0.577.0",
-    "motion": "^12.36.0",
+    "motion": "^12.42.2",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
+    "radix-ui": "^1.6.7",
     "react": "^19.2.7",
     "react-day-picker": "^9.14.0",
     "react-dom": "^19.2.7",
     "react-error-boundary": "^6.0.0",
-    "react-hook-form": "^7.72.1",
+    "react-hook-form": "^7.83.0",
     "react-resizable-panels": "^4.9.0",
     "react-router": "^8.2.0",
     "recharts": "^3.8.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.2.0",
     "vaul": "^1.1.2",
-    "zod": "^4.3.6"
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@react-router/dev": "^8.2.0",