@jxsuite/studio 4.1.0 → 5.1.0

package/src/surfaces/panel-outline.json

@@ -0,0 +1,734 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StudioPanelOutline",
+  "$description": "The Navigator's Outline panel while the pane is drawing a document: the element tree, as a Jx document over the kit. The adapter hands in one flat projection per row — its badge, its name, how deep it sits, where it stands among its siblings, whether it is selected, whether it is being renamed and which verbs it may offer — so nothing here walks the document, reads the command registry or knows what a collapsed ancestor is. THE TREE IS `jx-tree`, and the eight keyboard cases and seven ARIA attributes this document used to spell out are the element's now. They were spelled out again in `files-panel.json`, which is the reason: two trees carried one keyboard contract independently, and nothing held them in agreement — ← climbed to a parent here and merely closed a directory there, Home and End existed here and not there, and neither had typeahead. What is left is what is true of THIS tree: a row is a badge and a name, a rename happens in place, and the verbs a row offers sit on a plate over its right edge. It is one panel with two bodies and this is the design half of it; `panel-stylebook-layers.json` is the other, and the two share a row vocabulary on purpose so the pane switching between them does not switch design as well.",
+  "tagName": "div",
+  "attributes": {
+    "part": "outline"
+  },
+  "style": {
+    "$description": "What `.layers-container`, `.layer-row` and their nine siblings said in `styles/panels.css`, keyed on `part` and carried here. Four Spectrum names could not come with the declarations and are the kit's instead, at the same values: `--spectrum-corner-radius-75` (2px) is `--jx-radius-xs`, `--spectrum-font-size-50` (11px) is `--jx-text-sm`, the badge's 10px is `--jx-text-xs` and the focus ring is `--jx-focus-ring`. Two colours could not at first: `--case-c` and `--slot-c` were declared on `<sp-theme>` rather than at `:root`, so each carried a `:root` token as its fallback. That day came with Spectrum's removal, and the fallbacks are gone with it: both names are declared at `:root` in `styles/tokens.json` now, at exactly the values written here as their fallbacks (`--accent` and `--success`), in the same alias idiom `--switch-c` already used. A `var()` fallback that can no longer be reached is not a safety net, it is a second answer nobody will keep in step. HALF OF THESE RULES ARE GONE, and that is `jx-tree-item` rather than an omission: the row's flex line, its one-control-height box, the hover and focus states, the selected wash and its inline-start edge, the faded dragged row, the dashed drop mark, the chevron's box, the label's ellipsis and the drag grip are all the element's — including the forced-colours redraw of the selected row, which used to be written out at the bottom of this file. THE INDENT IS STILL A VARIABLE, because this tree CAPS it: past six levels a `240px` column is all indent and no name, so `--row-indent` carries an already-capped length and overrides the element's `level`-derived padding. And the row STATES are attributes rather than classes (`ui.md` §3.1) — `aria-selected` is the only writer of the selected drawing, which is also what stops the wash and the announcement disagreeing.",
+    "display": "block",
+    "position": "relative",
+    "fontFamily": "var(--jx-font-sans)",
+    "color": "var(--fg)",
+    "& [part=\"tree\"]": {
+      "$description": "`jx-tree` declares no scrollbar of its own — one Studio tree scrolls in itself and this one scrolls in the Navigator, which also holds its toolbar — so what it needs here is the block box and this package's own text colour, which the element would otherwise take from the kit's `--jx-fg` directly and stop following the studio alias.",
+      "display": "block",
+      "color": "var(--fg)"
+    },
+    "& [part=\"row\"]": {
+      "$description": "The four things the element cannot decide for this tree. The cluster is positioned against the row, so the row is the containing block. The indent is CAPPED — `--row-indent` is already `min(depth, 6) * 16 + 8`, and overriding the element's `level`-derived padding is what keeps a depth-12 row from pushing its badge out of a 240px column. The whole row is the drag handle, so the cursor says so. And the transition is what `panels/dnd.ts` animates the drop gap with.",
+      "position": "relative",
+      "paddingInline": "var(--row-indent, var(--jx-space-3)) var(--jx-space-3)",
+      "cursor": "grab",
+      "transition": "transform 150ms ease"
+    },
+    "& [part=\"row\"][data-dragging]": {
+      "$description": "The lift is the element's; only the transition is this tree's, and it has to stop, or the dragged row animates back through every gap the rows below it open.",
+      "transition": "none"
+    },
+    "& [part=\"row\"][data-kind=\"text\"]": {
+      "$description": "A text node's line: drawn, and deliberately not a `jx-tree-item`. There is nothing to do to it — it cannot be moved, renamed, duplicated or deleted on its own — so making it a row the caret can land on would put a stop in the walk that answers to none of the verbs the walk offers. It is therefore the one line in this tree the element does not draw, and the box below is `jx-tree-item`'s own, restated: the same 24px the window reserves scroll by, and the same transparent inline-start edge, so a text line and an element line start at the same pixel.",
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-2)",
+      "blockSize": "var(--jx-control-h)",
+      "boxSizing": "border-box",
+      "borderInlineStart": "2px solid transparent",
+      "whiteSpace": "nowrap",
+      "userSelect": "none",
+      "opacity": "0.6",
+      "fontStyle": "italic"
+    },
+    "& [part=\"badge\"]": {
+      "$description": "A long custom-element tag is a badge, not a paragraph: it truncates rather than pushing the label out of a 240px column.",
+      "flex": "none",
+      "maxWidth": "12ch",
+      "overflow": "hidden",
+      "padding": "0 var(--jx-space-2)",
+      "borderRadius": "var(--jx-radius-xs)",
+      "background": "var(--tag)",
+      "color": "var(--accent-fg)",
+      "fontSize": "var(--jx-text-xs)",
+      "textOverflow": "ellipsis"
+    },
+    "& [part=\"badge\"][data-kind=\"map\"]": {
+      "background": "var(--map)",
+      "fontSize": "9px",
+      "letterSpacing": "0.5px"
+    },
+    "& [part=\"badge\"][data-kind=\"switch\"]": {
+      "background": "var(--switch-c)"
+    },
+    "& [part=\"badge\"][data-kind=\"case\"]": {
+      "maxWidth": "60px",
+      "background": "var(--case-c)",
+      "fontSize": "9px",
+      "fontStyle": "italic"
+    },
+    "& [part=\"badge\"][data-kind=\"slot\"]": {
+      "background": "var(--slot-c)"
+    },
+    "& [part=\"badge\"][data-kind=\"text\"]": {
+      "$description": "The one badge that names no tag, so it is drawn in the neutral rather than in the tag colour — and on the page background rather than on `--accent-fg`, which is white and would sit on a light grey at a contrast nobody can read in the light theme.",
+      "background": "var(--fg-dim)",
+      "color": "var(--bg)",
+      "fontSize": "9px"
+    },
+    "& [part=\"row\"][data-italic=\"true\"] [part=\"label\"]": {
+      "fontStyle": "italic"
+    },
+    "& [part=\"row\"][data-editing=\"true\"] [part=\"label\"]": {
+      "$description": "While the row is being renamed the input stands where the name was. The name itself is still the row's `label`, so it still names the row to a reader — it is only taken off the screen.",
+      "display": "none"
+    },
+    "& [part=\"title-input\"]": {
+      "$description": "Stretches into the row's content box rather than setting its own height: the row is a fixed 24px, and an input taller than that would push its borders through the rows either side.",
+      "flex": "1",
+      "minWidth": "24px",
+      "alignSelf": "stretch",
+      "boxSizing": "border-box",
+      "padding": "0 var(--jx-space-1)",
+      "border": "1px solid var(--accent)",
+      "borderRadius": "var(--jx-radius-xs)",
+      "background": "var(--bg)",
+      "color": "inherit",
+      "font": "inherit"
+    },
+    "& [part=\"title-input\"]:focus-visible": {
+      "outline": "var(--jx-focus-ring)",
+      "outlineOffset": "-1px"
+    },
+    "& [part=\"verbs\"]": {
+      "$description": "Positioned out of flow so it never contributes to the row's intrinsic width: in a 240px column, four in-flow buttons plus an indent is exactly what pushed the tree sideways. The cluster is EMPTY on every row but the selected one and the hovered one — a projection with no commands in it, not a `display: none` rule, because a hidden `jx-action-button` is still an upgraded custom element and CSS reveal would have kept the whole cost the collapse exists to remove. It is slotted into `jx-tree-item`'s `actions`, which is what stops a click on a verb from also moving the selection.",
+      "position": "absolute",
+      "right": "2px",
+      "top": "50%",
+      "transform": "translateY(-50%)",
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "0",
+      "borderRadius": "var(--jx-radius-xs)"
+    },
+    "& [part=\"verbs\"][data-state=\"shown\"]": {
+      "paddingLeft": "var(--jx-space-3)",
+      "background": "var(--bg-panel)",
+      "boxShadow": "-8px 0 8px -8px rgb(0 0 0 / 0.4)"
+    },
+    "& [part=\"action\"], & [part=\"overflow\"]": {
+      "flex": "none"
+    },
+    "& [part=\"action\"][data-destructive=\"true\"]": {
+      "color": "var(--danger)"
+    },
+    "& [part=\"empty\"]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "alignItems": "center",
+      "gap": "var(--jx-space-3)",
+      "padding": "var(--jx-space-5)",
+      "textAlign": "center",
+      "color": "var(--fg-dim)",
+      "fontSize": "var(--jx-text-md)"
+    },
+    "& [part=\"empty-message\"]": {
+      "margin": "0",
+      "maxWidth": "34ch",
+      "lineHeight": "1.5"
+    }
+  },
+  "children": [
+    {
+      "$description": "The `role=\"tree\"`, and the keyboard that used to be eight `$switch` cases under every row. `jx-tree` writes the role, the name, the roving tab stop and each row's `aria-level` / `aria-posinset` / `aria-setsize`, and it owns the walk: the arrows step the drawn rows without wrapping, `Home` and `End` reach the ends of the MODEL by way of the pads, `ArrowRight` opens a collapsed row and steps into an open one, `ArrowLeft` closes an open row and otherwise climbs to its parent, `Enter` activates, `Space` is a selection verb and a printable character is typeahead. `multiple` is on because this Outline has always accepted Ctrl-click and Shift-click, and it is also the GATE: with it off the element would resolve every modifier to a plain replace. Six events come back, and each is a decision `panels/layers-panel.ts` already owned.",
+      "tagName": "jx-tree",
+      "attributes": {
+        "part": "tree",
+        "label": "Document outline",
+        "multiple": "true",
+        "current": "${state.current}",
+        "padtop": "${state.padTop}",
+        "padbottom": "${state.padBottom}"
+      },
+      "onmouseleave": {
+        "$prototype": "Function",
+        "body": [
+          {
+            "operator": "call",
+            "target": {
+              "$ref": "#/state/hoverOut"
+            },
+            "value": []
+          }
+        ],
+        "description": "`mouseleave` on the tree rather than on each row: the pointer leaves one row for another constantly, and only leaving the TREE means no row is under it."
+      },
+      "onselect": {
+        "$prototype": "Function",
+        "body": [
+          {
+            "operator": "call",
+            "target": {
+              "$ref": "#/state/select"
+            },
+            "value": [
+              {
+                "$ref": "event#/detail/value"
+              },
+              {
+                "$ref": "event#/detail/mode"
+              }
+            ]
+          }
+        ],
+        "description": "What the reader meant by landing there: `replace`, `toggle` or `range`. An INTENT rather than a set — resolving a range means naming every row between two of them, and under windowing those are exactly the rows the DOM does not have, so the panel resolves it against the row MODEL. There is no `change` handler beside it on purpose: the element OWNS the caret and keeps it across every repaint that does not change `current`, so a second copy of it in the panel would be a variable that only ever went stale."
+      },
+      "onactivate": {
+        "$prototype": "Function",
+        "body": [
+          {
+            "operator": "call",
+            "target": {
+              "$ref": "#/state/rename"
+            },
+            "value": [
+              {
+                "$ref": "event#/detail"
+              }
+            ]
+          }
+        ],
+        "description": "`Enter` or a double click, which are one verb here: rename this row in place. F2 reaches the same verb from the row's own handler, because it is the one key the element leaves alone."
+      },
+      "onexpand": {
+        "$prototype": "Function",
+        "body": [
+          {
+            "operator": "call",
+            "target": {
+              "$ref": "#/state/expand"
+            },
+            "value": [
+              {
+                "$ref": "event#/detail/value"
+              },
+              {
+                "$ref": "event#/detail/expanded"
+              }
+            ]
+          }
+        ],
+        "description": "`ArrowRight`, `ArrowLeft` or the twisty, with ONE dispatcher between them, and the detail says the state the row should be PUT INTO — so the panel never has to work out which way a toggle was going."
+      },
+      "onmove": {
+        "$prototype": "Function",
+        "body": [
+          {
+            "operator": "call",
+            "target": {
+              "$ref": "#/state/move"
+            },
+            "value": [
+              {
+                "$ref": "event#/detail/from"
+              },
+              {
+                "$ref": "event#/detail/key"
+              }
+            ]
+          }
+        ],
+        "description": "The caret has to reach a row the window did not draw. The element knows only that the pad on that side is not zero; where the row is in the model, and how far to scroll to bring it into view, is the panel's."
+      },
+      "ontypeahead": {
+        "$prototype": "Function",
+        "body": [
+          {
+            "operator": "call",
+            "target": {
+              "$ref": "#/state/typeahead"
+            },
+            "value": [
+              {
+                "$ref": "event#/detail/from"
+              },
+              {
+                "$ref": "event#/detail/char"
+              }
+            ]
+          }
+        ],
+        "description": "A printable character, on a windowed tree. The same hand-off as `onmove` and for a sharper reason: a move off the end of the slice announces itself, and a letter never does — the element's own search over the drawn rows always answers, and in a five-thousand-node document the answer is whichever of the twenty painted rows happened to start with that letter. So the element dispatches EVERY such character and the panel answers it over the model."
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "attributes": {
+            "part": "body-slot",
+            "role": "none"
+          },
+          "style": {
+            "display": "contents"
+          },
+          "$switch": {
+            "$ref": "#/state/view"
+          },
+          "cases": {
+            "rows": {
+              "tagName": "div",
+              "attributes": {
+                "part": "rows",
+                "role": "none"
+              },
+              "style": {
+                "display": "contents"
+              },
+              "children": [
+                {
+                  "$prototype": "Array",
+                  "items": {
+                    "$ref": "#/state/rows"
+                  },
+                  "key": {
+                    "$ref": "$map/item/key"
+                  },
+                  "map": {
+                    "tagName": "div",
+                    "attributes": {
+                      "part": "row-slot",
+                      "role": "none"
+                    },
+                    "style": {
+                      "display": "contents",
+                      "--row-indent": {
+                        "$ref": "$map/item/indent"
+                      }
+                    },
+                    "$switch": {
+                      "$ref": "$map/item/kind"
+                    },
+                    "cases": {
+                      "element": {
+                        "tagName": "jx-tree-item",
+                        "attributes": {
+                          "part": "row",
+                          "data-kind": "element",
+                          "value": "${$map.item.key}",
+                          "label": "${$map.item.label}",
+                          "level": "${$map.item.level}",
+                          "posinset": "${$map.item.posInSet}",
+                          "setsize": "${$map.item.setSize}",
+                          "expanded": "${$map.item.expanded}",
+                          "selected": "${$map.item.selected}",
+                          "grip": "${$map.item.draggable}",
+                          "data-italic": "${$map.item.labelItalic}",
+                          "data-editing": "${$map.item.editing}",
+                          "data-jx-path": "${$map.item.jxPath}",
+                          "data-dnd-row": "${$map.item.dndRow}",
+                          "data-dnd-depth": "${$map.item.dndDepth}",
+                          "data-dnd-void": "${$map.item.dndVoid}",
+                          "data-dnd-expanded": "${$map.item.dndExpanded}"
+                        },
+                        "onclick": {
+                          "$prototype": "Function",
+                          "body": [
+                            {
+                              "operator": "call",
+                              "target": {
+                                "$ref": "#/state/reveal"
+                              },
+                              "value": [
+                                {
+                                  "$ref": "$map/item/key"
+                                }
+                              ]
+                            }
+                          ],
+                          "description": "A click brings the node into view on the canvas, and NOTHING else — the selection it also carries is `jx-tree`'s delegated click, which reads the modifiers off the real `MouseEvent` and answers with one `select` intent. Reveal is bound here rather than folded into that handler because an arrow key raises the same intent: a walk down the Outline that scrolled the canvas on every keystroke would be ten reveals for one glance."
+                        },
+                        "oncontextmenu": {
+                          "$ref": "#/state/contextMenu"
+                        },
+                        "onmouseenter": {
+                          "$prototype": "Function",
+                          "body": [
+                            {
+                              "operator": "call",
+                              "target": {
+                                "$ref": "#/state/hover"
+                              },
+                              "value": [
+                                {
+                                  "$ref": "$map/item/key"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        "onkeydown": {
+                          "$prototype": "Function",
+                          "body": [
+                            {
+                              "$switch": {
+                                "$ref": "event#/key"
+                              },
+                              "cases": {
+                                "F2": [
+                                  {
+                                    "preventDefault": true
+                                  },
+                                  {
+                                    "stopPropagation": true
+                                  },
+                                  {
+                                    "operator": "call",
+                                    "target": {
+                                      "$ref": "#/state/rename"
+                                    },
+                                    "value": [
+                                      {
+                                        "$ref": "$map/item/key"
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            }
+                          ],
+                          "description": "One key, and it is the one `jx-tree` deliberately does not own. The element passes every chord it has no verb for straight through — which is what keeps cut, paste, delete and this rename reachable from a focused row (WCAG 2.2 SC 2.5.7) — so F2 is answered here, against the row it was pressed on. Enter reaches the same rename through `activate`, because Enter IS the element's."
+                        },
+                        "children": [
+                          {
+                            "tagName": "span",
+                            "attributes": {
+                              "slot": "icon",
+                              "part": "badge",
+                              "data-kind": "${$map.item.badgeKind}",
+                              "title": "${$map.item.badgeTitle}"
+                            },
+                            "textContent": "${$map.item.badge}"
+                          },
+                          {
+                            "$description": "The rename, in place. It is a CASE of the row — the document draws it when the projection says this row is the one being renamed and takes it away again when the projection stops saying so — where the predecessor built the input with `document.createElement`, hid the label with an inline `display:none` and put the two back by hand on commit. It sits in `jx-tree-item`'s `status` slot, which is where the name ends, and it STOPS every event it can reach: an editable field inside a composite has to, or the tree's own typeahead moves the caret on the first letter typed and its delegated click takes the focus back on the first click into the text.",
+                            "tagName": "div",
+                            "attributes": {
+                              "slot": "status",
+                              "part": "edit-slot",
+                              "role": "none"
+                            },
+                            "style": {
+                              "display": "contents"
+                            },
+                            "$switch": {
+                              "$ref": "$map/item/editing"
+                            },
+                            "cases": {
+                              "true": {
+                                "tagName": "input",
+                                "attributes": {
+                                  "part": "title-input",
+                                  "type": "text",
+                                  "value": "${$map.item.editValue}",
+                                  "placeholder": "${$map.item.placeholder}",
+                                  "aria-label": "Rename this element"
+                                },
+                                "onclick": {
+                                  "$prototype": "Function",
+                                  "body": [
+                                    {
+                                      "stopPropagation": true
+                                    }
+                                  ]
+                                },
+                                "ondblclick": {
+                                  "$prototype": "Function",
+                                  "body": [
+                                    {
+                                      "stopPropagation": true
+                                    }
+                                  ]
+                                },
+                                "oninput": {
+                                  "$prototype": "Function",
+                                  "body": [
+                                    {
+                                      "operator": "call",
+                                      "target": {
+                                        "$ref": "#/state/editInput"
+                                      },
+                                      "value": [
+                                        {
+                                          "$ref": "event#/target/value"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                "onkeydown": {
+                                  "$prototype": "Function",
+                                  "body": [
+                                    {
+                                      "stopPropagation": true
+                                    },
+                                    {
+                                      "$switch": {
+                                        "$ref": "event#/key"
+                                      },
+                                      "cases": {
+                                        "Enter": [
+                                          {
+                                            "preventDefault": true
+                                          },
+                                          {
+                                            "operator": "call",
+                                            "target": {
+                                              "$ref": "#/state/editCommit"
+                                            }
+                                          }
+                                        ],
+                                        "Escape": [
+                                          {
+                                            "preventDefault": true
+                                          },
+                                          {
+                                            "operator": "call",
+                                            "target": {
+                                              "$ref": "#/state/editCancel"
+                                            }
+                                          }
+                                        ]
+                                      }
+                                    }
+                                  ]
+                                },
+                                "onblur": {
+                                  "$prototype": "Function",
+                                  "body": [
+                                    {
+                                      "operator": "call",
+                                      "target": {
+                                        "$ref": "#/state/editCommit"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          },
+                          {
+                            "tagName": "div",
+                            "attributes": {
+                              "slot": "actions",
+                              "part": "verbs-slot",
+                              "role": "none"
+                            },
+                            "style": {
+                              "display": "contents"
+                            },
+                            "children": [
+                              {
+                                "tagName": "span",
+                                "attributes": {
+                                  "part": "verbs",
+                                  "data-state": "${$map.item.actions}"
+                                },
+                                "children": [
+                                  {
+                                    "$prototype": "Array",
+                                    "items": {
+                                      "$ref": "$map/item/commands"
+                                    },
+                                    "key": {
+                                      "$ref": "$map/item/id"
+                                    },
+                                    "map": {
+                                      "tagName": "jx-action-button",
+                                      "attributes": {
+                                        "part": "action",
+                                        "data-command": "${$map.item.id}",
+                                        "data-destructive": "${$map.item.destructive}"
+                                      },
+                                      "$props": {
+                                        "label": {
+                                          "$ref": "$map/item/title"
+                                        },
+                                        "hint": {
+                                          "$ref": "$map/item/tooltip"
+                                        },
+                                        "icon": {
+                                          "$ref": "$map/item/icon"
+                                        },
+                                        "disabled": {
+                                          "$ref": "$map/item/disabled"
+                                        },
+                                        "size": "sm",
+                                        "quiet": true
+                                      },
+                                      "onclick": {
+                                        "$prototype": "Function",
+                                        "body": [
+                                          {
+                                            "stopPropagation": true
+                                          },
+                                          {
+                                            "operator": "call",
+                                            "target": {
+                                              "$ref": "#/state/runRow"
+                                            },
+                                            "value": [
+                                              {
+                                                "$ref": "$map/item/id"
+                                              },
+                                              {
+                                                "$ref": "$map/item/row"
+                                              },
+                                              {
+                                                "$ref": "event#/currentTarget"
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      }
+                                    }
+                                  },
+                                  {
+                                    "tagName": "span",
+                                    "attributes": {
+                                      "part": "overflow-slot",
+                                      "role": "none"
+                                    },
+                                    "style": {
+                                      "display": "contents"
+                                    },
+                                    "$switch": {
+                                      "$ref": "$map/item/overflow"
+                                    },
+                                    "cases": {
+                                      "true": {
+                                        "tagName": "jx-action-button",
+                                        "attributes": {
+                                          "part": "overflow",
+                                          "data-command": "outline.more"
+                                        },
+                                        "$props": {
+                                          "label": "More actions",
+                                          "hint": "More actions",
+                                          "icon": "dots-three-vertical",
+                                          "haspopup": "menu",
+                                          "size": "sm",
+                                          "quiet": true
+                                        },
+                                        "onclick": {
+                                          "$prototype": "Function",
+                                          "body": [
+                                            {
+                                              "stopPropagation": true
+                                            },
+                                            {
+                                              "operator": "call",
+                                              "target": {
+                                                "$ref": "#/state/overflowRow"
+                                              },
+                                              "value": [
+                                                {
+                                                  "$ref": "$map/item/key"
+                                                },
+                                                {
+                                                  "$ref": "event#/currentTarget"
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      "text": {
+                        "$description": "A text node's line: drawn, and deliberately not a `jx-tree-item`. There is nothing to do to it — it cannot be moved, renamed, duplicated or deleted on its own — so a row the caret could land on would be a stop in the walk that answers to none of the verbs the walk offers. It still carries `data-value`, because `panels/dnd.ts` hides and shifts every line of the tree and a text child of a dragged element is one of them.",
+                        "tagName": "div",
+                        "attributes": {
+                          "part": "row",
+                          "data-kind": "text",
+                          "role": "none",
+                          "data-jx-path": "${$map.item.jxPath}",
+                          "data-value": "${$map.item.key}"
+                        },
+                        "children": [
+                          {
+                            "tagName": "span",
+                            "attributes": {
+                              "part": "badge",
+                              "data-kind": "text"
+                            },
+                            "textContent": "text"
+                          },
+                          {
+                            "tagName": "span",
+                            "attributes": {
+                              "part": "label"
+                            },
+                            "textContent": "${$map.item.label}"
+                          }
+                        ]
+                      }
+                    },
+                    "$description": "The indent lives HERE, on the wrapper, and not on the row — which is not a preference. A kit element renders its own `style` object through the same engine, and that engine releases the previous rule set for an element before adopting the next, so a host style object on a `jx-tree-item` is silently dropped the moment the element first paints. A custom property inherits through `display: contents`, so one declaration on the wrapper reaches whichever of the two rows the case draws — and both need it, because a text line indents like the element line above it."
+                  }
+                }
+              ]
+            },
+            "empty": {
+              "$description": "Drawn here rather than borrowed from `panels/empty-state.ts`, which is a lit template a document cannot call. What is kept is the pattern's rules (guidelines §11): one sentence saying what the region is for, then the one action that fills it.",
+              "tagName": "div",
+              "attributes": {
+                "part": "empty"
+              },
+              "children": [
+                {
+                  "tagName": "p",
+                  "attributes": {
+                    "part": "empty-message"
+                  },
+                  "textContent": "${state.emptyMessage}"
+                },
+                {
+                  "tagName": "jx-button",
+                  "attributes": {
+                    "part": "empty-action"
+                  },
+                  "$props": {
+                    "size": "sm",
+                    "variant": "secondary"
+                  },
+                  "onclick": {
+                    "$prototype": "Function",
+                    "body": [
+                      {
+                        "operator": "call",
+                        "target": {
+                          "$ref": "#/state/emptyAction"
+                        }
+                      }
+                    ]
+                  },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "textContent": "${state.emptyLabel}"
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ]
+}