@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/element-detail-overlay.component.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { ICON_VARIANT_CLOSE } from "@aglyn/shared-data-enums";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { Box, IconButton, Paper, Popper, Typography } from "@mui/material";
+import { useEffect } from "react";
+import { describeElement } from "../utils/describe-element.js";
+import ElementDetailView from "./element-detail.component.js";
+/** Gap between the card and the panel, in px. Crossed within the close delay. */ const ANCHOR_OFFSET = 10;
+/**
+ * The Elements panel's detail, floated out over the canvas (AGL-2486).
+ *
+ * It started as a band docked under the grid, which was the safe answer to
+ * "a tooltip must not cover what it describes" and a bad answer to
+ * everything else: a ~300px column cannot hold a preview, a description,
+ * derived facts, an attribute list and a link, so the preview came out a
+ * sliver and the prose wrapped to nothing.
+ *
+ * Floating gives it real width. What floating costs — and what makes most
+ * of these unusable — is that the content follows the pointer, so moving
+ * toward a link inside it changes what it says. That is solved in
+ * `useDetailHoverIntent`, not here: a click PINS, and a pin outranks the
+ * pointer, so everything in this panel is reachable. This component only has
+ * to not undo that, which means keeping its own pointer events live and
+ * feeding enter/leave back to the same intent state.
+ *
+ * Anchored `right-start` so it opens INTO the canvas and never covers the
+ * card being pointed at — the failure the box-styler tooltips had. Portalled,
+ * so the panel's own `overflow: auto` cannot clip it, and out of flow, so it
+ * cannot push the grid and slide the card out from under the cursor the way
+ * the docked band did.
+ */ export function ElementDetailOverlay(props) {
+    const { item, anchor, pinned, onPointerEnter, onPointerLeave, onDismiss } = props;
+    // Escape dismisses a pinned panel — it is modeless, so it must not be a
+    // trap, and the pointer is not the way out of a pinned one.
+    useEffect(()=>{
+        if (!pinned) return;
+        const onKey = (e)=>{
+            if (e.key === 'Escape') onDismiss == null ? void 0 : onDismiss();
+        };
+        window.addEventListener('keydown', onKey);
+        return ()=>window.removeEventListener('keydown', onKey);
+    }, [
+        pinned,
+        onDismiss
+    ]);
+    const detail = describeElement(item);
+    const open = Boolean(item && anchor && detail);
+    return /*#__PURE__*/ _jsx(Popper, {
+        open: open,
+        anchorEl: anchor,
+        placement: "right-start",
+        "data-testid": "element-detail-overlay",
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [
+                        0,
+                        ANCHOR_OFFSET
+                    ]
+                }
+            },
+            // Flip only as a last resort: flipping to `left` would put the panel
+            // over the grid it came from.
+            {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: [
+                        'right',
+                        'bottom-start'
+                    ]
+                }
+            },
+            {
+                name: 'preventOverflow',
+                options: {
+                    padding: 8
+                }
+            }
+        ],
+        // BELOW modal, not above it. `tooltip` (1500) outranks `modal` (1300),
+        // so the panel painted over the element dialog's own backdrop. Anything
+        // that floats over the canvas has to lose to a dialog, or it becomes a
+        // bug for every modal added after it. Taken from the theme scale rather
+        // than written as a literal, so it moves if the scale does.
+        sx: {
+            zIndex: (theme)=>theme.zIndex.modal - 1
+        },
+        onMouseEnter: onPointerEnter,
+        onMouseLeave: onPointerLeave,
+        children: /*#__PURE__*/ _jsxs(Paper, {
+            elevation: 8,
+            sx: {
+                // Floating means it is no longer bounded by a ~300px dock, so it
+                // takes the room. Width is what actually enlarges the preview:
+                // the stage composes at a desktop width and scales to fit, so a
+                // wider panel is a bigger picture, not just more whitespace.
+                width: 460,
+                maxHeight: '78vh',
+                overflowY: 'auto',
+                p: 1.5,
+                border: 1,
+                borderColor: 'divider'
+            },
+            children: [
+                pinned ? /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        mb: 0.5
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "textSecondary",
+                            children: 'Pinned — click the element again to release'
+                        }),
+                        /*#__PURE__*/ _jsx(IconButton, {
+                            size: "small",
+                            "aria-label": "close element detail",
+                            onClick: onDismiss,
+                            children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                path: ICON_VARIANT_CLOSE.path,
+                                fontSize: "inherit"
+                            })
+                        })
+                    ]
+                }) : null,
+                /*#__PURE__*/ _jsx(ElementDetailView, {
+                    detail: detail,
+                    node: item,
+                    previewHeight: 300
+                })
+            ]
+        })
+    });
+}
+ElementDetailOverlay.displayName = 'ElementDetailOverlay';
+export default ElementDetailOverlay;
+
+//# sourceMappingURL=element-detail-overlay.component.js.map

package/src/lib/components/element-detail-overlay.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/element-detail-overlay.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 { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { Box, IconButton, Paper, Popper, Typography } from '@mui/material'\nimport { useEffect } from 'react'\nimport { describeElement } from '../utils/describe-element'\nimport ElementDetailView from './element-detail.component'\n\n/** Gap between the card and the panel, in px. Crossed within the close delay. */\nconst ANCHOR_OFFSET = 10\n\nexport interface ElementDetailOverlayProps {\n  /** The picker item to describe, or null when nothing is active. */\n  item: any\n  /** The card the panel points at. */\n  anchor: HTMLElement | null\n  /** Held open by a click rather than by the pointer. */\n  pinned?: boolean\n  onPointerEnter?: () => void\n  onPointerLeave?: () => void\n  onDismiss?: () => void\n}\n\n/**\n * The Elements panel's detail, floated out over the canvas (AGL-2486).\n *\n * It started as a band docked under the grid, which was the safe answer to\n * \"a tooltip must not cover what it describes\" and a bad answer to\n * everything else: a ~300px column cannot hold a preview, a description,\n * derived facts, an attribute list and a link, so the preview came out a\n * sliver and the prose wrapped to nothing.\n *\n * Floating gives it real width. What floating costs — and what makes most\n * of these unusable — is that the content follows the pointer, so moving\n * toward a link inside it changes what it says. That is solved in\n * `useDetailHoverIntent`, not here: a click PINS, and a pin outranks the\n * pointer, so everything in this panel is reachable. This component only has\n * to not undo that, which means keeping its own pointer events live and\n * feeding enter/leave back to the same intent state.\n *\n * Anchored `right-start` so it opens INTO the canvas and never covers the\n * card being pointed at — the failure the box-styler tooltips had. Portalled,\n * so the panel's own `overflow: auto` cannot clip it, and out of flow, so it\n * cannot push the grid and slide the card out from under the cursor the way\n * the docked band did.\n */\nexport function ElementDetailOverlay(props: ElementDetailOverlayProps) {\n  const { item, anchor, pinned, onPointerEnter, onPointerLeave, onDismiss } =\n    props\n\n  // Escape dismisses a pinned panel — it is modeless, so it must not be a\n  // trap, and the pointer is not the way out of a pinned one.\n  useEffect(() => {\n    if (!pinned) return\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onDismiss?.()\n    }\n    window.addEventListener('keydown', onKey)\n    return () => window.removeEventListener('keydown', onKey)\n  }, [pinned, onDismiss])\n\n  const detail = describeElement(item)\n  const open = Boolean(item && anchor && detail)\n\n  return (\n    <Popper\n      open={open}\n      anchorEl={anchor}\n      placement=\"right-start\"\n      data-testid=\"element-detail-overlay\"\n      modifiers={[\n        { name: 'offset', options: { offset: [0, ANCHOR_OFFSET] } },\n        // Flip only as a last resort: flipping to `left` would put the panel\n        // over the grid it came from.\n        { name: 'flip', options: { fallbackPlacements: ['right', 'bottom-start'] } },\n        { name: 'preventOverflow', options: { padding: 8 } },\n      ]}\n      // BELOW modal, not above it. `tooltip` (1500) outranks `modal` (1300),\n      // so the panel painted over the element dialog's own backdrop. Anything\n      // that floats over the canvas has to lose to a dialog, or it becomes a\n      // bug for every modal added after it. Taken from the theme scale rather\n      // than written as a literal, so it moves if the scale does.\n      sx={{ zIndex: (theme) => theme.zIndex.modal - 1 }}\n      onMouseEnter={onPointerEnter}\n      onMouseLeave={onPointerLeave}\n    >\n      <Paper\n        elevation={8}\n        sx={{\n          // Floating means it is no longer bounded by a ~300px dock, so it\n          // takes the room. Width is what actually enlarges the preview:\n          // the stage composes at a desktop width and scales to fit, so a\n          // wider panel is a bigger picture, not just more whitespace.\n          width: 460,\n          maxHeight: '78vh',\n          overflowY: 'auto',\n          p: 1.5,\n          border: 1,\n          borderColor: 'divider',\n        }}\n      >\n        {pinned ? (\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              mb: 0.5,\n            }}\n          >\n            <Typography variant=\"caption\" color=\"textSecondary\">\n              {'Pinned — click the element again to release'}\n            </Typography>\n            <IconButton\n              size=\"small\"\n              aria-label=\"close element detail\"\n              onClick={onDismiss}\n            >\n              <MdiIcon path={ICON_VARIANT_CLOSE.path} fontSize=\"inherit\" />\n            </IconButton>\n          </Box>\n        ) : null}\n        {/* The same content component the dialog renders — one description of\n            an element, two placements. */}\n        <ElementDetailView detail={detail} node={item} previewHeight={300} />\n      </Paper>\n    </Popper>\n  )\n}\nElementDetailOverlay.displayName = 'ElementDetailOverlay'\n\nexport default ElementDetailOverlay\n"],"names":["ICON_VARIANT_CLOSE","MdiIcon","Box","IconButton","Paper","Popper","Typography","useEffect","describeElement","ElementDetailView","ANCHOR_OFFSET","ElementDetailOverlay","props","item","anchor","pinned","onPointerEnter","onPointerLeave","onDismiss","onKey","e","key","window","addEventListener","removeEventListener","detail","open","Boolean","anchorEl","placement","data-testid","modifiers","name","options","offset","fallbackPlacements","padding","sx","zIndex","theme","modal","onMouseEnter","onMouseLeave","elevation","width","maxHeight","overflowY","p","border","borderColor","display","alignItems","justifyContent","mb","variant","color","size","aria-label","onClick","path","fontSize","node","previewHeight","displayName"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,kBAAkB,QAAQ,2BAA0B;AAC7D,SAASC,OAAO,QAAQ,uBAAsB;AAC9C,SAASC,GAAG,EAAEC,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,UAAU,QAAQ,gBAAe;AAC1E,SAASC,SAAS,QAAQ,QAAO;AACjC,SAASC,eAAe,QAAQ,+BAA2B;AAC3D,OAAOC,uBAAuB,gCAA4B;AAE1D,+EAA+E,GAC/E,MAAMC,gBAAgB;AActB;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,qBAAqBC,KAAgC;IACnE,MAAM,EAAEC,IAAI,EAAEC,MAAM,EAAEC,MAAM,EAAEC,cAAc,EAAEC,cAAc,EAAEC,SAAS,EAAE,GACvEN;IAEF,wEAAwE;IACxE,4DAA4D;IAC5DL,UAAU;QACR,IAAI,CAACQ,QAAQ;QACb,MAAMI,QAAQ,CAACC;YACb,IAAIA,EAAEC,GAAG,KAAK,UAAUH,6BAAAA;QAC1B;QACAI,OAAOC,gBAAgB,CAAC,WAAWJ;QACnC,OAAO,IAAMG,OAAOE,mBAAmB,CAAC,WAAWL;IACrD,GAAG;QAACJ;QAAQG;KAAU;IAEtB,MAAMO,SAASjB,gBAAgBK;IAC/B,MAAMa,OAAOC,QAAQd,QAAQC,UAAUW;IAEvC,qBACE,KAACpB;QACCqB,MAAMA;QACNE,UAAUd;QACVe,WAAU;QACVC,eAAY;QACZC,WAAW;YACT;gBAAEC,MAAM;gBAAUC,SAAS;oBAAEC,QAAQ;wBAAC;wBAAGxB;qBAAc;gBAAC;YAAE;YAC1D,qEAAqE;YACrE,8BAA8B;YAC9B;gBAAEsB,MAAM;gBAAQC,SAAS;oBAAEE,oBAAoB;wBAAC;wBAAS;qBAAe;gBAAC;YAAE;YAC3E;gBAAEH,MAAM;gBAAmBC,SAAS;oBAAEG,SAAS;gBAAE;YAAE;SACpD;QACD,uEAAuE;QACvE,wEAAwE;QACxE,uEAAuE;QACvE,wEAAwE;QACxE,4DAA4D;QAC5DC,IAAI;YAAEC,QAAQ,CAACC,QAAUA,MAAMD,MAAM,CAACE,KAAK,GAAG;QAAE;QAChDC,cAAczB;QACd0B,cAAczB;kBAEd,cAAA,MAACb;YACCuC,WAAW;YACXN,IAAI;gBACF,iEAAiE;gBACjE,+DAA+D;gBAC/D,gEAAgE;gBAChE,6DAA6D;gBAC7DO,OAAO;gBACPC,WAAW;gBACXC,WAAW;gBACXC,GAAG;gBACHC,QAAQ;gBACRC,aAAa;YACf;;gBAEClC,uBACC,MAACb;oBACCmC,IAAI;wBACFa,SAAS;wBACTC,YAAY;wBACZC,gBAAgB;wBAChBC,IAAI;oBACN;;sCAEA,KAAC/C;4BAAWgD,SAAQ;4BAAUC,OAAM;sCACjC;;sCAEH,KAACpD;4BACCqD,MAAK;4BACLC,cAAW;4BACXC,SAASxC;sCAET,cAAA,KAACjB;gCAAQ0D,MAAM3D,mBAAmB2D,IAAI;gCAAEC,UAAS;;;;qBAGnD;8BAGJ,KAACnD;oBAAkBgB,QAAQA;oBAAQoC,MAAMhD;oBAAMiD,eAAe;;;;;AAItE;AACAnD,qBAAqBoD,WAAW,GAAG;AAEnC,eAAepD,qBAAoB"}

package/src/lib/components/element-detail.component.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @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 { ElementDetail } from '../utils/describe-element';
+export interface ElementDetailViewProps {
+    detail: ElementDetail | null;
+    /**
+     * Narrow presentation for the docked Elements column. Same CONTENT either
+     * way — the content is designed once and the two surfaces present it
+     * differently, rather than there being two detail views to keep in step.
+     */
+    dense?: boolean;
+    /**
+     * Height the preview may take. Both surfaces now float or pane the detail,
+     * so the preview is no longer squeezed into whatever the text leaves — it
+     * gets the room, because it is the part that needs it.
+     */
+    previewHeight?: number;
+    /**
+     * The picker item itself, when the surface wants a rendered preview above
+     * the text. Only ever the one selected or hovered element — the detail
+     * region is single-tenant by construction, so the preview is too.
+     */
+    node?: any;
+}
+/**
+ * What a selected element actually is, shown before you commit to it
+ * (AGL-2486).
+ *
+ * Deliberately a DOCKED REGION rather than a hover popup. A popup over the
+ * grid would have to solve three problems this does not have: it can swallow
+ * the click meant for the card beneath it, it can cover the very item you
+ * are pointing at, and several can open at once. A region that lives outside
+ * the grid cannot do any of those by construction.
+ *
+ * Everything under the description is DERIVED from the schema, so it cannot
+ * go stale and third-party elements get it for free.
+ */
+export declare function ElementDetailView(props: ElementDetailViewProps): import("react").JSX.Element;
+export declare namespace ElementDetailView {
+    var displayName: string;
+}
+export default ElementDetailView;

package/src/lib/components/element-detail.component.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { Box, Chip, Link, Stack, Typography } from "@mui/material";
+import ElementPreview from "./element-preview.component.js";
+import { besignerDocsUrl } from "../utils/docs-help.js";
+/**
+ * Element category → its section of the element catalog page.
+ *
+ * The catalog's H2s ARE the drawer's categories, so the deep link is derived
+ * rather than mapped by hand per element — 45+ hand-written anchors would be
+ * 45+ things to get wrong. A category with no section (plugin-registered
+ * labels, "Your components") lands on the page itself, which is correct
+ * rather than broken.
+ */ const CATALOG_ANCHORS = {
+    Layout: '#layout',
+    Surface: '#surface',
+    Navigation: '#navigation',
+    Text: '#text',
+    'Data Display': '#data-display',
+    Media: '#media',
+    Forms: '#forms-input-commerce-members',
+    Input: '#forms-input-commerce-members',
+    Commerce: '#forms-input-commerce-members',
+    Members: '#forms-input-commerce-members'
+};
+/**
+ * What a selected element actually is, shown before you commit to it
+ * (AGL-2486).
+ *
+ * Deliberately a DOCKED REGION rather than a hover popup. A popup over the
+ * grid would have to solve three problems this does not have: it can swallow
+ * the click meant for the card beneath it, it can cover the very item you
+ * are pointing at, and several can open at once. A region that lives outside
+ * the grid cannot do any of those by construction.
+ *
+ * Everything under the description is DERIVED from the schema, so it cannot
+ * go stale and third-party elements get it for free.
+ */ export function ElementDetailView(props) {
+    var _detail_category;
+    const { detail, dense, node, previewHeight } = props;
+    if (!detail) return null;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: dense ? 0.5 : 0.75,
+        sx: {
+            minWidth: 0,
+            width: 1
+        },
+        "aria-live": "polite",
+        "data-testid": "element-detail",
+        children: [
+            node ? /*#__PURE__*/ _jsx(ElementPreview, {
+                node: node,
+                height: previewHeight != null ? previewHeight : dense ? 116 : 168,
+                requiredParents: detail.requiredParents
+            }) : null,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center',
+                    minWidth: 0
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: dense ? 'subtitle2' : 'subtitle1',
+                        noWrap: true,
+                        sx: {
+                            textOverflow: 'ellipsis',
+                            fontWeight: 'fontWeightMedium'
+                        },
+                        children: detail.name
+                    }),
+                    detail.category ? /*#__PURE__*/ _jsx(Chip, {
+                        size: "small",
+                        variant: "outlined",
+                        label: detail.category,
+                        sx: {
+                            textTransform: 'capitalize',
+                            flex: '0 0 auto'
+                        }
+                    }) : null
+                ]
+            }),
+            detail.description ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "textSecondary",
+                children: detail.description
+            }) : null,
+            /*#__PURE__*/ _jsx(Box, {
+                component: "ul",
+                sx: {
+                    m: 0,
+                    pl: 0,
+                    listStyle: 'none'
+                },
+                children: detail.facts.map((fact)=>/*#__PURE__*/ _jsxs(Stack, {
+                        component: "li",
+                        direction: "row",
+                        spacing: 0.5,
+                        sx: {
+                            alignItems: 'flex-start'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                "aria-hidden": true,
+                                sx: {
+                                    flex: '0 0 auto',
+                                    width: 4,
+                                    height: 4,
+                                    mt: '0.45em',
+                                    borderRadius: '50%',
+                                    backgroundColor: 'text.disabled'
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "textSecondary",
+                                children: fact.label
+                            })
+                        ]
+                    }, fact.id))
+            }),
+            detail.attributes.length ? /*#__PURE__*/ _jsxs(Typography, {
+                variant: "caption",
+                color: "textSecondary",
+                sx: {
+                    mt: 0.25
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Box, {
+                        component: "span",
+                        sx: {
+                            fontWeight: 'fontWeightMedium'
+                        },
+                        children: 'Attributes: '
+                    }),
+                    detail.attributes.slice(0, dense ? 4 : 8).join(', '),
+                    detail.attributes.length > (dense ? 4 : 8) ? '…' : ''
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx(Link, {
+                href: besignerDocsUrl('elementCatalog', CATALOG_ANCHORS[(_detail_category = detail.category) != null ? _detail_category : '']),
+                target: "_blank",
+                rel: "noopener noreferrer",
+                variant: "caption",
+                sx: {
+                    fontWeight: 600
+                },
+                children: 'Learn more'
+            })
+        ]
+    });
+}
+ElementDetailView.displayName = 'ElementDetailView';
+export default ElementDetailView;
+
+//# sourceMappingURL=element-detail.component.js.map

package/src/lib/components/element-detail.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/element-detail.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 { Box, Chip, Link, Stack, Typography } from '@mui/material'\nimport type { ElementDetail } from '../utils/describe-element'\nimport ElementPreview from './element-preview.component'\nimport { besignerDocsUrl, type BesignerDocsAnchor } from '../utils/docs-help'\n\n/**\n * Element category → its section of the element catalog page.\n *\n * The catalog's H2s ARE the drawer's categories, so the deep link is derived\n * rather than mapped by hand per element — 45+ hand-written anchors would be\n * 45+ things to get wrong. A category with no section (plugin-registered\n * labels, \"Your components\") lands on the page itself, which is correct\n * rather than broken.\n */\nconst CATALOG_ANCHORS: Record<string, BesignerDocsAnchor<'elementCatalog'>> = {\n  Layout: '#layout',\n  Surface: '#surface',\n  Navigation: '#navigation',\n  Text: '#text',\n  'Data Display': '#data-display',\n  Media: '#media',\n  Forms: '#forms-input-commerce-members',\n  Input: '#forms-input-commerce-members',\n  Commerce: '#forms-input-commerce-members',\n  Members: '#forms-input-commerce-members',\n}\n\nexport interface ElementDetailViewProps {\n  detail: ElementDetail | null\n  /**\n   * Narrow presentation for the docked Elements column. Same CONTENT either\n   * way — the content is designed once and the two surfaces present it\n   * differently, rather than there being two detail views to keep in step.\n   */\n  dense?: boolean\n  /**\n   * Height the preview may take. Both surfaces now float or pane the detail,\n   * so the preview is no longer squeezed into whatever the text leaves — it\n   * gets the room, because it is the part that needs it.\n   */\n  previewHeight?: number\n  /**\n   * The picker item itself, when the surface wants a rendered preview above\n   * the text. Only ever the one selected or hovered element — the detail\n   * region is single-tenant by construction, so the preview is too.\n   */\n  node?: any\n}\n\n/**\n * What a selected element actually is, shown before you commit to it\n * (AGL-2486).\n *\n * Deliberately a DOCKED REGION rather than a hover popup. A popup over the\n * grid would have to solve three problems this does not have: it can swallow\n * the click meant for the card beneath it, it can cover the very item you\n * are pointing at, and several can open at once. A region that lives outside\n * the grid cannot do any of those by construction.\n *\n * Everything under the description is DERIVED from the schema, so it cannot\n * go stale and third-party elements get it for free.\n */\nexport function ElementDetailView(props: ElementDetailViewProps) {\n  const { detail, dense, node, previewHeight } = props\n  if (!detail) return null\n\n  return (\n    <Stack\n      spacing={dense ? 0.5 : 0.75}\n      sx={{ minWidth: 0, width: 1 }}\n      aria-live=\"polite\"\n      data-testid=\"element-detail\"\n    >\n      {node ? (\n        <ElementPreview\n          node={node}\n          height={previewHeight ?? (dense ? 116 : 168)}\n          requiredParents={detail.requiredParents}\n        />\n      ) : null}\n\n      <Stack\n        direction=\"row\"\n        spacing={1}\n        sx={{ alignItems: 'center', minWidth: 0 }}\n      >\n        <Typography\n          variant={dense ? 'subtitle2' : 'subtitle1'}\n          noWrap\n          sx={{ textOverflow: 'ellipsis', fontWeight: 'fontWeightMedium' }}\n        >\n          {detail.name}\n        </Typography>\n        {detail.category ? (\n          <Chip\n            size=\"small\"\n            variant=\"outlined\"\n            label={detail.category}\n            sx={{ textTransform: 'capitalize', flex: '0 0 auto' }}\n          />\n        ) : null}\n      </Stack>\n\n      {detail.description ? (\n        <Typography variant=\"caption\" color=\"textSecondary\">\n          {detail.description}\n        </Typography>\n      ) : null}\n\n      {/* Derived facts. No heading — in a narrow column a heading costs a\n          line and explains nothing the list does not. */}\n      <Box component=\"ul\" sx={{ m: 0, pl: 0, listStyle: 'none' }}>\n        {detail.facts.map((fact) => (\n          <Stack\n            key={fact.id}\n            component=\"li\"\n            direction=\"row\"\n            spacing={0.5}\n            sx={{ alignItems: 'flex-start' }}\n          >\n            <Box\n              aria-hidden\n              sx={{\n                flex: '0 0 auto',\n                width: 4,\n                height: 4,\n                mt: '0.45em',\n                borderRadius: '50%',\n                backgroundColor: 'text.disabled',\n              }}\n            />\n            <Typography variant=\"caption\" color=\"textSecondary\">\n              {fact.label}\n            </Typography>\n          </Stack>\n        ))}\n      </Box>\n\n      {detail.attributes.length ? (\n        <Typography variant=\"caption\" color=\"textSecondary\" sx={{ mt: 0.25 }}>\n          <Box component=\"span\" sx={{ fontWeight: 'fontWeightMedium' }}>\n            {'Attributes: '}\n          </Box>\n          {detail.attributes.slice(0, dense ? 4 : 8).join(', ')}\n          {detail.attributes.length > (dense ? 4 : 8) ? '…' : ''}\n        </Typography>\n      ) : null}\n\n      {/* Links to the catalog rather than restating it. Duplicated\n          documentation drifts, and the docs page is the thing that is\n          actually maintained. */}\n      <Link\n        href={besignerDocsUrl(\n          'elementCatalog',\n          CATALOG_ANCHORS[detail.category ?? ''],\n        )}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        variant=\"caption\"\n        sx={{ fontWeight: 600 }}\n      >\n        {'Learn more'}\n      </Link>\n    </Stack>\n  )\n}\nElementDetailView.displayName = 'ElementDetailView'\n\nexport default ElementDetailView\n"],"names":["Box","Chip","Link","Stack","Typography","ElementPreview","besignerDocsUrl","CATALOG_ANCHORS","Layout","Surface","Navigation","Text","Media","Forms","Input","Commerce","Members","ElementDetailView","props","detail","dense","node","previewHeight","spacing","sx","minWidth","width","aria-live","data-testid","height","requiredParents","direction","alignItems","variant","noWrap","textOverflow","fontWeight","name","category","size","label","textTransform","flex","description","color","component","m","pl","listStyle","facts","map","fact","aria-hidden","mt","borderRadius","backgroundColor","id","attributes","length","slice","join","href","target","rel","displayName"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,GAAG,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAe;AAElE,OAAOC,oBAAoB,iCAA6B;AACxD,SAASC,eAAe,QAAiC,wBAAoB;AAE7E;;;;;;;;CAQC,GACD,MAAMC,kBAAwE;IAC5EC,QAAQ;IACRC,SAAS;IACTC,YAAY;IACZC,MAAM;IACN,gBAAgB;IAChBC,OAAO;IACPC,OAAO;IACPC,OAAO;IACPC,UAAU;IACVC,SAAS;AACX;AAwBA;;;;;;;;;;;;CAYC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;QA4FrCC;IA3FxB,MAAM,EAAEA,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,aAAa,EAAE,GAAGJ;IAC/C,IAAI,CAACC,QAAQ,OAAO;IAEpB,qBACE,MAAChB;QACCoB,SAASH,QAAQ,MAAM;QACvBI,IAAI;YAAEC,UAAU;YAAGC,OAAO;QAAE;QAC5BC,aAAU;QACVC,eAAY;;YAEXP,qBACC,KAAChB;gBACCgB,MAAMA;gBACNQ,MAAM,EAAEP,wBAAAA,gBAAkBF,QAAQ,MAAM;gBACxCU,iBAAiBX,OAAOW,eAAe;iBAEvC;0BAEJ,MAAC3B;gBACC4B,WAAU;gBACVR,SAAS;gBACTC,IAAI;oBAAEQ,YAAY;oBAAUP,UAAU;gBAAE;;kCAExC,KAACrB;wBACC6B,SAASb,QAAQ,cAAc;wBAC/Bc,MAAM;wBACNV,IAAI;4BAAEW,cAAc;4BAAYC,YAAY;wBAAmB;kCAE9DjB,OAAOkB,IAAI;;oBAEblB,OAAOmB,QAAQ,iBACd,KAACrC;wBACCsC,MAAK;wBACLN,SAAQ;wBACRO,OAAOrB,OAAOmB,QAAQ;wBACtBd,IAAI;4BAAEiB,eAAe;4BAAcC,MAAM;wBAAW;yBAEpD;;;YAGLvB,OAAOwB,WAAW,iBACjB,KAACvC;gBAAW6B,SAAQ;gBAAUW,OAAM;0BACjCzB,OAAOwB,WAAW;iBAEnB;0BAIJ,KAAC3C;gBAAI6C,WAAU;gBAAKrB,IAAI;oBAAEsB,GAAG;oBAAGC,IAAI;oBAAGC,WAAW;gBAAO;0BACtD7B,OAAO8B,KAAK,CAACC,GAAG,CAAC,CAACC,qBACjB,MAAChD;wBAEC0C,WAAU;wBACVd,WAAU;wBACVR,SAAS;wBACTC,IAAI;4BAAEQ,YAAY;wBAAa;;0CAE/B,KAAChC;gCACCoD,aAAW;gCACX5B,IAAI;oCACFkB,MAAM;oCACNhB,OAAO;oCACPG,QAAQ;oCACRwB,IAAI;oCACJC,cAAc;oCACdC,iBAAiB;gCACnB;;0CAEF,KAACnD;gCAAW6B,SAAQ;gCAAUW,OAAM;0CACjCO,KAAKX,KAAK;;;uBAlBRW,KAAKK,EAAE;;YAwBjBrC,OAAOsC,UAAU,CAACC,MAAM,iBACvB,MAACtD;gBAAW6B,SAAQ;gBAAUW,OAAM;gBAAgBpB,IAAI;oBAAE6B,IAAI;gBAAK;;kCACjE,KAACrD;wBAAI6C,WAAU;wBAAOrB,IAAI;4BAAEY,YAAY;wBAAmB;kCACxD;;oBAEFjB,OAAOsC,UAAU,CAACE,KAAK,CAAC,GAAGvC,QAAQ,IAAI,GAAGwC,IAAI,CAAC;oBAC/CzC,OAAOsC,UAAU,CAACC,MAAM,GAAItC,CAAAA,QAAQ,IAAI,CAAA,IAAK,MAAM;;iBAEpD;0BAKJ,KAAClB;gBACC2D,MAAMvD,gBACJ,kBACAC,eAAe,EAACY,mBAAAA,OAAOmB,QAAQ,YAAfnB,mBAAmB,GAAG;gBAExC2C,QAAO;gBACPC,KAAI;gBACJ9B,SAAQ;gBACRT,IAAI;oBAAEY,YAAY;gBAAI;0BAErB;;;;AAIT;AACAnB,kBAAkB+C,WAAW,GAAG;AAEhC,eAAe/C,kBAAiB"}

package/src/lib/components/element-info-details.component.d.ts

@@ -0,0 +1,18 @@
+import type * as Aglyn from '@aglyn/aglyn';
+/**
+ * What this element IS, at the bottom of Attributes.
+ *
+ * Two collapsed accordions: the component's own description, and the
+ * element / parent / component / plugin ids. Reference detail — worth having
+ * when a name is ambiguous or an id has to be quoted in a bug report, and not
+ * worth the tab it used to occupy. Beside the fields it describes it costs a
+ * reader nothing until they open it; as a tab it cost every reader a third of
+ * the panel's header.
+ */
+export declare function ElementInfoDetails({ node, }: {
+    node: Aglyn.NodeSchema<any>;
+}): import("react").JSX.Element;
+export declare namespace ElementInfoDetails {
+    var displayName: string;
+}
+export default ElementInfoDetails;

package/src/lib/components/element-info-details.component.js

@@ -0,0 +1,169 @@
+/**
+ * @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.
+ */ 'use client';
+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 { components } from "@aglyn/aglyn";
+import { mergeSxProps } from "@aglyn/shared-ui-theme";
+import { Typography } from "@mui/material";
+import { useMemo, useState } from "react";
+import AccordionListComponent from "./accordion-list.component.js";
+/**
+ * What this element IS, at the bottom of Attributes.
+ *
+ * Two collapsed accordions: the component's own description, and the
+ * element / parent / component / plugin ids. Reference detail — worth having
+ * when a name is ambiguous or an id has to be quoted in a bug report, and not
+ * worth the tab it used to occupy. Beside the fields it describes it costs a
+ * reader nothing until they open it; as a tab it cost every reader a third of
+ * the panel's header.
+ */ export function ElementInfoDetails({ node }) {
+    const schema = components.getSchema(node == null ? void 0 : node.componentId);
+    const failoverText = 'n/a';
+    const details = useMemo(()=>[
+            {
+                key: 'element-overview',
+                label: 'Element Overview',
+                items: [
+                    {
+                        key: 'component-display-name',
+                        label: 'Type',
+                        value: schema == null ? void 0 : schema.displayName
+                    },
+                    {
+                        key: 'component-title',
+                        label: 'Title',
+                        value: schema == null ? void 0 : schema.title
+                    },
+                    {
+                        key: 'component-subtitle',
+                        label: 'Subtitle',
+                        value: schema == null ? void 0 : schema.subtitle
+                    },
+                    {
+                        key: 'component-description',
+                        label: 'Description',
+                        value: schema == null ? void 0 : schema.description,
+                        TypographyProps: {
+                            gutterBottom: true
+                        }
+                    }
+                ]
+            },
+            {
+                key: 'unique-identifiers',
+                label: 'Unique Identifiers',
+                items: [
+                    {
+                        key: 'element-id',
+                        label: 'Element ID',
+                        value: node.$id
+                    },
+                    {
+                        key: 'parent-id',
+                        label: 'Parent Element ID',
+                        value: node == null ? void 0 : node.parentId
+                    },
+                    {
+                        key: 'component-id',
+                        label: 'Component ID',
+                        value: node == null ? void 0 : node.componentId
+                    },
+                    {
+                        key: 'plugin-id',
+                        label: 'Add-on ID',
+                        value: node == null ? void 0 : node.pluginId,
+                        ValueTypographyProps: {}
+                    }
+                ]
+            }
+        ], [
+        schema,
+        node
+    ]);
+    const [expanded, setExpanded] = useState(details[0].key);
+    const handleChange = (panel)=>(event, newExpanded)=>{
+            setExpanded(newExpanded ? panel : false);
+        };
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: /*#__PURE__*/ _jsx(AccordionListComponent, {
+            items: details,
+            getItemId: (item)=>item.key,
+            onRenderSummary: ({ item })=>/*#__PURE__*/ _jsx(_Fragment, {
+                    children: item == null ? void 0 : item.label
+                }),
+            onRenderDetail: ({ item })=>{
+                var _item_items;
+                return /*#__PURE__*/ _jsx(_Fragment, {
+                    children: item == null ? void 0 : (_item_items = item.items) == null ? void 0 : _item_items.map((_0)=>{
+                        let { label, value, TypographyProps, ValueTypographyProps } = _0, item = _object_without_properties_loose(_0, [
+                            "label",
+                            "value",
+                            "TypographyProps",
+                            "ValueTypographyProps"
+                        ]);
+                        return /*#__PURE__*/ _jsxs(Typography, _extends({
+                            component: "div"
+                        }, TypographyProps, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    sx: {
+                                        display: 'inline',
+                                        textTransform: 'uppercase'
+                                    },
+                                    children: /*#__PURE__*/ _jsxs("b", {
+                                        children: [
+                                            label,
+                                            ":"
+                                        ]
+                                    })
+                                }),
+                                ' ',
+                                /*#__PURE__*/ _jsx(Typography, _extends({
+                                    variant: "body1"
+                                }, ValueTypographyProps, {
+                                    sx: mergeSxProps((theme)=>{
+                                        const tv = theme.vars || theme;
+                                        return {
+                                            bgcolor: `rgba(${tv.palette.primary.lightChannel} / 0.18)`,
+                                            border: `1px solid rgba(${tv.palette.primary.lightChannel} / 0.72)`,
+                                            borderRadius: '0.3em',
+                                            px: 0.5,
+                                            py: 0.15,
+                                            wordBreak: 'break-word',
+                                            fontSize: '0.8rem'
+                                        };
+                                    }, {
+                                        display: 'inline'
+                                    }, ValueTypographyProps == null ? void 0 : ValueTypographyProps.sx),
+                                    children: value || /*#__PURE__*/ _jsx("i", {
+                                        children: failoverText
+                                    })
+                                }))
+                            ]
+                        }), item.key);
+                    })
+                });
+            }
+        })
+    });
+}
+ElementInfoDetails.displayName = 'ElementInfoDetails';
+export default ElementInfoDetails;
+
+//# sourceMappingURL=element-info-details.component.js.map

package/src/lib/components/element-info-details.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/element-info-details.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport { components } from '@aglyn/aglyn'\nimport { mergeSxProps } from '@aglyn/shared-ui-theme'\nimport { Typography } from '@mui/material'\nimport { useMemo, useState, type SyntheticEvent } from 'react'\nimport AccordionListComponent from './accordion-list.component'\n\n/**\n * What this element IS, at the bottom of Attributes.\n *\n * Two collapsed accordions: the component's own description, and the\n * element / parent / component / plugin ids. Reference detail — worth having\n * when a name is ambiguous or an id has to be quoted in a bug report, and not\n * worth the tab it used to occupy. Beside the fields it describes it costs a\n * reader nothing until they open it; as a tab it cost every reader a third of\n * the panel's header.\n */\nexport function ElementInfoDetails({\n  node,\n}: {\n  node: Aglyn.NodeSchema<any>\n}) {\n  const schema = components.getSchema(node?.componentId)\n  const failoverText = 'n/a'\n  const details = useMemo(\n    () => [\n      {\n        key: 'element-overview',\n        label: 'Element Overview',\n        items: [\n          {\n            key: 'component-display-name',\n            label: 'Type',\n            value: schema?.displayName,\n          },\n          {\n            key: 'component-title',\n            label: 'Title',\n            value: schema?.title,\n          },\n          {\n            key: 'component-subtitle',\n            label: 'Subtitle',\n            value: schema?.subtitle,\n          },\n          {\n            key: 'component-description',\n            label: 'Description',\n            value: schema?.description,\n            TypographyProps: { gutterBottom: true },\n          },\n        ],\n      },\n      {\n        key: 'unique-identifiers',\n        label: 'Unique Identifiers',\n        items: [\n          {\n            key: 'element-id',\n            label: 'Element ID',\n            value: node.$id,\n          },\n          {\n            key: 'parent-id',\n            label: 'Parent Element ID',\n            value: node?.parentId,\n          },\n          {\n            key: 'component-id',\n            label: 'Component ID',\n            value: node?.componentId,\n          },\n          {\n            key: 'plugin-id',\n            label: 'Add-on ID',\n            value: node?.pluginId,\n            ValueTypographyProps: {},\n          },\n        ],\n      },\n    ],\n    [schema, node],\n  )\n  const [expanded, setExpanded] = useState<string | false>(details[0].key)\n  const handleChange =\n    (panel: string) => (event: SyntheticEvent, newExpanded: boolean) => {\n      setExpanded(newExpanded ? panel : false)\n    }\n\n  return (\n    <>\n      <AccordionListComponent\n        items={details}\n        getItemId={(item) => item.key}\n        onRenderSummary={({ item }) => <>{item?.label}</>}\n        onRenderDetail={({ item }) => (\n          <>\n            {item?.items?.map(\n              ({\n                label,\n                value,\n                TypographyProps,\n                ValueTypographyProps,\n                ...item\n              }: any) => (\n                <Typography key={item.key} component=\"div\" {...TypographyProps}>\n                  <Typography\n                    variant=\"caption\"\n                    sx={{\n                      display: 'inline',\n                      textTransform: 'uppercase',\n                    }}\n                  >\n                    <b>{label}:</b>\n                  </Typography>{' '}\n                  <Typography\n                    variant=\"body1\"\n                    {...ValueTypographyProps}\n                    sx={mergeSxProps(\n                      (theme) => {\n                        const tv = (theme as any).vars || theme\n                        return {\n                          bgcolor: `rgba(${tv.palette.primary.lightChannel} / 0.18)`,\n                          border: `1px solid rgba(${tv.palette.primary.lightChannel} / 0.72)`,\n                          borderRadius: '0.3em',\n                          px: 0.5,\n                          py: 0.15,\n                          wordBreak: 'break-word',\n                          fontSize: '0.8rem',\n                        }\n                      },\n                      { display: 'inline' },\n                      ValueTypographyProps?.sx,\n                    )}\n                  >\n                    {value || <i>{failoverText}</i>}\n                  </Typography>\n                </Typography>\n              ),\n            )}\n          </>\n        )}\n      />\n    </>\n  )\n}\nElementInfoDetails.displayName = 'ElementInfoDetails'\n\nexport default ElementInfoDetails\n"],"names":["components","mergeSxProps","Typography","useMemo","useState","AccordionListComponent","ElementInfoDetails","node","schema","getSchema","componentId","failoverText","details","key","label","items","value","displayName","title","subtitle","description","TypographyProps","gutterBottom","$id","parentId","pluginId","ValueTypographyProps","expanded","setExpanded","handleChange","panel","event","newExpanded","getItemId","item","onRenderSummary","onRenderDetail","map","component","variant","sx","display","textTransform","b","theme","tv","vars","bgcolor","palette","primary","lightChannel","border","borderRadius","px","py","wordBreak","fontSize","i"],"mappings":"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"}