@phis/ui 0.1.0

package/plugins/runtime-modules/core/widgets/table/client.js

@@ -0,0 +1,935 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ReloadOutlined, UndoOutlined } from "@ant-design/icons";
+import { PHI_TABLE_WIDGET_DEFAULT_LABELS } from "../../../../../components/widgets/label-types/table";
+import { formatPhiTableWidgetLabel } from "../../../../../components/widgets/label-types/table";
+import { App, Flex, Space, Tooltip, Typography } from "antd";
+import { PhiTagControl } from "../../../../../components/controls/phi-tag-control";
+import { Fragment, useCallback, useEffect, useEffectEvent, useMemo, useState } from "react";
+import { PhiMultiSelectControl } from "../../../../../components/controls/phi-multi-select-control";
+import { PhiAlertControl } from "../../../../../components/controls/phi-alert-control";
+import { PhiCheckboxControl } from "../../../../../components/controls/phi-checkbox-control";
+import { PhiCascaderControl } from "../../../../../components/controls/phi-cascader-control";
+import { PhiCollectionHeaderControl } from "../../../../../components/controls/phi-collection-header-control";
+import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
+import { PhiPopoverControl } from "../../../../../components/controls/phi-popover-control";
+import { PhiToolbarControl } from "../../../../../components/controls/phi-toolbar-control";
+import { PhiConfirmControl } from "../../../../../components/controls/phi-confirm-control";
+import { usePhiControlOptionsProvider } from "../../../../../components/controls/phi-options-provider";
+import { PhiSelectControl } from "../../../../../components/controls/phi-select-control";
+import { PhiLabeledControl } from "../../../../../components/controls/phi-labeled-control";
+import { PhiSwitchControl } from "../../../../../components/controls/phi-switch-control";
+import { readPhiTableControlValue, } from "../../../../../components/controls/phi-table-control";
+import { PhiTextControl } from "../../../../../components/controls/phi-text-control";
+import { PhiLink } from "../../../../../components/navigation/phi-link";
+import { PhiIcon } from "../../../../../components/shell/phi-icon";
+import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
+import { usePhiSignalListener } from "../../../../../components/runtime/runtime-signal-bus";
+import { usePhiSignalEmitter, usePhiSignalIdentity } from "../../../../../components/runtime/runtime-signal-identity";
+import { usePhiTableBinding } from "../../../../../components/tables/client/phi-table-binding";
+import { PhiTableBindingControl } from "../../../../../components/tables/client/phi-table-binding-control";
+import { clearPhiDataDragPayload, readPhiDataDragPayload } from "../../../../../components/runtime/client/phi-data-dnd";
+import { formatPhiDate, formatPhiDateTime } from "../../../../../helpers/format-date-time";
+import { formatPhiTranslation } from "../../../../../helpers/translation-format";
+import { readPhiTableColumnOrderSignalValue, readPhiTableBindingParamsSignalValue, readPhiTableExpansionSignalValue, readPhiTableFilters, readPhiTableQuery, readPhiTableActionSignalValue, readPhiTableRowOptions, validatePhiTableWidgetBinding, } from "../../../../../types/table-widget";
+import { collectPhiRuntimeValueConditions, combinePhiRuntimeConditionExpressions, evaluatePhiRuntimeConditionExpression, readPhiRuntimeConditionStateSignalValue, } from "../../../../../types/runtime-condition";
+import { findPhiSignalRoutesByCapabilityId, isPhiControllerSignalAddress, } from "../../../../../types/signals";
+import { resolvePhiButtonIcon } from "../../../../../components/widgets/client/shared/phi-button-icons";
+const PHI_TABLE_ACTION_BUTTON_STYLE = { whiteSpace: "nowrap" };
+function isRecord(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function normalizeTextValue(value) {
+    if (value == null)
+        return "";
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean")
+        return String(value);
+    if (Array.isArray(value))
+        return value.map(normalizeTextValue).filter(Boolean).join(", ");
+    return isRecord(value) ? JSON.stringify(value) : "";
+}
+function formatTableActionTemplate(value, templateValue) {
+    return value && templateValue != null ? formatPhiTableWidgetLabel(value, templateValue) : value;
+}
+function resolveTableTagColor(color) {
+    return typeof color === "object" ? color.value : color;
+}
+function renderTableValueContent(value, column) {
+    if (value == null || value === "")
+        return null;
+    const normalizedValue = normalizeTextValue(value);
+    const displayValue = column.valueMap?.[normalizedValue] ?? normalizedValue;
+    if (column.renderer === "email" || column.renderer === "link") {
+        const href = String(value);
+        return _jsx(PhiLink, { href: column.renderer === "email" ? `mailto:${href}` : href, children: displayValue });
+    }
+    if (column.renderer === "tags") {
+        const values = Array.isArray(value) ? value : [value];
+        return (_jsx(Space, { size: [4, 4], wrap: true, children: values.map((entry, index) => {
+                const normalizedEntry = normalizeTextValue(entry);
+                return (_jsx(PhiTagControl, { color: resolveTableTagColor(column.tagColorMap?.[normalizedEntry]), variant: column.tagVariant ?? "outlined", children: column.valueMap?.[normalizedEntry] ?? normalizedEntry }, `${normalizedEntry}:${index}`));
+            }) }));
+    }
+    if (column.renderer === "date" || column.renderer === "datetime") {
+        return column.renderer === "date" ? formatPhiDate(normalizedValue) : formatPhiDateTime(normalizedValue);
+    }
+    if (column.renderer === "json" || column.renderer === "code")
+        return _jsx(Typography.Text, { code: true, children: displayValue });
+    if (column.renderer === "badge") {
+        return (_jsx(PhiTagControl, { color: resolveTableTagColor(column.tagColorMap?.[normalizedValue]), variant: column.tagVariant ?? "outlined", children: displayValue }));
+    }
+    if (column.renderer === "switch")
+        return _jsx(PhiSwitchControl, { checked: value === true, readOnly: true });
+    if (column.renderer === "checkbox")
+        return _jsx(PhiCheckboxControl, { checked: value === true, readOnly: true });
+    if (column.renderer === "icon")
+        return typeof value === "string" && value.trim() ? _jsx(PhiIcon, { name: value }) : null;
+    return displayValue;
+}
+function renderTableValue(value, column, row) {
+    const content = renderTableValueContent(value, column);
+    if (!column.iconFieldKey) {
+        return content;
+    }
+    const iconName = row?.[column.iconFieldKey];
+    if (typeof iconName !== "string" || !iconName.trim()) {
+        return content;
+    }
+    return (_jsxs(Space, { size: 6, children: [_jsx(PhiIcon, { name: iconName }), content] }));
+}
+function renderTableSummaryItem(item, value) {
+    const renderedValue = value == null ? "—" : String(value);
+    if (!item.label)
+        return renderedValue;
+    return item.labelPlacement === "after"
+        ? _jsxs(_Fragment, { children: [renderedValue, " ", item.label] })
+        : _jsxs(_Fragment, { children: [item.label, " ", renderedValue] });
+}
+/**
+ * The column heading: its text, its icon, or the icon alone with the text as its name.
+ *
+ * An icon-only heading keeps the title in the tooltip and in `aria-label`, so a screen reader and a
+ * hesitating pointer both still get the word the column was named after.
+ */
+function buildTableColumnTitle(column) {
+    if (!column.titleIcon) {
+        return column.title;
+    }
+    const icon = _jsx(PhiIcon, { name: column.titleIcon });
+    if (column.titleDisplay === "icon") {
+        return (_jsx(Tooltip, { title: column.title, children: _jsx("span", { role: "img", "aria-label": column.title, children: icon }) }));
+    }
+    return (_jsxs(Flex, { align: "center", gap: 4, wrap: false, children: [icon, _jsx("span", { children: column.title })] }));
+}
+function buildDefaultFilterState(filters) {
+    return Object.fromEntries((filters ?? []).flatMap((filter) => filter.defaultValue === undefined ? [] : [[filter.key, filter.defaultValue]]));
+}
+function buildQueryFilters(filters, values) {
+    const result = {};
+    for (const filter of filters ?? []) {
+        const value = values[filter.key];
+        if (filter.type === "dateRange") {
+            const range = isRecord(value) ? value : null;
+            const start = typeof range?.start === "string" ? range.start : "";
+            const end = typeof range?.end === "string" ? range.end : "";
+            if (start)
+                result[filter.startKey] = start;
+            if (end)
+                result[filter.endKey] = end;
+        }
+        else if ((typeof value === "string" && value !== "") ||
+            typeof value === "boolean" ||
+            (Array.isArray(value) && value.length > 0)) {
+            result[filter.key] = Array.isArray(value) ? [...value] : value;
+        }
+    }
+    return result;
+}
+function readTableFilterValue(filter, filters) {
+    if (filter.type === "dateRange") {
+        const start = filters?.[filter.startKey];
+        const end = filters?.[filter.endKey];
+        return {
+            start: typeof start === "string" ? start : "",
+            end: typeof end === "string" ? end : "",
+        };
+    }
+    const value = filters?.[filter.key];
+    if (filter.type === "boolean")
+        return typeof value === "boolean" ? value : undefined;
+    if (filter.type === "select" && filter.multiple) {
+        return Array.isArray(value) ? value.filter((entry) => typeof entry === "string") : [];
+    }
+    return typeof value === "string" ? value : undefined;
+}
+function updateTableQueryFilters(current, filter, value) {
+    const next = { ...(current ?? {}) };
+    if (filter.type === "dateRange") {
+        const range = isRecord(value) ? value : {};
+        const start = typeof range.start === "string" ? range.start : "";
+        const end = typeof range.end === "string" ? range.end : "";
+        if (start)
+            next[filter.startKey] = start;
+        else
+            delete next[filter.startKey];
+        if (end)
+            next[filter.endKey] = end;
+        else
+            delete next[filter.endKey];
+        return next;
+    }
+    if ((typeof value === "string" && value !== "") ||
+        typeof value === "boolean" ||
+        (Array.isArray(value) && value.length > 0)) {
+        next[filter.key] = Array.isArray(value) ? [...value] : value;
+    }
+    else {
+        delete next[filter.key];
+    }
+    return next;
+}
+function readRowIdentity(row, path) {
+    const value = readPhiTableControlValue(row, path);
+    return typeof value === "string" || (typeof value === "number" && Number.isFinite(value)) ? value : null;
+}
+function findMatchingCondition(row, expression, controllers) {
+    if (!expression)
+        return null;
+    const result = evaluatePhiRuntimeConditionExpression(expression, { row, controllers });
+    if (result === "not-matched")
+        return null;
+    return collectPhiRuntimeValueConditions(expression).find((condition) => condition.reason && evaluatePhiRuntimeConditionExpression(condition, { row, controllers }) === "matched") ?? expression;
+}
+function matchesAllConditions(row, expression, controllers) {
+    return !expression || evaluatePhiRuntimeConditionExpression(expression, { row, controllers }) === "matched";
+}
+function matchesListenRoute(route, signal) {
+    return route.receiver !== null && route.channel === signal.channel && route.action === signal.action &&
+        route.valueType === signal.valueType &&
+        (route.valueType !== "json" || route.valueSchema === signal.valueSchema);
+}
+function resolveTableActions(definitions, capabilities) {
+    const byKey = new Map(capabilities?.map((capability) => [capability.key, capability]) ?? []);
+    const result = [];
+    for (const definition of definitions ?? []) {
+        if (definition.execution !== "provider") {
+            result.push(definition);
+            continue;
+        }
+        const capability = byKey.get(definition.key);
+        if (!capability)
+            continue;
+        result.push({
+            ...definition,
+            visibleWhen: combinePhiRuntimeConditionExpressions("all", [capability.visibleWhen, definition.visibleWhen]),
+            disabledWhen: combinePhiRuntimeConditionExpressions("any", [capability.disabledWhen, definition.disabledWhen]),
+        });
+    }
+    return result;
+}
+export function PhiTableWidgetClient({ config: inputConfig, externalSearch, externalQuery, refreshKey, onData, onMutation, onStateChange, labels = PHI_TABLE_WIDGET_DEFAULT_LABELS, onAction, }) {
+    const { modal } = App.useApp();
+    const { token } = usePhiConfig();
+    const configKey = JSON.stringify(inputConfig);
+    const config = useMemo(() => JSON.parse(configKey), [configKey]);
+    const { presentation, features, source } = config;
+    const [bindingParams, setBindingParams] = useState(() => isRecord(source?.params) ? source.params : {});
+    const resolvedSource = useMemo(() => source ? { ...source, params: bindingParams } : null, [bindingParams, source]);
+    const resolvedControlSize = presentation.controlSize ??
+        (features.tools?.mode !== "external" ? "small" : undefined);
+    const initialQuery = config.initialQuery ?? {};
+    const defaultSorts = initialQuery.sorts ?? features.sorting?.defaultSorts ?? [];
+    const initialFilters = {
+        ...buildQueryFilters(features.filters, buildDefaultFilterState(features.filters)),
+        ...(initialQuery.filters ?? {}),
+    };
+    const [searchDraft, setSearchDraft] = useState(initialQuery.search ?? "");
+    const [conditionControllerStates, setConditionControllerStates] = useState({});
+    const [columnOrder, setColumnOrder] = useState(() => presentation.columns.filter((column) => !column.hidden).map((column) => column.key));
+    const signalIdentity = usePhiSignalIdentity();
+    const emitSignal = usePhiSignalEmitter(signalIdentity.sender);
+    const emitRoutes = useMemo(() => config.signalRoutes?.emits ?? [], [config.signalRoutes?.emits]);
+    const listenRoutes = useMemo(() => config.signalRoutes?.listens ?? [], [config.signalRoutes?.listens]);
+    /*
+     * `correlationId` is the exchange this output belongs to: present when the Table is answering a
+     * signal it received, absent when the operator drove it from the Table itself, which begins one.
+     */
+    const emitCapability = useCallback((capabilityId, value, correlationId) => {
+        for (const route of findPhiSignalRoutesByCapabilityId(emitRoutes, capabilityId)) {
+            if (route.receiver == null || (route.valueType === "json" && !route.valueSchema))
+                continue;
+            emitSignal({
+                scope: route.scope,
+                channel: route.channel,
+                action: route.action,
+                value: route.valueType === "none" ? null : value,
+                valueType: route.valueType,
+                valueSchema: route.valueSchema ?? null,
+                receiver: route.receiver,
+                correlationId,
+            });
+        }
+    }, [emitRoutes, emitSignal]);
+    const validateResource = useCallback((candidate) => {
+        const contractError = validatePhiTableWidgetBinding(config, candidate)[0];
+        if (contractError)
+            return contractError;
+        const iconAction = [
+            ...(config.features.actions?.toolbar ?? []),
+            ...(config.features.actions?.row ?? []),
+            ...(config.features.actions?.bulk ?? []),
+        ].find((action) => action.display !== "label" && action.icon && !resolvePhiButtonIcon(action.icon));
+        if (iconAction)
+            return `Table action "${iconAction.key}" references an unavailable icon.`;
+        const iconBindingTool = config.features.tools?.bindingFields?.find((tool) => tool.create?.display !== "label" && tool.create?.icon && !resolvePhiButtonIcon(tool.create.icon));
+        return iconBindingTool
+            ? `Table binding field "${iconBindingTool.key}" create tool references an unavailable icon.`
+            : null;
+    }, [config]);
+    const binding = usePhiTableBinding({
+        source: resolvedSource,
+        initialQuery: { ...initialQuery, sorts: defaultSorts, filters: initialFilters },
+        externalQuery,
+        externalSearch,
+        defaultPageSize: features.pagination?.pageSize ?? 20,
+        refreshKey,
+        preserveSelectedRowIdentities: features.rowSelection?.preserveSelectedRowIdentities,
+        initialExpandedRowIdentities: features.structure?.mode === "tree"
+            ? features.structure.defaultExpandedRowIdentities ?? initialQuery.expandedRowIdentities ?? []
+            : [],
+        onData,
+        onMutation: (result) => {
+            onMutation?.(result);
+            emitCapability("mutationChange", result);
+        },
+        validateResource,
+    });
+    const { resource, bindingError, contractError, rows, total, summary, loading, error, query, resolvedQuery, setQuery, selectedRowIdentities, setSelectedRowIdentities, expandedRowIdentities, setExpandedRowIdentities, reload, executeAction, commitField, commitRow, isFieldMutationPending, moveRow, drop, } = binding;
+    const toolbarActions = useMemo(() => resolveTableActions(features.actions?.toolbar, resource?.actions), [features.actions?.toolbar, resource?.actions]);
+    const rowActions = useMemo(() => resolveTableActions(features.actions?.row, resource?.actions), [features.actions?.row, resource?.actions]);
+    const bulkActions = useMemo(() => resolveTableActions(features.actions?.bulk, resource?.actions), [features.actions?.bulk, resource?.actions]);
+    const configuredBindingFields = useMemo(() => (features.tools?.bindingFields ?? []).flatMap((tool) => {
+        const field = resource?.bindingFields?.find((candidate) => candidate.key === tool.key);
+        return field ? [{ field, tool }] : [];
+    }), [features.tools?.bindingFields, resource?.bindingFields]);
+    const emitStateChange = useEffectEvent((state) => onStateChange?.(state));
+    const conditionControllerAddresses = useMemo(() => new Set([
+        ...toolbarActions,
+        ...rowActions,
+        ...bulkActions,
+    ].flatMap((action) => [action.visibleWhen, action.disabledWhen])
+        .concat(presentation.columns.map((column) => column.editor?.disabledWhen))
+        .concat(resource?.fields.map((field) => field.mutableWhen) ?? [])
+        .concat([features.rowSelection?.disabledWhen])
+        .concat([features.editing?.disabledWhen])
+        .concat([presentation.row?.mutedWhen])
+        .flatMap(collectPhiRuntimeValueConditions)
+        .flatMap((condition) => condition.source === "controller" && condition.controllerAddress
+        ? [condition.controllerAddress]
+        : [])), [bulkActions, features.editing?.disabledWhen, features.rowSelection?.disabledWhen, presentation.columns, presentation.row?.mutedWhen, resource?.fields, rowActions, toolbarActions]);
+    const effectiveLoading = loading && !bindingError && !contractError;
+    useEffect(() => {
+        if (features.search?.enabled !== true || query.search === searchDraft)
+            return undefined;
+        const timer = window.setTimeout(() => {
+            setQuery((current) => ({ ...current, page: 1, cursor: null, search: searchDraft }));
+        }, features.search.debounceMs ?? 250);
+        return () => window.clearTimeout(timer);
+    }, [features.search?.debounceMs, features.search?.enabled, query.search, searchDraft, setQuery]);
+    const updateColumnOrder = useCallback((next, correlationId) => {
+        const known = new Set(presentation.columns.filter((column) => !column.hidden).map((column) => column.key));
+        if (next.length !== known.size || next.some((key) => !known.has(key)) || new Set(next).size !== next.length)
+            return;
+        setColumnOrder(next);
+        emitCapability("columnsChange", { columnOrder: [...next] }, correlationId);
+    }, [emitCapability, presentation.columns]);
+    const updateExpandedRows = useCallback((next, correlationId) => {
+        setExpandedRowIdentities(next);
+        emitCapability("expansionChange", { expandedRowIdentities: [...next] }, correlationId);
+    }, [emitCapability, setExpandedRowIdentities]);
+    const updateSelection = useCallback((next, correlationId) => {
+        setSelectedRowIdentities(next);
+        emitCapability("selectionChange", { selectedRowIdentities: [...next] }, correlationId);
+    }, [emitCapability, setSelectedRowIdentities]);
+    const updateBindingParams = useCallback((next, correlationId) => {
+        setBindingParams(next);
+        setQuery((current) => ({ ...current, page: 1, cursor: null }));
+        setSelectedRowIdentities([]);
+        setExpandedRowIdentities([]);
+        emitCapability("bindingParamsChange", {
+            params: Object.fromEntries(configuredBindingFields.flatMap(({ field }) => {
+                const value = next[field.key];
+                return value == null || typeof value === "string" || typeof value === "boolean" ||
+                    typeof value === "number" && Number.isFinite(value) ||
+                    Array.isArray(value) && value.every((entry) => typeof entry === "string" || typeof entry === "number" && Number.isFinite(entry))
+                    ? [[field.key, value]]
+                    : [];
+            })),
+        }, correlationId);
+    }, [configuredBindingFields, emitCapability, setExpandedRowIdentities, setQuery, setSelectedRowIdentities]);
+    useEffect(() => {
+        if (!resource?.bindingFields?.length)
+            return;
+        const next = { ...bindingParams };
+        let changed = false;
+        for (const field of resource.bindingFields) {
+            if (next[field.key] === undefined && field.defaultValue !== undefined) {
+                next[field.key] = field.defaultValue;
+                changed = true;
+            }
+        }
+        if (!changed)
+            return;
+        let cancelled = false;
+        queueMicrotask(() => {
+            if (!cancelled)
+                updateBindingParams(next);
+        });
+        return () => { cancelled = true; };
+    }, [bindingParams, resource?.bindingFields, updateBindingParams]);
+    const activateAction = useCallback((action, row, identities = [], actionValue, correlationId) => {
+        if (onAction?.({ action: action, row, actionValue, selectedRowIdentities: identities }) === true)
+            return;
+        const rowIdentity = row && resource ? readRowIdentity(row, resource.rowIdentityPath) : null;
+        const signalValue = {
+            actionKey: action.key,
+            rowIdentity,
+            selectedRowIdentities: [...identities],
+            ...(actionValue === undefined ? null : { actionValue }),
+        };
+        if (action.execution === "signal") {
+            emitCapability("actionActivate", signalValue, correlationId);
+            return;
+        }
+        if (action.execution === "link")
+            return;
+        if (!resource)
+            return;
+        void executeAction({
+            kind: "action",
+            actionKey: action.key,
+            rowIdentity,
+            selectedRowIdentities: identities,
+            actionValue,
+            query: resolvedQuery,
+        }).catch(() => undefined);
+    }, [emitCapability, executeAction, onAction, resolvedQuery, resource]);
+    usePhiSignalListener(useCallback((signal) => {
+        const route = listenRoutes.find((candidate) => matchesListenRoute(candidate, signal));
+        if (!route || (signal.receiver !== "broadcast" && signal.receiver !== signalIdentity.receiver))
+            return;
+        if (route.capabilityId === "searchChange" && typeof signal.value === "string") {
+            setSearchDraft(signal.value);
+            setQuery((current) => ({ ...current, page: 1, cursor: null, search: signal.value }));
+        }
+        else if (route.capabilityId === "searchClear") {
+            setSearchDraft("");
+            setQuery((current) => ({ ...current, page: 1, cursor: null, search: "" }));
+        }
+        else if (route.capabilityId === "queryChange") {
+            const next = readPhiTableQuery(signal.value);
+            if (next)
+                setQuery(next);
+        }
+        else if (route.capabilityId === "filtersChange") {
+            const filters = readPhiTableFilters(signal.value);
+            if (filters)
+                setQuery((current) => ({ ...current, page: 1, cursor: null, filters }));
+        }
+        else if (route.capabilityId === "bindingParamsChange") {
+            const next = readPhiTableBindingParamsSignalValue(signal.value);
+            if (next)
+                updateBindingParams({ ...bindingParams, ...next.params }, signal.correlationId);
+        }
+        else if (route.capabilityId === "reload") {
+            reload();
+        }
+        else if (route.capabilityId === "selectionClear") {
+            updateSelection([], signal.correlationId);
+        }
+        else if (route.capabilityId === "columnsChange") {
+            const next = readPhiTableColumnOrderSignalValue(signal.value);
+            if (next)
+                updateColumnOrder(next.columnOrder, signal.correlationId);
+        }
+        else if (route.capabilityId === "expansionChange") {
+            const next = readPhiTableExpansionSignalValue(signal.value);
+            if (next)
+                updateExpandedRows(next.expandedRowIdentities, signal.correlationId);
+        }
+        else if (route.capabilityId === "actionActivate") {
+            const request = readPhiTableActionSignalValue(signal.value);
+            if (!request)
+                return;
+            const action = [
+                ...toolbarActions,
+                ...rowActions,
+                ...bulkActions,
+            ].find((candidate) => candidate.key === request.actionKey);
+            if (!action)
+                return;
+            const row = request.rowIdentity == null || !resource
+                ? undefined
+                : rows.find((candidate) => String(readPhiTableControlValue(candidate, resource.rowIdentityPath)) === String(request.rowIdentity));
+            const execute = () => activateAction(action, row, request.selectedRowIdentities ?? [], request.actionValue, signal.correlationId);
+            if (action.confirm) {
+                const templateValue = request.rowIdentity ?? request.selectedRowIdentities.length;
+                modal.confirm({
+                    title: formatTableActionTemplate(action.confirm.title, templateValue),
+                    content: formatTableActionTemplate(action.confirm.description, templateValue),
+                    okText: action.confirm.okText,
+                    cancelText: action.confirm.cancelText,
+                    okButtonProps: { danger: action.mode === "danger" },
+                    onOk: execute,
+                });
+            }
+            else {
+                execute();
+            }
+        }
+        else if (route.capabilityId === "conditionStateChange" &&
+            isPhiControllerSignalAddress(signal.sender) &&
+            conditionControllerAddresses.has(signal.sender)) {
+            const next = readPhiRuntimeConditionStateSignalValue(signal.value);
+            if (next) {
+                setConditionControllerStates((current) => ({ ...current, [signal.sender]: next.state }));
+            }
+        }
+    }, [activateAction, bindingParams, bulkActions, conditionControllerAddresses, listenRoutes, modal, reload, resource, rowActions, rows, setQuery, signalIdentity.receiver, toolbarActions, updateBindingParams, updateColumnOrder, updateExpandedRows, updateSelection]), useMemo(() => {
+        if (listenRoutes.length === 0)
+            return null;
+        return {
+            scopes: Array.from(new Set(listenRoutes.map((route) => route.scope))),
+            channels: Array.from(new Set(listenRoutes.map((route) => route.channel))),
+            // Only a route set where every route names a schema can filter by schema: a route that names
+            // none accepts a signal that carries none, and listing the others would drop exactly those.
+            ...(listenRoutes.every((route) => route.valueSchema)
+                ? { valueSchemas: Array.from(new Set(listenRoutes.map((route) => route.valueSchema))) }
+                : {}),
+        };
+    }, [listenRoutes]), signalIdentity.receiver);
+    useEffect(() => {
+        if (conditionControllerAddresses.size > 0) {
+            emitCapability("conditionStateRequest", null);
+        }
+    }, [conditionControllerAddresses, emitCapability]);
+    useEffect(() => {
+        emitCapability("queryChange", resolvedQuery);
+    }, [emitCapability, resolvedQuery]);
+    useEffect(() => {
+        const state = {
+            total,
+            page: resolvedQuery.page,
+            pageSize: resolvedQuery.pageSize,
+            loading: effectiveLoading,
+            errorCode: error?.code ?? null,
+            query: resolvedQuery,
+            bindingParams,
+            selectedRowIdentities,
+            columnOrder,
+            expandedRowIdentities,
+        };
+        emitStateChange(state);
+        emitCapability("stateChange", state);
+    }, [bindingParams, columnOrder, effectiveLoading, emitCapability, error?.code, expandedRowIdentities, resolvedQuery, selectedRowIdentities, total]);
+    const columns = useMemo(() => {
+        const result = presentation.columns.filter((column) => !column.hidden).map((column) => ({
+            key: column.key,
+            title: buildTableColumnTitle(column),
+            fieldPath: column.fieldKey,
+            sortField: column.sortField,
+            sizing: column.sizing,
+            align: column.align,
+            fixed: column.sticky,
+            ellipsis: column.ellipsis,
+            sortable: column.sortable,
+            editor: column.editor && features.editing?.mode === "cell"
+                ? (() => {
+                    const field = resource?.fields.find((candidate) => candidate.key === column.fieldKey);
+                    return field && field.type !== "json"
+                        ? {
+                            type: field.type,
+                            control: column.editor?.control,
+                            required: field.required,
+                            disabled: loading,
+                            constraints: field.constraints,
+                            options: field.options,
+                        }
+                        : undefined;
+                })()
+                : undefined,
+            isEditorDisabled: column.editor && features.editing?.mode === "cell"
+                ? (row) => {
+                    const field = resource?.fields.find((candidate) => candidate.key === column.fieldKey);
+                    return Boolean(findMatchingCondition(row, combinePhiRuntimeConditionExpressions("any", [
+                        features.editing?.disabledWhen,
+                        column.editor?.disabledWhen,
+                    ]), conditionControllerStates)) || !matchesAllConditions(row, field?.mutableWhen, conditionControllerStates);
+                }
+                : undefined,
+            isEditorLoading: column.editor && features.editing?.mode === "cell" && resource
+                ? (row) => {
+                    const rowIdentity = readRowIdentity(row, resource.rowIdentityPath);
+                    return rowIdentity != null && isFieldMutationPending(rowIdentity, column.fieldKey);
+                }
+                : undefined,
+            resolveEditorOptions: column.editor && features.editing?.mode === "cell"
+                ? (() => {
+                    const field = resource?.fields.find((candidate) => candidate.key === column.fieldKey);
+                    return field?.rowOptionsPath ? (row) => readPhiTableRowOptions(row, field) : undefined;
+                })()
+                : undefined,
+            onCommit: column.editor && features.editing?.mode === "cell" && resource ? (row, originalValue, proposedValue) => {
+                const rowIdentity = readRowIdentity(row, resource.rowIdentityPath);
+                if (rowIdentity == null)
+                    return;
+                void commitField({
+                    kind: "field",
+                    rowIdentity,
+                    fieldKey: column.fieldKey,
+                    originalValue,
+                    proposedValue,
+                }).catch(() => undefined);
+            } : undefined,
+            render: (value, row) => renderTableValue(value, column, row),
+        }));
+        if (rowActions.length || features.rowReordering?.enabled) {
+            result.push({
+                key: "__actions__",
+                role: "actions",
+                fieldPath: resource?.rowIdentityPath ?? "id",
+                title: labels.actions,
+                fixed: "right",
+                sizing: { mode: "content" },
+                render: (_value, row) => {
+                    const renderedActions = rowActions.map((action) => {
+                        if (!matchesAllConditions(row, action.visibleWhen, conditionControllerStates))
+                            return null;
+                        const disabled = findMatchingCondition(row, action.disabledWhen, conditionControllerStates);
+                        const rowHref = action.hrefPath ? readPhiTableControlValue(row, action.hrefPath) : action.href;
+                        return (_jsx(TableAction, { action: typeof rowHref === "string" ? { ...action, href: rowHref } : action, disabled: Boolean(disabled), disabledReason: disabled && "reason" in disabled ? disabled.reason : undefined, templateValue: resource ? readRowIdentity(row, resource.rowIdentityPath) : null, size: resolvedControlSize, onActivate: () => activateAction(action, row) }, action.key));
+                    });
+                    return features.actions?.rowLayout === "spaced"
+                        ? _jsx(Space, { size: "small", children: renderedActions })
+                        : _jsx(Space.Compact, { children: renderedActions });
+                },
+            });
+        }
+        return result;
+    }, [activateAction, commitField, conditionControllerStates, features.actions?.rowLayout, features.editing?.disabledWhen, features.editing?.mode, features.rowReordering?.enabled, isFieldMutationPending, labels.actions, loading, presentation.columns, resolvedControlSize, resource, rowActions]);
+    const resolveSummaryValue = useCallback((item) => {
+        if (item.value.source === "provider")
+            return summary[item.value.fieldKey];
+        if (item.value.fieldKey === "totalRows")
+            return total;
+        if (item.value.fieldKey === "pageRows")
+            return rows.length;
+        if (item.value.fieldKey === "selectedRows")
+            return selectedRowIdentities.length;
+        if (item.value.fieldKey === "page")
+            return resolvedQuery.page ?? 1;
+        const pageSize = resolvedQuery.pageSize ?? rows.length;
+        return pageSize > 0 ? Math.ceil(total / pageSize) : 0;
+    }, [resolvedQuery.page, resolvedQuery.pageSize, rows.length, selectedRowIdentities.length, summary, total]);
+    const footer = useMemo(() => presentation.footer ? {
+        align: presentation.footer.align,
+        content: formatPhiTranslation(presentation.footer.template, presentation.footer.values.map((binding) => {
+            const value = resolveSummaryValue({ key: binding.key, value: binding.value });
+            return typeof value === "number" ? value : value == null ? "—" : String(value);
+        })),
+    } : undefined, [presentation.footer, resolveSummaryValue]);
+    const tableSummary = useMemo(() => presentation.summary ? {
+        ...presentation.summary,
+        rows: presentation.summary.rows.map((row) => ({
+            key: row.key,
+            cells: row.cells.map((cell) => ({
+                key: cell.key,
+                columnKey: cell.columnKey,
+                throughColumnKey: cell.throughColumnKey,
+                align: cell.align,
+                content: renderTableSummaryItem(cell.item, resolveSummaryValue(cell.item)),
+            })),
+        })),
+    } : undefined, [presentation.summary, resolveSummaryValue]);
+    const structure = features.structure?.mode === "tree" ? features.structure : null;
+    const childAcceptanceField = resource?.hierarchy?.canAcceptChildrenField;
+    const selfContainedTools = features.tools?.mode !== "external";
+    const hasQueryTools = (features.search?.enabled ?? false) || (features.filters?.length ?? 0) > 0;
+    const hasSelfContainedTools = selfContainedTools && (configuredBindingFields.length > 0 ||
+        hasQueryTools ||
+        features.tools?.reload === true ||
+        (features.actions?.toolbar?.length ?? 0) > 0 ||
+        (features.actions?.bulk?.length ?? 0) > 0);
+    const resetQuery = () => {
+        setSearchDraft(externalSearch ?? "");
+        setQuery((current) => ({
+            ...current,
+            page: 1,
+            cursor: null,
+            search: externalSearch ?? "",
+            sorts: [],
+            filters: initialFilters,
+        }));
+    };
+    const collectionFilters = hasSelfContainedTools && (configuredBindingFields.length > 0 || hasQueryTools) ? (_jsxs(Flex, { align: "end", gap: token.paddingSM, wrap: true, children: [configuredBindingFields.map(({ field, tool }) => (_jsx(TableBindingTool, { field: field, tool: tool, sourceConfig: bindingParams, value: bindingParams[field.key], size: resolvedControlSize, onChange: (value) => updateBindingParams({ ...bindingParams, [field.key]: value }), onCreate: field.create && tool.create ? async (value) => {
+                    const result = await executeAction({
+                        kind: "action",
+                        actionKey: field.create.actionKey,
+                        selectedRowIdentities: [],
+                        actionValue: value,
+                        query: resolvedQuery,
+                    });
+                    if (result.status !== "accepted" ||
+                        (typeof result.canonicalValue !== "string" && typeof result.canonicalValue !== "number")) {
+                        return null;
+                    }
+                    updateBindingParams({ ...bindingParams, [field.key]: result.canonicalValue });
+                    return result.canonicalValue;
+                } : undefined }, field.key))), features.filters?.map((filter) => {
+                const control = (_jsx(TableFilter, { filter: filter, field: resource?.fields.find((field) => field.key === filter.key), sourceConfig: bindingParams, value: readTableFilterValue(filter, resolvedQuery.filters), labels: labels, size: resolvedControlSize, onChange: (value) => {
+                        setQuery((current) => ({
+                            ...current,
+                            page: 1,
+                            cursor: null,
+                            filters: updateTableQueryFilters(current.filters, filter, value),
+                        }));
+                    } }));
+                if (filter.labelPlacement === "none") {
+                    return _jsx(Fragment, { children: control }, filter.key);
+                }
+                if (filter.labelPlacement === "inline") {
+                    return _jsx(PhiLabeledControl, { label: filter.label, children: control }, filter.key);
+                }
+                return (_jsxs(Space, { orientation: "vertical", size: "small", children: [_jsx(Typography.Text, { type: "secondary", children: filter.label }), control] }, filter.key));
+            }), features.search?.enabled ? (_jsx(PhiTextControl, { inputType: "search", allowClear: true, placeholder: features.search.placeholder ?? labels.search, value: searchDraft, size: resolvedControlSize, onChange: (value) => setSearchDraft(value ?? ""), style: { width: 260 } })) : null] })) : null;
+    const collectionToolbar = hasSelfContainedTools && (toolbarActions.length > 0 ||
+        bulkActions.length > 0 ||
+        (hasQueryTools && features.tools?.reset !== false) ||
+        features.tools?.reload === true) ? (_jsxs(PhiToolbarControl, { size: resolvedControlSize, compact: true, children: [toolbarActions.map((action) => {
+                if (!matchesAllConditions(null, action.visibleWhen, conditionControllerStates))
+                    return null;
+                const disabled = findMatchingCondition(null, action.disabledWhen, conditionControllerStates);
+                return _jsx(TableAction, { action: action, size: resolvedControlSize, disabled: Boolean(disabled), disabledReason: disabled && "reason" in disabled ? disabled.reason : undefined, onActivate: () => activateAction(action, undefined, selectedRowIdentities) }, action.key);
+            }), bulkActions.map((action) => {
+                if (!matchesAllConditions(null, action.visibleWhen, conditionControllerStates))
+                    return null;
+                const disabled = findMatchingCondition(null, action.disabledWhen, conditionControllerStates);
+                return _jsx(TableAction, { action: action, size: resolvedControlSize, disabled: selectedRowIdentities.length === 0 || Boolean(disabled), disabledReason: disabled && "reason" in disabled ? disabled.reason : undefined, templateValue: selectedRowIdentities.length, onActivate: () => activateAction(action, undefined, selectedRowIdentities) }, action.key);
+            }), hasQueryTools && features.tools?.reset !== false ? (_jsx(PhiButtonControl, { icon: _jsx(UndoOutlined, {}), ariaLabel: labels.reset, size: resolvedControlSize, onClick: resetQuery })) : null, features.tools?.reload ? (_jsx(PhiButtonControl, { icon: _jsx(ReloadOutlined, {}), ariaLabel: labels.reload, tooltip: labels.reload, size: resolvedControlSize, onClick: reload })) : null] })) : null;
+    return (_jsxs(Space, { orientation: "vertical", size: selfContainedTools ? token.paddingSM : token.padding, style: { minWidth: 0, width: "100%" }, children: [_jsx(PhiCollectionHeaderControl, { title: presentation.title, description: presentation.description, filters: collectionFilters, toolbar: collectionToolbar }), !selfContainedTools && bulkActions.length && selectedRowIdentities.length > 0 ? (_jsx(PhiAlertControl, { level: "info", title: (_jsxs(Flex, { align: "center", justify: "space-between", gap: "small", wrap: true, children: [_jsx("span", { children: formatPhiTableWidgetLabel(labels.selected, selectedRowIdentities.length) }), _jsx(Space, { size: "small", children: bulkActions.map((action) => {
+                                if (!matchesAllConditions(null, action.visibleWhen, conditionControllerStates))
+                                    return null;
+                                const disabled = findMatchingCondition(null, action.disabledWhen, conditionControllerStates);
+                                return _jsx(TableAction, { action: action, size: resolvedControlSize, disabled: Boolean(disabled), disabledReason: disabled && "reason" in disabled ? disabled.reason : undefined, onActivate: () => activateAction(action, undefined, selectedRowIdentities) }, action.key);
+                            }) })] })) })) : null, bindingError || contractError || error ? (_jsx(PhiAlertControl, { level: "error", showIcon: true, title: bindingError ?? contractError ?? error?.message })) : null, _jsx(PhiTableBindingControl, { rows: rows, fields: resource?.fields ?? [], sourceConfig: bindingParams, renderDiagnostics: (warnings) => warnings.map((warning) => _jsx(PhiAlertControl, { level: "error", showIcon: true, title: warning }, warning)), rowIdentityPath: resource?.rowIdentityPath ?? "id", columns: columns, columnOrder: columnOrder, sortingMode: features.sorting?.mode ?? "none", sorts: resolvedQuery.sorts ?? [], onSortsChange: (sorts) => setQuery((current) => ({ ...current, page: 1, cursor: null, sorts })), columnReordering: features.columnReordering?.enabled === true, onColumnOrderChange: updateColumnOrder, rowSelection: features.rowSelection?.mode && features.rowSelection.mode !== "none" ? {
+                    mode: features.rowSelection.mode,
+                    selectedRowIdentities,
+                    preserveSelectedRowIdentities: features.rowSelection.preserveSelectedRowIdentities,
+                    isRowDisabled: (row) => Boolean(findMatchingCondition(row, features.rowSelection?.disabledWhen, conditionControllerStates)),
+                    onChange: updateSelection,
+                } : undefined, pagination: features.pagination?.enabled === false ? false : {
+                    page: resolvedQuery.page ?? 1,
+                    pageSize: resolvedQuery.pageSize ?? 20,
+                    total,
+                    pageSizeOptions: features.pagination?.pageSizeOptions,
+                    showSizeChanger: features.pagination?.showSizeChanger ?? true,
+                    onChange: (page, pageSize) => setQuery((current) => ({ ...current, page, pageSize, cursor: null })),
+                }, tree: structure ? {
+                    parentRowIdentityPath: structure.parentRowIdentityPath,
+                    expandColumnKey: structure.expandColumnKey,
+                    expandedRowIdentities,
+                    expandRowByClick: structure.expandRowByClick,
+                    indentSize: structure.indentSize,
+                    onExpandedRowIdentitiesChange: updateExpandedRows,
+                } : undefined, rowReordering: features.rowReordering?.enabled &&
+                    !(resolvedQuery.search?.trim()) &&
+                    (resolvedQuery.sorts?.length ?? 0) === 0 &&
+                    !Object.values(resolvedQuery.filters ?? {}).some((value) => value !== undefined && value !== null && value !== "" && (!Array.isArray(value) || value.length > 0)) ? {
+                    enabled: true,
+                    dragLabel: labels.dragRow,
+                    moveUpLabel: labels.moveRowUp,
+                    moveDownLabel: labels.moveRowDown,
+                    canAcceptChildren: childAcceptanceField
+                        ? (row) => readPhiTableControlValue(row, childAcceptanceField) === true
+                        : undefined,
+                    onMove: (move) => { void moveRow({ kind: "row-move", ...move }).catch(() => undefined); },
+                } : undefined, rowStyle: presentation.row?.mutedWhen ? (row) => ({
+                    opacity: findMatchingCondition(row, presentation.row?.mutedWhen, conditionControllerStates) ? 0.5 : 1,
+                    transition: `opacity ${token.motionDurationMid}`,
+                }) : undefined, editing: features.editing?.mode === "row" && resource ? {
+                    mode: "row",
+                    editLabel: labels.editRow,
+                    saveLabel: labels.saveRow,
+                    cancelLabel: labels.cancelRow,
+                    isRowDisabled: (row) => Boolean(findMatchingCondition(row, features.editing?.disabledWhen, conditionControllerStates)),
+                    onCommit: (row, originalValues, patch) => {
+                        const rowIdentity = readRowIdentity(row, resource.rowIdentityPath);
+                        if (rowIdentity == null || Object.keys(patch).length === 0)
+                            return;
+                        void commitRow({ kind: "row", rowIdentity, originalValues, patch }).catch(() => undefined);
+                    },
+                } : undefined, onExternalRowDragOver: resource?.dropTargets?.length ? (event) => {
+                    const payload = readPhiDataDragPayload(event.dataTransfer);
+                    if (!payload || !resource.dropTargets?.some((target) => target.payloadType === payload.payloadType))
+                        return;
+                    event.preventDefault();
+                    event.dataTransfer.dropEffect = "copy";
+                } : undefined, onExternalRowDrop: resource?.dropTargets?.length ? (event, row, placement) => {
+                    const payload = readPhiDataDragPayload(event.dataTransfer);
+                    if (!payload || !resource.dropTargets?.some((target) => target.payloadType === payload.payloadType && (!target.modes || target.modes.includes(placement))))
+                        return;
+                    const rowIdentity = readRowIdentity(row, resource.rowIdentityPath);
+                    if (rowIdentity == null)
+                        return;
+                    const parentIdentity = resource.hierarchy
+                        ? readPhiTableControlValue(row, resource.hierarchy.parentRowIdentityPath)
+                        : null;
+                    void drop({
+                        kind: "drop",
+                        ...payload,
+                        dropMode: placement,
+                        targetParentRowIdentity: placement === "child"
+                            ? rowIdentity
+                            : typeof parentIdentity === "string" || typeof parentIdentity === "number" ? parentIdentity : null,
+                        beforeRowIdentity: placement === "before" ? rowIdentity : null,
+                        afterRowIdentity: placement === "after" ? rowIdentity : null,
+                    }).catch(() => undefined).finally(clearPhiDataDragPayload);
+                } : undefined, onExternalDragOver: resource?.dropTargets?.some((target) => !target.modes || target.modes.includes("append"))
+                    ? (event) => {
+                        const payload = readPhiDataDragPayload(event.dataTransfer);
+                        if (!payload || !resource.dropTargets?.some((target) => target.payloadType === payload.payloadType &&
+                            (!target.modes || target.modes.includes("append"))))
+                            return;
+                        event.preventDefault();
+                        event.dataTransfer.dropEffect = "copy";
+                    }
+                    : undefined, onExternalDrop: resource?.dropTargets?.some((target) => !target.modes || target.modes.includes("append"))
+                    ? (event) => {
+                        const payload = readPhiDataDragPayload(event.dataTransfer);
+                        if (!payload || !resource.dropTargets?.some((target) => target.payloadType === payload.payloadType &&
+                            (!target.modes || target.modes.includes("append"))))
+                            return;
+                        event.preventDefault();
+                        void drop({
+                            kind: "drop",
+                            ...payload,
+                            dropMode: "append",
+                            targetParentRowIdentity: null,
+                            beforeRowIdentity: null,
+                            afterRowIdentity: null,
+                        }).catch(() => undefined).finally(clearPhiDataDragPayload);
+                    }
+                    : undefined, loading: effectiveLoading, bordered: presentation.bordered, striped: presentation.row?.striped, showHeader: presentation.showHeader, size: resolvedControlSize, emptyText: (_jsxs(Space, { orientation: "vertical", size: "small", children: [_jsx(Typography.Text, { strong: true, children: presentation.emptyState?.title ?? labels.emptyTitle }), _jsx(Typography.Text, { type: "secondary", children: presentation.emptyState?.description ?? labels.emptyDescription })] })), layout: presentation.layout, footer: footer, summary: tableSummary })] }));
+}
+function TableAction({ action, disabled = false, disabledReason, templateValue, size, onActivate }) {
+    const icon = action.icon ? resolvePhiButtonIcon(action.icon) : null;
+    const display = action.display ?? "label";
+    const showIcon = display !== "label";
+    const showLabel = display !== "icon";
+    const buttonType = action.mode === "primary" ? "primary" : "default";
+    const danger = action.mode === "danger";
+    /*
+     * A row is clickable, and an action inside it must not also activate the row, so the click stops at
+     * the element around the button. A confirmed action still gets a handler of its own: the button is
+     * what opens the confirmation, and a button with nothing to call renders disabled.
+     */
+    const content = (_jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { size: size, type: buttonType, danger: danger, disabled: disabled, style: PHI_TABLE_ACTION_BUTTON_STYLE, icon: showIcon ? icon ?? undefined : undefined, ariaLabel: action.label, label: showLabel ? action.label : null, onClick: () => {
+                if (!action.confirm)
+                    onActivate();
+            } }) }));
+    if (action.execution === "link" && action.href) {
+        const labelled = display === "icon" || disabledReason
+            ? _jsx(Tooltip, { title: disabledReason ?? action.label, children: content })
+            : content;
+        return disabled ? labelled : _jsx(PhiLink, { href: action.href, external: action.newTab, newTab: action.newTab, children: labelled });
+    }
+    const confirmed = action.confirm && !disabled ? (_jsx(PhiConfirmControl, { title: formatTableActionTemplate(action.confirm.title, templateValue), description: action.confirm.alert ? (_jsxs(Space, { orientation: "vertical", size: "small", children: [action.confirm.description ? (_jsx("span", { children: formatTableActionTemplate(action.confirm.description, templateValue) })) : null, _jsx(PhiAlertControl, { level: action.confirm.alert.level, title: formatTableActionTemplate(action.confirm.alert.title, templateValue), description: formatTableActionTemplate(action.confirm.alert.description, templateValue) })] })) : formatTableActionTemplate(action.confirm.description, templateValue), confirmLabel: action.confirm.okText, cancelLabel: action.confirm.cancelText, danger: danger, placement: "left", onConfirm: onActivate, children: content })) : content;
+    return display === "icon" || disabledReason
+        ? _jsx(Tooltip, { title: disabledReason ?? action.label, children: confirmed })
+        : confirmed;
+}
+function TableBindingTool({ field, tool, sourceConfig, value, size, onChange, onCreate }) {
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [draft, setDraft] = useState("");
+    const [creating, setCreating] = useState(false);
+    const resolvedOptions = usePhiControlOptionsProvider({
+        options: field.options,
+        optionsProvider: field.optionsProvider,
+        sourceConfig,
+    });
+    const createConfig = tool.create;
+    const createIcon = createConfig?.icon ? resolvePhiButtonIcon(createConfig.icon) : null;
+    const createDisplay = createConfig?.display ?? "label";
+    const disabled = Boolean(resolvedOptions.warning) || Boolean(tool.disabledWhen && sourceConfig[tool.disabledWhen.fieldKey] === tool.disabledWhen.equals);
+    const optionValues = useMemo(() => new Set(resolvedOptions.options.map((option) => option.value)), [resolvedOptions.options]);
+    const displayOptions = useMemo(() => {
+        const labels = new Map(tool.optionLabels?.map((option) => [option.value, option.label]));
+        return resolvedOptions.options.map((option) => ({
+            ...option,
+            label: labels.get(option.value) ?? option.label,
+        }));
+    }, [resolvedOptions.options, tool.optionLabels]);
+    useEffect(() => {
+        if (resolvedOptions.value === undefined ||
+            value === resolvedOptions.value ||
+            resolvedOptions.valueMode !== "authoritative" && optionValues.has(value)) {
+            return;
+        }
+        onChange(resolvedOptions.value);
+    }, [onChange, optionValues, resolvedOptions.value, resolvedOptions.valueMode, value]);
+    const create = field.create && createConfig && onCreate ? (_jsx(PhiPopoverControl, { open: popoverOpen, onOpenChange: setPopoverOpen, trigger: "click", content: (_jsxs(Space.Compact, { children: [_jsx(PhiTextControl, { value: draft, placeholder: createConfig.placeholder, size: size, onChange: (next) => setDraft(next ?? ""), onPressEnter: () => {
+                        if (!draft.trim() || creating)
+                            return;
+                        setCreating(true);
+                        void onCreate(draft.trim()).then((canonical) => {
+                            if (canonical != null) {
+                                setDraft("");
+                                setPopoverOpen(false);
+                            }
+                        }).finally(() => setCreating(false));
+                    } }), _jsx(PhiButtonControl, { size: size, type: "primary", loading: creating, disabled: !draft.trim(), label: createConfig.submitLabel ?? createConfig.label, onClick: () => {
+                        if (!draft.trim())
+                            return;
+                        setCreating(true);
+                        void onCreate(draft.trim()).then((canonical) => {
+                            if (canonical != null) {
+                                setDraft("");
+                                setPopoverOpen(false);
+                            }
+                        }).finally(() => setCreating(false));
+                    } })] })), children: _jsx("span", { style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { size: size, ariaLabel: createConfig.label, tooltip: createConfig.description, icon: createDisplay === "label" ? undefined : createIcon ?? undefined, label: createDisplay === "icon" ? undefined : createConfig.label, onClick: () => setPopoverOpen((current) => !current) }) }) })) : null;
+    return (_jsxs(Space.Compact, { children: [tool.control === "cascader" ? (_jsx(PhiCascaderControl, { label: tool.label, value: typeof value === "string" ? value : undefined, placeholder: tool.placeholder, disabled: disabled, options: displayOptions.map((option) => ({
+                    value: String(option.value),
+                    label: option.label,
+                })), allowRoot: tool.cascader?.allowRoot !== false, separator: tool.cascader?.separator ?? "/", rootValue: tool.cascader?.rootValue ?? "/", normalize: tool.cascader?.normalize ?? "raw", size: size, style: { minWidth: 280 }, onChange: (nextValue) => onChange(nextValue) })) : (_jsx(PhiSelectControl, { label: tool.label, value: typeof value === "string" || typeof value === "number" ? value : undefined, placeholder: tool.placeholder, presentation: tool.control === "autocomplete" ? "autocomplete" : "select", disabled: disabled, options: displayOptions, size: size, onChange: onChange, style: { minWidth: 180 } })), create] }));
+}
+function TableFilter({ filter, field, sourceConfig, value, size, onChange, labels = PHI_TABLE_WIDGET_DEFAULT_LABELS }) {
+    // A label with nowhere to go still has something to say: it becomes the Control's placeholder, so a
+    // cleared filter reads as the question it asks rather than as an empty box.
+    const hiddenLabelPlaceholder = filter.labelPlacement === "none" ? filter.label : undefined;
+    const fieldWithOptions = field?.type === "enum" || field?.type === "enum[]" ? field : null;
+    const resolvedOptions = usePhiControlOptionsProvider({
+        options: filter.type === "select" && (filter.options?.length ?? 0) > 0
+            ? filter.options
+            : fieldWithOptions?.options,
+        optionsProvider: filter.type === "select"
+            ? filter.optionsProvider ?? fieldWithOptions?.optionsProvider
+            : undefined,
+        sourceConfig,
+    });
+    if (filter.type === "select") {
+        return filter.multiple ? (_jsx(PhiMultiSelectControl, { allowClear: true, value: Array.isArray(value) ? value.filter((entry) => typeof entry === "string") : [], disabled: Boolean(resolvedOptions.warning), options: resolvedOptions.options, size: size, placeholder: hiddenLabelPlaceholder, onChange: onChange, style: { minWidth: 180 } })) : (_jsx(PhiSelectControl, { allowClear: true, value: typeof value === "string" ? value : undefined, disabled: Boolean(resolvedOptions.warning), options: resolvedOptions.options, size: size, placeholder: hiddenLabelPlaceholder, onChange: onChange, style: { minWidth: 180 } }));
+    }
+    if (filter.type === "boolean") {
+        if (filter.control === "switch") {
+            // A switch answers yes or no and nothing else, so an absent value reads as off.
+            return _jsx(PhiSwitchControl, { checked: value === true, size: size === "large" ? undefined : size, onChange: (next) => onChange(next) });
+        }
+        return _jsx(PhiSelectControl, { allowClear: true, value: typeof value === "boolean" ? String(value) : undefined, options: [{ value: "true", label: labels.yes }, { value: "false", label: labels.no }], size: size, placeholder: hiddenLabelPlaceholder, onChange: (next) => onChange(next === undefined ? undefined : next === "true"), style: { minWidth: 140 } });
+    }
+    if (filter.type === "dateRange") {
+        const range = isRecord(value) ? value : {};
+        return _jsxs(Space.Compact, { children: [_jsx(PhiTextControl, { value: typeof range.start === "string" ? range.start : "", placeholder: filter.startPlaceholder, size: size, onChange: (next) => onChange({ ...range, start: next ?? "" }) }), _jsx(PhiTextControl, { value: typeof range.end === "string" ? range.end : "", placeholder: filter.endPlaceholder, size: size, onChange: (next) => onChange({ ...range, end: next ?? "" }) })] });
+    }
+    return _jsx(PhiTextControl, { value: typeof value === "string" ? value : "", placeholder: filter.placeholder ?? hiddenLabelPlaceholder, size: size, onChange: (next) => onChange(next ?? "") });
+}