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

package/src/lib/components/splash-screen.js

@@ -0,0 +1,105 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2022 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ // eslint-disable-next-line @nx/enforce-module-boundaries
+import { mergeSxProps } from "@aglyn/shared-ui-theme";
+import { Box, CircularProgress, Modal, Stack } from "@mui/material";
+import { forwardRef } from "react";
+import { AglynLogoFull } from "../const/aglyn-logo-full.js";
+import LoadingTextComponent from "./loading-text.component.js";
+/**
+ * The splash artwork on its own, with no Modal around it.
+ *
+ * `SplashScreen` below puts this in a `Modal`, which is a portal — and a
+ * portal renders NOTHING on the server and nothing on the first client
+ * render either. That is fine for a splash shown over an already-painted
+ * app, but useless as a boot-time fallback: a caller that needs markup in
+ * the SSR HTML (see the console's `NoSsr` fallback) has to render this
+ * directly inside its own positioned container.
+ */ export const SplashScreenContent = /*#__PURE__*/ forwardRef(// Props/ref pass through because `Modal` clones its child to attach the
+// focus trap — the artwork has to keep accepting them.
+(props, ref)=>/*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref
+    }, props, {
+        sx: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            flexDirection: 'column',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            direction: "column",
+            spacing: 2,
+            sx: {
+                justifyContent: 'center',
+                alignItems: 'center'
+            },
+            children: [
+                /*#__PURE__*/ _jsx(AglynLogoFull, {
+                    sx: {
+                        fontSize: 175
+                    }
+                }),
+                /*#__PURE__*/ _jsx(CircularProgress, {
+                    color: "primary"
+                }),
+                /*#__PURE__*/ _jsx(LoadingTextComponent, {
+                    variant: "overline",
+                    sx: {
+                        fontWeight: 'fontWeightBold'
+                    },
+                    children: 'One moment'
+                })
+            ]
+        })
+    })));
+SplashScreenContent.displayName = 'SplashScreenContent';
+const SplashScreen = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { sx } = props, rest = _object_without_properties_loose(props, [
+        "sx"
+    ]);
+    const _sx = mergeSxProps({
+        zIndex: 'max',
+        color: 'text.primary',
+        '& .MuiBackdrop-root': {
+            backgroundColor: (theme)=>{
+                var _ref;
+                var _theme_vars;
+                return (_ref = (_theme_vars = theme.vars) == null ? void 0 : _theme_vars.palette.background.paper) != null ? _ref : theme.palette.background.paper;
+            }
+        }
+    }, sx);
+    return /*#__PURE__*/ _jsx(Modal, _extends({
+        ref: ref,
+        sx: _sx,
+        open: true
+    }, rest, {
+        children: /*#__PURE__*/ _jsx(SplashScreenContent, {})
+    }));
+});
+SplashScreen.displayName = 'SplashScreen';
+SplashScreen.aglyn = true;
+export { SplashScreen };
+export default SplashScreen;
+
+//# sourceMappingURL=splash-screen.js.map

package/src/lib/components/splash-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/splash-screen.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2022 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// eslint-disable-next-line @nx/enforce-module-boundaries\nimport { mergeSxProps } from '@aglyn/shared-ui-theme'\nimport {\n  Box,\n  type BoxProps,\n  CircularProgress,\n  Modal,\n  type ModalProps as MuiModalProps,\n  Stack,\n} from '@mui/material'\nimport { forwardRef } from 'react'\nimport { AglynLogoFull } from '../const/aglyn-logo-full'\nimport LoadingTextComponent from './loading-text.component'\n\nexport interface SplashScreenProps extends Partial<MuiModalProps<any, any>> {}\n\n/**\n * The splash artwork on its own, with no Modal around it.\n *\n * `SplashScreen` below puts this in a `Modal`, which is a portal — and a\n * portal renders NOTHING on the server and nothing on the first client\n * render either. That is fine for a splash shown over an already-painted\n * app, but useless as a boot-time fallback: a caller that needs markup in\n * the SSR HTML (see the console's `NoSsr` fallback) has to render this\n * directly inside its own positioned container.\n */\nexport const SplashScreenContent = forwardRef<HTMLDivElement, BoxProps>(\n  // Props/ref pass through because `Modal` clones its child to attach the\n  // focus trap — the artwork has to keep accepting them.\n  (props, ref) => (\n    <Box\n      ref={ref}\n      {...props}\n      sx={{\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n        flexDirection: 'column',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <Stack\n        direction=\"column\"\n        spacing={2}\n        sx={{\n          justifyContent: 'center',\n          alignItems: 'center',\n        }}\n      >\n        <AglynLogoFull sx={{ fontSize: 175 }} />\n        <CircularProgress color=\"primary\" />\n        <LoadingTextComponent\n          variant=\"overline\"\n          sx={{ fontWeight: 'fontWeightBold' }}\n        >\n          {'One moment'}\n        </LoadingTextComponent>\n      </Stack>\n    </Box>\n  ),\n)\nSplashScreenContent.displayName = 'SplashScreenContent'\n\nconst SplashScreen = forwardRef<any, SplashScreenProps>((props, ref) => {\n  const { sx, ...rest } = props\n  const _sx = mergeSxProps(\n    {\n      zIndex: 'max',\n      color: 'text.primary',\n\n      '& .MuiBackdrop-root': {\n        backgroundColor: (theme) => (theme as any).vars?.palette.background.paper ?? theme.palette.background.paper,\n      },\n    },\n    sx,\n  )\n  return (\n    <Modal ref={ref} sx={_sx} open {...rest}>\n      <SplashScreenContent />\n    </Modal>\n  );\n})\nSplashScreen.displayName = 'SplashScreen'\nSplashScreen.aglyn = true\n\nexport { SplashScreen }\nexport default SplashScreen\n"],"names":["mergeSxProps","Box","CircularProgress","Modal","Stack","forwardRef","AglynLogoFull","LoadingTextComponent","SplashScreenContent","props","ref","sx","position","top","right","bottom","left","flexDirection","display","alignItems","justifyContent","direction","spacing","fontSize","color","variant","fontWeight","displayName","SplashScreen","rest","_sx","zIndex","backgroundColor","theme","vars","palette","background","paper","open","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,yDAAyD;AACzD,SAASA,YAAY,QAAQ,yBAAwB;AACrD,SACEC,GAAG,EAEHC,gBAAgB,EAChBC,KAAK,EAELC,KAAK,QACA,gBAAe;AACtB,SAASC,UAAU,QAAQ,QAAO;AAClC,SAASC,aAAa,QAAQ,8BAA0B;AACxD,OAAOC,0BAA0B,8BAA0B;AAI3D;;;;;;;;;CASC,GACD,OAAO,MAAMC,oCAAsBH,WACjC,wEAAwE;AACxE,uDAAuD;AACvD,CAACI,OAAOC,oBACN,KAACT;QACCS,KAAKA;OACDD;QACJE,IAAI;YACFC,UAAU;YACVC,KAAK;YACLC,OAAO;YACPC,QAAQ;YACRC,MAAM;YACNC,eAAe;YACfC,SAAS;YACTC,YAAY;YACZC,gBAAgB;QAClB;kBAEA,cAAA,MAAChB;YACCiB,WAAU;YACVC,SAAS;YACTX,IAAI;gBACFS,gBAAgB;gBAChBD,YAAY;YACd;;8BAEA,KAACb;oBAAcK,IAAI;wBAAEY,UAAU;oBAAI;;8BACnC,KAACrB;oBAAiBsB,OAAM;;8BACxB,KAACjB;oBACCkB,SAAQ;oBACRd,IAAI;wBAAEe,YAAY;oBAAiB;8BAElC;;;;SAKV;AACDlB,oBAAoBmB,WAAW,GAAG;AAElC,MAAMC,6BAAevB,WAAmC,CAACI,OAAOC;IAC9D,MAAM,EAAEC,EAAE,EAAW,GAAGF,OAAToB,wCAASpB;;;IACxB,MAAMqB,MAAM9B,aACV;QACE+B,QAAQ;QACRP,OAAO;QAEP,uBAAuB;YACrBQ,iBAAiB,CAACC;;oBAAU;gCAAA,cAAA,AAACA,MAAcC,IAAI,qBAAnB,YAAqBC,OAAO,CAACC,UAAU,CAACC,KAAK,mBAAIJ,MAAME,OAAO,CAACC,UAAU,CAACC,KAAK;;QAC7G;IACF,GACA1B;IAEF,qBACE,KAACR;QAAMO,KAAKA;QAAKC,IAAImB;QAAKQ,IAAI;OAAKT;kBACjC,cAAA,KAACrB;;AAGP;AACAoB,aAAaD,WAAW,GAAG;AAC3BC,aAAaW,KAAK,GAAG;AAErB,SAASX,YAAY,GAAE;AACvB,eAAeA,aAAY"}

package/src/lib/components/sr-only.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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 { ComponentProps } from 'react';
+export declare const SrOnly: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import("react").ClassAttributes<HTMLSpanElement> | keyof import("react").HTMLAttributes<HTMLSpanElement>>, {}>;
+export type SrOnlyProps = ComponentProps<typeof SrOnly>;
+export default SrOnly;

package/src/lib/components/sr-only.js

@@ -0,0 +1,25 @@
+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 { styled } from "@mui/material";
+import { visuallyHidden } from "@mui/utils";
+export const SrOnly = styled('span', {
+    name: 'SrOnly'
+})(_extends({}, visuallyHidden));
+SrOnly.displayName = 'SrOnly';
+export default SrOnly;
+
+//# sourceMappingURL=sr-only.js.map

package/src/lib/components/sr-only.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/sr-only.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 { styled } from '@mui/material'\nimport { visuallyHidden } from '@mui/utils'\nimport type { ComponentProps } from 'react'\n\nexport const SrOnly = styled('span', { name: 'SrOnly' })({ ...visuallyHidden })\nSrOnly.displayName = 'SrOnly'\n\nexport type SrOnlyProps = ComponentProps<typeof SrOnly>\n\nexport default SrOnly\n"],"names":["styled","visuallyHidden","SrOnly","name","displayName"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,MAAM,QAAQ,gBAAe;AACtC,SAASC,cAAc,QAAQ,aAAY;AAG3C,OAAO,MAAMC,SAASF,OAAO,QAAQ;IAAEG,MAAM;AAAS,GAAG,aAAKF,iBAAiB;AAC/EC,OAAOE,WAAW,GAAG;AAIrB,eAAeF,OAAM"}

package/src/lib/components/status-screen-plain.component.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @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';
+export declare function StatusScreenPlain({ code, title, message, action, }: {
+    code: string;
+    title: string;
+    message: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+export declare namespace StatusScreenPlain {
+    var displayName: string;
+}
+export default StatusScreenPlain;

package/src/lib/components/status-screen-plain.component.js

@@ -0,0 +1,178 @@
+/**
+ * @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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The status page for App Router boundaries that render ABOVE every provider
+ * (AGL-2074) — the tenant's and the console's `app/error.tsx`,
+ * `app/global-error.tsx` and root `app/not-found.tsx`.
+ *
+ * Shared rather than duplicated per app, and deliberately NOT re-exported
+ * from the barrel: this lib's index warns that everything it re-exports ships
+ * eagerly on EVERY published customer page, and this component is on the cold
+ * path of both apps. Both callers deep-import it.
+ *
+ * ## Why it uses no MUI and no theme
+ *
+ * These three boundaries sit outside `[host]/[scheme]/layout`, so there is no
+ * `HostThemeProvider`, no resolved host, and — for `global-error`, which
+ * REPLACES the root layout — no emotion cache either. A component that
+ * reaches for `theme.palette` renders MUI's factory blue-and-white on a
+ * customer's site, and one that reaches for emotion in `global-error` renders
+ * unstyled. So this is plain elements and inline styles: the one thing every
+ * one of those boundaries can definitely paint.
+ *
+ * ## Dark mode needs a real stylesheet here
+ *
+ * The first cut set `color-scheme: light dark` on the wrapper and leaned on
+ * inherited colors. Measured in a dark-scheme browser: **black text on the
+ * browser's black canvas**, completely unreadable. `color-scheme` changes the
+ * UA's default colors for the ROOT element, and a `<div>` deep in the page
+ * cannot claim the canvas — meanwhile `color` stayed at its initial black. A
+ * status page that is invisible in dark mode is a worse failure than the
+ * framework page it replaces, and it is invisible to markup review.
+ *
+ * So the colors are declared, in an inline `<style>` with a
+ * `prefers-color-scheme` block, scoped to one class. A stylesheet rather than
+ * inline style attributes because a media query cannot live in `style=`, and
+ * an inline `<style>` rather than emotion because `global-error` runs with no
+ * emotion cache at all. No class toggling and no script, so nothing here can
+ * mismatch between server and client.
+ *
+ * ## Why it names no platform
+ *
+ * Same rule as `site-status-screen.component.tsx`, and it binds harder here:
+ * these boundaries fire precisely when host data is unavailable, so there is
+ * nothing to distinguish a white-label agency site from our own. Naming
+ * nobody is the only answer that is correct in every case. No Aglyn mark, no
+ * "powered by", no support address that would identify the operator to a
+ * visitor who was never told one exists.
+ *
+ * The copy is deliberately generic about the operator too ("this site"),
+ * because on `global-error` we genuinely do not know whose site it is.
+ */ /**
+ * Names nobody — including in the CLASS, which is the half the rule above
+ * missed (AGL-2350).
+ *
+ * This was `aglyn-status-screen`, three lines under a docblock promising "no
+ * support address that would identify the operator to a visitor who was never
+ * told one exists". The class ships to that visitor twice: on the root
+ * element, and four more times inside the `<style>` block below — on the 404
+ * and crash pages of a white-label customer's own domain.
+ *
+ * No string-scanning gate could see it. `check:brand-literals` looks for a
+ * CAPITALISED `Aglyn`, on the sound reasoning that a lowercase one is nearly
+ * always a hostname, package scope, cookie name or CSS class. That exclusion
+ * is what made this invisible: it is a CSS class, and it is also copy about
+ * who the operator is.
+ */ const ROOT_CLASS = 'status-screen-plain';
+/**
+ * Light values on the bare class, dark values behind the media query — so a
+ * browser that never evaluates the query still gets a fully specified page,
+ * and one that does gets legible text on a dark ground.
+ */ const STYLES = `
+.${ROOT_CLASS} { background: #ffffff; color: #101114; }
+.${ROOT_CLASS} a, .${ROOT_CLASS} button { border-color: rgba(16, 17, 20, 0.32); }
+@media (prefers-color-scheme: dark) {
+  .${ROOT_CLASS} { background: #101114; color: #f2f3f5; }
+  .${ROOT_CLASS} a, .${ROOT_CLASS} button { border-color: rgba(242, 243, 245, 0.36); }
+}
+`;
+export function StatusScreenPlain({ code, title, message, action }) {
+    return(// The document's `main` landmark (AGL-2486). These screens ARE the whole
+    // document — they render in a root error/not-found boundary, never inside
+    // a composed page — so the landmark the tenant now places on the page's
+    // content region has to come from somewhere here, or the boundary screens
+    // would be the only documents on the platform with none.
+    /*#__PURE__*/ _jsxs("main", {
+        className: ROOT_CLASS,
+        style: {
+            colorScheme: 'light dark',
+            minHeight: '100dvh',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '1rem',
+            padding: '2rem 1.25rem',
+            textAlign: 'center',
+            fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("style", {
+                dangerouslySetInnerHTML: {
+                    __html: STYLES
+                }
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: 0,
+                    fontSize: '0.75rem',
+                    letterSpacing: '0.2em',
+                    textTransform: 'uppercase',
+                    opacity: 0.6
+                },
+                children: code
+            }),
+            /*#__PURE__*/ _jsx("h1", {
+                style: {
+                    margin: 0,
+                    fontSize: 'clamp(1.5rem, 4vw, 2rem)',
+                    fontWeight: 600
+                },
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: 0,
+                    maxWidth: '38ch',
+                    lineHeight: 1.6,
+                    opacity: 0.75
+                },
+                children: message
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '0.75rem',
+                    justifyContent: 'center',
+                    marginTop: '0.5rem'
+                },
+                children: [
+                    action,
+                    /*#__PURE__*/ _jsx("a", {
+                        href: "/",
+                        style: {
+                            display: 'inline-block',
+                            padding: '0.6rem 1.1rem',
+                            borderRadius: '0.5rem',
+                            borderStyle: 'solid',
+                            borderWidth: '1px',
+                            textDecoration: 'none',
+                            color: 'inherit',
+                            fontWeight: 500
+                        },
+                        children: 'Go to the homepage'
+                    })
+                ]
+            })
+        ]
+    }));
+}
+StatusScreenPlain.displayName = 'StatusScreenPlain';
+export default StatusScreenPlain;
+
+//# sourceMappingURL=status-screen-plain.component.js.map

package/src/lib/components/status-screen-plain.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/status-screen-plain.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 type { ReactNode } from 'react'\n\n/**\n * The status page for App Router boundaries that render ABOVE every provider\n * (AGL-2074) — the tenant's and the console's `app/error.tsx`,\n * `app/global-error.tsx` and root `app/not-found.tsx`.\n *\n * Shared rather than duplicated per app, and deliberately NOT re-exported\n * from the barrel: this lib's index warns that everything it re-exports ships\n * eagerly on EVERY published customer page, and this component is on the cold\n * path of both apps. Both callers deep-import it.\n *\n * ## Why it uses no MUI and no theme\n *\n * These three boundaries sit outside `[host]/[scheme]/layout`, so there is no\n * `HostThemeProvider`, no resolved host, and — for `global-error`, which\n * REPLACES the root layout — no emotion cache either. A component that\n * reaches for `theme.palette` renders MUI's factory blue-and-white on a\n * customer's site, and one that reaches for emotion in `global-error` renders\n * unstyled. So this is plain elements and inline styles: the one thing every\n * one of those boundaries can definitely paint.\n *\n * ## Dark mode needs a real stylesheet here\n *\n * The first cut set `color-scheme: light dark` on the wrapper and leaned on\n * inherited colors. Measured in a dark-scheme browser: **black text on the\n * browser's black canvas**, completely unreadable. `color-scheme` changes the\n * UA's default colors for the ROOT element, and a `<div>` deep in the page\n * cannot claim the canvas — meanwhile `color` stayed at its initial black. A\n * status page that is invisible in dark mode is a worse failure than the\n * framework page it replaces, and it is invisible to markup review.\n *\n * So the colors are declared, in an inline `<style>` with a\n * `prefers-color-scheme` block, scoped to one class. A stylesheet rather than\n * inline style attributes because a media query cannot live in `style=`, and\n * an inline `<style>` rather than emotion because `global-error` runs with no\n * emotion cache at all. No class toggling and no script, so nothing here can\n * mismatch between server and client.\n *\n * ## Why it names no platform\n *\n * Same rule as `site-status-screen.component.tsx`, and it binds harder here:\n * these boundaries fire precisely when host data is unavailable, so there is\n * nothing to distinguish a white-label agency site from our own. Naming\n * nobody is the only answer that is correct in every case. No Aglyn mark, no\n * \"powered by\", no support address that would identify the operator to a\n * visitor who was never told one exists.\n *\n * The copy is deliberately generic about the operator too (\"this site\"),\n * because on `global-error` we genuinely do not know whose site it is.\n */\n\n/**\n * Names nobody — including in the CLASS, which is the half the rule above\n * missed (AGL-2350).\n *\n * This was `aglyn-status-screen`, three lines under a docblock promising \"no\n * support address that would identify the operator to a visitor who was never\n * told one exists\". The class ships to that visitor twice: on the root\n * element, and four more times inside the `<style>` block below — on the 404\n * and crash pages of a white-label customer's own domain.\n *\n * No string-scanning gate could see it. `check:brand-literals` looks for a\n * CAPITALISED `Aglyn`, on the sound reasoning that a lowercase one is nearly\n * always a hostname, package scope, cookie name or CSS class. That exclusion\n * is what made this invisible: it is a CSS class, and it is also copy about\n * who the operator is.\n */\nconst ROOT_CLASS = 'status-screen-plain'\n\n/**\n * Light values on the bare class, dark values behind the media query — so a\n * browser that never evaluates the query still gets a fully specified page,\n * and one that does gets legible text on a dark ground.\n */\nconst STYLES = `\n.${ROOT_CLASS} { background: #ffffff; color: #101114; }\n.${ROOT_CLASS} a, .${ROOT_CLASS} button { border-color: rgba(16, 17, 20, 0.32); }\n@media (prefers-color-scheme: dark) {\n  .${ROOT_CLASS} { background: #101114; color: #f2f3f5; }\n  .${ROOT_CLASS} a, .${ROOT_CLASS} button { border-color: rgba(242, 243, 245, 0.36); }\n}\n`\n\nexport function StatusScreenPlain({\n  code,\n  title,\n  message,\n  action,\n}: {\n  code: string\n  title: string\n  message: string\n  action?: ReactNode\n}) {\n  return (\n    // The document's `main` landmark (AGL-2486). These screens ARE the whole\n    // document — they render in a root error/not-found boundary, never inside\n    // a composed page — so the landmark the tenant now places on the page's\n    // content region has to come from somewhere here, or the boundary screens\n    // would be the only documents on the platform with none.\n    <main\n      className={ROOT_CLASS}\n      style={{\n        colorScheme: 'light dark',\n        minHeight: '100dvh',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: '1rem',\n        padding: '2rem 1.25rem',\n        textAlign: 'center',\n        fontFamily:\n          'system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n      }}\n    >\n      <style dangerouslySetInnerHTML={{ __html: STYLES }} />\n      <p\n        style={{\n          margin: 0,\n          fontSize: '0.75rem',\n          letterSpacing: '0.2em',\n          textTransform: 'uppercase',\n          opacity: 0.6,\n        }}\n      >\n        {code}\n      </p>\n      <h1\n        style={{\n          margin: 0,\n          fontSize: 'clamp(1.5rem, 4vw, 2rem)',\n          fontWeight: 600,\n        }}\n      >\n        {title}\n      </h1>\n      <p style={{ margin: 0, maxWidth: '38ch', lineHeight: 1.6, opacity: 0.75 }}>\n        {message}\n      </p>\n      <div\n        style={{\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: '0.75rem',\n          justifyContent: 'center',\n          marginTop: '0.5rem',\n        }}\n      >\n        {action}\n        {/* A plain anchor, NOT `AppLink`/`next/link`. `global-error` replaces\n            the root layout and can be reached with the router in an unusable\n            state, and a client-side navigation that fails leaves the visitor\n            on the same broken page with no feedback. A full document load\n            always works. */}\n        <a\n          href=\"/\"\n          style={{\n            display: 'inline-block',\n            padding: '0.6rem 1.1rem',\n            borderRadius: '0.5rem',\n            borderStyle: 'solid',\n            borderWidth: '1px',\n            textDecoration: 'none',\n            color: 'inherit',\n            fontWeight: 500,\n          }}\n        >\n          {'Go to the homepage'}\n        </a>\n      </div>\n    </main>\n  )\n}\nStatusScreenPlain.displayName = 'StatusScreenPlain'\n\nexport default StatusScreenPlain\n"],"names":["ROOT_CLASS","STYLES","StatusScreenPlain","code","title","message","action","main","className","style","colorScheme","minHeight","display","flexDirection","alignItems","justifyContent","gap","padding","textAlign","fontFamily","dangerouslySetInnerHTML","__html","p","margin","fontSize","letterSpacing","textTransform","opacity","h1","fontWeight","maxWidth","lineHeight","div","flexWrap","marginTop","a","href","borderRadius","borderStyle","borderWidth","textDecoration","color","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDC,GAED;;;;;;;;;;;;;;;CAeC,GACD,MAAMA,aAAa;AAEnB;;;;CAIC,GACD,MAAMC,SAAS,CAAC;CACf,EAAED,WAAW;CACb,EAAEA,WAAW,KAAK,EAAEA,WAAW;;GAE7B,EAAEA,WAAW;GACb,EAAEA,WAAW,KAAK,EAAEA,WAAW;;AAElC,CAAC;AAED,OAAO,SAASE,kBAAkB,EAChCC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,MAAM,EAMP;IACC,OACE,yEAAyE;IACzE,0EAA0E;IAC1E,wEAAwE;IACxE,0EAA0E;IAC1E,yDAAyD;kBACzD,MAACC;QACCC,WAAWR;QACXS,OAAO;YACLC,aAAa;YACbC,WAAW;YACXC,SAAS;YACTC,eAAe;YACfC,YAAY;YACZC,gBAAgB;YAChBC,KAAK;YACLC,SAAS;YACTC,WAAW;YACXC,YACE;QACJ;;0BAEA,KAACV;gBAAMW,yBAAyB;oBAAEC,QAAQpB;gBAAO;;0BACjD,KAACqB;gBACCb,OAAO;oBACLc,QAAQ;oBACRC,UAAU;oBACVC,eAAe;oBACfC,eAAe;oBACfC,SAAS;gBACX;0BAECxB;;0BAEH,KAACyB;gBACCnB,OAAO;oBACLc,QAAQ;oBACRC,UAAU;oBACVK,YAAY;gBACd;0BAECzB;;0BAEH,KAACkB;gBAAEb,OAAO;oBAAEc,QAAQ;oBAAGO,UAAU;oBAAQC,YAAY;oBAAKJ,SAAS;gBAAK;0BACrEtB;;0BAEH,MAAC2B;gBACCvB,OAAO;oBACLG,SAAS;oBACTqB,UAAU;oBACVjB,KAAK;oBACLD,gBAAgB;oBAChBmB,WAAW;gBACb;;oBAEC5B;kCAMD,KAAC6B;wBACCC,MAAK;wBACL3B,OAAO;4BACLG,SAAS;4BACTK,SAAS;4BACToB,cAAc;4BACdC,aAAa;4BACbC,aAAa;4BACbC,gBAAgB;4BAChBC,OAAO;4BACPZ,YAAY;wBACd;kCAEC;;;;;;AAKX;AACA3B,kBAAkBwC,WAAW,GAAG;AAEhC,eAAexC,kBAAiB"}

package/src/lib/components/usage-meter.component.d.ts

@@ -0,0 +1,30 @@
+import { type HelpTipContent } from './help-tip.component';
+export interface UsageMeterProps {
+    label: string;
+    /** `null` while the usage source has not answered — "not yet metered". */
+    used: number | null;
+    limit: number;
+    unit?: string;
+    /** True when the plan caps nothing here; the bar is omitted and the limit reads "Unlimited". */
+    unlimited?: boolean;
+    /**
+     * Optional help affordance beside the label.
+     *
+     * A meter is a number against a limit and says nothing about what happens
+     * when the two meet — which for bandwidth is the whole question, and is
+     * different on Free (the site pauses) than on a paid plan (the extra bills).
+     */
+    help?: HelpTipContent;
+    /** Where "Upgrade" points once the meter warns; the plans anchor by default. */
+    upgradeHref?: string;
+}
+/**
+ * One quota meter: used/limit progress with warning at ≥80%, error at the
+ * cap, an "Upgrade" link once warning, "Unlimited" for uncapped plans, and
+ * a "not yet metered" state for usage sources that have not answered.
+ *
+ * Shared (AGL-2939) so a plugin's own meter — the AI credits band — draws
+ * beside the platform's on the same terms rather than as a lookalike.
+ */
+export declare function UsageMeter(props: UsageMeterProps): import("react").JSX.Element;
+export default UsageMeter;

package/src/lib/components/usage-meter.component.js

@@ -0,0 +1,92 @@
+/**
+ * @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 { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LinearProgress, Link, Stack, Typography } from "@mui/material";
+import { HelpTip } from "./help-tip.component.js";
+function formatLimit(limit, unit, unlimited) {
+    if (unlimited) return 'Unlimited';
+    return unit ? `${limit} ${unit}` : String(limit);
+}
+/**
+ * One quota meter: used/limit progress with warning at ≥80%, error at the
+ * cap, an "Upgrade" link once warning, "Unlimited" for uncapped plans, and
+ * a "not yet metered" state for usage sources that have not answered.
+ *
+ * Shared (AGL-2939) so a plugin's own meter — the AI credits band — draws
+ * beside the platform's on the same terms rather than as a lookalike.
+ */ export function UsageMeter(props) {
+    const { label, used, limit, unit, help, upgradeHref = '#plans' } = props;
+    const unlimited = props.unlimited === true;
+    const unmetered = used == null;
+    const pct = unlimited || unmetered || limit <= 0 ? 0 : Math.min(100, used / limit * 100);
+    const warning = !unlimited && !unmetered && pct >= 80;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 0.5,
+        sx: {
+            mb: 2
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                sx: {
+                    justifyContent: 'space-between'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "body2",
+                        children: [
+                            label,
+                            help ? /*#__PURE__*/ _jsx(HelpTip, _extends({}, help, {
+                                sx: {
+                                    ml: 0.5,
+                                    fontSize: '0.8em'
+                                }
+                            })) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: [
+                            unmetered ? `not yet metered · limit ${formatLimit(limit, unit, unlimited)}` : `${used} / ${formatLimit(limit, unit, unlimited)}`,
+                            warning ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    ' · ',
+                                    /*#__PURE__*/ _jsx(Link, {
+                                        href: upgradeHref,
+                                        color: "primary",
+                                        underline: "hover",
+                                        children: 'Upgrade'
+                                    })
+                                ]
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            unlimited || unmetered ? null : /*#__PURE__*/ _jsx(LinearProgress, {
+                variant: "determinate",
+                value: pct,
+                color: pct >= 100 ? 'error' : warning ? 'warning' : 'primary'
+            })
+        ]
+    });
+}
+export default UsageMeter;
+
+//# sourceMappingURL=usage-meter.component.js.map

package/src/lib/components/usage-meter.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/usage-meter.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 { LinearProgress, Link, Stack, Typography } from '@mui/material'\nimport { HelpTip, type HelpTipContent } from './help-tip.component'\n\nexport interface UsageMeterProps {\n  label: string\n  /** `null` while the usage source has not answered — \"not yet metered\". */\n  used: number | null\n  limit: number\n  unit?: string\n  /** True when the plan caps nothing here; the bar is omitted and the limit reads \"Unlimited\". */\n  unlimited?: boolean\n  /**\n   * Optional help affordance beside the label.\n   *\n   * A meter is a number against a limit and says nothing about what happens\n   * when the two meet — which for bandwidth is the whole question, and is\n   * different on Free (the site pauses) than on a paid plan (the extra bills).\n   */\n  help?: HelpTipContent\n  /** Where \"Upgrade\" points once the meter warns; the plans anchor by default. */\n  upgradeHref?: string\n}\n\nfunction formatLimit(limit: number, unit: string | undefined, unlimited: boolean): string {\n  if (unlimited) return 'Unlimited'\n  return unit ? `${limit} ${unit}` : String(limit)\n}\n\n/**\n * One quota meter: used/limit progress with warning at ≥80%, error at the\n * cap, an \"Upgrade\" link once warning, \"Unlimited\" for uncapped plans, and\n * a \"not yet metered\" state for usage sources that have not answered.\n *\n * Shared (AGL-2939) so a plugin's own meter — the AI credits band — draws\n * beside the platform's on the same terms rather than as a lookalike.\n */\nexport function UsageMeter(props: UsageMeterProps) {\n  const { label, used, limit, unit, help, upgradeHref = '#plans' } = props\n  const unlimited = props.unlimited === true\n  const unmetered = used == null\n  const pct =\n    unlimited || unmetered || limit <= 0 ? 0 : Math.min(100, (used / limit) * 100)\n  const warning = !unlimited && !unmetered && pct >= 80\n  return (\n    <Stack spacing={0.5} sx={{ mb: 2 }}>\n      <Stack direction=\"row\" sx={{ justifyContent: 'space-between' }}>\n        {/*\n          The tip renders INSIDE the label, not beside it in a wrapper: the\n          console's meter specs find a meter by `getByText(label).parentElement`\n          and read the row's text from it, and a wrapper would make that\n          parent the wrapper, whose text is the label alone.\n        */}\n        <Typography variant=\"body2\">\n          {label}\n          {help ? <HelpTip {...help} sx={{ ml: 0.5, fontSize: '0.8em' }} /> : null}\n        </Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {unmetered\n            ? `not yet metered · limit ${formatLimit(limit, unit, unlimited)}`\n            : `${used} / ${formatLimit(limit, unit, unlimited)}`}\n          {warning ? (\n            <>\n              {' · '}\n              <Link href={upgradeHref} color=\"primary\" underline=\"hover\">\n                {'Upgrade'}\n              </Link>\n            </>\n          ) : null}\n        </Typography>\n      </Stack>\n      {unlimited || unmetered ? null : (\n        <LinearProgress\n          variant=\"determinate\"\n          value={pct}\n          color={pct >= 100 ? 'error' : warning ? 'warning' : 'primary'}\n        />\n      )}\n    </Stack>\n  )\n}\n\nexport default UsageMeter\n"],"names":["LinearProgress","Link","Stack","Typography","HelpTip","formatLimit","limit","unit","unlimited","String","UsageMeter","props","label","used","help","upgradeHref","unmetered","pct","Math","min","warning","spacing","sx","mb","direction","justifyContent","variant","ml","fontSize","color","href","underline","value"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAEA,SAASA,cAAc,EAAEC,IAAI,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAe;AACvE,SAASC,OAAO,QAA6B,0BAAsB;AAsBnE,SAASC,YAAYC,KAAa,EAAEC,IAAwB,EAAEC,SAAkB;IAC9E,IAAIA,WAAW,OAAO;IACtB,OAAOD,OAAO,GAAGD,MAAM,CAAC,EAAEC,MAAM,GAAGE,OAAOH;AAC5C;AAEA;;;;;;;CAOC,GACD,OAAO,SAASI,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEP,KAAK,EAAEC,IAAI,EAAEO,IAAI,EAAEC,cAAc,QAAQ,EAAE,GAAGJ;IACnE,MAAMH,YAAYG,MAAMH,SAAS,KAAK;IACtC,MAAMQ,YAAYH,QAAQ;IAC1B,MAAMI,MACJT,aAAaQ,aAAaV,SAAS,IAAI,IAAIY,KAAKC,GAAG,CAAC,KAAK,AAACN,OAAOP,QAAS;IAC5E,MAAMc,UAAU,CAACZ,aAAa,CAACQ,aAAaC,OAAO;IACnD,qBACE,MAACf;QAAMmB,SAAS;QAAKC,IAAI;YAAEC,IAAI;QAAE;;0BAC/B,MAACrB;gBAAMsB,WAAU;gBAAMF,IAAI;oBAAEG,gBAAgB;gBAAgB;;kCAO3D,MAACtB;wBAAWuB,SAAQ;;4BACjBd;4BACAE,qBAAO,KAACV,sBAAYU;gCAAMQ,IAAI;oCAAEK,IAAI;oCAAKC,UAAU;gCAAQ;kCAAQ;;;kCAEtE,MAACzB;wBAAWuB,SAAQ;wBAAQG,OAAM;;4BAC/Bb,YACG,CAAC,wBAAwB,EAAEX,YAAYC,OAAOC,MAAMC,YAAY,GAChE,GAAGK,KAAK,GAAG,EAAER,YAAYC,OAAOC,MAAMC,YAAY;4BACrDY,wBACC;;oCACG;kDACD,KAACnB;wCAAK6B,MAAMf;wCAAac,OAAM;wCAAUE,WAAU;kDAChD;;;iCAGH;;;;;YAGPvB,aAAaQ,YAAY,qBACxB,KAAChB;gBACC0B,SAAQ;gBACRM,OAAOf;gBACPY,OAAOZ,OAAO,MAAM,UAAUG,UAAU,YAAY;;;;AAK9D;AAEA,eAAeV,WAAU"}

package/src/lib/components/variable-text-field.component.d.ts

@@ -0,0 +1,50 @@
+import { type TextFieldProps } from '@mui/material';
+/**
+ * A text field whose value may name VARIABLES, with the two ways of reaching
+ * them that the besigner's attribute fields already taught (AGL-3197).
+ *
+ * ## What it is, and what it deliberately is not
+ *
+ * It is a plain MUI `TextField`. The value in it is the value that is stored —
+ * `{{site.name}}` reads as `{{site.name}}`, and what makes that legible is the
+ * PREVIEW under the field, not a pill drawn over the text.
+ *
+ * The besigner's `TokenTextField` does draw pills, and this is not that on
+ * purpose. That field is a contentEditable surface with its own selection
+ * model, DOM/model sync contract, paste handling and undo trade-offs, wired to
+ * react-final-form and to the canvas's binding and media pickers. It earns all
+ * of that because a node attribute can hold a token referring to any record on
+ * the page. Here there are three variables, the field is 60 characters long,
+ * and the honest cost of a pill surface — an editor that fights the IME, an
+ * undo stack that truncates, a value the author cannot select and retype — is
+ * not worth paying for a title. A plain input, a menu and a live preview are.
+ *
+ * ## Two ways in, because people reach for different ones
+ *
+ * The `+` opens the list with a description under each name; typing `{{`
+ * offers the same list inline, filtered by whatever follows. Either way the
+ * insert lands at the caret, and the caret is left after it — not at the end
+ * of the value, which is where an insert that rebuilt the string would leave
+ * it, and which is wrong whenever somebody is editing the middle of a title.
+ */
+export interface VariableOption {
+    /** Written between the braces. */
+    name: string;
+    /** What the menu calls it. */
+    label: string;
+    /** One line under the label. */
+    description?: string;
+}
+export interface VariableTextFieldProps extends Omit<TextFieldProps, 'onChange' | 'value'> {
+    value: string;
+    onChange: (value: string) => void;
+    /** Every variable this field offers. */
+    variables: readonly VariableOption[];
+    /** The tooltip on the insert control. */
+    insertLabel?: string;
+}
+export declare function VariableTextField(props: VariableTextFieldProps): import("react").JSX.Element;
+export declare namespace VariableTextField {
+    var displayName: string;
+}
+export default VariableTextField;