@jxsuite/studio 2.2.2 → 2.4.0

package/dist/studio.js

@@ -1,7 +1,7 @@
 import {
   seedPublishConnected
-} from "./chunks/studio-g8t7g0gp.js";
-import"./chunks/studio-hrajjyt2.js";
+} from "./chunks/studio-tqr02xaa.js";
+import"./chunks/studio-wdt9y92a.js";
 import {
   ElementResolutionController,
   FocusVisiblePolyfillMixin,
@@ -20,10 +20,10 @@ import {
   isIPhone,
   isWebKit,
   randomID
-} from "./chunks/studio-qrsfh1w7.js";
+} from "./chunks/studio-tzx3xmvx.js";
 import {
   DependencyManagerController
-} from "./chunks/studio-3z8jjm2p.js";
+} from "./chunks/studio-7ejemhej.js";
 import {
   Popover
 } from "./chunks/studio-3fk1ac9z.js";
@@ -31,12 +31,12 @@ import {
   LanguageResolutionController,
   ProgressCircle,
   languageResolverUpdatedSymbol
-} from "./chunks/studio-6a0h7sne.js";
+} from "./chunks/studio-vhk5fmfv.js";
 import"./chunks/studio-ahnzd9rg.js";
 import {
   until,
   when
-} from "./chunks/studio-rgwcpast.js";
+} from "./chunks/studio-ay8wcr2b.js";
 import {
   IS_MOBILE,
   IS_TOUCH_DEVICE,
@@ -67,7 +67,7 @@ import {
   registerStyleCommands,
   render as render3,
   setInspectorTab
-} from "./chunks/studio-nqq8jk8f.js";
+} from "./chunks/studio-8x4399kc.js";
 import {
   CommandUnavailableError,
   chordFromEvent,
@@ -99,7 +99,7 @@ import {
   showSlashMenu,
   showSlashMenuAtRect,
   suppressBlockActionBar
-} from "./chunks/studio-pv8m0h4a.js";
+} from "./chunks/studio-377bbhtz.js";
 import {
   addableContexts,
   defaultCommands,
@@ -111,7 +111,7 @@ import {
   tokenLabel,
   transposeStylebookStyle,
   writeTokenOverride
-} from "./chunks/studio-1kgfcv7s.js";
+} from "./chunks/studio-yz06mkfj.js";
 import {
   DERIVE_PRESETS,
   JxColorPopover,
@@ -144,7 +144,7 @@ import {
   spNumberField,
   spTextArea,
   spTextField
-} from "./chunks/studio-x0et2z9g.js";
+} from "./chunks/studio-ng5gbxkj.js";
 import {
   LitElement,
   css
@@ -160,7 +160,7 @@ import {
 import {
   initQuickSearch,
   openQuickSearch
-} from "./chunks/studio-fys6z73y.js";
+} from "./chunks/studio-qd4k0h80.js";
 import {
   addRecentProject,
   clearRecentProjects,
@@ -186,12 +186,11 @@ import {
   reloadFileInTab,
   removeRecentProject,
   renderFilesTemplate,
-  seedEntry,
-  setupTreeKeyboard
-} from "./chunks/studio-22xr4q8q.js";
+  seedEntry
+} from "./chunks/studio-1dgqagzz.js";
 import {
   computeWindow
-} from "./chunks/studio-8sdyjfd6.js";
+} from "./chunks/studio-kwavhmdr.js";
 import {
   autoSyncProjectOnOpen,
   cleanupGitPanel,
@@ -212,13 +211,13 @@ import {
   registerSourceControlCommands,
   renderGitPanel,
   stripRange
-} from "./chunks/studio-hekaagev.js";
+} from "./chunks/studio-q07vj7p9.js";
 import {
   createPanelScheduler
 } from "./chunks/studio-8jpzqk5s.js";
 import {
   selectContributedEntry
-} from "./chunks/studio-yphy4z9m.js";
+} from "./chunks/studio-rdsvb808.js";
 import {
   notifySettingsDocument,
   onSettingsDocumentChanged,
@@ -239,7 +238,7 @@ import {
   renderForm,
   renderProvenanceChip,
   resolveContextPointer
-} from "./chunks/studio-300zsz1k.js";
+} from "./chunks/studio-ky68mp85.js";
 import {
   validateDoc,
   validateProjectConfig
@@ -264,10 +263,10 @@ import {
   registerGridCommands,
   scanLibrary,
   uploadDirForCategory
-} from "./chunks/studio-753znj4c.js";
+} from "./chunks/studio-0evba9z5.js";
 import {
   live
-} from "./chunks/studio-xmvbhg31.js";
+} from "./chunks/studio-c31yb4t6.js";
 import {
   negotiateCollab
 } from "./chunks/studio-dg7zyt5x.js";
@@ -308,8 +307,8 @@ import {
   setIncludeDrafts,
   startFsSync,
   writesForTurn
-} from "./chunks/studio-r8vx7bkz.js";
-import"./chunks/studio-6f0am8f2.js";
+} from "./chunks/studio-wxthr2x1.js";
+import"./chunks/studio-2w11grav.js";
 import"./chunks/studio-bw5dz6km.js";
 import {
   UPLOAD_ACCEPT,
@@ -317,18 +316,18 @@ import {
   isImage,
   setMediaChangedHandler,
   uploadAssets
-} from "./chunks/studio-qhh8r5fz.js";
+} from "./chunks/studio-102jzb8r.js";
 import {
   beginActivity,
   registerActivityPanel,
   showProgressModal
-} from "./chunks/studio-zqv3w24n.js";
+} from "./chunks/studio-eqyybj2e.js";
 import {
   currentDeploy,
   latestDeployment,
   noteDeployment,
   platformSupportsPublish
-} from "./chunks/studio-6zzbyx17.js";
+} from "./chunks/studio-53dn6e6t.js";
 import {
   CATEGORIES,
   SPAN_FULL_RENDER,
@@ -440,7 +439,7 @@ import {
   timeSpan,
   timeSpanAsync,
   updateActivePanelHeaders
-} from "./chunks/studio-yz9s88s0.js";
+} from "./chunks/studio-yk7037sg.js";
 import {
   BOTTOM_TAB_IDS,
   BUFFER_COMMIT,
@@ -607,19 +606,21 @@ import {
   updateSiteConfig,
   view,
   workspace
-} from "./chunks/studio-5kt960pk.js";
+} from "./chunks/studio-ddgrc5hs.js";
 import {
   classMap,
   ifDefined,
   styleMap
-} from "./chunks/studio-ckwz4d3x.js";
+} from "./chunks/studio-twsafr1e.js";
 import {
   AsyncDirective,
+  Directive,
   PartType,
+  createRef,
   directive,
   ref,
   repeat
-} from "./chunks/studio-p471gg5n.js";
+} from "./chunks/studio-kvfx9z2c.js";
 import {
   html,
   noChange,
@@ -668,7 +669,7 @@ import {
   mountStillWanted,
   refreshExtensionUi,
   refreshFormats
-} from "./chunks/studio-tqemhphj.js";
+} from "./chunks/studio-6gcrk1bq.js";
 import {
   getPlatform,
   hasPlatform,
@@ -682,6 +683,9 @@ import {
 } from "./chunks/studio-h4rxscfc.js";
 import"./chunks/studio-t5wqwzdh.js";
 import"./chunks/studio-tr20m8g8.js";
+import {
+  setBundleBase
+} from "./chunks/studio-53n8bp04.js";
 import {
   __require
 } from "./chunks/studio-a0tswy0w.js";
@@ -729,6 +733,32 @@ function attachCursorStyles(awareness, doc) {
   };
 }
 
+// ../../node_modules/lit-html/development/directives/guard.js
+var initialValue = {};
+
+class GuardDirective extends Directive {
+  constructor() {
+    super(...arguments);
+    this._previousValue = initialValue;
+  }
+  render(_value, f) {
+    return f();
+  }
+  update(_part, [value, f]) {
+    if (Array.isArray(value)) {
+      if (Array.isArray(this._previousValue) && this._previousValue.length === value.length && value.every((v, i) => v === this._previousValue[i])) {
+        return noChange;
+      }
+    } else if (this._previousValue === value) {
+      return noChange;
+    }
+    this._previousValue = Array.isArray(value) ? Array.from(value) : value;
+    const r = this.render(value, f);
+    return r;
+  }
+}
+var guard = directive(GuardDirective);
+
 // ../../node_modules/tabulator-tables/dist/js/tabulator_esm.mjs
 class CoreFeature {
   constructor(table) {
@@ -3706,11 +3736,11 @@ var Edit$1 = class Edit {
   }
   _deprecatedOptionsCheck() {}
   _initializeValue() {
-    var initialValue = this.cell.getValue();
-    if (typeof initialValue === "undefined" && typeof this.params.defaultValue !== "undefined") {
-      initialValue = this.params.defaultValue;
+    var initialValue2 = this.cell.getValue();
+    if (typeof initialValue2 === "undefined" && typeof this.params.defaultValue !== "undefined") {
+      initialValue2 = this.params.defaultValue;
     }
-    this.initialValues = this.params.multiselect ? initialValue : [initialValue];
+    this.initialValues = this.params.multiselect ? initialValue2 : [initialValue2];
     if (this.isFilter) {
       this.input.value = this.initialValues ? this.initialValues.join(",") : "";
       this.headerFilterInitialListGen();
@@ -4452,7 +4482,7 @@ var Edit$1 = class Edit {
     this._focusItem(item);
   }
   _resolveValue(blur) {
-    var output, initialValue;
+    var output, initialValue2;
     if (this.popup) {
       this.popup.hide(true);
     }
@@ -4472,9 +4502,9 @@ var Edit$1 = class Edit {
         } else if (this.isFilter && this.focusedItem && this.focusedItem.selected) {
           output = this.focusedItem.value;
         } else {
-          initialValue = Array.isArray(this.initialValues) ? this.initialValues[0] : this.initialValues;
-          if (initialValue === null || typeof initialValue === "undefined" || initialValue === "") {
-            output = initialValue;
+          initialValue2 = Array.isArray(this.initialValues) ? this.initialValues[0] : this.initialValues;
+          if (initialValue2 === null || typeof initialValue2 === "undefined" || initialValue2 === "") {
+            output = initialValue2;
           } else {
             output = this.params.emptyValue;
           }
@@ -6255,9 +6285,9 @@ class Filter extends Module {
     };
     this.generateHeaderFilterElement(column);
   }
-  generateHeaderFilterElement(column, initialValue, reinitialize) {
+  generateHeaderFilterElement(column, initialValue2, reinitialize) {
     var self = this, success = column.modules.filter.success, field = column.getField(), filterElement, editor, editorElement, cellWrapper, typingTimer, searchTrigger, params, onRenderedCallback;
-    column.modules.filter.value = initialValue;
+    column.modules.filter.value = initialValue2;
     function cancel() {}
     function onRendered(callback) {
       onRenderedCallback = callback;
@@ -6307,7 +6337,7 @@ class Filter extends Module {
       if (editor) {
         cellWrapper = {
           getValue: function() {
-            return typeof initialValue !== "undefined" ? initialValue : "";
+            return typeof initialValue2 !== "undefined" ? initialValue2 : "";
           },
           getField: function() {
             return column.definition.field;
@@ -13522,8 +13552,8 @@ class InternalEventBus {
   subscribed(key) {
     return this.events[key] && this.events[key].length;
   }
-  _chain(key, args, initialValue, fallback) {
-    var value = initialValue;
+  _chain(key, args, initialValue2, fallback) {
+    var value = initialValue2;
     if (!Array.isArray(args)) {
       args = [args];
     }
@@ -15759,7 +15789,7 @@ function toolbarTpl(controller, panel) {
         size="s"
         quiet
         placeholder="Filter rows"
-        .value=${layout?.filter ?? ""}
+        .value=${live(layout?.filter ?? "")}
         @input=${(e) => {
     const term = e.target.value;
     saveGridLayout(gridId, { filter: term });
@@ -16055,7 +16085,10 @@ function shellTpl(controller, panel, onHost) {
   return html`
     <div class="jx-grid">
       ${toolbarTpl(controller, panel)}
-      <div class="jx-grid-host" ${ref((el) => onHost(el))}></div>
+      ${guard([controller.source.id], () => html`<div
+            class="jx-grid-host"
+            ${ref((el) => onHost(el))}
+          ></div>`)}
     </div>
   `;
 }
@@ -16076,12 +16109,12 @@ function renderGridMode(surface, tab) {
   }
   const scope = effectScope();
   const local = reactive({ views: 0 });
-  const live2 = controller;
+  const engine = controller;
   let hostEl = null;
   const panel = {
     applyLayout(layout) {
-      live2.setSort(layout?.sort ?? null);
-      live2.setGrouping(layout?.groupBy ?? null);
+      engine.setSort(layout?.sort ?? null);
+      engine.setGrouping(layout?.groupBy ?? null);
       panel.remount();
       panel.view?.setSearch(layout?.filter ?? "");
       panel.bump();
@@ -16091,7 +16124,7 @@ function renderGridMode(surface, tab) {
     },
     remount() {
       panel.view?.destroy();
-      panel.view = hostEl ? createGridView(hostEl, live2) : null;
+      panel.view = hostEl ? createGridView(hostEl, engine) : null;
     },
     paneId,
     scope,
@@ -16774,7 +16807,7 @@ function entryIdsFor(collection) {
   if (known) {
     return known;
   }
-  const pending = import("./chunks/content-source-r2n7v682.js").then((m) => m.listCollectionEntryIds(collection));
+  const pending = import("./chunks/content-source-jrvn5vwy.js").then((m) => m.listCollectionEntryIds(collection));
   entryIdCache.set(collection, pending);
   return pending;
 }
@@ -16954,7 +16987,7 @@ function headerTpl(tab, collection) {
               <sp-switch
                 size="s"
                 class="entry-draft-switch"
-                ?checked=${draft}
+                .checked=${live(draft)}
                 title=${DRAFT_MEANING}
                 @change=${(e) => setEntryDraft(tab, e.target.checked)}
                 >Draft</sp-switch
@@ -17035,7 +17068,7 @@ function renderEntryMode(surface, tab) {
   });
 }
 async function openEntryEditor(path) {
-  const { openFileInTab: openFileInTab2 } = await import("./chunks/files-zeg88k2d.js");
+  const { openFileInTab: openFileInTab2 } = await import("./chunks/files-jdbtammm.js");
   await openFileInTab2(path);
   for (const [id, tab] of workspace.tabs.entries()) {
     if (tab.documentPath !== path) {
@@ -17096,7 +17129,7 @@ async function createEntry(collectionName) {
     });
     return null;
   }
-  const { createFileIn: createFileIn2 } = await import("./chunks/files-zeg88k2d.js");
+  const { createFileIn: createFileIn2 } = await import("./chunks/files-jdbtammm.js");
   const created = await createFileIn2({
     content,
     dir: collection.dir,
@@ -19531,6 +19564,9 @@ function cleanupGoogleFontPreconnects(head) {
 }
 
 // src/panels/head-panel.ts
+var _addTag = createRef();
+var _addAttr = createRef();
+var _addVal = createRef();
 var layoutEntries = null;
 async function loadLayoutEntries() {
   try {
@@ -20033,7 +20069,7 @@ function renderHeadTemplate({
 
         <!-- Add custom tag form -->
         <div class="head-add-form">
-          <sp-picker size="s" label="Tag" class="head-add-tag" value="meta">
+          <sp-picker size="s" label="Tag" class="head-add-tag" ${ref(_addTag)}>
             <sp-menu-item value="meta">meta</sp-menu-item>
             <sp-menu-item value="link">link</sp-menu-item>
             <sp-menu-item value="script">script</sp-menu-item>
@@ -20042,28 +20078,30 @@ function renderHeadTemplate({
             placeholder="Attribute (e.g. name)"
             size="s"
             class="head-add-attr"
+            ${ref(_addAttr)}
+          ></sp-textfield>
+          <sp-textfield
+            placeholder="Value"
+            size="s"
+            class="head-add-val"
+            ${ref(_addVal)}
           ></sp-textfield>
-          <sp-textfield placeholder="Value" size="s" class="head-add-val"></sp-textfield>
           <sp-action-button
             quiet
             size="xs"
             title="Add tag"
-            @click=${(e) => {
-    const form = e.target.closest(".head-add-form");
-    const tagPicker = form?.querySelector(".head-add-tag");
-    const attrField = form?.querySelector(".head-add-attr");
-    const valField = form?.querySelector(".head-add-val");
-    const tagName = tagPicker?.value || "meta";
-    const attrKey = attrField?.value?.trim();
-    const attrVal = valField?.value?.trim();
+            @click=${() => {
+    const tagName = _addTag.value?.value || "meta";
+    const attrKey = _addAttr.value?.value?.trim();
+    const attrVal = _addVal.value?.value?.trim();
     if (!attrKey || !attrVal) {
       return;
     }
-    if (attrField) {
-      attrField.value = "";
+    if (_addAttr.value) {
+      _addAttr.value.value = "";
     }
-    if (valField) {
-      valField.value = "";
+    if (_addVal.value) {
+      _addVal.value.value = "";
     }
     const entry = { attributes: {}, tagName };
     if (tagName === "meta") {
@@ -21932,6 +21970,8 @@ function registerI18nPanel() {
 }
 
 // src/panels/imports-panel.ts
+var _addName = createRef();
+var _addPath = createRef();
 function groupByPackage() {
   const groups = new Map;
   for (const comp of componentRegistry) {
@@ -22002,23 +22042,34 @@ function renderSiteLevelImports(renderLeftPanel) {
     message: "Imported modules give this project extra kinds of data — " + "a content collection, a CMS, an API client. Name one below."
   })}
         <div class="import-add-form">
-          <sp-textfield placeholder="Name" size="s" class="import-add-name"></sp-textfield>
-          <sp-textfield placeholder="Path" size="s" class="import-add-path"></sp-textfield>
+          <sp-textfield
+            placeholder="Name"
+            size="s"
+            class="import-add-name"
+            ${ref(_addName)}
+          ></sp-textfield>
+          <sp-textfield
+            placeholder="Path"
+            size="s"
+            class="import-add-path"
+            ${ref(_addPath)}
+          ></sp-textfield>
           <sp-action-button
             quiet
             size="xs"
             title="Add import"
-            @click=${async (e) => {
-    const form = e.target.closest(".import-add-form");
-    const nameField = form?.querySelector(".import-add-name");
-    const pathField = form?.querySelector(".import-add-path");
-    const name = nameField?.value?.trim();
-    const path = pathField?.value?.trim();
+            @click=${async () => {
+    const name = _addName.value?.value?.trim();
+    const path = _addPath.value?.value?.trim();
     if (!name || !path) {
       return;
     }
-    nameField.value = "";
-    pathField.value = "";
+    if (_addName.value) {
+      _addName.value.value = "";
+    }
+    if (_addPath.value) {
+      _addPath.value.value = "";
+    }
     const updated = { ...siteImports, [name]: path };
     await updateSiteConfig({ imports: updated });
     renderLeftPanel();
@@ -22159,9 +22210,9 @@ function renderDocumentLevelImports({
   const importedRefs = new Set(refEntries.map((e) => e.$ref));
   const availableComponents = componentRegistry.filter((c) => c.source !== "npm" && c.path != null && !importedRefs.has(`./${c.path}`) && !importedRefs.has(c.path));
   const packageGroups = groupByPackage();
-  const removeRef = (ref2) => {
+  const removeRef = (elementRef) => {
     applyMutation((doc) => {
-      doc.$elements = removeElementRef(doc.$elements ?? [], ref2);
+      doc.$elements = removeElementRef(doc.$elements ?? [], elementRef);
     });
     renderLeftPanel();
   };
@@ -22298,7 +22349,7 @@ function groupProblems(records = problems) {
   return groups;
 }
 function openProblemPath(path) {
-  import("./chunks/files-zeg88k2d.js").then((m) => m.openFileInTab(path));
+  import("./chunks/files-jdbtammm.js").then((m) => m.openFileInTab(path));
 }
 function actionTpl(record) {
   const id = record.action;
@@ -27213,6 +27264,7 @@ var cache2 = null;
 var proxyConfigured = false;
 var proxyManaged = false;
 var proxyDefaultModel = "";
+var proxyCode;
 var proxyProbe = null;
 var probeListeners = new Set;
 function invalidateModelCache() {
@@ -27220,6 +27272,7 @@ function invalidateModelCache() {
   proxyConfigured = false;
   proxyManaged = false;
   proxyDefaultModel = "";
+  proxyCode = undefined;
   proxyProbe = null;
 }
 function ensureProxyProbe(onSettled) {
@@ -27241,6 +27294,9 @@ function isProxyConfigured() {
 function isManagedProxy() {
   return proxyManaged;
 }
+function proxyStateCode() {
+  return proxyCode;
+}
 function siblingRoute(chatUrl, segment) {
   let url;
   try {
@@ -27275,6 +27331,7 @@ async function fetchAvailableModels(opts = {}) {
   proxyConfigured = data.configured === true;
   proxyManaged = data.managed === true;
   proxyDefaultModel = data.defaultModel ?? "";
+  proxyCode = data.code;
   cache2 = (data.models || []).map((m) => ({ id: m.id, name: m.name || m.id }));
   return cache2;
 }
@@ -27439,17 +27496,22 @@ function createManagedConnect(opts) {
     if (!canOffer()) {
       return nothing;
     }
+    const lapsed = proxyStateCode() === "cf_reconnect_required";
+    const busyLabel = lapsed ? "Reconnecting…" : "Connecting…";
     return html`
-      <div class="ai-managed-connect">
-        <div>Use Workers AI on your own Cloudflare account — no API key needed.</div>
+      <div class="ai-managed-connect" data-jx-recommended="cloudflare">
+        <div class="ai-managed-connect-lede">
+          ${lapsed ? "Your Cloudflare connection has expired. Reconnect to keep using the assistant." : "Recommended — run the assistant on Workers AI in your own Cloudflare account. No API key to create, copy or rotate."}
+        </div>
         <sp-button
           size="s"
+          variant="accent"
           ?disabled=${busy}
           @click=${() => {
       connect();
     }}
         >
-          ${busy ? "Connecting…" : "Connect Cloudflare"}
+          ${busy ? busyLabel : lapsed ? "Reconnect Cloudflare" : "Connect Cloudflare"}
         </sp-button>
         ${connectError ? html`<div class="ai-managed-connect-error">${connectError}</div>` : nothing}
         <div class="ai-managed-connect-divider">— or bring your own key —</div>
@@ -28849,6 +28911,7 @@ function createCloudPlatform(project) {
     id: "cloud",
     projectRoot: root,
     canvasUrl: "/canvas.html",
+    ...base ? { documentBaseUrl: `${base}/raw/` } : {},
     openProjectPicker: "repo-list",
     createDestination: "repo",
     async activate() {
@@ -35549,8 +35612,8 @@ class TruncatedValueTooltipController {
       return;
     }
     await Promise.all([
-      import("./chunks/sp-overlay.dev-h6kdx076.js"),
-      import("./chunks/sp-tooltip.dev-rvepkw4r.js")
+      import("./chunks/sp-overlay.dev-s18hymn9.js"),
+      import("./chunks/sp-tooltip.dev-5c6d1kjz.js")
     ]);
     this._tooltipDepsLoaded = true;
     Promise.resolve().then(() => {
@@ -36523,7 +36586,7 @@ class MenuItem extends LikeAnchor(ObserveSlotText(ObserveSlotPresence(Focusable,
     }
     this.dependencyManager.add("sp-overlay");
     this.dependencyManager.add("sp-popover");
-    import("./chunks/sp-overlay.dev-h6kdx076.js");
+    import("./chunks/sp-overlay.dev-s18hymn9.js");
     import("./chunks/sp-popover.dev-dj9x7e7a.js");
     return html`
       <sp-overlay
@@ -45588,7 +45651,7 @@ class PickerBase extends SizedMixin(ExpandableElement, {
     `;
   }
   renderLoader() {
-    import("./chunks/sp-progress-circle.dev-0fpvhm52.js");
+    import("./chunks/sp-progress-circle.dev-0zxcyz3r.js");
     return html`
       <sp-progress-circle
         size="s"
@@ -45669,7 +45732,7 @@ class PickerBase extends SizedMixin(ExpandableElement, {
     var _a;
     const container = this.renderContainer(menu);
     this.dependencyManager.add("sp-overlay");
-    import("./chunks/sp-overlay.dev-h6kdx076.js");
+    import("./chunks/sp-overlay.dev-s18hymn9.js");
     return html`
       <sp-overlay
         @slottable-request=${this.handleSlottableRequest}
@@ -46239,7 +46302,7 @@ class Picker extends SizedMixin(ExpandableElement, {
     `;
   }
   renderLoader() {
-    import("./chunks/sp-progress-circle.dev-0fpvhm52.js");
+    import("./chunks/sp-progress-circle.dev-0zxcyz3r.js");
     return html`
       <sp-progress-circle
         size="s"
@@ -46320,7 +46383,7 @@ class Picker extends SizedMixin(ExpandableElement, {
     var _a;
     const container = this.renderContainer(menu);
     this.dependencyManager.add("sp-overlay");
-    import("./chunks/sp-overlay.dev-h6kdx076.js");
+    import("./chunks/sp-overlay.dev-s18hymn9.js");
     return html`
       <sp-overlay
         @slottable-request=${this.handleSlottableRequest}
@@ -46934,7 +46997,7 @@ class Combobox extends Textfield {
     `;
   }
   renderLoader() {
-    import("./chunks/sp-progress-circle.dev-0fpvhm52.js");
+    import("./chunks/sp-progress-circle.dev-0zxcyz3r.js");
     return html`
       <sp-progress-circle
         size="s"
@@ -58528,9 +58591,9 @@ function renderDefsEditor(container) {
 
 // src/version.ts
 var APP_NAME = "Jx Studio";
-var VERSION = "2.2.2";
-var BUILD_DATE = "2026-08-21T22:51:17.552Z";
-var GIT_COMMIT = "a0144fd";
+var VERSION = "2.4.0";
+var BUILD_DATE = "2026-08-23T19:11:17.175Z";
+var GIT_COMMIT = "bea72f9";
 var LINKS = {
   github: "https://github.com/jxsuite/jx",
   docs: "https://github.com/jxsuite/jx#readme",
@@ -58543,7 +58606,7 @@ var _container2 = null;
 var _packages = null;
 var _latest = new Map;
 var _busy = false;
-var _addName = "";
+var _addName2 = "";
 function latestFor(p2) {
   if (p2.name.startsWith(JXSUITE_PREFIX) && isComparable(VERSION) && isUpgrade(p2.version, VERSION)) {
     return VERSION;
@@ -58586,13 +58649,13 @@ async function withBusy(fn) {
   }
 }
 async function onAdd() {
-  const name = _addName.trim();
+  const name = _addName2.trim();
   if (!name) {
     return;
   }
   await withBusy(async () => {
     await getPlatform().addPackage(name);
-    _addName = "";
+    _addName2 = "";
     notify.success(`Added ${name}.`);
   });
 }
@@ -58698,10 +58761,10 @@ function render11() {
         <sp-textfield
           size="s"
           placeholder="package-name"
-          .value=${_addName}
+          .value=${_addName2}
           ?disabled=${_busy}
           @input=${(e20) => {
-    _addName = e20.target.value;
+    _addName2 = e20.target.value;
   }}
         ></sp-textfield>
         <sp-action-button size="s" ?disabled=${_busy} @click=${onAdd}>
@@ -58742,7 +58805,7 @@ function render11() {
 function renderDependenciesEditor(container) {
   _container2 = container;
   _packages = null;
-  _addName = "";
+  _addName2 = "";
   render11();
   load();
 }
@@ -59607,7 +59670,7 @@ async function openProjectSettings(section) {
   showSettingsDocument();
   notifySettingsDocument();
   try {
-    const { syncExtensionSettingsSections } = await import("./chunks/extension-sections-vpcm4jvx.js");
+    const { syncExtensionSettingsSections } = await import("./chunks/extension-sections-2zjyty05.js");
     await syncExtensionSettingsSections();
   } catch (error) {
     notify.warn(`Could not load extension settings sections — ${errorMessage(error)}`, {
@@ -60231,7 +60294,7 @@ function publishCommands() {
         name: "set_up_publishing"
       },
       run: async () => {
-        const { openPublishPanel } = await import("./chunks/publish-panel-6qz6kp41.js");
+        const { openPublishPanel } = await import("./chunks/publish-panel-2we6smjv.js");
         openPublishPanel();
       },
       title: "Set Up Publishing"
@@ -60953,7 +61016,7 @@ function i18nCommands() {
           });
           return;
         }
-        const { openFileInTab: openFileInTab2 } = await import("./chunks/files-zeg88k2d.js");
+        const { openFileInTab: openFileInTab2 } = await import("./chunks/files-jdbtammm.js");
         await openFileInTab2(path);
       },
       title: "Open Translation"
@@ -61000,7 +61063,7 @@ function i18nCommands() {
           return;
         }
         const cut = path.lastIndexOf("/");
-        const { createFileIn: createFileIn2, openFileInTab: openFileInTab2 } = await import("./chunks/files-zeg88k2d.js");
+        const { createFileIn: createFileIn2, openFileInTab: openFileInTab2 } = await import("./chunks/files-jdbtammm.js");
         const created = await createFileIn2({
           content,
           dir: cut === -1 ? "." : path.slice(0, cut),
@@ -61058,7 +61121,85 @@ function registerI18nCommands(registry) {
   registry.registerAll(i18nCommands());
 }
 
+// src/shell/tree.ts
+function mountInto(host, tpl) {
+  host.textContent = "";
+  delete host["_$litPart$"];
+  render2(tpl, host);
+}
+function overlayLayers() {
+  return html`
+    <!-- The four overlay layers, in stacking order. Their z-indices were inline style
+       attributes, which put the one piece of ordering the whole overlay system depends on
+       outside the reach of check-styles.ts's stacking rule — the check that exists because a
+       blocking progress modal once shipped above its own scrim with no reachable exit. They are
+       classes in styles/overlays.css now, and the toast host is ABOVE the dialog host because
+       an operation started from a dialog reports its outcome to the person still looking at
+       it. -->
+    <div id="layer-popover" class="jx-layer jx-layer--popover"></div>
+    <div id="layer-modal" class="jx-layer jx-layer--modal"></div>
+    <div id="layer-dialog" class="jx-layer jx-layer--dialog"></div>
+    <!-- role="status" sits on the HOST, so a stack of toasts is announced as one live region
+       rather than one region per notification. It carries its region id whether or not a toast
+       has ever been raised: a region that only exists once something has gone wrong is one a
+       screenshot cannot address and focus cannot be moved into. -->
+    <div
+      id="layer-toast"
+      class="jx-layer jx-layer--toast"
+      role="status"
+      aria-live="polite"
+      data-jx-region="overlay.toasts"
+    ></div>
+  `;
+}
+function shellTree() {
+  return html`
+    <div id="app">
+      <div id="toolbar" data-jx-region="commandbar"></div>
+      <!-- The PANE GRID (studio.md §18.1). One cell per pane, each holding that pane's own strip,
+             jump bar, chrome layer and stage — the four surfaces that used to be flat siblings of
+             THIS grid, which is to say application rows that only ever described one pane. There is
+             nothing to see here in markup: panels/pane-grid.ts reconciles the cells against
+             workspace.panes, because how many there are is a fact about the workspace and a
+             single div can only ever be one of them. -->
+      <div id="pane-grid"></div>
+      <div id="activity-bar" data-jx-region="rail"></div>
+      <div id="left-panel" data-jx-region="navigator"></div>
+      <div id="resize-left" class="resize-handle"></div>
+      <!-- The Bottom dock (⌘J). It sits in the PANE's column, under the stage and above the
+             status bar, so opening it never narrows the Navigator or the Inspector (studio.md §12
+             region ⑪). Its handle resizes on the other axis; panels/bottom-dock.ts stamps
+             dock.bottom on this host while it is open, and nothing while it is closed. -->
+      <div id="resize-bottom" class="resize-handle resize-handle-row"></div>
+      <div id="bottom-dock"></div>
+      <div id="resize-right" class="resize-handle"></div>
+      <!-- The Inspector dock. Four tabs — Content · Style · Logic · Assistant (studio.md §12
+             region ⑨) — all inside this one host. -->
+      <div id="right-panel" data-jx-region="inspector"></div>
+      <!-- The app's only status channel: announce what lands in it (studio.md §12 region ⑫). -->
+      <div id="statusbar" role="status" aria-live="polite" data-jx-region="statusbar"></div>
+    </div>
+    ${overlayLayers()}
+  `;
+}
+function mountShellTree(host = document.body) {
+  mountInto(themeHost(host), shellTree());
+}
+function themeHost(host) {
+  const existing = host.querySelector?.("sp-theme");
+  if (existing) {
+    return existing;
+  }
+  const theme = document.createElement("sp-theme");
+  theme.setAttribute("color", "dark");
+  theme.setAttribute("scale", "medium");
+  theme.setAttribute("system", "spectrum");
+  host.append(theme);
+  return theme;
+}
+
 // src/studio.ts
+setBundleBase(import.meta.url);
 var derivationDeps = {
   fileExists: async (path) => {
     try {
@@ -61121,6 +61262,7 @@ if (!hasPlatform()) {
   registerPlatform(resolveDefaultPlatform());
 }
 mountResizeEdges();
+mountShellTree();
 initShellRefs();
 mountShell();
 mount8(toolbarEl, {
@@ -61337,7 +61479,6 @@ mount10({
   setGitDiffState: (state2) => {
     shell.git.diffState = state2;
   },
-  setupTreeKeyboard,
   webdata: webdata_default
 });
 registerRenderer("leftPanel", () => render10());
@@ -61735,5 +61876,5 @@ export {
   hasUnsavedTabs
 };
 
-//# debugId=89F1C4C5C6FDAA9A64756E2164756E21
+//# debugId=5769FAD30A86F19564756E2164756E21
 //# sourceMappingURL=studio.js.map