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

package/src/lib/hooks/use-subscribable.js

@@ -0,0 +1,50 @@
+/**
+ * @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 { _isFnT } from "@aglyn/shared-util-tools";
+import isEqual from "lodash-es/isEqual.js";
+import { useCallback, useEffect, useState } from "react";
+export function useSubscribable($subscribable, initialValue, mapValue, dependencies = []) {
+    const [value, update] = useState(()=>initialValue);
+    const _dependencies = [
+        ...dependencies || []
+    ];
+    const mapUpdate = useCallback((newValue, prevValue)=>{
+        if (_isFnT(mapValue)) return mapValue(newValue, prevValue);
+        return newValue;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, _dependencies);
+    useEffect(()=>{
+        function handleChange(newValue) {
+            update((prevValue)=>{
+                const value = mapUpdate(newValue, prevValue);
+                if (isEqual(prevValue, value)) return prevValue;
+                return value;
+            });
+        }
+        const subscriber = $subscribable == null ? void 0 : $subscribable.subscribe(handleChange);
+        return ()=>{
+            var _subscriber_unsubscribe;
+            return subscriber == null ? void 0 : (_subscriber_unsubscribe = subscriber.unsubscribe) == null ? void 0 : _subscriber_unsubscribe.call(subscriber);
+        };
+    }, [
+        $subscribable,
+        mapUpdate
+    ]);
+    return value;
+}
+export default useSubscribable;
+
+//# sourceMappingURL=use-subscribable.js.map

package/src/lib/hooks/use-subscribable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/hooks/use-subscribable.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2022 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 isEqual from 'lodash-es/isEqual.js'\nimport { type DependencyList, useCallback, useEffect, useState } from 'react'\nimport type {\n  Observable as RxJsObservable,\n  Unsubscribable as RxJsUnsubscribable,\n} from 'rxjs'\n\nexport type SubscribableLike<T> = RxJsObservable<T> | Observable<T>\nexport type MapObservable<V, R> = (newValue: V, prevValue: R) => R\n\nexport interface Observable<T> {\n  subscribe: (listener: (value: T) => void) => {\n    unsubscribe: () => void\n  }\n  pipe?(...args: any[]): any\n}\n\nexport function useSubscribable<T>(\n  $subscribable: SubscribableLike<T>,\n): T | undefined\nexport function useSubscribable<\n  T,\n  U = any,\n  M extends MapObservable<U, U | T | undefined> = MapObservable<\n    U,\n    U | T | undefined\n  >,\n>(\n  $subscribable: SubscribableLike<U>,\n  initialValue: U | T,\n  mapValue?: M,\n  dependencies?: DependencyList,\n): U | T\nexport function useSubscribable<\n  T,\n  U = any,\n  M extends MapObservable<U, U | T | undefined> = MapObservable<\n    U,\n    U | T | undefined\n  >,\n>(\n  $subscribable: SubscribableLike<U>,\n  initialValue?: U | T,\n  mapValue?: M,\n  dependencies: DependencyList = [],\n): U | T | undefined {\n  const [value, update] = useState<T | U | undefined>(() => initialValue)\n  const _dependencies = [...(dependencies || [])]\n\n  const mapUpdate = useCallback((newValue: U, prevValue: T | U | undefined) => {\n    if (_isFnT(mapValue)) return mapValue(newValue, prevValue as T) as T\n    return newValue as U\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, _dependencies)\n\n  useEffect(() => {\n    function handleChange(newValue: U) {\n      update((prevValue) => {\n        const value = mapUpdate(newValue, prevValue)\n        if (isEqual(prevValue, value)) return prevValue\n        return value\n      })\n    }\n\n    const subscriber: RxJsUnsubscribable =\n      $subscribable?.subscribe(handleChange)\n    return () => subscriber?.unsubscribe?.()\n  }, [$subscribable, mapUpdate])\n\n  return value\n}\n\nexport default useSubscribable\n"],"names":["_isFnT","isEqual","useCallback","useEffect","useState","useSubscribable","$subscribable","initialValue","mapValue","dependencies","value","update","_dependencies","mapUpdate","newValue","prevValue","handleChange","subscriber","subscribe","unsubscribe"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,MAAM,QAAQ,2BAA0B;AACjD,OAAOC,aAAa,uBAAsB;AAC1C,SAA8BC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAgC7E,OAAO,SAASC,gBAQdC,aAAkC,EAClCC,YAAoB,EACpBC,QAAY,EACZC,eAA+B,EAAE;IAEjC,MAAM,CAACC,OAAOC,OAAO,GAAGP,SAA4B,IAAMG;IAC1D,MAAMK,gBAAgB;WAAKH,gBAAgB,EAAE;KAAE;IAE/C,MAAMI,YAAYX,YAAY,CAACY,UAAaC;QAC1C,IAAIf,OAAOQ,WAAW,OAAOA,SAASM,UAAUC;QAChD,OAAOD;IACP,uDAAuD;IACzD,GAAGF;IAEHT,UAAU;QACR,SAASa,aAAaF,QAAW;YAC/BH,OAAO,CAACI;gBACN,MAAML,QAAQG,UAAUC,UAAUC;gBAClC,IAAId,QAAQc,WAAWL,QAAQ,OAAOK;gBACtC,OAAOL;YACT;QACF;QAEA,MAAMO,aACJX,iCAAAA,cAAeY,SAAS,CAACF;QAC3B,OAAO;gBAAMC;mBAAAA,+BAAAA,0BAAAA,WAAYE,WAAW,qBAAvBF,6BAAAA;;IACf,GAAG;QAACX;QAAeO;KAAU;IAE7B,OAAOH;AACT;AAEA,eAAeL,gBAAe"}

package/src/lib/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2021 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 ApplyFilterFn = (query: string) => void;
+export type ClearFilterFn = () => void;

package/src/lib/types.js

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2021 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 { };
+
+//# sourceMappingURL=types.js.map

package/src/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/shared/ui/jsx/src/lib/types.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2021 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\n\nexport type ApplyFilterFn = (query: string) => void\nexport type ClearFilterFn = () => void\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAID,WAAsC"}

package/src/lib/utils/make-link-elements.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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.
+ */
+export type LinkElementProps = JSX.IntrinsicElements['link'];
+export type MakeLinkElementsConfig = Array<[
+    rel?: LinkElementProps['rel'],
+    href?: LinkElementProps['href'],
+    other?: Partial<LinkElementProps>
+]>;
+export declare function makeLinkElements(items: MakeLinkElementsConfig): JSX.Element[];
+export default makeLinkElements;

package/src/lib/utils/make-link-elements.js

@@ -0,0 +1,32 @@
+/**
+ * @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.
+ */ // export type LinkElementProps = LinkHTMLAttributes<HTMLLinkElement>
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function makeLinkElements(items) {
+    return items.map((item, key)=>{
+        var _ref, _rest_key;
+        const [rel, href, other] = item;
+        const _extends1 = _extends({}, other), {} = _extends1, rest = _extends({}, _extends1);
+        return /*#__PURE__*/ _jsx("link", _extends({
+            rel: rel,
+            href: href
+        }, rest), (_ref = (_rest_key = rest.key) != null ? _rest_key : rest.id) != null ? _ref : key);
+    });
+}
+export default makeLinkElements;
+
+//# sourceMappingURL=make-link-elements.js.map

package/src/lib/utils/make-link-elements.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/utils/make-link-elements.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2022 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\n// export type LinkElementProps = LinkHTMLAttributes<HTMLLinkElement>\nexport type LinkElementProps = JSX.IntrinsicElements['link']\nexport type MakeLinkElementsConfig = Array<[\n  rel?: LinkElementProps['rel'],\n  href?: LinkElementProps['href'],\n  other?: Partial<LinkElementProps>\n]>\n\nexport function makeLinkElements(items: MakeLinkElementsConfig): JSX.Element[] {\n  return items.map((item, key) => {\n    const [rel, href, other] = item\n    const {...rest} = {...other}\n    return (\n      <link\n        key={rest.key ?? rest.id ?? key}\n        rel={rel}\n        href={href}\n        {...rest}\n      />\n    )\n  })\n}\nexport default makeLinkElements\n"],"names":["makeLinkElements","items","map","item","key","rest","rel","href","other","link","id"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,qEAAqE;;;AAQrE,OAAO,SAASA,iBAAiBC,KAA6B;IAC5D,OAAOA,MAAMC,GAAG,CAAC,CAACC,MAAMC;YAKbC,MAAAA;QAJT,MAAM,CAACC,KAAKC,MAAMC,MAAM,GAAGL;QAC3B,MAAkB,YAAA,aAAIK,QAAhB,EAAS,GAAG,WAARH,oBAAQ;QAClB,qBACE,KAACI;YAECH,KAAKA;YACLC,MAAMA;WACFF,QAHCA,QAAAA,YAAAA,KAAKD,GAAG,YAARC,YAAYA,KAAKK,EAAE,YAAnBL,OAAuBD;IAMlC;AACF;AACA,eAAeJ,iBAAgB"}

package/src/lib/utils/make-meta-elements.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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.
+ */
+export type MetaElemElementProps = JSX.IntrinsicElements['meta'];
+export type MakeMetaElementsConfig = Array<[
+    name?: MetaElemElementProps['name'],
+    content?: MetaElemElementProps['content'],
+    other?: Partial<MetaElemElementProps>
+]>;
+export declare function makeMetaElements(items: MakeMetaElementsConfig): JSX.Element[];
+export default makeMetaElements;

package/src/lib/utils/make-meta-elements.js

@@ -0,0 +1,32 @@
+/**
+ * @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.
+ */ // export type MetaElemElementProps = MetaHTMLAttributes<HTMLMetaElement>
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function makeMetaElements(items) {
+    return items.map((item, key)=>{
+        var _ref, _rest_key;
+        const [name, content, other] = item;
+        const _extends1 = _extends({}, other), {} = _extends1, rest = _extends({}, _extends1);
+        return /*#__PURE__*/ _jsx("meta", _extends({
+            name: name,
+            content: content
+        }, rest), (_ref = (_rest_key = rest.key) != null ? _rest_key : rest.id) != null ? _ref : key);
+    });
+}
+export default makeMetaElements;
+
+//# sourceMappingURL=make-meta-elements.js.map

package/src/lib/utils/make-meta-elements.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/utils/make-meta-elements.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2022 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\n// export type MetaElemElementProps = MetaHTMLAttributes<HTMLMetaElement>\nexport type MetaElemElementProps = JSX.IntrinsicElements['meta']\nexport type MakeMetaElementsConfig = Array<[\n  name?: MetaElemElementProps['name'],\n  content?: MetaElemElementProps['content'],\n  other?: Partial<MetaElemElementProps>\n]>\n\nexport function makeMetaElements(items: MakeMetaElementsConfig): JSX.Element[] {\n  return items.map((item, key) => {\n    const [name, content, other] = item\n    const {...rest} = {...other}\n    return (\n      <meta\n        key={rest.key ?? rest.id ?? key}\n        name={name}\n        content={content}\n        {...rest}\n      />\n    )\n  })\n}\nexport default makeMetaElements\n"],"names":["makeMetaElements","items","map","item","key","rest","name","content","other","meta","id"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,yEAAyE;;;AAQzE,OAAO,SAASA,iBAAiBC,KAA6B;IAC5D,OAAOA,MAAMC,GAAG,CAAC,CAACC,MAAMC;YAKbC,MAAAA;QAJT,MAAM,CAACC,MAAMC,SAASC,MAAM,GAAGL;QAC/B,MAAkB,YAAA,aAAIK,QAAhB,EAAS,GAAG,WAARH,oBAAQ;QAClB,qBACE,KAACI;YAECH,MAAMA;YACNC,SAASA;WACLF,QAHCA,QAAAA,YAAAA,KAAKD,GAAG,YAARC,YAAYA,KAAKK,EAAE,YAAnBL,OAAuBD;IAMlC;AACF;AACA,eAAeJ,iBAAgB"}

package/src/lib/utils/scroll-overflow.d.ts

@@ -0,0 +1,120 @@
+/**
+ * @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.
+ */
+/**
+ * The house treatment for a box that scrolls its own content (AGL-1162,
+ * AGL-2568, AGL-3045).
+ *
+ * It lives in one module rather than in the components that need it because
+ * they had already drifted: the Markdown table and the Table element are the
+ * same block drawn by different code, one carried a fade the other did not,
+ * and neither could actually scroll. A shared shape is what keeps the answer
+ * to "how wide may this get" from being decided twice.
+ *
+ * It lives in THIS library rather than in `plugins-mui` because the console's
+ * tables need the same answer (AGL-3045): `ScrollTable` draws every table the
+ * console and its plugins render outside the shared grid, and a plugin may
+ * not import another plugin. Pure style data — no component, no side effect —
+ * so importing it by subpath costs a published page nothing it did not
+ * already pay for.
+ */
+/** The axis a box scrolls on, named as the `scroll()` timeline names it. */
+export type ScrollOverflowAxis = 'block' | 'inline';
+/**
+ * The fade's animation binding, for the rules of the scrolling box itself.
+ *
+ * It rides a scroll-driven animation on purpose: a `scroll()` timeline on a
+ * box with nothing to scroll is INACTIVE, so its animation applies no styles
+ * at all. That is the only way to say "fade only when overflowing" in CSS
+ * with no measuring and no JavaScript, and it degrades to plain
+ * unfaded-but-scrollable in a browser that lacks it.
+ */
+export declare const scrollOverflowFadeTimeline: (axis: ScrollOverflowAxis) => {
+    '@supports (animation-timeline: scroll())': {
+        animation: string;
+        animationTimeline: string;
+    };
+};
+/**
+ * The keyframes {@link scrollOverflowFadeTimeline} names.
+ *
+ * Held at the fade until the box is all but scrolled out, then dropped, so
+ * the last row or column is never the one the affordance obscures. `none`
+ * does not interpolate with a gradient, so that last step is a clean switch.
+ */
+export declare const scrollOverflowFadeKeyframes: (axis: ScrollOverflowAxis) => {
+    [x: string]: {
+        '0%, 92%': {
+            maskImage: string;
+        };
+        '100%': {
+            maskImage: string;
+        };
+    };
+};
+/**
+ * The widest a table is allowed to grow before it starts wrapping again.
+ *
+ * 560 rather than the natural width of the content: measured on
+ * `/alternatives/alternativeswebflow` at 375px, letting the table take its
+ * full `max-content` width came to 1010px — every cell on one line, but two
+ * thirds of the table off-screen and the row label lost as soon as the reader
+ * moves. Capped at 560 the same table is 658px tall instead of 1022 and its
+ * worst cell is 3 lines instead of 6, for 217px of sideways travel. Under the
+ * `sm` breakpoint on purpose, so the cap itself can never introduce a
+ * scrollbar on a tablet or a desktop.
+ */
+export declare const TABLE_SCROLL_MAX_WIDTH = 560;
+/**
+ * The sizing that lets a wide table overflow its wrapper — and leaves a
+ * narrow one exactly as it was.
+ *
+ * `width: 100%` was the bug: a table that can never exceed its wrapper never
+ * triggers the wrapper's `overflow-x`, so the browser compresses columns to
+ * min-content instead of scrolling. `max-content` asks for the width the
+ * content actually wants; `min-width: 100%` still fills the wrapper when the
+ * content wants less, which is why a short "Yes / No" grid keeps its present
+ * layout and gains no scrollbar. `min-width` beats `max-width` in the CSS
+ * used-width rules, so the cap applies only while the wrapper is narrower
+ * than it — a desktop table fills its container as before.
+ */
+export declare const scrollableTableSx: {
+    readonly width: "max-content";
+    readonly minWidth: "100%";
+    readonly maxWidth: 560;
+};
+/** The scroll box around such a table: it scrolls, and it says that it does. */
+export declare const scrollableTableWrapperSx: {
+    '@supports (animation-timeline: scroll())': {
+        animation: string;
+        animationTimeline: string;
+    };
+    overflowX: string;
+};
+/**
+ * What makes the scroll box reachable by keyboard and findable by a screen
+ * reader (WCAG 2.1.1).
+ *
+ * A scrollable region with no focusable descendant cannot be scrolled by
+ * keyboard at all — the arrow keys move the page behind it — so the box takes
+ * a tab stop of its own. `region` plus a name is what turns that tab stop
+ * into something announced rather than a silent landing spot.
+ */
+export declare const scrollRegionProps: (label: string) => {
+    tabIndex: number;
+    role: string;
+    'aria-label': string;
+};

package/src/lib/utils/scroll-overflow.js

@@ -0,0 +1,115 @@
+/**
+ * @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.
+ */ /**
+ * The house treatment for a box that scrolls its own content (AGL-1162,
+ * AGL-2568, AGL-3045).
+ *
+ * It lives in one module rather than in the components that need it because
+ * they had already drifted: the Markdown table and the Table element are the
+ * same block drawn by different code, one carried a fade the other did not,
+ * and neither could actually scroll. A shared shape is what keeps the answer
+ * to "how wide may this get" from being decided twice.
+ *
+ * It lives in THIS library rather than in `plugins-mui` because the console's
+ * tables need the same answer (AGL-3045): `ScrollTable` draws every table the
+ * console and its plugins render outside the shared grid, and a plugin may
+ * not import another plugin. Pure style data — no component, no side effect —
+ * so importing it by subpath costs a published page nothing it did not
+ * already pay for.
+ */ /** The axis a box scrolls on, named as the `scroll()` timeline names it. */ import { _ as _extends } from "@swc/helpers/_/_extends";
+/** How much of the trailing edge the fade covers. */ const FADE_EXTENT = '28px';
+const FADE_DIRECTION = {
+    block: 'to bottom',
+    inline: 'to right'
+};
+const fadeName = (axis)=>`aglyn-overflow-fade-${axis}`;
+/**
+ * The fade's animation binding, for the rules of the scrolling box itself.
+ *
+ * It rides a scroll-driven animation on purpose: a `scroll()` timeline on a
+ * box with nothing to scroll is INACTIVE, so its animation applies no styles
+ * at all. That is the only way to say "fade only when overflowing" in CSS
+ * with no measuring and no JavaScript, and it degrades to plain
+ * unfaded-but-scrollable in a browser that lacks it.
+ */ export const scrollOverflowFadeTimeline = (axis)=>({
+        '@supports (animation-timeline: scroll())': {
+            animation: `${fadeName(axis)} linear`,
+            animationTimeline: `scroll(self ${axis})`
+        }
+    });
+/**
+ * The keyframes {@link scrollOverflowFadeTimeline} names.
+ *
+ * Held at the fade until the box is all but scrolled out, then dropped, so
+ * the last row or column is never the one the affordance obscures. `none`
+ * does not interpolate with a gradient, so that last step is a clean switch.
+ */ export const scrollOverflowFadeKeyframes = (axis)=>({
+        [`@keyframes ${fadeName(axis)}`]: {
+            '0%, 92%': {
+                maskImage: `linear-gradient(${FADE_DIRECTION[axis]}, #000 calc(100% - ${FADE_EXTENT}), transparent)`
+            },
+            '100%': {
+                maskImage: 'none'
+            }
+        }
+    });
+/**
+ * The widest a table is allowed to grow before it starts wrapping again.
+ *
+ * 560 rather than the natural width of the content: measured on
+ * `/alternatives/alternativeswebflow` at 375px, letting the table take its
+ * full `max-content` width came to 1010px — every cell on one line, but two
+ * thirds of the table off-screen and the row label lost as soon as the reader
+ * moves. Capped at 560 the same table is 658px tall instead of 1022 and its
+ * worst cell is 3 lines instead of 6, for 217px of sideways travel. Under the
+ * `sm` breakpoint on purpose, so the cap itself can never introduce a
+ * scrollbar on a tablet or a desktop.
+ */ export const TABLE_SCROLL_MAX_WIDTH = 560;
+/**
+ * The sizing that lets a wide table overflow its wrapper — and leaves a
+ * narrow one exactly as it was.
+ *
+ * `width: 100%` was the bug: a table that can never exceed its wrapper never
+ * triggers the wrapper's `overflow-x`, so the browser compresses columns to
+ * min-content instead of scrolling. `max-content` asks for the width the
+ * content actually wants; `min-width: 100%` still fills the wrapper when the
+ * content wants less, which is why a short "Yes / No" grid keeps its present
+ * layout and gains no scrollbar. `min-width` beats `max-width` in the CSS
+ * used-width rules, so the cap applies only while the wrapper is narrower
+ * than it — a desktop table fills its container as before.
+ */ export const scrollableTableSx = {
+    width: 'max-content',
+    minWidth: '100%',
+    maxWidth: TABLE_SCROLL_MAX_WIDTH
+};
+/** The scroll box around such a table: it scrolls, and it says that it does. */ export const scrollableTableWrapperSx = _extends({
+    overflowX: 'auto'
+}, scrollOverflowFadeTimeline('inline'), scrollOverflowFadeKeyframes('inline'));
+/**
+ * What makes the scroll box reachable by keyboard and findable by a screen
+ * reader (WCAG 2.1.1).
+ *
+ * A scrollable region with no focusable descendant cannot be scrolled by
+ * keyboard at all — the arrow keys move the page behind it — so the box takes
+ * a tab stop of its own. `region` plus a name is what turns that tab stop
+ * into something announced rather than a silent landing spot.
+ */ export const scrollRegionProps = (label)=>({
+        tabIndex: 0,
+        role: 'region',
+        'aria-label': label
+    });
+
+//# sourceMappingURL=scroll-overflow.js.map

package/src/lib/utils/scroll-overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/utils/scroll-overflow.ts"],"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\n/**\n * The house treatment for a box that scrolls its own content (AGL-1162,\n * AGL-2568, AGL-3045).\n *\n * It lives in one module rather than in the components that need it because\n * they had already drifted: the Markdown table and the Table element are the\n * same block drawn by different code, one carried a fade the other did not,\n * and neither could actually scroll. A shared shape is what keeps the answer\n * to \"how wide may this get\" from being decided twice.\n *\n * It lives in THIS library rather than in `plugins-mui` because the console's\n * tables need the same answer (AGL-3045): `ScrollTable` draws every table the\n * console and its plugins render outside the shared grid, and a plugin may\n * not import another plugin. Pure style data — no component, no side effect —\n * so importing it by subpath costs a published page nothing it did not\n * already pay for.\n */\n\n/** The axis a box scrolls on, named as the `scroll()` timeline names it. */\nexport type ScrollOverflowAxis = 'block' | 'inline'\n\n/** How much of the trailing edge the fade covers. */\nconst FADE_EXTENT = '28px'\n\nconst FADE_DIRECTION: Record<ScrollOverflowAxis, string> = {\n  block: 'to bottom',\n  inline: 'to right',\n}\n\nconst fadeName = (axis: ScrollOverflowAxis) => `aglyn-overflow-fade-${axis}`\n\n/**\n * The fade's animation binding, for the rules of the scrolling box itself.\n *\n * It rides a scroll-driven animation on purpose: a `scroll()` timeline on a\n * box with nothing to scroll is INACTIVE, so its animation applies no styles\n * at all. That is the only way to say \"fade only when overflowing\" in CSS\n * with no measuring and no JavaScript, and it degrades to plain\n * unfaded-but-scrollable in a browser that lacks it.\n */\nexport const scrollOverflowFadeTimeline = (axis: ScrollOverflowAxis) => ({\n  '@supports (animation-timeline: scroll())': {\n    animation: `${fadeName(axis)} linear`,\n    animationTimeline: `scroll(self ${axis})`,\n  },\n})\n\n/**\n * The keyframes {@link scrollOverflowFadeTimeline} names.\n *\n * Held at the fade until the box is all but scrolled out, then dropped, so\n * the last row or column is never the one the affordance obscures. `none`\n * does not interpolate with a gradient, so that last step is a clean switch.\n */\nexport const scrollOverflowFadeKeyframes = (axis: ScrollOverflowAxis) => ({\n  [`@keyframes ${fadeName(axis)}`]: {\n    '0%, 92%': {\n      maskImage: `linear-gradient(${FADE_DIRECTION[axis]}, #000 calc(100% - ${FADE_EXTENT}), transparent)`,\n    },\n    '100%': { maskImage: 'none' },\n  },\n})\n\n/**\n * The widest a table is allowed to grow before it starts wrapping again.\n *\n * 560 rather than the natural width of the content: measured on\n * `/alternatives/alternativeswebflow` at 375px, letting the table take its\n * full `max-content` width came to 1010px — every cell on one line, but two\n * thirds of the table off-screen and the row label lost as soon as the reader\n * moves. Capped at 560 the same table is 658px tall instead of 1022 and its\n * worst cell is 3 lines instead of 6, for 217px of sideways travel. Under the\n * `sm` breakpoint on purpose, so the cap itself can never introduce a\n * scrollbar on a tablet or a desktop.\n */\nexport const TABLE_SCROLL_MAX_WIDTH = 560\n\n/**\n * The sizing that lets a wide table overflow its wrapper — and leaves a\n * narrow one exactly as it was.\n *\n * `width: 100%` was the bug: a table that can never exceed its wrapper never\n * triggers the wrapper's `overflow-x`, so the browser compresses columns to\n * min-content instead of scrolling. `max-content` asks for the width the\n * content actually wants; `min-width: 100%` still fills the wrapper when the\n * content wants less, which is why a short \"Yes / No\" grid keeps its present\n * layout and gains no scrollbar. `min-width` beats `max-width` in the CSS\n * used-width rules, so the cap applies only while the wrapper is narrower\n * than it — a desktop table fills its container as before.\n */\nexport const scrollableTableSx = {\n  width: 'max-content',\n  minWidth: '100%',\n  maxWidth: TABLE_SCROLL_MAX_WIDTH,\n} as const\n\n/** The scroll box around such a table: it scrolls, and it says that it does. */\nexport const scrollableTableWrapperSx = {\n  overflowX: 'auto',\n  ...scrollOverflowFadeTimeline('inline'),\n  ...scrollOverflowFadeKeyframes('inline'),\n}\n\n/**\n * What makes the scroll box reachable by keyboard and findable by a screen\n * reader (WCAG 2.1.1).\n *\n * A scrollable region with no focusable descendant cannot be scrolled by\n * keyboard at all — the arrow keys move the page behind it — so the box takes\n * a tab stop of its own. `region` plus a name is what turns that tab stop\n * into something announced rather than a silent landing spot.\n */\nexport const scrollRegionProps = (label: string) => ({\n  tabIndex: 0,\n  role: 'region',\n  'aria-label': label,\n})\n"],"names":["FADE_EXTENT","FADE_DIRECTION","block","inline","fadeName","axis","scrollOverflowFadeTimeline","animation","animationTimeline","scrollOverflowFadeKeyframes","maskImage","TABLE_SCROLL_MAX_WIDTH","scrollableTableSx","width","minWidth","maxWidth","scrollableTableWrapperSx","overflowX","scrollRegionProps","label","tabIndex","role"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;;;;;;;;;;;;;;;CAgBC,GAED,0EAA0E;AAG1E,mDAAmD,GACnD,MAAMA,cAAc;AAEpB,MAAMC,iBAAqD;IACzDC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,WAAW,CAACC,OAA6B,CAAC,oBAAoB,EAAEA,MAAM;AAE5E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CAACD,OAA8B,CAAA;QACvE,4CAA4C;YAC1CE,WAAW,GAAGH,SAASC,MAAM,OAAO,CAAC;YACrCG,mBAAmB,CAAC,YAAY,EAAEH,KAAK,CAAC,CAAC;QAC3C;IACF,CAAA,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMI,8BAA8B,CAACJ,OAA8B,CAAA;QACxE,CAAC,CAAC,WAAW,EAAED,SAASC,OAAO,CAAC,EAAE;YAChC,WAAW;gBACTK,WAAW,CAAC,gBAAgB,EAAET,cAAc,CAACI,KAAK,CAAC,mBAAmB,EAAEL,YAAY,eAAe,CAAC;YACtG;YACA,QAAQ;gBAAEU,WAAW;YAAO;QAC9B;IACF,CAAA,EAAE;AAEF;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,yBAAyB,IAAG;AAEzC;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,oBAAoB;IAC/BC,OAAO;IACPC,UAAU;IACVC,UAAUJ;AACZ,EAAU;AAEV,8EAA8E,GAC9E,OAAO,MAAMK,2BAA2B;IACtCC,WAAW;GACRX,2BAA2B,WAC3BG,4BAA4B,WAChC;AAED;;;;;;;;CAQC,GACD,OAAO,MAAMS,oBAAoB,CAACC,QAAmB,CAAA;QACnDC,UAAU;QACVC,MAAM;QACN,cAAcF;IAChB,CAAA,EAAE"}

package/src/lib/utils/vendor.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @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.
+ */
+export { isContextConsumer, isContextProvider, isElement as isReactElement, isForwardRef, isFragment, isLazy, isMemo, isPortal, isProfiler, isStrictMode, isSuspense, isValidElementType, } from 'react-is';

package/src/lib/utils/vendor.js

@@ -0,0 +1,18 @@
+/**
+ * @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.
+ */ export { isContextConsumer, isContextProvider, isElement as isReactElement, isForwardRef, isFragment, isLazy, isMemo, isPortal, isProfiler, isStrictMode, isSuspense, isValidElementType } from "react-is";
+
+//# sourceMappingURL=vendor.js.map

package/src/lib/utils/vendor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/utils/vendor.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2022 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 {\n  isContextConsumer,\n  isContextProvider,\n  isElement as isReactElement,\n  isForwardRef,\n  isFragment,\n  isLazy,\n  isMemo,\n  isPortal,\n  isProfiler,\n  isStrictMode,\n  isSuspense,\n  isValidElementType,\n} from 'react-is'\n"],"names":["isContextConsumer","isContextProvider","isElement","isReactElement","isForwardRef","isFragment","isLazy","isMemo","isPortal","isProfiler","isStrictMode","isSuspense","isValidElementType"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,SACEA,iBAAiB,EACjBC,iBAAiB,EACjBC,aAAaC,cAAc,EAC3BC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,kBAAkB,QACb,WAAU"}