@ethisyscore/plugin-ui 1.76.0 → 1.78.0

package/dist/components/ui/index.cjs

@@ -233,6 +233,10 @@ Object.defineProperty(exports, "CircularProgress", {
   enumerable: true,
   get: function () { return material.CircularProgress; }
 });
+Object.defineProperty(exports, "Collapse", {
+  enumerable: true,
+  get: function () { return material.Collapse; }
+});
 Object.defineProperty(exports, "Container", {
   enumerable: true,
   get: function () { return material.Container; }

package/dist/components/ui/index.d.cts

@@ -1,7 +1,72 @@
 import { DialogProps } from '@mui/material';
-export { Alert, AlertTitle, Box, Breadcrumbs, Button, Card, CardActions, CardContent, CardHeader, Chip, CircularProgress, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FilledInput, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid, IconButton, Input, InputAdornment, InputLabel, LinearProgress, Link, ListItemIcon, ListItemText, Menu, MenuItem, OutlinedInput, Paper, Popover, Select, SelectChangeEvent, Skeleton, Stack, Switch, Tab, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TableHead as TableHeader, TableRow, Tabs, TextField, TextareaAutosize, Tooltip, Typography } from '@mui/material';
+export { Alert, AlertTitle, Box, Breadcrumbs, Button, Card, CardActions, CardContent, CardHeader, Chip, CircularProgress, Collapse, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FilledInput, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid, IconButton, Input, InputAdornment, InputLabel, LinearProgress, Link, ListItemIcon, ListItemText, Menu, MenuItem, OutlinedInput, Paper, Popover, Select, SelectChangeEvent, Skeleton, Stack, Switch, Tab, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TableHead as TableHeader, TableRow, Tabs, TextField, TextareaAutosize, Tooltip, Typography } from '@mui/material';
 import * as react from 'react';
 
+/**
+ * The host theme's extra MUI colour slots, declared for TypeScript.
+ *
+ * ## Why this file exists
+ *
+ * The host realm's theme (gogo-ui) adds colour slots MUI does not ship, and styles them in CSS
+ * against the class names MUI derives from the `color` prop. `grey` is the neutral one - the colour
+ * every "not the primary action" control in the estate uses: Cancel, Add row, Show details.
+ *
+ * `palette.grey` is a 20..900 ramp with no `.main`, so it is filtered out by MUI's own
+ * `createSimplePaletteValueFilter` and MUI emits NO styles for `color="grey"`. What it does emit is
+ * the class name - `MuiButton-outlinedGrey`, `MuiButton-textGrey` - and gogo-ui's stylesheet styles
+ * exactly those:
+ *
+ *     // coreconnect-web/packages/gogo-ui/src/style/inputs/button.css:724
+ *     .MuiButton-outlinedGrey {
+ *       @apply border-grey-200 text-text-primary;
+ *       &:hover { @apply bg-grey-200/10 text-text-primary-dark; }
+ *
+ * So the colour is real, it just lives in the host's CSS rather than in MUI's emitted styles. The
+ * consequence for types is that MUI's `ButtonPropsColorOverrides` has no `grey` member, and
+ * `color="grey"` is a type error until someone widens the union - which every consuming plugin had
+ * already done locally (`src/types/mui-theme.d.ts` in `timesheets`/`tech`,
+ * `packages/gogo-ui/src/theme/mui-extend.ts` in the host).
+ *
+ * The SDK had not, which is why PR #255 shipped `color="inherit"` as a stopgap when it promoted
+ * `ConnectorMappingTranslationEditorView` out of those plugins. `inherit` is not a synonym: MUI DOES
+ * emit styles for it (`color: inherit; borderColor: currentColor`), so the promoted component lost
+ * the `grey-200` border and the `text-text-primary-dark` hover the four copies had. Declaring the
+ * slot here is what lets the component say `grey` again and render as it did.
+ *
+ * ## Why a declaration rather than a cast
+ *
+ * `color={"grey" as ButtonProps["color"]}` at each call site would also compile, and would leave the
+ * next author to rediscover why. This says the true thing once: the host theme HAS this colour.
+ *
+ * ## Merging with a consumer's own declaration
+ *
+ * Interface declaration merging is additive and idempotent for identical members, so a plugin that
+ * already declares `grey: true` keeps compiling with this present - the two declarations merge into
+ * the same one-member union. `src/components/ui/__tests__/muiColorAugmentation.test.ts` compiles that
+ * exact situation rather than asserting it in prose.
+ *
+ * ## Why it lives in this barrel
+ *
+ * `components/ui` is the MUI seam: it is where a plugin gets `Button` and `IconButton` from, so it
+ * is the barrel whose consumers can write `color="grey"`. `index.ts` imports this module so the
+ * declaration reaches `dist/components/ui/index.d.ts` and ships to them - an augmentation only
+ * applies to a program that loads it.
+ *
+ * ## Why Button and not IconButton
+ *
+ * `IconButton` deliberately gets no slot. gogo-ui has no `MuiIconButton-*Grey` rule anywhere - the
+ * only `.MuiIconButton-root` block in `button.css` sets sizes - and MUI emits nothing for a
+ * `main`-less palette entry, so `color="grey"` on an IconButton resolves to the root's
+ * `palette.action.active`, which that theme defines as `hsl(var(--text-primary))`: the same value
+ * `color="inherit"` inherits from the enclosing `MuiPaper-root`. Identical pixels, so there is
+ * nothing to restore and no reason to widen a second interface.
+ */
+declare module "@mui/material/Button" {
+    interface ButtonPropsColorOverrides {
+        grey: true;
+    }
+}
+
 /**
  * MUI `Dialog` with the scroll-lock + focus-restore overrides plugin surfaces
  * need (AB#4808): MUI's defaults reset the page to top when a dialog opened from

package/dist/components/ui/index.d.ts

@@ -1,7 +1,72 @@
 import { DialogProps } from '@mui/material';
-export { Alert, AlertTitle, Box, Breadcrumbs, Button, Card, CardActions, CardContent, CardHeader, Chip, CircularProgress, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FilledInput, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid, IconButton, Input, InputAdornment, InputLabel, LinearProgress, Link, ListItemIcon, ListItemText, Menu, MenuItem, OutlinedInput, Paper, Popover, Select, SelectChangeEvent, Skeleton, Stack, Switch, Tab, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TableHead as TableHeader, TableRow, Tabs, TextField, TextareaAutosize, Tooltip, Typography } from '@mui/material';
+export { Alert, AlertTitle, Box, Breadcrumbs, Button, Card, CardActions, CardContent, CardHeader, Chip, CircularProgress, Collapse, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FilledInput, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid, IconButton, Input, InputAdornment, InputLabel, LinearProgress, Link, ListItemIcon, ListItemText, Menu, MenuItem, OutlinedInput, Paper, Popover, Select, SelectChangeEvent, Skeleton, Stack, Switch, Tab, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TableHead as TableHeader, TableRow, Tabs, TextField, TextareaAutosize, Tooltip, Typography } from '@mui/material';
 import * as react from 'react';
 
+/**
+ * The host theme's extra MUI colour slots, declared for TypeScript.
+ *
+ * ## Why this file exists
+ *
+ * The host realm's theme (gogo-ui) adds colour slots MUI does not ship, and styles them in CSS
+ * against the class names MUI derives from the `color` prop. `grey` is the neutral one - the colour
+ * every "not the primary action" control in the estate uses: Cancel, Add row, Show details.
+ *
+ * `palette.grey` is a 20..900 ramp with no `.main`, so it is filtered out by MUI's own
+ * `createSimplePaletteValueFilter` and MUI emits NO styles for `color="grey"`. What it does emit is
+ * the class name - `MuiButton-outlinedGrey`, `MuiButton-textGrey` - and gogo-ui's stylesheet styles
+ * exactly those:
+ *
+ *     // coreconnect-web/packages/gogo-ui/src/style/inputs/button.css:724
+ *     .MuiButton-outlinedGrey {
+ *       @apply border-grey-200 text-text-primary;
+ *       &:hover { @apply bg-grey-200/10 text-text-primary-dark; }
+ *
+ * So the colour is real, it just lives in the host's CSS rather than in MUI's emitted styles. The
+ * consequence for types is that MUI's `ButtonPropsColorOverrides` has no `grey` member, and
+ * `color="grey"` is a type error until someone widens the union - which every consuming plugin had
+ * already done locally (`src/types/mui-theme.d.ts` in `timesheets`/`tech`,
+ * `packages/gogo-ui/src/theme/mui-extend.ts` in the host).
+ *
+ * The SDK had not, which is why PR #255 shipped `color="inherit"` as a stopgap when it promoted
+ * `ConnectorMappingTranslationEditorView` out of those plugins. `inherit` is not a synonym: MUI DOES
+ * emit styles for it (`color: inherit; borderColor: currentColor`), so the promoted component lost
+ * the `grey-200` border and the `text-text-primary-dark` hover the four copies had. Declaring the
+ * slot here is what lets the component say `grey` again and render as it did.
+ *
+ * ## Why a declaration rather than a cast
+ *
+ * `color={"grey" as ButtonProps["color"]}` at each call site would also compile, and would leave the
+ * next author to rediscover why. This says the true thing once: the host theme HAS this colour.
+ *
+ * ## Merging with a consumer's own declaration
+ *
+ * Interface declaration merging is additive and idempotent for identical members, so a plugin that
+ * already declares `grey: true` keeps compiling with this present - the two declarations merge into
+ * the same one-member union. `src/components/ui/__tests__/muiColorAugmentation.test.ts` compiles that
+ * exact situation rather than asserting it in prose.
+ *
+ * ## Why it lives in this barrel
+ *
+ * `components/ui` is the MUI seam: it is where a plugin gets `Button` and `IconButton` from, so it
+ * is the barrel whose consumers can write `color="grey"`. `index.ts` imports this module so the
+ * declaration reaches `dist/components/ui/index.d.ts` and ships to them - an augmentation only
+ * applies to a program that loads it.
+ *
+ * ## Why Button and not IconButton
+ *
+ * `IconButton` deliberately gets no slot. gogo-ui has no `MuiIconButton-*Grey` rule anywhere - the
+ * only `.MuiIconButton-root` block in `button.css` sets sizes - and MUI emits nothing for a
+ * `main`-less palette entry, so `color="grey"` on an IconButton resolves to the root's
+ * `palette.action.active`, which that theme defines as `hsl(var(--text-primary))`: the same value
+ * `color="inherit"` inherits from the enclosing `MuiPaper-root`. Identical pixels, so there is
+ * nothing to restore and no reason to widen a second interface.
+ */
+declare module "@mui/material/Button" {
+    interface ButtonPropsColorOverrides {
+        grey: true;
+    }
+}
+
 /**
  * MUI `Dialog` with the scroll-lock + focus-restore overrides plugin surfaces
  * need (AB#4808): MUI's defaults reset the page to top when a dialog opened from

package/dist/components/ui/index.js

@@ -1,5 +1,5 @@
 import { FormControl, InputLabel, FilledInput, InputAdornment, IconButton, Dialog as Dialog$1 } from '@mui/material';
-export { Alert, AlertTitle, Box, Breadcrumbs, Button, Card, CardActions, CardContent, CardHeader, Chip, CircularProgress, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FilledInput, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid, IconButton, Input, InputAdornment, InputLabel, LinearProgress, Link, ListItemIcon, ListItemText, Menu, MenuItem, OutlinedInput, Paper, Popover, Select, Skeleton, Stack, Switch, Tab, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TableHead as TableHeader, TableRow, Tabs, TextField, TextareaAutosize, Tooltip, Typography } from '@mui/material';
+export { Alert, AlertTitle, Box, Breadcrumbs, Button, Card, CardActions, CardContent, CardHeader, Chip, CircularProgress, Collapse, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FilledInput, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid, IconButton, Input, InputAdornment, InputLabel, LinearProgress, Link, ListItemIcon, ListItemText, Menu, MenuItem, OutlinedInput, Paper, Popover, Select, Skeleton, Stack, Switch, Tab, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TableHead as TableHeader, TableRow, Tabs, TextField, TextareaAutosize, Tooltip, Typography } from '@mui/material';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { memo, useState, useId, useRef, useEffect, useCallback } from 'react';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethisyscore/plugin-ui",
-  "version": "1.76.0",
+  "version": "1.78.0",
   "description": "Plugin-UI umbrella SDK: client bridge + a11y/l10n primitives + brokered-MCP client (WI 4858).",
   "type": "module",
   "main": "./dist/index.cjs",