@webiny/app-website-builder 6.6.0-alpha.0 → 6.6.0-alpha.2

package/presentation/experiments/ExperimentsManager/feature.js

@@ -0,0 +1,17 @@
+import { createFeature } from "@webiny/feature/admin";
+import { ExperimentsManagerPresenter } from "./abstractions/ExperimentsManagerPresenter.js";
+import { ExperimentsManagerPresenter as external_ExperimentsManagerPresenter_js_ExperimentsManagerPresenter } from "./ExperimentsManagerPresenter.js";
+const ExperimentsManagerPresenterFeature = createFeature({
+    name: "WebsiteBuilder/ExperimentsManagerPresenter",
+    register (container) {
+        container.register(external_ExperimentsManagerPresenter_js_ExperimentsManagerPresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(ExperimentsManagerPresenter)
+        };
+    }
+});
+export { ExperimentsManagerPresenterFeature };
+
+//# sourceMappingURL=feature.js.map

package/presentation/experiments/ExperimentsManager/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsManager/feature.js","sources":["../../../../src/presentation/experiments/ExperimentsManager/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { ExperimentsManagerPresenter as PresenterAbstraction } from \"./abstractions/ExperimentsManagerPresenter.js\";\nimport { ExperimentsManagerPresenter } from \"./ExperimentsManagerPresenter.js\";\n\nexport const ExperimentsManagerPresenterFeature = createFeature({\n    name: \"WebsiteBuilder/ExperimentsManagerPresenter\",\n    register(container) {\n        // The editor hub presenter (ExperimentsEditorPresenterFeature) is registered app/editor-wide\n        // and resolved through the container's parent chain — the manager delegates to that same\n        // singleton so drawer open/edit triggered from the editor toolbar are observed here.\n        container.register(ExperimentsManagerPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return { presenter: container.resolve(PresenterAbstraction) };\n    }\n});\n"],"names":["ExperimentsManagerPresenterFeature","createFeature","container","ExperimentsManagerPresenter","PresenterAbstraction"],"mappings":";;;AAIO,MAAMA,qCAAqCC,cAAc;IAC5D,MAAM;IACN,UAASC,SAAS;QAIdA,UAAU,QAAQ,CAACC,qEAA6B,gBAAgB;IACpE;IACA,SAAQD,SAAS;QACb,OAAO;YAAE,WAAWA,UAAU,OAAO,CAACE;QAAsB;IAChE;AACJ"}

package/presentation/experiments/ExperimentsManager/index.d.ts

@@ -0,0 +1,4 @@
+export { ExperimentsManagerPresenter } from "./abstractions/ExperimentsManagerPresenter.js";
+export type { IExperimentsManagerPresenter, IExperimentsManagerViewModel, ExperimentsManagerView, ExperimentCardViewModel, ExperimentCardBucket } from "./abstractions/ExperimentsManagerPresenter.js";
+export { ExperimentsManagerPresenterFeature } from "./feature.js";
+export { ExperimentsDrawerView } from "./components/ExperimentsDrawerView.js";

package/presentation/experiments/ExperimentsManager/index.js

@@ -0,0 +1,3 @@
+export { ExperimentsManagerPresenter } from "./abstractions/ExperimentsManagerPresenter.js";
+export { ExperimentsManagerPresenterFeature } from "./feature.js";
+export { ExperimentsDrawerView } from "./components/ExperimentsDrawerView.js";

package/presentation/experiments/VariantPageEditorConfig.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Editor config used when a variant is the edited document. It reuses the page editor scope (so the
+ * experiments switcher/toolbar still render) but swaps page-only chrome — publish, revisions,
+ * settings — for a variant-scoped autosave.
+ */
+export declare const VariantPageEditorConfig: () => React.JSX.Element;

package/presentation/experiments/VariantPageEditorConfig.js

@@ -0,0 +1,26 @@
+import react from "react";
+import { InternalPageEditorConfig } from "../pages/PageEditor/PageEditorConfig.js";
+import { BackButton } from "../pages/PageEditor/TopBar/BackButton.js";
+import { Title } from "../pages/PageEditor/TopBar/Title.js";
+import { TopBarOptionsMenu } from "../../BaseEditor/config/TopBar/Layout.js";
+import { VariantAutoSave } from "./config/VariantAutoSave.js";
+const { Ui: Ui } = InternalPageEditorConfig;
+const VariantPageEditorConfig = ()=>/*#__PURE__*/ react.createElement(InternalPageEditorConfig, null, /*#__PURE__*/ react.createElement(Ui.TopBar.Element, {
+        name: "buttonBack",
+        group: "left",
+        element: /*#__PURE__*/ react.createElement(BackButton, null)
+    }), /*#__PURE__*/ react.createElement(Ui.TopBar.Element, {
+        name: "title",
+        group: "left",
+        element: /*#__PURE__*/ react.createElement(Title, null)
+    }), /*#__PURE__*/ react.createElement(Ui.TopBar.Action, {
+        name: "optionsMenu",
+        element: /*#__PURE__*/ react.createElement(TopBarOptionsMenu, null)
+    }), /*#__PURE__*/ react.createElement(Ui.TopBar.Element, {
+        group: "left",
+        name: "autoSave",
+        element: /*#__PURE__*/ react.createElement(VariantAutoSave, null)
+    }));
+export { VariantPageEditorConfig };
+
+//# sourceMappingURL=VariantPageEditorConfig.js.map

package/presentation/experiments/VariantPageEditorConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/VariantPageEditorConfig.js","sources":["../../../src/presentation/experiments/VariantPageEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { InternalPageEditorConfig } from \"~/presentation/pages/PageEditor/PageEditorConfig.js\";\nimport { BackButton } from \"~/presentation/pages/PageEditor/TopBar/BackButton.js\";\nimport { Title } from \"~/presentation/pages/PageEditor/TopBar/Title.js\";\nimport { TopBarOptionsMenu } from \"~/BaseEditor/config/TopBar/Layout.js\";\nimport { VariantAutoSave } from \"./config/VariantAutoSave.js\";\n\nconst { Ui } = InternalPageEditorConfig;\n\n/**\n * Editor config used when a variant is the edited document. It reuses the page editor scope (so the\n * experiments switcher/toolbar still render) but swaps page-only chrome — publish, revisions,\n * settings — for a variant-scoped autosave.\n */\nexport const VariantPageEditorConfig = () => {\n    return (\n        <InternalPageEditorConfig>\n            <Ui.TopBar.Element name={\"buttonBack\"} group={\"left\"} element={<BackButton />} />\n            <Ui.TopBar.Element name={\"title\"} group={\"left\"} element={<Title />} />\n            <Ui.TopBar.Action name={\"optionsMenu\"} element={<TopBarOptionsMenu />} />\n            <Ui.TopBar.Element group={\"left\"} name={\"autoSave\"} element={<VariantAutoSave />} />\n        </InternalPageEditorConfig>\n    );\n};\n"],"names":["Ui","InternalPageEditorConfig","VariantPageEditorConfig","BackButton","Title","TopBarOptionsMenu","VariantAutoSave"],"mappings":";;;;;;AAOA,MAAM,EAAEA,IAAAA,EAAE,EAAE,GAAGC;AAOR,MAAMC,0BAA0B,IAC5B,WAAP,GACI,oBAACD,0BAAwBA,MAAAA,WAAAA,GACrB,oBAACD,GAAG,MAAM,CAAC,OAAO;QAAC,MAAM;QAAc,OAAO;QAAQ,uBAAS,oBAACG,YAAUA;sBAC1E,oBAACH,GAAG,MAAM,CAAC,OAAO;QAAC,MAAM;QAAS,OAAO;QAAQ,uBAAS,oBAACI,OAAKA;sBAChE,oBAACJ,GAAG,MAAM,CAAC,MAAM;QAAC,MAAM;QAAe,uBAAS,oBAACK,mBAAiBA;sBAClE,oBAACL,GAAG,MAAM,CAAC,OAAO;QAAC,OAAO;QAAQ,MAAM;QAAY,uBAAS,oBAACM,iBAAeA"}

package/presentation/experiments/config/ExperimentsEditorConfig.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * Registers the Experiments button (top bar) and the in-preview experiment toolbar.
+ *
+ * The shared selection state lives in the ExperimentsEditor presenter, which PageEditor initializes
+ * around the editor so it can swap the edited document between the page and a variant.
+ */
+export declare const ExperimentsEditorConfig: () => React.JSX.Element;

package/presentation/experiments/config/ExperimentsEditorConfig.js

@@ -0,0 +1,21 @@
+import react from "react";
+import { PageEditorConfig } from "../../pages/PageEditor/PageEditorConfig.js";
+import { ExperimentsButton } from "../ExperimentsEditor/components/ExperimentsButton.js";
+import { ExperimentPreviewToolbar } from "../ExperimentsEditor/components/ExperimentPreviewToolbar.js";
+const { Ui: Ui } = PageEditorConfig;
+const ExperimentsEditorConfig = ()=>/*#__PURE__*/ react.createElement(PageEditorConfig, null, /*#__PURE__*/ react.createElement(Ui.IsNotReadOnly, null, /*#__PURE__*/ react.createElement(Ui.TopBar.Action, {
+        name: "experiments",
+        before: "buttonPublish",
+        element: /*#__PURE__*/ react.createElement(ExperimentsButton, null)
+    })), /*#__PURE__*/ react.createElement(Ui.IsReadOnly, null, /*#__PURE__*/ react.createElement(Ui.TopBar.Action, {
+        name: "experimentsStatus",
+        before: "revisionsMenu",
+        element: /*#__PURE__*/ react.createElement(ExperimentsButton, null)
+    })), /*#__PURE__*/ react.createElement(Ui.Content.Element, {
+        name: "experimentToolbar",
+        after: "addressBar",
+        element: /*#__PURE__*/ react.createElement(ExperimentPreviewToolbar, null)
+    }));
+export { ExperimentsEditorConfig };
+
+//# sourceMappingURL=ExperimentsEditorConfig.js.map

package/presentation/experiments/config/ExperimentsEditorConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/config/ExperimentsEditorConfig.js","sources":["../../../../src/presentation/experiments/config/ExperimentsEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { PageEditorConfig } from \"~/presentation/pages/PageEditor/PageEditorConfig.js\";\nimport { ExperimentsButton } from \"../ExperimentsEditor/components/ExperimentsButton.js\";\nimport { ExperimentPreviewToolbar } from \"../ExperimentsEditor/components/ExperimentPreviewToolbar.js\";\n\nconst { Ui } = PageEditorConfig;\n\n/**\n * Registers the Experiments button (top bar) and the in-preview experiment toolbar.\n *\n * The shared selection state lives in the ExperimentsEditor presenter, which PageEditor initializes\n * around the editor so it can swap the edited document between the page and a variant.\n */\nexport const ExperimentsEditorConfig = () => {\n    return (\n        <PageEditorConfig>\n            {/* Draft page: the switcher, before the Publish button. */}\n            <Ui.IsNotReadOnly>\n                <Ui.TopBar.Action\n                    name={\"experiments\"}\n                    before={\"buttonPublish\"}\n                    element={<ExperimentsButton />}\n                />\n            </Ui.IsNotReadOnly>\n            {/* Published page: the running-experiment indicator + kill-switch, before the version menu. */}\n            <Ui.IsReadOnly>\n                <Ui.TopBar.Action\n                    name={\"experimentsStatus\"}\n                    before={\"revisionsMenu\"}\n                    element={<ExperimentsButton />}\n                />\n            </Ui.IsReadOnly>\n            <Ui.Content.Element\n                name={\"experimentToolbar\"}\n                after={\"addressBar\"}\n                element={<ExperimentPreviewToolbar />}\n            />\n        </PageEditorConfig>\n    );\n};\n"],"names":["Ui","PageEditorConfig","ExperimentsEditorConfig","ExperimentsButton","ExperimentPreviewToolbar"],"mappings":";;;;AAKA,MAAM,EAAEA,IAAAA,EAAE,EAAE,GAAGC;AAQR,MAAMC,0BAA0B,IAC5B,WAAP,GACI,oBAACD,kBAAgBA,MAAAA,WAAAA,GAEb,oBAACD,GAAG,aAAa,sBACb,oBAACA,GAAG,MAAM,CAAC,MAAM;QACb,MAAM;QACN,QAAQ;QACR,uBAAS,oBAACG,mBAAiBA;uBAInC,oBAACH,GAAG,UAAU,sBACV,oBAACA,GAAG,MAAM,CAAC,MAAM;QACb,MAAM;QACN,QAAQ;QACR,uBAAS,oBAACG,mBAAiBA;uBAGnC,oBAACH,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACI,0BAAwBA"}

package/presentation/experiments/config/VariantAutoSave.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/** Autosaves the edited document back to the selected variant (mirrors PageAutoSave for variants). */
+export declare const VariantAutoSave: (() => React.JSX.Element | null) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element | null;
+};

package/presentation/experiments/config/VariantAutoSave.js

@@ -0,0 +1,41 @@
+import react, { useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import debounce from "lodash/debounce.js";
+import { useFeature } from "@webiny/app";
+import { useDocumentEditor } from "../../../DocumentEditor/index.js";
+import { ExperimentsEditorPresenterFeature } from "../ExperimentsEditor/index.js";
+import { editorDocumentToVariantUpdate } from "../shared/variantDocument.js";
+const VariantAutoSaveAction = ({ variantRevisionId })=>{
+    const editor = useDocumentEditor();
+    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);
+    const saveVariant = useMemo(()=>debounce((document)=>presenter.saveVariant(variantRevisionId, editorDocumentToVariantUpdate(document)), 500), [
+        presenter,
+        variantRevisionId
+    ]);
+    useEffect(()=>editor.onDocumentStateChange(async (event)=>{
+            if (editor.getEditorState().read().isReadOnly) return;
+            editor.updateEditor((state)=>{
+                state.autoSaving = true;
+            });
+            await saveVariant(event.state);
+            setTimeout(()=>{
+                editor.updateEditor((state)=>{
+                    state.autoSaving = false;
+                });
+            }, 500);
+        }), [
+        saveVariant
+    ]);
+    return null;
+};
+const VariantAutoSave_VariantAutoSave = observer(function() {
+    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);
+    const { selectedVariant } = presenter.vm;
+    if (!selectedVariant) return null;
+    return /*#__PURE__*/ react.createElement(VariantAutoSaveAction, {
+        variantRevisionId: selectedVariant.id
+    });
+});
+export { VariantAutoSave_VariantAutoSave as VariantAutoSave };
+
+//# sourceMappingURL=VariantAutoSave.js.map

package/presentation/experiments/config/VariantAutoSave.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/config/VariantAutoSave.js","sources":["../../../../src/presentation/experiments/config/VariantAutoSave.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport debounce from \"lodash/debounce.js\";\nimport { useFeature } from \"@webiny/app\";\nimport type { EditorPage } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { ExperimentsEditorPresenterFeature } from \"../ExperimentsEditor/index.js\";\nimport { editorDocumentToVariantUpdate } from \"../shared/variantDocument.js\";\n\nconst VariantAutoSaveAction = ({ variantRevisionId }: { variantRevisionId: string }) => {\n    const editor = useDocumentEditor<EditorPage>();\n    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);\n\n    const saveVariant = useMemo(\n        () =>\n            debounce((document: EditorPage) => {\n                return presenter.saveVariant(\n                    variantRevisionId,\n                    editorDocumentToVariantUpdate(document)\n                );\n            }, 500),\n        [presenter, variantRevisionId]\n    );\n\n    useEffect(() => {\n        return editor.onDocumentStateChange(async event => {\n            if (editor.getEditorState().read().isReadOnly) {\n                return;\n            }\n            editor.updateEditor(state => {\n                state.autoSaving = true;\n            });\n            await saveVariant(event.state);\n            setTimeout(() => {\n                editor.updateEditor(state => {\n                    state.autoSaving = false;\n                });\n            }, 500);\n        });\n    }, [saveVariant]);\n\n    return null;\n};\n\n/** Autosaves the edited document back to the selected variant (mirrors PageAutoSave for variants). */\nexport const VariantAutoSave = observer(function VariantAutoSave() {\n    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);\n    const { selectedVariant } = presenter.vm;\n    if (!selectedVariant) {\n        return null;\n    }\n    return <VariantAutoSaveAction variantRevisionId={selectedVariant.id} />;\n});\n"],"names":["VariantAutoSaveAction","variantRevisionId","editor","useDocumentEditor","presenter","useFeature","ExperimentsEditorPresenterFeature","saveVariant","useMemo","debounce","document","editorDocumentToVariantUpdate","useEffect","event","state","setTimeout","VariantAutoSave","observer","selectedVariant"],"mappings":";;;;;;;AASA,MAAMA,wBAAwB,CAAC,EAAEC,iBAAiB,EAAiC;IAC/E,MAAMC,SAASC;IACf,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IAEjC,MAAMC,cAAcC,QAChB,IACIC,SAAS,CAACC,WACCN,UAAU,WAAW,CACxBH,mBACAU,8BAA8BD,YAEnC,MACP;QAACN;QAAWH;KAAkB;IAGlCW,UAAU,IACCV,OAAO,qBAAqB,CAAC,OAAMW;YACtC,IAAIX,OAAO,cAAc,GAAG,IAAI,GAAG,UAAU,EACzC;YAEJA,OAAO,YAAY,CAACY,CAAAA;gBAChBA,MAAM,UAAU,GAAG;YACvB;YACA,MAAMP,YAAYM,MAAM,KAAK;YAC7BE,WAAW;gBACPb,OAAO,YAAY,CAACY,CAAAA;oBAChBA,MAAM,UAAU,GAAG;gBACvB;YACJ,GAAG;QACP,IACD;QAACP;KAAY;IAEhB,OAAO;AACX;AAGO,MAAMS,kCAAkBC,SAAS;IACpC,MAAM,EAAEb,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEY,eAAe,EAAE,GAAGd,UAAU,EAAE;IACxC,IAAI,CAACc,iBACD,OAAO;IAEX,OAAO,WAAP,GAAO,oBAAClB,uBAAqBA;QAAC,mBAAmBkB,gBAAgB,EAAE;;AACvE"}

package/presentation/experiments/shared/variantColors.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shared bucket colours for the A/B UI. The control is always neutral; variants cycle a fixed
+ * palette by their 0-based index. Used by the experiment form, the list cards, and the in-preview
+ * toolbar so a given variant shows the same colour everywhere.
+ */
+export declare const CONTROL_COLOR = "#9ca3af";
+export declare const VARIANT_COLORS: string[];
+/** Colour for a variant by its 0-based index among the experiment's variants. */
+export declare const variantColor: (variantIndex: number) => string;
+/** Colour for a bucket: neutral for the control, otherwise the variant's palette colour. */
+export declare const bucketColor: (isControl: boolean, variantIndex: number) => string;

package/presentation/experiments/shared/variantColors.js

@@ -0,0 +1,13 @@
+const CONTROL_COLOR = "#9ca3af";
+const VARIANT_COLORS = [
+    "#e2572a",
+    "#4285f4",
+    "#0f9d58",
+    "#a142f4",
+    "#f4b400"
+];
+const variantColor = (variantIndex)=>VARIANT_COLORS[variantIndex % VARIANT_COLORS.length];
+const bucketColor = (isControl, variantIndex)=>isControl ? CONTROL_COLOR : variantColor(variantIndex);
+export { CONTROL_COLOR, VARIANT_COLORS, bucketColor, variantColor };
+
+//# sourceMappingURL=variantColors.js.map

package/presentation/experiments/shared/variantColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/shared/variantColors.js","sources":["../../../../src/presentation/experiments/shared/variantColors.ts"],"sourcesContent":["/**\n * Shared bucket colours for the A/B UI. The control is always neutral; variants cycle a fixed\n * palette by their 0-based index. Used by the experiment form, the list cards, and the in-preview\n * toolbar so a given variant shows the same colour everywhere.\n */\nexport const CONTROL_COLOR = \"#9ca3af\";\n\nexport const VARIANT_COLORS = [\"#e2572a\", \"#4285f4\", \"#0f9d58\", \"#a142f4\", \"#f4b400\"];\n\n/** Colour for a variant by its 0-based index among the experiment's variants. */\nexport const variantColor = (variantIndex: number): string =>\n    VARIANT_COLORS[variantIndex % VARIANT_COLORS.length];\n\n/** Colour for a bucket: neutral for the control, otherwise the variant's palette colour. */\nexport const bucketColor = (isControl: boolean, variantIndex: number): string =>\n    isControl ? CONTROL_COLOR : variantColor(variantIndex);\n"],"names":["CONTROL_COLOR","VARIANT_COLORS","variantColor","variantIndex","bucketColor","isControl"],"mappings":"AAKO,MAAMA,gBAAgB;AAEtB,MAAMC,iBAAiB;IAAC;IAAW;IAAW;IAAW;IAAW;CAAU;AAG9E,MAAMC,eAAe,CAACC,eACzBF,cAAc,CAACE,eAAeF,eAAe,MAAM,CAAC;AAGjD,MAAMG,cAAc,CAACC,WAAoBF,eAC5CE,YAAYL,gBAAgBE,aAAaC"}

package/presentation/experiments/shared/variantDocument.d.ts

@@ -0,0 +1,16 @@
+import type { EditorPage } from "@webiny/website-builder-sdk";
+import type { UpdateVariantInput, VariantContentDto } from "../../../features/experiments/index.js";
+/**
+ * Map a variant's stored content onto an editor document that keeps the *page's* identity.
+ *
+ * The preview iframe is addressed by the document `id` and the canvas keys its store by `wb.id`
+ * (and renders by `properties.id`). The site resolves the server-side base by that id via
+ * `getPageById`, which only works for a real page — a variant id is not a page. So the document
+ * keeps the page's id/path/`properties.id` (a valid, resolvable base — the page draft), while its
+ * content (elements, bindings, properties, …) is the variant's. The editor streams this content
+ * over the base, and autosave targets the actual variant separately (see VariantAutoSave). This is
+ * why control and variant share the same `wb.id`; the switch is handled by re-mounting the editor.
+ */
+export declare const variantToEditorDocument: (variant: VariantContentDto, page: EditorPage) => EditorPage;
+/** Extract the persistable content fields from an edited variant document. */
+export declare const editorDocumentToVariantUpdate: (document: EditorPage) => UpdateVariantInput;

package/presentation/experiments/shared/variantDocument.js

@@ -0,0 +1,31 @@
+const variantToEditorDocument = (variant, page)=>({
+        ...page,
+        properties: {
+            ...page.properties,
+            ...variant.properties ?? {},
+            id: page.properties.id ?? page.id,
+            path: page.properties.path
+        },
+        metadata: {
+            ...page.metadata,
+            ...variant.metadata ?? {},
+            documentType: page.metadata.documentType ?? "page",
+            wbVariantPreviewId: variant.id
+        },
+        bindings: variant.bindings ?? page.bindings,
+        elements: variant.elements ?? page.elements,
+        extensions: variant.extensions ?? page.extensions ?? {}
+    });
+const editorDocumentToVariantUpdate = (document)=>{
+    const { wbVariantPreviewId, ...metadata } = document.metadata;
+    return {
+        properties: document.properties,
+        metadata,
+        bindings: document.bindings,
+        elements: document.elements,
+        extensions: document.extensions
+    };
+};
+export { editorDocumentToVariantUpdate, variantToEditorDocument };
+
+//# sourceMappingURL=variantDocument.js.map

package/presentation/experiments/shared/variantDocument.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/shared/variantDocument.js","sources":["../../../../src/presentation/experiments/shared/variantDocument.ts"],"sourcesContent":["import type { EditorPage } from \"@webiny/website-builder-sdk\";\nimport type { UpdateVariantInput, VariantContentDto } from \"~/features/experiments/index.js\";\n\n/**\n * Map a variant's stored content onto an editor document that keeps the *page's* identity.\n *\n * The preview iframe is addressed by the document `id` and the canvas keys its store by `wb.id`\n * (and renders by `properties.id`). The site resolves the server-side base by that id via\n * `getPageById`, which only works for a real page — a variant id is not a page. So the document\n * keeps the page's id/path/`properties.id` (a valid, resolvable base — the page draft), while its\n * content (elements, bindings, properties, …) is the variant's. The editor streams this content\n * over the base, and autosave targets the actual variant separately (see VariantAutoSave). This is\n * why control and variant share the same `wb.id`; the switch is handled by re-mounting the editor.\n */\nexport const variantToEditorDocument = (\n    variant: VariantContentDto,\n    page: EditorPage\n): EditorPage => ({\n    ...page,\n    // Variant content, but the page's identity (id/path) so the preview base resolves.\n    properties: {\n        ...page.properties,\n        ...(variant.properties ?? {}),\n        id: (page.properties as Record<string, any>).id ?? page.id,\n        path: page.properties.path\n    } as EditorPage[\"properties\"],\n    metadata: {\n        ...page.metadata,\n        ...(variant.metadata ?? {}),\n        documentType: (page.metadata as Record<string, any>).documentType ?? \"page\",\n        // Marker so the address-bar \"preview in new tab\" opens this variant's draft (see\n        // usePreviewLink). Stripped before persisting — see editorDocumentToVariantUpdate.\n        wbVariantPreviewId: variant.id\n    } as EditorPage[\"metadata\"],\n    bindings: (variant.bindings ?? page.bindings) as EditorPage[\"bindings\"],\n    elements: (variant.elements ?? page.elements) as EditorPage[\"elements\"],\n    extensions: variant.extensions ?? page.extensions ?? {}\n});\n\n/** Extract the persistable content fields from an edited variant document. */\nexport const editorDocumentToVariantUpdate = (document: EditorPage): UpdateVariantInput => {\n    // Drop the editor-only preview marker so it's not persisted onto the variant.\n    const { wbVariantPreviewId, ...metadata } = document.metadata as Record<string, any>;\n    void wbVariantPreviewId;\n    return {\n        properties: document.properties,\n        metadata,\n        bindings: document.bindings,\n        elements: document.elements,\n        extensions: document.extensions\n    };\n};\n"],"names":["variantToEditorDocument","variant","page","editorDocumentToVariantUpdate","document","wbVariantPreviewId","metadata"],"mappings":"AAcO,MAAMA,0BAA0B,CACnCC,SACAC,OACc;QACd,GAAGA,IAAI;QAEP,YAAY;YACR,GAAGA,KAAK,UAAU;YAClB,GAAID,QAAQ,UAAU,IAAI,CAAC,CAAC;YAC5B,IAAKC,KAAK,UAAU,CAAyB,EAAE,IAAIA,KAAK,EAAE;YAC1D,MAAMA,KAAK,UAAU,CAAC,IAAI;QAC9B;QACA,UAAU;YACN,GAAGA,KAAK,QAAQ;YAChB,GAAID,QAAQ,QAAQ,IAAI,CAAC,CAAC;YAC1B,cAAeC,KAAK,QAAQ,CAAyB,YAAY,IAAI;YAGrE,oBAAoBD,QAAQ,EAAE;QAClC;QACA,UAAWA,QAAQ,QAAQ,IAAIC,KAAK,QAAQ;QAC5C,UAAWD,QAAQ,QAAQ,IAAIC,KAAK,QAAQ;QAC5C,YAAYD,QAAQ,UAAU,IAAIC,KAAK,UAAU,IAAI,CAAC;IAC1D;AAGO,MAAMC,gCAAgC,CAACC;IAE1C,MAAM,EAAEC,kBAAkB,EAAE,GAAGC,UAAU,GAAGF,SAAS,QAAQ;IAE7D,OAAO;QACH,YAAYA,SAAS,UAAU;QAC/BE;QACA,UAAUF,SAAS,QAAQ;QAC3B,UAAUA,SAAS,QAAQ;QAC3B,YAAYA,SAAS,UAAU;IACnC;AACJ"}

package/presentation/navigation/Extension.js

@@ -1,5 +1,6 @@
 import react from "react";
 import { AdminConfig, useToggler } from "@webiny/app-admin";
+import { ReactComponent } from "@webiny/icons/integration_instructions.svg";
 import { StarterKitConfigDialog } from "./StarterKitConfigDialog.js";
 const { Menu: Menu } = AdminConfig;
 const Extension = /*#__PURE__*/ react.memo(()=>{
@@ -8,12 +9,15 @@ const Extension = /*#__PURE__*/ react.memo(()=>{
         open: on,
         onClose: toggleOff
     }), /*#__PURE__*/ react.createElement(Menu, {
-        name: "wb.starterKit",
-        parent: "wb",
-        pin: "end",
+        name: "dev-tools.frontend",
+        parent: "dev-tools",
         element: /*#__PURE__*/ react.createElement(Menu.Item, {
-            text: "Configure Starter Kit",
-            onClick: toggleOn
+            text: "Configure Frontend",
+            onClick: toggleOn,
+            icon: /*#__PURE__*/ react.createElement(Menu.Link.Icon, {
+                label: "Configure Integrations",
+                element: /*#__PURE__*/ react.createElement(ReactComponent, null)
+            })
         })
     }));
 });

package/presentation/navigation/Extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/navigation/Extension.js","sources":["../../../src/presentation/navigation/Extension.tsx"],"sourcesContent":["import React from \"react\";\nimport { AdminConfig, useToggler } from \"@webiny/app-admin\";\nimport { StarterKitConfigDialog } from \"./StarterKitConfigDialog.js\";\n\nconst { Menu } = AdminConfig;\n\nexport const Extension = React.memo(() => {\n    const { on, toggleOn, toggleOff } = useToggler(false);\n\n    return (\n        <>\n            <StarterKitConfigDialog open={on} onClose={toggleOff} />\n            <Menu\n                name={\"wb.starterKit\"}\n                parent={\"wb\"}\n                pin={\"end\"}\n                element={<Menu.Item text={\"Configure Starter Kit\"} onClick={toggleOn} />}\n            />\n        </>\n    );\n});\n\nExtension.displayName = \"NavigationExtension\";\n"],"names":["Menu","AdminConfig","Extension","React","on","toggleOn","toggleOff","useToggler","StarterKitConfigDialog"],"mappings":";;;AAIA,MAAM,EAAEA,MAAAA,IAAI,EAAE,GAAGC;AAEV,MAAMC,YAAY,WAAHA,GAAGC,MAAAA,IAAU,CAAC;IAChC,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW;IAE/C,OAAO,WAAP,GACI,wDACI,oBAACC,wBAAsBA;QAAC,MAAMJ;QAAI,SAASE;sBAC3C,oBAACN,MAAIA;QACD,MAAM;QACN,QAAQ;QACR,KAAK;QACL,uBAAS,oBAACA,KAAK,IAAI;YAAC,MAAM;YAAyB,SAASK;;;AAI5E;AAEAH,UAAU,WAAW,GAAG"}
+{"version":3,"file":"presentation/navigation/Extension.js","sources":["../../../src/presentation/navigation/Extension.tsx"],"sourcesContent":["import React from \"react\";\nimport { AdminConfig, useToggler } from \"@webiny/app-admin\";\nimport { ReactComponent as IntegrationIcon } from \"@webiny/icons/integration_instructions.svg\";\nimport { StarterKitConfigDialog } from \"./StarterKitConfigDialog.js\";\n\nconst { Menu } = AdminConfig;\n\nexport const Extension = React.memo(() => {\n    const { on, toggleOn, toggleOff } = useToggler(false);\n\n    return (\n        <>\n            <StarterKitConfigDialog open={on} onClose={toggleOff} />\n            <Menu\n                name={\"dev-tools.frontend\"}\n                parent={\"dev-tools\"}\n                element={\n                    <Menu.Item\n                        text={\"Configure Frontend\"}\n                        onClick={toggleOn}\n                        icon={\n                            <Menu.Link.Icon\n                                label={\"Configure Integrations\"}\n                                element={<IntegrationIcon />}\n                            />\n                        }\n                    />\n                }\n            />\n        </>\n    );\n});\n\nExtension.displayName = \"NavigationExtension\";\n"],"names":["Menu","AdminConfig","Extension","React","on","toggleOn","toggleOff","useToggler","StarterKitConfigDialog","IntegrationIcon"],"mappings":";;;;AAKA,MAAM,EAAEA,MAAAA,IAAI,EAAE,GAAGC;AAEV,MAAMC,YAAY,WAAHA,GAAGC,MAAAA,IAAU,CAAC;IAChC,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW;IAE/C,OAAO,WAAP,GACI,wDACI,oBAACC,wBAAsBA;QAAC,MAAMJ;QAAI,SAASE;sBAC3C,oBAACN,MAAIA;QACD,MAAM;QACN,QAAQ;QACR,uBACI,oBAACA,KAAK,IAAI;YACN,MAAM;YACN,SAASK;YACT,oBACI,oBAACL,KAAK,IAAI,CAAC,IAAI;gBACX,OAAO;gBACP,uBAAS,oBAACS,gBAAeA;;;;AAQzD;AAEAP,UAAU,WAAW,GAAG"}

package/presentation/navigation/NextjsConfig/NextjsConfigDialog.d.ts

@@ -3,7 +3,7 @@ interface IStartDialogProps {
     open: boolean;
     onClose: () => void;
 }
-export declare const NexjsConfigDialog: ((props: IStartDialogProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const NexjsConfigDialog: ((props: IStartDialogProps) => React.JSX.Element) & React.NamedExoticComponent<IStartDialogProps> & {
+    readonly type: (props: IStartDialogProps) => React.JSX.Element;
 };
 export {};

package/presentation/navigation/StarterKitConfigDialog.js

@@ -70,7 +70,7 @@ const StarterKitConfigDialog = ({ open, onClose })=>{
         size: "xl",
         bodyPadding: false,
         onOpenChange: onClose,
-        title: "Configure Starter Kit",
+        title: "Configure Frontend",
         actions: /*#__PURE__*/ react.createElement(Dialog.CancelAction, {
             text: "Close"
         }),

package/presentation/navigation/StarterKitConfigDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/navigation/StarterKitConfigDialog.js","sources":["../../../src/presentation/navigation/StarterKitConfigDialog.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { compiler } from \"markdown-to-jsx/react\";\nimport { Dialog, OverlayLoader, Tabs } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport { NextjsConfigFeature } from \"~/presentation/navigation/NextjsConfig/feature.js\";\nimport { NuxtConfigFeature } from \"~/presentation/navigation/NuxtConfig/feature.js\";\nimport { markdownComponents } from \"~/presentation/navigation/NextjsConfig/markdownComponents.js\";\n\ninterface Props {\n    open: boolean;\n    onClose: () => void;\n}\n\nconst NextjsTabContent = observer(({ open }: { open: boolean }) => {\n    const { presenter } = useFeature(NextjsConfigFeature);\n\n    useEffect(() => {\n        if (open) {\n            presenter.init();\n        }\n    }, [open]);\n\n    const { loading, config } = presenter.vm;\n\n    if (loading) {\n        return (\n            <div className={\"relative\"} style={{ height: 80 }}>\n                <OverlayLoader text={\"Loading config...\"} />\n            </div>\n        );\n    }\n\n    return <>{compiler(config, { overrides: markdownComponents })}</>;\n});\n\nconst NuxtTabContent = observer(({ open }: { open: boolean }) => {\n    const { presenter } = useFeature(NuxtConfigFeature);\n\n    useEffect(() => {\n        if (open) {\n            presenter.init();\n        }\n    }, [open]);\n\n    const { loading, config } = presenter.vm;\n\n    if (loading) {\n        return (\n            <div className={\"relative\"} style={{ height: 80 }}>\n                <OverlayLoader text={\"Loading config...\"} />\n            </div>\n        );\n    }\n\n    return <>{compiler(config, { overrides: markdownComponents })}</>;\n});\n\nexport const StarterKitConfigDialog = ({ open, onClose }: Props) => {\n    const tabs = [\n        <Tabs.Tab\n            key={\"nextjs\"}\n            trigger={\"Next.js\"}\n            value={\"nextjs\"}\n            content={<NextjsTabContent open={open} />}\n        />,\n        <Tabs.Tab\n            key={\"nuxt\"}\n            trigger={\"Nuxt\"}\n            value={\"nuxt\"}\n            content={<NuxtTabContent open={open} />}\n        />\n    ];\n\n    return (\n        <Dialog\n            open={open}\n            size={\"xl\"}\n            bodyPadding={false}\n            onOpenChange={onClose}\n            title={\"Configure Starter Kit\"}\n            actions={<Dialog.CancelAction text={\"Close\"} />}\n            showCloseButton={true}\n            dismissible={true}\n        >\n            <Tabs tabs={tabs} size={\"md\"} spacing={\"lg\"} separator={true} />\n        </Dialog>\n    );\n};\n"],"names":["NextjsTabContent","observer","open","presenter","useFeature","NextjsConfigFeature","useEffect","loading","config","OverlayLoader","compiler","markdownComponents","NuxtTabContent","NuxtConfigFeature","StarterKitConfigDialog","onClose","tabs","Tabs","Dialog"],"mappings":";;;;;;;;AAcA,MAAMA,mBAAmBC,SAAS,CAAC,EAAEC,IAAI,EAAqB;IAC1D,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IAEjCC,UAAU;QACN,IAAIJ,MACAC,UAAU,IAAI;IAEtB,GAAG;QAACD;KAAK;IAET,MAAM,EAAEK,OAAO,EAAEC,MAAM,EAAE,GAAGL,UAAU,EAAE;IAExC,IAAII,SACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;QAAY,OAAO;YAAE,QAAQ;QAAG;qBAC5C,oBAACE,eAAaA;QAAC,MAAM;;IAKjC,OAAO,WAAP,GAAO,0CAAGC,SAASF,QAAQ;QAAE,WAAWG;IAAmB;AAC/D;AAEA,MAAMC,iBAAiBX,SAAS,CAAC,EAAEC,IAAI,EAAqB;IACxD,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWS;IAEjCP,UAAU;QACN,IAAIJ,MACAC,UAAU,IAAI;IAEtB,GAAG;QAACD;KAAK;IAET,MAAM,EAAEK,OAAO,EAAEC,MAAM,EAAE,GAAGL,UAAU,EAAE;IAExC,IAAII,SACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;QAAY,OAAO;YAAE,QAAQ;QAAG;qBAC5C,oBAACE,eAAaA;QAAC,MAAM;;IAKjC,OAAO,WAAP,GAAO,0CAAGC,SAASF,QAAQ;QAAE,WAAWG;IAAmB;AAC/D;AAEO,MAAMG,yBAAyB,CAAC,EAAEZ,IAAI,EAAEa,OAAO,EAAS;IAC3D,MAAMC,OAAO;sBACT,oBAACC,KAAK,GAAG;YACL,KAAK;YACL,SAAS;YACT,OAAO;YACP,uBAAS,oBAACjB,kBAAgBA;gBAAC,MAAME;;;sBAErC,oBAACe,KAAK,GAAG;YACL,KAAK;YACL,SAAS;YACT,OAAO;YACP,uBAAS,oBAACL,gBAAcA;gBAAC,MAAMV;;;KAEtC;IAED,OAAO,WAAP,GACI,oBAACgB,QAAMA;QACH,MAAMhB;QACN,MAAM;QACN,aAAa;QACb,cAAca;QACd,OAAO;QACP,uBAAS,oBAACG,OAAO,YAAY;YAAC,MAAM;;QACpC,iBAAiB;QACjB,aAAa;qBAEb,oBAACD,MAAIA;QAAC,MAAMD;QAAM,MAAM;QAAM,SAAS;QAAM,WAAW;;AAGpE"}
+{"version":3,"file":"presentation/navigation/StarterKitConfigDialog.js","sources":["../../../src/presentation/navigation/StarterKitConfigDialog.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { compiler } from \"markdown-to-jsx/react\";\nimport { Dialog, OverlayLoader, Tabs } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport { NextjsConfigFeature } from \"~/presentation/navigation/NextjsConfig/feature.js\";\nimport { NuxtConfigFeature } from \"~/presentation/navigation/NuxtConfig/feature.js\";\nimport { markdownComponents } from \"~/presentation/navigation/NextjsConfig/markdownComponents.js\";\n\ninterface Props {\n    open: boolean;\n    onClose: () => void;\n}\n\nconst NextjsTabContent = observer(({ open }: { open: boolean }) => {\n    const { presenter } = useFeature(NextjsConfigFeature);\n\n    useEffect(() => {\n        if (open) {\n            presenter.init();\n        }\n    }, [open]);\n\n    const { loading, config } = presenter.vm;\n\n    if (loading) {\n        return (\n            <div className={\"relative\"} style={{ height: 80 }}>\n                <OverlayLoader text={\"Loading config...\"} />\n            </div>\n        );\n    }\n\n    return <>{compiler(config, { overrides: markdownComponents })}</>;\n});\n\nconst NuxtTabContent = observer(({ open }: { open: boolean }) => {\n    const { presenter } = useFeature(NuxtConfigFeature);\n\n    useEffect(() => {\n        if (open) {\n            presenter.init();\n        }\n    }, [open]);\n\n    const { loading, config } = presenter.vm;\n\n    if (loading) {\n        return (\n            <div className={\"relative\"} style={{ height: 80 }}>\n                <OverlayLoader text={\"Loading config...\"} />\n            </div>\n        );\n    }\n\n    return <>{compiler(config, { overrides: markdownComponents })}</>;\n});\n\nexport const StarterKitConfigDialog = ({ open, onClose }: Props) => {\n    const tabs = [\n        <Tabs.Tab\n            key={\"nextjs\"}\n            trigger={\"Next.js\"}\n            value={\"nextjs\"}\n            content={<NextjsTabContent open={open} />}\n        />,\n        <Tabs.Tab\n            key={\"nuxt\"}\n            trigger={\"Nuxt\"}\n            value={\"nuxt\"}\n            content={<NuxtTabContent open={open} />}\n        />\n    ];\n\n    return (\n        <Dialog\n            open={open}\n            size={\"xl\"}\n            bodyPadding={false}\n            onOpenChange={onClose}\n            title={\"Configure Frontend\"}\n            actions={<Dialog.CancelAction text={\"Close\"} />}\n            showCloseButton={true}\n            dismissible={true}\n        >\n            <Tabs tabs={tabs} size={\"md\"} spacing={\"lg\"} separator={true} />\n        </Dialog>\n    );\n};\n"],"names":["NextjsTabContent","observer","open","presenter","useFeature","NextjsConfigFeature","useEffect","loading","config","OverlayLoader","compiler","markdownComponents","NuxtTabContent","NuxtConfigFeature","StarterKitConfigDialog","onClose","tabs","Tabs","Dialog"],"mappings":";;;;;;;;AAcA,MAAMA,mBAAmBC,SAAS,CAAC,EAAEC,IAAI,EAAqB;IAC1D,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IAEjCC,UAAU;QACN,IAAIJ,MACAC,UAAU,IAAI;IAEtB,GAAG;QAACD;KAAK;IAET,MAAM,EAAEK,OAAO,EAAEC,MAAM,EAAE,GAAGL,UAAU,EAAE;IAExC,IAAII,SACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;QAAY,OAAO;YAAE,QAAQ;QAAG;qBAC5C,oBAACE,eAAaA;QAAC,MAAM;;IAKjC,OAAO,WAAP,GAAO,0CAAGC,SAASF,QAAQ;QAAE,WAAWG;IAAmB;AAC/D;AAEA,MAAMC,iBAAiBX,SAAS,CAAC,EAAEC,IAAI,EAAqB;IACxD,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWS;IAEjCP,UAAU;QACN,IAAIJ,MACAC,UAAU,IAAI;IAEtB,GAAG;QAACD;KAAK;IAET,MAAM,EAAEK,OAAO,EAAEC,MAAM,EAAE,GAAGL,UAAU,EAAE;IAExC,IAAII,SACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;QAAY,OAAO;YAAE,QAAQ;QAAG;qBAC5C,oBAACE,eAAaA;QAAC,MAAM;;IAKjC,OAAO,WAAP,GAAO,0CAAGC,SAASF,QAAQ;QAAE,WAAWG;IAAmB;AAC/D;AAEO,MAAMG,yBAAyB,CAAC,EAAEZ,IAAI,EAAEa,OAAO,EAAS;IAC3D,MAAMC,OAAO;sBACT,oBAACC,KAAK,GAAG;YACL,KAAK;YACL,SAAS;YACT,OAAO;YACP,uBAAS,oBAACjB,kBAAgBA;gBAAC,MAAME;;;sBAErC,oBAACe,KAAK,GAAG;YACL,KAAK;YACL,SAAS;YACT,OAAO;YACP,uBAAS,oBAACL,gBAAcA;gBAAC,MAAMV;;;KAEtC;IAED,OAAO,WAAP,GACI,oBAACgB,QAAMA;QACH,MAAMhB;QACN,MAAM;QACN,aAAa;QACb,cAAca;QACd,OAAO;QACP,uBAAS,oBAACG,OAAO,YAAY;YAAC,MAAM;;QACpC,iBAAiB;QACjB,aAAa;qBAEb,oBAACD,MAAIA;QAAC,MAAMD;QAAM,MAAM;QAAM,SAAS;QAAM,WAAW;;AAGpE"}

package/presentation/pages/CreatePage/CreatePageDialog.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export declare const CREATE_PAGE_DIALOG = "createPage";
 export declare const useCreatePageDialog: () => (folderId: string) => void;
-export declare const CreatePageDialog: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const CreatePageDialog: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/presentation/pages/CreatePage/CreatePagePresenter.js

@@ -81,7 +81,7 @@ class CreatePagePresenterImpl {
     buildForm() {
         const form = this.factory.create({
             fields: (fields)=>({
-                    title: fields.text().label("Title").required("Title is required").onBlur((value, { form })=>{
+                    title: fields.text().label("Title").required("Title is required").autoFocus().onBlur((value, { form })=>{
                         const currentPath = form.field("path").as("text").getValue() ?? "";
                         if (!PagePath.create(currentPath).isEmpty()) return;
                         const newPath = PagePath.fromTitle(String(value)).toString();

package/presentation/pages/CreatePage/CreatePagePresenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/pages/CreatePage/CreatePagePresenter.js","sources":["../../../../src/presentation/pages/CreatePage/CreatePagePresenter.ts"],"sourcesContent":["import { makeAutoObservable, computed, runInAction } from \"mobx\";\nimport type { IFormModel, IFormModelFactory } from \"@webiny/app-admin\";\nimport { FormModelFactory } from \"@webiny/app-admin\";\nimport { CreatePageUseCase } from \"~/features/pages/createPage/abstractions.js\";\nimport type { CreatePageParams } from \"~/features/pages/createPage/abstractions.js\";\nimport {\n    CreatePagePresenter as PresenterAbstraction,\n    PageTypeProvider,\n    CreatePageFormModifier\n} from \"./abstractions.js\";\nimport { PagePath } from \"~/shared/PagePath.js\";\n\nclass CreatePagePresenterImpl implements PresenterAbstraction.Interface {\n    private readonly pageTypes;\n    private form: IFormModel;\n    private selectedPageType = \"\";\n    private folderId = \"\";\n    private loading = false;\n\n    constructor(\n        private factory: IFormModelFactory,\n        pageTypeProvider: PageTypeProvider.Interface,\n        private modifiers: CreatePageFormModifier.Interface[],\n        private createPage: CreatePageUseCase.Interface\n    ) {\n        this.pageTypes = pageTypeProvider.getPageTypes();\n        this.form = this.buildForm();\n\n        makeAutoObservable(this, { vm: computed }, { autoBind: true });\n    }\n\n    get vm(): PresenterAbstraction.ViewModel {\n        return {\n            form: this.form.vm,\n            pageTypes: this.pageTypes,\n            selectedPageType: this.selectedPageType,\n            loading: this.loading\n        };\n    }\n\n    init(folderId: string): void {\n        this.folderId = folderId;\n        const staticPage = this.pageTypes.find(p => p.name === \"static\");\n        this.selectedPageType = staticPage ? \"static\" : this.pageTypes[0]?.name;\n        this.form = this.buildForm();\n    }\n\n    changePageType(pageType: string): void {\n        const previousData = this.form.getData();\n        this.selectedPageType = pageType;\n        this.form = this.buildForm();\n        this.form.setData(previousData);\n    }\n\n    async submit() {\n        const data = await this.form.submit();\n        if (!data) {\n            return null;\n        }\n\n        const input: CreatePageParams = {\n            location: {\n                folderId: String(data.folderId)\n            },\n            properties: {\n                title: data.title,\n                path: data.path\n            },\n            metadata: {\n                documentType: \"page\",\n                pageType: data.pageType\n            },\n            elements: {\n                root: {\n                    type: \"Webiny/Element\",\n                    id: \"root\",\n                    component: {\n                        name: \"Webiny/Root\"\n                    }\n                }\n            }\n        };\n\n        // Let the active page type map its form data.\n        const pageType = this.pageTypes.find(pt => pt.name === this.selectedPageType);\n        if (pageType?.mapFromForm) {\n            pageType.mapFromForm(data, input);\n        }\n\n        // Let cross-cutting modifiers map their form data.\n        for (const modifier of this.modifiers) {\n            if (modifier.mapFromForm) {\n                modifier.mapFromForm(data, input);\n            }\n        }\n\n        runInAction(() => {\n            this.loading = true;\n        });\n        try {\n            return await this.createPage.execute(input);\n        } finally {\n            runInAction(() => {\n                this.loading = false;\n            });\n        }\n    }\n\n    private buildForm(): IFormModel {\n        // Layer 1: Base form — always present regardless of page type\n        const form = this.factory.create({\n            fields: fields => ({\n                title: fields\n                    .text()\n                    .label(\"Title\")\n                    .required(\"Title is required\")\n                    .onBlur((value, { form }) => {\n                        const currentPath = form.field(\"path\").as(\"text\").getValue() ?? \"\";\n                        if (!PagePath.create(currentPath).isEmpty()) {\n                            return;\n                        }\n                        const newPath = PagePath.fromTitle(String(value)).toString();\n                        form.field(\"path\").setValue(newPath);\n                    }),\n                path: fields\n                    .text()\n                    .label(\"Path\")\n                    .required(\"Path is required\")\n                    .beforeChange(value => {\n                        return PagePath.create(String(value)).slugify().toString();\n                    }),\n                pageType: fields\n                    .text()\n                    .hidden()\n                    .defaultValue(this.selectedPageType || \"static\"),\n                folderId: fields.text().hidden().defaultValue(this.folderId)\n            }),\n            layout: layout => [layout.row(\"title\"), layout.row(\"path\")]\n        });\n\n        // Layer 2: Apply the selected page type's modifications\n        const pageType = this.pageTypes.find(pt => pt.name === this.selectedPageType);\n        if (pageType && typeof pageType.modifyForm === \"function\") {\n            pageType.modifyForm(form);\n        }\n\n        // Layer 3: Apply cross-cutting modifiers (Language, etc.)\n        for (const modifier of this.modifiers) {\n            modifier.modifyForm(form);\n        }\n\n        return form;\n    }\n}\n\nexport const CreatePagePresenter = PresenterAbstraction.createImplementation({\n    implementation: CreatePagePresenterImpl,\n    dependencies: [\n        FormModelFactory,\n        PageTypeProvider,\n        [CreatePageFormModifier, { multiple: true }],\n        CreatePageUseCase\n    ]\n});\n"],"names":["CreatePagePresenterImpl","factory","pageTypeProvider","modifiers","createPage","makeAutoObservable","computed","folderId","staticPage","p","pageType","previousData","data","input","String","pt","modifier","runInAction","form","fields","value","currentPath","PagePath","newPath","layout","CreatePagePresenter","PresenterAbstraction","FormModelFactory","PageTypeProvider","CreatePageFormModifier","CreatePageUseCase"],"mappings":"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"}
+{"version":3,"file":"presentation/pages/CreatePage/CreatePagePresenter.js","sources":["../../../../src/presentation/pages/CreatePage/CreatePagePresenter.ts"],"sourcesContent":["import { makeAutoObservable, computed, runInAction } from \"mobx\";\nimport type { IFormModel, IFormModelFactory } from \"@webiny/app-admin\";\nimport { FormModelFactory } from \"@webiny/app-admin\";\nimport { CreatePageUseCase } from \"~/features/pages/createPage/abstractions.js\";\nimport type { CreatePageParams } from \"~/features/pages/createPage/abstractions.js\";\nimport {\n    CreatePagePresenter as PresenterAbstraction,\n    PageTypeProvider,\n    CreatePageFormModifier\n} from \"./abstractions.js\";\nimport { PagePath } from \"~/shared/PagePath.js\";\n\nclass CreatePagePresenterImpl implements PresenterAbstraction.Interface {\n    private readonly pageTypes;\n    private form: IFormModel;\n    private selectedPageType = \"\";\n    private folderId = \"\";\n    private loading = false;\n\n    constructor(\n        private factory: IFormModelFactory,\n        pageTypeProvider: PageTypeProvider.Interface,\n        private modifiers: CreatePageFormModifier.Interface[],\n        private createPage: CreatePageUseCase.Interface\n    ) {\n        this.pageTypes = pageTypeProvider.getPageTypes();\n        this.form = this.buildForm();\n\n        makeAutoObservable(this, { vm: computed }, { autoBind: true });\n    }\n\n    get vm(): PresenterAbstraction.ViewModel {\n        return {\n            form: this.form.vm,\n            pageTypes: this.pageTypes,\n            selectedPageType: this.selectedPageType,\n            loading: this.loading\n        };\n    }\n\n    init(folderId: string): void {\n        this.folderId = folderId;\n        const staticPage = this.pageTypes.find(p => p.name === \"static\");\n        this.selectedPageType = staticPage ? \"static\" : this.pageTypes[0]?.name;\n        this.form = this.buildForm();\n    }\n\n    changePageType(pageType: string): void {\n        const previousData = this.form.getData();\n        this.selectedPageType = pageType;\n        this.form = this.buildForm();\n        this.form.setData(previousData);\n    }\n\n    async submit() {\n        const data = await this.form.submit();\n        if (!data) {\n            return null;\n        }\n\n        const input: CreatePageParams = {\n            location: {\n                folderId: String(data.folderId)\n            },\n            properties: {\n                title: data.title,\n                path: data.path\n            },\n            metadata: {\n                documentType: \"page\",\n                pageType: data.pageType\n            },\n            elements: {\n                root: {\n                    type: \"Webiny/Element\",\n                    id: \"root\",\n                    component: {\n                        name: \"Webiny/Root\"\n                    }\n                }\n            }\n        };\n\n        // Let the active page type map its form data.\n        const pageType = this.pageTypes.find(pt => pt.name === this.selectedPageType);\n        if (pageType?.mapFromForm) {\n            pageType.mapFromForm(data, input);\n        }\n\n        // Let cross-cutting modifiers map their form data.\n        for (const modifier of this.modifiers) {\n            if (modifier.mapFromForm) {\n                modifier.mapFromForm(data, input);\n            }\n        }\n\n        runInAction(() => {\n            this.loading = true;\n        });\n        try {\n            return await this.createPage.execute(input);\n        } finally {\n            runInAction(() => {\n                this.loading = false;\n            });\n        }\n    }\n\n    private buildForm(): IFormModel {\n        // Layer 1: Base form — always present regardless of page type\n        const form = this.factory.create({\n            fields: fields => ({\n                title: fields\n                    .text()\n                    .label(\"Title\")\n                    .required(\"Title is required\")\n                    .autoFocus()\n                    .onBlur((value, { form }) => {\n                        const currentPath = form.field(\"path\").as(\"text\").getValue() ?? \"\";\n                        if (!PagePath.create(currentPath).isEmpty()) {\n                            return;\n                        }\n                        const newPath = PagePath.fromTitle(String(value)).toString();\n                        form.field(\"path\").setValue(newPath);\n                    }),\n                path: fields\n                    .text()\n                    .label(\"Path\")\n                    .required(\"Path is required\")\n                    .beforeChange(value => {\n                        return PagePath.create(String(value)).slugify().toString();\n                    }),\n                pageType: fields\n                    .text()\n                    .hidden()\n                    .defaultValue(this.selectedPageType || \"static\"),\n                folderId: fields.text().hidden().defaultValue(this.folderId)\n            }),\n            layout: layout => [layout.row(\"title\"), layout.row(\"path\")]\n        });\n\n        // Layer 2: Apply the selected page type's modifications\n        const pageType = this.pageTypes.find(pt => pt.name === this.selectedPageType);\n        if (pageType && typeof pageType.modifyForm === \"function\") {\n            pageType.modifyForm(form);\n        }\n\n        // Layer 3: Apply cross-cutting modifiers (Language, etc.)\n        for (const modifier of this.modifiers) {\n            modifier.modifyForm(form);\n        }\n\n        return form;\n    }\n}\n\nexport const CreatePagePresenter = PresenterAbstraction.createImplementation({\n    implementation: CreatePagePresenterImpl,\n    dependencies: [\n        FormModelFactory,\n        PageTypeProvider,\n        [CreatePageFormModifier, { multiple: true }],\n        CreatePageUseCase\n    ]\n});\n"],"names":["CreatePagePresenterImpl","factory","pageTypeProvider","modifiers","createPage","makeAutoObservable","computed","folderId","staticPage","p","pageType","previousData","data","input","String","pt","modifier","runInAction","form","fields","value","currentPath","PagePath","newPath","layout","CreatePagePresenter","PresenterAbstraction","FormModelFactory","PageTypeProvider","CreatePageFormModifier","CreatePageUseCase"],"mappings":"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"}

package/presentation/pages/CreatePage/WithLanguageSelector.js

@@ -1,11 +1,11 @@
 import react from "react";
-import { useWcp } from "@webiny/app-admin";
+import { useFeatureFlags } from "@webiny/app-admin";
 import { Grid } from "@webiny/admin-ui";
 import { Bind } from "@webiny/form";
 import { LanguageSelector } from "../../components/LanguageSelector.js";
 const WithLanguageSelector = ({ languages, children })=>{
-    const wcp = useWcp();
-    if (!wcp.canUseFeature("multiTenancy")) return /*#__PURE__*/ react.createElement(react.Fragment, null, children);
+    const featureFlags = useFeatureFlags();
+    if (!featureFlags.isEnabled("multiTenancy")) return /*#__PURE__*/ react.createElement(react.Fragment, null, children);
     if (languages.length > 1) {
         const defaultLanguage = languages.find((l)=>l.isDefault);
         return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Grid.Column, {

package/presentation/pages/CreatePage/WithLanguageSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/pages/CreatePage/WithLanguageSelector.js","sources":["../../../../src/presentation/pages/CreatePage/WithLanguageSelector.tsx"],"sourcesContent":["import React from \"react\";\nimport { type LanguageDto } from \"@webiny/languages/exports/admin/languages.js\";\nimport { useWcp } from \"@webiny/app-admin\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { Bind } from \"@webiny/form\";\nimport { LanguageSelector } from \"~/presentation/components/LanguageSelector.js\";\n\nexport interface WithLanguageSelectorProps {\n    languages: LanguageDto[];\n    children: React.ReactNode;\n}\n\n// 1) no language exists\n//    - no dropdown\n//    - don’t store language info\n// 2) one language exists\n//    - no dropdown\n//    - auto-assign the default language\n//    - DO NOT prepend the language code to the page path\n// 3) two or more languages exist\n//    - dropdown\n//    - preselect default language\n//    - append the language code to the page path\n\nexport const WithLanguageSelector = ({ languages, children }: WithLanguageSelectorProps) => {\n    const wcp = useWcp();\n\n    if (!wcp.canUseFeature(\"multiTenancy\")) {\n        return <>{children}</>;\n    }\n\n    if (languages.length > 1) {\n        const defaultLanguage = languages.find(l => l.isDefault);\n\n        return (\n            <>\n                <Grid.Column span={12}>\n                    <Bind name={\"properties.language\"} defaultValue={defaultLanguage?.code}>\n                        {({ value, onChange }) => (\n                            <LanguageSelector\n                                value={value}\n                                onChange={onChange}\n                                label={\"Language\"}\n                                languages={languages}\n                                displayResetAction={true}\n                            />\n                        )}\n                    </Bind>\n                </Grid.Column>\n                {children}\n            </>\n        );\n    }\n\n    if (languages.length === 1) {\n        return <Bind name={\"properties.language\"} defaultValue={languages[0].code} />;\n    }\n\n    /* Default output */\n    return <>{children}</>;\n};\n"],"names":["WithLanguageSelector","languages","children","wcp","useWcp","defaultLanguage","l","Grid","Bind","value","onChange","LanguageSelector"],"mappings":";;;;;AAwBO,MAAMA,uBAAuB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAA6B;IACnF,MAAMC,MAAMC;IAEZ,IAAI,CAACD,IAAI,aAAa,CAAC,iBACnB,OAAO,WAAP,GAAO,0CAAGD;IAGd,IAAID,UAAU,MAAM,GAAG,GAAG;QACtB,MAAMI,kBAAkBJ,UAAU,IAAI,CAACK,CAAAA,IAAKA,EAAE,SAAS;QAEvD,OAAO,WAAP,GACI,wDACI,oBAACC,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACC,MAAIA;YAAC,MAAM;YAAuB,cAAcH,iBAAiB;WAC7D,CAAC,EAAEI,KAAK,EAAEC,QAAQ,EAAE,iBACjB,oBAACC,kBAAgBA;gBACb,OAAOF;gBACP,UAAUC;gBACV,OAAO;gBACP,WAAWT;gBACX,oBAAoB;kBAKnCC;IAGb;IAEA,IAAID,AAAqB,MAArBA,UAAU,MAAM,EAChB,OAAO,WAAP,GAAO,oBAACO,MAAIA;QAAC,MAAM;QAAuB,cAAcP,SAAS,CAAC,EAAE,CAAC,IAAI;;IAI7E,OAAO,WAAP,GAAO,0CAAGC;AACd"}
+{"version":3,"file":"presentation/pages/CreatePage/WithLanguageSelector.js","sources":["../../../../src/presentation/pages/CreatePage/WithLanguageSelector.tsx"],"sourcesContent":["import React from \"react\";\nimport { type LanguageDto } from \"@webiny/languages/exports/admin/languages.js\";\nimport { useFeatureFlags } from \"@webiny/app-admin\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { Bind } from \"@webiny/form\";\nimport { LanguageSelector } from \"~/presentation/components/LanguageSelector.js\";\n\nexport interface WithLanguageSelectorProps {\n    languages: LanguageDto[];\n    children: React.ReactNode;\n}\n\n// 1) no language exists\n//    - no dropdown\n//    - don’t store language info\n// 2) one language exists\n//    - no dropdown\n//    - auto-assign the default language\n//    - DO NOT prepend the language code to the page path\n// 3) two or more languages exist\n//    - dropdown\n//    - preselect default language\n//    - append the language code to the page path\n\nexport const WithLanguageSelector = ({ languages, children }: WithLanguageSelectorProps) => {\n    const featureFlags = useFeatureFlags();\n\n    if (!featureFlags.isEnabled(\"multiTenancy\")) {\n        return <>{children}</>;\n    }\n\n    if (languages.length > 1) {\n        const defaultLanguage = languages.find(l => l.isDefault);\n\n        return (\n            <>\n                <Grid.Column span={12}>\n                    <Bind name={\"properties.language\"} defaultValue={defaultLanguage?.code}>\n                        {({ value, onChange }) => (\n                            <LanguageSelector\n                                value={value}\n                                onChange={onChange}\n                                label={\"Language\"}\n                                languages={languages}\n                                displayResetAction={true}\n                            />\n                        )}\n                    </Bind>\n                </Grid.Column>\n                {children}\n            </>\n        );\n    }\n\n    if (languages.length === 1) {\n        return <Bind name={\"properties.language\"} defaultValue={languages[0].code} />;\n    }\n\n    /* Default output */\n    return <>{children}</>;\n};\n"],"names":["WithLanguageSelector","languages","children","featureFlags","useFeatureFlags","defaultLanguage","l","Grid","Bind","value","onChange","LanguageSelector"],"mappings":";;;;;AAwBO,MAAMA,uBAAuB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAA6B;IACnF,MAAMC,eAAeC;IAErB,IAAI,CAACD,aAAa,SAAS,CAAC,iBACxB,OAAO,WAAP,GAAO,0CAAGD;IAGd,IAAID,UAAU,MAAM,GAAG,GAAG;QACtB,MAAMI,kBAAkBJ,UAAU,IAAI,CAACK,CAAAA,IAAKA,EAAE,SAAS;QAEvD,OAAO,WAAP,GACI,wDACI,oBAACC,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACC,MAAIA;YAAC,MAAM;YAAuB,cAAcH,iBAAiB;WAC7D,CAAC,EAAEI,KAAK,EAAEC,QAAQ,EAAE,iBACjB,oBAACC,kBAAgBA;gBACb,OAAOF;gBACP,UAAUC;gBACV,OAAO;gBACP,WAAWT;gBACX,oBAAoB;kBAKnCC;IAGb;IAEA,IAAID,AAAqB,MAArBA,UAAU,MAAM,EAChB,OAAO,WAAP,GAAO,oBAACO,MAAIA;QAAC,MAAM;QAAuB,cAAcP,SAAS,CAAC,EAAE,CAAC,IAAI;;IAI7E,OAAO,WAAP,GAAO,0CAAGC;AACd"}

package/presentation/pages/CreatePage/feature.js

@@ -1,5 +1,5 @@
 import { createFeature } from "@webiny/feature/admin";
-import { WcpService } from "@webiny/app-admin/features/wcp/abstractions.js";
+import { FeatureFlagsService } from "@webiny/app-admin/features/featureFlags/abstractions.js";
 import { CreatePagePresenter } from "./abstractions.js";
 import { CreatePagePresenter as external_CreatePagePresenter_js_CreatePagePresenter } from "./CreatePagePresenter.js";
 import { PageTypeProvider } from "./PageTypeProvider.js";
@@ -11,8 +11,8 @@ const CreatePageFeature = createFeature({
         container.register(StaticPageType);
         container.register(PageTypeProvider);
         container.register(external_CreatePagePresenter_js_CreatePagePresenter);
-        const wcp = container.resolve(WcpService);
-        if (wcp.canUseFeature("multiTenancy")) container.register(AddLanguageModifier);
+        const featureFlagsService = container.resolve(FeatureFlagsService);
+        if (featureFlagsService.getFlags().isEnabled("multiTenancy")) container.register(AddLanguageModifier);
     },
     resolve (container) {
         return {

package/presentation/pages/CreatePage/feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/pages/CreatePage/feature.js","sources":["../../../../src/presentation/pages/CreatePage/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { WcpService } from \"@webiny/app-admin/features/wcp/abstractions.js\";\nimport { CreatePagePresenter as PresenterAbstraction } from \"./abstractions.js\";\nimport { CreatePagePresenter } from \"./CreatePagePresenter.js\";\nimport { PageTypeProvider } from \"./PageTypeProvider.js\";\nimport { StaticPageType } from \"./StaticPageType.js\";\nimport { AddLanguageModifier } from \"./AddLanguageModifier.js\";\n\nexport const CreatePageFeature = createFeature({\n    name: \"CreatePage\",\n    register(container) {\n        container.register(StaticPageType);\n        container.register(PageTypeProvider);\n        container.register(CreatePagePresenter);\n\n        // Languages are behind a feature flag\n        const wcp = container.resolve(WcpService);\n        if (wcp.canUseFeature(\"multiTenancy\")) {\n            container.register(AddLanguageModifier);\n        }\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(PresenterAbstraction)\n        };\n    }\n});\n"],"names":["CreatePageFeature","createFeature","container","StaticPageType","PageTypeProvider","CreatePagePresenter","wcp","WcpService","AddLanguageModifier","PresenterAbstraction"],"mappings":";;;;;;;AAQO,MAAMA,oBAAoBC,cAAc;IAC3C,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC;QACnBD,UAAU,QAAQ,CAACE;QACnBF,UAAU,QAAQ,CAACG;QAGnB,MAAMC,MAAMJ,UAAU,OAAO,CAACK;QAC9B,IAAID,IAAI,aAAa,CAAC,iBAClBJ,UAAU,QAAQ,CAACM;IAE3B;IACA,SAAQN,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACO;QACjC;IACJ;AACJ"}
+{"version":3,"file":"presentation/pages/CreatePage/feature.js","sources":["../../../../src/presentation/pages/CreatePage/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { FeatureFlagsService } from \"@webiny/app-admin/features/featureFlags/abstractions.js\";\nimport { CreatePagePresenter as PresenterAbstraction } from \"./abstractions.js\";\nimport { CreatePagePresenter } from \"./CreatePagePresenter.js\";\nimport { PageTypeProvider } from \"./PageTypeProvider.js\";\nimport { StaticPageType } from \"./StaticPageType.js\";\nimport { AddLanguageModifier } from \"./AddLanguageModifier.js\";\n\nexport const CreatePageFeature = createFeature({\n    name: \"CreatePage\",\n    register(container) {\n        container.register(StaticPageType);\n        container.register(PageTypeProvider);\n        container.register(CreatePagePresenter);\n\n        // Languages are behind a feature flag\n        const featureFlagsService = container.resolve(FeatureFlagsService);\n        if (featureFlagsService.getFlags().isEnabled(\"multiTenancy\")) {\n            container.register(AddLanguageModifier);\n        }\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(PresenterAbstraction)\n        };\n    }\n});\n"],"names":["CreatePageFeature","createFeature","container","StaticPageType","PageTypeProvider","CreatePagePresenter","featureFlagsService","FeatureFlagsService","AddLanguageModifier","PresenterAbstraction"],"mappings":";;;;;;;AAQO,MAAMA,oBAAoBC,cAAc;IAC3C,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC;QACnBD,UAAU,QAAQ,CAACE;QACnBF,UAAU,QAAQ,CAACG;QAGnB,MAAMC,sBAAsBJ,UAAU,OAAO,CAACK;QAC9C,IAAID,oBAAoB,QAAQ,GAAG,SAAS,CAAC,iBACzCJ,UAAU,QAAQ,CAACM;IAE3B;IACA,SAAQN,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACO;QACjC;IACJ;AACJ"}

package/presentation/pages/PageEditor/PageEditor.experiments.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const PageEditor: () => React.JSX.Element;

package/presentation/pages/PageEditor/PageEditor.experiments.js

@@ -0,0 +1,54 @@
+import react, { useEffect, useState } from "react";
+import { useRoute } from "@webiny/app-admin";
+import { useFeature } from "@webiny/app";
+import { OverlayLoader } from "@webiny/admin-ui";
+import { GetSettingsFeature } from "../../../features/settings/getSettings/index.js";
+import { useGetPage } from "../../../features/pages/index.js";
+import { Routes } from "../../../routes.js";
+import { PageEditorDrawerProvider } from "./Revisions/usePageEditorDrawer.js";
+import { PageEditorSurface } from "./PageEditorSurface.js";
+import { pageToEditorDocument } from "./pageDocument.js";
+import { ExperimentsEditorPresenterFeature } from "../../experiments/ExperimentsEditor/index.js";
+import { ExperimentsDrawerView } from "../../experiments/ExperimentsManager/index.js";
+const PageEditor = ()=>{
+    const { useCase: getSettings } = useFeature(GetSettingsFeature);
+    const [loading, setLoading] = useState(true);
+    const [page, setPage] = useState(null);
+    const [isRevisionListOpen, openRevisionList] = useState(false);
+    const { route } = useRoute(Routes.Pages.Editor);
+    const { getPage } = useGetPage();
+    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);
+    useEffect(()=>{
+        setLoading(true);
+        Promise.all([
+            getSettings.execute(),
+            getPage({
+                id: route.params.id
+            }).then((page)=>{
+                setPage(pageToEditorDocument(page));
+            })
+        ]).then(()=>{
+            setLoading(false);
+        });
+    }, [
+        route.params.id
+    ]);
+    useEffect(()=>{
+        if (page) presenter.init(page.id);
+    }, [
+        presenter,
+        page?.id
+    ]);
+    if (loading || !page) return /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Loading page..."
+    });
+    return /*#__PURE__*/ react.createElement(PageEditorDrawerProvider, {
+        openRevisionList: openRevisionList,
+        isRevisionListOpen: isRevisionListOpen
+    }, /*#__PURE__*/ react.createElement(PageEditorSurface, {
+        page: page
+    }), /*#__PURE__*/ react.createElement(ExperimentsDrawerView, null));
+};
+export { PageEditor };
+
+//# sourceMappingURL=PageEditor.experiments.js.map

package/presentation/pages/PageEditor/PageEditor.experiments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/pages/PageEditor/PageEditor.experiments.js","sources":["../../../../src/presentation/pages/PageEditor/PageEditor.experiments.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useRoute } from \"@webiny/app-admin\";\nimport { useFeature } from \"@webiny/app\";\nimport { OverlayLoader } from \"@webiny/admin-ui\";\nimport { GetSettingsFeature } from \"~/features/settings/getSettings/index.js\";\nimport type { EditorPage } from \"@webiny/website-builder-sdk\";\nimport { useGetPage } from \"~/features/pages/index.js\";\nimport { Routes } from \"~/routes.js\";\nimport { PageEditorDrawerProvider } from \"./Revisions/usePageEditorDrawer.js\";\nimport { PageEditorSurface } from \"./PageEditorSurface.js\";\nimport { pageToEditorDocument } from \"./pageDocument.js\";\nimport { ExperimentsEditorPresenterFeature } from \"~/presentation/experiments/ExperimentsEditor/index.js\";\nimport { ExperimentsDrawerView } from \"~/presentation/experiments/ExperimentsManager/index.js\";\n\nexport const PageEditor = () => {\n    const { useCase: getSettings } = useFeature(GetSettingsFeature);\n    const [loading, setLoading] = useState(true);\n    const [page, setPage] = useState<EditorPage | null>(null);\n\n    const [isRevisionListOpen, openRevisionList] = useState(false);\n\n    const { route } = useRoute(Routes.Pages.Editor);\n\n    const { getPage } = useGetPage();\n\n    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);\n\n    useEffect(() => {\n        setLoading(true);\n        Promise.all([\n            getSettings.execute(),\n            getPage({ id: route.params.id }).then(page => {\n                setPage(pageToEditorDocument(page));\n            })\n        ]).then(() => {\n            setLoading(false);\n        });\n    }, [route.params.id]);\n\n    // Initialize the experiments hub presenter with the page being edited; it owns the shared\n    // selection state so the toolbar and editor surface can swap between the page and a variant.\n    useEffect(() => {\n        if (page) {\n            presenter.init(page.id);\n        }\n    }, [presenter, page?.id]);\n\n    if (loading || !page) {\n        return <OverlayLoader text={\"Loading page...\"} />;\n    }\n\n    return (\n        <PageEditorDrawerProvider\n            openRevisionList={openRevisionList}\n            isRevisionListOpen={isRevisionListOpen}\n        >\n            <PageEditorSurface page={page} />\n            <ExperimentsDrawerView />\n        </PageEditorDrawerProvider>\n    );\n};\n"],"names":["PageEditor","getSettings","useFeature","GetSettingsFeature","loading","setLoading","useState","page","setPage","isRevisionListOpen","openRevisionList","route","useRoute","Routes","getPage","useGetPage","presenter","ExperimentsEditorPresenterFeature","useEffect","Promise","pageToEditorDocument","OverlayLoader","PageEditorDrawerProvider","PageEditorSurface","ExperimentsDrawerView"],"mappings":";;;;;;;;;;;;AAcO,MAAMA,aAAa;IACtB,MAAM,EAAE,SAASC,WAAW,EAAE,GAAGC,WAAWC;IAC5C,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IACvC,MAAM,CAACC,MAAMC,QAAQ,GAAGF,SAA4B;IAEpD,MAAM,CAACG,oBAAoBC,iBAAiB,GAAGJ,SAAS;IAExD,MAAM,EAAEK,KAAK,EAAE,GAAGC,SAASC,OAAO,KAAK,CAAC,MAAM;IAE9C,MAAM,EAAEC,OAAO,EAAE,GAAGC;IAEpB,MAAM,EAAEC,SAAS,EAAE,GAAGd,WAAWe;IAEjCC,UAAU;QACNb,WAAW;QACXc,QAAQ,GAAG,CAAC;YACRlB,YAAY,OAAO;YACnBa,QAAQ;gBAAE,IAAIH,MAAM,MAAM,CAAC,EAAE;YAAC,GAAG,IAAI,CAACJ,CAAAA;gBAClCC,QAAQY,qBAAqBb;YACjC;SACH,EAAE,IAAI,CAAC;YACJF,WAAW;QACf;IACJ,GAAG;QAACM,MAAM,MAAM,CAAC,EAAE;KAAC;IAIpBO,UAAU;QACN,IAAIX,MACAS,UAAU,IAAI,CAACT,KAAK,EAAE;IAE9B,GAAG;QAACS;QAAWT,MAAM;KAAG;IAExB,IAAIH,WAAW,CAACG,MACZ,OAAO,WAAP,GAAO,oBAACc,eAAaA;QAAC,MAAM;;IAGhC,OAAO,WAAP,GACI,oBAACC,0BAAwBA;QACrB,kBAAkBZ;QAClB,oBAAoBD;qBAEpB,oBAACc,mBAAiBA;QAAC,MAAMhB;sBACzB,oBAACiB,uBAAqBA;AAGlC"}

package/presentation/pages/PageEditor/PageEditorSurface.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { EditorPage } from "@webiny/website-builder-sdk";
+interface Props {
+    page: EditorPage;
+}
+/**
+ * Renders the editor for the bucket currently selected in the experiments toolbar: the page itself
+ * (control), or a variant loaded as an equivalent document. Switching buckets re-mounts the editor
+ * with the matching document and autosave; content is (re)fetched on each switch so returning to a
+ * bucket always shows its latest saved state.
+ */
+export declare const PageEditorSurface: (({ page }: Props) => React.JSX.Element) & React.NamedExoticComponent<Props> & {
+    readonly type: ({ page }: Props) => React.JSX.Element;
+};
+export {};