@aglyn/shared-ui-jsx 1.0.0-beta.230 → 1.0.0-beta.231

package/package.json

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

package/src/lib/components/copy-field.component.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export interface CopyFieldProps {
+    label: string;
+    value: string;
+    helperText?: ReactNode;
+    /** Called once the value is on the clipboard, e.g. to show a snackbar. */
+    onCopied?: () => void;
+    /** Called when the browser refused the clipboard. */
+    onCopyFailed?: (error: unknown) => void;
+    /** The copy button's accessible name; `Copy {label}` by default. */
+    copyLabel?: string;
+    size?: 'small' | 'medium';
+    fullWidth?: boolean;
+}
+/**
+ * A value a reader copies somewhere else — a feed address, an API key's
+ * public half, a webhook URL — shown read-only with a copy button inside the
+ * field (AGL-3637). Focusing the field selects the whole value, so copying by
+ * hand works too.
+ */
+export declare function CopyField(props: CopyFieldProps): import("react").JSX.Element;
+export declare namespace CopyField {
+    var displayName: string;
+}
+export default CopyField;

package/src/lib/components/copy-field.component.js

@@ -0,0 +1,77 @@
+/**
+ * @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 { mdiContentCopy } from "@aglyn/shared-data-mdi";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import { useState } from "react";
+import { MdiIcon } from "./mdi-icon/mdi-icon.js";
+/**
+ * A value a reader copies somewhere else — a feed address, an API key's
+ * public half, a webhook URL — shown read-only with a copy button inside the
+ * field (AGL-3637). Focusing the field selects the whole value, so copying by
+ * hand works too.
+ */ export function CopyField(props) {
+    var _props_copyLabel;
+    const { label, value, helperText, onCopied, onCopyFailed, size = 'small', fullWidth = true } = props;
+    const [copied, setCopied] = useState(false);
+    const copyLabel = (_props_copyLabel = props.copyLabel) != null ? _props_copyLabel : `Copy ${label.toLowerCase()}`;
+    const copy = async ()=>{
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            onCopied == null ? void 0 : onCopied();
+        } catch (error) {
+            onCopyFailed == null ? void 0 : onCopyFailed(error);
+        }
+    };
+    return /*#__PURE__*/ _jsx(TextField, {
+        label: label,
+        value: value,
+        size: size,
+        fullWidth: fullWidth,
+        helperText: helperText,
+        onFocus: (event)=>event.target.select(),
+        slotProps: {
+            input: {
+                readOnly: true,
+                endAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                    position: "end",
+                    children: /*#__PURE__*/ _jsx(Tooltip, {
+                        title: copied ? 'Copied' : copyLabel,
+                        children: /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": copyLabel,
+                            edge: "end",
+                            onClick: ()=>void copy(),
+                            onMouseLeave: ()=>setCopied(false),
+                            children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                path: mdiContentCopy,
+                                fontSize: "small"
+                            })
+                        })
+                    })
+                })
+            }
+        }
+    });
+}
+CopyField.displayName = 'CopyField';
+export default CopyField;
+
+//# sourceMappingURL=copy-field.component.js.map

package/src/lib/components/copy-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/copy-field.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 { mdiContentCopy } from '@aglyn/shared-data-mdi'\nimport IconButton from '@mui/material/IconButton'\nimport InputAdornment from '@mui/material/InputAdornment'\nimport TextField from '@mui/material/TextField'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useState, type ReactNode } from 'react'\nimport { MdiIcon } from './mdi-icon/mdi-icon'\n\nexport interface CopyFieldProps {\n  label: string\n  value: string\n  helperText?: ReactNode\n  /** Called once the value is on the clipboard, e.g. to show a snackbar. */\n  onCopied?: () => void\n  /** Called when the browser refused the clipboard. */\n  onCopyFailed?: (error: unknown) => void\n  /** The copy button's accessible name; `Copy {label}` by default. */\n  copyLabel?: string\n  size?: 'small' | 'medium'\n  fullWidth?: boolean\n}\n\n/**\n * A value a reader copies somewhere else — a feed address, an API key's\n * public half, a webhook URL — shown read-only with a copy button inside the\n * field (AGL-3637). Focusing the field selects the whole value, so copying by\n * hand works too.\n */\nexport function CopyField(props: CopyFieldProps) {\n  const { label, value, helperText, onCopied, onCopyFailed, size = 'small', fullWidth = true } = props\n  const [copied, setCopied] = useState(false)\n  const copyLabel = props.copyLabel ?? `Copy ${label.toLowerCase()}`\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(value)\n      setCopied(true)\n      onCopied?.()\n    } catch (error) {\n      onCopyFailed?.(error)\n    }\n  }\n  return (\n    <TextField\n      label={label}\n      value={value}\n      size={size}\n      fullWidth={fullWidth}\n      helperText={helperText}\n      onFocus={(event) => event.target.select()}\n      slotProps={{\n        input: {\n          readOnly: true,\n          endAdornment: (\n            <InputAdornment position=\"end\">\n              <Tooltip title={copied ? 'Copied' : copyLabel}>\n                <IconButton aria-label={copyLabel} edge=\"end\" onClick={() => void copy()} onMouseLeave={() => setCopied(false)}>\n                  <MdiIcon path={mdiContentCopy} fontSize=\"small\" />\n                </IconButton>\n              </Tooltip>\n            </InputAdornment>\n          ),\n        },\n      }}\n    />\n  )\n}\nCopyField.displayName = 'CopyField'\n\nexport default CopyField\n"],"names":["mdiContentCopy","IconButton","InputAdornment","TextField","Tooltip","useState","MdiIcon","CopyField","props","label","value","helperText","onCopied","onCopyFailed","size","fullWidth","copied","setCopied","copyLabel","toLowerCase","copy","navigator","clipboard","writeText","error","onFocus","event","target","select","slotProps","input","readOnly","endAdornment","position","title","aria-label","edge","onClick","onMouseLeave","path","fontSize","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,cAAc,QAAQ,yBAAwB;AACvD,OAAOC,gBAAgB,2BAA0B;AACjD,OAAOC,oBAAoB,+BAA8B;AACzD,OAAOC,eAAe,0BAAyB;AAC/C,OAAOC,aAAa,wBAAuB;AAC3C,SAASC,QAAQ,QAAwB,QAAO;AAChD,SAASC,OAAO,QAAQ,yBAAqB;AAgB7C;;;;;CAKC,GACD,OAAO,SAASC,UAAUC,KAAqB;QAG3BA;IAFlB,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,OAAO,OAAO,EAAEC,YAAY,IAAI,EAAE,GAAGP;IAC/F,MAAM,CAACQ,QAAQC,UAAU,GAAGZ,SAAS;IACrC,MAAMa,aAAYV,mBAAAA,MAAMU,SAAS,YAAfV,mBAAmB,CAAC,KAAK,EAAEC,MAAMU,WAAW,IAAI;IAClE,MAAMC,OAAO;QACX,IAAI;YACF,MAAMC,UAAUC,SAAS,CAACC,SAAS,CAACb;YACpCO,UAAU;YACVL,4BAAAA;QACF,EAAE,OAAOY,OAAO;YACdX,gCAAAA,aAAeW;QACjB;IACF;IACA,qBACE,KAACrB;QACCM,OAAOA;QACPC,OAAOA;QACPI,MAAMA;QACNC,WAAWA;QACXJ,YAAYA;QACZc,SAAS,CAACC,QAAUA,MAAMC,MAAM,CAACC,MAAM;QACvCC,WAAW;YACTC,OAAO;gBACLC,UAAU;gBACVC,4BACE,KAAC9B;oBAAe+B,UAAS;8BACvB,cAAA,KAAC7B;wBAAQ8B,OAAOlB,SAAS,WAAWE;kCAClC,cAAA,KAACjB;4BAAWkC,cAAYjB;4BAAWkB,MAAK;4BAAMC,SAAS,IAAM,KAAKjB;4BAAQkB,cAAc,IAAMrB,UAAU;sCACtG,cAAA,KAACX;gCAAQiC,MAAMvC;gCAAgBwC,UAAS;;;;;YAKlD;QACF;;AAGN;AACAjC,UAAUkC,WAAW,GAAG;AAExB,eAAelC,UAAS"}

package/src/lib/components/download-cost-badge.component.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+/**
+ * A download size as a person reads it: `0 KB`, `38 KB`, `1.2 MB`.
+ * Kilobytes are 1,024 bytes, as browsers' network panels count them.
+ */
+export declare function formatDownloadSize(bytes: number): string;
+/** `38 KB · 2 files`, approximate when `approximate`. */
+export declare function downloadCostLabel(bytes: number, files: number, approximate?: boolean): string;
+export interface DownloadCostBadgeProps {
+    /** Bytes a visitor downloads; absent while unknown. */
+    bytes?: number | null;
+    /** How many files those bytes are. */
+    files?: number | null;
+    /** Shows `≈`: some of the size could not be measured, or it is an estimate. */
+    approximate?: boolean;
+    /** Still measuring. */
+    loading?: boolean;
+    /** Why it could not be measured; shows the badge's error state. */
+    error?: string | null;
+    /** What the figure counts, for the badge's tooltip. */
+    tooltip?: ReactNode;
+    /** The label while measuring. */
+    loadingLabel?: string;
+}
+/**
+ * What something costs a visitor to download, as one small badge: the size
+ * and the number of files, with a tooltip saying what is counted, and its
+ * own measuring and failed states (AGL-3656, first for the font picker).
+ *
+ * A badge, not a sentence, because it sits beside a choice and is read at a
+ * glance while comparing two. NOT in the barrel: subpath-import it.
+ */
+export declare function DownloadCostBadge(props: DownloadCostBadgeProps): import("react").JSX.Element;
+export declare namespace DownloadCostBadge {
+    var displayName: string;
+}
+export default DownloadCostBadge;

package/src/lib/components/download-cost-badge.component.js

@@ -0,0 +1,89 @@
+/**
+ * @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, Fragment as _Fragment } from "react/jsx-runtime";
+import { mdiAlertCircleOutline, mdiTrayArrowDown } from "@aglyn/shared-data-mdi";
+import { Chip, CircularProgress, Tooltip } from "@mui/material";
+import MdiIcon from "./mdi-icon/mdi-icon.js";
+/**
+ * A download size as a person reads it: `0 KB`, `38 KB`, `1.2 MB`.
+ * Kilobytes are 1,024 bytes, as browsers' network panels count them.
+ */ export function formatDownloadSize(bytes) {
+    if (!Number.isFinite(bytes) || bytes <= 0) return '0 KB';
+    if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+}
+/** `38 KB · 2 files`, approximate when `approximate`. */ export function downloadCostLabel(bytes, files, approximate = false) {
+    const size = `${approximate ? '≈ ' : ''}${formatDownloadSize(bytes)}`;
+    if (!files) return size;
+    return `${size} · ${files} ${files === 1 ? 'file' : 'files'}`;
+}
+/**
+ * What something costs a visitor to download, as one small badge: the size
+ * and the number of files, with a tooltip saying what is counted, and its
+ * own measuring and failed states (AGL-3656, first for the font picker).
+ *
+ * A badge, not a sentence, because it sits beside a choice and is read at a
+ * glance while comparing two. NOT in the barrel: subpath-import it.
+ */ export function DownloadCostBadge(props) {
+    const { bytes, files, approximate = false, loading = false, error = null, tooltip, loadingLabel = 'Measuring…' } = props;
+    let chip;
+    if (loading) {
+        chip = /*#__PURE__*/ _jsx(Chip, {
+            size: "small",
+            variant: "outlined",
+            icon: /*#__PURE__*/ _jsx(CircularProgress, {
+                size: "1em",
+                color: "inherit"
+            }),
+            label: loadingLabel,
+            "aria-busy": true
+        });
+    } else if (error || bytes === null || bytes === undefined) {
+        chip = /*#__PURE__*/ _jsx(Chip, {
+            size: "small",
+            variant: "outlined",
+            color: "warning",
+            icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                path: mdiAlertCircleOutline.path
+            }),
+            label: "Size unavailable"
+        });
+    } else {
+        chip = /*#__PURE__*/ _jsx(Chip, {
+            size: "small",
+            variant: "outlined",
+            color: bytes === 0 ? 'success' : 'default',
+            icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                path: mdiTrayArrowDown.path
+            }),
+            label: downloadCostLabel(bytes, files != null ? files : 0, approximate)
+        });
+    }
+    const title = error != null ? error : tooltip;
+    if (!title) return /*#__PURE__*/ _jsx(_Fragment, {
+        children: chip
+    });
+    return /*#__PURE__*/ _jsx(Tooltip, {
+        title: title,
+        describeChild: true,
+        children: chip
+    });
+}
+DownloadCostBadge.displayName = 'DownloadCostBadge';
+export default DownloadCostBadge;
+
+//# sourceMappingURL=download-cost-badge.component.js.map

package/src/lib/components/download-cost-badge.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/download-cost-badge.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 { mdiAlertCircleOutline, mdiTrayArrowDown } from '@aglyn/shared-data-mdi'\nimport { Chip, CircularProgress, Tooltip } from '@mui/material'\nimport type { ReactElement, ReactNode } from 'react'\nimport MdiIcon from './mdi-icon/mdi-icon'\n\n/**\n * A download size as a person reads it: `0 KB`, `38 KB`, `1.2 MB`.\n * Kilobytes are 1,024 bytes, as browsers' network panels count them.\n */\nexport function formatDownloadSize(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes <= 0) return '0 KB'\n  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n  return `${Math.max(1, Math.round(bytes / 1024))} KB`\n}\n\n/** `38 KB · 2 files`, approximate when `approximate`. */\nexport function downloadCostLabel(\n  bytes: number,\n  files: number,\n  approximate = false,\n): string {\n  const size = `${approximate ? '≈ ' : ''}${formatDownloadSize(bytes)}`\n  if (!files) return size\n  return `${size} · ${files} ${files === 1 ? 'file' : 'files'}`\n}\n\nexport interface DownloadCostBadgeProps {\n  /** Bytes a visitor downloads; absent while unknown. */\n  bytes?: number | null\n  /** How many files those bytes are. */\n  files?: number | null\n  /** Shows `≈`: some of the size could not be measured, or it is an estimate. */\n  approximate?: boolean\n  /** Still measuring. */\n  loading?: boolean\n  /** Why it could not be measured; shows the badge's error state. */\n  error?: string | null\n  /** What the figure counts, for the badge's tooltip. */\n  tooltip?: ReactNode\n  /** The label while measuring. */\n  loadingLabel?: string\n}\n\n/**\n * What something costs a visitor to download, as one small badge: the size\n * and the number of files, with a tooltip saying what is counted, and its\n * own measuring and failed states (AGL-3656, first for the font picker).\n *\n * A badge, not a sentence, because it sits beside a choice and is read at a\n * glance while comparing two. NOT in the barrel: subpath-import it.\n */\nexport function DownloadCostBadge(props: DownloadCostBadgeProps) {\n  const {\n    bytes,\n    files,\n    approximate = false,\n    loading = false,\n    error = null,\n    tooltip,\n    loadingLabel = 'Measuring…',\n  } = props\n  let chip: ReactElement\n  if (loading) {\n    chip = (\n      <Chip\n        size=\"small\"\n        variant=\"outlined\"\n        icon={<CircularProgress size=\"1em\" color=\"inherit\" />}\n        label={loadingLabel}\n        aria-busy\n      />\n    )\n  } else if (error || bytes === null || bytes === undefined) {\n    chip = (\n      <Chip\n        size=\"small\"\n        variant=\"outlined\"\n        color=\"warning\"\n        icon={<MdiIcon path={mdiAlertCircleOutline.path} />}\n        label=\"Size unavailable\"\n      />\n    )\n  } else {\n    chip = (\n      <Chip\n        size=\"small\"\n        variant=\"outlined\"\n        color={bytes === 0 ? 'success' : 'default'}\n        icon={<MdiIcon path={mdiTrayArrowDown.path} />}\n        label={downloadCostLabel(bytes, files ?? 0, approximate)}\n      />\n    )\n  }\n  const title = error ?? tooltip\n  if (!title) return <>{chip}</>\n  return (\n    <Tooltip title={title} describeChild>\n      {chip}\n    </Tooltip>\n  )\n}\nDownloadCostBadge.displayName = 'DownloadCostBadge'\n\nexport default DownloadCostBadge\n"],"names":["mdiAlertCircleOutline","mdiTrayArrowDown","Chip","CircularProgress","Tooltip","MdiIcon","formatDownloadSize","bytes","Number","isFinite","toFixed","Math","max","round","downloadCostLabel","files","approximate","size","DownloadCostBadge","props","loading","error","tooltip","loadingLabel","chip","variant","icon","color","label","aria-busy","undefined","path","title","describeChild","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,yBAAwB;AAChF,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,OAAO,QAAQ,gBAAe;AAE/D,OAAOC,aAAa,yBAAqB;AAEzC;;;CAGC,GACD,OAAO,SAASC,mBAAmBC,KAAa;IAC9C,IAAI,CAACC,OAAOC,QAAQ,CAACF,UAAUA,SAAS,GAAG,OAAO;IAClD,IAAIA,SAAS,OAAO,MAAM,OAAO,GAAG,AAACA,CAAAA,QAAS,CAAA,OAAO,IAAG,CAAC,EAAGG,OAAO,CAAC,GAAG,GAAG,CAAC;IAC3E,OAAO,GAAGC,KAAKC,GAAG,CAAC,GAAGD,KAAKE,KAAK,CAACN,QAAQ,OAAO,GAAG,CAAC;AACtD;AAEA,uDAAuD,GACvD,OAAO,SAASO,kBACdP,KAAa,EACbQ,KAAa,EACbC,cAAc,KAAK;IAEnB,MAAMC,OAAO,GAAGD,cAAc,OAAO,KAAKV,mBAAmBC,QAAQ;IACrE,IAAI,CAACQ,OAAO,OAAOE;IACnB,OAAO,GAAGA,KAAK,GAAG,EAAEF,MAAM,CAAC,EAAEA,UAAU,IAAI,SAAS,SAAS;AAC/D;AAmBA;;;;;;;CAOC,GACD,OAAO,SAASG,kBAAkBC,KAA6B;IAC7D,MAAM,EACJZ,KAAK,EACLQ,KAAK,EACLC,cAAc,KAAK,EACnBI,UAAU,KAAK,EACfC,QAAQ,IAAI,EACZC,OAAO,EACPC,eAAe,YAAY,EAC5B,GAAGJ;IACJ,IAAIK;IACJ,IAAIJ,SAAS;QACXI,qBACE,KAACtB;YACCe,MAAK;YACLQ,SAAQ;YACRC,oBAAM,KAACvB;gBAAiBc,MAAK;gBAAMU,OAAM;;YACzCC,OAAOL;YACPM,WAAS;;IAGf,OAAO,IAAIR,SAASd,UAAU,QAAQA,UAAUuB,WAAW;QACzDN,qBACE,KAACtB;YACCe,MAAK;YACLQ,SAAQ;YACRE,OAAM;YACND,oBAAM,KAACrB;gBAAQ0B,MAAM/B,sBAAsB+B,IAAI;;YAC/CH,OAAM;;IAGZ,OAAO;QACLJ,qBACE,KAACtB;YACCe,MAAK;YACLQ,SAAQ;YACRE,OAAOpB,UAAU,IAAI,YAAY;YACjCmB,oBAAM,KAACrB;gBAAQ0B,MAAM9B,iBAAiB8B,IAAI;;YAC1CH,OAAOd,kBAAkBP,OAAOQ,gBAAAA,QAAS,GAAGC;;IAGlD;IACA,MAAMgB,QAAQX,gBAAAA,QAASC;IACvB,IAAI,CAACU,OAAO,qBAAO;kBAAGR;;IACtB,qBACE,KAACpB;QAAQ4B,OAAOA;QAAOC,aAAa;kBACjCT;;AAGP;AACAN,kBAAkBgB,WAAW,GAAG;AAEhC,eAAehB,kBAAiB"}

package/src/lib/components/file-drop-zone.component.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @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 SxProps, type Theme } from '@mui/material';
+import { type ReactNode } from 'react';
+/**
+ * A place to drop files, which is also the button that opens the file
+ * chooser (AGL-3656). Keyboard and screen reader reachable as one button;
+ * the drag states are drawn from theme tokens, so it follows light and dark.
+ *
+ * It hands back the files and nothing else: what is accepted, how each one
+ * is checked and where it goes are the caller's, which is what lets a font
+ * installer, an importer and a media library share it.
+ */
+export interface FileDropZoneProps {
+    /** Called with the files dropped or chosen, in order. */
+    onFiles: (files: File[]) => void;
+    /** The file input's `accept`; dropped files are filtered by it too. */
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** The headline, e.g. "Drop font files here". */
+    label: ReactNode;
+    /** One line under it, e.g. the formats and the size limit. */
+    hint?: ReactNode;
+    /** An mdi path for the icon above the label. */
+    icon?: string;
+    /** Called with the files `accept` refused, so the caller can say why. */
+    onRejected?: (files: File[]) => void;
+    sx?: SxProps<Theme>;
+}
+/** Whether a file matches an `accept` list of types, wildcards and extensions. */
+export declare function fileMatchesAccept(file: Pick<File, 'name' | 'type'>, accept: string | undefined): boolean;
+export declare function FileDropZone(props: FileDropZoneProps): import("react").JSX.Element;
+export default FileDropZone;

package/src/lib/components/file-drop-zone.component.js

@@ -0,0 +1,173 @@
+/**
+ * @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, jsxs as _jsxs } from "react/jsx-runtime";
+import { mdiTrayArrowUp } from "@mdi/js";
+import { Box, ButtonBase, Typography } from "@mui/material";
+import { useCallback, useId, useRef, useState } from "react";
+import { MdiIcon } from "./mdi-icon/index.js";
+/** Whether a file matches an `accept` list of types, wildcards and extensions. */ export function fileMatchesAccept(file, accept) {
+    if (!accept) return true;
+    const name = file.name.toLowerCase();
+    const type = (file.type || '').toLowerCase();
+    return accept.split(',').map((entry)=>entry.trim().toLowerCase()).filter(Boolean).some((entry)=>{
+        if (entry.startsWith('.')) return name.endsWith(entry);
+        if (entry.endsWith('/*')) return type.startsWith(entry.slice(0, -1));
+        return type === entry;
+    });
+}
+export function FileDropZone(props) {
+    const { onFiles, accept, multiple = true, disabled, label, hint, icon = mdiTrayArrowUp, onRejected, sx } = props;
+    const input = useRef(null);
+    const hintId = useId();
+    const [dragging, setDragging] = useState(false);
+    // Child elements fire their own enter/leave; counting keeps the highlight
+    // steady while the pointer crosses them.
+    const depth = useRef(0);
+    const deliver = useCallback((list)=>{
+        const files = Array.from(list != null ? list : []);
+        if (!files.length) return;
+        const accepted = files.filter((file)=>fileMatchesAccept(file, accept));
+        const rejected = files.filter((file)=>!accepted.includes(file));
+        if (rejected.length) onRejected == null ? void 0 : onRejected(rejected);
+        const chosen = multiple ? accepted : accepted.slice(0, 1);
+        if (chosen.length) onFiles(chosen);
+    }, [
+        accept,
+        multiple,
+        onFiles,
+        onRejected
+    ]);
+    const onDragEnter = (event)=>{
+        event.preventDefault();
+        if (disabled) return;
+        depth.current += 1;
+        setDragging(true);
+    };
+    const onDragLeave = (event)=>{
+        event.preventDefault();
+        depth.current = Math.max(0, depth.current - 1);
+        if (!depth.current) setDragging(false);
+    };
+    const onDragOver = (event)=>{
+        event.preventDefault();
+        if (!disabled) event.dataTransfer.dropEffect = 'copy';
+    };
+    const onDrop = (event)=>{
+        event.preventDefault();
+        depth.current = 0;
+        setDragging(false);
+        if (!disabled) deliver(event.dataTransfer.files);
+    };
+    return /*#__PURE__*/ _jsxs(ButtonBase, {
+        component: "div",
+        role: "button",
+        "aria-describedby": hint ? hintId : undefined,
+        "aria-disabled": disabled || undefined,
+        disabled: disabled,
+        onClick: ()=>{
+            var _input_current;
+            return (_input_current = input.current) == null ? void 0 : _input_current.click();
+        },
+        onDragEnter: onDragEnter,
+        onDragLeave: onDragLeave,
+        onDragOver: onDragOver,
+        onDrop: onDrop,
+        "data-dragging": dragging || undefined,
+        sx: [
+            (theme)=>{
+                var _theme_vars;
+                const tokens = (_theme_vars = theme.vars) != null ? _theme_vars : theme;
+                return {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 0.5,
+                    px: 2,
+                    py: 3,
+                    textAlign: 'center',
+                    borderRadius: `${tokens.shape.borderRadius}px`,
+                    border: `1px dashed ${tokens.palette.divider}`,
+                    backgroundColor: 'transparent',
+                    color: tokens.palette.text.secondary,
+                    transition: theme.transitions.create([
+                        'border-color',
+                        'background-color',
+                        'color'
+                    ], {
+                        duration: theme.transitions.duration.shortest
+                    }),
+                    '&:hover, &.Mui-focusVisible': {
+                        borderColor: tokens.palette.primary.main,
+                        color: tokens.palette.text.primary
+                    },
+                    '&[data-dragging]': {
+                        borderStyle: 'solid',
+                        borderColor: tokens.palette.primary.main,
+                        backgroundColor: theme.alpha(tokens.palette.primary.main, tokens.palette.action.hoverOpacity),
+                        color: tokens.palette.primary.main
+                    },
+                    '&.Mui-disabled': {
+                        opacity: tokens.palette.action.disabledOpacity
+                    }
+                };
+            },
+            ...Array.isArray(sx) ? sx : [
+                sx
+            ]
+        ],
+        children: [
+            /*#__PURE__*/ _jsx(MdiIcon, {
+                path: icon,
+                fontSize: "medium",
+                color: "inherit"
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                sx: {
+                    fontWeight: 'fontWeightMedium',
+                    color: 'inherit'
+                },
+                children: label
+            }),
+            hint ? /*#__PURE__*/ _jsx(Typography, {
+                id: hintId,
+                variant: "caption",
+                color: "text.secondary",
+                children: hint
+            }) : null,
+            /*#__PURE__*/ _jsx(Box, {
+                component: "input",
+                ref: input,
+                type: "file",
+                accept: accept,
+                multiple: multiple,
+                hidden: true,
+                tabIndex: -1,
+                onClick: (event)=>event.stopPropagation(),
+                onChange: (event)=>{
+                    deliver(event.target.files);
+                    event.target.value = '';
+                }
+            })
+        ]
+    });
+}
+export default FileDropZone;
+
+//# sourceMappingURL=file-drop-zone.component.js.map

package/src/lib/components/file-drop-zone.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/file-drop-zone.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\n'use client'\n\nimport { mdiTrayArrowUp } from '@mdi/js'\nimport { Box, ButtonBase, Typography, type SxProps, type Theme } from '@mui/material'\nimport { useCallback, useId, useRef, useState, type DragEvent, type ReactNode } from 'react'\nimport { MdiIcon } from './mdi-icon'\n\n/**\n * A place to drop files, which is also the button that opens the file\n * chooser (AGL-3656). Keyboard and screen reader reachable as one button;\n * the drag states are drawn from theme tokens, so it follows light and dark.\n *\n * It hands back the files and nothing else: what is accepted, how each one\n * is checked and where it goes are the caller's, which is what lets a font\n * installer, an importer and a media library share it.\n */\nexport interface FileDropZoneProps {\n  /** Called with the files dropped or chosen, in order. */\n  onFiles: (files: File[]) => void\n  /** The file input's `accept`; dropped files are filtered by it too. */\n  accept?: string\n  multiple?: boolean\n  disabled?: boolean\n  /** The headline, e.g. \"Drop font files here\". */\n  label: ReactNode\n  /** One line under it, e.g. the formats and the size limit. */\n  hint?: ReactNode\n  /** An mdi path for the icon above the label. */\n  icon?: string\n  /** Called with the files `accept` refused, so the caller can say why. */\n  onRejected?: (files: File[]) => void\n  sx?: SxProps<Theme>\n}\n\n/** Whether a file matches an `accept` list of types, wildcards and extensions. */\nexport function fileMatchesAccept(file: Pick<File, 'name' | 'type'>, accept: string | undefined): boolean {\n  if (!accept) return true\n  const name = file.name.toLowerCase()\n  const type = (file.type || '').toLowerCase()\n  return accept\n    .split(',')\n    .map((entry) => entry.trim().toLowerCase())\n    .filter(Boolean)\n    .some((entry) => {\n      if (entry.startsWith('.')) return name.endsWith(entry)\n      if (entry.endsWith('/*')) return type.startsWith(entry.slice(0, -1))\n      return type === entry\n    })\n}\n\nexport function FileDropZone(props: FileDropZoneProps) {\n  const { onFiles, accept, multiple = true, disabled, label, hint, icon = mdiTrayArrowUp, onRejected, sx } = props\n  const input = useRef<HTMLInputElement>(null)\n  const hintId = useId()\n  const [dragging, setDragging] = useState(false)\n  // Child elements fire their own enter/leave; counting keeps the highlight\n  // steady while the pointer crosses them.\n  const depth = useRef(0)\n\n  const deliver = useCallback(\n    (list: FileList | null) => {\n      const files = Array.from(list ?? [])\n      if (!files.length) return\n      const accepted = files.filter((file) => fileMatchesAccept(file, accept))\n      const rejected = files.filter((file) => !accepted.includes(file))\n      if (rejected.length) onRejected?.(rejected)\n      const chosen = multiple ? accepted : accepted.slice(0, 1)\n      if (chosen.length) onFiles(chosen)\n    },\n    [accept, multiple, onFiles, onRejected],\n  )\n\n  const onDragEnter = (event: DragEvent) => {\n    event.preventDefault()\n    if (disabled) return\n    depth.current += 1\n    setDragging(true)\n  }\n  const onDragLeave = (event: DragEvent) => {\n    event.preventDefault()\n    depth.current = Math.max(0, depth.current - 1)\n    if (!depth.current) setDragging(false)\n  }\n  const onDragOver = (event: DragEvent) => {\n    event.preventDefault()\n    if (!disabled) event.dataTransfer.dropEffect = 'copy'\n  }\n  const onDrop = (event: DragEvent) => {\n    event.preventDefault()\n    depth.current = 0\n    setDragging(false)\n    if (!disabled) deliver(event.dataTransfer.files)\n  }\n\n  return (\n    <ButtonBase\n      component=\"div\"\n      role=\"button\"\n      aria-describedby={hint ? hintId : undefined}\n      aria-disabled={disabled || undefined}\n      disabled={disabled}\n      onClick={() => input.current?.click()}\n      onDragEnter={onDragEnter}\n      onDragLeave={onDragLeave}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      data-dragging={dragging || undefined}\n      sx={[\n        (theme) => {\n          const tokens = theme.vars ?? theme\n          return {\n            width: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: 0.5,\n            px: 2,\n            py: 3,\n            textAlign: 'center',\n            borderRadius: `${tokens.shape.borderRadius}px`,\n            border: `1px dashed ${tokens.palette.divider}`,\n            backgroundColor: 'transparent',\n            color: tokens.palette.text.secondary,\n            transition: theme.transitions.create(['border-color', 'background-color', 'color'], {\n              duration: theme.transitions.duration.shortest,\n            }),\n            '&:hover, &.Mui-focusVisible': {\n              borderColor: tokens.palette.primary.main,\n              color: tokens.palette.text.primary,\n            },\n            '&[data-dragging]': {\n              borderStyle: 'solid',\n              borderColor: tokens.palette.primary.main,\n              backgroundColor: theme.alpha(tokens.palette.primary.main, tokens.palette.action.hoverOpacity),\n              color: tokens.palette.primary.main,\n            },\n            '&.Mui-disabled': { opacity: tokens.palette.action.disabledOpacity },\n          }\n        },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n    >\n      <MdiIcon path={icon} fontSize=\"medium\" color=\"inherit\" />\n      <Typography variant=\"body2\" sx={{ fontWeight: 'fontWeightMedium', color: 'inherit' }}>\n        {label}\n      </Typography>\n      {hint ? (\n        <Typography id={hintId} variant=\"caption\" color=\"text.secondary\">\n          {hint}\n        </Typography>\n      ) : null}\n      <Box\n        component=\"input\"\n        ref={input}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        hidden\n        tabIndex={-1}\n        onClick={(event) => event.stopPropagation()}\n        onChange={(event) => {\n          deliver((event.target as HTMLInputElement).files)\n          ;(event.target as HTMLInputElement).value = ''\n        }}\n      />\n    </ButtonBase>\n  )\n}\n\nexport default FileDropZone\n"],"names":["mdiTrayArrowUp","Box","ButtonBase","Typography","useCallback","useId","useRef","useState","MdiIcon","fileMatchesAccept","file","accept","name","toLowerCase","type","split","map","entry","trim","filter","Boolean","some","startsWith","endsWith","slice","FileDropZone","props","onFiles","multiple","disabled","label","hint","icon","onRejected","sx","input","hintId","dragging","setDragging","depth","deliver","list","files","Array","from","length","accepted","rejected","includes","chosen","onDragEnter","event","preventDefault","current","onDragLeave","Math","max","onDragOver","dataTransfer","dropEffect","onDrop","component","role","aria-describedby","undefined","aria-disabled","onClick","click","data-dragging","theme","tokens","vars","width","display","flexDirection","alignItems","justifyContent","gap","px","py","textAlign","borderRadius","shape","border","palette","divider","backgroundColor","color","text","secondary","transition","transitions","create","duration","shortest","borderColor","primary","main","borderStyle","alpha","action","hoverOpacity","opacity","disabledOpacity","isArray","path","fontSize","variant","fontWeight","id","ref","hidden","tabIndex","stopPropagation","onChange","target","value"],"mappings":"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"}

package/src/lib/components/list-query-notices.component.d.ts

@@ -14,24 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { ListFilterField } from '../const/list-filter';
-import type { ListFilterClause, ListFilterOption } from '../const/list-grid-filter';
-/**
- * A plan's refusals as the notices read them: each refused clause by the
- * same sentence its chip reads ("Reason is Bounced"), and the search as
- * "Search". Every list maps `plan.refused` through this and nothing else.
- */
-export declare function listQueryRefusals(refused: ReadonlyArray<{
-    clause: ListFilterClause | 'search';
-    reason: string;
-}>, context: {
-    fields: readonly ListFilterField[];
-    headers?: Readonly<Record<string, string>>;
-    options?: Readonly<Record<string, readonly ListFilterOption[]>>;
-}): Array<{
-    label: string;
-    reason: string;
-}>;
+export { listQueryRefusals } from '@aglyn/shared-util-tools/list-query/list-query-refusals';
 export interface ListQueryNoticesProps {
     /**
      * What the list was asked and could not put on its query, each as the thing

package/src/lib/components/list-query-notices.component.js

@@ -16,17 +16,7 @@
  */ 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert, Stack } from "@mui/material";
-import { listFilterClauseSentence } from "../const/list-filter-sentence.js";
-/**
- * A plan's refusals as the notices read them: each refused clause by the
- * same sentence its chip reads ("Reason is Bounced"), and the search as
- * "Search". Every list maps `plan.refused` through this and nothing else.
- */ export function listQueryRefusals(refused, context) {
-    return refused.map((entry)=>({
-            label: entry.clause === 'search' ? 'Search' : listFilterClauseSentence(entry.clause, context),
-            reason: entry.reason
-        }));
-}
+export { listQueryRefusals } from "@aglyn/shared-util-tools/list-query/list-query-refusals";
 /**
  * WHAT THE QUERY DID NOT TAKE, said above the list (AGL-3321).
  *

package/src/lib/components/list-query-notices.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/list-query-notices.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\n'use client'\n\nimport { Alert, Stack } from '@mui/material'\nimport type { ListFilterField } from '../const/list-filter'\nimport { listFilterClauseSentence } from '../const/list-filter-sentence'\nimport type { ListFilterClause, ListFilterOption } from '../const/list-grid-filter'\n\n/**\n * A plan's refusals as the notices read them: each refused clause by the\n * same sentence its chip reads (\"Reason is Bounced\"), and the search as\n * \"Search\". Every list maps `plan.refused` through this and nothing else.\n */\nexport function listQueryRefusals(\n  refused: ReadonlyArray<{ clause: ListFilterClause | 'search'; reason: string }>,\n  context: {\n    fields: readonly ListFilterField[]\n    headers?: Readonly<Record<string, string>>\n    options?: Readonly<Record<string, readonly ListFilterOption[]>>\n  },\n): Array<{ label: string; reason: string }> {\n  return refused.map((entry) => ({\n    label: entry.clause === 'search' ? 'Search' : listFilterClauseSentence(entry.clause, context),\n    reason: entry.reason,\n  }))\n}\n\nexport interface ListQueryNoticesProps {\n  /**\n   * What the list was asked and could not put on its query, each as the thing\n   * asked (\"Tags contains vip\", \"Search\") and why.\n   */\n  refused: ReadonlyArray<{ label: string; reason: string }>\n  /** Said about what WAS served, e.g. that search matched one word. */\n  notices?: readonly string[]\n}\n\n/**\n * WHAT THE QUERY DID NOT TAKE, said above the list (AGL-3321).\n *\n * Every filter and search word a list applies is on its Firestore query, and\n * one query holds one array clause, one range and thirty disjunctions. A\n * combination past that is not applied at all rather than applied to the\n * rows that happen to be loaded — and a filter the reader set that is not\n * applied must say so, or the list reads as the answer to a question it did\n * not ask.\n */\nexport function ListQueryNotices(props: ListQueryNoticesProps) {\n  const { refused, notices = [] } = props\n  if (!refused.length && !notices.length) return null\n  return (\n    <Stack spacing={1} role=\"status\" aria-label=\"Filter notices\">\n      {refused.map((entry) => (\n        <Alert key={`${entry.label}:${entry.reason}`} severity=\"warning\">\n          {`${entry.label} is not applied: ${entry.reason}.`}\n        </Alert>\n      ))}\n      {notices.map((notice) => (\n        <Alert key={notice} severity=\"info\">\n          {notice}\n        </Alert>\n      ))}\n    </Stack>\n  )\n}\nListQueryNotices.displayName = 'ListQueryNotices'\n\nexport default ListQueryNotices\n"],"names":["Alert","Stack","listFilterClauseSentence","listQueryRefusals","refused","context","map","entry","label","clause","reason","ListQueryNotices","props","notices","length","spacing","role","aria-label","severity","notice","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAEA,SAASA,KAAK,EAAEC,KAAK,QAAQ,gBAAe;AAE5C,SAASC,wBAAwB,QAAQ,mCAA+B;AAGxE;;;;CAIC,GACD,OAAO,SAASC,kBACdC,OAA+E,EAC/EC,OAIC;IAED,OAAOD,QAAQE,GAAG,CAAC,CAACC,QAAW,CAAA;YAC7BC,OAAOD,MAAME,MAAM,KAAK,WAAW,WAAWP,yBAAyBK,MAAME,MAAM,EAAEJ;YACrFK,QAAQH,MAAMG,MAAM;QACtB,CAAA;AACF;AAYA;;;;;;;;;CASC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAER,OAAO,EAAES,UAAU,EAAE,EAAE,GAAGD;IAClC,IAAI,CAACR,QAAQU,MAAM,IAAI,CAACD,QAAQC,MAAM,EAAE,OAAO;IAC/C,qBACE,MAACb;QAAMc,SAAS;QAAGC,MAAK;QAASC,cAAW;;YACzCb,QAAQE,GAAG,CAAC,CAACC,sBACZ,KAACP;oBAA6CkB,UAAS;8BACpD,GAAGX,MAAMC,KAAK,CAAC,iBAAiB,EAAED,MAAMG,MAAM,CAAC,CAAC,CAAC;mBADxC,GAAGH,MAAMC,KAAK,CAAC,CAAC,EAAED,MAAMG,MAAM,EAAE;YAI7CG,QAAQP,GAAG,CAAC,CAACa,uBACZ,KAACnB;oBAAmBkB,UAAS;8BAC1BC;mBADSA;;;AAMpB;AACAR,iBAAiBS,WAAW,GAAG;AAE/B,eAAeT,iBAAgB"}
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/list-query-notices.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\n'use client'\n\nimport { Alert, Stack } from '@mui/material'\n\nexport { listQueryRefusals } from '@aglyn/shared-util-tools/list-query/list-query-refusals'\n\nexport interface ListQueryNoticesProps {\n  /**\n   * What the list was asked and could not put on its query, each as the thing\n   * asked (\"Tags contains vip\", \"Search\") and why.\n   */\n  refused: ReadonlyArray<{ label: string; reason: string }>\n  /** Said about what WAS served, e.g. that search matched one word. */\n  notices?: readonly string[]\n}\n\n/**\n * WHAT THE QUERY DID NOT TAKE, said above the list (AGL-3321).\n *\n * Every filter and search word a list applies is on its Firestore query, and\n * one query holds one array clause, one range and thirty disjunctions. A\n * combination past that is not applied at all rather than applied to the\n * rows that happen to be loaded — and a filter the reader set that is not\n * applied must say so, or the list reads as the answer to a question it did\n * not ask.\n */\nexport function ListQueryNotices(props: ListQueryNoticesProps) {\n  const { refused, notices = [] } = props\n  if (!refused.length && !notices.length) return null\n  return (\n    <Stack spacing={1} role=\"status\" aria-label=\"Filter notices\">\n      {refused.map((entry) => (\n        <Alert key={`${entry.label}:${entry.reason}`} severity=\"warning\">\n          {`${entry.label} is not applied: ${entry.reason}.`}\n        </Alert>\n      ))}\n      {notices.map((notice) => (\n        <Alert key={notice} severity=\"info\">\n          {notice}\n        </Alert>\n      ))}\n    </Stack>\n  )\n}\nListQueryNotices.displayName = 'ListQueryNotices'\n\nexport default ListQueryNotices\n"],"names":["Alert","Stack","listQueryRefusals","ListQueryNotices","props","refused","notices","length","spacing","role","aria-label","map","entry","severity","label","reason","notice","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAEA,SAASA,KAAK,EAAEC,KAAK,QAAQ,gBAAe;AAE5C,SAASC,iBAAiB,QAAQ,0DAAyD;AAY3F;;;;;;;;;CASC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,EAAE,GAAGF;IAClC,IAAI,CAACC,QAAQE,MAAM,IAAI,CAACD,QAAQC,MAAM,EAAE,OAAO;IAC/C,qBACE,MAACN;QAAMO,SAAS;QAAGC,MAAK;QAASC,cAAW;;YACzCL,QAAQM,GAAG,CAAC,CAACC,sBACZ,KAACZ;oBAA6Ca,UAAS;8BACpD,GAAGD,MAAME,KAAK,CAAC,iBAAiB,EAAEF,MAAMG,MAAM,CAAC,CAAC,CAAC;mBADxC,GAAGH,MAAME,KAAK,CAAC,CAAC,EAAEF,MAAMG,MAAM,EAAE;YAI7CT,QAAQK,GAAG,CAAC,CAACK,uBACZ,KAAChB;oBAAmBa,UAAS;8BAC1BG;mBADSA;;;AAMpB;AACAb,iBAAiBc,WAAW,GAAG;AAE/B,eAAed,iBAAgB"}