@aglyn/aglyn 1.0.0-beta.221 → 1.0.0-beta.222

package/src/lib/app-utils/compose-reusable-components.js

@@ -21,6 +21,7 @@ import { reusablePropValueClass } from "../foundation/definitions/property-kinds
 import { COMPONENT_NODE_ID_PREFIX, COMPONENT_PROP_TOKEN_PREFIX, INSTANCE_CARRIED_NODE_FIELDS, INSTANCE_CARRIED_PROPS, NODE_HIDE_IF_PROP, NODE_HIDE_UNLESS_PROP, REUSABLE_INSTANCE_COMPONENT_ID, REUSABLE_INSTANCE_PROP_VALUES_KEY, STYLE_OVERRIDES_ROOT_KEY } from "./reusable-component-keys.js";
 import { REPEAT_DIRECTIVE_PROPS, REPEAT_SELF_PROP, repeatKey, withoutRepeatDirective } from "./expand-repeatables.js";
 import { FORM_COMPONENT_ID, FORM_ID_PROP } from "./forms.js";
+/** The Form's after-submit reveal target: a node id (`form.tsx`). */ const FORM_REVEAL_NODE_PROP = 'revealNodeId';
 import { mergeNodeSx } from "./merge-node-sx.js";
 import { hasUrlScheme, isSafeNodeUrl, NODE_URL_PROPS } from "./node-url-policy.js";
 import { readInstanceIconValue, readYesNoValue, resolveReusablePropValues } from "./reusable-prop-values.js";
@@ -37,6 +38,73 @@ const isStyleRecord = (value)=>typeof value === 'object' && value !== null && !A
         ...new Set(names)
     ].join(' ') : undefined;
 }
+/**
+ * A node's interactions, read off the node rather than through the type:
+ * `interactions` is declared on `NodeSchema`, one layer above the
+ * `AglynNodeSchema` the graft is generic over.
+ */ function interactionsOf(node) {
+    const value = node == null ? void 0 : node.interactions;
+    return Array.isArray(value) ? value : [];
+}
+/**
+ * Whether a placement says something about this prop. `undefined`, `null` and
+ * `''` say nothing: the attributes panel writes an emptied field as absent
+ * (AGL-1191), and a document saved before it did carries the empty string. A
+ * `false` or a `0` is a real setting and is kept.
+ */ function isSetOnPlacement(value) {
+    return value !== undefined && value !== null && value !== '';
+}
+/**
+ * The props a placement whose design root names the design itself (a placed
+ * form) renders with, or `undefined` when neither side has any (AGL-3494).
+ *
+ * The design root's own props are the base — the saved form's submit label,
+ * success message and settings, edited once for every page. The placement's
+ * own props go over them ONE PROP AT A TIME, and only the ones it actually
+ * sets ({@link isSetOnPlacement}), so a page that left the label alone shows
+ * the form's, and a page that wrote one keeps it. The placement's `root`
+ * attribute slice (AGL-3285), already merged into `rootProps` by the graft, is
+ * laid over last so it beats the placement's own props, as it always has.
+ *
+ * Classes are joined rather than replaced, the design root's first, for the
+ * reason the instance merge joins them: the show/hide steps toggle a class on
+ * the element, and either author may have named one.
+ *
+ * Exported for the spec that pins the merge; the graft is its only caller.
+ */ export function placementPropsOverRoot(rootProps, placementProps, rootAttrs) {
+    const base = rootProps != null ? rootProps : undefined;
+    const own = placementProps != null ? placementProps : {};
+    if (base === undefined && placementProps === undefined && !rootAttrs) {
+        return undefined;
+    }
+    const merged = _extends({}, base != null ? base : {});
+    for (const [key, value] of Object.entries(own)){
+        // A placement's empty value never masks the form's — but where the form
+        // says nothing either, the placement's own shape is kept as it was.
+        if (isSetOnPlacement(value) || !(key in merged)) merged[key] = value;
+    }
+    const className = joinClassNames(base == null ? void 0 : base['className'], own['className']);
+    if (className) merged['className'] = className;
+    if (rootAttrs) Object.assign(merged, rootAttrs);
+    return merged;
+}
+/**
+ * The design root's props with an after-submit reveal target that names one of
+ * the design's own nodes pointed at that node's grafted id (AGL-3494).
+ *
+ * A form's own besigner can only pick a reveal target from the form's design,
+ * so the stored id is a design id, and every design node is renamed by the
+ * graft (`cmp__{instance}__{id}`). Left as stored, the reveal would look for an
+ * element no page has. The root itself is unwrapped onto the placement, so a
+ * reveal of the root names the placement's id.
+ */ function revealTargetInPlacement(rootProps, definition, prefixId, instanceId) {
+    const props = rootProps;
+    const target = props == null ? void 0 : props[FORM_REVEAL_NODE_PROP];
+    if (typeof target !== 'string' || !definition.nodes[target]) return rootProps;
+    return _extends({}, props, {
+        [FORM_REVEAL_NODE_PROP]: target === definition.rootId ? instanceId : prefixId(target)
+    });
+}
 /**
  * Whether a node is a placed form that names a form entity — the second kind
  * of node that stands for a tree stored on another document (see
@@ -1019,14 +1087,15 @@ function hasVisibilityDirective(props) {
        * design always take this shape, so for forms this branch is the normal
        * path rather than the exception.
        *
-       * The instance keeps its own props: it is the node the page authored,
-       * carrying the id everything else resolves against.
+       * The instance keeps its own id and place: it is the node the page
+       * authored, carrying the id everything else resolves against. What it
+       * DRAWS is the design root's, with the placement's own settings on top
+       * (AGL-3494) — see {@link placementPropsOverRoot}.
        */ const graftedRootId = prefixId(definition.rootId);
             const definitionRoot = definition.nodes[definition.rootId];
             const rootNamesItself = Boolean(grafting) && refIdOf(definitionRoot) === grafting;
             const graftedRoot = next[graftedRootId];
             if (rootNamesItself && graftedRoot) {
-                var _instanceNode_props;
                 const adopted = Array.isArray(graftedRoot.nodes) ? graftedRoot.nodes : [];
                 for (const childId of adopted){
                     if (next[childId]) {
@@ -1037,23 +1106,48 @@ function hasVisibilityDirective(props) {
                 }
                 delete next[graftedRootId];
                 /*
-         * The root's own override slices land on the instance, because the
-         * instance IS the root here (AGL-3285). The grafted root carried them
-         * and has just been dropped; without this a placed form's `root`
-         * target would save and never render. Same precedence as the merge
-         * branch below: the slice first, the placement's own `sx` over it.
-         */ const rootSx = styleOverrides[STYLE_OVERRIDES_ROOT_KEY];
-                const rootAttrs = attrOverrides[STYLE_OVERRIDES_ROOT_KEY];
-                const unwrappedSx = rootSx ? mergeNodeSx(rootSx, instanceNode.sx) : undefined;
-                next[instanceId] = _extends({}, instanceNode, unwrappedSx === undefined ? {} : {
+         * THE DESIGN'S ROOT SETTINGS ARE THE FORM'S OWN (AGL-3494).
+         *
+         * The submit label, the success message and the root's styling are
+         * edited on the saved form, once, for every page placing it. The
+         * grafted root carries them — already with this placement's `root`
+         * override slices merged in by the graft above (AGL-3285) — so it is
+         * the base, and the placement's own settings go over it one prop at a
+         * time. A placement that never set a label shows the form's; one that
+         * did keeps showing its own, which is every placement saved before
+         * the design's settings reached the page.
+         *
+         * The `root` attribute slice is laid over once more, last, because a
+         * "Change it on this page only" edit is the most specific statement
+         * there is about this one element — the order it already had over the
+         * placement's own props before this merge existed.
+         *
+         * `sx` composes the same way `mergeNodeSx` composes it for an
+         * instance: the design root's (with the `root` slice), then the
+         * placement's own over it.
+         */ const rootAttrs = attrOverrides[STYLE_OVERRIDES_ROOT_KEY];
+                const unwrappedProps = placementPropsOverRoot(revealTargetInPlacement(graftedRoot.props, definition, prefixId, instanceId), instanceNode.props, rootAttrs);
+                const unwrappedSx = mergeNodeSx(graftedRoot.sx, instanceNode.sx);
+                const unwrappedClassName = joinClassNames(graftedRoot.className, instanceNode.className);
+                // Root's first, like the merge branch below: the form's own
+                // choreography enrolls before what this page adds.
+                const unwrappedInteractions = [
+                    ...interactionsOf(graftedRoot),
+                    ...interactionsOf(instanceNode)
+                ];
+                next[instanceId] = _extends({}, instanceNode, unwrappedProps === undefined ? {} : {
+                    props: unwrappedProps
+                }, unwrappedSx === undefined ? {} : {
                     sx: unwrappedSx
-                }, rootAttrs ? {
-                    props: _extends({}, (_instanceNode_props = instanceNode.props) != null ? _instanceNode_props : {}, rootAttrs)
+                }, unwrappedClassName ? {
+                    className: unwrappedClassName
+                } : {}, unwrappedInteractions.length ? {
+                    interactions: unwrappedInteractions
                 } : {}, {
                     nodes: adopted
                 });
             } else if (graftedRoot) {
-                var _graftedRoot_props, _instanceNode_props1;
+                var _graftedRoot_props, _instanceNode_props;
                 /*
          * THE INSTANCE AND THE DEFINITION'S ROOT ARE ONE ELEMENT (AGL-2521).
          *
@@ -1099,19 +1193,15 @@ function hasVisibilityDirective(props) {
          *
          * `interactions` is declared on `NodeSchema`, one layer above the
          * `AglynNodeSchema` this function is generic over, so both are read
-         * off the node rather than through the type.
-         */ const interactionsOf = (node)=>{
-                    const value = node == null ? void 0 : node.interactions;
-                    return Array.isArray(value) ? value : [];
-                };
-                const mergedInteractions = [
+         * off the node rather than through the type ({@link interactionsOf}).
+         */ const mergedInteractions = [
                     ...interactionsOf(graftedRoot),
                     ...interactionsOf(instanceNode)
                 ];
                 const carried = {};
                 for (const key of INSTANCE_CARRIED_PROPS){
-                    var _instanceNode_props2;
-                    const value = (_instanceNode_props2 = instanceNode.props) == null ? void 0 : _instanceNode_props2[key];
+                    var _instanceNode_props1;
+                    const value = (_instanceNode_props1 = instanceNode.props) == null ? void 0 : _instanceNode_props1[key];
                     if (value !== undefined) carried[key] = value;
                 }
                 /*
@@ -1129,8 +1219,8 @@ function hasVisibilityDirective(props) {
          */ const repeatsPlacement = repeatKey(instanceNode) !== '';
                 if (repeatsPlacement) {
                     for (const key of REPEAT_DIRECTIVE_PROPS){
-                        var _instanceNode_props3;
-                        const value = (_instanceNode_props3 = instanceNode.props) == null ? void 0 : _instanceNode_props3[key];
+                        var _instanceNode_props2;
+                        const value = (_instanceNode_props2 = instanceNode.props) == null ? void 0 : _instanceNode_props2[key];
                         if (value !== undefined) carried[key] = value;
                     }
                     carried[REPEAT_SELF_PROP] = true;
@@ -1145,7 +1235,7 @@ function hasVisibilityDirective(props) {
          * element answering to the placement's id, which after the merge is
          * this one. Keeping either list alone drops the other author's names,
          * so the two are joined, each name once, in `props` and on the node.
-         */ const propsClassName = joinClassNames((_graftedRoot_props = graftedRoot.props) == null ? void 0 : _graftedRoot_props['className'], (_instanceNode_props1 = instanceNode.props) == null ? void 0 : _instanceNode_props1['className']);
+         */ const propsClassName = joinClassNames((_graftedRoot_props = graftedRoot.props) == null ? void 0 : _graftedRoot_props['className'], (_instanceNode_props = instanceNode.props) == null ? void 0 : _instanceNode_props['className']);
                 if (propsClassName) carried['className'] = propsClassName;
                 const nodeClassName = joinClassNames(graftedRoot.className, instanceNode.className);
                 // The override slices and the reference are DOCUMENT state living on