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

package/features/settings/updateSettings/abstractions/UpdateSettingsUseCase.d.ts

@@ -0,0 +1,9 @@
+import type { IWebsiteBuilderSettings } from "../../../../features/settings/IWebsiteBuilderSettings.js";
+export interface IUpdateSettingsUseCase {
+    execute(settings: IWebsiteBuilderSettings): Promise<void>;
+}
+export declare const UpdateSettingsUseCase: import("@webiny/di").Abstraction<IUpdateSettingsUseCase>;
+export declare namespace UpdateSettingsUseCase {
+    type Interface = IUpdateSettingsUseCase;
+    type Params = IWebsiteBuilderSettings;
+}

package/features/settings/updateSettings/abstractions/UpdateSettingsUseCase.js

@@ -0,0 +1,5 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const UpdateSettingsUseCase = createAbstraction("WebsiteBuilder/UpdateSettingsUseCase");
+export { UpdateSettingsUseCase };
+
+//# sourceMappingURL=UpdateSettingsUseCase.js.map

package/features/settings/updateSettings/abstractions/UpdateSettingsUseCase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"features/settings/updateSettings/abstractions/UpdateSettingsUseCase.js","sources":["../../../../../src/features/settings/updateSettings/abstractions/UpdateSettingsUseCase.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { IWebsiteBuilderSettings } from \"~/features/settings/IWebsiteBuilderSettings.js\";\n\nexport interface IUpdateSettingsUseCase {\n    execute(settings: IWebsiteBuilderSettings): Promise<void>;\n}\n\nexport const UpdateSettingsUseCase = createAbstraction<IUpdateSettingsUseCase>(\n    \"WebsiteBuilder/UpdateSettingsUseCase\"\n);\n\nexport namespace UpdateSettingsUseCase {\n    export type Interface = IUpdateSettingsUseCase;\n    export type Params = IWebsiteBuilderSettings;\n}\n"],"names":["UpdateSettingsUseCase","createAbstraction"],"mappings":";AAOO,MAAMA,wBAAwBC,kBACjC"}

package/features/settings/updateSettings/abstractions/index.d.ts

@@ -0,0 +1,6 @@
+export { UpdateSettingsUseCase } from "./UpdateSettingsUseCase.js";
+export type { IUpdateSettingsUseCase } from "./UpdateSettingsUseCase.js";
+export { UpdateSettingsRepository } from "./UpdateSettingsRepository.js";
+export type { IUpdateSettingsRepository } from "./UpdateSettingsRepository.js";
+export { UpdateSettingsGateway } from "./UpdateSettingsGateway.js";
+export type { IUpdateSettingsGateway } from "./UpdateSettingsGateway.js";

package/features/settings/updateSettings/abstractions/index.js

@@ -0,0 +1,3 @@
+export { UpdateSettingsUseCase } from "./UpdateSettingsUseCase.js";
+export { UpdateSettingsRepository } from "./UpdateSettingsRepository.js";
+export { UpdateSettingsGateway } from "./UpdateSettingsGateway.js";

package/features/settings/updateSettings/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const UpdateSettingsFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    useCase: import("./abstractions/UpdateSettingsUseCase.js").IUpdateSettingsUseCase;
+}, []>;

package/features/settings/updateSettings/feature.js

@@ -0,0 +1,21 @@
+import { createFeature } from "@webiny/feature/admin";
+import { UpdateSettingsUseCase } from "./abstractions/index.js";
+import { UpdateSettingsUseCase as external_UpdateSettingsUseCase_js_UpdateSettingsUseCase } from "./UpdateSettingsUseCase.js";
+import { UpdateSettingsRepository } from "./UpdateSettingsRepository.js";
+import { UpdateSettingsGateway } from "./UpdateSettingsGateway.js";
+const UpdateSettingsFeature = createFeature({
+    name: "WebsiteBuilder/UpdateSettings",
+    register (container) {
+        container.register(external_UpdateSettingsUseCase_js_UpdateSettingsUseCase);
+        container.register(UpdateSettingsRepository).inSingletonScope();
+        container.register(UpdateSettingsGateway).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            useCase: container.resolve(UpdateSettingsUseCase)
+        };
+    }
+});
+export { UpdateSettingsFeature };
+
+//# sourceMappingURL=feature.js.map

package/features/settings/updateSettings/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"features/settings/updateSettings/feature.js","sources":["../../../../src/features/settings/updateSettings/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { UpdateSettingsUseCase as UseCaseAbstraction } from \"./abstractions/index.js\";\nimport { UpdateSettingsUseCase } from \"./UpdateSettingsUseCase.js\";\nimport { UpdateSettingsRepository } from \"./UpdateSettingsRepository.js\";\nimport { UpdateSettingsGateway } from \"./UpdateSettingsGateway.js\";\n\nexport const UpdateSettingsFeature = createFeature({\n    name: \"WebsiteBuilder/UpdateSettings\",\n    register(container) {\n        container.register(UpdateSettingsUseCase);\n        container.register(UpdateSettingsRepository).inSingletonScope();\n        container.register(UpdateSettingsGateway).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            useCase: container.resolve(UseCaseAbstraction)\n        };\n    }\n});\n"],"names":["UpdateSettingsFeature","createFeature","container","UpdateSettingsUseCase","UpdateSettingsRepository","UpdateSettingsGateway","UseCaseAbstraction"],"mappings":";;;;;AAMO,MAAMA,wBAAwBC,cAAc;IAC/C,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC;QACnBD,UAAU,QAAQ,CAACE,0BAA0B,gBAAgB;QAC7DF,UAAU,QAAQ,CAACG,uBAAuB,gBAAgB;IAC9D;IACA,SAAQH,SAAS;QACb,OAAO;YACH,SAASA,UAAU,OAAO,CAACI;QAC/B;IACJ;AACJ"}

package/features/settings/updateSettings/index.d.ts

@@ -0,0 +1 @@
+export { UpdateSettingsFeature } from "./feature.js";

package/features/settings/updateSettings/index.js

@@ -0,0 +1 @@
+export { UpdateSettingsFeature } from "./feature.js";

package/index.d.ts

@@ -1,5 +1,6 @@
-export * as Editor from "./BaseEditor";
-export * from "./shared/pagePathFromTitle";
-export { PageListConfig } from "./modules/pages/configs";
-export { RedirectListConfig } from "./modules/redirects/configs";
-export * from "./modules/pages/PageEditor/PageEditorConfig";
+export * as Editor from "./BaseEditor/index.js";
+export * from "./shared/pagePathFromTitle.js";
+export { PageListConfig } from "./presentation/pages/PageList/configs/index.js";
+export { RedirectListConfig } from "./presentation/redirects/RedirectList/index.js";
+export { PageEditorConfig } from "./presentation/pages/PageEditor/PageEditorConfig.js";
+export { PreviewUrlModifier } from "./features/index.js";

package/index.js

@@ -1,7 +1,7 @@
-export * as Editor from "./BaseEditor";
-export * from "./shared/pagePathFromTitle";
-export { PageListConfig } from "./modules/pages/configs";
-export { RedirectListConfig } from "./modules/redirects/configs";
-export * from "./modules/pages/PageEditor/PageEditorConfig";
-
-//# sourceMappingURL=index.js.map
+import * as __rspack_external__BaseEditor_index_js_dc6c77f1 from "./BaseEditor/index.js";
+export * from "./shared/pagePathFromTitle.js";
+export { PageListConfig } from "./presentation/pages/PageList/configs/index.js";
+export { RedirectListConfig } from "./presentation/redirects/RedirectList/index.js";
+export { PageEditorConfig } from "./presentation/pages/PageEditor/PageEditorConfig.js";
+export { PreviewUrlModifier } from "./features/index.js";
+export { __rspack_external__BaseEditor_index_js_dc6c77f1 as Editor };

package/inputRenderers/BooleanInput.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type { ElementInputRendererProps } from "../BaseEditor";
+import type { ElementInputRendererProps } from "../BaseEditor/index.js";
 export declare const BooleanInputRenderer: ({ value, onChange, input, label }: ElementInputRendererProps) => React.JSX.Element;

package/inputRenderers/BooleanInput.js

@@ -1,28 +1,30 @@
-import React from "react";
-import { Switch } from "@webiny/admin-ui";
-export const BooleanInputRenderer = ({
-  value,
-  onChange,
-  input,
-  label
-}) => {
-  const {
-    description,
-    helperText
-  } = input;
-  return /*#__PURE__*/React.createElement(Switch, {
-    label: label,
-    note: helperText,
-    description: description,
-    checked: value,
-    onChange: newValue => {
-      onChange(({
-        value
-      }) => {
-        value.set(newValue);
-      });
+import react from "react";
+import { SegmentedControl } from "@webiny/admin-ui";
+const ITEMS = [
+    {
+        label: "Off",
+        value: "false"
+    },
+    {
+        label: "On",
+        value: "true"
     }
-  });
+];
+const BooleanInputRenderer = ({ value, onChange, input, label })=>{
+    const { description, helperText } = input;
+    return /*#__PURE__*/ react.createElement(SegmentedControl, {
+        label: label,
+        note: helperText,
+        description: description,
+        items: ITEMS,
+        value: String(value),
+        onChange: (newValue)=>{
+            onChange(({ value })=>{
+                value.set("true" === newValue);
+            });
+        }
+    });
 };
+export { BooleanInputRenderer };
 
 //# sourceMappingURL=BooleanInput.js.map

package/inputRenderers/BooleanInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Switch","BooleanInputRenderer","value","onChange","input","label","description","helperText","createElement","note","checked","newValue","set"],"sources":["BooleanInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Switch } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor\";\n\nexport const BooleanInputRenderer = ({\n    value,\n    onChange,\n    input,\n    label\n}: ElementInputRendererProps) => {\n    const { description, helperText } = input;\n    return (\n        <Switch\n            label={label}\n            note={helperText}\n            description={description}\n            checked={value}\n            onChange={newValue => {\n                onChange(({ value }) => {\n                    value.set(newValue);\n                });\n            }}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,kBAAkB;AAGzC,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EACjCC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC;AACuB,CAAC,KAAK;EAC7B,MAAM;IAAEC,WAAW;IAAEC;EAAW,CAAC,GAAGH,KAAK;EACzC,oBACIL,KAAA,CAAAS,aAAA,CAACR,MAAM;IACHK,KAAK,EAAEA,KAAM;IACbI,IAAI,EAAEF,UAAW;IACjBD,WAAW,EAAEA,WAAY;IACzBI,OAAO,EAAER,KAAM;IACfC,QAAQ,EAAEQ,QAAQ,IAAI;MAClBR,QAAQ,CAAC,CAAC;QAAED;MAAM,CAAC,KAAK;QACpBA,KAAK,CAACU,GAAG,CAACD,QAAQ,CAAC;MACvB,CAAC,CAAC;IACN;EAAE,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"inputRenderers/BooleanInput.js","sources":["../../src/inputRenderers/BooleanInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\n\nconst ITEMS = [\n    { label: \"Off\", value: \"false\" },\n    { label: \"On\", value: \"true\" }\n];\n\nexport const BooleanInputRenderer = ({\n    value,\n    onChange,\n    input,\n    label\n}: ElementInputRendererProps) => {\n    const { description, helperText } = input;\n    return (\n        <SegmentedControl\n            label={label}\n            note={helperText}\n            description={description}\n            items={ITEMS}\n            value={String(value)}\n            onChange={newValue => {\n                onChange(({ value }) => {\n                    value.set(newValue === \"true\");\n                });\n            }}\n        />\n    );\n};\n"],"names":["ITEMS","BooleanInputRenderer","value","onChange","input","label","description","helperText","SegmentedControl","String","newValue"],"mappings":";;AAIA,MAAMA,QAAQ;IACV;QAAE,OAAO;QAAO,OAAO;IAAQ;IAC/B;QAAE,OAAO;QAAM,OAAO;IAAO;CAChC;AAEM,MAAMC,uBAAuB,CAAC,EACjCC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACmB;IACxB,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAE,GAAGH;IACpC,OAAO,WAAP,GACI,oBAACI,kBAAgBA;QACb,OAAOH;QACP,MAAME;QACN,aAAaD;QACb,OAAON;QACP,OAAOS,OAAOP;QACd,UAAUQ,CAAAA;YACNP,SAAS,CAAC,EAAED,KAAK,EAAE;gBACfA,MAAM,GAAG,CAACQ,AAAa,WAAbA;YACd;QACJ;;AAGZ"}

package/inputRenderers/ColorInput.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { ElementInputRendererProps } from "../BaseEditor/index.js";
+/**
+ * Renderer for `Webiny/ColorPicker`, the input type `createColorInput()` declares.
+ *
+ * It offers the active theme's palette, honours the theme's colour policy, and stores a *token reference*
+ * when a swatch is picked — so a colour chosen here follows later theme changes exactly as an element
+ * style does. Picking a free value stores a literal and detaches the input from the theme, which is the
+ * same rule the style controls follow.
+ *
+ * The resolved colour travels with the reference as its `fallback`, so content keeps rendering the colour
+ * it was given if the theme is later deactivated.
+ */
+export declare const ColorInputRenderer: ({ value, token, onChange, input, label }: ElementInputRendererProps) => React.JSX.Element;

package/inputRenderers/ColorInput.js

@@ -0,0 +1,23 @@
+import react from "react";
+import { ThemeColorPicker } from "@webiny/app-theme";
+import { createTokenReference } from "@webiny/website-builder-sdk";
+import { SidebarRow } from "../BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js";
+const ColorInputRenderer = ({ value, token, onChange, input, label })=>{
+    const handleChange = (selection)=>{
+        onChange(({ value })=>{
+            if (selection.path) return void value.setToken(createTokenReference(selection.path, selection.value), selection.value);
+            value.set(selection.value);
+        });
+    };
+    const currentValue = "string" == typeof value ? value : token?.fallback ?? input.defaultValue;
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
+        label: label
+    }, /*#__PURE__*/ react.createElement(ThemeColorPicker, {
+        value: currentValue,
+        tokenPath: token?.path ?? null,
+        onChange: handleChange
+    }));
+};
+export { ColorInputRenderer };
+
+//# sourceMappingURL=ColorInput.js.map

package/inputRenderers/ColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/ColorInput.js","sources":["../../src/inputRenderers/ColorInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { ThemeColorPicker, type ThemeColorSelection } from \"@webiny/app-theme\";\nimport { createTokenReference } from \"@webiny/website-builder-sdk\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\n/**\n * Renderer for `Webiny/ColorPicker`, the input type `createColorInput()` declares.\n *\n * It offers the active theme's palette, honours the theme's colour policy, and stores a *token reference*\n * when a swatch is picked — so a colour chosen here follows later theme changes exactly as an element\n * style does. Picking a free value stores a literal and detaches the input from the theme, which is the\n * same rule the style controls follow.\n *\n * The resolved colour travels with the reference as its `fallback`, so content keeps rendering the colour\n * it was given if the theme is later deactivated.\n */\nexport const ColorInputRenderer = ({\n    value,\n    token,\n    onChange,\n    input,\n    label\n}: ElementInputRendererProps) => {\n    const handleChange = (selection: ThemeColorSelection) => {\n        onChange(({ value }) => {\n            if (selection.path) {\n                value.setToken(\n                    createTokenReference(selection.path, selection.value),\n                    selection.value\n                );\n                return;\n            }\n\n            // A free value clears the reference — see `InputValueObject.set`.\n            value.set(selection.value);\n        });\n    };\n\n    // A token binding carries no literal of its own, so the swatch shows what the token resolves to.\n    const currentValue =\n        typeof value === \"string\" ? value : (token?.fallback ?? (input.defaultValue as string));\n\n    return (\n        <SidebarRow label={label}>\n            <ThemeColorPicker\n                value={currentValue}\n                tokenPath={token?.path ?? null}\n                onChange={handleChange}\n            />\n        </SidebarRow>\n    );\n};\n"],"names":["ColorInputRenderer","value","token","onChange","input","label","handleChange","selection","createTokenReference","currentValue","SidebarRow","ThemeColorPicker"],"mappings":";;;;AAiBO,MAAMA,qBAAqB,CAAC,EAC/BC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACmB;IACxB,MAAMC,eAAe,CAACC;QAClBJ,SAAS,CAAC,EAAEF,KAAK,EAAE;YACf,IAAIM,UAAU,IAAI,EAAE,YAChBN,MAAM,QAAQ,CACVO,qBAAqBD,UAAU,IAAI,EAAEA,UAAU,KAAK,GACpDA,UAAU,KAAK;YAMvBN,MAAM,GAAG,CAACM,UAAU,KAAK;QAC7B;IACJ;IAGA,MAAME,eACF,AAAiB,YAAjB,OAAOR,QAAqBA,QAASC,OAAO,YAAaE,MAAM,YAAY;IAE/E,OAAO,WAAP,GACI,oBAACM,YAAUA;QAAC,OAAOL;qBACf,oBAACM,kBAAgBA;QACb,OAAOF;QACP,WAAWP,OAAO,QAAQ;QAC1B,UAAUI;;AAI1B"}

package/inputRenderers/ContentEntryInput.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { ElementInputRendererProps } from "../BaseEditor/index.js";
+/**
+ * Editor sidebar renderer for the `contentEntry` input. Supports two modes:
+ *
+ * - "manual" (default): the editor hand-picks one (single) or several (list)
+ *   CMS entries from the input's author-fixed model(s), stored as references
+ *   (`{ id, modelId }`). Reuses the Headless CMS reference autocomplete.
+ * - "query": the editor configures a dynamic query (sort / limit / search)
+ *   within the bounds the component author declared on `input.query`.
+ */
+export declare const ContentEntryInputRenderer: (props: ElementInputRendererProps) => React.JSX.Element;

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 {};