@jxsuite/studio 0.29.0 → 0.31.0

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}

package/src/ui/panel-resize.ts

@@ -16,6 +16,11 @@ const DEFAULT_RIGHT = 280;
 
 const root = document.documentElement;
 
+/** Read a px-valued CSS custom property as a number (e.g. "320px" → 320). */
+function readPxVar(cssVar: string): number {
+  return Number(getComputedStyle(root).getPropertyValue(cssVar).replace(/px$/, ""));
+}
+
 // ─── Restore saved widths & collapse state ──────────────────────────────────
 
 try {
@@ -68,8 +73,7 @@ function setupHandle(
     handle.classList.add("dragging");
     document.body.style.userSelect = "none";
 
-    const current =
-      Number.parseInt(getComputedStyle(root).getPropertyValue(cssVar), 10) || defaultWidth;
+    const current = readPxVar(cssVar) || defaultWidth;
     drag = { startWidth: current, startX: e.clientX };
   });
 
@@ -105,11 +109,8 @@ function setupHandle(
 }
 
 function persistWidths() {
-  const left =
-    Number.parseInt(getComputedStyle(root).getPropertyValue("--panel-w-left"), 10) || DEFAULT_LEFT;
-  const right =
-    Number.parseInt(getComputedStyle(root).getPropertyValue("--panel-w-right"), 10) ||
-    DEFAULT_RIGHT;
+  const left = readPxVar("--panel-w-left") || DEFAULT_LEFT;
+  const right = readPxVar("--panel-w-right") || DEFAULT_RIGHT;
   try {
     localStorage.setItem(STORAGE_KEY, JSON.stringify({ left, right }));
   } catch {

package/src/ui/progress-modal.ts

@@ -0,0 +1,94 @@
+/// <reference lib="dom" />
+/**
+ * A blocking progress modal for long-running package operations (bun install / dependency updates).
+ * Shows an indeterminate spinner with a status line; on failure it swaps to an error view with the
+ * captured log and a Close button. Built on the persistent-modal layer helper.
+ */
+
+import { html } from "lit-html";
+import type { TemplateResult } from "lit-html";
+import { openModal } from "./layers";
+
+export interface ProgressModalHandle {
+  /** Update the status line shown under the title. */
+  setStatus: (text: string) => void;
+  /** Replace the spinner with an error view (log shown) that the user dismisses. */
+  fail: (message: string) => void;
+  /** Close the modal (success path). */
+  done: () => void;
+}
+
+function card(body: TemplateResult): TemplateResult {
+  return html`
+    <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: string, status: string): TemplateResult {
+  return card(html`
+    <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>
+        ${status
+          ? html`<span style="font-size:var(--spectrum-font-size-75, 12px);color:var(--fg-dim,#aaa)"
+              >${status}</span
+            >`
+          : ""}
+      </div>
+    </div>
+  `);
+}
+
+function errorView(title: string, message: string, onClose: () => void): TemplateResult {
+  return card(html`
+    <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>
+  `);
+}
+
+export function showProgressModal(opts: { title: string; status?: string }): ProgressModalHandle {
+  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: string) {
+      if (!closed) {
+        modal.update(errorView(opts.title, message || "Unknown error", close));
+      }
+    },
+    setStatus(text: string) {
+      if (!closed) {
+        modal.update(runningView(opts.title, text));
+      }
+    },
+  };
+}

package/src/ui/spectrum.ts

@@ -48,6 +48,7 @@ import { Accordion } from "@spectrum-web-components/accordion/src/Accordion.js";
 import { AccordionItem } from "@spectrum-web-components/accordion/src/AccordionItem.js";
 import { ActionBar } from "@spectrum-web-components/action-bar/src/ActionBar.js";
 import { Toast } from "@spectrum-web-components/toast/src/Toast.js";
+import { ProgressCircle } from "@spectrum-web-components/progress-circle/src/ProgressCircle.js";
 import { Table } from "@spectrum-web-components/table/src/Table.js";
 import { TableHead } from "@spectrum-web-components/table/src/TableHead.js";
 import { TableHeadCell } from "@spectrum-web-components/table/src/TableHeadCell.js";
@@ -87,6 +88,7 @@ import { IconCode } from "@spectrum-web-components/icons-workflow/src/elements/I
 import { IconBrush } from "@spectrum-web-components/icons-workflow/src/elements/IconBrush.js";
 import { IconGears } from "@spectrum-web-components/icons-workflow/src/elements/IconGears.js";
 import { IconSettings } from "@spectrum-web-components/icons-workflow/src/elements/IconSettings.js";
+import { IconInfo } from "@spectrum-web-components/icons-workflow/src/elements/IconInfo.js";
 import { IconBack } from "@spectrum-web-components/icons-workflow/src/elements/IconBack.js";
 import { IconProperties } from "@spectrum-web-components/icons-workflow/src/elements/IconProperties.js";
 import { IconEvent } from "@spectrum-web-components/icons-workflow/src/elements/IconEvent.js";
@@ -190,6 +192,7 @@ const components = [
   ["sp-accordion-item", AccordionItem],
   ["sp-action-bar", ActionBar],
   ["sp-toast", Toast],
+  ["sp-progress-circle", ProgressCircle],
   ["sp-table", Table],
   ["sp-table-head", TableHead],
   ["sp-table-head-cell", TableHeadCell],
@@ -227,6 +230,7 @@ const 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],

package/src/ui/unit-selector.ts

@@ -44,6 +44,9 @@ export function renderUnitSelector(
   } else if (match) {
     displayValue = match[1]!;
   } else if (strVal !== "") {
+    // Intentional partial parse: shorthand like "10px 20px" displays its leading number.
+    // Number() yields NaN for those, so Number.parseFloat stays (see unit-selector tests).
+    // oxlint-disable-next-line unicorn/prefer-number-coercion
     const num = Number.parseFloat(strVal);
     displayValue = Number.isNaN(num) ? strVal : String(num);
   } else {

package/src/utils/canvas-media.ts

@@ -25,15 +25,15 @@ export function parseMediaEntries(mediaDef?: Record<string, string> | null) {
   for (const [name, query] of Object.entries(mediaDef)) {
     if (name === "--") {
       const wm = String(query).match(/^(\d+)\s*px$/);
-      baseWidth = wm ? Number.parseFloat(wm[1]!) : 320;
+      baseWidth = wm ? Number(wm[1]!) : 320;
       continue;
     }
     const minMatch = query.match(/min-width:\s*([\d.]+)px/);
     const maxMatch = query.match(/max-width:\s*([\d.]+)px/);
     if (minMatch) {
-      sizes.push({ name, query, type: "min", width: Number.parseFloat(minMatch[1]!) });
+      sizes.push({ name, query, type: "min", width: Number(minMatch[1]!) });
     } else if (maxMatch) {
-      sizes.push({ name, query, type: "max", width: Number.parseFloat(maxMatch[1]!) });
+      sizes.push({ name, query, type: "max", width: Number(maxMatch[1]!) });
     } else {
       features.push({ name, query });
     }

package/src/version.ts

@@ -0,0 +1,34 @@
+/**
+ * Version.ts — build-time metadata for the About screen.
+ *
+ * The constants below are replaced at bundle time by scripts/build.ts via Bun's `define`. They're
+ * read through `typeof` guards so the module stays safe under `bun test`, where the defines are
+ * absent and the fallbacks apply.
+ */
+
+declare const __JX_VERSION__: string;
+declare const __JX_BUILD_DATE__: string;
+declare const __JX_GIT_COMMIT__: string;
+
+export const APP_NAME = "Jx Studio";
+
+/*
+ * The `typeof` guards are deliberate: the identifiers are `declare const` placeholders that
+ * only exist after Bun's build-time `define` substitution. Under `bun test` they're never
+ * bound, so a direct `=== undefined` comparison would throw a ReferenceError.
+ */
+
+// oxlint-disable-next-line unicorn/no-typeof-undefined -- guards undeclared build-time define
+export const VERSION = typeof __JX_VERSION__ === "undefined" ? "dev" : __JX_VERSION__;
+
+// oxlint-disable-next-line unicorn/no-typeof-undefined -- guards undeclared build-time define
+export const BUILD_DATE = typeof __JX_BUILD_DATE__ === "undefined" ? "" : __JX_BUILD_DATE__;
+
+// oxlint-disable-next-line unicorn/no-typeof-undefined -- guards undeclared build-time define
+export const GIT_COMMIT = typeof __JX_GIT_COMMIT__ === "undefined" ? "unknown" : __JX_GIT_COMMIT__;
+
+export const LINKS = {
+  github: "https://github.com/jxsuite/jx",
+  docs: "https://github.com/jxsuite/jx#readme",
+  license: "https://github.com/jxsuite/jx/blob/main/LICENSE",
+} as const;