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

package/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorPresenter.d.ts

@@ -0,0 +1,58 @@
+import type { ExperimentDto, UpdateExperimentInput, VariantContentDto, VariantDto } from "../../../../features/experiments/index.js";
+import type { NewExperimentPayload } from "../../ExperimentForm/abstractions/ExperimentFormPresenter.js";
+/** A single "thing you can edit" within an experiment: the control, or one of its variants. */
+export interface VariantOption {
+    id: string | null;
+    name: string;
+    weight: number;
+    isControl: boolean;
+    color: string;
+}
+/** A row in the top-bar experiment switcher. */
+export interface SwitcherItem {
+    id: string;
+    name: string;
+    status: "active" | "inactive";
+}
+export interface IExperimentsEditorViewModel {
+    baselineRevisionId: string;
+    pageEntryId: string;
+    experiments: ExperimentDto[];
+    selectedExperimentId: string | null;
+    selectedExperiment: ExperimentDto | null;
+    selectedVariantId: string | null;
+    selectedVariant: VariantDto | null;
+    variantOptions: VariantOption[];
+    currentBucket: VariantOption | null;
+    runningExperiment: ExperimentDto | null;
+    switcherItems: SwitcherItem[];
+    paused: boolean;
+    drawerOpen: boolean;
+    editTarget: ExperimentDto | null;
+}
+export interface IExperimentsEditorPresenter {
+    readonly vm: IExperimentsEditorViewModel;
+    init(pageRevisionId: string): void;
+    reload(): Promise<void>;
+    selectExperiment(id: string | null): void;
+    selectVariant(variantId: string | null): void;
+    syncReadOnlySelection(isReadOnly: boolean): void;
+    openManage(): void;
+    editExperiment(experiment: ExperimentDto): void;
+    closeDrawer(): void;
+    pause(): Promise<void>;
+    resume(): Promise<void>;
+    activate(experimentId: string): Promise<ExperimentDto>;
+    deactivate(experimentId: string): Promise<ExperimentDto>;
+    createExperiment(payload: NewExperimentPayload): Promise<ExperimentDto>;
+    updateExperiment(id: string, input: UpdateExperimentInput): Promise<ExperimentDto>;
+    deleteExperiment(experimentId: string): Promise<boolean>;
+    getVariant(id: string): Promise<VariantContentDto | null>;
+    saveVariant(revisionId: string, doc: Record<string, any>): Promise<VariantDto>;
+}
+export declare const ExperimentsEditorPresenter: import("@webiny/di").Abstraction<IExperimentsEditorPresenter>;
+export declare namespace ExperimentsEditorPresenter {
+    type Interface = IExperimentsEditorPresenter;
+    type ViewModel = IExperimentsEditorViewModel;
+    type Option = VariantOption;
+}

package/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorPresenter.js

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

package/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorPresenter.js","sources":["../../../../../src/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorPresenter.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type {\n    ExperimentDto,\n    UpdateExperimentInput,\n    VariantContentDto,\n    VariantDto\n} from \"~/features/experiments/index.js\";\nimport type { NewExperimentPayload } from \"../../ExperimentForm/abstractions/ExperimentFormPresenter.js\";\n\n/** A single \"thing you can edit\" within an experiment: the control, or one of its variants. */\nexport interface VariantOption {\n    // `null` identifies the control (the baseline page); otherwise the variant entry id.\n    id: string | null;\n    name: string;\n    weight: number;\n    isControl: boolean;\n    // Palette colour for the bucket, assigned by index (control neutral, variants cycle).\n    color: string;\n}\n\n/** A row in the top-bar experiment switcher. */\nexport interface SwitcherItem {\n    id: string;\n    name: string;\n    status: \"active\" | \"inactive\";\n}\n\nexport interface IExperimentsEditorViewModel {\n    // Revision id of the page being edited; the baseline for its experiments.\n    baselineRevisionId: string;\n    // Entry id of the page being edited (derived from the baseline revision id).\n    pageEntryId: string;\n    experiments: ExperimentDto[];\n    selectedExperimentId: string | null;\n    selectedExperiment: ExperimentDto | null;\n    // Currently edited bucket: `null` = control, otherwise a variant entry id.\n    selectedVariantId: string | null;\n    // The variant DTO matching `selectedVariantId` (null when editing the control).\n    selectedVariant: VariantDto | null;\n    variantOptions: VariantOption[];\n    // The bucket currently being previewed/edited (control or the selected variant).\n    currentBucket: VariantOption | null;\n    // The single running experiment on the page, if any (drives the read-only indicator).\n    runningExperiment: ExperimentDto | null;\n    // Experiments as switcher rows (id + name + active/inactive status).\n    switcherItems: SwitcherItem[];\n    // Kill-switch state of the selected experiment.\n    paused: boolean;\n    // Manage/edit drawer UI state.\n    drawerOpen: boolean;\n    editTarget: ExperimentDto | null;\n}\n\nexport interface IExperimentsEditorPresenter {\n    readonly vm: IExperimentsEditorViewModel;\n    init(pageRevisionId: string): void;\n    reload(): Promise<void>;\n    selectExperiment(id: string | null): void;\n    selectVariant(variantId: string | null): void;\n    // On a published (read-only) page, keep the running experiment selected so the preview tracks it.\n    syncReadOnlySelection(isReadOnly: boolean): void;\n    openManage(): void;\n    editExperiment(experiment: ExperimentDto): void;\n    closeDrawer(): void;\n    pause(): Promise<void>;\n    resume(): Promise<void>;\n    activate(experimentId: string): Promise<ExperimentDto>;\n    deactivate(experimentId: string): Promise<ExperimentDto>;\n    createExperiment(payload: NewExperimentPayload): Promise<ExperimentDto>;\n    updateExperiment(id: string, input: UpdateExperimentInput): Promise<ExperimentDto>;\n    deleteExperiment(experimentId: string): Promise<boolean>;\n    getVariant(id: string): Promise<VariantContentDto | null>;\n    saveVariant(revisionId: string, doc: Record<string, any>): Promise<VariantDto>;\n}\n\nexport const ExperimentsEditorPresenter = createAbstraction<IExperimentsEditorPresenter>(\n    \"WebsiteBuilder/ExperimentsEditor/Presenter\"\n);\n\nexport namespace ExperimentsEditorPresenter {\n    export type Interface = IExperimentsEditorPresenter;\n    export type ViewModel = IExperimentsEditorViewModel;\n    export type Option = VariantOption;\n}\n"],"names":["ExperimentsEditorPresenter","createAbstraction"],"mappings":";AA2EO,MAAMA,6BAA6BC,kBACtC"}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ExperimentDto } from "../../../../features/experiments/index.js";
+/**
+ * Top-bar indicator shown on a published (read-only) page: names the running experiment, shows
+ * whether it's live (Active) or paused (Inactive), and lets the editor toggle the kill-switch.
+ */
+export declare const ExperimentIndicator: (({ experiment }: {
+    experiment: ExperimentDto;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    experiment: ExperimentDto;
+}> & {
+    readonly type: ({ experiment }: {
+        experiment: ExperimentDto;
+    }) => React.JSX.Element;
+};

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

@@ -0,0 +1,110 @@
+import react, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useFeature } from "@webiny/app";
+import { ReactComponent } from "@webiny/icons/science.svg";
+import { ReactComponent as pause_svg_ReactComponent } from "@webiny/icons/pause.svg";
+import { ReactComponent as play_arrow_svg_ReactComponent } from "@webiny/icons/play_arrow.svg";
+import { ExperimentsEditorPresenterFeature } from "../feature.js";
+const ExperimentIndicator_ExperimentIndicator = observer(function({ experiment }) {
+    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);
+    const { paused } = presenter.vm;
+    const [busy, setBusy] = useState(false);
+    const active = !paused;
+    const toggle = async ()=>{
+        setBusy(true);
+        try {
+            await (paused ? presenter.resume() : presenter.pause());
+        } finally{
+            setBusy(false);
+        }
+    };
+    const toggleStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        borderRadius: 8,
+        padding: "6px 12px",
+        fontWeight: 600,
+        fontSize: 13,
+        cursor: busy ? "default" : "pointer",
+        opacity: busy ? 0.6 : 1,
+        ...active ? {
+            border: "1px solid #d5d7db",
+            background: "#fff",
+            color: "#1f2937"
+        } : {
+            border: "none",
+            background: "#10b981",
+            color: "#fff"
+        }
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 12,
+            border: "1px solid #e5e7eb",
+            borderRadius: 8,
+            padding: "4px 4px 4px 12px",
+            background: "#fff"
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8,
+            minWidth: 0
+        }
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            color: "#e2572a",
+            fill: "currentColor"
+        }
+    }), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontWeight: 600,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+        }
+    }, experiment.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("span", {
+        style: {
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: active ? "#10b981" : "#9ca3af"
+        }
+    }), active ? "Active" : "Inactive")), /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        onClick: toggle,
+        disabled: busy,
+        style: toggleStyle
+    }, active ? /*#__PURE__*/ react.createElement(pause_svg_ReactComponent, {
+        style: {
+            width: 16,
+            height: 16,
+            fill: "currentColor"
+        }
+    }) : /*#__PURE__*/ react.createElement(play_arrow_svg_ReactComponent, {
+        style: {
+            width: 16,
+            height: 16,
+            fill: "currentColor"
+        }
+    }), active ? "Pause" : "Resume"));
+});
+export { ExperimentIndicator_ExperimentIndicator as ExperimentIndicator };
+
+//# sourceMappingURL=ExperimentIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/components/ExperimentIndicator.js","sources":["../../../../../src/presentation/experiments/ExperimentsEditor/components/ExperimentIndicator.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature } from \"@webiny/app\";\nimport { ReactComponent as ScienceIcon } from \"@webiny/icons/science.svg\";\nimport { ReactComponent as PauseIcon } from \"@webiny/icons/pause.svg\";\nimport { ReactComponent as PlayIcon } from \"@webiny/icons/play_arrow.svg\";\nimport { ExperimentsEditorPresenterFeature } from \"../feature.js\";\nimport type { ExperimentDto } from \"~/features/experiments/index.js\";\n\n/**\n * Top-bar indicator shown on a published (read-only) page: names the running experiment, shows\n * whether it's live (Active) or paused (Inactive), and lets the editor toggle the kill-switch.\n */\nexport const ExperimentIndicator = observer(function ExperimentIndicator({\n    experiment\n}: {\n    experiment: ExperimentDto;\n}) {\n    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);\n    const { paused } = presenter.vm;\n    const [busy, setBusy] = useState(false);\n    const active = !paused;\n\n    const toggle = async () => {\n        setBusy(true);\n        try {\n            await (paused ? presenter.resume() : presenter.pause());\n        } finally {\n            setBusy(false);\n        }\n    };\n\n    const toggleStyle: React.CSSProperties = {\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        gap: 6,\n        borderRadius: 8,\n        padding: \"6px 12px\",\n        fontWeight: 600,\n        fontSize: 13,\n        cursor: busy ? \"default\" : \"pointer\",\n        opacity: busy ? 0.6 : 1,\n        ...(active\n            ? { border: \"1px solid #d5d7db\", background: \"#fff\", color: \"#1f2937\" }\n            : { border: \"none\", background: \"#10b981\", color: \"#fff\" })\n    };\n\n    return (\n        <div\n            style={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                gap: 12,\n                border: \"1px solid #e5e7eb\",\n                borderRadius: 8,\n                padding: \"4px 4px 4px 12px\",\n                background: \"#fff\"\n            }}\n        >\n            <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8, minWidth: 0 }}>\n                <ScienceIcon\n                    style={{ width: 18, height: 18, color: \"#e2572a\", fill: \"currentColor\" }}\n                />\n                <span\n                    style={{\n                        fontWeight: 600,\n                        whiteSpace: \"nowrap\",\n                        overflow: \"hidden\",\n                        textOverflow: \"ellipsis\"\n                    }}\n                >\n                    {experiment.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                    <span\n                        style={{\n                            width: 8,\n                            height: 8,\n                            borderRadius: \"50%\",\n                            background: active ? \"#10b981\" : \"#9ca3af\"\n                        }}\n                    />\n                    {active ? \"Active\" : \"Inactive\"}\n                </span>\n            </span>\n            <button type=\"button\" onClick={toggle} disabled={busy} style={toggleStyle}>\n                {active ? (\n                    <PauseIcon style={{ width: 16, height: 16, fill: \"currentColor\" }} />\n                ) : (\n                    <PlayIcon style={{ width: 16, height: 16, fill: \"currentColor\" }} />\n                )}\n                {active ? \"Pause\" : \"Resume\"}\n            </button>\n        </div>\n    );\n});\n"],"names":["ExperimentIndicator","observer","experiment","presenter","useFeature","ExperimentsEditorPresenterFeature","paused","busy","setBusy","useState","active","toggle","toggleStyle","ScienceIcon","PauseIcon","PlayIcon"],"mappings":";;;;;;;AAaO,MAAMA,0CAAsBC,SAAS,SAA6B,EACrEC,UAAU,EAGb;IACG,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,MAAM,EAAE,GAAGH,UAAU,EAAE;IAC/B,MAAM,CAACI,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAMC,SAAS,CAACJ;IAEhB,MAAMK,SAAS;QACXH,QAAQ;QACR,IAAI;YACA,MAAOF,CAAAA,SAASH,UAAU,MAAM,KAAKA,UAAU,KAAK,EAAC;QACzD,SAAU;YACNK,QAAQ;QACZ;IACJ;IAEA,MAAMI,cAAmC;QACrC,SAAS;QACT,YAAY;QACZ,KAAK;QACL,cAAc;QACd,SAAS;QACT,YAAY;QACZ,UAAU;QACV,QAAQL,OAAO,YAAY;QAC3B,SAASA,OAAO,MAAM;QACtB,GAAIG,SACE;YAAE,QAAQ;YAAqB,YAAY;YAAQ,OAAO;QAAU,IACpE;YAAE,QAAQ;YAAQ,YAAY;YAAW,OAAO;QAAO,CAAC;IAClE;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,YAAY;YACZ,KAAK;YACL,QAAQ;YACR,cAAc;YACd,SAAS;YACT,YAAY;QAChB;qBAEA,oBAAC;QAAK,OAAO;YAAE,SAAS;YAAe,YAAY;YAAU,KAAK;YAAG,UAAU;QAAE;qBAC7E,oBAACG,gBAAWA;QACR,OAAO;YAAE,OAAO;YAAI,QAAQ;YAAI,OAAO;YAAW,MAAM;QAAe;sBAE3E,oBAAC;QACG,OAAO;YACH,YAAY;YACZ,YAAY;YACZ,UAAU;YACV,cAAc;QAClB;OAECX,WAAW,IAAI,iBAEpB,oBAAC;QACG,OAAO;YACH,SAAS;YACT,YAAY;YACZ,KAAK;YACL,UAAU;YACV,YAAY;YACZ,OAAOQ,SAAS,YAAY;YAC5B,YAAY;QAChB;qBAEA,oBAAC;QACG,OAAO;YACH,OAAO;YACP,QAAQ;YACR,cAAc;YACd,YAAYA,SAAS,YAAY;QACrC;QAEHA,SAAS,WAAW,4BAG7B,oBAAC;QAAO,MAAK;QAAS,SAASC;QAAQ,UAAUJ;QAAM,OAAOK;OACzDF,SAAS,WAATA,GACG,oBAACI,0BAASA;QAAC,OAAO;YAAE,OAAO;YAAI,QAAQ;YAAI,MAAM;QAAe;uBAEhE,oBAACC,+BAAQA;QAAC,OAAO;YAAE,OAAO;YAAI,QAAQ;YAAI,MAAM;QAAe;QAElEL,SAAS,UAAU;AAIpC"}

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

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * A bar shown between the address bar and the canvas while an experiment is selected. It names the
+ * experiment, shows its status and the bucket currently being edited, and lets the editor switch
+ * between the control and each variant or jump to editing the experiment.
+ */
+export declare const ExperimentPreviewToolbar: (() => React.JSX.Element | null) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element | null;
+};

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