@jxsuite/studio 0.29.0 → 0.31.0

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/dnd.ts

@@ -67,8 +67,8 @@ export function registerLayersDnD() {
     for (const row of container.querySelectorAll("[data-dnd-row]") as NodeListOf<HTMLElement>) {
       const rowPath = (row.dataset.path as string)
         .split("/")
-        .map((s: string) => (/^\d+$/.test(s) ? Number.parseInt(s, 10) : s)) as JxPath;
-      const rowDepth = Number.parseInt(row.dataset.dndDepth as string, 10) || 0;
+        .map((s: string) => (/^\d+$/.test(s) ? Math.trunc(Number(s)) : s)) as JxPath;
+      const rowDepth = Math.trunc(Number(row.dataset.dndDepth as string)) || 0;
       const isVoid = Object.hasOwn(row.dataset, "dndVoid");
       const isExpanded = Object.hasOwn(row.dataset, "dndExpanded");
 

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>
                   `,

package/src/panels/signals-panel.ts

@@ -706,9 +706,9 @@ function renderSignalEditorTemplate(
         : signalFieldRow("Default", defaultVal, (v: string) => {
             let parsed: unknown = v;
             if (def.type === "integer") {
-              parsed = Number.parseInt(v, 10) || 0;
+              parsed = Math.trunc(Number(v)) || 0;
             } else if (def.type === "number") {
-              parsed = Number.parseFloat(v) || 0;
+              parsed = Number(v) || 0;
             } else if (def.type === "boolean") {
               parsed = v === "true";
             } else if (def.type === "array" || def.type === "object") {
@@ -860,7 +860,7 @@ function renderDataSourceFields(
       )}
       ${signalFieldRow("Version", String(def.version || 1), (v: string) =>
         transactDoc(activeTab.value, (t) =>
-          mutateUpdateDef(t, name, { version: Number.parseInt(v, 10) || 1 }),
+          mutateUpdateDef(t, name, { version: Math.trunc(Number(v)) || 1 }),
         ),
       )}
     `;
@@ -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>
@@ -1279,6 +1279,14 @@ function resolveSchemaEnum(
  * @param {(val: unknown) => void} onChange
  * @param {Record<string, unknown>} [parentDef] - Parent def for resolving dependent enum refs
  */
+/** Parse a numeric field value, returning NaN for blank input (so callers can treat it as unset). */
+function parseNumericField(raw: string, integer: boolean): number {
+  if (raw.trim() === "") {
+    return Number.NaN;
+  }
+  return integer ? Math.trunc(Number(raw)) : Number(raw);
+}
+
 function renderInlineField(
   key: string,
   schema: Record<string, unknown>,
@@ -1319,10 +1327,10 @@ function renderInlineField(
       .value=${value !== undefined ? value : nothing}
       step=${schema.type === "integer" ? "1" : nothing}
       @change=${(e: Event) => {
-        const parsed =
-          schema.type === "integer"
-            ? Number.parseInt((e.target as HTMLInputElement).value, 10)
-            : Number.parseFloat((e.target as HTMLInputElement).value);
+        const parsed = parseNumericField(
+          (e.target as HTMLInputElement).value,
+          schema.type === "integer",
+        );
         onChange(Number.isNaN(parsed) ? undefined : parsed);
       }}
     ></sp-number-field>`;
@@ -1439,10 +1447,10 @@ export function renderSchemaFieldsTemplate(
           @change=${(e: Event) => {
             clearTimeout(debounce);
             debounce = setTimeout(() => {
-              const parsed =
-                ps.type === "integer"
-                  ? Number.parseInt((e.target as HTMLInputElement).value, 10)
-                  : Number.parseFloat((e.target as HTMLInputElement).value);
+              const parsed = parseNumericField(
+                (e.target as HTMLInputElement).value,
+                ps.type === "integer",
+              );
               transactDoc(activeTab.value, (t) =>
                 mutateUpdateDef(t, name, {
                   [prop]: Number.isNaN(parsed) ? undefined : parsed,
@@ -1466,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
                         >
                       `,
@@ -1634,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>`;
@@ -1650,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;
 }