@delmaredigital/payload-experiments 0.3.0-rc.1 → 0.4.0-rc.1

package/dist/options.js

@@ -1,4 +1,4 @@
-import { contrast, deriveAccent } from './ui/accent.js';
+import { validateAccent } from './ui/accent.js';
 import { DEFAULT_MAX_BODY_BYTES } from './constants.js';
 const normalisedCollections = new WeakMap();
 /** Resolve once per registration list; every consumer shares the same field defaults. */ export function puckCollections(options) {
@@ -49,7 +49,8 @@ export function resolveOptions(input) {
                 if (![
                     'block',
                     'document',
-                    'setting'
+                    'setting',
+                    'page'
                 ].includes(key)) throw new Error(`Unknown experiments admin.descriptions option: ${key}`);
                 if (value !== undefined && typeof value !== 'string') throw new Error(`Experiments admin.descriptions.${key} must be a string`);
             }
@@ -62,20 +63,38 @@ export function resolveOptions(input) {
             if (!entry || typeof entry.slug !== 'string' || !entry.slug.trim() || slugs.has(entry.slug) || typeof entry.pathOf !== 'function' || typeof entry.findByPath !== 'function') {
                 throw new Error('Experiments pages.collections requires unique slugs, pathOf and findByPath functions');
             }
+            if (entry.contentOf !== undefined && typeof entry.contentOf !== 'function') throw new Error('Experiments contentOf must be a function');
+            for (const [key, max] of [
+                [
+                    'copyHint',
+                    200
+                ],
+                [
+                    'copyLabel',
+                    40
+                ]
+            ]){
+                const value = entry[key];
+                if (value !== undefined && (typeof value !== 'string' || !value.trim() || value.length > max)) throw new Error(`Experiments ${key} must be a non-empty string of at most ${max} characters`);
+            }
+            if (entry.copyUrl !== undefined && !validCopyUrl(entry.copyUrl)) throw new Error('Experiments copyUrl must be a root-relative path');
+            if (entry.copyLabel !== undefined && entry.copyUrl === undefined) throw new Error('Experiments copyLabel requires copyUrl');
+            slugs.add(entry.slug);
+        }
+    }
+    if (input.blocks !== undefined) {
+        if (!input.blocks || !Array.isArray(input.blocks.collections) || !input.blocks.collections.length) throw new Error('Experiments blocks.collections must be a non-empty array');
+        const slugs = new Set();
+        for (const entry of input.blocks.collections){
+            if (!entry || typeof entry.slug !== 'string' || !entry.slug.trim() || slugs.has(entry.slug) || typeof entry.field !== 'string' || !entry.field.trim() || entry.blockSlug !== undefined && (typeof entry.blockSlug !== 'string' || !entry.blockSlug.trim()) || entry.appliesTo !== undefined && typeof entry.appliesTo !== 'function') throw new Error('Invalid experiments blocks collection');
+            if (puckCollections(input).some((puck)=>puck.slug === entry.slug) && !entry.appliesTo) throw new Error('A collection registered in puck and blocks requires appliesTo');
             slugs.add(entry.slug);
         }
     }
     if (input.theme !== undefined) {
         if (!input.theme || typeof input.theme !== 'object' || Array.isArray(input.theme)) throw new Error('Experiments theme must be an object');
         for (const key of Object.keys(input.theme))if (key !== 'accent') throw new Error(`Unknown experiments theme option: ${key}`);
-        const accent = input.theme.accent;
-        if (accent !== undefined && accent !== '') {
-            if (typeof accent !== 'string' || !/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(accent)) throw new Error('Experiments theme.accent must be a CSS hex colour (#rgb or #rrggbb)');
-            for (const [mode, set] of Object.entries(deriveAccent(accent))){
-                const ratio = contrast(set.accent, set.fg);
-                if (ratio < 4.5) throw new Error(`Experiments theme.accent ${accent}: ${mode} foreground contrast ${ratio.toFixed(2)}:1 is below 4.5:1`);
-            }
-        }
+        validateAccent(input.theme.accent);
     }
     const ids = new Set();
     for (const point of input.flagPoints ?? []){
@@ -157,3 +176,17 @@ export function resolveOptions(input) {
         }
     };
 }
+function validCopyUrl(value) {
+    if (typeof value !== 'string' || !/^\/(?![/\\])/.test(value) || /[\s\x00-\x1f\x7f]/.test(value)) return false;
+    try {
+        return new URL(value, 'http://x').origin === 'http://x';
+    } catch  {
+        return false;
+    }
+}
+/** One published-row rule shared by scans, bindings, writes and editor links. */ export function documentEditor(options, collection, doc) {
+    const block = options.blocks?.collections.find((entry)=>entry.slug === collection);
+    const puck = options.puck?.enabled !== false && puckCollections(options).some((entry)=>entry.slug === collection);
+    if (block && (block.appliesTo ? block.appliesTo(doc) : true)) return 'blocks';
+    return puck ? 'puck' : 'page';
+}

package/dist/plugin.js

@@ -1,9 +1,10 @@
 import { buildCollections } from './collections/index.js';
 import { buildEndpoints } from './endpoints/index.js';
 import { contentChangesBeforeHook, contentChangesHook } from './hooks/contentChanges.js';
-import { pageGuardAfterOperation, pageGuardBeforeChange, pageGuardBeforeDelete, pageGuardBeforeOperation } from './hooks/pageGuard.js';
+import { pageGuardAfterChange, pageGuardAfterOperation, pageGuardBeforeChange, pageGuardBeforeDelete, pageGuardBeforeOperation } from './hooks/pageGuard.js';
 import { createOnInit } from './onInit.js';
 import { puckCollections, resolveOptions } from './options.js';
+import { injectTestBlock } from './admin/blocks/inject.js';
 import * as paths from './admin/paths.js';
 export function createExperimentsPlugin(input) {
     const options = resolveOptions(input);
@@ -15,6 +16,9 @@ export function createExperimentsPlugin(input) {
         for (const { slug } of options.pages?.collections ?? []){
             if (!config.collections?.some((collection)=>collection.slug === slug)) throw new Error(`Unknown experiments page collection: ${slug}`);
         }
+        for (const { slug } of options.blocks?.collections ?? []){
+            if (!config.collections?.some((collection)=>collection.slug === slug)) throw new Error(`Unknown experiments blocks collection: ${slug}`);
+        }
         // The frozen factories consume registration/access metadata, never TUser callbacks.
         // Erase the user subtype only at this non-generic factory boundary.
         const { collections, globals } = buildCollections(options);
@@ -30,6 +34,10 @@ export function createExperimentsPlugin(input) {
                     xpTestsSurface: {
                         path: paths.XP_TESTS_SURFACE,
                         type: 'component'
+                    },
+                    xpTestsNav: {
+                        path: paths.XP_TESTS_NAV_CLIENT,
+                        type: 'component'
                     }
                 },
                 components: {
@@ -55,40 +63,49 @@ export function createExperimentsPlugin(input) {
                 ...(config.collections ?? []).map((collection)=>{
                     const puck = options.puck?.enabled && registrations.some((entry)=>entry.slug === collection.slug);
                     const page = options.pages?.collections.some((entry)=>entry.slug === collection.slug);
-                    if (!puck && !page) return collection;
+                    const blocks = options.blocks?.collections.find((entry)=>entry.slug === collection.slug);
+                    if (!puck && !page && !blocks) return collection;
                     return {
                         ...collection,
+                        fields: [
+                            ...page ? [
+                                {
+                                    name: 'xpPlacementStatus',
+                                    type: 'ui',
+                                    admin: {
+                                        position: 'sidebar',
+                                        components: {
+                                            Field: paths.XP_PLACEMENT_STATUS
+                                        }
+                                    }
+                                }
+                            ] : [],
+                            ...blocks ? injectTestBlock(collection.fields, blocks) : collection.fields
+                        ],
                         hooks: {
                             ...collection.hooks,
                             beforeChange: [
                                 ...collection.hooks?.beforeChange ?? [],
-                                ...page ? [
-                                    pageGuardBeforeChange
-                                ] : [],
-                                ...puck ? [
-                                    contentChangesBeforeHook
-                                ] : []
+                                pageGuardBeforeChange,
+                                contentChangesBeforeHook
+                            ],
+                            beforeOperation: [
+                                ...collection.hooks?.beforeOperation ?? [],
+                                pageGuardBeforeOperation
+                            ],
+                            beforeDelete: [
+                                ...collection.hooks?.beforeDelete ?? [],
+                                pageGuardBeforeDelete
+                            ],
+                            afterOperation: [
+                                pageGuardAfterOperation,
+                                ...collection.hooks?.afterOperation ?? []
                             ],
-                            ...page ? {
-                                beforeOperation: [
-                                    ...collection.hooks?.beforeOperation ?? [],
-                                    pageGuardBeforeOperation
-                                ],
-                                beforeDelete: [
-                                    ...collection.hooks?.beforeDelete ?? [],
-                                    pageGuardBeforeDelete
-                                ],
-                                afterOperation: [
-                                    pageGuardAfterOperation,
-                                    ...collection.hooks?.afterOperation ?? []
-                                ]
-                            } : {},
-                            ...puck ? {
-                                afterChange: [
-                                    ...collection.hooks?.afterChange ?? [],
-                                    contentChangesHook
-                                ]
-                            } : {}
+                            afterChange: [
+                                ...collection.hooks?.afterChange ?? [],
+                                pageGuardAfterChange,
+                                contentChangesHook
+                            ]
                         }
                     };
                 }),

package/dist/puck/ExperimentPicker.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
+import { fetchAllDocs } from '../lib/fetchAllDocs.js';
+import { usePuckRoutes } from './hostContext.js';
 import { pickerCopy } from './copy.js';
 function isExperimentOption(value) {
     if (!value || typeof value !== 'object') return false;
@@ -8,14 +10,17 @@ function isExperimentOption(value) {
     return (typeof doc.id === 'string' || typeof doc.id === 'number') && typeof doc.slug === 'string' && typeof doc.name === 'string' && typeof doc.status === 'string' && Object.hasOwn(pickerCopy.statuses, doc.status);
 }
 export function ExperimentPicker({ value, onChange }) {
+    const { api } = usePuckRoutes();
+    const id = useId();
     const [experiments, setExperiments] = useState([]);
+    const [search, setSearch] = useState('');
     const [state, setState] = useState('loading');
     useEffect(()=>{
         let active = true;
         const controller = new AbortController();
         async function load() {
             try {
-                const response = await fetch('/api/xp-experiments?where[kind][equals]=block&depth=0&limit=100&sort=-updatedAt', {
+                const response = await fetchAllDocs(`${api}/xp-experiments?where[kind][equals]=block&depth=0&sort=id`, {
                     credentials: 'include',
                     signal: controller.signal
                 });
@@ -24,13 +29,7 @@ export function ExperimentPicker({ value, onChange }) {
                     setState(response.status === 403 ? 'forbidden' : 'error');
                     return;
                 }
-                const data = await response.json();
-                if (!active) return;
-                if (!data || typeof data !== 'object' || !('docs' in data) || !Array.isArray(data.docs)) {
-                    setState('error');
-                    return;
-                }
-                setExperiments(data.docs.filter(isExperimentOption));
+                setExperiments(response.docs.filter(isExperimentOption).sort((a, b)=>(Date.parse(b.updatedAt ?? '') || 0) - (Date.parse(a.updatedAt ?? '') || 0)));
                 setState('ready');
             } catch  {
                 if (active) setState('error');
@@ -41,12 +40,38 @@ export function ExperimentPicker({ value, onChange }) {
             active = false;
             controller.abort();
         };
-    }, []);
+    }, [
+        api
+    ]);
     const selected = value ? String(value.id) : '';
+    const query = search.trim().toLocaleLowerCase('en-US');
+    const visible = experiments.filter((doc)=>String(doc.id) === selected || doc.name.toLocaleLowerCase('en-US').includes(query) || doc.slug.toLocaleLowerCase('en-US').includes(query));
     return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-ui-field",
         children: [
+            experiments.length > 8 ? /*#__PURE__*/ _jsxs("div", {
+                className: "xp-ui-field",
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        htmlFor: `${id}-search`,
+                        children: pickerCopy.search
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        id: `${id}-search`,
+                        type: "search",
+                        className: "xp-ui-input",
+                        value: search,
+                        onChange: (event)=>setSearch(event.currentTarget.value)
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx("label", {
+                htmlFor: id,
+                children: pickerCopy.label
+            }),
             /*#__PURE__*/ _jsxs("select", {
-                "aria-label": pickerCopy.label,
+                id: id,
+                className: "xp-ui-input xp-ui-select",
                 value: selected,
                 disabled: state === 'loading',
                 onChange: (event)=>{
@@ -65,7 +90,7 @@ export function ExperimentPicker({ value, onChange }) {
                         value: selected,
                         children: value.slug
                     }) : null,
-                    experiments.map((doc)=>/*#__PURE__*/ _jsxs("option", {
+                    visible.map((doc)=>/*#__PURE__*/ _jsxs("option", {
                             value: String(doc.id),
                             children: [
                                 doc.name,
@@ -75,13 +100,19 @@ export function ExperimentPicker({ value, onChange }) {
                         }, doc.id))
                 ]
             }),
-            state === 'loading' ? /*#__PURE__*/ _jsx("p", {
+            state === 'loading' ? /*#__PURE__*/ _jsx("div", {
+                className: "xp-ui-banner",
                 role: "status",
-                children: pickerCopy.loading
+                children: /*#__PURE__*/ _jsx("p", {
+                    children: pickerCopy.loading
+                })
             }) : null,
-            state === 'error' || state === 'forbidden' ? /*#__PURE__*/ _jsx("p", {
+            state === 'error' || state === 'forbidden' ? /*#__PURE__*/ _jsx("div", {
+                className: "xp-ui-banner xp-ui-banner--error",
                 role: "alert",
-                children: pickerCopy[state]
+                children: /*#__PURE__*/ _jsx("p", {
+                    children: pickerCopy[state]
+                })
             }) : null
         ]
     });

package/dist/puck/ExperimentSlot.d.ts

@@ -1,3 +1,53 @@
 import type { ComponentConfig } from '@puckeditor/core';
 import type { ExperimentSlotProps } from '../types/puck.js';
-export declare const ExperimentSlot: ComponentConfig<ExperimentSlotProps>;
+import { type PuckRoutes } from './routes.js';
+export declare function createExperimentSlot({ routes: inputRoutes }?: {
+    routes?: PuckRoutes;
+}): ComponentConfig<ExperimentSlotProps>;
+export declare const ExperimentSlot: {
+    render: import("@puckeditor/core").PuckComponent<ExperimentSlotProps>;
+    label?: string;
+    defaultProps?: ExperimentSlotProps | undefined;
+    fields?: import("@puckeditor/core").Fields<ExperimentSlotProps, {}> | undefined;
+    renderFields?: ((props: {
+        fields: Partial<Record<keyof ExperimentSlotProps, import("react").ReactNode>>;
+    }) => import("react").ReactElement) | undefined;
+    permissions?: Partial<import("@puckeditor/core").Permissions>;
+    inline?: boolean;
+    resolveFields?: ((data: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type">, params: {
+        changed: Partial<Record<keyof ExperimentSlotProps, boolean> & {
+            id: string;
+        }>;
+        fields: import("@puckeditor/core").Fields<ExperimentSlotProps, {}>;
+        lastFields: import("@puckeditor/core").Fields<ExperimentSlotProps, {}>;
+        lastData: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type"> | null;
+        metadata: import("@puckeditor/core").ComponentMetadata;
+        appState: import("@puckeditor/core").AppState;
+        parent: import("@puckeditor/core").ComponentData | null;
+    }) => import("@puckeditor/core").Fields<ExperimentSlotProps, {}> | Promise<import("@puckeditor/core").Fields<ExperimentSlotProps, {}>>) | undefined;
+    resolveData?: ((data: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type">, params: {
+        changed: Partial<Record<keyof ExperimentSlotProps, boolean> & {
+            id: string;
+        }>;
+        lastData: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type"> | null;
+        metadata: import("@puckeditor/core").ComponentMetadata;
+        trigger: import("@puckeditor/core").ResolveDataTrigger;
+        parent: import("@puckeditor/core").ComponentData | null;
+        root: import("@puckeditor/core").RootData;
+    }) => (Omit<Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type">, "props"> & {
+        props?: Partial<ExperimentSlotProps> | undefined;
+    }) | Promise<Omit<Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type">, "props"> & {
+        props?: Partial<ExperimentSlotProps> | undefined;
+    }>) | undefined;
+    resolvePermissions?: ((data: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type">, params: {
+        changed: Partial<Record<keyof ExperimentSlotProps, boolean> & {
+            id: string;
+        }>;
+        lastPermissions: Partial<import("@puckeditor/core").Permissions>;
+        permissions: Partial<import("@puckeditor/core").Permissions>;
+        appState: import("@puckeditor/core").AppState;
+        lastData: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type"> | null;
+        parent: import("@puckeditor/core").ComponentData | null;
+    }) => Promise<Partial<import("@puckeditor/core").Permissions>> | Partial<import("@puckeditor/core").Permissions>) | undefined;
+    metadata?: import("@puckeditor/core").ComponentMetadata;
+} & import("@puckeditor/core").ComponentConfigExtensions;

package/dist/puck/ExperimentSlot.js

@@ -1,16 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ViewportExposure } from '../client/ViewportExposure.js';
 import { experimentSlotDefaultProps, experimentSlotFields, experimentSlotLabel } from './slotConfig.js';
+import { createExperimentSlotField } from './experimentSlotField.js';
+import { resolvePuckRoutes } from './routes.js';
 import { slotToRender } from './slot.model.js';
-export const ExperimentSlot = {
-    label: experimentSlotLabel,
-    fields: experimentSlotFields,
-    defaultProps: experimentSlotDefaultProps,
-    render: (props)=>{
-        const Slot = props[slotToRender(props)];
-        return /*#__PURE__*/ _jsx(ViewportExposure, {
-            expose: props.xpExpose,
-            children: /*#__PURE__*/ _jsx(Slot, {})
-        });
-    }
-};
+export function createExperimentSlot({ routes: inputRoutes } = {}) {
+    const routes = resolvePuckRoutes(inputRoutes);
+    return {
+        label: experimentSlotLabel,
+        fields: {
+            ...experimentSlotFields,
+            experiment: createExperimentSlotField({
+                routes
+            })
+        },
+        defaultProps: experimentSlotDefaultProps,
+        render: (props)=>{
+            const Slot = props[slotToRender(props)];
+            return /*#__PURE__*/ _jsx(ViewportExposure, {
+                expose: props.xpExpose,
+                children: /*#__PURE__*/ _jsx(Slot, {})
+            });
+        }
+    };
+}
+export const ExperimentSlot = createExperimentSlot();

package/dist/puck/copy.d.ts

@@ -1,3 +1,4 @@
+export declare const categoryTitle = "A/B tests";
 export declare const slotLabels: {
     readonly control: "Original";
     readonly variantA: "Variant A";
@@ -5,10 +6,11 @@ export declare const slotLabels: {
     readonly variantC: "Variant C";
 };
 export declare const pickerCopy: {
-    readonly label: "Experiment";
-    readonly none: "No experiment";
-    readonly loading: "Loading experiments…";
-    readonly error: "Couldn't load experiments.";
+    readonly label: "Test";
+    readonly none: "No test";
+    readonly search: "Search tests";
+    readonly loading: "Loading tests…";
+    readonly error: "Couldn't load tests.";
     readonly forbidden: "You can't see tests. Ask an admin.";
     readonly statuses: {
         readonly draft: "Draft";

package/dist/puck/copy.js

@@ -1,4 +1,5 @@
 import { ARM_LABELS } from '../labels/arms.js';
+export const categoryTitle = 'A/B tests';
 export const slotLabels = {
     control: ARM_LABELS.control,
     variantA: ARM_LABELS.variantA,
@@ -6,10 +7,11 @@ export const slotLabels = {
     variantC: ARM_LABELS.variantC
 };
 export const pickerCopy = {
-    label: 'Experiment',
-    none: 'No experiment',
-    loading: 'Loading experiments…',
-    error: "Couldn't load experiments.",
+    label: 'Test',
+    none: 'No test',
+    search: 'Search tests',
+    loading: 'Loading tests…',
+    error: "Couldn't load tests.",
     forbidden: "You can't see tests. Ask an admin.",
     statuses: {
         draft: 'Draft',

package/dist/puck/editor/CreateExperimentDrawer.js

@@ -1,11 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from 'react';
+import { Dialog } from '../../ui/Dialog.js';
+import { TextInput } from '../../ui/TextInput.js';
+import { Button } from '../../ui/Button.js';
+import { Banner } from '../../ui/Banner.js';
+import { usePuckRoutes } from '../hostContext.js';
 import { CreateRefused, createTest } from './createTest.js';
 import { editorCopy } from './copy.js';
 import './editor.css';
 export function CreateExperimentDrawer({ onCreate, onClose, initialName = '' }) {
-    const titleId = useId();
+    const { api } = usePuckRoutes();
     const nameId = useId();
     const [name, setName] = useState(initialName);
     const inFlight = useRef(false);
@@ -17,7 +22,7 @@ export function CreateExperimentDrawer({ onCreate, onClose, initialName = '' })
         setPending(true);
         setError('');
         try {
-            const experiment = await createTest('/api', {
+            const experiment = await createTest(api, {
                 name,
                 kind: 'block',
                 unitType: 'visitor'
@@ -31,59 +36,44 @@ export function CreateExperimentDrawer({ onCreate, onClose, initialName = '' })
             setPending(false);
         }
     }
-    return /*#__PURE__*/ _jsxs("aside", {
-        className: "xp-slot-root xp-slot-drawer",
-        role: "dialog",
-        "aria-labelledby": titleId,
-        children: [
-            /*#__PURE__*/ _jsx("h3", {
-                className: "xp-slot-title",
-                id: titleId,
-                children: editorCopy.createLabel
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "xp-slot-field",
-                children: [
-                    /*#__PURE__*/ _jsx("label", {
-                        className: "xp-slot-label",
-                        htmlFor: nameId,
-                        children: editorCopy.name
-                    }),
-                    /*#__PURE__*/ _jsx("input", {
-                        className: "xp-slot-input",
-                        id: nameId,
-                        value: name,
-                        disabled: pending,
-                        onChange: (event)=>setName(event.currentTarget.value)
-                    })
-                ]
-            }),
-            error ? /*#__PURE__*/ _jsx("p", {
-                className: "xp-slot-error",
-                role: "alert",
-                children: error
-            }) : null,
-            /*#__PURE__*/ _jsxs("div", {
-                className: "xp-slot-actions",
-                children: [
-                    /*#__PURE__*/ _jsx("button", {
-                        className: "xp-slot-button xp-slot-button-primary",
-                        type: "button",
-                        disabled: pending || !name.trim(),
-                        onClick: ()=>{
-                            void submitNew();
-                        },
-                        children: pending ? editorCopy.creating : editorCopy.createLabel
-                    }),
-                    /*#__PURE__*/ _jsx("button", {
-                        className: "xp-slot-button",
-                        type: "button",
-                        disabled: pending,
-                        onClick: onClose,
-                        children: editorCopy.cancel
-                    })
-                ]
-            })
-        ]
+    return /*#__PURE__*/ _jsx(Dialog, {
+        open: true,
+        title: editorCopy.createLabel,
+        onClose: onClose,
+        dismissible: !pending,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "xp-slot-drawer",
+            children: [
+                /*#__PURE__*/ _jsx(TextInput, {
+                    id: nameId,
+                    label: editorCopy.name,
+                    value: name,
+                    disabled: pending,
+                    onChange: (event)=>setName(event.currentTarget.value)
+                }),
+                error ? /*#__PURE__*/ _jsx(Banner, {
+                    tone: "error",
+                    children: error
+                }) : null,
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "xp-ui-button-group",
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            variant: "primary",
+                            disabled: pending || !name.trim(),
+                            onClick: ()=>{
+                                void submitNew();
+                            },
+                            children: pending ? editorCopy.creating : editorCopy.createLabel
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            disabled: pending,
+                            onClick: onClose,
+                            children: editorCopy.cancel
+                        })
+                    ]
+                })
+            ]
+        })
     });
 }

package/dist/puck/editor/ExperimentSlotEditor.d.ts

@@ -1,4 +1,55 @@
 import { type ComponentConfig } from '@puckeditor/core';
 import type { ExperimentSlotProps } from '../../types/puck.js';
+import { type PuckRoutes } from '../routes.js';
 import './editor.css';
-export declare const ExperimentSlotEditor: ComponentConfig<ExperimentSlotProps>;
+export declare function createExperimentSlotEditor({ routes: inputRoutes, accent }?: {
+    routes?: PuckRoutes;
+    accent?: string;
+}): ComponentConfig<ExperimentSlotProps>;
+export declare const ExperimentSlotEditor: {
+    render: import("@puckeditor/core").PuckComponent<ExperimentSlotProps>;
+    label?: string;
+    defaultProps?: ExperimentSlotProps | undefined;
+    fields?: import("@puckeditor/core").Fields<ExperimentSlotProps, {}> | undefined;
+    renderFields?: ((props: {
+        fields: Partial<Record<keyof ExperimentSlotProps, import("react").ReactNode>>;
+    }) => import("react").ReactElement) | undefined;
+    permissions?: Partial<import("@puckeditor/core").Permissions>;
+    inline?: boolean;
+    resolveFields?: ((data: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type">, params: {
+        changed: Partial<Record<keyof ExperimentSlotProps, boolean> & {
+            id: string;
+        }>;
+        fields: import("@puckeditor/core").Fields<ExperimentSlotProps, {}>;
+        lastFields: import("@puckeditor/core").Fields<ExperimentSlotProps, {}>;
+        lastData: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type"> | null;
+        metadata: import("@puckeditor/core").ComponentMetadata;
+        appState: import("@puckeditor/core").AppState;
+        parent: import("@puckeditor/core").ComponentData | null;
+    }) => import("@puckeditor/core").Fields<ExperimentSlotProps, {}> | Promise<import("@puckeditor/core").Fields<ExperimentSlotProps, {}>>) | undefined;
+    resolveData?: ((data: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type">, params: {
+        changed: Partial<Record<keyof ExperimentSlotProps, boolean> & {
+            id: string;
+        }>;
+        lastData: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type"> | null;
+        metadata: import("@puckeditor/core").ComponentMetadata;
+        trigger: import("@puckeditor/core").ResolveDataTrigger;
+        parent: import("@puckeditor/core").ComponentData | null;
+        root: import("@puckeditor/core").RootData;
+    }) => (Omit<Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type">, "props"> & {
+        props?: Partial<ExperimentSlotProps> | undefined;
+    }) | Promise<Omit<Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type">, "props"> & {
+        props?: Partial<ExperimentSlotProps> | undefined;
+    }>) | undefined;
+    resolvePermissions?: ((data: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type">, params: {
+        changed: Partial<Record<keyof ExperimentSlotProps, boolean> & {
+            id: string;
+        }>;
+        lastPermissions: Partial<import("@puckeditor/core").Permissions>;
+        permissions: Partial<import("@puckeditor/core").Permissions>;
+        appState: import("@puckeditor/core").AppState;
+        lastData: Omit<import("@puckeditor/core").ComponentData<ExperimentSlotProps, string, Record<string, import("@puckeditor/core").DefaultComponentProps>>, "type"> | null;
+        parent: import("@puckeditor/core").ComponentData | null;
+    }) => Promise<Partial<import("@puckeditor/core").Permissions>> | Partial<import("@puckeditor/core").Permissions>) | undefined;
+    metadata?: import("@puckeditor/core").ComponentMetadata;
+} & import("@puckeditor/core").ComponentConfigExtensions;