@jxsuite/studio 0.30.1 → 0.31.1

package/dist/studio.js

@@ -195099,11 +195099,11 @@ var init_state = __esm(() => {
 });
 
 // src/tabs/tab.ts
-function createDefaultUi() {
+function createDefaultUi(canvasMode) {
   return {
     activeMedia: null,
     activeSelector: null,
-    canvasMode: "edit",
+    canvasMode,
     editingFunction: null,
     featureToggles: {},
     gitBranches: null,
@@ -195139,6 +195139,7 @@ function createTab({
   const scope = effectScope();
   normalizeArrayChildren(document2);
   const resolvedModes = capabilities?.modes ?? inferModes(documentPath, sourceFormat);
+  const initialCanvasMode = resolvedModes[0] ?? "edit";
   const tab = scope.run(() => ({
     capabilities: { modes: resolvedModes },
     doc: reactive({
@@ -195168,7 +195169,7 @@ function createTab({
       documentStack: [],
       hover: null,
       selection: null,
-      ui: createDefaultUi()
+      ui: createDefaultUi(initialCanvasMode)
     })
   }));
   return tab;
@@ -201043,7 +201044,7 @@ function rawTextArea(key, value, commit, opts = {}) {
   const { onInput, onCommit } = makeHandlers(key, ms, commit, opts.commitMode);
   const style = [
     `min-height:${opts.minHeight ?? "40px"}`,
-    opts.mono ? "font-family:'SF Mono','Fira Code','Consolas',monospace;font-size:11px" : "",
+    opts.mono ? "font-family:var(--font-mono);font-size:var(--spectrum-font-size-50,11px)" : "",
     opts.style ?? ""
   ].filter(Boolean).join(";");
   return keyed(key, html3`
@@ -201293,7 +201294,8 @@ function renderLiteralEditor(operand, onChange) {
                 ?checked=${Boolean(operand)}
                 @change=${(e) => onChange(e.target.checked)}
                 >true</sp-checkbox
-              >` : html3`<span style="font-size:12px;color:var(--spectrum-global-color-gray-600)"
+              >` : html3`<span
+                style="font-size:var(--spectrum-font-size-75, 12px);color:var(--spectrum-gray-600, #808080)"
                 >null</span
               >`}
     </div>
@@ -201339,7 +201341,7 @@ function renderSpliceArgsEditor(args, onChange, opts) {
             class="array-object-row"
             style="display:flex;gap:4px;align-items:center;margin-bottom:4px"
           >
-            <span style="font-size:10px;color:var(--spectrum-global-color-gray-600);min-width:30px">
+            <span style="font-size:10px;color:var(--spectrum-gray-600, #808080);min-width:30px">
               ${labels[idx] ?? "item"}
             </span>
             ${renderOperandEditor(arg, (newArg) => {
@@ -201370,7 +201372,7 @@ function renderExpressionEditor(node, onChange, opts) {
   const safeNode = node && typeof node === "object" ? node : { operator: "=", target: null };
   const op = safeNode.operator || "=";
   const info = operatorInfo(op);
-  const nestStyle = depth > 0 ? "border-left:2px solid var(--spectrum-global-color-gray-300);margin-left:8px;padding-left:8px;" : "";
+  const nestStyle = depth > 0 ? "border-left:2px solid var(--spectrum-gray-300, #3c3c3c);margin-left:8px;padding-left:8px;" : "";
   return html3`
     <div class="expression-editor" style=${nestStyle}>
       ${renderFieldRow({
@@ -201624,7 +201626,7 @@ function renderMediaPickerPopover() {
                           slot="icon"
                           src=${m.path}
                           alt=""
-                          style="width:24px;height:24px;object-fit:cover;border-radius:2px"
+                          style="width:24px;height:24px;object-fit:cover;border-radius:var(--spectrum-corner-radius-75, 2px)"
                         />` : nothing}
                     ${m.name}
                   </sp-menu-item>
@@ -202352,7 +202354,7 @@ function renderFunctionFields(S, name, def3, _textareaRow, ctx) {
         </div>
         <textarea
           class="field-input"
-          style="min-height:60px;font-family:monospace;font-size:11px"
+          style="min-height:60px;font-family:var(--font-mono);font-size:var(--spectrum-font-size-50, 11px)"
           .value=${def3.body || ""}
           @input=${(e) => {
     const v = e.target.value;
@@ -202377,7 +202379,7 @@ function renderParameterEditorTemplate(_S, name, def3, ctx) {
         <div style="display:flex;flex-wrap:wrap;gap:4px;align-items:center">
           ${params.map((p, i2) => html3`
               <span
-                style="display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:3px;background:var(--bg-hover);font-size:11px;font-family:monospace"
+                style="display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:var(--radius);background:var(--hover-bg);font-size:var(--spectrum-font-size-50, 11px);font-family:var(--font-mono)"
               >
                 ${p.name || "?"}
                 <span
@@ -202393,7 +202395,7 @@ function renderParameterEditorTemplate(_S, name, def3, ctx) {
             `)}
           <input
             class="field-input"
-            style="width:60px;flex:0 0 auto;font-size:11px"
+            style="width:60px;flex:0 0 auto;font-size:var(--spectrum-font-size-50, 11px)"
             placeholder="+"
             @keydown=${(e) => {
         if (e.key === "Enter" && e.target.value.trim()) {
@@ -202514,7 +202516,7 @@ function renderEmitsEditorTemplate(S, name, def3) {
   }
   return html3`
     <div
-      style="font-size:11px;font-weight:600;color:var(--fg-dim);margin:8px 0 4px;text-transform:uppercase;letter-spacing:0.05em"
+      style="font-size:var(--spectrum-font-size-50, 11px);font-weight:600;color:var(--fg-dim);margin:8px 0 4px;text-transform:uppercase;letter-spacing:0.05em"
     >
       Emits
     </div>
@@ -202737,7 +202739,7 @@ function renderSchemaFieldsTemplate(schema, def3, name, _S, ctx = null) {
                   <div style="display:flex;flex-wrap:wrap;gap:3px;margin-bottom:4px">
                     ${Object.entries(cv.properties).map(([k, v]) => html3`
                         <span
-                          style="background:var(--bg-alt);padding:1px 6px;border-radius:3px;font-size:10px;color:var(--fg-dim)"
+                          style="background:var(--bg);padding:1px 6px;border-radius:var(--radius);font-size:10px;color:var(--fg-dim)"
                           >${k}: ${v.type ?? "any"}</span
                         >
                       `)}
@@ -202857,7 +202859,7 @@ function renderExternalPrototypeEditorTemplate(S, name, def3, ctx) {
       }
     } else {
       schemaContent = html3`<div
-        style="padding:4px 0;font-size:11px;color:var(--fg-dim);font-style:italic"
+        style="padding:4px 0;font-size:var(--spectrum-font-size-50, 11px);color:var(--fg-dim);font-style:italic"
       >
         Loading schema…
       </div>`;
@@ -202871,7 +202873,10 @@ function renderExternalPrototypeEditorTemplate(S, name, def3, ctx) {
     }
   }
   return html3`
-    ${importedPath ? html3`<div class="signal-hint" style="padding:4px 0 2px;font-size:11px;color:var(--fg-dim)">
+    ${importedPath ? html3`<div
+          class="signal-hint"
+          style="padding:4px 0 2px;font-size:var(--spectrum-font-size-50, 11px);color:var(--fg-dim)"
+        >
           ${def3.$prototype}
         </div>` : html3`
           ${signalFieldRow("Source", def3.$src || "", (v) => {
@@ -217858,7 +217863,11 @@ function renderLayersTemplate(ctx) {
             class="layer-row"
             style="padding-left:${depth * 16 + 8}px; opacity: 0.6; font-style: italic;"
           >
-            <span class="layer-tag" style="background: #64748b; font-size: 0.65rem;">text</span>
+            <span
+              class="layer-tag"
+              style="background: var(--spectrum-gray-500, #64748b); font-size: 0.65rem;"
+              >text</span
+            >
             <span class="layer-label">${textPreview}</span>
           </div>
         `
@@ -218447,6 +218456,251 @@ var init_context_menu = __esm(() => {
   init_layers();
 });
 
+// src/ui/progress-modal.ts
+function card(body) {
+  return html3`
+    <sp-underlay open></sp-underlay>
+    <div
+      class="progress-modal"
+      role="dialog"
+      aria-live="polite"
+      style="position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 48px));max-height:calc(100vh - 96px);height:max-content;background:var(--bg-panel,#1e1e1e);border:1px solid var(--border,#3a3a3a);border-radius:var(--spectrum-corner-radius-200,8px);padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 32px rgba(0,0,0,.4)"
+    >
+      ${body}
+    </div>
+  `;
+}
+function runningView(title, status2) {
+  return card(html3`
+    <div style="display:flex;align-items:center;gap:14px">
+      <sp-progress-circle indeterminate size="m" aria-label=${title}></sp-progress-circle>
+      <div style="display:flex;flex-direction:column;gap:2px">
+        <strong style="font-size:var(--spectrum-font-size-100, 14px)">${title}</strong>
+        ${status2 ? html3`<span style="font-size:var(--spectrum-font-size-75, 12px);color:var(--fg-dim,#aaa)"
+              >${status2}</span
+            >` : ""}
+      </div>
+    </div>
+  `);
+}
+function errorView(title, message, onClose) {
+  return card(html3`
+    <div style="display:flex;flex-direction:column;gap:8px">
+      <strong style="font-size:var(--spectrum-font-size-100, 14px);color:var(--danger,#e34850)"
+        >${title} failed</strong
+      >
+      <pre
+        style="font-size:var(--spectrum-font-size-50, 11px);white-space:pre-wrap;overflow:auto;max-height:240px;margin:0;color:var(--fg-dim,#aaa)"
+      >
+${message}</pre
+      >
+    </div>
+    <div style="display:flex;justify-content:flex-end">
+      <sp-button size="s" @click=${onClose}>Close</sp-button>
+    </div>
+  `);
+}
+function showProgressModal(opts) {
+  const modal = openModal(runningView(opts.title, opts.status ?? ""));
+  let closed = false;
+  const close = () => {
+    if (closed) {
+      return;
+    }
+    closed = true;
+    modal.close();
+  };
+  return {
+    done: close,
+    fail(message) {
+      if (!closed) {
+        modal.update(errorView(opts.title, message || "Unknown error", close));
+      }
+    },
+    setStatus(text2) {
+      if (!closed) {
+        modal.update(runningView(opts.title, text2));
+      }
+    }
+  };
+}
+var init_progress_modal = __esm(() => {
+  init_lit_html();
+  init_layers();
+});
+
+// src/packages/ensure-deps.ts
+async function ensureDependenciesInstalled() {
+  const platform3 = getPlatform();
+  if (!platform3.dependenciesNeedInstall || !platform3.installDependencies) {
+    return;
+  }
+  let needs = false;
+  try {
+    needs = await platform3.dependenciesNeedInstall();
+  } catch {
+    return;
+  }
+  if (!needs) {
+    return;
+  }
+  const progress = showProgressModal({
+    status: "Running bun install…",
+    title: "Installing dependencies"
+  });
+  try {
+    const result = await platform3.installDependencies();
+    if (result.ok) {
+      progress.done();
+    } else {
+      progress.fail(result.log ?? "bun install failed");
+    }
+  } catch (error) {
+    progress.fail(error instanceof Error ? error.message : String(error));
+  }
+}
+var init_ensure_deps = __esm(() => {
+  init_platform3();
+  init_progress_modal();
+});
+
+// src/version.ts
+var APP_NAME = "Jx Studio", VERSION = "0.31.1", BUILD_DATE = "2026-06-24T17:37:59.421Z", GIT_COMMIT = "54f99a1", LINKS;
+var init_version = __esm(() => {
+  LINKS = {
+    github: "https://github.com/jxsuite/jx",
+    docs: "https://github.com/jxsuite/jx#readme",
+    license: "https://github.com/jxsuite/jx/blob/main/LICENSE"
+  };
+});
+
+// src/packages/semver.ts
+function stripRange(range2) {
+  const base2 = range2.replace(/^[\^~>=<v\s]+/, "").trim();
+  return base2.split(/\s+/)[0] ?? "";
+}
+function isComparable(spec) {
+  if (spec.includes(":")) {
+    return false;
+  }
+  return /^\d+\.\d+/.test(stripRange(spec));
+}
+function parts(version) {
+  const core = stripRange(version).split(/[-+]/)[0] ?? "";
+  const [major = 0, minor = 0, patch2 = 0] = core.split(".").map((n2) => Math.trunc(Number(n2)) || 0);
+  return [major, minor, patch2];
+}
+function compareSemver(a, b) {
+  const pa = parts(a);
+  const pb = parts(b);
+  for (let i2 = 0;i2 < 3; i2++) {
+    const da = pa[i2] ?? 0;
+    const db = pb[i2] ?? 0;
+    if (da !== db) {
+      return da < db ? -1 : 1;
+    }
+  }
+  return 0;
+}
+function isUpgrade(current, latest) {
+  if (!isComparable(current) || !isComparable(latest)) {
+    return false;
+  }
+  return compareSemver(latest, current) > 0;
+}
+
+// src/packages/jxsuite-update.ts
+async function checkJxsuiteUpdate() {
+  const target = VERSION;
+  if (!isComparable(target)) {
+    return null;
+  }
+  const platform3 = getPlatform();
+  let pkgs;
+  try {
+    pkgs = await platform3.listPackages();
+  } catch {
+    return null;
+  }
+  const outdated = [];
+  for (const p of pkgs) {
+    if (!p.name.startsWith(JXSUITE_PREFIX) || !isComparable(p.version)) {
+      continue;
+    }
+    if (isUpgrade(p.version, target)) {
+      outdated.push({ current: p.version, dev: Boolean(p.dev), name: p.name });
+    }
+  }
+  return outdated.length > 0 ? { outdated, target } : null;
+}
+function dismissKey(root, target) {
+  return `jx:jxsuite-update-dismissed:${root}:${target}`;
+}
+function isDismissed(root, target) {
+  try {
+    return localStorage.getItem(dismissKey(root, target)) === "1";
+  } catch {
+    return false;
+  }
+}
+function setDismissed(root, target) {
+  try {
+    localStorage.setItem(dismissKey(root, target), "1");
+  } catch {}
+}
+async function applyJxsuiteUpdate(outdated, target) {
+  const platform3 = getPlatform();
+  if (!platform3.setPackageVersions) {
+    return;
+  }
+  const progress = showProgressModal({
+    status: "Updating @jxsuite packages…",
+    title: "Updating dependencies"
+  });
+  try {
+    const result = await platform3.setPackageVersions(outdated.map((p) => ({ dev: p.dev, name: p.name, version: `^${target}` })));
+    if (result.ok) {
+      progress.done();
+      statusMessage(`Updated ${outdated.length} @jxsuite package(s) to ${target}`);
+    } else {
+      progress.fail(result.log ?? "Update failed");
+    }
+  } catch (error) {
+    progress.fail(error instanceof Error ? error.message : String(error));
+  }
+}
+async function maybePromptJxsuiteUpdate(projectRoot) {
+  const platform3 = getPlatform();
+  if (!platform3.setPackageVersions) {
+    return;
+  }
+  const check = await checkJxsuiteUpdate();
+  if (!check || isDismissed(projectRoot, check.target)) {
+    return;
+  }
+  const list2 = check.outdated.map((p) => `${p.name} ${p.current} → ^${check.target}`).join(`
+`);
+  const confirmed = await showConfirmDialog("Update @jxsuite packages?", html3`This project uses older @jxsuite packages. Update them to match Studio ${check.target}?
+      <br /><br /><span
+        style="font-size:var(--spectrum-font-size-75, 12px);color:var(--fg-dim);white-space:pre-line"
+        >${list2}</span
+      >`, { cancelLabel: "Not now", confirmLabel: "Update" });
+  if (!confirmed) {
+    setDismissed(projectRoot, check.target);
+    return;
+  }
+  await applyJxsuiteUpdate(check.outdated, check.target);
+}
+var JXSUITE_PREFIX = "@jxsuite/";
+var init_jxsuite_update = __esm(() => {
+  init_lit_html();
+  init_platform3();
+  init_version();
+  init_layers();
+  init_progress_modal();
+  init_statusbar();
+});
+
 // src/files/fs-events.ts
 function markLocalMutation(...paths) {
   const expiry = Date.now() + RECENT_MS;
@@ -218605,9 +218859,11 @@ async function loadProject() {
       selectedPath: null
     });
     if (info.isSiteProject) {
+      await ensureDependenciesInstalled();
       await loadDirectory(".");
       await loadComponentRegistry();
       await openHomePage();
+      maybePromptJxsuiteUpdate(meta.root);
     }
   } catch {}
 }
@@ -218639,6 +218895,7 @@ async function openProject({
       searchQuery: "",
       selectedPath: null
     });
+    await ensureDependenciesInstalled();
     await loadDirectory(".");
     await loadComponentRegistry();
     const conventionalDirs = new Set([
@@ -218666,6 +218923,7 @@ async function openProject({
     renderLeftPanel();
     statusMessage(`Opened project: ${requireProjectState().name}`);
     await openHomePage();
+    maybePromptJxsuiteUpdate(requireProjectState().projectRoot);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
   }
@@ -219314,12 +219572,6 @@ async function openFileInTab(path) {
     });
     requireProjectState().selectedPath = path;
     trackRecentFile({ name: path.split("/").pop() || path, path });
-    if (path === "project.json") {
-      const tab = activeTab.value;
-      if (tab) {
-        tab.session.ui.canvasMode = "stylebook";
-      }
-    }
     statusMessage(`Opened ${path.split("/").pop()}`);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
@@ -219367,6 +219619,8 @@ var init_files2 = __esm(() => {
   init_platform3();
   init_statusbar();
   init_components();
+  init_ensure_deps();
+  init_jxsuite_update();
   init_fs_events();
   init_adapter();
   init_combine();
@@ -229543,14 +229797,16 @@ function renderGeneralSettings(container) {
           ${currentFavicon ? html3`<img
                 src=${currentFavicon}
                 alt="Current favicon"
-                style="width:32px;height:32px;object-fit:contain;border:1px solid var(--border);border-radius:4px;padding:2px"
+                style="width:32px;height:32px;object-fit:contain;border:1px solid var(--border);border-radius:var(--radius);padding:2px"
               />` : html3`<div
-                style="width:32px;height:32px;border:1px dashed var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:11px"
+                style="width:32px;height:32px;border:1px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:var(--spectrum-font-size-50, 11px)"
               >
                 —
               </div>`}
           <sp-action-button size="s" @click=${onFaviconUpload}> Upload Favicon </sp-action-button>
-          ${currentFavicon ? html3`<span style="font-size:11px;color:var(--fg-dim)">${currentFavicon}</span>` : nothing}
+          ${currentFavicon ? html3`<span style="font-size:var(--spectrum-font-size-50, 11px);color:var(--fg-dim)"
+                >${currentFavicon}</span
+              >` : nothing}
         </div>
       </div>
 
@@ -229631,6 +229887,219 @@ var init_general_settings = __esm(() => {
   init_files2();
 });
 
+// src/settings/dependencies-editor.ts
+function latestFor(p2) {
+  if (p2.name.startsWith(JXSUITE_PREFIX2) && isComparable(VERSION) && isUpgrade(p2.version, VERSION)) {
+    return VERSION;
+  }
+  const registry = _latest.get(p2.name);
+  return registry && isUpgrade(p2.version, registry) ? registry : null;
+}
+async function load() {
+  const platform4 = getPlatform();
+  try {
+    _packages = await platform4.listPackages();
+  } catch {
+    _packages = [];
+  }
+  _latest = new Map;
+  if (platform4.outdatedPackages) {
+    try {
+      for (const o19 of await platform4.outdatedPackages()) {
+        _latest.set(o19.name, o19.latest);
+      }
+    } catch {}
+  }
+  render5();
+}
+async function withBusy(fn) {
+  if (_busy) {
+    return;
+  }
+  _busy = true;
+  render5();
+  const progress = showProgressModal({ status: "Running bun…", title: "Updating dependencies" });
+  try {
+    await fn();
+    progress.done();
+  } catch (error) {
+    progress.fail(error instanceof Error ? error.message : String(error));
+  } finally {
+    _busy = false;
+    await load();
+  }
+}
+async function onAdd() {
+  const name = _addName.trim();
+  if (!name) {
+    return;
+  }
+  await withBusy(async () => {
+    await getPlatform().addPackage(name);
+    _addName = "";
+    statusMessage(`Added ${name}`);
+  });
+}
+async function onRemove(p2) {
+  await withBusy(async () => {
+    await getPlatform().removePackage(p2.name);
+    statusMessage(`Removed ${p2.name}`);
+  });
+}
+async function onUpdate(p2, latest) {
+  const platform4 = getPlatform();
+  if (!platform4.setPackageVersions) {
+    return;
+  }
+  await withBusy(async () => {
+    const target = stripRange(latest);
+    const res = await platform4.setPackageVersions([
+      { dev: Boolean(p2.dev), name: p2.name, version: `^${target}` }
+    ]);
+    if (!res.ok) {
+      throw new Error(res.log ?? "Update failed");
+    }
+    statusMessage(`Updated ${p2.name} to ${target}`);
+  });
+}
+async function onUpdateAll() {
+  const platform4 = getPlatform();
+  if (!platform4.setPackageVersions) {
+    return;
+  }
+  const updates = (_packages ?? []).map((p2) => {
+    const latest = latestFor(p2);
+    return latest ? { dev: Boolean(p2.dev), name: p2.name, version: `^${stripRange(latest)}` } : null;
+  }).filter((u) => u !== null);
+  if (updates.length === 0) {
+    return;
+  }
+  await withBusy(async () => {
+    const res = await platform4.setPackageVersions(updates);
+    if (!res.ok) {
+      throw new Error(res.log ?? "Update failed");
+    }
+    statusMessage(`Updated ${updates.length} package(s)`);
+  });
+}
+async function onReinstall() {
+  const platform4 = getPlatform();
+  if (!platform4.installDependencies) {
+    return;
+  }
+  await withBusy(async () => {
+    const res = await platform4.installDependencies();
+    if (!res.ok) {
+      throw new Error(res.log ?? "Install failed");
+    }
+    statusMessage("Dependencies reinstalled");
+  });
+}
+function row(p2) {
+  const latest = latestFor(p2);
+  return html3`
+    <sp-table-row>
+      <sp-table-cell>
+        ${p2.name}${p2.dev ? html3`<span style="color:var(--fg-dim);font-size:10px"> · dev</span>` : ""}
+      </sp-table-cell>
+      <sp-table-cell>${p2.version}</sp-table-cell>
+      <sp-table-cell>${latest ?? "—"}</sp-table-cell>
+      <sp-table-cell>
+        ${latest ? html3`<sp-action-button
+              size="s"
+              quiet
+              ?disabled=${_busy}
+              title="Update to ${latest}"
+              @click=${() => onUpdate(p2, latest)}
+            >
+              <sp-icon-refresh slot="icon"></sp-icon-refresh>
+            </sp-action-button>` : ""}
+        <sp-action-button
+          size="s"
+          quiet
+          ?disabled=${_busy}
+          title="Remove"
+          @click=${() => onRemove(p2)}
+        >
+          <sp-icon-delete slot="icon"></sp-icon-delete>
+        </sp-action-button>
+      </sp-table-cell>
+    </sp-table-row>
+  `;
+}
+function render5() {
+  if (!_container) {
+    return;
+  }
+  const pkgs = _packages ?? [];
+  const hasUpdates = pkgs.some((p2) => latestFor(p2) !== null);
+  const tpl = html3`
+    <div class="settings-section">
+      <h3 class="settings-section-title">Dependencies</h3>
+      <p class="settings-field-desc">Manage this project's npm dependencies.</p>
+
+      <div style="display:flex;gap:8px;margin-bottom:12px;align-items:center">
+        <sp-textfield
+          size="s"
+          placeholder="package-name"
+          .value=${_addName}
+          ?disabled=${_busy}
+          @input=${(e20) => {
+    _addName = e20.target.value;
+  }}
+        ></sp-textfield>
+        <sp-action-button size="s" ?disabled=${_busy} @click=${onAdd}>
+          <sp-icon-add slot="icon"></sp-icon-add>
+          Add
+        </sp-action-button>
+        <span style="flex:1"></span>
+        ${hasUpdates ? html3`<sp-action-button size="s" ?disabled=${_busy} @click=${onUpdateAll}>
+              Update all
+            </sp-action-button>` : ""}
+        <sp-action-button
+          size="s"
+          quiet
+          ?disabled=${_busy}
+          title="Reinstall (bun install)"
+          @click=${onReinstall}
+        >
+          <sp-icon-refresh slot="icon"></sp-icon-refresh>
+          Reinstall
+        </sp-action-button>
+      </div>
+
+      ${_packages === null ? html3`<p class="about-muted">Loading…</p>` : pkgs.length === 0 ? html3`<p class="about-muted">No dependencies.</p>` : html3`
+              <sp-table size="s">
+                <sp-table-head>
+                  <sp-table-head-cell>Package</sp-table-head-cell>
+                  <sp-table-head-cell>Current</sp-table-head-cell>
+                  <sp-table-head-cell>Latest</sp-table-head-cell>
+                  <sp-table-head-cell></sp-table-head-cell>
+                </sp-table-head>
+                <sp-table-body> ${pkgs.map((p2) => row(p2))} </sp-table-body>
+              </sp-table>
+            `}
+    </div>
+  `;
+  render2(tpl, _container);
+}
+function renderDependenciesEditor(container) {
+  _container = container;
+  _packages = null;
+  _addName = "";
+  render5();
+  load();
+}
+var JXSUITE_PREFIX2 = "@jxsuite/", _container = null, _packages = null, _latest, _busy = false, _addName = "";
+var init_dependencies_editor = __esm(() => {
+  init_lit_html();
+  init_platform3();
+  init_version();
+  init_statusbar();
+  init_progress_modal();
+  _latest = new Map;
+});
+
 // src/settings/settings-modal.ts
 var exports_settings_modal = {};
 __export(exports_settings_modal, {
@@ -229731,6 +230200,10 @@ function renderActiveSection() {
       renderContentTypesEditor(_contentEl);
       break;
     }
+    case "dependencies": {
+      renderDependenciesEditor(_contentEl);
+      break;
+    }
     default: {
       break;
     }
@@ -229746,13 +230219,15 @@ var init_settings_modal = __esm(() => {
   init_css_vars_editor();
   init_head_editor();
   init_general_settings();
+  init_dependencies_editor();
   init_layers();
   sections = [
     { icon: "sp-icon-properties", key: "general", label: "General" },
     { icon: "sp-icon-file-single-web-page", key: "head", label: "Head" },
     { icon: "sp-icon-brush", key: "cssVars", label: "CSS Variables" },
     { icon: "sp-icon-data", key: "definitions", label: "Definitions" },
-    { icon: "sp-icon-view-grid", key: "contentTypes", label: "Content Types" }
+    { icon: "sp-icon-view-grid", key: "contentTypes", label: "Content Types" },
+    { icon: "sp-icon-box", key: "dependencies", label: "Dependencies" }
   ];
 });
 
@@ -256208,7 +256683,7 @@ function renderCanvasNode(node, path, parent, activeBreakpoints, featureToggles)
     const keys = Object.keys(node.cases);
     const placeholder = document.createElement("div");
     placeholder.textContent = `[$switch: ${keys.join(" | ")}]`;
-    placeholder.style.cssText = "font-family:monospace;font-size:11px;padding:6px 10px;background:color-mix(in srgb, var(--danger) 8%, transparent);border:1px dashed color-mix(in srgb, var(--danger) 40%, transparent);border-radius:4px;color:var(--danger);font-style:italic";
+    placeholder.style.cssText = "font-family:var(--font-mono);font-size:var(--spectrum-font-size-50,11px);padding:6px 10px;background:color-mix(in srgb, var(--danger) 8%, transparent);border:1px dashed color-mix(in srgb, var(--danger) 40%, transparent);border-radius:var(--radius);color:var(--danger);font-style:italic";
     el.append(placeholder);
   }
   el.style.pointerEvents = "none";
@@ -257019,7 +257494,7 @@ async function renderComponentPreview(comp) {
 }
 function _componentFallback(tagName) {
   const fallback2 = document.createElement("div");
-  fallback2.style.cssText = "padding:12px;border:1px dashed var(--border);border-radius:4px;color:var(--fg-dim)";
+  fallback2.style.cssText = "padding:12px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--fg-dim)";
   fallback2.textContent = `<${tagName}>`;
   return fallback2;
 }
@@ -260793,6 +261268,39 @@ function createDevServerPlatform() {
       }
       return await res.json();
     },
+    async installDependencies() {
+      const res = await fetch("/__studio/packages/install", { method: "POST" });
+      if (!res.ok) {
+        return { log: await res.text(), ok: false };
+      }
+      return await res.json();
+    },
+    async dependenciesNeedInstall() {
+      const res = await fetch("/__studio/packages/needs-install");
+      if (!res.ok) {
+        return false;
+      }
+      const data = await res.json();
+      return Boolean(data.needsInstall);
+    },
+    async outdatedPackages() {
+      const res = await fetch("/__studio/packages/outdated");
+      if (!res.ok) {
+        return [];
+      }
+      return await res.json();
+    },
+    async setPackageVersions(updates) {
+      const res = await fetch("/__studio/packages/set-versions", {
+        body: JSON.stringify({ updates }),
+        headers: { "Content-Type": "application/json" },
+        method: "POST"
+      });
+      if (!res.ok) {
+        return { log: await res.text(), ok: false };
+      }
+      return await res.json();
+    },
     async codeService(action, payload) {
       try {
         const res = await fetch(`/__studio/code/${action}`, {
@@ -261160,6 +261668,8 @@ async function startResize(e, edge, wc) {
 init_code_services();
 init_signals_panel();
 init_components();
+init_ensure_deps();
+init_jxsuite_update();
 init_lit_html();
 // data/webdata.json
 var webdata_default = {
@@ -269670,10 +270180,10 @@ function parseFunction(str) {
   const isNumberRegex = /^-?[\d.]+$/;
   const unitValueRegex = /%|deg|g?rad|turn$/;
   const singleArgument = /\/?\s*(none|[-\w.]+(?:%|deg|g?rad|turn)?)/g;
-  let parts = str.match(isFunctionRegex);
-  if (parts) {
+  let parts2 = str.match(isFunctionRegex);
+  if (parts2) {
     let args = [];
-    parts[2].replace(singleArgument, ($0, rawArg) => {
+    parts2[2].replace(singleArgument, ($0, rawArg) => {
       let match2 = rawArg.match(unitValueRegex);
       let arg = rawArg;
       if (match2) {
@@ -269704,9 +270214,9 @@ function parseFunction(str) {
       args.push(arg);
     });
     return {
-      name: parts[1].toLowerCase(),
-      rawName: parts[1],
-      rawArgs: parts[2],
+      name: parts2[1].toLowerCase(),
+      rawName: parts2[1],
+      rawArgs: parts2[2],
       args
     };
   }
@@ -275340,8 +275850,8 @@ class NumberField extends TextfieldBase {
     const separators = this.valueBeforeFocus.split("").filter((char) => this.decimalsChars.has(char));
     const uniqueSeparators = new Set(separators);
     if (isIOS2() && this.inputElement.inputMode === "decimal" && normalizedValue !== this.valueBeforeFocus) {
-      const parts = this.numberFormatter.formatToParts(1000.1);
-      const replacementDecimal = parts.find((part) => part.type === "decimal").value;
+      const parts2 = this.numberFormatter.formatToParts(1000.1);
+      const replacementDecimal = parts2.find((part) => part.type === "decimal").value;
       for (const separator2 of uniqueSeparators) {
         const isDecimalSeparator = separator2 === replacementDecimal;
         if (!isDecimalSeparator && !this.isIntentDecimal) {
@@ -280602,6 +281112,9 @@ __decorateClass54([
   property({ type: String, attribute: "icon-label" })
 ], Toast.prototype, "iconLabel", 2);
 
+// src/ui/spectrum.ts
+init_ProgressCircle_dev();
+
 // ../../node_modules/@lit-labs/virtualizer/events.js
 class RangeChangedEvent extends Event {
   constructor(range3) {
@@ -286310,6 +286823,7 @@ var components = [
   ["sp-accordion-item", AccordionItem],
   ["sp-action-bar", ActionBar2],
   ["sp-toast", Toast],
+  ["sp-progress-circle", ProgressCircle],
   ["sp-table", Table2],
   ["sp-table-head", TableHead],
   ["sp-table-head-cell", TableHeadCell],
@@ -286347,6 +286861,7 @@ var components = [
   ["sp-icon-brush", IconBrush],
   ["sp-icon-gears", IconGears],
   ["sp-icon-settings", IconSettings],
+  ["sp-icon-info", IconInfo],
   ["sp-icon-back", IconBack],
   ["sp-icon-properties", IconProperties],
   ["sp-icon-event", IconEvent],
@@ -286601,9 +287116,9 @@ function fileIcon(name) {
   return html3`<sp-icon-document size="s"></sp-icon-document>`;
 }
 function dirPart(path) {
-  const parts = path.split("/");
-  parts.pop();
-  return parts.length > 0 ? parts.join("/") : "";
+  const parts2 = path.split("/");
+  parts2.pop();
+  return parts2.length > 0 ? parts2.join("/") : "";
 }
 function renderOverlay() {
   const container = getContainer();
@@ -286956,6 +287471,140 @@ init_reactivity();
 init_workspace2();
 init_view3();
 init_settings_modal();
+
+// src/about/about-modal.ts
+init_lit_html();
+init_layers();
+init_platform3();
+init_version();
+var _handle2 = null;
+var _packages2 = null;
+var _appInfo = null;
+function openAboutModal() {
+  if (_handle2) {
+    return;
+  }
+  _packages2 = null;
+  _appInfo = null;
+  renderModal2();
+  loadDetails();
+}
+function closeAboutModal() {
+  if (!_handle2) {
+    return;
+  }
+  _handle2.close();
+  _handle2 = null;
+  _packages2 = null;
+  _appInfo = null;
+}
+async function loadDetails() {
+  const platform4 = getPlatform();
+  try {
+    _packages2 = await platform4.listPackages();
+  } catch {
+    _packages2 = [];
+  }
+  if (platform4.getAppInfo) {
+    try {
+      _appInfo = await platform4.getAppInfo();
+    } catch {
+      _appInfo = null;
+    }
+  }
+  if (_handle2) {
+    renderModal2();
+  }
+}
+function formatBuildDate(iso) {
+  if (!iso) {
+    return "—";
+  }
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();
+}
+function metaRows() {
+  const rows = [
+    ["Version", VERSION],
+    ["Build date", formatBuildDate(BUILD_DATE)],
+    ["Commit", GIT_COMMIT]
+  ];
+  if (_appInfo) {
+    rows.push(["Channel", _appInfo.channel]);
+    if (_appInfo.updateStatus) {
+      rows.push(["Updates", _appInfo.updateStatus]);
+    }
+  }
+  return rows;
+}
+function renderPackages() {
+  if (_packages2 === null) {
+    return html3`<p class="about-muted">Loading packages…</p>`;
+  }
+  if (_packages2.length === 0) {
+    return html3`<p class="about-muted">No packages reported.</p>`;
+  }
+  return html3`
+    <ul class="about-packages">
+      ${_packages2.map((p2) => html3`
+          <li class="about-package-row">
+            <span class="about-package-name">${p2.name}</span>
+            <span class="about-package-version">${p2.version}</span>
+          </li>
+        `)}
+    </ul>
+  `;
+}
+function renderModal2() {
+  const tpl = html3`
+    <sp-underlay open @close=${closeAboutModal}></sp-underlay>
+    <div
+      class="about-modal"
+      role="dialog"
+      aria-label="About ${APP_NAME}"
+      @keydown=${(e20) => {
+    if (e20.key === "Escape") {
+      closeAboutModal();
+    }
+  }}
+    >
+      <div class="settings-modal-header">
+        <h2 class="settings-modal-title">About ${APP_NAME}</h2>
+        <sp-action-button quiet size="s" @click=${closeAboutModal} title="Close">
+          <sp-icon-close slot="icon"></sp-icon-close>
+        </sp-action-button>
+      </div>
+      <div class="about-modal-body">
+        <dl class="about-meta">
+          ${metaRows().map(([label, value]) => html3`
+              <div class="about-meta-row">
+                <dt class="about-meta-label">${label}</dt>
+                <dd class="about-meta-value">${value}</dd>
+              </div>
+            `)}
+        </dl>
+
+        <div class="about-links">
+          <a href=${LINKS.github} target="_blank" rel="noreferrer noopener">GitHub</a>
+          <a href=${LINKS.docs} target="_blank" rel="noreferrer noopener">Documentation</a>
+          <a href=${LINKS.license} target="_blank" rel="noreferrer noopener">License</a>
+        </div>
+
+        <section class="about-section">
+          <h3 class="about-section-title">Packages</h3>
+          ${renderPackages()}
+        </section>
+      </div>
+    </div>
+  `;
+  if (_handle2) {
+    _handle2.update(tpl);
+  } else {
+    _handle2 = openModal(tpl);
+  }
+}
+
+// src/panels/activity-bar.ts
 init_git_panel();
 var _scope3 = null;
 function mount4() {
@@ -287052,7 +287701,18 @@ function renderActivityBar() {
           </sp-tab>
         `)}
     </sp-tabs>
-    <div style="margin-top:auto;padding:8px 0;display:flex;justify-content:center">
+    <div
+      style="margin-top:auto;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:4px"
+    >
+      <sp-action-button
+        quiet
+        size="m"
+        title="About"
+        aria-label="About"
+        @click=${() => openAboutModal()}
+      >
+        <sp-icon-info slot="icon"></sp-icon-info>
+      </sp-action-button>
       <sp-action-button
         quiet
         size="m"
@@ -287284,7 +287944,7 @@ function getContentTypeTypes() {
     };
   });
 }
-async function handleNewEntity(typeKey, _container, ctx) {
+async function handleNewEntity(typeKey, _container2, ctx) {
   const isContentType = typeKey.startsWith("contentType:");
   const contentTypeName = isContentType ? typeKey.slice("contentType:".length) : null;
   await loadFormats();
@@ -287753,10 +288413,10 @@ function invalidateBrowseCache() {
 // src/browse/browse-modal.ts
 init_files2();
 init_layers();
-var _handle2 = null;
+var _handle3 = null;
 var _escHandler = null;
 function openBrowseModal() {
-  if (_handle2) {
+  if (_handle3) {
     return;
   }
   _escHandler = (e20) => {
@@ -287791,18 +288451,18 @@ function openBrowseModal() {
       ></div>
     </div>
   `;
-  _handle2 = openModal(tpl);
+  _handle3 = openModal(tpl);
 }
 function closeBrowseModal() {
-  if (!_handle2) {
+  if (!_handle3) {
     return;
   }
   if (_escHandler) {
     document.removeEventListener("keydown", _escHandler, true);
     _escHandler = null;
   }
-  _handle2.close();
-  _handle2 = null;
+  _handle3.close();
+  _handle3 = null;
 }
 
 // src/new-project/new-project-modal.ts
@@ -287810,7 +288470,7 @@ init_lit_html();
 init_parse();
 init_layers();
 init_platform3();
-var _handle3 = null;
+var _handle4 = null;
 var _form = {
   adapter: "static",
   description: "",
@@ -287822,7 +288482,7 @@ var _error = "";
 var _creating = false;
 var _resolve = null;
 function openNewProjectModal() {
-  if (_handle3) {
+  if (_handle4) {
     return Promise.resolve(null);
   }
   _form = {
@@ -287836,21 +288496,21 @@ function openNewProjectModal() {
   _creating = false;
   return new Promise((resolve4) => {
     _resolve = resolve4;
-    renderModal2();
+    renderModal3();
   });
 }
 function closeNewProjectModal() {
-  if (!_handle3) {
+  if (!_handle4) {
     return;
   }
-  _handle3.close();
-  _handle3 = null;
+  _handle4.close();
+  _handle4 = null;
   if (_resolve) {
     _resolve(null);
     _resolve = null;
   }
 }
-function renderModal2() {
+function renderModal3() {
   const onInput2 = (field) => (e20) => {
     _form[field] = e20.target.value;
     if (field === "name" && !_form.directory) {
@@ -287862,16 +288522,16 @@ function renderModal2() {
     if (field === "directory") {
       _dirDerived = false;
     }
-    renderModal2();
+    renderModal3();
   };
   const onAdapterChange = (e20) => {
     _form.adapter = e20.target.value;
-    renderModal2();
+    renderModal3();
   };
   const onSubmit = async () => {
     if (!_form.name.trim()) {
       _error = "Project name is required";
-      renderModal2();
+      renderModal3();
       return;
     }
     if (!_form.directory.trim()) {
@@ -287879,14 +288539,14 @@ function renderModal2() {
     }
     _creating = true;
     _error = "";
-    renderModal2();
+    renderModal3();
     try {
       const platform4 = getPlatform();
       const result = await platform4.createProject(_form);
       _creating = false;
-      if (_handle3) {
-        _handle3.close();
-        _handle3 = null;
+      if (_handle4) {
+        _handle4.close();
+        _handle4 = null;
       }
       if (_resolve) {
         _resolve(result);
@@ -287895,7 +288555,7 @@ function renderModal2() {
     } catch (error) {
       _creating = false;
       _error = errorMessage(error);
-      renderModal2();
+      renderModal3();
     }
   };
   const tpl = html3`
@@ -287975,10 +288635,10 @@ function renderModal2() {
       </div>
     </div>
   `;
-  if (!_handle3) {
-    _handle3 = openModal(tpl);
+  if (!_handle4) {
+    _handle4 = openModal(tpl);
   } else {
-    _handle3.update(tpl);
+    _handle4.update(tpl);
   }
 }
 var _dirDerived = true;
@@ -288033,11 +288693,11 @@ function mount5(rootEl, ctx) {
         tab.history.index;
         tab.history.snapshots.length;
       }
-      render5();
+      render6();
     });
   });
 }
-function render5() {
+function render6() {
   if (!_rootEl || !_ctx12) {
     return;
   }
@@ -288146,7 +288806,7 @@ function minimalToolbarTemplate(ctx) {
       @click=${() => {
     view.rightPanelCollapsed = !view.rightPanelCollapsed;
     applyPanelCollapse();
-    render5();
+    render6();
   }}
     >
       ${view.rightPanelCollapsed ? html3`<sp-icon-rail-right-open slot="icon"></sp-icon-rail-right-open>` : html3`<sp-icon-rail-right-close slot="icon"></sp-icon-rail-right-close>`}
@@ -288349,7 +289009,7 @@ function toolbarTemplate() {
       @click=${() => {
     view.rightPanelCollapsed = !view.rightPanelCollapsed;
     applyPanelCollapse();
-    render5();
+    render6();
   }}
     >
       ${view.rightPanelCollapsed ? html3`<sp-icon-rail-right-open slot="icon"></sp-icon-rail-right-open>` : html3`<sp-icon-rail-right-close slot="icon"></sp-icon-rail-right-close>`}
@@ -288381,7 +289041,7 @@ function isTextInput(el) {
   return false;
 }
 function createPanelScheduler(opts) {
-  const { root: root2, render: render6, blockWhile } = opts;
+  const { root: root2, render: render7, blockWhile } = opts;
   let editing = false;
   let scheduled = false;
   let pending = false;
@@ -288401,7 +289061,7 @@ function createPanelScheduler(opts) {
     pending = false;
     rendering = true;
     try {
-      render6();
+      render7();
     } finally {
       rendering = false;
     }
@@ -290283,20 +290943,20 @@ function expandShorthand(shortVal, count) {
   if (!shortVal) {
     return Array.from({ length: count }, () => "");
   }
-  const parts = shortVal.trim().split(/\s+/);
-  if (count !== 4 || parts.length === 0) {
+  const parts2 = shortVal.trim().split(/\s+/);
+  if (count !== 4 || parts2.length === 0) {
     return Array.from({ length: count }, () => "");
   }
-  if (parts.length === 1) {
-    return [parts[0], parts[0], parts[0], parts[0]];
+  if (parts2.length === 1) {
+    return [parts2[0], parts2[0], parts2[0], parts2[0]];
   }
-  if (parts.length === 2) {
-    return [parts[0], parts[1], parts[0], parts[1]];
+  if (parts2.length === 2) {
+    return [parts2[0], parts2[1], parts2[0], parts2[1]];
   }
-  if (parts.length === 3) {
-    return [parts[0], parts[1], parts[2], parts[1]];
+  if (parts2.length === 3) {
+    return [parts2[0], parts2[1], parts2[2], parts2[1]];
   }
-  return [parts[0], parts[1], parts[2], parts[3]];
+  return [parts2[0], parts2[1], parts2[2], parts2[3]];
 }
 function compressShorthand(vals) {
   const [t15, r8, b2, l] = vals;
@@ -291346,7 +292006,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
               ${nestedRules.map((rule) => html3`
                   <div style="display:flex;align-items:center;gap:4px">
                     <button
-                      style="flex:1;text-align:left;padding:6px 10px;background:var(--spectrum-gray-200, #1a1a1a);border:none;border-radius:4px;color:var(--spectrum-gray-900, #fafafa);font-size:12px;cursor:pointer"
+                      style="flex:1;text-align:left;padding:6px 10px;background:var(--spectrum-gray-200, #1a1a1a);border:none;border-radius:var(--radius);color:var(--spectrum-gray-900, #fafafa);font-size:var(--spectrum-font-size-75, 12px);cursor:pointer"
                       @click=${() => {
     const newSelector = activeSelector ? `${activeSelector} ${rule}` : rule;
     selectStylebookTag(newSelector, undefined, {
@@ -291362,7 +292022,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
                   </div>
                 `)}
               <button
-                style="padding:6px 10px;background:none;border:1px dashed var(--spectrum-gray-400, #333);border-radius:4px;color:var(--spectrum-gray-700, #a1a1aa);font-size:12px;cursor:pointer"
+                style="padding:6px 10px;background:none;border:1px dashed var(--spectrum-gray-400, #333);border-radius:var(--radius);color:var(--spectrum-gray-700, #a1a1aa);font-size:var(--spectrum-font-size-75, 12px);cursor:pointer"
                 @click=${() => {
     const name = prompt("Selector name (e.g. th, :hover, .active):");
     if (name && name.trim()) {
@@ -291949,7 +292609,7 @@ function renderSwitchFieldsTemplate(node, path, mapSignals) {
   return html3`
     ${bindableFieldRow("Expression", "text", node.$switch, (v) => transactDoc(activeTab.value, (t15) => mutateUpdateProperty(t15, path, "$switch", v)), null, mapSignals)}
     <div
-      style="font-size:11px;font-weight:600;color:var(--fg-dim);margin:8px 0 4px;text-transform:uppercase;letter-spacing:0.05em"
+      style="font-size:var(--spectrum-font-size-50, 11px);font-weight:600;color:var(--fg-dim);margin:8px 0 4px;text-transform:uppercase;letter-spacing:0.05em"
     >
       Cases
     </div>
@@ -291981,7 +292641,7 @@ function renderSwitchFieldsTemplate(node, path, mapSignals) {
             >→</span
           >
           <span
-            style="cursor:pointer;color:var(--danger);font-size:11px"
+            style="cursor:pointer;color:var(--danger);font-size:var(--spectrum-font-size-50, 11px)"
             @click=${(e20) => {
       e20.stopPropagation();
       transactDoc(activeTab.value, (t15) => mutateRemoveSwitchCase(t15, path, caseName));
@@ -292194,7 +292854,7 @@ function renderMediaFieldsTemplate(node) {
   }}
                 />
                 <span
-                  style="font-size:10px;color:var(--fg-dim);font-family:'SF Mono','Fira Code',monospace;white-space:nowrap"
+                  style="font-size:10px;color:var(--fg-dim);font-family:var(--font-mono);white-space:nowrap"
                   >${view.addBreakpointPreview}</span
                 >
               </div>
@@ -292245,7 +292905,7 @@ function mediaBreakpointRowTemplate(name, query3) {
         <input
           class="field-input"
           .value=${live(mediaDisplayName(name))}
-          style="flex:1;font-weight:600;font-size:12px"
+          style="flex:1;font-weight:600;font-size:var(--spectrum-font-size-75, 12px)"
           @input=${(e20) => {
     const newKey = friendlyNameToMedia(e20.target.value);
     currentRawLabel = newKey || "";
@@ -292267,7 +292927,7 @@ function mediaBreakpointRowTemplate(name, query3) {
         />
         <span
           class="bp-raw-label"
-          style="font-size:10px;color:var(--fg-dim);font-family:'SF Mono','Fira Code',monospace;white-space:nowrap"
+          style="font-size:10px;color:var(--fg-dim);font-family:var(--font-mono);white-space:nowrap"
           >${name}</span
         >
         <span
@@ -292383,13 +293043,17 @@ function renderLayoutSelectionPanel(ctx) {
                 style="font-size:9px;padding:2px 6px;background:var(--spectrum-purple-600);color:white;border-radius:3px;text-transform:uppercase;letter-spacing:0.5px"
                 >Layout</span
               >
-              <code style="font-size:12px;font-family:monospace">&lt;${tagName}&gt;</code>
+              <code
+                style="font-size:var(--spectrum-font-size-75, 12px);font-family:var(--font-mono)"
+                >&lt;${tagName}&gt;</code
+              >
             </div>
             ${className2 ? html3`<div class="style-row">
                   <div class="style-row-label">
                     <sp-field-label size="s">Class</sp-field-label>
                   </div>
-                  <span style="font-size:11px;color:var(--fg-dim);word-break:break-all"
+                  <span
+                    style="font-size:var(--spectrum-font-size-50, 11px);color:var(--fg-dim);word-break:break-all"
                     >${className2}</span
                   >
                 </div>` : nothing}
@@ -292623,9 +293287,9 @@ function renderPropertiesPanelTemplate(ctx) {
       const def3 = d3;
       return html3`
                         <div
-                          style="display:flex;gap:6px;align-items:center;padding:2px 0;font-size:11px"
+                          style="display:flex;gap:6px;align-items:center;padding:2px 0;font-size:var(--spectrum-font-size-50, 11px)"
                         >
-                          <code style="font-family:monospace;color:var(--accent)"
+                          <code style="font-family:var(--font-mono);color:var(--accent)"
                             >${def3.attribute}</code
                           >
                           <span style="color:var(--fg-dim)"> → </span>
@@ -292634,7 +293298,7 @@ function renderPropertiesPanelTemplate(ctx) {
                                 >${def3.type}</span
                               >` : nothing}
                           ${def3.reflects ? html3`<span
-                                style="font-size:9px;background:var(--bg-hover);padding:1px 4px;border-radius:3px"
+                                style="font-size:9px;background:var(--hover-bg);padding:1px 4px;border-radius:var(--radius)"
                                 >reflects</span
                               >` : nothing}
                         </div>
@@ -292703,9 +293367,9 @@ function renderPropertiesPanelTemplate(ctx) {
               <div class="style-section-body">
                 ${cssProps.map(([prop, val]) => html3`
                     <div
-                      style="display:flex;gap:6px;align-items:center;padding:2px 0;font-size:11px"
+                      style="display:flex;gap:6px;align-items:center;padding:2px 0;font-size:var(--spectrum-font-size-50, 11px)"
                     >
-                      <code style="font-family:monospace;color:var(--accent)">${prop}</code>
+                      <code style="font-family:var(--font-mono);color:var(--accent)">${prop}</code>
                       <span style="margin-left:auto;color:var(--fg-dim)">${String(val)}</span>
                     </div>
                   `)}
@@ -292714,8 +293378,8 @@ function renderPropertiesPanelTemplate(ctx) {
           `;
   })() : nothing;
   const cssPartsT = isCustomElementDoc({ document: tab.doc.document }) && isRoot ? (() => {
-    const parts = collectCssParts(tab.doc.document);
-    if (parts.length === 0) {
+    const parts2 = collectCssParts(tab.doc.document);
+    if (parts2.length === 0) {
       return nothing;
     }
     return html3`
@@ -292725,11 +293389,13 @@ function renderPropertiesPanelTemplate(ctx) {
               @sp-accordion-item-toggle=${() => toggleSection("__cssparts")}
             >
               <div class="style-section-body">
-                ${parts.map((p2) => html3`
+                ${parts2.map((p2) => html3`
                     <div
-                      style="display:flex;gap:6px;align-items:center;padding:2px 0;font-size:11px"
+                      style="display:flex;gap:6px;align-items:center;padding:2px 0;font-size:var(--spectrum-font-size-50, 11px)"
                     >
-                      <code style="font-family:monospace;color:var(--accent)">${p2.name}</code>
+                      <code style="font-family:var(--font-mono);color:var(--accent)"
+                        >${p2.name}</code
+                      >
                       <span style="color:var(--fg-dim)">&lt;${p2.tag}&gt;</span>
                     </div>
                   `)}
@@ -293469,9 +294135,9 @@ function mountAiPanel() {
 }
 var _g = globalThis;
 function rerenderPanel() {
-  const { render: render6 } = _g.__jxRightPanelRender || {};
-  if (render6) {
-    render6();
+  const { render: render7 } = _g.__jxRightPanelRender || {};
+  if (render7) {
+    render7();
   }
   requestAnimationFrame(() => mountQuikChat());
 }
@@ -293757,7 +294423,9 @@ function renderAiPanelTemplate() {
         <div class="ai-status-center">
           <sp-icon-artboard style="font-size:32px"></sp-icon-artboard>
           <div>Claude authentication required</div>
-          <div style="font-size:11px;color:var(--spectrum-global-color-gray-600)">
+          <div
+            style="font-size:var(--spectrum-font-size-50, 11px);color:var(--spectrum-gray-600, #808080)"
+          >
             Run the following in your terminal:
           </div>
           <code class="ai-code-snippet">npx @anthropic-ai/claude-code login</code>
@@ -293793,7 +294461,7 @@ var _scheduler = null;
 function mount6(ctx) {
   _ctx13 = ctx;
   mountAiPanel();
-  registerRightPanelRender(render6);
+  registerRightPanelRender(render7);
   _scheduler = createPanelScheduler({
     blockWhile: isColorPopoverOpen,
     render: _doRender,
@@ -293817,11 +294485,11 @@ function mount6(ctx) {
       tab.session.ui.styleFilter;
       tab.session.ui.styleFilterActive;
       tab.session.ui.inspectorSections;
-      render6();
+      render7();
     });
   });
 }
-function render6() {
+function render7() {
   _scheduler?.schedule();
 }
 var _propsContainer = null;
@@ -293875,7 +294543,7 @@ function _doRender() {
       const sel = e21.target.selected;
       if (sel && sel !== tab) {
         updateUi("rightTab", sel);
-        render6();
+        render7();
       }
     }}
         >
@@ -294010,18 +294678,18 @@ function renderStylebookLayersTemplate(ctx) {
   const style2 = rootStyle;
   const vars = Object.entries(style2).filter(([k2]) => k2.startsWith("--"));
   if (vars.length === 0) {
-    return html3`<div style="padding:16px;text-align:center;color:var(--fg-dim);font-size:12px">
+    return html3`<div
+      style="padding:16px;text-align:center;color:var(--fg-dim);font-size:var(--spectrum-font-size-75, 12px)"
+    >
       No variables defined
     </div>`;
   }
   return html3`${vars.map(([k2, v2]) => html3`
       <div class="layer-row">
-        <span class="layer-tag" style="font-size:10px;font-family:'SF Mono','Fira Code',monospace"
-          >var</span
-        >
+        <span class="layer-tag" style="font-size:10px;font-family:var(--font-mono)">var</span>
         <span class="layer-label">${k2}</span>
         <span
-          style="font-size:11px;color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px"
+          style="font-size:var(--spectrum-font-size-50, 11px);color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px"
           >${String(v2)}</span
         >
       </div>
@@ -294123,7 +294791,8 @@ function renderElementsTemplate(ctx) {
   }}
                   >
                     <div class="element-card-preview">
-                      <span style="color:var(--fg-dim);font-size:11px;font-style:italic"
+                      <span
+                        style="color:var(--fg-dim);font-size:var(--spectrum-font-size-50, 11px);font-style:italic"
                         >&lt;${comp.tagName}&gt;</span
                       >
                     </div>
@@ -294170,11 +294839,11 @@ function mount7(ctx) {
         tab.session.ui.gitLoading;
         tab.session.ui.gitError;
       }
-      render7();
+      render8();
     });
   });
 }
-function render7() {
+function render8() {
   _scheduler2?.schedule();
 }
 function _doRender2() {
@@ -294218,7 +294887,7 @@ function _render() {
     if (tree) {
       ctx.setupTreeKeyboard(tree);
     }
-    ctx.registerFileTreeDnD({ renderLeftPanel: render7 });
+    ctx.registerFileTreeDnD({ renderLeftPanel: render8 });
     return;
   }
   if (tab === "git") {
@@ -294230,7 +294899,7 @@ function _render() {
   if (tab === "blocks") {
     const content2 = renderElementsTemplate({
       defaultDef: ctx.defaultDef,
-      rerender: render7,
+      rerender: render8,
       webdata: ctx.webdata
     });
     render2(html3`<div class="panel-body">${content2}</div>`, leftPanel);
@@ -294259,7 +294928,7 @@ function _render() {
       stylebookMeta: stylebook_meta_default
     }) : renderLayersTemplate({
       navigateToComponent: ctx.navigateToComponent,
-      rerender: render7
+      rerender: render8
     });
   } else if (tab === "imports") {
     content = ctx.renderImportsTemplate({
@@ -294268,12 +294937,12 @@ function _render() {
       },
       documentElements: S.document.$elements || [],
       documentPath: S.documentPath,
-      renderLeftPanel: render7
+      renderLeftPanel: render8
     });
   } else if (tab === "state") {
     content = ctx.renderSignalsTemplate(S, {
       renderCanvas: ctx.renderCanvas,
-      renderLeftPanel: render7,
+      renderLeftPanel: render8,
       updateSession
     });
   } else if (tab === "data") {
@@ -294281,7 +294950,7 @@ function _render() {
       defBadgeLabel: ctx.defBadgeLabel,
       defCategory: ctx.defCategory,
       renderCanvas: ctx.renderCanvas,
-      renderLeftPanel: render7
+      renderLeftPanel: render8
     });
   } else if (tab === "head") {
     const isContent = S.mode === "content";
@@ -294302,12 +294971,12 @@ function _render() {
         }
         const newHead = tmp.$head && tmp.$head.length > 0 ? tmp.$head : undefined;
         mutateUpdateFrontmatter(tabNow, "$head", newHead);
-        render7();
+        render8();
       } : (fn) => {
         transact(activeTab.value, fn);
       },
       document: headDoc,
-      renderLeftPanel: render7
+      renderLeftPanel: render8
     });
   } else {
     content = nothing;
@@ -294338,11 +295007,11 @@ function mount8(host) {
         tab.doc.dirty;
         tab.documentPath;
       }
-      render8();
+      render9();
     });
   });
 }
-function render8() {
+function render9() {
   if (!_host) {
     return;
   }
@@ -294394,8 +295063,8 @@ function tabLabel(tab) {
   if (!path) {
     return "Untitled";
   }
-  const parts = path.split("/");
-  return parts.at(-1);
+  const parts2 = path.split("/");
+  return parts2.at(-1);
 }
 async function requestClose(id) {
   const tab = workspace.tabs.get(id);
@@ -294436,11 +295105,11 @@ function mount9(host, ctx) {
         tab.session.ui.editingFunction;
         tab.session.ui.featureToggles;
       }
-      render9();
+      render10();
     });
   });
 }
-function render9() {
+function render10() {
   if (!_host2 || !_ctx15) {
     return;
   }
@@ -294839,9 +295508,9 @@ mount7({
   setupTreeKeyboard,
   webdata: webdata_default
 });
-registerRenderer("leftPanel", () => render7());
+registerRenderer("leftPanel", () => render8());
 registerRenderer("canvas", () => renderCanvas());
-registerRenderer("rightPanel", () => render6());
+registerRenderer("rightPanel", () => render7());
 registerRenderer("overlays", () => render4());
 setStatusbarRenderer(() => renderStatusbar());
 mountStatusbar();
@@ -294856,7 +295525,7 @@ canvasWrap.addEventListener("click", (e21) => {
   activeTab.value.session.selection = null;
 });
 function safeRenderRightPanel() {
-  render6();
+  render7();
 }
 registerFunctionCompletions();
 var fsUnsub = null;
@@ -294896,6 +295565,7 @@ if (_projectParam) {
             searchQuery: "",
             selectedPath: siteCtx.fileRelPath || null
           });
+          await ensureDependenciesInstalled();
           await loadComponentRegistry();
           const conventionalDirs = new Set([
             "pages",
@@ -294918,6 +295588,7 @@ if (_projectParam) {
             }
           }
           requireProjectState().projectDirs = foundDirs;
+          maybePromptJxsuiteUpdate(siteCtx.sitePath);
         }
         const _fileParam = _urlParams.get("file");
         let fileRelPath = _fileParam || siteCtx.fileRelPath || _projectParam;
@@ -294980,7 +295651,7 @@ if (_projectParam) {
   ensureFsSync();
 }
 function renderLeftPanel() {
-  render7();
+  render8();
 }
 function loadProject2() {
   return loadProject();
@@ -295021,6 +295692,7 @@ async function openRecentProject(root2) {
       searchQuery: "",
       selectedPath: null
     });
+    await ensureDependenciesInstalled();
     await loadDirectory(".");
     await loadComponentRegistry();
     const conventionalDirs = new Set([
@@ -295046,6 +295718,7 @@ async function openRecentProject(root2) {
     statusMessage(`Opened project: ${requireProjectState().name}`);
     await openHomePage();
     ensureFsSync();
+    maybePromptJxsuiteUpdate(root2);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
   }
@@ -295114,5 +295787,5 @@ effect(() => {
   }
 });
 
-//# debugId=2ADE09E3E44FD07B64756E2164756E21
+//# debugId=09F97332C94AC00E64756E2164756E21
 //# sourceMappingURL=studio.js.map