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

package/src/lib/components/measured-figures.component.js

@@ -0,0 +1,161 @@
+/**
+ * @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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * THE THREE WAYS A MEASURED NUMBER IS ALLOWED TO REACH A SCREEN.
+ *
+ * Every reporting surface in this product renders the same three things — a
+ * titled block, a count, and a rate — and each carries a rule that is easy to
+ * state and easy to lose:
+ *
+ *  - **A count that is `null` draws a dash, never a zero.** "We have no
+ *    record of this" and "this happened zero times" lead a reader to opposite
+ *    conclusions, and a zero renders the first as the second.
+ *  - **A rate prints its denominator on the same line as its percentage.**
+ *    An open rate over `sent` and one over `delivered` are different numbers
+ *    sharing a label; a reader comparing two rates must be able to see they
+ *    are over different populations without hovering anything. The same
+ *    ambiguity exists wherever a rate is quoted — a form's lead rate over
+ *    submissions and over submissions that carried an address differ by
+ *    however many people declined to give one.
+ *  - **A rate that cannot be divided draws a dash and no number.** There is
+ *    no branch here that substitutes a denominator to get something
+ *    printable.
+ *
+ * They live in one module because a second copy is a second chance to render
+ * a percentage without its denominator — and the copy would be written by
+ * whoever adds the next card, in a file nobody tests for it. The email
+ * plugin's `report-figures` re-exports these rather than keeping its own,
+ * which is what stopped the console's forms surface from becoming that copy.
+ */ import { Stack, Typography } from "@mui/material";
+/**
+ * A rate, or `null` when one cannot honestly be taken.
+ *
+ * `null` on a zero or unrecorded denominator. Those are not the same as 0%:
+ * a rate over nothing is undefined, and printing it as zero states a measured
+ * failure where there was no measurement.
+ */ export function measuredRate(numerator, denominator, denominatorLabel) {
+    if (numerator == null || denominator == null) return null;
+    const top = Number(numerator);
+    const bottom = Number(denominator);
+    if (!Number.isFinite(top) || !Number.isFinite(bottom) || bottom <= 0) {
+        return null;
+    }
+    return {
+        value: top / bottom,
+        numerator: top,
+        denominator: bottom,
+        denominatorLabel
+    };
+}
+/** A titled block. */ export function Section(props) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "overline",
+                color: "text.secondary",
+                children: props.title
+            }),
+            props.children
+        ]
+    });
+}
+Section.displayName = 'Section';
+/**
+ * One count, with the population it describes named underneath.
+ *
+ * `null` renders as an em dash and NOT as zero, which is the whole reason
+ * this takes `number | null` rather than defaulting.
+ */ export function Figure(props) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            minWidth: 140
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h6",
+                children: props.value === null ? '—' : props.value.toLocaleString()
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                children: props.label
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: props.value === null ? 'not recorded' : props.note
+            })
+        ]
+    });
+}
+Figure.displayName = 'Figure';
+/** A percentage to one decimal place. */ export function percent(value) {
+    return `${(value * 100).toFixed(1)}%`;
+}
+/**
+ * One rate, with its denominator spelled out on the same line.
+ *
+ * The denominator is rendered as `12 of 480 delivered` rather than as a
+ * tooltip or a footnote, because a reader comparing two rates has to be able
+ * to see they are over different populations without hovering anything. A
+ * `null` rate draws the dash and no number at all.
+ */ export function RateRow(props) {
+    const { label, rate } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 2,
+        sx: {
+            justifyContent: 'space-between',
+            alignItems: 'baseline'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                children: label
+            }),
+            rate ? /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'baseline'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        sx: {
+                            fontWeight: 'bold'
+                        },
+                        children: percent(rate.value)
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: `${rate.numerator.toLocaleString()} of ${rate.denominator.toLocaleString()} ${rate.denominatorLabel}`
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: '— not enough recorded to compute'
+            })
+        ]
+    });
+}
+RateRow.displayName = 'RateRow';
+
+//# sourceMappingURL=measured-figures.component.js.map

package/src/lib/components/measured-figures.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/measured-figures.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\n/**\n * THE THREE WAYS A MEASURED NUMBER IS ALLOWED TO REACH A SCREEN.\n *\n * Every reporting surface in this product renders the same three things — a\n * titled block, a count, and a rate — and each carries a rule that is easy to\n * state and easy to lose:\n *\n *  - **A count that is `null` draws a dash, never a zero.** \"We have no\n *    record of this\" and \"this happened zero times\" lead a reader to opposite\n *    conclusions, and a zero renders the first as the second.\n *  - **A rate prints its denominator on the same line as its percentage.**\n *    An open rate over `sent` and one over `delivered` are different numbers\n *    sharing a label; a reader comparing two rates must be able to see they\n *    are over different populations without hovering anything. The same\n *    ambiguity exists wherever a rate is quoted — a form's lead rate over\n *    submissions and over submissions that carried an address differ by\n *    however many people declined to give one.\n *  - **A rate that cannot be divided draws a dash and no number.** There is\n *    no branch here that substitutes a denominator to get something\n *    printable.\n *\n * They live in one module because a second copy is a second chance to render\n * a percentage without its denominator — and the copy would be written by\n * whoever adds the next card, in a file nobody tests for it. The email\n * plugin's `report-figures` re-exports these rather than keeping its own,\n * which is what stopped the console's forms surface from becoming that copy.\n */\n\nimport { Stack, Typography } from '@mui/material'\nimport type { ReactNode } from 'react'\n\n/**\n * A rate, together with everything needed to say what it is a rate OF.\n *\n * The producer decides whether a rate can honestly be taken; a `null` in\n * place of one of these is how it says no. Nothing here formats — `value` is\n * 0–1 and the display multiplies — so a model can be tested on the number\n * without a renderer, and this file cannot invent a denominator.\n */\nexport interface MeasuredRate {\n  /** 0–1. Multiply for display; a producer never formats. */\n  value: number\n  numerator: number\n  denominator: number\n  /** Reader-facing name of the denominator, e.g. `'delivered'`. */\n  denominatorLabel: string\n}\n\n/**\n * A rate, or `null` when one cannot honestly be taken.\n *\n * `null` on a zero or unrecorded denominator. Those are not the same as 0%:\n * a rate over nothing is undefined, and printing it as zero states a measured\n * failure where there was no measurement.\n */\nexport function measuredRate(\n  numerator: number | null | undefined,\n  denominator: number | null | undefined,\n  denominatorLabel: string,\n): MeasuredRate | null {\n  if (numerator == null || denominator == null) return null\n  const top = Number(numerator)\n  const bottom = Number(denominator)\n  if (!Number.isFinite(top) || !Number.isFinite(bottom) || bottom <= 0) {\n    return null\n  }\n  return { value: top / bottom, numerator: top, denominator: bottom, denominatorLabel }\n}\n\n/** A titled block. */\nexport function Section(props: { title: string; children: ReactNode }) {\n  return (\n    <Stack spacing={1}>\n      <Typography variant=\"overline\" color=\"text.secondary\">\n        {props.title}\n      </Typography>\n      {props.children}\n    </Stack>\n  )\n}\nSection.displayName = 'Section'\n\n/**\n * One count, with the population it describes named underneath.\n *\n * `null` renders as an em dash and NOT as zero, which is the whole reason\n * this takes `number | null` rather than defaulting.\n */\nexport function Figure(props: {\n  label: string\n  value: number | null\n  note: string\n}) {\n  return (\n    <Stack sx={{ minWidth: 140 }}>\n      <Typography variant=\"h6\">\n        {props.value === null ? '—' : props.value.toLocaleString()}\n      </Typography>\n      <Typography variant=\"body2\">{props.label}</Typography>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        {props.value === null ? 'not recorded' : props.note}\n      </Typography>\n    </Stack>\n  )\n}\nFigure.displayName = 'Figure'\n\n/** A percentage to one decimal place. */\nexport function percent(value: number): string {\n  return `${(value * 100).toFixed(1)}%`\n}\n\n/**\n * One rate, with its denominator spelled out on the same line.\n *\n * The denominator is rendered as `12 of 480 delivered` rather than as a\n * tooltip or a footnote, because a reader comparing two rates has to be able\n * to see they are over different populations without hovering anything. A\n * `null` rate draws the dash and no number at all.\n */\nexport function RateRow(props: { label: string; rate: MeasuredRate | null }) {\n  const { label, rate } = props\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={2}\n      sx={{ justifyContent: 'space-between', alignItems: 'baseline' }}\n    >\n      <Typography variant=\"body2\">{label}</Typography>\n      {rate ? (\n        <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'baseline' }}>\n          <Typography variant=\"body2\" sx={{ fontWeight: 'bold' }}>\n            {percent(rate.value)}\n          </Typography>\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            {`${rate.numerator.toLocaleString()} of ${rate.denominator.toLocaleString()} ${rate.denominatorLabel}`}\n          </Typography>\n        </Stack>\n      ) : (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {'— not enough recorded to compute'}\n        </Typography>\n      )}\n    </Stack>\n  )\n}\nRateRow.displayName = 'RateRow'\n"],"names":["Stack","Typography","measuredRate","numerator","denominator","denominatorLabel","top","Number","bottom","isFinite","value","Section","props","spacing","variant","color","title","children","displayName","Figure","sx","minWidth","toLocaleString","label","note","percent","toFixed","RateRow","rate","direction","justifyContent","alignItems","fontWeight"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GAED,SAASA,KAAK,EAAEC,UAAU,QAAQ,gBAAe;AAoBjD;;;;;;CAMC,GACD,OAAO,SAASC,aACdC,SAAoC,EACpCC,WAAsC,EACtCC,gBAAwB;IAExB,IAAIF,aAAa,QAAQC,eAAe,MAAM,OAAO;IACrD,MAAME,MAAMC,OAAOJ;IACnB,MAAMK,SAASD,OAAOH;IACtB,IAAI,CAACG,OAAOE,QAAQ,CAACH,QAAQ,CAACC,OAAOE,QAAQ,CAACD,WAAWA,UAAU,GAAG;QACpE,OAAO;IACT;IACA,OAAO;QAAEE,OAAOJ,MAAME;QAAQL,WAAWG;QAAKF,aAAaI;QAAQH;IAAiB;AACtF;AAEA,oBAAoB,GACpB,OAAO,SAASM,QAAQC,KAA6C;IACnE,qBACE,MAACZ;QAAMa,SAAS;;0BACd,KAACZ;gBAAWa,SAAQ;gBAAWC,OAAM;0BAClCH,MAAMI,KAAK;;YAEbJ,MAAMK,QAAQ;;;AAGrB;AACAN,QAAQO,WAAW,GAAG;AAEtB;;;;;CAKC,GACD,OAAO,SAASC,OAAOP,KAItB;IACC,qBACE,MAACZ;QAAMoB,IAAI;YAAEC,UAAU;QAAI;;0BACzB,KAACpB;gBAAWa,SAAQ;0BACjBF,MAAMF,KAAK,KAAK,OAAO,MAAME,MAAMF,KAAK,CAACY,cAAc;;0BAE1D,KAACrB;gBAAWa,SAAQ;0BAASF,MAAMW,KAAK;;0BACxC,KAACtB;gBAAWa,SAAQ;gBAAUC,OAAM;0BACjCH,MAAMF,KAAK,KAAK,OAAO,iBAAiBE,MAAMY,IAAI;;;;AAI3D;AACAL,OAAOD,WAAW,GAAG;AAErB,uCAAuC,GACvC,OAAO,SAASO,QAAQf,KAAa;IACnC,OAAO,GAAG,AAACA,CAAAA,QAAQ,GAAE,EAAGgB,OAAO,CAAC,GAAG,CAAC,CAAC;AACvC;AAEA;;;;;;;CAOC,GACD,OAAO,SAASC,QAAQf,KAAmD;IACzE,MAAM,EAAEW,KAAK,EAAEK,IAAI,EAAE,GAAGhB;IACxB,qBACE,MAACZ;QACC6B,WAAU;QACVhB,SAAS;QACTO,IAAI;YAAEU,gBAAgB;YAAiBC,YAAY;QAAW;;0BAE9D,KAAC9B;gBAAWa,SAAQ;0BAASS;;YAC5BK,qBACC,MAAC5B;gBAAM6B,WAAU;gBAAMhB,SAAS;gBAAGO,IAAI;oBAAEW,YAAY;gBAAW;;kCAC9D,KAAC9B;wBAAWa,SAAQ;wBAAQM,IAAI;4BAAEY,YAAY;wBAAO;kCAClDP,QAAQG,KAAKlB,KAAK;;kCAErB,KAACT;wBAAWa,SAAQ;wBAAUC,OAAM;kCACjC,GAAGa,KAAKzB,SAAS,CAACmB,cAAc,GAAG,IAAI,EAAEM,KAAKxB,WAAW,CAACkB,cAAc,GAAG,CAAC,EAAEM,KAAKvB,gBAAgB,EAAE;;;+BAI1G,KAACJ;gBAAWa,SAAQ;gBAAUC,OAAM;0BACjC;;;;AAKX;AACAY,QAAQT,WAAW,GAAG"}

package/src/lib/components/menu.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @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 MdiIconProps } from './mdi-icon/mdi-icon';
+import { type BoxProps as MuiBoxProps, type DividerProps, type ListItemIconProps as MuiListItemIconProps, type ListItemTextProps as MuiListItemTextProps, type ListSubheaderProps as MuiListSubheaderProps, type MenuItemProps as MuiMenuItemProps, type MenuProps as MuiMenuProps, type TypographyProps as MuiTypographyProps } from '@mui/material';
+import { type ReactElement } from 'react';
+type ItemTypes = 'item' | 'divider' | 'subheader' | undefined | never;
+type ItemTypeProps = MuiMenuItemProps & {
+    type?: 'item';
+    icon?: MdiIconProps;
+    endIcon?: MdiIconProps;
+    ListItemTextProps?: Partial<MuiListItemTextProps>;
+    ListItemIconProps?: Partial<MuiListItemIconProps>;
+    EndIconTypographyProps?: Partial<MuiTypographyProps>;
+};
+type DividerTypeProps = DividerProps & {
+    type: 'divider';
+};
+type SubheaderTypeProps = MuiListSubheaderProps & {
+    type: 'subheader';
+};
+export type MenuItemProps<T extends ItemTypes = ItemTypes> = JSX.OverrideableComponentProps & Conditional<T, 'divider', DividerTypeProps, Conditional<T, 'subheader', SubheaderTypeProps, Conditional<T, 'item' | undefined | never, ItemTypeProps, ItemTypeProps>>>;
+export interface MenuProps extends MuiBoxProps {
+    items: MenuItemProps[];
+    context?: boolean;
+    dense?: boolean;
+    MenuProps?: Partial<MuiMenuProps>;
+    children: ReactElement;
+    horizontalOrigin?: MuiMenuProps['anchorOrigin']['horizontal'];
+}
+export declare const Menu: import("react").ForwardRefExoticComponent<Omit<MenuProps, "ref"> & import("react").RefAttributes<any>>;
+export default Menu;

package/src/lib/components/menu.js

@@ -0,0 +1,229 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { MdiIcon } from "./mdi-icon/mdi-icon.js";
+import { mergeSxProps } from "@aglyn/shared-ui-theme";
+import { Box, Divider, ListItemIcon, ListItemText, ListSubheader as MuiListSubheader, Menu as MuiMenu, MenuItem as MuiMenuItem, Typography } from "@mui/material";
+import { Children, cloneElement, forwardRef, useCallback, useState } from "react";
+const ITEM_HEIGHT = 48;
+const defaultState = {
+    anchorEl: null,
+    mouseX: null,
+    mouseY: null
+};
+export const Menu = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _ref;
+    var _child_props_onClick, _child_props;
+    const { children, items = [], context, className, sx, dense, MenuProps, horizontalOrigin } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "items",
+        "context",
+        "className",
+        "sx",
+        "dense",
+        "MenuProps",
+        "horizontalOrigin"
+    ]);
+    const [state, setState] = useState(defaultState);
+    // One left edge per menu (AGL-1216): if any row has an icon, the rows
+    // that do not get an empty gutter of the same width instead of collapsing
+    // against the item padding.
+    const hasAnyIcon = items.some((entry)=>{
+        var _entry_icon;
+        return entry == null ? void 0 : (_entry_icon = entry.icon) == null ? void 0 : _entry_icon.path;
+    });
+    const child = Children.only(children);
+    const onChildClick = (_child_props = child.props) == null ? void 0 : (_child_props_onClick = _child_props.onClick) == null ? void 0 : _child_props_onClick.bind(null);
+    const handleClose = ()=>setState(defaultState);
+    const handleClick = useCallback((event)=>{
+        if (onChildClick) {
+            onChildClick.call(null, event);
+        }
+        if (context) {
+            event.preventDefault();
+        }
+        setState({
+            anchorEl: event.currentTarget,
+            mouseX: event.clientX - 2,
+            mouseY: event.clientY - 4
+        });
+    }, [
+        context,
+        onChildClick
+    ]);
+    const open = Boolean(state.anchorEl || state.mouseY);
+    const cloned = /*#__PURE__*/ cloneElement(child, {
+        onClick: handleClick,
+        'aria-expanded': open ? 'true' : 'false'
+    });
+    // MUI v9: PaperProps → slotProps.paper. Accept both for backward compat.
+    const _ref1 = MenuProps || {}, { PaperProps: legacyPaperProps, slotProps: menuSlotProps } = _ref1, menuProps = _object_without_properties_loose(_ref1, [
+        "PaperProps",
+        "slotProps"
+    ]);
+    const resolvedPaperProps = (_ref = legacyPaperProps != null ? legacyPaperProps : menuSlotProps == null ? void 0 : menuSlotProps.paper) != null ? _ref : {};
+    const { sx: paperSx } = resolvedPaperProps, paperProps = _object_without_properties_loose(resolvedPaperProps, [
+        "sx"
+    ]);
+    const arrowPlacement = horizontalOrigin === 'right' ? {
+        right: 14
+    } : horizontalOrigin === 'center' ? {
+        right: 'auto',
+        left: 'auto'
+    } : {
+        left: 14
+    };
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref,
+        component: 'div',
+        onContextMenu: context && handleClick,
+        sx: mergeSxProps(context && {
+            cursor: 'context-menu'
+        }, sx)
+    }, rest, {
+        children: [
+            cloned,
+            /*#__PURE__*/ _jsx(MuiMenu, _extends({
+                anchorEl: context ? undefined : state.anchorEl,
+                anchorReference: context ? 'anchorPosition' : undefined,
+                anchorPosition: !context || !state.mouseY ? undefined : {
+                    top: state.mouseY,
+                    left: state.mouseX
+                },
+                anchorOrigin: context ? undefined : {
+                    vertical: 'bottom',
+                    horizontal: horizontalOrigin || 'left'
+                },
+                transformOrigin: context ? undefined : {
+                    vertical: 'top',
+                    horizontal: horizontalOrigin || 'left'
+                },
+                slotProps: {
+                    paper: context ? undefined : _extends({
+                        elevation: 0,
+                        sx: mergeSxProps({
+                            maxHeight: ITEM_HEIGHT * 4.5,
+                            width: '30ch',
+                            filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                            backgroundColor: 'surface.main',
+                            marginTop: 0.5,
+                            '&:before': _extends({
+                                content: '""',
+                                display: 'block',
+                                position: 'absolute',
+                                top: 0,
+                                width: 10,
+                                height: 10,
+                                bgcolor: 'surface.main',
+                                transform: 'translateY(-50%) rotate(45deg)',
+                                zIndex: 0
+                            }, arrowPlacement)
+                        }, paperSx)
+                    }, paperProps)
+                },
+                // getContentAnchorEl={null}
+                open: open,
+                onClose: handleClose
+            }, menuProps, {
+                children: items.map((_0, _1)=>{
+                    let _ref = [
+                        _0,
+                        _1
+                    ], [_ref1, ..._rest] = _ref, { onClick, children, type, icon, endIcon, ListItemTextProps, ListItemIconProps, EndIconTypographyProps, key: keyProp } = _ref1, item = _object_without_properties_loose(_ref1, [
+                        "onClick",
+                        "children",
+                        "type",
+                        "icon",
+                        "endIcon",
+                        "ListItemTextProps",
+                        "ListItemIconProps",
+                        "EndIconTypographyProps",
+                        "key"
+                    ]), [i] = _rest;
+                    var _ref2;
+                    const key = (_ref2 = keyProp != null ? keyProp : item.id) != null ? _ref2 : i;
+                    switch(type){
+                        case 'subheader':
+                            return /*#__PURE__*/ _jsx(MuiListSubheader, _extends({
+                                onClick: onClick
+                            }, item, {
+                                children: children
+                            }), key);
+                        case 'divider':
+                            return /*#__PURE__*/ _jsx(Divider, _extends({
+                                onClick: onClick
+                            }, item, {
+                                children: children
+                            }), key);
+                        case 'item':
+                        default:
+                            return /*#__PURE__*/ _jsxs(MuiMenuItem, _extends({
+                                dense: dense,
+                                onClick: (e)=>{
+                                    handleClose();
+                                    onClick && onClick(e);
+                                }
+                            }, item, {
+                                children: [
+                                    (icon == null ? void 0 : icon.path) ? /*#__PURE__*/ _jsx(ListItemIcon, _extends({}, ListItemIconProps, {
+                                        children: /*#__PURE__*/ _jsx(MdiIcon, _extends({
+                                            fontSize: "small"
+                                        }, icon))
+                                    })) : hasAnyIcon ? // Reserve the icon gutter so every label in the menu
+                                    // shares one left edge (AGL-1216). Iconless rows used
+                                    // to render no gutter at all, and callers compensated
+                                    // with `ListItemText inset` — but MUI's inset is 56px
+                                    // while a dense ListItemIcon reserves 36px, so a menu
+                                    // mixing icon rows, inset rows and bare rows showed
+                                    // THREE different left edges.
+                                    /*#__PURE__*/ _jsx(ListItemIcon, _extends({}, ListItemIconProps)) : null,
+                                    /*#__PURE__*/ _jsx(ListItemText, _extends({}, ListItemTextProps, {
+                                        // The spacer above already provides the alignment
+                                        // `inset` was standing in for; letting both apply
+                                        // would double-indent every existing caller.
+                                        inset: hasAnyIcon ? false : ListItemTextProps == null ? void 0 : ListItemTextProps.inset,
+                                        children: children
+                                    })),
+                                    !(endIcon == null ? void 0 : endIcon.path) || !endIcon ? null : /*#__PURE__*/ _jsx(Typography, _extends({
+                                        variant: "body2"
+                                    }, EndIconTypographyProps, {
+                                        sx: [
+                                            {
+                                                color: "text.secondary"
+                                            },
+                                            ...Array.isArray(EndIconTypographyProps == null ? void 0 : EndIconTypographyProps.sx) ? EndIconTypographyProps.sx : [
+                                                EndIconTypographyProps == null ? void 0 : EndIconTypographyProps.sx
+                                            ]
+                                        ],
+                                        children: !(endIcon == null ? void 0 : endIcon.path) ? endIcon : /*#__PURE__*/ _jsx(MdiIcon, _extends({
+                                            fontSize: "small"
+                                        }, endIcon))
+                                    }))
+                                ]
+                            }), key);
+                    }
+                })
+            }))
+        ]
+    }));
+});
+Menu.displayName = 'Menu';
+Menu.aglyn = true;
+export default Menu;
+
+//# sourceMappingURL=menu.js.map

package/src/lib/components/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/menu.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 { MdiIcon, type MdiIconProps } from './mdi-icon/mdi-icon'\nimport { mergeSxProps } from '@aglyn/shared-ui-theme'\nimport {\n  Box,\n  type BoxProps as MuiBoxProps,\n  Divider,\n  type DividerProps,\n  ListItemIcon,\n  type ListItemIconProps as MuiListItemIconProps,\n  ListItemText,\n  type ListItemTextProps as MuiListItemTextProps,\n  ListSubheader as MuiListSubheader,\n  type ListSubheaderProps as MuiListSubheaderProps,\n  Menu as MuiMenu,\n  MenuItem as MuiMenuItem,\n  type MenuItemProps as MuiMenuItemProps,\n  type MenuProps as MuiMenuProps,\n  Typography,\n  type TypographyProps as MuiTypographyProps,\n} from '@mui/material'\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type MouseEvent,\n  type MouseEventHandler,\n  type ReactElement,\n  useCallback,\n  useState,\n} from 'react'\n\nconst ITEM_HEIGHT = 48\nconst defaultState: { anchorEl: Element; mouseX: number; mouseY: number } = {\n  anchorEl: null,\n  mouseX: null,\n  mouseY: null,\n}\n\ntype ItemTypes = 'item' | 'divider' | 'subheader' | undefined | never\ntype ItemTypeProps = MuiMenuItemProps & {\n  type?: 'item'\n  icon?: MdiIconProps\n  endIcon?: MdiIconProps\n  ListItemTextProps?: Partial<MuiListItemTextProps>\n  ListItemIconProps?: Partial<MuiListItemIconProps>\n  EndIconTypographyProps?: Partial<MuiTypographyProps>\n}\ntype DividerTypeProps = DividerProps & { type: 'divider' }\ntype SubheaderTypeProps = MuiListSubheaderProps & { type: 'subheader' }\n\nexport type MenuItemProps<T extends ItemTypes = ItemTypes> =\n  JSX.OverrideableComponentProps &\n    Conditional<\n      T,\n      'divider',\n      DividerTypeProps,\n      Conditional<\n        T,\n        'subheader',\n        SubheaderTypeProps,\n        Conditional<T, 'item' | undefined | never, ItemTypeProps, ItemTypeProps>\n      >\n    >\n\n/* eslint-disable-next-line */\nexport interface MenuProps extends MuiBoxProps {\n  items: MenuItemProps[]\n  context?: boolean\n  dense?: boolean\n  MenuProps?: Partial<MuiMenuProps>\n  children: ReactElement\n  horizontalOrigin?: MuiMenuProps['anchorOrigin']['horizontal']\n}\n\nexport const Menu = forwardRef<any, MenuProps>((props, ref) => {\n  const {\n    children,\n    items = [],\n    context,\n    className,\n    sx,\n    dense,\n    MenuProps,\n    horizontalOrigin,\n    ...rest\n  } = props\n\n  const [state, setState] = useState(defaultState)\n  // One left edge per menu (AGL-1216): if any row has an icon, the rows\n  // that do not get an empty gutter of the same width instead of collapsing\n  // against the item padding.\n  const hasAnyIcon = (items as any[]).some(\n    (entry) => (entry as any)?.icon?.path,\n  )\n  const child = Children.only(children) as ReactElement<any>\n  const onChildClick = (child.props as any)?.onClick?.bind(null) as MouseEventHandler\n  const handleClose = () => setState(defaultState)\n  const handleClick = useCallback(\n    (event: MouseEvent<any>) => {\n      if (onChildClick) {\n        onChildClick.call(null, event)\n      }\n      if (context) {\n        event.preventDefault()\n      }\n      setState({\n        anchorEl: event.currentTarget,\n        mouseX: event.clientX - 2,\n        mouseY: event.clientY - 4,\n      })\n    },\n    [context, onChildClick],\n  )\n  const open = Boolean(state.anchorEl || state.mouseY)\n  const cloned = cloneElement(child, {\n    onClick: handleClick,\n    'aria-expanded': open ? 'true' : 'false',\n  })\n\n  // MUI v9: PaperProps → slotProps.paper. Accept both for backward compat.\n  const { PaperProps: legacyPaperProps, slotProps: menuSlotProps, ...menuProps } = MenuProps || ({} as any)\n  const resolvedPaperProps = legacyPaperProps ?? menuSlotProps?.paper ?? {}\n  const { sx: paperSx, ...paperProps } = resolvedPaperProps\n  const arrowPlacement =\n    horizontalOrigin === 'right'\n      ? { right: 14 }\n      : horizontalOrigin === 'center'\n        ? { right: 'auto', left: 'auto' }\n        : { left: 14 }\n\n  return (\n    <Box\n      ref={ref}\n      component={'div'}\n      onContextMenu={context && handleClick}\n      sx={mergeSxProps(context && { cursor: 'context-menu' }, sx)}\n      {...rest}\n    >\n      {cloned}\n      <MuiMenu\n        anchorEl={context ? undefined : state.anchorEl}\n        anchorReference={context ? 'anchorPosition' : undefined}\n        anchorPosition={\n          !context || !state.mouseY\n            ? undefined\n            : {\n                top: state.mouseY,\n                left: state.mouseX,\n              }\n        }\n        anchorOrigin={\n          context\n            ? undefined\n            : {\n                vertical: 'bottom',\n                horizontal: horizontalOrigin || 'left',\n              }\n        }\n        transformOrigin={\n          context\n            ? undefined\n            : {\n                vertical: 'top',\n                horizontal: horizontalOrigin || 'left',\n              }\n        }\n        slotProps={{\n          paper: context\n            ? undefined\n            : {\n                elevation: 0,\n                sx: mergeSxProps(\n                  {\n                    maxHeight: ITEM_HEIGHT * 4.5,\n                    width: '30ch',\n                    filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',\n                    backgroundColor: 'surface.main',\n                    marginTop: 0.5,\n                    '&:before': {\n                      content: '\"\"',\n                      display: 'block',\n                      position: 'absolute',\n                      top: 0,\n                      width: 10,\n                      height: 10,\n                      bgcolor: 'surface.main',\n                      transform: 'translateY(-50%) rotate(45deg)',\n                      zIndex: 0,\n                      ...arrowPlacement,\n                    },\n                  },\n                  paperSx,\n                ),\n                ...paperProps,\n              },\n        }}\n        // getContentAnchorEl={null}\n        open={open}\n        onClose={handleClose}\n        {...menuProps}\n      >\n        {/* Whether ANY row in this menu carries an icon decides the gutter\n            for the rows that do not — see the ListItemIcon spacer below. */}\n        {items.map(\n          (\n            {\n              onClick,\n              children,\n              type,\n              icon,\n              endIcon,\n              ListItemTextProps,\n              ListItemIconProps,\n              EndIconTypographyProps,\n              key: keyProp,\n              ...item\n            }: any,\n            i,\n          ) => {\n            const key = keyProp ?? item.id ?? i\n\n            switch (type) {\n              case 'subheader':\n                return (\n                  <MuiListSubheader\n                    key={key}\n                    onClick={onClick}\n                    {...(item as any)}\n                  >\n                    {children}\n                  </MuiListSubheader>\n                )\n              case 'divider':\n                return (\n                  <Divider key={key} onClick={onClick} {...(item as any)}>\n                    {children}\n                  </Divider>\n                )\n              case 'item':\n              default:\n                return (\n                  <MuiMenuItem\n                    dense={dense}\n                    key={key}\n                    onClick={(e) => {\n                      handleClose()\n                      onClick && onClick(e)\n                    }}\n                    {...item}\n                  >\n                    {icon?.path ? (\n                      <ListItemIcon {...ListItemIconProps}>\n                        <MdiIcon fontSize=\"small\" {...icon} />\n                      </ListItemIcon>\n                    ) : hasAnyIcon ? (\n                      // Reserve the icon gutter so every label in the menu\n                      // shares one left edge (AGL-1216). Iconless rows used\n                      // to render no gutter at all, and callers compensated\n                      // with `ListItemText inset` — but MUI's inset is 56px\n                      // while a dense ListItemIcon reserves 36px, so a menu\n                      // mixing icon rows, inset rows and bare rows showed\n                      // THREE different left edges.\n                      <ListItemIcon {...ListItemIconProps} />\n                    ) : null}\n                    <ListItemText\n                      {...ListItemTextProps}\n                      // The spacer above already provides the alignment\n                      // `inset` was standing in for; letting both apply\n                      // would double-indent every existing caller.\n                      inset={hasAnyIcon ? false : ListItemTextProps?.inset}\n                    >\n                      {children}\n                    </ListItemText>\n                    {!endIcon?.path || !endIcon ? null : (\n                      <Typography\n                        variant=\"body2\"\n                        {...EndIconTypographyProps}\n                        sx={[{\n                          color: \"text.secondary\"\n                        }, ...(Array.isArray(EndIconTypographyProps?.sx) ? EndIconTypographyProps.sx : [EndIconTypographyProps?.sx])]}>\n                        {!endIcon?.path ? (\n                          endIcon\n                        ) : (\n                          <MdiIcon fontSize=\"small\" {...endIcon} />\n                        )}\n                      </Typography>\n                    )}\n                  </MuiMenuItem>\n                );\n            }\n          },\n        )}\n      </MuiMenu>\n    </Box>\n  );\n})\n\nMenu.displayName = 'Menu'\nMenu.aglyn = true\n\nexport default Menu\n"],"names":["MdiIcon","mergeSxProps","Box","Divider","ListItemIcon","ListItemText","ListSubheader","MuiListSubheader","Menu","MuiMenu","MenuItem","MuiMenuItem","Typography","Children","cloneElement","forwardRef","useCallback","useState","ITEM_HEIGHT","defaultState","anchorEl","mouseX","mouseY","props","ref","legacyPaperProps","child","children","items","context","className","sx","dense","MenuProps","horizontalOrigin","rest","state","setState","hasAnyIcon","some","entry","icon","path","only","onChildClick","onClick","bind","handleClose","handleClick","event","call","preventDefault","currentTarget","clientX","clientY","open","Boolean","cloned","PaperProps","slotProps","menuSlotProps","menuProps","resolvedPaperProps","paper","paperSx","paperProps","arrowPlacement","right","left","component","onContextMenu","cursor","undefined","anchorReference","anchorPosition","top","anchorOrigin","vertical","horizontal","transformOrigin","elevation","maxHeight","width","filter","backgroundColor","marginTop","content","display","position","height","bgcolor","transform","zIndex","onClose","map","type","endIcon","ListItemTextProps","ListItemIconProps","EndIconTypographyProps","key","keyProp","item","i","id","e","fontSize","inset","variant","color","Array","isArray","displayName","aglyn"],"mappings":"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"}

package/src/lib/components/mui-shadow-dom.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type MuiShadowRendererProps = {
+    container?: Node;
+    ssr?: boolean;
+    children?: JSX.Children;
+};
+export type MuiShadowRenderer = (props: MuiShadowRendererProps) => JSX.Node;
+export type CreateShadowRootOptions = {
+    render: MuiShadowRenderer;
+};
+export interface MuiShadowRootProps {
+    mode?: 'open' | 'closed';
+    delegatesFocus?: boolean;
+    styleSheets?: globalThis.CSSStyleSheet[];
+    ssr?: boolean;
+    children?: JSX.Children;
+}
+export declare function useMuiShadowDomContext(): Node;
+export declare function withMuiShadowRoot(Tag: any | keyof JSX.IntrinsicElements, options: CreateShadowRootOptions): import("react").ForwardRefExoticComponent<MuiShadowRootProps & import("react").RefAttributes<Element>>;
+export declare function createMuiShadowDomProxy(target?: Partial<JSX.IntrinsicElementMap>, key?: string, render?: MuiShadowRenderer): Partial<JSX.IntrinsicElementMap<any>>;
+export declare const MuiShadowDomRenderer: (props: MuiShadowRendererProps) => import("react").JSX.Element;
+export declare const MuiShadowDom: Partial<JSX.IntrinsicElementMap<any>>;
+export default MuiShadowDom;