@jxsuite/studio 5.0.0 → 5.2.0

package/src/services/ai-command-tools.ts

@@ -32,6 +32,25 @@
  * the model is told "changed nothing" rather than congratulated. This is what closes the
  * phantom-success finding for every bridged document write, not just the one tool it was found on.
  *
+ * **The project witness** is the same comparison over `project.json`. Every configuration write is
+ * a transaction on the configuration document (`tabs/project-config.ts`), whose bind effect keeps
+ * `projectState.projectConfig` equal to `toRaw(document.doc.document)` — so a record with `undo:
+ * "project"` that left that reference alone wrote nothing, whatever its report says. The ledger
+ * then files nothing (`wrote: []`, mechanically, for every project record), and a report that
+ * named no `wrote` of its own — one with no latch to know it was a no-op — has its sentence
+ * replaced by "changed nothing", because "Wrote project.json" over an untouched file is the
+ * phantom the ledger exists to keep out. A record whose report answered `wrote: []` itself is one
+ * that KNEW, and its sentence ("already enabled") is the one the witness cannot write. That is why
+ * `add_project_locale` keeps its latch: the sentence, not the ledger, is what the latch is for.
+ *
+ * **A tool with nothing it could be called with is withheld.** A `derivedEnumProperty` on a
+ * REQUIRED argument serialises `enum: []` when the list behind it is empty — `enable_extension`
+ * with no catalogue — and `@jxsuite/ai`'s validator tolerates that only because every projected
+ * tool is `strict: false`. The record's gate cannot see its own argument list, so the bridge reads
+ * it: an enabled record whose required enum is empty is not advertised this round, and comes back
+ * the round the list does. `getDefinition` still answers, so a call the model makes anyway meets
+ * the coercion's own refusal (`is not declared — declared: none`) rather than `Unknown tool`.
+ *
  * **`validate()` is a no-op, on purpose.** `@jxsuite/ai`'s validator never checks `enum` and treats
  * a required `null` as missing (`packages/ai/src/tools.ts`), which would refuse `select_node
  * { path: null }`. The registry's coercion is the single validator, so every projected tool is
@@ -46,6 +65,7 @@ import { activeRegistry } from "../commands/active-registry";
 import { argsSchema } from "../commands/command-args";
 import { inCanvas } from "../commands/context";
 import { toRaw } from "../reactivity";
+import { projectState } from "../state";
 import { recordWrite } from "./ai-writes";
 import { reportDocumentWrite, snapshotBeforeWrite } from "./ai-write-report";
 import type { WriteReportDeps, WriteSnapshot } from "./ai-write-report";
@@ -76,10 +96,25 @@ const EMPTY_ARGS = argsSchema({});
 
 /** The loosely-typed view of a record's `args` this module reads. */
 interface ArgsShape {
-  properties?: Record<string, object>;
+  properties?: Record<string, { enum?: unknown }>;
   required?: readonly string[];
 }
 
+/**
+ * Whether a required argument's choice list is empty right now.
+ *
+ * Reading `enum` is what serialises a `derivedEnumProperty` — the getter runs here exactly as it
+ * runs on the wire — so this is the same answer the model would have been shown. Only a REQUIRED
+ * property counts: an optional enum that is empty is an argument the model can leave out.
+ */
+function hasEmptyRequiredEnum(args: object | undefined): boolean {
+  const shape = (args ?? EMPTY_ARGS) as ArgsShape;
+  return (shape.required ?? []).some((key) => {
+    const declared = shape.properties?.[key]?.enum;
+    return Array.isArray(declared) && declared.length === 0;
+  });
+}
+
 /**
  * The selector's own `paths` property object, taken BY REFERENCE from the live record so the
  * description the model reads is the selector's. `undefined` when the selector is not registered,
@@ -141,12 +176,14 @@ function selectionAdvertised(registry: CommandRegistry): boolean {
 /**
  * Whether one record's tool is advertised this round. For a project- or document-level record it is
  * the record's own gate, evaluated as the palette evaluates it — a module-state `enablement`
- * closure included. Selection-level records are the one derived case, above.
+ * closure included. Selection-level records are the one derived case, above. And a record the gate
+ * admits is still withheld while a required argument has an empty choice list: there is nothing it
+ * could be called with, and a tool advertised with `enum: []` costs a round to discover that.
  */
 function advertised(registry: CommandRegistry, command: AnyCommand): boolean {
-  return command.level === "selection"
-    ? selectionAdvertised(registry)
-    : registry.isEnabled(command.id);
+  const open =
+    command.level === "selection" ? selectionAdvertised(registry) : registry.isEnabled(command.id);
+  return open && !hasEmptyRequiredEnum(command.args);
 }
 
 /** Every record carrying a projection, enabled or not. */
@@ -251,6 +288,19 @@ function normaliseReport(report: string | AiToolReport): AiToolReport {
   return typeof report === "string" ? { summary: report } : report;
 }
 
+/**
+ * The configuration object the app is live on, unwrapped, or `null` before a project has one.
+ *
+ * The same read `tabs/project-config.ts`'s `liveConfig()` makes: `projectState.projectConfig` is
+ * held to `toRaw(document.doc.document)` by the bind effect, so a `transactDoc` on the
+ * configuration document is a new reference here — and an unchanged reference is a run that never
+ * transacted, however the record's report reads.
+ */
+function projectConfigRef(): object | null {
+  const config = projectState?.projectConfig;
+  return config ? toRaw(config as unknown as object) : null;
+}
+
 /**
  * The ledger paths a record's write defaults to when `report` names none, by undo scope. `"none"`
  * has no default on purpose — see {@link AiToolReport.wrote}.
@@ -322,6 +372,10 @@ export function createCommandToolRegistry(deps: CommandToolDeps): ToolRegistry {
        what `transactDoc` replaces, and the snapshot is what the verdict compares against. */
     const tab = command.undo === "document" ? deps.getTab() : null;
     const rootBefore = tab ? toRaw(tab.doc.document) : null;
+    /* The project witness's half: the configuration object the chokepoint holds, which every
+       applied `project.json` transaction replaces. Read for `undo: "project"` records only — the
+       comparison is meaningless for a record that does not claim the file. */
+    const configBefore = command.undo === "project" ? projectConfigRef() : null;
     let snapshot: WriteSnapshot | null = null;
     let before: CommandContext;
     try {
@@ -357,6 +411,12 @@ export function createCommandToolRegistry(deps: CommandToolDeps): ToolRegistry {
       };
     }
 
+    /* The project witness's verdict, decided before the report so a report that throws is filed
+       against it too. Unlike the document witness this is not a refusal: an idempotent project verb
+       asked for a state it already had is an ordinary answer, and the record's own sentence may
+       say why. What the witness owns is the LEDGER — nothing landed, so nothing is filed. */
+    const projectUnchanged = command.undo === "project" && projectConfigRef() === configBefore;
+
     const after = registry.context();
     let report: AiToolReport;
     try {
@@ -366,13 +426,23 @@ export function createCommandToolRegistry(deps: CommandToolDeps): ToolRegistry {
          Left to the loop, the throw would be labelled "Failed to parse arguments" and the ledger
          would never be filed. So the ledger is filed from `undo`'s defaults — the report that would
          have named the paths is the thing that failed — and the model is told both halves. */
-      fileLedger(command, tab);
+      fileLedger(command, tab, projectUnchanged ? [] : undefined);
       const message = error instanceof Error ? error.message : String(error);
       return { error: `${command.title} ran, but its report failed: ${message}`, success: false };
     }
-    fileLedger(command, tab, report.wrote);
 
-    let { summary } = report;
+    let { summary, wrote } = report;
+    if (projectUnchanged) {
+      /* The ledger files nothing whatever the report named. A report that did not itself know it
+         was a no-op has its sentence replaced — a claim of a write over an untouched file is
+         exactly the phantom this exists to catch. A report that answered `wrote: []` knew, and its
+         sentence is kept: it says WHY nothing changed, which the witness cannot. */
+      wrote = [];
+      if (report.wrote === undefined || report.wrote.length > 0) {
+        summary = `${command.title} changed nothing: project.json is exactly as it was.`;
+      }
+    }
+    fileLedger(command, tab, wrote);
     if (tab && snapshot) {
       const verdict = await reportDocumentWrite(tab, snapshot, summary, deps);
       if (!verdict.success) {

package/src/services/ai-models.ts

@@ -75,6 +75,7 @@ let proxyConfigured = false;
 let proxyManaged = false;
 let proxyDefaultModel = "";
 let proxyCode: AiModelsResponse["code"];
+let proxyModelsError = "";
 
 /**
  * One-shot capability probe shared by every credentials gate, plus the hosts to repaint when it
@@ -116,6 +117,7 @@ export function resetModelCache() {
   proxyManaged = false;
   proxyDefaultModel = "";
   proxyCode = undefined;
+  proxyModelsError = "";
   /* The probe's result IS the flags above. Clearing them while keeping the settled promise
      would strand every gate on a permanent "unconfigured, unmanaged" reading — ensureProxyProbe
      would no-op forever and the managed option would vanish until a full reload. */
@@ -266,6 +268,16 @@ export function proxyStateCode(): AiModelsResponse["code"] {
   return proxyCode;
 }
 
+/**
+ * The upstream's own error message from the last fetch, when it reported one (e.g. Cloudflare's "No
+ * route for that URI" for a base URL that doesn't serve `/models`). Empty when the last fetch had
+ * no upstream error to report — a stale message from an earlier failure must not survive a fetch
+ * that succeeded.
+ */
+export function proxyModelsErrorMessage(): string {
+  return proxyModelsError;
+}
+
 /** The proxy's preferred model id ("" when it does not declare one). */
 export function getProxyDefaultModel(): string {
   return proxyDefaultModel;
@@ -356,6 +368,7 @@ export async function fetchAvailableModels(
   proxyManaged = data.managed === true;
   proxyDefaultModel = data.defaultModel ?? "";
   proxyCode = data.code;
+  proxyModelsError = data.upstreamError !== undefined ? (data.upstreamMessage ?? "") : "";
   /* Capabilities are kept, not dropped. The backend has reported `toolSupport` all along and the
      ingest mapped `{id, name}` only, so a Workers AI model that cannot call tools looked exactly
      like one that can — the agent loop ran, called nothing, and answered as if that were normal.

package/src/services/ai-project-tools.ts

@@ -115,8 +115,14 @@ export interface ProjectToolsCtx {
    * tab happened to be re-read from disk afterwards ({@link ProjectToolsCtx.reloadTab}); that
    * re-read is gone, because a second parse of `project.json` is the very rival object the
    * configuration document exists to prevent.
+   *
+   * `text` is the bytes that reached the file, of which `config` is the parse. The document keeps a
+   * layout record for the file it holds (§9.4), and the assistant's write replaces the file — so
+   * the record has to travel with the write, or the next settings commit re-lays the file the model
+   * just formatted with the record of the file it had read before (issue 331). Handing the text
+   * over is what lets the document derive that record without reading the file back.
    */
-  onProjectConfigWritten?: (config: ProjectConfig) => void | Promise<void>;
+  onProjectConfigWritten?: (config: ProjectConfig, text: string) => void | Promise<void>;
 }
 
 /**
@@ -399,7 +405,7 @@ export function registerProjectTools(
            that tab, which is the split the adoption just closed. Every other path is a plain file
            and its tab has to be told from disk. */
         if (projectConfig) {
-          await onProjectConfigWritten?.(projectConfig);
+          await onProjectConfigWritten?.(projectConfig, content);
         } else if (openTab) {
           await reloadTab(relPath);
         }

package/src/services/ai-system-prompt.ts

@@ -117,8 +117,8 @@ export interface AiToolInfo {
  *
  * The other kind of tool is not here and must not be added here: a command record that declares
  * `aiTool` is projected by `services/ai-command-tools.ts`, gated by the record's own `when` /
- * `enablement`, and described by the record. `enable_extension`, `disable_extension` and
- * `delete_node` (né `remove_node`) left this table for that one.
+ * `enablement`, and described by the record. `enable_extension`, `disable_extension`, `delete_node`
+ * (né `remove_node`) and `open_document` left this table for that one.
  */
 export const AI_TOOL_TIERS: AiToolInfo[] = [
   // Always — a question is not gated on what happens to be open
@@ -185,12 +185,8 @@ export const AI_TOOL_TIERS: AiToolInfo[] = [
     tier: "project",
     blurb: "create_page(path, content) — create a new .json page file on disk.",
   },
-  {
-    name: "open_document",
-    tier: "project",
-    blurb:
-      "open_document(path) — open a file on the canvas as the active document; the document tools then operate on it. Use when the user should SEE the page, or for iterative visual refinement.",
-  },
+  /* `open_document` is not a row: it is the projection of the `document.open` record
+     (`workspace/workspace.ts`), advertised by the record's own gate and described by the record. */
   // Document (an active document on the canvas)
   {
     name: "read_document",

package/src/services/ai-tools.ts

@@ -14,9 +14,6 @@ import type { JxMutableNode, JxPath, JxStateDefinition } from "@jxsuite/schema/t
 import { getNodeAtPath } from "../state";
 import type { Tab } from "../tabs/tab";
 import {
-  beginBatch,
-  endBatch,
-  isBatching,
   mutateInsertNode,
   mutateMoveNode,
   mutateUpdateProperty,
@@ -110,7 +107,6 @@ async function applyAndValidate(
  *   validate?: (doc: unknown) => Promise<string[]>;
  *   saveFile?: (relPath: string, content: string) => Promise<void>;
  *   renderCheck?: (doc: unknown) => Promise<{ ok: true } | { ok: false; error: string }>;
- *   openDocument?: (path: string) => Promise<void>;
  *   projectStyle?: Record<string, string>;
  *   getProjectStyle?: () => Record<string, string> | undefined;
  *   findOpenTab?: (path: string) => import("../tabs/tab").Tab | null;
@@ -124,7 +120,6 @@ export function registerAiTools(
     validate = validateDoc,
     saveFile,
     renderCheck,
-    openDocument,
     projectStyle,
     getProjectStyle,
     findOpenTab,
@@ -134,7 +129,6 @@ export function registerAiTools(
     validate?: (doc: unknown) => Promise<string[]>;
     saveFile?: (relPath: string, content: string) => Promise<void>;
     renderCheck?: (doc: unknown) => Promise<{ ok: true } | { ok: false; error: string }>;
-    openDocument?: (path: string) => Promise<void>;
     projectStyle?: Record<string, string> | undefined;
     /**
      * Live variant of `projectStyle` — takes precedence; re-read per tool call so a project
@@ -776,67 +770,12 @@ export function registerAiTools(
     }),
   );
 
-  // ── open_document ─────────────────────────────────────────────────────
-
-  registry.register(
-    createToolDefinition({
-      name: "open_document",
-      description:
-        "Switch the active document to another file in the project. After opening, all " +
-        "tools (read_document, set_property, add_child, etc.) operate on the newly-active " +
-        "document. Use this to iteratively refine pages or components after creating them " +
-        "with create_page or create_component.",
-      parameters: {
-        type: "object",
-        properties: {
-          path: {
-            type: "string",
-            description:
-              'File path relative to the project root, e.g. "pages/about.json" or ' +
-              '"components/nav-bar.json". Must be an existing file.',
-          },
-        },
-        required: ["path"],
-      },
-      async execute(args) {
-        if (!openDocument) {
-          return {
-            success: false,
-            error: "File navigation is not available in this environment.",
-          };
-        }
-        const { path: relPath } = args as { path: string };
-        try {
-          await openDocument(relPath);
-          const tab = getTab();
-          if (!tab) {
-            return {
-              success: false,
-              error: `File "${relPath}" could not be opened — no active tab after navigation.`,
-            };
-          }
-          /*
-           * The agent loop opens a single undo batch on the tab that was active at loop start
-           * (tool-executor.js → beginBatch). Switching the active document mid-loop would strand
-           * the new tab's edits with no history snapshot — undo would have nothing to roll back.
-           * Flush the previous tab's batch and re-open one on the newly-active tab so edits in
-           * each document remain individually undoable.
-           */
-          if (isBatching()) {
-            endBatch();
-            beginBatch(tab);
-          }
-          return {
-            success: true,
-            summary: `Switched to "${relPath}". All tools now operate on this document.`,
-          };
-        } catch (error) {
-          return {
-            success: false,
-            error: `Failed to open "${relPath}": ${error instanceof Error ? error.message : String(error)}`,
-          };
-        }
-      },
-    }),
-  );
+  /*
+   * `open_document` is NOT here any more. It is the projection of the `document.open` record
+   * (`workspace/workspace.ts`'s `tabCommands`), so the person's palette row and the model's tool
+   * are one `run` and one gate (§12.4). The hand tool read `getTab()` after the open and called
+   * whatever it found a success — a missing file left the previous document active and reported
+   * "Switched to" — and it re-anchored the undo batch itself, which `tool-executor.ts` has done
+   * after EVERY tool since project adoption started replacing tabs mid-loop.
+   */
 }

package/src/services/document-assistant.ts

@@ -40,7 +40,7 @@ import { preferredModel } from "./ai-models";
 import { pruneOrphanToolMessages, trimContext } from "./context-manager";
 import { renderCheck } from "./render-critic";
 import { validateDoc } from "./jx-validate";
-import { openFileInTab, reloadFileInTab } from "../files/files";
+import { reloadFileInTab } from "../files/files";
 import { getExtensionCatalog, refreshExtensionUi } from "../format/format-host";
 import * as sessionStore from "./ai-session-store";
 
@@ -98,7 +98,6 @@ export function createDocumentAssistant() {
     renderCheck: renderCheck as (
       doc: unknown,
     ) => Promise<{ ok: true } | { ok: false; error: string }>,
-    openDocument: openFileInTab,
     getProjectStyle,
     findOpenTab,
     reloadTab: reloadFileInTab,
@@ -130,12 +129,15 @@ export function createDocumentAssistant() {
         sessionStore.moveSession("", root, sessionId);
       }
     },
-    onProjectConfigWritten: async (config: ProjectConfig) => {
+    onProjectConfigWritten: async (config: ProjectConfig, text: string) => {
       /* Into the configuration document, not beside it. This used to assign a fresh object to
          `projectState.projectConfig`, leaving the document holding the previous configuration —
          and the next settings commit wrote that stale document back over the assistant's file.
-         `adoptProjectConfig` is the one door for a config that reached disk another way. */
-      await adoptProjectConfig(config);
+         `adoptProjectConfig` is the one door for a config that reached disk another way. The text
+         goes with it: the document derives the file's layout record from the bytes the tool wrote,
+         so the next settings commit is a one-line diff on the file as the model laid it out, not a
+         re-layout of it with the record of the file it read before (issue 331). */
+      await adoptProjectConfig(config, text);
       /* An `extensions` edit changes what the generated entry documents compose, and the backends
          regenerate them from project.json on demand — so without this the editor and the assistant
          both keep judging by the PREVIOUS project's schemas until the window reopens. */
@@ -157,7 +159,8 @@ export function createDocumentAssistant() {
     document: "an open document (use open_document first)",
     "document-tree":
       "an open document whose element tree the canvas is editing — Project Settings and the " +
-      "grid editors are documents, but not trees to restructure",
+      "grid editors are documents, but not trees to restructure, and a page left in Code view " +
+      "returns to the canvas with set_canvas_mode",
   } as const;
 
   /**

package/src/studio.ts

@@ -27,6 +27,7 @@ import {
 
 import {
   PRIMARY_PANE,
+  activePane,
   activeTab,
   closeAllTabs,
   openTab,
@@ -160,7 +161,7 @@ import {
   mountSignalsPanel,
   registerSignalsCommands,
 } from "./panels/signals-panel";
-import { loadComponentRegistry } from "./files/components";
+import { loadComponentRegistry, noteComponentSaved } from "./files/components";
 import { ensureDependenciesInstalled } from "./packages/ensure-deps";
 import { maybePromptJxsuiteUpdate } from "./packages/jxsuite-update";
 import { autoSyncProjectOnOpen } from "./packages/pull-package-sync";
@@ -234,7 +235,11 @@ import {
   platformUsesRepoPicker,
 } from "./new-project/add-repo-modal";
 import { openNewProjectModal, registerNewProjectCommands } from "./new-project/new-project-modal";
-import { invalidatePageRouteCache, registerInspectorCommands } from "./panels/properties-panel";
+import {
+  invalidatePageRouteCache,
+  registerInspectorCommands,
+  renderPropertiesPanel,
+} from "./panels/properties-panel";
 import { liveElementCommands, setContextMenuNavigate } from "./editor/context-menu";
 import { registerSeoCommands, renderSeoModal } from "./panels/seo-modal";
 import { ensurePopoverRevealWatch, setOpenPopover } from "./canvas/popover-state";
@@ -380,9 +385,11 @@ function setCanvasMode(tab: Tab | null, mode: string) {
  * 1. **To the side.** §8.2 has promised this since P3 and it never shipped — the chain ran
  *    `openFileInTab` → `openTab` → `activePane()`, so "open the layout that wraps this page" opened
  *    it ON TOP of the page it was teaching about.
- * 2. **Focus stays in the page.** An assistant pane that takes the keyboard means the author's next
- *    keystroke edits the definition instead of the document they are looking at — and a following
- *    pane would immediately have nothing to follow.
+ * 2. **The focus FOLLOWS.** The open is a gesture, not a read: the author asked to edit the component,
+ *    so the pane it lands in takes the keyboard. The failure it replaces is the opposite one — an
+ *    assistant pane that takes the keyboard means the author's next keystroke edits the definition
+ *    instead of the document they are looking at, which is why the READS (`pane.compareWith`, the
+ *    derivation follow, session restore) browse with `focus: false`.
  * 3. **A PREVIEW tab**, because drilling in is browsing: the second drill-in takes the same slot
  *    instead of littering the side strip, and an edit promotes it (`promoteDirtyPreviewTabs`).
  * 4. **An ordinary tab, not a derivation.** "Edit definition" is a commitment to edit one component; a
@@ -392,16 +399,17 @@ function setCanvasMode(tab: Tab | null, mode: string) {
  * `openedFrom` is unchanged — §14.2's relationship, which nothing pops and nothing restores from.
  *
  * @param {string} componentPath
+ * @docs studio/interface/tabs
  */
 async function navigateToComponent(componentPath: string) {
   const from = activeTab.value;
-  /* {@link receivingPane}, not `sidePane`: the pane beside this one may be a LENS, which owns no
+  /* {@link receivingPane}, not `paneBeside`: the pane beside this one may be a LENS, which owns no
      tab. The open then landed in a `tabOrder` `tabOfPane` hops straight past, so the read below got
      the SOURCE tab back, `opened.documentPath !== componentPath`, and the one relationship this
      function exists to record (§14.2) was skipped without a sound. */
-  const target = receivingPane();
+  const target = receivingPane(activePane().id);
   const alreadyOpen = [...workspace.tabs.values()].some((t) => t.documentPath === componentPath);
-  await openFileInTab(componentPath, { focus: false, paneId: target.id, preview: true });
+  await openFileInTab(componentPath, { paneId: target.id, preview: true });
   const opened = tabOfPane(target.id);
   if (!alreadyOpen && from && opened && opened.documentPath === componentPath) {
     opened.session.openedFrom = { documentPath: from.documentPath, tabId: from.id };
@@ -1497,9 +1505,17 @@ const liveChrome = createLiveSurfaceSaver({
   redefineOnCanvases: redefineElementOnCanvases,
   workspace,
 });
+/* The third is the component registry: a saved definition rewrites its own entry, so an instance's
+   Component Settings and the Library read the props the file has now rather than the ones the scan
+   saw when the project opened. The Content tab and the Library are told, because neither reads the
+   registry reactively. */
 setDocumentSavedListener((path, doc) => {
   void noteFileSaved(path);
   void liveChrome(path, doc as unknown as JxDocument);
+  if (noteComponentSaved(path, doc)) {
+    renderPropertiesPanel();
+    renderLeftPanel();
+  }
 });
 /* Walking a comparison. No deps: the stepper reads the pane-keyed diff store directly and the
    toolbar redraws itself, so there is nothing for the bootstrap to inject. */

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"
     },
@@ -78,7 +75,7 @@
       "gap": "2px",
       "flexShrink": "0"
     },
-    "& [part=\"layout\"], & [part=\"layout-add\"]": {
+    "& [part=\"layout\"]": {
       "padding": "2px var(--jx-space-3)",
       "border": "none",
       "borderRadius": "var(--jx-radius-sm)",
@@ -101,9 +98,6 @@
       "color": "var(--jx-fg)",
       "background": "var(--jx-hover-bg)"
     },
-    "& [part=\"layout-add\"]": {
-      "padding": "2px var(--jx-space-2)"
-    },
     "& [part=\"center\"]": {
       "display": "flex",
       "alignItems": "center",
@@ -267,7 +261,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "close"
+                "data-control": "close",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -291,7 +286,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "minimize"
+                "data-control": "minimize",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -315,7 +311,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "maximize"
+                "data-control": "maximize",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -357,7 +354,8 @@
             }
           },
           "attributes": {
-            "data-menu": "studio"
+            "data-menu": "studio",
+            "class": "electrobun-webkit-app-region-no-drag"
           },
           "onclick": {
             "$prototype": "Function",
@@ -441,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": {
@@ -479,14 +478,17 @@
               }
             },
             {
-              "tagName": "button",
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Save layout",
+                "hint": "Save the current arrangement as a layout",
+                "icon": "plus",
+                "size": "sm"
+              },
               "attributes": {
                 "part": "layout-add",
-                "type": "button",
-                "title": "Save the current arrangement as a layout",
-                "aria-label": "Save layout"
+                "class": "electrobun-webkit-app-region-no-drag"
               },
-              "textContent": "+",
               "onclick": {
                 "$prototype": "Function",
                 "body": [
@@ -515,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",
@@ -582,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": {
@@ -657,6 +661,9 @@
               "label": {
                 "$ref": "$map/item/title"
               },
+              "hint": {
+                "$ref": "$map/item/tooltip"
+              },
               "disabled": {
                 "$ref": "$map/item/disabled"
               },
@@ -665,7 +672,7 @@
             },
             "attributes": {
               "data-command-id": "${$map.item.id}",
-              "title": "${$map.item.tooltip}"
+              "class": "electrobun-webkit-app-region-no-drag"
             },
             "onclick": {
               "$prototype": "Function",
@@ -864,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",
@@ -913,7 +921,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "minimize"
+                "data-control": "minimize",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -937,7 +946,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "maximize"
+                "data-control": "maximize",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -961,7 +971,8 @@
                 "size": "sm"
               },
               "attributes": {
-                "data-control": "close"
+                "data-control": "close",
+                "class": "electrobun-webkit-app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",