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

package/src/lib/components/row-actions-menu.component.js

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AppLink } from "./app-link.js";
+import { MdiIcon } from "./mdi-icon/mdi-icon.js";
+import { mdiDotsVertical } from "@aglyn/shared-data-mdi";
+import { IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip } from "@mui/material";
+import { forwardRef, useCallback, useState } from "react";
+/**
+ * The anchor a linked menu item renders as.
+ *
+ * `naked` is the variant that adds no styling of its own — the MenuItem it is
+ * the root of already resets colour and text-decoration, so a linked item is
+ * pixel-identical to a handler-driven one.
+ */ const MenuItemLinkComponent = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx(AppLink, _extends({
+        ref: ref
+    }, props, {
+        componentVariant: 'naked'
+    })));
+MenuItemLinkComponent.displayName = 'MenuItemLinkComponent';
+/**
+ * Overflow menu for a table row's secondary actions (AGL-701).
+ *
+ * The DataGrid lists get this from `GridActionsCellItem showInMenu`, but the
+ * screens table is hand-rolled markup driven by a `renderRowActions`
+ * render-prop, so `showInMenu` is not available to it and it needs a real
+ * menu of its own.
+ *
+ * Every handler closes the menu first. Delete opens a confirmation, and a
+ * menu left standing over that dialog reads as though the click missed.
+ *
+ * An item that names an `href` is an ANCHOR, not a handler — a navigation
+ * action must be middle-clickable and copyable like any other link. It still
+ * renders as a menu item: the anchor is the MenuItem's own root element, so
+ * it inherits the item's colour, padding and focus ring rather than the
+ * browser's link styling.
+ */ export function RowActionsMenu(props) {
+    const { items, label } = props;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleOpen = useCallback((event)=>{
+        // The row itself opens the screen; without this the menu button would
+        // navigate out from under the menu it just opened.
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    }, []);
+    const handleClose = useCallback(()=>setAnchorEl(null), []);
+    if (!items.length) return null;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(IconButton, {
+                size: "small",
+                "aria-label": label ? `More actions for ${label}` : 'More actions',
+                "aria-haspopup": "true",
+                onClick: handleOpen,
+                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiDotsVertical.path,
+                    size: 0.8
+                })
+            }),
+            /*#__PURE__*/ _jsx(Menu, {
+                anchorEl: anchorEl,
+                open: Boolean(anchorEl),
+                onClose: handleClose,
+                onClick: (event)=>event.stopPropagation(),
+                children: items.map((item)=>{
+                    // A disabled item is never a link: an anchor whose destination is
+                    // refused still navigates on a middle-click, which is the one route
+                    // around the disabled state that `pointer-events: none` misses.
+                    const linkProps = item.href && !item.disabled ? _extends({
+                        component: MenuItemLinkComponent,
+                        href: item.href
+                    }, item.external ? {
+                        target: '_blank',
+                        rel: 'noreferrer'
+                    } : {}) : {};
+                    const menuItem = /*#__PURE__*/ _jsxs(MenuItem, _extends({}, linkProps, {
+                        disabled: item.disabled,
+                        onClick: ()=>{
+                            handleClose();
+                            item.onClick == null ? void 0 : item.onClick.call(item);
+                        },
+                        children: [
+                            item.icon ? /*#__PURE__*/ _jsx(ListItemIcon, {
+                                sx: item.destructive ? {
+                                    color: 'error.main'
+                                } : undefined,
+                                children: item.icon
+                            }) : null,
+                            /*#__PURE__*/ _jsx(ListItemText, {
+                                slotProps: item.destructive ? {
+                                    primary: {
+                                        color: 'error.main'
+                                    }
+                                } : undefined,
+                                children: item.label
+                            })
+                        ]
+                    }), item.key);
+                    // span: a disabled item takes no pointer events, so the tooltip
+                    // needs a wrapper that does. `MenuList` reads its items from
+                    // context rather than from its direct children, so the wrapper
+                    // costs nothing in keyboard navigation.
+                    return item.disabled && item.disabledReason ? /*#__PURE__*/ _jsx(Tooltip, {
+                        title: item.disabledReason,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            children: menuItem
+                        })
+                    }, item.key) : menuItem;
+                })
+            })
+        ]
+    });
+}
+RowActionsMenu.displayName = 'RowActionsMenu';
+export default RowActionsMenu;
+
+//# sourceMappingURL=row-actions-menu.component.js.map

package/src/lib/components/row-actions-menu.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/row-actions-menu.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { AppLink, type AppLinkNakedLinkProps } from './app-link'\nimport { MdiIcon } from './mdi-icon/mdi-icon'\nimport { mdiDotsVertical } from '@aglyn/shared-data-mdi'\nimport {\n  IconButton,\n  ListItemIcon,\n  ListItemText,\n  Menu,\n  MenuItem,\n  Tooltip,\n} from '@mui/material'\nimport {\n  forwardRef,\n  useCallback,\n  useState,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\n\nexport interface RowActionsMenuItem {\n  key: string\n  label: string\n  icon?: ReactNode\n  /**\n   * Where the item navigates. An item that carries one renders as a real\n   * anchor, so it can be middle-clicked into a new tab, copied, or opened\n   * from the browser's own context menu — the affordances a click handler\n   * cannot offer however faithfully it calls `router.push`.\n   */\n  href?: string\n  /** `href` leaves the console, so it opens in a new tab. */\n  external?: boolean\n  /** For items that open a dialog rather than navigate. */\n  onClick?: () => void\n  /** Renders the row in the error colour, for destructive actions. */\n  destructive?: boolean\n  disabled?: boolean\n  /**\n   * Why the item cannot be used, shown as its tooltip. Mirrors the quick\n   * action's `unavailableReason`: a control that is present but inert says\n   * nothing on its own, and an absent one and an inapplicable one look alike.\n   */\n  disabledReason?: string\n}\n\n/**\n * The anchor a linked menu item renders as.\n *\n * `naked` is the variant that adds no styling of its own — the MenuItem it is\n * the root of already resets colour and text-decoration, so a linked item is\n * pixel-identical to a handler-driven one.\n */\nconst MenuItemLinkComponent = forwardRef<any, AppLinkNakedLinkProps>(\n  (props, ref) => <AppLink ref={ref} {...props} componentVariant={'naked'} />,\n)\nMenuItemLinkComponent.displayName = 'MenuItemLinkComponent'\n\nexport interface RowActionsMenuProps {\n  items: RowActionsMenuItem[]\n  /** Distinguishes this row's menu for screen readers. */\n  label?: string\n}\n\n/**\n * Overflow menu for a table row's secondary actions (AGL-701).\n *\n * The DataGrid lists get this from `GridActionsCellItem showInMenu`, but the\n * screens table is hand-rolled markup driven by a `renderRowActions`\n * render-prop, so `showInMenu` is not available to it and it needs a real\n * menu of its own.\n *\n * Every handler closes the menu first. Delete opens a confirmation, and a\n * menu left standing over that dialog reads as though the click missed.\n *\n * An item that names an `href` is an ANCHOR, not a handler — a navigation\n * action must be middle-clickable and copyable like any other link. It still\n * renders as a menu item: the anchor is the MenuItem's own root element, so\n * it inherits the item's colour, padding and focus ring rather than the\n * browser's link styling.\n */\nexport function RowActionsMenu(props: RowActionsMenuProps) {\n  const { items, label } = props\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const handleOpen = useCallback((event: MouseEvent<HTMLElement>) => {\n    // The row itself opens the screen; without this the menu button would\n    // navigate out from under the menu it just opened.\n    event.stopPropagation()\n    setAnchorEl(event.currentTarget)\n  }, [])\n  const handleClose = useCallback(() => setAnchorEl(null), [])\n  if (!items.length) return null\n  return (\n    <>\n      <IconButton\n        size=\"small\"\n        aria-label={label ? `More actions for ${label}` : 'More actions'}\n        aria-haspopup=\"true\"\n        onClick={handleOpen}\n      >\n        <MdiIcon path={mdiDotsVertical.path} size={0.8} />\n      </IconButton>\n      <Menu\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleClose}\n        onClick={(event) => event.stopPropagation()}\n      >\n        {items.map((item) => {\n          // A disabled item is never a link: an anchor whose destination is\n          // refused still navigates on a middle-click, which is the one route\n          // around the disabled state that `pointer-events: none` misses.\n          const linkProps =\n            item.href && !item.disabled\n              ? {\n                  component: MenuItemLinkComponent,\n                  href: item.href,\n                  ...(item.external\n                    ? { target: '_blank', rel: 'noreferrer' }\n                    : {}),\n                }\n              : {}\n          const menuItem = (\n            <MenuItem\n              key={item.key}\n              {...(linkProps as any)}\n              disabled={item.disabled}\n              onClick={() => {\n                handleClose()\n                item.onClick?.()\n              }}\n            >\n              {item.icon ? (\n                <ListItemIcon\n                  sx={item.destructive ? { color: 'error.main' } : undefined}\n                >\n                  {item.icon}\n                </ListItemIcon>\n              ) : null}\n              <ListItemText\n                slotProps={\n                  item.destructive\n                    ? { primary: { color: 'error.main' } }\n                    : undefined\n                }\n              >\n                {item.label}\n              </ListItemText>\n            </MenuItem>\n          )\n          // span: a disabled item takes no pointer events, so the tooltip\n          // needs a wrapper that does. `MenuList` reads its items from\n          // context rather than from its direct children, so the wrapper\n          // costs nothing in keyboard navigation.\n          return item.disabled && item.disabledReason ? (\n            <Tooltip key={item.key} title={item.disabledReason}>\n              <span>{menuItem}</span>\n            </Tooltip>\n          ) : (\n            menuItem\n          )\n        })}\n      </Menu>\n    </>\n  )\n}\n\nRowActionsMenu.displayName = 'RowActionsMenu'\n\nexport default RowActionsMenu\n"],"names":["AppLink","MdiIcon","mdiDotsVertical","IconButton","ListItemIcon","ListItemText","Menu","MenuItem","Tooltip","forwardRef","useCallback","useState","MenuItemLinkComponent","props","ref","componentVariant","displayName","RowActionsMenu","items","label","anchorEl","setAnchorEl","handleOpen","event","stopPropagation","currentTarget","handleClose","length","size","aria-label","aria-haspopup","onClick","path","open","Boolean","onClose","map","item","linkProps","href","disabled","component","external","target","rel","menuItem","icon","sx","destructive","color","undefined","slotProps","primary","key","disabledReason","title","span"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAEA,SAASA,OAAO,QAAoC,gBAAY;AAChE,SAASC,OAAO,QAAQ,yBAAqB;AAC7C,SAASC,eAAe,QAAQ,yBAAwB;AACxD,SACEC,UAAU,EACVC,YAAY,EACZC,YAAY,EACZC,IAAI,EACJC,QAAQ,EACRC,OAAO,QACF,gBAAe;AACtB,SACEC,UAAU,EACVC,WAAW,EACXC,QAAQ,QAGH,QAAO;AA4Bd;;;;;;CAMC,GACD,MAAMC,sCAAwBH,WAC5B,CAACI,OAAOC,oBAAQ,KAACd;QAAQc,KAAKA;OAASD;QAAOE,kBAAkB;;AAElEH,sBAAsBI,WAAW,GAAG;AAQpC;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,SAASC,eAAeJ,KAA0B;IACvD,MAAM,EAAEK,KAAK,EAAEC,KAAK,EAAE,GAAGN;IACzB,MAAM,CAACO,UAAUC,YAAY,GAAGV,SAA6B;IAC7D,MAAMW,aAAaZ,YAAY,CAACa;QAC9B,sEAAsE;QACtE,mDAAmD;QACnDA,MAAMC,eAAe;QACrBH,YAAYE,MAAME,aAAa;IACjC,GAAG,EAAE;IACL,MAAMC,cAAchB,YAAY,IAAMW,YAAY,OAAO,EAAE;IAC3D,IAAI,CAACH,MAAMS,MAAM,EAAE,OAAO;IAC1B,qBACE;;0BACE,KAACxB;gBACCyB,MAAK;gBACLC,cAAYV,QAAQ,CAAC,iBAAiB,EAAEA,OAAO,GAAG;gBAClDW,iBAAc;gBACdC,SAAST;0BAET,cAAA,KAACrB;oBAAQ+B,MAAM9B,gBAAgB8B,IAAI;oBAAEJ,MAAM;;;0BAE7C,KAACtB;gBACCc,UAAUA;gBACVa,MAAMC,QAAQd;gBACde,SAAST;gBACTK,SAAS,CAACR,QAAUA,MAAMC,eAAe;0BAExCN,MAAMkB,GAAG,CAAC,CAACC;oBACV,kEAAkE;oBAClE,oEAAoE;oBACpE,gEAAgE;oBAChE,MAAMC,YACJD,KAAKE,IAAI,IAAI,CAACF,KAAKG,QAAQ,GACvB;wBACEC,WAAW7B;wBACX2B,MAAMF,KAAKE,IAAI;uBACXF,KAAKK,QAAQ,GACb;wBAAEC,QAAQ;wBAAUC,KAAK;oBAAa,IACtC,CAAC,KAEP,CAAC;oBACP,MAAMC,yBACJ,MAACtC,uBAEM+B;wBACLE,UAAUH,KAAKG,QAAQ;wBACvBT,SAAS;4BACPL;4BACAW,KAAKN,OAAO,oBAAZM,KAAKN,OAAO,MAAZM;wBACF;;4BAECA,KAAKS,IAAI,iBACR,KAAC1C;gCACC2C,IAAIV,KAAKW,WAAW,GAAG;oCAAEC,OAAO;gCAAa,IAAIC;0CAEhDb,KAAKS,IAAI;iCAEV;0CACJ,KAACzC;gCACC8C,WACEd,KAAKW,WAAW,GACZ;oCAAEI,SAAS;wCAAEH,OAAO;oCAAa;gCAAE,IACnCC;0CAGLb,KAAKlB,KAAK;;;wBAtBRkB,KAAKgB,GAAG;oBA0BjB,gEAAgE;oBAChE,6DAA6D;oBAC7D,+DAA+D;oBAC/D,wCAAwC;oBACxC,OAAOhB,KAAKG,QAAQ,IAAIH,KAAKiB,cAAc,iBACzC,KAAC9C;wBAAuB+C,OAAOlB,KAAKiB,cAAc;kCAChD,cAAA,KAACE;sCAAMX;;uBADKR,KAAKgB,GAAG,IAItBR;gBAEJ;;;;AAIR;AAEA5B,eAAeD,WAAW,GAAG;AAE7B,eAAeC,eAAc"}

package/src/lib/components/ruler-guides.component.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2024 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 { BoxProps } from '@mui/material/Box';
+import React from 'react';
+export interface RulerComponentProps extends BoxProps {
+    variant?: 'vertical' | 'horizontal';
+}
+export declare const RulerComponent: import("@emotion/styled").StyledComponent<Pick<RulerComponentProps, keyof RulerComponentProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & RulerComponentProps, {}, {}>;
+export interface GuideComponentProps extends BoxProps {
+    offset?: number;
+    variant?: 'vertical' | 'horizontal';
+}
+export interface RulerGuidesProps extends BoxProps {
+    guides?: GuideComponentProps[];
+    RulerComponentProps?: {
+        vertical?: RulerComponentProps;
+        horizontal?: RulerComponentProps;
+    };
+}
+export declare const RulerGuidesComponent: React.ForwardRefExoticComponent<Omit<RulerGuidesProps, "ref"> & React.RefAttributes<any>>;
+export default RulerGuidesComponent;

package/src/lib/components/ruler-guides.component.js

@@ -0,0 +1,166 @@
+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 2024 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 { generateComponentClassKeys, styled } from "@aglyn/shared-ui-theme";
+import { _isArr, _isEqualitySameType } from "@aglyn/shared-util-tools";
+import Box from "@mui/material/Box";
+import { teal } from "@mui/material/colors";
+import clsx from "clsx";
+import React from "react";
+const rulerClassKey = generateComponentClassKeys('AglynRuler', [
+    'vertical',
+    'horizontal'
+]);
+export const RulerComponent = styled((_0)=>{
+    let { variant, className } = _0, props = _object_without_properties_loose(_0, [
+        "variant",
+        "className"
+    ]);
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        className: clsx({
+            [rulerClassKey.horizontal]: variant === 'horizontal',
+            [rulerClassKey.vertical]: variant === 'vertical' || variant !== 'horizontal'
+        }, className)
+    }, props));
+}, {
+    name: 'RulerComponent'
+})(({ theme })=>({
+        position: 'absolute',
+        boxShadow: theme.shadows[3],
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        backgroundColor: theme.palette.background.paper,
+        backgroundPosition: '0 0, 0px 10px, 0 12px',
+        backgroundSize: '50px 50px, 10px 50px, 5px 50px',
+        backgroundImage: [
+            0,
+            0,
+            0
+        ].map(()=>`linear-gradient(to left, ${theme.palette.divider} 1px, transparent 1px)`).join(),
+        backgroundRepeat: 'repeat-x',
+        [`&.${rulerClassKey.horizontal}`]: {
+            top: 0,
+            left: 16,
+            width: '100%',
+            height: 15
+        },
+        [`&.${rulerClassKey.vertical}`]: {
+            top: 0,
+            left: 16,
+            width: '100%',
+            height: 15,
+            transform: 'rotateZ(90deg) rotateX(180deg)',
+            transformOrigin: '0% 100%'
+        }
+    }));
+RulerComponent.displayName = 'RulerComponent';
+RulerComponent.aglyn = true;
+const guideClassKey = generateComponentClassKeys('AglynGuide', [
+    'vertical',
+    'horizontal'
+]);
+const GuideComponent = styled((_0)=>{
+    let { variant, className } = _0, props = _object_without_properties_loose(_0, [
+        "variant",
+        "className"
+    ]);
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        className: clsx({
+            [guideClassKey.horizontal]: variant === 'horizontal',
+            [guideClassKey.vertical]: variant !== 'horizontal'
+        }, className)
+    }, props));
+}, {
+    name: 'GuideContainer',
+    shouldForwardProp (propName) {
+        return !_isEqualitySameType(propName, null, 'offset');
+    }
+})(({ offset })=>({
+        position: 'absolute',
+        '&:after': {
+            display: 'block',
+            content: '" "',
+            position: 'absolute',
+            backgroundColor: teal['A200']
+        },
+        [`&.${guideClassKey.horizontal}`]: {
+            width: 11,
+            height: '100%',
+            top: offset != null ? offset : 0,
+            cursor: 'ew-resize',
+            '&:after': {
+                height: 1,
+                width: '100%',
+                top: 5,
+                left: 0
+            }
+        },
+        [`&.${guideClassKey.vertical}`]: {
+            cursor: 'ns-resize',
+            height: 11,
+            width: '100%',
+            left: offset != null ? offset : 0,
+            '&:after': {
+                width: 1,
+                height: '100%',
+                left: 5,
+                top: 0
+            }
+        }
+    }));
+GuideComponent.displayName = 'GuideComponent';
+GuideComponent.aglyn = true;
+const RulerGuidesContainer = styled(Box, {
+    name: 'RulerGuidesContainer'
+})(({ theme })=>({
+        zIndex: theme.zIndex.speedDial,
+        // pointerEvents: 'none',
+        position: 'relative'
+    }));
+export const RulerGuidesComponent = /*#__PURE__*/ React.forwardRef(function RefRenderFn(props, ref) {
+    const { children, guides, RulerComponentProps } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "guides",
+        "RulerComponentProps"
+    ]);
+    return /*#__PURE__*/ _jsxs(RulerGuidesContainer, _extends({
+        ref: ref
+    }, rest, {
+        children: [
+            children,
+            /*#__PURE__*/ _jsx(RulerComponent, _extends({
+                variant: "horizontal"
+            }, RulerComponentProps == null ? void 0 : RulerComponentProps.horizontal)),
+            /*#__PURE__*/ _jsx(RulerComponent, _extends({
+                variant: "vertical"
+            }, RulerComponentProps == null ? void 0 : RulerComponentProps.vertical)),
+            _isArr(guides) && guides.map((_0, _1)=>{
+                let _ref = [
+                    _0,
+                    _1
+                ], [_ref1, ..._rest] = _ref, {} = _ref1, guide = _extends({}, _ref1), [i] = _rest;
+                var _ref2, _guide_key;
+                return /*#__PURE__*/ _jsx(GuideComponent, _extends({}, guide), (_ref2 = (_guide_key = guide.key) != null ? _guide_key : guide.id) != null ? _ref2 : i);
+            })
+        ]
+    }));
+});
+RulerGuidesComponent.displayName = 'RulerGuidesComponent';
+RulerGuidesComponent.aglyn = true;
+export default RulerGuidesComponent;
+
+//# sourceMappingURL=ruler-guides.component.js.map

package/src/lib/components/ruler-guides.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/ruler-guides.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2024 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 { generateComponentClassKeys, styled } from '@aglyn/shared-ui-theme'\nimport { _isArr, _isEqualitySameType } from '@aglyn/shared-util-tools'\nimport Box, { BoxProps } from '@mui/material/Box'\nimport { teal } from '@mui/material/colors'\n\nimport clsx from 'clsx'\nimport React from 'react'\n\nconst rulerClassKey = generateComponentClassKeys('AglynRuler', [\n  'vertical',\n  'horizontal',\n])\n\nexport interface RulerComponentProps extends BoxProps {\n  variant?: 'vertical' | 'horizontal'\n}\n\nexport const RulerComponent = styled(\n  ({ variant, className, ...props }: RulerComponentProps) => (\n    <Box\n      className={clsx(\n        {\n          [rulerClassKey.horizontal]: variant === 'horizontal',\n          [rulerClassKey.vertical]:\n            variant === 'vertical' || variant !== 'horizontal',\n        },\n        className,\n      )}\n      {...props}\n    />\n  ),\n  {\n    name: 'RulerComponent',\n  },\n)<RulerComponentProps>(({ theme }) => ({\n  position: 'absolute',\n  boxShadow: theme.shadows[3],\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  backgroundColor: theme.palette.background.paper,\n  backgroundPosition: '0 0, 0px 10px, 0 12px',\n  backgroundSize: '50px 50px, 10px 50px, 5px 50px',\n  backgroundImage: [0, 0, 0]\n    .map(\n      () =>\n        `linear-gradient(to left, ${theme.palette.divider} 1px, transparent 1px)`,\n    )\n    .join(),\n  backgroundRepeat: 'repeat-x',\n  [`&.${rulerClassKey.horizontal}`]: {\n    top: 0,\n    left: 16,\n    width: '100%',\n    height: 15,\n  },\n  [`&.${rulerClassKey.vertical}`]: {\n    top: 0,\n    left: 16,\n    width: '100%',\n    height: 15,\n    transform: 'rotateZ(90deg) rotateX(180deg)',\n    transformOrigin: '0% 100%',\n  },\n}))\nRulerComponent.displayName = 'RulerComponent'\nRulerComponent.aglyn = true\n\nconst guideClassKey = generateComponentClassKeys('AglynGuide', [\n  'vertical',\n  'horizontal',\n])\n\nexport interface GuideComponentProps extends BoxProps {\n  offset?: number /* The amount of pixels to displace from the ruler */\n  variant?: 'vertical' | 'horizontal'\n}\n\nconst GuideComponent = styled(\n  ({ variant, className, ...props }: GuideComponentProps) => (\n    <Box\n      className={clsx(\n        {\n          [guideClassKey.horizontal]: variant === 'horizontal',\n          [guideClassKey.vertical]: variant !== 'horizontal',\n        },\n        className,\n      )}\n      {...props}\n    />\n  ),\n  {\n    name: 'GuideContainer',\n    shouldForwardProp(propName) {\n      return !_isEqualitySameType(propName, null, 'offset')\n    },\n  },\n)<GuideComponentProps>(({ offset }) => ({\n  position: 'absolute',\n  '&:after': {\n    display: 'block',\n    content: '\" \"',\n    position: 'absolute',\n    backgroundColor: teal['A200'],\n  },\n  [`&.${guideClassKey.horizontal}`]: {\n    width: 11,\n    height: '100%',\n    top: offset ?? 0,\n    cursor: 'ew-resize',\n    '&:after': {\n      height: 1,\n      width: '100%',\n      top: 5,\n      left: 0,\n    },\n  },\n  [`&.${guideClassKey.vertical}`]: {\n    cursor: 'ns-resize',\n    height: 11,\n    width: '100%',\n    left: offset ?? 0,\n    '&:after': {\n      width: 1,\n      height: '100%',\n      left: 5,\n      top: 0,\n    },\n  },\n}))\nGuideComponent.displayName = 'GuideComponent'\nGuideComponent.aglyn = true\n\nconst RulerGuidesContainer = styled(Box, { name: 'RulerGuidesContainer' })(\n  ({ theme }) => ({\n    zIndex: theme.zIndex.speedDial,\n    // pointerEvents: 'none',\n    position: 'relative',\n    // left: 0, right: 0, top: 0,\n    // width: '100%', height: '100%',\n  }),\n)\n\nexport interface RulerGuidesProps extends BoxProps {\n  guides?: GuideComponentProps[]\n  RulerComponentProps?: {\n    vertical?: RulerComponentProps\n    horizontal?: RulerComponentProps\n  }\n}\n\nexport const RulerGuidesComponent = React.forwardRef<any, RulerGuidesProps>(\n  function RefRenderFn(props, ref) {\n    const { children, guides, RulerComponentProps, ...rest } = props\n\n    return (\n      <RulerGuidesContainer ref={ref} {...rest}>\n        {children}\n        <RulerComponent\n          variant=\"horizontal\"\n          {...RulerComponentProps?.horizontal}\n        />\n        <RulerComponent variant=\"vertical\" {...RulerComponentProps?.vertical} />\n        {_isArr(guides) &&\n          guides.map(({ ...guide }, i) => (\n            <GuideComponent key={guide.key ?? guide.id ?? i} {...guide} />\n          ))}\n      </RulerGuidesContainer>\n    )\n  },\n)\n\nRulerGuidesComponent.displayName = 'RulerGuidesComponent'\nRulerGuidesComponent.aglyn = true\n\nexport default RulerGuidesComponent\n"],"names":["generateComponentClassKeys","styled","_isArr","_isEqualitySameType","Box","teal","clsx","React","rulerClassKey","RulerComponent","variant","className","props","horizontal","vertical","name","theme","position","boxShadow","shadows","borderBottom","palette","divider","backgroundColor","background","paper","backgroundPosition","backgroundSize","backgroundImage","map","join","backgroundRepeat","top","left","width","height","transform","transformOrigin","displayName","aglyn","guideClassKey","GuideComponent","shouldForwardProp","propName","offset","display","content","cursor","RulerGuidesContainer","zIndex","speedDial","RulerGuidesComponent","forwardRef","RefRenderFn","ref","children","guides","RulerComponentProps","rest","guide","i","key","id"],"mappings":"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"}

package/src/lib/components/sandbox-frame.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @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 Jss, type JssOptions } from 'jss';
+import type { ComponentProps } from 'react';
+import React, { type ReactElement } from 'react';
+import ReactFrameComponent from 'react-frame-component';
+export type FrameComponentProps = ComponentProps<typeof ReactFrameComponent>;
+export type SandboxFrameDocument = HTMLIFrameElement['contentDocument'];
+export type SandboxFrameWindow = HTMLIFrameElement['contentWindow'];
+type State = {
+    ready: boolean;
+    sandboxFrameDocument: SandboxFrameDocument;
+    sandboxFrameWindow: SandboxFrameWindow;
+    sheetsManager?: Map<any, any>;
+    jss?: Jss;
+};
+export interface SandboxFrameProps extends Omit<FrameComponentProps, 'contentDidMount' | 'contentDidUpdate' | 'title'> {
+    onContentDidMount?: (state: State) => void;
+    onContentDidUpdate?: (state: State) => void;
+    jssPlugins?: JssOptions['plugins'];
+    baseStyles?: string;
+    title?: ReactElement;
+}
+/**
+ * @component
+ */
+export declare const SandboxFrame: React.ForwardRefExoticComponent<Omit<SandboxFrameProps, "ref"> & React.RefAttributes<HTMLIFrameElement>>;
+export default SandboxFrame;

package/src/lib/components/sandbox-frame.js

@@ -0,0 +1,122 @@
+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 { jssPreset, StylesProvider, useTheme } from "@mui/styles";
+import { create } from "jss";
+import rtl from "jss-rtl";
+import React, { Children, cloneElement, forwardRef, Fragment, isValidElement, useCallback, useMemo, useRef, useState } from "react";
+import ReactFrameComponent from "react-frame-component";
+import { useMergeRefs } from "../hooks/use-merge-refs.js";
+/**
+ * @component
+ */ export const SandboxFrame = /*#__PURE__*/ forwardRef(function RefRenderFn(props, ref) {
+    const theme = useTheme();
+    const { children, title, onContentDidMount, onContentDidUpdate, jssPlugins, baseStyles = 'html, body, .frame-root, .frame-content { width: 100%; height: 100%; }' } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "title",
+        "onContentDidMount",
+        "onContentDidUpdate",
+        "jssPlugins",
+        "baseStyles"
+    ]);
+    // Current frame state
+    const [state, setState] = useState({
+        ready: false,
+        sandboxFrameDocument: null,
+        sandboxFrameWindow: null
+    });
+    // Reference for frame context
+    const styleRef = useRef(null);
+    const frameRef = useRef(null);
+    const rootRef = useMergeRefs(frameRef, ref);
+    const head = useMemo(()=>/*#__PURE__*/ _jsxs(Fragment, {
+            children: [
+                title && /*#__PURE__*/ _jsx("title", {
+                    children: title
+                }),
+                /*#__PURE__*/ _jsx("style", {
+                    ref: styleRef,
+                    dangerouslySetInnerHTML: {
+                        __html: baseStyles
+                    },
+                    id: 'sandbox-frame-jss'
+                })
+            ]
+        }), [
+        title,
+        baseStyles
+    ]);
+    const handleContentDidMount = useCallback(()=>{
+        const instance = frameRef.current;
+        const styleInstance = styleRef.current;
+        if (instance) {
+            const nextState = _extends({}, state, {
+                ready: true,
+                sandboxFrameDocument: instance.contentDocument,
+                sandboxFrameWindow: instance.contentWindow,
+                sheetsManager: new Map(),
+                jss: create({
+                    plugins: [
+                        ...jssPreset().plugins,
+                        rtl(),
+                        ...jssPlugins
+                    ],
+                    insertionPoint: styleInstance
+                })
+            });
+            setState(nextState);
+            onContentDidMount && onContentDidMount(nextState);
+        } else {
+            onContentDidMount && onContentDidMount(state);
+        }
+    }, [
+        onContentDidMount,
+        state,
+        jssPlugins
+    ]);
+    const handleContentDidUpdate = useCallback(()=>{
+        const instance = frameRef.current;
+        if (instance) {
+            instance.contentDocument.body.dir = theme.direction;
+        }
+        onContentDidUpdate && onContentDidUpdate(state);
+    }, [
+        onContentDidUpdate,
+        theme.direction,
+        state
+    ]);
+    const childElement = Children.only(children);
+    console.debug('[RENDERING SANDBOX FRAME]', title, `STATE READY? ${state.ready}`);
+    return /*#__PURE__*/ _jsx(ReactFrameComponent, _extends({
+        ref: rootRef,
+        contentDidMount: handleContentDidMount,
+        contentDidUpdate: handleContentDidUpdate,
+        head: head
+    }, rest, {
+        children: state.ready ? /*#__PURE__*/ _jsx(StylesProvider, {
+            jss: state.jss,
+            sheetsManager: state.sheetsManager,
+            children: /*#__PURE__*/ isValidElement(childElement) ? /*#__PURE__*/ cloneElement(childElement, state) : 'INVALID SANDBOX FRAME CHILD ELEMENT!'
+        }) : null
+    }));
+});
+SandboxFrame.displayName = 'SandboxFrame';
+SandboxFrame.aglyn = true;
+export default SandboxFrame;
+
+//# sourceMappingURL=sandbox-frame.js.map

package/src/lib/components/sandbox-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/sandbox-frame.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 { jssPreset, StylesProvider, useTheme } from '@mui/styles'\n\nimport { create, type Jss, type JssOptions } from 'jss'\nimport rtl from 'jss-rtl'\nimport type { ComponentProps } from 'react'\nimport React, {\n  Children,\n  cloneElement,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  type ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport ReactFrameComponent from 'react-frame-component'\n\nimport { useMergeRefs } from '../hooks/use-merge-refs'\n\nexport type FrameComponentProps = ComponentProps<typeof ReactFrameComponent>\nexport type SandboxFrameDocument = HTMLIFrameElement['contentDocument']\nexport type SandboxFrameWindow = HTMLIFrameElement['contentWindow']\ntype State = {\n  ready: boolean\n  sandboxFrameDocument: SandboxFrameDocument\n  sandboxFrameWindow: SandboxFrameWindow\n  sheetsManager?: Map<any, any>\n  jss?: Jss\n}\n\n/* eslint-disable-next-line */\nexport interface SandboxFrameProps\n  extends Omit<\n    FrameComponentProps,\n    'contentDidMount' | 'contentDidUpdate' | 'title'\n  > {\n  onContentDidMount?: (state: State) => void\n  onContentDidUpdate?: (state: State) => void\n  jssPlugins?: JssOptions['plugins']\n  baseStyles?: string\n  title?: ReactElement\n}\n\n/**\n * @component\n */\nexport const SandboxFrame = forwardRef<HTMLIFrameElement, SandboxFrameProps>(\n  function RefRenderFn(props, ref) {\n    const theme = useTheme()\n    const {\n      children,\n      title,\n      onContentDidMount,\n      onContentDidUpdate,\n      jssPlugins,\n      baseStyles = 'html, body, .frame-root, .frame-content { width: 100%; height: 100%; }',\n      ...rest\n    } = props\n    // Current frame state\n    const [state, setState]: any = useState<State>({\n      ready: false,\n      sandboxFrameDocument: null,\n      sandboxFrameWindow: null,\n    })\n    // Reference for frame context\n    const styleRef = useRef(null)\n    const frameRef = useRef(null)\n    const rootRef = useMergeRefs(frameRef, ref)\n    const head = useMemo(\n      () => (\n        <Fragment>\n          {title && <title>{title}</title>}\n          {/* JSS Insertion Point */}\n          <style\n            ref={styleRef}\n            dangerouslySetInnerHTML={{ __html: baseStyles }}\n            id={'sandbox-frame-jss'}\n          />\n        </Fragment>\n      ),\n      [title, baseStyles],\n    )\n    const handleContentDidMount = useCallback(() => {\n      const instance = frameRef.current\n      const styleInstance = styleRef.current\n      if (instance) {\n        const nextState = {\n          ...state,\n          ready: true,\n          sandboxFrameDocument: instance.contentDocument,\n          sandboxFrameWindow: instance.contentWindow,\n          sheetsManager: new Map(),\n          jss: create({\n            plugins: [...jssPreset().plugins, rtl(), ...jssPlugins],\n            insertionPoint: styleInstance,\n          }),\n        }\n        setState(nextState)\n        onContentDidMount && onContentDidMount(nextState)\n      } else {\n        onContentDidMount && onContentDidMount(state)\n      }\n    }, [onContentDidMount, state, jssPlugins])\n    const handleContentDidUpdate = useCallback(() => {\n      const instance = frameRef.current\n      if (instance) {\n        instance.contentDocument.body.dir = theme.direction\n      }\n      onContentDidUpdate && onContentDidUpdate(state)\n    }, [onContentDidUpdate, theme.direction, state])\n    const childElement = Children.only(children)\n    console.debug(\n      '[RENDERING SANDBOX FRAME]',\n      title,\n      `STATE READY? ${state.ready}`,\n    )\n    return (\n      <ReactFrameComponent\n        ref={rootRef as any}\n        contentDidMount={handleContentDidMount}\n        contentDidUpdate={handleContentDidUpdate}\n        head={head}\n        {...rest}\n      >\n        {state.ready ? (\n          <StylesProvider jss={state.jss} sheetsManager={state.sheetsManager}>\n            {isValidElement(childElement)\n              ? cloneElement(childElement, state)\n              : 'INVALID SANDBOX FRAME CHILD ELEMENT!'}\n          </StylesProvider>\n        ) : null}\n      </ReactFrameComponent>\n    )\n  },\n)\n\nSandboxFrame.displayName = 'SandboxFrame'\nSandboxFrame.aglyn = true\n\nexport default SandboxFrame\n"],"names":["jssPreset","StylesProvider","useTheme","create","rtl","React","Children","cloneElement","forwardRef","Fragment","isValidElement","useCallback","useMemo","useRef","useState","ReactFrameComponent","useMergeRefs","SandboxFrame","RefRenderFn","props","ref","theme","children","title","onContentDidMount","onContentDidUpdate","jssPlugins","baseStyles","rest","state","setState","ready","sandboxFrameDocument","sandboxFrameWindow","styleRef","frameRef","rootRef","head","style","dangerouslySetInnerHTML","__html","id","handleContentDidMount","instance","current","styleInstance","nextState","contentDocument","contentWindow","sheetsManager","Map","jss","plugins","insertionPoint","handleContentDidUpdate","body","dir","direction","childElement","only","console","debug","contentDidMount","contentDidUpdate","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,SAAS,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,cAAa;AAEjE,SAASC,MAAM,QAAmC,MAAK;AACvD,OAAOC,SAAS,UAAS;AAEzB,OAAOC,SACLC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,QAAQ,EACRC,cAAc,EAEdC,WAAW,EACXC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAO;AAEd,OAAOC,yBAAyB,wBAAuB;AAEvD,SAASC,YAAY,QAAQ,6BAAyB;AA0BtD;;CAEC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASU,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAMC,QAAQnB;IACd,MAAM,EACJoB,QAAQ,EACRC,KAAK,EACLC,iBAAiB,EACjBC,kBAAkB,EAClBC,UAAU,EACVC,aAAa,wEAAwE,EAEtF,GAAGR,OADCS,wCACDT;;;;;;;;IACJ,sBAAsB;IACtB,MAAM,CAACU,OAAOC,SAAS,GAAQhB,SAAgB;QAC7CiB,OAAO;QACPC,sBAAsB;QACtBC,oBAAoB;IACtB;IACA,8BAA8B;IAC9B,MAAMC,WAAWrB,OAAO;IACxB,MAAMsB,WAAWtB,OAAO;IACxB,MAAMuB,UAAUpB,aAAamB,UAAUf;IACvC,MAAMiB,OAAOzB,QACX,kBACE,MAACH;;gBACEc,uBAAS,KAACA;8BAAOA;;8BAElB,KAACe;oBACClB,KAAKc;oBACLK,yBAAyB;wBAAEC,QAAQb;oBAAW;oBAC9Cc,IAAI;;;YAIV;QAAClB;QAAOI;KAAW;IAErB,MAAMe,wBAAwB/B,YAAY;QACxC,MAAMgC,WAAWR,SAASS,OAAO;QACjC,MAAMC,gBAAgBX,SAASU,OAAO;QACtC,IAAID,UAAU;YACZ,MAAMG,YAAY,aACbjB;gBACHE,OAAO;gBACPC,sBAAsBW,SAASI,eAAe;gBAC9Cd,oBAAoBU,SAASK,aAAa;gBAC1CC,eAAe,IAAIC;gBACnBC,KAAKhD,OAAO;oBACViD,SAAS;2BAAIpD,YAAYoD,OAAO;wBAAEhD;2BAAUsB;qBAAW;oBACvD2B,gBAAgBR;gBAClB;;YAEFf,SAASgB;YACTtB,qBAAqBA,kBAAkBsB;QACzC,OAAO;YACLtB,qBAAqBA,kBAAkBK;QACzC;IACF,GAAG;QAACL;QAAmBK;QAAOH;KAAW;IACzC,MAAM4B,yBAAyB3C,YAAY;QACzC,MAAMgC,WAAWR,SAASS,OAAO;QACjC,IAAID,UAAU;YACZA,SAASI,eAAe,CAACQ,IAAI,CAACC,GAAG,GAAGnC,MAAMoC,SAAS;QACrD;QACAhC,sBAAsBA,mBAAmBI;IAC3C,GAAG;QAACJ;QAAoBJ,MAAMoC,SAAS;QAAE5B;KAAM;IAC/C,MAAM6B,eAAepD,SAASqD,IAAI,CAACrC;IACnCsC,QAAQC,KAAK,CACX,6BACAtC,OACA,CAAC,aAAa,EAAEM,MAAME,KAAK,EAAE;IAE/B,qBACE,KAAChB;QACCK,KAAKgB;QACL0B,iBAAiBpB;QACjBqB,kBAAkBT;QAClBjB,MAAMA;OACFT;kBAEHC,MAAME,KAAK,iBACV,KAAC9B;YAAekD,KAAKtB,MAAMsB,GAAG;YAAEF,eAAepB,MAAMoB,aAAa;sBAC/DvC,cAAAA,eAAegD,8BACZnD,aAAamD,cAAc7B,SAC3B;aAEJ;;AAGV,GACD;AAEDZ,aAAa+C,WAAW,GAAG;AAC3B/C,aAAagD,KAAK,GAAG;AAErB,eAAehD,aAAY"}

package/src/lib/components/scroll-reaction.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useScrollTrigger } from '@mui/material';
+import { type ReactElement } from 'react';
+type UseScrollTriggerOptions = Parameters<typeof useScrollTrigger>[0];
+export type ElevatedRenderProps = {
+    activeWithHysteresis: boolean;
+    activeWithoutHysteresis: boolean;
+};
+export type ScrollTriggerOptions = Omit<UseScrollTriggerOptions, 'disableHysteresis'>;
+export interface ScrollReactionProps<P = any> extends ScrollTriggerOptions {
+    /**
+     * If children is a render function then passes local state to parameter.
+     * Otherwise will clone child element, passing or calling renderProps
+     */
+    children: ReactElement<P> | ((state: ElevatedRenderProps) => ReactElement<P>);
+    /**
+     * Optionally, provide a render props function to contextually change passed
+     * props based on the local state provided through the
+     */
+    renderProps?: Partial<P> | ((state: ElevatedRenderProps) => Partial<P>);
+    /**
+     * Optionally provided to override the options passed to useScrollTrigger for
+     * the hook responding to triggers *WITH* hysteresis.
+     *
+     * __Meaning of Hysteresis__
+     * > The meaning of hysteresis is "lagging." Hysteresis is characterized as a
+     * > lag of magnetic flux density (B) behind the magnetic field strength (H).
+     */
+    withHysteresis?: ScrollTriggerOptions;
+    /**
+     * Optionally provided to override the options passed to
+     * the`useScrollTrigger` for the hook responding to triggers *WITHOUT*
+     * hysteresis.
+     *
+     * @see {@link withHysteresis} for Hysteresis meaning
+     */
+    withoutHysteresis?: ScrollTriggerOptions;
+}
+export declare function ScrollReaction<P>(props: ScrollReactionProps<P>): ReactElement<P>;
+export declare namespace ScrollReaction {
+    var displayName: string;
+    var aglyn: boolean;
+}
+export default ScrollReaction;