@jxsuite/studio 4.1.0 → 5.0.0

package/src/surfaces/settings-defs.json

@@ -0,0 +1,1363 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StudioSettingsDefs",
+  "$description": "Project Settings › Data Shapes: the project-level `$defs` editor. The left column lists the shapes and the right one edits the selected shape's fields, each field a name, a type, an optional format and whether it is required — plus the target of a reference and the children of an object. The adapter (`surfaces/settings-defs.ts`) hands in the shapes, the fields already classified, and every draft the reader is part-way through typing; `settings/defs-editor.ts` decides what a name may be and what reaches `project.json`. Nothing here reads the configuration: a document that re-read the file while drawing would be a second opinion about what one module already owns.",
+  "tagName": "section",
+  "attributes": {
+    "part": "defs"
+  },
+  "style": {
+    "$description": "What `.settings-two-col`, `.settings-list-panel`, `.settings-editor-panel`, `.settings-editor-header`, `.settings-empty-state`, `.settings-inline-form`, `.schema-field-list`, `.schema-field-card`, `.schema-field-row`, `.schema-field-nested`, `.schema-field-name-input`, `.schema-nested-add`, `.schema-add-field` and `.settings-section-title` said in `styles/overlays.css`, keyed on `part` and re-pointed at the studio token layer. NONE of those rules is deleted from the stylesheet: `settings/contributed-section.ts` draws the same two-column editor and `ui/form-controls.ts` draws the same field cards, both still lit, so this document carries its own copy of each until they convert. Two values could not come with them. `.settings-editor-header h3` read `var(--spectrum-font-size-100, 14px)` and `.schema-field-card--nested` read `var(--spectrum-gray-300, #444)`, and a document is mounted in the pane rather than inside `<sp-theme>`, so both would have taken their hard-coded fallback every time; they are the kit's `--jx-text-lg` and the studio layer's `--border`.",
+    "display": "block",
+    "& [part=\"title\"]": {
+      "margin": "0 0 16px",
+      "fontSize": "16px",
+      "fontWeight": "600",
+      "color": "var(--fg)"
+    },
+    "& [part=\"columns\"]": {
+      "$description": "The 1px gap over the border colour is the divider between the two columns: two panels on `--bg-panel` with `--border` showing through the gap, so nothing draws a rule of its own.",
+      "display": "flex",
+      "height": "100%",
+      "gap": "1px",
+      "background": "var(--border)"
+    },
+    "& [part=\"list\"]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "gap": "4px",
+      "padding": "12px",
+      "width": "200px",
+      "minWidth": "200px",
+      "background": "var(--bg-panel)",
+      "overflowY": "auto"
+    },
+    "& [part=\"shape\"], & [part=\"new-open\"]": {
+      "width": "100%"
+    },
+    "& [part=\"shape\"] > [part=\"control\"], & [part=\"new-open\"] > [part=\"control\"]": {
+      "$description": "`.settings-list-panel sp-action-button` said `width: 100%; justify-content: flex-start`, and both halves belong to the button the row is made of rather than to the row: a kit action button centres its glyph and its label, which reads as a list of centred names.",
+      "width": "100%",
+      "justifyContent": "flex-start"
+    },
+    "& [part=\"new-form\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "6px"
+    },
+    "& [part=\"new-field\"]": {
+      "flex": "1",
+      "minWidth": "0"
+    },
+    "& [part=\"empty\"]": {
+      "flex": "1",
+      "display": "flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "background": "var(--bg-panel)",
+      "color": "var(--fg-dim)",
+      "fontSize": "13px"
+    },
+    "& [part=\"editor\"]": {
+      "flex": "1",
+      "padding": "16px",
+      "background": "var(--bg-panel)",
+      "overflowY": "auto"
+    },
+    "& [part=\"editor-header\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "12px",
+      "marginBottom": "16px"
+    },
+    "& [part=\"editor-name\"]": {
+      "margin": "0",
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "color": "var(--fg)"
+    },
+    "& [part=\"fields\"]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "gap": "4px",
+      "marginBottom": "12px"
+    },
+    "& [part=\"card\"], & [part=\"nested-card\"]": {
+      "border": "1px solid var(--border)",
+      "borderRadius": "var(--radius)",
+      "padding": "6px 10px"
+    },
+    "& [part=\"field-row\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "8px"
+    },
+    "& [part=\"field-label\"]": {
+      "$description": "The field's name in words, which `.schema-field-label` named and no stylesheet ever styled: it was an `sp-field-label` beside the raw-key field, at whatever size Spectrum drew it. It is a caption on the row rather than a label for a control, so it says so in the type ramp and the dim colour instead of borrowing a control's typography.",
+      "flex": "none",
+      "minWidth": "84px",
+      "fontSize": "var(--jx-text-sm)",
+      "color": "var(--fg-dim)",
+      "overflowWrap": "anywhere"
+    },
+    "& [part=\"field-name\"]": {
+      "flex": "1",
+      "maxWidth": "140px"
+    },
+    "& [part=\"nested\"]": {
+      "marginLeft": "16px",
+      "marginTop": "6px",
+      "paddingLeft": "8px",
+      "borderLeft": "2px solid var(--border)",
+      "display": "flex",
+      "flexDirection": "column",
+      "gap": "4px"
+    },
+    "& [part=\"ref-target\"]": {
+      "display": "flex",
+      "marginTop": "6px",
+      "maxWidth": "220px"
+    },
+    "& [part=\"nested-add\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "6px",
+      "padding": "4px 0"
+    },
+    "& [part=\"nested-add-name\"]": {
+      "flex": "1",
+      "maxWidth": "120px"
+    },
+    "& [part=\"add-form\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "8px",
+      "padding": "8px 0"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h3",
+      "attributes": {
+        "part": "title"
+      },
+      "textContent": "Data Shapes"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "columns"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "attributes": {
+            "part": "list"
+          },
+          "children": [
+            {
+              "$prototype": "Array",
+              "items": {
+                "$ref": "#/state/shapes"
+              },
+              "key": {
+                "$ref": "$map/item/name"
+              },
+              "map": {
+                "tagName": "jx-action-button",
+                "attributes": {
+                  "part": "shape",
+                  "data-shape": "${$map.item.name}"
+                },
+                "$props": {
+                  "label": "${$map.item.name}",
+                  "selected": {
+                    "$ref": "$map/item/selected"
+                  },
+                  "quiet": true,
+                  "size": "sm"
+                },
+                "onclick": {
+                  "$prototype": "Function",
+                  "body": [
+                    {
+                      "operator": "call",
+                      "target": {
+                        "$ref": "#/state/select"
+                      },
+                      "value": [
+                        {
+                          "$ref": "$map/item/name"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                "children": [
+                  {
+                    "tagName": "span",
+                    "textContent": "${$map.item.name}"
+                  }
+                ]
+              }
+            },
+            {
+              "tagName": "div",
+              "attributes": {
+                "part": "new-slot",
+                "role": "none"
+              },
+              "style": {
+                "display": "contents"
+              },
+              "$switch": {
+                "$ref": "#/state/newState"
+              },
+              "cases": {
+                "closed": {
+                  "tagName": "jx-action-button",
+                  "attributes": {
+                    "part": "new-open"
+                  },
+                  "$props": {
+                    "label": "New Data Shape",
+                    "icon": "plus",
+                    "quiet": true,
+                    "size": "sm"
+                  },
+                  "onclick": {
+                    "$prototype": "Function",
+                    "body": [
+                      {
+                        "operator": "call",
+                        "target": {
+                          "$ref": "#/state/openNew"
+                        },
+                        "value": []
+                      }
+                    ]
+                  },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "textContent": "New Data Shape"
+                    }
+                  ]
+                },
+                "open": {
+                  "tagName": "div",
+                  "attributes": {
+                    "part": "new-form"
+                  },
+                  "children": [
+                    {
+                      "tagName": "jx-textfield",
+                      "attributes": {
+                        "part": "new-field"
+                      },
+                      "$props": {
+                        "label": "New data shape name",
+                        "placeholder": "ProductReview",
+                        "size": "sm",
+                        "value": {
+                          "$ref": "#/state/newName"
+                        }
+                      },
+                      "oninput": {
+                        "$prototype": "Function",
+                        "body": [
+                          {
+                            "operator": "call",
+                            "target": {
+                              "$ref": "#/state/editNew"
+                            },
+                            "value": [
+                              {
+                                "$ref": "event#/target/value"
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      "onkeydown": {
+                        "$prototype": "Function",
+                        "body": [
+                          {
+                            "$switch": {
+                              "$ref": "event#/key"
+                            },
+                            "cases": {
+                              "Enter": [
+                                {
+                                  "preventDefault": true
+                                },
+                                {
+                                  "operator": "call",
+                                  "target": {
+                                    "$ref": "#/state/createNew"
+                                  },
+                                  "value": []
+                                }
+                              ],
+                              "Escape": [
+                                {
+                                  "preventDefault": true
+                                },
+                                {
+                                  "operator": "call",
+                                  "target": {
+                                    "$ref": "#/state/cancelNew"
+                                  },
+                                  "value": []
+                                }
+                              ]
+                            }
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      "tagName": "jx-button",
+                      "attributes": {
+                        "part": "new-create"
+                      },
+                      "$props": {
+                        "size": "sm"
+                      },
+                      "onclick": {
+                        "$prototype": "Function",
+                        "body": [
+                          {
+                            "operator": "call",
+                            "target": {
+                              "$ref": "#/state/createNew"
+                            },
+                            "value": []
+                          }
+                        ]
+                      },
+                      "children": [
+                        {
+                          "tagName": "span",
+                          "textContent": "Create"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "attributes": {
+            "part": "editor-slot",
+            "role": "none"
+          },
+          "style": {
+            "display": "contents"
+          },
+          "$switch": {
+            "$ref": "#/state/editorState"
+          },
+          "cases": {
+            "empty": {
+              "tagName": "div",
+              "attributes": {
+                "part": "empty"
+              },
+              "textContent": "Pick a data shape on the left, or create one."
+            },
+            "editing": {
+              "tagName": "div",
+              "attributes": {
+                "part": "editor"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "attributes": {
+                    "part": "editor-header"
+                  },
+                  "children": [
+                    {
+                      "tagName": "h4",
+                      "attributes": {
+                        "part": "editor-name"
+                      },
+                      "textContent": "${state.selected}"
+                    },
+                    {
+                      "tagName": "jx-action-button",
+                      "attributes": {
+                        "part": "delete-shape"
+                      },
+                      "$props": {
+                        "label": "Delete data shape",
+                        "hint": "Delete data shape",
+                        "icon": "trash",
+                        "quiet": true,
+                        "size": "sm"
+                      },
+                      "onclick": {
+                        "$prototype": "Function",
+                        "body": [
+                          {
+                            "operator": "call",
+                            "target": {
+                              "$ref": "#/state/removeShape"
+                            },
+                            "value": []
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tagName": "div",
+                  "attributes": {
+                    "part": "fields"
+                  },
+                  "children": [
+                    {
+                      "$prototype": "Array",
+                      "items": {
+                        "$ref": "#/state/fields"
+                      },
+                      "key": {
+                        "$ref": "$map/item/key"
+                      },
+                      "map": {
+                        "tagName": "div",
+                        "attributes": {
+                          "part": "card",
+                          "data-field": "${$map.item.key}"
+                        },
+                        "children": [
+                          {
+                            "tagName": "div",
+                            "attributes": {
+                              "part": "field-row"
+                            },
+                            "children": [
+                              {
+                                "tagName": "span",
+                                "attributes": {
+                                  "part": "field-label"
+                                },
+                                "textContent": "${$map.item.label}"
+                              },
+                              {
+                                "tagName": "jx-textfield",
+                                "attributes": {
+                                  "part": "field-name"
+                                },
+                                "$props": {
+                                  "label": "Name for ${$map.item.label}",
+                                  "size": "sm",
+                                  "value": {
+                                    "$ref": "$map/item/name"
+                                  }
+                                },
+                                "onchange": {
+                                  "$prototype": "Function",
+                                  "body": [
+                                    {
+                                      "operator": "call",
+                                      "target": {
+                                        "$ref": "#/state/renameField"
+                                      },
+                                      "value": [
+                                        {
+                                          "$ref": "$map/item/key"
+                                        },
+                                        {
+                                          "$ref": "event#/target/value"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              },
+                              {
+                                "tagName": "jx-select",
+                                "attributes": {
+                                  "part": "field-type"
+                                },
+                                "$props": {
+                                  "label": "Type for ${$map.item.label}",
+                                  "size": "sm",
+                                  "options": {
+                                    "$ref": "#/state/typeOptions"
+                                  },
+                                  "value": {
+                                    "$ref": "$map/item/type"
+                                  }
+                                },
+                                "onchange": {
+                                  "$prototype": "Function",
+                                  "body": [
+                                    {
+                                      "operator": "call",
+                                      "target": {
+                                        "$ref": "#/state/setType"
+                                      },
+                                      "value": [
+                                        {
+                                          "$ref": "$map/item/key"
+                                        },
+                                        {
+                                          "$ref": "event#/target/value"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              },
+                              {
+                                "tagName": "div",
+                                "attributes": {
+                                  "part": "format-slot",
+                                  "role": "none"
+                                },
+                                "style": {
+                                  "display": "contents"
+                                },
+                                "$switch": {
+                                  "$ref": "$map/item/hasFormat"
+                                },
+                                "cases": {
+                                  "true": {
+                                    "tagName": "jx-select",
+                                    "attributes": {
+                                      "part": "field-format"
+                                    },
+                                    "$props": {
+                                      "label": "Format for ${$map.item.label}",
+                                      "size": "sm",
+                                      "options": {
+                                        "$ref": "#/state/formatOptions"
+                                      },
+                                      "value": {
+                                        "$ref": "$map/item/format"
+                                      }
+                                    },
+                                    "onchange": {
+                                      "$prototype": "Function",
+                                      "body": [
+                                        {
+                                          "operator": "call",
+                                          "target": {
+                                            "$ref": "#/state/setFormat"
+                                          },
+                                          "value": [
+                                            {
+                                              "$ref": "$map/item/key"
+                                            },
+                                            {
+                                              "$ref": "event#/target/value"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              },
+                              {
+                                "tagName": "jx-switch",
+                                "$description": "Whether the shape requires this field. The word on screen is the name: `Req` is slotted rather than passed as `label`, because the kit's switch wraps its control in the label the slot lands in, and a second name would be announced over the top of it. Which row it belongs to is the tooltip's job instead, which is what `hint` is.",
+                                "attributes": {
+                                  "part": "field-required"
+                                },
+                                "$props": {
+                                  "hint": "Require ${$map.item.label}",
+                                  "size": "sm",
+                                  "checked": {
+                                    "$ref": "$map/item/required"
+                                  }
+                                },
+                                "onchange": {
+                                  "$prototype": "Function",
+                                  "body": [
+                                    {
+                                      "operator": "call",
+                                      "target": {
+                                        "$ref": "#/state/setRequired"
+                                      },
+                                      "value": [
+                                        {
+                                          "$ref": "$map/item/key"
+                                        },
+                                        {
+                                          "$ref": "event#/target/checked"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                "children": [
+                                  {
+                                    "tagName": "span",
+                                    "textContent": "Req"
+                                  }
+                                ]
+                              },
+                              {
+                                "tagName": "jx-action-button",
+                                "attributes": {
+                                  "part": "field-delete"
+                                },
+                                "$props": {
+                                  "label": "Delete ${$map.item.label}",
+                                  "hint": "Delete ${$map.item.label}",
+                                  "icon": "trash",
+                                  "quiet": true,
+                                  "size": "sm"
+                                },
+                                "onclick": {
+                                  "$prototype": "Function",
+                                  "body": [
+                                    {
+                                      "operator": "call",
+                                      "target": {
+                                        "$ref": "#/state/removeField"
+                                      },
+                                      "value": [
+                                        {
+                                          "$ref": "$map/item/key"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              }
+                            ]
+                          },
+                          {
+                            "tagName": "div",
+                            "attributes": {
+                              "part": "extra-slot",
+                              "role": "none"
+                            },
+                            "style": {
+                              "display": "contents"
+                            },
+                            "$switch": {
+                              "$ref": "$map/item/extra"
+                            },
+                            "cases": {
+                              "reference": {
+                                "tagName": "div",
+                                "attributes": {
+                                  "part": "ref-target"
+                                },
+                                "children": [
+                                  {
+                                    "tagName": "jx-select",
+                                    "attributes": {
+                                      "part": "ref-target-select"
+                                    },
+                                    "$props": {
+                                      "label": "Target for ${$map.item.label}",
+                                      "size": "sm",
+                                      "options": {
+                                        "$ref": "#/state/targets"
+                                      },
+                                      "value": {
+                                        "$ref": "$map/item/refTarget"
+                                      }
+                                    },
+                                    "onchange": {
+                                      "$prototype": "Function",
+                                      "body": [
+                                        {
+                                          "operator": "call",
+                                          "target": {
+                                            "$ref": "#/state/setTarget"
+                                          },
+                                          "value": [
+                                            {
+                                              "$ref": "$map/item/key"
+                                            },
+                                            {
+                                              "$ref": "event#/target/value"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  }
+                                ]
+                              },
+                              "nested": {
+                                "tagName": "div",
+                                "attributes": {
+                                  "part": "nested"
+                                },
+                                "children": [
+                                  {
+                                    "$prototype": "Array",
+                                    "items": {
+                                      "$ref": "$map/item/children"
+                                    },
+                                    "key": {
+                                      "$ref": "$map/item/key"
+                                    },
+                                    "map": {
+                                      "tagName": "div",
+                                      "attributes": {
+                                        "part": "nested-card",
+                                        "data-nested": "${$map.item.key}"
+                                      },
+                                      "children": [
+                                        {
+                                          "tagName": "div",
+                                          "attributes": {
+                                            "part": "field-row"
+                                          },
+                                          "children": [
+                                            {
+                                              "tagName": "jx-textfield",
+                                              "attributes": {
+                                                "part": "field-name"
+                                              },
+                                              "$props": {
+                                                "label": "Name for ${$map.item.parent}.${$map.item.key}",
+                                                "size": "sm",
+                                                "value": {
+                                                  "$ref": "$map/item/name"
+                                                }
+                                              },
+                                              "onchange": {
+                                                "$prototype": "Function",
+                                                "body": [
+                                                  {
+                                                    "operator": "call",
+                                                    "target": {
+                                                      "$ref": "#/state/renameNested"
+                                                    },
+                                                    "value": [
+                                                      {
+                                                        "$ref": "$map/item/parent"
+                                                      },
+                                                      {
+                                                        "$ref": "$map/item/key"
+                                                      },
+                                                      {
+                                                        "$ref": "event#/target/value"
+                                                      }
+                                                    ]
+                                                  }
+                                                ]
+                                              }
+                                            },
+                                            {
+                                              "tagName": "jx-select",
+                                              "attributes": {
+                                                "part": "field-type"
+                                              },
+                                              "$props": {
+                                                "label": "Type for ${$map.item.parent}.${$map.item.key}",
+                                                "size": "sm",
+                                                "options": {
+                                                  "$ref": "#/state/typeOptions"
+                                                },
+                                                "value": {
+                                                  "$ref": "$map/item/type"
+                                                }
+                                              },
+                                              "onchange": {
+                                                "$prototype": "Function",
+                                                "body": [
+                                                  {
+                                                    "operator": "call",
+                                                    "target": {
+                                                      "$ref": "#/state/setNestedType"
+                                                    },
+                                                    "value": [
+                                                      {
+                                                        "$ref": "$map/item/parent"
+                                                      },
+                                                      {
+                                                        "$ref": "$map/item/key"
+                                                      },
+                                                      {
+                                                        "$ref": "event#/target/value"
+                                                      }
+                                                    ]
+                                                  }
+                                                ]
+                                              }
+                                            },
+                                            {
+                                              "tagName": "div",
+                                              "attributes": {
+                                                "part": "format-slot",
+                                                "role": "none"
+                                              },
+                                              "style": {
+                                                "display": "contents"
+                                              },
+                                              "$switch": {
+                                                "$ref": "$map/item/hasFormat"
+                                              },
+                                              "cases": {
+                                                "true": {
+                                                  "tagName": "jx-select",
+                                                  "attributes": {
+                                                    "part": "field-format"
+                                                  },
+                                                  "$props": {
+                                                    "label": "Format for ${$map.item.parent}.${$map.item.key}",
+                                                    "size": "sm",
+                                                    "options": {
+                                                      "$ref": "#/state/formatOptions"
+                                                    },
+                                                    "value": {
+                                                      "$ref": "$map/item/format"
+                                                    }
+                                                  },
+                                                  "onchange": {
+                                                    "$prototype": "Function",
+                                                    "body": [
+                                                      {
+                                                        "operator": "call",
+                                                        "target": {
+                                                          "$ref": "#/state/setNestedFormat"
+                                                        },
+                                                        "value": [
+                                                          {
+                                                            "$ref": "$map/item/parent"
+                                                          },
+                                                          {
+                                                            "$ref": "$map/item/key"
+                                                          },
+                                                          {
+                                                            "$ref": "event#/target/value"
+                                                          }
+                                                        ]
+                                                      }
+                                                    ]
+                                                  }
+                                                }
+                                              }
+                                            },
+                                            {
+                                              "tagName": "jx-switch",
+                                              "attributes": {
+                                                "part": "field-required"
+                                              },
+                                              "$props": {
+                                                "hint": "Require ${$map.item.parent}.${$map.item.key}",
+                                                "size": "sm",
+                                                "checked": {
+                                                  "$ref": "$map/item/required"
+                                                }
+                                              },
+                                              "onchange": {
+                                                "$prototype": "Function",
+                                                "body": [
+                                                  {
+                                                    "operator": "call",
+                                                    "target": {
+                                                      "$ref": "#/state/setNestedRequired"
+                                                    },
+                                                    "value": [
+                                                      {
+                                                        "$ref": "$map/item/parent"
+                                                      },
+                                                      {
+                                                        "$ref": "$map/item/key"
+                                                      },
+                                                      {
+                                                        "$ref": "event#/target/checked"
+                                                      }
+                                                    ]
+                                                  }
+                                                ]
+                                              },
+                                              "children": [
+                                                {
+                                                  "tagName": "span",
+                                                  "textContent": "Req"
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "tagName": "jx-action-button",
+                                              "attributes": {
+                                                "part": "field-delete"
+                                              },
+                                              "$props": {
+                                                "label": "Delete ${$map.item.parent}.${$map.item.key}",
+                                                "hint": "Delete ${$map.item.parent}.${$map.item.key}",
+                                                "icon": "trash",
+                                                "quiet": true,
+                                                "size": "sm"
+                                              },
+                                              "onclick": {
+                                                "$prototype": "Function",
+                                                "body": [
+                                                  {
+                                                    "operator": "call",
+                                                    "target": {
+                                                      "$ref": "#/state/removeNested"
+                                                    },
+                                                    "value": [
+                                                      {
+                                                        "$ref": "$map/item/parent"
+                                                      },
+                                                      {
+                                                        "$ref": "$map/item/key"
+                                                      }
+                                                    ]
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  {
+                                    "tagName": "div",
+                                    "attributes": {
+                                      "part": "nested-add"
+                                    },
+                                    "children": [
+                                      {
+                                        "tagName": "jx-textfield",
+                                        "attributes": {
+                                          "part": "nested-add-name"
+                                        },
+                                        "$props": {
+                                          "label": "New field in ${$map.item.label}",
+                                          "placeholder": "field name",
+                                          "size": "sm",
+                                          "value": {
+                                            "$ref": "$map/item/draftName"
+                                          }
+                                        },
+                                        "oninput": {
+                                          "$prototype": "Function",
+                                          "body": [
+                                            {
+                                              "operator": "call",
+                                              "target": {
+                                                "$ref": "#/state/editDraftName"
+                                              },
+                                              "value": [
+                                                {
+                                                  "$ref": "$map/item/key"
+                                                },
+                                                {
+                                                  "$ref": "event#/target/value"
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        },
+                                        "onkeydown": {
+                                          "$prototype": "Function",
+                                          "body": [
+                                            {
+                                              "$switch": {
+                                                "$ref": "event#/key"
+                                              },
+                                              "cases": {
+                                                "Enter": [
+                                                  {
+                                                    "preventDefault": true
+                                                  },
+                                                  {
+                                                    "operator": "call",
+                                                    "target": {
+                                                      "$ref": "#/state/addNested"
+                                                    },
+                                                    "value": [
+                                                      {
+                                                        "$ref": "$map/item/key"
+                                                      }
+                                                    ]
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      {
+                                        "tagName": "jx-select",
+                                        "attributes": {
+                                          "part": "nested-add-type"
+                                        },
+                                        "$props": {
+                                          "label": "Type of the new field in ${$map.item.label}",
+                                          "size": "sm",
+                                          "options": {
+                                            "$ref": "#/state/typeOptions"
+                                          },
+                                          "value": {
+                                            "$ref": "$map/item/draftType"
+                                          }
+                                        },
+                                        "onchange": {
+                                          "$prototype": "Function",
+                                          "body": [
+                                            {
+                                              "operator": "call",
+                                              "target": {
+                                                "$ref": "#/state/editDraftType"
+                                              },
+                                              "value": [
+                                                {
+                                                  "$ref": "$map/item/key"
+                                                },
+                                                {
+                                                  "$ref": "event#/target/value"
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      {
+                                        "tagName": "jx-action-button",
+                                        "attributes": {
+                                          "part": "nested-add-button"
+                                        },
+                                        "$props": {
+                                          "label": "Add a field to ${$map.item.label}",
+                                          "hint": "Add a field to ${$map.item.label}",
+                                          "icon": "plus",
+                                          "quiet": true,
+                                          "size": "sm"
+                                        },
+                                        "onclick": {
+                                          "$prototype": "Function",
+                                          "body": [
+                                            {
+                                              "operator": "call",
+                                              "target": {
+                                                "$ref": "#/state/addNested"
+                                              },
+                                              "value": [
+                                                {
+                                                  "$ref": "$map/item/key"
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tagName": "div",
+                  "attributes": {
+                    "part": "add-slot",
+                    "role": "none"
+                  },
+                  "style": {
+                    "display": "contents"
+                  },
+                  "$switch": {
+                    "$ref": "#/state/addState"
+                  },
+                  "cases": {
+                    "closed": {
+                      "tagName": "jx-action-button",
+                      "attributes": {
+                        "part": "add-open"
+                      },
+                      "$props": {
+                        "label": "Add Field",
+                        "icon": "plus",
+                        "quiet": true,
+                        "size": "sm"
+                      },
+                      "onclick": {
+                        "$prototype": "Function",
+                        "body": [
+                          {
+                            "operator": "call",
+                            "target": {
+                              "$ref": "#/state/openAdd"
+                            },
+                            "value": []
+                          }
+                        ]
+                      },
+                      "children": [
+                        {
+                          "tagName": "span",
+                          "textContent": "Add Field"
+                        }
+                      ]
+                    },
+                    "open": {
+                      "tagName": "div",
+                      "attributes": {
+                        "part": "add-form"
+                      },
+                      "children": [
+                        {
+                          "tagName": "jx-textfield",
+                          "attributes": {
+                            "part": "add-name"
+                          },
+                          "$props": {
+                            "label": "New field name",
+                            "placeholder": "Field name",
+                            "size": "sm",
+                            "value": {
+                              "$ref": "#/state/addName"
+                            }
+                          },
+                          "oninput": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/editAddName"
+                                },
+                                "value": [
+                                  {
+                                    "$ref": "event#/target/value"
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          "onkeydown": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "$switch": {
+                                  "$ref": "event#/key"
+                                },
+                                "cases": {
+                                  "Enter": [
+                                    {
+                                      "preventDefault": true
+                                    },
+                                    {
+                                      "operator": "call",
+                                      "target": {
+                                        "$ref": "#/state/confirmAdd"
+                                      },
+                                      "value": []
+                                    }
+                                  ],
+                                  "Escape": [
+                                    {
+                                      "preventDefault": true
+                                    },
+                                    {
+                                      "operator": "call",
+                                      "target": {
+                                        "$ref": "#/state/cancelAdd"
+                                      },
+                                      "value": []
+                                    }
+                                  ]
+                                }
+                              }
+                            ]
+                          }
+                        },
+                        {
+                          "tagName": "jx-select",
+                          "attributes": {
+                            "part": "add-type"
+                          },
+                          "$props": {
+                            "label": "Type of the new field",
+                            "size": "sm",
+                            "options": {
+                              "$ref": "#/state/typeOptions"
+                            },
+                            "value": {
+                              "$ref": "#/state/addType"
+                            }
+                          },
+                          "onchange": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/editAddType"
+                                },
+                                "value": [
+                                  {
+                                    "$ref": "event#/target/value"
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        },
+                        {
+                          "tagName": "div",
+                          "attributes": {
+                            "part": "add-format-slot",
+                            "role": "none"
+                          },
+                          "style": {
+                            "display": "contents"
+                          },
+                          "$switch": {
+                            "$ref": "#/state/addHasFormat"
+                          },
+                          "cases": {
+                            "true": {
+                              "tagName": "jx-select",
+                              "attributes": {
+                                "part": "add-format"
+                              },
+                              "$props": {
+                                "label": "Format of the new field",
+                                "size": "sm",
+                                "options": {
+                                  "$ref": "#/state/formatOptions"
+                                },
+                                "value": {
+                                  "$ref": "#/state/addFormat"
+                                }
+                              },
+                              "onchange": {
+                                "$prototype": "Function",
+                                "body": [
+                                  {
+                                    "operator": "call",
+                                    "target": {
+                                      "$ref": "#/state/editAddFormat"
+                                    },
+                                    "value": [
+                                      {
+                                        "$ref": "event#/target/value"
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            }
+                          }
+                        },
+                        {
+                          "tagName": "jx-switch",
+                          "attributes": {
+                            "part": "add-required"
+                          },
+                          "$props": {
+                            "hint": "Require the new field",
+                            "size": "sm",
+                            "checked": {
+                              "$ref": "#/state/addRequired"
+                            }
+                          },
+                          "onchange": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/editAddRequired"
+                                },
+                                "value": [
+                                  {
+                                    "$ref": "event#/target/checked"
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "textContent": "Required"
+                            }
+                          ]
+                        },
+                        {
+                          "tagName": "jx-button",
+                          "attributes": {
+                            "part": "add-confirm"
+                          },
+                          "$props": {
+                            "size": "sm"
+                          },
+                          "onclick": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/confirmAdd"
+                                },
+                                "value": []
+                              }
+                            ]
+                          },
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "textContent": "Add"
+                            }
+                          ]
+                        },
+                        {
+                          "tagName": "jx-button",
+                          "attributes": {
+                            "part": "add-cancel"
+                          },
+                          "$props": {
+                            "size": "sm",
+                            "quiet": true
+                          },
+                          "onclick": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/cancelAdd"
+                                },
+                                "value": []
+                              }
+                            ]
+                          },
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "textContent": "Cancel"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ]
+}