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

package/src/lib/components/scroll-reaction.js

@@ -0,0 +1,43 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+/**
+ * @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 { _isFnT } from "@aglyn/shared-util-tools";
+import { useScrollTrigger } from "@mui/material";
+import { cloneElement } from "react";
+export function ScrollReaction(props) {
+    const { children, renderProps, threshold, target, withHysteresis, withoutHysteresis } = props;
+    const activeWithoutHysteresis = useScrollTrigger(_extends({
+        disableHysteresis: true,
+        threshold,
+        target: target != null ? target : undefined
+    }, withoutHysteresis));
+    const activeWithHysteresis = useScrollTrigger(_extends({
+        disableHysteresis: false,
+        threshold,
+        target: target != null ? target : undefined
+    }, withHysteresis));
+    const activity = {
+        activeWithHysteresis,
+        activeWithoutHysteresis
+    };
+    if (_isFnT(children)) return children(activity);
+    return /*#__PURE__*/ cloneElement(children, _isFnT(renderProps) ? renderProps(activity) : renderProps);
+}
+ScrollReaction.displayName = 'ScrollReaction';
+ScrollReaction.aglyn = true;
+export default ScrollReaction;
+
+//# sourceMappingURL=scroll-reaction.js.map

package/src/lib/components/scroll-reaction.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/scroll-reaction.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { _isFnT } from '@aglyn/shared-util-tools'\nimport { useScrollTrigger } from '@mui/material'\nimport { cloneElement, type ReactElement } from 'react'\n\ntype UseScrollTriggerOptions = Parameters<typeof useScrollTrigger>[0]\n\nexport type ElevatedRenderProps = {\n  activeWithHysteresis: boolean\n  activeWithoutHysteresis: boolean\n}\n\nexport type ScrollTriggerOptions = Omit<\n  UseScrollTriggerOptions,\n  'disableHysteresis'\n>\n\nexport interface ScrollReactionProps<P = any> extends ScrollTriggerOptions {\n  /**\n   * If children is a render function then passes local state to parameter.\n   * Otherwise will clone child element, passing or calling renderProps\n   */\n  children: ReactElement<P> | ((state: ElevatedRenderProps) => ReactElement<P>)\n  /**\n   * Optionally, provide a render props function to contextually change passed\n   * props based on the local state provided through the\n   */\n  renderProps?: Partial<P> | ((state: ElevatedRenderProps) => Partial<P>)\n\n  /**\n   * Optionally provided to override the options passed to useScrollTrigger for\n   * the hook responding to triggers *WITH* hysteresis.\n   *\n   * __Meaning of Hysteresis__\n   * > The meaning of hysteresis is \"lagging.\" Hysteresis is characterized as a\n   * > lag of magnetic flux density (B) behind the magnetic field strength (H).\n   */\n  withHysteresis?: ScrollTriggerOptions\n  /**\n   * Optionally provided to override the options passed to\n   * the`useScrollTrigger` for the hook responding to triggers *WITHOUT*\n   * hysteresis.\n   *\n   * @see {@link withHysteresis} for Hysteresis meaning\n   */\n  withoutHysteresis?: ScrollTriggerOptions\n}\n\nexport function ScrollReaction<P>(\n  props: ScrollReactionProps<P>,\n): ReactElement<P> {\n  const {\n    children,\n    renderProps,\n    threshold,\n    target,\n    withHysteresis,\n    withoutHysteresis,\n  } = props\n\n  const activeWithoutHysteresis = useScrollTrigger({\n    disableHysteresis: true,\n    threshold,\n    target: target ?? undefined,\n    ...withoutHysteresis,\n  })\n  const activeWithHysteresis = useScrollTrigger({\n    disableHysteresis: false,\n    threshold,\n    target: target ?? undefined,\n    ...withHysteresis,\n  })\n  const activity = { activeWithHysteresis, activeWithoutHysteresis }\n\n  if (_isFnT(children))\n    return (children as (state: ElevatedRenderProps) => ReactElement<P>)(\n      activity,\n    )\n\n  return cloneElement(\n    children as ReactElement<P>,\n    (_isFnT(renderProps) ? renderProps(activity) : renderProps) as Partial<P>,\n  )\n}\n\nScrollReaction.displayName = 'ScrollReaction'\nScrollReaction.aglyn = true\n\nexport default ScrollReaction\n"],"names":["_isFnT","useScrollTrigger","cloneElement","ScrollReaction","props","children","renderProps","threshold","target","withHysteresis","withoutHysteresis","activeWithoutHysteresis","disableHysteresis","undefined","activeWithHysteresis","activity","displayName","aglyn"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,MAAM,QAAQ,2BAA0B;AACjD,SAASC,gBAAgB,QAAQ,gBAAe;AAChD,SAASC,YAAY,QAA2B,QAAO;AA6CvD,OAAO,SAASC,eACdC,KAA6B;IAE7B,MAAM,EACJC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,cAAc,EACdC,iBAAiB,EAClB,GAAGN;IAEJ,MAAMO,0BAA0BV,iBAAiB;QAC/CW,mBAAmB;QACnBL;QACAC,MAAM,EAAEA,iBAAAA,SAAUK;OACfH;IAEL,MAAMI,uBAAuBb,iBAAiB;QAC5CW,mBAAmB;QACnBL;QACAC,MAAM,EAAEA,iBAAAA,SAAUK;OACfJ;IAEL,MAAMM,WAAW;QAAED;QAAsBH;IAAwB;IAEjE,IAAIX,OAAOK,WACT,OAAO,AAACA,SACNU;IAGJ,qBAAOb,aACLG,UACCL,OAAOM,eAAeA,YAAYS,YAAYT;AAEnD;AAEAH,eAAea,WAAW,GAAG;AAC7Bb,eAAec,KAAK,GAAG;AAEvB,eAAed,eAAc"}

package/src/lib/components/scroll-table.component.d.ts

@@ -0,0 +1,124 @@
+/**
+ * @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 TableContainerProps, type TableProps } from '@mui/material';
+export type ScrollTableProps = TableProps & ({
+    /**
+     * The scroll box around the table. Its `sx` is merged AFTER the box's
+     * own, so a caller can bound the box's height or space it out without
+     * taking the scroll away. `role`, `aria-label` and `tabIndex` belong
+     * here when a surface has to name the box (the customer-page Table
+     * element does).
+     */
+    ContainerProps?: TableContainerProps & {
+        [attribute: `data-${string}`]: unknown;
+    };
+    nested?: false;
+} | {
+    ContainerProps?: never;
+    /**
+     * The table sits in a cell of another `ScrollTable`, whose box
+     * already scrolls it: it is drawn with no box of its own.
+     */
+    nested: true;
+});
+/**
+ * EVERY TABLE THAT IS NOT A RECORD LIST (AGL-3045).
+ *
+ * ## Why a table needs a box of its own
+ *
+ * A MUI `Card` clips what leaves it (`overflow: hidden`), and a `Table` is at
+ * least as wide as its widest unbreakable content — an id, a date, a figure.
+ * A bare table whose content outgrows its card is cut off at the card's edge,
+ * and nothing on the page can reach the columns past it.
+ *
+ * `DataTableComponent` and `ListTable` scroll their own columns, so a record
+ * list — rows of jobs, people, orders, anything paged or sorted — belongs
+ * there. What is left is drawn here: a breakdown by kind, month or
+ * jurisdiction, a key/value readout, a preview inside a dialog, a row of
+ * inputs.
+ *
+ * ## What it does
+ *
+ * The table sits in MUI's `TableContainer` (`width: 100%`, `overflow-x:
+ * auto`), so content wider than the card scrolls inside the card instead of
+ * being cut by it. The box carries the house overflow fade from
+ * `scroll-overflow`, which is how an overlay-scrollbar platform — macOS, by
+ * default — admits the table continues: a scroll-driven animation that is
+ * inactive, and paints nothing, while there is nothing to scroll.
+ *
+ * ## Why the table keeps `width: 100%` here
+ *
+ * The customer-page Table element sizes its table to `max-content`, capped at
+ * 560px, so a comparison matrix of prose cells scrolls rather than wrapping
+ * each cell into six lines (AGL-2568). That cap is safe on a full-width page
+ * section, which is never narrower than 560px from a tablet up. A console card
+ * is: two-column card flows put cards well under 560px at tablet and laptop
+ * widths, so the same sizing would put a scrollbar on tables that fit today.
+ * The console's defect is the unbreakable cell, and a `width: 100%` table
+ * overflows on exactly that — so the table fills its card, wraps what can
+ * wrap, and scrolls when what cannot wrap does not fit. A surface that wants
+ * the prose sizing passes it as the table's `sx`, as the Table element does.
+ *
+ * ## Keyboard
+ *
+ * Chromium (130+) and Firefox make a scroll box with no focusable content
+ * keyboard-reachable on their own, and a table of links or buttons scrolls to
+ * whichever one takes focus. A surface that must also NAME the box — a region
+ * a screen reader announces — passes `role`, `aria-label` and `tabIndex`
+ * through `ContainerProps` (see `scrollRegionProps`).
+ *
+ * ## A table inside a table
+ *
+ * A tree draws a parent's children as a table nested in a full-width cell of
+ * the parent's table. That table is already inside the outer box, which
+ * scrolls the whole tree as one piece; a box of its own would make every
+ * subtree a scroll region and a clip of its own, for content that is exactly
+ * as wide as the table around it. `nested` draws it bare.
+ *
+ * ## Shape
+ *
+ * Every `Table` prop goes to the table; `ContainerProps` go to the box; `ref`
+ * is the box, the element that holds the table's place on the page, so a
+ * `nested` table, which has no box, takes no ref.
+ * `aglyn/no-raw-mui-table` refuses a MUI `Table` or `TableContainer` anywhere
+ * but this file.
+ */
+export declare const ScrollTable: import("react").ForwardRefExoticComponent<(Omit<import("@mui/material").TableOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "children" | "style" | "className" | "padding" | "classes" | "sx" | "size" | "stickyHeader"> & {
+    component?: React.ElementType | undefined;
+} & {
+    /**
+     * The scroll box around the table. Its `sx` is merged AFTER the box's
+     * own, so a caller can bound the box's height or space it out without
+     * taking the scroll away. `role`, `aria-label` and `tabIndex` belong
+     * here when a surface has to name the box (the customer-page Table
+     * element does).
+     */
+    ContainerProps?: TableContainerProps & {
+        [attribute: `data-${string}`]: unknown;
+    };
+    nested?: false;
+}, "ref"> | Omit<import("@mui/material").TableOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "children" | "style" | "className" | "padding" | "classes" | "sx" | "size" | "stickyHeader"> & {
+    component?: React.ElementType | undefined;
+} & {
+    ContainerProps?: never;
+    /**
+     * The table sits in a cell of another `ScrollTable`, whose box
+     * already scrolls it: it is drawn with no box of its own.
+     */
+    nested: true;
+}, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
+export default ScrollTable;

package/src/lib/components/scroll-table.component.js

@@ -0,0 +1,103 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @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 { mergeSxProps } from "@aglyn/shared-ui-theme";
+import { Table, TableContainer } from "@mui/material";
+import { forwardRef } from "react";
+import { scrollableTableWrapperSx } from "../utils/scroll-overflow.js";
+/**
+ * EVERY TABLE THAT IS NOT A RECORD LIST (AGL-3045).
+ *
+ * ## Why a table needs a box of its own
+ *
+ * A MUI `Card` clips what leaves it (`overflow: hidden`), and a `Table` is at
+ * least as wide as its widest unbreakable content — an id, a date, a figure.
+ * A bare table whose content outgrows its card is cut off at the card's edge,
+ * and nothing on the page can reach the columns past it.
+ *
+ * `DataTableComponent` and `ListTable` scroll their own columns, so a record
+ * list — rows of jobs, people, orders, anything paged or sorted — belongs
+ * there. What is left is drawn here: a breakdown by kind, month or
+ * jurisdiction, a key/value readout, a preview inside a dialog, a row of
+ * inputs.
+ *
+ * ## What it does
+ *
+ * The table sits in MUI's `TableContainer` (`width: 100%`, `overflow-x:
+ * auto`), so content wider than the card scrolls inside the card instead of
+ * being cut by it. The box carries the house overflow fade from
+ * `scroll-overflow`, which is how an overlay-scrollbar platform — macOS, by
+ * default — admits the table continues: a scroll-driven animation that is
+ * inactive, and paints nothing, while there is nothing to scroll.
+ *
+ * ## Why the table keeps `width: 100%` here
+ *
+ * The customer-page Table element sizes its table to `max-content`, capped at
+ * 560px, so a comparison matrix of prose cells scrolls rather than wrapping
+ * each cell into six lines (AGL-2568). That cap is safe on a full-width page
+ * section, which is never narrower than 560px from a tablet up. A console card
+ * is: two-column card flows put cards well under 560px at tablet and laptop
+ * widths, so the same sizing would put a scrollbar on tables that fit today.
+ * The console's defect is the unbreakable cell, and a `width: 100%` table
+ * overflows on exactly that — so the table fills its card, wraps what can
+ * wrap, and scrolls when what cannot wrap does not fit. A surface that wants
+ * the prose sizing passes it as the table's `sx`, as the Table element does.
+ *
+ * ## Keyboard
+ *
+ * Chromium (130+) and Firefox make a scroll box with no focusable content
+ * keyboard-reachable on their own, and a table of links or buttons scrolls to
+ * whichever one takes focus. A surface that must also NAME the box — a region
+ * a screen reader announces — passes `role`, `aria-label` and `tabIndex`
+ * through `ContainerProps` (see `scrollRegionProps`).
+ *
+ * ## A table inside a table
+ *
+ * A tree draws a parent's children as a table nested in a full-width cell of
+ * the parent's table. That table is already inside the outer box, which
+ * scrolls the whole tree as one piece; a box of its own would make every
+ * subtree a scroll region and a clip of its own, for content that is exactly
+ * as wide as the table around it. `nested` draws it bare.
+ *
+ * ## Shape
+ *
+ * Every `Table` prop goes to the table; `ContainerProps` go to the box; `ref`
+ * is the box, the element that holds the table's place on the page, so a
+ * `nested` table, which has no box, takes no ref.
+ * `aglyn/no-raw-mui-table` refuses a MUI `Table` or `TableContainer` anywhere
+ * but this file.
+ */ export const ScrollTable = /*#__PURE__*/ forwardRef(function ScrollTable(props, ref) {
+    const { ContainerProps, nested } = props, tableProps = _object_without_properties_loose(props, [
+        "ContainerProps",
+        "nested"
+    ]);
+    if (nested) return /*#__PURE__*/ _jsx(Table, _extends({}, tableProps));
+    const _ref = ContainerProps != null ? ContainerProps : {}, { sx: containerSx } = _ref, container = _object_without_properties_loose(_ref, [
+        "sx"
+    ]);
+    return /*#__PURE__*/ _jsx(TableContainer, _extends({
+        ref: ref
+    }, container, {
+        sx: mergeSxProps(scrollableTableWrapperSx, containerSx),
+        children: /*#__PURE__*/ _jsx(Table, _extends({}, tableProps))
+    }));
+});
+ScrollTable.displayName = 'ScrollTable';
+export default ScrollTable;
+
+//# sourceMappingURL=scroll-table.component.js.map

package/src/lib/components/scroll-table.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/scroll-table.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { mergeSxProps } from '@aglyn/shared-ui-theme'\nimport {\n  Table,\n  TableContainer,\n  type TableContainerProps,\n  type TableProps,\n} from '@mui/material'\nimport { forwardRef } from 'react'\nimport { scrollableTableWrapperSx } from '../utils/scroll-overflow'\n\nexport type ScrollTableProps = TableProps &\n  (\n    | {\n        /**\n         * The scroll box around the table. Its `sx` is merged AFTER the box's\n         * own, so a caller can bound the box's height or space it out without\n         * taking the scroll away. `role`, `aria-label` and `tabIndex` belong\n         * here when a surface has to name the box (the customer-page Table\n         * element does).\n         */\n        ContainerProps?: TableContainerProps & {\n          [attribute: `data-${string}`]: unknown\n        }\n        nested?: false\n      }\n    | {\n        ContainerProps?: never\n        /**\n         * The table sits in a cell of another `ScrollTable`, whose box\n         * already scrolls it: it is drawn with no box of its own.\n         */\n        nested: true\n      }\n  )\n\n/**\n * EVERY TABLE THAT IS NOT A RECORD LIST (AGL-3045).\n *\n * ## Why a table needs a box of its own\n *\n * A MUI `Card` clips what leaves it (`overflow: hidden`), and a `Table` is at\n * least as wide as its widest unbreakable content — an id, a date, a figure.\n * A bare table whose content outgrows its card is cut off at the card's edge,\n * and nothing on the page can reach the columns past it.\n *\n * `DataTableComponent` and `ListTable` scroll their own columns, so a record\n * list — rows of jobs, people, orders, anything paged or sorted — belongs\n * there. What is left is drawn here: a breakdown by kind, month or\n * jurisdiction, a key/value readout, a preview inside a dialog, a row of\n * inputs.\n *\n * ## What it does\n *\n * The table sits in MUI's `TableContainer` (`width: 100%`, `overflow-x:\n * auto`), so content wider than the card scrolls inside the card instead of\n * being cut by it. The box carries the house overflow fade from\n * `scroll-overflow`, which is how an overlay-scrollbar platform — macOS, by\n * default — admits the table continues: a scroll-driven animation that is\n * inactive, and paints nothing, while there is nothing to scroll.\n *\n * ## Why the table keeps `width: 100%` here\n *\n * The customer-page Table element sizes its table to `max-content`, capped at\n * 560px, so a comparison matrix of prose cells scrolls rather than wrapping\n * each cell into six lines (AGL-2568). That cap is safe on a full-width page\n * section, which is never narrower than 560px from a tablet up. A console card\n * is: two-column card flows put cards well under 560px at tablet and laptop\n * widths, so the same sizing would put a scrollbar on tables that fit today.\n * The console's defect is the unbreakable cell, and a `width: 100%` table\n * overflows on exactly that — so the table fills its card, wraps what can\n * wrap, and scrolls when what cannot wrap does not fit. A surface that wants\n * the prose sizing passes it as the table's `sx`, as the Table element does.\n *\n * ## Keyboard\n *\n * Chromium (130+) and Firefox make a scroll box with no focusable content\n * keyboard-reachable on their own, and a table of links or buttons scrolls to\n * whichever one takes focus. A surface that must also NAME the box — a region\n * a screen reader announces — passes `role`, `aria-label` and `tabIndex`\n * through `ContainerProps` (see `scrollRegionProps`).\n *\n * ## A table inside a table\n *\n * A tree draws a parent's children as a table nested in a full-width cell of\n * the parent's table. That table is already inside the outer box, which\n * scrolls the whole tree as one piece; a box of its own would make every\n * subtree a scroll region and a clip of its own, for content that is exactly\n * as wide as the table around it. `nested` draws it bare.\n *\n * ## Shape\n *\n * Every `Table` prop goes to the table; `ContainerProps` go to the box; `ref`\n * is the box, the element that holds the table's place on the page, so a\n * `nested` table, which has no box, takes no ref.\n * `aglyn/no-raw-mui-table` refuses a MUI `Table` or `TableContainer` anywhere\n * but this file.\n */\nexport const ScrollTable = forwardRef<HTMLDivElement, ScrollTableProps>(\n  function ScrollTable(props, ref) {\n    const { ContainerProps, nested, ...tableProps } = props\n    if (nested) return <Table {...tableProps} />\n    const { sx: containerSx, ...container } = ContainerProps ?? {}\n    return (\n      <TableContainer\n        ref={ref}\n        {...container}\n        sx={mergeSxProps(scrollableTableWrapperSx, containerSx)}\n      >\n        <Table {...tableProps} />\n      </TableContainer>\n    )\n  },\n)\nScrollTable.displayName = 'ScrollTable'\n\nexport default ScrollTable\n"],"names":["mergeSxProps","Table","TableContainer","forwardRef","scrollableTableWrapperSx","ScrollTable","props","ref","ContainerProps","nested","tableProps","sx","containerSx","container","displayName"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,YAAY,QAAQ,yBAAwB;AACrD,SACEC,KAAK,EACLC,cAAc,QAGT,gBAAe;AACtB,SAASC,UAAU,QAAQ,QAAO;AAClC,SAASC,wBAAwB,QAAQ,8BAA0B;AA2BnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DC,GACD,OAAO,MAAMC,4BAAcF,WACzB,SAASE,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EAAEC,cAAc,EAAEC,MAAM,EAAiB,GAAGH,OAAfI,8CAAeJ;;;;IAClD,IAAIG,QAAQ,qBAAO,KAACR,oBAAUS;IAC9B,aAA0CF,yBAAAA,iBAAkB,CAAC,GAAvD,EAAEG,IAAIC,WAAW,EAAgB,SAAXC;;;IAC5B,qBACE,KAACX;QACCK,KAAKA;OACDM;QACJF,IAAIX,aAAaI,0BAA0BQ;kBAE3C,cAAA,KAACX,oBAAUS;;AAGjB,GACD;AACDL,YAAYS,WAAW,GAAG;AAE1B,eAAeT,YAAW"}

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

@@ -0,0 +1,18 @@
+/**
+ * @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 * from './shadow-dom';
+export { default } from './shadow-dom';

package/src/lib/components/shadow-dom/index.js

@@ -0,0 +1,19 @@
+/**
+ * @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 * from "./shadow-dom.js";
+export { default } from "./shadow-dom.js";
+
+//# sourceMappingURL=index.js.map

package/src/lib/components/shadow-dom/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/shared/ui/jsx/src/lib/components/shadow-dom/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport * from './shadow-dom'\nexport { default } from './shadow-dom'\n"],"names":["default"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,cAAc,kBAAc;AAC5B,SAASA,OAAO,QAAQ,kBAAc"}

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

@@ -0,0 +1,42 @@
+/**
+ * @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 declare const ShadowDomContext: import("react").Context<any>;
+export declare function useShadowDomContext(): any;
+export interface ShadowContentPortalProps {
+    root: ShadowRoot;
+    children?: JSX.Children;
+}
+export interface BaseProps {
+    mode?: 'open' | 'closed';
+    delegatesFocus?: boolean;
+    styleSheets?: globalThis.CSSStyleSheet[];
+    ssr?: boolean;
+    children?: JSX.Children;
+}
+export type RenderProp = (props: {
+    root: ShadowRoot;
+    ssr?: boolean;
+    children?: JSX.Children;
+}) => JSX.Children;
+export type FactoryOptions<P = any> = {
+    tag: string;
+    render: RenderProp;
+};
+export declare function shadowDomRootFactory<P = any>(options: FactoryOptions<P>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P & BaseProps> & import("react").RefAttributes<any>>;
+export declare function createShadowDomProxy(target?: Record<string, ReturnType<typeof shadowDomRootFactory>>, id?: string, render?: RenderProp): Record<string, import("react").ForwardRefExoticComponent<BaseProps & import("react").RefAttributes<any>>>;
+export declare const ShadowDom: Record<string, import("react").ForwardRefExoticComponent<BaseProps & import("react").RefAttributes<any>>>;
+export default ShadowDom;

package/src/lib/components/shadow-dom/shadow-dom.js

@@ -0,0 +1,123 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { paramCase } from "@aglyn/shared-util-vendor";
+import { createContext, forwardRef, useContext, useState } from "react";
+import { createPortal } from "react-dom";
+import { useEnsuredForwardedRef, useIsomorphicLayoutEffect } from "react-use";
+export const ShadowDomContext = /*#__PURE__*/ createContext(null);
+export function useShadowDomContext() {
+    return useContext(ShadowDomContext);
+}
+function ShadowDomContentPortal(props) {
+    const { root, children = null } = props;
+    return /*#__PURE__*/ createPortal(children, root);
+}
+export function shadowDomRootFactory(options) {
+    const ShadowDomRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
+        const { mode = 'open', delegatesFocus = false, styleSheets = [], ssr = false, children = null } = props, rest = _object_without_properties_loose(props, [
+            "mode",
+            "delegatesFocus",
+            "styleSheets",
+            "ssr",
+            "children"
+        ]);
+        const node = useEnsuredForwardedRef(ref);
+        const [root, setRoot] = useState(null);
+        const key = `node_${mode}${delegatesFocus}`;
+        const Tag = options.tag;
+        useIsomorphicLayoutEffect(()=>{
+            if (!node.current) return;
+            try {
+                typeof ref === 'function' && ref(node.current);
+                if (ssr) return setRoot(node.current.shadowRoot);
+                const root = node.current.attachShadow({
+                    mode,
+                    delegatesFocus
+                });
+                styleSheets.length > 0 && (root.adoptedStyleSheets = styleSheets);
+                setRoot(root);
+            } catch (error) {
+                if ((error == null ? void 0 : error.name) !== 'NotSupportedError') throw error;
+                // A shadow root already exists on the host (remount of the same
+                // element, e.g. StrictMode double-effects) — adopt it.
+                const existing = node.current.shadowRoot;
+                if (existing) {
+                    styleSheets.length > 0 && (existing.adoptedStyleSheets = styleSheets);
+                    setRoot(existing);
+                }
+            }
+        }, [
+            styleSheets,
+            delegatesFocus,
+            mode,
+            ssr
+        ]);
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: /*#__PURE__*/ _jsx(Tag, _extends({
+                ref: node
+            }, rest, {
+                children: root ? /*#__PURE__*/ _jsx(ShadowDomContext.Provider, {
+                    value: root,
+                    children: /*#__PURE__*/ _jsx(ShadowDomContentPortal, {
+                        root: root,
+                        children: options.render == null ? void 0 : options.render.call(options, {
+                            root,
+                            ssr,
+                            children
+                        })
+                    })
+                }) : // No shadow root yet: on the server and during the first client
+                // (hydration) render the content renders as light DOM, so the
+                // SSR payload carries real text for SEO/crawlers. Once the
+                // shadow root attaches (layout effect, before paint) the light
+                // DOM stops displaying — a shadow host without slots never shows
+                // it — and the portal branch takes over. Hydration stays
+                // consistent because server and first client render both take
+                // this branch.
+                options.render == null ? void 0 : options.render.call(options, {
+                    root,
+                    ssr,
+                    children
+                })
+            }), key)
+        });
+    });
+    ShadowDomRoot.displayName = 'ShadowDomRoot';
+    return ShadowDomRoot;
+}
+const tags = new Map();
+export function createShadowDomProxy(target = {}, id = 'sdp-', render = ({ children })=>children) {
+    return new Proxy(target, {
+        get: function get(_, name) {
+            const tag = paramCase(name);
+            const key = `${id}${tag}`;
+            if (!tags.has(key)) {
+                tags.set(key, shadowDomRootFactory({
+                    tag,
+                    render
+                }));
+            }
+            return tags.get(key);
+        }
+    });
+}
+export const ShadowDom = createShadowDomProxy();
+export default ShadowDom;
+
+//# sourceMappingURL=shadow-dom.js.map

package/src/lib/components/shadow-dom/shadow-dom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/shared/ui/jsx/src/lib/components/shadow-dom/shadow-dom.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { paramCase } from '@aglyn/shared-util-vendor'\nimport { createContext, forwardRef, useContext, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useEnsuredForwardedRef, useIsomorphicLayoutEffect } from 'react-use'\n\nexport const ShadowDomContext = createContext(null)\n\nexport function useShadowDomContext() {\n  return useContext(ShadowDomContext)\n}\n\nexport interface ShadowContentPortalProps {\n  root: ShadowRoot\n  children?: JSX.Children\n}\n\nfunction ShadowDomContentPortal(props: ShadowContentPortalProps) {\n  const { root, children = null } = props\n  return createPortal(children, root)\n}\n\nexport interface BaseProps {\n  mode?: 'open' | 'closed'\n  delegatesFocus?: boolean\n  styleSheets?: globalThis.CSSStyleSheet[]\n  ssr?: boolean\n  children?: JSX.Children\n}\n\nexport type RenderProp = (props: {\n  root: ShadowRoot\n  ssr?: boolean\n  children?: JSX.Children\n}) => JSX.Children\n\nexport type FactoryOptions<P = any> = {\n  tag: string\n  render: RenderProp\n}\n\nexport function shadowDomRootFactory<P = any>(options: FactoryOptions<P>) {\n  const ShadowDomRoot = forwardRef<any, P & BaseProps>((props, ref) => {\n    const {\n      mode = 'open',\n      delegatesFocus = false,\n      styleSheets = [],\n      ssr = false,\n      children = null,\n      ...rest\n    } = props\n    const node = useEnsuredForwardedRef<HTMLElement>(ref as any)\n    const [root, setRoot] = useState<ShadowRoot | null>(null)\n    const key = `node_${mode}${delegatesFocus}`\n    const Tag = options.tag\n\n    useIsomorphicLayoutEffect(() => {\n      if (!node.current) return\n\n      try {\n        typeof ref === 'function' && ref(node.current)\n\n        if (ssr) return setRoot(node.current.shadowRoot)\n\n        const root = node.current.attachShadow({\n          mode,\n          delegatesFocus,\n        })\n        styleSheets.length > 0 && (root.adoptedStyleSheets = styleSheets)\n        setRoot(root)\n      } catch (error) {\n        if ((error as Error)?.name !== 'NotSupportedError') throw error\n        // A shadow root already exists on the host (remount of the same\n        // element, e.g. StrictMode double-effects) — adopt it.\n        const existing = node.current.shadowRoot\n        if (existing) {\n          styleSheets.length > 0 && (existing.adoptedStyleSheets = styleSheets)\n          setRoot(existing)\n        }\n      }\n    }, [styleSheets, delegatesFocus, mode, ssr])\n\n    return (\n      <>\n        <Tag key={key} ref={node} {...rest}>\n          {root ? (\n            <ShadowDomContext.Provider value={root}>\n              <ShadowDomContentPortal root={root}>\n                {options.render?.({ root, ssr, children })}\n              </ShadowDomContentPortal>\n            </ShadowDomContext.Provider>\n          ) : (\n            // No shadow root yet: on the server and during the first client\n            // (hydration) render the content renders as light DOM, so the\n            // SSR payload carries real text for SEO/crawlers. Once the\n            // shadow root attaches (layout effect, before paint) the light\n            // DOM stops displaying — a shadow host without slots never shows\n            // it — and the portal branch takes over. Hydration stays\n            // consistent because server and first client render both take\n            // this branch.\n            options.render?.({ root, ssr, children })\n          )}\n        </Tag>\n      </>\n    );\n  })\n  ShadowDomRoot.displayName = 'ShadowDomRoot'\n\n  return ShadowDomRoot\n}\n\nconst tags = new Map()\n\nexport function createShadowDomProxy(\n  target: Record<string, ReturnType<typeof shadowDomRootFactory>> = {},\n  id = 'sdp-',\n  render: RenderProp = ({ children }) => children,\n) {\n  return new Proxy(target, {\n    get: function get(_, name) {\n      const tag = paramCase(name as string)\n      const key = `${id}${tag}`\n\n      if (!tags.has(key)) {\n        tags.set(key, shadowDomRootFactory({ tag, render }))\n      }\n\n      return tags.get(key)\n    },\n  })\n}\n\nexport const ShadowDom = createShadowDomProxy()\n\nexport default ShadowDom\n"],"names":["paramCase","createContext","forwardRef","useContext","useState","createPortal","useEnsuredForwardedRef","useIsomorphicLayoutEffect","ShadowDomContext","useShadowDomContext","ShadowDomContentPortal","props","root","children","shadowDomRootFactory","options","ShadowDomRoot","ref","mode","delegatesFocus","styleSheets","ssr","rest","node","setRoot","key","Tag","tag","current","shadowRoot","attachShadow","length","adoptedStyleSheets","error","name","existing","Provider","value","render","displayName","tags","Map","createShadowDomProxy","target","id","Proxy","get","_","has","set","ShadowDom"],"mappings":"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"}

package/src/lib/components/splash-screen.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2022 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 BoxProps, type ModalProps as MuiModalProps } from '@mui/material';
+export interface SplashScreenProps extends Partial<MuiModalProps<any, any>> {
+}
+/**
+ * The splash artwork on its own, with no Modal around it.
+ *
+ * `SplashScreen` below puts this in a `Modal`, which is a portal — and a
+ * portal renders NOTHING on the server and nothing on the first client
+ * render either. That is fine for a splash shown over an already-painted
+ * app, but useless as a boot-time fallback: a caller that needs markup in
+ * the SSR HTML (see the console's `NoSsr` fallback) has to render this
+ * directly inside its own positioned container.
+ */
+export declare const SplashScreenContent: import("react").ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const SplashScreen: import("react").ForwardRefExoticComponent<Omit<SplashScreenProps, "ref"> & import("react").RefAttributes<any>>;
+export { SplashScreen };
+export default SplashScreen;