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

package/presentation/experiments/ExperimentsEditor/components/ExperimentPreviewToolbar.js

@@ -0,0 +1,178 @@
+import react, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useFeature } from "@webiny/app";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/science.svg";
+import { ReactComponent as swap_horiz_svg_ReactComponent } from "@webiny/icons/swap_horiz.svg";
+import { ReactComponent as check_svg_ReactComponent } from "@webiny/icons/check.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ExperimentsEditorPresenterFeature } from "../feature.js";
+import { useSelectFromEditor } from "../../../../BaseEditor/hooks/useSelectFromEditor.js";
+const Dot = ({ color })=>/*#__PURE__*/ react.createElement("span", {
+        style: {
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: color,
+            flexShrink: 0
+        }
+    });
+const ExperimentPreviewToolbar_ExperimentPreviewToolbar = observer(function() {
+    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);
+    const { selectedExperiment, variantOptions: options, currentBucket: current } = presenter.vm;
+    const isReadOnly = useSelectFromEditor((state)=>state.isReadOnly);
+    const [open, setOpen] = useState(false);
+    if (!selectedExperiment || !current) return null;
+    const active = "running" === selectedExperiment.status;
+    const trigger = /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8,
+            border: "1px solid #d5d7db",
+            background: "#fff",
+            borderRadius: 8,
+            padding: "6px 12px",
+            fontWeight: 600,
+            fontSize: 13,
+            cursor: "pointer"
+        }
+    }, /*#__PURE__*/ react.createElement(swap_horiz_svg_ReactComponent, {
+        style: {
+            width: 18,
+            height: 18
+        }
+    }), "Switch variant");
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full bg-neutral-base border-solid border-b-sm border-neutral-dimmed",
+        "data-affects-preview": "height",
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 12,
+            padding: "8px 16px",
+            minHeight: 48
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            minWidth: 0
+        }
+    }, isReadOnly ? null : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            color: "#e2572a",
+            flexShrink: 0
+        }
+    }), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontWeight: 600,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+        }
+    }, selectedExperiment.name), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 5,
+            fontSize: 12,
+            fontWeight: 500,
+            color: active ? "#0f9d58" : "#6b7280",
+            whiteSpace: "nowrap"
+        }
+    }, /*#__PURE__*/ react.createElement(Dot, {
+        color: active ? "#10b981" : "#9ca3af"
+    }), active ? "Active" : "Inactive"), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            width: 1,
+            height: 20,
+            background: "#e5e7eb",
+            flexShrink: 0
+        }
+    })), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 13,
+            color: "#6b7280",
+            whiteSpace: "nowrap"
+        }
+    }, isReadOnly ? "Previewing" : "You're editing"), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8,
+            background: "#3c4043",
+            color: "#fff",
+            borderRadius: 8,
+            padding: "4px 10px",
+            fontSize: 13,
+            fontWeight: 600,
+            whiteSpace: "nowrap"
+        }
+    }, /*#__PURE__*/ react.createElement(Dot, {
+        color: current.color
+    }), current.name, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            opacity: 0.7,
+            fontWeight: 500
+        }
+    }, current.weight, "%"))), /*#__PURE__*/ react.createElement(DropdownMenu, {
+        open: open,
+        onOpenChange: setOpen,
+        trigger: trigger,
+        style: {
+            minWidth: 260
+        }
+    }, /*#__PURE__*/ react.createElement(DropdownMenu.Label, {
+        text: "Switch variant"
+    }), options.map((option)=>/*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            key: option.id ?? "control",
+            icon: /*#__PURE__*/ react.createElement(Dot, {
+                color: option.color
+            }),
+            text: /*#__PURE__*/ react.createElement("span", {
+                style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    gap: 8
+                }
+            }, /*#__PURE__*/ react.createElement("span", null, option.name), /*#__PURE__*/ react.createElement("span", {
+                style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8
+                }
+            }, /*#__PURE__*/ react.createElement("span", {
+                style: {
+                    fontSize: 12,
+                    color: "#6b7280"
+                }
+            }, option.weight, "%"), option.id === current.id ? /*#__PURE__*/ react.createElement(check_svg_ReactComponent, {
+                style: {
+                    width: 16,
+                    height: 16,
+                    color: option.color
+                }
+            }) : null)),
+            onClick: ()=>presenter.selectVariant(option.id)
+        })), isReadOnly ? null : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DropdownMenu.Separator, null), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, {
+            style: {
+                width: 18,
+                height: 18
+            }
+        }),
+        text: "Edit experiment",
+        onClick: ()=>presenter.editExperiment(selectedExperiment)
+    }))));
+});
+export { ExperimentPreviewToolbar_ExperimentPreviewToolbar as ExperimentPreviewToolbar };
+
+//# sourceMappingURL=ExperimentPreviewToolbar.js.map

package/presentation/experiments/ExperimentsEditor/components/ExperimentPreviewToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/components/ExperimentPreviewToolbar.js","sources":["../../../../../src/presentation/experiments/ExperimentsEditor/components/ExperimentPreviewToolbar.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature } from \"@webiny/app\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as ScienceIcon } from \"@webiny/icons/science.svg\";\nimport { ReactComponent as SwapIcon } from \"@webiny/icons/swap_horiz.svg\";\nimport { ReactComponent as CheckIcon } from \"@webiny/icons/check.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ExperimentsEditorPresenterFeature } from \"../feature.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\n\nconst Dot = ({ color }: { color: string }) => (\n    <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: color, flexShrink: 0 }} />\n);\n\n/**\n * A bar shown between the address bar and the canvas while an experiment is selected. It names the\n * experiment, shows its status and the bucket currently being edited, and lets the editor switch\n * between the control and each variant or jump to editing the experiment.\n */\nexport const ExperimentPreviewToolbar = observer(function ExperimentPreviewToolbar() {\n    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);\n    const { selectedExperiment, variantOptions: options, currentBucket: current } = presenter.vm;\n    const isReadOnly = useSelectFromEditor(state => state.isReadOnly);\n    const [open, setOpen] = useState(false);\n\n    if (!selectedExperiment || !current) {\n        return null;\n    }\n\n    const active = selectedExperiment.status === \"running\";\n\n    const trigger = (\n        <button\n            type=\"button\"\n            style={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                gap: 8,\n                border: \"1px solid #d5d7db\",\n                background: \"#fff\",\n                borderRadius: 8,\n                padding: \"6px 12px\",\n                fontWeight: 600,\n                fontSize: 13,\n                cursor: \"pointer\"\n            }}\n        >\n            <SwapIcon style={{ width: 18, height: 18 }} />\n            Switch variant\n        </button>\n    );\n\n    return (\n        <div\n            className=\"w-full bg-neutral-base border-solid border-b-sm border-neutral-dimmed\"\n            data-affects-preview={\"height\"}\n            style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n                gap: 12,\n                padding: \"8px 16px\",\n                minHeight: 48\n            }}\n        >\n            <div style={{ display: \"flex\", alignItems: \"center\", gap: 12, minWidth: 0 }}>\n                {/* On a published (read-only) page the experiment name/status live in the top-bar\n                    indicator, so the toolbar just shows what's being previewed. */}\n                {!isReadOnly ? (\n                    <>\n                        <ScienceIcon\n                            style={{ width: 18, height: 18, color: \"#e2572a\", flexShrink: 0 }}\n                        />\n                        <span\n                            style={{\n                                fontWeight: 600,\n                                whiteSpace: \"nowrap\",\n                                overflow: \"hidden\",\n                                textOverflow: \"ellipsis\"\n                            }}\n                        >\n                            {selectedExperiment.name}\n                        </span>\n                        <span\n                            style={{\n                                display: \"inline-flex\",\n                                alignItems: \"center\",\n                                gap: 5,\n                                fontSize: 12,\n                                fontWeight: 500,\n                                color: active ? \"#0f9d58\" : \"#6b7280\",\n                                whiteSpace: \"nowrap\"\n                            }}\n                        >\n                            <Dot color={active ? \"#10b981\" : \"#9ca3af\"} />\n                            {active ? \"Active\" : \"Inactive\"}\n                        </span>\n                        <span\n                            style={{ width: 1, height: 20, background: \"#e5e7eb\", flexShrink: 0 }}\n                        />\n                    </>\n                ) : null}\n\n                <span style={{ fontSize: 13, color: \"#6b7280\", whiteSpace: \"nowrap\" }}>\n                    {isReadOnly ? \"Previewing\" : \"You're editing\"}\n                </span>\n                <span\n                    style={{\n                        display: \"inline-flex\",\n                        alignItems: \"center\",\n                        gap: 8,\n                        background: \"#3c4043\",\n                        color: \"#fff\",\n                        borderRadius: 8,\n                        padding: \"4px 10px\",\n                        fontSize: 13,\n                        fontWeight: 600,\n                        whiteSpace: \"nowrap\"\n                    }}\n                >\n                    <Dot color={current.color} />\n                    {current.name}\n                    <span style={{ opacity: 0.7, fontWeight: 500 }}>{current.weight}%</span>\n                </span>\n            </div>\n\n            <DropdownMenu\n                open={open}\n                onOpenChange={setOpen}\n                trigger={trigger}\n                style={{ minWidth: 260 }}\n            >\n                <DropdownMenu.Label text=\"Switch variant\" />\n                {options.map(option => (\n                    <DropdownMenu.Item\n                        key={option.id ?? \"control\"}\n                        icon={<Dot color={option.color} />}\n                        text={\n                            <span\n                                style={{\n                                    display: \"flex\",\n                                    alignItems: \"center\",\n                                    justifyContent: \"space-between\",\n                                    width: \"100%\",\n                                    gap: 8\n                                }}\n                            >\n                                <span>{option.name}</span>\n                                <span style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                                    <span style={{ fontSize: 12, color: \"#6b7280\" }}>\n                                        {option.weight}%\n                                    </span>\n                                    {option.id === current.id ? (\n                                        <CheckIcon\n                                            style={{ width: 16, height: 16, color: option.color }}\n                                        />\n                                    ) : null}\n                                </span>\n                            </span>\n                        }\n                        onClick={() => presenter.selectVariant(option.id)}\n                    />\n                ))}\n                {!isReadOnly ? (\n                    <>\n                        <DropdownMenu.Separator />\n                        <DropdownMenu.Item\n                            icon={<EditIcon style={{ width: 18, height: 18 }} />}\n                            text=\"Edit experiment\"\n                            onClick={() => presenter.editExperiment(selectedExperiment)}\n                        />\n                    </>\n                ) : null}\n            </DropdownMenu>\n        </div>\n    );\n});\n"],"names":["Dot","color","ExperimentPreviewToolbar","observer","presenter","useFeature","ExperimentsEditorPresenterFeature","selectedExperiment","options","current","isReadOnly","useSelectFromEditor","state","open","setOpen","useState","active","trigger","SwapIcon","ScienceIcon","DropdownMenu","option","CheckIcon","EditIcon"],"mappings":"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"}

package/presentation/experiments/ExperimentsEditor/components/ExperimentsButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+/**
+ * Top-bar entry point for A/B experiments.
+ *
+ * On an editable (draft) page it's a switcher for picking an experiment to edit; on a published
+ * (read-only) page it's an indicator for the running experiment with a pause/resume kill-switch.
+ * State is shared through the editor-wide presenter so the in-preview toolbar tracks the selection.
+ */
+export declare const ExperimentsButton: (() => React.JSX.Element | null) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element | null;
+};

package/presentation/experiments/ExperimentsEditor/components/ExperimentsButton.js

@@ -0,0 +1,51 @@
+import react, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { useFeature } from "@webiny/app";
+import { Button } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/science.svg";
+import { useSelectFromEditor } from "../../../../BaseEditor/hooks/useSelectFromEditor.js";
+import { ExperimentsSwitcher } from "./ExperimentsSwitcher.js";
+import { ExperimentIndicator } from "./ExperimentIndicator.js";
+import { ExperimentsEditorPresenterFeature } from "../feature.js";
+const ExperimentsButton_ExperimentsButton = observer(function() {
+    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);
+    const isReadOnly = useSelectFromEditor((state)=>state.isReadOnly);
+    const { runningExperiment, switcherItems, selectedExperimentId } = presenter.vm;
+    useEffect(()=>{
+        presenter.syncReadOnlySelection(isReadOnly);
+    }, [
+        presenter,
+        isReadOnly,
+        runningExperiment,
+        selectedExperimentId
+    ]);
+    if (isReadOnly) {
+        if (!runningExperiment) return null;
+        return /*#__PURE__*/ react.createElement("div", {
+            style: {
+                display: "flex"
+            }
+        }, /*#__PURE__*/ react.createElement(ExperimentIndicator, {
+            experiment: runningExperiment
+        }));
+    }
+    const items = switcherItems;
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex"
+        }
+    }, 0 === items.length ? /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: "Experiments",
+        onClick: ()=>presenter.openManage()
+    }) : /*#__PURE__*/ react.createElement(ExperimentsSwitcher, {
+        experiments: items,
+        selectedId: selectedExperimentId,
+        onSelect: (id)=>presenter.selectExperiment(id),
+        onManage: ()=>presenter.openManage()
+    }));
+});
+export { ExperimentsButton_ExperimentsButton as ExperimentsButton };
+
+//# sourceMappingURL=ExperimentsButton.js.map

package/presentation/experiments/ExperimentsEditor/components/ExperimentsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/components/ExperimentsButton.js","sources":["../../../../../src/presentation/experiments/ExperimentsEditor/components/ExperimentsButton.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature } from \"@webiny/app\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { ReactComponent as ScienceIcon } from \"@webiny/icons/science.svg\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { ExperimentsSwitcher, type ExperimentItem } from \"./ExperimentsSwitcher.js\";\nimport { ExperimentIndicator } from \"./ExperimentIndicator.js\";\nimport { ExperimentsEditorPresenterFeature } from \"../feature.js\";\n\n/**\n * Top-bar entry point for A/B experiments.\n *\n * On an editable (draft) page it's a switcher for picking an experiment to edit; on a published\n * (read-only) page it's an indicator for the running experiment with a pause/resume kill-switch.\n * State is shared through the editor-wide presenter so the in-preview toolbar tracks the selection.\n */\nexport const ExperimentsButton = observer(function ExperimentsButton() {\n    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);\n    const isReadOnly = useSelectFromEditor(state => state.isReadOnly);\n\n    const { runningExperiment, switcherItems, selectedExperimentId } = presenter.vm;\n\n    // On the published (read-only) view, surface the running experiment and keep it selected so the\n    // preview toolbar tracks it. Forwards the editor read-only selector into the presenter.\n    useEffect(() => {\n        presenter.syncReadOnlySelection(isReadOnly);\n    }, [presenter, isReadOnly, runningExperiment, selectedExperimentId]);\n\n    if (isReadOnly) {\n        if (!runningExperiment) {\n            return null;\n        }\n        return (\n            <div style={{ display: \"flex\" }}>\n                <ExperimentIndicator experiment={runningExperiment} />\n            </div>\n        );\n    }\n\n    const items: ExperimentItem[] = switcherItems;\n\n    return (\n        <div style={{ display: \"flex\" }}>\n            {items.length === 0 ? (\n                <Button\n                    variant=\"secondary\"\n                    icon={<ScienceIcon />}\n                    text=\"Experiments\"\n                    onClick={() => presenter.openManage()}\n                />\n            ) : (\n                <ExperimentsSwitcher\n                    experiments={items}\n                    selectedId={selectedExperimentId}\n                    onSelect={id => presenter.selectExperiment(id)}\n                    onManage={() => presenter.openManage()}\n                />\n            )}\n        </div>\n    );\n});\n"],"names":["ExperimentsButton","observer","presenter","useFeature","ExperimentsEditorPresenterFeature","isReadOnly","useSelectFromEditor","state","runningExperiment","switcherItems","selectedExperimentId","useEffect","ExperimentIndicator","items","Button","ScienceIcon","ExperimentsSwitcher","id"],"mappings":";;;;;;;;;AAiBO,MAAMA,sCAAoBC,SAAS;IACtC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAMC,aAAaC,oBAAoBC,CAAAA,QAASA,MAAM,UAAU;IAEhE,MAAM,EAAEC,iBAAiB,EAAEC,aAAa,EAAEC,oBAAoB,EAAE,GAAGR,UAAU,EAAE;IAI/ES,UAAU;QACNT,UAAU,qBAAqB,CAACG;IACpC,GAAG;QAACH;QAAWG;QAAYG;QAAmBE;KAAqB;IAEnE,IAAIL,YAAY;QACZ,IAAI,CAACG,mBACD,OAAO;QAEX,OAAO,WAAP,GACI,oBAAC;YAAI,OAAO;gBAAE,SAAS;YAAO;yBAC1B,oBAACI,qBAAmBA;YAAC,YAAYJ;;IAG7C;IAEA,MAAMK,QAA0BJ;IAEhC,OAAO,WAAP,GACI,oBAAC;QAAI,OAAO;YAAE,SAAS;QAAO;OACzBI,AAAiB,MAAjBA,MAAM,MAAM,GAAS,WAAJ,GACd,oBAACC,QAAMA;QACH,SAAQ;QACR,oBAAM,oBAACC,gBAAWA;QAClB,MAAK;QACL,SAAS,IAAMb,UAAU,UAAU;uBAGvC,oBAACc,qBAAmBA;QAChB,aAAaH;QACb,YAAYH;QACZ,UAAUO,CAAAA,KAAMf,UAAU,gBAAgB,CAACe;QAC3C,UAAU,IAAMf,UAAU,UAAU;;AAKxD"}

package/presentation/experiments/ExperimentsEditor/components/ExperimentsSwitcher.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface ExperimentItem {
+    id: string;
+    name: string;
+    status: "active" | "inactive";
+}
+interface Props {
+    experiments: ExperimentItem[];
+    selectedId: string | null;
+    onSelect: (id: string | null) => void;
+    onManage: () => void;
+}
+export declare const ExperimentsSwitcher: ({ experiments, selectedId, onSelect, onManage }: Props) => React.JSX.Element;
+export {};

package/presentation/experiments/ExperimentsEditor/components/ExperimentsSwitcher.js

@@ -0,0 +1,147 @@
+import react, { useState } from "react";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/science.svg";
+import { ReactComponent as expand_more_svg_ReactComponent } from "@webiny/icons/expand_more.svg";
+import { ReactComponent as public_svg_ReactComponent } from "@webiny/icons/public.svg";
+import { ReactComponent as check_svg_ReactComponent } from "@webiny/icons/check.svg";
+import { ReactComponent as tune_svg_ReactComponent } from "@webiny/icons/tune.svg";
+const Dot = ({ color })=>/*#__PURE__*/ react.createElement("span", {
+        style: {
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: color,
+            flexShrink: 0
+        }
+    });
+const StatusBadge = ({ status })=>{
+    const active = "active" === status;
+    return /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 12,
+            fontWeight: 500,
+            color: active ? "#0f9d58" : "#6b7280",
+            background: active ? "#e6f4ea" : "#f2f2f2",
+            borderRadius: 6,
+            padding: "1px 8px",
+            whiteSpace: "nowrap"
+        }
+    }, active ? "Active" : "Inactive");
+};
+const Row = ({ title, subtitle, right, selected })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: "100%",
+            gap: 8
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column"
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontWeight: subtitle ? 600 : 400
+        }
+    }, title), subtitle ? /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 12,
+            color: "#6b7280"
+        }
+    }, subtitle) : null), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+        }
+    }, right, selected ? /*#__PURE__*/ react.createElement(check_svg_ReactComponent, {
+        style: {
+            width: 16,
+            height: 16,
+            color: "#e2572a"
+        }
+    }) : null));
+const ExperimentsSwitcher = ({ experiments, selectedId, onSelect, onManage })=>{
+    const [open, setOpen] = useState(false);
+    const selected = experiments.find((e)=>e.id === selectedId) ?? null;
+    const label = selected ? selected.name : "Experiments";
+    const trigger = /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8,
+            border: "1px solid #f2c9ba",
+            color: "#e2572a",
+            background: "#fff",
+            borderRadius: 8,
+            padding: "6px 12px",
+            fontWeight: 600,
+            cursor: "pointer"
+        }
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            fill: "currentColor"
+        }
+    }), label, /*#__PURE__*/ react.createElement(expand_more_svg_ReactComponent, {
+        style: {
+            width: 16,
+            height: 16,
+            fill: "currentColor"
+        }
+    }));
+    return /*#__PURE__*/ react.createElement(DropdownMenu, {
+        open: open,
+        onOpenChange: setOpen,
+        trigger: trigger,
+        style: {
+            minWidth: 320
+        }
+    }, /*#__PURE__*/ react.createElement(DropdownMenu.Label, {
+        text: "Now viewing"
+    }), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        icon: /*#__PURE__*/ react.createElement(public_svg_ReactComponent, {
+            style: {
+                width: 18,
+                height: 18
+            }
+        }),
+        text: /*#__PURE__*/ react.createElement(Row, {
+            title: "Original page",
+            subtitle: "No experiment applied",
+            selected: null === selectedId
+        }),
+        onClick: ()=>onSelect(null)
+    }), /*#__PURE__*/ react.createElement(DropdownMenu.Separator, null), /*#__PURE__*/ react.createElement(DropdownMenu.Label, {
+        text: "Experiments"
+    }), experiments.map((experiment)=>/*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            key: experiment.id,
+            icon: /*#__PURE__*/ react.createElement(Dot, {
+                color: "active" === experiment.status ? "#10b981" : "#9ca3af"
+            }),
+            text: /*#__PURE__*/ react.createElement(Row, {
+                title: experiment.name,
+                right: /*#__PURE__*/ react.createElement(StatusBadge, {
+                    status: experiment.status
+                }),
+                selected: selectedId === experiment.id
+            }),
+            onClick: ()=>onSelect(experiment.id)
+        })), /*#__PURE__*/ react.createElement(DropdownMenu.Separator, null), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        icon: /*#__PURE__*/ react.createElement(tune_svg_ReactComponent, {
+            style: {
+                width: 18,
+                height: 18
+            }
+        }),
+        text: "Manage experiments…",
+        onClick: onManage
+    }));
+};
+export { ExperimentsSwitcher };
+
+//# sourceMappingURL=ExperimentsSwitcher.js.map

package/presentation/experiments/ExperimentsEditor/components/ExperimentsSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/components/ExperimentsSwitcher.js","sources":["../../../../../src/presentation/experiments/ExperimentsEditor/components/ExperimentsSwitcher.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as ScienceIcon } from \"@webiny/icons/science.svg\";\nimport { ReactComponent as ChevronDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/public.svg\";\nimport { ReactComponent as CheckIcon } from \"@webiny/icons/check.svg\";\nimport { ReactComponent as TuneIcon } from \"@webiny/icons/tune.svg\";\n\nexport interface ExperimentItem {\n    id: string;\n    name: string;\n    status: \"active\" | \"inactive\";\n}\n\ninterface Props {\n    experiments: ExperimentItem[];\n    selectedId: string | null;\n    onSelect: (id: string | null) => void;\n    onManage: () => void;\n}\n\nconst Dot = ({ color }: { color: string }) => (\n    <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: color, flexShrink: 0 }} />\n);\n\nconst StatusBadge = ({ status }: { status: ExperimentItem[\"status\"] }) => {\n    const active = status === \"active\";\n    return (\n        <span\n            style={{\n                fontSize: 12,\n                fontWeight: 500,\n                color: active ? \"#0f9d58\" : \"#6b7280\",\n                background: active ? \"#e6f4ea\" : \"#f2f2f2\",\n                borderRadius: 6,\n                padding: \"1px 8px\",\n                whiteSpace: \"nowrap\"\n            }}\n        >\n            {active ? \"Active\" : \"Inactive\"}\n        </span>\n    );\n};\n\ninterface RowProps {\n    title: string;\n    subtitle?: string;\n    right?: React.ReactNode;\n    selected: boolean;\n}\n\nconst Row = ({ title, subtitle, right, selected }: RowProps) => (\n    <div\n        style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: \"100%\",\n            gap: 8\n        }}\n    >\n        <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n            <span style={{ fontWeight: subtitle ? 600 : 400 }}>{title}</span>\n            {subtitle ? <span style={{ fontSize: 12, color: \"#6b7280\" }}>{subtitle}</span> : null}\n        </div>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n            {right}\n            {selected ? <CheckIcon style={{ width: 16, height: 16, color: \"#e2572a\" }} /> : null}\n        </div>\n    </div>\n);\n\nexport const ExperimentsSwitcher = ({ experiments, selectedId, onSelect, onManage }: Props) => {\n    const [open, setOpen] = useState(false);\n    const selected = experiments.find(e => e.id === selectedId) ?? null;\n    const label = selected ? selected.name : \"Experiments\";\n\n    const trigger = (\n        <button\n            type=\"button\"\n            style={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                gap: 8,\n                border: \"1px solid #f2c9ba\",\n                color: \"#e2572a\",\n                background: \"#fff\",\n                borderRadius: 8,\n                padding: \"6px 12px\",\n                fontWeight: 600,\n                cursor: \"pointer\"\n            }}\n        >\n            <ScienceIcon style={{ width: 18, height: 18, fill: \"currentColor\" }} />\n            {label}\n            <ChevronDownIcon style={{ width: 16, height: 16, fill: \"currentColor\" }} />\n        </button>\n    );\n\n    return (\n        <DropdownMenu\n            open={open}\n            onOpenChange={setOpen}\n            trigger={trigger}\n            style={{ minWidth: 320 }}\n        >\n            <DropdownMenu.Label text=\"Now viewing\" />\n            <DropdownMenu.Item\n                icon={<GlobeIcon style={{ width: 18, height: 18 }} />}\n                text={\n                    <Row\n                        title=\"Original page\"\n                        subtitle=\"No experiment applied\"\n                        selected={selectedId === null}\n                    />\n                }\n                onClick={() => onSelect(null)}\n            />\n            <DropdownMenu.Separator />\n            <DropdownMenu.Label text=\"Experiments\" />\n            {experiments.map(experiment => (\n                <DropdownMenu.Item\n                    key={experiment.id}\n                    icon={<Dot color={experiment.status === \"active\" ? \"#10b981\" : \"#9ca3af\"} />}\n                    text={\n                        <Row\n                            title={experiment.name}\n                            right={<StatusBadge status={experiment.status} />}\n                            selected={selectedId === experiment.id}\n                        />\n                    }\n                    onClick={() => onSelect(experiment.id)}\n                />\n            ))}\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item\n                icon={<TuneIcon style={{ width: 18, height: 18 }} />}\n                text=\"Manage experiments…\"\n                onClick={onManage}\n            />\n        </DropdownMenu>\n    );\n};\n"],"names":["Dot","color","StatusBadge","status","active","Row","title","subtitle","right","selected","CheckIcon","ExperimentsSwitcher","experiments","selectedId","onSelect","onManage","open","setOpen","useState","e","label","trigger","ScienceIcon","ChevronDownIcon","DropdownMenu","GlobeIcon","experiment","TuneIcon"],"mappings":"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"}

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

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

package/presentation/experiments/ExperimentsEditor/feature.js

@@ -0,0 +1,21 @@
+import { createFeature } from "@webiny/feature/admin";
+import { ExperimentsFeature } from "../../../features/experiments/index.js";
+import { ExperimentsEditorPresenter } from "./abstractions/ExperimentsEditorPresenter.js";
+import { ExperimentsEditorPresenter as external_ExperimentsEditorPresenter_js_ExperimentsEditorPresenter } from "./ExperimentsEditorPresenter.js";
+import { ExperimentsEditorDataSource } from "./ExperimentsEditorDataSource.js";
+const ExperimentsEditorPresenterFeature = createFeature({
+    name: "WebsiteBuilder/ExperimentsEditorPresenter",
+    register (container) {
+        ExperimentsFeature.register(container);
+        container.register(ExperimentsEditorDataSource).inSingletonScope();
+        container.register(external_ExperimentsEditorPresenter_js_ExperimentsEditorPresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(ExperimentsEditorPresenter)
+        };
+    }
+});
+export { ExperimentsEditorPresenterFeature };
+
+//# sourceMappingURL=feature.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/feature.js","sources":["../../../../src/presentation/experiments/ExperimentsEditor/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { ExperimentsFeature } from \"~/features/experiments/index.js\";\nimport { ExperimentsEditorPresenter as PresenterAbstraction } from \"./abstractions/ExperimentsEditorPresenter.js\";\nimport { ExperimentsEditorPresenter } from \"./ExperimentsEditorPresenter.js\";\nimport { ExperimentsEditorDataSource } from \"./ExperimentsEditorDataSource.js\";\n\nexport const ExperimentsEditorPresenterFeature = createFeature({\n    name: \"WebsiteBuilder/ExperimentsEditorPresenter\",\n    register(container) {\n        ExperimentsFeature.register(container);\n        container.register(ExperimentsEditorDataSource).inSingletonScope();\n        container.register(ExperimentsEditorPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return { presenter: container.resolve(PresenterAbstraction) };\n    }\n});\n"],"names":["ExperimentsEditorPresenterFeature","createFeature","container","ExperimentsFeature","ExperimentsEditorDataSource","ExperimentsEditorPresenter","PresenterAbstraction"],"mappings":";;;;;AAMO,MAAMA,oCAAoCC,cAAc;IAC3D,MAAM;IACN,UAASC,SAAS;QACdC,mBAAmB,QAAQ,CAACD;QAC5BA,UAAU,QAAQ,CAACE,6BAA6B,gBAAgB;QAChEF,UAAU,QAAQ,CAACG,mEAA4B,gBAAgB;IACnE;IACA,SAAQH,SAAS;QACb,OAAO;YAAE,WAAWA,UAAU,OAAO,CAACI;QAAsB;IAChE;AACJ"}

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

@@ -0,0 +1,4 @@
+export { ExperimentsEditorPresenter } from "./abstractions/ExperimentsEditorPresenter.js";
+export type { IExperimentsEditorPresenter, IExperimentsEditorViewModel, VariantOption } from "./abstractions/ExperimentsEditorPresenter.js";
+export { ExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+export { ExperimentsEditorPresenterFeature } from "./feature.js";

package/presentation/experiments/ExperimentsEditor/index.js

@@ -0,0 +1,3 @@
+export { ExperimentsEditorPresenter } from "./abstractions/ExperimentsEditorPresenter.js";
+export { ExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+export { ExperimentsEditorPresenterFeature } from "./feature.js";

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

@@ -0,0 +1,39 @@
+import { ExperimentsGateway } from "../../../features/experiments/index.js";
+import type { ExperimentDto } from "../../../features/experiments/index.js";
+import type { NewExperimentPayload } from "../ExperimentForm/abstractions/ExperimentFormPresenter.js";
+import { ExperimentsEditorPresenter } from "../ExperimentsEditor/index.js";
+import { type IExperimentsManagerPresenter, type IExperimentsManagerViewModel } from "./abstractions/ExperimentsManagerPresenter.js";
+/**
+ * Owns the manage drawer's view state (open/view/editTarget) and the per-experiment variant
+ * summaries the cards render. All domain actions are delegated to the editor hub presenter, which
+ * remains the single source of truth for the page's experiments and their lifecycle.
+ */
+declare class ExperimentsManagerPresenterImpl implements IExperimentsManagerPresenter {
+    private readonly hub;
+    private readonly gateway;
+    private view;
+    private editInitial;
+    private variantsByExperiment;
+    private disposers;
+    constructor(hub: ExperimentsEditorPresenter.Interface, gateway: ExperimentsGateway.Interface);
+    private get experiments();
+    private get cards();
+    get vm(): IExperimentsManagerViewModel;
+    init(): void;
+    dispose(): void;
+    /** Load the variants for every listed experiment so the cards render as pure observers. */
+    private loadCardVariants;
+    showList(): void;
+    showCreate(): void;
+    startEdit(experiment: ExperimentDto): Promise<void>;
+    close(): void;
+    createExperiment(payload: NewExperimentPayload): Promise<void>;
+    updateExperiment(payload: NewExperimentPayload): Promise<void>;
+    activateExperiment(experiment: ExperimentDto): Promise<void>;
+    deactivateExperiment(experiment: ExperimentDto): Promise<void>;
+    deleteExperiment(experiment: ExperimentDto): Promise<void>;
+}
+export declare const ExperimentsManagerPresenter: typeof ExperimentsManagerPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<IExperimentsManagerPresenter>;
+};
+export {};