@aglyn/plugins-logic 1.0.0-beta.143

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

@@ -0,0 +1,1075 @@
+/**
+ * @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 { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { checkQuota, evaluateHostFunction, FUNCTION_BUILTIN_NAMES, functionGlobals, functionReferencedNames, pluginDocsHelp, VARIABLE_NAME_PATTERN } from "@aglyn/aglyn";
+/*
+ * The MODULE, not the barrel, for the two PURE helpers — every spec that
+ * renders this card mocks `@aglyn/tenant-feature-instance` wholesale to stage
+ * its Firestore hooks, and a query builder imported through that barrel
+ * disappears under the mock. Neither of these is a hook.
+ */ import { ceilingedWindow, collectionCeiling } from "@aglyn/tenant-feature-instance/hooks/host-collection-queries";
+import { CardDisplay, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import { TABLE_PAGE_SIZE_DEFAULT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { Timestamp } from "@aglyn/shared-util-timestamp";
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, IconButton, MenuItem, Stack, Switch, TextField, Typography } from "@mui/material";
+import { collection, doc, getCountFromServer, getDocs, limit, query, setDoc, updateDoc } from "firebase/firestore";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useFirestore, useFirestoreCollection, useHostResourceApi, useUser, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
+import { formatParameterOptions, parseParameterOptions } from "../model/parameter-options.js";
+import WhereUsedDialog from "./where-used-dialog.component.js";
+import { fetchWhereUsed, summarizeDependents } from "@aglyn/aglyn/app-utils/where-used";
+/**
+ * How many functions the card reads.
+ *
+ * A CEILING, not a page size — see the query, which explains why this list
+ * cannot be paged by the server without making the duplicate-name check lie.
+ */ const FUNCTION_CEILING = 100;
+const VALUE_TYPES = [
+    {
+        value: 'number',
+        label: 'Number'
+    },
+    {
+        value: 'text',
+        label: 'Text'
+    },
+    {
+        value: 'boolean',
+        label: 'True/false'
+    }
+];
+const COMPARATORS = [
+    '==',
+    '!=',
+    '<',
+    '<=',
+    '>',
+    '>='
+];
+function emptyDraft() {
+    return {
+        id: null,
+        name: '',
+        parameters: [
+            {
+                name: 'P1',
+                type: 'number',
+                required: true
+            }
+        ],
+        variables: [
+            {
+                name: 'P3',
+                type: 'number'
+            }
+        ],
+        operations: [
+            {
+                if: {
+                    left: '',
+                    comparator: '<=',
+                    right: ''
+                },
+                then: [
+                    {
+                        set: '',
+                        expression: ''
+                    }
+                ],
+                otherwise: []
+            }
+        ],
+        returnValue: ''
+    };
+}
+/**
+ * What a VISITOR meets for one parameter (AGL-3202): the label above the
+ * input, what it starts with, and — for a question with fixed answers — the
+ * choices. Empty fields are dropped from the definition rather than stored
+ * as empty strings, so a function nobody has dressed for visitors saves
+ * exactly the shape it always did.
+ *
+ * The choices keep their own text while being typed. Parsing every keystroke
+ * back into the box would eat the space after a comma, and the colon after a
+ * value, the moment they were typed.
+ */ function ParameterAudienceFields(props) {
+    var _parameter_label, _parameter_defaultValue;
+    const { parameter, onChange } = props;
+    const [choices, setChoices] = useState(()=>formatParameterOptions(parameter.options));
+    const assign = (field, value)=>{
+        const next = _extends({}, parameter);
+        if (value) next[field] = value;
+        else delete next[field];
+        onChange(next);
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+            alignItems: 'center'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                sx: {
+                    width: 110,
+                    flexShrink: 0
+                },
+                noWrap: true,
+                children: parameter.name || '—'
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Label",
+                placeholder: parameter.name,
+                value: (_parameter_label = parameter.label) != null ? _parameter_label : '',
+                onChange: (event)=>assign('label', event.target.value.slice(0, 80)),
+                size: "small",
+                sx: {
+                    flex: 2
+                }
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Starts as",
+                value: (_parameter_defaultValue = parameter.defaultValue) != null ? _parameter_defaultValue : '',
+                onChange: (event)=>assign('defaultValue', event.target.value.slice(0, 120)),
+                size: "small",
+                sx: {
+                    flex: 1
+                }
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Choices",
+                placeholder: "value: Label, value: Label",
+                value: choices,
+                onChange: (event)=>{
+                    setChoices(event.target.value);
+                    const options = parseParameterOptions(event.target.value);
+                    const next = _extends({}, parameter);
+                    if (options.length) next.options = options;
+                    else delete next.options;
+                    onChange(next);
+                },
+                size: "small",
+                sx: {
+                    flex: 3
+                }
+            })
+        ]
+    });
+}
+/** Small labelled row header matching the mockup's section styling. */ function SectionLabel(props) {
+    return /*#__PURE__*/ _jsx(Typography, {
+        variant: "overline",
+        color: "text.secondary",
+        children: props.children
+    });
+}
+/**
+ * No-code function builder (Component Builder, AGL-92): the mockup's Edit
+ * Function dialog — Parameters with required toggles, local Variables,
+ * numbered conditional operation cards (If below is TRUE / Then do this /
+ * Otherwise do this), a Return value select, and a test-run panel driving
+ * the shared evaluator. Definitions persist to `hosts/{hostId}/functions`;
+ * prop/event wiring lands with AGL-93.
+ */ export function HostFunctionsCard(props) {
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
+    const { hostId } = props;
+    const firestore = useFirestore();
+    const { data: user } = useUser();
+    const createHostResource = useHostResourceApi();
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    const { org } = props;
+    const { data: functionDocs, status: functionsStatus, /**
+     * The rows this editor is seeded from are unconfirmed by the server
+     * (AGL-1358). Editing destructures a whole stored function into `draft`
+     * and writes `{...definition}` back, so `merge: true` protects nothing —
+     * the payload is literally every field of the definition. `parameters`
+     * and `operations` are arrays, which a merge replaces wholesale rather
+     * than diffing, so a cached seed does not lose one edit: it restores that
+     * snapshot's entire logic body and parameter list, and every caller's
+     * arguments are positional against the list it just reverted.
+     */ fromCache: functionsFromCache } = useFirestoreCollection(/*
+     * ORDERED AND CEILINGED, deliberately not paged by the query (AGL-2501) —
+     * the same decision as the variables card beside it, for the same two
+     * reasons.
+     *
+     * `limit(100)` alone is answered in DOCUMENT-ID order, so the window is a
+     * pseudo-random hundred that the `localeCompare` below dresses up as an
+     * alphabetical list, and nothing said the list was bounded.
+     *
+     * `collectionCeiling` does not change WHICH hundred — document-id order is
+     * what the bare cap already returned. What it changes is that the order is
+     * NAMED, so the obvious next edit is caught: ordering on `name` would HIDE
+     * every function written without one rather than mis-sorting the list, and
+     * `/api/hosts/resources` validates no field for presence while
+     * `IMPORTABLE_FIELDS.functions` copies one only if the export carried it.
+     *
+     * The QUERY is not paged because `nameTaken` below tests the draft against
+     * these rows: case-insensitive uniqueness is what keeps legacy
+     * `{{fn:name(...)}}` resolution unambiguous (AGL-185), and on a ten-row
+     * server page that check would compare a new function against a tenth of
+     * the site and create the duplicate it exists to prevent.
+     */ ()=>collectionCeiling(collection(firestore, 'hosts', hostId, 'functions'), FUNCTION_CEILING), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const { rows: readFunctions, truncated: functionsTruncated } = ceilingedWindow(functionDocs, FUNCTION_CEILING);
+    // Sorting is safe here in a way it is not on a paged list: these rows are
+    // the whole collection below the ceiling, not a slice of one.
+    const functions = useMemo(()=>readFunctions.filter((definition)=>!definition.deletedAt).sort((a, b)=>{
+            var _a_name, _b_name;
+            return String((_a_name = a.name) != null ? _a_name : '').localeCompare(String((_b_name = b.name) != null ? _b_name : ''));
+        }), [
+        readFunctions
+    ]);
+    // The page is a SLICE: the rows are already in hand and `nameTaken` needs
+    // all of them.
+    const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZE_DEFAULT);
+    const visibleFunctions = useMemo(()=>functions.slice(page * pageSize, page * pageSize + pageSize), [
+        functions,
+        page,
+        pageSize
+    ]);
+    /**
+   * The function HEAD-COUNT is a server aggregate, not the length of the
+   * capped listener (AGL-1716, the AGL-1706 shape) — the same fix as the
+   * variables card beside it, for the same reason.
+   *
+   * The listener is `limit(100)` and `functions.length` fed
+   * `checkQuota(org, 'functionsPerHost', …)`, whose bands are 1 / 10 / 50 /
+   * 250 / 500 / 1,000. Everything from Business up sits above the window, so
+   * on those plans the gate compared 100 against hundreds and could never
+   * refuse, while `api/hosts/resources` counted the collection and did.
+   *
+   * UNFILTERED, matching that route's plain `collection('functions').count()`
+   * — soft-deleted functions have always counted server-side, so this is the
+   * card catching up with the verdict it exists to predict. Only a create
+   * moves the number, so that is where it is re-read.
+   */ const [functionCountEpoch, setFunctionCountEpoch] = useState(0);
+    const [serverFunctionCount, setServerFunctionCount] = useState(null);
+    useEffect(()=>{
+        let active = true;
+        void getCountFromServer(collection(firestore, 'hosts', hostId, 'functions')).then((snapshot)=>{
+            if (active) setServerFunctionCount(snapshot.data().count);
+        }).catch(()=>{
+        // Falls back to the loaded rows — a LOWER bound and the prior
+        // behaviour, never 0, which `checkQuota` would answer as "no usage"
+        // on a site that is over its band.
+        });
+        return ()=>{
+            active = false;
+        };
+    }, [
+        firestore,
+        hostId,
+        functionCountEpoch
+    ]);
+    const functionCount = serverFunctionCount != null ? serverFunctionCount : functions.length;
+    const [draft, setDraft] = useState(null);
+    // Where-used dialog (AGL-193).
+    const [usage, setUsage] = useState(null);
+    const [usageLoading, setUsageLoading] = useState(null);
+    const [testArgs, setTestArgs] = useState({});
+    const [testResult, setTestResult] = useState(null);
+    const patch = useCallback((updater)=>setDraft((previous)=>previous ? updater(previous) : previous), []);
+    const names = [
+        ...((_ref = draft == null ? void 0 : draft.parameters) != null ? _ref : []).map((parameter)=>parameter.name),
+        ...((_ref1 = draft == null ? void 0 : draft.variables) != null ? _ref1 : []).map((variable)=>variable.name)
+    ].filter((name)=>VARIABLE_NAME_PATTERN.test(name));
+    // Case-insensitive uniqueness (AGL-185): function names must stay
+    // unambiguous for legacy {{fn:name(...)}} token resolution.
+    const nameTaken = Boolean(draft && functions.some((definition)=>{
+        var _definition_name;
+        return String((_definition_name = definition.name) != null ? _definition_name : '').toLowerCase() === draft.name.trim().toLowerCase() && definition.$id !== draft.id;
+    }));
+    /**
+   * A test run sees what a published page sees (AGL-3202): the site
+   * variables the draft names. Read on the click, and only when the draft
+   * names something outside itself, so opening this card still costs the one
+   * functions window and nothing else — a listener here would bill a hundred
+   * variable reads to every author who never presses Run.
+   */ const handleTestRun = useCallback(async ()=>{
+        if (!draft) return;
+        let globals = {};
+        if (functionReferencedNames(draft).length) {
+            try {
+                const snapshot = await getDocs(query(collection(firestore, 'hosts', hostId, 'variables'), limit(100)));
+                const lookup = {};
+                snapshot.forEach((row)=>{
+                    const data = row.data();
+                    if ((data == null ? void 0 : data.name) && !data.deletedAt) lookup[row.id] = data;
+                });
+                globals = functionGlobals(draft, lookup);
+            } catch (error) {
+                // The run still happens: an unreadable variable list reads as the
+                // evaluator's own "Unknown name", which names what was missing.
+                console.error(error);
+            }
+        }
+        const result = evaluateHostFunction(draft, testArgs, {
+            globals
+        });
+        setTestResult(result.ok === false ? `Error: ${result.error}` : `Result: ${String(result.value)}`);
+    }, [
+        draft,
+        testArgs,
+        firestore,
+        hostId
+    ]);
+    const handleSave = useCallback(async ()=>{
+        if (!draft || !draft.name.trim() || nameTaken) return;
+        const { id: draftId } = draft, definition = _object_without_properties_loose(draft, [
+            "id"
+        ]);
+        const fields = _extends({}, definition, {
+            name: draft.name.trim().slice(0, 60)
+        });
+        try {
+            if (draftId) {
+                /**
+         * Edit stays client-direct (no quota consumed) — and is refused when
+         * its seed was never confirmed by the server (AGL-1358). `fields` is
+         * the whole definition spread out of the listener row, so `merge:
+         * true` has nothing left to protect.
+         *
+         * The guard WRAPS the write. An early return is a shape you can keep
+         * while losing the protection; here the write is only reachable
+         * through the verdict.
+         */ const verdict = await writeGuardedBySeed({
+                    subject: 'function',
+                    unreadable: functionsStatus === 'error',
+                    fromCache: functionsFromCache
+                }, async ()=>{
+                    await setDoc(doc(firestore, 'hosts', hostId, 'functions', draftId), _extends({}, fields, {
+                        updatedAt: Timestamp.now()
+                    }), {
+                        merge: true
+                    });
+                });
+                // Before `setDraft(null)`, so a refusal keeps the dialog open with
+                // the whole edited body and its test run still on screen.
+                if (!verdict.ok) {
+                    return void enqueueSnackbar(verdict.message, {
+                        variant: 'warning',
+                        persist: false
+                    });
+                }
+            } else {
+                // New function rides the quota-enforcing resources API (AGL-473).
+                await createHostResource({
+                    hostId,
+                    resource: 'function',
+                    data: fields
+                });
+                // A create moves the count; the one-shot aggregate below does not
+                // refresh itself the way the listener refreshes the rows.
+                setFunctionCountEpoch((epoch)=>epoch + 1);
+            }
+            setDraft(null);
+            setTestResult(null);
+            enqueueSnackbar('Function saved', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            var _ref;
+            console.error(error);
+            enqueueSnackbar((_ref = error == null ? void 0 : error.message) != null ? _ref : 'An error has occurred', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        }
+    }, [
+        draft,
+        nameTaken,
+        firestore,
+        hostId,
+        createHostResource,
+        enqueueSnackbar,
+        functionsStatus,
+        functionsFromCache
+    ]);
+    const handleShowUsage = useCallback((definition)=>async ()=>{
+            setUsageLoading(definition.$id);
+            const result = await fetchWhereUsed(user, {
+                hostId,
+                kind: 'function',
+                id: definition.$id,
+                name: definition.name
+            });
+            setUsageLoading(null);
+            setUsage({
+                name: definition.name,
+                result
+            });
+        }, [
+        user,
+        hostId
+    ]);
+    const handleDelete = useCallback((definition)=>async ()=>{
+            // Dependents warning (AGL-187): screens/layouts binding the function
+            // and workflow steps calling it.
+            const scan = await fetchWhereUsed(user, {
+                hostId,
+                kind: 'function',
+                id: definition.$id,
+                name: definition.name
+            });
+            const confirmed = await confirm({
+                title: 'Delete this function?',
+                description: scan.total ? `"${definition.name}" is used in ${summarizeDependents(scan)} ` + 'and those bindings and workflow steps will stop running.' : `"${definition.name}" will no longer be runnable.`,
+                confirmationText: 'Delete',
+                confirmationButtonProps: {
+                    color: 'error'
+                }
+            }).then(()=>true).catch(()=>false);
+            if (!confirmed) return;
+            await updateDoc(doc(firestore, 'hosts', hostId, 'functions', definition.$id), {
+                deletedAt: Timestamp.now()
+            });
+            enqueueSnackbar('Function deleted', {
+                variant: 'success',
+                persist: false
+            });
+        }, [
+        user,
+        confirm,
+        firestore,
+        hostId,
+        enqueueSnackbar
+    ]);
+    const setRow = (section, operationIndex, rowIndex, key, value)=>patch((previous)=>{
+            const operations = previous.operations.map((operation, index)=>index === operationIndex ? _extends({}, operation, {
+                    [section]: operation[section].map((row, index2)=>index2 === rowIndex ? _extends({}, row, {
+                            [key]: value
+                        }) : row)
+                }) : operation);
+            return _extends({}, previous, {
+                operations
+            });
+        });
+    const renderSetRows = (section, operationIndex)=>{
+        const operation = draft == null ? void 0 : draft.operations[operationIndex];
+        if (!operation) return null;
+        return /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1,
+            children: [
+                operation[section].map((row, rowIndex)=>/*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                children: 'SET'
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                value: row.set,
+                                onChange: (event)=>setRow(section, operationIndex, rowIndex, 'set', event.target.value),
+                                size: "small",
+                                select: true,
+                                sx: {
+                                    minWidth: 90
+                                },
+                                children: names.map((name)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: name,
+                                        children: name
+                                    }, name))
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                children: 'equal to'
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                value: row.expression,
+                                placeholder: "P1 + P2",
+                                onChange: (event)=>setRow(section, operationIndex, rowIndex, 'expression', event.target.value),
+                                size: "small",
+                                sx: {
+                                    flex: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                size: "small",
+                                "aria-label": "remove operation row",
+                                onClick: ()=>patch((previous)=>_extends({}, previous, {
+                                            operations: previous.operations.map((op, index)=>index === operationIndex ? _extends({}, op, {
+                                                    [section]: op[section].filter((_, index2)=>index2 !== rowIndex)
+                                                }) : op)
+                                        })),
+                                children: '×'
+                            })
+                        ]
+                    }, rowIndex)),
+                /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    sx: {
+                        alignSelf: 'flex-start'
+                    },
+                    onClick: ()=>patch((previous)=>_extends({}, previous, {
+                                operations: previous.operations.map((op, index)=>index === operationIndex ? _extends({}, op, {
+                                        [section]: [
+                                            ...op[section],
+                                            {
+                                                set: '',
+                                                expression: ''
+                                            }
+                                        ]
+                                    }) : op)
+                            })),
+                    children: 'Add set'
+                })
+            ]
+        });
+    };
+    return /*#__PURE__*/ _jsxs(CardDisplay, {
+        header: 'Functions',
+        help: pluginDocsHelp('bindings', {
+            anchor: '#no-code-functions'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1,
+                children: [
+                    functions.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'Build no-code logic: parameters in, conditional operations, ' + 'a value out. Wire functions into components and workflows ' + 'as the builder grows.'
+                    }) : visibleFunctions.map((definition)=>{
+                        var _definition_parameters;
+                        return /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                alignItems: 'center'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    sx: {
+                                        flex: 1,
+                                        minWidth: 0
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body2",
+                                            noWrap: true,
+                                            children: definition.name
+                                        }),
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "caption",
+                                            color: "text.secondary",
+                                            noWrap: true,
+                                            children: `${((_definition_parameters = definition.parameters) != null ? _definition_parameters : []).map((p)=>p.name).join(', ') || 'no parameters'} → ${definition.returnValue || '—'}`
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    disabled: usageLoading === definition.$id,
+                                    onClick: handleShowUsage(definition),
+                                    children: usageLoading === definition.$id ? 'Scanning…' : 'Usage'
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    onClick: ()=>{
+                                        var _definition_name, _definition_parameters, _definition_variables, _definition_operations, _definition_returnValue;
+                                        setTestArgs({});
+                                        setTestResult(null);
+                                        setDraft({
+                                            id: definition.$id,
+                                            name: (_definition_name = definition.name) != null ? _definition_name : '',
+                                            parameters: (_definition_parameters = definition.parameters) != null ? _definition_parameters : [],
+                                            variables: (_definition_variables = definition.variables) != null ? _definition_variables : [],
+                                            operations: (_definition_operations = definition.operations) != null ? _definition_operations : [],
+                                            returnValue: (_definition_returnValue = definition.returnValue) != null ? _definition_returnValue : ''
+                                        });
+                                    },
+                                    children: 'Edit'
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    color: "error",
+                                    onClick: handleDelete(definition),
+                                    children: 'Delete'
+                                })
+                            ]
+                        }, definition.$id);
+                    }),
+                    functions.length === 0 ? null : /*#__PURE__*/ _jsx(ListPagination, {
+                        page: page,
+                        pageSize: pageSize,
+                        rowCount: visibleFunctions.length,
+                        // The functions the card HOLDS. Not `functionCount`, which is the
+                        // site's total including soft-deleted rows and answers the quota's
+                        // question rather than the reader's.
+                        count: functions.length,
+                        onPageChange: setPage,
+                        onPageSizeChange: setPageSize
+                    }),
+                    functionsTruncated ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "info",
+                        children: `Showing ${FUNCTION_CEILING} functions, ordered by id. This site ` + 'has more — the duplicate-name check below only covers the ' + 'ones listed here, so a name may already be taken by one that ' + 'is not.'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        color: "primary",
+                        sx: {
+                            alignSelf: 'flex-start'
+                        },
+                        onClick: ()=>{
+                            // Plan cap (AGL-99): dark-launch — plan-less workspaces uncapped.
+                            // The site's functions, not this page of them (AGL-1716).
+                            const quota = checkQuota(org, 'functionsPerHost', functionCount);
+                            if (!quota.allowed) {
+                                return void enqueueSnackbar(`Function limit reached (${quota.limit}) — upgrade in Billing`, {
+                                    variant: 'warning',
+                                    persist: false
+                                });
+                            }
+                            setTestArgs({});
+                            setTestResult(null);
+                            setDraft(emptyDraft());
+                        },
+                        children: 'Add function'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: Boolean(draft),
+                onClose: ()=>setDraft(null),
+                maxWidth: "sm",
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: (draft == null ? void 0 : draft.id) ? 'Edit Function' : 'Add Function'
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogContent, {
+                        sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 1.5,
+                            pt: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Name",
+                                helperText: nameTaken ? 'A function with this name already exists' : 'Used to identify the function',
+                                error: nameTaken,
+                                value: (_ref2 = draft == null ? void 0 : draft.name) != null ? _ref2 : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            name: event.target.value
+                                        })),
+                                size: "small",
+                                autoFocus: true,
+                                sx: {
+                                    mt: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(SectionLabel, {
+                                children: 'Parameters'
+                            }),
+                            ((_ref3 = draft == null ? void 0 : draft.parameters) != null ? _ref3 : []).map((parameter, index)=>/*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    sx: {
+                                        alignItems: 'center'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Name",
+                                            value: parameter.name,
+                                            onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                                        parameters: previous.parameters.map((p, index2)=>index2 === index ? _extends({}, p, {
+                                                                name: event.target.value.replace(/[^a-zA-Z0-9_]/g, '')
+                                                            }) : p)
+                                                    })),
+                                            size: "small",
+                                            sx: {
+                                                width: 110
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Type",
+                                            value: parameter.type,
+                                            onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                                        parameters: previous.parameters.map((p, index2)=>index2 === index ? _extends({}, p, {
+                                                                type: event.target.value
+                                                            }) : p)
+                                                    })),
+                                            size: "small",
+                                            select: true,
+                                            sx: {
+                                                width: 130
+                                            },
+                                            children: VALUE_TYPES.map((type)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: type.value,
+                                                    children: type.label
+                                                }, type.value))
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Stack, {
+                                            direction: "row",
+                                            spacing: 0.5,
+                                            sx: {
+                                                alignItems: 'center',
+                                                flex: 1
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "caption",
+                                                    color: "text.secondary",
+                                                    children: 'Required'
+                                                }),
+                                                /*#__PURE__*/ _jsx(Switch, {
+                                                    size: "small",
+                                                    checked: Boolean(parameter.required),
+                                                    onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                                                parameters: previous.parameters.map((p, index2)=>index2 === index ? _extends({}, p, {
+                                                                        required: event.target.checked
+                                                                    }) : p)
+                                                            }))
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            size: "small",
+                                            "aria-label": "remove parameter",
+                                            onClick: ()=>patch((previous)=>_extends({}, previous, {
+                                                        parameters: previous.parameters.filter((_, index2)=>index2 !== index)
+                                                    })),
+                                            children: '×'
+                                        })
+                                    ]
+                                }, index)),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                sx: {
+                                    alignSelf: 'flex-start'
+                                },
+                                onClick: ()=>patch((previous)=>_extends({}, previous, {
+                                            parameters: [
+                                                ...previous.parameters,
+                                                {
+                                                    name: `P${previous.parameters.length + 1}`,
+                                                    type: 'number',
+                                                    required: false
+                                                }
+                                            ]
+                                        })),
+                                children: 'Add parameter'
+                            }),
+                            ((_ref4 = draft == null ? void 0 : draft.parameters) != null ? _ref4 : []).length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(SectionLabel, {
+                                        children: 'What visitors see'
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        color: "text.secondary",
+                                        children: 'Used by a Function Widget on a page. A parameter with ' + 'choices is asked as a list, a number as a number box and ' + 'a true/false as a switch.'
+                                    }),
+                                    ((_ref5 = draft == null ? void 0 : draft.parameters) != null ? _ref5 : []).map((parameter, index)=>/*#__PURE__*/ _jsx(ParameterAudienceFields, {
+                                            parameter: parameter,
+                                            onChange: (next)=>patch((previous)=>_extends({}, previous, {
+                                                        parameters: previous.parameters.map((p, index2)=>index2 === index ? next : p)
+                                                    }))
+                                        }, index))
+                                ]
+                            }) : null,
+                            /*#__PURE__*/ _jsx(SectionLabel, {
+                                children: 'Variables'
+                            }),
+                            ((_ref6 = draft == null ? void 0 : draft.variables) != null ? _ref6 : []).map((variable, index)=>/*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    sx: {
+                                        alignItems: 'center'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Name",
+                                            value: variable.name,
+                                            onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                                        variables: previous.variables.map((v, index2)=>index2 === index ? _extends({}, v, {
+                                                                name: event.target.value.replace(/[^a-zA-Z0-9_]/g, '')
+                                                            }) : v)
+                                                    })),
+                                            size: "small",
+                                            sx: {
+                                                width: 110
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Type",
+                                            value: variable.type,
+                                            onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                                        variables: previous.variables.map((v, index2)=>index2 === index ? _extends({}, v, {
+                                                                type: event.target.value
+                                                            }) : v)
+                                                    })),
+                                            size: "small",
+                                            select: true,
+                                            sx: {
+                                                width: 130
+                                            },
+                                            children: VALUE_TYPES.map((type)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: type.value,
+                                                    children: type.label
+                                                }, type.value))
+                                        }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            size: "small",
+                                            "aria-label": "remove variable",
+                                            sx: {
+                                                ml: 'auto'
+                                            },
+                                            onClick: ()=>patch((previous)=>_extends({}, previous, {
+                                                        variables: previous.variables.filter((_, index2)=>index2 !== index)
+                                                    })),
+                                            children: '×'
+                                        })
+                                    ]
+                                }, index)),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                sx: {
+                                    alignSelf: 'flex-start'
+                                },
+                                onClick: ()=>patch((previous)=>_extends({}, previous, {
+                                            variables: [
+                                                ...previous.variables,
+                                                {
+                                                    name: `V${previous.variables.length + 1}`,
+                                                    type: 'number'
+                                                }
+                                            ]
+                                        })),
+                                children: 'Add variable'
+                            }),
+                            /*#__PURE__*/ _jsx(SectionLabel, {
+                                children: 'Operations'
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: 'An expression can use + − × ÷ and parentheses, any site ' + 'variable by its name (a dictionary’s members as ' + 'name.member), and ' + `${FUNCTION_BUILTIN_NAMES.map((name)=>`${name}()`).join(', ')}.`
+                            }),
+                            ((_ref7 = draft == null ? void 0 : draft.operations) != null ? _ref7 : []).map((operation, index)=>/*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 1,
+                                    sx: {
+                                        border: 1,
+                                        borderColor: 'divider',
+                                        borderRadius: 1,
+                                        p: 1.5
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "caption",
+                                            color: "text.secondary",
+                                            children: `${index + 1} · If below is TRUE`
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Stack, {
+                                            direction: "row",
+                                            spacing: 1,
+                                            sx: {
+                                                alignItems: 'center'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    value: operation.if.left,
+                                                    placeholder: "P1",
+                                                    onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                                                operations: previous.operations.map((op, index2)=>index2 === index ? _extends({}, op, {
+                                                                        if: _extends({}, op.if, {
+                                                                            left: event.target.value
+                                                                        })
+                                                                    }) : op)
+                                                            })),
+                                                    size: "small",
+                                                    sx: {
+                                                        flex: 1
+                                                    }
+                                                }),
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    value: operation.if.comparator,
+                                                    onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                                                operations: previous.operations.map((op, index2)=>index2 === index ? _extends({}, op, {
+                                                                        if: _extends({}, op.if, {
+                                                                            comparator: event.target.value
+                                                                        })
+                                                                    }) : op)
+                                                            })),
+                                                    size: "small",
+                                                    select: true,
+                                                    sx: {
+                                                        width: 84
+                                                    },
+                                                    children: COMPARATORS.map((comparator)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: comparator,
+                                                            children: comparator
+                                                        }, comparator))
+                                                }),
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    value: operation.if.right,
+                                                    placeholder: "P2",
+                                                    onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                                                operations: previous.operations.map((op, index2)=>index2 === index ? _extends({}, op, {
+                                                                        if: _extends({}, op.if, {
+                                                                            right: event.target.value
+                                                                        })
+                                                                    }) : op)
+                                                            })),
+                                                    size: "small",
+                                                    sx: {
+                                                        flex: 1
+                                                    }
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "caption",
+                                            color: "text.secondary",
+                                            children: 'Then do this'
+                                        }),
+                                        renderSetRows('then', index),
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "caption",
+                                            color: "text.secondary",
+                                            children: 'Otherwise do this'
+                                        }),
+                                        renderSetRows('otherwise', index)
+                                    ]
+                                }, index)),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                sx: {
+                                    alignSelf: 'flex-start'
+                                },
+                                onClick: ()=>patch((previous)=>_extends({}, previous, {
+                                            operations: [
+                                                ...previous.operations,
+                                                {
+                                                    if: {
+                                                        left: '',
+                                                        comparator: '<=',
+                                                        right: ''
+                                                    },
+                                                    then: [
+                                                        {
+                                                            set: '',
+                                                            expression: ''
+                                                        }
+                                                    ],
+                                                    otherwise: []
+                                                }
+                                            ]
+                                        })),
+                                children: 'Add operation'
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Return value",
+                                value: (_ref8 = draft == null ? void 0 : draft.returnValue) != null ? _ref8 : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            returnValue: event.target.value
+                                        })),
+                                size: "small",
+                                select: true,
+                                children: names.map((name)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: name,
+                                        children: name
+                                    }, name))
+                            }),
+                            /*#__PURE__*/ _jsx(Divider, {}),
+                            /*#__PURE__*/ _jsx(SectionLabel, {
+                                children: 'Test run'
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                sx: {
+                                    flexWrap: 'wrap'
+                                },
+                                children: [
+                                    ((_ref9 = draft == null ? void 0 : draft.parameters) != null ? _ref9 : []).map((parameter)=>{
+                                        var _testArgs_parameter_name;
+                                        return /*#__PURE__*/ _jsx(TextField, {
+                                            label: parameter.name,
+                                            value: (_testArgs_parameter_name = testArgs[parameter.name]) != null ? _testArgs_parameter_name : '',
+                                            onChange: (event)=>setTestArgs((previous)=>_extends({}, previous, {
+                                                        [parameter.name]: event.target.value
+                                                    })),
+                                            size: "small",
+                                            sx: {
+                                                width: 110
+                                            }
+                                        }, parameter.name);
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        color: "primary",
+                                        onClick: handleTestRun,
+                                        children: 'Run'
+                                    })
+                                ]
+                            }),
+                            testResult ? /*#__PURE__*/ _jsx(Alert, {
+                                severity: testResult.startsWith('Error') ? 'warning' : 'success',
+                                children: testResult
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>setDraft(null),
+                                children: 'Cancel'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                color: "primary",
+                                disabled: !(draft == null ? void 0 : draft.name.trim()) || nameTaken,
+                                onClick: handleSave,
+                                children: 'Done'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(WhereUsedDialog, {
+                hostId: hostId,
+                usage: usage,
+                onClose: ()=>setUsage(null)
+            })
+        ]
+    });
+}
+HostFunctionsCard.displayName = 'HostFunctionsCard';
+export default HostFunctionsCard;
+
+//# sourceMappingURL=host-functions-card.component.js.map