@jxsuite/studio 5.0.0 → 5.2.0

package/src/surfaces/commandbar.ts

@@ -43,6 +43,7 @@ import { armPreviewOverlay, flushPreviewOverlay } from "../preview/preview-overl
 import { documentUrlPattern, dynamicRouteParams } from "../page-params";
 import { getNodeAtPath, nodeLabel, projectState } from "../store";
 import { activeRegistry } from "../commands/active-registry";
+import { runActiveReported, runReported } from "../commands/run-reported";
 import { notify } from "../services/notify";
 import { mountSurface, registerSurface } from "../ui/surface";
 import { rectOf } from "../utils/geometry";
@@ -521,7 +522,7 @@ export async function saveLayoutPrompt(registry: CommandRegistry): Promise<void>
     placeholder: "Layout name",
   });
   if (name) {
-    await registry.run("view.saveLayout", { name });
+    await runReported(registry, "view.saveLayout", { name }, "Command Bar");
   }
 }
 
@@ -533,7 +534,7 @@ export async function renameLayoutPrompt(
 ): Promise<void> {
   const name = await showPromptDialog("Rename layout", { confirmLabel: "Rename", value: current });
   if (name) {
-    await registry.run("view.renameLayout", { layout, name });
+    await runReported(registry, "view.renameLayout", { layout, name }, "Command Bar");
   }
 }
 
@@ -707,7 +708,7 @@ function openStudioMenu(opener: HTMLElement): void {
     rows: overflowRows(registry),
     run: (id) => {
       if (registry.isEnabled(id)) {
-        void registry.run(id);
+        void runReported(registry, id, undefined, "Command Bar");
       }
     },
   });
@@ -751,7 +752,7 @@ function state(): CommandBarScope {
     run: (id) => {
       const registry = activeRegistry();
       if (registry?.isEnabled(id)) {
-        void registry.run(id);
+        void runReported(registry, id, undefined, "Command Bar");
       }
     },
     saveLayout: () => {
@@ -762,7 +763,7 @@ function state(): CommandBarScope {
     },
     segments: [],
     setLayout: (id) => {
-      void activeRegistry()?.run("view.setLayout", { layout: id });
+      void runActiveReported("view.setLayout", { layout: id }, "Command Bar");
     },
     windowControl: (action) => {
       windowControls()?.[action]();

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/statusbar.ts

@@ -53,6 +53,7 @@ import { effect, effectScope, reactive } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
 import { EDITOR_KIND_LABELS } from "../commands/context";
 import { activeRegistry } from "../commands/active-registry";
+import { runReported } from "../commands/run-reported";
 import { deployStatusItem } from "../publish/deploy-checklist";
 import { collabState } from "../collab/collab-state";
 import { problemCount, problems } from "../services/notify";
@@ -378,7 +379,7 @@ function state(): StatusbarScope {
       const item = _state?.fields.flatMap((field) => field.items).find((i) => i.key === key);
       const registry = activeRegistry();
       if (item?.command && registry) {
-        void registry.run(item.command, item.args as never);
+        void runReported(registry, item.command, item.args as never, "Status Bar");
       }
     },
   }) as StatusbarScope;

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

package/src/tabs/project-config.ts

@@ -48,12 +48,15 @@
  * write, and therefore with an empty diff.
  *
  * **A real edit is a one-line diff.** The file's layout — which objects sit on one line, where a
- * blank line falls — is read once per binding ({@link seedCommitted}) and every serialisation here
- * honours it, so what changes on disk is the field that changed.
+ * blank line falls — is read once per binding ({@link seedCommitted}), replaced by the record of
+ * whatever bytes reached the file another way ({@link adoptProjectConfig}), and every serialisation
+ * here honours it, so what changes on disk is the field that changed.
  *
  * **Collaboration.** `project.json` is out of collab replication; the gate is in
  * `collab/collab-session.ts`'s `ensureCollab`, which is what would otherwise register the Yjs
  * history delegate over this tab.
+ *
+ * @docs studio/projects/settings
  */
 
 import { errorMessage } from "@jxsuite/schema/parse";
@@ -64,7 +67,7 @@ import { requireProjectState, setProjectState } from "../state";
 import { setWorkspaceProject, workspace } from "../workspace/workspace";
 import { PROJECT_CONFIG_PATH, createTab, disposeTab } from "./tab";
 import { transactDoc } from "./transact";
-import { parseJsonDocument, serializeJson } from "../files/json-layout";
+import { deriveJsonLayout, parseJsonDocument, serializeJson } from "../files/json-layout";
 import type { JsonLayout } from "../files/json-layout";
 
 import type { Tab } from "./tab";
@@ -114,8 +117,9 @@ let _detached: Tab | null = null;
 let _committed: string | null = null;
 
 /**
- * The layout the file was read in ({@link seedCommitted}), for a binding with no open tab to carry
- * it. Reset with the binding: a different project is a different file.
+ * The layout the file was read in ({@link seedCommitted}) or last written in ({@link
+ * adoptProjectConfig}), for a binding with no open tab to carry it. Reset with the binding: a
+ * different project is a different file.
  */
 let _layout: JsonLayout | null = null;
 
@@ -241,16 +245,28 @@ function liveConfig(): ProjectConfig | null {
 }
 
 /**
- * Make `target` hold exactly `source`'s keys — assignment alone would leave the removals behind.
+ * Make `target` hold exactly `source`'s keys, in `source`'s ORDER.
+ *
+ * Every key goes, the ones `source` keeps included, before `source` is assigned over the empty
+ * object. Assignment alone would leave the removals behind; deleting only the removals would leave
+ * the ORDER behind, because a key that survives keeps the position it had and only a new one takes
+ * `source`'s. Key order is what the serializer writes the file in, so a document holding the
+ * assistant's configuration in the previous file's order re-lays the file the assistant just wrote
+ * on the next commit — even a no-op one, which then disagrees with {@link _committed} (issue 331).
+ * The rival handover in {@link commitProjectConfig} is the same case from the other side: the
+ * object of record is the source, and its order is the file's.
+ *
+ * The transient — an observer of a single key would see it gone and back within the transaction —
+ * is one the removals already had, and nothing observes the configuration document key by key: the
+ * settings surfaces render from `projectState` and mutate it in place, and every reader of the
+ * document follows the root reference {@link transactDoc} replaces when the transaction ends.
  *
  * @param {Record<string, unknown>} target
  * @param {ProjectConfig} source
  */
 function replaceContents(target: Record<string, unknown>, source: ProjectConfig): void {
   for (const key of Object.keys(target)) {
-    if (!Object.hasOwn(source, key)) {
-      delete target[key];
-    }
+    delete target[key];
   }
   Object.assign(target, source);
 }
@@ -444,14 +460,26 @@ export async function commitProjectConfig(
  * assistant's write back out of existence. Putting the bytes into the document instead keeps the
  * one-object rule true, and the state sync follows from the bind effect like every other change.
  *
+ * **The layout record travels with the write.** The assistant authored the whole file, and the text
+ * it wrote is the file now — so the record the next commit honours is derived from THAT text
+ * (`json-layout.ts`'s `deriveJsonLayout`), exactly as a reload from disk would derive it, and it
+ * replaces both the seed's record and the open tab's. Keeping the record the chokepoint read BEFORE
+ * the write is what turned the settings edit after an assistant rewrite into a whole-file diff: the
+ * file was on disk in the assistant's layout and the commit re-laid it in the previous one (issue
+ * 331). The key order travels the same way: {@link replaceContents} installs `config`'s order on
+ * the document, so a rewrite that moved a top-level key stays moved. Nothing here re-reads the file
+ * to learn any of this: the caller just produced the bytes, and a second parse of `project.json` is
+ * the rival object this door exists to prevent.
+ *
  * `skipHistory`, because this is a RELOAD and not an edit: the file already says this, and
  * `write_file` tells the model in as many words that its disk writes are not undoable. A history
  * entry here would offer ⌘Z a change it could not take back from the file.
  *
  * @param {ProjectConfig} config The configuration as written — already past the schema gate.
+ * @param {string} text The bytes that reached the file, which `config` is the parse of.
  * @returns {Promise<void>}
  */
-export async function adoptProjectConfig(config: ProjectConfig): Promise<void> {
+export async function adoptProjectConfig(config: ProjectConfig, text: string): Promise<void> {
   if (!requireProjectState()) {
     // No project state is no configuration document either ({@link projectConfigDocument} reads
     // One). The workspace copy is then the only thing there is to keep true.
@@ -466,7 +494,13 @@ export async function adoptProjectConfig(config: ProjectConfig): Promise<void> {
   );
   tab.doc.dirty = false;
   // Settle a read already in flight before saying what the file holds, or it would resolve after
-  // This line with the PREVIOUS bytes and make the next real commit look like a no-op.
+  // These lines with the PREVIOUS bytes and record, and make the next real commit look like a
+  // No-op — or re-lay the file the assistant just formatted.
   await seedCommitted();
+  // The record of the bytes just written, on the tab as well as on the seed: `configLayout`
+  // Prefers the open tab's, and the tab's is the record of the file it opened, which the write has
+  // Just replaced. The tab holds the config now; it holds the config's layout too.
+  _layout = deriveJsonLayout(text);
+  tab.doc.layout = _layout;
   _committed = serializeProjectConfig(config);
 }

package/src/ui/ai-credentials-form.ts

@@ -23,7 +23,7 @@
  * @license MIT
  */
 
-import { fetchAvailableModels } from "../services/ai-models";
+import { fetchAvailableModels, proxyModelsErrorMessage } from "../services/ai-models";
 import {
   getBaseUrl,
   getOpenAiKey,
@@ -165,6 +165,17 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
         },
         force: true,
       });
+      /*
+       * A 200 from the proxy does not mean the UPSTREAM listing worked — handleModels answers with
+       * defaults and `configured: true` even when the provider's /models route failed, so the list
+       * fetch never throws for that case. Cloudflare Workers AI's OpenAI-compatible surface has no
+       * /models route at all, so this is the only way that failure ever reaches the form; without
+       * it, the field silently filled with OpenAI's default ids instead of the user's own models.
+       */
+      const upstreamMessage = proxyModelsErrorMessage();
+      if (upstreamMessage) {
+        modelsError = `${upstreamMessage} — type the model ID directly instead.`;
+      }
     } catch (error: unknown) {
       modelsError = (error as Error).message || "Failed to fetch models";
     } finally {

package/src/ui/layers.ts

@@ -19,6 +19,7 @@ import { mountSurface, registerSurface } from "./surface";
 import toastsDoc from "../surfaces/toasts.json";
 import { dismiss, toasts } from "../services/notify";
 import { activeRegistry } from "../commands/active-registry";
+import { runReported } from "../commands/run-reported";
 import { effect, effectScope, reactive } from "../reactivity";
 import type { DialogChoiceOption, DialogSurfaceOptions } from "../surfaces/dialog";
 import type { Notification, Severity } from "../services/notify";
@@ -602,7 +603,9 @@ function toastScope(): ToastScope {
         return;
       }
       retireToast(id);
-      void registry.run(record.action, record.actionArgs);
+      // The toast is gone by the time the action refuses, so the refusal has to land somewhere the
+      // Person can still read it: Problems, through `commands/run-reported.ts`.
+      void runReported(registry, record.action, record.actionArgs, "Notifications");
     },
     toasts: [],
   }) as ToastScope;