@cccsaurora/howler-ui 2.17.0-dev.420 → 2.17.0-dev.470

package/package.json

@@ -12,6 +12,7 @@
     ]
   },
   "dependencies": {
+    "@cccsaurora/clue-ui": "1.1.0-dev.91",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -20,46 +21,50 @@
     "@iconify/icons-logos": "^1.2.36",
     "@iconify/icons-simple-icons": "^1.2.74",
     "@iconify/react": "^4.1.1",
-    "@microlink/react-json-view": "^1.26.2",
+    "@jsonforms/core": "^3.7.0",
+    "@jsonforms/material-renderers": "^3.7.0",
+    "@jsonforms/react": "^3.7.0",
+    "@microlink/react-json-view": "^1.27.1",
     "@monaco-editor/react": "^4.7.0",
     "ajv": "^8.17.1",
     "ajv-i18n": "^4.2.0",
-    "axios": "^1.12.0",
+    "axios": "^1.13.4",
     "axios-retry": "^3.9.1",
-    "chart.js": "^4.5.0",
+    "chart.js": "^4.5.1",
     "chartjs-adapter-dayjs-4": "^1.0.4",
     "chartjs-plugin-zoom": "^2.2.0",
-    "dayjs": "^1.11.13",
-    "dompurify": "^3.2.6",
+    "dayjs": "^1.11.19",
+    "dompurify": "^3.3.1",
     "flat": "^6.0.1",
     "fuse.js": "^7.1.0",
     "handlebars": "^4.7.8",
     "handlebars-async-helpers": "^1.0.6",
     "i18next": "^23.16.8",
     "i18next-browser-languagedetector": "^7.2.2",
+    "json-schema": "^0.4.0",
     "lodash-es": "^4.17.23",
     "md5": "^2.3.0",
-    "mermaid": "^11.10.0",
+    "mermaid": "^11.12.2",
     "monaco-editor": "^0.49.0",
     "notistack": "^3.0.2",
     "react": "^18.3.1",
-    "react-chartjs-2": "^5.3.0",
+    "react-chartjs-2": "^5.3.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-i18next": "^14.1.3",
-    "react-ipynb-renderer": "^2.2.4",
+    "react-ipynb-renderer": "^2.3.0",
     "react-markdown": "^10.1.0",
     "react-pluggable": "^0.4.3",
     "react-resize-detector": "^9.1.1",
-    "react-router": "^7.13.0",
-    "react-router-dom": "^6.30.1",
-    "react-syntax-highlighter": "^15.6.1",
+    "react-router": "6.30.1",
+    "react-router-dom": "6.30.1",
+    "react-syntax-highlighter": "^15.6.6",
     "rehype-raw": "^7.0.0",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
-    "scheduler": "^0.23.2",
+    "scheduler": "^0.27.0",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.0.0",
+    "unist-util-visit": "^5.1.0",
     "url-join": "^5.0.0",
     "use-context-selector": "^2.0.0",
     "uuid": "^9.0.1",
@@ -96,7 +101,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.17.0-dev.420",
+  "version": "2.17.0-dev.470",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -251,6 +256,10 @@
     "./commons/components/app/providers/*": "./commons/components/app/providers/*.js",
     "./commons/components/display/hooks/*": "./commons/components/display/hooks/*.js",
     "./commons/components/notification/elements/*": "./commons/components/notification/elements/*.js",
-    "./commons/components/notification/elements/item/*": "./commons/components/notification/elements/item/*.js"
+    "./commons/components/notification/elements/item/*": "./commons/components/notification/elements/item/*.js",
+    "./plugins/clue/*": "./plugins/clue/*.js",
+    "./plugins/clue": "./plugins/clue/index.js",
+    "./plugins/clue/locales/*": "./plugins/clue/locales/*.js",
+    "./plugins/clue/components/*": "./plugins/clue/components/*.js"
   }
 }

package/plugins/HowlerPlugin.js

@@ -133,6 +133,7 @@ class HowlerPlugin {
         if (isRoot) {
             if (breadcrumbs != null) {
                 breadcrumbs = null;
+                // eslint-disable-next-line no-console
                 console.warn(`Sitemap '${path}' with isRoot should not contain breadcrumbs and have been removed`);
             }
         }

package/plugins/clue/Provider.d.ts

@@ -0,0 +1,3 @@
+import { type PropsWithChildren } from 'react';
+declare const Provider: React.FC<PropsWithChildren<{}>>;
+export default Provider;

package/plugins/clue/Provider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ClueProvider } from '@cccsaurora/clue-ui/hooks/ClueProvider';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { getStored } from '@cccsaurora/howler-ui/utils/localStorage';
+const Provider = ({ children }) => {
+    const { config } = useContext(ApiConfigContext);
+    const features = config.configuration?.features ?? {};
+    return (_jsx(ClueProvider, { baseURL: location.origin + '/api/v1/clue', getToken: () => getStored(StorageKey.APP_TOKEN), enabled: features.clue, publicIconify: location.origin.includes('localhost'), customIconify: location.origin.replace(/howler(-stg)?/, 'icons'), defaultTimeout: 5, i18next: useTranslation('clue'), chunkSize: 50, children: children }));
+};
+export default Provider;

package/plugins/clue/components/ClueChip.d.ts

@@ -0,0 +1,3 @@
+import type { PluginChipProps } from '@cccsaurora/howler-ui/components/elements/PluginChip';
+declare const _default: import("react").NamedExoticComponent<PluginChipProps>;
+export default _default;

package/plugins/clue/components/ClueChip.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import EnrichedChip from '@cccsaurora/clue-ui/components/EnrichedChip';
+import { Chip } from '@mui/material';
+import { memo } from 'react';
+import { useType } from '../utils';
+const ClueChip = ({ children, value, context, field, hit, ...props }) => {
+    const type = useType(hit, field, value);
+    if (!type) {
+        return _jsx(Chip, { ...props, children: children });
+    }
+    let enrichedProps = {
+        ...props,
+        value
+    };
+    if (context === 'summary') {
+        enrichedProps = {
+            ...enrichedProps,
+            sx: [
+                ...(Array.isArray(enrichedProps.sx) ? enrichedProps.sx : [enrichedProps.sx]),
+                [{ height: '24px', '& .iconify': { fontSize: '1em' } }]
+            ]
+        };
+    }
+    else {
+        delete enrichedProps.label;
+    }
+    return _jsx(EnrichedChip, { ...enrichedProps, type: type, label: props.label });
+};
+export default memo(ClueChip);

package/plugins/clue/components/ClueLeadForm.d.ts

@@ -0,0 +1,4 @@
+import type { LeadFormProps } from '@cccsaurora/howler-ui/components/routes/dossiers/LeadEditor';
+import { type FC } from 'react';
+declare const ClueLeadForm: FC<LeadFormProps>;
+export default ClueLeadForm;

package/plugins/clue/components/ClueLeadForm.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClueFetcherSelector } from '@cccsaurora/clue-ui/hooks/selectors';
+import { Autocomplete, Divider, ListItemText, TextField, Typography } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import uniq from 'lodash-es/uniq';
+import { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const ClueLeadForm = ({ lead, metadata, update, updateMetadata }) => {
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const fetchers = useClueFetcherSelector(ctx => ctx.fetchers);
+    const [showCustom, setShowCustom] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "horizontal" }), _jsx(Autocomplete, { disabled: !lead, options: Object.keys(fetchers), renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.clue') }), value: Object.keys(fetchers).includes(lead?.content) ? lead.content : null, onChange: (_ev, content) => update({ content, metadata: '{}' }), renderOption: ({ key, ...props }, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: _jsx("code", { children: option }), secondary: fetchers[option].description }, key)) }), _jsx(Autocomplete, { options: fetchers[lead?.content]?.supported_types ??
+                    uniq(Object.values(fetchers).flatMap(fetcher => fetcher.supported_types)), renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.clue.type') }), value: metadata?.type ?? null, onChange: (_ev, type) => updateMetadata({ type }) }), _jsx(Autocomplete, { options: ['custom', ...Object.keys(config.indexes.hit)], disabled: !metadata?.type, renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.clue.value') }), getOptionLabel: opt => t(opt), value: metadata?.value ?? null, onChange: (_ev, value) => {
+                    if (value === 'custom') {
+                        setShowCustom(true);
+                    }
+                    else {
+                        setShowCustom(false);
+                        updateMetadata({ value });
+                    }
+                } }), showCustom && (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.clue.value.custom'), value: metadata?.value ?? '', disabled: !metadata?.type, fullWidth: true, onChange: ev => updateMetadata({ value: ev.target.value }) }), _jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mt: '0 !important' }, children: t('route.dossiers.manager.clue.value.description') })] }))] }));
+};
+export default ClueLeadForm;

package/plugins/clue/components/CluePivot.d.ts

@@ -0,0 +1,3 @@
+import type { PivotLinkProps } from '@cccsaurora/howler-ui/components/elements/hit/related/PivotLink';
+declare const _default: import("react").NamedExoticComponent<PivotLinkProps>;
+export default _default;

package/plugins/clue/components/CluePivot.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClueActionsSelector, useClueEnrichSelector } from '@cccsaurora/clue-ui';
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Settings } from '@mui/icons-material';
+import { Divider, IconButton, Stack, Typography } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import get from 'lodash-es/get';
+import isBoolean from 'lodash-es/isBoolean';
+import isNil from 'lodash-es/isNil';
+import { memo, useCallback, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const CluePivot = ({ pivot, hit, compact }) => {
+    const guessType = useClueEnrichSelector(ctx => ctx?.guessType);
+    const { showErrorMessage } = useMySnackbar();
+    const { config } = useContext(ApiConfigContext);
+    const { i18n, t } = useTranslation();
+    const actions = useClueActionsSelector(ctx => ctx?.availableActions ?? {});
+    const executeAction = useClueActionsSelector(ctx => ctx?.executeAction);
+    const [loading, setLoading] = useState(false);
+    const getValue = useCallback((actionId, mapping) => {
+        const parameterSchema = actions[actionId].params?.properties?.[mapping.key];
+        if (mapping.field === 'custom') {
+            if (parameterSchema?.type === 'number') {
+                return parseFloat(mapping.custom_value);
+            }
+            if (parameterSchema?.type === 'integer') {
+                return Math.floor(parseFloat(mapping.custom_value));
+            }
+            return mapping.custom_value;
+        }
+        if (!Object.keys(config.indexes.hit).includes(mapping.field)) {
+            return mapping.field;
+        }
+        const hitData = get(hit, mapping.field);
+        // No schema provided - just pass on the value
+        if (!parameterSchema) {
+            return hitData;
+        }
+        // JSON schema is a boolean - we just shove whatever they want in there if it's true, or skip if false
+        if (isBoolean(parameterSchema)) {
+            return parameterSchema ? hitData : null;
+        }
+        // It wants a list of values
+        if (parameterSchema.type === 'array') {
+            // We have a list of values
+            if (Array.isArray(hitData)) {
+                return hitData;
+            }
+            else {
+                // We don't have a list of values
+                return isNil(hitData) ? [] : [hitData];
+            }
+        }
+        // It wants a single object, but we have a list
+        if (Array.isArray(hitData)) {
+            // TODO: This is still a little blah.
+            return hitData[0];
+        }
+        // We have a single object and that's what they want
+        return hitData;
+    }, [actions, config.indexes.hit, hit]);
+    const onClueClick = useCallback(async (event, forceMenu = false) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (loading) {
+            return;
+        }
+        if (!actions[pivot.value]) {
+            showErrorMessage(t('pivot.clue.missing'));
+            return;
+        }
+        setLoading(true);
+        const data = Object.fromEntries(pivot.mappings.map(_mapping => {
+            const value = getValue(pivot.value, _mapping);
+            if (['selector', 'selectors'].includes(_mapping.key)) {
+                if (!value) {
+                    return _mapping.key === 'selector' ? ['selector', null] : ['selectors', []];
+                }
+                if (Array.isArray(value)) {
+                    return [
+                        _mapping.key,
+                        value
+                            .filter(val => !isNil(val))
+                            .map(val => ({
+                            type: config.configuration?.mapping?.[_mapping.field] || guessType(val.toString()),
+                            value: val
+                        }))
+                    ];
+                }
+                return [
+                    _mapping.key,
+                    {
+                        type: config.configuration?.mapping?.[_mapping.field] || guessType(value.toString()),
+                        value
+                    }
+                ];
+            }
+            return [_mapping.key, value];
+        }));
+        const selectors = (actions[pivot.value].accept_multiple ? [data.selectors] : [data.selector])
+            .flat()
+            .filter(val => !isNil(val));
+        delete data.selector;
+        delete data.selectors;
+        try {
+            await executeAction(pivot.value, selectors, data, { forceMenu });
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [
+        actions,
+        config.configuration?.mapping,
+        executeAction,
+        getValue,
+        guessType,
+        loading,
+        pivot.mappings,
+        pivot.value,
+        showErrorMessage,
+        t
+    ]);
+    if (!actions[pivot.value]) {
+        return;
+    }
+    return (_jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: e => onClueClick(e), sx: [
+            theme => ({
+                backgroundColor: 'transparent',
+                transition: theme.transitions.create(['border-color']),
+                '&:hover': { borderColor: 'primary.main' },
+                '& > div': {
+                    height: '100%'
+                }
+            }),
+            loading
+                ? { opacity: 0.5, pointerEvents: 'none' }
+                : {
+                    cursor: 'pointer'
+                },
+            !compact && { border: 'thin solid', borderColor: 'transparent' }
+        ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [_jsx(Icon, { fontSize: "1.5rem", icon: pivot.icon }), _jsx(Typography, { children: pivot.label[i18n.language] }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(IconButton, { size: "small", onClick: e => onClueClick(e, true), children: _jsx(Settings, { fontSize: "small" }) })] }) }));
+};
+export default memo(CluePivot);

package/plugins/clue/components/CluePivotForm.d.ts

@@ -0,0 +1,21 @@
+import type { PivotFormProps } from '@cccsaurora/howler-ui/components/routes/dossiers/PivotForm';
+import { type FC } from 'react';
+/**
+ * CluePivotForm Component
+ *
+ * A form component that allows users to configure pivot operations for Clue actions.
+ * This component provides a dynamic form interface for selecting and configuring
+ * Clue actions with their associated parameters and field mappings.
+ *
+ * Key Features:
+ * - Action selection via autocomplete dropdown
+ * - Dynamic form generation based on action schemas
+ * - Field mapping configuration for hit indexes
+ * - Custom value support for non-standard fields
+ * - Integration with JsonForms for complex parameter handling
+ *
+ * @param props - Component props containing pivot data and update callback
+ * @returns JSX element representing the pivot configuration form
+ */
+declare const CluePivotForm: FC<PivotFormProps>;
+export default CluePivotForm;

package/plugins/clue/components/CluePivotForm.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useClueActionsSelector, useClueEnrichSelector } from '@cccsaurora/clue-ui';
+import { adaptSchema } from '@cccsaurora/clue-ui/components/actions/form/schemaAdapter';
+import { materialCells, materialRenderers } from '@jsonforms/material-renderers';
+import { JsonForms } from '@jsonforms/react';
+import { Autocomplete, createTheme, Divider, Stack, TextField, ThemeProvider, Typography, useTheme } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
+import { flatten, unflatten } from 'flat';
+import capitalize from 'lodash-es/capitalize';
+import cloneDeep from 'lodash-es/cloneDeep';
+import isBoolean from 'lodash-es/isBoolean';
+import isEqual from 'lodash-es/isEqual';
+import isPlainObject from 'lodash-es/isPlainObject';
+import merge from 'lodash-es/merge';
+import omitBy from 'lodash-es/omitBy';
+import pick from 'lodash-es/pick';
+import pickBy from 'lodash-es/pickBy';
+import { useCallback, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+/**
+ * Enhanced material renderers wrapped in ErrorBoundary components to prevent
+ * form rendering errors from crashing the entire application
+ */
+const WRAPPED_RENDERERS = materialRenderers.map(value => ({
+    ...value,
+    renderer: ({ ...props }) => (_jsx(ErrorBoundary, { children: _jsx(value.renderer, { ...props }) }))
+}));
+/**
+ * CluePivotForm Component
+ *
+ * A form component that allows users to configure pivot operations for Clue actions.
+ * This component provides a dynamic form interface for selecting and configuring
+ * Clue actions with their associated parameters and field mappings.
+ *
+ * Key Features:
+ * - Action selection via autocomplete dropdown
+ * - Dynamic form generation based on action schemas
+ * - Field mapping configuration for hit indexes
+ * - Custom value support for non-standard fields
+ * - Integration with JsonForms for complex parameter handling
+ *
+ * @param props - Component props containing pivot data and update callback
+ * @returns JSX element representing the pivot configuration form
+ */
+const CluePivotForm = ({ pivot, update }) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    // Get available Clue actions from the global state
+    const actions = useClueActionsSelector(ctx => ctx?.availableActions);
+    const ready = useClueEnrichSelector(ctx => ctx.ready);
+    /**
+     * Generates a dynamic JSON schema for the selected action's parameters.
+     * This schema is used to render the form fields for action configuration.
+     *
+     * The function:
+     * 1. Retrieves the action definition based on the pivot value
+     * 2. Adapts the action's parameter schema using Clue's schema adapter
+     * 3. Enhances string properties with hit index enums for autocomplete
+     * 4. Applies any extra schema definitions from the action
+     */
+    const formSchema = useMemo(() => {
+        const value = pivot?.value;
+        // Return null if no action is selected or action doesn't exist
+        if (!value || !actions[value]) {
+            return null;
+        }
+        // Clone and adapt the action's parameter schema
+        const clueAdaptedSchema = cloneDeep({
+            ...adaptSchema(actions[value].params),
+            ...(actions[value].extra_schema ?? {})
+        });
+        // Enhance string properties with hit index options for better UX
+        Object.entries(clueAdaptedSchema.properties).forEach(([key, prop]) => {
+            // Handle boolean properties by converting to enum with hit indexes
+            if (typeof prop === 'boolean') {
+                clueAdaptedSchema.properties[key] = { enum: Object.keys(config.indexes.hit) };
+                return;
+            }
+            if (prop.type === 'array') {
+                if (isBoolean(prop.items)) {
+                    clueAdaptedSchema.properties[key] = { enum: Object.keys(config.indexes.hit) };
+                    return;
+                }
+                else if (!Array.isArray(prop.items)) {
+                    prop.type = prop.items.type;
+                    delete prop.items;
+                }
+            }
+            // Skip non-string properties
+            if (prop.type !== 'string' && (!Array.isArray(prop.type) || !prop.type.includes('string'))) {
+                return;
+            }
+            // Strip date-time format since we're picking from a list of fields
+            if (prop.format === 'date-time') {
+                delete prop.format;
+            }
+            // Add hit index options to string properties without existing enums
+            if (!prop.enum && !prop.oneOf) {
+                prop.enum = Object.keys(config.indexes.hit);
+            }
+        });
+        return clueAdaptedSchema;
+    }, [actions, config.indexes.hit, pivot?.value]);
+    /**
+     * Generates the UI schema for JsonForms based on the form schema.
+     * This defines the layout and rendering options for each form field.
+     *
+     * The UI schema:
+     * 1. Creates a vertical layout for all form elements
+     * 2. Sorts fields by custom order property or required status
+     * 3. Configures autocomplete for enum fields
+     * 4. Applies custom options and rules from the schema
+     */
+    const uiSchema = useMemo(() => ({
+        type: 'VerticalLayout',
+        elements: Object.entries(formSchema?.properties ?? {})
+            // Sort fields: first by custom order, then by required status
+            .sort(([a_key, a_ent], [b_key, b_ent]) => {
+            if (!!a_ent.order || !!b_ent.order) {
+                return a_ent.order - b_ent.order;
+            }
+            else {
+                // Required fields appear first
+                return +formSchema?.required.includes(a_key) - +formSchema?.required.includes(b_key);
+            }
+        })
+            .map(([key, value]) => ({
+            type: 'Control',
+            scope: `#/properties/${key}`,
+            options: {
+                // Enable autocomplete for fields with enum values
+                autocomplete: !!value.enum || !!value.oneOf,
+                showUnfocusedDescription: true,
+                // Apply any custom options from the schema
+                ...value.options
+            },
+            // Apply conditional rendering rules if present
+            rule: value.rule
+        }))
+    }), [formSchema?.properties, formSchema?.required]);
+    /**
+     * Handles updates to the selected action value.
+     * When an action is selected, this function:
+     * 1. Sets up default field mappings based on action requirements
+     * 2. Configures selector mappings for actions that don't accept empty inputs
+     * 3. Updates the pivot configuration
+     *
+     * @param value - The selected action identifier
+     */
+    const onUpdate = useCallback((value) => {
+        const mappings = [];
+        // TODO: Fix type hints and remove the any cast
+        // For actions that don't accept empty inputs, add selector mapping
+        if (!actions[value].accept_empty) {
+            // Use 'selectors' for multiple selection, 'selector' for single selection
+            mappings.push({
+                key: actions[value].accept_multiple ? 'selectors' : 'selector',
+                field: 'howler.id'
+            });
+        }
+        update({
+            value,
+            mappings
+        });
+    }, [actions, update]);
+    /**
+     * Transforms pivot mappings into form data format for JsonForms.
+     * Converts the mappings array into a key-value object where:
+     * - Key is the mapping key (e.g., 'selector', 'selectors')
+     * - Value is either the custom_value (if set) or the field name
+     */
+    const formData = useMemo(() => {
+        const rawData = Object.fromEntries((pivot?.mappings ?? []).map(mapping => {
+            const parameterSchema = actions[pivot.value]?.params?.properties?.[mapping.key];
+            const value = mapping.custom_value ?? mapping.field;
+            if (mapping.field === 'custom') {
+                if (parameterSchema?.type === 'number') {
+                    return [mapping.key, parseFloat(mapping.custom_value)];
+                }
+                if (parameterSchema?.type === 'integer') {
+                    return [mapping.key, Math.floor(parseFloat(mapping.custom_value))];
+                }
+                return [mapping.key, mapping.custom_value];
+            }
+            return [mapping.key, value];
+        }));
+        // JSONForms will inadvertently nest dicts
+        // (e.g. "abc1.field" key will result in)
+        // {
+        //   "abc1": {
+        //     "field"
+        //   }
+        // }
+        // Validation doesn't account for this, so we need to merge the flattened and unflattened dicts.
+        // This leads to awful side effects in the onChange function, detailed there.
+        return merge({}, rawData, unflatten(rawData));
+    }, [actions, pivot?.mappings, pivot.value]);
+    // Find the main selector mapping for special handling in the UI
+    const selectorMapping = pivot?.mappings?.find(_mapping => ['selector', 'selectors'].includes(_mapping.key));
+    return (_jsxs(ErrorBoundary, { children: [_jsx(Autocomplete, { fullWidth: true, disabled: !pivot || !ready, options: Object.entries(actions)
+                    .filter(([_key, definition]) => !!definition && definition.format === 'pivot')
+                    .map(([key]) => key), renderOption: ({ key, ...optionProps }, actionId) => {
+                    const definition = actions[actionId];
+                    return (_jsxs(Stack, { component: "li", ...optionProps, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "start", alignItems: "center", children: [_jsx(Typography, { children: definition.name }), _jsx("pre", { style: {
+                                            fontSize: '0.85rem',
+                                            border: `thin solid ${theme.palette.divider}`,
+                                            padding: theme.spacing(0.5),
+                                            borderRadius: theme.shape.borderRadius
+                                        }, children: actionId })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", alignSelf: "start", children: definition.summary })] }, key));
+                }, getOptionLabel: opt => actions[opt]?.name ?? '', renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: t('route.dossiers.manager.pivot.value') })), value: pivot?.value ?? '', onChange: (_ev, value) => onUpdate(value) }), _jsx(Divider, { flexItem: true }), _jsx(Typography, { children: t('route.dossiers.manager.pivot.mappings') }), selectorMapping && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { fullWidth: true, options: ['custom', ...Object.keys(config.indexes.hit)], renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: capitalize(selectorMapping.key), sx: { minWidth: '150px' } })), value: selectorMapping.field, onChange: (_ev, field) => update({
+                            mappings: pivot.mappings.map(_mapping => _mapping.key === selectorMapping.key ? { ..._mapping, field } : _mapping)
+                        }) }), selectorMapping.field === 'custom' && (_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.mapping.custom'), disabled: !pivot, value: selectorMapping?.custom_value ?? null, onChange: ev => update({
+                            mappings: pivot.mappings.map(_mapping => _mapping.key === selectorMapping.key ? { ..._mapping, custom_value: ev.target.value } : _mapping)
+                        }) }))] })), formSchema && (_jsx(ThemeProvider, { theme: _theme => createTheme({
+                    ..._theme,
+                    components: {
+                        MuiTextField: {
+                            defaultProps: { size: 'small' },
+                            styleOverrides: { root: { marginTop: theme.spacing(1) } }
+                        },
+                        MuiInputBase: {
+                            defaultProps: { size: 'small' }
+                        },
+                        MuiFormControl: {
+                            defaultProps: { size: 'small' },
+                            styleOverrides: {
+                                root: { marginTop: theme.spacing(1) }
+                            }
+                        }
+                    }
+                }), children: _jsx(ErrorBoundary, { children: _jsx(JsonForms, { schema: formSchema, uischema: uiSchema, renderers: WRAPPED_RENDERERS, cells: materialCells, data: formData, onChange: ({ data }) => {
+                            // We now need to remove the unflattened object we provided for validation to JSON forms
+                            // EXCEPT, new keys are added via nesting. So we need to flatten the nested data and overwrite it
+                            // with the flat data.
+                            const flatData = omitBy(data, isPlainObject);
+                            const nestedData = flatten(pickBy(data, isPlainObject));
+                            // Merge existing selector mappings with new form data. This is the crazy complexity I mentioned above.
+                            //
+                            // The full flow:
+                            // 1. A field mapping is chosen, e.g. 'key.1': 'howler.id'
+                            // 2. The data object has the structure {key: {1: 'howler.id'}}
+                            // 3. This is added to fullData via nestedData
+                            // 4. Another field mapping is chosen, e.g. 'key.2': 'howler.id'
+                            // 5. The data object now looks like: {key.1: 'howler.id', key: {1: 'howler.id', 2: 'howler.id'}}
+                            // 6. We integrate this again, but this time the existing `key.1` key overwrites
+                            //    the flattened `key: {1}` object.
+                            // 7. When 'key.1' is changed, the ROOT (flattened) key changes, but the outdated variant is still there.
+                            //    that is: {key.1: 'howler.status', key.2: 'howler.id', key: {1: 'howler.id', 2: 'howler.id'}}
+                            // 8. This is why the flat data is AFTER the nested data. So that the final, resolved object is:
+                            //    {key.1: 'howler.status', key.2: 'howler.id'}
+                            //
+                            // This is very confusing - ask Matt R if you need a better explanation.
+                            const fullData = { ...nestedData, ...flatData, ...pick(pivot.mappings, ['selector', 'selectors']) };
+                            // Convert form data back to mappings format
+                            const newMappings = Object.entries(fullData).map(([key, val]) => ({
+                                key,
+                                // Use 'custom' field type if value is not a standard hit index
+                                field: val in config.indexes.hit ? val : 'custom',
+                                // Store custom values separately from field names
+                                custom_value: val in config.indexes.hit ? null : val
+                            }));
+                            // Only update if mappings have actually changed (performance optimization)
+                            if (!isEqual(newMappings, pivot.mappings)) {
+                                update({ mappings: newMappings });
+                            }
+                        }, config: {} }) }) }))] }));
+};
+export default CluePivotForm;

package/plugins/clue/components/ClueTypography.d.ts

@@ -0,0 +1,3 @@
+import type { PluginTypographyProps } from '@cccsaurora/howler-ui/components/elements/PluginTypography';
+declare const _default: import("react").NamedExoticComponent<PluginTypographyProps>;
+export default _default;