@jxsuite/studio 0.28.2 → 0.28.4

package/src/panels/pseudo-preview.ts

@@ -5,15 +5,16 @@
  */
 
 import { getNodeAtPath } from "../store";
+import { getNestedStyle } from "@jxsuite/schema/guards";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { getActivePanel, findCanvasElement } from "../canvas/canvas-helpers";
+import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
 
 import type { JxStyle } from "@jxsuite/schema/types";
 
 const pseudoStyleHost = document.createElement("div");
 pseudoStyleHost.style.display = "contents";
-(document.querySelector("sp-theme") || document.body).appendChild(pseudoStyleHost);
+(document.querySelector("sp-theme") || document.body).append(pseudoStyleHost);
 
 export function updateForcedPseudoPreview() {
   if (view.forcedStyleTag) {
@@ -21,39 +22,54 @@ export function updateForcedPseudoPreview() {
     view.forcedStyleTag = null;
   }
   if (view.forcedAttrEl) {
-    view.forcedAttrEl.removeAttribute("data-studio-forced");
+    delete view.forcedAttrEl.dataset.studioForced;
     view.forcedAttrEl = null;
   }
 
   const tab = activeTab.value;
   const sel = tab?.session.ui?.activeSelector;
-  if (!sel || !sel.startsWith(":") || !tab?.session.selection) return;
+  if (!sel || !sel.startsWith(":") || !tab?.session.selection) {
+    return;
+  }
 
   const panel = getActivePanel();
-  if (!panel) return;
+  if (!panel) {
+    return;
+  }
   const el = findCanvasElement(tab.session.selection, panel.canvas);
-  if (!el) return;
+  if (!el) {
+    return;
+  }
 
   const node = getNodeAtPath(tab.doc.document, tab.session.selection);
-  if (!node?.style) return;
-  const activeMedia = tab.session.ui.activeMedia;
-  const ctx: JxStyle = activeMedia ? node.style[`@${activeMedia}`] || {} : node.style;
-  const rules = ctx[sel];
-  if (!rules || typeof rules !== "object") return;
+  if (!node?.style) {
+    return;
+  }
+  const { activeMedia } = tab.session.ui;
+  const ctx: JxStyle = activeMedia
+    ? (getNestedStyle(node.style, `@${activeMedia}`) ?? {})
+    : node.style;
+  const rules = getNestedStyle(ctx, sel);
+  if (!rules) {
+    return;
+  }
 
   const cssProps = Object.entries(rules)
     .filter(([k]) => typeof rules[k] === "string" || typeof rules[k] === "number")
     .map(
-      ([k, v]) => `${k.replace(/[A-Z]/g, (c: string) => `-${c.toLowerCase()}`)}: ${v} !important`,
+      ([k, v]) =>
+        `${k.replaceAll(/[A-Z]/g, (c: string) => `-${c.toLowerCase()}`)}: ${v} !important`,
     )
     .join("; ");
-  if (!cssProps) return;
+  if (!cssProps) {
+    return;
+  }
 
-  el.setAttribute("data-studio-forced", "1");
+  el.dataset.studioForced = "1";
   view.forcedAttrEl = el;
 
   const tag = document.createElement("style");
   tag.textContent = `[data-studio-forced] { ${cssProps} }`;
-  pseudoStyleHost.appendChild(tag);
+  pseudoStyleHost.append(tag);
   view.forcedStyleTag = tag;
 }

package/src/panels/quick-search.ts

@@ -4,7 +4,7 @@ import { classMap } from "lit-html/directives/class-map.js";
 import { live } from "lit-html/directives/live.js";
 import { ref } from "lit-html/directives/ref.js";
 import { getPlatform } from "../platform";
-import { loadFormats, documentExtensions, formatByExtension } from "../format/format-host";
+import { documentExtensions, formatByExtension, loadFormats } from "../format/format-host";
 import { openFileInTab } from "../files/files";
 import { getRecentFiles, trackRecentFile } from "../recent-projects";
 import { getLayerSlot } from "../ui/layers";
@@ -67,45 +67,58 @@ function onInput(e: Event) {
 function onKeydown(e: KeyboardEvent) {
   const items = _query.trim() ? _results : getRecentFiles();
   switch (e.key) {
-    case "ArrowDown":
+    case "ArrowDown": {
       e.preventDefault();
       _selectedIndex = Math.min(_selectedIndex + 1, items.length - 1);
       renderOverlay();
       break;
-    case "ArrowUp":
+    }
+    case "ArrowUp": {
       e.preventDefault();
       _selectedIndex = Math.max(_selectedIndex - 1, 0);
       renderOverlay();
       break;
-    case "Enter":
+    }
+    case "Enter": {
       e.preventDefault();
-      if (items[_selectedIndex]) selectItem(items[_selectedIndex]);
+      if (items[_selectedIndex]) {
+        selectItem(items[_selectedIndex]);
+      }
       break;
-    case "Escape":
+    }
+    case "Escape": {
       e.preventDefault();
       closeQuickSearch();
       break;
+    }
+    default: {
+      break;
+    }
   }
 }
 
 function selectItem(item: { path: string; name?: string }) {
   closeQuickSearch();
-  const path = item.path;
-  trackRecentFile({ path, name: path.split("/").pop() || "" });
+  const { path } = item;
+  trackRecentFile({ name: path.split("/").pop() || "", path });
   openFileInTab(path);
 }
 
 function fileIcon(name: string) {
   const ext = name.split(".").pop()?.toLowerCase();
-  if (ext === "json") return html`<sp-icon-file-code size="s"></sp-icon-file-code>`;
-  if (ext && formatByExtension(ext)) return html`<sp-icon-file-txt size="s"></sp-icon-file-txt>`;
+  if (ext === "json") {
+    return html`<sp-icon-file-code size="s"></sp-icon-file-code>`;
+  }
+  if (ext && formatByExtension(ext)) {
+    return html`<sp-icon-file-txt size="s"></sp-icon-file-txt>`;
+  }
   return html`<sp-icon-document size="s"></sp-icon-document>`;
 }
 
 function dirPart(path: string) {
   const parts = path.split("/");
   parts.pop();
-  return parts.length ? parts.join("/") : "";
+  return parts.length > 0 ? parts.join("/") : "";
 }
 
 function renderOverlay() {
@@ -130,7 +143,9 @@ function renderOverlay() {
           @input=${onInput}
           @keydown=${onKeydown}
           ${ref((el) => {
-            if (el) requestAnimationFrame(() => (el as HTMLInputElement).focus());
+            if (el) {
+              requestAnimationFrame(() => (el as HTMLInputElement).focus());
+            }
           })}
         />
         <div class="quick-search-results">
@@ -140,7 +155,7 @@ function renderOverlay() {
           ${items.length === 0 && !_query.trim() && recentFiles.length === 0
             ? html`<div class="quick-search-empty">Type to search project files</div>`
             : nothing}
-          ${showRecent && recentFiles.length
+          ${showRecent && recentFiles.length > 0
             ? html`<div class="quick-search-section-label">Recently opened</div>`
             : nothing}
           ${items.map(

package/src/panels/right-panel.ts

@@ -6,9 +6,10 @@
  */
 
 import { html, render as litRender } from "lit-html";
-import { updateUi, rightPanel } from "../store";
+import { rightPanel, updateUi } from "../store";
 import { effect, effectScope } from "../reactivity";
-import { createPanelScheduler, type PanelScheduler } from "./panel-scheduler";
+import { createPanelScheduler } from "./panel-scheduler";
+import type { PanelScheduler } from "./panel-scheduler";
 import { activeTab } from "../workspace/workspace";
 import { tabIcon } from "./activity-bar";
 import { eventsSidebarTemplate } from "./events-panel";
@@ -17,13 +18,8 @@ import { isCustomElementDoc } from "./signals-panel";
 import { isColorPopoverOpen } from "../ui/color-selector";
 import { renderStylePanelTemplate } from "./style-panel";
 import { renderPropertiesPanelTemplate } from "./properties-panel";
-interface RightPanelCtx {
-  navigateToComponent: (path: string) => void;
-  getCanvasMode: () => string;
-  renderCanvas: () => void;
-  updateForcedPseudoPreview: () => void;
-}
 
+import type { EffectScope } from "@vue/reactivity";
 import {
   renderAiPanelTemplate,
   mountAiPanel,
@@ -31,9 +27,16 @@ import {
   registerRightPanelRender,
 } from "./ai-panel";
 
+interface RightPanelCtx {
+  navigateToComponent: (path: string) => void;
+  getCanvasMode: () => string;
+  renderCanvas: () => void;
+  updateForcedPseudoPreview: () => void;
+}
+
 let _ctx: RightPanelCtx | null = null;
 
-let _scope: import("@vue/reactivity").EffectScope | null = null;
+let _scope: EffectScope | null = null;
 
 let _scheduler: PanelScheduler | null = null;
 
@@ -47,16 +50,18 @@ export function mount(ctx: RightPanelCtx) {
   mountAiPanel();
   registerRightPanelRender(render);
   _scheduler = createPanelScheduler({
-    root: rightPanel,
-    render: _doRender,
     blockWhile: isColorPopoverOpen,
+    render: _doRender,
+    root: rightPanel,
   });
   _scheduler.bindFocus();
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
       const tab = activeTab.value;
-      if (!tab) return;
+      if (!tab) {
+        return;
+      }
       // Track properties the right panel reads
       void tab.doc.document;
       void tab.session.selection;
@@ -102,7 +107,9 @@ let _assistantContainer: HTMLElement | null = null;
 let _lastTab: string | null = null;
 
 function _ensureContainers() {
-  if (_propsContainer) return;
+  if (_propsContainer) {
+    return;
+  }
   _propsContainer = document.createElement("div");
   _propsContainer.className = "panel-body";
   _eventsContainer = document.createElement("div");
@@ -115,7 +122,9 @@ function _ensureContainers() {
 }
 
 function _doRender() {
-  if (!_ctx) return;
+  if (!_ctx) {
+    return;
+  }
   try {
     const ctx = _ctx as RightPanelCtx;
     const aTab = activeTab.value;
@@ -124,19 +133,19 @@ function _doRender() {
       return;
     }
     const S = {
-      ui: aTab.session.ui,
       document: aTab.doc.document,
       mode: aTab.doc.mode,
       selection: aTab.session.selection,
+      ui: aTab.session.ui,
     };
     const tab = S.ui.rightTab;
 
     // Render tabs header
     const panelTabs = [
-      { value: "properties", icon: "sp-icon-properties", label: "Properties" },
-      { value: "events", icon: "sp-icon-event", label: "Events" },
-      { value: "style", icon: "sp-icon-brush", label: "Style" },
-      { value: "assistant", icon: "sp-icon-chat", label: "Assistant" },
+      { icon: "sp-icon-properties", label: "Properties", value: "properties" },
+      { icon: "sp-icon-event", label: "Events", value: "events" },
+      { icon: "sp-icon-brush", label: "Style", value: "style" },
+      { icon: "sp-icon-chat", label: "Assistant", value: "assistant" },
     ];
     const tabsT = html`
       <div class="panel-tabs">
@@ -183,7 +192,9 @@ function _doRender() {
     // Render tabs into the right panel, append containers
     litRender(tabsT, rightPanel);
     for (const c of containers) {
-      if (!c.parentNode) rightPanel.appendChild(c);
+      if (!c.parentNode) {
+        rightPanel.append(c);
+      }
     }
 
     // Only render the active panel's content
@@ -204,16 +215,16 @@ function _doRender() {
     } else if (tab === "style") {
       try {
         litRender(renderStylePanelTemplate({ getCanvasMode: ctx.getCanvasMode }), _styleContainer!);
-      } catch (e) {
-        console.error("[renderStylePanelTemplate]", e);
+      } catch (error) {
+        console.error("[renderStylePanelTemplate]", error);
       }
     } else if (tab === "assistant") {
       litRender(renderAiPanelTemplate(), _assistantContainer!);
     }
 
     _lastTab = tab;
-  } catch (e) {
-    console.error("right-panel render error:", e);
+  } catch (error) {
+    console.error("right-panel render error:", error);
   }
   requestAnimationFrame(() => mountQuikChat());
   _ctx.updateForcedPseudoPreview();

package/src/panels/shared.ts

@@ -12,12 +12,14 @@ import type { JxMutableNode } from "@jxsuite/schema/types";
  * @param {string} name
  */
 export function mediaDisplayName(name: string) {
-  if (name === "--") return "Base";
+  if (name === "--") {
+    return "Base";
+  }
   return (
     name
       .replace(/^--/, "")
-      .replace(/-/g, " ")
-      .replace(/\b\w/g, (c: string) => c.toUpperCase()) || name
+      .replaceAll("-", " ")
+      .replaceAll(/\b\w/g, (c: string) => c.toUpperCase()) || name
   );
 }
 
@@ -28,11 +30,13 @@ export const unsafeTags = new Set(["script", "style", "link", "iframe", "object"
  *
  * @param {string} tag
  */
-export function defaultDef(tag: string) {
+export function defaultDef(tag: string): JxMutableNode {
   const def: JxMutableNode = { tagName: tag };
-  if (/^h[1-6]$/.test(tag)) def.textContent = "Heading";
-  else if (tag === "p") def.textContent = "Paragraph text";
-  else if (
+  if (/^h[1-6]$/.test(tag)) {
+    def.textContent = "Heading";
+  } else if (tag === "p") {
+    def.textContent = "Paragraph text";
+  } else if (
     tag === "span" ||
     tag === "strong" ||
     tag === "em" ||
@@ -44,57 +48,70 @@ export function defaultDef(tag: string) {
     tag === "sub" ||
     tag === "sup" ||
     tag === "time"
-  )
+  ) {
     def.textContent = "Text";
-  else if (tag === "a") {
+  } else if (tag === "a") {
     def.textContent = "Link";
     def.attributes = { href: "#" };
-  } else if (tag === "button") def.textContent = "Button";
-  else if (tag === "label") def.textContent = "Label";
-  else if (tag === "legend") def.textContent = "Legend";
-  else if (tag === "caption") def.textContent = "Caption";
-  else if (tag === "summary") def.textContent = "Summary";
-  else if (
+  } else if (tag === "button") {
+    def.textContent = "Button";
+  } else if (tag === "label") {
+    def.textContent = "Label";
+  } else if (tag === "legend") {
+    def.textContent = "Legend";
+  } else if (tag === "caption") {
+    def.textContent = "Caption";
+  } else if (tag === "summary") {
+    def.textContent = "Summary";
+  } else if (
     tag === "li" ||
     tag === "dt" ||
     tag === "dd" ||
     tag === "th" ||
     tag === "td" ||
     tag === "option"
-  )
+  ) {
     def.textContent = "Item";
-  else if (tag === "blockquote") def.textContent = "Quote";
-  else if (tag === "pre") def.textContent = "Preformatted text";
-  else if (tag === "input") def.attributes = { type: "text", placeholder: "Enter text..." };
-  else if (tag === "img") def.attributes = { alt: "Image" };
-  else if (tag === "iframe") def.attributes = { src: "" };
-  else if (tag === "select") def.children = [{ tagName: "option", textContent: "Option 1" }];
-  else if (tag === "ul" || tag === "ol") def.children = [{ tagName: "li", textContent: "Item" }];
-  else if (tag === "dl")
+  } else if (tag === "blockquote") {
+    def.textContent = "Quote";
+  } else if (tag === "pre") {
+    def.textContent = "Preformatted text";
+  } else if (tag === "input") {
+    def.attributes = { placeholder: "Enter text...", type: "text" };
+  } else if (tag === "img") {
+    def.attributes = { alt: "Image" };
+  } else if (tag === "iframe") {
+    def.attributes = { src: "" };
+  } else if (tag === "select") {
+    def.children = [{ tagName: "option", textContent: "Option 1" }];
+  } else if (tag === "ul" || tag === "ol") {
+    def.children = [{ tagName: "li", textContent: "Item" }];
+  } else if (tag === "dl") {
     def.children = [
       { tagName: "dt", textContent: "Term" },
       { tagName: "dd", textContent: "Definition" },
     ];
-  else if (tag === "table")
+  } else if (tag === "table") {
     def.children = [
       {
-        tagName: "thead",
         children: [
           {
-            tagName: "tr",
             children: [{ tagName: "th", textContent: "Header" }],
+            tagName: "tr",
           },
         ],
+        tagName: "thead",
       },
       {
+        children: [{ children: [{ tagName: "td", textContent: "Cell" }], tagName: "tr" }],
         tagName: "tbody",
-        children: [{ tagName: "tr", children: [{ tagName: "td", textContent: "Cell" }] }],
       },
     ];
-  else if (tag === "details")
+  } else if (tag === "details") {
     def.children = [
       { tagName: "summary", textContent: "Summary" },
       { tagName: "p", textContent: "Detail content" },
     ];
+  }
   return def;
 }