@jxsuite/studio 0.30.1 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -23,19 +23,20 @@
     "provenance": true
   },
   "scripts": {
-    "build": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked && bun run scripts/build-workers.ts",
+    "build": "bun run scripts/build.ts",
     "build:metafile": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked --metafile=metafile.json",
     "gen:webdata": "bun run scripts/gen-webdata.js",
-    "test": "bun test --isolate",
+    "lint:styles": "bun run scripts/check-styles.ts",
+    "test": "bun run lint:styles && bun test --isolate",
     "test:coverage": "bun test --isolate --coverage",
     "upgrade": "bunx npm-check-updates -u && bun install"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
-    "@jxsuite/parser": "^0.30.1",
-    "@jxsuite/runtime": "^0.30.1",
-    "@jxsuite/schema": "^0.30.1",
+    "@jxsuite/parser": "^0.31.0",
+    "@jxsuite/runtime": "^0.31.0",
+    "@jxsuite/schema": "^0.31.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
@@ -61,6 +62,7 @@
     "@spectrum-web-components/picker": "^1.12.1",
     "@spectrum-web-components/picker-button": "^1.12.1",
     "@spectrum-web-components/popover": "^1.12.1",
+    "@spectrum-web-components/progress-circle": "^1.12.1",
     "@spectrum-web-components/search": "^1.12.1",
     "@spectrum-web-components/swatch": "^1.12.1",
     "@spectrum-web-components/switch": "^1.12.1",

package/src/about/about-modal.ts

@@ -0,0 +1,156 @@
+/// <reference lib="dom" />
+/**
+ * About modal — shows app version, build metadata, external links, the resolved `@jxsuite/*`
+ * package versions, and (on desktop) the release channel / update status.
+ *
+ * Build metadata comes from src/version.ts (injected at bundle time). Package versions are fetched
+ * lazily via the platform; desktop update info is shown only when the active platform implements
+ * the optional `getAppInfo` method.
+ */
+
+import { html } from "lit-html";
+import type { TemplateResult } from "lit-html";
+import { openModal } from "../ui/layers";
+import { getPlatform } from "../platform";
+import { APP_NAME, BUILD_DATE, GIT_COMMIT, LINKS, VERSION } from "../version";
+import type { AppInfo, PackageInfo } from "../types";
+
+let _handle: ReturnType<typeof openModal> | null = null;
+
+let _packages: PackageInfo[] | null = null;
+let _appInfo: AppInfo | null = null;
+
+export function openAboutModal() {
+  if (_handle) {
+    return;
+  }
+  _packages = null;
+  _appInfo = null;
+  renderModal();
+  void loadDetails();
+}
+
+export function closeAboutModal() {
+  if (!_handle) {
+    return;
+  }
+  _handle.close();
+  _handle = null;
+  _packages = null;
+  _appInfo = null;
+}
+
+async function loadDetails() {
+  const platform = getPlatform();
+  try {
+    _packages = await platform.listPackages();
+  } catch {
+    _packages = [];
+  }
+  if (platform.getAppInfo) {
+    try {
+      _appInfo = await platform.getAppInfo();
+    } catch {
+      _appInfo = null;
+    }
+  }
+  if (_handle) {
+    renderModal();
+  }
+}
+
+function formatBuildDate(iso: string) {
+  if (!iso) {
+    return "—";
+  }
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();
+}
+
+function metaRows() {
+  const rows: [string, string][] = [
+    ["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(): TemplateResult {
+  if (_packages === null) {
+    return html`<p class="about-muted">Loading packages…</p>`;
+  }
+  if (_packages.length === 0) {
+    return html`<p class="about-muted">No packages reported.</p>`;
+  }
+  return html`
+    <ul class="about-packages">
+      ${_packages.map(
+        (p) => html`
+          <li class="about-package-row">
+            <span class="about-package-name">${p.name}</span>
+            <span class="about-package-version">${p.version}</span>
+          </li>
+        `,
+      )}
+    </ul>
+  `;
+}
+
+function renderModal() {
+  const tpl = html`
+    <sp-underlay open @close=${closeAboutModal}></sp-underlay>
+    <div
+      class="about-modal"
+      role="dialog"
+      aria-label="About ${APP_NAME}"
+      @keydown=${(e: KeyboardEvent) => {
+        if (e.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]) => html`
+              <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 (_handle) {
+    _handle.update(tpl);
+  } else {
+    _handle = openModal(tpl);
+  }
+}

package/src/files/files.ts

@@ -16,6 +16,8 @@ import { createState, projectState, requireProjectState, setProjectState } from
 import { getPlatform } from "../platform";
 import { statusMessage } from "../panels/statusbar";
 import { loadComponentRegistry } from "./components";
+import { ensureDependenciesInstalled } from "../packages/ensure-deps";
+import { maybePromptJxsuiteUpdate } from "../packages/jxsuite-update";
 import { markLocalMutation } from "./fs-events";
 import {
   draggable,
@@ -23,14 +25,7 @@ import {
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import {
-  activateTab,
-  activeTab,
-  openTab,
-  renameTab,
-  replaceAllTabs,
-  workspace,
-} from "../workspace/workspace";
+import { activateTab, openTab, renameTab, replaceAllTabs, workspace } from "../workspace/workspace";
 import { parseSourceForPath, serializeDocument } from "./file-ops";
 import {
   documentExtensions,
@@ -100,9 +95,11 @@ export async function loadProject() {
     });
 
     if (info.isSiteProject) {
+      await ensureDependenciesInstalled();
       await loadDirectory(".");
       await loadComponentRegistry();
       await openHomePage();
+      void maybePromptJxsuiteUpdate(meta.root);
     }
     // If not a site project (monorepo) — show welcome prompt, don't load tree
   } catch {
@@ -156,6 +153,7 @@ export async function openProject({
       selectedPath: null,
     });
 
+    await ensureDependenciesInstalled();
     await loadDirectory(".");
     await loadComponentRegistry();
 
@@ -187,6 +185,7 @@ export async function openProject({
     statusMessage(`Opened project: ${requireProjectState().name}`);
 
     await openHomePage();
+    void maybePromptJxsuiteUpdate(requireProjectState().projectRoot);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
   }
@@ -1056,13 +1055,6 @@ export async function openFileInTab(path: string) {
     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)}`);

package/src/packages/ensure-deps.ts

@@ -0,0 +1,39 @@
+/// <reference lib="dom" />
+/**
+ * Ensure the active project's dependencies are installed before the editor loads. When the backend
+ * reports node_modules is missing, run `bun install` behind a blocking progress modal so component
+ * and format resolution see the real dependency tree. No-op on platforms without package support.
+ */
+
+import { getPlatform } from "../platform";
+import { showProgressModal } from "../ui/progress-modal";
+
+export async function ensureDependenciesInstalled(): Promise<void> {
+  const platform = getPlatform();
+  if (!platform.dependenciesNeedInstall || !platform.installDependencies) {
+    return;
+  }
+  let needs = false;
+  try {
+    needs = await platform.dependenciesNeedInstall();
+  } catch {
+    return;
+  }
+  if (!needs) {
+    return;
+  }
+  const progress = showProgressModal({
+    status: "Running bun install…",
+    title: "Installing dependencies",
+  });
+  try {
+    const result = await platform.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));
+  }
+}

package/src/packages/jxsuite-update.ts

@@ -0,0 +1,131 @@
+/// <reference lib="dom" />
+/**
+ * On project open, compare the project's `@jxsuite/*` dependency ranges to the version this Studio
+ * build embeds (`VERSION`). If the project is behind, prompt the user to bump them to match and —
+ * on confirm — rewrite the ranges and reinstall. The target is the embedded version (not npm
+ * latest) so a project always lines up with the runtime/compiler the running app actually uses.
+ */
+
+import { html } from "lit-html";
+import { getPlatform } from "../platform";
+import { VERSION } from "../version";
+import { showConfirmDialog } from "../ui/layers";
+import { showProgressModal } from "../ui/progress-modal";
+import { statusMessage } from "../panels/statusbar";
+import { isComparable, isUpgrade } from "./semver";
+import type { PackageInfo } from "../types";
+
+const JXSUITE_PREFIX = "@jxsuite/";
+
+export interface JxsuiteUpdate {
+  name: string;
+  current: string;
+  dev: boolean;
+}
+
+/**
+ * Compare the project's @jxsuite/* deps to the embedded version. Returns the packages behind the
+ * target plus the target version, or null when there's nothing to do (dev build, no project, or all
+ * already current/ahead).
+ */
+export async function checkJxsuiteUpdate(): Promise<{
+  target: string;
+  outdated: JxsuiteUpdate[];
+} | null> {
+  const target = VERSION;
+  if (!isComparable(target)) {
+    return null; // "dev" / non-semver build — no reliable target
+  }
+  const platform = getPlatform();
+  let pkgs: PackageInfo[];
+  try {
+    pkgs = await platform.listPackages();
+  } catch {
+    return null;
+  }
+  const outdated: JxsuiteUpdate[] = [];
+  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: string, target: string): string {
+  return `jx:jxsuite-update-dismissed:${root}:${target}`;
+}
+
+function isDismissed(root: string, target: string): boolean {
+  try {
+    return localStorage.getItem(dismissKey(root, target)) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function setDismissed(root: string, target: string): void {
+  try {
+    localStorage.setItem(dismissKey(root, target), "1");
+  } catch {
+    /* Ignore storage errors */
+  }
+}
+
+/** Apply a set of @jxsuite bumps to `^target` and reinstall, behind a progress modal. */
+export async function applyJxsuiteUpdate(outdated: JxsuiteUpdate[], target: string): Promise<void> {
+  const platform = getPlatform();
+  if (!platform.setPackageVersions) {
+    return;
+  }
+  const progress = showProgressModal({
+    status: "Updating @jxsuite packages…",
+    title: "Updating dependencies",
+  });
+  try {
+    const result = await platform.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));
+  }
+}
+
+/**
+ * Prompt to update @jxsuite packages on open. Skips when there's nothing to do or the user already
+ * declined this exact target for this project (remembered in localStorage).
+ */
+export async function maybePromptJxsuiteUpdate(projectRoot: string): Promise<void> {
+  const platform = getPlatform();
+  if (!platform.setPackageVersions) {
+    return;
+  }
+  const check = await checkJxsuiteUpdate();
+  if (!check || isDismissed(projectRoot, check.target)) {
+    return;
+  }
+  const list = check.outdated.map((p) => `${p.name} ${p.current} → ^${check.target}`).join("\n");
+  const confirmed = await showConfirmDialog(
+    "Update @jxsuite packages?",
+    html`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"
+        >${list}</span
+      >`,
+    { cancelLabel: "Not now", confirmLabel: "Update" },
+  );
+  if (!confirmed) {
+    setDismissed(projectRoot, check.target);
+    return;
+  }
+  await applyJxsuiteUpdate(check.outdated, check.target);
+}

package/src/packages/semver.ts

@@ -0,0 +1,54 @@
+/**
+ * Minimal semver helpers for comparing dependency versions in the UI. Deliberately tiny — we only
+ * need range stripping and ordering of `x.y.z` triples, not full semver range satisfaction, so we
+ * avoid pulling in a dependency.
+ */
+
+/** Strip a range prefix to its base version: "^0.19.0" → "0.19.0", "~1.2.3" → "1.2.3". */
+export function stripRange(range: string): string {
+  const base = range.replace(/^[\^~>=<v\s]+/, "").trim();
+  return base.split(/\s+/)[0] ?? "";
+}
+
+/**
+ * Whether a spec is a comparable registry semver (a plain `x.y.z` range), as opposed to
+ * `workspace:`, `file:`, `link:`, a git/URL spec, or a wildcard like `*`/`latest`.
+ */
+export function isComparable(spec: string): boolean {
+  if (spec.includes(":")) {
+    return false;
+  }
+  return /^\d+\.\d+/.test(stripRange(spec));
+}
+
+/** Parse a version into numeric [major, minor, patch], ignoring any pre-release/build suffix. */
+function parts(version: string): [number, number, number] {
+  const core = stripRange(version).split(/[-+]/)[0] ?? "";
+  const [major = 0, minor = 0, patch = 0] = core.split(".").map((n) => Math.trunc(Number(n)) || 0);
+  return [major, minor, patch];
+}
+
+/**
+ * Compare two versions (range prefixes tolerated). Returns -1 if a < b, 1 if a > b, 0 if equal.
+ * Pre-release/build metadata is ignored.
+ */
+export function compareSemver(a: string, b: string): number {
+  const pa = parts(a);
+  const pb = parts(b);
+  for (let i = 0; i < 3; i++) {
+    const da = pa[i] ?? 0;
+    const db = pb[i] ?? 0;
+    if (da !== db) {
+      return da < db ? -1 : 1;
+    }
+  }
+  return 0;
+}
+
+/** Whether `latest` is strictly newer than the base version of `current` (both comparable). */
+export function isUpgrade(current: string, latest: string): boolean {
+  if (!isComparable(current) || !isComparable(latest)) {
+    return false;
+  }
+  return compareSemver(latest, current) > 0;
+}

package/src/panels/activity-bar.ts

@@ -7,6 +7,7 @@ import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
 import { applyPanelCollapse, view } from "../view";
 import { openSettingsModal } from "../settings/settings-modal";
+import { openAboutModal } from "../about/about-modal";
 import { refreshGitStatus } from "./git-panel";
 import type { EffectScope } from "@vue/reactivity";
 import type { TemplateResult } from "lit-html";
@@ -129,7 +130,18 @@ export function renderActivityBar() {
         `,
       )}
     </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"

package/src/panels/ai-panel.ts

@@ -457,7 +457,9 @@ export 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>

package/src/panels/elements-panel.ts

@@ -141,7 +141,8 @@ export 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>

package/src/panels/layers-panel.ts

@@ -151,7 +151,11 @@ export 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>
         `,

package/src/panels/preview-render.ts

@@ -122,7 +122,7 @@ export function renderCanvasNode(
     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";
+      "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);
   }
 

package/src/panels/properties-panel.ts

@@ -331,7 +331,7 @@ function renderSwitchFieldsTemplate(
       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>
@@ -369,7 +369,7 @@ function renderSwitchFieldsTemplate(
             >→</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=${(e: Event) => {
               e.stopPropagation();
               transactDoc(activeTab.value!, (t) => mutateRemoveSwitchCase(t, path, caseName));
@@ -657,7 +657,7 @@ function renderMediaFieldsTemplate(node: JxMutableNode) {
                   }}
                 />
                 <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>
@@ -714,7 +714,7 @@ function mediaBreakpointRowTemplate(name: string, query: string) {
         <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=${(e: Event) => {
             const newKey = friendlyNameToMedia((e.target as HTMLInputElement).value);
             currentRawLabel = newKey || "";
@@ -738,7 +738,7 @@ function mediaBreakpointRowTemplate(name: string, query: string) {
         />
         <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
@@ -892,14 +892,18 @@ function renderLayoutSelectionPanel(ctx: { navigateToComponent: (path: string) =
                 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>
             ${className
               ? html`<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"
                     >${className}</span
                   >
                 </div>`
@@ -1234,9 +1238,9 @@ export function renderPropertiesPanelTemplate(ctx: {
                       const def = d as Record<string, unknown>;
                       return html`
                         <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)"
                             >${def.attribute}</code
                           >
                           <span style="color:var(--fg-dim)"> → </span>
@@ -1248,7 +1252,7 @@ export function renderPropertiesPanelTemplate(ctx: {
                             : nothing}
                           ${def.reflects
                             ? html`<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}
@@ -1344,9 +1348,9 @@ export function renderPropertiesPanelTemplate(ctx: {
                 ${cssProps.map(
                   ([prop, val]) => html`
                     <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>
                   `,
@@ -1374,9 +1378,11 @@ export function renderPropertiesPanelTemplate(ctx: {
                 ${parts.map(
                   (p) => html`
                     <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)">${p.name}</code>
+                      <code style="font-family:var(--font-mono);color:var(--accent)"
+                        >${p.name}</code
+                      >
                       <span style="color:var(--fg-dim)">&lt;${p.tag}&gt;</span>
                     </div>
                   `,