@jxsuite/studio 0.28.2 → 0.28.4

package/src/ui/layers.ts

@@ -1,14 +1,15 @@
 /// <reference lib="dom" />
-import { render as litRender, nothing, html } from "lit-html";
+import { html, render as litRender, nothing } from "lit-html";
+import type { TemplateResult } from "lit-html";
 
 let _popoverLayer: HTMLElement;
 let _modalLayer: HTMLElement;
 let _dialogLayer: HTMLElement;
 
 export function initLayers() {
-  _popoverLayer = document.getElementById("layer-popover") as HTMLElement;
-  _modalLayer = document.getElementById("layer-modal") as HTMLElement;
-  _dialogLayer = document.getElementById("layer-dialog") as HTMLElement;
+  _popoverLayer = document.querySelector("#layer-popover") as HTMLElement;
+  _modalLayer = document.querySelector("#layer-modal") as HTMLElement;
+  _dialogLayer = document.querySelector("#layer-dialog") as HTMLElement;
 }
 
 /**
@@ -19,15 +20,17 @@ export function initLayers() {
  * @returns {Promise<T>}
  */
 export function showDialog<T>(
-  templateFn: (done: (value: T) => void) => import("lit-html").TemplateResult,
+  templateFn: (done: (value: T) => void) => TemplateResult,
 ): Promise<T> {
   return new Promise((resolve) => {
     const slot = document.createElement("div");
     slot.style.pointerEvents = "auto";
-    _dialogLayer.appendChild(slot);
+    _dialogLayer.append(slot);
     let resolved = false;
     const done = (value: T) => {
-      if (resolved) return;
+      if (resolved) {
+        return;
+      }
       resolved = true;
       litRender(nothing, slot);
       slot.remove();
@@ -47,7 +50,7 @@ export function showDialog<T>(
  */
 export function showConfirmDialog(
   headline: string,
-  message: string | import("lit-html").TemplateResult,
+  message: string | TemplateResult,
   opts: {
     confirmLabel?: string;
     cancelLabel?: string;
@@ -80,21 +83,21 @@ export function showConfirmDialog(
  *
  * @param {import("lit-html").TemplateResult} template
  */
-export function openModal(template: import("lit-html").TemplateResult) {
+export function openModal(template: TemplateResult) {
   const slot = document.createElement("div");
   slot.style.pointerEvents = "auto";
-  _modalLayer.appendChild(slot);
+  _modalLayer.append(slot);
   litRender(template, slot);
   return {
-    host: slot,
-    /** @param {import("lit-html").TemplateResult} tpl */
-    update(tpl: import("lit-html").TemplateResult) {
-      litRender(tpl, slot);
-    },
     close() {
       litRender(nothing, slot);
       slot.remove();
     },
+    host: slot,
+    /** @param {import("lit-html").TemplateResult} tpl */
+    update(tpl: TemplateResult) {
+      litRender(tpl, slot);
+    },
   };
 }
 
@@ -109,7 +112,7 @@ export function openModal(template: import("lit-html").TemplateResult) {
  * }} [opts]
  */
 export function renderPopover(
-  template: import("lit-html").TemplateResult,
+  template: TemplateResult,
   opts: {
     dismissOnOutsideClick?: boolean;
     onDismiss?: () => void;
@@ -120,7 +123,7 @@ export function renderPopover(
   slot.style.pointerEvents = "auto";
   const target =
     opts.layer === "modal" ? _modalLayer : opts.layer === "dialog" ? _dialogLayer : _popoverLayer;
-  target.appendChild(slot);
+  target.append(slot);
   litRender(template, slot);
 
   let outsideClickHandler: ((e: MouseEvent) => void) | null = null;
@@ -132,16 +135,13 @@ export function renderPopover(
       }
     };
     requestAnimationFrame(() => {
-      if (outsideClickHandler) document.addEventListener("mousedown", outsideClickHandler, true);
+      if (outsideClickHandler) {
+        document.addEventListener("mousedown", outsideClickHandler, true);
+      }
     });
   }
 
   const handle = {
-    host: slot,
-    /** @param {import("lit-html").TemplateResult} tpl */
-    update(tpl: import("lit-html").TemplateResult) {
-      litRender(tpl, slot);
-    },
     dismiss() {
       if (outsideClickHandler) {
         document.removeEventListener("mousedown", outsideClickHandler, true);
@@ -149,11 +149,16 @@ export function renderPopover(
       litRender(nothing, slot);
       slot.remove();
     },
+    host: slot,
+    /** @param {import("lit-html").TemplateResult} tpl */
+    update(tpl: TemplateResult) {
+      litRender(tpl, slot);
+    },
   };
   return handle;
 }
 
-const _namedSlots: Map<string, HTMLElement> = new Map();
+const _namedSlots = new Map<string, HTMLElement>();
 
 /**
  * Get or create a named slot in a layer. Useful for persistent popovers like zoom indicator.
@@ -165,14 +170,16 @@ const _namedSlots: Map<string, HTMLElement> = new Map();
 export function getLayerSlot(layer: "popover" | "modal" | "dialog", id: string) {
   const key = `${layer}:${id}`;
   let slot = _namedSlots.get(key);
-  if (slot && slot.parentElement) return slot;
+  if (slot && slot.parentElement) {
+    return slot;
+  }
 
   slot = document.createElement("div");
   slot.style.pointerEvents = "auto";
   const target =
     (layer === "popover" ? _popoverLayer : layer === "modal" ? _modalLayer : _dialogLayer) ||
     document.body;
-  target.appendChild(slot);
+  target.append(slot);
   _namedSlots.set(key, slot);
   return slot;
 }

package/src/ui/media-picker.ts

@@ -64,9 +64,9 @@ async function collectMedia(
         const ext = dot > 0 ? entry.name.slice(dot).toLowerCase() : "";
         if (MEDIA_EXTENSIONS.has(ext)) {
           results.push({
-            path: `/${entry.path}`,
-            name: entry.name,
             isImage: IMAGE_EXTENSIONS.has(ext),
+            name: entry.name,
+            path: `/${entry.path}`,
           });
         }
       }
@@ -78,7 +78,9 @@ async function collectMedia(
 }
 
 async function loadMediaCache() {
-  if (mediaCacheLoaded) return;
+  if (mediaCacheLoaded) {
+    return;
+  }
   const platform = getPlatform();
   mediaCache = await collectMedia("public", platform);
   // Strip "public/" prefix so paths match production (public/ contents served at root)
@@ -137,7 +139,9 @@ function onPopoverOutsideClick(e: MouseEvent) {
 function renderMediaPickerPopover() {
   const host = getLayerSlot("popover", "media-picker");
   const rect = _popoverAnchorEl?.getBoundingClientRect();
-  if (!rect) return;
+  if (!rect) {
+    return;
+  }
 
   const query = _popoverFilter.toLowerCase();
   const filtered = query
@@ -148,7 +152,7 @@ function renderMediaPickerPopover() {
   const options = filtered.slice(0, 50);
 
   // Compute initial position below the anchor
-  let left = rect.left;
+  let { left } = rect;
   let top = rect.bottom + 4;
 
   // Estimate popover dimensions for viewport clamping before first paint
@@ -195,7 +199,7 @@ function renderMediaPickerPopover() {
             dismissMediaPickerPopover();
           }}
         >
-          ${options.length
+          ${options.length > 0
             ? options.map(
                 (m) => html`
                   <sp-menu-item value=${m.path}>
@@ -252,7 +256,9 @@ function renderMediaPickerPopover() {
       }
     }
 
-    if (_popoverFilterEl) _popoverFilterEl.focus();
+    if (_popoverFilterEl) {
+      _popoverFilterEl.focus();
+    }
   });
 }
 

package/src/ui/panel-resize.ts

@@ -6,11 +6,11 @@
  * localStorage so they survive page reloads.
  */
 
-import { view, applyPanelCollapse } from "../view";
+import { applyPanelCollapse, view } from "../view";
 
 const STORAGE_KEY = "jx-studio-panel-widths";
 const MIN_WIDTH = 160;
-const MAX_RATIO = 0.5; // max 50% of viewport
+const MAX_RATIO = 0.5; // Max 50% of viewport
 const DEFAULT_LEFT = 240;
 const DEFAULT_RIGHT = 280;
 
@@ -20,13 +20,21 @@ const root = document.documentElement;
 
 try {
   const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
-  if (saved.left) root.style.setProperty("--panel-w-left", `${saved.left}px`);
-  if (saved.right) root.style.setProperty("--panel-w-right", `${saved.right}px`);
-  if (saved.leftCollapsed) view.leftPanelCollapsed = true;
-  if (saved.rightCollapsed) view.rightPanelCollapsed = true;
+  if (saved.left) {
+    root.style.setProperty("--panel-w-left", `${saved.left}px`);
+  }
+  if (saved.right) {
+    root.style.setProperty("--panel-w-right", `${saved.right}px`);
+  }
+  if (saved.leftCollapsed) {
+    view.leftPanelCollapsed = true;
+  }
+  if (saved.rightCollapsed) {
+    view.rightPanelCollapsed = true;
+  }
   applyPanelCollapse();
 } catch {
-  // ignore
+  // Ignore
 }
 
 // ─── Setup handles ───────────────────────────────────────────────────────────
@@ -50,17 +58,20 @@ function setupHandle(
     try {
       handle.setPointerCapture(e.pointerId);
     } catch {
-      /* synthetic events */
+      /* Synthetic events */
     }
     handle.classList.add("dragging");
     document.body.style.userSelect = "none";
 
-    const current = parseInt(getComputedStyle(root).getPropertyValue(cssVar)) || defaultWidth;
-    drag = { startX: e.clientX, startWidth: current };
+    const current =
+      Number.parseInt(getComputedStyle(root).getPropertyValue(cssVar), 10) || defaultWidth;
+    drag = { startWidth: current, startX: e.clientX };
   });
 
   handle.addEventListener("pointermove", (e) => {
-    if (!drag) return;
+    if (!drag) {
+      return;
+    }
     const delta = side === "left" ? e.clientX - drag.startX : drag.startX - e.clientX;
     const maxWidth = window.innerWidth * MAX_RATIO;
     const newWidth = Math.round(Math.min(maxWidth, Math.max(MIN_WIDTH, drag.startWidth + delta)));
@@ -68,12 +79,14 @@ function setupHandle(
   });
 
   handle.addEventListener("pointerup", (e) => {
-    if (!drag) return;
+    if (!drag) {
+      return;
+    }
     drag = null;
     try {
       handle.releasePointerCapture(e.pointerId);
     } catch {
-      /* synthetic events */
+      /* Synthetic events */
     }
     handle.classList.remove("dragging");
     document.body.style.userSelect = "";
@@ -87,20 +100,26 @@ function setupHandle(
 }
 
 function persistWidths() {
-  const left = parseInt(getComputedStyle(root).getPropertyValue("--panel-w-left")) || DEFAULT_LEFT;
+  const left =
+    Number.parseInt(getComputedStyle(root).getPropertyValue("--panel-w-left"), 10) || DEFAULT_LEFT;
   const right =
-    parseInt(getComputedStyle(root).getPropertyValue("--panel-w-right")) || DEFAULT_RIGHT;
+    Number.parseInt(getComputedStyle(root).getPropertyValue("--panel-w-right"), 10) ||
+    DEFAULT_RIGHT;
   try {
     localStorage.setItem(STORAGE_KEY, JSON.stringify({ left, right }));
   } catch {
-    // storage full or unavailable
+    // Storage full or unavailable
   }
 }
 
 // ─── Initialize ──────────────────────────────────────────────────────────────
 
-const resizeLeft = document.getElementById("resize-left");
-const resizeRight = document.getElementById("resize-right");
+const resizeLeft = document.querySelector<HTMLElement>("#resize-left");
+const resizeRight = document.querySelector<HTMLElement>("#resize-right");
 
-if (resizeLeft) setupHandle(resizeLeft, "--panel-w-left", "left", DEFAULT_LEFT);
-if (resizeRight) setupHandle(resizeRight, "--panel-w-right", "right", DEFAULT_RIGHT);
+if (resizeLeft) {
+  setupHandle(resizeLeft, "--panel-w-left", "left", DEFAULT_LEFT);
+}
+if (resizeRight) {
+  setupHandle(resizeRight, "--panel-w-right", "right", DEFAULT_RIGHT);
+}

package/src/ui/spectrum.ts

@@ -148,7 +148,7 @@ import { JxColorPopover } from "./color-selector";
 import { IconChevron100 } from "@spectrum-web-components/icons-ui/src/elements/IconChevron100.js";
 
 // Register all components. Using defineElement from Spectrum's base package
-// ensures duplicate registration is handled gracefully.
+// Ensures duplicate registration is handled gracefully.
 import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
 const components = [
@@ -283,7 +283,9 @@ const components = [
 ];
 
 for (const [tag, ctor] of components as [string, CustomElementConstructor][]) {
-  if (!customElements.get(tag)) defineElement(tag, ctor);
+  if (!customElements.get(tag)) {
+    defineElement(tag, ctor);
+  }
 }
 
 // Register theme fragments (these are also side-effect-only in the original modules)

package/src/ui/unit-selector.ts

@@ -9,7 +9,7 @@
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { classMap } from "lit-html/directives/class-map.js";
-import { debouncedStyleCommit, cancelStyleDebounce } from "../store";
+import { cancelStyleDebounce, debouncedStyleCommit } from "../store";
 
 export const UNIT_RE = /^(-?[\d.]+)(px|rem|em|%|vw|vh|svw|svh|dvh|ms|s|fr|ch|ex|deg)?$/;
 
@@ -28,7 +28,7 @@ export function renderUnitSelector(
   /** @type {string} */ prop: string,
   /** @type {string | number | undefined} */ value: string | number | undefined,
   /** @type {(val: string) => void} */ onChange: (val: string) => void,
-  /** @type {string} */ placeholder: string = "",
+  /** @type {string} */ placeholder = "",
 ) {
   const units = (entry.$units || []) as string[];
   const keywords = (entry.$keywords || []) as string[];
@@ -39,12 +39,16 @@ export function renderUnitSelector(
 
   const currentUnit = isKeyword ? units[0] || "" : match ? match[2] || "" : units[0] || "";
   let displayValue;
-  if (isKeyword) displayValue = strVal;
-  else if (match) displayValue = match[1];
-  else if (strVal !== "") {
-    const num = parseFloat(strVal);
-    displayValue = isNaN(num) ? strVal : String(num);
-  } else displayValue = "";
+  if (isKeyword) {
+    displayValue = strVal;
+  } else if (match) {
+    [, displayValue] = match;
+  } else if (strVal !== "") {
+    const num = Number.parseFloat(strVal);
+    displayValue = Number.isNaN(num) ? strVal : String(num);
+  } else {
+    displayValue = "";
+  }
 
   // Parse placeholder so inherited values display as "500" not "500px"
   const placeholderMatch = placeholder.match(UNIT_RE);
@@ -60,8 +64,11 @@ export function renderUnitSelector(
       onChange("");
       return;
     }
-    if (isNumericVal(val)) onChange(units.length > 0 ? val + currentUnit : val);
-    else onChange(val);
+    if (isNumericVal(val)) {
+      onChange(units.length > 0 ? val + currentUnit : val);
+    } else {
+      onChange(val);
+    }
   };
 
   return html`
@@ -100,7 +107,9 @@ export function renderUnitSelector(
                       } else if (units.includes(chosen)) {
                         const curMatch = String(value ?? "").match(UNIT_RE);
                         const numPart = curMatch ? curMatch[1] : "";
-                        if (numPart) onChange(numPart + chosen);
+                        if (numPart) {
+                          onChange(numPart + chosen);
+                        }
                       }
                     }}
                   >

package/src/ui/value-selector.ts

@@ -23,10 +23,10 @@ type ComboOption = { value: string; label: string; style?: string } | { divider:
 
 export class JxValueSelector extends LitElement {
   static properties = {
-    value: { type: String },
+    options: { attribute: false },
     placeholder: { type: String },
     size: { type: String },
-    options: { attribute: false },
+    value: { type: String },
   };
 
   declare value: string;
@@ -41,7 +41,7 @@ export class JxValueSelector extends LitElement {
     this.placeholder = "";
     this.size = "s";
     this.options = [];
-    this._menuId = "jx-combo-" + Math.random().toString(36).slice(2, 8);
+    this._menuId = `jx-combo-${Math.random().toString(36).slice(2, 8)}`;
   }
 
   /** No shadow DOM — render directly into light DOM */
@@ -52,14 +52,16 @@ export class JxValueSelector extends LitElement {
   /** Check if current value matches a predefined option */
   get _isPicker() {
     return (
-      !!this.value &&
+      Boolean(this.value) &&
       this.options.some((o: ComboOption) => !("divider" in o) && o.value === this.value)
     );
   }
 
   /** Get the selected option's style string for the picker button preview */
   get _selectedStyle() {
-    if (!this._isPicker) return "";
+    if (!this._isPicker) {
+      return "";
+    }
     const opt = this.options.find((o: ComboOption) => !("divider" in o) && o.value === this.value);
     return (opt as { value: string; label: string; style?: string } | undefined)?.style || "";
   }
@@ -85,7 +87,9 @@ export class JxValueSelector extends LitElement {
   /** Combobox mode: sp-menu @change handler */
   _handleMenuChange(e: Event) {
     e.stopPropagation();
-    if (!(e.target as HTMLInputElement).value) return;
+    if (!(e.target as HTMLInputElement).value) {
+      return;
+    }
     this.value = (e.target as HTMLInputElement).value;
     this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
   }
@@ -102,7 +106,9 @@ export class JxValueSelector extends LitElement {
     const group = this.querySelector(".jx-combobox-group");
     const w = group ? (group as HTMLElement).offsetWidth : 0;
     const popover = (e.target as HTMLElement).querySelector("sp-popover");
-    if (popover && w) (popover as HTMLElement).style.minWidth = `${w}px`;
+    if (popover && w) {
+      (popover as HTMLElement).style.minWidth = `${w}px`;
+    }
   }
 
   render() {

package/src/ui/widgets.ts

@@ -19,6 +19,7 @@ import { renderColorSelector } from "./color-selector";
 import { renderUnitSelector } from "./unit-selector";
 import { renderButtonGroup } from "./button-group";
 import { renderMediaPicker } from "./media-picker";
+import type { TemplateResult } from "lit-html";
 
 /**
  * Render a plain text input widget.
@@ -33,7 +34,7 @@ export function renderTextInput(
   prop: string,
   value: string | number | undefined,
   onChange: (val: string) => void,
-  placeholder: string = "",
+  placeholder = "",
 ) {
   return html`
     <sp-textfield
@@ -62,7 +63,7 @@ export function renderNumberInput(
   prop: string,
   value: string | number | undefined,
   onChange: (val: string | number) => void,
-  placeholder: string = "",
+  placeholder = "",
 ) {
   const minimum = entry.minimum as number | undefined;
   const maximum = entry.maximum as number | undefined;
@@ -77,8 +78,11 @@ export function renderNumberInput(
       step=${ifDefined(maximum !== undefined && maximum <= 1 ? 0.1 : undefined)}
       @change=${debouncedStyleCommit(`num:${prop}`, 400, (e: Event) => {
         const v = (e.target as HTMLInputElement & { value: number | undefined }).value;
-        if (v === undefined || isNaN(v)) onChange("");
-        else onChange(Number(v));
+        if (v === undefined || Number.isNaN(v)) {
+          onChange("");
+        } else {
+          onChange(Number(v));
+        }
       })}
     ></sp-number-field>
   `;
@@ -120,37 +124,49 @@ export function widgetForType(
     renderSelect?: (
       entry: Record<string, unknown>,
       prop: string,
-      value: any,
+      value: string | number | undefined,
       onCommit: (val: string | number) => void,
-    ) => import("lit-html").TemplateResult;
+    ) => TemplateResult;
     renderCombobox?: (
       entry: Record<string, unknown>,
       prop: string,
-      value: any,
+      value: string | number | undefined,
       onCommit: (val: string | number) => void,
-    ) => import("lit-html").TemplateResult;
+    ) => TemplateResult;
   } = {},
 ) {
   switch (type) {
-    case "button-group":
+    case "button-group": {
       return renderButtonGroup(entry, prop, value, onCommit);
-    case "color":
+    }
+    case "color": {
       return renderColorSelector(prop, value, onCommit);
-    case "number-unit":
+    }
+    case "number-unit": {
       return renderUnitSelector(entry, prop, value, onCommit, opts.placeholder);
-    case "number":
+    }
+    case "number": {
       return renderNumberInput(entry, prop, value, onCommit, opts.placeholder);
-    case "media":
+    }
+    case "media": {
       return renderMediaPicker(prop, String(value ?? ""), onCommit);
-    case "select":
+    }
+    case "select": {
       // Allow caller to override select rendering (e.g. for typography preview)
-      if (opts.renderSelect) return opts.renderSelect(entry, prop, value, onCommit);
+      if (opts.renderSelect) {
+        return opts.renderSelect(entry, prop, value, onCommit);
+      }
       return renderTextInput(prop, value, onCommit, opts.placeholder);
-    case "combobox":
+    }
+    case "combobox": {
       // Allow caller to override combobox rendering (e.g. for font family)
-      if (opts.renderCombobox) return opts.renderCombobox(entry, prop, value, onCommit);
+      if (opts.renderCombobox) {
+        return opts.renderCombobox(entry, prop, value, onCommit);
+      }
       return renderTextInput(prop, value, onCommit, opts.placeholder);
-    default:
+    }
+    default: {
       return renderTextInput(prop, value, onCommit, opts.placeholder);
+    }
   }
 }