@jxsuite/studio 0.11.0 → 0.14.0

package/src/store.js

@@ -8,35 +8,10 @@
 
 // ─── Re-exports from state.js ────────────────────────────────────────────────
 
+import { activeTab } from "./workspace/workspace.js";
+
 export {
   createState,
-  selectNode,
-  hoverNode,
-  undo,
-  redo,
-  insertNode,
-  removeNode,
-  duplicateNode,
-  wrapNode,
-  moveNode,
-  updateProperty,
-  updateStyle,
-  updateAttribute,
-  addDef,
-  removeDef,
-  updateDef,
-  renameDef,
-  updateMediaStyle,
-  updateMedia,
-  updateNestedStyle,
-  updateMediaNestedStyle,
-  pushDocument,
-  popDocument,
-  updateProp,
-  addSwitchCase,
-  removeSwitchCase,
-  renameSwitchCase,
-  applyMutation,
   getNodeAtPath,
   flattenTree,
   nodeLabel,
@@ -48,8 +23,6 @@ export {
   projectState,
   setProjectState,
   updateFrontmatter,
-  toFlat,
-  fromFlat,
 } from "./state.js";
 
 // ─── DOM shortcuts & element refs ────────────────────────────────────────────
@@ -57,12 +30,12 @@ export {
 export const $ = (/** @type {string} */ sel) => document.querySelector(sel);
 export const _$$ = (/** @type {string} */ sel) => document.querySelectorAll(sel);
 
-export const canvasWrap = /** @type {any} */ (document.querySelector("#canvas-wrap"));
-export const activityBar = /** @type {any} */ (document.querySelector("#activity-bar"));
-export const leftPanel = /** @type {any} */ (document.querySelector("#left-panel"));
-export const rightPanel = /** @type {any} */ (document.querySelector("#right-panel"));
-export const toolbarEl = /** @type {any} */ (document.querySelector("#toolbar"));
-export const statusbarEl = /** @type {any} */ (document.querySelector("#statusbar"));
+export const canvasWrap = /** @type {HTMLElement} */ (document.querySelector("#canvas-wrap"));
+export const activityBar = /** @type {HTMLElement} */ (document.querySelector("#activity-bar"));
+export const leftPanel = /** @type {HTMLElement} */ (document.querySelector("#left-panel"));
+export const rightPanel = /** @type {HTMLElement} */ (document.querySelector("#right-panel"));
+export const toolbarEl = /** @type {HTMLElement} */ (document.querySelector("#toolbar"));
+export const statusbarEl = /** @type {HTMLElement} */ (document.querySelector("#statusbar"));
 
 // ─── Shared containers (mutated in place by owner modules) ───────────────────
 
@@ -70,9 +43,19 @@ export const statusbarEl = /** @type {any} */ (document.querySelector("#statusba
 export const elToPath = new WeakMap();
 
 /**
- * Canvas panels: Array<{ mediaName, canvas, overlay, overlayClk, viewport, dropLine }>
+ * Canvas panels: Array<{ mediaName, canvas, overlay, overlayClk, viewport, dropLine, element,
+ * _width }>
  *
- * @type {any[]}
+ * @type {{
+ *   mediaName: string;
+ *   canvas: HTMLElement;
+ *   overlay: HTMLElement;
+ *   overlayClk: HTMLElement;
+ *   viewport: HTMLElement;
+ *   dropLine: HTMLElement;
+ *   element?: HTMLElement | null;
+ *   _width?: number | null;
+ * }[]}
  */
 export const canvasPanels = [];
 
@@ -110,7 +93,7 @@ export const COMMON_SELECTORS = [
   "::placeholder",
 ];
 
-/** @param {any} k */
+/** @param {string} k */
 export function isNestedSelector(k) {
   return k.startsWith(":") || k.startsWith(".") || k.startsWith("&") || k.startsWith("[");
 }
@@ -120,12 +103,12 @@ export function isNestedSelector(k) {
 const _styleDebounceTimers = new Map();
 
 /**
- * @param {any} prop
- * @param {any} ms
- * @param {any} fn
+ * @param {string} prop
+ * @param {number} ms
+ * @param {Function} fn
  */
 export function debouncedStyleCommit(prop, ms, fn) {
-  return (/** @type {any[]} */ ...args) => {
+  return (/** @type {unknown[]} */ ...args) => {
     clearTimeout(_styleDebounceTimers.get(prop));
     _styleDebounceTimers.set(
       prop,
@@ -146,13 +129,13 @@ export function cancelStyleDebounce(/** @type {string} */ prop) {
 /**
  * Strip all on* event handler properties from a Jx document tree (deep clone).
  *
- * @param {any} node
- * @returns {any}
+ * @param {import("./state.js").JxNode | unknown} node
+ * @returns {import("./state.js").JxNode | unknown}
  */
 export function stripEventHandlers(node) {
   if (!node || typeof node !== "object") return node;
   if (Array.isArray(node)) return node.map(stripEventHandlers);
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, unknown>} */
   const out = {};
   for (const [k, v] of Object.entries(node)) {
     if (k.startsWith("on") && typeof v === "object" && (v?.$ref || v?.$prototype === "Function"))
@@ -160,12 +143,12 @@ export function stripEventHandlers(node) {
     if (k === "children") {
       out.children = Array.isArray(v) ? v.map(stripEventHandlers) : stripEventHandlers(v);
     } else if (k === "cases" && typeof v === "object") {
-      /** @type {Record<string, any>} */
+      /** @type {Record<string, unknown>} */
       const cases = {};
       for (const [ck, cv] of Object.entries(v)) cases[ck] = stripEventHandlers(cv);
       out.cases = cases;
     } else if (k === "state" && typeof v === "object" && v !== null) {
-      /** @type {Record<string, any>} */
+      /** @type {Record<string, unknown>} */
       const state = {};
       for (const [sk, sv] of Object.entries(v)) {
         if (sv && typeof sv === "object" && sv.timing === "server") continue;
@@ -224,197 +207,56 @@ export function renderOnly(...names) {
   }
 }
 
-// ─── Update dispatch (late-bound) ────────────────────────────────────────────
-// studio.js registers the real update implementation via setUpdateFn() during bootstrap.
-// This allows extracted modules to import `update` from store.js without circular deps.
-
-/** @type {Function} */
-let _updateFn = () => {
-  throw new Error("update() called before setUpdateFn() — bootstrap not complete");
-};
-
-/** @type {Function} */
-let _getStateFn = () => null;
+// ─── Session dispatch ──────────────────────────────────────────────────────
 
 /**
- * Register the update implementation. Called by studio.js at module load time.
+ * Dispatch a session-only state update (selection, hover, ui). Writes directly to reactive tab.
  *
- * @param {Function} fn
- */
-export function setUpdateFn(fn) {
-  _updateFn = fn;
-}
-
-/**
- * Register the state getter. Called by studio.js at module load time.
- *
- * @param {Function} fn — returns current S
- */
-export function setGetStateFn(fn) {
-  _getStateFn = fn;
-}
-
-/**
- * Get the current state (live, not stale).
- *
- * @returns {any}
- */
-export function getState() {
-  return _getStateFn();
-}
-
-/**
- * Dispatch a state update + selective re-render.
- *
- * @param {any} newState
- */
-export function update(newState) {
-  _updateFn(newState);
-}
-
-// ─── Session dispatch (late-bound) ──────────────────────────────────────────
-// Lightweight dispatcher for session-only changes (selection, hover, ui).
-// Does NOT trigger autosave middleware or push history.
-
-/** @type {Function} */
-let _updateSessionFn = () => {
-  throw new Error("updateSession() called before setUpdateSessionFn() — bootstrap not complete");
-};
-
-/** @type {Function} */
-let _getDocFn = () => null;
-
-/** @type {Function} */
-let _getSessionFn = () => null;
-
-/** @param {Function} fn */
-export function setUpdateSessionFn(fn) {
-  _updateSessionFn = fn;
-}
-
-/** @param {Function} fn */
-export function setGetDocFn(fn) {
-  _getDocFn = fn;
-}
-
-/** @param {Function} fn */
-export function setGetSessionFn(fn) {
-  _getSessionFn = fn;
-}
-
-/** @returns {any} */
-export function getDoc() {
-  return _getDocFn();
-}
-
-/** @returns {any} */
-export function getSession() {
-  return _getSessionFn();
-}
-
-/**
- * Dispatch a session-only state update (selection, hover, ui). Does not trigger autosave.
- *
- * @param {any} patch — partial session object, e.g. { ui: { zoom: 2 } }
+ * @param {object} patch — partial session object, e.g. { ui: { zoom: 2 } }
  */
 export function updateSession(patch) {
-  _updateSessionFn(patch);
+  const tab = activeTab.value;
+  if (tab) {
+    const p = /** @type {any} */ (patch);
+    if (p.selection !== undefined) tab.session.selection = p.selection;
+    if (p.hover !== undefined) tab.session.hover = p.hover;
+    if (p.clipboard !== undefined) tab.session.clipboard = p.clipboard;
+    if (p.ui) {
+      for (const [k, v] of Object.entries(p.ui)) {
+        /** @type {any} */ (tab.session.ui)[k] = v;
+      }
+    }
+    if (p.canvas) {
+      for (const [k, v] of Object.entries(p.canvas)) {
+        /** @type {any} */ (tab.session.canvas)[k] = v;
+      }
+    }
+  }
 }
 
 /**
- * Update a single UI field and re-render. Routes through session dispatch (no autosave, no
- * history).
+ * Update a single UI field.
  *
  * @param {string} field
- * @param {any} value
+ * @param {unknown} value
  */
 export function updateUi(field, value) {
-  _updateSessionFn({ ui: { [field]: value } });
+  const tab = activeTab.value;
+  if (tab) {
+    /** @type {any} */ (tab.session.ui)[field] = value;
+  }
 }
 
 /**
  * Update the canvas async state (status, scope, error).
  *
- * @param {any} patch
+ * @param {object} patch
  */
 export function updateCanvas(patch) {
-  _updateSessionFn({ canvas: patch });
-}
-
-// ─── 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);
+  const tab = activeTab.value;
+  if (tab) {
+    for (const [k, v] of Object.entries(patch)) {
+      /** @type {any} */ (tab.session.canvas)[k] = v;
     }
   }
 }
-
-/** @type {Function[]} */
-const _updateMiddleware = [];
-
-/**
- * Register middleware that runs after every update().
- *
- * @param {Function} fn — receives (state) after core update
- */
-export function addUpdateMiddleware(fn) {
-  _updateMiddleware.push(fn);
-}
-
-/**
- * Run all registered update middleware.
- *
- * @param {any} state
- */
-export function runUpdateMiddleware(state) {
-  for (const mw of _updateMiddleware) mw(state);
-}
-
-/** @type {Function[]} */
-const _postRenderHooks = [];
-
-/**
- * Register a hook that runs after renders in update().
- *
- * @param {Function} fn — receives (prevDoc, prevSel)
- */
-export function addPostRenderHook(fn) {
-  _postRenderHooks.push(fn);
-}
-
-/**
- * Run all registered post-render hooks.
- *
- * @param {any} prevDoc
- * @param {any} prevSel
- */
-export function runPostRenderHooks(prevDoc, prevSel) {
-  for (const hook of _postRenderHooks) hook(prevDoc, prevSel);
-}