@aglyn/plugins-workflows 1.0.0-beta.246 → 1.0.0-beta.249

package/src/lib/components/element-picker-dialog.component.js

@@ -0,0 +1,185 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { elementPickUrl, isElementPickMessage } from "@aglyn/aglyn/app-utils/element-pick-protocol";
+import { siteLiveUrlForSlug } from "@aglyn/aglyn/app-utils/site-live-url";
+import { Alert, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { doc, getDoc } from "firebase/firestore";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFirestore } from "@aglyn/tenant-feature-instance";
+/** How long a page gets to answer before the dialog says it did not. */ const READY_TIMEOUT_MS = 10000;
+/**
+ * The site's published pages as the picker lists them, home first. The
+ * routing map stores the root as `/` and every other page as bare segments
+ * (`about`); a site with nothing published still offers its home, which is
+ * what the dialog then says has not answered.
+ */ export function pickerPages(screens) {
+    const paths = new Set();
+    for (const slug of Object.values(screens != null ? screens : {})){
+        if (typeof slug !== 'string' || !slug) continue;
+        paths.add(slug.startsWith('/') ? slug : `/${slug}`);
+    }
+    if (!paths.size) paths.add('/');
+    return [
+        ...paths
+    ].sort((a, b)=>a === '/' ? -1 : b === '/' ? 1 : a.localeCompare(b)).map((path)=>({
+            path,
+            label: path === '/' ? 'Home' : path
+        }));
+}
+/**
+ * The live-page element picker (AGL-3758): the site's page in a frame, in
+ * pick mode, and the selector of whatever the builder clicks. Only a message
+ * from THAT frame, from the page's own origin, is read.
+ */ export default function ElementPickerDialog(props) {
+    const { hostId, initialPath, onPicked, onClose } = props;
+    const firestore = useFirestore();
+    const frame = useRef(null);
+    const [host, setHost] = useState(undefined);
+    const [path, setPath] = useState(null);
+    const [ready, setReady] = useState(false);
+    const [timedOut, setTimedOut] = useState(false);
+    // The caller's handlers, current without re-arming the listener below.
+    const handlers = useRef({
+        onPicked,
+        onClose
+    });
+    handlers.current = {
+        onPicked,
+        onClose
+    };
+    useEffect(()=>{
+        let live = true;
+        getDoc(doc(firestore, 'hosts', hostId)).then((snapshot)=>{
+            if (live) setHost(snapshot.exists() ? snapshot.data() : null);
+        }).catch(()=>{
+            if (live) setHost(null);
+        });
+        return ()=>{
+            live = false;
+        };
+    }, [
+        firestore,
+        hostId
+    ]);
+    const pages = useMemo(()=>pickerPages(host == null ? void 0 : host.screens), [
+        host
+    ]);
+    const current = path != null ? path : initialPath && pages.some((page)=>page.path === initialPath) ? initialPath : pages[0].path;
+    const pageUrl = host ? siteLiveUrlForSlug(host, current) : undefined;
+    const src = pageUrl ? elementPickUrl(pageUrl) : undefined;
+    useEffect(()=>{
+        if (!src) return undefined;
+        setReady(false);
+        setTimedOut(false);
+        const origin = new URL(src).origin;
+        const onMessage = (event)=>{
+            var _frame_current;
+            if (event.source !== ((_frame_current = frame.current) == null ? void 0 : _frame_current.contentWindow)) return;
+            if (event.origin !== origin) return;
+            if (!isElementPickMessage(event.data)) return;
+            if (event.data.event === 'ready') setReady(true);
+            else if (event.data.event === 'cancel') handlers.current.onClose();
+            else handlers.current.onPicked(event.data.selector, event.data.label);
+        };
+        window.addEventListener('message', onMessage);
+        const timer = window.setTimeout(()=>setTimedOut(true), READY_TIMEOUT_MS);
+        return ()=>{
+            window.removeEventListener('message', onMessage);
+            window.clearTimeout(timer);
+        };
+    }, [
+        src
+    ]);
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: true,
+        onClose: onClose,
+        fullWidth: true,
+        maxWidth: "lg",
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: 'Pick an element'
+            }),
+            /*#__PURE__*/ _jsx(DialogContent, {
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 1.5,
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 2,
+                            sx: {
+                                alignItems: 'center'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    select: true,
+                                    label: "Page",
+                                    value: current,
+                                    onChange: (event)=>setPath(event.target.value),
+                                    size: "small",
+                                    sx: {
+                                        minWidth: 220
+                                    },
+                                    disabled: !host,
+                                    children: pages.map((page)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                            value: page.path,
+                                            children: page.label
+                                        }, page.path))
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: ready ? 'Click the element on the page below.' : 'Opening the page…'
+                                })
+                            ]
+                        }),
+                        host === null || host && !src ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "warning",
+                            children: 'This site has no address to open yet. Use a custom selector instead.'
+                        }) : null,
+                        timedOut && !ready ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "info",
+                            children: 'The page has not answered. Publish the site and try again, or use ' + 'a custom selector.'
+                        }) : null,
+                        src ? /*#__PURE__*/ _jsx(Box, {
+                            component: "iframe",
+                            ref: frame,
+                            src: src,
+                            title: "Site page to pick from",
+                            sx: {
+                                width: '100%',
+                                height: '65vh',
+                                border: 1,
+                                borderColor: 'divider',
+                                borderRadius: 1,
+                                bgcolor: 'background.paper'
+                            }
+                        }, src) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(DialogActions, {
+                children: /*#__PURE__*/ _jsx(Button, {
+                    onClick: onClose,
+                    children: 'Cancel'
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=element-picker-dialog.component.js.map

package/src/lib/components/element-picker-dialog.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/workflows/src/lib/components/element-picker-dialog.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport type { AglynHost } from '@aglyn/aglyn'\nimport {\n  elementPickUrl,\n  isElementPickMessage,\n} from '@aglyn/aglyn/app-utils/element-pick-protocol'\nimport { siteLiveUrlForSlug } from '@aglyn/aglyn/app-utils/site-live-url'\nimport {\n  Alert,\n  Box,\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  MenuItem,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { doc, getDoc } from 'firebase/firestore'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { useFirestore } from '@aglyn/tenant-feature-instance'\n\n/** How long a page gets to answer before the dialog says it did not. */\nconst READY_TIMEOUT_MS = 10_000\n\nexport interface ElementPickerDialogProps {\n  hostId: string\n  /** The page to open first; the home page when absent or not published. */\n  initialPath?: string\n  onPicked: (selector: string, label: string) => void\n  onClose: () => void\n}\n\n/**\n * The site's published pages as the picker lists them, home first. The\n * routing map stores the root as `/` and every other page as bare segments\n * (`about`); a site with nothing published still offers its home, which is\n * what the dialog then says has not answered.\n */\nexport function pickerPages(\n  screens: Record<string, string> | undefined,\n): { path: string; label: string }[] {\n  const paths = new Set<string>()\n  for (const slug of Object.values(screens ?? {})) {\n    if (typeof slug !== 'string' || !slug) continue\n    paths.add(slug.startsWith('/') ? slug : `/${slug}`)\n  }\n  if (!paths.size) paths.add('/')\n  return [...paths]\n    .sort((a, b) => (a === '/' ? -1 : b === '/' ? 1 : a.localeCompare(b)))\n    .map((path) => ({ path, label: path === '/' ? 'Home' : path }))\n}\n\n/**\n * The live-page element picker (AGL-3758): the site's page in a frame, in\n * pick mode, and the selector of whatever the builder clicks. Only a message\n * from THAT frame, from the page's own origin, is read.\n */\nexport default function ElementPickerDialog(props: ElementPickerDialogProps) {\n  const { hostId, initialPath, onPicked, onClose } = props\n  const firestore = useFirestore()\n  const frame = useRef<HTMLIFrameElement | null>(null)\n  const [host, setHost] = useState<AglynHost | null | undefined>(undefined)\n  const [path, setPath] = useState<string | null>(null)\n  const [ready, setReady] = useState(false)\n  const [timedOut, setTimedOut] = useState(false)\n  // The caller's handlers, current without re-arming the listener below.\n  const handlers = useRef({ onPicked, onClose })\n  handlers.current = { onPicked, onClose }\n\n  useEffect(() => {\n    let live = true\n    getDoc(doc(firestore, 'hosts', hostId))\n      .then((snapshot) => {\n        if (live) setHost(snapshot.exists() ? (snapshot.data() as AglynHost) : null)\n      })\n      .catch(() => {\n        if (live) setHost(null)\n      })\n    return () => {\n      live = false\n    }\n  }, [firestore, hostId])\n\n  const pages = useMemo(\n    () => pickerPages(host?.screens as Record<string, string> | undefined),\n    [host],\n  )\n  const current =\n    path ??\n    (initialPath && pages.some((page) => page.path === initialPath)\n      ? initialPath\n      : pages[0].path)\n  const pageUrl = host ? siteLiveUrlForSlug(host, current) : undefined\n  const src = pageUrl ? elementPickUrl(pageUrl) : undefined\n\n  useEffect(() => {\n    if (!src) return undefined\n    setReady(false)\n    setTimedOut(false)\n    const origin = new URL(src).origin\n    const onMessage = (event: MessageEvent) => {\n      if (event.source !== frame.current?.contentWindow) return\n      if (event.origin !== origin) return\n      if (!isElementPickMessage(event.data)) return\n      if (event.data.event === 'ready') setReady(true)\n      else if (event.data.event === 'cancel') handlers.current.onClose()\n      else handlers.current.onPicked(event.data.selector, event.data.label)\n    }\n    window.addEventListener('message', onMessage)\n    const timer = window.setTimeout(() => setTimedOut(true), READY_TIMEOUT_MS)\n    return () => {\n      window.removeEventListener('message', onMessage)\n      window.clearTimeout(timer)\n    }\n  }, [src])\n\n  return (\n    <Dialog open onClose={onClose} fullWidth maxWidth=\"lg\">\n      <DialogTitle>{'Pick an element'}</DialogTitle>\n      <DialogContent>\n        <Stack spacing={1.5}>\n          <Stack direction=\"row\" spacing={2} sx={{ alignItems: 'center' }}>\n            <TextField\n              select\n              label=\"Page\"\n              value={current}\n              onChange={(event) => setPath(event.target.value)}\n              size=\"small\"\n              sx={{ minWidth: 220 }}\n              disabled={!host}\n            >\n              {pages.map((page) => (\n                <MenuItem key={page.path} value={page.path}>\n                  {page.label}\n                </MenuItem>\n              ))}\n            </TextField>\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              {ready\n                ? 'Click the element on the page below.'\n                : 'Opening the page…'}\n            </Typography>\n          </Stack>\n          {host === null || (host && !src) ? (\n            <Alert severity=\"warning\">\n              {'This site has no address to open yet. Use a custom selector instead.'}\n            </Alert>\n          ) : null}\n          {timedOut && !ready ? (\n            <Alert severity=\"info\">\n              {'The page has not answered. Publish the site and try again, or use ' +\n                'a custom selector.'}\n            </Alert>\n          ) : null}\n          {src ? (\n            <Box\n              component=\"iframe\"\n              ref={frame}\n              key={src}\n              src={src}\n              title=\"Site page to pick from\"\n              sx={{\n                width: '100%',\n                height: '65vh',\n                border: 1,\n                borderColor: 'divider',\n                borderRadius: 1,\n                bgcolor: 'background.paper',\n              }}\n            />\n          ) : null}\n        </Stack>\n      </DialogContent>\n      <DialogActions>\n        <Button onClick={onClose}>{'Cancel'}</Button>\n      </DialogActions>\n    </Dialog>\n  )\n}\n"],"names":["elementPickUrl","isElementPickMessage","siteLiveUrlForSlug","Alert","Box","Button","Dialog","DialogActions","DialogContent","DialogTitle","MenuItem","Stack","TextField","Typography","doc","getDoc","useEffect","useMemo","useRef","useState","useFirestore","READY_TIMEOUT_MS","pickerPages","screens","paths","Set","slug","Object","values","add","startsWith","size","sort","a","b","localeCompare","map","path","label","ElementPickerDialog","props","hostId","initialPath","onPicked","onClose","firestore","frame","host","setHost","undefined","setPath","ready","setReady","timedOut","setTimedOut","handlers","current","live","then","snapshot","exists","data","catch","pages","some","page","pageUrl","src","origin","URL","onMessage","event","source","contentWindow","selector","window","addEventListener","timer","setTimeout","removeEventListener","clearTimeout","open","fullWidth","maxWidth","spacing","direction","sx","alignItems","select","value","onChange","target","minWidth","disabled","variant","color","severity","component","ref","title","width","height","border","borderColor","borderRadius","bgcolor","onClick"],"mappings":"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"}

package/src/lib/components/element-selector-field.component.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface ElementSelectorFieldProps {
+    /** What the field targets, as the step or trigger names it. */
+    label: string;
+    /** The stored selector. */
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * The site whose pages the picker opens. Without one (an editor that is
+     * not about one site) the field is the custom selector alone.
+     */
+    hostId?: string;
+    /** The page the picker opens first, e.g. the trigger's "Only on pages". */
+    initialPath?: string;
+    /** What an empty field does, e.g. "Header or nav". */
+    emptyLabel?: string;
+    placeholder?: string;
+}
+/**
+ * An element target picked on the live page (AGL-3758). "Pick element"
+ * opens the site's page in a frame and the builder clicks the element; the
+ * stored selector is the one the Besigner's Interactions picker stores. A
+ * typed CSS selector is still there, behind "Use a custom selector".
+ */
+export declare function ElementSelectorField(props: ElementSelectorFieldProps): import("react").JSX.Element;
+export default ElementSelectorField;

package/src/lib/components/element-selector-field.component.js

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Chip, Collapse, Link, Stack, TextField, Tooltip } from "@mui/material";
+import { lazy, Suspense, useState } from "react";
+// The picker frame is its own chunk: an Actions editor that never picks an
+// element never downloads it.
+const ElementPickerDialog = /*#__PURE__*/ lazy(()=>import("./element-picker-dialog.component.js"));
+/** The stored form of a picked element: the renderer's leaf stamp. */ const LEAF_SELECTOR = /^\[data-aglyn="leaf:[^"]+"\]$/;
+/**
+ * An element target picked on the live page (AGL-3758). "Pick element"
+ * opens the site's page in a frame and the builder clicks the element; the
+ * stored selector is the one the Besigner's Interactions picker stores. A
+ * typed CSS selector is still there, behind "Use a custom selector".
+ */ export function ElementSelectorField(props) {
+    const { label, value, onChange, hostId, initialPath, emptyLabel, placeholder } = props;
+    const [picking, setPicking] = useState(false);
+    const [pickedLabel, setPickedLabel] = useState(null);
+    const custom = Boolean(value) && !LEAF_SELECTOR.test(value);
+    const [advanced, setAdvanced] = useState(custom);
+    const customField = /*#__PURE__*/ _jsx(TextField, {
+        label: hostId ? 'Custom selector' : label,
+        value: value,
+        onChange: (event)=>{
+            setPickedLabel(null);
+            onChange(event.target.value);
+        },
+        size: "small",
+        fullWidth: true,
+        placeholder: placeholder,
+        helperText: hostId ? 'Any CSS selector; it replaces the picked element' : undefined
+    });
+    if (!hostId) return /*#__PURE__*/ _jsx(Stack, {
+        sx: {
+            flex: 1
+        },
+        children: customField
+    });
+    const chip = !value ? emptyLabel != null ? emptyLabel : 'No element yet' : custom ? value : pickedLabel != null ? pickedLabel : 'Picked element';
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 0.5,
+        sx: {
+            flex: 1,
+            minWidth: 0
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                useFlexGap: true,
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center',
+                    flexWrap: 'wrap'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        variant: "outlined",
+                        onClick: ()=>setPicking(true),
+                        children: value ? `Change ${label.toLowerCase()}` : `Pick ${label.toLowerCase()}`
+                    }),
+                    /*#__PURE__*/ _jsx(Tooltip, {
+                        title: value || '',
+                        children: /*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            label: chip,
+                            variant: value ? 'filled' : 'outlined',
+                            color: value ? 'primary' : 'default',
+                            onDelete: value ? ()=>onChange('') : undefined,
+                            sx: {
+                                maxWidth: 260
+                            }
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Link, {
+                component: "button",
+                type: "button",
+                variant: "caption",
+                underline: "hover",
+                onClick: ()=>setAdvanced((open)=>!open),
+                sx: {
+                    alignSelf: 'flex-start'
+                },
+                children: advanced ? 'Hide custom selector' : 'Use a custom selector'
+            }),
+            /*#__PURE__*/ _jsx(Collapse, {
+                in: advanced,
+                unmountOnExit: true,
+                children: customField
+            }),
+            picking ? /*#__PURE__*/ _jsx(Suspense, {
+                fallback: null,
+                children: /*#__PURE__*/ _jsx(ElementPickerDialog, {
+                    hostId: hostId,
+                    initialPath: initialPath,
+                    onClose: ()=>setPicking(false),
+                    onPicked: (selector, picked)=>{
+                        setPickedLabel(picked);
+                        setAdvanced(false);
+                        onChange(selector);
+                        setPicking(false);
+                    }
+                })
+            }) : null
+        ]
+    });
+}
+export default ElementSelectorField;
+
+//# sourceMappingURL=element-selector-field.component.js.map

package/src/lib/components/element-selector-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/workflows/src/lib/components/element-selector-field.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport {\n  Button,\n  Chip,\n  Collapse,\n  Link,\n  Stack,\n  TextField,\n  Tooltip,\n} from '@mui/material'\nimport { lazy, Suspense, useState } from 'react'\n\n// The picker frame is its own chunk: an Actions editor that never picks an\n// element never downloads it.\nconst ElementPickerDialog = lazy(() => import('./element-picker-dialog.component'))\n\n/** The stored form of a picked element: the renderer's leaf stamp. */\nconst LEAF_SELECTOR = /^\\[data-aglyn=\"leaf:[^\"]+\"\\]$/\n\nexport interface ElementSelectorFieldProps {\n  /** What the field targets, as the step or trigger names it. */\n  label: string\n  /** The stored selector. */\n  value: string\n  onChange: (value: string) => void\n  /**\n   * The site whose pages the picker opens. Without one (an editor that is\n   * not about one site) the field is the custom selector alone.\n   */\n  hostId?: string\n  /** The page the picker opens first, e.g. the trigger's \"Only on pages\". */\n  initialPath?: string\n  /** What an empty field does, e.g. \"Header or nav\". */\n  emptyLabel?: string\n  placeholder?: string\n}\n\n/**\n * An element target picked on the live page (AGL-3758). \"Pick element\"\n * opens the site's page in a frame and the builder clicks the element; the\n * stored selector is the one the Besigner's Interactions picker stores. A\n * typed CSS selector is still there, behind \"Use a custom selector\".\n */\nexport function ElementSelectorField(props: ElementSelectorFieldProps) {\n  const { label, value, onChange, hostId, initialPath, emptyLabel, placeholder } =\n    props\n  const [picking, setPicking] = useState(false)\n  const [pickedLabel, setPickedLabel] = useState<string | null>(null)\n  const custom = Boolean(value) && !LEAF_SELECTOR.test(value)\n  const [advanced, setAdvanced] = useState(custom)\n\n  const customField = (\n    <TextField\n      label={hostId ? 'Custom selector' : label}\n      value={value}\n      onChange={(event) => {\n        setPickedLabel(null)\n        onChange(event.target.value)\n      }}\n      size=\"small\"\n      fullWidth\n      placeholder={placeholder}\n      helperText={hostId ? 'Any CSS selector; it replaces the picked element' : undefined}\n    />\n  )\n  if (!hostId) return <Stack sx={{ flex: 1 }}>{customField}</Stack>\n\n  const chip = !value\n    ? (emptyLabel ?? 'No element yet')\n    : custom\n      ? value\n      : (pickedLabel ?? 'Picked element')\n  return (\n    <Stack spacing={0.5} sx={{ flex: 1, minWidth: 0 }}>\n      <Stack\n        useFlexGap\n        direction=\"row\"\n        spacing={1}\n        sx={{ alignItems: 'center', flexWrap: 'wrap' }}\n      >\n        <Button size=\"small\" variant=\"outlined\" onClick={() => setPicking(true)}>\n          {value ? `Change ${label.toLowerCase()}` : `Pick ${label.toLowerCase()}`}\n        </Button>\n        <Tooltip title={value || ''}>\n          <Chip\n            size=\"small\"\n            label={chip}\n            variant={value ? 'filled' : 'outlined'}\n            color={value ? 'primary' : 'default'}\n            onDelete={value ? () => onChange('') : undefined}\n            sx={{ maxWidth: 260 }}\n          />\n        </Tooltip>\n      </Stack>\n      <Link\n        component=\"button\"\n        type=\"button\"\n        variant=\"caption\"\n        underline=\"hover\"\n        onClick={() => setAdvanced((open) => !open)}\n        sx={{ alignSelf: 'flex-start' }}\n      >\n        {advanced ? 'Hide custom selector' : 'Use a custom selector'}\n      </Link>\n      <Collapse in={advanced} unmountOnExit>\n        {customField}\n      </Collapse>\n      {picking ? (\n        <Suspense fallback={null}>\n          <ElementPickerDialog\n            hostId={hostId}\n            initialPath={initialPath}\n            onClose={() => setPicking(false)}\n            onPicked={(selector, picked) => {\n              setPickedLabel(picked)\n              setAdvanced(false)\n              onChange(selector)\n              setPicking(false)\n            }}\n          />\n        </Suspense>\n      ) : null}\n    </Stack>\n  )\n}\n\nexport default ElementSelectorField\n"],"names":["Button","Chip","Collapse","Link","Stack","TextField","Tooltip","lazy","Suspense","useState","ElementPickerDialog","LEAF_SELECTOR","ElementSelectorField","props","label","value","onChange","hostId","initialPath","emptyLabel","placeholder","picking","setPicking","pickedLabel","setPickedLabel","custom","Boolean","test","advanced","setAdvanced","customField","event","target","size","fullWidth","helperText","undefined","sx","flex","chip","spacing","minWidth","useFlexGap","direction","alignItems","flexWrap","variant","onClick","toLowerCase","title","color","onDelete","maxWidth","component","type","underline","open","alignSelf","in","unmountOnExit","fallback","onClose","onPicked","selector","picked"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAEA,SACEA,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,OAAO,QACF,gBAAe;AACtB,SAASC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,QAAO;AAEhD,2EAA2E;AAC3E,8BAA8B;AAC9B,MAAMC,oCAAsBH,KAAK,IAAM,MAAM,CAAC;AAE9C,oEAAoE,GACpE,MAAMI,gBAAgB;AAoBtB;;;;;CAKC,GACD,OAAO,SAASC,qBAAqBC,KAAgC;IACnE,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAC5EP;IACF,MAAM,CAACQ,SAASC,WAAW,GAAGb,SAAS;IACvC,MAAM,CAACc,aAAaC,eAAe,GAAGf,SAAwB;IAC9D,MAAMgB,SAASC,QAAQX,UAAU,CAACJ,cAAcgB,IAAI,CAACZ;IACrD,MAAM,CAACa,UAAUC,YAAY,GAAGpB,SAASgB;IAEzC,MAAMK,4BACJ,KAACzB;QACCS,OAAOG,SAAS,oBAAoBH;QACpCC,OAAOA;QACPC,UAAU,CAACe;YACTP,eAAe;YACfR,SAASe,MAAMC,MAAM,CAACjB,KAAK;QAC7B;QACAkB,MAAK;QACLC,SAAS;QACTd,aAAaA;QACbe,YAAYlB,SAAS,qDAAqDmB;;IAG9E,IAAI,CAACnB,QAAQ,qBAAO,KAACb;QAAMiC,IAAI;YAAEC,MAAM;QAAE;kBAAIR;;IAE7C,MAAMS,OAAO,CAACxB,QACTI,qBAAAA,aAAc,mBACfM,SACEV,QACCQ,sBAAAA,cAAe;IACtB,qBACE,MAACnB;QAAMoC,SAAS;QAAKH,IAAI;YAAEC,MAAM;YAAGG,UAAU;QAAE;;0BAC9C,MAACrC;gBACCsC,UAAU;gBACVC,WAAU;gBACVH,SAAS;gBACTH,IAAI;oBAAEO,YAAY;oBAAUC,UAAU;gBAAO;;kCAE7C,KAAC7C;wBAAOiC,MAAK;wBAAQa,SAAQ;wBAAWC,SAAS,IAAMzB,WAAW;kCAC/DP,QAAQ,CAAC,OAAO,EAAED,MAAMkC,WAAW,IAAI,GAAG,CAAC,KAAK,EAAElC,MAAMkC,WAAW,IAAI;;kCAE1E,KAAC1C;wBAAQ2C,OAAOlC,SAAS;kCACvB,cAAA,KAACd;4BACCgC,MAAK;4BACLnB,OAAOyB;4BACPO,SAAS/B,QAAQ,WAAW;4BAC5BmC,OAAOnC,QAAQ,YAAY;4BAC3BoC,UAAUpC,QAAQ,IAAMC,SAAS,MAAMoB;4BACvCC,IAAI;gCAAEe,UAAU;4BAAI;;;;;0BAI1B,KAACjD;gBACCkD,WAAU;gBACVC,MAAK;gBACLR,SAAQ;gBACRS,WAAU;gBACVR,SAAS,IAAMlB,YAAY,CAAC2B,OAAS,CAACA;gBACtCnB,IAAI;oBAAEoB,WAAW;gBAAa;0BAE7B7B,WAAW,yBAAyB;;0BAEvC,KAAC1B;gBAASwD,IAAI9B;gBAAU+B,aAAa;0BAClC7B;;YAEFT,wBACC,KAACb;gBAASoD,UAAU;0BAClB,cAAA,KAAClD;oBACCO,QAAQA;oBACRC,aAAaA;oBACb2C,SAAS,IAAMvC,WAAW;oBAC1BwC,UAAU,CAACC,UAAUC;wBACnBxC,eAAewC;wBACfnC,YAAY;wBACZb,SAAS+C;wBACTzC,WAAW;oBACb;;iBAGF;;;AAGV;AAEA,eAAeV,qBAAoB"}

package/src/lib/components/host-actions-card.component.js

@@ -33,6 +33,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ceilingedWindow, collectionCeiling, useFirestore, useFirestoreCollection, useHostResourceApi, useUser, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
 import { ACTION_TEST_RUN_API_ROUTE } from "../model/action-test-run.js";
 import { AutomationStepFields, defaultStep } from "./automation-step-fields.component.js";
+import { ElementSelectorField } from "./element-selector-field.component.js";
 import { conditionRowsFromTrigger, conditionsFromRows, EMPTY_CONDITION_ROW, TriggerConditionRows } from "./automation-trigger-conditions.component.js";
 import HostRunHistoryCard from "./host-run-history-card.component.js";
 import { EDITOR_OPTION_CEILING, useAutomationStepPickers } from "./use-automation-step-pickers.js";
@@ -887,19 +888,17 @@ const CUSTOM_EVENT_VALUE = '__custom__';
                                 direction: "row",
                                 spacing: 1,
                                 children: [
-                                    ELEMENT_SCOPED_SITE_EVENTS.includes((_ref12 = draft == null ? void 0 : draft.trigger.event) != null ? _ref12 : '') ? /*#__PURE__*/ _jsx(TextField, {
-                                        label: "CSS selector",
-                                        placeholder: "#pricing-table",
+                                    ELEMENT_SCOPED_SITE_EVENTS.includes((_ref12 = draft == null ? void 0 : draft.trigger.event) != null ? _ref12 : '') ? /*#__PURE__*/ _jsx(ElementSelectorField, {
+                                        label: "Element",
+                                        hostId: hostId,
+                                        // Open the page the trigger is limited to, when it names one.
+                                        initialPath: (draft == null ? void 0 : draft.trigger.pathPattern) && !draft.trigger.pathPattern.includes('*') ? draft.trigger.pathPattern : undefined,
                                         value: (_ref13 = draft == null ? void 0 : draft.trigger.selector) != null ? _ref13 : '',
-                                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                        onChange: (selector)=>patch((previous)=>_extends({}, previous, {
                                                     trigger: _extends({}, previous.trigger, {
-                                                        selector: event.target.value
+                                                        selector
                                                     })
-                                                })),
-                                        size: "small",
-                                        sx: {
-                                            flex: 1
-                                        }
+                                                }))
                                     }) : null,
                                     [
                                         'scrollDepth',
@@ -1010,7 +1009,8 @@ const CUSTOM_EVENT_VALUE = '__custom__';
                                     replyContext: {
                                         event: draft == null ? void 0 : draft.trigger.event,
                                         afterWait: stepRunsAfterWait(draft == null ? void 0 : draft.steps, index)
-                                    }
+                                    },
+                                    siteHostId: hostId
                                 }, index)),
                             /*#__PURE__*/ _jsx(Button, {
                                 size: "small",