@aglyn/shared-ui-jsx 1.0.0-beta.277 → 1.0.0-beta.283

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/shared-ui-jsx",
-  "version": "1.0.0-beta.277",
+  "version": "1.0.0-beta.283",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,10 +25,11 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/shared-data-mdi": "1.0.0-beta.277",
-    "@aglyn/shared-ui-theme": "1.0.0-beta.277",
-    "@aglyn/shared-util-tools": "1.0.0-beta.277",
-    "@aglyn/shared-util-vendor": "1.0.0-beta.277",
+    "@aglyn/shared-data-mdi": "1.0.0-beta.283",
+    "@aglyn/shared-ui-snackstack": "1.0.0-beta.283",
+    "@aglyn/shared-ui-theme": "1.0.0-beta.283",
+    "@aglyn/shared-util-tools": "1.0.0-beta.283",
+    "@aglyn/shared-util-vendor": "1.0.0-beta.283",
     "@mdi/js": "^7.4.47",
     "@swc/helpers": "0.5.23",
     "change-case": "^5.4.4",

package/src/lib/components/beta-chip.component.d.ts

@@ -0,0 +1,27 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+/** What the chip reads. One word, the same on every surface that wears it. */
+export declare const BETA_CHIP_LABEL = "Beta";
+/**
+ * What Beta means to the reader, as the chip's hover and screen-reader
+ * description: the feature is open, not a preview, and it is still changing.
+ */
+export declare const BETA_CHIP_DESCRIPTION = "Available on every plan that includes it, and still changing as we improve it.";
+export interface BetaChipProps {
+    /** Spacing from what it sits beside; the chip itself takes no margin. */
+    sx?: SxProps<Theme>;
+    'data-testid'?: string;
+}
+/**
+ * The Beta label for a released feature that is still changing (AGL-4052),
+ * beside its nav tab, its page heading or its panel title.
+ *
+ * Inline on purpose: the root is a `span` and so is the chip, because it sits
+ * inside a heading or a tab label. The description is attached with
+ * `describeChild`, so a tab or heading keeps "Beta" as part of its name
+ * rather than taking the sentence as its name.
+ */
+export declare function BetaChip(props: BetaChipProps): import("react").JSX.Element;
+export declare namespace BetaChip {
+    var displayName: string;
+}
+export default BetaChip;

package/src/lib/components/beta-chip.component.js

@@ -0,0 +1,65 @@
+/**
+ * @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/Box";
+import Tooltip from "@mui/material/Tooltip";
+import { StatusChip } from "./status-chip.component.js";
+/** What the chip reads. One word, the same on every surface that wears it. */ export const BETA_CHIP_LABEL = 'Beta';
+/**
+ * What Beta means to the reader, as the chip's hover and screen-reader
+ * description: the feature is open, not a preview, and it is still changing.
+ */ export const BETA_CHIP_DESCRIPTION = 'Available on every plan that includes it, and still changing as we improve it.';
+/**
+ * The Beta label for a released feature that is still changing (AGL-4052),
+ * beside its nav tab, its page heading or its panel title.
+ *
+ * Inline on purpose: the root is a `span` and so is the chip, because it sits
+ * inside a heading or a tab label. The description is attached with
+ * `describeChild`, so a tab or heading keeps "Beta" as part of its name
+ * rather than taking the sentence as its name.
+ */ export function BetaChip(props) {
+    const { sx } = props;
+    return /*#__PURE__*/ _jsx(Tooltip, {
+        title: BETA_CHIP_DESCRIPTION,
+        describeChild: true,
+        children: /*#__PURE__*/ _jsx(Box, {
+            component: "span",
+            "data-testid": props['data-testid'],
+            "data-release-stage": "beta",
+            sx: [
+                {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    flexShrink: 0
+                },
+                ...Array.isArray(sx) ? sx : [
+                    sx
+                ]
+            ],
+            children: /*#__PURE__*/ _jsx(StatusChip, {
+                label: BETA_CHIP_LABEL,
+                tone: "info",
+                variant: "outlined",
+                component: "span"
+            })
+        })
+    });
+}
+BetaChip.displayName = 'BetaChip';
+export default BetaChip;
+
+//# sourceMappingURL=beta-chip.component.js.map

package/src/lib/components/beta-chip.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/beta-chip.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport Box from '@mui/material/Box'\nimport type { SxProps, Theme } from '@mui/material/styles'\nimport Tooltip from '@mui/material/Tooltip'\nimport { StatusChip } from './status-chip.component'\n\n/** What the chip reads. One word, the same on every surface that wears it. */\nexport const BETA_CHIP_LABEL = 'Beta'\n\n/**\n * What Beta means to the reader, as the chip's hover and screen-reader\n * description: the feature is open, not a preview, and it is still changing.\n */\nexport const BETA_CHIP_DESCRIPTION =\n  'Available on every plan that includes it, and still changing as we improve it.'\n\nexport interface BetaChipProps {\n  /** Spacing from what it sits beside; the chip itself takes no margin. */\n  sx?: SxProps<Theme>\n  'data-testid'?: string\n}\n\n/**\n * The Beta label for a released feature that is still changing (AGL-4052),\n * beside its nav tab, its page heading or its panel title.\n *\n * Inline on purpose: the root is a `span` and so is the chip, because it sits\n * inside a heading or a tab label. The description is attached with\n * `describeChild`, so a tab or heading keeps \"Beta\" as part of its name\n * rather than taking the sentence as its name.\n */\nexport function BetaChip(props: BetaChipProps) {\n  const { sx } = props\n  return (\n    <Tooltip title={BETA_CHIP_DESCRIPTION} describeChild>\n      <Box\n        component=\"span\"\n        data-testid={props['data-testid']}\n        data-release-stage=\"beta\"\n        sx={[\n          { display: 'inline-flex', alignItems: 'center', flexShrink: 0 },\n          ...(Array.isArray(sx) ? sx : [sx]),\n        ]}\n      >\n        <StatusChip\n          label={BETA_CHIP_LABEL}\n          tone=\"info\"\n          variant=\"outlined\"\n          component=\"span\"\n        />\n      </Box>\n    </Tooltip>\n  )\n}\nBetaChip.displayName = 'BetaChip'\n\nexport default BetaChip\n"],"names":["Box","Tooltip","StatusChip","BETA_CHIP_LABEL","BETA_CHIP_DESCRIPTION","BetaChip","props","sx","title","describeChild","component","data-testid","data-release-stage","display","alignItems","flexShrink","Array","isArray","label","tone","variant","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,OAAOA,SAAS,oBAAmB;AAEnC,OAAOC,aAAa,wBAAuB;AAC3C,SAASC,UAAU,QAAQ,6BAAyB;AAEpD,4EAA4E,GAC5E,OAAO,MAAMC,kBAAkB,OAAM;AAErC;;;CAGC,GACD,OAAO,MAAMC,wBACX,iFAAgF;AAQlF;;;;;;;;CAQC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,EAAE,EAAE,GAAGD;IACf,qBACE,KAACL;QAAQO,OAAOJ;QAAuBK,aAAa;kBAClD,cAAA,KAACT;YACCU,WAAU;YACVC,eAAaL,KAAK,CAAC,cAAc;YACjCM,sBAAmB;YACnBL,IAAI;gBACF;oBAAEM,SAAS;oBAAeC,YAAY;oBAAUC,YAAY;gBAAE;mBAC1DC,MAAMC,OAAO,CAACV,MAAMA,KAAK;oBAACA;iBAAG;aAClC;sBAED,cAAA,KAACL;gBACCgB,OAAOf;gBACPgB,MAAK;gBACLC,SAAQ;gBACRV,WAAU;;;;AAKpB;AACAL,SAASgB,WAAW,GAAG;AAEvB,eAAehB,SAAQ"}

package/src/lib/components/confirmation-provider.component.js

@@ -38,7 +38,12 @@ export function ConfirmationProviderComponent(props) {
     const handleClose = useCallback(()=>{
         setResolveReject([]);
     }, []);
+    // The first answer settles the promise and clears the pair, but the dialog
+    // stays on screen through its exit transition. A second click in that
+    // window (a double click, a repeated Enter) has no question left to answer,
+    // so it must not call the cleared resolve or reject.
     const handleCancel = useCallback(()=>{
+        if (!reject) return;
         reject();
         handleClose();
     }, [
@@ -46,6 +51,7 @@ export function ConfirmationProviderComponent(props) {
         handleClose
     ]);
     const handleConfirm = useCallback(()=>{
+        if (!resolve) return;
         resolve();
         handleClose();
     }, [

package/src/lib/components/confirmation-provider.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/confirmation-provider.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 {\n  type ElementType,\n  Fragment,\n  type MouseEventHandler,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\nimport ConfirmationContext, {\n  buildConfirmationContextConfig,\n  type ConfirmationContextConfig,\n  type ConfirmFunction,\n  DEFAULT_CONTEXT_CONFIG,\n} from '../contexts/confirmation.context'\nimport DialogConfirm from './dialog-confirm'\n\nexport interface ConfirmationProviderComponentProps {\n  defaultOptions?: ConfirmationContextConfig\n  children?: JSX.Children\n  component?: ElementType<{\n    open: boolean\n    options: ConfirmationContextConfig\n    onClose: MouseEventHandler<unknown>\n    onCancel: MouseEventHandler<unknown>\n    onConfirm: MouseEventHandler<unknown>\n  }>\n}\n\nexport function ConfirmationProviderComponent(\n  props: ConfirmationProviderComponentProps,\n) {\n  const {\n    children,\n    defaultOptions = {},\n    component: Component = DialogConfirm,\n  } = props\n  const [options, setOptions] = useState({\n    ...DEFAULT_CONTEXT_CONFIG,\n    ...defaultOptions,\n  })\n  const [resolveReject, setResolveReject] = useState([])\n  const [resolve, reject] = resolveReject\n\n  const confirm = useCallback<ConfirmFunction>(\n    (options: ConfirmationContextConfig = {}) => {\n      return new Promise((resolve, reject) => {\n        setOptions(buildConfirmationContextConfig(defaultOptions, options))\n        setResolveReject([resolve, reject])\n      })\n    },\n    [defaultOptions],\n  )\n\n  const handleClose = useCallback(() => {\n    setResolveReject([])\n  }, [])\n\n  const handleCancel = useCallback(() => {\n    reject()\n    handleClose()\n  }, [reject, handleClose])\n\n  const handleConfirm = useCallback(() => {\n    resolve()\n    handleClose()\n  }, [resolve, handleClose])\n\n  const child = useMemo(() => {\n    return (\n      <ConfirmationContext.Provider value={{ confirm }}>\n        {children}\n      </ConfirmationContext.Provider>\n    )\n  }, [children, confirm])\n\n  return (\n    <Fragment>\n      {child}\n      <Component\n        open={resolveReject.length === 2}\n        options={options}\n        onClose={handleClose}\n        onCancel={handleCancel}\n        onConfirm={handleConfirm}\n      />\n    </Fragment>\n  )\n}\nConfirmationProviderComponent.displayName = 'ConfirmationProviderComponent'\nConfirmationProviderComponent.aglyn = true\n\nexport default ConfirmationProviderComponent\n"],"names":["Fragment","useCallback","useMemo","useState","ConfirmationContext","buildConfirmationContextConfig","DEFAULT_CONTEXT_CONFIG","DialogConfirm","ConfirmationProviderComponent","props","children","defaultOptions","component","Component","options","setOptions","resolveReject","setResolveReject","resolve","reject","confirm","Promise","handleClose","handleCancel","handleConfirm","child","Provider","value","open","length","onClose","onCancel","onConfirm","displayName","aglyn"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAEA,SAEEA,QAAQ,EAERC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACH,QAAO;AACd,OAAOC,uBACLC,8BAA8B,EAG9BC,sBAAsB,QACjB,sCAAkC;AACzC,OAAOC,mBAAmB,sBAAkB;AAc5C,OAAO,SAASC,8BACdC,KAAyC;IAEzC,MAAM,EACJC,QAAQ,EACRC,iBAAiB,CAAC,CAAC,EACnBC,WAAWC,YAAYN,aAAa,EACrC,GAAGE;IACJ,MAAM,CAACK,SAASC,WAAW,GAAGZ,SAAS,aAClCG,wBACAK;IAEL,MAAM,CAACK,eAAeC,iBAAiB,GAAGd,SAAS,EAAE;IACrD,MAAM,CAACe,SAASC,OAAO,GAAGH;IAE1B,MAAMI,UAAUnB,YACd,CAACa,UAAqC,CAAC,CAAC;QACtC,OAAO,IAAIO,QAAQ,CAACH,SAASC;YAC3BJ,WAAWV,+BAA+BM,gBAAgBG;YAC1DG,iBAAiB;gBAACC;gBAASC;aAAO;QACpC;IACF,GACA;QAACR;KAAe;IAGlB,MAAMW,cAAcrB,YAAY;QAC9BgB,iBAAiB,EAAE;IACrB,GAAG,EAAE;IAEL,MAAMM,eAAetB,YAAY;QAC/BkB;QACAG;IACF,GAAG;QAACH;QAAQG;KAAY;IAExB,MAAME,gBAAgBvB,YAAY;QAChCiB;QACAI;IACF,GAAG;QAACJ;QAASI;KAAY;IAEzB,MAAMG,QAAQvB,QAAQ;QACpB,qBACE,KAACE,oBAAoBsB,QAAQ;YAACC,OAAO;gBAAEP;YAAQ;sBAC5CV;;IAGP,GAAG;QAACA;QAAUU;KAAQ;IAEtB,qBACE,MAACpB;;YACEyB;0BACD,KAACZ;gBACCe,MAAMZ,cAAca,MAAM,KAAK;gBAC/Bf,SAASA;gBACTgB,SAASR;gBACTS,UAAUR;gBACVS,WAAWR;;;;AAInB;AACAhB,8BAA8ByB,WAAW,GAAG;AAC5CzB,8BAA8B0B,KAAK,GAAG;AAEtC,eAAe1B,8BAA6B"}
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/confirmation-provider.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 {\n  type ElementType,\n  Fragment,\n  type MouseEventHandler,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\nimport ConfirmationContext, {\n  buildConfirmationContextConfig,\n  type ConfirmationContextConfig,\n  type ConfirmFunction,\n  DEFAULT_CONTEXT_CONFIG,\n} from '../contexts/confirmation.context'\nimport DialogConfirm from './dialog-confirm'\n\nexport interface ConfirmationProviderComponentProps {\n  defaultOptions?: ConfirmationContextConfig\n  children?: JSX.Children\n  component?: ElementType<{\n    open: boolean\n    options: ConfirmationContextConfig\n    onClose: MouseEventHandler<unknown>\n    onCancel: MouseEventHandler<unknown>\n    onConfirm: MouseEventHandler<unknown>\n  }>\n}\n\nexport function ConfirmationProviderComponent(\n  props: ConfirmationProviderComponentProps,\n) {\n  const {\n    children,\n    defaultOptions = {},\n    component: Component = DialogConfirm,\n  } = props\n  const [options, setOptions] = useState({\n    ...DEFAULT_CONTEXT_CONFIG,\n    ...defaultOptions,\n  })\n  const [resolveReject, setResolveReject] = useState([])\n  const [resolve, reject] = resolveReject\n\n  const confirm = useCallback<ConfirmFunction>(\n    (options: ConfirmationContextConfig = {}) => {\n      return new Promise((resolve, reject) => {\n        setOptions(buildConfirmationContextConfig(defaultOptions, options))\n        setResolveReject([resolve, reject])\n      })\n    },\n    [defaultOptions],\n  )\n\n  const handleClose = useCallback(() => {\n    setResolveReject([])\n  }, [])\n\n  // The first answer settles the promise and clears the pair, but the dialog\n  // stays on screen through its exit transition. A second click in that\n  // window (a double click, a repeated Enter) has no question left to answer,\n  // so it must not call the cleared resolve or reject.\n  const handleCancel = useCallback(() => {\n    if (!reject) return\n    reject()\n    handleClose()\n  }, [reject, handleClose])\n\n  const handleConfirm = useCallback(() => {\n    if (!resolve) return\n    resolve()\n    handleClose()\n  }, [resolve, handleClose])\n\n  const child = useMemo(() => {\n    return (\n      <ConfirmationContext.Provider value={{ confirm }}>\n        {children}\n      </ConfirmationContext.Provider>\n    )\n  }, [children, confirm])\n\n  return (\n    <Fragment>\n      {child}\n      <Component\n        open={resolveReject.length === 2}\n        options={options}\n        onClose={handleClose}\n        onCancel={handleCancel}\n        onConfirm={handleConfirm}\n      />\n    </Fragment>\n  )\n}\nConfirmationProviderComponent.displayName = 'ConfirmationProviderComponent'\nConfirmationProviderComponent.aglyn = true\n\nexport default ConfirmationProviderComponent\n"],"names":["Fragment","useCallback","useMemo","useState","ConfirmationContext","buildConfirmationContextConfig","DEFAULT_CONTEXT_CONFIG","DialogConfirm","ConfirmationProviderComponent","props","children","defaultOptions","component","Component","options","setOptions","resolveReject","setResolveReject","resolve","reject","confirm","Promise","handleClose","handleCancel","handleConfirm","child","Provider","value","open","length","onClose","onCancel","onConfirm","displayName","aglyn"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAEA,SAEEA,QAAQ,EAERC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACH,QAAO;AACd,OAAOC,uBACLC,8BAA8B,EAG9BC,sBAAsB,QACjB,sCAAkC;AACzC,OAAOC,mBAAmB,sBAAkB;AAc5C,OAAO,SAASC,8BACdC,KAAyC;IAEzC,MAAM,EACJC,QAAQ,EACRC,iBAAiB,CAAC,CAAC,EACnBC,WAAWC,YAAYN,aAAa,EACrC,GAAGE;IACJ,MAAM,CAACK,SAASC,WAAW,GAAGZ,SAAS,aAClCG,wBACAK;IAEL,MAAM,CAACK,eAAeC,iBAAiB,GAAGd,SAAS,EAAE;IACrD,MAAM,CAACe,SAASC,OAAO,GAAGH;IAE1B,MAAMI,UAAUnB,YACd,CAACa,UAAqC,CAAC,CAAC;QACtC,OAAO,IAAIO,QAAQ,CAACH,SAASC;YAC3BJ,WAAWV,+BAA+BM,gBAAgBG;YAC1DG,iBAAiB;gBAACC;gBAASC;aAAO;QACpC;IACF,GACA;QAACR;KAAe;IAGlB,MAAMW,cAAcrB,YAAY;QAC9BgB,iBAAiB,EAAE;IACrB,GAAG,EAAE;IAEL,2EAA2E;IAC3E,sEAAsE;IACtE,4EAA4E;IAC5E,qDAAqD;IACrD,MAAMM,eAAetB,YAAY;QAC/B,IAAI,CAACkB,QAAQ;QACbA;QACAG;IACF,GAAG;QAACH;QAAQG;KAAY;IAExB,MAAME,gBAAgBvB,YAAY;QAChC,IAAI,CAACiB,SAAS;QACdA;QACAI;IACF,GAAG;QAACJ;QAASI;KAAY;IAEzB,MAAMG,QAAQvB,QAAQ;QACpB,qBACE,KAACE,oBAAoBsB,QAAQ;YAACC,OAAO;gBAAEP;YAAQ;sBAC5CV;;IAGP,GAAG;QAACA;QAAUU;KAAQ;IAEtB,qBACE,MAACpB;;YACEyB;0BACD,KAACZ;gBACCe,MAAMZ,cAAca,MAAM,KAAK;gBAC/Bf,SAASA;gBACTgB,SAASR;gBACTS,UAAUR;gBACVS,WAAWR;;;;AAInB;AACAhB,8BAA8ByB,WAAW,GAAG;AAC5CzB,8BAA8B0B,KAAK,GAAG;AAEtC,eAAe1B,8BAA6B"}

package/src/lib/components/dialog-confirm.js

@@ -53,12 +53,14 @@ export const DialogConfirm = /*#__PURE__*/ forwardRef((props, ref)=>{
             /*#__PURE__*/ _jsxs(DialogActions, {
                 children: [
                     /*#__PURE__*/ _jsx(Button, _extends({}, cancellationButtonProps, {
+                        disabled: !open || (cancellationButtonProps == null ? void 0 : cancellationButtonProps.disabled),
                         onClick: onCancel,
                         children: cancellationText
                     })),
                     /*#__PURE__*/ _jsx(Button, _extends({
                         color: "primary"
                     }, confirmationButtonProps, {
+                        disabled: !open || (confirmationButtonProps == null ? void 0 : confirmationButtonProps.disabled),
                         onClick: onConfirm,
                         children: confirmationText
                     }))

package/src/lib/components/dialog-confirm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/dialog-confirm.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Button, { ButtonProps } from '@mui/material/Button'\nimport Dialog, { DialogProps } from '@mui/material/Dialog'\nimport DialogActions from '@mui/material/DialogActions'\nimport DialogContent from '@mui/material/DialogContent'\nimport DialogContentText, {\n  DialogContentTextProps,\n} from '@mui/material/DialogContentText'\nimport DialogTitle, { DialogTitleProps } from '@mui/material/DialogTitle'\nimport { forwardRef } from 'react'\n\nexport interface DialogConfirmOptions {\n  cancellationText?: ButtonProps['children']\n  confirmationText?: ButtonProps['children']\n  cancellationButtonProps?: Partial<ButtonProps>\n  confirmationButtonProps?: Partial<ButtonProps>\n  dialogProps?: Partial<DialogProps>\n  title?: DialogTitleProps['children']\n  description?: DialogContentTextProps['children']\n}\n\nexport interface DialogConfirmProps extends DialogProps {\n  options?: DialogConfirmOptions\n  onConfirm?: ButtonProps['onClick']\n  onCancel?: ButtonProps['onClick']\n}\n\nexport const DialogConfirm = forwardRef<any, DialogConfirmProps>(\n  (props, ref) => {\n    const {\n      open,\n      options = {\n        cancellationText: 'Cancel',\n        confirmationText: 'OK',\n      },\n      onCancel,\n      onConfirm,\n      onClose,\n      ...rest\n    } = props\n    const {\n      title,\n      description,\n      confirmationText,\n      cancellationText,\n      dialogProps,\n      confirmationButtonProps,\n      cancellationButtonProps,\n    } = options\n    return (\n      <Dialog\n        ref={ref}\n        fullWidth\n        {...rest}\n        {...dialogProps}\n        open={open}\n        onClose={onClose}\n      >\n        {title && <DialogTitle>{title}</DialogTitle>}\n        {description && (\n          <DialogContent>\n            <DialogContentText>{description}</DialogContentText>\n          </DialogContent>\n        )}\n        <DialogActions>\n          <Button {...cancellationButtonProps} onClick={onCancel}>\n            {cancellationText}\n          </Button>\n          <Button\n            color=\"primary\"\n            {...confirmationButtonProps}\n            onClick={onConfirm}\n          >\n            {confirmationText}\n          </Button>\n        </DialogActions>\n      </Dialog>\n    )\n  },\n)\n\nDialogConfirm.displayName = 'DialogConfirm'\nDialogConfirm.aglyn = true\n\nexport default DialogConfirm\n"],"names":["Button","Dialog","DialogActions","DialogContent","DialogContentText","DialogTitle","forwardRef","DialogConfirm","props","ref","open","options","cancellationText","confirmationText","onCancel","onConfirm","onClose","rest","title","description","dialogProps","confirmationButtonProps","cancellationButtonProps","fullWidth","onClick","color","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,OAAOA,YAA6B,uBAAsB;AAC1D,OAAOC,YAA6B,uBAAsB;AAC1D,OAAOC,mBAAmB,8BAA6B;AACvD,OAAOC,mBAAmB,8BAA6B;AACvD,OAAOC,uBAEA,kCAAiC;AACxC,OAAOC,iBAAuC,4BAA2B;AACzE,SAASC,UAAU,QAAQ,QAAO;AAkBlC,OAAO,MAAMC,8BAAgBD,WAC3B,CAACE,OAAOC;IACN,MAAM,EACJC,IAAI,EACJC,UAAU;QACRC,kBAAkB;QAClBC,kBAAkB;IACpB,CAAC,EACDC,QAAQ,EACRC,SAAS,EACTC,OAAO,EAER,GAAGR,OADCS,wCACDT;;;;;;;IACJ,MAAM,EACJU,KAAK,EACLC,WAAW,EACXN,gBAAgB,EAChBD,gBAAgB,EAChBQ,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGX;IACJ,qBACE,MAACV;QACCQ,KAAKA;QACLc,SAAS;OACLN,MACAG;QACJV,MAAMA;QACNM,SAASA;;YAERE,uBAAS,KAACb;0BAAaa;;YACvBC,6BACC,KAAChB;0BACC,cAAA,KAACC;8BAAmBe;;;0BAGxB,MAACjB;;kCACC,KAACF,qBAAWsB;wBAAyBE,SAASV;kCAC3CF;;kCAEH,KAACZ;wBACCyB,OAAM;uBACFJ;wBACJG,SAAST;kCAERF;;;;;;AAKX,GACD;AAEDN,cAAcmB,WAAW,GAAG;AAC5BnB,cAAcoB,KAAK,GAAG;AAEtB,eAAepB,cAAa"}
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/dialog-confirm.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Button, { ButtonProps } from '@mui/material/Button'\nimport Dialog, { DialogProps } from '@mui/material/Dialog'\nimport DialogActions from '@mui/material/DialogActions'\nimport DialogContent from '@mui/material/DialogContent'\nimport DialogContentText, {\n  DialogContentTextProps,\n} from '@mui/material/DialogContentText'\nimport DialogTitle, { DialogTitleProps } from '@mui/material/DialogTitle'\nimport { forwardRef } from 'react'\n\nexport interface DialogConfirmOptions {\n  cancellationText?: ButtonProps['children']\n  confirmationText?: ButtonProps['children']\n  cancellationButtonProps?: Partial<ButtonProps>\n  confirmationButtonProps?: Partial<ButtonProps>\n  dialogProps?: Partial<DialogProps>\n  title?: DialogTitleProps['children']\n  description?: DialogContentTextProps['children']\n}\n\nexport interface DialogConfirmProps extends DialogProps {\n  options?: DialogConfirmOptions\n  onConfirm?: ButtonProps['onClick']\n  onCancel?: ButtonProps['onClick']\n}\n\nexport const DialogConfirm = forwardRef<any, DialogConfirmProps>(\n  (props, ref) => {\n    const {\n      open,\n      options = {\n        cancellationText: 'Cancel',\n        confirmationText: 'OK',\n      },\n      onCancel,\n      onConfirm,\n      onClose,\n      ...rest\n    } = props\n    const {\n      title,\n      description,\n      confirmationText,\n      cancellationText,\n      dialogProps,\n      confirmationButtonProps,\n      cancellationButtonProps,\n    } = options\n    return (\n      <Dialog\n        ref={ref}\n        fullWidth\n        {...rest}\n        {...dialogProps}\n        open={open}\n        onClose={onClose}\n      >\n        {title && <DialogTitle>{title}</DialogTitle>}\n        {description && (\n          <DialogContent>\n            <DialogContentText>{description}</DialogContentText>\n          </DialogContent>\n        )}\n        {/* Once answered the dialog fades out with its buttons still drawn;\n            they are disabled for that moment so they don't look live. */}\n        <DialogActions>\n          <Button\n            {...cancellationButtonProps}\n            disabled={!open || cancellationButtonProps?.disabled}\n            onClick={onCancel}\n          >\n            {cancellationText}\n          </Button>\n          <Button\n            color=\"primary\"\n            {...confirmationButtonProps}\n            disabled={!open || confirmationButtonProps?.disabled}\n            onClick={onConfirm}\n          >\n            {confirmationText}\n          </Button>\n        </DialogActions>\n      </Dialog>\n    )\n  },\n)\n\nDialogConfirm.displayName = 'DialogConfirm'\nDialogConfirm.aglyn = true\n\nexport default DialogConfirm\n"],"names":["Button","Dialog","DialogActions","DialogContent","DialogContentText","DialogTitle","forwardRef","DialogConfirm","props","ref","open","options","cancellationText","confirmationText","onCancel","onConfirm","onClose","rest","title","description","dialogProps","confirmationButtonProps","cancellationButtonProps","fullWidth","disabled","onClick","color","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,OAAOA,YAA6B,uBAAsB;AAC1D,OAAOC,YAA6B,uBAAsB;AAC1D,OAAOC,mBAAmB,8BAA6B;AACvD,OAAOC,mBAAmB,8BAA6B;AACvD,OAAOC,uBAEA,kCAAiC;AACxC,OAAOC,iBAAuC,4BAA2B;AACzE,SAASC,UAAU,QAAQ,QAAO;AAkBlC,OAAO,MAAMC,8BAAgBD,WAC3B,CAACE,OAAOC;IACN,MAAM,EACJC,IAAI,EACJC,UAAU;QACRC,kBAAkB;QAClBC,kBAAkB;IACpB,CAAC,EACDC,QAAQ,EACRC,SAAS,EACTC,OAAO,EAER,GAAGR,OADCS,wCACDT;;;;;;;IACJ,MAAM,EACJU,KAAK,EACLC,WAAW,EACXN,gBAAgB,EAChBD,gBAAgB,EAChBQ,WAAW,EACXC,uBAAuB,EACvBC,uBAAuB,EACxB,GAAGX;IACJ,qBACE,MAACV;QACCQ,KAAKA;QACLc,SAAS;OACLN,MACAG;QACJV,MAAMA;QACNM,SAASA;;YAERE,uBAAS,KAACb;0BAAaa;;YACvBC,6BACC,KAAChB;0BACC,cAAA,KAACC;8BAAmBe;;;0BAKxB,MAACjB;;kCACC,KAACF,qBACKsB;wBACJE,UAAU,CAACd,SAAQY,2CAAAA,wBAAyBE,QAAQ;wBACpDC,SAASX;kCAERF;;kCAEH,KAACZ;wBACC0B,OAAM;uBACFL;wBACJG,UAAU,CAACd,SAAQW,2CAAAA,wBAAyBG,QAAQ;wBACpDC,SAASV;kCAERF;;;;;;AAKX,GACD;AAEDN,cAAcoB,WAAW,GAAG;AAC5BpB,cAAcqB,KAAK,GAAG;AAEtB,eAAerB,cAAa"}

package/src/lib/components/permission-choice-list.component.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @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 ReactNode } from 'react';
+/**
+ * A grouped, searchable list of permissions with three states each (AGL-4047):
+ * inherit (the layer below decides), allow, or deny. Drawn by every editor of
+ * a permission map — a custom role, one member's overrides, one collaborator's
+ * per-site toggles — so they look and behave alike.
+ *
+ * Presentation only: the caller decides which keys are offered, how they are
+ * grouped, what a search keeps and what "inherit" resolves to, and hands the
+ * words in. NOT in the `@aglyn/shared-ui-jsx` barrel; subpath-import it
+ * (`@aglyn/shared-ui-jsx/components/permission-choice-list.component`).
+ */
+export type PermissionChoiceValue = 'inherit' | 'grant' | 'deny';
+export interface PermissionChoiceItem {
+    key: string;
+    label: string;
+    description?: string;
+    choice: PermissionChoiceValue;
+    /**
+     * The verdict the member ends up with and where it came from
+     * ("Allowed by the Editor role"), shown under the description.
+     */
+    effective?: {
+        granted: boolean;
+        source: string;
+    };
+    /** What inherit resolves to here, when there is one answer ("Editor default: allowed"). */
+    inheritHint?: string;
+    /** A reason the row cannot change, shown as the toggle's tooltip. */
+    lockedReason?: string;
+}
+export interface PermissionChoiceSection {
+    id: string;
+    label: string;
+    items: PermissionChoiceItem[];
+}
+export interface PermissionChoiceListProps {
+    sections: readonly PermissionChoiceSection[];
+    /** Sets one key (or, from a group heading, every key of the group) to a choice. */
+    onChange: (keys: string[], choice: PermissionChoiceValue) => void;
+    /** The search box; absent hides it. */
+    search?: string;
+    onSearchChange?: (value: string) => void;
+    disabled?: boolean;
+    /** The words for the three states. */
+    labels?: Partial<Record<PermissionChoiceValue, string>>;
+    /** Shown when a search keeps nothing. */
+    emptyMessage?: ReactNode;
+    /** Offer "set the whole group" on each heading. */
+    groupActions?: boolean;
+}
+export declare function PermissionChoiceList(props: PermissionChoiceListProps): import("react").JSX.Element;
+export declare namespace PermissionChoiceList {
+    var displayName: string;
+}
+export default PermissionChoiceList;

package/src/lib/components/permission-choice-list.component.js

@@ -0,0 +1,225 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+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 { Box, Chip, Divider, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from "@mui/material";
+import { useId } from "react";
+const CHOICES = [
+    'inherit',
+    'grant',
+    'deny'
+];
+const DEFAULT_LABELS = {
+    inherit: 'Inherit',
+    grant: 'Allow',
+    deny: 'Deny'
+};
+function ChoiceToggle(props) {
+    return /*#__PURE__*/ _jsx(ToggleButtonGroup, {
+        size: "small",
+        exclusive: true,
+        value: props.value,
+        disabled: props.disabled,
+        "aria-label": props.ariaLabel,
+        onChange: (_event, next)=>{
+            if (next) props.onChange(next);
+        },
+        sx: {
+            flexShrink: 0
+        },
+        children: CHOICES.map((choice)=>/*#__PURE__*/ _jsx(ToggleButton, {
+                value: choice,
+                color: choice === 'grant' ? 'success' : choice === 'deny' ? 'error' : 'standard',
+                sx: {
+                    px: 1.25,
+                    py: 0.25,
+                    textTransform: 'none'
+                },
+                children: props.labels[choice]
+            }, choice))
+    });
+}
+export function PermissionChoiceList(props) {
+    var _props_search, _props_emptyMessage;
+    const labels = _extends({}, DEFAULT_LABELS, props.labels);
+    const searchId = useId();
+    const visible = props.sections.filter((section)=>section.items.length > 0);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            props.onSearchChange ? /*#__PURE__*/ _jsx(TextField, {
+                id: searchId,
+                size: "small",
+                type: "search",
+                label: "Search permissions",
+                value: (_props_search = props.search) != null ? _props_search : '',
+                onChange: (event)=>props.onSearchChange == null ? void 0 : props.onSearchChange.call(props, event.target.value)
+            }) : null,
+            visible.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: (_props_emptyMessage = props.emptyMessage) != null ? _props_emptyMessage : 'No permission matches your search.'
+            }) : null,
+            visible.map((section)=>{
+                var _ref;
+                var _section_items_;
+                const granted = section.items.filter((item)=>item.choice === 'grant').length;
+                const denied = section.items.filter((item)=>item.choice === 'deny').length;
+                const shared = section.items.every((item)=>{
+                    var _section_items_;
+                    return item.choice === ((_section_items_ = section.items[0]) == null ? void 0 : _section_items_.choice);
+                }) ? (_ref = (_section_items_ = section.items[0]) == null ? void 0 : _section_items_.choice) != null ? _ref : null : null;
+                const changeable = section.items.filter((item)=>!item.lockedReason).map((item)=>item.key);
+                return /*#__PURE__*/ _jsxs(Box, {
+                    component: "section",
+                    "aria-label": section.label,
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: {
+                                xs: 'column',
+                                sm: 'row'
+                            },
+                            spacing: 1,
+                            sx: {
+                                alignItems: {
+                                    xs: 'flex-start',
+                                    sm: 'center'
+                                },
+                                justifyContent: 'space-between',
+                                mb: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    sx: {
+                                        alignItems: 'center',
+                                        flexWrap: 'wrap',
+                                        rowGap: 0.5
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "subtitle2",
+                                            component: "h3",
+                                            children: section.label
+                                        }),
+                                        granted ? /*#__PURE__*/ _jsx(Chip, {
+                                            size: "small",
+                                            color: "success",
+                                            variant: "outlined",
+                                            label: `${granted} allowed`
+                                        }) : null,
+                                        denied ? /*#__PURE__*/ _jsx(Chip, {
+                                            size: "small",
+                                            color: "error",
+                                            variant: "outlined",
+                                            label: `${denied} denied`
+                                        }) : null
+                                    ]
+                                }),
+                                props.groupActions && changeable.length > 1 ? /*#__PURE__*/ _jsx(ChoiceToggle, {
+                                    value: shared,
+                                    labels: labels,
+                                    disabled: props.disabled,
+                                    ariaLabel: `Set every ${section.label} permission`,
+                                    onChange: (choice)=>props.onChange(changeable, choice)
+                                }) : null
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Stack, {
+                            divider: /*#__PURE__*/ _jsx(Divider, {
+                                flexItem: true
+                            }),
+                            sx: {
+                                border: 1,
+                                borderColor: 'divider',
+                                borderRadius: 1
+                            },
+                            children: section.items.map((item)=>{
+                                const toggle = /*#__PURE__*/ _jsx("span", {
+                                    children: /*#__PURE__*/ _jsx(ChoiceToggle, {
+                                        value: item.choice,
+                                        labels: labels,
+                                        disabled: props.disabled || Boolean(item.lockedReason),
+                                        ariaLabel: item.label,
+                                        onChange: (choice)=>props.onChange([
+                                                item.key
+                                            ], choice)
+                                    })
+                                });
+                                return /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: {
+                                        xs: 'column',
+                                        sm: 'row'
+                                    },
+                                    spacing: 1.5,
+                                    sx: {
+                                        px: 1.5,
+                                        py: 1,
+                                        alignItems: {
+                                            xs: 'stretch',
+                                            sm: 'center'
+                                        },
+                                        justifyContent: 'space-between'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Box, {
+                                            sx: {
+                                                minWidth: 0
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "body2",
+                                                    children: item.label
+                                                }),
+                                                item.description ? /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "caption",
+                                                    color: "text.secondary",
+                                                    component: "p",
+                                                    children: item.description
+                                                }) : null,
+                                                item.effective ? /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "caption",
+                                                    component: "p",
+                                                    color: item.effective.granted ? 'success.main' : 'text.secondary',
+                                                    children: `${item.effective.granted ? 'Allowed' : 'Not allowed'} · ${item.effective.source}`
+                                                }) : null,
+                                                item.choice === 'inherit' && item.inheritHint ? /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "caption",
+                                                    color: "text.secondary",
+                                                    component: "p",
+                                                    children: item.inheritHint
+                                                }) : null
+                                            ]
+                                        }),
+                                        item.lockedReason ? /*#__PURE__*/ _jsx(Tooltip, {
+                                            title: item.lockedReason,
+                                            children: toggle
+                                        }) : toggle
+                                    ]
+                                }, item.key);
+                            })
+                        })
+                    ]
+                }, section.id);
+            })
+        ]
+    });
+}
+PermissionChoiceList.displayName = 'PermissionChoiceList';
+export default PermissionChoiceList;
+
+//# sourceMappingURL=permission-choice-list.component.js.map

package/src/lib/components/permission-choice-list.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/permission-choice-list.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Box,\n  Chip,\n  Divider,\n  Stack,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport { useId, type ReactNode } from 'react'\n\n/**\n * A grouped, searchable list of permissions with three states each (AGL-4047):\n * inherit (the layer below decides), allow, or deny. Drawn by every editor of\n * a permission map — a custom role, one member's overrides, one collaborator's\n * per-site toggles — so they look and behave alike.\n *\n * Presentation only: the caller decides which keys are offered, how they are\n * grouped, what a search keeps and what \"inherit\" resolves to, and hands the\n * words in. NOT in the `@aglyn/shared-ui-jsx` barrel; subpath-import it\n * (`@aglyn/shared-ui-jsx/components/permission-choice-list.component`).\n */\n\nexport type PermissionChoiceValue = 'inherit' | 'grant' | 'deny'\n\nexport interface PermissionChoiceItem {\n  key: string\n  label: string\n  description?: string\n  choice: PermissionChoiceValue\n  /**\n   * The verdict the member ends up with and where it came from\n   * (\"Allowed by the Editor role\"), shown under the description.\n   */\n  effective?: { granted: boolean; source: string }\n  /** What inherit resolves to here, when there is one answer (\"Editor default: allowed\"). */\n  inheritHint?: string\n  /** A reason the row cannot change, shown as the toggle's tooltip. */\n  lockedReason?: string\n}\n\nexport interface PermissionChoiceSection {\n  id: string\n  label: string\n  items: PermissionChoiceItem[]\n}\n\nexport interface PermissionChoiceListProps {\n  sections: readonly PermissionChoiceSection[]\n  /** Sets one key (or, from a group heading, every key of the group) to a choice. */\n  onChange: (keys: string[], choice: PermissionChoiceValue) => void\n  /** The search box; absent hides it. */\n  search?: string\n  onSearchChange?: (value: string) => void\n  disabled?: boolean\n  /** The words for the three states. */\n  labels?: Partial<Record<PermissionChoiceValue, string>>\n  /** Shown when a search keeps nothing. */\n  emptyMessage?: ReactNode\n  /** Offer \"set the whole group\" on each heading. */\n  groupActions?: boolean\n}\n\nconst CHOICES: readonly PermissionChoiceValue[] = ['inherit', 'grant', 'deny']\n\nconst DEFAULT_LABELS: Record<PermissionChoiceValue, string> = {\n  inherit: 'Inherit',\n  grant: 'Allow',\n  deny: 'Deny',\n}\n\nfunction ChoiceToggle(props: {\n  value: PermissionChoiceValue | null\n  onChange: (choice: PermissionChoiceValue) => void\n  disabled?: boolean\n  labels: Record<PermissionChoiceValue, string>\n  ariaLabel: string\n}) {\n  return (\n    <ToggleButtonGroup\n      size=\"small\"\n      exclusive\n      value={props.value}\n      disabled={props.disabled}\n      aria-label={props.ariaLabel}\n      onChange={(_event, next: PermissionChoiceValue | null) => {\n        if (next) props.onChange(next)\n      }}\n      sx={{ flexShrink: 0 }}\n    >\n      {CHOICES.map((choice) => (\n        <ToggleButton\n          key={choice}\n          value={choice}\n          color={choice === 'grant' ? 'success' : choice === 'deny' ? 'error' : 'standard'}\n          sx={{ px: 1.25, py: 0.25, textTransform: 'none' }}\n        >\n          {props.labels[choice]}\n        </ToggleButton>\n      ))}\n    </ToggleButtonGroup>\n  )\n}\n\nexport function PermissionChoiceList(props: PermissionChoiceListProps) {\n  const labels = { ...DEFAULT_LABELS, ...props.labels }\n  const searchId = useId()\n  const visible = props.sections.filter((section) => section.items.length > 0)\n  return (\n    <Stack spacing={2}>\n      {props.onSearchChange ? (\n        <TextField\n          id={searchId}\n          size=\"small\"\n          type=\"search\"\n          label=\"Search permissions\"\n          value={props.search ?? ''}\n          onChange={(event) => props.onSearchChange?.(event.target.value)}\n        />\n      ) : null}\n      {visible.length === 0 ? (\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {props.emptyMessage ?? 'No permission matches your search.'}\n        </Typography>\n      ) : null}\n      {visible.map((section) => {\n        const granted = section.items.filter((item) => item.choice === 'grant').length\n        const denied = section.items.filter((item) => item.choice === 'deny').length\n        const shared = section.items.every((item) => item.choice === section.items[0]?.choice)\n          ? (section.items[0]?.choice ?? null)\n          : null\n        const changeable = section.items.filter((item) => !item.lockedReason).map((item) => item.key)\n        return (\n          <Box key={section.id} component=\"section\" aria-label={section.label}>\n            <Stack\n              direction={{ xs: 'column', sm: 'row' }}\n              spacing={1}\n              sx={{ alignItems: { xs: 'flex-start', sm: 'center' }, justifyContent: 'space-between', mb: 1 }}\n            >\n              <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 0.5 }}>\n                <Typography variant=\"subtitle2\" component=\"h3\">\n                  {section.label}\n                </Typography>\n                {granted ? <Chip size=\"small\" color=\"success\" variant=\"outlined\" label={`${granted} allowed`} /> : null}\n                {denied ? <Chip size=\"small\" color=\"error\" variant=\"outlined\" label={`${denied} denied`} /> : null}\n              </Stack>\n              {props.groupActions && changeable.length > 1 ? (\n                <ChoiceToggle\n                  value={shared}\n                  labels={labels}\n                  disabled={props.disabled}\n                  ariaLabel={`Set every ${section.label} permission`}\n                  onChange={(choice) => props.onChange(changeable, choice)}\n                />\n              ) : null}\n            </Stack>\n            <Stack divider={<Divider flexItem />} sx={{ border: 1, borderColor: 'divider', borderRadius: 1 }}>\n              {section.items.map((item) => {\n                const toggle = (\n                  <span>\n                    <ChoiceToggle\n                      value={item.choice}\n                      labels={labels}\n                      disabled={props.disabled || Boolean(item.lockedReason)}\n                      ariaLabel={item.label}\n                      onChange={(choice) => props.onChange([item.key], choice)}\n                    />\n                  </span>\n                )\n                return (\n                  <Stack\n                    key={item.key}\n                    direction={{ xs: 'column', sm: 'row' }}\n                    spacing={1.5}\n                    sx={{ px: 1.5, py: 1, alignItems: { xs: 'stretch', sm: 'center' }, justifyContent: 'space-between' }}\n                  >\n                    <Box sx={{ minWidth: 0 }}>\n                      <Typography variant=\"body2\">{item.label}</Typography>\n                      {item.description ? (\n                        <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">\n                          {item.description}\n                        </Typography>\n                      ) : null}\n                      {item.effective ? (\n                        <Typography\n                          variant=\"caption\"\n                          component=\"p\"\n                          color={item.effective.granted ? 'success.main' : 'text.secondary'}\n                        >\n                          {`${item.effective.granted ? 'Allowed' : 'Not allowed'} · ${item.effective.source}`}\n                        </Typography>\n                      ) : null}\n                      {item.choice === 'inherit' && item.inheritHint ? (\n                        <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">\n                          {item.inheritHint}\n                        </Typography>\n                      ) : null}\n                    </Box>\n                    {item.lockedReason ? <Tooltip title={item.lockedReason}>{toggle}</Tooltip> : toggle}\n                  </Stack>\n                )\n              })}\n            </Stack>\n          </Box>\n        )\n      })}\n    </Stack>\n  )\n}\nPermissionChoiceList.displayName = 'PermissionChoiceList'\n\nexport default PermissionChoiceList\n"],"names":["Box","Chip","Divider","Stack","TextField","ToggleButton","ToggleButtonGroup","Tooltip","Typography","useId","CHOICES","DEFAULT_LABELS","inherit","grant","deny","ChoiceToggle","props","size","exclusive","value","disabled","aria-label","ariaLabel","onChange","_event","next","sx","flexShrink","map","choice","color","px","py","textTransform","labels","PermissionChoiceList","searchId","visible","sections","filter","section","items","length","spacing","onSearchChange","id","type","label","search","event","target","variant","emptyMessage","granted","item","denied","shared","every","changeable","lockedReason","key","component","direction","xs","sm","alignItems","justifyContent","mb","flexWrap","rowGap","groupActions","divider","flexItem","border","borderColor","borderRadius","toggle","span","Boolean","minWidth","description","effective","source","inheritHint","title","displayName"],"mappings":"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"}

package/src/lib/components/status-chip.component.d.ts

@@ -11,6 +11,11 @@ export interface StatusChipProps {
     icon?: ReactElement;
     /** Outlined for a quiet status beside other content; filled to stand out. */
     variant?: 'filled' | 'outlined';
+    /**
+     * The root element. `span` where the chip sits inside phrasing content,
+     * such as a heading or a tab label, where a `div` is not allowed.
+     */
+    component?: 'div' | 'span';
     'data-testid'?: string;
 }
 /**

package/src/lib/components/status-chip.component.js

@@ -30,13 +30,15 @@ const TONE_COLOR = {
  * per card, and the same state came out in different colors on different
  * cards; a tone names what the state means and the theme picks the color.
  */ export function StatusChip(props) {
-    const { label, tone = 'neutral', icon, variant = 'filled' } = props;
+    const { label, tone = 'neutral', icon, variant = 'filled', component } = props;
     return /*#__PURE__*/ _jsx(Chip, _extends({
         size: "small",
         label: label,
         color: TONE_COLOR[tone],
         variant: variant
-    }, icon ? {
+    }, component ? {
+        component
+    } : {}, icon ? {
         icon
     } : {}, {
         "data-testid": props['data-testid']

package/src/lib/components/status-chip.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/status-chip.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport Chip, { type ChipProps } from '@mui/material/Chip'\nimport type { ReactElement } from 'react'\n\n/**\n * What a status says about the thing it labels. The five tones are the\n * theme's own palette roles, so a status reads the same in every card.\n */\nexport type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error'\n\nconst TONE_COLOR: Readonly<Record<StatusTone, ChipProps['color']>> = {\n  neutral: 'default',\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  error: 'error',\n}\n\nexport interface StatusChipProps {\n  label: string\n  tone?: StatusTone\n  /** An icon before the label, such as an `MdiIcon`. */\n  icon?: ReactElement\n  /** Outlined for a quiet status beside other content; filled to stand out. */\n  variant?: 'filled' | 'outlined'\n  'data-testid'?: string\n}\n\n/**\n * A record's state as a small chip — On, Connected, Needs attention\n * (AGL-3637). Plugins mapped each status to a hand-picked MUI `Chip` color\n * per card, and the same state came out in different colors on different\n * cards; a tone names what the state means and the theme picks the color.\n */\nexport function StatusChip(props: StatusChipProps) {\n  const { label, tone = 'neutral', icon, variant = 'filled' } = props\n  return (\n    <Chip\n      size=\"small\"\n      label={label}\n      color={TONE_COLOR[tone]}\n      variant={variant}\n      {...(icon ? { icon } : {})}\n      data-testid={props['data-testid']}\n    />\n  )\n}\nStatusChip.displayName = 'StatusChip'\n\nexport default StatusChip\n"],"names":["Chip","TONE_COLOR","neutral","info","success","warning","error","StatusChip","props","label","tone","icon","variant","size","color","data-testid","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAEA,OAAOA,UAA8B,qBAAoB;AASzD,MAAMC,aAA+D;IACnEC,SAAS;IACTC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,OAAO;AACT;AAYA;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,KAAK,EAAEC,OAAO,SAAS,EAAEC,IAAI,EAAEC,UAAU,QAAQ,EAAE,GAAGJ;IAC9D,qBACE,KAACR;QACCa,MAAK;QACLJ,OAAOA;QACPK,OAAOb,UAAU,CAACS,KAAK;QACvBE,SAASA;OACJD,OAAO;QAAEA;IAAK,IAAI,CAAC;QACxBI,eAAaP,KAAK,CAAC,cAAc;;AAGvC;AACAD,WAAWS,WAAW,GAAG;AAEzB,eAAeT,WAAU"}
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/status-chip.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport Chip, { type ChipProps } from '@mui/material/Chip'\nimport type { ReactElement } from 'react'\n\n/**\n * What a status says about the thing it labels. The five tones are the\n * theme's own palette roles, so a status reads the same in every card.\n */\nexport type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error'\n\nconst TONE_COLOR: Readonly<Record<StatusTone, ChipProps['color']>> = {\n  neutral: 'default',\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  error: 'error',\n}\n\nexport interface StatusChipProps {\n  label: string\n  tone?: StatusTone\n  /** An icon before the label, such as an `MdiIcon`. */\n  icon?: ReactElement\n  /** Outlined for a quiet status beside other content; filled to stand out. */\n  variant?: 'filled' | 'outlined'\n  /**\n   * The root element. `span` where the chip sits inside phrasing content,\n   * such as a heading or a tab label, where a `div` is not allowed.\n   */\n  component?: 'div' | 'span'\n  'data-testid'?: string\n}\n\n/**\n * A record's state as a small chip — On, Connected, Needs attention\n * (AGL-3637). Plugins mapped each status to a hand-picked MUI `Chip` color\n * per card, and the same state came out in different colors on different\n * cards; a tone names what the state means and the theme picks the color.\n */\nexport function StatusChip(props: StatusChipProps) {\n  const { label, tone = 'neutral', icon, variant = 'filled', component } = props\n  return (\n    <Chip\n      size=\"small\"\n      label={label}\n      color={TONE_COLOR[tone]}\n      variant={variant}\n      {...(component ? { component } : {})}\n      {...(icon ? { icon } : {})}\n      data-testid={props['data-testid']}\n    />\n  )\n}\nStatusChip.displayName = 'StatusChip'\n\nexport default StatusChip\n"],"names":["Chip","TONE_COLOR","neutral","info","success","warning","error","StatusChip","props","label","tone","icon","variant","component","size","color","data-testid","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAEA,OAAOA,UAA8B,qBAAoB;AASzD,MAAMC,aAA+D;IACnEC,SAAS;IACTC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,OAAO;AACT;AAiBA;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,KAAK,EAAEC,OAAO,SAAS,EAAEC,IAAI,EAAEC,UAAU,QAAQ,EAAEC,SAAS,EAAE,GAAGL;IACzE,qBACE,KAACR;QACCc,MAAK;QACLL,OAAOA;QACPM,OAAOd,UAAU,CAACS,KAAK;QACvBE,SAASA;OACJC,YAAY;QAAEA;IAAU,IAAI,CAAC,GAC7BF,OAAO;QAAEA;IAAK,IAAI,CAAC;QACxBK,eAAaR,KAAK,CAAC,cAAc;;AAGvC;AACAD,WAAWU,WAAW,GAAG;AAEzB,eAAeV,WAAU"}