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

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

@@ -0,0 +1,322 @@
+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 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 { ColorPicker as AglynColorPicker } from "@aglyn/shared-ui-color-picker";
+import { styled } from "@aglyn/shared-ui-theme";
+import { FormFieldGrid, validationError } from "../mapper/index.js";
+// Deep import rather than through the barrel: this is a sibling module in
+// the same lib and the barrel is edited by everything.
+import { buildFieldClear } from "../mapper/form-field-grid.js";
+import { useFieldApi } from "@data-driven-forms/react-form-renderer";
+import { Button, ClickAwayListener, IconButton, InputAdornment, Paper, Popper, TextField as MuiTextField } from "@mui/material";
+import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { paletteTokenToAlphaCssVar, parsePaletteTokenAlphaCssVar } from "@aglyn/shared-data-enums";
+import { ColorTokenGrid, rgbColorToCss, TokenSwatch, useColorPickerTokenOptions } from "./color-picker-tokens.js";
+/**
+ * Solid swatch for a literal colour, geometrically identical to
+ * {@link TokenSwatch}: same box, same hairline ring, so a field showing a
+ * token, a field showing a hex and an EMPTY field differ only in what fills
+ * the circle. The ring is the element's own border rather than a wrapper's,
+ * which is what keeps it concentric — a wrapper sized by its content rounds
+ * its radius against its own padded box and reads as an off-centre ellipse
+ * at this size.
+ *
+ * An unset field paints nothing and is the ring alone; `transparent` spells
+ * that out so the declaration is never emitted with an empty value.
+ */ const Swatch = styled('span', {
+    shouldForwardProp: (propName)=>propName !== 'color'
+})(({ theme, color })=>({
+        width: 22,
+        height: 22,
+        flexShrink: 0,
+        display: 'inline-flex',
+        backgroundColor: color || 'transparent',
+        borderRadius: '50%',
+        border: `1px solid ${theme.palette.divider}`
+    }));
+const TextFieldColorSwatch = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { color, token, tokenAlpha, IconButtonProps } = props, rest = _object_without_properties_loose(props, [
+        "color",
+        "token",
+        "tokenAlpha",
+        "IconButtonProps"
+    ]);
+    return /*#__PURE__*/ _jsx(InputAdornment, _extends({
+        ref: ref,
+        position: 'start'
+    }, rest, {
+        children: /*#__PURE__*/ _jsx(IconButton, _extends({
+            ref: ref,
+            edge: "start"
+        }, IconButtonProps, {
+            children: token ? /*#__PURE__*/ _jsx(TokenSwatch, {
+                light: token.light,
+                dark: token.dark,
+                alpha: tokenAlpha
+            }) : /*#__PURE__*/ _jsx(Swatch, {
+                color: color
+            })
+        }))
+    }));
+});
+TextFieldColorSwatch.displayName = 'AglynTextFieldColorSwatch';
+export const ColorPickerComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _ref, _activeToken_light;
+    const _useFieldApi = useFieldApi(props), { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, // Every other field forwards `help` to FormFieldGrid, which renders
+    // the tip. This one used to swallow it into `...rest`, so a colour
+    // field given a help tip rendered nothing at all and gave no clue
+    // why — found while adding tips to the styles panel (AGL-1220).
+    help, validateOnMount, meta, defaultValue, onChange, onBlur, onFocus, inputProps, InputProps, presetColors, clearable, FormFieldGridProps, FormControlProps, ColorPickerProps, PopperProps } = _useFieldApi, rest = _object_without_properties_loose(_useFieldApi, [
+        "input",
+        "isReadOnly",
+        "isDisabled",
+        "placeholder",
+        "isRequired",
+        "label",
+        "helperText",
+        "description",
+        "help",
+        "validateOnMount",
+        "meta",
+        "defaultValue",
+        "onChange",
+        "onBlur",
+        "onFocus",
+        "inputProps",
+        "InputProps",
+        "presetColors",
+        "clearable",
+        "FormFieldGridProps",
+        "FormControlProps",
+        "ColorPickerProps",
+        "PopperProps"
+    ]);
+    const id = `color-picker-${useId()}`;
+    const invalid = validationError(meta, validateOnMount);
+    const hasError = Boolean(invalid);
+    const value = (input == null ? void 0 : input.value) || defaultValue || '';
+    const handleChange = useCallback((value, e)=>{
+        const val = rgbColorToCss(value || '') || '';
+        (input == null ? void 0 : input.onChange) && (input == null ? void 0 : input.onChange(val));
+        (inputProps == null ? void 0 : inputProps.onChange) && (inputProps == null ? void 0 : inputProps.onChange(e, val));
+        onChange && onChange(e, val);
+    }, [
+        input,
+        inputProps,
+        onChange
+    ]);
+    const handleTextChange = useCallback((e)=>{
+        handleChange(e.target.value, e);
+    }, [
+        handleChange
+    ]);
+    const handleColorChange = useCallback((color, e)=>{
+        handleChange(color.rgb, e);
+    }, [
+        handleChange
+    ]);
+    const popperRef = useRef(null);
+    const [fieldRef, setFieldRef] = useState(null);
+    const [open, setOpen] = useState(false);
+    // Two-stage picking (AGL-588): theme token references first, the
+    // raw color picker behind an explicit "Custom color" step. A stored
+    // token path re-opens on the token stage with its swatch selected; a
+    // hex/rgb value re-opens on the custom stage. `stage` only tracks an
+    // explicit in-session choice — it resets whenever the popper opens.
+    const tokenOptions = useColorPickerTokenOptions();
+    // A token carrying an author-chosen opacity (AGL-2486). It is stored as
+    // `rgba(var(--mui-palette-primary-mainChannel, 31 41 55) / 0.12)` — still
+    // a REFERENCE, so the site palette keeps driving it — and reading it back
+    // here is what makes the picker re-open on the token with its slider at
+    // 12% instead of on the custom stage showing an opaque string.
+    const alphaToken = useMemo(()=>parsePaletteTokenAlphaCssVar(value), [
+        value
+    ]);
+    const tokenPath = alphaToken ? alphaToken.path : value;
+    const tokenAlpha = alphaToken ? alphaToken.alpha : 1;
+    const activeToken = useMemo(()=>tokenOptions.find((option)=>option.value === tokenPath), [
+        tokenOptions,
+        tokenPath
+    ]);
+    /**
+     * The value a token + opacity pair is STORED as. A fully opaque token
+     * stays the bare palette path (`primary.main`) — MUI's own sx resolution
+     * handles it, and nothing about the shipped format changes for the
+     * overwhelmingly common case. Only a real alpha reaches for the channel
+     * form.
+     */ const writeToken = useCallback((path, opacity)=>{
+        var _option_light;
+        if (!(opacity < 1)) return path;
+        const option = tokenOptions.find((entry)=>entry.value === path);
+        // The literal fallback: what the token resolves to today, so a render
+        // path that skips substitution still paints the right colour at the
+        // right opacity.
+        return paletteTokenToAlphaCssVar(path, opacity, option ? (_option_light = option.light) != null ? _option_light : option.dark : undefined);
+    }, [
+        tokenOptions
+    ]);
+    const [stage, setStage] = useState();
+    const effectiveStage = stage != null ? stage : !tokenOptions.length || value && !activeToken ? 'custom' : 'tokens';
+    const handleClickAway = useCallback((e)=>setOpen(false), []);
+    const handleFocus = useCallback((e)=>{
+        setStage(undefined);
+        setOpen(true);
+        onFocus && onFocus(e);
+    }, [
+        onFocus
+    ]);
+    const handleTokenSelect = useCallback((picked, e)=>{
+        // Keeps the opacity across a token change: an author dialling a wash
+        // to 12% and then trying it in secondary is adjusting ONE decision.
+        handleChange(writeToken(picked, tokenAlpha), e);
+        setOpen(false);
+    }, [
+        handleChange,
+        writeToken,
+        tokenAlpha
+    ]);
+    // Dragging the slider must not close the popper — this is the one control
+    // in the picker an author adjusts continuously, so it commits live like
+    // every other field in the styles panel and leaves the palette open.
+    const handleOpacityChange = useCallback((opacity)=>{
+        if (!activeToken) return;
+        handleChange(writeToken(activeToken.value, opacity), undefined);
+    }, [
+        activeToken,
+        handleChange,
+        writeToken
+    ]);
+    const startAdornment = useMemo(()=>/*#__PURE__*/ _jsx(TextFieldColorSwatch, {
+            color: value,
+            token: activeToken,
+            tokenAlpha: tokenAlpha,
+            IconButtonProps: {
+                onClick: ()=>{
+                    setStage(undefined);
+                    setOpen((prev)=>!prev);
+                }
+            }
+        }), [
+        value,
+        activeToken,
+        tokenAlpha
+    ]);
+    // The way back to "no colour" (AGL-2486). A colour picker has no empty
+    // swatch and the text box re-parses whatever is left in it, so before
+    // this there was no click anywhere in the panel that took a colour off
+    // again — only another colour.
+    const clear = buildFieldClear({
+        clearable,
+        label,
+        hasValue: value !== '' && value !== undefined && value !== null,
+        locked: Boolean(isDisabled || isReadOnly),
+        onClear: ()=>{
+            setOpen(false);
+            handleChange('', undefined);
+        }
+    });
+    return /*#__PURE__*/ _jsx(FormFieldGrid, _extends({
+        ref: ref,
+        help: help,
+        clear: clear
+    }, FormFieldGridProps, {
+        children: /*#__PURE__*/ _jsx(ClickAwayListener, {
+            onClickAway: handleClickAway,
+            children: /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx(MuiTextField, _extends({}, input, {
+                        fullWidth: true,
+                        error: hasError,
+                        helperText: invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description,
+                        disabled: isDisabled,
+                        label: label,
+                        placeholder: placeholder || 'default',
+                        required: isRequired,
+                        onChange: handleTextChange,
+                        onFocus: handleFocus,
+                        value: value,
+                        slotProps: {
+                            htmlInput: _extends({}, inputProps, {
+                                readOnly: isReadOnly
+                            }),
+                            input: _extends({
+                                startAdornment,
+                                ref: setFieldRef
+                            }, InputProps)
+                        }
+                    }, rest)),
+                    /*#__PURE__*/ _jsx(Popper, _extends({
+                        id: id,
+                        ref: popperRef,
+                        open: Boolean(fieldRef && open),
+                        anchorEl: fieldRef,
+                        sx: {
+                            zIndex: 'tooltip',
+                            maxWidth: 280
+                        },
+                        disablePortal: true
+                    }, PopperProps, {
+                        children: effectiveStage === 'tokens' ? /*#__PURE__*/ _jsx(ColorTokenGrid, {
+                            options: tokenOptions,
+                            value: tokenPath,
+                            onSelect: handleTokenSelect,
+                            onCustom: ()=>setStage('custom'),
+                            // Only once a token is picked: there is nothing to make
+                            // translucent while the field is empty, and an opacity on a
+                            // literal is already expressible through the custom
+                            // picker's own alpha channel.
+                            opacity: tokenAlpha,
+                            onOpacityChange: activeToken ? handleOpacityChange : undefined,
+                            // The picker itself offers the way back, not just the
+                            // field's corner (AGL-2486): an author who opened the
+                            // palette to change a colour is exactly the author who
+                            // wants to take it off.
+                            onClear: clear && !clear.hidden ? clear.onClear : undefined
+                        }) : /*#__PURE__*/ _jsxs(Paper, {
+                            sx: {
+                                p: 0.5
+                            },
+                            children: [
+                                tokenOptions.length ? /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    fullWidth: true,
+                                    sx: {
+                                        mb: 0.5
+                                    },
+                                    onClick: ()=>setStage('tokens'),
+                                    children: "‹ Theme colors"
+                                }) : null,
+                                /*#__PURE__*/ _jsx(AglynColorPicker, _extends({}, ColorPickerProps, {
+                                    // A token path is not parseable by the picker; seed it
+                                    // with the token's resolved color instead.
+                                    color: activeToken ? (_ref = (_activeToken_light = activeToken.light) != null ? _activeToken_light : activeToken.dark) != null ? _ref : '' : value,
+                                    onChange: handleColorChange,
+                                    presetColors: presetColors
+                                }))
+                            ]
+                        })
+                    }))
+                ]
+            })
+        })
+    }));
+});
+ColorPickerComponent.displayName = 'ColorPickerComponent';
+export default ColorPickerComponent;
+
+//# sourceMappingURL=color-picker.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/components/color-picker.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  ColorPicker as AglynColorPicker,\n  type ColorPickerProps as AglynColorPickerProps,\n} from '@aglyn/shared-ui-color-picker'\nimport { styled } from '@aglyn/shared-ui-theme'\nimport {\n  type ExtendedFieldMeta,\n  FormFieldGrid,\n  type FormFieldGridProps,\n  validationError,\n} from '../mapper'\n// Deep import rather than through the barrel: this is a sibling module in\n// the same lib and the barrel is edited by everything.\nimport { buildFieldClear } from '../mapper/form-field-grid'\nimport {\n  useFieldApi,\n  type UseFieldApiComponentConfig,\n} from '@data-driven-forms/react-form-renderer'\nimport {\n  Button,\n  ClickAwayListener,\n  type FormControlProps as MuiFormControlProps,\n  type GridProps,\n  IconButton,\n  type IconButtonProps,\n  InputAdornment,\n  type InputAdornmentProps,\n  Paper,\n  Popper,\n  type PopperProps,\n  TextField as MuiTextField,\n  type TextFieldProps,\n} from '@mui/material'\nimport {\n  type FocusEvent,\n  forwardRef,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport {\n  paletteTokenToAlphaCssVar,\n  parsePaletteTokenAlphaCssVar,\n} from '@aglyn/shared-data-enums'\nimport {\n  ColorTokenGrid,\n  type ColorPickerTokenOption,\n  rgbColorToCss,\n  type RgbColorValue,\n  TokenSwatch,\n  useColorPickerTokenOptions,\n} from './color-picker-tokens'\n\ninterface TextFieldColorSwatchProps extends Partial<InputAdornmentProps> {\n  color: string\n  /** Set when the value is a theme token — renders the split swatch. */\n  token?: ColorPickerTokenOption\n  /** Opacity the token carries, 0–1 (AGL-2486). */\n  tokenAlpha?: number\n  IconButtonProps?: Partial<IconButtonProps>\n}\n\n/**\n * Solid swatch for a literal colour, geometrically identical to\n * {@link TokenSwatch}: same box, same hairline ring, so a field showing a\n * token, a field showing a hex and an EMPTY field differ only in what fills\n * the circle. The ring is the element's own border rather than a wrapper's,\n * which is what keeps it concentric — a wrapper sized by its content rounds\n * its radius against its own padded box and reads as an off-centre ellipse\n * at this size.\n *\n * An unset field paints nothing and is the ring alone; `transparent` spells\n * that out so the declaration is never emitted with an empty value.\n */\nconst Swatch = styled('span', {\n  shouldForwardProp: (propName) => propName !== 'color',\n})<{ color: string }>(({ theme, color }) => ({\n  width: 22,\n  height: 22,\n  flexShrink: 0,\n  display: 'inline-flex',\n  backgroundColor: color || 'transparent',\n  borderRadius: '50%',\n  border: `1px solid ${theme.palette.divider}`,\n}))\n\nconst TextFieldColorSwatch = forwardRef<any, TextFieldColorSwatchProps>(\n  (props, ref) => {\n    const { color, token, tokenAlpha, IconButtonProps, ...rest } = props\n\n    return (\n      <InputAdornment ref={ref} position={'start'} {...rest}>\n        <IconButton ref={ref} edge=\"start\" {...IconButtonProps}>\n          {token ? (\n            <TokenSwatch\n              light={token.light}\n              dark={token.dark}\n              alpha={tokenAlpha}\n            />\n          ) : (\n            <Swatch color={color} />\n          )}\n        </IconButton>\n      </InputAdornment>\n    )\n  },\n)\nTextFieldColorSwatch.displayName = 'AglynTextFieldColorSwatch'\n\ntype InternalColorPickerProps = Partial<TextFieldProps> & {\n  /** Contextual help tooltip, same contract as every other field. */\n  help?: FormFieldGridProps['help']\n  FormFieldGridProps?: Partial<GridProps>\n  ColorPickerProps?: Partial<AglynColorPickerProps>\n  FormControlProps?: Partial<MuiFormControlProps>\n  PopperProps?: Partial<PopperProps>\n  presetColors?: string[]\n  /** Offer the reset-to-unset affordance (AGL-2486). */\n  clearable?: boolean\n}\n\nexport type ColorPickerProps = InternalColorPickerProps &\n  UseFieldApiComponentConfig\n\ntype RGBColor = RgbColorValue\n\nexport const ColorPickerComponent = forwardRef<any, ColorPickerProps>(\n  (props, ref) => {\n    const {\n      input,\n      isReadOnly,\n      isDisabled,\n      placeholder,\n      isRequired,\n      label,\n      helperText,\n      description,\n      // Every other field forwards `help` to FormFieldGrid, which renders\n      // the tip. This one used to swallow it into `...rest`, so a colour\n      // field given a help tip rendered nothing at all and gave no clue\n      // why — found while adding tips to the styles panel (AGL-1220).\n      help,\n      validateOnMount,\n      meta,\n      defaultValue,\n      onChange,\n      onBlur,\n      onFocus,\n      inputProps,\n      InputProps,\n      presetColors,\n      clearable,\n      FormFieldGridProps,\n      FormControlProps,\n      ColorPickerProps,\n      PopperProps,\n      ...rest\n    } = useFieldApi(props as any)\n\n    const id = `color-picker-${useId()}`\n    const invalid = validationError(meta as ExtendedFieldMeta, validateOnMount)\n    const hasError = Boolean(invalid)\n\n    const value = input?.value || defaultValue || ''\n\n    const handleChange = useCallback(\n      (value: RGBColor | string, e: any) => {\n        const val = rgbColorToCss(value || '') || ''\n        input?.onChange && input?.onChange(val)\n        inputProps?.onChange && inputProps?.onChange(e, val)\n        onChange && onChange(e, val)\n      },\n      [input, inputProps, onChange],\n    )\n\n    const handleTextChange = useCallback(\n      (e: any) => {\n        handleChange(e.target.value, e)\n      },\n      [handleChange],\n    )\n\n    const handleColorChange = useCallback(\n      (color: any, e: any) => {\n        handleChange(color.rgb, e)\n      },\n      [handleChange],\n    )\n\n    const popperRef = useRef<HTMLDivElement | null>(null)\n    const [fieldRef, setFieldRef] = useState<HTMLDivElement | null>(null)\n    const [open, setOpen] = useState(false)\n\n    // Two-stage picking (AGL-588): theme token references first, the\n    // raw color picker behind an explicit \"Custom color\" step. A stored\n    // token path re-opens on the token stage with its swatch selected; a\n    // hex/rgb value re-opens on the custom stage. `stage` only tracks an\n    // explicit in-session choice — it resets whenever the popper opens.\n    const tokenOptions = useColorPickerTokenOptions()\n    // A token carrying an author-chosen opacity (AGL-2486). It is stored as\n    // `rgba(var(--mui-palette-primary-mainChannel, 31 41 55) / 0.12)` — still\n    // a REFERENCE, so the site palette keeps driving it — and reading it back\n    // here is what makes the picker re-open on the token with its slider at\n    // 12% instead of on the custom stage showing an opaque string.\n    const alphaToken = useMemo(\n      () => parsePaletteTokenAlphaCssVar(value),\n      [value],\n    )\n    const tokenPath = alphaToken ? alphaToken.path : value\n    const tokenAlpha = alphaToken ? alphaToken.alpha : 1\n    const activeToken = useMemo(\n      () => tokenOptions.find((option) => option.value === tokenPath),\n      [tokenOptions, tokenPath],\n    )\n\n    /**\n     * The value a token + opacity pair is STORED as. A fully opaque token\n     * stays the bare palette path (`primary.main`) — MUI's own sx resolution\n     * handles it, and nothing about the shipped format changes for the\n     * overwhelmingly common case. Only a real alpha reaches for the channel\n     * form.\n     */\n    const writeToken = useCallback(\n      (path: string, opacity: number) => {\n        if (!(opacity < 1)) return path\n        const option = tokenOptions.find((entry) => entry.value === path)\n        // The literal fallback: what the token resolves to today, so a render\n        // path that skips substitution still paints the right colour at the\n        // right opacity.\n        return paletteTokenToAlphaCssVar(\n          path,\n          opacity,\n          option ? (option.light ?? option.dark) : undefined,\n        )\n      },\n      [tokenOptions],\n    )\n    const [stage, setStage] = useState<'tokens' | 'custom' | undefined>()\n    const effectiveStage =\n      stage ??\n      (!tokenOptions.length || (value && !activeToken) ? 'custom' : 'tokens')\n\n    const handleClickAway = useCallback(\n      (e: MouseEvent | TouchEvent) => setOpen(false),\n      [],\n    )\n    const handleFocus = useCallback(\n      (e: FocusEvent<HTMLInputElement>) => {\n        setStage(undefined)\n        setOpen(true)\n        onFocus && onFocus(e)\n      },\n      [onFocus],\n    )\n\n    const handleTokenSelect = useCallback(\n      (picked: string, e: any) => {\n        // Keeps the opacity across a token change: an author dialling a wash\n        // to 12% and then trying it in secondary is adjusting ONE decision.\n        handleChange(writeToken(picked, tokenAlpha), e)\n        setOpen(false)\n      },\n      [handleChange, writeToken, tokenAlpha],\n    )\n\n    // Dragging the slider must not close the popper — this is the one control\n    // in the picker an author adjusts continuously, so it commits live like\n    // every other field in the styles panel and leaves the palette open.\n    const handleOpacityChange = useCallback(\n      (opacity: number) => {\n        if (!activeToken) return\n        handleChange(writeToken(activeToken.value, opacity), undefined)\n      },\n      [activeToken, handleChange, writeToken],\n    )\n\n    const startAdornment = useMemo(\n      () => (\n        <TextFieldColorSwatch\n          color={value}\n          token={activeToken}\n          tokenAlpha={tokenAlpha}\n          IconButtonProps={{\n            onClick: () => {\n              setStage(undefined)\n              setOpen((prev) => !prev)\n            },\n          }}\n        />\n      ),\n      [value, activeToken, tokenAlpha],\n    )\n\n    // The way back to \"no colour\" (AGL-2486). A colour picker has no empty\n    // swatch and the text box re-parses whatever is left in it, so before\n    // this there was no click anywhere in the panel that took a colour off\n    // again — only another colour.\n    const clear = buildFieldClear({\n      clearable,\n      label,\n      hasValue: value !== '' && value !== undefined && value !== null,\n      locked: Boolean(isDisabled || isReadOnly),\n      onClear: () => {\n        setOpen(false)\n        handleChange('', undefined)\n      },\n    })\n\n    return (\n      <FormFieldGrid\n        ref={ref}\n        help={help}\n        clear={clear}\n        {...FormFieldGridProps}\n      >\n        <ClickAwayListener onClickAway={handleClickAway}>\n          <div>\n            <MuiTextField\n              {...input}\n              fullWidth\n              error={hasError}\n              helperText={\n                invalid ||\n                ((meta.touched || validateOnMount) && meta.warning) ||\n                helperText ||\n                description\n              }\n              disabled={isDisabled}\n              label={label}\n              placeholder={placeholder || 'default'}\n              required={isRequired}\n              onChange={handleTextChange}\n              onFocus={handleFocus}\n              value={value}\n              slotProps={{\n                htmlInput: {\n                  ...inputProps,\n                  readOnly: isReadOnly,\n                },\n                input: {\n                  startAdornment,\n                  ref: setFieldRef,\n                  ...InputProps,\n                },\n              }}\n              {...rest}\n            />\n            <Popper\n              id={id}\n              ref={popperRef}\n              open={Boolean(fieldRef && open)}\n              anchorEl={fieldRef}\n              sx={{ zIndex: 'tooltip', maxWidth: 280 }}\n              disablePortal\n              {...PopperProps}\n            >\n              {effectiveStage === 'tokens' ? (\n                <ColorTokenGrid\n                  options={tokenOptions}\n                  value={tokenPath}\n                  onSelect={handleTokenSelect}\n                  onCustom={() => setStage('custom')}\n                  // Only once a token is picked: there is nothing to make\n                  // translucent while the field is empty, and an opacity on a\n                  // literal is already expressible through the custom\n                  // picker's own alpha channel.\n                  opacity={tokenAlpha}\n                  onOpacityChange={\n                    activeToken ? handleOpacityChange : undefined\n                  }\n                  // The picker itself offers the way back, not just the\n                  // field's corner (AGL-2486): an author who opened the\n                  // palette to change a colour is exactly the author who\n                  // wants to take it off.\n                  onClear={clear && !clear.hidden ? clear.onClear : undefined}\n                />\n              ) : (\n                <Paper sx={{ p: 0.5 }}>\n                  {tokenOptions.length ? (\n                    <Button\n                      size=\"small\"\n                      fullWidth\n                      sx={{ mb: 0.5 }}\n                      onClick={() => setStage('tokens')}\n                    >\n                      ‹ Theme colors\n                    </Button>\n                  ) : null}\n                  <AglynColorPicker\n                    {...ColorPickerProps}\n                    // A token path is not parseable by the picker; seed it\n                    // with the token's resolved color instead.\n                    color={\n                      activeToken\n                        ? (activeToken.light ?? activeToken.dark ?? '')\n                        : value\n                    }\n                    onChange={handleColorChange}\n                    presetColors={presetColors}\n                  />\n                </Paper>\n              )}\n            </Popper>\n          </div>\n        </ClickAwayListener>\n      </FormFieldGrid>\n    )\n  },\n)\nColorPickerComponent.displayName = 'ColorPickerComponent'\n\nexport default ColorPickerComponent\n"],"names":["ColorPicker","AglynColorPicker","styled","FormFieldGrid","validationError","buildFieldClear","useFieldApi","Button","ClickAwayListener","IconButton","InputAdornment","Paper","Popper","TextField","MuiTextField","forwardRef","useCallback","useId","useMemo","useRef","useState","paletteTokenToAlphaCssVar","parsePaletteTokenAlphaCssVar","ColorTokenGrid","rgbColorToCss","TokenSwatch","useColorPickerTokenOptions","Swatch","shouldForwardProp","propName","theme","color","width","height","flexShrink","display","backgroundColor","borderRadius","border","palette","divider","TextFieldColorSwatch","props","ref","token","tokenAlpha","IconButtonProps","rest","position","edge","light","dark","alpha","displayName","ColorPickerComponent","activeToken","input","isReadOnly","isDisabled","placeholder","isRequired","label","helperText","description","help","validateOnMount","meta","defaultValue","onChange","onBlur","onFocus","inputProps","InputProps","presetColors","clearable","FormFieldGridProps","FormControlProps","ColorPickerProps","PopperProps","id","invalid","hasError","Boolean","value","handleChange","e","val","handleTextChange","target","handleColorChange","rgb","popperRef","fieldRef","setFieldRef","open","setOpen","tokenOptions","alphaToken","tokenPath","path","find","option","writeToken","opacity","entry","undefined","stage","setStage","effectiveStage","length","handleClickAway","handleFocus","handleTokenSelect","picked","handleOpacityChange","startAdornment","onClick","prev","clear","hasValue","locked","onClear","onClickAway","div","fullWidth","error","touched","warning","disabled","required","slotProps","htmlInput","readOnly","anchorEl","sx","zIndex","maxWidth","disablePortal","options","onSelect","onCustom","onOpacityChange","hidden","p","size","mb"],"mappings":"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"}

package/src/lib/components/create-artifact-drawer.component.d.ts

@@ -0,0 +1,100 @@
+import { type ReactNode } from 'react';
+import { type FormTemplateRenderProps } from '../vendor/data-driven-forms';
+/**
+ * THE naming step in front of Create (AGL-700), shared by every console list
+ * surface that creates a record.
+ *
+ * ## Why it lives in a library
+ *
+ * It began in `apps/console`, which put it out of reach of the console pages
+ * that plugins ship — a plugin's console card cannot import from the app that
+ * renders it. So a plugin adding a create button had two options, both bad:
+ * an inline form stacked above its table, or a second drawer that looks
+ * almost but not quite like this one. Both are how a console comes to have
+ * three ways of creating a record.
+ *
+ * The console keeps a thin wrapper at its old path so its four existing call
+ * sites are untouched; it passes its own auth form template through
+ * {@link CreateArtifactDrawerProps.FormTemplate}.
+ *
+ * A drawer rather than a dialog on purpose: creating is a drawer, picking is
+ * a dialog (AGL-699). Editing is neither — it is the record's own page.
+ */
+export interface CreateArtifactDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    /** Drawer heading, e.g. "Create new component". */
+    title: string;
+    /** Receives the collected field values; closing is the caller's job. */
+    onSubmit: (values: Record<string, any>) => void | Promise<void>;
+    /** Extra fields appended after name and description. */
+    extraFields?: any[];
+    /** Rendered under the form when a submit fails. */
+    errorSlot?: ReactNode;
+    /**
+     * Whether to offer the shared Description box (AGL-2498).
+     *
+     * True for every artifact whose document stores one. Content collections do
+     * not: `/api/hosts/collections` filters `data` through a per-kind allowlist
+     * of `displayName` + `slug`, so a description typed here would be dropped
+     * without a word. A field the writer silently discards is worse than a field
+     * that was never offered.
+     */
+    includeDescription?: boolean;
+    /**
+     * The form's own chrome — the submit button and how the fields are laid out.
+     *
+     * Injectable because the console's version renders an auth-aware template
+     * that lives in the app and depends on the console's session hook. Defaults
+     * to {@link ArtifactFormTemplate}, which is the same layout without that
+     * dependency.
+     */
+    FormTemplate?: any;
+    /** Label on the submit button. */
+    submitLabel?: string;
+}
+/**
+ * The default chrome: the fields in a grid and one submit button.
+ *
+ * No Cancel button of its own — the drawer's app bar already carries one, and
+ * a second Cancel inside the form is the shape a reader has to think about.
+ */
+export declare const ArtifactFormTemplate: import("react").ForwardRefExoticComponent<Omit<FormTemplateRenderProps, "ref"> & import("react").RefAttributes<any>>;
+export declare function CreateArtifactDrawer(props: CreateArtifactDrawerProps): import("react").JSX.Element;
+export declare namespace CreateArtifactDrawer {
+    var displayName: string;
+}
+/**
+ * Same shape and limits the layouts drawer has used since AGL-473, so the
+ * creates across the console validate identically.
+ */
+export declare const BASE_FIELDS: ({
+    component: string;
+    name: string;
+    helperText: string;
+    type: string;
+    label: string;
+    isRequired: boolean;
+    validate: ({
+        type: string;
+        message: string;
+        threshold?: undefined;
+    } | {
+        type: string;
+        threshold: number;
+        message: string;
+    })[];
+} | {
+    component: string;
+    name: string;
+    label: string;
+    helperText: string;
+    validate: {
+        type: string;
+        threshold: number;
+        message: string;
+    }[];
+    type?: undefined;
+    isRequired?: undefined;
+})[];
+export default CreateArtifactDrawer;

package/src/lib/components/create-artifact-drawer.component.js

@@ -0,0 +1,184 @@
+/**
+ * @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 { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ICON_VARIANT_CLOSE } from "@aglyn/shared-data-enums";
+import { Container, MdiIcon, SrOnly } from "@aglyn/shared-ui-jsx";
+import { NavigationDrawerComponent } from "@aglyn/shared-ui-jsx/components/navigation-drawer.component";
+import { Box, Button, FormControl, Grid, IconButton, Typography } from "@mui/material";
+import { forwardRef } from "react";
+import { FormRenderer, FormSpy, useFormApi } from "../vendor/data-driven-forms.js";
+import { simpleComponentMapper } from "../constants/component-mappers.js";
+/**
+ * The default chrome: the fields in a grid and one submit button.
+ *
+ * No Cancel button of its own — the drawer's app bar already carries one, and
+ * a second Cancel inside the form is the shape a reader has to think about.
+ */ export const ArtifactFormTemplate = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { formFields, schema } = props, rest = _object_without_properties_loose(props, [
+        "formFields",
+        "schema"
+    ]);
+    const { handleSubmit } = useFormApi();
+    return /*#__PURE__*/ _jsxs("form", _extends({
+        ref: ref,
+        onSubmit: handleSubmit,
+        noValidate: true
+    }, rest, {
+        children: [
+            schema.title,
+            /*#__PURE__*/ _jsx(Grid, {
+                spacing: 2,
+                container: true,
+                children: formFields
+            }),
+            /*#__PURE__*/ _jsx(FormSpy, {
+                children: ({ submitting })=>{
+                    var _schema_submitLabel;
+                    return /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            mt: 2
+                        },
+                        children: /*#__PURE__*/ _jsx(FormControl, {
+                            margin: "normal",
+                            fullWidth: true,
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                color: "primary",
+                                disabled: submitting,
+                                type: "submit",
+                                variant: "contained",
+                                fullWidth: true,
+                                children: (_schema_submitLabel = schema.submitLabel) != null ? _schema_submitLabel : 'Next'
+                            })
+                        })
+                    });
+                }
+            })
+        ]
+    }));
+});
+ArtifactFormTemplate.displayName = 'ArtifactFormTemplate';
+ArtifactFormTemplate.aglyn = true;
+export function CreateArtifactDrawer(props) {
+    const { open, onClose, title, onSubmit, extraFields, errorSlot, includeDescription = true, FormTemplate = ArtifactFormTemplate, submitLabel } = props;
+    const schema = _extends({
+        fields: [
+            ...includeDescription ? BASE_FIELDS : BASE_FIELDS.filter((field)=>field.name !== 'description'),
+            ...extraFields != null ? extraFields : []
+        ]
+    }, submitLabel ? {
+        submitLabel
+    } : {});
+    return /*#__PURE__*/ _jsx(NavigationDrawerComponent, {
+        open: open,
+        anchor: "right",
+        variant: "temporary",
+        onClose: onClose,
+        AppBarProps: {
+            color: 'surface'
+        },
+        appBarLeft: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(IconButton, {
+                    color: "inherit",
+                    edge: "start",
+                    onClick: onClose,
+                    sx: {
+                        mr: 2
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: ICON_VARIANT_CLOSE.path
+                        }),
+                        /*#__PURE__*/ _jsx(SrOnly, {
+                            children: "close drawer"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h6",
+                    component: "div",
+                    children: title
+                })
+            ]
+        }),
+        appBarRight: /*#__PURE__*/ _jsx(Button, {
+            variant: "outlined",
+            color: "inherit",
+            onClick: onClose,
+            children: 'Cancel'
+        }),
+        children: /*#__PURE__*/ _jsxs(Container, {
+            gutterY: true,
+            children: [
+                /*#__PURE__*/ _jsx(FormRenderer, {
+                    FormTemplate: FormTemplate,
+                    componentMapper: simpleComponentMapper,
+                    onSubmit: onSubmit,
+                    schema: schema,
+                    subscription: {
+                        values: true
+                    },
+                    clearOnUnmount: true
+                }),
+                errorSlot
+            ]
+        })
+    });
+}
+/**
+ * Same shape and limits the layouts drawer has used since AGL-473, so the
+ * creates across the console validate identically.
+ */ export const BASE_FIELDS = [
+    {
+        component: 'text-field',
+        name: 'displayName',
+        helperText: 'Friendly name for internal reference',
+        type: 'text',
+        label: 'Display name',
+        isRequired: true,
+        validate: [
+            {
+                type: 'required',
+                message: 'Provide a display name'
+            },
+            {
+                type: 'max-length',
+                threshold: 25,
+                message: 'Must not exceed 25 characters'
+            }
+        ]
+    },
+    {
+        component: 'textarea',
+        name: 'description',
+        label: 'Description',
+        helperText: 'Brief description for internal reference',
+        validate: [
+            {
+                type: 'max-length',
+                threshold: 80,
+                message: 'Must not exceed 80 characters'
+            }
+        ]
+    }
+];
+CreateArtifactDrawer.displayName = 'CreateArtifactDrawer';
+export default CreateArtifactDrawer;
+
+//# sourceMappingURL=create-artifact-drawer.component.js.map