@jxsuite/studio 6.1.1 → 8.0.0

package/src/surfaces/git-panel.json

@@ -1,1880 +0,0 @@
-{
-  "$schema": "https://jxsuite.com/schema/v1",
-  "$id": "StudioPanelGit",
-  "$description": "The Navigator's Source Control panel: what git says about this project, and every verb that answers. It has four moods and the adapter names which one — no project, a first read still in flight, a project git is not tracking yet, and a repository — so nothing here asks whether `status` is null or what `isRepo` means. Under the fourth mood it draws the sync bar (with or without a remote), the branch row, the two sub-tabs, and then either the commit form over the changed files or the log. `panels/git-panel.ts` keeps every decision: what a comparison is, which files group under which component, what a status letter reads aloud, what a commit does before it runs, and which of the four verbs a row's buttons are. Rows arrive as strings and booleans, keyed by path.",
-  "tagName": "div",
-  "attributes": {
-    "part": "git-panel"
-  },
-  "style": {
-    "$description": "The sixty-odd `.git-*` rules in `styles/overlays.css`, keyed on `part` and carried here. Four token repairs travel with them, all of the shape `surfaces/panel-imports.json` describes: `--spectrum-font-size-75` and `--spectrum-font-size-50` resolved only inside `<sp-theme>` and a document is mounted outside it, so every rule that read one would silently have taken its px fallback — they are `--jx-text-md` (12px) and `--jx-text-sm` (11px) here, at the same values, and the bare `10px` literals are `--jx-text-xs`. The one deliberate move is the two headline values, the sync label and the branch name: they were 13px, which is not a step on the scale, and they take `--jx-text-lg` (14px). Three rules are DELETED rather than moved, because the kit already draws them: the sub-tab strip's own fill, hover and selected underline are `jx-tabs`/`jx-tab`, the branch picker's box is `jx-select`, and `.git-split-btn`'s hand-built dropdown is the kit menu (see `openCommitMenu`). And one is repaired: a row's action buttons were `opacity: 0` until the ROW was hovered, so tabbing to Stage moved the keyboard onto an invisible control — the reveal is `:focus-within` as well as `:hover`.",
-    "display": "flex",
-    "flexDirection": "column",
-    "height": "100%",
-    "fontFamily": "var(--jx-font-sans)",
-    "fontSize": "var(--jx-text-md)",
-    "color": "var(--fg)",
-    "& [part=\"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 (studio-ui-guidelines.md §11): one sentence saying what the region is for, then the action that fills it.",
-      "display": "flex",
-      "flex": "1",
-      "flexDirection": "column",
-      "alignItems": "center",
-      "justifyContent": "center",
-      "gap": "var(--jx-space-3)",
-      "padding": "var(--jx-space-5)",
-      "textAlign": "center",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"empty-message\"]": {
-      "margin": "0",
-      "maxWidth": "34ch",
-      "lineHeight": "1.5"
-    },
-    "& [part=\"empty-actions\"]": {
-      "display": "flex",
-      "flexDirection": "column",
-      "gap": "var(--jx-space-2)"
-    },
-    "& [part=\"sync-bar\"]": {
-      "$description": "A wrapping row (studio-ui-guidelines.md §4.6), and it has exactly two items: `sync-head` (Refresh and the status, which never split) and what answers the status (the Fetch/Pull/Push group, or Create GitHub repository with no remote). It was a single line whose only shrinkable item was the status text, so a narrow Navigator never moved a button: it broke \"3 behind / Last updated 09:04 AM\" into a column one word wide (25px at the 160px floor) and painted \"(no\" under Create GitHub repository at the default 240px. Now the second item drops to a line of its own when the two no longer fit, and where that happens is decided by the status text's own width (a count, a locale's clock), never by a breakpoint. The row gap is the smaller step so a wrapped bar reads as one block.",
-      "display": "flex",
-      "flexWrap": "wrap",
-      "alignItems": "center",
-      "gap": "var(--jx-space-3) var(--jx-space-4)",
-      "padding": "var(--jx-space-4)",
-      "borderBottom": "1px solid var(--border)"
-    },
-    "& [part=\"sync-bar\"][data-remote=\"none\"], & [part=\"sync-bar\"][data-remote=\"none\"] > [part=\"sync-head\"]": {
-      "$description": "The no-remote bar keeps its tighter 8px between Refresh and the sentence, and on both axes: the head carries that gap now that Refresh and the text sit in it rather than in the bar.",
-      "gap": "var(--jx-space-3)"
-    },
-    "& [part=\"sync-head\"]": {
-      "$description": "Refresh and the status, as one item of the bar, so wrapping never leaves the icon alone on a line above its text. `flex: 1 1 auto` makes its basis the status text's own width, which is the wrap threshold; with `min-width: 0` it can then shrink below that when it is alone on a line, and the status wraps as a sentence rather than word by word.",
-      "display": "flex",
-      "flex": "1 1 auto",
-      "alignItems": "center",
-      "gap": "var(--jx-space-4)",
-      "minWidth": "0"
-    },
-    "& [part=\"sync-text\"]": {
-      "$description": "`1 1 auto` rather than `1`: the head's basis decides whether the verbs fit beside it, and it should be the status text's own width. An auto basis says that directly; the `0%` basis of `flex: 1` only reaches the same answer through how an engine treats a percentage while it measures.",
-      "display": "flex",
-      "flex": "1 1 auto",
-      "flexDirection": "column",
-      "gap": "1px",
-      "minWidth": "0"
-    },
-    "& [part=\"sync-label\"]": {
-      "fontSize": "var(--jx-text-lg)",
-      "fontWeight": "600",
-      "color": "var(--fg)"
-    },
-    "& [part=\"sync-time\"]": {
-      "fontSize": "var(--jx-text-sm)",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"sync-actions\"]": {
-      "$description": "The verbs never shrink: they are what moves. `margin-left: auto` keeps them at the inline end whether they share the status's line or sit on one of their own.",
-      "display": "flex",
-      "flex": "none",
-      "marginLeft": "auto"
-    },
-    "& [part=\"branch-row\"]": {
-      "$description": "A wrapping row (studio-ui-guidelines.md §4.6) of two items, `branch-head` and the picker. It was a single line with the picker capped at 40% of it, so a long branch name was cut twice (\"chor…\" beside \"cho…\") and a narrow Navigator word-stacked \"Active / branch\". Now the picker drops below the name when the two no longer fit, at a width the name decides.",
-      "display": "flex",
-      "flexWrap": "wrap",
-      "alignItems": "center",
-      "gap": "var(--jx-space-3) var(--jx-space-4)",
-      "padding": "10px var(--jx-space-4)",
-      "borderBottom": "1px solid var(--border)"
-    },
-    "& [part=\"branch-head\"]": {
-      "$description": "The branch icon and the name, as one item so the icon is never alone on a line. The 999:1 grow ratio against the picker gives nearly all spare room to the name while the two share a line, so the picker stays the width of the branch it shows; once the picker wraps, it is alone and takes the whole line. A third item in this row needs its own flex decision.",
-      "display": "flex",
-      "flex": "999 1 auto",
-      "alignItems": "center",
-      "gap": "var(--jx-space-4)",
-      "minWidth": "0"
-    },
-    "& [part=\"branch-icon\"]": {
-      "$description": "The hand-drawn 18px branch SVG this panel carried is the kit's `git-branch` glyph — the same key `PanelRecord.icon` already names for this panel's rail button, so the two drawings cannot drift.",
-      "flex": "none",
-      "--jx-icon-size": "18px",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"branch-text\"]": {
-      "display": "flex",
-      "flex": "1 1 auto",
-      "flexDirection": "column",
-      "gap": "1px",
-      "minWidth": "0"
-    },
-    "& [part=\"branch-label\"]": {
-      "fontSize": "var(--jx-text-sm)",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"branch-name\"]": {
-      "overflow": "hidden",
-      "fontSize": "var(--jx-text-lg)",
-      "fontWeight": "600",
-      "color": "var(--fg)",
-      "textOverflow": "ellipsis",
-      "whiteSpace": "nowrap"
-    },
-    "& [part=\"branch-picker\"]": {
-      "$description": "Sized by the branch it shows while it shares the name's line, and the full width of the row once it wraps below it, which is where a long branch name finally reads whole. `min-width: 0` is the kit's own default, restated because studio-ui-guidelines.md §4.6 asks it of every flex child: when even a line of its own is narrower than the name, the picker shrinks and the kit's preview ellipsizes.",
-      "flex": "1 1 auto",
-      "minWidth": "0"
-    },
-    "& [part=\"tab\"]": {
-      "$description": "The sub-tabs may shrink below their labels. A flex item's automatic minimum is its content, and a tab's label is nowrap, so \"Local Changes (3)\" and \"History\" held 179px against the 159px the Navigator has at its 160px floor and scrolled the whole panel sideways; the kit's label ellipsis could never engage. `inspector-dock.json` makes the same call for its tabs. It is a surface decision and not a kit default because the document tab strip deliberately scrolls instead.",
-      "minWidth": "0"
-    },
-    "& [part=\"create-repository\"] > [part=\"control\"], & [part=\"init\"] > [part=\"control\"], & [part=\"clone\"] > [part=\"control\"], & [part=\"commit-button\"] > [part=\"control\"]": {
-      "$description": "The panel's labelled buttons wrap their words at the Navigator's floor instead of overflowing it. The kit's control is nowrap, which is right for a toolbar and made each label a floor of its own: \"Create GitHub repository\" held 165px in a 135px sync bar, \"Clone Git Repository\" and \"Initialize Repository\" held 141px and 135px in the empty state's 127px, and \"Commit and sync\" beside its menu had about a pixel to spare in the commit form's 135px. Nothing changes where the label fits, because a nowrap label and a wrapping one have the same max-content width. This reaches into the kit's `control` part as `commandbar.json` does for its primary button.",
-      "whiteSpace": "normal"
-    },
-    "& [part=\"commit\"]": {
-      "display": "flex",
-      "flexDirection": "column",
-      "gap": "var(--jx-space-3)",
-      "padding": "var(--jx-space-4)",
-      "borderBottom": "1px solid var(--border)"
-    },
-    "& [part=\"commit-label\"]": {
-      "fontWeight": "500",
-      "color": "var(--fg-dim)"
-    },
-    "& [part=\"commit-actions\"]": {
-      "display": "flex",
-      "gap": "var(--jx-space-2)"
-    },
-    "& [part=\"commit-button\"]": {
-      "flex": "1"
-    },
-    "& [part=\"section\"]": {
-      "borderBottom": "1px solid var(--border)"
-    },
-    "& [part=\"section-header\"]": {
-      "display": "flex",
-      "alignItems": "center",
-      "gap": "var(--jx-space-3)",
-      "padding": "var(--jx-space-3) var(--jx-space-4) 6px",
-      "fontWeight": "700",
-      "color": "var(--fg)"
-    },
-    "& [part=\"count\"]": {
-      "$description": "The pill beside a section title. `margin-inline-end: auto` is what pushes the section's own button to the right edge — it was a second rule (`.git-section-header .git-count`) over the same element, and there is only one place a count is drawn.",
-      "display": "inline-flex",
-      "alignItems": "center",
-      "justifyContent": "center",
-      "minWidth": "18px",
-      "height": "18px",
-      "marginInlineEnd": "auto",
-      "padding": "0 5px",
-      "borderRadius": "9px",
-      "background": "var(--accent-15)",
-      "color": "var(--accent)",
-      "fontSize": "var(--jx-text-xs)",
-      "fontWeight": "600"
-    },
-    "& [part=\"group\"]": {
-      "marginBottom": "var(--jx-space-1)"
-    },
-    "& [part=\"group-header\"]": {
-      "display": "flex",
-      "alignItems": "center",
-      "gap": "6px",
-      "padding": "var(--jx-space-2) var(--jx-space-3)"
-    },
-    "& [part=\"group-name\"]": {
-      "fontWeight": "500",
-      "color": "var(--fg)"
-    },
-    "& [part=\"file-row\"]": {
-      "display": "flex",
-      "alignItems": "center",
-      "gap": "var(--jx-space-2)",
-      "padding": "var(--jx-space-1) var(--jx-space-3) var(--jx-space-1) var(--jx-space-5)"
-    },
-    "& [part=\"file-row\"]:hover": {
-      "background": "var(--hover-bg)"
-    },
-    "& [part=\"file-open\"]": {
-      "$description": "A REAL button, because it does something. It was a bare span with a cursor and a `title`: not focusable, no role, and Enter did nothing — so the panel's primary verb was mouse-only. A `<button>` needs no role, no tabindex and no key handler of its own, which is three lines of the old row that simply go.",
-      "display": "flex",
-      "flex": "1",
-      "alignItems": "baseline",
-      "gap": "6px",
-      "minWidth": "0",
-      "margin": "0",
-      "padding": "0",
-      "overflow": "hidden",
-      "border": "none",
-      "borderRadius": "var(--radius)",
-      "background": "none",
-      "color": "inherit",
-      "font": "inherit",
-      "textAlign": "left",
-      "cursor": "pointer",
-      ":focus-visible": {
-        "outline": "var(--jx-focus-ring)",
-        "outlineOffset": "-2px"
-      }
-    },
-    "& [part=\"file-name\"]": {
-      "overflow": "hidden",
-      "textOverflow": "ellipsis",
-      "whiteSpace": "nowrap"
-    },
-    "& [part=\"file-dir\"]": {
-      "overflow": "hidden",
-      "color": "var(--fg-dim)",
-      "fontSize": "var(--jx-text-xs)",
-      "textOverflow": "ellipsis",
-      "whiteSpace": "nowrap"
-    },
-    "& [part=\"file-actions\"]": {
-      "$description": "Revealed on `:focus-within` as well as on the row's hover. Opacity alone hid a control the keyboard could still reach: tabbing through a changed file landed on an invisible Stage button.",
-      "display": "flex",
-      "flex": "none",
-      "opacity": "0"
-    },
-    "& [part=\"file-row\"]:hover [part=\"file-actions\"], & [part=\"file-actions\"]:focus-within": {
-      "opacity": "1"
-    },
-    "& [part=\"badge\"]": {
-      "$description": "One letter and a colour, which is why every row's open button carries the status in words as well.",
-      "flex": "none",
-      "width": "16px",
-      "color": "var(--signal)",
-      "fontFamily": "var(--font-mono)",
-      "fontSize": "var(--jx-text-xs)",
-      "fontWeight": "700",
-      "textAlign": "center"
-    },
-    "& [part=\"badge\"][data-status=\"A\"], & [part=\"badge\"][data-status=\"U\"]": {
-      "color": "var(--success)"
-    },
-    "& [part=\"badge\"][data-status=\"D\"]": {
-      "color": "var(--danger)"
-    },
-    "& [part=\"badge\"][data-status=\"R\"], & [part=\"badge\"][data-status=\"C\"]": {
-      "color": "var(--tag)"
-    },
-    "& [part=\"history\"]": {
-      "flex": "1",
-      "overflowY": "auto",
-      "padding": "var(--jx-space-2) 0"
-    },
-    "& [part=\"history-list\"]": {
-      "margin": "0",
-      "padding": "0",
-      "listStyle": "none"
-    },
-    "& [part=\"history-entry\"]": {
-      "display": "flex",
-      "flexDirection": "column",
-      "gap": "var(--jx-space-1)",
-      "padding": "6px var(--jx-space-4)",
-      "borderBottom": "1px solid var(--border)"
-    },
-    "& [part=\"history-entry\"]:hover": {
-      "background": "var(--hover-bg)"
-    },
-    "& [part=\"history-hash\"]": {
-      "color": "var(--accent)",
-      "fontFamily": "var(--font-mono)",
-      "fontSize": "var(--jx-text-xs)"
-    },
-    "& [part=\"history-message\"]": {
-      "color": "var(--fg)"
-    },
-    "& [part=\"history-meta\"]": {
-      "color": "var(--fg-dim)",
-      "fontSize": "var(--jx-text-xs)"
-    },
-    "& [part=\"status\"]": {
-      "margin": "0",
-      "padding": "var(--jx-space-3)",
-      "color": "var(--fg-dim)",
-      "fontSize": "var(--jx-text-sm)",
-      "textAlign": "center"
-    },
-    "& [part=\"failure\"]": {
-      "$description": "The panel's own refusal banner. It is `failure` rather than `error` because the branch picker and the commit field each draw a permanent, empty `[part=\"error\"]` of their own inside this same light-DOM tree: under that name this padding, rule and wash drew a 16×13 box over both fields' top-left corners that took the click, and dressed either field's real refusal sentence as a banner.",
-      "margin": "0",
-      "padding": "6px var(--jx-space-3)",
-      "borderBottom": "1px solid var(--border)",
-      "background": "color-mix(in srgb, var(--danger) 8%, transparent)",
-      "color": "var(--danger)",
-      "fontSize": "var(--jx-text-sm)"
-    },
-    "@(forced-colors: active)": {
-      "& [part=\"failure\"]": {
-        "$description": "The wash behind the banner collapses into the page when every author colour is replaced, so the border is what is left to mark it.",
-        "border": "1px solid CanvasText",
-        "color": "CanvasText"
-      }
-    }
-  },
-  "children": [
-    {
-      "tagName": "div",
-      "attributes": {
-        "part": "view-slot",
-        "role": "none"
-      },
-      "style": {
-        "display": "contents"
-      },
-      "$switch": {
-        "$ref": "#/state/view"
-      },
-      "cases": {
-        "no-project": {
-          "tagName": "div",
-          "attributes": {
-            "part": "empty",
-            "data-view": "no-project"
-          },
-          "children": [
-            {
-              "tagName": "p",
-              "attributes": {
-                "part": "empty-message"
-              },
-              "textContent": "Source control keeps every version of a project, so any change can be undone. Open a project to see its history."
-            },
-            {
-              "tagName": "div",
-              "attributes": {
-                "part": "clone-slot",
-                "role": "none"
-              },
-              "style": {
-                "display": "contents"
-              },
-              "$switch": {
-                "$ref": "#/state/canClone"
-              },
-              "cases": {
-                "true": {
-                  "tagName": "div",
-                  "attributes": {
-                    "part": "empty-actions"
-                  },
-                  "children": [
-                    {
-                      "tagName": "jx-button",
-                      "attributes": {
-                        "part": "clone",
-                        "data-action": "clone"
-                      },
-                      "$props": {
-                        "size": "sm"
-                      },
-                      "onclick": {
-                        "$prototype": "Function",
-                        "body": [
-                          {
-                            "operator": "call",
-                            "target": {
-                              "$ref": "#/state/clone"
-                            },
-                            "value": []
-                          }
-                        ]
-                      },
-                      "children": [
-                        {
-                          "tagName": "jx-icon",
-                          "$props": {
-                            "name": "download-simple"
-                          }
-                        },
-                        {
-                          "tagName": "span",
-                          "textContent": "Clone Git Repository"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              }
-            }
-          ]
-        },
-        "loading": {
-          "tagName": "p",
-          "attributes": {
-            "part": "status",
-            "data-view": "loading"
-          },
-          "textContent": "Loading…"
-        },
-        "no-repo": {
-          "tagName": "div",
-          "attributes": {
-            "part": "empty",
-            "data-view": "no-repo"
-          },
-          "children": [
-            {
-              "tagName": "p",
-              "attributes": {
-                "part": "empty-message"
-              },
-              "textContent": "This project is not tracked by git yet. Start tracking it to keep a history of every change and to publish it anywhere."
-            },
-            {
-              "tagName": "div",
-              "attributes": {
-                "part": "empty-actions"
-              },
-              "children": [
-                {
-                  "tagName": "jx-button",
-                  "attributes": {
-                    "part": "init",
-                    "data-action": "init"
-                  },
-                  "$props": {
-                    "size": "sm",
-                    "variant": "accent",
-                    "disabled": {
-                      "$ref": "#/state/busy"
-                    }
-                  },
-                  "onclick": {
-                    "$prototype": "Function",
-                    "body": [
-                      {
-                        "operator": "call",
-                        "target": {
-                          "$ref": "#/state/initRepository"
-                        },
-                        "value": []
-                      }
-                    ]
-                  },
-                  "children": [
-                    {
-                      "tagName": "jx-icon",
-                      "$props": {
-                        "name": "plus"
-                      }
-                    },
-                    {
-                      "tagName": "span",
-                      "textContent": "Initialize Repository"
-                    }
-                  ]
-                },
-                {
-                  "tagName": "jx-button",
-                  "attributes": {
-                    "part": "create-repository",
-                    "data-action": "create-repository"
-                  },
-                  "$props": {
-                    "size": "sm",
-                    "disabled": {
-                      "$ref": "#/state/busy"
-                    }
-                  },
-                  "onclick": {
-                    "$prototype": "Function",
-                    "body": [
-                      {
-                        "operator": "call",
-                        "target": {
-                          "$ref": "#/state/createRepository"
-                        },
-                        "value": []
-                      }
-                    ]
-                  },
-                  "children": [
-                    {
-                      "tagName": "jx-icon",
-                      "$props": {
-                        "name": "share-network"
-                      }
-                    },
-                    {
-                      "tagName": "span",
-                      "textContent": "Create GitHub repository"
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        "repo": {
-          "tagName": "div",
-          "attributes": {
-            "part": "repo",
-            "role": "none"
-          },
-          "style": {
-            "display": "contents"
-          },
-          "children": [
-            {
-              "tagName": "div",
-              "attributes": {
-                "part": "remote-slot",
-                "role": "none"
-              },
-              "style": {
-                "display": "contents"
-              },
-              "$switch": {
-                "$ref": "#/state/remoteState"
-              },
-              "cases": {
-                "remote": {
-                  "tagName": "div",
-                  "attributes": {
-                    "part": "sync-bar",
-                    "data-remote": "yes"
-                  },
-                  "children": [
-                    {
-                      "tagName": "div",
-                      "attributes": {
-                        "part": "sync-head"
-                      },
-                      "children": [
-                        {
-                          "tagName": "jx-action-button",
-                          "attributes": {
-                            "part": "refresh",
-                            "data-action": "refresh"
-                          },
-                          "$props": {
-                            "icon": "arrows-clockwise",
-                            "size": "sm",
-                            "quiet": true,
-                            "label": "Refresh",
-                            "hint": "Refresh",
-                            "disabled": {
-                              "$ref": "#/state/busy"
-                            }
-                          },
-                          "onclick": {
-                            "$prototype": "Function",
-                            "body": [
-                              {
-                                "operator": "call",
-                                "target": {
-                                  "$ref": "#/state/refresh"
-                                },
-                                "value": []
-                              }
-                            ]
-                          }
-                        },
-                        {
-                          "tagName": "div",
-                          "attributes": {
-                            "part": "sync-text"
-                          },
-                          "children": [
-                            {
-                              "tagName": "span",
-                              "attributes": {
-                                "part": "sync-label"
-                              },
-                              "textContent": "${state.syncLabel}"
-                            },
-                            {
-                              "tagName": "span",
-                              "attributes": {
-                                "part": "updated-slot",
-                                "role": "none"
-                              },
-                              "style": {
-                                "display": "contents"
-                              },
-                              "$switch": {
-                                "$ref": "#/state/hasLastUpdated"
-                              },
-                              "cases": {
-                                "true": {
-                                  "tagName": "span",
-                                  "attributes": {
-                                    "part": "sync-time"
-                                  },
-                                  "textContent": "${state.lastUpdated}"
-                                }
-                              }
-                            }
-                          ]
-                        }
-                      ]
-                    },
-                    {
-                      "$description": "Three quiet tools, so NOT compact. A compact group draws every member's frame and fill whatever its quiet says, so the `quiet: true` each verb below writes would have been silently framed into a segmented control; Spectrum's group here was quiet and never compact, which is what compact=false and the 2px gap between the verbs restore.",
-                      "tagName": "jx-action-group",
-                      "attributes": {
-                        "part": "sync-actions"
-                      },
-                      "$props": {
-                        "label": "Remote actions",
-                        "compact": false
-                      },
-                      "children": [
-                        {
-                          "tagName": "jx-action-button",
-                          "attributes": {
-                            "part": "fetch",
-                            "data-action": "fetch"
-                          },
-                          "$props": {
-                            "icon": "download-simple",
-                            "size": "sm",
-                            "quiet": true,
-                            "label": "Fetch",
-                            "hint": "Fetch",
-                            "disabled": {
-                              "$ref": "#/state/busy"
-                            }
-                          },
-                          "onclick": {
-                            "$prototype": "Function",
-                            "body": [
-                              {
-                                "operator": "call",
-                                "target": {
-                                  "$ref": "#/state/fetch"
-                                },
-                                "value": []
-                              }
-                            ]
-                          }
-                        },
-                        {
-                          "tagName": "jx-action-button",
-                          "attributes": {
-                            "part": "pull",
-                            "data-action": "pull"
-                          },
-                          "$props": {
-                            "icon": "arrow-down",
-                            "size": "sm",
-                            "quiet": true,
-                            "label": {
-                              "$ref": "#/state/pullLabel"
-                            },
-                            "hint": {
-                              "$ref": "#/state/pullLabel"
-                            },
-                            "disabled": {
-                              "$ref": "#/state/busy"
-                            }
-                          },
-                          "onclick": {
-                            "$prototype": "Function",
-                            "body": [
-                              {
-                                "operator": "call",
-                                "target": {
-                                  "$ref": "#/state/pull"
-                                },
-                                "value": []
-                              }
-                            ]
-                          }
-                        },
-                        {
-                          "tagName": "jx-action-button",
-                          "attributes": {
-                            "part": "push",
-                            "data-action": "push"
-                          },
-                          "$props": {
-                            "icon": "arrow-up",
-                            "size": "sm",
-                            "quiet": true,
-                            "label": {
-                              "$ref": "#/state/pushLabel"
-                            },
-                            "hint": {
-                              "$ref": "#/state/pushLabel"
-                            },
-                            "disabled": {
-                              "$ref": "#/state/busy"
-                            }
-                          },
-                          "onclick": {
-                            "$prototype": "Function",
-                            "body": [
-                              {
-                                "operator": "call",
-                                "target": {
-                                  "$ref": "#/state/push"
-                                },
-                                "value": []
-                              }
-                            ]
-                          }
-                        }
-                      ]
-                    }
-                  ]
-                },
-                "local": {
-                  "tagName": "div",
-                  "attributes": {
-                    "part": "sync-bar",
-                    "data-remote": "none"
-                  },
-                  "children": [
-                    {
-                      "tagName": "div",
-                      "attributes": {
-                        "part": "sync-head"
-                      },
-                      "children": [
-                        {
-                          "tagName": "jx-action-button",
-                          "attributes": {
-                            "part": "refresh",
-                            "data-action": "refresh"
-                          },
-                          "$props": {
-                            "icon": "arrows-clockwise",
-                            "size": "sm",
-                            "quiet": true,
-                            "label": "Refresh",
-                            "hint": "Refresh",
-                            "disabled": {
-                              "$ref": "#/state/busy"
-                            }
-                          },
-                          "onclick": {
-                            "$prototype": "Function",
-                            "body": [
-                              {
-                                "operator": "call",
-                                "target": {
-                                  "$ref": "#/state/refresh"
-                                },
-                                "value": []
-                              }
-                            ]
-                          }
-                        },
-                        {
-                          "tagName": "div",
-                          "attributes": {
-                            "part": "sync-text"
-                          },
-                          "children": [
-                            {
-                              "tagName": "span",
-                              "attributes": {
-                                "part": "sync-label"
-                              },
-                              "textContent": "Local only (no remote)"
-                            }
-                          ]
-                        }
-                      ]
-                    },
-                    {
-                      "tagName": "jx-button",
-                      "attributes": {
-                        "part": "create-repository",
-                        "data-action": "create-repository"
-                      },
-                      "$props": {
-                        "size": "sm",
-                        "disabled": {
-                          "$ref": "#/state/busy"
-                        }
-                      },
-                      "onclick": {
-                        "$prototype": "Function",
-                        "body": [
-                          {
-                            "operator": "call",
-                            "target": {
-                              "$ref": "#/state/createRepository"
-                            },
-                            "value": []
-                          }
-                        ]
-                      },
-                      "children": [
-                        {
-                          "tagName": "jx-icon",
-                          "$props": {
-                            "name": "share-network"
-                          }
-                        },
-                        {
-                          "tagName": "span",
-                          "textContent": "Create GitHub repository"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              }
-            },
-            {
-              "tagName": "div",
-              "attributes": {
-                "part": "branch-row"
-              },
-              "children": [
-                {
-                  "tagName": "div",
-                  "attributes": {
-                    "part": "branch-head"
-                  },
-                  "children": [
-                    {
-                      "tagName": "jx-icon",
-                      "attributes": {
-                        "part": "branch-icon"
-                      },
-                      "$props": {
-                        "name": "git-branch"
-                      }
-                    },
-                    {
-                      "tagName": "div",
-                      "attributes": {
-                        "part": "branch-text"
-                      },
-                      "children": [
-                        {
-                          "tagName": "span",
-                          "attributes": {
-                            "part": "branch-label"
-                          },
-                          "textContent": "Active branch"
-                        },
-                        {
-                          "tagName": "span",
-                          "attributes": {
-                            "part": "branch-name"
-                          },
-                          "textContent": "${state.branchName}"
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tagName": "jx-select",
-                  "attributes": {
-                    "part": "branch-picker"
-                  },
-                  "$props": {
-                    "label": "Switch branch",
-                    "size": "sm",
-                    "options": {
-                      "$ref": "#/state/branchOptions"
-                    },
-                    "value": {
-                      "$ref": "#/state/branchValue"
-                    }
-                  },
-                  "onchange": {
-                    "$prototype": "Function",
-                    "body": [
-                      {
-                        "operator": "call",
-                        "target": {
-                          "$ref": "#/state/chooseBranch"
-                        },
-                        "value": [
-                          {
-                            "$ref": "event#/target/value"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                }
-              ]
-            },
-            {
-              "tagName": "jx-tabs",
-              "attributes": {
-                "part": "tabs",
-                "selected": "${state.subTab}"
-              },
-              "$props": {
-                "label": "Source control views"
-              },
-              "onchange": {
-                "$prototype": "Function",
-                "body": [
-                  {
-                    "operator": "call",
-                    "target": {
-                      "$ref": "#/state/selectTab"
-                    },
-                    "value": [
-                      {
-                        "$ref": "event#/detail"
-                      }
-                    ]
-                  }
-                ]
-              },
-              "children": [
-                {
-                  "tagName": "jx-tab",
-                  "attributes": {
-                    "part": "tab",
-                    "data-tab": "changes",
-                    "value": "changes",
-                    "label": "${state.changesLabel}",
-                    "panel": "git-panel-body"
-                  }
-                },
-                {
-                  "tagName": "jx-tab",
-                  "attributes": {
-                    "part": "tab",
-                    "data-tab": "history",
-                    "value": "history",
-                    "label": "History",
-                    "panel": "git-panel-body"
-                  }
-                }
-              ]
-            },
-            {
-              "tagName": "div",
-              "attributes": {
-                "part": "body",
-                "id": "git-panel-body",
-                "role": "tabpanel",
-                "data-tab": "${state.subTab}"
-              },
-              "style": {
-                "display": "contents"
-              },
-              "$switch": {
-                "$ref": "#/state/subTab"
-              },
-              "cases": {
-                "changes": {
-                  "tagName": "div",
-                  "attributes": {
-                    "part": "changes",
-                    "role": "none"
-                  },
-                  "style": {
-                    "display": "contents"
-                  },
-                  "children": [
-                    {
-                      "tagName": "div",
-                      "attributes": {
-                        "part": "commit",
-                        "data-jx-region": "navigator/panel:git/commit"
-                      },
-                      "children": [
-                        {
-                          "tagName": "span",
-                          "attributes": {
-                            "part": "commit-label",
-                            "id": "git-commit-label"
-                          },
-                          "textContent": "Please write a commit message"
-                        },
-                        {
-                          "tagName": "jx-textfield",
-                          "attributes": {
-                            "part": "commit-input",
-                            "data-field": "commit-message"
-                          },
-                          "$props": {
-                            "labelledby": "git-commit-label",
-                            "multiline": true,
-                            "size": "sm",
-                            "placeholder": "Describe your changes",
-                            "value": {
-                              "$ref": "#/state/commitMessage"
-                            }
-                          },
-                          "oninput": {
-                            "$prototype": "Function",
-                            "body": [
-                              {
-                                "operator": "call",
-                                "target": {
-                                  "$ref": "#/state/editMessage"
-                                },
-                                "value": [
-                                  {
-                                    "$ref": "event#/target/value"
-                                  }
-                                ]
-                              }
-                            ]
-                          },
-                          "onkeydown": {
-                            "$prototype": "Function",
-                            "body": [
-                              {
-                                "$switch": {
-                                  "$ref": "event#/key"
-                                },
-                                "cases": {
-                                  "Enter": [
-                                    {
-                                      "if": {
-                                        "operator": "||",
-                                        "target": {
-                                          "$ref": "event#/ctrlKey"
-                                        },
-                                        "value": {
-                                          "$ref": "event#/metaKey"
-                                        }
-                                      },
-                                      "then": [
-                                        {
-                                          "preventDefault": true
-                                        },
-                                        {
-                                          "operator": "call",
-                                          "target": {
-                                            "$ref": "#/state/commit"
-                                          },
-                                          "value": []
-                                        }
-                                      ]
-                                    }
-                                  ]
-                                }
-                              }
-                            ]
-                          }
-                        },
-                        {
-                          "tagName": "div",
-                          "attributes": {
-                            "part": "commit-actions"
-                          },
-                          "children": [
-                            {
-                              "tagName": "jx-button",
-                              "attributes": {
-                                "part": "commit-button",
-                                "data-action": "commit-and-sync"
-                              },
-                              "$props": {
-                                "size": "sm",
-                                "variant": "accent",
-                                "disabled": {
-                                  "$ref": "#/state/busy"
-                                }
-                              },
-                              "onclick": {
-                                "$prototype": "Function",
-                                "body": [
-                                  {
-                                    "operator": "call",
-                                    "target": {
-                                      "$ref": "#/state/commitAndSync"
-                                    },
-                                    "value": []
-                                  }
-                                ]
-                              },
-                              "children": [
-                                {
-                                  "tagName": "span",
-                                  "textContent": "Commit and sync"
-                                }
-                              ]
-                            },
-                            {
-                              "tagName": "jx-action-button",
-                              "attributes": {
-                                "part": "commit-menu",
-                                "data-action": "commit-menu"
-                              },
-                              "$props": {
-                                "icon": "caret-down",
-                                "size": "sm",
-                                "label": "More commit options",
-                                "hint": "More commit options",
-                                "haspopup": "menu"
-                              },
-                              "onclick": {
-                                "$prototype": "Function",
-                                "body": [
-                                  {
-                                    "operator": "call",
-                                    "target": {
-                                      "$ref": "#/state/openCommitMenu"
-                                    },
-                                    "value": [
-                                      {
-                                        "$ref": "event#/currentTarget"
-                                      }
-                                    ]
-                                  }
-                                ]
-                              }
-                            }
-                          ]
-                        }
-                      ]
-                    },
-                    {
-                      "tagName": "div",
-                      "attributes": {
-                        "part": "staged-slot",
-                        "role": "none"
-                      },
-                      "style": {
-                        "display": "contents"
-                      },
-                      "$switch": {
-                        "$ref": "#/state/hasStaged"
-                      },
-                      "cases": {
-                        "true": {
-                          "tagName": "section",
-                          "attributes": {
-                            "part": "section",
-                            "data-section": "staged",
-                            "aria-label": "Staged Changes"
-                          },
-                          "children": [
-                            {
-                              "tagName": "div",
-                              "attributes": {
-                                "part": "section-header"
-                              },
-                              "children": [
-                                {
-                                  "tagName": "span",
-                                  "attributes": {
-                                    "part": "section-title"
-                                  },
-                                  "textContent": "Staged Changes"
-                                },
-                                {
-                                  "tagName": "span",
-                                  "attributes": {
-                                    "part": "count"
-                                  },
-                                  "textContent": "${state.stagedCount}"
-                                },
-                                {
-                                  "tagName": "jx-action-button",
-                                  "attributes": {
-                                    "part": "unstage-all",
-                                    "data-action": "unstage-all"
-                                  },
-                                  "$props": {
-                                    "icon": "minus",
-                                    "size": "sm",
-                                    "quiet": true,
-                                    "label": "Unstage all",
-                                    "hint": "Unstage all"
-                                  },
-                                  "onclick": {
-                                    "$prototype": "Function",
-                                    "body": [
-                                      {
-                                        "operator": "call",
-                                        "target": {
-                                          "$ref": "#/state/unstageAll"
-                                        },
-                                        "value": []
-                                      }
-                                    ]
-                                  }
-                                }
-                              ]
-                            },
-                            {
-                              "$prototype": "Array",
-                              "items": {
-                                "$ref": "#/state/stagedFiles"
-                              },
-                              "key": {
-                                "$ref": "$map/item/key"
-                              },
-                              "map": {
-                                "$description": "One changed file. Every row opens the file it names — renderability decides which VIEW opens, not whether the row responds — and carries the two or three verbs its staged state allows. `$map/item` inside a nested map is the FILE, which is why the row hands its own path back to every action rather than an index.",
-                                "tagName": "div",
-                                "attributes": {
-                                  "part": "file-row",
-                                  "data-path": "${$map.item.path}",
-                                  "data-status": "${$map.item.status}"
-                                },
-                                "children": [
-                                  {
-                                    "tagName": "button",
-                                    "attributes": {
-                                      "part": "file-open",
-                                      "type": "button",
-                                      "aria-label": "${$map.item.label}",
-                                      "title": "Open this file's comparison"
-                                    },
-                                    "onclick": {
-                                      "$prototype": "Function",
-                                      "body": [
-                                        {
-                                          "operator": "call",
-                                          "target": {
-                                            "$ref": "#/state/openFile"
-                                          },
-                                          "value": [
-                                            {
-                                              "$ref": "$map/item/path"
-                                            }
-                                          ]
-                                        }
-                                      ]
-                                    },
-                                    "children": [
-                                      {
-                                        "tagName": "span",
-                                        "attributes": {
-                                          "part": "file-name"
-                                        },
-                                        "textContent": "${$map.item.name}"
-                                      },
-                                      {
-                                        "tagName": "span",
-                                        "attributes": {
-                                          "part": "dir-slot",
-                                          "role": "none"
-                                        },
-                                        "style": {
-                                          "display": "contents"
-                                        },
-                                        "$switch": {
-                                          "$ref": "$map/item/hasDir"
-                                        },
-                                        "cases": {
-                                          "true": {
-                                            "tagName": "span",
-                                            "attributes": {
-                                              "part": "file-dir"
-                                            },
-                                            "textContent": "${$map.item.dir}"
-                                          }
-                                        }
-                                      }
-                                    ]
-                                  },
-                                  {
-                                    "tagName": "span",
-                                    "attributes": {
-                                      "part": "file-actions"
-                                    },
-                                    "$switch": {
-                                      "$ref": "$map/item/staged"
-                                    },
-                                    "cases": {
-                                      "true": {
-                                        "tagName": "jx-action-button",
-                                        "attributes": {
-                                          "part": "unstage",
-                                          "data-action": "unstage"
-                                        },
-                                        "$props": {
-                                          "icon": "minus",
-                                          "size": "sm",
-                                          "quiet": true,
-                                          "label": "Unstage ${$map.item.path}",
-                                          "hint": "Unstage"
-                                        },
-                                        "onclick": {
-                                          "$prototype": "Function",
-                                          "body": [
-                                            {
-                                              "operator": "call",
-                                              "target": {
-                                                "$ref": "#/state/unstage"
-                                              },
-                                              "value": [
-                                                {
-                                                  "$ref": "$map/item/path"
-                                                }
-                                              ]
-                                            }
-                                          ]
-                                        }
-                                      },
-                                      "false": {
-                                        "tagName": "span",
-                                        "attributes": {
-                                          "part": "unstaged-actions",
-                                          "role": "none"
-                                        },
-                                        "style": {
-                                          "display": "contents"
-                                        },
-                                        "children": [
-                                          {
-                                            "tagName": "jx-action-button",
-                                            "attributes": {
-                                              "part": "discard",
-                                              "data-action": "discard"
-                                            },
-                                            "$props": {
-                                              "icon": "arrow-u-up-left",
-                                              "size": "sm",
-                                              "quiet": true,
-                                              "label": "Discard changes to ${$map.item.path}",
-                                              "hint": "Discard changes",
-                                              "disabled": {
-                                                "$ref": "$map/item/cannotDiscard"
-                                              }
-                                            },
-                                            "onclick": {
-                                              "$prototype": "Function",
-                                              "body": [
-                                                {
-                                                  "operator": "call",
-                                                  "target": {
-                                                    "$ref": "#/state/discard"
-                                                  },
-                                                  "value": [
-                                                    {
-                                                      "$ref": "$map/item/path"
-                                                    }
-                                                  ]
-                                                }
-                                              ]
-                                            }
-                                          },
-                                          {
-                                            "tagName": "jx-action-button",
-                                            "attributes": {
-                                              "part": "stage",
-                                              "data-action": "stage"
-                                            },
-                                            "$props": {
-                                              "icon": "plus",
-                                              "size": "sm",
-                                              "quiet": true,
-                                              "label": "Stage ${$map.item.path}",
-                                              "hint": "Stage"
-                                            },
-                                            "onclick": {
-                                              "$prototype": "Function",
-                                              "body": [
-                                                {
-                                                  "operator": "call",
-                                                  "target": {
-                                                    "$ref": "#/state/stage"
-                                                  },
-                                                  "value": [
-                                                    {
-                                                      "$ref": "$map/item/path"
-                                                    }
-                                                  ]
-                                                }
-                                              ]
-                                            }
-                                          }
-                                        ]
-                                      }
-                                    }
-                                  },
-                                  {
-                                    "tagName": "span",
-                                    "attributes": {
-                                      "part": "badge",
-                                      "data-status": "${$map.item.status}"
-                                    },
-                                    "textContent": "${$map.item.status}"
-                                  }
-                                ]
-                              }
-                            }
-                          ]
-                        }
-                      }
-                    },
-                    {
-                      "tagName": "section",
-                      "attributes": {
-                        "part": "section",
-                        "data-section": "changed",
-                        "aria-label": "Changed Components"
-                      },
-                      "children": [
-                        {
-                          "tagName": "div",
-                          "attributes": {
-                            "part": "section-header"
-                          },
-                          "children": [
-                            {
-                              "tagName": "span",
-                              "attributes": {
-                                "part": "section-title"
-                              },
-                              "textContent": "Changed Components"
-                            },
-                            {
-                              "tagName": "span",
-                              "attributes": {
-                                "part": "count"
-                              },
-                              "textContent": "${state.changedCount}"
-                            },
-                            {
-                              "tagName": "span",
-                              "attributes": {
-                                "part": "stage-all-slot",
-                                "role": "none"
-                              },
-                              "style": {
-                                "display": "contents"
-                              },
-                              "$switch": {
-                                "$ref": "#/state/hasUnstaged"
-                              },
-                              "cases": {
-                                "true": {
-                                  "tagName": "jx-action-button",
-                                  "attributes": {
-                                    "part": "stage-all",
-                                    "data-action": "stage-all"
-                                  },
-                                  "$props": {
-                                    "icon": "plus",
-                                    "size": "sm",
-                                    "quiet": true,
-                                    "label": "Stage all",
-                                    "hint": "Stage all"
-                                  },
-                                  "onclick": {
-                                    "$prototype": "Function",
-                                    "body": [
-                                      {
-                                        "operator": "call",
-                                        "target": {
-                                          "$ref": "#/state/stageAll"
-                                        },
-                                        "value": []
-                                      }
-                                    ]
-                                  }
-                                }
-                              }
-                            }
-                          ]
-                        },
-                        {
-                          "tagName": "div",
-                          "attributes": {
-                            "part": "groups-slot",
-                            "role": "none"
-                          },
-                          "style": {
-                            "display": "contents"
-                          },
-                          "$switch": {
-                            "$ref": "#/state/filesState"
-                          },
-                          "cases": {
-                            "listed": {
-                              "tagName": "div",
-                              "attributes": {
-                                "part": "groups"
-                              },
-                              "children": [
-                                {
-                                  "$prototype": "Array",
-                                  "items": {
-                                    "$ref": "#/state/groups"
-                                  },
-                                  "key": {
-                                    "$ref": "$map/item/key"
-                                  },
-                                  "map": {
-                                    "tagName": "div",
-                                    "attributes": {
-                                      "part": "group",
-                                      "data-group": "${$map.item.key}"
-                                    },
-                                    "children": [
-                                      {
-                                        "tagName": "div",
-                                        "attributes": {
-                                          "part": "group-header"
-                                        },
-                                        "children": [
-                                          {
-                                            "tagName": "span",
-                                            "attributes": {
-                                              "part": "group-name"
-                                            },
-                                            "textContent": "${$map.item.name}"
-                                          }
-                                        ]
-                                      },
-                                      {
-                                        "$prototype": "Array",
-                                        "items": {
-                                          "$ref": "$map/item/files"
-                                        },
-                                        "key": {
-                                          "$ref": "$map/item/key"
-                                        },
-                                        "map": {
-                                          "tagName": "div",
-                                          "attributes": {
-                                            "part": "file-row",
-                                            "data-path": "${$map.item.path}",
-                                            "data-status": "${$map.item.status}"
-                                          },
-                                          "children": [
-                                            {
-                                              "tagName": "button",
-                                              "attributes": {
-                                                "part": "file-open",
-                                                "type": "button",
-                                                "aria-label": "${$map.item.label}",
-                                                "title": "Open this file's comparison"
-                                              },
-                                              "onclick": {
-                                                "$prototype": "Function",
-                                                "body": [
-                                                  {
-                                                    "operator": "call",
-                                                    "target": {
-                                                      "$ref": "#/state/openFile"
-                                                    },
-                                                    "value": [
-                                                      {
-                                                        "$ref": "$map/item/path"
-                                                      }
-                                                    ]
-                                                  }
-                                                ]
-                                              },
-                                              "children": [
-                                                {
-                                                  "tagName": "span",
-                                                  "attributes": {
-                                                    "part": "file-name"
-                                                  },
-                                                  "textContent": "${$map.item.name}"
-                                                },
-                                                {
-                                                  "tagName": "span",
-                                                  "attributes": {
-                                                    "part": "dir-slot",
-                                                    "role": "none"
-                                                  },
-                                                  "style": {
-                                                    "display": "contents"
-                                                  },
-                                                  "$switch": {
-                                                    "$ref": "$map/item/hasDir"
-                                                  },
-                                                  "cases": {
-                                                    "true": {
-                                                      "tagName": "span",
-                                                      "attributes": {
-                                                        "part": "file-dir"
-                                                      },
-                                                      "textContent": "${$map.item.dir}"
-                                                    }
-                                                  }
-                                                }
-                                              ]
-                                            },
-                                            {
-                                              "tagName": "span",
-                                              "attributes": {
-                                                "part": "file-actions"
-                                              },
-                                              "$switch": {
-                                                "$ref": "$map/item/staged"
-                                              },
-                                              "cases": {
-                                                "true": {
-                                                  "tagName": "jx-action-button",
-                                                  "attributes": {
-                                                    "part": "unstage",
-                                                    "data-action": "unstage"
-                                                  },
-                                                  "$props": {
-                                                    "icon": "minus",
-                                                    "size": "sm",
-                                                    "quiet": true,
-                                                    "label": "Unstage ${$map.item.path}",
-                                                    "hint": "Unstage"
-                                                  },
-                                                  "onclick": {
-                                                    "$prototype": "Function",
-                                                    "body": [
-                                                      {
-                                                        "operator": "call",
-                                                        "target": {
-                                                          "$ref": "#/state/unstage"
-                                                        },
-                                                        "value": [
-                                                          {
-                                                            "$ref": "$map/item/path"
-                                                          }
-                                                        ]
-                                                      }
-                                                    ]
-                                                  }
-                                                },
-                                                "false": {
-                                                  "tagName": "span",
-                                                  "attributes": {
-                                                    "part": "unstaged-actions",
-                                                    "role": "none"
-                                                  },
-                                                  "style": {
-                                                    "display": "contents"
-                                                  },
-                                                  "children": [
-                                                    {
-                                                      "tagName": "jx-action-button",
-                                                      "attributes": {
-                                                        "part": "discard",
-                                                        "data-action": "discard"
-                                                      },
-                                                      "$props": {
-                                                        "icon": "arrow-u-up-left",
-                                                        "size": "sm",
-                                                        "quiet": true,
-                                                        "label": "Discard changes to ${$map.item.path}",
-                                                        "hint": "Discard changes",
-                                                        "disabled": {
-                                                          "$ref": "$map/item/cannotDiscard"
-                                                        }
-                                                      },
-                                                      "onclick": {
-                                                        "$prototype": "Function",
-                                                        "body": [
-                                                          {
-                                                            "operator": "call",
-                                                            "target": {
-                                                              "$ref": "#/state/discard"
-                                                            },
-                                                            "value": [
-                                                              {
-                                                                "$ref": "$map/item/path"
-                                                              }
-                                                            ]
-                                                          }
-                                                        ]
-                                                      }
-                                                    },
-                                                    {
-                                                      "tagName": "jx-action-button",
-                                                      "attributes": {
-                                                        "part": "stage",
-                                                        "data-action": "stage"
-                                                      },
-                                                      "$props": {
-                                                        "icon": "plus",
-                                                        "size": "sm",
-                                                        "quiet": true,
-                                                        "label": "Stage ${$map.item.path}",
-                                                        "hint": "Stage"
-                                                      },
-                                                      "onclick": {
-                                                        "$prototype": "Function",
-                                                        "body": [
-                                                          {
-                                                            "operator": "call",
-                                                            "target": {
-                                                              "$ref": "#/state/stage"
-                                                            },
-                                                            "value": [
-                                                              {
-                                                                "$ref": "$map/item/path"
-                                                              }
-                                                            ]
-                                                          }
-                                                        ]
-                                                      }
-                                                    }
-                                                  ]
-                                                }
-                                              }
-                                            },
-                                            {
-                                              "tagName": "span",
-                                              "attributes": {
-                                                "part": "badge",
-                                                "data-status": "${$map.item.status}"
-                                              },
-                                              "textContent": "${$map.item.status}"
-                                            }
-                                          ]
-                                        }
-                                      }
-                                    ]
-                                  }
-                                }
-                              ]
-                            },
-                            "empty": {
-                              "tagName": "p",
-                              "attributes": {
-                                "part": "empty-message",
-                                "data-empty": "changes"
-                              },
-                              "textContent": "Nothing to commit. Files you edit and save show up here."
-                            }
-                          }
-                        }
-                      ]
-                    }
-                  ]
-                },
-                "history": {
-                  "tagName": "div",
-                  "attributes": {
-                    "part": "history"
-                  },
-                  "children": [
-                    {
-                      "tagName": "div",
-                      "attributes": {
-                        "part": "history-slot",
-                        "role": "none"
-                      },
-                      "style": {
-                        "display": "contents"
-                      },
-                      "$switch": {
-                        "$ref": "#/state/historyState"
-                      },
-                      "cases": {
-                        "listed": {
-                          "tagName": "ul",
-                          "attributes": {
-                            "part": "history-list"
-                          },
-                          "children": [
-                            {
-                              "$prototype": "Array",
-                              "items": {
-                                "$ref": "#/state/commits"
-                              },
-                              "key": {
-                                "$ref": "$map/item/key"
-                              },
-                              "map": {
-                                "tagName": "li",
-                                "attributes": {
-                                  "part": "history-entry",
-                                  "data-hash": "${$map.item.hash}"
-                                },
-                                "children": [
-                                  {
-                                    "tagName": "span",
-                                    "attributes": {
-                                      "part": "history-hash"
-                                    },
-                                    "textContent": "${$map.item.hash}"
-                                  },
-                                  {
-                                    "tagName": "span",
-                                    "attributes": {
-                                      "part": "history-message"
-                                    },
-                                    "textContent": "${$map.item.message}"
-                                  },
-                                  {
-                                    "tagName": "span",
-                                    "attributes": {
-                                      "part": "history-meta"
-                                    },
-                                    "textContent": "${$map.item.meta}"
-                                  }
-                                ]
-                              }
-                            }
-                          ]
-                        },
-                        "empty": {
-                          "tagName": "p",
-                          "attributes": {
-                            "part": "empty-message",
-                            "data-empty": "history"
-                          },
-                          "textContent": "No commits yet. Each commit you make is a version you can come back to."
-                        }
-                      }
-                    }
-                  ]
-                }
-              }
-            },
-            {
-              "tagName": "div",
-              "attributes": {
-                "part": "busy-slot",
-                "role": "none"
-              },
-              "style": {
-                "display": "contents"
-              },
-              "$switch": {
-                "$ref": "#/state/busy"
-              },
-              "cases": {
-                "true": {
-                  "tagName": "p",
-                  "attributes": {
-                    "part": "status",
-                    "data-status": "busy"
-                  },
-                  "textContent": "Loading…"
-                }
-              }
-            },
-            {
-              "tagName": "div",
-              "attributes": {
-                "part": "failure-slot",
-                "role": "none"
-              },
-              "style": {
-                "display": "contents"
-              },
-              "$switch": {
-                "$ref": "#/state/hasError"
-              },
-              "cases": {
-                "true": {
-                  "tagName": "p",
-                  "attributes": {
-                    "part": "failure",
-                    "role": "alert"
-                  },
-                  "textContent": "${state.error}"
-                }
-              }
-            }
-          ]
-        }
-      }
-    }
-  ]
-}