@jxsuite/studio 5.1.0 → 5.3.0

package/src/surfaces/commandbar.json

@@ -21,9 +21,6 @@
       "flex": "1",
       "flexShrink": "999"
     },
-    "& jx-button, & jx-action-button, & button": {
-      "WebkitAppRegion": "no-drag"
-    },
     "& [part=\"csd-lead\"], & [part=\"csd-trail\"], & [part=\"menu-slot\"], & [part=\"layouts-slot\"], & [part=\"presence-slot\"]": {
       "display": "contents"
     },
@@ -264,7 +261,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "close"
+                "data-control": "close",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -288,7 +286,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "minimize"
+                "data-control": "minimize",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -312,7 +311,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "maximize"
+                "data-control": "maximize",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -354,7 +354,8 @@
             }
           },
           "attributes": {
-            "data-menu": "studio"
+            "data-menu": "studio",
+            "class": "electrobun-webkit-app-region-no-drag"
           },
           "onclick": {
             "$prototype": "Function",
@@ -438,7 +439,8 @@
                   "aria-selected": "${$map.item.active ? 'true' : 'false'}",
                   "data-layout": "${$map.item.id}",
                   "data-active": "${$map.item.active ? '' : null}",
-                  "title": "${$map.item.title}"
+                  "title": "${$map.item.title}",
+                  "class": "electrobun-webkit-app-region-no-drag"
                 },
                 "textContent": "${$map.item.name}",
                 "onclick": {
@@ -484,7 +486,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "part": "layout-add"
+                "part": "layout-add",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -514,7 +517,8 @@
       "attributes": {
         "part": "center",
         "role": "group",
-        "aria-label": "Command Center"
+        "aria-label": "Command Center",
+        "class": "electrobun-webkit-app-region-no-drag"
       },
       "onclick": {
         "$prototype": "Function",
@@ -581,7 +585,8 @@
                   "part": "segment",
                   "type": "button",
                   "data-segment": "${$map.item.key}",
-                  "title": "${$map.item.title}"
+                  "title": "${$map.item.title}",
+                  "class": "electrobun-webkit-app-region-no-drag"
                 },
                 "textContent": "${$map.item.label}",
                 "onclick": {
@@ -666,7 +671,8 @@
               "quiet": true
             },
             "attributes": {
-              "data-command-id": "${$map.item.id}"
+              "data-command-id": "${$map.item.id}",
+              "class": "electrobun-webkit-app-region-no-drag"
             },
             "onclick": {
               "$prototype": "Function",
@@ -865,7 +871,8 @@
               "size": "sm"
             },
             "attributes": {
-              "data-command-id": "${$map.item.id}"
+              "data-command-id": "${$map.item.id}",
+              "class": "electrobun-webkit-app-region-no-drag"
             },
             "onchange": {
               "$prototype": "Function",
@@ -914,7 +921,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "minimize"
+                "data-control": "minimize",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -938,7 +946,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "maximize"
+                "data-control": "maximize",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -962,7 +971,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "close"
+                "data-control": "close",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",

package/src/surfaces/formula-palette.json

@@ -20,6 +20,9 @@
       "paddingTop": "60px",
       "background": "rgba(0, 0, 0, 0.4)"
     },
+    "& [part=\"overlay\"][hidden]": {
+      "display": "none"
+    },
     "& [part=\"panel\"]": {
       "width": "560px",
       "maxWidth": "calc(100vw - 32px)",
@@ -97,14 +100,12 @@
       "color": "inherit"
     }
   },
-  "$switch": {
-    "$ref": "#/state/open"
-  },
-  "cases": {
-    "true": {
+  "children": [
+    {
       "tagName": "div",
       "attributes": {
-        "part": "overlay"
+        "part": "overlay",
+        "hidden": "${state.open ? null : ''}"
       },
       "onclick": {
         "$prototype": "Function",
@@ -360,5 +361,5 @@
         }
       ]
     }
-  }
+  ]
 }

package/src/surfaces/formula-palette.ts

@@ -11,9 +11,12 @@
  *
  * **The mount is standing.** One slot in the popover layer, one document in it, and `open` is a
  * field of the scope rather than a render call — so opening the palette twice reuses the same
- * element tree and the `$switch` on `open` is what puts the overlay on screen and takes it away.
- * `getLayerSlot` hands back the same slot every time until something clears it, which is the one
- * case that re-mounts: a slot the layer no longer holds is not one this module may render into.
+ * element tree: the overlay is always PRESENT and a `hidden` attribute bound to `open` is what puts
+ * it on screen and takes it away, rather than a `$switch` that tore the whole subtree down and
+ * rebuilt it (and its `jx-listbox`) on every open — the per-open document-wide style recalculation
+ * that cost traced (`scripts/perf/REPORT.md`). `getLayerSlot` hands back the same slot every time
+ * until something clears it, which is the one case that re-mounts: a slot the layer no longer holds
+ * is not one this module may render into.
  *
  * **The rows and the highlight are separate fields**, exactly as `surfaces/palette.json`'s are —
  * and the highlight is now ONE field rather than a per-row comparison. A key moves `activeId`, the
@@ -285,9 +288,10 @@ function project(): void {
 /**
  * Focus the field once the document has drawn it.
  *
- * The mount settling means the DOCUMENT rendered; the `$switch` on `open` reconciles one microtask
- * later, so the field exists a turn after that — which is why this waits for the mount and then for
- * a turn, rather than reaching for the element straight away.
+ * The field is standing now, same as the overlay, but it stays behind `hidden` until the reactive
+ * binding on `open` reconciles — one microtask after the mount settles — so a focus reaching for it
+ * straight away would land on an element the reader cannot yet see. This waits for the mount and
+ * then for a turn, rather than reaching for the element immediately.
  */
 function focusInput(): void {
   const pending = _mount;

package/src/surfaces/palette.json

@@ -17,6 +17,9 @@
       "paddingTop": "60px",
       "background": "rgba(0, 0, 0, 0.4)"
     },
+    "& [part=\"overlay\"][hidden]": {
+      "display": "none"
+    },
     "& [part=\"panel\"]": {
       "width": "560px",
       "maxWidth": "calc(100vw - 32px)",
@@ -133,14 +136,12 @@
       "color": "var(--jx-fg-dim)"
     }
   },
-  "$switch": {
-    "$ref": "#/state/open"
-  },
-  "cases": {
-    "true": {
+  "children": [
+    {
       "tagName": "div",
       "attributes": {
-        "part": "overlay"
+        "part": "overlay",
+        "hidden": "${state.open ? null : ''}"
       },
       "onclick": {
         "$prototype": "Function",
@@ -531,5 +532,5 @@
         }
       ]
     }
-  }
+  ]
 }

package/src/surfaces/pane-grid.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioPaneGrid",
-  "$description": "The pane grid (studio.md §18.1): one cell per pane, with a splitter before every cell but the first. Every box here is EMPTY by design — the four inside a cell are hosts other modules fill (`panels/tab-strip.ts` the strip, `panels/jump-bar.ts` the jump bar, `panels/pane-context.ts` the chrome layer, `canvas/canvas-render.ts` the stage), and the stage is an ISLAND in the §9.4 sense: the canvas host mounts a cross-origin `<iframe>` into it, so nothing this document draws may ever go inside it. What the document owns is the STRUCTURE and the STYLE — the cell's own two-row grid, the three row-2 children that share its lower cell, and the splitter — which is `styles/shell.css`'s `.pane*` block and `styles/canvas.css`'s `.pane-stage` rule, carried here and keyed on `part`. Two things are load-bearing and easy to undo. (1) **A row that moves reloads an iframe**, so the keyed `$map` is not an optimisation: `workspace.panes[0]` is always the primary and `MAX_PANES` is 2, the key is the pane id, and the runtime's forward-cursor pass therefore never moves a kept row — gaining or losing the side pane leaves the primary's node, and the frame inside it, untouched. (2) **The splitter must sit BETWEEN two cells and inside neither**, so each row is a `display: contents` wrapper holding its own leading splitter and its cell: the wrapper generates no box, so the splitter and the two cells are the grid items of `#pane-grid` in DOM order, and a pointer landing on the splitter is in no cell at all. Every selector below is a `>` chain from the root, because a pane's stage hosts other surface documents and a bare `[part=\"row\"]` descendant rule would reach into them.",
+  "$description": "The pane grid (studio.md §18.1): one cell per pane, with a splitter before every cell but the first. Every box here is EMPTY by design — the FIVE inside a cell are hosts other modules fill (`panels/tab-strip.ts` the strip, `panels/jump-bar.ts` the jump bar, `panels/pane-context.ts` the chrome layer, `canvas/canvas-render.ts` the stage, `panels/pane-grid.ts` itself the right-edge drop zone), and the stage is an ISLAND in the §9.4 sense: the canvas host mounts a cross-origin `<iframe>` into it, so nothing this document draws may ever go inside it. What the document owns is the STRUCTURE and the STYLE — the cell's own two-row grid, the three row-2 children that share its lower cell, and the splitter — which is `styles/shell.css`'s `.pane*` block and `styles/canvas.css`'s `.pane-stage` rule, carried here and keyed on `part`. Two things are load-bearing and easy to undo. (1) **A row that moves reloads an iframe**, so the keyed `$map` is not an optimisation: `workspace.panes[0]` is always the primary and `MAX_PANES` is 2, the key is the pane id, and the runtime's forward-cursor pass therefore never moves a kept row — gaining or losing the side pane leaves the primary's node, and the frame inside it, untouched. (2) **The splitter must sit BETWEEN two cells and inside neither**, so each row is a `display: contents` wrapper holding its own leading splitter and its cell: the wrapper generates no box, so the splitter and the two cells are the grid items of `#pane-grid` in DOM order, and a pointer landing on the splitter is in no cell at all. Every selector below is a `>` chain from the root, because a pane's stage hosts other surface documents and a bare `[part=\"row\"]` descendant rule would reach into them.",
   "tagName": "div",
   "attributes": {
     "part": "grid",
@@ -27,7 +27,7 @@
       "zIndex": "10"
     },
     "& > [part=\"row\"] > [part=\"pane\"]": {
-      "$description": "ONE PANE, and one COLUMN, declared. Three children name `grid-row: 2` in order to share the lower cell, and auto-placement answers that by inventing an implicit column each: the jump bar, the chrome layer and the stage lined up side by side, the stage taking a third of the pane and pinning the document to the right edge. `grid-template-columns` is what makes \"share the cell\" mean it, and every row-2 child restates `grid-column: 1` so a future fourth one cannot re-open the same hole. No unit test can see this — happy-dom does no layout, so every rect is zero — which is why the screenshot lane is what caught it.",
+      "$description": "ONE PANE, and one COLUMN, declared. Four children name `grid-row: 2` in order to share the lower cell, and auto-placement answers that by inventing an implicit column each: the jump bar, the chrome layer, the stage and the drop zone lined up side by side, the stage taking a third of the pane and pinning the document to the right edge. `grid-template-columns` is what makes \"share the cell\" mean it, and every row-2 child restates `grid-column: 1` so a future fifth one cannot re-open the same hole. No unit test can see this — happy-dom does no layout, so every rect is zero — which is why the screenshot lane is what caught it.",
       "display": "grid",
       "gridTemplateColumns": "minmax(0, 1fr)",
       "gridTemplateRows": "auto minmax(0, 1fr)",
@@ -82,11 +82,33 @@
       "display": "flex",
       "gap": "var(--jx-space-6)",
       "alignItems": "flex-start"
+    },
+    "& > [part=\"row\"] > [part=\"pane\"] > [part=\"drop-zone\"]": {
+      "$description": "The right-edge target that creates a second pane (§18.1). Sits ABOVE the stage (`z-index: 4` against the stage's own stacking, jump's 3, chrome's 2) so a drag reaches it before it reaches the cross-origin iframe underneath, which would otherwise swallow every drag event with no affordance to say so. `pointer-events: none` when unarmed — a mouse doing anything other than dragging a tab or a file must pass straight through to the stage — and `auto` only while `data-armed` is set, which `panels/pane-grid.ts`'s own arming monitor writes for the DURATION of a drag it recognises, never for a click.",
+      "gridRow": "2",
+      "gridColumn": "1",
+      "position": "relative",
+      "zIndex": "4",
+      "minWidth": "0",
+      "pointerEvents": "none"
+    },
+    "& > [part=\"row\"] > [part=\"pane\"] > [part=\"drop-zone\"][data-armed]": {
+      "pointerEvents": "auto"
+    },
+    "& > [part=\"row\"] > [part=\"pane\"] > [part=\"drop-zone\"][data-over]::after": {
+      "$description": "The right BAND, not the whole cell: the zone only ever ACCEPTS a drop in that band (`panels/pane-grid.ts`'s `edgeData`), so lighting the whole cell would promise a drop this element refuses everywhere else in it.",
+      "content": "\"\"",
+      "position": "absolute",
+      "insetBlock": "0",
+      "insetInlineEnd": "0",
+      "insetInlineStart": "50%",
+      "background": "color-mix(in srgb, var(--accent) 14%, transparent)",
+      "borderInlineStart": "2px solid var(--accent)"
     }
   },
   "children": [
     {
-      "$description": "Keyed on the PANE ID, and that is the whole of §18.1 rule 1's structural half: the key is what makes the runtime MOVE a kept row rather than rebuild it, and re-parenting is not a move for an `<iframe>` — it reloads, dropping its `iframe-channel` connection, its shadow document and every `ready` panel with it. A row renders complete (its cell, its four hosts and its splitter) inside the row's own effect scope before it is inserted, so there is no frame in which a cell exists with no stage inside it.",
+      "$description": "Keyed on the PANE ID, and that is the whole of §18.1 rule 1's structural half: the key is what makes the runtime MOVE a kept row rather than rebuild it, and re-parenting is not a move for an `<iframe>` — it reloads, dropping its `iframe-channel` connection, its shadow document and every `ready` panel with it. A row renders complete (its cell, its five hosts and its splitter) inside the row's own effect scope before it is inserted, so there is no frame in which a cell exists with no stage inside it.",
       "$prototype": "Array",
       "items": { "$ref": "#/state/rows" },
       "key": { "$ref": "$map/item/id" },
@@ -178,6 +200,16 @@
                   "part": "pane-stage",
                   "data-jx-region": "${$map.item.region}"
                 }
+              },
+              {
+                "$description": "The right-edge drop target (§18.1). No `data-jx-region`: `pane.<id>` uniqueness names the stage, and a second element answering to it would be a silently widened crop the moment a shot cropped this pane.",
+                "tagName": "div",
+                "attributes": {
+                  "part": "drop-zone",
+                  "role": "none",
+                  "data-armed": "${state.armed ? '' : null}",
+                  "data-over": "${state.edgePane === $map.item.id ? '' : null}"
+                }
               }
             ]
           }

package/src/surfaces/pane-grid.ts

@@ -63,8 +63,8 @@ export const PANE_SELECTOR = `[part="${PANE_PART}"]`;
  */
 export const STAGE_SELECTOR = `[part="${STAGE_PART}"]`;
 
-/** The five boxes a cell is made of, in the order the document draws them. */
-export type PaneCellPart = "pane" | "strip" | "jump" | "chrome" | "stage";
+/** The six boxes a cell is made of, in the order the document draws them. */
+export type PaneCellPart = "pane" | "strip" | "jump" | "chrome" | "stage" | "dropZone";
 
 const CELL_PARTS: ReadonlyMap<string, PaneCellPart> = new Map([
   ["pane", "pane"],
@@ -72,6 +72,7 @@ const CELL_PARTS: ReadonlyMap<string, PaneCellPart> = new Map([
   ["jump", "jump"],
   ["chrome", "chrome"],
   ["pane-stage", "stage"],
+  ["drop-zone", "dropZone"],
 ]);
 
 /**
@@ -134,6 +135,14 @@ export interface PaneGridActions {
   settle: () => void;
 }
 
+/** Whether the right-edge zones are armed, and which pane's is under the pointer. */
+export interface PaneGridDragState {
+  /** Whether ANY tab-drop-eligible drag is live — the zones' shared `pointer-events` gate. */
+  armed: boolean;
+  /** The pane whose zone is under the pointer, or `""` for none. */
+  edgePane: string;
+}
+
 export interface PaneGridSurface {
   /** Resolves once the first projection is in the document. */
   ready: Promise<void>;
@@ -146,12 +155,18 @@ export interface PaneGridSurface {
    * gains or loses a pane, which is the only moment anything else could have moved it.
    */
   update: (rows: PaneGridRow[], split: number) => void;
+  /**
+   * Write the right-edge indicators, independently of {@link update} — the same reason
+   * `TabStripSurface.drag` is separate from its own `update`: a re-project the drag itself did not
+   * cause must not clear an indicator the arming monitor just lit.
+   */
+  drag: (state: PaneGridDragState) => void;
   /** Take the document down and give `#pane-grid` back empty. Idempotent. */
   dispose: () => void;
 }
 
 /** The scope `pane-grid.json` reads. */
-interface PaneGridScope extends Record<string, unknown> {
+interface PaneGridScope extends Record<string, unknown>, PaneGridDragState {
   rows: PaneGridRow[];
   /** `jx-split`'s `value`. */
   paneSplit: number;
@@ -202,6 +217,8 @@ export function mountPaneGridSurface(
 ): PaneGridSurface {
   host.replaceChildren();
   const scope = reactive<PaneGridScope>({
+    armed: false,
+    edgePane: "",
     move: actions.move,
     paneSplit: split.value,
     rows,
@@ -217,7 +234,7 @@ export function mountPaneGridSurface(
   const ready = mountSurface("pane-grid", scope, host, {
     /* No `instanceof` narrowing and no "is there a pane" guard, and both absences are structural.
        `pane-grid.json` draws no text and no `textContent`, so every node the runtime reports here
-       is an element; and the five cell parts exist only inside the repeater's rows, so a `$map`
+       is an element; and the six cell parts exist only inside the repeater's rows, so a `$map`
        scope is always there to name the pane. A guard on either would be a branch the document
        cannot reach — which is a line no test could ever cover, which is a claim nothing checks. */
     onNodeCreated: (element, _path, def, state) => {
@@ -241,6 +258,11 @@ export function mountPaneGridSurface(
       mounted = null;
       host.replaceChildren();
     },
+    drag(state) {
+      // Independent of `update`'s field list — see {@link PaneGridSurface.drag}.
+      scope.armed = state.armed;
+      scope.edgePane = state.edgePane;
+    },
     ready,
     update(next, value) {
       scope.rows = next;

package/src/surfaces/tab-strip.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioTabStrip",
-  "$description": "One pane's tab strip, as a Jx document over the kit: a real `tablist` of `jx-tab`s, or — for a pane that owns no document — the derivation chip naming what it is a projection of, and in both cases one trailing button. `panels/tab-strip.ts` keeps every decision: which pane a host is drawing, what each tab is called (the shortest unique suffix, and a page's ROUTE), what its tooltip says, whether closing it needs a prompt, what the overflow chevron lists and what the context menu offers. This document owns the markup, the ARIA, the keyboard and the style, and it holds THREE things the old chip drew by hand and the kit now draws: the tab's own selected state (`aria-selected`, not an `.active` class), its close button, and its dirty dot. The three that are Studio's alone go in `jx-tab`'s slots — the drill-in marker in `icon`, the draft pill in `status`, the pin toggle in `actions` (ui.md §5.4) — which is the gap that kept this strip out of the tab pattern until now.",
+  "$description": "One pane's tab strip, as a Jx document over the kit: a real `tablist` of `jx-tab`s, or — for a pane that owns no document — the derivation chip naming what it is a projection of, and in both cases one trailing button. `panels/tab-strip.ts` keeps every decision: which pane a host is drawing, what each tab is called (the shortest unique suffix, and a page's ROUTE), what its tooltip says, whether closing it needs a prompt, what the overflow chevron lists and what the context menu offers. This document owns the markup, the ARIA, the keyboard and the style, and it holds THREE things the old chip drew by hand and the kit now draws: the tab's own selected state (`aria-selected`, not an `.active` class), its close button, and its dirty dot. The three that are Studio's alone go in `jx-tab`'s slots — the drill-in marker in `icon`, the draft pill in `status`, the pin toggle in `actions` (ui.md §5.4) — which is the gap that kept this strip out of the tab pattern until now. **Drag is `@atlaskit/pragmatic-drag-and-drop`, not native HTML5 DnD**: a chip carries no `draggable` attribute and no `ondrag*` handler, because `panels/tab-strip.ts` registers every chip and every strip as a pragmatic source/target through `onNodeCreated` and resolves a completed drag in `panels/tab-drop.ts`. What is left here is three SCOPE comparisons, exactly as `files-panel.json` marks a row under drag: `data-dragging` on the chip being carried, `data-drop` on the chip a drop would land beside, `data-drop-tail` on the strip when the drop is its empty tail.",
   "tagName": "div",
   "attributes": {
     "part": "strip-row",
@@ -44,6 +44,13 @@
         "display": "none"
       }
     },
+    "& [part=\"tabs\"][data-drop-tail]::after": {
+      "$description": "The strip's own tail target: a drop onto the empty space after the last chip, or onto a pane whose strip carries no chips at all — an empty pane made a target during a drag by `panels/tab-strip.ts`'s `project`. A fixed-width bar rather than a background tint, so it reads the same as a chip's own `data-drop` edge instead of a second visual language for the same gesture.",
+      "content": "\"\"",
+      "flex": "0 0 2px",
+      "alignSelf": "stretch",
+      "background": "var(--accent)"
+    },
     "& [part=\"tab\"]": {
       "$description": "`.tab-strip-tab`. The kit's tab caps itself at 220px and reserves a control's height; a chrome row is tighter than that and its labels are the shortest unique suffix, so both are re-declared. `flex-shrink: 0` is what makes the strip scroll rather than squeeze fifteen documents into one width.",
       "gap": "var(--jx-space-1)",
@@ -64,6 +71,10 @@
       },
       "&[data-dragging]": {
         "opacity": "0.4"
+      },
+      "&[data-drop]": {
+        "$description": "The chip a drop would land BESIDE. An inset shadow rather than a border, so the indicator draws no layout shift mid-drag — the same reason `files-panel.json`'s row indicators are backgrounds rather than borders.",
+        "boxShadow": "inset 2px 0 0 var(--accent)"
       }
     },
     "& [part=\"tab\"] [part=\"label\"]": {
@@ -206,7 +217,8 @@
           "attributes": {
             "part": "tabs",
             "label": "${state.stripLabel}",
-            "selected": "${state.active}"
+            "selected": "${state.active}",
+            "data-drop-tail": "${state.dropTail ? '' : null}"
           },
           "onchange": {
             "$prototype": "Function",
@@ -245,11 +257,11 @@
                   "label": "${$map.item.label}",
                   "title": "${$map.item.title}",
                   "closable": "",
-                  "draggable": "true",
                   "dirty": "${$map.item.dirty ? '' : null}",
                   "data-pinned": "${$map.item.pinned ? '' : null}",
                   "data-preview": "${$map.item.preview ? '' : null}",
-                  "data-dragging": "${$map.item.dragging ? '' : null}"
+                  "data-dragging": "${state.dragKey === $map.item.key ? '' : null}",
+                  "data-drop": "${state.dropIndex === $map.item.index ? '' : null}"
                 },
                 "ondblclick": {
                   "$prototype": "Function",
@@ -297,41 +309,6 @@
                     }
                   ]
                 },
-                "ondragstart": {
-                  "$prototype": "Function",
-                  "body": [
-                    {
-                      "operator": "call",
-                      "target": { "$ref": "#/state/dragStart" },
-                      "value": [{ "$ref": "$map/item/key" }, { "$ref": "event#/dataTransfer" }]
-                    }
-                  ]
-                },
-                "ondragend": {
-                  "$prototype": "Function",
-                  "body": [
-                    {
-                      "operator": "call",
-                      "target": { "$ref": "#/state/dragEnd" },
-                      "value": []
-                    }
-                  ]
-                },
-                "ondragover": {
-                  "$prototype": "Function",
-                  "body": [{ "preventDefault": true }]
-                },
-                "ondrop": {
-                  "$prototype": "Function",
-                  "body": [
-                    { "preventDefault": true },
-                    {
-                      "operator": "call",
-                      "target": { "$ref": "#/state/drop" },
-                      "value": [{ "$ref": "$map/item/index" }, { "$ref": "event#/dataTransfer" }]
-                    }
-                  ]
-                },
                 "children": [
                   {
                     "$description": "The drill-in marker: this document was opened FROM another one. `jx-tab`'s icon slot draws it before the label, which is where it has always been.",

package/src/surfaces/tab-strip.ts

@@ -31,7 +31,8 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import tabStripDoc from "./tab-strip.json";
-import type { JxDocument } from "@jxsuite/schema/types";
+import type { JxDocument, JxElement } from "@jxsuite/schema/types";
+import type { JxScope } from "@jxsuite/runtime/types";
 import type { SurfaceHandle } from "../ui/surface";
 
 registerSurface("tab-strip", tabStripDoc as unknown as JxDocument);
@@ -50,7 +51,6 @@ export interface TabChipView extends Record<string, unknown> {
   dirty: boolean;
   pinned: boolean;
   preview: boolean;
-  dragging: boolean;
   /** Whether to draw the drill-in marker. */
   origin: boolean;
   /** "Pin" or "Unpin" — the pin button's whole accessible name. */
@@ -106,18 +106,39 @@ export interface TabStripActions {
   context: (id: string, x: number, y: number) => void;
   /** The chevron, or a derived pane's ✕. The anchor is the button that was pressed. */
   openTrailing: (anchor: HTMLElement | null) => void;
-  /** A drag left this chip. The `DataTransfer` is the platform's and may be absent. */
-  dragStart: (id: string, transfer: DataTransfer | null) => void;
-  dragEnd: () => void;
-  /** A drop landed on the chip at `index`. */
-  drop: (index: number, transfer: DataTransfer | null) => void;
   /** A wheel over the strip. A host function in handler position, so it takes the event. */
   wheel: (scope: unknown, event: WheelEvent) => void;
+  /** A chip element exists. `panels/tab-strip.ts` makes it a pragmatic drag source and drop target. */
+  chipHost: (element: HTMLElement, id: string) => void;
+  /**
+   * The `jx-tabs` element exists. `panels/tab-strip.ts` makes it a drop target of its own — the
+   * strip's empty tail, and the whole of an empty pane's strip while a drag is live.
+   */
+  stripHost: (element: HTMLElement) => void;
+}
+
+/**
+ * What one strip shows about the drag in progress — written independently of {@link TabStripValues}
+ * so the indicators survive an ordinary re-project mid-drag.
+ */
+export interface TabStripDragState {
+  /** The tab id being carried, or `""` when nothing from this strip is. */
+  dragKey: string;
+  /** The chip a drop would land beside, by slot index, or `-1` for none. */
+  dropIndex: number;
+  /** Whether a drop would land in the strip's empty tail. */
+  dropTail: boolean;
 }
 
 export interface TabStripSurface {
   /** Bring the standing document up to date. An assignment; the mount is never rebuilt. */
   update: (values: TabStripValues) => void;
+  /**
+   * Write the drag indicators, independently of {@link update}. The one writer of `dragKey`,
+   * `dropIndex` and `dropTail` — `update` never touches them, which is what keeps an indicator lit
+   * across a repaint the drag itself did not cause.
+   */
+  drag: (state: TabStripDragState) => void;
   /** The `jx-tabs` element, once it exists — the one thing a measurement needs. */
   strip: () => HTMLElement | null;
   /** Take the document down and give the host back empty. Idempotent. */
@@ -125,7 +146,21 @@ export interface TabStripSurface {
 }
 
 /** The scope `tab-strip.json` reads. */
-interface TabStripScope extends Record<string, unknown>, TabStripValues, TabStripActions {}
+interface TabStripScope
+  extends Record<string, unknown>, TabStripValues, TabStripActions, TabStripDragState {}
+
+/** The `part` a node's definition carries, or `""` for a text node or an unmarked element. */
+function partOf(def: JxElement | string): string {
+  const part = typeof def === "string" ? undefined : def.attributes?.["part"];
+  return typeof part === "string" ? part : "";
+}
+
+/** The tab id a mapped `jx-tab` node was rendered for, read from the row scope, or `""`. */
+function mappedChipKey(state: JxScope | undefined): string {
+  const map = state?.["$map"] as { item?: { key?: unknown } } | undefined;
+  const key = map?.item?.key;
+  return typeof key === "string" ? key : "";
+}
 
 /**
  * Mount one strip into `host`.
@@ -143,17 +178,38 @@ export function mountTabStripSurface(
   values: TabStripValues,
   actions: TabStripActions,
 ): TabStripSurface {
-  const scope = reactive<TabStripScope>({ ...values, ...actions }) as TabStripScope;
+  const scope = reactive<TabStripScope>({
+    ...values,
+    ...actions,
+    dragKey: "",
+    dropIndex: -1,
+    dropTail: false,
+  }) as TabStripScope;
 
   host.replaceChildren();
   let mounted: SurfaceHandle | null = null;
   let disposed = false;
   let strip: HTMLElement | null = null;
   void mountSurface("tab-strip", scope, host, {
-    onNodeCreated: (element, _path, def) => {
-      const part = typeof def === "string" ? undefined : def.attributes?.["part"];
-      if (part === "tabs" && element instanceof HTMLElement) {
+    onNodeCreated: (element, _path, def, state) => {
+      /* `disposed` first, for the reason `files-panel.ts`'s `mountFilesPanelSurface` guards it: the
+         mount is asynchronous, and a strip taken down inside the same turn — the pane whose host
+         this is has gone away — still walks this callback for every node its document creates.
+         Adopting one then would register a drag source nothing is left to release. */
+      if (disposed || !(element instanceof HTMLElement)) {
+        return;
+      }
+      const part = partOf(def);
+      if (part === "tabs") {
         strip = element;
+        actions.stripHost(element);
+        return;
+      }
+      if (part === "tab") {
+        const id = mappedChipKey(state);
+        if (id) {
+          actions.chipHost(element, id);
+        }
       }
     },
   }).then((surface) => {
@@ -172,6 +228,14 @@ export function mountTabStripSurface(
       strip = null;
       host.replaceChildren();
     },
+    drag(state) {
+      /* Independent of {@link update}'s field list, which is the whole point: these three are
+         written by the drag monitor on every pointer move, and `update`'s ordinary re-project must
+         not clear them out from under a drag it did not cause. */
+      scope.dragKey = state.dragKey;
+      scope.dropIndex = state.dropIndex;
+      scope.dropTail = state.dropTail;
+    },
     strip: () => strip,
     update(next) {
       /* Field by field, so an unchanged one is inert. A whole-object assignment would re-run every