@jxsuite/studio 0.10.2 → 0.13.0

package/src/panels/right-panel.js

@@ -5,61 +5,100 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { getState, updateUi, rightPanel, subscribe } from "../store.js";
+import { updateUi, rightPanel } from "../store.js";
+import { effect, effectScope } from "../reactivity.js";
+import { activeTab } from "../workspace/workspace.js";
 import { tabIcon } from "./activity-bar.js";
 import { eventsSidebarTemplate } from "./events-panel.js";
 import { isCustomElementDoc } from "./signals-panel.js";
-import { ensureLitState } from "./shared.js";
+
 import { isColorPopoverOpen } from "../ui/color-selector.js";
 import { renderStylePanelTemplate } from "./style-panel.js";
 import { renderPropertiesPanelTemplate } from "./properties-panel.js";
 
-/** @type {any} */
+/**
+ * @typedef {{
+ *   navigateToComponent: (path: string) => void;
+ *   getCanvasMode: () => string;
+ *   renderCanvas: () => void;
+ *   updateForcedPseudoPreview: () => void;
+ * }} RightPanelCtx
+ */
+
+/** @type {RightPanelCtx | null} */
 let _ctx = null;
 
-/** @type {(() => void) | null} */
-let _unsub = null;
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
+
+let _rendering = false;
+let _scheduled = false;
 
 /**
  * Mount the right panel.
  *
- * @param {any} ctx — { propertiesSidebarTemplate, getCanvasMode, renderCanvas,
- *   updateForcedPseudoPreview }
+ * @param {RightPanelCtx} ctx
  */
 export function mount(ctx) {
   _ctx = ctx;
-  _unsub = subscribe((change) => {
-    if (!change.selection && !change.ui && !change.doc) return;
-
-    const colorPopoverOpen = isColorPopoverOpen();
-    const activeTag = document.activeElement?.tagName;
-    const rightHasFocus =
-      !colorPopoverOpen &&
-      rightPanel.contains(document.activeElement) &&
-      (activeTag === "INPUT" ||
-        activeTag === "TEXTAREA" ||
-        activeTag === "SP-TEXTFIELD" ||
-        activeTag === "SP-NUMBER-FIELD" ||
-        activeTag === "SP-PICKER" ||
-        activeTag === "SP-COMBOBOX" ||
-        activeTag === "SP-SEARCH");
-
-    if (!rightHasFocus || change.selection || change.ui) {
-      render();
-    }
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (!tab) return;
+      // Track properties the right panel reads
+      void tab.doc.document;
+      void tab.session.selection;
+      void tab.session.ui.rightTab;
+      void tab.session.ui.activeMedia;
+      void tab.session.ui.activeSelector;
+      void tab.session.ui.styleSections;
+      void tab.session.ui.styleShorthands;
+      void tab.session.ui.styleFilter;
+      void tab.session.ui.styleFilterActive;
+      void tab.session.ui.inspectorSections;
+
+      const colorPopoverOpen = isColorPopoverOpen();
+      const activeTag = document.activeElement?.tagName;
+      const rightHasFocus =
+        !colorPopoverOpen &&
+        rightPanel.contains(document.activeElement) &&
+        (activeTag === "INPUT" ||
+          activeTag === "TEXTAREA" ||
+          activeTag === "SP-TEXTFIELD" ||
+          activeTag === "SP-NUMBER-FIELD" ||
+          activeTag === "SP-PICKER" ||
+          activeTag === "SP-COMBOBOX" ||
+          activeTag === "SP-SEARCH");
+
+      if (!rightHasFocus) {
+        render();
+      }
+    });
   });
 }
 
 export function unmount() {
-  _unsub?.();
-  _unsub = null;
+  _scope?.stop();
+  _scope = null;
   _ctx = null;
 }
 
 export function render() {
   if (!_ctx) return;
+  if (_rendering) return;
+  if (!_scheduled) {
+    _scheduled = true;
+    queueMicrotask(_flush);
+  }
+}
+
+function _flush() {
+  _scheduled = false;
+  if (!_ctx) return;
+  if (_rendering) return;
+  _rendering = true;
   try {
-    ensureLitState(rightPanel);
     litRender(rightPanelTemplate(), rightPanel);
   } catch (e) {
     console.error("right-panel render error:", e);
@@ -71,12 +110,22 @@ export function render() {
     } catch (e2) {
       console.error("right-panel retry failed:", e2);
     }
+  } finally {
+    _rendering = false;
   }
   _ctx.updateForcedPseudoPreview();
 }
 
 function rightPanelTemplate() {
-  const S = getState();
+  const ctx = /** @type {RightPanelCtx} */ (_ctx);
+  const aTab = activeTab.value;
+  if (!aTab) return nothing;
+  const S = /** @type {any} */ ({
+    ui: aTab.session.ui,
+    document: aTab.doc.document,
+    mode: aTab.doc.mode,
+    selection: aTab.session.selection,
+  });
   const tab = S.ui.rightTab;
 
   const panelTabs = [
@@ -90,7 +139,7 @@ function rightPanelTemplate() {
       <sp-tabs
         selected=${tab}
         quiet
-        @change=${(/** @type {any} */ e) => {
+        @change=${(/** @type {Event & { target: { selected: string } }} */ e) => {
           const sel = e.target.selected;
           if (sel && sel !== tab) {
             updateUi("rightTab", sel);
@@ -108,19 +157,18 @@ function rightPanelTemplate() {
     </div>
   `;
 
-  /** @type {any} */
+  /** @type {import("lit-html").TemplateResult | typeof nothing} */
   let bodyT = nothing;
   if (tab === "properties") {
-    bodyT = renderPropertiesPanelTemplate({ navigateToComponent: _ctx.navigateToComponent });
+    bodyT = renderPropertiesPanelTemplate({ navigateToComponent: ctx.navigateToComponent });
   } else if (tab === "events") {
-    bodyT = eventsSidebarTemplate(S, {
+    bodyT = eventsSidebarTemplate({
       isCustomElementDoc: () => isCustomElementDoc(S),
-      renderCanvas: _ctx.renderCanvas,
     });
   } else if (tab === "style") {
     try {
-      bodyT = renderStylePanelTemplate({ getCanvasMode: _ctx.getCanvasMode });
-    } catch (/** @type {any} */ e) {
+      bodyT = renderStylePanelTemplate({ getCanvasMode: ctx.getCanvasMode });
+    } catch (/** @type {unknown} */ e) {
       console.error("[renderStylePanelTemplate]", e);
     }
   }

package/src/panels/shared.js

@@ -18,28 +18,6 @@ export function mediaDisplayName(name) {
   );
 }
 
-/**
- * Ensure Lit's internal ChildPart markers are valid. If corrupted, clears the container so Lit
- * rebuilds from scratch on the next render.
- *
- * @param {HTMLElement} container
- */
-export function ensureLitState(container) {
-  // @ts-ignore — Lit stores a ChildPart on this private property
-  const part = container["_$litPart$"];
-  if (!part) return;
-  const start = part._$startNode;
-  const end = part._$endNode;
-  const startBad = start && start.parentNode !== container;
-  const endBad = (end && end !== container && end.parentNode !== container) || (!end && start);
-  if (startBad || endBad) {
-    console.warn("ensureLitState: clearing corrupted Lit state on", container.id || container);
-    container.textContent = "";
-    // @ts-ignore
-    delete container["_$litPart$"];
-  }
-}
-
 export const unsafeTags = new Set(["script", "style", "link", "iframe", "object", "embed"]);
 
 /**