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

package/src/lib/components/error-boundary.component.js

@@ -0,0 +1,86 @@
+/**
+ * @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.
+ */ 'use client';
+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";
+import { getDisplayName } from "@aglyn/shared-util-tools";
+import { hoistNonReactStatics } from "@aglyn/shared-util-vendor";
+import { Component, forwardRef } from "react";
+/**
+ * @see https://reactjs.org/docs/error-boundaries.html
+ */ let ErrorBoundaryComponentClass = class ErrorBoundaryComponentClass extends Component {
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        console.error(error, 'getDerivedStateFromError');
+        return {
+            hasError: true,
+            error
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        // You can also log the error to an error reporting service
+        // logErrorToMyService(error, errorInfo)
+        console.error(error, errorInfo, 'componentDidCatch');
+        if (typeof this.props.onCatch === 'function') {
+            this.props.onCatch(error, errorInfo);
+        }
+    }
+    render() {
+        var _this_props_fallback;
+        return this.state.hasError ? (_this_props_fallback = this.props.fallback) != null ? _this_props_fallback : /*#__PURE__*/ _jsx("h6", {
+            children: "Something went wrong..."
+        }) : this.props.children;
+    }
+    constructor(props){
+        super(props);
+        this.state = {
+            hasError: false,
+            error: undefined
+        };
+    }
+};
+ErrorBoundaryComponentClass.displayName = 'ErrorBoundaryComponentClass';
+ErrorBoundaryComponentClass.aglyn = true;
+const ErrorBoundaryComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children } = props, rest = _object_without_properties_loose(props, [
+        "children"
+    ]);
+    return /*#__PURE__*/ _jsx(ErrorBoundaryComponentClass, _extends({
+        ref: ref
+    }, rest, {
+        children: children
+    }));
+});
+ErrorBoundaryComponent.displayName = 'ErrorBoundaryComponent';
+ErrorBoundaryComponent.aglyn = true;
+export function withErrorBoundary(WrappedComponent, options) {
+    const displayName = getDisplayName(WrappedComponent);
+    const WithErrorBoundary = /*#__PURE__*/ forwardRef((props, ref)=>{
+        return /*#__PURE__*/ _jsx(ErrorBoundaryComponentClass, _extends({}, options, {
+            children: /*#__PURE__*/ _jsx(WrappedComponent, _extends({
+                ref: ref
+            }, props))
+        }));
+    });
+    WithErrorBoundary.displayName = `WithErrorBoundary(${displayName})`;
+    hoistNonReactStatics(WithErrorBoundary, WrappedComponent);
+    return WithErrorBoundary;
+}
+export { ErrorBoundaryComponent };
+export default ErrorBoundaryComponent;
+
+//# sourceMappingURL=error-boundary.component.js.map

package/src/lib/components/error-boundary.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/error-boundary.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'use client'\n\nimport { getDisplayName } from '@aglyn/shared-util-tools'\nimport { hoistNonReactStatics } from '@aglyn/shared-util-vendor'\nimport {\n  Component,\n  type ComponentType,\n  type ErrorInfo,\n  forwardRef,\n  type ForwardRefExoticComponent,\n  type PropsWithoutRef,\n  type RefAttributes,\n} from 'react'\n\nexport interface ErrorBoundaryProps {\n  children?: JSX.Children\n  fallback?: JSX.Node\n  onCatch?: (error: Error, errorInfo: ErrorInfo) => void\n}\n\ntype State = {\n  hasError: boolean\n  error: any\n}\n\n/**\n * @see https://reactjs.org/docs/error-boundaries.html\n */\nclass ErrorBoundaryComponentClass extends Component<ErrorBoundaryProps, State> {\n  public static displayName = 'ErrorBoundaryComponentClass'\n  public static readonly aglyn = true\n\n  constructor(props: ErrorBoundaryProps) {\n    super(props)\n    this.state = {\n      hasError: false,\n      error: undefined,\n    }\n  }\n\n  public static getDerivedStateFromError(error: Error) {\n    // Update state so the next render will show the fallback UI.\n    console.error(error, 'getDerivedStateFromError')\n    return { hasError: true, error }\n  }\n\n  public override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    // You can also log the error to an error reporting service\n    // logErrorToMyService(error, errorInfo)\n    console.error(error, errorInfo, 'componentDidCatch')\n\n    if (typeof this.props.onCatch === 'function') {\n      this.props.onCatch(error, errorInfo)\n    }\n  }\n\n  public override render() {\n    return this.state.hasError\n      ? this.props.fallback ?? <h6>Something went wrong...</h6>\n      : this.props.children\n  }\n}\n\nconst ErrorBoundaryComponent = forwardRef<\n  ErrorBoundaryComponentClass,\n  ErrorBoundaryProps\n>((props, ref) => {\n  const { children, ...rest } = props\n\n  return (\n    <ErrorBoundaryComponentClass ref={ref} {...rest}>\n      {children}\n    </ErrorBoundaryComponentClass>\n  )\n})\nErrorBoundaryComponent.displayName = 'ErrorBoundaryComponent'\nErrorBoundaryComponent.aglyn = true\n\nexport function withErrorBoundary<P, T>(\n  WrappedComponent: ComponentType<P>,\n  options?: ErrorBoundaryProps,\n): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {\n  const displayName = getDisplayName(WrappedComponent)\n  const WithErrorBoundary = forwardRef<T, P>((props, ref) => {\n    return (\n      <ErrorBoundaryComponentClass {...options}>\n        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n        <WrappedComponent ref={ref as any} {...(props as any)} />\n      </ErrorBoundaryComponentClass>\n    )\n  })\n  WithErrorBoundary.displayName = `WithErrorBoundary(${displayName})`\n  hoistNonReactStatics(WithErrorBoundary, WrappedComponent)\n\n  return WithErrorBoundary\n}\n\nexport { ErrorBoundaryComponent }\nexport default ErrorBoundaryComponent\n"],"names":["getDisplayName","hoistNonReactStatics","Component","forwardRef","ErrorBoundaryComponentClass","getDerivedStateFromError","error","console","hasError","componentDidCatch","errorInfo","props","onCatch","render","state","fallback","h6","children","undefined","displayName","aglyn","ErrorBoundaryComponent","ref","rest","withErrorBoundary","WrappedComponent","options","WithErrorBoundary"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;;AAEA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,oBAAoB,QAAQ,4BAA2B;AAChE,SACEC,SAAS,EAGTC,UAAU,QAIL,QAAO;AAad;;CAEC,GACD,IAAA,AAAMC,8BAAN,MAAMA,oCAAoCF;IAYxC,OAAcG,yBAAyBC,KAAY,EAAE;QACnD,6DAA6D;QAC7DC,QAAQD,KAAK,CAACA,OAAO;QACrB,OAAO;YAAEE,UAAU;YAAMF;QAAM;IACjC;IAEgBG,kBAAkBH,KAAY,EAAEI,SAAoB,EAAE;QACpE,2DAA2D;QAC3D,wCAAwC;QACxCH,QAAQD,KAAK,CAACA,OAAOI,WAAW;QAEhC,IAAI,OAAO,IAAI,CAACC,KAAK,CAACC,OAAO,KAAK,YAAY;YAC5C,IAAI,CAACD,KAAK,CAACC,OAAO,CAACN,OAAOI;QAC5B;IACF;IAEgBG,SAAS;YAEnB;QADJ,OAAO,IAAI,CAACC,KAAK,CAACN,QAAQ,IACtB,uBAAA,IAAI,CAACG,KAAK,CAACI,QAAQ,YAAnB,qCAAuB,KAACC;sBAAG;aAC3B,IAAI,CAACL,KAAK,CAACM,QAAQ;IACzB;IA5BA,YAAYN,KAAyB,CAAE;QACrC,KAAK,CAACA;QACN,IAAI,CAACG,KAAK,GAAG;YACXN,UAAU;YACVF,OAAOY;QACT;IACF;AAuBF;AAjCMd,4BACUe,cAAc;AADxBf,4BAEmBgB,QAAQ;AAiCjC,MAAMC,uCAAyBlB,WAG7B,CAACQ,OAAOW;IACR,MAAM,EAAEL,QAAQ,EAAW,GAAGN,OAATY,wCAASZ;;;IAE9B,qBACE,KAACP;QAA4BkB,KAAKA;OAASC;kBACxCN;;AAGP;AACAI,uBAAuBF,WAAW,GAAG;AACrCE,uBAAuBD,KAAK,GAAG;AAE/B,OAAO,SAASI,kBACdC,gBAAkC,EAClCC,OAA4B;IAE5B,MAAMP,cAAcnB,eAAeyB;IACnC,MAAME,kCAAoBxB,WAAiB,CAACQ,OAAOW;QACjD,qBACE,KAAClB,0CAAgCsB;sBAE/B,cAAA,KAACD;gBAAiBH,KAAKA;eAAiBX;;IAG9C;IACAgB,kBAAkBR,WAAW,GAAG,CAAC,kBAAkB,EAAEA,YAAY,CAAC,CAAC;IACnElB,qBAAqB0B,mBAAmBF;IAExC,OAAOE;AACT;AAEA,SAASN,sBAAsB,GAAE;AACjC,eAAeA,uBAAsB"}

package/src/lib/components/grid-buttons.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @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 { type ButtonProps as MuiButtonProps, type GridProps } from '@mui/material';
+import { type ElementType } from 'react';
+export interface GridButtonsProps<P = MuiButtonProps> extends GridProps {
+    items: (P & {
+        GridItemProps?: GridProps;
+    })[];
+    ItemComponent?: ElementType<P>;
+}
+export declare const GridButtons: import("react").ForwardRefExoticComponent<Omit<GridButtonsProps<any>, "ref"> & import("react").RefAttributes<any>>;
+export default GridButtons;

package/src/lib/components/grid-buttons.js

@@ -0,0 +1,45 @@
+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 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 { Button } from "@mui/material";
+import { forwardRef } from "react";
+import GridItems from "./grid-items.js";
+export const GridButtons = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { items = [], ItemComponent = Button } = props, rest = _object_without_properties_loose(props, [
+        "items",
+        "ItemComponent"
+    ]);
+    return /*#__PURE__*/ _jsx(GridItems, _extends({
+        // Buttons. Stacking them into columns would read as a menu, not a row.
+        masonry: false,
+        ref: ref,
+        items: items.map((_0)=>{
+            let { GridItemProps } = _0, item = _object_without_properties_loose(_0, [
+                "GridItemProps"
+            ]);
+            return _extends({
+                children: /*#__PURE__*/ _jsx(ItemComponent, _extends({}, item))
+            }, GridItemProps);
+        })
+    }, rest));
+});
+GridButtons.displayName = 'GridButtons';
+GridButtons.aglyn = true;
+export default GridButtons;
+
+//# sourceMappingURL=grid-buttons.js.map

package/src/lib/components/grid-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/grid-buttons.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 {\n  Button,\n  type ButtonProps as MuiButtonProps,\n  type GridProps,\n} from '@mui/material'\nimport { type ElementType, forwardRef } from 'react'\nimport GridItems from './grid-items'\n\n/* eslint-disable-next-line */\nexport interface GridButtonsProps<P = MuiButtonProps> extends GridProps {\n  items: (P & { GridItemProps?: GridProps })[]\n  ItemComponent?: ElementType<P>\n}\n\nexport const GridButtons = forwardRef<any, GridButtonsProps<any>>(\n  (props, ref) => {\n    const { items = [], ItemComponent = Button, ...rest } = props\n    return (\n      <GridItems\n        // Buttons. Stacking them into columns would read as a menu, not a row.\n        masonry={false}\n        ref={ref}\n        items={items.map(({ GridItemProps, ...item }) => ({\n          children: <ItemComponent {...item} />,\n          ...GridItemProps,\n        }))}\n        {...rest}\n      />\n    )\n  },\n)\n\nGridButtons.displayName = 'GridButtons'\nGridButtons.aglyn = true\n\nexport default GridButtons\n"],"names":["Button","forwardRef","GridItems","GridButtons","props","ref","items","ItemComponent","rest","masonry","map","GridItemProps","item","children","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SACEA,MAAM,QAGD,gBAAe;AACtB,SAA2BC,UAAU,QAAQ,QAAO;AACpD,OAAOC,eAAe,kBAAc;AAQpC,OAAO,MAAMC,4BAAcF,WACzB,CAACG,OAAOC;IACN,MAAM,EAAEC,QAAQ,EAAE,EAAEC,gBAAgBP,MAAM,EAAW,GAAGI,OAATI,wCAASJ;;;;IACxD,qBACE,KAACF;QACC,uEAAuE;QACvEO,SAAS;QACTJ,KAAKA;QACLC,OAAOA,MAAMI,GAAG,CAAC;gBAAC,EAAEC,aAAa,EAAW,OAANC;;;mBAAY;gBAChDC,wBAAU,KAACN,4BAAkBK;eAC1BD;;OAEDH;AAGV,GACD;AAEDL,YAAYW,WAAW,GAAG;AAC1BX,YAAYY,KAAK,GAAG;AAEpB,eAAeZ,YAAW"}

package/src/lib/components/grid-items.d.ts

@@ -0,0 +1,103 @@
+/**
+ * @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 { type GridProps } from '@mui/material';
+export interface GridItemsProps extends GridProps, ReplaceKey<JSX.OverrideableComponentProps, 'component', 'itemComponent'> {
+    items: GridProps[];
+    /**
+     * Lay the items out as MASONRY instead of rigid rows.
+     *
+     * ## The bug this exists to kill
+     *
+     * A `<GridItems>` of cards is a twelve-column flex row that wraps, and every
+     * item in a wrapped row is as tall as the tallest one in it. Two consequences,
+     * both reported from real pages:
+     *
+     * 1. **Holes.** Billing puts `Current plan` (4) beside `Usage` (8). `Usage` is
+     *    more than twice as tall, so the row is `Usage`-tall and the area under
+     *    `Current plan` is dead — while `Metered usage estimate` (4), the card
+     *    shaped to fill it, is pushed onto its own row far below with eight
+     *    columns of nothing beside it.
+     * 2. **The stranded sidebar.** The marketplace listing detail is `body` (8),
+     *    `changelog` (8), `sidebar` (4). Two eights cannot share a row, so the
+     *    changelog wraps — and the sidebar, which follows it in source order,
+     *    wraps WITH it. `Install`, the point of the page, starts a screen below
+     *    the top of the content with blank space above it.
+     *
+     * ## What it does instead
+     *
+     * Items are bucketed into COLUMNS by their `size`, and each column stacks its
+     * own cards at their natural heights. `Current plan` and `Metered usage
+     * estimate` are both 4-wide, so they become one 4-wide column beside the
+     * 8-wide `Usage` column; `body` and `changelog` become one 8-wide column
+     * beside the 4-wide sidebar. A full-width item (span 12) interrupts the
+     * bucketing and takes a band of its own, so source order is preserved across
+     * it — without that, billing's five full-width cards would collect at the
+     * bottom in one column and reorder the page.
+     *
+     * ## Why bucketing rather than measured row spans
+     *
+     * The obvious implementation is a fine-grained row grid where each card's
+     * MEASURED height becomes a `grid-row: span n`, packed `dense`. It was built
+     * that way first and it is a trap: `n` is only correct until the card's
+     * content changes size, and a card whose `n` is too small does not merely
+     * leave a gap — the next card is placed UNDERNEATH IT. Overlapping cards are
+     * a far worse defect than the holes this mode exists to close, and they
+     * appear exactly when measurement is least reliable (data still arriving,
+     * images still decoding). Keeping the whole thing in CSS means there is no
+     * measurement to go stale: heights are whatever the browser computes, every
+     * frame, and cards cannot overlap because nothing ever claims a height on
+     * their behalf.
+     *
+     * It also costs nothing at hydration. A measured layout renders wrong on the
+     * server and corrects on mount; this renders identically in both.
+     *
+     * ## The one behaviour change
+     *
+     * At a breakpoint where every item is full width (`xs: 12`, the phone case)
+     * the columns stack, so cards are read column by column rather than in the
+     * authored order — on billing, `Current plan` then `Metered usage estimate`
+     * then `Usage`. Cards that share a column are the ones that share a width,
+     * which in practice is what makes them belong together.
+     */
+    masonry?: boolean;
+}
+/**
+ * Marks an element as a frame around content that others draw, such as the
+ * console's widget zone stacking the cards plugins render (AGL-3050).
+ *
+ * `GridItems masonry` and `CardColumns` hide an item that rendered nothing.
+ * An item holding only a frame whose contents all drew nothing is the same
+ * absent card one level down, and the item is not `:empty` while the frame is
+ * in it, so both hide that item too. The mark is what tells a frame apart
+ * from an element that draws something with no children of its own: an item
+ * whose one element is an image, a divider or a loading skeleton is never
+ * mistaken for an absent card.
+ */
+export declare const ABSENT_WHEN_EMPTY_ATTRIBUTE = "data-absent-when-empty";
+/** The mark, as props to spread onto the frame: `<Stack {...ABSENT_WHEN_EMPTY}>`. */
+export declare const ABSENT_WHEN_EMPTY: {
+    readonly "data-absent-when-empty": "";
+};
+/**
+ * A marked frame that is its parent's only element and drew nothing.
+ *
+ * Attribute last: the selector engine jsdom ships misreads an attribute
+ * selector that opens a compound inside `:has()`, and throws.
+ */
+export declare const EMPTY_FRAME_SELECTOR = ":only-child:empty[data-absent-when-empty]";
+export declare const GridItems: import("react").ForwardRefExoticComponent<Omit<GridItemsProps, "ref"> & import("react").RefAttributes<any>>;
+export default GridItems;

package/src/lib/components/grid-items.js

@@ -0,0 +1,336 @@
+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 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 { Box, Grid } from "@mui/material";
+import { forwardRef } from "react";
+/**
+ * Cards of unequal height are the common case, and a row is as tall as its
+ * tallest card, so the default leaves no hole for a short card to sit in.
+ * Pass `masonry={false}` where the items really are a ROW — tiles, buttons, a
+ * navigation column beside its content, a band of stat figures — and say so
+ * where you pass it, because a row is now the deliberate choice.
+ */ const MASONRY_BY_DEFAULT = true;
+/** The breakpoint an item with no explicit `size` is sized at. */ const BASE_BREAKPOINT = 'xs';
+const FULL_SPAN = 12;
+/**
+ * MUI Grid props that describe the flex-row layout masonry replaces, and so
+ * must not reach the masonry container.
+ */ const FLEX_ROW_PROPS = [
+    'container',
+    'spacing',
+    'rowSpacing',
+    'columnSpacing',
+    'columns',
+    'direction',
+    'wrap',
+    'size',
+    'offset'
+];
+/**
+ * An item's `size` as a per-breakpoint column count.
+ *
+ * `'auto'`/`'grow'` have no column-count equivalent and become full width,
+ * which is the safe reading: an item that wanted to size itself gets a band of
+ * its own rather than being bucketed against a width it never declared.
+ */ function spanProfile(size) {
+    const one = (value)=>typeof value === 'number' && value > 0 ? Math.min(FULL_SPAN, Math.round(value)) : FULL_SPAN;
+    if (size == null) return {
+        [BASE_BREAKPOINT]: FULL_SPAN
+    };
+    if (typeof size === 'number' || typeof size === 'string') return {
+        [BASE_BREAKPOINT]: one(size)
+    };
+    if (Array.isArray(size)) return {
+        [BASE_BREAKPOINT]: one(size[0])
+    };
+    const entries = Object.entries(size).map(([breakpoint, value])=>[
+            breakpoint,
+            one(value)
+        ]);
+    return entries.length ? Object.fromEntries(entries) : {
+        [BASE_BREAKPOINT]: FULL_SPAN
+    };
+}
+/** The profile as a `grid-column` value `sx` can resolve per breakpoint. */ const gridColumnFor = (profile)=>Object.fromEntries(Object.entries(profile).map(([breakpoint, span])=>[
+            breakpoint,
+            `span ${span}`
+        ]));
+/** MUI's breakpoint keys, narrowest first. */ const BREAKPOINT_ORDER = [
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl'
+];
+/**
+ * The column count at the WIDEST breakpoint the item declares — the width it is
+ * bucketed by.
+ *
+ * Not `Math.max` over the profile, which was the first attempt and is wrong in
+ * a way that silently disables the whole mode: essentially every item in this
+ * codebase is written `{ xs: 12, md: 4 }`, so the maximum is 12 for all of them
+ * and every card reads as full width. It has to be the value at the widest
+ * declared breakpoint — 4 — because the multi-column arrangement only exists at
+ * wide viewports in the first place.
+ *
+ * Read from the profile rather than from the current viewport on purpose:
+ * measuring the breakpoint in JS would make the server and client renders
+ * disagree. Bucketing is decided once; `sx` resolves the responsive
+ * `grid-column` in CSS, so the narrow layout still collapses to a stack.
+ */ const layoutSpan = (profile)=>{
+    const declared = BREAKPOINT_ORDER.filter((breakpoint)=>profile[breakpoint] != null);
+    const widest = declared[declared.length - 1];
+    return widest ? profile[widest] : FULL_SPAN;
+};
+/** `sx` (which may already be an array or a function) as a flat array. */ const sxArray = (sx)=>sx == null ? [] : Array.isArray(sx) ? sx : [
+        sx
+    ];
+/**
+ * A band of ONE width fans out; a band of mixed widths does not.
+ *
+ * Same-size items sharing a column is right when something else occupies the
+ * rest of the row — billing's two 4-wide cards stacked beside its 8-wide
+ * `Usage` is the case this mode was built for. It is wrong when the band is
+ * ALL of that width: eight `md: 6` health probes then queue in one 6-wide
+ * column with six columns of nothing beside them, which is a worse layout than
+ * the rigid rows masonry replaced.
+ *
+ * So a single-width band spreads across the `12 / span` columns it was asking
+ * for, round-robin, which keeps left-to-right reading order — item 0 top-left,
+ * item 1 top-right — rather than the column-major order that filling one
+ * column at a time would give.
+ */ function fanOut(band) {
+    if (band.length !== 1) return band;
+    const [column] = band;
+    const span = layoutSpan(column.profile);
+    const columns = Math.floor(FULL_SPAN / span);
+    if (columns < 2 || column.entries.length < 2) return band;
+    const spread = Array.from({
+        length: columns
+    }, (_, i)=>({
+            key: `${column.key}#${i}`,
+            profile: column.profile,
+            // Typed, not inferred: an empty literal is `any[]` under the stricter
+            // library tsconfigs even though the annotation above it is not enough to
+            // narrow a property inside `Array.from`'s callback.
+            entries: []
+        }));
+    column.entries.forEach((entry, index)=>{
+        spread[index % columns].entries.push(entry);
+    });
+    return spread.filter((candidate)=>candidate.entries.length > 0);
+}
+/**
+ * Marks an element as a frame around content that others draw, such as the
+ * console's widget zone stacking the cards plugins render (AGL-3050).
+ *
+ * `GridItems masonry` and `CardColumns` hide an item that rendered nothing.
+ * An item holding only a frame whose contents all drew nothing is the same
+ * absent card one level down, and the item is not `:empty` while the frame is
+ * in it, so both hide that item too. The mark is what tells a frame apart
+ * from an element that draws something with no children of its own: an item
+ * whose one element is an image, a divider or a loading skeleton is never
+ * mistaken for an absent card.
+ */ export const ABSENT_WHEN_EMPTY_ATTRIBUTE = 'data-absent-when-empty';
+/** The mark, as props to spread onto the frame: `<Stack {...ABSENT_WHEN_EMPTY}>`. */ export const ABSENT_WHEN_EMPTY = {
+    [ABSENT_WHEN_EMPTY_ATTRIBUTE]: ''
+};
+/**
+ * A marked frame that is its parent's only element and drew nothing.
+ *
+ * Attribute last: the selector engine jsdom ships misreads an attribute
+ * selector that opens a compound inside `:has()`, and throws.
+ */ export const EMPTY_FRAME_SELECTOR = `:only-child:empty[${ABSENT_WHEN_EMPTY_ATTRIBUTE}]`;
+/**
+ * A column with nothing to draw, hidden wherever it spans the whole row.
+ *
+ * Hiding its item is not enough. The column is a grid item of its own, so a
+ * column whose item is hidden would stay behind as a zero-height grid row with
+ * the grid's `gap` on both sides of it: a double gap between the cards around
+ * an absent full-width band. A full-width item is always the only item in its
+ * column, and it is absent in two shapes: it rendered nothing, or it holds
+ * only a frame that drew nothing.
+ *
+ * Only at the widths where the column spans all twelve tracks. A narrower
+ * column shares its row with the columns beside it, so an empty one adds no
+ * row there, and hiding it would let auto-placement slide the next column into
+ * its tracks.
+ */ function emptyColumnRules(profile) {
+    const display = Object.fromEntries(Object.entries(profile).map(([breakpoint, span])=>[
+            breakpoint,
+            span >= FULL_SPAN ? 'none' : 'flex'
+        ]));
+    return {
+        '&:has(> :only-child:empty)': {
+            display
+        },
+        [`&:has(> :only-child > ${EMPTY_FRAME_SELECTOR})`]: {
+            display
+        }
+    };
+}
+/**
+ * Items → bands → columns.
+ *
+ * A band is a maximal run of items that are not full width; a full-width item
+ * is a band on its own. Within a band, items that declare the same `size` share
+ * a column, in source order — unless the band is entirely one width, which
+ * {@link fanOut} spreads.
+ */ function buildBands(items) {
+    const bands = [];
+    let current = null;
+    items.forEach((item, index)=>{
+        const profile = spanProfile(item.size);
+        const key = JSON.stringify(profile);
+        if (layoutSpan(profile) >= FULL_SPAN) {
+            bands.push([
+                {
+                    key,
+                    profile,
+                    entries: [
+                        {
+                            item,
+                            index
+                        }
+                    ]
+                }
+            ]);
+            current = null;
+            return;
+        }
+        if (!current) {
+            current = [];
+            bands.push(current);
+        }
+        const column = current.find((candidate)=>candidate.key === key);
+        if (column) column.entries.push({
+            item,
+            index
+        });
+        else current.push({
+            key,
+            profile,
+            entries: [
+                {
+                    item,
+                    index
+                }
+            ]
+        });
+    });
+    return bands.map(fanOut);
+}
+export const GridItems = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { items = [], itemComponent: ItemComponent = Grid, masonry = MASONRY_BY_DEFAULT, spacing = 0, sx } = props, rest = _object_without_properties_loose(props, [
+        "items",
+        "itemComponent",
+        "masonry",
+        "spacing",
+        "sx"
+    ]);
+    if (!masonry) {
+        return /*#__PURE__*/ _jsx(Grid, _extends({
+            ref: ref,
+            container: true,
+            spacing: spacing,
+            sx: sx
+        }, rest, {
+            children: items.map((_0, _1)=>{
+                let _ref = [
+                    _0,
+                    _1
+                ], [_ref1, ..._rest] = _ref, { key: itemKey, id } = _ref1, item = _object_without_properties_loose(_ref1, [
+                    "key",
+                    "id"
+                ]), [index] = _rest;
+                var _ref2;
+                return /*#__PURE__*/ _jsx(ItemComponent, _extends({}, item), (_ref2 = itemKey != null ? itemKey : id) != null ? _ref2 : index);
+            })
+        }));
+    }
+    const gap = spacing;
+    const containerProps = Object.fromEntries(Object.entries(rest).filter(([key])=>!FLEX_ROW_PROPS.includes(key)));
+    return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref
+    }, containerProps, {
+        sx: [
+            {
+                display: 'grid',
+                // Twelve fractional tracks with a zero minimum. A `span` can never
+                // resolve wider than its share of the container, and `minmax(0, 1fr)`
+                // stops a wide child (a table, a long unbroken string) from pushing a
+                // track past the edge — which is what used to shove the listing
+                // page's sidebar out of the viewport.
+                gridTemplateColumns: `repeat(${FULL_SPAN}, minmax(0, 1fr))`,
+                // Columns are as tall as their own contents, never as tall as the
+                // tallest column beside them.
+                alignItems: 'start',
+                gap
+            },
+            ...sxArray(sx)
+        ],
+        children: buildBands(items).map((band, bandIndex)=>band.map((column)=>/*#__PURE__*/ _jsx(Box, {
+                    sx: _extends({
+                        gridColumn: gridColumnFor(column.profile),
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap,
+                        // Without this a flex column refuses to shrink below its content's
+                        // intrinsic width and the grid track overflows with it.
+                        minWidth: 0,
+                        // An item whose children rendered NOTHING must not leave a gap.
+                        // A plugin widget slot renders nothing when no plugin is
+                        // entitled for it, and the wrapper it leaves behind is still a
+                        // flex child — so the column's `gap` is applied on both sides of
+                        // a zero-height box, drawing a hole exactly where the absent card
+                        // was. `:empty` is exact: the wrapper has no element and no text
+                        // node in that case and only in that case.
+                        '& > *:empty': {
+                            display: 'none'
+                        },
+                        // The same absent card one level down: the item's one element is
+                        // a marked frame whose contents all drew nothing.
+                        [`& > *:has(> ${EMPTY_FRAME_SELECTOR})`]: {
+                            display: 'none'
+                        }
+                    }, emptyColumnRules(column.profile)),
+                    children: column.entries.map(({ item, index })=>{
+                        var _ref;
+                        const { key: itemKey, id, size, sx: itemSx } = item, itemRest = _object_without_properties_loose(item, [
+                            "key",
+                            "id",
+                            "size",
+                            "sx"
+                        ]);
+                        return /*#__PURE__*/ _jsx(ItemComponent, _extends({}, itemRest, {
+                            sx: [
+                                {
+                                    minWidth: 0
+                                },
+                                ...sxArray(itemSx)
+                            ]
+                        }), (_ref = itemKey != null ? itemKey : id) != null ? _ref : index);
+                    })
+                }, `${bandIndex}:${column.key}`)))
+    }));
+});
+GridItems.displayName = 'GridItems';
+GridItems.aglyn = true;
+export default GridItems;
+
+//# sourceMappingURL=grid-items.js.map