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

package/src/lib/components/card-columns.d.ts

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+export interface CardColumnsProps {
+    /** The cards, in reading order. */
+    items: Array<{
+        key?: string;
+        children: ReactNode;
+    }>;
+    /**
+     * Columns at the wide breakpoint. Always one below `md`.
+     *
+     * Two is right far more often than it looks, and a third column is not a
+     * free improvement: multicol may not REORDER, so one card taller than its
+     * share of the flow strands the columns after it. Measured while this
+     * component was briefly tried on the screen version view — five cards, one
+     * of them 764px — Chrome balanced three columns to 988/764/278px, 932px of
+     * raggedness, against 210px at two. More columns means less room to even
+     * them out. Raise this only against a measurement.
+     *
+     * When a page genuinely wants columns of DIFFERENT widths, this is the wrong
+     * component: multicol cannot span. `GridItems masonry` can, and that is what
+     * the screen version view ended up using.
+     */
+    columns?: number;
+    /** Gutter, in theme spacing units. */
+    spacing?: number;
+}
+/**
+ * A BALANCED multi-column card flow for a page of cards (AGL-2486).
+ *
+ * ## The bug it was built for
+ *
+ * The staff org detail page laid twelve cards out as six rigid rows of two. Every
+ * item in a flex row is as tall as the tallest one in it, so `Effective
+ * entitlements` — a long table — made its whole row entitlements-tall and
+ * left the area beside it dead. On a real org the hole was most of a screen,
+ * and `Metered usage`, the card sitting in it, was pushed to the bottom of
+ * that void with nothing above it.
+ *
+ * ## Why not `GridItems masonry`
+ *
+ * `GridItems` carries a `masonry` mode, and it is the only one of the two that
+ * can SPAN — a full-width item is a band of its own there, and a band whose
+ * cards declare different widths lays them out as the widths ask, which is the
+ * billing page's top row (`md: 4` beside `md: 8`). Multicol can do neither.
+ *
+ * Where the two overlap is a run of cards that all declare the SAME width, and
+ * there they fill their columns by different rules. `GridItems` fans such a
+ * band across the columns it asked for round-robin, so the nth card lands in
+ * column `n % count`: distribution by COUNT, and a row-major reading order —
+ * card 0 top-left, card 1 top-RIGHT. Multicol lets the browser place the
+ * fragmentation breaks to equalize the column heights: distribution by HEIGHT,
+ * and a column-major reading order — card 0 top-left, card 1 BELOW it.
+ *
+ * Neither is better in general. Round-robin gives an even card count and can
+ * still leave the columns ragged at the bottom when the cards weigh very
+ * different amounts; balancing evens the bottoms out and gives up the
+ * left-to-right sweep. Pick by which of the two a page's reader would notice:
+ * cards whose heights come from data — a funnel with a row per stage, a table
+ * with a row per owner — are the case for balancing, which is why the CRM
+ * report page uses this one. `/[orgSlug]/billing` uses both, masonry for the
+ * band whose cards differ in width and this for the run whose cards do not.
+ *
+ * ## What this does instead
+ *
+ * CSS multi-column. The browser is told the column count and left to place
+ * the fragmentation breaks, which is the one mechanism that BALANCES: column
+ * heights come out near-equal by construction, whatever the cards weigh
+ * today, because `column-fill: balance` is the default and the browser
+ * re-solves it on every layout.
+ *
+ * That is deliberately not a measured layout. A JS masonry assigns each card
+ * a row span from its measured height, and the span is only right until the
+ * content changes size — a span that is too small does not leave a gap, it
+ * places the next card UNDERNEATH the one before it. Overlapping cards are a
+ * far worse defect than the hole this exists to close, and they appear
+ * exactly when measurement is least reliable: data still arriving, images
+ * still decoding. Here nothing claims a height on any card's behalf, so
+ * nothing can go stale and nothing can overlap.
+ *
+ * `break-inside: avoid` on each item is what keeps a card whole rather than
+ * split across the column boundary; without it multicol would happily saw a
+ * table in half. Below `md` the count drops to one and the cards read in
+ * their authored order, which is the same collapse the flex grid had.
+ */
+export declare function CardColumns({ items, columns, spacing, }: CardColumnsProps): import("react").JSX.Element;
+export default CardColumns;

package/src/lib/components/card-columns.js

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { EMPTY_FRAME_SELECTOR } from "./grid-items.js";
+/**
+ * A BALANCED multi-column card flow for a page of cards (AGL-2486).
+ *
+ * ## The bug it was built for
+ *
+ * The staff org detail page laid twelve cards out as six rigid rows of two. Every
+ * item in a flex row is as tall as the tallest one in it, so `Effective
+ * entitlements` — a long table — made its whole row entitlements-tall and
+ * left the area beside it dead. On a real org the hole was most of a screen,
+ * and `Metered usage`, the card sitting in it, was pushed to the bottom of
+ * that void with nothing above it.
+ *
+ * ## Why not `GridItems masonry`
+ *
+ * `GridItems` carries a `masonry` mode, and it is the only one of the two that
+ * can SPAN — a full-width item is a band of its own there, and a band whose
+ * cards declare different widths lays them out as the widths ask, which is the
+ * billing page's top row (`md: 4` beside `md: 8`). Multicol can do neither.
+ *
+ * Where the two overlap is a run of cards that all declare the SAME width, and
+ * there they fill their columns by different rules. `GridItems` fans such a
+ * band across the columns it asked for round-robin, so the nth card lands in
+ * column `n % count`: distribution by COUNT, and a row-major reading order —
+ * card 0 top-left, card 1 top-RIGHT. Multicol lets the browser place the
+ * fragmentation breaks to equalize the column heights: distribution by HEIGHT,
+ * and a column-major reading order — card 0 top-left, card 1 BELOW it.
+ *
+ * Neither is better in general. Round-robin gives an even card count and can
+ * still leave the columns ragged at the bottom when the cards weigh very
+ * different amounts; balancing evens the bottoms out and gives up the
+ * left-to-right sweep. Pick by which of the two a page's reader would notice:
+ * cards whose heights come from data — a funnel with a row per stage, a table
+ * with a row per owner — are the case for balancing, which is why the CRM
+ * report page uses this one. `/[orgSlug]/billing` uses both, masonry for the
+ * band whose cards differ in width and this for the run whose cards do not.
+ *
+ * ## What this does instead
+ *
+ * CSS multi-column. The browser is told the column count and left to place
+ * the fragmentation breaks, which is the one mechanism that BALANCES: column
+ * heights come out near-equal by construction, whatever the cards weigh
+ * today, because `column-fill: balance` is the default and the browser
+ * re-solves it on every layout.
+ *
+ * That is deliberately not a measured layout. A JS masonry assigns each card
+ * a row span from its measured height, and the span is only right until the
+ * content changes size — a span that is too small does not leave a gap, it
+ * places the next card UNDERNEATH the one before it. Overlapping cards are a
+ * far worse defect than the hole this exists to close, and they appear
+ * exactly when measurement is least reliable: data still arriving, images
+ * still decoding. Here nothing claims a height on any card's behalf, so
+ * nothing can go stale and nothing can overlap.
+ *
+ * `break-inside: avoid` on each item is what keeps a card whole rather than
+ * split across the column boundary; without it multicol would happily saw a
+ * table in half. Below `md` the count drops to one and the cards read in
+ * their authored order, which is the same collapse the flex grid had.
+ */ export function CardColumns({ items, columns = 2, spacing = 3 }) {
+    return(// The run's own box, which ends at its last card (AGL-3059). Every column
+    // of the flow inside ends in one gutter (below), which would otherwise
+    // sit under the run as a gap of its own and double the space to whatever
+    // follows: a grid band's gap, a Stack's spacing. Multicol cannot say which
+    // card ends a column, so the flow gives that gutter back with a negative
+    // bottom margin, and this box contains it: a block formatting context
+    // ends at its last child's margin edge. The margin sits on the flow, not
+    // on this box, because a `Stack` parent resets its children's margins.
+    /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            display: 'flow-root'
+        },
+        children: /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                columnCount: {
+                    xs: 1,
+                    md: columns
+                },
+                columnGap: spacing,
+                mb: -spacing,
+                // A card is never sawn across the boundary. The `-webkit-` and legacy
+                // page-break aliases are still what older WebKit reads.
+                '& > *': {
+                    breakInside: 'avoid',
+                    WebkitColumnBreakInside: 'avoid',
+                    pageBreakInside: 'avoid',
+                    // The gutter BETWEEN stacked cards. A multicol child cannot use
+                    // the parent's row gap — there are no rows — so the spacing is its
+                    // own. Padding, not a margin: a margin at the foot of a column is
+                    // truncated at the column break, so only the LAST column would end
+                    // in a gutter, and the negative margin above would pull what
+                    // follows up against a first column taller than the last. Padding
+                    // stays with its card, so every column ends in exactly one.
+                    pb: spacing,
+                    // Multicol boxes are fragment containers; a card that establishes
+                    // its own block formatting context is the reliably-measured one.
+                    display: 'block',
+                    // A wide child (a table, a long unbroken id) must not push the
+                    // column track past the edge.
+                    minWidth: 0
+                },
+                // A card that renders NOTHING must not weigh on the balance. A plugin
+                // widget slot renders nothing when no plugin is entitled for it,
+                // leaving a wrapper that carries only its gutter — which multicol
+                // counts as real content and balances the columns around. `:empty`
+                // is exact here: the wrapper has no element and no text node in that
+                // case and only in that case.
+                // More specific than the `& > *` above (`:empty` adds a class-level
+                // component), so `display: none` wins over `display: block`.
+                '& > *:empty': {
+                    display: 'none'
+                },
+                // A wrapper whose one element is a marked frame with nothing drawn
+                // in it weighs the same (AGL-3050): a widget zone whose widgets all
+                // rendered nothing is that frame.
+                [`& > *:has(> ${EMPTY_FRAME_SELECTOR})`]: {
+                    display: 'none'
+                }
+            },
+            children: items.map((item, index)=>{
+                var _item_key;
+                return /*#__PURE__*/ _jsx(Box, {
+                    children: item.children
+                }, (_item_key = item.key) != null ? _item_key : index);
+            })
+        })
+    }));
+}
+export default CardColumns;
+
+//# sourceMappingURL=card-columns.js.map

package/src/lib/components/card-columns.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/card-columns.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { Box } from '@mui/material'\nimport type { ReactNode } from 'react'\nimport { EMPTY_FRAME_SELECTOR } from './grid-items'\n\nexport interface CardColumnsProps {\n  /** The cards, in reading order. */\n  items: Array<{ key?: string; children: ReactNode }>\n  /**\n   * Columns at the wide breakpoint. Always one below `md`.\n   *\n   * Two is right far more often than it looks, and a third column is not a\n   * free improvement: multicol may not REORDER, so one card taller than its\n   * share of the flow strands the columns after it. Measured while this\n   * component was briefly tried on the screen version view — five cards, one\n   * of them 764px — Chrome balanced three columns to 988/764/278px, 932px of\n   * raggedness, against 210px at two. More columns means less room to even\n   * them out. Raise this only against a measurement.\n   *\n   * When a page genuinely wants columns of DIFFERENT widths, this is the wrong\n   * component: multicol cannot span. `GridItems masonry` can, and that is what\n   * the screen version view ended up using.\n   */\n  columns?: number\n  /** Gutter, in theme spacing units. */\n  spacing?: number\n}\n\n/**\n * A BALANCED multi-column card flow for a page of cards (AGL-2486).\n *\n * ## The bug it was built for\n *\n * The staff org detail page laid twelve cards out as six rigid rows of two. Every\n * item in a flex row is as tall as the tallest one in it, so `Effective\n * entitlements` — a long table — made its whole row entitlements-tall and\n * left the area beside it dead. On a real org the hole was most of a screen,\n * and `Metered usage`, the card sitting in it, was pushed to the bottom of\n * that void with nothing above it.\n *\n * ## Why not `GridItems masonry`\n *\n * `GridItems` carries a `masonry` mode, and it is the only one of the two that\n * can SPAN — a full-width item is a band of its own there, and a band whose\n * cards declare different widths lays them out as the widths ask, which is the\n * billing page's top row (`md: 4` beside `md: 8`). Multicol can do neither.\n *\n * Where the two overlap is a run of cards that all declare the SAME width, and\n * there they fill their columns by different rules. `GridItems` fans such a\n * band across the columns it asked for round-robin, so the nth card lands in\n * column `n % count`: distribution by COUNT, and a row-major reading order —\n * card 0 top-left, card 1 top-RIGHT. Multicol lets the browser place the\n * fragmentation breaks to equalize the column heights: distribution by HEIGHT,\n * and a column-major reading order — card 0 top-left, card 1 BELOW it.\n *\n * Neither is better in general. Round-robin gives an even card count and can\n * still leave the columns ragged at the bottom when the cards weigh very\n * different amounts; balancing evens the bottoms out and gives up the\n * left-to-right sweep. Pick by which of the two a page's reader would notice:\n * cards whose heights come from data — a funnel with a row per stage, a table\n * with a row per owner — are the case for balancing, which is why the CRM\n * report page uses this one. `/[orgSlug]/billing` uses both, masonry for the\n * band whose cards differ in width and this for the run whose cards do not.\n *\n * ## What this does instead\n *\n * CSS multi-column. The browser is told the column count and left to place\n * the fragmentation breaks, which is the one mechanism that BALANCES: column\n * heights come out near-equal by construction, whatever the cards weigh\n * today, because `column-fill: balance` is the default and the browser\n * re-solves it on every layout.\n *\n * That is deliberately not a measured layout. A JS masonry assigns each card\n * a row span from its measured height, and the span is only right until the\n * content changes size — a span that is too small does not leave a gap, it\n * places the next card UNDERNEATH the one before it. Overlapping cards are a\n * far worse defect than the hole this exists to close, and they appear\n * exactly when measurement is least reliable: data still arriving, images\n * still decoding. Here nothing claims a height on any card's behalf, so\n * nothing can go stale and nothing can overlap.\n *\n * `break-inside: avoid` on each item is what keeps a card whole rather than\n * split across the column boundary; without it multicol would happily saw a\n * table in half. Below `md` the count drops to one and the cards read in\n * their authored order, which is the same collapse the flex grid had.\n */\nexport function CardColumns({\n  items,\n  columns = 2,\n  spacing = 3,\n}: CardColumnsProps) {\n  return (\n    // The run's own box, which ends at its last card (AGL-3059). Every column\n    // of the flow inside ends in one gutter (below), which would otherwise\n    // sit under the run as a gap of its own and double the space to whatever\n    // follows: a grid band's gap, a Stack's spacing. Multicol cannot say which\n    // card ends a column, so the flow gives that gutter back with a negative\n    // bottom margin, and this box contains it: a block formatting context\n    // ends at its last child's margin edge. The margin sits on the flow, not\n    // on this box, because a `Stack` parent resets its children's margins.\n    <Box sx={{ display: 'flow-root' }}>\n      <Box\n        sx={{\n          columnCount: { xs: 1, md: columns },\n          columnGap: spacing,\n          mb: -spacing,\n          // A card is never sawn across the boundary. The `-webkit-` and legacy\n          // page-break aliases are still what older WebKit reads.\n          '& > *': {\n            breakInside: 'avoid',\n            WebkitColumnBreakInside: 'avoid',\n            pageBreakInside: 'avoid',\n            // The gutter BETWEEN stacked cards. A multicol child cannot use\n            // the parent's row gap — there are no rows — so the spacing is its\n            // own. Padding, not a margin: a margin at the foot of a column is\n            // truncated at the column break, so only the LAST column would end\n            // in a gutter, and the negative margin above would pull what\n            // follows up against a first column taller than the last. Padding\n            // stays with its card, so every column ends in exactly one.\n            pb: spacing,\n            // Multicol boxes are fragment containers; a card that establishes\n            // its own block formatting context is the reliably-measured one.\n            display: 'block',\n            // A wide child (a table, a long unbroken id) must not push the\n            // column track past the edge.\n            minWidth: 0,\n          },\n          // A card that renders NOTHING must not weigh on the balance. A plugin\n          // widget slot renders nothing when no plugin is entitled for it,\n          // leaving a wrapper that carries only its gutter — which multicol\n          // counts as real content and balances the columns around. `:empty`\n          // is exact here: the wrapper has no element and no text node in that\n          // case and only in that case.\n          // More specific than the `& > *` above (`:empty` adds a class-level\n          // component), so `display: none` wins over `display: block`.\n          '& > *:empty': { display: 'none' },\n          // A wrapper whose one element is a marked frame with nothing drawn\n          // in it weighs the same (AGL-3050): a widget zone whose widgets all\n          // rendered nothing is that frame.\n          [`& > *:has(> ${EMPTY_FRAME_SELECTOR})`]: { display: 'none' },\n        }}\n      >\n        {items.map((item, index) => (\n          <Box key={item.key ?? index}>{item.children}</Box>\n        ))}\n      </Box>\n    </Box>\n  )\n}\n\nexport default CardColumns\n"],"names":["Box","EMPTY_FRAME_SELECTOR","CardColumns","items","columns","spacing","sx","display","columnCount","xs","md","columnGap","mb","breakInside","WebkitColumnBreakInside","pageBreakInside","pb","minWidth","map","item","index","children","key"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,GAAG,QAAQ,gBAAe;AAEnC,SAASC,oBAAoB,QAAQ,kBAAc;AAyBnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDC,GACD,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,UAAU,CAAC,EACXC,UAAU,CAAC,EACM;IACjB,OACE,0EAA0E;IAC1E,uEAAuE;IACvE,yEAAyE;IACzE,2EAA2E;IAC3E,yEAAyE;IACzE,sEAAsE;IACtE,yEAAyE;IACzE,uEAAuE;kBACvE,KAACL;QAAIM,IAAI;YAAEC,SAAS;QAAY;kBAC9B,cAAA,KAACP;YACCM,IAAI;gBACFE,aAAa;oBAAEC,IAAI;oBAAGC,IAAIN;gBAAQ;gBAClCO,WAAWN;gBACXO,IAAI,CAACP;gBACL,sEAAsE;gBACtE,wDAAwD;gBACxD,SAAS;oBACPQ,aAAa;oBACbC,yBAAyB;oBACzBC,iBAAiB;oBACjB,gEAAgE;oBAChE,mEAAmE;oBACnE,kEAAkE;oBAClE,mEAAmE;oBACnE,6DAA6D;oBAC7D,kEAAkE;oBAClE,4DAA4D;oBAC5DC,IAAIX;oBACJ,kEAAkE;oBAClE,iEAAiE;oBACjEE,SAAS;oBACT,+DAA+D;oBAC/D,8BAA8B;oBAC9BU,UAAU;gBACZ;gBACA,sEAAsE;gBACtE,iEAAiE;gBACjE,kEAAkE;gBAClE,mEAAmE;gBACnE,qEAAqE;gBACrE,8BAA8B;gBAC9B,oEAAoE;gBACpE,6DAA6D;gBAC7D,eAAe;oBAAEV,SAAS;gBAAO;gBACjC,mEAAmE;gBACnE,oEAAoE;gBACpE,kCAAkC;gBAClC,CAAC,CAAC,YAAY,EAAEN,qBAAqB,CAAC,CAAC,CAAC,EAAE;oBAAEM,SAAS;gBAAO;YAC9D;sBAECJ,MAAMe,GAAG,CAAC,CAACC,MAAMC;oBACND;qCAAV,KAACnB;8BAA6BmB,KAAKE,QAAQ;oBAAjCF,YAAAA,KAAKG,GAAG,YAARH,YAAYC;;;;AAKhC;AAEA,eAAelB,YAAW"}

package/src/lib/components/card-display.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @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 HelpTipContent } from './help-tip.component';
+import { type CardActionsProps, type CardContentProps, type CardHeaderProps, type CardProps } from '@mui/material';
+export interface CardDisplayProps extends CardProps {
+    contentGutterX?: boolean;
+    contentGutterY?: boolean;
+    contentBordered?: 'all' | 'top' | 'bottom' | undefined;
+    headerCentered?: boolean;
+    header?: JSX.Children;
+    subheader?: JSX.Children;
+    actions?: JSX.Children;
+    disableContentWrapper?: boolean;
+    /** Contextual help affordance rendered beside the header title (AGL-601). */
+    help?: HelpTipContent;
+    HeaderProps?: CardHeaderProps;
+    ContentProps?: CardContentProps;
+    ActionProps?: CardActionsProps;
+}
+declare const CardDisplay: import("react").ForwardRefExoticComponent<Omit<CardDisplayProps, "ref"> & import("react").RefAttributes<any>>;
+export { CardDisplay };
+export default CardDisplay;

package/src/lib/components/card-display.js

@@ -0,0 +1,158 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 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 { ErrorBoundaryComponent } from "./error-boundary.component.js";
+import { HelpTip } from "./help-tip.component.js";
+import { generateComponentClassKeys, styled } from "@aglyn/shared-ui-theme";
+import { Box, Card as MuiCard, CardActions as MuiCardActions, CardContent as MuiCardContent, CardHeader as MuiCardHeader } from "@mui/material";
+import clsx from "clsx";
+import { forwardRef } from "react";
+const classKeys = generateComponentClassKeys('CardDisplay', [
+    'contentGutterX',
+    'contentGutterY',
+    'headerCentered',
+    'headerBordered',
+    'actionsBordered'
+]);
+const Card = styled(MuiCard)(({ theme })=>{
+    const tv = theme.vars || theme;
+    return {
+        '.MuiCardContent-root': {
+            padding: 0,
+            borderWidth: 0,
+            borderStyle: 'solid',
+            borderColor: tv.palette.divider,
+            ':last-of-type': {
+                paddingBottom: 'initial'
+            }
+        },
+        '.MuiCardHeader-root': {
+            fontWeight: theme.typography.fontWeightBold
+        },
+        [`&.${classKeys.contentGutterX}`]: {
+            '.MuiCardContent-root': {
+                paddingLeft: theme.spacing(2),
+                paddingRight: theme.spacing(2),
+                [theme.breakpoints.up('md')]: {
+                    paddingLeft: theme.spacing(2),
+                    paddingRight: theme.spacing(2)
+                }
+            }
+        },
+        [`&.${classKeys.contentGutterY}`]: {
+            '.MuiCardContent-root': {
+                paddingTop: theme.spacing(2),
+                paddingBottom: theme.spacing(2)
+            }
+        },
+        [`&.${classKeys.headerCentered}`]: {
+            '.MuiCardHeader-root': {
+                marginBottom: theme.spacing(-1),
+                alignSelf: 'center'
+            }
+        },
+        [`&.${classKeys.headerBordered}`]: {
+            '.MuiCardContent-root': {
+                borderTopWidth: 1
+            }
+        },
+        [`&.${classKeys.actionsBordered}`]: {
+            '.MuiCardContent-root': {
+                borderBottomWidth: 1
+            }
+        }
+    };
+});
+const CardDisplay = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _help_title;
+    const { actions, classes, children, className, header, subheader, disableContentWrapper, help, ActionProps, HeaderProps, ContentProps, contentGutterX, contentGutterY, headerCentered, contentBordered } = props, rest = _object_without_properties_loose(props, [
+        "actions",
+        "classes",
+        "children",
+        "className",
+        "header",
+        "subheader",
+        "disableContentWrapper",
+        "help",
+        "ActionProps",
+        "HeaderProps",
+        "ContentProps",
+        "contentGutterX",
+        "contentGutterY",
+        "headerCentered",
+        "contentBordered"
+    ]);
+    const headerTitle = help && header != null ? /*#__PURE__*/ _jsxs(Box, {
+        component: "span",
+        sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 0.5
+        },
+        children: [
+            header,
+            /*#__PURE__*/ _jsx(HelpTip, _extends({}, help, {
+                title: (_help_title = help.title) != null ? _help_title : typeof header === 'string' ? header : undefined,
+                sx: {
+                    fontSize: '0.8em',
+                    my: -0.5
+                }
+            }))
+        ]
+    }) : header;
+    const allBordered = contentBordered === 'all';
+    const headerBordered = contentBordered === 'top';
+    const actionsBordered = contentBordered === 'bottom';
+    const cardClassName = clsx({
+        [classKeys.contentGutterX]: Boolean(contentGutterX),
+        [classKeys.contentGutterY]: Boolean(contentGutterY),
+        [classKeys.headerBordered]: Boolean(allBordered || headerBordered),
+        [classKeys.actionsBordered]: Boolean(allBordered || actionsBordered),
+        [classKeys.headerCentered]: Boolean(headerCentered)
+    }, className);
+    return /*#__PURE__*/ _jsx(Card, _extends({
+        ref: ref,
+        className: cardClassName
+    }, rest, {
+        children: /*#__PURE__*/ _jsxs(ErrorBoundaryComponent, {
+            children: [
+                header || HeaderProps || subheader ? /*#__PURE__*/ _jsx(MuiCardHeader, _extends({
+                    title: headerTitle,
+                    subheader: subheader,
+                    slotProps: {
+                        title: {
+                            variant: 'h6',
+                            component: 'div'
+                        }
+                    }
+                }, HeaderProps)) : null,
+                disableContentWrapper ? children : children || ContentProps ? /*#__PURE__*/ _jsx(MuiCardContent, _extends({}, ContentProps, {
+                    children: (ContentProps == null ? void 0 : ContentProps.children) || children
+                })) : null,
+                actions || ActionProps ? /*#__PURE__*/ _jsx(MuiCardActions, _extends({}, ActionProps, {
+                    children: (ActionProps == null ? void 0 : ActionProps.children) || actions
+                })) : null
+            ]
+        })
+    }));
+});
+CardDisplay.displayName = 'CardDisplayComponent';
+export { CardDisplay };
+export default CardDisplay;
+
+//# sourceMappingURL=card-display.js.map

package/src/lib/components/card-display.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/card-display.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\nimport { ErrorBoundaryComponent } from './error-boundary.component'\nimport { HelpTip, type HelpTipContent } from './help-tip.component'\nimport { generateComponentClassKeys, styled } from '@aglyn/shared-ui-theme'\nimport {\n  Box,\n  Card as MuiCard,\n  CardActions as MuiCardActions,\n  type CardActionsProps,\n  CardContent as MuiCardContent,\n  type CardContentProps,\n  CardHeader as MuiCardHeader,\n  type CardHeaderProps,\n  type CardProps,\n} from '@mui/material'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\n\nconst classKeys = generateComponentClassKeys('CardDisplay', [\n  'contentGutterX',\n  'contentGutterY',\n  'headerCentered',\n  'headerBordered',\n  'actionsBordered',\n])\n\nconst Card = styled(MuiCard)(({ theme }) => {\n  const tv = (theme as any).vars || theme\n  return {\n    '.MuiCardContent-root': {\n      padding: 0,\n      borderWidth: 0,\n      borderStyle: 'solid',\n      borderColor: tv.palette.divider,\n      ':last-of-type': {\n        paddingBottom: 'initial',\n      },\n    },\n    '.MuiCardHeader-root': {\n      fontWeight: theme.typography.fontWeightBold,\n    },\n    [`&.${classKeys.contentGutterX}`]: {\n      '.MuiCardContent-root': {\n        paddingLeft: theme.spacing(2),\n        paddingRight: theme.spacing(2),\n        [theme.breakpoints.up('md')]: {\n          paddingLeft: theme.spacing(2),\n          paddingRight: theme.spacing(2),\n        },\n      },\n    },\n    [`&.${classKeys.contentGutterY}`]: {\n      '.MuiCardContent-root': {\n        paddingTop: theme.spacing(2),\n        paddingBottom: theme.spacing(2),\n      },\n    },\n    [`&.${classKeys.headerCentered}`]: {\n      '.MuiCardHeader-root': {\n        marginBottom: theme.spacing(-1),\n        alignSelf: 'center',\n      },\n    },\n    [`&.${classKeys.headerBordered}`]: {\n      '.MuiCardContent-root': {\n        borderTopWidth: 1,\n      },\n    },\n    [`&.${classKeys.actionsBordered}`]: {\n      '.MuiCardContent-root': {\n        borderBottomWidth: 1,\n      },\n    },\n  }\n})\n\nexport interface CardDisplayProps extends CardProps {\n  contentGutterX?: boolean\n  contentGutterY?: boolean\n  contentBordered?: 'all' | 'top' | 'bottom' | undefined\n  headerCentered?: boolean\n  header?: JSX.Children\n  subheader?: JSX.Children\n  actions?: JSX.Children\n  disableContentWrapper?: boolean\n  /** Contextual help affordance rendered beside the header title (AGL-601). */\n  help?: HelpTipContent\n  HeaderProps?: CardHeaderProps\n  ContentProps?: CardContentProps\n  ActionProps?: CardActionsProps\n}\n\nconst CardDisplay = forwardRef<any, CardDisplayProps>((props, ref) => {\n  const {\n    actions,\n    classes,\n    children,\n    className,\n    header,\n    subheader,\n    disableContentWrapper,\n    help,\n    ActionProps,\n    HeaderProps,\n    ContentProps,\n    contentGutterX,\n    contentGutterY,\n    headerCentered,\n    contentBordered,\n    ...rest\n  } = props\n\n  const headerTitle =\n    help && header != null ? (\n      <Box\n        component=\"span\"\n        sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}\n      >\n        {header}\n        <HelpTip\n          {...help}\n          title={help.title ?? (typeof header === 'string' ? header : undefined)}\n          sx={{ fontSize: '0.8em', my: -0.5 }}\n        />\n      </Box>\n    ) : (\n      header\n    )\n\n  const allBordered = contentBordered === 'all'\n  const headerBordered = contentBordered === 'top'\n  const actionsBordered = contentBordered === 'bottom'\n\n  const cardClassName = clsx(\n    {\n      [classKeys.contentGutterX]: Boolean(contentGutterX),\n      [classKeys.contentGutterY]: Boolean(contentGutterY),\n      [classKeys.headerBordered]: Boolean(allBordered || headerBordered),\n      [classKeys.actionsBordered]: Boolean(allBordered || actionsBordered),\n      [classKeys.headerCentered]: Boolean(headerCentered),\n    },\n    className,\n  )\n\n  return (\n    <Card ref={ref} className={cardClassName} {...rest}>\n      <ErrorBoundaryComponent>\n        {header || HeaderProps || subheader ? (\n          <MuiCardHeader\n            title={headerTitle}\n            subheader={subheader}\n            slotProps={{ title: { variant: 'h6', component: 'div' } }}\n            {...HeaderProps}\n          />\n        ) : null}\n        {disableContentWrapper ? (\n          children\n        ) : children || ContentProps ? (\n          <MuiCardContent {...ContentProps}>\n            {ContentProps?.children || children}\n          </MuiCardContent>\n        ) : null}\n        {actions || ActionProps ? (\n          <MuiCardActions {...ActionProps}>\n            {ActionProps?.children || actions}\n          </MuiCardActions>\n        ) : null}\n      </ErrorBoundaryComponent>\n    </Card>\n  )\n})\n\nCardDisplay.displayName = 'CardDisplayComponent'\n\nexport { CardDisplay }\nexport default CardDisplay\n"],"names":["ErrorBoundaryComponent","HelpTip","generateComponentClassKeys","styled","Box","Card","MuiCard","CardActions","MuiCardActions","CardContent","MuiCardContent","CardHeader","MuiCardHeader","clsx","forwardRef","classKeys","theme","tv","vars","padding","borderWidth","borderStyle","borderColor","palette","divider","paddingBottom","fontWeight","typography","fontWeightBold","contentGutterX","paddingLeft","spacing","paddingRight","breakpoints","up","contentGutterY","paddingTop","headerCentered","marginBottom","alignSelf","headerBordered","borderTopWidth","actionsBordered","borderBottomWidth","CardDisplay","props","ref","help","actions","classes","children","className","header","subheader","disableContentWrapper","ActionProps","HeaderProps","ContentProps","contentBordered","rest","headerTitle","component","sx","display","alignItems","gap","title","undefined","fontSize","my","allBordered","cardClassName","Boolean","slotProps","variant","displayName"],"mappings":"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"}

package/src/lib/components/card-list-item.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @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 CardActionAreaProps as MuiCardActionAreaProps, type CardProps as MuiCardProps, type TypographyProps } from '@mui/material';
+import type { ComponentProps } from 'react';
+import type { GridListItemData } from './grid-list';
+declare const CardBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export interface CardListItemProps extends Omit<Partial<MuiCardProps>, 'children'> {
+    item: GridListItemData;
+    children?: JSX.Children | ((props: {
+        item: GridListItemData;
+        selected: boolean;
+    }) => JSX.Children);
+    label?: JSX.Children;
+    selected?: boolean;
+    CardActionAreaProps?: Partial<MuiCardActionAreaProps>;
+    WrapperBoxProps?: Partial<ComponentProps<typeof CardBox>>;
+    ContentBoxProps?: Partial<ComponentProps<typeof CardBox>>;
+    LabelTypographyProps?: Partial<TypographyProps>;
+}
+export declare const CardListItem: import("react").ForwardRefExoticComponent<Omit<CardListItemProps, "ref"> & import("react").RefAttributes<any>>;
+export default CardListItem;

package/src/lib/components/card-list-item.js

@@ -0,0 +1,137 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { generateComponentClassKeys, styled } from "@aglyn/shared-ui-theme";
+import { Box, Card as MuiCard, Typography } from "@mui/material";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import ChildrenFunctionProp from "./children-function-prop.js";
+const cardClasses = generateComponentClassKeys('CardListItem', [
+    'actionArea',
+    'selected',
+    'aspectContainer',
+    'wrapper',
+    'content',
+    'label'
+]);
+const CardBox = styled('div')({});
+const Card = styled(MuiCard)(({ theme })=>{
+    const tv = theme.vars || theme;
+    return {
+        // The selected treatment used to hang off `.CardListItem-actionArea`, a
+        // class this component has never rendered — so `selected` set a class and
+        // painted NOTHING, which is why the icon picker read as unresponsive and
+        // invited repeat clicking (AGL-2486). It lives on the card itself now,
+        // where there is always an element to carry it.
+        [`&.${cardClasses.selected}`]: {
+            backgroundColor: tv.palette.primary.main,
+            color: tv.palette.primary.contrastText,
+            outline: `2px solid ${tv.palette.primary.main}`,
+            outlineOffset: 1,
+            [`.${cardClasses.actionArea}`]: {
+                backgroundColor: tv.palette.primary.main,
+                color: tv.palette.primary.contrastText
+            }
+        },
+        [`.${cardClasses.aspectContainer}`]: {
+            height: 0,
+            position: 'relative',
+            paddingTop: `${3 / 4 * 100}%`
+        },
+        [`.${cardClasses.wrapper}`]: {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%'
+        },
+        [`.${cardClasses.content}`]: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            textAlign: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            justifyContent: 'space-evenly',
+            padding: 0.5
+        },
+        [`.${cardClasses.label}`]: {
+            lineHeight: 1.43,
+            fontSize: theme.typography.pxToRem(10),
+            textTransform: 'uppercase'
+        }
+    };
+});
+export const CardListItem = /*#__PURE__*/ forwardRef(function RefRenderFn(props, ref) {
+    const { className, children, selected, item, label, CardActionAreaProps, WrapperBoxProps, ContentBoxProps, LabelTypographyProps } = props, rest = _object_without_properties_loose(props, [
+        "className",
+        "children",
+        "selected",
+        "item",
+        "label",
+        "CardActionAreaProps",
+        "WrapperBoxProps",
+        "ContentBoxProps",
+        "LabelTypographyProps"
+    ]);
+    const isSelected = Boolean(selected);
+    return /*#__PURE__*/ _jsx(Card, _extends({
+        ref: ref,
+        className: clsx({
+            [cardClasses.selected]: isSelected
+        }, className)
+    }, rest, {
+        children: /*#__PURE__*/ _jsx(Box, {
+            className: clsx(cardClasses.aspectContainer, CardActionAreaProps == null ? void 0 : CardActionAreaProps.className),
+            children: /*#__PURE__*/ _jsx(Box, _extends({}, WrapperBoxProps, {
+                className: clsx(cardClasses.wrapper, WrapperBoxProps == null ? void 0 : WrapperBoxProps.className),
+                children: /*#__PURE__*/ _jsxs(Box, _extends({}, ContentBoxProps, {
+                    className: clsx(cardClasses.content, ContentBoxProps == null ? void 0 : ContentBoxProps.className),
+                    children: [
+                        /*#__PURE__*/ _jsx(ChildrenFunctionProp, {
+                            childrenProp: children,
+                            args: {
+                                item,
+                                selected: isSelected
+                            }
+                        }),
+                        label && /*#__PURE__*/ _jsx(Typography, _extends({
+                            component: "span",
+                            variant: "subtitle2"
+                        }, LabelTypographyProps, {
+                            className: clsx(cardClasses.label, LabelTypographyProps == null ? void 0 : LabelTypographyProps.className),
+                            sx: [
+                                {
+                                    display: "block"
+                                },
+                                ...Array.isArray(LabelTypographyProps == null ? void 0 : LabelTypographyProps.sx) ? LabelTypographyProps.sx : [
+                                    LabelTypographyProps == null ? void 0 : LabelTypographyProps.sx
+                                ]
+                            ],
+                            children: label
+                        }))
+                    ]
+                }))
+            }))
+        })
+    }));
+});
+CardListItem.displayName = 'CardListItem';
+export default CardListItem;
+
+//# sourceMappingURL=card-list-item.js.map