@jxsuite/studio 0.21.4 → 0.22.0

package/src/panels/right-panel.js

@@ -4,7 +4,7 @@
  * to avoid moving ~2000 lines in one step.
  */
 
-import { html, render as litRender, nothing } from "lit-html";
+import { html, render as litRender } from "lit-html";
 import { updateUi, rightPanel } from "../store.js";
 import { effect, effectScope } from "../reactivity.js";
 import { activeTab } from "../workspace/workspace.js";
@@ -41,8 +41,17 @@ let _rendering = false;
 let _scheduled = false;
 let _hasFocus = false;
 
-function _onFocusIn() {
-  _hasFocus = true;
+function _isTextInput(/** @type {Element | null} */ el) {
+  if (!el) return false;
+  const tag = el.tagName.toLowerCase();
+  if (tag === "input" || tag === "textarea") return true;
+  if (tag === "sp-textfield" || tag === "sp-number-field" || tag === "sp-search") return true;
+  if (el.shadowRoot?.activeElement) return _isTextInput(el.shadowRoot.activeElement);
+  return false;
+}
+
+function _onFocusIn(/** @type {FocusEvent} */ e) {
+  _hasFocus = _isTextInput(/** @type {Element} */ (e.target));
 }
 
 function _onFocusOut() {
@@ -92,6 +101,11 @@ export function unmount() {
   rightPanel.removeEventListener("focusin", _onFocusIn);
   rightPanel.removeEventListener("focusout", _onFocusOut);
   _hasFocus = false;
+  _propsContainer = null;
+  _eventsContainer = null;
+  _styleContainer = null;
+  _assistantContainer = null;
+  _lastTab = null;
 }
 
 export function render() {
@@ -103,104 +117,142 @@ export function render() {
   }
 }
 
+/** @type {HTMLElement | null} */
+let _propsContainer = null;
+/** @type {HTMLElement | null} */
+let _eventsContainer = null;
+/** @type {HTMLElement | null} */
+let _styleContainer = null;
+/** @type {HTMLElement | null} */
+let _assistantContainer = null;
+/** @type {string | null} */
+let _lastTab = null;
+
+function _ensureContainers() {
+  if (_propsContainer) return;
+  _propsContainer = document.createElement("div");
+  _propsContainer.className = "panel-body";
+  _eventsContainer = document.createElement("div");
+  _eventsContainer.className = "panel-body";
+  _styleContainer = document.createElement("div");
+  _styleContainer.className = "panel-body";
+  _assistantContainer = document.createElement("div");
+  _assistantContainer.className = "panel-body";
+  _assistantContainer.style.cssText = "display:flex;flex-direction:column;overflow:hidden";
+}
+
 function _flush() {
   _scheduled = false;
   if (!_ctx) return;
   if (_rendering) return;
   _rendering = true;
   try {
-    litRender(rightPanelTemplate(), rightPanel);
-  } catch (e) {
-    console.error("right-panel render error:", e);
-    try {
+    const ctx = /** @type {RightPanelCtx} */ (_ctx);
+    const aTab = activeTab.value;
+    if (!aTab) {
       rightPanel.textContent = "";
-      // @ts-ignore
-      delete rightPanel["_$litPart$"];
-      litRender(rightPanelTemplate(), rightPanel);
-    } catch (e2) {
-      console.error("right-panel retry failed:", e2);
+      return;
+    }
+    const S = /**
+     * @type {{
+     *   ui: Record<string, unknown>;
+     *   document: JxMutableNode;
+     *   mode: string;
+     *   selection: (string | number)[] | null;
+     * }}
+     */ ({
+      ui: aTab.session.ui,
+      document: aTab.doc.document,
+      mode: aTab.doc.mode,
+      selection: aTab.session.selection,
+    });
+    const tab = /** @type {string} */ (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" },
+    ];
+    const tabsT = html`
+      <div class="panel-tabs">
+        <sp-tabs
+          selected=${tab}
+          quiet
+          @change=${(/** @type {Event & { target: { selected: string } }} */ e) => {
+            const sel = e.target.selected;
+            if (sel && sel !== tab) {
+              updateUi("rightTab", sel);
+              render();
+            }
+          }}
+        >
+          ${panelTabs.map(
+            (t) => html`
+              <sp-tab value=${t.value} title=${t.label} aria-label=${t.label}>
+                ${tabIcon(t.icon, "xs")}
+              </sp-tab>
+            `,
+          )}
+        </sp-tabs>
+      </div>
+    `;
+
+    _ensureContainers();
+    const containers = /** @type {HTMLElement[]} */ ([
+      _propsContainer,
+      _eventsContainer,
+      _styleContainer,
+      _assistantContainer,
+    ]);
+    const tabKeys = ["properties", "events", "style", "assistant"];
+
+    // Show/hide containers
+    for (let i = 0; i < containers.length; i++) {
+      if (tabKeys[i] === tab) {
+        containers[i].style.display = tabKeys[i] === "assistant" ? "flex" : "";
+      } else {
+        containers[i].style.display = "none";
+      }
+    }
+
+    // Render tabs into the right panel, append containers
+    litRender(tabsT, rightPanel);
+    for (const c of containers) {
+      if (!c.parentNode) rightPanel.appendChild(c);
+    }
+
+    // Only render the active panel's content
+    if (tab === "properties") {
+      litRender(
+        renderPropertiesPanelTemplate({ navigateToComponent: ctx.navigateToComponent }),
+        /** @type {HTMLElement} */ (_propsContainer),
+      );
+    } else if (tab === "events") {
+      litRender(
+        eventsSidebarTemplate({ isCustomElementDoc: () => isCustomElementDoc(S) }),
+        /** @type {HTMLElement} */ (_eventsContainer),
+      );
+    } else if (tab === "style") {
+      try {
+        litRender(
+          renderStylePanelTemplate({ getCanvasMode: ctx.getCanvasMode }),
+          /** @type {HTMLElement} */ (_styleContainer),
+        );
+      } catch (/** @type {unknown} */ e) {
+        console.error("[renderStylePanelTemplate]", e);
+      }
+    } else if (tab === "assistant") {
+      litRender(renderAiPanelTemplate(), /** @type {HTMLElement} */ (_assistantContainer));
     }
+
+    _lastTab = tab;
+  } catch (e) {
+    console.error("right-panel render error:", e);
   } finally {
     _rendering = false;
   }
   requestAnimationFrame(() => mountQuikChat());
   _ctx.updateForcedPseudoPreview();
 }
-
-function rightPanelTemplate() {
-  const ctx = /** @type {RightPanelCtx} */ (_ctx);
-  const aTab = activeTab.value;
-  if (!aTab) return nothing;
-  const S = /**
-   * @type {{
-   *   ui: Record<string, unknown>;
-   *   document: JxMutableNode;
-   *   mode: string;
-   *   selection: (string | number)[] | null;
-   * }}
-   */ ({
-    ui: aTab.session.ui,
-    document: aTab.doc.document,
-    mode: aTab.doc.mode,
-    selection: aTab.session.selection,
-  });
-  const tab = S.ui.rightTab;
-
-  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" },
-  ];
-
-  const tabsT = html`
-    <div class="panel-tabs">
-      <sp-tabs
-        selected=${tab}
-        quiet
-        @change=${(/** @type {Event & { target: { selected: string } }} */ e) => {
-          const sel = e.target.selected;
-          if (sel && sel !== tab) {
-            updateUi("rightTab", sel);
-          }
-        }}
-      >
-        ${panelTabs.map(
-          (t) => html`
-            <sp-tab value=${t.value} title=${t.label} aria-label=${t.label}>
-              ${tabIcon(t.icon, "xs")}
-            </sp-tab>
-          `,
-        )}
-      </sp-tabs>
-    </div>
-  `;
-
-  /** @type {import("lit-html").TemplateResult | typeof nothing} */
-  let bodyT = nothing;
-  if (tab === "properties") {
-    bodyT = renderPropertiesPanelTemplate({ navigateToComponent: ctx.navigateToComponent });
-  } else if (tab === "events") {
-    bodyT = eventsSidebarTemplate({
-      isCustomElementDoc: () => isCustomElementDoc(S),
-    });
-  } else if (tab === "style") {
-    try {
-      bodyT = renderStylePanelTemplate({ getCanvasMode: ctx.getCanvasMode });
-    } catch (/** @type {unknown} */ e) {
-      console.error("[renderStylePanelTemplate]", e);
-    }
-  } else if (tab === "assistant") {
-    bodyT = renderAiPanelTemplate();
-  }
-
-  return html`
-    ${tabsT}
-    <div
-      class="panel-body"
-      style=${tab === "assistant" ? "display:flex;flex-direction:column;overflow:hidden" : ""}
-    >
-      ${bodyT}
-    </div>
-  `;
-}