@jxsuite/studio 0.30.1 → 0.31.0

package/src/panels/signals-panel.ts

@@ -943,7 +943,7 @@ function renderFunctionFields(
         </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=${def.body || ""}
           @input=${(e: Event) => {
             const v = (e.target as HTMLInputElement).value;
@@ -981,7 +981,7 @@ function renderParameterEditorTemplate(
           ${params.map(
             (p: CemParameter, i: number) => html`
               <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
@@ -1002,7 +1002,7 @@ function renderParameterEditorTemplate(
           )}
           <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: KeyboardEvent) => {
               if (e.key === "Enter" && (e.target as HTMLInputElement).value.trim()) {
@@ -1145,7 +1145,7 @@ function renderEmitsEditorTemplate(S: SignalsPanelState, name: string, def: Sign
 
   return html`
     <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>
@@ -1474,7 +1474,7 @@ export function renderSchemaFieldsTemplate(
                     ${Object.entries(cv.properties as Record<string, Record<string, unknown>>).map(
                       ([k, v]) => html`
                         <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
                         >
                       `,
@@ -1642,7 +1642,7 @@ export function renderExternalPrototypeEditorTemplate(
     } else {
       // Trigger async load — will re-render when cached
       schemaContent = html`<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>`;
@@ -1658,7 +1658,10 @@ export function renderExternalPrototypeEditorTemplate(
 
   return html`
     ${importedPath
-      ? html`<div class="signal-hint" style="padding:4px 0 2px;font-size:11px;color:var(--fg-dim)">
+      ? html`<div
+          class="signal-hint"
+          style="padding:4px 0 2px;font-size:var(--spectrum-font-size-50, 11px);color:var(--fg-dim)"
+        >
           ${def.$prototype}
         </div>`
       : html`

package/src/panels/style-panel.ts

@@ -804,7 +804,7 @@ function styleSidebarTemplate(
                 (rule) => html`
                   <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, {
@@ -821,7 +821,7 @@ function styleSidebarTemplate(
                 `,
               )}
               <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=${() => {
                   // oxlint-disable-next-line no-alert -- native prompt is the intended quick-input UX here
                   const name = prompt("Selector name (e.g. th, :hover, .active):");

package/src/panels/stylebook-layers-panel.ts

@@ -111,19 +111,19 @@ export function renderStylebookLayersTemplate(ctx: {
   const style = rootStyle;
   const vars = Object.entries(style).filter(([k]) => k.startsWith("--"));
   if (vars.length === 0) {
-    return html`<div style="padding:16px;text-align:center;color:var(--fg-dim);font-size:12px">
+    return html`<div
+      style="padding:16px;text-align:center;color:var(--fg-dim);font-size:var(--spectrum-font-size-75, 12px)"
+    >
       No variables defined
     </div>`;
   }
   return html`${vars.map(
     ([k, v]) => html`
       <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">${k}</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(v)}</span
         >
       </div>

package/src/panels/stylebook-panel.ts

@@ -592,7 +592,7 @@ export async function renderComponentPreview(comp: ComponentEntry) {
 function _componentFallback(tagName: string) {
   const fallback = document.createElement("div");
   fallback.style.cssText =
-    "padding:12px;border:1px dashed var(--border);border-radius:4px;color:var(--fg-dim)";
+    "padding:12px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--fg-dim)";
   fallback.textContent = `<${tagName}>`;
   return fallback;
 }

package/src/platforms/devserver.ts

@@ -421,6 +421,44 @@ export 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()) as { needsInstall?: boolean };
+      return Boolean(data.needsInstall);
+    },
+
+    async outdatedPackages() {
+      const res = await fetch("/__studio/packages/outdated");
+      if (!res.ok) {
+        return [];
+      }
+      return await res.json();
+    },
+
+    /** @param {{ name: string; version: string; dev?: boolean }[]} updates */
+    async setPackageVersions(updates: { name: string; version: string; dev?: boolean }[]) {
+      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();
+    },
+
     // ─── Code services (optional) ─────────────────────────────────────────
 
     /**

package/src/settings/dependencies-editor.ts

@@ -0,0 +1,262 @@
+/// <reference lib="dom" />
+/**
+ * Dependencies settings section — an outdated-aware table of the project's npm dependencies. Shows
+ * current vs latest version, with per-row update/remove, an add-package field, "update all", and
+ * reinstall. @jxsuite/* rows target the version this Studio build embeds; other packages target the
+ * newest published version reported by the backend.
+ */
+
+import { html, render as litRender } from "lit-html";
+import { getPlatform } from "../platform";
+import { VERSION } from "../version";
+import { statusMessage } from "../panels/statusbar";
+import { showProgressModal } from "../ui/progress-modal";
+import { isComparable, isUpgrade, stripRange } from "../packages/semver";
+import type { PackageInfo } from "../types";
+
+const JXSUITE_PREFIX = "@jxsuite/";
+
+interface Update {
+  name: string;
+  version: string;
+  dev: boolean;
+}
+
+let _container: HTMLElement | null = null;
+let _packages: PackageInfo[] | null = null;
+let _latest = new Map<string, string>();
+let _busy = false;
+let _addName = "";
+
+/** The version a package can be updated to, or null if it is already current. */
+function latestFor(p: PackageInfo): string | null {
+  if (p.name.startsWith(JXSUITE_PREFIX) && isComparable(VERSION) && isUpgrade(p.version, VERSION)) {
+    return VERSION;
+  }
+  const registry = _latest.get(p.name);
+  return registry && isUpgrade(p.version, registry) ? registry : null;
+}
+
+async function load() {
+  const platform = getPlatform();
+  try {
+    _packages = await platform.listPackages();
+  } catch {
+    _packages = [];
+  }
+  _latest = new Map();
+  if (platform.outdatedPackages) {
+    try {
+      for (const o of await platform.outdatedPackages()) {
+        _latest.set(o.name, o.latest);
+      }
+    } catch {
+      /* Registry lookups are best-effort */
+    }
+  }
+  render();
+}
+
+async function withBusy(fn: () => Promise<void>) {
+  if (_busy) {
+    return;
+  }
+  _busy = true;
+  render();
+  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(p: PackageInfo) {
+  await withBusy(async () => {
+    await getPlatform().removePackage(p.name);
+    statusMessage(`Removed ${p.name}`);
+  });
+}
+
+async function onUpdate(p: PackageInfo, latest: string) {
+  const platform = getPlatform();
+  if (!platform.setPackageVersions) {
+    return;
+  }
+  await withBusy(async () => {
+    const target = stripRange(latest);
+    const res = await platform.setPackageVersions!([
+      { dev: Boolean(p.dev), name: p.name, version: `^${target}` },
+    ]);
+    if (!res.ok) {
+      throw new Error(res.log ?? "Update failed");
+    }
+    statusMessage(`Updated ${p.name} to ${target}`);
+  });
+}
+
+async function onUpdateAll() {
+  const platform = getPlatform();
+  if (!platform.setPackageVersions) {
+    return;
+  }
+  const updates = (_packages ?? [])
+    .map((p): Update | null => {
+      const latest = latestFor(p);
+      return latest
+        ? { dev: Boolean(p.dev), name: p.name, version: `^${stripRange(latest)}` }
+        : null;
+    })
+    .filter((u): u is Update => u !== null);
+  if (updates.length === 0) {
+    return;
+  }
+  await withBusy(async () => {
+    const res = await platform.setPackageVersions!(updates);
+    if (!res.ok) {
+      throw new Error(res.log ?? "Update failed");
+    }
+    statusMessage(`Updated ${updates.length} package(s)`);
+  });
+}
+
+async function onReinstall() {
+  const platform = getPlatform();
+  if (!platform.installDependencies) {
+    return;
+  }
+  await withBusy(async () => {
+    const res = await platform.installDependencies!();
+    if (!res.ok) {
+      throw new Error(res.log ?? "Install failed");
+    }
+    statusMessage("Dependencies reinstalled");
+  });
+}
+
+function row(p: PackageInfo) {
+  const latest = latestFor(p);
+  return html`
+    <sp-table-row>
+      <sp-table-cell>
+        ${p.name}${p.dev
+          ? html`<span style="color:var(--fg-dim);font-size:10px"> · dev</span>`
+          : ""}
+      </sp-table-cell>
+      <sp-table-cell>${p.version}</sp-table-cell>
+      <sp-table-cell>${latest ?? "—"}</sp-table-cell>
+      <sp-table-cell>
+        ${latest
+          ? html`<sp-action-button
+              size="s"
+              quiet
+              ?disabled=${_busy}
+              title="Update to ${latest}"
+              @click=${() => onUpdate(p, latest)}
+            >
+              <sp-icon-refresh slot="icon"></sp-icon-refresh>
+            </sp-action-button>`
+          : ""}
+        <sp-action-button
+          size="s"
+          quiet
+          ?disabled=${_busy}
+          title="Remove"
+          @click=${() => onRemove(p)}
+        >
+          <sp-icon-delete slot="icon"></sp-icon-delete>
+        </sp-action-button>
+      </sp-table-cell>
+    </sp-table-row>
+  `;
+}
+
+function render() {
+  if (!_container) {
+    return;
+  }
+  const pkgs = _packages ?? [];
+  const hasUpdates = pkgs.some((p) => latestFor(p) !== null);
+
+  const tpl = html`
+    <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=${(e: Event) => {
+            _addName = (e.target as HTMLInputElement).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
+          ? html`<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
+        ? html`<p class="about-muted">Loading…</p>`
+        : pkgs.length === 0
+          ? html`<p class="about-muted">No dependencies.</p>`
+          : html`
+              <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((p) => row(p))} </sp-table-body>
+              </sp-table>
+            `}
+    </div>
+  `;
+
+  litRender(tpl, _container);
+}
+
+/** @param {HTMLElement} container */
+export function renderDependenciesEditor(container: HTMLElement) {
+  _container = container;
+  _packages = null;
+  _addName = "";
+  render();
+  void load();
+}

package/src/settings/general-settings.ts

@@ -94,16 +94,18 @@ export function renderGeneralSettings(container: HTMLElement) {
             ? html`<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"
               />`
             : html`<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
-            ? html`<span style="font-size:11px;color:var(--fg-dim)">${currentFavicon}</span>`
+            ? html`<span style="font-size:var(--spectrum-font-size-50, 11px);color:var(--fg-dim)"
+                >${currentFavicon}</span
+              >`
             : nothing}
         </div>
       </div>

package/src/settings/settings-modal.ts

@@ -13,6 +13,7 @@ import { renderContentTypesEditor } from "./content-types-editor";
 import { renderCssVarsEditor } from "./css-vars-editor";
 import { renderHeadEditor } from "./head-editor";
 import { renderGeneralSettings } from "./general-settings";
+import { renderDependenciesEditor } from "./dependencies-editor";
 import { openModal } from "../ui/layers";
 
 let _handle: ReturnType<typeof openModal> | null = null;
@@ -27,6 +28,7 @@ const sections = [
   { 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-box", key: "dependencies", label: "Dependencies" },
 ];
 
 export function openSettingsModal() {
@@ -131,6 +133,10 @@ function renderActiveSection() {
       renderContentTypesEditor(_contentEl);
       break;
     }
+    case "dependencies": {
+      renderDependenciesEditor(_contentEl);
+      break;
+    }
     default: {
       break;
     }

package/src/studio.ts

@@ -74,6 +74,8 @@ import { mountResizeEdges } from "./resize-edges";
 import { codeService } from "./services/code-services";
 import { defBadgeLabel, defCategory, renderSignalsTemplate } from "./panels/signals-panel";
 import { loadComponentRegistry } from "./files/components";
+import { ensureDependenciesInstalled } from "./packages/ensure-deps";
+import { maybePromptJxsuiteUpdate } from "./packages/jxsuite-update";
 
 import { html, render as litRender } from "lit-html";
 
@@ -560,6 +562,7 @@ if (_projectParam) {
             selectedPath: siteCtx.fileRelPath || null,
           });
 
+          await ensureDependenciesInstalled();
           await loadComponentRegistry();
 
           // Load directory tree and populate projectDirs from conventional dirs found
@@ -584,6 +587,7 @@ if (_projectParam) {
             }
           }
           requireProjectState().projectDirs = foundDirs;
+          void maybePromptJxsuiteUpdate(siteCtx.sitePath);
         }
 
         // Read and open the file
@@ -713,6 +717,7 @@ async function openRecentProject(root: string) {
       selectedPath: null,
     });
 
+    await ensureDependenciesInstalled();
     await loadDirectory(".");
     await loadComponentRegistry();
 
@@ -741,6 +746,7 @@ async function openRecentProject(root: string) {
 
     await openHomePage();
     ensureFsSync();
+    void maybePromptJxsuiteUpdate(root);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
   }

package/src/tabs/tab.ts

@@ -90,12 +90,15 @@ export interface Tab {
   };
 }
 
-/** @returns {TabUi} */
-function createDefaultUi() {
+/**
+ * @param {string} canvasMode — initial canvas mode (the tab's first allowed mode)
+ * @returns {TabUi}
+ */
+function createDefaultUi(canvasMode: string) {
   return {
     activeMedia: null,
     activeSelector: null,
-    canvasMode: "edit",
+    canvasMode,
     editingFunction: null,
     featureToggles: {},
     gitBranches: null,
@@ -160,6 +163,9 @@ export function createTab({
   normalizeArrayChildren(document);
 
   const resolvedModes = capabilities?.modes ?? inferModes(documentPath, sourceFormat);
+  // A tab opens in its first allowed mode — never one the toolbar would disable.
+  // Formats author mode order so the default comes first (edit, stylebook, etc.).
+  const initialCanvasMode = resolvedModes[0] ?? "edit";
 
   const tab = scope.run(() => ({
     capabilities: { modes: resolvedModes },
@@ -190,7 +196,7 @@ export function createTab({
       documentStack: [],
       hover: null,
       selection: null,
-      ui: createDefaultUi(),
+      ui: createDefaultUi(initialCanvasMode),
     }),
   })) as unknown as Tab;
 

package/src/types.ts

@@ -53,6 +53,36 @@ export interface ComponentMeta {
 export interface PackageInfo {
   name: string;
   version: string;
+  /** True when the dependency lives in `devDependencies` rather than `dependencies`. */
+  dev?: boolean;
+}
+
+/** A dependency with a newer version available, as reported by `bun outdated` / the npm registry. */
+export interface OutdatedInfo {
+  name: string;
+  /** The version range pinned in package.json (e.g. "^0.19.0"). */
+  current: string;
+  /** The newest published version. */
+  latest: string;
+  /** The newest version satisfying the current range, if known. */
+  wanted?: string;
+  dev?: boolean;
+}
+
+/** Result of a package mutation that runs `bun install` (install / set-versions). */
+export interface PackageOpResult {
+  ok: boolean;
+  /** Combined stdout/stderr from the bun invocation, surfaced to the user on failure. */
+  log?: string;
+}
+
+/** Desktop app/build info surfaced in the About screen. */
+export interface AppInfo {
+  version: string;
+  channel: string;
+  hash: string;
+  /** Human-readable update status (e.g. "Up to date", "Update available"), if known. */
+  updateStatus?: string;
 }
 
 export interface CodeServiceResult {
@@ -125,6 +155,28 @@ export interface StudioPlatform {
   addPackage: (name: string) => Promise<unknown>;
   removePackage: (name: string) => Promise<unknown>;
   listPackages: () => Promise<PackageInfo[]>;
+  /**
+   * Run `bun install` in the project root. Optional: platforms without a Bun-capable backend omit
+   * it and the install-on-open / reinstall affordances are skipped.
+   */
+  installDependencies?: () => Promise<PackageOpResult>;
+  /** Whether the project has uninstalled dependencies (node_modules missing). */
+  dependenciesNeedInstall?: () => Promise<boolean>;
+  /** List dependencies that have a newer version available. */
+  outdatedPackages?: () => Promise<OutdatedInfo[]>;
+  /**
+   * Rewrite the version range of each named package (preserving its dependencies/devDependencies
+   * placement) and run `bun install`. Used by the @jxsuite bump and per-dependency updates.
+   */
+  setPackageVersions?: (
+    updates: { name: string; version: string; dev?: boolean }[],
+  ) => Promise<PackageOpResult>;
+  /**
+   * Desktop-only app/build info (release channel, commit hash, update status). Platforms without a
+   * native shell (e.g. the dev server) omit it, and the About screen hides the corresponding
+   * section.
+   */
+  getAppInfo?: () => Promise<AppInfo>;
   codeService: (action: string, payload: unknown) => Promise<CodeServiceResult | null>;
   resolveSiteContext: (filePath: string) => Promise<{
     sitePath: string | null;

package/src/ui/expression-editor.ts

@@ -332,7 +332,8 @@ function renderLiteralEditor(operand: unknown, onChange: (newVal: JxExpressionOp
                 @change=${(e: Event) => onChange((e.target as HTMLInputElement).checked)}
                 >true</sp-checkbox
               >`
-            : html`<span style="font-size:12px;color:var(--spectrum-global-color-gray-600)"
+            : html`<span
+                style="font-size:var(--spectrum-font-size-75, 12px);color:var(--spectrum-gray-600, #808080)"
                 >null</span
               >`}
     </div>
@@ -425,7 +426,7 @@ function renderSpliceArgsEditor(
             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(
@@ -496,7 +497,7 @@ export function renderExpressionEditor(
 
   const nestStyle =
     depth > 0
-      ? "border-left:2px solid var(--spectrum-global-color-gray-300);margin-left:8px;padding-left:8px;"
+      ? "border-left:2px solid var(--spectrum-gray-300, #3c3c3c);margin-left:8px;padding-left:8px;"
       : "";
 
   return html`

package/src/ui/field-input.ts

@@ -223,7 +223,7 @@ export function rawTextArea(
   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)

package/src/ui/media-picker.ts

@@ -208,7 +208,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}