@jxsuite/studio 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -59,7 +59,7 @@
     "@spectrum-web-components/textfield": "^1.12.0",
     "@spectrum-web-components/theme": "^1.12.0",
     "@spectrum-web-components/tooltip": "^1.12.0",
-    "lit-html": "^3.3.2",
+    "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
     "remark-directive": "^4.0.0",
     "remark-frontmatter": "^5.0.0",

package/src/panels/overlays.js

@@ -4,12 +4,15 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { getState, canvasPanels, pathsEqual } from "../store.js";
+import { getState, canvasPanels, pathsEqual, subscribe } from "../store.js";
 import { view } from "../view.js";
 
 /** @type {any} */
 let _ctx = null;
 
+/** @type {(() => void) | null} */
+let _unsub = null;
+
 /**
  * Mount the overlays panel.
  *
@@ -18,9 +21,14 @@ let _ctx = null;
  */
 export function mount(ctx) {
   _ctx = ctx;
+  _unsub = subscribe((change) => {
+    if (change.selection || change.hover || change.mode || change.ui || change.doc) render();
+  });
 }
 
 export function unmount() {
+  _unsub?.();
+  _unsub = null;
   _ctx = null;
 }
 

package/src/panels/right-panel.js

@@ -5,15 +5,19 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { getState, updateUi, rightPanel } from "../store.js";
+import { getState, updateUi, rightPanel, subscribe } from "../store.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";
 
 /** @type {any} */
 let _ctx = null;
 
+/** @type {(() => void) | null} */
+let _unsub = null;
+
 /**
  * Mount the right panel.
  *
@@ -22,9 +26,31 @@ let _ctx = null;
  */
 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();
+    }
+  });
 }
 
 export function unmount() {
+  _unsub?.();
+  _unsub = null;
   _ctx = null;
 }
 

package/src/panels/statusbar.js

@@ -1,6 +1,6 @@
 /** Statusbar — status message display for Jx Studio */
 
-import { statusbarEl, getNodeAtPath, nodeLabel } from "../store.js";
+import { statusbarEl, getNodeAtPath, nodeLabel, getState, subscribe } from "../store.js";
 
 // ─── Module state ────────────────────────────────────────────────────────────
 
@@ -9,6 +9,8 @@ let statusMsg = "";
 let statusTimeout;
 /** @type {(() => void) | null} */
 let _rerender = null;
+/** @type {(() => void) | null} */
+let _unsub = null;
 
 /**
  * Register the callback used to re-render the statusbar. Called once from studio.js during init.
@@ -19,6 +21,18 @@ export function setStatusbarRenderer(fn) {
   _rerender = fn;
 }
 
+/** Subscribe the statusbar to state changes. */
+export function mountStatusbar() {
+  _unsub = subscribe((change) => {
+    if (change.selection || change.mode || change.doc) renderStatusbar(getState());
+  });
+}
+
+export function unmountStatusbar() {
+  _unsub?.();
+  _unsub = null;
+}
+
 // ─── Statusbar ───────────────────────────────────────────────────────────────
 
 /**

package/src/panels/toolbar.js

@@ -4,7 +4,7 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { getState, update, updateSession, updateUi, undo, redo } from "../store.js";
+import { getState, update, updateSession, updateUi, undo, redo, subscribe } from "../store.js";
 import { getEffectiveMedia } from "../site-context.js";
 import { mediaDisplayName } from "./shared.js";
 import { view } from "../view.js";
@@ -15,6 +15,9 @@ let _rootEl = null;
 /** @type {any} */
 let _ctx = null;
 
+/** @type {(() => void) | null} */
+let _unsub = null;
+
 const toolbarIconMap = /** @type {Record<string, any>} */ ({
   "sp-icon-folder-open": html`<sp-icon-folder-open slot="icon"></sp-icon-folder-open>`,
   "sp-icon-save-floppy": html`<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>`,
@@ -56,9 +59,12 @@ function tbBtnTpl(label, onClick, iconTag) {
 export function mount(rootEl, ctx) {
   _rootEl = rootEl;
   _ctx = ctx;
+  _unsub = subscribe(() => render());
 }
 
 export function unmount() {
+  _unsub?.();
+  _unsub = null;
   _rootEl = null;
   _ctx = null;
 }

package/src/store.js

@@ -324,6 +324,41 @@ export function updateUi(field, value) {
   _updateSessionFn({ ui: { [field]: value } });
 }
 
+// ─── Subscription system ────────────────────────────────────────────────────
+// Panels subscribe to state changes and decide when to re-render, rather than
+// being called unconditionally from _update/_updateSession.
+
+/** @typedef {{ doc: boolean; selection: boolean; hover: boolean; ui: boolean; mode: boolean }} Change */
+
+/** @type {Set<(change: Change) => void>} */
+const _subscribers = new Set();
+
+/**
+ * Subscribe to state changes. Returns an unsubscribe function.
+ *
+ * @param {(change: Change) => void} fn
+ * @returns {() => void}
+ */
+export function subscribe(fn) {
+  _subscribers.add(fn);
+  return () => _subscribers.delete(fn);
+}
+
+/**
+ * Notify all subscribers of a state change.
+ *
+ * @param {Change} change
+ */
+export function notify(change) {
+  for (const fn of _subscribers) {
+    try {
+      fn(change);
+    } catch (e) {
+      console.error("Subscriber failed:", e);
+    }
+  }
+}
+
 /** @type {Function[]} */
 const _updateMiddleware = [];