@webiny/app-website-builder 6.4.11 → 6.6.0-alpha.1

package/presentation/experiments/ExperimentsManager/components/ExperimentsDrawerView.d.ts

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

package/presentation/experiments/ExperimentsManager/components/ExperimentsDrawerView.js

@@ -0,0 +1,92 @@
+import react, { useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { Drawer, IconButton } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/science.svg";
+import { ReactComponent as arrow_back_svg_ReactComponent } from "@webiny/icons/arrow_back.svg";
+import { ExperimentFormView } from "../../ExperimentForm/index.js";
+import { ExperimentsManagerPresenterFeature } from "../feature.js";
+import { ExperimentsListView } from "./ExperimentsListView.js";
+const ExperimentsDrawerView_ExperimentsDrawerViewInner = observer(function() {
+    const { presenter } = useFeature(ExperimentsManagerPresenterFeature);
+    useEffect(()=>{
+        presenter.init();
+        return ()=>presenter.dispose();
+    }, [
+        presenter
+    ]);
+    const { open, view, editInitial } = presenter.vm;
+    const flask = /*#__PURE__*/ react.createElement(ReactComponent, {
+        style: {
+            width: 20,
+            height: 20
+        }
+    });
+    const back = /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(arrow_back_svg_ReactComponent, {
+            style: {
+                width: 18,
+                height: 18
+            }
+        }),
+        onClick: ()=>presenter.showList()
+    });
+    let title;
+    title = "create" === view ? /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+        }
+    }, back, flask, "New experiment") : "edit" === view ? /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+        }
+    }, back, flask, "Edit experiment") : /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+        }
+    }, flask, "Experiments");
+    return /*#__PURE__*/ react.createElement(Drawer, {
+        open: open,
+        onClose: ()=>presenter.close(),
+        modal: true,
+        width: 520,
+        title: title,
+        headerSeparator: true,
+        bodyPadding: false,
+        className: "flex flex-col"
+    }, "list" === view ? /*#__PURE__*/ react.createElement(ExperimentsListView, {
+        presenter: presenter
+    }) : null, "create" === view ? /*#__PURE__*/ react.createElement(ExperimentFormView, {
+        onCancel: ()=>presenter.showList(),
+        onSubmit: (payload)=>presenter.createExperiment(payload),
+        submitLabel: "Create experiment"
+    }) : null, "edit" === view && editInitial ? /*#__PURE__*/ react.createElement(ExperimentFormView, {
+        initial: editInitial,
+        allowStructureChange: false,
+        submitLabel: "Save changes",
+        onCancel: ()=>presenter.showList(),
+        onSubmit: (payload)=>presenter.updateExperiment(payload)
+    }) : null);
+});
+const ExperimentsDrawerView = ()=>{
+    const container = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = container.createChildContainer();
+        ExperimentsManagerPresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(ExperimentsDrawerView_ExperimentsDrawerViewInner, null));
+};
+export { ExperimentsDrawerView };
+
+//# sourceMappingURL=ExperimentsDrawerView.js.map

package/presentation/experiments/ExperimentsManager/components/ExperimentsDrawerView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsManager/components/ExperimentsDrawerView.js","sources":["../../../../../src/presentation/experiments/ExperimentsManager/components/ExperimentsDrawerView.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { Drawer, IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as ScienceIcon } from \"@webiny/icons/science.svg\";\nimport { ReactComponent as BackIcon } from \"@webiny/icons/arrow_back.svg\";\nimport { ExperimentFormView } from \"../../ExperimentForm/index.js\";\nimport { ExperimentsManagerPresenterFeature } from \"../feature.js\";\nimport { ExperimentsListView } from \"./ExperimentsListView.js\";\n\nconst ExperimentsDrawerViewInner = observer(function ExperimentsDrawerViewInner() {\n    const { presenter } = useFeature(ExperimentsManagerPresenterFeature);\n\n    useEffect(() => {\n        presenter.init();\n        return () => presenter.dispose();\n    }, [presenter]);\n\n    const { open, view, editInitial } = presenter.vm;\n\n    const flask = <ScienceIcon style={{ width: 20, height: 20 }} />;\n    const back = (\n        <IconButton\n            variant=\"ghost\"\n            size=\"sm\"\n            icon={<BackIcon style={{ width: 18, height: 18 }} />}\n            onClick={() => presenter.showList()}\n        />\n    );\n\n    let title: React.ReactNode;\n    if (view === \"create\") {\n        title = (\n            <span style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                {back}\n                {flask}\n                New experiment\n            </span>\n        );\n    } else if (view === \"edit\") {\n        title = (\n            <span style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                {back}\n                {flask}\n                Edit experiment\n            </span>\n        );\n    } else {\n        title = (\n            <span style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                {flask}\n                Experiments\n            </span>\n        );\n    }\n\n    return (\n        <Drawer\n            open={open}\n            onClose={() => presenter.close()}\n            modal={true}\n            width={520}\n            title={title}\n            headerSeparator={true}\n            bodyPadding={false}\n            className={\"flex flex-col\"}\n        >\n            {view === \"list\" ? <ExperimentsListView presenter={presenter} /> : null}\n            {view === \"create\" ? (\n                <ExperimentFormView\n                    onCancel={() => presenter.showList()}\n                    onSubmit={payload => presenter.createExperiment(payload)}\n                    submitLabel=\"Create experiment\"\n                />\n            ) : null}\n            {view === \"edit\" && editInitial ? (\n                <ExperimentFormView\n                    initial={editInitial}\n                    allowStructureChange={false}\n                    submitLabel=\"Save changes\"\n                    onCancel={() => presenter.showList()}\n                    onSubmit={payload => presenter.updateExperiment(payload)}\n                />\n            ) : null}\n        </Drawer>\n    );\n});\n\nexport const ExperimentsDrawerView = () => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n        ExperimentsManagerPresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <ExperimentsDrawerViewInner />\n        </DiContainerProvider>\n    );\n};\n"],"names":["ExperimentsDrawerViewInner","observer","presenter","useFeature","ExperimentsManagerPresenterFeature","useEffect","open","view","editInitial","flask","ScienceIcon","back","IconButton","BackIcon","title","Drawer","ExperimentsListView","ExperimentFormView","payload","ExperimentsDrawerView","container","useContainer","scopedContainer","useMemo","child","DiContainerProvider"],"mappings":";;;;;;;;;AAUA,MAAMA,mDAA6BC,SAAS;IACxC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IAEjCC,UAAU;QACNH,UAAU,IAAI;QACd,OAAO,IAAMA,UAAU,OAAO;IAClC,GAAG;QAACA;KAAU;IAEd,MAAM,EAAEI,IAAI,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGN,UAAU,EAAE;IAEhD,MAAMO,QAAQ,WAARA,GAAQ,oBAACC,gBAAWA;QAAC,OAAO;YAAE,OAAO;YAAI,QAAQ;QAAG;;IAC1D,MAAMC,OAAO,WAAPA,GACF,oBAACC,YAAUA;QACP,SAAQ;QACR,MAAK;QACL,oBAAM,oBAACC,+BAAQA;YAAC,OAAO;gBAAE,OAAO;gBAAI,QAAQ;YAAG;;QAC/C,SAAS,IAAMX,UAAU,QAAQ;;IAIzC,IAAIY;IAEAA,QADAP,AAAS,aAATA,OACQ,WAARO,GACI,oBAAC;QAAK,OAAO;YAAE,SAAS;YAAQ,YAAY;YAAU,KAAK;QAAE;OACxDH,MACAF,OAAM,oBAIRF,AAAS,WAATA,OACC,WAARO,GACI,oBAAC;QAAK,OAAO;YAAE,SAAS;YAAQ,YAAY;YAAU,KAAK;QAAE;OACxDH,MACAF,OAAM,qBAKP,WAARK,GACI,oBAAC;QAAK,OAAO;YAAE,SAAS;YAAQ,YAAY;YAAU,KAAK;QAAE;OACxDL,OAAM;IAMnB,OAAO,WAAP,GACI,oBAACM,QAAMA;QACH,MAAMT;QACN,SAAS,IAAMJ,UAAU,KAAK;QAC9B,OAAO;QACP,OAAO;QACP,OAAOY;QACP,iBAAiB;QACjB,aAAa;QACb,WAAW;OAEVP,AAAS,WAATA,OAAkB,WAAT,GAAS,oBAACS,qBAAmBA;QAAC,WAAWd;SAAgB,MAClEK,AAAS,aAATA,OAAoB,WAAX,GACN,oBAACU,oBAAkBA;QACf,UAAU,IAAMf,UAAU,QAAQ;QAClC,UAAUgB,CAAAA,UAAWhB,UAAU,gBAAgB,CAACgB;QAChD,aAAY;SAEhB,MACHX,AAAS,WAATA,QAAmBC,cAAc,WAAdA,GAChB,oBAACS,oBAAkBA;QACf,SAAST;QACT,sBAAsB;QACtB,aAAY;QACZ,UAAU,IAAMN,UAAU,QAAQ;QAClC,UAAUgB,CAAAA,UAAWhB,UAAU,gBAAgB,CAACgB;SAEpD;AAGhB;AAEO,MAAMC,wBAAwB;IACjC,MAAMC,YAAYC;IAElB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,UAAU,oBAAoB;QAC5ChB,mCAAmC,QAAQ,CAACoB;QAC5C,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACC,qBAAmBA;QAAC,WAAWH;qBAC5B,oBAACtB,kDAA0BA;AAGvC"}

package/presentation/experiments/ExperimentsManager/components/ExperimentsEmptyState.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface Props {
+    onCreateExperiment: () => void;
+}
+export declare const ExperimentsEmptyState: ({ onCreateExperiment }: Props) => React.JSX.Element;
+export {};

package/presentation/experiments/ExperimentsManager/components/ExperimentsEmptyState.js

@@ -0,0 +1,103 @@
+import react from "react";
+import { Button, Heading, Link, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+const Illustration = ()=>{
+    const card = {
+        width: 96,
+        height: 64,
+        borderRadius: 8,
+        border: "1px solid var(--wby-color-neutral-muted, #e0e0e0)",
+        overflow: "hidden",
+        background: "#fff"
+    };
+    const bar = {
+        height: 16,
+        background: "#1a1a1a"
+    };
+    const line = {
+        height: 4,
+        width: 48,
+        margin: 8,
+        borderRadius: 4,
+        background: "#d5d5d5"
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 24,
+            marginBottom: 24
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: card
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: bar
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: line
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: card
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: bar
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: line
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            height: 12,
+            background: "#ffb59b",
+            margin: "4px 8px",
+            borderRadius: 4
+        }
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            position: "absolute",
+            left: "50%",
+            transform: "translateX(-50%)",
+            width: 38,
+            height: 38,
+            borderRadius: "50%",
+            background: "#ffe9e1",
+            color: "#e2572a",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 12,
+            fontWeight: 600
+        }
+    }, "A/B"));
+};
+const ExperimentsEmptyState = ({ onCreateExperiment })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            textAlign: "center",
+            padding: 32,
+            maxWidth: 420,
+            margin: "48px auto 0"
+        }
+    }, /*#__PURE__*/ react.createElement(Illustration, null), /*#__PURE__*/ react.createElement(Heading, {
+        level: 5
+    }, "No experiments on this page"), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            margin: "12px 0 24px"
+        }
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Create an A/B experiment to test variants of this page against each other. Split traffic across full-page variants and run one experiment live at a time.")), /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: "Create experiment",
+        onClick: onCreateExperiment
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginTop: 16
+        }
+    }, /*#__PURE__*/ react.createElement(Link, {
+        to: "https://www.webiny.com/docs",
+        target: "_blank"
+    }, "Learn about A/B testing")));
+export { ExperimentsEmptyState };
+
+//# sourceMappingURL=ExperimentsEmptyState.js.map

package/presentation/experiments/ExperimentsManager/components/ExperimentsEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsManager/components/ExperimentsEmptyState.js","sources":["../../../../../src/presentation/experiments/ExperimentsManager/components/ExperimentsEmptyState.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, Heading, Text, Link } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface Props {\n    onCreateExperiment: () => void;\n}\n\n/** A/B illustration for the empty state — two page thumbnails with an A/B badge between them. */\nconst Illustration = () => {\n    const card: React.CSSProperties = {\n        width: 96,\n        height: 64,\n        borderRadius: 8,\n        border: \"1px solid var(--wby-color-neutral-muted, #e0e0e0)\",\n        overflow: \"hidden\",\n        background: \"#fff\"\n    };\n    const bar: React.CSSProperties = { height: 16, background: \"#1a1a1a\" };\n    const line: React.CSSProperties = {\n        height: 4,\n        width: 48,\n        margin: 8,\n        borderRadius: 4,\n        background: \"#d5d5d5\"\n    };\n\n    return (\n        <div\n            style={{\n                position: \"relative\",\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                gap: 24,\n                marginBottom: 24\n            }}\n        >\n            <div style={card}>\n                <div style={bar} />\n                <div style={line} />\n            </div>\n            <div style={card}>\n                <div style={bar} />\n                <div style={line} />\n                <div\n                    style={{\n                        height: 12,\n                        background: \"#ffb59b\",\n                        margin: \"4px 8px\",\n                        borderRadius: 4\n                    }}\n                />\n            </div>\n            <div\n                style={{\n                    position: \"absolute\",\n                    left: \"50%\",\n                    transform: \"translateX(-50%)\",\n                    width: 38,\n                    height: 38,\n                    borderRadius: \"50%\",\n                    background: \"#ffe9e1\",\n                    color: \"#e2572a\",\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    fontSize: 12,\n                    fontWeight: 600\n                }}\n            >\n                A/B\n            </div>\n        </div>\n    );\n};\n\nexport const ExperimentsEmptyState = ({ onCreateExperiment }: Props) => {\n    return (\n        <div\n            style={{\n                display: \"flex\",\n                flexDirection: \"column\",\n                alignItems: \"center\",\n                textAlign: \"center\",\n                padding: 32,\n                maxWidth: 420,\n                margin: \"48px auto 0\"\n            }}\n        >\n            <Illustration />\n            <Heading level={5}>No experiments on this page</Heading>\n            <div style={{ margin: \"12px 0 24px\" }}>\n                <Text size=\"sm\">\n                    Create an A/B experiment to test variants of this page against each other. Split\n                    traffic across full-page variants and run one experiment live at a time.\n                </Text>\n            </div>\n            <Button\n                variant=\"primary\"\n                icon={<AddIcon />}\n                text=\"Create experiment\"\n                onClick={onCreateExperiment}\n            />\n            <div style={{ marginTop: 16 }}>\n                <Link to=\"https://www.webiny.com/docs\" target=\"_blank\">\n                    Learn about A/B testing\n                </Link>\n            </div>\n        </div>\n    );\n};\n"],"names":["Illustration","card","bar","line","ExperimentsEmptyState","onCreateExperiment","Heading","Text","Button","AddIcon","Link"],"mappings":";;;AASA,MAAMA,eAAe;IACjB,MAAMC,OAA4B;QAC9B,OAAO;QACP,QAAQ;QACR,cAAc;QACd,QAAQ;QACR,UAAU;QACV,YAAY;IAChB;IACA,MAAMC,MAA2B;QAAE,QAAQ;QAAI,YAAY;IAAU;IACrE,MAAMC,OAA4B;QAC9B,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,cAAc;QACd,YAAY;IAChB;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,UAAU;YACV,SAAS;YACT,YAAY;YACZ,gBAAgB;YAChB,KAAK;YACL,cAAc;QAClB;qBAEA,oBAAC;QAAI,OAAOF;qBACR,oBAAC;QAAI,OAAOC;sBACZ,oBAAC;QAAI,OAAOC;uBAEhB,oBAAC;QAAI,OAAOF;qBACR,oBAAC;QAAI,OAAOC;sBACZ,oBAAC;QAAI,OAAOC;sBACZ,oBAAC;QACG,OAAO;YACH,QAAQ;YACR,YAAY;YACZ,QAAQ;YACR,cAAc;QAClB;uBAGR,oBAAC;QACG,OAAO;YACH,UAAU;YACV,MAAM;YACN,WAAW;YACX,OAAO;YACP,QAAQ;YACR,cAAc;YACd,YAAY;YACZ,OAAO;YACP,SAAS;YACT,YAAY;YACZ,gBAAgB;YAChB,UAAU;YACV,YAAY;QAChB;OACH;AAKb;AAEO,MAAMC,wBAAwB,CAAC,EAAEC,kBAAkB,EAAS,GACxD,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,eAAe;YACf,YAAY;YACZ,WAAW;YACX,SAAS;YACT,UAAU;YACV,QAAQ;QACZ;qBAEA,oBAACL,cAAYA,OAAAA,WAAAA,GACb,oBAACM,SAAOA;QAAC,OAAO;OAAG,8CACnB,oBAAC;QAAI,OAAO;YAAE,QAAQ;QAAc;qBAChC,oBAACC,MAAIA;QAAC,MAAK;OAAK,6KAKpB,oBAACC,QAAMA;QACH,SAAQ;QACR,oBAAM,oBAACC,gBAAOA;QACd,MAAK;QACL,SAASJ;sBAEb,oBAAC;QAAI,OAAO;YAAE,WAAW;QAAG;qBACxB,oBAACK,MAAIA;QAAC,IAAG;QAA8B,QAAO;OAAS"}

package/presentation/experiments/ExperimentsManager/components/ExperimentsListView.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { IExperimentsManagerPresenter } from "../abstractions/ExperimentsManagerPresenter.js";
+interface Props {
+    presenter: IExperimentsManagerPresenter;
+}
+export declare const ExperimentsListView: (({ presenter }: Props) => React.JSX.Element) & React.NamedExoticComponent<Props> & {
+    readonly type: ({ presenter }: Props) => React.JSX.Element;
+};
+export {};

package/presentation/experiments/ExperimentsManager/components/ExperimentsListView.js

@@ -0,0 +1,58 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ExperimentsEmptyState } from "./ExperimentsEmptyState.js";
+import { ExperimentCard } from "./ExperimentCard.js";
+const ExperimentsListView_ExperimentsListView = observer(function({ presenter }) {
+    const { cards } = presenter.vm;
+    if (0 === cards.length) return /*#__PURE__*/ react.createElement(ExperimentsEmptyState, {
+        onCreateExperiment: ()=>presenter.showCreate()
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            padding: 24
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+            gap: 16,
+            marginBottom: 20
+        }
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Only one experiment can be active at a time. Activating one deactivates the currently active experiment."), /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        onClick: ()=>presenter.showCreate(),
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            border: "none",
+            background: "#e2572a",
+            color: "#fff",
+            borderRadius: 8,
+            padding: "7px 14px",
+            fontWeight: 600,
+            fontSize: 13,
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+            flexShrink: 0
+        }
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            fill: "currentColor"
+        }
+    }), "New")), cards.map((card)=>/*#__PURE__*/ react.createElement(ExperimentCard, {
+            key: card.experiment.id,
+            presenter: presenter,
+            card: card
+        })));
+});
+export { ExperimentsListView_ExperimentsListView as ExperimentsListView };
+
+//# sourceMappingURL=ExperimentsListView.js.map

package/presentation/experiments/ExperimentsManager/components/ExperimentsListView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsManager/components/ExperimentsListView.js","sources":["../../../../../src/presentation/experiments/ExperimentsManager/components/ExperimentsListView.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ExperimentsEmptyState } from \"./ExperimentsEmptyState.js\";\nimport { ExperimentCard } from \"./ExperimentCard.js\";\nimport type { IExperimentsManagerPresenter } from \"../abstractions/ExperimentsManagerPresenter.js\";\n\ninterface Props {\n    presenter: IExperimentsManagerPresenter;\n}\n\nexport const ExperimentsListView = observer(function ExperimentsListView({ presenter }: Props) {\n    const { cards } = presenter.vm;\n\n    if (cards.length === 0) {\n        return <ExperimentsEmptyState onCreateExperiment={() => presenter.showCreate()} />;\n    }\n\n    return (\n        <div style={{ padding: 24 }}>\n            <div\n                style={{\n                    display: \"flex\",\n                    alignItems: \"flex-start\",\n                    justifyContent: \"space-between\",\n                    gap: 16,\n                    marginBottom: 20\n                }}\n            >\n                <Text size=\"sm\">\n                    Only one experiment can be active at a time. Activating one deactivates the\n                    currently active experiment.\n                </Text>\n                <button\n                    type=\"button\"\n                    onClick={() => presenter.showCreate()}\n                    style={{\n                        display: \"inline-flex\",\n                        alignItems: \"center\",\n                        gap: 6,\n                        border: \"none\",\n                        background: \"#e2572a\",\n                        color: \"#fff\",\n                        borderRadius: 8,\n                        padding: \"7px 14px\",\n                        fontWeight: 600,\n                        fontSize: 13,\n                        cursor: \"pointer\",\n                        whiteSpace: \"nowrap\",\n                        flexShrink: 0\n                    }}\n                >\n                    <AddIcon style={{ width: 18, height: 18, fill: \"currentColor\" }} />\n                    New\n                </button>\n            </div>\n\n            {cards.map(card => (\n                <ExperimentCard key={card.experiment.id} presenter={presenter} card={card} />\n            ))}\n        </div>\n    );\n});\n"],"names":["ExperimentsListView","observer","presenter","cards","ExperimentsEmptyState","Text","AddIcon","card","ExperimentCard"],"mappings":";;;;;;AAYO,MAAMA,0CAAsBC,SAAS,SAA6B,EAAEC,SAAS,EAAS;IACzF,MAAM,EAAEC,KAAK,EAAE,GAAGD,UAAU,EAAE;IAE9B,IAAIC,AAAiB,MAAjBA,MAAM,MAAM,EACZ,OAAO,WAAP,GAAO,oBAACC,uBAAqBA;QAAC,oBAAoB,IAAMF,UAAU,UAAU;;IAGhF,OAAO,WAAP,GACI,oBAAC;QAAI,OAAO;YAAE,SAAS;QAAG;qBACtB,oBAAC;QACG,OAAO;YACH,SAAS;YACT,YAAY;YACZ,gBAAgB;YAChB,KAAK;YACL,cAAc;QAClB;qBAEA,oBAACG,MAAIA;QAAC,MAAK;OAAK,2HAIhB,oBAAC;QACG,MAAK;QACL,SAAS,IAAMH,UAAU,UAAU;QACnC,OAAO;YACH,SAAS;YACT,YAAY;YACZ,KAAK;YACL,QAAQ;YACR,YAAY;YACZ,OAAO;YACP,cAAc;YACd,SAAS;YACT,YAAY;YACZ,UAAU;YACV,QAAQ;YACR,YAAY;YACZ,YAAY;QAChB;qBAEA,oBAACI,gBAAOA;QAAC,OAAO;YAAE,OAAO;YAAI,QAAQ;YAAI,MAAM;QAAe;QAAK,SAK1EH,MAAM,GAAG,CAACI,CAAAA,OAAAA,WAAAA,GACP,oBAACC,gBAAcA;YAAC,KAAKD,KAAK,UAAU,CAAC,EAAE;YAAE,WAAWL;YAAW,MAAMK;;AAIrF"}

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

@@ -0,0 +1,3 @@
+export declare const ExperimentsManagerPresenterFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    presenter: import("./index.js").IExperimentsManagerPresenter;
+}, []>;

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"}