@jxsuite/studio 5.2.0 → 5.4.0

package/src/surfaces/git-panel.json

@@ -15,7 +15,7 @@
     "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 (§11): one sentence saying what the region is for, then the action that fills it.",
+      "$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",
@@ -37,18 +37,30 @@
       "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-4)",
+      "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-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",
+      "flex": "1 1 auto",
       "flexDirection": "column",
       "gap": "1px",
       "minWidth": "0"
@@ -63,17 +75,28 @@
       "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-4)",
+      "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",
@@ -82,7 +105,7 @@
     },
     "& [part=\"branch-text\"]": {
       "display": "flex",
-      "flex": "1",
+      "flex": "1 1 auto",
       "flexDirection": "column",
       "gap": "1px",
       "minWidth": "0"
@@ -100,8 +123,17 @@
       "whiteSpace": "nowrap"
     },
     "& [part=\"branch-picker\"]": {
-      "flex": "none",
-      "maxWidth": "40%"
+      "$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",
@@ -270,7 +302,8 @@
       "fontSize": "var(--jx-text-sm)",
       "textAlign": "center"
     },
-    "& [part=\"error\"]": {
+    "& [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)",
@@ -279,7 +312,7 @@
       "fontSize": "var(--jx-text-sm)"
     },
     "@(forced-colors: active)": {
-      "& [part=\"error\"]": {
+      "& [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"
@@ -510,80 +543,89 @@
                     "data-remote": "yes"
                   },
                   "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"
+                        "part": "sync-head"
                       },
                       "children": [
                         {
-                          "tagName": "span",
+                          "tagName": "jx-action-button",
                           "attributes": {
-                            "part": "sync-label"
+                            "part": "refresh",
+                            "data-action": "refresh"
                           },
-                          "textContent": "${state.syncLabel}"
+                          "$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": "span",
+                          "tagName": "div",
                           "attributes": {
-                            "part": "updated-slot",
-                            "role": "none"
+                            "part": "sync-text"
                           },
-                          "style": {
-                            "display": "contents"
-                          },
-                          "$switch": {
-                            "$ref": "#/state/hasLastUpdated"
-                          },
-                          "cases": {
-                            "true": {
+                          "children": [
+                            {
                               "tagName": "span",
                               "attributes": {
-                                "part": "sync-time"
+                                "part": "sync-label"
                               },
-                              "textContent": "${state.lastUpdated}"
+                              "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": true
+                        "compact": false
                       },
                       "children": [
                         {
@@ -692,47 +734,55 @@
                     "data-remote": "none"
                   },
                   "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"
+                        "part": "sync-head"
                       },
                       "children": [
                         {
-                          "tagName": "span",
+                          "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-label"
+                            "part": "sync-text"
                           },
-                          "textContent": "Local only (no remote)"
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "attributes": {
+                                "part": "sync-label"
+                              },
+                              "textContent": "Local only (no remote)"
+                            }
+                          ]
                         }
                       ]
                     },
@@ -783,34 +833,42 @@
                 "part": "branch-row"
               },
               "children": [
-                {
-                  "tagName": "jx-icon",
-                  "attributes": {
-                    "part": "branch-icon"
-                  },
-                  "$props": {
-                    "name": "git-branch"
-                  }
-                },
                 {
                   "tagName": "div",
                   "attributes": {
-                    "part": "branch-text"
+                    "part": "branch-head"
                   },
                   "children": [
                     {
-                      "tagName": "span",
+                      "tagName": "jx-icon",
                       "attributes": {
-                        "part": "branch-label"
+                        "part": "branch-icon"
                       },
-                      "textContent": "Active branch"
+                      "$props": {
+                        "name": "git-branch"
+                      }
                     },
                     {
-                      "tagName": "span",
+                      "tagName": "div",
                       "attributes": {
-                        "part": "branch-name"
+                        "part": "branch-text"
                       },
-                      "textContent": "${state.branchName}"
+                      "children": [
+                        {
+                          "tagName": "span",
+                          "attributes": {
+                            "part": "branch-label"
+                          },
+                          "textContent": "Active branch"
+                        },
+                        {
+                          "tagName": "span",
+                          "attributes": {
+                            "part": "branch-name"
+                          },
+                          "textContent": "${state.branchName}"
+                        }
+                      ]
                     }
                   ]
                 },
@@ -1794,7 +1852,7 @@
             {
               "tagName": "div",
               "attributes": {
-                "part": "error-slot",
+                "part": "failure-slot",
                 "role": "none"
               },
               "style": {
@@ -1807,7 +1865,7 @@
                 "true": {
                   "tagName": "p",
                   "attributes": {
-                    "part": "error",
+                    "part": "failure",
                     "role": "alert"
                   },
                   "textContent": "${state.error}"

package/src/surfaces/git-panel.ts

@@ -229,8 +229,8 @@ function emptyValues(): GitPanelValues {
  *
  * Nothing is called on the elements, so the mount is all this has to wait for: the DOCUMENT is what
  * this surface renders, and the kit elements inside it settle their own templates one
- * `connectedCallback` later without anybody here asking them to (guidelines §1.1, "await the
- * element").
+ * `connectedCallback` later without anybody here asking them to (studio-ui-guidelines.md §1.1,
+ * "await the element").
  */
 export function mountGitPanelSurface(
   container: HTMLElement,

package/src/surfaces/github-auth.json

@@ -49,7 +49,8 @@
       "margin": "0"
     },
     "& [part=\"code\"]": {
-      "$description": "`<code>`, not a styled `<div>`: this is a literal string to be transcribed, and the element that says so is also the one a reader's own stylesheet and a screen reader's character-by-character mode already know about.",
+      "$description": "`<code>`, not a styled `<div>`: this is a literal string to be transcribed, and the element that says so is also the one a reader's own stylesheet and a screen reader's character-by-character mode already know about. It is this dialog's message, and the one string in it the reader must carry to another screen, so it opts back in to selection against the root's `user-select: none`. `all` rather than `text`: one click selects the whole code, so a copy never leaves a character behind.",
+      "userSelect": "all",
       "fontFamily": "var(--font-mono)",
       "fontSize": "24px",
       "fontWeight": "700",

package/src/surfaces/github-publish.ts

@@ -12,9 +12,9 @@
  *
  * **Each setter writes what the control now holds, first.** Nothing here refuses a value today, but
  * a binding only writes when the scope CHANGES: an adapter that decided a value without announcing
- * the raw one first would leave the field showing text the scope does not have, silently (§9.3, "a
- * controlled input is authoritative only while the scope value moves"). The echo is one line per
- * setter and it is what makes a later refusal possible at all.
+ * the raw one first would leave the field showing text the scope does not have, silently
+ * (studio-ui-guidelines.md §9.3, "a controlled input is authoritative only while the scope value
+ * moves"). The echo is one line per setter and it is what makes a later refusal possible at all.
  *
  * @docs studio/interface
  */

package/src/surfaces/grid-open.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioGridOpen",
-  "$description": "Every grid-able source a project has, grouped by where it comes from: the project's own pages and content collections first, then each connection's tables. It is the ISLAND of a confirm dialog rather than a dialog of its own — `ui/layers.ts`'s dialog owns the headline, the cancel button, modality and focus, and this document is only the list — because a second answer to \"what is a dialog\" is a defect (§12.5). Group headings are why it is not the kit menu: a menu row can carry a divider above it and cannot carry a name for the run it opens.",
+  "$description": "Every grid-able source a project has, grouped by where it comes from: the project's own pages and content collections first, then each connection's tables. It is the ISLAND of a confirm dialog rather than a dialog of its own — `ui/layers.ts`'s dialog owns the headline, the cancel button, modality and focus, and this document is only the list — because a second answer to \"what is a dialog\" is a defect (studio-ui-guidelines.md §12.5). Group headings are why it is not the kit menu: a menu row can carry a divider above it and cannot carry a name for the run it opens.",
   "tagName": "div",
   "attributes": {
     "part": "sources"

package/src/surfaces/grid-panel.json

@@ -7,7 +7,7 @@
     "part": "grid"
   },
   "style": {
-    "$description": "The frame's own layout and the engine's theme, and nothing that was a class. The toolbar is a single row that never wraps: the chrome budget (§12.2) caps what may stand in it, and the count is the only thing pinned to the far end.",
+    "$description": "The frame's own layout and the engine's theme, and nothing that was a class. The toolbar is a single row that never wraps: the chrome budget (studio-ui-guidelines.md §12.2) caps what may stand in it, and the count is the only thing pinned to the far end.",
     "display": "flex",
     "flexDirection": "column",
     "height": "100%",
@@ -459,7 +459,7 @@
                       "textContent": "${state.viewLabel}"
                     }
                   ],
-                  "$description": "One control for the four facets a saved view is made of, because they are only ever adjusted together (§12.2). Its label is the applied view's name, so the toolbar says what is on screen before the panel is opened."
+                  "$description": "One control for the four facets a saved view is made of, because they are only ever adjusted together (studio-ui-guidelines.md §12.2). Its label is the applied view's name, so the toolbar says what is on screen before the panel is opened."
                 },
                 {
                   "tagName": "jx-textfield",

package/src/surfaces/grid-views.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioGridViews",
-  "$description": "The grid's View panel: the saved views, and the four facets one of them is made of — columns, sort, grouping, and the filter the toolbar box holds. ONE control rather than four, because the chrome budget caps what may stand in a toolbar (§12.2) and these four are only ever adjusted together. There is no Apply button: every edit writes the working layout and applies immediately, so the panel is never showing something the grid is not already doing.",
+  "$description": "The grid's View panel: the saved views, and the four facets one of them is made of — columns, sort, grouping, and the filter the toolbar box holds. ONE control rather than four, because the chrome budget caps what may stand in a toolbar (studio-ui-guidelines.md §12.2) and these four are only ever adjusted together. There is no Apply button: every edit writes the working layout and applies immediately, so the panel is never showing something the grid is not already doing.",
   "tagName": "jx-popover",
   "attributes": {
     "part": "views-panel"

package/src/surfaces/inspector-dock.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioInspectorDock",
-  "$description": "⑨ The Inspector dock's own chrome, as a Jx document over the kit: a header naming what the dock is pointed at, a real `tablist` of four tabs, and four `tabpanel`s. It draws no tab BODY — all four are mounted documents of their own (`surfaces/properties-panel.json`, `surfaces/style-panel.json`, `surfaces/logic-panel.json`, and the assistant's) — so each panel carries one empty `[part=\"panel-body\"]` island the adapter announces through `onNodeCreated` (studio-ui-guidelines.md §9.4). The four panels are keyed on the tab id and the id list never changes, so a body host is created ONCE and lives as long as the dock: that is what the old module's hand-built permanent containers were for, and it is now a property of a keyed `$map` rather than a rule someone has to keep. `panels/right-panel.ts` keeps every decision — which tab is selected, per document or detached; what the target's name is; and which of the four seams a host is handed to.",
+  "$description": "The Inspector dock's own chrome, as a Jx document over the kit: a header naming what the dock is pointed at, a real `tablist` of four tabs, and four `tabpanel`s. It draws no tab BODY — all four are mounted documents of their own (`surfaces/properties-panel.json`, `surfaces/style-panel.json`, `surfaces/logic-panel.json`, and the assistant's) — so each panel carries one empty `[part=\"panel-body\"]` island the adapter announces through `onNodeCreated` (studio-ui-guidelines.md §9.4). The four panels are keyed on the tab id and the id list never changes, so a body host is created ONCE and lives as long as the dock: that is what the old module's hand-built permanent containers were for, and it is now a property of a keyed `$map` rather than a rule someone has to keep. `panels/right-panel.ts` keeps every decision — which tab is selected, per document or detached; what the target's name is; and which of the four seams a host is handed to.",
   "tagName": "div",
   "attributes": {
     "part": "inspector-dock"
@@ -42,7 +42,7 @@
       }
     },
     "& [part=\"tabs\"]": {
-      "$description": "Four words in a 280px dock, allowed to compress rather than to become anonymous — which is why the tabs are not icons (§3.2 ⑨). The kit tab's own 220px cap would let one tab push the last off the strip, so each takes an equal quarter.",
+      "$description": "Four words in a 280px dock, allowed to compress rather than to become anonymous — which is why the tabs are not icons (§6). The kit tab's own 220px cap would let one tab push the last off the strip, so each takes an equal quarter.",
       "flex": "0 0 auto",
       "gap": "0",
       "fontSize": "var(--jx-text-sm)"

package/src/surfaces/jump-bar.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioJumpBar",
-  "$description": "⑥ The jump bar: one pane's address, outermost step first, every step a command the adapter has already resolved against the registry. A step is a button when its command can run and a readout when it cannot — an address with a hole in it is a lie about containment, so a step never disappears. A step with more than one place to go carries the chevron that opens its siblings; one alternative is not a choice and draws no control. Nothing here decides what the bar says, which step is where you are, or what a chevron opens.",
+  "$description": "The jump bar: one pane's address, outermost step first, every step a command the adapter has already resolved against the registry. A step is a button when its command can run and a readout when it cannot — an address with a hole in it is a lie about containment, so a step never disappears. A step with more than one place to go carries the chevron that opens its siblings; one alternative is not a choice and draws no control. Nothing here decides what the bar says, which step is where you are, or what a chevron opens.",
   "tagName": "nav",
   "attributes": {
     "part": "bar",

package/src/surfaces/jump-bar.ts

@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
 /**
- * ⑥ The jump bar, as a Jx document over the kit — the mount seam, and nothing else.
+ * The jump bar, as a Jx document over the kit — the mount seam, and nothing else.
  *
  * `jump-bar.json` is the markup, the ARIA and the style; `panels/jump-bar.ts` is the flow — which
  * pane this bar is about, what its address is, which of its steps the registry can actually run,

package/src/surfaces/library-pane.ts

@@ -315,7 +315,8 @@ export function mountLibrarySurface(
   let disposed = false;
   /* Nothing is called on an element here, so the mount is all there is to wait for: the two islands
      announce themselves through `onNodeCreated` as they are created, which is one `connectedCallback`
-     EARLIER than awaiting the element would be (§1.1, "await the element"). */
+     EARLIER than awaiting the element would be (studio-ui-guidelines.md §1.1, "await the
+     element"). */
   const ready = mountSurface("library-pane", scope, host, {
     onNodeCreated: (element, _path, def, state) => {
       const part = partOf(def);

package/src/surfaces/logic-panel.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioLogicPanel",
-  "$description": "The Inspector's **Logic** tab — everything about how the selected element BEHAVES, as a Jx document over the kit. Plan §6.5 re-split the inspector by task rather than by data type: wiring a `$switch`, wiring a repeater to a collection and wiring a click handler are one job, and they were three, split across two tabs because a `$switch` is stored as a property and a click handler as a property-shaped function. So there are four sections here — Repeating list, Condition, Events, and a custom element's outward contract (Observed Attributes · CSS Properties · CSS Parts) — and each of them is a projection. The adapter (`panels/events-panel.ts`) keeps every decision: what the selection is, which rungs a position permits, what a handler currently holds, which elements of a multi-selection disagree about a key, and what a commit writes. Nothing here reads the document, asks the schema a question or knows what a Value Source is. Two islands, both through `onNodeCreated` (studio-ui-guidelines.md §9.4): `[part=\"control-host\"]` receives the expression editor, which is a lit surface of its own, and `[part=\"statements-host\"]` receives the `statements` surface, which is a mounted document of its own. Every bindable row carries `data-prop`, which is what `inspector/field:<prop>` addresses.",
+  "$description": "The Inspector's **Logic** tab — everything about how the selected element BEHAVES, as a Jx document over the kit. The Inspector is split by task rather than by data type (§6): wiring a `$switch`, wiring a repeater to a collection and wiring a click handler are one job, and they were three, split across two tabs because a `$switch` is stored as a property and a click handler as a property-shaped function. So there are four sections here — Repeating list, Condition, Events, and a custom element's outward contract (Observed Attributes · CSS Properties · CSS Parts) — and each of them is a projection. The adapter (`panels/events-panel.ts`) keeps every decision: what the selection is, which rungs a position permits, what a handler currently holds, which elements of a multi-selection disagree about a key, and what a commit writes. Nothing here reads the document, asks the schema a question or knows what a Value Source is. Two islands, both through `onNodeCreated` (studio-ui-guidelines.md §9.4): `[part=\"control-host\"]` receives the expression editor, which is a lit surface of its own, and `[part=\"statements-host\"]` receives the `statements` surface, which is a mounted document of its own. Every bindable row carries `data-prop`, which is what `inspector/field:<prop>` addresses.",
   "tagName": "div",
   "attributes": {
     "part": "logic"
@@ -14,7 +14,7 @@
     "fontSize": "var(--jx-text-md)",
     "color": "var(--fg)",
     "& [part=\"empty\"]": {
-      "$description": "The one empty-state pattern (§11.2), drawn here because a document cannot render a lit helper. It is a copy rather than a move — every panel still lit renders through that helper — and it goes when the last of them converts.",
+      "$description": "The one empty-state pattern (studio-ui-guidelines.md §11.2), drawn here because a document cannot render a lit helper. It is a copy rather than a move — every panel still lit renders through that helper — and it goes when the last of them converts.",
       "display": "flex",
       "flexDirection": "column",
       "alignItems": "center",
@@ -272,7 +272,7 @@
           },
           "children": [
             {
-              "$description": "Repeating list. Filter and Sort are always drawn: they used to hide behind `+ Add filter`, which seeded `{ $ref: \"#/state/\" }` — a binding to the empty pointer, which is not a signal — so the row opened already bound to nothing and the only way to type a literal was to cycle the mode ring twice (§11.4). A repeater has exactly three inputs, and an empty row states that better than a button does.",
+              "$description": "Repeating list. Filter and Sort are always drawn: they used to hide behind `+ Add filter`, which seeded `{ $ref: \"#/state/\" }` — a binding to the empty pointer, which is not a signal — so the row opened already bound to nothing and the only way to type a literal was to cycle the mode ring twice (§6.6). A repeater has exactly three inputs, and an empty row states that better than a button does.",
               "tagName": "div",
               "attributes": {
                 "part": "repeater-slot",
@@ -330,7 +330,7 @@
                             "$ref": "$map/item/key"
                           },
                           "map": {
-                            "$description": "A bindable value as a first-class field row. Every position it serves is a single-line expression — a collection, a filter, a sort key, a `$switch` — so it draws one widget rather than dispatching over a widget type: the textarea and checkbox arms the lit version carried had no caller in either tab. The set dot clears the position outright and is disabled where the position is mandatory; the source chip opens the rung picker rather than cycling, so any rung the position permits is one action away (§6.3).",
+                            "$description": "A bindable value as a first-class field row. Every position it serves is a single-line expression — a collection, a filter, a sort key, a `$switch` — so it draws one widget rather than dispatching over a widget type: the textarea and checkbox arms the lit version carried had no caller in either tab. The set dot clears the position outright and is disabled where the position is mandatory; the source chip opens the rung picker rather than cycling, so any rung the position permits is one action away (§6.6).",
                             "tagName": "jx-field",
                             "attributes": {
                               "part": "field",
@@ -634,7 +634,7 @@
                             "$ref": "$map/item/key"
                           },
                           "map": {
-                            "$description": "A bindable value as a first-class field row. Every position it serves is a single-line expression — a collection, a filter, a sort key, a `$switch` — so it draws one widget rather than dispatching over a widget type: the textarea and checkbox arms the lit version carried had no caller in either tab. The set dot clears the position outright and is disabled where the position is mandatory; the source chip opens the rung picker rather than cycling, so any rung the position permits is one action away (§6.3).",
+                            "$description": "A bindable value as a first-class field row. Every position it serves is a single-line expression — a collection, a filter, a sort key, a `$switch` — so it draws one widget rather than dispatching over a widget type: the textarea and checkbox arms the lit version carried had no caller in either tab. The set dot clears the position outright and is disabled where the position is mandatory; the source chip opens the rung picker rather than cycling, so any rung the position permits is one action away (§6.6).",
                             "tagName": "jx-field",
                             "attributes": {
                               "part": "field",
@@ -1145,7 +1145,7 @@
                             "$ref": "$map/item/key"
                           },
                           "map": {
-                            "$description": "One `on*` key. The Mixed contract (§6.5) splits in two and this row shows both halves: which events exist, how each is produced, and its removal are properties of the BATCH — binding one handler to six buttons is a single decision, so those three controls write to every selected element in one transaction — while what a handler CONTAINS is the PRIMARY's, because six elements do not share one body and broadcasting a keystroke into six of them would destroy five. The dot says `mixed` when the selected elements disagree; the body below it stays the primary's.",
+                            "$description": "One `on*` key. The Mixed contract (§6.7) splits in two and this row shows both halves: which events exist, how each is produced, and its removal are properties of the BATCH — binding one handler to six buttons is a single decision, so those three controls write to every selected element in one transaction — while what a handler CONTAINS is the PRIMARY's, because six elements do not share one body and broadcasting a keystroke into six of them would destroy five. The dot says `mixed` when the selected elements disagree; the body below it stays the primary's.",
                             "tagName": "div",
                             "attributes": {
                               "part": "binding",
@@ -1159,7 +1159,7 @@
                                 },
                                 "children": [
                                   {
-                                    "$description": "The event NAME, and it is free-form rather than a list of ten. The menu offers what this element already binds plus the ten worth suggesting, and its last row asks for any other name through the one prompt dialog Studio has — so `ondragover`, `onpointerdown` and every custom event a component emits are bindable, which is exactly what §6.5 asks for and what the closed picker refused.",
+                                    "$description": "The event NAME, and it is free-form rather than a list of ten. The menu offers what this element already binds plus the ten worth suggesting, and its last row asks for any other name through the one prompt dialog Studio has — so `ondragover`, `onpointerdown` and every custom event a component emits are bindable, which is exactly what §6.1 asks for and what the closed picker refused.",
                                     "tagName": "jx-action-button",
                                     "attributes": {
                                       "part": "event-name"