@webiny/app-website-builder 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/inputRenderers/ContentEntryInput.js

@@ -0,0 +1,277 @@
+import react, { useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { AutoComplete, Input, SegmentedControl, Select, Text } from "@webiny/admin-ui";
+import { RefSingleAutocompletePresenterFeature } from "@webiny/app-headless-cms/presentation/fieldRenderers/ref/autocomplete/single/feature.js";
+import { RefMultiAutocompletePresenterFeature } from "@webiny/app-headless-cms/presentation/fieldRenderers/ref/autocomplete/multi/feature.js";
+import { ObjectRowActions } from "./ObjectInput/ObjectRowActions.js";
+import { ObjectFieldHeader } from "./ObjectInput/ObjectFieldHeader.js";
+const EntryRow = ({ title, actions })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            height: 40
+        },
+        className: "group flex items-center justify-between gap-xs rounded-md border border-neutral-dimmed-darker px-sm-extra bg-neutral-base"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-1 items-center min-w-0"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "truncate text-neutral-strong"
+    }, title)), actions ? /*#__PURE__*/ react.createElement("div", {
+        className: "hidden group-hover:flex items-center gap-xs shrink-0"
+    }, actions) : null);
+const ContentEntryInputRenderer = (props)=>{
+    const input = props.input;
+    if ("query" === input.mode) return /*#__PURE__*/ react.createElement(QueryInner, props);
+    return /*#__PURE__*/ react.createElement(ManualRenderer, props);
+};
+const ManualRenderer = (props)=>{
+    const input = props.input;
+    const parentContainer = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = parentContainer.createChildContainer();
+        if (input.list) RefMultiAutocompletePresenterFeature.register(child);
+        else RefSingleAutocompletePresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, input.list ? /*#__PURE__*/ react.createElement(MultiInner, props) : /*#__PURE__*/ react.createElement(SingleInner, props));
+};
+const SingleInner = observer(({ value, onChange, ...props })=>{
+    const input = props.input;
+    const { presenter } = useFeature(RefSingleAutocompletePresenterFeature);
+    const current = value ?? null;
+    useEffect(()=>{
+        presenter.init({
+            modelIds: input.models,
+            value: current
+        });
+    }, []);
+    const vm = presenter.vm;
+    return /*#__PURE__*/ react.createElement(AutoComplete, {
+        label: input.label,
+        description: input.description,
+        loading: vm.loading,
+        value: vm.value,
+        options: vm.options,
+        onValueSearch: (query)=>presenter.search(query),
+        onValueChange: (selectedEntryId)=>{
+            if (!selectedEntryId) {
+                presenter.clear();
+                onChange(({ value })=>value.set(null));
+                return;
+            }
+            const ref = presenter.select(selectedEntryId);
+            onChange(({ value })=>value.set(ref));
+        },
+        onValueReset: ()=>{
+            presenter.clear();
+            onChange(({ value })=>value.set(null));
+        },
+        displayResetAction: vm.canReset
+    });
+});
+const MultiInner = observer(({ value, onChange, ...props })=>{
+    const input = props.input;
+    const { presenter } = useFeature(RefMultiAutocompletePresenterFeature);
+    const current = Array.isArray(value) ? value : [];
+    const [pickerKey, setPickerKey] = useState(0);
+    useEffect(()=>{
+        presenter.init({
+            modelIds: input.models,
+            values: current
+        });
+    }, []);
+    const vm = presenter.vm;
+    const labelFor = (entryId)=>vm.options.find((option)=>option.value === entryId)?.label ?? entryId;
+    const setSelection = (entryIds)=>{
+        const refs = presenter.select(entryIds);
+        onChange(({ value })=>value.set(refs.length > 0 ? refs : null));
+    };
+    const moveItem = (from, to)=>{
+        if (to < 0 || to >= vm.values.length) return;
+        const next = [
+            ...vm.values
+        ];
+        [next[from], next[to]] = [
+            next[to],
+            next[from]
+        ];
+        setSelection(next);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(AutoComplete, {
+        key: pickerKey,
+        label: input.label,
+        description: input.description,
+        loading: vm.loading,
+        value: void 0,
+        options: vm.options.filter((option)=>!vm.values.includes(option.value)),
+        onValueSearch: (query)=>presenter.search(query),
+        onValueChange: (entryId)=>{
+            if (entryId && !vm.values.includes(entryId)) {
+                setSelection([
+                    ...vm.values,
+                    entryId
+                ]);
+                setPickerKey((key)=>key + 1);
+            }
+        }
+    }), vm.values.length > 0 ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xs"
+    }, vm.values.map((entryId, index)=>/*#__PURE__*/ react.createElement(EntryRow, {
+            key: entryId,
+            title: labelFor(entryId),
+            actions: /*#__PURE__*/ react.createElement(ObjectRowActions, {
+                onMoveUp: ()=>moveItem(index, index - 1),
+                onMoveDown: ()=>moveItem(index, index + 1),
+                onRemove: ()=>setSelection(vm.values.filter((id)=>id !== entryId)),
+                canMoveUp: index > 0,
+                canMoveDown: index < vm.values.length - 1
+            })
+        }))) : /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "No entries selected yet."));
+});
+const SORT_DIRECTION_OPTIONS = [
+    {
+        label: "Ascending",
+        value: "asc"
+    },
+    {
+        label: "Descending",
+        value: "desc"
+    }
+];
+const QueryInner = ({ value, onChange, ...props })=>{
+    const input = props.input;
+    const config = input.query ?? {};
+    const modelId = input.models[0];
+    const current = value ?? {
+        modelId
+    };
+    useEffect(()=>{
+        if (!current.modelId && modelId) onChange(({ value: v })=>{
+            v.set({
+                ...current,
+                modelId
+            });
+        });
+    }, [
+        modelId
+    ]);
+    const sortFields = (config.sort?.fields ?? []).map((entry)=>"string" == typeof entry ? {
+            field: entry,
+            label: entry
+        } : {
+            field: entry.field,
+            label: entry.label ?? entry.field
+        });
+    const singleSortField = 1 === sortFields.length ? sortFields[0] : null;
+    const [searchText, setSearchText] = useState(current.search ?? "");
+    const update = (patch)=>{
+        onChange(({ value })=>{
+            value.set({
+                ...current,
+                modelId,
+                ...patch
+            });
+        });
+    };
+    const maxLimit = config.limit?.max;
+    const [limitText, setLimitText] = useState(String(current.limit ?? config.limit?.default ?? ""));
+    const limitError = (()=>{
+        if ("" === limitText.trim()) return;
+        const parsed = Number(limitText);
+        if (!Number.isInteger(parsed)) return "Enter a whole number.";
+        if (parsed < 1) return "Must be at least 1.";
+        if (maxLimit && parsed > maxLimit) return `Maximum is ${maxLimit}.`;
+    })();
+    const onLimitChange = (raw)=>{
+        setLimitText(raw);
+        const parsed = Number(raw);
+        if ("" !== raw.trim() && Number.isInteger(parsed) && parsed >= 1 && (!maxLimit || parsed <= maxLimit)) update({
+            limit: parsed
+        });
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, input.label ? /*#__PURE__*/ react.createElement(ObjectFieldHeader, {
+        label: input.label,
+        description: input.description
+    }) : null, singleSortField ? /*#__PURE__*/ react.createElement(SegmentedControl, {
+        label: `Sort by ${singleSortField.label}`,
+        value: current.sort?.order ?? "asc",
+        items: SORT_DIRECTION_OPTIONS,
+        fullWidth: true,
+        onChange: (order)=>{
+            update({
+                sort: {
+                    field: singleSortField.field,
+                    order: order ?? "asc"
+                }
+            });
+        }
+    }) : sortFields.length > 1 ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        variant: "secondary",
+        label: "Sort by",
+        value: current.sort?.field,
+        options: sortFields.map((field)=>({
+                label: field.label,
+                value: field.field
+            })),
+        displayResetAction: true,
+        onChange: (field)=>{
+            update({
+                sort: field ? {
+                    field,
+                    order: current.sort?.order ?? "asc"
+                } : void 0
+            });
+        }
+    }), current.sort?.field ? /*#__PURE__*/ react.createElement(SegmentedControl, {
+        label: "Direction",
+        value: current.sort?.order ?? "asc",
+        items: SORT_DIRECTION_OPTIONS,
+        fullWidth: true,
+        onChange: (order)=>{
+            update({
+                sort: {
+                    field: current.sort.field,
+                    order: order ?? "asc"
+                }
+            });
+        }
+    }) : null) : null, config.limit ? /*#__PURE__*/ react.createElement(Input, {
+        type: "number",
+        size: "md",
+        variant: "secondary",
+        label: "Limit",
+        description: maxLimit ? `Up to ${maxLimit}.` : void 0,
+        value: limitText,
+        validation: limitError ? {
+            isValid: false,
+            message: limitError
+        } : void 0,
+        onChange: onLimitChange
+    }) : null, config.search ? /*#__PURE__*/ react.createElement(Input, {
+        size: "md",
+        variant: "secondary",
+        label: "Search",
+        placeholder: "Search entries…",
+        value: searchText,
+        onChange: setSearchText,
+        onBlur: (e)=>update({
+                search: e.currentTarget.value
+            }),
+        onEnter: (e)=>update({
+                search: e.currentTarget.value
+            })
+    }) : null);
+};
+export { ContentEntryInputRenderer };
+
+//# sourceMappingURL=ContentEntryInput.js.map

package/inputRenderers/ContentEntryInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ContentEntryInput.js","sources":["../../src/inputRenderers/ContentEntryInput.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { AutoComplete, Select, Input, SegmentedControl, Text } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport type {\n    ContentEntryInput,\n    ContentEntryReference,\n    ContentEntryQueryValue\n} from \"@webiny/website-builder-sdk\";\nimport { RefSingleAutocompletePresenterFeature } from \"@webiny/app-headless-cms/presentation/fieldRenderers/ref/autocomplete/single/feature.js\";\nimport { RefMultiAutocompletePresenterFeature } from \"@webiny/app-headless-cms/presentation/fieldRenderers/ref/autocomplete/multi/feature.js\";\nimport { ObjectRowActions } from \"~/inputRenderers/ObjectInput/ObjectRowActions.js\";\nimport { ObjectFieldHeader } from \"~/inputRenderers/ObjectInput/ObjectFieldHeader.js\";\n\ninterface EntryRowProps {\n    title: React.ReactNode;\n    actions?: React.ReactNode;\n}\n\n/**\n * A non-interactive row for a selected entry: a truncating title with\n * hover-revealed actions. Mirrors the object-list row look, without click-to-open.\n */\nconst EntryRow = ({ title, actions }: EntryRowProps) => (\n    <div\n        style={{ height: 40 }}\n        className={\n            \"group flex items-center justify-between gap-xs rounded-md border border-neutral-dimmed-darker px-sm-extra bg-neutral-base\"\n        }\n    >\n        <div className={\"flex flex-1 items-center min-w-0\"}>\n            <Text size={\"sm\"} className={\"truncate text-neutral-strong\"}>\n                {title}\n            </Text>\n        </div>\n        {actions ? (\n            <div className={\"hidden group-hover:flex items-center gap-xs shrink-0\"}>{actions}</div>\n        ) : null}\n    </div>\n);\n\n/**\n * Editor sidebar renderer for the `contentEntry` input. Supports two modes:\n *\n * - \"manual\" (default): the editor hand-picks one (single) or several (list)\n *   CMS entries from the input's author-fixed model(s), stored as references\n *   (`{ id, modelId }`). Reuses the Headless CMS reference autocomplete.\n * - \"query\": the editor configures a dynamic query (sort / limit / search)\n *   within the bounds the component author declared on `input.query`.\n */\nexport const ContentEntryInputRenderer = (props: ElementInputRendererProps) => {\n    const input = props.input as ContentEntryInput;\n\n    if (input.mode === \"query\") {\n        return <QueryInner {...props} />;\n    }\n\n    return <ManualRenderer {...props} />;\n};\n\n// --- Manual mode -----------------------------------------------------------\n\nconst ManualRenderer = (props: ElementInputRendererProps) => {\n    const input = props.input as ContentEntryInput;\n    const parentContainer = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = parentContainer.createChildContainer();\n        if (input.list) {\n            RefMultiAutocompletePresenterFeature.register(child);\n        } else {\n            RefSingleAutocompletePresenterFeature.register(child);\n        }\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            {input.list ? <MultiInner {...props} /> : <SingleInner {...props} />}\n        </DiContainerProvider>\n    );\n};\n\nconst SingleInner = observer(({ value, onChange, ...props }: ElementInputRendererProps) => {\n    const input = props.input as ContentEntryInput;\n    const { presenter } = useFeature(RefSingleAutocompletePresenterFeature);\n\n    const current = (value as ContentEntryReference | null | undefined) ?? null;\n\n    useEffect(() => {\n        presenter.init({ modelIds: input.models, value: current });\n    }, []);\n\n    const vm = presenter.vm;\n\n    return (\n        <AutoComplete\n            label={input.label}\n            description={input.description}\n            loading={vm.loading}\n            value={vm.value}\n            options={vm.options}\n            onValueSearch={query => presenter.search(query)}\n            onValueChange={selectedEntryId => {\n                if (!selectedEntryId) {\n                    presenter.clear();\n                    onChange(({ value }) => value.set(null));\n                    return;\n                }\n                const ref = presenter.select(selectedEntryId);\n                onChange(({ value }) => value.set(ref));\n            }}\n            onValueReset={() => {\n                presenter.clear();\n                onChange(({ value }) => value.set(null));\n            }}\n            displayResetAction={vm.canReset}\n        />\n    );\n});\n\nconst MultiInner = observer(({ value, onChange, ...props }: ElementInputRendererProps) => {\n    const input = props.input as ContentEntryInput;\n    const { presenter } = useFeature(RefMultiAutocompletePresenterFeature);\n\n    const current: ContentEntryReference[] = Array.isArray(value) ? value : [];\n    // Bumping this remounts the AutoComplete, clearing its search text after a pick.\n    const [pickerKey, setPickerKey] = useState(0);\n\n    useEffect(() => {\n        presenter.init({ modelIds: input.models, values: current });\n    }, []);\n\n    const vm = presenter.vm;\n    const labelFor = (entryId: string) =>\n        vm.options.find(option => option.value === entryId)?.label ?? entryId;\n\n    const setSelection = (entryIds: string[]) => {\n        const refs = presenter.select(entryIds);\n        onChange(({ value }) => value.set(refs.length > 0 ? refs : null));\n    };\n\n    const moveItem = (from: number, to: number) => {\n        if (to < 0 || to >= vm.values.length) {\n            return;\n        }\n        const next = [...vm.values];\n        [next[from], next[to]] = [next[to], next[from]];\n        setSelection(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            {/* Picker: a single autocomplete that adds the chosen entry to the list below,\n                then remounts (via pickerKey) so its search input clears. */}\n            <AutoComplete\n                key={pickerKey}\n                label={input.label}\n                description={input.description}\n                loading={vm.loading}\n                value={undefined}\n                options={vm.options.filter(option => !vm.values.includes(option.value))}\n                onValueSearch={query => presenter.search(query)}\n                onValueChange={entryId => {\n                    if (entryId && !vm.values.includes(entryId)) {\n                        setSelection([...vm.values, entryId]);\n                        setPickerKey(key => key + 1);\n                    }\n                }}\n            />\n            {/* Selected entries as reorderable rows: a truncating title plus hover\n                actions to move up / down / remove. */}\n            {vm.values.length > 0 ? (\n                <div className={\"flex flex-col gap-xs\"}>\n                    {vm.values.map((entryId, index) => (\n                        <EntryRow\n                            key={entryId}\n                            title={labelFor(entryId)}\n                            actions={\n                                <ObjectRowActions\n                                    onMoveUp={() => moveItem(index, index - 1)}\n                                    onMoveDown={() => moveItem(index, index + 1)}\n                                    onRemove={() =>\n                                        setSelection(vm.values.filter(id => id !== entryId))\n                                    }\n                                    canMoveUp={index > 0}\n                                    canMoveDown={index < vm.values.length - 1}\n                                />\n                            }\n                        />\n                    ))}\n                </div>\n            ) : (\n                <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                    No entries selected yet.\n                </Text>\n            )}\n        </div>\n    );\n});\n\n// --- Query mode ------------------------------------------------------------\n\nconst SORT_DIRECTION_OPTIONS = [\n    { label: \"Ascending\", value: \"asc\" },\n    { label: \"Descending\", value: \"desc\" }\n];\n\nconst QueryInner = ({ value, onChange, ...props }: ElementInputRendererProps) => {\n    const input = props.input as ContentEntryInput;\n    const config = input.query ?? {};\n    const modelId = input.models[0];\n    const current = (value as ContentEntryQueryValue | undefined) ?? { modelId };\n\n    // Ensure modelId is always stored on the value so the frontend SDK can\n    // resolve the query without component manifests.\n    useEffect(() => {\n        if (!current.modelId && modelId) {\n            onChange(({ value: v }) => {\n                v.set({ ...current, modelId });\n            });\n        }\n    }, [modelId]);\n\n    const sortFields = (config.sort?.fields ?? []).map(entry =>\n        typeof entry === \"string\"\n            ? { field: entry, label: entry }\n            : { field: entry.field, label: entry.label ?? entry.field }\n    );\n    const singleSortField = sortFields.length === 1 ? sortFields[0] : null;\n    const [searchText, setSearchText] = useState(current.search ?? \"\");\n\n    const update = (patch: Partial<ContentEntryQueryValue>) => {\n        onChange(({ value }) => {\n            value.set({ ...current, modelId, ...patch });\n        });\n    };\n\n    // Keep the field showing what the editor typed; surface an error when it's out\n    // of range rather than silently rewriting the value.\n    const maxLimit = config.limit?.max;\n    const [limitText, setLimitText] = useState(\n        String(current.limit ?? config.limit?.default ?? \"\")\n    );\n\n    const limitError = (() => {\n        if (limitText.trim() === \"\") {\n            return undefined;\n        }\n        const parsed = Number(limitText);\n        if (!Number.isInteger(parsed)) {\n            return \"Enter a whole number.\";\n        }\n        if (parsed < 1) {\n            return \"Must be at least 1.\";\n        }\n        if (maxLimit && parsed > maxLimit) {\n            return `Maximum is ${maxLimit}.`;\n        }\n        return undefined;\n    })();\n\n    const onLimitChange = (raw: string) => {\n        setLimitText(raw);\n        const parsed = Number(raw);\n        // Only commit valid values — an out-of-range entry stays visible with the\n        // error until it's corrected.\n        if (\n            raw.trim() !== \"\" &&\n            Number.isInteger(parsed) &&\n            parsed >= 1 &&\n            (!maxLimit || parsed <= maxLimit)\n        ) {\n            update({ limit: parsed });\n        }\n    };\n\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            {input.label ? (\n                <ObjectFieldHeader label={input.label} description={input.description} />\n            ) : null}\n            {singleSortField ? (\n                // Only one sortable field → skip the field picker; just choose direction.\n                <SegmentedControl\n                    label={`Sort by ${singleSortField.label}`}\n                    value={current.sort?.order ?? \"asc\"}\n                    items={SORT_DIRECTION_OPTIONS}\n                    fullWidth\n                    onChange={order => {\n                        update({\n                            sort: {\n                                field: singleSortField.field,\n                                order: (order as \"asc\" | \"desc\") ?? \"asc\"\n                            }\n                        });\n                    }}\n                />\n            ) : sortFields.length > 1 ? (\n                <>\n                    <Select\n                        size={\"md\"}\n                        variant={\"secondary\"}\n                        label={\"Sort by\"}\n                        value={current.sort?.field}\n                        options={sortFields.map(field => ({\n                            label: field.label,\n                            value: field.field\n                        }))}\n                        displayResetAction\n                        onChange={field => {\n                            update({\n                                sort: field\n                                    ? { field, order: current.sort?.order ?? \"asc\" }\n                                    : undefined\n                            });\n                        }}\n                    />\n                    {current.sort?.field ? (\n                        <SegmentedControl\n                            label={\"Direction\"}\n                            value={current.sort?.order ?? \"asc\"}\n                            items={SORT_DIRECTION_OPTIONS}\n                            fullWidth\n                            onChange={order => {\n                                update({\n                                    sort: {\n                                        field: current.sort!.field,\n                                        order: (order as \"asc\" | \"desc\") ?? \"asc\"\n                                    }\n                                });\n                            }}\n                        />\n                    ) : null}\n                </>\n            ) : null}\n\n            {config.limit ? (\n                <Input\n                    type={\"number\"}\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    label={\"Limit\"}\n                    description={maxLimit ? `Up to ${maxLimit}.` : undefined}\n                    value={limitText}\n                    validation={limitError ? { isValid: false, message: limitError } : undefined}\n                    onChange={onLimitChange}\n                />\n            ) : null}\n\n            {config.search ? (\n                <Input\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    label={\"Search\"}\n                    placeholder={\"Search entries…\"}\n                    value={searchText}\n                    onChange={setSearchText}\n                    onBlur={e => update({ search: e.currentTarget.value })}\n                    onEnter={e => update({ search: e.currentTarget.value })}\n                />\n            ) : null}\n        </div>\n    );\n};\n"],"names":["EntryRow","title","actions","Text","ContentEntryInputRenderer","props","input","QueryInner","ManualRenderer","parentContainer","useContainer","scopedContainer","useMemo","child","RefMultiAutocompletePresenterFeature","RefSingleAutocompletePresenterFeature","DiContainerProvider","MultiInner","SingleInner","observer","value","onChange","presenter","useFeature","current","useEffect","vm","AutoComplete","query","selectedEntryId","ref","Array","pickerKey","setPickerKey","useState","labelFor","entryId","option","setSelection","entryIds","refs","moveItem","from","to","next","undefined","key","index","ObjectRowActions","id","SORT_DIRECTION_OPTIONS","config","modelId","v","sortFields","entry","singleSortField","searchText","setSearchText","update","patch","maxLimit","limitText","setLimitText","String","limitError","parsed","Number","onLimitChange","raw","ObjectFieldHeader","SegmentedControl","order","Select","field","Input","e"],"mappings":"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"}

package/inputRenderers/DateTimeInput.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ElementInputRendererProps } from "../BaseEditor/index.js";
+/**
+ * The `dateTimeLocal` picker displays the stored ISO instant in local time, but emits the edited
+ * local wall-clock time with a `Z` suffix. Read that wall-clock time as local and convert it to a
+ * real UTC instant, so the stored value matches what the user picked.
+ */
+export declare const toUtcIsoString: (pickerValue: string | undefined) => string | undefined;
+export declare const DateTimeInputRenderer: ({ value, onChange, input, label }: ElementInputRendererProps) => React.JSX.Element;

package/inputRenderers/DateTimeInput.js

@@ -0,0 +1,21 @@
+import react from "react";
+import { DatePicker } from "@webiny/admin-ui";
+const toUtcIsoString = (pickerValue)=>{
+    if (!pickerValue) return;
+    return new Date(pickerValue.replace(/Z$/, "")).toISOString();
+};
+const DateTimeInputRenderer = ({ value, onChange, input, label })=>/*#__PURE__*/ react.createElement(DatePicker, {
+        type: "dateTimeLocal",
+        value: value || void 0,
+        onChange: (newValue)=>{
+            onChange(({ value })=>{
+                value.set(toUtcIsoString(newValue));
+            });
+        },
+        label: label,
+        description: input.description,
+        note: input.helperText
+    });
+export { DateTimeInputRenderer, toUtcIsoString };
+
+//# sourceMappingURL=DateTimeInput.js.map

package/inputRenderers/DateTimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/DateTimeInput.js","sources":["../../src/inputRenderers/DateTimeInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { DatePicker } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\n\n/**\n * The `dateTimeLocal` picker displays the stored ISO instant in local time, but emits the edited\n * local wall-clock time with a `Z` suffix. Read that wall-clock time as local and convert it to a\n * real UTC instant, so the stored value matches what the user picked.\n */\nexport const toUtcIsoString = (pickerValue: string | undefined) => {\n    if (!pickerValue) {\n        return undefined;\n    }\n    return new Date(pickerValue.replace(/Z$/, \"\")).toISOString();\n};\n\nexport const DateTimeInputRenderer = ({\n    value,\n    onChange,\n    input,\n    label\n}: ElementInputRendererProps) => {\n    return (\n        <DatePicker\n            type={\"dateTimeLocal\"}\n            value={value || undefined}\n            onChange={(newValue: string | undefined) => {\n                onChange(({ value }) => {\n                    value.set(toUtcIsoString(newValue));\n                });\n            }}\n            label={label}\n            description={input.description}\n            note={input.helperText}\n        />\n    );\n};\n"],"names":["toUtcIsoString","pickerValue","Date","DateTimeInputRenderer","value","onChange","input","label","DatePicker","undefined","newValue"],"mappings":";;AASO,MAAMA,iBAAiB,CAACC;IAC3B,IAAI,CAACA,aACD;IAEJ,OAAO,IAAIC,KAAKD,YAAY,OAAO,CAAC,MAAM,KAAK,WAAW;AAC9D;AAEO,MAAME,wBAAwB,CAAC,EAClCC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACmB,GACjB,WAAP,GACI,oBAACC,YAAUA;QACP,MAAM;QACN,OAAOJ,SAASK;QAChB,UAAU,CAACC;YACPL,SAAS,CAAC,EAAED,KAAK,EAAE;gBACfA,MAAM,GAAG,CAACJ,eAAeU;YAC7B;QACJ;QACA,OAAOH;QACP,aAAaD,MAAM,WAAW;QAC9B,MAAMA,MAAM,UAAU"}

package/inputRenderers/DateTimeInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/inputRenderers/DateTimeInput.test.js

@@ -0,0 +1,27 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { toUtcIsoString } from "./DateTimeInput.js";
+describe("toUtcIsoString", ()=>{
+    const originalTz = process.env.TZ;
+    beforeAll(()=>{
+        process.env.TZ = "America/New_York";
+    });
+    afterAll(()=>{
+        process.env.TZ = originalTz;
+    });
+    it("converts the picker's local wall-clock value to the matching UTC instant", ()=>{
+        expect(toUtcIsoString("2026-10-02T09:00:00.000Z")).toBe("2026-10-02T13:00:00.000Z");
+    });
+    it("round-trips: a stored instant shown in local time is saved back unchanged", ()=>{
+        const stored = "2026-10-02T14:00:00.000Z";
+        const shown = new Date(stored);
+        const pad = (n)=>String(n).padStart(2, "0");
+        const emitted = `${shown.getFullYear()}-${pad(shown.getMonth() + 1)}-${pad(shown.getDate())}T${pad(shown.getHours())}:${pad(shown.getMinutes())}:00.000Z`;
+        expect(toUtcIsoString(emitted)).toBe(stored);
+    });
+    it("keeps an empty value empty", ()=>{
+        expect(toUtcIsoString(void 0)).toBeUndefined();
+        expect(toUtcIsoString("")).toBeUndefined();
+    });
+});
+
+//# sourceMappingURL=DateTimeInput.test.js.map

package/inputRenderers/DateTimeInput.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/DateTimeInput.test.js","sources":["../../src/inputRenderers/DateTimeInput.test.ts"],"sourcesContent":["import { describe, it, expect, beforeAll, afterAll } from \"vitest\";\nimport { toUtcIsoString } from \"./DateTimeInput.js\";\n\ndescribe(\"toUtcIsoString\", () => {\n    const originalTz = process.env.TZ;\n\n    beforeAll(() => {\n        // UTC-04:00 on the dates below (EDT).\n        process.env.TZ = \"America/New_York\";\n    });\n\n    afterAll(() => {\n        process.env.TZ = originalTz;\n    });\n\n    it(\"converts the picker's local wall-clock value to the matching UTC instant\", () => {\n        // The user picks 09:00 local time; the picker emits it as \"09:00Z\".\n        expect(toUtcIsoString(\"2026-10-02T09:00:00.000Z\")).toBe(\"2026-10-02T13:00:00.000Z\");\n    });\n\n    it(\"round-trips: a stored instant shown in local time is saved back unchanged\", () => {\n        const stored = \"2026-10-02T14:00:00.000Z\";\n        // What the picker displays (local) and emits back with a \"Z\" suffix.\n        const shown = new Date(stored);\n        const pad = (n: number) => String(n).padStart(2, \"0\");\n        const emitted = `${shown.getFullYear()}-${pad(shown.getMonth() + 1)}-${pad(\n            shown.getDate()\n        )}T${pad(shown.getHours())}:${pad(shown.getMinutes())}:00.000Z`;\n\n        expect(toUtcIsoString(emitted)).toBe(stored);\n    });\n\n    it(\"keeps an empty value empty\", () => {\n        expect(toUtcIsoString(undefined)).toBeUndefined();\n        expect(toUtcIsoString(\"\")).toBeUndefined();\n    });\n});\n"],"names":["describe","originalTz","process","beforeAll","afterAll","it","expect","toUtcIsoString","stored","shown","Date","pad","n","String","emitted","undefined"],"mappings":";;AAGAA,SAAS,kBAAkB;IACvB,MAAMC,aAAaC,QAAQ,GAAG,CAAC,EAAE;IAEjCC,UAAU;QAEND,QAAQ,GAAG,CAAC,EAAE,GAAG;IACrB;IAEAE,SAAS;QACLF,QAAQ,GAAG,CAAC,EAAE,GAAGD;IACrB;IAEAI,GAAG,4EAA4E;QAE3EC,OAAOC,eAAe,6BAA6B,IAAI,CAAC;IAC5D;IAEAF,GAAG,6EAA6E;QAC5E,MAAMG,SAAS;QAEf,MAAMC,QAAQ,IAAIC,KAAKF;QACvB,MAAMG,MAAM,CAACC,IAAcC,OAAOD,GAAG,QAAQ,CAAC,GAAG;QACjD,MAAME,UAAU,GAAGL,MAAM,WAAW,GAAG,CAAC,EAAEE,IAAIF,MAAM,QAAQ,KAAK,GAAG,CAAC,EAAEE,IACnEF,MAAM,OAAO,IACf,CAAC,EAAEE,IAAIF,MAAM,QAAQ,IAAI,CAAC,EAAEE,IAAIF,MAAM,UAAU,IAAI,QAAQ,CAAC;QAE/DH,OAAOC,eAAeO,UAAU,IAAI,CAACN;IACzC;IAEAH,GAAG,8BAA8B;QAC7BC,OAAOC,eAAeQ,SAAY,aAAa;QAC/CT,OAAOC,eAAe,KAAK,aAAa;IAC5C;AACJ"}

package/inputRenderers/FileInput.js

@@ -1,52 +1,123 @@
-import React from "react";
-import { FilePicker } from "@webiny/admin-ui";
+import react, { useState } from "react";
+import { FilePicker, ImageEditor, RichItemPreview, getCroppedImageRenderStyles } from "@webiny/admin-ui";
 import { FileManager } from "@webiny/app-admin";
 import { useBreakpoint } from "../BaseEditor/hooks/useBreakpoint.js";
+import { getAssetCropParam, normalizeToAsset } from "@webiny/website-builder-sdk";
 import { fileManagerItemToValue } from "../shared/fileManagerItemToValue.js";
-export const FileInputRenderer = ({
-  value,
-  onChange,
-  label,
-  ...props
-}) => {
-  const input = props.input;
-  const {
-    isBaseBreakpoint
-  } = useBreakpoint();
-  const onFileChange = file => {
-    onChange(({
-      value
-    }) => {
-      const newValue = fileManagerItemToValue(file);
-      value.set(newValue);
-    });
-  };
-  const onRemove = () => {
-    onChange(({
-      value
-    }) => {
-      if (isBaseBreakpoint) {
-        value.set(undefined);
-      } else {
-        value.set(null);
-      }
+const isEditableImage = (asset)=>!!asset?.src && "string" == typeof asset.mimeType && asset.mimeType.startsWith("image/") && "image/svg+xml" !== asset.mimeType;
+const hasImageEdit = (image)=>{
+    if (!image?.width || !image?.height) return false;
+    const c = image.crop;
+    const fullCrop = !c || 0 === c.top && 0 === c.left && 0 === c.bottom && 0 === c.right;
+    const fp = image.focalPoint;
+    const centeredFocal = !fp || 0.5 === fp.x && 0.5 === fp.y;
+    return !fullCrop || !centeredFocal;
+};
+const toEditorValue = (image)=>{
+    if (!image) return;
+    return {
+        crop: image.crop,
+        hotspot: image.focalPoint ? {
+            x: image.focalPoint.x,
+            y: image.focalPoint.y,
+            width: 1,
+            height: 1
+        } : void 0,
+        alt: image.alt,
+        caption: image.caption
+    };
+};
+const FileInputRenderer = ({ value, onChange, label, ...props })=>{
+    const input = props.input;
+    const { isBaseBreakpoint } = useBreakpoint();
+    const [editorOpen, setEditorOpen] = useState(false);
+    const asset = normalizeToAsset(value) ?? void 0;
+    const editable = isEditableImage(asset);
+    const onFileChange = (file)=>{
+        onChange(({ value })=>{
+            value.set(fileManagerItemToValue(file));
+        });
+    };
+    const onRemove = ()=>{
+        onChange(({ value })=>{
+            if (isBaseBreakpoint) value.set(void 0);
+            else value.set(null);
+        });
+    };
+    const onSaveEdit = (edit)=>{
+        onChange(({ value })=>{
+            if (!asset) return;
+            const image = {
+                width: asset.image?.width,
+                height: asset.image?.height,
+                crop: edit.crop,
+                focalPoint: edit.hotspot ? {
+                    x: edit.hotspot.x,
+                    y: edit.hotspot.y
+                } : void 0,
+                alt: edit.alt,
+                caption: edit.caption
+            };
+            const updated = {
+                ...asset,
+                image
+            };
+            const cropParam = getAssetCropParam(updated);
+            if (cropParam) {
+                const sep = asset.src.includes("?") ? "&" : "?";
+                updated.url = `${asset.src}${sep}crop=${cropParam}`;
+            } else updated.url = asset.src;
+            value.set(updated);
+        });
+    };
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        accept: input.allowedFileTypes,
+        onChange: onFileChange,
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FilePicker, {
+                variant: "secondary",
+                label: label,
+                description: input.description,
+                type: "compact",
+                value: asset?.src,
+                renderFilePreview: editable && asset?.src && hasImageEdit(asset.image) ? (previewProps)=>/*#__PURE__*/ react.createElement(RichItemPreview, {
+                        ...previewProps,
+                        renderImage: ({ name })=>{
+                            const { wrapper, image } = getCroppedImageRenderStyles(asset.image?.width ?? 0, asset.image?.height ?? 0, asset.image?.crop, asset.image?.focalPoint ? {
+                                x: asset.image.focalPoint.x,
+                                y: asset.image.focalPoint.y,
+                                width: 1,
+                                height: 1
+                            } : void 0, {
+                                boxWidth: 1,
+                                boxHeight: 1,
+                                fit: "cover"
+                            });
+                            return /*#__PURE__*/ react.createElement("div", {
+                                style: wrapper
+                            }, /*#__PURE__*/ react.createElement("img", {
+                                src: asset.src,
+                                alt: name,
+                                draggable: false,
+                                style: image
+                            }));
+                        }
+                    }) : void 0,
+                onSelectItem: ()=>showFileManager(),
+                onRemoveItem: onRemove,
+                onEditItem: editable ? ()=>setEditorOpen(true) : void 0
+            }), editable ? /*#__PURE__*/ react.createElement(ImageEditor, {
+                open: editorOpen,
+                onClose: ()=>setEditorOpen(false),
+                image: {
+                    src: asset.src,
+                    width: asset.image?.width ?? 0,
+                    height: asset.image?.height ?? 0
+                },
+                value: toEditorValue(asset.image),
+                onSave: onSaveEdit
+            }) : null)
     });
-  };
-  return /*#__PURE__*/React.createElement(FileManager, {
-    accept: input.allowedFileTypes,
-    onChange: onFileChange,
-    render: ({
-      showFileManager
-    }) => /*#__PURE__*/React.createElement(FilePicker, {
-      label: label,
-      description: input.description,
-      type: "compact",
-      value: value,
-      onSelectItem: () => showFileManager(),
-      onRemoveItem: onRemove,
-      onEditItem: () => showFileManager()
-    })
-  });
 };
+export { FileInputRenderer };
 
 //# sourceMappingURL=FileInput.js.map

package/inputRenderers/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FilePicker","FileManager","useBreakpoint","fileManagerItemToValue","FileInputRenderer","value","onChange","label","props","input","isBaseBreakpoint","onFileChange","file","newValue","set","onRemove","undefined","createElement","accept","allowedFileTypes","render","showFileManager","description","type","onSelectItem","onRemoveItem","onEditItem"],"sources":["FileInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport type { FileInput } from \"@webiny/website-builder-sdk\";\nimport { fileManagerItemToValue } from \"~/shared/fileManagerItemToValue.js\";\n\nexport const FileInputRenderer = ({\n    value,\n    onChange,\n    label,\n    ...props\n}: ElementInputRendererProps) => {\n    const input = props.input as FileInput;\n    const { isBaseBreakpoint } = useBreakpoint();\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ value }) => {\n            const newValue = fileManagerItemToValue(file);\n            value.set(newValue);\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ value }) => {\n            if (isBaseBreakpoint) {\n                value.set(undefined);\n            } else {\n                value.set(null);\n            }\n        });\n    };\n\n    return (\n        <FileManager\n            accept={input.allowedFileTypes}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    label={label}\n                    description={input.description}\n                    type=\"compact\"\n                    value={value}\n                    onSelectItem={() => showFileManager()}\n                    onRemoveItem={onRemove}\n                    onEditItem={() => showFileManager()}\n                />\n            )}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,WAAW,QAAkC,mBAAmB;AACzE,SAASC,aAAa;AAEtB,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACoB,CAAC,KAAK;EAC7B,MAAMC,KAAK,GAAGD,KAAK,CAACC,KAAkB;EACtC,MAAM;IAAEC;EAAiB,CAAC,GAAGR,aAAa,CAAC,CAAC;EAC5C,MAAMS,YAAY,GAAIC,IAAyB,IAAK;IAChDN,QAAQ,CAAC,CAAC;MAAED;IAAM,CAAC,KAAK;MACpB,MAAMQ,QAAQ,GAAGV,sBAAsB,CAACS,IAAI,CAAC;MAC7CP,KAAK,CAACS,GAAG,CAACD,QAAQ,CAAC;IACvB,CAAC,CAAC;EACN,CAAC;EAED,MAAME,QAAQ,GAAGA,CAAA,KAAM;IACnBT,QAAQ,CAAC,CAAC;MAAED;IAAM,CAAC,KAAK;MACpB,IAAIK,gBAAgB,EAAE;QAClBL,KAAK,CAACS,GAAG,CAACE,SAAS,CAAC;MACxB,CAAC,MAAM;QACHX,KAAK,CAACS,GAAG,CAAC,IAAI,CAAC;MACnB;IACJ,CAAC,CAAC;EACN,CAAC;EAED,oBACIf,KAAA,CAAAkB,aAAA,CAAChB,WAAW;IACRiB,MAAM,EAAET,KAAK,CAACU,gBAAiB;IAC/Bb,QAAQ,EAAEK,YAAa;IACvBS,MAAM,EAAEA,CAAC;MAAEC;IAAgB,CAAC,kBACxBtB,KAAA,CAAAkB,aAAA,CAACjB,UAAU;MACPO,KAAK,EAAEA,KAAM;MACbe,WAAW,EAAEb,KAAK,CAACa,WAAY;MAC/BC,IAAI,EAAC,SAAS;MACdlB,KAAK,EAAEA,KAAM;MACbmB,YAAY,EAAEA,CAAA,KAAMH,eAAe,CAAC,CAAE;MACtCI,YAAY,EAAEV,QAAS;MACvBW,UAAU,EAAEA,CAAA,KAAML,eAAe,CAAC;IAAE,CACvC;EACH,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"inputRenderers/FileInput.js","sources":["../../src/inputRenderers/FileInput.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n    FilePicker,\n    ImageEditor,\n    RichItemPreview,\n    getCroppedImageRenderStyles,\n    type ImageEditorValue\n} from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport {\n    normalizeToAsset,\n    getAssetCropParam,\n    type Asset,\n    type AssetImage\n} from \"@webiny/website-builder-sdk\";\nimport type { FileInput } from \"@webiny/website-builder-sdk\";\nimport { fileManagerItemToValue } from \"~/shared/fileManagerItemToValue.js\";\n\nconst isEditableImage = (asset: Asset | undefined): asset is Asset => {\n    return (\n        !!asset?.src &&\n        typeof asset.mimeType === \"string\" &&\n        asset.mimeType.startsWith(\"image/\") &&\n        asset.mimeType !== \"image/svg+xml\"\n    );\n};\n\n/** True when the image carries a non-trivial crop or focal point worth previewing. */\nconst hasImageEdit = (image: AssetImage | undefined): boolean => {\n    if (!image?.width || !image?.height) {\n        return false;\n    }\n    const c = image.crop;\n    const fullCrop = !c || (c.top === 0 && c.left === 0 && c.bottom === 0 && c.right === 0);\n    const fp = image.focalPoint;\n    const centeredFocal = !fp || (fp.x === 0.5 && fp.y === 0.5);\n    return !fullCrop || !centeredFocal;\n};\n\n/** Map the stored asset image into the shared `ImageEditor` value (focalPoint → hotspot). */\nconst toEditorValue = (image: AssetImage | undefined): ImageEditorValue | undefined => {\n    if (!image) {\n        return undefined;\n    }\n    return {\n        crop: image.crop,\n        hotspot: image.focalPoint\n            ? { x: image.focalPoint.x, y: image.focalPoint.y, width: 1, height: 1 }\n            : undefined,\n        alt: image.alt,\n        caption: image.caption\n    };\n};\n\nexport const FileInputRenderer = ({\n    value,\n    onChange,\n    label,\n    ...props\n}: ElementInputRendererProps) => {\n    const input = props.input as FileInput;\n    const { isBaseBreakpoint } = useBreakpoint();\n    const [editorOpen, setEditorOpen] = useState(false);\n\n    const asset = normalizeToAsset(value) ?? undefined;\n    const editable = isEditableImage(asset);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ value }) => {\n            value.set(fileManagerItemToValue(file));\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ value }) => {\n            if (isBaseBreakpoint) {\n                value.set(undefined);\n            } else {\n                value.set(null);\n            }\n        });\n    };\n\n    // Save the per-usage crop / focal point / alt override onto the element value,\n    // writing the unified asset shape (hotspot → focalPoint).\n    const onSaveEdit = (edit: ImageEditorValue) => {\n        onChange(({ value }) => {\n            if (!asset) {\n                return;\n            }\n            const image: AssetImage = {\n                width: asset.image?.width,\n                height: asset.image?.height,\n                crop: edit.crop,\n                focalPoint: edit.hotspot ? { x: edit.hotspot.x, y: edit.hotspot.y } : undefined,\n                alt: edit.alt,\n                caption: edit.caption\n            };\n            const updated = { ...asset, image };\n            const cropParam = getAssetCropParam(updated);\n            if (cropParam) {\n                const sep = asset.src.includes(\"?\") ? \"&\" : \"?\";\n                updated.url = `${asset.src}${sep}crop=${cropParam}`;\n            } else {\n                updated.url = asset.src;\n            }\n            value.set(updated);\n        });\n    };\n\n    return (\n        <FileManager\n            accept={input.allowedFileTypes}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        variant={\"secondary\"}\n                        label={label}\n                        description={input.description}\n                        type=\"compact\"\n                        value={asset?.src}\n                        // Reflect the per-usage crop + focal point in the thumbnail.\n                        renderFilePreview={\n                            editable && asset?.src && hasImageEdit(asset.image)\n                                ? previewProps => (\n                                      <RichItemPreview\n                                          {...previewProps}\n                                          renderImage={({ name }) => {\n                                              const { wrapper, image } =\n                                                  getCroppedImageRenderStyles(\n                                                      asset.image?.width ?? 0,\n                                                      asset.image?.height ?? 0,\n                                                      asset.image?.crop,\n                                                      asset.image?.focalPoint\n                                                          ? {\n                                                                x: asset.image.focalPoint.x,\n                                                                y: asset.image.focalPoint.y,\n                                                                width: 1,\n                                                                height: 1\n                                                            }\n                                                          : undefined,\n                                                      { boxWidth: 1, boxHeight: 1, fit: \"cover\" }\n                                                  );\n                                              return (\n                                                  <div style={wrapper}>\n                                                      <img\n                                                          src={asset.src as string}\n                                                          alt={name}\n                                                          draggable={false}\n                                                          style={image}\n                                                      />\n                                                  </div>\n                                              );\n                                          }}\n                                      />\n                                  )\n                                : undefined\n                        }\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                        // The \"Edit\" (pencil) action edits the image (crop / focal\n                        // point / alt). Replacing the file is done by clicking the\n                        // preview. For non-images there is nothing to edit, so the\n                        // pencil is hidden.\n                        onEditItem={editable ? () => setEditorOpen(true) : undefined}\n                    />\n                    {editable ? (\n                        <ImageEditor\n                            open={editorOpen}\n                            onClose={() => setEditorOpen(false)}\n                            image={{\n                                src: asset.src,\n                                width: asset.image?.width ?? 0,\n                                height: asset.image?.height ?? 0\n                            }}\n                            value={toEditorValue(asset.image)}\n                            onSave={onSaveEdit}\n                        />\n                    ) : null}\n                </>\n            )}\n        />\n    );\n};\n"],"names":["isEditableImage","asset","hasImageEdit","image","c","fullCrop","fp","centeredFocal","toEditorValue","undefined","FileInputRenderer","value","onChange","label","props","input","isBaseBreakpoint","useBreakpoint","editorOpen","setEditorOpen","useState","normalizeToAsset","editable","onFileChange","file","fileManagerItemToValue","onRemove","onSaveEdit","edit","updated","cropParam","getAssetCropParam","sep","FileManager","showFileManager","FilePicker","previewProps","RichItemPreview","name","wrapper","getCroppedImageRenderStyles","ImageEditor"],"mappings":"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"}