@jxsuite/studio 0.28.2 → 0.28.4

package/src/panels/statusbar.ts

@@ -1,10 +1,11 @@
 /// <reference lib="dom" />
 /** Statusbar — status message display for Jx Studio */
 
-import { statusbarEl, getNodeAtPath, nodeLabel, updateSession, renderOnly } from "../store";
+import { getNodeAtPath, nodeLabel, renderOnly, statusbarEl, updateSession } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
 import type { JxPath } from "../state";
+import type { EffectScope } from "@vue/reactivity";
 
 // ─── Module state ────────────────────────────────────────────────────────────
 
@@ -12,7 +13,7 @@ let statusMsg = "";
 /** @type {ReturnType<typeof setTimeout> | undefined} */
 let statusTimeout: ReturnType<typeof setTimeout> | undefined;
 let _rerender: (() => void) | null = null;
-let _scope: import("@vue/reactivity").EffectScope | null = null;
+let _scope: EffectScope | null = null;
 
 /**
  * Register the callback used to re-render the statusbar. Called once from studio.js during init.
@@ -29,7 +30,9 @@ export function mountStatusbar() {
   _scope.run(() => {
     effect(() => {
       const tab = activeTab.value;
-      if (!tab) return;
+      if (!tab) {
+        return;
+      }
       // Track relevant reactive properties
       void tab.doc.document;
       void tab.doc.mode;
@@ -52,14 +55,16 @@ export function unmountStatusbar() {
 
 /** @param {string} text */
 function esc(text: string) {
-  return String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return String(text).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
 }
 
 /** Render the statusbar content. */
 export function renderStatusbar() {
   const tab = activeTab.value;
   const parts = [];
-  if (tab?.doc.mode === "content") parts.push("Content Mode");
+  if (tab?.doc.mode === "content") {
+    parts.push("Content Mode");
+  }
   if (tab?.session.selection?.length) {
     const sel = tab.session.selection as JxPath;
     const node = getNodeAtPath(tab.doc.document, sel);
@@ -69,7 +74,11 @@ export function renderStatusbar() {
     for (let i = 0; i < sel.length; i += 2) {
       const subPath = sel.slice(0, i + 2);
       const childNode = getNodeAtPath(tab.doc.document, subPath);
-      const label = childNode?.tagName || childNode?.tag || `[${sel[i + 1]}]`;
+      const fallbackTag = childNode?.tag;
+      const label =
+        childNode?.tagName ||
+        (typeof fallbackTag === "string" ? fallbackTag : "") ||
+        `[${sel[i + 1]}]`;
       const dataPath = JSON.stringify(subPath);
       pathSegments.push(
         `<span class="sb-path-seg" data-path='${esc(dataPath)}'>${esc(label)}</span>`,
@@ -78,24 +87,30 @@ export function renderStatusbar() {
     parts.push(`Path: ${pathSegments.join(' <span class="sb-path-sep">&gt;</span> ')}`);
   } else if (tab?.session.ui.stylebookSelection) {
     const sel = tab.session.ui.stylebookSelection;
-    parts.push(`Style: ${esc(sel.replace(/ /g, " > "))}`);
+    parts.push(`Style: ${esc(sel.replaceAll(" ", " > "))}`);
+  }
+  if (statusMsg) {
+    parts.push(esc(statusMsg));
   }
-  if (statusMsg) parts.push(esc(statusMsg));
   statusbarEl.innerHTML = parts.join("  |  ") || "Jx Studio";
 }
 
 /** @param {Event} e */
 function _onStatusbarClick(e: Event) {
   const target = e.target as HTMLElement;
-  if (!target.classList.contains("sb-path-seg")) return;
+  if (!target.classList.contains("sb-path-seg")) {
+    return;
+  }
   const pathStr = target.dataset.path;
-  if (!pathStr) return;
+  if (!pathStr) {
+    return;
+  }
   try {
     const path = JSON.parse(pathStr);
     updateSession({ selection: path });
     renderOnly("leftPanel", "rightPanel", "canvas");
   } catch {
-    // ignore
+    // Ignore
   }
 }
 
@@ -105,7 +120,7 @@ function _onStatusbarClick(e: Event) {
  * @param {string} msg
  * @param {number} [duration]
  */
-export function statusMessage(msg: string, duration: number = 3000) {
+export function statusMessage(msg: string, duration = 3000) {
   statusMsg = msg;
   _rerender?.();
   clearTimeout(statusTimeout);

package/src/panels/style-inputs.ts

@@ -5,15 +5,15 @@ import { html } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { debouncedStyleCommit } from "../store";
 import { activeTab } from "../workspace/workspace";
-import { transactDoc, mutateUpdateStyle } from "../tabs/transact";
+import { mutateUpdateStyle, transactDoc } from "../tabs/transact";
 import { widgetForType as _widgetForType } from "../ui/widgets";
-import { kebabToLabel, friendlyNameToVar, varDisplayName } from "../utils/studio-utils";
+import { friendlyNameToVar, kebabToLabel, varDisplayName } from "../utils/studio-utils";
 import {
   TYPO_PREVIEW_PROPS,
+  camelToKebab,
   currentFontFamily,
-  getFontVars,
   getCssInitialMap,
-  camelToKebab,
+  getFontVars,
 } from "./style-utils";
 
 /**
@@ -38,7 +38,7 @@ export function renderKeywordInput(
       ? kebabToLabel(v)
       : v.replace(/^./, (c: string) => c.toUpperCase());
     const style = isTypoPreview ? `${cssProp}: ${v};${font ? ` font-family: ${font}` : ""}` : "";
-    return { value: v, label, style };
+    return { label, style, value: v };
   });
 
   return html`<jx-value-selector
@@ -54,16 +54,17 @@ export function renderKeywordInput(
 }
 
 /**
- * @param {{ enum?: string[] }} entry @param {string} prop @param {string} value @param {(value:
- *   string) => void} onChange
+ * @param {Record<string, unknown>} entry @param {string} prop @param {string | number | undefined}
+ *   value @param {(value: string) => void} onChange
  */
 export function renderSelectInput(
-  entry: { enum?: string[] },
+  entry: Record<string, unknown>,
   prop: string,
-  value: string,
+  value: string | number | undefined,
   onChange: (value: string) => void,
 ) {
-  return renderKeywordInput(entry.enum || [], prop, value, onChange);
+  const options = Array.isArray(entry.enum) ? (entry.enum as string[]) : [];
+  return renderKeywordInput(options, prop, String(value ?? ""), onChange);
 }
 
 /** @param {{ title: string; value: string }} preset @param {(value: string) => void} onChange */
@@ -87,13 +88,17 @@ function handleFontSelection(
   presets: { title: string; value: string }[],
   onChange: (value: string) => void,
 ) {
-  if (!val) return;
+  if (!val) {
+    return;
+  }
   if (val.startsWith("__preset__:")) {
     const title = val.slice("__preset__:".length);
     const preset = presets.find(
       (/** @type {{ title: string; value: string }} */ p) => p.title === title,
     );
-    if (preset) handleFontPresetSelection(preset, onChange);
+    if (preset) {
+      handleFontPresetSelection(preset, onChange);
+    }
     return;
   }
   if (val.startsWith("--")) {
@@ -132,9 +137,9 @@ export function buildFontOptions(
 ) {
   const opts: ({ value: string; label: string; style: string } | { divider: true })[] =
     fontVars.map((fv) => ({
-      value: fv.name,
       label: varDisplayName(fv.name, "--font-"),
       style: `font-family: ${fv.value}`,
+      value: fv.name,
     }));
   const unadded = presets.filter(
     (/** @type {{ title: string; value: string }} */ p) =>
@@ -143,12 +148,14 @@ export function buildFontOptions(
           fv.name === friendlyNameToVar(p.title, "--font-"),
       ),
   );
-  if (unadded.length > 0 && opts.length > 0) opts.push({ divider: true });
+  if (unadded.length > 0 && opts.length > 0) {
+    opts.push({ divider: true });
+  }
   for (const p of unadded) {
     opts.push({
-      value: "__preset__:" + p.title,
       label: p.title,
       style: `font-family: ${p.value}`,
+      value: `__preset__:${p.title}`,
     });
   }
   return opts;
@@ -163,19 +170,18 @@ export function buildFontOptions(
  * @param {string} prop @param {string} value @param {(value: string) => void} onChange
  */
 export function renderComboboxInput(
-  entry: {
-    enum?: string[];
-    examples?: string[];
-    presets?: { title: string; value: string }[];
-  },
+  entry: Record<string, unknown>,
   prop: string,
-  value: string,
+  rawValue: string | number | undefined,
   onChange: (value: string) => void,
 ) {
+  const value = String(rawValue ?? "");
   const cssInitialMap = getCssInitialMap();
   const fontVars = prop === "fontFamily" ? getFontVars() : [];
-  const presets = entry.presets || [];
-  const examples = entry.examples || [];
+  const presets = Array.isArray(entry.presets)
+    ? (entry.presets as { title: string; value: string }[])
+    : [];
+  const examples = Array.isArray(entry.examples) ? (entry.examples as string[]) : [];
 
   if (prop === "fontFamily") {
     const varMatch = typeof value === "string" && value.match(/^var\((--[^)]+)\)$/);
@@ -225,7 +231,7 @@ export function widgetForType(
   const cssInitialMap = getCssInitialMap();
   return _widgetForType(type, entry, prop, value, onCommit as (val: string | number) => void, {
     placeholder: opts.placeholder || cssInitialMap.get(prop) || "",
-    renderSelect: renderSelectInput,
     renderCombobox: renderComboboxInput,
+    renderSelect: renderSelectInput,
   });
 }