@aglyn/besigner-ui 1.0.0-beta.231 → 1.0.0-beta.232

package/src/lib/components/node-quick-actions.js

@@ -21,7 +21,7 @@ import { ICON_VARIANT_MODIFY_ADD, ICON_VARIANT_MODIFY_DRAG, ICON_VARIANT_SHOW_MO
 import { SrOnly } from "@aglyn/shared-ui-jsx";
 import { MdiIcon } from "@aglyn/shared-ui-jsx";
 import { styled } from "@aglyn/shared-ui-theme";
-import { Button as MuiButton, Divider, Stack, Tooltip as MuiTooltip, Typography } from "@mui/material";
+import { Button as MuiButton, ClickAwayListener, Divider, Stack, Tooltip as MuiTooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { observer } from "mobx-react-lite";
 import { forwardRef, useCallback, useState } from "react";
 import { Else, If, Then } from "react-if";
@@ -41,6 +41,13 @@ const ActionButton = styled(MuiButton)(({ theme })=>({
         minWidth: 20,
         '&.MuiButtonGroup-grouped': {
             minWidth: 25
+        },
+        // A fingertip needs a target several times the size a cursor does; the
+        // strip grows with its buttons, so nothing else has to know.
+        '@media (pointer: coarse)': {
+            minWidth: 32,
+            minHeight: 32,
+            fontSize: theme.typography.pxToRem(20)
         }
     }));
 const LabelAction = /*#__PURE__*/ forwardRef((props, ref)=>{
@@ -80,7 +87,6 @@ export const NodeQuickActions = observer(/*#__PURE__*/ forwardRef((props, ref)=>
     // Controlled so menu actions can dismiss the tooltip — an uncontrolled
     // tooltip stays open behind (or above) dialogs its actions launch.
     const [moreOpen, setMoreOpen] = useState(false);
-    const openMore = useCallback(()=>setMoreOpen(true), []);
     /**
      * Right-click on the canvas opens this menu (AGL-1405). The leaf records
      * the request and selects the node, which is what mounts this overlay —
@@ -94,188 +100,218 @@ export const NodeQuickActions = observer(/*#__PURE__*/ forwardRef((props, ref)=>
         // itself.
         clearCanvasContextMenu();
     }, []);
-    return /*#__PURE__*/ _jsxs(Stack, _extends({
-        ref: ref,
-        id: "aglyn:element-overlay-label",
-        "data-aglyn-node": node == null ? void 0 : node.$id,
-        "data-aglyn-kind": "overlay-label",
-        direction: "row",
-        spacing: 0.35,
-        divider: /*#__PURE__*/ _jsx(Divider, {
-            orientation: "vertical",
-            variant: "fullWidth",
-            flexItem: true,
-            sx: {
-                opacity: 0.5
-            }
-        })
-    }, rest, {
-        sx: [
-            {
-                justifyContent: "flex-start",
-                alignItems: "center",
-                fontSize: 12,
-                lineHeight: 1,
-                fontWeight: 600,
-                letterSpacing: 0.25,
-                // pointerEvents: 'none',
-                marginLeft: '-2px',
-                marginBottom: '1px',
-                // One slate surface for the whole floating control (AGL-1194).
-                // The strip was `primary.light` while the buttons on it were
-                // `tertiary` — two chrome hues on one control, and an ink colour
-                // paired with a background it no longer sat on. Ink is now the
-                // contrastText OF THIS background, so it follows the scheme
-                // instead of being picked once against the old one.
-                backgroundColor: 'tertiary.main',
-                color: 'tertiary.contrastText',
-                px: 0.5,
-                pl: 0.5,
-                pr: 0.25,
-                py: 0.35
-            },
-            ...Array.isArray(rest.sx) ? rest.sx : [
-                rest.sx
-            ]
-        ],
-        children: [
-            /*#__PURE__*/ _jsx(Stack, {
-                direction: "column",
+    const menuShown = moreOpen || requested;
+    // The dots are a menu button: a click or tap opens the menu and the next
+    // one closes it. A menu that also opened on hover could not be closed
+    // by clicking, since the hover had already opened it under the cursor.
+    const toggleMore = useCallback(()=>{
+        if (menuShown) closeMore();
+        else setMoreOpen(true);
+    }, [
+        menuShown,
+        closeMore
+    ]);
+    // Beside the strip there is no room on a phone: a 240px menu to the
+    // right of an element runs off the screen. Below it, the popper slides
+    // it sideways into the window instead.
+    const theme = useTheme();
+    const phone = useMediaQuery(theme.breakpoints.down('sm'), {
+        noSsr: true
+    });
+    return(// A click or tap anywhere else closes the menu as well.
+    /*#__PURE__*/ _jsx(ClickAwayListener, {
+        onClickAway: ()=>menuShown && closeMore(),
+        children: /*#__PURE__*/ _jsxs(Stack, _extends({
+            ref: ref,
+            id: "aglyn:element-overlay-label",
+            "data-aglyn-node": node == null ? void 0 : node.$id,
+            "data-aglyn-kind": "overlay-label",
+            direction: "row",
+            spacing: 0.35,
+            divider: /*#__PURE__*/ _jsx(Divider, {
+                orientation: "vertical",
+                variant: "fullWidth",
+                flexItem: true,
                 sx: {
+                    opacity: 0.5
+                }
+            })
+        }, rest, {
+            sx: [
+                {
+                    justifyContent: "flex-start",
                     alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: 12
+                    fontSize: 12,
+                    lineHeight: 1,
+                    fontWeight: 600,
+                    letterSpacing: 0.25,
+                    // pointerEvents: 'none',
+                    marginLeft: '-2px',
+                    marginBottom: '1px',
+                    // One slate surface for the whole floating control (AGL-1194).
+                    // The strip was `primary.light` while the buttons on it were
+                    // `tertiary` — two chrome hues on one control, and an ink colour
+                    // paired with a background it no longer sat on. Ink is now the
+                    // contrastText OF THIS background, so it follows the scheme
+                    // instead of being picked once against the old one.
+                    backgroundColor: 'tertiary.main',
+                    color: 'tertiary.contrastText',
+                    px: 0.5,
+                    pl: 0.5,
+                    pr: 0.25,
+                    py: 0.35
                 },
-                children: /*#__PURE__*/ _jsx(ComponentIconComponent, {
-                    component: node == null ? void 0 : node.componentSchema,
-                    node: node,
-                    fontSize: "inherit"
-                })
-            }),
-            /*#__PURE__*/ _jsxs(If, {
-                condition: variant !== 'actions',
-                children: [
-                    /*#__PURE__*/ _jsx(Then, {
-                        children: /*#__PURE__*/ _jsx(Typography, {
-                            component: "div",
-                            title: node == null ? void 0 : node.labelShort,
-                            sx: {
-                                textOverflow: "ellipsis",
-                                overflow: "hidden",
-                                whiteSpace: "nowrap",
-                                fontSize: "inherit",
-                                color: "inherit",
-                                maxWidth: 100
-                            },
-                            children: node == null ? void 0 : node.labelShort
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Else, {
-                        children: /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 0.25,
-                            sx: {
-                                justifyContent: "flex-start",
-                                alignItems: "center"
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(LabelAction, {
-                                    title: "move",
-                                    disableInteractive: true,
-                                    ButtonProps: _extends({}, handleProps, {
-                                        onClick: ()=>handleAddElementClick(node)
+                ...Array.isArray(rest.sx) ? rest.sx : [
+                    rest.sx
+                ]
+            ],
+            children: [
+                /*#__PURE__*/ _jsx(Stack, {
+                    direction: "column",
+                    sx: {
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 12
+                    },
+                    children: /*#__PURE__*/ _jsx(ComponentIconComponent, {
+                        component: node == null ? void 0 : node.componentSchema,
+                        node: node,
+                        fontSize: "inherit"
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(If, {
+                    condition: variant !== 'actions',
+                    children: [
+                        /*#__PURE__*/ _jsx(Then, {
+                            children: /*#__PURE__*/ _jsx(Typography, {
+                                component: "div",
+                                title: node == null ? void 0 : node.labelShort,
+                                sx: {
+                                    textOverflow: "ellipsis",
+                                    overflow: "hidden",
+                                    whiteSpace: "nowrap",
+                                    fontSize: "inherit",
+                                    color: "inherit",
+                                    maxWidth: 100
+                                },
+                                children: node == null ? void 0 : node.labelShort
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Else, {
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 0.25,
+                                sx: {
+                                    justifyContent: "flex-start",
+                                    alignItems: "center"
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(LabelAction, {
+                                        title: "move",
+                                        disableInteractive: true,
+                                        disableTouchListener: true,
+                                        ButtonProps: handleProps,
+                                        icon: {
+                                            path: ICON_VARIANT_MODIFY_DRAG.path
+                                        },
+                                        children: 'move'
                                     }),
-                                    icon: {
-                                        path: ICON_VARIANT_MODIFY_DRAG.path
-                                    },
-                                    children: 'move'
-                                }),
-                                /*#__PURE__*/ _jsx(LabelAction, {
-                                    title: "Add",
-                                    disableInteractive: true,
-                                    ButtonProps: {
-                                        onClick: ()=>handleAddElementClick(node)
-                                    },
-                                    icon: {
-                                        path: ICON_VARIANT_MODIFY_ADD.path
-                                    },
-                                    children: 'add'
-                                }),
-                                /*#__PURE__*/ _jsx(LabelAction, {
-                                    placement: "right",
-                                    children: 'more',
-                                    icon: {
-                                        path: ICON_VARIANT_SHOW_MORE_VERTICAL.path
-                                    },
-                                    enterDelay: 200,
-                                    leaveDelay: 500,
-                                    open: moreOpen || requested,
-                                    onOpen: openMore,
-                                    onClose: closeMore,
-                                    slotProps: {
-                                        popper: {
-                                            disablePortal: false,
-                                            // Below dialogs/drawers the menu actions open.
-                                            sx: {
-                                                zIndex: (theme)=>theme.zIndex.modal - 1
-                                            },
-                                            /**
-                     * Kept inside the WINDOW, not the document (AGL-1405).
-                     * `rootBoundary: 'document'` let the menu be placed
-                     * below the fold — the document is as tall as whatever
-                     * you put in it, so nothing ever "overflowed" it — and
-                     * the page grew a scrollbar around the menu, which moves
-                     * the editor's own chrome under the reader. The Paper
-                     * caps its height and scrolls, so a menu taller than the
-                     * window is still fully reachable.
-                     *
-                     * The 100px padding went with it: it was reserving a
-                     * margin against a boundary that was never binding, and
-                     * against the real one it would refuse placements that
-                     * fit perfectly well.
-                     */ modifiers: [
-                                                {
-                                                    name: 'flip',
-                                                    enabled: true,
-                                                    options: {
-                                                        altBoundary: true,
-                                                        padding: 8
-                                                    }
+                                    /*#__PURE__*/ _jsx(LabelAction, {
+                                        title: "Add",
+                                        disableInteractive: true,
+                                        disableTouchListener: true,
+                                        ButtonProps: {
+                                            onClick: ()=>handleAddElementClick(node)
+                                        },
+                                        icon: {
+                                            path: ICON_VARIANT_MODIFY_ADD.path
+                                        },
+                                        children: 'add'
+                                    }),
+                                    /*#__PURE__*/ _jsx(LabelAction, {
+                                        placement: phone ? 'bottom' : 'right',
+                                        children: 'more',
+                                        icon: {
+                                            path: ICON_VARIANT_SHOW_MORE_VERTICAL.path
+                                        },
+                                        open: menuShown,
+                                        onClose: closeMore,
+                                        // Only the button decides when the menu opens. Hover and
+                                        // focus would open it on the way past, and MUI's touch
+                                        // path would close it 1.5 s after the finger lifts.
+                                        disableHoverListener: true,
+                                        disableFocusListener: true,
+                                        disableTouchListener: true,
+                                        ButtonProps: {
+                                            onClick: toggleMore,
+                                            'aria-haspopup': 'menu',
+                                            'aria-expanded': menuShown
+                                        },
+                                        slotProps: {
+                                            popper: {
+                                                disablePortal: false,
+                                                // Below dialogs/drawers the menu actions open.
+                                                sx: {
+                                                    zIndex: (theme)=>theme.zIndex.modal - 1
                                                 },
-                                                {
-                                                    name: 'preventOverflow',
-                                                    enabled: true,
-                                                    options: {
-                                                        altAxis: true,
-                                                        altBoundary: true,
-                                                        tether: false,
-                                                        padding: 8
+                                                /**
+                       * Kept inside the WINDOW, not the document (AGL-1405).
+                       * `rootBoundary: 'document'` let the menu be placed
+                       * below the fold — the document is as tall as whatever
+                       * you put in it, so nothing ever "overflowed" it — and
+                       * the page grew a scrollbar around the menu, which moves
+                       * the editor's own chrome under the reader. The Paper
+                       * caps its height and scrolls, so a menu taller than the
+                       * window is still fully reachable.
+                       *
+                       * The 100px padding went with it: it was reserving a
+                       * margin against a boundary that was never binding, and
+                       * against the real one it would refuse placements that
+                       * fit perfectly well.
+                       */ modifiers: [
+                                                    {
+                                                        name: 'flip',
+                                                        enabled: true,
+                                                        options: {
+                                                            altBoundary: true,
+                                                            padding: 8
+                                                        }
+                                                    },
+                                                    {
+                                                        name: 'preventOverflow',
+                                                        enabled: true,
+                                                        options: {
+                                                            altAxis: true,
+                                                            altBoundary: true,
+                                                            tether: false,
+                                                            padding: 8
+                                                        }
+                                                    },
+                                                    {
+                                                        name: 'arrow',
+                                                        enabled: true
                                                     }
-                                                },
-                                                {
-                                                    name: 'arrow',
-                                                    enabled: true
+                                                ]
+                                            },
+                                            tooltip: {
+                                                sx: {
+                                                    padding: 0,
+                                                    m: -2
                                                 }
-                                            ]
-                                        },
-                                        tooltip: {
-                                            sx: {
-                                                padding: 0,
-                                                m: -2
                                             }
-                                        }
-                                    },
-                                    title: /*#__PURE__*/ _jsx(NodeContextMenu, {
-                                        node: node,
-                                        onAction: closeMore
+                                        },
+                                        title: /*#__PURE__*/ _jsx(NodeContextMenu, {
+                                            node: node,
+                                            onAction: closeMore
+                                        })
                                     })
-                                })
-                            ]
+                                ]
+                            })
                         })
-                    })
-                ]
-            })
-        ]
+                    ]
+                })
+            ]
+        }))
     }));
 }));
 NodeQuickActions.displayName = 'NodeQuickActions';

package/src/lib/components/node-quick-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/node-quick-actions.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 * as Besigner from '@aglyn/besigner'\nimport {\n  ICON_VARIANT_MODIFY_ADD,\n  ICON_VARIANT_MODIFY_DRAG,\n  ICON_VARIANT_SHOW_MORE_VERTICAL,\n} from '@aglyn/shared-data-enums'\nimport { SrOnly, SrOnlyProps } from '@aglyn/shared-ui-jsx'\nimport { MdiIcon, MdiIconProps } from '@aglyn/shared-ui-jsx'\nimport { styled } from '@aglyn/shared-ui-theme'\nimport {\n  Button as MuiButton,\n  type ButtonProps,\n  Divider,\n  Stack,\n  type StackProps,\n  Tooltip as MuiTooltip,\n  TooltipProps,\n  Typography,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { forwardRef, useCallback, useState } from 'react'\nimport { Else, If, Then } from 'react-if'\nimport useAddElementDrawerCallback from '../hooks/use-add-element-drawer-callback'\nimport ComponentIconComponent from './component-icon.component'\nimport {\n  clearCanvasContextMenu,\n  isCanvasContextMenuRequested,\n} from '../utils/canvas-context-menu'\nimport NodeContextMenu from './node-context-menu'\n\ninterface LabelActionProps extends Omit<TooltipProps, 'children'> {\n  children?: JSX.Children\n  icon: MdiIconProps\n  ButtonProps?: ButtonProps\n  SrOnlyProps?: SrOnlyProps\n}\n\nconst ActionButton = styled(MuiButton)(({ theme }) => ({\n  borderRadius: `0.2em`,\n  marginLeft: theme.spacing(-0.2),\n  pointerEvent: 'unset',\n  paddingTop: theme.spacing(0.1),\n  paddingBottom: theme.spacing(0.1),\n  paddingRight: theme.spacing(0.15),\n  paddingLeft: theme.spacing(0.15),\n  fontSize: theme.typography.pxToRem(16),\n  minWidth: 20,\n  '&.MuiButtonGroup-grouped': { minWidth: 25 },\n}))\n\nconst LabelAction = forwardRef<any, LabelActionProps>((props, ref) => {\n  const { children, ButtonProps, icon, SrOnlyProps, ...rest } = props\n\n  return (\n    <MuiTooltip ref={ref} {...rest}>\n      {/* Chrome, not accent (AGL-1186), and now transparent on the slate\n          strip rather than a contained pill on it (AGL-1194): a contained\n          tertiary button on a tertiary bar would be invisible, and the\n          pills were the reason the bar carried two hues at once. `inherit`\n          takes the strip's ink, so contrast is a pairing rather than a\n          guess in either scheme. */}\n      <ActionButton variant={'text'} color={'inherit'} {...ButtonProps}>\n        <MdiIcon fontSize=\"inherit\" {...icon} />\n        <SrOnly {...SrOnlyProps}>{children}</SrOnly>\n      </ActionButton>\n    </MuiTooltip>\n  )\n})\nLabelAction.displayName = 'AglynLabelAction'\n\nexport interface NodeQuickActionsProps extends StackProps {\n  node: Aglyn.NodeSchema\n  variant?: 'label' | 'actions'\n}\n\nexport const NodeQuickActions = observer(\n  forwardRef<any, NodeQuickActionsProps>((props, ref) => {\n    const { node, children, variant, ...rest } = props\n    const handleAddElementClick = useAddElementDrawerCallback()\n    const handleProps = Besigner.handles.get(node?.$id)\n    // Controlled so menu actions can dismiss the tooltip — an uncontrolled\n    // tooltip stays open behind (or above) dialogs its actions launch.\n    const [moreOpen, setMoreOpen] = useState(false)\n    const openMore = useCallback(() => setMoreOpen(true), [])\n    /**\n     * Right-click on the canvas opens this menu (AGL-1405). The leaf records\n     * the request and selects the node, which is what mounts this overlay —\n     * so the request is read on the first render rather than needing the\n     * component to already exist when the click happened.\n     */\n    const requested = isCanvasContextMenuRequested(node?.$id)\n    const closeMore = useCallback(() => {\n      setMoreOpen(false)\n      // Unconditionally: a request left standing re-opens the menu the next\n      // time this node's overlay mounts, which reads as the menu opening by\n      // itself.\n      clearCanvasContextMenu()\n    }, [])\n    return (\n      <Stack\n        ref={ref}\n        id=\"aglyn:element-overlay-label\"\n        data-aglyn-node={node?.$id}\n        data-aglyn-kind=\"overlay-label\"\n        direction=\"row\"\n        spacing={0.35}\n        divider={\n          <Divider orientation=\"vertical\" variant=\"fullWidth\" flexItem sx={{ opacity: 0.5 }} />\n        }\n        {...rest}\n        sx={[{\n          justifyContent: \"flex-start\",\n          alignItems: \"center\",\n          fontSize: 12,\n          lineHeight: 1,\n          fontWeight: 600,\n          letterSpacing: 0.25,\n\n          // pointerEvents: 'none',\n          marginLeft: '-2px',\n\n          marginBottom: '1px',\n          // One slate surface for the whole floating control (AGL-1194).\n          // The strip was `primary.light` while the buttons on it were\n          // `tertiary` — two chrome hues on one control, and an ink colour\n          // paired with a background it no longer sat on. Ink is now the\n          // contrastText OF THIS background, so it follows the scheme\n          // instead of being picked once against the old one.\n          backgroundColor: 'tertiary.main',\n          color: 'tertiary.contrastText',\n          px: 0.5,\n          pl: 0.5,\n          pr: 0.25,\n          py: 0.35\n        }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}>\n        <Stack\n          direction=\"column\"\n          sx={{\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            fontSize: 12\n          }}>\n          <ComponentIconComponent\n            component={node?.componentSchema}\n            node={node}\n            fontSize=\"inherit\"\n          />\n        </Stack>\n        <If condition={variant !== 'actions'}>\n          <Then>\n            <Typography\n              component=\"div\"\n              title={node?.labelShort}\n              sx={{\n                textOverflow: \"ellipsis\",\n                overflow: \"hidden\",\n                whiteSpace: \"nowrap\",\n                fontSize: \"inherit\",\n                color: \"inherit\",\n                maxWidth: 100\n              }}>\n              {node?.labelShort}\n            </Typography>\n          </Then>\n          <Else>\n            <Stack\n              direction=\"row\"\n              spacing={0.25}\n              sx={{\n                justifyContent: \"flex-start\",\n                alignItems: \"center\"\n              }}>\n              <LabelAction\n                title=\"move\"\n                disableInteractive\n                ButtonProps={{\n                  ...handleProps,\n                  onClick: () => handleAddElementClick(node),\n                }}\n                icon={{ path: ICON_VARIANT_MODIFY_DRAG.path }}\n              >\n                {'move'}\n              </LabelAction>\n              <LabelAction\n                title=\"Add\"\n                disableInteractive\n                ButtonProps={{\n                  onClick: () => handleAddElementClick(node),\n                }}\n                icon={{ path: ICON_VARIANT_MODIFY_ADD.path }}\n              >\n                {'add'}\n              </LabelAction>\n              <LabelAction\n                placement=\"right\"\n                children={'more'}\n                icon={{ path: ICON_VARIANT_SHOW_MORE_VERTICAL.path }}\n                enterDelay={200}\n                leaveDelay={500}\n                open={moreOpen || requested}\n                onOpen={openMore}\n                onClose={closeMore}\n                slotProps={{\n                  popper: {\n                    disablePortal: false,\n                    // Below dialogs/drawers the menu actions open.\n                    sx: { zIndex: (theme) => theme.zIndex.modal - 1 },\n                    /**\n                     * Kept inside the WINDOW, not the document (AGL-1405).\n                     * `rootBoundary: 'document'` let the menu be placed\n                     * below the fold — the document is as tall as whatever\n                     * you put in it, so nothing ever \"overflowed\" it — and\n                     * the page grew a scrollbar around the menu, which moves\n                     * the editor's own chrome under the reader. The Paper\n                     * caps its height and scrolls, so a menu taller than the\n                     * window is still fully reachable.\n                     *\n                     * The 100px padding went with it: it was reserving a\n                     * margin against a boundary that was never binding, and\n                     * against the real one it would refuse placements that\n                     * fit perfectly well.\n                     */\n                    modifiers: [\n                      {\n                        name: 'flip',\n                        enabled: true,\n                        options: { altBoundary: true, padding: 8 },\n                      },\n                      {\n                        name: 'preventOverflow',\n                        enabled: true,\n                        options: {\n                          altAxis: true,\n                          altBoundary: true,\n                          tether: false,\n                          padding: 8,\n                        },\n                      },\n                      {\n                        name: 'arrow',\n                        enabled: true,\n                      },\n                    ],\n                  },\n                  tooltip: {\n                    sx: {\n                      padding: 0,\n                      m: -2,\n                    },\n                  },\n                }}\n                title={<NodeContextMenu node={node} onAction={closeMore} />}\n              />\n            </Stack>\n          </Else>\n        </If>\n      </Stack>\n    );\n  }),\n)\nNodeQuickActions.displayName = 'NodeQuickActions'\n\nexport default NodeQuickActions\n"],"names":["Besigner","ICON_VARIANT_MODIFY_ADD","ICON_VARIANT_MODIFY_DRAG","ICON_VARIANT_SHOW_MORE_VERTICAL","SrOnly","MdiIcon","styled","Button","MuiButton","Divider","Stack","Tooltip","MuiTooltip","Typography","observer","forwardRef","useCallback","useState","Else","If","Then","useAddElementDrawerCallback","ComponentIconComponent","clearCanvasContextMenu","isCanvasContextMenuRequested","NodeContextMenu","ActionButton","theme","borderRadius","marginLeft","spacing","pointerEvent","paddingTop","paddingBottom","paddingRight","paddingLeft","fontSize","typography","pxToRem","minWidth","LabelAction","props","ref","children","ButtonProps","icon","SrOnlyProps","rest","variant","color","displayName","NodeQuickActions","node","handleAddElementClick","handleProps","handles","get","$id","moreOpen","setMoreOpen","openMore","requested","closeMore","id","data-aglyn-node","data-aglyn-kind","direction","divider","orientation","flexItem","sx","opacity","justifyContent","alignItems","lineHeight","fontWeight","letterSpacing","marginBottom","backgroundColor","px","pl","pr","py","Array","isArray","component","componentSchema","condition","title","labelShort","textOverflow","overflow","whiteSpace","maxWidth","disableInteractive","onClick","path","placement","enterDelay","leaveDelay","open","onOpen","onClose","slotProps","popper","disablePortal","zIndex","modal","modifiers","name","enabled","options","altBoundary","padding","altAxis","tether","tooltip","m","onAction"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC;;;AAGD,YAAYA,cAAc,kBAAiB;AAC3C,SACEC,uBAAuB,EACvBC,wBAAwB,EACxBC,+BAA+B,QAC1B,2BAA0B;AACjC,SAASC,MAAM,QAAqB,uBAAsB;AAC1D,SAASC,OAAO,QAAsB,uBAAsB;AAC5D,SAASC,MAAM,QAAQ,yBAAwB;AAC/C,SACEC,UAAUC,SAAS,EAEnBC,OAAO,EACPC,KAAK,EAELC,WAAWC,UAAU,EAErBC,UAAU,QACL,gBAAe;AACtB,SAASC,QAAQ,QAAQ,kBAAiB;AAC1C,SAASC,UAAU,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,QAAO;AACzD,SAASC,IAAI,EAAEC,EAAE,EAAEC,IAAI,QAAQ,WAAU;AACzC,OAAOC,iCAAiC,8CAA0C;AAClF,OAAOC,4BAA4B,gCAA4B;AAC/D,SACEC,sBAAsB,EACtBC,4BAA4B,QACvB,kCAA8B;AACrC,OAAOC,qBAAqB,yBAAqB;AASjD,MAAMC,eAAepB,OAAOE,WAAW,CAAC,EAAEmB,KAAK,EAAE,GAAM,CAAA;QACrDC,cAAc,CAAC,KAAK,CAAC;QACrBC,YAAYF,MAAMG,OAAO,CAAC,CAAC;QAC3BC,cAAc;QACdC,YAAYL,MAAMG,OAAO,CAAC;QAC1BG,eAAeN,MAAMG,OAAO,CAAC;QAC7BI,cAAcP,MAAMG,OAAO,CAAC;QAC5BK,aAAaR,MAAMG,OAAO,CAAC;QAC3BM,UAAUT,MAAMU,UAAU,CAACC,OAAO,CAAC;QACnCC,UAAU;QACV,4BAA4B;YAAEA,UAAU;QAAG;IAC7C,CAAA;AAEA,MAAMC,4BAAczB,WAAkC,CAAC0B,OAAOC;IAC5D,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,IAAI,EAAEC,WAAW,EAAW,GAAGL,OAATM,wCAASN;;;;;;IAE9D,qBACE,KAAC7B;QAAW8B,KAAKA;OAASK;kBAOxB,cAAA,MAACrB;YAAasB,SAAS;YAAQC,OAAO;WAAeL;;8BACnD,KAACvC;oBAAQ+B,UAAS;mBAAcS;8BAChC,KAACzC,qBAAW0C;8BAAcH;;;;;AAIlC;AACAH,YAAYU,WAAW,GAAG;AAO1B,OAAO,MAAMC,mBAAmBrC,uBAC9BC,WAAuC,CAAC0B,OAAOC;IAC7C,MAAM,EAAEU,IAAI,EAAET,QAAQ,EAAEK,OAAO,EAAW,GAAGP,OAATM,wCAASN;;;;;IAC7C,MAAMY,wBAAwBhC;IAC9B,MAAMiC,cAActD,SAASuD,OAAO,CAACC,GAAG,CAACJ,wBAAAA,KAAMK,GAAG;IAClD,uEAAuE;IACvE,mEAAmE;IACnE,MAAM,CAACC,UAAUC,YAAY,GAAG1C,SAAS;IACzC,MAAM2C,WAAW5C,YAAY,IAAM2C,YAAY,OAAO,EAAE;IACxD;;;;;KAKC,GACD,MAAME,YAAYrC,6BAA6B4B,wBAAAA,KAAMK,GAAG;IACxD,MAAMK,YAAY9C,YAAY;QAC5B2C,YAAY;QACZ,sEAAsE;QACtE,sEAAsE;QACtE,UAAU;QACVpC;IACF,GAAG,EAAE;IACL,qBACE,MAACb;QACCgC,KAAKA;QACLqB,IAAG;QACHC,iBAAe,EAAEZ,wBAAAA,KAAMK,GAAG;QAC1BQ,mBAAgB;QAChBC,WAAU;QACVpC,SAAS;QACTqC,uBACE,KAAC1D;YAAQ2D,aAAY;YAAWpB,SAAQ;YAAYqB,QAAQ;YAACC,IAAI;gBAAEC,SAAS;YAAI;;OAE9ExB;QACJuB,IAAI;YAAC;gBACHE,gBAAgB;gBAChBC,YAAY;gBACZrC,UAAU;gBACVsC,YAAY;gBACZC,YAAY;gBACZC,eAAe;gBAEf,yBAAyB;gBACzB/C,YAAY;gBAEZgD,cAAc;gBACd,+DAA+D;gBAC/D,6DAA6D;gBAC7D,iEAAiE;gBACjE,+DAA+D;gBAC/D,4DAA4D;gBAC5D,oDAAoD;gBACpDC,iBAAiB;gBACjB7B,OAAO;gBACP8B,IAAI;gBACJC,IAAI;gBACJC,IAAI;gBACJC,IAAI;YACN;eAAOC,MAAMC,OAAO,CAACrC,KAAKuB,EAAE,IAAIvB,KAAKuB,EAAE,GAAG;gBAACvB,KAAKuB,EAAE;aAAC;SAAE;;0BACrD,KAAC5D;gBACCwD,WAAU;gBACVI,IAAI;oBACFG,YAAY;oBACZD,gBAAgB;oBAChBpC,UAAU;gBACZ;0BACA,cAAA,KAACd;oBACC+D,SAAS,EAAEjC,wBAAAA,KAAMkC,eAAe;oBAChClC,MAAMA;oBACNhB,UAAS;;;0BAGb,MAACjB;gBAAGoE,WAAWvC,YAAY;;kCACzB,KAAC5B;kCACC,cAAA,KAACP;4BACCwE,WAAU;4BACVG,KAAK,EAAEpC,wBAAAA,KAAMqC,UAAU;4BACvBnB,IAAI;gCACFoB,cAAc;gCACdC,UAAU;gCACVC,YAAY;gCACZxD,UAAU;gCACVa,OAAO;gCACP4C,UAAU;4BACZ;sCACCzC,wBAAAA,KAAMqC,UAAU;;;kCAGrB,KAACvE;kCACC,cAAA,MAACR;4BACCwD,WAAU;4BACVpC,SAAS;4BACTwC,IAAI;gCACFE,gBAAgB;gCAChBC,YAAY;4BACd;;8CACA,KAACjC;oCACCgD,OAAM;oCACNM,kBAAkB;oCAClBlD,aAAa,aACRU;wCACHyC,SAAS,IAAM1C,sBAAsBD;;oCAEvCP,MAAM;wCAAEmD,MAAM9F,yBAAyB8F,IAAI;oCAAC;8CAE3C;;8CAEH,KAACxD;oCACCgD,OAAM;oCACNM,kBAAkB;oCAClBlD,aAAa;wCACXmD,SAAS,IAAM1C,sBAAsBD;oCACvC;oCACAP,MAAM;wCAAEmD,MAAM/F,wBAAwB+F,IAAI;oCAAC;8CAE1C;;8CAEH,KAACxD;oCACCyD,WAAU;oCACVtD,UAAU;oCACVE,MAAM;wCAAEmD,MAAM7F,gCAAgC6F,IAAI;oCAAC;oCACnDE,YAAY;oCACZC,YAAY;oCACZC,MAAM1C,YAAYG;oCAClBwC,QAAQzC;oCACR0C,SAASxC;oCACTyC,WAAW;wCACTC,QAAQ;4CACNC,eAAe;4CACf,+CAA+C;4CAC/CnC,IAAI;gDAAEoC,QAAQ,CAAC/E,QAAUA,MAAM+E,MAAM,CAACC,KAAK,GAAG;4CAAE;4CAChD;;;;;;;;;;;;;;qBAcC,GACDC,WAAW;gDACT;oDACEC,MAAM;oDACNC,SAAS;oDACTC,SAAS;wDAAEC,aAAa;wDAAMC,SAAS;oDAAE;gDAC3C;gDACA;oDACEJ,MAAM;oDACNC,SAAS;oDACTC,SAAS;wDACPG,SAAS;wDACTF,aAAa;wDACbG,QAAQ;wDACRF,SAAS;oDACX;gDACF;gDACA;oDACEJ,MAAM;oDACNC,SAAS;gDACX;6CACD;wCACH;wCACAM,SAAS;4CACP9C,IAAI;gDACF2C,SAAS;gDACTI,GAAG,CAAC;4CACN;wCACF;oCACF;oCACA7B,qBAAO,KAAC/D;wCAAgB2B,MAAMA;wCAAMkE,UAAUxD;;;;;;;;;;AAO5D,IACD;AACDX,iBAAiBD,WAAW,GAAG;AAE/B,eAAeC,iBAAgB"}
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/node-quick-actions.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 * as Besigner from '@aglyn/besigner'\nimport {\n  ICON_VARIANT_MODIFY_ADD,\n  ICON_VARIANT_MODIFY_DRAG,\n  ICON_VARIANT_SHOW_MORE_VERTICAL,\n} from '@aglyn/shared-data-enums'\nimport { SrOnly, SrOnlyProps } from '@aglyn/shared-ui-jsx'\nimport { MdiIcon, MdiIconProps } from '@aglyn/shared-ui-jsx'\nimport { styled } from '@aglyn/shared-ui-theme'\nimport {\n  Button as MuiButton,\n  type ButtonProps,\n  ClickAwayListener,\n  Divider,\n  Stack,\n  type StackProps,\n  Tooltip as MuiTooltip,\n  TooltipProps,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { forwardRef, useCallback, useState } from 'react'\nimport { Else, If, Then } from 'react-if'\nimport useAddElementDrawerCallback from '../hooks/use-add-element-drawer-callback'\nimport ComponentIconComponent from './component-icon.component'\nimport {\n  clearCanvasContextMenu,\n  isCanvasContextMenuRequested,\n} from '../utils/canvas-context-menu'\nimport NodeContextMenu from './node-context-menu'\n\ninterface LabelActionProps extends Omit<TooltipProps, 'children'> {\n  children?: JSX.Children\n  icon: MdiIconProps\n  ButtonProps?: ButtonProps\n  SrOnlyProps?: SrOnlyProps\n}\n\nconst ActionButton = styled(MuiButton)(({ theme }) => ({\n  borderRadius: `0.2em`,\n  marginLeft: theme.spacing(-0.2),\n  pointerEvent: 'unset',\n  paddingTop: theme.spacing(0.1),\n  paddingBottom: theme.spacing(0.1),\n  paddingRight: theme.spacing(0.15),\n  paddingLeft: theme.spacing(0.15),\n  fontSize: theme.typography.pxToRem(16),\n  minWidth: 20,\n  '&.MuiButtonGroup-grouped': { minWidth: 25 },\n  // A fingertip needs a target several times the size a cursor does; the\n  // strip grows with its buttons, so nothing else has to know.\n  '@media (pointer: coarse)': {\n    minWidth: 32,\n    minHeight: 32,\n    fontSize: theme.typography.pxToRem(20),\n  },\n}))\n\nconst LabelAction = forwardRef<any, LabelActionProps>((props, ref) => {\n  const { children, ButtonProps, icon, SrOnlyProps, ...rest } = props\n\n  return (\n    <MuiTooltip ref={ref} {...rest}>\n      {/* Chrome, not accent (AGL-1186), and now transparent on the slate\n          strip rather than a contained pill on it (AGL-1194): a contained\n          tertiary button on a tertiary bar would be invisible, and the\n          pills were the reason the bar carried two hues at once. `inherit`\n          takes the strip's ink, so contrast is a pairing rather than a\n          guess in either scheme. */}\n      <ActionButton variant={'text'} color={'inherit'} {...ButtonProps}>\n        <MdiIcon fontSize=\"inherit\" {...icon} />\n        <SrOnly {...SrOnlyProps}>{children}</SrOnly>\n      </ActionButton>\n    </MuiTooltip>\n  )\n})\nLabelAction.displayName = 'AglynLabelAction'\n\nexport interface NodeQuickActionsProps extends StackProps {\n  node: Aglyn.NodeSchema\n  variant?: 'label' | 'actions'\n}\n\nexport const NodeQuickActions = observer(\n  forwardRef<any, NodeQuickActionsProps>((props, ref) => {\n    const { node, children, variant, ...rest } = props\n    const handleAddElementClick = useAddElementDrawerCallback()\n    const handleProps = Besigner.handles.get(node?.$id)\n    // Controlled so menu actions can dismiss the tooltip — an uncontrolled\n    // tooltip stays open behind (or above) dialogs its actions launch.\n    const [moreOpen, setMoreOpen] = useState(false)\n    /**\n     * Right-click on the canvas opens this menu (AGL-1405). The leaf records\n     * the request and selects the node, which is what mounts this overlay —\n     * so the request is read on the first render rather than needing the\n     * component to already exist when the click happened.\n     */\n    const requested = isCanvasContextMenuRequested(node?.$id)\n    const closeMore = useCallback(() => {\n      setMoreOpen(false)\n      // Unconditionally: a request left standing re-opens the menu the next\n      // time this node's overlay mounts, which reads as the menu opening by\n      // itself.\n      clearCanvasContextMenu()\n    }, [])\n    const menuShown = moreOpen || requested\n    // The dots are a menu button: a click or tap opens the menu and the next\n    // one closes it. A menu that also opened on hover could not be closed\n    // by clicking, since the hover had already opened it under the cursor.\n    const toggleMore = useCallback(() => {\n      if (menuShown) closeMore()\n      else setMoreOpen(true)\n    }, [menuShown, closeMore])\n    // Beside the strip there is no room on a phone: a 240px menu to the\n    // right of an element runs off the screen. Below it, the popper slides\n    // it sideways into the window instead.\n    const theme = useTheme()\n    const phone = useMediaQuery(theme.breakpoints.down('sm'), { noSsr: true })\n    return (\n      // A click or tap anywhere else closes the menu as well.\n      <ClickAwayListener onClickAway={() => menuShown && closeMore()}>\n        <Stack\n          ref={ref}\n          id=\"aglyn:element-overlay-label\"\n          data-aglyn-node={node?.$id}\n          data-aglyn-kind=\"overlay-label\"\n          direction=\"row\"\n          spacing={0.35}\n          divider={\n            <Divider orientation=\"vertical\" variant=\"fullWidth\" flexItem sx={{ opacity: 0.5 }} />\n          }\n          {...rest}\n          sx={[{\n            justifyContent: \"flex-start\",\n            alignItems: \"center\",\n            fontSize: 12,\n            lineHeight: 1,\n            fontWeight: 600,\n            letterSpacing: 0.25,\n\n            // pointerEvents: 'none',\n            marginLeft: '-2px',\n\n            marginBottom: '1px',\n            // One slate surface for the whole floating control (AGL-1194).\n            // The strip was `primary.light` while the buttons on it were\n            // `tertiary` — two chrome hues on one control, and an ink colour\n            // paired with a background it no longer sat on. Ink is now the\n            // contrastText OF THIS background, so it follows the scheme\n            // instead of being picked once against the old one.\n            backgroundColor: 'tertiary.main',\n            color: 'tertiary.contrastText',\n            px: 0.5,\n            pl: 0.5,\n            pr: 0.25,\n            py: 0.35\n          }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}>\n          <Stack\n            direction=\"column\"\n            sx={{\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              fontSize: 12\n            }}>\n            <ComponentIconComponent\n              component={node?.componentSchema}\n              node={node}\n              fontSize=\"inherit\"\n            />\n          </Stack>\n          <If condition={variant !== 'actions'}>\n            <Then>\n              <Typography\n                component=\"div\"\n                title={node?.labelShort}\n                sx={{\n                  textOverflow: \"ellipsis\",\n                  overflow: \"hidden\",\n                  whiteSpace: \"nowrap\",\n                  fontSize: \"inherit\",\n                  color: \"inherit\",\n                  maxWidth: 100\n                }}>\n                {node?.labelShort}\n              </Typography>\n            </Then>\n            <Else>\n              <Stack\n                direction=\"row\"\n                spacing={0.25}\n                sx={{\n                  justifyContent: \"flex-start\",\n                  alignItems: \"center\"\n                }}>\n                {/* The grip only drags. Touch never opens its tooltip: holding\n                    the grip is how a drag starts there, and a label popping\n                    up under the finger would cover the drop. */}\n                <LabelAction\n                  title=\"move\"\n                  disableInteractive\n                  disableTouchListener\n                  ButtonProps={handleProps}\n                  icon={{ path: ICON_VARIANT_MODIFY_DRAG.path }}\n                >\n                  {'move'}\n                </LabelAction>\n                <LabelAction\n                  title=\"Add\"\n                  disableInteractive\n                  disableTouchListener\n                  ButtonProps={{\n                    onClick: () => handleAddElementClick(node),\n                  }}\n                  icon={{ path: ICON_VARIANT_MODIFY_ADD.path }}\n                >\n                  {'add'}\n                </LabelAction>\n                <LabelAction\n                  placement={phone ? 'bottom' : 'right'}\n                  children={'more'}\n                  icon={{ path: ICON_VARIANT_SHOW_MORE_VERTICAL.path }}\n                  open={menuShown}\n                  onClose={closeMore}\n                  // Only the button decides when the menu opens. Hover and\n                  // focus would open it on the way past, and MUI's touch\n                  // path would close it 1.5 s after the finger lifts.\n                  disableHoverListener\n                  disableFocusListener\n                  disableTouchListener\n                  ButtonProps={{\n                    onClick: toggleMore,\n                    'aria-haspopup': 'menu',\n                    'aria-expanded': menuShown,\n                  }}\n                  slotProps={{\n                    popper: {\n                      disablePortal: false,\n                      // Below dialogs/drawers the menu actions open.\n                      sx: { zIndex: (theme) => theme.zIndex.modal - 1 },\n                      /**\n                       * Kept inside the WINDOW, not the document (AGL-1405).\n                       * `rootBoundary: 'document'` let the menu be placed\n                       * below the fold — the document is as tall as whatever\n                       * you put in it, so nothing ever \"overflowed\" it — and\n                       * the page grew a scrollbar around the menu, which moves\n                       * the editor's own chrome under the reader. The Paper\n                       * caps its height and scrolls, so a menu taller than the\n                       * window is still fully reachable.\n                       *\n                       * The 100px padding went with it: it was reserving a\n                       * margin against a boundary that was never binding, and\n                       * against the real one it would refuse placements that\n                       * fit perfectly well.\n                       */\n                      modifiers: [\n                        {\n                          name: 'flip',\n                          enabled: true,\n                          options: { altBoundary: true, padding: 8 },\n                        },\n                        {\n                          name: 'preventOverflow',\n                          enabled: true,\n                          options: {\n                            altAxis: true,\n                            altBoundary: true,\n                            tether: false,\n                            padding: 8,\n                          },\n                        },\n                        {\n                          name: 'arrow',\n                          enabled: true,\n                        },\n                      ],\n                    },\n                    tooltip: {\n                      sx: {\n                        padding: 0,\n                        m: -2,\n                      },\n                    },\n                  }}\n                  title={<NodeContextMenu node={node} onAction={closeMore} />}\n                />\n              </Stack>\n            </Else>\n          </If>\n        </Stack>\n      </ClickAwayListener>\n    );\n  }),\n)\nNodeQuickActions.displayName = 'NodeQuickActions'\n\nexport default NodeQuickActions\n"],"names":["Besigner","ICON_VARIANT_MODIFY_ADD","ICON_VARIANT_MODIFY_DRAG","ICON_VARIANT_SHOW_MORE_VERTICAL","SrOnly","MdiIcon","styled","Button","MuiButton","ClickAwayListener","Divider","Stack","Tooltip","MuiTooltip","Typography","useMediaQuery","useTheme","observer","forwardRef","useCallback","useState","Else","If","Then","useAddElementDrawerCallback","ComponentIconComponent","clearCanvasContextMenu","isCanvasContextMenuRequested","NodeContextMenu","ActionButton","theme","borderRadius","marginLeft","spacing","pointerEvent","paddingTop","paddingBottom","paddingRight","paddingLeft","fontSize","typography","pxToRem","minWidth","minHeight","LabelAction","props","ref","children","ButtonProps","icon","SrOnlyProps","rest","variant","color","displayName","NodeQuickActions","node","handleAddElementClick","handleProps","handles","get","$id","moreOpen","setMoreOpen","requested","closeMore","menuShown","toggleMore","phone","breakpoints","down","noSsr","onClickAway","id","data-aglyn-node","data-aglyn-kind","direction","divider","orientation","flexItem","sx","opacity","justifyContent","alignItems","lineHeight","fontWeight","letterSpacing","marginBottom","backgroundColor","px","pl","pr","py","Array","isArray","component","componentSchema","condition","title","labelShort","textOverflow","overflow","whiteSpace","maxWidth","disableInteractive","disableTouchListener","path","onClick","placement","open","onClose","disableHoverListener","disableFocusListener","slotProps","popper","disablePortal","zIndex","modal","modifiers","name","enabled","options","altBoundary","padding","altAxis","tether","tooltip","m","onAction"],"mappings":"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"}

package/src/lib/components/node-tree-view.js

@@ -75,7 +75,12 @@ const TreeView = styled(MuiList)(({ theme })=>({
                 borderTopLeftRadius: 4,
                 borderBottomLeftRadius: 4,
                 [`& .${classKey.dragHandle}, & .${classKey.moreButton}`]: {
-                    visibility: 'hidden'
+                    visibility: 'hidden',
+                    // No hover on a touch screen to reveal them, and a hidden grip
+                    // cannot be touched: there every row carries both.
+                    '@media (hover: none)': {
+                        visibility: 'visible'
+                    }
                 },
                 // An open menu keeps its own button on screen — the pointer has left
                 // the row to reach the menu, so the hover rule no longer holds it.
@@ -582,6 +587,11 @@ const NodeTreeItem = observer(/*#__PURE__*/ forwardRef((props, ref)=>{
                                 },
                                 [`.${classKey.treeListItem}:hover &`]: {
                                     opacity: 1
+                                },
+                                // No hover on a touch screen, so nothing would ever reveal
+                                // it: there the eye shows on every row, quietly.
+                                '@media (hover: none)': {
+                                    opacity: authorHidden ? 1 : 0.6
                                 }
                             },
                             children: /*#__PURE__*/ _jsx(MdiIcon, {