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

package/src/lib/components/color-picker-tokens.js

@@ -0,0 +1,431 @@
+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 { styled, useTheme } from "@aglyn/shared-ui-theme";
+import { Box, Button, ButtonBase, Paper, Slider, Typography } from "@mui/material";
+import { alpha as muiAlpha } from "@mui/material/styles";
+import { createContext, useContext, useMemo } from "react";
+/**
+ * The palette token paths the picker offers, with display labels.
+ *
+ * `console.theme.ts` is the source of truth for brand colour — these are
+ * references INTO it, never copies of it, so a palette change lands here for
+ * free. Anything the active palette does not define is dropped by
+ * {@link buildColorTokenOptions}, so listing a brand-only slot (`tertiary`,
+ * `surface`) costs nothing on a theme that lacks it.
+ *
+ * Every `path` must be UNIQUE — the picker keys its grid by it (AGL-1192).
+ */ export const COLOR_PICKER_TOKEN_PATHS = [
+    {
+        path: 'primary.main',
+        label: 'Primary'
+    },
+    {
+        path: 'primary.light',
+        label: 'Primary light'
+    },
+    {
+        path: 'primary.dark',
+        label: 'Primary dark'
+    },
+    // These three read `primary.*` until AGL-1206: picking "Secondary" handed
+    // back the PRIMARY colour, and the duplicate `primary.main` path also gave
+    // the grid two children with the same React key (AGL-1192).
+    {
+        path: 'secondary.main',
+        label: 'Secondary'
+    },
+    {
+        path: 'secondary.light',
+        label: 'Secondary light'
+    },
+    {
+        path: 'secondary.dark',
+        label: 'Secondary dark'
+    },
+    // Brand slots beyond MUI's stock set. `tertiary` is the Aglyn slate after
+    // the AGL-1186 rotation; `surface` is a real palette entry, so "Surface"
+    // names it rather than `background.paper` (which is Paper).
+    {
+        path: 'tertiary.main',
+        label: 'Tertiary'
+    },
+    // The tertiary shades the theme has derived all along (AGL-2486).
+    // `createResponsiveTheme` runs `addShadeVariants` over `tertiary` exactly
+    // as it does over primary and secondary, so these resolve; the picker
+    // simply never offered them, and an author who wanted the accent's dark
+    // step had to hardcode a hex. `tertiary` is a FOREGROUND colour family, so
+    // its `dark` slot is the AA-checked accent-text shade rather than a naive
+    // darken — which is why the swatch resolves it out of the live palette
+    // instead of deriving a preview of its own.
+    {
+        path: 'tertiary.light',
+        label: 'Tertiary light'
+    },
+    {
+        path: 'tertiary.dark',
+        label: 'Tertiary dark'
+    },
+    {
+        path: 'surface.main',
+        label: 'Surface'
+    },
+    // The pale accent washes used as tile fills (AGL-1244). Offered right after
+    // the accent they belong to, because the pairing IS the token: a tile filled
+    // `tint.primary` carries a `primary.dark` glyph. Without these an author had
+    // no token for "pale blue panel" and reached for a hex, which then needed a
+    // hand-written `@scheme dark` slice to survive dark mode.
+    {
+        path: 'tint.primary',
+        label: 'Tint primary'
+    },
+    {
+        path: 'tint.secondary',
+        label: 'Tint secondary'
+    },
+    {
+        path: 'tint.tertiary',
+        label: 'Tint tertiary'
+    },
+    {
+        path: 'error.main',
+        label: 'Error'
+    },
+    {
+        path: 'warning.main',
+        label: 'Warning'
+    },
+    {
+        path: 'info.main',
+        label: 'Info'
+    },
+    {
+        path: 'success.main',
+        label: 'Success'
+    },
+    {
+        path: 'background.default',
+        label: 'Background'
+    },
+    {
+        path: 'background.paper',
+        label: 'Paper'
+    },
+    {
+        path: 'text.primary',
+        label: 'Text'
+    },
+    {
+        path: 'text.secondary',
+        label: 'Text secondary'
+    },
+    {
+        path: 'text.disabled',
+        label: 'Text disabled'
+    },
+    {
+        path: 'divider',
+        label: 'Divider'
+    },
+    // The neutral ramp the designs lean on for borders and muted copy, and the
+    // absolutes for on-inverse text. Without these an author had no token for
+    // "muted grey" and reached for a hardcoded hex, which then failed in dark.
+    {
+        path: 'grey.300',
+        label: 'Grey 300'
+    },
+    {
+        path: 'grey.600',
+        label: 'Grey 600'
+    },
+    {
+        path: 'grey.900',
+        label: 'Grey 900'
+    },
+    {
+        path: 'common.white',
+        label: 'White'
+    },
+    {
+        path: 'common.black',
+        label: 'Black'
+    }
+];
+/** Resolves a dot-separated palette token path to its color string. */ export function resolvePaletteToken(palette, path) {
+    const resolved = path.split('.').reduce((node, key)=>node && typeof node === 'object' ? node[key] : undefined, palette);
+    return typeof resolved === 'string' ? resolved : undefined;
+}
+/**
+ * Builds the picker's token options from a light and a dark palette so
+ * every swatch can show BOTH scheme resolutions. Tokens that resolve in
+ * neither palette are dropped.
+ */ export function buildColorTokenOptions(lightPalette, darkPalette) {
+    const options = [];
+    // The picker keys its grid by `value`, so a repeated path would render two
+    // children with the same React key (AGL-1192). The list above is curated to
+    // be unique; this makes that a property of the builder rather than a rule
+    // someone has to remember when adding a token.
+    const seen = new Set();
+    for (const { path, label } of COLOR_PICKER_TOKEN_PATHS){
+        if (seen.has(path)) continue;
+        const light = resolvePaletteToken(lightPalette, path);
+        const dark = resolvePaletteToken(darkPalette, path);
+        if (!light && !dark) continue;
+        seen.add(path);
+        options.push({
+            value: path,
+            label,
+            light,
+            dark
+        });
+    }
+    return options;
+}
+/**
+ * Carries site-theme-resolved token options down to every COLOR_PICKER
+ * field beneath it (styles panel, attribute forms, email blocks) with no
+ * per-form wiring. Without a provider the field falls back to resolving
+ * the token paths against the ambient MUI theme — one scheme only.
+ */ export const ColorPickerTokensContext = /*#__PURE__*/ createContext(undefined);
+ColorPickerTokensContext.displayName = 'ColorPickerTokensContext';
+/**
+ * The token options a color-picker field should offer: the
+ * {@link ColorPickerTokensContext} value when provided, otherwise the
+ * default token paths resolved against the ambient theme's palette
+ * (filed under that theme's own scheme; the other scheme is unknown).
+ */ export function useColorPickerTokenOptions() {
+    const contextOptions = useContext(ColorPickerTokensContext);
+    const theme = useTheme();
+    return useMemo(()=>{
+        if (contextOptions == null ? void 0 : contextOptions.length) return contextOptions;
+        const palette = theme == null ? void 0 : theme.palette;
+        const scheme = (palette == null ? void 0 : palette.mode) === 'dark' ? 'dark' : 'light';
+        const options = [];
+        const seen = new Set();
+        for (const { path, label } of COLOR_PICKER_TOKEN_PATHS){
+            if (seen.has(path)) continue;
+            const resolved = resolvePaletteToken(palette, path);
+            if (!resolved) continue;
+            seen.add(path);
+            options.push({
+                value: path,
+                label,
+                [scheme]: resolved
+            });
+        }
+        return options;
+    }, [
+        contextOptions,
+        theme
+    ]);
+}
+/**
+ * The transparency chequerboard drawn UNDER a partly transparent swatch
+ * (AGL-2486). Without it a token at 12% reads as "a very pale colour" and an
+ * author cannot tell 12% opacity from a tint token — which is the one
+ * distinction the opacity control exists to make.
+ */ const SWATCH_CHECKER = 'repeating-conic-gradient(rgba(128, 128, 128, 0.45) 0% 25%, ' + 'transparent 0% 50%)';
+/** Edge length of one chequerboard square, in px. */ const SWATCH_CHECKER_TILE = 8;
+/** The colour a swatch paints, alpha applied when the author chose one. */ function swatchPaint(color, opacity) {
+    if (opacity >= 1) return color;
+    try {
+        return muiAlpha(color, opacity);
+    } catch (unused) {
+        // `alpha()` throws on anything it cannot parse (a named colour, an
+        // unresolved `var()`). A preview is not worth an exception, and the
+        // chequerboard behind still says "this is transparent".
+        return color;
+    }
+}
+/**
+ * Split swatch showing a token's light + dark resolutions side by side
+ * (left/light, right/dark) so authors see how the reference adapts per
+ * scheme. Falls back to a solid fill when only one scheme is known.
+ *
+ * `alpha` previews the opacity the author has chosen for the token
+ * (AGL-2486) over a chequerboard, so the swatch shows what will actually
+ * render rather than the token's opaque colour.
+ */ export const TokenSwatch = styled('span', {
+    shouldForwardProp: (propName)=>propName !== 'light' && propName !== 'dark' && propName !== 'size' && propName !== 'alpha'
+})(({ theme, light, dark, size = 22, alpha: opacity })=>{
+    var _ref, _ref1;
+    // `0` is a legitimate opacity and `strictNullChecks` is off repo-wide, so
+    // the default is spelled out rather than left to `??` on a falsy number.
+    const amount = typeof opacity === 'number' && Number.isFinite(opacity) ? opacity : 1;
+    const lightColor = swatchPaint((_ref = light != null ? light : dark) != null ? _ref : 'transparent', amount);
+    const darkColor = swatchPaint((_ref1 = dark != null ? dark : light) != null ? _ref1 : 'transparent', amount);
+    // Two stops on the SAME position, so the two halves meet exactly on the
+    // diameter instead of blending across a band the eye reads as a smudge
+    // at this size.
+    const paint = lightColor === darkColor ? `linear-gradient(${lightColor}, ${lightColor})` : `linear-gradient(105deg, ${lightColor} 0 50%, ${darkColor} 50% 100%)`;
+    const opaque = amount >= 1;
+    return {
+        width: size,
+        height: size,
+        flexShrink: 0,
+        display: 'inline-flex',
+        borderRadius: '50%',
+        border: `1px solid ${theme.palette.divider}`,
+        background: opaque ? paint : `${paint}, ${SWATCH_CHECKER}`,
+        // The ring is drawn INSIDE the box (border-box sizing), so a background
+        // left on its default `padding-box` origin is positioned in an area two
+        // pixels smaller than the one it paints. `repeat` fills the leftover
+        // edge bands from the neighbouring tile, where the diagonal split sits
+        // several pixels across — a wedge bitten out of a 22px circle. Anchoring
+        // the layers on the border box makes one tile cover the whole swatch;
+        // the chequerboard keeps tiling because it is sized in px, not to the
+        // element.
+        backgroundOrigin: 'border-box',
+        backgroundRepeat: opaque ? 'no-repeat' : 'no-repeat, repeat',
+        backgroundSize: opaque ? '100% 100%' : `100% 100%, ${SWATCH_CHECKER_TILE}px ${SWATCH_CHECKER_TILE}px`
+    };
+});
+TokenSwatch.displayName = 'AglynColorTokenSwatch';
+/**
+ * The CSS colour string a picker value stands for. Lives here rather than
+ * inside the colour FIELD because the gradient field's stop editor commits
+ * through the same picker (AGL-1331) and must not grow a second, subtly
+ * different conversion.
+ */ export function rgbColorToCss(value) {
+    if (typeof value === 'string') return value;
+    const { r, g, b, a } = _extends({}, value);
+    if (a < 1) return `rgba(${r || 0}, ${g || 0}, ${b || 0}, ${a || 0})`;
+    return `rgb(${r || 0}, ${g || 0}, ${b || 0})`;
+}
+/**
+ * Default stage of the two-stage picker (AGL-588): the site theme's palette
+ * references. Each split swatch previews the token's light and dark
+ * resolutions; selecting one stores the TOKEN PATH (not a hex), so the
+ * colour keeps adapting when the site switches schemes.
+ *
+ * Shared by the colour field and by each gradient stop (AGL-1331) — one
+ * grid, so the token list, the selected-state ring and the "Custom color…"
+ * escape hatch cannot drift between the two places an author picks a colour.
+ */ export const ColorTokenGrid = (props)=>{
+    const { options, value, onSelect, onCustom, onClear, title = 'Theme colors', opacity, onOpacityChange } = props;
+    // Spelled out rather than `opacity ?? 1`: `0` is a legitimate opacity and
+    // `strictNullChecks` is off repo-wide.
+    const amount = typeof opacity === 'number' && Number.isFinite(opacity) ? opacity : 1;
+    return /*#__PURE__*/ _jsxs(Paper, {
+        sx: {
+            p: 1,
+            width: 248
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "overline",
+                component: "div",
+                color: "text.secondary",
+                sx: {
+                    px: 0.5,
+                    lineHeight: 2
+                },
+                children: title
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    gap: 0.25
+                },
+                children: options.map((option)=>/*#__PURE__*/ _jsxs(ButtonBase, {
+                        "aria-label": option.label,
+                        "aria-pressed": option.value === value,
+                        onClick: (event)=>onSelect(option.value, event),
+                        sx: {
+                            justifyContent: 'flex-start',
+                            gap: 0.75,
+                            px: 0.5,
+                            py: 0.5,
+                            borderRadius: 1,
+                            border: 1,
+                            borderColor: option.value === value ? 'primary.main' : 'transparent',
+                            '&:hover': {
+                                backgroundColor: 'action.hover'
+                            }
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(TokenSwatch, {
+                                light: option.light,
+                                dark: option.dark,
+                                size: 18,
+                                alpha: option.value === value ? amount : 1
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                noWrap: true,
+                                children: option.label
+                            })
+                        ]
+                    }, option.value))
+            }),
+            onOpacityChange ? /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    px: 0.5,
+                    pt: 0.5
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        component: "label",
+                        color: "text.secondary",
+                        id: "aglyn-color-token-opacity",
+                        sx: {
+                            display: 'block'
+                        },
+                        children: `Opacity ${Math.round(amount * 100)}%`
+                    }),
+                    /*#__PURE__*/ _jsx(Slider, {
+                        size: "small",
+                        min: 0,
+                        max: 1,
+                        step: 0.01,
+                        value: amount,
+                        "aria-labelledby": "aglyn-color-token-opacity",
+                        onChange: (_event, next)=>onOpacityChange(Array.isArray(next) ? next[0] : next),
+                        sx: {
+                            mt: -0.5
+                        }
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                fullWidth: true,
+                sx: {
+                    mt: 0.5
+                },
+                onClick: onCustom,
+                children: "Custom color…"
+            }),
+            onClear ? /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                fullWidth: true,
+                color: "inherit",
+                sx: {
+                    mt: 0.25,
+                    color: 'text.secondary'
+                },
+                onClick: onClear,
+                children: "Clear color"
+            }) : null
+        ]
+    });
+};
+ColorTokenGrid.displayName = 'AglynColorTokenGrid';
+
+//# sourceMappingURL=color-picker-tokens.js.map

package/src/lib/components/color-picker-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/components/color-picker-tokens.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, useTheme } from '@aglyn/shared-ui-theme'\nimport {\n  Box,\n  Button,\n  ButtonBase,\n  Paper,\n  Slider,\n  Typography,\n} from '@mui/material'\nimport { alpha as muiAlpha } from '@mui/material/styles'\nimport { createContext, useContext, useMemo } from 'react'\n\n/**\n * Theme color references for the two-stage color picker (AGL-588).\n *\n * The picker's default stage offers PALETTE TOKEN PATHS (`primary.main`,\n * `background.paper`, …) instead of resolved hex values: MUI's sx system\n * resolves palette paths against the ACTIVE theme, so a token-referenced\n * color adapts automatically when the site swaps between its light and\n * dark schemes — the fix for hardcoded light-scheme hex colors going\n * unreadable in dark mode.\n */\nexport interface ColorPickerTokenOption {\n  /** Palette token path stored as the field value, e.g. 'primary.main'. */\n  value: string\n  label: string\n  /** Swatch color resolved from the light-scheme palette. */\n  light?: string\n  /** Swatch color resolved from the dark-scheme palette. */\n  dark?: string\n}\n\n/**\n * The palette token paths the picker offers, with display labels.\n *\n * `console.theme.ts` is the source of truth for brand colour — these are\n * references INTO it, never copies of it, so a palette change lands here for\n * free. Anything the active palette does not define is dropped by\n * {@link buildColorTokenOptions}, so listing a brand-only slot (`tertiary`,\n * `surface`) costs nothing on a theme that lacks it.\n *\n * Every `path` must be UNIQUE — the picker keys its grid by it (AGL-1192).\n */\nexport const COLOR_PICKER_TOKEN_PATHS: ReadonlyArray<{\n  path: string\n  label: string\n}> = [\n  { path: 'primary.main', label: 'Primary' },\n  { path: 'primary.light', label: 'Primary light' },\n  { path: 'primary.dark', label: 'Primary dark' },\n  // These three read `primary.*` until AGL-1206: picking \"Secondary\" handed\n  // back the PRIMARY colour, and the duplicate `primary.main` path also gave\n  // the grid two children with the same React key (AGL-1192).\n  { path: 'secondary.main', label: 'Secondary' },\n  { path: 'secondary.light', label: 'Secondary light' },\n  { path: 'secondary.dark', label: 'Secondary dark' },\n  // Brand slots beyond MUI's stock set. `tertiary` is the Aglyn slate after\n  // the AGL-1186 rotation; `surface` is a real palette entry, so \"Surface\"\n  // names it rather than `background.paper` (which is Paper).\n  { path: 'tertiary.main', label: 'Tertiary' },\n  // The tertiary shades the theme has derived all along (AGL-2486).\n  // `createResponsiveTheme` runs `addShadeVariants` over `tertiary` exactly\n  // as it does over primary and secondary, so these resolve; the picker\n  // simply never offered them, and an author who wanted the accent's dark\n  // step had to hardcode a hex. `tertiary` is a FOREGROUND colour family, so\n  // its `dark` slot is the AA-checked accent-text shade rather than a naive\n  // darken — which is why the swatch resolves it out of the live palette\n  // instead of deriving a preview of its own.\n  { path: 'tertiary.light', label: 'Tertiary light' },\n  { path: 'tertiary.dark', label: 'Tertiary dark' },\n  { path: 'surface.main', label: 'Surface' },\n  // The pale accent washes used as tile fills (AGL-1244). Offered right after\n  // the accent they belong to, because the pairing IS the token: a tile filled\n  // `tint.primary` carries a `primary.dark` glyph. Without these an author had\n  // no token for \"pale blue panel\" and reached for a hex, which then needed a\n  // hand-written `@scheme dark` slice to survive dark mode.\n  { path: 'tint.primary', label: 'Tint primary' },\n  { path: 'tint.secondary', label: 'Tint secondary' },\n  { path: 'tint.tertiary', label: 'Tint tertiary' },\n  { path: 'error.main', label: 'Error' },\n  { path: 'warning.main', label: 'Warning' },\n  { path: 'info.main', label: 'Info' },\n  { path: 'success.main', label: 'Success' },\n  { path: 'background.default', label: 'Background' },\n  { path: 'background.paper', label: 'Paper' },\n  { path: 'text.primary', label: 'Text' },\n  { path: 'text.secondary', label: 'Text secondary' },\n  { path: 'text.disabled', label: 'Text disabled' },\n  { path: 'divider', label: 'Divider' },\n  // The neutral ramp the designs lean on for borders and muted copy, and the\n  // absolutes for on-inverse text. Without these an author had no token for\n  // \"muted grey\" and reached for a hardcoded hex, which then failed in dark.\n  { path: 'grey.300', label: 'Grey 300' },\n  { path: 'grey.600', label: 'Grey 600' },\n  { path: 'grey.900', label: 'Grey 900' },\n  { path: 'common.white', label: 'White' },\n  { path: 'common.black', label: 'Black' },\n]\n\n/** Resolves a dot-separated palette token path to its color string. */\nexport function resolvePaletteToken(\n  palette: Record<string, unknown> | undefined,\n  path: string,\n): string | undefined {\n  const resolved = path\n    .split('.')\n    .reduce<unknown>(\n      (node, key) =>\n        node && typeof node === 'object'\n          ? (node as Record<string, unknown>)[key]\n          : undefined,\n      palette,\n    )\n  return typeof resolved === 'string' ? resolved : undefined\n}\n\n/**\n * Builds the picker's token options from a light and a dark palette so\n * every swatch can show BOTH scheme resolutions. Tokens that resolve in\n * neither palette are dropped.\n */\nexport function buildColorTokenOptions(\n  lightPalette: Record<string, unknown> | undefined,\n  darkPalette: Record<string, unknown> | undefined,\n): ColorPickerTokenOption[] {\n  const options: ColorPickerTokenOption[] = []\n  // The picker keys its grid by `value`, so a repeated path would render two\n  // children with the same React key (AGL-1192). The list above is curated to\n  // be unique; this makes that a property of the builder rather than a rule\n  // someone has to remember when adding a token.\n  const seen = new Set<string>()\n  for (const { path, label } of COLOR_PICKER_TOKEN_PATHS) {\n    if (seen.has(path)) continue\n    const light = resolvePaletteToken(lightPalette, path)\n    const dark = resolvePaletteToken(darkPalette, path)\n    if (!light && !dark) continue\n    seen.add(path)\n    options.push({ value: path, label, light, dark })\n  }\n  return options\n}\n\n/**\n * Carries site-theme-resolved token options down to every COLOR_PICKER\n * field beneath it (styles panel, attribute forms, email blocks) with no\n * per-form wiring. Without a provider the field falls back to resolving\n * the token paths against the ambient MUI theme — one scheme only.\n */\nexport const ColorPickerTokensContext = createContext<\n  ColorPickerTokenOption[] | undefined\n>(undefined)\nColorPickerTokensContext.displayName = 'ColorPickerTokensContext'\n\n/**\n * The token options a color-picker field should offer: the\n * {@link ColorPickerTokensContext} value when provided, otherwise the\n * default token paths resolved against the ambient theme's palette\n * (filed under that theme's own scheme; the other scheme is unknown).\n */\nexport function useColorPickerTokenOptions(): ColorPickerTokenOption[] {\n  const contextOptions = useContext(ColorPickerTokensContext)\n  const theme = useTheme() as {\n    palette?: Record<string, unknown> & { mode?: string }\n  } | null\n  return useMemo(() => {\n    if (contextOptions?.length) return contextOptions\n    const palette = theme?.palette\n    const scheme = palette?.mode === 'dark' ? 'dark' : 'light'\n    const options: ColorPickerTokenOption[] = []\n    const seen = new Set<string>()\n    for (const { path, label } of COLOR_PICKER_TOKEN_PATHS) {\n      if (seen.has(path)) continue\n      const resolved = resolvePaletteToken(palette, path)\n      if (!resolved) continue\n      seen.add(path)\n      options.push({ value: path, label, [scheme]: resolved })\n    }\n    return options\n  }, [contextOptions, theme])\n}\n\n/**\n * The transparency chequerboard drawn UNDER a partly transparent swatch\n * (AGL-2486). Without it a token at 12% reads as \"a very pale colour\" and an\n * author cannot tell 12% opacity from a tint token — which is the one\n * distinction the opacity control exists to make.\n */\nconst SWATCH_CHECKER =\n  'repeating-conic-gradient(rgba(128, 128, 128, 0.45) 0% 25%, ' +\n  'transparent 0% 50%)'\n\n/** Edge length of one chequerboard square, in px. */\nconst SWATCH_CHECKER_TILE = 8\n\n/** The colour a swatch paints, alpha applied when the author chose one. */\nfunction swatchPaint(color: string, opacity: number): string {\n  if (opacity >= 1) return color\n  try {\n    return muiAlpha(color, opacity)\n  } catch {\n    // `alpha()` throws on anything it cannot parse (a named colour, an\n    // unresolved `var()`). A preview is not worth an exception, and the\n    // chequerboard behind still says \"this is transparent\".\n    return color\n  }\n}\n\n/**\n * Split swatch showing a token's light + dark resolutions side by side\n * (left/light, right/dark) so authors see how the reference adapts per\n * scheme. Falls back to a solid fill when only one scheme is known.\n *\n * `alpha` previews the opacity the author has chosen for the token\n * (AGL-2486) over a chequerboard, so the swatch shows what will actually\n * render rather than the token's opaque colour.\n */\nexport const TokenSwatch = styled('span', {\n  shouldForwardProp: (propName) =>\n    propName !== 'light' &&\n    propName !== 'dark' &&\n    propName !== 'size' &&\n    propName !== 'alpha',\n})<{ light?: string; dark?: string; size?: number; alpha?: number }>(({\n  theme,\n  light,\n  dark,\n  size = 22,\n  alpha: opacity,\n}) => {\n  // `0` is a legitimate opacity and `strictNullChecks` is off repo-wide, so\n  // the default is spelled out rather than left to `??` on a falsy number.\n  const amount =\n    typeof opacity === 'number' && Number.isFinite(opacity) ? opacity : 1\n  const lightColor = swatchPaint(light ?? dark ?? 'transparent', amount)\n  const darkColor = swatchPaint(dark ?? light ?? 'transparent', amount)\n  // Two stops on the SAME position, so the two halves meet exactly on the\n  // diameter instead of blending across a band the eye reads as a smudge\n  // at this size.\n  const paint =\n    lightColor === darkColor\n      ? `linear-gradient(${lightColor}, ${lightColor})`\n      : `linear-gradient(105deg, ${lightColor} 0 50%, ${darkColor} 50% 100%)`\n  const opaque = amount >= 1\n  return {\n    width: size,\n    height: size,\n    flexShrink: 0,\n    display: 'inline-flex',\n    borderRadius: '50%',\n    border: `1px solid ${theme.palette.divider}`,\n    background: opaque ? paint : `${paint}, ${SWATCH_CHECKER}`,\n    // The ring is drawn INSIDE the box (border-box sizing), so a background\n    // left on its default `padding-box` origin is positioned in an area two\n    // pixels smaller than the one it paints. `repeat` fills the leftover\n    // edge bands from the neighbouring tile, where the diagonal split sits\n    // several pixels across — a wedge bitten out of a 22px circle. Anchoring\n    // the layers on the border box makes one tile cover the whole swatch;\n    // the chequerboard keeps tiling because it is sized in px, not to the\n    // element.\n    backgroundOrigin: 'border-box',\n    backgroundRepeat: opaque ? 'no-repeat' : 'no-repeat, repeat',\n    backgroundSize: opaque\n      ? '100% 100%'\n      : `100% 100%, ${SWATCH_CHECKER_TILE}px ${SWATCH_CHECKER_TILE}px`,\n  }\n})\nTokenSwatch.displayName = 'AglynColorTokenSwatch'\n\n/** The `{ r, g, b, a }` shape react-color hands back on every change. */\nexport interface RgbColorValue {\n  r: number\n  g: number\n  b: number\n  a: number\n}\n\n/**\n * The CSS colour string a picker value stands for. Lives here rather than\n * inside the colour FIELD because the gradient field's stop editor commits\n * through the same picker (AGL-1331) and must not grow a second, subtly\n * different conversion.\n */\nexport function rgbColorToCss(value: RgbColorValue | string): string {\n  if (typeof value === 'string') return value\n  const { r, g, b, a } = { ...value }\n  if (a < 1) return `rgba(${r || 0}, ${g || 0}, ${b || 0}, ${a || 0})`\n  return `rgb(${r || 0}, ${g || 0}, ${b || 0})`\n}\n\n/**\n * Default stage of the two-stage picker (AGL-588): the site theme's palette\n * references. Each split swatch previews the token's light and dark\n * resolutions; selecting one stores the TOKEN PATH (not a hex), so the\n * colour keeps adapting when the site switches schemes.\n *\n * Shared by the colour field and by each gradient stop (AGL-1331) — one\n * grid, so the token list, the selected-state ring and the \"Custom color…\"\n * escape hatch cannot drift between the two places an author picks a colour.\n */\nexport const ColorTokenGrid = (props: {\n  options: ColorPickerTokenOption[]\n  value: string\n  onSelect: (tokenPath: string, event: unknown) => void\n  onCustom: () => void\n  /**\n   * Takes the colour off entirely (AGL-2486). Omitted where there is\n   * nothing to clear, or where the caller has no unset state to offer —\n   * a gradient stop always has a colour, so it never passes this.\n   */\n  onClear?: () => void\n  /** Overrides the \"Theme colors\" heading. */\n  title?: string\n  /**\n   * Opacity applied to the picked token, 0–1 (AGL-2486). Omitting\n   * `onOpacityChange` hides the control entirely, so a caller with nowhere to\n   * store an alpha never shows one.\n   */\n  opacity?: number\n  onOpacityChange?: (opacity: number) => void\n}) => {\n  const {\n    options,\n    value,\n    onSelect,\n    onCustom,\n    onClear,\n    title = 'Theme colors',\n    opacity,\n    onOpacityChange,\n  } = props\n  // Spelled out rather than `opacity ?? 1`: `0` is a legitimate opacity and\n  // `strictNullChecks` is off repo-wide.\n  const amount =\n    typeof opacity === 'number' && Number.isFinite(opacity) ? opacity : 1\n  return (\n    <Paper sx={{ p: 1, width: 248 }}>\n      <Typography\n        variant=\"overline\"\n        component=\"div\"\n        color=\"text.secondary\"\n        sx={{ px: 0.5, lineHeight: 2 }}\n      >\n        {title}\n      </Typography>\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '1fr 1fr',\n          gap: 0.25,\n        }}\n      >\n        {options.map((option) => (\n          <ButtonBase\n            key={option.value}\n            aria-label={option.label}\n            aria-pressed={option.value === value}\n            onClick={(event) => onSelect(option.value, event)}\n            sx={{\n              justifyContent: 'flex-start',\n              gap: 0.75,\n              px: 0.5,\n              py: 0.5,\n              borderRadius: 1,\n              border: 1,\n              borderColor:\n                option.value === value ? 'primary.main' : 'transparent',\n              '&:hover': { backgroundColor: 'action.hover' },\n            }}\n          >\n            <TokenSwatch\n              light={option.light}\n              dark={option.dark}\n              size={18}\n              alpha={option.value === value ? amount : 1}\n            />\n            <Typography variant=\"caption\" noWrap>\n              {option.label}\n            </Typography>\n          </ButtonBase>\n        ))}\n      </Box>\n      {/* Alpha ON the token, not instead of it (AGL-2486). The value stays a\n          palette reference and the opacity rides alongside it, so a palette\n          change still reaches a 12% wash — which is the whole reason this is\n          a control here rather than a hex the author types with an alpha\n          already baked in. */}\n      {onOpacityChange ? (\n        <Box sx={{ px: 0.5, pt: 0.5 }}>\n          <Typography\n            variant=\"caption\"\n            component=\"label\"\n            color=\"text.secondary\"\n            id=\"aglyn-color-token-opacity\"\n            sx={{ display: 'block' }}\n          >\n            {`Opacity ${Math.round(amount * 100)}%`}\n          </Typography>\n          <Slider\n            size=\"small\"\n            min={0}\n            max={1}\n            step={0.01}\n            value={amount}\n            aria-labelledby=\"aglyn-color-token-opacity\"\n            onChange={(_event, next) =>\n              onOpacityChange(Array.isArray(next) ? next[0] : next)\n            }\n            sx={{ mt: -0.5 }}\n          />\n        </Box>\n      ) : null}\n      <Button size=\"small\" fullWidth sx={{ mt: 0.5 }} onClick={onCustom}>\n        Custom color…\n      </Button>\n      {onClear ? (\n        <Button\n          size=\"small\"\n          fullWidth\n          color=\"inherit\"\n          sx={{ mt: 0.25, color: 'text.secondary' }}\n          onClick={onClear}\n        >\n          Clear color\n        </Button>\n      ) : null}\n    </Paper>\n  )\n}\nColorTokenGrid.displayName = 'AglynColorTokenGrid'\n"],"names":["styled","useTheme","Box","Button","ButtonBase","Paper","Slider","Typography","alpha","muiAlpha","createContext","useContext","useMemo","COLOR_PICKER_TOKEN_PATHS","path","label","resolvePaletteToken","palette","resolved","split","reduce","node","key","undefined","buildColorTokenOptions","lightPalette","darkPalette","options","seen","Set","has","light","dark","add","push","value","ColorPickerTokensContext","displayName","useColorPickerTokenOptions","contextOptions","theme","length","scheme","mode","SWATCH_CHECKER","SWATCH_CHECKER_TILE","swatchPaint","color","opacity","TokenSwatch","shouldForwardProp","propName","size","amount","Number","isFinite","lightColor","darkColor","paint","opaque","width","height","flexShrink","display","borderRadius","border","divider","background","backgroundOrigin","backgroundRepeat","backgroundSize","rgbColorToCss","r","g","b","a","ColorTokenGrid","props","onSelect","onCustom","onClear","title","onOpacityChange","sx","p","variant","component","px","lineHeight","gridTemplateColumns","gap","map","option","aria-label","aria-pressed","onClick","event","justifyContent","py","borderColor","backgroundColor","noWrap","pt","id","Math","round","min","max","step","aria-labelledby","onChange","_event","next","Array","isArray","mt","fullWidth"],"mappings":"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"}

package/src/lib/components/color-picker.component.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2023 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 ColorPickerProps as AglynColorPickerProps } from '@aglyn/shared-ui-color-picker';
+import { type FormFieldGridProps } from '../mapper';
+import { type UseFieldApiComponentConfig } from '@data-driven-forms/react-form-renderer';
+import { type FormControlProps as MuiFormControlProps, type GridProps, type PopperProps, type TextFieldProps } from '@mui/material';
+type InternalColorPickerProps = Partial<TextFieldProps> & {
+    /** Contextual help tooltip, same contract as every other field. */
+    help?: FormFieldGridProps['help'];
+    FormFieldGridProps?: Partial<GridProps>;
+    ColorPickerProps?: Partial<AglynColorPickerProps>;
+    FormControlProps?: Partial<MuiFormControlProps>;
+    PopperProps?: Partial<PopperProps>;
+    presetColors?: string[];
+    /** Offer the reset-to-unset affordance (AGL-2486). */
+    clearable?: boolean;
+};
+export type ColorPickerProps = InternalColorPickerProps & UseFieldApiComponentConfig;
+export declare const ColorPickerComponent: import("react").ForwardRefExoticComponent<(Omit<Partial<import("@mui/material").FilledTextFieldProps> & {
+    /** Contextual help tooltip, same contract as every other field. */
+    help?: FormFieldGridProps["help"];
+    FormFieldGridProps?: Partial<GridProps>;
+    ColorPickerProps?: Partial<AglynColorPickerProps>;
+    FormControlProps?: Partial<MuiFormControlProps>;
+    PopperProps?: Partial<PopperProps>;
+    presetColors?: string[];
+    /** Offer the reset-to-unset affordance (AGL-2486). */
+    clearable?: boolean;
+} & UseFieldApiComponentConfig, "ref"> | Omit<Partial<import("@mui/material").StandardTextFieldProps> & {
+    /** Contextual help tooltip, same contract as every other field. */
+    help?: FormFieldGridProps["help"];
+    FormFieldGridProps?: Partial<GridProps>;
+    ColorPickerProps?: Partial<AglynColorPickerProps>;
+    FormControlProps?: Partial<MuiFormControlProps>;
+    PopperProps?: Partial<PopperProps>;
+    presetColors?: string[];
+    /** Offer the reset-to-unset affordance (AGL-2486). */
+    clearable?: boolean;
+} & UseFieldApiComponentConfig, "ref"> | Omit<Partial<import("@mui/material").OutlinedTextFieldProps> & {
+    /** Contextual help tooltip, same contract as every other field. */
+    help?: FormFieldGridProps["help"];
+    FormFieldGridProps?: Partial<GridProps>;
+    ColorPickerProps?: Partial<AglynColorPickerProps>;
+    FormControlProps?: Partial<MuiFormControlProps>;
+    PopperProps?: Partial<PopperProps>;
+    presetColors?: string[];
+    /** Offer the reset-to-unset affordance (AGL-2486). */
+    clearable?: boolean;
+} & UseFieldApiComponentConfig, "ref">) & import("react").RefAttributes<any>>;
+export default ColorPickerComponent;