fimo-react 2.2.0-staging.8 → 2.2.0-staging.9

package/dist/runtime/primitives.d.ts

@@ -6,7 +6,9 @@ export { DateTime } from './react/primitives/editable/DateTime.js';
 export { Boolean } from './react/primitives/editable/Boolean.js';
 export { Json } from './react/primitives/editable/Json.js';
 export { RichText } from './react/primitives/editable/RichText.js';
-export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, type FimoPolymorphicReference, type FimoReference, type FimoSource, type FimoPart, type FimoRichTextContent, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, fimo, } from 'fimo/primitives';
+export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, type FimoPolymorphicReference, type FimoReference, type FimoSource, type FimoPart, type FimoRichTextContent, type FimoSourceContext, type FimoSourceContextItem, FIMO_SOURCE, FIMO_SOURCE_CONTEXT, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoSourceContext, getFimoParts, fimo, } from 'fimo/primitives';
+export { getFimoSourceAttributes } from './react/primitives/source-attributes.js';
+export type { FimoSourceAttributes } from './react/primitives/source-attributes.js';
 export type { BaseImageProps, BaseVideoProps, BooleanProps, DateProps, FimoRichTextComponents, FimoRichTextMarkProps, FimoRichTextNodeProps, ImageProps, JsonProps, RichTextProps, StaticImageProps, TextProps, VideoProps, } from './react/primitives/contracts.js';
 export { useFimoLiveValue } from './react/useFimoLiveValue.js';
 export { DateRenderer } from './react/primitives/renderers/DateRenderer.js';

package/dist/runtime/primitives.js

@@ -10,7 +10,8 @@ export { Boolean } from './react/primitives/editable/Boolean.js';
 export { Json } from './react/primitives/editable/Json.js';
 export { RichText } from './react/primitives/editable/RichText.js';
 // Primitives & utilities
-export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, FIMO_SOURCE, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoParts, fimo, } from 'fimo/primitives';
+export { FimoString, FimoDate, FimoMedia, FimoBoolean, FimoRichText, FIMO_SOURCE, FIMO_SOURCE_CONTEXT, FIMO_PARTS, isFimoString, isFimoDate, hasFimoSource, getFimoSource, getFimoSourceContext, getFimoParts, fimo, } from 'fimo/primitives';
+export { getFimoSourceAttributes } from './react/primitives/source-attributes.js';
 export { useFimoLiveValue } from './react/useFimoLiveValue.js';
 export { DateRenderer } from './react/primitives/renderers/DateRenderer.js';
 export { ImageRenderer } from './react/primitives/renderers/ImageRenderer.js';

package/dist/runtime/react/primitives/editable/Boolean.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FIMO_SOURCE } from 'fimo/primitives';
+import { FIMO_SOURCE, getFimoSourceContext } from 'fimo/primitives';
 import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+import { getFimoSourceAttributes } from '../source-attributes.js';
 export function Boolean({ value, as, children, ...props }) {
     const Component = as || 'span';
     const { value: liveValue, ref } = useFimoLiveValue(value ? value.valueOf() : false);
     if (!value) {
         return null;
     }
-    return (_jsx(Component, { ref: ref, ...props, "data-fimo-source": value[FIMO_SOURCE], children: children ? children(liveValue) : String(liveValue) }));
+    return (_jsx(Component, { ref: ref, ...props, ...getFimoSourceAttributes(value[FIMO_SOURCE], getFimoSourceContext(value)), children: children ? children(liveValue) : String(liveValue) }));
 }

package/dist/runtime/react/primitives/editable/Date.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FIMO_SOURCE } from 'fimo/primitives';
+import { FIMO_SOURCE, getFimoSourceContext } from 'fimo/primitives';
 import { useFimoLiveValue } from '../../useFimoLiveValue.js';
 import { DateRenderer } from '../renderers/DateRenderer.js';
 export function Date({ value, ...props }) {
@@ -8,5 +8,5 @@ export function Date({ value, ...props }) {
         return null;
     }
     const source = typeof value === 'object' && FIMO_SOURCE in value ? (value[FIMO_SOURCE] ?? undefined) : undefined;
-    return _jsx(DateRenderer, { ...props, value: liveValue, source: source, elementRef: ref });
+    return (_jsx(DateRenderer, { ...props, value: liveValue, source: source, context: getFimoSourceContext(value), elementRef: ref }));
 }

package/dist/runtime/react/primitives/editable/DateTime.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FIMO_SOURCE } from 'fimo/primitives';
+import { FIMO_SOURCE, getFimoSourceContext } from 'fimo/primitives';
 import { useFimoLiveValue } from '../../useFimoLiveValue.js';
 import { DateRenderer } from '../renderers/DateRenderer.js';
 /** Renders a `datetime` field: the `dateTime` attribute keeps the whole instant. */
@@ -9,5 +9,5 @@ export function DateTime({ value, ...props }) {
         return null;
     }
     const source = typeof value === 'object' && FIMO_SOURCE in value ? (value[FIMO_SOURCE] ?? undefined) : undefined;
-    return _jsx(DateRenderer, { ...props, value: liveValue, source: source, precision: "instant", elementRef: ref });
+    return (_jsx(DateRenderer, { ...props, value: liveValue, source: source, context: getFimoSourceContext(value), precision: "instant", elementRef: ref }));
 }

package/dist/runtime/react/primitives/editable/Json.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getFimoSource } from 'fimo/primitives';
+import { getFimoSource, getFimoSourceContext } from 'fimo/primitives';
 import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+import { getFimoSourceAttributes } from '../source-attributes.js';
 export function Json({ value, as, children, ...props }) {
     const Component = as || 'span';
     const { value: liveValue, ref } = useFimoLiveValue(value);
     if (value === null || value === undefined) {
         return null;
     }
-    return (_jsx(Component, { ref: ref, ...props, "data-fimo-source": getFimoSource(value), children: children ? children(liveValue) : JSON.stringify(liveValue) }));
+    return (_jsx(Component, { ref: ref, ...props, ...getFimoSourceAttributes(getFimoSource(value), getFimoSourceContext(value)), children: children ? children(liveValue) : JSON.stringify(liveValue) }));
 }

package/dist/runtime/react/primitives/editable/RichText.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FIMO_SOURCE } from 'fimo/primitives';
+import { FIMO_SOURCE, getFimoSourceContext } from 'fimo/primitives';
 import { useFimoLiveValue } from '../../useFimoLiveValue.js';
 import { RichTextRenderer } from '../renderers/RichTextRenderer.js';
 export function RichText({ value, components, ...props }) {
@@ -7,5 +7,5 @@ export function RichText({ value, components, ...props }) {
     if (!value) {
         return null;
     }
-    return (_jsx(RichTextRenderer, { ...props, document: liveContent, source: value[FIMO_SOURCE], components: components, elementRef: ref }));
+    return (_jsx(RichTextRenderer, { ...props, document: liveContent, source: value[FIMO_SOURCE], context: getFimoSourceContext(value), components: components, elementRef: ref }));
 }

package/dist/runtime/react/primitives/editable/Text.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getFimoParts, getFimoSource } from 'fimo/primitives';
+import { getFimoParts, getFimoSource, getFimoSourceContext } from 'fimo/primitives';
 import { Fragment } from 'react';
 import { useFimoLiveValue } from '../../useFimoLiveValue.js';
+import { getFimoSourceAttributes } from '../source-attributes.js';
 /**
  * Text component for rendering text with source tracking
  *
@@ -21,6 +22,7 @@ export function Text({ value, as, children, ...props }) {
     const Component = as || 'span';
     const parts = getFimoParts(value);
     const source = getFimoSource(value);
+    const context = getFimoSourceContext(value);
     const { value: liveValue, ref } = useFimoLiveValue(String(value));
     // Composed fimo value with parts — decompose into individually tracked spans
     if (parts && parts.length > 1 && !children) {
@@ -28,9 +30,9 @@ export function Text({ value, as, children, ...props }) {
     }
     // Use render function if provided, otherwise display raw value
     const content = children ? children(liveValue) : liveValue;
-    return (_jsx(Component, { ref: ref, ...props, "data-fimo-source": source, children: content }));
+    return (_jsx(Component, { ref: ref, ...props, ...getFimoSourceAttributes(source, context), children: content }));
 }
 function TextPart({ part }) {
     const { value: liveText, ref } = useFimoLiveValue(part.text);
-    return (_jsx("span", { ref: ref, "data-fimo-source": part.source, children: liveText }));
+    return (_jsx("span", { ref: ref, ...getFimoSourceAttributes(part.source, part.context), children: liveText }));
 }

package/dist/runtime/react/primitives/renderers/DateRenderer.d.ts

@@ -1,8 +1,9 @@
-import type { FimoDate, FimoString } from 'fimo/primitives';
+import { type FimoDate, type FimoSourceContext, type FimoString } from 'fimo/primitives';
 import { type ReactNode, type Ref } from 'react';
 export interface DateRendererProps {
     value: FimoDate | FimoString | Date | string | number;
     source: string | undefined;
+    context?: FimoSourceContext;
     /**
      * `day` emits the calendar day in `dateTime`; `instant` keeps the full ISO
      * instant, which is the whole point of a `datetime` field. Defaults to `day`
@@ -13,5 +14,5 @@ export interface DateRendererProps {
     className?: string;
     elementRef?: Ref<HTMLTimeElement>;
 }
-export declare function DateRenderer({ value, source, precision, children, className, elementRef }: DateRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateRenderer({ value, source, context, precision, children, className, elementRef, }: DateRendererProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DateRenderer.d.ts.map

package/dist/runtime/react/primitives/renderers/DateRenderer.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function DateRenderer({ value, source, precision = 'day', children, className, elementRef }) {
+import { getFimoSourceContext } from 'fimo/primitives';
+import { getFimoSourceAttributes } from '../source-attributes.js';
+export function DateRenderer({ value, source, context, precision = 'day', children, className, elementRef, }) {
     const rawValue = value instanceof String ? value.toString() : value;
+    const sourceContext = context ?? getFimoSourceContext(value);
     const dateValue = new globalThis.Date(rawValue);
     const iso = dateValue.toISOString();
     const dateTime = precision === 'instant' ? iso : iso.split('T')[0];
@@ -13,5 +16,5 @@ export function DateRenderer({ value, source, precision = 'day', children, class
                 month: 'short',
                 day: 'numeric',
             });
-    return (_jsx("time", { ref: elementRef, dateTime: dateTime, className: className, "data-fimo-source": source, children: content }));
+    return (_jsx("time", { ref: elementRef, dateTime: dateTime, className: className, ...getFimoSourceAttributes(source, sourceContext), children: content }));
 }

package/dist/runtime/react/primitives/renderers/ImageRenderer.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FIMO_SOURCE, resolveImagePresentation } from 'fimo/primitives';
+import { FIMO_SOURCE, getFimoSourceContext, resolveImagePresentation } from 'fimo/primitives';
+import { getFimoSourceAttributes } from '../source-attributes.js';
 export function ImageRenderer({ value: media, children, quality, unoptimized = false, fit, width, height, alt: altOverride, overrideSrc, srcSet: srcSetOverride, sizes, style, hostSuffixes, elementRef, ...imgProps }) {
     const mediaSource = media[FIMO_SOURCE];
+    const sourceAttributes = getFimoSourceAttributes(mediaSource, getFimoSourceContext(media));
     if (children) {
-        return (_jsx("span", { ref: elementRef, "data-fimo-source": mediaSource, children: children(media) }));
+        return (_jsx("span", { ref: elementRef, ...sourceAttributes, children: children(media) }));
     }
     const image = resolveImagePresentation({
         src: media.url,
@@ -26,5 +28,5 @@ export function ImageRenderer({ value: media, children, quality, unoptimized = f
             ...style,
             objectFit: image.objectFit,
         };
-    return (_jsx("img", { ref: elementRef, src: image.src, alt: image.alt, width: image.width, height: image.height, style: finalStyle, sizes: image.sizes, srcSet: image.srcSet, ...imgProps, "data-fimo-source": mediaSource }));
+    return (_jsx("img", { ref: elementRef, src: image.src, alt: image.alt, width: image.width, height: image.height, style: finalStyle, sizes: image.sizes, srcSet: image.srcSet, ...imgProps, ...sourceAttributes }));
 }

package/dist/runtime/react/primitives/renderers/RichTextRenderer.d.ts

@@ -1,12 +1,13 @@
-import type { FimoRichTextContent } from 'fimo/primitives';
+import type { FimoRichTextContent, FimoSourceContext } from 'fimo/primitives';
 import { type ComponentPropsWithoutRef, type Ref } from 'react';
 import type { FimoRichTextComponents } from '../contracts.js';
 interface RichTextRendererProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
     document: FimoRichTextContent | null | undefined;
     source: string | undefined;
+    context?: FimoSourceContext;
     components?: FimoRichTextComponents;
     elementRef?: Ref<HTMLDivElement>;
 }
-export declare function RichTextRenderer({ document, source, components, elementRef, ...props }: RichTextRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function RichTextRenderer({ document, source, context, components, elementRef, ...props }: RichTextRendererProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=RichTextRenderer.d.ts.map

package/dist/runtime/react/primitives/renderers/RichTextRenderer.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment } from 'react';
+import { getFimoSourceAttributes } from '../source-attributes.js';
 function DefaultParagraph({ children }) {
     return _jsx("p", { children: children });
 }
@@ -127,9 +128,9 @@ function renderNode(node, components, key) {
     }
     return _jsx(Fragment, { children: children }, key);
 }
-export function RichTextRenderer({ document, source, components, elementRef, ...props }) {
+export function RichTextRenderer({ document, source, context, components, elementRef, ...props }) {
     if (!document) {
         return null;
     }
-    return (_jsx("div", { ref: elementRef, ...props, "data-fimo-source": source, "data-fimo-richtext": "", children: renderNode(document, components, 0) }));
+    return (_jsx("div", { ref: elementRef, ...props, ...getFimoSourceAttributes(source, context), "data-fimo-richtext": "", children: renderNode(document, components, 0) }));
 }

package/dist/runtime/react/primitives/renderers/VideoRenderer.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FIMO_SOURCE } from 'fimo/primitives';
+import { FIMO_SOURCE, getFimoSourceContext } from 'fimo/primitives';
+import { getFimoSourceAttributes } from '../source-attributes.js';
 export function VideoRenderer({ value: media, children, overrideSrc, autoPlay = true, loop = true, muted = true, playsInline = true, style, elementRef, ...videoProps }) {
     const mediaSource = media[FIMO_SOURCE];
+    const sourceAttributes = getFimoSourceAttributes(mediaSource, getFimoSourceContext(media));
     if (children) {
-        return (_jsx("span", { ref: elementRef, "data-fimo-source": mediaSource, children: children(media) }));
+        return (_jsx("span", { ref: elementRef, ...sourceAttributes, children: children(media) }));
     }
     const finalSrc = overrideSrc ?? media.url;
-    return (_jsx("video", { ref: elementRef, src: finalSrc, width: media.width, height: media.height, autoPlay: autoPlay, loop: loop, muted: muted, playsInline: playsInline, style: style, ...videoProps, "data-fimo-source": mediaSource }));
+    return (_jsx("video", { ref: elementRef, src: finalSrc, width: media.width, height: media.height, autoPlay: autoPlay, loop: loop, muted: muted, playsInline: playsInline, style: style, ...videoProps, ...sourceAttributes }));
 }

package/dist/runtime/react/primitives/source-attributes.d.ts

@@ -0,0 +1,7 @@
+import type { FimoSourceContext } from 'fimo/primitives';
+export type FimoSourceAttributes = {
+    'data-fimo-source': string | undefined;
+    'data-fimo-source-context'?: string;
+};
+export declare function getFimoSourceAttributes(source: string | null | undefined, context?: FimoSourceContext): FimoSourceAttributes;
+//# sourceMappingURL=source-attributes.d.ts.map

package/dist/runtime/react/primitives/source-attributes.js

@@ -0,0 +1,19 @@
+const MAX_SOURCE_CONTEXT_MARKER_LENGTH = 4096;
+export function getFimoSourceAttributes(source, context) {
+    let contextMarker;
+    if (context && context.length > 0) {
+        try {
+            const encoded = JSON.stringify(context);
+            if (encoded.length <= MAX_SOURCE_CONTEXT_MARKER_LENGTH) {
+                contextMarker = encoded;
+            }
+        }
+        catch {
+            contextMarker = undefined;
+        }
+    }
+    return {
+        'data-fimo-source': source ?? undefined,
+        ...(contextMarker ? { 'data-fimo-source-context': contextMarker } : {}),
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fimo-react",
-  "version": "2.2.0-staging.8",
+  "version": "2.2.0-staging.9",
   "description": "Fimo React runtime: content clients, labels, and source-tracked primitives.",
   "files": [
     "dist/",
@@ -43,12 +43,12 @@
     "test:watch": "vitest"
   },
   "devDependencies": {
-    "@fimo/tsconfig": "2.2.0-staging.8",
+    "@fimo/tsconfig": "2.2.0-staging.9",
     "@tanstack/react-query": "^5.80.6",
     "@types/node": "22.18.6",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "fimo": "2.2.0-staging.8",
+    "fimo": "2.2.0-staging.9",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "typescript": "7.0.2",
@@ -57,7 +57,7 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.80.6",
-    "fimo": "2.2.0-staging.8",
+    "fimo": "2.2.0-staging.9",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0"
   },