@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/closeable-drawer.component.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @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 NavigationDrawerProps } from '@aglyn/shared-ui-jsx/components/navigation-drawer.component';
+import { type SyntheticEvent } from 'react';
+export interface CloseableDrawerProps extends Partial<NavigationDrawerProps> {
+    drawerTitle?: JSX.Node;
+    disableCloseButton?: boolean;
+    onClose?: {
+        bivarianceHack(event: object, reason: 'backdropClick' | 'escapeKeyDown' | 'cancelClick'): void;
+    }['bivarianceHack'];
+    action?: JSX.Node;
+    extraActions?: JSX.Node;
+    onActionClick?: {
+        bivarianceHack(event: SyntheticEvent, reason: string): void;
+    }['bivarianceHack'];
+}
+export declare const CloseableDrawerComponent: import("react").ForwardRefExoticComponent<Omit<CloseableDrawerProps, "ref"> & import("react").RefAttributes<any>>;
+export default CloseableDrawerComponent;

package/src/lib/components/closeable-drawer.component.js

@@ -0,0 +1,134 @@
+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";
+/**
+ * @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 { ICON_VARIANT_CLOSE } from "@aglyn/shared-data-enums";
+import { SrOnly } from "@aglyn/shared-ui-jsx";
+import { NavigationDrawerComponent } from "@aglyn/shared-ui-jsx/components/navigation-drawer.component";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { styled } from "@aglyn/shared-ui-theme";
+import { Button, IconButton, Typography } from "@mui/material";
+import { forwardRef, useCallback } from "react";
+const StyledDrawer = styled(NavigationDrawerComponent)(({ theme })=>({
+        '& > .MuiDrawer-paper': {
+            margin: '0 auto',
+            maxHeight: '100vh',
+            height: {
+                xs: '100%',
+                sm: '50%'
+            }
+        },
+        '& .MuiDrawer-paper': {
+            margin: '0 auto',
+            maxHeight: {
+                sm: '100%'
+            },
+            height: {
+                xs: '100%',
+                sm: '720px'
+            },
+            maxWidth: {
+                sm: '100%'
+            },
+            width: '100%',
+            [theme.breakpoints.up('sm')]: {
+                width: theme.breakpoints.values.sm
+            }
+        }
+    }));
+export const CloseableDrawerComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { disableCloseButton, onClose, action, onActionClick, children, drawerTitle, extraActions } = props, rest = _object_without_properties_loose(props, [
+        "disableCloseButton",
+        "onClose",
+        "action",
+        "onActionClick",
+        "children",
+        "drawerTitle",
+        "extraActions"
+    ]);
+    const handleClose = useCallback((e, reason)=>{
+        onClose == null ? void 0 : onClose.call(null, e, reason);
+    }, [
+        onClose
+    ]);
+    const handleCancelIconClick = useCallback((e)=>{
+        handleClose.call(null, e, 'cancelClick');
+    }, [
+        handleClose
+    ]);
+    const handleActionClick = useCallback((e)=>{
+        onActionClick == null ? void 0 : onActionClick.call(null, e, 'actionButtonClick');
+    }, [
+        onActionClick
+    ]);
+    const appBarLeft = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            disableCloseButton ? null : /*#__PURE__*/ _jsxs(IconButton, {
+                color: "inherit",
+                edge: "start",
+                onClick: handleCancelIconClick,
+                sx: {
+                    mr: 2
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(MdiIcon, {
+                        path: ICON_VARIANT_CLOSE.path
+                    }),
+                    /*#__PURE__*/ _jsx(SrOnly, {
+                        children: "close"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h6",
+                sx: {
+                    color: "inherit",
+                    fontSize: (theme)=>theme.typography.pxToRem(20)
+                },
+                children: drawerTitle
+            })
+        ]
+    });
+    const appBarRight = action ? /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            extraActions,
+            /*#__PURE__*/ _jsx(Button, {
+                color: "inherit",
+                onClick: handleActionClick,
+                sx: {
+                    mr: -1.2
+                },
+                children: action
+            })
+        ]
+    }) : null;
+    return /*#__PURE__*/ _jsx(StyledDrawer, _extends({
+        ref: ref,
+        anchor: "bottom",
+        variant: "temporary",
+        appBarLeft: appBarLeft,
+        appBarRight: appBarRight,
+        onClose: handleClose
+    }, rest, {
+        children: children
+    }));
+});
+CloseableDrawerComponent.displayName = 'CloseableDrawerComponent';
+CloseableDrawerComponent.aglyn = true;
+export default CloseableDrawerComponent;
+
+//# sourceMappingURL=closeable-drawer.component.js.map

package/src/lib/components/closeable-drawer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/closeable-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\nimport { ICON_VARIANT_CLOSE } from '@aglyn/shared-data-enums'\nimport {\n  SrOnly,\n} from '@aglyn/shared-ui-jsx'\nimport { NavigationDrawerComponent, type NavigationDrawerProps } from '@aglyn/shared-ui-jsx/components/navigation-drawer.component'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { styled } from '@aglyn/shared-ui-theme'\nimport { Button, IconButton, Typography } from '@mui/material'\nimport { forwardRef, type SyntheticEvent, useCallback } from 'react'\n\nconst StyledDrawer = styled(NavigationDrawerComponent)(({ theme }) => ({\n  '& > .MuiDrawer-paper': {\n    margin: '0 auto',\n    maxHeight: '100vh',\n    height: {\n      xs: '100%',\n      sm: '50%',\n    },\n  },\n  '& .MuiDrawer-paper': {\n    margin: '0 auto',\n    maxHeight: { sm: '100%' },\n    height: { xs: '100%', sm: '720px' },\n    maxWidth: { sm: '100%' },\n    width: '100%',\n    [theme.breakpoints.up('sm')]: {\n      width: theme.breakpoints.values.sm,\n    },\n  },\n}))\n\nexport interface CloseableDrawerProps extends Partial<NavigationDrawerProps> {\n  drawerTitle?: JSX.Node\n  disableCloseButton?: boolean\n  onClose?: {\n    bivarianceHack(\n      event: object,\n      reason: 'backdropClick' | 'escapeKeyDown' | 'cancelClick',\n    ): void\n  }['bivarianceHack']\n  action?: JSX.Node\n  extraActions?: JSX.Node\n  onActionClick?: {\n    bivarianceHack(event: SyntheticEvent, reason: string): void\n  }['bivarianceHack']\n}\n\nexport const CloseableDrawerComponent = forwardRef<any, CloseableDrawerProps>(\n  (props, ref) => {\n    const {\n      disableCloseButton,\n      onClose,\n      action,\n      onActionClick,\n      children,\n      drawerTitle,\n      extraActions,\n      ...rest\n    } = props\n\n    const handleClose = useCallback(\n      (e, reason) => {\n        onClose?.call(null, e, reason)\n      },\n      [onClose],\n    )\n    const handleCancelIconClick = useCallback(\n      (e) => {\n        handleClose.call(null, e, 'cancelClick')\n      },\n      [handleClose],\n    )\n    const handleActionClick = useCallback(\n      (e) => {\n        onActionClick?.call(null, e, 'actionButtonClick')\n      },\n      [onActionClick],\n    )\n\n    const appBarLeft = (\n      <>\n        {disableCloseButton ? null : (\n          <IconButton\n            color=\"inherit\"\n            edge=\"start\"\n            onClick={handleCancelIconClick}\n            sx={{ mr: 2 }}\n          >\n            <MdiIcon path={ICON_VARIANT_CLOSE.path} />\n            <SrOnly>close</SrOnly>\n          </IconButton>\n        )}\n\n        <Typography\n          variant=\"h6\"\n          sx={{\n            color: \"inherit\",\n            fontSize: (theme) => theme.typography.pxToRem(20)\n          }}>\n          {drawerTitle}\n        </Typography>\n      </>\n    )\n\n    const appBarRight = action ? (\n      <>\n        {extraActions}\n        <Button color=\"inherit\" onClick={handleActionClick} sx={{ mr: -1.2 }}>\n          {action}\n        </Button>\n      </>\n    ) : null\n\n    return (\n      <StyledDrawer\n        ref={ref}\n        anchor=\"bottom\"\n        variant=\"temporary\"\n        appBarLeft={appBarLeft}\n        appBarRight={appBarRight}\n        onClose={handleClose}\n        {...rest}\n      >\n        {children}\n      </StyledDrawer>\n    )\n  },\n)\n\nCloseableDrawerComponent.displayName = 'CloseableDrawerComponent'\nCloseableDrawerComponent.aglyn = true\n\nexport default CloseableDrawerComponent\n"],"names":["ICON_VARIANT_CLOSE","SrOnly","NavigationDrawerComponent","MdiIcon","styled","Button","IconButton","Typography","forwardRef","useCallback","StyledDrawer","theme","margin","maxHeight","height","xs","sm","maxWidth","width","breakpoints","up","values","CloseableDrawerComponent","props","ref","disableCloseButton","onClose","action","onActionClick","children","drawerTitle","extraActions","rest","handleClose","e","reason","call","handleCancelIconClick","handleActionClick","appBarLeft","color","edge","onClick","sx","mr","path","variant","fontSize","typography","pxToRem","appBarRight","anchor","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,kBAAkB,QAAQ,2BAA0B;AAC7D,SACEC,MAAM,QACD,uBAAsB;AAC7B,SAASC,yBAAyB,QAAoC,8DAA6D;AACnI,SAASC,OAAO,QAAQ,uBAAsB;AAC9C,SAASC,MAAM,QAAQ,yBAAwB;AAC/C,SAASC,MAAM,EAAEC,UAAU,EAAEC,UAAU,QAAQ,gBAAe;AAC9D,SAASC,UAAU,EAAuBC,WAAW,QAAQ,QAAO;AAEpE,MAAMC,eAAeN,OAAOF,2BAA2B,CAAC,EAAES,KAAK,EAAE,GAAM,CAAA;QACrE,wBAAwB;YACtBC,QAAQ;YACRC,WAAW;YACXC,QAAQ;gBACNC,IAAI;gBACJC,IAAI;YACN;QACF;QACA,sBAAsB;YACpBJ,QAAQ;YACRC,WAAW;gBAAEG,IAAI;YAAO;YACxBF,QAAQ;gBAAEC,IAAI;gBAAQC,IAAI;YAAQ;YAClCC,UAAU;gBAAED,IAAI;YAAO;YACvBE,OAAO;YACP,CAACP,MAAMQ,WAAW,CAACC,EAAE,CAAC,MAAM,EAAE;gBAC5BF,OAAOP,MAAMQ,WAAW,CAACE,MAAM,CAACL,EAAE;YACpC;QACF;IACF,CAAA;AAkBA,OAAO,MAAMM,yCAA2Bd,WACtC,CAACe,OAAOC;IACN,MAAM,EACJC,kBAAkB,EAClBC,OAAO,EACPC,MAAM,EACNC,aAAa,EACbC,QAAQ,EACRC,WAAW,EACXC,YAAY,EAEb,GAAGR,OADCS,wCACDT;;;;;;;;;IAEJ,MAAMU,cAAcxB,YAClB,CAACyB,GAAGC;QACFT,2BAAAA,QAASU,IAAI,CAAC,MAAMF,GAAGC;IACzB,GACA;QAACT;KAAQ;IAEX,MAAMW,wBAAwB5B,YAC5B,CAACyB;QACCD,YAAYG,IAAI,CAAC,MAAMF,GAAG;IAC5B,GACA;QAACD;KAAY;IAEf,MAAMK,oBAAoB7B,YACxB,CAACyB;QACCN,iCAAAA,cAAeQ,IAAI,CAAC,MAAMF,GAAG;IAC/B,GACA;QAACN;KAAc;IAGjB,MAAMW,2BACJ;;YACGd,qBAAqB,qBACpB,MAACnB;gBACCkC,OAAM;gBACNC,MAAK;gBACLC,SAASL;gBACTM,IAAI;oBAAEC,IAAI;gBAAE;;kCAEZ,KAACzC;wBAAQ0C,MAAM7C,mBAAmB6C,IAAI;;kCACtC,KAAC5C;kCAAO;;;;0BAIZ,KAACM;gBACCuC,SAAQ;gBACRH,IAAI;oBACFH,OAAO;oBACPO,UAAU,CAACpC,QAAUA,MAAMqC,UAAU,CAACC,OAAO,CAAC;gBAChD;0BACCnB;;;;IAKP,MAAMoB,cAAcvB,uBAClB;;YACGI;0BACD,KAAC1B;gBAAOmC,OAAM;gBAAUE,SAASJ;gBAAmBK,IAAI;oBAAEC,IAAI,CAAC;gBAAI;0BAChEjB;;;SAGH;IAEJ,qBACE,KAACjB;QACCc,KAAKA;QACL2B,QAAO;QACPL,SAAQ;QACRP,YAAYA;QACZW,aAAaA;QACbxB,SAASO;OACLD;kBAEHH;;AAGP,GACD;AAEDP,yBAAyB8B,WAAW,GAAG;AACvC9B,yBAAyB+B,KAAK,GAAG;AAEjC,eAAe/B,yBAAwB"}

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

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2023 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 NodeCardItemData } from './node-card';
+export type ComponentGridGroupItemData = {
+    $id: string;
+    label: string;
+    items: NodeCardItemData[];
+};
+interface ComponentAccordionListProp {
+}
+export declare const ComponentAccordionList: ((props: ComponentAccordionListProp) => import("react").JSX.Element) & {
+    displayName: string;
+};
+export default ComponentAccordionList;

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

@@ -0,0 +1,205 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2023 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 { REUSABLE_COMPONENT_CATEGORY } from "@aglyn/aglyn";
+import { DragType } from "@aglyn/besigner";
+import { mergeRefs } from "@aglyn/shared-ui-jsx";
+import { DragOverlay, useDndMonitor } from "@dnd-kit/core";
+import { Box, Grid, Stack } from "@mui/material";
+import { Observer, observer } from "mobx-react-lite";
+import { useEffect } from "react";
+import { useElementDrawerContext } from "../contexts/element-drawer-context.js";
+import useDetailHoverIntent from "../hooks/use-detail-hover-intent.js";
+import usePickerFilter from "../hooks/use-picker-filter.js";
+import useVisibleComponentCategories from "../hooks/use-visible-component-categories.js";
+import { besignerDocsUrl } from "../utils/docs-help.js";
+import { AccordionListComponent } from "./accordion-list.component.js";
+import Draggable from "./dnd/draggable.js";
+import ElementDetailOverlay from "./element-detail-overlay.component.js";
+import EmptyResults from "./empty-results.js";
+import NodeCard from "./node-card.js";
+import PickerSearchField from "./picker-search-field.js";
+NodeCard.displayName = 'NodeCard';
+export const ComponentAccordionList = observer((props)=>{
+    var _ref;
+    var _useElementDrawerContext, _detail_active, _detail_active1;
+    const {} = props, rest = _extends({}, props);
+    const allItems = useVisibleComponentCategories();
+    // The SAME search the Choose-element dialog runs (AGL-2486). The panel
+    // had no search at all; giving it a second implementation would mean two
+    // pickers disagreeing about what `icon` matches, which is worse than one
+    // of them having none.
+    const { filter, items, handleFilterChange } = usePickerFilter(allItems);
+    // Hover previews, click PINS, and the pin outranks the pointer — which
+    // is what makes the floating panel clickable at all. See
+    // `useDetailHoverIntent` for why each half is load-bearing.
+    const detail = useDetailHoverIntent();
+    // The panel floats over the CANVAS, which is exactly where a dragged
+    // element is going. It leaves the drop path on drag START — waiting for
+    // the drop would leave it sitting under the pointer for the whole
+    // gesture — and stays suspended until the drag ends so the cards the
+    // pointer crosses on the way out cannot re-open it.
+    useDndMonitor({
+        onDragStart: detail.suspend,
+        onDragEnd: detail.resume,
+        onDragCancel: detail.resume
+    });
+    // A modal opening over the panel is a context change, and a pinned
+    // detail has no business outliving it.
+    const drawerOpen = (_useElementDrawerContext = useElementDrawerContext()) == null ? void 0 : _useElementDrawerContext.open;
+    useEffect(()=>{
+        if (drawerOpen) detail.dismiss();
+    }, [
+        drawerOpen,
+        detail
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            height: 1,
+            minHeight: 0
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    px: 1,
+                    py: 0.5,
+                    borderBottom: 1,
+                    borderColor: 'divider',
+                    // The panel is a scrolling column; the search must stay reachable
+                    // without scrolling back to the top of ~45 elements.
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 6,
+                    backgroundColor: 'surface.main'
+                },
+                children: /*#__PURE__*/ _jsx(PickerSearchField, {
+                    value: filter,
+                    onChange: handleFilterChange
+                })
+            }),
+            !(items == null ? void 0 : items.length) ? /*#__PURE__*/ _jsx(EmptyResults, {
+                sx: {
+                    minHeight: 200
+                }
+            }) : // The grid scrolls; the detail region below it does not, so the
+            // description stays put while you browse.
+            // Scrolling moves the card the panel is anchored to, so a pinned
+            // panel would end up pointing at whatever slid into its place.
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    flex: 1,
+                    minHeight: 0,
+                    overflowY: 'auto'
+                },
+                onScroll: detail.dismiss,
+                children: /*#__PURE__*/ _jsx(AccordionListComponent, _extends({
+                    // No `key` remount to force the results group open (AGL-2486).
+                    // Keying on the filter flipped one render too EARLY — the query
+                    // changes synchronously, the results group only exists after
+                    // fuse.js loads — so the remount reseeded from the categories
+                    // and the group that arrived next was collapsed. The list now
+                    // opens a group when it first appears, which is the same render
+                    // the group actually exists in.
+                    items: items,
+                    defaultExpanded: items.map((i)=>i.$id),
+                    getItemId: (item)=>item == null ? void 0 : item.$id,
+                    // Only the host's own components group carries help (AGL-2167).
+                    // The built-in groups are self-evident from their contents; this one
+                    // is the only group whose items the user has to CREATE before it
+                    // holds anything, and an empty-looking group explains nothing.
+                    getItemHelp: (item)=>(item == null ? void 0 : item.$id) === REUSABLE_COMPONENT_CATEGORY ? {
+                            title: 'Your components',
+                            excerpt: 'Sections you promoted into reusable components. Drop one to place an instance — edit the component once and every instance follows.',
+                            href: besignerDocsUrl('reusableComponents', '#insert-instances')
+                        } : undefined,
+                    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(Grid, {
+                                        spacing: 2,
+                                        container: true,
+                                        sx: {
+                                            overflowX: 'hidden'
+                                        },
+                                        children: item == null ? void 0 : (_item_items = item.items) == null ? void 0 : _item_items.map((node, index)=>{
+                                            var _ref;
+                                            return /*#__PURE__*/ _jsx(Grid, {
+                                                size: 6,
+                                                onMouseEnter: (e)=>detail.open(node, e.currentTarget),
+                                                onMouseLeave: detail.scheduleClose,
+                                                onClick: (e)=>detail.togglePin(node, e.currentTarget),
+                                                children: /*#__PURE__*/ _jsx(Draggable, {
+                                                    node: node,
+                                                    type: DragType.PRESET,
+                                                    idSuffix: item == null ? void 0 : item.$id,
+                                                    children: ({ draggable, node, forwardRef })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(NodeCard, _extends({
+                                                                    ref: mergeRefs(forwardRef, draggable.setNodeRef),
+                                                                    node: node,
+                                                                    style: draggable.isDragging ? {
+                                                                        opacity: 0.5
+                                                                    } : {}
+                                                                }, draggable.listeners)),
+                                                                /*#__PURE__*/ _jsx(DragOverlay, {
+                                                                    dropAnimation: null,
+                                                                    children: draggable.isDragging && /*#__PURE__*/ _jsx(NodeCard, {
+                                                                        node: node,
+                                                                        sx: {
+                                                                            zIndex: 9999
+                                                                        }
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
+                                                })
+                                            }, (_ref = node == null ? void 0 : node.$id) != null ? _ref : index);
+                                        })
+                                    })
+                                });
+                            }
+                        })
+                }, rest))
+            }),
+            /*#__PURE__*/ _jsx(ElementDetailOverlay, {
+                item: (_detail_active = detail.active) == null ? void 0 : _detail_active.item,
+                anchor: (_ref = (_detail_active1 = detail.active) == null ? void 0 : _detail_active1.anchor) != null ? _ref : null,
+                pinned: detail.isPinned,
+                onPointerEnter: detail.keepOpen,
+                onPointerLeave: detail.scheduleClose,
+                onDismiss: detail.dismiss
+            })
+        ]
+    });
+});
+ComponentAccordionList.displayName = 'ComponentAccordionList';
+export default ComponentAccordionList;
+
+//# sourceMappingURL=component-accordion-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/component-accordion-list.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 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 { REUSABLE_COMPONENT_CATEGORY } from '@aglyn/aglyn'\nimport { DragType } from '@aglyn/besigner'\nimport { mergeRefs } from '@aglyn/shared-ui-jsx'\nimport { DragOverlay, useDndMonitor } from '@dnd-kit/core'\nimport { Box, Grid, Stack } from '@mui/material'\nimport { Observer, observer } from 'mobx-react-lite'\nimport { useEffect } from 'react'\nimport { useElementDrawerContext } from '../contexts/element-drawer-context'\nimport useDetailHoverIntent from '../hooks/use-detail-hover-intent'\nimport usePickerFilter from '../hooks/use-picker-filter'\nimport useVisibleComponentCategories from '../hooks/use-visible-component-categories'\nimport { besignerDocsUrl } from '../utils/docs-help'\nimport { AccordionListComponent } from './accordion-list.component'\nimport Draggable from './dnd/draggable'\nimport ElementDetailOverlay from './element-detail-overlay.component'\nimport EmptyResults from './empty-results'\nimport NodeCard, { type NodeCardItemData } from './node-card'\nimport PickerSearchField from './picker-search-field'\n\nexport type ComponentGridGroupItemData = {\n  $id: string\n  label: string\n  items: NodeCardItemData[]\n}\n\nNodeCard.displayName = 'NodeCard'\n\ninterface ComponentAccordionListProp {}\n\nexport const ComponentAccordionList = observer(\n  (props: ComponentAccordionListProp) => {\n    const { ...rest } = props\n    const allItems = useVisibleComponentCategories()\n\n    // The SAME search the Choose-element dialog runs (AGL-2486). The panel\n    // had no search at all; giving it a second implementation would mean two\n    // pickers disagreeing about what `icon` matches, which is worse than one\n    // of them having none.\n    const { filter, items, handleFilterChange } = usePickerFilter(allItems)\n\n    // Hover previews, click PINS, and the pin outranks the pointer — which\n    // is what makes the floating panel clickable at all. See\n    // `useDetailHoverIntent` for why each half is load-bearing.\n    const detail = useDetailHoverIntent<NodeCardItemData>()\n\n    // The panel floats over the CANVAS, which is exactly where a dragged\n    // element is going. It leaves the drop path on drag START — waiting for\n    // the drop would leave it sitting under the pointer for the whole\n    // gesture — and stays suspended until the drag ends so the cards the\n    // pointer crosses on the way out cannot re-open it.\n    useDndMonitor({\n      onDragStart: detail.suspend,\n      onDragEnd: detail.resume,\n      onDragCancel: detail.resume,\n    })\n\n    // A modal opening over the panel is a context change, and a pinned\n    // detail has no business outliving it.\n    const drawerOpen = useElementDrawerContext()?.open\n    useEffect(() => {\n      if (drawerOpen) detail.dismiss()\n    }, [drawerOpen, detail])\n\n    return (\n      <Stack sx={{ height: 1, minHeight: 0 }}>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            px: 1,\n            py: 0.5,\n            borderBottom: 1,\n            borderColor: 'divider',\n            // The panel is a scrolling column; the search must stay reachable\n            // without scrolling back to the top of ~45 elements.\n            position: 'sticky',\n            top: 0,\n            zIndex: 6,\n            backgroundColor: 'surface.main',\n          }}\n        >\n          <PickerSearchField value={filter} onChange={handleFilterChange} />\n        </Box>\n        {!items?.length ? (\n          <EmptyResults sx={{ minHeight: 200 }} />\n        ) : (\n          // The grid scrolls; the detail region below it does not, so the\n          // description stays put while you browse.\n          // Scrolling moves the card the panel is anchored to, so a pinned\n          // panel would end up pointing at whatever slid into its place.\n          <Box\n            sx={{ flex: 1, minHeight: 0, overflowY: 'auto' }}\n            onScroll={detail.dismiss}\n          >\n            <AccordionListComponent\n              // No `key` remount to force the results group open (AGL-2486).\n              // Keying on the filter flipped one render too EARLY — the query\n              // changes synchronously, the results group only exists after\n              // fuse.js loads — so the remount reseeded from the categories\n              // and the group that arrived next was collapsed. The list now\n              // opens a group when it first appears, which is the same render\n              // the group actually exists in.\n              items={items}\n              defaultExpanded={items.map((i) => i.$id)}\n              getItemId={(item) => item?.$id}\n              // Only the host's own components group carries help (AGL-2167).\n              // The built-in groups are self-evident from their contents; this one\n              // is the only group whose items the user has to CREATE before it\n              // holds anything, and an empty-looking group explains nothing.\n              getItemHelp={(item) =>\n                item?.$id === REUSABLE_COMPONENT_CATEGORY\n                  ? {\n                      title: 'Your components',\n                      excerpt:\n                        'Sections you promoted into reusable components. Drop one to place an instance — edit the component once and every instance follows.',\n                      href: besignerDocsUrl(\n                        'reusableComponents',\n                        '#insert-instances',\n                      ),\n                    }\n                  : undefined\n              }\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                      <Grid spacing={2} container sx={{ overflowX: 'hidden' }}>\n                        {item?.items?.map((node, index) => (\n                          <Grid\n                            key={node?.$id ?? index}\n                            size={6}\n                            onMouseEnter={(e) =>\n                              detail.open(node, e.currentTarget as HTMLElement)\n                            }\n                            onMouseLeave={detail.scheduleClose}\n                            onClick={(e) =>\n                              detail.togglePin(\n                                node,\n                                e.currentTarget as HTMLElement,\n                              )\n                            }\n                          >\n                            <Draggable\n                              node={node}\n                              type={DragType.PRESET}\n                              idSuffix={item?.$id}\n                            >\n                              {({ draggable, node, forwardRef }) => (\n                                <>\n                                  <NodeCard\n                                    ref={mergeRefs(\n                                      forwardRef,\n                                      draggable.setNodeRef,\n                                    )}\n                                    node={node as any}\n                                    style={\n                                      draggable.isDragging\n                                        ? { opacity: 0.5 }\n                                        : {}\n                                    }\n                                    {...draggable.listeners}\n                                  />\n                                  <DragOverlay dropAnimation={null}>\n                                    {draggable.isDragging && (\n                                      <NodeCard\n                                        node={node as any}\n                                        sx={{ zIndex: 9999 }}\n                                      />\n                                    )}\n                                  </DragOverlay>\n                                </>\n                              )}\n                            </Draggable>\n                          </Grid>\n                        ))}\n                      </Grid>\n                    </Box>\n                  )}\n                </Observer>\n              )}\n              {...rest}\n            />\n          </Box>\n        )}\n        <ElementDetailOverlay\n          item={detail.active?.item}\n          anchor={detail.active?.anchor ?? null}\n          pinned={detail.isPinned}\n          onPointerEnter={detail.keepOpen}\n          onPointerLeave={detail.scheduleClose}\n          onDismiss={detail.dismiss}\n        />\n      </Stack>\n    )\n  },\n)\nComponentAccordionList.displayName = 'ComponentAccordionList'\n\nexport default ComponentAccordionList\n"],"names":["REUSABLE_COMPONENT_CATEGORY","DragType","mergeRefs","DragOverlay","useDndMonitor","Box","Grid","Stack","Observer","observer","useEffect","useElementDrawerContext","useDetailHoverIntent","usePickerFilter","useVisibleComponentCategories","besignerDocsUrl","AccordionListComponent","Draggable","ElementDetailOverlay","EmptyResults","NodeCard","PickerSearchField","displayName","ComponentAccordionList","props","detail","rest","allItems","filter","items","handleFilterChange","onDragStart","suspend","onDragEnd","resume","onDragCancel","drawerOpen","open","dismiss","sx","height","minHeight","display","alignItems","px","py","borderBottom","borderColor","position","top","zIndex","backgroundColor","value","onChange","length","flex","overflowY","onScroll","defaultExpanded","map","i","$id","getItemId","item","getItemHelp","title","excerpt","href","undefined","onRenderSummary","label","AccordionDetailsProps","overflowX","onRenderDetail","spacing","container","node","index","size","onMouseEnter","e","currentTarget","onMouseLeave","scheduleClose","onClick","togglePin","type","PRESET","idSuffix","draggable","forwardRef","ref","setNodeRef","style","isDragging","opacity","listeners","dropAnimation","active","anchor","pinned","isPinned","onPointerEnter","keepOpen","onPointerLeave","onDismiss"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+/**
+ * @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 * as Aglyn from '@aglyn/aglyn';
+import { type MdiIconProps } from '@aglyn/shared-ui-jsx';
+export interface ComponentIconProps extends MdiIconProps {
+    component?: Aglyn.ComponentSchema;
+    /**
+     * The node being drawn, when there is one. Only a reusable-component
+     * instance needs it, and only to reach the icon its definition chose —
+     * `component` alone cannot answer that, since every instance shares the
+     * one `reusableInstance` schema (AGL-1193).
+     */
+    node?: Aglyn.NodeSchema<any>;
+}
+export declare const ComponentIconComponent: ((props: ComponentIconProps) => import("react").JSX.Element) & {
+    displayName: string;
+};
+export default ComponentIconComponent;

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

@@ -0,0 +1,51 @@
+/**
+ * @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 } from "react/jsx-runtime";
+import { resolveInstanceIconPath } from "@aglyn/aglyn";
+import { ICON_VARIANT_ELEMENT } from "@aglyn/shared-data-enums";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { observer } from "mobx-react-lite";
+import { useContext } from "react";
+import { isElement, isValidElementType } from "react-is";
+import ComponentPromotionContext from "../contexts/component-promotion-context.js";
+export const ComponentIconComponent = observer((props)=>{
+    const { component, node } = props, rest = _object_without_properties_loose(props, [
+        "component",
+        "node"
+    ]);
+    const Icon = component == null ? void 0 : component.icon;
+    // An instance's definition icon outranks the schema's package glyph, which
+    // is the same glyph for every component anyone has ever promoted. Read live
+    // off the definition rather than denormalized onto the node, so changing a
+    // component's icon reaches the instances already placed.
+    const { definitions } = useContext(ComponentPromotionContext);
+    const definitionIconPath = resolveInstanceIconPath(node, definitions);
+    if (definitionIconPath) return /*#__PURE__*/ _jsx(MdiIcon, _extends({
+        path: definitionIconPath
+    }, rest));
+    if (isElement(Icon)) return Icon;
+    return /*#__PURE__*/ _jsx(MdiIcon, _extends({
+        path: (Icon == null ? void 0 : Icon.path) || ICON_VARIANT_ELEMENT.path
+    }, isValidElementType(Icon) ? {
+        component: Icon
+    } : {}, rest));
+});
+ComponentIconComponent.displayName = 'ComponentIconComponent';
+export default ComponentIconComponent;
+
+//# sourceMappingURL=component-icon.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/component-icon.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 { resolveInstanceIconPath } from '@aglyn/aglyn'\nimport { ICON_VARIANT_ELEMENT } from '@aglyn/shared-data-enums'\nimport { MdiIcon, type MdiIconProps } from '@aglyn/shared-ui-jsx'\nimport { observer } from 'mobx-react-lite'\nimport { useContext } from 'react'\nimport { isElement, isValidElementType } from 'react-is'\nimport ComponentPromotionContext from '../contexts/component-promotion-context'\n\nexport interface ComponentIconProps extends MdiIconProps {\n  component?: Aglyn.ComponentSchema\n  /**\n   * The node being drawn, when there is one. Only a reusable-component\n   * instance needs it, and only to reach the icon its definition chose —\n   * `component` alone cannot answer that, since every instance shares the\n   * one `reusableInstance` schema (AGL-1193).\n   */\n  node?: Aglyn.NodeSchema<any>\n}\n\nexport const ComponentIconComponent = observer((props: ComponentIconProps) => {\n  const { component, node, ...rest } = props\n  const Icon = component?.icon\n\n  // An instance's definition icon outranks the schema's package glyph, which\n  // is the same glyph for every component anyone has ever promoted. Read live\n  // off the definition rather than denormalized onto the node, so changing a\n  // component's icon reaches the instances already placed.\n  const { definitions } = useContext(ComponentPromotionContext)\n  const definitionIconPath = resolveInstanceIconPath(node, definitions)\n  if (definitionIconPath) return <MdiIcon path={definitionIconPath} {...rest} />\n\n  if (isElement(Icon)) return Icon\n\n  return (\n    <MdiIcon\n      path={Icon?.path || ICON_VARIANT_ELEMENT.path}\n      {...(isValidElementType(Icon) ? { component: Icon } : {})}\n      {...rest}\n    />\n  )\n})\nComponentIconComponent.displayName = 'ComponentIconComponent'\n\nexport default ComponentIconComponent\n"],"names":["resolveInstanceIconPath","ICON_VARIANT_ELEMENT","MdiIcon","observer","useContext","isElement","isValidElementType","ComponentPromotionContext","ComponentIconComponent","props","component","node","rest","Icon","icon","definitions","definitionIconPath","path","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC;;;AAGD,SAASA,uBAAuB,QAAQ,eAAc;AACtD,SAASC,oBAAoB,QAAQ,2BAA0B;AAC/D,SAASC,OAAO,QAA2B,uBAAsB;AACjE,SAASC,QAAQ,QAAQ,kBAAiB;AAC1C,SAASC,UAAU,QAAQ,QAAO;AAClC,SAASC,SAAS,EAAEC,kBAAkB,QAAQ,WAAU;AACxD,OAAOC,+BAA+B,6CAAyC;AAa/E,OAAO,MAAMC,yBAAyBL,SAAS,CAACM;IAC9C,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAW,GAAGF,OAATG,wCAASH;;;;IACrC,MAAMI,OAAOH,6BAAAA,UAAWI,IAAI;IAE5B,2EAA2E;IAC3E,4EAA4E;IAC5E,2EAA2E;IAC3E,yDAAyD;IACzD,MAAM,EAAEC,WAAW,EAAE,GAAGX,WAAWG;IACnC,MAAMS,qBAAqBhB,wBAAwBW,MAAMI;IACzD,IAAIC,oBAAoB,qBAAO,KAACd;QAAQe,MAAMD;OAAwBJ;IAEtE,IAAIP,UAAUQ,OAAO,OAAOA;IAE5B,qBACE,KAACX;QACCe,MAAMJ,CAAAA,wBAAAA,KAAMI,IAAI,KAAIhB,qBAAqBgB,IAAI;OACxCX,mBAAmBO,QAAQ;QAAEH,WAAWG;IAAK,IAAI,CAAC,GACnDD;AAGV,GAAE;AACFJ,uBAAuBU,WAAW,GAAG;AAErC,eAAeV,uBAAsB"}

package/src/lib/components/component-picker.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @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 * as Aglyn from '@aglyn/aglyn';
+import { DialogProps } from '@mui/material';
+import { SyntheticEvent } from 'react';
+type PickerOption = Aglyn.ComponentSchema<any> | Aglyn.PresetSchema<any>;
+export interface ComponentPickerProps extends DialogProps {
+    onSelectItem?: (e: SyntheticEvent, item?: {
+        option: PickerOption;
+    }) => void;
+}
+export declare const ComponentPicker: import("react").FunctionComponent<Omit<ComponentPickerProps, "ref"> & import("react").RefAttributes<any>>;
+export default ComponentPicker;