@aglyn/shared-ui-jsx 1.0.0-beta.258 → 1.0.0-beta.260

package/package.json

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

package/src/lib/components/blocked-control.component.d.ts

@@ -15,6 +15,12 @@ export interface BlockedControlProps {
     children: ReactElement<{
         disabled?: boolean;
     }>;
+    /**
+     * Let the wrapper take the full width, for a control that is `fullWidth`
+     * or stretched by its stack. The wrapping span is otherwise as wide as its
+     * content, which shrinks such a control the moment it is blocked.
+     */
+    fullWidth?: boolean;
 }
 /**
  * Renders a control disabled with the reason attached, or passes it through
@@ -44,7 +50,7 @@ export interface BlockedControlProps {
  * of what rendered. It exists so a console stops promising what the server
  * will refuse.
  */
-export declare function BlockedControl({ blocked, reason, children }: BlockedControlProps): import("react").JSX.Element;
+export declare function BlockedControl({ blocked, reason, children, fullWidth }: BlockedControlProps): import("react").JSX.Element;
 export declare namespace BlockedControl {
     var displayName: string;
     var aglyn: boolean;

package/src/lib/components/blocked-control.component.js

@@ -44,7 +44,7 @@ import { cloneElement, isValidElement } from "react";
  * agreeing. THIS IS NOT A SECURITY BOUNDARY: the server refuses regardless
  * of what rendered. It exists so a console stops promising what the server
  * will refuse.
- */ export function BlockedControl({ blocked, reason, children }) {
+ */ export function BlockedControl({ blocked, reason, children, fullWidth }) {
     if (!blocked || !/*#__PURE__*/ isValidElement(children)) return children;
     return /*#__PURE__*/ _jsx(Tooltip, {
         title: reason,
@@ -52,7 +52,13 @@ import { cloneElement, isValidElement } from "react";
             component: "span",
             "aria-label": reason,
             title: reason,
-            sx: {
+            sx: fullWidth ? {
+                display: 'flex',
+                width: '100%',
+                '& > *': {
+                    flex: 1
+                }
+            } : {
                 display: 'inline-flex'
             },
             children: /*#__PURE__*/ cloneElement(children, {

package/src/lib/components/blocked-control.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/blocked-control.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, Tooltip } from '@mui/material'\nimport { cloneElement, isValidElement, type ReactElement } from 'react'\n\nexport interface BlockedControlProps {\n  /**\n   * Whether the viewer's standing is RESOLVED and refused. Never true while\n   * a claim is still loading: rendering the refusal in that window flashes a\n   * disabled button at everybody, including the people who may use it.\n   */\n  blocked: boolean\n  /** Why, in one sentence. Shown on hover, and to a screen reader. */\n  reason: string\n  /**\n   * A single control that accepts a `disabled` prop — MUI's Button,\n   * IconButton, Switch, TextField and friends all do.\n   */\n  children: ReactElement<{ disabled?: boolean }>\n}\n\n/**\n * Renders a control disabled with the reason attached, or passes it through\n * untouched.\n *\n * DISABLED WITH THE REASON, NOT HIDDEN. Both are defensible and the choice is\n * made here once rather than at every gate. Hiding leaves a reader unable to\n * see that the capability exists at all, and the commonest support act is\n * routing — \"this needs someone with the super role\" is an answer they can\n * give in one message; \"I see no such button\" turns into an investigation of\n * whether the feature shipped.\n *\n * ## Two details that are the whole reason this is shared\n *\n * The tooltip wraps a `span`, not the control: MUI does not fire pointer\n * events on a disabled button, so a tooltip attached directly to one never\n * appears — which would leave a dead button and no reason at all, the exact\n * failure this exists to stop.\n *\n * And the reason lands on the span as a real `aria-label` and `title`, not\n * only inside the Tooltip's popper. An explanation that appears only on\n * hover says nothing to a screen reader and nothing on a touch device.\n *\n * Both were got right once and then copied; AGL-2113 is the precedent for\n * what copies do — five quota readouts grew their own phrasing and stopped\n * agreeing. THIS IS NOT A SECURITY BOUNDARY: the server refuses regardless\n * of what rendered. It exists so a console stops promising what the server\n * will refuse.\n */\nexport function BlockedControl({ blocked, reason, children }: BlockedControlProps) {\n  if (!blocked || !isValidElement(children)) return children\n  return (\n    <Tooltip title={reason}>\n      <Box\n        component=\"span\"\n        aria-label={reason}\n        title={reason}\n        sx={{ display: 'inline-flex' }}\n      >\n        {cloneElement(children, { disabled: true })}\n      </Box>\n    </Tooltip>\n  )\n}\n\nBlockedControl.displayName = 'BlockedControl'\nBlockedControl.aglyn = true\n\nexport default BlockedControl\n"],"names":["Box","Tooltip","cloneElement","isValidElement","BlockedControl","blocked","reason","children","title","component","aria-label","sx","display","disabled","displayName","aglyn"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,GAAG,EAAEC,OAAO,QAAQ,gBAAe;AAC5C,SAASC,YAAY,EAAEC,cAAc,QAA2B,QAAO;AAkBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,eAAe,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,EAAuB;IAC/E,IAAI,CAACF,WAAW,eAACF,eAAeI,WAAW,OAAOA;IAClD,qBACE,KAACN;QAAQO,OAAOF;kBACd,cAAA,KAACN;YACCS,WAAU;YACVC,cAAYJ;YACZE,OAAOF;YACPK,IAAI;gBAAEC,SAAS;YAAc;sBAE5BV,cAAAA,aAAaK,UAAU;gBAAEM,UAAU;YAAK;;;AAIjD;AAEAT,eAAeU,WAAW,GAAG;AAC7BV,eAAeW,KAAK,GAAG;AAEvB,eAAeX,eAAc"}
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/blocked-control.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, Tooltip } from '@mui/material'\nimport { cloneElement, isValidElement, type ReactElement } from 'react'\n\nexport interface BlockedControlProps {\n  /**\n   * Whether the viewer's standing is RESOLVED and refused. Never true while\n   * a claim is still loading: rendering the refusal in that window flashes a\n   * disabled button at everybody, including the people who may use it.\n   */\n  blocked: boolean\n  /** Why, in one sentence. Shown on hover, and to a screen reader. */\n  reason: string\n  /**\n   * A single control that accepts a `disabled` prop — MUI's Button,\n   * IconButton, Switch, TextField and friends all do.\n   */\n  children: ReactElement<{ disabled?: boolean }>\n  /**\n   * Let the wrapper take the full width, for a control that is `fullWidth`\n   * or stretched by its stack. The wrapping span is otherwise as wide as its\n   * content, which shrinks such a control the moment it is blocked.\n   */\n  fullWidth?: boolean\n}\n\n/**\n * Renders a control disabled with the reason attached, or passes it through\n * untouched.\n *\n * DISABLED WITH THE REASON, NOT HIDDEN. Both are defensible and the choice is\n * made here once rather than at every gate. Hiding leaves a reader unable to\n * see that the capability exists at all, and the commonest support act is\n * routing — \"this needs someone with the super role\" is an answer they can\n * give in one message; \"I see no such button\" turns into an investigation of\n * whether the feature shipped.\n *\n * ## Two details that are the whole reason this is shared\n *\n * The tooltip wraps a `span`, not the control: MUI does not fire pointer\n * events on a disabled button, so a tooltip attached directly to one never\n * appears — which would leave a dead button and no reason at all, the exact\n * failure this exists to stop.\n *\n * And the reason lands on the span as a real `aria-label` and `title`, not\n * only inside the Tooltip's popper. An explanation that appears only on\n * hover says nothing to a screen reader and nothing on a touch device.\n *\n * Both were got right once and then copied; AGL-2113 is the precedent for\n * what copies do — five quota readouts grew their own phrasing and stopped\n * agreeing. THIS IS NOT A SECURITY BOUNDARY: the server refuses regardless\n * of what rendered. It exists so a console stops promising what the server\n * will refuse.\n */\nexport function BlockedControl({ blocked, reason, children, fullWidth }: BlockedControlProps) {\n  if (!blocked || !isValidElement(children)) return children\n  return (\n    <Tooltip title={reason}>\n      <Box\n        component=\"span\"\n        aria-label={reason}\n        title={reason}\n        sx={fullWidth ? { display: 'flex', width: '100%', '& > *': { flex: 1 } } : { display: 'inline-flex' }}\n      >\n        {cloneElement(children, { disabled: true })}\n      </Box>\n    </Tooltip>\n  )\n}\n\nBlockedControl.displayName = 'BlockedControl'\nBlockedControl.aglyn = true\n\nexport default BlockedControl\n"],"names":["Box","Tooltip","cloneElement","isValidElement","BlockedControl","blocked","reason","children","fullWidth","title","component","aria-label","sx","display","width","flex","disabled","displayName","aglyn"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,GAAG,EAAEC,OAAO,QAAQ,gBAAe;AAC5C,SAASC,YAAY,EAAEC,cAAc,QAA2B,QAAO;AAwBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,eAAe,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAuB;IAC1F,IAAI,CAACH,WAAW,eAACF,eAAeI,WAAW,OAAOA;IAClD,qBACE,KAACN;QAAQQ,OAAOH;kBACd,cAAA,KAACN;YACCU,WAAU;YACVC,cAAYL;YACZG,OAAOH;YACPM,IAAIJ,YAAY;gBAAEK,SAAS;gBAAQC,OAAO;gBAAQ,SAAS;oBAAEC,MAAM;gBAAE;YAAE,IAAI;gBAAEF,SAAS;YAAc;sBAEnGX,cAAAA,aAAaK,UAAU;gBAAES,UAAU;YAAK;;;AAIjD;AAEAZ,eAAea,WAAW,GAAG;AAC7Bb,eAAec,KAAK,GAAG;AAEvB,eAAed,eAAc"}

package/src/lib/components/prerequisite-notice.component.d.ts

@@ -0,0 +1,43 @@
+import { type AlertProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export interface PrerequisiteNoticeProps {
+    /**
+     * What the feature needs first and what it unlocks, in one or two
+     * sentences: "Connect Stripe to take card payments at the register."
+     */
+    children: ReactNode;
+    /**
+     * Where the operator fixes it. Without one the notice still names the
+     * step; a notice that cannot link is better than a control that vanishes.
+     */
+    href?: string;
+    /** The link's label — the page or action it opens. Defaults to "Set it up". */
+    actionLabel?: string;
+    /**
+     * `info` for a step that unlocks something optional, `warning` when a
+     * setting already saved cannot work until the step is done (a deposit set
+     * on a store that cannot charge).
+     */
+    severity?: Extract<AlertProps['severity'], 'info' | 'warning'>;
+    /** Extra layout on the alert (margins in a stack, mostly). */
+    sx?: AlertProps['sx'];
+}
+/**
+ * Says what a feature needs before it can work, and links to where that is
+ * done.
+ *
+ * A control that silently disappears or fails only after it is pressed reads
+ * as a missing feature, and the operator has no way to learn that one setup
+ * step stands between them and it. This is the one place the console states a
+ * prerequisite an operator can fix themselves: connecting Stripe, adding a
+ * ship-from address, a plan that includes the feature. A gate the operator
+ * cannot act on — a deployment that has not configured a vendor — stays
+ * hidden instead, since naming it would point at a step nobody on the
+ * workspace can take.
+ *
+ * Pair it with `BlockedControl` when the gated control stays on screen: the
+ * notice carries the link, the disabled control carries the same reason on
+ * hover and for a screen reader.
+ */
+export declare function PrerequisiteNotice(props: PrerequisiteNoticeProps): import("react").JSX.Element;
+export default PrerequisiteNotice;

package/src/lib/components/prerequisite-notice.component.js

@@ -0,0 +1,53 @@
+/**
+ * @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 { Alert } from "@mui/material";
+import { AppLink } from "./app-link.js";
+/**
+ * Says what a feature needs before it can work, and links to where that is
+ * done.
+ *
+ * A control that silently disappears or fails only after it is pressed reads
+ * as a missing feature, and the operator has no way to learn that one setup
+ * step stands between them and it. This is the one place the console states a
+ * prerequisite an operator can fix themselves: connecting Stripe, adding a
+ * ship-from address, a plan that includes the feature. A gate the operator
+ * cannot act on — a deployment that has not configured a vendor — stays
+ * hidden instead, since naming it would point at a step nobody on the
+ * workspace can take.
+ *
+ * Pair it with `BlockedControl` when the gated control stays on screen: the
+ * notice carries the link, the disabled control carries the same reason on
+ * hover and for a screen reader.
+ */ export function PrerequisiteNotice(props) {
+    const { children, href, actionLabel = 'Set it up', severity = 'info', sx } = props;
+    return /*#__PURE__*/ _jsx(Alert, {
+        severity: severity,
+        sx: sx,
+        action: href ? /*#__PURE__*/ _jsx(AppLink, {
+            componentVariant: "button",
+            color: "inherit",
+            size: "small",
+            href: href,
+            children: actionLabel
+        }) : undefined,
+        children: children
+    });
+}
+export default PrerequisiteNotice;
+
+//# sourceMappingURL=prerequisite-notice.component.js.map

package/src/lib/components/prerequisite-notice.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/prerequisite-notice.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 { Alert, type AlertProps } from '@mui/material'\nimport type { ReactNode } from 'react'\nimport { AppLink } from './app-link'\n\nexport interface PrerequisiteNoticeProps {\n  /**\n   * What the feature needs first and what it unlocks, in one or two\n   * sentences: \"Connect Stripe to take card payments at the register.\"\n   */\n  children: ReactNode\n  /**\n   * Where the operator fixes it. Without one the notice still names the\n   * step; a notice that cannot link is better than a control that vanishes.\n   */\n  href?: string\n  /** The link's label — the page or action it opens. Defaults to \"Set it up\". */\n  actionLabel?: string\n  /**\n   * `info` for a step that unlocks something optional, `warning` when a\n   * setting already saved cannot work until the step is done (a deposit set\n   * on a store that cannot charge).\n   */\n  severity?: Extract<AlertProps['severity'], 'info' | 'warning'>\n  /** Extra layout on the alert (margins in a stack, mostly). */\n  sx?: AlertProps['sx']\n}\n\n/**\n * Says what a feature needs before it can work, and links to where that is\n * done.\n *\n * A control that silently disappears or fails only after it is pressed reads\n * as a missing feature, and the operator has no way to learn that one setup\n * step stands between them and it. This is the one place the console states a\n * prerequisite an operator can fix themselves: connecting Stripe, adding a\n * ship-from address, a plan that includes the feature. A gate the operator\n * cannot act on — a deployment that has not configured a vendor — stays\n * hidden instead, since naming it would point at a step nobody on the\n * workspace can take.\n *\n * Pair it with `BlockedControl` when the gated control stays on screen: the\n * notice carries the link, the disabled control carries the same reason on\n * hover and for a screen reader.\n */\nexport function PrerequisiteNotice(props: PrerequisiteNoticeProps) {\n  const { children, href, actionLabel = 'Set it up', severity = 'info', sx } = props\n  return (\n    <Alert\n      severity={severity}\n      sx={sx}\n      action={\n        href ? (\n          <AppLink componentVariant=\"button\" color=\"inherit\" size=\"small\" href={href}>\n            {actionLabel}\n          </AppLink>\n        ) : undefined\n      }\n    >\n      {children}\n    </Alert>\n  )\n}\n\nexport default PrerequisiteNotice\n"],"names":["Alert","AppLink","PrerequisiteNotice","props","children","href","actionLabel","severity","sx","action","componentVariant","color","size","undefined"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,KAAK,QAAyB,gBAAe;AAEtD,SAASC,OAAO,QAAQ,gBAAY;AAyBpC;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,SAASC,mBAAmBC,KAA8B;IAC/D,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,WAAW,EAAEC,WAAW,MAAM,EAAEC,EAAE,EAAE,GAAGL;IAC7E,qBACE,KAACH;QACCO,UAAUA;QACVC,IAAIA;QACJC,QACEJ,qBACE,KAACJ;YAAQS,kBAAiB;YAASC,OAAM;YAAUC,MAAK;YAAQP,MAAMA;sBACnEC;aAEDO;kBAGLT;;AAGP;AAEA,eAAeF,mBAAkB"}