@jxsuite/studio 2.4.2 → 3.0.0

package/dist/studio.js

@@ -1,6 +1,6 @@
 import {
   seedPublishConnected
-} from "./chunks/studio-dgj7gq44.js";
+} from "./chunks/studio-k4jvjcfx.js";
 import"./chunks/studio-wdt9y92a.js";
 import {
   ElementResolutionController,
@@ -67,7 +67,7 @@ import {
   registerStyleCommands,
   render as render3,
   setInspectorTab
-} from "./chunks/studio-f5yyvqxv.js";
+} from "./chunks/studio-8ezdegcx.js";
 import {
   CommandUnavailableError,
   chordFromEvent,
@@ -99,7 +99,7 @@ import {
   showSlashMenu,
   showSlashMenuAtRect,
   suppressBlockActionBar
-} from "./chunks/studio-ws6ef6js.js";
+} from "./chunks/studio-hj2se583.js";
 import {
   addableContexts,
   defaultCommands,
@@ -111,7 +111,7 @@ import {
   tokenLabel,
   transposeStylebookStyle,
   writeTokenOverride
-} from "./chunks/studio-hyn3vhwr.js";
+} from "./chunks/studio-xntfdy1x.js";
 import {
   DERIVE_PRESETS,
   JxColorPopover,
@@ -144,23 +144,20 @@ import {
   spNumberField,
   spTextArea,
   spTextField
-} from "./chunks/studio-v1va0vhd.js";
+} from "./chunks/studio-6z5eyjwn.js";
 import {
   LitElement,
   css
 } from "./chunks/studio-0rqqhrdy.js";
 import {
+  clearCfConnection,
   getCfAccountId,
-  getCfToken,
-  hydrateSettings,
-  persistSettings,
-  setCfAccountId,
-  setCfToken
-} from "./chunks/studio-a7pzveq1.js";
+  getCfToken
+} from "./chunks/studio-kfpek536.js";
 import {
   initQuickSearch,
   openQuickSearch
-} from "./chunks/studio-jnakhg87.js";
+} from "./chunks/studio-g5gdqnyd.js";
 import {
   addRecentProject,
   clearRecentProjects,
@@ -187,10 +184,10 @@ import {
   removeRecentProject,
   renderFilesTemplate,
   seedEntry
-} from "./chunks/studio-v2c5pmjj.js";
+} from "./chunks/studio-rh1cnamv.js";
 import {
   computeWindow
-} from "./chunks/studio-sccge2wf.js";
+} from "./chunks/studio-p5dja96s.js";
 import {
   autoSyncProjectOnOpen,
   cleanupGitPanel,
@@ -208,16 +205,17 @@ import {
   platformSupportsClone,
   refreshGitStatus,
   registerGitPanel,
+  registerGridProbe,
   registerSourceControlCommands,
   renderGitPanel,
   stripRange
-} from "./chunks/studio-ke244pam.js";
+} from "./chunks/studio-7p35254k.js";
 import {
   createPanelScheduler
 } from "./chunks/studio-8jpzqk5s.js";
 import {
   selectContributedEntry
-} from "./chunks/studio-hb7c46jy.js";
+} from "./chunks/studio-5efrtn1m.js";
 import {
   notifySettingsDocument,
   onSettingsDocumentChanged,
@@ -238,7 +236,7 @@ import {
   renderForm,
   renderProvenanceChip,
   resolveContextPointer
-} from "./chunks/studio-ef8t53vc.js";
+} from "./chunks/studio-3dkcd4c5.js";
 import {
   validateDoc,
   validateProjectConfig
@@ -263,7 +261,7 @@ import {
   registerGridCommands,
   scanLibrary,
   uploadDirForCategory
-} from "./chunks/studio-0b6fs05q.js";
+} from "./chunks/studio-pkp61mh8.js";
 import {
   live
 } from "./chunks/studio-c31yb4t6.js";
@@ -307,27 +305,28 @@ import {
   setIncludeDrafts,
   startFsSync,
   writesForTurn
-} from "./chunks/studio-26sv44br.js";
+} from "./chunks/studio-dc8s8heb.js";
 import"./chunks/studio-2w11grav.js";
 import"./chunks/studio-bw5dz6km.js";
 import {
-  UPLOAD_ACCEPT,
   invalidateUsages,
   isImage,
+  previewFileSrc,
   setMediaChangedHandler,
+  uploadAccept,
   uploadAssets
-} from "./chunks/studio-cz2j1c0g.js";
+} from "./chunks/studio-a0yp7syn.js";
 import {
   beginActivity,
   registerActivityPanel,
   showProgressModal
-} from "./chunks/studio-28xc8ws4.js";
+} from "./chunks/studio-ry1vz5sv.js";
 import {
   currentDeploy,
   latestDeployment,
   noteDeployment,
   platformSupportsPublish
-} from "./chunks/studio-aweyr4v1.js";
+} from "./chunks/studio-2x9zbxmx.js";
 import {
   CATEGORIES,
   SPAN_FULL_RENDER,
@@ -339,6 +338,7 @@ import {
   applyDropInstruction,
   applyEditZoom,
   applyTransform,
+  assetContextFor,
   beginDragSession,
   bubbleInlinePath,
   buildScope,
@@ -368,6 +368,7 @@ import {
   getPanel,
   getPreviewNavigateHandler,
   hasElement,
+  hostAssetDeclarations,
   hostDragGeometry,
   invalidateParamValues,
   isCaretActive,
@@ -377,7 +378,6 @@ import {
   listPanels,
   liveDragHostAt,
   loadParamValues,
-  loopbackAssetSrc,
   markExplicitZoom,
   mediaDisplayName,
   mountIframeCanvas,
@@ -414,8 +414,10 @@ import {
   renderNode,
   requestEditZoom,
   resetZoom,
+  resolveAssetRef,
   runScoped,
   sawIframeDragOver,
+  setCanvasAssetResolver,
   setCanvasContextMenuHandler,
   setCanvasPointerDownHandler,
   setCanvasSlashHandler,
@@ -439,7 +441,7 @@ import {
   timeSpan,
   timeSpanAsync,
   updateActivePanelHeaders
-} from "./chunks/studio-pyrw8h0w.js";
+} from "./chunks/studio-j595e748.js";
 import {
   BOTTOM_TAB_IDS,
   BUFFER_COMMIT,
@@ -472,7 +474,6 @@ import {
   canUndo,
   canonicalizeLocale,
   canvasViewForMode,
-  clearProblems,
   closeAllTabs,
   closeTab,
   collabReadOnly,
@@ -485,13 +486,10 @@ import {
   configureCollabParser,
   configureCollabSerializer,
   createPaneSurface,
-  dismiss,
   disposePaneSurface,
   editorKindForMode,
   editorKindOf,
   editorKindsOf,
-  effect,
-  effectScope,
   emptyContext,
   endBatch,
   enumArg,
@@ -514,6 +512,7 @@ import {
   isBatching,
   isBottomTabId,
   isCollabEnabled,
+  isMediaFormat,
   isModalOpen,
   isPaneFocused,
   isWellFormedLocale,
@@ -537,8 +536,6 @@ import {
   mutateUpdateStyle,
   navigatorPanelRegion,
   nextRenderGeneration,
-  notify,
-  now,
   nullablePathArg,
   openModal,
   openTab,
@@ -552,11 +549,8 @@ import {
   pathProperty,
   persistDocks,
   primarySelection,
-  problemCount,
-  problems,
   promoteDirtyPreviewTabs,
   promoteTab,
-  reactive,
   receivingPane,
   recordDocOp,
   redo,
@@ -595,7 +589,6 @@ import {
   tabBufferUnsaved,
   tabIsLive,
   toCamelCase,
-  toRaw,
   toggleActivityTab,
   transact,
   transactDoc,
@@ -606,7 +599,7 @@ import {
   updateSiteConfig,
   view,
   workspace
-} from "./chunks/studio-ra7ar50f.js";
+} from "./chunks/studio-r5xbtctf.js";
 import {
   classMap,
   ifDefined,
@@ -658,6 +651,28 @@ import {
   updateSession,
   updateUi
 } from "./chunks/studio-cjm7fdjf.js";
+import {
+  SETTINGS,
+  clearProblems,
+  clearSettings,
+  dismiss,
+  effect,
+  effectScope,
+  hasSetting,
+  hydrateSettings,
+  notify,
+  now,
+  onSettingsChanged,
+  problemCount,
+  problems,
+  reactive,
+  readStoredSetting,
+  setSetting,
+  setSettings,
+  settingsSettled,
+  toRaw,
+  watchRemoteSettings
+} from "./chunks/studio-qpfq7xhm.js";
 import {
   defaultContentFormat,
   formatByName,
@@ -669,7 +684,7 @@ import {
   mountStillWanted,
   refreshExtensionUi,
   refreshFormats
-} from "./chunks/studio-rqemfhz6.js";
+} from "./chunks/studio-hcxzyk3x.js";
 import {
   getPlatform,
   hasPlatform,
@@ -15567,6 +15582,16 @@ function createGridView(host, controller) {
       refreshData();
     }
   });
+  const probe = () => {
+    if (!built) {
+      return `grid[${gridId}]: building`;
+    }
+    if (controller.effectiveRows().length > 0 && table.getRanges().length === 0) {
+      return `grid[${gridId}]: selection range not laid out`;
+    }
+    return null;
+  };
+  const unregisterProbe = registerGridProbe(probe);
   table.on("cellEdited", (cell) => {
     if (suppress) {
       return;
@@ -15640,6 +15665,7 @@ function createGridView(host, controller) {
   }, true);
   return {
     destroy() {
+      unregisterProbe();
       controller.bindView(null);
       table.destroy();
     },
@@ -16807,7 +16833,7 @@ function entryIdsFor(collection) {
   if (known) {
     return known;
   }
-  const pending = import("./chunks/content-source-k9724vcv.js").then((m) => m.listCollectionEntryIds(collection));
+  const pending = import("./chunks/content-source-7fy9qrm0.js").then((m) => m.listCollectionEntryIds(collection));
   entryIdCache.set(collection, pending);
   return pending;
 }
@@ -17068,7 +17094,7 @@ function renderEntryMode(surface, tab) {
   });
 }
 async function openEntryEditor(path) {
-  const { openFileInTab: openFileInTab2 } = await import("./chunks/files-yew27sn9.js");
+  const { openFileInTab: openFileInTab2 } = await import("./chunks/files-xcybanxe.js");
   await openFileInTab2(path);
   for (const [id, tab] of workspace.tabs.entries()) {
     if (tab.documentPath !== path) {
@@ -17129,7 +17155,7 @@ async function createEntry(collectionName) {
     });
     return null;
   }
-  const { createFileIn: createFileIn2 } = await import("./chunks/files-yew27sn9.js");
+  const { createFileIn: createFileIn2 } = await import("./chunks/files-xcybanxe.js");
   const created = await createFileIn2({
     content,
     dir: collection.dir,
@@ -17288,6 +17314,7 @@ async function renderDocPreview(filePath) {
   try {
     const content = await getPlatform().readFile(filePath);
     setSkipServerFunctions(true);
+    const assets = assetContextFor(filePath, hostAssetDeclarations());
     await loadFormats();
     let document_;
     if (formatForPath(filePath)) {
@@ -17297,8 +17324,13 @@ async function renderDocPreview(filePath) {
       document_ = JSON.parse(content);
     }
     const scope = await buildScope(document_, {}, location.href);
-    const element = renderNode(document_, scope);
-    return element instanceof HTMLElement ? element : null;
+    setCanvasAssetResolver((value) => resolveAssetRef(value, assets));
+    try {
+      const element = renderNode(document_, scope);
+      return element instanceof HTMLElement ? element : null;
+    } finally {
+      setCanvasAssetResolver(null);
+    }
   } catch {
     return null;
   }
@@ -17438,7 +17470,7 @@ function previewTpl(file, ctx) {
     return html`<img
       class="library-thumb"
       loading="lazy"
-      src=${loopbackAssetSrc(`/${file.path}`)}
+      src=${previewFileSrc(file.path)}
       alt=""
     />`;
   }
@@ -17512,7 +17544,7 @@ function mediaTpl(files, ctx) {
           ${isImage(file.ext) ? html`<img
                   class="library-thumb"
                   loading="lazy"
-                  src=${loopbackAssetSrc(`/${file.path}`)}
+                  src=${previewFileSrc(file.path)}
                   alt=""
                 />` : html`<sp-icon-document size="l"></sp-icon-document>`}
         </div>
@@ -18013,7 +18045,7 @@ function toolbarTpl2(panel, files) {
       <input
         type="file"
         multiple
-        accept=${UPLOAD_ACCEPT}
+        accept=${uploadAccept()}
         class="library-upload-input"
         @change=${(e) => {
     const input2 = e.target;
@@ -18927,7 +18959,7 @@ function renderFmField(tab, field, entry, value, requiredFields) {
       `
     });
   }
-  if (entry.format === "image") {
+  if (isMediaFormat(entry.format)) {
     return renderFieldRow({
       hasValue: hasVal,
       label: displayLabel,
@@ -22349,7 +22381,7 @@ function groupProblems(records = problems) {
   return groups;
 }
 function openProblemPath(path) {
-  import("./chunks/files-yew27sn9.js").then((m) => m.openFileInTab(path));
+  import("./chunks/files-xcybanxe.js").then((m) => m.openFileInTab(path));
 }
 function actionTpl(record) {
   const id = record.action;
@@ -24231,7 +24263,7 @@ function resolveFileDropTarget(hit, kind, registry = componentRegistry) {
   }
   if (hit.tagName.includes("-")) {
     const entry = registry.find((c) => c.tagName === hit.tagName);
-    const imageProps = (entry?.props ?? []).filter((p) => p.format === "image");
+    const imageProps = (entry?.props ?? []).filter((p) => isMediaFormat(p.format));
     if (imageProps.length === 1) {
       return { mode: "replace-prop", path: hit.path, prop: imageProps[0].name };
     }
@@ -26702,66 +26734,139 @@ function buildProjectSummary({
 }
 
 // src/services/ai-settings.ts
-var KEY_STORAGE = "jx.ai.openaiKey";
-var BASE_URL_STORAGE = "jx.ai.baseUrl";
-var MODEL_STORAGE = "jx.ai.model";
-var DEFAULT_MODEL = "gpt-4o";
 function getOpenAiKey() {
-  try {
-    return globalThis.localStorage?.getItem(KEY_STORAGE) ?? "";
-  } catch {
-    return "";
-  }
+  return readStoredSetting(SETTINGS.aiOpenAiKey);
 }
 function setOpenAiKey(key) {
-  try {
-    const trimmed = (key || "").trim();
-    if (trimmed) {
-      globalThis.localStorage?.setItem(KEY_STORAGE, trimmed);
-    } else {
-      globalThis.localStorage?.removeItem(KEY_STORAGE);
-    }
-    persistSettings();
-  } catch {}
+  setSetting(SETTINGS.aiOpenAiKey, key || "");
 }
 function hasOpenAiKey() {
-  return getOpenAiKey().length > 0;
+  return hasSetting(SETTINGS.aiOpenAiKey);
 }
 function getBaseUrl() {
-  try {
-    return globalThis.localStorage?.getItem(BASE_URL_STORAGE) ?? "";
-  } catch {
-    return "";
+  return readStoredSetting(SETTINGS.aiBaseUrl);
+}
+function storedModel() {
+  return readStoredSetting(SETTINGS.aiModel);
+}
+function setModel(modelId) {
+  setSetting(SETTINGS.aiModel, modelId || "");
+}
+function saveAiProvider(provider) {
+  setSettings([
+    [SETTINGS.aiOpenAiKey, provider.apiKey],
+    [SETTINGS.aiBaseUrl, provider.baseUrl],
+    [SETTINGS.aiModel, provider.model]
+  ]);
+}
+function clearAiProvider() {
+  clearSettings([SETTINGS.aiOpenAiKey, SETTINGS.aiBaseUrl, SETTINGS.aiModel]);
+}
+
+// src/services/ai-models.ts
+function aiConnection() {
+  return { apiKey: getOpenAiKey(), baseUrl: getBaseUrl() };
+}
+function fingerprint(credentials) {
+  return `${credentials.apiKey}\x00${credentials.baseUrl}`;
+}
+var cache2 = null;
+var cacheKey = "";
+var proxyConfigured = false;
+var proxyManaged = false;
+var proxyDefaultModel = "";
+var proxyCode;
+var proxyProbe = null;
+var probeListeners = new Set;
+function resetModelCache() {
+  cache2 = null;
+  cacheKey = "";
+  proxyConfigured = false;
+  proxyManaged = false;
+  proxyDefaultModel = "";
+  proxyCode = undefined;
+  proxyProbe = null;
+}
+var CONNECTION_KEYS = new Set([
+  SETTINGS.aiOpenAiKey.key,
+  SETTINGS.aiBaseUrl.key,
+  SETTINGS.cfToken.key,
+  SETTINGS.cfAccountId.key
+]);
+onSettingsChanged((keys) => {
+  if (keys.some((key) => CONNECTION_KEYS.has(key))) {
+    resetModelCache();
   }
+});
+function cachedModels(credentials) {
+  return cache2 && cacheKey === fingerprint(credentials) ? cache2 : null;
 }
-function setBaseUrl(url) {
-  try {
-    const trimmed = (url || "").trim().replace(/\/+$/, "");
-    if (trimmed) {
-      globalThis.localStorage?.setItem(BASE_URL_STORAGE, trimmed);
-    } else {
-      globalThis.localStorage?.removeItem(BASE_URL_STORAGE);
+function ensureProxyProbe(onSettled) {
+  if (onSettled) {
+    probeListeners.add(onSettled);
+  }
+  proxyProbe ??= fetchAvailableModels({ force: true }).catch(() => {}).then(() => {
+    for (const notify2 of probeListeners) {
+      notify2();
     }
-    persistSettings();
-  } catch {}
+  });
 }
-function getModel() {
+function hasAiCredentials() {
+  return hasOpenAiKey() || isProxyConfigured();
+}
+function isProxyConfigured() {
+  return proxyConfigured;
+}
+function isManagedProxy() {
+  return proxyManaged;
+}
+function proxyStateCode() {
+  return proxyCode;
+}
+function getProxyDefaultModel() {
+  return proxyDefaultModel;
+}
+function preferredModel() {
+  return storedModel() || getProxyDefaultModel() || SETTINGS.aiModel.default;
+}
+function siblingRoute(chatUrl, segment) {
+  let url;
   try {
-    return globalThis.localStorage?.getItem(MODEL_STORAGE) || DEFAULT_MODEL;
+    url = new URL(chatUrl, "http://jx.invalid");
   } catch {
-    return DEFAULT_MODEL;
+    return chatUrl;
   }
+  url.pathname = url.pathname.replace(/[^/]*$/, segment);
+  return /^https?:/i.test(chatUrl) ? url.href : `${url.pathname}${url.search}`;
 }
-function setModel(modelId) {
-  try {
-    const trimmed = (modelId || "").trim();
-    if (trimmed) {
-      globalThis.localStorage?.setItem(MODEL_STORAGE, trimmed);
-    } else {
-      globalThis.localStorage?.removeItem(MODEL_STORAGE);
-    }
-    persistSettings();
-  } catch {}
+async function fetchAvailableModels(opts = {}) {
+  const credentials = opts.credentials ?? aiConnection();
+  const key = fingerprint(credentials);
+  if (cache2 && cacheKey === key && !opts.force) {
+    return cache2;
+  }
+  const plat = getPlatform();
+  const chatUrl = await Promise.resolve(plat.aiChatUrl());
+  const modelsUrl = siblingRoute(chatUrl, "models");
+  const headers = {};
+  if (credentials.apiKey) {
+    headers["X-Api-Key"] = credentials.apiKey;
+  }
+  if (credentials.baseUrl) {
+    headers["X-Api-Base-URL"] = credentials.baseUrl;
+  }
+  const resp = await fetch(modelsUrl, { headers });
+  if (!resp.ok) {
+    throw new Error(`HTTP ${resp.status}`);
+  }
+  const data = await resp.json();
+  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 }));
+  cacheKey = key;
+  return cache2;
 }
 
 // src/services/context-manager.ts
@@ -27068,7 +27173,7 @@ function projectRoot() {
   return workspace.projectRoot || "";
 }
 function createDocumentAssistant() {
-  const chatState = createChatState({ model: getModel() });
+  const chatState = createChatState({ model: preferredModel() });
   let sessionId = null;
   const getProjectStyle = () => workspace.projectConfig?.style;
   const findOpenTab = (path) => {
@@ -27160,7 +27265,7 @@ function createDocumentAssistant() {
     try {
       const plat = getPlatform();
       const chatUrl = await Promise.resolve(plat.aiChatUrl());
-      chatState.setModel(getModel());
+      chatState.setModel(preferredModel());
       const streamingClient = createProxyStreamingClient({
         chatUrl,
         model: chatState.model,
@@ -27259,83 +27364,6 @@ function createDocumentAssistant() {
   };
 }
 
-// src/services/ai-models.ts
-var cache2 = null;
-var proxyConfigured = false;
-var proxyManaged = false;
-var proxyDefaultModel = "";
-var proxyCode;
-var proxyProbe = null;
-var probeListeners = new Set;
-function invalidateModelCache() {
-  cache2 = null;
-  proxyConfigured = false;
-  proxyManaged = false;
-  proxyDefaultModel = "";
-  proxyCode = undefined;
-  proxyProbe = null;
-}
-function ensureProxyProbe(onSettled) {
-  if (onSettled) {
-    probeListeners.add(onSettled);
-  }
-  proxyProbe ??= fetchAvailableModels({ force: true }).catch(() => {}).then(() => {
-    for (const notify2 of probeListeners) {
-      notify2();
-    }
-  });
-}
-function hasAiCredentials() {
-  return hasOpenAiKey() || isProxyConfigured();
-}
-function isProxyConfigured() {
-  return proxyConfigured;
-}
-function isManagedProxy() {
-  return proxyManaged;
-}
-function proxyStateCode() {
-  return proxyCode;
-}
-function siblingRoute(chatUrl, segment) {
-  let url;
-  try {
-    url = new URL(chatUrl, "http://jx.invalid");
-  } catch {
-    return chatUrl;
-  }
-  url.pathname = url.pathname.replace(/[^/]*$/, segment);
-  return /^https?:/i.test(chatUrl) ? url.href : `${url.pathname}${url.search}`;
-}
-async function fetchAvailableModels(opts = {}) {
-  if (cache2 && !opts.force) {
-    return cache2;
-  }
-  const plat = getPlatform();
-  const chatUrl = await Promise.resolve(plat.aiChatUrl());
-  const modelsUrl = siblingRoute(chatUrl, "models");
-  const headers = {};
-  const apiKey = opts.apiKey || getOpenAiKey();
-  if (apiKey) {
-    headers["X-Api-Key"] = apiKey;
-  }
-  const baseUrl = opts.baseUrl || getBaseUrl();
-  if (baseUrl) {
-    headers["X-Api-Base-URL"] = baseUrl;
-  }
-  const resp = await fetch(modelsUrl, { headers });
-  if (!resp.ok) {
-    throw new Error(`HTTP ${resp.status}`);
-  }
-  const data = await resp.json();
-  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;
-}
-
 // src/ui/ai-credentials-form.ts
 function createAiCredentialsForm(opts) {
   let keyDraft = "";
@@ -27344,31 +27372,28 @@ function createAiCredentialsForm(opts) {
   let availableModels = [];
   let modelsLoading = false;
   let modelsError = "";
-  function startEdit() {
+  function loadDrafts() {
     keyDraft = getOpenAiKey();
     baseUrlDraft = getBaseUrl();
-    modelDraft = getModel();
+    modelDraft = storedModel();
+  }
+  function startEdit() {
+    loadDrafts();
     opts.requestRender();
     if (availableModels.length === 0 && !modelsLoading) {
       fetchModels();
     }
   }
   function save() {
-    setOpenAiKey(keyDraft);
-    setBaseUrl(baseUrlDraft);
-    setModel(modelDraft);
-    keyDraft = "";
-    baseUrlDraft = "";
-    modelDraft = "";
-    availableModels = [];
-    invalidateModelCache();
+    saveAiProvider({ apiKey: keyDraft, baseUrl: baseUrlDraft, model: modelDraft });
+    loadDrafts();
+    modelsError = "";
     opts.onSaved?.();
     opts.requestRender();
   }
   function cancel() {
-    keyDraft = "";
-    baseUrlDraft = "";
-    modelDraft = "";
+    loadDrafts();
+    modelsError = "";
     opts.onCancel?.();
     opts.requestRender();
   }
@@ -27378,8 +27403,10 @@ function createAiCredentialsForm(opts) {
     opts.requestRender();
     try {
       availableModels = await fetchAvailableModels({
-        apiKey: getOpenAiKey() || keyDraft,
-        baseUrl: baseUrlDraft || getBaseUrl(),
+        credentials: {
+          apiKey: keyDraft || getOpenAiKey(),
+          baseUrl: baseUrlDraft || getBaseUrl()
+        },
         force: true
       });
     } catch (error) {
@@ -27405,7 +27432,7 @@ function createAiCredentialsForm(opts) {
           type="password"
           size="s"
           placeholder="sk-… or any compatible key"
-          .value=${keyDraft}
+          .value=${live(keyDraft)}
           @input=${(e) => {
       keyDraft = e.target.value;
     }}
@@ -27416,7 +27443,7 @@ function createAiCredentialsForm(opts) {
                   class="ai-creds-field"
                   size="s"
                   allows-custom-value
-                  .value=${modelDraft}
+                  .value=${live(modelDraft)}
                   @change=${(e) => {
       modelDraft = e.target.value;
     }}
@@ -27431,7 +27458,7 @@ function createAiCredentialsForm(opts) {
                   class="ai-creds-field"
                   size="s"
                   placeholder="Model ID (e.g. gpt-4o, claude-sonnet-4-20250514, etc.)"
-                  .value=${modelDraft}
+                  .value=${live(modelDraft)}
                   @input=${(e) => {
       modelDraft = e.target.value;
     }}
@@ -27447,7 +27474,7 @@ function createAiCredentialsForm(opts) {
           class="ai-creds-field"
           size="s"
           placeholder="Endpoint (optional, e.g. http://localhost:11434/v1)"
-          .value=${baseUrlDraft}
+          .value=${live(baseUrlDraft)}
           @input=${(e) => {
       baseUrlDraft = e.target.value;
     }}
@@ -27566,7 +27593,7 @@ function listAccounts() {
   const githubToken = githubTokenStored();
   const cfToken = getCfToken();
   const cfAccount = getCfAccountId();
-  const model = getModel();
+  const model = preferredModel();
   const endpoint = getBaseUrl();
   return [
     {
@@ -27581,21 +27608,14 @@ function listAccounts() {
       label: "AI provider",
       detail: hasOpenAiKey() ? `Key stored. Model ${model}${endpoint ? ` via ${endpoint}` : ""}.` : "No key stored. The Assistant section is where one is entered.",
       connected: hasOpenAiKey(),
-      revoke: () => {
-        setOpenAiKey("");
-        setBaseUrl("");
-        setModel("");
-      }
+      revoke: clearAiProvider
     },
     {
       id: "cloudflare",
       label: "Cloudflare",
       detail: cfToken ? `Connected${cfAccount ? ` — account ${cfAccount}` : ""}.` : "Not connected. Publishing will ask when it needs it.",
       connected: Boolean(cfToken),
-      revoke: () => {
-        setCfToken("");
-        setCfAccountId("");
-      }
+      revoke: clearCfConnection
     }
   ];
 }
@@ -27622,7 +27642,7 @@ function notifyCredentialsChanged() {
 }
 
 // src/settings/preferences-keymap.ts
-var KEYBINDINGS_STORAGE_KEY = "jx.keybindings";
+var KEYBINDINGS_STORAGE_KEY = SETTINGS.keybindings.key;
 var UNMODIFIED_KEYS = new Set([
   "escape",
   "enter",
@@ -27662,11 +27682,7 @@ function isBindableChord(chord) {
   return UNMODIFIED_KEYS.has(parsed.key) || FUNCTION_KEY.test(parsed.key);
 }
 function readRaw() {
-  try {
-    return globalThis.localStorage?.getItem(KEYBINDINGS_STORAGE_KEY) ?? "";
-  } catch {
-    return "";
-  }
+  return readStoredSetting(SETTINGS.keybindings);
 }
 function canonicalise(chords) {
   if (!Array.isArray(chords)) {
@@ -27709,13 +27725,11 @@ function loadKeybindingOverrides() {
   return layer;
 }
 function store(layer) {
-  try {
-    if (layer.size === 0) {
-      globalThis.localStorage?.removeItem(KEYBINDINGS_STORAGE_KEY);
-      return;
-    }
-    globalThis.localStorage?.setItem(KEYBINDINGS_STORAGE_KEY, JSON.stringify(Object.fromEntries(layer)));
-  } catch {}
+  if (layer.size === 0) {
+    clearSettings([SETTINGS.keybindings]);
+    return;
+  }
+  setSetting(SETTINGS.keybindings, JSON.stringify(Object.fromEntries(layer)));
 }
 function applyKeybindingOverrides(registry) {
   registry.keymap.setOverrides(loadKeybindingOverrides());
@@ -28147,19 +28161,22 @@ function createComposer(opts) {
   let textareaEl = null;
   let hasText = false;
   let chips = [];
-  let models = null;
   let modelsLoading = false;
   let modelsError = "";
+  let attempted = null;
+  function sameConnection(a, b) {
+    return a !== null && a.apiKey === b.apiKey && a.baseUrl === b.baseUrl;
+  }
   function ensureModels(force = false) {
-    if (modelsLoading || models !== null && !force) {
+    const credentials = aiConnection();
+    const settled = cachedModels(credentials) !== null || sameConnection(attempted, credentials);
+    if (modelsLoading || settled && !force) {
       return;
     }
     modelsLoading = true;
     modelsError = "";
-    fetchAvailableModels({ force }).then((list2) => {
-      models = list2;
-    }).catch((error) => {
-      models = [];
+    attempted = credentials;
+    fetchAvailableModels({ credentials, force }).catch((error) => {
       modelsError = error.message || "Failed to fetch models";
     }).finally(() => {
       modelsLoading = false;
@@ -28169,7 +28186,7 @@ function createComposer(opts) {
   function onModelChange(e) {
     const { value } = e.target;
     if (value === RETRY_MODELS) {
-      models = null;
+      attempted = null;
       ensureModels(true);
       opts.requestRender();
       return;
@@ -28180,8 +28197,8 @@ function createComposer(opts) {
   }
   function renderModelPicker() {
     ensureModels();
-    const current = getModel();
-    const listed = models ?? [];
+    const current = preferredModel();
+    const listed = cachedModels(aiConnection()) ?? [];
     const items = listed.some((m) => m.id === current) ? listed : [{ id: current, name: current }, ...listed];
     return html`
       <sp-picker
@@ -28687,6 +28704,71 @@ function renderAiPanelTemplate() {
   `;
 }
 
+// ../schema/src/component-meta.ts
+function collectSlotDefs(node, out = []) {
+  if (!node || typeof node !== "object" || Array.isArray(node)) {
+    return out;
+  }
+  const el = node;
+  if (el.tagName === "slot") {
+    const attrs = el.attributes;
+    const rawName = attrs?.name;
+    const name = typeof rawName === "string" ? rawName.trim() : "";
+    const { children } = el;
+    out.push({
+      name,
+      ...Array.isArray(children) && children.length > 0 ? { fallback: children } : {}
+    });
+  }
+  if (Array.isArray(el.children)) {
+    for (const c of el.children) {
+      collectSlotDefs(c, out);
+    }
+  }
+  return out;
+}
+function isPropEntry(def) {
+  if (def == null) {
+    return false;
+  }
+  if (typeof def !== "object") {
+    return true;
+  }
+  const obj = def;
+  return !obj.$prototype && !obj.$handler && !obj.$compute;
+}
+function componentMetaFrom(doc, path) {
+  if (!doc || typeof doc !== "object" || Array.isArray(doc)) {
+    return null;
+  }
+  const content = doc;
+  const { tagName } = content;
+  if (typeof tagName !== "string" || !tagName.includes("-")) {
+    return null;
+  }
+  const slots = collectSlotDefs(content);
+  const state2 = content.state ?? {};
+  return {
+    $id: typeof content.$id === "string" && content.$id ? content.$id : null,
+    hasElements: Array.isArray(content.$elements) && content.$elements.length > 0,
+    path,
+    props: Object.entries(state2).filter(([, def]) => isPropEntry(def)).map(([name, def]) => {
+      if (typeof def !== "object" || def === null) {
+        return { default: def, name, type: typeof def };
+      }
+      const obj = def;
+      return {
+        default: obj.default,
+        format: obj.format,
+        name,
+        type: obj.type
+      };
+    }),
+    ...slots.length > 0 ? { slots } : {},
+    tagName
+  };
+}
+
 // ../protocol/src/problem.ts
 var PROBLEM_TYPE_BASE = "https://jxsuite.com/problems/";
 function problemSlug(type) {
@@ -28760,7 +28842,8 @@ var STUDIO_ROUTES = {
   fileRead: route("GET", "/__studio/file", "Read a file's text content"),
   fileWrite: route("PUT", "/__studio/file", "Write a file's text content"),
   fileDelete: route("DELETE", "/__studio/file", "Delete a file"),
-  fileUpload: route("POST", "/__studio/file/upload", "Upload binary content to a path"),
+  fileUpload: route("POST", "/__studio/file/upload", "Upload binary content to a path → UploadResult {path, size?}. `path` is the answer, not an " + "echo: a store that de-duplicates, suffixes, or normalizes names reports what it really wrote"),
+  documentRaw: route("GET", "/__studio/raw/", "A project file as its own bytes, at its own URL — the mount a canvas renders against when " + "the editor origin does not serve the site's URL space. The project-relative path is " + "appended to this prefix", "The canvas cannot address project files by URL, so a host whose origin does not serve the " + "site URL space renders no component $refs and no images."),
   fileRename: route("POST", "/__studio/file/rename", "Rename/move (+ refactor report)"),
   references: route("GET", "/__studio/references", "Where a file or a component tag is used (?path=&tag=, at least one) → ReferencesResult " + "{files, filesReferencing, refsTotal} — the read side of the rename refactor's own walker, " + "cached until the backend's watcher sees the tree move (backs findReferences)", 'Usage counts are hidden: no "Used on N pages" in the inspector, no Selection: Find Usages, ' + "and delete/rename confirmations state no reference count."),
   locate: route("POST", "/__studio/locate", "Find a file by name → {path | null}"),
@@ -28911,7 +28994,7 @@ function createCloudPlatform(project) {
     id: "cloud",
     projectRoot: root,
     canvasUrl: "/canvas.html",
-    ...base ? { documentBaseUrl: `${base}/raw/` } : {},
+    ...base ? { assetSpace: "repo", documentBaseUrl: `${base}/raw/` } : {},
     openProjectPicker: "repo-list",
     createDestination: "repo",
     async activate() {
@@ -28970,7 +29053,8 @@ function createCloudPlatform(project) {
         method: "POST",
         body: data
       });
-      return okJson(res, `Upload failed: ${path}`);
+      const body = await okJson(res, `Upload failed: ${path}`);
+      return { path: body.path ?? path, ...body.size === undefined ? {} : { size: body.size } };
     },
     async deleteFile(path) {
       const res = await api(`/file?path=${encodeURIComponent(path)}`, { method: "DELETE" });
@@ -29098,7 +29182,41 @@ function createCloudPlatform(project) {
       return data.result;
     },
     async discoverComponents() {
-      return [];
+      const SKIP = new Set(["node_modules", "dist", ".git", ".claude", ".obsidian", "build"]);
+      const MAX_FILES = 400;
+      const MAX_DEPTH = 6;
+      const jsonPaths = [];
+      const walk = async (dir, depth) => {
+        if (depth > MAX_DEPTH || jsonPaths.length >= MAX_FILES) {
+          return;
+        }
+        let entries;
+        try {
+          entries = await platform.listDirectory(dir);
+        } catch {
+          return;
+        }
+        const dirs = [];
+        for (const entry of entries) {
+          if (entry.type === "directory") {
+            if (!SKIP.has(entry.name) && !entry.name.startsWith(".")) {
+              dirs.push(entry.path);
+            }
+          } else if (entry.name.endsWith(".json") && jsonPaths.length < MAX_FILES) {
+            jsonPaths.push(entry.path);
+          }
+        }
+        await Promise.all(dirs.map(async (d) => walk(d, depth + 1)));
+      };
+      await walk("", 0);
+      const metas = await Promise.all(jsonPaths.map(async (path) => {
+        try {
+          return componentMetaFrom(JSON.parse(await platform.readFile(path)), path);
+        } catch {
+          return null;
+        }
+      }));
+      return metas.filter((m) => m !== null);
     },
     async codeService() {
       return null;
@@ -29770,7 +29888,8 @@ function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(`Upload failed: ${path}`);
       }
-      return await res.json();
+      const body = await res.json();
+      return { path: body.path ?? path, ...body.size === undefined ? {} : { size: body.size } };
     },
     async deleteFile(path) {
       const res = await fetch(`/__studio/file?path=${encodeURIComponent(serverPath(path))}`, {
@@ -30368,7 +30487,7 @@ function createDevServerPlatform() {
       }
     },
     async cfApi(apiPath, init) {
-      const { getCfToken: getCfToken2 } = await import("./chunks/cf-settings-g5fbf2zp.js");
+      const { getCfToken: getCfToken2 } = await import("./chunks/cf-settings-zj2cj1ar.js");
       const token = getCfToken2();
       if (!token) {
         throw new Error("No Cloudflare API token configured");
@@ -30386,7 +30505,7 @@ function createDevServerPlatform() {
       return envelope.result ?? envelope;
     },
     async cfConnection() {
-      const { getCfAccountId: getCfAccountId2, getCfToken: getCfToken2, setCfAccountId: setCfAccountId2 } = await import("./chunks/cf-settings-g5fbf2zp.js");
+      const { getCfAccountId: getCfAccountId2, getCfToken: getCfToken2, setCfAccountId } = await import("./chunks/cf-settings-zj2cj1ar.js");
       if (!getCfToken2()) {
         return null;
       }
@@ -30396,7 +30515,7 @@ function createDevServerPlatform() {
           return { connected: false };
         }
         const chosen = accounts.find((a) => a.id === getCfAccountId2()) ?? accounts[0];
-        setCfAccountId2(chosen.id);
+        setCfAccountId(chosen.id);
         return { connected: true, accountId: chosen.id, accountName: chosen.name };
       } catch {
         return { connected: false };
@@ -43971,11 +44090,11 @@ function $488c6ddbf4ef74c2$var$getCachedNumberFormatter(locale, options = {}) {
       style: "decimal"
     };
   }
-  let cacheKey = locale + (options ? Object.entries(options).sort((a4, b2) => a4[0] < b2[0] ? -1 : 1).join() : "");
-  if ($488c6ddbf4ef74c2$var$formatterCache.has(cacheKey))
-    return $488c6ddbf4ef74c2$var$formatterCache.get(cacheKey);
+  let cacheKey2 = locale + (options ? Object.entries(options).sort((a4, b2) => a4[0] < b2[0] ? -1 : 1).join() : "");
+  if ($488c6ddbf4ef74c2$var$formatterCache.has(cacheKey2))
+    return $488c6ddbf4ef74c2$var$formatterCache.get(cacheKey2);
   let numberFormatter = new Intl.NumberFormat(locale, options);
-  $488c6ddbf4ef74c2$var$formatterCache.set(cacheKey, numberFormatter);
+  $488c6ddbf4ef74c2$var$formatterCache.set(cacheKey2, numberFormatter);
   return numberFormatter;
 }
 function $488c6ddbf4ef74c2$export$711b50b3c525e0f2(numberFormat, signDisplay, num) {
@@ -44048,11 +44167,11 @@ function $6c7bd7858deea686$var$getNumberParserImpl(locale, options, value) {
   return defaultParser;
 }
 function $6c7bd7858deea686$var$getCachedNumberParser(locale, options) {
-  let cacheKey = locale + (options ? Object.entries(options).sort((a4, b2) => a4[0] < b2[0] ? -1 : 1).join() : "");
-  let parser = $6c7bd7858deea686$var$numberParserCache.get(cacheKey);
+  let cacheKey2 = locale + (options ? Object.entries(options).sort((a4, b2) => a4[0] < b2[0] ? -1 : 1).join() : "");
+  let parser = $6c7bd7858deea686$var$numberParserCache.get(cacheKey2);
   if (!parser) {
     parser = new $6c7bd7858deea686$var$NumberParserImpl(locale, options);
-    $6c7bd7858deea686$var$numberParserCache.set(cacheKey, parser);
+    $6c7bd7858deea686$var$numberParserCache.set(cacheKey2, parser);
   }
   return parser;
 }
@@ -56570,7 +56689,7 @@ async function startImport(ctx) {
   try {
     const key = getOpenAiKey();
     const baseUrl = getBaseUrl();
-    const model = getModel();
+    const model = preferredModel();
     const result = await platform.importSite({
       url: parsed.href,
       name: ctx.form.name.trim(),
@@ -57258,7 +57377,7 @@ function socialCard(preview) {
     <figure class="seo-card seo-card--social" aria-label="Social card preview">
       <figcaption class="seo-card-label">Social card</figcaption>
       <div class="seo-social-media">
-        ${image2 ? html`<img src=${loopbackAssetSrc(previewAssetSrc(image2))} alt="" />` : html`<span class="seo-unset">No image</span>`}
+        ${image2 ? html`<img src=${previewAssetSrc(image2)} alt="" />` : html`<span class="seo-unset">No image</span>`}
       </div>
       <div class="seo-social-text">
         <span class="seo-social-domain"
@@ -58591,9 +58710,9 @@ function renderDefsEditor(container) {
 
 // src/version.ts
 var APP_NAME = "Jx Studio";
-var VERSION = "2.4.2";
-var BUILD_DATE = "2026-08-24T19:48:51.173Z";
-var GIT_COMMIT = "7859073";
+var VERSION = "3.0.0";
+var BUILD_DATE = "2026-08-26T00:56:37.432Z";
+var GIT_COMMIT = "27b8cd9";
 var LINKS = {
   github: "https://github.com/jxsuite/jx",
   docs: "https://github.com/jxsuite/jx#readme",
@@ -59670,7 +59789,7 @@ async function openProjectSettings(section) {
   showSettingsDocument();
   notifySettingsDocument();
   try {
-    const { syncExtensionSettingsSections } = await import("./chunks/extension-sections-0ada0xcw.js");
+    const { syncExtensionSettingsSections } = await import("./chunks/extension-sections-kwzvpemr.js");
     await syncExtensionSettingsSections();
   } catch (error) {
     notify.warn(`Could not load extension settings sections — ${errorMessage(error)}`, {
@@ -60294,7 +60413,7 @@ function publishCommands() {
         name: "set_up_publishing"
       },
       run: async () => {
-        const { openPublishPanel } = await import("./chunks/publish-panel-a0pdft5w.js");
+        const { openPublishPanel } = await import("./chunks/publish-panel-09sy2bab.js");
         openPublishPanel();
       },
       title: "Set Up Publishing"
@@ -61016,7 +61135,7 @@ function i18nCommands() {
           });
           return;
         }
-        const { openFileInTab: openFileInTab2 } = await import("./chunks/files-yew27sn9.js");
+        const { openFileInTab: openFileInTab2 } = await import("./chunks/files-xcybanxe.js");
         await openFileInTab2(path);
       },
       title: "Open Translation"
@@ -61063,7 +61182,7 @@ function i18nCommands() {
           return;
         }
         const cut = path.lastIndexOf("/");
-        const { createFileIn: createFileIn2, openFileInTab: openFileInTab2 } = await import("./chunks/files-yew27sn9.js");
+        const { createFileIn: createFileIn2, openFileInTab: openFileInTab2 } = await import("./chunks/files-xcybanxe.js");
         const created = await createFileIn2({
           content,
           dir: cut === -1 ? "." : path.slice(0, cut),
@@ -61663,6 +61782,13 @@ hydrateAccountStatus().then(() => {
 hydrateSettings().then(() => {
   render();
 });
+onSettingsChanged(() => {
+  render();
+});
+watchRemoteSettings();
+globalThis.addEventListener("beforeunload", () => {
+  settingsSettled();
+});
 function renderLeftPanel() {
   render10();
 }
@@ -61876,5 +62002,5 @@ export {
   hasUnsavedTabs
 };
 
-//# debugId=31462A53C2ABCD7964756E2164756E21
+//# debugId=F554526052E4BECE64756E2164756E21
 //# sourceMappingURL=studio.js.map