@aglyn/besigner-ui 1.0.0-beta.143

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

@@ -0,0 +1,368 @@
+/**
+ * @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 { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ICON_VARIANT_CLOSE, ICON_VARIANT_FILTER } from "@aglyn/shared-data-enums";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { AppBar, Box, Button, Collapse, Dialog, DialogContent, Divider, IconButton, Slide, Toolbar, Typography } from "@mui/material";
+import { Observer, observer } from "mobx-react-lite";
+import { forwardRef, useCallback, useState } from "react";
+import usePickerFilter from "../hooks/use-picker-filter.js";
+import useVisibleComponentCategories from "../hooks/use-visible-component-categories.js";
+import { describeElement } from "../utils/describe-element.js";
+import AccordionListComponent from "./accordion-list.component.js";
+import ElementDetailView from "./element-detail.component.js";
+import EmptyResults from "./empty-results.js";
+import NodeCard from "./node-card.js";
+import PickerSearchField from "./picker-search-field.js";
+const Transition = /*#__PURE__*/ forwardRef(function Transition(props, ref) {
+    return /*#__PURE__*/ _jsx(Slide, _extends({
+        direction: "up",
+        ref: ref
+    }, props));
+});
+/**
+ * How the two panes share the dialog above the stacking breakpoint
+ * (AGL-2486).
+ *
+ * An even split, because the preview is sized by the pane and nothing else:
+ * `ElementPreview` composes at a fixed 1280px stage and scales by
+ * `paneWidth / 1280`, so the pane's width IS the preview's size. A 420px
+ * pane rendered at 0.30; half of a 1536px dialog renders at 0.57, which is
+ * the "make the preview bigger" ask answered by arithmetic rather than by a
+ * bigger `previewHeight` cap on the same small stage.
+ *
+ * The grid does not pay for it. At an even split the tiles keep their full
+ * `MIN_TILE_WIDTH` — a 1944px screen runs four 166px tiles where the fixed
+ * pane ran six 161px ones. Fewer columns, no narrower tiles.
+ */ const PANE_SPLIT = '1 1 50%';
+/**
+ * Narrowest a tile may be before its label stops fitting, in px (AGL-2486).
+ *
+ * The grid used to size its tiles off the VIEWPORT breakpoint (`sm` → 3/12 →
+ * four columns) which is the wrong question to ask: the tiles live in a pane
+ * whose width is the dialog minus the detail pane, and a viewport breakpoint
+ * cannot see the pane. So the detail pane came out of the tiles — four
+ * columns in 448px, 94px each, with `Announcement Bar` painting outside its
+ * own card. `auto-fill` asks the pane instead, so the two panes stop trading:
+ * widening the dialog adds columns, and the detail pane costs columns rather
+ * than shrinking every tile.
+ *
+ * 150px is measured, not chosen: the widest single word in the catalogue
+ * (`Announcement`) needs ~100px at `subtitle2`, and the tiles that survive
+ * on one line at 150 are the ones that wrapped at 94.
+ */ const MIN_TILE_WIDTH = 150;
+export const ComponentPicker = observer(/*#__PURE__*/ forwardRef((props, forwardRef)=>{
+    const { open, onClose, onSelectItem } = props, rest = _object_without_properties_loose(props, [
+        "open",
+        "onClose",
+        "onSelectItem"
+    ]);
+    const allItems = useVisibleComponentCategories();
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [selected, setSelected] = useState(null);
+    const clearSelected = useCallback(()=>setSelected(null), []);
+    // The SAME search the Elements panel runs (AGL-2486). Both surfaces read
+    // one hook so a query cannot mean two different things depending on
+    // which picker you happened to open.
+    const { filter, items, handleFilterChange } = usePickerFilter(allItems, clearSelected);
+    const handleConfirm = useCallback((e)=>{
+        onSelectItem == null ? void 0 : onSelectItem(e, {
+            option: selected
+        });
+    }, [
+        selected,
+        onSelectItem
+    ]);
+    const handleClose = useCallback((e, reason = 'canceled')=>{
+        onClose == null ? void 0 : onClose(e, reason);
+    }, [
+        onClose
+    ]);
+    const handleItemClick = useCallback((e, item)=>{
+        setSelected((prev)=>{
+            if (prev && (prev == null ? void 0 : prev.$id) === (item == null ? void 0 : item.$id)) {
+                return null;
+            }
+            return item;
+        });
+    }, []);
+    return /*#__PURE__*/ _jsxs(Dialog, _extends({
+        ref: forwardRef,
+        onClose: handleClose,
+        open: open,
+        // Picking one of ~110 elements is a browsing task, not a confirm box
+        // (AGL-2486). At `md` the paper was 900px on a 1944px screen and the
+        // detail pane took 420 of it, leaving the grid narrower than the
+        // whole dialog had been before the pane existed.
+        //
+        // `fullWidth` rather than the `width: '100%'` this carried before:
+        // `100%` ignores the paper's own 32px margins, so the paper overflows
+        // the viewport at any width below its cap. That was invisible while
+        // the cap was 900 and would be a horizontal scrollbar on every laptop
+        // at this one.
+        maxWidth: "xl",
+        fullWidth: true,
+        slots: {
+            transition: Transition
+        }
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsxs(AppBar, {
+                position: "relative",
+                color: "surface",
+                enableColorOnDark: true,
+                children: [
+                    /*#__PURE__*/ _jsxs(Toolbar, {
+                        children: [
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                edge: "start",
+                                color: "inherit",
+                                onClick: handleClose,
+                                "aria-label": "close",
+                                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: ICON_VARIANT_CLOSE.path
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "h6",
+                                component: "div",
+                                noWrap: true,
+                                sx: {
+                                    textOverflow: 'ellipsis',
+                                    ml: 2,
+                                    flex: 1
+                                },
+                                children: 'Choose element'
+                            }),
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                type: "button",
+                                color: "inherit",
+                                sx: {
+                                    p: '10px'
+                                },
+                                "aria-label": "search",
+                                onClick: ()=>setFilterOpen((prev)=>!prev),
+                                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: ICON_VARIANT_FILTER.path
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Divider, {
+                                sx: {
+                                    height: 28,
+                                    m: 0.5
+                                },
+                                orientation: "vertical"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                autoFocus: true,
+                                color: "inherit",
+                                onClick: handleClose,
+                                children: 'Close'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Collapse, {
+                        orientation: "vertical",
+                        in: filterOpen,
+                        children: /*#__PURE__*/ _jsx(Toolbar, {
+                            component: "form",
+                            variant: "dense",
+                            sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                width: 1,
+                                borderTop: 1,
+                                borderColor: 'divider'
+                            },
+                            children: /*#__PURE__*/ _jsx(PickerSearchField, {
+                                value: filter,
+                                onChange: handleFilterChange
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(DialogContent, {
+                dividers: true,
+                sx: {
+                    p: 0,
+                    display: 'flex',
+                    // `md` is where an even split stops paying for itself, and the
+                    // number is derived rather than picked: at a 900px viewport the
+                    // paper is 836px, so each pane is 418. That is the LAST width at
+                    // which the grid still runs two full-width tiles (2×150 + a 24
+                    // gap + 32 of padding = 356) and the preview still composes at
+                    // the 0.30 scale it had in the old fixed 420px pane. Below it,
+                    // sharing a row makes both panes worse than stacking, where each
+                    // gets the dialog's whole width — so the preview gets BIGGER on
+                    // a tablet, not smaller.
+                    //
+                    // Stacking also keeps Confirm reachable. The pane used to be
+                    // `display: none` under `sm` and Confirm lives inside it, so the
+                    // dialog could be browsed and never used on a phone.
+                    flexDirection: {
+                        xs: 'column',
+                        md: 'row'
+                    },
+                    alignItems: 'stretch',
+                    minHeight: '60vh'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            flex: {
+                                xs: '1 1 auto',
+                                md: PANE_SPLIT
+                            },
+                            // Without this the tiles' intrinsic width becomes the pane's
+                            // floor and the split silently stops being even.
+                            minWidth: 0,
+                            // Stacked, the panes scroll together as one column; side by
+                            // side, the grid scrolls under a detail pane that stays put.
+                            overflowY: {
+                                xs: 'visible',
+                                md: 'auto'
+                            }
+                        },
+                        children: !(items == null ? void 0 : items.length) ? /*#__PURE__*/ _jsx(EmptyResults, {
+                            sx: {
+                                minHeight: '40vh',
+                                height: 1
+                            }
+                        }) : /*#__PURE__*/ _jsx(AccordionListComponent, {
+                            // No `key` remount to force the results group open
+                            // (AGL-2486) — see the Elements panel for why that could not
+                            // work. The list opens a group when it first appears.
+                            items: items,
+                            defaultExpanded: items.map((i)=>i.$id),
+                            getItemId: (item)=>item == null ? void 0 : item.$id,
+                            onRenderSummary: ({ item })=>/*#__PURE__*/ _jsx(Observer, {
+                                    children: ()=>/*#__PURE__*/ _jsx(_Fragment, {
+                                            children: item == null ? void 0 : item.label
+                                        })
+                                }),
+                            AccordionDetailsProps: {
+                                sx: {
+                                    overflowX: 'hidden'
+                                }
+                            },
+                            onRenderDetail: ({ item })=>/*#__PURE__*/ _jsx(Observer, {
+                                    children: ()=>{
+                                        var _item_items;
+                                        return /*#__PURE__*/ _jsx(Box, {
+                                            children: /*#__PURE__*/ _jsx(Box, {
+                                                "data-testid": "picker-element-grid",
+                                                sx: {
+                                                    display: 'grid',
+                                                    gridTemplateColumns: `repeat(auto-fill, minmax(${MIN_TILE_WIDTH}px, 1fr))`,
+                                                    gap: 3,
+                                                    minWidth: 0
+                                                },
+                                                children: item == null ? void 0 : (_item_items = item.items) == null ? void 0 : _item_items.map((node, index)=>{
+                                                    var _ref;
+                                                    return /*#__PURE__*/ _jsx(Observer, {
+                                                        children: ()=>/*#__PURE__*/ _jsx(NodeCard, {
+                                                                sx: [
+                                                                    {
+                                                                        cursor: 'pointer'
+                                                                    },
+                                                                    (selected == null ? void 0 : selected.$id) === (node == null ? void 0 : node.$id) ? {
+                                                                        borderColor: 'primary.main'
+                                                                    } : null
+                                                                ],
+                                                                node: node,
+                                                                onClick: (e)=>handleItemClick(e, node)
+                                                            })
+                                                    }, (_ref = node == null ? void 0 : node.$id) != null ? _ref : index);
+                                                })
+                                            })
+                                        });
+                                    }
+                                })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            flex: {
+                                xs: '0 0 auto',
+                                md: PANE_SPLIT
+                            },
+                            width: {
+                                xs: 1,
+                                md: 'auto'
+                            },
+                            minWidth: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            // Stacked, the divider that separates the panes is above it,
+                            // not beside it.
+                            borderLeft: {
+                                xs: 0,
+                                md: 1
+                            },
+                            borderTop: {
+                                xs: 1,
+                                md: 0
+                            },
+                            borderColor: 'divider',
+                            backgroundColor: 'surface.main'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                sx: {
+                                    flex: 1,
+                                    minHeight: 0,
+                                    overflowY: 'auto',
+                                    p: 2
+                                },
+                                children: selected ? /* The same content component the panel floats over the
+                   canvas — one description of an element, two placements. */ /*#__PURE__*/ _jsx(ElementDetailView, {
+                                    detail: describeElement(selected),
+                                    node: selected,
+                                    previewHeight: 380
+                                }) : /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "textSecondary",
+                                    children: 'Choose an element to see what it does.'
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                sx: {
+                                    p: 1.5,
+                                    borderTop: 1,
+                                    borderColor: 'divider'
+                                },
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    fullWidth: true,
+                                    variant: "contained",
+                                    disabled: !selected,
+                                    onClick: handleConfirm,
+                                    children: 'Confirm'
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    }));
+}));
+ComponentPicker.displayName = 'ComponentPicker';
+export default ComponentPicker;
+
+//# sourceMappingURL=component-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/component-picker.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 type * as Aglyn from '@aglyn/aglyn'\nimport {\n  ICON_VARIANT_CLOSE,\n  ICON_VARIANT_FILTER,\n} from '@aglyn/shared-data-enums'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport {\n  AppBar,\n  Box,\n  Button,\n  Collapse,\n  Dialog,\n  DialogContent,\n  Divider,\n  DialogProps,\n  IconButton,\n  Slide,\n  Toolbar,\n  Typography,\n} from '@mui/material'\nimport type { TransitionProps } from '@mui/material/transitions'\nimport { Observer, observer } from 'mobx-react-lite'\nimport { forwardRef, SyntheticEvent, useCallback, useState } from 'react'\nimport usePickerFilter from '../hooks/use-picker-filter'\nimport useVisibleComponentCategories from '../hooks/use-visible-component-categories'\nimport { describeElement } from '../utils/describe-element'\nimport AccordionListComponent from './accordion-list.component'\nimport ElementDetailView from './element-detail.component'\nimport EmptyResults from './empty-results'\nimport NodeCard from './node-card'\nimport PickerSearchField from './picker-search-field'\n\nconst Transition = forwardRef(function Transition(\n  props: TransitionProps & {\n    children: React.ReactElement\n  },\n  ref: React.Ref<unknown>,\n) {\n  return <Slide direction=\"up\" ref={ref} {...props} />\n})\n\ntype PickerOption = Aglyn.ComponentSchema<any> | Aglyn.PresetSchema<any>\n\n/**\n * How the two panes share the dialog above the stacking breakpoint\n * (AGL-2486).\n *\n * An even split, because the preview is sized by the pane and nothing else:\n * `ElementPreview` composes at a fixed 1280px stage and scales by\n * `paneWidth / 1280`, so the pane's width IS the preview's size. A 420px\n * pane rendered at 0.30; half of a 1536px dialog renders at 0.57, which is\n * the \"make the preview bigger\" ask answered by arithmetic rather than by a\n * bigger `previewHeight` cap on the same small stage.\n *\n * The grid does not pay for it. At an even split the tiles keep their full\n * `MIN_TILE_WIDTH` — a 1944px screen runs four 166px tiles where the fixed\n * pane ran six 161px ones. Fewer columns, no narrower tiles.\n */\nconst PANE_SPLIT = '1 1 50%'\n\n/**\n * Narrowest a tile may be before its label stops fitting, in px (AGL-2486).\n *\n * The grid used to size its tiles off the VIEWPORT breakpoint (`sm` → 3/12 →\n * four columns) which is the wrong question to ask: the tiles live in a pane\n * whose width is the dialog minus the detail pane, and a viewport breakpoint\n * cannot see the pane. So the detail pane came out of the tiles — four\n * columns in 448px, 94px each, with `Announcement Bar` painting outside its\n * own card. `auto-fill` asks the pane instead, so the two panes stop trading:\n * widening the dialog adds columns, and the detail pane costs columns rather\n * than shrinking every tile.\n *\n * 150px is measured, not chosen: the widest single word in the catalogue\n * (`Announcement`) needs ~100px at `subtitle2`, and the tiles that survive\n * on one line at 150 are the ones that wrapped at 94.\n */\nconst MIN_TILE_WIDTH = 150\n\nexport interface ComponentPickerProps extends DialogProps {\n  onSelectItem?: (e: SyntheticEvent, item?: { option: PickerOption }) => void\n}\n\nexport const ComponentPicker = observer(\n  forwardRef<any, ComponentPickerProps>((props, forwardRef) => {\n    const { open, onClose, onSelectItem, ...rest } = props\n    const allItems = useVisibleComponentCategories()\n\n    const [filterOpen, setFilterOpen] = useState(false)\n    const [selected, setSelected] = useState<PickerOption>(null)\n\n    const clearSelected = useCallback(() => setSelected(null), [])\n\n    // The SAME search the Elements panel runs (AGL-2486). Both surfaces read\n    // one hook so a query cannot mean two different things depending on\n    // which picker you happened to open.\n    const { filter, items, handleFilterChange } = usePickerFilter(\n      allItems,\n      clearSelected,\n    )\n\n    const handleConfirm = useCallback(\n      (e: SyntheticEvent) => {\n        onSelectItem?.(e, { option: selected })\n      },\n      [selected, onSelectItem],\n    )\n\n    const handleClose = useCallback(\n      (e: object, reason = 'canceled') => {\n        onClose?.(\n          e,\n          reason as Parameters<NonNullable<DialogProps['onClose']>>[1],\n        )\n      },\n      [onClose],\n    )\n\n    const handleItemClick = useCallback((e, item: PickerOption) => {\n      setSelected((prev) => {\n        if (prev && prev?.$id === item?.$id) {\n          return null\n        }\n        return item\n      })\n    }, [])\n\n    return (\n      <Dialog\n        ref={forwardRef}\n        onClose={handleClose}\n        open={open}\n        // Picking one of ~110 elements is a browsing task, not a confirm box\n        // (AGL-2486). At `md` the paper was 900px on a 1944px screen and the\n        // detail pane took 420 of it, leaving the grid narrower than the\n        // whole dialog had been before the pane existed.\n        //\n        // `fullWidth` rather than the `width: '100%'` this carried before:\n        // `100%` ignores the paper's own 32px margins, so the paper overflows\n        // the viewport at any width below its cap. That was invisible while\n        // the cap was 900 and would be a horizontal scrollbar on every laptop\n        // at this one.\n        maxWidth=\"xl\"\n        fullWidth\n        slots={{ transition: Transition }}\n        {...rest}\n      >\n        {/* Shared app-bar treatment (AGL-704) — see the console's\n            secondary-app-bar. enableColorOnDark is required or AppBar\n            substitutes its own dark-mode colour. */}\n        <AppBar position=\"relative\" color=\"surface\" enableColorOnDark>\n          <Toolbar>\n            <IconButton\n              edge=\"start\"\n              color=\"inherit\"\n              onClick={handleClose}\n              aria-label=\"close\"\n            >\n              <MdiIcon path={ICON_VARIANT_CLOSE.path} />\n            </IconButton>\n            <Typography\n              variant=\"h6\"\n              component=\"div\"\n              noWrap\n              sx={{\n                textOverflow: 'ellipsis',\n                ml: 2,\n                flex: 1,\n              }}\n            >\n              {'Choose element'}\n            </Typography>\n            <IconButton\n              type=\"button\"\n              color=\"inherit\"\n              sx={{ p: '10px' }}\n              aria-label=\"search\"\n              onClick={() => setFilterOpen((prev) => !prev)}\n            >\n              <MdiIcon path={ICON_VARIANT_FILTER.path} />\n            </IconButton>\n            <Divider sx={{ height: 28, m: 0.5 }} orientation=\"vertical\" />\n            <Button autoFocus color=\"inherit\" onClick={handleClose}>\n              {'Close'}\n            </Button>\n          </Toolbar>\n\n          <Collapse orientation=\"vertical\" in={filterOpen}>\n            <Toolbar\n              component=\"form\"\n              variant=\"dense\"\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                width: 1,\n                borderTop: 1,\n                borderColor: 'divider',\n              }}\n            >\n              <PickerSearchField value={filter} onChange={handleFilterChange} />\n            </Toolbar>\n          </Collapse>\n        </AppBar>\n        {/* Grid left, detail right (AGL-2486). The detail used to be a strip\n            under the grid, which gave a preview and five facts about a\n            quarter of the height they need while the modal's width sat\n            unused. A full-height pane is also the first place the rendered\n            preview has room to be worth drawing. */}\n        <DialogContent\n          dividers\n          sx={{\n            p: 0,\n            display: 'flex',\n            // `md` is where an even split stops paying for itself, and the\n            // number is derived rather than picked: at a 900px viewport the\n            // paper is 836px, so each pane is 418. That is the LAST width at\n            // which the grid still runs two full-width tiles (2×150 + a 24\n            // gap + 32 of padding = 356) and the preview still composes at\n            // the 0.30 scale it had in the old fixed 420px pane. Below it,\n            // sharing a row makes both panes worse than stacking, where each\n            // gets the dialog's whole width — so the preview gets BIGGER on\n            // a tablet, not smaller.\n            //\n            // Stacking also keeps Confirm reachable. The pane used to be\n            // `display: none` under `sm` and Confirm lives inside it, so the\n            // dialog could be browsed and never used on a phone.\n            flexDirection: { xs: 'column', md: 'row' },\n            alignItems: 'stretch',\n            minHeight: '60vh',\n          }}\n        >\n          <Box\n            sx={{\n              flex: { xs: '1 1 auto', md: PANE_SPLIT },\n              // Without this the tiles' intrinsic width becomes the pane's\n              // floor and the split silently stops being even.\n              minWidth: 0,\n              // Stacked, the panes scroll together as one column; side by\n              // side, the grid scrolls under a detail pane that stays put.\n              overflowY: { xs: 'visible', md: 'auto' },\n            }}\n          >\n            {!items?.length ? (\n              <EmptyResults sx={{ minHeight: '40vh', height: 1 }} />\n            ) : (\n              <AccordionListComponent\n                // No `key` remount to force the results group open\n                // (AGL-2486) — see the Elements panel for why that could not\n                // work. The list opens a group when it first appears.\n                items={items}\n                defaultExpanded={items.map((i) => i.$id)}\n                getItemId={(item) => item?.$id}\n                onRenderSummary={({ item }) => (\n                  <Observer>{() => <>{item?.label}</>}</Observer>\n                )}\n                AccordionDetailsProps={{\n                  sx: { overflowX: 'hidden' },\n                }}\n                onRenderDetail={({ item }) => (\n                  <Observer>\n                    {() => (\n                      <Box>\n                        {/* A CSS grid, not a 12-column one: the column count\n                            has to come from the pane's own width. See\n                            MIN_TILE_WIDTH. `1fr` as the max so the last\n                            column is not a ragged remainder. */}\n                        <Box\n                          data-testid=\"picker-element-grid\"\n                          sx={{\n                            display: 'grid',\n                            gridTemplateColumns: `repeat(auto-fill, minmax(${MIN_TILE_WIDTH}px, 1fr))`,\n                            gap: 3,\n                            minWidth: 0,\n                          }}\n                        >\n                          {item?.items?.map(\n                            (\n                              node: (typeof allItems)[number]['items'][number],\n                              index: number,\n                            ) => (\n                              <Observer key={node?.$id ?? index}>\n                                {() => (\n                                  <NodeCard\n                                    sx={[\n                                      { cursor: 'pointer' },\n                                      selected?.$id === node?.$id\n                                        ? { borderColor: 'primary.main' }\n                                        : null,\n                                    ]}\n                                    node={node as any}\n                                    onClick={(e) => handleItemClick(e, node)}\n                                  />\n                                )}\n                              </Observer>\n                            ),\n                          )}\n                        </Box>\n                      </Box>\n                    )}\n                  </Observer>\n                )}\n              />\n            )}\n          </Box>\n          <Box\n            sx={{\n              flex: { xs: '0 0 auto', md: PANE_SPLIT },\n              width: { xs: 1, md: 'auto' },\n              minWidth: 0,\n              display: 'flex',\n              flexDirection: 'column',\n              // Stacked, the divider that separates the panes is above it,\n              // not beside it.\n              borderLeft: { xs: 0, md: 1 },\n              borderTop: { xs: 1, md: 0 },\n              borderColor: 'divider',\n              backgroundColor: 'surface.main',\n            }}\n          >\n            <Box sx={{ flex: 1, minHeight: 0, overflowY: 'auto', p: 2 }}>\n              {selected ? (\n                /* The same content component the panel floats over the\n                   canvas — one description of an element, two placements. */\n                <ElementDetailView\n                  detail={describeElement(selected)}\n                  node={selected}\n                  previewHeight={380}\n                />\n              ) : (\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {'Choose an element to see what it does.'}\n                </Typography>\n              )}\n            </Box>\n            {/* Anchored to the pane rather than the dialog: Confirm belongs\n                with the thing being confirmed. */}\n            <Box sx={{ p: 1.5, borderTop: 1, borderColor: 'divider' }}>\n              <Button\n                fullWidth\n                variant=\"contained\"\n                disabled={!selected}\n                onClick={handleConfirm}\n              >\n                {'Confirm'}\n              </Button>\n            </Box>\n          </Box>\n        </DialogContent>\n      </Dialog>\n    )\n  }),\n)\nComponentPicker.displayName = 'ComponentPicker'\n\nexport default ComponentPicker\n"],"names":["ICON_VARIANT_CLOSE","ICON_VARIANT_FILTER","MdiIcon","AppBar","Box","Button","Collapse","Dialog","DialogContent","Divider","IconButton","Slide","Toolbar","Typography","Observer","observer","forwardRef","useCallback","useState","usePickerFilter","useVisibleComponentCategories","describeElement","AccordionListComponent","ElementDetailView","EmptyResults","NodeCard","PickerSearchField","Transition","props","ref","direction","PANE_SPLIT","MIN_TILE_WIDTH","ComponentPicker","open","onClose","onSelectItem","rest","allItems","filterOpen","setFilterOpen","selected","setSelected","clearSelected","filter","items","handleFilterChange","handleConfirm","e","option","handleClose","reason","handleItemClick","item","prev","$id","maxWidth","fullWidth","slots","transition","position","color","enableColorOnDark","edge","onClick","aria-label","path","variant","component","noWrap","sx","textOverflow","ml","flex","type","p","height","m","orientation","autoFocus","in","display","alignItems","width","borderTop","borderColor","value","onChange","dividers","flexDirection","xs","md","minHeight","minWidth","overflowY","length","defaultExpanded","map","i","getItemId","onRenderSummary","label","AccordionDetailsProps","overflowX","onRenderDetail","data-testid","gridTemplateColumns","gap","node","index","cursor","borderLeft","backgroundColor","detail","previewHeight","disabled","displayName"],"mappings":"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"}

package/src/lib/components/components-grid-list.component.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @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 { AglynNodePresetSchema } from '@aglyn/aglyn';
+import { type GridListProps } from '@aglyn/shared-ui-jsx/components/grid-list';
+import { type MouseEvent } from 'react';
+export interface ComponentsGridListProps extends Partial<GridListProps> {
+    items?: AglynNodePresetSchema[];
+    onActionClick?: {
+        bivarianceHack<T>(event: null | MouseEvent<T>, data: {
+            type: string;
+            data: AglynNodePresetSchema;
+        }): void;
+    }['bivarianceHack'];
+    maxColumns?: number;
+}
+export declare const ComponentsGridListComponent: import("react").ForwardRefExoticComponent<ComponentsGridListProps & import("react").RefAttributes<any>>;
+export default ComponentsGridListComponent;

package/src/lib/components/components-grid-list.component.js

@@ -0,0 +1,162 @@
+/**
+ * @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 { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ICON_VARIANT_MENU_DOWN, ICON_VARIANT_SYMBOL_CONFIRMED } from "@aglyn/shared-data-enums";
+import { GridList } from "@aglyn/shared-ui-jsx/components/grid-list";
+import { MdiIcon, Menu } from "@aglyn/shared-ui-jsx";
+import { mergeSxProps } from "@aglyn/shared-ui-theme";
+import { arrayFromLength } from "@aglyn/shared-util-tools";
+import { Box, Button, ButtonBase, Tooltip, Typography } from "@mui/material";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import ElementCardComponent from "./element-card.component.js";
+const endIcon = (value, active)=>value !== active ? undefined : {
+        path: ICON_VARIANT_SYMBOL_CONFIRMED.path
+    };
+export const ComponentsGridListComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { onActionClick, items = [], sx, maxColumns = 4 } = props, rest = _object_without_properties_loose(props, [
+        "onActionClick",
+        "items",
+        "sx",
+        "maxColumns"
+    ]);
+    const [columns, setColumns] = useState(maxColumns);
+    const handleColumnChange = useCallback((columns)=>(e)=>{
+            setColumns(columns);
+        }, []);
+    const handleOnActionClick = useCallback((e, item)=>{
+        onActionClick == null ? void 0 : onActionClick.call(null, e, {
+            type: 'selection',
+            data: item == null ? void 0 : item.data
+        });
+    }, [
+        onActionClick
+    ]);
+    const columnOptions = useMemo(()=>{
+        return arrayFromLength(maxColumns).map((_, index)=>({
+                value: index + 1,
+                children: `${index + 1} columns`,
+                onClick: handleColumnChange(index + 1),
+                endIcon: endIcon(index + 1, columns),
+                selected: columns === index + 1
+            }));
+    }, [
+        handleColumnChange,
+        columns,
+        maxColumns
+    ]);
+    const renderItemContent = useCallback((item)=>{
+        return /*#__PURE__*/ _jsx(ElementCardComponent, {
+            component: ButtonBase,
+            onClick: (e)=>handleOnActionClick(e, item),
+            label: (// Component cards show name + short description (AGL-93
+            // drawer polish, per the component-builder mockup).
+            item == null ? void 0 : item.description) ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    item == null ? void 0 : item.label,
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        component: "div",
+                        sx: {
+                            lineHeight: 1.25,
+                            mt: 0.25
+                        },
+                        children: item.description
+                    })
+                ]
+            }) : item == null ? void 0 : item.label,
+            icon: item == null ? void 0 : item.icon,
+            item: _extends({
+                id: item == null ? void 0 : item.$id
+            }, item)
+        });
+    }, [
+        handleOnActionClick
+    ]);
+    return /*#__PURE__*/ _jsx(GridList, _extends({
+        ref: ref,
+        GridContainerProps: {
+            spacing: 1,
+            children: /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    mb: 2
+                },
+                children: /*#__PURE__*/ _jsx(Menu, {
+                    id: "aglyn:component-drawer-columns-changer",
+                    items: columnOptions,
+                    // MenuProps={{variant: 'selectedMenu'}}
+                    sx: {
+                        display: {
+                            xs: 'none',
+                            sm: 'block'
+                        }
+                    },
+                    children: /*#__PURE__*/ _jsx(Tooltip, {
+                        title: 'Columns',
+                        children: /*#__PURE__*/ _jsxs(Button, {
+                            "aria-label": "columns",
+                            "aria-haspopup": "menu",
+                            "aria-controls": 'aglyn:component-drawer-columns-changer',
+                            endIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                fontSize: "inherit",
+                                path: ICON_VARIANT_MENU_DOWN.path
+                            }),
+                            sx: {
+                                borderColor: 'divider',
+                                '& .MuiButton-endIcon': {
+                                    ml: 0.15
+                                },
+                                '& .MuiButton-startIcon': {
+                                    mr: 0.85
+                                }
+                            },
+                            children: [
+                                columns,
+                                " Columns"
+                            ]
+                        })
+                    })
+                })
+            })
+        },
+        GridItemProps: {
+            size: {
+                xs: 6,
+                sm: Math.floor(12 / columns)
+            }
+        },
+        renderItemContent: renderItemContent,
+        items: items,
+        sx: mergeSxProps({
+            overflowX: 'hidden',
+            '& .AglynGridList-itemContent': {
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                textAlign: 'center',
+                flexDirection: 'column',
+                justifyContent: 'space-evenly'
+            }
+        }, sx)
+    }, rest));
+});
+ComponentsGridListComponent.displayName = 'ComponentsGridListComponent';
+ComponentsGridListComponent.aglyn = true;
+export default ComponentsGridListComponent;
+
+//# sourceMappingURL=components-grid-list.component.js.map

package/src/lib/components/components-grid-list.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/components-grid-list.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 type * as Aglyn from '@aglyn/aglyn'\nimport type { AglynNodePresetSchema } from '@aglyn/aglyn'\nimport {\n  ICON_VARIANT_MENU_DOWN,\n  ICON_VARIANT_SYMBOL_CONFIRMED,\n} from '@aglyn/shared-data-enums'\nimport { GridList, type GridListProps } from '@aglyn/shared-ui-jsx/components/grid-list'\nimport { MdiIcon, Menu } from '@aglyn/shared-ui-jsx'\nimport { mergeSxProps } from '@aglyn/shared-ui-theme'\nimport { arrayFromLength } from '@aglyn/shared-util-tools'\nimport { Box, Button, ButtonBase, Tooltip, Typography } from '@mui/material'\nimport {\n  forwardRef,\n  type MouseEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\nimport ElementCardComponent from './element-card.component'\n\nconst endIcon = (value: number, active: number) =>\n  value !== active\n    ? undefined\n    : {\n        path: ICON_VARIANT_SYMBOL_CONFIRMED.path,\n      }\n\nexport interface ComponentsGridListProps extends Partial<GridListProps> {\n  items?: AglynNodePresetSchema[]\n  onActionClick?: {\n    bivarianceHack<T>(\n      event: null | MouseEvent<T>,\n      data: { type: string; data: AglynNodePresetSchema },\n    ): void\n  }['bivarianceHack']\n  maxColumns?: number\n}\n\nexport const ComponentsGridListComponent = forwardRef<\n  any,\n  ComponentsGridListProps\n>((props, ref) => {\n  const { onActionClick, items = [], sx, maxColumns = 4, ...rest } = props\n\n  const [columns, setColumns] = useState(maxColumns)\n  const handleColumnChange = useCallback(\n    (columns: number) => (e) => {\n      setColumns(columns)\n    },\n    [],\n  )\n  const handleOnActionClick = useCallback(\n    (e, item) => {\n      onActionClick?.call(null, e, { type: 'selection', data: item?.data })\n    },\n    [onActionClick],\n  )\n\n  const columnOptions = useMemo(() => {\n    return arrayFromLength(maxColumns).map((_, index) => ({\n      value: index + 1,\n      children: `${index + 1} columns`,\n      onClick: handleColumnChange(index + 1),\n      endIcon: endIcon(index + 1, columns),\n      selected: columns === index + 1,\n    }))\n  }, [handleColumnChange, columns, maxColumns])\n\n  const renderItemContent = useCallback(\n    (item: Aglyn.PresetSchema<any>) => {\n      return (\n        <ElementCardComponent\n          component={ButtonBase}\n          onClick={(e) => handleOnActionClick(e, item)}\n          label={\n            // Component cards show name + short description (AGL-93\n            // drawer polish, per the component-builder mockup).\n            (item as any)?.description ? (\n              <>\n                {item?.label}\n                <Typography\n                  variant=\"caption\"\n                  color=\"text.secondary\"\n                  component=\"div\"\n                  sx={{ lineHeight: 1.25, mt: 0.25 }}\n                >\n                  {(item as any).description}\n                </Typography>\n              </>\n            ) : (\n              item?.label\n            )\n          }\n          icon={item?.icon as any}\n          item={{ id: item?.$id, ...item } as any}\n        />\n      )\n    },\n    [handleOnActionClick],\n  )\n\n  return (\n    <GridList\n      ref={ref}\n      GridContainerProps={{\n        spacing: 1,\n        children: (\n          <Box sx={{ mb: 2 }}>\n            <Menu\n              id=\"aglyn:component-drawer-columns-changer\"\n              items={columnOptions}\n              // MenuProps={{variant: 'selectedMenu'}}\n              sx={{ display: { xs: 'none', sm: 'block' } }}\n            >\n              <Tooltip title={'Columns'}>\n                <Button\n                  aria-label=\"columns\"\n                  aria-haspopup=\"menu\"\n                  aria-controls={'aglyn:component-drawer-columns-changer'}\n                  endIcon={\n                    <MdiIcon\n                      fontSize=\"inherit\"\n                      path={ICON_VARIANT_MENU_DOWN.path}\n                    />\n                  }\n                  sx={{\n                    borderColor: 'divider',\n                    '& .MuiButton-endIcon': { ml: 0.15 },\n                    '& .MuiButton-startIcon': { mr: 0.85 },\n                  }}\n                >\n                  {columns} Columns\n                </Button>\n              </Tooltip>\n            </Menu>\n          </Box>\n        ),\n      }}\n      GridItemProps={{\n        size: {\n          xs: 6,\n          sm: Math.floor(12 / columns),\n        },\n      }}\n      renderItemContent={renderItemContent}\n      items={items}\n      sx={mergeSxProps(\n        {\n          overflowX: 'hidden',\n          '& .AglynGridList-itemContent': {\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            textAlign: 'center',\n            flexDirection: 'column',\n            justifyContent: 'space-evenly',\n          },\n        },\n        sx,\n      )}\n      {...rest}\n    />\n  )\n})\n\nComponentsGridListComponent.displayName = 'ComponentsGridListComponent'\nComponentsGridListComponent.aglyn = true\n\nexport default ComponentsGridListComponent\n"],"names":["ICON_VARIANT_MENU_DOWN","ICON_VARIANT_SYMBOL_CONFIRMED","GridList","MdiIcon","Menu","mergeSxProps","arrayFromLength","Box","Button","ButtonBase","Tooltip","Typography","forwardRef","useCallback","useMemo","useState","ElementCardComponent","endIcon","value","active","undefined","path","ComponentsGridListComponent","props","ref","onActionClick","items","sx","maxColumns","rest","columns","setColumns","handleColumnChange","e","handleOnActionClick","item","call","type","data","columnOptions","map","_","index","children","onClick","selected","renderItemContent","component","label","description","variant","color","lineHeight","mt","icon","id","$id","GridContainerProps","spacing","mb","display","xs","sm","title","aria-label","aria-haspopup","aria-controls","fontSize","borderColor","ml","mr","GridItemProps","size","Math","floor","overflowX","width","height","textAlign","flexDirection","justifyContent","displayName","aglyn"],"mappings":"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"}