@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/property-binding-field.component.js

@@ -0,0 +1,325 @@
+/**
+ * @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 { _ 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 { attributeFieldValueShape, matchComponentPropToken, REUSABLE_PROP_KINDS, reusablePropBindsToField, unofferedChoiceValues } from "@aglyn/aglyn";
+import { FormFieldGrid, useFieldApi } from "@aglyn/shared-ui-jsx-forms";
+import { Box, ButtonBase, TextField } from "@mui/material";
+import { forwardRef, useMemo, useState } from "react";
+import { componentPropBindingOptions } from "../hooks/use-insert-token-options.js";
+import { TOKEN_PILL_ATTR, TOKEN_PILL_GROUP_ATTR } from "../utils/token-editable-dom.js";
+import { resolveTokenLabel } from "../utils/token-segments.js";
+import { InsertTokenMenu } from "./insert-token-menu.component.js";
+import { TokenPillPopover, tokenPillContainerSx } from "./token-pill.component.js";
+/**
+ * Binding a field that has no text to type a token into.
+ *
+ * A free-text attribute has always taken `{{prop.headline}}`: the token is
+ * typed, or picked with the `{}` in the box, and substitution does the rest.
+ * A switch, a checkbox, a dropdown or an icon picker has no text to type into,
+ * so inside a reusable component it could only ever hold the component's own
+ * value — and a property of the matching kind had nothing to drive.
+ *
+ * This wraps such a field, inside a component editor only. Unbound, it is the
+ * field exactly as before, with a `{}` among its corner controls. Bound, the
+ * control gives way to the property it is bound to, drawn as the pill a text
+ * field would draw — because the control would otherwise go on showing a
+ * value the page no longer uses.
+ *
+ * The stored value is the same exact `{{prop.<name>}}` token a text field
+ * holds, so the graft needs nothing new to find it, and a binding to a
+ * property of the wrong kind is simply never offered.
+ */ /** Mapper key for {@link PropertyBindingField} (editor-internal, never persisted). */ export const PROPERTY_BINDING_FIELD_COMPONENT = 'aglyn-property-binding-field';
+/**
+ * The names of the property kinds a declared field can be bound to, in the
+ * panel's own words — `Yes / no or Checkbox` for a switch, `Color` for a color
+ * picker — for the sentences that tell an author what to add.
+ *
+ * Every kind is tried as it can be declared (bare, with answers, taking
+ * several), so a list-holding dropdown names the kinds that hold lists.
+ */ export function propertyKindsBindableTo(declared) {
+    var _labels_;
+    const labels = Object.keys(REUSABLE_PROP_KINDS).filter((type)=>[
+            {
+                type
+            },
+            {
+                type,
+                options: [
+                    {
+                        value: 'a'
+                    }
+                ]
+            },
+            {
+                type,
+                options: [
+                    {
+                        value: 'a'
+                    }
+                ],
+                settings: {
+                    isMulti: true
+                }
+            }
+        ].some((candidate)=>reusablePropBindsToField(candidate, declared))).map((type)=>REUSABLE_PROP_KINDS[type].label);
+    if (labels.length <= 1) return (_labels_ = labels[0]) != null ? _labels_ : '';
+    return `${labels.slice(0, -1).join(', ')} or ${labels[labels.length - 1]}`;
+}
+/**
+ * The field, wrapped to take a property binding when it can, or unchanged.
+ *
+ * Every field kind that holds a value can be bound (AGL-2893), to the
+ * properties that hold the same shape of value (`reusablePropBindsToField`):
+ * a switch to a Yes / no, a color picker to a Color, a dropdown that takes
+ * several answers to a property that holds several.
+ *
+ * Unchanged outside a component or layout editor, for a free-text field — it
+ * takes any property's token typed into it — for a read-only or disabled
+ * field (a control that writes an unwritable field is a lie), and whenever the
+ * control to fall back to is unknown, since a wrapper with nothing to render
+ * would blank the field.
+ */ export function withPropertyBinding(field, options) {
+    const { declaredComponent, declaredField, componentProps, control, tokenLabelContext, owner = 'component' } = options;
+    if (!componentProps || !control) return field;
+    const declared = _extends({}, declaredField != null ? declaredField : field, {
+        component: declaredComponent
+    });
+    if (attributeFieldValueShape(declared) === undefined) return field;
+    if (field['isReadOnly'] || field['isDisabled']) return field;
+    const bindable = componentProps.filter((prop)=>reusablePropBindsToField(prop, declared));
+    const kinds = propertyKindsBindableTo(declared);
+    return _extends({}, field, {
+        component: PROPERTY_BINDING_FIELD_COMPONENT,
+        bindingControl: control,
+        bindingOptions: componentPropBindingOptions(bindable, owner),
+        bindingProps: bindable,
+        bindingKinds: kinds,
+        bindingEmptyText: `This ${owner} has no ${kinds || 'matching'} properties yet. Add one ` + 'under File ▸ Properties…, then bind it here.',
+        tokenLabelContext
+    });
+}
+/** The mapper entry split into the component and the defaults it carries. */ function splitControl(control) {
+    if (!control) return {
+        Control: undefined,
+        defaults: {}
+    };
+    if (typeof control === 'object' && 'component' in control) {
+        const { component } = control, defaults = _object_without_properties_loose(control, [
+            "component"
+        ]);
+        return {
+            Control: component,
+            defaults
+        };
+    }
+    return {
+        Control: control,
+        defaults: {}
+    };
+}
+/**
+ * The bound property, drawn INSIDE a real outlined field so the label, notch,
+ * helper text and focus ring are the ones every other attribute has.
+ *
+ * The pill is a button rather than the passive span a text field draws: here
+ * it is the whole value, so it has to be reachable by keyboard, and pressing
+ * it is how the binding is changed or removed.
+ */ const BoundPropertyInput = /*#__PURE__*/ forwardRef(function BoundPropertyInput(props, ref) {
+    const { token, resolved, onOpen, fieldLabel, className, disabled, id, onFocus, onBlur, 'aria-describedby': describedBy } = props;
+    const pillAttributes = {
+        [TOKEN_PILL_ATTR]: token,
+        [TOKEN_PILL_GROUP_ATTR]: resolved.known ? resolved.group : 'unknown'
+    };
+    return /*#__PURE__*/ _jsx(Box, {
+        className: className,
+        sx: _extends({}, tokenPillContainerSx, {
+            display: 'flex',
+            alignItems: 'center'
+        }),
+        children: /*#__PURE__*/ _jsx(ButtonBase, _extends({
+            ref: ref,
+            id: id,
+            disabled: disabled,
+            "aria-describedby": describedBy,
+            "aria-label": `${fieldLabel ? `${fieldLabel}: ` : ''}bound to ${resolved.label}. Change or remove the binding`,
+            title: token,
+            onFocus: onFocus,
+            onBlur: onBlur,
+            onClick: (event)=>onOpen(event.currentTarget)
+        }, pillAttributes, {
+            children: resolved.label
+        }))
+    });
+});
+/**
+ * What a bound field says under the property it follows, and whether that is
+ * a problem.
+ *
+ * Three ways a binding can be wrong while still looking bound, each named in
+ * words an author can act on: the property is gone (it was renamed or
+ * removed, so nothing substitutes), the property is the wrong kind (a token
+ * written some other way than this field's picker), or — for a dropdown —
+ * some of the property's choices are values the dropdown does not offer.
+ */ export function describePropertyBinding(options) {
+    const { token, resolved, bindingProps, bindingKinds, fieldOptions } = options;
+    const name = matchComponentPropToken(token);
+    const prop = (bindingProps != null ? bindingProps : []).find((entry)=>(entry == null ? void 0 : entry.name) === name);
+    if (!prop) {
+        return resolved.known ? {
+            text: `${resolved.label} is not a ${bindingKinds || 'matching'} ` + 'property, so it cannot set this field. Bind one that is, or ' + 'remove the binding.',
+            error: true
+        } : {
+            text: 'This component declares no property by that name, so pages ' + 'cannot set it. Bind a property it declares, or remove the ' + 'binding.',
+            error: true
+        };
+    }
+    const unoffered = unofferedChoiceValues(prop, fieldOptions);
+    if (unoffered.length) {
+        const offered = (Array.isArray(fieldOptions) ? fieldOptions : []).map((option)=>{
+            const { value, label } = option != null ? option : {};
+            const text = String(value != null ? value : '');
+            return label != null && String(label) !== text ? `${String(label)} (${text})` : text;
+        }).filter(Boolean);
+        return {
+            text: `This field does not offer ${unoffered.join(', ')}, so a page that ` + `chooses ${unoffered.length === 1 ? 'it' : 'one of those'} gets the ` + `field's own default. Give ${resolved.label} values from: ` + `${offered.join(', ')}.`,
+            error: true
+        };
+    }
+    return {
+        text: `Each page sets this with the ${resolved.label} property.`,
+        error: false
+    };
+}
+/**
+ * The data-driven-forms field registered as
+ * {@link PROPERTY_BINDING_FIELD_COMPONENT}. The token flows through
+ * react-final-form like any other value, so the Attributes panel's debounced
+ * autosave commits a binding exactly as it commits a tick.
+ */ export function PropertyBindingField(props) {
+    var _fieldProps_FormFieldGridProps;
+    const { bindingControl, bindingOptions = [], bindingProps, bindingKinds, bindingEmptyText, tokenLabelContext = {} } = props, fieldProps = _object_without_properties_loose(props, [
+        "bindingControl",
+        "bindingOptions",
+        "bindingProps",
+        "bindingKinds",
+        "bindingEmptyText",
+        "tokenLabelContext"
+    ]);
+    const { input } = useFieldApi({
+        name: fieldProps.name
+    });
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    const [pillAnchor, setPillAnchor] = useState(null);
+    const bound = matchComponentPropToken(input.value) != null ? String(input.value).trim() : null;
+    const resolved = useMemo(()=>bound ? resolveTokenLabel(bound, tokenLabelContext) : undefined, [
+        bound,
+        tokenLabelContext
+    ]);
+    const labelText = typeof fieldProps.label === 'string' && fieldProps.label ? fieldProps.label : undefined;
+    const bind = {
+        label: bound ? `Change the property ${labelText != null ? labelText : 'this field'} is bound to` : `Bind ${labelText != null ? labelText : 'this field'} to a property`,
+        onOpen: setMenuAnchor
+    };
+    const gridProps = _extends({}, (_fieldProps_FormFieldGridProps = fieldProps.FormFieldGridProps) != null ? _fieldProps_FormFieldGridProps : {}, {
+        bind
+    });
+    const { Control, defaults } = splitControl(bindingControl);
+    const menus = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(InsertTokenMenu, {
+                anchorEl: menuAnchor,
+                open: Boolean(menuAnchor),
+                onClose: ()=>setMenuAnchor(null),
+                options: bindingOptions,
+                emptyText: bindingEmptyText,
+                onInsert: (token)=>{
+                    setMenuAnchor(null);
+                    input.onChange(token);
+                }
+            }),
+            /*#__PURE__*/ _jsx(TokenPillPopover, {
+                anchorEl: pillAnchor,
+                token: bound != null ? bound : '',
+                onClose: ()=>setPillAnchor(null),
+                onReplace: ()=>{
+                    setMenuAnchor(pillAnchor);
+                    setPillAnchor(null);
+                },
+                onRemove: ()=>{
+                    setPillAnchor(null);
+                    // Unset rather than `false` or `''`: the element goes back to its
+                    // own default, which is what it rendered before it was bound.
+                    input.onChange(undefined);
+                }
+            })
+        ]
+    });
+    if (bound && resolved) {
+        const described = describePropertyBinding({
+            token: bound,
+            resolved,
+            bindingProps,
+            bindingKinds,
+            fieldOptions: fieldProps['options']
+        });
+        return /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(FormFieldGrid, _extends({
+                    help: fieldProps.help
+                }, gridProps, {
+                    children: /*#__PURE__*/ _jsx(TextField, {
+                        fullWidth: true,
+                        label: fieldProps.label,
+                        value: "",
+                        helperText: described.text,
+                        error: described.error,
+                        slotProps: {
+                            inputLabel: {
+                                shrink: true
+                            },
+                            input: {
+                                readOnly: true,
+                                inputComponent: BoundPropertyInput,
+                                inputProps: {
+                                    token: bound,
+                                    resolved,
+                                    fieldLabel: labelText,
+                                    onOpen: setPillAnchor
+                                }
+                            }
+                        }
+                    })
+                })),
+                menus
+            ]
+        });
+    }
+    if (!Control) return null;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Control, _extends({}, defaults, fieldProps, {
+                FormFieldGridProps: gridProps
+            })),
+            menus
+        ]
+    });
+}
+PropertyBindingField.displayName = 'PropertyBindingField';
+export default PropertyBindingField;
+
+//# sourceMappingURL=property-binding-field.component.js.map

package/src/lib/components/property-binding-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/property-binding-field.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport {\n  attributeFieldValueShape,\n  type BindableAttributeField,\n  matchComponentPropToken,\n  REUSABLE_PROP_KINDS,\n  reusablePropBindsToField,\n  unofferedChoiceValues,\n} from '@aglyn/aglyn'\nimport {\n  type FieldBindAction,\n  FormFieldGrid,\n  type FormFieldGridProps,\n  useFieldApi,\n} from '@aglyn/shared-ui-jsx-forms'\nimport { Box, ButtonBase, TextField } from '@mui/material'\nimport {\n  type ComponentType,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  type ReactNode,\n  useMemo,\n  useState,\n} from 'react'\n\nimport type { BindingOption } from '../contexts/binding-picker-context'\nimport { componentPropBindingOptions } from '../hooks/use-insert-token-options'\nimport {\n  TOKEN_PILL_ATTR,\n  TOKEN_PILL_GROUP_ATTR,\n} from '../utils/token-editable-dom'\nimport {\n  type ResolvedTokenLabel,\n  resolveTokenLabel,\n  type TokenLabelContext,\n} from '../utils/token-segments'\nimport { InsertTokenMenu } from './insert-token-menu.component'\nimport { TokenPillPopover, tokenPillContainerSx } from './token-pill.component'\n\n/**\n * Binding a field that has no text to type a token into.\n *\n * A free-text attribute has always taken `{{prop.headline}}`: the token is\n * typed, or picked with the `{}` in the box, and substitution does the rest.\n * A switch, a checkbox, a dropdown or an icon picker has no text to type into,\n * so inside a reusable component it could only ever hold the component's own\n * value — and a property of the matching kind had nothing to drive.\n *\n * This wraps such a field, inside a component editor only. Unbound, it is the\n * field exactly as before, with a `{}` among its corner controls. Bound, the\n * control gives way to the property it is bound to, drawn as the pill a text\n * field would draw — because the control would otherwise go on showing a\n * value the page no longer uses.\n *\n * The stored value is the same exact `{{prop.<name>}}` token a text field\n * holds, so the graft needs nothing new to find it, and a binding to a\n * property of the wrong kind is simply never offered.\n */\n\n/** Mapper key for {@link PropertyBindingField} (editor-internal, never persisted). */\nexport const PROPERTY_BINDING_FIELD_COMPONENT = 'aglyn-property-binding-field'\n\n/**\n * The names of the property kinds a declared field can be bound to, in the\n * panel's own words — `Yes / no or Checkbox` for a switch, `Color` for a color\n * picker — for the sentences that tell an author what to add.\n *\n * Every kind is tried as it can be declared (bare, with answers, taking\n * several), so a list-holding dropdown names the kinds that hold lists.\n */\nexport function propertyKindsBindableTo(\n  declared: BindableAttributeField,\n): string {\n  const labels = (Object.keys(REUSABLE_PROP_KINDS) as Aglyn.ReusableComponentPropType[])\n    .filter((type) =>\n      [\n        { type },\n        { type, options: [{ value: 'a' }] },\n        { type, options: [{ value: 'a' }], settings: { isMulti: true } },\n      ].some((candidate) => reusablePropBindsToField(candidate, declared)),\n    )\n    .map((type) => REUSABLE_PROP_KINDS[type].label)\n  if (labels.length <= 1) return labels[0] ?? ''\n  return `${labels.slice(0, -1).join(', ')} or ${labels[labels.length - 1]}`\n}\n\n/** A component-mapper entry: a component, or `{ component, ...defaults }`. */\nexport type PropertyBindingControl =\n  | ComponentType<any>\n  | { component: ComponentType<any>; [key: string]: unknown }\n\nexport interface PropertyBindingOptions {\n  /** The attribute type the component schema declares for this field. */\n  declaredComponent: unknown\n  /**\n   * The attribute as the schema declares it, for whether it holds one value\n   * or several (`isMulti`, a checkbox's `options`). The field itself is read\n   * when this is absent.\n   */\n  declaredField?: BindableAttributeField\n  /**\n   * The props the edited component declares, or `undefined` outside a\n   * component editor — where `{{prop.*}}` resolves to nothing, so there is\n   * nothing to bind to.\n   */\n  componentProps: readonly Aglyn.ReusableComponentProp[] | null | undefined\n  /** The mapper entry this field renders with while unbound. */\n  control: PropertyBindingControl | undefined\n  /** Display-name inputs for the bound pill. */\n  tokenLabelContext?: TokenLabelContext\n  /** Whose properties these are, for what an empty picker says. */\n  owner?: 'component' | 'layout'\n}\n\n/**\n * The field, wrapped to take a property binding when it can, or unchanged.\n *\n * Every field kind that holds a value can be bound (AGL-2893), to the\n * properties that hold the same shape of value (`reusablePropBindsToField`):\n * a switch to a Yes / no, a color picker to a Color, a dropdown that takes\n * several answers to a property that holds several.\n *\n * Unchanged outside a component or layout editor, for a free-text field — it\n * takes any property's token typed into it — for a read-only or disabled\n * field (a control that writes an unwritable field is a lie), and whenever the\n * control to fall back to is unknown, since a wrapper with nothing to render\n * would blank the field.\n */\nexport function withPropertyBinding<T extends Record<string, unknown>>(\n  field: T,\n  options: PropertyBindingOptions,\n): T {\n  const {\n    declaredComponent,\n    declaredField,\n    componentProps,\n    control,\n    tokenLabelContext,\n    owner = 'component',\n  } = options\n  if (!componentProps || !control) return field\n  const declared: BindableAttributeField = {\n    ...(declaredField ?? field),\n    component: declaredComponent,\n  }\n  if (attributeFieldValueShape(declared) === undefined) return field\n  if (field['isReadOnly'] || field['isDisabled']) return field\n  const bindable = componentProps.filter((prop) =>\n    reusablePropBindsToField(prop, declared),\n  )\n  const kinds = propertyKindsBindableTo(declared)\n  return {\n    ...field,\n    component: PROPERTY_BINDING_FIELD_COMPONENT,\n    bindingControl: control,\n    bindingOptions: componentPropBindingOptions(bindable, owner),\n    bindingProps: bindable,\n    bindingKinds: kinds,\n    bindingEmptyText:\n      `This ${owner} has no ${kinds || 'matching'} properties yet. Add one ` +\n      'under File ▸ Properties…, then bind it here.',\n    tokenLabelContext,\n  }\n}\n\n/** The mapper entry split into the component and the defaults it carries. */\nfunction splitControl(control: PropertyBindingControl | undefined): {\n  Control: ComponentType<any> | undefined\n  defaults: Record<string, unknown>\n} {\n  if (!control) return { Control: undefined, defaults: {} }\n  if (typeof control === 'object' && 'component' in control) {\n    const { component, ...defaults } = control\n    return { Control: component, defaults }\n  }\n  return { Control: control as ComponentType<any>, defaults: {} }\n}\n\ninterface BoundPropertyInputProps {\n  token: string\n  resolved: ResolvedTokenLabel\n  onOpen: (anchor: HTMLElement) => void\n  /** The field's own label, so the button says what it changes. */\n  fieldLabel?: string\n  // Injected by MUI InputBase:\n  className?: string\n  disabled?: boolean\n  id?: string\n  onFocus?: (event: FocusEvent<HTMLElement>) => void\n  onBlur?: (event: FocusEvent<HTMLElement>) => void\n  'aria-describedby'?: string\n}\n\n/**\n * The bound property, drawn INSIDE a real outlined field so the label, notch,\n * helper text and focus ring are the ones every other attribute has.\n *\n * The pill is a button rather than the passive span a text field draws: here\n * it is the whole value, so it has to be reachable by keyboard, and pressing\n * it is how the binding is changed or removed.\n */\nconst BoundPropertyInput = forwardRef<HTMLButtonElement, BoundPropertyInputProps>(\n  function BoundPropertyInput(props, ref) {\n    const {\n      token,\n      resolved,\n      onOpen,\n      fieldLabel,\n      className,\n      disabled,\n      id,\n      onFocus,\n      onBlur,\n      'aria-describedby': describedBy,\n    } = props\n    const pillAttributes = {\n      [TOKEN_PILL_ATTR]: token,\n      [TOKEN_PILL_GROUP_ATTR]: resolved.known ? resolved.group : 'unknown',\n    }\n    return (\n      <Box\n        className={className}\n        sx={{ ...tokenPillContainerSx, display: 'flex', alignItems: 'center' }}\n      >\n        <ButtonBase\n          ref={ref}\n          id={id}\n          disabled={disabled}\n          aria-describedby={describedBy}\n          aria-label={`${fieldLabel ? `${fieldLabel}: ` : ''}bound to ${resolved.label}. Change or remove the binding`}\n          title={token}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onClick={(event: MouseEvent<HTMLElement>) =>\n            onOpen(event.currentTarget)\n          }\n          {...pillAttributes}\n        >\n          {resolved.label}\n        </ButtonBase>\n      </Box>\n    )\n  },\n)\n\nexport interface PropertyBindingFieldProps {\n  [key: string]: unknown\n  name: string\n  label?: ReactNode\n  help?: unknown\n  description?: ReactNode\n  helperText?: ReactNode\n  bindingControl?: PropertyBindingControl\n  bindingOptions?: BindingOption[]\n  /** The declared props this field can be bound to. */\n  bindingProps?: readonly Aglyn.ReusableComponentProp[]\n  /** Those props' kinds in the panel's words, e.g. `Choice`. */\n  bindingKinds?: string\n  bindingEmptyText?: string\n  tokenLabelContext?: TokenLabelContext\n  FormFieldGridProps?: FormFieldGridProps\n}\n\n/**\n * What a bound field says under the property it follows, and whether that is\n * a problem.\n *\n * Three ways a binding can be wrong while still looking bound, each named in\n * words an author can act on: the property is gone (it was renamed or\n * removed, so nothing substitutes), the property is the wrong kind (a token\n * written some other way than this field's picker), or — for a dropdown —\n * some of the property's choices are values the dropdown does not offer.\n */\nexport function describePropertyBinding(options: {\n  token: string\n  resolved: ResolvedTokenLabel\n  bindingProps?: readonly Aglyn.ReusableComponentProp[]\n  bindingKinds?: string\n  fieldOptions?: unknown\n}): { text: string; error: boolean } {\n  const { token, resolved, bindingProps, bindingKinds, fieldOptions } = options\n  const name = matchComponentPropToken(token)\n  const prop = (bindingProps ?? []).find((entry) => entry?.name === name)\n  if (!prop) {\n    return resolved.known\n      ? {\n          text:\n            `${resolved.label} is not a ${bindingKinds || 'matching'} ` +\n            'property, so it cannot set this field. Bind one that is, or ' +\n            'remove the binding.',\n          error: true,\n        }\n      : {\n          text:\n            'This component declares no property by that name, so pages ' +\n            'cannot set it. Bind a property it declares, or remove the ' +\n            'binding.',\n          error: true,\n        }\n  }\n  const unoffered = unofferedChoiceValues(prop, fieldOptions)\n  if (unoffered.length) {\n    const offered = (Array.isArray(fieldOptions) ? fieldOptions : [])\n      .map((option) => {\n        const { value, label } = (option ?? {}) as {\n          value?: unknown\n          label?: unknown\n        }\n        const text = String(value ?? '')\n        return label != null && String(label) !== text\n          ? `${String(label)} (${text})`\n          : text\n      })\n      .filter(Boolean)\n    return {\n      text:\n        `This field does not offer ${unoffered.join(', ')}, so a page that ` +\n        `chooses ${unoffered.length === 1 ? 'it' : 'one of those'} gets the ` +\n        `field's own default. Give ${resolved.label} values from: ` +\n        `${offered.join(', ')}.`,\n      error: true,\n    }\n  }\n  return {\n    text: `Each page sets this with the ${resolved.label} property.`,\n    error: false,\n  }\n}\n\n/**\n * The data-driven-forms field registered as\n * {@link PROPERTY_BINDING_FIELD_COMPONENT}. The token flows through\n * react-final-form like any other value, so the Attributes panel's debounced\n * autosave commits a binding exactly as it commits a tick.\n */\nexport function PropertyBindingField(props: PropertyBindingFieldProps) {\n  const {\n    bindingControl,\n    bindingOptions = [],\n    bindingProps,\n    bindingKinds,\n    bindingEmptyText,\n    tokenLabelContext = {},\n    ...fieldProps\n  } = props\n  const { input } = useFieldApi({ name: fieldProps.name } as never) as {\n    input: { value: unknown; onChange: (value: unknown) => void }\n  }\n  const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null)\n  const [pillAnchor, setPillAnchor] = useState<HTMLElement | null>(null)\n\n  const bound =\n    matchComponentPropToken(input.value) != null\n      ? String(input.value).trim()\n      : null\n  const resolved = useMemo(\n    () => (bound ? resolveTokenLabel(bound, tokenLabelContext) : undefined),\n    [bound, tokenLabelContext],\n  )\n  const labelText =\n    typeof fieldProps.label === 'string' && fieldProps.label\n      ? fieldProps.label\n      : undefined\n  const bind: FieldBindAction = {\n    label: bound\n      ? `Change the property ${labelText ?? 'this field'} is bound to`\n      : `Bind ${labelText ?? 'this field'} to a property`,\n    onOpen: setMenuAnchor,\n  }\n  const gridProps: FormFieldGridProps = {\n    ...(fieldProps.FormFieldGridProps ?? {}),\n    bind,\n  }\n\n  const { Control, defaults } = splitControl(bindingControl)\n\n  const menus = (\n    <>\n      <InsertTokenMenu\n        anchorEl={menuAnchor}\n        open={Boolean(menuAnchor)}\n        onClose={() => setMenuAnchor(null)}\n        options={bindingOptions}\n        emptyText={bindingEmptyText}\n        onInsert={(token) => {\n          setMenuAnchor(null)\n          input.onChange(token)\n        }}\n      />\n      <TokenPillPopover\n        anchorEl={pillAnchor}\n        token={bound ?? ''}\n        onClose={() => setPillAnchor(null)}\n        onReplace={() => {\n          setMenuAnchor(pillAnchor)\n          setPillAnchor(null)\n        }}\n        onRemove={() => {\n          setPillAnchor(null)\n          // Unset rather than `false` or `''`: the element goes back to its\n          // own default, which is what it rendered before it was bound.\n          input.onChange(undefined)\n        }}\n      />\n    </>\n  )\n\n  if (bound && resolved) {\n    const described = describePropertyBinding({\n      token: bound,\n      resolved,\n      bindingProps,\n      bindingKinds,\n      fieldOptions: fieldProps['options'],\n    })\n    return (\n      <>\n        <FormFieldGrid\n          help={fieldProps.help as FormFieldGridProps['help']}\n          {...gridProps}\n        >\n          <TextField\n            fullWidth\n            label={fieldProps.label}\n            value=\"\"\n            helperText={described.text}\n            error={described.error}\n            slotProps={{\n              inputLabel: { shrink: true },\n              input: {\n                readOnly: true,\n                inputComponent: BoundPropertyInput as never,\n                inputProps: {\n                  token: bound,\n                  resolved,\n                  fieldLabel: labelText,\n                  onOpen: setPillAnchor,\n                },\n              },\n            }}\n          />\n        </FormFieldGrid>\n        {menus}\n      </>\n    )\n  }\n\n  if (!Control) return null\n  return (\n    <>\n      <Control {...defaults} {...fieldProps} FormFieldGridProps={gridProps} />\n      {menus}\n    </>\n  )\n}\nPropertyBindingField.displayName = 'PropertyBindingField'\n\nexport default PropertyBindingField\n"],"names":["attributeFieldValueShape","matchComponentPropToken","REUSABLE_PROP_KINDS","reusablePropBindsToField","unofferedChoiceValues","FormFieldGrid","useFieldApi","Box","ButtonBase","TextField","forwardRef","useMemo","useState","componentPropBindingOptions","TOKEN_PILL_ATTR","TOKEN_PILL_GROUP_ATTR","resolveTokenLabel","InsertTokenMenu","TokenPillPopover","tokenPillContainerSx","PROPERTY_BINDING_FIELD_COMPONENT","propertyKindsBindableTo","declared","labels","Object","keys","filter","type","options","value","settings","isMulti","some","candidate","map","label","length","slice","join","withPropertyBinding","field","declaredComponent","declaredField","componentProps","control","tokenLabelContext","owner","component","undefined","bindable","prop","kinds","bindingControl","bindingOptions","bindingProps","bindingKinds","bindingEmptyText","splitControl","Control","defaults","BoundPropertyInput","props","ref","token","resolved","onOpen","fieldLabel","className","disabled","id","onFocus","onBlur","describedBy","pillAttributes","known","group","sx","display","alignItems","aria-describedby","aria-label","title","onClick","event","currentTarget","describePropertyBinding","fieldOptions","name","find","entry","text","error","unoffered","offered","Array","isArray","option","String","Boolean","PropertyBindingField","fieldProps","input","menuAnchor","setMenuAnchor","pillAnchor","setPillAnchor","bound","trim","labelText","bind","gridProps","FormFieldGridProps","menus","anchorEl","open","onClose","emptyText","onInsert","onChange","onReplace","onRemove","described","help","fullWidth","helperText","slotProps","inputLabel","shrink","readOnly","inputComponent","inputProps","displayName"],"mappings":"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"}

package/src/lib/components/property-values-form.component.d.ts

@@ -0,0 +1,43 @@
+import type * as Aglyn from '@aglyn/aglyn';
+import { type PropertyOwnerNoun } from './element-props-form.component';
+export interface AttributeFieldsFormProps {
+    /**
+     * Attribute fields — as a coded component would declare them, or as
+     * {@link buildPropertyField} draws a property — named for paths in
+     * `values`.
+     */
+    fields: ReadonlyArray<Record<string, unknown>>;
+    /** The values the form starts from. Later changes to this are not re-read. */
+    values?: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    /** Written into the field when a media library pick lands, by field name. */
+    mediaFields?: ReadonlySet<string>;
+}
+/**
+ * Attribute fields in a form of their own, resolved and drawn exactly as the
+ * Attributes panel draws them, reporting every change.
+ */
+export declare function AttributeFieldsForm(props: AttributeFieldsFormProps): import("react").JSX.Element;
+export interface PropertyValuesFormProps {
+    /** The properties the owner declares. */
+    declared: readonly Aglyn.ReusableComponentProp[];
+    /** Each property's value, by name. */
+    values?: Record<string, unknown>;
+    /** Every property's value, by name, after each change. */
+    onChange: (values: Record<string, unknown>) => void;
+    /**
+     * `value` for a page setting them, with each empty field falling back to
+     * the default and every condition applied; `default` for declaring those
+     * defaults.
+     */
+    role?: 'value' | 'default';
+    noun?: PropertyOwnerNoun;
+    /** Only these properties, by name; all of them when omitted. */
+    only?: readonly string[];
+}
+/**
+ * A component's or layout's properties, each edited with the control its
+ * kind names in the Attributes panel.
+ */
+export declare function PropertyValuesForm(props: PropertyValuesFormProps): import("react").JSX.Element;
+export default PropertyValuesForm;

package/src/lib/components/property-values-form.component.js

@@ -0,0 +1,223 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { canvas, components, EntityPickerContext, FieldComponentType, getKnownPluginInstallsVersion, ScreenLinkContext, subscribeKnownPluginInstalls } from "@aglyn/aglyn";
+import { useAglynSiteTheme } from "@aglyn/aglyn-node-renderer";
+import { FormRenderer, FormSpy, useFormApi } from "@aglyn/shared-ui-jsx-forms";
+import { useHostThemeDocument } from "@aglyn/shared-ui-theme";
+import { Grid } from "@mui/material";
+import { useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { MediaPickerContext } from "../contexts/media-picker-context.js";
+import useInsertTokenOptions from "../hooks/use-insert-token-options.js";
+import { buildStyleThemeScales } from "../utils/theme-scale-options.js";
+import { buildPropertyField, elementPropsComponentMapper, entityKindsForAttributes, resolveAttributeField, withNumericValueParse } from "./element-props-form.component.js";
+import { TOKEN_TEXT_FIELD_COMPONENT } from "./token-text-field.component.js";
+/**
+ * Property values edited OUTSIDE the Attributes panel, with the Attributes
+ * panel's own controls (AGL-2893): the Properties dialog's Default for each
+ * property, a kind's settings, a condition's operand, and a screen's values
+ * for the layout it renders inside.
+ *
+ * Each field is an attribute field — {@link buildPropertyField} for a
+ * property — finished by {@link resolveAttributeField} against the same site
+ * data the panel reads and drawn by `elementPropsComponentMapper`. So a Yes /
+ * no is the switch, an Icon the icon picker and a Color the color picker
+ * here exactly as they are on an instance, and nothing here can drift from
+ * the panel into a look-alike.
+ */ /** The form's nothing-to-submit: every change is reported as it happens. */ const noop = ()=>undefined;
+/** The values each change reports, compared so a re-render is not a change. */ function serialize(values) {
+    try {
+        return JSON.stringify(values != null ? values : {});
+    } catch (unused) {
+        return '';
+    }
+}
+/** Hands the parent every change, and the form API for writes from outside. */ function AttributeFieldsFormTemplate(props) {
+    const { formFields, onValues, formApiRef } = props;
+    const formApi = useFormApi();
+    formApiRef.current = formApi;
+    // The values the form opened with, so the spy's first report — the state
+    // it subscribed to, not a change — is not handed on as one.
+    const last = useRef(serialize(formApi.getState().values));
+    return /*#__PURE__*/ _jsxs("form", {
+        onSubmit: (event)=>event.preventDefault(),
+        noValidate: true,
+        children: [
+            /*#__PURE__*/ _jsx(Grid, {
+                container: true,
+                spacing: 2,
+                children: formFields
+            }),
+            /*#__PURE__*/ _jsx(FormSpy, {
+                subscription: {
+                    values: true
+                },
+                onChange: ({ values })=>{
+                    const next = serialize(values);
+                    if (next === last.current) return;
+                    last.current = next;
+                    onValues(values);
+                }
+            })
+        ]
+    });
+}
+/**
+ * Attribute fields in a form of their own, resolved and drawn exactly as the
+ * Attributes panel draws them, reporting every change.
+ */ export function AttributeFieldsForm(props) {
+    const { fields, values, onChange, mediaFields } = props;
+    const [initialValues] = useState(()=>values != null ? values : {});
+    const formApiRef = useRef(undefined);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const { screens, labels } = useContext(ScreenLinkContext);
+    const entityOptions = useContext(EntityPickerContext);
+    const { onPickMedia } = useContext(MediaPickerContext);
+    const { options: insertOptions, labelContext: tokenLabelContext } = useInsertTokenOptions(undefined);
+    const pluginInstallsVersion = useSyncExternalStore(subscribeKnownPluginInstalls, getKnownPluginInstallsVersion, getKnownPluginInstallsVersion);
+    // Ask for the entity lists these fields' pickers show (AGL-703), as the
+    // Attributes panel does for the element it edits.
+    const requestEntities = entityOptions.request;
+    useEffect(()=>{
+        if (!requestEntities) return;
+        for (const kind of entityKindsForAttributes(fields)){
+            requestEntities(kind);
+        }
+    }, [
+        fields,
+        requestEntities
+    ]);
+    // The canvas's elements, for element pickers.
+    const wantsNodes = fields.some((field)=>field['component'] === FieldComponentType.NODE_SELECT);
+    const nodeOptions = useMemo(()=>{
+        var _canvas_toJSON_nodes;
+        if (!wantsNodes) return [];
+        const canvasNodes = (_canvas_toJSON_nodes = canvas.toJSON().nodes) != null ? _canvas_toJSON_nodes : {};
+        return Object.entries(canvasNodes).filter(([id])=>Boolean(id)).map(([id, candidate])=>{
+            var _ref, _ref1;
+            var _components_getSchema, _candidate_props;
+            const displayName = (_ref = (_ref1 = (_components_getSchema = components.getSchema(candidate == null ? void 0 : candidate.componentId)) == null ? void 0 : _components_getSchema.displayName) != null ? _ref1 : candidate == null ? void 0 : candidate.componentId) != null ? _ref : 'Element';
+            const text = typeof (candidate == null ? void 0 : (_candidate_props = candidate.props) == null ? void 0 : _candidate_props.children) === 'string' ? candidate.props.children.trim().slice(0, 24) : '';
+            return {
+                value: id,
+                label: `${displayName}${text ? ` "${text}"` : ''} · ${id.slice(0, 6)}`
+            };
+        }).sort((a, b)=>a.label.localeCompare(b.label));
+    }, [
+        wantsNodes
+    ]);
+    const context = useMemo(()=>({
+            screens,
+            labels,
+            values: initialValues,
+            entityOptions,
+            nodeOptions,
+            insertOptions,
+            tokenLabelContext,
+            pluginInstallsVersion
+        }), [
+        screens,
+        labels,
+        initialValues,
+        entityOptions,
+        nodeOptions,
+        insertOptions,
+        tokenLabelContext,
+        pluginInstallsVersion
+    ]);
+    const resolved = useMemo(()=>fields.map((field)=>resolveAttributeField(field, context)).map((field)=>onPickMedia && (mediaFields == null ? void 0 : mediaFields.has(String(field['name']))) && field['component'] === TOKEN_TEXT_FIELD_COMPONENT ? _extends({}, field, {
+                onBrowseMedia: ()=>onPickMedia((value)=>{
+                        var _formApiRef_current;
+                        return (_formApiRef_current = formApiRef.current) == null ? void 0 : _formApiRef_current.change(String(field['name']), value);
+                    })
+            }) : field).filter((field)=>String(field['component']) in elementPropsComponentMapper).map(withNumericValueParse), [
+        fields,
+        context,
+        onPickMedia,
+        mediaFields
+    ]);
+    // One component for the life of the form: a template created per render
+    // would be a new component type each time, remounting every field.
+    const [Template] = useState(()=>function BoundTemplate(templateProps) {
+            return /*#__PURE__*/ _jsx(AttributeFieldsFormTemplate, _extends({}, templateProps, {
+                formApiRef: formApiRef,
+                onValues: (next)=>onChangeRef.current(next)
+            }));
+        });
+    return /*#__PURE__*/ _jsx(FormRenderer, {
+        componentMapper: elementPropsComponentMapper,
+        FormTemplate: Template,
+        initialValues: initialValues,
+        onSubmit: noop,
+        schema: {
+            fields: resolved
+        }
+    });
+}
+/** The path a property's value sits at inside this form. */ const VALUES_KEY = 'values';
+const pathOf = (name)=>`${VALUES_KEY}.${name}`;
+/**
+ * A component's or layout's properties, each edited with the control its
+ * kind names in the Attributes panel.
+ */ export function PropertyValuesForm(props) {
+    const { declared, values, onChange, role = 'value', noun = 'component', only } = props;
+    const hostThemeDoc = useHostThemeDocument();
+    const siteTheme = useAglynSiteTheme({
+        theme: hostThemeDoc
+    });
+    const themeScales = useMemo(()=>buildStyleThemeScales(siteTheme), [
+        siteTheme
+    ]);
+    const shown = useMemo(()=>declared.filter((prop)=>Boolean(prop == null ? void 0 : prop.name) && (!only || only.includes(prop.name))), [
+        declared,
+        only
+    ]);
+    const fields = useMemo(()=>shown.map((prop)=>buildPropertyField(prop, {
+                name: pathOf(prop.name),
+                role,
+                declared,
+                valuePath: pathOf,
+                noun,
+                themeScales
+            })), [
+        shown,
+        role,
+        declared,
+        noun,
+        themeScales
+    ]);
+    const mediaFields = useMemo(()=>new Set(shown.filter((prop)=>prop.type === 'image').map((prop)=>pathOf(prop.name))), [
+        shown
+    ]);
+    const [initial] = useState(()=>({
+            [VALUES_KEY]: values != null ? values : {}
+        }));
+    return /*#__PURE__*/ _jsx(AttributeFieldsForm, {
+        fields: fields,
+        values: initial,
+        mediaFields: mediaFields,
+        onChange: (next)=>{
+            var _ref;
+            return onChange((_ref = next == null ? void 0 : next[VALUES_KEY]) != null ? _ref : {});
+        }
+    });
+}
+export default PropertyValuesForm;
+
+//# sourceMappingURL=property-values-form.component.js.map