@aglyn/shared-ui-jsx 1.0.0-beta.275 → 1.0.0-beta.282

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/shared-ui-jsx",
-  "version": "1.0.0-beta.275",
+  "version": "1.0.0-beta.282",
   "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.275",
-    "@aglyn/shared-ui-theme": "1.0.0-beta.275",
-    "@aglyn/shared-util-tools": "1.0.0-beta.275",
-    "@aglyn/shared-util-vendor": "1.0.0-beta.275",
+    "@aglyn/shared-data-mdi": "1.0.0-beta.282",
+    "@aglyn/shared-ui-snackstack": "1.0.0-beta.282",
+    "@aglyn/shared-ui-theme": "1.0.0-beta.282",
+    "@aglyn/shared-util-tools": "1.0.0-beta.282",
+    "@aglyn/shared-util-vendor": "1.0.0-beta.282",
     "@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/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"}

package/src/lib/hooks/use-discard-changes-menu-item.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @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.
+ */
+/**
+ * File ▸ Discard changes… for every besigner editor (AGL-3723).
+ *
+ * Puts the canvas back to the stored document — the published tree on the
+ * live version, the last save on any other — and drops the local and shared
+ * drafts, after a confirm because the reset cannot be undone.
+ * `useBesignerDocument().discardChanges` does the document half; the editor
+ * passes what only it owns: the co-editing mirror and its own "draft saved"
+ * flag.
+ */
+export declare function useDiscardChangesMenuItem(options: {
+    noun: string;
+    /** Editing the version the sites serve, where the stored tree is live. */
+    live: boolean;
+    /** `useBesignerDocument().canDiscard`, plus any draft state the editor keeps. */
+    canDiscard: boolean;
+    discardChanges: () => boolean;
+    /** Clears what the editor owns: the mirror, a draft-saved flag. */
+    onDiscarded?: () => void;
+}): {
+    onClick: () => Promise<void>;
+    ListItemTextProps: {
+        inset: boolean;
+        secondary?: undefined;
+    };
+    id: string;
+    children: string;
+    disabled: boolean;
+} | {
+    onClick: () => Promise<void>;
+    ListItemTextProps: {
+        inset: boolean;
+        secondary: string;
+    };
+    id: string;
+    children: string;
+    disabled: boolean;
+};
+export default useDiscardChangesMenuItem;

package/src/lib/hooks/use-discard-changes-menu-item.js

@@ -0,0 +1,83 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+/**
+ * @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 { useConfirmationContext } from "../contexts/confirmation.context.js";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useCallback } from "react";
+/**
+ * File ▸ Discard changes… for every besigner editor (AGL-3723).
+ *
+ * Puts the canvas back to the stored document — the published tree on the
+ * live version, the last save on any other — and drops the local and shared
+ * drafts, after a confirm because the reset cannot be undone.
+ * `useBesignerDocument().discardChanges` does the document half; the editor
+ * passes what only it owns: the co-editing mirror and its own "draft saved"
+ * flag.
+ */ export function useDiscardChangesMenuItem(options) {
+    const { noun, live, canDiscard, discardChanges, onDiscarded } = options;
+    const { confirm } = useConfirmationContext();
+    const { enqueueSnackbar } = useSnackbar();
+    const target = live ? 'the published version' : 'its last save';
+    const onClick = useCallback(async ()=>{
+        const confirmed = await confirm({
+            title: 'Discard changes?',
+            description: `This puts the ${noun} back to ${target} and deletes its unsaved ` + 'changes and saved draft. This cannot be undone.',
+            confirmationText: 'Discard',
+            confirmationButtonProps: {
+                color: 'error'
+            }
+        }).then(()=>true).catch(()=>false);
+        if (!confirmed) return;
+        if (!discardChanges()) {
+            enqueueSnackbar(`The ${noun} has not loaded yet — try again.`, {
+                variant: 'warning',
+                persist: false
+            });
+            return;
+        }
+        onDiscarded == null ? void 0 : onDiscarded();
+        enqueueSnackbar(`Changes discarded — back to ${target}.`, {
+            variant: 'success',
+            persist: false
+        });
+    }, [
+        confirm,
+        noun,
+        target,
+        discardChanges,
+        onDiscarded,
+        enqueueSnackbar
+    ]);
+    return _extends({
+        id: 'center-nav-file-discard',
+        children: 'Discard changes…',
+        disabled: !canDiscard
+    }, canDiscard ? {
+        ListItemTextProps: {
+            inset: true
+        }
+    } : {
+        ListItemTextProps: {
+            inset: true,
+            secondary: 'No changes to discard'
+        }
+    }, {
+        onClick
+    });
+}
+export default useDiscardChangesMenuItem;
+
+//# sourceMappingURL=use-discard-changes-menu-item.js.map

package/src/lib/hooks/use-discard-changes-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/hooks/use-discard-changes-menu-item.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useConfirmationContext } from '../contexts/confirmation.context'\nimport { useSnackbar } from '@aglyn/shared-ui-snackstack'\nimport { useCallback } from 'react'\n\n/**\n * File ▸ Discard changes… for every besigner editor (AGL-3723).\n *\n * Puts the canvas back to the stored document — the published tree on the\n * live version, the last save on any other — and drops the local and shared\n * drafts, after a confirm because the reset cannot be undone.\n * `useBesignerDocument().discardChanges` does the document half; the editor\n * passes what only it owns: the co-editing mirror and its own \"draft saved\"\n * flag.\n */\nexport function useDiscardChangesMenuItem(options: {\n  noun: string\n  /** Editing the version the sites serve, where the stored tree is live. */\n  live: boolean\n  /** `useBesignerDocument().canDiscard`, plus any draft state the editor keeps. */\n  canDiscard: boolean\n  discardChanges: () => boolean\n  /** Clears what the editor owns: the mirror, a draft-saved flag. */\n  onDiscarded?: () => void\n}) {\n  const { noun, live, canDiscard, discardChanges, onDiscarded } = options\n  const { confirm } = useConfirmationContext()\n  const { enqueueSnackbar } = useSnackbar()\n  const target = live ? 'the published version' : 'its last save'\n\n  const onClick = useCallback(async () => {\n    const confirmed = await confirm({\n      title: 'Discard changes?',\n      description:\n        `This puts the ${noun} back to ${target} and deletes its unsaved ` +\n        'changes and saved draft. This cannot be undone.',\n      confirmationText: 'Discard',\n      confirmationButtonProps: { color: 'error' },\n    })\n      .then(() => true)\n      .catch(() => false)\n    if (!confirmed) return\n    if (!discardChanges()) {\n      enqueueSnackbar(`The ${noun} has not loaded yet — try again.`, {\n        variant: 'warning',\n        persist: false,\n      })\n      return\n    }\n    onDiscarded?.()\n    enqueueSnackbar(`Changes discarded — back to ${target}.`, {\n      variant: 'success',\n      persist: false,\n    })\n  }, [confirm, noun, target, discardChanges, onDiscarded, enqueueSnackbar])\n\n  return {\n    id: 'center-nav-file-discard',\n    children: 'Discard changes…',\n    disabled: !canDiscard,\n    // A disabled entry says why, like Save & publish does.\n    ...(canDiscard\n      ? { ListItemTextProps: { inset: true } }\n      : {\n          ListItemTextProps: { inset: true, secondary: 'No changes to discard' },\n        }),\n    onClick,\n  }\n}\n\nexport default useDiscardChangesMenuItem\n"],"names":["useConfirmationContext","useSnackbar","useCallback","useDiscardChangesMenuItem","options","noun","live","canDiscard","discardChanges","onDiscarded","confirm","enqueueSnackbar","target","onClick","confirmed","title","description","confirmationText","confirmationButtonProps","color","then","catch","variant","persist","id","children","disabled","ListItemTextProps","inset","secondary"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,sBAAsB,QAAQ,sCAAkC;AACzE,SAASC,WAAW,QAAQ,8BAA6B;AACzD,SAASC,WAAW,QAAQ,QAAO;AAEnC;;;;;;;;;CASC,GACD,OAAO,SAASC,0BAA0BC,OASzC;IACC,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,EAAEC,cAAc,EAAEC,WAAW,EAAE,GAAGL;IAChE,MAAM,EAAEM,OAAO,EAAE,GAAGV;IACpB,MAAM,EAAEW,eAAe,EAAE,GAAGV;IAC5B,MAAMW,SAASN,OAAO,0BAA0B;IAEhD,MAAMO,UAAUX,YAAY;QAC1B,MAAMY,YAAY,MAAMJ,QAAQ;YAC9BK,OAAO;YACPC,aACE,CAAC,cAAc,EAAEX,KAAK,SAAS,EAAEO,OAAO,yBAAyB,CAAC,GAClE;YACFK,kBAAkB;YAClBC,yBAAyB;gBAAEC,OAAO;YAAQ;QAC5C,GACGC,IAAI,CAAC,IAAM,MACXC,KAAK,CAAC,IAAM;QACf,IAAI,CAACP,WAAW;QAChB,IAAI,CAACN,kBAAkB;YACrBG,gBAAgB,CAAC,IAAI,EAAEN,KAAK,gCAAgC,CAAC,EAAE;gBAC7DiB,SAAS;gBACTC,SAAS;YACX;YACA;QACF;QACAd,+BAAAA;QACAE,gBAAgB,CAAC,4BAA4B,EAAEC,OAAO,CAAC,CAAC,EAAE;YACxDU,SAAS;YACTC,SAAS;QACX;IACF,GAAG;QAACb;QAASL;QAAMO;QAAQJ;QAAgBC;QAAaE;KAAgB;IAExE,OAAO;QACLa,IAAI;QACJC,UAAU;QACVC,UAAU,CAACnB;OAEPA,aACA;QAAEoB,mBAAmB;YAAEC,OAAO;QAAK;IAAE,IACrC;QACED,mBAAmB;YAAEC,OAAO;YAAMC,WAAW;QAAwB;IACvE;QACJhB;;AAEJ;AAEA,eAAeV,0BAAyB"}

package/src/lib/hooks/use-online-status.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Whether the browser currently believes it has a network connection
+ * (AGL-1056).
+ *
+ * The console is an authoring tool, and the failure it has to avoid is the
+ * silent one: edits that appear to apply, a save that never lands, and no
+ * indication that the network — rather than the app — is the reason. This is
+ * the signal the chrome renders from.
+ *
+ * `navigator.onLine` is a floor, not a guarantee. It answers "is there a
+ * network interface up", which is why it can read `true` on a captive portal
+ * or a dead uplink. It cannot produce a false OFFLINE, though, and that is the
+ * direction this is used in: when it says offline, the console is offline.
+ */
+export declare function useOnlineStatus(): boolean;
+export default useOnlineStatus;

package/src/lib/hooks/use-online-status.js

@@ -0,0 +1,86 @@
+/**
+ * @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 { useSyncExternalStore } from "react";
+/**
+ * Subscribe to every event that can change the answer.
+ *
+ * Module scope, not a closure built per render: `useSyncExternalStore`
+ * resubscribes whenever this identity changes, so an inline function would
+ * tear down and re-add the listeners on every render of every consumer.
+ *
+ * Symmetric by construction — the same three names with the same handler
+ * reference are removed as were added. That matters under StrictMode, which
+ * deliberately mounts, unmounts and remounts each effect: an asymmetric
+ * cleanup leaks a listener per mount and, worse, leaves a listener bound to a
+ * callback from a torn-down render.
+ *
+ * `visibilitychange` is in here because `online`/`offline` are not guaranteed
+ * to be delivered to a backgrounded or discarded tab — a laptop that slept on
+ * hotel wifi and woke on another network can miss the pair entirely. The
+ * snapshot below is a pure read, so an extra notification costs one
+ * `Object.is` comparison and React bails out; a missed one leaves the chrome
+ * asserting a connection state that stopped being true hours ago.
+ */ function subscribe(onStoreChange) {
+    window.addEventListener('online', onStoreChange);
+    window.addEventListener('offline', onStoreChange);
+    document.addEventListener('visibilitychange', onStoreChange);
+    return ()=>{
+        window.removeEventListener('online', onStoreChange);
+        window.removeEventListener('offline', onStoreChange);
+        document.removeEventListener('visibilitychange', onStoreChange);
+    };
+}
+/**
+ * The live client answer, read fresh on every mount rather than seeded from a
+ * default. A boolean is its own snapshot identity, so this never trips the
+ * "getSnapshot should be cached" loop that catches object-returning stores.
+ *
+ * Anything other than an explicit `false` counts as online. `navigator.onLine`
+ * is a positive assertion of disconnection only: a browser that does not
+ * implement it leaves it `undefined`, and reading that as "offline" would have
+ * the console announce a network failure it has no evidence for.
+ */ function getSnapshot() {
+    return typeof navigator === 'undefined' || navigator.onLine !== false;
+}
+/**
+ * There is no `navigator` on the server, and no way to know a client's
+ * connection before one exists — so the server renders the online branch, and
+ * React uses this same value for the hydration render. That is what keeps the
+ * markup identical on both sides: the offline state can only appear AFTER
+ * hydration, from a real reading, never as a flash of a state nobody measured.
+ */ function getServerSnapshot() {
+    return true;
+}
+/**
+ * Whether the browser currently believes it has a network connection
+ * (AGL-1056).
+ *
+ * The console is an authoring tool, and the failure it has to avoid is the
+ * silent one: edits that appear to apply, a save that never lands, and no
+ * indication that the network — rather than the app — is the reason. This is
+ * the signal the chrome renders from.
+ *
+ * `navigator.onLine` is a floor, not a guarantee. It answers "is there a
+ * network interface up", which is why it can read `true` on a captive portal
+ * or a dead uplink. It cannot produce a false OFFLINE, though, and that is the
+ * direction this is used in: when it says offline, the console is offline.
+ */ export function useOnlineStatus() {
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+export default useOnlineStatus;
+
+//# sourceMappingURL=use-online-status.js.map

package/src/lib/hooks/use-online-status.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/hooks/use-online-status.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { useSyncExternalStore } from 'react'\n\n/**\n * Subscribe to every event that can change the answer.\n *\n * Module scope, not a closure built per render: `useSyncExternalStore`\n * resubscribes whenever this identity changes, so an inline function would\n * tear down and re-add the listeners on every render of every consumer.\n *\n * Symmetric by construction — the same three names with the same handler\n * reference are removed as were added. That matters under StrictMode, which\n * deliberately mounts, unmounts and remounts each effect: an asymmetric\n * cleanup leaks a listener per mount and, worse, leaves a listener bound to a\n * callback from a torn-down render.\n *\n * `visibilitychange` is in here because `online`/`offline` are not guaranteed\n * to be delivered to a backgrounded or discarded tab — a laptop that slept on\n * hotel wifi and woke on another network can miss the pair entirely. The\n * snapshot below is a pure read, so an extra notification costs one\n * `Object.is` comparison and React bails out; a missed one leaves the chrome\n * asserting a connection state that stopped being true hours ago.\n */\nfunction subscribe(onStoreChange: () => void): () => void {\n  window.addEventListener('online', onStoreChange)\n  window.addEventListener('offline', onStoreChange)\n  document.addEventListener('visibilitychange', onStoreChange)\n  return () => {\n    window.removeEventListener('online', onStoreChange)\n    window.removeEventListener('offline', onStoreChange)\n    document.removeEventListener('visibilitychange', onStoreChange)\n  }\n}\n\n/**\n * The live client answer, read fresh on every mount rather than seeded from a\n * default. A boolean is its own snapshot identity, so this never trips the\n * \"getSnapshot should be cached\" loop that catches object-returning stores.\n *\n * Anything other than an explicit `false` counts as online. `navigator.onLine`\n * is a positive assertion of disconnection only: a browser that does not\n * implement it leaves it `undefined`, and reading that as \"offline\" would have\n * the console announce a network failure it has no evidence for.\n */\nfunction getSnapshot(): boolean {\n  return typeof navigator === 'undefined' || navigator.onLine !== false\n}\n\n/**\n * There is no `navigator` on the server, and no way to know a client's\n * connection before one exists — so the server renders the online branch, and\n * React uses this same value for the hydration render. That is what keeps the\n * markup identical on both sides: the offline state can only appear AFTER\n * hydration, from a real reading, never as a flash of a state nobody measured.\n */\nfunction getServerSnapshot(): boolean {\n  return true\n}\n\n/**\n * Whether the browser currently believes it has a network connection\n * (AGL-1056).\n *\n * The console is an authoring tool, and the failure it has to avoid is the\n * silent one: edits that appear to apply, a save that never lands, and no\n * indication that the network — rather than the app — is the reason. This is\n * the signal the chrome renders from.\n *\n * `navigator.onLine` is a floor, not a guarantee. It answers \"is there a\n * network interface up\", which is why it can read `true` on a captive portal\n * or a dead uplink. It cannot produce a false OFFLINE, though, and that is the\n * direction this is used in: when it says offline, the console is offline.\n */\nexport function useOnlineStatus(): boolean {\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n\nexport default useOnlineStatus\n"],"names":["useSyncExternalStore","subscribe","onStoreChange","window","addEventListener","document","removeEventListener","getSnapshot","navigator","onLine","getServerSnapshot","useOnlineStatus"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;AAEA,SAASA,oBAAoB,QAAQ,QAAO;AAE5C;;;;;;;;;;;;;;;;;;;CAmBC,GACD,SAASC,UAAUC,aAAyB;IAC1CC,OAAOC,gBAAgB,CAAC,UAAUF;IAClCC,OAAOC,gBAAgB,CAAC,WAAWF;IACnCG,SAASD,gBAAgB,CAAC,oBAAoBF;IAC9C,OAAO;QACLC,OAAOG,mBAAmB,CAAC,UAAUJ;QACrCC,OAAOG,mBAAmB,CAAC,WAAWJ;QACtCG,SAASC,mBAAmB,CAAC,oBAAoBJ;IACnD;AACF;AAEA;;;;;;;;;CASC,GACD,SAASK;IACP,OAAO,OAAOC,cAAc,eAAeA,UAAUC,MAAM,KAAK;AAClE;AAEA;;;;;;CAMC,GACD,SAASC;IACP,OAAO;AACT;AAEA;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC;IACd,OAAOX,qBAAqBC,WAAWM,aAAaG;AACtD;AAEA,eAAeC,gBAAe"}