@jxsuite/studio 0.30.1 → 0.31.0

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/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;