@aglyn/shared-ui-jsx-forms 1.0.0-beta.143

package/src/lib/components/create-artifact-drawer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/components/create-artifact-drawer.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { ICON_VARIANT_CLOSE } from '@aglyn/shared-data-enums'\nimport { Container, MdiIcon, SrOnly } from '@aglyn/shared-ui-jsx'\nimport { NavigationDrawerComponent } from '@aglyn/shared-ui-jsx/components/navigation-drawer.component'\nimport {\n  Box,\n  Button,\n  FormControl,\n  Grid,\n  IconButton,\n  Typography,\n} from '@mui/material'\nimport { forwardRef, type ReactNode } from 'react'\nimport {\n  FormRenderer,\n  FormSpy,\n  type FormTemplateRenderProps,\n  useFormApi,\n} from '../vendor/data-driven-forms'\nimport { simpleComponentMapper } from '../constants/component-mappers'\n\n/**\n * THE naming step in front of Create (AGL-700), shared by every console list\n * surface that creates a record.\n *\n * ## Why it lives in a library\n *\n * It began in `apps/console`, which put it out of reach of the console pages\n * that plugins ship — a plugin's console card cannot import from the app that\n * renders it. So a plugin adding a create button had two options, both bad:\n * an inline form stacked above its table, or a second drawer that looks\n * almost but not quite like this one. Both are how a console comes to have\n * three ways of creating a record.\n *\n * The console keeps a thin wrapper at its old path so its four existing call\n * sites are untouched; it passes its own auth form template through\n * {@link CreateArtifactDrawerProps.FormTemplate}.\n *\n * A drawer rather than a dialog on purpose: creating is a drawer, picking is\n * a dialog (AGL-699). Editing is neither — it is the record's own page.\n */\nexport interface CreateArtifactDrawerProps {\n  open: boolean\n  onClose: () => void\n  /** Drawer heading, e.g. \"Create new component\". */\n  title: string\n  /** Receives the collected field values; closing is the caller's job. */\n  onSubmit: (values: Record<string, any>) => void | Promise<void>\n  /** Extra fields appended after name and description. */\n  extraFields?: any[]\n  /** Rendered under the form when a submit fails. */\n  errorSlot?: ReactNode\n  /**\n   * Whether to offer the shared Description box (AGL-2498).\n   *\n   * True for every artifact whose document stores one. Content collections do\n   * not: `/api/hosts/collections` filters `data` through a per-kind allowlist\n   * of `displayName` + `slug`, so a description typed here would be dropped\n   * without a word. A field the writer silently discards is worse than a field\n   * that was never offered.\n   */\n  includeDescription?: boolean\n  /**\n   * The form's own chrome — the submit button and how the fields are laid out.\n   *\n   * Injectable because the console's version renders an auth-aware template\n   * that lives in the app and depends on the console's session hook. Defaults\n   * to {@link ArtifactFormTemplate}, which is the same layout without that\n   * dependency.\n   */\n  FormTemplate?: any\n  /** Label on the submit button. */\n  submitLabel?: string\n}\n\n/**\n * The default chrome: the fields in a grid and one submit button.\n *\n * No Cancel button of its own — the drawer's app bar already carries one, and\n * a second Cancel inside the form is the shape a reader has to think about.\n */\nexport const ArtifactFormTemplate = forwardRef<any, FormTemplateRenderProps>(\n  (props, ref) => {\n    const { formFields, schema, ...rest } = props\n    const { handleSubmit } = useFormApi()\n    return (\n      <form ref={ref} onSubmit={handleSubmit} noValidate {...rest}>\n        {schema.title}\n        <Grid spacing={2} container>\n          {formFields as any}\n        </Grid>\n        <FormSpy>\n          {({ submitting }) => (\n            <Box sx={{ mt: 2 }}>\n              <FormControl margin=\"normal\" fullWidth>\n                <Button\n                  color=\"primary\"\n                  disabled={submitting}\n                  type=\"submit\"\n                  variant=\"contained\"\n                  fullWidth\n                >\n                  {(schema as { submitLabel?: string }).submitLabel ?? 'Next'}\n                </Button>\n              </FormControl>\n            </Box>\n          )}\n        </FormSpy>\n      </form>\n    )\n  },\n)\nArtifactFormTemplate.displayName = 'ArtifactFormTemplate'\n;(ArtifactFormTemplate as any).aglyn = true\n\nexport function CreateArtifactDrawer(props: CreateArtifactDrawerProps) {\n  const {\n    open,\n    onClose,\n    title,\n    onSubmit,\n    extraFields,\n    errorSlot,\n    includeDescription = true,\n    FormTemplate = ArtifactFormTemplate,\n    submitLabel,\n  } = props\n  const schema = {\n    fields: [\n      ...(includeDescription\n        ? BASE_FIELDS\n        : BASE_FIELDS.filter((field) => field.name !== 'description')),\n      ...(extraFields ?? []),\n    ],\n    ...(submitLabel ? { submitLabel } : {}),\n  }\n  return (\n    <NavigationDrawerComponent\n      open={open}\n      anchor=\"right\"\n      variant=\"temporary\"\n      onClose={onClose}\n      AppBarProps={{ color: 'surface' }}\n      appBarLeft={\n        <>\n          <IconButton\n            color=\"inherit\"\n            edge=\"start\"\n            onClick={onClose}\n            sx={{ mr: 2 }}\n          >\n            <MdiIcon path={ICON_VARIANT_CLOSE.path} />\n            <SrOnly>close drawer</SrOnly>\n          </IconButton>\n          <Typography variant=\"h6\" component=\"div\">\n            {title}\n          </Typography>\n        </>\n      }\n      appBarRight={\n        <Button variant=\"outlined\" color=\"inherit\" onClick={onClose}>\n          {'Cancel'}\n        </Button>\n      }\n    >\n      <Container gutterY>\n        <FormRenderer\n          FormTemplate={FormTemplate}\n          componentMapper={simpleComponentMapper}\n          onSubmit={onSubmit}\n          schema={schema}\n          subscription={{ values: true }}\n          clearOnUnmount\n        />\n        {errorSlot}\n      </Container>\n    </NavigationDrawerComponent>\n  )\n}\n\n/**\n * Same shape and limits the layouts drawer has used since AGL-473, so the\n * creates across the console validate identically.\n */\nexport const BASE_FIELDS = [\n  {\n    component: 'text-field',\n    name: 'displayName',\n    helperText: 'Friendly name for internal reference',\n    type: 'text',\n    label: 'Display name',\n    isRequired: true,\n    validate: [\n      { type: 'required', message: 'Provide a display name' },\n      {\n        type: 'max-length',\n        threshold: 25,\n        message: 'Must not exceed 25 characters',\n      },\n    ],\n  },\n  {\n    component: 'textarea',\n    name: 'description',\n    label: 'Description',\n    helperText: 'Brief description for internal reference',\n    validate: [\n      {\n        type: 'max-length',\n        threshold: 80,\n        message: 'Must not exceed 80 characters',\n      },\n    ],\n  },\n]\n\nCreateArtifactDrawer.displayName = 'CreateArtifactDrawer'\n\nexport default CreateArtifactDrawer\n"],"names":["ICON_VARIANT_CLOSE","Container","MdiIcon","SrOnly","NavigationDrawerComponent","Box","Button","FormControl","Grid","IconButton","Typography","forwardRef","FormRenderer","FormSpy","useFormApi","simpleComponentMapper","ArtifactFormTemplate","props","ref","formFields","schema","rest","handleSubmit","form","onSubmit","noValidate","title","spacing","container","submitting","sx","mt","margin","fullWidth","color","disabled","type","variant","submitLabel","displayName","aglyn","CreateArtifactDrawer","open","onClose","extraFields","errorSlot","includeDescription","FormTemplate","fields","BASE_FIELDS","filter","field","name","anchor","AppBarProps","appBarLeft","edge","onClick","mr","path","component","appBarRight","gutterY","componentMapper","subscription","values","clearOnUnmount","helperText","label","isRequired","validate","message","threshold"],"mappings":"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"}

package/src/lib/components/grid-form-template.component.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type FormTemplateRenderProps } from '../vendor/data-driven-forms';
+export interface GridFormTemplateProps extends FormTemplateRenderProps {
+}
+export declare const GridFormTemplateComponent: import("react").ForwardRefExoticComponent<Omit<GridFormTemplateProps, "ref"> & import("react").RefAttributes<any>>;
+export default GridFormTemplateComponent;

package/src/lib/components/grid-form-template.component.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { mdiContentSave } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { Box, Button, FormControl, Grid } from "@mui/material";
+import { forwardRef } from "react";
+import { FormSpy, useFormApi } from "../vendor/data-driven-forms.js";
+export const GridFormTemplateComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { formFields, schema } = props;
+    const { handleSubmit, onCancel } = useFormApi();
+    return /*#__PURE__*/ _jsxs("form", {
+        ref: ref,
+        onSubmit: handleSubmit,
+        noValidate: true,
+        children: [
+            schema.title,
+            /*#__PURE__*/ _jsx(Grid, {
+                spacing: 2,
+                container: true,
+                children: formFields
+            }),
+            /*#__PURE__*/ _jsx(FormSpy, {
+                children: ({ submitting, validating, pristine, valid })=>/*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            mt: 2
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(FormControl, {
+                                margin: "normal",
+                                fullWidth: true,
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outlined",
+                                    onClick: onCancel,
+                                    disabled: submitting || validating,
+                                    fullWidth: true,
+                                    children: "Cancel"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(FormControl, {
+                                margin: "normal",
+                                fullWidth: true,
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    color: "primary",
+                                    disabled: submitting || !valid || pristine,
+                                    startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                        path: mdiContentSave.path
+                                    }),
+                                    style: {
+                                        marginRight: 8
+                                    },
+                                    type: "submit",
+                                    variant: "contained",
+                                    fullWidth: true,
+                                    children: "Continue"
+                                })
+                            })
+                        ]
+                    })
+            })
+        ]
+    });
+});
+GridFormTemplateComponent.displayName = 'GridFormTemplateComponent';
+GridFormTemplateComponent.aglyn = true;
+export default GridFormTemplateComponent;
+
+//# sourceMappingURL=grid-form-template.component.js.map

package/src/lib/components/grid-form-template.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/components/grid-form-template.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { mdiContentSave } from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\n\nimport { Box, Button, FormControl, Grid } from '@mui/material'\nimport { forwardRef } from 'react'\n\nimport {\n  FormSpy,\n  type FormTemplateRenderProps,\n  useFormApi,\n} from '../vendor/data-driven-forms'\n\nexport interface GridFormTemplateProps extends FormTemplateRenderProps {}\n\nexport const GridFormTemplateComponent = forwardRef<any, GridFormTemplateProps>(\n  (props, ref) => {\n    const { formFields, schema } = props\n    const { handleSubmit, onCancel } = useFormApi()\n    return (\n      <form ref={ref} onSubmit={handleSubmit} noValidate>\n        {schema.title}\n        <Grid spacing={2} container>\n          {formFields as any}\n        </Grid>\n        <FormSpy>\n          {({ submitting, validating, pristine, valid }) => (\n            <Box sx={{\n              mt: 2\n            }}>\n              <FormControl margin=\"normal\" fullWidth>\n                <Button\n                  variant=\"outlined\"\n                  onClick={onCancel}\n                  disabled={submitting || validating}\n                  fullWidth\n                >\n                  Cancel\n                </Button>\n              </FormControl>\n              <FormControl margin=\"normal\" fullWidth>\n                <Button\n                  color=\"primary\"\n                  disabled={submitting || !valid || pristine}\n                  startIcon={<MdiIcon path={mdiContentSave.path} />}\n                  style={{ marginRight: 8 }}\n                  type=\"submit\"\n                  variant=\"contained\"\n                  fullWidth\n                >\n                  Continue\n                </Button>\n              </FormControl>\n            </Box>\n          )}\n        </FormSpy>\n      </form>\n    );\n  },\n)\nGridFormTemplateComponent.displayName = 'GridFormTemplateComponent'\nGridFormTemplateComponent.aglyn = true\nexport default GridFormTemplateComponent\n"],"names":["mdiContentSave","MdiIcon","Box","Button","FormControl","Grid","forwardRef","FormSpy","useFormApi","GridFormTemplateComponent","props","ref","formFields","schema","handleSubmit","onCancel","form","onSubmit","noValidate","title","spacing","container","submitting","validating","pristine","valid","sx","mt","margin","fullWidth","variant","onClick","disabled","color","startIcon","path","style","marginRight","type","displayName","aglyn"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,cAAc,QAAQ,yBAAwB;AACvD,SAASC,OAAO,QAAQ,uBAAsB;AAE9C,SAASC,GAAG,EAAEC,MAAM,EAAEC,WAAW,EAAEC,IAAI,QAAQ,gBAAe;AAC9D,SAASC,UAAU,QAAQ,QAAO;AAElC,SACEC,OAAO,EAEPC,UAAU,QACL,iCAA6B;AAIpC,OAAO,MAAMC,0CAA4BH,WACvC,CAACI,OAAOC;IACN,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAE,GAAGH;IAC/B,MAAM,EAAEI,YAAY,EAAEC,QAAQ,EAAE,GAAGP;IACnC,qBACE,MAACQ;QAAKL,KAAKA;QAAKM,UAAUH;QAAcI,UAAU;;YAC/CL,OAAOM,KAAK;0BACb,KAACd;gBAAKe,SAAS;gBAAGC,SAAS;0BACxBT;;0BAEH,KAACL;0BACE,CAAC,EAAEe,UAAU,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,KAAK,EAAE,iBAC3C,MAACvB;wBAAIwB,IAAI;4BACPC,IAAI;wBACN;;0CACE,KAACvB;gCAAYwB,QAAO;gCAASC,SAAS;0CACpC,cAAA,KAAC1B;oCACC2B,SAAQ;oCACRC,SAAShB;oCACTiB,UAAUV,cAAcC;oCACxBM,SAAS;8CACV;;;0CAIH,KAACzB;gCAAYwB,QAAO;gCAASC,SAAS;0CACpC,cAAA,KAAC1B;oCACC8B,OAAM;oCACND,UAAUV,cAAc,CAACG,SAASD;oCAClCU,yBAAW,KAACjC;wCAAQkC,MAAMnC,eAAemC,IAAI;;oCAC7CC,OAAO;wCAAEC,aAAa;oCAAE;oCACxBC,MAAK;oCACLR,SAAQ;oCACRD,SAAS;8CACV;;;;;;;;AASf,GACD;AACDpB,0BAA0B8B,WAAW,GAAG;AACxC9B,0BAA0B+B,KAAK,GAAG;AAClC,eAAe/B,0BAAyB"}

package/src/lib/components/icon-select.component.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type HTMLAttributes } from 'react';
+declare const classKeys: import("@aglyn/shared-ui-theme").ClassKeyMap<"button" | "label" | "collapse" | "icon" | "root" | "selected" | "opener" | "preview" | "collapseInner" | "gridListWrapper" | "gridList", "AglynIconSelect">;
+export interface IconSelectProps extends HTMLAttributes<HTMLDivElement> {
+    initialValue?: string;
+    classes?: Partial<typeof classKeys>;
+}
+export interface IconSelectControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Picked icon id, or empty for "nothing chosen yet". */
+    value?: string;
+    onChange?: (iconId: string) => void;
+    label?: JSX.Node;
+    helperText?: JSX.Node;
+    GridListProps?: Record<string, unknown>;
+    classes?: Partial<typeof classKeys>;
+}
+/**
+ * The picker itself, with no form library attached (AGL-1193).
+ *
+ * Extracted so surfaces outside the designer can offer the SAME picker
+ * rather than growing a second one: the console sets a reusable
+ * component's icon from a plain dialog and a plain detail form, neither of
+ * which runs inside a data-driven-forms tree. The field below is now a
+ * thin adapter over this, so the two can't drift.
+ */
+export declare const IconSelectControl: import("react").ForwardRefExoticComponent<IconSelectControlProps & import("react").RefAttributes<any>>;
+/**
+ * The data-driven-forms field: everything form-shaped (validation message,
+ * helper/description precedence, the final-form input) resolved here, and
+ * the picking itself delegated to {@link IconSelectControl}.
+ *
+ * Sits in the same {@link FormFieldGrid} every other field does, so the corner
+ * controls a schema asks for — the help tip, the opt-in clear, a caller's own
+ * — are where they are on every other field rather than silently dropped.
+ */
+declare const IconSelectComponent: import("react").ForwardRefExoticComponent<IconSelectProps & import("react").RefAttributes<any>>;
+export default IconSelectComponent;

package/src/lib/components/icon-select.component.js

@@ -0,0 +1,453 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { DEFAULT_ICON, mdiCheck, mdiChevronDown, mdiChevronUp } from "@aglyn/shared-data-mdi";
+import { CardListItem, MdiIcon } from "@aglyn/shared-ui-jsx";
+import { useMdiIconsFuzzy } from "@aglyn/shared-ui-jsx/hooks/mdi-icon/use-mdi-icons-fuzzy";
+import { GridList } from "@aglyn/shared-ui-jsx/components/grid-list";
+import { generateComponentClassKeys, styled } from "@aglyn/shared-ui-theme";
+import { useDebouncedCallback } from "@aglyn/shared-util-vendor/use-debounce";
+import { Box, Button, ButtonBase, Collapse, Grid, Link as MuiLink, TextField as MuiTextField, Tooltip, Typography } from "@mui/material";
+import { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
+import FormFieldGrid, { buildFieldClear } from "../mapper/form-field-grid.js";
+import { validationMessage } from "../utils/validation-message.js";
+import { useFieldApi } from "../vendor/data-driven-forms.js";
+const iconUnset = _extends({}, DEFAULT_ICON, {
+    id: null,
+    name: '(none)'
+});
+const classKeys = generateComponentClassKeys('AglynIconSelect', [
+    'root',
+    'button',
+    'icon',
+    'label',
+    'selected',
+    'opener',
+    'preview',
+    'collapse',
+    'collapseInner',
+    'gridListWrapper',
+    'gridList'
+]);
+const StyledCollapse = styled(Collapse, {
+    name: 'AglynIconSelectCollapse'
+})(({ theme })=>({
+        '& .MuiCollapse-wrapper': {
+            height: 412
+        },
+        '& .MuiCollapse-wrapperInner': {
+            paddingTop: theme.spacing(1),
+            display: 'flex',
+            flexDirection: 'column',
+            flexGrow: 1,
+            flexShrink: 0,
+            alignSelf: 'stretch'
+        }
+    }));
+const GridListWrapper = styled('div', {
+    name: 'AglynIconSelectListWrapper'
+})(({ theme })=>{
+    const tv = theme.vars || theme;
+    return {
+        height: '100%',
+        marginTop: theme.spacing(1),
+        border: `1px solid ${tv.palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+        [`& .${classKeys.gridList}`]: {
+            padding: theme.spacing(1)
+        }
+    };
+});
+/**
+ * The picker itself, with no form library attached (AGL-1193).
+ *
+ * Extracted so surfaces outside the designer can offer the SAME picker
+ * rather than growing a second one: the console sets a reusable
+ * component's icon from a plain dialog and a plain detail form, neither of
+ * which runs inside a data-driven-forms tree. The field below is now a
+ * thin adapter over this, so the two can't drift.
+ */ export const IconSelectControl = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { value: currentValue = '', onChange, label, helperText: helperContent, GridListProps } = props, rest = _object_without_properties_loose(props, [
+        "value",
+        "onChange",
+        "label",
+        "helperText",
+        "GridListProps"
+    ]);
+    const [open, setOpen] = useState(false);
+    const [icons, allIcons, applyFilter, clearFilter] = useMdiIconsFuzzy();
+    /**
+     * The DRAFT pick (AGL-2486). Picking is two steps: clicking an icon only
+     * moves this, and `Choose` is the one thing that reaches `onChange` and
+     * therefore the canvas.
+     */ const [selected, setSelected] = useState(currentValue);
+    /**
+     * Re-seeded from the live value whenever the panel opens or the value
+     * changes underneath. Without this an abandoned pick survived the panel
+     * being closed, so the NEXT `Choose` applied an icon the author had
+     * already walked away from.
+     */ useEffect(()=>{
+        setSelected(currentValue);
+    }, [
+        currentValue,
+        open
+    ]);
+    // Rendering all ~6,600 icons at once froze the panel (AGL-340): cap the
+    // grid and let search narrow the rest.
+    const MAX_RENDERED_ICONS = 240;
+    const visibleIcons = useMemo(()=>icons.length > MAX_RENDERED_ICONS ? icons.slice(0, MAX_RENDERED_ICONS) : icons, [
+        icons
+    ]);
+    const [currentIcon, selectedIcon] = useMemo(()=>{
+        const findIcon = (id)=>allIcons.find((icon)=>icon.id === id);
+        const currentIcon = currentValue && findIcon(currentValue) || iconUnset;
+        const selectedIcon = selected && findIcon(selected) || iconUnset;
+        return [
+            currentIcon,
+            selectedIcon
+        ];
+    }, [
+        currentValue,
+        selected,
+        allIcons
+    ]);
+    const handleButtonClick = useCallback(()=>{
+        setOpen((prev)=>!prev);
+    }, [
+        setOpen
+    ]);
+    /** Nothing to confirm until the draft differs from what is applied. */ const hasPendingPick = selected !== currentValue;
+    const handleCancelButtonClick = useCallback(()=>{
+        // Closing re-seeds the draft (the effect above), so this only has to
+        // close — but it says so explicitly, because "cancel leaves the canvas
+        // alone" is the guarantee, not an emergent property of an effect.
+        setSelected(currentValue);
+        setOpen(false);
+    }, [
+        currentValue
+    ]);
+    const handleChooseButtonClick = useCallback(()=>{
+        if (selected === currentValue) return;
+        onChange == null ? void 0 : onChange(selected);
+        setOpen(false);
+    }, [
+        onChange,
+        selected,
+        currentValue
+    ]);
+    const updateFilter = useDebouncedCallback((value)=>{
+        if (value) {
+            applyFilter(value);
+        } else {
+            clearFilter();
+        }
+    }, 300);
+    const handleFilterChange = useCallback((e)=>{
+        const target = e.currentTarget;
+        if (target && target.value) {
+            updateFilter(target.value);
+        } else {
+            updateFilter();
+        }
+    }, [
+        updateFilter
+    ]);
+    const handleItemClick = useCallback((e, item)=>{
+        setSelected(item.id);
+    }, [
+        setSelected
+    ]);
+    const renderItemContent = useCallback(function RenderItemContent(item, key) {
+        var _item_id;
+        const isSelected = Boolean(selected) && selected === item.id;
+        return /*#__PURE__*/ _jsx(Tooltip, {
+            title: item.name,
+            disableInteractive: true,
+            enterDelay: 375,
+            enterNextDelay: 745,
+            children: /*#__PURE__*/ _jsxs(CardListItem, {
+                item: item,
+                selected: isSelected,
+                // A real toggle, so the pick is announced and not only
+                // painted (AGL-2486).
+                role: "button",
+                "aria-pressed": isSelected,
+                onClick: (e)=>handleItemClick(e, item),
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            fontSize: "medium",
+                            path: item.path
+                        })
+                    }),
+                    isSelected ? // Belt and braces on the fill: a tick reads as "picked"
+                    // even where the tint is subtle, and gives the state
+                    // something to assert against.
+                    /*#__PURE__*/ _jsx(Box, {
+                        "data-aglyn-icon-selected": "",
+                        sx: {
+                            position: 'absolute',
+                            top: 2,
+                            right: 2,
+                            lineHeight: 0,
+                            fontSize: 14,
+                            borderRadius: '50%',
+                            bgcolor: 'primary.contrastText',
+                            color: 'primary.main'
+                        },
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            fontSize: "inherit",
+                            path: mdiCheck.path
+                        })
+                    }) : null
+                ]
+            })
+        }, (_item_id = item.id) != null ? _item_id : key);
+    }, [
+        selected,
+        handleItemClick
+    ]);
+    return /*#__PURE__*/ _jsxs(Grid, {
+        ref: ref,
+        container: true,
+        children: [
+            /*#__PURE__*/ _jsxs(Grid, {
+                spacing: 2,
+                container: true,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Grid, {
+                        children: /*#__PURE__*/ _jsx(ButtonBase, {
+                            onClick: handleButtonClick,
+                            disableRipple: true,
+                            sx: (theme)=>({
+                                    fontSize: theme.typography.pxToRem(38)
+                                }),
+                            title: currentIcon.name || 'Choose icon',
+                            children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                fontSize: "inherit",
+                                path: currentIcon.path
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(Grid, {
+                        size: {
+                            sm: "grow"
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                component: "div",
+                                variant: "caption",
+                                children: label
+                            }),
+                            /*#__PURE__*/ _jsxs(MuiLink, {
+                                onClick: handleButtonClick,
+                                variant: "button",
+                                component: "button",
+                                color: "primary",
+                                sx: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    justifyContent: 'flex-start'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                            fontSize: "inherit",
+                                            path: open ? mdiChevronUp.path : mdiChevronDown.path
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: currentIcon.name
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Grid, {
+                size: 12,
+                children: /*#__PURE__*/ _jsxs(StyledCollapse, {
+                    in: open,
+                    children: [
+                        /*#__PURE__*/ _jsxs(Grid, {
+                            spacing: 2,
+                            container: true,
+                            sx: {
+                                alignItems: "center"
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Grid, {
+                                    size: 12,
+                                    children: /*#__PURE__*/ _jsx(MuiTextField, {
+                                        onChange: handleFilterChange,
+                                        placeholder: "Search icons...",
+                                        size: "small",
+                                        helperText: helperContent,
+                                        fullWidth: true
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsxs(Grid, {
+                                    size: "grow",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Typography, {
+                                            component: "div",
+                                            variant: "body2",
+                                            children: [
+                                                "Selected icon: ",
+                                                /*#__PURE__*/ _jsx("b", {
+                                                    children: selectedIcon.name
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            component: "div",
+                                            variant: "caption",
+                                            color: "text.secondary",
+                                            children: hasPendingPick ? `Not applied yet — press Choose to replace ${currentIcon.name}.` : 'Pick an icon, then press Choose to apply it.'
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Grid, {
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        color: "inherit",
+                                        onClick: handleCancelButtonClick,
+                                        children: "Cancel"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Grid, {
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        color: "primary",
+                                        disabled: !hasPendingPick,
+                                        onClick: handleChooseButtonClick,
+                                        variant: "contained",
+                                        children: "Choose"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(GridListWrapper, {
+                            children: [
+                                /*#__PURE__*/ _jsx(GridList, _extends({
+                                    GridContainerProps: {
+                                        spacing: 1
+                                    },
+                                    GridItemProps: {
+                                        size: {
+                                            xs: 2
+                                        }
+                                    },
+                                    ListWrapperProps: {
+                                        className: classKeys.gridList
+                                    },
+                                    items: visibleIcons,
+                                    renderItemContent: renderItemContent
+                                }, GridListProps)),
+                                icons.length > visibleIcons.length ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    sx: {
+                                        display: 'block',
+                                        px: 1,
+                                        pb: 1
+                                    },
+                                    children: `Showing ${visibleIcons.length} of ${icons.length} icons — search to narrow down.`
+                                }) : null,
+                                allIcons.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    sx: {
+                                        display: 'block',
+                                        px: 1,
+                                        pb: 1
+                                    },
+                                    children: 'Loading icon catalog…'
+                                }) : null
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+});
+IconSelectControl.displayName = 'IconSelectControl';
+/**
+ * The data-driven-forms field: everything form-shaped (validation message,
+ * helper/description precedence, the final-form input) resolved here, and
+ * the picking itself delegated to {@link IconSelectControl}.
+ *
+ * Sits in the same {@link FormFieldGrid} every other field does, so the corner
+ * controls a schema asks for — the help tip, the opt-in clear, a caller's own
+ * — are where they are on every other field rather than silently dropped.
+ */ const IconSelectComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const _useFieldApi = useFieldApi(props), { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, validateOnMount, meta, inputProps, GridListProps, help, clearable, FormFieldGridProps = {} } = _useFieldApi, rest = _object_without_properties_loose(_useFieldApi, [
+        "input",
+        "isReadOnly",
+        "isDisabled",
+        "placeholder",
+        "isRequired",
+        "label",
+        "helperText",
+        "description",
+        "validateOnMount",
+        "meta",
+        "inputProps",
+        "GridListProps",
+        "help",
+        "clearable",
+        "FormFieldGridProps"
+    ]);
+    const invalidMessage = validationMessage(meta, validateOnMount);
+    const helperContent = [
+        invalidMessage,
+        (meta.touched || validateOnMount) && meta.warning,
+        helperText,
+        description
+    ].find((i)=>Boolean(i));
+    // The picker can only ever choose an icon, so without this nothing takes
+    // one back off again.
+    const clear = buildFieldClear({
+        clearable,
+        label,
+        hasValue: Boolean(input.value),
+        locked: Boolean(isDisabled || isReadOnly),
+        onClear: ()=>input.onChange('')
+    });
+    return /*#__PURE__*/ _jsx(FormFieldGrid, _extends({
+        help: help,
+        clear: clear
+    }, FormFieldGridProps, {
+        children: /*#__PURE__*/ _jsx(IconSelectControl, {
+            ref: ref,
+            value: input.value,
+            onChange: input.onChange,
+            label: label,
+            helperText: helperContent,
+            GridListProps: GridListProps
+        })
+    }));
+});
+IconSelectComponent.displayName = 'IconSelectComponent';
+IconSelectComponent.aglyn = true;
+export default IconSelectComponent;
+
+//# sourceMappingURL=icon-select.component.js.map