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

package/presentation/experiments/ExperimentForm/ExperimentFormPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/ExperimentFormPresenter.js","sources":["../../../../src/presentation/experiments/ExperimentForm/ExperimentFormPresenter.ts"],"sourcesContent":["import { computed, makeAutoObservable } from \"mobx\";\nimport slugify from \"slugify\";\nimport {\n    ExperimentFormPresenter as Abstraction,\n    type ExperimentFormInitial,\n    type FormBucket,\n    type IExperimentFormPresenter,\n    type IExperimentFormViewModel,\n    type NewExperimentPayload\n} from \"./abstractions/ExperimentFormPresenter.js\";\n\nconst toKey = (value: string): string => slugify(value, { lower: true, strict: true });\n\nconst defaultBuckets = (): FormBucket[] => [\n    {\n        id: \"control\",\n        isControl: true,\n        name: \"Control\",\n        key: \"control\",\n        keyEdited: false,\n        description: \"\",\n        weight: 50\n    },\n    {\n        id: crypto.randomUUID(),\n        isControl: false,\n        name: \"Variant B\",\n        key: \"variant-b\",\n        keyEdited: false,\n        description: \"\",\n        weight: 50\n    }\n];\n\n/** Even split summing to 100, with any remainder distributed from the first bucket. */\nconst evenSplit = (buckets: FormBucket[]): FormBucket[] => {\n    const n = buckets.length;\n    const each = Math.floor(100 / n);\n    const next = buckets.map(b => ({ ...b, weight: each }));\n    let used = each * n;\n    let i = 0;\n    while (used < 100) {\n        next[i % n].weight += 1;\n        used++;\n        i++;\n    }\n    return next;\n};\n\n/** Set one bucket's weight and auto-balance the rest (proportionally) so the total stays 100. */\nconst rebalance = (buckets: FormBucket[], index: number, rawValue: number): FormBucket[] => {\n    const value = Math.max(0, Math.min(100, Math.round(rawValue)));\n    const next = buckets.map(b => ({ ...b }));\n    next[index].weight = value;\n\n    const others = next.map((b, i) => ({ b, i })).filter(x => x.i !== index);\n    if (others.length === 0) {\n        next[index].weight = 100;\n        return next;\n    }\n\n    const remaining = 100 - value;\n    const sumOthers = others.reduce((sum, x) => sum + x.b.weight, 0);\n\n    if (sumOthers <= 0) {\n        const each = Math.floor(remaining / others.length);\n        others.forEach(x => (next[x.i].weight = each));\n        let used = each * others.length;\n        let k = 0;\n        while (used < remaining) {\n            next[others[k % others.length].i].weight += 1;\n            used++;\n            k++;\n        }\n    } else {\n        let allocated = 0;\n        others.forEach(x => {\n            const w = Math.max(0, Math.round((x.b.weight / sumOthers) * remaining));\n            next[x.i].weight = w;\n            allocated += w;\n        });\n        const drift = remaining - allocated;\n        if (drift !== 0) {\n            const largest = others.reduce((a, b) => (next[a.i].weight >= next[b.i].weight ? a : b));\n            next[largest.i].weight = Math.max(0, next[largest.i].weight + drift);\n        }\n    }\n\n    return next;\n};\n\nclass ExperimentFormPresenterImpl implements IExperimentFormPresenter {\n    private _name = \"\";\n    private _key = \"\";\n    private _keyEdited = false;\n    private _buckets: FormBucket[] = defaultBuckets();\n    private _submitLabel = \"Create experiment\";\n    private _allowStructureChange = true;\n    private _onSubmit: (payload: NewExperimentPayload) => void = () => {\n        return;\n    };\n\n    public constructor() {\n        makeAutoObservable(this, { vm: computed });\n    }\n\n    public get vm(): IExperimentFormViewModel {\n        const total = this._buckets.reduce((sum, b) => sum + b.weight, 0);\n        const variantCount = this._buckets.filter(b => !b.isControl).length;\n        const canSubmit = this._name.trim().length > 0 && this._key.trim().length > 0;\n\n        return {\n            name: this._name,\n            key: this._key,\n            buckets: this._buckets,\n            total,\n            variantCount,\n            canSubmit,\n            submitLabel: this._submitLabel,\n            allowStructureChange: this._allowStructureChange\n        };\n    }\n\n    public init(\n        initial: ExperimentFormInitial | undefined,\n        options: {\n            submitLabel: string;\n            allowStructureChange: boolean;\n            onSubmit: (payload: NewExperimentPayload) => void;\n        }\n    ): void {\n        this._name = initial?.name ?? \"\";\n        this._key = initial?.key ?? \"\";\n        this._keyEdited = Boolean(initial?.key);\n        this._buckets = initial?.buckets ?? defaultBuckets();\n        this._submitLabel = options.submitLabel;\n        this._allowStructureChange = options.allowStructureChange;\n        this._onSubmit = options.onSubmit;\n    }\n\n    public setName(value: string): void {\n        this._name = value;\n        if (!this._keyEdited) {\n            this._key = toKey(value);\n        }\n    }\n\n    public setKey(value: string): void {\n        this._keyEdited = true;\n        this._key = value;\n    }\n\n    public addVariant(): void {\n        const count = this._buckets.filter(b => !b.isControl).length;\n        const variantName = `Variant ${String.fromCharCode(66 + count)}`;\n        this._buckets = evenSplit([\n            ...this._buckets,\n            {\n                id: crypto.randomUUID(),\n                isControl: false,\n                weight: 0,\n                name: variantName,\n                key: toKey(variantName),\n                keyEdited: false,\n                description: \"\"\n            }\n        ]);\n    }\n\n    public removeVariant(index: number): void {\n        this._buckets = evenSplit(this._buckets.filter((_, i) => i !== index));\n    }\n\n    public changeWeight(index: number, value: number): void {\n        this._buckets = rebalance(this._buckets, index, value);\n    }\n\n    public changeName(index: number, value: string): void {\n        this._buckets = this._buckets.map((b, i) =>\n            i === index ? { ...b, name: value, key: b.keyEdited ? b.key : toKey(value) } : b\n        );\n    }\n\n    public changeKey(index: number, value: string): void {\n        this._buckets = this._buckets.map((b, i) =>\n            i === index ? { ...b, key: value, keyEdited: true } : b\n        );\n    }\n\n    public changeDescription(index: number, value: string): void {\n        this._buckets = this._buckets.map((b, i) =>\n            i === index ? { ...b, description: value } : b\n        );\n    }\n\n    public submit(): void {\n        const canSubmit = this._name.trim().length > 0 && this._key.trim().length > 0;\n        if (!canSubmit) {\n            return;\n        }\n        const control = this._buckets.find(b => b.isControl)!;\n        const variants = this._buckets\n            .filter(b => !b.isControl)\n            .map(b => ({\n                id: b.id,\n                revisionId: b.revisionId,\n                name: b.name,\n                key: b.key,\n                description: b.description,\n                weight: b.weight\n            }));\n\n        this._onSubmit({\n            name: this._name.trim(),\n            key: this._key.trim(),\n            control: { key: control.key, description: control.description, weight: control.weight },\n            variants\n        });\n    }\n}\n\nexport const ExperimentFormPresenter = Abstraction.createImplementation({\n    implementation: ExperimentFormPresenterImpl,\n    dependencies: []\n});\n"],"names":["toKey","value","slugify","defaultBuckets","crypto","evenSplit","buckets","n","each","Math","next","b","used","i","rebalance","index","rawValue","others","x","remaining","sumOthers","sum","k","allocated","w","drift","largest","a","ExperimentFormPresenterImpl","makeAutoObservable","computed","total","variantCount","canSubmit","initial","options","Boolean","count","variantName","String","_","control","variants","ExperimentFormPresenter","Abstraction"],"mappings":"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"}

package/presentation/experiments/ExperimentForm/abstractions/ExperimentFormPresenter.d.ts

@@ -0,0 +1,65 @@
+/** A single form row: the control or a variant, with its traffic weight and analytics key. */
+export interface FormBucket {
+    id: string;
+    isControl: boolean;
+    name: string;
+    key: string;
+    keyEdited: boolean;
+    description: string;
+    weight: number;
+    revisionId?: string;
+}
+export interface ExperimentFormInitial {
+    name: string;
+    key: string;
+    buckets: FormBucket[];
+}
+export interface NewExperimentPayload {
+    name: string;
+    key: string;
+    control: {
+        key: string;
+        description: string;
+        weight: number;
+    };
+    variants: Array<{
+        id: string;
+        revisionId?: string;
+        name: string;
+        key: string;
+        description: string;
+        weight: number;
+    }>;
+}
+export interface IExperimentFormViewModel {
+    name: string;
+    key: string;
+    buckets: FormBucket[];
+    total: number;
+    variantCount: number;
+    canSubmit: boolean;
+    submitLabel: string;
+    allowStructureChange: boolean;
+}
+export interface IExperimentFormPresenter {
+    vm: IExperimentFormViewModel;
+    init(initial: ExperimentFormInitial | undefined, options: {
+        submitLabel: string;
+        allowStructureChange: boolean;
+        onSubmit: (payload: NewExperimentPayload) => void;
+    }): void;
+    setName(value: string): void;
+    setKey(value: string): void;
+    addVariant(): void;
+    removeVariant(index: number): void;
+    changeWeight(index: number, value: number): void;
+    changeName(index: number, value: string): void;
+    changeKey(index: number, value: string): void;
+    changeDescription(index: number, value: string): void;
+    submit(): void;
+}
+export declare const ExperimentFormPresenter: import("@webiny/di").Abstraction<IExperimentFormPresenter>;
+export declare namespace ExperimentFormPresenter {
+    type Interface = IExperimentFormPresenter;
+    type ViewModel = IExperimentFormViewModel;
+}

package/presentation/experiments/ExperimentForm/abstractions/ExperimentFormPresenter.js

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

package/presentation/experiments/ExperimentForm/abstractions/ExperimentFormPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/abstractions/ExperimentFormPresenter.js","sources":["../../../../../src/presentation/experiments/ExperimentForm/abstractions/ExperimentFormPresenter.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\n\n/** A single form row: the control or a variant, with its traffic weight and analytics key. */\nexport interface FormBucket {\n    id: string;\n    isControl: boolean;\n    name: string;\n    key: string;\n    keyEdited: boolean;\n    description: string;\n    weight: number;\n    // CMS revision id of an existing variant (edit mode); absent for control and new variants.\n    revisionId?: string;\n}\n\nexport interface ExperimentFormInitial {\n    name: string;\n    key: string;\n    buckets: FormBucket[];\n}\n\nexport interface NewExperimentPayload {\n    name: string;\n    key: string;\n    control: { key: string; description: string; weight: number };\n    variants: Array<{\n        id: string;\n        revisionId?: string;\n        name: string;\n        key: string;\n        description: string;\n        weight: number;\n    }>;\n}\n\nexport interface IExperimentFormViewModel {\n    name: string;\n    key: string;\n    buckets: FormBucket[];\n    total: number;\n    variantCount: number;\n    canSubmit: boolean;\n    submitLabel: string;\n    allowStructureChange: boolean;\n}\n\nexport interface IExperimentFormPresenter {\n    vm: IExperimentFormViewModel;\n    init(\n        initial: ExperimentFormInitial | undefined,\n        options: {\n            submitLabel: string;\n            allowStructureChange: boolean;\n            onSubmit: (payload: NewExperimentPayload) => void;\n        }\n    ): void;\n    setName(value: string): void;\n    setKey(value: string): void;\n    addVariant(): void;\n    removeVariant(index: number): void;\n    changeWeight(index: number, value: number): void;\n    changeName(index: number, value: string): void;\n    changeKey(index: number, value: string): void;\n    changeDescription(index: number, value: string): void;\n    submit(): void;\n}\n\nexport const ExperimentFormPresenter =\n    createAbstraction<IExperimentFormPresenter>(\"ExperimentFormPresenter\");\n\nexport namespace ExperimentFormPresenter {\n    export type Interface = IExperimentFormPresenter;\n    export type ViewModel = IExperimentFormViewModel;\n}\n"],"names":["ExperimentFormPresenter","createAbstraction"],"mappings":";AAmEO,MAAMA,0BACTC,kBAA4C"}

package/presentation/experiments/ExperimentForm/components/ExperimentFormView.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { ExperimentFormInitial, NewExperimentPayload } from "../abstractions/ExperimentFormPresenter.js";
+interface Props {
+    onCancel: () => void;
+    onSubmit: (payload: NewExperimentPayload) => void;
+    initial?: ExperimentFormInitial;
+    submitLabel?: string;
+    /** When false, variants can't be added/removed (used when editing an existing experiment). */
+    allowStructureChange?: boolean;
+}
+export declare const ExperimentFormView: (props: Props) => React.JSX.Element;
+export {};

package/presentation/experiments/ExperimentForm/components/ExperimentFormView.js

@@ -0,0 +1,149 @@
+import react, { useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { Button, Input, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as info_svg_ReactComponent } from "@webiny/icons/info.svg";
+import { ReactComponent as close_svg_ReactComponent } from "@webiny/icons/close.svg";
+import { VariantSplitRow } from "./VariantSplitRow.js";
+import { ExperimentFormPresenterFeature } from "../feature.js";
+const ExperimentFormView_ExperimentFormViewInner = observer(function({ onCancel, onSubmit, initial, submitLabel = "Create experiment", allowStructureChange = true }) {
+    const { presenter } = useFeature(ExperimentFormPresenterFeature);
+    useMemo(()=>{
+        presenter.init(initial, {
+            submitLabel,
+            allowStructureChange,
+            onSubmit
+        });
+    }, [
+        presenter
+    ]);
+    const { vm } = presenter;
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100%"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            flex: 1,
+            overflowY: "auto",
+            padding: 24
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginBottom: 20
+        }
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Experiment name",
+        value: vm.name,
+        onChange: (value)=>presenter.setName(value),
+        placeholder: "e.g. Homepage CTA test"
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginBottom: 12
+        }
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: "Experiment key",
+        value: vm.key,
+        onChange: (value)=>presenter.setKey(value),
+        placeholder: "homepage-cta-test"
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            gap: 8,
+            background: "#f5f5f5",
+            borderRadius: 8,
+            padding: 12,
+            marginBottom: 28
+        }
+    }, /*#__PURE__*/ react.createElement(info_svg_ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            flexShrink: 0,
+            marginTop: 2
+        }
+    }), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "This key is the identifier reported to your analytics platform to track this experiment. Auto-generated from the name — edit it to override.")), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: 4
+        }
+    }, /*#__PURE__*/ react.createElement(Text, null, "Variants & traffic split"), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 13,
+            fontWeight: 600,
+            color: 100 === vm.total ? "#0f9d58" : "#d93025"
+        }
+    }, "Total ", vm.total, "%")), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginBottom: 16
+        }
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Each variant is an independent copy of the page. Sliders auto-balance to 100%.")), vm.buckets.map((bucket, index)=>/*#__PURE__*/ react.createElement(VariantSplitRow, {
+            key: bucket.id,
+            name: bucket.name,
+            variantKey: bucket.key,
+            description: bucket.description,
+            isControl: bucket.isControl,
+            weight: bucket.weight,
+            variantIndex: vm.buckets.slice(0, index).filter((b)=>!b.isControl).length,
+            onNameChange: (value)=>presenter.changeName(index, value),
+            onKeyChange: (value)=>presenter.changeKey(index, value),
+            onDescriptionChange: (value)=>presenter.changeDescription(index, value),
+            onChange: (value)=>presenter.changeWeight(index, value),
+            onRemove: bucket.isControl || !vm.allowStructureChange || vm.variantCount <= 1 ? void 0 : ()=>presenter.removeVariant(index),
+            removeIcon: /*#__PURE__*/ react.createElement(close_svg_ReactComponent, {
+                style: {
+                    width: 14,
+                    height: 14
+                }
+            })
+        })), vm.allowStructureChange ? /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginTop: 8
+        }
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "tertiary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: "Add variant",
+        onClick: ()=>presenter.addVariant()
+    })) : null), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: 12,
+            padding: 16,
+            borderTop: "1px solid #eee"
+        }
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        text: "Cancel",
+        onClick: onCancel
+    }), /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        text: vm.submitLabel,
+        disabled: !vm.canSubmit,
+        onClick: ()=>presenter.submit()
+    })));
+});
+const ExperimentFormView = (props)=>{
+    const container = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = container.createChildContainer();
+        ExperimentFormPresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(ExperimentFormView_ExperimentFormViewInner, props));
+};
+export { ExperimentFormView };
+
+//# sourceMappingURL=ExperimentFormView.js.map

package/presentation/experiments/ExperimentForm/components/ExperimentFormView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/components/ExperimentFormView.js","sources":["../../../../../src/presentation/experiments/ExperimentForm/components/ExperimentFormView.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { Button, Input, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { VariantSplitRow } from \"./VariantSplitRow.js\";\nimport { ExperimentFormPresenterFeature } from \"../feature.js\";\nimport type {\n    ExperimentFormInitial,\n    NewExperimentPayload\n} from \"../abstractions/ExperimentFormPresenter.js\";\n\ninterface Props {\n    onCancel: () => void;\n    onSubmit: (payload: NewExperimentPayload) => void;\n    initial?: ExperimentFormInitial;\n    submitLabel?: string;\n    /** When false, variants can't be added/removed (used when editing an existing experiment). */\n    allowStructureChange?: boolean;\n}\n\nconst ExperimentFormViewInner = observer(function ExperimentFormViewInner({\n    onCancel,\n    onSubmit,\n    initial,\n    submitLabel = \"Create experiment\",\n    allowStructureChange = true\n}: Props) {\n    const { presenter } = useFeature(ExperimentFormPresenterFeature);\n\n    useMemo(() => {\n        presenter.init(initial, { submitLabel, allowStructureChange, onSubmit });\n    }, [presenter]);\n\n    const { vm } = presenter;\n\n    return (\n        <div style={{ display: \"flex\", flexDirection: \"column\", height: \"100%\" }}>\n            <div style={{ flex: 1, overflowY: \"auto\", padding: 24 }}>\n                <div style={{ marginBottom: 20 }}>\n                    <Input\n                        label=\"Experiment name\"\n                        value={vm.name}\n                        onChange={value => presenter.setName(value)}\n                        placeholder=\"e.g. Homepage CTA test\"\n                    />\n                </div>\n\n                <div style={{ marginBottom: 12 }}>\n                    <Input\n                        label=\"Experiment key\"\n                        value={vm.key}\n                        onChange={value => presenter.setKey(value)}\n                        placeholder=\"homepage-cta-test\"\n                    />\n                </div>\n\n                <div\n                    style={{\n                        display: \"flex\",\n                        gap: 8,\n                        background: \"#f5f5f5\",\n                        borderRadius: 8,\n                        padding: 12,\n                        marginBottom: 28\n                    }}\n                >\n                    <InfoIcon style={{ width: 18, height: 18, flexShrink: 0, marginTop: 2 }} />\n                    <Text size=\"sm\">\n                        This key is the identifier reported to your analytics platform to track this\n                        experiment. Auto-generated from the name — edit it to override.\n                    </Text>\n                </div>\n\n                <div\n                    style={{\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"space-between\",\n                        marginBottom: 4\n                    }}\n                >\n                    <Text>Variants &amp; traffic split</Text>\n                    <span\n                        style={{\n                            fontSize: 13,\n                            fontWeight: 600,\n                            color: vm.total === 100 ? \"#0f9d58\" : \"#d93025\"\n                        }}\n                    >\n                        Total {vm.total}%\n                    </span>\n                </div>\n                <div style={{ marginBottom: 16 }}>\n                    <Text size=\"sm\">\n                        Each variant is an independent copy of the page. Sliders auto-balance to\n                        100%.\n                    </Text>\n                </div>\n\n                {vm.buckets.map((bucket, index) => (\n                    <VariantSplitRow\n                        key={bucket.id}\n                        name={bucket.name}\n                        variantKey={bucket.key}\n                        description={bucket.description}\n                        isControl={bucket.isControl}\n                        weight={bucket.weight}\n                        variantIndex={vm.buckets.slice(0, index).filter(b => !b.isControl).length}\n                        onNameChange={value => presenter.changeName(index, value)}\n                        onKeyChange={value => presenter.changeKey(index, value)}\n                        onDescriptionChange={value => presenter.changeDescription(index, value)}\n                        onChange={value => presenter.changeWeight(index, value)}\n                        onRemove={\n                            bucket.isControl || !vm.allowStructureChange || vm.variantCount <= 1\n                                ? undefined\n                                : () => presenter.removeVariant(index)\n                        }\n                        removeIcon={<CloseIcon style={{ width: 14, height: 14 }} />}\n                    />\n                ))}\n\n                {vm.allowStructureChange ? (\n                    <div style={{ marginTop: 8 }}>\n                        <Button\n                            variant=\"tertiary\"\n                            icon={<AddIcon />}\n                            text=\"Add variant\"\n                            onClick={() => presenter.addVariant()}\n                        />\n                    </div>\n                ) : null}\n            </div>\n\n            <div\n                style={{\n                    display: \"flex\",\n                    justifyContent: \"flex-end\",\n                    gap: 12,\n                    padding: 16,\n                    borderTop: \"1px solid #eee\"\n                }}\n            >\n                <Button variant=\"secondary\" text=\"Cancel\" onClick={onCancel} />\n                <Button\n                    variant=\"primary\"\n                    text={vm.submitLabel}\n                    disabled={!vm.canSubmit}\n                    onClick={() => presenter.submit()}\n                />\n            </div>\n        </div>\n    );\n});\n\nexport const ExperimentFormView = (props: Props) => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n        ExperimentFormPresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <ExperimentFormViewInner {...props} />\n        </DiContainerProvider>\n    );\n};\n"],"names":["ExperimentFormViewInner","observer","onCancel","onSubmit","initial","submitLabel","allowStructureChange","presenter","useFeature","ExperimentFormPresenterFeature","useMemo","vm","Input","value","InfoIcon","Text","bucket","index","VariantSplitRow","b","undefined","CloseIcon","Button","AddIcon","ExperimentFormView","props","container","useContainer","scopedContainer","child","DiContainerProvider"],"mappings":";;;;;;;;;AAuBA,MAAMA,6CAA0BC,SAAS,SAAiC,EACtEC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,cAAc,mBAAmB,EACjCC,uBAAuB,IAAI,EACvB;IACJ,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IAEjCC,QAAQ;QACJH,UAAU,IAAI,CAACH,SAAS;YAAEC;YAAaC;YAAsBH;QAAS;IAC1E,GAAG;QAACI;KAAU;IAEd,MAAM,EAAEI,EAAE,EAAE,GAAGJ;IAEf,OAAO,WAAP,GACI,oBAAC;QAAI,OAAO;YAAE,SAAS;YAAQ,eAAe;YAAU,QAAQ;QAAO;qBACnE,oBAAC;QAAI,OAAO;YAAE,MAAM;YAAG,WAAW;YAAQ,SAAS;QAAG;qBAClD,oBAAC;QAAI,OAAO;YAAE,cAAc;QAAG;qBAC3B,oBAACK,OAAKA;QACF,OAAM;QACN,OAAOD,GAAG,IAAI;QACd,UAAUE,CAAAA,QAASN,UAAU,OAAO,CAACM;QACrC,aAAY;uBAIpB,oBAAC;QAAI,OAAO;YAAE,cAAc;QAAG;qBAC3B,oBAACD,OAAKA;QACF,OAAM;QACN,OAAOD,GAAG,GAAG;QACb,UAAUE,CAAAA,QAASN,UAAU,MAAM,CAACM;QACpC,aAAY;uBAIpB,oBAAC;QACG,OAAO;YACH,SAAS;YACT,KAAK;YACL,YAAY;YACZ,cAAc;YACd,SAAS;YACT,cAAc;QAClB;qBAEA,oBAACC,yBAAQA;QAAC,OAAO;YAAE,OAAO;YAAI,QAAQ;YAAI,YAAY;YAAG,WAAW;QAAE;sBACtE,oBAACC,MAAIA;QAAC,MAAK;OAAK,gKAMpB,oBAAC;QACG,OAAO;YACH,SAAS;YACT,YAAY;YACZ,gBAAgB;YAChB,cAAc;QAClB;qBAEA,oBAACA,MAAIA,MAAC,2CACN,oBAAC;QACG,OAAO;YACH,UAAU;YACV,YAAY;YACZ,OAAOJ,AAAa,QAAbA,GAAG,KAAK,GAAW,YAAY;QAC1C;OACH,UACUA,GAAG,KAAK,EAAC,qBAGxB,oBAAC;QAAI,OAAO;YAAE,cAAc;QAAG;qBAC3B,oBAACI,MAAIA;QAAC,MAAK;OAAK,oFAMnBJ,GAAG,OAAO,CAAC,GAAG,CAAC,CAACK,QAAQC,QAAAA,WAAAA,GACrB,oBAACC,iBAAeA;YACZ,KAAKF,OAAO,EAAE;YACd,MAAMA,OAAO,IAAI;YACjB,YAAYA,OAAO,GAAG;YACtB,aAAaA,OAAO,WAAW;YAC/B,WAAWA,OAAO,SAAS;YAC3B,QAAQA,OAAO,MAAM;YACrB,cAAcL,GAAG,OAAO,CAAC,KAAK,CAAC,GAAGM,OAAO,MAAM,CAACE,CAAAA,IAAK,CAACA,EAAE,SAAS,EAAE,MAAM;YACzE,cAAcN,CAAAA,QAASN,UAAU,UAAU,CAACU,OAAOJ;YACnD,aAAaA,CAAAA,QAASN,UAAU,SAAS,CAACU,OAAOJ;YACjD,qBAAqBA,CAAAA,QAASN,UAAU,iBAAiB,CAACU,OAAOJ;YACjE,UAAUA,CAAAA,QAASN,UAAU,YAAY,CAACU,OAAOJ;YACjD,UACIG,OAAO,SAAS,IAAI,CAACL,GAAG,oBAAoB,IAAIA,GAAG,YAAY,IAAI,IAC7DS,SACA,IAAMb,UAAU,aAAa,CAACU;YAExC,0BAAY,oBAACI,0BAASA;gBAAC,OAAO;oBAAE,OAAO;oBAAI,QAAQ;gBAAG;;aAI7DV,GAAG,oBAAoB,GAAG,WAAH,GACpB,oBAAC;QAAI,OAAO;YAAE,WAAW;QAAE;qBACvB,oBAACW,QAAMA;QACH,SAAQ;QACR,oBAAM,oBAACC,gBAAOA;QACd,MAAK;QACL,SAAS,IAAMhB,UAAU,UAAU;UAG3C,qBAGR,oBAAC;QACG,OAAO;YACH,SAAS;YACT,gBAAgB;YAChB,KAAK;YACL,SAAS;YACT,WAAW;QACf;qBAEA,oBAACe,QAAMA;QAAC,SAAQ;QAAY,MAAK;QAAS,SAASpB;sBACnD,oBAACoB,QAAMA;QACH,SAAQ;QACR,MAAMX,GAAG,WAAW;QACpB,UAAU,CAACA,GAAG,SAAS;QACvB,SAAS,IAAMJ,UAAU,MAAM;;AAKnD;AAEO,MAAMiB,qBAAqB,CAACC;IAC/B,MAAMC,YAAYC;IAElB,MAAMC,kBAAkBlB,QAAQ;QAC5B,MAAMmB,QAAQH,UAAU,oBAAoB;QAC5CjB,+BAA+B,QAAQ,CAACoB;QACxC,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACC,qBAAmBA;QAAC,WAAWF;qBAC5B,oBAAC5B,4CAA4ByB;AAGzC"}

package/presentation/experiments/ExperimentForm/components/VariantSplitRow.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface Props {
+    name: string;
+    variantKey: string;
+    description: string;
+    isControl: boolean;
+    weight: number;
+    variantIndex: number;
+    onNameChange: (value: string) => void;
+    onKeyChange: (value: string) => void;
+    onDescriptionChange: (value: string) => void;
+    onChange: (value: number) => void;
+    onRemove?: () => void;
+    removeIcon: React.ReactNode;
+}
+export declare const VariantSplitRow: ({ name, variantKey, description, isControl, weight, variantIndex, onNameChange, onKeyChange, onDescriptionChange, onChange, onRemove, removeIcon }: Props) => React.JSX.Element;
+export {};

package/presentation/experiments/ExperimentForm/components/VariantSplitRow.js

@@ -0,0 +1,122 @@
+import react from "react";
+import { IconButton, Input } from "@webiny/admin-ui";
+import { bucketColor } from "../../shared/variantColors.js";
+const Field = ({ label, children })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginTop: 12
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            fontSize: 11,
+            fontWeight: 600,
+            letterSpacing: 0.5,
+            textTransform: "uppercase",
+            color: "#6b7280",
+            marginBottom: 6
+        }
+    }, label), children);
+const VariantSplitRow = ({ name, variantKey, description, isControl, weight, variantIndex, onNameChange, onKeyChange, onDescriptionChange, onChange, onRemove, removeIcon })=>{
+    const color = bucketColor(isControl, variantIndex);
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            border: "1px solid #eee",
+            borderRadius: 10,
+            padding: 16,
+            marginBottom: 12
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            background: color,
+            flexShrink: 0
+        }
+    }), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontWeight: 600
+        }
+    }, isControl ? "Control" : name || "Variant")), isControl ? /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 12,
+            color: "#6b7280",
+            background: "#f2f2f2",
+            borderRadius: 6,
+            padding: "2px 8px",
+            whiteSpace: "nowrap"
+        }
+    }, "Current page") : onRemove ? /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "sm",
+        icon: removeIcon,
+        onClick: onRemove
+    }) : null), /*#__PURE__*/ react.createElement(Field, {
+        label: "Name"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        value: name,
+        onChange: onNameChange,
+        disabled: isControl,
+        placeholder: "Variant name"
+    })), /*#__PURE__*/ react.createElement(Field, {
+        label: "Key"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        value: variantKey,
+        onChange: onKeyChange,
+        placeholder: "variant-key"
+    })), /*#__PURE__*/ react.createElement(Field, {
+        label: "Description"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        value: description,
+        onChange: onDescriptionChange,
+        placeholder: "Optional"
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            marginTop: 16
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 11,
+            fontWeight: 600,
+            letterSpacing: 0.5,
+            textTransform: "uppercase",
+            color: "#6b7280"
+        }
+    }, "Traffic"), /*#__PURE__*/ react.createElement("input", {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1,
+        value: weight,
+        onChange: (event)=>onChange(Number(event.target.value)),
+        style: {
+            flex: 1,
+            accentColor: color
+        }
+    }), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            width: 44,
+            textAlign: "right",
+            fontWeight: 600,
+            fontSize: 14
+        }
+    }, weight, "%")));
+};
+export { VariantSplitRow };
+
+//# sourceMappingURL=VariantSplitRow.js.map

package/presentation/experiments/ExperimentForm/components/VariantSplitRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/components/VariantSplitRow.js","sources":["../../../../../src/presentation/experiments/ExperimentForm/components/VariantSplitRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Input } from \"@webiny/admin-ui\";\nimport { bucketColor } from \"../../shared/variantColors.js\";\n\ninterface FieldProps {\n    label: string;\n    children: React.ReactNode;\n}\n\nconst Field = ({ label, children }: FieldProps) => {\n    return (\n        <div style={{ marginTop: 12 }}>\n            <div\n                style={{\n                    fontSize: 11,\n                    fontWeight: 600,\n                    letterSpacing: 0.5,\n                    textTransform: \"uppercase\",\n                    color: \"#6b7280\",\n                    marginBottom: 6\n                }}\n            >\n                {label}\n            </div>\n            {children}\n        </div>\n    );\n};\n\ninterface Props {\n    name: string;\n    variantKey: string;\n    description: string;\n    isControl: boolean;\n    weight: number;\n    variantIndex: number;\n    onNameChange: (value: string) => void;\n    onKeyChange: (value: string) => void;\n    onDescriptionChange: (value: string) => void;\n    onChange: (value: number) => void;\n    onRemove?: () => void;\n    removeIcon: React.ReactNode;\n}\n\nexport const VariantSplitRow = ({\n    name,\n    variantKey,\n    description,\n    isControl,\n    weight,\n    variantIndex,\n    onNameChange,\n    onKeyChange,\n    onDescriptionChange,\n    onChange,\n    onRemove,\n    removeIcon\n}: Props) => {\n    const color = bucketColor(isControl, variantIndex);\n\n    return (\n        <div\n            style={{\n                border: \"1px solid #eee\",\n                borderRadius: 10,\n                padding: 16,\n                marginBottom: 12\n            }}\n        >\n            <div\n                style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"space-between\",\n                    gap: 8\n                }}\n            >\n                <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                    <span\n                        style={{\n                            width: 10,\n                            height: 10,\n                            borderRadius: \"50%\",\n                            background: color,\n                            flexShrink: 0\n                        }}\n                    />\n                    <span style={{ fontWeight: 600 }}>\n                        {isControl ? \"Control\" : name || \"Variant\"}\n                    </span>\n                </div>\n                {isControl ? (\n                    <span\n                        style={{\n                            fontSize: 12,\n                            color: \"#6b7280\",\n                            background: \"#f2f2f2\",\n                            borderRadius: 6,\n                            padding: \"2px 8px\",\n                            whiteSpace: \"nowrap\"\n                        }}\n                    >\n                        Current page\n                    </span>\n                ) : onRemove ? (\n                    <IconButton variant=\"ghost\" size=\"sm\" icon={removeIcon} onClick={onRemove} />\n                ) : null}\n            </div>\n\n            <Field label=\"Name\">\n                <Input\n                    value={name}\n                    onChange={onNameChange}\n                    disabled={isControl}\n                    placeholder=\"Variant name\"\n                />\n            </Field>\n\n            <Field label=\"Key\">\n                <Input value={variantKey} onChange={onKeyChange} placeholder=\"variant-key\" />\n            </Field>\n\n            <Field label=\"Description\">\n                <Input value={description} onChange={onDescriptionChange} placeholder=\"Optional\" />\n            </Field>\n\n            <div style={{ display: \"flex\", alignItems: \"center\", gap: 12, marginTop: 16 }}>\n                <span\n                    style={{\n                        fontSize: 11,\n                        fontWeight: 600,\n                        letterSpacing: 0.5,\n                        textTransform: \"uppercase\",\n                        color: \"#6b7280\"\n                    }}\n                >\n                    Traffic\n                </span>\n                <input\n                    type=\"range\"\n                    min={0}\n                    max={100}\n                    step={1}\n                    value={weight}\n                    onChange={event => onChange(Number(event.target.value))}\n                    style={{ flex: 1, accentColor: color }}\n                />\n                <span style={{ width: 44, textAlign: \"right\", fontWeight: 600, fontSize: 14 }}>\n                    {weight}%\n                </span>\n            </div>\n        </div>\n    );\n};\n"],"names":["Field","label","children","VariantSplitRow","name","variantKey","description","isControl","weight","variantIndex","onNameChange","onKeyChange","onDescriptionChange","onChange","onRemove","removeIcon","color","bucketColor","IconButton","Input","event","Number"],"mappings":";;;AASA,MAAMA,QAAQ,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAc,GACnC,WAAP,GACI,oBAAC;QAAI,OAAO;YAAE,WAAW;QAAG;qBACxB,oBAAC;QACG,OAAO;YACH,UAAU;YACV,YAAY;YACZ,eAAe;YACf,eAAe;YACf,OAAO;YACP,cAAc;QAClB;OAECD,QAEJC;AAoBN,MAAMC,kBAAkB,CAAC,EAC5BC,IAAI,EACJC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,YAAY,EACZC,YAAY,EACZC,WAAW,EACXC,mBAAmB,EACnBC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACN;IACJ,MAAMC,QAAQC,YAAYV,WAAWE;IAErC,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,QAAQ;YACR,cAAc;YACd,SAAS;YACT,cAAc;QAClB;qBAEA,oBAAC;QACG,OAAO;YACH,SAAS;YACT,YAAY;YACZ,gBAAgB;YAChB,KAAK;QACT;qBAEA,oBAAC;QAAI,OAAO;YAAE,SAAS;YAAQ,YAAY;YAAU,KAAK;QAAE;qBACxD,oBAAC;QACG,OAAO;YACH,OAAO;YACP,QAAQ;YACR,cAAc;YACd,YAAYO;YACZ,YAAY;QAChB;sBAEJ,oBAAC;QAAK,OAAO;YAAE,YAAY;QAAI;OAC1BT,YAAY,YAAYH,QAAQ,aAGxCG,YAAY,WAAZA,GACG,oBAAC;QACG,OAAO;YACH,UAAU;YACV,OAAO;YACP,YAAY;YACZ,cAAc;YACd,SAAS;YACT,YAAY;QAChB;OACH,kBAGDO,WAAW,WAAXA,GACA,oBAACI,YAAUA;QAAC,SAAQ;QAAQ,MAAK;QAAK,MAAMH;QAAY,SAASD;SACjE,qBAGR,oBAACd,OAAKA;QAAC,OAAM;qBACT,oBAACmB,OAAKA;QACF,OAAOf;QACP,UAAUM;QACV,UAAUH;QACV,aAAY;uBAIpB,oBAACP,OAAKA;QAAC,OAAM;qBACT,oBAACmB,OAAKA;QAAC,OAAOd;QAAY,UAAUM;QAAa,aAAY;uBAGjE,oBAACX,OAAKA;QAAC,OAAM;qBACT,oBAACmB,OAAKA;QAAC,OAAOb;QAAa,UAAUM;QAAqB,aAAY;uBAG1E,oBAAC;QAAI,OAAO;YAAE,SAAS;YAAQ,YAAY;YAAU,KAAK;YAAI,WAAW;QAAG;qBACxE,oBAAC;QACG,OAAO;YACH,UAAU;YACV,YAAY;YACZ,eAAe;YACf,eAAe;YACf,OAAO;QACX;OACH,0BAGD,oBAAC;QACG,MAAK;QACL,KAAK;QACL,KAAK;QACL,MAAM;QACN,OAAOJ;QACP,UAAUY,CAAAA,QAASP,SAASQ,OAAOD,MAAM,MAAM,CAAC,KAAK;QACrD,OAAO;YAAE,MAAM;YAAG,aAAaJ;QAAM;sBAEzC,oBAAC;QAAK,OAAO;YAAE,OAAO;YAAI,WAAW;YAAS,YAAY;YAAK,UAAU;QAAG;OACvER,QAAO;AAK5B"}

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

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

package/presentation/experiments/ExperimentForm/feature.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentForm/feature.js","sources":["../../../../src/presentation/experiments/ExperimentForm/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { ExperimentFormPresenter as PresenterAbstraction } from \"./abstractions/ExperimentFormPresenter.js\";\nimport { ExperimentFormPresenter } from \"./ExperimentFormPresenter.js\";\n\nexport const ExperimentFormPresenterFeature = createFeature({\n    name: \"WebsiteBuilder/ExperimentFormPresenter\",\n    register(container) {\n        container.register(ExperimentFormPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(PresenterAbstraction)\n        };\n    }\n});\n"],"names":["ExperimentFormPresenterFeature","createFeature","container","ExperimentFormPresenter","PresenterAbstraction"],"mappings":";;;AAIO,MAAMA,iCAAiCC,cAAc;IACxD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC,6DAAyB,gBAAgB;IAChE;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ"}

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

@@ -0,0 +1,3 @@
+export { ExperimentFormView } from "./components/ExperimentFormView.js";
+export { ExperimentFormPresenter } from "./abstractions/ExperimentFormPresenter.js";
+export { ExperimentFormPresenterFeature } from "./feature.js";

package/presentation/experiments/ExperimentForm/index.js

@@ -0,0 +1,3 @@
+export { ExperimentFormView } from "./components/ExperimentFormView.js";
+export { ExperimentFormPresenter } from "./abstractions/ExperimentFormPresenter.js";
+export { ExperimentFormPresenterFeature } from "./feature.js";

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

@@ -0,0 +1,18 @@
+import { ExperimentsGateway } from "../../../features/experiments/index.js";
+import type { ExperimentDto, VariantDto } from "../../../features/experiments/index.js";
+import { type IExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+/**
+ * Thin gateway-orchestration data source for the editor-embedded experiments UI: loads a page's
+ * experiments, a single experiment's variants, and the runtime kill-switch state.
+ */
+declare class ExperimentsEditorDataSourceImpl implements IExperimentsEditorDataSource {
+    private readonly gateway;
+    constructor(gateway: ExperimentsGateway.Interface);
+    listExperiments(pageEntryId: string): Promise<ExperimentDto[]>;
+    listVariants(experimentId: string): Promise<VariantDto[]>;
+    getExperimentPaused(experimentEntryId: string): Promise<boolean>;
+}
+export declare const ExperimentsEditorDataSource: typeof ExperimentsEditorDataSourceImpl & {
+    __abstraction: import("@webiny/di").Abstraction<IExperimentsEditorDataSource>;
+};
+export {};

package/presentation/experiments/ExperimentsEditor/ExperimentsEditorDataSource.js

@@ -0,0 +1,25 @@
+import { ExperimentsGateway } from "../../../features/experiments/index.js";
+import { ExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+class ExperimentsEditorDataSourceImpl {
+    constructor(gateway){
+        this.gateway = gateway;
+    }
+    async listExperiments(pageEntryId) {
+        return this.gateway.listExperiments(pageEntryId).catch(()=>[]);
+    }
+    async listVariants(experimentId) {
+        return this.gateway.listVariants(experimentId).catch(()=>[]);
+    }
+    async getExperimentPaused(experimentEntryId) {
+        return this.gateway.getExperimentPaused(experimentEntryId).catch(()=>false);
+    }
+}
+const ExperimentsEditorDataSource_ExperimentsEditorDataSource = ExperimentsEditorDataSource.createImplementation({
+    implementation: ExperimentsEditorDataSourceImpl,
+    dependencies: [
+        ExperimentsGateway
+    ]
+});
+export { ExperimentsEditorDataSource_ExperimentsEditorDataSource as ExperimentsEditorDataSource };
+
+//# sourceMappingURL=ExperimentsEditorDataSource.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/ExperimentsEditorDataSource.js","sources":["../../../../src/presentation/experiments/ExperimentsEditor/ExperimentsEditorDataSource.ts"],"sourcesContent":["import { ExperimentsGateway } from \"~/features/experiments/index.js\";\nimport type { ExperimentDto, VariantDto } from \"~/features/experiments/index.js\";\nimport {\n    ExperimentsEditorDataSource as Abstraction,\n    type IExperimentsEditorDataSource\n} from \"./abstractions/ExperimentsEditorDataSource.js\";\n\n/**\n * Thin gateway-orchestration data source for the editor-embedded experiments UI: loads a page's\n * experiments, a single experiment's variants, and the runtime kill-switch state.\n */\nclass ExperimentsEditorDataSourceImpl implements IExperimentsEditorDataSource {\n    constructor(private readonly gateway: ExperimentsGateway.Interface) {}\n\n    async listExperiments(pageEntryId: string): Promise<ExperimentDto[]> {\n        return this.gateway.listExperiments(pageEntryId).catch(() => [] as ExperimentDto[]);\n    }\n\n    async listVariants(experimentId: string): Promise<VariantDto[]> {\n        return this.gateway.listVariants(experimentId).catch(() => [] as VariantDto[]);\n    }\n\n    async getExperimentPaused(experimentEntryId: string): Promise<boolean> {\n        return this.gateway.getExperimentPaused(experimentEntryId).catch(() => false);\n    }\n}\n\nexport const ExperimentsEditorDataSource = Abstraction.createImplementation({\n    implementation: ExperimentsEditorDataSourceImpl,\n    dependencies: [ExperimentsGateway]\n});\n"],"names":["ExperimentsEditorDataSourceImpl","gateway","pageEntryId","experimentId","experimentEntryId","ExperimentsEditorDataSource","Abstraction","ExperimentsGateway"],"mappings":";;AAWA,MAAMA;IACF,YAA6BC,OAAqC,CAAE;aAAvCA,OAAO,GAAPA;IAAwC;IAErE,MAAM,gBAAgBC,WAAmB,EAA4B;QACjE,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe,CAACA,aAAa,KAAK,CAAC,IAAM,EAAE;IACnE;IAEA,MAAM,aAAaC,YAAoB,EAAyB;QAC5D,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAACA,cAAc,KAAK,CAAC,IAAM,EAAE;IACjE;IAEA,MAAM,oBAAoBC,iBAAyB,EAAoB;QACnE,OAAO,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAACA,mBAAmB,KAAK,CAAC,IAAM;IAC3E;AACJ;AAEO,MAAMC,0DAA8BC,4BAAAA,oBAAgC,CAAC;IACxE,gBAAgBN;IAChB,cAAc;QAACO;KAAmB;AACtC"}

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

@@ -0,0 +1,67 @@
+import { ExperimentsGateway } from "../../../features/experiments/index.js";
+import type { ExperimentDto, UpdateExperimentInput, VariantContentDto, VariantDto } from "../../../features/experiments/index.js";
+import type { NewExperimentPayload } from "../ExperimentForm/abstractions/ExperimentFormPresenter.js";
+import { type IExperimentsEditorPresenter, type IExperimentsEditorViewModel } from "./abstractions/ExperimentsEditorPresenter.js";
+import { ExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+declare class ExperimentsEditorPresenterImpl implements IExperimentsEditorPresenter {
+    private readonly gateway;
+    private readonly dataSource;
+    private baselineRevisionId;
+    private pageEntryId;
+    private experiments;
+    private selectedExperimentId;
+    private selectedVariantId;
+    private variants;
+    private paused;
+    private drawerOpen;
+    private editTarget;
+    private loadToken;
+    constructor(gateway: ExperimentsGateway.Interface, dataSource: ExperimentsEditorDataSource.Interface);
+    private get selectedExperiment();
+    private get selectedVariant();
+    private get variantOptions();
+    private get currentBucket();
+    private get runningExperiment();
+    private get switcherItems();
+    get vm(): IExperimentsEditorViewModel;
+    init(pageRevisionId: string): void;
+    reload(): Promise<void>;
+    selectExperiment(id: string | null): void;
+    selectVariant(variantId: string | null): void;
+    /**
+     * On the published (read-only) view, surface the running experiment and keep it selected so the
+     * preview toolbar tracks it. Mirrors the old read-only auto-select effect.
+     */
+    syncReadOnlySelection(isReadOnly: boolean): void;
+    openManage(): void;
+    editExperiment(experiment: ExperimentDto): void;
+    closeDrawer(): void;
+    /**
+     * Load the variants and kill-switch state for the currently selected experiment. A load token
+     * guards against a stale response overwriting a newer selection.
+     */
+    private loadSelectedExperiment;
+    pause(): Promise<void>;
+    resume(): Promise<void>;
+    /**
+     * Activate an experiment. Only one experiment can run on a page at a time, so any other running
+     * experiment (from the same page) is stopped first.
+     */
+    activate(experimentId: string): Promise<ExperimentDto>;
+    deactivate(experimentId: string): Promise<ExperimentDto>;
+    /**
+     * Persist a new experiment: create the experiment, then each variant (whose content the API
+     * copies from the baseline) marked ready, then write the traffic split now that we have the
+     * variant ids. The experiment key is carried in the analytics config.
+     */
+    createExperiment(payload: NewExperimentPayload): Promise<ExperimentDto>;
+    updateExperiment(id: string, input: UpdateExperimentInput): Promise<ExperimentDto>;
+    /** Delete an experiment along with its variants. */
+    deleteExperiment(experimentId: string): Promise<boolean>;
+    getVariant(id: string): Promise<VariantContentDto | null>;
+    saveVariant(revisionId: string, doc: Record<string, any>): Promise<VariantDto>;
+}
+export declare const ExperimentsEditorPresenter: typeof ExperimentsEditorPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<IExperimentsEditorPresenter>;
+};
+export {};